/* ==========================================================================
   jw-base – Typografie: Ligaturen global aktivieren
   ========================================================================== */

body {
	font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
}

html.nav-panel-open body {
	overflow: hidden;
}

/* Mobile Drawer: robuster Scroll-Lock (position:fixed statt nur overflow:hidden) */
html.mobile-nav-locked body {
	position: fixed;
	inset-inline: 0;
	overflow: hidden;
}


/* ==========================================================================
   jw-base – Header & Navigation (STACKIT-Pattern)
   Desktop:  fixed header, full-width panels (left col + right col via position:fixed).
   Mobile:   full-height stacked off-canvas panels (slide from right).
   States always via aria-attributes / data-attributes, never CSS class alone.
   ========================================================================== */

/* ==========================================================================
   1. Local Custom Properties
   ========================================================================== */

:root {
	--header-secondary-height: 3rem;
	--header-primary-height:   4.5rem;
	--header-height:           calc(var(--header-secondary-height) + var(--header-primary-height));
	--nav-panel-left-width:    22rem;
	--z-header:                100;
	--ease-smooth:             cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--min-tap-target:          44px;
	/* Seitlicher Abstand für position:fixed Elemente – bündig mit .wrapper */
	--nav-side-padding: calc((100% - min(var(--jw-wrapper-width), var(--jw-wrapper-max))) / 2);

	/* Primary Header Hintergrund – per Client überschreibbar */
	--header-primary-bg: var(--wp--preset--color--light, #f4f4f4);

	/* Secondary Nav – per Client überschreibbar */
	--sec-nav-bg:      var(--wp--preset--color--primary, #0a0a0a);
	--sec-nav-color:   var(--wp--preset--color--light, #f4f4f4);
	--sec-panel-bg:    var(--wp--preset--color--light, #f4f4f4);
	--sec-panel-color: var(--wp--preset--color--primary, #0a0a0a);
}


/* ==========================================================================
   2. Skip Link
   ========================================================================== */

.skip-link {
	position: absolute;
	inset-block-start: var(--jw-space-12);
	inset-inline-start: var(--jw-space-12);
	z-index: calc(var(--z-header) + 10);
	padding: var(--jw-space-8) var(--jw-space-16);
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	border-radius: 3px;
	translate: 0 calc(-100% - 1rem);
	transition: translate 0.2s ease, background-color 0.2s ease;
}

.skip-link:hover {
	background-color: var(--wp--preset--color--secondary);
}

.skip-link:focus-visible {
	translate: 0 0;
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}


/* ==========================================================================
   3. Header – Base Layout
   ========================================================================== */

#site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	min-block-size: var(--header-height);
	display: flex;
	flex-direction: column;
	/* Kein translate/transform – würde Stacking Context erzeugen und sec-panel einsperren */
	top: 0;
	transition:
		top              0.4s var(--ease-smooth),
		background-color 0.3s ease,
		backdrop-filter  0.3s ease;
}

/* Secondary visuell oben, obwohl DOM-last */
.header__secondary {
	align-content:flex-end;
	order: -1;
}

.header__primary {
	position: relative;
	z-index: 1;
	flex: 1;
	min-block-size: 0;
	background-color: var(--header-primary-bg);
	align-content:flex-end;
}

.header__inner {
	display: flex;
	align-items: center;
	gap: var(--jw-space-16);
	/* max-width und margin:auto kommen von .wrapper */
}

.header__bar {
	flex-shrink: 0;
}


/* ==========================================================================
   4. Header – Scroll States
   ========================================================================== */

#site-header[data-scrolled] {
	background-color: oklch(from var(--wp--preset--color--surface) l c h / 0.85);
	backdrop-filter: blur(12px) saturate(1.4);
	-webkit-backdrop-filter: blur(12px) saturate(1.4);
	box-shadow: 0 1px 0 oklch(from var(--wp--preset--color--on-surface) l c h / 0.08);
}

#site-header[data-hidden] {
	top: calc(var(--header-height) * -1);
}


/* ==========================================================================
   5. Logo
   ========================================================================== */

.header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: var(--jw-space-12) 0;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--on-surface);
	letter-spacing: -0.02em;
	line-height: 1;
}

.header__logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 2px;
}

.header__logo img {
	display: block;
	block-size: 2.25rem;
	inline-size: auto;
}


