/* FORMAT ET ILLVSTRAT – Anamorphosen der Wunderkammer(21) · Projektseite medienwerkstatt006
   Grundfarben mw006 (Nacht #050508, Kalk #e8e0d4, Space Mono, Unbounded) + Anamorphose-Akzente:
   Punctum (Cyan) · Speculum (Messing) · Vexier (Magenta) · Latenz (Gelb) */
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:local("Space Mono"),url(../fonts/space-mono-latin-400-normal.ttf) format("truetype")}
@font-face{font-family:"Space Mono";font-weight:700;font-display:swap;src:local("Space Mono Bold"),url(../fonts/space-mono-latin-700-normal.ttf) format("truetype")}
@font-face{font-family:"Unbounded";font-weight:200;font-display:swap;src:url(../fonts/unbounded-latin-200-normal.ttf) format("truetype")}
@font-face{font-family:"Unbounded";font-weight:300;font-display:swap;src:url(../fonts/unbounded-latin-300-normal.ttf) format("truetype")}
@font-face{font-family:"Unbounded";font-weight:400;font-display:swap;src:url(../fonts/unbounded-latin-400-normal.ttf) format("truetype")}
@font-face{font-family:"Unbounded";font-weight:700;font-display:swap;src:url(../fonts/unbounded-latin-700-normal.ttf) format("truetype")}
@font-face{font-family:"Unbounded";font-weight:900;font-display:swap;src:url(../fonts/unbounded-latin-900-normal.ttf) format("truetype")}
:root{--bg:#050508;--bg2:#0b0b10;--bg3:#12121a;--fg:#e8e0d4;--fg2:rgba(232,224,212,.68);--fg3:rgba(232,224,212,.38);--linie:rgba(232,224,212,.12);
--cy:#00e5ff;--mg:#ff2d55;--ye:#ffe600;--br:#b4884a;
--mono:"Space Mono",ui-monospace,monospace;--disp:"Unbounded",system-ui,sans-serif;--saeule:62px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.7 var(--mono);overflow-x:hidden}
a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Säule */
.saeule{position:fixed;left:0;top:0;bottom:0;width:var(--saeule);z-index:40;display:flex;flex-direction:column;padding-top:var(--kopf,64px);background:linear-gradient(90deg,rgba(5,5,8,.92),rgba(5,5,8,.6));border-right:1px solid var(--linie)}
.saeule a{flex:1;position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.6);background:var(--c,#222);opacity:.45;transition:opacity .3s,flex .3s}
.saeule a span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#050508;white-space:nowrap}
.saeule a:hover{opacity:.7}.saeule a.an{opacity:1;flex:2.2}
.saeule a i{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;white-space:nowrap;font:400 10px var(--mono);letter-spacing:.12em;color:var(--fg2);background:rgba(5,5,8,.92);padding:4px 8px;border:1px solid var(--linie);opacity:0;pointer-events:none;transition:opacity .2s;font-style:normal}
.saeule a:hover i{opacity:1}
@media (max-width:900px){.saeule{display:none}:root{--saeule:0px}}
.inhalt{margin-left:var(--saeule)}
/* Held */
.held{position:relative;min-height:100vh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.held .bild{position:absolute;inset:0;z-index:-2}
.held .bild img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;position:absolute;inset:0}
.held .bild img.an{opacity:1}
.held::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--bg) 4%,rgba(5,5,8,.5) 52%,rgba(5,5,8,.25)),linear-gradient(90deg,rgba(5,5,8,.78),transparent 70%)}
.held .text{padding:0 5vw 7vh;max-width:1500px}
.kicker{font:700 10px/1.4 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--cy)}
.held h1{font:900 clamp(44px,9vw,148px)/.86 var(--disp);letter-spacing:-.025em;margin:18px 0 10px}
.held h1 .zwei{display:block;font-weight:300;font-size:.34em;letter-spacing:.01em;margin-top:.32em}
/* Anamorphotischer Titel: gestreckt -> lesbar beim Hovern / Scrollen */
.ana{display:inline-block;transform-origin:50% 100%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.held:not(.lesbar) .ana{transform:perspective(600px) rotateX(58deg) scaleY(2.4)}
.held .wer{font:400 clamp(14px,1.6vw,20px)/1.4 var(--disp);margin:0 0 18px}
.held .wer b{color:var(--cy);font-weight:700}
.motto{font:400 clamp(15px,1.5vw,19px)/1.55 var(--mono);color:var(--fg);max-width:780px;border-left:3px solid var(--mg);padding:4px 0 4px 18px;margin:24px 0}
.motto cite{display:block;font-size:11px;color:var(--fg3);font-style:normal;margin-top:6px;letter-spacing:.06em}
.fakten{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:22px;font-size:11px;letter-spacing:.12em;color:var(--fg2);text-transform:uppercase}
.fakten b{color:var(--fg);font-weight:700}
.baender{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:26px;max-width:1100px}
.baender a{text-decoration:none;padding:10px 12px 9px;border-top:5px solid var(--c);background:rgba(5,5,8,.62);backdrop-filter:blur(6px);transition:background .25s}
.baender a:hover{background:rgba(5,5,8,.92)}
.baender b{display:block;font:700 13px/1.2 var(--disp)}.baender small{font-size:10px;color:var(--fg2);letter-spacing:.08em}
@media (max-width:760px){.baender{grid-template-columns:1fr 1fr}}
/* Abschnitte */
section.ab{padding:clamp(70px,10vw,140px) 5vw 40px;border-top:1px solid var(--linie);position:relative}
.ab .kopf{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:end;margin-bottom:34px;max-width:1500px}
.ab .nr{font:900 clamp(54px,8vw,110px)/.8 var(--disp);color:transparent;-webkit-text-stroke:1px var(--c,var(--fg3));grid-row:span 2}
.ab h2{font:900 clamp(28px,4.4vw,64px)/1 var(--disp);margin:0;letter-spacing:-.02em}
.ab .sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--c,var(--cy))}
.breit{max-width:1500px}
.lauf{max-width:860px;font-size:15px;color:var(--fg2)}
.lauf p{margin:0 0 16px}.lauf strong{color:var(--fg)}
.zwei{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
@media (max-width:980px){.zwei{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--fg);border:1px solid rgba(232,224,212,.3);padding:12px 16px;background:transparent;cursor:pointer;transition:all .2s}
.btn:hover{border-color:var(--cy);color:var(--cy)}
.btn.voll{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn.voll:hover{background:var(--cy);border-color:var(--cy);color:var(--bg)}
.knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
/* Blätter */
.blaetter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.blaetter{grid-template-columns:1fr}}
.blatt{background:var(--bg2);border:1px solid var(--linie);border-top:6px solid var(--c);display:flex;flex-direction:column}
.blatt figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#000;position:relative;cursor:zoom-in}
.blatt figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.blatt figure:hover img{transform:scale(1.04)}
.blatt .t{padding:18px 18px 20px}
.blatt h3{font:700 19px/1.2 var(--disp);margin:0 0 4px}.blatt .typ{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.blatt p{color:var(--fg2);font-size:13px;margin:10px 0 0}
.blatt .inv{font-size:11px;color:var(--fg3);margin-top:10px}
/* Filme */
.filme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.filme{grid-template-columns:1fr}}
.film{background:var(--bg2);border:1px solid var(--linie)}
.player{position:relative;aspect-ratio:16/9;background:#000 center/cover;cursor:pointer}
.player .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(to top,rgba(5,5,8,.7),rgba(5,5,8,.15));font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg);text-align:center;padding:12px}
.player .play b{width:62px;height:62px;border:1px solid var(--fg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
.player:hover .play b{border-color:var(--cy);color:var(--cy)}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.film .t{padding:16px 18px 18px}.film h3{font:700 17px/1.2 var(--disp);margin:0 0 6px}.film ul{list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--fg2)}
.film li b{color:var(--fg)}
/* Kapitelband */
.kapitel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:22px}
@media (max-width:900px){.kapitel{grid-template-columns:repeat(3,1fr)}}
.kapitel figure{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden}
.kapitel img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.kapitel figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(to top,rgba(5,5,8,.9),transparent)}
/* 3D-Viewer */
.viewer{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--linie)}
.viewer canvas{width:100%!important;height:100%!important;display:block}
.viewer .start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#000 center/cover;cursor:pointer}
.viewer .start span{background:rgba(5,5,8,.75);padding:12px 18px;border:1px solid var(--fg);font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.puncta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.puncta button{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);background:var(--bg2);border:1px solid var(--linie);border-top:3px solid var(--c,var(--cy));padding:10px 12px;cursor:pointer}
.puncta button:hover,.puncta button.an{background:var(--bg3);color:var(--cy)}
.vstat{font-size:11px;color:var(--fg3);margin-top:8px;min-height:1.5em}
/* Labor */
.labor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.labor{grid-template-columns:1fr}}
.lab{background:var(--bg2);border:1px solid var(--linie);border-top:6px solid var(--c);padding:18px}
.lab h3{font:700 18px/1.2 var(--disp);margin:0 0 4px}.lab .typ{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.lab p{color:var(--fg2);font-size:12.5px;margin:8px 0 12px}
.lab input[type=range]{width:100%;accent-color:var(--c)}
.lab .ausgabe{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);display:flex;justify-content:space-between;margin-top:6px}
.lab .ausgabe b{color:var(--c)}
.buehne{position:relative;height:380px;background:#000;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.kipp{transform-origin:50% 100%;perspective:300px;perspective-origin:50% 100%;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px}
.weigelplatte{width:250px;height:1757px;flex:none;background:url(../img/weigel.jpg) center/100% 100%;transform-origin:50% 100%;box-shadow:0 0 0 1px rgba(232,224,212,.2)}
.lab canvas.ring{width:100%;height:auto;aspect-ratio:1;display:block;background:#000}
.vexbuehne{height:380px;background:#000;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.vexbuehne img{width:120%;max-width:none;transition:transform .08s linear;cursor:grab}
.chromabuehne{height:380px;background:#000;position:relative;overflow:hidden;cursor:crosshair}
.chromabuehne img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;mix-blend-mode:screen;will-change:transform}
.ziel{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border:1px solid var(--fg);border-radius:50%;pointer-events:none}
.treffer{position:absolute;right:12px;top:10px;font:700 10px var(--mono);letter-spacing:.2em;color:var(--c);text-transform:uppercase;opacity:0;transition:opacity .4s}
.treffer.an{opacity:1}
/* Spiel */
.spiel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:980px){.spiel{grid-template-columns:1fr}}
.spielbild{aspect-ratio:16/9;background:#000 center/cover;border:1px solid var(--linie);display:flex;align-items:flex-end;padding:16px}
.engines{width:100%;border-collapse:collapse;font-size:12px;margin-top:14px}
.engines th,.engines td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
.engines th{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
.engines tr.wahl td{color:var(--fg)}.engines tr.wahl td:first-child{color:var(--cy)}
.engines td{color:var(--fg2)}
/* Glossar & Quellen */
.glossar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){.glossar{grid-template-columns:1fr}}
.glossar dt{font:700 14px var(--disp);margin-bottom:4px;color:var(--fg)}.glossar dd{margin:0;color:var(--fg2);font-size:12.5px}
.glossar div{border-left:2px solid var(--c,var(--ye));padding:4px 0 4px 14px}
.quellen{columns:2;column-gap:40px;font-size:12.5px;color:var(--fg2)}
@media (max-width:900px){.quellen{columns:1}}
.quellen h4{font:700 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cy);margin:0 0 8px;break-after:avoid}
.quellen ul{margin:0 0 22px;padding-left:16px}.quellen li{margin-bottom:5px;break-inside:avoid}
.ki{border:1px solid var(--linie);padding:16px 18px;margin-top:20px;font-size:12px;color:var(--fg2);max-width:1000px}
.ki b{color:var(--fg)}
.fuss{padding:50px 5vw;border-top:1px solid var(--linie);font-size:11px;color:var(--fg3);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between}
/* Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(5,5,8,.96);display:none;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
.lb.an{display:flex}.lb img{max-height:92vh;max-width:92vw;object-fit:contain}
.lb p{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;color:var(--fg2);letter-spacing:.1em}
.sprache{position:fixed;right:16px;top:14px;z-index:45;font:700 10px var(--mono);letter-spacing:.2em;border:1px solid var(--linie);padding:8px 10px;background:rgba(5,5,8,.7);text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}