/* ============================================================
   MISSION THW – Einsatzleiter fuer 60 Sekunden
   v1  |  reines Frontend, keine externen Assets/Fonts
   Design: "Leitstelle bei Nacht" – dunkles Ops-Dashboard
   ============================================================ */

/* --- Farb- & Typo-Token (werden aus config per JS ueberschrieben) --- */
:root{
  --thw-blau:#002d8c;        /* THW-Blau, aufgehellt fuer Screen */
  --thw-blau-tief:#000f75;   /* dunkles THW-Blau */
  --thw-gelb:#fecb00;        /* THW-Gelb – Signal/Timer */
  --bg:#00081f;              /* Ops-Room Hintergrund */
  --bg-2:#031234;            /* Panel-Hintergrund */
  --bg-3:#0a1f4d;            /* Karten-Hintergrund */
  --linie:rgba(120,160,255,.16);
  --text:#eaf1ff;
  --text-dim:#8fa4d4;
  --gut:#2fe08a;             /* richtig */
  --teil:#ffc94d;           /* teilweise */
  --schlecht:#ff5a6a;        /* falsch/kritisch */
  --font-display:"Barlow Condensed","Segoe UI Condensed","Arial Narrow",system-ui,sans-serif;
  --font-ui:"Source Sans 3","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Roboto Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --max:480px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Ops-Room: dezentes Raster + Scanline im Hintergrund */
.app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  max-width:var(--max); margin:0 auto;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,45,140,.55), transparent 60%),
    linear-gradient(180deg,var(--bg-2) 0%, var(--bg) 55%);
  overflow:hidden;
}
.app::before{ /* technisches Raster */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
}
.app::after{ /* Scanline-Schleier */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* Screens stapeln sich; nur .aktiv ist sichtbar */
.screen{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s .28s;
}
.screen.aktiv{ opacity:1; visibility:visible; transform:none; z-index:2; transition:opacity .28s ease, transform .28s ease; }

/* -------- generische Bausteine -------- */
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--thw-gelb); font-weight:700;
}
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:60px; padding:0 20px; border:0; cursor:pointer;
  font-family:var(--font-ui); font-size:17px; font-weight:800; letter-spacing:.02em;
  color:var(--bg-2); background:var(--thw-gelb); border-radius:14px;
  text-transform:uppercase; transition:transform .12s ease, filter .12s ease;
  box-shadow:0 8px 24px rgba(254,203,0,.22);
}
.btn:active{ transform:translateY(2px) scale(.99); filter:brightness(.96); }
.btn.sec{
  background:var(--bg-3); color:var(--text); box-shadow:none;
  border:1px solid var(--linie); text-transform:none; font-weight:700; font-size:15px; min-height:52px;
}
.btn.ghost{ background:transparent; color:var(--text-dim); box-shadow:none; min-height:44px; font-size:14px; text-transform:none; font-weight:600;}
.btn:focus-visible, a:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--thw-gelb); outline-offset:3px; }

/* ================= STARTBILDSCHIRM ================= */
#screen-start{ justify-content:center; text-align:center; gap:0; }
.start-logo{
  width:76px; height:76px; margin:0 auto 22px;
  display:grid; place-items:center;
  background:var(--thw-blau); border:2px solid rgba(255,255,255,.14);
  border-radius:18px; box-shadow:0 10px 40px rgba(0,45,140,.6);
}
.start-logo img{ max-width:66%; max-height:66%; display:block; }
.start-titel{
  font-size:clamp(34px,11vw,52px); line-height:.94; font-weight:900;
  letter-spacing:-.01em; text-transform:uppercase; margin-bottom:8px;
  text-shadow:0 2px 30px rgba(0,45,140,.8);
}
.start-sub{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--thw-gelb); margin-bottom:24px;
}
.start-ov{ font-size:13px; color:var(--text-dim); margin-bottom:26px; }
.start-ov b{ color:var(--text); font-weight:700; }
.start-claim{
  font-size:16px; line-height:1.5; color:var(--text);
  max-width:22em; margin:0 auto 30px;
}
.start-claim .zeit{ color:var(--thw-gelb); font-weight:800; }
.start-hinweise{ margin-top:20px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.mini-hint{ font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; gap:7px; }
.dauer-chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border:1px solid var(--linie); border-radius:999px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em; color:var(--text-dim); margin-bottom:26px;
}
.dauer-chip b{ color:var(--thw-gelb); }

