/* =====================================================================
   EWTC – Startseiten-Hero · Variante C (vollflächig, „luxuriös & großzügig")
   Basiert auf Variante B (vollflächiges Medium + Overlay + persistenter
   CTA-Dock), aber mit eigener Typo und großzügigerem Spacing-Rhythmus.
   Referenz aus dem Briefing: windrose.de — viel Weißraum, ruhige Eleganz,
   zurückhaltende CTAs, Foto/Video trägt die Emotion.

   Bewusste Abweichung vom Token-Vertrag (design.md schreibt Barlow vor):
   Diese Explorations-Variante setzt eine Display-Serife (Cormorant Garamond)
   für die Headline gegen eine geometrische Sans (Jost) für UI/Fließtext —
   das erzeugt die editoriale Luxus-Anmutung, die B (reines Barlow) nicht hat.
   Farben/Radien bleiben aus design.md, a11y-sicheres Rot (#c01f26) bleibt.

   Scoped unter .ewtc-hero-c, um Kollisionen mit dem gescrapten Theme-CSS zu
   vermeiden. Mobile-first (56 % der Sitzungen sind mobil, Clarity). Kein JS.
   ===================================================================== */

/* Scrape-Scroll-Lock neutralisieren: das gescrapte Theme fixiert html/body auf
   100 % Höhe (+ Klasse .overflowHidden), wodurch das statische Mockup nicht
   scrollt – die Sperre wird normalerweise per Menü-JS gelöst. Hier zurücksetzen. */
html,
body {
	height: auto !important;
	min-height: 100%;
	overflow-y: visible !important;
}

/* Mobil ist der CTA-Dock eine fixierte Bottom-Bar in voller Breite – Platz
   reservieren, damit er keinen Seiteninhalt (Footer) dauerhaft verdeckt.
   Ab Tablet schwebt er als Pille und braucht keinen Body-Offset. */
@media (max-width: 47.99rem) {
	body {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* Bestehendes Scrape-Kontakt-Widget (roter Telefon-Button) ausblenden –
   die Erreichbarkeit übernimmt im Mockup der persistente CTA-Dock. */
#sticky-contact-box {
	display: none !important;
}

.ewtc-hero-c {
	/* --- design.md Tokens --- */
	--c-primary: #e84346; /* nur große Flächen */
	--c-primary-text: #c01f26; /* a11y-sicheres Rot für Text/CTA/Icons */
	--c-primary-text-dark: #a81920;
	--c-secondary: #4a5327; /* Olive */
	--c-bg: #ffffff;
	--c-surface: #f6f6f6; /* surface-Token (Palette-Shade statt Sonderfarbe) */
	--c-text: #3c3c3b;
	--c-text-muted: #6b6b6a;
	--c-border: rgba(60, 60, 59, 0.16);

	--r-lg: 0.5rem; /* design.md rounded.lg 8px */
	--r-2xl: 0.9375rem; /* 2xl 15px */
	--r-pill: 62.4375rem; /* 3xl 999px */

	/* --- Typo (Varianten-eigen, s. Kopfkommentar) --- */
	--font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
	--font-sans: "Barlow", "Barlow Fallback", system-ui, -apple-system, Arial, sans-serif;

	/* Großzügigerer Spacing-Rhythmus als B (jede Stufe ~33–50 % luftiger).
	   Trägt das „mehr Weißraum"-Gefühl der windrose-Referenz. */
	--space-1: 0.625rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.25rem;
	--space-5: 3rem;
	--space-6: 4.5rem;

	position: relative;
	isolation: isolate;
	display: flex;
	/* Inhalt vertikal mittig im Bild (linksbündig bleibt erhalten). */
	align-items: center;
	/* Vollflächige Bühne, ABER um die Header-Höhe reduziert: der Scrape-Header
	   liegt mit ~4.5rem im Fluss über dem Hero. Ohne Abzug ragt ein 100vh-Hero
	   um die Header-Höhe unter die Falz – Scroll-Cue + Assist-Zeile verschwinden.
	   Mit Abzug füllt Header + Hero zusammen genau den ersten Viewport. */
	min-height: calc(100vh - 4.5rem);
	min-height: calc(100svh - 4.5rem);
	/* Header-Clearance oben (fixer Scrape-Header, 50 px) + moderate Luft unten.
	   Bewusst knapper als zuvor, damit Inhalt INKL. Scroll-Cue in 100vh passt
	   (vorher überlief der Hero, Assist-Zeile + Pfeil rutschten unter die Falz). */
	padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	overflow: hidden;
	font-family: var(--font-sans);
	color: #fff;
}

/* ---------- Vollflächiges Medium (Bild/Video) ---------- */
.ewtc-hero-c__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Poster auch als Background, damit bei deaktiviertem Video (reduced-motion)
	   weiterhin ein Bild statt einer schwarzen Fläche steht. */
	background: #14100e url("../img/5bf0f62254289c50.webp") center / cover no-repeat;
}

