/* =====================================================================
   EWTC – Startseiten-Hero · Variante B (vollflächig: cinematisches
   Bild/Video mit Overlay + persistenter Anfrage-/Telefon-CTA)
   Scoped unter .ewtc-hero-b, um Kollisionen mit dem gescrapten Theme-CSS
   zu vermeiden. Tokens aus design.md (Farben, Radien, Barlow).
   Mobile-first (56 % der Sitzungen sind mobil, Clarity). Kein JS nötig –
   der persistente CTA bleibt per position:fixed beim Scrollen sichtbar.
   ===================================================================== */

/* 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(4.75rem + 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-b {
	/* --- 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;
	--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 */

	/* konsistente rem-Rhythmik (design.md-Spacingscale endet bei 16px) */
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;

	position: relative;
	isolation: isolate;
	display: flex;
	/* Inhalt vertikal zentrieren: auf großen Displays greift der min-height-Floor
	   und der Hero wird höher als der Content – flex-end klebte ihn sonst unten an.
	   Auf MacBooks ist der Hero content-getrieben, dort ist die Zentrierung neutral. */
	align-items: center;
	/* Scrape-Header liegt bei Scroll 0 ~5rem im Fluss; ohne Abzug ergäbe
	   Header + 80vh > Falz und es bleibt nichts sichtbar. */
	--header-height: 5rem;
	/* Floor; die echte Höhe ist meist content-getrieben (Headline + USPs +
	   Such-Card). Damit der Content darunter anreißt, hält das kompaktere
	   Padding unten den Hero auf ~72–75vh statt ~84vh. */
	min-height: min(calc(72vh - var(--header-height)), 54rem);
	/* Top-Inset hält die Eyebrow/Headline frei vom fixierten Header –
	   bei langem Inhalt (mobil) wächst der Hero und beginnt unter dem Header. */
	padding: clamp(4.5rem, 7vw, 5.5rem) 0 clamp(1rem, 2.5vw, 1.75rem);
	overflow: hidden;
	font-family: "Barlow", system-ui, sans-serif;
	color: #fff;
}

/* ---------- Vollflächiges Medium (Bild/Video) ---------- */
.ewtc-hero-b__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: #1a1a1a;
}

.ewtc-hero-b__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: ewtc-hero-b-kenburns 26s ease-in-out infinite alternate;
}

/* Warmer, dunkler Verlauf: Lesbarkeit oben links + Tiefe unten.
   Doppelter Verlauf hält die Markenwärme, ohne das Bild zu erschlagen. */
.ewtc-hero-b__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(105deg, rgba(20, 14, 14, 0.82) 0%, rgba(20, 14, 14, 0.42) 42%, rgba(20, 14, 14, 0) 72%),
		linear-gradient(0deg, rgba(15, 10, 10, 0.7) 0%, rgba(15, 10, 10, 0) 45%),
		radial-gradient(120% 80% at 90% 10%, rgba(232, 67, 70, 0.18) 0%, rgba(232, 67, 70, 0) 55%),
		/* cinematische Eck-Vignette für Tiefe & Premium-Anmutung */
		radial-gradient(140% 120% at 50% 38%, rgba(0, 0, 0, 0) 58%, rgba(8, 5, 5, 0.42) 100%);
}

/* ---------- Overlay-Inhalt ---------- */
.ewtc-hero-b__inner {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ewtc-hero-b__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.ewtc-hero-b__eyebrow::before {
	content: "";
	width: 2rem;
	height: 0.125rem;
	background: var(--c-primary);
}

.ewtc-hero-b .ewtc-hero-b__title {
	margin: 0;
	max-width: 18ch;
	font-weight: 600;
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;
	/* explizit weiß: das gescrapte Theme setzt sonst ein rotes h1 (Kontrast!) */
	color: #fff;
	/* Theme erzwingt uppercase auf h1 – warme, persönliche Markenstimme
	   verlangt Satzfall (design.md headline-display ist mixed-case getuned). */
	text-transform: none;
	text-shadow: 0 0.125rem 1.5rem rgba(0, 0, 0, 0.35);
}

.ewtc-hero-b__lead {
	margin: 0;
	max-width: 38rem;
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.35);
}

/* ---------- Trust-Signale (kompakte Inline-Reihe) ---------- */
.ewtc-hero-b__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.ewtc-hero-b__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
}

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

