/* =====================================================================
   EWTC – Navigations-Mockups · gemeinsame Styles (Varianten 1/2/3)
   ---------------------------------------------------------------------
   Fokussierte, eigenständige Mockups: der Header/die Hauptnavigation ist
   der Star, der Seiteninhalt darunter ist bewusst schlank. Anders als die
   Hero-Varianten bauen diese Seiten NICHT auf dem gescrapten Theme auf –
   saubere Bühne, daher kaum !important-Gefechte gegen das Alt-CSS.

   Die optische Behandlung ist über alle drei Varianten identisch; nur der
   Menü-INHALT (welche Top-Level-Punkte, welche Mega-Inhalte) unterscheidet
   sich im HTML. Deshalb eine geteilte Datei für die Komponenten-Familie
   „Nav-Mockup" statt drei fast identischer Kopien.

   Tokens aus design.md. Markenrot #e84346 nur als große Fläche; Text/Icon/
   CTA in a11y-sicherem #c01f26 (≈6,1:1). Mobile-first (~56 % mobil, Clarity).
   Einheiten in rem, Tabs für Einrückung.
   ===================================================================== */

.ewtc-navpage {
	/* --- 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 – Eyebrows/Akzente */
	--c-bg: #ffffff;
	--c-surface: #f6f6f6;
	--c-surface-warm: #faf8f5;
	--c-text: #3c3c3b;
	--c-text-muted: #6b6b6a;
	--c-border: #e2e2e1;
	--c-border-strong: rgba(60, 60, 59, 0.16);

	--r-sm: 0.25rem;
	--r-md: 0.3125rem;
	--r-lg: 0.5rem; /* design.md rounded.lg 8px */
	--r-xl: 0.75rem;
	--r-2xl: 0.9375rem;
	--r-pill: 62.4375rem;

	--font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1.25rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4.5rem;

	/* Header-Höhe als Layout-Token (wie im echten System empfohlen) – steuert
	   sowohl die sticky-Header-Höhe als auch die Scroll-Clearance darunter. */
	--header-h: 4.5rem;

	margin: 0;
	font-family: var(--font-sans);
	color: var(--c-text);
	background: var(--c-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.ewtc-navpage *,
.ewtc-navpage *::before,
.ewtc-navpage *::after {
	box-sizing: border-box;
}

/* ---------- Skip-Link (a11y, UX-Review Finding #3) ---------- */
.ewtc-skip {
	position: absolute;
	left: 0.75rem;
	top: -4rem;
	z-index: 1100;
	padding: 0.625rem 1rem;
	border-radius: var(--r-lg);
	background: var(--c-primary-text);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.18s ease;
}

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

/* =====================================================================
   Header / Hauptnavigation
   ===================================================================== */
.ewtc-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
}

.ewtc-nav__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 82rem;
	min-height: var(--header-h);
	margin-inline: auto;
	padding: 0.625rem clamp(1rem, 4vw, 2.5rem);
}

/* ---------- Marke: Logo + Claim ---------- */
.ewtc-nav__brand {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1rem;
	text-decoration: none;
	color: var(--c-text);
	flex: none;
}

.ewtc-nav__logo {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--c-primary-text);
}

.ewtc-nav__claim {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* ---------- Header-Suche (primärer Pfad, Baymard BP2) ----------
   Im Top-Bar nur auf breiten Screens (≥ 80rem) sichtbar – sonst hat die
   5-Punkt-Leiste (Variante 2) keinen Platz und der Anfrage-CTA würde
   abgeschnitten. Auf Mobile liegt die Suche oben im Drawer; die prominente
   above-the-fold-Suche selbst trägt der Homepage-Hero (Varianten A/B/C). */
.ewtc-nav__search {
	display: none;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 8rem;
	min-width: 0;
	max-width: 22rem;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: var(--c-surface);
}

@media (min-width: 80rem) {
	.ewtc-nav__search {
		display: flex;
	}
}

.ewtc-nav__search svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--c-primary-text);
}

.ewtc-nav__search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--c-text);
}

.ewtc-nav__search input::placeholder {
	color: var(--c-text-muted);
}

.ewtc-nav__search input:focus {
	outline: none;
}

.ewtc-nav__search:focus-within {
	outline: 0.1875rem solid var(--c-primary-text);
	outline-offset: 0.125rem;
}

