/* =========================================================
   Sandra Nav — Styles für drei Zustände:
   [data-sn-state="full"]    Vollansicht (Logo + Menü + sichtbares Leistungen-Untermenü)
   [data-sn-state="omni"]    Omnibar (horizontal scrollbare Pill-Leiste)
   [data-sn-state="hidden"]  Weggeklickt (nur schmale Hinweisleiste)
   ========================================================= */

:root {
	--sn-bg: #1d3557;
	--sn-bg-light: #ffffff;
	--sn-accent: #c78b5b;
	--sn-text: #ffffff;
	/* Gedämpfter Text AUF dunklem (Navy-)Hintergrund, z.B. Menüpunkte */
	--sn-text-muted: rgba(255, 255, 255, 0.85);
	/* Gedämpfter Text AUF hellem Hintergrund, z.B. Logo-Unterzeile */
	--sn-text-muted-on-light: rgba(29, 53, 87, 0.6);
	--sn-radius: 999px;
	--sn-transition: 180ms ease;
}

/*
 * Hartes Reset gegen Theme-/Page-Builder-Grundstile (z.B. Divi), die oft
 * generische Regeln wie "li { list-style: disc; padding-left: 1.5em; }"
 * mitbringen. list-style ist zwar vererbbar, aber eine DIREKTE Regel auf
 * dem <li> selbst gewinnt immer gegen eine nur vom <ul> geerbte
 * list-style-Einstellung, egal wie spezifisch die Ahnen-Regel ist —
 * daher hier explizit auf jedes <li> im Header zielen (inkl. ::marker,
 * falls die Marker-Box trotz list-style:none noch reserviert würde).
 * Bewusst NUR auf <li>, nicht auf <ul> — die <ul>-Elemente (.sn-menu__list,
 * .sn-sublevel) brauchen an anderer Stelle bewusst gesetztes padding für
 * ihr eigenes Flex-/Grid-Layout, das soll hier nicht überschrieben werden.
 */
.sn-header li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sn-header li::marker {
	content: "" !important;
}

/*
 * Positionierung ist zustandsabhängig:
 *
 * - "full" (Vollansicht, nur auf breiten Bildschirmen erreichbar): der
 *   Header steht ganz normal im Dokumentfluss und scrollt mit der Seite
 *   weg wie jeder andere Inhalt auch. Kein Sprung, weil hier gar nichts
 *   "einrastet" — er verhält sich wie ein normales Element.
 * - "omni" / "hidden": der Header ist fixiert (position:fixed) am oberen
 *   Bildschirmrand. Der Wechsel dahin passiert erst, sobald der volle
 *   Header bereits komplett aus dem sichtbaren Bereich gescrollt ist
 *   (siehe JS) — zu diesem Zeitpunkt ist von ihm ohnehin nichts mehr zu
 *   sehen, der Wechsel auf die kompakte Omnibar-Optik passiert daher
 *   unsichtbar "hinter der Kulisse". Die Omnibar selbst startet dabei im
 *   ausgefahrenen (unsichtbaren) Zustand und erscheint erst, wenn danach
 *   nach oben gescrollt wird (siehe .sn-slide-hidden).
 *
 * position:fixed statt position:sticky: in verschachtelten Theme-/
 * Page-Builder-Strukturen (z.B. Divi Theme Builder mit Section > Row >
 * Column > Code-Modul) reicht ein einziges "overflow" auf irgendeinem
 * Vorfahren-Element, um position:sticky lautlos zu deaktivieren.
 * position:fixed ist unabhängig von Vorfahren-Overflow (nur transform/
 * filter/perspective auf einem Vorfahren würde es stören, was in Divi
 * deutlich seltener vorkommt). Der zugehörige .sn-spacer direkt nach dem
 * Header hält per JS nur im fixierten Zustand die Höhe frei, die der
 * Header sonst im Dokumentfluss einnehmen würde — in "full" ist er 0px,
 * weil der Header dort ja bereits selbst im Fluss steht.
 */