.ewtc-hero-c__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Langsamerer, ruhigerer Ken-Burns als B – Eleganz statt Bewegung. */
	animation: ewtc-hero-c-kenburns 34s ease-in-out infinite alternate;
}

/* Ruhiger, neutral-warmer Verlauf. Weniger Markenrot-Glow als B, mehr
   gleichmäßige Tiefe – die Eleganz kommt aus Zurückhaltung (windrose). */
.ewtc-hero-c__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(18, 13, 11, 0.82) 0%, rgba(18, 13, 11, 0.4) 46%, rgba(18, 13, 11, 0) 78%),
		linear-gradient(0deg, rgba(12, 9, 8, 0.8) 0%, rgba(12, 9, 8, 0) 56%),
		/* sanfte, breite Eck-Vignette für Premium-Tiefe ohne Drama */
		radial-gradient(150% 130% at 50% 36%, rgba(0, 0, 0, 0) 58%, rgba(6, 4, 3, 0.45) 100%);
}

/* ---------- Overlay-Inhalt ---------- */
.ewtc-hero-c__inner {
	width: 100%;
	/* Etwas schmalere Textspalte + mehr Seiten-Padding = mehr Weißraum. */
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 6vw, 5rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ewtc-hero-c__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	/* Weite Laufweite = ruhiger Luxus-Auftakt (windrose-Manier). */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.95);
	/* Schatten wie Headline/Lead – sonst ist die Eyebrow über hellen
	   Video-Frames der schwächste Punkt (WCAG 1.4.3 über bewegtem Bild). */
	text-shadow: 0 0.0625rem 0.625rem rgba(0, 0, 0, 0.45);
}

.ewtc-hero-c__eyebrow::before {
	content: "";
	width: 3rem;
	height: 0.0625rem;
	background: rgba(255, 255, 255, 0.55);
}

.ewtc-hero-c .ewtc-hero-c__title {
	margin: 0;
	max-width: 16ch;
	font-family: var(--font-display);
	font-weight: 500;
	/* Groß und in der Serife – das prägende Luxus-Element (max etwas
	   zurückgenommen, damit der Hero inkl. Scroll-Cue in 100vh passt). */
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-wrap: balance;
	/* explizit weiß: das gescrapte Theme setzt sonst ein rotes h1 (Kontrast!) */
	color: #fff;
	/* Theme erzwingt uppercase auf h1 – die Serife lebt vom Satzfall. */
	text-transform: none;
	text-shadow: 0 0.125rem 1.75rem rgba(0, 0, 0, 0.38);
}

.ewtc-hero-c__lead {
	margin: 0;
	max-width: 40rem;
	font-family: var(--font-sans);
	font-weight: 300;
	/* Größer und luftiger gesetzt als B. */
	font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.32);
}

/* ---------- Trust-Signale (kompakte Inline-Reihe) ---------- */
.ewtc-hero-c__trust {
	list-style: none;
	margin: var(--space-1) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
}

.ewtc-hero-c__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
}

.ewtc-hero-c__trust svg {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	color: #fff;
}

/* ---------- Such-Card (Overlay, ruhig & großzügig) ---------- */
.ewtc-hero-c__search {
	margin-top: var(--space-3);
	max-width: 60rem;
	/* Spürbar mehr Innenpolsterung als B für den großzügigen Eindruck. */
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: rgba(247, 247, 246, 0.97);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--r-2xl);
	box-shadow: 0 1.75rem 4rem rgba(10, 8, 8, 0.42);
	backdrop-filter: blur(12px);
	color: var(--c-text);
}

.ewtc-hero-c__search-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--c-text);
}

