/* ==========================================================================
   Header / Navigation (Divi Theme Builder)
   Klasse "header_nav" sitzt auf der Reihe, die Logo, Menü und Kontakt-Button umschließt.
   ========================================================================== */

/* Die globale Regel ".et_pb_section { padding-top/-bottom: 64px }" aus style.css gilt für
   Content-Sections, nicht für die Header-Section — hier zurückgesetzt. Zusätzlich fixierte
   Kopfzeile mit Scroll-Verhalten aus dem Entwurf: transparent + ohne Schatten ganz oben,
   wird beim Scrollen weiß + bekommt Rahmen/Schatten ("scrolled"), verschwindet beim
   Runterscrollen und erscheint beim Hochscrollen wieder ("nav-hidden") — siehe
   js/header-scroll.js für die Scroll-Logik. */
.navigation,
.navigation-mobile {
	padding-top: 0;
	padding-bottom: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	box-sizing: border-box;
	background: #fff;
	border-bottom: 1px solid var(--border-default);
	box-shadow: 0 4px 20px -8px rgba(5, 36, 83, 0.15);
	transition: background 280ms, border-color 280ms, box-shadow 280ms, transform 280ms;
}

/* Transparenter Start-Zustand (schwebend über einem Hero-Bereich) nur auf der Startseite —
   auf allen anderen Seiten bleibt die Navigation durchgehend weiß mit Schatten. */
.home .navigation,
.home .navigation-mobile {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

.home .navigation.scrolled,
.home .navigation-mobile.scrolled {
	background: #fff;
	border-bottom-color: var(--border-default);
	box-shadow: 0 4px 20px -8px rgba(5, 36, 83, 0.15);
}

.navigation.nav-hidden,
.navigation-mobile.nav-hidden {
	transform: translateY(-100%);
}

/* Divi schaltet Desktop-/Mobile-Header standardmäßig bei 980px um (eigenes, seitenspezifisch
   generiertes CSS auf ".et_pb_section_0/1_tb_header"). Bei 18px-Menüschrift reichte der
   Desktop-Header knapp bis ca. 1050px nicht mehr aus (Menü überlagerte den Kontakt-Button) —
   hier der Umschaltpunkt auf 1100px angehoben, damit in diesem Bereich stattdessen das
   Mobile-Menü (mit Hamburger-Icon) greift, statt die zu enge Desktop-Variante zu erzwingen. */
@media screen and (max-width: 1100px) and (min-width: 981px) {
	/* Klassen-Kombination (ohne Leerzeichen) statt einzelner Klasse: Divis eigene Regel
	   ".et_pb_section_1_tb_header{display:none!important}" gilt selbst schon ab 981px mit
	   "!important" — bei gleicher Spezifität hätte unsere einfache ".navigation-mobile"-Regel
	   das nur gewinnen können, falls sie im Dokument nach Divis Regel lädt (nicht garantiert).
	   Die Kombination aus beiden tatsächlichen Klassen des Elements ist spezifischer und
	   gewinnt unabhängig von der Ladereihenfolge. */
	.et_pb_section_0_tb_header.navigation {
		display: none !important;
	}

	.et_pb_section_1_tb_header.navigation-mobile {
		display: flex !important;
	}

	/* Divis Menü-MODUL hat einen eigenen, von der Sektion unabhängigen Breakpoint bei
	   "min-width:981px" für seine volle Desktop-Linkliste (".et_pb_menu__menu") — der bleibt
	   von der Sektions-Umschaltung oben unberührt. In diesem erzwungenen Bereich (981–1100px)
	   war dadurch GLEICHZEITIG sowohl das Hamburger-Icon als auch die volle, zu breite Linkliste
	   sichtbar (zweizeiliger Umbruch, überlagert das Logo-Icon). Liste hier zusätzlich
	   ausblenden, damit wie unterhalb von 980px nur noch Hamburger + Icon übrig bleiben. */
	.header_nav_mobile .et_pb_menu__menu {
		display: none !important;
	}

	/* Spiegelbildlich zum Ausblenden oben: Divis Hamburger-Icon-Wrapper (".et_mobile_nav_menu",
	   umschließt ".mobile_nav") ist selbst Teil derselben "min-width:981px"-Logik und dadurch
	   in diesem erzwungenen Bereich standardmäßig "display:none" — das VERHINDERT jede Anzeige
	   des Icons, unabhängig von unseren eigenen ".mobile_nav"-Regeln (ein "display:none"-Vorfahre
	   entfernt das gesamte Element inkl. seiner Kind-Elemente aus dem Rendering, auch bei
	   "position:fixed" auf dem Kind selbst). Hier wieder sichtbar erzwungen. */
	.header_nav_mobile .et_mobile_nav_menu {
		display: flex !important;
	}
}

/* Bei geöffnetem Mobile-Menü darf die Zeile kein "transform" bekommen — sonst entsteht ein
   neuer Containing Block für das fixierte Vollbild-Panel (".et_mobile_menu" hängt tief
   verschachtelt darin), was das Panel beim Scrollen verzerrt/falsch positioniert. */
.navigation-mobile:has(.mobile_nav.opened).nav-hidden {
	transform: none !important;
}


/* Der fixierte Header wird aus dem normalen Seitenfluss genommen und würde sonst den oberen
   Seiteninhalt überdecken — Ausgleich per Padding auf dem Content-Wrapper, entspricht der
   Header-Höhe (66px Mindesthöhe der Zeile + 1px Rand). Nicht auf der Startseite, da die
   Navigation dort transparent über den (künftigen) Hero-Bereich schweben soll. */
#et-main-area {
	padding-top: 67px;
}

