/* ===========================================================================
   style.css — Lern-Tool
   ---------------------------------------------------------------------------
   Farbtoken, Knopfformen, Kopfleiste, Reiter und Dunkelmodus sind aus dem
   Einarbeitungsplan-Konfigurator übernommen, damit beide Werkzeuge als ein
   Haus erkennbar sind. Wer hier etwas ändert, sollte dort nachsehen.

   Der Dunkelmodus steht vollständig in @media screen. Gedruckt wird hier
   zwar nichts, aber die Regel gilt im Haus einheitlich.
   =========================================================================== */

:root {
  /* Ohne color-scheme zeichnet der Browser Bildlaufleiste, Schreibcursor,
     Auswahlliste und die Grundfläche eines <button> weiter hell — auch wenn
     die Seite längst dunkel ist. Der Gegenwert steht im Dunkelblock unten. */
  color-scheme: light;

  /* Seit 09.10.2026 dieselbe Palette wie der Konfigurator und der
     Folienmaster der Konzeptpräsentation: Navy für Schrift, Blau als einzige Akzentfarbe.
     Koralle, Limette und Creme sind entfallen. Rot heißt im Lauf nur
     „falsch“, Grün „richtig“. */
  --navy:         #012F60;
  --navy-hell:    #1B4E8C;
  --navy-flae:    #012F60;
  /* Zarter Blaugrund für eine gewählte Option. */
  --navy-zart:    #E8F1FF;

  --blau:            #1C71FE;   /* Akzent: Linien, Marken, Fokus */
  --blau-text:       #155FD6;   /* Schrift: 5,8:1 auf Weiß */
  --blau-flae:       #1766E8;   /* Hauptknopf: weiße Schrift 5,1:1 */
  --blau-flae-hover: #1459CC;

  --grund:        #F3F5F9;
  --weiss:        #FFFFFF;
  --linie:        #E2E8F0;
  --linie-stark:  #CBD5E1;
  --text:         #1B2636;
  --text-still:   #56677C;

  --st-erledigt:  #219056;
  --st-begonnen:  #F5B841;
  --warn-text:    #8A5A00;

  --gruen:        #1E7A4C;
  --gruen-flae:   #E9F6EE;
  --rot:          #B3261E;
  --rot-flae:     #FDECEA;

  /* Die vier Stufen als Wärmeskala: Grün für das Einfache, Blau für die
     Arbeitsebene, Bernstein für die Feinheiten, Rot für die Auslegungsfragen. */
  /* Stufen seit 10.10.2026 als Blaurampe, dieselben Töne wie S1 bis S4 im
     Konfigurator (`.pill-s`) und in den Präsentationen: von hell nach Navy.
     Vorher eine Wärmeskala Grün, Blau, Bernstein, Rot; Rot heißt im
     Hausstil aber nur Frist oder Löschen. `-text` ist die Schrift auf der
     Fläche. */
  --stufe-1:      #9BB4D4;
  --stufe-1-text: #0A2A5C;
  --stufe-2:      #4F74A6;
  --stufe-2-text: #FFFFFF;
  --stufe-3:      #1B4585;
  --stufe-3-text: #FFFFFF;
  --stufe-4:      #012F60;
  --stufe-4-text: #FFFFFF;

  --schatten-karte: 0 1px 2px rgba(15, 35, 65, .05), 0 1px 3px rgba(15, 35, 65, .04);

  /* Die einseitig große Ecke ist seit 09.10.2026 entfallen. Was hervorsticht
     (Karteikarte), rundet etwas stärker als die übrigen Tafeln. */
  --radius-gross: 16px;
  --radius:       12px;
  --lauf-hoehe:   56px;

  /* Eine Spalte für alles: Kopfleiste, Laufleiste, Inhalt und Fußzeile
     rücken um denselben Betrag ein. Vorher stand die Marke am linken
     Fensterrand und die Karten 268 Pixel weiter innen. Das 100 % löst erst
     dort auf, wo --einzug benutzt wird, also an der Breite von <body>. */
  --spalte:       1000px;
  --rand:         24px;
  --einzug:       max(var(--rand), calc((100% - var(--spalte)) / 2 + var(--rand)));

  /* Ohne HamburgSans greift unter Windows 11 die Segoe UI Variable, und
     zwar in zwei Schnitten: Text für den Fließtext, Display für Titel und
     große Zahlen. Unter Windows 10 fehlt sie, dann gilt die alte Segoe UI. */
  --schrift: "HamburgSans", "Segoe UI Variable Text", "Segoe UI", system-ui,
             -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "HamburgSans", "Segoe UI Variable Display", "Segoe UI",
             system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Muss vor allem anderen stehen: sonst gewinnt jedes spätere `display`
   gegen das hidden-Attribut, und verborgene Kästen sind trotzdem da. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  color: var(--navy); line-height: 1.25; margin: 0;
  font-family: var(--schrift-titel);
  /* Zweizeilige Titel brechen ausgewogen statt mit einem Wort allein. */
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Zahlen, die sich ändern oder untereinander stehen, bekommen gleich
   breite Ziffern. Sonst springt „11 von 20" beim Weiterblättern. */
.lauf-zahl, .such-zahl, .verlauf-zahl, .bereichszeile-zahl,
.abschluss h1 {
  font-variant-numeric: tabular-nums;
}
.verlauf-zahl, .marke-text { font-family: var(--schrift-titel); }

/* Überschriften sind Fokusziele nach jedem Ansichtswechsel, für Screenreader
   und Tastatur. Einen Rahmen bekommen sie nicht: sie sind nicht bedienbar,
   und im Test stand nach jedem Enter ein Kasten um die Frage, der wie ein
   Eingabefeld aussah (Durchgang vom 21.09.2026). */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* ===== Kopfleiste ======================================================== */

.kopfleiste {
  display: flex;
  align-items: center;
  gap: 28px;
  /* Über die volle Breite wie im Konfigurator, damit das Logo in beiden
     Apps an derselben Stelle steht. Bis zum 22.09.2026 war die Kopfleiste
     auf die Inhaltsspalte eingerückt (--einzug). */
  padding: 10px 24px;
  background: var(--weiss);
  /* 58 px hoch wie im Konfigurator: Bedienelemente 36 px. Seit 09.10.2026
     eine feine Linie statt 2 px Navy, wie dort. */
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 3px rgba(15, 35, 65, .04);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}

.marke-block {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  /* Seit er zurück in die App führt, ist er ein <button>. Aussehen bleibt,
     die Knopf-Grundfläche muss weg. */
  background: transparent; border: 0; padding: 2px 6px; margin-left: -6px;
  font: inherit; color: inherit; cursor: pointer; border-radius: 6px;
  text-align: left;
}
.marke-block:hover { background: var(--grund); }
.marke-block:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }

