/* ============ Vorfahrt 3D — UI ============ */
:root {
  --ink: #0b1220;
  --glass: rgba(10, 16, 28, 0.72);
  --surface: rgba(9, 15, 27, 0.94);
  --row: rgba(255, 255, 255, 0.07);
  --glass-lite: rgba(16, 24, 40, 0.55);
  --line: rgba(255, 255, 255, 0.12);
  --txt: #f2f5fa;
  --muted: #9fb0c8;
  --accent: #ffd60a;
  --accent-ink: #201a00;
  --good: #34d399;
  --bad: #f87171;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--ink);
  color: var(--txt);
}

#app { position: fixed; inset: 0; }
#app canvas { display: block; filter: saturate(1.14) contrast(1.05); }

#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 10, 20, 0.38) 100%);
}

/* ---------- Wetter-Effekte ---------- */
#weather { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
#weather.rain::before {
  content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  background-image: repeating-linear-gradient(78deg, transparent 0 12px, rgba(205, 222, 238, 0.28) 12px 13px, transparent 13px 22px);
  animation: rainfall 0.55s linear infinite;
}
@keyframes rainfall { to { transform: translateY(50%); } }
#weather.snow::before, #weather.snow::after {
  content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  background-image:
    radial-gradient(circle at 22% 24%, #fff 2.2px, transparent 3px),
    radial-gradient(circle at 68% 62%, #fff 1.8px, transparent 2.6px),
    radial-gradient(circle at 44% 86%, #fff 2.4px, transparent 3.2px),
    radial-gradient(circle at 86% 12%, #fff 1.6px, transparent 2.4px);
  background-size: 230px 230px;
  animation: snowfall 8s linear infinite; opacity: 0.85;
}
#weather.snow::after { background-size: 150px 150px; animation-duration: 5.5s; opacity: 0.5; }
@keyframes snowfall { to { transform: translateY(50%); } }
#weather.fog { background: linear-gradient(180deg, rgba(235, 240, 245, 0.1), rgba(235, 240, 245, 0.32)); }

#ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#ui button, #ui a, #ui .level { pointer-events: auto; }

/* ---------- Buttons ---------- */
.btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 14px; padding: 13px 22px; color: var(--txt);
  background: rgba(11, 18, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); background: rgba(24, 36, 58, 0.88); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 8px 28px rgba(255, 214, 10, 0.35);
}
.btn.primary:hover { background: #ffe14d; }
.btn.big { padding: 16px 34px; font-size: 18px; border-radius: 16px; }
/* Kauf-Einstieg auf dem Startbildschirm; verschwindet nach dem Freischalten. */
.btn.unlock {
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border-color: transparent;
  font-size: 17px; padding: 14px 28px; border-radius: 16px; box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}
.btn.unlock:hover { background: linear-gradient(135deg, #34d399, #22c55e); }
body.pro #btn-unlock { display: none; }
.btn.ghost {
  background: rgba(11, 18, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.30);
}
.btn.icon {
  width: 42px; height: 42px; padding: 0; border-radius: 12px;
  font-size: 22px; line-height: 1; display: grid; place-items: center;
}

/* ---------- Screens ---------- */
.screen {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(env(safe-area-inset-left));
}
.screen.visible { display: flex; }

/* Titel */
#screen-title { pointer-events: none; }
#screen-title::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(125% 72% at 50% 46%,
      rgba(6, 11, 22, 0.88) 0%, rgba(6, 11, 22, 0.74) 42%,
      rgba(6, 11, 22, 0.38) 68%, rgba(6, 11, 22, 0) 100%),
    linear-gradient(180deg, rgba(6, 11, 22, 0.5) 0%, rgba(6, 11, 22, 0) 26%,
      rgba(6, 11, 22, 0) 72%, rgba(6, 11, 22, 0.5) 100%);
}
.title-wrap {
  position: relative; z-index: 1;
  text-align: center; padding: 24px; max-width: 720px;
  animation: rise .7s ease both;
}
.kicker {
  display: inline-block; letter-spacing: .18em; text-transform: uppercase;
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--glass); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.title-wrap h1 {
  font-size: clamp(56px, 11vw, 108px); font-weight: 900; font-style: italic;
  letter-spacing: -0.03em; line-height: .95;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.title-wrap h1 .accent { color: var(--accent); }
.title-wrap .sub {
  margin: 18px auto 26px; font-size: 17px; line-height: 1.55; color: #e6ecf5;
  max-width: 540px; text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lang-row { margin-top: 14px; }
.lang-row .btn {
  pointer-events: auto; font-size: 13px; padding: 9px 16px;
  background: var(--glass-lite); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.badges { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.badges span {
  font-size: 13px; font-weight: 600; color: #dbe4f0;
  background: rgba(11, 18, 32, 0.72); border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: auto; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.badges span:hover { background: rgba(255, 255, 255, 0.14); color: var(--txt); }

/* Menü */
.menu-card {
  width: min(680px, calc(100vw - 32px)); max-height: 100%;
  overflow: auto; pointer-events: auto;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px;
  padding: 22px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: rise .45s ease both;
}
.menu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.menu-head h2 { font-size: 24px; flex: 1; }
#progress-label { font-weight: 700; color: var(--muted); font-size: 14px; }
#progress-bar {
  height: 8px; border-radius: 99px; background: rgba(255,255,255,.08);
  overflow: hidden; margin-bottom: 18px;
}
#progress-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #ffe97a);
  border-radius: 99px; transition: width .5s ease;
}
#menu-desc { font-size: 13.5px; color: var(--muted); margin: -6px 0 14px; min-height: 0; }
#menu-desc:empty { display: none; }
#level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
#level-grid.cats { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Eigene Sektion für den Fahrsimulator im Menü */
.menu-section {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.menu-section::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255, 214, 10, .4), transparent);
}
/* Sim-Level direkt im Hauptmenü */
.sim-levels {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.sim-levels .level {
  pointer-events: auto;
  background: linear-gradient(135deg, rgba(255, 214, 10, .1), rgba(255, 255, 255, .05));
  border-color: rgba(255, 214, 10, .28);
}
.sim-levels .level:hover { background: linear-gradient(135deg, rgba(255, 214, 10, .16), rgba(255, 255, 255, .08)); }
/* Einstiegskarte „Weiter üben" */
.menu-hero {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 18px; cursor: pointer; color: var(--txt); font: inherit;
  background: linear-gradient(135deg, rgba(255, 214, 10, .20), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 214, 10, .38);
  transition: transform .12s ease, background .15s ease;
}
.menu-hero:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(255, 214, 10, .28), rgba(255, 255, 255, .08)); }
.menu-hero .emoji {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  font-size: 26px; background: rgba(0, 0, 0, .22); border-radius: 14px;
}
.menu-hero .info { flex: 1; min-width: 0; }
.menu-hero .info b { display: block; font-size: 16.5px; margin-bottom: 2px; }
.menu-hero .info small { color: var(--muted); font-size: 12.5px; display: block; }
.menu-hero .go { flex: none; font-weight: 800; font-size: 14px; color: var(--accent); }
.menu-hero.is-done { border-color: rgba(52, 211, 153, .4); background: linear-gradient(135deg, rgba(52, 211, 153, .18), rgba(255, 255, 255, .05)); }

/* Kleine Marker in der Kategorie-Überschrift */
.cat-card .chip {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
}
.cat-card .chip.new { background: rgba(255, 214, 10, .22); color: var(--accent); }
.cat-card .chip.lock { background: rgba(255, 255, 255, .12); color: var(--muted); letter-spacing: 0; }

/* Fortschrittsbalken in der Kategorie-Karte */
.cat-card .bar {
  display: block; height: 4px; margin-top: 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
.cat-card .bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #ffe97a);
  transition: width .4s ease;
}

.cat-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px; padding: 16px; cursor: pointer; color: var(--txt); font: inherit;
  transition: background .15s ease, transform .12s ease;
}
.cat-card:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-1px); }
.cat-card .emoji {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  font-size: 26px; background: rgba(255, 255, 255, 0.09); border-radius: 14px;
}
.cat-card .info { flex: 1; min-width: 0; }
.cat-card .info b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.cat-card .info small { color: var(--muted); font-size: 12.5px; line-height: 1.35; display: block; }
.cat-card .count { font-weight: 800; font-size: 13px; color: var(--muted); flex: none; }
.cat-card .count.done { color: var(--good); }
.level {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px; padding: 13px 14px; cursor: pointer; color: var(--txt);
  font: inherit; transition: background .15s ease, transform .12s ease;
}
.level:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.level .nr {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,.1); font-weight: 800;
}
.level .ttl { flex: 1; font-weight: 650; font-size: 14px; line-height: 1.25; }
.level .status { font-size: 16px; }
.level.passed .nr { background: rgba(52, 211, 153, .22); color: var(--good); }
.level.failed .nr { background: rgba(248, 113, 113, .2); color: var(--bad); }
.level.locked { opacity: .85; }
.cat-card.locked { opacity: .85; }
.level.locked .nr { background: rgba(255, 214, 10, .15); color: var(--accent); }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; display: none; }
#hud.visible { display: block; }
#hud-top {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  right: calc(16px + env(safe-area-inset-right));
  display: flex; align-items: center; gap: 14px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px;
  padding: 9px 14px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: drop .4s ease both;
}
#hud-top .btn.icon { pointer-events: auto; }
#hud-title { flex: 1; font-weight: 800; font-size: 16px; }
#hud-count { color: var(--muted); font-weight: 700; font-size: 14px; }

