/* ==========================================================================
   MP MOBILE NAV · mp-mobile-nav.css
   Ablage: wp-content/themes/<CHILD-THEME>/assets/css/mp-mobile-nav.css
   Gehört zum Snippet "MP Mobile Nav (Universal)".
   ---------------------------------------------------------------------
   Einzeiliger mobiler Header (Hamburger | Logo | Suche | Glocke | Avatar)
   + Drawer von links + Suchleiste unter dem Header.

   REGELN
   - Nur Tokens aus mp-tokens.css, keine Hex-Werte.
   - Der Drawer wird per JS an <body> gehängt (Portal, wie beim User-Menü),
     damit transform/overflow von Elementor-Containern ihn nicht abschneiden.
     Deshalb stehen Drawer-Selektoren OHNE .mp-mnav-Vorfahren.
   - Breakpoint 1025px MUSS zum Umschaltpunkt des Elementor-Mega-Menüs
     passen (Elementor Tablet = bis 1024px). Wert hier UND in
     mp-mobile-nav.js (DESKTOP_QUERY) gleich halten.
   ========================================================================== */

:root {
	/* Komponenten-lokal. Bei Bedarf später nach mp-tokens.css verschieben. */
	/* Maximal möglicher z-index, damit der Drawer auch über schwebenden
	   Widgets (KI-Chat etc.) liegt. Backdrop = z-1. Glocke/User-Menü-
	   Bottom-Sheets (2147483000) sind nie gleichzeitig mit dem Drawer offen. */
	--mp-mnav-z: 2147483647;
	--mp-mnav-drawer-width: min(88vw, 22.5rem);
	--mp-mnav-logo-height: 2.25rem;
	--mp-mnav-duration: .24s;
}

/* ---------------------------------------------------------------------
   1. HEADER-ZEILE
   --------------------------------------------------------------------- */
.mp-mnav {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	font-family: var(--mp-font-body);
}
.mp-mnav *,
.mp-mnav *::before,
.mp-mnav *::after { box-sizing: border-box; }

@media (min-width: 1025px) {
	.mp-mnav { display: none; }
}

.mp-mnav__bar {
	display: flex;
	align-items: center;
	gap: var(--mp-space-2);
	min-height: var(--mp-height-header);
	padding: 0 var(--mp-space-3);
	background: var(--mp-surface);
}

.mp-mnav__logo {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	color: var(--mp-ink-900);
	font-size: var(--mp-fs-body-l);
	font-weight: 700;
	text-decoration: none;
}
.mp-mnav__logo:hover,
.mp-mnav__logo:focus { color: var(--mp-ink-900); text-decoration: none; }
.mp-mnav__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--mp-mnav-logo-height);
}

.mp-mnav__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--mp-space-1);
}

/* Fokus für alles, was nicht von ui-button kommt */
.mp-mnav__logo:focus-visible,
.mp-mnav__search-input:focus-visible {
	outline: none;
	box-shadow: var(--mp-shadow-focus);
	border-radius: var(--mp-radius-md);
}

/* ---------------------------------------------------------------------
   2. SUCHLEISTE (klappt unter dem Header auf, überdeckt den Inhalt)
   --------------------------------------------------------------------- */
.mp-mnav__search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: calc(var(--mp-mnav-z) - 2);
	padding: var(--mp-space-3);
	background: var(--mp-surface);
	border-bottom: 1px solid var(--mp-ink-200);
	box-shadow: var(--mp-shadow-popover);
}
.mp-mnav__search[hidden] { display: none; }

.mp-mnav__search-form {
	display: flex;
	gap: var(--mp-space-2);
	margin: 0;
}
.mp-mnav__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--mp-height-input);
	padding: 0 var(--mp-space-4);
	border: 1px solid var(--mp-ink-300);
	border-radius: var(--mp-radius-md);
	background: var(--mp-surface);
	color: var(--mp-ink-900);
	font-family: inherit;
	font-size: var(--mp-fs-body-m);
	line-height: var(--mp-lh-body-m);
}
.mp-mnav__search-input::placeholder { color: var(--mp-ink-500); }
.mp-mnav__search-input:focus { border-color: var(--mp-primary); }

/* ---------------------------------------------------------------------
   3. BACKDROP + DRAWER  (ohne .mp-mnav-Vorfahr, siehe Kopf-Kommentar)
   --------------------------------------------------------------------- */
html.mp-mnav-lock,
html.mp-mnav-lock body { overflow: hidden; }

.mp-mnav__backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: calc(var(--mp-mnav-z) - 1);
	background: var(--mp-overlay-60);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mp-mnav-duration) ease,
	            visibility 0s linear var(--mp-mnav-duration);
}
.mp-mnav__backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--mp-mnav-duration) ease, visibility 0s;
}

