/* Erzeugt von bin/bauen.php aus spec/tokens.css und spec/seite.css. */
/* Designsystem — die einzige Stelle mit Hex-Farben (R18, PLAN § 6).
 *
 * Fassung 3, 27.09.2026. Fassung 2 (Papierbeige, Serifenschrift, Terrakotta,
 * Pillenknöpfe) war nach Aussage des Betreibers „genau das Standardprofil“ -
 * man erkenne sofort, womit sie gemacht ist - und im Dunkelmodus „sehr
 * dunkel“. Beides stimmte. Diese Fassung:
 *
 *   - weiß und kühl statt Papierbeige; hell, auch wenn das Gerät dunkel
 *     eingestellt ist (kein automatischer Dunkelmodus mehr);
 *   - Grotesk statt Serife: Bricolage Grotesque für Überschriften,
 *     Instrument Sans für Text;
 *   - Kobaltblau als einzige Akzentfarbe, Textmarker-Gelb für das, was
 *     hervorgehoben wird;
 *   - kantig statt weich: kleine Radien, kräftige Linien.
 *
 * Das Motiv bleibt, weil es aus dem Inhalt kommt:
 *     gefüllt     = der Anbieter sagt etwas, mit Quelle
 *     gestrichelt = er sagt nichts dazu
 *
 * Kontraste nachgerechnet am 27.09.2026 (WCAG 2.1, relative Leuchtdichte):
 *   Tinte auf Weiß 18,2:1, Grau auf Weiß 7,8:1, Kobalt auf Weiß 7,4:1,
 *   Weiß auf Kobalt 7,4:1, Tinte auf Textmarker 14,3:1,
 *   Lückenrand auf Weiß 3,7:1 (WCAG 1.4.11).
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/schriften/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/schriften/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Abstände — die alte Skala, oben um zwei Stufen für große Flächen
     ergänzt. Keine Werte dazwischen. */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-8: 64px;
  --abstand-9: 96px;
  --abstand-10: 128px;

  /* Schrift — Grundtext 17, nie unter 15 (R22). Oben zwei Schaugrößen,
     die nur Überschriften und die große Zahl tragen. */
  --schrift-klein: 15px;
  --schrift-grund: 17px;
  --schrift-name: 21px;
  --schrift-abschnitt: 27px;
  --schrift-titel: 34px;
  --schrift-gross: 48px;
  --schrift-schau: 72px;
  --schrift-riesig: 128px;
  /* 13 px bleibt in der Skala, trägt aber keinen Text (R22). */
  --schrift-beiwerk: 13px;

  --satzbreite: 64ch;
  --seitenbreite: 1240px;

  --radius-1: 2px;
  --radius-2: 4px;
  --radius-rund: 4px;

  --schrift-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-schau-familie: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;

  --dauer-kurz: 180ms;
  --dauer-lang: 900ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* Farben - nur hell. */
  color-scheme: light;
  --papier: #FFFFFF;          /* Grund */
  --flaeche: #F3F5F8;         /* Karten, Tabellenstreifen */
  --papier-tief: #EEF1F5;     /* Bühne, Fußleiste */
  --tinte: #0F1523;           /* auf Weiß 18,2:1 */
  --grau: #4A5263;            /* auf Weiß 7,8:1 */
  --signal: #1F3FE0;          /* Kobalt; auf Weiß 7,4:1 */
  --signal-invers: #1F3FE0;   /* früher für die dunkle Fußleiste; sie ist jetzt hell */
  --marker: #FFE45C;          /* Textmarker - nur hinter Tinte */
  --stille-rand: #7C8596;     /* Lücke: gestrichelter Umriss, auf Weiß 3,7:1 */
  --stille-strich: #D5DAE3;
  --linie: #E1E5EC;
  --schatten: 0 1px 0 rgba(15, 21, 35, 0.06), 0 10px 24px -16px rgba(15, 21, 35, 0.22);

  --warnung-grund: #FFF6D1;
  --warnung-linie: #B98A2A;
  --warnung-text: #5A430E;
  --fehler-grund: #FDECEA;
  --fehler-text: #9A1B10;
  --erfolg-text: #1F5130;

  /* Alte Namen, auf die neuen gelegt: Adminbereich und Formularseiten
     benutzen sie weiter. */
  --grund: var(--papier);
  --grund-gedaempft: var(--papier-tief);
  --grund-vertieft: var(--linie);
  --text: var(--tinte);
  --text-gedaempft: var(--grau);
  --akzent: var(--signal);
  --akzent-text: #FFFFFF;
  --fokus: var(--signal);
}

