/* GEHÄUSE · Körper als Toolbox · Körper als Architektur — PATHFINDER ⇄ THE BODYBOX · Fassung D 2026 — Projektseiten · medienwerkstatt006
   Gestaltungsprinzip: BLAUPAUSE. Die Seite ist ein Bauplan: Preußischblau, Linienweiß, ein Signal (Mennige, die Farbe der
   Grundierung auf Stahl und der Baustelle). Jeder Abschnitt ist ein Blatt mit Achsraster, jede Kennung eine Positionsnummer,
   der Fortschritt im Kopf ist eine Maßkette über die Länge des Containers (0 – 7 200 mm).
   Schrift: Archivo (Grotesk, Black für Titel) · Archivo Narrow · Space Mono (alle OFL). */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url("../fonts/archivo-narrow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url("../fonts/archivo-narrow-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{--papier:#0a1f33;--papier2:rgba(127,163,184,.28);--weiss:#10304a;--tinte:#d8e8ef;--tinte2:#b9cfdb;--graphit:#7fa3b8;--blau:#ff5a1f;--nacht:#05101c;
  --serif:"Archivo",Arial,sans-serif;--sans:"Archivo",Arial,sans-serif;--narrow:"Archivo Narrow","Arial Narrow",Arial,sans-serif;--mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;--max:1320px;
  --raster:linear-gradient(rgba(127,163,184,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(127,163,184,.10) 1px,transparent 1px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier) var(--raster);background-size:40px 40px;color:var(--tinte);font:300 17px/1.6 var(--sans);overflow-x:hidden}
main{position:relative;z-index:1}
a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--blau)}
a:hover{color:var(--blau)}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
::selection{background:var(--blau);color:var(--papier)}
.b{color:var(--blau)}
.note{font:12px/1.55 var(--mono);color:var(--graphit)}

/* ── Kopf: Fortschritt als Naht ─────────────────────────────────── */
.nh-hud{position:sticky;top:var(--mw4-height,70px);z-index:20;background:rgba(10,31,51,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--tinte);font:400 12px var(--mono);letter-spacing:.05em}
.nh-hud .wrap{display:flex;gap:20px;align-items:center;min-height:48px}
.nh-hud nav{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex:1}
.nh-hud nav::-webkit-scrollbar{display:none}
.nh-hud nav a{border:0;color:var(--graphit);text-transform:uppercase}
.nh-hud nav a:hover,.nh-hud nav a.on{color:var(--tinte)}
.nh-hud nav a.on::before{content:"";display:inline-block;width:7px;height:7px;background:var(--blau);margin-right:7px;vertical-align:1px}
.nh-hud nav a.back{color:var(--blau)}
.nh-hud .pct{white-space:nowrap;color:var(--graphit);font-variant-numeric:tabular-nums}
.nh-hud .pct::before{content:"⟷ ";color:var(--blau);font-weight:700}
.nh-hud .naht{position:absolute;left:0;right:0;bottom:-6px;height:11px;pointer-events:none;overflow:hidden}
.nh-hud .naht i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(var(--blau),var(--blau)) 0 5px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--blau) 0 1px,transparent 1px 72px)}

/* ── Unterseiten-Leiste ─────────────────────────────────────────── */
.nh-sub{border-bottom:1px solid var(--papier2);background:var(--weiss);font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.nh-sub .wrap{display:flex;gap:4px 18px;align-items:center;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.nh-sub .k{color:var(--blau)}
.nh-sub a{border:0;color:var(--tinte2);padding:3px 0}
.nh-sub a[aria-current]{color:var(--tinte);box-shadow:inset 0 -2px var(--blau)}
.nh-sub a.a{color:var(--graphit);font-weight:400}
.nh-sub a.lang{margin-left:auto;border:1px solid var(--tinte);padding:3px 8px}

/* ── Hero ───────────────────────────────────────────────────────── */
.nh-hero{padding:46px 0 40px;position:relative}
.nh-hero .kicker{font:600 12px var(--mono);letter-spacing:.16em;color:var(--blau);margin:0}
.nh-hero h1{font:900 clamp(70px,12vw,200px)/.86 var(--serif);margin:26px 0 6px;letter-spacing:.005em;position:relative;display:inline-block;text-transform:uppercase}
.nh-hero h1 span{color:transparent;-webkit-text-stroke:2px var(--tinte)}
.nh-hero h1::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:14px;border:1px solid var(--blau);border-top:0;border-bottom:0;background:linear-gradient(var(--blau),var(--blau)) 0 7px/100% 1px no-repeat}
.nh-hero .sub{font:600 15px var(--mono);letter-spacing:.12em;margin:8px 0 0}
.nh-hero .sub2{font:300 clamp(24px,3vw,36px)/1.15 var(--sans);margin:14px 0 0;color:var(--tinte2)}
.nh-hero .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;margin-top:34px;align-items:start}
.lead{font:300 22px/1.45 var(--sans);margin:0 0 14px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--tinte);margin-top:22px}
.facts span{font:11px var(--mono);color:var(--graphit);letter-spacing:.06em;padding:8px 8px 10px 0;border-bottom:1px solid var(--papier2);text-transform:uppercase}
.facts b{display:block;font:800 28px/1.05 var(--sans);color:var(--tinte);letter-spacing:0;text-transform:none}

