/* =====================================================================
   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).

   Seit 16.09.2026 (Joe Knauer): UNTERMENUES. Markup siehe README —
   <div class="menue-gruppe"> mit Hauptlink, Pfeil-Knopf und
   <div class="menue-untermenue">. Desktop: Aufklappen bei Hover/Fokus/
   Klick auf den Pfeil. Mobil: Pfeil klappt die Eintraege im Panel auf.
   Seiten ohne Gruppen bleiben unveraendert.
   ===================================================================== */
/* 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 */
  --menue-klapp-hg: var(--menue-hg);       /* Flaeche des Desktop-Aufklappmenues */
  --menue-klapp-hover: var(--menue-linie); /* Zeile unter der Maus im Aufklappmenue */
}

/* ---------- 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;
}

/* ---------- Untermenues: gemeinsame Teile ---------- */
.menue-gruppe { position: relative; display: flex; align-items: center; }
.menue-gruppe__pfeil {
  background: none; border: 0; cursor: pointer; padding: 6px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; color: inherit; line-height: 0;
}
.menue-gruppe__pfeil::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.menue-gruppe--offen > .menue-gruppe__pfeil::before { transform: translateY(2px) rotate(225deg); }

/* ---------- Desktop: Aufklappmenue unter dem Hauptlink ---------- */
@media (min-width: 861px) {
  .menue-untermenue {
    position: absolute; top: 100%; left: 0; min-width: 250px; margin-top: 8px; padding: .5rem 0;
    background: var(--menue-klapp-hg); border: 1px solid var(--menue-linie); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16); display: none; z-index: 70;
  }
  /* unsichtbare Bruecke ueber die 8 px Luecke, sonst klappt es beim Mauswechsel zu */
  .menue-gruppe::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
  .menue-gruppe:hover > .menue-untermenue,
  .menue-gruppe:focus-within > .menue-untermenue,
  .menue-gruppe--offen > .menue-untermenue { display: block; }
  .menue-untermenue a {
    display: block; padding: .5em 1.1em; white-space: nowrap; font-weight: 600;
    color: var(--menue-farbe); text-decoration: none;
  }
  .menue-untermenue a:hover, .menue-untermenue a:focus-visible { background: var(--menue-klapp-hover); }
  .menue-untermenue a[aria-current="page"] { font-weight: 800; }
  /* letzte Gruppe: nach links aufklappen, damit nichts aus dem Fenster ragt */
  .menue-gruppe--rechts > .menue-untermenue { left: auto; right: 0; }
}

/* ---------- 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; }
  /* Gruppen im Panel: Hauptlink + Pfeil in einer Zeile, Eintraege darunter aufklappbar */
  .menue-gruppe { flex-wrap: wrap; border-bottom: 1px solid var(--menue-linie); }
  .menue-gruppe > a { flex: 1; color: var(--menue-farbe); font-size: 1.08rem; font-weight: 600; padding: .8em 0; text-decoration: none; }
  .menue-gruppe__pfeil { width: 44px; height: 44px; color: var(--menue-farbe); }
  .menue-untermenue { display: none; width: 100%; padding: 0 0 .5em .9rem; }
  .menue-gruppe--offen > .menue-untermenue { display: block; }
  .menue-untermenue a {
    display: block; color: var(--menue-farbe); font-size: 1rem; font-weight: 500;
    padding: .55em 0; text-decoration: none; border-top: 1px solid var(--menue-linie); white-space: normal;
  }
  .menue-untermenue a[aria-current="page"] { font-weight: 800; }
  .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, .menue-gruppe__pfeil::before { transition: none; }
}