/* =====================================================================
   Lernmodus – Startbildschirm, Lernsitzung, Auswertung
   ---------------------------------------------------------------------
   Ausschließlich Token aus tokens.css: keine eigenen Farben, Abstände oder
   Schriftgrößen. Dadurch tragen alle drei Themes, `forced-colors` und
   `prefers-reduced-motion` ohne Zusatzarbeit.

   Grundsatz für Zustände: Bedeutung immer über Symbol UND Text UND Farbe
   (WCAG 1.4.1). Fällt die Farbe weg – etwa im Windows-Kontrastdesign –
   bleibt die Aussage vollständig erhalten.
   ===================================================================== */

/* =====================================================================
   Schaltflächen
   ===================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  min-height: var(--klickflaeche-min);
  min-width: var(--klickflaeche-min);
  padding: var(--abstand-xs) var(--abstand-m);
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  font: inherit;
  font-weight: var(--schriftstaerke-mittel);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--uebergang-dauer) var(--uebergang-kurve),
    border-color var(--uebergang-dauer) var(--uebergang-kurve),
    color var(--uebergang-dauer) var(--uebergang-kurve);
}

.knopf:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--farbe-akzent-leise);
  border-color: var(--farbe-akzent);
}

/*
  Gesperrt sieht gesperrt aus – ob über `disabled` oder `aria-disabled`.

  Die Projektregel lautet `aria-disabled`: Ein `disabled` Element nimmt keinen
  Fokus, und wer den Knopf gerade gedrückt hat, verlöre ihn unter dem Finger
  an `<body>`. Erreichbar bleiben heißt aber nicht, verfügbar auszusehen –
  deshalb hier dieselbe Darstellung für beide Schreibweisen.

  Seit Fassung 0.20.0 trägt kein `.knopf` im Baum mehr ein natives `disabled`;
  der `:disabled`-Zweig ist ein Auffangnetz für den Fall, dass doch einmal
  einer hinzukommt.
*/
.knopf:disabled,
.knopf[aria-disabled='true'] {
  cursor: not-allowed;
  color: var(--farbe-text-leise);
  background-color: var(--farbe-grund-versetzt);
  /*
    Der Rahmen trägt den Zustand, wo die Farbe ihn nicht tragen kann.

    Im Hochkontrast-Thema ist `--farbe-text-leise` mit `--farbe-text`
    identisch (beides #ffffff) und `--farbe-grund-versetzt` mit dem Grund
    (#000000) – ein gesperrter Knopf sah dort pixelgleich aus wie ein aktiver,
    und wer Hochkontrast braucht, drückte auf scheinbar bereite Knöpfe, ohne
    dass etwas geschah. Genau die Verwirrung, die der Kommentar oben
    verhindern will.

    Gestrichelt statt einer weiteren Farbe: Das trägt in jedem Thema, auch
    unter erzwungenen Farben, wo eigene Farben ohnehin verworfen werden.
  */
  border-style: dashed;
}

/*
  Unter erzwungenen Farben ist `GrayText` die Systemfarbe, mit der Windows
  gesperrte Bedienelemente kennzeichnet – die einzige Farbe, die dort
  überhaupt einen Zustand ausdrücken darf. Sie muss ausdrücklich gesetzt
  werden: Die Token oben fallen alle auf `CanvasText` zusammen.
*/
@media (forced-colors: active) {
  .knopf:disabled,
  .knopf[aria-disabled='true'] {
    color: GrayText;
    border-color: GrayText;
  }

  .schalter__feld:disabled + .schalter__beschriftung,
  .schalter__feld[aria-disabled='true'] + .schalter__beschriftung {
    color: GrayText;
  }
}

.knopf--haupt {
  background-color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  font-weight: var(--schriftstaerke-fett);
}

.knopf--haupt:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--farbe-akzent-stark);
  border-color: var(--farbe-akzent-stark);
  color: var(--farbe-akzent-text);
}

.knopf--leise {
  background-color: transparent;
}

/* Fuer den einen Knopf, der Daten loescht. Die Farbe traegt die Aussage nicht
   allein - der Text sagt "Ja, Lernstand loeschen" (WCAG 1.4.1). Sie ist ein
   zweites Signal, kein erstes. */
.knopf--warnung {
  border-color: var(--farbe-fehler);
  color: var(--farbe-fehler);
}

.knopf--warnung:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--farbe-fehler);
  color: var(--farbe-flaeche);
}

@media (forced-colors: active) {
  .knopf--warnung {
    border-color: ButtonText;
    color: ButtonText;
  }
}

/* Der Merkzustand ist am Stern erkennbar, nicht nur an der Farbe. */
.knopf--merken[aria-pressed='true'] {
  background-color: var(--farbe-akzent-leise);
  border-color: var(--farbe-akzent);
}

@media (forced-colors: active) {
  .knopf--merken[aria-pressed='true'] {
    background-color: Highlight;
    color: HighlightText;
    border-color: Highlight;
    forced-color-adjust: none;
  }
}

/* =====================================================================
   Fortschritt
   ===================================================================== */

.fortschritt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.fortschritt__text {
  margin: 0;
  font-weight: var(--schriftstaerke-mittel);
}

.fortschritt__schiene {
  block-size: 0.75rem;
  background-color: var(--farbe-grund-versetzt);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.fortschritt__fuellung {
  block-size: 100%;
  background-color: var(--farbe-akzent);
  transition: inline-size var(--uebergang-dauer) var(--uebergang-kurve);
}

@media (forced-colors: active) {
  .fortschritt__fuellung {
    background-color: Highlight;
    forced-color-adjust: none;
  }
}

/* =====================================================================
   Hinweise
   ===================================================================== */

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-radius: var(--radius-m);
}

.hinweis--hinweis {
  color: var(--farbe-warnung);
}

.hinweis--fehler {
  color: var(--farbe-fehler);
}

.hinweis__symbol {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-radius: 50%;
  font-weight: var(--schriftstaerke-fett);
  line-height: 1;
}

.hinweis__text {
  margin: 0;

  /* Der Textträger ist bei Blockinhalt ein <div> und fällt dann aus der
     globalen p-Regel – Zeilenlänge und Umbruch stehen deshalb hier noch
     einmal, damit beide Varianten gleich messen. */
  max-width: var(--textbreite-max);
  text-wrap: pretty;
  color: var(--farbe-text);
}

