/* ══════════════════════════════════════════════════════════════
   WALKMAN STORIES · walkmanstories.ch · UNIFIED CSS
   SPA: Entry → Hero → Walkman Device → Siegfriedkarte → Video → Footer
   ══════════════════════════════════════════════════════════════ */

/* ── RESET + CUSTOM PROPERTIES ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --void:#0a0a0a;--alu-1:#0e0d0c;--alu-2:#121110;--alu-3:#161514;--alu-4:#1a1918;--alu-5:#1e1d1c;--alu-6:#222120;
  --chrome-1:#2e2d2c;--chrome-2:#3a3938;--chrome-3:#4a4948;--chrome-4:#5a5958;
  --win:#030302;--win2:#080706;
  --rec:#8b1a1a;--rec-b:#c0392b;--rec-d:#5a1010;--rec-g:rgba(139,26,26,0.4);
  --t1:rgba(160,150,135,0.7);--t2:rgba(120,112,100,0.5);--t3:rgba(90,84,74,0.4);
}
html{height:100%;scroll-behavior:smooth}
html.entry-active,html.entry-active body{overflow:hidden;position:fixed;width:100%;height:100%}
body{min-height:100dvh;min-height:100svh;background:var(--void);color:var(--t1);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── GRAIN + SCANLINES ── */
body::before{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
body::after{content:'';position:fixed;inset:0;z-index:9001;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px)}

/* Night mode (23:00–05:00) — applied via JS */
body.night{--rec:#a02020;--rec-b:#d04040;--rec-g:rgba(160,32,32,0.5)}
body.night::before{opacity:1.3}

/* VHS Glitch overlay (triggered periodically via JS) */
.vhs-glitch{position:fixed;inset:0;z-index:9002;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,
    transparent 0%,rgba(139,26,26,.03) 1%,transparent 2%,
    rgba(255,255,255,.01) 3%,transparent 4%);
  mix-blend-mode:screen;transition:opacity .05s}
.vhs-glitch.flash{opacity:1;animation:vhsGlitch .15s steps(3) forwards}
@keyframes vhsGlitch{
  0%{transform:translate(0,0) scaleY(1)}
  25%{transform:translate(-2px,1px) scaleY(1.002)}
  50%{transform:translate(1px,-1px) scaleY(.998)}
  75%{transform:translate(2px,0) scaleY(1.003)}
  100%{transform:translate(0,0) scaleY(1);opacity:0}
}

/* ══════════════════════════════════════════════════════════
   ENTRY OVERLAY — Enhanced scanlines for initial screen
   ══════════════════════════════════════════════════════════ */
.entry{position:fixed;inset:0;z-index:8000;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100vh;height:100svh;height:100dvh;
  transition:opacity .8s,visibility .8s;cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:none;overscroll-behavior:none}
.entry.gone{opacity:0;visibility:hidden;pointer-events:none}

/* Enhanced entry scanlines (heavier than main page) */
.entry::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.08) 1px,rgba(0,0,0,0.08) 3px);
  z-index:1}
.entry::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.4));
  z-index:2}

.rec-dot{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,var(--rec-b),var(--rec) 60%,var(--rec-d));
  box-shadow:0 0 12px var(--rec-g),0 0 30px rgba(139,26,26,0.15);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 12px var(--rec-g),0 0 30px rgba(139,26,26,0.15)}
  50%{box-shadow:0 0 20px var(--rec-g),0 0 50px rgba(139,26,26,0.2)}}

.entry-audio{width:36px;height:36px;border-radius:50%;position:relative;z-index:3;
  border:1px solid rgba(139,26,26,0.12);display:flex;align-items:center;justify-content:center;
  animation:ringPulse 2.4s ease-in-out infinite}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:0.5}}

.entry-text{margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:4px;text-transform:uppercase;color:var(--rec);opacity:0;
  transition:opacity .5s .3s;position:relative;z-index:3}
.entry.active .entry-text{opacity:1}

.entry-return{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:8px;
  letter-spacing:2px;color:var(--t3);opacity:0;transition:opacity .5s .5s;
  position:relative;z-index:3}
.entry.returning .entry-return{opacity:1}

.entry-hint{position:absolute;bottom:15vh;font-size:8px;letter-spacing:3px;
  text-transform:uppercase;color:var(--t3);animation:blink 4s ease-in-out infinite;
  z-index:3}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}


/* ══════════════════════════════════════════════════════════
   MAIN CONTENT WRAPPER
   ══════════════════════════════════════════════════════════ */
