/**
 * dynamik.css – Bewegung in den Flaechen.
 *
 * Ziel: Die Seite soll nicht wie zwei flache Farbfelder wirken, sondern
 * atmen. Erreicht wird das mit drei Schichten, die alle rein dekorativ
 * sind (pointer-events: none, aria-hidden) und den Text nie beruehren:
 *
 *   1. AURORA   zwei sehr weiche Farbwolken, die langsam gegeneinander
 *               driften. Uebernimmt die Rolle des frueheren flachen
 *               Hintergrunds.
 *   2. RASEN    ein extrem subtiles Streifenmuster (Maehbahnen), das sich
 *               beim Scrollen minimal verschiebt.
 *   3. KOERNUNG feines Rauschen als SVG-Datenurl – nimmt der Flaeche das
 *               Digitale, kostet keinen zusaetzlichen Request.
 *
 * Das Hero-Video bleibt ausdruecklich unangetastet (.svk-hero).
 *
 * Performance: nur transform/opacity werden animiert (GPU, kein Layout),
 * will-change wird bewusst NICHT gesetzt, damit nicht dauerhaft Ebenen
 * gehalten werden. Bei prefers-reduced-motion stehen alle Schichten still.
 */

/* ---------------------------------------------------------------- *
 * Grundlage: jede Sektion darf eine Bewegungsschicht tragen
 * ---------------------------------------------------------------- */

.svk-section {
	position: relative;
	isolation: isolate;
}

/* ---- 1) Aurora: zwei driftende Farbwolken --------------------- */

.svk-section--alt,
.svk-section--dynamik {
	overflow: hidden;
}

.svk-section--alt::before,
.svk-section--dynamik::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(38% 44% at 22% 28%, var(--aurora-a) 0%, transparent 62%),
		radial-gradient(42% 40% at 78% 72%, var(--aurora-b) 0%, transparent 64%);
	animation: svk-aurora 34s ease-in-out infinite alternate;
}

/* Zweite, gegenlaeufige Wolke – erzeugt das Ineinanderfliessen */
.svk-section--alt::after,
.svk-section--dynamik::after {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(34% 38% at 68% 22%, var(--aurora-c) 0%, transparent 60%);
	animation: svk-aurora-gegen 46s ease-in-out infinite alternate;
}

@keyframes svk-aurora {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes svk-aurora-gegen {
	from { transform: translate3d(3%, 2%, 0) scale(1.08); }
	to   { transform: translate3d(-4%, -3%, 0) scale(1); }
}

/* Farbwerte je Modus – gedeckt genug, dass Text ruhig bleibt */
:root {
	--aurora-a: rgba(228, 210, 74, 0.20);
	--aurora-b: rgba(38, 63, 143, 0.16);
	--aurora-c: rgba(243, 230, 104, 0.13);
}
.is-dark {
	--aurora-a: rgba(228, 210, 74, 0.11);
	--aurora-b: rgba(64, 104, 220, 0.20);
	--aurora-c: rgba(243, 230, 104, 0.07);
}
@media (prefers-color-scheme: dark) {
	:root:not(.force-light) {
		--aurora-a: rgba(228, 210, 74, 0.11);
		--aurora-b: rgba(64, 104, 220, 0.20);
		--aurora-c: rgba(243, 230, 104, 0.07);
	}
}

/* ---- 2) Maehbahnen: Rasenstreifen, die beim Scrollen wandern --- */

.svk-section--rasen {
	position: relative;
	overflow: hidden;
}
.svk-section--rasen::before {
	content: "";
	position: absolute;
	inset: -10% -10% -10% -10%;
	z-index: -2;
	pointer-events: none;
	background: repeating-linear-gradient(
		104deg,
		var(--bahn-hell) 0 62px,
		var(--bahn-dunkel) 62px 124px
	);
	animation: svk-bahnen 40s linear infinite;
}
:root {
	--bahn-hell: rgba(38, 63, 143, 0.045);
	--bahn-dunkel: rgba(38, 63, 143, 0.015);
}
.is-dark {
	--bahn-hell: rgba(255, 255, 255, 0.030);
	--bahn-dunkel: rgba(255, 255, 255, 0.008);
}
@media (prefers-color-scheme: dark) {
	:root:not(.force-light) {
		--bahn-hell: rgba(255, 255, 255, 0.030);
		--bahn-dunkel: rgba(255, 255, 255, 0.008);
	}
}
@keyframes svk-bahnen {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-124px, 0, 0); }
}

/* ---- 3) Koernung: nimmt den Flaechen das Sterile ------------- */

.svk-section--alt::after,
.svk-section--dynamik::after,
.svk-section--rasen::after {
	background-blend-mode: overlay;
}
.svk-koernung::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.30;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---- 4) Gelbe Flaechen: lebendiger Verlauf statt Volltonfarbe -- */

.svk-cta-streifen {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(118deg,
			var(--sv-gelb-300, #f3e668) 0%,
			var(--sv-gelb-400, #e4d24a) 46%,
			#d8c43e 100%);
}
.svk-cta-streifen::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(40% 60% at 30% 40%, rgba(255, 255, 255, 0.55) 0%, transparent 60%);
	animation: svk-schimmer 26s ease-in-out infinite alternate;
}
.svk-cta-streifen > * {
	position: relative;
	z-index: 1;
}
@keyframes svk-schimmer {
	from { transform: translate3d(-6%, -4%, 0); opacity: 0.7; }
	to   { transform: translate3d(8%, 5%, 0); opacity: 1; }
}

/* ---- 5) Sanfter Farbwechsel an Sektionsgrenzen ---------------- */

.svk-section--alt + .svk-section:not(.svk-section--alt)::before,
.svk-section:not(.svk-section--alt) + .svk-section--alt::before {
	mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* ---- Ruhe, wenn der Nutzer sie will --------------------------- */

@media (prefers-reduced-motion: reduce) {
	.svk-section--alt::before,
	.svk-section--alt::after,
	.svk-section--dynamik::before,
	.svk-section--dynamik::after,
	.svk-section--rasen::before,
	.svk-cta-streifen::before {
		animation: none !important;
	}
}

/* Der Nutzer-Schalter „Effekte aus" haelt ebenfalls alles an */
.svk-effekte-aus .svk-section--alt::before,
.svk-effekte-aus .svk-section--alt::after,
.svk-effekte-aus .svk-section--dynamik::before,
.svk-effekte-aus .svk-section--dynamik::after,
.svk-effekte-aus .svk-section--rasen::before,
.svk-effekte-aus .svk-cta-streifen::before {
	animation: none !important;
}

/* Das Hero-Video bleibt unberuehrt – dort gibt es schon Bewegung */
.svk-hero::before,
.svk-hero::after {
	animation: none;
}