/*
 * Öffentliches Stylesheet, Fassung 2 (25.09.2026).
 *
 * Keine Hex-Farbe und kein freier px-Wert (Prüfungen 9 und 10): Farben
 * und Maße kommen aus tokens.css. Schriften liegen auf diesem Server,
 * nicht bei einem Dritten - die Datenschutzerklärung verspricht „keine
 * eingebundenen Schriften von Dritten“, und das bleibt wahr.
 *
 * Das Motiv: Tinte = gesagt, Schraffur = nicht gesagt. Mehr Schmuck
 * gibt es nicht; jede Fläche hier trägt Information.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--abstand-7);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--schrift-grund);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Lange Adressen ohne Trennstelle sprengen sonst bei 200 % Zoom die
     Zeile (Prüfung 17, 23.09.2026). Trennt nur, wo es überläuft. */
  overflow-wrap: break-word;
}

::selection { background: var(--marker); color: var(--tinte); }

/* --- Schrift ----------------------------------------------------------- */

h1, h2, h3, .schau {
  font-family: var(--schrift-schau-familie);
  font-weight: 720;
  font-stretch: 88%;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--schrift-titel); }
h2 { font-size: var(--schrift-abschnitt); }
h3 { font-size: var(--schrift-name); line-height: 1.2; }
em, .kursiv { font-style: italic; }
/* Bricolage hat keine Kursive: in Überschriften wird Betontes markiert,
   nicht schräg gestellt. */
h1 em, h2 em, .fuss-satz em {
  font-style: normal;
  background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%);
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

p { margin: 0 0 var(--abstand-4); }
/* Satzbreite nur für Fließtext - nicht für Listen, die Raster, Karten
   oder Schritte tragen. Die erste Fassung begrenzte jede Listenzeile und
   drückte damit das Startseitenraster auf 60 % seiner Fläche. */
main p, [data-block="text"] li { max-width: var(--satzbreite); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
  /* Nur die Unterstreichung wird animiert, nie die Farbe: beim Wechsel
     zwischen hell und dunkel lief die Linkfarbe sonst 180 ms lang von
     der hellen zur dunklen Tinte - und stand in dieser Zeit fast
     unsichtbar auf dem schon dunklen Grund (1,07:1). CI hat genau diesen
     Moment gemessen, am 25.09.2026, zwölfmal auf der Startseite. */
  transition: text-decoration-thickness var(--dauer-kurz) var(--kurve);
}
a:hover { text-decoration-thickness: 0.2em; color: var(--signal); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, .rolle:focus-visible,
.tabellenrahmen:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

.klein, .beiwerk { font-size: var(--schrift-klein); color: var(--grau); }

/* Kleine Überzeile in Kapitälchen - der Ton einer Zeitschrift, nicht
   eines Formulars. */
.ueberzeile {
  display: block;
  font-size: var(--schrift-klein);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: var(--abstand-4);
}

/* --- Sprunglink, Rahmen ------------------------------------------------ */

.sprunglink {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--tinte);
  color: var(--papier);
}
.sprunglink:focus {
  width: auto;
  height: auto;
  clip-path: none;
  left: var(--abstand-4);
  top: var(--abstand-2);
  z-index: 10;
}

.kopfleiste > div,
main,
.fussleiste > div {
  max-width: var(--seitenbreite);
  margin: 0 auto;
  /* PLAN § 6: Seitenrand >= 16 px auf jeder Breite. */
  padding-inline: var(--abstand-4);
}

/* --- Kopfleiste -------------------------------------------------------- */

.kopfleiste > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-5);
  padding-block: var(--abstand-4);
}
.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: 44px;
  text-decoration: none;
  font-family: var(--schrift-schau-familie);
  font-size: var(--schrift-name);
  letter-spacing: -0.01em;
}
.wortmarke:hover { color: inherit; }
.wortmarke svg { width: 30px; height: 30px; flex: none; }
.wortmarke b { font-weight: 600; }
.wortmarke span { color: var(--grau); }

