:root{
  --bg:#040A06;
  --accent:#9BEB4F;
  --accent-soft:rgba(155,235,79,.16);
  --ink:#d7f2c6;
  --ink-dim:rgba(215,242,198,.55);
  --grid:rgba(150,220,120,.05);
  --mono:"SF Mono",ui-monospace,"Roboto Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%;background:var(--bg);overflow:hidden;color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}
body{position:fixed;inset:0}
#stage{position:absolute;inset:0;contain:strict}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* === DOM HUD overlay (text layers — crisp, accessible) === */
.hud{position:absolute;pointer-events:none;will-change:transform,opacity}
.lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.mini{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}

/* top command bar */
#topbar{top:0;left:0;right:0;height:54px;display:flex;align-items:center;
  padding:0 clamp(12px,2.4vw,28px);gap:14px;
  border-bottom:1px solid rgba(120,170,220,.10);
  background:linear-gradient(180deg,rgba(8,14,22,.55),rgba(8,14,22,0));}
#brandwrap{display:flex;flex-direction:column;gap:2px;justify-content:center}
#wordmark{font-family:var(--sans);font-weight:700;letter-spacing:.42em;line-height:1;
  font-size:clamp(15px,2.1vw,21px);color:#fff;
  text-shadow:0 0 14px var(--accent-soft);padding-left:.42em}
#wordmark b{color:var(--accent);font-weight:700}
#brandsub{font-size:8px;letter-spacing:.32em;color:var(--ink-dim);
  padding-left:.55em;text-transform:uppercase;white-space:nowrap}
@media (max-aspect-ratio:3/4){ #brandsub{display:none} }
#statechip{display:flex;align-items:center;gap:7px;padding:4px 11px;border-radius:20px;
  border:1px solid rgba(120,170,220,.22);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
#statedot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 9px var(--accent);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
#ekg{flex:1;height:34px;min-width:60px}
#nav{display:flex;gap:6px}
.nav-b{font-size:9px;letter-spacing:.16em;color:var(--ink-dim);
  border:1px solid rgba(120,170,220,.14);border-radius:5px;padding:5px 8px;text-transform:uppercase;cursor:pointer}
.nav-b.on{color:var(--accent);border-color:rgba(63,167,255,.4)}

/* corner clock / id */
#clk{top:62px;right:clamp(12px,2.4vw,28px);text-align:right}
#clk .big{font-size:13px;color:var(--ink);letter-spacing:.12em}

/* Mail-Badges (heutige Anzahl je Anbieter) */
#mailbadges{top:96px;right:clamp(12px,2.4vw,28px);display:flex;gap:10px;pointer-events:auto}
.mbadge{display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:64px;padding:8px 12px 7px;border-radius:11px;
  border:1px solid rgba(120,170,220,.22);
  background:linear-gradient(180deg,rgba(10,16,24,.6),rgba(10,16,24,.18));
  box-shadow:inset 0 0 18px rgba(120,170,220,.04)}
.mbadge .mb-num{font-size:21px;font-weight:700;line-height:1;color:#fff;font-family:var(--mono);
  transition:color .4s ease}
.mbadge .mb-lbl{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.mbadge.gmail{border-color:rgba(234,67,53,.4)}
.mbadge.gmail .mb-num{color:#ff7a6b;text-shadow:0 0 12px rgba(234,67,53,.45)}
.mbadge.gmail .mb-lbl{color:rgba(255,140,128,.65)}
.mbadge.outlook{border-color:rgba(40,140,230,.45)}
.mbadge.outlook .mb-num{color:#4aa8ff;text-shadow:0 0 12px rgba(0,120,212,.45)}
.mbadge.outlook .mb-lbl{color:rgba(120,180,255,.7)}
@media (max-aspect-ratio:3/4){
  #mailbadges{top:auto;bottom:70px;right:14px;gap:8px}
  .mbadge{min-width:54px;padding:6px 9px 5px}
  .mbadge .mb-num{font-size:17px}
}

/* subtitle / transcript HUD */
/* Untertitel deaktiviert (auf Wunsch von Felix) */
#subs{display:none !important}
#subs.show{left:50%;transform:translateX(-50%);bottom:clamp(14px,3.5vh,40px);
  width:min(620px,84vw);text-align:center;display:flex;flex-direction:column;gap:7px}
#subs .you{font-size:clamp(11px,1.5vw,13px);color:var(--ink-dim);letter-spacing:.04em;min-height:1em}
#subs .you::before{content:"FELIX  ";color:rgba(120,170,220,.4);letter-spacing:.2em;font-size:9px}
#subs .al{font-family:var(--sans);font-size:clamp(14px,2vw,18px);color:#fff;line-height:1.45;
  letter-spacing:.01em;min-height:1.2em;text-shadow:0 0 18px rgba(0,0,0,.6)}
#subs .al .cur{display:inline-block;width:.5ch;color:var(--accent)}

/* panel captions positioned over canvas */
.cap{position:absolute;pointer-events:none}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  #statedot{animation:none}
}
/* portrait phones: tighten bar */
@media (max-aspect-ratio:3/4){
  #wordmark{letter-spacing:.3em}
  #nav{display:none}
  #ekg{display:none}
}

/* === Vollbild-Weißblitz (Wake-Re-Energize / Fehler) === */
#flash{position:absolute;inset:0;z-index:70;background:#fff;opacity:0;pointer-events:none}

/* === "Aktivieren"-Overlay (Audio-Entsperr-Geste) === */
#enter{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;background:#04070B;cursor:pointer;
  transition:opacity .8s ease}
#enter.gone{opacity:0;pointer-events:none}
.enter-mark{font-family:var(--sans);font-weight:700;letter-spacing:.5em;text-indent:.5em;
  font-size:clamp(26px,8vw,52px);color:#fff;text-shadow:0 0 30px var(--accent-soft);
  animation:enterbreathe 3.2s ease-in-out infinite}
.enter-mark b{color:var(--accent)}
.enter-sub{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim)}
@keyframes enterbreathe{0%,100%{opacity:.8}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .enter-mark{animation:none} }

/* === Zugang-Login (Schloss 1) === */
#login{position:absolute;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;background:#04070B}
#login.show{display:flex}
.login-card{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:34px 30px;border:1px solid rgba(155,235,79,.25);border-radius:16px;
  background:linear-gradient(180deg,rgba(10,20,12,.7),rgba(10,20,12,.3));
  box-shadow:0 0 60px rgba(155,235,79,.08);min-width:min(360px,86vw)}
.login-mark{font-family:var(--sans);font-weight:700;letter-spacing:.42em;
  font-size:30px;color:#fff;text-shadow:0 0 24px var(--accent-soft)}
.login-mark b{color:var(--accent)}
.login-sub{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim)}
#login-key{width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(155,235,79,.3);background:rgba(0,0,0,.4);
  color:var(--ink);font-family:var(--mono);font-size:15px;letter-spacing:.06em;
  text-align:center;outline:none}
#login-key:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
#login-go{width:100%;padding:12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent-soft);color:#eaffe0;
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase}
#login-go:hover{background:rgba(155,235,79,.26)}
.login-hint{min-height:1em;font-size:10px;letter-spacing:.1em;color:#ff8a7a}