/* ==========================================================================
   KYTH.Kladde: Bausteine der App-Oberfläche auf den Tokens des CI-Kits (kyth-tokens.css).
   Dunkles Thema als Vorgabe; die helle Darstellung legt hell.css als Tokens darüber (Schalter
   Hell/Dunkel). Kopfzeile, Navigation, Formularfeld, Schaltfläche, Hinweisband, Tabelle,
   Leerzustand und das Band der Testumgebung. Das Kit kennt diese Bausteine nicht; sie gehen als
   Kandidaten an die CI-Sitzung.
   Textfarben stehen auf --surface oder (--black) auf --green und --blue; der Test der
   Gestaltung rechnet den Kontrast nach.
   ========================================================================== */

/* Ein Element mit hidden bleibt verborgen, auch wenn seine Klasse display setzt. */
[hidden] { display: none !important; }

/* Rand der Eingabefelder: 0.35 Deckkraft ergibt gegen --surface-2 3,22:1 und gegen --surface 3,42:1
   (WCAG 1.4.11, mindestens 3:1). --white-20 des Kits erreicht nur etwa 2:1. */
:root { --feldrand: rgba(255,255,255,0.35); }

/* Mindestens so hoch wie der sichtbare Bereich: 100dvh folgt der Browserleiste am Handy, 100vh wäre dort
   der Schirm ohne Leiste und schöbe die Fußzeile unter den Rand. 100vh bleibt der Rückfall für ältere Browser. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 16px;
}

main .zurueck { display: inline-block; margin-bottom: 12px; color: var(--white-60); text-decoration: underline; text-underline-offset: 3px; }
main .zurueck:hover { color: var(--white); }
main h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
main h2 { font-size: clamp(20px, 3vw, 28px); margin-bottom: 8px; }

/* --- Testumgebung -------------------------------------------------------- */
.testband {
  background: var(--blue);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 16px;
}

/* --- Kopfzeile und Navigation ------------------------------------------- */
.kopfzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Das Konto füllt den Rest seiner Zeile und steht darin rechts. So bleibt dem Schalter hinter ihm kein Rand in
   derselben Zeile; bricht er bei breitem Konto allein in die nächste, rückt ihn sein Rand (auto) nach rechts. */
.kopfkonto { flex-grow: 1; margin-left: auto; }
/* Die Wortmarke oben links ist 18 px groß, vorher 22 (Stefan, 02.11.2026). */
.wortmarke { font-size: 18px; color: var(--white); border-radius: var(--radius-control); }
.bereichsname { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-60); }

.navigation ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.navigation a {
  display: block;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  color: var(--white-80);
  transition: background 0.2s, color 0.2s;
}
.navigation a:hover { background: var(--white-08); color: var(--white); }
/* Die aktuelle Seite trägt einen grünen unteren Rand von 2px; Schweben färbt nur den Grund. Der Rand bleibt
   im Kontrastmodus (forced-colors) erhalten, ein Grund fiele dort weg. */
.navigation a[aria-current="page"],
.unternavigation a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--green);
}

/* Kopf: Name, Rolle, Mandant oder Mandantenwahl, Abmelden. Die Meldung bricht in eine eigene Zeile. */
.kopfkonto-inhalt { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; }
.kopfname { color: var(--white); font-weight: 600; }
.kopfmandant { color: var(--white-80); }
.kopfmandantgruppe { display: flex; align-items: center; gap: 12px; }
/* Betrieb und Person sind zwei Gruppen: etwas mehr Luft zwischen ihnen als innerhalb. */
.kopfmandantgruppe + .kopfname { margin-left: 16px; }
/* Logos sind für weißes Papier gemacht: Auf dem dunklen Grund steht das Logo auf einer hellen Bildfläche. */
.kopflogo { display: block; height: 32px; max-width: 128px; padding: 4px 8px; object-fit: contain; background: var(--white); border-radius: var(--radius-control); }
.kopfwahl { display: flex; align-items: center; gap: 8px; }
.kopfwahl label { font-size: 14px; font-weight: 500; color: var(--white-60); }
.kopfkonto-inhalt .hinweisband { flex-basis: 100%; }
/* Die Meldung der Kopfzeile steht unter ihr, nicht in ihr (huelle.js setzt sie hinter die Kopfzeile). */
.kopfzeile + .hinweisband { padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.kopfkonto-inhalt .btn-secondary { padding: 8px 16px; }
/* Unter 1400 px passten Wortmarke, Navigation, Konto mit Rolle und Schalter mit 32px Lücken nicht in eine Zeile (bei
   1265 px etwa 1356 px Bedarf); der Schalter brach allein in eine zweite, der Kopf wurde 120 statt 68 px hoch. Dort
   rücken die Teile enger, und das Etikett der Rolle fällt weg: Die Rolle steht unter „Mein Konto“ (Befund G168 vom
   14.11.2026). Mit Mandantenwahl liest die Beschriftung „Mandant“ nur der Bildschirmleser; die Wahl ist auf jeder
   Breite über 640 px höchstens 240 px breit (Feldregel, unten), mit Logo stand sie sonst bei 1280 px in einer zweiten
   Zeile. Der Handyblock unten setzt seine eigene Lücke. */
@media (max-width: 1399px) {
  .kopfzeile { gap: 8px 16px; }
  .kopfkonto-inhalt .badge { display: none; }
  .kopfwahl label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Der Schalter Hell/Dunkel (darstellung.js): das letzte Element der Kopfzeile, oben rechts, am Handy neben dem
   Firmennamen. Ein Symbol ohne Rahmen und Grund auf 44 x 44 px; Schweben färbt den Grund wie in der Navigation.
   Es zeigt das Ziel des Tipps: die Sonne in der dunklen Darstellung, den Mond in der hellen. Das Symbol ist
   eine Maske in der Schriftfarbe und folgt so jeder Palette. */
.darstellung {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  color: var(--white-80);
  background: none;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.darstellung:hover { color: var(--white); background: var(--white-08); }
.darstellung::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url('/statisch/bilder/sonne.svg') center / contain no-repeat;
  mask: url('/statisch/bilder/sonne.svg') center / contain no-repeat;
}
.darstellung[aria-pressed="true"]::before {
  -webkit-mask-image: url('/statisch/bilder/mond.svg');
  mask-image: url('/statisch/bilder/mond.svg');
}

/* --- Karte und Formularfeld --------------------------------------------- */
.karte {
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
/* Ohne sichtbares Formular bleibt von der Karte nur Überschrift und ein Satz: kein Kasten um einzelne Sätze;
   der Innenabstand bleibt, damit die Überschrift nicht nach links springt. */
.karte:not(:has(form:not([hidden]))) { background: none; border: none; }
.hilfetext { color: var(--white-60); margin-bottom: 24px; }
.karte > :last-child { margin-bottom: 0; }
.formular + .hilfetext { margin-top: 16px; }
/* Der Verweis auf die Kopie unter „Zustimmen“ wie ein Hilfetext nach dem Formular; als letztes Kind der Karte ohne Rand
   darunter, seit dort kein eigener Knopf „Abmelden“ mehr steht (Feldregel und Schlusssicht vom 14.11.2026, Z2). */
#kopie-verweis > .hilfetext { margin: 16px 0 0; }
/* Im Formularfeld gibt das Raster den Abstand; die 24 px darunter verdoppelten ihn (Sichtbefund S2-12 vom
   14.11.2026). */
.formularfeld .hilfetext { margin-bottom: 0; }
/* Verweise im Text sind unterstrichen wie in der Fußzeile; Navigation und Schaltflächen bleiben ohne. */
.tabelle a, .hilfetext a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.tabelle a:hover, .hilfetext a:hover { color: var(--green-light); }

/* Formulare sind so breit wie eine Reihe aus zwei Knöpfen (2 x 19.5rem und 12px, unten), damit zwei Knöpfe darin
   nebeneinander stehen; vorher 36rem. Der Wert steht als --feld-voll in der Feldregel unten. */
.formular { display: flex; flex-direction: column; gap: 24px; max-width: var(--feld-voll); }
/* Der Behälter mehrerer Felder, den ein Skript baut: gleicher Abstand und gleiche Breite wie im Formular. */
.felder { display: flex; flex-direction: column; gap: 24px; max-width: var(--feld-voll); }
.felder h2 { margin-bottom: 0; }
.formularfeld { display: flex; flex-direction: column; gap: 6px; }
.formularfeld label { font-size: 14px; font-weight: 500; color: var(--white-80); }

/* --- Eingabefelder (Feldregel vom 14.11.2026) -----------------------------------------------------------------
   Stefan am 14.11.2026: Eingabefelder haben keine chaotischen Breiten oder Höhen. Jedes einzeilige Feld und jede
   Auswahl ist 48 px hoch, ein Textfeld mindestens drei Zeilen; ein Feld ist so breit wie seine Spalte (voll) oder hat
   eine der Stufen halb und viertel, die in der Spalte aufgehen. Größe und Gestalt eines Felds setzt nur dieser
   Abschnitt, die Stufe vergibt nur `feldklasse` in bausteine.js (Wächter: tests/test_waechter_felder.py; Messung und
   Werte in docs/betrieb/entscheidungen-stufe-a.md, „Einheitliche Eingabefelder vom 14.11.2026“). */
:root {
  --feld-hoehe: 48px;        /* jedes einzeilige Feld und jede Auswahl */
  --textfeld-hoehe: 98px;    /* drei Zeilen zu 24 px, Polster 2 x 12 px, Rand 2 x 1 px */
  --feld-voll: 39.75rem;     /* 636 px: die Formularspalte */
  --feld-halb: 19.375rem;    /* 310 px = (636 - 16) / 2 */
  --feld-viertel: 9.1875rem; /* 147 px = (636 - 3 x 16) / 4 */
  --feld-luecke: 16px;       /* waagrechte Lücke zwischen zwei Feldern einer Reihe */
}

/* Grundregel: jedes Feld. :where hält die Spezifität bei null, damit Stufen und Ausnahmen ohne Kunstgriff greifen.
   Häkchen, Radioknöpfe und die Dateiwahl sind keine Eingabefelder. */
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  background-color: var(--surface-2);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-control);
  appearance: none;
  transition: border-color 0.2s;
}
/* Feste Höhe statt Mindesthöhe: Weder die Steuerelemente des Browsers noch der Rand von 2 px im Kontrastmodus ändern
   sie (box-sizing: border-box aus dem Kit); die Zeile steht mittig. */
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select) {
  height: var(--feld-hoehe);
  padding: 0 14px;
  line-height: normal;
}
/* Die Auswahl zeichnet ihren Pfeil selbst; so beginnt ihr Text an derselben Stelle wie in einem Textfeld. */
:where(.formularfeld, .kopfwahl, .tabelle td) select {
  padding-right: 36px;
  text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--white-60) 50%),
    linear-gradient(135deg, var(--white-60) 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.formularfeld textarea { min-height: var(--textfeld-hoehe); padding: 12px 14px; line-height: 1.5; resize: vertical; }
.formularfeld input[type="number"] { appearance: textfield; }
.formularfeld input::-webkit-inner-spin-button,
.formularfeld input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.formularfeld input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.formularfeld input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Zustände: dieselbe Auswahl wie die Grundregel. Gesperrt: anderer Grund (--surface-3) als background-color, sonst
   verschwände der Pfeil der Auswahl, gedämpfte Schrift, gesperrter Zeiger; unter forced-colors zeigt ein gepunkteter
   Rand den Zustand (unten). Ungültig: lila Rand, die Warnfarbe des Kits (.note.warn); der Fokusring bleibt grün. */
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):hover { border-color: var(--white-60); }
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):disabled { color: var(--white-60); background-color: var(--surface-3); cursor: not-allowed; }
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):disabled:hover { border-color: var(--feldrand); }
:where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea)[aria-invalid="true"] { border-color: var(--purple); }