.hinweis__vorspann {
  color: inherit;
  font-weight: var(--schriftstaerke-fett);
}

/* =====================================================================
   Startbildschirm
   ===================================================================== */

/* `min(16rem, 100%)` statt `16rem`: Bei 320 CSS-Pixeln (WCAG 1.4.10) sind
   nach Seiten- und Kartenpolster keine 16rem mehr da, und eine feste
   Mindestbreite in `minmax()` schiebt das Raster dann aus dem Kasten. */
.startwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--abstand-m);
}

.startwahl__knopf {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-2xs);
  padding: var(--abstand-m);
  text-align: start;
}

.startwahl__name {
  font-size: var(--schrift-gross);
  font-weight: var(--schriftstaerke-fett);
}

.startwahl__erklaerung {
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-normal);
}

.startwahl__gesperrt {
  color: var(--farbe-text-leise);
}

.lernstand {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.lernstand__zahlen {
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1fr;
  gap: var(--abstand-2xs) var(--abstand-m);
  margin: 0;
}

.lernstand__zahlen dt {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-mittel);
}

.lernstand__zahlen dd {
  margin: 0;
}

.lernstand__bereiche {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.lernstand__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lernstand__bereichtitel {
  margin: 0 0 var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

/* =====================================================================
   Kapitelwahl
   ===================================================================== */

.kapitelwahl__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kapitelwahl__titel {
  margin-bottom: var(--abstand-s);
}

.kapitelwahl__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* =====================================================================
   Lernsitzung
   ===================================================================== */

.sitzung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.sitzung__augenbraue {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-mittel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sitzung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  padding-top: var(--abstand-s);
  border-top: var(--rahmenbreite) solid var(--farbe-rahmen);
}

.sitzung__kuerzel {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Kein `display: flex`: Chromium unterdrueckt damit das Aufklapp-Dreieck, und
   ein Aufklapper ohne Marke sieht aus wie eine gewoehnliche Ueberschrift.
   Genau das stand hier und ist im laufenden Fenster nachgemessen worden – das
   `summary` hatte `flex`, die beiden Nachbar-Aufklapper derselben Ansicht
   („Warum das so ist“, „Fehler zu dieser Frage melden“) `list-item` samt
   Dreieck. Dieselbe Lehre steht weiter unten schon einmal, vor
   `.erklaerung--klappbar`; hier wird sie jetzt auch angewandt.

   Die Klickflaeche traegt nun das Polster (2 × 12 px zu 24,75 px Zeilenhoehe
   bei --schrift-klein = 49 px, WCAG 2.2 – 2.5.8), so wie bei
   `.erklaerung--klappbar`. `min-height` bleibt als Untergrenze stehen: Sie
   nennt den Wert der Zielgroesse ausdruecklich und haelt ihn, falls die
   Schrift kleiner wird. */
.sitzung__kuerzel summary {
  min-height: var(--klickflaeche-min);
  padding-block: var(--abstand-s);
  cursor: pointer;
  font-weight: var(--schriftstaerke-mittel);
}

/* ── Frage ─────────────────────────────────────────────────────────── */

.frage__kopf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

/* Die amtliche Nummer steht in der Einordnungszeile, aber etwas kraeftiger:
   Sie ist der Anker zum gedruckten Katalog. */
.frage__nummer {
  font-weight: var(--schriftstaerke-mittel);
  color: var(--farbe-text);
}

.frage__einordnung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2xs) var(--abstand-m);
  margin: 0;
  max-width: none;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Der Fragetext ist jetzt die Ueberschrift der Ansicht. Er soll den Blick
   halten, aber nicht schreien - eine Frage ueber drei Zeilen in Titelgroesse
   waere schwerer zu lesen als in ruhiger Groesse. */
.frage__text {
  margin-block: var(--abstand-2xs) 0;
  font-size: var(--schrift-h2);
  font-weight: var(--schriftstaerke-mittel);
  line-height: 1.3;
}

.fortschritt__vorspann {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-normal);
}

.frage__bilder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* ── Antwortoptionen ───────────────────────────────────────────────── */

.antwortgruppe {
  margin: 0;
  padding: 0;
  border: 0;
}

.antwortgruppe__titel {
  padding: 0;
  margin-bottom: var(--abstand-s);
  font-family: var(--schrift-familie-ueberschrift);
  font-size: var(--schrift-h3);
  font-weight: var(--schriftstaerke-mittel);
  line-height: var(--zeilenhoehe-eng);
}

.antwortgruppe__hinweis {
  margin-bottom: var(--abstand-s);
  color: var(--farbe-text);
  font-weight: var(--schriftstaerke-mittel);
}

.antwortgruppe__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.antwortoption {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-2xs) var(--abstand-s);
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
}

/* Nur hervorheben, solange sich noch etwas ändern lässt. Bis Fassung 0.19.2
   stand hier `:enabled` – das griff, weil das ganze Feldset `disabled` war. */
.antwortoption:hover:has(.antwortoption__feld:not([aria-disabled='true'])) {
  border-color: var(--farbe-akzent);
}

.antwortoption__feld {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--farbe-akzent);
}

/* Die gesamte Beschriftung ist Klickfläche und mindestens 44 px hoch. */
.antwortoption__beschriftung {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs) var(--abstand-s);
  min-height: var(--klickflaeche-min);
  padding: var(--abstand-2xs) 0;
  cursor: pointer;
  /* Ohne diese Zeile ist die Mindestbreite eines Flex-Elements seine
     Inhaltsbreite; der Kasten könnte bei 320 CSS-Pixeln nicht mehr
     schrumpfen und liefe seitlich hinaus (WCAG 1.4.10). */
  min-inline-size: 0;
}

.antwortoption:has(.antwortoption__feld[aria-disabled='true']) .antwortoption__beschriftung {
  cursor: default;
}

.antwortoption__ziffer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-family: var(--schrift-familie-mono);
}

.antwortoption__marke {
  flex: none;
  font-weight: var(--schriftstaerke-fett);
}