.marke-strich { width: 22px; height: 6px; border-radius: 3px; background: var(--blau); flex: none; }
.marke-text { font-size: 17px; font-weight: 800; color: var(--navy); }
.marke-stapel { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
/* Der Name wie „von Andreas Ponath“ im Konfigurator (.prototyp-autor). */
.marke-autor {
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
  color: var(--text-still); white-space: nowrap; padding-left: 1px;
}

.reiter { display: flex; gap: 4px; flex: none; }

.reiter-knopf {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-still);
  background: transparent; border: 0;
  /* Oben derselbe unsichtbare Rand wie unten, sonst säße die Schrift um
     die halbe Linienstärke über der Mitte. text-box schneidet die Zeile auf
     Versalhöhe und Grundlinie zu: dann steht die Schrift mittig, gleich wie
     die Hausschrift ihre Ober- und Unterlängen verteilt. */
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  min-height: 36px; padding: 0 16px; cursor: pointer; border-radius: 4px 4px 0 0;
  line-height: 1.2; text-box: trim-both cap alphabetic;
}
.reiter-knopf:hover { color: var(--navy); background: var(--grund); }
.reiter-knopf.aktiv { color: var(--blau-text); border-bottom-color: var(--blau); }
.reiter-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }

.kopf-einstellungen { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.thema-knopf {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--linie-stark); border-radius: 8px;
  background: var(--weiss); color: var(--text-still);
  cursor: pointer;
}
.thema-knopf:hover { background: var(--grund); color: var(--navy); }
.thema-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.ico-thema { width: 17px; height: 17px; }
.ico-sonne { display: none; }

/* ===== Knöpfe ============================================================ */

.knopf {
  font: inherit; font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.knopf-primaer {
  background: var(--blau-flae); color: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 65, .14);
}
.knopf-primaer:hover { background: var(--blau-flae-hover); }
.knopf-still { background: transparent; color: var(--navy); border-color: var(--linie-stark); }
.knopf-still:hover { background: var(--grund); }
.knopf-gross { padding: 13px 26px; font-size: 16px; }

.knopf-gewusst { background: var(--gruen); color: #fff; }
.knopf-gewusst:hover { background: #17643E; }
.knopf-noch { background: transparent; color: var(--navy); border-color: var(--linie-stark); }
.knopf-noch:hover { background: var(--grund); }

.knopf-mini {
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--weiss); color: var(--navy);
  border: 1px solid var(--linie-stark); border-radius: 7px;
  padding: 5px 11px; cursor: pointer;
}
.knopf-mini:hover { background: var(--grund); }

.knopf:focus-visible, .knopf-mini:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 2px;
}
.knopf[disabled] { opacity: .45; cursor: default; }

select, input[type="search"] {
  font: inherit; font-size: 15px;
  padding: 8px 11px;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
}

/* ===== Laufleiste ======================================================== */

/* Im Lauf die einzige Leiste: Beenden, Titel mit Fortschritt, Zähler. Vorher
   standen Kopf- und Laufleiste übereinander, zusammen 121 Pixel, und am
   Firmenlaptop fehlten genau die der Frage. */
.laufleiste {
  position: sticky; top: var(--kopf-hoehe, 0px); z-index: 19;
  display: flex; align-items: center; gap: 16px;
  height: var(--lauf-hoehe); padding: 0 var(--einzug);
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.lauf-zu {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--linie-stark); border-radius: 10px;
  background: var(--weiss); color: var(--navy);
}
.lauf-zu:hover { background: var(--grund); }
.lauf-zu:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.lauf-zu svg { width: 15px; height: 15px; }

.lauf-mitte { flex: 1; min-width: 0; }

/* Der Titel weicht, nicht die Bedienung: am Handy wird er gekürzt. */
.lauf-titel {
  display: block;
  font-size: 12px; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lauf-zahl { font-size: 13px; color: var(--text-still); white-space: nowrap; }

.lauf-spur {
  height: 8px; background: var(--grund); border-radius: 999px; overflow: hidden;
  display: flex; margin-top: 5px;
}
.lauf-erledigt { background: var(--blau); transition: width .25s; width: 0; }

/* Im Lauf steht alles in einer Spalte in der Mitte, schmaler als der Rest
   der App: Zeilen von gut 80 Zeichen lesen sich am besten. Bis zum
   21.09.2026 waren es 1160 px für Frage und Rückmeldung nebeneinander. */
/* Im Lauf bleibt die Kopfleiste, aber ohne Reiter und etwas flacher. */
body.im-lauf .reiter { display: none; }
body.im-lauf .kopfleiste { padding-block: 8px; }

body.im-lauf {
  --spalte: 820px;
  --einzug: max(var(--rand), calc((100% - var(--spalte)) / 2 + var(--rand)));
}


/* ===== Grundgerüst ======================================================= */

.mitte {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px var(--einzug) 60px;
}

/* Der Abstand zwischen den Tafeln einer Ansicht. Früher stand er nur an
   .mitte, und dort trennt er die Ansichten, von denen immer nur eine zu
   sehen ist: auf der Übersicht stießen fünf Tafeln ohne Fuge aneinander. */
.ansicht { display: flex; flex-direction: column; gap: 20px; }

/* Überschrift, Satz und Liste gehören zusammen und stehen enger als die
   Tafeln darüber. Oben mehr Luft als unten, sonst liest sich der Titel als
   Unterschrift der Tafel davor. */
.abschnitt { display: grid; gap: 12px; margin-top: 12px; }

.tafel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.tafel-titel { font-size: 17px; margin-bottom: 14px; }
.tafel-fuss {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.tafel-fuss .knopf-mini { margin-left: auto; }

.held { padding: 8px 2px 4px; }
.held h1 { font-size: 29px; margin-bottom: 12px; }
.held-text { max-width: 64ch; margin: 0 0 12px; color: var(--text-still); }
.held > :last-child { margin-bottom: 0; }
.held-text strong { color: var(--text); }
.held-text a { color: var(--blau-text); text-underline-offset: 2px; }

.augenmarke {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blau-text);
  margin-bottom: 5px;
}

/* ===== Stufenpunkte ====================================================== */

/* Gefüllte und leere Punkte statt einer Zahl: man sieht die Schwierigkeit,
   ohne sie zu lesen. Steht im Dialog vor jeder Option. */
.stufen-punkte { display: inline-flex; gap: 3px; }
.stufen-punkte i {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--linie-stark);
}
.stufen-punkte .punkt-1 { background: var(--stufe-1); border-color: var(--stufe-1); }
.stufen-punkte .punkt-2 { background: var(--stufe-2); border-color: var(--stufe-2); }
.stufen-punkte .punkt-3 { background: var(--stufe-3); border-color: var(--stufe-3); }
.stufen-punkte .punkt-4 { background: var(--stufe-4); border-color: var(--stufe-4); }

