/* =============================================================================
   Wanted Home – Inhaltsseiten (ab 0.8.0)
   Scroll-Effekte für das Template „inhalt“ (Über uns, Standorte, News,
   Termine, Unterstützen, Spenden, Kontakt, Impressum, Datenschutz).
   Gestaltung „Bildkapitel“ (E33): Kopfbild öffnet sich, Kapitelkarten
   gleiten über stehende Bilder, Kacheln, Stationen und Zahlen steigen auf. Mechanik (--p, data-scroll, .bewegt): siehe wanted.css.
   Ohne .bewegt (kein JavaScript, „Bewegung reduzieren“) gilt der Endzustand.
   ============================================================================= */

@layer seiten {
  @media (prefers-reduced-motion: no-preference) {

    /* Kopfbild öffnet sich aus der Mitte und zoomt zurück */
    .bewegt .seitenkopf__rahmen[data-scroll] {
      --t: clamp(0, (var(--p) - 0.02) / 0.35, 1);
      clip-path: inset(0 calc((1 - var(--t)) * 6%));
    }
    .bewegt .seitenkopf__rahmen[data-scroll] img {
      transform: scale(calc(1.15 - var(--t) * 0.15));
    }

    /* Bildkapitel: Karte steigt über dem stehenden Bild auf */
    .bewegt .kapitel__huelle {
      --t: clamp(0, var(--p) / 0.18, 1);
      transform: translate3d(0, calc((1 - var(--t)) * 4rem + var(--versatz, 0%)), 0);
    }
    .bewegt .kapitel__huelle > * { opacity: var(--t); }
    .bewegt .zahlenband__liste li {
      --t: clamp(0, (var(--p) - 0.1) / 0.3, 1);
      opacity: var(--t);
      transform: translate3d(0, calc((1 - var(--t)) * 2rem), 0);
    }

    /* Kacheln und Stationen steigen auf */
    .bewegt .kachel,
    .bewegt .zeitleiste__station {
      --t: clamp(0, (var(--p) - 0.05) / 0.25, 1);
      opacity: var(--t);
      transform: translate3d(0, calc((1 - var(--t)) * 2.5rem), 0);
    }
  }
}