/* Media Agent – Effekte (gehört zu /assets/fx.js). Ohne JS oder bei reduzierter Bewegung: statisch. */

/* Wörter-Intro */
.fx-on [data-fx-words] .fx-w,.fx-on [data-fx-words] .fx-w>span{color:inherit}
.fx-on [data-fx-words] .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.fx-on [data-fx-words] .fx-w>span{display:inline-block;transform:translateY(110%);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.fx-on [data-fx-words].fx-words-in .fx-w>span{transform:none}

/* Parallax (eigene translate-Eigenschaft, kollidiert nicht mit transform-Animationen) */
.fx-on [data-fx-parallax]{translate:0 var(--fx-y,0px);will-change:translate}

/* Karten fächern beim Reinscrollen auf */
.fx-on [data-fx-fan]>*{
  --i:0;--r:0deg;
  translate:0 calc((1 - var(--fx-p,1)) * (50px + var(--i) * 45px));
  rotate:calc((1 - var(--fx-p,1)) * var(--r));
  opacity:calc(.25 + var(--fx-p,1) * .75);
  will-change:translate,rotate;
}
.fx-on [data-fx-fan]>:nth-child(1){--i:0;--r:-5deg}
.fx-on [data-fx-fan]>:nth-child(2){--i:1;--r:-2deg}
.fx-on [data-fx-fan]>:nth-child(3){--i:2;--r:2deg}
.fx-on [data-fx-fan]>:nth-child(4){--i:3;--r:5deg}
.fx-on [data-fx-fan]>:nth-child(n+5){--i:4;--r:6deg}

/* Laufband */
.fx-marquee{overflow:hidden;padding:clamp(18px,3vw,34px) 0;border-top:1px solid var(--line);background:var(--bg);user-select:none}
.fx-marquee-track{display:flex;width:max-content;translate:var(--fx-x,0px) 0;white-space:nowrap;will-change:translate;
  font-size:clamp(2.6rem,8vw,6.5rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.fx-marquee-track span{padding-right:.45em}
.fx-marquee-track span:nth-child(odd){color:transparent;-webkit-text-stroke:1.5px var(--line2)}
.fx-marquee-track span:nth-child(even){color:var(--text)}
.fx-marquee-track i{font-style:normal;color:var(--accent,#1d7fb5);padding-right:.45em}

/* Fortschrittslinie über dem Ablauf */
.fx-on [data-fx-line]{position:relative}
.fx-on [data-fx-line]::before,.fx-on [data-fx-line]::after{content:"";position:absolute;left:0;right:0;top:-22px;height:2px;border-radius:2px}
.fx-on [data-fx-line]::before{background:var(--line)}
.fx-on [data-fx-line]::after{background:var(--blue);transform:scaleX(var(--fx-p,0));transform-origin:left}

/* Gestaffeltes Einblenden in Rastern */
.fx-on :is(.why-grid,.prices,.steps,.incl-grid,.safe,.quotes-static,.grid-3)>.reveal:nth-child(2){transition-delay:.08s}
.fx-on :is(.why-grid,.prices,.steps,.incl-grid,.safe,.quotes-static,.grid-3)>.reveal:nth-child(3){transition-delay:.16s}
.fx-on :is(.why-grid,.prices,.steps,.incl-grid,.safe,.quotes-static,.grid-3)>.reveal:nth-child(4){transition-delay:.24s}
.fx-on :is(.why-grid,.prices,.steps,.incl-grid,.safe,.quotes-static,.grid-3)>.reveal:nth-child(5){transition-delay:.32s}
.fx-on :is(.why-grid,.prices,.steps,.incl-grid,.safe,.quotes-static,.grid-3)>.reveal:nth-child(6){transition-delay:.4s}