.hauptnavigation { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-2); }
.hauptnavigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--abstand-3);
  border-radius: var(--radius-rund);
  text-decoration: none;
  font-weight: 500;
}
.hauptnavigation a:hover { background: var(--papier-tief); color: var(--tinte); }

/* --- Hauptteil, Kapitel ------------------------------------------------ */

main {
  padding-bottom: var(--abstand-9);
  counter-reset: kapitel;
}
main > section { margin-top: var(--abstand-9); }
main > section:first-child { margin-top: var(--abstand-5); }

/* Nummerierte Kapitel: jede Hauptüberschrift trägt ihre Nummer, wie in
   einem Heft. Reines CSS - im HTML steht nur die Überschrift. */
main > section > h2 {
  counter-increment: kapitel;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--abstand-4);
  font-size: var(--schrift-gross);
  margin-bottom: var(--abstand-6);
  padding-top: var(--abstand-5);
  border-top: 1px solid var(--tinte);
}
main > section > h2::before {
  content: counter(kapitel, decimal-leading-zero);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--signal);
  transform: translateY(-0.6em);
}

/* --- Bühne (Startseite) ------------------------------------------------ */

.buehne {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--abstand-7) var(--abstand-8);
  align-items: end;
  padding-top: var(--abstand-7);
}
.buehne h1 {
  font-size: clamp(var(--schrift-gross), 7vw, var(--schrift-schau));
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
/* Der betonte Teil steht nach einem <br> auf eigener Zeile und wird
   zeilenweise markiert (box-decoration-break im Grundstil) - als Block
   lief der Marker über die ganze Breite. */
.buehne .vorspann {
  font-size: var(--schrift-name);
  line-height: 1.5;
  color: var(--grau);
  max-width: 34ch;
  margin: var(--abstand-5) 0 0;
}

.grosse-zahl { margin: 0; }
.grosse-zahl dt {
  font-size: var(--schrift-klein);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
}
.grosse-zahl dd { margin: 0; }
.grosse-zahl .zahl {
  display: block;
  font-family: var(--schrift-schau-familie);
  font-size: clamp(var(--schrift-schau), 16vw, var(--schrift-riesig));
  font-weight: 760;
  font-stretch: 80%;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--signal);
  font-variant-numeric: lining-nums;
}
.grosse-zahl .zahl small {
  font-size: 0.45em;
  letter-spacing: 0;
  vertical-align: 0.9em;
}
.grosse-zahl .erlaeuterung { display: block; max-width: 30ch; margin-top: var(--abstand-3); }

/* --- Das Raster: ein Punkt je Anbieter und Frage ------------------------ */

.raster {
  grid-column: 1 / -1;
  margin: var(--abstand-7) 0 0;
  padding: var(--abstand-6);
  background: var(--flaeche);
  border-radius: var(--radius-2);
  box-shadow: var(--schatten);
}
.raster figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-5);
  margin-bottom: var(--abstand-5);
}
.raster-legende { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); }
.raster-legende span { display: inline-flex; align-items: center; gap: var(--abstand-2); }

.raster-zeilen { margin: 0; padding: 0; list-style: none; }
.raster-zeile {
  display: grid;
  grid-template-columns: minmax(11em, 16em) minmax(0, 1fr) 4.5em;
  gap: var(--abstand-2) var(--abstand-5);
  align-items: center;
  padding-block: var(--abstand-2);
  border-top: 1px solid var(--linie);
}
.raster-zeile:first-child { border-top: 0; }
.raster-frage { font-size: var(--schrift-klein); font-weight: 600; }
.raster-anteil {
  font-family: var(--schrift-schau-familie);
  font-size: var(--schrift-name);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.raster-anteil small { font-family: var(--schrift-text); font-size: var(--schrift-klein); color: var(--grau); }

.punkte {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 66), minmax(0, 1fr));
  /* In em, nicht in px: bei 66 Spalten auf 320 px Breite bleibt für eine
     feste Lücke von 4 px (kleinste Skalenstufe) kein Punkt übrig. */
  gap: 0.12em;
}
.punkte i {
  display: block;
  aspect-ratio: 1 / 2.2;
  border-radius: 2px;
}

