/* =========================================================================
   John Tonic — Demo-Auftritt.  Grammatik: Werkverzeichnis (Gallery/Catalog).
   Motiv: das Linienraster. Rollen: Jalousie (Hero) → Zielgitter (Tafeln) →
   Maßlinien (Tafel 19) → Maskenkante (Zitat) → Tabelle (Register) → zerfallend.
   Grundsystem achromatisch; die einzige Buntfarbe (--werk) kommt aus dem
   gerade gezeigten Werk (werke.json → farben[0]), nie erfunden.
   ========================================================================= */

/* ---------- Schriften: self-hosted (DSGVO), kein Google-CDN ---------- */
@font-face{font-family:'Boska';src:url('fonts/boska-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Boska';src:url('fonts/boska-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Boska';src:url('fonts/boska-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Tabular';src:url('fonts/tabular-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tabular';src:url('fonts/tabular-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --tief:#08090b;      --tief:oklch(0.112 0.004 266);   /* Grundfläche */
  --tief-2:#101216;    --tief-2:oklch(0.168 0.006 266); /* abgesetzte Fläche */
  --tief-3:#171a1f;    --tief-3:oklch(0.212 0.006 266); /* Karten */
  --kreide:#eceef1;    --kreide:oklch(0.944 0.004 266); /* Haupttext  17.1:1 */
  --kalk:#a7acb4;      --kalk:oklch(0.738 0.009 266);   /* Sekundärtext 8.9:1 */
  --grau:#8b9099;      --grau:oklch(0.652 0.011 266);   /* 6.2:1 auf tief, 5.4:1 auf tief-3 */
  --linie:#23262c;     --linie:oklch(0.252 0.007 266);  /* Gitterlinien */
  --linie-2:#363a42;   --linie-2:oklch(0.336 0.009 266);
  --linie-ui:#5c616a;  --linie-ui:oklch(0.480 0.011 266); /* Rahmen an Bedienteilen, 3.05:1 */
  --werk:#c8ccd2;                                        /* wird aus dem Werk gesetzt */
  --werk-hell:color-mix(in oklab, var(--werk) 62%, #ffffff);
  --display:'Boska',Georgia,'Times New Roman',serif;
  --sans:'Satoshi','Segoe UI',system-ui,sans-serif;
  --daten:'Tabular','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --rand:clamp(20px,4.4vw,56px);
}

html,body{color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis{height:auto}
body{background:var(--tief);color:var(--kreide);font-family:var(--sans);font-size:1.02rem;line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--kreide);color:var(--tief)}
:focus-visible{outline:2.5px solid var(--kreide);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.skip{position:fixed;top:10px;left:10px;z-index:400;background:var(--kreide);color:var(--tief);padding:11px 18px;font-weight:600;text-decoration:none;transform:translateY(-220%);transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none}

/* ---------- Bausteine ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--rand)}
section{position:relative}
.marke{font-family:var(--daten);font-size:.68rem;letter-spacing:.20em;text-transform:uppercase;color:var(--kalk)}
.daten{font-family:var(--daten);font-variant-numeric:tabular-nums;letter-spacing:.02em}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(2.15rem,5.6vw,4.3rem);max-width:16ch}
h2 em{font-style:italic;font-weight:500}
.lauf{max-width:47ch;color:var(--kalk);font-size:clamp(1rem,1.15vw,1.1rem)}
.lauf strong{color:var(--kreide);font-weight:500}

/* durchlaufendes Motiv: die Linie */
.regel{height:1px;background:var(--linie);transform-origin:left center}
.regel-hell{height:1px;background:var(--linie-2)}

/* =======================================================================
   Entwurfs-Hinweis
   ======================================================================= */
.entwurf{background:var(--tief-2);border-bottom:1px solid var(--linie);padding:9px var(--rand);font-family:var(--daten);font-size:.72rem;letter-spacing:.04em;color:var(--kalk);text-align:center}
.entwurf b{color:var(--kreide);font-weight:500}

/* =======================================================================
   Kopfzeile — erscheint erst NACH dem Hero (im Hero gibt es keine Chrome)
   ======================================================================= */
/* fixed statt sticky: die Kopfzeile darf im Hero keinen Platz im Fluss belegen,
   sonst beginnt das Video 62px zu tief und ist nie randlos. */
.kopf{position:fixed;top:0;left:0;right:0;z-index:120;background:var(--tief);border-bottom:1px solid var(--linie);
      transform:translateY(-101%);transition:transform .38s var(--ease)}
.kopf.da{transform:none}
section[id],main[id]{scroll-margin-top:74px}
.kopf-in{max-width:1280px;margin:0 auto;padding:0 var(--rand);height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.kopf-logo{display:flex;align-items:center;min-height:44px}
.kopf-logo img{height:24px;width:auto}
.kopf-nav{display:flex;align-items:center;gap:30px;list-style:none}
.kopf-nav a{font-family:var(--daten);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--kalk);padding:10px 0;position:relative;transition:color .2s var(--ease)}
.kopf-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:var(--kreide);transition:right .3s var(--ease)}
.kopf-nav a:hover{color:var(--kreide)}
.kopf-nav a:hover::after{right:0}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--linie-ui)}
.burger b{display:block;width:18px;height:1.5px;background:var(--kreide);transition:transform .25s var(--ease),opacity .18s}
.burger[aria-expanded="true"] b:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] b:nth-child(2){opacity:0}
.burger[aria-expanded="true"] b:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mmenu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--tief);border-bottom:1px solid var(--linie);padding:6px var(--rand) 20px;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .24s}
.mmenu.auf{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.mmenu a{display:block;padding:14px 2px;font-family:var(--display);font-size:1.5rem;text-decoration:none;border-bottom:1px solid var(--linie)}
@media (max-width:860px){ .kopf-nav{display:none} .burger{display:flex} .mmenu{display:block} }

/* =======================================================================
   01 HERO — Vollbild-Szene.  Ebenen: Video / Jalousie / Typo / Atmosphäre
   ======================================================================= */
/* Höhe 200vh, darin eine klebende Bühne: die Jalousie öffnet sich über eine
   volle Bildschirmhöhe Scroll, ohne GSAP-Pin (der verdeckte das Entwurfs-Banner). */
.hero{height:200vh;position:relative;background:var(--tief)}
.hero-fest{position:sticky;top:0;height:100svh;min-height:540px;overflow:clip}
.hero-buehne{position:absolute;inset:0}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero-dunst{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 92% at 62% 34%,transparent 24%,rgba(8,9,11,.52) 72%,rgba(8,9,11,.9) 100%)}
.hero-korn{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Jalousie = das Gitter als Vordergrund. Nur scaleY, abwechselnder Ursprung. */
.jalousie{position:absolute;inset:0;pointer-events:none}
.jalousie i{position:absolute;left:-2%;width:104%;display:block;background:var(--tief)}
.jalousie i:nth-child(odd){transform-origin:top center}
.jalousie i:nth-child(even){transform-origin:bottom center}
/* Der Ruhezustand steht im CSS, nicht erst im Skript: ohne JavaScript waren
   alle neun Balken geschlossen und das Hero-Video vollstaendig verdeckt. */
.jalousie i:nth-child(1){transform:scaleY(0.78)}
.jalousie i:nth-child(2){transform:scaleY(0.7)}
.jalousie i:nth-child(3){transform:scaleY(0.82)}
.jalousie i:nth-child(4){transform:scaleY(0.66)}
.jalousie i:nth-child(5){transform:scaleY(0.76)}
.jalousie i:nth-child(6){transform:scaleY(0.34)}
.jalousie i:nth-child(7){transform:scaleY(0.26)}
.jalousie i:nth-child(8){transform:scaleY(0.3)}
.jalousie i:nth-child(9){transform:scaleY(0.2)}
@media (max-width:760px){
  .jalousie i:nth-child(1){transform:scaleY(0.8)}
  .jalousie i:nth-child(2){transform:scaleY(0.68)}
  .jalousie i:nth-child(3){transform:scaleY(0.78)}
  .jalousie i:nth-child(4){transform:scaleY(0.62)}
  .jalousie i:nth-child(5){transform:scaleY(0.72)}
  .jalousie i:nth-child(n+6){transform:scaleY(0)}
}

.hero-typo{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(58px,10vh,104px);z-index:4}
.hero-typo::before{content:"";position:absolute;left:calc(var(--rand) * -1);right:calc(var(--rand) * -1);top:-64px;bottom:-120px;z-index:-1;
  background:linear-gradient(to top,rgba(8,9,11,.88) 32%,rgba(8,9,11,.55) 64%,transparent);pointer-events:none}
.hero-sig{height:clamp(38px,5.2vw,58px);width:auto;margin-bottom:clamp(18px,3vh,30px)}
.hero-typo h1{font-size:clamp(2.5rem,7vw,6rem);line-height:.98;letter-spacing:-.025em;max-width:14ch}
.hero-typo h1 em{font-style:italic}
.hero-unter{margin-top:clamp(14px,2.2vh,22px);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.hero-unter span{font-family:var(--daten);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--kalk)}
.hero-wink{position:absolute;right:var(--rand);bottom:clamp(58px,10vh,104px);z-index:4;display:flex;align-items:center;gap:12px}
.hero-wink span{font-family:var(--daten);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}
.hero-wink i{display:block;width:54px;height:1px;background:var(--linie-2)}
@media (max-width:860px){ .hero-wink{display:none} }

/* Mobile: eigene Hero-Komposition — Videoblock oben, Typo darunter, erste
   Zeile überlappt die Videokante (nicht dieselbe Szene, nur kleiner). */
@media (max-width:760px){
  .hero{height:auto;padding-bottom:clamp(30px,7vh,52px)}
  .hero-fest{position:static;height:auto;min-height:0;overflow:visible}
  .hero-buehne{position:relative;inset:auto;height:62svh;min-height:340px;overflow:clip}
  .hero-typo{position:relative;left:auto;right:auto;bottom:auto;margin-top:-54px;padding-inline:var(--rand)}
  .hero-typo::before{display:none}
  .hero-sig{height:34px;margin-bottom:14px}
  .hero-typo h1{font-size:clamp(2.2rem,9.4vw,3.2rem);max-width:16ch}
  .hero-dunst{background:linear-gradient(to bottom,rgba(8,9,11,.35) 0%,transparent 34%,rgba(8,9,11,.6) 84%,var(--tief) 100%)}
}

/* =======================================================================
   02 POSITIONIERUNG — Randläufer
   ======================================================================= */
.pos{padding:clamp(76px,11vw,140px) 0 clamp(64px,9vw,112px);overflow:clip}
.pos-kopf{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,54px)}
.laeufer{overflow:clip;padding-block:.06em}
.laeufer p{font-family:var(--display);font-weight:500;font-size:clamp(2rem,6.2vw,4.9rem);line-height:1.04;white-space:nowrap;letter-spacing:-.03em}
.laeufer p em{font-style:italic;color:var(--kalk)}
.pos-unten{margin-top:clamp(34px,5vw,60px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:start}
.pos-drei{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}
.pos-drei span{font-family:var(--daten);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.pos-drei i{display:inline-block;width:34px;height:1px;background:var(--linie-2);margin:0 16px}
@media (max-width:760px){ .pos-unten{grid-template-columns:1fr} }

/* =======================================================================
   03 DIE TAFELN — Mosaik + chaos settle (Signature)
   ======================================================================= */
.tafeln{padding-bottom:clamp(70px,9vw,120px)}
.tafeln-kopf{padding:clamp(56px,7vw,90px) 0 clamp(26px,3.4vw,40px)}
.tafeln-kopf .zeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* Wandbeschriftung: klebt oben, zeigt das Werk in Blickhöhe. Kein Blur. */
.tafelzeile{position:sticky;top:62px;z-index:60;background:var(--tief);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.tafelzeile .in{max-width:1280px;margin:0 auto;padding:11px var(--rand);display:flex;align-items:center;gap:16px;min-height:44px}
.tafelzeile .nr{font-family:var(--daten);font-size:.7rem;letter-spacing:.16em;color:var(--grau);min-width:2.4em}
.tafelzeile .tit{font-family:var(--display);font-size:clamp(.98rem,1.5vw,1.2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tafelzeile .mas{font-family:var(--daten);font-variant-numeric:tabular-nums;font-size:.74rem;color:var(--kalk);margin-left:auto;white-space:nowrap}
.tafelzeile .tec{font-family:var(--daten);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);white-space:nowrap}
.tafelzeile::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--werk-hell);transform:scaleX(var(--tz,0));transform-origin:left;transition:transform .5s var(--ease)}
@media (max-width:640px){ .tafelzeile .tec{display:none} .tafelzeile .in{gap:10px} }

.mosaik{position:relative;margin-top:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.kachel{position:relative;aspect-ratio:.95;display:flex;align-items:center;justify-content:center;background:var(--tief-2);border:1px solid var(--linie)}
.kachel.breit{grid-column:span 2;aspect-ratio:1.95}
.kachel img{width:100%;height:100%;object-fit:contain;padding:clamp(7px,1vw,14px)}
.kachel .nr{position:absolute;left:10px;top:9px;font-family:var(--daten);font-size:.62rem;letter-spacing:.14em;color:var(--grau);z-index:2}
.kachel-btn{position:absolute;inset:0;z-index:3;border:0;background:none}
.kachel-btn::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .22s var(--ease)}
.kachel-btn:hover::after,.kachel-btn:focus-visible::after{border-color:var(--werk-hell)}
.kachel .nam{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;font-family:var(--daten);font-size:.68rem;letter-spacing:.06em;
  background:linear-gradient(to top,rgba(8,9,11,.93),rgba(8,9,11,.72) 62%,transparent);
  opacity:0;transform:translateY(4px);transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:2;pointer-events:none}
.kachel-btn:hover ~ .nam,.kachel-btn:focus-visible ~ .nam{opacity:1;transform:none}
.luecke{border:1px dashed var(--linie);background:none;display:flex;align-items:flex-end;padding:14px;aspect-ratio:.95}
.luecke p{font-family:var(--daten);font-size:.7rem;line-height:1.55;color:var(--kalk);letter-spacing:.04em}

/* Zielgitter: zeichnet sich, während die Kacheln einrasten (nur scaleX) */
.gitter{position:absolute;inset:0;pointer-events:none;z-index:0}
.gitter i{position:absolute;left:0;width:100%;height:1px;background:var(--linie);transform:scaleX(0);transform-origin:left center}
/* Die Ordnungskante — die Grenze zwischen Lärm und Gitter, wandert mit */
.kante{position:absolute;left:-2%;width:104%;height:1px;top:0;z-index:5;pointer-events:none;background:var(--werk-hell);opacity:.78}
.kante::after{content:"";position:absolute;right:0;top:-18px;font-family:var(--daten);font-size:.6rem;letter-spacing:.18em;color:var(--werk-hell)}

@media (max-width:900px){
  .mosaik{grid-template-columns:repeat(2,1fr)}
  .kachel.breit{grid-column:span 2}
  .luecke{display:none}
}

/* =======================================================================
   04 TAFEL 19 — Überlappung + Maßlinien
   ======================================================================= */
.hoehe{padding:clamp(80px,11vw,150px) 0 clamp(76px,10vw,130px);overflow:clip}
.hoehe-buehne{position:relative;margin-top:clamp(30px,4.6vw,56px)}
.hoehe-bild{position:relative;background:var(--tief-2);border:1px solid var(--linie)}
.hoehe-bild img{width:100%;height:auto;object-fit:contain;display:block}
/* Maßlinien — das Gitter in seiner vermessenden Rolle */
.mass-h,.mass-b{position:absolute;font-family:var(--daten);font-size:.68rem;letter-spacing:.14em;color:var(--kalk);display:flex;align-items:center;gap:8px}
.mass-h{left:-58px;top:0;bottom:0;flex-direction:column;justify-content:center;width:44px}
.mass-h i{flex:1;width:1px;background:var(--linie-2)}
.mass-h span{writing-mode:vertical-rl;transform:rotate(180deg);padding:8px 0}
.mass-b{left:0;right:0;bottom:-40px;height:28px}
.mass-b i{flex:1;height:1px;background:var(--linie-2)}
.hoehe-karte{position:relative;z-index:3;margin-top:-1px;background:var(--tief-3);border:1px solid var(--linie-2);padding:clamp(20px,2.6vw,30px);max-width:420px}
.hoehe-karte h3{font-size:clamp(1.7rem,2.9vw,2.5rem);margin:6px 0 14px}
.hoehe-karte dl{display:grid;grid-template-columns:auto 1fr;gap:7px 20px;font-family:var(--daten);font-size:.78rem}
.hoehe-karte dt{color:var(--grau);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;align-self:center}
.hoehe-karte dd{font-variant-numeric:tabular-nums;color:var(--kreide)}
@media (min-width:901px){
  .hoehe-buehne{padding-left:58px;padding-bottom:40px}
  .hoehe-karte{position:absolute;left:0;bottom:-46px;margin:0}
}
@media (max-width:900px){ .mass-h{display:none} .mass-b{position:static;margin-top:12px} }

/* =======================================================================
   05 CHAOS & ORDNUNG — Gebrochenes Raster + scroll text reveal
   ======================================================================= */
.chaos{padding:clamp(86px,12vw,164px) 0;overflow:clip;position:relative;background:var(--tief-2)}
.chaos-riese{position:absolute;right:-9vw;top:clamp(20px,5vw,60px);font-family:var(--display);font-weight:700;
  font-size:clamp(9rem,26vw,24rem);line-height:.74;color:var(--tief-3);letter-spacing:-.045em;pointer-events:none;user-select:none;z-index:0}
.chaos .wrap{position:relative;z-index:1}
.zitat{max-width:none;font-family:var(--display);font-size:clamp(1.6rem,4.5vw,3.6rem);line-height:1.1;letter-spacing:-.02em}
.zeile-maske{overflow:hidden;display:block}
.zeile-maske > span{display:block}
.zitat em{font-style:italic}
.chaos-fuss{margin-top:clamp(34px,5vw,58px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,54px);max-width:920px}
.chaos-fuss p{color:var(--kalk);font-size:.98rem;max-width:44ch}
.chaos-quelle{margin-top:26px;font-family:var(--daten);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
@media (max-width:760px){ .chaos-fuss{grid-template-columns:1fr} }

/* =======================================================================
   06 V-SERIE — Reihe + UV-Umschalter
   ======================================================================= */
.vserie{padding:clamp(80px,11vw,140px) 0}
.reihe{margin-top:clamp(28px,4vw,50px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.vkarte{position:relative}
.vbild{position:relative;aspect-ratio:.62;background:var(--tief-2);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vbild img{width:100%;height:100%;object-fit:contain;padding:10px}
.vbild img.uv{position:absolute;inset:0;opacity:0}
.vkarte.ist-uv .vbild img.tag{opacity:0}
.vkarte.ist-uv .vbild img.uv{opacity:1}
.vlabel{margin-top:12px}
.vlabel .t{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.24}
.vlabel .m{display:block;font-family:var(--daten);font-variant-numeric:tabular-nums;font-size:.73rem;color:var(--kalk);margin-top:4px}
.uvschalter{display:flex;gap:0;border:1px solid var(--linie-ui);width:fit-content;background:var(--tief)}
.uvschalter button{font-family:var(--daten);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;padding:9px 13px;color:var(--kalk);min-height:38px}
.uvschalter button[aria-pressed="true"]{background:var(--kreide);color:var(--tief)}
.uvschalter button+button{border-left:1px solid var(--linie-ui)}
/* Der Schalter sitzt im Bild (Desktop) und unter dem Bild (Mobil) — genau so
   steht der Rueckfall im Brief. Deshalb liegt er IM .vbild und wandert unten
   heraus, statt die Beschriftung zu ueberdecken. */
.vbild{overflow:visible}
.uvschalter{position:absolute;left:10px;bottom:10px;z-index:3}
@media (max-width:900px){
  .uvschalter{top:100%;bottom:auto;left:0;margin-top:10px}
  .vkarte.hat-uv .vlabel{margin-top:60px}
}
@media (max-width:900px){ .reihe{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .reihe{grid-template-columns:1fr} }

/* =======================================================================
   07 IM RAUM — Überlappung, drei Bewegtbilder
   ======================================================================= */
.raum{padding:clamp(80px,11vw,150px) 0 clamp(62px,8vw,108px);overflow:clip;background:var(--tief-2)}
.raum-buehne{position:relative;margin-top:clamp(30px,4.6vw,56px)}
.raum-breit{position:relative;border:1px solid var(--linie);background:var(--tief)}
.raum-breit video,.raum-breit img{width:100%;aspect-ratio:16/9;object-fit:cover}
.raum-klein{position:relative;border:1px solid var(--linie-2);background:var(--tief);box-shadow:0 22px 60px rgba(0,0,0,.6)}
.raum-klein video,.raum-klein img{width:100%;display:block}
.bu{font-family:var(--daten);font-size:.7rem;letter-spacing:.06em;color:var(--kalk);margin-top:10px;display:flex;gap:4px 12px;flex-wrap:wrap;align-items:baseline}
.raum-klein .bu{margin:0;padding:10px 13px 12px}
.bu b{color:var(--kreide);font-weight:500}
.bu .mark{color:var(--grau);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem}
/* Die Beschriftung der breiten Aufnahme steht OBEN, damit die beiden
   hochgezogenen Renderings sie nicht verdecken. */
.bu-oben{margin:0 0 10px}
.raum-paar{position:relative;z-index:3;display:grid;gap:clamp(16px,2.4vw,34px);align-items:start}
@media (min-width:961px){
  .raum-paar{grid-template-columns:.34fr .46fr;margin-top:-96px;padding-left:5%}
  .raum-b{margin-top:58px}
}
@media (max-width:960px){
  .raum-paar{grid-template-columns:1fr;margin-top:22px}
  .raum-a{width:74%}
  .raum-b{width:92%;margin-left:auto}
}

/* =======================================================================
   08 DER KÜNSTLER — Zweispalter
   ======================================================================= */
.kuenstler{padding:clamp(80px,11vw,150px) 0}
.k-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(30px,5vw,80px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.weg{margin-top:clamp(26px,3.6vw,44px);border-top:1px solid var(--linie)}
.weg li{list-style:none;display:grid;grid-template-columns:5.4em 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--linie)}
.weg .j{font-family:var(--daten);font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--werk-hell);letter-spacing:.06em;padding-top:2px}
.weg .o{font-size:.98rem;color:var(--kalk)}
.weg .o b{color:var(--kreide);font-weight:500}
.k-bild{position:relative}
.k-bild > img{width:100%;border:1px solid var(--linie)}
.k-neben{position:relative;margin-top:-19%;margin-left:-26%;width:62%;border:1px solid var(--linie-2);z-index:2;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.k-neben img{width:100%;display:block}
.credit{font-family:var(--daten);font-size:.64rem;letter-spacing:.1em;color:var(--grau);margin-top:9px;line-height:1.6}
.k-neben .credit{padding-right:8px}
.k-zitat{margin-top:clamp(26px,3.6vw,42px);border-left:1px solid var(--linie-2);padding-left:22px;font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.34;max-width:34ch}
@media (max-width:860px){ .k-grid{grid-template-columns:1fr} .k-neben{width:44%;margin-top:-14%} }

/* =======================================================================
   09 AUSSTELLUNGEN — Register + pinned Jahr
   ======================================================================= */
.aus{padding:clamp(80px,11vw,150px) 0;background:var(--tief-2)}
.aus-grid{display:grid;grid-template-columns:.32fr .68fr;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,48px);align-items:start}
.jahr-spalte{position:relative;align-self:stretch}
.jahr-halt{position:sticky;top:120px}
.jahr{font-family:var(--display);font-weight:700;font-size:clamp(3.2rem,7.4vw,6.2rem);line-height:1;letter-spacing:-.04em;color:var(--kreide)}
.jahr small{display:block;font-family:var(--daten);font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-top:20px}
.aus-liste{border-top:1px solid var(--linie-2)}
.aus-z{display:grid;grid-template-columns:13.4em 1fr auto;gap:10px 22px;padding:20px 0;border-bottom:1px solid var(--linie);align-items:start}
.aus-z .d{font-family:var(--daten);font-variant-numeric:tabular-nums;font-size:.72rem;color:var(--kalk);padding-top:5px;letter-spacing:.02em;white-space:nowrap}
.aus-z .t{font-family:var(--display);font-size:clamp(1.08rem,1.8vw,1.42rem);line-height:1.2}
.aus-z .o{font-family:var(--sans);font-size:.88rem;color:var(--kalk);margin-top:5px}
.aus-z .o .ph{color:var(--grau);font-style:italic}
.aus-z .art{font-family:var(--daten);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);padding-top:6px;white-space:nowrap}
.aus-z .mini{width:74px;height:74px;object-fit:cover;border:1px solid var(--linie-2);grid-column:2;margin-top:12px}
.aus-hinweis{margin-top:26px;font-family:var(--daten);font-size:.72rem;color:var(--grau);letter-spacing:.03em}
@media (max-width:860px){
  .aus-grid{grid-template-columns:1fr}
  .jahr-halt{position:static}
  .jahr{font-size:3.2rem}
  .aus-z{grid-template-columns:1fr;gap:4px}
  .aus-z .art{padding-top:2px}
  .aus-z .mini{grid-column:1}
  .jahr-trenner{font-family:var(--display);font-weight:700;font-size:2.6rem;padding:26px 0 8px;border-bottom:1px solid var(--linie-2)}
}
.jahr-trenner{display:none}
@media (max-width:860px){ .jahr-trenner{display:block} }

/* =======================================================================
   10 ANFRAGE — Zweispalter
   ======================================================================= */
.anfrage{padding:clamp(80px,11vw,150px) 0}
.a-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,76px);margin-top:clamp(26px,4vw,48px);align-items:start}
.a-zitat{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.3;max-width:26ch;margin-bottom:clamp(26px,3.4vw,40px)}
.knopf{display:inline-flex;align-items:center;gap:14px;background:var(--kreide);color:var(--tief);font-family:var(--daten);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:17px 28px;min-height:52px;transition:background .22s var(--ease),color .22s var(--ease)}
.knopf:hover{background:var(--werk-hell)}
.knopf i{display:block;width:22px;height:1px;background:currentColor}
.a-reg{border-top:1px solid var(--linie-2)}
.a-reg div{display:grid;grid-template-columns:8.4em 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.a-reg dt{font-family:var(--daten);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.a-reg dd a{text-decoration:none;border-bottom:1px solid var(--linie-2);padding-bottom:2px}
.a-reg dd a:hover{border-color:var(--kreide)}
.merk{margin-top:24px;border:1px solid var(--linie-2);padding:16px 18px;font-family:var(--daten);font-size:.73rem;line-height:1.6;color:var(--kalk)}
.merk b{color:var(--kreide);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;display:block;margin-bottom:7px}
@media (max-width:860px){ .a-grid{grid-template-columns:1fr} }

/* =======================================================================
   11 WERKVERZEICHNIS — der Abspann: alles wird Text, das Gitter zerfällt
   ======================================================================= */
.verz{padding:clamp(76px,10vw,130px) 0 clamp(26px,3.4vw,44px);border-top:1px solid var(--linie)}
.verz-liste{margin-top:clamp(26px,3.4vw,42px);columns:3;column-gap:clamp(24px,3.4vw,54px)}
.verz-liste li{list-style:none;break-inside:avoid;display:grid;grid-template-columns:2.7em 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--linie);font-family:var(--daten);font-size:.76rem;line-height:1.45}
.verz-liste .n{color:var(--grau);font-variant-numeric:tabular-nums}
.verz-liste .w{color:var(--kalk)}
/* Werktitel in der Anzeigeschrift: Tabulars Null ist von einem O nicht zu
   unterscheiden — „N.K0“ las sich als „N.KO“. Boska trennt beide klar. */
.verz-liste .w b{color:var(--kreide);display:block;font-family:var(--display);
  font-weight:500;font-size:.98rem;letter-spacing:0;margin-bottom:1px}
.verz-fuss{margin-top:30px;font-family:var(--daten);font-size:.72rem;color:var(--grau);max-width:60ch;line-height:1.7}
@media (max-width:900px){ .verz-liste{columns:2} }
@media (max-width:560px){ .verz-liste{columns:1} }

/* das Gitter zerfällt */
.zerfall{margin-top:clamp(26px,3.6vw,50px);height:84px;position:relative;overflow:clip}
.zerfall i{position:absolute;left:0;width:100%;height:1px;background:var(--linie-2)}

/* =======================================================================
   Kolophon
   ======================================================================= */
.kolo{border-top:1px solid var(--linie);padding:clamp(34px,4.4vw,52px) 0 clamp(30px,4vw,44px)}
.kolo-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-end}
.kolo img{height:40px;width:auto;opacity:.9}
.kolo .satz{font-family:var(--daten);font-size:.7rem;letter-spacing:.07em;color:var(--grau);line-height:1.8;max-width:46ch}
.kolo .satz a{color:var(--kalk);text-decoration:none;border-bottom:1px solid var(--linie-2)}
.kolo .satz a:hover{color:var(--kreide)}
.kolo .anspruch{font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--kalk)}

/* =======================================================================
   Werkblatt — Einzelwerk-Ansicht (Klick auf eine Tafel)
   ======================================================================= */
.blatt{position:fixed;inset:0;z-index:300;display:none;background:rgba(6,7,9,.965)}
.blatt.auf{display:block}
/* minmax(0,1fr) statt 1fr: 1fr hat eine implizite Mindesthoehe aus dem Inhalt —
   damit sprengte das Werkbild die Zeile und wurde angeschnitten gezeigt. */
.blatt-in{position:absolute;inset:0;width:100%;max-width:1180px;margin-inline:auto;
  padding:clamp(56px,7vh,80px) var(--rand) clamp(22px,4vh,40px);
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:22px}
.blatt-bild{min-height:0;display:flex;align-items:center;justify-content:center}
.blatt-bild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.blatt-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--linie);padding-top:16px}
.blatt-fuss h3{font-size:clamp(1.4rem,3vw,2.1rem)}
.blatt-fuss .nr{font-family:var(--daten);font-size:.66rem;letter-spacing:.18em;color:var(--grau);margin-bottom:6px}
.blatt-fuss .mas{font-family:var(--daten);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--kalk);margin-top:6px}
.blatt-nav{display:flex;gap:8px;align-items:center}
.blatt-nav button{width:46px;height:46px;border:1px solid var(--linie-ui);display:grid;place-items:center;font-family:var(--daten);font-size:.9rem;color:var(--kalk)}
.blatt-nav button:hover{border-color:var(--kreide);color:var(--kreide)}
.blatt-zu{position:absolute;top:14px;right:var(--rand);width:46px;height:46px;border:1px solid var(--linie-ui);display:grid;place-items:center;font-family:var(--daten);color:var(--kalk);z-index:2}
.blatt-zu:hover{border-color:var(--kreide);color:var(--kreide)}

