/**
 * MaxiCommerce — Widget „Menü" (Umschalter für Menüs, Popups, Slide-Ins).
 *
 * AUFBAU (Variablen seit 1.27.0, Theme-Panzer + neutrale Rückfälle 1.31.0,
 * abgeleitetes Größen-System 1.32.0):
 *
 * 0. **Ein Maß trägt alles.** Die Fläche (`--mc-menu-size`) ist das einzige
 *    tragende Maß; Symbolbreite, Strichstärke und Strichabstand leiten sich
 *    als Brüche daraus ab, solange sie nicht ausdrücklich gesetzt sind
 *    (Details am `.mc-menu-icon`-Block). Ein eigener Wert schlägt die
 *    Ableitung — proportional als Vorgabe, absolut auf Wunsch. Nie wieder
 *    eine KETTE aus mehreren Reglern für EINE sichtbare Länge bauen.
 *
 * 1. **Variablen-Vertrag.** Jedes Steuerelement im Elementor-Bedienfeld setzt
 *    eine `--mc-menu-*`-Variable, diese Datei liest sie. Kein Steuerelement
 *    schreibt je eine Eigenschaft direkt — Gruppen (Rahmen, Schatten) über
 *    `fields_options`, siehe `mc-menu-icon-widget.php`.
 *
 * 2. **Theme-Panzer.** Die Schaltfläche ist ein echtes `<button>`; fremde
 *    Themes und Kit-Stile geben Buttons regelmäßig Hintergrund, Rahmen,
 *    Innenabstand oder Rundung — und zwar mit höherer Spezifität als eine
 *    einfache Klasse. Alles, was ein Theme so anfassen könnte, steht hier
 *    deshalb mit `!important` und liest den Wert aus einer Variablen. Der
 *    Panel-Wert gewinnt trotzdem, weil er die VARIABLE setzt (Elementors
 *    Selektor ist spezifischer) — genau der Vertrag aus CLAUDE.md.
 *
 * 3. **Neutrale Rückfälle — „leer" heißt wirklich „nichts".** Der Rückfall
 *    einer Variablen ist `transparent`, `none`, `currentColor` oder `0`, nie
 *    ein Gestaltungswert. Bis 1.30.8 stand der Hintergrund als Token
 *    (`--mc-menu-bg: #2c3e50`) in derselben Regel, die ihn ausgab: Ein
 *    geleertes Farbfeld gibt in Elementor kein CSS aus, also blieb der Token
 *    stehen und die Fläche behielt ihren Hintergrund — „entfernen" war
 *    unmöglich. Einzige erlaubte Ausnahme sind `--mc-menu-dur`/`--mc-menu-ease`:
 *    Dort heißt „leer" Standardtempo, nicht „keine Bewegung".
 *
 * 4. Bewegung ausschließlich über `transform` und `opacity` — beides läuft
 *    auf der Grafikkarte und ruckelt auch auf schwachen Geräten nicht.
 *    Keine Animation von width/height/margin.
 *
 * @package MaxiCommerce
 * @author Sven Schöning
 */

/* ==========================================================================
   Hülle
   ========================================================================== */

.mc-menu-icon-holder {
	position: relative;
}

/* Auslöser der Zeiger-Effekte. Bewusst eine EIGENE Hülle statt des
   Holders: Der Holder ist ein Block und damit so breit wie die Spalte —
   bei linksbündiger Ausrichtung reagierte das Symbol schon, wenn der
   Zeiger hunderte Pixel daneben stand. Diese Hülle umschließt genau die
   Schaltfläche und verformt sich selbst nie (die Verformung eines Kindes
   ändert die Layout-Box des Elternteils nicht) — die Trefferfläche bleibt
   also konstant, die Rückkopplung aus 1.27.0 kann nicht entstehen. */
.mc-menu-icon-wrap {
	display: inline-flex;
	position: relative;
	vertical-align: middle;
}

/* Scroll-Sperre für geöffnete Ziel-Elemente (Off-Canvas & Co.).
   `overflow: clip` statt `hidden` — dasselbe Muster wie beim Slide-In:
   `hidden` erzeugt auf iOS einen Scroll-Container und springt beim
   Schließen an den Anfang zurück. */
