/* ============================================================
   EMEU MENUE v1.1.6 — Haus-Menue auf WordPress-Menues
   v1.1.6 (Lumina 2026-09-04): kein sichtbarer Rand am Menue-Knopf —
   der 1px-Rand bleibt transparent, damit Ruhe und Hover dieselbe
   Geometrie haben und das Kit im Hover keinen Rand-Stil setzen kann.
   v1.1.5 (Lumina 2026-09-04): Knopf-Hoehe 38px wie die CTA-Knoepfe im
   Header (Token --emeu-burger-hoehe), Symbol 18x14 statt 24x18 (Token
   --emeu-burger-symbol-breite/-hoehe, Balken 2px), X aus den Token.
   v1.1.4 (Lumina 2026-09-04): Hover-Regeln setzen alles neu, was das Kit
   im Hover anfasst (Rand-Stil, Radius, Grund, Farbe) — der 1px-Rutsch war
   der weggeschaltete Rand-Stil. Schrift der Navigation 14px ueber Token
   --emeu-menue-schrift (Standard 14px; global ueberschreibbar, z.B. in
   hand/emeu-hand-workers.css oder im Kit: :root{--emeu-menue-schrift:14px}).
   v1.1.3 (Lumina 2026-09-04 02:5x): Hover/Focus-Resets ohne Geometrie
   (padding 0 im Hover liess den Knopf springen), Hamburger-Knopf mit
   Haus-Grund als Pille (Karten-Ton, Hover eine Stufe heller, Wort und
   Symbol in Textfarbe), Schliessen-Kreuz mit runder Hover-Flaeche.
   v1.1.2 (Lumina-Feintuning 2026-09-04): Symbol rechts vom Wort
   (--symbol-rechts, Standard), Knopf-Regeln in hoeherer Gewichtsklasse
   mit vollen Resets gegen .elementor-kit-83 button (Grund, Radius 40px,
   Padding, Hover) — der "Kreis ohne X" war der Kit-Knopf; Farb-Variablen
   auch an Flaeche und Dialog, die ausserhalb von .emeu-menue liegen.
   v1.1.0 (Lumina-GO 2026-09-04 02:3x): Scroll-Lock zurueckgebaut.
   HAMBURGER-FASSUNG: nur ein Knopf "Menue" mit Symbol (immer sichtbar,
   menu="0"), Dialog als Vollbild-Flexbox mit zentriertem Inhalt, Einflug
   von links nach rechts (--von-links) oder von oben nach unten
   (--von-oben), weich mit Aus-Lauf, beim Schliessen zurueck; Bewegungs-
   Ruecksicht nur Ueberblenden. Template direkt im Widget.
   v1.0.4 (Lumina-Befund 2026-09-04 02:2x): Die Mega-Flaeche wird vom
   Skript aus dem Menuepunkt an das Seiten-Ende (body) geloest — im
   Header machten Milchglas (backdrop-filter) und Schiebe-Transform den
   Header zum Bezugsrahmen der fixierten Flaeche (unsichtbar unter ihm,
   Lock stand). Fixiert bleibt sie, jetzt zum Fenster; z-Index 10000
   ueber dem Header. Motion.page-Hover-Ausloeser gehoeren damit an die
   Flaeche oder als Klick-Umschalten an den Knopf (synthetischer Klick
   bei Hover), nicht mehr an den Menuepunkt allein.
   v1.0.3 (Lumina-Befund 2026-09-04 02:1x): Lock griff nicht, weil Lenis
   (window.emeuLenis) die Seite programmatisch weiterscrollt — jetzt
   Lenis stop/start plus Rad- und Tasten-Sperre im Skript. Stroboskop
   in Edge bei Hover: scrollbar-gutter stable reservierte auf einer Seite
   ohne Laufleiste ploetzlich Breite, das Layout sprang unter dem Zeiger
   (auf, zu, auf ...). Jetzt exakte Kompensation nur um die vorhandene
   Laufleisten-Breite (--emeu-scrollbar-breite, 0 wenn keine).
   v1.0.2 (Lumina-Etappe 1, 2026-09-04): SCROLL-LOCK der Seite, solange
   eine Mega-Flaeche oder der Hamburger-Dialog offen ist. Das Skript
   setzt html.emeu-scroll-lock; overflow hidden plus scrollbar-gutter
   stable halten die Laufleisten-Breite, damit nichts springt. Die
   Header-Regie (Beim Scrollen ausblenden) bekommt dadurch keine
   Scroll-Ereignisse mehr — der Header bleibt stehen, solange offen.
   (Lumina-Setzung 2026-09-04 a bis h, GO 01:5x, S128).

   Klassen sind die Grundlage fuer Motion.page-Timelines (Klick- und
   Hover-Ausloeser an den Elementen, Zustaende als Klassen):
   - emeu-menue (Wurzel, Modifier --waagerecht/--senkrecht,
     --burger-immer/--burger-responsive/--burger-nie)
   - emeu-menue__nav, emeu-menue__liste, emeu-menue__punkt
     (--mega, --klick, --hover, --icon-links, --icon-rechts)
   - emeu-menue__link, emeu-menue__knopf (--pfeil), emeu-menue__text,
     emeu-menue__icon(-rahmen)
   - emeu-mega (die Flaeche, im li), emeu-mega__inhalt
   - emeu-burger, emeu-burger__balken, emeu-burger__panel,
     emeu-burger__inhalt, emeu-burger__schliessen
   Zustaende: is-open, is-closing (Flaeche und Punkt), body.emeu-mega-open
   (schaltet auch den Milchglas-Schleier), body.emeu-burger-open,
   data-emeu-mega="name" am Punkt fuer gezielte Timelines.

   Bewegung: dezente Basis (Einblenden 300ms), Dauer bis zum Ausblenden
   --emeu-mega-dauer (340ms) — Motion.page-Timelines ueberschreiben die
   Basis; das Skript wartet die Dauer ab, bevor es hidden setzt.
   Farben aus der Kontext-Schicht (--color-*, --dna-signal).
   ============================================================ */