.sn-header {
	z-index: 999;
	font-family: inherit;
	/* Einblenden (Klasse wird entfernt) soll spürbar schneller/"sofort"
	   wirken als das Ausblenden — daher hier die kurze Standard-Dauer.
	   visibility springt beim Einblenden ohne Verzögerung auf "visible"
	   zurück (delay 0s), damit Tastatur-Fokus sofort wieder erreichbar
	   ist, sobald die Navigation sichtbar wird. */
	transition: transform 100ms ease-out, visibility 0s linear 0s;
}

.sn-header[data-sn-state="full"] {
	position: static;
}

.sn-header[data-sn-state="omni"],
.sn-header[data-sn-state="hidden"] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

.sn-spacer {
	display: block;
	width: 100%;
}

/* Verhindert eine sichtbar animierte Übergangsbewegung genau in dem
   Moment, in dem JS den Header von "full" (im Fluss) auf "omni" (fixiert,
   ausgefahren) umschaltet — dieser Sprung soll unsichtbar passieren,
   nicht als Slide-Animation zu sehen sein. JS entfernt die Klasse direkt
   im nächsten Frame wieder, danach animieren Ein-/Ausfahren wie gewohnt. */
.sn-header.sn-no-transition {
	transition: none !important;
}

/*
 * Scroll-Ein-/Ausfahren: nur aktiv im Omnibar-Zustand (siehe JS). Fährt
 * bei anhaltendem Scroll nach unten aus dem Sichtbereich, bei Scroll
 * nach oben kommt sie sofort und fixiert im Omnibar-Look zurück. Wird
 * pausiert, solange der Fokus innerhalb der Navigation liegt.
 *
 * visibility:hidden wird erst NACH der Slide-Animation aktiv (delay
 * 260ms = Dauer der transform-Animation) — sonst würde der Inhalt schon
 * "unsichtbar für Tastatur/Screenreader" werden, während er optisch noch
 * gut sichtbar wegrutscht. Ohne das wäre der ausgefahrene Header zwar
 * unsichtbar, aber weiterhin per Tab erreichbar — Tastatur-Fokus könnte
 * dann unbemerkt aus dem sichtbaren Bereich verschwinden.
 */
.sn-header.sn-slide-hidden {
	transform: translateY(-100%);
	transition: transform 260ms ease-in, visibility 0s linear 260ms;
	visibility: hidden;
}

.sn-header * {
	box-sizing: border-box;
}

.sn-btn {
	cursor: pointer;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	border-radius: var(--sn-radius);
	padding: 0.5rem 1rem;
}

.sn-btn:focus-visible {
	outline: 2px solid var(--sn-accent);
	outline-offset: 2px;
}

/*
 * Sichtbarer Fokus-Rahmen für ALLE Links im Header (Hauptpunkte,
 * Leistungen-Unterpunkte, in Vollansicht wie Omnibar). Ohne diese Regel
 * hätten die eigentlichen Navigationslinks — anders als die Buttons —
 * nur einen leichten Hintergrund-Tint als Fokus-Hinweis, der je nach
 * Bildschirm/Blickwinkel kaum wahrnehmbar sein kann. outline verhält
 * sich additiv zu den bestehenden Hover-/Fokus-Hintergrundfarben je
 * Zustand und muss daher nicht pro Selektor einzeln wiederholt werden.
 */
