/* ═══════════════════════════════════════════════════════
   SAR Mobiles Drill-Down-Menü (Off-Canvas "Seiten")
   ═══════════════════════════════════════════════════════

   Die Panels sind die vorhandenen ul.sub-menu (mobile-drill.js vergibt
   die Klassen). Positionierung: absolut über die gesamte Off-Canvas-
   Fläche. Damit .header-menu-sidebar-bg (position: relative, volle
   Sidebar-Höhe) der Bezug der 1. Ebene ist, werden die positionierten
   Zwischen-Vorfahren (.builder-item, .nav-ul li) im Sidebar-Kontext auf
   static gesetzt; tiefere Ebenen positionieren sich im Eltern-Panel,
   dessen Box identisch ist.

   !important dreifach nötig: gegen Neves display:none für .sub-menu,
   gegen dessen left/right-!important-Regeln im Sidebar-CSS und gegen
   die Inline-Styles aus Neves Submenu-Randkorrektur (frontend.js setzt
   bei Bedarf left/right/transform direkt am Element). */

.header-menu-sidebar .builder-item,
.header-menu-sidebar .nav-ul li {
	position: static;
}

.header-menu-sidebar ul.sub-menu.sar-drill-panel {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	margin: 0;
	padding: 0 0 32px;
	background: var(--bgcolor, #fff);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%) !important;
	visibility: hidden;
	will-change: transform;
	/* !important auch hier: Customizer-/Pro-CSS mit Submenu-Animationen
	   darf den Slide nicht überschreiben (transition ist EINE Property,
	   eine fremde Deklaration ersetzt sie sonst komplett). */
	transition: transform 0.3s ease, visibility 0s linear 0.3s !important;
}

.header-menu-sidebar ul.sub-menu.sar-drill-panel.is-open {
	transform: none !important;
	visibility: visible;
	transition: transform 0.3s ease !important;
}

/* Selektor bewusst auf gleicher Spezifität wie .is-open + später in der
   Datei, damit der animationslose Reset beim Menü-Schließen gewinnt. */
.header-menu-sidebar.sar-drill-notrans ul.sub-menu.sar-drill-panel {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.header-menu-sidebar ul.sub-menu.sar-drill-panel {
		transition: none !important;
	}
}

/* ─── Kopf jedes Panels: zurück links, X rechts, darunter der Titel ─── */

.sar-drill-panel__chrome {
	list-style: none;
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--bgcolor, #fff);
}

.sar-drill-panel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #e6e6e6;
}

.sar-drill-panel__back,
.sar-drill-panel__close {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: var(--nv-primary-accent, #d73740);
	font: inherit;
	font-weight: 600;
	line-height: 1;
}

/* Programmatischer Fokus nach Panel-Wechsel soll auf Touch keinen
   Fokus-Rahmen zeichnen; Tastatur (:focus-visible) behält ihn. */
.sar-drill-panel__back:focus:not(:focus-visible),
.header-menu-sidebar .sar-drill-trigger a:focus:not(:focus-visible) {
	outline: none;
}

.sar-drill-panel__back svg,
.sar-drill-caret svg {
	width: 13px;
	height: 13px;
}

.sar-drill-panel__title {
	padding: 16px 16px 10px;
	font-weight: 700;
	border-bottom: 1px solid #e6e6e6;
}

/* ─── Zeilen mit Unterseite: ganze Zeile klickbar, Pfeil rechts ─── */

.header-menu-sidebar .sar-drill-trigger {
	cursor: pointer;
	display: flex;
	align-items: center;
}

.sar-drill-caret {
	display: inline-flex;
	margin-left: auto;
	padding: 0 8px;
	color: var(--nv-primary-accent, #d73740);
	pointer-events: none;
}

/* ─── Zeilen: zarte Trennlinien + kompaktere Abstände ───
   Trennlinien nur auf den Drill-Seiten (die Wurzel-Liste hat ihre
   Linien schon aus dem Theme); Abstand gilt fürs ganze Mobilmenü. */

.header-menu-sidebar .sar-drill-panel > li:not(.sar-drill-panel__chrome) > .wrap {
	border-bottom: 1px solid #ececec;
	/* Zeilen bündig mit dem Ebenen-Titel einrücken (Panel-ul hat padding 0) */
	padding-left: 16px;
	padding-right: 10px;
}

/* !important, weil Neves Customizer-CSS (Menüpunkt-Abstand je
   Menü-Komponente) mit .nav-ul:not(.menu-mobile):not(.neve-mega-menu)
   höher spezifisch ist ( :not()-Klassen zählen mit ) und sonst z. B.
   dem Sekundär-Menü sein Desktop-Padding aufzwingt. */
.header-menu-sidebar .nav-ul li > .wrap > a {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	min-height: 0;
}

/* Wurzel-Seite (mobiles Hauptmenü) im selben Look wie die Drill-Seiten:
   gleiche zarte Trennlinie auf dem .wrap, kein Extra-Abstand zwischen
   den Punkten; eventuelle Theme-Linien an li/a raus, damit nichts
   doppelt zeichnet. */
.header-menu-sidebar ul.nav-ul > li.menu-item {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.header-menu-sidebar ul.nav-ul > li.menu-item > .wrap {
	border-bottom: 1px solid #ececec;
}

.header-menu-sidebar ul.nav-ul > li.menu-item > .wrap > a {
	border-bottom: 0;
}

/* Kein Strich unter dem letzten Punkt eines Menüs (sonst dünne Linie
   zwischen Hauptmenü-Ende und der Fläche des Sekundär-Menüs). */
.header-menu-sidebar ul.nav-ul > li.menu-item:last-child > .wrap {
	border-bottom: 0;
}

/* ─── Sekundäres Menü im Off-Canvas: Flächen über volle Breite ───
   Neve rendert es als .nv-top-bar > .menu-content.nav-menu-secondary >
   ul.nav-ul. Das Seiten-Padding der Builder-Zelle wird aufgehoben,
   damit die Hintergrundflächen bis an beide Ränder laufen; der
   Innenabstand wandert in die Zeilen. Farbe = Neve-Systemfarbe
   "Heller Hintergrund" (--nv-light-bg). */

.header-menu-sidebar .builder-item:has(.nav-menu-secondary) {
	padding-left: 0;
	padding-right: 0;
}

.header-menu-sidebar .nav-menu-secondary ul.nav-ul > li.menu-item {
	background: var(--nv-light-bg, #f2f5f8);
}

.header-menu-sidebar .nav-menu-secondary ul.nav-ul > li.menu-item > .wrap > a {
	padding-left: 16px;
	padding-right: 16px;
}

/* Auf der farbigen Fläche wäre #ececec unsichtbar: Trennlinien hier
   als abgedunkelter Blauton, der auf jedem hellen Hintergrund
   funktioniert; unter der letzten Zeile keine (Flächen-Kante). */
.header-menu-sidebar .nav-menu-secondary ul.nav-ul > li.menu-item:not(:last-child) > .wrap {
	border-bottom: 1px solid rgba(26, 58, 92, 0.12);
}

/* Mehr Luft zwischen Icon und Text (Neve-Default: 5px) */
.header-menu-sidebar .menu-item .nv-icon {
	margin-right: 10px;
}

/* ─── "alle X-Reisen »" am Ende der Länderlisten ─── */

.header-menu-sidebar .sar-geo-list__all .dd-title {
	font-weight: 700;
}