/* ---------------------------------------------------------------------------
   DH Motion — Einblendungen
   Grundregel: Versteckt wird ausschliesslich, wenn das Skript laeuft und sich
   zugetraut hat, auch wieder aufzudecken. Es setzt dafuer die Klasse dhm-an auf
   <html>. Ohne Skript, bei einem Fehler im Skript, beim Drucken und wenn der
   Rechner auf "weniger Bewegung" steht ist jede Regel hier wirkungslos und die
   Seite steht ganz normal da. Eine Seite, die wegen einer Animation leer bleibt,
   ist der eine Fehler, den es hier nicht geben darf.
   --------------------------------------------------------------------------- */

:root {
	--dhm-weg: 14px;            /* Strecke, die ein Block von unten kommt */
	--dhm-weg-wort: 0.5em;      /* dasselbe fuer eine Textzeile */
	--dhm-dauer: 0.7s;
	--dhm-dauer-wort: 0.6s;
	--dhm-takt: 90ms;           /* Versatz zwischen Nachbarn in einer Reihe */
	--dhm-takt-zeile: 55ms;     /* Versatz von Zeile zu Zeile */
	--dhm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Bloecke (Bilder, Formulare, ganze Spalten) --- */
.dhm-block {
	transition: opacity var(--dhm-dauer) var(--dhm-ease), transform var(--dhm-dauer) var(--dhm-ease);
	transition-delay: var(--dhm-verzug, 0ms);
}
html.dhm-an .dhm-block:not(.dhm-da) {
	opacity: 0;
	transform: translate3d(0, var(--dhm-weg), 0);
}

/* --- Text, Zeile fuer Zeile ---
   Jedes Wort ist ein eigenes Kaestchen und kennt seine Zeilennummer. Der Versatz
   ergibt sich aus der Zeile, nicht aus dem Wort - sonst liefe die Zeile von links
   nach rechts auf statt als Ganzes. */
.dhm-wort {
	display: inline-block;
	/* Ein Wort ist jetzt ein eigenes Kaestchen. Ohne diese drei Zeilen bricht der
	   Browser im Zweifel INNERHALB des Kaestchens um - aus "from" wurde "f / rom".
	   Die Zeilenumbrueche sollen genau dort bleiben, wo sie vorher waren. */
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	transition: opacity var(--dhm-dauer-wort) var(--dhm-ease), transform var(--dhm-dauer-wort) var(--dhm-ease);
	transition-delay: calc(var(--dhm-zeile, 0) * var(--dhm-takt-zeile) + var(--dhm-verzug, 0ms));
}
html.dhm-an .dhm-text:not(.dhm-da) .dhm-wort {
	opacity: 0;
	transform: translate3d(0, var(--dhm-weg-wort), 0);
}
/* Verlinkte Woerter bleiben ein Stueck, damit die Unterstreichung nicht zerfaellt.
   Mehrwortige Links bekommen gar keine Klasse (siehe dh-motion.js) - sie wuerden als
   Kaestchen nicht sauber umbrechen. */
a.dhm-wort { text-decoration: inherit; }

/* --- Ausnahmen --- */
@media print {
	.dhm-block, .dhm-wort { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.dhm-block, .dhm-wort { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Weiches Scrollen (Lenis) ---
   Die Regel ".lenis.lenis-smooth iframe { pointer-events: none }" aus dem Original
   fehlt hier mit Absicht: sie wuerde die eingebetteten Vimeo-Filme unbedienbar machen.
   Siehe LIESMICH-lenis.txt. */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped { overflow: hidden; }