/* =============================================================================
   25-mega-menu.css — das Mega-Menü mit drei Ebenen ( seit 2.5.0 )
   =============================================================================

   Markup aus inc/mega-menu-walker.php, Inhalt aus Design → Menüs:

     li.menu-item-mega-parent > .avia_mega_div > ul.sub-menu
       > li ( Spalte, Tiefe 1 )           > span.mega_menu_title
                                         > ul.sub-menu > li.sp-mm-item ( Tiefe 2 )
           > a > span.avia-menu-text + span.sp-mm-pill + small.sp-mm-desc
           > ul.sp-mm-chips > li > a.sp-mm-chip ( Tiefe 3 )
       > li.sp-mm-teaser ( Teaser-Karte ) > span.mega_menu_title + p.sp-mm-teaser-text
                                         > ul.sub-menu > li > a ( Knöpfe )

   Nur Tokens aus 00-tokens.css, keine festen Farben; eine Marken-Datei
   brands/site-<id>.css färbt das Menü deshalb mit um.

   ⚠️ DIE SELEKTOREN BEGINNEN MIT #top #header. Enfold gestaltet die Links im
   Mega-Menü mit Selektoren wie „#top .av-main-nav ul a“; ein kürzerer Selektor
   verlöre gegen sie, und ein !important wäre die schlechtere Lösung.

   ⚠️ NICHTS HIER BETRIFFT DAS BURGER-MENÜ. Enfold baut es mit Skript aus dem
   Hauptmenü nach und übernimmt dabei nur die Links, nicht .avia_mega_div. Für das
   Burger-Menü steht unten ein eigener, kleiner Abschnitt.
   ========================================================================== */

/* --- Der Kasten ----------------------------------------------------------- */

/*
 * ⚠️ DIE OBERE LINIE GEHÖRT AN DIE ÄUSSERE LISTE, NICHT AN DEN KASTEN. Enfold gibt der Liste schon
 * eine Linie von 2 px und einen eigenen Innenabstand; eine zweite am Kasten stand im Bild doppelt.
 */
#top #header .avia_mega_div > .sub-menu {
	padding: var(--sp-space-5) var(--sp-space-4);
	border: 0;
	border-top: 2px solid var(--sp-accent);
	background: var(--sp-panel);
	font-family: var(--sp-font-body);
}

/*
 * ⚠️ JEDE UNTERLISTE BEKÄME SONST RAHMEN UND FLÄCHE. 20-enfold.css rahmt „.av-main-nav ul“ für die
 * Ausklappmenüs, und Enfolds Farbschema gibt „.main_menu ul ul“ den Kopfhintergrund. Im Mega-Menü
 * stand dadurch eine graue Linie über den Spalten und ein weisser Kasten in der Teaser-Karte.
 */
#top #header .avia_mega_div > .sub-menu .sub-menu {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Enfolds gepunktete Trennlinien zwischen den Spalten ( .units ) entfallen; der Abstand trennt. */
#top #header .avia_mega_div > .sub-menu > li {
	border: 0;
	padding: 0 var(--sp-space-3);
}

/* --- Tiefe 1: Spaltenkopf -------------------------------------------------- */

#top #header .avia_mega_div .sub-menu .mega_menu_title {
	display: block;
	margin: 0 0 var(--sp-space-3);
	padding-bottom: var(--sp-space-3);
	border-bottom: 2px solid var(--sp-accent);
	font-family: var(--sp-font-display);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-bold);
	letter-spacing: var(--sp-tracking-eyebrow);
	line-height: var(--sp-lh-snug);
	text-transform: uppercase;
	color: var(--sp-brand-dark);
}

/*
 * ⚠️ Hat die Spalte eine Adresse, steht der Titel in einem Link, und Enfold gibt jedem Link in der
 * Navigation 8 px Innenabstand oben und unten. Am Inline-Link verschiebt das nicht die Zeile, aber
 * Hintergrund und Unterstreichung ragen über die Linie darunter.
 */
/*
 * ⚠️ UND ENFOLD LÄSST JEDEN LINK DER NAVIGATION NACH LINKS SCHWEBEN ( float: left ). Der Spaltenkopf
 * war dadurch innen 0 px hoch, und seine Linie lief durch die Schrift ( gemessen 29.10.2026 ).
 */
#top #header .avia_mega_div .sub-menu .mega_menu_title a {
	display: inline;
	float: none;
	padding: 0;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* --- Tiefe 2: Produkt ------------------------------------------------------ */