.main{opacity:0;transition:opacity .6s .4s;pointer-events:none}
.main.on{opacity:1;pointer-events:auto}


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero{text-align:center;padding:60px 20px 20px}
.hero-banner{max-width:420px;width:100%;height:auto;margin:0 auto;display:block;opacity:0.9}


/* ══════════════════════════════════════════════════════════
   LOGLINE
   ══════════════════════════════════════════════════════════ */
.logline{text-align:center;padding:20px 24px 30px;max-width:520px;margin:0 auto}
.logline-text{font-family:'Libre Baskerville',serif;font-size:14px;line-height:1.9;
  color:rgba(160,150,135,0.6);font-style:italic;opacity:0;transform:translateY(12px);
  transition:all .8s}
.logline-text.vis{opacity:1;transform:translateY(0)}
.logline-whisper{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;
  color:var(--rec);margin-top:14px;opacity:0;transition:opacity .8s .4s}
.logline-whisper.vis{opacity:.6}


/* ══════════════════════════════════════════════════════════
   DEVICE (WM-D6C WALKMAN)
   ══════════════════════════════════════════════════════════ */
.device-section{display:flex;justify-content:center;padding:10px 16px 30px;position:relative;z-index:2}

.device{width:355px;max-width:100%;border-radius:4px;position:relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2' numOctaves='5' seed='7'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.012'/%3E%3C/svg%3E"),
    linear-gradient(178deg,#1a1918 0%,#141312 5%,#101010 20%,#0d0d0d 50%,#0e0e0e 70%,#111 85%,#0c0c0c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 -1px 0 rgba(0,0,0,0.5),
    -1px 0 0 rgba(0,0,0,0.4),1px 0 0 rgba(0,0,0,0.4),0 4px 8px rgba(0,0,0,0.5),
    0 12px 30px rgba(0,0,0,0.6),0 30px 70px rgba(0,0,0,0.5)}
.device::after{content:'';position:absolute;inset:0;border-radius:4px;
  border:1px solid rgba(255,255,255,0.025);border-bottom-color:rgba(0,0,0,0.3);pointer-events:none;z-index:50}
.d-in{padding:12px 14px 16px;position:relative;z-index:2}

/* Brand */
.dbrand{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 12px}
.dbrand-name{font-size:12px;font-weight:700;letter-spacing:5px;text-transform:uppercase;
  color:rgba(210,205,195,.65)}
.dbrand-sub{font-size:5.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(160,150,135,.3)}

/* Cassette window */
.cframe{margin:0 2px;border-radius:3px;background:#020202;border:2px solid #0a0908;
  overflow:hidden;box-shadow:inset 0 4px 16px rgba(0,0,0,0.95),inset 0 1px 3px rgba(0,0,0,0.98),
    0 1px 0 rgba(255,255,255,0.02)}
.cframe::before{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.005) 38%,
    rgba(255,255,255,0.015) 42%,rgba(255,255,255,0.005) 46%,transparent 54%)}
.cframe-in{padding:10px 14px;min-height:240px;position:relative}