/* ==========================================================================
   6. Desktop Navigation – Top-Level
   ========================================================================== */

#site-navigation {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.nav-menu {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.nav-item {
	position: relative;
	padding: 0;
	margin: 0;
}

/* Top-level Link (items WITHOUT children) */
.nav-item__link {
	display: flex;
	align-items: center;
	padding: var(--jw-space-10) var(--jw-space-12);
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	min-block-size: var(--min-tap-target);
	transition: color 0.2s ease;
}

.nav-item__link:hover,
.nav-item__link:focus-visible {
	color: var(--wp--preset--color--primary);
}

.nav-item__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Top-level Button-Trigger (items WITH children) */
.nav-item__trigger {
	display: flex;
	align-items: center;
	gap: var(--jw-space-6);
	padding: var(--jw-space-10) var(--jw-space-12);
	background: none;
	border: none;
	color: var(--wp--preset--color--on-surface);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	min-block-size: var(--min-tap-target);
	cursor: pointer;
	transition: color 0.2s ease;
}

.nav-item__trigger:hover,
.nav-item__trigger[aria-expanded="true"],
.nav-item--active .nav-item__trigger {
	color: var(--wp--preset--color--primary);
}

.nav-item__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Desktop: chevron-down sichtbar + Animation, chevron-right versteckt */
.nav-item__trigger .nav-icon--chevron-down {
	flex-shrink: 0;
	transition: transform 0.2s var(--ease-smooth);
}

.nav-item__trigger[aria-expanded="true"] .nav-icon--chevron-down {
	transform: rotate(180deg);
}

.nav-item__trigger .nav-icon--chevron {
	display: none;
}


/* ==========================================================================
   7. Nav Utility Items (Search + Accessibility)
   Überschreibt jw-base Basis-Styles für das wanted Design.
   ========================================================================== */

.menu-item--search {
	flex-shrink: 0;
}

.menu-item--search button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--min-tap-target);
	min-block-size: var(--min-tap-target);
	padding: var(--jw-space-8);
	background: none;
	border: none;
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.2s ease, background-color 0.15s ease;
}

.menu-item--search button:hover {
	color: var(--wp--preset--color--primary);
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
}

.menu-item--search button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}


/* ==========================================================================
   8. Nav Panel Bar (Back button + Close button)
   Desktop: shows Close button (right-aligned).
   Mobile:  shows Back button; Close is hidden (hamburger serves that role).
   ========================================================================== */

.nav-panel__bar {
	order: -1; /* DOM-last für Tab-Reihenfolge, visuell oben */
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

/* Back button – hidden on desktop, shown on mobile */
.nav-panel__back {
	display: none;
	align-items: center;
	gap: var(--jw-space-6);
	background: none;
	border: none;
	padding: var(--jw-space-10) var(--jw-space-12);
	color: oklch(from var(--wp--preset--color--on-surface) l c h / 0.8);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	cursor: pointer;
	transition: color 0.15s ease;
}

.nav-panel__back:hover,
.nav-panel__back:focus-visible {
	color: var(--wp--preset--color--primary);
}

.nav-panel__back:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Close button – shown on desktop, hidden on mobile */
.nav-panel__close {
	display: flex;
	align-items: center;
	gap: var(--jw-space-6);
	margin-inline-start: auto;
	background: none;
	border: none;
	padding: var(--jw-space-10) var(--jw-space-12);
	color: var(--wp--preset--color--on-surface);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	min-block-size: var(--min-tap-target);
	transition: color 0.15s ease;
}

.nav-panel__close:hover,
.nav-panel__close:focus-visible {
	color: var(--wp--preset--color--primary);
}

.nav-panel__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
	border-radius: 2px;
}

/* Right panel bar: no close button needed on desktop */
.nav-panel__right .nav-panel__bar {
	display: none;
}


/* ==========================================================================
   9. Nav Panel – Main container (fixed, full width)
   Contains Left-Column and Right-Panels.
   ========================================================================== */