#question-panel {
  position: absolute; left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  /* Versteckt: ganz unter den Bildschirmrand und unsichtbar — seit die App bis zum
     Rand zeichnet (contentInset "never"), lugte die Karte sonst unten hervor. */
  transform: translateX(-50%) translateY(calc(100% + 90px));
  visibility: hidden;
  width: min(660px, calc(100vw - 28px));
  background: var(--glass); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 18px; text-align: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  transition: transform .28s cubic-bezier(.2, .9, .25, 1.05), visibility 0s linear .28s;
}
#question-panel.visible {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition: transform .28s cubic-bezier(.2, .9, .25, 1.05), visibility 0s;
}
#question-text { font-size: 20px; font-weight: 850; }
#question-hint { font-size: 13px; color: var(--muted); margin-top: 3px; min-height: 16px; }
#explain-signs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 2px; margin-bottom: 12px;
}
#explain-signs:empty { display: none; }
/* Frage-Panel: kleine Info-Zeile, bewusst NICHT als Button gestylt */
#question-signs {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 9px;
}
#question-signs:empty { display: none; }
#question-signs .qs-label { font-size: 12.5px; font-weight: 750; color: var(--muted); }
#question-signs img { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.sign-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 11px;
}
.sign-chip img { width: 34px; height: 34px; display: block; }
.sign-chip span { font-size: 12px; font-weight: 750; color: var(--muted); }