/* SVG Cassette */
.cssvg{display:block;margin:0 auto;width:100%;max-width:280px}
.reel-o{fill:url(#rG);stroke:rgba(80,70,55,.25);stroke-width:.5}
.reel-h{fill:var(--win);stroke:rgba(80,70,55,.2);stroke-width:.4}
.reel-s{stroke:rgba(80,70,55,.12);stroke-width:.3;fill:none}
.reel-t{fill:rgba(80,70,55,.18)}
.reel-g.spin{animation:spinR 2s linear infinite}
.reel-l.spin{animation-duration:1.5s}.reel-r.spin{animation-duration:2.5s}
@keyframes spinR{to{transform:rotate(360deg)}}
.tp{fill:none;stroke:rgba(80,65,45,.2);stroke-width:1.2}
.gp{fill:url(#gpG);stroke:rgba(80,70,58,.3);stroke-width:.3}
.hd{fill:url(#hdG);stroke:rgba(80,70,58,.3);stroke-width:.3;rx:1}
.sh-o{fill:none;stroke:rgba(80,65,45,.08);stroke-width:.5;rx:3}
.sh-l{fill:rgba(255,255,255,.008);stroke:rgba(80,65,45,.06);stroke-width:.3;rx:2}
.cs-t{font-family:'Inter',sans-serif;fill:rgba(139,26,26,.35);text-anchor:middle;dominant-baseline:middle}

/* Narrative zone */
.nzone{padding:4px 6px 6px;min-height:85px}
.ntag{font-size:7.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--rec);display:flex;align-items:center;gap:5px;margin-bottom:5px}
.ntag .pip{width:4px;height:4px;border-radius:50%;background:var(--rec);animation:blink 1.8s ease-in-out infinite}
.nbody{font-family:'Libre Baskerville',serif;font-size:11px;line-height:1.75;
  color:rgba(160,150,135,.75);font-style:italic;opacity:0;transition:opacity .6s}
.nbody.on{opacity:1}
.nbody .tw-cursor{display:inline-block;width:1px;height:13px;background:var(--rec);
  margin-left:1px;vertical-align:text-bottom;animation:twBlink .6s step-end infinite}
.nbody .tw-wait{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;
  color:var(--t3);text-transform:uppercase}
.nbody .tw-done .nq{opacity:0;animation:fadeQuote .8s ease forwards .3s}
@keyframes twBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fadeQuote{to{opacity:1}}
.nq{margin-top:7px;padding-top:6px;border-top:1px solid rgba(139,26,26,.08);
  font-family:'Libre Baskerville',serif;font-size:10px;color:rgba(139,26,26,.55);opacity:0}

/* Cassette nav dots */
.tape-dir{text-align:center;padding:6px 0 2px}
.tape-dir svg{width:22px;height:10px;fill:none;stroke:rgba(200,195,185,.25);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cnav{display:flex;justify-content:center;gap:5px;padding:4px 0 1px}
.cnav button{width:5px;height:5px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(80,70,55,.18);transition:all .3s}
.cnav button.a{background:var(--rec);box-shadow:0 0 5px var(--rec-g)}
.cnav button.x{opacity:.2;cursor:not-allowed}

/* VU meters */
.vu-p{display:flex;gap:5px;margin:5px 2px}
.vu-b{flex:1;border-radius:2px;overflow:hidden;
  background:linear-gradient(180deg,#111010,#0d0c0b 40%,#0a0908);
  border:1.5px solid rgba(60,56,50,.2);box-shadow:inset 0 1px 4px rgba(0,0,0,.5);padding:5px 5px 3px}
.vu-f{height:32px;position:relative;overflow:hidden}
.vu-svg{width:100%;height:100%;position:absolute;inset:0}
.vu-n{position:absolute;bottom:0;left:50%;width:1px;height:28px;
  transform-origin:bottom center;transform:translateX(-50%) rotate(-42deg);transition:transform .1s ease-out}
.vu-ns{width:1px;height:100%;background:linear-gradient(180deg,var(--rec-b),rgba(160,150,135,.5) 30%);margin:0 auto}
.vu-nb{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:5px;height:5px;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,#222,#0a0a0a)}
.vu-ch{font-size:5px;font-weight:600;letter-spacing:1.5px;text-align:center;color:var(--t2);margin-bottom:2px}
.vu-db{font-size:3.5px;text-align:center;color:var(--t3);letter-spacing:2px;margin-top:1px}

/* Switches */
.ctrl-row{display:flex;justify-content:space-around;padding:8px 6px 3px}
.ctrl-g{text-align:center}
.ctrl-lbl{font-size:5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3);margin-bottom:3px}
.ctrl-sw{width:28px;height:13px;margin:0 auto;position:relative;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.2));
  border:1px solid rgba(255,255,255,.05);border-radius:7px;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.ctrl-knob{position:absolute;top:1.5px;left:2px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--chrome-3),var(--chrome-1) 60%,var(--alu-2));
  box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);transition:left .2s}
.ctrl-sw.on .ctrl-knob{left:16px}
.ctrl-sw.on{border-color:var(--rec-d);background:linear-gradient(180deg,rgba(100,16,16,.3),rgba(100,16,16,.12))}
.ctrl-st{font-size:4.5px;letter-spacing:1.2px;color:var(--t3);margin-top:2px;transition:color .2s}
.ctrl-sw.on~.ctrl-st{color:var(--rec)}

/* Separator + Transport */
.sep{height:1px;margin:6px 10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}
.tport{display:flex;justify-content:center;gap:3px;padding:4px 10px}
.tb{flex:1;max-width:54px;height:34px;border-radius:2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#1e1d1c,#181716 15%,#121110 50%,#151413 70%,#1a1918);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.03)}
.tb:active{transform:translateY(1px);background:linear-gradient(180deg,#0e0d0c,#0a0908 50%,#0e0d0c);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.tb svg{width:12px;height:12px;fill:var(--t2)}.tb:hover svg{fill:var(--t1)}
.tb-rec{background:linear-gradient(180deg,#2e1a18,var(--alu-3) 20%,var(--alu-2) 50%,var(--alu-3) 75%,#2e1a18)}
.tb-rec .rdot{width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,var(--rec-b),var(--rec) 60%,var(--rec-d))}
.tb-rec.on .rdot{box-shadow:0 0 8px var(--rec-g);animation:blink 1.2s ease-in-out infinite}
.tlbl{display:flex;justify-content:center;gap:3px;padding:0 10px}
.tlbl span{flex:1;max-width:54px;text-align:center;font-size:4.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--t3)}

/* Code tray */
.codetray{max-height:0;overflow:hidden;transition:max-height .35s;margin:0 10px}
.codetray.open{max-height:65px}
.codetray-in{padding:4px 0;display:flex;justify-content:center}
.code-f{background:var(--win);border:1px solid rgba(139,26,26,.15);border-right:none;
  border-radius:2px 0 0 2px;color:var(--rec);font-family:'Inter',sans-serif;
  font-size:9px;letter-spacing:3px;text-transform:uppercase;text-align:center;
  padding:5px 8px;width:125px;outline:none}
.code-f::placeholder{color:rgba(100,90,75,.25)}
.code-f:focus{border-color:var(--rec)}
.code-b{background:var(--win);border:1px solid rgba(139,26,26,.15);border-radius:0 2px 2px 0;
  color:var(--t3);font-size:8px;padding:5px 6px;cursor:pointer}
.code-b:hover{color:var(--rec)}
.code-r{text-align:center;font-family:'Libre Baskerville',serif;font-size:9px;
  font-style:italic;color:rgba(139,26,26,.45);margin-top:3px;min-height:14px}

/* FM Tuner */
.freq-zone{margin:8px 2px 0;padding:5px 8px;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.2));
  border-radius:2px;border:1px solid rgba(255,255,255,.025)}
.freq-disp{text-align:center}
.freq-n{font-size:24px;font-weight:300;letter-spacing:1px;color:transparent;
  background:linear-gradient(180deg,var(--t1),var(--t2));
  -webkit-background-clip:text;background-clip:text;transition:all .3s}
.freq-n.hot{background:linear-gradient(180deg,var(--rec-b),var(--rec));
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px var(--rec-g))}
.freq-u{font-size:6px;letter-spacing:2.5px;color:var(--t3)}
.freq-s{text-align:center;font-size:6px;letter-spacing:2px;text-transform:uppercase;
  color:var(--t3);margin:2px 0 5px;min-height:12px;transition:color .3s}
.freq-s.hot{color:var(--rec)}
.freq-rail{height:3px;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.15));
  border-radius:2px;position:relative;margin:0 3px;cursor:pointer}
.freq-pip{position:absolute;top:-2px;width:1px;height:7px;background:rgba(139,26,26,.12)}
.freq-th{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;cursor:grab;z-index:5;
  background:radial-gradient(circle at 35% 35%,var(--chrome-3),var(--chrome-1) 60%,var(--alu-2));
  border:1px solid rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:box-shadow .2s}
.freq-th.hot{border-color:var(--rec-d);box-shadow:0 0 8px var(--rec-g)}
.freq-tk{display:flex;justify-content:space-between;padding:3px 3px 0;font-size:5px;color:var(--t3)}

/* Bottom SN + Dolby */
.dbot{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 0}
.dbot span{font-size:5.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t3)}
.dbot-dolby{font-size:5px!important;letter-spacing:1.5px!important;color:rgba(210,205,195,.35)!important;
  border:1px solid rgba(210,205,195,.12);padding:1px 4px;border-radius:1px}