.nav-panel {
	position: fixed;
	/*inset-block-start: var(--header-height);*/
	inset-inline: 0;
	z-index: calc(var(--z-header) - 1);
	display: flex;
	flex-direction: column;
	/* Default: passt sich .nav-panel__left an. Bei offenem .nav-panel__right mit mehr
	   Einträgen setzt mega-menu.js diese Variable auf die tatsächlich benötigte Höhe –
	   .nav-panel__right ist position:absolute und beeinflusst die Auto-Höhe sonst nicht. */
	block-size: var(--nav-panel-content-height, auto);
	max-block-size: calc(100dvh - var(--header-height));
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 2rem 4rem oklch(from #000 l c h / 0.12);
	overflow: hidden;
	padding-block-end: var(--wp--preset--spacing--xs);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out, block-size 0.2s var(--ease-smooth);

}

.nav-panel[data-open] {
	opacity: 1;
	transform: translateY(0);
}

.nav-panel[hidden] {
	display: none;
}


/* ==========================================================================
   10. Nav Panel – Inner Wrapper
   Constrains Inhalt auf Wrapper-Breite; Panel-Hintergrund bleibt full-width.
   Containing Block für position:absolute .nav-panel__right.
   ========================================================================== */

.nav-panel__inner {
	display: flex;
	flex: 1;
	min-block-size: 0;
	position: relative;
	overflow: hidden;
}


/* ==========================================================================
   11. Nav Panel – Left Column
   Displays page-link of top-item + list of sub-items.
   ========================================================================== */

.nav-panel__left {
	inline-size: var(--nav-panel-left-width);
	max-block-size: calc(100dvh - var(--header-height) - var(--header-height));
	overflow-y: auto;
	padding-block-end: var(--jw-space-24);
	border-inline-end: 1px solid oklch(from var(--wp--preset--color--on-surface) l c h / 0.08);
	background-color: oklch(from var(--wp--preset--color--surface) l c h / 0.6);
}

/* Page-link at top of each column */
.nav-panel__page-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jw-space-6);
	padding: var(--jw-space-10) var(--jw-space-12);
	margin-block-end: var(--jw-space-16);
	border-radius: 4px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-panel__page-link:hover {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

.nav-panel__page-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
	border-radius: 2px;
}

/* Elternlink „Nicht verlinken" – Text ohne Hover/Klick-Ziel */
.nav-panel__page-link--static {
	pointer-events: none;
}

.nav-panel__page-link .nav-icon--arrow {
	flex-shrink: 0;
	margin-block-start: 0.1em;
}

/* Sub-item list */
.nav-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jw-space-2);
}

/* Sub-item WITHOUT children: plain link */
.nav-panel__item .nav-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jw-space-8);
	width: 100%;
	padding: var(--jw-space-10) var(--jw-space-12);
	border-radius: 4px;
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-panel__item .nav-panel__link:hover,
.nav-panel__item .nav-panel__link:focus-visible {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

.nav-panel__item .nav-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.nav-panel__item .nav-panel__link .nav-icon--arrow {
	flex-shrink: 0;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.nav-panel__item .nav-panel__link:hover .nav-icon--arrow,
.nav-panel__item .nav-panel__link:focus-visible .nav-icon--arrow {
	opacity: 1;
}

/* Depth 1 mit Beschreibungstext: Label + Desc gestapelt statt einzeiliger Titel */
.nav-panel__item .nav-panel__link:has(.nav-panel__link-text),
.nav-panel__trigger:has(.nav-panel__link-text) {
	align-items: flex-start;
}

.nav-panel__item .nav-panel__link:has(.nav-panel__link-text) .nav-icon--arrow,
.nav-panel__trigger:has(.nav-panel__link-text) .nav-icon--chevron {
	margin-block-start: 0.2em;
}

/* Sub-item WITH children: button trigger for right-panel */
.nav-panel__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jw-space-8);
	width: 100%;
	padding: var(--jw-space-10) var(--jw-space-12);
	border-radius: 4px;
	background: none;
	border: none;
	color: var(--wp--preset--color--on-surface);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-align: start;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-panel__trigger:hover,
.nav-panel__trigger[aria-expanded="true"],
.nav-panel__item--active .nav-panel__trigger {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

.nav-panel__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
	border-radius: 4px;
}

.nav-panel__trigger .nav-icon--chevron {
	flex-shrink: 0;
	color: var(--wp--preset--color--medium);
	transition: color 0.15s ease;
}

.nav-panel__trigger:hover .nav-icon--chevron,
.nav-panel__trigger[aria-expanded="true"] .nav-icon--chevron {
	color: var(--wp--preset--color--primary);
}

/* Active current page: highlight, no pointer */
.current-menu-item > .nav-panel__link,
.current-menu-item > .nav-item__link {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.1);
	color: var(--wp--preset--color--primary);
	pointer-events: none;
}