#chips { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 13px; }
.chip {
  display: flex; align-items: center; gap: 10px; font: inherit; font-weight: 750; font-size: 15px;
  color: var(--txt); background: rgba(255,255,255,.09); border: 1.5px solid var(--line);
  padding: 13px 19px; border-radius: 999px; cursor: pointer; pointer-events: auto;
  transition: background .15s ease, transform .12s ease, border-color .15s;
}
.chip:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.chip .dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.chip.correct { border-color: var(--good); background: rgba(52, 211, 153, .18); }
.chip.wrong { border-color: var(--bad); background: rgba(248, 113, 113, .16); animation: shake .4s ease; }
.chip:disabled { cursor: default; opacity: .8; }

/* Toast */
#toast {
  /* Must sit above the paywall/alarm overlays (z-index 40-60). #toast is earlier
     in the DOM than #paywall, so without an explicit z-index it paints *behind*
     the modal and every purchase result is invisible — which makes the buy button
     look unresponsive. Cause of the 2.1(b) rejection, submission 69116372. */
  z-index: 90;
  position: absolute; top: calc(78px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%) translateY(-16px);
  background: var(--glass); border: 1px solid var(--line); color: var(--txt);
  padding: 11px 20px; border-radius: 20px; font-weight: 750; font-size: 15px;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.35;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Beim Fahren sitzt die Meldung über den Blinkern — oben stehen Anweisung und Status */
body.in-sim #toast { top: auto; bottom: calc(206px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px); }
body.in-sim #toast.visible { transform: translateX(-50%) translateY(0); }

/* ---------- Erklärung ---------- */
#explain {
  position: absolute; inset: 0; display: none;
  align-items: flex-end; justify-content: center; padding: 20px;
}
#explain.visible { display: flex; }
#explain-card {
  width: min(600px, 100%); pointer-events: auto;
  background: var(--glass); border: 1px solid var(--line); border-radius: 22px;
  padding: 22px; text-align: center;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
  animation: rise .45s cubic-bezier(.2, .9, .25, 1.05) both;
}
#explain-verdict { font-size: 24px; font-weight: 900; margin-bottom: 8px; }
#explain-verdict.good { color: var(--good); }
#explain-verdict.bad { color: var(--bad); }
.rule-chip {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--accent); background: rgba(255, 214, 10, .12);
  border: 1px solid rgba(255, 214, 10, .35);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
