/* FahrCampus – Grundstil (Muster 5: ruhig und hell, dazu Tagesziel-Ring, Stufen-Knöpfe, Ampel-Raster).
   Aufbau: 1 Schrift · 2 Farben (Tokens) · 3 Grundlagen · 4 Rahmen und Navigation · 5 Bausteine · 6 Seiten · 7 Wisch-Karte/Runde
           · 8 Dialoge · 9 Bewegung · 10 Anpassungen für breite und flache Fenster */

/* ---------------------------------------------------------------- 1 Schrift (Lato, selbst gehostet, OFL) */
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url("../schriften/lato-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url("../schriften/lato-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lato; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../schriften/lato-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lato; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../schriften/lato-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Handschrift Caveat (selbst gehostet, OFL; variabel 400–700): nur für die Skizzen. Die SVG-Skizzen sind mit Caveat gezeichnet und geprüft; als Bild (<img>) kann ein SVG keine Seitenschrift laden, darum steht es inline auf der Seite (bausteine/skizze-bild.js) und im PDF-Bild mit eingebetteter Schrift. */
@font-face { font-family: Caveat; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../schriften/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Caveat; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../schriften/caveat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- 2 Farben und Maße */
:root {
  --grund: 17px;
  --skala: 1;
  --hg: #f4f7f6;
  --flaeche: #ffffff;
  --text: #1b2430;
  --text2: #5a6575;
  --rand: #d6e0dc;
  --rand-fein: #eaf0ed;
  --spur: #e0e8e4;
  --box: #eef4f1;
  --akzent: #0d5240;
  --knopf: #0d5240;
  --knopf-schatten: #06302a;
  --gut: #1e7a46;
  --gut-schatten: #145431;
  --gut-text: #1e7a46;
  --nochmal: #c2410c;
  --nochmal-schatten: #8f2f08;
  --nochmal-text: #c2410c;
  --unsicher: #3d5a80;
  --unsicher-schatten: #2a3f5c;
  --unsicher-text: #3d5a80;
  --hervor: #e3f4ec;
  --warn-bg: #fdf0e8;
  --warn-rand: #f2c3a5;
  --fokus: #1a56db;
  --schatten: 0 8px 24px rgba(27, 36, 48, 0.08);
  --amp-gruen: #1e7a46;
  --amp-gelb: #8fcfae;
  --amp-rot: #e8762c;
  --amp-grau: #c9ced6;
  --erfolg: #b9e6cf;
  --nav-hoehe: 64px;
  --schiene: 96px;
  --radius: 14px;
  color-scheme: only light;
}
:root[data-design="dunkel"] {
  --hg: #0e1513;
  --flaeche: #16201d;
  --text: #e6ebf1;
  --text2: #a9b4c2;
  --rand: #26332f;
  --rand-fein: #1f2a27;
  --spur: #26332f;
  --box: #1c2824;
  --akzent: #5fd3a3;
  --knopf: #127a59;
  --knopf-schatten: #0b4f39;
  --gut: #23814e;
  --gut-schatten: #175a36;
  --gut-text: #5fd08e;
  --nochmal-text: #ff9966;
  --unsicher-text: #9cb8de;
  --hervor: #1d3a2e;
  --warn-bg: #3a2418;
  --warn-rand: #6b3f26;
  --fokus: #8ab4ff;
  --schatten: 0 8px 24px rgba(0, 0, 0, 0.4);
  --amp-gruen: #2a8a55;
  --amp-grau: #34433e;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="auto"] {
    --hg: #0e1513;
    --flaeche: #16201d;
    --text: #e6ebf1;
    --text2: #a9b4c2;
    --rand: #26332f;
    --rand-fein: #1f2a27;
    --spur: #26332f;
    --box: #1c2824;
    --akzent: #5fd3a3;
    --knopf: #127a59;
    --knopf-schatten: #0b4f39;
    --gut: #23814e;
    --gut-schatten: #175a36;
    --gut-text: #5fd08e;
    --nochmal-text: #ff9966;
    --unsicher-text: #9cb8de;
    --hervor: #4a3a12;
    --warn-bg: #33270f;
    --warn-rand: #6b5220;
    --fokus: #8ab4ff;
    --schatten: 0 8px 24px rgba(0, 0, 0, 0.4);
    --amp-gruen: #2a8a55;
    --amp-grau: #34433e;
    color-scheme: dark;
  }
}
:root[data-schrift="S"] { --grund: 15px; }
:root[data-schrift="L"] { --grund: 19px; }
:root[data-schrift="XL"] { --grund: 22px; }
:root[data-gross="an"] { --skala: 1.4; }
@media (min-width: 1600px) { :root { --skala: 1.4; } }

/* ---------------------------------------------------------------- 3 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(var(--grund) * var(--skala)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--hg); }
body {
  margin: 0;
  background: var(--hg);
  color: var(--text);
  font-family: Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }
p { margin: 0 0 0.7em; }
ul, ol { margin: 0; padding-left: 1.3em; }
img, svg { max-width: 100%; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--flaeche); padding: 10px 14px; z-index: 100; }
.sprung:focus { left: 8px; top: 8px; }
.klein { font-size: 0.85rem; color: var(--text2); }
.block { display: block; }
.laden { padding: 40px 18px; color: var(--text2); text-align: center; }
.symbol { flex: none; vertical-align: -0.2em; }
mark.zahl-marke { background: var(--hervor); color: inherit; padding: 0 3px; border-radius: 4px; }
.hinweis { color: var(--nochmal-text); }

/* ---------------------------------------------------------------- 4 Rahmen und Navigation */
.app { min-height: 100vh; min-height: 100dvh; }
/* Wasserzeichen: das FahrCampus-Logo ganz dezent hinter allem (Hinweis auf die Herkunft der Unterlagen). Nur Hintergrund, nie anklickbar. */
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url('../marke/logo.webp') no-repeat center 58% / min(74vw, 400px) auto; opacity: 0.055; }
.app { position: relative; z-index: 1; } /* eigene Stapelebene über dem Wasserzeichen: neue Ebenen direkt an <body> brauchen einen z-index über 1 (Toast 60, Intro 1000) */
@media print { body::before { opacity: 0.08; } }
.spalte { min-width: 0; }
.inhalt { outline: none; padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px) + 12px); }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--flaeche); border-top: 1px solid var(--rand);
}
.nav-ziel {
  flex: 1; min-width: 48px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text2); font-size: 0.75rem; text-decoration: none;
}
.nav-ziel:hover { text-decoration: none; }
.nav-ziel[aria-current="page"] { color: var(--akzent); font-weight: 700; }
.nav-ziel[aria-current="page"] .symbol { stroke-width: 2.4; }
.leiste { position: sticky; top: 0; z-index: 25; }
.leiste-eintrag {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 16px; background: var(--akzent); color: var(--hg); font-weight: 700;
}
.leiste-eintrag.warnung { background: var(--warn-bg); color: var(--text); border-bottom: 1px solid var(--warn-rand); font-weight: 400; }
.leiste-eintrag .knopf { background: var(--hg); color: var(--akzent); box-shadow: none; }
html[data-vollbild="an"] .nav, html[data-vollbild="an"] .leiste { display: none; }
html[data-vollbild="an"] .inhalt { padding-bottom: 0; }

.seite { width: 100%; max-width: 46rem; margin: 0 auto; padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.seite-schmal { max-width: 34rem; }
.seiten-titel { font-size: 1.5rem; font-weight: 900; }
.kopf-klein { font-size: 0.75rem; font-weight: 700; color: var(--text2); letter-spacing: 0.04em; margin-top: 6px; }
.zurueck-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; align-self: flex-start; }

/* ---------------------------------------------------------------- 5 Bausteine */
/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; background: var(--flaeche); color: var(--akzent);
}
.knopf:hover { text-decoration: none; }
.knopf.haupt { background: var(--knopf); color: #fff; }
.knopf.rand { background: var(--flaeche); border-color: var(--rand); color: var(--akzent); }
.knopf.rand.an { background: var(--hervor); }
.knopf.grau { background: var(--spur); color: var(--text2); }
.knopf.stufe { box-shadow: 0 4px 0 var(--knopf-schatten); margin-bottom: 4px; transition: transform 0.08s, box-shadow 0.08s; }
.knopf.stufe:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--knopf-schatten); }
.knopf.aus, .knopf:disabled { opacity: 0.55; pointer-events: none; }
.klein-knopf { min-height: 44px; font-size: 0.9rem; padding: 0 14px; }
.gross-knopf { min-height: 54px; font-size: 1.1rem; font-weight: 900; }
.knopf-zusatz { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.8; }
.knopf-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf-reihe > * { flex: 1 1 10rem; }
.knopf-reihe.unten { margin-top: 8px; }
.knopf-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 10px; }
.grow1 { flex: 1; }
.grow2 { flex: 2; }
.text-knopf, .text-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--akzent);
  font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.text-link { padding: 0 2px; }
