/* ==========================================================================
   Hauptnavigation
   Farben werden bewusst nur als Variablen gesetzt und im Theme überschrieben.
   ========================================================================== */

.hn-wrap {
	/* Maße – werden vom Shortcode je Ansicht gesetzt */
	--hn-logo-h: 150px;
	--hn-logo-h-scroll: 60px;
	--hn-logo-h-mobil: 130px;
	--hn-nav-top: 0px;
	--hn-nav-top-scroll: 0px;
	--hn-toggle-extra: 0px;
	--hn-toggle-extra-scroll: 0px;
	--hn-pad-y: 0px;
	--hn-pad-x: clamp(16px, 4vw, 48px);
	--hn-max: 1640px;

	/* Farben */
	--hn-bg: transparent;
	--hn-link: #c8f531;
	--hn-overlay-bg: #232323;
	--hn-overlay-link: #b7a4f5;
	--hn-social-bg: transparent;
	--hn-burger-bg: transparent;

	/* Zeiten */
	--hn-easing: cubic-bezier(0.33, 0, 0.15, 1);
	--hn-dauer: 0.7s;

	/*
	 * Die Leiste ist immer genau so hoch wie das Logo der jeweiligen Ansicht –
	 * plus den zusätzlichen Abstand von oben, falls das Logo dadurch weiter
	 * nach unten rutscht als die reine Logohöhe. max() verhindert, dass der
	 * Platzhalter bei einem gesetzten Abstand zu kurz wird und der Inhalt
	 * darunter vom Logo überdeckt wird.
	 */
	--hn-h: max(
		calc(var(--hn-logo-h) + var(--hn-pad-y) * 2),
		calc(var(--hn-logo-h) + var(--hn-pad-y) + var(--hn-nav-top, 0px))
	);
	--hn-h-scroll: max(
		calc(var(--hn-logo-h-scroll) + var(--hn-pad-y) * 2),
		calc(var(--hn-logo-h-scroll) + var(--hn-pad-y) + var(--hn-nav-top-scroll, 0px))
	);

	/*
	 * Der Wrapper selbst bekommt nie Klicks – nur die tatsächlich sichtbaren,
	 * interaktiven Teile (weiter unten einzeln wieder auf "auto" gesetzt).
	 * Falls der Wrapper durch ein Flex-/Grid-Layout im Theme höher gezogen
	 * wird als eigentlich vorgesehen, blockiert er so trotzdem nie Klicks auf
	 * dahinterliegende Seiteninhalte.
	 */
	pointer-events: none;
}

/*
 * ".hn" selbst bekommt bewusst KEINE Klicks: Die Leiste ist immer so hoch wie
 * das eingestellte Logo (bei einem großen Logo z. B. 400px) – über die volle
 * Breite. Nur ein kleiner Teil davon ist wirklich sichtbar (Logo, Menüpunkte,
 * Button). Ohne dieses Umdenken würde der leere, transparente Rest dieser
 * Fläche Klicks auf darunterliegende Seiteninhalte abfangen. Deshalb bekommen
 * nur die tatsächlich sichtbaren, interaktiven Elemente "auto" zurück.
 */
.hn__nav--desktop,
.hn__toggle,
.hn__overlay {
	pointer-events: auto;
}

/*
 * Der Logo-Link selbst bleibt bei "none" – nur das Bild darin bekommt Klicks
 * zurück. Grund: Ein CSS-transform (siehe .hn__logo-img beim Scrollen) ändert
 * nie die Layout-Box eines Elements, nur wie es gezeichnet wird. Würde der
 * Link selbst "auto" bekommen, bliebe seine Klick-Fläche unsichtbar so groß
 * wie das ungeskalierte Bild – Browser werten Klicks aber anhand der
 * tatsächlich gezeichneten (transformierten) Fläche aus, wenn "auto" gezielt
 * nur auf dem Bild sitzt. Ein Klick aufs Bild aktiviert dank Vererbung trotzdem
 * ganz normal den umschließenden Link.
 */
.hn__logo-img {
	pointer-events: auto;
}

.hn {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	background: var(--hn-bg);
}

/* Ohne Logo gibt es keine Bezugshöhe – dann greift ein schlichter Standard,
   der sich bei Bedarf ebenfalls um den Abstand von oben vergrößert. */
.hn-wrap--kein-logo {
	--hn-h: max(72px, calc(72px + var(--hn-nav-top, 0px)));
	--hn-h-scroll: max(72px, calc(72px + var(--hn-nav-top-scroll, 0px)));
}

