/* Gestaltungskit Tax Sparrow Onboarding. Schriften liegen im Repo (fonts/fonts.css). Keine Fremdaufrufe. */
:root {
  --akzent: #f1861d;
  --akzent-dunkel: #c96a0f;
  --dunkel: #0f1a24;
  --text: #14181d;
  --nebentext: #7a7a72;
  --papier: #faf9f5;
  --flaeche: #ffffff;
  --linie: #e4e0d8;
  --gruen: #2e7d4f;
  --rot: #b3362f;
  --gelb: #b8860b;
  --schrift: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --schrift-titel: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --schrift-mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(15, 26, 36, 0.06), 0 8px 24px rgba(15, 26, 36, 0.05);
  /* Flaechen fuer Zustaende und Bedienelemente; das dunkle Thema (unten) setzt sie neu. */
  --linie-stark: #c9c3b6;
  --knopf-bg: var(--dunkel);
  --knopf-text: #fff;
  --knopf-hover: #1c2c3b;
  --akzent-flaeche: #fff7ee;
  --gut-flaeche: #ecf5ef;
  --grau-flaeche: #f3f1ea;
  --fehler-flaeche: #fbeeed;
  --warn-flaeche: #fbf3e2;
  --leer-flaeche: #eceae3;
  --sparrow-bg: #fff7ee;
  --sparrow-linie: #f6d5b3;
  --toast-bg: var(--dunkel);
  --ueberschrift: inherit;
}
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); color: var(--text); background: var(--papier); line-height: 1.5; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; margin-top: 1.6em; }
h3 { font-size: 1.25rem; margin-top: 1.2em; }
p { margin: 0 0 1em; }
a { color: var(--akzent-dunkel); }
.mono { font-family: var(--schrift-mono); font-size: 0.9em; }
.neben { color: var(--nebentext); }
.klein { font-size: 0.875rem; }
.versteckt { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Seite */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.kopf .marke { font-family: var(--schrift-titel); font-size: 1.4rem; color: var(--dunkel); text-decoration: none; display: flex; align-items: center; gap: 0.6rem; }
.kopf .marke .punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); display: inline-block; }
.kopf .logo { display: block; height: 38px; width: auto; }
.inhalt { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.inhalt.schmal { max-width: 560px; }
.fuss { padding: 2rem 1.25rem; color: var(--nebentext); font-size: 0.85rem; border-top: 1px solid var(--linie); text-align: center; }
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zwei { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .zwei { grid-template-columns: 1fr 1fr; } }

/* Zustandszeile */
.zustandszeile { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 0.9rem; }
.zustandszeile .lampe { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); }
.zustandszeile .lampe.warten { background: var(--gelb); }
.zustandszeile .lampe.aus { background: var(--nebentext); }
.zustandszeile .lampe.fehler { background: var(--rot); }

/* Sparrow-Feld */
.sparrow { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--sparrow-bg); border: 1px solid var(--sparrow-linie); border-radius: var(--radius); margin: 1rem 0 1.5rem; }
.sparrow .vogel { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; font-family: var(--schrift-titel); font-size: 1.2rem; }
.sparrow p { margin: 0; }

/* Schrittleiste */
.schrittleiste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.schrittleiste li { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 0.85rem; color: var(--nebentext); }
.schrittleiste li.aktiv { border-color: var(--akzent); color: var(--text); }
.schrittleiste li.erledigt { color: var(--gruen); }
.schrittleiste li .nr { font-family: var(--schrift-mono); font-size: 0.75rem; }

/* Abschnitte und Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--schatten); margin-bottom: 1.25rem; }
/* Ueberschrift in einer Karte ist eine Zwischenebene, keine Seitenueberschrift. */
.karte > h2 { font-size: 1.3rem; margin: 0 0 0.8rem; }
.karte > h2 + p.klein { margin-top: -0.4rem; }
.karte.leise { box-shadow: none; }
.karte h2:first-child, .karte h3:first-child { margin-top: 0; }
.abschnitt { scroll-margin-top: 1rem; }