/* ---------- Aktionen rechts: Telefon + Anfrage ---------- */
.ewtc-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	flex: none;
}

.ewtc-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0 0.5rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--c-primary-text);
	text-decoration: none;
	white-space: nowrap;
}

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

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

.ewtc-nav__phone-label {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.ewtc-nav__phone-label small {
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.ewtc-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--c-primary-text);
	border-radius: var(--r-pill);
	background: var(--c-primary-text);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.ewtc-nav__cta:hover {
	background: var(--c-primary-text-dark);
	border-color: var(--c-primary-text-dark);
}

/* ---------- Hamburger (nur mobil sichtbar) ---------- */
.ewtc-nav__burger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-bg);
	color: var(--c-text);
	font: inherit;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}

.ewtc-nav__burger svg {
	width: 1.25rem;
	height: 1.25rem;
}

.ewtc-nav__burger-x {
	display: none;
}

/* Drill-down-Chrome (mobil per JS injiziert): auf Desktop unsichtbar. */
.ewtc-nav__drawer-head,
.ewtc-nav__back {
	display: none;
}

/* =====================================================================
   Menü-Container (Desktop: horizontale Leiste · Mobil: Off-canvas-Drawer)
   ===================================================================== */
.ewtc-nav__menu-wrap {
	flex: none;
}

.ewtc-nav__menu {
	list-style: none;
	display: flex;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.ewtc-nav__item {
	display: flex;
}

/* Top-Level-Eintrag: echtes <button> bzw. <a> – kein href="#" */
.ewtc-nav__top {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: var(--r-lg);
	background: transparent;
	color: var(--c-text);
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.ewtc-nav__top:hover {
	background: var(--c-surface);
	color: var(--c-primary-text);
}

.ewtc-nav__top svg {
	width: 0.75rem;
	height: 0.75rem;
	transition: transform 0.18s ease;
}

.ewtc-nav__item[data-open="true"] .ewtc-nav__top {
	background: var(--c-surface);
	color: var(--c-primary-text);
}

.ewtc-nav__item[data-open="true"] .ewtc-nav__top svg {
	transform: rotate(180deg);
}

/* ---------- Mega-Panel ----------
   Positioniert relativ zum sticky Header (.ewtc-nav), nicht zum einzelnen
   Menüpunkt – sonst laufen die breiten 5-Spalten-Panels rechtsseitig aus dem
   Viewport. Standardbreite Panels werden mittig unter dem Header zentriert
   (gängiges Full-Width-Mega-Menü-Muster); schmale Panels per --right am rechten
   Rand verankert. Reveal nur über Opacity/Visibility, damit das translateX(-50%)
   zum Zentrieren erhalten bleibt. */
.ewtc-nav__mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 50;
	max-width: min(66rem, 94vw);
	padding: var(--space-4);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	box-shadow: 0 1.25rem 3rem rgba(20, 16, 14, 0.16);
	/* Innen-Layout in Zeilen: Kopf (voll) · Spalten · Cross-Selling-Band (voll) ·
	   Fußzeile (voll). Reihenfolge per order, damit das Promo-Band im DOM vor dem
	   Spalten-Grid stehen kann (eine einzige Edit-Stelle), optisch aber danach. */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--space-4);
	row-gap: var(--space-3);
	/* Geschlossen-Zustand (Basis): unsichtbar, aber per JS/Hover steuerbar. */
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity 0.16s ease, visibility 0.16s;
}

/* Öffnen per Hover (ohne JS nutzbar), per Tastatur-Fokus, und per JS-Klick. */
.ewtc-nav__item:hover .ewtc-nav__mega,
.ewtc-nav__item:focus-within .ewtc-nav__mega,
.ewtc-nav__item[data-open="true"] .ewtc-nav__mega {
	opacity: 1;
	visibility: visible;
}

/* Schmales Panel (z. B. „Über EWTC", rechter Menüpunkt): unter dem eigenen
   Trigger verankern und rechtsbündig öffnen – NICHT am Header-Rand (sonst klafft
   bei zentriertem Menü eine große Lücke nach rechts). Dafür bekommt nur dieses
   Item einen eigenen Positionierungs-Kontext. */
.ewtc-nav__item:has(> .ewtc-nav__mega--right) {
	position: relative;
}

.ewtc-nav__mega--right {
	left: auto;
	right: 0;
	transform: none;
}