.antwortoption__inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
  /*
    Die 12rem sind ein Wunsch, keine Schranke.

    Sie halten Antworttext und Statusmarke bei üblicher Breite in einer
    Zeile. Als `min-inline-size` waren sie mehr, als der Optionskasten bei
    320 CSS-Pixeln überhaupt hergibt – nachgemessen 36 Pixel Überstand
    (WCAG 1.4.10). Als Flex-Basis mit `min-inline-size: 0` bleibt der
    Wunsch bei breitem Fenster erfüllt, und bei schmalem schrumpft der
    Kasten mit.
  */
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.antwortoption__status {
  /*
    Schrumpfen erlaubt, wachsen nicht.

    Hier stand `flex: none`. Das ist `0 0 auto`: Der Kasten war so breit wie
    sein längster Text („Richtig – von Ihnen gewählt“, 27 Zeichen) und konnte
    weder schrumpfen noch umbrechen. Bei 400 Prozent Anzeigegröße auf 1280
    Pixeln Inhaltsbreite – den 320 CSS-Pixeln, an denen WCAG 1.4.10 misst –
    ragte er nachgemessen 12 Pixel aus der Beschriftung heraus
    (`e2e/anzeigegroesse.spec.ts`, „Lernsitzung nach der Antwort“).

    `0 1 auto` mit `min-inline-size: 0` ändert an der üblichen Breite nichts:
    Geschrumpft wird nur, wenn die Zeile sonst überliefe, und dann bricht der
    Text innerhalb der Umrandung um, statt daneben zu stehen.
  */
  flex: 0 1 auto;
  min-inline-size: 0;
  padding: 0 var(--abstand-xs);
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-radius: var(--radius-s);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-mittel);
}

.antwortoption__status--richtig,
.antwortoption__status--verpasst {
  color: var(--farbe-erfolg);
}

.antwortoption__status--falsch {
  color: var(--farbe-fehler);
}

.antwortoption--richtig,
.antwortoption--verpasst {
  border-color: var(--farbe-erfolg);
}

.antwortoption--falsch {
  border-color: var(--farbe-fehler);
}

/* ── Bilder ────────────────────────────────────────────────────────── */

.bilderleiste {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
}

.katalogbild {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-s);
}

.katalogbild__ersatz {
  display: inline-block;
  padding: var(--abstand-2xs) var(--abstand-xs);
  border: var(--rahmenbreite) dashed var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/*
  Zweite Stufe des Bildbeschreibungskonzepts (Prüfplan S4): die erklärende
  Bedeutung eines Zeichens, aufklappbar und erst nach dem Antworten gerendert.
*/
.zeichenbedeutung {
  margin-block-start: var(--abstand-2xs);
}

.zeichenbedeutung__schalter {
  cursor: pointer;
  color: var(--farbe-akzent);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-mittel);
}

.zeichenbedeutung__schalter:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}

.zeichenbedeutung__inhalt {
  margin-block-start: var(--abstand-2xs);
}

.zeichenbedeutung__inhalt p {
  margin: 0 0 var(--abstand-2xs);
}

/*
  In der Antwortoption rückt der Aufklapper in eine eigene Zeile unter die
  Beschriftung – der Optionskasten ist eine Flexzeile, und neben dem Status
  wäre die Bedeutung eingequetscht. Das Umbruchverhalten gilt nur, wenn die
  Bedeutung wirklich da ist; sonst bleibt der Kasten unverändert.
*/
.antwortoption:has(.zeichenbedeutung) {
  flex-wrap: wrap;
}

.antwortoption .zeichenbedeutung {
  flex-basis: 100%;
  /* Bündig mit der Beschriftung: Breite des Bedienelements plus Spaltmaß. */
  padding-inline-start: calc(1.5rem + var(--abstand-s));
}

/* ── Offene Fragen ─────────────────────────────────────────────────── */

.freitext {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.freitext__beschriftung {
  font-family: var(--schrift-familie-ueberschrift);
  font-size: var(--schrift-h3);
  font-weight: var(--schriftstaerke-mittel);
}

.freitext__hinweis {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.freitext__feld {
  inline-size: 100%;
  max-inline-size: var(--textbreite-max);
  min-block-size: calc(var(--klickflaeche-min) * 3);
  padding: var(--abstand-s);
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  font: inherit;
  line-height: var(--zeilenhoehe-text);
  resize: vertical;
}

.musterantwort {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  padding: var(--abstand-m);
  background-color: var(--farbe-flaeche-erhoben);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
}

/* ── Die eigene frühere Antwort ──────────────────────────────────────
   Abgesetzt, aber leiser als die Musterantwort: Sie ist der Vergleichswert,
   nicht die Lösung. Kein farbiger Rahmen – die Farbe bliebe die einzige
   Unterscheidung (WCAG 1.4.1); die Überschrift trägt sie. */
.letzteantwort {
  border-inline-start: var(--rahmenbreite-stark) solid var(--farbe-rahmen);
  padding-inline-start: var(--abstand-s);
  margin-block: var(--abstand-m);
}

.letzteantwort__titel {
  margin-block: 0 var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
  color: var(--farbe-text-leise);
}

.letzteantwort__text {
  margin-block: 0;
  /* Absätze und Zeilenumbrüche bleiben, wie sie getippt wurden. */
  white-space: pre-wrap;
}

.musterantwort__titel {
  margin: 0;
}

.musterantwort__text {
  font-size: var(--schrift-gross);
}

/* Nur die Überschrift der Liste, nicht der Vorbehalt darunter. */
/*
  Die Prüfliste dieser Software. Abgesetzt wie die Katalogtatsache darunter,
  aber mit eigener Beschriftung: Der Leser muss auf einen Blick erkennen, was
  vom Bundesverwaltungsamt stammt und was nicht.
*/
.musterantwort__kernpunkte {
  margin-top: var(--abstand-s);
}

.musterantwort__kernpunkte > p:first-child,
.musterantwort__kerne > p:first-child {
  margin-bottom: var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

.musterantwort__kernpunkte ul,
.musterantwort__kerne ul {
  margin: 0;
  padding-inline-start: var(--abstand-m);
}

/*
  Der Vorbehalt steht bewusst leiser als die Liste, aber nicht kleiner als
  der Fließtext und nicht in schwächerem Kontrast (WCAG 1.4.3) – er nimmt
  der Liste ihre normative Lesart und darf deshalb nicht überlesbar sein.
*/
.musterantwort__vorbehalt {
  margin-top: var(--abstand-xs);
  margin-bottom: 0;
}

/* Kernelemente: unterstrichen und fett – nicht allein farbig (WCAG 1.4.1). */
.kernelement {
  background-color: var(--farbe-akzent-leise);
  color: var(--farbe-text);
  font-weight: var(--schriftstaerke-fett);
  padding: 0 0.15em;
  border-radius: var(--radius-s);
  text-decoration: underline;
  text-decoration-thickness: max(2px, 0.08em);
  text-underline-offset: 0.15em;
}

.selbstbewertung {
  margin: 0;
  padding: 0;
  border: 0;
}

.selbstbewertung__titel {
  padding: 0;
  margin-bottom: var(--abstand-s);
  font-family: var(--schrift-familie-ueberschrift);
  font-size: var(--schrift-h3);
  font-weight: var(--schriftstaerke-mittel);
}

.selbstbewertung__stufen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* ── Ergebnis ──────────────────────────────────────────────────────── */

.ergebnis {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  padding: var(--abstand-m);
  background-color: var(--farbe-flaeche-erhoben);
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-inline-start-width: var(--abstand-xs);
  border-radius: var(--radius-m);
}

.ergebnis--richtig {
  color: var(--farbe-erfolg);
}

.ergebnis--unvollstaendig {
  color: var(--farbe-warnung);
}

.ergebnis--falsch {
  color: var(--farbe-fehler);
}

.ergebnis__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  margin: 0;
  color: inherit;
}

.ergebnis__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  border: var(--rahmenbreite-stark) solid currentcolor;
  border-radius: 50%;
  font-weight: var(--schriftstaerke-fett);
  line-height: 1;
}

.ergebnis p {
  color: var(--farbe-text);
}

/* =====================================================================
   Auswertung
   ===================================================================== */

.auswertung__quote {
  font-size: var(--schrift-gross);
  font-weight: var(--schriftstaerke-mittel);
}

.auswertung__zahlen {
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1fr;
  gap: var(--abstand-2xs) var(--abstand-m);
  margin: 0;
}

.auswertung__zahlen dt {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-mittel);
}