/* ══════════════════════════════════════════════════════════
   FUNDORT MODE (QR visitors)
   ══════════════════════════════════════════════════════════ */
.fundort-hint{display:none;text-align:center;padding:20px 20px 10px;position:relative;z-index:2}
body.fundort-mode .fundort-hint{display:block}
body.fundort-mode .cta{display:none}
body.fundort-mode .cnav{display:none}
body.fundort-mode .tb-nav{opacity:.15;pointer-events:none}

.fundort-loc{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px;
  text-transform:uppercase;color:var(--rec);margin-bottom:3px}
.fundort-coord{font-size:6px;letter-spacing:2px;color:var(--t3);margin-bottom:14px}
.fundort-more{font-family:'Libre Baskerville',serif;font-size:11px;font-style:italic;
  color:var(--t2);margin-bottom:10px}
.fundort-link{font-size:7px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t3);text-decoration:none;padding:5px 12px;
  border:1px solid rgba(139,26,26,.1);border-radius:3px;transition:all .3s}
.fundort-link:hover{border-color:var(--rec);color:var(--rec)}


/* ══════════════════════════════════════════════════════════
   SIEGFRIEDKARTE (Map Section)
   ══════════════════════════════════════════════════════════ */
.map-section{display:flex;flex-direction:column;align-items:center;
  padding:30px 12px 12px;width:100%;position:relative;z-index:2}