.ewtc-nav__mega-head {
	order: 0;
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

/* ---------- Regionen-Spalten (Reiseziele/Hotels) ---------- */
/* Feste Spaltenbreiten, damit der `width:max-content`-Panel-Container die Breite
   korrekt berechnet (auto-fit kollabiert unter max-content auf 2 Spalten). */
.ewtc-nav__regions {
	display: grid;
	grid-template-columns: repeat(5, 9.5rem);
	gap: var(--space-3) var(--space-4);
}

/* Schmalere Regionen-Menüs (z. B. nur Rundreise-Länder) brauchen keine 5 Spalten. */
.ewtc-nav__regions--narrow {
	grid-template-columns: repeat(3, 10rem);
}

/* Zwei Spalten (z. B. Kreuzfahrten: Hochsee / Fluss). */
.ewtc-nav__regions--duo {
	grid-template-columns: repeat(2, 13rem);
}

.ewtc-nav__col-title {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--c-text);
}

.ewtc-nav__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ewtc-nav__links a {
	display: block;
	padding: 0.4rem 0.5rem;
	margin-left: -0.5rem;
	border-radius: var(--r-md);
	color: var(--c-text-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.ewtc-nav__links a:hover {
	background: var(--c-surface);
	color: var(--c-primary-text);
}

/* „Alle anzeigen" / Reiseart-Chips als Fußzeile des Mega-Panels */
.ewtc-nav__mega-foot {
	order: 3;
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-top: var(--space-3);
	border-top: 1px solid var(--c-border);
}

.ewtc-nav__foot-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-text-muted);
}

.ewtc-nav__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.ewtc-nav__chip:hover {
	border-color: var(--c-primary-text);
	color: var(--c-primary-text);
}

.ewtc-nav__alllink {
	margin-left: auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-primary-text);
	text-decoration: none;
}

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

/* Spalten-Grid in Zeile 2 (order), Promo-Band in Zeile 3 (siehe .ewtc-nav__mega) */
.ewtc-nav__regions,
.ewtc-nav__themes {
	order: 1;
}

/* ---------- Cross-Selling-Band im Mega-Menü ----------
   Volle Breite unter den Spalten: bewirbt eine passende Zusatzleistung/-kategorie
   (Rundreise zum Hotel, Hotel zur Kreuzfahrt, Secret Deal …) mit Bild. */
.ewtc-nav__promo {
	order: 2;
	flex: 1 0 100%;
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-surface-warm);
	color: var(--c-text);
	text-decoration: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ewtc-nav__promo:hover {
	border-color: var(--c-primary-text);
	box-shadow: 0 0.5rem 1.25rem rgba(20, 16, 14, 0.1);
}

.ewtc-nav__promo img {
	flex: none;
	width: 9rem;
	align-self: stretch;
	object-fit: cover;
	display: block;
}

.ewtc-nav__promo-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	padding: 0.7rem 0.95rem;
}

.ewtc-nav__promo-eyebrow {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-primary-text);
}

.ewtc-nav__promo-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--c-text);
}

.ewtc-nav__promo-text {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
}

.ewtc-nav__promo-cta {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-primary-text);
}

.ewtc-nav__promo-cta::after {
	content: " →";
}

/* ---------- Themen-Tiles (Reisethemen/Themenhotels) ---------- */
.ewtc-nav__themes {
	display: grid;
	grid-template-columns: repeat(5, 10rem);
	gap: var(--space-3) var(--space-4);
}