:root {
  --emeu-menue-schrift: 14px;
  --emeu-burger-hoehe: 38px;          /* wie die CTA-Knoepfe im Header */
  --emeu-burger-symbol-breite: 18px;
  --emeu-burger-symbol-hoehe: 14px;   /* drei Balken a 2px, Abstand 4px */
}

.emeu-menue {
  --emeu-mega-dauer: 340ms;
  --emeu-menue-luecke: 1.5rem;
  font-size: var(--emeu-menue-schrift, 14px);
  line-height: 1.2;
  --emeu-menue-farbe: var(--color-text, #d6d6d6);
  --emeu-menue-farbe-aktiv: var(--color-primary, var(--dna-signal, #e9ff2e));
  --emeu-menue-hover-grund: var(--neutral-d-19, #3d3d3d);
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: inherit;
}

/* Seiten-Kontext hell (Befund 2026-09-06): Hover-Grund des Knopfs und Aktiv-Farbe
   folgen dem Kontext — heller Grund statt dunkler Pille, Messing statt Signal. */
body.on-light .emeu-menue,
.on-light .emeu-menue {
  --emeu-menue-hover-grund: var(--neutral-d-3, #e0e0e0);
  --emeu-menue-farbe-aktiv: var(--color-primary, var(--dna-messing, #aa9841));
}

.emeu-menue__link,
.emeu-menue__knopf,
.emeu-burger__wort { font-size: var(--emeu-menue-schrift, 14px); }

/* --- Liste plus Punkte -------------------------------------- */

.emeu-menue__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--emeu-menue-luecke);
}

.emeu-menue--senkrecht .emeu-menue__liste {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.emeu-menue__punkt {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.emeu-menue .emeu-menue__knopf,
.emeu-menue .emeu-menue__knopf:hover,
.emeu-menue .emeu-menue__knopf:focus {
  background: none;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  letter-spacing: normal;
  text-transform: none;
}

.emeu-menue__link,
.emeu-menue__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.5rem 0.25rem;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: var(--emeu-menue-farbe);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease;
}

.emeu-menue--senkrecht .emeu-menue__link,
.emeu-menue--senkrecht .emeu-menue__knopf { width: 100%; padding: 0.6rem 0.5rem; }

.emeu-menue__link:hover,
.emeu-menue__knopf:hover,
.emeu-menue__link[aria-current="page"],
.emeu-menue__punkt.is-open > .emeu-menue__knopf,
.emeu-menue__punkt.is-open > .emeu-menue__link { color: var(--emeu-menue-farbe-aktiv); }

.emeu-menue__link:focus-visible,
.emeu-menue__knopf:focus-visible,
.emeu-burger:focus-visible,
.emeu-burger__schliessen:focus-visible {
  outline: 2px solid var(--emeu-menue-farbe-aktiv);
  outline-offset: 2px;
}

.emeu-menue__knopf--pfeil { padding: 0.5rem 0.3rem; }

.emeu-menue__pfeil {
  width: 0.9em;
  height: 0.9em;
  transition: transform 0.25s ease;
}

.emeu-menue__punkt.is-open > .emeu-menue__knopf .emeu-menue__pfeil,
.emeu-menue__knopf[aria-expanded="true"] .emeu-menue__pfeil { transform: rotate(180deg); }

/* Icons: inline-SVG in Textfarbe, Groesse an der Schrift. */
.emeu-menue__icon-rahmen {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.emeu-menue__icon {
  width: 1.1em;
  height: 1.1em;
  display: block;
  fill: currentColor;
}

.emeu-menue__icon path[fill]:not([fill="none"]) { fill: currentColor; }

/* --- Die Mega-Flaeche (im li, volle Fensterbreite) ------------ */

.emeu-mega,
.emeu-burger__panel {
  --emeu-mega-dauer: 340ms;
  --emeu-menue-farbe: var(--color-text, #d6d6d6);
  --emeu-menue-farbe-aktiv: var(--dna-signal, #e9ff2e);
}

.emeu-mega {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--emeu-mega-top, 0px);
  z-index: 10000;
  max-height: calc(100dvh - var(--emeu-mega-top, 0px));
  overflow: auto;
  background: var(--color-bg-page, #0a0a0a);
  color: var(--color-text, #d6d6d6);
  border-top: 1px solid var(--color-border, #3d3d3d);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.emeu-mega[hidden] { display: none; }

.emeu-mega.is-open {
  opacity: 1;
  transform: translateY(0);
}

.emeu-mega.is-closing {
  opacity: 0;
  transform: translateY(-8px);
}

.emeu-mega__inhalt { width: 100%; }

/* Senkrechte Menues (in Templates): Flaeche als Aufklappen im Fluss. */
.emeu-menue--senkrecht .emeu-mega {
  position: static;
  max-height: none;
  border-top: 0;
  transform: none;
}

/* --- Hamburger ------------------------------------------------ */

/* Hamburger-Knopf: Pille auf Karten-Ton (Haus-Grund statt Kit-Grund), Hover
   eine Stufe heller. Hover/Focus aendern NUR Farben — keine Geometrie. */
.emeu-menue .emeu-burger {
  background: var(--color-bg-card, var(--neutral-d-21, #262626));
  border: 1px solid transparent;    /* v1.1.6: kein sichtbarer Rand, Geometrie bleibt */
  border-radius: 999px;
  box-shadow: none;
  padding: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--emeu-menue-farbe);
}
/* Hover/Focus setzen alles neu, was das Kit im Hover anfasst (Rand-Stil,
   Radius, Grund, Farbe) — sonst faellt der Rand weg und der Text rutscht. */
.emeu-menue .emeu-burger:hover,
.emeu-menue .emeu-burger:focus {
  background: var(--emeu-menue-hover-grund, var(--neutral-d-19, #3d3d3d));
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--emeu-menue-farbe);
  box-shadow: none;
}

.emeu-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--emeu-burger-hoehe, 38px);
  height: var(--emeu-burger-hoehe, 38px);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--emeu-menue-farbe);
  cursor: pointer;
  transition: color 0.18s ease;
}

.emeu-menue--burger-immer .emeu-burger { display: inline-flex; }

/* Knopf mit Wort (v1.1.0); Symbol rechts vom Wort (v1.1.2, Standard) */
.emeu-menue .emeu-burger--mit-wort {
  width: auto;
  gap: 0.6rem;
  padding: 0 1rem 0 0.85rem;
}
.emeu-menue .emeu-burger--symbol-rechts {
  flex-direction: row-reverse;
  padding: 0 0.85rem 0 1rem;
}
.emeu-burger__wort {
  font: inherit;
  font-weight: 500;
  line-height: 1;
}

.emeu-burger:hover { color: var(--emeu-menue-farbe-aktiv); }

.emeu-burger__balken {
  position: relative;
  display: block;
  width: var(--emeu-burger-symbol-breite, 18px);
  height: var(--emeu-burger-symbol-hoehe, 14px);
}

.emeu-burger__balken i {
  position: absolute;
  left: 0;
  width: var(--emeu-burger-symbol-breite, 18px);
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
}

.emeu-burger__balken i:nth-child(1) { top: 0; }
.emeu-burger__balken i:nth-child(2) { top: calc((var(--emeu-burger-symbol-hoehe, 14px) - 2px) / 2); }
.emeu-burger__balken i:nth-child(3) { top: calc(var(--emeu-burger-symbol-hoehe, 14px) - 2px); }

/* Hover: der mittlere Balken zieht sich zusammen — sichtbare Reaktion. */
.emeu-menue .emeu-burger:hover .emeu-burger__balken i:nth-child(2) { width: calc(var(--emeu-burger-symbol-breite, 18px) * 0.66); }

/* Offen: die Balken werden zum X. */
.emeu-burger.is-open .emeu-burger__balken i:nth-child(1) { transform: translateY(calc((var(--emeu-burger-symbol-hoehe, 14px) - 2px) / 2)) rotate(45deg); }
.emeu-burger.is-open .emeu-burger__balken i:nth-child(2) { opacity: 0; width: var(--emeu-burger-symbol-breite, 18px); }
.emeu-burger.is-open .emeu-burger__balken i:nth-child(3) { transform: translateY(calc((var(--emeu-burger-symbol-hoehe, 14px) - 2px) / -2)) rotate(-45deg); }

/* Vollbild-Dialog (v1.1.0): Flexbox, Inhalt zentriert (margin auto haelt
   die Mitte und laesst bei hohem Inhalt scrollen), Einflug per Klasse. */
.emeu-burger__panel {
  --emeu-mega-dauer: 560ms;
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  overflow: auto;
  background: var(--color-bg-page, #0a0a0a);
  color: var(--color-text, #d6d6d6);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.56s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.emeu-burger__panel--von-oben { transform: translateY(-100%); }

.emeu-burger__panel[hidden] { display: none; }

.emeu-burger__panel.is-open {
  opacity: 1;
  transform: none;
}

.emeu-burger__panel.is-closing { opacity: 0; }
.emeu-burger__panel--von-links.is-closing { transform: translateX(-100%); }
.emeu-burger__panel--von-oben.is-closing { transform: translateY(-100%); }

.emeu-burger__panel .emeu-burger__schliessen {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 0;
  color: var(--emeu-menue-farbe);
}
.emeu-burger__panel .emeu-burger__schliessen:hover,
.emeu-burger__panel .emeu-burger__schliessen:focus {
  background: var(--color-bg-card, var(--neutral-d-21, #262626));
  border: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
  border-radius: 999px;
  color: var(--emeu-menue-farbe-aktiv);
  box-shadow: none;
}

.emeu-burger__schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--emeu-menue-farbe);
  cursor: pointer;
  transition: color 0.18s ease;
}

.emeu-burger__schliessen:hover { color: var(--emeu-menue-farbe-aktiv); }

.emeu-burger__schliessen svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.emeu-burger__inhalt {
  margin: auto;                   /* zentriert, scrollt bei Ueberhoehe */
  width: 100%;
}

/* Scroll-Lock (v1.0.2): Seite im Hintergrund steht, solange eine
   Flaeche oder der Dialog offen ist. Die Flaeche selbst scrollt innen. */
/* v1.1.0: kein Scroll-Lock mehr (Lumina-Rueckbau 2026-09-04). */

/* --- Bewegungs-Ruecksicht ------------------------------------ */

/* Bewegungs-Ruecksicht: kein Einflug, nur Ueberblenden. */
@media (prefers-reduced-motion: reduce) {
  .emeu-burger__panel,
  .emeu-burger__panel--von-oben,
  .emeu-burger__panel.is-closing { transform: none; transition: opacity 0.2s ease; }
  .emeu-mega,
  .emeu-burger__panel,
  .emeu-burger__panel--von-oben,
  .emeu-burger__balken i,
  .emeu-menue__pfeil { transition: none; }
}