/* Map header */
.map-header{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:6px 0 16px}
.map-header .hdr-rec{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 38% 38%,var(--rec-b),var(--rec) 60%,var(--rec-d));
  box-shadow:0 0 8px var(--rec-g),0 0 20px rgba(139,26,26,0.12);
  animation:hdrBlink 2.4s ease-in-out infinite}
@keyframes hdrBlink{0%,100%{opacity:1;box-shadow:0 0 8px var(--rec-g),0 0 20px rgba(139,26,26,0.12)}
  50%{opacity:.35;box-shadow:0 0 4px var(--rec-g),0 0 10px rgba(139,26,26,0.06)}}
.map-header .hdr-text{display:flex;flex-direction:column;gap:1px}
.map-header .hdr-title{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;
  letter-spacing:6px;text-transform:uppercase;color:rgba(160,150,135,0.6)}
.map-header .hdr-sub{font-family:'IBM Plex Mono',monospace;font-size:6.5px;
  letter-spacing:3px;text-transform:uppercase;color:var(--rec);opacity:.7}

/* Map viewport */
.map-viewport{position:relative;width:100%;max-width:1200px;overflow:hidden;
  border:1px solid rgba(200,192,178,0.04);border-radius:1px;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.map-viewport:active{cursor:grabbing}
.map-scene{position:relative;transform-origin:0 0;will-change:transform}
.map-img{width:100%;height:auto;display:block;opacity:.85;pointer-events:none}

/* Zoom controls */
.zoom-ctrl{position:absolute;top:10px;right:10px;z-index:30;display:flex;flex-direction:column;gap:4px}
.zoom-btn{width:32px;height:32px;border:1px solid rgba(200,192,178,0.08);border-radius:2px;
  background:rgba(10,10,10,.85);color:var(--t2);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
  font-family:'IBM Plex Mono',monospace;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.zoom-btn:hover{border-color:var(--rec);color:var(--rec-b)}
.zoom-btn:active{background:rgba(139,26,26,.1)}
.zoom-level{width:32px;text-align:center;font-size:6px;letter-spacing:1px;color:var(--t3);padding:2px 0}
.zoom-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:30;
  font-size:6px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);
  padding:3px 10px;background:rgba(10,10,10,.8);border:1px solid rgba(200,192,178,0.04);
  border-radius:2px;transition:opacity .5s;pointer-events:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.zoom-hint.hidden{opacity:0}

/* Fundort markers */
.fundort-marker{position:absolute;cursor:pointer;transform:translate(-50%,-50%);z-index:10;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.fundort-marker .core{width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,var(--rec-b),var(--rec) 60%,var(--rec-d));
  box-shadow:0 0 10px var(--rec-g),0 0 25px rgba(139,26,26,0.2),0 0 50px rgba(139,26,26,0.08);
  transition:all .3s ease;position:relative;z-index:2}
.fundort-marker:hover .core,.fundort-marker.active .core{width:14px;height:14px;
  background:radial-gradient(circle at 38% 38%,#e74c3c,var(--rec-b) 60%,var(--rec));
  box-shadow:0 0 14px rgba(192,57,43,0.5),0 0 35px rgba(139,26,26,0.3),0 0 60px rgba(139,26,26,0.12)}
.fundort-marker .ring{position:absolute;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--rec);animation:markerRing 2.6s ease-out infinite;opacity:0}
@keyframes markerRing{0%{transform:scale(.25);opacity:.7}100%{transform:scale(1);opacity:0}}
.fundort-marker .ring2{position:absolute;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rec);animation:markerRing 2.6s ease-out infinite;animation-delay:1.3s;opacity:0}
.fundort-marker:hover .ring,.fundort-marker:hover .ring2{animation-duration:1.4s}

/* Bunker marker */
.fundort-marker.bunker{width:56px;height:56px}
.fundort-marker.bunker .core{width:14px;height:14px;
  box-shadow:0 0 12px var(--rec-g),0 0 30px rgba(139,26,26,0.25),0 0 60px rgba(139,26,26,0.1)}
.fundort-marker.bunker:hover .core,.fundort-marker.bunker.active .core{width:17px;height:17px}
.fundort-marker.bunker .ring{width:48px;height:48px;border-width:2px}
.fundort-marker.bunker .ring2{width:48px;height:48px}
.fundort-marker.bunker .ring3{position:absolute;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(139,26,26,.4);animation:markerRing 2.6s ease-out infinite;animation-delay:0.65s;opacity:0}

.fundort-marker .flabel{position:absolute;top:calc(100% + 0px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:6.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--rec-b);opacity:0;transition:opacity .3s;pointer-events:none;
  text-shadow:0 0 10px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.7)}
