/* Wertige Effekte (inspiriert von apple.com). Nur Transparenz, Position, Ausschnitt; kein Festhalten des Scrollens.
   Aktiv nur mit Skript und ohne „Bewegung reduzieren“ (Klassen fx-* am html-Element). */

/* ===== Stufe 1 ===== */
html.fx-reveal .fx-r{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--fx-i,0) * 80ms)}
html.fx-reveal .fx-r.fx-in{opacity:1;transform:none}
.fx-hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.fx-hw>span{display:inline-block}
html.fx-heroWords .fx-hw>span{transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--fx-i,0) * 90ms + 120ms)}
html.fx-heroWords.fx-ready .fx-hw>span{transform:none}
html.fx-words .fx-word{opacity:.14;transition:opacity .3s ease}
html.fx-words .fx-word.on{opacity:1}
html.fx-gradient .ethos-dl .dl-h1--page,html.fx-gradient .ethos-dl .dl-cta-title,html.fx-gradient .ethos-dl .dl-split-title{
  background:linear-gradient(100deg,#1E2226 0%,#1E2226 40%,#6B7C8A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html.fx-wipe .fx-w{clip-path:inset(0 calc(100% - 1px) 0 0);transition:clip-path .75s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--fx-i,0) * 90ms)}
html.fx-wipe .fx-w.fx-in{clip-path:inset(0 0 0 0)}
html.fx-kenburns .ethos-pa .pa-slide.is-active img{animation:fx-kb 9s ease-out both}
@keyframes fx-kb{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ===== Stufe 2: Ethos ===== */
/* Hero zieht sich beim Scrollen zurück, die Kacheln wachsen ins Bild */
html.fx-heroScroll .ethos-dl .dl-hero .dl-h1{transform:translateY(calc(var(--fx-hp,0) * -60px)) scale(calc(1 - var(--fx-hp,0) * .14));opacity:calc(1 - var(--fx-hp,0) * .9);transform-origin:50% 100%;will-change:transform,opacity}
html.fx-heroScroll .ethos-dl .dl-tiles{transform:translateY(calc((1 - var(--fx-tp,1)) * 60px)) scale(calc(.9 + var(--fx-tp,1) * .1));transform-origin:50% 0;will-change:transform}
/* Aussage bleibt stehen, während sie Wort für Wort hell wird */
.fx-pin-inner{display:contents}
html.fx-pin .ethos-dl .dl-section--statement.fx-pinned{min-height:230vh;justify-content:flex-start}
html.fx-pin .ethos-dl .dl-section--statement.fx-pinned .fx-pin-inner{display:flex;flex-direction:column;align-items:center;gap:28px;position:sticky;top:calc(50vh - 120px)}
html.fx-pin .ethos-dl .fx-pinned .dl-pills{opacity:var(--fx-pills,1);transform:translateY(calc((1 - var(--fx-pills,1)) * 20px));transition:opacity .4s,transform .4s}
/* Lichtkreise folgen der Maus */
html.fx-auraMouse .ethos-dl .dl-aura{transform:translate3d(var(--fx-ax,0px),var(--fx-ay,0px),0)}

/* ===== Stufe 2: Pathos ===== */
/* Header: Bild zoomt beim Scrollen, Balken fahren nach links raus */
html.fx-heroScrollPa .ethos-pa .pa-hero-slides{transform:scale(calc(1 + var(--fx-hp,0) * .14));transform-origin:62% 40%;will-change:transform}
html.fx-heroScrollPa .ethos-pa .pa-hero-head{transform:translateX(calc(var(--fx-hp,0) * -160px));opacity:calc(1 - var(--fx-hp,0) * 1.2)}
/* Podest baut sich beim Scrollen auf */
html.fx-podium .ethos-pa .pa-step.fx-w{clip-path:none}
html.fx-podium .ethos-pa .pa-step .pa-step-text{clip-path:inset(0 calc((1 - var(--fx-sp,1)) * 100%) 0 0)}
/* Positionsnummern klappen auf wie eine Anzeigetafel */
html.fx-flip .fx-f{transform:perspective(500px) rotateX(-92deg);transform-origin:50% 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1.15);transition-delay:calc(var(--fx-i,0) * 110ms + 180ms)}
html.fx-flip .fx-f.fx-in{transform:none}

/* ===== Seitenwechsel ===== */
#fx-cover{position:fixed;inset:0;z-index:99999;pointer-events:none;display:flex;align-items:center;justify-content:center}
#fx-cover img{width:min(220px,40vw);height:auto;opacity:0;transition:opacity .3s .1s}
.ethos-dl #fx-cover{background:#F5F5F2;opacity:0;transition:opacity .45s ease}
.ethos-dl #fx-cover.on{opacity:1;pointer-events:auto}
.ethos-pa #fx-cover{background:#004221;transform:translateX(-101%);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.ethos-pa #fx-cover.on{transform:none;pointer-events:auto}
.ethos-pa #fx-cover.on img{opacity:1}
.ethos-pa #fx-cover.out{transform:translateX(101%)}
#fx-cover.notrans,#fx-cover.notrans img{transition:none!important}

@media (prefers-reduced-motion:reduce){
  html[class*="fx-"] .fx-r,html[class*="fx-"] .fx-w,html[class*="fx-"] .fx-f,html[class*="fx-"] .fx-hw>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html[class*="fx-"] .fx-word{opacity:1!important}
  html[class*="fx-"] .ethos-pa .pa-slide img{animation:none!important}
  #fx-cover{display:none!important}
}