/* Motion-Schicht nach thedesignstack «Navigate Cinematic Hero».
   Look, Farben, Typografie und Layout bleiben 1:1 die Original-Seite. */
:root{
  --quart-out:cubic-bezier(.165,.84,.44,1);   /* GSAP power4.out */
  --cubic-out:cubic-bezier(.215,.61,.355,1);  /* GSAP power3.out */
  --quart-inout:cubic-bezier(.77,0,.175,1);   /* GSAP power4.inOut */
}

/* alte Einstiegs-Animationen der Original-Seite aus (werden von der Choreografie ersetzt) */
.hero-titel span,.hero-unter,.seiten-satz,.hero .quadrat,.hero .foto img{animation:none!important}

/* ---------- Loader (Zähler 00 → 100) ---------- */
.loader{position:fixed;inset:0;z-index:1000;background:var(--ton);overflow:hidden;will-change:transform}
.loader-count{position:absolute;right:var(--pad);bottom:calc(var(--pad) * .6);font-stretch:125%;font-weight:800;font-size:clamp(120px,22vw,360px);line-height:.8;letter-spacing:-.04em;color:var(--creme);font-variant-numeric:tabular-nums;white-space:nowrap}
.loader.is-done{transform:translateY(-100%);transition:transform 1.1s var(--quart-inout)}
.loader.is-gone{display:none}
html.is-loading{overflow:hidden}

/* ---------- Hero: gepinnt, nächste Sektion schiebt sich darüber ---------- */
html.motion .hero{position:sticky;top:0;z-index:0}
html.motion main > *:not(.hero){position:relative;z-index:2}
html.motion main > section:not(.auf-ton):not(.auf-ink){background:var(--creme)}
.hero-fade{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--ton-tief);opacity:0;will-change:opacity}

/* Buchstaben-Masken */
.ch,.hero-titel .ch,.chapter .ch{display:inline-block;overflow:hidden;vertical-align:bottom;will-change:transform}
.ch > i{display:inline-block;font-style:normal;will-change:transform;transform:translateY(110%)}
html.no-motion .ch > i{transform:none}
.is-in .ch > i{transform:translateY(0);transition:transform 1.4s var(--quart-out)}
.chapter.is-in .ch > i{transition-duration:1.2s}

/* Auftritt nach dem Loader (autoAlpha 0 / y 40 → 1 / 0) */
html.motion [data-reveal]{opacity:0;transform:translateY(40px);visibility:hidden}
html.motion.is-ready [data-reveal]{opacity:1;transform:none;visibility:visible;transition:opacity 1.6s var(--cubic-out),transform 1.6s var(--cubic-out),visibility 0s}
html.motion.is-ready.is-scrubbing [data-reveal]{transition:none}
html.motion .kopf{transition:background .3s,color .3s,opacity 1.6s var(--cubic-out),transform 1.6s var(--cubic-out)}

/* Scroll-Reveal der Sektionen: ruhiger, mit Stagger pro Gruppe */
.auf{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--cubic-out),transform 1.2s var(--cubic-out);transition-delay:var(--d,0s)}
.auf.da{opacity:1;transform:none}

/* Hover: eine Bewegung, sauberes Easing */
.knopf,.pfeil svg,.knopf svg,.galerie img,.partnerwand a,.paket{transition-timing-function:var(--cubic-out)}
.knopf svg,.pfeil svg{transition-duration:.45s}
.knopf{transition:background .35s var(--cubic-out),transform .45s var(--cubic-out)}
.knopf:hover{transform:translateY(-1px)}
.galerie img{transition:filter .7s var(--cubic-out),transform 1.2s var(--cubic-out)}
.galerie figure{overflow:hidden}
.galerie figure:hover img{transform:scale(1.04)}
.partnerwand a{transition:background .35s var(--cubic-out),color .35s var(--cubic-out)}
.nav a{transition:opacity .3s}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .ch > i{transform:none!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important;visibility:visible!important}
  .auf{opacity:1;transform:none}
  .hero-fade{display:none}
}