/* ============================================================
   Meistertrainer — gemeinsame Stilgrundlage
   Helle, professionelle Farbwelt. CSS-Variablen nach PLAN.md Abschnitt 11.
   8-px-Raster, System-Schriftstapel, Touch-Ziele >= 44 px.
   ============================================================ */

:root {
  /* Grundfarben — Etappe "Feinschliff" (24.09.2026, nur app-test): kuehles iOS-Grau statt
     des vorherigen warmen Off-White, Suchfeld/gedaempfte Flaeche folgen (siehe unten) - Ziel
     ist die vertraute helle iOS-Palette (Einstellungen-App), keine eigene Hausfarbe. */
  --farbe-grund: #F2F2F7;
  --farbe-flaeche: #FFFFFF;
  --farbe-text: #1C1C1E;
  --farbe-text-schwach: #6E6E73;
  --farbe-rand: rgba(60, 60, 67, 0.13);
  --farbe-akzent: #17335C;
  --farbe-akzent-flaeche: #E7EDF5;
  --farbe-akzent-tief: #0E2340;

  /* Suchfeld: gedaempftes iOS-Grau statt Beige (Etappe "Feinschliff") - dieselbe Formel wie
     Apples eigenes Suchfeld (rgba(118,118,128,.12) auf hellem Grund). */
  --farbe-suchfeld: rgba(118, 118, 128, 0.12);

  /* Radien: einheitlich 12 (Listen/Karten), 14 (Knoepfe/Antworten), 20 (grosse Flaechen) -
     Etappe "Feinschliff", ersetzt die vorherige Zweiteilung 12/8. */
  --radius-knopf: 14px;
  --radius-gross: 20px;

  /* Konzept-Etappe 1 "Sofort spuerbar" (24.09.2026, nur app-test):
     G2 - kraeftigere Variante von --farbe-text-schwach, ausschliesslich fuer 12-13px-Texte.
     F7 - eigener gedaempfter Ton fuer falsche Antworten, ausdruecklich keine Ampelfarbe.
     Beide Werte in der Etappe "Feinschliff" ans neue kuehle Grau angeglichen (waren waermere
     Beige-/Sandtoene, siehe Git-Historie). */
  --farbe-text-schwach-klein: #6E6E73;
  --farbe-flaeche-gedaempft: #E5E5EA;

  /* Ampelfarben — ausschliesslich fuer die Lernampel, sonst nirgends verwendet */
  --ampel-rot: #D64545;
  --ampel-gelb: #E0A526;
  --ampel-gruen: #3A8F4C;
  --ampel-rot-flaeche: #FBEAEA;
  --ampel-gelb-flaeche: #FCF3E1;
  --ampel-gruen-flaeche: #E7F2E9;

  /* Konzept-Etappe 4 "Milchglas und Dunkelmodus" (24.09.2026, nur app-test):
     eigene Variablen fuer Text auf Akzentflaeche und fuer die beiden dunklen Text-Toene auf
     Ampel-Gelb/-Rot-Flaeche - vorher direkt als Hex im Code, jetzt zentral, damit der
     Dunkelmodus unten sie einzeln umbelegen kann, ohne die Werte selbst zu aendern. */
  --farbe-auf-akzent: #FFFFFF;
  --farbe-schimmer: #F0EEE9;
  --ampel-gelb-text: #8A6410;
  --ampel-gelb-text-tief: #6B4E10;
  --ampel-rot-text-tief: #7A2222;

  /* N2 Milchglas: durchscheinender Grund und weiche Kante fuer Kopf- und Tab-Leiste. */
  --farbe-glas: rgba(255, 255, 255, 0.72);
  --farbe-glas-rand: rgba(228, 225, 218, 0.6);

  /* V5 (Konzept-Etappe 5, 24.09.2026): eigener Ton fuer eine unumkehrbare Aktion im
     Bestaetigungsblatt (js/verwaltung.js zeigeBestaetigung()) - bewusst KEINE Ampelfarbe, die
     bleibt ausschliesslich der Lernampel vorbehalten (siehe erzeugeSvgSchloss-Kommentar). */
  --farbe-gefahr: #B3261E;
  --farbe-gefahr-flaeche: #FBEAEA;

  /* Raster und Formen */
  --raster: 8px;
  --radius: 12px;
  --radius-klein: 8px;

  /* Schrift */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Tab-Leiste */
  --tableiste-hoehe: 64px;

  color-scheme: light dark;
}

/* G1 Dunkelmodus (Konzept-Etappe 4, 24.09.2026): folgt ausschliesslich der Systemeinstellung
   des Geraets, kein eigener Umschalter. Werte aus der Konzeptvorlage (design/apple-konzept.html,
   Abschnitt 3.4) fuer die dort tabellierten Variablen; die uebrigen (Ampelfarben, neue Text-
   Toene aus Etappe 4 oben, Milchglas) sind eigene, gedaempfte bzw. aufgehellte Ableitungen, an
   den Werten aus der Vorlage ausgerichtet - Kontrast siehe Etappen-Bericht. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Etappe "Feinschliff" (24.09.2026): reines Schwarz als Grund, Karten in Apples
       Standard-Kartenton #1C1C1E - sinngemaess aus Etappe G uebernommen, siehe Auftrag. */
    --farbe-grund: #000000;
    --farbe-flaeche: #1C1C1E;
    --farbe-text: #F2F2F7;
    --farbe-text-schwach: #8E8E93;
    --farbe-text-schwach-klein: #8E8E93;
    --farbe-rand: rgba(84, 84, 88, 0.4);
    --farbe-akzent: #8FB0DD;
    --farbe-akzent-flaeche: #1C2A3E;
    --farbe-akzent-tief: #7CA0CE;

    --farbe-suchfeld: rgba(118, 118, 128, 0.24);

    --farbe-auf-akzent: #0E2340;
    --farbe-flaeche-gedaempft: #2C2C2E;
    --farbe-schimmer: #2A2E33;

    /* Ampelfarben bleiben erkennbar, nur leicht gedaempft/aufgehellt fuer Dunkelgrund. */
    --ampel-rot: #E4685A;
    --ampel-gelb: #E8B94F;
    --ampel-gruen: #4FAE64;
    --ampel-rot-flaeche: #3A2224;
    --ampel-gelb-flaeche: #3A2E16;
    --ampel-gruen-flaeche: #1C2A1F;
    --ampel-gelb-text: #F0CE86;
    --ampel-gelb-text-tief: #E8C173;
    --ampel-rot-text-tief: #F0B4AC;

    --farbe-glas: rgba(28, 31, 35, 0.72);
    --farbe-glas-rand: rgba(46, 50, 55, 0.6);

    --farbe-gefahr: #E4685A;
    --farbe-gefahr-flaeche: #3A2224;
  }
}

* { box-sizing: border-box; }

/* Eigene display-Regeln (z. B. .ladezustand{display:flex}) haben dieselbe
   Spezifitaet wie die UA-Regel [hidden]{display:none} und wuerden sie sonst
   je nach Reihenfolge ueberstimmen - deshalb hier ausdruecklich erzwingen. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Verhindert Doppeltipp-Zoom (Auftrag "Rueckmeldungen 22.09.", Punkt 4: "alle Fenster fest
     verankert") - ergaenzt maximum-scale=1/user-scalable=no im viewport-Meta-Tag jeder Seite
     und js/zoomsperre.js (faengt zusaetzlich die gesture-Ereignisse ab, die Safari auf dem
     iPad trotz user-scalable=no noch ausloest). */
  touch-action: manipulation;
}

body {
  margin: 0;
  padding: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.45;
  /* G4 (Konzept-Etappe 5, 24.09.2026, nur app-test): Grundschrift an die Systemtextgroesse
     koppeln. -apple-system-body ist eine Safari-Kurzform, die Familie/Groesse/Zeilenhoehe an
     die iOS-Einstellung "Groesserer Text" bindet - andere Browser kennen den Wert nicht, die
     ganze Deklaration wird dort ignoriert (Rueckfall bleiben die drei Zeilen oben). Steht bewusst
     NACH ihnen: das font-Kurzzeichen ersetzt in Safari alle drei auf einmal, umgekehrt wuerden
     sie es dort wieder ueberschreiben. rem-Angaben (z. B. .fragekarte__text, .antwort-option)
     folgen dieser Grundschrift automatisch mit; 1-px-Linien und 44-px-Tippflaechen bleiben px. */
  font: -apple-system-body;
  -webkit-font-smoothing: antialiased;
}

/* Sichtbarer Fokusring — kein user-scalable=no, keine unterdrueckten Foki */
:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

/* Keine Unterstreichungen mehr (Betreiber, 21.09.2026) - Links bleiben ueber die Hauptfarbe
   erkennbar, der Tastaturfokus bleibt sichtbar (:focus-visible oben). Absichtlich eine
   einzelne Regel ohne :hover/:focus/:active, damit Klassen wie .kopfzeile__abmelden (eigene
   Farbe je Zustand, u. a. in verwaltung.html) nicht per Spezifitaet ueberschrieben werden. */
a { color: var(--farbe-akzent); text-decoration: none; }

button {
  font-family: inherit;
  font-size: inherit;
}

/* Tabellarische Ziffern fuer Statistik- und Rechenfragen-Zahlen */
.ziffern {
  font-variant-numeric: tabular-nums;
}

/* ============================================================ Wortmarke */

.wortmarke {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--farbe-text);
}

.wortmarke span {
  color: var(--farbe-akzent);
}

/* ============================================================ Formulare */

.formular {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.feld label {
  font-size: 14px;
  font-weight: 600;
  color: var(--farbe-text);
}

.feld input {
  min-height: 48px;
  padding: 0 calc(var(--raster) * 2);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: 16px;
}

.feld input:invalid.beruehrt {
  border-color: var(--ampel-rot);
}

.fehlertext {
  font-size: 14px;
  color: var(--ampel-rot);
  min-height: 20px;
}

.hinweistext {
  font-size: 14px;
  color: var(--farbe-text-schwach);
  line-height: 1.5;
}

/* Positionshinweis im Rueckblick (quiz.js) - ohne den Absatz-Standardabstand des Browsers,
   der beim knappen Platz auf 375x812 unnoetig Zeilenhoehe gekostet haette. */
.rueckblick-position {
  margin: 0 0 calc(var(--raster) * 0.5) 0;
}

/* ============================================================ Abstaende: Felder, Knoepfe, Karten */

/* Allgemeine Abstandsregel (Auftrag Betreiber 21.09.2026: "Buttons und Felder liegen optisch
   ineinander, es muss Platz dazwischen bleiben"). Greift ueberall dort, wo .feld/.rechnen-feld/
   .freitext-eingabe/.antwort-liste unmittelbar von einem weiteren Feld oder einer Schaltflaeche
   gefolgt werden, OHNE dass ein umgebender Flex-Container (.formular, .antwortbereich, ...)
   schon selbst einen gap setzt - z. B. der Passwortbereich in profil.js (.feld-Bloecke direkt
   in <details>, kein .formular) oder die Rechnen-/Freitextfrage im Quiz. */
/* .feld + .feld/.schaltflaeche NICHT global, sondern gezielt auf Container ohne eigenen
   Flex-/Grid-gap: .formular (gap 16px), .melde-formular (gap 16px) und .filterzeile (grid-gap
   8px, .feld liegen dort nebeneinander in Spalten - ein globales margin-top wuerde die Spalten
   gegeneinander verschieben) haben bereits einen passenden Abstand und wuerden sich bei einer
   globalen Regel verdoppeln bzw. verschieben. Betroffen ist nur .profil-details (profil.js,
   Passwortbereich: .feld-Bloecke direkt im <details>, kein umgebender gap-Container). */
.profil-details > .feld + .feld,
.profil-details > .feld + .schaltflaeche,
.profil-details > .feld + .schaltflaeche--sekundaer {
  margin-top: calc(var(--raster) * 2); /* mind. 16px zwischen Feld/Feldgruppe und folgendem Feld/Knopf */
}

.rechnen-feld + .schaltflaeche,
.rechnen-feld + .schaltflaeche--sekundaer,
.freitext-eingabe + .schaltflaeche,
.freitext-eingabe + .schaltflaeche--sekundaer,
.antwort-liste + .schaltflaeche,
.antwort-liste + .schaltflaeche--sekundaer {
  margin-top: calc(var(--raster) * 2); /* mind. 16px zwischen Feld/Feldgruppe und folgendem Knopf (addiert sich zum 4px-gap von .antwortbereich auf mind. 16px) */
}

/* Knopf/Knopfgruppe -> folgende Karte/Liste, mind. 16px (Auftrag: "themen.html: Knopf
   'Weiterlernen'/'Heute lernen' -> erste Fachkarte 1px"). #heute-lernen-bereich (themen.js)
   hat bisher keinen eigenen Abstand nach unten gehabt - der 1px kam allein aus Zeilenhoehen-
   Rundung, nicht aus einer Regel. */
.heute-lernen-bereich {
  margin-bottom: calc(var(--raster) * 2);
}

/* Hauptknopf "Heute lernen"/"Weiterlernen": volle Breite, darf nie blass/nebensaechlich
   wirken (Auftrag "Feinschliff") - .schaltflaeche liefert bereits kraeftigen Akzent/52px/
   Radius 14/weisse 17px-Schrift, hier nur die Breite. */
.heute-lernen-bereich .schaltflaeche,
.heute-lernen-bereich .schaltflaeche--sekundaer {
  width: 100%;
}

/* Knoepfe nebeneinander: .melde-dialog__knoepfe (gap 8px) und .rueckmeldebereich__knoepfe
   (gap 12px) haben bereits einen eigenen gap >= 8px, siehe die jeweiligen Regeln weiter unten -
   keine weitere Aenderung noetig, keine anderen Knopf-nebeneinander-Gruppen im Bestand. */

/* ============================================================ Schaltflaechen */

.schaltflaeche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Etappe "Feinschliff": 52px/Radius 14/17px semibold - Hauptknopf-Masse aus dem Auftrag,
     gelten hier fuer alle Schaltflaechen (einheitliche Groesse), Radius siehe :root. */
  min-height: 52px;
  min-width: 44px;
  padding: 0 calc(var(--raster) * 3);
  border: none;
  border-radius: var(--radius-knopf);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.schaltflaeche:hover { background: var(--farbe-akzent-tief); }
.schaltflaeche:active { background: var(--farbe-akzent-tief); transform: scale(0.97); }

/* .schaltflaeche steht auch als <a> im Einsatz (z.B. die Knoepfe "Heute lernen"/"Weiterlernen"
   auf themen.html) - ohne diese Regel unterstreicht der Browser den Linktext in jedem Zustand
   (Korrektur 21.09.2026, Opus' Browsertest: "Weiterlernen" war unterstrichen, "Heute lernen"
   sichtbar daneben nicht getestet, aber vom selben Fehler betroffen). */
.schaltflaeche:link,
.schaltflaeche:visited,
.schaltflaeche:hover,
.schaltflaeche:focus,
.schaltflaeche:active {
  text-decoration: none;
}

.schaltflaeche--sekundaer {
  background: transparent;
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-akzent);
}