.icon-knopf {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: none; color: var(--text2);
}
.icon-knopf.an, .icon-knopf[aria-pressed="true"] { color: var(--nochmal-text); }
.icon-knopf[aria-pressed="true"] .symbol path { fill: currentColor; }

/* Karten, Listen */
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; }
.liste-karte { list-style: none; padding: 0; margin: 0; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.liste-karte > li + li, .liste-karte > a + a, .liste-karte > .bereich-zeile + .bereich-zeile { border-top: 1px solid var(--rand-fein); }
.listen-zeile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; color: var(--text); text-decoration: none; }
.listen-zeile:hover { text-decoration: none; background: var(--box); }
.listen-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.leer { text-align: center; padding: 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.leer-titel { font-size: 1.15rem; font-weight: 700; }
.leer-text { color: var(--text2); max-width: 30rem; margin: 0; }
.hinweis-leiste { background: var(--box); border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; margin: 0; font-size: 0.9rem; }
.hinweis-leiste.warnung { background: var(--warn-bg); border-color: var(--warn-rand); }
.hinweise { display: flex; flex-direction: column; gap: 8px; }
.marke { display: inline-block; padding: 2px 9px; border-radius: 10px; background: var(--box); border: 1px solid var(--rand); font-size: 0.75rem; color: var(--text2); }
.marke-hinweis { background: var(--warn-bg); border-color: var(--warn-rand); color: var(--text); }
.marken-reihe, .wk-marken, .typ-zaehler { display: flex; flex-wrap: wrap; gap: 6px; }
.status-marke { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.status-ok { color: var(--gut-text); }
.status-laut { color: var(--akzent); }
.status-unklar { color: var(--nochmal-text); }

/* Fortschrittsbalken */
.balken { display: block; height: 6px; border-radius: 3px; background: var(--spur); overflow: hidden; min-width: 40px; }
.balken-hoch { height: 10px; border-radius: 5px; }
.balken-fuell { display: block; height: 100%; border-radius: 3px; background: var(--akzent); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 6px 14px; border-radius: 22px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font-size: 0.88rem; text-align: left;
}
.chip-an, .chip[aria-pressed="true"] { background: var(--knopf); border-color: var(--knopf); color: #fff; }
.chip-rand { border-color: var(--akzent); color: var(--akzent); font-weight: 700; }
.chip-filter { border-color: var(--akzent); color: var(--akzent); font-weight: 700; }
.chip-leer { opacity: 0.55; }
.filterleiste { display: flex; flex-direction: column; gap: 6px; }
.treffer-zahl { font-size: 0.85rem; color: var(--text2); }
.feld {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text); font: inherit;
}
.feld-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 700; }
textarea.feld { resize: vertical; min-height: 6rem; }
select.feld { appearance: auto; }

/* Ampel */
.ampel-raster { display: grid; grid-template-columns: repeat(var(--spalten, 9), minmax(0, 1fr)); gap: 4px; }
.ampel-zelle { display: block; height: 44px; border-radius: 6px; background: var(--amp-grau); }
.ampel-zelle.amp-gruen, .ampel-punkt-gruen { background: var(--amp-gruen); }
.ampel-zelle.amp-gelb { background: var(--amp-gelb); }
.ampel-zelle.amp-rot { background: var(--amp-rot); }
.ampel-zelle:hover { text-decoration: none; opacity: 0.85; }
.ampel-marke { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text2); white-space: nowrap; }
.ampel-punkt { width: 10px; height: 10px; border-radius: 5px; background: var(--amp-grau); display: inline-block; }
.amp-gruen .ampel-punkt { background: var(--amp-gruen); }
.amp-gelb .ampel-punkt { background: var(--amp-gelb); }
.amp-rot .ampel-punkt { background: var(--amp-rot); }
.ampel-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ampel-legende > span { display: inline-flex; align-items: center; gap: 5px; }