/* Stufen in einer Spalte (Formular, Felder, Karte, Tabelle). Die Karte ist 390 px breit: Eine halbe Stufe hätte dort
   kein Gegenstück und ist voll. */
.feld-halb { width: var(--feld-halb); max-width: 100%; }
.feld-viertel { width: var(--feld-viertel); max-width: 100%; }
.karte .feld-halb { width: 100%; }

/* Reihen: vier gleiche Spalten mit 24 px Abstand senkrecht und 16 px waagrecht, oben ausgerichtet. Ein Kind ohne Stufe
   nimmt die ganze Reihe, halb zwei Spalten, viertel eine; so liegen alle Kanten auf den Viertellinien. */
.formulargruppe, .positionsraster, .belegfilter, .feldreihe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px var(--feld-luecke);
  align-items: start;
  max-width: var(--feld-voll);
}
:where(.formulargruppe, .positionsraster, .belegfilter, .feldreihe) > * { grid-column: 1 / -1; min-width: 0; }
:where(.formulargruppe, .positionsraster, .belegfilter, .feldreihe) > .feld-halb { grid-column: span 2; width: auto; }
:where(.formulargruppe, .positionsraster, .belegfilter, .feldreihe) > .feld-viertel { grid-column: span 1; width: auto; }
/* PLZ und Ort: die PLZ in der Stufe viertel, der Ort füllt den Rest der Reihe. */
.feldpaar { display: grid; grid-template-columns: minmax(0, var(--feld-viertel)) minmax(0, 1fr); gap: var(--feld-luecke); }
/* Die Mandantenwahl im Kopf ist die einzige benannte Ausnahme der Breite: so breit wie der Name, höchstens 240 px; am
   Handy füllt sie ihre Zeile (unten). */
.kopfwahl select { width: auto; max-width: 240px; }

