/* ===========================================================================
   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);

  --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; }
/* Dasselbe für Texte, die kein <p> sind */
.lage, .glossar-eintrag dd, .hinweis > span,
.stufenoption-text span, .antw span, .fusszeile span { text-wrap: pretty; }
/* Ein Satz je Zeile: satzAnhaengen() in app.js setzt jeden Satz in einen
   eigenen Block, feste Texte in index.html tun es von Hand. pretty schützt
   nur die letzte Zeile des ganzen Absatzes, balance bricht jeden Satz für
   sich um, ohne Rest von ein, zwei Wörtern. Die Regel steht nach der
   darüber, damit sie „.antw span“ bei gleicher Spezifität schlägt. */
span.satz { display: block; text-wrap: balance; }
/* Antworten, Aussagen, Zeilen, Lösung und Quelle sind keine Satz-Blöcke, sollen
   aber ebenso ausgewogen umbrechen. Mit pretty oder ohne Regel blieben am Handy
   ein, zwei Wörter allein in der letzten Zeile (Optikprüfung O11, 19.10.2026;
   gemessen über je vier Fragen jeder Form bei 1440, 1024 und 390 px). */
.wahl-punkt > span, .aussage-text, .zuordnung-links, .reihenfolge-zeile > span,
.fe-optionen li, .fe-schritte li, .fe-aussage, .fe-paar dt, .fe-paar dd,
.loesung, .quelle { text-wrap: balance; }

/* 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). Seit
   dem 19.10.2026 12 px statt 10: nichts im Quiz steht kleiner (Optikprüfung
   O10). Die Kopfleiste bleibt gleich hoch und bricht nicht um, weil der Stapel
   mit 17 + 3 + 12 px noch unter den 36 px der Reiter und Knöpfe liegt. */
.marke-autor {
  font-size: 12px; 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;
  /* Bricht ein Knopftext um („Die 7 Fehler wiederholen“), dann ausgewogen. */
  text-wrap: balance;
}
.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-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; }

.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: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blau-text);
  margin-bottom: 5px;
  text-wrap: balance;
}

/* ===== 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: 12px; 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; }

/* ===== Seitenkopf ======================================================== */

/* Überschrift mit dem einen roten Knopf daneben, wie über der Fragenliste.
   Bis zum 18.10.2026 stand derselbe Kopf über der Lernseite. */
.seiten-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.seiten-kopf .held-text { margin-bottom: 0; max-width: none; }

/* Vorbehalt an einem ungeprüften Bereich, in den Einstellungen zum Test */
.bereich-vorbehalt { color: var(--warn-text); }

/* ===== 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. Die Chips sind kleine
   Pillen, 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: balance; }
.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: 12px; font-weight: 700; color: var(--warn-text); }

/* Aufgeklappt stehen unter der Frage zwei Knöpfe, hinter „Lösung zeigen“ die
   Lösung (seit 19.10.2026). Die Knöpfe sind kleiner als im Test, sie sind
   Teil einer Liste. */
.fe-unten {
  padding: 12px 18px 16px 42px; border-top: 1px solid var(--linie);
}
.fe-aktionen { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.fe-aktionen .knopf { padding: 7px 16px; font-size: 14.5px; }
.fe-loesung { margin-top: 14px; font-size: 14.5px; }
.fe-loesung > :first-child { margin-top: 0; }
/* Unter dem Schaubild stand die Zeile „Richtig“ 3 px darunter (Abnahme 19.10.2026). */
.fe-loesung .schaubild { margin-bottom: 12px; }

.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-unten { 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: 12px;
  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);
}

/* ===== 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; }
}

/* ===== 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)); }
  .seiten-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; }
}

/* Seit der Autor mit 12 statt 10 px steht (19.10.2026), ist der Markenblock
   19 px breiter. Ohne diese Regel rutschte der Themenknopf bei 340 bis 374 px
   in eine zweite Zeile, und die Kopfleiste wurde 50 px höher (gemessen). So
   bleibt sie einzeilig und gleich hoch: etwas weniger Abstand zwischen den
   Teilen (nur seitlich, der Zeilenabstand bleibt) und ein kürzerer Strich. */
@media (max-width: 400px) {
  .kopfleiste { column-gap: 10px; }
  .marke-strich { width: 18px; }
}