.schaltflaeche--sekundaer:hover { background: var(--farbe-akzent-flaeche); }
.schaltflaeche--sekundaer:active { background: var(--farbe-akzent-flaeche); }

/* V5: Bestaetigen-Knopf einer unumkehrbaren Aktion im Bestaetigungsblatt (js/verwaltung.js
   zeigeBestaetigung(), optionen.gefahr) - rot beschriftet, aber eigene Variable statt einer
   Ampelfarbe (siehe --farbe-gefahr oben). */
.schaltflaeche--gefahr {
  background: transparent;
  color: var(--farbe-gefahr);
  border: 1px solid var(--farbe-gefahr);
}

.schaltflaeche--gefahr:hover { background: var(--farbe-gefahr-flaeche); }
.schaltflaeche--gefahr:active { background: var(--farbe-gefahr-flaeche); }

.verweis-still {
  color: var(--farbe-text-schwach);
  text-decoration: none;
  font-size: 14px;
}

/* ============================================================ Kopfzeile */

.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--raster) * 2) calc(var(--raster) * 2);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 2);
  /* N2 Milchglas (Konzept-Etappe 4): durchscheinend statt deckend, die harte Linie wird zur
     weichen Ein-Pixel-Kante unter dem Glas. Deckende Rueckfaelle weiter unten im Dokument. */
  background: var(--farbe-glas);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 0 var(--farbe-glas-rand);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopfzeile__kuerzel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-weight: 700;
  font-size: 14px;
}

.kopfzeile__mitte {
  display: flex;
  align-items: center;
  gap: var(--raster);
}

.kopfzeile__abmelden {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--raster);
  color: var(--farbe-text-schwach);
  font-size: 14px;
  text-decoration: none;
}

/* ============================================================ Hauptbereich */

main {
  padding: calc(var(--raster) * 2);
  padding-bottom: calc(var(--tableiste-hoehe) + env(safe-area-inset-bottom, 0px) + var(--raster) * 3);
  max-width: 720px;
  margin: 0 auto;
}

.anmeldeseite {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--raster) * 3) calc(var(--raster) * 3);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 3);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--raster) * 3);
  max-width: 420px;
  margin: 0 auto;
  gap: calc(var(--raster) * 4);
}

/* ============================================================ Filterzeile */

.filterzeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raster);
  margin-bottom: calc(var(--raster) * 3);
}

.filterzeile select {
  min-height: 44px;
  padding: 0 var(--raster);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: inherit;
  /* 16px statt 14px (Auftrag "Rueckmeldungen 22.09.", Punkt 4) - sonst zoomt iOS beim
     Antippen trotz user-scalable=no selbst hinein. */
  font-size: 16px;
}

/* ============================================================ Fach-Gruppe und Themenkacheln */

.fach-gruppe {
  margin-bottom: calc(var(--raster) * 4);
}

.fach-gruppe__titel {
  font-size: 15px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 calc(var(--raster) * 1.5) 2px;
}

/* G3 (Konzept-Etappe 5, 24.09.2026, nur app-test): eine Flaeche mit duennen, eingerueckten
   Trennlinien statt einzeln umrandeter Kacheln - dieselbe .themen-liste traegt sowohl
   Navigationskarten (.struktur-karte, js/themen.js) als auch Suchtreffer (.themenkachel).
   overflow:hidden schneidet die Ecken der ersten/letzten Zeile auf den Container-Radius zu;
   display:block reicht, die Zeilen sind bereits block-Elemente ueber die volle Breite. Bewusst
   scoped auf ">"-Kinder von .themen-liste: bibliothek.html nutzt .struktur-karte einzeln in
   .bibliothek-fach (siehe dort), soll unveraendert bleiben. */
.themen-liste {
  display: block;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.themen-liste > .struktur-karte,
.themen-liste > .themenkachel {
  background: none;
  border: none;
  border-radius: 0;
}

/* Trennlinie erst ab dem Einzug (--raster*2, wie das Innenpolster der Zeilen), nicht bis zum
   linken Rand - ueber einen Farbverlauf als Hintergrund statt border-bottom, weil eine echte
   Umrandung immer volle Breite zeichnet. Letzte Zeile bleibt ohne Linie (Aussenrand uebernimmt
   das). */
.themen-liste > .struktur-karte:not(:last-child),
.themen-liste > .themenkachel:not(:last-child) {
  background-image: linear-gradient(var(--farbe-rand), var(--farbe-rand));
  background-repeat: no-repeat;
  background-size: calc(100% - var(--raster) * 2) 1px;
  background-position: right bottom;
}

.themenkachel {
  display: flex;
  align-items: center;
  gap: calc(var(--raster) * 2);
  padding: calc(var(--raster) * 2);
  min-height: 44px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

/* N1 (Konzept-Etappe 1 "Sofort spuerbar", 24.09.2026, nur app-test): Druckgefuehl beim
   Antippen, nach dem Muster von .schaltflaeche:active oben - Reaktion beim Aufsetzen, nicht
   erst beim Loslassen. Braucht dazu den leeren touchstart-Lauscher in js/zoomsperre.js, sonst
   zeigt iPhone-Safari :active bei einem einfachen Tap teils gar nicht. */
.themenkachel:active {
  /* background-color statt background: das Kurzformat wuerde die eingerueckte Trennlinie
     (background-image, G3 oben) beim Antippen kurz verschwinden lassen. */
  background-color: var(--farbe-akzent-flaeche);
}

.themenkachel__ampel {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.themenkachel__ampel--rot { background: var(--ampel-rot); }
.themenkachel__ampel--gelb { background: var(--ampel-gelb); }
.themenkachel__ampel--gruen { background: var(--ampel-gruen); }

.themenkachel__inhalt {
  flex: 1;
  min-width: 0;
}

.themenkachel__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--farbe-text);
  margin: 0 0 4px 0;
}

/* G2 (Konzept-Etappe 1, 24.09.2026): kraeftigere Variante fuer 12-13px-Text statt der normalen
   --farbe-text-schwach - bleibt auch bei Blendung (Sonne auf der Baustelle) gut lesbar. Steht
   hier neben der Ampel (.themenkachel__ampel), daher die Zuordnung zu "Ampel-Etiketten" im
   Konzept. */
.themenkachel__meta {
  display: flex;
  align-items: center;
  gap: var(--raster);
  font-size: 13px;
  color: var(--farbe-text-schwach-klein);
}

.ampel-etikett {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.ampel-etikett--rot { background: var(--ampel-rot-flaeche); color: var(--ampel-rot); }
.ampel-etikett--gelb { background: var(--ampel-gelb-flaeche); color: var(--ampel-gelb-text); }
.ampel-etikett--gruen { background: var(--ampel-gruen-flaeche); color: var(--ampel-gruen); }

.neu-etikett {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.themenkachel__pfeil {
  flex: none;
  color: var(--farbe-text-schwach);
}

/* ============================================================ Ladezustand */

.ladezustand {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
  padding: calc(var(--raster) * 4) 0;
  align-items: center;
  color: var(--farbe-text-schwach);
  font-size: 14px;
}

.ladezustand__kachel {
  width: 100%;
  height: 72px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--farbe-flaeche) 25%, var(--farbe-schimmer) 37%, var(--farbe-flaeche) 63%);
  background-size: 400% 100%;
  animation: schimmer 1.4s ease infinite;
}

@keyframes schimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.fehlerflaeche {
  padding: calc(var(--raster) * 2);
  background: var(--ampel-rot-flaeche);
  border: 1px solid var(--ampel-rot);
  border-radius: var(--radius);
  color: var(--ampel-rot-text-tief);
  font-size: 14px;
}

/* ============================================================ Tab-Leiste (unten, Daumenzone) */

.tableiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tableiste-hoehe) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  /* N2 Milchglas: echtes position:fixed, der Inhalt gleitet beim Scrollen sichtbar darunter. */
  background: var(--farbe-glas);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 -1px 0 var(--farbe-glas-rand);
  z-index: 20;
}

.tableiste__eintrag {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--farbe-text-schwach);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.tableiste__eintrag svg {
  width: 22px;
  height: 22px;
}

.tableiste__eintrag--aktiv {
  color: var(--farbe-akzent);
}

.tableiste__eintrag[disabled],
.tableiste__eintrag[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* N1: Druckgefuehl, gesperrte Eintraege ausgenommen. */
.tableiste__eintrag:active {
  background: var(--farbe-akzent-flaeche);
}

.tableiste__eintrag[disabled]:active,
.tableiste__eintrag[aria-disabled="true"]:active {
  background: none;
}

/* ---- Quiz ---- */

body.quiz-seite {
  display: flex;
  flex-direction: column;
  /* Schritt 1 (Auftrag Tastatur, 17.09.2026): position:fixed statt nur height:100dvh - bei
     100dvh bleibt der Body Teil des normalen Seitenflusses, und iOS Safari darf das ganze
     Layout verschieben, sobald die Tastatur aufgeht (dagegen half overflow:hidden bisher
     nicht, das verhindert nur eigenes Scrollen der Seite, nicht das Verschieben durch den
     Browser). position:fixed + inset:0 nagelt den Body an den Bildschirm, er kann nicht mehr
     wegrutschen. */
  position: fixed;
  inset: 0;
  /* Grund (Felix, 21.09.2026): das Antwortfeld sitzt jetzt von Anfang an oben unter der
     Fragekarte (.antwortbereich--freitext), der Browser muss beim Tastatur-Einblenden nichts
     mehr verschieben - der bisherige --sichtbare-hoehe-Eingriff aus quiz.js entfaellt damit. */
  height: 100%;
  /* Sicherheitsnetz wie bisher (Aenderung 3): passt etwas trotzdem nicht, wird es sichtbar
     abgeschnitten statt die Seite unbemerkt scrollbar zu machen. */
  overflow: hidden;
}

.app-bereich {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.fehler-huelle {
  padding: calc(var(--raster) * 2);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 4);
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.lade-huelle {
  padding: calc(var(--raster) * 2);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 4);
  max-width: 720px;
  margin: 0 auto;
}

.fehler-huelle .schaltflaeche--sekundaer {
  align-self: flex-start;
}

/* Kopf mit Zurueck-Verweis, Titel und Fortschrittsanzeige */

.quiz-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: none;
  /* N2 Milchglas: siehe .kopfzeile. */
  background: var(--farbe-glas);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 0 var(--farbe-glas-rand);
  /* Verdichtet (Auftrag Befund 2): war rundum calc(raster*2) - der Kopf braucht auf dem
     Handy keine 16px oben/unten, damit Frage und Antworten ohne Scrollen aufs Handyformat
     passen. */
  padding: var(--raster) calc(var(--raster) * 2);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster));
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) / 4);
}

/* Etappe "Feinschliff", Punkt 5: die schlanke Hauptzeile - links Zurueck/Schliessen, Mitte
   der duenne Fortschrittsbalken, rechts "3 / 20". kopf-titel/kopf-unterzeile (Fach-/Themen-
   Kontext fuer den ganzen Durchgang) stehen als eigene, kleine Zeilen darunter - dieselben
   Elemente wie bisher, nur verschoben/verkleinert (siehe quiz.html), js/quiz.js setzt ihren
   Text/hidden-Zustand unveraendert weiter ueber dieselben IDs. */
