/* Mobile Navigation – Mittelstrimmig (stable) */

/* ---------- Toggle (nur Mobile) ---------- */
.mm-toggle{
  appearance:none;border:0;cursor:pointer;
  display:none; /* Standard: versteckt – wird unter 1024px eingeblendet */
  align-items:center;gap:.6rem;
  padding:.55rem .85rem;border-radius:.75rem;
  background:rgba(0,0,0,.18);color:#fff;font-weight:700;line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
}
.mm-toggle:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }
.mm-bars{ width:1.25rem; height:1rem; position:relative; }
.mm-bars::before,.mm-bars::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:currentColor; border-radius:2px;
}
.mm-bars::before{ top:0; box-shadow:0 .4rem 0 0 currentColor; }
.mm-bars::after{ bottom:0; }

/* ---------- Drawer (Standard: ZU) ---------- */
/* WICHTIG: display:none !important – damit der Drawer nie ungefragt sichtbar ist */
.mm-drawer{
  display:none !important;
  position:fixed; top:0; right:0; bottom:0;
  width:88vw; max-width:380px;
  background:#fff; z-index:1100;
  transform:translate3d(100%,0,0);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
  box-shadow:-12px 0 28px rgba(0,0,0,.28);
}

/* Falls im Markup hidden vorhanden ist */
.mm-drawer[hidden]{ display:none !important; }

/* Inhalt im Drawer */
.mm-scroll{ height:100%; overflow:auto; padding:1rem; }

/* Offen-Zustand */
.mm-drawer.is-open{
  display:block !important;
  transform:translate3d(0,0,0);
  opacity:1; visibility:visible; pointer-events:auto;
}

/* ---------- Backdrop ---------- */
.mm-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.38);
  z-index:1090; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.mm-backdrop.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

/* ---------- Body-Lock beim offenen Menü ---------- */
body.nav-open{ overflow:hidden; touch-action:none; }

/* ---------- Styling im Drawer ---------- */
.mm-drawer .gva-menu{ list-style:none; margin:0; padding:.25rem 0; }
.mm-drawer .gva-menu > li{
  margin:0 0 .25rem 0; border-radius:.75rem; border:1px solid #e6ece7;
  overflow:hidden; background:#f9fbf9;
}
.mm-drawer .gva-menu > li > a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; text-decoration:none; color:#123b25; font-weight:700;
}
.mm-drawer .gva-submenu{ margin:0; padding:.25rem .5rem .75rem; list-style:none; }
.mm-drawer .gva-submenu > li > a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem .75rem; border-radius:.6rem; text-decoration:none;
  background:#fff; border:1px dashed #dfe8e2; color:#173f29; font-weight:600;
}
.mm-drawer .gva-submenu > li + li{ margin-top:.45rem; }

/* ---------- Sichtbarkeit / Breakpoints ---------- */

/* Mobile/Tablet: Toggle zeigen, Desktop-Menü ausblenden */
@media (max-width: 1023.98px){
  .mm-toggle{ display:inline-flex; }
  .gva-nav.menu-desktop{ display:none !important; }
}

/* Ab Desktop: Toggle/Drawer/Backdrop vorsichtshalber ausblenden */
@media (min-width: 1024px){
  .mm-toggle{ display:none !important; }
  .mm-drawer,.mm-backdrop{ display:none !important; }
}
/* ===========================
   Main-Nav: Dropdowns nach links öffnen (Desktop)
   =========================== */
@media (min-width: 992px) {
  /* sichere Positionierung des Eltern-LI */
  .menu--main > .menu > li.menu-item--expanded,
  .primary-nav .menu > li.menu-item--expanded {
    position: relative;
  }

  /* Panel an rechter Kante andocken → öffnet optisch nach links */
  .menu--main > .menu > li.menu-item--expanded > ul.menu,
  .primary-nav .menu > li.menu-item--expanded > ul.menu {
    left: auto !important;
    right: 0 !important;
    transform-origin: top right;
  }

  /* (optional) kleiner Zeiger/Arrow im Panel, falls vorhanden, nach rechts versetzen */
  .menu--main > .menu > li.menu-item--expanded > ul.menu::before,
  .primary-nav .menu > li.menu-item--expanded > ul.menu::before {
    left: auto;
    right: 1.5rem;
  }
}

/* Mobile Navigation NICHT ändern */
@media (max-width: 991.98px) {
  .menu--main > .menu > li.menu-item--expanded > ul.menu,
  .primary-nav .menu > li.menu-item--expanded > ul.menu {
    right: auto !important;
    left: 0 !important;
    transform-origin: top left;
  }
}