/* ── Naht-Instrument ───────────────────────────────────────────── */
.ni{background:var(--weiss);border:1px solid var(--tinte);padding:12px;position:relative}
.ni canvas{width:100%;height:auto;display:block;cursor:ns-resize;touch-action:none;background:var(--papier)}
.ni .read{display:flex;justify-content:space-between;gap:10px;font:11px var(--mono);color:var(--graphit);margin:8px 0 6px;flex-wrap:wrap}
.ni .read b{color:var(--blau);font-weight:600}
.btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.btns .sp{flex:1}
.btn{display:inline-block;font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;background:transparent;color:var(--tinte);border:1px solid var(--tinte);padding:7px 11px;cursor:pointer;border-radius:0;line-height:1.2}
.btn:hover{background:var(--weiss);color:var(--blau);border-color:var(--blau)}
.btn.on,.btn.cta{background:var(--blau);border-color:var(--blau);color:var(--papier)}
.btn.cta:hover,.btn.on:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}

/* ── Abschnitte = Archivfächer ──────────────────────────────────── */
.nh-sec{padding:64px 0 54px;position:relative;opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
.nh-sec.in{opacity:1;transform:none}
.nh-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:13px;
  background:linear-gradient(var(--tinte),var(--tinte)) 0 6px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--tinte) 0 1px,transparent 1px 120px)}
.sign{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;margin-bottom:28px}
.sign .no{font:700 13px var(--mono);color:var(--blau);border:1px solid var(--blau);padding:4px 8px;letter-spacing:.06em;border-radius:50% / 50%;min-width:64px;text-align:center}
.sign h2{font:900 clamp(38px,5vw,72px)/.95 var(--sans);margin:0;text-transform:uppercase;letter-spacing:.01em}
.sign .tc{font:12px var(--mono);color:var(--graphit);letter-spacing:.08em;text-align:right}
.cols{columns:2 380px;column-gap:44px}
.cols p{margin:0 0 16px;break-inside:avoid}
.cols b{font-weight:800}
.quote{font:300 clamp(26px,3.2vw,42px)/1.2 var(--sans);border-left:3px solid var(--blau);padding:4px 0 4px 26px;margin:34px 0 0;max-width:1050px}
.quote small{display:block;font:600 11px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--graphit);margin-top:12px}

/* AV */
.av{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.av figure{margin:0}
figcaption{font:11.5px/1.5 var(--mono);color:var(--graphit);margin-top:8px}
.yt{position:relative;aspect-ratio:16/9;background:var(--nacht) center/cover no-repeat;cursor:pointer;border:1px solid var(--tinte)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .play{position:absolute;left:0;bottom:0;background:var(--papier);padding:10px 14px;font:11px var(--mono);color:var(--graphit);border-top:1px solid var(--tinte);border-right:1px solid var(--tinte)}
.yt .play b{display:block;font:800 22px/1.1 var(--sans);color:var(--tinte)}
.yt:hover .play b,.yt:focus .play b{color:var(--blau)}
.yt.pending{cursor:default}.yt.pending .play b::first-letter{color:var(--graphit)}
.consent{font:11px/1.5 var(--mono);color:var(--graphit);margin:16px 0 0;max-width:900px}

/* Übersetzungstabelle */
.trans{width:100%;border-collapse:collapse;margin-bottom:30px;font-size:16px}
.trans th{font:600 11px var(--mono);letter-spacing:.1em;color:var(--blau);text-align:left;padding:8px 10px 8px 0;border-bottom:2px solid var(--tinte)}
.trans td{padding:10px 12px 10px 0;border-bottom:1px solid var(--papier2);vertical-align:top}
.trans td:first-child{font:800 22px/1 var(--sans);white-space:nowrap;text-transform:uppercase}
.trans td.arr{color:var(--blau);font:600 16px var(--mono)}

/* Kapitel */
.nh-chaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px 20px}
.nh-chap{display:block;border:0;color:var(--tinte)}
.nh-chap .st{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--tinte);background:var(--nacht);position:relative}
.nh-chap .st img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nh-chap:hover .st img{transform:scale(1.04)}
.nh-chap .st::after{content:"";position:absolute;inset:8px;border:1px solid var(--blau);opacity:0;transition:opacity .3s}
.nh-chap:hover .st::after{opacity:1}
.nh-chap h3{font:800 24px/1.1 var(--sans);margin:12px 0 2px;text-transform:uppercase}
.nh-chap h3 i{font:600 12px var(--mono);font-style:normal;color:var(--blau);margin-right:10px;vertical-align:5px}
.nh-chap .t{font:11px var(--mono);color:var(--graphit);letter-spacing:.06em}
.nh-chap p{margin:6px 0 0;font-size:15.5px;line-height:1.5}
.nh-chap:hover h3{color:var(--blau)}