.quiz-kopf__zeile {
  display: flex;
  align-items: center;
  gap: var(--raster);
}

/* N2 Rueckfall auf deckende Flaeche mit klarer Kante: kein backdrop-filter im Browser,
   "Transparenz reduzieren" oder "Kontrast erhoehen" aktiv - dann wie vor Etappe 4. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopfzeile,
  .quiz-kopf {
    background: var(--farbe-flaeche);
    box-shadow: none;
    border-bottom: 1px solid var(--farbe-rand);
  }
  .tableiste {
    background: var(--farbe-flaeche);
    box-shadow: none;
    border-top: 1px solid var(--farbe-rand);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .kopfzeile,
  .quiz-kopf,
  .tableiste {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kopfzeile,
  .quiz-kopf {
    background: var(--farbe-flaeche);
    box-shadow: none;
    border-bottom: 1px solid var(--farbe-rand);
  }
  .tableiste {
    background: var(--farbe-flaeche);
    box-shadow: none;
    border-top: 1px solid var(--farbe-rand);
  }
}

.quiz-kopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 44px;
  color: var(--farbe-text-schwach);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Sekundaere Zeile unter der schlanken Hauptzeile - Fach-/Themenkontext des ganzen
   Durchgangs, bewusst klein/gedaempft (der Fragetext auf der Karte darunter traegt jetzt das
   Gewicht, siehe .fragekarte__text). */
.quiz-kopf__titel {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--farbe-text-schwach);
}

.fortschrittsleiste {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.fortschrittsleiste__spur {
  flex: 1;
  min-width: 0;
  /* Etappe "Feinschliff", Punkt 5: duenner Balken (4px statt 8px). */
  height: 4px;
  border-radius: 999px;
  background: var(--farbe-rand);
  overflow: hidden;
  display: block;
}

.fortschrittsleiste__fuellung {
  display: block;
  height: 100%;
  width: 0;
  background: var(--farbe-akzent);
  border-radius: inherit;
  transition: width 0.2s ease;
}

.fortschrittsleiste__text {
  flex: none;
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

/* Fester Zurueckblaettern-Pfeil im Kopf (Auftrag "Rueckmeldungen 22.09.", Punkt 1) - anders
   als der Zurueck-Knopf in der Rueckmelde-Knopfzeile ist er immer sichtbar, nicht nur nach dem
   Beantworten. Ruft dieselbe Zurueckblaetter-Logik auf (zeigeRueckblick), siehe js/quiz.js. */
.fortschritt-zurueck {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Kein eigener Rand mehr noetig - der Abstand kommt seit der Etappe "Feinschliff" aus dem
     gap von .fortschrittsleiste. */
  padding: 0;
  border: none;
  background: none;
  color: var(--farbe-text-schwach);
  cursor: pointer;
}

.fortschritt-zurueck:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Wrapper fuer roten Punkt + Melden-Knopf oben rechts auf der Fragekarte (Etappe
   "Bibliothek/Fehler-Design", 21.09.2026) - eigener Flex-Container, damit .fragekarte__kopf
   {justify-content:space-between} die beiden nicht auseinanderzieht. */
.fragekarte__rechte-ecke {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--raster) / 2);
}

/* Roter Punkt: zeigt, dass diese Frage frueher schon einmal falsch beantwortet wurde.
   F5 (Konzept-Etappe 3, 24.09.2026, nur app-test): aus dem span ein button geworden (title
   erscheint auf iPhone/iPad nie) - antippen blendet ".fragekarte__frueher-falsch-text" fuer
   2 s ein (js/quiz.js), aria-label traegt die Bedeutung weiterhin dauerhaft. ::before
   vergroessert nur die Trefferflaeche, der sichtbare Punkt bleibt 10px. */
.fragekarte__frueher-falsch {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ampel-rot);
  cursor: pointer;
}

.fragekarte__frueher-falsch::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.fragekarte__frueher-falsch-text {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: 200px;
  padding: 6px 10px;
  border-radius: var(--radius-klein);
  background: var(--farbe-text);
  color: var(--farbe-flaeche);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  z-index: 5;
}

.fragekarte__frueher-falsch--offen .fragekarte__frueher-falsch-text {
  opacity: 1;
  transform: translateY(0);
}

/* Hauptbereich: Fragekarte oben, Antwortbereich unten (margin-top: auto) */

main.quiz-hauptbereich {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Auftrag "Rückmeldungen 23.09.": war "hidden" - der Fragetext scrollte dadurch in sich,
     obwohl unterhalb noch sichtbar Platz war. Der Hauptbereich selbst darf jetzt rollen (body
     bleibt weiterhin fixiert, siehe dort), overscroll-behavior haelt das Rollen dort, statt auf
     den body durchzuschlagen - der Tastaturschutz vom Auftrag Tastatur (17./21.09.2026) bleibt
     unveraendert, der betrifft die Bildschirmtastatur, nicht dieses Scrollen. */
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  /* War raster*3 (24px) - verdichtet auf raster*2, siehe Befund 2. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--raster) * 2);
}

#fragekarte-bereich {
  /* Auftrag "Rückmeldungen 23.09.": zurueck auf "flex:none" - die Fragekarte soll ihre
     natuerliche Hoehe behalten und nicht mehr schrumpfen (das liess den Fragetext vorher in
     sich rollen, obwohl im Hauptbereich noch Platz war). min-height:0/overflow:hidden von
     Schritt 5 (17.09.2026) entfernt - die Untergrenze braucht es nicht mehr, main.quiz-
     hauptbereich rollt jetzt selbst, siehe dort. Der Kopf mit Etiketten/Melden-Knopf bleibt
     dank .fragekarte__kopf{flex:none} unangetastet. */
  flex: none;
  /* F3 (Konzept-Etappe 3, 24.09.2026, nur app-test): sanfter Fragenwechsel - Deckkraft und ein
     leichtes Anheben auf diesem BLEIBENDEN Behaelter, nicht auf der bei jedem Aufruf neu
     gebauten .fragekarte selbst. js/quiz.js (zeigeFrage(), zeigeRueckblick(),
     beendeRueckblick()) setzt kurz die Klasse ".fragekarte-bereich--einblenden" (Startzustand:
     unsichtbar, 6px tiefer), baut die neue Karte, und nimmt die Klasse erst im naechsten Frame
     wieder weg - gleiche Doppel-Frame-Technik wie bei #fortschrittsfuellung/
     .restzeit-linie__fuellung weiter unten. Der Antwortbereich wird bewusst NICHT mit
     eingeblendet und bleibt darum waehrend des Wechsels ohne jede Verzoegerung bedienbar. */
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

#fragekarte-bereich.fragekarte-bereich--einblenden {
  opacity: 0;
  transform: translateY(6px);
}

.fragekarte {
  background: var(--farbe-flaeche);
  /* Etappe "Feinschliff": kein Rahmen mehr, nur ein sehr weicher Schatten - siehe :root. */
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  /* War rundum raster*2 (16px) - verdichtet auf raster*1.5, siehe Befund 2. */
  padding: calc(var(--raster) * 1.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.5);
  /* Schritt 5: darf mit #fragekarte-bereich schrumpfen - der Boden liegt bei
     .fragekarte__text (min. zwei Zeilen), nicht hier. */
  min-height: 0;
}

/* Fach oberhalb des Fragetexts (Auftrag "Rueckmeldungen 22.09.", Punkt 3) - ruhige,
   unauffaellige Ueberschriftenzeile, keine Unterstreichung. */
.fragekarte__fach {
  margin: 0;
  /* Etappe "Feinschliff", Punkt 5: 13px, ruhig - der Fragetext (gleich danach) traegt jetzt
     das visuelle Gewicht. */
  font-size: 13px;
  font-weight: 600;
  color: var(--farbe-text-schwach);
  flex: none;
}

.fragekarte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raster);
  /* Schritt 5: Etiketten und Melden-Knopf schrumpfen nie mit - nur der Fragetext gibt nach. */
  flex: none;
}

/* Etappe "Feinschliff", Punkt 5: das komplette Beiwerk (Etiketten, Sterne, Karteikasten,
   Melden) bleibt in EINER kleinen, ruhigen Zeile - hier nur kleiner/gedaempfter, an der
   bestehenden Funktion und den bestehenden Knoepfen aendert sich nichts. */
.fragekarte__etiketten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raster);
  font-size: 12px;
}

.etikett-geprueft {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-size: 11px;
  font-weight: 700;
}

.fragekarte__sterne {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--farbe-text-schwach);
}

.fragekarte__leitner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--farbe-text-schwach);
}

/* F4 (Konzept-Etappe 3, 24.09.2026, nur app-test): 5 Punkte vor dem Text "Fach 3 von 5" -
   aria-hidden in js/quiz.js, weil der Text selbst schon alles sagt. Reine Zusatzanzeige, die
   Karteikasten-Logik (leitner_fach) bleibt unberuehrt. */
.fragekarte__leitner-punkte {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.fragekarte__leitner-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--farbe-rand);
}

.fragekarte__leitner-punkt--voll {
  background: var(--farbe-akzent);
}

.fragekarte__melden {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--farbe-text-schwach);
  cursor: pointer;
  border-radius: var(--radius-klein);
}

.fragekarte__melden:hover { color: var(--farbe-akzent); }

.fragekarte__text {
  margin: 0;
  /* War 18px/1.5 - verdichtet, siehe Befund 2. Bleibt klar lesbar (Lesbarkeit geht vor
     letzter Zeile Platzersparnis), spart aber bei langen Fragen reihenweise Zeilenumbrueche.
     G4 (Konzept-Etappe 5, 24.09.2026): rem statt px, als erste Stelle der schrittweisen
     Umstellung (Auftrag) - 1rem = die bisherigen 16px auf der unveraenderten Basis, wächst nun
     aber mit der iOS-Textgroesse mit (siehe body oben).
     Etappe "Feinschliff", Punkt 5: auf 1.375rem (22px)/600 angehoben - der Fragetext ist jetzt
     das groesste, kraeftigste Element auf der Karte, Zeilenhoehe 1.3 laut Auftrag. */
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--farbe-text);
  /* Auftrag "Rückmeldungen 23.09.": kein eigenes Rollen mehr und keine min-height-Untergrenze -
     der Fragetext soll immer ganz sichtbar sein, wenn Platz da ist (rollte vorher in sich,
     obwohl main.quiz-hauptbereich noch sichtbar Platz hatte). Die max-height fuer Handy/Tablet
     unten bleibt, aber nur noch fuer Fragen mit Freitext-Antwortfeld direkt darunter (Auftrag
     Tastatur) - dort schuetzt sie weiterhin vor der Bildschirmtastatur. */
  flex: none;
  min-height: 0;
}

/* Handy/Tablet (< 640px): Fragetext bleibt nur noch bei Fragen mit direkt darunterliegendem
   Freitext-/Rechnen-Antwortfeld (Klasse .antwortbereich--freitext, siehe js/quiz.js) auf zwei
   Zeilen Hoehe begrenzt und rollt darin - Grund (Felix, 21.09.2026): dort muss die Unterkante
   des Antwortfelds bei jeder Fragenlaenge im oberen, von der aufklappenden Tastatur nicht
   verdeckten Bereich bleiben (siehe Nachrechnung 375x667 in der frueheren Fassung dieser
   Regel). Ankreuzfragen und Merkkarten haben kein Feld dort - fuer sie gilt die Grenze seit
   dem Auftrag "Rückmeldungen 23.09." nicht mehr, ihr Fragetext bleibt unbegrenzt sichtbar.
   Der Selektor braucht :has() (main auf das Geschwister-Element .antwortbereich--freitext
   pruefen) - ein reiner Geschwister-Selektor kaeme nicht von #antwortbereich (steht im DOM
   nach #fragekarte-bereich) zurueck zu .fragekarte__text davor. */