#top #header .avia_mega_div .sub-menu .sp-mm-item {
	margin: 0 calc(-1 * var(--sp-space-3));
	padding: 0;
	border-radius: var(--sp-radius);
	transition: background var(--sp-transition);
}

#top #header .avia_mega_div .sub-menu .sp-mm-item:hover,
#top #header .avia_mega_div .sub-menu .sp-mm-item:focus-within {
	background: var(--sp-panel-alt);
}

/*
 * Titel links, Kennzeichen rechts daneben, die Beschreibung darunter über die volle Breite.
 * ⚠️ Enfolds Pfeil ( .avia-bullet ) steht im selben Link und nimmt im Raster sonst eine eigene Zelle.
 */
#top #header .avia_mega_div .sub-menu .sp-mm-item > a {
	display: grid;
	float: none;
	grid-template-columns: 1fr auto;
	gap: 2px var(--sp-space-3);
	align-items: start;
	padding: var(--sp-space-2) var(--sp-space-3);
	color: var(--sp-ink);
	text-decoration: none;
}

#top #header .avia_mega_div .sub-menu .sp-mm-item > a .avia-bullet {
	display: none;
}

#top #header .avia_mega_div .sub-menu .sp-mm-item > a .avia-menu-text {
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-semibold);
	line-height: var(--sp-lh-snug);
	color: var(--sp-ink);
}

#top #header .avia_mega_div .sub-menu .sp-mm-item > a:hover .avia-menu-text,
#top #header .avia_mega_div .sub-menu .sp-mm-item > a:focus-visible .avia-menu-text {
	color: var(--sp-brand-dark);
}

#top #header .avia_mega_div .sub-menu .sp-mm-desc {
	grid-column: 1 / -1;
	display: block;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-snug);
	color: var(--sp-ink-3);
}

/* --- Kennzeichen frei / Kauf / neu ---------------------------------------- */

.sp-mm-pill {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 999px;
	font-family: var(--sp-font-body);
	font-size: 10px;
	font-weight: var(--sp-fw-semibold);
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Kontrast nach WCAG AA, gemessen am 29.10.2026: frei 5,01:1, Kauf 4,81:1, neu 18,72:1. */
.sp-mm-pill--frei {
	background: var(--sp-brand-soft);
	color: var(--sp-brand-dark);
}

.sp-mm-pill--kauf {
	background: var(--sp-accent-soft);
	color: var(--sp-accent-text);
}

.sp-mm-pill--neu {
	background: var(--sp-ink);
	color: var(--sp-ink-invert);
}

#top #header .avia_mega_div .sub-menu .sp-mm-item > a .sp-mm-pill {
	grid-row: 1;
	grid-column: 2;
}

/* --- Tiefe 3: Chips -------------------------------------------------------- */

/*
 * ⚠️ display UND position WERDEN AUSDRÜCKLICH GESETZT. Die Liste ist für Enfold eine gewöhnliche
 * dritte Ebene, und Enfold blendet Unterlisten in der Leiste als Ausklappmenü ein.
 */
#top #header .avia_mega_div .sub-menu .sp-mm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	position: static;
	visibility: visible;
	opacity: 1;
	margin: 0;
	padding: 0 var(--sp-space-3) var(--sp-space-2);
	border: 0;
	box-shadow: none;
	background: transparent;
	width: auto;
	left: auto;
	top: auto;
}

#top #header .avia_mega_div .sub-menu .sp-mm-chips > li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: auto;
	background: transparent;
}

#top #header .avia_mega_div .sub-menu .sp-mm-chip {
	display: block; /* als Block, sonst bestimmt die Zeilenhöhe des li ( 30 px ) den Abstand der Reihen */
	padding: 2px 8px;
	border: var(--sp-border-width) solid var(--sp-rule);
	border-radius: 999px;
	background: var(--sp-panel);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-medium);
	line-height: 1.5;
	color: var(--sp-brand-dark);
	text-decoration: none;
	transition: background var(--sp-transition), border-color var(--sp-transition);
}

#top #header .avia_mega_div .sub-menu .sp-mm-chip .avia-menu-text {
	color: inherit;
	font: inherit;
}

#top #header .avia_mega_div .sub-menu .sp-mm-chip:hover {
	border-color: var(--sp-brand-dark);
	background: var(--sp-brand-soft);
}

/* Demo-Chips in der Akzentfarbe; Kontrast 5,43:1 auf Weiss, 4,81:1 auf --sp-accent-soft. */
#top #header .avia_mega_div .sub-menu .sp-mm-chip--demo {
	border-color: var(--sp-accent);
	color: var(--sp-accent-text);
}