/* Active parent/ancestor: highlight, still clickable */
.current-menu-parent > .nav-panel__trigger,
.current-menu-parent > .nav-panel__link,
.current-menu-ancestor > .nav-panel__trigger,
.current-menu-ancestor > .nav-panel__link,
.current-menu-parent > .nav-item__trigger,
.current-menu-parent > .nav-item__link,
.current-menu-ancestor > .nav-item__trigger,
.current-menu-ancestor > .nav-item__link {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.05);
	color: var(--wp--preset--color--primary);
}


/* ==========================================================================
   12. Nav Panel – Right Column
   DOM: nested inside nav-panel__inner > nav-panel__left > li.
   position:absolute relativ zu .nav-panel__inner (position:relative).
   ========================================================================== */

.nav-panel__right {
	position: absolute;
	inset-block-start: 0; /* .nav-panel__inner beginnt direkt nach Bar */
	inset-block-end: 0;
	inset-inline-start: var(--nav-panel-left-width);
	inline-size: var(--nav-panel-left-width);
	overflow-y: auto;
	padding: 0 var(--jw-space-20) var(--jw-space-24);
	background-color: var(--wp--preset--color--surface);
	container-type: inline-size;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.nav-panel__right[data-open] {
	opacity: 1;
	transform: translateX(0);
}

.nav-panel__right[hidden] {
	display: none;
}

/* Sub-sub-items (depth 2) in right panel */
.nav-panel__subitem {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nav-panel__right .nav-panel__list {
	display: flex;
	flex-direction: column;
	gap: var(--jw-space-4);
}

.nav-panel__right .nav-panel__link {
	display: flex;
	align-items: flex-start;
	gap: var(--jw-space-8);
	width: 100%;
	padding: var(--jw-space-12);
	border-radius: 4px;
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-panel__right .nav-panel__link:hover,
.nav-panel__right .nav-panel__link:focus-visible {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.06);
	color: var(--wp--preset--color--primary);
}

.nav-panel__right .nav-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Bild- und Icon-Spalte: fix 40x40, entfallen automatisch wenn leer (kein Markup) */
.nav-panel__link-image-wrap,
.nav-panel__link-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
}

.nav-panel__link-image {
	inline-size: 40px;
	block-size: 40px;
	object-fit: cover;
	border-radius: 4px;
}

.nav-panel__link-icon svg {
	inline-size: 40px;
	block-size: 40px;
}

.nav-panel__link-text {
	flex: 1;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jw-space-2);
}

.nav-panel__link-label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.3;
}

.nav-panel__link-desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: oklch(from var(--wp--preset--color--on-surface) l c h / 0.55);
}

.nav-panel__right .nav-panel__link .nav-icon--arrow {
	flex-shrink: 0;
	margin-block-start: 0.2em;
	opacity: 0.4;
	transition: opacity 0.15s ease;
}

.nav-panel__right .nav-panel__link:hover .nav-icon--arrow,
.nav-panel__right .nav-panel__link:focus-visible .nav-icon--arrow {
	opacity: 1;
}


/* ==========================================================================
   12. Hamburger Toggle (Mobile)
   ========================================================================== */

#nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--jw-space-10) var(--jw-space-12);
	min-inline-size: var(--min-tap-target);
	min-block-size: var(--min-tap-target);
	cursor: pointer;
	color: var(--wp--preset--color--on-surface);
	flex-shrink: 0;
}

#nav-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

.nav-toggle__lines {
	inline-size: 2rem;
	block-size: 1.5rem;
	position: relative;
	display: block;
}

.nav-toggle__lines span {
	display: block;
	position: absolute;
	block-size: 2px;
	inline-size: 100%;
	background: currentColor;
	inset-inline-start: 0;
	border-radius: 1px;
	transition: transform 0.3s var(--ease-smooth), opacity 0.3s ease, inset-block-start 0.3s ease;
}

.nav-toggle__lines span:nth-child(1) { inset-block-start: 0; }
.nav-toggle__lines span:nth-child(2) { inset-block-start: 0.625rem; }
.nav-toggle__lines span:nth-child(3) { inset-block-start: 1.25rem; inline-size: 75%; }

