/* Modul „Hero": vollflächiger Einstieg mit Video oder Bild, Inhalt unten.
   Maße aus `01 Startseite` (Video) und `02`/`04` (Bild + Faktenzeile). */

.modul--hero {
	position: relative;
	/* Die Medien liegen absolut dahinter; im Fluss steht nur der Inhalt, und
	   den drückt das Grid an die Unterkante. */
	display: grid;
	align-items: end;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0;
	overflow: hidden;
	background: var(--dunkel);
	color: var(--bg);
}

/* Medien liegen hinter dem Inhalt und füllen die ganze Fläche. */
.modul-hero__medien {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.modul-hero__bild,
.modul-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Der S/W-Filter kommt aus `.fk-bw--video` (site.css). */
}

/* Der Verlauf hält die weiße Schrift unten auf jedem Bild lesbar. */
.modul-hero__medien::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hero-verlauf);
	pointer-events: none;
}

/* Unter 700 px lädt site.js keine Quelle; das Element bliebe ein zweites Poster
   über dem <img> — und zöge die große Poster-Datei, die das <img> per srcset
   gerade vermieden hat. */
@media (max-width: 699.98px) {
	.modul-hero__video { display: none; }
}

/* ---------- Inhalt ---------- */

.modul-hero__inhalt {
	position: relative;
	z-index: 2;
	/* Auto-Ränder schrumpfen ein Grid-Element sonst auf seinen Inhalt. */
	width: 100%;
	padding-block: clamp(120px, 18vh, 180px) clamp(90px, 12vh, 130px);
}

/* Mit Faktenzeile rückt der Block tiefer — sie bringt ihren eigenen Abstand mit. */
.modul--hero-fakten .modul-hero__inhalt { padding-bottom: clamp(70px, 10vh, 110px); }

.modul-hero__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: var(--spalten-gap);
	align-items: end;
}

.modul-hero__kicker {
	margin: 0;
	color: var(--invers-70);
}

.modul-hero__titel {
	/* Abstand zum Kicker: `.fk-kicker + .fk-h1` in site.css. */
	max-width: 14ch;
	color: inherit;
	text-wrap: balance;
}

/* Landingpages: Die H1 ist länger („Euer Hochzeits-DJ für die Hochzeit im
   Ausland."). 14ch sind 7,84 em, „Euer Hochzeits-DJ" misst 7,89 em — die
   erste Zeile brach deshalb immer. 18ch lassen die Spalte entscheiden. */
.modul-hero__titel.fk-h1--landing { max-width: 18ch; }

/* Ab 1100 px bekommt die lange H1 drei Fünftel der Breite: so steht sie in
   zwei bis drei Zeilen statt in vier bis fünf; der Text rechts behält gut
   45 Zeichen. Darunter teilen sich beide Spalten die Breite wie im Prototyp. */
@media (min-width: 1100px) {
	.modul-hero__raster:has(.fk-h1--landing) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

/* Zweispaltig endet die rechte Spalte auf der Grundlinie der H1, nicht auf
   der Unterkante ihrer Zeilenbox (Unterlänge). */
@media (min-width: 900px) {
	.modul-hero__seite { margin-bottom: calc(var(--fs-h1) * var(--h1-unterlaenge)); }
	.modul-hero__raster:has(.fk-h1--landing) .modul-hero__seite { margin-bottom: calc(var(--fs-h1-landing) * var(--h1-unterlaenge)); }
}

.modul-hero__text p {
	max-width: var(--mass-lead);
	margin: 0;
	font-size: var(--fs-hero-text);
	line-height: var(--lh-text);
	color: var(--invers-85);
}

.modul-hero__text p + p { margin-top: 12px; }

.modul-hero__aktionen {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: clamp(22px, 3.5vh, 34px);
}

.modul-hero__aktionen:first-child { margin-top: 0; }

/* Faktenzeile: ab 1100 px eine Zeile, darunter ein Raster 2 × 2 (statt 3 + 1
   mit einem verwaisten Eintrag), unter 560 px eine Liste. */
.modul-hero__fakten {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 12px 36px;
	margin: clamp(40px, 7vh, 72px) 0 0;
	padding: 18px 0 0;
	list-style: none;
	border-top: 1px solid var(--linie-invers-20);
	font-size: var(--fs-label);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-label);
	line-height: var(--lh-text);
	text-transform: uppercase;
	color: var(--invers-70);
}

.modul-hero__fakten li { margin: 0; }

@media (max-width: 559px) {
	.modul-hero__fakten { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1100px) {
	.modul-hero__fakten {
		display: flex;
		flex-wrap: wrap;
		column-gap: clamp(24px, 2.6vw, 36px);
	}
}

/* ---------- Einstieg ----------
   Gestaffeltes Auftauchen beim Laden. Die Verzögerungen sind Bruchteile von
   `--dur-hero` (Prototyp: .05/.15/.3/.45/.6 s bei 0,8 s): Bei reduzierter
   Bewegung schrumpft das Token, und die Staffel schrumpft mit, statt die Inhalte
   bis zu 0,6 s unsichtbar stehen zu lassen. Ohne JavaScript läuft die Animation
   genauso — sie braucht keinen Auslöser. Die Keyframes `fk-einblenden` stehen
   in site.css (dieselben wie beim Scroll-Reveal). */

.modul-hero__kicker,
.modul-hero__titel,
.modul-hero__text,
.modul-hero__aktionen,
.modul-hero__fakten {
	animation: fk-einblenden var(--dur-hero) var(--ease-aus) both;
}

.modul-hero__kicker {
	animation-duration: calc(var(--dur-hero) * 0.875);
	animation-delay: calc(var(--dur-hero) * 0.0625);
}

.modul-hero__titel { animation-delay: calc(var(--dur-hero) * 0.1875); }
.modul-hero__text { animation-delay: calc(var(--dur-hero) * 0.375); }
.modul-hero__aktionen { animation-delay: calc(var(--dur-hero) * 0.5625); }
.modul-hero__fakten { animation-delay: calc(var(--dur-hero) * 0.75); }

/* Scroll-Zoom (Bild-Hero): `[data-hero-zoom]` am Bild — Animation samt
   Rückfall für Browser ohne Scroll-Timelines stehen zentral in site.css. */