/**
 * KW Lobby — Haupt-Navigation CSS
 * Pre-Navigation + Main-Nav + Logo + Buchungsbutton
 * Mobile First: 320px → 768px (Pre-Nav Icon-only) → 1024px (Desktop-Nav) → 1200px (Volltext)
 */

/* ============================================================
   TOKENS
   ============================================================ */

:root {
	/* Layout */
	--kwl-nav-height: 5.5rem;
	--kwl-nav-height-sticky: 3.5rem;
	--kwl-nav-prenav-height: 2.5rem;
	--kwl-nav-z: 9999;
	--kwl-nav-max-width: 1400px;

	/* Glassmorphism (überschrieben per Inline-Style aus PHP) */
	--kwl-nav-glass-blur: 20px;
	--kwl-nav-glass-opacity: 0.88;
	--kwl-nav-glass-opacity-sticky: 0.92;

	/* Colors (erben vom Design-System) */
	--kwl-nav-bg: var(--kwl-bg, #ffffff);
	--kwl-nav-text: var(--kwl-text, #1a202c);
	--kwl-nav-link-hover: var(--kwl-primary, #00315d);
	--kwl-nav-prenav-bg: var(--kwl-primary, #00315d);
	--kwl-nav-prenav-text: var(--kwl-btn-text, #ffffff);
	--kwl-nav-book-bg: var(--kwl-accent, #BD9B5C);
	--kwl-nav-book-text: var(--kwl-btn-text, #ffffff);
	--kwl-nav-mega-bg: var(--kwl-nav-bg, var(--kwl-bg, #ffffff));
	--kwl-nav-border: var(--kwl-border, #e2e8f0);

	/* Typography */
	--kwl-nav-fsize: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem);
	--kwl-nav-fsize-prenav: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);

	/* Animation (überschrieben per Inline-Style aus PHP) */
	--kwl-nav-transition: 250ms ease;

	/* Logo */
	--kwl-nav-logo-width: clamp(100px, 10vw, 160px);
	--kwl-nav-logo-scale: 1;
	--kwl-nav-logo-scale-sticky: 0.75;

}

/* ============================================================
   ELEMENTOR RESET (verhindert Elementor-Global-Override)
   ============================================================ */

.kwl-header a,
.kwl-pre-nav a,
.kwl-header a:hover,
.kwl-pre-nav a:hover,
.kwl-header a:active,
.kwl-pre-nav a:active {
	color: inherit;
	text-decoration: none;
}

.kwl-header button,
.kwl-pre-nav button,
.kwl-header button:hover,
.kwl-pre-nav button:hover {
	color: inherit;
	border: none;
	background: none;
	font-size: inherit;
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.kwl-skip-link {
	position: absolute;
	top: -100%;
	left: var(--kwl-space-md, 1rem);
	z-index: calc(var(--kwl-nav-z) + 1);
	padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
	background: var(--kwl-nav-bg);
	color: var(--kwl-nav-text);
	border-radius: var(--kwl-radius-sm, 4px);
	font-size: var(--kwl-fsize-small, 0.875rem);
	text-decoration: none;
	box-shadow: var(--kwl-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
}

.kwl-skip-link:focus-visible {
	top: var(--kwl-space-sm, 0.5rem);
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ============================================================
   PRE-NAVIGATION
   ============================================================ */

.kwl-pre-nav {
	background: var(--kwl-nav-prenav-bg);
	color: var(--kwl-nav-prenav-text);
	font-size: var(--kwl-nav-fsize-prenav);
	height: var(--kwl-nav-prenav-height);
	overflow: hidden;
	/* Layering: Pre-Nav liegt visuell ueber der Main-Nav */
	position: relative;
	z-index: 1;
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--kwl-nav-prenav-bg) 30%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	/* Mobile: ausgeblendet */
	display: none;
}

.kwl-pre-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kwl-space-md, 1rem);
	max-width: var(--kwl-nav-max-width);
	margin: 0 auto;
	padding: 0 var(--kwl-space-md, 1rem);
	height: var(--kwl-nav-prenav-height);
}

.kwl-pre-nav__items {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	flex: 1 1 0%;
}

.kwl-pre-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.125rem 0.375rem;
	border-radius: var(--kwl-radius-sm, 4px);
	transition: opacity var(--kwl-nav-transition), color var(--kwl-nav-transition), transform var(--kwl-nav-transition);
	min-height: 28px;
}

a.kwl-pre-nav__item:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* Vertikale Trennlinien zwischen Items */
.kwl-pre-nav__item + .kwl-pre-nav__item {
	border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	margin-left: 0.125rem;
	padding-left: calc(0.375rem + 0.25rem);
}

.kwl-pre-nav__icon {
	flex-shrink: 0;
	pointer-events: none;
}

/* Kind-Elemente duerfen den Hover des Eltern-<a> nicht unterbrechen */
.kwl-pre-nav__text,
.kwl-pre-nav__short {
	pointer-events: none;
}

/* Responsive Text-Stufen: Per Default Icon-only (Text ab 1024px, Volltext ab 1200px) */
.kwl-pre-nav__text {
	display: none;
}

.kwl-pre-nav__short {
	display: none;
}

/* Promo */
.kwl-pre-nav__promo {
	flex: 0 1 auto;
	min-width: 0;
	text-align: center;
}

.kwl-pre-nav__promo-link {
	color: inherit;
	text-decoration: none;
	font-weight: var(--kwl-fw-bold);
	padding: 0.125rem 0.625rem;
	border-radius: 100px;
	background: color-mix(in srgb, var(--kwl-nav-prenav-text) 15%, transparent);
	transition: background var(--kwl-nav-transition), transform var(--kwl-nav-transition);
	display: inline-flex;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kwl-pre-nav__promo-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-pre-nav__promo-short {
	display: inline;
}

.kwl-pre-nav__promo-full {
	display: none;
}

/* Social */
.kwl-pre-nav__social {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.kwl-pre-nav__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	min-width: 28px;
	min-height: 28px;
	border-radius: var(--kwl-radius-sm, 4px);
	transition: opacity var(--kwl-nav-transition), color var(--kwl-nav-transition), transform var(--kwl-nav-transition);
}

.kwl-pre-nav__social-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* Right container (Actions + Lang Switcher) */
.kwl-pre-nav__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex: 1 1 0%;
}

/* Separator */
.kwl-pre-nav__separator {
	display: block;
	width: 1px;
	height: 16px;
	background: currentColor;
	opacity: 0.2;
	flex-shrink: 0;
}

/* Right-Actions (Bewertungen, Newsletter) */
.kwl-pre-nav__action {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.125rem 0.375rem;
	border-radius: var(--kwl-radius-sm, 4px);
	transition: opacity var(--kwl-nav-transition), color var(--kwl-nav-transition), transform var(--kwl-nav-transition);
	min-height: 28px;
}

a.kwl-pre-nav__action:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

span.kwl-pre-nav__action:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-pre-nav__action + .kwl-pre-nav__action {
	border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	margin-left: 0.125rem;
	padding-left: calc(0.375rem + 0.25rem);
}

.kwl-pre-nav__action-icon {
	flex-shrink: 0;
	pointer-events: none;
}

.kwl-pre-nav__action-text {
	display: none;
	pointer-events: none;
}

/* Language Switcher */
.kwl-pre-nav__lang {
	position: relative;
}

.kwl-pre-nav__lang-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 28px;
	padding: 0.125rem 0.375rem;
	color: inherit;
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	line-height: 1;
	background: none;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: var(--kwl-radius-sm, 4px);
	cursor: pointer;
	transition: background var(--kwl-nav-transition), border-color var(--kwl-nav-transition);
}

.kwl-pre-nav__lang-trigger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-pre-nav__lang-chevron {
	transition: transform var(--kwl-nav-transition);
	flex-shrink: 0;
}

.kwl-pre-nav__lang.is-open .kwl-pre-nav__lang-chevron {
	transform: rotate(180deg);
}

/* Dropdown */
.kwl-pre-nav__lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 140px;
	padding: 0.25rem;
	margin: 0;
	list-style: none;
	background: var(--kwl-nav-bg, var(--kwl-bg, #ffffff));
	color: var(--kwl-nav-text, var(--kwl-text, #1a202c));
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-sm, 4px);
	box-shadow: var(--kwl-shadow-md);
	z-index: 10;
}

.kwl-pre-nav__lang.is-open .kwl-pre-nav__lang-dropdown {
	display: block;
}

.kwl-pre-nav__lang-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.375rem 0.5rem;
	color: inherit;
	text-decoration: none;
	font-size: var(--kwl-fsize-small, 0.875rem);
	border-radius: var(--kwl-radius-sm, 4px);
	transition: background var(--kwl-nav-transition);
}

.kwl-pre-nav__lang-item:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-pre-nav__lang-item.is-active {
	font-weight: var(--kwl-fw-semibold);
}

.kwl-pre-nav__lang-flag {
	flex-shrink: 0;
	border-radius: 1px;
}

/* Short-Code im Dropdown standardmäßig ausgeblendet, Name sichtbar */
.kwl-pre-nav__lang-short {
	display: none;
}

.kwl-pre-nav__lang-name {
	flex: 1;
}

/* ============================================================
   HEADER WRAP (Double-Sticky fuer jitterfreies Pre-Nav-Scrollaway)
   Outer sticky: top = -(pre-nav-hoehe) → Pre-Nav gleitet ueber Viewport-Kante
   Inner sticky (.kwl-header): top = 0 → Main-Nav klebt am Viewport
   ============================================================ */

.kwl-header-wrap {
	z-index: var(--kwl-nav-z);
	overflow-x: clip;
}

.kwl-header {
	position: sticky;
	top: 0;
	z-index: var(--kwl-nav-z);
	width: 100%;
}

/* ============================================================
   MAIN NAVIGATION
   ============================================================ */

.kwl-main-nav {
	background: color-mix(in srgb, var(--kwl-nav-bg) calc(var(--kwl-nav-glass-opacity) * 100%), transparent);
	border-bottom: 2px solid color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 70%, transparent);
	transition:
		background var(--kwl-nav-transition),
		border-color var(--kwl-nav-transition),
		box-shadow var(--kwl-nav-transition);
	box-shadow:
		0 1px 3px color-mix(in srgb, var(--kwl-nav-text) 8%, transparent),
		0 4px 16px color-mix(in srgb, var(--kwl-nav-text) 6%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.kwl-nav-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kwl-space-sm, 0.5rem);
	max-width: var(--kwl-nav-max-width);
	margin: 0 auto;
	padding: 0 var(--kwl-space-md, 1rem);
	height: var(--kwl-nav-height);
	/* Huepfer-Fix: Hoehe glatt animieren beim Sticky-Wechsel */
	transition: height var(--kwl-nav-transition);
}

/* Mobile: Wrapper werden "durchsichtig" — Kinder verhalten sich wie direkte Flex-Children
   der .kwl-nav-inner (inkl. order: 3 auf der Suche, die das Mobile-Layout steuert). */
.kwl-nav-inner__side {
	display: contents;
}

/* ============================================================
   SEARCH TRIGGER
   ============================================================ */

.kwl-main-nav .kwl-nav-search-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--kwl-nav-text);
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--kwl-radius-sm, 4px);
	transition: color var(--kwl-nav-transition), transform var(--kwl-nav-transition);
	/* Mobile: sichtbar */
	order: 3;
}

.kwl-main-nav .kwl-nav-search-trigger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ============================================================
   MENU
   ============================================================ */

.kwl-nav-menu {
	/* Mobile: ausgeblendet */
	display: none;
	align-self: stretch;
}

.kwl-menu {
	display: flex;
	align-items: stretch;
	gap: var(--kwl-space-xs, 0.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.kwl-menu-item {
	position: static;
	display: flex;
	align-items: center;
}

.kwl-menu-item--has-children {
	position: relative;
}

.kwl-main-nav .kwl-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	color: var(--kwl-nav-text);
	text-decoration: none;
	font-size: var(--kwl-nav-fsize);
	font-family: var(--kwl-font-body);
	font-weight: var(--kwl-fw-medium);
	letter-spacing: var(--kwl-ls-broad);
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 0;
	transition: color 350ms ease, opacity 350ms ease;
	min-height: 44px;
	position: relative;
}

/* Gold-Akzent Dot-to-Line — Punkt im Ruhezustand, volle Linie bei Hover/Active */
.kwl-main-nav .kwl-menu > .kwl-menu-item > .kwl-menu-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0.75rem;
	right: 0.75rem;
	height: 2px;
	border-radius: 1px;
	background: color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 40%, transparent);
	box-shadow: none;
	transform: scaleX(0.06);
	transform-origin: center;
	transition: transform 450ms var(--kwl-ease-material), background 350ms ease, box-shadow 350ms ease;
}

.kwl-main-nav .kwl-menu-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-main-nav .kwl-menu-item--active > .kwl-menu-link {
	color: var(--kwl-nav-link-hover);
	font-weight: var(--kwl-fw-semibold);
}

.kwl-main-nav .kwl-menu > .kwl-menu-item--active > .kwl-menu-link::after {
	transform: scaleX(1);
	background: var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
	box-shadow: 0 0 6px color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 40%, transparent);
}

/* ============================================================
   FLOATING SUBTITLE (Top-Level Desktop-Items)
   Kunsthotel-Design: Zweizeilig mit Gold-Akzentlinie
   Kein sichtbarer Rahmen — Tiefe entsteht durch Hover-Reveal
   ============================================================ */

/* Responsive Gap: luftig bei breiten Viewports, kompakt bei schmalen (§286).
   Keine vertikalen Trenner mehr — "schwebende Labels" statt "Gitter". */
.kwl-main-nav .kwl-menu {
	gap: clamp(1rem, 0.5rem + 1vw, 2rem);
}

/* Top-Level <li> — Tile-Surface (Issue #72 §284)
   Lift via box-shadow, KEIN transform (würde Mega-Panel-Containing-Block brechen). */
.kwl-main-nav .kwl-menu > .kwl-menu-item {
	border-radius: var(--kwl-radius-sm, 4px);
	transition: box-shadow 250ms ease;
}

/* Active = "Druck"-Gefühl: Inset-Shadow invertiert den Lift */
.kwl-main-nav .kwl-menu > .kwl-menu-item:active {
	box-shadow: inset 0 1px 3px color-mix(in srgb, var(--kwl-nav-text) 14%, transparent);
}

/* Zweizeiliger Link: Titel + Untertitel vertikal.
   padding-Transition fuer weichen Uebergang beim Sticky-Wechsel (Huepfer-Fix §285). */
.kwl-main-nav .kwl-menu > .kwl-menu-item > .kwl-menu-link {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	padding: 0.5rem 1rem;
	min-width: 0;
	transition: color 350ms ease, filter 350ms ease, padding 250ms ease;
	border-radius: var(--kwl-radius-sm, 4px);
}

.kwl-menu-title {
	font-weight: var(--kwl-fw-medium);
}

.kwl-menu-subtitle {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-regular);
	font-style: italic;
	letter-spacing: var(--kwl-ls-light);
	text-transform: none;
	color: var(--kwl-text-muted, #718096);
	white-space: nowrap;
	max-height: 1.5em;
	opacity: 1;
	overflow: hidden;
	/* max-height + opacity gemeinsam animieren — sonst snappt die Hoehe beim Sticky-Wechsel (§286) */
	transition: max-height 250ms ease, opacity 250ms ease;
}

/* ============================================================
   DROPDOWN (regulaere Untermenues, nicht Mega)
   ============================================================ */

.kwl-submenu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kwl-menu-item--has-children > .kwl-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--kwl-nav-z, 9999);
	min-width: 220px;
	background: color-mix(in srgb, var(--kwl-nav-bg, #ffffff) calc(var(--kwl-nav-glass-opacity, 0.82) * 100%), transparent);
	border-top: 2px solid var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
	border-radius: 0 0 var(--kwl-radius-md, 8px) var(--kwl-radius-md, 8px);
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--kwl-nav-text, #1a202c) 5%, transparent),
		0 8px 24px color-mix(in srgb, var(--kwl-nav-text, #1a202c) 10%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	padding: var(--kwl-space-xs, 0.25rem) 0;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 280ms ease, transform 280ms var(--kwl-ease-material);
	pointer-events: none;
}

.kwl-menu > .kwl-menu-item--has-children > .kwl-submenu:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.kwl-submenu .kwl-menu-item {
	display: block;
}

.kwl-main-nav .kwl-submenu .kwl-menu-link {
	display: flex;
	width: 100%;
	padding: 0.5rem 1rem;
	border-radius: 0;
	border-left: 2px solid transparent;
	white-space: normal;
	min-height: 40px;
	font-size: var(--kwl-nav-fsize);
	font-weight: var(--kwl-fw-regular);
	letter-spacing: normal;
	text-transform: none;
	color: var(--kwl-nav-text);
	transition: border-color 200ms ease, padding-left 200ms ease, color 350ms ease;
}

.kwl-main-nav .kwl-submenu .kwl-menu-link:active {
	color: var(--kwl-nav-link-hover);
	border-left-color: var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
}

/* Verschachteltes Untermenue (Ebene 2): Eingerueckt im Dropdown sichtbar */
.kwl-submenu .kwl-submenu {
	position: static;
	min-width: 0;
	background: transparent;
	border-top: 1px solid color-mix(in srgb, var(--kwl-nav-border, var(--kwl-border, #e2e8f0)) 30%, transparent);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.kwl-main-nav .kwl-submenu .kwl-submenu .kwl-menu-link {
	padding-left: 1.75rem;
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-nav-text);
}

/* ============================================================
   LOGO
   ============================================================ */

.kwl-nav-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-decoration: none;
	/* Mobile: zentriert */
	order: 2;
	margin: 0 auto;
}

.kwl-nav-logo__default {
	width: var(--kwl-nav-logo-width);
	height: auto;
	aspect-ratio: 8 / 3;
	transform: scale(var(--kwl-nav-logo-scale, 1));
	transition: transform var(--kwl-nav-transition);
}

.kwl-nav-logo__text {
	font-family: var(--kwl-font-heading);
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-nav-text);
}

.kwl-nav-logo:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 4px;
	border-radius: var(--kwl-radius-sm, 4px);
}

/* ============================================================
   BOOKING BUTTON
   ============================================================ */

.kwl-main-nav .kwl-nav-book {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.625rem 1.5rem;
	background: linear-gradient(
		175deg,
		color-mix(in srgb, var(--kwl-nav-book-bg) 95%, white) 0%,
		var(--kwl-nav-book-bg) 40%,
		color-mix(in srgb, var(--kwl-nav-book-bg) 92%, black) 100%
	);
	color: var(--kwl-nav-book-text);
	text-decoration: none;
	font-weight: var(--kwl-fw-semibold);
	font-size: calc(var(--kwl-nav-fsize) * 0.88);
	letter-spacing: var(--kwl-ls-broad);
	text-transform: uppercase;
	border-radius: var(--kwl-radius-md, 8px);
	border: 1px solid color-mix(in srgb, var(--kwl-nav-book-bg) 70%, white);
	white-space: nowrap;
	min-height: 44px;
	position: relative;
	overflow: hidden;
	transition:
		transform var(--kwl-nav-transition),
		box-shadow var(--kwl-nav-transition),
		filter var(--kwl-nav-transition),
		padding var(--kwl-nav-transition),
		min-height var(--kwl-nav-transition);
	box-shadow:
		0 2px 6px color-mix(in srgb, var(--kwl-nav-book-bg) 25%, transparent),
		0 6px 16px color-mix(in srgb, var(--kwl-nav-text) 8%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Shimmer-Effekt (weicherer Verlauf) */
.kwl-main-nav .kwl-nav-book::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.04) 40%,
		rgba(255, 255, 255, 0.10) 50%,
		rgba(255, 255, 255, 0.04) 60%,
		transparent 70%
	);
	transform: translateX(-100%);
	transition: transform 900ms var(--kwl-ease-material);
	pointer-events: none;
}

.kwl-main-nav .kwl-nav-book:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ============================================================
   BURGER (MOBILE)
   ============================================================ */

.kwl-main-nav .kwl-nav-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	color: var(--kwl-nav-text);
	border-radius: var(--kwl-radius-sm, 4px);
	transition: transform var(--kwl-nav-transition);
	order: 1;
}

