/* EUTOPIA · Neue Fassung 2026 — Projektseite · medienwerkstatt006
   Formensprache: das Stahlraster des Landhausboulevards (Regierungsviertel St. Pölten) als Konstruktionsgitter,
   der Zeitschlitz als Grundoperation, Farben aus dem Film: Nacht, Eis, Magenta, Rot des Verschwindens. */
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-var.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/spacemono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/spacemono-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{--nacht:#050508;--nacht2:#0a0d16;--nacht3:#101727;--linie:#1d2a3d;--stahl:#6f8aa3;--off:#e8e0d4;--dim:#9aa3ad;
  --eis:#00e5ff;--mag:#ff2d55;--rot:#c8102e;--gelb:#ffe600;
  --disp:"Unbounded","Arial Black",Arial,sans-serif;--mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1280px;--raster:80px;--dt:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{margin:0;background:var(--nacht);color:var(--off);font-family:var(--mono);font-size:15px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--off);text-decoration:none;border-bottom:1px solid rgba(0,229,255,.5)}
a:hover{color:var(--eis);border-color:var(--eis)}
button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
@media(min-width:720px){.wrap{padding:0 32px}}
::selection{background:var(--eis);color:var(--nacht)}
:focus-visible{outline:2px solid var(--eis);outline-offset:3px}

/* ── Konstruktionsgitter des Landhausboulevards: liegt über allen Sektionen ── */
main{position:relative;background:
  linear-gradient(90deg,rgba(111,138,163,.07) 1px,transparent 1px) 0 0/var(--raster) var(--raster),
  linear-gradient(180deg,rgba(111,138,163,.07) 1px,transparent 1px) 0 0/var(--raster) var(--raster),var(--nacht)}

/* ── HUD ── */
.hud{position:sticky;top:var(--mw4-height,70px);z-index:20;background:rgba(5,5,8,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie);font-size:12px;letter-spacing:.04em}
.hud .wrap{display:flex;gap:18px;align-items:center;min-height:48px}
.hud-k{color:var(--eis);white-space:nowrap;flex:0 0 auto;font-weight:700}
.hud nav{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.hud nav::-webkit-scrollbar{display:none}
.hud nav a{border:0;color:var(--dim)}
.hud nav a:hover,.hud nav a.on{color:var(--eis)}
.hud-dt{margin-left:auto;flex:0 0 auto;color:var(--stahl);font-size:11px;min-width:58px;text-align:right}
.hud-dt b{color:var(--mag);font-weight:400}
@media(max-width:560px){.hud-k{display:none}}

/* ── HERO · ZEITSCHLITZ ── */
.schlitz{position:relative;background:#000;overflow:hidden}
.schlitz .stage{position:relative;height:min(56.25vw,88vh);min-height:440px;cursor:ew-resize;touch-action:pan-y}
.schlitz canvas,.schlitz .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.schlitz canvas{opacity:0;transition:opacity 1.2s}
.schlitz.live canvas{opacity:1}
.schlitz.live .poster{opacity:0;transition:opacity 1.2s}
.schlitz .gitter{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:
  linear-gradient(90deg,rgba(0,229,255,.13) 1px,transparent 1px) 0 0/calc(100%/12) 100%,
  linear-gradient(180deg,rgba(0,229,255,.1) 1px,transparent 1px) 0 0/100% calc(100%/6.75)}
.schlitz .stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,8,.35) 0,rgba(5,5,8,0) 22%,rgba(5,5,8,0) 45%,rgba(5,5,8,.7) 72%,var(--nacht) 100%)}
.schlitz-linie{position:absolute;top:0;bottom:0;left:calc(var(--dt)*1%);width:1px;background:var(--mag);box-shadow:0 0 14px 2px rgba(255,45,85,.6);pointer-events:none;transition:left .25s}
.schlitz .titel{position:absolute;left:0;right:0;bottom:118px;z-index:2;pointer-events:none}
.kicker{margin:0 0 8px;color:var(--eis);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.schlitz h1{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(58px,13.5vw,212px);line-height:.86;letter-spacing:-.02em;color:var(--off);mix-blend-mode:difference}
.schlitz h1 span{display:inline-block;background:linear-gradient(90deg,var(--off) 0 calc(var(--dt)*1%),var(--eis) calc(var(--dt)*1%) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:14px 0 4px;font-size:clamp(15px,2.1vw,24px);color:var(--eis)}
.meta{margin:0;color:var(--dim);font-size:13px}
.regler{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:12px}
.reg-g{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reg-g span{color:var(--stahl);margin-right:4px}
.reg-g button{background:rgba(5,5,8,.7);border:1px solid var(--linie);padding:5px 10px;cursor:pointer;letter-spacing:.03em}
.reg-g button:hover{border-color:var(--eis);color:var(--eis)}
.reg-g button.on{background:var(--eis);color:var(--nacht);border-color:var(--eis)}
.reg-hint{margin:0 0 0 auto;color:var(--stahl)}
@media(max-width:719px){.schlitz .titel{position:relative;bottom:auto;margin-top:-120px}.regler{position:relative;bottom:auto;padding-top:18px;padding-bottom:10px}.reg-hint{margin:0}}
.no-js .regler,.reduce .regler{display:none}

/* ── Sektionen ── */
section{padding:88px 0;border-top:1px solid var(--linie);position:relative}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,44px);line-height:1.05;margin:0 0 36px;letter-spacing:-.01em}
h2 .nr{display:inline-block;font-family:var(--mono);font-weight:400;font-size:13px;color:var(--mag);vertical-align:top;margin-right:10px;border:1px solid var(--mag);padding:1px 6px;line-height:1.6}
h2 small{display:block;font-family:var(--mono);font-weight:400;font-size:13px;color:var(--dim);margin-top:10px;letter-spacing:0}
h3{font-family:var(--disp);font-weight:600;font-size:18px;line-height:1.25;margin:0 0 8px}
.zwei{display:grid;gap:10px 60px;grid-template-columns:minmax(0,1fr)}
.refs,.text,.tech{overflow-wrap:anywhere}
@media(min-width:980px){.zwei{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.zwei h2{position:sticky;top:180px;align-self:start}}
.text p{margin:0 0 1.1em;max-width:72ch}
.lead{font-size:18px;line-height:1.6;color:#fff}
em{font-style:normal;color:var(--eis)}

/* ── Player + Partitur ── */
.player{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--linie)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{font-size:12px;color:var(--dim);margin:10px 0 0}
.partitur{margin-top:44px}
.pt-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--stahl);margin-bottom:8px;flex-wrap:wrap}
.pt-read{color:var(--eis)}
.tl{position:relative;height:150px;cursor:crosshair;border:1px solid var(--linie);background:#000;touch-action:pan-y}
.tl img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:saturate(1.15)}
.tl .laut{position:absolute;left:0;right:0;bottom:0;height:60%;width:100%}
.tl .laut path{fill:rgba(5,5,8,.55);stroke:var(--off);stroke-width:1;vector-effect:non-scaling-stroke}
.tl-cursor{position:absolute;top:-6px;bottom:-6px;left:0;width:1px;background:var(--mag);box-shadow:0 0 10px var(--mag);pointer-events:none;opacity:0}
.tl:hover .tl-cursor,.tl.aktiv .tl-cursor{opacity:1}
.tl-m{position:absolute;top:0;bottom:0;width:0;border:0;border-left:1px solid rgba(232,224,212,.75);background:none;padding:0;cursor:pointer}
.tl-m span{position:absolute;top:4px;left:4px;font-size:10px;white-space:nowrap;background:rgba(5,5,8,.8);padding:0 4px;color:var(--off)}
.tl-m:hover span{background:var(--eis);color:var(--nacht)}
.pt-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--stahl);margin-top:4px}
@media(max-width:600px){.tl-m span{display:none}.tl{height:110px}}