/* Platzhalter, der den Inhalt nach unten schiebt – nur mit abstand="1" */
.hn-abstand {
	height: var(--hn-h);
}

/*
 * Direkt nach dem Laden sind Logo, Navigation und Leiste ohne Übergang, bis
 * das Script (assets/js/hauptnavigation.js) einmal den tatsächlichen
 * Scroll-Zustand festgestellt hat. Ohne das würde bei einer bereits
 * gescrollten Position (z. B. Ankerlink, vom Browser wiederhergestellte
 * Scrollposition) beim Laden sichtbar die Übergangs-Animation ablaufen,
 * statt dass die Leiste sofort korrekt steht.
 */
.hn-vor-scroll .hn__bar,
.hn-vor-scroll .hn__logo,
.hn-vor-scroll .hn__logo-img,
.hn-vor-scroll .hn__nav--desktop,
.hn-vor-scroll .hn__toggle,
.hn-vor-scroll .hn__close,
.hn-vor-scroll .hn__overlay-logo {
	transition: none !important;
}

/*
 * Optionaler umgebender Container mit der Klasse "navbox-inner" (siehe
 * shortcode.php): passt seine Höhe an die Leiste an, inklusive weicher
 * Übergangs-Animation beim Scrollen. Werte fest hinterlegt (statt über
 * CSS-Variablen), weil "navbox-inner" ein Vorfahre der Leiste ist und deren
 * Variablen als Vorfahre nicht per var() lesen kann.
 */
.navbox-inner {
	transition: height 0.7s cubic-bezier(0.33, 0, 0.15, 1);
}

.navbox-inner:has(.hn-vor-scroll) {
	transition: none !important;
}

.hn__bar {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	/*
	 * Die Breite gilt für den Inhalt selbst: vom linken Rand des Logos bis zum
	 * rechten Rand des letzten Links. Der Seitenabstand liegt deshalb außerhalb
	 * der Maximalbreite, nicht als Innenabstand darin.
	 */
	width: min(var(--hn-max), 100% - var(--hn-pad-x) * 2);
	margin: 0 auto;
	min-height: var(--hn-h);
	padding: var(--hn-pad-y) 0;
	transition: min-height var(--hn-dauer) var(--hn-easing);
}

.hn.is-scrolled .hn__bar {
	min-height: var(--hn-h-scroll);
}

/* --- Logo --------------------------------------------------------------- */

/*
 * Das Logo liegt absolut in der Leiste. So bestimmt es die Leistenhöhe nicht mit
 * und kann per transform skaliert werden – das ist weicher als eine Höhen-
 * animation und immun gegen Theme-Regeln wie "img { height: auto !important }".
 */
.hn__logo {
	position: absolute;
	left: 0;
	/* Bleibt vertikal zentriert in der Leiste, verschiebt sich aber zusätzlich
	   um denselben Wert wie die Navigation – so bleiben beide bündig. */
	top: calc(50% + var(--hn-nav-top, 0px));
	display: block;
	line-height: 0;
	text-decoration: none;
	transform: translateY(-50%);
	transition: top var(--hn-dauer) var(--hn-easing);
}

.hn.is-scrolled .hn__logo {
	top: calc(50% + var(--hn-nav-top-scroll, 0px));
}

.hn__logo-img {
	display: block;
	/*
	 * !important, weil Theme-Regeln wie "img { max-width:100%; height:auto; }"
	 * (teils selbst mit !important gesetzt) sonst die im Backend eingestellte
	 * Höhe überschreiben und das Logo in seiner natürlichen Bildgröße zeigen.
	 */
	width: auto !important;
	height: var(--hn-logo-h) !important;
	max-height: var(--hn-logo-h) !important;
	max-width: none !important;
	transform: scale(1);
	transform-origin: left center;
	will-change: transform;
	backface-visibility: hidden;
	transition: transform var(--hn-dauer) var(--hn-easing);
}

.hn.is-scrolled .hn__logo-img {
	transform: scale(var(--hn-logo-scale, 0.4));
}

/* --- Desktop-Menü ------------------------------------------------------- */

.hn__nav--desktop {
	margin-left: auto;
	/* Bündig mit der Logo-Oberkante, Feinjustierung über die Einstellungen. */
	margin-top: var(--hn-nav-top, 0px);
	transition: margin-top var(--hn-dauer) var(--hn-easing);
}

