/* =====================================================================
   EWTC – Startseiten-Hero · Variante A (zweispaltig: Video + Vorteile)
   Scoped unter .ewtc-hero, um Kollisionen mit dem gescrapten Theme-CSS
   zu vermeiden. Tokens stammen aus design.md (Farben, Radien, Barlow).
   Mobile-first & responsive (56 % der Sitzungen sind mobil, Clarity).
   ===================================================================== */

/* 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;
}

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

.ewtc-hero {
	/* --- design.md Tokens --- */
	--c-primary: #e84346; /* nur große Flächen */
	--c-primary-text: #c01f26; /* a11y-sicheres Rot für Text/CTA/Icons */
	--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-md: 0.3125rem; /* design.md rounded.md 5px */
	--r-lg: 0.5rem; /* lg 8px */
	--r-xl: 0.625rem; /* xl 10px */
	--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;

	font-family: "Barlow", system-ui, sans-serif;
	color: var(--c-text);
	/* Atmosphäre statt Flachfarbe: warmes Markenlicht oben rechts, ein
	   ruhiger Olive-Hauch unten links balanciert die Komposition. */
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(232, 67, 70, 0.07) 0%, rgba(232, 67, 70, 0) 52%),
		radial-gradient(90% 80% at 0% 100%, rgba(74, 83, 39, 0.05) 0%, rgba(74, 83, 39, 0) 60%),
		linear-gradient(180deg, var(--c-bg) 0%, var(--c-surface) 100%);
	/* Höhe des gescrapten, fixierten Headers (.site-header.stuck, 50px, z-index
	   9999). Er überlagert sonst den oberen Rand des Videos. */
	--header-height: 3.125rem;
	/* Oben so viel Luft, dass der Hero unter dem Header beginnt (Headerhöhe +
	   kleiner Gap); unten die gewohnte Rhythmik. So bleibt das Video vollständig
	   sichtbar, ohne dass Suche/CTA aus dem above-the-fold rutschen. */
	padding-top: calc(var(--header-height) + clamp(0.75rem, 3vw, 2rem));
	padding-bottom: clamp(1.25rem, 4vw, 3rem);
}

.ewtc-hero__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: stretch;
}

/* ---------- Linke Spalte: Video ---------- */
.ewtc-hero__media {
	position: relative;
	margin: 0;
	border-radius: var(--r-2xl);
	overflow: hidden;
	background: #1a1a1a;
	box-shadow: 0 1.25rem 3.5rem rgba(28, 28, 28, 0.18);
	/* Mobil bewusst eine kompakte Band-Höhe statt dominantem Block: das große
	   Medium darf above-the-fold nicht die Suche verdrängen (Meeting-Kernproblem
	   „Hero zu dominant"). Ab 64rem wird daraus wieder die volle Spaltenhöhe. */
	min-height: clamp(9.5rem, 30vw, 13rem);
}

/* feiner heller Innenrahmen – „gerahmtes" Luxus-Bild statt harter Kante */
.ewtc-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

.ewtc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: ewtc-hero-kenburns 22s ease-in-out infinite alternate;
}

/* sanfter Verlauf für Lesbarkeit der Bildunterschrift */
.ewtc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}

.ewtc-hero__media-caption {
	position: absolute;
	left: clamp(0.75rem, 2.5vw, 1.25rem);
	bottom: clamp(0.75rem, 2.5vw, 1.25rem);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.ewtc-hero__media-caption::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--c-primary);
}

/* ---------- Rechte Spalte: Inhalt ---------- */
.ewtc-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-3);
}

/* Mobil: Such-CTA + Beratungszeile über die USPs ziehen, damit die Suche
   above the fold landet. DOM-Reihenfolge bleibt logisch (Wert → Suche), nur
   die visuelle Reihenfolge wird getauscht. Ab 64rem (Desktop, zweispaltig)
   zurück zur Quellreihenfolge. */
.ewtc-hero__search { order: 3; }
.ewtc-hero__assist { order: 4; }
.ewtc-hero__usps { order: 5; }

.ewtc-hero__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

.ewtc-hero__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 0.125rem;
	background: var(--c-secondary);
}

.ewtc-hero .ewtc-hero__title {
	margin: 0;
	font-weight: 600;
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--c-text);
	text-wrap: balance;
	/* Markenstimme ist warm & persönlich – das gescrapte Theme erzwingt
	   uppercase auf h1; hier auf den intendierten Satzfall zurücksetzen
	   (design.md headline-display ist für Gemischtschreibung getuned). */
	text-transform: none;
}

