/* app.css – Layout und Komponenten der Kundenseiten (docs/SPEC.md §18.4, §18.6, §18.7).
 *
 * Reihenfolge der Stylesheets: tokens.css (Variablen) → fonts.css (Schriften) → diese Datei.
 * Hier steht KEIN Farbwert: Farben kommen ausschließlich aus tokens.css über var(--…) (§18.1).
 * Ausnahmen: Weiß – es ist im Design kein Token, sondern schlicht die Papierfarbe – und die Systemfarben (Highlight,
 * Canvas, CanvasText, ButtonText, GrayText, FieldText) nur im Block für das Windows-Kontrastdesign am Ende (§18.7 Nr. 13).
 *
 * Ein einziger Breakpoint: 768 px (§18.6). tokens.css schaltet dort --page-padding um, hier kommen Logo-Größe
 * und Buttonbreite dazu; beide Blöcke tragen dieselbe Bedingung. Der Block für das Kontrastdesign am Ende ist kein
 * Breakpoint.
 *
 * Keine Inline-Styles und keine Inline-Skripte – die CSP lässt beides nicht zu (SEC-04, SEC-28).
 */

/* ---------------------------------------------------------------- Grundlagen */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Verhindert, dass iOS beim Drehen die Schrift eigenmächtig vergrößert. */
  -webkit-text-size-adjust: 100%;
}

/* `hidden` gilt auch dort, wo eine Klasse `display` setzt – z. B. das Suchfeld in 02c, das erst das Skript zeigt (P2-04). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-head);
  color: var(--color-text);
  /* Lange H1 wie „Rechnungsempfang ab 1. Januar 2027 – Ihre Angaben“ sollen nicht mit einem Wort enden (§18.3). */
  text-wrap: pretty;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--color-primary);
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--color-primary);
}

p {
  margin: 0;
}

a {
  color: var(--color-primary-text);
  /* Textlink nach §18.3: unterstrichen mit 2 px Abstand – im Design an jedem Link im Fließtext. */
  text-underline-offset: 2px;
}

/* Allein stehender Textlink (z. B. „Zur Startseite“, „Angaben ändern“ auf 03a): Tap-Ziel 44 px (§18.7 Nr. 1),
   nach dem Muster von „Angaben ändern“ im Design (Seite03). */
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
}

/* Links im Fließtext der Fehlerseiten (Postfach, Telefon): 500 laut §19.7 und Design 05a–05c. */
.link--stark {
  font-weight: var(--fw-strong);
}

/* Auf allen Bedienelementen, nie :focus – ein Mausklick soll keinen Ring hinterlassen (§18.4, §18.7 Nr. 6). */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Icons sitzen auf der Textzeile und dürfen nie schrumpfen, sonst verzerrt ein langer Text sie (§18.10). */
.icon {
  flex: 0 0 auto;
}

/* Nur für Vorlesesoftware: sichtbar entfernt, aber nicht display:none – sonst läse sie es gar nicht (§18.7 Nr. 7). */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Frist-Hervorhebung: nur der Datumswert ist hinterlegt (§18.4). */
mark {
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: var(--fw-strong);
  padding: 0 var(--space-1);
}

/* ---------------------------------------------------------------- Seitenraster (§18.6) */

/* Eine Spalte, mobile-first, max. 720 px – auch auf 1280 px keine zweite Spalte. Die 720 px sind die Breite des Textes
   (das Design rechnet ohne border-box); der Außenabstand kommt dazu, sonst wären es ab 768 px nur 656 px (§18.6). */
.inhalt {
  max-width: calc(var(--content-max) + 2 * var(--page-padding));
  margin: 0 auto;
  padding: var(--space-5) var(--page-padding) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------------------------------------------------------------- Kopf (§18.4 „Kopf“) */

.kopf {
  background: #fff;
  border-top: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--color-surface);
}

