/* SCROLL-ANIMATIONEN – jede Wirkung hängt an einer Klasse auf <html> (an/aus einzeln möglich):
   anim-zoom        Fotos zoomen beim Erscheinen sanft aus der Nähe auf ihre Größe
   anim-parallax    Titelbild und Galerie-Fotos bewegen sich beim Scrollen leicht langsamer (Tiefe)
   anim-text        Überschriften gleiten Wort für Wort herein, Kapitel-Linien wachsen
   anim-staffel     Karten und Listen erscheinen nacheinander statt alle gleichzeitig
   anim-fortschritt orangene Linie oben zeigt, wie weit man gescrollt hat
   Alles spielt auch beim Hochscrollen wieder ab (was unten aus dem Bild läuft, wird zurückgesetzt).
   Bei „Bewegung reduzieren“ im Gerät ist alles aus. */

/* Zoom: Foto startet etwas größer und setzt sich */
.anim-zoom .sa-bild img{transform:scale(1.18);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.anim-zoom .sa-bild.sichtbar img{transform:scale(1)}
.anim-zoom .sa-bild{overflow:hidden}

/* Parallax: Bild innen etwas größer, damit beim Verschieben kein Rand sichtbar wird */
.anim-parallax .sa-para{overflow:hidden}
.anim-parallax .sa-para img{will-change:transform}
.anim-parallax .item .sa-para img{scale:1.12}
.anim-parallax .item picture{display:block;overflow:hidden}

/* Text: Wörter gleiten von unten herein */
.anim-text .sa-wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.anim-text .sa-wort > span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--w, 0) * 70ms)}
.anim-text .sa-text.sichtbar .sa-wort > span{transform:none}
/* Kapitel-Linie wächst von links */
.anim-text .mitte h2.kapitel::after{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.7,0,.2,1) .2s}
.anim-text .mitte h2.kapitel.sichtbar::after{transform:scaleX(1)}

/* Staffel: Elemente nacheinander */
.anim-staffel .sa-staffel{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i, 0) * 120ms)}
.anim-staffel .sa-staffel.sichtbar{opacity:1;transform:none}

/* Fortschritts-Linie oben */
.sa-fortschritt{display:none}
.anim-fortschritt .sa-fortschritt{display:block;position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;background:var(--akzent,#e2784e);transform-origin:left;transform:scaleX(var(--p, 0));pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .sa-bild img,.sa-wort > span,.sa-staffel,.mitte h2.kapitel::after{transform:none!important;opacity:1!important;transition:none!important}
  .sa-para img{transform:none!important;scale:1!important}
}