/* ============================================================
   SMG Mobiles Menü
   Alles unter .smg-mm gekapselt, damit kein Theme-CSS stört.
   ============================================================ */

/* Gilt auch fuer die ausgelagerte Flaeche, die die Klasse selbst traegt. */
.smg-mm,
.smg-mm__panel{
  --smg-ink:#141519;
  --smg-ink-60:#5C5E64;
  --smg-line:rgba(20,21,26,.10);
  --smg-fill:rgba(20,21,26,.05);
  --smg-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --smg-head:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  box-sizing:border-box;
}
.smg-mm:not(.smg-mm__panel){position:relative;display:inline-flex;align-items:center}
.smg-mm *,.smg-mm *::before,.smg-mm *::after{box-sizing:border-box}
.smg-mm__panel *,.smg-mm__panel *::before,.smg-mm__panel *::after{box-sizing:border-box}

/* ---------- Hamburger ---------- */
.smg-mm__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:none;border-radius:10px;
  background:transparent;color:var(--smg-ink);cursor:pointer;
  transition:background .16s;
}
.smg-mm__toggle:hover{background:var(--smg-fill)}
.smg-mm__toggle:focus-visible{outline:3px solid var(--smg-mm-accent,#2E2BEE);outline-offset:2px}

.smg-mm__bars{position:relative;display:block;width:22px;height:16px}
.smg-mm__bars i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s ease,opacity .16s ease,top .22s ease;
}
.smg-mm__bars i:nth-child(1){top:0}
.smg-mm__bars i:nth-child(2){top:7px}
.smg-mm__bars i:nth-child(3){top:14px}

.smg-mm.is-open .smg-mm__bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.smg-mm.is-open .smg-mm__bars i:nth-child(2){opacity:0}
.smg-mm.is-open .smg-mm__bars i:nth-child(3){top:7px;transform:rotate(-45deg)}

/* ---------- Fläche ---------- */
.smg-mm__panel{
  position:fixed;left:0;right:0;bottom:0;z-index:2147482000;
  top:var(--smg-mm-top,0px);
  background:var(--smg-mm-bg,#FAFAF9);
  font-family:var(--smg-sans);color:var(--smg-ink);
  overflow-y:auto;overscroll-behavior:contain;
}
/* Die Flaeche ist sofort sichtbar – nur der Inhalt gleitet kurz herein.
   Laufen keine Animationen, steht trotzdem alles da. */
.smg-mm__panel .smg-mm__inner{animation:smg-mm-in .18s ease-out}
@keyframes smg-mm-in{from{opacity:.4;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .smg-mm__panel .smg-mm__inner{animation:none}
  .smg-mm__bars i{transition:none}
}

.smg-mm__inner{padding:22px 20px 40px;max-width:640px;margin:0 auto;width:100%}
.smg-mm__title{
  margin:0 0 14px;font-family:var(--smg-head);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(20,21,26,.4);
}
.smg-mm__nav{display:flex;flex-direction:column;gap:2px}

.smg-mm__item{
  display:flex;align-items:center;min-height:56px;padding:10px 4px;
  font-family:var(--smg-head);font-weight:700;font-size:22px;letter-spacing:-.02em;
  color:var(--smg-ink);text-decoration:none;border-bottom:1px solid var(--smg-line);
}
.smg-mm__item:last-child{border-bottom:none}
.smg-mm__item:active{opacity:.6}

.smg-mm__item--ghost,
.smg-mm__item--primary{
  justify-content:center;min-height:52px;margin-top:12px;padding:0 20px;
  border:none;border-radius:11px;font-size:16px;
}
.smg-mm__item--ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--smg-line)}
.smg-mm__item--primary{background:var(--smg-mm-accent,#2E2BEE);color:#fff}
.smg-mm__item--primary:hover{opacity:.92;color:#fff}

.smg-mm__item--quiet{
  min-height:44px;margin-top:18px;font-family:var(--smg-sans);font-weight:600;
  font-size:15px;color:var(--smg-ink-60);border-bottom:none;
}

/* Seite hinter der Fläche nicht mitscrollen lassen */
body.smg-mm-locked{overflow:hidden}