/*
 * Einblend-Effekte. Versteckt wird nur, wenn effekte.js die Klasse js-effekte gesetzt hat;
 * ohne Skript oder bei „Bewegung reduzieren“ steht alles sofort sichtbar da.
 */

.js-effekte [data-zeigen] {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.9s var(--weich), transform 1s var(--weich);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.js-effekte [data-zeigen="links"] {
	transform: translateX(-64px);
}

.js-effekte [data-zeigen="rechts"] {
	transform: translateX(64px);
}

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

.js-effekte .rubrik[data-zeigen] {
	transform: translateY(48px) scale(0.96);
}

.js-effekte .rubrik[data-zeigen].ist-sichtbar {
	transform: none;
}

[data-schweben] {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.start {
		height: auto;
	}

	.start__buehne {
		position: relative;
		min-height: 100vh;
	}

	.start__abschluss {
		opacity: 1;
	}

}