.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);margin:34px 0 0;max-width:720px}
.zahlen div{background:var(--nacht);padding:14px 16px}
.zahlen dt{font-size:11px;color:var(--stahl);text-transform:uppercase;letter-spacing:.1em}
.zahlen dd{margin:4px 0 0;font-family:var(--disp);font-size:26px;font-weight:600;color:var(--eis)}

/* ── Sätze ── */
.saetze{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:760px){.saetze{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.saetze{grid-template-columns:repeat(4,minmax(0,1fr))}}
.satz{background:var(--nacht);display:flex;flex-direction:column}
.satz-go{position:relative;display:block;border:0;padding:0;background:#000;cursor:pointer;overflow:hidden}
.satz-go img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s,filter .6s;filter:saturate(.85)}
.satz-go:hover img{transform:scale(1.04);filter:saturate(1.2)}
.satz-go::after{content:"▶";position:absolute;right:10px;bottom:8px;font-size:12px;color:var(--nacht);background:var(--eis);padding:2px 8px;opacity:0;transition:opacity .3s}
.satz-go:hover::after,.satz-go:focus-visible::after{opacity:1}
.satz-go .tc{position:absolute;left:10px;top:8px;font-size:11px;background:rgba(5,5,8,.8);padding:1px 6px;color:var(--eis)}
.satz-t{padding:16px 18px 22px;font-size:13px;line-height:1.62}
.satz-t .num{margin:0 0 4px;font-family:var(--disp);font-size:13px;color:var(--mag);font-weight:600;letter-spacing:.06em}
.satz-t .q{color:var(--stahl);margin:0 0 10px;font-size:12px}
.satz-t p{margin:0 0 10px}
.satz-t .ton{color:var(--dim);font-size:12px;border-top:1px dashed var(--linie);padding-top:8px;margin:0}
.satz-t .ton span{color:var(--eis);margin-right:4px}
.satz.jetzt{box-shadow:inset 0 0 0 1px var(--mag)}

/* ── Verfahren ── */
.ops{display:grid;gap:22px 18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.op{margin:0;cursor:zoom-in}
.op img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--linie)}
.op figcaption{font-size:12px;line-height:1.55;padding-top:10px;display:grid;gap:3px}
.op b{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--off)}
.op span{color:var(--dim)}
.op em{color:var(--mag);font-size:11px}
.op:hover img{border-color:var(--eis)}