#explain-text { font-size: 15.5px; line-height: 1.6; color: #e4eaf4; margin-bottom: 18px; }

/* ---------- Paywall ---------- */
.modal {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 8, 16, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  /* Above the title content (z-index 1): the start screen's unlock button opens the
     paywall right over it. Below #more-apps (55, opened from the paywall) and #toast (90). */
  z-index: 48;
}
.modal.visible { display: flex; }
.modal-card {
  position: relative; width: min(430px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(28, 38, 58, .96), rgba(12, 18, 32, .97));
  border: 1px solid var(--line); border-radius: 26px; padding: 30px 26px 22px;
  text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,.6);
  animation: pop .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.modal-card .close { position: absolute; top: 12px; right: 12px; }
.pay-emoji { font-size: 44px; margin-bottom: 10px; }
.modal-card h2 { font-size: 22px; margin-bottom: 16px; }
.modal-card ul { list-style: none; text-align: left; margin: 0 auto 20px; max-width: 320px; }
.modal-card li { padding: 7px 0 7px 28px; position: relative; color: #dfe6f2; font-size: 14.5px; }
.modal-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--good); font-weight: 900; }
.modal-card .btn.big { width: 100%; }
.pay-note { margin-top: 14px; font-size: 12px; color: var(--muted); }
.pay-note a { color: var(--muted); }

/* ---------- Animationen ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
/* Für Elemente, die per translateX(-50%) zentriert sind — sonst verrutschen sie nach rechts */
@keyframes drop-c { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pop  { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}

/* ---------- Überspringen & Quiz ---------- */
#btn-skip {
  position: absolute; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: none; font-size: 14px; padding: 11px 18px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#btn-skip.visible { display: block; }

/* ---------- Debug-Schalter (nur Entwicklung, erscheint nur mit ?debug=1) ---------- */
#debug-toggle {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left));
  z-index: 60; display: none; align-items: center; gap: 7px;
  background: rgba(10, 16, 28, 0.55); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}
#debug-toggle input { display: none; }
#debug-toggle .switch {
  width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.2);
  position: relative; transition: background .15s ease; flex: none;
}
#debug-toggle .switch i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
#debug-toggle input:checked + .switch { background: #d7263d; }
#debug-toggle input:checked + .switch i { transform: translateX(14px); }
#debug-toggle .lbl { font-size: 12px; font-weight: 800; color: var(--muted); }

#debug-bar {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: none; align-items: center; gap: 10px;
  background: rgba(180, 30, 30, 0.85); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 7px 8px 7px 16px; z-index: 50;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  font-size: 12.5px; font-weight: 800; color: #fff;
}
body.debug-ui #debug-toggle { display: flex; }
body.debug-ui #debug-bar.visible { display: flex; }
#debug-bar .btn.ghost { background: rgba(255,255,255,.16); padding: 7px 12px; font-size: 12px; }
#debug-bar .btn.icon { width: 30px; height: 30px; font-size: 17px; background: rgba(255,255,255,.16); }

/* Wissensfrage als Bottom-Sheet: Die 3D-Szene bleibt dahinter sichtbar */
#quiz {
  position: absolute; inset: 0; display: none;
  align-items: flex-end; justify-content: center;
  padding: 0 14px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
}
#quiz.visible { display: flex; }
#quiz-card {
  width: min(560px, 100%); max-height: 62vh; overflow: auto; pointer-events: auto;
  background: var(--glass); border: 1px solid var(--line); border-radius: 22px;
  padding: 18px 18px; text-align: center;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
  animation: rise .4s cubic-bezier(.2, .9, .25, 1.05) both;
}
#quiz-env {
  display: none; margin: 0 auto 12px; width: fit-content;
  font-size: 13px; font-weight: 800; color: var(--accent);
  background: rgba(255, 214, 10, .1); border: 1px solid rgba(255, 214, 10, .3);
  padding: 6px 13px; border-radius: 999px;
}
#quiz-env.visible { display: block; }
#quiz-q { font-size: 17px; line-height: 1.45; margin-bottom: 14px; }
#quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  font: inherit; font-weight: 650; font-size: 15px; text-align: left; color: var(--txt);
  background: rgba(255,255,255,.08); border: 1.5px solid var(--line);
  border-radius: 15px; padding: 15px 17px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.quiz-opt:hover { background: rgba(255,255,255,.14); }