/* Zwickel-Rechner */
.zw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:start}
.zw canvas{width:100%;height:auto;border:1px solid var(--tinte);background:var(--papier);display:block}
.zw input[type=range]{width:100%;accent-color:var(--blau)}
.zw dl{display:grid;grid-template-columns:1fr auto;margin:14px 0;border-top:1px solid var(--tinte)}
.zw dt{font:11px var(--mono);color:var(--graphit);padding:8px 0;border-bottom:1px solid var(--papier2);letter-spacing:.06em}
.zw dd{margin:0;padding:4px 0;border-bottom:1px solid var(--papier2);font:800 26px/1.1 var(--sans);text-align:right}
.zw dd.ok{color:var(--blau)}

/* Archiv-Fenster */
.af-bar{display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--tinte);padding-bottom:4px}
.af-bar label{font:600 12px var(--mono);letter-spacing:.14em;color:var(--blau)}
.af-bar input{flex:1;min-width:0;font:300 30px var(--sans);border:0;background:transparent;color:var(--tinte);padding:4px 0;border-radius:0}
.af-bar input:focus{outline:none}
.af-bar #af-n{font:600 13px var(--mono);color:var(--blau);white-space:nowrap}
.af-chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px}
.af-chips button{font:12px var(--mono);background:transparent;border:1px solid var(--tinte);padding:3px 8px;cursor:pointer;color:var(--tinte)}
.af-chips button:hover{background:var(--blau);border-color:var(--blau);color:var(--papier)}
#af-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;min-height:120px}
#af-grid a{aspect-ratio:3/2;background:var(--papier2) center/cover no-repeat;border:1px solid var(--papier2);position:relative}
#af-grid a:hover{border-color:var(--blau)}
#af-grid a b{position:absolute;left:0;bottom:0;background:var(--papier);font:600 10px var(--mono);color:var(--blau);padding:2px 5px}

/* Paare / Zwilling */
.pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pairs a{border:0}
.pairs img{border:1px solid var(--tinte);aspect-ratio:16/9;object-fit:cover;width:100%}
.pairs span{display:block;font:11px var(--mono);color:var(--graphit);margin-top:6px}

/* Zyklus */
.zyk{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border-top:3px solid var(--tinte);position:relative}
.zyk a{border:0;padding:20px 12px 14px 0;position:relative;color:var(--tinte)}
.zyk a::before{content:"";position:absolute;left:0;top:-9px;width:12px;height:12px;background:var(--papier);border:3px solid var(--tinte)}
.zyk a.cur::before{background:var(--blau);border-color:var(--blau)}
.zyk b{display:block;font:600 12px var(--mono);color:var(--blau)}
.zyk span{display:block;font:800 15px/1.15 var(--sans);margin:4px 0;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto;padding-right:6px}
.zyk em{display:block;font:11px/1.4 var(--mono);font-style:normal;color:var(--graphit)}
.zyk a:hover span{color:var(--blau)}

/* Kacheln */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.tile{display:block;border:1px solid var(--tinte);background:var(--weiss);color:var(--tinte)}
.tile .im{aspect-ratio:16/9;overflow:hidden;background:var(--nacht);border-bottom:1px solid var(--tinte)}
.tile .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover .im img{transform:scale(1.04)}
.tile b{display:block;font:800 22px/1.1 var(--sans);padding:12px 14px 2px}
.tile span{display:block;font:12px/1.5 var(--mono);color:var(--graphit);padding:0 14px 14px}
.tile:hover b{color:var(--blau)}
.tile.ab{background:var(--papier) var(--raster);background-size:24px 24px}
.tile.ab b::before{content:"↩ ";color:var(--graphit)}

/* Referenzen, Verfahren */
.ref{list-style:none;padding:0;margin:0;columns:2 420px;column-gap:44px}
.ref li{break-inside:avoid;padding:10px 0;border-top:1px solid var(--papier2);font-weight:600}
.ref small{display:block;font:12px/1.5 var(--mono);color:var(--graphit);font-weight:400;margin-top:2px}
.kv{display:grid;grid-template-columns:minmax(150px,220px) 1fr;margin:0;border-top:1px solid var(--tinte)}
.kv dt{font:600 12px var(--mono);color:var(--blau);padding:12px 0;border-bottom:1px solid var(--papier2);letter-spacing:.04em;overflow-wrap:anywhere}
.kv dd{margin:0;padding:10px 0 10px 16px;border-bottom:1px solid var(--papier2)}
.gamebox{position:relative;aspect-ratio:16/9;border:1px solid var(--tinte);background:var(--nacht);min-height:520px}
.gamebox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wx-wrap{border-top:1px solid var(--tinte)}

