/* El Greco Regen – Bewegung: Scroll-Animationen und Einblendungen.
   Wird nach styles.css geladen und überschreibt dessen Bewegungsregeln.

   Eine Bewegungssprache, Werte nach Apples Keyframes (macbook-pro, iphone):
   - Einblendungen (.fade, .fade-item, .fade-in): einmalig, 30 px Hub in 0,7 s,
     Deckkraft in 0,9 s, easeInOutQuad, 150 ms Versatz (setzt script.js).
   - Gepinnte Bühnen (.story, .fillstage, .zoom) hängen direkt am Scrollstand;
     script.js und abschnitte.js schreiben dort nur opacity und transform
     (kein clip-path, kein Layout). Der Ablauf ist linear zum Scrollweg, ohne
     Standphasen, ohne Transition und ohne Einmal-Effekt: derselbe Scrollstand
     ergibt abwärts wie aufwärts dasselbe Bild. will-change steht nur, solange
     eine Bühne in der Nähe ist (.is-near), sonst belegt nichts dauerhaft
     Grafikspeicher.
   - Einmalige Staffeln außerhalb der Bühnen (.kask, .zaehlt im Gäste-Kapitel):
     die Klassen setzt erst das Skript, ohne sie ist alles sichtbar.
   - Hero: warmes Licht mit Hitzeflimmern folgt dem Zeiger (licht.js, nur große Bildschirme).
   - Bedienelemente: cubic-bezier(.4, 0, .6, 1), 240 bis 320 ms.
   Bewegung gilt nur, wenn sie erwünscht ist: die Einblendungen stehen in einer
   no-preference-Abfrage, die Bühnen hängen an html.motion (setzt script.js nur
   ohne prefers-reduced-motion). Ohne JavaScript greift der noscript-Block. */

:root {
  --m-ease: cubic-bezier(.455, .03, .515, .955); /* easeInOutQuad */
  --m-ui: cubic-bezier(.4, 0, .6, 1);
  --m-move: .7s;
  --m-fade: .9s;
  --m-dist: 30px;
}

/* ---------- Einblendungen ----------
   Der Übergang hängt am sichtbaren Zustand: so blendet nichts aus, wenn
   script.js einem Element .fade-item erst gibt. */
@media (prefers-reduced-motion: no-preference) {
  .fade,
  .fade-item,
  html.js .fade-in { opacity: 0; transform: translate3d(0, var(--m-dist), 0); transition: none; }

  .fade.is-visible,
  .fade-item.is-visible,
  html.js.hero-go .fade-in {
    opacity: 1; transform: none;
    transition: opacity var(--m-fade) var(--m-ease), transform var(--m-move) var(--m-ease);
  }
  html.js.hero-go .fade-in { transition-delay: var(--d, 0s); }

  /* Kopf eines Kapitels: der Behälter steht, seine Zeilen kommen einzeln. */
  .fade.fade-split { opacity: 1; transform: none; transition: none; }
}

/* ---------- Wein-Intro ----------
   Platz für die Bildlaufleiste bleibt reserviert, damit die Seite beim Ende des
   Intros nicht seitlich springt. Sobald das Intro ausblendet, ist Scrollen frei. */
html.intro-on { scrollbar-gutter: stable; }
html.intro-on.intro-leave { overflow: visible; overflow-x: clip; }

/* ---------- Hero ----------
   Der Text steht. Das Foto zoomt beim Wegscrollen; den transform und das
   will-change dazu setzt script.js nur, solange der Hero im Bild ist. */
.hero-inner { will-change: auto; }
html.motion .hero-bg img { transform-origin: 50% 50%; backface-visibility: hidden; }
/* Licht auf dem Hero-Foto (licht.js): die Leinwand ersetzt Foto und Schleier. */
.hero-licht { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--m-ui, ease); }
.hero-bg.hat-licht .hero-licht { opacity: 1; }
.hero-bg.hat-licht::after { display: none; }
/* Solange die Taschenlampe läuft, liegt die Schrift im Halbdunkel und leuchtet auf, wenn das Licht sie trifft. */
.hero.im-dunkeln .hero-eyebrow, .hero.im-dunkeln .hero-mark, .hero.im-dunkeln .hero-headline, .hero.im-dunkeln .hero-sub {
  filter: brightness(calc(.6 + .75 * var(--hell, 0))) drop-shadow(0 0 calc(var(--hell, 0) * 26px) rgba(255, 196, 120, calc(var(--hell, 0) * .5)));
}
/* Telefon: Lichtschein statt Leinwand. Liegt über dem Schleier und hellt nur auf. */
.hero-schein { position: absolute; left: 0; top: 0; z-index: 1; width: 120vw; height: 120vw; margin: -60vw 0 0 -60vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 120, .30) 0%, rgba(255, 196, 120, .12) 34%, rgba(255, 196, 120, 0) 66%);
  mix-blend-mode: screen; transform: translate3d(70vw, 30svh, 0); animation: schein-bahn 16s ease-in-out infinite alternate; }