/* Die zwei Zustände - und nur zwei. Gesagt ist gefüllt, nicht gesagt ist
   ein schraffierter Umriss: der Unterschied liegt in der Form, nicht nur
   in der Farbe (WCAG 1.4.1). */
.j { background: var(--signal); }
.n {
  outline: 1px dashed var(--stille-rand);
  outline-offset: -1px;
  background: transparent;
}
.muster { display: inline-block; width: 12px; height: 20px; border-radius: 2px; }

/* --- Belegband auf Karten und Seiten ------------------------------------ */

.belegband {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin: var(--abstand-4) 0;
}
.belegband .punkte {
  --spalten: 9;
  width: 9em;
  gap: 0.2em;
}
.belegband .punkte i { aspect-ratio: 1 / 1.6; border-radius: 3px; }
.belegband span { font-size: var(--schrift-klein); color: var(--grau); white-space: nowrap; }
.belegband b { color: var(--tinte); font-weight: 600; }

/* --- Anbieterkarten ---------------------------------------------------- */

.kartenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  /* PLAN § 6: Karten >= 16 px auseinander. */
  gap: var(--abstand-5);
}
.kartenliste > li { max-width: none; }

.karte {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--abstand-6);
  background: var(--flaeche);
  border-radius: var(--radius-2);
  box-shadow: var(--schatten);
  transition: transform var(--dauer-kurz) var(--kurve),
              box-shadow var(--dauer-kurz) var(--kurve);
}
.karte:hover { transform: translateY(-3px); }
.karte-kopf { display: flex; flex-direction: column; gap: var(--abstand-2); }
.karte-kopf h3 a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.karte-kopf h3 a:hover { color: var(--signal); }
/* Die ganze Karte ist klickbar, ohne dass die Karte ein Link wird: der
   Namenslink spannt seine Fläche über sie. Links darin bleiben
   erreichbar, weil sie darüber liegen. */
.karte-kopf h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-2); }
.karte-fuss a, .karte-fuss { position: relative; z-index: 1; }

.karte-ort { font-size: var(--schrift-klein); color: var(--grau); }
.karte-zeile2 { margin: 0; font-size: var(--schrift-klein); color: var(--grau); }

.kurzwerte { margin: 0 0 var(--abstand-5); flex: 1; }
/* In der Karte stehen Bezeichnung und Wert untereinander: bei gut 22 rem
   Kartenbreite bleiben für eine zweite Spalte keine 12 Zeichen, und
   „Bearbeitungsgebühr“ brach mitten im Wort. */
.karte .kurzwerte > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.karte .kurzwerte dt { font-size: var(--schrift-klein); }
.kurzwerte > div {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: var(--abstand-1) var(--abstand-4);
  padding-block: var(--abstand-3);
  border-top: 1px solid var(--linie);
}
.kurzwerte dt { font-size: var(--schrift-klein); color: var(--grau); }
/* min-width: 0 gehört zwingend dazu - sonst schiebt eine lange Adresse
   die Seite bei 200 % Zoom nach rechts (Prüfung 17, 23.09.2026). */
.kurzwerte dd { margin: 0; min-width: 0; font-weight: 500; }

.karte-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--linie);
}
.karte-fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.karte-fuss a:hover { color: var(--signal); }

/* Leerer Bestand: kein toter Satz, sondern eine Fläche mit dem Motiv. */
.leerstelle {
  padding: var(--abstand-7) var(--abstand-6);
  border-radius: var(--radius-2);
  border: 1.5px dashed var(--stille-rand);
  background: var(--papier);
}
.leerstelle p {
  font-family: var(--schrift-schau-familie);
  font-size: var(--schrift-name);
  line-height: 1.4;
  margin: 0;
  max-width: 40ch;
}
.leerstelle p + p {
  font-family: var(--schrift-text);
  font-size: var(--schrift-grund);
  margin-top: var(--abstand-4);
  color: var(--grau);
}

/* --- R14: Betreiberangebot ------------------------------------------- */

