/* ── Hügelkante: Unterkante jedes dunklen Seitenkopfs (Idee 11, Chris 04.10.2026: „Das gilt wirklich
   für jeden Header“). Eine Linie wie im Bergischen Land, im Tal die Talsperre in Logo-Blau.
   ::before = Fläche unter der Linie (Maske) in der Farbe des nächsten Abschnitts (--wir-kante-grund),
   ::after  = die beiden Striche. Der Kopf bekommt unten genau die Kantenhöhe dazu.
   Form ändern nur in bin/huegelkante.mjs (erzeugt huegel-{breit,schmal}-{linie,flaeche}.svg).
   Nach jedem neuen Erzeugen ?v= unten hochzählen, sonst zeigt der Browser-Cache die alte Form. ── */
.wir-hero, .wir-seitenkopf, .wir-profilkopf {
	--wir-kante: 76px; --wir-kante-grund: var(--wp--preset--color--grund);
	--wir-kante-linie: url("../img/kante/huegel-breit-linie.svg?v=2"); --wir-kante-flaeche: url("../img/kante/huegel-breit-flaeche.svg?v=2");
	position: relative; padding-bottom: var(--wir-kante);
}
.wir-seitenkopf { padding-bottom: calc(clamp(2.5rem, 6vw, 4rem) + var(--wir-kante)); }
.wir-hero::before, .wir-seitenkopf::before, .wir-profilkopf::before,
.wir-hero::after, .wir-seitenkopf::after, .wir-profilkopf::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
	height: calc(var(--wir-kante) + 1px); pointer-events: none;
}
.wir-hero::before, .wir-seitenkopf::before, .wir-profilkopf::before {
	background: var(--wir-kante-grund);
	-webkit-mask: var(--wir-kante-flaeche) 0 0 / 100% 100% no-repeat; mask: var(--wir-kante-flaeche) 0 0 / 100% 100% no-repeat;
}
.wir-hero::after, .wir-seitenkopf::after, .wir-profilkopf::after { background: var(--wir-kante-linie) 0 0 / 100% 100% no-repeat; }
@media (max-width: 782px) {
	.wir-hero, .wir-seitenkopf, .wir-profilkopf {
		--wir-kante: 40px;
		--wir-kante-linie: url("../img/kante/huegel-schmal-linie.svg?v=2"); --wir-kante-flaeche: url("../img/kante/huegel-schmal-flaeche.svg?v=2");
	}
}