/* =====================================================================
   Baustein MENUE — mobiles Off-Canvas-Menue (Standard seit 09.09.2026)
   Vorbild: autoservice-herold.de (Benjamins Ansage: „generell annehmen")
   ---------------------------------------------------------------------
   Verhalten: Burger oben rechts -> Panel gleitet von RECHTS herein
   (82 % Breite, max. 330 px), Seite dahinter abgedunkelt und gesperrt,
   Eintraege gross mit Trennlinien, CTA im Panel, Burger wird zum X.
   Schliessen: X, Tipp auf den Schleier, Escape, Klick auf einen Eintrag.

   Einbau (siehe README.md): eigene Klassen mit Praefix "menue-", damit
   nichts mit Seiten-CSS kollidiert. Farben/Masse ueber die Variablen
   unten in der Kundenpalette ueberschreiben — NICHT diese Datei aendern.
   Breakpoint fest 860 px (CSS-Variablen gelten nicht in @media).
   ===================================================================== */
/* Standardwerte mit Spezifitaet 0 (:where), damit die Kundenpalette in styles.css
   gewinnt, obwohl menue.css NACH styles.css geladen wird. */
:where(:root) {
  --menue-breite:   min(82vw, 330px);
  --menue-hg:       #ffffff;               /* Panel-Flaeche                      */
  --menue-farbe:    #172433;               /* Linkfarbe im Panel                 */
  --menue-linie:    #E3EAF1;               /* Trennlinien                        */
  --menue-schleier: rgba(15, 36, 56, .55); /* Abdunkelung der Seite              */
  --menue-burger:   #ffffff;               /* Balkenfarbe des Burgers im Header  */
  --menue-burger-offen: var(--menue-farbe); /* Farbe des X bei OFFENEM Panel: steht das nav im Header, liegt das X ueber dem Panel */
  --menue-kopf:     72px;                  /* Header-Hoehe: Panel-Text beginnt darunter */
  --menue-oben:     0px;                   /* zusaetzlich, z. B. Hoehe einer Anruf-Leiste */
}

/* ---------- Burger (nur mobil sichtbar) ---------- */
.menue-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.menue-toggle span {
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: var(--menue-burger); transition: transform .25s ease, opacity .2s ease, background-color .25s ease;
}
.menue-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menue-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menue-toggle[aria-expanded="true"] span { background: var(--menue-burger-offen); }

/* ---------- Schleier ---------- */
.menue-backdrop {
  display: none; position: fixed; inset: 0; z-index: 204;
  background: var(--menue-schleier); opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

/* ---------- Mobil: Panel von rechts ---------- */
@media (max-width: 860px) {
  .menue {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    height: 100vh; height: 100dvh; width: var(--menue-breite);
    background: var(--menue-hg); z-index: 205; overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .4rem;
    padding: calc(var(--menue-kopf) + var(--menue-oben) + 1.2rem) 1.5rem 2rem;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
    transform: translateX(100%); transition: transform .3s ease;
  }
  .menue.menue--offen { transform: translateX(0); }
  .menue > a:not(.btn) {
    color: var(--menue-farbe); font-size: 1.08rem; font-weight: 600;
    padding: .8em 0; border-bottom: 1px solid var(--menue-linie); text-decoration: none;
  }
  .menue > a:not(.btn):last-of-type { border-bottom: 0; }
  .menue > a.btn { margin-top: 1rem; text-align: center; justify-content: center; }
  .menue-toggle { display: flex; z-index: 210; }
  .menue-backdrop { display: block; }
  .menue-backdrop.menue--offen { opacity: 1; visibility: visible; }
  /* Header mit dem X-Knopf ueber den Schleier heben */
  body.menue-offen .header { z-index: 206; }
  /* Seite dahinter nicht scrollen */
  body.menue-offen { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .menue, .menue-backdrop, .menue-toggle span { transition: none; }
}