/*
 * Header – Modern & leicht (Sticky + Glassmorphism, Nav-Stream)
 * Wird nach modules/styles.css geladen, damit Overrides greifen.
 */

/* Basis: leichter Look. Header-Höhe = sichtbare Nav-Leiste (8em wie .wrap), kein grauer Rand – Übergang bildet die Welle. */
header {
	height: 8em;
	overflow: visible;
	background-color: var(--gray-light);
	border: none !important;
	transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Beim Scrollen: Glas-Effekt (Backdrop-Filter) */
/*header.header-scrolled {
	background: rgba(252, 252, 252, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 24px rgba(18, 18, 18, 0.06);
}
@supports not (backdrop-filter: blur(12px)) {
	header.header-scrolled {
		background: rgba(252, 252, 252, 0.94);
	}
}

/* top: 100% = flache Oberkante der Welle sitzt exakt an der Unterkante des Headers.
   Kein Transform nötig – SVG-Pfade haben die flache Kante oben, Wellen zeigen nach unten.
   Skaliert responsiv mit, da top: 100% relativ zur Header-Höhe ist. */
header .wave-divider {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	bottom: auto;
	width: 100%;
	height: 5rem;
	min-height: 3.5rem;
	margin: 0;
	padding: 0;
	display: block;
	pointer-events: none;
	overflow: visible;
	z-index: 10001;
}

/*
 * Fluss-Animation: Wellen laufen jeweils exakt eine Musterperiode (−50 % der Pfadbreite).
 * Die SVG-Pfade sind 2400 Einheiten breit, der viewBox 1200 Einheiten → das Muster
 * wiederholt sich bei x = 1200 exakt. translateX(-50 %) = −1200 SVG-Einheiten = eine volle
 * Periode → letzter und erster Frame sind identisch, kein sichtbares Springen.
 * Dauer verdreifacht gegenüber den vorherigen Werten.
 */
@keyframes wave-flow {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
header .wave-divider .wave-layer-back {
	animation: wave-flow 135s linear infinite;
}
header .wave-divider .wave-layer-mid {
	animation: wave-flow 120s linear infinite;
}
header .wave-divider .wave-layer-front {
	animation: wave-flow 105s linear infinite;
}