/* ── Kidszone Hero Video ──────────────────────────────────────── */

/* Responsive Höhe + vertikale Zentrierung des Inhalts.
   CSS wird nur auf der Startseite eingebunden → .header-hero--cover sicher targetierbar.
   height statt min-height: definierter Rahmen; Inhalt wird per Flexbox zentriert. */
.header-hero--cover {
	height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background-position: center; /* Theme hat center top – hier auf center korrigieren */
}

@media (min-width: 48em) {        /* ≥ 768px  – Tablet */
	.header-hero--cover {
		height: 500px;
	}
}

@media (min-width: 64em) {        /* ≥ 1024px – kleines Desktop */
	.header-hero--cover {
		height: 580px;
	}
}

@media (min-width: 90em) {        /* ≥ 1440px – großes Desktop */
	.header-hero--cover {
		height: 680px;
	}
}

@media (min-width: 120em) {       /* ≥ 1920px – sehr breite Screens */
	.header-hero--cover {
		height: 780px;
	}
}

/* Theme-Padding entfernen – Zentrierung übernimmt Flexbox */
.header-hero--cover.header-hero--large,
.header-hero--cover.header-hero--small,
.header-hero--cover.header-hero--medium {
	padding-top: 0;
	padding-bottom: 0;
}

/* Beide Video-Elemente füllen die Hero-Section */
.kzhv-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	z-index: 0;
	transition: opacity 1s ease-in-out;
}

/* Aktives Video liegt oben und ist sichtbar */
.kzhv-video--active {
	opacity: 1;
	z-index: 0;
}

/* Dunkles Overlay (::after) über beiden Videos */
.kzhv-active.header-hero--cover::after {
	z-index: 1;
}

/* Inhalt (Suchfeld etc.) über dem Overlay, vertikal zentriert via Flexbox-Parent */
.kzhv-active .header-hero__content {
	position: relative;
	z-index: 2;
}