/* show.css — Immersive Show, dunkel/cinematisch */
@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Bricolage"; src:url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-display:swap; }

:root { --bg:#05060a; --ink:#f2f0ea; --dim:#9a978e; --accent:#e8b34b; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink);
       font-family:"Bricolage",system-ui,sans-serif; overflow-x:hidden; }

#show-video { position:fixed; inset:0; width:100vw; height:100vh;
              object-fit:cover; display:block; z-index:0; background:var(--bg); }
.scroll-space { position:relative; z-index:-1; pointer-events:none; }

#overlays { position:relative; z-index:2; pointer-events:none; }
.overlay { position:fixed; left:8vw; bottom:14vh; max-width:min(34rem,80vw);
           opacity:0; visibility:hidden; pointer-events:none;
           transform:translateY(24px);
           transition:opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.overlay.on { opacity:1; visibility:visible; pointer-events:auto;
              transform:translateY(0);
              transition:opacity .6s ease, transform .6s ease, visibility 0s; }
.overlay h1,.overlay h2 { font-family:"Fraunces",serif; font-weight:560;
  font-size:clamp(2.6rem,7vw,5.4rem); line-height:1.02; margin:.2rem 0 .6rem; }
.overlay .kicker { font-family:"JetBrains Mono",monospace; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0; }
.overlay .lede { font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.55; color:#d8d5cc; }
.overlay .cta { display:inline-block; margin-top:1rem; color:var(--ink);
  font-family:"JetBrains Mono",monospace; font-size:.85rem; letter-spacing:.08em;
  border:1px solid #3a3d47; padding:.7rem 1.2rem; border-radius:999px;
  text-decoration:none; transition:background .25s,color .25s; }
.overlay .cta:hover { background:var(--ink); color:var(--bg); }
.overlay-footer { left:8vw; bottom:4vh; font-size:.8rem; color:var(--dim); }
.overlay-footer a { color:var(--dim); }

#hud { position:fixed; z-index:3; right:max(1.2rem, env(safe-area-inset-right));
  bottom:max(1.2rem, env(safe-area-inset-bottom)); display:flex; align-items:center; gap:1rem; }
.hud-classic { font-family:"JetBrains Mono",monospace; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  text-decoration:none; border-bottom:1px solid transparent; }
.hud-classic:hover { color:var(--ink); border-color:var(--ink); }
#hud-dots { display:flex; gap:.45rem; }
#hud-dots i { width:6px; height:6px; border-radius:50%; background:#3a3d47;
  transition:background .3s, transform .3s; }
#hud-dots i.on { background:var(--ink); transform:scale(1.35); }

#hud-autopilot { width:30px; height:30px; border-radius:50%;
  border:1px solid #3a3d47; background:transparent; color:var(--dim);
  font-size:1rem; line-height:1; cursor:pointer; padding:0;
  transition:color .25s, border-color .25s; }
#hud-autopilot:hover { color:var(--ink); border-color:var(--ink); }
#hud.pilot-running #hud-autopilot { color:var(--accent); border-color:var(--accent); }

#hud-overview { font-family:"JetBrains Mono",monospace; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  border:1px solid #3a3d47; background:transparent; border-radius:999px;
  padding:.4rem .8rem; cursor:pointer; transition:color .25s,border-color .25s; }
#hud-overview:hover { color:var(--ink); border-color:var(--ink); }

/* --- Kreuzung: Wahl zwischen den Produkt-Kapiteln --- */
/* Zentriert über der ganzen viewport, mit dunklem Backdrop, damit es
   über jedem Video-Frame (auch mittendrin, via Übersicht-Button) lesbar ist.
   Überschreibt die bottom-left-Positionierung der normalen .overlay. */
.overlay-crossroads { left:50%; right:auto; bottom:auto; top:50%;
  width:min(56rem,90vw); max-width:min(56rem,90vw);
  transform:translate(-50%,-50%) translateY(18px); text-align:center;
  background:rgba(5,6,10,.74); -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px); border:1px solid #20232c; border-radius:1.2rem;
  padding:clamp(1.6rem,4vw,2.8rem); }
.overlay-crossroads.on { transform:translate(-50%,-50%); }
.overlay-crossroads .cr-sub { margin:.4rem 0 0; }

.crossroads-grid { display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.7rem; margin-top:1.4rem; text-align:left; }
.cr-card { display:flex; flex-direction:column; gap:.3rem;
  background:rgba(255,255,255,.03); border:1px solid #2a2d36;
  border-radius:.8rem; padding:.9rem 1rem; cursor:pointer; color:var(--ink);
  font-family:inherit; text-align:left;
  transition:border-color .25s, background .25s, transform .25s; }
.cr-card:hover, .cr-card:focus-visible { border-color:var(--accent);
  background:rgba(232,179,75,.08); transform:translateY(-2px); outline:none; }
.cr-num { font-family:"JetBrains Mono",monospace; font-size:.7rem;
  color:var(--dim); letter-spacing:.1em; }
.cr-name { font-family:"Fraunces",serif; font-weight:560; font-size:1.15rem; }
.cr-lede { font-size:.78rem; line-height:1.4; color:#c4c1b8; }

.cr-run { margin-top:1.4rem; display:inline-block; color:var(--ink);
  font-family:"JetBrains Mono",monospace; font-size:.85rem; letter-spacing:.08em;
  border:1px solid var(--accent); background:transparent; padding:.7rem 1.4rem;
  border-radius:999px; cursor:pointer; transition:background .25s, color .25s; }
.cr-run:hover { background:var(--accent); color:var(--bg); }

#preloader { position:fixed; inset:0; z-index:10; background:var(--bg);
  display:grid; place-content:center; gap:1.2rem; justify-items:center;
  transition:opacity .6s ease; }
#preloader.done { opacity:0; pointer-events:none; }
.pre-title { font-family:"Fraunces",serif; font-size:clamp(1.6rem,4vw,2.6rem); }
.pre-track { width:min(320px,60vw); height:2px; background:#23252d; }
#preloader-bar { width:0%; height:100%; background:var(--ink); transition:width .2s; }
#preloader-pct { font-family:"JetBrains Mono",monospace; font-size:.75rem; color:var(--dim); }

#fallback-banner { position:fixed; z-index:11; left:0; right:0; top:0;
  background:#1c1e26; color:var(--ink); text-align:center; padding:.7rem 1rem;
  font-size:.85rem; }
#fallback-banner a { color:var(--accent); }

@media (max-width:700px) {
  .overlay { left:6vw; right:6vw; bottom:12vh; max-width:none; }
  .overlay-crossroads { left:4vw; right:4vw; top:50%; width:auto;
    max-width:none; transform:translate(0,-50%) translateY(18px); padding:1.4rem; }
  .overlay-crossroads.on { transform:translate(0,-50%); }
  .crossroads-grid { grid-template-columns:1fr 1fr; }
  #hud { gap:.6rem; }
}