/* Kacheln */
.kachel { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.kachel:hover { border-color: var(--linie-stark); }
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel:has(input:checked) { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(241, 134, 29, 0.15); }
.kachel:has(input:focus-visible) { outline: 2px solid var(--dunkel); outline-offset: 2px; }
.kachel .titel { font-weight: 600; }
.kachel .hilfe { color: var(--nebentext); font-size: 0.85rem; }

/* Formulare */
label.feld { display: block; margin-bottom: 0.9rem; }
label.feld > span { display: block; font-size: 0.85rem; color: var(--nebentext); margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], select, textarea {
  width: 100%; padding: 0.6rem 0.75rem; border: 1.5px solid var(--linie); border-radius: 8px; font: inherit; background: var(--flaeche); color: var(--text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; }
textarea { min-height: 6rem; resize: vertical; }
.knopf { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--knopf-bg); background: var(--knopf-bg); color: var(--knopf-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf.akzent { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.akzent:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf.leise { background: transparent; color: var(--text); border-color: var(--linie-stark); }
.knopf.leise:hover { background: var(--grau-flaeche); border-color: var(--linie-stark); }
.knopf.klein { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; }
.hinweis { padding: 0.75rem 1rem; border-radius: 8px; background: var(--grau-flaeche); border-left: 3px solid var(--nebentext); margin: 0.75rem 0; }
.hinweis.fehler { background: var(--fehler-flaeche); border-left-color: var(--rot); }
.hinweis.gut { background: var(--gut-flaeche); border-left-color: var(--gruen); }
.hinweis.warnung { background: var(--warn-flaeche); border-left-color: var(--gelb); }
.hinweis ul { margin: 0.3rem 0 0 1.1rem; padding: 0; }
/* Vorfuehrhinweis: gestrichelt, damit sofort sichtbar ist, dass dieser Satz nur in der Vorfuehrung steht. */
.vorfuehr-hinweis { margin: 0.9rem 0; padding: 0.7rem 0.9rem; border: 1px dashed var(--linie-stark); border-radius: 8px; color: var(--nebentext); line-height: 1.7; }
.vorfuehr-hinweis strong { font-weight: 700; color: var(--text); }
.vorfuehr-hinweis .knopf { margin-left: 0.4rem; vertical-align: middle; }
.wahl { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.wahl label { padding: 0.45rem 0.8rem; border: 1.5px solid var(--linie); border-radius: 999px; cursor: pointer; background: var(--flaeche); }
.wahl label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-flaeche); }
.wahl input { position: absolute; opacity: 0; }
.haken { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
.haken input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; }
.haken.erledigt .titel { text-decoration: line-through; color: var(--nebentext); }

/* Ablagefeld */
.ablagefeld { border: 2px dashed var(--linie-stark); border-radius: var(--radius); padding: 1.25rem; text-align: center; background: var(--flaeche); transition: border-color 0.15s, background 0.15s; }
.ablagefeld.aktiv { border-color: var(--akzent); background: var(--akzent-flaeche); }
.ablagefeld input[type="file"] { display: block; margin: 0.6rem auto 0; }
.ablagefeld .status { margin-top: 0.5rem; font-size: 0.85rem; color: var(--nebentext); }
.dateiliste { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.dateiliste li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--linie); font-size: 0.95rem; }
.dateiliste .erkannt { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--gut-flaeche); color: var(--gruen); }
.dateiliste .erkannt.offen { background: var(--grau-flaeche); color: var(--nebentext); }

/* Dokumentkarte */
.dokumentkarte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.9rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); margin-bottom: 0.6rem; }
.dokumentkarte:has(.nr) { grid-template-columns: auto minmax(0, 1fr) auto; }
.dokumentkarte .knopfpaar { display: flex; gap: 0.4rem; flex-wrap: nowrap; }
/* Dokumente des Mandanten: zwei Karten je Zeile, damit Titel nicht ueber drei Zeilen brechen. */
.dokumentraster { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.dokumentraster .dokumentkarte { margin-bottom: 0; }
.dokumentkarte .nr { font-family: var(--schrift-mono); font-size: 0.8rem; color: var(--nebentext); }
.dokumentkarte .titel { font-weight: 600; }
.dokumentkarte .zustand { font-size: 0.85rem; }
.dokumentkarte .zustand.gruen { color: var(--gruen); }
.dokumentkarte .zustand.offen { color: var(--gelb); }

/* Zeichenfeld */
.zeichenfeld { border: 1.5px solid var(--linie); border-radius: var(--radius); background: #fff; position: relative; }
.zeichenfeld canvas { display: block; width: 100%; height: 180px; touch-action: none; border-radius: var(--radius); }
.zeichenfeld .linie { position: absolute; left: 1rem; right: 1rem; bottom: 2.2rem; border-top: 1px solid var(--linie-stark); pointer-events: none; }
.zeichenfeld .hinweis-klein { position: absolute; left: 1rem; bottom: 0.6rem; font-size: 0.75rem; color: var(--nebentext); pointer-events: none; }

/* Codefeld */
.codefeld { display: flex; gap: 0.5rem; justify-content: center; margin: 1rem 0; }
.codefeld input { width: 3rem; height: 3.4rem; text-align: center; font-family: var(--schrift-mono); font-size: 1.5rem; padding: 0; }

/* Tabellen */
table.liste { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
table.liste tr + tr td { border-top: 1px solid var(--linie); }
table.liste th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nebentext); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie); }
table.liste td { padding: 0.7rem 0.7rem; border-bottom: none; vertical-align: top; }
table.liste td.r, table.liste th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.liste tr.summe td { font-weight: 700; border-top: 2px solid var(--text); }