.fundort-marker:hover .flabel,.fundort-marker.active .flabel{opacity:1}

/* Cluster markers */
.cluster{position:absolute;cursor:pointer;transform:translate(-50%,-50%);z-index:12;
  display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.cluster .cl-core{width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,var(--rec-b),var(--rec) 60%,var(--rec-d));
  box-shadow:0 0 12px var(--rec-g),0 0 30px rgba(139,26,26,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:600;color:rgba(255,255,255,.7);
  font-family:'IBM Plex Mono',monospace;
  position:relative;z-index:2;transition:all .3s}
.cluster:hover .cl-core{width:20px;height:20px;
  box-shadow:0 0 16px rgba(192,57,43,0.4),0 0 40px rgba(139,26,26,0.25)}
.cluster .ring{position:absolute;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--rec);animation:markerRing 2.6s ease-out infinite;opacity:0}
.cluster .ring2{position:absolute;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--rec);animation:markerRing 2.6s ease-out infinite;animation-delay:1.3s;opacity:0}
.cluster .flabel{position:absolute;top:calc(100% + 0px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:6px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--rec-b);opacity:0;transition:opacity .3s;pointer-events:none;
  text-shadow:0 0 10px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.7)}
.cluster:hover .flabel{opacity:1}

/* Cluster selector popup */
.cl-select{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:rgba(10,10,10,.95);border:1px solid rgba(139,26,26,.15);border-radius:3px;
  padding:0;min-width:160px;z-index:20;opacity:0;pointer-events:none;
  transition:opacity .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cl-select.on{opacity:1;pointer-events:auto}
.cl-opt{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:pointer;
  transition:background .2s;border-bottom:1px solid rgba(139,26,26,.06)}
.cl-opt:last-child{border-bottom:none}
.cl-opt:hover{background:rgba(139,26,26,.08)}
.cl-opt .cl-pip{width:5px;height:5px;border-radius:50%;background:var(--rec);
  box-shadow:0 0 4px var(--rec-g);flex-shrink:0}
.cl-opt span{font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--t1)}

.cluster-ring{position:absolute;border:1px dashed rgba(139,26,26,.15);border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%)}

/* Connection SVG */
.conn-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.conn-path{fill:none;stroke:rgba(139,26,26,.04);stroke-width:1;stroke-dasharray:4 8;transition:all .5s}
.conn-path.on{stroke:rgba(139,26,26,.18);stroke-width:1.2}

/* Info panel */
.info-panel{width:100%;max-width:1200px;margin-top:8px;
  background:rgba(6,5,4,.95);border:1px solid rgba(200,192,178,0.04);border-radius:2px;
  padding:0 20px;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .4s ease,max-height .4s ease,padding .4s ease}
.info-panel.on{opacity:1;max-height:300px;padding:16px 20px}
.info-loc{font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--rec-b);
  font-family:'IBM Plex Mono',monospace;
  display:flex;align-items:center;gap:7px;margin-bottom:4px}
.info-loc::before{content:'';width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,var(--rec-b),var(--rec));
  box-shadow:0 0 8px var(--rec-g);animation:infoBlink 1.8s ease-in-out infinite}
@keyframes infoBlink{0%,100%{opacity:1}50%{opacity:.3}}
.info-kass{font-size:6px;letter-spacing:2.5px;color:var(--t2);margin-bottom:8px;
  font-family:'IBM Plex Mono',monospace}
.info-body{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.info-text{font-family:'Libre Baskerville',serif;font-size:11px;line-height:1.75;
  color:rgba(160,150,135,.65);font-style:italic;max-width:560px;flex:1;min-width:240px}
.info-quote{font-family:'Libre Baskerville',serif;font-size:10px;color:rgba(139,26,26,.55);
  padding-left:12px;border-left:1px solid rgba(139,26,26,.15);max-width:260px;line-height:1.6}
.info-play{font-family:'IBM Plex Mono',monospace;
  font-size:7px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--rec);text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:6px 14px;border:1px solid rgba(139,26,26,.2);border-radius:2px;transition:all .3s;
  background:rgba(139,26,26,.04);cursor:pointer;border:1px solid rgba(139,26,26,.2)}
.info-play:hover{border-color:var(--rec-b);color:var(--rec-b);background:rgba(139,26,26,.08)}
.info-play .link-rec{width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:var(--rec);box-shadow:0 0 6px var(--rec-g);animation:hdrBlink 2.4s ease-in-out infinite}

/* Legend */
.map-legend{display:flex;gap:20px;margin-top:8px;justify-content:center;flex-wrap:wrap;
  padding:8px 16px;border:1px solid rgba(200,192,178,0.04);border-radius:2px;
  background:rgba(10,10,10,.5)}