@media (max-width: 639px) {
  main.quiz-hauptbereich:has(.antwortbereich--freitext) .fragekarte__text {
    max-height: calc(1.3em * 2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.fragekarte__meldehinweis {
  margin: 0;
}

/* Antwortbereich: direkt unter der Frage (Auftrag "Feinschliff", Punkt 5) */

.antwortbereich {
  /* War margin-top:auto - hielt die Antworten auf dem Handy bewusst am unteren Bildrand
     (Einhand-Bedienung, PLAN.md Abschnitt 11). Die Etappe "Feinschliff" (24.09.2026) will sie
     ausdruecklich direkt unter der Frage statt am unteren Rand - der feste Abstand darunter
     (padding-top) bleibt. */
  margin-top: 0;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.5);
  width: 100%;
  /* War raster*2 (16px) - verdichtet, siehe Befund 2. */
  padding-top: calc(var(--raster) * 0.75);
}

/* Freitext/rechnen (quiz.js): Antwortfeld hat eine Tastatur, die beim Fokus aufklappt - sitzt
   deshalb von Anfang an direkt unter der Fragekarte statt unten am Bildrand (margin-top:auto
   oben), damit die Tastatur beim Aufklappen nichts mehr verschieben muss (Felix, 21.09.2026,
   loest den frueheren visualViewport-Eingriff in quiz.js ab). Gilt auf jeder Breite, auch wenn
   @media (min-width:640px) weiter unten .antwortbereich zusaetzlich absetzt. */
.antwortbereich--freitext {
  margin-top: calc(var(--raster) * 2);
}

/* Nach dem Antworten (Auftrag "Frage-Bildschirm", Aenderung 3): der Antwortbereich
   uebernimmt den kompletten restlichen Platz von main.quiz-hauptbereich - Antwortoptionen,
   Erklaerung und Knopfzeile teilen sich ihn, die Erklaerung rollt innen statt die Seite zu
   verlaengern (siehe .rueckmeldebereich__erklaerung weiter unten). */
.antwortbereich--beantwortet {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Nur .rueckmeldebereich (gleich danach auf "flex:1" gesetzt) darf schrumpfen/rollen - Frage,
   Antwortoptionen, Positionshinweis im Rueckblick und die Knopfzeile bleiben immer vollstaendig
   sichtbar. */
.antwortbereich--beantwortet > * {
  flex: none;
}

.antwortbereich .schaltflaeche {
  width: 100%;
  /* War die geerbten 48px min-height von .schaltflaeche - 44px ist die vom Auftrag
     verlangte Mindestgroesse fuer den Daumen, mehr muss es fuer eine Schaltflaeche
     ohne mehrzeiligen Text nicht sein. */
  min-height: 44px;
}

.antwort-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.5);
}

.antwort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raster);
  width: 100%;
  /* Mindestgroesse bleibt bei 44px (Auftrag: mit dem Daumen sicher treffbar) - nur das
     Innenpolster ist verdichtet (Befund 2); bei mehrzeiligem Text wächst der Knopf ohnehin
     über die Mindestgroesse hinaus. */
  min-height: 44px;
  padding: var(--raster) calc(var(--raster) * 1.5);
  /* Etappe "Feinschliff": weisse gefuellte Flaeche OHNE Rahmen - ein transparenter Rand
     bleibt aber als unsichtbarer Platzhalter bestehen, damit :hover/--gewaehlt/--richtig/
     --falsch weiterhin eine Randfarbe einfaerben koennen, ohne dass sich beim Zustandswechsel
     die Groesse/Position um die Randstaerke verschiebt. */
  border: 1.5px solid transparent;
  border-radius: var(--radius-knopf);
  background: var(--farbe-flaeche);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--farbe-text);
  font-family: inherit;
  /* G4 (Konzept-Etappe 5, 24.09.2026): rem statt px, siehe .fragekarte__text oben - 0.875rem =
     die bisherigen 14px. */
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  /* F1: Farbwechsel (Rand/Grund/Schrift) weich statt hart, greift bei jedem Klassenwechsel
     unten (--gewaehlt, --richtig, --falsch), nicht nur beim Antworten. */
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.antwort-option:hover { border-color: var(--farbe-akzent); }

/* Buchstabe A-D links (Auftrag "Feinschliff", rein darstellend - Reihenfolge/Mischen der
   Antworten bleiben unveraendert, siehe js/quiz.js baueAntwortInhalt()). */
.antwort-option__inhalt {
  display: flex;
  align-items: center;
  gap: calc(var(--raster) * 1.5);
  flex: 1 1 auto;
  min-width: 0;
}

.antwort-option__buchstabe {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-size: 13px;
  font-weight: 700;
}

.antwort-option__text {
  flex: 1 1 auto;
  min-width: 0;
}

.antwort-option--richtig .antwort-option__buchstabe {
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
}

.antwort-option--falsch .antwort-option__buchstabe {
  background: var(--farbe-rand);
  color: var(--farbe-text-schwach);
}

/* N1: Druckgefuehl, gesperrte (bereits beantwortete) Optionen ausgenommen - :disabled bekommt
   ohnehin keine Zeigerereignisse mehr, :not(:disabled) macht die Ausnahme hier zusaetzlich
   ausdruecklich. */
.antwort-option:active:not(:disabled) {
  background: var(--farbe-akzent-flaeche);
}

.antwort-option--gewaehlt {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent-flaeche);
}

.antwort-option:disabled {
  opacity: 1;
}

.antwort-option--gesperrt {
  cursor: default;
}

.antwort-option--richtig {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-text);
  font-weight: 600;
}

/* F1: der Haken wird erst jetzt per JS eingefuegt (js/quiz.js) - ein normaler transition greift
   auf ein frisch eingefuegtes Element nicht zuverlaessig, darum eine Keyframe-Animation, die
   unabhaengig vom vorherigen Zustand abspielt. Kurzes Federn, keine Verschiebung. */
.antwort-option--richtig svg {
  color: var(--farbe-akzent);
  flex: none;
  animation: antwort-richtig-federn 0.24s ease;
}

@keyframes antwort-richtig-federn {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* F7: eigene, ruhige Flaeche statt nur durchgestrichenem Text - ausdruecklich keine
   Ampelfarbe (--farbe-flaeche-gedaempft ist ein neutraler Grauton, siehe :root - seit der
   Etappe "Feinschliff" kein Beige mehr). */
.antwort-option--falsch {
  border-color: transparent;
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-text-schwach);
  text-decoration: line-through;
}

.antwort-option--falsch svg { color: var(--farbe-text-schwach); flex: none; }

.rechnen-feld {
  display: flex;
  align-items: center;
  gap: var(--raster);
}

.rechnen-eingabe {
  flex: 1;
  min-height: 44px;
  padding: 0 calc(var(--raster) * 2);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: 16px;
}

.rechnen-einheit {
  flex: none;
  color: var(--farbe-text-schwach);
  font-size: 14px;
}

/* Freitext (quiz.js): Eingabefeld vor dem Vergleichen. flex:1 1 auto + min-height:0 statt der
   festen Mindesthoehe von .feld textarea - so darf das Feld auf dem Handy schrumpfen, wenn
   Frage und Knoepfe sonst nicht ohne Scrollen auf den Bildschirm passen (Auftrag Freitext,
   15.09.2026), analog zu .rueckmeldebereich__erklaerung weiter unten. resize:none, weil der
   Nutzer die Hoehe sonst ueber die verfuegbare Flaeche hinaus ziehen und damit doch noch
   Scrollen erzwingen koennte. */
.freitext-eingabe {
  flex: 1 1 auto;
  min-height: 44px;
  /* War fest 200px, dann ein Anteil von --sichtbare-hoehe (entfallen, Felix 21.09.2026 - das
     Feld sitzt jetzt oben unter der Fragekarte, kein dynamischer Tastatur-Eingriff mehr noetig).
     Anteil von 100vh mit 72px als Untergrenze, das zeigt bei 16px/1.4 zwei Zeilen plus
     Innenpolster sicher, auch wenn #fragekarte-bereich bei einer langen Frage schrumpft. */
  max-height: max(72px, 28vh);
  padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

/* Eigene Antwort nach dem Vergleichen - schreibgeschuetzt, weisse Zeilenumbrueche des Nutzers
   bleiben erhalten (white-space:pre-wrap), da textContent \n sonst nicht darstellt. Ebenfalls
   schrumpf- und rollbar (siehe .freitext-eingabe), damit sie mit der Musterantwort zusammen
   ohne Seiten-Scrollen Platz findet. */
.freitext-eigene-antwort {
  margin: 0;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 30vh;
  overflow-y: auto;
  padding: calc(var(--raster) * 1.5);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-text);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.rueckmeldebereich {
  /* Das Gegenstueck zu ".antwortbereich--beantwortet > * { flex: none }" weiter oben - hier
     wird der Ausschluss wieder aufgehoben: .rueckmeldebereich ist der einzige Kindbereich, der
     schrumpft und intern rollt (ueber .rueckmeldebereich__erklaerung), Aenderung 3. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) / 2);
  padding-top: var(--raster);
  border-top: 1px solid var(--farbe-rand);
}

.rueckmeldebereich__zeile,
.rueckmeldebereich__loesung,
.rueckmeldebereich__kartei {
  flex: none;
}

.rueckmeldebereich__zeile {
  display: flex;
  align-items: center;
  gap: var(--raster);
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--farbe-text);
}

.rueckmeldebereich__zeile svg { color: var(--farbe-akzent); flex: none; }

.rueckmeldebereich__loesung {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--farbe-text);
}

.rueckmeldebereich__erklaerung {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--farbe-text);
  /* Eigener, in sich rollbarer Bereich mit begrenzter statt fest verdrahteter Hoehe (Auftrag
     "Frage-Bildschirm", Aenderung 3): wird von .rueckmeldebereich (flex:1) genau so gross wie
     der jeweils uebrige Platz erlaubt, laenger als das rollt sie in sich statt die Seite zu
     verlaengern - Schriftgroesse bleibt dabei unveraendert (Grenze aus dem Auftrag). */
  flex: 1 1 auto;
  min-height: 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.rueckmeldebereich__kartei {
  margin: 0;
  font-size: 13px;
  color: var(--farbe-akzent);
}

/* Zurueck-/Weiter-Knopfzeile nach dem Antworten (Auftrag "Frage-Bildschirm", Aenderung 2+3):
   nebeneinander statt untereinander - kostet dadurch keine zusaetzliche Zeile Hoehe, obwohl
   ein Knopf dazugekommen ist. "Zurueck" fuehrt zum Rueckblick auf fruehere Fragen des
   Durchgangs, "Nächste Frage" (bzw. im Rueckblick "Zur aktuellen Frage") bleibt die
   Haupthandlung und bekommt deshalb den groesseren Anteil der Breite. */
.rueckmeldebereich__knoepfe {
  flex: none;
  display: flex;
  gap: calc(var(--raster) * 1.5);
  margin-top: calc(var(--raster) / 2);
}

.rueckmeldebereich__knoepfe .schaltflaeche {
  width: auto;
}

.rueckmeldebereich__knoepfe .schaltflaeche--sekundaer {
  flex: 0 0 auto;
  min-width: 88px;
}

.rueckmeldebereich__knoepfe .weiter-schaltflaeche {
  flex: 1 1 auto;
}

/* F2 (Konzept-Etappe 1, nur app-test): Restzeit-Linie unter der Knopfzeile, laeuft synchron
   zum bestehenden 1000-ms-Zeitgeber in js/quiz.js zeigeRueckmeldung() leer - gleiche Technik
   wie #fortschrittsfuellung (Breite per Uebergang), nur mit passender Dauer. */
.restzeit-linie {
  flex: none;
  height: 3px;
  margin-top: calc(var(--raster) / 2);
  border-radius: 999px;
  background: var(--farbe-rand);
  overflow: hidden;
}

.restzeit-linie__fuellung {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--farbe-akzent);
  border-radius: inherit;
  transition: width 1s linear;
}

/* Ab Tablet-/PC-Breite: Antworten nicht an den unteren Bildrand pinnen (das ist die
   Einhand-Regel fuers Handy), sondern dicht unter die Frage ruecken - sonst reisst ein
   hoher Bildschirm Frage und Antworten weit auseinander (Auftrag Befund 2, Betreiber: "beim PC
   soll es auch enger zusammengeschoben werden"). Bleibt bei .antwort-option-Groesse und
   -Abstand unveraendert, nur die Platzierung im Hauptbereich aendert sich. */
@media (min-width: 640px) {
  main.quiz-hauptbereich {
    max-width: 560px;
  }

  /* Nur vor dem Antworten - danach soll .antwortbereich--beantwortet (margin-top:0) den
     restlichen Platz fuer sich behalten, siehe Regel weiter oben. */
  .antwortbereich:not(.antwortbereich--beantwortet) {
    margin-top: calc(var(--raster) * 3);
  }
}

/* Abschlusskarte */

.abschlusskarte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: calc(var(--raster) * 3) calc(var(--raster) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--raster) * 2);
  text-align: center;
  margin-top: calc(var(--raster) * 4);
}

.abschlusskarte__ergebnis {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
  margin: 0;
}

.abschlusskarte .schaltflaeche,
.abschlusskarte .schaltflaeche--sekundaer {
  width: 100%;
}

/* Drei kleine Kennzahlen unter dem Ergebnis-Ring (Etappe "Belohnung und Ziel", 24.09.2026) -
   nutzt dieselbe .kennzahl-Bauform wie die Lernzeit-Karte (statistik.html), nur schmaler nebeneinander
   statt einzeln gross. */
.abschluss-kennzahlen {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--raster) * 3);
  flex-wrap: wrap;
  width: 100%;
}

.abschluss-kennzahlen .kennzahl {
  font-size: 1.15rem;
}

.abschluss-kennzahlen .kennzahl small {
  font-size: 0.75rem;
}

/* ---- Fehlerkartei / Themen ---- */

/* Tagesring-Kachel (Etappe "Lernminuten", 24.09.2026, A1/A2) - ersetzt die fruehere Textzeile
   "Heute gelernt: 12 Minuten" (.lernzeit-zeile, entfernt). Kartenrahmen wie .pruefungshinweis
   (dieselben Masse), damit beide Elemente auf themen.html optisch zusammengehoeren. */