.ewtc-nav__theme-group-title {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

.ewtc-nav__tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ewtc-nav__tiles a {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.4rem 0.5rem;
	margin-left: -0.5rem;
	border-radius: var(--r-md);
	color: var(--c-text-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.ewtc-nav__tiles a:hover {
	background: var(--c-surface);
	color: var(--c-primary-text);
}

/* dezentes „neu/geplant"-Badge für noch nicht existierende Ausbauseiten */
.ewtc-nav__badge {
	flex: none;
	padding: 0.05rem 0.4rem;
	border-radius: var(--r-pill);
	background: rgba(74, 83, 39, 0.12);
	color: var(--c-secondary);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Service-/Über-uns-Liste (kompakte Spalten) ---------- */
.ewtc-nav__simple {
	columns: 2;
	column-gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 22rem;
}

.ewtc-nav__simple a {
	display: block;
	padding: 0.4rem 0.5rem;
	margin-left: -0.5rem;
	border-radius: var(--r-md);
	color: var(--c-text-muted);
	font-size: 0.9375rem;
	text-decoration: none;
	break-inside: avoid;
}

.ewtc-nav__simple a:hover {
	background: var(--c-surface);
	color: var(--c-primary-text);
}

/* =====================================================================
   Fokus-Sichtbarkeit (a11y) – einheitlicher Ring
   ===================================================================== */
.ewtc-navpage a:focus-visible,
.ewtc-navpage button:focus-visible,
.ewtc-navpage input:focus-visible {
	outline: 0.1875rem solid var(--c-primary-text);
	outline-offset: 0.125rem;
	border-radius: var(--r-sm);
}

/* =====================================================================
   Seiteninhalt unterhalb des Headers (bewusst schlank)
   ===================================================================== */
.ewtc-navpage main {
	display: block;
}

/* ---------- Hero-Streifen ---------- */
.ewtc-navhero {
	padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 2.5rem);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.85)),
		var(--c-surface-warm);
	border-bottom: 1px solid var(--c-border);
}

.ewtc-navhero__inner {
	max-width: 60rem;
	margin-inline: auto;
}

.ewtc-navhero__eyebrow {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

.ewtc-navhero__title {
	margin: 0 0 var(--space-2);
	font-size: clamp(1.875rem, 4.5vw, 2.75rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--c-text);
}

.ewtc-navhero__lead {
	margin: 0;
	max-width: 42rem;
	font-size: 1.0625rem;
	color: var(--c-text-muted);
}

/* ---------- Erklär-Band (Kundentext: „So funktioniert dieses Modell") ---------- */
.ewtc-explain {
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 2.5rem);
}

.ewtc-explain__inner {
	max-width: 50rem;
	margin-inline: auto;
}

.ewtc-explain__tag {
	display: inline-block;
	margin-bottom: var(--space-2);
	padding: 0.3rem 0.75rem;
	border-radius: var(--r-pill);
	background: rgba(232, 67, 70, 0.1);
	color: var(--c-primary-text);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ewtc-explain__title {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--c-text);
}

.ewtc-explain__body {
	margin: 0 0 var(--space-3);
	font-size: 1.0625rem;
	color: var(--c-text);
}

.ewtc-explain__body:last-child {
	margin-bottom: 0;
}

.ewtc-explain__list {
	margin: 0 0 var(--space-3);
	padding-left: 1.25rem;
	color: var(--c-text);
}

.ewtc-explain__list li {
	margin-bottom: 0.5rem;
	font-size: 1.0625rem;
}

.ewtc-explain strong {
	color: var(--c-text);
}

.ewtc-explain__decision {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

@media (min-width: 40rem) {
	.ewtc-explain__decision {
		grid-template-columns: 1fr 1fr;
	}
}

.ewtc-explain__card {
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-surface);
}

.ewtc-explain__card h3 {
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

.ewtc-explain__card--pro h3 { color: var(--c-secondary); }
.ewtc-explain__card--con h3 { color: var(--c-primary-text); }

.ewtc-explain__card p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--c-text-muted);
}

/* ---------- Seitenstruktur-Baum (Filetree: „Wo jede Seite landet") ----------
   Macht die komplette Menü-Hierarchie sichtbar – vom Hauptmenüpunkt über die
   Untergruppe bis zur einzelnen Zielseite. Bewusst im „Datei-Explorer"-Look
   (Verbindungslinien, Panel) statt als reine Liste, damit der Kunde auf einen
   Blick erkennt, wo welche Seite landet. */
.ewtc-tree {
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 2.5rem);
	background: var(--c-surface-warm);
	border-top: 1px solid var(--c-border);
}

.ewtc-tree__inner {
	max-width: 60rem;
	margin-inline: auto;
}

.ewtc-tree__label {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

.ewtc-tree__title {
	margin: 0 0 var(--space-2);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--c-text);
}

.ewtc-tree__hint {
	margin: 0 0 var(--space-4);
	max-width: 42rem;
	font-size: 1rem;
	color: var(--c-text-muted);
}

/* Panel im „Datei-Explorer"-Look */
.ewtc-tree__panel {
	padding: clamp(1.25rem, 3.5vw, 2rem);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	box-shadow: 0 0.75rem 2rem rgba(20, 16, 14, 0.06);
}