/* Ton-Schalter (auch im Spiel genutzt) */
.sound-toggle{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 15px; border:1px solid var(--linie); border-radius:999px;
  background:var(--bg-2); color:var(--text-dim); font-size:13px; font-weight:600;
}
.sound-toggle[aria-pressed="true"]{ color:var(--thw-gelb); border-color:rgba(254,203,0,.4); }
.sound-toggle svg{ width:18px; height:18px; }

/* ================= COUNTDOWN ================= */
#screen-countdown{ justify-content:center; align-items:center; }
.cd-zahl{
  font-family:var(--font-mono); font-weight:800;
  font-size:clamp(120px,44vw,200px); line-height:1; color:var(--text);
  text-shadow:0 0 60px rgba(0,45,140,.9);
}
.cd-zahl.go{ color:var(--thw-gelb); font-size:clamp(52px,17vw,90px); letter-spacing:.04em; }
.cd-pulse{ animation:cdpulse .9s ease; }
@keyframes cdpulse{ 0%{transform:scale(.4);opacity:0} 35%{transform:scale(1.12);opacity:1} 100%{transform:scale(1);opacity:1} }
.cd-ring{ position:absolute; width:min(70vw,300px); aspect-ratio:1; border:2px solid var(--linie); border-radius:50%; opacity:.5;}
.cd-ring.r2{ width:min(90vw,380px); animation:radiate 2.6s ease-out infinite; }
@keyframes radiate{ 0%{transform:scale(.7);opacity:.5} 100%{transform:scale(1.15);opacity:0} }

/* ================= SPIEL-HUD ================= */
#screen-play{ padding-top:calc(env(safe-area-inset-top) + 10px); }
.hud{ display:flex; align-items:stretch; gap:8px; margin-bottom:12px; }
.hud-zeit{
  flex:1.3; display:flex; flex-direction:column; justify-content:center;
  padding:9px 14px; background:var(--bg-2); border:1px solid var(--linie); border-radius:13px;
  position:relative; overflow:hidden;
}
.hud-zeit .label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; color:var(--text-dim); text-transform:uppercase; }
.hud-zeit .wert{ font-family:var(--font-mono); font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.hud-zeit .wert small{ font-size:16px; opacity:.7; }
.hud-box{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:9px 8px; background:var(--bg-2); border:1px solid var(--linie); border-radius:13px;
}
.hud-box .label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase; margin-bottom:3px; }
.hud-box .wert{ font-family:var(--font-mono); font-size:22px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
#hud-serie .wert{ color:var(--thw-gelb); }

/* Warnzustand letzte 10s */
#screen-play.warnung .hud-zeit{ border-color:rgba(255,90,106,.6); box-shadow:0 0 0 1px rgba(255,90,106,.3) inset; }
#screen-play.warnung .hud-zeit .wert{ color:var(--schlecht); animation:zeitpuls .5s ease-in-out infinite; }
@keyframes zeitpuls{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.app.beben{ animation:beben .28s ease; }
@keyframes beben{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.app.beben-stark{ animation:bebenStark .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes bebenStark{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)} 40%,60%{transform:translateX(8px)} }
/* dezenter roter Rand-Blitz bei falscher Antwort (kein Vollbild-Blinken) */
#fx-vignette{ position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 70px 8px rgba(255,90,106,.55); transition:opacity .12s ease; }
#fx-vignette.zeigen{ opacity:1; }

/* Punkte-Fly-up */
.fly{ position:absolute; z-index:6; font-family:var(--font-mono); font-weight:800; pointer-events:none;
  color:var(--gut); text-shadow:0 2px 12px rgba(0,0,0,.6); animation:fly 1s ease-out forwards; }
.fly .zusatz{ display:block; font-size:.6em; letter-spacing:.15em; color:var(--thw-gelb); }
@keyframes fly{ 0%{transform:translateY(0) scale(.8);opacity:0} 15%{opacity:1;transform:translateY(-6px) scale(1.1)} 100%{transform:translateY(-64px) scale(1);opacity:0} }

/* Lage-Karte mit Hero-Bild (Foto oder generierter Platzhalter) */
.lage{
  flex:0 0 auto; margin-bottom:14px; padding:0;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--linie); border-radius:16px; position:relative; overflow:hidden;
}
.lage-hero{ position:relative; height:clamp(104px,27vw,150px); background:var(--thw-blau-tief); overflow:hidden; }
.lage-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lage-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,8,31,0) 35%, rgba(3,18,52,.5) 70%, rgba(3,18,52,.95)); }
.lage-chip{ position:absolute; z-index:2; top:10px; left:10px; display:flex; align-items:center; gap:7px;
  padding:6px 11px 6px 9px; background:rgba(0,15,50,.68); border:1px solid var(--linie);
  border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lage-chip .chip-ic{ display:grid; place-items:center; }
.lage-chip .chip-ic svg{ width:15px; height:15px; color:var(--thw-gelb); }
.lage-chip .lage-kat{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--thw-gelb); }
.lage-body{ padding:12px 15px 14px; }
.lage-titel{ font-size:19px; font-weight:900; text-transform:uppercase; line-height:1.05; letter-spacing:-.01em; margin-bottom:5px; }
.lage-text{ font-size:14.5px; line-height:1.4; color:var(--text); opacity:.92; }
/* Frage-Timer als schrumpfender Balken oben auf der Karte */
.lage-timer{ position:absolute; z-index:4; top:0; left:0; height:4px; width:100%; background:var(--thw-gelb);
  transform-origin:left center; }