.betreiber {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--schrift-klein);
  font-weight: 600;
  padding: var(--abstand-1) var(--abstand-3);
  border: 1.5px solid var(--signal);
  border-radius: var(--radius-rund);
  color: var(--signal);
}
p.betreiber { border-radius: var(--radius-2); padding: var(--abstand-3) var(--abstand-4); max-width: var(--satzbreite); }

/* --- Methode: drei Schritte ------------------------------------------- */

.schritte {
  list-style: none;
  margin: 0 0 var(--abstand-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--abstand-6);
  counter-reset: schritt;
}
.schritte li { counter-increment: schritt; max-width: none; }
.schritte li::before {
  content: counter(schritt);
  display: block;
  font-family: var(--schrift-schau-familie);
  font-size: var(--schrift-schau);
  font-weight: 760;
  font-stretch: 80%;
  line-height: 1;
  color: var(--signal);
  margin-bottom: var(--abstand-3);
}
.schritte h3 { margin-bottom: var(--abstand-2); }
.schritte p { color: var(--grau); margin: 0; }

.weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: 44px;
  padding: var(--abstand-2) var(--abstand-5);
  border-radius: var(--radius-rund);
  background: var(--signal);
  color: var(--akzent-text);
  text-decoration: none;
  font-weight: 600;
}
.weiter:hover { background: var(--tinte); color: var(--akzent-text); }

/* --- Seitenkopf der Unterseiten --------------------------------------- */

.faktensatz {
  font-size: var(--schrift-name);
  line-height: 1.5;
  color: var(--grau);
  margin: var(--abstand-4) 0 0;
  max-width: var(--satzbreite);
}
[data-block="kopf"] h1 { font-size: clamp(var(--schrift-titel), 5vw, var(--schrift-gross)); }

/* --- Merkmalstabelle mit Quelle je Zeile ------------------------------ */

.tabellenrahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; margin-bottom: var(--abstand-4); color: var(--grau); }
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--abstand-4) var(--abstand-3);
  border-top: 1px solid var(--linie);
}
thead th {
  font-size: var(--schrift-klein);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  border-top: 0;
  border-bottom: 1px solid var(--tinte);
}
tbody th {
  width: 28%;
  font-family: var(--schrift-schau-familie);
  font-size: var(--schrift-name);
  font-weight: 420;
}
tbody th .beiwerk {
  display: block;
  margin-top: var(--abstand-2);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  line-height: 1.5;
}
.wert { font-weight: 600; font-size: var(--schrift-name); }
/* Das Zitat als eingezogener Satz mit einer Signallinie davor. Ein
   großes „ oben links las sich wie zwei Kommas. */
.zitat {
  display: block;
  margin-top: var(--abstand-3);
  padding-left: var(--abstand-4);
  border-left: 3px solid var(--signal);
  font-style: normal;
  font-size: var(--schrift-grund);
  line-height: 1.55;
  color: var(--grau);
  max-width: var(--satzbreite);
}
.quellzeile { margin-top: var(--abstand-3); font-size: var(--schrift-klein); color: var(--grau); }

/* Eine Lücke wird benannt, nicht verschwiegen und nicht zu „nein“
   gemacht (R9, B02) - und sie sieht aus wie im Raster. */
.luecke {
  display: inline-block;
  padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-1);
  border: 1px dashed var(--stille-rand);
  background: transparent;
  color: var(--grau);
  font-style: normal;
  font-size: var(--schrift-klein);
}

/* --- Vergleichsmatrix ------------------------------------------------- */

.rolle { overflow-x: auto; }
.rollhinweis { margin: 0 0 var(--abstand-3); }
.matrix { min-width: 640px; }
.matrix td, .matrix th { white-space: normal; }
.matrix tbody tr:nth-child(odd) td, .matrix tbody tr:nth-child(odd) .ecke { background: var(--flaeche); }
/* Die Merkmalsspalte bleibt stehen - sonst weiß man nach zwei Spalten
   nicht mehr, welche Zeile man liest. */
.matrix .ecke {
  position: sticky;
  left: 0;
  background: var(--papier);
  border-right: 1px solid var(--linie);
  min-width: 11em;
  font-size: var(--schrift-grund);
}
.matrix thead .ecke { background: var(--papier); }
/* Der Quellpfeil behält seine Unterstreichung (WCAG 1.4.1). */
.quellpfeil { text-decoration: underline; }

