/**
 * LEDTEK Mobile-Menü-Effekt (Apple-Style) — Styles
 * Steuerung/State kommt aus mobilemenu.js (Capture-Override von Elementors
 * Toggle). Aktiv nur, wenn das Menü über uns geöffnet wurde:
 *   - body.ledtek-mmenu-open          -> Frosted-Backdrop + Scroll-Lock
 *   - .elementor-nav-menu--dropdown.ledtek-mm-active -> das sichtbare Panel
 *   - --ledtek-mm-top                 -> Top-Offset (Header-Unterkante), aus JS
 */

/* Hinweis: Der deckend-schwarze Header bei offenem Menü (statt des transparenten
   Verlaufs, durch den sonst die geblurrte Seite scheint) wird in mobilemenu.js
   inline gesetzt — Elementors per-Element-!important-Regel schlägt sonst jedes
   Stylesheet, nur Inline-!important gewinnt zuverlässig. */

/* Frosted-Glass-Backdrop über der Seite */
#ledtek-mmenu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 990;
	background: rgba(0, 0, 0, 0.30);
	-webkit-backdrop-filter: blur(16px) saturate(1.05);
	backdrop-filter: blur(16px) saturate(1.05);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.7s cubic-bezier(0.32, 0.08, 0.24, 1), visibility 0.7s;
}
body.ledtek-mmenu-open #ledtek-mmenu-backdrop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;   /* Tap außerhalb schließt (mobilemenu.js) */
}

/* Das aktive Menü-Panel: fixed, volle Breite, direkt unter dem Header.
   Wir positionieren selbst (Elementors eigener Handler ist geblockt). */
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active {
	/* Timing zentral & einfach tunebar */
	--ledtek-mm-roll: 1.2s;                              /* Panel-Aufrollen */
	--ledtek-mm-item: 0.7s;                              /* Menüpunkt-Einblenden */
	--ledtek-mm-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
	display: block !important;
	position: fixed !important;
	top: var(--ledtek-mm-top, 80px) !important;
	/* Eigen-Margin des Nav-Menu-Widgets neutralisieren – der ist pro Breakpoint/
	   Sticky-Zustand unterschiedlich und würde sonst als Lücke unter dem Header
	   sichtbar (top ist bereits die exakte Header-Unterkante). */
	margin: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	max-height: calc(100vh - var(--ledtek-mm-top, 80px)) !important;
	overflow-y: auto !important;
	z-index: 995 !important;
	transform-origin: top center;
	/* Aufrollen per Maske mit WEICHER Kante: eine 160px-Feder-Zone wandert von
	   oben nach unten -> die Kante "rollt" glasig herab (statt harter clip-Kante).
	   --ledtek-mm-reveal ist via @property als <length> registriert, damit es
	   flüssig animierbar ist. Am Ende voll deckend (Feder unterhalb des Viewports). */
	-webkit-mask-image: linear-gradient(to bottom, #000 var(--ledtek-mm-reveal, 110vh), transparent calc(var(--ledtek-mm-reveal, 110vh) + 160px));
	mask-image: linear-gradient(to bottom, #000 var(--ledtek-mm-reveal, 110vh), transparent calc(var(--ledtek-mm-reveal, 110vh) + 160px));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* !important nötig: Elementor legt sonst seine eigene "hide-scroll"-Animation
	   aufs Dropdown und überschreibt unsere -> --ledtek-mm-reveal würde nie
	   animieren (Maske bliebe voll deckend, kein Roll). */
	animation: ledtekMmRoll var(--ledtek-mm-roll) var(--ledtek-mm-ease) both !important;
}

.naviheader .ledtek-mm-active{
	height: 100%;
}
/* Menüpunkte gestaffelt einblenden */
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li {
	animation: ledtekMmItem var(--ledtek-mm-item) var(--ledtek-mm-ease) both;
}
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(1)  { animation-delay: 0.15s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(2)  { animation-delay: 0.30s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(3)  { animation-delay: 0.45s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(4)  { animation-delay: 0.60s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(5)  { animation-delay: 0.75s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(6)  { animation-delay: 0.90s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(7)  { animation-delay: 1.05s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(8)  { animation-delay: 1.20s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(9)  { animation-delay: 1.35s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(10) { animation-delay: 1.50s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(11) { animation-delay: 1.65s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(12) { animation-delay: 1.80s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(13) { animation-delay: 1.95s; }
.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li:nth-child(14) { animation-delay: 2.10s; }

/* Registriert die Reveal-Position als echte Länge -> flüssig animierbar
   (ohne @property würde der Custom-Prop nur springen statt zu interpolieren). */
@property --ledtek-mm-reveal {
	syntax: '<length>';
	inherits: false;
	initial-value: 3000px;   /* absolute Länge Pflicht; groß = voll deckend */
}
@keyframes ledtekMmRoll {
	from { --ledtek-mm-reveal: -160px; }   /* alles ausgeblendet (Feder oberhalb) */
	to   { --ledtek-mm-reveal: 110vh; }    /* voll deckend (Feder unterm Viewport) */
}
@keyframes ledtekMmItem {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}
/* Menüpunkte, die NUR im Handy-Menü erscheinen sollen (nicht Tablet/Desktop):
   im WP-Menü dem Eintrag die CSS-Klasse "nur-mobil" geben. Ab dem Tablet-
   Breakpoint (768px) werden sie ausgeblendet -> nur auf dem Handy (<=767px)
   sichtbar. Gilt fürs Header-Nav (Haupt- und Dropdown-Menü). */
@media (min-width: 768px) {
	.naviheader .elementor-nav-menu li.nur-mobil { display: none !important; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active,
	.naviheader .elementor-nav-menu--dropdown.ledtek-mm-active li {
		animation: none !important;
	}
}