.lernzeit-kachel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 1.5);
  margin: 0 0 calc(var(--raster) * 3) 0;
  padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
  background: var(--farbe-flaeche);
  /* Etappe "Feinschliff": kein Rahmen mehr, nur ein sehr weicher Schatten - siehe :root. */
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--farbe-text);
}

.lernzeit-kachel__oben {
  display: flex;
  align-items: center;
  gap: calc(var(--raster) * 2);
}

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

.lernzeit-kachel__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--farbe-text-schwach);
}

.lernzeit-kachel__wert {
  font-size: 22px;
  font-weight: 700;
}

.lernzeit-kachel__wert small {
  font-size: 14px;
  font-weight: 400;
  color: var(--farbe-text-schwach);
}

.lernzeit-kachel__hinweis {
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

.lernzeit-kachel__unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raster);
  padding-top: calc(var(--raster) * 1.5);
  border-top: 1px solid var(--farbe-rand);
}

.lernzeit-kachel__serie {
  font-size: 13px;
  font-weight: 600;
  color: var(--farbe-text);
}

.lernzeit-kachel__tage {
  display: flex;
  gap: 6px;
}

.lernzeit-kachel__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--farbe-text-schwach);
}

.lernzeit-kachel__tag i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--farbe-akzent);
}

.lernzeit-kachel__tag--leer i {
  background: var(--farbe-rand);
}

.lernzeit-kachel__tag--heute {
  font-weight: 700;
  color: var(--farbe-text);
}

/* Tagesring (js/balken.js baueRing()) - Spur grau, Fuellung Akzentblau (nie Ampelgruen, Regel
   "Ton" im Konzept: die Ampelfarben gehoeren nur der Lernampel). */
.ring {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
}

.ring__bild {
  width: 100%;
  height: 100%;
}

.ring__spur {
  fill: none;
  stroke: var(--farbe-rand);
  stroke-width: 6;
}

.ring__fuellung {
  fill: none;
  stroke: var(--farbe-akzent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.ring--voll .ring__fuellung {
  stroke: var(--farbe-akzent);
}

.ring__haken {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-size: 11px;
  font-weight: 700;
}

/* Groessenvarianten des Rings (Etappe "Belohnung und Ziel", 24.09.2026): "klein" fuer den
   Bereitschafts-Ring in der Pruefungs-Erinnerung, "gross" fuer den Ergebnis-Ring auf der
   Abschlusskarte - dieselbe Zeichnung wie der 64px-Tagesring, nur skaliert (das SVG selbst bleibt
   vektoriell, stroke-width bleibt darum optisch proportional). */
.ring--klein {
  width: 28px;
  height: 28px;
}

.ring--klein .ring__haken {
  width: 12px;
  height: 12px;
  font-size: 8px;
}

.ring--gross {
  width: 104px;
  height: 104px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.ring--gross .ring__haken {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

/* Erinnerung an den naechsten Pruefungstermin (Etappe "Termine", 21.09.2026) - verlinkt immer
   auf profil.html. Dezent im Normalfall, bei <= 7 Tagen hervorgehoben ueber dieselben
   Warnfarben wie .platzhalter-kasten (keine Ampelfarbe im lernlogik-Sinn, nur derselbe Ton). */
.pruefungshinweis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 calc(var(--raster) * 3) 0;
  padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--farbe-text);
}

.pruefungshinweis__zeile {
  font-size: 14px;
  line-height: 1.4;
}

.pruefungshinweis__zeile:first-child {
  font-weight: 600;
}

/* Pruefungsname klein/gedaempft unter der Hauptzeile (Auftrag: "klein darunter"). Dieselbe Klasse
   traegt seit der Etappe "Belohnung und Ziel" (24.09.2026) auch den dezenten Hinweis "Prüfungstermin
   im Profil eintragen", wenn keine Pruefung eingetragen ist. */
.pruefungshinweis__zeile.pruefungshinweis__name {
  font-size: 12px;
  font-weight: 400;
  color: var(--farbe-text-schwach);
}

/* Kopfzeile "N Tage bis <Name>" mit kleinem Bereitschafts-Ring davor (Etappe "Belohnung und Ziel",
   24.09.2026) - ersetzt die fruehere zweizeilige Form ("Naechste Pruefung in N Tagen" / Name). */
.pruefungshinweis__kopf {
  display: flex;
  align-items: center;
  gap: calc(var(--raster) * 1.5);
}

.pruefungshinweis__kopf .pruefungshinweis__zeile {
  font-weight: 600;
}

/* Fortschrittsbalken "Heute: A von Z Fragen" braucht etwas Abstand zur Erinnerungszeile
   darueber - die statistik-balken-zeile__kopf/__spur-Klassen selbst sind seitenneutral. */
.pruefungshinweis .statistik-balken-zeile__kopf {
  margin-top: 4px;
}

.pruefungshinweis--bald {
  background: var(--ampel-gelb-flaeche);
  border-color: var(--ampel-gelb);
  color: var(--ampel-gelb-text-tief);
}

.filter-hinweis {
  padding: calc(var(--raster) * 4) 0;
  text-align: center;
}

.fehlerkartei__alle-ueben {
  width: 100%;
  margin-bottom: calc(var(--raster) * 3);
}

.fehlerkartei__leer {
  padding: calc(var(--raster) * 4) 0;
  text-align: center;
}

.fehler-thema-gruppe {
  margin-bottom: calc(var(--raster) * 3);
}

.fehler-thema-gruppe__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raster);
  margin-bottom: var(--raster);
}

.fehler-thema-gruppe__titel {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--farbe-text);
}

.fehler-thema-gruppe__titel .ziffern {
  font-size: 13px;
  font-weight: 600;
  color: var(--farbe-text-schwach);
}

.fehler-thema-gruppe__wiederholen {
  flex: none;
  padding: 0 calc(var(--raster) * 2);
  min-height: 44px;
}

/* G3 (Konzept-Etappe 5, 24.09.2026, nur app-test): eine Flaeche mit eingerueckten Trennlinien
   statt einzeln umrandeter Eintraege, dasselbe Muster wie .themen-liste oben. */
.fehler-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.fehler-eintrag {
  display: flex;
  align-items: center;
  gap: var(--raster);
  padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
}

.fehler-liste > .fehler-eintrag:not(:last-child) {
  background-image: linear-gradient(var(--farbe-rand), var(--farbe-rand));
  background-repeat: no-repeat;
  background-size: calc(100% - var(--raster) * 2) 1px;
  background-position: right bottom;
}

/* N1: Druckgefuehl. Hinweis (Etappe D, 24.09.2026): .fehler-eintrag hat derzeit keinen
   Verbraucher mehr in js/*.js - fehler.html leitet seit der Etappe "Bibliothek/Fehler-Design"
   nur noch auf themen.html weiter. Die Regel bleibt fuer den Fall einer Wiederverwendung. */
.fehler-eintrag:active {
  background-color: var(--farbe-akzent-flaeche);
}

.fehler-eintrag__inhalt {
  flex: 1;
  min-width: 0;
}

.fehler-eintrag__frage {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: var(--farbe-text);
  line-height: 1.4;
}

.fehler-eintrag__folge {
  margin: 0;
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

.fehler-eintrag__entfernen {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--farbe-text-schwach);
  cursor: pointer;
  border-radius: var(--radius-klein);
}

.fehler-eintrag__entfernen:hover { color: var(--farbe-akzent); }

/* ---- Anmeldung ---- */

/* .schaltflaeche kannte bisher keinen Disabled-Zustand (in quiz.html unsichtbar
   gesperrt) — hier ergaenzt, weil "Zugang anlegen" sichtbar gesperrt sein muss,
   solange das Haekchen fehlt. Rein additiv, keine bestehende Regel veraendert. */

.schaltflaeche:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* Reiterleiste der zwei Modi (Anmelden / Zugang einlösen) */

.moduswahl {
  display: flex;
  gap: 4px;
  background: var(--farbe-akzent-flaeche);
  border-radius: var(--radius);
  padding: 4px;
}

.moduswahl__reiter {
  flex: 1;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--farbe-text-schwach);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.moduswahl__reiter[aria-selected="true"] {
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-rand);
}

/* Stufenanzeige der drei Schritte beim Einlösen */

.stufenanzeige {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--raster);
  margin-bottom: calc(var(--raster) * 2);
}

.stufenanzeige__punkt {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--farbe-rand);
  transition: width 0.15s ease, background-color 0.15s ease;
}

.stufenanzeige__punkt--aktiv {
  background: var(--farbe-akzent);
  width: 22px;
  border-radius: 999px;
}

.stufenanzeige__punkt--erledigt {
  background: var(--farbe-akzent);
}

/* Einwilligungskasten: scrollbarer Text mit feinem Rahmen, hoechstens 180px hoch */

.einwilligungskasten {
  max-height: 180px;
  overflow-y: auto;
  padding: calc(var(--raster) * 1.5);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  font-size: 13px;
  line-height: 1.5;
  color: var(--farbe-text-schwach);
}

.einwilligungskasten p {
  margin: 0;
}

/* Haekchenzeile mit Touch-Ziel >= 44px */

.haekchenzeile {
  display: flex;
  align-items: center;
  gap: var(--raster);
  min-height: 44px;
  font-size: 14px;
  color: var(--farbe-text);
  cursor: pointer;
}

.haekchenzeile input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--farbe-akzent);
}

/* Testhinweis-Kasten fuer Testcode/Testkennung — Akzentfarbe, ausdruecklich keine Ampelfarbe */

.testhinweis {
  padding: calc(var(--raster) * 2);
  background: var(--farbe-akzent-flaeche);
  border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius);
  color: var(--farbe-text);
  font-size: 14px;
  line-height: 1.5;
}

.testhinweis a {
  font-weight: 600;
}

/* Erfolgszeile */

.erfolgszeile {
  font-size: 15px;
  font-weight: 600;
  color: var(--farbe-text);
  line-height: 1.5;
}

/* ---- Handlungsfelder ---- */

/* .themen-liste ist bereits weiter oben definiert (Flex-Spalte); hier nur die
   Listensemantik zuruecksetzen, falls sie auf einem <ul> statt <div> sitzt. */
ul.themen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* N4 Suchfeld im iOS-Stil (Konzept-Etappe 4, 24.09.2026): abgerundet, grauer Grund, Lupe als
   SVG links, rechts Platz fuer das native Loesch-Kreuz von type=search. In themen.html sitzt
   .struktur-suche direkt in main und behaelt seinen Abstand nach unten - in verwaltung.html
   (kf-suche) steckt es in .feld/.filterzeile--verwaltung, die ihren eigenen Abstand schon
   ueber gap regeln, deshalb dort ohne zusaetzlichen margin-bottom. */
main > .struktur-suche {
  margin-bottom: calc(var(--raster) * 2);
}

.struktur-suche {
  position: relative;
}

.struktur-suche__symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--farbe-text-schwach);
  pointer-events: none;
}

.struktur-suche input {
  width: 100%;
  min-height: 44px;
  padding: 0 36px 0 36px;
  border: none;
  border-radius: var(--radius-klein);
  /* Etappe "Feinschliff": eigene Suchfeld-Variable statt --farbe-flaeche-gedaempft - dieselbe
     Formel wie Apples Suchfeld (rgba(118,118,128,.12)), kein Beige-/Grauton mehr, der mit
     anderen gedaempften Flaechen (z. B. .antwort-option--falsch) geteilt wird. */
  background: var(--farbe-suchfeld);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.struktur-brotkrumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 calc(var(--raster) * 2) 0;
  font-size: 13px;
}

.struktur-brotkrumen__zurueck {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  color: var(--farbe-text-schwach);
}

.struktur-brotkrumen__teil {
  color: var(--farbe-akzent);
  text-decoration: none;
}

.struktur-brotkrumen__teil--aktuell {
  color: var(--farbe-text-schwach);
  font-weight: 600;
  text-decoration: none;
}

.struktur-brotkrumen__trenner {
  color: var(--farbe-rand);
}

.struktur-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
}

.struktur-karte__hauptflaeche {
  display: flex;
  align-items: center;
  gap: calc(var(--raster) * 2);
  width: 100%;
  min-height: 44px;
  padding: calc(var(--raster) * 2);
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.struktur-karte__hauptflaeche--gesperrt {
  cursor: default;
}

/* N1: Druckgefuehl, gesperrte Flaechen ausdruecklich ausgenommen. */
.struktur-karte__hauptflaeche:active {
  background: var(--farbe-akzent-flaeche);
}

.struktur-karte__hauptflaeche--gesperrt:active {
  background: none;
}

.struktur-karte__nummer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-size: 17px;
  font-weight: 700;
}

/* Etappe "Feinschliff", Punkt 6 (24.09.2026): abgerundetes Quadrat mit weissem Symbol statt
   der fortlaufenden Nummer vor jedem Ueberordner (wie in den iOS-Einstellungen) - nur auf der
   Handlungsfeld-Ebene, js/themen.js baueUeberordnerSymbol()/baueHfKarte(). Die Themen-Ebene
   darunter behaelt ihre Zahlen (.struktur-karte__nummer bleibt dafuer unveraendert bestehen).
   Farben bewusst gedeckt/abgestimmt, ausdruecklich keine Ampelfarben (--ampel-*). */