@media (max-width: 560px) {
  .laufleiste { gap: 12px; }
  .held h1 { font-size: 24px; }
  .karte-lauf { padding: 20px 17px 18px; }
  .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;
}

/* ===========================================================================
   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: 12px; 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

   Seit dem 19.10.2026 eine Liste aus echtem Text statt eines SVG. Das SVG war
   640 Einheiten breit und schrumpfte am Handy mit: bei 390 px standen die
   Rollen in 5,5 px und der Text in 7,5 px (Optikprüfung O5). Alle Farben
   kommen aus den Variablen, so folgt das Bild dem Dunkelmodus von selbst.
   Zwei Arten: im Test Knöpfe (`button.bild-stelle`), in der Lösung der
   Fragenliste Blöcke (`div.bild-stelle`), die sich nicht bedienen lassen.
   =========================================================================== */

.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-fuss { font-size: 13px; color: var(--text-still); margin: 10px 0 0; }

.schaubild-liste {
  --bild-kreis: 26px; --bild-pad: 14px; --bild-rand: 1px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}

/* Die Linie zwischen zwei Kreisen läuft durch die Lücke zwischen den Kästen,
   genau unter der Mitte des Kreises. */
.schaubild-liste > li { position: relative; }
.schaubild-liste > li:not(:last-child)::after {
  content: ""; position: absolute; top: 100%; width: 2px; height: 14px;
  left: calc(var(--bild-rand) + var(--bild-pad) + var(--bild-kreis) / 2 - 1px);
  background: var(--linie-stark);
}

/* Am Rechner: Kreis links, darüber die Rollen, darunter der Text, die Frist
   rechts oben. Am Handy steht die Frist unter dem Text (siehe unten). */
.bild-stelle {
  width: 100%; margin: 0;
  display: grid; align-items: center; column-gap: 12px; row-gap: 2px;
  grid-template-columns: var(--bild-kreis) minmax(0, 1fr) auto;
  grid-template-areas: "kreis rollen frist" "kreis text text";
  padding: 10px var(--bild-pad);
  font: inherit; text-align: left; color: var(--text);
  background: var(--weiss);
  border: var(--bild-rand) solid var(--linie-stark); border-radius: 8px;
}
button.bild-stelle { cursor: pointer; }
button.bild-stelle:hover:not(:disabled) { border-color: var(--navy-hell); }
button.bild-stelle:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
button.bild-stelle:disabled { cursor: default; }

/* Die Auswahl ist blau, nicht rot: Rot heißt im Lauf nur falsch. Der Rahmen
   wird mit einem inneren Schatten dicker, damit der Kasten nicht springt. */
.bild-stelle.gewaehlt { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.bild-stelle.ist-richtig {
  border-color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); background: var(--gruen-flae);
}
.bild-stelle.ist-falsch {
  border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); background: var(--rot-flae);
}

.bild-kreis {
  grid-area: kreis; align-self: center;
  width: var(--bild-kreis); height: var(--bild-kreis); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grund); border: 1.5px solid var(--linie-stark);
  font-size: 13px; font-weight: 800; line-height: 1; color: var(--navy);
}
/* Die Ziffer im gefüllten Kreis steht in der Farbe der Fläche, im Dunkeln also
   dunkel auf dem hellen Kreis. */
.bild-stelle.gewaehlt .bild-kreis { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.bild-stelle.ist-richtig .bild-kreis { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.bild-stelle.ist-falsch .bild-kreis { background: var(--rot); border-color: var(--rot); color: var(--weiss); }

.bild-rollen {
  grid-area: rollen;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  letter-spacing: .04em; color: var(--blau-text);
}
.bild-pfeil { margin: 0 .5em; }
.bild-text { grid-area: text; font-size: 15px; line-height: 1.4; color: var(--text); text-wrap: balance; }
.bild-frist {
  grid-area: frist; justify-self: end; text-align: right;
  font-size: 13px; line-height: 1.3; color: var(--text-still); text-wrap: balance;
}

/* ===========================================================================
   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"] .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; }
  /* Schaubild: die Frist steht unter dem Text, nicht rechts oben */
  .schaubild-liste { --bild-pad: 12px; }
  .bild-stelle {
    grid-template-columns: var(--bild-kreis) minmax(0, 1fr);
    grid-template-areas: "kreis rollen" "kreis text" "kreis frist";
    column-gap: 10px;
  }
  .bild-frist { justify-self: start; text-align: left; }
}