.quiz-opt.correct { border-color: var(--good); background: rgba(52, 211, 153, .16); }
.quiz-opt.wrong { border-color: var(--bad); background: rgba(248, 113, 113, .14); animation: shake .4s ease; }
.quiz-opt:disabled { cursor: default; opacity: .85; }

.howto-steps { list-style: none; counter-reset: step; text-align: left; margin: 0 auto 22px; max-width: 340px; }
.howto-steps li {
  counter-increment: step; position: relative; padding: 8px 0 8px 42px;
  color: #dfe6f2; font-size: 14.5px; line-height: 1.45;
}
.howto-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 8px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 900; border-radius: 50%;
}

/* ---------- Beobachtungsphase ---------- */
#observe {
  position: absolute; top: calc(80px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  display: none; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 12px 10px 16px; font-weight: 750; font-size: 15px; white-space: nowrap;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  max-width: calc(100vw - 24px); z-index: 6;
}
#observe.visible { display: flex; animation: drop-c .4s ease both; }
#observe .eye { font-size: 18px; }
#observe b {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 16px; animation: obs-pulse 1s ease infinite;
}
@keyframes obs-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* ---------- Fahrsimulator ---------- */
#sim-hud { position: absolute; inset: 0; display: none; pointer-events: none; }
#sim-hud.visible { display: block; }
#sim-top {
  position: absolute; top: calc(80px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
#sim-task {
  background: var(--glass); border: 1px solid var(--line); border-radius: 22px;
  padding: 10px 18px; font-weight: 750; font-size: 14px; text-align: center; line-height: 1.35;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  max-width: 100%; animation: drop .4s ease both;
}
#sim-speed {
  position: absolute; bottom: calc(58px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#sim-pedals {
  position: absolute; left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(16px + env(safe-area-inset-left)) 0 calc(16px + env(safe-area-inset-right));
}
.pedal {
  pointer-events: auto; width: 112px; height: 112px; border-radius: 28px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: grid; place-items: center; align-content: center; gap: 4px;
  font: inherit; font-weight: 900; font-size: 15px; letter-spacing: .06em; color: #fff;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  transition: transform .08s ease, filter .08s ease;
}
.pedal .ic { font-size: 30px; line-height: 1; }
.pedal.brake { background: rgba(203, 32, 55, 0.55); }
.pedal.gas { background: rgba(38, 145, 60, 0.55); }
.pedal.gas .ic { color: #b6f7c2; }
.pedal.down { transform: scale(0.93); filter: brightness(1.3); }

/* ---------- Dauerfahrten: Blinker, Info, Fehler-Flash, Auswertung ---------- */
#drive-info {
  display: none; align-items: center; gap: 14px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-weight: 800; font-size: 13.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#sim-hud.drive #drive-info { display: flex; }
#drive-mist { color: var(--bad); }
#drive-mist:empty { display: none; }

#indicators {
  position: absolute; left: 0; right: 0;
  bottom: calc(146px + env(safe-area-inset-bottom));
  display: none; justify-content: space-between;
  padding: 0 calc(20px + env(safe-area-inset-left)) 0 calc(20px + env(safe-area-inset-right));
  pointer-events: none;
}
#sim-hud.drive #indicators { display: flex; }
.blinker {
  pointer-events: auto; width: 64px; height: 48px; border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(20, 30, 48, 0.6);
  color: #fff; font-size: 22px; font-weight: 900; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .1s ease, background .12s ease, border-color .12s ease;
}
.blinker.active {
  background: rgba(255, 214, 10, 0.85); color: var(--accent-ink);
  border-color: transparent; animation: blink-pulse 0.8s step-end infinite;
}
@keyframes blink-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.55); }
}

#mistake-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0;
  box-shadow: inset 0 0 120px rgba(255, 40, 40, 0.8);
}
#mistake-flash.visible { animation: mflash .6s ease-out both; }
@keyframes mflash { from { opacity: 1; } to { opacity: 0; } }

#dr-verdict {
  font-size: 20px; font-weight: 900; margin-bottom: 14px;
}
#dr-verdict.good { color: var(--good); }
#dr-verdict.bad { color: var(--bad); }
#dr-list {
  list-style: none; text-align: left; margin: 0 0 18px; max-height: 34vh; overflow: auto;
}
#dr-list li {
  padding: 8px 0 8px 30px; position: relative; color: #f0dede; font-size: 14px; line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#dr-list li::before { content: "⚠️"; position: absolute; left: 0; top: 7px; font-size: 14px; }
