/* ============================================================
   AvB Scroll-Effekte (additiv)
   Greift nur, wenn assets/scroll-fx.js die fx-Klassen setzt.
   Ohne JavaScript oder bei "Bewegung reduzieren" bleibt alles
   exakt wie bisher.
   ============================================================ */

/* ---------- Bühne: Bereich hält an, Inhalte bauen sich auf ---------- */
.fx-pin > .container{position:sticky; top:90px;}

/* Kacheln: verborgen bis "fx-in" (gilt auch, wenn das alte .reveal schon .in gesetzt hat) */
.fx-card:not(.fx-soft),
.fx-card.reveal.in:not(.fx-soft){
  opacity:0; transform:translateY(38px) scale(.97);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1),
             border-color 1.2s ease, box-shadow .2s ease;}
.fx-card:not(.fx-soft):not([style*="border-color"]){border-color:var(--gold-line);}
.fx-card.fx-in:not(.fx-soft),
.fx-card.reveal.in.fx-in:not(.fx-soft){opacity:1; transform:none; border-color:var(--border);}
.fx-card.fx-in:not(.fx-soft):hover,
.fx-card.reveal.in.fx-in:not(.fx-soft):hover{transform:translateY(-2px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1), outline-color .6s ease, --l .6s cubic-bezier(.2,.7,.2,1);}

/* Werte-Raster: Zelle bleibt stehen, nur der Inhalt läuft ein */
.fx-card.fx-soft > *{opacity:0; transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.fx-card.fx-soft.fx-in > *{opacity:1; transform:none;}
.fx-card.fx-soft.fx-in > h4{transition-delay:.08s;}
.fx-card.fx-soft.fx-in > p{transition-delay:.16s;}

/* Rauten-Symbol dreht sich beim Erscheinen ein */
.fx-card .ico{display:inline-block; transition:transform 1s cubic-bezier(.2,.8,.2,1) .15s, opacity .8s ease;}
.fx-card:not(.fx-in) .ico{transform:rotate(-135deg) scale(.4);}

/* ---------- Zeitstrahl (Das Haus) ---------- */
.fx-tl-flow .tl{padding-bottom:clamp(30px,12vh,110px);}
.fx-tl-flow .tl:last-child{padding-bottom:30px;}
.fx-tl-fill{position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--gold);
  transform-origin:top; transform:scaleY(0); pointer-events:none;}
.fx-tl-ball{position:absolute; left:7.5px; top:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; z-index:2; pointer-events:none; will-change:transform;
  background:radial-gradient(circle at 34% 30%, #f6ecd2 0, #d9c497 28%, var(--gold) 62%, #6c5833 100%);
  box-shadow:0 0 0 5px rgba(160,138,91,.14), 0 3px 10px rgba(108,88,51,.35), 0 0 20px rgba(194,173,130,.55);}
.fx-tl .tl::before{transition:background .45s ease, box-shadow .45s ease;}
.fx-tl .tl.fx-on::before{background:var(--gold); box-shadow:inset 0 0 0 3px var(--creme);}
.fx-tl .tl::after{content:""; position:absolute; left:0; top:5px; width:15px; height:15px;
  border-radius:50%; border:1.5px solid var(--gold); opacity:0; pointer-events:none;}
.fx-tl .tl.fx-on::after{animation:fxRipple 1.1s ease-out 1;}
@keyframes fxRipple{0%{transform:scale(1); opacity:.75;} 100%{transform:scale(2.6); opacity:0;}}
.fx-tl .tl > *{opacity:.15; transform:translateX(22px); transition:opacity .5s ease, transform .5s ease;}
.fx-tl .tl.fx-on > *{opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);}
.fx-tl .tl.fx-on > h4{transition-delay:.08s;}
.fx-tl .tl.fx-on > p{transition-delay:.16s;}

/* ---------- Plattform: Zahl läuft hoch, Balken wachsen (Startseite) ---------- */
.fx-mock .mock .big{font-variant-numeric:tabular-nums;}
.fx-mock .platform-list li{opacity:0; transform:translateX(-14px);}
.fx-mock.fx-play .platform-list li{opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.fx-mock.fx-play .platform-list li:nth-child(2){transition-delay:.2s;}
.fx-mock.fx-play .platform-list li:nth-child(3){transition-delay:.4s;}
.fx-mock .mock .bars span{transform:scaleY(0); transform-origin:bottom;}
.fx-mock.fx-play .mock .bars span{transform:scaleY(1); transition:transform 1s cubic-bezier(.2,.85,.25,1) .35s;}
.fx-mock.fx-play .mock .bars span:nth-child(2){transition-delay:.49s;}
.fx-mock.fx-play .mock .bars span:nth-child(3){transition-delay:.63s;}
.fx-mock.fx-play .mock .bars span:nth-child(4){transition-delay:.77s;}
.fx-mock.fx-play .mock .bars span:nth-child(5){transition-delay:.91s;}
.fx-mock.fx-play .mock .bars span:nth-child(6){transition-delay:1.05s;}
.fx-mock .mock .pill,
.fx-mock .mock .mini{opacity:0;}
.fx-mock.fx-play .mock .pill,
.fx-mock.fx-play .mock .mini{opacity:1; transition:opacity .7s ease 1.5s;}
.fx-mock.fx-play .mock .mini + .mini{transition-delay:1.65s;}