/* ============================================================
   Datei:        assets/css/shared/animationen.css
   Seite:        alle Seiten
   Zweck:        Gemeinsame Keyframes, Einblenden beim Scrollen, Seitenübergang
   Abhängig von: assets/css/shared/variablen.css
   Genutzt von:  alle HTML-Seiten (Klassen setzen einblenden.js und seitenuebergang.js)
   ============================================================ */

/* --- 1. Keyframes --- */
@keyframes karte-ein {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes karte-aufleuchten {
  0%,
  100% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }
}

@keyframes seite-ein {
  from {
    opacity: 0;
  }
}

/* --- 2. Einblenden beim Scrollen (nur mit JavaScript, einmalig pro Element) --- */
.js-aktiv [data-einblenden] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dauer-lang) var(--ease), transform var(--dauer-lang) var(--ease);
  transition-delay: calc(var(--einblenden-nr, 0) * 80ms);
}

.js-aktiv [data-einblenden].ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* --- 3. Seitenübergang: kurzes Einblenden beim Laden, Ausblenden beim Verlassen --- */
.seite > main {
  animation: seite-ein var(--dauer-mittel) ease-out;
}

.seite {
  transition: opacity var(--dauer-kurz) ease-in;
}

.seite--verlassen {
  opacity: 0;
}