#dr-list li.clean { color: #d9f3e4; }
#dr-list li.clean::before { content: "✅"; }
#dr-list li small { color: var(--muted); display: block; font-size: 12px; }

/* ---------- Alarm bei Fahrfehlern ---------- */
#alarm {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; padding: 20px;
  pointer-events: auto; z-index: 45;
}
#alarm.visible { display: flex; }
#alarm::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 140px rgba(255, 40, 40, 0.65);
  animation: alarm-flash .45s ease-in-out infinite alternate;
}
@keyframes alarm-flash {
  from { opacity: 0.25; }
  to { opacity: 1; }
}
#alarm-card {
  position: relative; width: min(430px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(58, 18, 24, 0.97), rgba(24, 10, 14, 0.97));
  border: 1.5px solid rgba(248, 113, 113, 0.55); border-radius: 26px;
  padding: 26px 24px 22px; text-align: center;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  animation: pop .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.alarm-emoji { font-size: 44px; margin-bottom: 8px; animation: obs-pulse .9s ease infinite; }
#alarm-card h2 { font-size: 24px; color: var(--bad); margin-bottom: 10px; }
#alarm-text { font-size: 15.5px; line-height: 1.55; color: #f3dede; margin-bottom: 20px; }
#alarm-card .btn.big { width: 100%; margin-bottom: 8px; }

@media (max-width: 560px) {
  .title-wrap .sub { font-size: 15px; }
  #question-text { font-size: 17px; }
  #question-panel { padding: 13px 14px; }
  #chips { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 11px; }
  .chip { justify-content: center; font-size: 14.5px; padding: 11px 15px; }
  #question-signs { margin-top: 7px; }
  #question-signs img { width: 27px; height: 27px; }
  #quiz-q { font-size: 16px; }
  .pedal { width: 96px; height: 96px; border-radius: 24px; font-size: 13px; }
  .pedal .ic { font-size: 26px; }
  #observe { font-size: 13.5px; }
}

/* ---------- Cross-promo (js/crosspromo.js) ---------- */
.cp-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9fb0c8; text-align: left; margin: 4px 2px 6px; }
.cp-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; }
.cp-row + .cp-row { margin-top: 8px; }
.cp-row img { width: 52px; height: 52px; border-radius: 12px; flex: none; background: rgba(255,255,255,.1); }
.cp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-txt b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-txt span { font-size: 12.5px; color: #9fb0c8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cp-get { flex: none; border: 0; font: inherit; font-weight: 800; font-size: 13px; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; background: rgba(255,214,10,.18); color: var(--accent); }
#dr-promo { margin: 0 0 16px; }
#dr-promo:empty { display: none; }
.cp-list-card { max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.cp-list { overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
#more-apps { z-index: 55; }
.cp-loyalty { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,214,10,.35); background: rgba(255,214,10,.10); color: var(--txt); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cp-loyalty span { color: var(--accent); font-weight: 700; font-size: 12.5px; }
#pay-loyal-price { color: #9fb0c8; text-decoration: line-through; font-size: 13px; margin-bottom: 6px; }
#pay-loyal-price:empty { display: none; }
.cp-off { align-self: flex-start; font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: #e5484d; border-radius: 999px; padding: 1px 6px; }

/* Language selection and lesson-region disclosure. */
#btn-lang { color-scheme: dark; max-width: 100%; }
#btn-lang option { color: #fff; background: #172132; }
.rule-scope { font-size: 12px; line-height: 1.5; color: var(--muted, #a8b4c7); max-width: 420px; margin: 10px auto 18px; }
/* Longer localized copy must stay reachable on small phones. */
#screen-title { overflow-y: auto; pointer-events: auto; align-items: flex-start; }
.title-wrap { width: 100%; min-width: 0; flex-shrink: 0; margin-block: auto; }
.title-wrap h1 { font-size: clamp(42px, 12vw, 108px); }
@media (max-height: 700px) {
  .title-wrap { padding: 16px; }
  .title-wrap .sub { margin: 12px auto 16px; font-size: 15px; }
  .title-wrap .kicker { font-size: 10px; margin-bottom: 12px; }
  .title-wrap .badges { margin-top: 18px; gap: 8px; }
}