/* GRANAT · SILBERBOGEN · 3D 2026 — Typografie-Ebene und Seitenbausteine
   Farben und Schriften wie auf medienwerkstatt006.at */

@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:block}

:root{
  --bg:#050508; --bg2:#0b0b10; --line:rgba(232,224,212,.16);
  --fg:#e8e0d4; --dim:#9a958c; --mag:#ff2d55; --cya:#00e5ff; --yel:#ffe600;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --disp:"Unbounded","Space Mono",system-ui,sans-serif;
}

/* ============================================================ Bühne */
.buehne{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.buehne canvas{display:block;width:100%;height:100%}

/* ============================================================ Typografie-Ebene */
.ov{position:absolute;inset:0;pointer-events:none;font-size:var(--ovu,1.0417vw);
    font-family:var(--mono);color:var(--fg);-webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision}
.ov>*{position:absolute;will-change:opacity,transform}

/* Vorspann */
.ov-vor{left:6em;right:6em;top:50%;transform:translateY(-50%);text-align:left;opacity:0}
.ov-kick{font-size:.62em;letter-spacing:.42em;text-transform:uppercase;color:var(--mag);margin-bottom:1.6em}
.ov-h1{font-family:var(--disp);font-weight:900;font-size:5.6em;line-height:.92;margin:0;
       letter-spacing:-.02em;color:var(--fg);text-shadow:0 0 1.4em rgba(0,229,255,.22)}
.ov-h2{font-family:var(--disp);font-weight:400;font-size:1.22em;line-height:1.35;
       margin-top:.9em;color:var(--yel);letter-spacing:.01em}
.ov-sub{font-size:.78em;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:1.9em}

/* Satzkarte */
.ov-satz{left:5.2em;top:19%;opacity:0;max-width:40em}
.ov-nr{display:block;font-family:var(--disp);font-weight:900;font-size:1.55em;
       color:var(--mag);margin-bottom:.30em;letter-spacing:.04em}
.ov-tit{display:block;font-family:var(--disp);font-weight:900;font-size:1.52em;
        letter-spacing:-.01em;line-height:1.14;text-wrap:balance}
.ov-txt{font-size:.70em;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);
        margin-top:1.4em;padding-left:.2em;line-height:1.7;max-width:30em;
        border-left:2px solid var(--mag);padding-left:1.1em}

/* Statement */
.ov-stm{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;opacity:0;
        font-family:var(--disp);font-weight:900;font-size:2.35em;line-height:1.22;
        letter-spacing:.26em;padding:0 6%;color:var(--fg);
        text-shadow:0 .08em .6em rgba(5,5,8,.85)}

/* HUD */
.ov-hud{font-size:.60em;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);opacity:0}
.ov-hud-l{left:3.6em;bottom:3.0em}
.ov-hud-r{right:3.6em;bottom:3.0em;text-align:right}
.ov-hud-r b{color:var(--yel);font-weight:400}
.ov-hud-t{right:3.6em;top:3.0em;text-align:right}
.ov-hud-t b{color:var(--cya);font-weight:400}
.ov-bar{left:3.6em;right:3.6em;bottom:1.9em;height:2px;background:rgba(232,224,212,.14);opacity:0}
.ov-bar i{display:block;height:100%;width:0;background:var(--mag)}

/* Abspann */
.ov-abs{left:6em;right:6em;top:50%;transform:translateY(-50%);opacity:0}
.ov-abs-t{font-family:var(--disp);font-weight:900;font-size:2.3em;letter-spacing:-.01em}
.ov-abs-s{font-size:.78em;letter-spacing:.2em;text-transform:uppercase;color:var(--yel);margin-top:.9em}
.ov-abs-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6em;margin-top:2.8em}
.ov-abs-g h4{font-size:.58em;letter-spacing:.3em;text-transform:uppercase;color:var(--mag);
             margin:0 0 1.1em;font-weight:400}
.ov-abs-g p{font-size:.72em;line-height:1.85;margin:0;color:var(--fg)}
.ov-abs-u{margin-top:2.8em;font-size:.66em;letter-spacing:.14em;color:var(--cya)}
.ov-abs-c2{margin-top:.9em;font-size:.60em;letter-spacing:.18em;color:var(--dim)}

/* Vignette */
.ov-vig{inset:0;opacity:.55;background:
  radial-gradient(130% 92% at 50% 48%,transparent 42%,rgba(5,5,8,.55) 78%,rgba(5,5,8,.9) 100%)}