.auswertung__zahlen dd {
  margin: 0;
}

.auswertung__fehler {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  margin: 0;
  padding-inline-start: var(--abstand-m);
}

.auswertung__nummer {
  font-weight: var(--schriftstaerke-fett);
}

.auswertung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* =====================================================================
   Tastenkürzel
   ===================================================================== */

.kuerzel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  margin-top: var(--abstand-m);
}

/* ── Sprungmenue (Inhaltsverzeichnis des Startbildschirms) ───────────── */

.sprungmenue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-xs) var(--abstand-s);
}

.sprungmenue__titel {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-mittel);
}

.sprungmenue__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2xs);
}

/* Wie die A-bis-Z-Leiste des Glossars: Die Mindesthoehe des Knopfs traegt
   die Klickflaeche (--klickflaeche-min), das uebliche Seitenpolster machte
   aus zehn kurzen Beschriftungen eine drei Zeilen hohe Wand. */
.sprungmenue__ziel {
  padding-inline: var(--abstand-s);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-normal);
  /* Ein Verweis, der wie ein Knopf aussieht: Die Unterstreichung entfaellt,
     weil Rahmen und Flaeche ihn bereits als Bedienelement ausweisen – die
     Aussage haengt also nicht an der Farbe (WCAG 1.4.1). Die Textfarbe kommt
     aus `.knopf` und nicht aus der Verweisfarbe. */
  text-decoration: none;
}

/* ── Drucken ─────────────────────────────────────────────────────────── */

.drucken__wahl {
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-s);
  padding: var(--abstand-s) var(--abstand-m);
}

.drucken__wahl legend {
  padding-inline: var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

/* Nebeneinander, solange die Breite reicht: drei kurze Namen untereinander
   waeren drei Zeilen fuer eine einzige Frage. */
.drucken__wahlliste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs) var(--abstand-l);
}

.drucken__wahlfeld {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--klickflaeche-min);
}

.drucken__wahlfeld input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  accent-color: var(--farbe-akzent);
}

.drucken__wahlfeld label {
  cursor: pointer;
}

/* ── Lernbericht ─────────────────────────────────────────────────────── */

.bericht__groesse {
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-s);
  padding: var(--abstand-s) var(--abstand-m);
  margin-block: var(--abstand-m);
}

.bericht__groesse legend {
  padding-inline: var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

.bericht__wahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--klickflaeche-min);
  cursor: pointer;
}

.bericht__wahl input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  accent-color: var(--farbe-akzent);
}

/* Leer nimmt die Region keinen Platz weg; sie bleibt trotzdem im DOM, sonst
   verschluckt der Screenreader die erste Meldung. */
.bericht__meldung:empty {
  display: none;
}

/* ── Neu anfangen ────────────────────────────────────────────────────── */

.neuanfang__rueckfrage {
  border: var(--rahmenbreite) solid var(--farbe-fehler);
  border-radius: var(--radius-s);
  padding: var(--abstand-m);
  margin-block: var(--abstand-m);
}

.neuanfang__titel {
  margin-block: 0 var(--abstand-s);
}

.neuanfang__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-block-start: var(--abstand-m);
}

.neuanfang__meldung:empty {
  display: none;
}

/* ── Anzeigegröße ────────────────────────────────────────────────────── */

.anzeigegroesse__stand {
  margin-block: 0 var(--abstand-s);
}