/* ── Materialentnahme ── */
.srcs{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.src{display:grid;gap:6px 24px;align-items:center}
@media(min-width:900px){.src{grid-template-columns:minmax(0,340px) minmax(0,1fr) 150px}}
.src-k{display:grid;font-size:13px;line-height:1.45}
.src-k a{border:0;color:var(--off)}
.src-k a:hover{color:var(--eis)}
.src-k span{font-size:11px;color:var(--stahl)}
.src-bar{position:relative;height:22px;width:var(--w);background:repeating-linear-gradient(90deg,var(--nacht3) 0 7px,var(--nacht2) 7px 8px);border:1px solid var(--linie)}
.src-bar i{position:absolute;top:-4px;bottom:-4px;background:var(--mag);cursor:pointer;box-shadow:0 0 8px rgba(255,45,85,.6)}
.src-bar i:hover{background:var(--eis);box-shadow:0 0 10px var(--eis)}
.src-n{font-size:12px;color:var(--off);text-align:right}
.src-n span{color:var(--stahl)}
@media(max-width:899px){.src-n{text-align:left}}
.note{font-size:12px;color:var(--dim);margin-top:26px}

/* ── Original ── */
.stationen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.stationen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.stationen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stationen article{background:var(--nacht);padding:20px 20px 24px;font-size:13px;line-height:1.62}
.stationen p{margin:0}
.st-j{font-size:11px;color:var(--mag);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px!important}
.st-neu{background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(5,5,8,0) 70%),var(--nacht)!important}
.st-neu .st-j{color:var(--eis)}
blockquote{margin:48px 0 0;padding:0 0 0 22px;border-left:2px solid var(--eis);font-family:var(--disp);font-size:clamp(18px,2.2vw,26px);line-height:1.4;font-weight:400;max-width:900px}
blockquote cite{display:block;margin-top:12px;font-family:var(--mono);font-style:normal;font-size:12px;color:var(--stahl)}

/* ── Galerie ── */
.galerie{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.g{position:relative;border:0;padding:0;background:#000;cursor:zoom-in;overflow:hidden}
.g img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.g:hover img{transform:scale(1.05)}
.g span{position:absolute;left:6px;bottom:5px;font-size:10px;background:rgba(5,5,8,.8);padding:0 5px;color:var(--eis)}

/* ── Credits / Technik / Referenzen ── */
.credits{display:grid;gap:40px}
.cr-b h3{color:var(--eis);font-size:15px;margin-bottom:14px}
.cr-b dl{margin:0;display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:8px 20px;font-size:13px}
.cr-b dt{color:var(--stahl)}
.cr-b dd{margin:0}
@media(max-width:560px){.cr-b dl{grid-template-columns:1fr}.cr-b dd{margin-bottom:8px}}
.tech p{margin:0 0 14px;font-size:13px;max-width:78ch}
.tech b{display:inline-block;min-width:92px;color:var(--eis);font-weight:400}
.refs{list-style:none;margin:0;padding:0;font-size:13px;display:grid;gap:10px}
.refs li span{color:var(--dim)}

/* ── Filmstreifen ── */
.strip{overflow:hidden;border-top:1px solid var(--linie);background:#000}
.strip-run{display:flex;width:max-content;animation:lauf 140s linear infinite}
.strip-run img{height:90px;width:auto;opacity:.75}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ── Lightbox (unter dem globalen Header) ── */
.lb{position:fixed;inset:0;z-index:2147483000;background:rgba(3,4,8,.96);display:none;align-items:center;justify-content:center;flex-direction:column;padding:calc(var(--mw4-height,70px) + 24px) 60px 70px}
.lb.offen{display:flex}
.lb img{max-width:100%;max-height:calc(100vh - var(--mw4-height,70px) - 120px);object-fit:contain}
.lb button{position:absolute;background:none;border:1px solid var(--linie);color:var(--off);font-size:26px;width:44px;height:44px;cursor:pointer;line-height:1}
.lb button:hover{border-color:var(--eis);color:var(--eis)}
.lb .close{top:calc(var(--mw4-height,70px) + 8px);right:14px}
.lb .prev{left:10px;top:50%}
.lb .next{right:10px;top:50%}
.lb-cap{font-size:12px;color:var(--eis);margin-top:14px}
body.lb-offen{overflow:hidden}
body.lb-offen .mdd-artbtn{display:none!important}

/* ── Einblenden beim Scrollen ── */
.js .rein{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}
.js .satz.rein{transition-delay:calc(var(--i,0)*60ms)}
.js .rein.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.strip-run{animation:none}.js .rein{opacity:1;transform:none}.schlitz-linie{display:none}}