.home #et-main-area {
	padding-top: 0;
}

/* WPs Admin-Bar ist ebenfalls "position: fixed; top: 0;" mit sehr hohem z-index — für
   eingeloggte Nutzer die Navigation um die Admin-Bar-Höhe nach unten verschieben, damit
   sie sich nicht überlappen. Werte entsprechen WPs eigenen Admin-Bar-Höhen/Breakpoints. */
body.admin-bar .navigation,
body.admin-bar .navigation-mobile {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .navigation,
	body.admin-bar .navigation-mobile {
		top: 46px;
	}
}

.header_nav {
	min-height: 66px;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Menü-Spalte darf durch das erzwungene "flex-wrap:nowrap" (siehe unten) nicht breiter werden
   als ihr eigentlicher Platz — sonst schrumpft sie nicht unter ihre Inhaltsbreite (Flexbox-
   Standard "min-width:auto") und drückt die Kontakt-Button-Spalte aus dem Sichtbereich. */
.header_nav > .et_pb_column:nth-child(2) {
	min-width: 0;
}

.header_nav .et_pb_menu_inner_container,
.header_nav .et_pb_menu__wrap,
.header_nav .et_pb_menu__menu,
.header_nav .et_pb_menu__menu > nav {
	min-width: 0;
}

/* Button-Spalte soll dagegen nie schrumpfen, damit der Kontakt-Button immer sichtbar bleibt.
   "width:auto!important": Divi setzt auf dieser Spalte selbst eine feste Breite in Prozent
   (Teil seines generierten Basis-CSS für die 3 Header-Spalten, z.B. "width:10%") — bei
   schmaleren Viewports war das schmaler als der Button-Inhalt selbst (Text "KONTAKT" +
   Padding), wodurch der Button nach links über seine eigene Spalte hinaus lief und die
   Navigation überlagerte. "flex-shrink:0" allein reicht dagegen nicht, das verhindert nur
   ein Schrumpfen unter die BERECHNETE Breite, nicht unter eine explizit gesetzte Prozent-
   Breite. */
.header_nav > .et_pb_column:last-child {
	/* "width:auto" allein reichte nicht — Divi steuert die Spaltengröße im Flex-Layout
	   vermutlich über "flex-basis" (Teil des "flex"-Kurzform-Shorthands), nicht per "width".
	   Beides zusammen mit "!important" erzwingen, damit die Spalte sich zuverlässig am
	   tatsächlichen Button-Inhalt orientiert statt an einer festen Prozent-Größe. */
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	width: auto !important;
	min-width: max-content !important;
}

/* Im engen Bereich kurz vor dem 980px-Umschaltpunkt (z.B. iPad-Querformat) Abstände zwischen
   den Menüpunkten verkleinern, damit die einzeilige Liste tatsächlich hineinpasst, statt nur
   zu überlaufen. Bereich und Kompression vergrößert, seit die Menüpunkte auf 18px (vorher 16px)
   font-size stehen — dadurch ist die Liste insgesamt breiter und braucht in einem größeren
   Viewport-Bereich zusätzlichen Platz, sonst überlagert sie bei bestimmten Breiten den
   Kontakt-Button. */
@media screen and (max-width: 1300px) and (min-width: 981px) {
	.header_nav .et_pb_menu .et-menu {
		margin-left: -8px;
		margin-right: -8px;
	}

	.header_nav .et_pb_menu .et-menu > li {
		padding-left: 2px;
		padding-right: 2px;
	}
}

/* Divi setzt hier von sich aus "flex-wrap:wrap" — bei knappem Platz kurz vor dem 980px-
   Breakpoint (an dem komplett auf das Mobile-Menü umgeschaltet wird) sprang das Menü dadurch
   kurzzeitig zweizeilig (z.B. iPad-Querformat 1024–1080px). Erzwungen einzeilig, damit der
   Übergang glatt bleibt. */
.header_nav .et_pb_menu__menu > nav > ul {
	flex-wrap: nowrap !important;
}

/* Hauptmenüpunkte (Immobilien / Leistungen / Unternehmen / Aktuelles) */
.header_nav .et_pb_menu__menu > nav > ul > li > a {
	position: relative;
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: 18px;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Underline-Hover-Animation: startet mit Breite 0 ("right:100%" bei "left:0" ergibt 0 Breite)
   und läuft beim Hover auf volle Breite ("right:0") auf. Divi nutzt für Menüpunkte mit
   Dropdown selbst ein "::after" für seinen eigenen Pfeil-Indikator — mit einer Regel
   (".et-menu .menu-item-has-children>a:first-child:after"), die durch die Kombination aus
   zwei Klassen + ":first-child" höhere Spezifität hat als unsere und dabei "content", "right"
   und "top" fest vorgibt. Hier deshalb alles außer "background"/"height"/"transition" mit
   !important zurückerobert. */
.header_nav .et_pb_menu__menu > nav > ul > li > a::after {
	content: "" !important;
	position: absolute;
	top: auto !important;
	transform: none !important;
	left: 0;
	right: 100% !important;
	bottom: 0;
	height: 1px;
	background: var(--color-primary);
	transition: right 160ms ease;
}

/* Trigger über ":hover" auf dem <li> statt nur auf dem <a> — deckt damit auch den Pfeil ab,
   der als eigenes Pseudo-Element Teil des <a> ist, aber bei reinem "a:hover" nicht zuverlässig
   als "innerhalb" gezählt wird. */
.header_nav .et_pb_menu__menu > nav > ul > li:hover > a::after {
	right: 0 !important;
}

/* Pfeil-Icon neben Menüpunkten mit Dropdown — Divis eigener Icon-Font-Pfeil wurde oben
   entfernt (kollidierte mit der Underline-Animation auf demselben "::after"), daher hier
   per Maske als eigenes "::before" nachgebaut (Chevron-Pfad aus dem Entwurf), dreht sich
   beim Öffnen um 180°. */
.header_nav .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a {
	/* Divi setzt hier selbst "display:flex" (Block-Level, volle Breite des <li>) — erzwingt
	   "inline-flex" + "fit-content", damit der Link (und damit die Underline) sich exakt an
	   Text + Pfeil orientiert statt über die volle Breite zu laufen. */
	display: inline-flex !important;
	width: fit-content !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
	align-items: center;
	gap: 6px;
	/* Divi reserviert hier zusätzlich "padding-right: 20px" als Platz für seinen eigenen —
	   jetzt entfernten — Pfeil. Macht die Box breiter als der sichtbare Pfeil reicht. */
	padding-right: 0 !important;
}

.header_nav .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a::before {
	content: "" !important;
	display: inline-block;
	order: 1;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: transform 160ms ease;
}

.header_nav .et_pb_menu__menu > nav > ul > li.menu-item-has-children:hover > a::before {
	transform: rotate(180deg);
}

/* Dropdown öffnet mit 16px Abstand zum Menüpunkt statt bündig darunter — der Menüpunkt
   selbst braucht dafür "position:relative", damit sich ein unsichtbarer Steg (::before)
   über die Lücke legen kann. Ohne den Steg würde die Maus beim geraden Runterfahren durch
   die Lücke den Hover-Zustand verlieren und das Dropdown sofort wieder schließen. */
.header_nav .et_pb_menu__menu > nav > ul > li {
	position: relative;
}

.header_nav .et_pb_menu__menu > nav > ul > li::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 20px;
}

.header_nav .et_pb_menu__menu > nav > ul > li > ul {
	top: calc(100% + 20px) !important;
}

/* Dropdown-Container. Divis Legacy-Klasse ".nav li ul" (aus dem alten #top-menu-CSS) setzt
   "border-top: 3px solid #2ea3f2" — unser Dropdown trägt zufällig auch die Klasse "nav"
   (Teil von "et-menu nav downwards"), daher trifft das ungewollt und muss zurückgesetzt werden. */
.header_nav .et_pb_menu__menu > nav > ul li ul {
	background-color: #fff;
	box-shadow: var(--shadow-soft);
	border: none !important;
	padding: 10px 0;
	overflow: hidden;
	/* Der Entwurf nutzt eine feste Breite (300px), aber unsere echten deutschen Menütexte
	   (z. B. "Projektentwicklung & Revitalisierung") sind länger als das Platzhalter-Beispiel
	   und würden dabei umbrechen — daher "width:auto" mit "min-width:300px" als Untergrenze,
	   der Container wächst bei Bedarf mit dem längsten Eintrag mit. */
	min-width: 300px;
	width: auto !important;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

/* Divis Legacy-Regel ".nav li li{padding:0 20px}" (unser Dropdown trägt zufällig die Klasse
   "nav") fügt den verschachtelten <li> zusätzliches Padding hinzu, obendrauf zum Padding am
   Link selbst — dadurch bleibt links/rechts ein unbedeckter Rand beim Hover. */
.header_nav .et_pb_menu__menu > nav > ul li ul > li {
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

/* Dropdown-Einträge. Divi setzt ".nav li li{line-height:2em}" (32px bei 16px Schriftgröße) —
   das treibt jede Zeile deutlich höher als im Entwurf (dort "line-height:normal"). */
.header_nav .et_pb_menu__menu > nav > ul li ul li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	white-space: nowrap;
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: 18px;
	line-height: normal !important;
	color: var(--color-text);
	padding: 10px 20px;
	text-decoration: none;
	transition: background 160ms ease;
}

/* Divi setzt bei Hover zusätzlich "opacity:.7" (".nav ul li a:hover") — das lässt den Text
   heller/verwaschener wirken und sieht wie eine Farbänderung aus, obwohl "color" selbst
   unangetastet bleibt. Im Entwurf bleibt die Schriftfarbe/-deckkraft unverändert, nur der
   Hintergrund wechselt. */
.header_nav .et_pb_menu__menu > nav > ul li ul li a:hover {
	background: #eef2fa;
	color: var(--color-text) !important;
	opacity: 1 !important;
}

/* Nicht-klickbare Kategorie-Überschriften innerhalb eines Dropdowns (z. B. "Leistungen" →
   "Für Eigentümer & Verkäufer" / "Bauträger & Investment") — als Menüpunkt mit der CSS-Klasse
   "menu-item-headline" angelegt (Custom Link, Ziel "#"), damit sie sich ohne Sonderlogik in
   die normale Menüstruktur einfügen. */
.header_nav .et_pb_menu__menu > nav > ul li ul li.menu-item-headline > a {
	display: block;
	white-space: nowrap;
	padding: 12px 20px 6px;
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 18px;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-primary);
	pointer-events: none;
	cursor: default;
}

/* ==========================================================================
   Mobile-/Tablet-Navigation (Klasse "header_nav_mobile", eigene Sektion
   "navigation-mobile" — Divi blendet die beiden Sektionen abhängig von der
   Bildschirmbreite gegenseitig aus, sodass immer nur eine sichtbar ist).
   ========================================================================== */

.header_nav_mobile {
	min-height: 66px;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
}

/* Button- und Icon-Spalte dürfen nicht schrumpfen (sonst quetscht "space-between" sie
   bei wenig Platz zusammen) — nur die Menü-Spalte (erste Spalte) darf sich anpassen.
   Divi setzt auf der Menü-Spalte "z-index:5" (Klasse "et_pb_column--with-menu"), auf dieser
   Spalte hier nur die Basis "z-index:2" — dadurch würde die Menü-Spalte (inkl. dem darin
   liegenden Vollbild-Panel) trotz "position:fixed" auf dem Icon immer gewinnen, da Stacking
   Contexts anhand der DOM-Verschachtelung verglichen werden, nicht anhand der sichtbaren
   Fixed-Position-Größe. Hier daher explizit höher gesetzt. */
.header_nav_mobile > .et_pb_column:not(:first-child) {
	flex-shrink: 0;
	width: auto !important;
	z-index: 1000 !important;
}

/* Icon im Entwurf sitzt "position:fixed; top:0; right:32px" bündig an der Bildschirmkante,
   nicht im normalen Zeilen-Fluss — bricht daher hier aus dem Zeilen-Padding aus. */
/* Divi generiert pro Bild-Modul eigenes Inline-CSS (u.a. "max-height:22px" vom ursprünglichen
   Design-Tab-Wert) — das deckelt die Höhe unabhängig vom "height"-Wert und muss daher auf
   allen drei Ebenen (Container, Wrap, img) mit überschrieben werden. */
.header_nav_mobile .et_pb_image {
	position: fixed;
	top: 0;
	right: 32px;
	/* Divis kritisches Inline-CSS setzt "z-index:9999" auf ".et_mobile_menu" — ohne
	   "!important" würde das Panel beim Öffnen über Icon/Hamburger rutschen. */
	z-index: 60 !important;
	width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: none !important;
}

.header_nav_mobile .et_pb_image > a,
.header_nav_mobile .et_pb_image_wrap {
	display: block !important;
	width: 46px !important;
	height: 46px !important;
	max-width: none !important;
	max-height: none !important;
}

/* Divis eigene Regel "img[src*='.svg']{width:auto}" hat durch den Attribut-Selektor höhere
   Spezifität als unsere Klassen-Regel und würde die Größe sonst wieder auf "auto" zurücksetzen. */
.header_nav_mobile .et_pb_image_wrap img {
	display: block !important;
	width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: none !important;
}

/* Entwurf: ".mobile_nav" ist bündig oben links fixiert (40x30px, 8px Padding), bricht wie
   das Icon rechts aus dem Zeilen-Fluss aus. Divis Hamburger-Icon nutzt eigentlich einen
   Icon-Font-Buchstaben (":before", 32px) — hier durch zwei eigene Balken ersetzt
   (":before"/"::after" auf ".mobile_menu_bar"), passend zum Entwurf (24px breit, 2px hoch,
   10px Abstand), inkl. Dreh-Animation beim Öffnen. */
.header_nav_mobile .mobile_nav {
	position: fixed;
	top: 16px;
	left: 16px;
	/* Divis kritisches Inline-CSS setzt "z-index:9999" auf ".et_mobile_menu" — ohne
	   "!important" würde das Panel beim Öffnen über Icon/Hamburger rutschen. */
	z-index: 60 !important;
	width: 40px;
	height: 30px;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	cursor: pointer;
	transition: transform 280ms ease, opacity 280ms ease;
}

/* ".et_mobile_menu" hängt im DOM als Kind-Element direkt in ".mobile_nav" (nicht daneben) —
   ohne eigenen "z-index" würde der Balken hier trotz "position:fixed" auf ".mobile_nav" immer
   unter dem Panel liegen, da beide innerhalb von ".mobile_nav" verglichen werden. */
.header_nav_mobile .mobile_menu_bar {
	position: relative;
	z-index: 1000 !important;
	display: block;
	width: 24px;
	height: 14px;
}

.header_nav_mobile .mobile_menu_bar:before,
.header_nav_mobile .mobile_menu_bar:after {
	content: "" !important;
	font-family: initial !important;
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	transition: transform 200ms ease, top 200ms ease, opacity 200ms ease;
}

.header_nav_mobile .mobile_menu_bar:before {
	top: 0;
}

.header_nav_mobile .mobile_menu_bar:after {
	top: 12px;
}

.header_nav_mobile .mobile_nav.opened .mobile_menu_bar:before {
	top: 6px;
	transform: rotate(45deg);
}

.header_nav_mobile .mobile_nav.opened .mobile_menu_bar:after {
	top: 6px;
	transform: rotate(-45deg);
}

/* Vollbild-"Karten"-Panel wie im Entwurf: Divis autogeneriertes ".et_mobile_menu" (normalerweise
   ein simples Dropdown direkt unter der Menüzeile) wird zum blurred Vollbild-Overlay, jeder
   Top-Level-Punkt wird zur eigenen Karte. Divis Legacy-CSS setzt außerdem "border-top: 3px solid
   #2ea3f2" — wie beim Desktop-Dropdown zurückgesetzt.
   Wichtig: alle ".et_mobile_menu"-Regeln in diesem Abschnitt sind bewusst mit ".header_nav_mobile"
   vorangestellt (nicht die bloße Divi-Klasse allein) — sonst würde diese Hauptseiten-spezifische
   Kartenoptik site-weit auf jede ".et_pb_menu"-Instanz durchschlagen, z. B. auf das schlanke,
   unkonfigurierte Menü-Modul der Projekt-Subsites (siehe header.php im Theme-Root), wo stattdessen
   Divis eigenes Standard-Dropdown (kleines Panel, "display:none/block" per jQuery
   "slideDown"/"slideUp") greifen soll. */
.header_nav_mobile .et_mobile_menu {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0;
	bottom: 0;
	width: 100%;
	/* Divis kritisches Inline-CSS setzt hier "z-index:9999" — bei einer Bindestrich-Tie-Break
	   im Kaskaden-Ranking könnte das sonst über Icon/Hamburger (z-index:60) rutschen. */
	z-index: 55 !important;
	background-color: rgba(255, 255, 255, 0.82);
	background-image: url("/wp-content/uploads/2026/08/Sallier_Dach_hell.svg");
	background-repeat: no-repeat;
	background-position: right -220px bottom;
	background-size: 800px auto;
	-webkit-backdrop-filter: blur(28px) saturate(150%);
	backdrop-filter: blur(28px) saturate(150%);
	border: none !important;
	box-shadow: none !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 84px 20px 24px !important;
	overflow-y: auto;
	scrollbar-gutter: stable;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	/* Divi steuert das Auf-/Zuklappen normalerweise über "display:none/block" — das haben
	   wir oben mit "display:flex!important" überschrieben (für das Karten-Layout), daher hier
	   stattdessen über Sichtbarkeit an den ".opened"-Status des Hamburgers gekoppelt. */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms ease, visibility 0s linear 280ms;
}

/* ":has()" statt Geschwister-Selektor, da ".et_mobile_menu" im DOM nicht zwingend direkt
   nach ".mobile_nav" liegt — beide sind aber sicher innerhalb von ".header_nav_mobile". */
.header_nav_mobile:has(.mobile_nav.opened) .et_mobile_menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 280ms ease, visibility 0s linear 0s;
}

