/* FahrschulKit — Fahrschullook für die Fahrschul-Apps (Track Führerschein-Theorie Klasse B).
 * Doku: docs/architektur/VISUKIT.md „FahrschulKit".
 *
 * Bewusste Ausnahme von Peaflower/Palette (Nutzerentscheidung 2026-10-27): Bedienung in
 * Verkehrsblau (RAL 5017), Panel-Flächen bleiben neutral (weiß/dunkel). Richtig = Verkehrsgrün,
 * falsch = Verkehrsrot, Achtung = Verkehrsgelb — wie in Fahrschulbögen.
 * Greift nur mit body.fs-look (setzt FahrschulKit.ui(app)). Laden NACH visukit.css. */

body.fs-look {
  --fs-blau: #0e5a9c;
  --fs-rot: #c1121c;
  --fs-gelb: #f0b400;
  --fs-gruen: #00754a;
  --vk-ui-action: #0e5a9c;
  --vk-ui-peaflower: #0e5a9c;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}
body.fs-look.theme-light {
  --vk-ui-active-bg: #dbe8f5;
  --vk-ui-active-ink: #0b4f8a;
  --fs-ok-ink: #00663f;
  --fs-falsch-ink: #b0101a;
  --fs-achtung-ink: #8a6200;
  --fs-ok-bg: rgba(0, 117, 74, 0.11);
  --fs-falsch-bg: rgba(193, 18, 28, 0.09);
  --fs-achtung-bg: rgba(240, 180, 0, 0.16);
}
body.fs-look.theme-dark {
  --vk-ui-active-bg: #173a5c;
  --vk-ui-active-ink: #8ec2f2;
  --fs-ok-ink: #5fd3a0;
  --fs-falsch-ink: #ff8a8f;
  --fs-achtung-ink: #ffd25c;
  --fs-ok-bg: rgba(0, 160, 100, 0.16);
  --fs-falsch-bg: rgba(220, 40, 50, 0.16);
  --fs-achtung-bg: rgba(240, 180, 0, 0.14);
}
/* Aktions-Pills und In-Panel-Aktionen: Verkehrsblau (überstimmt --pal-accent/Kursfarbe) */
body.fs-look .panel, body.fs-look #desktop-dock, body.fs-look #mobile-navbar {
  --app-accent: var(--fs-blau);
  --pal-accent: var(--fs-blau);
  --pal-soft: var(--vk-ui-active-ink);
}
body.fs-look.theme-dark .dock-pill.act, body.fs-look.theme-dark .nav-btn.act { background: #1769b3; }

/* ── Ampelfarben-Chips (richtig/falsch/Achtung) ─────────────────────────── */
.fs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.fs-chip.ok { background: var(--fs-ok-bg); color: var(--fs-ok-ink); }
.fs-chip.falsch { background: var(--fs-falsch-bg); color: var(--fs-falsch-ink); }
.fs-chip.achtung { background: var(--fs-achtung-bg); color: var(--fs-achtung-ink); }
.fs-box { border-radius: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.fs-box.ok { background: var(--fs-ok-bg); }
.fs-box.falsch { background: var(--fs-falsch-bg); }
.fs-box.achtung { background: var(--fs-achtung-bg); }
.fs-box.neutral { background: var(--vk-panel-surface); }
.fs-box b.ok { color: var(--fs-ok-ink); }
.fs-box b.falsch { color: var(--fs-falsch-ink); }

/* ── Muttersprache-Baustein ─────────────────────────────────────────────── */
.fs-mu-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.fs-mu-pills button { flex: 0 1 auto; min-width: 0; border: none; cursor: pointer; padding: 6px 9px; border-radius: 8px;
  font-size: 12px; font-weight: 650; line-height: 1.15; background: var(--vk-panel-surface); color: currentColor;
  opacity: 0.72; transition: background 0.15s, opacity 0.15s; overflow-wrap: break-word; }
.fs-mu-pills button:hover { opacity: 1; }
.fs-mu-pills button.active { opacity: 1; background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
.fs-mu-text { margin-top: 10px; font-size: 14px; line-height: 1.65; border-radius: 10px; padding: 10px 12px;
  background: var(--vk-panel-surface); }
.fs-mu-text[dir="rtl"] { text-align: right; font-size: 15px; }
.fs-mu-text .fs-mu-de { display: block; margin-top: 6px; font-size: 11px; opacity: 0.6; direction: ltr; text-align: left; }
.fs-mu-schrift-arab { font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, 'Arial', sans-serif; }
.fs-mu-schrift-ethi { font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', 'Kefa', 'Nyala', 'Ebrima', sans-serif; }
.fs-mu-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.fs-mu-row .fs-mu-name { font-size: 11px; opacity: 0.62; flex: 1; min-width: 0; }
.panel .fs-mu-vorlesen { width: auto; margin: 0; padding: 7px 12px; flex: none; display: inline-flex; align-items: center; gap: 6px; }
.panel .fs-mu-vorlesen svg { width: 14px; height: 14px; }
.fs-mu-hinweis { margin-top: 8px; font-size: 10.5px; opacity: 0.55; line-height: 1.45; }

/* ── Prüfungs-Baustein ──────────────────────────────────────────────────── */
.fs-pr-kopf { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: 0.75; }
.fs-pr-kopf .fs-pr-nr { font-weight: 700; }
.fs-pr-kopf .fs-pr-pkt { margin-left: auto; font-weight: 700; }
.fs-pr-frage { margin: 8px 0 10px; font-size: 13px; font-weight: 650; line-height: 1.45; }
.fs-pr-antworten { display: flex; flex-direction: column; gap: 5px; }
.fs-pr-antw { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: var(--vk-panel-surface); font-size: 12.5px; line-height: 1.4; transition: background 0.15s; text-align: left;
  border: none; color: currentColor; width: 100%; }
.fs-pr-antw:hover { filter: brightness(1.05); }
body.theme-light .fs-pr-antw:hover { background: rgba(15, 23, 42, 0.08); }
body.theme-dark .fs-pr-antw:hover { background: rgba(255, 255, 255, 0.1); }
.fs-pr-box { flex: none; width: 17px; height: 17px; border-radius: 5px; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
body.theme-light .fs-pr-box { background: rgba(15, 23, 42, 0.14); }
body.theme-dark .fs-pr-box { background: rgba(255, 255, 255, 0.16); }
.fs-pr-antw.gewaehlt .fs-pr-box { background: var(--fs-blau); }
.fs-pr-box svg { width: 12px; height: 12px; opacity: 0; color: #fff; }
.fs-pr-antw.gewaehlt .fs-pr-box svg { opacity: 1; }
.fs-pr-antw.ok { background: var(--fs-ok-bg); }
.fs-pr-antw.falsch { background: var(--fs-falsch-bg); }
.fs-pr-antw.ok .fs-pr-box { background: var(--fs-gruen); }
.fs-pr-antw.falsch .fs-pr-box { background: var(--fs-rot); }
.fs-pr-antw.ok.gewaehlt .fs-pr-box svg, .fs-pr-antw.falsch.gewaehlt .fs-pr-box svg { opacity: 1; }
.fs-pr-warum { display: block; margin-top: 4px; font-size: 11.5px; opacity: 0.85; }
.fs-pr-antw:not(.ok):not(.falsch) .fs-pr-warum { display: none; }
.fs-pr-knoepfe { display: flex; gap: 6px; margin-top: 10px; }
.panel .fs-pr-knoepfe .act, .panel .fs-pr-knoepfe .ghost { margin-top: 0; flex: 1; min-width: 0; }
.fs-pr-stand { margin-top: 10px; }
.fs-pr-punkte { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.fs-pr-punkte i { width: 16px; height: 6px; border-radius: 3px; background: var(--vk-panel-surface); }
.fs-pr-punkte i.ok { background: var(--fs-gruen); }
.fs-pr-punkte i.falsch { background: var(--fs-rot); }
.fs-pr-punkte i.jetzt { background: var(--fs-blau); }