.lage-timer.eilig{ background:var(--schlecht); animation:tickpuls .35s ease-in-out infinite; }
@keyframes tickpuls{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* Antworten */
.antworten{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:2px; }
.antwort{
  display:flex; align-items:center; gap:13px; width:100%; min-height:64px;
  padding:10px 15px; text-align:left; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--linie); border-radius:14px;
  color:var(--text); font-family:var(--font-ui); font-size:15.5px; font-weight:700; line-height:1.2;
  transition:transform .1s ease, background .15s ease, border-color .15s ease;
}
.antwort:active{ transform:scale(.985); }
.antwort .a-icon{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border-radius:9px; }
.antwort .a-icon svg{ width:22px; height:22px; color:var(--text-dim); }
.antwort .a-mark{ margin-left:auto; flex:0 0 auto; width:24px; height:24px; opacity:0; transition:opacity .15s; }
.antwort.gut{ background:rgba(47,224,138,.16); border-color:var(--gut); color:#daffea; }
.antwort.gut .a-mark{ opacity:1; color:var(--gut); }
.antwort.teil{ background:rgba(255,201,77,.16); border-color:var(--teil); }
.antwort.teil .a-mark{ opacity:1; color:var(--teil); }
.antwort.schlecht{ background:rgba(255,90,106,.16); border-color:var(--schlecht); animation:wackel .3s ease; }
.antwort.schlecht .a-mark{ opacity:1; color:var(--schlecht); }
.antwort.aus{ opacity:.4; }
@keyframes wackel{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(5px)} }

/* Feedback-Zeile */
.feedback{
  position:absolute; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom) + 14px);
  z-index:5; padding:13px 16px; border-radius:13px; font-size:14px; line-height:1.35;
  background:var(--bg-2); border:1px solid var(--linie);
  opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; pointer-events:none;
}
.feedback.zeigen{ opacity:1; transform:none; }
.feedback.gut{ border-color:var(--gut); }
.feedback.teil{ border-color:var(--teil); }
.feedback.schlecht{ border-color:var(--schlecht); }
.feedback b{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px; }
.feedback.gut b{ color:var(--gut); } .feedback.teil b{ color:var(--teil); } .feedback.schlecht b{ color:var(--schlecht); }