.header_nav_mobile .et_mobile_menu > li {
	background: #fff;
	box-shadow: var(--shadow-soft);
	list-style: none;
}

/* Schrift-Styles wie im Desktop-Menü übernommen (siehe ".header_nav .et_pb_menu__menu >
   nav > ul > li > a" weiter oben): Versalien, Letter-Spacing, Marken-Blau. */
/* "text-decoration:none!important": die globale Body-Link-Regel (siehe style.css) unterstreicht
   Links standardmäßig — Menüpunkte sollen nie unterstrichen sein. Der Selektor deckt per
   Nachfahren-Kombinator ("li a") auch die Untermenü-/Kategorie-/Kontakt-Button-Links weiter
   unten mit ab, da alle irgendwo innerhalb eines "<li>" liegen. */
.header_nav_mobile .et_mobile_menu li a {
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: 18px;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	color: var(--color-primary);
	border-bottom: none;
	text-decoration: none !important;
}

.header_nav_mobile .et_mobile_menu > li > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px !important;
	background: transparent;
	box-shadow: none;
}

.header_nav_mobile .et_mobile_menu > li:not(.menu-item-cta) > a:hover {
	background: #eef2fa;
	opacity: 1 !important;
}

.header_nav_mobile .et_mobile_menu .menu-item-has-children > a {
	font-weight: 300;
	color: var(--color-primary);
	background-color: transparent;
	-webkit-tap-highlight-color: transparent;
}