.map-legend .legend-item{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2.5px;
  color:var(--t2);display:flex;align-items:center;gap:6px;text-transform:uppercase}
.legend-dot{width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,var(--rec-b),var(--rec));box-shadow:0 0 6px var(--rec-g)}
.legend-bunker{width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,var(--rec-b),var(--rec));
  box-shadow:0 0 8px var(--rec-g),0 0 16px rgba(139,26,26,.15)}
.legend-count{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:var(--t3)}


/* ══════════════════════════════════════════════════════════
   WALKMAN POPUP OVERLAY
   ══════════════════════════════════════════════════════════ */
.wm-popup{position:fixed;inset:0;z-index:7500;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s}
.wm-popup.on{opacity:1;visibility:visible;pointer-events:auto}
.wm-popup-inner{position:relative;max-width:400px;width:92%;max-height:90vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--rec-d) transparent}
.wm-popup-close{position:absolute;top:-30px;right:0;z-index:10;
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(139,26,26,.15);
  background:rgba(10,10,10,.9);color:var(--t2);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .3s}
.wm-popup-close:hover{border-color:var(--rec);color:var(--rec-b)}

/* Popup walkman inherits .device styles */
.wm-popup .device{width:355px;max-width:100%}

/* Popup fundort tag (minimal, WM-D6C authentic) */
.wm-popup-tag{font-size:7.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--rec);display:flex;align-items:center;gap:5px;padding:4px 6px 2px}
.wm-popup-tag .pip{width:4px;height:4px;border-radius:50%;background:var(--rec);animation:blink 1.8s ease-in-out infinite}

/* Fast spin for FF/RW in popup */
.reel-g.spin-fast{animation:spinR .5s linear infinite}
.reel-l.spin-fast{animation-duration:.4s}
.reel-r.spin-fast{animation-duration:.6s}


/* ══════════════════════════════════════════════════════════
   TEASER VIDEO SECTION
   ══════════════════════════════════════════════════════════ */
.video-section{text-align:center;padding:40px 20px 20px;position:relative;z-index:2;
  max-width:800px;margin:0 auto;width:100%}
.video-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px;
  text-transform:uppercase;color:var(--rec);opacity:.6;margin-bottom:16px}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#000;cursor:pointer}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block}

/* Custom play button */
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);transition:opacity .3s;z-index:2}
.video-play.hidden{opacity:0;pointer-events:none}
.video-play-btn{width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(139,26,26,.4);background:rgba(10,10,10,.7);
  display:flex;align-items:center;justify-content:center;transition:all .3s}
.video-play-btn:hover{border-color:var(--rec-b);background:rgba(10,10,10,.85)}
.video-play-btn::after{content:'';display:block;width:0;height:0;margin-left:4px;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  border-left:16px solid var(--rec-b)}

/* Progress bar */
.video-progress{width:100%;height:2px;background:rgba(255,255,255,.06);margin-top:4px;
  position:relative;cursor:pointer}
.video-progress-bar{height:100%;background:var(--rec-b);width:0;transition:width .1s linear}


/* ══════════════════════════════════════════════════════════
   CTA + FOOTER
   ══════════════════════════════════════════════════════════ */
.cta{text-align:center;padding:30px 20px 20px;position:relative;z-index:2}
.cta-season{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px;
  text-transform:uppercase;color:var(--rec);opacity:.6;margin-bottom:10px}
.cta-social{display:inline-flex;align-items:center;gap:6px;
  font-size:7px;letter-spacing:2px;text-transform:uppercase;
  color:var(--t3);text-decoration:none;padding:5px 10px;
  border:1px solid rgba(139,26,26,.1);border-radius:3px;transition:all .3s}
.cta-social:hover{border-color:var(--rec);color:var(--rec)}
.cta-social img{width:14px;height:14px;opacity:.5}

.ftr{text-align:center;padding:30px 20px 40px;position:relative;z-index:2}
.ftr .ftr-prod{font-size:6px;letter-spacing:2px;color:var(--t3);margin-bottom:3px;text-transform:uppercase}
.ftr .ftr-prod a{color:var(--t3);text-decoration:none;transition:color .3s}
.ftr .ftr-prod a:hover{color:var(--rec)}
.ftr .ftr-line{font-size:5.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(90,84,74,0.25)}


/* ══════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════ */
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-20px);
  font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--rec);
  font-family:'IBM Plex Mono',monospace;
  background:rgba(10,10,10,.95);border:1px solid rgba(139,26,26,.15);
  padding:6px 14px;border-radius:3px;opacity:0;pointer-events:none;
  transition:all .3s;z-index:9999;backdrop-filter:blur(6px)}