.hn.is-scrolled .hn__nav--desktop {
	margin-top: var(--hn-nav-top-scroll, 0px);
}

.hn__list {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hn__list a {
	color: var(--hn-link);
	font-size: 0.9rem;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.hn__list a:hover,
.hn__list a:focus-visible {
	opacity: 0.7;
	text-decoration: underline;
}

.hn__list .current-menu-item > a,
.hn__list .current_page_item > a,
.hn__list .current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Burger ------------------------------------------------------------- */

.hn__toggle,
.hn__close {
	display: none;
	appearance: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--hn-burger-bg, transparent);
	border: 0;
	border-radius: 999px;
	padding: 0;
	margin: 0;
	color: var(--hn-link);
	cursor: pointer;
	transition: background-color 0.2s ease, margin-top var(--hn-dauer) var(--hn-easing);
}

.hn__toggle:focus-visible,
.hn__close:focus-visible,
.hn__social-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/*
 * Kein Hover-/Fokus-Hintergrund auf Burger- und Close-Button, unabhängig von
 * der im Backend eingestellten Hintergrundfarbe (--hn-burger-bg) – manche
 * Browser/Themes fügen sonst über [type="button"] einen eigenen
 * Hover-Zustand hinzu.
 */
.hn__toggle[type="button"]:hover,
.hn__toggle[type="button"]:focus,
.hn__close[type="button"]:hover,
.hn__close[type="button"]:focus {
	background: none !important;
}

.hn__burger,
.hn__burger::before,
.hn__burger::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
}

.hn__burger::before,
.hn__burger::after {
	content: '';
	position: relative;
}

.hn__burger::before {
	top: -8px;
}

.hn__burger::after {
	top: 6px;
}

.hn__close svg {
	width: 26px;
	height: 26px;
	display: block;
}

/* Eigenes hochgeladenes Icon für Burger- oder Schließen-Button. */
.hn-menu-icon {
	max-width: 26px;
	max-height: 26px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* --- Overlay (mobil) ---------------------------------------------------- */

.hn__overlay,
.hn__overlay[hidden] {
	display: none;
}

.hn__overlay-logo-img {
	display: block;
	/*
	 * !important aus demselben Grund wie beim Logo in der Leiste: Theme-Regeln
	 * wie "img { max-width:100%; height:auto; }" überschreiben sonst die im
	 * Backend eingestellte Höhe.
	 */
	width: auto !important;
	height: var(--hn-logo-h-mobil) !important;
	max-height: var(--hn-logo-h-mobil) !important;
	max-width: none !important;
}

.hn__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.hn__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--hn-social-bg, transparent);
	color: var(--hn-link);
	text-decoration: none;
	transition: opacity 0.15s ease, background-color 0.2s ease;
}

.hn__social-link:hover {
	opacity: 0.7;
}

.hn-icon {
	width: 26px;
	height: 26px;
	display: block;
}