.anzeigegroesse__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.anzeigegroesse__hinweis {
  margin-block: var(--abstand-s) 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ── Textabstand (WCAG 1.4.12) ───────────────────────────────────────── */

.textabstand__stand {
  margin-block: 0 var(--abstand-s);
}

.textabstand__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

.textabstand__hinweis {
  margin-block: var(--abstand-s) 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ── Sprechtempo ─────────────────────────────────────────────────────── */

.tempowahl {
  margin-block-start: var(--abstand-m);
}

.tempowahl__stand {
  margin-block: 0 var(--abstand-s);
}

.tempowahl__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* ── Arbeitslast-Vorschau ────────────────────────────────────────────── */

.vorschau {
  margin-block-start: var(--abstand-l);
}

.vorschau__titel {
  margin: 0 0 var(--abstand-s);
}

.vorschau__tage {
  margin: 0 0 var(--abstand-s);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.vorschau__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-xs);
}

.vorschau__tag dt {
  min-inline-size: 7ch;
  color: var(--farbe-text-leise);
}

.vorschau__tag dd {
  margin: 0;
  flex: 1 1 12rem;
  display: flex;
  align-items: baseline;
  gap: var(--abstand-s);
}

/*
  Der Balken trägt keine Information – die Zahl steht daneben. Er ist eine
  Lesehilfe für die Form der Woche und deshalb `aria-hidden`.
*/
.vorschau__balken {
  block-size: 0.5rem;
  min-inline-size: 0;
  border-radius: var(--radius-s);
  background-color: var(--farbe-akzent);
}

.vorschau__fussnote {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ── Hartnäckige Fragen ──────────────────────────────────────────────── */

.hartnaeckig {
  margin-block-start: var(--abstand-l);
  padding: var(--abstand-m);
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-m, 0.5rem);
  background-color: var(--farbe-grund-versetzt);
}

.hartnaeckig__titel {
  margin: 0 0 var(--abstand-xs);
}

.hartnaeckig__satz {
  margin: 0 0 var(--abstand-s);
}

.hartnaeckig__liste {
  margin: 0 0 var(--abstand-s);
  padding-inline-start: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.hartnaeckig__nummer {
  font-weight: var(--schriftstaerke-mittel);
}

.hartnaeckig__bilanz,
.hartnaeckig__fehlwahl,
.hartnaeckig__rest {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.hartnaeckig__rest {
  margin: 0 0 var(--abstand-s);
}

/* ── Was mit dieser Frage bisher war ─────────────────────────────────── */

.steckbrief {
  margin: var(--abstand-m) 0 0;
  padding: var(--abstand-s) var(--abstand-m);
  border-inline-start: var(--rahmenbreite-stark, 3px) solid var(--farbe-rahmen);
  background-color: var(--farbe-grund-versetzt);
  border-radius: var(--radius-s);
  font-size: var(--schrift-klein);
}

.steckbrief dt {
  margin: 0;
  font-weight: var(--schriftstaerke-mittel);
  color: var(--farbe-text-leise);
}

.steckbrief dd {
  margin: var(--abstand-2xs) 0 0;
}

/* ── Nach einem Export: öffnen oder im Ordner zeigen ─────────────────── */

.dateiknoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
  margin-block-start: var(--abstand-s);
}

/* Steht auch leer im Baum, damit die Live-Region ihre erste Meldung nicht
   verschluckt (siehe `Dateiknoepfe.tsx`). Leer bleibt sie unsichtbar: ein
   Blockelement ohne Inhalt bildet keine Zeile und hat damit die Höhe null.
   Der obere Abstand kommt deshalb erst mit dem Text. */
.dateiknoepfe__meldung {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.dateiknoepfe__meldung:not(:empty) {
  margin-block-start: var(--abstand-s);
}

/* ── „Siehe auch“ im Glossar ─────────────────────────────────────────── */

/*
  Als Knopf gebaut, aber wie ein Verweis gezeichnet: Er führt an eine andere
  Stelle derselben Ansicht – kein Ortswechsel, also kein `<a>`. Die
  Unterstreichung sagt trotzdem, dass hier etwas anzuklicken ist; Farbe
  allein trüge das nicht (WCAG 1.4.1).
*/
.begriff__sprung {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: max(1px, 0.06em);
  cursor: pointer;
}

.begriff__sprung:hover {
  text-decoration-thickness: max(2px, 0.12em);
}

/* ── Ein-/Ausschalter in den Einstellungen ───────────────────────────── */

.schalter {
  margin-block-end: var(--abstand-m);
}

.schalter__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
}

.schalter__feld {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--farbe-akzent);
}

.schalter__beschriftung {
  display: flex;
  align-items: center;
  min-height: var(--klickflaeche-min);
  font-weight: var(--schriftstaerke-mittel);
  cursor: pointer;
}

/* Ein abgeschalteter Schalter bleibt lesbar: Der Text erklaert ja gerade,
   warum er nicht zur Verfuegung steht.

   Massgeblich ist `aria-disabled` – die Projektregel (docs/stand.md 7.13):
   Ein natives `disabled` naehme dem Kaestchen den Fokus, und genau dieser
   erklaerende Text wuerde dann nie vorgelesen. `:disabled` steht als
   Auffangnetz daneben, damit ein kuenftiges natives Feld nicht versehentlich
   verfuegbar aussieht; im Baum benutzt es zurzeit niemand. */
.schalter__feld:disabled + .schalter__beschriftung,
.schalter__feld[aria-disabled='true'] + .schalter__beschriftung {
  color: var(--farbe-text-leise);
  cursor: default;
}

.schalter__feld[aria-disabled='true'] {
  cursor: not-allowed;
}

.schalter__erklaerung {
  margin-block: var(--abstand-2xs) 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.kuerzel__schalter {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
}

.kuerzel__feld {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--farbe-akzent);
}

.kuerzel__beschriftung {
  display: flex;
  align-items: center;
  min-height: var(--klickflaeche-min);
  font-weight: var(--schriftstaerke-mittel);
  cursor: pointer;
}

.kuerzel__liste {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--abstand-2xs) var(--abstand-m);
  margin: 0;
}

.kuerzel__liste dt {
  font-weight: var(--schriftstaerke-mittel);
}

.kuerzel__liste dd {
  margin: 0;
}

