/* Hauptseite: drei Flaechen uebereinander. Jede Flaeche schiebt sich von unten ueber die vorige
   (Vorhang), die darunterliegende weicht leicht nach oben aus. Eine Kurve, eine Dauer. */
:root{--vorhang:900ms;--expo:cubic-bezier(.16,1,.3,1)}
html,body{height:100%;overflow:hidden}
.flaeche{position:fixed;inset:0;background:var(--grund);will-change:transform;
  transition:transform var(--vorhang) var(--expo)}
/* Alle Flaechen ausser dem Cover warten schon im HTML unten (Chris, 30.10.2026: beim Laden blitzte sonst kurz Legal auf,
   die oberste Flaeche, bis klick.js sortiert hatte) */
.flaeche.unten-wartend{transform:translateY(100%)}
.flaeche.oben-verdeckt{transform:translateY(-12vh)}
.cover{z-index:1;overflow:hidden;color:var(--tinte);--rand:var(--rand-cover)}
.showcase{z-index:2}
.about{z-index:3;overflow-y:auto;overscroll-behavior:contain}

 /* Cover */
.cover .grund{position:absolute;inset:0}
.cover .grund img,.cover .grund video{width:100%;height:100%;object-fit:cover;display:block}
.cover .typo{position:absolute;z-index:1}
.cover .reihe{display:flex;align-items:flex-end}
.cover .reihe .aufbau{flex:0 0 auto}
.cover .bereiche{position:absolute;z-index:1;display:grid}
.cover .unten{position:absolute;z-index:1;display:block;color:inherit}
.cover .unten.mitte{left:50%;transform:translateX(-50%)}

/* Dunkle Flaechen About, Contact, Legal (Chris, 26.09.2026): gebrochenes Schwarz, heller Text,
   Titel THE ABOUT / THE CONTACT / THE LEGAL in der einheitlichen Titelgroesse, linksbuendig. */
.dunkel{background:var(--dunkel);color:#fbfbfb;--tinte:#fbfbfb;--leise:rgba(251,251,251,.55);--linie:rgba(251,251,251,.18);
  overflow-y:auto;overscroll-behavior:contain}
.about{z-index:3}.newsletter{z-index:4}.contact{z-index:5}.legal{z-index:6}
.fl-kopf{position:sticky;top:0;z-index:12;height:0}
.fl-kopf > *{position:absolute;top:var(--rand);color:inherit}
.fl-kopf > a{left:var(--rand)}
.fl-kopf .mitte{left:var(--mitte);white-space:nowrap}
.fl-kopf .rechts{right:var(--rand)}
.dunkel .titel{margin:0 0 calc(var(--rand) * 1.4)}
.fl-innen{position:relative;min-height:100vh;padding:calc(var(--rand) * 3) var(--rand) calc(var(--rand) * 2)}

/* About (Chris, 26.09.2026): Text ueber die volle Satzbreite, buendig mit dem Titel; drei Varianten A/B/C (module/about.js) */
.about-feld{position:relative}
.about-collage{position:absolute;inset:0}
.about-collage img{position:absolute;display:block;object-fit:cover}
.about-text{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
  font-family:var(--schrift-display);word-spacing:.145em;font-size:var(--t-mittel);line-height:calc(1.08 * var(--lh-faktor));text-transform:uppercase;letter-spacing:var(--sperrung-display);-webkit-text-stroke:var(--strich) currentColor}
