/*
 * Mangiare — gemeinsamer Seitenkopf fuer ALLE Seiten.
 *
 * Die Framer-Seiten brachten einen eigenen Kopf mit, der sich erst beim Scrollen
 * einblendete und den gruenen Rest des frueheren Bestell-Widgets enthielt (auf
 * dem Handy sprengte der Button die Zeile). Dieser Kopf ersetzt ihn ueberall,
 * damit Start-, Galerie-, Kontakt- und Speisekartenseite identisch aussehen.
 *
 * Eigener Namensraum `mgh-`, damit nichts mit Framers Klassen kollidiert.
 * Schriften (Forum, Satoshi) liefern die Seiten bereits mit.
 */
.mgh{
  --mgh-gold:#e2c544; --mgh-gold-hell:#eed35c; --mgh-bg:rgba(18,18,18,.94);
  --mgh-txt:#fff; --mgh-muted:#bfbfbf; --mgh-hoehe:74px;
  position:sticky; top:0; z-index:9000;
  background:var(--mgh-bg); backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:"Satoshi","Satoshi Placeholder",-apple-system,BlinkMacSystemFont,sans-serif;
}
.mgh *{box-sizing:border-box}
.mgh-in{
  max-width:1180px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:26px; height:var(--mgh-hoehe);
}
.mgh-brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.mgh-brand img{width:46px; height:46px; object-fit:contain; display:block}
.mgh-brand b{
  font-family:"Forum",Georgia,serif; font-weight:400; font-size:19px;
  letter-spacing:.04em; color:var(--mgh-gold);
}
.mgh-nav{display:flex; gap:24px; margin-left:auto; align-items:center}
.mgh-nav a{
  font-family:"Forum",Georgia,serif; font-size:17px; text-decoration:none;
  color:var(--mgh-txt); opacity:.9; transition:color .2s, opacity .2s;
}
.mgh-nav a:hover, .mgh-nav a[aria-current]{color:var(--mgh-gold); opacity:1}
.mgh-tel{font-size:15px; color:var(--mgh-muted); text-decoration:none; white-space:nowrap}
.mgh-tel:hover{color:var(--mgh-gold)}
.mgh-btn{
  display:inline-block; background:var(--mgh-gold); color:#1a1500; font-weight:700;
  font-size:15px; padding:11px 20px; border-radius:8px; text-decoration:none;
  border:1px solid var(--mgh-gold); line-height:1.2; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s;
}
.mgh-btn:hover{background:var(--mgh-gold-hell); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(226,197,68,.22)}
.mgh-burger{
  display:none; background:none; border:0; color:var(--mgh-txt); font-size:26px;
  cursor:pointer; padding:4px 10px; line-height:1; order:3; margin-left:auto;
}

/* Bestell-Button (GloriaFood). Das Widget faerbt `.glf-button` selbst gruen ein —
   deshalb hier mit !important die Optik der Seite durchsetzen. */
/* ewm2.js bringt zur Laufzeit eigene Masze mit (display:block, padding:20px),
   deshalb muss hier alles Layoutrelevante mit !important gesetzt werden. */
.mgh .glf-button{
  background:var(--mgh-gold) !important; color:#1a1500 !important;
  border:1px solid var(--mgh-gold) !important; cursor:pointer;
  display:inline-block !important; width:auto !important;
  padding:11px 20px !important; font-size:15px !important; font-weight:700 !important;
  border-radius:8px !important; line-height:1.2 !important; text-align:center !important;
  margin:0 !important; white-space:nowrap;
  -webkit-user-select:none; user-select:none;
}
.mgh .glf-button:hover{background:var(--mgh-gold-hell) !important}
/* Zweitknopf Tischreservierung: Umriss statt Vollflaeche, damit eindeutig
   bleibt, welcher der beiden der Hauptweg ist. */
.mgh .mgh-btn2{
  background:transparent !important; color:var(--mgh-gold) !important;
  border:1px solid rgba(226,197,68,.5) !important; font-weight:500 !important;
}
.mgh .mgh-btn2:hover{background:rgba(226,197,68,.12) !important}
/* Langer Text auf dem Desktop, kurzer auf dem Handy — sonst sprengt er die Zeile */
.mgh .mgh-nur-mobil{display:none !important}
/* Tischreservierung im Klappmenue — auf dem Desktop steht sie als Knopf oben */
.mgh .mgh-res-nav{display:none !important}

/* Umschaltpunkt liegt bei 1080px, nicht erst bei 760px: mit dem zweiten Knopf
   (Tischreservierung) passen Logo + fuenf Menuepunkte + Telefonnummer + zwei
   Knoepfe ab etwa 1100px nicht mehr nebeneinander — bei 1000px brach "Über uns"
   um und der zweite Knopf lief aus dem Bild. Unterhalb davon wandert die
   Navigation samt Tischreservierung ins Klappmenue, oben bleibt der kurze
   Bestellknopf. */
@media (max-width:1080px){
  .mgh-in{gap:14px; padding:0 16px}
  .mgh-tel{display:none}
  .mgh-btn{padding:9px 16px; font-size:14px}
  .mgh-nav{
    position:fixed; inset:var(--mgh-hoehe) 0 auto; flex-direction:column; gap:0;
    background:#171717; border-bottom:1px solid rgba(226,197,68,.18);
    padding:6px 0; margin:0; display:none;
  }
  .mgh-nav.offen{display:flex}
  .mgh-nav a{padding:14px 22px; width:100%; font-size:18px}
  /* Die Navigation ist hier fixiert positioniert, faellt also aus dem Fluss.
     Ohne das folgende auto-Margin klebte der Bestellknopf am Logo — er soll
     aber rechts neben dem Burger stehen. */
  .mgh-burger{display:block; margin-left:0}
  .mgh .mgh-nur-desktop{display:none !important}
  .mgh .mgh-nur-mobil{display:inline-block !important; margin-left:auto !important}
  .mgh .glf-button{padding:9px 16px !important; font-size:14px !important}
  /* Tischreservierung als letzter Eintrag im Klappmenue — sieht aus wie ein
     Menuepunkt, ist aber der GloriaFood-Knopf. */
  .mgh .mgh-res-nav{
    display:block !important; width:100% !important; text-align:left !important;
    padding:14px 22px !important; font-size:18px !important;
    font-family:"Forum",Georgia,serif !important; font-weight:400 !important;
    background:transparent !important; color:var(--mgh-gold) !important;
    border:0 !important; border-top:1px solid rgba(255,255,255,.08) !important;
    border-radius:0 !important; margin:0 !important;
  }
}
/* Erst auf echter Handybreite wird der Kopf auch flacher und das Logo kleiner —
   auf dem Tablet darf er in voller Groesse bleiben. */
@media (max-width:760px){
  .mgh{--mgh-hoehe:68px}
  .mgh-in{gap:12px; padding:0 14px}
  .mgh-brand img{width:38px; height:38px}
  .mgh-brand b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .mgh-btn, .mgh-nav a{transition:none}
}

/* Framers eigenen Kopf blendet mg-header.js aus (Klassennamen sind Hashes und
   aendern sich bei jedem Framer-Build, deshalb zur Laufzeit statt per Selektor). */
.mgh-aus{display:none !important}