/* Zustimmung: ein Häkchen mit dem Satz des Servers daneben. */
.haken { display: flex; align-items: flex-start; gap: 12px; }
.haken input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); }
.haken label { color: var(--white-80); line-height: 1.5; }
.dokumente { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dokumente a { color: var(--white-80); text-decoration: underline; text-underline-offset: 3px; }
.dokumente a:hover { color: var(--white); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
/* Auf dem Desktop sind die Knöpfe einer Reihe gleich breit, die Schrift steht mittig, und höchstens zwei stehen
   nebeneinander. Vorher war jeder Knopf so breit wie sein Text, und die Seite wirkte unruhig. Die Breite fasst die
   längste Beschriftung („Als Vorlage der Wiederholung nehmen“) in einer Zeile. In Tabellen bleiben sie schmal; am
   Handy füllen sie die Breite (unten). */
@media (min-width: 641px) {
  main .knopfreihe { max-width: calc(2 * 19.5rem + 12px); }
  main .knopfreihe > button, main .knopfreihe > a.btn-primary, main .knopfreihe > a.btn-secondary { min-width: 19.5rem; justify-content: center; text-align: center; }
  .tabelle .knopfreihe { max-width: none; }
  .tabelle .knopfreihe > button, .tabelle .knopfreihe > a { min-width: 0; }
}

/* Startseite: die Lücken der Einrichtung als Liste, darunter der Weg weiter. */
.luecken { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 16px 0; color: var(--white-80); }

/* --- Schaltflächen ------------------------------------------------------- */
/* Die Hauptaktion ist .btn-primary des Kits (Normal, Schweben, Fokus); der Fokusring ist der grüne des Kits.
   Im Formular steht sie links statt gestreckt. */
main .btn-primary { align-self: flex-start; }
/* Gesperrt: gedämpfte Schrift auf --surface-3 (6,6:1), kein Anheben, gesperrter Zeiger. Nur Deckkraft
   machte die Schrift kaum lesbar. */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
  color: var(--white-60);
  background: var(--surface-3);
  border-color: transparent;
  transform: none;
  cursor: not-allowed;
}

/* --- Hinweisband --------------------------------------------------------- */
.hinweisband {
  margin: 0;
  color: var(--white-80);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
/* Eine sichtbare Statuszeile hat 16px Abstand zum Folgenden. Wo ein gap den Abstand regelt, gibt es keinen
   zusätzlichen Rand. `:not([hidden])` steht in `:where()`: Mit (0,2,1) schlug die Grundregel die Rücksetzliste (0,2,0)
   immer, und in .startzusaetze und .ablaufend standen 32px zwischen den Hinweiszeilen (Befund G185 vom 14.11.2026). */
main .hinweisband:where(:not([hidden])), main .leerzustand { margin-bottom: 16px; }
.formular .hinweisband, .formular .leerzustand,
.felder .hinweisband, .felder .leerzustand,
.kopfkonto-inhalt .hinweisband, .kopfkonto-inhalt .leerzustand,
.supportband .hinweisband, .supportband .leerzustand,
.zweite-stufe .hinweisband, .zweite-stufe .leerzustand,
.startzusaetze .hinweisband, .ablaufend .hinweisband { margin-bottom: 0; }

/* --- Belegzeilen: Hinweise, Summenblock, Positionen ------------------------ */
/* Nur Abstand und Raster: kein Rand, kein Grund, keine Farbe. Die Statuszeilen stehen untereinander. */
.hinweisliste { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.summenblock, .abzugstabelle, .standzeilen, .vorstand, .abschlagsauswahl { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.summenblock th, .summenblock td, .abzugstabelle th, .abzugstabelle td, .standzeilen th, .standzeilen td, .vorstand th, .vorstand td { padding: 8px 12px; text-align: left; }
.summenblock th, .abzugstabelle th, .standzeilen th, .vorstand th { font-size: 13px; font-weight: 600; }
.summenblock th + th, .summenblock td + td, .abzugstabelle th + th, .abzugstabelle td + td, .standzeilen th + th, .standzeilen td + td, .vorstand th + th, .vorstand td + td { text-align: right; }
.positionstabelle { font-variant-numeric: tabular-nums; }
.positionstabelle th:nth-child(n+3), .positionstabelle td:nth-child(n+3) { text-align: right; }
.positionstabelle th:nth-child(4), .positionstabelle td:nth-child(4) { text-align: left; }
.positionstabelle th:first-child, .positionstabelle td:first-child { width: 1%; white-space: nowrap; }

/* --- Tabelle ------------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white-60);
  border-bottom: 1px solid var(--white-20);
}
.tabelle td { padding: 12px; color: var(--white-80); border-bottom: 1px solid var(--border); }
.kopfzelle { color: var(--white); }
.aufklappbereich { margin-bottom: 24px; }
/* summary bekommt kein display: Mit flex wäre es kein list-item, und Chrome und Firefox zeichneten das Dreieck nicht. */
.aufklappbereich > summary { min-height: 48px; padding-block: 12px; cursor: pointer; font-weight: 600; color: var(--white); }
.aufklappbereich[open] > summary { margin-bottom: 16px; }
.aufklappbereich > .belegfilter { margin-bottom: 0; }
/* Die Suche der Listen: höchstens so breit wie ein Formular. */
main form[role="search"] { max-width: var(--feld-voll); margin-bottom: 16px; }
/* Das Kundenfeld (kundenfeld.js): die Treffer direkt unter dem Feld als schlichte Liste ohne
   Rahmen und Grund, eine Linie nur zwischen zwei Treffern wie zwischen den Zeilen der Tabellen.
   Jeder Treffer (role="option") reicht über die ganze Breite und ist mindestens 44 px hoch; der
   aktive Treffer der Tastatur (aria-selected="true") trägt Farbe und Unterstrich, keinen Rahmen
   und keinen Grund. Der Satz ohne Treffer ist die Statuszeile des Leerzustands. Dieselben Regeln
   gelten für die Knöpfe der Einfügesuche im Editor (K6: li > button ohne role="option"). */
.kundentreffer { list-style: none; display: flex; flex-direction: column; }
.kundentreffer:empty { display: none; }
.kundentreffer > li + li { border-top: 1px solid var(--border); }
.kundentreffer [role="option"],
.kundentreffer button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
  text-align: left;
  overflow-wrap: anywhere;
  background: none;
  border: none;
  cursor: pointer;
}
.kundentreffer [role="option"]:hover,
.kundentreffer button:hover,
.kundentreffer [aria-selected="true"] { color: var(--green-light); }
.kundentreffer [aria-selected="true"] { text-decoration: underline; text-underline-offset: 4px; }
/* Ohne gewählten Kunden (und ohne „Neuer Kunde“) ist die Reihe der Knöpfe leer und nimmt keinen
   Platz. */
.kundenfeld > .knopfreihe:empty { display: none; }
/* Der Satz ohne Treffer steht als Statuszeile neben der Liste, nicht in ihr (Gesamtdurchgang vom 14.11.2026, G92). */
.kundenfeld > .leerzustand { margin-bottom: 0; }

/* Als Vorlage (Anlage eines Entwurfs, AN8): eine Radiogruppe ohne Rahmen und Grund; jede Zeile
   ist eine Tippfläche von mindestens 44 px, die Beschriftung bricht um, statt seitlich zu
   blättern. */
.vorlagenauswahl { display: flex; flex-direction: column; }
.vorlagenauswahl .haken { align-items: center; min-height: 44px; }
.vorlagenauswahl .haken input { margin-top: 0; }
.vorlagenauswahl .haken label {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 10px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
/* Neuer Kunde im Entwurf (AN9): die Felder untereinander unter dem Kundenfeld, nur mit Abstand,
   ohne Kasten; 24 px wie im Formular (Feldregel vom 14.11.2026, vorher 16 px). */
.neuerkunde { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }

/* --- Leerzustand --------------------------------------------------------- */
.leerzustand {
  margin: 0;
  color: var(--white-60);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Fußzeile ------------------------------------------------------------ */
/* Rechtliches links, die Marke rechts in derselben Zeile; reicht der Platz nicht, steht die Marke linksbündig darunter. */
.fusszeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  padding: 24px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.fusszeile ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.fusszeile a { color: var(--white-60); text-decoration: underline; text-underline-offset: 3px; }
.fusszeile a:hover { color: var(--white); }
.fussmarke { margin: 0; color: var(--white-60); }

/* --- Fokus und Bewegung -------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .navigation a, .darstellung { transition: none; }
  :where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { transition: none; }
}

/* --- Einstellungen: Unternavigation, Gruppen, Fassungen, Kopfliste, Logo ---------------------- */
.unternavigation { margin-bottom: 24px; }
.unternavigation ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.unternavigation a {
  display: block;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  color: var(--white-80);
}
.unternavigation a:hover { background: var(--white-08); color: var(--white); }
/* Die Punkte stehen in Gruppen untereinander (Stefan, 02.11.2026): am Rechner links als Spalte neben
   dem Inhalt, die eigene Seite mit grünem Rand links; die Übersicht zeigt die Gruppen nebeneinander. */
main:has(> .unternavigation) { display: flow-root; }
.unternavigation:not(.uebersicht) { float: left; width: 220px; }
main > .unternavigation:not(.uebersicht) ~ * { margin-left: 260px; max-width: calc(100% - 260px); }
.unternavigation .zur-uebersicht { display: none; }
.unternavigation .untergruppe + .untergruppe { margin-top: 20px; }
.unternavigation .gruppentitel { margin: 0 0 8px 4px; font-size: 13px; font-weight: 600; color: var(--white-60); }
/* Jede Gruppe ist eine Liste auf einer Fläche mit Trennlinien, jeder Punkt eine Zeile wie ein Knopf
   (Stefan, 02.11.2026); die eigene Seite ist hinterlegt und links grün markiert. */
.unternavigation .untergruppe ul {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.unternavigation .untergruppe li + li { border-top: 1px solid var(--border); }
.unternavigation .untergruppe a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  border-bottom-width: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: var(--white);
}
.unternavigation .untergruppe a:hover { background: var(--white-05); }
.unternavigation .untergruppe a[aria-current="page"] { background: var(--white-08); border-left-color: var(--green); }
.unternavigation.uebersicht .untergruppe a::after { content: "›"; color: var(--white-40); font-size: 20px; line-height: 1; }
.unternavigation.uebersicht .unterpunkte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 40px;
}
.unternavigation.uebersicht .untergruppe + .untergruppe { margin-top: 0; }

/* Die Gruppe eines Formulars: Raster der Feldregel (oben), getrennt durch eine Linie. */
.formulargruppe {
  padding: 16px 0 24px;
  border: none;
  border-top: 1px solid var(--border);
}
.formulargruppe legend {
  padding: 0 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}
/* Der Satz zu PLZ oder Ort und zu einer Position läuft unter den Feldern über die ganze Zeile; im Feld von 7rem brach
   er in fünf Zeilen um (Sichtbefund S1-7 vom 14.11.2026, `satzAmFeld` in formular.js). */
.feldpaar > .hinweisband, .feldpaar > .hinweissatz, .positionsraster > .hinweissatz, .positionsraster > .hinweisband { grid-column: 1 / -1; }
.formulargruppe > .btn-secondary { justify-self: start; }
.formularfeld input[type="file"] { width: 100%; padding: 8px 0; border: none; background: none; color: var(--white-80); }
/* Der Knopf der Dateiauswahl gleicht dem Zweitknopf des Kits; der Dateiname steht daneben in --white-80. */
input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--border-hover); background: var(--white-05); }

.kopfliste { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.kopfliste > li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border); }
/* Die Angaben eines Nummernkreises im Raster der Empfängeranzeige; der Abstand kommt aus der Liste (G110). */
.kopfliste .angabenraster { margin-bottom: 0; }
/* Die Zuordnung eines Kreises: Auswahl und darunter „Übernehmen“ in seiner Breite (G96). */
.zuordnungsfeld .btn-secondary { align-self: flex-start; }
.kopfzeile-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Das Kit setzt für jedes section den Abstand der Website; in der App steht ein Abschnitt im Fluss der Seite. */
main section { padding: 0; max-width: none; margin: 0; }
.kopfbearbeitung, .fassungen { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.fassungsliste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
/* Rechnungen, die nicht mehr zur Besteuerung passen (Steuerhinweise SH5). */
.abweichungen { margin-top: 32px; }
.abweichungen .hilfetext { margin: 8px 0 12px; }
.abweichungen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.abweichungen li a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Logos sind für weißes Papier gemacht: Die Vorschau steht auf weißem Grund, ein dunkles Logo bleibt lesbar. */
.logovorschau {
  max-width: 240px;
  max-height: 96px;
  padding: 8px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-control);
  object-fit: contain;
}

/* --- Benutzer, Support-Zugang, Protokoll, Mein Konto ---------------------------------------- */
#liste, #protokollinhalt { overflow-x: auto; margin-bottom: 24px; }
/* Kundenimport: Die Vorschau hat eine Spalte je zugeordnetem Feld und blättert in ihrem Behälter seitlich, nicht die
   Seite (Gesamtdurchgang vom 14.11.2026, G76); Datei, Kundenart und „Vorschau laden“ stehen mit dem Abstand eines
   Formulars und mit Abstand zur Zuordnung darunter (G90). */
.vorschautabelle { overflow-x: auto; margin-bottom: 24px; }
.importformular { margin-bottom: 32px; }
.importzuordnung { margin-bottom: 24px; }
/* „Übernehmen“ samt Rückfrage und „Zur Kundenliste“ klebten an der Tabelle darüber (Sichtbefund S1-16 vom
   14.11.2026). */
.importteil > :last-child { margin-top: 24px; }
/* Der Satz der Fehlerprobe stand mit 0 px direkt unter dem Knopf (Sichtbefund S2-13 vom 14.11.2026). */
#fehlerprobe-abschnitt > .knopfreihe + .hinweisband { margin-top: 12px; }
main h3 { font-size: 18px; margin: 24px 0 12px; }
.tabelle td.datum, .tabelle td .btn-secondary, .tabelle td .badge, .tabelle td a { white-space: nowrap; }
/* Status und Verweis in einer Zelle (Kontospalte der Mandantenseite) stehen untereinander: Mit einem Abstand links
   rückte der Verweis ein, sobald er unter das Etikett umbrach (Gesamtdurchgang vom 14.11.2026, G157). */
.tabelle td .badge + a { display: block; width: fit-content; margin-top: 4px; }
/* Der Name im Protokoll bricht auf breiten Schirmen nicht um, die Spalte „Was“ hat Platz genug (G162). */
@media (min-width: 641px) {
  .tabelle td.akteur { white-space: nowrap; }
}
/* Eine offene Support-Ansicht über jeder Betreiberseite: Statuszeile und „Support-Ansicht beenden“ in einer Zeile,
   ohne Rahmen und ohne Grund (G143). */
.supportzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 16px; }
.supportzeile .badge { margin: 0; }
.supportzeile .textknopf { align-self: center; }
main .supportzeile .hinweisband:not([hidden]) { flex-basis: 100%; margin-bottom: 0; }
/* Name, Funktion und Adresse stehen in einer Zelle untereinander, Einladung offen unter dem Status; so passt die
   Benutzerliste bei 1280px ohne seitliches Blättern. Die Zelle der Handlungen bricht zwischen den Knöpfen um. */
