.seite { padding: 1rem; max-width: 36rem; margin: 0 auto; }

.formular { display: flex; flex-direction: column; gap: 0.8rem; }
.formular label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--schrift-leise); }
/* Das Kaestchen bleibt klein, die Tippflaeche nicht: auf dem Handy wird das
   ganze Label getroffen, nicht nur das Quadrat. */
.formular label.haken {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  color: var(--schrift);
  min-height: 48px;
  cursor: pointer;
}
.formular input[type="checkbox"] { width: 22px; height: 22px; min-height: auto; }
.formular .freiwillig { color: var(--schrift-still); font-size: 0.75rem; }
.formular [aria-invalid="true"] { border-color: var(--fehler); }
.formular textarea { min-height: 72px; resize: vertical; }
.knopf.gross { min-height: 56px; font-size: 1rem; }

.zeitraum { display: flex; gap: 0.6rem; }
.zeitraum label { flex: 1; }

.treffer { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.treffer li { background: var(--flaeche); border-left: 4px solid var(--kenn); border-radius: 8px; padding: 0.6rem 0.7rem; }
.treffer .titel { font-weight: 700; }
.treffer .zeile2 { color: var(--schrift-leise); font-size: 0.82rem; }
.blaettern { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
/* Ohne diese Zeile gewinnt das display:flex oben gegen das hidden-Attribut
   (gleiche Spezifitaet, spaetere Regel), und die Blaetter-Knoepfe stehen auch
   dann da, wenn es nur eine Seite gibt. */
.blaettern[hidden] { display: none; }