/* =====================================================================
   Sushi & more — eigene Styles (ergänzt Tailwind CDN)
   Farben: ink #0A0A0B · obsidian #111114 · graphite #1A1A1F
           bone #E8E4DC · sand #9A9285 · gold #C9A961 · crimson #8B1E2C
   ===================================================================== */

:root{
  --ink:#0A0A0B; --obsidian:#111114; --graphite:#1A1A1F;
  --bone:#E8E4DC; --sand:#9A9285; --gold:#C9A961; --crimson:#8B1E2C;
}

html{ scroll-padding-top:84px; }          /* fixe Nav nicht über Anker */
body{ overflow-x:hidden; }

/* ---- Einblend-Animationen ------------------------------------------ */
.fade-in{ animation:fadeUp 1s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .fade-in,.reveal{ animation:none; opacity:1; transform:none; transition:none; }
}

/* ---- Rabatt-Badges (Hero) ------------------------------------------ */
.discount-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid rgba(201,169,97,.45); background:rgba(201,169,97,.08);
  color:var(--bone); padding:.5rem .9rem; border-radius:999px;
  font-size:.78rem; letter-spacing:.02em;
}
.discount-badge b{ color:var(--gold); font-weight:600; }

/* Hero-Angebots-Badges: auffälliger und sofort verständlich. Die „10 %"
   sitzen in einem gefüllten Gold-Chip, der Rest steht auf dunklem Grund mit
   Goldrahmen, damit alles auch über dem Foto klar lesbar bleibt. */
.offer-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  max-width:24rem;
  background:rgba(17,17,20,.74);
  border:1px solid rgba(201,169,97,.55);
  border-radius:999px;
  padding:.4rem .95rem .4rem .4rem;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.offer-badge .offer-pct{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--ink);
  font-weight:700; font-size:.92rem; line-height:1; letter-spacing:.01em;
  padding:.34rem .58rem; border-radius:999px; white-space:nowrap;
}
.offer-badge .offer-label{
  color:var(--bone); font-size:.84rem; font-weight:500; letter-spacing:.02em;
  line-height:1.25; text-align:left;
}
/* Schlüsselwörter im Badge hervorheben: lenkt den Blick auf die Aktion */
.offer-badge .offer-hl{ color:var(--gold); font-weight:600; }

/* „Wir freuen uns auf Ihren Besuch!" mit zarten Sushistäbchen flankiert */
.besuch-line{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.7rem, 3vw, 1.4rem);
}
.besuch-line .chopsticks{
  flex:0 0 auto;
  width:clamp(2.4rem, 6.5vw, 3.6rem); height:auto;
  color:var(--gold); opacity:.78;
}
.besuch-line .chopsticks-right{ transform:scaleX(-1); }

/* Hero-Slideshow: 4 echte Fotos, sanfter Crossfade + leichter Ken-Burns-Zoom */
.hero-slideshow{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; will-change:opacity, transform;
  animation:heroSlide 28s infinite both;
}
.hero-slide:nth-child(1){ animation-delay:0s; }
.hero-slide:nth-child(2){ animation-delay:7s; }
.hero-slide:nth-child(3){ animation-delay:14s; }
.hero-slide:nth-child(4){ animation-delay:21s; }
@keyframes heroSlide{
  0%      { opacity:0; transform:scale(1.04); }
  5.357%  { opacity:1; }
  25%     { opacity:1; }
  30.357% { opacity:0; transform:scale(1.12); }
  100%    { opacity:0; transform:scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation:heroSlideFade 28s infinite both; }
  @keyframes heroSlideFade{
    0%{opacity:0} 5.357%{opacity:1} 25%{opacity:1} 30.357%{opacity:0} 100%{opacity:0}
  }
}