/* ----- Die Marke an der einzelnen Karte ----- */
.stufenmarke {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .03em; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.stufenmarke-1 { color: var(--stufe-1-text); background: var(--stufe-1); border-color: var(--stufe-1); }
.stufenmarke-2 { color: var(--stufe-2-text); background: var(--stufe-2); border-color: var(--stufe-2); }
.stufenmarke-3 { color: var(--stufe-3-text); background: var(--stufe-3); border-color: var(--stufe-3); }
.stufenmarke-4 { color: var(--stufe-4-text); background: var(--stufe-4); border-color: var(--stufe-4); }
.stufenmarke-0 { display: none; }


/* ===== Startseite ======================================================== */

/* Eine Aufgabe, eine Bühne: Titel, ein Satz, der Knopf, mittig im ersten
   Bildschirm; die letzten Ergebnisse klein am unteren Rand. Bis zum
   21.09.2026 stand hier die Übersicht mit fünf Tafeln und neun Balken. */
.ansicht-start { gap: 28px; }
/* Fenster abzüglich Kopfleiste, Rand der Mitte und Fußzeile: so steht das
   Ergebnisfeld am unteren Bildrand und die Bühne dazwischen in der Mitte. */
@media (min-width: 861px) and (min-height: 560px) {
  .ansicht-start { min-height: calc(100vh - 222px); }
}
.buehne {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px 0 8px;
}
.buehne h1 { font-size: 40px; letter-spacing: -.01em; margin-bottom: 14px; }
.buehne-text { max-width: 60ch; margin: 0 0 30px; font-size: 17px; color: var(--text-still); }
.knopf-start { font-size: 18px; padding: 16px 48px; min-width: 260px; border-radius: 10px; }
.buehne-neben {
  margin: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 2px 8px;
}
.buehne-trenner { font-size: 13px; color: var(--text-still); }
.fortsetzen { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.fortsetzen-text {
  margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-still);
  white-space: pre-line;
}
.fortsetzen-text .textknopf { padding: 0 0 0 6px; font-size: 14px; }
.fortsetzen:not([hidden]) + .knopf-start { font-size: 16px; padding: 12px 32px; }

/* ----- Letzte Ergebnisse ----- */
.verlauf { border-top: 1px solid var(--linie); padding-top: 14px; }
.verlauf-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.verlauf-titel {
  font-family: var(--schrift); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-still);
}
.verlauf-kopf .textknopf { padding: 0; font-size: 12.5px; }
.verlauf-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.verlauf-eintrag {
  display: grid; padding: 9px 14px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-still);
}
.verlauf-zahl { font-size: 17px; color: var(--navy); }
.verlauf-leer { margin: 0; font-size: 14px; color: var(--text-still); }

/* ===== Dialog: Schwierigkeitsgrad ======================================== */

/* Das Formular füllt den Dialog ganz aus. Ein Klick auf den Dialog selbst
   kommt dann nur vom Grund daneben und schließt ihn (siehe app.js). */
.stufendialog {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 16px;
  background: var(--weiss); color: var(--text);
  box-shadow: 0 24px 64px rgba(1, 20, 45, .30);
}
.stufendialog::backdrop { background: rgba(1, 25, 52, .48); }
.stufendialog form { padding: 26px 28px 22px; }
.stufendialog h2 { font-size: 22px; margin: 0; }
/* Unter der Überschrift eine Zeile, was gilt: im Stufendialog die
   Einstellungen, in den Einstellungen, wie lange sie gelten. */
.dialog-stand { margin: 4px 0 16px; font-size: 13.5px; color: var(--text-still); }
.dialog-meldung { margin: 12px 0 0; font-size: 13.5px; color: var(--rot); }

.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.einstell-knopf {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 12px; border: 1px solid var(--linie-stark); border-radius: 8px;
  background: none; color: var(--navy); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  transition: border-color .12s, background .12s;
}
.einstell-knopf:hover { border-color: var(--navy-hell); background: var(--navy-zart); }
.einstell-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.einstell-knopf svg { width: 17px; height: 17px; }

.stufenwahl { display: grid; gap: 8px; }
.stufenoption {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center; gap: 14px;
  padding: 11px 16px;
  border: 1px solid var(--linie-stark); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.stufenoption:hover { border-color: var(--navy-hell); }
/* Die Wahl ist marineblau wie jede Auswahl im Lauf. */
.stufenoption:has(input:checked) {
  border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy);
  background: var(--navy-zart);
}
.stufenoption:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }
.stufenoption input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.stufenoption input:focus-visible { outline: none; }
.stufenoption-text { display: grid; line-height: 1.3; }
.stufenoption-text strong { font-size: 16px; color: var(--navy); }
.stufenoption-text span { font-size: 13.5px; color: var(--text-still); }

.dialog-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialog-fuss .tastenhilfe { margin: 0 auto 0 0; }

/* ===== Dialog: Einstellungen ============================================= */

/* Liegt über dem Stufendialog, dessen Grund schon abdunkelt. */
.einstelldialog::backdrop { background: rgba(1, 25, 52, .22); }
.einstell-kopf, .einstell-zeile { display: flex; align-items: center; gap: 14px; }
.einstell-kopf { margin-bottom: 8px; }
.einstell-zeile { margin-top: 20px; }
.einstell-kopf h3, .einstell-zeile h3 {
  margin: 0 auto 0 0;
  font-family: var(--schrift); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-still);
}
.einstell-kopf .textknopf { padding: 2px 0; }

.bereichswahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bereichsoption {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--linie-stark); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.bereichsoption:hover { border-color: var(--navy-hell); }
.bereichsoption:has(input:checked) { border-color: var(--navy); background: var(--navy-zart); }
.bereichsoption:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }
.bereichsoption input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.bereichsoption input:focus-visible { outline: none; }
.bereichsoption-text { display: grid; line-height: 1.25; }
.bereichsoption-text strong { font-size: 15px; font-weight: 600; color: var(--navy); }
.bereichsoption-text .bereich-vorbehalt { font-size: 12px; }

/* 20, 50, Alle als ein Schalter aus drei Teilen. Die Wahl sieht aus wie
   jede Auswahl in der App: zartes Blau mit marineblauem Rand. */
.mengenwahl { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: 10px; }
.mengenoption { position: relative; cursor: pointer; }
.mengenoption input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mengenoption span {
  display: block; min-width: 66px; padding: 8px 16px;
  text-align: center; font-size: 15px; font-weight: 600; color: var(--navy);
}
.mengenoption + .mengenoption span { border-left: 1px solid var(--linie-stark); }
.mengenoption:first-child span { border-radius: 9px 0 0 9px; }
.mengenoption:last-child span { border-radius: 0 9px 9px 0; }
.mengenoption:hover span { background: var(--navy-zart); }
.mengenoption:has(input:checked) span { background: var(--navy-zart); box-shadow: inset 0 0 0 2px var(--navy); }
.mengenoption:has(input:focus-visible) span { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ===== Lernen ============================================================ */

/* Kopf mit dem einen roten Knopf daneben, darunter die Bereiche als
   Kacheln und die Prozesse als eine Zeile Knöpfe. Keine Balken. */
.lernen-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.lernen-kopf .held-text { margin-bottom: 0; max-width: none; }

.meldung {
  margin: 0; padding: 11px 16px;
  border-left: 4px solid var(--st-erledigt); border-radius: 0 8px 8px 0;
  background: var(--gruen-flae); color: var(--text);
}

.bereiche {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bereich-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; height: 100%; min-height: 76px; padding: 13px 16px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color .12s, transform .12s;
}
.bereich-kachel:hover { border-color: var(--navy-hell); transform: translateY(-1px); }
.bereich-kachel:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.bereich-name {
  font-family: var(--schrift-titel); font-size: 15.5px; font-weight: 700;
  line-height: 1.3; color: var(--navy);
}
.bereich-vorbehalt { color: var(--warn-text); }
.bereich-zahl { margin-top: auto; font-size: 13px; color: var(--text-still); }

.prozesse { display: flex; flex-wrap: wrap; gap: 8px; }
.prozess-knopf {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--navy);
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  background: var(--weiss); border: 1px solid var(--linie-stark);
}
.prozess-knopf:hover { border-color: var(--navy-hell); background: var(--grund); }
.prozess-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

@media (max-width: 979px) { .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Glossar =========================================================== */

.suchzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.suchzeile input { flex: 1; min-width: 220px; }
.such-zahl { font-size: 13px; color: var(--text-still); }

.glossar-gruppe { margin-top: 22px; }
#glossar > :first-child { margin-top: 0; }
.glossar-gruppe > h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-still); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--linie);
}