/* ================= ERGEBNIS ================= */
#screen-result{ overflow-y:auto; -webkit-overflow-scrolling:touch; display:block; }
.res-head{ text-align:center; padding:6px 0 18px; }
.res-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; color:var(--thw-gelb); text-transform:uppercase; }
.res-punkte{ font-family:var(--font-mono); font-size:clamp(48px,17vw,72px); font-weight:800; line-height:1; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.res-punkte-label{ font-size:12px; color:var(--text-dim); letter-spacing:.14em; text-transform:uppercase; }
.res-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:18px; }
.stat{ background:var(--bg-2); border:1px solid var(--linie); border-radius:12px; padding:11px 13px; }
.stat .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.stat .v{ font-family:var(--font-mono); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px; }
.res-typ{ background:linear-gradient(180deg,var(--thw-blau),var(--thw-blau-tief)); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:18px 18px 20px; margin-bottom:16px; text-align:center; }
.res-typ .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--thw-gelb); }
.res-typ .name{ font-size:26px; font-weight:900; text-transform:uppercase; margin:5px 0 8px; }
.res-typ .beschr{ font-size:14px; line-height:1.5; color:var(--text); }
.res-badges{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.badge{ display:flex; align-items:center; gap:13px; background:var(--bg-2); border:1px solid var(--linie);
  border-left:3px solid var(--thw-gelb); border-radius:12px; padding:12px 14px; }
.badge .b-icon{ flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; background:rgba(254,203,0,.14); border-radius:10px; }
.badge .b-icon svg{ width:24px; height:24px; color:var(--thw-gelb); }
.badge .b-name{ font-weight:800; font-size:15px; }
.badge .b-desc{ font-size:12px; color:var(--text-dim); margin-top:2px; line-height:1.3; }

.cta-block{ background:var(--bg-2); border:1px solid var(--linie); border-radius:16px; padding:18px; margin-bottom:14px; text-align:center; }
.cta-block h3{ font-size:19px; font-weight:900; line-height:1.15; margin-bottom:7px; }
.cta-block p{ font-size:14px; color:var(--text-dim); line-height:1.45; margin-bottom:15px; }
.res-aktionen{ display:flex; flex-direction:column; gap:9px; }
.res-aktionen .row{ display:flex; gap:9px; }
.res-aktionen .row .btn{ flex:1; }

.res-foot{ margin-top:22px; font-size:11px; line-height:1.5; color:var(--text-dim); text-align:center; padding:0 4px; }
.res-links{ margin-top:12px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.res-links a{ color:var(--text-dim); font-size:11.5px; text-decoration:none; border-bottom:1px solid transparent; }
.res-links a:hover{ color:var(--text); border-color:var(--text-dim); }

/* Kontaktformular (aufklappbar) */
.kontakt{ overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .3s ease; }
.kontakt.offen{ max-height:800px; opacity:1; margin-top:12px; }
.feld{ margin-bottom:11px; text-align:left; }
.feld label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; font-weight:600; }
.feld input, .feld select{
  width:100%; min-height:50px; padding:0 14px; font-size:15px; font-family:var(--font-ui);
  background:var(--bg-3); border:1px solid var(--linie); border-radius:11px; color:var(--text);
}
.feld input:focus, .feld select:focus{ outline:2px solid var(--thw-gelb); outline-offset:1px; }
.feld.check{ display:flex; align-items:flex-start; gap:10px; }
.feld.check input{ width:22px; height:22px; min-height:0; margin-top:1px; flex:0 0 auto; }
.feld.check label{ margin:0; font-size:12.5px; line-height:1.4; }
.form-hinweis{ font-size:11.5px; color:var(--text-dim); margin-top:8px; line-height:1.4; }
.form-ok{ display:none; text-align:center; padding:20px 10px; }
.form-ok.zeigen{ display:block; }
.form-ok .haken{ width:56px; height:56px; margin:0 auto 12px; color:var(--gut); }

/* Konfetti-Canvas */
#konfetti{ position:absolute; inset:0; z-index:7; pointer-events:none; }

/* Toast (Share-Fallback etc.) */
.toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 20px); transform:translateX(-50%) translateY(20px);
  background:var(--bg-3); border:1px solid var(--linie); color:var(--text); padding:12px 18px; border-radius:12px;
  font-size:13.5px; z-index:20; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; max-width:90%; text-align:center; }
.toast.zeigen{ opacity:1; transform:translateX(-50%); }

/* Ladeschirm */
#ladebalken{ position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:var(--bg); }
#ladebalken .l-inner{ text-align:center; }
#ladebalken .l-bar{ width:180px; height:4px; background:var(--bg-3); border-radius:99px; overflow:hidden; margin:16px auto 0; }
#ladebalken .l-fill{ height:100%; width:30%; background:var(--thw-gelb); border-radius:99px; animation:lade 1s ease-in-out infinite; }
@keyframes lade{ 0%{transform:translateX(-120%)} 100%{transform:translateX(420%)} }

/* Reduced Motion */
body.reduce *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.05s !important; }
@media (prefers-reduced-motion: reduce){
  .cd-ring.r2{ animation:none; } .fly{ animation-duration:.4s; }
}
/* sehr kleine Hoehe: kompakter */
@media (max-height:640px){
  .antwort{ min-height:58px; } .lage-hero{ height:clamp(80px,20vw,110px); } .lage-body{ padding:10px 14px 12px; } .start-titel{ font-size:40px; }
}

/* --- NetProDigital-Integration: Barlow Condensed für Headlines/Buttons --- */
.start-titel,.lage-titel,.res-typ .name,.cta-block h3,.badge .b-name,.btn{ font-family:var(--font-display); }
.start-titel,.lage-titel{ letter-spacing:0; }        /* Condensed braucht kein negatives Tracking */
.btn{ letter-spacing:.03em; }