/* Klärt den im Meeting genannten Abbruchgrund „Was kann ich hier buchen?" */
.ewtc-hero-c__search-note {
	margin: 1rem 0 0;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--c-text-muted);
}

/* Das gescrapte Theme stylt .preissuche_form als eigene weiße Box
   (background:#fff, 1px-Border, radius, padding:16px, overflow:hidden) und
   zieht sie zusätzlich per position:relative; top:-30px + transform nach
   oben/seitlich. Im cremefarbenen Card wird daraus eine sichtbare
   „Box-in-Box", die obendrein den Card-Titel überlappt (in B unsichtbar, weil
   der Card dort fast weiß war). Vollständig neutralisieren – die Card selbst
   ist bereits der Rahmen. */
.ewtc-hero-c__search .preissuche_form {
	position: static !important;
	top: auto !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: none !important;
}

/* Suchformular: mobil gestapelt, ab Tablet horizontale Leiste.
   Das gescrapte .preissuche_form enthält eine versteckte Budget-Zelle. */
.ewtc-hero-c__search .preissuche_form .grid-x {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: stretch;
}

.ewtc-hero-c__search .preissuche_form .cell {
	width: 100%;
	max-width: none;
	flex: initial;
	margin: 0;
	padding: 0;
}

.ewtc-hero-c__search .preissuche_form .cell.hide {
	display: none;
}

.ewtc-hero-c__search .preissuche_label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.ewtc-hero-c__search .input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3.25rem; /* großzügiger als B (≥ 44px Tap-Target) */
	padding: 0 1rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: #fff;
}

.ewtc-hero-c__search .input-wrapper > i {
	color: var(--c-primary-text);
}

/* Das gescrapte Theme rahmt das innere <input> selbst (weißer Hintergrund,
   2px-Border, eigener Radius) – das erzeugt die „Box in der Box". Höhere
   Spezifität + !important machen das Feld transparent, sodass nur der
   Wrapper als ein sauberer Rahmen sichtbar bleibt. */
.ewtc-hero-c__search .preissuche_form .input-wrapper input {
	width: 100%;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: inherit;
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--c-text);
	/* Platz links fürs (absolut positionierte) Icon, sonst bündig. */
	padding: 0.75rem 0.25rem 0.75rem 2.25rem !important;
}

.ewtc-hero-c__search .preissuche_form .input-wrapper input:focus {
	border: 0 !important;
	box-shadow: none !important;
}

/* Nächte-Feld: Das Theme blendet ein „Nächte"-Suffix (::after) ein und
   reserviert dafür viel Rechts-Padding – im schmalen Desktop-Feld bleibt für
   den Wert kaum Platz, die „7" verschwindet. Das Suffix ist ohnehin redundant
   zum Label „Reisedauer (Nächte)": ausblenden, Wert linksbündig neben dem Icon. */
.ewtc-hero-c__search #reise-tage {
	/* Theme: #reise-tage{text-align:right;padding-right:4.4rem!important} – eine
	   ID-Regel mit !important. Nur ID + !important schlägt sie zurück. */
	text-align: left !important;
	padding-right: 0.25rem !important;
}

.ewtc-hero-c__search .preissuche_form .number-wrapper::after {
	content: none !important;
}

/* Fokus auf den Wrapper ziehen (das innere Feld ist randlos). */
.ewtc-hero-c__search .input-wrapper:focus-within {
	outline: 0.1875rem solid var(--c-primary-text);
	outline-offset: 0.125rem;
}

.ewtc-hero-c__search .suche-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.875rem 2rem;
	/* !important nötig: das gescrapte Theme erzwingt
	   .button,[type=submit]{background:#e84346!important} – das verbotene Brand-Rot
	   (weiß darauf ≈ 3,9:1, fällt durch WCAG AA). Wir zwingen den a11y-sicheren
	   primaryText (#c01f26, weiß darauf ≈ 6,1:1) zurück. */
	border: 1px solid var(--c-primary-text) !important;
	border-radius: var(--r-lg);
	background: var(--c-primary-text) !important;
	color: #fff !important;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.ewtc-hero-c__search .suche-btn:hover {
	background: var(--c-primary-text-dark) !important;
	border-color: var(--c-primary-text-dark) !important;
}

.ewtc-hero-c__search .suche-btn:active {
	transform: translateY(1px);
}

.ewtc-hero-c__search .preissuche_form .cell.btn-cell {
	display: flex;
	align-items: flex-end;
}