.glossar-eintrag {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 13px 16px;
  margin-bottom: 8px;
}
.glossar-liste { margin: 0; }
.glossar-eintrag dt { font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.glossar-eintrag dd { margin: 0; color: var(--text); }
.glossar-eintrag .lang { color: var(--text-still); font-size: 14px; margin-top: 6px; }
.glossar-leer { color: var(--text-still); margin-top: 22px; }
/* Mit Suche steht der Bereich klein hinter dem Begriff, ohne Suche als
   Zwischentitel darüber */
.glossar-bereich {
  font-weight: 400; font-size: 12px; color: var(--text-still);
  margin-left: 10px; white-space: nowrap;
}
/* Fundstelle und „3 Fragen mit …“ unter dem Eintrag */
.glossar-fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin-top: 8px; font-size: 13px;
}
.glossar-fuss .textknopf { font-size: 13px; }

/* „Weitersuchen“ unter Glossar- und Fragensuche (seit 12.10.2026): dieselben
   Wörter in der anderen Liste und im Wortlaut der Quellensuche */
.weitersuchen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin: 0; font-size: 14px; color: var(--text-still);
}
.weitersuchen .textknopf { font-size: 14px; }
.weiter-quelle { color: var(--blau-text); text-underline-offset: 2px; }
.weiter-quelle::after { content: " ↗"; }

/* ===== Fragen: die Liste aller Testfragen ================================ */

/* Seit dem 10.10.2026. Oben eine Tafel mit den Filtern, je Zeile ein
   Etikett links und die Wahl rechts, unten die Trefferzahl. Darunter die
   Fragen nach Bereichen, gruppiert wie das Glossar. Chips sehen aus wie die
   Prozessknöpfe unter Lernen, gedrückt wie die Mengenwahl im Dialog. */

.fragen-filter { display: grid; gap: 12px; padding: 18px 22px 14px; }
.filter-zeile {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  align-items: start; gap: 6px 14px;
}
.filter-etikett {
  padding-top: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-still);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--navy);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--weiss); border: 1px solid var(--linie-stark);
  transition: background .12s, border-color .12s;
}
.filter-chip:hover { border-color: var(--navy-hell); background: var(--grund); }
.filter-chip:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.filter-chip[aria-pressed="true"] {
  background: var(--navy-zart); border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.filter-chip[disabled] { opacity: .45; cursor: default; }
.filter-chip[disabled]:hover { background: var(--weiss); border-color: var(--linie-stark); }
.chip-zahl {
  font-size: 12px; font-weight: 600; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}
.filter-chip[aria-pressed="true"] .chip-zahl { color: var(--navy); }
.chip-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip-punkt.punkt-1 { background: var(--stufe-1); }
.chip-punkt.punkt-2 { background: var(--stufe-2); }
.chip-punkt.punkt-3 { background: var(--stufe-3); }
.chip-punkt.punkt-4 { background: var(--stufe-4); }

.filter-felder { display: flex; flex-wrap: wrap; gap: 8px 10px; }
/* So breit wie der längste Eintrag samt Zahl, schrumpfen erst, wenn es eng wird. */
.filter-felder select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.filter-felder input[type="search"] { flex: 1 1 150px; min-width: 0; }

.fragen-stand {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--linie);
}
.fragen-zahl { font-size: 13.5px; color: var(--text-still); font-variant-numeric: tabular-nums; }

#fragenliste > :first-child { margin-top: 0; }
.gruppen-zahl {
  margin-left: 8px; font-weight: 600; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* Eine Frage je Zeile: links die Frage, rechts Form, Stufe und Kennung in
   festen Spalten, damit sich die Liste von oben nach unten lesen lässt. */
.frage-eintrag {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 8px; margin-bottom: 8px;
}
.frage-eintrag > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: start; gap: 4px 12px;
  padding: 12px 16px; border-radius: 8px;
}
.frage-eintrag > summary::-webkit-details-marker { display: none; }
.frage-eintrag > summary::before {
  content: ""; width: 6px; height: 6px; margin: 7px 0 0 2px;
  border-right: 2px solid var(--text-still); border-bottom: 2px solid var(--text-still);
  transform: rotate(-45deg); transition: transform .15s;
}
.frage-eintrag[open] > summary::before { transform: rotate(45deg); margin-top: 5px; }
.frage-eintrag > summary:hover { background: var(--grund); }
.frage-eintrag[open] > summary { border-radius: 8px 8px 0 0; }
.frage-eintrag > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.frage-eintrag[open] { border-color: var(--linie-stark); }

.fe-frage { font-weight: 600; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.fe-meta { display: flex; align-items: center; gap: 10px; padding-top: 1px; }
.fe-art { width: 128px; font-size: 12.5px; color: var(--text-still); white-space: nowrap; }
.fe-meta .stufenmarke { min-width: 66px; text-align: center; }
.fe-id {
  min-width: 34px; text-align: right;
  font-size: 12px; color: var(--text-still); font-variant-numeric: tabular-nums;
}
.fe-intern { font-size: 11.5px; font-weight: 700; color: var(--warn-text); }

.fe-loesung {
  padding: 12px 18px 16px 42px; border-top: 1px solid var(--linie);
  font-size: 14.5px;
}
.fe-loesung > :first-child { margin-top: 0; }

.fe-optionen, .fe-aussagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fe-optionen li { position: relative; padding: 2px 0 2px 22px; color: var(--text-still); }
.fe-optionen li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--linie-stark);
}
.fe-optionen li.richtig { color: var(--gruen); font-weight: 600; }
.fe-optionen li.richtig::before {
  left: 5px; top: .38em; width: 5px; height: 10px; border-radius: 0;
  border: 0; border-right: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  transform: rotate(45deg);
}

