/**
 * MUP WOW Hero — Mobile-first Glas-Hero-System
 * Universal über alle Sites einsetzbar. Smartphone primary, Desktop fabelhaft.
 *
 * Klassen-Konvention:
 *   .mup-wow-hero            → Cover-Block (Hauptcontainer, 100svh)
 *   .mup-wow-hero__card      → Glas-Karte mit Inhalt
 *   .mup-wow-hero__brand     → Markenname klein (Skript-Font möglich)
 *   .mup-wow-hero__eyebrow   → Kicker-Zeile über H1
 *   .mup-wow-hero__title     → H1 (Headline)
 *   .mup-wow-hero__sub       → Untertitel unter H1
 *
 *   .mup-wow-header          → Kleinere Variante für Unterseiten (60svh)
 *
 * Mobile-First. Custom-Property-Hooks für per-Site Overrides:
 *   --wow-card-bg            (Glas-Hintergrund)
 *   --wow-card-blur          (Backdrop-Blur)
 *   --wow-card-border        (Karten-Rand)
 *   --wow-card-text          (Karten-Textfarbe)
 *   --wow-card-accent        (Akzentfarbe — fällt auf --mup-accent zurück)
 *   --wow-overlay            (Cover-Dim-Overlay)
 */

/* ========================================================================
   1) HAUPT-HERO — Smartphone-first Vollbild-Portrait + Glas-Karte unten
   ======================================================================== */
.mup-wow-hero {
	position: relative;
	min-height: 100svh;             /* svh = small viewport height, ideal für Mobile-Browser-UI */
	min-height: 100vh;              /* Fallback für Browser ohne svh */
	display: flex;
	align-items: flex-end;          /* Karte sitzt unten */
	justify-content: center;
	padding: 0 16px 6vh;            /* Karte hat Atem zum Bildschirmrand */
	overflow: hidden;
	color: var(--wow-card-text, #fff);
}

/* Hintergrund-Bild (Cover füllt 100%) */
.mup-wow-hero .wp-block-cover__image-background,
.mup-wow-hero > .wp-block-cover__image-background,
.mup-wow-hero .wp-block-cover__video-background {
	object-fit: cover !important;
	object-position: var(--wow-img-x, 50%) var(--wow-img-y, 35%) !important;
}

/* Subtiler Verlauf-Overlay damit die Karte unten lesbar bleibt */
.mup-wow-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(
		to top,
		var(--wow-overlay, rgba(0,0,0,0.55)) 0%,
		rgba(0,0,0,0) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* ───────── Glas-Karte ───────── */
.mup-wow-hero__card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 560px;
	padding: 28px 24px 30px;
	border-radius: 18px;
	background: var(--wow-card-bg, rgba(255,255,255,0.10));
	backdrop-filter: blur(var(--wow-card-blur, 18px)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--wow-card-blur, 18px)) saturate(140%);
	border: 1px solid var(--wow-card-border, rgba(255,255,255,0.22));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.18) inset,
		0 24px 60px -20px rgba(0,0,0,0.45);
	text-align: center;
	color: inherit;
}

