/* ==========================================================================
   Handy-Menü (Slide-in von rechts) -- bewusst in einer eigenen Datei, damit
   es nicht mit dem restlichen Layout in style.css durcheinanderkommt.
   Berücksichtigt sowohl Android als auch iPhone (u. a. sichere Bereiche für
   Notch/Home-Indikator, ausreichend große Tippflächen).
   ========================================================================== */

/* Hamburger-Button: schwebt dauerhaft unten rechts über der ganzen Seite
   (nicht nur im Kopfbereich) -- so bleibt das Menü beim Scrollen immer mit
   dem Daumen erreichbar, ohne dass das Hero-Foto dafür fixiert werden muss.
   Standardmäßig unsichtbar, erscheint nur unterhalb der Mobile-Breakpoint-
   Grenze (siehe Media Query weiter unten). */
.mobile-menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:52px;
  height:52px;
  padding:0;
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  background:var(--ink);
  border:none;
  border-radius:50%;
  box-shadow:0 8px 22px rgba(10,16,28,.35);
  cursor:pointer;
  z-index:997;
}
.mobile-menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}

/* Button-Zustand "Menü offen": aus den drei Balken wird ein X. */
.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-menu-toggle.is-open span:nth-child(2){opacity:0;}
.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Abgedunkelter Hintergrund hinter dem Slide-in-Menü. */
.mobile-menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,16,28,.5);
  z-index:998;
  opacity:0;
  transition:opacity .25s ease;
}
.mobile-menu-overlay.is-open{display:block;opacity:1;}

/* Das eigentliche Slide-in-Menü: kommt von rechts, volle Höhe. */
.mobile-menu-drawer{
  display:none;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(84vw, 340px);
  background:#fff;
  z-index:999;
  transform:translateX(100%);
  transition:transform .3s ease;
  flex-direction:column;
  overflow-y:auto;
  box-shadow:-8px 0 30px rgba(10,16,28,.25);
  /* Sicherer Abstand für iPhones mit Notch/Dynamic Island bzw. unterer
     Wischleiste -- auf Android wirkungslos, aber unschädlich. */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-right:env(safe-area-inset-right);
}
.mobile-menu-drawer.is-open{display:flex;transform:translateX(0);}

.mobile-menu-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 14px;
  border-bottom:1px solid #EEF3FA;
}
.mobile-menu-logo{height:34px;width:auto;}
.mobile-menu-close{
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:#F5F8FC;
  color:#142441;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mobile-menu-links{
  display:flex;
  flex-direction:column;
  padding:8px 10px 24px;
}
.mobile-menu-links a{
  display:flex;
  align-items:center;
  padding:15px 12px;
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:16px;
  color:#142441;
  text-decoration:none;
  border-radius:12px;
  /* Mindestens 44px hohe Tippfläche (Apple-Empfehlung) bzw. 48dp (Android) --
     mit padding oben/unten schon erreicht, min-height zusätzlich zur Sicherheit. */
  min-height:44px;
}
.mobile-menu-links a:active{background:#F5F8FC;}
.mobile-menu-links a + a{border-top:1px solid #F5F8FC;}
.mobile-menu-cart{
  margin-top:10px;
  justify-content:center;
  background:#FF5D73;
  color:#fff !important;
  border-radius:30px !important;
  border-top:none !important;
}
.mobile-menu-links .cart-badge{
  margin-left:8px;
  background:#fff;
  color:#FF5D73;
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
}

/* Verhindert Scrollen des Hintergrunds, während das Menü offen ist. */
body.mobile-menu-open{overflow:hidden;}

/* ---- Mobile-Breakpoint: hier schaltet die Ansicht um ------------------- */
@media(max-width:820px){
  header.site .nav-links{display:none;}
  .mobile-menu-toggle{display:flex;}
}