.ewtc-tree__root {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top-Level-Knoten (Hauptmenüpunkt) – durch gestrichelte Linie getrennt */
.ewtc-tree__l1 + .ewtc-tree__l1 {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--c-border);
}

.ewtc-tree__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
}

.ewtc-tree__l1 > .ewtc-tree__head {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-text);
}

.ewtc-tree__l1 > .ewtc-tree__head svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--c-primary-text);
}

.ewtc-tree__tag {
	padding: 0.1rem 0.5rem;
	border-radius: var(--r-pill);
	background: rgba(74, 83, 39, 0.12);
	color: var(--c-secondary);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ewtc-tree__tag--filter {
	background: rgba(232, 67, 70, 0.1);
	color: var(--c-primary-text);
}

/* Verschachtelte Ebene (Untergruppen) mit Verbindungslinien */
.ewtc-tree__kids {
	list-style: none;
	margin: 0.4rem 0 0;
	padding-left: 0.65rem;
}

.ewtc-tree__kids > li {
	position: relative;
	padding-left: 1.4rem;
}

/* senkrechte Verbindungslinie */
.ewtc-tree__kids > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: var(--c-border-strong);
}

/* waagrechter Abzweig zum Knoten */
.ewtc-tree__kids > li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 0.95rem;
	height: 1px;
	background: var(--c-border-strong);
}

/* letztes Kind: senkrechte Linie am Abzweig stoppen (Eck-Form) */
.ewtc-tree__kids > li:last-child::before {
	height: 0.85rem;
}

.ewtc-tree__l2 > .ewtc-tree__head {
	min-height: 1.7rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-text);
}

/* Seiten-Blätter als umbrechende, mittelpunktgetrennte Liste */
.ewtc-tree__pages {
	list-style: none;
	margin: 0.15rem 0 0.5rem;
	padding: 0;
}

.ewtc-tree__l1 > .ewtc-tree__pages {
	margin: 0.5rem 0 0;
	padding-left: 1rem;
	border-left: 1px solid var(--c-border-strong);
}

.ewtc-tree__pages li {
	display: inline;
}

.ewtc-tree__pages li:not(:last-child)::after {
	content: "·";
	margin: 0 0.4rem;
	color: var(--c-border-strong);
}

.ewtc-tree__pages a {
	color: var(--c-text-muted);
	font-size: 0.875rem;
	line-height: 1.95;
	text-decoration: none;
}

.ewtc-tree__pages a:hover {
	color: var(--c-primary-text);
	text-decoration: underline;
}

.ewtc-tree__pages .ewtc-nav__badge {
	margin-left: 0.3rem;
	vertical-align: middle;
}

/* Legende unter dem Panel */
.ewtc-tree__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: var(--space-3) 0 0;
	font-size: 0.8125rem;
	color: var(--c-text-muted);
}

.ewtc-tree__legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* ---------- Kontext-Services-Streifen (Mietwagen etc. auf „Hotelseite") ---------- */
.ewtc-context {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 2.5rem);
	background: var(--c-surface);
	border-top: 1px solid var(--c-border);
}

.ewtc-context__inner {
	max-width: 60rem;
	margin-inline: auto;
}

.ewtc-context__label {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

.ewtc-context__title {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-weight: 700;
}

.ewtc-context__hint {
	margin: 0 0 var(--space-3);
	font-size: 1rem;
	color: var(--c-text-muted);
}

.ewtc-context__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-2);
}

.ewtc-context__svc {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-bg);
}

.ewtc-context__svc strong {
	font-size: 0.9375rem;
	color: var(--c-text);
}

.ewtc-context__svc span {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
}

/* ---------- Footer ---------- */
.ewtc-navfoot {
	padding: var(--space-4) clamp(1rem, 5vw, 2.5rem);
	background: var(--c-text);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
}

.ewtc-navfoot__inner {
	max-width: 60rem;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
}

.ewtc-navfoot a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.ewtc-navfoot a:hover {
	color: #fff;
	text-decoration: underline;
}

/* =====================================================================
   Persistenter Bottom-CTA (mobil) – Anrufen / Anfrage
   Erscheint nach dem Hero, verdeckt dank body-padding keinen Inhalt.
   ===================================================================== */
.ewtc-cta-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	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.95);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--c-border);
	box-shadow: 0 -0.5rem 1.5rem rgba(20, 16, 14, 0.12);
}

