/* ═══════════════════════════════════════════════════════════════════
   FOLIENWERK — Vision: Kalt. Vermessen. Unbeirrbar.

   Zeile 1 der Vision sagt "kalt" — also GAR KEIN Farbton. Die einzige
   Farbe auf dieser Seite steckt in den Fotos. Akzent ist reines Weiss.
   Zeile 3 sagt "wie eine Betriebsanleitung": helle Studioplatten liegen
   als Tafeln auf dunklem Grund, mit Nummer und einer Zeile darunter.
   Zeile 5 ist die Technik: `process morph` — fuenf Zustaende desselben
   Wagens in festem Rahmen, ohne dass die Kamera sich bewegt.

   Gesperrt (Zeile 4): Verlauf, Nebel, Cyan, und die eigene Vorfassung
   mit hellem Grund und Eck-Messgeraet.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Cabinet';src:url('fonts/cabinet-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cabinet';src:url('fonts/cabinet-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Mulish';src:url('fonts/mulish-400-normal-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Mulish';src:url('fonts/mulish-600-normal-latin.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --tinte:#0F1114;
  --tiefer:#090A0C;
  --stein:#E9E5DD;
  --dim:rgba(233,229,221,.66);
  --linie:rgba(233,229,221,.16);
  --rand:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.75,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--tinte);color:var(--stein);
  font-family:'Mulish',system-ui,sans-serif;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--stein);outline-offset:4px}
.weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--stein);color:var(--tinte);padding:10px 16px}

.bahn{max-width:1280px;margin:0 auto;padding:0 var(--rand)}
h1,h2{font-family:'Cabinet',Impact,sans-serif;font-weight:800;margin:0;
  line-height:.96;letter-spacing:-.022em}
h1{font-size:clamp(34px,6vw,84px);max-width:15ch}
h2{font-size:clamp(26px,3.6vw,48px);max-width:19ch}
.nr{font-family:'Cabinet',sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;
  color:var(--dim);margin:0 0 1.3em}
.nr b{color:var(--stein);font-weight:700}
.text{margin:1.2em 0 0;max-width:52ch;color:var(--dim)}

.kopf{display:flex;align-items:baseline;gap:16px;padding:22px var(--rand);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.kopf b{font-family:'Cabinet',sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.1em;color:var(--stein)}
.kopf a{margin-left:auto;color:var(--stein);border-bottom:1px solid var(--linie);padding-bottom:2px}

.auftakt{padding:clamp(40px,7vh,90px) 0 clamp(56px,9vh,120px)}
.auftakt .text{font-size:clamp(16px,1.6vw,18.5px)}
.fakten{display:flex;flex-wrap:wrap;gap:0;margin:clamp(34px,5vh,58px) 0 0;padding:0;
  list-style:none;border-top:1px solid var(--linie)}
.fakten li{flex:1 1 165px;padding:16px 20px 18px 0;border-right:1px solid var(--linie);
  font-size:14px;color:var(--dim)}
.fakten li:last-child{border-right:0}
.fakten b{display:block;font-family:'Cabinet',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em;color:var(--stein);margin-bottom:.4em}

/* ── process morph: fuenf Zustaende, feste Kamera ─────────────────── */
.morph{position:relative;height:520vh;background:var(--tiefer)}
.morph__buehne{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,3vh,34px) var(--rand)}
.morph__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:'Cabinet',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim)}
.morph__kopf b{color:var(--stein)}
.morph__platte{position:relative;margin:clamp(14px,2.5vh,26px) 0}
.morph__platte img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;will-change:opacity}
.morph__fuss{display:grid;gap:6px}
.morph__zahl{font-family:'Cabinet',sans-serif;font-weight:800;
  font-size:clamp(40px,7vw,86px);line-height:.85;letter-spacing:-.03em}
.morph__satz{margin:0;font-size:clamp(16px,2vw,22px);max-width:34ch;color:var(--stein)}
.morph__leiste{height:1px;background:var(--linie);margin-top:clamp(12px,2vh,20px);position:relative}
.morph__leiste::after{content:"";position:absolute;left:0;top:0;height:1px;
  background:var(--stein);width:var(--fortschritt,0%)}

/* Ohne Bewegung: aus der Buehne wird eine Liste. */
.morph__liste{display:none}

/* ── Rest der Seite ──────────────────────────────────────────────── */
.block{padding:clamp(64px,10vh,130px) 0;border-top:1px solid var(--linie)}
.paar{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  .paar{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .paar--gedreht{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
.paar figure{margin:0}
.paar figure img{width:100%}

.folien{list-style:none;margin:clamp(22px,3.5vh,38px) 0 0;padding:0;border-top:1px solid var(--linie)}
.folien li{display:flex;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--linie);font-size:15px}
.folien i{width:12px;height:12px;flex:0 0 auto;border:1px solid var(--linie);
  transform:translateY(1px)}
.folien span{margin-left:auto;color:var(--dim);font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase}

.breit img{width:100%;margin-top:clamp(24px,4vh,42px)}

.termin{padding:clamp(64px,10vh,130px) 0 clamp(40px,6vh,64px);border-top:1px solid var(--linie);
  display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr}
@media(min-width:820px){.termin{grid-template-columns:1.1fr .9fr}}
.knopf{display:inline-block;margin-top:1.7em;background:var(--stein);color:var(--tinte);
  padding:1.05em 2.1em;font-family:'Cabinet',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;transition:opacity .3s var(--ease)}
.knopf:hover{opacity:.82}
.daten{margin:0}
.daten dt{font-family:'Cabinet',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);border-top:1px solid var(--linie);padding-top:13px}
.daten dd{margin:.4em 0 17px}

.fuss{border-top:1px solid var(--linie);padding:22px 0 clamp(40px,6vh,64px);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px 24px}

@media (prefers-reduced-motion:reduce){
  .morph{height:auto}
  .morph__buehne{display:none}
  .morph__liste{display:block;padding:clamp(50px,8vh,100px) var(--rand)}
  .morph__liste figure{margin:0 0 clamp(30px,5vh,54px)}
  .morph__liste img{width:100%}
  .morph__liste figcaption{margin-top:12px;font-size:16px}
}