/* --- PLAN § 4: Klickflächen >= 44 px ---------------------------------- */

.fussleiste a,
.brotkrumen a,
li > a:only-child,
a.eigenstaendig,
.matrix th a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--abstand-2) var(--abstand-5);
  border-radius: var(--radius-rund);
  background: var(--signal);
  color: var(--akzent-text);
  text-decoration: none;
  font-weight: 600;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.knopf:hover { background: var(--tinte); color: var(--akzent-text); }

/* --- Formulare -------------------------------------------------------- */

.erfassen p { margin: 0 0 var(--abstand-5); }
.erfassen label { display: block; margin-bottom: var(--abstand-2); font-weight: 600; }
.erfassen input, .erfassen textarea {
  width: 100%;
  max-width: 44em;
  font: inherit;
  min-height: 44px;
  padding: var(--abstand-3) var(--abstand-4);
  border: 1.5px solid var(--stille-rand);
  border-radius: var(--radius-1);
  background: var(--flaeche);
  color: var(--tinte);
}
.erfassen input:focus, .erfassen textarea:focus { border-color: var(--tinte); }
/* Die lange Form hinter dem persönlichen Link (formular/eintrag.php):
   Abschnitte mit Luft, der Stand über dem Feld als eigene Zeile. */
.erfassen h2 { margin: var(--abstand-8) 0 var(--abstand-4); }
.erfassen h3 { margin: var(--abstand-7) 0 var(--abstand-2); }
.erfassen .klein { display: block; margin-bottom: var(--abstand-2); }
.erfassen .haken { display: flex; gap: var(--abstand-3); align-items: flex-start; }
.erfassen .haken input { width: 24px; height: 24px; min-height: 24px; flex: none; margin: 2px 0 0; padding: 0; }
.erfassen .haken label { margin: 0; font-weight: 400; }
.erfassen .fehler { color: var(--fehler-text); background: var(--fehler-grund); padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-1); }
/* Ein Knopf, der im Satz wie ein Verweis aussieht („schicken Sie einen neuen Code“). */
.verweisknopf { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 24px; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; cursor: pointer; }

/* Der Honigtopf: für Augen und Screenreader weg, für Bots da. */
.honigtopf { position: absolute; left: -100%; width: 1px; height: 1px; overflow: hidden; }

/* Sichtbarer Hinweis auf eine unvollständige Pflichtseite. */
.fehlt {
  border-left: 3px solid var(--warnung-linie);
  background: var(--warnung-grund);
  color: var(--warnung-text);
  padding: var(--abstand-3) var(--abstand-4);
  margin: 0 0 var(--abstand-5);
}

/* --- Fließtextseiten (Info, Recht) ------------------------------------ */

[data-block="text"] h2 {
  font-size: var(--schrift-abschnitt);
  margin: var(--abstand-7) 0 var(--abstand-4);
}
[data-block="text"] h3 { margin: var(--abstand-5) 0 var(--abstand-2); }
[data-block="text"] ul, [data-block="text"] ol { padding-left: var(--abstand-5); }
[data-block="text"] li { margin-bottom: var(--abstand-2); }

/* --- Brotkrumen ------------------------------------------------------- */

.brotkrumen { font-size: var(--schrift-klein); margin: var(--abstand-5) 0 0; }
.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--abstand-2);
  margin: 0;
  padding: 0;
  color: var(--grau);
}
/* Alle Glieder gleich hoch - sonst saß das letzte, ein bloßer Text neben
   44 px hohen Links, sichtbar höher. */
.brotkrumen li { display: inline-flex; align-items: center; min-height: 44px; }
.brotkrumen a { text-decoration: none; min-width: 44px; justify-content: center; }
.brotkrumen li + li::before { content: "→ "; color: var(--signal); }

/* --- Fußleiste -------------------------------------------------------- */

.fussleiste {
  background: var(--papier-tief);
  color: var(--tinte);
  border-top: 3px solid var(--tinte);
  margin-top: var(--abstand-8);
}
.fussleiste > div {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--abstand-6) var(--abstand-8);
  padding-block: var(--abstand-8) var(--abstand-6);
}
.fussleiste .fuss-satz {
  font-family: var(--schrift-schau-familie);
  font-size: var(--schrift-titel);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  max-width: 22ch;
}