.about-band{padding:calc(var(--rand) * 3) var(--rand) 0}
.about-band + .about-band{padding-top:0}
.about-text p{margin:0 0 .9em}
.about-text .w{opacity:.22;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.about-text .w.an{opacity:1}
/* A lesen: ein Block oben, laeuft mit */
.about-feld[data-modus="a"] .about-band + .about-band{padding-top:0}
/* B negativ: bleibt stehen, kehrt die Bilder darunter um */
.about-feld[data-modus="b"] .about-text{position:sticky;mix-blend-mode:difference;color:#fbfbfb}
.about-feld[data-modus="b"] .about-text .w{opacity:1}
/* C kapitel: jedes Band sitzt an seiner Stelle zwischen den Bildgruppen */
.about-feld[data-modus="c"] .about-text{position:absolute;inset:0}
.about-feld[data-modus="c"] .about-band{position:absolute;left:0;right:0;padding-top:0}
.about-feld[data-modus="c"] .about-band:first-child{padding-top:calc(var(--rand) * 3)}
/* BLOCK (gilt): der ganze Text steht, gross, voll lesbar; die Bilder warten, bis er durch ist */
.about-feld[data-modus="block"] .about-text{font-family:var(--schrift-display);word-spacing:.145em;font-size:clamp(24px,3.5vw,64px);line-height:calc(1.02 * var(--lh-faktor))}
.about-feld[data-modus="block"] .about-band{padding-bottom:0}
.about-feld[data-modus="block"] .about-band:last-child{padding-bottom:calc(var(--rand) * 3)}
.about-feld[data-modus="block"] .about-text .w{opacity:1;transition:none}
.about-collage{will-change:transform}
/* AB lesen+negativ: Lesebuehne steht, Absatz fuer Absatz, als Negativ ueber den Bildern */
.about-lese{display:none;position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none}
.about-feld[data-modus="ab"] .about-lese{display:block}
.about-feld[data-modus="ab"] .about-text{display:none}
.about-buehne{position:sticky;top:0;height:100vh;padding:calc(var(--rand) * 3) var(--rand) 0;mix-blend-mode:difference;color:#fbfbfb}
.about-buehne .titel{margin:0 0 calc(var(--rand) * 1.1)}
.about-fach{position:relative}
.about-absatz{position:absolute;left:0;right:0;top:0;margin:0;
  /* Groesse: der laengste Absatz passt bei jeder Fenstergroesse unter den Titel */
  font-family:var(--schrift-display);word-spacing:.145em;font-size:clamp(24px,min(3.6vw,5.6vh),64px);line-height:calc(1.02 * var(--lh-faktor));text-transform:uppercase;
  letter-spacing:var(--sperrung);-webkit-text-stroke:var(--strich) currentColor;
  transition:transform .8s var(--expo),opacity .5s ease}
.about-absatz.wartet{opacity:0;transform:translateY(8vh)}
.about-absatz.vorbei{opacity:0;transform:translateY(-8vh)}
.about-absatz .w{opacity:.18;transition:opacity .35s ease}
.about-absatz .w.an{opacity:1}
/* Umschalter, nur auf dem Prototyp */
.about-wahl{position:fixed;right:var(--rand);bottom:var(--rand);z-index:40;display:none;gap:10px;align-items:center;
  background:#fbfbfb;color:#101010;padding:10px 12px}
body.im-about .about-wahl{display:flex}
.about-wahl button{background:none;border:1px solid #101010;padding:6px 9px;cursor:pointer;color:#101010}
.about-wahl button.an{background:#101010;color:#fbfbfb}
.about-marke,.about-zitat,.about-ende{position:absolute;margin:0;text-transform:uppercase;letter-spacing:var(--sperrung);
  -webkit-text-stroke:var(--strich) currentColor;line-height:calc(1.05 * var(--lh-faktor))}
.about-marke{font-family:var(--schrift-display);word-spacing:.145em;font-size:clamp(24px,3.5vw,64px);line-height:calc(1.02 * var(--lh-faktor))}
/* Chris, 14.10.2026: Stichworte und Zitat in derselben Groesse wie der About-Text, auch die Anfuehrungszeichen */
.about-marke .q,.about-zitat .q{font-size:1em;line-height:inherit;vertical-align:baseline;margin-right:.04em}
.about-zitat{display:grid;grid-template-columns:auto 1fr;column-gap:.1em;font-family:var(--schrift-display);word-spacing:.145em;font-size:clamp(24px,3.5vw,64px);line-height:calc(1.02 * var(--lh-faktor))}
.about-zitat em{font-style:italic}
.about-ende{font-size:var(--t-klein);line-height:calc(1.2 * var(--lh-faktor))}

/* Legal */
.sprung{display:flex;flex-wrap:wrap;gap:6px calc(var(--steg) * 1.6);margin:0 0 calc(var(--rand) * 1.2)}
.sprung a:hover{color:var(--akzent)}
.legal-teil{display:grid;grid-template-columns:calc(3 * var(--spalte) + 2 * var(--steg)) calc(7 * var(--spalte) + 6 * var(--steg));column-gap:var(--steg);
  border-top:1px solid var(--linie);padding:18px 0 calc(var(--rand) * 1.2);scroll-margin-top:calc(var(--rand) * 2.5)}
.legal-text{font-size:var(--t-klein);line-height:calc(1.5 * var(--lh-faktor));letter-spacing:var(--sperrung);color:rgba(251,251,251,.82)}
.legal-text h3{color:#fbfbfb}

.probe{position:fixed;left:50%;bottom:6px;transform:translateX(-50%);z-index:200;color:var(--leise);font-size:9px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.flaeche{transition:none}}

/* Contact auf Orange (Chris, 27.09.2026 freigegeben): der Vorhang zwischen About (dunkel), Contact und
   Legal (dunkel) wird sichtbar. Text dunkel: Weiss auf #ff6a00 haette nur rund 2,9:1 Kontrast. Der About-Text
   bleibt deckend weiss; den Differenz-Modus wie auf Cargo hat Chris abgelehnt. */
.contact{background:var(--akzent);color:#121212;--tinte:#121212;--leise:rgba(18,18,18,.62);--linie:rgba(18,18,18,.24)}
.contact a:hover,.contact a:focus-visible{color:#fbfbfb}

/* SEITE IM MAGAZINSATZ (Newsletter, Contact; Chris, 14.10.2026, Leitbild Atlan/Abloh): Titel oben, viel Flaeche,
   unten drei Spalten im 12er-Raster wie ein Impressum. Spaltenkoepfe in Anfuehrungszeichen, klein und leise. */
.seite{display:flex;flex-direction:column;min-height:100vh}
.seite .titel{margin:0}
.spalten{margin-top:auto;display:grid;grid-template-columns:repeat(3,calc(4 * var(--spalte) + 3 * var(--steg)));column-gap:var(--steg);
  border-top:1px solid var(--linie);padding-top:calc(var(--rand) * .6)}
.spalten > div{padding-right:calc(var(--spalte) * .6)}
.spalten p{margin:0 0 1.15em;line-height:calc(1.3 * var(--lh-faktor))}
.spalten .leise{color:var(--leise)}
.sp-kopf{font:inherit;color:var(--leise);margin:0 0 1em}
.spalten p + .sp-kopf{margin-top:2.4em}

/* Newsletter: Off-White der Familie, Schrift fast schwarz, das Feld ist die Buehne */
.newsletter{background:var(--offwhite);color:#101010;--tinte:#101010;--leise:rgba(16,16,16,.5);--linie:rgba(16,16,16,.16);
  overflow-y:auto;overscroll-behavior:contain}
.nl{margin:auto 0;padding:calc(var(--rand) * 1.6) 0;display:grid;grid-template-columns:calc(9 * var(--spalte) + 8 * var(--steg)) 1fr;
  column-gap:var(--steg);align-items:end}
.nl-feld{display:block}
.nl-label{display:block;color:var(--leise);margin-bottom:.9em}
.nl input[type=email]{width:100%;background:none;border:0;border-bottom:2px solid currentColor;border-radius:0;color:inherit;
  font:inherit;font-family:var(--schrift-display);word-spacing:.145em;font-size:clamp(28px,4.6vw,84px);line-height:calc(1.05 * var(--lh-faktor));padding:0 0 .12em;text-transform:uppercase;
  letter-spacing:var(--sperrung-display);-webkit-text-stroke:var(--strich) currentColor;outline:none}
.nl input[type=email]::placeholder{color:rgba(16,16,16,.2);-webkit-text-stroke:0}
.nl input[type=email]:focus{border-color:var(--akzent)}
.nl-los{justify-self:end;background:none;border:0;cursor:pointer;color:var(--akzent);font-family:var(--schrift-display);word-spacing:.145em;font-size:var(--t-mittel);line-height:calc(1 * var(--lh-faktor));
  text-transform:uppercase;letter-spacing:var(--sperrung);-webkit-text-stroke:var(--strich) currentColor;
  padding:0 0 calc(2px + .4em);display:flex;gap:.3em;align-items:baseline}
.nl-los .pfeil{font-size:.6em;transition:transform .25s ease}
.nl-los:hover{color:#101010}.nl-los:hover .pfeil{transform:translate(4px,-4px)}
.nl-ja{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;margin-top:calc(var(--rand) * .7);line-height:calc(1.3 * var(--lh-faktor));max-width:calc(9 * var(--spalte) + 8 * var(--steg));cursor:pointer}
.nl-ja input{accent-color:var(--akzent);width:14px;height:14px;margin:0;flex:0 0 auto}
.nl-ja a{border-bottom:1px solid currentColor}
.nl-status{grid-column:1/-1;min-height:1em;margin-top:calc(var(--rand) * .7);color:var(--akzent);line-height:calc(1.3 * var(--lh-faktor))}

/* Contact: Orange, Spalten wie oben */
.ct-fam{display:block;margin:0 0 1.4em}
.ct-fam .fname{display:block;margin-bottom:.4em}
.ct-fam .fname.gemischt{text-transform:none}
.ct-fam .pfeil{display:inline-block;transition:transform .25s ease}
.ct-fam:hover .pfeil{transform:translate(3px,-3px)}
.ct-fam:hover .leise{color:inherit}

/* Cover nach der Typo-Vorlage vom 25.10.2026: Lage und Breiten in cover/neu/lage.css (cover_typo.py) */
.cover-neu .c-teil{position:absolute;z-index:1;display:block;color:#101010}
/* Schrift ins Bewegtbild einbinden (Chris, 26.10.2026: "zu sehr oben draufgesetzt"). Am Film gemessen:
   tiefstes Schwarz rgb(38,38,45), leicht kuehl; Korn 2,1-2,5 Graustufen, Korngroesse ~1 px bei 1920 (Autokorr. 0,68).
   1) Schwarz leicht kuehl statt neutral, 2) Korn nur auf den Buchstaben (Kachel im Massstab des Videos, 24 Bilder/s),
   3) Kanten eine Spur weicher wie das Filmbild. ?korn=0 schaltet alles ab (Vergleich). */
.cover-neu.korn .c-teil{color:#17171d}
.cover-neu.korn .c-teil svg{filter:blur(.022vw)}
.cover-neu.korn .c-teil::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:url(cover/korn.png) 0 0/26.667vw auto repeat;mix-blend-mode:screen;
  -webkit-mask:var(--maske) 0 0/100% 100% no-repeat;mask:var(--maske) 0 0/100% 100% no-repeat;
  animation:korn .3333s steps(1) infinite}
.aufbau-fertig .cover-neu.korn .c-teil::after{opacity:1}
@keyframes korn{0%{background-position:0 0}12.5%{background-position:-11.3vw 7.1vw}25%{background-position:-3.7vw -15.2vw}
  37.5%{background-position:-19.9vw -4.4vw}50%{background-position:-8.6vw -21.7vw}62.5%{background-position:-24.1vw 12.9vw}
  75%{background-position:-14.8vw -9.3vw}87.5%{background-position:-5.2vw 18.6vw}}
@media (prefers-reduced-motion:reduce){.cover-neu.korn .c-teil::after{animation:none}}
.cover-neu .c-teil svg{width:100%;height:auto;display:block}
.cover-neu .c-teil svg path{fill:currentColor}
.cover-neu a.c-teil:hover,.cover-neu a.c-teil:focus-visible,.cover-neu button.c-teil:hover,.cover-neu button.c-teil:focus-visible{color:var(--akzent)}
.cover-neu button.c-teil{background:none;border:0;padding:0;cursor:pointer}
/* Uhr: wechselt jede Sekunde, darum kein Aufbau; sie blendet mit dem Ende des Aufbaus ein */
.cover-neu .c-zeit{opacity:0;transition:opacity .8s ease}
.aufbau-fertig .cover-neu .c-zeit{opacity:1}