/* X animation when open */
#nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(1) {
	inset-block-start: 0.625rem;
	transform: rotate(135deg);
}

#nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(2) {
	opacity: 0;
	transform: translateX(-1.5rem);
}

#nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(3) {
	inset-block-start: 0.625rem;
	inline-size: 100%;
	transform: rotate(-135deg);
}


/* ==========================================================================
   13. Mobile Navigation – Full-height stacked off-canvas panels
   Level 0: #site-navigation (main drawer, slides from right)
   Level 1: .nav-panel (slides over drawer from right)
   Level 2: .nav-panel__right (slides over level-1 panel from right)
   ========================================================================== */

@media (max-width: 63.9375rem) {

	/* Inner wrapper: auf Mobile einfaches flex-column, volle Breite.
	   Trägt im Markup zusätzlich .wrapper – dessen Breite/Padding würde sich sonst
	   mit dem --nav-side-padding von .nav-panel zu doppelter Einrückung addieren. */
	.nav-panel__inner {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
		flex-direction: column;
		overflow-y: auto;
		position: static;
	}

	.header__inner {
		justify-content: space-between;
	}

	/* Logo + Toggle wrapper: im Header-Flow, nur per z-index über den Panels.
	   Kein position:fixed – #site-header erzeugt keinen Containing Block für fixed
	   descendants (transform/backdrop-filter sind hier bewusst nicht gesetzt), die
	   Bar bliebe sonst am Viewport hängen wenn [data-hidden] den Header hochschiebt. */
	.header__bar {
		position: relative;
		inline-size: 100%;
		block-size: var(--header-height);
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: calc(var(--z-header) + 10);
		pointer-events: none; /* pass through clicks except on children */
	}

	.header__bar > * {
		pointer-events: auto;
	}

	/* Hamburger visible */
	#nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Utility-Items bleiben auf Mobile sichtbar */
	.menu-item--search {
		flex-shrink: 0;
	}

	/* Main nav drawer – slides in from right, full height, content below header */
	#site-navigation {
		position: fixed;
		inset: 0;
		block-size: 100vh;
		block-size: 100dvh;
		z-index: calc(var(--z-header) - 1); /* 99 – below header */
		background-color: oklch(from var(--wp--preset--color--surface) l c h / 0.85);
		backdrop-filter: blur(20px) saturate(1.2);
		-webkit-backdrop-filter: blur(20px) saturate(1.2);
		transform: translateX(100%);
		transition: transform 0.35s var(--ease-smooth);
		overflow-y: auto;
		padding-block-start: var(--header-height);
		padding-inline: var(--nav-side-padding);
		padding-block-end: var(--wp--preset--spacing--xl, 4rem);
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	#site-navigation[data-open] {
		transform: translateX(0);
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
	}

	/* Level-1 panels: full height, content below header bar */
	.nav-panel {
		position: fixed;
		inset: 0;
		block-size: 100vh;
		block-size: 100dvh;
		z-index: calc(var(--z-header) - 1); /* 99 – below header */
		display: flex;
		flex-direction: column;
		max-block-size: none;
		background-color: var(--wp--preset--color--white);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		overflow-y: auto;
		padding-block-start: var(--header-height);
		padding-inline: var(--nav-side-padding);
		/* Override desktop opacity/translateY animation with mobile slide */
		opacity: 1;
		transform: translateX(100%);
		transition: transform 0.35s var(--ease-smooth);
	}

	.nav-panel[data-open] {
		opacity: 1;
		transform: translateX(0);
	}

	/* Panel bar: back button visible, close button hidden */
	.nav-panel__back {
		display: flex;
	}

	.nav-panel__close {
		display: none;
	}

	/* Left column: full width, no border, no background */
	.nav-panel__left {
		inline-size: auto;
		max-block-size: none;
		overflow-y: visible;
		padding: 0;
		border-inline-end: none;
		background-color: transparent;
	}

	/* Level-2 panels: full height, content below header bar */
	.nav-panel__right {
		position: fixed;
		inset: 0;
		inline-size: auto;
		block-size: 100vh;
		block-size: 100dvh;
		z-index: calc(var(--z-header) - 1); /* 99 – below header */
		max-block-size: none;
		overflow-y: auto;
		padding-block-start: var(--header-height);
		padding-inline: var(--nav-side-padding);
		padding-block-end: var(--jw-space-24);
		background-color: var(--wp--preset--color--white);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		/* pointer-events off while off-screen so triggers in left col remain clickable */
		pointer-events: none;
		/* Override desktop opacity/translateX animation */
		opacity: 1;
		transform: translateX(100%);
		transition: transform 0.35s var(--ease-smooth);
	}

	.nav-panel__right[data-open] {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}

	/* Show right panel bar with back button on mobile */
	.nav-panel__right .nav-panel__bar {
		display: flex;
	}

	/* Bar trägt im Markup ebenfalls .wrapper – siehe .nav-panel__inner. */
	.nav-panel__bar {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
		border-block-end: 1px solid oklch(from var(--wp--preset--color--on-surface) l c h / 0.08);
	}

	.nav-panel__page-link {
		margin-block-end: var(--jw-space-12);
	}

	#nav-toggle,
	.nav-panel__back,
	.nav-panel__close {
		padding-inline: 0;
	}

	.nav-item__trigger,
	.nav-item__link {
		width: 100%;
		justify-content: space-between;
	}

	/* Mobile: chevron-right sichtbar, chevron-down versteckt */
	.nav-item__trigger .nav-icon--chevron-down {
		display: none;
	}

	.nav-item__trigger .nav-icon--chevron {
		display: block;
		flex-shrink: 0;
	}

}