/* Fließend statt zwei feste Spalten: bei 200 % Zoom passte
   „Nutzungsbedingungen“ nicht mehr in eine halbe Spalte, und die ganze
   Seite scrollte waagerecht (Prüfung 17, 25.09.2026). */
.fussleiste ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--abstand-5);
  align-content: start;
}
.fussleiste a { text-decoration-color: var(--signal-invers); }
.fussleiste a:hover { color: var(--signal-invers); }
.fussleiste .fuss-klein {
  grid-column: 1 / -1;
  padding-top: var(--abstand-5);
  border-top: 1px solid var(--linie);
  font-size: var(--schrift-klein);
  color: var(--grau);
  margin: 0;
}

/* --- Bewegung ---------------------------------------------------------
   Ruhig und einmalig: die Bühne baut sich auf, das Raster füllt sich
   Zeile für Zeile, Karten treten beim Scrollen herein. Nichts blinkt,
   nichts wiederholt sich. Bei „Bewegung reduzieren“ entfällt alles
   (unten), und der Ausgangszustand ist immer sichtbar: fällt eine
   Animation aus, fehlt nichts. */

/* Keine Deckkraft-Animation an Schrift: halbdurchsichtige Schrift hat
   in jedem Zwischenbild zu wenig Kontrast, und axe-core hat genau das
   gemessen (Prüfung 17, 25.09.2026, fünf Stellen auf der Bühne). Schrift
   wird deshalb aufgedeckt - eine Maske gibt sie von unten frei, sie
   selbst ist immer voll deckend. */
@keyframes aufdecken {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes heben {
  from { transform: translateY(28px); }
  to { transform: none; }
}
@keyframes einfuellen {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.buehne > * { animation: aufdecken var(--dauer-lang) var(--kurve) both; }
.buehne > :nth-child(2) { animation-delay: 120ms; }
.buehne > :nth-child(3) { animation-delay: 240ms; }

.raster-zeile .punkte { animation: einfuellen 1400ms var(--kurve) both; }
.raster-zeile:nth-child(1) .punkte { animation-delay: 300ms; }
.raster-zeile:nth-child(2) .punkte { animation-delay: 380ms; }
.raster-zeile:nth-child(3) .punkte { animation-delay: 460ms; }
.raster-zeile:nth-child(4) .punkte { animation-delay: 540ms; }
.raster-zeile:nth-child(5) .punkte { animation-delay: 620ms; }
.raster-zeile:nth-child(6) .punkte { animation-delay: 700ms; }
.raster-zeile:nth-child(7) .punkte { animation-delay: 780ms; }
.raster-zeile:nth-child(8) .punkte { animation-delay: 860ms; }
.raster-zeile:nth-child(9) .punkte { animation-delay: 940ms; }

/* Karten beim Scrollen - nur wo der Browser es kann. Ohne Unterstützung
   stehen sie einfach da. */
@supports (animation-timeline: view()) {
  .kartenliste > li, .schritte li {
    animation: heben linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Schmale Bildschirme ---------------------------------------------- */

@media (max-width: 860px) {
  .buehne { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-6); }
  .fussleiste > div { grid-template-columns: minmax(0, 1fr); }
  .raster { padding: var(--abstand-5) var(--abstand-4); }
  .raster-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .raster-zeile .punkte { grid-column: 1 / -1; grid-row: 2; }
  main > section > h2 { font-size: var(--schrift-titel); }
}
@media (max-width: 520px) {
  .karte { padding: var(--abstand-5); }
  .kurzwerte > div { grid-template-columns: minmax(0, 1fr); }
  tbody th { width: auto; }
  .fussleiste .fuss-satz { font-size: var(--schrift-abschnitt); }
}

/* Kurzliste auf „Eintrag bestätigen“: die neun Angaben auf einen Blick. */
.kurzliste { list-style: none; padding: 0; margin: 0 0 var(--abstand-6); border-top: 1px solid var(--linie); }
.kurzliste li { padding: var(--abstand-3) 0; border-bottom: 1px solid var(--linie); max-width: none; }