.mp-mnav__drawer {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	z-index: var(--mp-mnav-z);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: var(--mp-mnav-drawer-width);
	background: var(--mp-surface);
	box-shadow: none; /* Schatten nur im offenen Zustand, sonst blutet er vom Rand herein */
	font-family: var(--mp-font-body);
	transform: translateX(-100%);
	visibility: hidden;
	overscroll-behavior: contain;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transition: transform var(--mp-mnav-duration) ease,
	            visibility 0s linear var(--mp-mnav-duration);
}
.mp-mnav__drawer *,
.mp-mnav__drawer *::before,
.mp-mnav__drawer *::after { box-sizing: border-box; }
.mp-mnav__drawer.is-open {
	transform: none;
	visibility: visible;
	box-shadow: var(--mp-shadow-lg);
	transition: transform var(--mp-mnav-duration) ease, visibility 0s;
}

.mp-mnav__drawer-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mp-space-2);
	min-height: var(--mp-height-header);
	padding: 0 var(--mp-space-3) 0 var(--mp-space-5);
	border-bottom: 1px solid var(--mp-ink-200);
}

.mp-mnav__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mp-mnav__drawer-foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-2);
	padding: var(--mp-space-4) var(--mp-space-5);
	border-top: 1px solid var(--mp-ink-200);
	background: var(--mp-surface-subtle);
}
.mp-mnav__drawer-foot .ui-button { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------
   4. LISTE, LINKS, AKKORDEON
   Doppelte Klasse = bewusst höhere Spezifität gegen GeneratePress-/
   Elementor-Link- und Button-Resets, ohne !important.
   --------------------------------------------------------------------- */
.mp-mnav__drawer .mp-mnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mp-mnav__drawer .mp-mnav__list--sub { background: var(--mp-surface-subtle); }
.mp-mnav__drawer .mp-mnav__list--sub[hidden] { display: none; }

.mp-mnav__drawer .mp-mnav__item {
	margin: 0;
	border-bottom: 1px solid var(--mp-ink-200);
}
.mp-mnav__drawer .mp-mnav__row {
	display: flex;
	align-items: stretch;
}

.mp-mnav__drawer .mp-mnav__link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mp-space-2);
	min-height: var(--mp-height-listrow);
	margin: 0;
	padding: 0 var(--mp-space-5);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mp-ink-900);
	font-family: inherit;
	font-size: var(--mp-fs-body-l);
	font-weight: 500;
	line-height: var(--mp-lh-body-m);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.mp-mnav__drawer .mp-mnav__link:hover { background: var(--mp-ink-100); color: var(--mp-ink-900); text-decoration: none; }
.mp-mnav__drawer .mp-mnav__link:active { background: var(--mp-ink-200); }
.mp-mnav__drawer .mp-mnav__link:focus-visible,
.mp-mnav__drawer .mp-mnav__sub-toggle:focus-visible,
.mp-mnav__drawer .mp-mnav__close:focus-visible {
	outline: none;
	box-shadow: inset var(--mp-shadow-focus);
}
.mp-mnav__drawer .mp-mnav__link[aria-current="page"] {
	color: var(--mp-primary);
	background: var(--mp-primary-tint);
}

/* Aufklapp-Pfeil als eigener Button neben dem Link */
.mp-mnav__drawer .mp-mnav__sub-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mp-height-listrow);
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--mp-ink-200);
	border-radius: 0;
	background: transparent;
	color: var(--mp-ink-700);
	cursor: pointer;
}
.mp-mnav__drawer .mp-mnav__sub-toggle:hover { background: var(--mp-ink-100); }

.mp-mnav__caret { transition: transform var(--mp-mnav-duration) ease; }
.mp-mnav__drawer [aria-expanded="true"] > .mp-mnav__caret,
.mp-mnav__drawer [aria-expanded="true"] .mp-mnav__caret { transform: rotate(180deg); }

/* Unterpunkte */
.mp-mnav__drawer .mp-mnav__list--sub .mp-mnav__item { border-bottom-color: var(--mp-ink-200); }
.mp-mnav__drawer .mp-mnav__list--sub .mp-mnav__item:last-child { border-bottom: 0; }
.mp-mnav__drawer .mp-mnav__list--sub .mp-mnav__link {
	min-height: var(--mp-height-listrow);
	padding-left: var(--mp-space-8);
	font-size: var(--mp-fs-body-m);
	font-weight: 400;
}

/* ---------------------------------------------------------------------
   5. REDUCED MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mp-mnav__drawer,
	.mp-mnav__backdrop,
	.mp-mnav__caret { transition: none; }
}