.kuerzel__fussnote {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* `nowrap`: Eine Tastenkappe ist ein Zeichen, kein Satz – „Strg" darf nicht
   als „St" / „rg" über zwei Zeilen brechen. Nachgemessen wurde das erst bei
   320 CSS-Pixeln, wo `overflow-wrap: anywhere` gilt: Dort brach Chromium
   innerhalb der Kappe und schob deren Rahmen 2 Pixel aus dem Absatz. */
kbd {
  padding: 0 var(--abstand-2xs);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  white-space: nowrap;
}

/* =====================================================================
   Fußbereich
   ===================================================================== */

.fussbereich__quelle {
  margin-top: var(--abstand-s);
}

/* =====================================================================
   Schmale Fenster
   ===================================================================== */

@media (max-width: 40rem) {
  .lernstand__zahlen,
  .auswertung__zahlen,
  .kuerzel__liste {
    grid-template-columns: 1fr;
  }

  .lernstand__zahlen dd,
  .auswertung__zahlen dd,
  .kuerzel__liste dd {
    margin-bottom: var(--abstand-s);
  }

  .sitzung__aktionen .knopf,
  .auswertung__aktionen .knopf {
    flex: 1 1 100%;
  }
}

/* ─── Lernplan ────────────────────────────────────────────────────────── */

.lernplan {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.lernplan__termin {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.lernplan__termin label {
  font-weight: var(--schriftstaerke-mittel);
}

/*
  Das Datumsfeld bleibt bewusst ein natives `input[type=date]`: Es bringt
  Tastaturbedienung, Bildschirmleser-Anbindung und das Datumsformat des
  Systems mit. Ein selbstgebauter Kalender müsste all das nachbilden – und
  täte es schlechter.
*/
.lernplan__terminfeld {
  inline-size: fit-content;
  max-inline-size: 100%;
  /* Siehe .antwortoption__inhalt: feste Mindestbreiten sprengen den Kasten,
     sobald nur 320 CSS-Pixel zur Verfügung stehen (WCAG 1.4.10). */
  min-inline-size: min(12rem, 100%);
  padding: var(--abstand-xs) var(--abstand-s);
  border: 1px solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: inherit;
}

.lernplan__hilfe {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/*
  Die Einschätzung ist die Hauptaussage des Abschnitts. Sie wird durch Größe
  und einen Balken an der Seite hervorgehoben – nicht durch Farbe allein
  (WCAG 1.4.1); der Satz selbst trägt die Aussage.
*/
.lernplan__urteil {
  margin: 0;
  padding-inline-start: var(--abstand-s);
  border-inline-start: 4px solid var(--farbe-akzent);
  font-size: var(--schrift-gross);
  line-height: var(--zeilenhoehe-eng);
}

.lernplan__fussnote {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ─── Erklärung zur Frage ─────────────────────────────────────────────── */

/*
  Deutlich abgesetzt vom Ergebnis darüber: Was hier steht, ist eigener
  Zusatz und nicht Teil des amtlichen Fragenkatalogs. Die Abgrenzung trägt
  nicht die Farbe allein – die Überschrift „Warum das so ist“ und der
  Herkunftshinweis am Fuß sagen es ausdrücklich (WCAG 1.4.1).
*/
.erklaerung {
  margin-block-start: var(--abstand-m);
  padding: var(--abstand-m);
  border: 1px solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  background: var(--farbe-flaeche);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

/* Aufklappbare Fassung: Die Ueberschrift sitzt im <summary> und muss dort
   wie eine Schaltflaeche wirken, ohne ihre Rolle als Ueberschrift zu
   verlieren. */
/* Kein `display: flex`: Chromium unterdrueckt damit das Aufklapp-Dreieck,
   und ein Aufklapper ohne Marke sieht aus wie eine gewoehnliche Ueberschrift.
   Ausprobiert und wieder verworfen. */
.erklaerung--klappbar > .erklaerung__schalter {
  cursor: pointer;
  padding-block: var(--abstand-2xs);
}

/* Die Ueberschrift bleibt im <summary> stehen, damit sie auch zugeklappt in
   der Ueberschriftenliste eines Screenreaders auftaucht. Sie darf dort aber
   keinen eigenen Absatz aufmachen. */
.erklaerung__schalter > .erklaerung__titel {
  display: inline;
  margin: 0;
}

.erklaerung__schalter:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}

.erklaerung__titel {
  margin: 0;
  font-size: var(--schrift-gross);
}

.erklaerung__kurz {
  margin: 0;
  font-weight: var(--schriftstaerke-mittel);
}

.erklaerung__text {
  margin: 0;
}

.erklaerung__merksatz {
  margin: 0;
  padding: var(--abstand-xs) var(--abstand-s);
  border-inline-start: 4px solid var(--farbe-akzent);
  background: var(--farbe-akzent-leise);
}

.erklaerung__merkmarke {
  font-weight: var(--schriftstaerke-fett);
}

.erklaerung__fundstellen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.erklaerung__untertitel {
  margin: 0;
  font-size: var(--schrift-basis);
  font-weight: var(--schriftstaerke-mittel);
}

.erklaerung__liste {
  margin: 0;
  padding-inline-start: var(--abstand-m);
}

.erklaerung__liste li {
  /* Fundstellen dürfen nicht mitten in einer Angabe umbrechen. */
  text-wrap: pretty;
}

.erklaerung__ohnefundstelle,
.erklaerung__herkunft {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ─── Glossar ─────────────────────────────────────────────────────────── */

.glossar__suche {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  margin-block: var(--abstand-m);
}

.glossar__suche label {
  font-weight: var(--schriftstaerke-mittel);
}

.glossar__feld {
  inline-size: min(100%, 26rem);
  padding: var(--abstand-xs) var(--abstand-s);
  border: 1px solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: inherit;
}

.glossar__anzahl {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* A-bis-Z-Sprungleiste: nur Buchstaben, unter denen auch ein Eintrag steht. */
.glossar__buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2xs);
}

/* Die Mindestbreite des Knopfs (--klickflaeche-min) trägt die Klickfläche;
   das übliche Seitenpolster machte aus einem Buchstaben einen breiten
   Balken, und die Leiste bräche schon auf schmalen Fenstern mehrzeilig um. */
.glossar__buchstabe {
  padding-inline: var(--abstand-xs);
}

.glossar__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  margin-block: var(--abstand-m);
}

.glossar__herkunft,
.begriff__ohnefundstelle,
.begriff__siehe,
.begriff__fundstellen {
  margin: 0;
  padding-inline-start: var(--abstand-m);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/*
  Die Herkunft der Themengruppen. Leise, aber vorhanden: Der amtliche Katalog
  gliedert die Kapitel II bis IV nicht auf, die Gruppen stammen von hier.
*/
.kapitelwahl__themenherkunft {
  margin: var(--abstand-2xs) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ─── Verwandte Fragen ───────────────────────────────────────────────── */

/*
  Zugeklappt und ruhig: Die Liste ist Zugabe, nicht Lernstoff. Sie darf
  „Nächste Frage“ nicht aus dem Bild drängen – dieselbe Überlegung wie bei
  der Erklärungstafel.
*/
.verwandte {
  margin-block: var(--abstand-xs);
}

.verwandte__schalter {
  cursor: pointer;
  font-weight: var(--schriftstaerke-mittel);
}

.verwandte__titel {
  margin: var(--abstand-2xs) 0;
}

.verwandte__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  margin: 0;
  padding-inline-start: var(--abstand-m);
}

.verwandte__nummer {
  font-weight: var(--schriftstaerke-mittel);
}

.verwandte__herkunft {
  margin: var(--abstand-2xs) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ─── Normtext zu einer Fundstelle ───────────────────────────────────── */

/*
  Der aufklappbare Gesetzestext. Ruhig gehalten: Er ist Beleg, nicht
  Lernstoff – wer ihn braucht, sucht ihn, und wer nicht, soll nicht
  daran vorbeiscrollen müssen.
*/
.normstelle__zitat {
  cursor: pointer;
}

.normstelle__text {
  margin-block-start: var(--abstand-2xs);
  padding-inline-start: var(--abstand-s);
  border-inline-start: var(--rahmenbreite-stark) solid var(--farbe-rahmen);
}

.normstelle__titel,
.normstelle__pfad {
  margin: 0 0 var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

.normstelle__absatz {
  /* Der amtliche Text bringt eigene Zeilenumbrüche mit – Anlagen sind
     zeilenweise gesetzt. Sie zu schlucken machte aus einer Gliederung eine
     Textwand. */
  margin: 0 0 var(--abstand-xs);
  white-space: pre-wrap;
}

.normstelle__herkunft,
.normstelle__fehlt,
.normstelle__unscharf {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.normstelle__ganze {
  margin-block-start: var(--abstand-xs);
}

.normstelle__anlage {
  /* Anlage 1 des WaffG hat 29 000 Zeichen. Sie scrollt in sich, damit die
     Seite es nicht tut. */
  max-block-size: 40vh;
  overflow-y: auto;
  padding-inline-end: var(--abstand-xs);
}

.glossar__aktionen {
  margin-block-start: var(--abstand-l);
}

/* ─── Ein einzelner Begriff ───────────────────────────────────────────── */

.begriff {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  padding-inline-start: var(--abstand-s);
  border-inline-start: 3px solid var(--farbe-rahmen);
}

.begriff__wort {
  margin: 0;
  font-size: var(--schrift-gross);
}

/*
  Die Kennzeichnung als Abkürzung ist Beiwerk zum Stichwort und wird deshalb
  leiser gesetzt – sie bleibt aber Text, nicht Farbe (WCAG 1.4.1).
*/
.begriff__art {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-normal);
}

.begriff__kurz {
  margin: 0;
}

.begriff__text {
  margin: 0;
}

/* ─── Begriffe an der Frage ───────────────────────────────────────────── */

.begriffe {
  margin-block: var(--abstand-s);
}

.begriffe__schalter {
  cursor: pointer;
  color: var(--farbe-akzent);
  font-weight: var(--schriftstaerke-mittel);
}

.begriffe__schalter:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}

.begriffe__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  margin-block-start: var(--abstand-s);
}

/*
  Der Hinweis vor dem Beantworten. Er trägt die Aussage im Text, nicht in der
  Farbe – der Rahmen links ist nur Hervorhebung.
*/
.begriffe__warnung {
  margin: 0;
  padding: var(--abstand-xs) var(--abstand-s);
  border-inline-start: 4px solid var(--farbe-warnung);
  background: var(--farbe-flaeche-erhoben);
}

/* ── Profile ─────────────────────────────────────────────────────────── */

.profile__erklaerung {
  margin-block: 0 var(--abstand-m);
}

.profile__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.profile__zeile {
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-s);
  padding: var(--abstand-s);
}

/* Das laufende Profil ist am kräftigeren Rahmen UND am Text „lernt gerade"
   erkennbar – nie an der Auszeichnung allein (WCAG 1.4.1). */
.profile__zeile--aktuell {
  border-color: var(--farbe-rahmen-kraeftig);
}

.profile__name {
  margin-block: 0 var(--abstand-xs);
}

.profile__marke {
  color: var(--farbe-text-leise);
}

.profile__aktionen,
.profile__formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs);
}

.profile__formular-aktionen {
  margin-block-start: var(--abstand-m);
  gap: var(--abstand-s);
}

.profile__anlegen {
  margin-block-start: var(--abstand-m);
}

.profile__hinweis {
  margin-block: var(--abstand-s) 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.profile__formular,
.profile__loeschfrage {
  border-radius: var(--radius-s);
  padding: var(--abstand-m);
  margin-block: var(--abstand-s) 0;
}

.profile__formular {
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
}

.profile__loeschfrage {
  border: var(--rahmenbreite) solid var(--farbe-fehler);
}

.profile__formular-titel {
  margin-block: 0 var(--abstand-s);
}

.profile__feld {
  display: block;
  inline-size: 100%;
  max-inline-size: 28rem;
  margin-block-start: var(--abstand-2xs);
}

.profile__feldhilfe {
  margin-block: var(--abstand-2xs) 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Leer nimmt die Region keinen Platz weg; im DOM bleibt sie trotzdem, sonst
   verschluckt der Screenreader die erste Meldung. */
.profile__meldung:empty {
  display: none;
}

/* ── „Wer lernt?" beim Start ─────────────────────────────────────────── */

.profilfrage__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  margin-block: var(--abstand-m);
}

/*
  Der kräftige Rahmen, nicht der leise.

  Diese Beschriftung ist keine Beschriftung neben einem Knopf, sondern die
  Trefffläche selbst: Die ganze Karte schaltet den Radioknopf, und ihr Rahmen
  ist die einzige Linie, an der sich die Wahlmöglichkeit als eigenes
  Bedienelement abgrenzt. WCAG 1.4.11 verlangt dafür 3:1; --farbe-rahmen
  misst 1,77:1 und trägt in tokens.css ausdrücklich den Vermerk „nur
  dekorativ". Nachgemessen und seither bewacht in
  tests/token-kontraste.test.ts.
*/
.profilfrage__wahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  padding: var(--abstand-s);
  cursor: pointer;
}

.profilfrage__wahl input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  accent-color: var(--farbe-akzent);
}

.profilfrage__name {
  font-weight: 600;
}

/* Die Erklärung unter dem Namen – nur bei der Zuschnittfrage, wo die Wahl
   eine Folge hat, die man nicht am Wort ablesen kann. */
.profilfrage__erklaerung {
  display: block;
  margin-block-start: var(--abstand-3xs, 0.15rem);
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: 400;
}

.profilfrage__hinweis {
  margin-block: var(--abstand-l) 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* ── Wessen Lernstand hier steht ─────────────────────────────────────── */

.einstieg__profil {
  margin-block: 0 var(--abstand-s);
  color: var(--farbe-text-leise);
}

/* =====================================================================
   Prüfungsreife-Ampel

   Farbe trägt hier nichts, was nicht auch als Wort dasteht (WCAG 1.4.1).
   Der Streifen links unterscheidet sich deshalb zusätzlich in der Breite –
   wer Rot und Grün nicht auseinanderhält, sieht trotzdem einen Unterschied,
   und wer gar nichts sieht, hört das Stufenwort.
   ===================================================================== */

.reifeampel {
  border-inline-start: var(--abstand-xs) solid var(--farbe-rahmen-kraeftig);
  padding-inline-start: var(--abstand-s);
}

.reifeampel--reif {
  border-inline-start-color: var(--farbe-erfolg);
}

.reifeampel--kippe {
  border-inline-start-width: calc(var(--abstand-xs) * 2);
  border-inline-start-color: var(--farbe-warnung);
}

.reifeampel--zurueck {
  border-inline-start-width: calc(var(--abstand-xs) * 3);
  border-inline-start-color: var(--farbe-fehler);
}

.reifeampel__stufe {
  font-weight: var(--schriftstaerke-fett);
}

.reifeampel__satz {
  margin: 0 0 var(--abstand-s);
}

.reifeampel__satz + .reifeampel__satz {
  margin-block-start: var(--abstand-xs);
}

.reifeampel__schiene {
  position: relative;
  block-size: 0.75rem;
  background-color: var(--farbe-grund-versetzt);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.reifeampel__fuellung {
  block-size: 100%;
  background-color: var(--farbe-akzent);
  transition: inline-size var(--uebergang-dauer) var(--uebergang-kurve);
}

/* Die Zielmarke: wo „Prüfungsreif“ beginnt. Ein senkrechter Strich, kein
   Farbwechsel – ein Wechsel wäre wieder nur Farbe. */
.reifeampel__marke {
  position: absolute;
  inset-block: 0;
  inline-size: var(--rahmenbreite);
  background-color: var(--farbe-text);
  transform: translateX(-50%);
}

@media (forced-colors: active) {
  .reifeampel__fuellung {
    background-color: Highlight;
    forced-color-adjust: none;
  }

  .reifeampel__marke {
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}

.lernstand__erklaerung {
  margin-block-end: var(--abstand-m);
}

/* Untergeordnete Einstellungen: eingerückt, damit die Zugehörigkeit sichtbar
   ist. Die Einrückung ist Zugabe – im Baum steht der Zusammenhang ohnehin
   durch die Reihenfolge und die Formulierung der Beschriftungen. */
.einstellungen__untergeordnet {
  margin-block-start: var(--abstand-m);
  padding-inline-start: var(--abstand-m);
  border-inline-start: var(--rahmenbreite) solid var(--farbe-rahmen);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

/* =====================================================================
   Fehler zu dieser Frage melden

   Steht unter der Aktionszeile und ist zugeklappt: Der tägliche Weg ist das
   Beantworten, nicht das Melden. Aufgeklappt zeigt der Block zuerst den
   Text und dann den Knopf – wer etwas weitergibt, muss vorher lesen können,
   was drinsteht.
   ===================================================================== */

.meldung {
  margin-block-start: var(--abstand-m);
}

.meldung__titel {
  cursor: pointer;
}

.meldung__hinweis {
  margin-block: var(--abstand-s);
}

.meldung__beschriftung {
  display: block;
  margin-block-end: var(--abstand-xs);
  font-weight: var(--schriftstaerke-mittel);
}

.meldung__feld {
  inline-size: 100%;
  font-family: var(--schrift-familie-mono);
  font-size: 0.95em;
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-text);
  background-color: var(--farbe-grund-versetzt);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  padding: var(--abstand-s);
  resize: vertical;
}

.meldung__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
  margin-block-start: var(--abstand-s);
}

.meldung__ansage:empty {
  display: none;
}

/* =====================================================================
   Lernstand sichern und übertragen

   Zwei Wege, die sich nicht ähneln dürfen: Der gefährlichste Bedienfehler
   ist die falsche Richtung. Die Rückfrage steht im Textfluss und nicht in
   einem modalen Dialog – sie holt den Fokus, fängt ihn aber nicht ein.
   ===================================================================== */

.sicherung__titel {
  margin-block-start: var(--abstand-l);
}

.sicherung__rueckfrage {
  margin-block-start: var(--abstand-m);
  padding: var(--abstand-m);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  background-color: var(--farbe-grund-versetzt);
}

.sicherung__rueckfragetitel {
  margin-block-start: 0;
}

.sicherung__gegenueber {
  margin-block: var(--abstand-m);
}

.sicherung__gegenueber dt {
  font-weight: var(--schriftstaerke-mittel);
  margin-block-start: var(--abstand-s);
}

.sicherung__gegenueber dd {
  margin-inline-start: 0;
}

/* Der dritte Weg, sichtbar abgesetzt: Er ist harmlos und soll nicht wie
   eine Variante des Ersetzens aussehen. */
.sicherung__uebernehmen {
  border-block-start: var(--rahmenbreite) solid var(--farbe-rahmen);
  margin-block-start: var(--abstand-m);
  padding-block-start: var(--abstand-s);
}

.sicherung__profilwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
  margin-block: var(--abstand-s);
}

.sicherung__profilwahl select {
  /* Mindestzielgröße 44 px auch bei kleiner Schrift (WCAG 2.5.8). */
  min-height: 2.75rem;
  padding: 0 var(--abstand-xs);
}

.sicherung__verlust {
  margin-block: var(--abstand-2xs);
  padding-inline-start: var(--abstand-m);
}

.sicherung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-block-start: var(--abstand-m);
}

.sicherung__meldung:empty {
  display: none;
}