.sn-header a:focus-visible {
	outline: 2px solid var(--sn-accent);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.sn-btn--primary {
	background: var(--sn-bg);
	color: var(--sn-text);
}

.sn-btn--icon {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

/* Pfeil-/Schließen-Icons als Inline-SVG statt Text-Zeichen: robust
   gegenüber Theme-/Page-Builder-Schriftarten (z.B. Divi-Icon-Fonts),
   die einzelne Unicode-Zeichen wie ‹ › durch eigene Glyphen ersetzen
   können, wenn sie global auf Buttons/Spans angewendet werden. */
.sn-arrow-icon,
.sn-close-icon {
	width: 1em;
	height: 1em;
	display: block;
}

/* -------- Hidden Bar (weggeklickter Zustand) -------- */

.sn-hidden-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Erstmal ohne eigenen Hintergrund/Rahmen — übernimmt die Farbe der
	   Seite dahinter. Falls später doch eine leichte Abgrenzung gewünscht
	   ist, hier background/border wieder ergänzen. */
	padding: 0.75rem 1.25rem;
}

.sn-hidden-bar__text {
	color: var(--sn-bg);
	font-size: 0.95rem;
}

.sn-header[data-sn-state="hidden"] .sn-hidden-bar {
	display: flex;
}

.sn-header[data-sn-state="hidden"] .sn-bar {
	display: none;
}

/* -------- Bar: gemeinsamer Rahmen für full + omni -------- */

.sn-bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: var(--sn-bg-light);
	padding: 0.75rem 1.5rem;
}

.sn-logo {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--sn-bg);
	flex-shrink: 0;
	line-height: 1.2;
}

.sn-logo__full {
	display: flex;
	flex-direction: column;
}

.sn-logo__image {
	max-height: 48px;
	width: auto;
	display: block;
}

.sn-logo__name {
	font-weight: 700;
	font-size: 1.1rem;
}

.sn-logo__tagline {
	font-size: 0.75rem;
	color: var(--sn-text-muted-on-light);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Kompaktes Logo (Favicon) — nur im Omnibar-Zustand sichtbar, siehe unten */
.sn-logo__compact {
	display: none;
}

.sn-logo__compact-image {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 0.35rem;
	object-fit: contain;
}

.sn-hide-nav {
	margin-left: auto;
	color: #333;
	flex-shrink: 0;
}

/* -------- Nav / Menu -------- */

.sn-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.sn-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--sn-bg);
	border-radius: 0.75rem;
	overflow: hidden;
}

.sn-menu__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.sn-menu__list > li {
	list-style: none;
}