/* Pfeil-Icon wie im Desktop-Dropdown (siehe Kommentar weiter oben), dreht sich beim
   Aufklappen der Karte — Klick-Verhalten in js/mobile-menu-accordion.js. */
.header_nav_mobile .et_mobile_menu > li.menu-item-has-children > a::after {
	content: "" !important;
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 160ms ease;
}

.header_nav_mobile .et_mobile_menu > li.menu-item-has-children.submenu-open > a::after {
	transform: rotate(180deg);
}

/* Akkordion: Divi zwingt Untermenüs sonst per "display:block!important" immer sichtbar —
   hier über "max-height" kollabiert statt über "display", damit Divis Regel nicht
   überschrieben werden muss. */
.header_nav_mobile .et_mobile_menu li ul.sub-menu {
	max-height: 0;
	overflow: hidden;
	padding: 0 !important;
	transition: max-height 320ms cubic-bezier(.16, 1, .3, 1);
}

.header_nav_mobile .et_mobile_menu > li.submenu-open > ul.sub-menu {
	max-height: 600px;
	padding: 0 0 8px !important;
}

/* Divis Legacy-Regel ".et_mobile_menu li li{padding-left:5%}" rückt Untermenüpunkte sonst
   zusätzlich ein — hier zurückgesetzt, damit sie exakt mit den Karten fluchten. */