/* Hero: drei Wege zu uns, „Wir liefern" bewusst zuerst und in Gold */
.hero-modes{
  margin:1rem auto 0;
  max-width:34rem;
  font-size:.78rem; font-weight:400;
  letter-spacing:.05em; line-height:1.55;
  color:rgba(232,228,220,.8);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
@media (min-width:768px){
  .hero-modes{ font-size:.9rem; }
}
.hero-modes .sep{ color:var(--gold); opacity:.7; padding:0 .12em; }

/* ---- Vorteils-Streifen ---------------------------------------------- */
.perk{ border:1px solid rgba(255,255,255,.08); background:var(--graphite); }
.perk .perk-big{ color:var(--gold); font-weight:600; }

/* ---- Speisekarte: Sticky-Kategorie-Leiste -------------------------- */
/* Die Karte zeigt eine Kategorie zur Zeit. Die Leiste filtert die Ansicht
   und hebt die aktive Kategorie hervor. Beim Laden ist die erste Kategorie
   sichtbar, niemand muss erst etwas auswählen, um Gerichte zu sehen. Am
   Handy blättern Pfeile und ein Rand-Fade durch die Kategorien. */
#menu-nav{
  position:sticky; top:68px; z-index:30;
  display:flex; align-items:center; gap:.25rem;
  margin:0 -1.5rem 1.5rem; padding:.55rem 1rem;
  background:rgba(10,10,11,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.07);
}
#category-tabs{
  flex:1 1 auto; min-width:0;
  display:flex; flex-wrap:nowrap; gap:.4rem; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
#category-tabs::-webkit-scrollbar{ display:none; }
/* Rand-Fade nur, wenn die Leiste wirklich seitlich scrollbar ist */
#menu-nav.has-overflow #category-tabs{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  mask-image:linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}

/* Pfeile: nur sichtbar, wenn die Leiste überläuft (in der Regel am Handy) */
.tabs-arrow{
  display:none; flex:0 0 auto; cursor:pointer;
  width:2rem; height:2rem; padding:0; border-radius:999px;
  align-items:center; justify-content:center;
  background:rgba(26,26,31,.92); color:var(--bone);
  border:1px solid rgba(255,255,255,.12);
  transition:color .2s ease, border-color .2s ease, opacity .2s ease;
}
.tabs-arrow svg{ width:1rem; height:1rem; }
.tabs-arrow:hover{ color:var(--gold); border-color:var(--gold); }
#menu-nav.has-overflow .tabs-arrow{ display:inline-flex; }
.tabs-arrow.is-disabled{ opacity:.25; pointer-events:none; }
@media (min-width:1024px){
  #category-tabs{
    flex-wrap:wrap; justify-content:center; overflow:visible; gap:.5rem .4rem;
    -webkit-mask-image:none; mask-image:none;
  }
  /* Desktop: Tabs brechen um, kein Querscroll, also keine Pfeile */
  .tabs-arrow{ display:none !important; }
}
.tab{
  flex:0 0 auto; white-space:nowrap; cursor:pointer; background:transparent;
  padding:.5rem .9rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand); border:1px solid transparent; border-radius:2px;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.tab:hover{ color:var(--bone); }
.tab.tab-active{ color:var(--ink); background:var(--gold); border-color:var(--gold); font-weight:600; }

/* Kategorie-Notiz (z. B. „2 Stück") */
.cat-note{ color:var(--sand); font-size:.82rem; font-style:italic; }