/* Die Adresse bricht nur, wenn sie allein breiter ist als die Zelle; sonst wird die Spalte so breit wie sie. */
.tabelle td .einzelheiten { overflow-wrap: break-word; }
/* Der Verweis einer Zeile des Plattformprotokolls auf Mandant oder Konto steht unter dem Satz (Sichtbefund S2-6). */
.tabelle td .zielverweis { display: block; width: fit-content; margin-top: 4px; }
/* Benutzer: Die Rolle steht als Auswahl mit „Übernehmen“ in ihrer Spalte, und der Zeitpunkt bricht nach dem Komma um,
   damit die Liste neben der Spalte der Einstellungen in den Inhalt passt (Gesamtdurchgang vom 14.11.2026, G99). Die
   Auswahl hat die Höhe jedes Felds, „Übernehmen“ steht darunter wie in der Kreiszuordnung (Feldregel vom 14.11.2026). */
#liste .tabelle td.datum { white-space: normal; }
#liste .tabelle td .einzelheiten.adresse { overflow-wrap: anywhere; }
#liste .tabelle td .knopfreihe .btn-secondary, #liste .tabelle td > .btn-secondary { white-space: normal; text-align: left; }
.rollenwahl { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rollenwahl .btn-secondary { margin: 0; }
.tabelle td .btn-secondary { margin: 0 8px 4px 0; padding: 6px 12px; }
.einzelheiten {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white-60);
}
.blaetterleiste { margin-top: 16px; }
/* Belegliste und Kennzahlen: nur Abstand und Raster, ohne Rahmen und ohne Grund. */
.belegliste > div + div { margin-top: 40px; }
/* Die Filter stehen im Raster der Feldregel (oben); das Kundenfeld reicht ohne Stufe über die ganze Zeile. */
.belegfilter { margin-bottom: 24px; }
.kennzahlen { margin-top: 40px; }
/* Start (Stefan, 03.11.2026): Schnellknöpfe, Hinweise mit Anlass und die jüngsten Entwürfe untereinander. Ein
   Hinweis ist eine Statuszeile mit unterstrichenem Weg, kein Kasten; ein Entwurf nennt darunter seine Zeit. */