.hero-schein.folgt { animation: none; transition: transform 1.1s cubic-bezier(.3, .1, .2, 1); }
@keyframes schein-bahn { from { transform: translate3d(74vw, 26svh, 0); } to { transform: translate3d(22vw, 44svh, 0); } }

/* ---------- Küche: gepinnte Bühne ----------
   Die Bühne steht unter der Leiste. Höhen in svh: die kleine Fensterhöhe ändert
   sich nicht, wenn am Handy die Browserleiste ein- oder ausfährt.
   Scrollweg: 200 svh für drei Kapitel. */
.story-media img { box-shadow: none; will-change: auto; }
.story-frame { will-change: auto; }
.story-progress i { transition: background-color .3s var(--m-ui); }
/* Fortschritt als drei Balken, die sich mit dem Scrollweg füllen. script.js
   legt die Füllung <b> an und setzt .hat-balken; ohne sie bleiben die Punkte. */
html.motion .story.hat-balken .story-progress { gap: 6px; }
html.motion .story.hat-balken .story-progress i,
html.motion .story.hat-balken .story-progress i.on { width: 36px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .22); transition: none; }
html.motion .story.hat-balken .story-progress b { display: block; width: 100%; height: 100%; background: var(--on-black); transform-origin: 0 50%; transform: scaleX(0); }

html.motion .story { height: calc(300vh - var(--nav-h)); height: calc(300svh - var(--nav-h)); }
html.motion .story-pin { top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); }
html.motion .story-frame { opacity: 1; }
/* Bildwechsel nur mit transform: .story-media ist der feste Rahmen und
   schneidet ab. Darin fährt die Hülle .story-wipe (legt script.js um das Foto)
   von unten herein, das Foto wird in ihr gegenläufig verschoben und steht
   dadurch still. Die Rundung sitzt an Rahmen und Hülle, nicht mehr am Foto. */
html.motion .story-media { overflow: hidden; border-radius: 28px; isolation: isolate; }
html.motion .story-wipe { display: block; overflow: hidden; border-radius: inherit; }
html.motion .story-media img { border-radius: 0; backface-visibility: hidden; }
html.motion .story.is-near .story-wipe,
html.motion .story.is-near .story-media img { will-change: transform; }
html.motion .story.is-near .story-copy > * { will-change: opacity, transform; }
html.motion .story.is-near .story-progress b { will-change: transform; }

/* ---------- Statement: Wortfüllung (Scrollweg 100 svh) ---------- */
.fill .w { will-change: auto; }
html.motion .fillstage.is-near .fill .w { will-change: opacity; }
/* Die Unterschrift hängt am Scrollweg (script.js), nicht an einer Transition. */
html.motion .fill-pin .fill-sign.fade,
html.motion .fill-pin .fill-sign.fade.is-visible { transition: none; }
html.motion .fillstage.is-near .fill-sign { will-change: opacity, transform; }
html.motion .fillstage { height: calc(200vh - var(--nav-h)); height: calc(200svh - var(--nav-h)); }
html.motion .fill-pin { top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); }

/* Handy: Die Fotos der drei Kapitel müssen deckungsgleich liegen, damit sie
   ineinander blenden können. Darum beginnt jedes Kapitel an derselben
   Oberkante, statt sich nach seiner Textlänge zu mitteln. */
@media (max-width: 734px) {
  html.motion .story-frame {
    align-content: start;
    padding-top: max(24px, calc((100vh - var(--nav-h) - 500px) / 2));
    padding-top: max(24px, calc((100svh - var(--nav-h) - 500px) / 2));
  }
  html.motion .story-media { border-radius: 22px; }
}

