/* ============================================================================
   Hi-Vis-Schicht für den Lernbereich (Übergabe 2, 29.09.2026)
   ----------------------------------------------------------------------------
   Verschmilzt das bisherige dunkle Design (style.css / lernbereich.css) mit dem
   freigegebenen Mockup (E:\_34a\Modul_06_KI_Trainer\features\hero_mockup.html):
     - Grundflächen bleiben dunkel (bewährt, lange Lernsitzungen)
     - Akzent Orange → Warnwesten-Gelb (Token-Umstellung, keine Einzelregeln)
     - Warnband oben, Überschriften in Archivo, Etiketten in Spline Sans Mono
     - kantige Knöpfe mit hartem Schatten, Sprechblasen/Chips wie die Demo-Karte
   Wird NACH style.css, geruest.css und lernbereich.css geladen.
   ========================================================================== */

:root {
  --vis:        #f6cf1a;               /* Warnwesten-Gelb (Mockup oklch 87% .19 95) */
  --vis-tief:   #d9ab0b;
  --tinte:      #1a1813;               /* Tiefschwarz, warm */
  --orange:     var(--vis);
  --orange-hi:  #ffdc4a;
  --orange-dim: rgba(246, 207, 26, .13);
  --warn:       #ff9a57;               /* „fehlt“-Chip, auf Dunkel lesbar */
  --schrift-kopf: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --schrift-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* Warnband oben (wie im Mockup) */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 1200;
  background: repeating-linear-gradient(-45deg, var(--tinte) 0 10px, var(--vis) 10px 20px);
  pointer-events: none;
}

/* ── Typografie ───────────────────────────────────────────────────────────── */
.lb-kopf h1, .lb-karte h2, .lb-gesperrt h2, .lern-inhalt h2, .db-zahl, .pp-ergebnis-zahl, .sidebar-logo-text {
  font-family: var(--schrift-kopf);
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.01em;
}
.lb-kopf h1 { font-weight: 900; font-size: 30px; }
/* Lange Wörter („Unfallverhütungsvorschrift“) umbrechen statt das Layout auf dem Handy zu sprengen */
.lb-kopf h1, .lern-inhalt h2, .lern-inhalt h3, .lb-karte h2 { overflow-wrap: break-word; hyphens: auto; }
.lb-marke, .quiz-stand, .ki-blase .wer, .ki-legende, .ki-chip, .lb-kachel .nr, .db-pfad .tag, .ki-thema .lb-klein {
  font-family: var(--schrift-mono);
  letter-spacing: .06em;
}
.lb-marke { color: var(--vis); }
.lb-marke::before { content: '▸ '; }

/* ── Karten und Knöpfe ────────────────────────────────────────────────────── */
.lb-karte, .lb-kachel, .lb-gesperrt, .quiz-option, .ki-eingabe, .quiz-rueckmeldung, .ki-erklaerung, .ki-rot { border-radius: 6px; }
.lb-knopf {
  border-radius: 4px; border: 2px solid var(--tinte); color: var(--tinte); font-weight: 700;
  box-shadow: 3px 3px 0 #000;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s cubic-bezier(.2,.7,.2,1), background .15s;
}
.lb-knopf:hover:not(:disabled) { opacity: 1; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.lb-knopf.zweit { box-shadow: none; border: 2px solid var(--line-hi); color: var(--tx); }
.lb-knopf.zweit:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--vis); }
.lb-knopf.zweit.aktiv { background: var(--vis); border-color: var(--vis); color: var(--tinte); }

.quiz-option.gewaehlt .buchstabe { color: var(--tinte); }
.pp-raster button.aktuell { color: var(--tx); }
.ki-frage-box { border-left-width: 4px; }
.lb-gesperrt { border-style: solid; border-width: 2px; }

/* Sidebar + Handy-Leiste: aktiver Punkt gelb statt orange */
.nav-item.active, .nav-btn.active { color: var(--vis); }
.mobile-bottom-nav .mobile-nav-item.active,
.mobile-bottom-nav .nav-btn.mobile-nav-item.active { color: var(--vis) !important; }
.sidebar-logo-text { font-weight: 900; }

/* ── Mündliche Simulation: Sprechblasen wie die Demo-Karte ────────────────── */
.ki-blase { border-radius: 4px; }
.ki-blase.pruefer { border: 1.5px solid var(--line-hi); }
.ki-blase.ich { background: rgba(246, 207, 26, .10); border: 1.5px dashed rgba(246, 207, 26, .55); }
.ki-chip { border-radius: 0; }

/* ── Anmelden / Registrieren / Passwort (login, forgot-password, reset-password) ── */
.auth-logo-text { font-family: var(--schrift-kopf); font-weight: 900; font-variation-settings: 'wdth' 110; letter-spacing: -0.02em; }
.auth-logo-text .auth-marke-34a { font-style: normal; background: var(--vis); color: var(--tinte); padding: 0 .25em; margin-left: 1px; }
body .btn-auth { background: var(--vis); color: var(--tinte); border: 2px solid #000; border-radius: 4px; font-weight: 700; box-shadow: 3px 3px 0 #000; }
body .btn-auth:hover:not(:disabled) { opacity: 1; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
body .auth-link.accent, body .auth-link.accent:hover { color: var(--vis); }
body .auth-tab.active { color: var(--tx); box-shadow: inset 0 -2px 0 var(--vis); }

/* Mündliche Simulation hervorgehoben (bestes Feature, Wunsch Walied 02.10.2026) */
.sidebar .nav-item.nav-hervor {
  color: var(--tx); font-weight: 600; letter-spacing: -.01em;
  background: rgba(246, 207, 26, .09); box-shadow: inset 0 0 0 1px rgba(246, 207, 26, .6);
}
.sidebar .nav-item.nav-hervor svg { stroke: var(--vis); }
.sidebar .nav-item.nav-hervor:hover { background: rgba(246, 207, 26, .16); }
.sidebar .nav-item.nav-hervor.active { background: rgba(246, 207, 26, .2); color: var(--vis); }
.sidebar .nav-item.nav-hervor { position: relative; margin-top: 8px; gap: 9px; padding-right: 6px; font-size: 13.5px; }
.sidebar .nav-item.nav-hervor > span { white-space: nowrap; }
.nav-top {
  position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--vis); color: var(--tinte); padding: 1px 6px; border-radius: 3px; line-height: 1.5;
}
html.sb-collapsed .nav-top, body.sb-collapsed .nav-top { display: none; }
.mobile-bottom-nav .mobile-nav-item.nav-hervor .mobile-nav-icon svg { stroke: var(--vis); }
/* Seitenleiste: Vorschlag oder Fehler melden */
.sidebar-vorschlag { display: block; margin: 8px 12px 0; padding: 7px 10px; border-radius: 6px; font-size: 12px; color: var(--tx-2); text-decoration: none; border: 1px dashed var(--line-hi); }
.sidebar-vorschlag:hover { color: var(--vis); border-color: var(--vis); }
html.sb-collapsed .sidebar-vorschlag, body.sb-collapsed .sidebar-vorschlag { display: none; }