.header_nav_mobile .et_mobile_menu li ul.sub-menu li {
	padding-left: 0 !important;
}

/* Untermenü-Links wie im Desktop-Dropdown (siehe ".header_nav .et_pb_menu__menu > nav > ul
   li ul li a" weiter oben) — normale Schreibweise statt der Versalien der Karten-Labels. */
.header_nav_mobile .et_mobile_menu li ul.sub-menu li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: var(--weight-light);
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-text);
	padding: 10px 20px !important;
}

.header_nav_mobile .et_mobile_menu li ul.sub-menu li a:hover {
	background: #eef2fa;
	color: var(--color-text) !important;
	opacity: 1 !important;
}

/* Nicht-klickbare Kategorie-Überschriften — Schrift 1:1 wie im Desktop-Pendant weiter oben
   (".menu-item-headline > a"). */
.header_nav_mobile .et_mobile_menu li.menu-item-headline > a {
	display: block;
	white-space: nowrap;
	font-weight: var(--weight-semibold) !important;
	font-size: 18px !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--color-primary) !important;
	pointer-events: none;
	cursor: default;
	padding: 12px 20px 6px !important;
}

/* "Kontakt" ist als eigener Menüpunkt (Klasse "menu-item-cta") im Hauptmenü angelegt, damit
   er automatisch im Mobile-Panel erscheint — am Desktop gibt's dafür schon einen eigenen
   Button, deshalb dort ausgeblendet. Steht wie im Entwurf ohne Karten-Hintergrund am Ende. */
.header_nav .et_pb_menu__menu > nav > ul > li.menu-item-cta {
	display: none !important;
}

.header_nav_mobile .et_mobile_menu > li.menu-item-cta {
	background: transparent;
	box-shadow: none;
	margin-top: 12px;
}

.header_nav_mobile .et_mobile_menu li.menu-item-cta > a {
	display: inline-flex !important;
	width: auto;
	padding: 13px 28px !important;
	background-color: var(--color-accent);
	color: var(--color-surface) !important;
	font-weight: var(--weight-semibold) !important;
	text-transform: uppercase;
	border-radius: 0;
}