/* mobile-home.css – wird NUR auf Smartphones geladen (max-width: 768px) */

header.topbar,
.topbar,
header[aria-label="Hauptnavigation"]{
  display:none !important;
}

/* Desktop-Hero (inkl. Text) in Mobile ausblenden */
main.hero,
.hero{
  display:none !important;
}

/* Mobile Landing aktivieren */
.mobile-home{
  display:flex !important;
  position:relative;
  /* "svh" vermeidet den typischen 100vh-Scroll-Bug auf Mobile (Adressleiste) */
  min-height:100svh;
  align-items:stretch;
  justify-content:center;
  /* Platz für Bottombar + Safe-Area, ohne unnötige Extra-Höhe */
  --bottombar-h: 64px;
  padding: 12px 14px calc(var(--bottombar-h) + 10px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  overflow:hidden;
}

.mobile-home__bg{
  position:absolute;
  inset:0;
  background-image: url('hero-bg.png');
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: blur(2px) saturate(1.06);
  opacity: 0.98;
}

.mobile-home__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.22), rgba(0,0,0,0.72));
}

.mobile-home__inner{
  position:relative;
  z-index:2;
  width:min(520px, 100%);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap: 8px;
  align-items:center;
  /* Fokus: Logo im Mittelpunkt, Buttons kompakt darunter */
  justify-content:center;
  /* füllt den verfügbaren Bereich der Mobile-Section (nach Padding) */
  flex: 1;
  min-height: 0;
}

.mobile-home__logoLink{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  padding: 4px 0;
  border-radius: 16px;
}

.mobile-home__logo{
  /* Logo skaliert dynamisch nach Höhe des Viewports, damit kein Scroll entsteht */
  /* Logo skaliert dynamisch nach Hoehe des Viewports, damit kein Scroll entsteht */
  /* groesser (Fokus): trotzdem mit Viewport-Hoehe begrenzt, damit es ohne Scroll passt */
  width: min(820px, 96vw);
  max-height: clamp(300px, 52svh, 560px);
  height:auto;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.60));
  margin: 0 auto;
}

/* Buttons: dezent & elegant, ohne Scroll (2er-Reihen) */
.mobile-home__actions{
  width:100%;
  max-width: 420px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items:stretch;
}

/* Speisekarte mittig unter den zwei Hauptbuttons */
.mobile-home__actions .btn--menu{
  grid-column: 1 / -1;
  justify-self: center;
  width: min(320px, 78%);
}
/*
  Mobile Buttons (nur innerhalb der Mobile-Startseite)
  Ziel: etwas eleganter/luftiger, ohne Desktop oder andere Seiten zu beeinflussen.
*/
.mobile-home .btn{
  width:100%;
  max-width: 100%;
  height:auto;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .1px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.mobile-home .btn:active{
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(0,0,0,.20);
}

/* Primaere Buttons (Bestellen / Reservierung) bewusst etwas groesser */
.mobile-home__actions .btn{
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

/* Sekundaere Buttons (Kontakt / Ueber Uns) kleiner & dezenter */
.mobile-home__secondary .btn{
  /* echte Groesse kleiner (nicht nur Schrift) */
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;
  opacity: .94;
}


/* Alternative Button-Klasse, da im HTML "btn--alt" verwendet wird */
.mobile-home .btn--alt{
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(242,140,27,.75);
  backdrop-filter: blur(6px);
}
.mobile-home .btn--alt:hover{ filter: brightness(1.03); }

.mobile-home .btn--accent{
  border-color: rgba(0,0,0,.22);
}
.mobile-home__actions .btn{
  /* grid handled */
}

/* IMPORTANT: In styles.css, .btn--ghost is hidden at very small widths (<=520px).
   For the mobile landing page we always want to show ALL buttons. */
.mobile-home .btn,
.mobile-home .btn--ghost,
.mobile-home .btn--alt{
  display:inline-flex !important;
}

/* Kontakt / Über uns als Buttons */
.mobile-home__secondary{
  width:100%;
  max-width: 420px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items:stretch;
  margin-top: 2px;
}
.mobile-home__secondary .btn{ /* grid handled */ }

/* Sehr schmale Geräte: Buttons untereinander, aber weiterhin kompakt */
@media (max-width: 360px){
  .mobile-home__actions,
  .mobile-home__secondary{ grid-template-columns: 1fr; }

  .mobile-home__actions .btn--menu{ width: 100%; }
}

/* Bottombar unten fixieren */
footer.bottombar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index: 60;
}
/* Kein zusätzliches body-padding nötig, da die Mobile-Section selbst Platz lässt */
body{ padding-bottom: 0; }


/* Debug entfernt */