.startzusaetze { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
/* Die Angebote, die bald ablaufen (Spec Angebote AN7): Hinweiszeilen mit dem Abstand der Zusätze, kein Kasten. Sie
   stehen in .startzusaetze, deren gap den Abstand gibt; ein eigener Rand oben ergab 32px (Befund G185). */
.ablaufend { display: flex; flex-direction: column; gap: 16px; }
.ablaufend:empty { display: none; }
.startzusaetze .hinweisband a, .entwuerfe-start li a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Die Nummer der Korrektur unter dem Satz zu einem zweiten Storno (seite-beleg.js, ergebnisZeile; Klickliste H9). */
.korrekturverweis { display: block; width: fit-content; margin-top: 4px; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* Die Entwürfe haben oben 32 px wie „Fällige Wiederholungen“ (16 px gap der Zusätze und 16 px Rand); eine leere Gruppe
   der Zusätze (Nur lesen) trägt keinen Rand (Sichtbefund S1-11 vom 14.11.2026). */
.entwuerfe-start { margin-top: 16px; }
.startzusaetze:empty { display: none; }
.entwuerfe-start h2 { margin-bottom: 12px; }
.entwuerfe-start ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.entwuerfe-start li { display: flex; flex-direction: column; gap: 2px; }
.entwuerfe-start li .hilfetext { margin-bottom: 0; font-size: 14px; }
.kennzahlen .tabelle { max-width: 480px; }
.mandantenliste { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 16px 0 24px; }
.mandantenliste li { display: flex; align-items: center; gap: 12px; }
/* Mein Konto und Konto des Betreibers: Beschriftung und Wert als zwei Spalten; die Absätze lösen sich in ihre Zellen auf. */
.angabenraster { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; align-items: baseline; margin-bottom: 24px; }
#kontoangaben .angabenraster p { display: contents; }
.abschnitt { margin-top: 40px; }
.mandantkopf { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.mandantkopf h2 { margin-bottom: 0; }
.mandantname { margin: 0 0 24px; font-size: 20px; color: var(--white); }
#kontoangaben strong { font-size: 14px; font-weight: 500; color: var(--white-60); }
/* --- Betreiberbereich: Support-Band, Geheimnis der zweiten Stufe, Nachfragen ----------------- */
/* Das feste Band der Support-Ansicht liegt als voller Streifen über der Kopfzeile des Mandantenbereichs
   und bleibt beim Blättern stehen; wie das Band der Testumgebung ist es kein Kasten. */
.supportband {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 6px 16px;
  background: var(--blue);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.supportband .btn-secondary { padding: 4px 12px; color: var(--black); border-color: var(--black); }
/* Ein Satz im Band steht in Satzschreibung: das Band setzt Großbuchstaben und Sperrung nur für seine Kennzeichnung. */
.supportband .hinweisband {
  flex-basis: 100%;
  text-align: center;
  color: var(--black);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
/* Auf Blau trägt der grüne Ring des Kits nicht (1,6:1); im Band ist er schwarz (5,4:1). */
.supportband :focus-visible { outline-color: var(--black); }

.angabe { font-size: 14px; font-weight: 500; color: var(--white-60); }
.geheimnis { font-family: var(--font-mono); font-size: 14px; color: var(--white); overflow-wrap: anywhere; user-select: all; }
.geheimnis-adresse { font-size: 12px; line-height: 1.5; color: var(--white-60); }
/* Die Adresse öffnet am Handy die App (Gesamtdurchgang vom 14.11.2026, G111); „Schlüssel kopieren“ steht unter dem
   Schlüssel, die Statuszeile dazu darunter. */
.geheimnis-adresse a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.zweite-stufe .formularfeld .badge { align-self: flex-start; }
.zweite-stufe { display: flex; flex-direction: column; gap: 20px; }
.zweite-stufe h2 { margin-bottom: 0; }
/* Der QR-Code bringt seinen weißen Grund mit Ruhezone selbst mit; auf dem dunklen Grund braucht er keinen Rahmen. */
.qr { display: block; width: 224px; max-width: 100%; height: auto; border-radius: var(--radius-control); }
/* Der zweite Faktor im Mandantenbereich (Spec ZF9): die Codes in Mono untereinander, der Tausch zwischen
   Code und Wiederherstellungscode als Textknopf ohne Rahmen und Grund, die Statuszeilen untereinander. */
.codeliste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 24px; font-family: var(--font-mono); font-size: 15px; color: var(--white); user-select: all; }
.textknopf { align-self: flex-start; padding: 4px 0; background: none; border: 0; color: var(--white-80); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.textknopf:hover { color: var(--white); }
.faktorstand { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.frage { color: var(--white-80); align-self: center; }
#kontoangaben, #ansicht, #aktionen { margin-bottom: 24px; }
#ansehen { margin-bottom: 32px; }

/* --- E-Mail-Versand: Stand, Vorlage, Platzhalter, Vorschau, Nachweis und Formular des Versands --- */
/* Nur Typografie, Abstand und eine Linie zwischen den Einträgen des Nachweises: kein Kasten um die Vorschau oder
   einen Satz. Jede Handlung ist mindestens 44 px hoch. */
.mailstand .hilfetext { margin: 8px 0 0; }
#mailvorlage > h3, #mailserver > h3, .versand > h3 { margin-top: 0; }
.platzhalter h4, .mailvorschau h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--white); }
.platzhalter .hilfetext { margin-bottom: 12px; }
/* Im Abschnitt Mailserver regelt der Abstand der Felder (24 px) die Luft unter einem Satz; ein eigener Rand verdoppelte sie. */
#mailserver .felder > .hilfetext { margin-bottom: 0; }
/* Mit Microsoft verbinden (Spec MS7): Knopf und Formular sind zwei Wege, getrennt durch Abstand und je einen Titel,
   ohne Kasten. Der Titel rückt näher an seinen Satz als die Felder untereinander. */
#mailserver .felder > h4 { margin: 0 0 -12px; font-size: 15px; font-weight: 600; color: var(--white); }
.mailweg + .felder, .pruefung + .mailweg { margin-top: 40px; }
.platzhalterliste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.platzhalterliste button {
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--white-80);
  background: none;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.platzhalterliste button:hover { color: var(--white); border-color: var(--white-60); }
.platzhalterliste button:disabled { color: var(--white-60); cursor: not-allowed; }
.mailvorschau { display: flex; flex-direction: column; gap: 8px; }
.mailvorschau h4 { margin-bottom: 0; }
.mailbetreff { color: var(--white); font-weight: 600; }
.mailtext { white-space: pre-wrap; color: var(--white-80); line-height: 1.6; }
.pruefung { margin-top: 32px; }
.versand { margin: 32px 0 8px; }
.versand .knopfreihe { margin-bottom: 16px; }
.knopfreihe > a.btn-secondary, .knopfreihe > a.btn-primary { text-align: center; }
.versandformular { margin-bottom: 16px; }
.absenderzeile { color: var(--white-80); overflow-wrap: anywhere; }
.versandliste { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; margin-bottom: 16px; list-style: none; }
.versandliste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.versandadresse { color: var(--white); overflow-wrap: anywhere; }
.versandliste .einzelheiten { margin-top: 0; }
.versandsatz { flex-basis: 100%; margin: 0; color: var(--white-80); }
.versand-uebergeben { color: var(--green-light); }
/* Mahnungen der Belegansicht (Spec Mahnungen MA5): Abschnitt wie der Versand, die Statuszeile über dem Knopf der
   nächsten Stufe, je Schreiben die Knöpfe untereinander und gleich breit, die Spaltenköpfe in einer Zeile. */
.mahnungen { margin: 32px 0 8px; }
.mahnungen > h3 { margin-top: 0; }
.mahnungen > .badge { margin: 16px 0 12px; }
#kopie-angaben > .badge { margin: 0 0 16px; }
.mahnungen > .knopfreihe:not(:empty) { margin: 16px 0; }
.mahnungen .tabelle th { white-space: nowrap; }
.mahnungen .tabelle td .knopfreihe { flex-direction: column; align-items: stretch; gap: 8px; }
.mahnungen .tabelle td .knopfreihe > .btn-secondary { margin: 0; }
.mahnungen .tabelle .versandliste { margin-bottom: 0; }
.mahnbereich > h4 { margin: 16px 0 12px; }
.mahnformular { margin: 16px 0; }
/* Der Titel der Stufe über dem Formular (Gesamtdurchgang vom 14.11.2026, Befund G58); den Abstand gibt das Formular. */
.mahnformular > h4 { margin: 0; }
/* Einstellungen > Mahnungen: je Stufe ein Abschnitt mit Abstand zum nächsten. */
.mahnstufe + .mahnstufe { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.mahnstufe .felder + .felder { margin-top: 24px; }
.mahnstufe .felder > h4 { margin: 0; }
/* Wiederholungen (Spec Wiederholungen 4): Abschnitt wie der Versand, Statuszeilen als .badge in einer Reihe, kein Kasten. */
.wiederholung, .wiederholungen { margin: 32px 0 8px; }
.wiederholung > h3, .wiederholungen > h2, .wiederholungen > h3 { margin-top: 0; }
.statuszeilen { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
/* Hinweise und Lücken des Entwurfs als Sätze: hervorgehoben über Farbe und Abstand, ohne Kasten und ohne
   Großbuchstaben (Gesamtdurchgang vom 14.11.2026, Befund G17; Entscheidung vom 03.11.2026). */
.hinweissatz { max-width: 48rem; margin: 0; color: var(--white-80); font-size: 14px; line-height: 1.5; }
.hinweisliste .hinweissatz + .hinweissatz { margin-top: 8px; }
/* Die Statuszeilen der E-Rechnung klebten am Summenblock (Gesamtdurchgang vom 14.11.2026, Befund G27). */
.summenblock + .statuszeilen, .abzugstabelle + .statuszeilen { margin-top: 16px; }
/* Ohne Statuszeilen der E-Rechnung folgen die Knöpfe direkt; der Rahmen von „PDF ansehen“ berührte die letzte Zeile
   (Schlusssicht S3-15 vom 14.11.2026). */
.summenblock + .knopfreihe, .abzugstabelle + .knopfreihe { margin-top: 16px; }
/* Brutto und Offen der Belegliste rechtsbündig mit gleich breiten Ziffern wie die Summentabellen (G27). */
@media (min-width: 641px) {
  #belegergebnis .tabelle td:nth-child(5), #belegergebnis .tabelle td:nth-child(6),
  #belegergebnis .tabelle th:nth-child(5), #belegergebnis .tabelle th:nth-child(6) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* Ebenso Brutto der Angebote und Auftragsbestätigungen (Sichtbefund S1-17 vom 14.11.2026). */
  #vorgangsergebnis .tabelle td:nth-child(6), #vorgangsergebnis .tabelle th:nth-child(6) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
}
.statuszeilen .badge { margin: 0; }
/* Allein in einer Zelle sitzt die Statuszeile auf der Höhe des Zeilentexts (Befund G67). */
.tabelle td > .statuszeilen:only-child { margin-bottom: 0; }
.wiederholung .knopfreihe { margin: 16px 0; }
/* Zahlung und Storno öffnen mit Überschrift und Abstand unter den Knopfreihen (Sichtbefund S1-4 vom 14.11.2026). */
.belegdialog { margin-top: 24px; }
.belegdialog > h3 { margin-top: 0; }
/* Die Unterleiste unter „Belege“ (Plan Angebote E18): Verweise wie die Hauptnavigation, ohne Rahmen und Grund; die
   eigene Seite trägt den grünen Rand unten. */
.belegleiste ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none; }
.belegleiste a {
  display: block;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  color: var(--white-80);
}
.belegleiste a:hover { background: var(--white-08); color: var(--white); }
.belegleiste a[aria-current="page"] { color: var(--white); border-bottom-color: var(--green); }
/* Die Vorgangsansicht (Spec Angebote AN7): Bezüge, Handlungen und der Verlauf als Liste mit Zeit, kein Kasten. */
.vorgangsbezug { margin: 0 0 8px; color: var(--white-80); }
.vorgangshandlungen, .vorgangsrechnungen, .vorgangsverlauf, .kundenvorgaenge { margin: 32px 0 8px; }
.kundenvorgaenge > h3 { margin-top: 0; }
.vorgangshandlungen .knopfreihe { margin-bottom: 12px; }
/* Eine Rückfrage als eigener Block unter ihrer Knopfreihe (bausteine.rueckfrageUnterReihe), ohne Rahmen. */
.rueckfrage { gap: 12px; margin-bottom: 12px; }
.wiederholung .rueckfrage { margin: 16px 0; }
.rueckfrage .frage { align-self: flex-start; margin: 0; }
.rueckfrage .knopfreihe { margin: 0; }
.verlauf { display: flex; flex-direction: column; gap: 8px; max-width: 40rem; margin: 0; padding: 0; list-style: none; }
.verlauf li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.verlauf .einzelheiten { margin-top: 0; min-width: 11rem; }
.vorgangsbezug a, .verlauf a, .angabenraster a, .ablaufend .hinweisband a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.vorgangsliste .tabelle td a { white-space: nowrap; }
.angebote > section + section { margin-top: 48px; }
.herkunft { color: var(--white-80); }
/* Der Satz zur Abrechnung eines Abschlags steht zwischen Zahlungstabelle und Knöpfen; ohne Rand klebte er an beiden
   (Schlusssicht S3-8 vom 14.11.2026). */
.abrechnung > .herkunft { margin: 16px 0 24px; }
/* Der Verweis der Herkunft ist unterstrichen wie die Vorgangsbezüge; den Abstand gibt ein Leerzeichen im Satz
   (Gesamtdurchgang vom 14.11.2026, Befund G64). */
.herkunft a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* Wiederholungen automatisch (Spec WA5, WA6): „Angehalten“ mit Abstand unter den fälligen, der Verweis auf alle
   Wiederholungen unterstrichen wie die Verweise der Tabellen, der Satz zum Schalter leiser als die Angaben. */
.wiederholungen > .tabelle + h3 { margin-top: 32px; }
.wiederholungsverweis { margin: 16px 0 0; }
.wiederholungsverweis a { color: var(--white-80); text-decoration: underline; text-underline-offset: 3px; }
.wiederholungsverweis a:hover { color: var(--white); }
.automatiksatz { margin: 16px 0 0; color: var(--white-80); }
/* Karte 6 (WA11 Nr. 3): die Zeile am Vortag eines automatischen Termins, leise, mit unterstrichenem Verweis auf die
   Vorlage; ohne Kasten. */
.vortag { margin: 0 0 12px; color: var(--white-80); }
.vortag a { margin-left: 12px; color: var(--white-80); text-decoration: underline; text-underline-offset: 3px; }
.vortag a:hover { color: var(--white); }

/* DATEV-Einstellung (Spec DATEV 5): Formular wie die übrigen Einstellungen, ohne Recht ein
   Angabenraster; die Statuszeile ohne Einrichtung ist .badge ohne Kasten. */
.datev-einstellung > h3 { margin: 32px 0 16px; }
.datev-einstellung > .felder + .felder { margin-top: 24px; }

/* DATEV-Export (Spec DATEV 5): je Monat ein Abschnitt ohne Rahmen und Grund, die Exporte als Liste
   mit einer Linie darunter wie der Versand, Statuszeilen als .badge. */
.belegverweise { margin-bottom: 16px; }
.datevmonat { margin: 32px 0 8px; }
.datevmonat > h2 { margin-top: 0; }
.datevexporte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 40rem;
  margin-bottom: 16px;
  list-style: none;
}
.datevexporte li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.datevexporte .knopfreihe { margin: 0 0 0 auto; }
.ausgenommen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
  list-style: none;
}
.ausgenommen a { text-decoration: underline; text-underline-offset: 3px; }
/* Die Meldung nach „Datei erstellen“ und „Nicht in der Datei“ mit Abstand zu Knopf und Verweis
   (Gesamtdurchgang vom 14.11.2026, Befund G38); der Grund darunter als gewöhnlicher Text (G20). */
.datevmonat > .hinweisband:not([hidden]) { margin-top: 12px; }
.datevmonat > .knopfreihe + .knopfreihe, .datevmonat > .hinweisband + .knopfreihe { margin-top: 12px; }
.datevmonat > .badge { margin: 16px 0 8px; }
.datevmonat > .ausgenommen-grund { max-width: 40rem; margin: 0 0 8px; color: var(--white-80); }

/* OSS-Übersicht (Spec OSS, OS9): die Beträge rechtsbündig mit gleich breiten Ziffern, Abstand vor der Knopfreihe
   (Gesamtdurchgang, G40); die Breite der Quartalswahl gibt ihre Stufe (Feldregel vom 14.11.2026). */
#oss > .formularfeld { margin-bottom: 16px; }
@media (min-width: 641px) {
  .ossuebersicht .tabelle td:nth-child(n+3), .ossuebersicht .tabelle th:nth-child(n+3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
}
.ossuebersicht > .knopfreihe { margin-top: 16px; }

/* Gespeicherte Positionen (Spec Schneller anlegen 4): die Liste als Tabelle wie die übrigen,
   die Bezeichnung als Knopf in der Gestalt eines Verweises, der das Formular darüber öffnet;
   ohne Rahmen und ohne Grund. */
.positionsformular { margin-bottom: 32px; }
.positionsliste > .knopfreihe { margin-bottom: 16px; }
.positionsliste .namensknopf {
  padding: 0;
  font: inherit;
  color: var(--white);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
}
.positionsliste .namensknopf:hover { color: var(--green-light); }
/* Die offene Rückfrage zum Löschen bricht die Preise nicht um, und die Spalte der Handlung hat auf dem Desktop schon
   vorher die Breite der Rückfrage (Gesamtdurchgang vom 14.11.2026, G93). */
.positionsliste .tabelle td:nth-child(3) { white-space: nowrap; }
@media (min-width: 641px) {
  .positionsliste .tabelle td:last-child:not([data-label]) { width: 15rem; }
}

/* Gespeicherte Positionen im Editor (Spec Schneller anlegen AN3, AN4): Knöpfe und Suche unter den Positionen reichen
   ohne Stufe über die ganze Breite der Gruppe (Raster der Feldregel); die leere Stelle der Suche nimmt keinen Platz.
   Empfänger im Entwurf (Spec Angebote EF): Kennzeichen, Anzeige, Knöpfe und Statuszeile ebenso, ohne Rahmen und Grund;
   Anschrift und Adressen stehen je Zeile. */
.empfaengerteil > .angabenraster { margin-bottom: 0; }
.empfaengeranzeige dt { color: var(--white-60); }
.empfaengeranzeige dd { margin: 0; white-space: pre-line; color: var(--white); }
/* Die Statuszeile zu den Lücken des Entwurfs (09.11.2026): eine eigene Zeile in der Leiste hinter den Knöpfen,
   ohne Rahmen und Grund. */
#aktionsleiste > .badge { flex-basis: 100%; margin: 0; }
/* „Gespeichert.“ und die Aufforderung zur Vorschau stehen je als ganze Zeile, mit Abstand zur Ergebnistabelle
   (Sichtbefund S1-8 vom 14.11.2026). */
#aktionsleiste > .hinweissatz { flex-basis: 100%; margin: 0; }
#ergebnis:not(:empty) { margin-top: 32px; }
/* „Entfernen“ und „Position merken“ stehen mit Abstand unter dem letzten Feld der Position. */
.positionshandlungen { margin-top: 12px; }
.einfuegeplatz:empty { display: none; }

/* PDF-Ansicht (pdfansicht.js, 02.11.2026): über der ganzen Seite, oben Titel, „Herunterladen“ und
   „Schließen“, darunter jede Seite in voller Breite auf weißem Grund, wie das Papier. */
.pdfansicht { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--black); }
.pdfansicht-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pdfansicht-kopf h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.pdfseiten { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.pdfseite { display: block; width: 100%; max-width: 820px; height: auto; background: #FFFFFF; }

/* --- Handybreite: Kopf in einer Zeile, Navigation als Leiste unten, Tabellen als Listen -------- */
@media (max-width: 640px) {
  html { scroll-padding-bottom: 64px; }
  html:has(#aktionsleiste) { scroll-padding-bottom: 120px; }
  #aktionsleiste { position: sticky; bottom: calc(49px + env(safe-area-inset-bottom, 0px)); z-index: 19; flex-wrap: wrap; gap: 8px; margin-inline: -16px; padding: 8px 16px; background: var(--surface); border-top: 1px solid var(--border); }
  #aktionsleiste button { padding-inline: 12px; }
  #aktionsleiste > button, #aktionsleiste > .knopfreihe { flex: 1 1 0; }
  #aktionsleiste > .knopfreihe:has(> .frage:not([hidden])) { flex-basis: 100%; }
  .kopfname, .kopfkonto-inhalt .badge { display: none; }
  .kopfzeile { gap: 8px 12px; }
  .kopfzeile[data-bereich="mandant"] { flex-wrap: nowrap; }
  .navigation a, .unternavigation a { padding: 8px; }
  .kopfkonto { flex: 1 1 0; min-width: 0; }
  .kopfkonto-inhalt { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
  .kopfmandantgruppe { flex: 0 1 auto; min-width: 0; gap: 8px; }
  .kopfmandant { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kopfwahl { flex: 1 1 0; min-width: 0; }
  .kopfwahl label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kopfwahl select { flex: 1 1 0; min-width: 0; max-width: 100%; }
  .kopflogo { max-width: 64px; flex: none; }
  /* Mit Mandantenwahl bekommt sie eine eigene Zeile unter Wortmarke und Schalter: In einer Zeile mit beiden blieben
     ihr bei 390 px mit Logo 115 px, zu wenig für einen Namen (Klickliste P39 vom 09.11.2026, HB1). */
  .kopfzeile[data-bereich="mandant"]:has(.kopfwahl) { flex-wrap: wrap; }
  .kopfzeile[data-bereich="mandant"]:has(.kopfwahl) .darstellung { order: 2; }
  .kopfzeile[data-bereich="mandant"]:has(.kopfwahl) .kopfkonto { order: 3; flex: 1 1 100%; }
  .kopfmandantgruppe:has(.kopfwahl) { flex: 1 1 auto; }
  .kopfzeile[data-bereich="mandant"] [data-aktion="abmelden"] { display: none; }
  /* Im Abrufzeitraum führt jede Seite auf /app/kopie, auch „Mein Konto“: Dann bleibt der Knopf im Kopf
     (Sichtprüfung vom 13.11.2026). */
  .kopfzeile[data-bereich="mandant"] [data-aktion="abmelden"][data-abruf] { display: inline-block; }
  /* Ebenso ohne Hauptnavigation: Auf der Einrichtung mit Lücken und vor der Zustimmung gibt es „Mein Konto“ nicht
     (Schlusssicht S3-1 vom 14.11.2026). */
  .kopfzeile[data-bereich="mandant"] [data-aktion="abmelden"][data-ohne-navigation] { display: inline-block; }
  .kopfzeile[data-bereich="mandant"] .navigation { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--border); }
  .kopfzeile[data-bereich="mandant"] .navigation ul { flex-wrap: nowrap; gap: 0; }
  .kopfzeile[data-bereich="mandant"] .navigation li { flex: 1 1 0; min-width: 0; }
  .kopfzeile[data-bereich="mandant"] .navigation a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 2px; font-size: 13px; border-bottom: none; border-top: 2px solid transparent; border-radius: 0; }
  .kopfzeile[data-bereich="mandant"] .navigation a[aria-current="page"] { border-top-color: var(--green); }
  .kopfzeile[data-bereich="mandant"] .navigation a:focus-visible { outline-offset: -4px; }
  /* Nur mit sichtbarer Leiste: Im Abrufzeitraum und vor Zustimmung oder Einrichtung ist sie verborgen (G176). */
  body:has(.kopfzeile[data-bereich="mandant"] .navigation:not([hidden])) { padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px)); }
  .kopfzeile[data-bereich="betreiber"] .kopfkonto { order: 2; flex: 0 0 auto; margin-left: auto; }
  .kopfzeile[data-bereich="betreiber"] .navigation { order: 3; flex: 1 1 100%; }
  /* Der Schalter folgt dem Konto des Betreibers in dessen Zeile, vor der Navigation. Nach der Anmeldung
     weicht dafür das Kennzeichen: Mit ihm passen Wortmarke, Abmelden und Schalter nicht in eine Zeile (gemessen
     bei 390 px: 373 von 358 px). Die Wortmarke nennt den Bereich in ihrem Namen, die Navigation zeigt ihn. */
  .kopfzeile[data-bereich="betreiber"] .darstellung { order: 2; margin-left: 0; }
  .kopfzeile[data-bereich="betreiber"]:has(.kopfkonto-inhalt) .bereichsname { display: none; }
  .kopfkonto-inhalt .btn-secondary { padding: 6px 12px; }
  /* Am Handy steht die Liste der Übersicht untereinander über die ganze Breite. */
  .unternavigation.uebersicht .unterpunkte { grid-template-columns: 1fr; }
  /* Die drei Punkte der Unterleiste stehen in einer Zeile, je so breit wie ihr Wort; erst ganz schmal trennt ein langes Wort (Plan Angebote E18). */
  .belegleiste ul { flex-wrap: nowrap; gap: 0; }
  .belegleiste li { flex: 1 1 auto; min-width: 0; }
  .verlauf li { flex-direction: column; gap: 2px; }
  .belegleiste a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; text-align: center; hyphens: auto; }
  .unternavigation.uebersicht a { display: flex; align-items: center; min-height: 44px; }
  main { padding-inline: 16px; overflow-wrap: anywhere; }
  .zurueck { display: flex; align-items: center; min-height: 44px; margin-bottom: 4px; }
  main button { overflow-wrap: normal; }
  /* Feldregel am Handy: voll und halb über die ganze Breite, viertel bleibt 147 px; Raster aus zwei Vierteln und dem
     Rest, höchstens zwei Viertel nebeneinander. Die Auswahl einer Tabelle ist so breit wie ihre Zelle. Die Karte der
     Anmeldeseiten, der Zustimmung und der Einrichtung verliert Polster, Rand und Grund, damit ihre Felder 358 statt
     308 px breit sind wie in der Anwendung (Entscheidung vom 14.11.2026). */
  .feld-halb { width: 100%; }
  .formulargruppe, .positionsraster, .belegfilter, .feldreihe {
    grid-template-columns: minmax(0, var(--feld-viertel)) minmax(0, var(--feld-viertel)) minmax(0, 1fr);
  }
  :where(.formulargruppe, .positionsraster, .belegfilter, .feldreihe) > .feld-halb { grid-column: 1 / -1; }
  .tabelle td select { width: 100%; }
  .karte { padding-inline: 0; background: none; border: none; }
  .formulargruppe { min-width: 0; }
  .angabenraster { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  /* Die Anzeige des Empfängers steht am Handy untereinander: Beschriftung über dem Wert (Spec Angebote EF 6). */
  .angabenraster.empfaengeranzeige { grid-template-columns: 1fr; gap: 2px 0; }
  .empfaengeranzeige dd + dt { margin-top: 12px; }
  .knopfreihe > button, .knopfreihe > a { flex: 1 1 100%; }
  .formular > .btn-primary, .felder > .btn-primary { align-self: stretch; }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle thead { display: none; }
  .tabelle tr { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .tabelle tr:has(> td[data-label]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .tabelle td { display: block; padding: 2px 0; border-bottom: none; text-align: left; }
  .tabelle td.kopfzelle { order: -1; grid-column: 1 / -1; font-size: 16px; font-weight: 600; color: var(--white); }
  .tabelle td[data-label]::before { content: attr(data-label) " "; color: var(--white-60); }
  .tabelle td:empty { display: none; }
  .tabelle td a { white-space: normal; }
  /* Der Knopf in der Tabellenzelle der fälligen Wiederholungen ist auf dem Handy mindestens 44 px hoch. */
  .wiederholungen .tabelle td .btn-secondary { min-height: 44px; margin: 0; padding: 12px 16px; }
  /* Die letzte Zelle der fälligen Wiederholungen (Statuszeilen, „Entwurf anlegen“) reicht über beide Spalten. */
  .wiederholungen .tabelle td:last-child:not([data-label]) { grid-column: 1 / -1; }
  /* Die Knöpfe eines Mahnschreibens reichen über beide Spalten und füllen die Breite, mindestens 44 px hoch. */
  .mahnungen .tabelle td:last-child:not([data-label]) { grid-column: 1 / -1; padding-top: 12px; }
  .mahnungen .tabelle td .knopfreihe > .btn-secondary { min-height: 44px; }
  .mahnungen .tabelle td:has(> .versandnachweis:empty) { display: none; }
  /* Der Versandstand eines Schreibens reicht über beide Spalten; halb so breit schob die Statuszeile die Seite. */
  .mahnungen .tabelle td[data-label="Versand"] { grid-column: 1 / -1; }
  /* Die Mahnstufe der Belegliste steht als ganze Zeile unter Betrag und Stand (SPALTEN.mahnstufe in texte.js). */
  .tabelle td[data-label="Mahnstufe"] { grid-column: 1 / -1; }
  /* Benutzer: Rollenwahl und Handlungen reichen über beide Spalten, Status und Zeitpunkt stehen nebeneinander (G99). */
  #liste .tabelle td.rollenzelle, #liste .tabelle td:last-child:not([data-label]) { grid-column: 1 / -1; }
  #liste .tabelle td .knopfreihe > .btn-secondary { flex: 0 1 auto; }
  /* Der Satz zum Grund eines angehaltenen Termins reicht über beide Spalten; halb so breit stand er in sechs Zeilen. */
  .wiederholungen .tabelle td.grundzelle { grid-column: 1 / -1; }
  .wiederholungsverweis a, .vortag a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Die Knöpfe des Kits messen bei 390 px 42 bis 43,3 px; im Abschnitt „Wiederholung“ sind es mindestens 44. */
  .wiederholung .knopfreihe > button { min-height: 44px; }
  /* Alle Knöpfe der Belegansicht (PDF, Zahlung, Teilkorrektur, Kopie, Stornieren, Versand) sind auf dem Handy mindestens 44 px hoch. */
  #beleginhalt .btn-primary, #beleginhalt .btn-secondary { min-height: 44px; }
  /* „Speichern“ der DATEV-Einstellung ist auf dem Handy mindestens 44 px hoch. */
  .datev-einstellung .btn-primary { min-height: 44px; }
  /* Knöpfe und Verweise der Seite DATEV-Export sind auf dem Handy mindestens 44 px hoch. */
  #datev .btn-primary, #datev .btn-secondary { min-height: 44px; }
  #datev .knopfreihe > a.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .datevexporte .knopfreihe { flex-basis: 100%; margin: 0; }
  /* Zentriert wie die gleich gebauten Knöpfe auf Start und Kunden (Sichtbefund S1-12 vom 14.11.2026). */
  .ausgenommen a, .belegverweise a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* Die PDF-Ansicht nutzt am Handy die ganze Breite; ihre Knöpfe sind mindestens 44 px hoch. */
  .pdfansicht-kopf button { min-height: 44px; }
  .pdfansicht-kopf .knopfreihe { flex: 1 1 100%; flex-wrap: nowrap; }
  .pdfansicht-kopf .knopfreihe > button { flex: 1 1 0; }
  .pdfseiten { padding: 8px; gap: 8px; }
  /* „Anderen Kunden wählen“ und „Neuer Kunde“ sind auf dem Handy mindestens 44 px hoch. */
  .kundenfeld > .knopfreihe > button { min-height: 44px; }
  /* „Kunde anlegen“ ist auf dem Handy mindestens 44 px hoch. */
  .neuerkunde > .btn-secondary { min-height: 44px; }
  /* Gespeicherte Positionen: Bezeichnung, „Neue Position“, „Löschen“, „Ja“, „Nein“, „Weitere laden“
     und „Speichern“ sind auf dem Handy mindestens 44 px hoch; die Zelle mit „Löschen“ reicht über
     beide Spalten. */
  .positionsliste .namensknopf, .positionsliste .btn-primary, .positionsliste .btn-secondary,
  .positionsformular .btn-primary, .positionsformular .btn-secondary { min-height: 44px; }
  .positionsliste .tabelle td .btn-primary,
  .positionsliste .tabelle td .btn-secondary { margin: 0; padding: 12px 16px; }
  .positionsliste .tabelle td:last-child:not([data-label]) { grid-column: 1 / -1; }
  /* Die Auswahl der Zuordnung im Kundenimport reicht über beide Spalten der Karte (G90 vom 14.11.2026). */
  .importzuordnung .tabelle td:last-child { grid-column: 1 / -1; }
  /* Die Knöpfe unter den Positionen und an jeder Position im Editor sind auf dem Handy
     mindestens 44 px hoch. */
  .positionsknoepfe > button, .positionshandlungen > button { min-height: 44px; }
  /* Die Fußzeile mit Impressum, Datenschutzerklärung und Marke ist am Handy kleiner (Stefan, 01.11.2026). */
  .fusszeile { font-size: 12px; gap: 4px 16px; }
  .fusszeile ul { gap: 2px 16px; }
  .positionstabelle td:nth-child(n+3), .positionstabelle td:first-child { width: auto; text-align: left; white-space: normal; }
  .summenblock, .summenblock tbody, .abzugstabelle, .abzugstabelle tbody, .standzeilen, .standzeilen tbody, .vorstand, .vorstand tbody { display: block; }
  .summenblock thead, .abzugstabelle thead, .standzeilen thead, .vorstand thead { display: none; }
  .summenblock tr, .abzugstabelle tr, .standzeilen tr, .vorstand tr { display: flex; flex-direction: column; margin-bottom: 12px; }
  .summenblock td, .summenblock td + td, .abzugstabelle td, .abzugstabelle td + td, .standzeilen td, .standzeilen td + td, .vorstand td, .vorstand td + td { display: block; padding: 2px 0; text-align: left; }
  .summenblock td.kopfzelle, .abzugstabelle td.kopfzelle, .standzeilen td.kopfzelle, .vorstand td.kopfzelle { font-weight: 600; color: var(--white); }
  .summenblock td[data-label], .abzugstabelle td[data-label], .standzeilen td[data-label], .vorstand td[data-label] { display: flex; justify-content: space-between; gap: 16px; }
  .summenblock td[data-label]::before, .abzugstabelle td[data-label]::before, .standzeilen td[data-label]::before, .vorstand td[data-label]::before { flex: none; content: attr(data-label) " "; color: var(--white-60); }
  .summenblock td:empty, .abzugstabelle td:empty, .standzeilen td:empty, .vorstand td:empty { display: none; }
  /* Ein Betrag über drei Spalten (Abzug, Abzüge zusammen, Zahlbetrag) steht rechts wie die Beträge der Satzzeilen
     (Sichtbefund S1-13 vom 14.11.2026). */
  .abzugstabelle td[colspan] { text-align: right; }
}

/* Kurze Schirme (Handy, Laptop mit 720 px Höhe): oben und unten weniger Luft in Inhalt und Fußzeile, zusammen
   48 px. Gemessen am 01.11.2026 mit dem Band der Testumgebung: Start ohne fällige Wiederholung passt danach bei
   390 x 664 und 360 x 640 (natürliche Höhe 610 px), mit einer fälligen Wiederholung bei 1280 x 720 (708 px).
   Am Handy blättert Start mit einer fälligen Wiederholung weiter (827 von 664 und 849 von 640 px); dafür reichen
   Abstände nicht (docs/betrieb/entscheidungen-stufe-a.md, „Darstellung“). Ab 761 px Höhe gelten die Abstände
   des Desktops.
   Seitlich bleibt alles, wie es ist. */
/* Unter 900 px bliebe neben der Spalte der Einstellungen zu wenig Platz (Review vom 02.11.2026): Dort
   steht auf jeder Unterseite nur „Zurück zu den Einstellungen“, die Liste auf der Übersicht. */
@media (max-width: 900px) {
  .unternavigation:not(.uebersicht) { float: none; width: auto; }
  main > .unternavigation:not(.uebersicht) ~ * { margin-left: 0; max-width: none; }
  .unternavigation:not(.uebersicht) .untergruppe { display: none; }
  .unternavigation .zur-uebersicht {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    color: var(--white-60);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (max-width: 640px), (max-height: 760px) {
  main { padding-block: 24px; }
  .fusszeile { padding-block: 16px; }
}

/* --- Windows-Kontrastmodus (forced-colors) ------------------------------ */
/* Der Grund der aktuellen Seite fiele weg; der untere Rand bleibt und nimmt die Systemfarbe der Auswahl, die
   übrigen Verweise behalten keinen Rand. */
@media (forced-colors: active) {
  .navigation a, .unternavigation a { border-bottom-color: Canvas; }
  .navigation a[aria-current="page"],
  .unternavigation a[aria-current="page"] { border-bottom-color: Highlight; }
  .unternavigation .untergruppe a { border-left-color: Canvas; }
  .unternavigation .untergruppe a[aria-current="page"] { border-left-color: Highlight; }
  /* Felder: gesperrt gepunktet, ungültig in der Systemfarbe Mark mit 2 px (die Höhe bleibt, sie ist fest), die
     Auswahl mit dem Pfeil des Systems. */
  :where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):disabled { border-style: dotted; }
  :where(.formularfeld, .kopfwahl, .tabelle td) :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea)[aria-invalid="true"] { border-color: Mark; border-width: 2px; }
  :where(.formularfeld, .kopfwahl, .tabelle td) select { appearance: auto; background-image: none; }
  .kopfzeile[data-bereich="mandant"] .navigation a { border-top-color: Canvas; }
  .kopfzeile[data-bereich="mandant"] .navigation a[aria-current="page"] { border-top-color: Highlight; }
  /* Die Unterleiste unter „Belege“ wie die Navigation (Befund G186 vom 14.11.2026). */
  .belegleiste a { border-bottom-color: Canvas; }
  .belegleiste a[aria-current="page"] { border-bottom-color: Highlight; }
  /* Die Maske des Schalters trägt die Schriftfarbe der Knöpfe; ein Grund fiele sonst weg. */
  .darstellung::before { forced-color-adjust: none; background: ButtonText; }
}