.endnote{text-align:center;padding:70px 24px 80px;font:11px var(--mono);letter-spacing:.14em;color:var(--graphit);text-transform:uppercase;position:relative}
.endnote::before{content:"";display:block;width:70px;height:70px;margin:0 auto 26px;border:2px solid var(--blau);background:linear-gradient(45deg,transparent 49%,var(--blau) 49% 51%,transparent 51%)}
.endnote .mbig{font:900 clamp(28px,3.6vw,50px)/1.1 var(--sans);text-transform:uppercase;text-transform:none;letter-spacing:0;color:var(--tinte);max-width:1000px;margin:0 auto 18px}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,31,51,.97);display:none;align-items:center;justify-content:center;padding:50px 64px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:calc(100vh - 130px);border:1px solid var(--tinte)}
.lb button{position:absolute;background:var(--papier);border:1px solid var(--tinte);width:46px;height:46px;font:22px var(--mono);cursor:pointer;color:var(--tinte)}
.lb button:hover{background:var(--blau);color:var(--papier);border-color:var(--blau)}
.lb .close{top:16px;right:16px}.lb .prev{left:10px;top:50%}.lb .next{right:10px;top:50%}
.lb-cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:11.5px var(--mono);color:var(--graphit);margin:0}

@media (max-width:960px){
  .nh-hero .grid,.zw{grid-template-columns:1fr}
  .av,.pairs{grid-template-columns:1fr}
  .zyk{grid-template-columns:repeat(2,1fr);row-gap:10px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .sign{grid-template-columns:auto 1fr}.sign .tc{grid-column:1/-1;text-align:left}
  .kv{grid-template-columns:1fr}.kv dd{padding-left:0}
  .nh-hud .pct{display:none}
}
@media (prefers-reduced-motion:reduce){.nh-sec{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ── Blaupause: Ergänzungen Fassung D ───────────────────────────── */
.nh-sec .wrap{position:relative}
.nh-sec .wrap::after{content:attr(data-blatt);position:absolute;right:24px;top:-50px;font:700 11px var(--mono);color:var(--graphit);letter-spacing:.12em}
.schrift{display:grid;grid-template-columns:2fr 1fr 1fr;border:1px solid var(--tinte);margin-top:26px;font:11px var(--mono);color:var(--graphit)}
.schrift span{padding:8px 10px;border-right:1px solid var(--papier2);text-transform:uppercase;letter-spacing:.06em}.schrift span:last-child{border-right:0}
.schrift b{display:block;color:var(--tinte);font:700 14px var(--mono);margin-top:3px;text-transform:none;letter-spacing:0}
.ms{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:start}
.ms canvas,.zp canvas{width:100%;height:auto;border:1px solid var(--tinte);background:var(--papier);display:block}
.ms select,.ms input[type=number]{font:14px var(--mono);background:var(--papier);color:var(--tinte);border:1px solid var(--tinte);padding:6px 8px;width:100%;border-radius:0}
.ms input[type=range],.zp input[type=range]{width:100%;accent-color:var(--blau)}
.ms label{display:block;font:11px var(--mono);color:var(--graphit);letter-spacing:.08em;margin:12px 0 4px}
.ms dl{display:grid;grid-template-columns:1fr auto;margin:14px 0;border-top:1px solid var(--tinte)}
.ms dt{font:11px var(--mono);color:var(--graphit);padding:8px 0;border-bottom:1px solid var(--papier2);letter-spacing:.06em}
.ms dd{margin:0;padding:4px 0;border-bottom:1px solid var(--papier2);font:800 24px/1.1 var(--sans);text-align:right}.ms dd.ok{color:var(--blau)}
.zp .read{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--graphit);margin-top:8px}.zp .read b{color:var(--blau)}
.stack{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:14px}
.stack a{border:1px solid var(--papier2);aspect-ratio:4/3;background:var(--nacht) center/cover no-repeat;position:relative}
.stack a b{position:absolute;left:0;top:0;font:700 10px var(--mono);background:var(--papier);color:var(--blau);padding:2px 4px}
@media (max-width:960px){.ms{grid-template-columns:1fr}.stack{grid-template-columns:repeat(4,1fr)}.schrift{grid-template-columns:1fr}}
/* Site-CI setzt den Body hell – das Blatt bleibt blau */
html body{background-color:var(--papier)!important;background-image:var(--raster)!important;background-size:40px 40px!important;color:var(--tinte)}