/* ---------- Terrasse: Bühne und driftende Fotos (abschnitte.js) ----------
   Die Zeilen im Bild kommen nacheinander und liegen deshalb in derselben
   Rasterzelle. .is-folge und .hat-drift setzt abschnitte.js. */
.zoom.is-live.is-folge .zoom-facts li { grid-area: 1 / 1; align-self: end; }
.zoom.is-live.is-near .zoom-facts li { will-change: opacity, transform; }
.zoom.is-live.is-near .zoom-scrim { will-change: opacity; }
.stimme-bild.hat-drift { overflow: hidden; }
.stimme-bild.hat-drift img { transform: scale(1.16); }

/* ---------- Gäste: einmalig beim Sichtbarwerden (abschnitte.js) ----------
   .zaehlt und .kask setzt erst das Skript: ohne sie stehen Balken und Zeilen
   einfach da. .is-in löst aus, .sofort heißt ohne Übergang. */
@media (prefers-reduced-motion: no-preference) {
  /* Balken wachsen nacheinander (140 ms Versatz), die Zahl blendet mit ihrem Balken ein */
  html.js .wert-verteilung.fade .balken.zaehlt li .balken-spur i { transform: scaleX(0); transition: none; }
  html.js .wert-verteilung.fade .balken.zaehlt li .balken-n { opacity: 0; }
  html.js .wert-verteilung.fade .balken.zaehlt.is-in li .balken-spur i {
    transform: none; transition: transform .9s cubic-bezier(.22, .7, .2, 1); transition-delay: calc(var(--i, 0) * 140ms);
  }
  html.js .wert-verteilung.fade .balken.zaehlt.is-in li .balken-n {
    opacity: 1; transition: opacity .5s var(--m-ui); transition-delay: calc(var(--i, 0) * 140ms + 350ms);
  }
  /* Kaskade: Zeilen steigen 14 px, 110 ms Versatz */
  .kask .kask-i { opacity: 0; transform: translate3d(0, 14px, 0); }
  .kask.is-in .kask-i {
    opacity: 1; transform: none;
    transition: opacity .6s var(--m-ui), transform .6s cubic-bezier(.22, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms);
  }
  html.js .wert-verteilung.fade .balken.zaehlt.is-in.sofort li .balken-spur i,
  html.js .wert-verteilung.fade .balken.zaehlt.is-in.sofort li .balken-n,
  .kask.is-in.sofort .kask-i { transition: none; }
}

/* ---------- Galerie ---------- */
.card-media img { transition: none; }
.card:hover .card-media img { transform: none; }
.paddle { transition: background-color .24s var(--m-ui), opacity .24s var(--m-ui); }
.paddle[disabled] { opacity: .42; }

/* ---------- Bedienelemente ---------- */
.btn { transition: background-color .24s var(--m-ui); }
.phone-fab { transition: transform .32s var(--m-ui), opacity .32s var(--m-ui); }

@media (prefers-reduced-motion: reduce) {
  .paddle, .btn, .phone-fab, .story-progress i { transition: none; }
}

/* ---------- Hero: alle fünf Sekunden zieht ein Lichtstreif über Wortmarke und Schlagzeile ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark { position: relative; overflow: hidden; }
  .hero-mark::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-110%); animation: streif-marke 5s cubic-bezier(.4, 0, .6, 1) infinite;
  }
  .hero-headline span {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%), linear-gradient(var(--on-black), var(--on-black));
    background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    text-shadow: none; animation: streif-text 5s cubic-bezier(.4, 0, .6, 1) infinite; animation-delay: .25s;
  }
  .hero-headline span.grad {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%), linear-gradient(90deg, #f7dfa0, #e0b25a 48%, #c9902c);
    animation-delay: .5s;
  }
  @keyframes streif-marke { 0%, 2% { transform: translateX(-110%); } 52%, 100% { transform: translateX(110%); } }
  @keyframes streif-text { 0%, 2% { background-position: 160% 0, 0 0; } 52%, 100% { background-position: -60% 0, 0 0; } }
}

/* Handy: Schrift im Hero mittig, waagrecht wie senkrecht */
@media (max-width: 734px) {
  .hero-inner { align-content: center; justify-items: center; text-align: center; padding: 48px 6.25% 64px; }
  .hero-headline, .hero-sub, .hero-eyebrow { width: 100%; text-align: center; }
  .hero-mark { margin-left: auto; margin-right: auto; }
}