/* ---------- Such-Card (Overlay, glasig) ---------- */
.ewtc-hero-b__search {
	margin-top: var(--space-1);
	max-width: 58rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--r-2xl);
	box-shadow: 0 1.5rem 3.5rem rgba(10, 8, 8, 0.4);
	backdrop-filter: blur(10px);
	color: var(--c-text);
}

.ewtc-hero-b__search-title {
	margin: 0 0 var(--space-2);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-text);
}

/* Das gescrapte Theme stylt .preissuche_form als eigenständiges, schwebendes
   Such-Widget: eigener Rahmen + Radius + weißer Hintergrund, 1rem Innen-Padding
   und ein Zentrier-/Hebe-Hack (position:relative; left:50%; transform:
   translateX(-50%); bottom:30px). In unserer Card ergibt das eine zweite,
   um 30px nach oben gemalte Box – sichtbar als ungleichmäßiger Rahmen mit
   großem Leerraum unten. Auf einen reinen, transparenten Container
   zurücksetzen; der einzige Rahmen ist die Card-Polsterung. */
.ewtc-hero-b__search .preissuche_form {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

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

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

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

.ewtc-hero-b__search .preissuche_label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-text);
}

.ewtc-hero-b__search .input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem; /* ≥ 44px Tap-Target */
	padding: 0 0.75rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-surface);
}

.ewtc-hero-b__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-b__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-weight: 500;
	color: var(--c-text);
	/* Platz links fürs (absolut positionierte) Icon, sonst bündig. */
	padding: 0.625rem 0.25rem 0.625rem 2.25rem !important;
}

.ewtc-hero-b__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-b__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-b__search .preissuche_form .number-wrapper::after {
	content: none !important;
}

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

.ewtc-hero-b__search .suche-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.75rem 1.5rem;
	/* !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-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

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

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

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

/* ---------- Beratungs-/Telefon-Zeile (Inline im Hero) ---------- */
.ewtc-hero-b__assist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.ewtc-hero-b__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-weight: 700;
	font-size: 1.0625rem;
	color: #fff;
	text-decoration: none;
}

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

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

.ewtc-hero-b__anfrage {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* =====================================================================
   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.5rem;
	padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	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", system-ui, sans-serif;
}

.ewtc-cta-dock__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1 1 0;
	min-height: 3rem;
	padding: 0.625rem 1rem;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 1rem;
	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", system-ui, sans-serif;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.18s ease;
}

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

/* ---------- Sichtbarer Fokus auf allen interaktiven Elementen ---------- */
.ewtc-hero-b a:focus-visible,
.ewtc-hero-b button:focus-visible,
.ewtc-hero-b 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-b__search a:focus-visible,
.ewtc-hero-b__search button:focus-visible,
.ewtc-hero-b__search input:focus-visible {
	outline-color: #c01f26;
}

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

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

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

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

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

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

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

	/* Persistenter CTA: schwebende Pille unten rechts */
	.ewtc-cta-dock {
		left: auto;
		right: clamp(1rem, 3vw, 2rem);
		bottom: clamp(1rem, 3vw, 2rem);
		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.625rem 1.25rem;
	}
}

/* ---------- Scroll-Hinweis (dezent, nur größere Screens) ---------- */
.ewtc-hero-b__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	translate: -50% 0;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: rgba(255, 255, 255, 0.75);
	animation: ewtc-hero-b-bob 2.2s ease-in-out infinite;
}

@media (min-width: 64rem) {
	.ewtc-hero-b__scroll {
		display: inline-flex;
	}
}

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

	.ewtc-hero-b__eyebrow { animation-delay: 0.08s; }
	.ewtc-hero-b__title { animation-delay: 0.16s; }
	.ewtc-hero-b__lead { animation-delay: 0.26s; }
	.ewtc-hero-b__trust { animation-delay: 0.34s; }
	.ewtc-hero-b__search { animation-delay: 0.42s; }
	.ewtc-hero-b__assist { animation-delay: 0.5s; }

	.ewtc-cta-dock {
		animation: ewtc-hero-b-rise 0.6s 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

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

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

@keyframes ewtc-hero-b-kenburns {
	from { transform: scale(1.04); }
	to { transform: scale(1.12); }
}

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