html.mc-menu-scroll-lock,
html.mc-menu-scroll-lock body {
	overflow: clip;
}

/* ==========================================================================
   Schaltfläche
   ========================================================================== */

.mc-menu-icon {
	/* Tempo und Kurve: Hier heißt „nichts eingestellt" Standardtempo —
	   deshalb dürfen diese beiden als Token stehen (Punkt 3 oben). */
	--mc-menu-dur: 0.3s;
	--mc-menu-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Größen-System (Neubau 1.32.0) -----------------------------------
	   EIN Maß trägt alles: die Fläche (`--mc-menu-size`). Symbolbreite,
	   Strichstärke und Strichabstand leiten sich daraus ab, solange sie
	   nicht ausdrücklich gesetzt sind — deshalb skaliert das ganze Symbol
	   mit, wenn man nur die Fläche zieht.

	   Die drei Faktoren sind KEINE Geschmacksfrage, sondern die bisherigen
	   Vorgaben als Verhältnis: 7/10 (Symbolbreite), 1/14 (Strichstärke),
	   4/35 (Abstand) — als Brüche notiert, damit bei 70 px exakt 49/5/8 px
	   herauskommen. Ein unverändertes Widget sieht damit exakt aus wie
	   vorher — nur skaliert es jetzt.

	   Vorher hing die Symbolbreite an einer KETTE aus drei Reglern
	   (Fläche → Linien-Block → Strichbreite in % davon). Wer den Block auf
	   einen festen Wert stellte, nagelte das Symbol fest, und die Fläche
	   blies nur noch den leeren Rand auf. Diese Kette ist aufgelöst: Die
	   Striche füllen den Block immer zu 100 %, der Block IST die
	   Symbolbreite. */
	--mc-menu-iw: var(--mc-menu-icon-w, calc(var(--mc-menu-size, 70px) * 0.7));
	--mc-menu-lh: var(--mc-menu-line-h, calc(var(--mc-menu-size, 70px) / 14));
	--mc-menu-lg: var(--mc-menu-line-gap, calc(var(--mc-menu-size, 70px) * 4 / 35));

	/* Versatz der äußeren Linien im X-Zustand: Strichstärke + Abstand
	   (= Mittenabstand benachbarter Striche). Je Variante überschrieben. */
	--mc-menu-shift: calc(var(--mc-menu-lh) + var(--mc-menu-lg));

	/* Eigene Darstellung — bewusst KEIN `all: unset`: Das nimmt auch
	   Fokus-Verhalten und Vererbung mit und ist in fremden Themes
	   unberechenbar. Nur das zurücksetzen, was ein <button> mitbringt. */
	font: inherit;
	line-height: 1;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;

	/* --- Theme-Panzer (Punkt 2): Eigenschaft gepinnt, Wert aus Variable --- */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	gap: var(--mc-menu-gap, 10px) !important;
	/* Die Fläche ist ein MINDESTMASS, keine feste Größe: Der Kasten wächst
	   mit Innenabstand und Beschriftung, statt sie zu verschlucken. Mit den
	   Vorgaben (Symbol 49 px in 70 px Fläche) ändert das nichts — der
	   Innenabstand tut jetzt aber endlich etwas, statt nur den Inhalt
	   einzuquetschen. */
	width: auto !important;
	height: auto !important;
	min-width: var(--mc-menu-size, 70px) !important;
	min-height: var(--mc-menu-size, 70px) !important;
	padding: var(--mc-menu-pad, 0) !important;
	background-color: var(--mc-menu-bg, transparent) !important;
	/* Ein Theme, das `background: linear-gradient(…)` auf Buttons legt,
	   bliebe sonst sichtbar, obwohl die Farbe entfernt wurde. Gleichzeitig
	   der Haken für eigene Verläufe per Custom-CSS. */
	background-image: var(--mc-menu-bg-image, none) !important;
	border-style: var(--mc-menu-border-style, none) !important;
	border-width: var(--mc-menu-border-w, 0) !important;
	border-color: var(--mc-menu-border-color, currentColor) !important;
	border-radius: var(--mc-menu-radius, 0) !important;
	box-shadow: var(--mc-menu-shadow, none) !important;
	color: var(--mc-menu-label-color, inherit) !important;
	text-decoration: none !important;
	cursor: pointer !important;

	transition:
		background-color var(--mc-menu-dur) var(--mc-menu-ease),
		border-color var(--mc-menu-dur) var(--mc-menu-ease),
		border-radius var(--mc-menu-dur) var(--mc-menu-ease),
		box-shadow var(--mc-menu-dur) var(--mc-menu-ease),
		color var(--mc-menu-dur) var(--mc-menu-ease),
		/* Eigene, NICHT überschwingende Kurve: `--mc-menu-ease` kann vom
		   Effekt „Federung" überschrieben werden — ein Überschwinger darf
		   aber nie in einen Zustand, den der Zeiger jederzeit umkehrt. */
		transform var(--mc-menu-dur) var(--mc-menu-ease-ui, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Mit Beschriftung: nur ein anderer Innenabstand als Rückfall — Breite und
   Höhe wachsen ohnehin schon mit (siehe oben). Das Symbol ist neben Text
   kleiner; der Faktor 0.26 ist die frühere SICHTBARE Strichlänge als
   Verhältnis (26 px Block × 70 % Strichbreite = 18,2 px bei 70 px Fläche),
   damit bestehende Widgets unverändert aussehen und trotzdem mitskalieren.
   Doppelte Klasse für eindeutige Spezifität — dieselbe Eigenschaft steht
   oben ebenfalls mit `!important`, ein Gleichstand hinge sonst an der
   Reihenfolge. */
.mc-menu-icon.mc-menu-icon--labeled {
	--mc-menu-iw: var(--mc-menu-icon-w, calc(var(--mc-menu-size, 70px) * 0.26));
	padding: var(--mc-menu-pad, 0 18px) !important;
}

/* Tastatur-Fokus sichtbar machen — Pflicht für Bedienbarkeit ohne Maus.
   `:focus-visible` zeigt den Ring nur bei Tastatur, nie beim Mausklick.

   ALS EINZIGE REGEL MIT ERHÖHTER SPEZIFITÄT (0,3,1) — mit Grund: Der
   Umriss ist die eine Eigenschaft, die Themes regelmäßig SELBST mit
   `!important` abräumen („outline: none" gegen den Fokus-Ring). Gegen
   `!important` entscheidet die Spezifität, und eine einfache Klasse verliert
   dort. Im Browser nachgestellt: Mit `.…-container button:focus-visible {
   outline: none !important }` blieb der Ring bei (0,1,1) aus, bei (0,3,1)
   erscheint er. Nicht abschwächen. Für alle anderen Eigenschaften reicht
   `!important` an der einfachen Klasse — Themes setzen Button-Hintergründe
   praktisch nie mit `!important`. */
.mc-menu-icon-holder .mc-menu-icon.mc-menu-icon:focus-visible {
	outline: var(--mc-menu-focus-w, 3px) solid var(--mc-menu-focus, #2563eb) !important;
	outline-offset: var(--mc-menu-focus-offset, 3px) !important;
}

/* Zeiger-Effekte — AUSLÖSER IST DIE HÜLLE, NIE DIE SCHALTFLÄCHE SELBST.
   Läge der Auslöser an der Schaltfläche, die sich gleichzeitig verformt,
   wanderte ihre eigene Trefferfläche unter dem Zeiger weg: Hover fällt
   weg → sie springt zurück → Hover greift wieder. Diese Rückkopplung ist
   das sichtbare Zittern. `.mc-menu-icon-wrap` verformt sich nie (die
   Verformung eines Kindes ändert die Layout-Box des Elternteils nicht),
   seine Trefferfläche ist damit konstant und die Schleife unmöglich.
   Die Werte bleiben bewusst dezent — was über die Hülle hinausragt,
   wäre eine tote Zone am Rand. */
@media (hover: hover) {
	.mc-menu-icon-wrap:hover .mc-menu-icon--fx-grow { transform: scale(1.06); }
	.mc-menu-icon-wrap:hover .mc-menu-icon--fx-shrink { transform: scale(0.94); }
	.mc-menu-icon-wrap:hover .mc-menu-icon--fx-lift { transform: translateY(-3px); }
	.mc-menu-icon-wrap:hover .mc-menu-icon--fx-tilt { transform: rotate(-6deg); }
}

/* Druck-Rückmeldung — nach den Hover-Regeln notiert und mit gleicher
   Spezifität, damit sie den Zeiger-Effekt beim Klick überschreibt. */
.mc-menu-icon-wrap .mc-menu-icon:active {
	transform: scale(0.96);
}

/* ==========================================================================
   Beschriftung
   ========================================================================== */

.mc-menu-label {
	display: inline-block;
	white-space: nowrap;
	transition: opacity calc(var(--mc-menu-dur) * 0.7) var(--mc-menu-ease);
}

/* „Geöffnet"-Text liegt auf dem „Geschlossen"-Text und blendet um. Beide
   im selben Gitterfeld — dadurch springt die Breite beim Umschalten nicht. */
.mc-menu-label-stack {
	display: inline-grid;
	align-items: center;
	justify-items: center;
}

.mc-menu-label-stack > .mc-menu-label {
	grid-area: 1 / 1;
}

.mc-menu-label--active {
	opacity: 0;
	pointer-events: none;
}

.mc-menu-icon.is-active .mc-menu-label--idle { opacity: 0; }
.mc-menu-icon.is-active .mc-menu-label--active { opacity: 1; }

/* Anordnung: Beschriftung vor/nach dem Symbol oder darunter */
.mc-menu-icon--label-before .mc-menu-label-stack { order: -1; }
/* Der Abstand kommt aus `gap` der Basisregel (dort gepinnt) — hier nur die
   Richtung, sonst stünde eine tote Deklaration gegen das `!important`. */
.mc-menu-icon--label-below {
	flex-direction: column;
}

@media (max-width: 767px) {
	.mc-menu-icon--label-hide-mobile .mc-menu-label-stack { display: none; }

	/* Dreifache Klasse: schlägt eindeutig die `--labeled`-Regel oben
	   (beide gepinnt), ohne sich auf die Reihenfolge zu verlassen. */
	.mc-menu-icon.mc-menu-icon--labeled.mc-menu-icon--label-hide-mobile {
		width: var(--mc-menu-size, 70px) !important;
		padding: 0 !important;
	}
}

/* ==========================================================================
   Linien
   ========================================================================== */

/* Der Block IST die Symbolbreite — die Striche füllen ihn. Ein zweiter
   Regler für die Blockbreite wäre genau die Kette, die 1.32.0 abgeschafft
   hat: Zwei Regler für eine sichtbare Länge, deren Ergebnis man ausrechnen
   muss. Nicht wieder einführen. */
.mc-hamburger {
	display: block;
	position: relative;
	flex: 0 0 auto;
	width: var(--mc-menu-iw);
	transform: scale(1);
	transition: transform var(--mc-menu-dur) var(--mc-menu-ease);
}

.mc-hamburger .mc-line {
	display: block;
	width: 100%;
	height: var(--mc-menu-lh);
	margin: var(--mc-menu-lg) auto;
	background-color: var(--mc-menu-line, currentColor);
	border-radius: var(--mc-menu-line-radius, 0);
	transform-origin: center;
	transition:
		transform var(--mc-menu-dur) var(--mc-menu-ease),
		opacity calc(var(--mc-menu-dur) * 0.55) var(--mc-menu-ease),
		background-color var(--mc-menu-dur) var(--mc-menu-ease),
		background-image var(--mc-menu-dur) var(--mc-menu-ease),
		width var(--mc-menu-dur) var(--mc-menu-ease);
}

/* --- Symbol-Varianten ---------------------------------------------------- */

/* Zwei Linien: die mittlere entfällt, der X-Versatz halbiert sich auf den
   Abstand der verbleibenden beiden. */
.mc-menu-icon--bars2 .mc-line:nth-child(2) {
	display: none;
}

.mc-menu-icon--bars2 {
	/* Benachbarte Ränder KOLLABIEREN: Zwischen zwei Linien liegt genau
	   ein Abstand, nicht zwei. Der halbe Weg zur Mitte ist deshalb
	   (Dicke + Abstand) / 2 — mit der alten Formel schossen beide Arme
	   über die Mitte hinaus und das Kreuz stand schief. */
	--mc-menu-shift: calc((var(--mc-menu-lh) + var(--mc-menu-lg)) / 2);
}

/* Mittlere bzw. obere Linie verkürzt — der Klassiker für „weniger streng". */
.mc-menu-icon--bars-mid .mc-line:nth-child(2) {
	width: 60%;
}

.mc-menu-icon--bars-top .mc-line:nth-child(1) {
	width: 60%;
}

/* Punkte statt Linien: dieselben drei Elemente, nur als Punktreihe
   gezeichnet. Kein zusätzliches Markup, dieselbe Morph-Logik. */
.mc-menu-icon--dots .mc-line {
	background-color: transparent;
	background-image: radial-gradient(circle closest-side, var(--mc-menu-line, currentColor) 100%, transparent 100%);
	background-size: calc(var(--mc-menu-lh) * 2.2) 100%;
	background-position: center;
	background-repeat: repeat-x;
}

/* ==========================================================================
   Eigenes Symbol (Elementor-Icon-Bibliothek)
   ==========================================================================
   Zwei Symbole liegen im selben Gitterfeld übereinander und blenden um —
   dieselbe Technik wie bei der Beschriftung, dadurch springt die Breite
   beim Umschalten nicht. Die Farbe kommt aus derselben Variablen wie die
   Linien: EIN Steuerelement je Zustand für beide Darstellungsformen. */

.mc-menu-glyph {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	line-height: 0;
	font-size: var(--mc-menu-glyph-size, 28px);
	color: var(--mc-menu-line, currentColor);
}

.mc-menu-glyph-item {
	grid-area: 1 / 1;
	display: block;
	line-height: 0;
	transition:
		opacity calc(var(--mc-menu-dur) * 0.7) var(--mc-menu-ease),
		transform var(--mc-menu-dur) var(--mc-menu-ease);
}

.mc-menu-glyph i {
	display: block;
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

.mc-menu-glyph svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mc-menu-glyph-item--active { opacity: 0; }
.mc-menu-icon.is-active .mc-menu-glyph-item--idle { opacity: 0; }
.mc-menu-icon.is-active .mc-menu-glyph-item--active { opacity: 1; }

/* Ohne zweites Symbol bleibt das erste sichtbar — es bewegt sich nur. */
.mc-menu-icon--glyph-single.is-active .mc-menu-glyph-item--idle { opacity: 1; }

/* Wechsel „Drehen" */
.mc-menu-icon--swap-rotate .mc-menu-glyph-item--active { transform: rotate(-90deg); }
.mc-menu-icon--swap-rotate.is-active .mc-menu-glyph-item--idle { transform: rotate(90deg); }
.mc-menu-icon--swap-rotate.is-active .mc-menu-glyph-item--active { transform: rotate(0deg); }

/* Wechsel „Zoomen" */
.mc-menu-icon--swap-scale .mc-menu-glyph-item--active { transform: scale(0.4); }
.mc-menu-icon--swap-scale.is-active .mc-menu-glyph-item--idle { transform: scale(0.4); }
.mc-menu-icon--swap-scale.is-active .mc-menu-glyph-item--active { transform: scale(1); }

/* Einzel-Symbol: „Zoomen" darf es nicht wegschrumpfen lassen — es pulst
   nur kurz an. */
.mc-menu-icon--glyph-single.mc-menu-icon--swap-scale.is-active .mc-menu-glyph-item--idle {
	transform: scale(1.12);
}

/* --- Umschalt-Effekte ---------------------------------------------------- */

/* Standard: die äußeren Linien fahren zur Mitte und kreuzen sich. */
.mc-menu-icon.is-active .mc-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.mc-menu-icon.is-active .mc-line:nth-child(1) {
	transform: translateY(var(--mc-menu-shift)) rotate(45deg);
}

.mc-menu-icon.is-active .mc-line:nth-child(3) {
	transform: translateY(calc(-1 * var(--mc-menu-shift))) rotate(-45deg);
}

/* Verkürzte Linien werden im X-Zustand wieder voll lang — sonst bliebe
   das Kreuz asymmetrisch. */
.mc-menu-icon--bars-mid.is-active .mc-line:nth-child(2),
.mc-menu-icon--bars-top.is-active .mc-line:nth-child(1) {
	width: 100%;
}

/* Drehung: das ganze Symbol dreht sich beim Kreuzen. */
.mc-menu-icon--fxa-spin.is-active .mc-hamburger {
	transform: rotate(180deg);
}

/* Federung: übersteuerte Kurve, die Linien schwingen kurz nach. */
.mc-menu-icon--fxa-elastic {
	--mc-menu-ease: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Einklappen: die Linien fahren erst zusammen, dann dreht das Kreuz auf.
   Zweistufig über Verzögerungen — ohne Keyframes, damit Rückweg und
   Hinweg exakt spiegelbildlich laufen. */
.mc-menu-icon--fxa-collapse .mc-line:nth-child(1),
.mc-menu-icon--fxa-collapse .mc-line:nth-child(3) {
	transition-delay: calc(var(--mc-menu-dur) * 0.35), 0s, 0s, 0s;
}

.mc-menu-icon--fxa-collapse.is-active .mc-line:nth-child(1),
.mc-menu-icon--fxa-collapse.is-active .mc-line:nth-child(3) {
	transition-delay: 0s;
}

.mc-menu-icon--fxa-collapse .mc-hamburger {
	transition-delay: 0s;
}

.mc-menu-icon--fxa-collapse.is-active .mc-hamburger {
	transition-delay: calc(var(--mc-menu-dur) * 0.35);
}

/* Pfeil: aus den Linien wird ein „Zurück"-Pfeil statt eines Kreuzes. */
.mc-menu-icon--fxa-arrow.is-active .mc-line:nth-child(1) {
	width: 55%;
	transform: translate(-22%, calc(var(--mc-menu-shift) * 0.62)) rotate(-45deg);
}

.mc-menu-icon--fxa-arrow.is-active .mc-line:nth-child(2) {
	opacity: 1;
	transform: none;
}

.mc-menu-icon--fxa-arrow.is-active .mc-line:nth-child(3) {
	width: 55%;
	transform: translate(-22%, calc(var(--mc-menu-shift) * -0.62)) rotate(45deg);
}

/* Ohne Bewegung: sofortiger Wechsel, ohne die Zustände aufzugeben.
   Das Tempo-Steuerelement ist in diesem Fall ausgeblendet — sonst schriebe
   es dieselbe Variable mit höherer Spezifität und diese Regel liefe leer. */
.mc-menu-icon--fxa-none {
	--mc-menu-dur: 0.001s;
}

/* ==========================================================================
   Barrierefreiheit / Systemeinstellungen
   ========================================================================== */

/* „Bewegung reduzieren" respektieren: Zustände bleiben, nur die
   Übergänge entfallen. */
@media (prefers-reduced-motion: reduce) {
	.mc-menu-icon,
	.mc-menu-icon .mc-line,
	.mc-menu-icon .mc-hamburger,
	.mc-menu-icon .mc-menu-glyph-item,
	.mc-menu-icon .mc-menu-label {
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}

	/* Dieselben Auslöser wie oben — sonst greift die Systemeinstellung
	   genau dort nicht, wo der Effekt tatsächlich ausgelöst wird. */
	.mc-menu-icon-wrap:hover .mc-menu-icon,
	.mc-menu-icon:active {
		transform: none;
	}
}