/* ==========================================================================
   GRUNDLAGE — Fließtext, Überschriften, der Seitenkopf eines Bereichs.

   DER SEITENKOPF IST DER EIGENTLICHE UMBAU.
   Bisher fing jeder Bereich mit einer Karte „1 · Unterlagen hineingeben" an.
   Wer die Seite öffnete, sah einen Arbeitsschritt — nicht, wo er ist und
   wofür die Seite da ist. Jetzt steht über jedem Bereich dasselbe: Name,
   ein Satz wozu, und rechts die Handlung, die man hier am häufigsten
   ausführt. Erst darunter kommt der Inhalt.
   ========================================================================== */

*{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--ink);
  font-family:var(--schrift); font-size:var(--gr-lies); line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* Ziffern stehen überall untereinander, wo sie verglichen werden. Das ist
   bei einer Buchhaltung kein Feinschliff, sondern der halbe Zweck. */
table, .zahl, .wert, .betrag, .stand, .kennzahl, input[type=number]{
  font-variant-numeric:tabular-nums;
}

h1,h2,h3{margin:0; letter-spacing:-.02em; text-wrap:balance; font-weight:600}
h1{font-size:var(--gr-h1)}
h2{font-size:var(--gr-h2)}
h3{font-size:var(--gr-h3)}
p{margin:0}

a{color:var(--gold); text-underline-offset:3px}

/* Die Augenbrauen-Zeile: klein, versal, gesperrt. Sie benennt die Gattung
   dessen, was darunter steht — und ist das einzige Versal-Element im
   ganzen Haus, damit sie ihre Aufgabe behält. */
.augenbraue{
  font-size:var(--gr-mini); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* --- Seitenkopf eines Bereichs ------------------------------------------ */
.seitenkopf{
  display:flex; align-items:flex-start; gap:var(--a4); flex-wrap:wrap;
  padding-bottom:var(--a5); margin-bottom:var(--a5);
  border-bottom:1px solid var(--line);
}
.seitenkopf .text{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:var(--a1)}
.seitenkopf h1{font-size:var(--gr-seite); letter-spacing:-.5px; line-height:1.2}
.seitenkopf .wozu{color:var(--muted); font-size:var(--gr-neben); max-width:62ch}
.seitenkopf .taten{display:flex; gap:var(--a2); flex-wrap:wrap; align-items:center}

/* --- Fließtext in Karten ------------------------------------------------ */
.sub{color:var(--muted); font-size:var(--gr-neben)}
.hinweis{color:var(--muted); font-size:var(--gr-neben); max-width:68ch}
.leer{color:var(--muted); font-size:var(--gr-neben); font-style:italic}
.lies{max-width:68ch; font-size:var(--gr-text); color:var(--ink2)}

/* Ein Abschnittstitel zwischen Karten — er gliedert, er ist keine Karte. */
.abschnitt-titel{
  font-size:var(--gr-mini); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  margin:var(--a6) 0 var(--a3);
}

/* Wer keine Bewegung möchte, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* Tastaturbedienung bleibt sichtbar — überall, nicht nur im Menü. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--r-klein);
}