/* ---------- Beratungs-/Telefon-Zeile (Inline im Hero) ---------- */
.ewtc-hero-c__assist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	margin: var(--space-3) 0 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.85);
}

.ewtc-hero-c__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: 0.01em;
	color: #fff;
	text-decoration: none;
}

.ewtc-hero-c__phone:hover {
	text-decoration: underline;
}

.ewtc-hero-c__phone svg {
	width: 1.1rem;
	height: 1.1rem;
}

.ewtc-hero-c__anfrage {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 400;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

/* =====================================================================
   Persistenter CTA-Dock – bleibt beim Scrollen sichtbar (position:fixed)
   Mobil: Bottom-Bar in voller Breite. Ab Tablet: schwebende Pille rechts.
   ===================================================================== */
.ewtc-cta-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	gap: 0.625rem;
	padding: 0.75rem 0.875rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--c-border, rgba(60, 60, 59, 0.16));
	box-shadow: 0 -0.5rem 1.5rem rgba(10, 8, 8, 0.12);
	font-family: "Barlow", "Barlow Fallback", system-ui, -apple-system, Arial, sans-serif;
}

.ewtc-cta-dock__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1 1 0;
	min-height: 3.125rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ewtc-cta-dock__btn svg {
	width: 1.15rem;
	height: 1.15rem;
}

.ewtc-cta-dock__btn--phone {
	background: #ffffff;
	color: #c01f26;
	border: 1px solid #c01f26;
}

.ewtc-cta-dock__btn--phone:hover {
	background: rgba(192, 31, 38, 0.06);
}

.ewtc-cta-dock__btn--anfrage {
	background: #c01f26;
	color: #fff;
}

.ewtc-cta-dock__btn--anfrage:hover {
	background: #a81920;
}

.ewtc-cta-dock__btn:active {
	transform: translateY(1px);
}

/* ---------- Skip-Link (a11y, UX-Review Finding #3) ---------- */
.ewtc-skip {
	position: absolute;
	left: 0.75rem;
	top: -3.5rem;
	z-index: 1000;
	padding: 0.625rem 1rem;
	border-radius: 0.5rem;
	background: #c01f26;
	color: #fff;
	font-family: "Barlow", "Barlow Fallback", system-ui, -apple-system, Arial, sans-serif;
	font-weight: 500;
	text-decoration: none;
	transition: top 0.18s ease;
}

.ewtc-skip:focus {
	top: 0.75rem;
}

/* ---------- Sichtbarer Fokus auf allen interaktiven Elementen ---------- */
.ewtc-hero-c a:focus-visible,
.ewtc-hero-c button:focus-visible,
.ewtc-hero-c input:focus-visible,
.ewtc-cta-dock a:focus-visible,
.ewtc-skip:focus-visible {
	outline: 0.1875rem solid #fff;
	outline-offset: 0.125rem;
	border-radius: 0.3125rem;
}

.ewtc-hero-c__search a:focus-visible,
.ewtc-hero-c__search button:focus-visible,
.ewtc-hero-c__search input:focus-visible {
	outline-color: #c01f26;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (min-width: 48rem) {
	/* Suchformular wird zur horizontalen Leiste */
	.ewtc-hero-c__search .preissuche_form .grid-x {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 1rem 1.25rem;
	}

	.ewtc-hero-c__search .preissuche_form .cell {
		width: auto;
	}

	.ewtc-hero-c__search .preissuche_form .cell:nth-child(1) { /* Wohin */
		flex: 1 1 14rem;
	}

	.ewtc-hero-c__search .preissuche_form .cell:nth-child(3) { /* Reisezeitraum */
		flex: 1 1 12rem;
	}

	.ewtc-hero-c__search .preissuche_form .cell:nth-child(4) { /* Nächte */
		flex: 0 1 9rem;
	}

	.ewtc-hero-c__search .preissuche_form .cell.btn-cell {
		flex: 0 0 auto;
	}

	.ewtc-hero-c__search .suche-btn {
		width: auto;
	}

	/* Persistenter CTA: schwebende Pille unten rechts */
	.ewtc-cta-dock {
		left: auto;
		right: clamp(1.25rem, 3vw, 2.5rem);
		bottom: clamp(1.25rem, 3vw, 2.5rem);
		padding: 0.5rem;
		border: 1px solid var(--c-border, rgba(60, 60, 59, 0.16));
		border-radius: var(--r-pill, 62.4375rem);
		box-shadow: 0 0.75rem 2rem rgba(10, 8, 8, 0.22);
	}

	.ewtc-cta-dock__btn {
		flex: 0 0 auto;
		border-radius: var(--r-pill, 62.4375rem);
		padding: 0.75rem 1.5rem;
	}
}

