/* KERNZEIT 2026 · Bohrung Laa 1 — RELIQUIE WEIN4 Neufassung II · medienwerkstatt006 */
@font-face{font-family:'Archivo KZ';src:url(../fonts/archivo-vf.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Plex KZ';src:url(../fonts/plexmono-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Plex KZ';src:url(../fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex KZ';src:url(../fonts/plexmono-600.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--spuel:#0e0f10;--schlamm:#1c1d1e;--kiste:#2a2c2e;--papier:#edebe5;--kreide:#f6f4ee;--orange:#ff5a1f;--signal:#ffb000;
 --kap:#d9b36a;--eva:#e9c9cf;--mai:#c8584a;--gru:#b99556;--can:#5c6f7a;--laa:#7a8a93;--ern:#e7e0cc;
 --a:'Archivo KZ','Archivo','Arial Black',system-ui,sans-serif;--m:'Plex KZ','IBM Plex Mono',ui-monospace,monospace;--log:76px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.kz{margin:0;background:var(--spuel);color:var(--papier);font:400 15px/1.6 var(--m);-webkit-font-smoothing:antialiased}
.kz a{color:var(--signal)}
.kz ::selection{background:var(--orange);color:#000}
.kz img{max-width:100%;display:block}
/* ---------------- Bohrlog (fest, links) */
.bohrlog{position:fixed;left:0;top:0;bottom:0;width:var(--log);z-index:40;background:#0b0c0d;border-right:1px solid #26282a;display:flex;flex-direction:column;padding:64px 10px 14px}
.bohrlog a{flex:1;display:block;position:relative;margin:2px 0;border-radius:2px;opacity:.38;transition:opacity .25s;text-decoration:none;background-color:var(--c);background-blend-mode:multiply}
.bohrlog a.an,.bohrlog a:hover{opacity:1}
.bohrlog a span{position:absolute;left:4px;bottom:3px;font:600 10px var(--m);color:#0e0f10;letter-spacing:.06em;mix-blend-mode:normal;background:rgba(246,244,238,.85);padding:0 3px;border-radius:2px}
.bohrlog .cursor{position:absolute;left:0;width:calc(var(--log) + 120px);height:3px;background:var(--orange);top:64px;pointer-events:none;box-shadow:0 0 12px rgba(255,90,31,.6);transition:top .08s linear}
.bohrlog .cursor i{position:absolute;left:calc(var(--log) + 4px);top:-9px;font:600 11px var(--m);color:var(--orange);white-space:nowrap;font-style:normal;background:rgba(14,15,16,.85);padding:1px 6px}
.lith-kap{background-image:repeating-linear-gradient(0deg,transparent 0 10px,rgba(0,0,0,.35) 10px 11px),repeating-linear-gradient(90deg,transparent 0 20px,rgba(0,0,0,.35) 20px 21px)}
.lith-eva{background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.35) 0 1.5px,transparent 2px);background-size:9px 9px}
.lith-mai{background-image:radial-gradient(circle,transparent 0 3px,rgba(0,0,0,.35) 3px 4px,transparent 4.5px),repeating-linear-gradient(0deg,transparent 0 11px,rgba(0,0,0,.3) 11px 12px);background-size:14px 12px,auto}
.lith-gru{background-image:radial-gradient(circle,rgba(0,0,0,.45) 0 1px,transparent 1.5px);background-size:6px 7px}
.lith-can{background-image:repeating-linear-gradient(35deg,transparent 0 6px,rgba(0,0,0,.3) 6px 7px),repeating-linear-gradient(-35deg,transparent 0 9px,rgba(255,255,255,.18) 9px 10px)}
.lith-laa{background-image:repeating-linear-gradient(0deg,transparent 0 6px,rgba(0,0,0,.35) 6px 7px);background-size:100% 7px}
.lith-ern{background-image:repeating-linear-gradient(0deg,transparent 0 12px,rgba(0,0,0,.28) 12px 13px),repeating-linear-gradient(90deg,transparent 0 26px,rgba(0,0,0,.28) 26px 27px)}
/* ---------------- Kopfzeile Teufe/Alter */
.teufe{position:fixed;right:18px;top:62px;z-index:41;text-align:right;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.teufe b{display:block;font:800 clamp(22px,3.2vw,46px)/1 var(--a);font-stretch:118%;color:#fff;letter-spacing:.01em}
.teufe small{display:block;font:600 12px var(--m);letter-spacing:.24em;color:#fff;opacity:.75;margin-top:4px}
.teufe em{display:block;font:700 clamp(16px,1.8vw,26px) var(--a);font-stretch:112%;color:var(--orange);font-style:normal;margin-top:6px}
main.kzm{margin-left:var(--log)}
.zur-reliquie{position:fixed;left:calc(var(--log) + 16px);top:64px;z-index:41;font:600 12px var(--m);letter-spacing:.14em;background:rgba(14,15,16,.78);padding:6px 10px;border:1px solid #333;color:var(--papier);text-decoration:none}
.zur-reliquie:hover{border-color:var(--orange);color:var(--orange)}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
section.kern{position:relative;padding:clamp(70px,10vw,140px) 0;border-top:1px solid #222}
/* ---------------- Hero */
.kz-hero{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#0a0b0c;cursor:crosshair}
.kz-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.kz-hero .titel{position:absolute;left:clamp(16px,5vw,80px);right:clamp(16px,5vw,80px);bottom:12vh;pointer-events:none}
.kz-hero h1{margin:0;font:900 clamp(56px,13vw,220px)/.86 var(--a);font-stretch:125%;letter-spacing:-.01em;color:var(--kreide);text-shadow:0 6px 40px rgba(0,0,0,.45)}
.kz-hero .u{font:600 clamp(13px,1.4vw,19px) var(--m);letter-spacing:.32em;color:var(--orange);margin-top:18px;text-transform:uppercase}
.kz-hero .m{font:400 clamp(12px,1.05vw,15px) var(--m);color:#d9d6cf;margin-top:10px;max-width:980px}
.kz-hero .hinweis{position:absolute;right:18px;bottom:16px;font:600 11px var(--m);letter-spacing:.18em;color:#bbb;background:rgba(0,0,0,.45);padding:5px 9px}
.kz-hero .knoepfe{position:absolute;left:clamp(16px,5vw,80px);top:120px;display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto}
.btn,.kz button.btn{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--kreide);background:rgba(14,15,16,.72);border:1px solid #4a4c4f;padding:10px 14px;text-decoration:none;cursor:pointer}
.btn:hover,.btn.an{border-color:var(--orange);color:#fff;background:var(--orange)}
.btn.or{background:var(--orange);border-color:var(--orange);color:#0e0f10}
/* ---------------- Typo */
.kopf{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,40px);align-items:end;margin-bottom:34px}
.kopf .nr{font:900 clamp(60px,10vw,150px)/.8 var(--a);font-stretch:125%;color:var(--c,var(--orange));-webkit-text-stroke:0}
.kopf h2{margin:0;font:850 clamp(30px,4.6vw,72px)/.95 var(--a);font-stretch:118%;color:var(--kreide)}
.kopf .sub{font:600 12px var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin-top:12px}
.daten{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 12px var(--m);letter-spacing:.12em;color:#cfcac0;margin:-14px 0 28px;text-transform:uppercase}
.daten b{color:var(--orange);font-weight:600}
.vers{font:800 clamp(24px,3.4vw,52px)/1.08 var(--a);font-stretch:112%;color:var(--kreide);margin:0 0 10px;max-width:1100px}
.vers + cite{display:block;font:400 13px var(--m);color:var(--signal);font-style:normal;margin-bottom:34px}
.text{max-width:860px;color:#d7d3cb}
.text p{margin:0 0 14px}
.zwei{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
@media (max-width:900px){.zwei{grid-template-columns:1fr}}
/* ---------------- Player */
.player{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;border:1px solid #2c2e30}
.player .gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:linear-gradient(180deg,rgba(14,15,16,.15),rgba(14,15,16,.82));padding:20px}
.player .gate b{font:850 clamp(22px,3vw,44px) var(--a);font-stretch:118%;color:#fff}
.player .gate small{max-width:620px;font:400 13px var(--m);color:#ddd}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kapitel{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.kapitel li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 12px;background:#141517;border-left:4px solid var(--c,#555);cursor:pointer}
.kapitel li:hover{background:#1d1f22}
.kapitel .z{font:600 12px var(--m);color:var(--orange);grid-row:span 2}
.kapitel .t{font:700 14px var(--a);font-stretch:110%;color:#fff}
.kapitel .s{font:400 11px var(--m);color:#aaa}
.av-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.av-meta span{font:600 11px var(--m);letter-spacing:.14em;padding:5px 9px;background:#17181a;color:#cfcac0}
/* ---------------- Labor */
.labor{background:#0b0c0d;border:1px solid #2a2c2e;padding:12px}
.labor canvas{width:100%;height:auto;display:block;background:#000;touch-action:none}
.labor .leiste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.labor .leiste label{font:600 11px var(--m);letter-spacing:.12em;color:#bbb;display:flex;align-items:center;gap:8px}
.labor .leiste input[type=range]{accent-color:var(--orange);width:160px}
.labor .anz{margin-left:auto;font:600 12px var(--m);color:var(--orange)}
.labor .titel{font:600 11px var(--m);letter-spacing:.2em;color:var(--signal);margin-bottom:8px;text-transform:uppercase}
/* ---------------- Strip / Archiv */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:22px}
.strip a,.archiv a{display:block;position:relative;overflow:hidden;background:#111;aspect-ratio:1}
.strip img,.archiv img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s;filter:saturate(.85)}
.strip a:hover img,.archiv a:hover img{transform:scale(1.06);filter:none}
.archiv{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px}
.archiv a span{position:absolute;left:0;right:0;bottom:0;font:400 10px var(--m);background:rgba(14,15,16,.78);padding:3px 5px;color:#ddd;opacity:0;transition:opacity .3s}
.archiv a:hover span{opacity:1}
.filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
/* ---------------- Diskordanz */
.diskordanz{background:#000;text-align:center;padding:clamp(90px,14vw,200px) 16px;border-top:3px solid var(--orange);border-bottom:3px solid var(--orange);position:relative;overflow:hidden}
.diskordanz h2{margin:0;font:900 clamp(44px,10vw,170px)/.9 var(--a);font-stretch:125%;color:var(--kreide)}
.diskordanz .zahl{font:800 clamp(28px,6vw,96px) var(--a);font-stretch:118%;color:var(--orange);margin:14px 0}
.diskordanz p{font:400 14px var(--m);color:#bbb;max-width:720px;margin:0 auto}
.diskordanz canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
/* ---------------- Kernkiste */
.kiste{display:grid;gap:10px}
.kiste .reihe{display:grid;grid-template-columns:140px 1fr 120px;gap:12px;align-items:center}
.kiste .reihe .l{font:700 13px var(--a);font-stretch:112%;color:#fff}
.kiste .reihe .r{font:600 11px var(--m);color:var(--orange);text-align:right}
.kiste .kern{height:74px;border-radius:37px;background:#222 center/cover;box-shadow:inset 0 14px 18px rgba(255,255,255,.18),inset 0 -18px 22px rgba(0,0,0,.55);position:relative;overflow:hidden;cursor:pointer}
.kiste .kern::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 16%,rgba(0,0,0,.6) 16% 16.4%)}
@media (max-width:700px){.kiste .reihe{grid-template-columns:1fr}.kiste .reihe .r{text-align:left}}
/* ---------------- Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.karte{display:block;background:#141517;border:1px solid #2a2c2e;text-decoration:none;color:var(--papier);overflow:hidden}
.karte img{aspect-ratio:16/9;object-fit:cover;width:100%}
.karte div{padding:14px}
.karte b{display:block;font:800 22px var(--a);font-stretch:116%;color:#fff}
.karte small{font:400 12px var(--m);color:#bbb}
.karte:hover{border-color:var(--orange)}
.quellen{columns:2 360px;column-gap:40px;font:400 13px var(--m);color:#cfcac0}
.quellen li{break-inside:avoid;margin-bottom:8px}
.quellen b{color:#fff;font-weight:600}
/* ---------------- Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(5,5,6,.95);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lb.auf{display:flex}
.lb img{max-width:94vw;max-height:84vh;object-fit:contain}
.lb p{font:400 13px var(--m);color:#ddd;margin:10px 0 0}
.lb button{position:absolute;background:none;border:0;color:#fff;font:300 46px var(--a);cursor:pointer;padding:10px 18px}
.lb .zu{top:10px;right:14px}.lb .zur{left:8px;top:50%}.lb .vor{right:8px;top:50%}
.laufband{overflow:hidden;white-space:nowrap;background:var(--orange);color:#0e0f10;font:700 13px var(--m);letter-spacing:.14em;padding:9px 0}
.laufband span{display:inline-block;animation:lauf 80s linear infinite}
@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.laufband span{animation:none}html{scroll-behavior:auto}}
@media (max-width:700px){:root{--log:34px}.bohrlog{padding:56px 4px 8px}.bohrlog a span{display:none}.bohrlog .cursor i{display:none}.teufe{top:56px}.zur-reliquie{top:auto;bottom:10px}}