/* v4 Scroll-Erlebnis: je Abschnitt ein anderer kleiner Reiz. Nur transform/opacity/clip (kein CLS). Aktiv nur mit JS + ohne reduced motion (html.sz). */
.sz [data-sz]{--e:cubic-bezier(.2,.8,.2,1)}
/* 1 Wort-für-Wort (Überschriften) */
.sz .sz-w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px);transition:opacity .6s var(--e),transform .6s var(--e),filter .6s var(--e);transition-delay:calc(var(--k)*70ms)}
.sz .sz-an .sz-w{opacity:1;transform:none;filter:none}
/* 2 Unterstrich zeichnet sich (em in h2) */
.sz [data-sz~="strich"] em{background-image:linear-gradient(90deg,var(--orange),var(--blau));background-repeat:no-repeat;background-position:0 92%;background-size:0 .08em;transition:background-size .9s var(--e) .5s}
.sz [data-sz~="strich"].sz-an em{background-size:100% .08em}
/* 3 Karten: Pop + Lichtblitz-Streifen */
.sz [data-sz~="karte"]{position:relative;overflow:hidden}
.sz [data-sz~="karte"]::after{content:"";position:absolute;inset:-20% auto -20% 0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-150%) skewX(-12deg);pointer-events:none}
.sz [data-sz~="karte"].sz-an::after{animation:sz-blitz 1.1s var(--e) calc(var(--i,0)*140ms + .35s) both}
.sz .zeile.reveal{transform:translateY(28px) scale(.96)}
.sz .zeile.reveal.an{transform:none}
@keyframes sz-blitz{to{transform:translateX(380%) skewX(-12deg)}}
/* 4 Radar: Punkte leuchten nacheinander, Ping-Blitz */
.sz [data-sz~="schritte"] li{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s var(--e);transition-delay:calc(var(--k)*320ms + .2s)}
.sz [data-sz~="schritte"].sz-an li{opacity:1;transform:none}
.sz [data-sz~="schritte"].sz-an li::marker{color:var(--orange)}
.sz .sweep-svg.sz-an{animation:sz-ping 1.4s ease-out .2s}
@keyframes sz-ping{0%{filter:drop-shadow(0 0 0 rgba(91,155,255,0))}35%{filter:drop-shadow(0 0 26px rgba(91,155,255,.75))}100%{filter:drop-shadow(0 0 0 rgba(91,155,255,0))}}
/* 5 Fragen: abwechselnd von links/rechts */
.sz [data-sz~="seite"]{opacity:0;transform:translateX(calc(var(--s)*28px));transition:opacity .6s var(--e),transform .6s var(--e);transition-delay:calc(var(--k)*90ms)}
.sz [data-sz~="seite"].sz-an{opacity:1;transform:none}
/* 6 Kontaktkarte: Glow-Puls + Akzent-Wischer */
.sz [data-sz~="puls"].sz-an{animation:sz-puls 1.6s ease-out .2s}
@keyframes sz-puls{0%{box-shadow:0 0 0 0 rgba(232,103,58,0)}30%{box-shadow:0 0 0 6px rgba(232,103,58,.35),0 0 60px 10px rgba(91,155,255,.3)}100%{box-shadow:0 0 0 0 rgba(232,103,58,0)}}
.sz [data-sz~="wisch"]{position:relative;isolation:isolate}
.sz [data-sz~="wisch"]::before{content:"";position:absolute;inset:-.05em -.15em;background:linear-gradient(90deg,var(--orange),var(--blau));transform:scaleX(0);transform-origin:left;z-index:-1;border-radius:.15em;opacity:.9}
.sz [data-sz~="wisch"].sz-an::before{animation:sz-wisch 1s var(--e) .6s both}
@keyframes sz-wisch{50%{transform:scaleX(1);transform-origin:left}50.1%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* 7 Statement fertig gelesen: kurzer Schimmer */
.sz #statement.sz-voll{animation:sz-schimmer 1.2s ease-out}
@keyframes sz-schimmer{40%{text-shadow:0 0 24px rgba(91,155,255,.55)}}
/* Mikro-Interaktion: Tap/Hover-Feedback */
.sz .btn:active,.sz .chips a:active,.sz .frage summary:active{transform:scale(.97)}
.sz .frage summary{transition:transform .15s ease}