.struktur-karte__symbol {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 7px;
  color: #FFFFFF;
}

.struktur-karte__symbol--bauphysik { background: hsl(200, 38%, 42%); }
.struktur-karte__symbol--statik { background: hsl(220, 15%, 45%); }
.struktur-karte__symbol--planung-recht { background: hsl(255, 28%, 48%); }
.struktur-karte__symbol--materialien { background: hsl(28, 35%, 42%); }
.struktur-karte__symbol--konstruktion-mathematik { background: hsl(230, 30%, 50%); }
.struktur-karte__symbol--qualitaetsmanagement { background: hsl(165, 30%, 36%); }
.struktur-karte__symbol--brand-schallschutz { background: hsl(14, 45%, 42%); }
.struktur-karte__symbol--kalkulation { background: hsl(178, 32%, 33%); }
.struktur-karte__symbol--betrieb-baustelle { background: hsl(40, 40%, 40%); }
/* Rueckfall fuer einen unbekannten/neuen Ueberordner (Auftrag: "neutrales Symbol"). */
.struktur-karte__symbol--sonstige { background: var(--farbe-text-schwach); }

.struktur-karte__etikett {
  display: inline-block;
  padding: 2px 8px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-size: 12px;
  font-weight: 700;
}

.struktur-karte__inhalt {
  flex: 1;
  min-width: 0;
}

.struktur-karte__name {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--farbe-text);
}

/* G2: "Kartenmeta" - kraeftigere Variante, siehe .themenkachel__meta oben. */
.struktur-karte__meta {
  margin: 0 0 calc(var(--raster) * 1.5) 0;
  font-size: 13px;
  color: var(--farbe-text-schwach-klein);
}

/* N5 (Konzept-Etappe 3, 24.09.2026, nur app-test): die Zahl in der Metazeile ("4 Fächer ·
   318 Fragen") mit Gewicht statt Groesse hervorheben (js/themen.js baueMetaZeile()). */
.struktur-karte__meta-zahl {
  font-weight: 600;
}

.struktur-karte__pfeil {
  flex: none;
  color: var(--farbe-text-schwach);
}

.struktur-karte__punkte {
  margin: calc(var(--raster) * 1.5) 0 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--farbe-text-schwach);
}

.struktur-karte__hinweis {
  margin: calc(var(--raster) * 1.5) 0 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--farbe-text-schwach);
}

.struktur-karte__wortlaut-umschalter {
  display: block;
  width: 100%;
  padding: var(--raster) calc(var(--raster) * 2) calc(var(--raster) * 2) calc(var(--raster) * 2);
  border: none;
  border-top: 1px solid var(--farbe-rand);
  background: none;
  color: var(--farbe-akzent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.struktur-karte__wortlaut {
  margin: 0;
  padding: 0 calc(var(--raster) * 2) calc(var(--raster) * 2) calc(var(--raster) * 2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--farbe-text);
}

.struktur-treffer-pfad {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--farbe-text-schwach);
}

/* Balken: richtig (gruen) / falsch (rot) / offen (grau, = Hintergrund der Spur) */

.balken {
  margin-top: var(--raster);
}

.balken__spur {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--farbe-rand);
  overflow: hidden;
}

.balken__abschnitt {
  position: absolute;
  top: 0;
  bottom: 0;
}

.balken__abschnitt--richtig {
  background: var(--ampel-gruen);
}

.balken__abschnitt--falsch {
  background: var(--ampel-rot);
}

/* "wackelig" (Etappe "Statistik", 21.09.2026): schon einmal richtig, aber noch nicht zweimal in
   Folge - siehe Struktur.vierteilung(). "sicher" nutzt bewusst dieselbe gruene Klasse wie
   --richtig oben (dieselbe Farbe, dieselbe Bedeutung "kann ich"), "falsch" ebenso --falsch -
   keine neue Definition, nur eine zusaetzliche Farbe fuer die feinere Schwelle. */
.balken__abschnitt--wackelig {
  background: var(--ampel-gelb);
}

/* G2: explizit im Konzept genannt. */
.balken__text {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--farbe-text-schwach-klein);
}

.quiz-kopf__unterzeile {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--farbe-text-schwach);
}

.fehler-kompetenz-gruppe {
  margin-bottom: calc(var(--raster) * 2);
}

.fehler-kompetenz-gruppe__titel {
  margin: 0 0 var(--raster) 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
}

/* ---- Meldungen ---- */

/* Auswahlfelder und Freitext, gemeinsam fuer Melde- und Rueckmeldeformular */

.feld select,
.feld textarea {
  min-height: 48px;
  padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: 16px;
  width: 100%;
}

.feld textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.4;
}

.restzaehler {
  margin: 0;
  font-size: 12px;
  color: var(--farbe-text-schwach);
  text-align: right;
}

/* Meldedialog (quiz.html) — natives <dialog>-Element */

/* F8 (Konzept-Etappe 3, 24.09.2026, nur app-test): der Dialog "kommt an" statt schlagartig
   aufzutauchen - kurze Deckkraft- und Groessenaenderung beim Oeffnen UND Schliessen, ueber
   @starting-style und transition-behavior:allow-discrete (dafuer muessen display/overlay mit
   in der transition-Liste stehen). Kennt ein Browser das nicht, bleibt es beim bisherigen
   schlagartigen Anzeigen - reine Verbesserung ohne eigenen JS-Zweig. */
dialog.melde-dialog {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: calc(var(--raster) * 3);
  max-width: 420px;
  width: calc(100% - var(--raster) * 4);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out,
    overlay 0.18s ease-out allow-discrete, display 0.18s ease-out allow-discrete;
}

dialog.melde-dialog[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  dialog.melde-dialog[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}

dialog.melde-dialog::backdrop {
  background: rgba(43, 43, 43, 0.5);
  opacity: 0;
  transition: opacity 0.18s ease-out,
    overlay 0.18s ease-out allow-discrete, display 0.18s ease-out allow-discrete;
}

dialog.melde-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog.melde-dialog[open]::backdrop {
    opacity: 0;
  }
}

.melde-dialog__titel {
  margin: 0 0 calc(var(--raster) * 2) 0;
  font-size: 18px;
  font-weight: 700;
}

.melde-formular {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.melde-dialog__knoepfe {
  display: flex;
  gap: var(--raster);
}

.melde-dialog__knoepfe .schaltflaeche,
.melde-dialog__knoepfe .schaltflaeche--sekundaer {
  flex: 1;
}

.melde-bestaetigung {
  padding: calc(var(--raster) * 4) calc(var(--raster) * 2);
  text-align: center;
}

.melde-bestaetigung p {
  margin: 0;
  font-size: 16px;
  color: var(--farbe-text);
  line-height: 1.5;
}

/* Bestaetigungsblatt (V5, Konzept-Etappe 5, 24.09.2026, js/verwaltung.js zeigeBestaetigung())
   — natives <dialog>-Element, ersetzt window.confirm() an allen 7 Stellen dort. Dieselbe
   Oeffnen/Schliessen-Animation wie .melde-dialog oben, siehe die Kommentare dort. */
dialog.bestaetigen-dialog {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: calc(var(--raster) * 3);
  max-width: 360px;
  width: calc(100% - var(--raster) * 4);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out,
    overlay 0.18s ease-out allow-discrete, display 0.18s ease-out allow-discrete;
}

dialog.bestaetigen-dialog[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  dialog.bestaetigen-dialog[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}

dialog.bestaetigen-dialog::backdrop {
  background: rgba(43, 43, 43, 0.5);
  opacity: 0;
  transition: opacity 0.18s ease-out,
    overlay 0.18s ease-out allow-discrete, display 0.18s ease-out allow-discrete;
}

dialog.bestaetigen-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog.bestaetigen-dialog[open]::backdrop {
    opacity: 0;
  }
}

.bestaetigen-dialog__text {
  margin: 0 0 calc(var(--raster) * 3) 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--farbe-text);
}

.bestaetigen-dialog__knoepfe {
  display: flex;
  gap: var(--raster);
}

.bestaetigen-dialog__knoepfe .schaltflaeche,
.bestaetigen-dialog__knoepfe .schaltflaeche--sekundaer,
.bestaetigen-dialog__knoepfe .schaltflaeche--gefahr {
  flex: 1;
}

/* Seitentitel ausserhalb der Verwaltung (rueckmeldung.html) */

.rueckmeldung-titel {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
}

/* Aufklappbare Listen "Meine Rueckmeldungen" / "Meine Meldungen" */

.meldeliste-details {
  margin-top: calc(var(--raster) * 3);
  border-top: 1px solid var(--farbe-rand);
  padding-top: var(--raster);
}

.meldeliste-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: var(--farbe-text);
}

.meldeliste {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
  margin-top: var(--raster);
}

.meldeliste__eintrag {
  padding: calc(var(--raster) * 1.5);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
}

.meldeliste__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raster);
  margin-bottom: 4px;
}

.meldeliste__datum {
  font-size: 12px;
  color: var(--farbe-text-schwach);
}

.meldeliste__kategorie {
  font-size: 13px;
  font-weight: 700;
  color: var(--farbe-text);
}

.meldeliste__text {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: var(--farbe-text);
  line-height: 1.4;
}

.meldeliste__zustand {
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  color: var(--farbe-akzent);
}

/* ---- Themengebiete ---- */

/* Aufklappbare Verordnungszeile auf der Lernfeld-Liste eines Themengebiets:
   zeigt die amtlichen Kompetenzen (Kennung + voller Wortlaut), die in diesem
   Themengebiet zusammengefasst sind. Natives <details> - Tastatur- und
   Screenreader-Bedienung ohne eigenes Skript. */

.struktur-verordnung {
  margin: 0 0 calc(var(--raster) * 2) 0;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  padding: 0 calc(var(--raster) * 2);
}

.struktur-verordnung[open] {
  padding-bottom: calc(var(--raster) * 2);
}

.struktur-verordnung__titel {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--farbe-akzent);
  cursor: pointer;
  list-style: none;
}

.struktur-verordnung__titel::-webkit-details-marker {
  display: none;
}

.struktur-verordnung__titel::before {
  content: "›";
  display: inline-block;
  margin-right: var(--raster);
  transition: transform 0.15s ease;
}

.struktur-verordnung[open] .struktur-verordnung__titel::before {
  transform: rotate(90deg);
}

.struktur-verordnung__eintrag {
  padding-bottom: calc(var(--raster) * 2);
}

.struktur-verordnung__eintrag + .struktur-verordnung__eintrag {
  border-top: 1px solid var(--farbe-rand);
  padding-top: calc(var(--raster) * 2);
}

.struktur-verordnung__kennung {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
}

.struktur-verordnung__wortlaut {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--farbe-text);
}

/* Aufklapp-Abschnitt "Einzelne Lernfelder üben" auf jeder Bereichskachel (seit der Etappe
   "Navigation verflachen"): sitzt als zweites Kind direkt in der .struktur-karte des Bereichs,
   unterhalb der Hauptflaeche, die jetzt sofort ins Quiz ueber den ganzen Bereich fuehrt. Natives
   <details> - Tastatur- und Screenreader-Bedienung ohne eigenes Skript. */

.struktur-bereich-aufklappen {
  border-top: 1px solid var(--farbe-rand);
}

.struktur-bereich-aufklappen__titel {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--raster) * 2);
  font-size: 13px;
  font-weight: 700;
  color: var(--farbe-akzent);
  cursor: pointer;
  list-style: none;
}

.struktur-bereich-aufklappen__titel::-webkit-details-marker {
  display: none;
}

.struktur-bereich-aufklappen__titel::before {
  content: "›";
  display: inline-block;
  margin-right: var(--raster);
  transition: transform 0.15s ease;
}

.struktur-bereich-aufklappen[open] .struktur-bereich-aufklappen__titel::before {
  transform: rotate(90deg);
}

.struktur-bereich-aufklappen__inhalt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
  padding: var(--raster) calc(var(--raster) * 2) calc(var(--raster) * 2) calc(var(--raster) * 2);
}

/* Die Verordnungs-Details braucht hier keinen eigenen Abstand mehr - das Gap des Elternelements
   sorgt bereits fuer den Freiraum zur Lernfeld-Liste darunter. */
.struktur-bereich-aufklappen__inhalt .struktur-verordnung {
  margin: 0;
}

/* Fehlerkartei: Gruppierung Handlungsfeld -> Themengebiet -> Lernfeld */

.fehler-bereich-gruppe {
  margin-bottom: calc(var(--raster) * 2);
}

.fehler-bereich-gruppe__titel {
  margin: 0 0 var(--raster) 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
}

/* ============================================================ Kopfzeile: rechte Gruppe (Verwaltung, Abmelden) */

.kopfzeile__rechts {
  display: flex;
  align-items: center;
  gap: var(--raster);
}

.kopfzeile__verwaltung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--farbe-text-schwach);
  text-decoration: none;
}

.kopfzeile__verwaltung svg {
  width: 22px;
  height: 22px;
}

.kopfzeile__hilfe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--farbe-text-schwach);
  text-decoration: none;
}