.sn-menu__list > li > a {
	display: inline-block;
	padding: 0.6rem 1rem;
	color: var(--sn-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 0.5rem;
	transition: background var(--sn-transition), color var(--sn-transition);
}

.sn-menu__list > li > a:hover,
.sn-menu__list > li > a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.sn-menu__list > li.current-menu-item > a,
.sn-menu__list > li[aria-current] > a {
	color: var(--sn-accent);
	background: rgba(255, 255, 255, 0.08);
}

/* Permanent sichtbares Leistungen-Untermenü (Vollansicht) */

.sn-sublevel {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sn-menu__list > li:not(.sn-has-visible-children) > .sn-sublevel {
	display: none;
}

.sn-sublevel a {
	color: var(--sn-text-muted);
	text-decoration: none;
	font-size: 0.85rem;
	padding: 0.2rem 0.25rem;
	border-radius: 0.25rem;
}

.sn-sublevel a:hover,
.sn-sublevel a:focus-visible {
	color: var(--sn-text);
	text-decoration: underline;
}

.sn-sublevel li.current-menu-item > a {
	color: var(--sn-accent);
}

/*
 * Vollansicht: "Leistungen" bleibt inline in der ersten Menüzeile,
 * nur die Unterpunkte-Liste rutscht als eigene volle Zeile darunter.
 *
 * Technik: das <li> selbst wird mit display:contents "aufgelöst", damit
 * sein <a>-Link und seine verschachtelte <ul class="sn-sublevel"> als
 * zwei eigenständige Flex-Items direkt im .sn-menu__list-Grid landen.
 * Der Link bleibt dadurch an seiner normalen Position in Zeile 1, die
 * Unterpunkte-Liste bekommt flex-basis:100% und rutscht in Zeile 2.
 * Nur im "full"-Zustand aktiv — im Omnibar-Zustand bleibt das <li> eine
 * normale Box (siehe weiter unten).
 */
.sn-header[data-sn-state="full"] .sn-menu__list > li.sn-has-visible-children {
	display: contents;
}

.sn-header[data-sn-state="full"] .sn-menu__list > li.sn-has-visible-children > .sn-sublevel {
	order: 99;
	flex-basis: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	column-gap: 2.5rem;
	row-gap: 0.35rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 0.5rem;
	padding: 0.75rem 0.75rem 0.75rem;
}

/* Scroll-Pfeile links/rechts vom Track: standardmäßig ausgeblendet,
   nur im Omni-Zustand sichtbar (siehe weiter unten). */
.sn-scroll-arrow {
	display: none;
}

/* Verlaufsblenden: rein optisch, nur im Omni-Zustand sichtbar (siehe
   weiter unten). pointer-events:none ist Pflicht, sonst blockieren sie
   Klicks auf die darunterliegenden Chips. */
.sn-fade {
	display: none;
	pointer-events: none;
}

/* =========================================================
   Omnibar-Zustand
   ========================================================= */

.sn-header[data-sn-state="omni"] .sn-bar {
	gap: 6px;
	background: var(--sn-bg);
	border-radius: 100px;
	padding: 10px 14px 10px 6px;
	box-shadow: 0 20px 60px rgba(29, 53, 87, 0.18);
}

.sn-header[data-sn-state="omni"] .sn-logo {
	flex-direction: row;
	align-items: center;
}

/* Im Omnibar-Zustand: volles Logo ausblenden, kompaktes rundes Logo zeigen */
.sn-header[data-sn-state="omni"] .sn-logo__full {
	display: none;
}

.sn-header[data-sn-state="omni"] .sn-logo__compact {
	display: block;
}

.sn-header[data-sn-state="omni"] .sn-logo__compact-image {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

/* Scroll-Pfeile: klickbar für Desktop-Nutzer:innen ohne Touchpad/Wischen,
   flankieren den Track direkt links und rechts. */
.sn-header[data-sn-state="omni"] .sn-scroll-arrow {
	display: flex;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--sn-text);
	font-size: 1rem;
	font-weight: 700;
}

.sn-header[data-sn-state="omni"] .sn-scroll-arrow:hover {
	background: rgba(255, 255, 255, 0.18);
}

/* .sn-nav ist der positionierte Rahmen für die Verlaufsblenden und muss
   selbst schrumpfen dürfen (min-width:0), sonst läuft die Omnibar über
   die verfügbare Breite hinaus und der Track kann nicht scrollen. */
.sn-header[data-sn-state="omni"] .sn-nav {
	position: relative;
	min-width: 0;
}

.sn-header[data-sn-state="omni"] .sn-menu {
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.sn-header[data-sn-state="omni"] .sn-menu__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
	padding: 4px 6px 10px 4px;

	/* Farblich abgesetzter, durchgehend sichtbarer Scrollbalken statt
	   versteckter Standard-Leiste — Desktop-Nutzer:innen sehen so direkt,
	   dass horizontal weiterer Inhalt folgt. */
	scrollbar-width: thin;
	scrollbar-color: var(--sn-accent) rgba(255, 255, 255, 0.15);
}

.sn-header[data-sn-state="omni"] .sn-menu__list::-webkit-scrollbar {
	height: 5px;
}

.sn-header[data-sn-state="omni"] .sn-menu__list::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.15);
	border-radius: var(--sn-radius);
}

.sn-header[data-sn-state="omni"] .sn-menu__list::-webkit-scrollbar-thumb {
	background: var(--sn-accent);
	border-radius: var(--sn-radius);
}

.sn-header[data-sn-state="omni"] .sn-menu__list > li {
	flex: 0 0 auto;
}

.sn-header[data-sn-state="omni"] .sn-menu__list > li > a {
	padding: 11px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--sn-radius);
	white-space: nowrap;
}

.sn-header[data-sn-state="omni"] .sn-menu__list > li > a:hover,
.sn-header[data-sn-state="omni"] .sn-menu__list > li > a:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

.sn-header[data-sn-state="omni"] .sn-menu__list > li.current-menu-item > a {
	background: var(--sn-accent);
	color: var(--sn-bg);
}