/* Eigenes hochgeladenes Icon statt der mitgelieferten SVG. */
.hn-icon--eigen {
	max-width: 26px;
	max-height: 26px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hn-hinweis {
	padding: 12px 16px;
	background: #fff3cd;
	color: #664d03;
	font-size: 0.9rem;
}

/* --- Umschaltpunkt ------------------------------------------------------ */

@media (max-width: 1024px) {
	.hn__bar {
		justify-content: flex-start;
		/* Auf Tablet/Mobil bleiben Logo und Menü-Button vertikal zentriert;
		   die Abstand-Einstellung verschiebt sie nur zusätzlich von dort aus. */
		align-items: center;
	}

	.hn__nav--desktop {
		display: none;
	}

	.hn__toggle {
		display: flex;
		position: absolute;
		right: 0;
		/*
		 * Absolut statt über Flexbox+margin-top positioniert, mit derselben
		 * Formel wie das Logo (top:50% + Abstand, per translateY zentriert).
		 * So lässt sich exakt dieselbe Formel unten am Close-Button
		 * wiederverwenden – beide bleiben dadurch an derselben Stelle stehen,
		 * der Button "wandert" beim Öffnen des Menüs nicht mehr.
		 */
		top: calc(50% + var(--hn-nav-top, 0px) + var(--hn-toggle-extra, 0px));
		transform: translateY(-50%);
		transition: background-color 0.2s ease, top var(--hn-dauer) var(--hn-easing);
	}

	.hn.is-scrolled .hn__toggle {
		top: calc(50% + var(--hn-nav-top-scroll, 0px) + var(--hn-toggle-extra-scroll, 0px));
	}

	.hn__overlay {
		position: fixed;
		inset: 0;
		z-index: 999;
		display: grid;
		grid-template-rows: auto 1fr auto;
		justify-items: center;
		gap: 20px;
		padding: 0 24px 44px;
		background: var(--hn-overlay-bg);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.hn__overlay[hidden] {
		display: none;
	}

	/*
	 * Gleiche Position wie der Burger-Button (siehe .hn__toggle oben): Da der
	 * Close-Button in einem eigenen, bildschirmfüllenden Container sitzt
	 * (nicht in der Leiste selbst), lässt sich "top:50%" hier nicht
	 * wiederverwenden – stattdessen dieselbe Rechnung mit den absoluten
	 * Leisten-Maßen (--hn-h, halbe Buttongröße 23px). --hn-pad-x statt "right:0"
	 * gleicht aus, dass die Leiste selbst schon vom Seitenrand eingerückt ist.
	 */
	.hn__close {
		display: flex;
		position: absolute;
		right: var(--hn-pad-x);
		top: calc(var(--hn-h) / 2 + var(--hn-nav-top, 0px) + var(--hn-toggle-extra, 0px) - 23px);
		color: var(--hn-link);
		transition: top var(--hn-dauer) var(--hn-easing);
	}

	/* Menü wurde im gescrollten Zustand geöffnet – Close-Button entsprechend. */
	.hn-wrap:has(.hn.is-scrolled) .hn__close {
		top: calc(var(--hn-h-scroll) / 2 + var(--hn-nav-top-scroll, 0px) + var(--hn-toggle-extra-scroll, 0px) - 23px);
	}

	/*
	 * Abstand von oben wie bei Leiste, Logo und Burger/Close-Button – statt
	 * fest 34px (Overlay-Padding) + 10px (dieser Wert), unabhängig vom
	 * eingestellten Abstand. Dadurch sprang das Logo beim Öffnen des Menüs
	 * sichtbar nach unten. 34px Basisabstand bleiben als Mindestluft zum
	 * oberen Rand erhalten, der Abstand von oben kommt on top dazu.
	 */
	.hn__overlay-logo {
		display: block;
		margin-top: calc(34px + var(--hn-nav-top, 0px));
		line-height: 0;
		transition: margin-top var(--hn-dauer) var(--hn-easing);
	}

	.hn-wrap:has(.hn.is-scrolled) .hn__overlay-logo {
		margin-top: calc(34px + var(--hn-nav-top-scroll, 0px));
	}

	.hn__nav--mobil {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.hn__list--mobil {
		flex-direction: column;
		gap: 14px;
		width: 100%;
		text-align: center;
	}

	.hn__list--mobil a {
		color: var(--hn-overlay-link);
		font-size: clamp(1.5rem, 6vw, 2rem);
		line-height: 1.3;
	}

	.hn__social {
		padding-bottom: 10px;
	}
}

/*
 * Nur Mobil (nicht Tablet): Logo in der geschlossenen Leiste mittig statt
 * linksbündig wie auf Desktop/Tablet, Button bleibt rechts.
 */
@media (max-width: 767px) {
	.hn__logo {
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/*
	 * Auf Desktop/Tablet schrumpft das Logo bewusst von der linken Kante aus
	 * (bleibt linksbündig). Hier ist es aber selbst zentriert – ohne diese
	 * Zeile würde es beim Schrumpfen trotzdem von seiner eigenen linken Kante
	 * aus kleiner werden und dadurch optisch nach links wandern, statt mittig
	 * zu bleiben.
	 */
	.hn__logo-img {
		transform-origin: center center;
	}
}

/* Auf dem Desktop bleibt das Overlay aus, auch wenn es geöffnet wurde. */
@media (min-width: 1025px) {
	.hn__overlay {
		display: none !important;
	}
}

/* Scrollsperre bei geöffnetem Menü */
body.hn-menu-offen {
	overflow: hidden;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hn,
	.hn__bar,
	.hn__logo,
	.hn__logo-img,
	.hn__nav--desktop,
	.hn__list a,
	.hn__toggle,
	.hn__close,
	.hn__overlay-logo,
	.hn__social-link,
	.navbox-inner {
		transition: none;
	}
}