/* Kanzleiseite: dunkle Leiste, Spalten */
.leiste { background: var(--dunkel); color: #fff; padding: 0.7rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.leiste a { color: #fff; text-decoration: none; opacity: 0.85; }
.leiste a.aktiv, .leiste a:hover { opacity: 1; border-bottom: 2px solid var(--akzent); }
.leiste .marke { font-family: var(--schrift-titel); font-size: 1.2rem; margin-right: 1rem; }
/* Im Rahmen der Regie (Kanzleisicht) faellt die Leiste weg: der Rahmen ist schmal, die Navigation gehoert der Regie. */
.im-rahmen .leiste { display: none; }
.spalten { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .spalten.drei { grid-template-columns: 1fr 1.2fr 1fr; } .spalten.zwei { grid-template-columns: 2fr 1fr; } }
/* Zustandsmarke: Wort statt Schluessel, darum die Grundschrift. Der Ton traegt die Farbe (warten gelb, gut gruen, rot rot). */
.marke-zustand { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; background: var(--grau-flaeche); color: var(--text); }
.marke-zustand.warten { background: var(--warn-flaeche); color: var(--gelb); }
.marke-zustand.gut { background: var(--gut-flaeche); color: var(--gruen); }
.pipeline { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pipeline .spalte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.75rem; min-height: 120px; }
.pipeline .spalte h3 { font-family: var(--schrift); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nebentext); margin: 0 0 0.5rem; }
.pipeline .fall { display: block; padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--papier); margin-bottom: 0.4rem; text-decoration: none; color: var(--text); font-size: 0.9rem; }
.pipeline .fall:hover { background: var(--akzent-flaeche); }
.strom { font-family: var(--schrift-mono); font-size: 0.8rem; max-height: 60vh; overflow: auto; background: #0f1a24; color: #dfe6ee; padding: 0.9rem; border-radius: var(--radius); }
.strom .zeile { padding: 0.15rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.strom .zeit { color: #8fa3b8; }
.strom .fehler { color: #ff9c8f; }
.kennzahl { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.15rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.kennzahl .wert { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl .name { color: var(--nebentext); font-size: 0.82rem; letter-spacing: 0.01em; }
/* Checkliste als Arbeitsflaeche (Mandantenbereich): Faecher, Posten, Steuerjahr, Fortschritt. */
.slot-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.slot-kopf h1, .slot-kopf h2 { margin-bottom: 0.25rem; }
.jahre { display: inline-flex; gap: 0.3rem; padding: 0.2rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); }
.jahre a { padding: 0.35rem 0.8rem; border-radius: 999px; text-decoration: none; color: var(--nebentext); font-size: 0.85rem; }
.jahre a.aktiv { background: var(--knopf-bg); color: var(--knopf-text); }
.fortschritt { height: 8px; border-radius: 999px; background: var(--leer-flaeche); overflow: hidden; margin: 0.9rem 0 0.35rem; }
.fortschritt span { display: block; height: 100%; background: var(--gruen); border-radius: 999px; transition: width 0.3s; }
.slots { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-top: 0.9rem; }
@media (min-width: 720px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.slot { color: var(--text); display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.15rem; background: var(--flaeche); border: 1.5px solid var(--linie); border-left-width: 5px; border-radius: var(--radius); box-shadow: var(--schatten); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.slot:hover { border-color: var(--akzent); transform: translateY(-1px); }
.slot.offen { border-left-color: var(--nebentext); }
.slot.in_arbeit { border-left-color: var(--akzent); }
.slot.vollstaendig { border-left-color: var(--gruen); }
.slot .titel { font-size: 1.05rem; }
.slot .zaehler { margin-top: auto; }
.slot .knopf { align-self: flex-start; margin-top: 0.4rem; }
.slot-status { display: inline-block; align-self: flex-start; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; background: var(--leer-flaeche); color: var(--nebentext); vertical-align: middle; }
.slot.in_arbeit .slot-status, .slot-status.in_arbeit { background: var(--akzent-flaeche); color: var(--akzent-dunkel, #c56a12); }
.slot.vollstaendig .slot-status, .slot-status.vollstaendig { background: var(--gut-flaeche); color: var(--gruen); }
.pfad { margin: 0 0 0.5rem; color: var(--nebentext); }
.pfad a { color: inherit; }
.posten { border-left: 5px solid var(--linie); }
.posten.belegt { border-left-color: var(--gruen); }
.posten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.posten-kopf h2 { font-size: 1.15rem; margin: 0; }
.marke-pflicht { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; background: var(--akzent-flaeche); color: var(--akzent-dunkel, #c56a12); vertical-align: middle; }
.posten.belegt .marke-pflicht { background: var(--gut-flaeche); color: var(--gruen); }
.posten .ablagefeld { padding: 0.9rem; }
.felder { display: grid; gap: 0.6rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.felder label.feld { margin-bottom: 0; }
.felder .feld-titel { display: block; font-size: 0.85rem; color: var(--nebentext); margin-bottom: 0.25rem; }
label.feld > span.einheit, .einheit { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.einheit input { flex: 1; }
.einheit em { font-style: normal; color: var(--nebentext); font-size: 0.9rem; min-width: 2.2rem; }
form.inline { display: inline; }
.gruen { color: var(--gruen); }
[hidden] { display: none !important; }

/* Schritt 2 als Baum: Bereich-Kacheln oben, darunter die Haekchenliste; Schritt 3: Tool-Panel je Aufbereitungstool. */
.haken-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.haken-liste .haken { margin: 0; }
.haken { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); cursor: pointer; }
.haken:has(input:checked) { border-color: var(--akzent); background: var(--akzent-flaeche); }
.haken input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--akzent); flex: 0 0 auto; }
.tool-panel { margin-top: 0.25rem; }
.verbinden { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px dashed var(--akzent); border-radius: var(--radius); background: var(--akzent-flaeche); }
.schritte-kurz { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
.schritte-kurz li { margin-bottom: 0.3rem; }

/* Popup "Gespeichert": unten mittig, mit Haken, verschwindet von selbst. */
.toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem); opacity: 0; z-index: 50; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; border-radius: 999px; background: var(--toast-bg); color: #fff; border: 1px solid transparent; font-weight: 600; box-shadow: 0 10px 30px rgba(15, 26, 36, 0.25); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.toast::before { content: ""; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--gruen); flex: 0 0 auto; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-size: 100%; }
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Kanzleiseite als Arbeitsanwendung (Oberflaeche 2026): Seitenleiste, Kopfzeile, Inhalt. Hoehe ueber Flaechenstufen. */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.app.einspaltig { grid-template-columns: 1fr; }
.seite { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1rem 0.8rem; background: var(--seite-bg, var(--flaeche)); border-right: 1px solid var(--linie); }
.seite .logo { display: block; height: 34px; width: auto; margin: 0.35rem 0.5rem 1.4rem; }
.seite .gruppe { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nebentext); margin: 0.9rem 0.65rem 0.35rem; }
.seite a.nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.95rem; border-left: 3px solid transparent; }
.seite a.nav:hover { background: var(--grau-flaeche); }
.seite a.nav.aktiv { background: var(--akzent-flaeche); color: var(--ueberschrift-farbe, var(--text)); border-left-color: var(--akzent); }
.seite .zahl { font-size: 0.75rem; color: var(--nebentext); font-variant-numeric: tabular-nums; }
.seite .unten { margin-top: auto; padding: 0.7rem 0.4rem 0; border-top: 1px solid var(--linie); font-size: 0.85rem; color: var(--nebentext); display: flex; flex-direction: column; gap: 0.5rem; }
.seite .unten a { color: var(--text); text-decoration: none; }
.app-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 30; background: var(--kopf-bg, var(--papier)); }
.app-kopf h1 { font-size: 1.35rem; margin: 0; }
.app-kopf .rechts { display: flex; align-items: center; gap: 0.8rem; }
.app-kopf .suche input { width: 260px; padding: 0.45rem 0.75rem; border-radius: 999px; }
.app-main { padding: 1.75rem 2rem 3rem; max-width: 1440px; width: 100%; margin: 0; }
/* Seiten, die den ganzen Bildschirm brauchen (Regie): keine Breitengrenze. */
.app-main.weit { max-width: none; padding: 1.25rem 1.5rem 2rem; }
.chip-demo { display: inline-block; background: var(--akzent); color: #0b1118; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; }
.im-rahmen .seite, .im-rahmen .app-kopf { display: none; }
.im-rahmen .app { grid-template-columns: 1fr; }
.im-rahmen .app-main { padding: 1rem; }
[data-thema="dunkel"] { --seite-bg: #0a1018; --kopf-bg: rgba(6, 10, 16, 0.92); --ueberschrift-farbe: #fff; }
[data-thema="dunkel"] .karte { border-color: transparent; }
[data-thema="dunkel"] .karte.leise { background: #0c1620; }
[data-thema="dunkel"] table.liste tbody tr:hover td { background: var(--grau-flaeche); }
[data-thema="dunkel"] .kennzahl { border-color: transparent; }
[data-thema="dunkel"] .pipeline .spalte { border-color: transparent; }
[data-thema="dunkel"] .pipeline .fall { background: #142030; }
[data-thema="dunkel"] .pipeline .fall:hover { background: #1a2a3a; }
[data-thema="dunkel"] .dokumentkarte { border-color: transparent; background: #0c1620; }
[data-thema="dunkel"] .marke-zustand.rot { background: var(--fehler-flaeche); color: var(--rot); }
.marke-zustand.rot { background: var(--fehler-flaeche); color: var(--rot); }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.karte.fakten dl { margin: 0; }
.karte.fakten dd { overflow-wrap: anywhere; hyphens: none; }

/* Leerer Zustand: ein Satz statt einer leeren Flaeche. */
.leer { margin: 0.2rem 0 0; padding: 1rem 1.1rem; border: 1px dashed var(--linie-stark); border-radius: var(--radius); color: var(--nebentext); font-size: 0.9rem; }

/* Aufklappbarer Block (Verwaltung, lange Verlaeufe): Kopf klickbar, Inhalt eingerueckt. */
.block { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; background: var(--flaeche); }
.block > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.block > summary::-webkit-details-marker { display: none; }
.block > summary::after { content: "+"; color: var(--nebentext); font-size: 1.1rem; line-height: 1; }
.block[open] > summary::after { content: "–"; }
.block[open] > summary { margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linie); }
.block table.liste { margin-bottom: 0; }

/* Ueberblick des Falls: der Satz, was ansteht, und sechs Felder mit dem Stand. */
.karte.anstehend { border-left: 3px solid var(--akzent); }
.karte.anstehend .satz { font-size: 1.05rem; margin: 0; }
.ueberblick-raster { display: grid; gap: 0.9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ueberblick-raster .zelle { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.2rem 0; }
.ueberblick-raster .name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nebentext); }
.ueberblick-raster .wert { font-size: 1rem; }
table.liste.verlauf td { padding: 0.75rem 0.7rem; }
table.liste td.nowrap { white-space: nowrap; }

/* Dashboard: Kacheln im 12er-Raster, Balken je Station, Zeitleiste */
.dash { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.dash > section { grid-column: span 12; }
@media (min-width: 900px) { .dash > section.halb { grid-column: span 6; } .dash > section.drittel { grid-column: span 4; } .dash > section.zweidrittel { grid-column: span 8; } }
.dash h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.kennzahlen { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.balken { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0; text-decoration: none; color: inherit; }
.balken .name { width: 190px; flex: 0 0 auto; font-size: 0.85rem; color: var(--nebentext); }
.balken .lauf { flex: 1; height: 8px; background: var(--leer-flaeche); border-radius: 999px; overflow: hidden; }
.balken .lauf span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.balken .wert { width: 2.2rem; text-align: right; font-size: 0.9rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.balken:hover .name { color: var(--text); }
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--linie); }
.zeitleiste li { position: relative; padding: 0 0 0.85rem 0.6rem; font-size: 0.9rem; }
.zeitleiste li::before { content: ""; position: absolute; left: -1.35rem; top: 0.45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.zeitleiste li.fehler::before { background: var(--rot); }
.zeitleiste .zeit { font-size: 0.78rem; color: var(--nebentext); font-variant-numeric: tabular-nums; }
.aufgabe { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
.aufgabe:last-child { border-bottom: none; }
.aufgabe .text { flex: 1; }

/* Fall-Seite in drei Spalten: Fakten, Inhalt, Verlauf */
.fall-raster { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1200px) { .fall-raster { grid-template-columns: 290px minmax(0, 1fr) 300px; } }
.fakten dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.7rem; font-size: 0.88rem; }
.fakten dt { color: var(--nebentext); }
.fakten dd { margin: 0; overflow-wrap: anywhere; }

/* Angaben des Mandanten auf der Fallseite: Gruppen nebeneinander, je Gruppe Begriff und Wert; "fehlt" rot,
   der Satz fuer DATEV klein darunter. Ein Raster aus Gruppen, keine Kachelwand: Ueberschrift plus Zeilen. */
.angaben-raster { display: grid; gap: 1.4rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); }
.angaben-gruppe h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--linie); }
/* Begriffsspalte schrumpft in schmalen Spalten (Review-Seite, 28.10.2026); der Wert bricht nie Zeichen fuer Zeichen. */
dl.angaben { margin: 0; display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 0.45rem 1rem; font-size: 0.9rem; }
dl.angaben dt { color: var(--nebentext); }
dl.angaben dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
dl.angaben dd.fehlt { color: var(--rot); font-weight: 600; }
dl.angaben dd.achtung { color: var(--gelb); font-weight: 600; }
/* Der Satz zum Wert ist eine Zeile, kein Hinweiskasten: die allgemeine Regel fuer .hinweis (Rahmen, Flaeche) zuruecknehmen. */
dl.angaben dd .hinweis { display: block; font-size: 0.8rem; font-weight: 400; color: var(--nebentext); margin: 0.15rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
@media (max-width: 600px) { dl.angaben { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } dl.angaben dd { margin-bottom: 0.5rem; } }
/* Zwei Karten nebeneinander duerfen ihre Spalte nicht sprengen (lange E-Mail-Adresse im Reiter Antworten). */
.zwei > * { min-width: 0; }
.zwei.untereinander { grid-template-columns: 1fr; }
.zwei table.liste { table-layout: fixed; width: 100%; }
.zwei table.liste td:first-child { width: 9rem; }
.zwei td { overflow-wrap: break-word; }
.segment { display: flex; flex-wrap: wrap; gap: 0.15rem; border-bottom: 1px solid var(--linie); margin: 0 0 1rem; }
.segment a { padding: 0.5rem 0.75rem; color: var(--nebentext); text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.92rem; }
.segment a:hover { color: var(--text); }
.segment a.aktiv { color: var(--ueberschrift-farbe, var(--text)); border-bottom-color: var(--akzent); }

.app-main.tor-main { max-width: none; padding: 0 1.25rem; position: relative; overflow: hidden; }
/* Das Piratenschiff auf See hinter der Anmeldung (Raphael mag Piraten). Halb sichtbar, damit Marke und Formular
   vorne bleiben; das Schiff liegt links, die Flagge traegt das Emblem. Ein echtes img statt Hintergrundbild,
   damit der Waechter pruefen kann, dass es wirklich laedt. */
.tor-see { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% center; opacity: 0.5; pointer-events: none; z-index: 0; }
.tor-main .tor { position: relative; z-index: 1; }
/* Breit: die Marke steht oben links, nicht mittig ueber dem Schiff. Sonst laege die Wortmarke genau auf dem
   Flaggen-Emblem, zwei Zeichen uebereinander. Die Flagge weht rechts der Marke frei, das Formular bleibt rechts. */
@media (min-width: 900px) { .tor-main .tor-marke { justify-self: start; align-self: start; padding: 2.5rem 0 0 1rem; } }

/* Zwei Wege zum selben Dokument: ansehen oder speichern. */
.knopfpaar { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

/* Anmeldeseite der Kanzleiseite: Marke gross links, Formular rechts; auf schmalen Fenstern untereinander. */
.tor { display: grid; gap: 2.5rem; align-items: center; justify-items: center; min-height: calc(100vh - 3rem); padding: 1.5rem 0; }
@media (min-width: 900px) { .tor { grid-template-columns: 1fr 1fr; justify-items: stretch; gap: 4rem; padding: 0 2rem; } }
.tor-marke { text-align: center; max-width: 34rem; }
@media (min-width: 900px) { .tor-marke { text-align: left; justify-self: end; } }
.tor-marke .logo { display: block; width: min(320px, 70vw); height: auto; margin: 0 auto 1.5rem; }
@media (min-width: 900px) { .tor-marke .logo { margin-left: 0; } }
.tor-marke h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0 0 0.3rem; letter-spacing: -0.02em; }
/* Die Produktzeile steht unter dem Logo und tritt nicht gegen die Wortmarke an: kleiner, ruhiger, gesperrt. */
.tor-marke h1.produktzeile { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: 0.01em; margin-top: 0.6rem; }
.tor-marke p { margin: 0; font-size: 1.05rem; }
.tor-karte { width: min(26rem, 92vw); padding: 1.75rem 1.75rem 1.5rem; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
@media (min-width: 900px) { .tor-karte { justify-self: start; } }
.tor-karte h2 { margin: 0 0 1rem; font-size: 1.5rem; }
.tor-karte .knopfzeile { margin-top: 1.1rem; }
.tor-karte .knopf { width: 100%; justify-content: center; }

/* Zeile "Jetzt dran" der Regie: wer den naechsten Zug macht, in einem Satz, mit dem Weg dorthin. */
.dran { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.8rem 0; padding: 0.7rem 1rem; }
.dran .wer { font-family: var(--schrift-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--akzent-flaeche); color: var(--akzent-dunkel); }
.dran .was { flex: 1; min-width: 18rem; }
.dran[hidden] { display: none; }

/* Speichern-Leiste des Mandantenbereichs: bleibt beim Blättern am unteren Rand stehen und sagt, ob alles gesichert ist.
   Gespeichert wird beim Ändern von selbst; der Knopf ist für alle, die ihn trotzdem drücken wollen. */
.speichern-leiste { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; padding: 0.75rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.speichern-leiste .stand { font-size: 0.875rem; color: var(--nebentext); }
.speichern-leiste .stand.gut { color: var(--gruen); }
.speichern-leiste .stand.fehler { color: var(--rot); }

/* Posteingang des Mandanten (Vorfuehrung): Mailprogramm mit Liste links und Brief rechts. Der Brief liegt auf Papier,
   weil Mailprogramme Nachrichten hell zeigen; darum setzt .mail-papier seine Farben selbst und erbt nicht das Thema. */
.mailapp { display: grid; grid-template-columns: 264px minmax(0, 1fr); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: var(--flaeche); min-height: 520px; }
.im-rahmen .mailapp { height: calc(100vh - 2rem); }
.mailliste { border-right: 1px solid var(--linie); background: var(--seite-bg, var(--papier)); overflow-y: auto; }
.mailliste-kopf { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: inherit; }
.maileintrag { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; border-left: 3px solid transparent; }
.maileintrag:hover { background: var(--grau-flaeche); }
.maileintrag.aktiv { border-left-color: var(--akzent); background: var(--akzent-flaeche); }
.maileintrag .zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.maileintrag .von { font-weight: 600; font-size: 0.9rem; }
.maileintrag .zeit, .maileintrag .klammer { font-size: 0.75rem; color: var(--nebentext); font-family: var(--schrift-mono); }
.maileintrag .betreff { font-size: 0.88rem; line-height: 1.35; }
.maileintrag .neu { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; color: var(--akzent-dunkel); }
.neu-mail { margin: 0; padding: 0.6rem 1rem; background: var(--akzent-flaeche); border-bottom: 1px solid var(--linie); }
.mailbrief { padding: 1.2rem 1.4rem; overflow-y: auto; }
.mailbrief-kopf h2 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.mailbrief-kopf p { margin: 0 0 0.4rem; }
.mailbrief .anhaenge { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
.mailbrief .anhang { display: inline-block; padding: 0.25rem 0.6rem; border: 1px solid var(--linie-stark); border-radius: 999px; text-decoration: none; }
.mailbrief-leer { max-width: 46ch; padding: 2rem 0; }
/* Der Brief behaelt Mailbreite, auch wenn das Fenster breiter ist: so sieht er aus wie in einem Mailprogramm. */
.mail-papier { background: #ffffff; color: #191919; border-radius: 10px; padding: 1.4rem 1.6rem; margin-top: 1rem; max-width: 760px; }
.mail-papier h1, .mail-papier h2, .mail-papier h3, .mail-papier strong, .mail-papier p, .mail-papier li, .mail-papier td { color: #191919; }
.mail-papier a { color: #9a4f0a; }
.mail-papier .mail-text { white-space: pre-wrap; font-family: var(--schrift); font-size: 0.95rem; margin: 0; }
.mail-fuss { margin: 0.8rem 0 0; }

/* Dunkles Thema nach tax-sparrow.de (Nacht #060a10, Flaechen #0f1a24 und #142030, Knochen #c8c4ba, Orange #f1861d).
   Eingeschaltet ueber data-thema="dunkel" am Wurzelelement; alle Bausteine lesen nur die Tokens. */
[data-thema="dunkel"] {
  --papier: #060a10;
  --flaeche: #0f1a24;
  --linie: rgba(255, 255, 255, 0.08);
  --linie-stark: rgba(255, 255, 255, 0.2);
  --text: #e8e4dc;
  --nebentext: #a8a59c;
  --dunkel: #0f1a24;
  --akzent-dunkel: #f1861d;
  --gruen: #34d399;
  --rot: #f87171;
  --gelb: #fbbf24;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --knopf-bg: var(--akzent);
  --knopf-text: #0b1118;
  --knopf-hover: #ff9a3a;
  --akzent-flaeche: rgba(241, 134, 29, 0.14);
  --gut-flaeche: rgba(52, 211, 153, 0.14);
  --grau-flaeche: rgba(255, 255, 255, 0.06);
  --fehler-flaeche: rgba(248, 113, 113, 0.14);
  --warn-flaeche: rgba(251, 191, 36, 0.14);
  --leer-flaeche: rgba(255, 255, 255, 0.1);
  --sparrow-bg: rgba(241, 134, 29, 0.1);
  --sparrow-linie: rgba(241, 134, 29, 0.35);
  --toast-bg: #142030;
  color-scheme: dark;
}
[data-thema="dunkel"] h1, [data-thema="dunkel"] h2, [data-thema="dunkel"] h3 { color: #fff; }
[data-thema="dunkel"] a { color: var(--akzent); }
/* Fachkarten sind ganzflaechige Verweise: ihr Text bleibt Text, nur der Titel traegt die Marke. */
[data-thema="dunkel"] a.slot { color: var(--text); }
[data-thema="dunkel"] a.slot .titel { color: var(--akzent); }
[data-thema="dunkel"] .kopf { background: rgba(6, 10, 16, 0.92); border-bottom-color: var(--linie); }
[data-thema="dunkel"] .kopf .marke { color: #fff; }
[data-thema="dunkel"] input[type="text"], [data-thema="dunkel"] input[type="email"], [data-thema="dunkel"] input[type="tel"], [data-thema="dunkel"] input[type="number"], [data-thema="dunkel"] input[type="password"], [data-thema="dunkel"] input[type="date"], [data-thema="dunkel"] select, [data-thema="dunkel"] textarea { background: #0a1018; border-color: var(--linie-stark); }
[data-thema="dunkel"] input:focus-visible, [data-thema="dunkel"] select:focus-visible, [data-thema="dunkel"] textarea:focus-visible, [data-thema="dunkel"] button:focus-visible, [data-thema="dunkel"] .kachel:has(input:focus-visible) { outline-color: var(--akzent); }
[data-thema="dunkel"] .kachel:has(input:checked), [data-thema="dunkel"] .haken:has(input:checked) { box-shadow: 0 0 0 3px rgba(241, 134, 29, 0.2); }
[data-thema="dunkel"] .knopf.akzent { color: #0b1118; }
[data-thema="dunkel"] .toast { border-color: var(--linie-stark); }
[data-thema="dunkel"] .zeichenfeld { background: #fff; }
[data-thema="dunkel"] .slot { background: #0f1a24; }
[data-thema="dunkel"] .slot:hover { background: #142030; }
[data-thema="dunkel"] .slot-status { background: var(--grau-flaeche); color: var(--nebentext); }
[data-thema="dunkel"] .marke-zustand { background: var(--grau-flaeche); color: var(--text); }
[data-thema="dunkel"] .marke-zustand.warten { background: var(--warn-flaeche); color: var(--gelb); }
[data-thema="dunkel"] .marke-zustand.gut { background: var(--gut-flaeche); color: var(--gruen); }
[data-thema="dunkel"] .dokumentkarte, [data-thema="dunkel"] .posten, [data-thema="dunkel"] .jahre { background: #0f1a24; }
[data-thema="dunkel"] ::selection { background: rgba(241, 134, 29, 0.35); }
@media print { .kopf, .fuss, .knopfzeile, .schrittleiste { display: none; } body { background: #fff; } }

/* Die Kartenfassung von Bahn und Aufgabenbrett stand hier und ist am 12.09.2026 entfallen: gleichartige
   Dinge gehoeren in Listen, nicht in Kacheln. Die Nachfolger stehen in arbeit.css. Sicherung der alten
   Fassung im Ablagebereich der Sitzung (kit-bahn-alt.css). */

/* Arbeitskarte des Falls: steht ueber den Reitern, also auf jedem Reiter. Sie beantwortet die zwei Fragen, die
   sonst offenbleiben ("wer ist dran?", "seit wann?") und traegt die Knoepfe dafuer. Der Akzentbalken erscheint nur,
   wenn die Kanzlei am Zug ist: sonst faerbte sich jeder Fall gleich dringend. */
.karte.arbeit { border-left: 3px solid var(--linie-stark); }
.karte.arbeit.wir { border-left-color: var(--akzent); }
.karte.arbeit .wer { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.karte.arbeit .satz { margin: 0; font-size: 1.05rem; }
.karte.arbeit .knopfzeile:empty { display: none; margin: 0; }
.arbeit-aufgaben { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--linie); }
.arbeit-aufgaben h3 { font-family: var(--schrift); font-size: 0.9rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--nebentext); }

/* Mandantenbereich: wie viel noch fehlt. Beschriftung ueber dem Balken, Bruch rechts, was fehlt darunter verlinkt. */
.pflichtstand { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.pflichtstand-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.pflichtstand-label { font-weight: 600; }
.pflichtstand-zahl { font-variant-numeric: tabular-nums; color: var(--nebentext); }
.pflichtstand .fortschritt { margin: 0; }
.pflichtstand-fehlt { margin: 0.5rem 0 0; }
.pflichtstand-fehlt a { color: var(--akzent-dunkel); }