/**
 * Bewegung: Scroll-Reveal, Parallax, Lesefortschritt.
 *
 * Grundsatz: Ohne JavaScript ist alles sichtbar. Die Reveal-Klassen
 * werden erst von cz-effekte.js gesetzt (Klasse cz-js am <html>),
 * damit kein Inhalt haengen bleibt, wenn das Skript nicht laeuft.
 */

/* --- Scroll-Reveal ---------------------------------------------------
   Nur aktiv, wenn JS gelaufen ist. */
.cz-js .cz-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity var(--cz-dauer-lang) var(--cz-easing),
		transform var(--cz-dauer-lang) var(--cz-easing);
	will-change: opacity, transform;
}

.cz-js .cz-reveal.cz-sichtbar {
	opacity: 1;
	transform: none;
}

/* Gestaffelt: Kinder laufen nacheinander ein. */
.cz-js .cz-reveal-gruppe > * {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--cz-dauer-lang) var(--cz-easing),
		transform var(--cz-dauer-lang) var(--cz-easing);
}

.cz-js .cz-reveal-gruppe.cz-sichtbar > * {
	opacity: 1;
	transform: none;
}

.cz-js .cz-reveal-gruppe.cz-sichtbar > *:nth-child(1) { transition-delay: 0ms; }
.cz-js .cz-reveal-gruppe.cz-sichtbar > *:nth-child(2) { transition-delay: 90ms; }
.cz-js .cz-reveal-gruppe.cz-sichtbar > *:nth-child(3) { transition-delay: 180ms; }
.cz-js .cz-reveal-gruppe.cz-sichtbar > *:nth-child(4) { transition-delay: 270ms; }
.cz-js .cz-reveal-gruppe.cz-sichtbar > *:nth-child(5) { transition-delay: 360ms; }
.cz-js .cz-reveal-gruppe.cz-sichtbar > *:nth-child(n + 6) { transition-delay: 450ms; }

/* --- Lesefortschritt -------------------------------------------------- */
.cz-lesefortschritt {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--cz-verlauf-orange);
	pointer-events: none;
}

.admin-bar .cz-lesefortschritt {
	top: 32px;
}

/* --- Zum Seitenanfang ------------------------------------------------- */
.cz-nach-oben {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	box-shadow: var(--cz-schatten-m);
	transition:
		opacity var(--cz-dauer) var(--cz-easing),
		transform var(--cz-dauer) var(--cz-easing),
		visibility var(--cz-dauer);
}

.cz-nach-oben.cz-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cz-nach-oben:hover {
	transform: translateY(-3px);
}

/* =====================================================================
   Bewegung reduzieren
   Ein Schalter, der alles Aufwendige stilllegt.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cz-js .cz-reveal,
	.cz-js .cz-reveal-gruppe > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.cz-banner__bild {
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}