.kopfzeile__hilfe svg {
  width: 22px;
  height: 22px;
}

/* ============================================================ Tab-Leiste: fuenf (Lernende) bzw. sechs (Verwaltung) Eintraege bei 375px */

.tableiste__eintrag {
  padding: 0 2px;
  font-size: 10px;
}

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

.startseite {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 4);
  padding: calc(var(--raster) * 4) calc(var(--raster) * 3);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 4);
  /* Befund beim Prüfen (15.09.2026): mit nur raster*4 lag die Fußzeile (Datenschutz, seit
     dieser Etappe auch "Einführung noch einmal ansehen") unten teils unter der fest
     positionierten .tableiste und war dort nicht klickbar - jetzt wie main{} zusätzlich um
     die Tab-Leisten-Höhe angehoben. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tableiste-hoehe) + var(--raster) * 3);
  max-width: 560px;
  margin: 0 auto;
}

.start-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--farbe-text);
}

.start-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.start-abschnitt__titel {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.start-liste {
  margin: 0;
  padding-left: calc(var(--raster) * 2.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.75);
  font-size: 15px;
  line-height: 1.5;
  color: var(--farbe-text);
}

.start-teilschritt {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.start-teilschritt__titel {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--farbe-text);
}

.handlungsfeld-kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raster);
  margin: 0;
  padding: 0;
  list-style: none;
}

.handlungsfeld-kachel {
  padding: calc(var(--raster) * 2);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--farbe-text);
  display: flex;
  align-items: center;
}

.start-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raster);
}

.start-cta .schaltflaeche {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
}

.start-fusszeile {
  display: flex;
  justify-content: center;
  gap: calc(var(--raster) * 3);
  padding-top: var(--raster);
}

.start-fusszeile a {
  font-size: 13px;
  color: var(--farbe-text-schwach);
  text-decoration: none;
}

/* Baustein "hinweis" aus den Seiteninhalten: abgesetzter Kasten, keine Ampelfarbe */
.inhalt-hinweis {
  margin: 0;
  padding: calc(var(--raster) * 2);
  background: var(--farbe-akzent-flaeche);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-klein);
  font-size: 14px;
  line-height: 1.5;
  color: var(--farbe-text);
}

/* Streifen im Vorschaumodus von ueberblick.html?vorschau=1 */
.vorschau-streifen {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--raster) calc(var(--raster) * 3);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ============================================================ Rechtsseiten (Datenschutz) */

.rechtsseite {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 3);
  padding: calc(var(--raster) * 3);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 3);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--raster) * 3);
  max-width: 560px;
  margin: 0 auto;
}

.rechtsseite__titel {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
}

.platzhalter-kasten {
  padding: calc(var(--raster) * 2);
  background: var(--ampel-gelb-flaeche);
  border: 1px solid var(--ampel-gelb);
  border-radius: var(--radius);
  color: var(--ampel-gelb-text-tief);
  font-size: 14px;
  line-height: 1.5;
}

.platzhalter-kasten p {
  margin: 0;
}

.rechtsseite-liste {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 1.5);
}

.rechtsseite-liste__eintrag dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px 0;
}

.rechtsseite-liste__eintrag dd {
  margin: 0;
  font-size: 15px;
  color: var(--farbe-text);
}

.platzhaltertext {
  font-style: italic;
  color: var(--farbe-text-schwach);
}

.rechtsseite-abschnitt {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.75);
}

.rechtsseite-abschnitt__titel {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--farbe-text);
}

.rechtsseite-abschnitt p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--farbe-text);
}

/* ---- Einführung (Karten nach der ersten Anmeldung) ----
   Seit "Einführung — Scheinwerfer" (15.09.2026): statt reinem Text zeigt jede Karte zusätzlich
   ein nachgebautes Abbild der App (.einfuehrung-abbild, Bausteine .einf-*) - der jeweils
   erklärte Teil bleibt klar, alles andere mit .einf-teil bekommt unter .einfuehrung-abbild--fokus
   einen Grauschleier (abgedunkelt + leicht entsättigt statt schwarz). Der Text sitzt darunter
   und wechselt mit der Karte; ein Tipp irgendwo auf den Bildschirm blättert weiter
   (js/einfuehrung.js, ganzer .einfuehrung-bereich ist die Tippfläche). */

body.einfuehrung-seite {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.einfuehrung-bereich {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
}

.einfuehrung-kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raster);
  padding: calc(var(--raster) * 2);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--raster) * 2);
}

.einfuehrung-kopf__zurueck {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--farbe-text-schwach);
  border-radius: var(--radius-klein);
  cursor: pointer;
}

.einfuehrung-kopf__zurueck:hover { color: var(--farbe-akzent); }

/* visibility statt hidden: die Punktanzeige bleibt auf jeder Karte an derselben Stelle
   zentriert, auch wenn der Zurück-Pfeil auf der ersten Karte nicht antippbar ist. */
.einfuehrung-kopf__zurueck--versteckt {
  visibility: hidden;
  pointer-events: none;
}

.einfuehrung-kopf__punkte {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: var(--farbe-text-schwach);
}

/* G6: .stufenanzeige bringt margin-bottom fuer den Abstand unter der Anmeldung mit - hier im
   Kopf zentriert das umgebende flex:1 die Punkte bereits selbst, deshalb ohne den Abstand. */
.einfuehrung-kopf__punkte.stufenanzeige {
  margin-bottom: 0;
}

.einfuehrung-kopf__ueberspringen {
  flex: none;
  min-height: 44px;
  padding: 0 var(--raster);
  border: none;
  background: none;
  color: var(--farbe-text-schwach);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.einfuehrung-kopf__ueberspringen:hover { color: var(--farbe-akzent); }

/* ---- Abbild (Attrappe der App) ---- */

.einfuehrung-abbild-huelle {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--raster) * 3);
  overflow: hidden;
}

.einfuehrung-abbild {
  width: 100%;
  max-width: 280px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--farbe-grund);
  border: 1px solid var(--farbe-rand);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 8px 24px rgba(43, 43, 43, 0.10);
  overflow: hidden;
}

.einf-kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--raster);
  padding: var(--raster) calc(var(--raster) * 1.5);
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
}

.einf-kopf__kuerzel {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--farbe-akzent-flaeche);
  color: var(--farbe-akzent);
  font-size: 9px;
  font-weight: 700;
}

.einf-kopf__marke {
  font-size: 13px;
  font-weight: 700;
  color: var(--farbe-text);
}

.einf-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--raster) * 1.5);
  display: flex;
  flex-direction: column;
}

.einf-ansicht {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.75);
}

.einf-gruppentitel {
  margin: 0 0 2px 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--farbe-text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.einf-zeile {
  display: flex;
  align-items: center;
  gap: var(--raster);
  padding: var(--raster) calc(var(--raster) * 1.25);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
}

.einf-zeile__ampel {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.einf-zeile__ampel--rot { background: var(--ampel-rot); }
.einf-zeile__ampel--gelb { background: var(--ampel-gelb); }
.einf-zeile__ampel--gruen { background: var(--ampel-gruen); }

.einf-zeile__inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.einf-zeile__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--farbe-text);
}

/* S2: sehr kleine Texte (10px) bekommen etwas mehr statt weniger Laufweite. */
.einf-zeile__meta {
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--farbe-text-schwach);
}

.einf-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  padding: calc(var(--raster) * 1.25);
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.75);
}

.einf-karte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raster);
}

.einf-karte__frage {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--farbe-text);
}

.einf-karte__antwort {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--farbe-text-schwach);
}

.einf-karte__bewertung {
  display: flex;
  gap: calc(var(--raster) * 0.5);
}

.einf-melden {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--farbe-text-schwach);
  border-radius: var(--radius-klein);
}

.einf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-size: 11px;
  font-weight: 600;
}

.einf-knopf--sekundaer {
  background: transparent;
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-akzent);
}

.einf-optionen {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.5);
}

.einf-option {
  padding: calc(var(--raster) * 0.5) var(--raster);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  font-size: 11px;
  color: var(--farbe-text);
}

.einf-fehler-zeile {
  display: flex;
  align-items: center;
  padding: var(--raster) calc(var(--raster) * 1.25);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
}

.einf-fehler-zeile__inhalt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.einf-fehler-zeile__frage {
  font-size: 11px;
  color: var(--farbe-text);
  line-height: 1.3;
}

.einf-fehler-zeile__folge {
  font-size: 10px;
  color: var(--farbe-text-schwach);
}

.einf-tableiste {
  flex: none;
  display: flex;
  background: var(--farbe-flaeche);
  border-top: 1px solid var(--farbe-rand);
}

.einf-tableiste__eintrag {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: calc(var(--raster) * 0.75) 2px;
  font-size: 8px;
  font-weight: 600;
  color: var(--farbe-text-schwach);
}

.einf-tableiste__eintrag--deaktiviert {
  opacity: 0.45;
}

/* Scheinwerfer: solange die Karte etwas hervorhebt, bekommt jeder markierte Teil
   (.einf-teil) einen Grauschleier - weicher Uebergang, kein schwarzer Vorhang. Kopfzeile und
   Tab-Leiste des Abbilds bleiben ueber alle Karten hinweg dieselben DOM-Knoten (js/einfuehrung.js),
   deshalb wandert der klare Bereich beim Kartenwechsel sichtbar statt einfach umzuspringen. */
.einf-teil {
  transition: filter 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  border-radius: var(--radius-klein);
}

.einfuehrung-abbild--fokus .einf-teil {
  filter: grayscale(0.55) brightness(0.82);
  opacity: 0.55;
}

.einfuehrung-abbild--fokus .einf-teil.einf-teil--aktiv {
  filter: none;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--farbe-akzent);
}

.einf-tableiste__eintrag.einf-teil--aktiv {
  color: var(--farbe-akzent);
}

/* ---- Text unterhalb des Abbilds ---- */

.einfuehrung-text {
  flex: none;
  padding: calc(var(--raster) * 2) calc(var(--raster) * 3) 0 calc(var(--raster) * 3);
  text-align: center;
}

.einfuehrung-text__titel {
  margin: 0 0 var(--raster) 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
}

.einfuehrung-text__saetze {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 0.75);
  /* Sicherheitsnetz wie .rueckmeldebereich__erklaerung (stil.css, Quiz-Abschnitt): soll bei
     375 px nie noetig sein, rollt aber lieber in sich als die Seite zu verlaengern. */
  max-height: 30vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.einfuehrung-text__satz {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--farbe-text);
}

.einfuehrung-fuss {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raster);
  padding: calc(var(--raster) * 2) calc(var(--raster) * 3);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--raster) * 2);
}

.einfuehrung-tipphinweis {
  margin: 0;
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

.einfuehrung-losknopf {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* G5 (Konzept-Etappe 1, 24.09.2026): reine Deckkraft-Ueberblendungen (kein Verschieben,
     Drehen oder Skalieren) bleiben auch mit "Bewegung reduzieren" weich, statt hart
     umzuschalten - Klasse an das jeweilige Element, dessen transition-property dort
     ausschliesslich opacity ist. Noch ohne Verbraucher in Etappe D (Konzept 1); vorgesehen
     u. a. fuer den Fragenwechsel und den Meldedialog aus spaeteren Konzept-Etappen. */
  .uebergang-deckkraft {
    transition-duration: 0.18s !important;
  }

  /* F3 (Konzept-Etappe 3, 24.09.2026): erster Verbraucher von .uebergang-deckkraft (js/quiz.js
     traegt sie dauerhaft auf #fragekarte-bereich) - das Anheben um 6px entfaellt hier komplett
     (transform bleibt in jedem Zustand "none"), nur die Deckkraft-Ueberblendung bleibt dank der
     Klasse oben weiterhin sichtbar weich statt hart umzuschalten ("nur kurzes Ueberblenden"). */
  #fragekarte-bereich,
  #fragekarte-bereich.fragekarte-bereich--einblenden {
    transform: none !important;
  }
}

/* ============================================================ Profil (Etappe "Profil", 21.09.2026)
   Vier Karten auf profil.html - nur neue, mit "profil-" vorangestellte Klassen, bestehende
   Klassen (schaltflaeche, feld, hinweistext, fehlertext, verweis-still, ...) werden wiederverwendet. */

.profil-karte {
  background: var(--farbe-flaeche);
  /* Etappe "Feinschliff": kein Rahmen mehr, nur ein sehr weicher Schatten - siehe :root. */
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: calc(var(--raster) * 3);
  margin-bottom: calc(var(--raster) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.profil-karte:last-child { margin-bottom: 0; }

/* S2 (Konzept-Etappe 1): Laufweite wie .rechtsseite__titel weiter oben. */
.profil-karte__titel {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
}

.profil-info {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.profil-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raster);
  font-size: 14px;
}

.profil-zeile dt {
  color: var(--farbe-text-schwach);
}

.profil-zeile dd {
  margin: 0;
  color: var(--farbe-text);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.profil-feldzeile {
  display: flex;
  gap: var(--raster);
  align-items: center;
}

.profil-feldzeile input {
  flex: 1;
  min-width: 0;
}

.profil-status {
  margin: 0;
  font-size: 14px;
  min-height: 20px;
  color: var(--ampel-rot);
}

.profil-status--erfolg {
  color: var(--farbe-akzent);
}

/* Leere Statuszeile (noch keine Meldung) soll die min-height nicht als Lücke zeigen. */
.profil-status:empty {
  display: none;
}

.profil-hinweis-zeile {
  margin: 0;
  font-size: 14px;
  color: var(--farbe-text-schwach);
}

.profil-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--farbe-akzent);
  text-decoration: none;
}