/* "Leistungen" selbst farblich hervorgehoben, wie ein aktiver Menüpunkt */
.sn-header[data-sn-state="omni"] .sn-menu__list > li.sn-has-visible-children > a {
	color: var(--sn-bg);
	background: var(--sn-accent);
	font-weight: 700;
}

.sn-header[data-sn-state="omni"] .sn-menu__list > li.sn-has-visible-children > a:hover,
.sn-header[data-sn-state="omni"] .sn-menu__list > li.sn-has-visible-children > a:focus-visible {
	background: #d59d70;
}

/*
 * Omnibar: "Leistungen" und seine Unterpunkte sind alle Teil derselben
 * horizontal scrollbaren Pill-Reihe — kein Klick, kein Panel. Auflösung
 * per display:contents auf zwei Ebenen (li + verschachtelte ul), damit
 * jeder Unterpunkt ein eigenständiges Pill-Element direkt hinter
 * "Leistungen" wird, in der ursprünglichen Menü-Reihenfolge.
 */
.sn-header[data-sn-state="omni"] .sn-menu__list > li.sn-has-visible-children {
	display: contents;
}

.sn-header[data-sn-state="omni"] .sn-sublevel {
	display: contents;
}

/* Unterpunkte optisch von den Hauptpunkten abgesetzt: etwas kleiner
   und gedämpfter statt der kräftigen Hauptpunkt-Pills. */
.sn-header[data-sn-state="omni"] .sn-sublevel > li > a {
	display: inline-block;
	padding: 10px 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sn-text-muted);
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--sn-radius);
	white-space: nowrap;
	text-decoration: none;
}

.sn-header[data-sn-state="omni"] .sn-sublevel > li > a:hover,
.sn-header[data-sn-state="omni"] .sn-sublevel > li > a:focus-visible {
	color: var(--sn-text);
	background: rgba(255, 255, 255, 0.12);
}

.sn-header[data-sn-state="omni"] .sn-sublevel > li.current-menu-item > a {
	color: var(--sn-bg);
	background: var(--sn-accent);
	font-weight: 700;
}

/* Optional: einzelne Unterpunkte lassen sich hervorheben, indem im
   Menü-Editor unter "CSS-Klassen (optional)" der Wert sn-accent gesetzt
   wird (z.B. für einen Punkt wie "SEO"). Wirkt in Vollansicht + Omnibar. */
.sn-sublevel > li.sn-accent > a {
	color: var(--sn-accent);
	font-weight: 700;
}

.sn-header[data-sn-state="omni"] .sn-sublevel > li.sn-accent > a {
	color: var(--sn-bg);
	background: var(--sn-accent);
}

/* Verlaufsblenden am linken/rechten Rand des Tracks: signalisieren
   "hier geht's weiter", ohne Klicks zu blockieren. */
.sn-header[data-sn-state="omni"] .sn-fade {
	display: block;
	position: absolute;
	top: 4px;
	bottom: 10px;
	width: 26px;
	border-radius: var(--sn-radius);
	z-index: 1;
}

.sn-header[data-sn-state="omni"] .sn-fade--left {
	left: 0;
	background: linear-gradient(to left, rgba(29, 53, 87, 0), var(--sn-bg));
}

.sn-header[data-sn-state="omni"] .sn-fade--right {
	right: 0;
	background: linear-gradient(to right, rgba(29, 53, 87, 0), var(--sn-bg));
}

.sn-header[data-sn-state="omni"] .sn-hide-nav {
	margin-left: 0;
	color: var(--sn-text);
}

.sn-header[data-sn-state="omni"] .sn-hide-nav:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.sn-menu__list {
		scroll-behavior: auto;
	}
	.sn-btn,
	.sn-menu__list > li > a,
	.sn-header {
		transition: none;
	}
}

/* =========================================================
   Kleine Bildschirme: auch ohne JS-Fallback nutzbar
   ========================================================= */
@media (max-width: 480px) {
	.sn-logo__tagline {
		display: none;
	}
}