/* ---- Speisekarte: Kategorie-Abschnitte ----------------------------- */
.menu-cat{ scroll-margin-top:120px; }
.menu-cat[hidden]{ display:none; }
/* sanfter Wechsel beim Umschalten der Kategorie */
@keyframes catEnter{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.menu-cat.cat-enter{ animation:catEnter .28s ease both; }
@media (prefers-reduced-motion: reduce){ .menu-cat.cat-enter{ animation:none; } }
.menu-cat-title{
  font-family:"Playfair Display", serif; font-weight:600;
  font-size:1.6rem; line-height:1.2; color:var(--bone); margin-bottom:.4rem;
}
@media (min-width:768px){ .menu-cat-title{ font-size:1.9rem; } }
.menu-cat .cat-note{ margin-top:-.1rem; margin-bottom:.6rem; }

/* ---- Speisekarte: Coachmark-Hinweis auf den Plus-Button ------------ */
/* Kein blockierendes Pop-up: ein kleiner Hinweis erscheint, sobald der Gast
   in die Karte scrollt, zeigt genau auf den ersten "+"-Button und verschwindet
   bei der ersten Aktion oder nach kurzer Zeit. Wird nur einmal gezeigt. */
.mh{
  position:absolute; z-index:60;
  display:flex; align-items:center; gap:.6rem;
  will-change:opacity;
  max-width:min(18rem, calc(100vw - 1.5rem));
  padding:.65rem .7rem;
  background:var(--graphite);
  border:1px solid rgba(201,169,97,.55);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  color:var(--bone);
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.mh.show{ opacity:1; transform:none; }
.mh-arrow{
  position:absolute; left:16px; width:14px; height:14px;
  background:var(--graphite);
  border-left:1px solid rgba(201,169,97,.55);
  border-top:1px solid rgba(201,169,97,.55);
  transform:rotate(45deg);
}
.mh-plus{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; line-height:1;
  border:1px solid rgba(201,169,97,.6); border-radius:999px; background:rgba(201,169,97,.12);
  color:var(--gold); font-size:1.15rem; font-weight:600;
}
.mh-text{ font-size:.85rem; line-height:1.3; }
.mh-text b{ color:var(--gold); font-weight:600; }
.mh-sub{ display:block; color:var(--sand); font-size:.76rem; margin-top:.1rem; }
.mh-x{
  flex:0 0 auto; margin-left:.1rem; align-self:flex-start;
  width:1.5rem; height:1.5rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--sand);
  border:1px solid rgba(255,255,255,.16); font-size:1rem; line-height:1; cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.mh-x:hover{ color:var(--bone); border-color:rgba(255,255,255,.35); }
/* Pulsierender Ring am echten "+"-Button, solange der Hinweis offen ist */
.menu-add.is-hinted{ animation:mhPulse 1.6s ease-out infinite; }
@keyframes mhPulse{
  0%{ box-shadow:0 0 0 0 rgba(201,169,97,.5); }
  70%{ box-shadow:0 0 0 9px rgba(201,169,97,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,169,97,0); }
}
@media (prefers-reduced-motion: reduce){
  .mh{ transition:none; }
  .menu-add.is-hinted{ animation:none; box-shadow:0 0 0 3px rgba(201,169,97,.4); }
}

/* ---- Speisekarte: Kategorie-Kopfbild (Schmuckfoto) ----------------- */
/* Foto-Band am Anfang passender Kategorien. Das Bild liegt hinter einem
   Verlauf, der unten in den Seitenhintergrund (ink) uebergeht; der Titel
   sitzt lesbar im dunklen Bereich. Die Fotos sind bewusst dunkel gehalten
   und fuegen sich so nahtlos in die Seite ein. */
.cat-hero{
  position:relative;
  margin:0 auto 2rem;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 50px rgba(0,0,0,.38);
  isolation:isolate;
}
.cat-hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.cat-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(10,10,11,.94) 0%, rgba(10,10,11,.62) 28%, rgba(10,10,11,.12) 58%, rgba(10,10,11,.22) 100%),
    linear-gradient(to right, rgba(10,10,11,.6) 0%, rgba(10,10,11,0) 58%);
}
.cat-hero-text{
  position:relative; z-index:2;
  width:100%;
  padding:clamp(1.1rem, 3vw, 1.75rem);
}
.cat-hero .menu-cat-title{ margin:0; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.cat-hero .cat-note{ margin:.4rem 0 0; color:var(--bone); opacity:.82; text-shadow:0 1px 10px rgba(0,0,0,.5); }
/* Ab groesseren Screens das Band im vollen 16:9 der Fotos lassen und die
   Breite begrenzen, damit man das Gericht ganz erkennt (kein flacher Streifen)
   und das Band nicht zu hoch wird. Am Handy bleibt es voll breit. */
@media (min-width:600px){
  .cat-hero{ max-width:680px; }
}

/* ---- Speisekarte: Gerichte-Liste ----------------------------------- */
.menu-list{ display:grid; grid-template-columns:1fr; gap:.2rem 3.5rem; }
@media (min-width:900px){ .menu-list{ grid-template-columns:1fr 1fr; } }

.menu-row{ padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.menu-row-head{ display:flex; align-items:baseline; gap:.75rem; }
.menu-nr{
  flex:0 0 auto; color:var(--gold); font-size:.78rem; font-weight:600;
  min-width:2.4rem; letter-spacing:.04em;
}
.menu-name{ font-weight:500; color:var(--bone); line-height:1.3; }
/* gepunkteter „Leader" zwischen Name und Preis – Speisekarten-Optik */
.menu-leader{ flex:1 1 auto; border-bottom:1px dotted rgba(154,146,133,.4); transform:translateY(-3px); min-width:1rem; }
.menu-price{ flex:0 0 auto; color:var(--bone); font-variant-numeric:tabular-nums; white-space:nowrap; }
.menu-desc{ color:var(--sand); font-size:.86rem; line-height:1.5; margin-top:.3rem; padding-left:2.4rem; }
.menu-meta{ color:var(--sand); font-size:.78rem; margin-top:.25rem; padding-left:2.4rem; }
.menu-row.no-nr .menu-desc, .menu-row.no-nr .menu-meta{ padding-left:0; }

/* ---- Code-Marker (Allergene / Zusatzstoffe) ------------------------ */
.menu-codes{ margin-left:.35rem; display:inline-flex; gap:.2rem; vertical-align:super; }
/* Reine Anzeige-Marker, kein Hover-Tooltip: Begriffe wie „Krebstiere"
   direkt am Gericht schrecken ab. Bedeutung steht in der Legende. */
.code{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.6rem; line-height:1; padding:.15rem .3rem; border-radius:3px;
  user-select:none; font-weight:600; border:1px solid transparent;
}
.code-all{ color:var(--gold); background:rgba(201,169,97,.12); border-color:rgba(201,169,97,.3); }   /* Allergen */
.code-add{ color:var(--sand); background:rgba(154,146,133,.12); border-color:rgba(154,146,133,.3); }  /* Zusatzstoff */

/* ---- Legende (Allergene & Zusatzstoffe) ---------------------------- */
.legend summary{ cursor:pointer; list-style:none; }
.legend summary::-webkit-details-marker{ display:none; }
.legend[open] .legend-chevron{ transform:rotate(180deg); }
.legend-chevron{ transition:transform .3s ease; }
.legend-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem 3rem; }
@media (min-width:768px){ .legend-grid{ grid-template-columns:1fr 1fr; } }
.legend-grid li{ color:var(--sand); font-size:.82rem; padding:.18rem 0; }
.legend-grid li b{ color:var(--gold); font-weight:600; margin-right:.4rem; }

/* ---- Mobile-Navigation --------------------------------------------- */
#mobile-menu{ transition:max-height .4s ease, opacity .3s ease; max-height:0; opacity:0; overflow:hidden; }
#mobile-menu.open{ max-height:420px; opacity:1; }

/* ---- Footer-Logo ---------------------------------------------------- */
.footer-logo{ width:120px; height:120px; object-fit:contain; }
@media (min-width:768px){ .footer-logo{ width:150px; height:150px; } }

/* ---- Speisekarte-Teaser auf der Startseite -------------------------- */
/* Appetithappen-Kategorien: dezente, edle Typo-Reihe statt Pillen.
   Goldene Mittelpunkte trennen die Begriffe wie auf einer feinen Karte. */
.menu-taster{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  row-gap:.4rem;
}
.menu-taster li{
  color:var(--bone);
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  white-space:nowrap;
}
.menu-taster li:not(:last-child)::after{
  content:"·"; color:var(--gold); font-weight:600;
  margin:0 1rem; opacity:.85;
}

/* ---- Plus-Button am Gericht (legt auf den Merkzettel) --------------- */
.menu-add{
  flex:0 0 auto; align-self:center; width:1.9rem; height:1.9rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,169,97,.5); border-radius:999px; background:rgba(201,169,97,.08);
  color:var(--gold); font-size:1.15rem; font-weight:600; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .12s ease;
}
.menu-add:hover{ background:var(--gold); color:var(--ink); }
.menu-add:active{ transform:scale(.88); }
.menu-add:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- Merkzettel: schwebender Button -------------------------------- */
.mz-fab{
  position:fixed; right:1rem; bottom:1rem; z-index:50;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1rem; border-radius:999px;
  border:1px solid rgba(201,169,97,.5); background:var(--graphite); color:var(--bone);
  cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:background .2s ease, transform .12s ease;
}
.mz-fab:hover{ background:#23232a; }
.mz-fab svg{ width:1.15rem; height:1.15rem; color:var(--gold); flex:0 0 auto; }
.mz-fab-label{ font-size:.8rem; letter-spacing:.04em; }
.mz-fab-total{ font-size:.8rem; color:var(--gold); font-variant-numeric:tabular-nums; }
.mz-fab-total:empty{ display:none; }
.mz-fab-count{
  min-width:1.3rem; height:1.3rem; padding:0 .35rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(201,169,97,.25); color:var(--gold); font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.mz-fab.has-items .mz-fab-count{ background:var(--gold); color:var(--ink); }
@keyframes mzPulse{ 0%{transform:scale(1);} 40%{transform:scale(1.09);} 100%{transform:scale(1);} }
.mz-fab.pulse{ animation:mzPulse .35s ease; }

/* ---- Merkzettel: Overlay + Panel ----------------------------------- */
.mz-backdrop{
  position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.mz-backdrop.open{ opacity:1; visibility:visible; }
.mz-panel{
  position:fixed; top:0; right:0; z-index:60; height:100%; width:min(92vw, 384px);
  display:flex; flex-direction:column;
  background:var(--obsidian); border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.mz-panel.open{ transform:none; }
.mz-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.25rem 1rem; border-bottom:1px solid rgba(255,255,255,.07); }
.mz-title{ font-family:"Playfair Display", serif; font-size:1.3rem; color:var(--bone); line-height:1.2; }
.mz-sub{ color:var(--gold); font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; margin-top:.3rem; }
.mz-close{ flex:0 0 auto; width:2rem; height:2rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:transparent; color:var(--bone); font-size:1.25rem; line-height:1; cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.mz-close:hover{ border-color:var(--gold); color:var(--gold); }

.mz-list{ list-style:none; margin:0; padding:.25rem 1.25rem; overflow-y:auto; flex:1 1 auto; }
.mz-empty{ color:var(--sand); font-size:.86rem; line-height:1.6; padding:2.5rem .5rem; text-align:center; }
.mz-row{ display:flex; align-items:center; justify-content:space-between; gap:.85rem; padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.mz-row-main{ min-width:0; }
.mz-name{ display:block; color:var(--bone); font-size:.9rem; line-height:1.3; }
.mz-line{ display:block; color:var(--sand); font-size:.76rem; margin-top:.2rem; font-variant-numeric:tabular-nums; }
.mz-qty{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; }
.mz-minus,.mz-plus{ width:1.75rem; height:1.75rem; border:1px solid rgba(201,169,97,.5); border-radius:999px; background:transparent; color:var(--gold); font-size:1rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease; }
.mz-minus:hover,.mz-plus:hover{ background:var(--gold); color:var(--ink); }
.mz-num{ min-width:1.2rem; text-align:center; color:var(--bone); font-variant-numeric:tabular-nums; }

.mz-foot{ border-top:1px solid rgba(255,255,255,.08); padding:1rem 1.25rem 1.25rem; }
.mz-total-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.mz-total-row > span:first-child{ color:var(--sand); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; }
.mz-total{ color:var(--bone); font-size:1.35rem; font-variant-numeric:tabular-nums; }
.mz-note{ color:var(--sand); font-size:.72rem; line-height:1.5; margin:.5rem 0 .9rem; }
.mz-call{ display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%; padding:.9rem 1rem; background:var(--gold); color:var(--ink); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; border-radius:2px; transition:background .2s ease; }
.mz-call:hover{ background:var(--bone); }
.mz-call svg{ width:1rem; height:1rem; }
.mz-actions{ display:flex; gap:.5rem; margin-top:.6rem; }
.mz-ghost{ flex:1 1 0; padding:.55rem .5rem; background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--sand); font-size:.74rem; cursor:pointer; border-radius:2px; transition:border-color .2s ease, color .2s ease; }
.mz-ghost:hover{ border-color:var(--gold); color:var(--bone); }

body.mz-lock{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .mz-fab.pulse{ animation:none; }
  .mz-panel{ transition:none; }
  .mz-backdrop{ transition:none; }
}

/* ---- „Bei uns vor Ort": Foto an die dunkle Seite anbinden ----------- */
/* Das helle Gastraum-Foto wirkte als grelles Rechteck. Wir nehmen die
   Belichtung leicht zurück, heben Kontrast und Farbe etwas an und legen
   einen sanften Verlauf darüber, der die Ränder (vor allem unten) in den
   Seitenhintergrund (ink) übergehen lässt. So fügt es sich genauso
   nahtlos ein wie die Kategorie-Köpfe der Speisekarte. Der Ausschnitt
   sitzt etwas links: Wandbild, Sitzbank und die warmen Lampen im Blick. */
.vor-ort{
  position:relative;
  overflow:hidden;
  background-position:36% 50%;
  filter:brightness(.9) contrast(1.06) saturate(1.07);
}
.vor-ort::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(130% 105% at 40% 40%, rgba(10,10,11,0) 50%, rgba(10,10,11,.5) 100%),
    linear-gradient(to bottom, rgba(10,10,11,0) 52%, rgba(10,10,11,.5) 100%);
}