.fe-schritte { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.fe-schritte li::marker { color: var(--navy); font-weight: 700; }

.fe-paare { margin: 0; display: grid; gap: 6px; }
.fe-paar { display: grid; grid-template-columns: minmax(80px, 28%) minmax(0, 1fr); gap: 12px; }
.fe-paar dt { font-weight: 700; color: var(--navy); }
.fe-paar dd { margin: 0; }

.fe-aussagen { gap: 7px; }
.fe-aussagen li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; }
.fe-urteil {
  justify-self: start; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.stimmt .fe-urteil { color: var(--gruen); background: var(--gruen-flae); }
.stimmt-nicht .fe-urteil { color: var(--rot); background: var(--rot-flae); }

.fe-loesung .antw { font-size: 14.5px; }

.fe-lage {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px;
  background: var(--grund); color: var(--text); text-wrap: pretty;
}
.fe-teile { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.fe-teile li::marker { color: var(--navy); font-weight: 700; }
.fe-teilfrage { margin: 0 0 4px; font-weight: 600; color: var(--text); }
.fe-teilwarum { margin: 4px 0 0; font-size: 13.5px; color: var(--text-still); text-wrap: pretty; }

.fe-warum { margin: 14px 0 0; max-width: 75ch; color: var(--text); text-wrap: pretty; }
.fe-warum b { color: var(--navy); }
.fe-loesung .quelle { margin: 6px 0 0; }

/* Für Screenreader: „(richtig)“ hinter der richtigen Antwort, die man
   sonst nur am Haken und an der Farbe erkennt. */
.unsichtbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .fragen-filter { padding: 14px 14px 12px; }
  .filter-zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .filter-etikett { padding-top: 0; }
  .filter-felder select, .filter-felder input[type="search"] { flex: 1 1 100%; }
  .frage-eintrag > summary { grid-template-columns: 14px minmax(0, 1fr); padding: 12px 14px; }
  .fe-meta { grid-column: 2; flex-wrap: wrap; gap: 8px; }
  .fe-art { width: auto; }
  .fe-id { min-width: 0; margin-left: auto; }
  .fe-loesung { padding: 12px 14px 14px; }
  .fe-aussagen li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .fe-paar { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* ===== Lauf: Frage und Karte ============================================= */

/* Knapp gesetzt: nach dem Prüfen kommt die Begründung unter die Antworten,
   und je weniger Luft die Karte hat, desto öfter bleibt die Frage dabei im
   Bild. */
.karte-lauf { padding: 22px 26px 20px; }
.karte-lauf .karte-meta { margin-bottom: 8px; }
body.im-lauf .mitte { padding-top: 18px; }

.karte-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.karte-meta .augenmarke { margin-bottom: 0; }
.art-marke { font-size: 12.5px; color: var(--text-still); }

.karte-lauf h2 { font-size: 21px; margin-bottom: 14px; }

.hinweis { font-size: 14px; color: var(--text-still); margin-bottom: 16px; }
.hinweis:empty { display: none; }
.hinweis > span { display: block; }
.hinweis > span + span { margin-top: 7px; }

/* Vorbehalt an einem noch nicht gegengelesenen Themenfeld. Auffällig genug,
   um nicht als Kleingedrucktes durchzugehen, aber keine Fehlermeldung. */
.themen-hinweis {
  border-left: 3px solid var(--st-begonnen);
  padding-left: 11px;
  color: var(--text-still);
  font-size: 14px;
}

/* ----- Antwortmöglichkeiten --------------------------------------------- */

.wahl { display: grid; gap: 8px; }

.wahl-punkt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  cursor: pointer; background: var(--weiss);
  text-align: left; font: inherit; color: inherit; line-height: 1.45;
}
.wahl-punkt:hover { border-color: var(--navy-hell); }
.wahl-punkt:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Die Auswahl ist marineblau, nicht korallenrot: Rot heißt im Lauf nur
   noch falsch. */
.wahl-punkt.gewaehlt { border-color: var(--navy); border-width: 2px; padding: 10px 13px; }
.wahl-punkt.ist-richtig { border-color: var(--gruen); background: var(--gruen-flae); }
.wahl-punkt.ist-falsch  { border-color: var(--rot);   background: var(--rot-flae); }
.wahl-punkt[disabled] { cursor: default; }

.wahl-zeichen {
  flex: none; width: 20px; height: 20px;
  border: 1px solid var(--linie-stark); border-radius: 4px;
  margin-top: 1px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.wahl-punkt.rund .wahl-zeichen { border-radius: 50%; }
.wahl-punkt.gewaehlt .wahl-zeichen { border-color: var(--navy); background: var(--navy); color: var(--weiss); }
.wahl-punkt.ist-richtig .wahl-zeichen { border-color: var(--gruen); background: var(--gruen); color: #fff; }
.wahl-punkt.ist-falsch .wahl-zeichen { border-color: var(--rot); background: var(--rot); color: #fff; }

/* ----- Zuordnung --------------------------------------------------------- */

.zuordnung { display: grid; gap: 10px; }

.zuordnung-zeile {
  display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: 14px; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--linie); border-radius: 8px;
}
.zuordnung-zeile.ist-richtig { border-color: var(--gruen); background: var(--gruen-flae); }
.zuordnung-zeile.ist-falsch  { border-color: var(--rot);   background: var(--rot-flae); }
.zuordnung-links { font-weight: 700; color: var(--navy); }
.zuordnung-zeile select { width: 100%; }

/* ----- Reihenfolge ------------------------------------------------------- */

.reihenfolge { display: grid; gap: 8px; }

.reihenfolge-zeile {
  display: grid; grid-template-columns: 16px 24px 1fr auto;
  gap: 10px; align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--linie); border-radius: 8px;
  background: var(--weiss);
  /* Ziehen soll keinen Text markieren. */
  -webkit-user-select: none; user-select: none;
}
.reihenfolge-zeile.ist-richtig { border-color: var(--gruen); background: var(--gruen-flae); }
.reihenfolge-zeile.ist-falsch  { border-color: var(--rot);   background: var(--rot-flae); }
.reihenfolge-nr { font-weight: 800; color: var(--blau-text); }

/* Der Griff reicht über die ganze Höhe bis an den linken Rand der Zeile,
   damit ihn auch ein Finger sicher trifft. Nur hier `touch-action: none`:
   über dem Text muss die Seite am Telefon weiter rollen. */
.reihenfolge-griff {
  align-self: stretch; margin: -11px -5px -11px -14px; padding: 0 5px 0 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-still); cursor: grab; touch-action: none;
}
.reihenfolge-griff svg { fill: currentColor; }
.reihenfolge.fest .reihenfolge-griff { visibility: hidden; }

@media (pointer: fine) {
  .reihenfolge:not(.fest) .reihenfolge-zeile { cursor: grab; }
  .reihenfolge:not(.fest):not(.zieht) .reihenfolge-zeile:hover { border-color: var(--linie-stark); }
}
.reihenfolge.zieht, .reihenfolge.zieht * { cursor: grabbing; }
.reihenfolge.zieht .reihenfolge-zeile:not(.gezogen) { transition: transform .15s ease; }
.reihenfolge-zeile.gezogen {
  position: relative; z-index: 2;
  border-color: var(--navy-hell);
  box-shadow: 0 10px 24px rgba(1, 25, 52, .18);
}
.reihenfolge-zeile.landet { position: relative; z-index: 2; transition: transform .15s ease-out; }

.reihenfolge-knoepfe { display: flex; gap: 5px; }
.reihenfolge-soll { font-size: 13px; font-weight: 600; color: var(--rot); text-align: right; }
.reihenfolge-knoepfe button {
  font: inherit; width: 32px; height: 32px; line-height: 1;
  border: 1px solid var(--linie-stark); border-radius: 7px;
  background: var(--weiss); color: var(--navy); cursor: pointer;
}
.reihenfolge-knoepfe button:hover { background: var(--grund); border-color: var(--blau); }
.reihenfolge-knoepfe button:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.reihenfolge-knoepfe button[disabled] { opacity: .3; cursor: default; }

/* ----- Auswertung -------------------------------------------------------- */

.auswertung {
  margin-top: 20px; padding: 16px 18px;
  border-radius: 8px;
  border-left: 4px solid var(--linie-stark);
  background: var(--grund);
}
.auswertung.gut { border-left-color: var(--st-erledigt); }
.auswertung.schwach { border-left-color: var(--rot); }

.auswertung-kopf {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: var(--schrift-titel); font-size: 19px; font-weight: 700;
}
.auswertung.gut .auswertung-kopf { color: var(--gruen); }
.auswertung.schwach .auswertung-kopf { color: var(--rot); }

.auswertung p { margin: 0 0 10px; max-width: 64ch; }
.auswertung p:last-child { margin-bottom: 0; }
/* Texte aus app.js tragen \n zwischen den Sätzen: jeder Satz auf eine
   eigene Zeile (Regel vom 22.09.2026). */
.loesung, .hinweis > span, .abschluss .held-text { white-space: pre-line; }
.loesung { font-weight: 700; }
.loesung:empty { display: none; }
.quelle { font-size: 13px; color: var(--text-still); }
.quelle:empty { display: none; }
.quelle a { color: var(--blau-text); text-underline-offset: 2px; }

.karte-fuss {
  margin-top: 22px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.karte-fuss > div { display: flex; gap: 10px; }

/* ----- Eine Spalte, der Knopf am Ende ---------------------------------- */

/* Frage, Antworten, Begründung und Knopf stehen untereinander, der Knopf
   immer am Ende. Bis zum 21.09.2026 stand die Rückmeldung als zweite
   Spalte rechts daneben und am Handy als Blatt von unten: das hielt Weiter
   immer im Bild, las sich aber unruhig. Jetzt rollt die Seite nach dem
   Prüfen, bis Begründung und Weiter zu sehen sind, höchstens so weit, dass
   die Begründung oben anfängt (`pruefen()`, `insBildHolen()`). */
.lauf-frage { display: block; }
.karte-lauf .auswertung { margin-top: 18px; padding: 14px 16px; }
.auswertung-kopf svg { width: 24px; height: 24px; flex: none; }
.auswertung:not(.gut) .i-gut, .auswertung:not(.schwach) .i-schwach { display: none; }
/* Der Knopf steht genau in der Mitte, die Tastenhilfe rechts daneben
   statt darunter: eine Zeile weniger. */
.karte-lauf .karte-fuss {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; margin-top: 18px;
}
.karte-lauf .karte-fuss .knopf { grid-column: 2; min-width: 240px; padding: 12px 28px; }
.karte-lauf .tastenhilfe { grid-column: 3; justify-self: start; margin: 0; white-space: nowrap; }

.tastenhilfe { font-size: 12.5px; color: var(--text-still); margin-left: auto; }
.tastenhilfe:empty { display: none; }
.tastenhilfe kbd {
  font: inherit; font-size: 11.5px;
  border: 1px solid var(--linie-stark); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; margin: 0 2px;
  color: var(--navy); background: var(--weiss);
}

/* ===== Karteikarte ======================================================= */

.begriff-kurz { font-size: 19px; line-height: 1.45; color: var(--text); }
.begriff-lang { color: var(--text-still); }
.begriff-lang:empty { display: none; }

/* Eine Karte mit Vorder- und Rückseite statt eines Streifens über die ganze
   Breite. Die Karte selbst ist der Knopf zum Umdrehen; darunter zwei Kanten,
   die den Stapel andeuten. Keine Schatten, nur Linien. */
#kasten-begriff {
  display: grid; justify-items: center; gap: 22px;
  width: 100%; max-width: 680px; margin-inline: auto; padding-top: 6px;
}
#kasten-begriff .hinweis { justify-self: stretch; margin: 0; }
.stapel { position: relative; width: 100%; margin-bottom: 14px; }
.stapel::before, .stapel::after {
  content: ""; position: absolute; top: 0; height: 100%;
  border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--weiss);
}
.stapel::before { left: 26px; right: 26px; transform: translateY(14px); opacity: .6; }
.stapel::after  { left: 13px; right: 13px; transform: translateY(7px); opacity: .9; }
.karteikarte {
  position: relative; z-index: 1; display: block; width: 100%; padding: 0;
  border: 0; background: none; font: inherit; color: inherit; text-align: left;
  cursor: pointer; perspective: 1600px; border-radius: var(--radius-gross);
}
.karteikarte:focus-visible { outline: 2px solid var(--blau); outline-offset: 4px; }
/* Beide Seiten liegen in derselben Rasterzelle: die Karte ist so hoch wie
   die längere Seite, und nichts läuft über. */
.kk-innen { display: grid; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.karteikarte.umgedreht .kk-innen { transform: rotateY(180deg); }
.kk-seite {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px;
  min-height: 300px; padding: 24px 28px;
  background: var(--weiss); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.kk-hinten { transform: rotateY(180deg); border-top: 4px solid var(--navy); }
/* Vorn steht seit dem 21.09.2026 eine Frage statt des nackten Begriffs:
   länger, deshalb kleiner und schmaler gesetzt als vorher (30 px). */
.kk-begriff {
  margin: auto; max-width: 30ch; text-align: center; text-wrap: balance;
  font-family: var(--schrift-titel); font-size: 25px; font-weight: 700;
  line-height: 1.3; color: var(--navy);
}
.kk-tipp { font-size: 13px; color: var(--text-still); text-align: center; }
.kk-klein { font-family: var(--schrift-titel); font-size: 17px; font-weight: 700; color: var(--navy); }
.kk-bewerten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.kk-wahl { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 11px 16px; }
.kk-wahl span { font-size: 12.5px; font-weight: 500; opacity: .85; }
#kasten-begriff .tastenhilfe { margin: 0; }

/* ===== Abschluss ========================================================= */

/* Links das Ergebnis mit den zwei Wegen weiter, rechts wie es je Bereich
   lief. Beides im ersten Bildschirm, die Fehlerliste darunter. Kein
   Balken: einen Fortschrittsbalken hat nur der laufende Test. */
.abschluss { display: grid; gap: 26px 44px; padding: 26px 28px; }
@media (min-width: 900px) {
  .abschluss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.abschluss h1 { font-size: 40px; line-height: 1.1; margin-bottom: 10px; }
.abschluss .held-text { margin-bottom: 0; }
.abschluss .rekordband { margin-top: 14px; }
.abschluss-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* Mit „Die 4 Fehler wiederholen“ passen beide Knöpfe nur mit etwas
   weniger Innenabstand nebeneinander in die linke Spalte. */
.abschluss-knoepfe .knopf { padding-inline: 20px; }
.abschluss-bereiche .tafel-titel { margin-bottom: 6px; }

.bereichsliste { list-style: none; margin: 0; padding: 0; }
.bereichszeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 112px;
  align-items: baseline; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px;
}
.bereichszeile:last-child { border-bottom: 0; }
.bereichszeile-zahl { color: var(--text-still); white-space: nowrap; }
.bereichszeile .textknopf { justify-self: end; padding: 0; font-size: 13.5px; color: var(--navy); white-space: nowrap; }
.bereichszeile-gut { justify-self: end; font-size: 13px; color: var(--gruen); }

/* ----- Was danebenging ----- */
.fehlerliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fehler { border: 1px solid var(--linie); border-radius: 10px; padding: 15px 18px; }
.fehler-art { display: block; font-size: 12px; color: var(--text-still); margin-bottom: 3px; }
.fehler h3 { font-size: 16.5px; margin-bottom: 10px; }
.fehler-zitat { margin: 10px 0 3px; font-size: 14.5px; }
.antw { display: flex; gap: 10px; margin: 3px 0; font-size: 14.5px; }
.antw b { flex: none; width: 124px; font-weight: 600; color: var(--text-still); white-space: nowrap; }
.antw-du span { color: var(--rot); }
.antw-soll span { color: var(--gruen); font-weight: 600; }
.fehler details { margin-top: 10px; }
.fehler summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy); }
.fehler summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.fehler details p { margin: 8px 0 0; font-size: 14.5px; color: var(--text-still); max-width: 70ch; }

/* ===== Fußzeile ========================================================== */

.fusszeile {
  margin: 0 var(--einzug);
  padding: 16px 0 32px;
  font-size: 13px; color: var(--text-still);
  border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 4px;
}
/* Link zur Überblicksseite, setzt nur das Bauskript der öffentlichen Fassung */
.fusszeile a { color: inherit; text-underline-offset: 2px; }
.fusszeile a:hover { color: var(--blau-text); }

/* ===========================================================================
   DUNKELMODUS
   Werte aus dem Konfigurator übernommen. Die Hausfarben bleiben erkennbar,
   werden aber aufgehellt: Blau und Marineblau haben auf dunklem Grund
   sonst zu wenig Kontrast. Grün und Gelb der Fortschrittsbalken bleiben, wie
   sie sind — sie stehen auf dunklem Grund ohnehin kräftig.
   =========================================================================== */

@media screen {
  :root[data-thema="dunkel"] {
    color-scheme: dark;

    --weiss:        #161D27;
    --grund:        #1F2733;
    --text:         #E7EBF1;
    --text-still:   #A7B2C0;
    --linie:        #2C3644;
    --linie-stark:  #435064;
    --navy:         #A9C8F5;
    --navy-hell:    #8AB8FF;
    --navy-zart:    #1B2A44;
    --blau:            #4D94FF;
    --blau-text:       #8AB8FF;
    --blau-flae-hover: #2A77F0;
    --st-erledigt:  #2BA866;
    --st-begonnen:  #E0A93A;
    --warn-text:    #EADCA4;

    --gruen:        #74C995;
    --gruen-flae:   #1A2E27;
    --rot:          #FF8A80;
    --rot-flae:     #35221F;

    /* Wie im Konfigurator: nur S2 wird im Dunkeln tiefer. */
    --stufe-2:      #3C5A85;
    --schatten-karte: none;
  }

  /* BEIDE Elemente, nicht nur body: der Hintergrund von <html> bemalt die
     gesamte Fläche, <body> nur seinen eigenen Kasten. Blieb html auf
     --grund, blitzte unterhalb des Inhalts ein helleres Feld durch. */
  :root[data-thema="dunkel"],
  :root[data-thema="dunkel"] body { background: #0F141B; }

  :root[data-thema="dunkel"] .ico-sonne { display: block; }
  :root[data-thema="dunkel"] .ico-mond  { display: none; }

  /* Auf dunklem Grund ist ein grüner Knopf mit weißer Schrift zu grell. */
  :root[data-thema="dunkel"] .knopf-gewusst { background: #1E7A4C; color: #fff; }
  :root[data-thema="dunkel"] .knopf-gewusst:hover { background: #26915B; }
}

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

@media (max-width: 860px) {
  :root { --rand: 16px; }
  .kopfleiste { gap: 14px; padding: 10px 16px; }
  .reiter { order: 3; width: 100%; gap: 0; }
  .reiter-knopf { flex: 1; padding: 0 6px; font-size: 13px; }
  .mitte { padding-block: 20px 48px; }
  .fusszeile { padding-bottom: 30px; }
  .buehne h1 { font-size: 32px; }
  .buehne-text { font-size: 16px; }
  .verlauf-liste { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .lernen-kopf .knopf-gross { width: 100%; }
  /* Am Handy wird getippt, nicht gezielt: der Schalter wird größer. */
  .thema-knopf { width: 38px; height: 38px; }
  .ico-thema { width: 19px; height: 19px; }
}

@media (max-width: 560px) {
  .laufleiste { gap: 12px; }
  .held h1 { font-size: 24px; }
  .karte-lauf { padding: 20px 17px 18px; }
  .kk-seite { min-height: 240px; padding: 20px; }
  .kk-begriff { font-size: 20px; }
  .karte-lauf .karte-fuss { grid-template-columns: 1fr; }
  .karte-lauf .karte-fuss .knopf { grid-column: 1; width: 100%; min-width: 0; }
  .karte-lauf h2 { font-size: 19px; }
  .zuordnung-zeile { grid-template-columns: 1fr; gap: 8px; }
  .knopf-start { width: 100%; min-width: 0; }
  .abschluss { padding: 20px 18px; }
  .abschluss h1 { font-size: 32px; }
  .abschluss-knoepfe .knopf { flex: 1; padding-inline: 14px; }
  .stufendialog form { padding: 20px 18px 18px; }
  .stufenoption { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .stufenoption .stufen-punkte { display: none; }
  .stufendialog h2 { font-size: 20px; }
  .einstell-wort { display: none; }
  .einstell-knopf { padding: 7px; }
  .bereichswahl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bereichsoption { padding: 8px 12px; }
  .einstell-zeile { flex-wrap: wrap; gap: 8px 14px; }
  /* Pfeile übereinander: nebeneinander blieben dem Text keine 160 px, und
     „Höchstspannungsnetz" brach in vier Zeilen um. */
  .reihenfolge-zeile { gap: 8px; padding-right: 10px; }
  .reihenfolge-knoepfe { flex-direction: column; }
  /* Am Telefon steht der Platz unter dem Zeilentext, rechts daneben
     blieben dem Text sonst rund 130 px. */
  .reihenfolge-soll { grid-column: 3; text-align: left; margin-top: -4px; }
  .bereichszeile { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .bereichszeile .textknopf, .bereichszeile-gut { grid-column: 1 / -1; justify-self: start; }
  .tastenhilfe { display: none; }
  .antw { flex-direction: column; gap: 0; }
  .antw b { width: auto; }
}

/* ============================================================================
 * ZURÜCK ZUR STARTSEITE
 * ----------------------------------------------------------------------------
 * Oben links in der Kopfleiste, vor dem Markenblock. Nur die öffentliche
 * Fassung trägt den Link: neben der lokalen Fassung gibt es keine Startseite,
 * auf die er zeigen könnte. Eingesetzt wird er deshalb beim Bauen, von
 * werkzeuge/oeffentliche-fassung-bauen.js. Die Regel steht trotzdem hier,
 * damit sie mit allen anderen gepflegt wird und nicht im Bauskript versauert.
 *
 * Seit dem 21.09.2026 abends ist der Link das Logo der Musterstadt Netze, wie
 * im Einarbeitungsplan. Davor war es ein Knopf mit Pfeil und „Alle Projekte".
 * Das Bauskript bettet das SVG ein, es zeichnet in currentColor und folgt so
 * --navy: im dunklen Design wird es hellblau wie der Markenblock daneben.
 * ========================================================================== */

/* Unter dem Mauszeiger und im Fokus wie der Markenblock. Der negative Rand
   links setzt die Balken bündig an den Einzug, wie beim Markenblock in der
   lokalen Fassung, wo er vorne steht. */
.zur-startseite {
  display: flex; align-items: center; flex: none;
  /* 3 px statt 4: mit 30 px Logo genau 36 px, so hoch wie die Reiter.
     Sonst bestimmte das Logo die Höhe der Kopfleiste. */
  padding: 3px 6px; margin-left: -6px; border-radius: 6px;
  color: var(--navy); text-decoration: none;
}
.zur-startseite:hover { background: var(--grund); }
.zur-startseite:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Höhe wie .logo im Einarbeitungsplan, 30 px und am schmalen Fenster 26.
   Die Breite steht fest daneben, im Verhältnis 170 zu 40 aus der viewBox:
   ohne sie darf ein Browser das SVG auf seine Vorgabebreite ziehen. */
.zur-startseite svg { display: block; width: 127.5px; height: 30px; }

@media (max-width: 860px) {
  .zur-startseite svg { width: 110.5px; height: 26px; }
}

/* Unter 360 px reicht die Zeile mit 26 px nicht mehr, der Themenknopf
   rutschte in eine zweite Zeile. Der alte Knopf „Alle Projekte" passte
   dort noch, er war 15 px schmaler. */
@media (max-width: 359px) {
  .zur-startseite svg { width: 93.5px; height: 22px; }
}

/* Auf dem Papier hat ein Zurück-Link nichts verloren. */
@media print { .zur-startseite { display: none !important; } }

/* ----- Textknopf: leise, für Nebenwege ----- */
.textknopf {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-still);
  text-decoration: underline; text-underline-offset: 3px;
}
.textknopf:hover { color: var(--blau-text); }
.textknopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ===========================================================================
   Bestwert: ein Band in der Auswertung, wenn ein früherer geschlagen ist
   =========================================================================== */

.rekordband {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--st-erledigt);
  background: var(--gruen-flae);
  color: var(--gruen);
  font-weight: 700;
  border-radius: 0 8px 8px 0;
}

.listen-titel { font-size: 17px; margin: 0 0 0 2px; }

/* ===========================================================================
   Fallgeschichte: die Lage bleibt über alle Schritte stehen
   =========================================================================== */

.lage {
  background: var(--grund);
  border-left: 4px solid var(--navy-hell);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-bottom: 18px;
  color: var(--text);
  max-width: 66ch;
}

/* ===========================================================================
   Aussagen einzeln bewerten
   =========================================================================== */

.aussagen { display: grid; gap: 9px; }

.aussage-zeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 15px;
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
}
.aussage-zeile.ist-richtig { border-color: var(--gruen); background: var(--gruen-flae); }
.aussage-zeile.ist-falsch  { border-color: var(--rot);   background: var(--rot-flae); }

.aussage-text { flex: 1; min-width: 200px; line-height: 1.45; }

.aussage-wahl { display: flex; gap: 0; flex: none; }

.aussage-knopf {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--linie-stark);
  background: var(--weiss); color: var(--text-still);
  cursor: pointer;
}
.aussage-knopf:first-child { border-radius: 8px 0 0 8px; }
.aussage-knopf:last-child { border-radius: 0 8px 8px 0; border-left-width: 0; }
.aussage-knopf:hover:not([disabled]) { border-color: var(--navy-hell); color: var(--navy); }
.aussage-knopf.gewaehlt { background: var(--navy-flae); border-color: var(--navy-flae); color: #fff; }
.aussage-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.aussage-knopf[disabled] { cursor: default; }

/* Nach dem Prüfen: die richtige Einschätzung wird markiert, auch wenn sie
   nicht gewählt war. Ohne das bliebe offen, was man hätte wählen sollen. */
.aussage-knopf.ist-loesung {
  border-color: var(--gruen); color: var(--gruen);
  box-shadow: inset 0 0 0 1px var(--gruen);
}
.aussage-knopf.gewaehlt.ist-loesung { background: var(--gruen); border-color: var(--gruen); color: #fff; }

/* ===========================================================================
   Fristenrechner
   =========================================================================== */

.frist {
  display: grid;
  gap: 14px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 18px 20px;
}

.frist-bezug { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.frist-bezug strong { font-size: 17px; color: var(--navy); }

.frist-etikett {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-still);
}

.frist-regel {
  font-size: 14px; color: var(--text-still);
  border-left: 3px solid var(--blau); padding-left: 11px;
}

.frist-aufgabe { display: grid; gap: 8px; }
.frist-aufgabe label { font-weight: 700; color: var(--navy); }
.frist-aufgabe input { max-width: 230px; font-size: 16px; }
.frist-aufgabe input.ist-richtig { border-color: var(--gruen); background: var(--gruen-flae); }
.frist-aufgabe input.ist-falsch  { border-color: var(--rot);   background: var(--rot-flae); }

/* ===========================================================================
   Schaubild

   Alle Farben kommen von hier, keine im SVG-Markup. Sonst bliebe das Bild im
   Dunkelmodus hell.
   =========================================================================== */

.schaubild { margin: 0; }

.schaubild figcaption {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-still);
  margin-bottom: 10px;
}

.schaubild svg { width: 100%; height: auto; display: block; }

.schaubild-fuss { font-size: 13px; color: var(--text-still); margin: 10px 0 0; }

.bild-linie { stroke: var(--linie-stark); stroke-width: 2; }

.bild-stelle { cursor: pointer; }
.bild-stelle .bild-feld {
  fill: var(--weiss); stroke: var(--linie-stark); stroke-width: 1.5;
  transition: stroke .12s, fill .12s;
}
.bild-stelle:hover .bild-feld { stroke: var(--navy-hell); }
.bild-stelle:focus-visible { outline: none; }
.bild-stelle:focus-visible .bild-feld { stroke: var(--navy-hell); stroke-width: 3; }

.bild-stelle.gewaehlt .bild-feld { stroke: var(--navy); stroke-width: 3; }
.bild-stelle.ist-richtig .bild-feld { stroke: var(--gruen); stroke-width: 3; fill: var(--gruen-flae); }
.bild-stelle.ist-falsch  .bild-feld { stroke: var(--rot);   stroke-width: 3; fill: var(--rot-flae); }

.bild-kreis { fill: var(--grund); stroke: var(--linie-stark); stroke-width: 1.5; }
.bild-stelle.gewaehlt .bild-kreis { fill: var(--navy); stroke: var(--navy); }
.bild-stelle.ist-richtig .bild-kreis { fill: var(--gruen); stroke: var(--gruen); }
.bild-stelle.ist-falsch  .bild-kreis { fill: var(--rot);   stroke: var(--rot); }

.bild-nr {
  font-family: var(--schrift); font-size: 13px; font-weight: 800;
  fill: var(--navy); text-anchor: middle;
}
.bild-stelle.gewaehlt .bild-nr,
.bild-stelle.ist-richtig .bild-nr,
.bild-stelle.ist-falsch .bild-nr { fill: #fff; }

.bild-rollen {
  font-family: var(--schrift); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; fill: var(--blau-text);
}
.bild-text { font-family: var(--schrift); font-size: 13.5px; fill: var(--text); }
.bild-frist { font-family: var(--schrift); font-size: 11px; fill: var(--text-still); }

/* ===========================================================================
   Bewegung: wer sie abbestellt hat, bekommt keine
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   Dunkelmodus für die neuen Teile
   =========================================================================== */

@media screen {
  :root[data-thema="dunkel"] .rekordband { color: #A6E48A; }
  :root[data-thema="dunkel"] .bild-nr { fill: var(--navy); }
  :root[data-thema="dunkel"] .bild-stelle.gewaehlt .bild-nr,
  :root[data-thema="dunkel"] .bild-stelle.ist-richtig .bild-nr,
  :root[data-thema="dunkel"] .bild-stelle.ist-falsch .bild-nr { fill: #0F141B; }
  :root[data-thema="dunkel"] .aussage-knopf.gewaehlt.ist-loesung { color: #0F141B; }
}

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

@media (max-width: 560px) {
  .aussage-zeile { gap: 10px; }
  .aussage-wahl { width: 100%; }
  .aussage-knopf { flex: 1; }
  .bild-text { font-size: 15px; }
  .bild-frist { display: none; }
}