/* Bereiche und Schnellfilter */
.bereich-quadrat {
  flex: none; width: 40px; height: 40px; border-radius: 10px; color: #fff; font-weight: 900; font-size: 0.82rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.klein-quadrat { width: 30px; height: 30px; border-radius: 8px; font-size: 0.7rem; }
.bereich-zeile { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; color: var(--text); text-decoration: none; }
.bereich-zeile:hover { text-decoration: none; background: var(--box); }
.bereich-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bereich-name { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.bereich-rechts { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.82rem; line-height: 1.2; min-width: 4.6rem; text-align: right; }
.bereich-rechts .faellig { color: var(--nochmal-text); }
.bereich-rechts .ruhig { color: var(--text2); }
.bereiche-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.sortierung { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sort-knopf { min-height: 44px; padding: 4px 12px; border-radius: 22px; border: 1px solid var(--rand); background: var(--flaeche); font-size: 0.8rem; }
.sort-knopf.an { background: var(--box); border-color: var(--akzent); color: var(--akzent); font-weight: 700; }
.bereichs-gruppe { display: flex; flex-direction: column; gap: 6px; }
.schnell-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.schnell-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 4px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text); text-align: center; text-decoration: none;
}
.schnell-kachel:hover { text-decoration: none; background: var(--box); }
.schnell-zahl { font-size: 1.15rem; font-weight: 900; color: var(--akzent); }
.schnell-kachel.warnung .schnell-zahl { color: var(--nochmal-text); }
.schnell-wort { font-size: 0.75rem; font-weight: 700; }
.lernset-zeile { display: flex; align-items: center; min-height: 52px; }
.lernset-link { flex: 1; display: flex; flex-direction: column; padding: 8px 14px; color: var(--text); min-width: 0; }
.lernset-link:hover { text-decoration: none; }
.lernset-name { font-weight: 700; overflow-wrap: anywhere; }
.lernsets-block, .lernsets-fest { margin-top: 6px; }
.bereich-kopf { display: flex; gap: 12px; align-items: center; }
.beschreibung { color: var(--text2); font-size: 0.95rem; }
.fb-detail { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0 12px; }
.fb-detail > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-weight: 700; cursor: pointer; list-style: none; }
.fb-detail > summary::-webkit-details-marker { display: none; }
.fb-detail[open] > summary .symbol { transform: rotate(180deg); }
.fb-detail > .chips, .fb-detail > ul, .fb-detail > .fb-unter { padding-bottom: 12px; }
.fb-unter { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.fb-text { padding: 12px; }
.fb-gruppe { display: flex; flex-direction: column; gap: 8px; }
.falsch-chips { margin-bottom: 4px; }

/* Start */
.start-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.datum { text-transform: none; }
.serie { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; color: var(--text2); }
.serie.an { color: var(--nochmal-text); }
.start-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.spalte-links, .spalte-rechts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ziel-kachel { flex-direction: row; align-items: center; gap: 16px; }
.ring { flex: none; width: 84px; height: 84px; }
.ring-spur { stroke: var(--spur); }
.ring-fuell { stroke: var(--gut); transition: stroke-dasharray 0.4s; }
.ring-text { fill: var(--text); font-size: 18px; font-weight: 700; font-family: inherit; }
.ziel-titel { font-weight: 900; font-size: 1.05rem; }
.ziel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.woche { display: flex; justify-content: space-between; gap: 4px; }
.woche-punkt {
  width: 38px; height: 38px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; border: 2px solid var(--rand); color: var(--text2); background: var(--flaeche);
}
.woche-punkt.getan { background: var(--gut); border-color: var(--gut); color: #fff; }
.woche-punkt.heute { border: 2px dashed var(--nochmal); color: var(--nochmal-text); }
.woche-punkt.heute.getan { border-style: solid; color: #fff; }
.plan-zeile { display: flex; flex-direction: column; gap: 6px; }
.gruppe-zeile { display: grid; grid-template-columns: minmax(0, 7.5rem) 1fr 3rem; gap: 10px; align-items: center; min-height: 44px; color: var(--text); font-size: 0.88rem; }
.gruppe-zeile:hover { text-decoration: none; }
.gruppe-prozent { text-align: right; font-weight: 700; }
.erfolge { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)); gap: 8px; }
.erfolg { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 0.75rem; color: var(--text2); padding: 8px 4px; border: 1px solid var(--rand); border-radius: var(--radius); }
.erfolg.erreicht { color: var(--text); }
.erfolg-kreis { width: 34px; height: 34px; border-radius: 17px; background: var(--spur); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.7rem; color: var(--text2); }
.erfolg.erreicht .erfolg-kreis { background: var(--erfolg); color: #0d3b2c; }

/* Detailseiten */
.detail-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.detail-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.antwort-box { background: var(--flaeche); border: 1px solid var(--rand); border-left: 5px solid var(--gut); border-radius: var(--radius); padding: 12px 14px; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.intro { font-size: 1.02rem; color: var(--text2); }
.daten-liste { margin: 0; display: grid; gap: 4px; }
.daten-liste > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--rand-fein); }
.daten-liste dt { color: var(--text2); font-size: 0.88rem; }
.daten-liste dd { margin: 0; overflow-wrap: anywhere; }
.verlauf { display: flex; gap: 4px; flex-wrap: wrap; }
.verlauf-punkt { width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; }
.v-r { background: var(--gut); } .v-u { background: var(--unsicher); } .v-f { background: var(--nochmal); }
.amtlich { margin: 0; padding: 10px 14px; border-left: 4px solid var(--akzent); background: var(--flaeche); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.95rem; }
.rp-liste .rp-punkt { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; list-style: none; }
.rp-punkt.stufe-2 { padding-left: 30px; }
.rp-punkt.ueber .rp-text { font-weight: 700; }
.rp-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ich-kann { min-height: 44px; }
.abhak-label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.abhak-label input, .skala-wahl input { width: 22px; height: 22px; accent-color: var(--gut); flex: none; }

/* Blöcke */
.bloecke { display: flex; flex-direction: column; gap: 14px; }
.block-merke, .block-achtung { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--box); border-left: 5px solid var(--akzent); }
.block-achtung { background: var(--warn-bg); border-left-color: var(--nochmal); }
.block-merke p, .block-achtung p { margin: 0; }
.block-kopf { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text2); margin-bottom: 2px; }
.block-titel { font-weight: 700; margin-bottom: 4px; }
.block-titel.gross { font-size: 1.1rem; }
.block-liste li + li { margin-top: 4px; }
.block-zitat { margin: 0; }
.block-zitat blockquote, .fund-zitat { margin: 4px 0; padding: 6px 12px; border-left: 3px solid var(--rand); color: var(--text2); font-size: 0.9rem; font-style: italic; }
.block-link { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text); }
.block-link-titel { font-weight: 700; }
.block-skizze { margin: 0; }
.skizze-bild { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--rand); border-radius: 10px; }
.block-skizze figcaption { margin-top: 6px; font-size: 0.88rem; }
.fundstellen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fundstelle { font-size: 0.9rem; }
.fund-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 36px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.video-karte { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.video-titel { font-weight: 700; }
.video-meta { font-size: 0.85rem; color: var(--text2); }
.video-warum { margin: 0; font-size: 0.92rem; }
.video-hinweis { margin: 0; }
.video-karte .knopf { align-self: flex-start; margin-top: 6px; }

/* Tabellen und Zeilenkarten */
.tabelle-block { container-type: inline-size; display: flex; flex-direction: column; gap: 6px; }
.tabelle-titel { font-weight: 700; }
.tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; background: var(--flaeche); }
.tabelle th, .tabelle td { border: 1px solid var(--rand); padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.tabelle th { background: var(--box); }
.tabelle-fuss { font-size: 0.85rem; color: var(--text2); }
.zeilenkarten { display: flex; flex-direction: column; gap: 8px; }
.zeilenkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.zeilenkarte-feld { display: flex; flex-direction: column; gap: 0; }
.zeilenkarte-name { font-size: 0.72rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.03em; }
.zeilenkarte-wert { overflow-wrap: anywhere; }
.tabelle-breit .nur-breit { display: none; }
@container (min-width: 600px) {
  .tabelle-breit .zeilenkarten { display: none; }
  .tabelle-breit .nur-breit { display: block; }
}
.plan-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 8px; margin: 0; }
.plan-kopf dt { font-size: 0.72rem; color: var(--text2); font-weight: 700; text-transform: uppercase; }
.plan-kopf dd { margin: 0; font-weight: 700; }
.abhak-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.abhak-punkt, .bogen-kriterium { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 12px; }
.abhak-punkt.kritisch { border-left: 5px solid var(--nochmal); }
.kritisch-marke { color: var(--nochmal-text); font-size: 0.8rem; font-weight: 700; }
.skala { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.skala-wahl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.block-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }

/* Suche */
.such-label { position: relative; display: block; }
.suchsymbol { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text2); display: inline-flex; pointer-events: none; }
.suchfeld { padding-left: 44px; font-size: 1.05rem; }
.suche-ergebnis { display: flex; flex-direction: column; gap: 12px; }
.treffer-gruppe { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.treffer-zeile { min-height: 48px; }

/* Toast */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px) + 10px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 12px; }
html[data-vollbild="an"] .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 30rem; padding: 10px 14px; border-radius: 12px; background: #1b2430; color: #fff; font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
:root[data-design="dunkel"] .toast { background: #e6ebf1; color: #11161d; }
.toast-fehler { background: var(--nochmal); }
.toast-knopf { min-height: 44px; padding: 0 10px; border: 0; background: none; color: #5fd3a3; font-weight: 900; }
:root[data-design="dunkel"] .toast-knopf { color: #0d5240; }
@media (prefers-color-scheme: dark) {
  /* Design "Automatisch" auf einem dunklen Gerät: Toast genau wie im Design "Dunkel" (hell auf dunkel) */
  :root[data-design="auto"] .toast { background: #e6ebf1; color: #11161d; }
  :root[data-design="auto"] .toast-knopf { color: #0d5240; }
}

/* ---------------------------------------------------------------- 7 Wisch-Karte und Runde */
.runde {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 40rem; margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.runde-kopf { display: flex; gap: 12px; align-items: center; padding: 10px 16px 0; }
.runde-balken { flex: 1; height: 10px; border-radius: 5px; background: var(--spur); overflow: hidden; }
.runde-balken-fuell { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--gut); transition: width 0.3s; }
.runde-zaehler { font-weight: 900; min-width: 3.4rem; text-align: right; }
.runde-leiste { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 16px 0; min-height: 44px; }
.runde-modus-box { display: flex; align-items: center; gap: 6px; min-width: 0; }
.runde-lf { flex: none; }
.runde-modus { font-size: 0.82rem; color: var(--text2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runde-aktionen { display: inline-flex; flex: none; }
.runde-mitte { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 16px 0; overflow-y: auto; }
.runde-fuss { padding: 12px 16px 14px; flex: none; }
.wk-feld { flex: 1; min-height: 0; display: flex; perspective: 1200px; }
.wk-karte, .wk-geist {
  flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 22px; box-shadow: var(--schatten);
  overflow-x: hidden; overflow-y: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; overscroll-behavior: contain;
}
.wk-geist { position: fixed; overflow: hidden; z-index: 40; pointer-events: none; }
.wk-karte.zurueck { transition: transform 0.2s ease-out; }
.wk-karte.dreht { animation: wk-dreht 0.3s ease; }
.wk-karte.neu-da { animation: wk-neu 0.25s ease; }
@keyframes wk-dreht { from { transform: rotateY(-88deg); } to { transform: rotateY(0); } }
@keyframes wk-neu { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.wk-leiste { height: 8px; flex: none; }
.wk-innen { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; hyphens: auto; -webkit-user-select: text; user-select: text; }
.wk-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--text2); }
.wk-fach { white-space: nowrap; font-weight: 700; }
.wk-frage { font-size: 1.28rem; font-weight: 700; line-height: 1.38; }
.wk-frage.klein-frage { font-size: 1rem; color: var(--text2); }
.wk-antwort { font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.wk-tipp { font-size: 0.85rem; color: var(--text2); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wk-eselsbruecke { background: var(--box); border-radius: 12px; padding: 11px; font-size: 0.9rem; line-height: 1.4; }
.wk-extras { display: flex; flex-direction: column; border-top: 1px solid var(--rand-fein); }
.wk-detail { border-bottom: 1px solid var(--rand-fein); }
.wk-detail > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 0.92rem; font-weight: 700; cursor: pointer; list-style: none; }
.wk-detail > summary::-webkit-details-marker { display: none; }
.wk-detail[open] > summary .symbol { transform: rotate(180deg); }
.wk-detail-inhalt { padding: 0 0 12px; font-size: 0.92rem; display: flex; flex-direction: column; gap: 8px; }
.wk-fundzeile { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }
.zaehler { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.zaehler-knopf { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--rand); background: var(--flaeche); font-size: 1.3rem; font-weight: 700; }
.zaehler-wert { min-width: 4.5rem; text-align: center; font-weight: 700; }
.wk-stempel {
  position: absolute; top: 22px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font-weight: 900; font-size: 1.2rem;
  text-transform: uppercase; opacity: 0; pointer-events: none; background: var(--flaeche);
}
.wk-stempel.gut { right: 18px; color: var(--gut-text); transform: rotate(8deg); }
.wk-stempel.nochmal { left: 18px; color: var(--nochmal-text); transform: rotate(-8deg); }

.antwort-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.antwort-knopf {
  min-height: 60px; border: 0; border-radius: var(--radius); color: #fff; font-weight: 900; font-size: 0.95rem; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin-bottom: 4px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.antwort-knopf:active { transform: translateY(3px); }
.antwort-knopf.nochmal { background: var(--nochmal); box-shadow: 0 4px 0 var(--nochmal-schatten); }
.antwort-knopf.unsicher { background: var(--unsicher); box-shadow: 0 4px 0 var(--unsicher-schatten); }
.antwort-knopf.gewusst { background: var(--gut); box-shadow: 0 4px 0 var(--gut-schatten); }
.antwort-knopf.nochmal:active { box-shadow: 0 1px 0 var(--nochmal-schatten); }
.antwort-knopf.unsicher:active { box-shadow: 0 1px 0 var(--unsicher-schatten); }
.antwort-knopf.gewusst:active { box-shadow: 0 1px 0 var(--gut-schatten); }
.antwort-zusatz { font-size: 0.72rem; font-weight: 400; min-height: 1em; }
.zeige-knopf { width: 100%; }

.ende { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 24px; }
.ende-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ende-wert { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: var(--radius); color: #fff; font-weight: 700; font-size: 0.85rem; }
.ende-wert.gut { background: var(--gut); } .ende-wert.unsicher { background: var(--unsicher); } .ende-wert.nochmal { background: var(--nochmal); }
.ende-zahl { font-size: 1.8rem; font-weight: 900; line-height: 1.1; }
.ende-knoepfe { display: flex; flex-direction: column; gap: 10px; }
.ende-wackel { display: flex; flex-direction: column; gap: 6px; }

/* ---------------------------------------------------------------- 8 Dialoge */
.dialog {
  border: 0; padding: 0; color: var(--text); background: var(--flaeche); max-width: none; max-height: none;
  display: flex; flex-direction: column;
}
.dialog:not([open]) { display: none; }
.dialog::backdrop { background: rgba(27, 36, 48, 0.55); }
.dialog-blatt { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 40rem; max-height: 88dvh; border-radius: 26px 26px 0 0; }
.dialog-mitte { width: min(92vw, 28rem); border-radius: 20px; margin: auto; max-height: 90dvh; }
.dialog-kopf { padding: 12px 18px 0; display: flex; flex-direction: column; gap: 6px; flex: none; }
.dialog-griff { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--rand); }
.dialog-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog-titel { font-size: 1.3rem; font-weight: 900; margin-right: auto; }
.dialog-rumpf { padding: 10px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overscroll-behavior: contain; }
.dialog-fuss { display: flex; gap: 8px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rand-fein); flex: none; }
.dialog-fuss .knopf { flex: 1; }

/* ---------------------------------------------------------------- 9 Bewegung reduzieren */
html[data-bewegung="aus"] *, html[data-bewegung="aus"] *::before, html[data-bewegung="aus"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-bewegung="auto"] *, html[data-bewegung="auto"] *::before, html[data-bewegung="auto"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- 10 Breite und flache Fenster */
@media (min-width: 600px) {
  .seite { padding: 16px 24px 20px; }
}
/* Seitenleiste links: flaches Querformat (Handy quer) und ab 900 px Breite */
@media (max-height: 499px) and (orientation: landscape), (min-width: 900px) {
  .nav {
    top: 0; right: auto; bottom: 0; width: var(--schiene); height: auto; flex-direction: column; justify-content: flex-start; gap: 4px;
    border-top: 0; border-right: 1px solid var(--rand); padding: 10px 0; overflow-y: auto;
  }
  .nav-ziel { flex: none; min-height: 56px; }
  .spalte { margin-left: var(--schiene); }
  .inhalt { padding-bottom: 12px; }
  html[data-vollbild="an"] .spalte { margin-left: 0; }
  .toasts { left: var(--schiene); bottom: 14px; }
  html[data-vollbild="an"] .toasts { left: 0; bottom: 14px; }
}
@media (min-width: 900px) {
  .seite { max-width: 62rem; }
  .seite-schmal, .seite-karte, .seite-lernteil, .seite-suche, .seite-bereich, .seite-kompetenz, .seite-mehr { max-width: 46rem; }
  .start-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runde { max-width: 44rem; }
  .dialog-blatt { max-width: 44rem; }
}
/* Handy quer (flach): Karte links, Antwort-Knöpfe rechts */
@media (max-height: 499px) and (orientation: landscape) {
  .runde { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "kopf kopf" "leiste fuss" "mitte fuss"; max-width: none; }
  .runde-kopf { grid-area: kopf; padding-top: 6px; }
  .runde-leiste { grid-area: leiste; min-height: 40px; }
  .runde-mitte { grid-area: mitte; padding-bottom: 10px; }
  .runde-fuss { grid-area: fuss; align-self: center; padding: 8px 16px; }
  .antwort-knoepfe { grid-template-columns: 1fr; }
  .antwort-knopf { min-height: 52px; flex-direction: row; gap: 10px; justify-content: center; }
  .dialog-blatt { max-height: 96dvh; }
  .seite { padding-top: 14px; }
  .schnell-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .seite { padding-left: 14px; padding-right: 14px; }
  .woche-punkt { width: 34px; height: 34px; }
  .bereich-rechts { min-width: 4rem; }
}

/* ---------------------------------------------------------------- 11 Weitere Seiten (Prüfen, Listen, Mehr-Seiten) */
/* Listen-Seiten, Videos */
.seite-liste .chips { margin-top: 2px; }
.video-zeile { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.video-zeile .video-karte { border: 0; padding: 4px 4px 0; }
.video-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 4px 4px; }
.video-block { display: flex; flex-direction: column; gap: 4px; }
.schritte-liste { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.schritt { counter-increment: schritt; position: relative; padding: 10px 12px 10px 52px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); min-height: 52px; }
.schritt::before { content: counter(schritt); position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; border-radius: 14px; background: var(--akzent); color: var(--hg); font-weight: 900; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.schritt-titel { font-weight: 700; overflow-wrap: anywhere; }
.schritt-text { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }

/* Prüfen */
.teil-zeile { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 3rem; gap: 10px; align-items: center; min-height: 32px; font-size: 0.95rem; }
.teil-zeile b { text-align: right; }
.pruef-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pruef-kachel {
  display: flex; flex-direction: column; gap: 2px; justify-content: flex-start; min-height: 92px; padding: 12px; border-radius: 16px;
  background: var(--kachel, var(--akzent)); color: #fff; box-shadow: 0 4px 0 var(--kachel-schatten, var(--knopf-schatten)); margin-bottom: 4px; text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.pruef-kachel:hover { text-decoration: none; }
.pruef-kachel:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kachel-schatten, var(--knopf-schatten)); }
.pruef-titel { font-weight: 900; font-size: 1.05rem; }
.pruef-text { font-size: 0.85rem; }
.pruef-zusatz { font-size: 0.78rem; margin-top: auto; opacity: 0.92; overflow-wrap: anywhere; }
.pruef-band {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--akzent); border-radius: 16px; text-decoration: none;
}
.pruef-band:hover { text-decoration: none; background: var(--box); }
.pruef-band > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pruef-band-ziel { font-weight: 900; color: var(--akzent); flex: none; }

/* Mündlich, Fahrprobe: Schritte, Noten, Musterkommentar */
.runde-schritt { display: flex; flex-direction: column; gap: 6px; }
.frage-gross { font-size: 1.25rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.frage-gross p { margin: 0; }
.kern-felder { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kern-felder legend { padding: 0; margin-bottom: 4px; }
.noten-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.note-knopf { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 6px 4px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); font-size: 0.82rem; text-align: center; }
.note-knopf .note-zahl { font-size: 1.4rem; line-height: 1.1; }
.note-knopf.an { background: var(--knopf); border-color: var(--knopf); color: #fff; }
.note-knopf.an .klein { color: #fff; }
.antwort-knopf.gewaehlt { outline: 3px solid var(--text); outline-offset: 2px; }
.nachlernen { display: flex; flex-direction: column; gap: 6px; }
.komp-bereiche { display: flex; flex-direction: column; gap: 8px; }
.komp-bereich { background: var(--flaeche); border: 1px solid var(--rand); border-left: 5px solid var(--amp-gruen); border-radius: var(--radius); padding: 10px 14px; }
.komp-bereich p { margin: 0; }
.komp-bereich-name { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2); margin-bottom: 2px; }
.kommentar-liste, .randnotizen, .hilfe-liste, .fehler-liste { display: flex; flex-direction: column; gap: 4px; padding-left: 1.3em; margin: 0; }
.operator { background: var(--hervor); color: var(--text); border-color: var(--warn-rand); font-weight: 700; }

/* Aufsatz, Klausur */
.aufgabe { font-size: 1.05rem; }
.gliederung { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gliederung-punkt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 12px; }
.gliederung-titel { font-weight: 700; overflow-wrap: anywhere; }
.muster-inhalt { display: flex; flex-direction: column; gap: 14px; padding: 0 0 14px; }
.muster-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.muster-titel { font-size: 1.05rem; font-weight: 900; }
.klausur-aufgabe .klausur-titel { font-weight: 900; font-size: 1.08rem; }
.klausur-text { margin: 0; }
.plan-tabelle th[scope="row"] { background: var(--box); width: 40%; }
.plan-tabelle td.gut { color: var(--gut-text); font-weight: 700; }
.plan-tabelle td.warn { color: var(--nochmal-text); font-weight: 700; }
.sim-form .kachel-kopf { align-items: flex-start; }

/* Lernplan, Statistik */
.plan-box { display: flex; flex-direction: column; gap: 12px; }
.plan-zeile-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ziel-zeile { display: flex; flex-direction: column; gap: 6px; }
.zahl-feld { width: 5.5rem; text-align: center; padding: 8px; }
.gut-text { color: var(--gut-text); }
.stat-gross { font-size: 1.1rem; }
.stat-gross b { font-size: 2rem; font-weight: 900; color: var(--akzent); }
.quoten { padding: 0; margin: 0; list-style: none; }
.quoten.sub { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.quote-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 14px; }
.quote-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.quote-name .bereich-quadrat { width: 28px; height: 28px; border-radius: 8px; font-size: 0.68rem; }
.quote-wert { font-size: 0.88rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.saeulen { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 140px; }
.saeule { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.saeule-bahn { flex: 1; display: flex; align-items: flex-end; min-height: 0; background: var(--rand-fein); border-radius: 4px 4px 0 0; }
.saeule-fuell { width: 100%; background: var(--nochmal); border-radius: 4px 4px 0 0; overflow: hidden; display: flex; align-items: flex-end; }
.saeule-richtig { width: 100%; background: var(--gut); }
.saeule-tag { height: 1.2em; margin-top: 4px; font-size: 0.68rem; text-align: center; color: var(--text2); overflow: hidden; }
.legend-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--nochmal); }
.legend-punkt.gut { background: var(--gut); }

/* Rahmenplan, Offen */
.reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.reiter-knopf { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 8px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); text-align: center; }
.reiter-knopf .klein { font-size: 0.7rem; line-height: 1.2; }
.reiter-knopf.an { border-color: var(--akzent); background: var(--box); color: var(--akzent); box-shadow: inset 0 -3px 0 var(--akzent); }
.rp-kompetenzen { display: flex; flex-direction: column; gap: 8px; }
.rp-kompetenz > summary { gap: 8px; padding: 6px 0; }
.rp-summary { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.rp-rumpf { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.offen-gruppen { display: flex; flex-direction: column; gap: 8px; }
.offen-kopf { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.offen-name { font-weight: 700; overflow-wrap: anywhere; }
.offen-zahl { flex: none; text-align: right; }
.offen-rumpf { padding-bottom: 8px; }
.offen-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.offen-eintrag { background: var(--box); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.offen-eintrag.geklaert { opacity: 0.65; }
.offen-titel { font-weight: 700; overflow-wrap: anywhere; }
.offen-frage { margin: 0; font-size: 0.92rem; }

/* Einstellungen */
.einstell-gruppe { display: flex; flex-direction: column; gap: 6px; }
.einstell-kachel { gap: 0; padding: 4px 14px; }
.einstell-zeile { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.einstell-zeile + .einstell-zeile, .einstell-zeile + .knopf { border-top: 1px solid var(--rand-fein); }
.einstell-kachel > .knopf { margin: 8px 0 12px; align-self: flex-start; }
.einstell-titel { font-weight: 700; }
.einstell-text { min-width: 0; }
.einstell-steuerung { min-width: 0; }
.status-zeile { min-height: 1.4em; }
.schalter { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.schalter-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.schalter-spur { width: 54px; height: 30px; border-radius: 15px; background: var(--amp-grau); position: relative; transition: background 0.15s; flex: none; }
.schalter-knauf { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.schalter-eingabe:checked + .schalter-spur { background: var(--gut); }
.schalter-eingabe:checked + .schalter-spur .schalter-knauf { transform: translateX(24px); }
.schalter-eingabe:focus-visible + .schalter-spur { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl-knopf { min-height: 44px; min-width: 44px; padding: 6px 14px; border: 1px solid var(--rand); border-radius: 22px; background: var(--flaeche); font-size: 0.9rem; }
.wahl-knopf.an { background: var(--knopf); border-color: var(--knopf); color: #fff; font-weight: 700; }
@media (min-width: 600px) {
  .einstell-zeile { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .einstell-text { flex: 1; }
  .einstell-steuerung { flex: none; max-width: 55%; }
}

/* Sicherung, Info, Quellen, Hilfe */
.datei-knopf { cursor: pointer; align-self: flex-start; }
.datei-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.datei-wahl { position: relative; display: flex; }
.datei-wahl:has(.datei-eingabe:focus-visible) .datei-knopf { outline: 3px solid var(--fokus); outline-offset: 2px; }
.import-ergebnis { display: flex; flex-direction: column; gap: 10px; }
.import-ergebnis:empty { display: none; }
.art-felder { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.art-wahl { display: flex; gap: 12px; align-items: flex-start; min-height: 52px; padding: 10px 12px; background: var(--box); border-radius: var(--radius); cursor: pointer; }
.art-wahl input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--akzent); flex: none; }
.vorschau dt { color: var(--text2); }
.seite-sicherung .kachel, .seite-info .kachel { gap: 10px; }
.norm-zeile { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.nachweis-liste { list-style: none; padding: 0 0 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hilfe-text { display: flex; flex-direction: column; gap: 8px; }
.hilfe-text h2 { font-size: 1rem; margin-top: 4px; }
.hilfe-abschnitt .tabelle-block { margin: 4px 0; }

/* Auswertung (Schnelltest) */
.auswertung { display: flex; flex-direction: column; gap: 8px; }
.auswertung-liste { padding: 0; }
.auswertung-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px; align-items: center; }
.auswertung-name { font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.auswertung-zeile .balken { grid-column: 1 / -1; grid-row: 2; }
.auswertung-wert { text-align: right; white-space: nowrap; }

@media (min-width: 900px) {
  .seite-liste, .seite-einstellungen, .seite-sicherung, .seite-info, .seite-hilfe, .seite-quellen, .seite-lernplan, .seite-statistik, .seite-rahmenplan, .seite-offen, .seite-pruefen, .seite-aufsatz, .seite-klausur, .seite-fahrprobe, .seite-kette, .seite-animation, .seite-spiel, .seite-simulation { max-width: 46rem; }
  .pruef-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .noten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teil-zeile { grid-template-columns: 4.6rem minmax(0, 1fr) 2.8rem; }
}

/* Überschriften, die nach einem Seitenwechsel per Programm den Fokus bekommen, brauchen keinen Rahmen */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .inhalt:focus { outline: none; }

/* Aufklapp-Zeile „Woran erkenne ich das?“ im Beobachtungsbogen: Tippfläche mindestens 44 px (E2E-Befund BJ-E2E-002) */
.bogen-wenn > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }


/* === Start, Prüfen, Willkommen (2026-10-25) === */
/* Start (Variante B) */
.kachel-titel { font-size: 1.05rem; font-weight: 900; margin: 0; }
.seite-start { gap: 6px; }
.seite-start .seiten-titel { line-height: 1.2; }
.ziel-kachel { flex-direction: column; align-items: stretch; gap: 10px; }
.ziel-oben { display: flex; align-items: center; gap: 14px; }
.ziel-oben .ring { width: 84px; height: 84px; }
.ziel-kachel .gross-knopf { width: 100%; }
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.woche .woche-punkt { width: auto; height: auto; border: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 700; color: var(--text2); }
.woche .woche-punkt::before { content: ""; display: block; width: 100%; height: 7px; border-radius: 4px; background: var(--spur); box-sizing: border-box; }
.woche .woche-punkt.getan { background: none; color: var(--gut-text); }
.woche .woche-punkt.getan::before { background: var(--gut); }
.woche .woche-punkt.heute { background: none; border: 0; color: var(--nochmal-text); }
.woche .woche-punkt.heute::before { background: none; border: 2px dashed var(--nochmal); }
.woche .woche-punkt.heute.getan { color: var(--gut-text); }
.woche .woche-punkt.heute.getan::before { background: var(--gut); border: 2px solid var(--gut); }
.stand-kachel { gap: 8px; }
.stand-zeile { display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
.ampel-streifen { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--spur); }
.streifen-teil { display: block; min-width: 4px; }
.streifen-teil.amp-gruen { background: var(--amp-gruen); }
.streifen-teil.amp-gelb { background: var(--amp-gelb); }
.streifen-teil.amp-rot { background: var(--amp-rot); }
.streifen-teil.amp-grau { background: var(--amp-grau); }
.stand-link { align-self: flex-start; }
.luecke { display: block; padding: 4px 0; min-height: 44px; font-size: 0.9rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; text-decoration: none; }
a.luecke b { color: var(--akzent); white-space: nowrap; }
.plan-satz { display: none; }
@media (min-height: 820px) { .plan-satz { display: block; } }
.zufall-reihe { display: flex; gap: 10px; }
.zufall-reihe > .knopf { flex: 1 1 0; min-width: 0; }
.zufall-knopf { width: 100%; }
.zufall-reihe > .knopf:not(.zufall-knopf) { padding: 0 10px; line-height: 1.15; font-size: 0.95rem; }
.hinweis-kompakt { font-size: 0.85rem; padding: 8px 12px; }

/* Prüfen (Variante B) */
.bereit-kachel { gap: 4px; padding: 10px 14px; }
.bereit-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.bereit-spalte { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bereit-wert { font-size: 1.6rem; font-weight: 900; line-height: 1.2; color: var(--akzent); }
.bereit-name { font-size: 0.8rem; font-weight: 700; color: var(--text2); overflow-wrap: anywhere; }
.bereit-fuss { margin: 0; text-align: center; font-size: 0.75rem; }
.seite-pruefen .pruef-raster { gap: 12px 10px; grid-auto-rows: 1fr; }
.seite-pruefen .pruef-kachel { min-height: 96px; }
.seite-pruefen .pruef-zusatz { opacity: 1; }
:root[data-design="dunkel"] .pruef-kachel { outline: 1px solid rgba(255, 255, 255, 0.18); outline-offset: -1px; }
@media (prefers-color-scheme: dark) { :root[data-design="auto"] .pruef-kachel { outline: 1px solid rgba(255, 255, 255, 0.18); outline-offset: -1px; } }
.erfolge-zeile { padding: 0 14px; }
.erfolge-zeile > summary { gap: 8px; }
.text-link-schein { color: var(--akzent); font-weight: 700; }
.erfolge-rumpf { padding-bottom: 12px; }

/* Willkommen (erster Start, Vollbild) */
.willkommen {
  position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0;
  background: var(--hg); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
}
.willkommen:not([open]) { display: none; }
.willkommen::backdrop { background: var(--hg); }
.willkommen-inhalt { min-height: 100%; box-sizing: border-box; max-width: 30rem; margin: 0 auto; padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.willkommen-marke { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2); }
.willkommen-titel { font-size: 1.7rem; font-weight: 900; line-height: 1.2; margin: 0; }
.willkommen-titel:focus { outline: none; }
.willkommen-satz { margin: 0; font-size: 1.02rem; }
.willkommen-kasten { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; }
.willkommen-kasten li { overflow-wrap: anywhere; }
.willkommen-formular { display: flex; flex-direction: column; gap: 10px; }
.willkommen-knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.willkommen-knoepfe .knopf { width: 100%; }
@media (max-height: 499px) and (orientation: landscape) {
  .willkommen-inhalt { justify-content: flex-start; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .willkommen-marke { font-size: 0.7rem; }
  .willkommen-titel { font-size: 1.25rem; line-height: 1.15; }
  .willkommen-satz { font-size: 0.9rem; line-height: 1.3; }
  .willkommen-kasten { padding: 8px 12px; gap: 4px; font-size: 0.88rem; line-height: 1.3; }
  .willkommen-knoepfe { flex-direction: row; margin-top: 0; }
  /* Reicht die Höhe trotzdem nicht (große Schrift), bleiben die Knöpfe unten im Dialog sichtbar */
  .willkommen-knoepfe { position: sticky; bottom: 0; background: var(--hg); padding-top: 4px; }
}
@media (min-width: 900px) {
  .pruef-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* === Themen und Suche (2026-10-25) === */
/* Suchfeld groß: mindestens 52 px hoch, Rand 2 px in der Hauptfarbe */
.suchfeld-gross {
  min-height: 52px; padding-left: 46px; padding-right: 12px; font-size: 1.05rem; border: 2px solid var(--akzent);
  border-radius: var(--radius); background: var(--flaeche); color: var(--text);
}
.suchfeld-gross::placeholder { color: var(--text2); opacity: 1; }
.suchfeld-gross:focus { outline: 3px solid var(--fokus); outline-offset: 2px; }
.seite-lernen .suchsymbol { color: var(--akzent); }
.zuletzt { display: flex; flex-direction: column; gap: 4px; }
.zuletzt[hidden] { display: none; }
.zuletzt-kopf { margin-top: 0; }
.themen-browse, .suche-ergebnis { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.themen-browse[hidden], .suche-ergebnis[hidden] { display: none; }
.suche-block { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 0; }
.suche-block > .knopf { align-self: stretch; margin-top: 4px; }
.thema-treffer { min-height: 56px; }
.stichwort-chip { text-decoration: none; color: var(--text); }
.stichwort-chip:hover { text-decoration: none; background: var(--box); }
.beispiel-chips { justify-content: center; }
/* lange Themennamen: trennen statt abschneiden oder wischen (RI-1-007) */
.unter-zeile .listen-text, .thema-treffer .listen-text, .thema-kopf .seiten-titel, .pfad-link {
  hyphens: auto; overflow-wrap: anywhere;
}
/* Filter-Knopf und Sortierung in einer Zeile */
.themen-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.unter-zahl { flex: none; white-space: nowrap; }
.ganzer-bereich { font-weight: 700; color: var(--akzent); }
/* Seite Thema */
.pfad { font-size: 0.85rem; color: var(--text2); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.pfad-link { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.thema-kopf { display: flex; align-items: center; gap: 12px; }
.thema-kopf .seiten-titel { overflow-wrap: anywhere; min-width: 0; }
.thema-knoepfe { display: flex; flex-direction: column; gap: 10px; }
.thema-block { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 380px) {
  .themen-werkzeug { flex-direction: column; align-items: stretch; }
}
@media (min-width: 900px) {
  .seite-thema { max-width: 46rem; }
}
/* === FahrCampus: Kopfzeile mit Logo, Start-Animation, Hinweis (2026-10-25) === */
.kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 0; }
.kopf > .kopf-logo { grid-column: 2; }
.kopf-links { grid-column: 1; }
.kopf-rechts { grid-column: 3; display: flex; justify-content: flex-end; min-width: 0; }
/* Lernfeld-Wahl (Chip oben rechts, Blatt mit den Lernfeldern) */
.lf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 4px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.lf-chip:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.lf-chip-wort { color: var(--text2); }
.lf-chip-wert { color: var(--akzent); font-weight: 900; }
.lf-chip-pfeil { color: var(--text2); font-size: 0.8rem; }
/* Wenig Platz (schmal oder große Schrift): nur „CE ▾“ */
@media (max-width: 340px) { .lf-chip-wort { display: none; } }
@media (max-width: 480px) { html[data-schrift="L"] .lf-chip-wort, html[data-schrift="XL"] .lf-chip-wort, html[data-gross="an"] .lf-chip-wort, html[data-schrift="XL"] .runde-lf, html[data-gross="an"] .runde-lf { display: none; } }
.lf-optionen { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lf-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 2px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lf-option.an { border-color: var(--akzent); background: var(--hervor); }
.lf-option:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.lf-option-kuerzel { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 40px; padding: 0 6px; border-radius: 10px; background: var(--knopf); color: #fff; font-weight: 900; }
.lf-option-text { min-width: 0; overflow-wrap: anywhere; }
.lf-marke { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--hervor); color: var(--akzent); font-size: 0.75rem; font-weight: 900; }
/* In der Karten-Runde zählt jeder Platz: dort keine Kopfzeile */
html[data-route="lernen/karten"] .kopf { display: none; }
.kopf-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; }
.kopf-logo img { width: 36px; height: 36px; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); }
.kopf-logo:active img { transform: scale(0.94); }
.kopf-logo:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.intro { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--hg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.intro-mitte { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 34px); width: min(78vw, 360px); opacity: 0; }
.intro.bereit .intro-mitte { opacity: 1; }
.intro-buehne { position: relative; width: min(48vw, 210px, 34vh); aspect-ratio: 842 / 834; border-radius: 22%; overflow: hidden; box-shadow: 0 10px 26px rgba(4, 40, 32, 0.26); }
.intro-teil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; user-select: none; -webkit-user-drag: none; }
.intro-wort { position: relative; width: 100%; }
.intro-buchstabe { position: absolute; top: 0; bottom: 0; overflow: hidden; opacity: 0; }
.intro-buchstabe img { position: absolute; top: 0; height: 100%; max-width: none; user-select: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .intro-mitte { flex-direction: row; width: min(86vw, 640px); }
  .intro-buehne { width: min(34vh, 150px); flex: none; }
  .intro-wort { flex: 1; }
}

.hinweis-logo { width: 56px; height: 56px; align-self: center; }
.hinweis-text p { margin: 0; overflow-wrap: anywhere; }
.hinweis-text p + p { margin-top: 2px; }
.hinweis-seite p { margin: 0 0 8px; }
.hinweis-dialog .willkommen-inhalt { justify-content: flex-start; padding-top: 18px; gap: 10px; }
.hinweis-dialog .hinweis-text { font-size: 0.95rem; line-height: 1.4; }
.hinweis-dialog .willkommen-knoepfe { position: sticky; bottom: 0; background: var(--hg); padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }

/* ---------------------------------------------------------------- 12 Skizzen (Liste, Detail, Zoom, Suchtreffer) */
/* Raster: 2 Spalten ab 360 px, mehr bei breiterem Fenster. Der Rahmen hat festes Seitenverhältnis, das Bild bleibt unverzerrt (contain). */
.seite-skizzen .skizzen-lernen { align-self: stretch; }
.skizzen-ergebnis { display: flex; flex-direction: column; gap: 12px; }
.skizzen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skizzen-karte {
  display: flex; flex-direction: column; min-width: 0; color: var(--text); text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
.skizzen-karte:hover { text-decoration: none; border-color: var(--akzent); }
.skizzen-vorschau { display: block; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--rand-fein); padding: 6px; }
.skizzen-vorschau { position: relative; overflow: hidden; box-sizing: border-box; }
.skizzen-vorschau img, .skizzen-vorschau svg { display: block; position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: #fff; }
.skizzen-titel { display: block; padding: 8px 10px 10px; font-size: 0.88rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 600px) { .skizzen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .skizzen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Detail: weißer Grund auch im Dunkelmodus (die SVG sind weiß gezeichnet) */
.seite-skizze { max-width: 52rem; }
.seite-skizze .skizze-gross-knopf {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left;
}
.skizze-detail-bild { width: 100%; height: auto; background: #fff; }
.skizze-lupe { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; font-size: 0.85rem; font-weight: 700; color: var(--akzent); }
.skizze-unterschrift { margin: 0; overflow-wrap: anywhere; }
.skizze-gross-link { margin-top: 2px; }
.fragen-dazu { display: flex; flex-direction: column; gap: 8px; }

/* Zoom-Dialog: füllt den Bildschirm; die Fläche scrollt, das Bild hat immer weißen Grund; Pinch-Zoom macht der Browser */
.dialog-voll { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; }
.dialog-voll .dialog-rumpf { padding: 0; gap: 0; background: #fff; touch-action: pan-x pan-y pinch-zoom; overflow: auto; }
.skizze-gross-flaeche { background: #fff; min-width: 100%; }
.skizze-gross-bild { display: block; max-width: none; height: auto; background: #fff; }
.skizze-inline { display: block; }
.skizze-fehler { display: block; padding: 12px 0; }
/* Titel im Zoom-Dialog einzeilig mit Ellipse (das Bild bekommt den Platz); in Querformat kompakter Kopf und Fuß */
.dialog-voll .dialog-kopf { padding-bottom: 2px; }
.dialog-voll .dialog-titel { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: landscape) and (max-height: 520px) {
  .dialog-voll .dialog-kopf { padding-top: 2px; }
  .dialog-voll .dialog-fuss { padding: 4px 18px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .dialog-voll .dialog-fuss .knopf { min-height: 44px; }
}
.dialog-voll .dialog-fuss .knopf { min-height: 48px; }

/* Suchtreffer „Skizzen“ (Seite Themen): kleine Vorschau links */
.skizzen-mini { flex: none; display: block; width: 64px; height: 48px; background: #fff; border: 1px solid var(--rand); border-radius: 6px; overflow: hidden; }
.skizzen-mini img, .skizzen-mini svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Endprüfung BJ1-09: Links in Listen sind mindestens 44 px hoch (Fundstellen, Kompetenzen in der Statistik) */
a.fund-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 44px; }
a.quote-name { min-height: 44px; }
/* === Themen-Ordner (Entwurf A, 2026-10-26): farbige Hauptordner, Unterordner, Filter nach Thema, Farbe = Ort === */
/* Rollen der Ordnerfarbe: --o-farbe (volle Farbe, weiße Schrift darauf), --o-akzent (Farbe als Schrift/Linie auf hellem bzw. dunklem Grund),
   --o-flaeche (Tönung). Die Werte setzt JS als Style (kern/ordner.js); hier nur die Zuordnung hell/dunkel. */
.o-zone, html[data-ordner] { --o-akzent: var(--o-farbe); --o-flaeche: var(--o-hell); }
:root[data-design="dunkel"] .o-zone, :root[data-design="dunkel"][data-ordner] { --o-akzent: var(--o-dunkel); --o-flaeche: var(--o-dunkelhell); }
/* Übersicht auf „Themen“ */
.ordner-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ordner-kachel {
  display: flex; flex-direction: column; gap: 4px; min-height: 124px; padding: 16px; border-radius: 18px;
  background: var(--o-farbe); color: #fff; text-decoration: none; min-width: 0;
}
.ordner-kachel:hover { text-decoration: none; }
.ordner-kachel:active { transform: scale(0.99); }
.ordner-kachel-kopf { display: inline-flex; }
.ordner-kachel-name { margin-top: auto; font-size: 1.06rem; font-weight: 900; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.ordner-kachel-zahlen { font-size: 0.8rem; line-height: 1.3; }
.ordner-kachel .balken-weiss { margin-top: 6px; }
.ordner-kachel:last-child {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 100px;
}
.ordner-kachel:last-child .ordner-kachel-kopf { grid-row: 1 / span 2; }
.ordner-kachel:last-child .ordner-kachel-name { margin-top: 0; }
.ordner-kachel:last-child .balken { grid-column: 1 / -1; }
.balken-weiss { height: 5px; background: rgba(255, 255, 255, 0.35); }
.balken-weiss .balken-fuell { background: #fff; }
.schnell-ueberschrift { margin-top: 6px; }
/* Kopf der Ordner-Seiten: volle Ordnerfarbe, weiße Schrift */
.ordner-seite { display: block; }
.ordner-kopf { background: var(--o-farbe); color: #fff; padding: 6px 0 16px; }
.ordner-kopf-innen { max-width: 46rem; margin: 0 auto; padding: 0 18px; display: flex; flex-direction: column; gap: 2px; }
.ordner-zurueck { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; color: #fff; font-size: 0.92rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ordner-zurueck:hover { color: #fff; text-decoration: underline; }
.ordner-titel { font-size: 1.6rem; font-weight: 900; line-height: 1.15; color: #fff; hyphens: auto; overflow-wrap: anywhere; }
.ordner-kopf :focus-visible { outline-color: #fff; } /* der blaue Fokusring wäre auf der blauen Ordnerfarbe (Fahren) kaum zu sehen */
.ordner-kopf-zahlen { margin: 4px 0 0; font-size: 0.86rem; color: #fff; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.seite-ordner { max-width: 46rem; }
/* Quadrat in der Tönung des Ordners (Nummer oder Symbol) */
.o-quadrat {
  flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--o-flaeche); color: var(--o-akzent); font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
.o-quadrat.klein { width: 32px; height: 32px; border-radius: 8px; }
/* Liste der Unterordner */
.ordner-zeile { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.ordner-zeile:hover { text-decoration: none; background: var(--box); }
.ordner-zeile-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ordner-zeile-name { font-size: 1rem; overflow-wrap: anywhere; hyphens: auto; }
.ordner-zeile .balken { margin-top: 4px; }
.ordner-pfeil { flex: none; color: var(--text2); font-size: 1.3rem; line-height: 1; }
.o-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.o-status:empty { display: none; }
.ordner-listen-box, .o-chips-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Chips „spezielle Themen“ und Art: Ordnerfarbe, gewählt = volle Farbe */
.o-chip { border: 2px solid var(--o-akzent); background: var(--flaeche); color: var(--text); }
.o-chip[aria-pressed="true"] { background: var(--o-farbe); border-color: var(--o-farbe); color: #fff; font-weight: 700; }
.o-chip:disabled { opacity: 0.5; }
.o-mehr { border-style: dashed; color: var(--o-akzent); font-weight: 700; }
.o-zurueck { align-self: flex-start; color: var(--o-akzent); font-weight: 700; }
.o-abstand { margin-top: 8px; }
.ordner-aktion, .ordner-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ordner-aktion .knopf-reihe > * { flex: 1 1 8rem; }
.ordner-ergebnisse .ergebnis-zeile { align-items: center; }
.o-mehr-knopf { align-self: stretch; }
/* Hauptknopf in der Ordnerfarbe (weiße Schrift, Kontrast >= 4,5), Stufe in der dunkleren Ordnerfarbe: der Ort bleibt sichtbar */
.o-zone .o-haupt-knopf { background: var(--o-farbe); color: #fff; box-shadow: 0 4px 0 var(--o-schatten); }
.o-zone .o-haupt-knopf:active { box-shadow: 0 1px 0 var(--o-schatten); }
.o-ergebnis-summe { margin: 0; font-size: 0.95rem; color: var(--text); }
/* Farbe = Ort: Pfadzeile auf Kartendetail und Rückseite der Wischkarte, Reiter „Themen“ und Linie über der unteren Leiste */
.karte-ordner {
  display: flex; flex-wrap: wrap; align-items: center; padding: 2px 12px; border-left: 4px solid var(--o-farbe); border-radius: 8px;
  background: var(--o-flaeche); font-size: 0.88rem;
}
.karte-ordner-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--o-akzent); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.karte-ordner-link:hover { text-decoration: underline; }
.karte-ordner-pfeil { color: var(--text2); padding: 0 4px; }
.wk-ordner { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.78rem; color: var(--text2); overflow-wrap: anywhere; }
.wk-ordner-punkt { flex: none; width: 10px; height: 10px; border-radius: 3px; }
html[data-ordner] .nav { box-shadow: 0 -4px 0 var(--o-akzent); }
html[data-ordner] .nav-ziel[aria-current="page"] { color: var(--o-akzent); }
@media (max-height: 499px) and (orientation: landscape), (min-width: 900px) {
  html[data-ordner] .nav { box-shadow: 4px 0 0 var(--o-akzent); }
}
@media (min-width: 600px) {
  .ordner-kopf-innen { padding: 0 24px; }
}
@media (max-width: 380px) {
  .ordner-kopf-innen { padding: 0 14px; }
  .ordner-kachel { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ordner-kachel:active { transform: none; }
}

/* Anmeldung (geschützte Fassung, Entwurf A „Klar“): eine Spalte, Logo, großer Knopf. Ohne Navigation, solange das Tor zu ist. */
html[data-tor="an"] .nav, html[data-tor="an"] .kopf-rechts { display: none; }
.tor { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; padding-bottom: 32px; }
.tor-logo { width: 88px; height: 88px; margin: 8px auto 0; display: block; }
.tor-marke { text-align: center; font-weight: 800; font-size: 1.35rem; color: var(--akzent); margin-top: -6px; }
.tor-titel { font-size: 1.3rem; text-align: center; overflow-wrap: anywhere; }
.tor-unter { text-align: center; color: var(--text2); margin: -6px 0 0; overflow-wrap: anywhere; }
.tor-form { display: flex; flex-direction: column; gap: 14px; }
.tor-feld .feld { font-weight: 400; font-size: 1rem; }
.tor-knopf { width: 100%; }
.tor-zweit { border-color: var(--rand); }
.tor-gefahr { color: #a32a1d; border-color: #e5b8b0; background: var(--flaeche); }
html[data-design="dunkel"] .tor-gefahr { color: #ff9c8f; border-color: #6b3a33; }
.tor-links { text-align: center; margin: 0; }
.tor-klein { color: var(--text2); text-align: center; }
.tor-fuss { text-align: center; margin-top: 8px; }
.tor-meldung { padding: 10px 14px; border-radius: var(--radius); margin: 0; overflow-wrap: anywhere; }
.tor-fehler { background: var(--warn-bg); border: 1px solid var(--warn-rand); }
.tor-ok { background: var(--hervor); border: 1px solid var(--rand); }
.tor-balken { width: 100%; height: 14px; accent-color: var(--akzent); }
.tor-details { border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 14px; background: var(--flaeche); }
.tor-details summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.tor-details > * + * { margin-top: 10px; }
.recht h2 { font-size: 1rem; margin: 14px 0 4px; }
.recht p, .recht li { overflow-wrap: anywhere; }
.konto-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 0 12px; }
.konto-liste dt { font-weight: 700; margin-top: 8px; }
.konto-liste dd { margin: 0; overflow-wrap: anywhere; }
.seite-konto, .seite-admin { display: flex; flex-direction: column; gap: 12px; }
.admin-zahlen { font-weight: 700; margin: 0; }
.admin-anfrage { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; overflow-wrap: anywhere; }
.admin-klassen { display: flex; gap: 18px; flex-wrap: wrap; }
.admin-klasse { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.admin-klasse input { width: 22px; height: 22px; }
.admin-person { padding: 10px 14px; }
.admin-person summary { cursor: pointer; overflow-wrap: anywhere; min-height: 44px; }
.admin-person-inhalt { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.admin-klassenzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-klassenzeile .feld { width: auto; flex: 1 1 150px; }
.admin-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-schluessel { font-family: ui-monospace, monospace; font-size: 1.05rem; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.admin-qr { width: 200px; height: 200px; background: #fff; display: block; }
.admin-code { font-size: 1.4rem; letter-spacing: 0.2em; max-width: 12ch; }
.admin-protokoll { padding-left: 18px; overflow-wrap: anywhere; }