/* Mini-Animationen: dezent, ohne Bibliothek. Bei „Bewegung reduzieren“ im System komplett aus. */

/* 1) Hero beim Laden: Elemente bauen sich nacheinander auf (reines CSS, bleibt sichtbar, falls etwas fehlt) */
@keyframes mo-up { from { opacity:0; transform:translateY(26px) } to { opacity:1; transform:none } }
@keyframes mo-fade { from { opacity:0 } to { opacity:1 } }
@keyframes mo-grow { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes mo-photo { from { opacity:0; transform:translateY(30px) scale(.97) } to { opacity:1; transform:none } }

@media (prefers-reduced-motion: no-preference) {
  body { animation: mo-fade .45s ease both }
  :is(.hero,[class$="-hero"]) :is(.eyebrow,[class$="-k"],[class$="-kicker"]) { animation: mo-up .7s .05s cubic-bezier(.2,.7,.2,1) both }
  :is(.hero,[class$="-hero"]) h1 { animation: mo-up .85s .15s cubic-bezier(.2,.7,.2,1) both }
  :is(.hero,[class$="-hero"]) :is(p,[class$="-lead"]) { animation: mo-up .8s .3s cubic-bezier(.2,.7,.2,1) both }
  :is(.hero,[class$="-hero"]) :is(.actions,[class$="-actions"],[class$="-count"]) { animation: mo-up .8s .42s cubic-bezier(.2,.7,.2,1) both }
  .hero-photo { animation: mo-photo 1s .3s cubic-bezier(.2,.7,.2,1) both }
  .hero h1 .outline { animation: mo-fade 1.1s .55s both }
}

/* 2) Einblenden beim Scrollen */
.mo .rv { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); will-change:opacity,transform }
.mo .rv.in { opacity:1; transform:none }
.mo .rv.rv-done { transition-delay:0s; will-change:auto }

/* 3) Zielband-Linie am Anfang jedes Abschnitts */
.mo-host { position:relative }
.mo-finish { position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; z-index:3; overflow:hidden }
.mo-finish:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#e10600 0%,#e10600 45%,transparent 100%); transform:scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.2,.7,.2,1) }
.mo-finish.in:before { transform:scaleX(1) }
.mo-finish.in { opacity:.85 }

/* 4) Knöpfe und Karten */
.btn,.gts-btn,.gtt-btn,.gtm-btn,.gtr-btn,.gta-btn,.gte-btn,.gtc-submit { transition:transform .2s ease, box-shadow .25s ease, background-color .2s, border-color .2s, filter .2s }
.btn:hover,.gts-btn:hover,.gtt-btn:hover,.gtm-btn:hover,.gtr-btn:hover,.gta-btn:hover,.gte-btn:hover,.gtc-submit:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(225,6,0,.28) }
.btn:active,.gts-btn:active,.gtt-btn:active,.gtm-btn:active,.gtr-btn:active,.gta-btn:active,.gte-btn:active,.gtc-submit:active { transform:translateY(0); box-shadow:none }
.btn span,.gts-btn span,.gtt-btn span,.gtm-btn span,.gtr-btn span,.gta-btn span,.gte-btn span { display:inline-block; transition:transform .22s ease }
.btn:hover span,.gts-btn:hover span,.gtt-btn:hover span,.gtm-btn:hover span,.gtr-btn:hover span,.gta-btn:hover span,.gte-btn:hover span { transform:translateX(5px) }
.card,.next-card,.gts-card,.gtr-card,.gtt-product,.gtm-product,.gtm-value,.gta-item,.gtc-card { transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .75s ease }
.card:hover,.next-card:hover,.gts-card:hover,.gtr-card:hover,.gtt-product:hover,.gtm-product:hover,.gtm-value:hover,.gta-item:hover,.gtc-card:hover { transform:translateY(-4px); border-color:rgba(225,6,0,.65); box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 40px rgba(225,6,0,.08) }

/* Zahlen-Leiste: rote Linie läuft ein */
.mo .stat.rv .stat-num:after { transform:scaleX(0); transform-origin:left }
.mo .stat.rv.in .stat-num:after { animation: mo-grow .8s .35s cubic-bezier(.2,.7,.2,1) both }

@media (prefers-reduced-motion: reduce) {
  .rv,.mo-finish:before { transition:none!important; opacity:1!important; transform:none!important }
}