.profil-details {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.profil-schalterzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--raster) * 2);
}

.profil-schalterzeile label {
  font-size: 15px;
  color: var(--farbe-text);
  flex: 1;
}

/* Echte Checkbox mit role="switch" - eigenes Aussehen per appearance:none, Tastatur- und
   Screenreader-Bedienung bleiben die einer Checkbox (barrierefrei ohne eigenes Skript). */
input.profil-schalter {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--farbe-rand);
  position: relative;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

input.profil-schalter::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.12s ease;
  box-shadow: 0 1px 2px rgba(43, 43, 43, 0.3);
}

input.profil-schalter:checked {
  background: var(--farbe-akzent);
}

input.profil-schalter:checked::before {
  transform: translateX(20px);
}

input.profil-schalter:disabled {
  opacity: 0.5;
  cursor: default;
}

.profil-links {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.profil-loeschen-bereich {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
  border-top: 1px solid var(--farbe-rand);
  padding-top: calc(var(--raster) * 2);
}

.profil-loeschen-bestaetigung {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.profil-gefahrtext {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--farbe-text);
}

.profil-abmelden {
  align-self: flex-start;
}

/* Karte "Meine Pruefungen" (Etappe "Termine", 21.09.2026). */

.profil-pruefungen-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.profil-pruefung-zeile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--raster) 0;
  border-bottom: 1px solid var(--farbe-rand);
}

.profil-pruefung-zeile:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profil-pruefung-name {
  margin: 0;
  font-weight: 600;
  color: var(--farbe-text);
}

.profil-pruefung-zeile-knoepfe {
  display: flex;
  gap: calc(var(--raster) * 2);
  margin-top: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.profil-pruefung-textknopf {
  background: none;
  border: none;
  padding: 8px 4px;
  min-height: 40px;
  color: var(--farbe-akzent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.profil-pruefung-textknopf:hover,
.profil-pruefung-textknopf:active {
  text-decoration: none;
}

.profil-pruefung-formular {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 1.5);
  padding: calc(var(--raster) * 1.5);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-grund);
}

.profil-pruefung-faecher {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.profil-pruefung-faecher legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

.profil-pruefung-faechergruppe {
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.profil-pruefung-gruppenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raster);
}

.profil-pruefung-gruppenname {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--farbe-text);
}

.profil-pruefung-allekeine-knopf {
  background: none;
  border: none;
  padding: 4px 0;
  min-height: 32px;
  color: var(--farbe-akzent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.profil-pruefung-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raster);
}

/* Chip-Checkbox visuell versteckt, aber im Layout und fuer Tastatur/Screenreader erreichbar -
   clip-Muster statt display:none (Befund Betreiber 21.09.2026: Formular soll barrierefrei bleiben). */
.profil-pruefung-chip-eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profil-pruefung-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 calc(var(--raster) * 1.75);
  border-radius: 999px;
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.profil-pruefung-chip--gewaehlt {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
}

.profil-pruefung-chip--gewaehlt::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 700;
}

.profil-pruefung-chip:has(.profil-pruefung-chip-eingabe:focus-visible) {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

.profil-pruefung-formular-knoepfe {
  display: flex;
  gap: var(--raster);
  flex-wrap: wrap;
}

/* ============================================================ Statistik ("Fortschrittsliste", 21.09.2026)
   Zwei Karten auf statistik.html - wie profil-karte/profil-karte__titel aufgebaut (bewusst
   dieselben Grundmasse, eigene Klassen, damit die Karte fuer sich lesbar bleibt). Beide Karten
   teilen sich dieselbe Zeilenform: oben Name links / Wert rechts, darunter ein durchgehender
   Balken ueber die volle Breite (.statistik-balken-zeile__spur/__fuellung - dieselben Klassen
   nutzt auch js/themen.js fuer den Fortschrittsbalken "Heute: A von Z Fragen"). Keine Achse,
   keine Gitterlinien (Ersatz fuer das vorherige Balkendiagramm, dessen Achsbeschriftung im
   Browser nicht unter der Balkenflaeche sass und dessen Gitterlinien nur als Stummel
   erschienen). Nur fuer Bildschirmleser gedacht: .sr-only weiter unten in dieser Datei
   (allgemein, nicht nur hier). */

.statistik-karte {
  background: var(--farbe-flaeche);
  /* Etappe "Feinschliff": kein Rahmen mehr, nur ein sehr weicher Schatten - siehe :root. */
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: calc(var(--raster) * 3);
  margin-bottom: calc(var(--raster) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

.statistik-karte:last-child { margin-bottom: 0; }

/* S2: Laufweite wie .rechtsseite__titel. */
.statistik-karte__titel {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
}

/* Liste der Balkenzeilen (beide Karten) - Zeilenabstand 16px (Auftrag) ueber den Flex-gap,
   damit Balkenzeilen und die balkenlose Countdown-Zeile (.statistik-countdown-zeile, "ohne
   zugeordnete Faecher") gleichermassen erfasst sind. */
.statistik-balken-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 2);
}

/* ---- Eine Balkenzeile: Kopf (Name links, Wert rechts) oben, Balken darunter ---- */

.statistik-balken-zeile__kopfbereich {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.statistik-balken-zeile__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raster);
  margin: 0 0 6px 0;
}

.statistik-balken-zeile__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--farbe-text);
  overflow-wrap: anywhere;
}

.statistik-balken-zeile__countdown {
  flex: none;
  font-size: 12px;
  color: var(--farbe-text-schwach);
  white-space: nowrap;
}

/* Spur: durchgehender Track ueber die volle Breite, heller neutraler Hintergrund, beide Enden
   rund. Die Fuellung (Hauptfarbe) beginnt links buendig; 0 % zeichnet keine Fuellung, nur den
   Track (Auftrag). */
.statistik-balken-zeile__spur {
  position: relative;
  width: 100%;
  height: 11px;
  border-radius: 999px;
  background: var(--farbe-rand);
  overflow: hidden;
}

.statistik-balken-zeile__fuellung {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--farbe-akzent);
  /* keine Farbverlaeufe/Schatten (Auftrag) */
}

/* Segmente des gestapelten Vierteilungs-Balkens (Punkt 5, Etappe "Rueckmeldungen 22.09.") -
   liegen absolut in .statistik-balken-zeile__spur, dieselben Farben wie in der Zahlenzeile
   (.statistik-balken-zeile__details-farbe--* weiter unten). */
.statistik-balken-zeile__segment {
  position: absolute;
  top: 0;
  bottom: 0;
}

.statistik-balken-zeile__segment--sicher { background: var(--ampel-gruen); }
.statistik-balken-zeile__segment--wackelig { background: var(--ampel-gelb); }
.statistik-balken-zeile__segment--falsch { background: var(--ampel-rot); }

.statistik-balken-zeile__wert {
  flex: none;
  font-size: 13px;
  color: var(--farbe-text-schwach);
  text-align: right;
  white-space: nowrap;
}

.statistik-balken-zeile__unterzeile {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--farbe-text-schwach);
}

/* ---- Aufklappbare Einzelheiten (nur "Sicherheit je Fach") ---- */

.statistik-balken-zeile__details {
  margin-top: var(--raster);
  padding-top: var(--raster);
  border-top: 1px solid var(--farbe-rand);
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.statistik-balken-zeile__details-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--farbe-text-schwach);
}

.statistik-balken-zeile__details-punkt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--farbe-text);
  font-weight: 600;
}

.statistik-balken-zeile__details-farbe {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
}

.statistik-balken-zeile__details-farbe--richtig { background: var(--ampel-gruen); }
.statistik-balken-zeile__details-farbe--wackelig { background: var(--ampel-gelb); }
.statistik-balken-zeile__details-farbe--falsch { background: var(--ampel-rot); }
.statistik-balken-zeile__details-farbe--offen { background: var(--farbe-rand); }

.statistik-balken-zeile__uebenlink {
  align-self: flex-start;
}

/* ---- Pruefung ohne zugeordnete Faecher: reine Countdown-Zeile, kein Balken ---- */

.statistik-countdown-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raster);
  font-size: 13px;
}

.statistik-countdown-zeile .statistik-balken-zeile__name {
  margin: 0;
}

/* ---- Karte "Lernzeit" (A3-A5, Etappe "Lernminuten", 24.09.2026) ---- */

/* 7 senkrechte Balken (js/balken.js baueWochenbalken()) - fester Bereich, damit die Beschriftung
   darunter nicht mitwaechst/-schrumpft. */
.lernzeit-woche {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lernzeit-woche__saeulen {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 88px;
}

.lernzeit-woche__saeule {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.lernzeit-woche__fuellung {
  width: 100%;
  max-width: 22px;
  border-radius: 4px;
  background: var(--farbe-akzent);
  transform-origin: center bottom;
}

.lernzeit-woche__fuellung--heute {
  background: var(--farbe-akzent-tief);
}

.lernzeit-woche__fuellung--leer {
  height: 3px;
  background: var(--farbe-rand);
}

.lernzeit-woche__beschriftung {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.lernzeit-woche__tag {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--farbe-text-schwach);
}

.lernzeit-woche__tag--heute {
  font-weight: 700;
  color: var(--farbe-text);
}

/* S1 (Konzept Abschnitt 3, uebernommen in Etappe "Lernminuten", 24.09.2026): grosse Hauptzahl,
   ruhige Nebenwerte - hier fuer den Tagesdurchschnitt. Immer zusammen mit der vorhandenen
   .ziffern-Klasse verwenden (gleich breite Ziffern), nicht als Ersatz dafuer. */
.kennzahl {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--farbe-text);
}

.kennzahl small {
  font-size: 1rem;
  font-weight: 400;
  color: var(--farbe-text-schwach);
}

.lernzeit-kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lernzeit-kennzahl__label {
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

.lernzeit-kennzahl__trend {
  margin: 0;
  font-size: 13px;
  color: var(--farbe-text-schwach);
}

/* ---- Wachstumsanimation beim Oeffnen (A7, Etappe "Lernminuten", 24.09.2026) ----
   js/balken.js wachse() setzt/entfernt nur die transform-Eigenschaft - der Ausgangspunkt
   (transform-origin) haengt von der Wuchsrichtung ab und steht darum hier bei den jeweiligen
   Elementen, nicht in der Animations-Klasse selbst. "prefers-reduced-motion: reduce" braucht
   keine eigene Regel: der globale @media-Block weiter unten (G5) druesst jede
   transition-duration auf 0.01ms, das Element steht dann praktisch sofort im Endzustand. */
.statistik-balken-zeile__fuellung,
.statistik-balken-zeile__segment,
.balken__abschnitt {
  transform-origin: left center;
}

.waechst {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================ Nur fuer Bildschirmleser
   (allgemein verwendbar, nicht nur in der Statistik) - Inhalt bleibt vorhanden und wird
   vorgelesen, ist aber optisch unsichtbar und nimmt keinen Platz in der Seite ein. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* table nimmt sonst die Mindestbreite seiner Spalteninhalte an und ragt trotz width:1px ueber
   den Bildschirmrand hinaus (Befund: table.sr-only ragte bis x=458 hinaus, Querscrollen bei
   375 px). display:block schaltet die Tabellen-Breitenberechnung ab. */
table.sr-only {
  display: block;
}

/* ============================================================ Bibliothek (Etappe "Bibliothek —
   App-Seite", 21.09.2026) - Uebersicht der Blaetter, nach Fach gruppiert. Die Eintraege selbst
   nutzen dieselben Karten wie die Themenliste (.struktur-karte usw., siehe js/themen.js); nur
   die Gruppierung ist eigens, weil der Auftrag mindestens 12 px Abstand zwischen den Eintraegen
   verlangt - mehr als das 8-px-Raster von .themen-liste liefert. */
.bibliothek-fach + .bibliothek-fach {
  margin-top: calc(var(--raster) * 4);
}

/* Fachtitel wie die Pfadzeile der Blaetter (bibliothek.css): klein, gesperrt, in der Hauptfarbe. */
.bibliothek-fach__titel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 calc(var(--raster) * 1.5);
  padding-bottom: calc(var(--raster) * 0.75);
  border-bottom: 1px solid var(--farbe-rand);
  color: var(--farbe-akzent);
}

.bibliothek-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* blatt.html - zwei Knoepfe ueber dem Blatt (PDF herunterladen, Drucken), mit Abstand
   zueinander; auf schmalen Bildschirmen untereinander statt beengt nebeneinander. */
.blatt-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--raster) * 2);
  margin-bottom: var(--raster);
  max-width: 210mm;
  margin-left: auto;
  margin-right: auto;
}

.blatt-knoepfe .schaltflaeche--sekundaer {
  flex: 1 1 auto;
}