/* Sanftes Einschweben der Homepage-Inhalte beim Einscrollen ("schoenes
   Scrollytelling", Autor-Wunsch). Eigene, nur von den zwei Startseiten
   eingebundene Datei (gleiches Muster wie hero-scroll.css) - eigenstaendig
   von der Sticky-Hero-Mechanik, damit beide Konzepte unabhaengig
   voneinander bleiben. --reveal-i steuert eine leichte Staffelung
   zwischen mehreren Elementen derselben Gruppe (Karten-Reihe etc.),
   wird von scroll-reveal.js pro Element gesetzt. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* PFLICHT-Fallback: ohne Bewegungswunsch sofort sichtbar, keine
   Verzoegerung/Bewegung. scroll-reveal.js prueft dasselbe und ueberspringt
   die Beobachtung gleich ganz - diese Regel greift zusaetzlich, falls CSS
   vor JS geladen wird. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}