/* =======================================================================
   Rechtsseiten
   ======================================================================= */
.recht{padding:clamp(64px,9vw,120px) 0 clamp(50px,7vw,90px);max-width:760px}
.recht h1{font-size:clamp(2.2rem,5.4vw,3.6rem);margin-bottom:28px}
.recht h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:38px 0 12px;max-width:none}
.recht p{color:var(--kalk);margin-bottom:14px;max-width:70ch}
.recht a{color:var(--kreide)}
.recht .adr{font-family:var(--daten);font-size:.88rem;line-height:1.9;color:var(--kreide);margin-bottom:16px}
.recht .platz{border:1px solid var(--linie-2);padding:20px 22px;margin:26px 0;font-size:.93rem;color:var(--kalk)}
.recht .platz b{display:block;font-family:var(--daten);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kreide);margin-bottom:9px}
.zurueck{display:inline-flex;align-items:center;gap:10px;font-family:var(--daten);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kalk);text-decoration:none;margin-bottom:36px}
.zurueck:hover{color:var(--kreide)}

/* =======================================================================
   Reduced motion: Endzustände, keine Bewegung, Videos als Standbild
   ======================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .jalousie{display:none}
  .kachel{transform:none!important}
  .gitter i{transform:scaleX(1)!important}
  .kante{display:none}
  .zeile-maske > span{transform:none!important}
  .laeufer p{transform:none!important}
  .kopf{transform:none}
}