/* Einheitliches Einblenden (js/einblenden.js): jede Kategorie hat genau eine Bewegung, auf allen Seiten gleich.
   H1: steigt 28 px auf. H2: steigt 22 px auf. Stichwort: 10 px. Text: 16 px. Karten: 36 px. Bilder: steigen und wachsen leicht.
   Dauer und Kurve sind fuer alle gleich, nur der Takt (Verzoegerung) folgt der Kategorie. */
:root { --ein-kurve: cubic-bezier(.22, 1, .36, 1); --ein-dauer: .9s; }

/* Seitenkopf bis zum Start unsichtbar, damit nichts aufblitzt */
html.mal:not(.ein-an) .kopf13 > .wrap > div > *, html.mal:not(.ein-an) .kopf13 .bild { opacity: 0; }

/* alte Einzel-Effekte stilllegen, damit nicht zwei Bewegungen uebereinander laufen */
html.ein-an .auf { animation: none !important; opacity: 1 !important; transform: none !important; }
html.ein-an [data-rein]:not([data-ein]) { opacity: 1 !important; transform: none !important; }
html.ein-an .r:not([data-ein]) { opacity: 1 !important; transform: none !important; }

[data-ein] { --ein-von: translate3d(0, 20px, 0); }
[data-ein="h1"] { --ein-von: translate3d(0, 28px, 0); }
[data-ein="h2"] { --ein-von: translate3d(0, 22px, 0); }
[data-ein="label"] { --ein-von: translate3d(0, 10px, 0); }
[data-ein="text"] { --ein-von: translate3d(0, 16px, 0); }
[data-ein="karte"] { --ein-von: translate3d(0, 36px, 0); }
[data-ein="bild"] { --ein-von: translate3d(0, 24px, 0) scale(.97); }

html.ein-an [data-ein]:not(.ein-da) { opacity: 0 !important; transform: var(--ein-von) !important; transition: none !important; }
html.ein-an [data-ein].ein-da { opacity: 1 !important; transform: none !important;
  transition: opacity calc(var(--ein-dauer) * .8) ease var(--ein-v, 0s), transform var(--ein-dauer) var(--ein-kurve) var(--ein-v, 0s) !important; }

@media (prefers-reduced-motion: reduce) {
  html.ein-an [data-ein] { opacity: 1 !important; transform: none !important; transition: none !important; }
}