/* Unter 576px: wrapper hat padding-inline statt margin, --nav-side-padding angleichen */
@media (max-width: 576px) {
	:root {
		--nav-side-padding: var(--jw-space-24);
	}
}


/* ==========================================================================
   14. Large Screen (1440px+) – Wider panels
   ========================================================================== */

@media (min-width: 90rem) {

	:root {
		--nav-panel-left-width: 26rem;
	}
}


/* ==========================================================================
   15. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#site-header,
	.nav-toggle__lines span,
	#site-navigation,
	.skip-link,
	.nav-panel,
	.nav-panel__right {
		transition: none;
		animation: none;
	}
}


/* ==========================================================================
   16. Utility
   ========================================================================== */

.hidden {
	display: none !important;
}


/* ==========================================================================
   18. Secondary Navigation – Desktop Top-Bar
   ========================================================================== */

.header__secondary {
	position: relative;
	z-index: 2;
	block-size: var(--header-secondary-height);
	background-color: var(--sec-nav-bg);
	color: var(--sec-nav-color);
}

.header__secondary .wrapper {
	block-size: 100%;
	display: flex;
	align-items: center;
}

#nav-secondary {
	inline-size: 100%;
}

.sec-menu {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: var(--jw-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top-level link (no children) */
.sec-item__link {
	display: flex;
	align-items: center;
	padding: var(--jw-space-4) var(--jw-space-10);
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	white-space: nowrap;
	block-size: var(--header-secondary-height);
	transition: opacity 0.15s ease;
}

.sec-item__link:hover,
.sec-item__link:focus-visible {
	opacity: 0.75;
}

.sec-item__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Top-level button trigger (has children) */
.sec-item {
	position: relative;
}

.sec-item__trigger {
	display: flex;
	align-items: center;
	gap: var(--jw-space-6);
	padding: var(--jw-space-4) var(--jw-space-10);
	background: none;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	white-space: nowrap;
	cursor: pointer;
	block-size: var(--header-secondary-height);
	transition: opacity 0.15s ease;
}

.sec-item__trigger:hover,
.sec-item__trigger[aria-expanded="true"] {
	opacity: 0.75;
}

.sec-item__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.sec-item__trigger .sec-icon--chevron {
	transition: transform 0.2s var(--ease-smooth);
	flex-shrink: 0;
}

.sec-item__trigger[aria-expanded="true"] .sec-icon--chevron {
	transform: rotate(180deg);
}

/* Sprachumschalter: Flagge + Name (Trigger + Panel-Links) */
.sec-lang-flag {
	inline-size: 1.25rem;
	block-size: auto;
	flex-shrink: 0;
	border-radius: 2px;
}

.sec-lang-name {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sec-panel__link-lang {
	display: inline-flex;
	align-items: center;
	gap: var(--jw-space-6);
}

/* Dropdown panel */
.sec-panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: auto;
	inset-inline-end: 0;
	z-index: 3;
	min-inline-size: 14rem;
	background-color: var(--sec-panel-bg);
	color: var(--sec-panel-color);
	box-shadow: 0 0.5rem 1.5rem oklch(from #000 l c h / 0.1);
	padding: var(--jw-space-8) 0;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.sec-panel[data-open] {
	opacity: 1;
	transform: translateY(0);
}

.sec-panel[hidden] {
	display: none;
}

/* Elternlink oben im Dropdown */
.sec-panel__page-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jw-space-6);
	padding: var(--jw-space-8) var(--jw-space-12);
	border-radius: 4px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	border-block-end: 1px solid oklch(from var(--sec-panel-color) l c h / 0.1);
	margin-block-end: var(--jw-space-4);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sec-panel__page-link:hover,
.sec-panel__page-link:focus-visible {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

.sec-panel__page-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Elternlink „Nicht verlinken" – Text ohne Hover/Klick-Ziel */
.sec-panel__page-link--static {
	pointer-events: none;
}

.sec-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Dropdown-Links */
.sec-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jw-space-8);
	padding: var(--jw-space-8) var(--jw-space-12);
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sec-panel__link:hover,
.sec-panel__link:focus-visible {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

.sec-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.sec-icon--arrow {
	flex-shrink: 0;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.sec-panel__link:hover .sec-icon--arrow,
.sec-panel__link:focus-visible .sec-icon--arrow {
	opacity: 1;
}

/* Depth 1 mit Beschreibungstext: Label + Desc gestapelt statt einzeiliger Titel */
.sec-panel__link:has(.sec-panel__link-text) {
	align-items: flex-start;
}

.sec-panel__link:has(.sec-panel__link-text) .sec-icon--arrow {
	margin-block-start: 0.2em;
}

.sec-panel__link-text {
	flex: 1;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jw-space-2);
}

.sec-panel__link-label {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.sec-panel__link-desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	opacity: 0.65;
}

/* Active current page: background-agnostic (Top-Bar dunkel, Dropdown hell) */
.sec-item--active > .sec-item__link {
	font-weight: 700;
	box-shadow: inset 0 -2px 0 currentColor;
}

.sec-item--active > .sec-item__trigger {
	font-weight: 700;
	box-shadow: inset 0 -2px 0 currentColor;
}

.sec-item--active > .sec-panel__link {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

/* Kein Klickziel nur auf der exakt aufgerufenen Seite. sec-item--active greift
   auch bei current_item_ancestor – Vorfahren müssen erreichbar bleiben
   (gleiche Trennung wie .current-menu-item bei der Primärnavigation). */
.current-menu-item > .sec-item__link,
.current-menu-item > .sec-panel__link {
	pointer-events: none;
}


/* ==========================================================================
   19. Secondary Navigation – Mobile (im Hamburger-Drawer)
   ========================================================================== */

/* Desktop: Mobile-Version verstecken */
.nav-secondary-mobile {
	display: none;
}

@media (max-width: 63.9375rem) {

	/* Desktop Top-Bar ausblenden auf Mobile */
	.header__secondary {
		display: none;
	}

	/* Mobile Secondary als eigene Sektion im Drawer */
	.nav-secondary-mobile {
		display: block;
		margin-block-start: var(--wp--preset--spacing--xs);
		padding-block-start: var(--wp--preset--spacing--xs);
		border-block-start: 1px solid oklch(from var(--wp--preset--color--on-surface) l c h / 0.12);
	}

	/* Im Mobile-Drawer: sec-menu vertikal */
	.nav-secondary-mobile .sec-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-secondary-mobile .sec-item__link,
	.nav-secondary-mobile .sec-item__trigger {
		width: 100%;
		padding: var(--jw-space-10) var(--jw-space-12);
		block-size: auto;
		justify-content: space-between;
	}

	/* Akkordion-Panel im Drawer */
	.nav-secondary-mobile .sec-panel {
		position: static;
		box-shadow: none;
		padding: 0;
		margin-inline-start: var(--jw-space-12);
		background-color: transparent;
		color: inherit;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nav-secondary-mobile .sec-panel[hidden] {
		display: none;
	}

	.nav-secondary-mobile .sec-panel[data-open] {
		opacity: 1;
		transform: none;
	}

	.nav-secondary-mobile .sec-panel__page-link {
		color: var(--wp--preset--color--primary);
		border-block-end: none;
		margin-block-end: 0;
	}

	.nav-secondary-mobile .sec-panel__link {
		padding: var(--jw-space-8) var(--jw-space-12);
	}

	/* --header-height auf Mobile = nur Primary-Höhe */
	:root {
		--header-height: var(--header-primary-height);
	}
}


/* ==========================================================================
   17. Nav Panel Simple – Primary Menü ohne MegaMenu
   Dropdown wie Secondary: position:absolute, 1 Level, kein full-width Panel.
   ========================================================================== */

.nav-item .nav-panel--simple {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: calc(var(--z-header) + 1);
	min-inline-size: 14rem;
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 0.5rem 1.5rem oklch(from #000 l c h / 0.1);
	padding: var(--jw-space-8) 0;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.nav-item .nav-panel--simple[data-open] {
	opacity: 1;
	transform: translateY(0);
}

.nav-item .nav-panel--simple[hidden] {
	display: none;
}

.nav-panel--simple .nav-panel__page-link {
	display: flex;
	align-items: center;
	gap: var(--jw-space-6);
	padding: var(--jw-space-8) var(--jw-space-12);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	border-block-end: 1px solid oklch(from var(--wp--preset--color--on-surface) l c h / 0.1);
	margin-block-end: var(--jw-space-4);
	transition: opacity 0.15s ease;
}

.nav-panel--simple .nav-panel__page-link:hover,
.nav-panel--simple .nav-panel__page-link:focus-visible {
	opacity: 0.75;
}

.nav-panel--simple .nav-panel__page-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.nav-panel--simple .nav-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-panel--simple .nav-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jw-space-8);
	padding: var(--jw-space-8) var(--jw-space-12);
	color: var(--wp--preset--color--on-surface);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-panel--simple .nav-panel__link:hover,
.nav-panel--simple .nav-panel__link:focus-visible {
	background-color: oklch(from var(--wp--preset--color--primary) l c h / 0.08);
	color: var(--wp--preset--color--primary);
}

.nav-panel--simple .nav-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.nav-panel--simple .nav-icon--arrow {
	flex-shrink: 0;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.nav-panel--simple .nav-panel__link:hover .nav-icon--arrow,
.nav-panel--simple .nav-panel__link:focus-visible .nav-icon--arrow {
	opacity: 1;
}

/* Depth 1 mit Beschreibungstext: Label + Desc gestapelt statt einzeiliger Titel */
.nav-panel--simple .nav-panel__link:has(.nav-panel__link-text) {
	align-items: flex-start;
}

.nav-panel--simple .nav-panel__link:has(.nav-panel__link-text) .nav-icon--arrow {
	margin-block-start: 0.2em;
}

@media (max-width: 63.9375rem) {
	.nav-item .nav-panel--simple {
		position: static;
		box-shadow: none;
		padding: 0;
		margin-inline-start: var(--jw-space-12);
		background-color: transparent;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nav-panel--simple .nav-panel__page-link {
		border-block-end: none;
		margin-block-end: 0;
	}
}


/* ==========================================================================
   18. Search Dialog
   ========================================================================== */

.search-dialog {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-header) + 5);
	background-color: oklch(from #000 l c h / 0.45);
	display: flex;
	align-items: flex-start;
	padding-block-start: var(--header-height);
}

.search-dialog__inner {
	display: flex;
	align-items: center;
	gap: var(--jw-space-16);
	padding: var(--jw-space-20);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 4px 24px oklch(from #000 l c h / 0.12);
}

.search-dialog__form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--jw-space-12);
	min-width: 0;
}

.search__field {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--jw-space-4) 0;
	color: var(--wp--preset--color--on-surface);
}

.search__field::placeholder {
	color: oklch(from var(--wp--preset--color--on-surface) l c h / 0.4);
}

.search__field:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.search-dialog__submit,
.search-dialog__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: var(--jw-space-8);
	min-inline-size: var(--min-tap-target);
	min-block-size: var(--min-tap-target);
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.2s ease;
}

.search-dialog__submit:hover,
.search-dialog__close:hover {
	color: var(--wp--preset--color--primary);
}

.search-dialog__submit:focus-visible,
.search-dialog__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}