.kwl-main-nav .kwl-nav-burger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-burger-line {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--kwl-nav-transition), opacity var(--kwl-nav-transition);
}

.kwl-nav-burger[aria-expanded="true"] .kwl-burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.kwl-nav-burger[aria-expanded="true"] .kwl-burger-line:nth-child(2) {
	opacity: 0;
}

.kwl-nav-burger[aria-expanded="true"] .kwl-burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   SCROLL STATE (JS-Hysterese: An bei 100px, Aus bei 60px)
   Totzone (40px) > Höhenänderung (16px) → kein Feedback-Loop.
   ============================================================ */

.kw-is-scrolled .kwl-main-nav {
	--kwl-nav-glass-opacity: var(--kwl-nav-glass-opacity-sticky);
	border-bottom-color: var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
	box-shadow:
		0 1px 3px color-mix(in srgb, var(--kwl-nav-text) 8%, transparent),
		0 4px 16px color-mix(in srgb, var(--kwl-nav-text) 12%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.kw-is-scrolled .kwl-nav-inner {
	height: var(--kwl-nav-height-sticky);
}

.kw-is-scrolled .kwl-main-nav .kwl-nav-book {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	min-height: 36px;
}

.kw-is-scrolled .kwl-nav-logo__default {
	transform: scale(var(--kwl-nav-logo-scale-sticky, 0.75));
}

.kw-is-scrolled .kwl-menu-subtitle {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
}

.kw-is-scrolled .kwl-main-nav .kwl-menu > .kwl-menu-item > .kwl-menu-link {
	padding-top: 0.25rem;
	padding-bottom: 0;
}

/* ============================================================
   HOVER EFFECTS (Desktop only)
   ============================================================ */

/* ============================================================
   ACTIVE STATES (Touch-Feedback — immer, ohne hover-Query)
   ============================================================ */

.kwl-pre-nav a.kwl-pre-nav__item:active {
	opacity: 0.6;
	transform: scale(0.96);
}

.kwl-pre-nav .kwl-pre-nav__promo-link:active {
	background: color-mix(in srgb, var(--kwl-nav-prenav-text) 35%, transparent);
	transform: scale(0.97);
}

.kwl-pre-nav a.kwl-pre-nav__action:active {
	opacity: 0.6;
	transform: scale(0.96);
}

.kwl-pre-nav .kwl-pre-nav__social-link:active {
	opacity: 0.5;
	transform: scale(0.9);
}

.kwl-main-nav .kwl-menu-link:active {
	color: var(--kwl-nav-link-hover);
	opacity: 0.7;
}

.kwl-main-nav .kwl-nav-book:active {
	filter: brightness(0.92);
	transform: translateY(1px) scale(0.97);
	box-shadow:
		0 1px 3px color-mix(in srgb, var(--kwl-nav-text) 15%, transparent),
		inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kwl-main-nav .kwl-nav-search-trigger:active {
	color: var(--kwl-nav-link-hover);
	transform: scale(0.9);
}

.kwl-main-nav .kwl-nav-burger:active {
	transform: scale(0.9);
}

.kwl-main-nav .kwl-nav-burger:active .kwl-burger-line {
	background: var(--kwl-nav-link-hover, var(--kwl-primary, #00315d));
}

/* ============================================================
   HOVER EFFECTS (Desktop only)
   ============================================================ */

@media (hover: hover) {
	/* --- Pre-Nav --- */
	.kwl-pre-nav__items:hover .kwl-pre-nav__item {
		opacity: 0.5;
		transition: opacity 350ms ease, color 350ms ease;
	}

	.kwl-pre-nav__items:hover .kwl-pre-nav__item:hover {
		opacity: 1;
	}

	.kwl-pre-nav .kwl-pre-nav__promo-link:hover {
		background: color-mix(in srgb, var(--kwl-nav-prenav-text) 20%, transparent);
		box-shadow: 0 0 12px color-mix(in srgb, var(--kwl-nav-prenav-text) 12%, transparent);
	}

	/* --- Right-Actions --- */
	.kwl-pre-nav__right:hover .kwl-pre-nav__action {
		opacity: 0.5;
		transition: opacity 350ms ease, color 350ms ease;
	}

	.kwl-pre-nav__right:hover .kwl-pre-nav__action:hover {
		opacity: 1;
	}

	.kwl-pre-nav__social:hover .kwl-pre-nav__social-link {
		opacity: 0.4;
		transition: opacity 350ms ease;
	}

	.kwl-pre-nav__social:hover .kwl-pre-nav__social-link:hover {
		opacity: 1;
	}

	/* --- Lang Switcher --- */
	.kwl-pre-nav .kwl-pre-nav__lang-trigger:hover {
		background: color-mix(in srgb, currentColor 12%, transparent);
		border-color: color-mix(in srgb, currentColor 35%, transparent);
	}

	.kwl-pre-nav__lang-item:hover {
		background: color-mix(in srgb, currentColor 8%, transparent);
	}

	/* --- Main-Nav: Tile-Lift + Hover-Glow (Issue #72 §284) --- */

	/* Tile hebt sich vom Header ab — reine box-shadow Inszenierung,
	   kein transform (würde Mega-Panel-Containing-Block brechen).
	   :focus-within sorgt dafür, dass Keyboard-User denselben Effekt sehen. */
	.kwl-main-nav .kwl-menu > .kwl-menu-item:hover,
	.kwl-main-nav .kwl-menu > .kwl-menu-item:focus-within {
		box-shadow:
			0 2px 8px color-mix(in srgb, var(--kwl-nav-text) 8%, transparent),
			0 6px 18px color-mix(in srgb, var(--kwl-primary) 7%, transparent),
			inset 0 1px 0 color-mix(in srgb, white 35%, transparent);
	}

	/* Gehoverter Link: Text leuchtet auf */
	.kwl-main-nav .kwl-menu > .kwl-menu-item:hover > .kwl-menu-link,
	.kwl-main-nav .kwl-menu > .kwl-menu-item:focus-within > .kwl-menu-link {
		color: var(--kwl-nav-link-hover, var(--kwl-primary, #00315d));
		filter: brightness(1.12);
	}

	/* Goldakzent unten waechst zur vollen Linie */
	.kwl-main-nav .kwl-menu > .kwl-menu-item:hover > .kwl-menu-link::after,
	.kwl-main-nav .kwl-menu > .kwl-menu-item:focus-within > .kwl-menu-link::after {
		transform: scaleX(1);
		background: var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
		box-shadow: 0 0 8px color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 50%, transparent);
	}

	/* --- Booking-Button --- */
	.kwl-main-nav .kwl-nav-book:hover {
		transform: translateY(-2px);
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--kwl-nav-book-bg) 30%, transparent),
			0 4px 12px color-mix(in srgb, var(--kwl-nav-book-bg) 40%, transparent),
			0 12px 28px color-mix(in srgb, var(--kwl-nav-text) 10%, transparent);
		filter: brightness(1.06);
	}

	/* Shimmer-Slide auf Hover */
	.kwl-main-nav .kwl-nav-book:hover::after {
		transform: translateX(100%);
	}

	/* --- Search + Burger --- */
	.kwl-main-nav .kwl-nav-search-trigger:hover {
		color: var(--kwl-nav-link-hover);
		opacity: 0.7;
	}

	.kwl-main-nav .kwl-nav-burger:hover .kwl-burger-line {
		background: var(--kwl-nav-link-hover, var(--kwl-primary, #00315d));
	}

	/* --- Dropdown Links: Gold-Border-Indikator statt Background --- */
	.kwl-main-nav .kwl-submenu .kwl-menu-link:hover {
		border-left-color: var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
		padding-left: calc(1rem + 4px);
		color: var(--kwl-nav-link-hover);
	}

	.kwl-main-nav .kwl-submenu .kwl-submenu .kwl-menu-link:hover {
		color: var(--kwl-nav-link-hover);
		border-left-color: var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C));
		padding-left: calc(1.75rem + 4px);
	}
}

/* ============================================================
   DARK MODE
   Farben kommen aus dem Backend (NavigationRenderer → nav_dark_*).
   --kwl-nav-bg, --kwl-nav-text etc. werden per
   @media(prefers-color-scheme:dark){:root{...}} überschrieben.
   Hier nur visuelle Anpassungen (Schatten, Opacity, Borders).
   ============================================================ */

@media (prefers-color-scheme: dark) {
	:root {
		--kwl-nav-glass-opacity: 0.96;
		--kwl-nav-glass-opacity-sticky: 0.98;
	}

	/* Schatten: rgba statt color-mix (dunkler Hintergrund braucht kräftigere Schatten) */
	.kwl-main-nav {
		border-bottom-color: color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 45%, transparent);
		box-shadow:
			0 1px 3px rgba(0, 0, 0, 0.5),
			0 2px 8px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	}

	.kw-is-scrolled .kwl-main-nav {
		border-bottom-color: color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 55%, transparent);
		box-shadow:
			0 1px 3px rgba(0, 0, 0, 0.5),
			0 4px 16px rgba(0, 0, 0, 0.6),
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	}

	/* Pre-Nav: Dark-Mode Inset-Kanten kraeftiger */
	.kwl-pre-nav {
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	}

	/* Lang Switcher Dropdown Dark */
	.kwl-pre-nav__lang-dropdown {
		background: var(--kwl-nav-bg, var(--kwl-bg, #1a202c));
		color: var(--kwl-nav-text, var(--kwl-text, #f7fafc));
		border-color: rgba(255, 255, 255, 0.12);
		box-shadow:
			0 4px 12px rgba(0, 0, 0, 0.5),
			0 8px 24px rgba(0, 0, 0, 0.4);
	}

	.kwl-pre-nav__lang-trigger {
		border-color: rgba(255, 255, 255, 0.15);
	}

	.kwl-main-nav .kwl-nav-book,
	.kwl-main-nav .kwl-nav-book:visited {
		color: var(--kwl-accent-contrast, #00315d);
	}

	.kwl-main-nav .kwl-nav-book {
		box-shadow:
			0 2px 6px rgba(0, 0, 0, 0.4),
			0 6px 16px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.15);
	}

	/* Submenü: dezente Borderkanten für Tiefe */
	.kwl-menu-item--has-children > .kwl-submenu {
		border-left: 1px solid rgba(255, 255, 255, 0.10);
		border-right: 1px solid rgba(255, 255, 255, 0.10);
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.4),
			0 8px 24px rgba(0, 0, 0, 0.6),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	/* Depth-2 Trennlinie im Dark Mode */
	.kwl-submenu .kwl-submenu {
		border-top-color: rgba(255, 255, 255, 0.08);
	}

	/* Akzentlinie kräftiger im Dark Mode */
	.kwl-main-nav .kwl-menu > .kwl-menu-item > .kwl-menu-link::after {
		background: color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 45%, transparent);
	}

	.kwl-main-nav .kwl-menu > .kwl-menu-item--active > .kwl-menu-link::after {
		background: color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 80%, transparent);
	}
}

/* Dark Hover */
@media (prefers-color-scheme: dark) and (hover: hover) {
	/* Tile-Lift Dark Mode: kraeftigere Schatten, Gold-Glow am Außenrand */
	.kwl-main-nav .kwl-menu > .kwl-menu-item:hover,
	.kwl-main-nav .kwl-menu > .kwl-menu-item:focus-within {
		box-shadow:
			0 2px 8px rgba(0, 0, 0, 0.45),
			0 6px 20px color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 14%, transparent),
			inset 0 1px 0 rgba(255, 255, 255, 0.10);
	}

	.kwl-main-nav .kwl-menu > .kwl-menu-item:hover > .kwl-menu-link,
	.kwl-main-nav .kwl-menu > .kwl-menu-item:focus-within > .kwl-menu-link {
		filter: brightness(1.2);
	}

	.kwl-main-nav .kwl-menu > .kwl-menu-item:hover > .kwl-menu-link::after,
	.kwl-main-nav .kwl-menu > .kwl-menu-item:focus-within > .kwl-menu-link::after {
		transform: scaleX(1);
		background: color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 85%, transparent);
		box-shadow: 0 0 10px color-mix(in srgb, var(--kwl-nav-book-bg, var(--kwl-accent, #BD9B5C)) 40%, transparent);
	}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.kwl-pre-nav,
	.kwl-main-nav,
	.kwl-nav-inner,
	.kwl-nav-logo__default,
	.kwl-menu-link,
	.kwl-nav-book,
	.kwl-burger-line,
	.kwl-pre-nav__promo-link,
	.kwl-pre-nav__item,
	.kwl-pre-nav__action,
	.kwl-pre-nav__social-link,
	.kwl-pre-nav__lang-trigger,
	.kwl-pre-nav__lang-chevron,
	.kwl-pre-nav__lang-item,
	.kwl-nav-search-trigger,
	.kwl-nav-burger,
	.kwl-menu-item--has-children > .kwl-submenu,
	.kwl-main-nav .kwl-menu > .kwl-menu-item,
	.kwl-main-nav .kwl-menu > .kwl-menu-item > .kwl-menu-link::after,
	.kwl-main-nav .kwl-submenu .kwl-menu-link,
	.kwl-menu-subtitle {
		transition: none;
	}

	/* Shimmer deaktivieren */
	.kwl-main-nav .kwl-nav-book::after {
		display: none;
	}

	.kwl-nav-book:hover,
	.kwl-nav-book:active,
	.kwl-nav-burger:active {
		transform: none;
	}
}

/* ============================================================
   TABLET (768px+): Pre-Nav sichtbar (Icon-only), Haupt-Nav bleibt Burger
   ============================================================ */

@media (min-width: 768px) {
	/* Double-Sticky: Wrapper sticky mit negativem Top = Pre-Nav scrollt weg */
	.kwl-header-wrap {
		position: sticky;
		top: calc(-1 * var(--kwl-nav-prenav-height));
	}

	.kwl-pre-nav {
		display: block;
	}
}

/* ============================================================
   DESKTOP (1024px+): Volle Navigation + Pre-Nav mit Kurztext
   ============================================================ */

@media (min-width: 1024px) {
	/* Variante B — optisch balancierte Luecken statt geometrischer Mitte:
	   Sides sitzen natuerlich-breit am jeweiligen Container-Rand, Logo dazwischen
	   mit margin-inline: auto. In Flex-Containern absorbiert margin: auto den
	   verbleibenden freien Raum gleichmaessig auf beide Seiten → Logo wird
	   zwischen den Sides zentriert. Dadurch sind die Luecken zum Logo immer gleich,
	   auch wenn die Sides verschieden breit sind. Logo sitzt dann nicht zwingend
	   exakt auf Page-Mitte (das war die Designentscheidung). */
	.kwl-nav-inner {
		display: flex;
		align-items: center;
	}

	.kwl-nav-inner__side {
		display: flex;
		align-items: center;
		gap: var(--kwl-space-sm, 0.5rem);
		min-width: 0;
	}

	.kwl-main-nav .kwl-nav-logo {
		margin-inline: auto;
		order: 0;
	}

	.kwl-nav-menu {
		display: flex;
	}

	.kwl-main-nav .kwl-nav-book {
		display: inline-flex;
	}

	.kwl-main-nav .kwl-nav-burger {
		display: none;
	}

	.kwl-main-nav .kwl-nav-search-trigger {
		order: 0;
	}

	/* Pre-Nav: Icon + Kurztext */
	.kwl-pre-nav__short {
		display: inline;
	}

	/* Lang Dropdown: Short-Code statt Name unter 1200px */
	.kwl-pre-nav__lang-name {
		display: none;
	}

	.kwl-pre-nav__lang-short {
		display: inline;
	}
}

/* ============================================================
   WIDE (1200px+): Pre-Nav mit vollem Text
   ============================================================ */

@media (min-width: 1200px) {
	.kwl-pre-nav__text {
		display: inline;
	}

	.kwl-pre-nav__short {
		display: none;
	}

	.kwl-pre-nav__promo-full {
		display: inline;
	}

	.kwl-pre-nav__promo-short {
		display: none;
	}

	/* Right-Actions: ab 1200px Text sichtbar */
	.kwl-pre-nav__action-text {
		display: inline;
	}

	/* Lang Dropdown: ab 1200px voller Name statt Short-Code */
	.kwl-pre-nav__lang-name {
		display: inline;
	}

	.kwl-pre-nav__lang-short {
		display: none;
	}
}