/* =====================================================
   MOBILE MENU REDESIGN – konsolidiert
   Gilt für das Off-Canvas-Menü bis 960px Breite.
   Ersetzt alle bisherigen "MOBILE MENU REDESIGN"-Blöcke.
   Hinweis: !important ist nötig, um Theme-CSS und das
   dynamisch generierte Options-CSS (dynamic-css) zu
   überschreiben – nicht entfernen.
   ===================================================== */
@media (max-width: 960px) {

	/* ---------- Menü-Container ---------- */
	div#navbar {
		background: #FFFFFF !important;
		/* iPhone Safe Area: Inhalt bleibt über der Browserleiste scrollbar */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.op-navbar .navbar-nav:first-child {
		margin: 0 1.5em;
		padding-top: 40px; /* Abstand unter der Kopfleiste */
	}

	/* ---------- Menüpunkte (Hauptebene) ---------- */
	.op-navbar .navbar-nav > li {
		margin: 14px 0;
		text-align: left;
	}

	.op-navbar .navbar-nav > li > a {
		position: relative;
		font-family: Poppins, Arial, Helvetica, sans-serif;
		font-size: 20px !important;
		font-weight: 500 !important;
		line-height: 25px !important;
		letter-spacing: 0;
		color: #21201F !important;
		border: none !important;
		background: none;
		/* 34px links = Textflucht; Chevron sitzt im Freiraum davor */
		padding: 10px 15px 10px 34px;
	}

	/* ---------- Chevron (nur Punkte mit Untermenü) ---------- */
	.op-navbar .navbar-nav > li.menu-item-has-children > a::before {
		content: "";
		position: absolute;
		left: 10px;
		top: 50%;
		width: 10px;
		height: 10px;
		border-right: 3px solid #FF862C;
		border-bottom: 3px solid #FF862C;
		border-radius: 1px;
		transform: translateY(-50%) rotate(-45deg);
		transition: transform 0.2s ease;
	}

	/* ---------- Untermenüpunkte ---------- */
	.op-navbar .navbar-nav .sub-menu a {
		font-family: Poppins, Arial, Helvetica, sans-serif;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 22px !important;
		color: #21201F !important;
		padding-left: 52px !important; /* eingerückt unter der Überschrift */
	}

	/* ---------- Akkordeon ---------- */
	.op-navbar .navbar-nav > li.menu-item-has-children > .sub-menu {
		display: block !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;
	}

	.op-navbar .navbar-nav > li.menu-item-has-children.submenu-open > .sub-menu {
		max-height: 600px; /* Obergrenze – erhöhen, falls ein Untermenü länger wird */
		transition: max-height 0.45s ease;
	}

	.op-navbar .navbar-nav > li.menu-item-has-children.submenu-open > a::before {
		transform: translateY(-40%) rotate(45deg); /* Chevron zeigt nach unten */
	}

	/* ---------- CTA-Button (Termin vereinbaren) ----------
	   Klassenbasiert statt ID, damit das Styling auch im
	   separaten Mobile-Menü greift (Klasse "nav-cta" am
	   Menüpunkt in WP pflegen). */
	.op-navbar .navbar-nav > li.nav-cta {
		margin: 32px 15px 0;
		border-radius: 8px;
		background: #FF862C;
	}

	.op-navbar .navbar-nav > li.nav-cta > a {
		padding: 14px 20px !important;
		font-family: Poppins, Arial, Helvetica, sans-serif;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		letter-spacing: 0;
		color: #FFFFFF !important;
		text-align: center;
	}

	/* ---------- Kopfleiste (Karte mit Logo + X) ---------- */
	.op-navbar .nav-close-wrap {
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 87px;
		margin: 0 10px !important;      /* 10px Einzug links/rechts lt. XD */
		padding: 0 25px;
		background: #EDEDED !important; /* überschreibt dynamic-css (#000) */
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.35) !important;
		border-radius: 0 0 24px 24px;
	}

	/* Logo-Mark links (25px in der Karte + 10px Einzug = 35px vom Rand) */
	.op-navbar .nav-close-wrap::before {
		content: "";
		position: absolute;
		left: 25px;
		top: 50%;
		transform: translateY(-50%);
		width: 37px;
		height: 37px;
		background: transparent url('/wp-content/uploads/2026/08/cleverlehramt-logo-mark-orange.svg') center center no-repeat;
		background-size: contain;
	}

	/* X: Glyphicon-Zeichen entfernen, SVG als Hintergrund */
	.op-navbar .nav-close-wrap .closenav::before {
		content: "" !important;
	}

	.op-navbar .nav-close-wrap .closenav {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url('/wp-content/uploads/2026/08/x-light-full-black.svg') center center no-repeat;
		background-size: contain;
	}


	/* ---------- iOS: Scrollen der Seite hinter dem Menü verhindern ---------- */
	/* Scroll-Gesten bleiben im Menü, kein Weiterreichen an die Seite */
	div#navbar {
		overscroll-behavior-y: contain;
	}

	/* contain greift nur bei scrollbarem Container: Inhalt daher minimal
	   höher als der Sichtbereich machen (100% - Kopfleiste 87px + 1px) */
	div#navbar > div:not(.nav-close-wrap) {
		min-height: calc(100% - 86px);
		padding-bottom: 48px;
	}

}