.toast.pop{opacity:1;transform:translateX(-50%) translateY(0)}


/* ══════════════════════════════════════════════════════════
   SLEEP / TAB-RETURN OVERLAY
   ══════════════════════════════════════════════════════════ */
.sleep-overlay{position:fixed;inset:0;z-index:8500;background:rgba(0,0,0,.95);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility .6s;
  cursor:pointer}
.sleep-overlay.on{opacity:1;visibility:visible;pointer-events:auto}
.sleep-text{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:2;
  letter-spacing:2px;color:var(--rec);text-align:center;max-width:400px;padding:0 20px}
.sleep-hint{font-size:7px;letter-spacing:3px;color:var(--t3);text-transform:uppercase;
  margin-top:20px;animation:blink 4s ease-in-out infinite}


/* ══════════════════════════════════════════════════════════
   PRINT EASTER EGG — POLIZEIPROTOKOLL
   Google Fonts: Caveat (handwriting), Dancing Script (signature)
   ══════════════════════════════════════════════════════════ */
.print-only{display:none}
@media print{
  /* Hide everything except print content */
  body::before,body::after,.entry,.toast,.vhs-glitch,.sleep-overlay,
  .main,.hero,.logline,.device-section,.map-section,.video-section,.cta,.ftr,
  .wm-popup{display:none!important}
  body{background:#fff!important;color:#000!important}

  .print-only{display:block!important;color:#000;background:#fff;
    font-family:'Times New Roman',serif;padding:30px 40px;max-width:700px;margin:0 auto}

  /* SPECIMEN watermark */
  .print-specimen{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-35deg);
    font:bold 110pt 'Arial Black',sans-serif;color:rgba(200,0,0,0.18);pointer-events:none;
    print-color-adjust:exact;-webkit-print-color-adjust:exact;z-index:999;
    letter-spacing:12px}

  /* Header */
  .print-hdr{text-align:center;margin-bottom:20px}
  .print-logo{width:80px;margin:0 auto 10px;display:block}
  .print-title{font-size:14pt;font-weight:bold;letter-spacing:2px;text-transform:uppercase}
  .print-sub{font-size:9pt;color:#555;margin-top:2px}
  .print-hr{border:none;border-top:1px solid #999;margin:14px 0}

  /* Data table */
  .print-tbl{width:100%;border-collapse:collapse;font-size:10pt;margin:12px 0}
  .print-tbl td{padding:3px 8px;border-bottom:1px solid #eee}
  .print-tbl .pl{font-weight:bold;width:140px;color:#333}

  /* Body text */
  .print-body{font-size:10pt;line-height:1.7;margin:16px 0}
  .print-body p{margin:8px 0}

  /* Geschwärzte Stellen */
  .print-redact{background:#000;color:#000;padding:0 2px;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}

  /* Stamps */
  .print-stamp{text-align:center;margin:30px 0 10px;font-size:8pt;
    color:#888;border:1px solid #ccc;display:inline-block;padding:6px 16px;border-radius:50%}
  .print-akz{font-size:7pt;color:#999;letter-spacing:1px;margin-top:4px}

  /* Signatures — handwritten fonts */
  .print-sig{display:flex;justify-content:space-between;margin-top:40px}
  .print-sig div{text-align:center;width:40%}
  .print-sig-line{border-top:1px solid #999;margin-bottom:4px}
  .print-sig-name{font-family:'Caveat','Dancing Script',cursive;font-size:16pt;color:#222}
  .print-sig-rank{font-size:7pt;color:#666;letter-spacing:.5px}
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:900px){
  .map-viewport{max-width:100%}
  .info-panel{max-width:100%}
}

/* Mobile */
@media(max-width:700px){
  .info-text{font-size:10px}
  .info-body{flex-direction:column;gap:10px}
  .info-quote{padding-left:0;border-left:none;padding-top:6px;border-top:1px solid rgba(139,26,26,.1)}
  .fundort-marker .flabel,.cluster .flabel{font-size:5.5px}
  .zoom-ctrl{top:6px;right:6px}
  .zoom-btn{width:36px;height:36px;font-size:18px}
  .cl-opt{padding:10px 14px}
  .cl-opt span{font-size:8px}
  .video-play-btn{width:44px;height:44px}
}

/* Small mobile */
@media(max-width:400px){
  .device{width:310px}
  .hero{padding:40px 16px 16px}
  .logline{padding:16px 20px 24px}
  .logline-text{font-size:13px}
  .wm-popup .device{width:300px}
  .map-header .hdr-title{font-size:9px;letter-spacing:4px}
  .video-section{padding:30px 12px 16px}
}