#top #header .avia_mega_div .sub-menu .sp-mm-chip--demo:hover {
	border-color: var(--sp-accent-text);
	background: var(--sp-accent-soft);
}

/* --- Fokus: jeder Link im Mega-Menü ist per Tab erreichbar und zeigt es --- */

/*
 * ⚠️ ENFOLD ÖFFNET DAS MEGA-MENÜ NUR BEIM ÜBERFAHREN MIT DER MAUS. Mit der Tastatur blieb es zu, und
 * keiner seiner Links liess sich per Tab erreichen ( gemessen 29.10.2026 mit Enfold 8.2 ). Steht der
 * Fokus im Hauptpunkt oder darunter, ist es deshalb offen.
 * ⚠️ !important IST HIER NÖTIG: Enfolds Skript schreibt display und opacity als Inline-Stil an den
 * Kasten, und gegen einen Inline-Stil gewinnt keine Regel ohne !important.
 */
#top #header .menu-item-mega-parent:focus-within > .avia_mega_div {
	display: block !important;
	opacity: 1 !important;
}

#top #header .avia_mega_div a:focus-visible {
	outline: var(--sp-focus-width) solid var(--sp-focus-color);
	outline-offset: var(--sp-focus-offset);
}

/* --- Teaser-Karte ---------------------------------------------------------- */

/*
 * Stahlblau mit weisser Schrift ( 5,73:1 ). Der volle Knopf trägt das helle Orange mit dunkler
 * Schrift ( 7,88:1 ); weisse Schrift auf diesem Orange erreichte nur 2,37:1.
 */
#top #header .avia_mega_div > .sub-menu > li.sp-mm-teaser {
	position: relative;
	overflow: hidden;
	padding: var(--sp-space-4);
	background: var(--sp-brand-dark);
	color: var(--sp-ink-invert);
}

/* Der Ring oben rechts aus dem Mockup, in der Akzentfarbe. */
#top #header .avia_mega_div > .sub-menu > li.sp-mm-teaser::after {
	content: "";
	position: absolute;
	right: -30px;
	top: -30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 18px solid var(--sp-accent);
	opacity: 0.35;
	pointer-events: none;
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser .mega_menu_title {
	position: relative;
	margin-bottom: var(--sp-space-2);
	padding-bottom: 0;
	border-bottom: 0;
	font-size: var(--sp-fs-md);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sp-ink-invert);
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser-text {
	position: relative;
	margin: 0 0 var(--sp-space-3);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-snug);
	color: var(--sp-brand-soft);
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser > .sub-menu {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-2);
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser > .sub-menu > li {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser > .sub-menu > li > a {
	display: inline-block;
	float: none;
	padding: var(--sp-space-2) var(--sp-space-3);
	border: var(--sp-border-width) solid var(--sp-accent);
	border-radius: var(--sp-radius);
	background: var(--sp-accent);
	color: var(--sp-ink);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-semibold);
	text-decoration: none;
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser > .sub-menu > li > a .avia-bullet {
	display: none;
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser > .sub-menu > li > a .avia-menu-text {
	color: inherit;
}

/* Der zweite Knopf als „ghost“: nur Rahmen. */
#top #header .avia_mega_div .sub-menu .sp-mm-teaser > .sub-menu > li:nth-child(2) > a {
	border-color: var(--sp-rule-invert);
	background: transparent;
	color: var(--sp-ink-invert);
}

#top #header .avia_mega_div .sub-menu .sp-mm-teaser a:focus-visible {
	outline-color: var(--sp-ink-invert);
}

/* --- Burger-Menü ----------------------------------------------------------- */

/*
 * Mobil baut Enfold aus den Chips eine eingerückte Unterliste; sie sehen dort aus wie jeder andere
 * Unterpunkt. Kennzeichen und Beschreibung stehen im Link und kommen mit; sie werden klein gesetzt,
 * die Beschreibung in eine eigene Zeile, damit nichts seitlich überläuft.
 */
#av-burger-menu-ul .sp-mm-pill {
	margin-left: var(--sp-space-2);
	vertical-align: middle;
}

#av-burger-menu-ul .sp-mm-desc {
	display: block;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-snug);
	color: var(--sp-ink-3);
	white-space: normal;
}

#av-burger-menu-ul .sp-mm-chip {
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	#top #header .avia_mega_div .sub-menu .sp-mm-item,
	#top #header .avia_mega_div .sub-menu .sp-mm-chip {
		transition: none;
	}
}