/* Brand-Mark */
.mup-wow-hero__brand {
	margin: 0 0 6px;
	font-family: var(--mup-font-skript, var(--wp--preset--font-family--script, inherit));
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.mup-wow-hero__brand-dot {
	color: var(--wow-card-accent, var(--mup-accent, #c9a84c));
}
.mup-wow-hero__brand-sub {
	display: block;
	margin-top: 4px;
	font-family: var(--mup-font-haupt, inherit);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
	font-weight: 400;
}

/* Eyebrow */
.mup-wow-hero__eyebrow {
	margin: 14px 0 8px;
	font-style: italic;
	font-family: var(--mup-font-skript, inherit);
	font-size: clamp(0.95rem, 3.6vw, 1.15rem);
	opacity: 0.92;
}

/* Headline */
.mup-wow-hero__title {
	margin: 4px 0 10px;
	font-family: var(--mup-font-haupt, inherit);
	font-size: clamp(1.6rem, 7.5vw, 2.6rem);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Sub */
.mup-wow-hero__sub {
	margin: 0;
	font-size: clamp(0.92rem, 3.4vw, 1.05rem);
	line-height: 1.5;
	opacity: 0.88;
}

/* ========================================================================
   2) HEADER-VARIANTE — kleinere Form für Unterseiten (Über · Portraits · Reportagen …)
   ======================================================================== */
.mup-wow-header {
	position: relative;
	min-height: 62svh;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 16px 5vh;
	overflow: hidden;
	color: var(--wow-card-text, #fff);
}
.mup-wow-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 65%;
	background: linear-gradient(
		to top,
		var(--wow-overlay, rgba(0,0,0,0.55)) 0%,
		rgba(0,0,0,0) 100%
	);
	pointer-events: none;
	z-index: 1;
}
.mup-wow-header .wp-block-cover__image-background,
.mup-wow-header > .wp-block-cover__image-background {
	object-fit: cover !important;
	object-position: var(--wow-img-x, 50%) var(--wow-img-y, 40%) !important;
}
.mup-wow-header__card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 520px;
	padding: 22px 22px 24px;
	border-radius: 14px;
	background: var(--wow-card-bg, rgba(255,255,255,0.10));
	backdrop-filter: blur(var(--wow-card-blur, 16px)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--wow-card-blur, 16px)) saturate(140%);
	border: 1px solid var(--wow-card-border, rgba(255,255,255,0.22));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.18) inset,
		0 18px 50px -18px rgba(0,0,0,0.4);
	text-align: center;
}
.mup-wow-header__eyebrow {
	margin: 0 0 6px;
	font-family: var(--mup-font-skript, inherit);
	font-style: italic;
	font-size: clamp(0.85rem, 3vw, 1rem);
	opacity: 0.92;
}
.mup-wow-header__title {
	margin: 0;
	font-family: var(--mup-font-haupt, inherit);
	font-size: clamp(1.5rem, 6.5vw, 2.2rem);
	line-height: 1.18;
	font-weight: 500;
	letter-spacing: -0.005em;
}
.mup-wow-header__sub {
	margin: 8px 0 0;
	font-size: clamp(0.88rem, 3.2vw, 1rem);
	line-height: 1.5;
	opacity: 0.85;
}

/* ========================================================================
   3) TABLET — ab 768px Karte zentriert kompakter, Headline größer
   ======================================================================== */
@media (min-width: 768px) {
	.mup-wow-hero {
		padding-bottom: 8vh;
	}
	.mup-wow-hero__card {
		padding: 36px 36px 38px;
	}
	.mup-wow-hero__title {
		font-size: clamp(2rem, 5vw, 3rem);
	}
	.mup-wow-header {
		min-height: 55vh;
	}
	.mup-wow-header__card {
		padding: 28px 32px 30px;
	}
}

/* ========================================================================
   4) DESKTOP — v5.4.1: Layout identisch mit Mobile/Tablet
   ────────────────────────────────────────────────────────────────────────
   User-Feedback: das seitliche Glas-Layout mit horizontalem Verlauf sah am
   PC nicht so harmonisch aus wie die zentrierte Mobile-Variante. Karte
   bleibt jetzt unten zentriert auf Vollbild-Portrait — auch am Desktop.
   Typografie wächst weiter mit clamp().
   ======================================================================== */
@media (min-width: 1024px) {
	.mup-wow-hero {
		padding-bottom: 10vh;             /* etwas mehr Abstand zum unteren Rand */
	}
	.mup-wow-hero__card {
		max-width: 640px;                  /* etwas breiter für mehr Atem */
		padding: 44px 48px 46px;
	}
	.mup-wow-hero__title {
		font-size: clamp(2.4rem, 4vw, 3.4rem);
	}
	.mup-wow-hero__sub {
		font-size: 1.05rem;
	}
	.mup-wow-header {
		padding-bottom: 7vh;
		min-height: 55vh;
	}
	.mup-wow-header__card {
		max-width: 560px;
		padding: 32px 38px 34px;
	}
}

/* v5.4.1: Karten-Ausrichtung-Modifier entfernt (waren is-card-right /
   is-card-center). Default-Layout = Mobile-Style auf allen Viewports. */

/* ========================================================================
   6) DARK-CARD MODIFIER — wenn Hintergrund hell ist
   ======================================================================== */
.mup-wow-hero.is-dark-card,
.mup-wow-header.is-dark-card {
	--wow-card-bg: rgba(20,20,20,0.55);
	--wow-card-border: rgba(255,255,255,0.18);
	--wow-card-text: #fff;
}

/* ========================================================================
   7) ACCESSIBILITY — Motion-Reduce
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mup-wow-hero__card,
	.mup-wow-header__card {
		transition: none !important;
	}
}