.kopf__inhalt {
  max-width: calc(var(--content-max) + 2 * var(--page-padding));
  margin: 0 auto;
  padding: var(--space-3) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.kopf__rechts {
  display: flex;
  align-items: center;
  /* 20 px stehen so im Entwurf; sie liegen zwischen --space-4 und --space-5 und bekommen kein eigenes Token. */
  gap: 20px;
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  color: var(--color-text);
}

.kopf__telefon {
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------- Wortmarke (§18.5) */

.logo {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 110px;
  height: 30px;
  color: var(--color-primary);
}

.logo__zeile1 {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: 20px;
  letter-spacing: 0.22em;
  line-height: 1;
}

.logo__zeile2 {
  font-size: 7.5px;
  letter-spacing: 0.3em;
  font-weight: var(--fw-strong);
  line-height: 1;
  margin-top: 3px;
}

/* Leipzig: weiße Wortmarke im Navy-Kasten – dasselbe Markup, nur andere Werte (§18.5, public/AGENTS.md). */
[data-tenant="leipzig"] .logo {
  background: var(--color-primary);
  color: #fff;
  padding: 0 6px;
  white-space: nowrap;
}

[data-tenant="leipzig"] .logo__zeile1 {
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

[data-tenant="leipzig"] .logo__zeile2 {
  font-size: 6.5px;
  letter-spacing: 0.14em;
}

/* ---------------------------------------------------------------- Sprachumschalter (§18.4) */

.sprache {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 32 px Inhalt plus 2 × 4 px Innenabstand wie im Design (dort ohne border-box) – also 40 px Mindestbreite.
   Hover-Unterstreichung in der Standardlage wie im Design; der aktive Link setzt seine 5 px selbst. */
.sprache__link {
  text-underline-offset: auto;
  min-width: calc(32px + 2 * var(--space-1));
  min-height: var(--control-height);
  padding: 0 var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-text);
  text-decoration: none;
}

/* Nur der inaktive Link bekommt beim Überfahren eine Unterstreichung; die des aktiven bleibt 2 px in Teal (Design Kopf). */
.sprache__link:not(.sprache__link--aktiv):hover {
  text-decoration: underline;
}

.sprache__link--aktiv {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-active);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.sprache__trenner {
  color: var(--color-line);
}

/* ---------------------------------------------------------------- Footer (§18.4 „Footer“) */

.fuss {
  background: var(--color-footer);
  color: var(--color-surface);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.fuss__inhalt {
  max-width: calc(var(--content-max) + 2 * var(--page-padding));
  margin: 0 auto;
  padding: var(--space-5) var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

/* align-items: center, weil E-Mail und Telefon 44 px hohe Tap-Ziele sind (§18.7 Nr. 1) – sonst säße der Trennpunkt oben. */
.fuss__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.fuss__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

.fuss__telefon {
  color: #fff;
  text-decoration: none;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------- Fehlerseiten (§19.7, §18.4) */

/* Die Status-Seiten haben ihr eigenes Raster (§19.5): 32 px unter dem Kopf, 24 px zwischen den Blöcken – genau
   umgekehrt zur allgemeinen Inhaltsspalte. Erkannt am großen Status-Icon, wie die Formatkarte an ihrem Radio; die
   Zwischenseite 04 hat kein Icon und wird an ihrem Formular erkannt (§19.6, seit P3-06). Ohne `:has()` gilt das
   allgemeine Raster (24 px oben, 32 px zwischen den Blöcken) – rein optisch, hingenommen. */
.inhalt:has(> .statusicon),
.inhalt:has(> .bestaetigen) {
  padding-top: var(--space-6);
  gap: var(--space-5);
}

/* Großes Status-Icon: Kreis 64 px, immer aria-hidden – die H1 daneben trägt die Bedeutung (§18.4).
   „Kein Konfetti, keine Animation.“ Die Erfolgs-Variante kam mit der generischen Danke-Seite (P2-08). */
.statusicon {
  margin: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.statusicon--neutral {
  border: 2px solid var(--color-text-2);
  color: var(--color-text-2);
}

.statusicon--frist {
  background: var(--color-accent);
  color: var(--color-text);
}

/* Erfolg (§18.4): Fläche Primär, weißer Haken 40 px – seit P2-08 auf der Danke-Seite. */
.statusicon--erfolg {
  background: var(--color-primary);
  color: #fff;
}

/* Danke-Seite (§19.5): Icon und H1 bilden einen eigenen Block mit 16 px; sonst das Raster der Status-Seiten. */
.inhalt:has(> .danke__kopf) {
  padding-top: var(--space-6);
  gap: var(--space-5);
}

.danke__kopf {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Listen auf 03a/03b/03c (§19.5, F16, K7): Listen 12 px, Überschrift–Liste 6 px, Einträge 2 px, <ul> 18 px eingerückt.
   Der Punkt vor der Überschrift ist Zusatz – die Überschrift trägt die Bedeutung. Portal grau (Entscheidung T22). */
.danke__listen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.danke__gruppe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.danke__listenkopf {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-strong);
}

.danke__punkt {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.danke__punkt--erforderlich {
  background: var(--color-warning);
}

.danke__punkt--bestaetigt {
  background: var(--color-success);
}

.danke__punkt--portal {
  background: var(--color-line);
}

.danke__liste {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.danke__adresse {
  overflow-wrap: anywhere;
}

.danke__adresse--stark {
  font-weight: var(--fw-strong);
}

/* „Angaben ändern“ bleibt linksbündig und inhaltsbreit – sonst streckte die Spalte den Link über die ganze Breite. */
.danke__link {
  align-self: flex-start;
}

/* Seite 04 (§19.6): Button und Hilfesatz bilden einen Block mit 12 px; nach einem CSRF-Fehlschlag steht der Hinweis darüber. */
.bestaetigen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Zusammenfassungs-Karte (§18.4; 03a, 03c, seit P3-06 auch 04 und 04a): Fläche Grau 2, 16 px Innenabstand, Zeilen 6 px
   auseinander. Zwei Klassen im Selektor: `.datenliste` steht weiter unten und setzte mit seiner Kurzform `gap` den
   Zeilenabstand sonst auf 4 px zurück (Befund P2-09-D01). */
.datenliste.zusammenfassung {
  background: var(--color-surface);
  padding: var(--space-4);
  row-gap: 6px;
}


/* Der Block um das Code-Feld auf 01, 04b, 05a und 05d (§19.2): Rahmen in Primärfarbe, keine Fläche. */
.codeblock {
  border: 2px solid var(--color-primary);
  padding: 20px var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Kopf der Admin-Seiten: statt der Wortmarke der Name der Anwendung (§19.7, nur Deutsch). */
.kopf__admin {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: var(--fs-h2);
  color: var(--color-text);
}

/* ---------------------------------------------------------------- Startseite 01 (§19.2) */

/* Echtheitshinweis: Liste ohne Aufzählungszeichen, je Punkt ein Häkchen 20 px in der Icon-Farbe (§18.10). */
.checkliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkliste__punkt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* 2 px nach unten: (24 px Zeilenhöhe − 20 px Icon) / 2 – das Häkchen steht mittig zur ersten Zeile. */
.checkliste__punkt .icon {
  color: var(--color-icon);
  margin-top: 2px;
}

/* Postfach und Hostname in 500 – Text, kein Link (Design 01). */
.checkliste__wert {
  font-weight: var(--fw-strong);
}

/* FAQ: die Einträge ohne Abstand, damit die Trennlinien aneinanderstoßen. */
.faq {
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------- Impressum und Datenschutz 06 (§19.8) */

/* Das Raster dieser Seiten ist enger: 24 px zwischen Zurück-Link, H1 und Abschnitten statt 32 px. */
.inhalt:has(> .rechtstext) {
  gap: var(--space-5);
}

/* Zurück-Link oben: 14 px, Chevron 16 px mit 6 px Abstand, nur so breit wie sein Text (sonst wäre die ganze Zeile
   klickbar). Farbe und Unterstreichung kommen vom allgemeinen Link, die 44 px Höhe von .textlink. */
.zurueck {
  align-self: flex-start;
  gap: 6px;
  font-size: var(--fs-small);
}

/* Der Text kommt als HTML-Fragment aus config/texte/ und trägt keine Klassen – gestaltet wird über diesen Rahmen.
   Silbentrennung, weil die Tabellenzellen auf 390 px schmal sind (lang="de" steht am Rahmen). */
.rechtstext {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  hyphens: auto;
}

.rechtstext section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rechtstext section:has(> table) {
  gap: var(--space-3);
}

/* Tabelle „Welche Daten, wozu, wie lange“: drei Spalten auch auf 390 px, 14 px/1.4, Linien wie im Design. */
.rechtstext table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-small);
  line-height: 1.4;
}

.rechtstext th,
.rechtstext td {
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.rechtstext th:first-child,
.rechtstext td:first-child {
  padding-left: 0;
}

.rechtstext th:last-child,
.rechtstext td:last-child {
  padding-right: 0;
}

.rechtstext thead tr {
  border-bottom: 2px solid var(--color-primary);
}

.rechtstext tbody tr {
  border-bottom: 1px solid var(--color-line);
}

/* ---------------------------------------------------------------- Abschnitt mit Nummernkreis (§18.4) */

.abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.abschnitt__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}

.abschnitt__nummer {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: var(--fs-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------- Karten und Datenlisten (§18.4) */

.karte {
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kundendaten__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Überschrift und Icon trennen die Farbe: die H2 ist Primär (§18.3; H2 seit T11), das Schloss folgt --color-icon –
   in Leipzig ist das #3697D9 und nicht das Navy der Überschrift (§18.2, §18.10). */
.kundendaten__kopf .icon {
  color: var(--color-icon);
}

.kundendaten__titel {
  margin: 0;
}

.kundendaten__lesbar {
  margin-left: auto;
  font-size: var(--fs-chip);
  color: var(--color-text-2);
  font-weight: var(--fw-body);
}

.kundendaten__nummern {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kundendaten__nummern-titel {
  font-size: var(--fs-small);
  color: var(--color-text-2);
}

.kundendaten__nummer {
  font-weight: var(--fw-strong);
}

.kundendaten__hinweis {
  font-size: var(--fs-small);
  color: var(--color-text-2);
}

/* Tap-Ziel mindestens 44 px (§18.7 Nr. 1, Entscheidung T11) – das Design zeichnet nur den Textlink. */
.kundendaten__mehr-knopf {
  list-style: none;
  cursor: pointer;
  min-height: var(--control-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kundendaten__mehr-knopf::-webkit-details-marker {
  display: none;
}

.kundendaten__mehr-text {
  font-size: var(--fs-small);
  /* Navy statt #007A76: auf der grauen Karte (#E6E8EB) hätte Teal nur 4,23:1 (Entscheidung T32, wie T26). Die
     Unterstreichung kennzeichnet den Link weiter. */
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

/* Aufgeklappt stehen alle Nummern unten – die drei in der Zusammenfassung wären sonst doppelt. */
.kundendaten__mehr[open] .kundendaten__mehr-knopf .chips {
  display: none;
}

/* Der Link wechselt den Text: zugeklappt „… und N weitere (anzeigen)“, aufgeklappt „Weniger anzeigen“ (A26). */
.kundendaten__mehr-text--auf,
.kundendaten__mehr[open] .kundendaten__mehr-text--zu {
  display: none;
}

.kundendaten__mehr[open] .kundendaten__mehr-text--auf {
  display: inline-flex;
}

/* Aufgeklappt steht der Link unter der vollen Liste, nicht darüber (A26). Browser, die `<details>` noch nicht als
   Flex-Container zulassen, lassen ihn oben stehen – bedienbar bleibt es in beiden Fällen. */
.kundendaten__mehr[open] {
  display: flex;
  flex-direction: column;
}

.kundendaten__mehr[open] > .kundendaten__mehr-knopf {
  order: 1;
}

/* Grid statt Tabelle: minmax(0,…), damit ein langer Firmenname umbricht statt die Spalte zu sprengen (§18.4). */
.datenliste {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  line-height: 1.4;
}

.datenliste dt {
  font-size: var(--fs-small);
  color: var(--color-text-2);
}

.datenliste dd {
  margin: 0;
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Chips (§18.4) */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.chip-nummer {
  height: 28px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius-input);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
}

.chip {
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-input);
  font-size: var(--fs-chip);
  font-weight: var(--fw-strong);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chip--vorausgefuellt {
  background: var(--color-surface);
}

.chip--vorausgefuellt .chip__punkt {
  background: var(--color-text-2);
}

.chip--fehlt {
  background: var(--color-warning-bg);
}

.chip--fehlt .chip__punkt {
  background: var(--color-warning);
}

.chip--ausstehend,
.chip--abgelaufen {
  background: var(--color-warning-bg);
}

.chip--bestaetigt {
  background: var(--color-success-bg);
}

.chip--portal {
  background: var(--color-info-bg);
}

.chip--portal .chip__punkt {
  background: var(--color-primary);
}

/* „ersetzt“ sieht man nur im Admin (§5.2): durchgestrichen und gestrichelt umrandet. */
.chip--ersetzt {
  background: var(--color-input);
  border: 1px dashed var(--color-line);
  color: var(--color-text-2);
  text-decoration: line-through;
}

/* ---------------------------------------------------------------- Auswahlkarte Format (§18.4) */

.formatwahl {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formatkarte {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 15px 17px;
  background: #fff;
  border: 1px solid var(--color-line);
  cursor: pointer;
}

.formatkarte:hover {
  border-color: var(--color-text-2);
}

.formatkarte--gewaehlt {
  border: 2px solid var(--color-active);
  padding: 14px 16px;
}

/* Gewählt: Rahmen wird 2 px, das Innenpolster 1 px kleiner – die Karte springt also nicht (§18.4).
   Die Farbe ist --color-active wie beim Radio-Ring und der aktiven Sprache; mit --color-primary wäre die
   gewählte Karte in Leipzig Navy statt Blau, und genau dafür gibt es den Alias (§18.1, Befund R-01).
   Ohne :has gilt die serverseitig gesetzte Klasse oben. Mit :has folgt der Rahmen beim Klicken dem Haken – auch ohne
   JavaScript (§18.7 Nr. 9, Befund R-03); die Klasse wird dann zurückgesetzt, sonst trügen nach einem Klick auf
   „XRechnung“ beide Karten den Rahmen (Befund D-01 zu P2-03). In einer gemeinsamen Selektorliste verwürfe ein Browser
   ohne :has außerdem die ganze Regel. */
@supports selector(:has(*)) {
  .formatkarte--gewaehlt {
    border: 1px solid var(--color-line);
    padding: 15px 17px;
  }

  .formatkarte:has(.formatkarte__radio:checked) {
    border: 2px solid var(--color-active);
    padding: 14px 16px;
  }
}

/* Der Ring liegt auf der ganzen Karte, nicht nur auf dem 22-px-Radio (§18.4). */
.formatkarte:has(.formatkarte__radio:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.formatkarte__radio,
.radiozeile__radio {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--color-text-2);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

/* Der Punkt entsteht als Innenschatten: 10 px Durchmesser, ohne zusätzliches Element. */
.formatkarte__radio:checked,
.radiozeile__radio:checked {
  border-color: var(--color-active);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--color-active);
}

.formatkarte__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.formatkarte__titel {
  font-weight: var(--fw-strong);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.formatkarte__beschreibung {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-2);
}

.formatkarte--gewaehlt .formatkarte__titel {
  font-weight: var(--fw-strong);
}

.badge {
  background: var(--color-info-bg);
  /* Navy statt #007A76: auf #E0F2F1 läge Teal bei 4,48:1, unter 4,5:1 (Entscheidung T26, §18.1). */
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  padding: 1px var(--space-2);
  border-radius: var(--radius-input);
}

/* ---------------------------------------------------------------- Token-Seite 02 (§19.3, §19.4; P2-03) */

/* Das Formular ist ein eigener Block im Seitenraster: dieselben 32 px zwischen seinen Abschnitten wie auf der Seite (W-39). */
.formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Häkchen-Zeile unter der Einleitung: umbrechende Reihe, 14 px, Haken 18 px in der Icon-Farbe (Baustein Seite02a). */
.haekchen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-2);
}

.haekchen__punkt {
  display: flex;
  align-items: center;
  gap: 6px;
}

.haekchen__punkt .icon {
  color: var(--color-icon);
}

/* 02b: Feldblöcke 16 px auseinander statt der 12 px zwischen Elementen eines Abschnitts (Baustein Seite02b). */
.abschnitt--felder {
  gap: var(--space-4);
}

/* 02a: die heutige Adresse – Hinweis 14 px, die Adresse selbst 20 px/500 und bei langen Adressen umbrechend (§18.7 Nr. 8). */
.adresse-aktuell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.adresse-aktuell__gilt,
.adresse-aktuell__hinweis {
  font-size: var(--fs-small);
  color: var(--color-text-2);
}

.adresse-aktuell__gilt {
  font-weight: var(--fw-strong);
}

.adresse-aktuell__wert {
  font-size: var(--fs-h2);
  font-weight: var(--fw-strong);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Radio-Zeile (§18.4): 44 px hoch, gap 12 px; gewählt in 500 – serverseitig über die Klasse, beim Klicken ohne
   JavaScript über :has(:checked), wie bei der Formatkarte. Den Fokusring trägt das Radio selbst (globales :focus-visible). */
.radiogruppe {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radiozeile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  cursor: pointer;
}

.radiozeile--gewaehlt {
  font-weight: var(--fw-strong);
}

/* Mit :has folgt die Schrift beim Klicken dem Haken, nicht der Vorbelegung vom Server – auch ohne JavaScript. */
@supports selector(:has(*)) {
  .radiozeile--gewaehlt {
    font-weight: inherit;
  }

  .radiozeile:has(.radiozeile__radio:checked) {
    font-weight: var(--fw-strong);
  }
}

/* 02a „Adresse ändern“: eigener weißer Kasten mit 1 px Linie (im Design als outline), 16 px innen und zwischen den Feldern. */
.aenderung {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: #fff;
  outline: 1px solid var(--color-surface);
}

/* Ein- und Ausblenden ohne JavaScript (§18.7 Nr. 9). Wer :has nicht kennt, überspringt den ganzen Block – der Kasten
   bleibt dann sichtbar (harmloser Fallback laut Design). */
@supports selector(:has(*)) {
  .adresswahl:not(:has(.radiozeile__radio[value="aendern"]:checked)) .aenderung {
    display: none;
  }
}

/* Allein stehender Textlink in 14 px, z. B. „Je Kundennummer eine Adresse“ – Tap-Ziel bleibt 44 px (.textlink). */
.textlink--klein {
  font-size: var(--fs-small);
  align-self: flex-start;
}

/* ---------------------------------------------------------------- 02c Gruppe (§19.4, Baustein Seite02c; P2-04) */

/* Die beiden Blöcke der Modi: 02b-Block mit Feldabstand 16 px, Liste mit Vorbelegungen darüber. */
.modusblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Ohne JavaScript über :has(:checked) (§18.7 Nr. 9). Wer :has nicht kennt, überspringt den Block – dann sind beide
   Blöcke sichtbar, und der Server wertet nur den gewählten aus (§6.3 Nr. 5). */
@supports selector(:has(*)) {
  .gruppenwahl:has(.radiozeile__radio[value="alle"]:checked) .modusblock--einzeln,
  .gruppenwahl:has(.radiozeile__radio[value="einzeln"]:checked) .modusblock--alle {
    display: none;
  }
}

/* Sekundärbutton und darunter der Textlink, beide linksbündig, 10 px Abstand (Baustein Seite02c). */
.vorbelegung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Sekundärbutton in 02c, im 02d-Banner und auf 04a: 44 px, padding 0 20 px, inhaltsbreit, linksbündig (§18.4).
   Mit beiden Klassen, weil der Block „Knöpfe“ weiter unten steht – sonst gewänne dort `.knopf` (Review zu P2-04, R-01). */
.knopf.knopf--kompakt {
  min-height: var(--control-height);
  padding: 0 20px;
  text-align: left;
}

/* Ein Submit, der wie ein Textlink aussieht („Adresse aus Zeile 1 …“, W-26): 14 px, unterstrichen, Tap-Ziel 44 px. */
.textknopf {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: inherit;
  line-height: 1.4;
  text-align: left;
  color: var(--color-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Der Knopf mitten im Satz der Resend-Box auf 03a (§19.5): Schrift und Zeilenhöhe des Satzes, ohne eigene Mindesthöhe
   (§18.7 Nr. 1, Klickziel im Fließtext) – er muss ein POST bleiben, darf also kein Link sein. Ein <button> fließt nicht wie
   ein Link über Zeilen, er ist immer inline-block: Er springt als Ganzes in die nächste Zeile und bricht bei sehr schmalem
   Bildschirm in sich um. Den Schlusspunkt des Satzes trägt er deshalb selbst, nicht unterstrichen (Befund P2-09-D03). */
.textknopf--imtext {
  display: inline-block;
  min-height: 0;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

.textknopf--imtext .textknopf__text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* In der Hinweis-Box Typ info Navy statt Teal: #007A76 auf #E0F2F1 hat 4,48:1 (T26, §18.1). Die Unterstreichung kennzeichnet
   den Knopf weiter (§18.7 Nr. 13). */
.hinweis--info .textknopf {
  color: var(--color-text);
}

/* Zeile 1 leer: grau und nicht bedienbar – setzt nur das Skript (§19.4). */
.textknopf[aria-disabled="true"] {
  color: var(--color-line);
  cursor: not-allowed;
}

/* Suchfeld ab 8 Zeilen: Label über dem Feld, Icon 20 px links im Feld (padding-left 40 px). */
.suche {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suche__feld {
  position: relative;
}

.suche__feld .icon {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  color: var(--color-text-2);
  pointer-events: none;
}

/* Mit beiden Klassen aus demselben Grund wie `.knopf.knopf--kompakt`: `.feld` steht weiter unten. */
.feld.feld--suche {
  padding-left: 40px;
}

/* Ergebnis der Suche (T20): 14 px wie der Hilfetext. Leer bleibt die Live-Region im Markup – der negative Abstand hebt nur
   die Lücke auf, die sie sonst im Block hinterließe (display:none nähme sie Vorlesesoftware weg). */
.suche__ergebnis {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-2);
}

.suche__ergebnis:empty {
  margin-top: -6px;
}

/* Zähler-Zeile: 14 px/1.5 in Dunkelblau; „{n} Kundennummern“ und „{n} fehlen“ in 500 Navy. */
.zaehler {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-2);
}

.zaehler__teil--stark {
  font-weight: var(--fw-strong);
  color: var(--color-text);
}

/* Listenbereich: höchstens 560 px hoch und innen scrollbar, 1 px Rahmen, seitlich 12 px – auf Desktop gleich. */
.gruppenliste {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-3);
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--color-surface);
}

.zeile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-surface);
}

.zeile__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Kundennummer in Monospace 14 px/500, der Zusatz in 300 Dunkelblau und auf eine Zeile gekürzt (§19.4, F17). Gekürzt wird
   zuerst die Firma – der Ort unterscheidet Zeilen derselben Firma und bleibt so lange wie möglich stehen. */
.zeile__label {
  display: flex;
  min-width: 0;
  gap: 0.3em;
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  line-height: 1.3;
}

.zeile__kto {
  flex: 0 0 auto;
  font-family: var(--font-mono);
}

.zeile__zusatz {
  display: flex;
  min-width: 0;
  gap: 0.3em;
  white-space: nowrap;
  font-weight: var(--fw-body);
  color: var(--color-text-2);
}

.zeile__firma,
.zeile__ort {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zeile__firma {
  flex: 0 1000 auto;
}

.zeile__ort {
  flex: 0 1 auto;
}

/* „Was ist der Unterschied?“ unter den Formatkarten: Textlink statt Akkordeon (Baustein Formatwahl) – 14 px/1.5,
   unterstrichen, ohne Marker, ohne Chevron und ohne Linien, Tap-Ziel 44 px. */
.unterschied {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.unterschied__frage {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  color: var(--color-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.unterschied__frage::-webkit-details-marker {
  display: none;
}

.unterschied__text {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

/* ---------------------------------------------------------------- Felder (§18.4 „Textfeld“) */

.feldblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feldlabel {
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  /* Label 14 px/500 mit Zeilenhöhe 1.3 (§18.3, Design Codeeingabe). */
  line-height: 1.3;
}

.feld {
  width: 100%;
  min-height: var(--control-height);
  background: var(--color-input);
  border: 0;
  border-radius: var(--radius-input);
  padding: 10px var(--space-3);
  font-family: inherit;
  /* Das Feld erbt die 300 wie im Design; ohne diese Zeile setzt der Browser 400. */
  font-weight: inherit;
  /* 16 px verhindert, dass iOS beim Hineintippen zoomt (§18.7). */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  /* Ein Sprung auf das Feld (Link der Fehler-Zusammenfassung, Umschalt+Tab) zeigt auch sein Label bzw. die Kopfzeile der
     02c-Zeile darüber – sonst stünde das Feld bündig an der Oberkante (Review zu P2-04, D-04). */
  scroll-margin-top: var(--control-height);
}

.feld::placeholder {
  color: var(--color-line);
  /* Firefox gibt Platzhaltern sonst Deckkraft 0,54 – sie wären heller als im Design. */
  opacity: 1;
}

/* Fehlerzustand: Rahmen kommt dazu, Polster wird kleiner – die Feldgröße bleibt gleich (§18.4). */
.feld[aria-invalid="true"] {
  border: 2px solid var(--color-error);
  padding: 8px 10px;
}

.feld--bemerkung {
  min-height: 96px;
  resize: vertical;
}

/* Basis 200 px und höchstens 320 px Text wie im Design (dort ohne border-box) – der Innenabstand kommt dazu. Auf
   390 px bricht „Weiter“ dadurch unter das Feld um, wie im Design; ab 768 px stehen beide in einer Zeile. */
.feld--code {
  flex: 1 1 calc(200px + 2 * var(--space-3));
  width: auto;
  max-width: calc(320px + 2 * var(--space-3));
  height: var(--control-height);
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hilfetext {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-2);
}

/* Fehlertext am Feld (§18.4 „Textfeld“ Zustand fehler, §18.7 Nr. 3): 14 px/1.5, 500, #B8002F, davor das Icon `error`
   18 px in #FF1744 – Icon und Text, nie nur Farbe. */
.feldfehler {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  font-weight: var(--fw-strong);
  color: var(--color-error-text);
}

.feldfehler .icon {
  color: var(--color-error);
  margin-top: 2px;
}

/* MX-Hinweis am Feld (F27, P2-08): kein Fehler – Text in Navy, nur das Icon in Warnfarbe (Statusfarbe nie als Text, §18.1). */
.feldhinweis {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.feldhinweis .icon {
  color: var(--color-warning);
  margin-top: 2px;
}

.codeeingabe {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.codeeingabe__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------- Honeypot (§6.5, P2-06) */

/* Für Menschen unsichtbar, für Bots ein normales Textfeld: nicht `display: none` und nicht `type="hidden"` – beides
   übergehen Formular-Bots. Ohne CSS steht die Beschriftung „bitte leer lassen“ lesbar da. */
.honigtopf {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- Knöpfe (§18.4) */

.knopf {
  min-height: var(--button-height);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-0);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
  cursor: pointer;
}

.knopf--primaer {
  width: 100%;
  background: var(--color-primary-text);
  color: #fff;
}

.knopf--primaer:hover {
  background: var(--color-primary-dark);
}

.knopf--sekundaer {
  background: #fff;
  border: 2px solid var(--color-primary-text);
  color: var(--color-primary-text);
}

.knopf--sekundaer:hover {
  background: var(--color-info-bg);
  /* Navy auf der hellen Fläche – Teal hätte dort 4,48:1 (T26, §18.1); der Rahmen bleibt Teal. */
  color: var(--color-text);
}

/* Primärbutton „groß“ – nur auf 04, das einzige Ziel der Seite: 52 px hoch, 18 px (§18.4). Breite wie jeder
   Primärbutton: mobil voll, ab 768 px 320 px. */
.knopf--gross {
  min-height: 52px;
  font-size: 18px;
}

/* Ein Link im Aussehen eines Buttons („Angaben ansehen oder ändern“ auf 04a, §19.6): Text mittig in der Höhe, ohne
   Unterstreichung, inhaltsbreit und linksbündig in der Spalte – sonst streckte sie ihn über die ganze Breite. */
a.knopf {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  text-decoration: none;
}

/* Inline neben dem Code-Feld: 44 px und inhaltsbreit – die Ausnahme von „volle Breite / 320 px“ (§18.4, W-39 d). */
.knopf--inline {
  min-height: var(--control-height);
  width: auto;
  background: var(--color-primary-text);
  color: #fff;
}

.knopf--inline:hover {
  background: var(--color-primary-dark);
}

/* Nur während des Absendens, und das gibt es nur mit JavaScript – nie dauerhaft (§18.4). `formular.js` sperrt über
   `aria-disabled`, nicht `disabled`: Sonst fehlte der Wert des gedrückten Knopfs in der Anfrage (P2-08). */
.knopf[aria-disabled="true"],
.knopf--primaer[aria-disabled="true"]:hover,
.knopf:disabled {
  background: var(--color-line);
  border-color: var(--color-line);
  color: #fff;
  cursor: not-allowed;
}

/* Der Sekundärbutton bleibt auch deaktiviert weiß; grau werden nur Text und Rahmen (§18.4). */
.knopf--sekundaer:disabled {
  background: #fff;
  border-color: var(--color-line);
  color: var(--color-line);
}

/* ---------------------------------------------------------------- Hinweis-Boxen (§18.4) */

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border: 2px solid;
  border-radius: var(--radius-0);
  color: var(--color-text);
}

.hinweis--info {
  border-color: var(--color-primary);
  background: var(--color-info-bg);
}

.hinweis--warnung {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.hinweis--fehler {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.hinweis--fehler .icon {
  color: var(--color-error-text);
}

.hinweis--erfolg {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.hinweis--frist {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

/* Erster Satz eines Banners (02d, auf 03a F22/F23) und die Rückmeldung nach einem Resend: 500 (§19.4). */
.hinweis__titel {
  font-weight: var(--fw-strong);
}

/* Links in jeder Hinweis-Box in Navy (§18.1 „Text darauf immer Navy“, §18.4): Banner 5 mit dem Postfach (§19.4 „Navy,
   unterstrichen, 500“) und die Box „nicht vollständig angekommen“ – #007A76 hätte dort auf #FFE3E8 nur 4,30:1 (Befund
   P2-12 RO-01). */
.hinweis a {
  color: var(--color-text);
}

/* Das Resend-Formular füllt die Box neben dem Icon; ohne min-width sprengte eine lange Zeile die Box. */
.hinweis__form {
  margin: 0;
  min-width: 0;
}

/* Banner 1 der Statusansicht 02d (§19.4, Baustein Seite02d): Text, Rückmeldung nach einem Resend und der Sekundärbutton
   untereinander, 10 px Abstand, der Knopf linksbündig und inhaltsbreit. */
.hinweis__inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* Die Adresse im Banner: 500 und an jeder Stelle umbrechbar (§19.4 „Adresse 500 mit overflow-wrap:anywhere“). */
.hinweis__adresse {
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Lese-Ansicht 02d, Zustand 5 (§19.4, Baustein Seite02d) */

/* H2 ohne Nummernkreis, darunter der Kasten: 1 px Grau 2, keine Fläche, einspaltig, 12 px; je Paar `dt` über `dd` mit 2 px
   (nicht die graue Zusammenfassungs-Karte von 03 – W-49). */
.leseansicht {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.leseansicht__liste {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  line-height: 1.4;
}

.leseansicht__paar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.leseansicht__paar dt {
  font-size: var(--fs-small);
  color: var(--color-text-2);
}

.leseansicht__paar dd {
  margin: 0;
}

.leseansicht__wert {
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}

/* Die Bemerkung ist mit Zeilenumbrüchen gespeichert (LF, §6.9) – sie bleiben sichtbar. */
.leseansicht__bemerkung {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Gruppe „je Kundennummer“: „{kto} · {Zusatz} → {Adresse}“ und der Chip; der Chip bricht bei Bedarf in die nächste Zeile. */
.leseansicht__zeilen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.leseansicht__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

/* Leipzig: Der blaue Fokusrahmen #3697D9 hätte auf den getönten Boxen unter 3:1 (2,64–2,87:1), auf der grauen
   Kundendaten-Karte 2,60:1; dort zeigt er das Navy des Mandanten (Entscheidungen T27, T32; §18.4). tokens.css bleibt, wie
   sie ist. */
[data-tenant="leipzig"] :is(.hinweis, .fehlerliste, .karte) :focus-visible {
  outline-color: var(--color-primary);
}

/* ---------------------------------------------------------------- Fehler-Zusammenfassung (§19.4, W-39 g) */

.fehlerliste {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-text);
}

.fehlerliste .icon {
  color: var(--color-error-text);
  margin-top: 1px;
}

.fehlerliste__inhalt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fehlerliste__titel {
  font-weight: var(--fw-strong);
}

.fehlerliste__liste {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-small);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fehlerliste__liste a {
  color: var(--color-error-text);
  text-underline-offset: 2px;
}

.abschluss {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------------------------------------------------------------- Akkordeon (§18.4) */

/* Jedes <details> trägt seine Linie unten, das erste zusätzlich oben – sonst stünden zwischen zwei
   Einträgen 2 px statt 1 px (§18.4: Container border-top, je Eintrag border-bottom). */
.akkordeon {
  border-bottom: 1px solid var(--color-line);
}

.akkordeon:first-of-type {
  border-top: 1px solid var(--color-line);
}

.akkordeon__kopf {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* 48 px Mindesthöhe plus 2 × 8 px Innenabstand wie im Design (ohne border-box): 64 px. */
  min-height: calc(var(--button-height) + 2 * var(--space-2));
  padding: var(--space-2) 0;
  font-weight: var(--fw-strong);
  /* Zeilenhöhe „normal“ wie im Design (dort geerbt, bei Cairo etwa 1,87) – zweizeilige Fragen auf 390 px. */
  line-height: normal;
  color: var(--color-text);
  cursor: pointer;
}

.akkordeon__kopf::-webkit-details-marker {
  display: none;
}

.akkordeon__kopf .icon {
  color: var(--color-icon);
}

.akkordeon[open] .akkordeon__kopf .icon {
  transform: rotate(180deg);
}

.akkordeon__text {
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- Ab 768 px (§18.6) */

@media (min-width: 768px) {
  .logo {
    width: 160px;
    height: 44px;
  }

  .logo__zeile1 {
    font-size: 29px;
  }

  .logo__zeile2 {
    font-size: 11px;
    letter-spacing: 0.28em;
    margin-top: var(--space-1);
  }

  /* Leipzig ist nur mobil gezeichnet; Kasten und Schrift wachsen im Verhältnis 160/110 (§18.5). */
  [data-tenant="leipzig"] .logo__zeile1 {
    font-size: 13.8px;
  }

  [data-tenant="leipzig"] .logo__zeile2 {
    font-size: 9.5px;
    margin-top: var(--space-1);
  }

  .knopf--primaer {
    width: 320px;
  }
}

/* ---------------------------------------------------------------- Windows-Kontrastdesign (§18.7 Nr. 13; P2-16) */

/* Im Kontrastdesign (forced-colors) setzt der Browser Systemfarben ein und verwirft Hintergründe und box-shadow. Ohne
   diesen Block fehlten der Punkt des gewählten Radios (Innenschatten), der Rahmen der gefüllten Knöpfe und der Rahmen der
   grauen Felder – gesehen mit make sichtpruefung (Befunde SO-05/RO-06 aus P2-12). Systemfarben lässt der Browser stehen;
   das normale Bild ändert sich nicht. */
@media (forced-colors: active) {
  /* Punkt und Ring wie sonst, in der Farbe der Auswahl: nur das gewählte Radio verlässt dafür die Farbersetzung. */
  .formatkarte__radio:checked,
  .radiozeile__radio:checked {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Canvas;
    box-shadow: inset 0 0 0 4px Canvas, inset 0 0 0 10px Highlight;
  }

  /* forced-color-adjust: none gälte sonst auch für den Fokusring, den das Radio selbst trägt (Befund P2-16 D03). */
  .formatkarte__radio:checked:focus-visible,
  .radiozeile__radio:checked:focus-visible {
    outline-color: CanvasText;
  }

  .formatkarte:has(.formatkarte__radio:checked) {
    border-color: Highlight;
  }

  .knopf--primaer,
  .knopf--inline {
    border: 2px solid ButtonText;
  }

  /* Dieselbe Liste wie in der Grundregel – sonst gewänne dort `.knopf--primaer[aria-disabled="true"]:hover` (D02). */
  .knopf[aria-disabled="true"],
  .knopf--primaer[aria-disabled="true"]:hover,
  .knopf:disabled {
    border-color: GrayText;
    color: GrayText;
  }

  .textknopf[aria-disabled="true"] {
    color: GrayText;
  }

  .feld {
    border: 1px solid FieldText;
  }

  /* Inline-SVG behält im Kontrastdesign seine eigene Farbe; die Icons folgen hier dem Thema (D04). */
  .icon {
    forced-color-adjust: auto;
  }
}