/* Persistenter CTA-Dock ist von Anfang an sichtbar (Basiszustand), auf Desktop
   wie mobil – kein Scroll-Reveal mehr. Anrufen + Anfrage senden sollen ohne
   Scrollen erreichbar sein. Mobil bleibt der Bottom-Bar-Dock durchgehend
   sichtbar und überlagert dank body-padding-bottom keinen Inhalt. */

/* ---------- Scroll-Hinweis (dezent, nur größere Screens) ---------- */
.ewtc-hero-c__scroll {
	/* Am unteren Hero-Rand fixiert; Inhalt ist vertikal zentriert, daher
	   kollidiert der Cue nicht mit der Beratungszeile darüber. */
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	translate: -50% 0;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-shadow: 0 0.0625rem 0.625rem rgba(0, 0, 0, 0.45);
}

.ewtc-hero-c__scroll svg {
	width: 1.5rem;
	height: 1.5rem;
	animation: ewtc-hero-c-bob 2.2s ease-in-out infinite;
}

/* Scroll-Hinweis ab Tablet (am Desktop/Tablet ist unten Platz). Auf dem Phone
   ist die Bühne unten vom Inhalt + persistentem CTA-Dock belegt – dort kein
   kollidierender Cue; mobile Nutzer scrollen ohnehin. */
@media (min-width: 48rem) {
	.ewtc-hero-c__scroll {
		display: inline-flex;
	}
}

/* =====================================================================
   Motion (a11y: prefers-reduced-motion)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.ewtc-hero-c__inner > * {
		animation: ewtc-hero-c-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.ewtc-hero-c__eyebrow { animation-delay: 0.08s; }
	.ewtc-hero-c__title { animation-delay: 0.18s; }
	.ewtc-hero-c__lead { animation-delay: 0.3s; }
	.ewtc-hero-c__trust { animation-delay: 0.4s; }
	.ewtc-hero-c__search { animation-delay: 0.5s; }
	.ewtc-hero-c__assist { animation-delay: 0.6s; }
}

@media (prefers-reduced-motion: reduce) {
	.ewtc-hero-c__scroll {
		animation: none;
	}

	/* Video bleibt sichtbar (Mockup-Anforderung: das Hintergrundvideo soll laufen),
	   nur die Ken-Burns-Zoomfahrt wird gestoppt. Für das echte System wäre hier
	   wieder die WCAG-2.2.2-konforme Variante zu wählen (Video pausieren statt nur
	   die CSS-Animation), die ohne JS nicht erfüllbar ist. */
	.ewtc-hero-c__video {
		animation: none;
	}
}

@keyframes ewtc-hero-c-rise {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ewtc-hero-c-kenburns {
	from { transform: scale(1.03); }
	to { transform: scale(1.1); }
}

@keyframes ewtc-hero-c-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(0.375rem); }
}

/* =====================================================================
   Mobile-Overrides (≤ 47.99rem) – bewusst ans Dateiende: müssen die
   Basis-Regeln (Video display:block, Assist display:flex) per Quell-
   reihenfolge sicher überschreiben.
   ===================================================================== */
@media (max-width: 47.99rem) {
	/* Lead + Inline-Beratungszeile mobil aus: Platz fürs Primär (Suche);
	   Erreichbarkeit trägt der durchgehend sichtbare CTA-Dock (kein Dupe). */
	.ewtc-hero-c__lead,
	.ewtc-hero-c__assist {
		display: none;
	}

	/* 360-px-Falz-Garantie: Such-Card per order VOR die USP-Reihe;
	   so sitzen Eyebrow → H1 → Suche sicher above the fold. */
	.ewtc-hero-c__eyebrow { order: 1; }
	.ewtc-hero-c__title { order: 2; }
	.ewtc-hero-c__search { order: 3; margin-top: var(--space-3); }
	.ewtc-hero-c__trust { order: 4; }
}