.ewtc-hero__lead {
	margin: 0;
	max-width: 34rem;
	font-size: clamp(1rem, 1.3vw, 1.1875rem);
	line-height: 1.55;
	color: var(--c-text-muted);
}

/* ---------- USPs (Warum EWTC) ---------- */
.ewtc-hero__usps {
	list-style: none;
	margin: var(--space-1) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem 1.5rem;
}

.ewtc-hero__usp {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
}

.ewtc-hero__usp-icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(192, 31, 38, 0.1);
	color: var(--c-primary-text);
}

.ewtc-hero__usp-icon svg {
	width: 1rem;
	height: 1rem;
}

.ewtc-hero__usp-title {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-text);
}

.ewtc-hero__usp-desc {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--c-text-muted);
}

/* ---------- Such-Card ---------- */
.ewtc-hero__search {
	margin-top: var(--space-2);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-2xl);
	box-shadow: 0 0.75rem 2.25rem rgba(28, 28, 28, 0.08);
}

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

/* Das gescrapte Preissuche-Formular in der schmalen Spalte sauber stapeln.
   Robuste vertikale Stapelung (das Formular enthält eine versteckte
   Budget-Zelle, deshalb kein nth-child-Spaltenspan). */
.ewtc-hero__search .preissuche_form .grid-x {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

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

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

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

.ewtc-hero__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__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__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__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__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__search .preissuche_form .number-wrapper::after {
	content: none !important;
}

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

.ewtc-hero__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.25rem;
	/* !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__search .suche-btn:hover {
	background: #a81920 !important;
	border-color: #a81920 !important;
	transform: translateY(-1px);
}

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

/* Button-Zelle vertikal mit dem Nächte-Feld ausrichten */
.ewtc-hero__search .preissuche_form .cell.btn-cell {
	display: flex;
	align-items: flex-end;
}

/* ---------- Beratungs-/Telefon-Zeile (Erreichbarkeit) ---------- */
.ewtc-hero__assist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: var(--space-2) 0 0;
	font-size: 0.9375rem;
	color: var(--c-text-muted);
}

.ewtc-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--c-primary-text);
	text-decoration: none;
}

.ewtc-hero__phone:hover {
	text-decoration: underline;
}

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

.ewtc-hero__anfrage {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	font-weight: 600;
	color: var(--c-secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- 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: var(--r-lg, 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 Hero-Elementen ---------- */
.ewtc-hero a:focus-visible,
.ewtc-hero button:focus-visible,
.ewtc-hero input:focus-visible,
.ewtc-skip:focus-visible {
	outline: 0.1875rem solid var(--c-primary-text, #c01f26);
	outline-offset: 0.125rem;
	border-radius: var(--r-md, 0.3125rem);
}

/* =====================================================================
   Responsive: ab 48rem zweispaltig (Video links, Inhalt rechts)
   ===================================================================== */
@media (min-width: 48rem) {
	.ewtc-hero__usps {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64rem) {
	.ewtc-hero__inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: clamp(2rem, 4vw, 4rem);
	}

	.ewtc-hero__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.ewtc-hero__content {
		padding-block: clamp(1rem, 2vw, 2.5rem);
	}

	/* Desktop zeigt die ganze Spalte – zurück zur natürlichen Reihenfolge
	   (Eyebrow → Titel → Lead → USPs → Suche → Beratung). */
	.ewtc-hero__search,
	.ewtc-hero__assist,
	.ewtc-hero__usps {
		order: 0;
	}
}

/* großes Display: Titel darf atmen */
@media (min-width: 90rem) {
	.ewtc-hero__title {
		font-size: 3.75rem;
	}
}

/* =====================================================================
   Motion-Reduktion respektieren (a11y)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ewtc-hero__video {
		animation: none;
	}

	.ewtc-hero [style*="--d"],
	.ewtc-hero__content > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* sanfter, gestaffelter Load-Reveal der Inhaltsspalte */
@media (prefers-reduced-motion: no-preference) {
	.ewtc-hero__content > * {
		animation: ewtc-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.ewtc-hero__eyebrow { animation-delay: 0.05s; }
	.ewtc-hero__title { animation-delay: 0.12s; }
	.ewtc-hero__lead { animation-delay: 0.19s; }
	.ewtc-hero__usps { animation-delay: 0.26s; }
	.ewtc-hero__search { animation-delay: 0.33s; }
	.ewtc-hero__assist { animation-delay: 0.4s; }
}

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

@keyframes ewtc-hero-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.07);
	}
}