.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.75rem 1rem;
	border-radius: var(--r-lg);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

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

.ewtc-cta-dock__btn--phone {
	background: #fff;
	color: var(--c-primary-text);
	border: 1px solid var(--c-primary-text);
}

.ewtc-cta-dock__btn--anfrage {
	background: var(--c-primary-text);
	color: #fff;
}

.ewtc-cta-dock__btn--anfrage:hover {
	background: var(--c-primary-text-dark);
}

/* Backdrop hinter dem mobilen Drawer */
.ewtc-nav__backdrop {
	display: none;
}

/* =====================================================================
   MOBILE  (< 72rem): Off-canvas-Drawer + Akkordeons
   Breakpoint bei 72rem (statt 64rem), damit die 5-Punkt-Leiste (Variante 2)
   im mittleren Bereich nicht gequetscht wird, sondern sauber in den Drawer geht.
   ===================================================================== */
@media (max-width: 71.99rem) {
	/* Body-Offset, damit der fixe Bottom-CTA keinen Footer-Inhalt verdeckt. */
	.ewtc-navpage {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
	}

	/* Header-Zeile: Marke links, Telefon + Burger rechts; Suche & Menü wandern
	   in den Drawer. Anfrage-CTA übernimmt der Bottom-Dock. */
	.ewtc-nav__search {
		display: none;
	}

	.ewtc-nav__actions .ewtc-nav__cta {
		display: none;
	}

	/* Telefon im Header auf das Icon reduzieren: Die volle Nummer würde die
	   schmale Kopfzeile sprengen und den Menü-Button quetschen. Die prominente
	   Nummer trägt der Desktop-Header; mobil das beschriftete „Anrufen" im
	   Bottom-Dock. Das Icon bleibt als Tap-to-Call-Affordance. */
	.ewtc-nav__phone-label {
		display: none;
	}

	.ewtc-nav__burger {
		display: inline-flex;
		order: 3;
		/* Nie zugunsten von Marke/Telefon zusammenquetschen – Label muss lesbar bleiben. */
		flex: none;
	}

	/* Drawer-Container */
	.ewtc-nav__menu-wrap {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 1050;
		width: min(22rem, 92vw);
		/* Kein Padding: die Drill-down-Panels (position:absolute; inset:0) sollen
		   den Drawer randlos überdecken. Innenabstände tragen die Kinder selbst. */
		padding: 0;
		background: var(--c-bg);
		box-shadow: -0.75rem 0 2rem rgba(20, 16, 14, 0.22);
		/* Eingeschobene Panels seitlich abschneiden statt scrollen lassen. */
		overflow: hidden;
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform 0.24s ease;
	}

	.ewtc-nav[data-drawer="true"] .ewtc-nav__menu-wrap {
		transform: translateX(0);
	}

	.ewtc-nav[data-drawer="true"] .ewtc-nav__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1040;
		background: rgba(20, 16, 14, 0.45);
		border: 0;
	}

	/* Drawer-Kopf (Top-Ebene): Titel + sichtbares Schließen.
	   Wird von einem eingeschobenen Panel überdeckt – dort führt „Zurück" raus. */
	.ewtc-nav__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 2.75rem;
		margin: 0.75rem 0.5rem 0.5rem 1rem;
	}

	.ewtc-nav__drawer-title {
		font-size: 1.0625rem;
		font-weight: 700;
		color: var(--c-text);
	}

	.ewtc-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 0;
		border-radius: var(--r-lg);
		background: transparent;
		color: var(--c-text);
		cursor: pointer;
	}

	.ewtc-nav__close svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.ewtc-nav__close:hover {
		background: var(--c-surface);
		color: var(--c-primary-text);
	}

	/* Drawer-Suche oben angepinnt */
	.ewtc-nav__drawer-search {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		margin: 0 1rem 1rem;
		padding: 0 0.875rem;
		border: 1px solid var(--c-border);
		border-radius: var(--r-pill);
		background: var(--c-surface);
	}

	.ewtc-nav__drawer-search svg {
		width: 1.15rem;
		height: 1.15rem;
		color: var(--c-primary-text);
	}

	.ewtc-nav__drawer-search input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		background: transparent;
		font: inherit;
	}

	.ewtc-nav__drawer-search input:focus {
		outline: none;
	}

	/* Menü vertikal, Top-Level als Akkordeon */
	.ewtc-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ewtc-nav__item {
		flex-direction: column;
		border-bottom: 1px solid var(--c-border);
	}

	/* Desktop verankert das schmale „--right"-Panel an seinem Item (position:
	   relative). Im Drawer muss das Panel relativ zum Drawer einschieben, nicht
	   relativ zum Listenpunkt – sonst startet es mitten in der Liste. */
	.ewtc-nav__item:has(> .ewtc-nav__mega--right) {
		position: static;
	}

	.ewtc-nav__top {
		width: 100%;
		justify-content: space-between;
		min-height: 3rem;
		padding-inline: 1rem;
		border-radius: 0;
		font-size: 1.0625rem;
	}

	/* Chevron zeigt nach rechts („tiefer gehen"), nicht nach unten/auf. */
	.ewtc-nav__top svg,
	.ewtc-nav__item[data-open="true"] .ewtc-nav__top svg {
		transform: rotate(-90deg);
	}

	/* Drill-down: jede Sektion wird zum eigenen Screen, der von rechts
	   einschiebt und den ganzen Drawer überdeckt (inkl. Kopf & Suche).
	   visibility:hidden im Ruhezustand → geschlossene Panels sind NICHT im
	   Tab-Order/a11y-Tree (kein Off-canvas-Fokus-Leak). */
	.ewtc-nav__mega,
	.ewtc-nav__mega--right {
		position: absolute;
		inset: 0;
		left: auto;
		right: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
		max-width: none;
		padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: 0;
		background: var(--c-bg);
		box-shadow: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 1;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.24s ease, visibility 0.24s;
	}

	/* Hover/focus-within darf auf Mobile NICHT öffnen – nur expliziter Klick. */
	.ewtc-nav__item:hover .ewtc-nav__mega,
	.ewtc-nav__item:focus-within .ewtc-nav__mega {
		visibility: hidden;
		transform: translateX(100%);
	}

	.ewtc-nav__item[data-open="true"] .ewtc-nav__mega {
		visibility: visible;
		transform: translateX(0);
	}

	/* Desktop nutzt flex:1 0 100% (Vollbreite im Zeilen-Layout). Im vertikalen
	   Drawer-Panel würde die 100%-Basis die Höhe an sich reißen – auf
	   natürliche Höhe zurücksetzen, Reihenfolge per `order` bleibt erhalten. */
	.ewtc-nav__mega > * {
		flex: 0 0 auto;
	}

	/* „Zurück" als Kopfzeile jedes Sektions-Panels. */
	.ewtc-nav__back {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		align-self: flex-start;
		min-height: 2.75rem;
		margin: 0 0 0.5rem -0.4rem;
		padding: 0.4rem 0.5rem;
		border: 0;
		background: transparent;
		color: var(--c-primary-text);
		font: inherit;
		font-weight: 600;
		font-size: 0.9375rem;
		cursor: pointer;
	}

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

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

	/* Cross-Selling-Band im Drawer kompakter */
	.ewtc-nav__promo img {
		width: 7rem;
	}

	.ewtc-nav__regions,
	.ewtc-nav__themes {
		grid-template-columns: 1fr;
		gap: var(--space-3);
		max-width: none;
	}

	.ewtc-nav__simple {
		columns: 1;
		min-width: 0;
	}

	.ewtc-nav__mega-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.ewtc-nav__alllink {
		margin-left: 0;
	}

	/* etwas größere Tap-Targets im Drawer */
	.ewtc-nav__links a,
	.ewtc-nav__tiles a,
	.ewtc-nav__simple a {
		padding: 0.7rem 0.5rem;
	}
}

/* =====================================================================
   DESKTOP (≥ 72rem): kein Hamburger, kein Drawer, kein Bottom-Dock
   ===================================================================== */
@media (min-width: 72rem) {
	.ewtc-nav__burger,
	.ewtc-nav__drawer-search,
	.ewtc-cta-dock,
	.ewtc-nav__backdrop {
		display: none;
	}
}

/* sehr schmaler Viewport (≤ 360 px): Kopfzeile enger schnüren */
@media (max-width: 22.5rem) {
	.ewtc-nav__bar {
		gap: 0.5rem;
	}
}

/* =====================================================================
   Motion (a11y: prefers-reduced-motion)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ewtc-nav__mega,
	.ewtc-nav__menu-wrap,
	.ewtc-nav__top svg {
		transition: none;
	}
}