/* ============================================================ Simulation */
.spiel{position:relative;background:#000}
.spiel .buehne{aspect-ratio:16/9;max-height:calc(100vh - var(--mw4-height,70px) - 220px);min-height:46vh}
.buehne.zieht{outline:2px dashed var(--cya);outline-offset:-10px}
.ladebalken{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:0 8%;line-height:2}
.pult{border-top:1px solid var(--line);background:var(--bg2)}
.pult .wrap{padding:18px 0 26px}
.pultzeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.pult h3{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mag);margin:22px 0 10px;font-weight:400}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid rgba(232,224,212,.30);color:var(--fg);padding:9px 13px;
  cursor:pointer;white-space:nowrap}
.k:hover{border-color:var(--yel);color:var(--yel)}
.k.on,.k[aria-pressed="true"]{border-color:var(--cya);color:var(--cya)}
.k.laeuft{border-color:var(--mag);color:var(--mag)}
.k.prim{border-color:var(--mag);color:var(--mag)}
.k:disabled{opacity:.4;cursor:default}
.k-datei{position:relative;overflow:hidden;display:inline-block}
.k-datei input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:100px}
.regler{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 26px}
.regler label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.regler input[type=range]{width:100%;accent-color:var(--mag);background:transparent}
.zeile-zeit{display:flex;gap:14px;align-items:center}
.zeile-zeit input[type=range]{flex:1;accent-color:var(--cya)}
.zeile-zeit b{font-family:var(--mono);font-size:13px;color:var(--yel);min-width:5ch}
.lage{font-family:var(--mono);font-size:12px;color:var(--cya);margin-top:14px;min-height:1.6em;
  border-left:2px solid var(--cya);padding-left:12px;line-height:1.7}
.pegel{height:3px;background:rgba(232,224,212,.14);margin-top:10px}
.pegel i{display:block;height:100%;width:0;background:var(--yel)}
.hinw{font-size:12.5px;color:var(--dim);line-height:1.85;margin-top:16px;max-width:68ch}
.schalter{display:inline-flex;gap:7px;align-items:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);cursor:pointer}
@media(max-width:700px){.spiel .buehne{min-height:38vh}.k{font-size:11px;padding:8px 10px}}

/* ============================================================ Seitenbausteine 3D */
.hero-knapp .wrap{padding-top:40px;padding-bottom:28px}
.zwei{display:grid;gap:26px 44px;grid-template-columns:1fr}
@media(min-width:860px){.zwei{grid-template-columns:1fr 1fr}}
.zwei p{margin:0 0 16px}
.videos-1{grid-template-columns:1fr !important;max-width:1000px}
.kapitel{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));font-size:13px}
.kapitel li{padding:9px 12px;border-left:2px solid var(--line);color:var(--dim)}
.kapitel b{color:var(--yel);font-family:var(--mono);font-weight:400;margin-right:10px}
.vitrinen{display:grid;gap:22px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:800px){.vitrinen{grid-template-columns:1fr 1fr}}
.vit{margin:0;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column}
.vit model-viewer{width:100%;height:340px;background:#07070c;--poster-color:#07070c}
.vit figcaption{padding:16px 18px 20px;border-top:1px solid var(--line)}
.vit h3{font-family:var(--disp);font-weight:900;font-size:17px;margin:0 0 8px;letter-spacing:-.01em}
.vit p{font-size:12.5px;color:var(--dim);line-height:1.8;margin:0 0 14px}
.btn-s{padding:7px 12px;font-size:11.5px}
.teaser{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line);background:var(--bg2)}
@media(min-width:860px){.teaser{grid-template-columns:1fr 1fr}}
.teaser img{width:100%;height:100%;object-fit:cover;display:block;min-height:240px}
.teaser .body{padding:26px 28px 30px}
.teaser h3{font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.4vw,30px);margin:0 0 14px;line-height:1.15}
.teaser p{font-size:14px;line-height:1.85;margin:0 0 14px;color:var(--fg)}
.hero-knapp h1{font-size:clamp(30px,4.6vw,58px)}
.hero-knapp h1 .t26{font-size:.40em;margin-top:.3em}
.hero-knapp .lead{margin-top:14px}
.vit-breit{margin:0 0 22px}
.vit-breit model-viewer{height:min(62vh,560px)}
@media(min-width:800px){.vit-breit figcaption{display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:end}
.vit-breit figcaption h3{grid-column:1/-1}}