/* ============================================================
   JOE PEÑA'S — DESIGN SYSTEM
   Verbindliche Quelle: Corporate Design Baranek-Renger.
   Es werden ausschließlich diese vier Markenfarben und die
   beiden Markenschriften verwendet.

   FARBEN     HEX        Rolle auf dieser Seite
     Schwarz  #000000    Bühne / Seitengrund, Schrift auf Gelb
     Gelb     #e9b127    Überschriften, CTAs, Eyebrows, Icons
     Beige    #f5eac7    Flächen als Schleier, Trennlinien, Hover auf Gelb
     Weiss    #ffffff    Fließtext auf Dunkel

   Flächen und Abstufungen entstehen ausschließlich über die
   Deckkraft dieser vier Werte — Karten sind ein Beige-Schleier
   auf Schwarz, kein eigener Farbton. Es kommt kein Wert
   außerhalb der Liste hinzu.

   SCHRIFTEN
     Gin (400)        nur Titel und Headlines
     Montserrat       Fließtext (400) sowie Labels und Buttons
   ============================================================ */

/* Beide Schriften liegen lokal in assets/fonts/ — kein Google-Fonts-Abruf,
   damit ohne Einwilligung keine Verbindung zu Dritten entsteht. */
@font-face{
  font-family:"Gin";
  src:url("../fonts/gin-regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-v26-latin-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-v26-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* --- Markenfarben --- */
  --jp-black:  #000000;   /* Schwarz */
  --jp-gold:   #e9b127;   /* Gelb */
  --jp-beige:  #f5eac7;   /* Beige */
  --jp-white:  #ffffff;   /* Weiss */
  /* Schriftfarbe auf Dunkel: Weiss statt Beige. Beige liegt bei hellen
     Motiven und auf der grünen Kachelfläche zu dicht am Untergrund, dort
     war der Text schwer zu lesen. Der Name bleibt, damit die rund 80
     Fundstellen im Blatt nicht angefasst werden müssen; Beige selbst
     bleibt als Flächen- und Linienton (siehe unten) erhalten. */
  --jp-cream:  var(--jp-white);
  --jp-green-dark: #313010;  /* Grün – dunkel: Flächen der Wochenaktions- und Bewertungskarten */

  /* --- Flächen: Beige-Schleier auf Schwarz, kein neuer Farbton --- */
  --jp-surface:       rgba(245,234,199,0.06);  /* Karten, Panels */
  --jp-surface-hover: rgba(245,234,199,0.12);  /* angehobene Fläche */
  --jp-charcoal:      var(--jp-surface);       /* Altname, gleiche Fläche */

  /* --- Abstufungen = dieselben Werte mit Deckkraft --- */
  /* Hover auf gelben Flächen: Beige — Gelb auf Gelb gäbe keine Rückmeldung.
     Bleibt ausdrücklich Beige, auch nachdem der Fließtext auf Weiss steht. */
  --jp-gold-light: #f5eac7;
  --jp-cream-dim:  rgba(255,255,255,0.80);     /* Sekundärtext */
  --jp-line:       rgba(245,234,199,0.14);     /* Trennlinien */
  --jp-glow:       rgba(233,177,39,0.16);      /* warmer Lichtschein */
  --jp-maroon:     var(--jp-gold);             /* Altname für Akzentkanten */
  --jp-maroon-deep:var(--jp-black);            /* dunkles Ende der Verläufe */

  /* --- Typografie --- */
  /* Nur die beiden Markenschriften; als Rückfall allein die generische
     Familie — keine konkrete Fremdschrift im Stapel. */
  --f-display: "Gin", sans-serif;        /* nur Titel und Headlines */
  --f-eyebrow: "Montserrat", sans-serif; /* Kicker, Labels, Buttons */
  --f-body:    "Montserrat", sans-serif; /* Fließtext */

  --radius-s: 2px;
  --radius-m: 4px;
  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* Solange ein Dialog offen ist, darf die Seite dahinter nicht mitscrollen.
   Die Klasse setzt main.js, sobald irgendein <dialog> geöffnet wird. */
body.modal-open{ overflow:hidden; }

body{
  margin:0;
  /* Das geschlossene Mobil-Menü steht per translateX(100%) rechts neben dem
     Sichtfeld. Ohne diese Klammer lässt sich in einigen Browsern dorthin
     scrollen — sichtbar als schwarzer Block rechts. */
  overflow-x:hidden;
  background:var(--jp-black);
  color:var(--jp-white);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

:focus-visible{
  outline:2px solid var(--jp-gold);
  outline-offset:3px;
}

/* --- Typografische Bausteine --- */
.eyebrow{
  font-family:var(--f-eyebrow);
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size:0.8rem;
  color:var(--jp-gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--jp-gold);
  display:inline-block;
}

h1,h2,h3,.h-display{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.98;
  margin:0.35em 0 0;
  color:var(--jp-white);
}
/* Seitentitel in Gelb — wie die H1 der Hauptseite joepenas.de */
h1{ color:var(--jp-gold); }
h1{ font-size:clamp(2.6rem, 6vw, 5.2rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.4rem); }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.7rem); }

.lede{
  font-size:1.05rem;
  color:var(--jp-cream-dim);
  max-width:56ch;
}
/* h2/h3 tragen kein eigenes margin-bottom — direkt danach klebte die
   Lede sonst am Titel (z. B. Pasaporte, Feiern & Gruppen). */
.intro-text h2 + .lede, .intro-text h3 + .lede{ margin-top:16px; }

.section{
  padding:clamp(56px,9vw,110px) 0;
}
.section-head{
  margin-bottom:clamp(28px,5vw,48px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}
/* Text rechts auf einer Linie mit dem Titel links: gleicher Fußpunkt (keine eigene Absatz-Marge) bzw. dieselbe
   Grundlinie der letzten Zeile, wo der Browser das kann. */
.section-head .lede{ margin-bottom:0; }
@supports (align-items: last baseline){
  .section-head{ align-items:last baseline; }
}

/* ============================================================
   ABSCHNITTS-FARBRHYTHMUS
   Drei Flächen im festen Wechsel — Schwarz (Seitengrund, keine
   Klasse nötig) → Creme → Oliv → Schwarz … — ohne Trennlinien
   zwischen den Abschnitten; die Fläche selbst trennt.
   `.section-cream` kippt die Textfarbe auf Schwarz: alles, was
   ohne eigene Farbe vom Seitengrund erbt, wird automatisch dunkel.
   Nur Elemente mit einer EXPLIZITEN hellen Farbe brauchen hier
   eine eigene Zeile.
   ============================================================ */
.section-olive{ background:var(--jp-green-dark); }
.section-cream{ background:var(--jp-beige); color:var(--jp-black); }

.section-cream h1, .section-cream h2, .section-cream h3{ color:var(--jp-black); }
/* .eyebrow bleibt überall Gold (Markenfarbe) — keine Creme-Ausnahme nötig. */
.section-cream .showcase-panel h3{ color:var(--jp-white); }
.section-cream .lede{ color:rgba(0,0,0,0.72); }
.section-cream .intro-text p{ color:var(--jp-black); }
.section-cream .btn-ghost{ border-color:rgba(0,0,0,0.3); color:var(--jp-black); }
.section-cream .btn-ghost:hover{ border-color:var(--jp-black); background:rgba(0,0,0,0.06); color:var(--jp-black); }

/* --- Kontakt/Reservierung: Zeilen, Icons und Embed-Hinweistext --- */
.section-cream .reserve-info .row svg{ color:var(--jp-black); }
.section-cream .reserve-info .row span{ color:rgba(0,0,0,0.7); }
.section-cream .info-block .row span:first-child{ color:rgba(0,0,0,0.7); }
.section-cream .info-block .row.job-row > div span:first-child{ color:var(--jp-black); }
.section-cream .info-block .row.job-row > div span:last-child{ color:rgba(0,0,0,0.7); }
.section-cream #reservation-embed p{ color:rgba(0,0,0,0.7); }
/* .btn-primary hellt beim Hover normalerweise auf Beige auf — auf der
   Creme-Fläche (dieselbe Farbe) würde der Knopf damit verschwinden.
   Hier dunkelt er stattdessen leicht ab, bleibt aber golden. */
.section-cream .btn-primary:hover{ background:var(--jp-gold); filter:brightness(0.92); }
.section-cream .map-route:hover{ background:var(--jp-gold); filter:brightness(0.92); }

/* --- Speisekarte: Ladehinweis und Detailtexte, die noch Helltöne trugen --- */
.section-cream .menu-status{ color:rgba(0,0,0,0.7); }
.section-cream .menu-group-desc{ color:rgba(0,0,0,0.65); }
.section-cream .menu-options-label{ color:rgba(0,0,0,0.6); }
.section-cream .menu-variants li,
.section-cream .menu-options li{ color:rgba(0,0,0,0.7); }

/* --- Signatur-Motiv: der Rabe (Joe's Wappentier) als wiederkehrender Trenner --- */
.raven-divider{
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin:0 auto; padding:8px 0;
  color:var(--jp-gold);
}
.raven-divider .line{ height:1px; width:64px; background:var(--jp-line); }
.raven-divider svg{ width:26px; height:26px; opacity:0.9; }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-eyebrow);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.86rem;
  padding:15px 26px;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--jp-gold);
  color:var(--jp-black);
}
/* Gelbe Flächen wechseln beim Hover nur den Farbwert — kein Ring, kein
   Schatten, kein Rahmen. */
.btn-primary:hover{ background:var(--jp-gold-light); box-shadow:none; border-color:transparent; }
.btn-ghost{
  background:transparent;
  color:var(--jp-cream);
  border-color:var(--jp-line);
}
.btn-ghost:hover{ border-color:var(--jp-gold); color:var(--jp-gold); }
.btn-block{ width:100%; justify-content:center; }
/* Montserrat baut deutlich breiter als eine kondensierte Schrift. Auf schmalen
   Geräten müssen lange Beschriftungen deshalb umbrechen dürfen — sonst schiebt
   das `white-space:nowrap` aus .btn den Knopf über den Bildschirmrand hinaus
   (gemessen an „Jetzt auf Google bewerten" bei 360px). */
@media (max-width: 480px){
  .btn{ white-space:normal; text-align:center; letter-spacing:0.09em; }
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }

/* ============================================================
   HEADER / NAVIGATION (global — Haupt- & Standortseiten)
   ============================================================ */
/* Hintergrund und Weichzeichner liegen auf einem Pseudo-Element, nicht auf
   dem Header selbst: `backdrop-filter` macht ein Element zum Bezugsrahmen für
   position:fixed darunter — das Mobil-Menü hätte sich sonst an der 82px hohen
   Kopfzeile statt am Sichtfeld ausgerichtet und wäre als schmaler schwarzer
   Streifen erschienen. */
.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--jp-line);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:82px;
  /* Etwas breiter als der Inhaltscontainer: die volle Desktop-Navigation
     braucht ~1070px und würde sonst unter den Reservieren-Button laufen. */
  max-width:1320px;
}
.brand{
  display:flex; align-items:center; gap:14px;
  flex-shrink:0; white-space:nowrap;
  font-family:var(--f-display);
  font-size:1.15rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.brand > a{ display:flex; align-items:center; gap:10px; }
.brand img{ width:32px; height:32px; display:block; border-radius:50%; flex-shrink:0; }

/* Auf sehr schmalen Geräten teilen sich Wortmarke, Standort-Badge und
   Menüknopf 280px Innenbreite. Montserrat baut breiter als die zuvor
   verwendete kondensierte Schrift — die Zeile darf hier daher enger setzen
   und die Wortmarke mitschrumpfen, sonst wird der Menüknopf hinausgeschoben. */
@media (max-width: 400px){
  .site-header .wrap{ gap:10px; }
  .brand{ flex-shrink:1; min-width:0; gap:9px; font-size:1rem; }
  .brand img{ width:28px; height:28px; }
  .loc-tag{ font-size:0.62rem; letter-spacing:0.08em; padding:5px 6px 5px 9px; }
}

/* --- Standort-Wechsler (Standort-Badge + Dropdown) --- */
.loc-switcher{ position:relative; }
.loc-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:none;
  font-family:var(--f-eyebrow);
  font-size:0.72rem;
  letter-spacing:0.16em;
  color:var(--jp-gold-light);
  border:1px solid var(--jp-line);
  padding:5px 8px 5px 12px;
  border-radius:20px;
  text-transform:uppercase;
  transition:border-color .18s ease, background .18s ease;
}
.loc-tag svg{ width:12px; height:12px; transition:transform .2s ease; flex-shrink:0; }
.loc-switcher:hover .loc-tag,
.loc-tag[aria-expanded="true"]{ border-color:var(--jp-gold); background:rgba(233,177,39,0.08); }
.loc-switcher.is-open .loc-tag svg{ transform:rotate(180deg); }
/* Aufklappmenüs stehen auf Schwarz und deckend — der Rahmen in Beige-14%
   trennt sie vom Seitengrund. */
.loc-switcher-panel{
  position:absolute; top:calc(100% + 14px); left:0;
  min-width:230px;
  background:var(--jp-black);
  border:1px solid var(--jp-line);
  border-radius:var(--radius-m); padding:8px; box-shadow:0 18px 40px rgba(0,0,0,0.45);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:50;
}
.loc-switcher.is-open .loc-switcher-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* Das Panel hängt am Standort-Badge und ragte auf schmalen Geräten über den
   rechten Rand hinaus — auch geschlossen, denn zur Seitenbreite zählt es
   trotzdem. Unter 480px wird es deshalb an der rechten Kante ausgerichtet
   und auf die Bildschirmbreite begrenzt. */
@media (max-width: 480px){
  .loc-switcher-panel{
    left:auto; right:0;
    min-width:0; width:max-content; max-width:calc(100vw - 32px);
  }
}
.loc-switcher-panel a{
  padding:10px 14px; border-radius:4px; font-size:0.88rem;
  color:var(--jp-cream-dim); white-space:nowrap; display:block;
  transition:color .14s ease;
}
/* Hover färbt nur die Schrift gelb — auf schwarzem Grund braucht es dafür
   keine zusätzliche Fläche. */
.loc-switcher-panel a:hover{ color:var(--jp-gold); }
.loc-switcher-back{
  display:flex !important; align-items:center; gap:8px;
  border-bottom:1px solid var(--jp-line); border-radius:0 !important;
  margin-bottom:4px; padding-bottom:12px !important;
}
.loc-switcher-back svg{ width:15px; height:15px; flex-shrink:0; }
.loc-switcher-label{
  padding:8px 14px 4px; font-family:var(--f-eyebrow); font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.62);
}
/* Der aktuelle Standort ist bereits markiert — er bekommt bewusst keine
   Hover-Reaktion, man ist ja schon dort. */
.loc-switcher-current,
.loc-switcher-current:hover{
  display:flex !important; flex-direction:column; gap:2px;
  color:var(--jp-gold) !important; background:rgba(233,177,39,0.1);
}
.loc-switcher-current small{ color:var(--jp-cream-dim); font-size:0.78rem; font-weight:400; }

/* Gap skaliert mit, damit die volle Desktop-Navigation auch bei 1180px
   Container-Breite nicht unter den Reservieren-Button rutscht. */
.nav-primary{ display:flex; align-items:center; gap:clamp(12px, 1.5vw, 26px); min-width:0; }
.nav-primary a{
  font-family:var(--f-eyebrow);
  /* Montserrat baut breiter als die zuvor verwendete kondensierte Schrift.
     Damit die Zeile bis zum Umschaltpunkt des Burger-Menüs (1240px) neben
     Wortmarke und Reservieren-Knopf Platz findet, sitzen Schriftgrad und
     Sperrung hier etwas enger als im übrigen Kleintext. */
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--jp-cream-dim);
  position:relative;
  padding:8px 0;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .16s ease;
}
.nav-primary a svg{ width:16px; height:16px; opacity:0.7; flex-shrink:0; transition:opacity .16s ease; }
.nav-primary a:hover{ color:var(--jp-cream); }
.nav-primary a:hover svg{ opacity:1; }
.nav-primary a.active{ color:var(--jp-gold-light); }
.nav-primary a.active svg{ opacity:1; }
.nav-primary a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:1px; background:var(--jp-gold);
}
.nav-primary a.nav-reserve-mobile{ display:none; }
/* `.nav-primary a` (0,2,0) übersteuert sonst die Schriftfarbe aus .btn-primary
   (0,1,0) — der Reservieren-Knopf im Menü stünde dann in gedämpftem Beige auf
   Gelb, also praktisch ohne Kontrast. */
.nav-primary a.btn-primary{ color:var(--jp-black); }

/* --- "Mehr" Dropdown --- */
.nav-more{ position:relative; }
/* Zwischen „Mehr" und dem Panel liegen 14px Luft. Ohne diese unsichtbare
   Brücke verlässt der Zeiger auf dem Weg nach unten kurz den Hover-Bereich
   und das Panel klappt weg, bevor es erreicht ist. */
.nav-more::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:18px;
}
.nav-more-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:8px 0;
  /* gleiche Maße wie .nav-primary a — der Reiter steht in derselben Zeile */
  font-family:var(--f-eyebrow); font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--jp-cream-dim);
  transition:color .16s ease;
}
.nav-more-toggle svg{ width:14px; height:14px; transition:transform .2s ease; }
.nav-more:hover .nav-more-toggle,
.nav-more-toggle[aria-expanded="true"]{ color:var(--jp-cream); }
.nav-more:hover .nav-more-toggle svg,
.nav-more-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-more-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:200px;
  /* gleiche Fläche wie der Standort-Wechsler */
  background:var(--jp-black);
  border:1px solid var(--jp-line);
  border-radius:var(--radius-m); padding:8px; box-shadow:0 18px 40px rgba(0,0,0,0.45);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px);
  /* Schließen erst nach kurzer Nachlaufzeit, Öffnen sofort (siehe unten) */
  transition:opacity .16s ease .22s, transform .16s ease .22s, visibility .16s .22s;
  z-index:50;
}
.nav-more:hover .nav-more-panel,
.nav-more.is-open .nav-more-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.nav-more-panel a{
  padding:10px 14px; border-radius:4px; font-size:0.86rem;
  color:var(--jp-cream-dim); white-space:nowrap;
  transition:color .14s ease;
}
.nav-more-panel a:hover{ color:var(--jp-gold); }
/* Die aufgerufene Seite ist markiert und reagiert nicht auf Hover. */
.nav-more-panel a.active,
.nav-more-panel a.active:hover{ color:var(--jp-gold); background:rgba(233,177,39,0.1); }
.nav-more-panel a.active::after{ display:none; }

.nav-contact-link{ color:var(--jp-gold-light) !important; white-space:nowrap; }

/* --- "Joe's Pasaporte" App-Highlight in der Navigation --- */
.nav-pasaporte-link{ color:var(--jp-gold-light) !important; white-space:nowrap; }
.nav-pasaporte-link svg{ opacity:1 !important; }

.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; margin-left:16px; }
.header-actions .btn-primary{
  padding:11px 20px; font-size:0.78rem; letter-spacing:0.1em;
}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--jp-line); border-radius:4px;
  width:44px; height:40px;
  color:var(--jp-cream);
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:20px; height:20px; }
/* Balken im Ruhezustand, Kreuz sobald das Panel offen ist. Beide Symbole
   liegen im Button; getauscht wird über `body.nav-open`, dieselbe Klasse,
   die auch das Panel einblendet — so können die beiden nicht auseinander
   laufen. Die Beschriftung zieht main.js nach. */
.nav-toggle-x{ display:none; }
body.nav-open .nav-toggle-bars{ display:none; }
body.nav-open .nav-toggle-x{ display:block; }

/* Header-Reservieren-Button entfällt zugunsten der Sticky-Bar unten (ab 720px) */
@media (max-width: 720px){
  .header-actions .btn-primary{ display:none; }
}

@media (max-width: 1240px){
  .nav-primary{
    position:fixed; inset:82px 0 0 0;
    background:var(--jp-black);
    flex-direction:column;
    align-items:stretch;
    padding:28px var(--pad) 100px;
    gap:6px;
    transform:translateX(100%);
    /* visibility verzögert, damit das Panel während des Hinausgleitens
       sichtbar bleibt und erst danach vollständig verschwindet — geschlossen
       ist es weder anklickbar noch scrollbar erreichbar. */
    visibility:hidden;
    pointer-events:none;
    transition:transform .28s ease, visibility 0s linear .28s;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav-primary a{
    font-size:1.05rem;
    letter-spacing:0.07em;
    padding:14px 4px;
    border-bottom:1px solid var(--jp-line);
    width:100%;
  }
  .nav-primary a svg{ width:19px; height:19px; }
  .nav-primary a.active::after{ display:none; }
  .nav-primary a.active{ color:var(--jp-gold-light); }
  body.nav-open .nav-primary{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .28s ease, visibility 0s;
  }
  /* Hintergrund festhalten, solange das Menü offen ist */
  body.nav-open{ overflow:hidden; }
  .nav-toggle{ display:inline-flex; }

  /* "Mehr" wird auf Mobile zu einem aufklappbaren Bereich statt Dropdown */
  .nav-more{ width:100%; order:4; }
  .nav-more-toggle{
    width:100%; justify-content:space-between;
    padding:14px 4px; border-bottom:1px solid var(--jp-line);
    font-size:1.05rem;
  }
  .nav-more-panel{
    position:static; transform:none; opacity:1; visibility:visible;
    width:100%; min-width:0; border:0; background:none; box-shadow:none;
    padding:0; max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  /* Die Grundregel für den Desktop schiebt das offene Panel mit
     translateX(-50%) unter den Reiter — im ausgeklappten Mobil-Menü stünde es
     damit halb außerhalb des Bildschirms. */
  .nav-more.is-open .nav-more-panel{ max-height:400px; transform:none; }
  /* Auf Touch gibt es kein Hover: das Panel nur über die Klasse öffnen */
  .nav-more:hover .nav-more-panel{ opacity:1; visibility:visible; transform:none; }
  .nav-more::after{ display:none; }
  .nav-more-panel a{ padding:12px 4px 12px 30px; border-bottom:1px solid var(--jp-line); border-radius:0; }

  .nav-contact-link{ order:5; }
  .nav-primary a.nav-reserve-mobile{ display:flex; justify-content:center; order:6; margin-top:18px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:min(88vh, 760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(233,177,39,0.16), transparent 55%),
    linear-gradient(180deg, rgba(245,234,199,0.07) 0%, var(--jp-black) 78%);
}
.hero-photo{
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 45%, transparent 75%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 55%, var(--jp-black) 97%),
    radial-gradient(ellipse at 78% 18%, rgba(233,177,39,0.12), transparent 55%);
}
.hero-photo-img{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
@media (prefers-reduced-motion: reduce){
  video.hero-photo-img{ display:none; }
  .hero-photo{
    background-image:
      linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 45%, transparent 75%),
      linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 55%, var(--jp-black) 97%),
      radial-gradient(ellipse at 78% 18%, rgba(233,177,39,0.12), transparent 55%),
      url("../img/hero/poster.webp");
    background-size:auto, auto, auto, cover;
    background-position:center, center, center, center 30%;
  }
}
.hero-pattern{
  position:absolute; inset:0;
  opacity:0.5;
  background-image: repeating-linear-gradient(115deg, rgba(233,177,39,0.05) 0 2px, transparent 2px 64px);
  pointer-events:none;
}
.hero-raven{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(52vw, 620px); opacity:0.14; color:var(--jp-gold);
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2;
  padding-bottom:clamp(48px,7vw,88px);
  max-width:760px;
}
.hero-content .eyebrow{ margin-bottom:14px; }
.hero-content .lede{ margin:22px 0 30px; font-size:1.12rem; }
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-meta{
  margin-top:38px; display:flex; gap:30px; flex-wrap:wrap;
  font-family:var(--f-eyebrow); font-size:0.85rem; letter-spacing:0.05em;
  color:var(--jp-cream-dim);
}
.hero-meta strong{ color:var(--jp-gold-light); font-weight:600; }

/* --- Hero: Joe's Pasaporte App-Werbung --- */
.hero-app-promo{
  margin-top:28px; padding-top:26px; border-top:1px solid rgba(245,234,199,0.14);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.hero-app-promo-text{
  color:var(--jp-cream-dim); font-size:0.94rem; max-width:260px;
}
.hero-app-promo-text strong{ color:var(--jp-gold-light); font-weight:600; }
.store-badge-row{ display:flex; gap:12px; flex-wrap:wrap; }
.store-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:#000000; color:#ffffff; border:1px solid rgba(245,234,199,0.25);
  border-radius:10px; padding:9px 16px;
  transition:border-color .18s ease, background-color .18s ease;
}
.store-badge:hover{ border-color:var(--jp-gold); background:var(--jp-surface-hover); }
.store-badge svg{ width:22px; height:22px; flex-shrink:0; }
.store-badge span{ display:flex; flex-direction:column; line-height:1.15; font-family:var(--f-eyebrow); font-size:0.92rem; font-weight:600; }
.store-badge span small{ font-family:var(--f-eyebrow); font-size:0.62rem; font-weight:400; letter-spacing:0.04em; text-transform:uppercase; opacity:0.8; }
@media (max-width: 540px){
  .hero-app-promo{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   INTRO / KURZVORSTELLUNG
   ============================================================ */
.intro-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;
}
.intro-media{
  aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(233,177,39,0.28), transparent 55%),
    linear-gradient(155deg, var(--jp-black), rgba(245,234,199,0.07) 70%);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--jp-line);
}
#ueber-uns h2 {
  margin-bottom: 1rem;
}
.intro-media svg{ width:46%; opacity:0.85; color:var(--jp-gold-light); }
.intro-media img{ width:100%; height:100%; object-fit:cover; }
.intro-text p{ color:var(--jp-white); margin:0 0 16px; }
.intro-text p:last-of-type{ margin-bottom:26px; }
@media (max-width: 860px){
  .intro-grid{ grid-template-columns:1fr; gap:36px; }
  .intro-media{ order:-1; aspect-ratio:16/9; }
  /* Im Querformat fehlt Höhe: der Beschnitt nimmt sie unten weg, damit
     Gesicht und Bildmitte oben stehen bleiben. */
  .intro-media img{ object-position:center top; }
}

/* ============================================================
   TEASER-KARTEN (Wochenaktionen / Events / generisch)
   ============================================================ */
.card-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;
}
.card{
  background:var(--jp-charcoal);
  border:1px solid var(--jp-line);
  border-radius:var(--radius-m);
  overflow:hidden;
  transition:border-color .2s ease, background-color .2s ease;
}
.card:hover{ border-color:var(--jp-gold); background:var(--jp-surface-hover); }
.card-media{
  aspect-ratio:4/3;
  background:linear-gradient(150deg, var(--jp-black), rgba(245,234,199,0.07));
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.45);
  font-family:var(--f-eyebrow); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s ease; }
.card:hover .card-media img{ opacity:0.88; }
.card-body{ padding:20px 22px 24px; }
.card-tag{
  font-family:var(--f-eyebrow); font-size:0.76rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--jp-gold); margin-bottom:8px; display:block;
}
.card-body h3{ font-size:1.25rem; margin:0 0 8px; }
.card-body p{ margin:0; color:var(--jp-cream-dim); font-size:0.94rem; }
.card-price{
  margin-top:14px; font-family:var(--f-eyebrow); font-weight:600;
  color:var(--jp-gold-light); font-size:0.95rem; letter-spacing:0.03em;
}

/* ============================================================
   PASAPORTE — Textblock im selben Stil wie „Über uns"/„Feiern"
   (.intro-grid/.intro-text), nur die Bildspalte ist eine eigene
   Klasse: das Smartphone-Motiv ist ein freigestelltes PNG mit
   Transparenz — object-fit:cover würde es beschneiden.
   ============================================================ */
.section-olive#pasaporte{
  background: linear-gradient(0deg, var(--jp-green-dark), transparent);
}

   .pasaporte-media{
  display:flex; align-items:center; justify-content:center;
}
.pasaporte-media img{ width:auto; max-width:100%; max-height:420px; display:block; }
/* Ab Desktop füllt das Smartphone-Motiv fast die gesamte Blockhöhe rechts.
   Negative margin-block um genau das Section-Padding lässt die Bildspalte
   bis an den oberen/unteren Rand des Blocks reichen (nicht nur bis zur
   Höhe der Textspalte); das Bild liegt absolut darin und bleibt dank
   object-fit:contain unverzerrt und unbeschnitten. */
@media (min-width: 861px){
  #pasaporte .intro-grid{ align-items:stretch; }
  .pasaporte-media{
    position:relative;
    margin-block:calc(-1 * clamp(56px,9vw,110px));
  }
  .pasaporte-media img{
    position:absolute; inset:0;
    width:100%; max-width:none; height:100%; max-height:none;
    object-fit:contain; object-position:right center;
  }
}
@media (max-width: 860px){
  .pasaporte-media{ order:-1; }
  .pasaporte-media img{ max-height:320px; }
}

/* ============================================================
   GUTSCHEINE — Textblock mit CTA
   ============================================================ */
.voucher-banner{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.voucher-banner p{ margin:10px 0 0; color:var(--jp-cream-dim); max-width:56ch; }
@media (max-width: 640px){
  .voucher-banner{ flex-direction:column; align-items:flex-start; }
  .voucher-banner .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   SPEISEN & COCKTAILS (Split-Showcase)
   ============================================================ */
.split-showcase{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.showcase-panel{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end; padding:28px;
}
/* Motiv als Hintergrund, darüber ein Verlauf nach unten, damit die
   Beschriftung auf jedem Bildausschnitt lesbar bleibt. */
.showcase-panel.food{
  background:
    linear-gradient(to top, rgba(0,0,0,0.94) 4%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.1) 70%),
    url("../img/menu/platos.webp") top center/cover no-repeat,
    linear-gradient(200deg, rgba(245,234,199,0.07), var(--jp-black) 75%);
}
.showcase-panel.drinks{
  background:
    linear-gradient(to top, rgba(0,0,0,0.94) 4%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.1) 70%),
    url("../img/menu/bebidas.webp") top center/cover no-repeat,
    linear-gradient(200deg, var(--jp-maroon-deep), var(--jp-black) 75%);
}
.showcase-panel h3{ position:relative; z-index:1; }
.showcase-panel .eyebrow{ position:relative; z-index:1; margin-bottom:10px; }
@media (max-width: 720px){ .split-showcase{ grid-template-columns:1fr; } }

/* ============================================================
   BEWERTUNGEN
   ============================================================ */
.review-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.review{
  /* gleiche Fläche wie die Wochenaktions-Kacheln */
  background:var(--jp-gold-light); border:1px solid var(--jp-line);
  border-radius:var(--radius-m); padding:26px;
  /* Spalte, damit die Quelle unabhängig von der Zitatlänge unten sitzt */
  display:flex; flex-direction:column;
}
.review .stars{ color:var(--jp-gold); letter-spacing:2px; font-size:0.95rem; margin-bottom:12px; }
.review p{ color:var(--jp-black); font-size:0.95rem; margin:0 0 14px; }
.review p{ margin-bottom:18px; }
.review .who{
  margin-top:auto;
  font-family:var(--f-eyebrow); letter-spacing:0.06em; font-size:0.85rem;
}

/* Auf schmalen Bildschirmen stünden die Karten sonst als hoher Stapel
   untereinander. Stattdessen dasselbe Wischprinzip wie bei Galerie und
   Events: eine Bahn mit Einrastpunkten. Die 85-Prozent-Breite lässt die
   nächste Karte angeschnitten stehen — das ist der Hinweis, dass es
   seitwärts weitergeht; Pfeile braucht es dafür nicht. */
@media (max-width: 720px){
  .review-row{
    display:flex; grid-template-columns:none;
    gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
    /* Bis an den Rand wischen, ohne dass die Karten am Rand kleben */
    margin:0 calc(var(--pad) * -1); padding:4px var(--pad) 12px;
    scroll-padding-left:var(--pad);
    scrollbar-width:none;
  }
  .review-row::-webkit-scrollbar{ display:none; }
  /* Gleich hohe Karten kommen von `align-items:stretch` der Bahn, die Quelle
     bleibt durch `margin-top:auto` der Grundregel unten stehen. */
  .review{ flex:0 0 85%; min-width:0; scroll-snap-align:start; }
}
@media (prefers-reduced-motion: reduce){
  .review-row{ scroll-behavior:auto; }
}

/* Lange Rezensionen: höchstens 5 Zeilen, Klick (reviews.js) öffnet den ganzen Text. Die Begrenzung gilt von
   Anfang an (nicht erst, wenn das Skript läuft): sonst schrumpft der Bereich nach dem Laden und die Seite springt.
   Ohne JavaScript hebt ein <noscript>-Block im Template sie wieder auf. */
.review p:not(.who){
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;
  overflow:hidden;
}
.review.is-truncated{ cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.review.is-truncated:hover,
.review.is-truncated:focus-visible{ border-color:var(--jp-gold); box-shadow:0 0 0 1px var(--jp-gold); outline:none; }
/* „Weiterlesen" nimmt keine Höhe ein (0 hoch, ragt in den Abstand unter dem Text): sonst würde die Karte beim
   Setzen durch reviews.js höher und die Seite verschöbe sich. */
.review .review-more{
  align-self:flex-start; margin:-18px 0 18px; height:0; overflow:visible; line-height:14px; transform:translateY(5px);
  font-family:var(--f-eyebrow); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--jp-black); text-decoration:underline; text-decoration-color:var(--jp-gold); text-underline-offset:3px;
}
.review-modal{ width:min(640px, calc(100vw - 32px)); }
.review-modal-body{ padding:20px 28px 28px; overflow-y:auto; min-height:0; }
.review-modal-body .stars{ color:var(--jp-gold); letter-spacing:2px; margin-bottom:14px; }
.review-modal-body p{ color:var(--jp-cream); font-size:1rem; line-height:1.65; margin:0 0 18px; white-space:pre-line; }
.review-modal-body .who{ font-family:var(--f-eyebrow); letter-spacing:0.06em; font-size:0.85rem; color:var(--jp-cream-dim); margin:0; }
@media (max-width: 720px){ .review-modal-body{ padding:16px 20px 22px; } }

/* ============================================================
   GALERIE — Slider mit Lightbox
   ============================================================ */
.gallery-carousel{
  position:relative;
  display:grid; grid-template-columns:44px 1fr 44px; gap:12px; align-items:center;
}
.gallery-arrow.prev{ grid-column:1; }
.gallery-track{ grid-column:2; min-width:0; }
.gallery-arrow.next{ grid-column:3; }

.gallery-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 12px;
  -webkit-overflow-scrolling:touch;
}
.gallery-track::-webkit-scrollbar{ display:none; }

.gallery-item{
  position:relative; flex:0 0 clamp(320px, 44%, 480px); scroll-snap-align:start;
  padding:0; border:1px solid var(--jp-line); border-radius:var(--radius-m);
  background:var(--jp-charcoal); overflow:hidden; cursor:pointer;
  aspect-ratio:3/2;
  transition:border-color .18s ease;
}
.gallery-item:hover,
.gallery-item:focus-visible{ border-color:var(--jp-gold); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item-zoom{
  position:absolute; right:12px; bottom:11px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,0.7); border:1px solid var(--jp-line);
  color:var(--jp-cream);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.gallery-item-zoom svg{ width:15px; height:15px; }
.gallery-item:hover .gallery-item-zoom,
.gallery-item:focus-visible .gallery-item-zoom{
  background:var(--jp-gold); border-color:var(--jp-gold); color:var(--jp-black);
}

.gallery-arrow{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--jp-charcoal); border:1px solid var(--jp-line); color:var(--jp-cream);
  transition:border-color .18s ease, color .18s ease;
}
.gallery-arrow:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.gallery-arrow svg{ width:18px; height:18px; }
.gallery-arrow[hidden]{ display:none; }

@media (max-width: 720px){
  .gallery-carousel{ grid-template-columns:1fr; gap:0; margin:0 -20px; padding:0 20px; }
  .gallery-track{ grid-column:1; margin:0 -20px; padding-left:20px; padding-right:20px; }
  .gallery-arrow{ display:none; }
  .gallery-item{ flex-basis:82%; }
}

/* --- Lightbox --- */
.lightbox{
  width:min(1100px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  padding:0; border:0; background:transparent; overflow:visible;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
}
.lightbox:not([open]){ display:none; }
.lightbox::backdrop{ background:rgba(0,0,0,0.92); backdrop-filter:blur(4px); }

.lightbox-figure{
  grid-column:2; margin:0; min-width:0;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.lightbox-figure img{
  max-width:100%; max-height:calc(100vh - 130px);
  width:auto; height:auto; object-fit:contain;
  border:1px solid var(--jp-line); border-radius:var(--radius-m);
  background:var(--jp-charcoal);
}
.lightbox-figure figcaption{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--jp-cream);
}
.lightbox-counter{ color:var(--jp-gold); }

.lightbox-nav,
.lightbox-close{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(0,0,0,0.85);
  border:1px solid var(--jp-line); color:var(--jp-cream);
  transition:border-color .18s ease, color .18s ease;
}
.lightbox-nav{ width:46px; height:46px; }
.lightbox-nav.prev{ grid-column:1; }
.lightbox-nav.next{ grid-column:3; }
.lightbox-nav svg{ width:20px; height:20px; }
.lightbox-close{
  position:fixed; top:16px; right:16px; width:40px; height:40px;
}
.lightbox-close svg{ width:18px; height:18px; }
.lightbox-nav:hover,
.lightbox-close:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }

@media (max-width: 720px){
  .lightbox{ grid-template-columns:1fr; }
  /* Pfeile rücken unter das Bild, damit es die volle Breite behält */
  .lightbox-figure{ grid-column:1; grid-row:1; }
  /* Feste Dialoghöhe mit zwei Zeilen: oben Bild und Unterschrift, unten die
     Pfeile. Vorher wuchs die Bildzeile mit der Unterschrift — bei zwei- oder
     dreizeiligen Bildtiteln rutschte die Pfeilzeile nach unten und die Pfeile
     sprangen beim Weiterblättern von Bild zu Bild. Als eigene Rasterzeile am
     unteren Rand stehen sie unabhängig von der Textlänge immer gleich.
     `dvh` rechnet auf iOS mit der tatsächlich sichtbaren Höhe, `vh` bleibt
     als Rückfall für ältere Browser davor stehen. */
  .lightbox{
    height:calc(100vh - 24px); height:calc(100dvh - 24px);
    grid-template-rows:minmax(0, 1fr) auto;
    align-items:stretch;
  }
  /* Bild und Unterschrift mittig in der oberen Zeile; `min-height:0` erlaubt
     dem Bild, unter seine Eigenhöhe zu schrumpfen, statt die Zeile zu sprengen. */
  .lightbox-figure{ grid-column:1; grid-row:1; min-height:0; justify-content:center; }
  .lightbox-figure figcaption{ flex-shrink:0; }
  /* `flex:0 1 auto` + `min-height:0`: das Bild gibt so viel Höhe ab, wie die
     Unterschrift zusätzlich braucht. `object-fit:contain` hält dabei das
     Seitenverhältnis — der Rahmen entfällt hier, sonst umrandete er den
     entstehenden Leerraum statt das Bild. */
  .lightbox-figure img{
    max-height:100%; min-height:0; flex:0 1 auto;
    border:0; background:none;
  }

  .lightbox-nav{ grid-row:2; width:42px; height:42px; margin-top:0; align-self:end; }
  /* `grid-column` muss hier auf denselben zweiklassigen Selektoren stehen wie
     in der Grundregel — `.lightbox-nav` allein ist schwächer als
     `.lightbox-nav.next` und hätte deren `grid-column:3` nicht überschrieben.
     Die dritte Spalte wäre bestehen geblieben und hätte das Bild um ihre
     Breite schmaler gemacht. */
  .lightbox-nav.prev{ grid-column:1; justify-self:start; }
  .lightbox-nav.next{ grid-column:1; justify-self:end; }
}

/* ============================================================
   KONTAKT / ÖFFNUNGSZEITEN / ANFAHRT
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
}
.info-block{ margin-bottom:30px; }
.info-block .eyebrow{ margin-bottom:10px; }
.info-block dl{ margin:0; }
.info-block .row{
  display:flex; justify-content:space-between; gap:18px;
  padding:9px 0; border-bottom:1px solid var(--jp-line);
  font-size:0.95rem;
}
.info-block .row span:first-child{ color:var(--jp-cream-dim); }
/* --- Karte mit Routen-Button --- */
.map-frame{
  position:relative;
  border-radius:var(--radius-m); overflow:hidden;
  min-height:340px; align-self:stretch;
  background:var(--jp-charcoal);
  border:1px solid var(--jp-line);
}
.map-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
  /* Die helle Google-Karte in die dunkle Bühne einpassen */
  filter:grayscale(0.25) contrast(1.05) brightness(0.92);
}
.map-route{
  position:absolute; top:14px; right:14px; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-s);
  background:var(--jp-gold); color:var(--jp-black);
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(0,0,0,0.45);
  transition:background-color .18s ease;
}
.map-route:hover{ background:var(--jp-gold-light); }
.menu-filter-chip[aria-pressed="true"]:hover,
.menu-tab[aria-selected="true"]:hover{ box-shadow:none; }
.map-route svg{ width:15px; height:15px; }

/* --- Jobs: Position links, Kontakt rechts --- */
.info-block .row.job-row{ align-items:center; gap:14px; }
.info-block .row.job-row > div{ display:flex; flex-direction:column; min-width:0; }
.info-block .row.job-row > div span:first-child{ color:var(--jp-cream); font-weight:600; }
.info-block .row.job-row > div span:last-child{ color:var(--jp-cream-dim); font-size:0.88rem; }
.job-contact{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border:1px solid var(--jp-gold); border-radius:var(--radius-s);
  background:var(--jp-gold); color:var(--jp-black);
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer;
  transition:filter .18s ease;
}
.job-contact:hover{ filter:brightness(0.92); }
.job-contact svg{ width:14px; height:14px; }

@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; gap:30px; } }
@media (max-width: 420px){
  .info-block .row.job-row{ flex-wrap:wrap; }
  .job-contact{ margin-left:auto; }
}

/* ============================================================
   RESERVIERUNG / SPEISEKARTE — Embeds
   ============================================================ */
.embed-frame{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--jp-line); background:var(--jp-charcoal);
  min-height:420px;
}
.embed-frame iframe{ width:100%; border:0; display:block; position:relative; z-index:1;  }
.embed-skeleton{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--jp-charcoal);
  transition:opacity .3s ease;
}
.embed-skeleton.is-hidden{ opacity:0; pointer-events:none; }
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--jp-line); border-top-color:var(--jp-gold);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.embed-skeleton span{ font-family:var(--f-eyebrow); letter-spacing:0.1em; text-transform:uppercase; font-size:0.78rem; color:var(--jp-cream-dim); }

/* Auf Desktop stehen die drei Infoblöcke nebeneinander, das
   Reservierungs-Embed sitzt darunter. */
.reserve-panel{
  display:flex; flex-direction:column; gap:30px;
}
.reserve-info{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  padding-bottom:28px; border-bottom:1px solid var(--jp-line);
}
.reserve-info .row{
  display:flex; align-items:flex-start; gap:13px;
}
.reserve-info .row svg{ width:20px; height:20px; color:var(--jp-gold); flex-shrink:0; margin-top:2px; }
.reserve-info .row strong{ display:block; font-family:var(--f-eyebrow); letter-spacing:0.04em; }
.reserve-info .row span{ color:var(--jp-cream-dim); font-size:0.92rem; }
/* Button und Hinweiszeile mittig unter den Infoblöcken; die Zeile bleibt
   auf Desktop einzeilig, weil ihre Breite nicht beschnitten wird. */
#reservation-embed{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
#reservation-embed .btn{ max-width:340px; }
#reservation-embed p{ margin:0; color:var(--jp-cream-dim); font-size:0.88rem; }
/* Einspaltig standen Symbol und Text linksbündig am Rand und wirkten
   angeklebt — untereinander wird die Gruppe deshalb zentriert. */
@media (max-width: 900px){
  .reserve-info{ grid-template-columns:1fr; gap:22px; text-align:center; }
  .reserve-info .row{ flex-direction:column; align-items:center; gap:8px; }
  .reserve-info .row svg{ margin-top:0; }
}

/* ============================================================
   WOCHENAKTIONEN
   Eine Reihe: oben die Tage-Leiste (.week-tabs, der heutige Tag ist
   markiert, der gewählte gold gefüllt), darunter die Karten des Tages
   (.week-list) — höchstens vier nebeneinander, mittig. page-location.js
   schaltet die Karten um (automatisch alle 10 s, nach eigener Auswahl
   erst nach 30 s). Die Kachel selbst ist nicht klickbar; nur der
   "Mehr"-Knopf unten rechts (.week-tile-more, von menu.js) öffnet Details.
   ============================================================ */
.week-tile{
  display:flex; flex-direction:column;
  background:var(--jp-green-dark);
  border:1px solid var(--jp-line);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.week-tile[hidden]{ display:none; }

/* --- Tage-Leiste ---
   Alle Knöpfe haben dieselbe feste Höhe, der Tagesname steht in jedem exakt gleich (mittig). Linie und „Heute" sind
   absolut positioniert und schieben nichts: so liegen alle Namen auf einer Horizontalen, egal ob heute / gewählt. */
.week-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 30px;   /* unten Luft für das „Heute"-Schildchen, das über den Rand ragt */
  min-height:46px;   /* Platz ist von Anfang an reserviert: kein Springen, wenn die Leiste gerendert wird */
}
.week-tabs[hidden]{ display:none; }
.week-tab{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; min-width:56px; padding:0 18px 4px;   /* 4px unten: Name sitzt etwas über der Mitte, Linie darunter */
  background:transparent; color:var(--jp-cream);
  border:1px solid var(--jp-line); border-radius:999px;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.week-tab:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.week-tab:focus-visible{ outline:2px solid var(--jp-gold-light); outline-offset:2px; }
.week-tab .d-short{ display:none; }
/* Heute: goldener Rand + Schildchen „Heute" am unteren Rand — auch wenn gerade ein anderer Tag gewählt ist */
.week-tab.is-today{ border-color:var(--jp-gold); }
.week-tab-today{
  position:absolute; left:50%; bottom:0; transform:translate(-50%,55%);
  padding:3px 8px; border-radius:999px;
  background:var(--jp-black); border:1px solid var(--jp-gold); color:var(--jp-gold);
  font-size:0.58rem; letter-spacing:0.16em; line-height:1; white-space:nowrap;
}
/* Gewählter Tag: gold gefüllt */
.week-tab.is-active{
  background:var(--jp-gold); border-color:var(--jp-gold); color:var(--jp-black);
}
/* Fortschrittslinie am gewählten Tag, direkt unter dem Tagesnamen (beim heutigen Tag zwischen Name und „Heute"):
   zeigt, wann automatisch zum nächsten Tag gewechselt wird (zugleich der Wechsel-Takt, siehe page-location.js).
   Läuft 10 s, nach eigener Auswahl 30 s (--week-dur). Bei allen Knöpfen vorhanden, nur am gewählten sichtbar. */
.week-tab-line{
  position:absolute; left:18px; right:18px; bottom:10px;
  display:block; overflow:hidden;
  height:2px; border-radius:2px; background:transparent;
}
.week-tab.is-active .week-tab-line{ background:rgba(0,0,0,0.2); }
.week-tab-line::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,0.8);
  transform:scaleX(0); transform-origin:left center; opacity:0;
}
.week-tab.is-active.is-timing .week-tab-line::after{
  opacity:1;
  animation:weekFill var(--week-dur,10s) linear forwards;
}
.week-slider.is-paused .week-tab.is-active.is-timing .week-tab-line::after{ animation-play-state:paused; }
@keyframes weekFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- Karten des gewählten Tages --- */
.week-list{
  display:flex; gap:14px;
  justify-content:flex-start;                 /* Fallback für Browser ohne „safe center" */
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 10px;
  -webkit-overflow-scrolling:touch;
  transition:opacity .18s ease, transform .18s ease;
}
@supports (justify-content: safe center){
  .week-list{ justify-content:safe center; }   /* mittig, solange nichts überläuft; sonst von links scrollbar */
}
.week-list::-webkit-scrollbar{ display:none; }
.week-list{ scrollbar-width:none; }
.week-list.is-switching{ opacity:0; transform:translateY(8px); }
.week-list.is-entering{ animation:weekEnter .32s ease both; }
@keyframes weekEnter{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.week-list .week-tile{
  /* vier Karten füllen die Reihe; weniger stehen mittig, mehr scrollen */
  flex:0 0 calc((100% - 42px) / 4); scroll-snap-align:start;
}
@media (max-width: 1000px){
  .week-list .week-tile{ flex-basis:calc((100% - 28px) / 3); }
}
@media (max-width: 720px){
  .week-tabs{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:5px; margin:0 0 26px; }
  .week-tab{ min-width:0; height:42px; padding:0 2px 4px; font-size:0.76rem; letter-spacing:0.04em; }
  .week-tab-line{ left:9px; right:9px; bottom:8px; }
  .week-tab-today{ font-size:0.5rem; letter-spacing:0.08em; padding:3px 6px; }
  .week-tab .d-full{ display:none; }
  .week-tab .d-short{ display:inline; }
  .week-list{ margin:0 -20px; padding:4px 20px 10px; }
  .week-list .week-tile{ flex-basis:78%; }
}
@media (prefers-reduced-motion: reduce){
  .week-list{ transition:none; }
  .week-list.is-entering{ animation:none; }
  .week-tab-line::after{ display:none; }
}

/* Bild ganz sichtbar (quadratisch, wie die Event-Plakate) — nicht zugeschnitten */
.week-tile-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--jp-green-dark); }
.week-tile-media img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Textfläche in Grün-dunkel, deckend und ohne Verlauf. Sie beginnt dort, wo
   das Bild endet — keine Überlappung. */
/* Die Karte zeigt nur Tag, Titel (höchstens 2 Zeilen) und „Mehr" — Text und Details stehen im Fenster. Feste Höhe der
   Textfläche: alle Karten haben an jedem Tag, mit und ohne Skript, dieselbe Höhe; nichts springt. */
.week-tile-body{
  padding:12px 16px 16px;
  display:flex; flex-direction:column; gap:5px; flex:1;
  min-height:120px;
  background:var(--jp-green-dark);
}
.week-tile .day{
  font-family:var(--f-eyebrow); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--jp-gold);
}
.week-tile h3{
  font-size:1.02rem; margin:0; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.week-tile p{ margin:0; color:var(--jp-cream-dim); font-size:0.85rem; }


/* "Mehr" — von menu.js nachträglich eingehängt, nur wenn die Speisekarte
   für diesen Tag/diese Kategorie tatsächlich Inhalte liefert. Sitzt am
   Ende der Textspalte, per margin-top:auto immer unten, per
   align-self:flex-end immer rechts, unabhängig von der Textlänge. */
.week-tile-more{
  align-self:flex-end; margin-top:auto; padding-top:8px;
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; color:var(--jp-gold-light);
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; transition:color .18s ease;
}
.week-tile-more:hover,
.week-tile-more:focus-visible{ color:var(--jp-gold); }
.week-tile-more svg{ width:13px; height:13px; }

/* CTA unter dem Grid — dieselbe Reservierung wie im Header/Hero */
.week-cta{ margin-top:28px; display:flex; justify-content:center; }

/* --- Heute-Hervorhebung --- */
.week-tile-flag{
  display:none;
  position:absolute; top:12px; left:12px; z-index:1;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--jp-black); background:var(--jp-gold);
  padding:6px 12px; border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,0.45);
}
.week-tile.is-today .week-tile-flag{ display:inline-block; }
.week-tile.is-today{
  border-color:var(--jp-gold);
  box-shadow:0 0 0 1px var(--jp-gold), 0 6px 14px rgba(233,177,39,0.18);
}





/* ============================================================
   EVENTS — Karussell (Desktop mit Pfeilen, Mobile per Swipe)
   Jede Karte ist ein mailto-Link auf eine vorbefüllte Anfrage.
   ============================================================ */
/* Feste Spalten für die Pfeile: blendet sich einer aus, bleibt sein Platz
   erhalten — der Track behält seine Breite und die Karten springen nicht. */
.event-carousel{
  position:relative;
  display:grid; grid-template-columns:44px 1fr 44px; gap:12px; align-items:center;
}
.event-carousel-arrow.prev{ grid-column:1; }
.event-carousel-track{ grid-column:2; min-width:0; }
.event-carousel-arrow.next{ grid-column:3; }
.event-carousel-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 12px;
  -webkit-overflow-scrolling:touch;
}
.event-carousel-track::-webkit-scrollbar{ display:none; }

/* Das Eventplakat füllt die Karte, Text und Datum liegen darüber. Der Verlauf
   dazwischen hält die Schrift auf hellen wie dunklen Motiven lesbar. */
.event-card{
  position:relative; isolation:isolate;
  flex:0 0 clamp(260px, 32%, 340px); scroll-snap-align:start;
  aspect-ratio:3/4;
  display:flex; flex-direction:column; justify-content:flex-end;
  /* .event-card ist ein <button> (öffnet das Reservierungs-Widget statt
     zu navigieren) — UA-Vorgaben für Schrift/Rahmen/Abstand zurücksetzen. */
  appearance:none; -webkit-appearance:none;
  font:inherit; color:inherit; text-align:left; padding:0;
  background:var(--jp-charcoal);
  border:1px solid var(--jp-line);
  border-radius:var(--radius-m);
  overflow:hidden;
  cursor:pointer;
  /* bewusst ohne transform: die Karte bleibt beim Hover exakt stehen */
  transition:border-color .18s ease;
}
.event-card:hover,
.event-card:focus-visible{ border-color:var(--jp-gold); }

.event-card-img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.event-card:hover .event-card-img{ transform:scale(1.04); }
/* Oben nur leicht abdunkeln (fürs Datum), unten kräftig (für den Text) */
.event-card-scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.18) 26%,
    rgba(0,0,0,0.68) 58%,
    rgba(0,0,0,0.94) 100%
  );
}
/* Ohne Plakat bleibt die Karte einfarbig — der Verlauf würde dort nur grau wirken */
.event-card:not(.has-poster) .event-card-scrim{ background:none; }

/* Datum: große Zahl oben links, außerhalb des Textblocks unten */
.event-card-date{
  position:absolute; top:14px; left:18px; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; line-height:0.86;
  font-family:var(--f-eyebrow); font-weight:700;
  color:var(--jp-cream);
  text-shadow:0 2px 18px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9);
}
.event-card-day{ font-size:clamp(2.8rem, 4.6vw, 3.6rem); letter-spacing:-0.02em; }
.event-card-month{
  margin-top:6px; font-size:0.82rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--jp-gold-light);
}

.event-card-body{ position:relative; padding:18px 22px 20px; display:flex; flex-direction:column; }
.event-card-body h3{ font-size:1.2rem; margin:0 0 8px; }
.event-card-body p{
  margin:0 0 16px; color:var(--jp-cream-dim); font-size:0.9rem;
  /* Plakate sind unterschiedlich hell — mehr als vier Zeilen erdrücken das Motiv */
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.event-card-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-cream-dim);
  transition:color .18s ease;
}
.event-card-cta svg{ width:15px; height:15px; }
.event-card:hover .event-card-cta,
.event-card:focus-visible .event-card-cta{ color:var(--jp-gold-light); }

.event-carousel-arrow{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--jp-charcoal); border:1px solid var(--jp-line); color:var(--jp-cream);
  transition:border-color .18s ease, color .18s ease;
}
.event-carousel-arrow:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.event-carousel-arrow svg{ width:18px; height:18px; }
/* display:flex würde das hidden-Attribut überstimmen */
.event-carousel-arrow[hidden]{ display:none; }

@media (max-width: 720px){
  .event-carousel{ grid-template-columns:1fr; gap:0; margin:0 -20px; padding:0 20px; }
  .event-carousel-track{ grid-column:1; margin:0 -20px; padding-left:20px; padding-right:20px; }
  .event-carousel-arrow{ display:none; }
  .event-card{ flex-basis:78%; }
  .event-card-day{ font-size:3.1rem; }
}
@media (prefers-reduced-motion: reduce){
  .event-card:hover .event-card-img{ transform:none; }
}

/* ============================================================
   EVENTKALENDER — Dialog mit Monatsraster und Detailspalte
   ============================================================ */
/* Flex-Spalte, damit die Kopfzeile stehen bleibt und der Rumpf die
   verbleibende Höhe bekommt. Ohne feste Höhe wächst der Rumpf über den
   Dialog hinaus, `overflow:hidden` schneidet ihn ab und das Abgeschnittene
   ist mit keiner Geste mehr erreichbar. */
.event-modal{
  width:min(920px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  padding:0;                    /* Klick neben dem Panel = Backdrop-Klick */
  border:1px solid var(--jp-line);
  border-radius:var(--radius-m);
  background:var(--jp-black);
  color:var(--jp-cream);
  overflow:hidden;
  display:flex; flex-direction:column;
}
/* display:flex würde den geschlossenen Dialog sonst sichtbar machen */
.event-modal:not([open]){ display:none; }

/* Der Kalender bekommt eine feste Höhe statt einer Obergrenze. Sonst ist der
   Dialog leer schmal und springt beim Anklicken eines Termins auf, sobald das
   Eventplakat dazukommt. Mit fester Höhe bleibt der Rahmen stehen und nur die
   Detailspalte scrollt. */
.calendar-modal{ height:min(640px, calc(100vh - 32px)); }
.event-modal .event-modal-head{ flex-shrink:0; }
.event-modal::backdrop{ background:rgba(0,0,0,0.78); backdrop-filter:blur(3px); }

.event-modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:18px 24px 14px;
  border-bottom:1px solid var(--jp-line);
}
.event-modal-head h2{ font-size:clamp(1.3rem, 2.4vw, 1.75rem); margin:4px 0 0; }
.event-modal-close{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:none; border:1px solid var(--jp-line); color:var(--jp-cream);
  transition:border-color .18s ease, color .18s ease;
}
.event-modal-close:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.event-modal-close svg{ width:16px; height:16px; }

.event-modal-body{
  display:grid; grid-template-columns:minmax(300px, 1fr) 1fr;
  gap:0;
  flex:1; min-height:0;
  /* Nicht der Rumpf scrollt, sondern jede Spalte für sich — sonst schiebt
     das hohe Eventplakat rechts den Kalender links aus dem Blickfeld. */
  overflow:hidden;
}
.calendar{
  padding:18px 24px 20px; border-right:1px solid var(--jp-line);
  min-height:0; overflow-y:auto;
}

/* Feste Randspalten: der Monatsname bleibt stehen, auch wenn ein Pfeil entfällt */
.calendar-nav{
  display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:10px;
  margin-bottom:12px; min-height:32px;
}
.calendar-nav strong{
  text-align:center;
  font-family:var(--f-eyebrow); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; font-size:0.86rem;
  color:var(--jp-gold-light);
}
.calendar-nav-btn:last-of-type{ justify-self:end; }
.calendar-nav-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:none; border:1px solid var(--jp-line); color:var(--jp-cream);
  transition:border-color .18s ease, color .18s ease;
}
.calendar-nav-btn:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.calendar-nav-btn svg{ width:14px; height:14px; }
/* ausgeblendet statt ausgegraut — wie bei den Karussell-Pfeilen */
.calendar-nav-btn[hidden]{ display:none; }

.calendar-weekdays,
.calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.calendar-weekdays{
  margin-bottom:5px;
  font-family:var(--f-eyebrow); font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--jp-cream-dim);
  text-align:center;
}
.calendar-cell{
  aspect-ratio:1/1; max-height:40px; display:flex; align-items:center; justify-content:center;
  font-size:0.86rem; color:var(--jp-cream-dim);
  background:none; border:1px solid transparent; border-radius:var(--radius-m);
  padding:0;
}
.calendar-cell.is-empty{ border:0; }
/* Tage mit Event: dunkle Fläche mit goldenem Rahmen — wie die Karten */
.calendar-cell.has-event{
  background:var(--jp-charcoal);
  border-color:var(--jp-gold);
  color:var(--jp-cream);
  font-weight:600;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.calendar-cell.has-event:hover{ background:var(--jp-surface-hover); color:var(--jp-gold-light); }
.calendar-cell.is-selected{
  background:var(--jp-gold); border-color:var(--jp-gold); color:var(--jp-black);
}
/* ausgewählter Tag: Hover ändert nichts, die Auswahl steht schon */
.calendar-cell.is-selected:hover{ background:var(--jp-gold); color:var(--jp-black); }

/* Heutiger Tag: dezenter Punkt, damit er sich beim freien Blättern
   klar von den goldgerahmten Event-Tagen unterscheidet. */
.calendar-cell.is-today{ position:relative; color:var(--jp-cream); }
.calendar-cell.is-today::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--jp-cream-dim);
}
.calendar-cell.is-today.is-selected::after{ background:var(--jp-black); }

/* Feste zwei Zeilen: der Sprung-Button darf beim Blättern erscheinen und
   verschwinden, ohne die Höhe des Dialogs zu verändern. */
.calendar-foot{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:9px; margin-top:14px;
}
.calendar-legend{
  display:flex; align-items:center; gap:9px;
  margin:0; font-size:0.78rem; color:var(--jp-cream-dim);
}
.calendar-legend-dot{
  width:15px; height:15px; border-radius:3px; flex-shrink:0;
  background:var(--jp-charcoal); border:1px solid var(--jp-gold);
}
/* Immer sichtbar und mit konkretem Datum beschriftet — so ist klar, wohin
   der Sprung führt, und die Dialoghöhe bleibt beim Blättern konstant. */
.calendar-jump{
  display:flex; align-items:center; gap:10px; width:100%;
  text-align:left;
  background:var(--jp-charcoal); border:1px solid var(--jp-line);
  border-radius:var(--radius-m); padding:9px 12px;
  color:var(--jp-cream);
  transition:border-color .18s ease, background-color .18s ease;
}
.calendar-jump:hover{ border-color:var(--jp-gold); background-color:var(--jp-surface-hover); }
.calendar-jump-label{
  flex-shrink:0;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-gold);
}
.calendar-jump-date{
  flex:1; min-width:0; font-size:0.82rem; color:var(--jp-cream-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.calendar-jump svg{ width:15px; height:15px; flex-shrink:0; color:var(--jp-gold); }
.calendar-jump[hidden]{ display:none; }

.calendar-detail{ padding:20px 26px 24px; display:flex; flex-direction:column; gap:16px; min-height:0; overflow-y:auto; }
.calendar-detail-empty{
  margin:auto; text-align:center; color:var(--jp-cream-dim); max-width:26ch;
}
.calendar-detail-empty svg{ width:42px; height:42px; margin:0 auto 14px; color:var(--jp-gold); opacity:0.5; }
.calendar-detail-empty p{ margin:0; font-size:0.92rem; }
.calendar-detail-event{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* Dasselbe Plakat wie auf der Kachel, hier in voller Breite über den Angaben */
.calendar-detail-media{
  align-self:stretch; margin-bottom:4px; line-height:0;
  border:1px solid var(--jp-line); border-radius:var(--radius-m); overflow:hidden;
  background:var(--jp-charcoal);
}
.calendar-detail-media img{ width:100%; height:auto; display:block; }
.calendar-detail-date{
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-gold);
}
.calendar-detail-event h3{ font-size:clamp(1.2rem, 2.2vw, 1.6rem); margin:0; }
.calendar-detail-event p{ margin:0; color:var(--jp-cream-dim); font-size:0.95rem; }
.calendar-detail-event .btn{ margin-top:6px; }

@media (max-width: 720px){
  /* `dvh` misst die tatsächlich sichtbare Höhe: auf iOS zählt `vh` die
     ein- und ausfahrende Browserleiste mit, der Dialog wurde dadurch höher
     als der Bildschirm und sein unteres Ende war nicht erreichbar.
     Die `vh`-Zeile bleibt als Rückfall für Browser ohne `dvh` davor. */
  .event-modal{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
  /* Einspaltig ist der Kalender allein schon fast bildschirmhoch — feste
     Vollhöhe hält den Rahmen auch hier ruhig. */
  .calendar-modal{ height:calc(100vh - 24px); height:calc(100dvh - 24px); }

  /* Einspaltig stehen Kalender und Detail untereinander — dann scrollt
     sinnvollerweise der ganze Rumpf statt jeder Block für sich.
     Statt des Rasters eine Flex-Spalte: das Raster gab beiden Blöcken je
     eine automatische Zeile und teilte ihnen anschließend die feste
     Dialoghöhe zu — beide wurden auf gut die Hälfte gestaucht, der Inhalt
     lief unten heraus (die Fußzeile des Kalenders lag über dem Eventplakat)
     und ließ sich nicht heranscrollen. `flex:0 0 auto` gibt beiden Blöcken
     ihre Inhaltshöhe zurück, gescrollt wird ausschließlich hier im Rumpf. */
  .event-modal-body{
    display:flex; flex-direction:column;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  /* `min-width:0` bricht die Mindestbreite der Blöcke auf. Ohne sie zog der
     Sprung-Knopf („Nächster Termin …“) den ganzen Rumpf über die Dialogbreite
     hinaus: rechts wurden Wochentag „So“, Datum und Legende abgeschnitten. */
  .event-modal-body > *{ flex:0 0 auto; min-width:0; }

  .calendar{
    border-right:0; border-bottom:1px solid var(--jp-line); padding:20px;
    overflow:visible;
  }
  /* Zweizeilig: „Nächster Termin“ über dem Datum. Nebeneinander blieben dem
     Datum keine 160 px und „10.09.2026 · Golden Hour Closing“ endete im
     Auslassungszeichen. */
  .calendar-jump{ flex-wrap:wrap; row-gap:2px; padding:10px 12px; }
  .calendar-jump-label{ flex:0 0 100%; }
  .calendar-jump-date{ flex:1 1 auto; white-space:normal; overflow:visible; }
  .calendar-legend{ align-items:flex-start; }

  .calendar-detail{ padding:20px 20px 24px; overflow:visible; }
  .event-modal-head{ padding:20px; }
}

/* ============================================================
   FAQ — native <details>/<summary>, kein JS nötig
   ============================================================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:860px; }
.faq-item{
  background:var(--jp-surface); border:1px solid var(--jp-line);
  border-radius:var(--radius-m); padding:0 24px;
}
.faq-item summary{
  list-style:none; cursor:pointer;
  padding:20px 34px 20px 0; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-eyebrow); font-weight:600; font-size:1rem; color:var(--jp-cream);
  transition:color .18s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--f-body); font-size:1.4rem; line-height:1; color:var(--jp-gold);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item[open] summary{ color:var(--jp-gold); }
.faq-item p{ margin:0 0 22px; color:var(--jp-cream-dim); font-size:0.95rem; max-width:70ch; }
.faq-item summary:hover{ color:var(--jp-gold); }

/* ============================================================
   FOOTER
   ============================================================ */
/* Olivgrün statt reinem Seitenschwarz — grenzt den Footer sichtbar vom
   Textblock darüber ab, ohne einen neuen Farbton einzuführen. */
.site-footer{ padding:56px 0 0; background:var(--jp-green-dark); }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
  padding-bottom:36px; border-bottom:1px solid var(--jp-line); margin-bottom:24px;
}
.footer-grid h4{
  font-family:var(--f-eyebrow); letter-spacing:0.12em; text-transform:uppercase;
  font-size:0.82rem; color:var(--jp-gold); margin:0 0 14px;
}
.footer-logo{ width:150px; height:auto; margin-bottom:16px; }
.footer-loc-name{ font-size:0.82rem; margin:0 0 10px; }
.footer-grid a, .footer-grid p{ color:var(--jp-cream-dim); font-size:0.92rem; display:block; margin:0 0 8px; }
.footer-grid a:hover{ color:var(--jp-gold); }
/* Social-Zeile mit Icon vor der Beschriftung */
.social-link{ display:flex !important; align-items:center; gap:9px; }
.social-link svg{ width:17px; height:17px; flex-shrink:0; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-bottom:24px;
  font-family:var(--f-eyebrow); font-size:0.8rem; letter-spacing:0.05em; color:var(--jp-cream-dim);
}
.footer-bottom .legal-links{ display:flex; gap:20px; }
/* Datenschutz und Impressum hatten bisher gar keine Hover-Rückmeldung */
.footer-bottom .legal-links a{ transition:color .16s ease; }
.footer-bottom .legal-links a:hover{ color:var(--jp-gold); }

/* Drei Spalten brauchen zusammen rund 374px — darunter wurde der Footer breiter
   als der Bildschirm. Untereinander wirken die Blöcke linksbündig angeklebt,
   deshalb hier zentriert. Steht bewusst nach den Grundregeln: Media Queries
   erhöhen die Spezifität nicht, spätere gleichrangige Regeln würden gewinnen. */
@media (max-width: 720px){
  .footer-grid{ grid-template-columns:1fr; gap:30px; padding-bottom:30px; text-align:center; }
  /* das Logo ist ein Block-Element und bliebe sonst linksbündig stehen */
  .footer-logo{ margin-left:auto; margin-right:auto; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .footer-bottom .legal-links{ justify-content:center; }
}

/* --- Sticky mobile reserve bar (Standortseite) --- */
.sticky-reserve{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:12px var(--pad);
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--jp-line);
}
@media (max-width:720px){
  .sticky-reserve{ display:block; }
  body{ padding-bottom:64px; }
}
/* Unter ~400px reicht die Breite für „Tisch reservieren" in Versalien mit
   0.14em Sperrung nicht mehr: `white-space:nowrap` aus .btn schiebt den Text
   dann über den Bildschirmrand. Rand und Laufweite hier zurücknehmen. */
@media (max-width:420px){
  .sticky-reserve{ padding:10px 14px; }
  .sticky-reserve .btn{
    padding:14px 12px; font-size:0.8rem; letter-spacing:0.08em;
    min-width:0; max-width:100%; overflow:hidden;
  }
}
@media (max-width:340px){
  .sticky-reserve .btn{ font-size:0.72rem; letter-spacing:0.05em; }
}

/* --- Franchise-Standortliste (Hauptseite) --- */
.loc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.loc-card{
  border:1px solid var(--jp-line); border-radius:var(--radius-m);
  padding:22px 22px 24px; background:var(--jp-charcoal);
  transition:border-color .2s ease, background-color .2s ease;
}
.loc-card:hover{ border-color:var(--jp-gold); background:var(--jp-surface-hover); }
.loc-card .eyebrow{ margin-bottom:10px; font-size:0.72rem; }
.loc-card h3{ font-size:1.4rem; margin:0 0 4px; }
.loc-card span{ color:var(--jp-cream-dim); font-size:0.85rem; }

/* ============================================================
   RECHTSSEITEN (Impressum / Datenschutzerklärung)
   ============================================================ */
.nav-more-sep{
  display:block; height:1px; margin:8px 0;
  background:var(--jp-line);
}

.legal-hero{
  position:relative;
  padding:clamp(48px,7vw,86px) 0 clamp(30px,4vw,46px);
  border-bottom:1px solid var(--jp-line);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(233,177,39,0.12), transparent 62%),
    linear-gradient(180deg, rgba(245,234,199,0.07), var(--jp-black));
}
.legal-hero h1{ font-size:clamp(2.2rem, 5vw, 4rem); }
.legal-hero .lede{ margin:18px 0 0; }
.legal-back{
  display:flex; width:max-content; align-items:center; gap:9px;
  font-family:var(--f-eyebrow); font-size:0.8rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-cream-dim);
  margin-bottom:22px;
  transition:color .16s ease;
}
.legal-back:hover{ color:var(--jp-gold); }
.legal-back svg{ width:15px; height:15px; }

.legal-layout{
  display:grid; grid-template-columns:240px 1fr;
  gap:clamp(28px,5vw,64px);
  padding:clamp(44px,6vw,76px) 0 clamp(56px,8vw,96px);
}
.legal-toc{ position:sticky; top:104px; align-self:start; }
.legal-toc .eyebrow{ margin-bottom:14px; }
.legal-toc a{
  display:block; padding:7px 0;
  font-size:0.9rem; color:var(--jp-cream-dim);
  border-bottom:1px solid transparent;
  transition:color .16s ease;
}
.legal-toc a:hover{ color:var(--jp-gold-light); }

.legal-body{ max-width:72ch; }
.legal-body > section{ scroll-margin-top:104px; }
.legal-body > section + section{
  margin-top:clamp(34px,5vw,54px);
  padding-top:clamp(34px,5vw,54px);
  border-top:1px solid var(--jp-line);
}
.legal-body h2{
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  margin:0 0 18px;
}
.legal-body h3{
  font-size:1.02rem;
  font-family:var(--f-eyebrow);
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--jp-gold-light);
  margin:28px 0 10px;
}
.legal-body h4{
  font-size:0.98rem;
  font-family:var(--f-body);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--jp-cream);
  margin:20px 0 8px;
}
.legal-body p{
  margin:0 0 14px;
  color:var(--jp-cream-dim);
  font-size:0.97rem;
}
.legal-body a:not(.btn){
  color:var(--jp-gold-light);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(245,234,199,0.45);
  overflow-wrap:anywhere;
}
.legal-body a:not(.btn):hover{ color:var(--jp-gold); text-decoration-color:var(--jp-gold); }
.legal-body ul.legal-list{
  list-style:none; margin:0 0 16px; padding:0;
}
.legal-body ul.legal-list li{
  position:relative; padding-left:20px; margin-bottom:8px;
  color:var(--jp-cream-dim); font-size:0.97rem;
}
.legal-body ul.legal-list li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:7px; height:1px; background:var(--jp-gold);
}
.legal-body strong{ color:var(--jp-cream); font-weight:600; }

.legal-card{
  background:var(--jp-charcoal);
  border:1px solid var(--jp-line);
  border-left:2px solid var(--jp-gold);
  border-radius:var(--radius-m);
  padding:22px 24px;
  margin:0 0 20px;
}
.legal-card p{ margin:0 0 6px; }
.legal-card p:last-child{ margin-bottom:0; }
.legal-card .name{
  font-family:var(--f-eyebrow); font-weight:600;
  letter-spacing:0.05em; font-size:1.02rem;
  color:var(--jp-cream);
}
.legal-card.is-note{
  border-left-color:var(--jp-maroon);
  background:linear-gradient(180deg, rgba(233,177,39,0.14), var(--jp-surface) 70%);
}


@media (max-width: 900px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{
    position:static;
    border:1px solid var(--jp-line); border-radius:var(--radius-m);
    padding:20px 22px; background:var(--jp-charcoal);
  }
  }

/* --- Auffangnetz, wenn kein Mailprogramm registriert ist --- */
.mail-fallback{ width:min(560px, calc(100vw - 32px)); }
.mail-fallback-body{ padding:24px 28px 28px; display:flex; flex-direction:column; gap:16px; min-height:0; overflow-y:auto; }
.mail-fallback-body > p{ margin:0; color:var(--jp-cream-dim); font-size:0.95rem; }
.mail-field{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 14px;
  background:var(--jp-charcoal); border:1px solid var(--jp-line);
  border-radius:var(--radius-m); padding:14px 16px;
}
.mail-field-label{
  grid-column:1 / -1;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-gold);
}
.mail-field code{
  /* Corporate Design lässt nur Gin und Montserrat zu — statt einer
     Monospace sorgen hier Zeichenabstand und Tabellenziffern für
     zeichengenaues Ablesen der Adresse. */
  font-family:var(--f-body);
  letter-spacing:0.02em; font-variant-numeric:tabular-nums;
  font-size:0.88rem; color:var(--jp-cream); overflow-wrap:anywhere;
}
.mail-copy{
  background:none; border:1px solid var(--jp-line); border-radius:var(--radius-s);
  padding:7px 13px; color:var(--jp-cream);
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .18s ease, color .18s ease;
}
.mail-copy:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
@media (max-width: 720px){
  .mail-fallback-body{ padding:20px; }
}

/* --- Feiern & Gruppen: ein CTA öffnet die Anlass-Auswahl als Dialog ---
   Die Knöpfe sind so breit wie ihr Text und stehen ab Desktop in einer
   Zeile nebeneinander; erst auf schmalen Screens stapeln sie sich. */
.occasion-picker-list{
  padding:6px 24px 24px;
  display:flex; flex-wrap:wrap; gap:10px;
}
@media (max-width: 560px){
  .occasion-picker-list{ flex-direction:column; }
  .occasion-picker-list .btn{ width:100%; justify-content:center; }
}

/* --- visito-Reservierungswidget (Fremdskript, unten rechts) -----------
   Das Skript rendert <div.visito-rw-wrap><button.visito-rw-launcher>.
   Der Launcher wird hier auf die Optik der Seiten-Buttons gebracht;
   !important, weil das Widget seine Styles selbst mitbringt. */
/* Zusammengefahren nur das Icon; bei Hover/Fokus fährt die Beschriftung aus. */
.visito-rw-launcher{
  display:inline-flex !important; align-items:center !important; gap:0 !important;
  padding:14px !important;
  border-radius:999px !important;
  background:var(--jp-gold) !important;
  color:var(--jp-black) !important;
  border:1px solid var(--jp-gold) !important;
  font-family:var(--f-eyebrow) !important;
  font-weight:600 !important;
  font-size:0.82rem !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.5) !important;
  transition:background-color .18s ease, gap .26s ease, padding .26s ease !important;
}
.visito-rw-launcher > span{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width .26s ease, opacity .2s ease;
}
.visito-rw-launcher:hover,
.visito-rw-launcher:focus-visible{ gap:10px !important; padding:14px 22px 14px 18px !important; }
.visito-rw-launcher:hover > span,
.visito-rw-launcher:focus-visible > span{ max-width:260px; opacity:1; }
/* Ohne Hover (Touch) bleibt die Beschriftung dauerhaft sichtbar */
@media (hover: none){
  .visito-rw-launcher{ gap:10px !important; padding:12px 20px !important; }
  .visito-rw-launcher > span{ max-width:260px; opacity:1; }
}
/* Kein Anheben beim Hover — wie bei allen anderen Buttons der Seite */
.visito-rw-launcher:hover,
.visito-rw-launcher:focus-visible,
.visito-rw-launcher:active{
  background:var(--jp-gold-light) !important;
  transform:none !important;
  /* Grundschatten bleibt, der zusätzliche Ring beim Hover entfällt */
  box-shadow:0 10px 30px rgba(0,0,0,0.5) !important;
}
/* Höher als der Footer-Abschluss, damit Datenschutz und Impressum
   auch am Seitenende frei bleiben. */
.visito-rw-wrap{ bottom:96px !important; }
/* Das mintfarbene Häkchen-Logo des Widgets durch ein passendes Icon ersetzen */
.visito-rw-launcher-logo{ display:none !important; }
.visito-rw-launcher::before{
  content:""; flex-shrink:0; width:17px; height:17px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 720px){
  .visito-rw-launcher{ padding:12px 20px !important; font-size:0.78rem !important; }
  /* Ab hier liegt „Tisch reservieren" als Leiste am unteren Rand — der
     schwebende Knopf daneben wäre dieselbe Aktion doppelt. */
  .visito-rw-wrap{ display:none !important; }
}

/* ============================================================
   SPEISEKARTE — direkt aus der visito-API gerendert
   ============================================================ */
.menu-status{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:60px 20px; text-align:center;
  font-family:var(--f-eyebrow); letter-spacing:0.1em; text-transform:uppercase;
  font-size:0.88rem; color:var(--jp-cream-dim);
}
.menu-status[hidden]{ display:none; }
.menu-status.is-error{ text-transform:none; letter-spacing:0; font-size:1.02rem; }
.menu-status.is-error p{ margin:0; }

/* --- Werkzeugleiste: Filter links, Sprache rechts --- */
.menu-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 24px; flex-wrap:wrap; margin-bottom:22px;
}
.menu-toolbar[hidden]{ display:none; }
.menu-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.menu-filter-label,
.menu-lang-label{
  display:inline-flex; align-items:center; height:34px; box-sizing:border-box;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-black);
}
/* Filterknöpfe sind bewusst gefüllt statt nur umrandet — sonst sind sie von
   den Kategorie-Reitern (.menu-tab, reine Outline) kaum zu unterscheiden. */
.menu-filter-chip{
  height:34px; box-sizing:border-box;
  background:none; border:1px solid var(--jp-green-dark); border-radius:var(--radius-m);
  padding:0 14px; color:var(--jp-black);
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
/* Ein aktiver Knopf zeigt seinen Zustand schon durch die gelbe Fläche —
   ein Hover darauf würde ihn nur widersprüchlich umfärben. */
.menu-filter-chip:hover:not([aria-pressed="true"]){ color:var(--jp-black); border-color: var(--jp-gold);}
.menu-filter-chip[aria-pressed="true"]{
  background:var(--jp-green-dark); border-color:var(--jp-green-dark); color:var(--jp-white);
}
.menu-filter-reset{
  background:none; border:0; padding:6px 4px; color:var(--jp-black);
  font-size:0.8rem; text-decoration:underline; text-underline-offset:3px;
}
.menu-filter-reset:hover{ color:var(--jp-gold); }
.menu-filter-reset[hidden]{ display:none; }

.menu-lang{ display:flex; align-items:center; gap:10px; }
/* Der native Aufklapp-Pfeil sitzt fest am rechten Rand — padding-right
   verschiebt ihn nicht. Deshalb wird er abgeschaltet und durch einen
   eigenen Pfeil ersetzt, der sich frei positionieren lässt. */
.menu-lang-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:var(--jp-gold); color:var(--jp-black);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:15px 15px;
  border:1px solid var(--jp-line); border-radius:var(--radius-s);
  padding:9px 40px 9px 14px;
  font-family:var(--f-body); font-size:0.88rem; line-height:1.3;
  cursor:pointer;
  transition:border-color .18s ease;
}
/* Ohne appearance:none (ältere Firefox/IE) bleibt der Systempfeil — dann
   soll wenigstens der eigene nicht doppelt danebenstehen. */
.menu-lang-select::-ms-expand{ display:none; }
.menu-lang-select:hover{ border-color:var(--jp-gold); }
.menu-lang-select:focus-visible{ border-color:var(--jp-gold); outline:none; }
/* Aufgeklappte Liste ist Systemsache — dort trägt der Browser sein eigenes
   Farbschema, die Optionen brauchen deshalb explizite Farben. */
.menu-lang-select option{ background:var(--jp-charcoal); color:var(--jp-black); }

/* --- Reiterzeilen: je Ebene eigene Gewichtung --- */
.menu-nav{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
/* display:flex würde das hidden-Attribut aushebeln — beim Sprachwechsel
   sollen Reiter und Karte aber verschwinden, bis die Antwort da ist. */
.menu-nav[hidden]{ display:none; }
.menu-body[hidden]{ display:none; }
.menu-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.menu-tab{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid rgba(0,0,0,0.22); border-radius:20px;
  color:var(--jp-black);
  font-family:var(--f-eyebrow); font-weight:600; text-transform:uppercase;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.menu-tab:hover:not(:disabled):not([aria-selected="true"]){ border-color:var(--jp-gold); color:var(--jp-black); }
.menu-tab:disabled{ opacity:0.32; cursor:not-allowed; }
.menu-tab[aria-selected="true"]{
  background:var(--jp-gold); border-color:var(--jp-gold); color:var(--jp-black);
}
.menu-tab-count{
  font-size:0.86em; opacity:0.75;
  border-left:1px solid currentColor; padding-left:7px;
}
/* Drei Ebenen, drei eigene Bildsprachen statt derselben Pille in
   abnehmender Größe — sonst kaum zu unterscheiden, welche Zeile Menü,
   Kategorie oder Unterkategorie ist.
   Ebene 0 — Menü: kräftige, gefüllte Pillen (wie gehabt).
   Ebene 1 — Kategorie: randlose Textreiter, aktiv = Unterstrich in Gold.
   Ebene 2 — Unterkategorie: kleine, dezent gefüllte Tags, aktiv = Schwarz. */
.menu-tabs-0{ padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,0.14); }
.menu-tabs-0 .menu-tab{ padding:9px 18px; font-size:0.76rem; letter-spacing:0.12em; }

.menu-tabs-1{ gap:4px 24px; }
.menu-tabs-1 .menu-tab{
  padding:2px 0 7px; font-size:0.78rem; letter-spacing:0.03em; font-weight:600;
  text-transform:none; color:rgba(0,0,0,0.6);
  background:none; border:0; border-radius:0;
  border-bottom:2px solid transparent;
}
.menu-tabs-1 .menu-tab:hover:not(:disabled):not([aria-selected="true"]){
  background:none; color:var(--jp-black); border-bottom-color:rgba(0,0,0,0.25);
}
.menu-tabs-1 .menu-tab[aria-selected="true"]{
  background:none; color:var(--jp-black); border-bottom-color:var(--jp-gold);
}

.menu-tabs-2{ gap:6px; }
.menu-tabs-2 .menu-tab{
  padding:4px 11px; font-size:0.68rem; letter-spacing:0.02em; font-weight:600;
  text-transform:none; color:rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.14);
  border-radius:var(--radius-s);
}
.menu-tabs-2 .menu-tab:hover:not(:disabled):not([aria-selected="true"]){
  border-color:rgba(0,0,0,0.35); color:var(--jp-black);
}
.menu-tabs-2 .menu-tab[aria-selected="true"]{
  background:var(--jp-black); border-color:var(--jp-black); color:var(--jp-white);
}

/* --- Desktop: Ebene 1 (Kategorie) als linke Spalte, Ebene 2
   (Unterkategorie) rechts darüber der Liste.
   Die Klasse menu--rows-N kommt aus menu.js — sie zählt, wie viele
   Reiterzeilen die aktuell geladene Karte tatsächlich hat. Nur so lässt
   sich rein per CSS unterscheiden „keine Ebene 2" (weiter wie bisher
   gestapelt) von „Ebene 2, aber keine Ebene 3" (Liste rutscht direkt
   unter die Spalte, ohne Lücke) von „alle drei Ebenen". */
@media (min-width: 900px){
  #menu.menu--rows-2,
  #menu.menu--rows-3{
    display:grid;
    grid-template-columns: minmax(200px, 22%) 1fr;
    column-gap:40px; row-gap:16px;
    /* Ohne das würden Ebene 2 (und alle anderen Zeilen) auf die volle
       Zeilenhöhe gestreckt, die die Reihe „tabs1 tabs2“ braucht, damit
       die links durchlaufende Spalte (Ebene 1) genug Platz bekommt — ein
       paar kurze Tags würden dann zu riesigen Kacheln aufgeblasen. Nur
       Ebene 1 selbst soll diese Höhe ausfüllen (siehe unten). */
    align-items:start;
  }
  /* #menu-nav selbst trägt kein eigenes Kästchen mehr — seine Kinder
     (die Reiterzeilen) werden direkte Grid-Kinder von #menu, sonst
     könnte Ebene 1 nicht neben der Liste stehen, die ein Geschwister
     von #menu-nav und nicht sein Kind ist. */
  #menu.menu--rows-2 > #menu-nav,
  #menu.menu--rows-3 > #menu-nav{
    display:contents;
  }
  #menu.menu--rows-2 .menu-toolbar, #menu.menu--rows-3 .menu-toolbar{ grid-area:toolbar; }
  #menu.menu--rows-2 .menu-status,  #menu.menu--rows-3 .menu-status { grid-area:status; }
  #menu.menu--rows-2 .menu-tabs-0,  #menu.menu--rows-3 .menu-tabs-0 { grid-area:tabs0; }
  #menu.menu--rows-2 .menu-tabs-1,  #menu.menu--rows-3 .menu-tabs-1 { grid-area:tabs1; }
  #menu.menu--rows-3 .menu-tabs-2{ grid-area:tabs2; }
  #menu.menu--rows-2 .menu-body,    #menu.menu--rows-3 .menu-body  { grid-area:body; }

  #menu.menu--rows-2{
    grid-template-areas:
      "toolbar toolbar"
      "status  status"
      "tabs0   tabs0"
      "tabs1   body";
  }
  #menu.menu--rows-3{
    grid-template-areas:
      "toolbar toolbar"
      "status  status"
      "tabs0   tabs0"
      "tabs1   tabs2"
      "tabs1   body";
  }

  /* Ebene 1 kippt von der Reiterzeile in eine vertikale Randspalte —
     dieselbe Unterstrich-Logik, nur senkrecht: Farbbalken links statt
     Linie unten, jeder Eintrag eine eigene Zeile. */
  #menu.menu--rows-2 .menu-tabs-1,
  #menu.menu--rows-3 .menu-tabs-1{
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0;
    border-right:1px solid rgba(0,0,0,0.12); padding-right:22px;
    align-self:stretch; /* die Randspalte soll sichtbar über die volle Höhe laufen */
  }
  #menu.menu--rows-2 .menu-tabs-1 .menu-tab,
  #menu.menu--rows-3 .menu-tabs-1 .menu-tab{
    justify-content:space-between; text-align:left; white-space:normal;
    padding:11px 6px 11px 14px; margin:0;
    border:0; border-left:3px solid transparent; border-bottom:1px solid rgba(0,0,0,0.08);
    border-radius:0;
  }
  #menu.menu--rows-2 .menu-tabs-1 .menu-tab:hover:not(:disabled):not([aria-selected="true"]),
  #menu.menu--rows-3 .menu-tabs-1 .menu-tab:hover:not(:disabled):not([aria-selected="true"]){
    background:rgba(0,0,0,0.04); border-left-color:rgba(0,0,0,0.25);
  }
  #menu.menu--rows-2 .menu-tabs-1 .menu-tab[aria-selected="true"],
  #menu.menu--rows-3 .menu-tabs-1 .menu-tab[aria-selected="true"]{
    background:rgba(233,177,39,0.12); border-left-color:var(--jp-gold);
  }
}

@media (max-width: 720px){
  /* Auf dem Handy bricht keine Reiterzeile mehr um — sie läuft seitwärts
     weiter, wie die übrigen Slider der Seite (siehe .review-row). Bewusst
     ohne Pfeile, ohne automatisches Scrollen und ohne eigene Fortschritts-
     anzeige — die lenkte in der Praxis nur ab. Der Hinweis, dass es
     weitergeht, ist der nächste Reiter, der angeschnitten am Rand steht;
     bei natürlichen (nicht einrastenden) Breiten reicht das. `--pad` statt
     eines festen Werts, weil das die Seite überall sonst für den Rand
     benutzt — ein fester Wert läge auf breiteren Handys innerhalb des
     Randes und die Reiter klebten sichtbar näher am Bildschirmrand als der
     übrige Inhalt. */
  .menu-tabs{
    flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 2px;
    scroll-padding-left:var(--pad);
  }
  .menu-tabs::-webkit-scrollbar{ display:none; }
  .menu-tabs .menu-tab{ flex:0 0 auto; }
}

.menu-section-desc{
  margin:0 0 14px; color:var(--jp-black); font-size:1.08rem; font-style:italic;
}
/* Der letzte Text vor den Gerichten trägt den Abstand zum Block */
.menu-section-desc:last-of-type{ margin-bottom:24px; }
.menu-empty{ margin:0; padding:26px 0; color:var(--jp-black); font-size:1.02rem; }

/* Überschriften, sobald die Reitertiefe erschöpft ist. Eigene, kräftigere
   Bildsprache (Display-Font statt Eyebrow-Font, dunkle Farbe + Goldlinie)
   statt Gold-auf-Beige — sonst kaum lesbar und optisch nicht von den
   Gerichttiteln zu unterscheiden. */
.menu-group{ margin:44px 0 18px; }
.menu-group:first-child{ margin-top:0; }
.menu-group h3{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.15rem, 2vw, 1.4rem); letter-spacing:0.01em;
  margin:0; padding-bottom:10px;
  color:var(--jp-black); border-bottom:2px solid var(--jp-gold);
}
.menu-group-desc{ margin:10px 0 0; color:var(--jp-cream-dim); font-size:1.02rem; font-style:italic; }

/* --- Gerichte --- */
.menu-items{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:4px 48px;
}
.menu-item{ padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.08); }
.menu-item.has-image{ display:flex; gap:16px; align-items:flex-start; }
.menu-item-media{
  flex:0 0 88px; aspect-ratio:1/1; border-radius:var(--radius-m);
  overflow:hidden; background:var(--jp-charcoal);
}
.menu-item-media img{ width:100%; height:100%; object-fit:cover; }
.menu-item-main{ flex:1; min-width:0; }
.menu-item-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.menu-item-title{
  margin:0; font-family:var(--f-eyebrow); font-weight:600;
  font-size:1.1rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--jp-black);
}
/* Artikelnummer der Karte, sofern die API eine liefert */
.menu-item-code{
  display:inline-block; margin-right:2px;
  color:var(--jp-black); font-variant-numeric:tabular-nums;
}
/* Kennzeichnung: anklickbar, öffnet die Erklärung als Dialog */
.menu-marks{
  background:none; border:0; padding:0 2px;
  font-family:inherit; font-size:0.66em; font-weight:400;
  letter-spacing:0.06em; color:var(--jp-black);
  vertical-align:super; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-style:dotted;
  transition:color .18s ease;
}
.menu-marks:hover{ color:var(--jp-gold); }
.menu-price{
  flex-shrink:0; font-family:var(--f-eyebrow); font-weight:600;
  font-size:1.08rem; color:var(--jp-green-dark); white-space:nowrap;
}
.menu-item-desc{
  margin:6px 0 0; color:var(--jp-black); font-size:1rem; line-height:1.55;
}
.menu-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.menu-badge{
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-green-dark); border:1px solid rgba(49,48,16,0.35);
  border-radius:20px; padding:4px 11px;
}
/* Varianten (Größen/Sorten) und wählbare Optionen */
.menu-variants,
.menu-options{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:3px; }
.menu-variants li,
.menu-options li{
  display:flex; justify-content:space-between; gap:14px;
  font-size:0.98rem; color:var(--jp-cream-dim);
}
.menu-variants li span:last-child,
.menu-options li span:last-child{ color:var(--jp-green-dark); white-space:nowrap; }
.menu-options-wrap{ margin-top:10px; padding-left:12px; border-left:1px solid rgba(0,0,0,0.14); }
.menu-options-toggle{
  display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}
.menu-options-label{
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-cream-dim);
}
.menu-options-chevron{
  width:13px; height:13px; color:var(--jp-gold); flex-shrink:0;
  transition:transform .2s ease;
}
.menu-options-toggle[aria-expanded="true"] .menu-options-chevron{ transform:rotate(180deg); }
.menu-options-panel[hidden]{ display:none; }

/* --- Reservierung mit Bezug zum Event (visito-Widget im iFrame) --- */
.reservation-modal{
  width:min(480px, calc(100vw - 32px));
  height:min(760px, calc(100vh - 32px));
}
.reservation-modal-date{
  margin:4px 0 0;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.8rem; letter-spacing:0.04em;
  color:var(--jp-gold-light);
}
.reservation-modal-body{ flex:1; min-height:0; overflow-y:auto; }   /* gastronovi meldet die Höhe per setHeight — der Dialog scrollt */
.reservation-modal-body iframe{ display:block; width:100%; height:100%; min-height:100%; border:0; }

/* --- Wochenaktionen: Detail-Modal (wiederverwendet renderItem() aus
   menu.js — dessen Klassen sind auf die helle Speisekarten-Sektion
   ausgelegt, hier läuft der Dialog aber dunkel wie alle anderen. Nur die
   unbedingt schwarzen Regeln brauchen deshalb eine Gegen-Regel.) --- */
.week-detail-modal{ width:min(640px, calc(100vw - 32px)); }
.week-detail-body{
  /* padding-bottom reserviert Platz für das Maskottchen (siehe unten) —
     sonst deckt es beim Runterscrollen den letzten Eintrag zu. */
  padding:4px 24px 130px; overflow-y:auto; min-height:0;
}
.week-detail-intro{ margin:0 0 4px; }
.week-detail-day{
  display:block; margin:0 0 6px;
  font-family:var(--f-eyebrow); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--jp-gold);
}
.week-detail-intro p{ margin:0 0 8px; color:var(--jp-cream); font-size:0.98rem; line-height:1.55; }
.week-detail-lead{ font-style:italic; }
.week-detail-visito{ margin-top:18px; padding-top:18px; border-top:1px solid var(--jp-line); }
.week-detail-body .menu-item-desc,
.week-detail-body .menu-empty{ color:var(--jp-cream-dim); }
.week-detail-body .menu-item-code,
.week-detail-body .menu-marks{ color:var(--jp-cream); }
.week-detail-body .menu-item{ padding-top:18px; padding-bottom:18px; }
.week-detail-body .menu-item:first-child{ padding-top:0; }
/* Überschrift, Gerichtname und Preis: die Speisekarte hat diese Klassen
   auf Schwarz/Grün (helle Fläche) umgefärbt — hier, auf dem dunklen
   Wochenaktionen-Dialog, wären sie unsichtbar. Zurück auf die alten,
   für dunklen Grund gedachten Farben, nur innerhalb dieses Dialogs. */
.week-detail-body .menu-group h3{ color:#F5EAC7; }
.week-detail-body .menu-item-title{ color:#E9B127; }
.week-detail-body .menu-price{ color:#E9B127; }
.week-detail-body .menu-variants li span:last-child,
.week-detail-body .menu-options li span:last-child{ color:#E9B127; }
.week-detail-body .menu-badge{ color:#FFFFFF; border-color:rgba(255,255,255,0.35); }

/* Maskottchen unten links im Dialog — dekorativ, blockt keine Klicks und
   bleibt beim Scrollen der Karte an derselben Stelle stehen (an den
   Dialog selbst positioniert, nicht an .week-detail-body). Kein eigenes
   `position:relative` auf .week-detail-modal nötig — <dialog> ist im
   geöffneten Zustand laut UA-Stylesheet bereits `position:fixed` und damit
   selbst schon Positionierungskontext. Ein `position:relative` hier hatte
   genau das überschrieben und den Dialog aus dem Fixed-Layout gekippt —
   das ließ beim Öffnen die ganze Seite nach oben springen. */
.week-detail-mascot{
  position:absolute; left:-8px; bottom:-6px; z-index:2;
  width:clamp(70px, 16vw, 108px); height:auto;
  pointer-events:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}

/* --- Wochenaktionen-Gruppen mit geteiltem Preis/Optionen (z. B. eine
   Burger-Reihe zum selben Preis) — siehe renderWeekItems() in menu.js --- */
.week-shared-group{
  margin:18px 0; padding:20px;
  border:1px solid var(--jp-line); border-radius:var(--radius-m);
}
.week-shared-price{
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.86rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--jp-gold); margin-bottom:14px;
}
.week-shared-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px 28px;
}
.week-shared-card h4{
  margin:0 0 4px; font-family:var(--f-eyebrow); font-weight:600;
  font-size:1rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--jp-gold);
}
.week-shared-card p{ margin:0; color:var(--jp-cream-dim); font-size:0.92rem; }
.week-shared-options{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--jp-line);
}

/* --- Dialog mit der Kennzeichnung eines Gerichts --- */
.marks-dialog{ width:min(460px, calc(100vw - 32px)); }
.marks-dialog .event-modal-head h2{
  font-size:clamp(1.1rem, 2.2vw, 1.4rem); line-height:1.15;
}
.marks-dialog-body{ padding:20px 24px 24px; display:grid; gap:18px; min-height:0; overflow-y:auto; }
.marks-dialog-body h4{
  margin:0 0 9px; font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.84rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-gold);
}
.marks-dialog-body ul{ display:grid; gap:6px; }
.marks-dialog-body li{
  display:flex; gap:10px; align-items:baseline;
  font-size:1rem; color:var(--jp-cream-dim);
}
.menu-legend-key{
  flex-shrink:0; min-width:20px; text-align:center;
  font-family:var(--f-eyebrow); font-weight:600;
  color:var(--jp-gold); border:1px solid var(--jp-line); border-radius:3px;
  font-size:0.82rem; padding:2px 5px;
}

/* --- Event-Hinweis beim Erreichen der Speisekarte --- */
/* Event-Plakate sind oft hochformatig: Kopfzeile bleibt stehen, der Rest
   scrollt im Dialog — so bleibt das Bild vollständig sichtbar. */
.event-teaser{
  width:min(480px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  display:flex; flex-direction:column;
}
.event-teaser:not([open]){ display:none; }
.event-teaser .event-modal-head{ flex-shrink:0; }
.event-teaser-scroll{ overflow-y:auto; min-height:0; }
.event-teaser-media{ line-height:0; border-bottom:1px solid var(--jp-line); }
.event-teaser-media[hidden]{ display:none; }
/* ungeschnitten in voller Höhe — der Scrollbereich fängt das ab */
.event-teaser-media img{ width:100%; height:auto; display:block; }
.event-teaser-body{ padding:20px 24px 24px; display:grid; gap:12px; }
.event-teaser-date{
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-gold);
}
.event-teaser-body p{ margin:0; color:var(--jp-cream-dim); font-size:0.95rem; }
.event-teaser-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

@media (max-width: 720px){
  .menu-items{ grid-template-columns:1fr; gap:0; }
  .menu-toolbar{ gap:14px; }
}


/* Standorte ohne visito-Reservierung: Event-Karten bleiben Infokarten */
.no-reserve .event-card-cta,
.no-reserve .calendar-detail-event .btn[data-reserve-date]{ display:none; }
.no-reserve .event-card{ cursor:default; }

/* Reservierungsbereich je Plattform (Linkout-Button, Telefon, ggf. gastronovi-iframe) */
.reservation-embed{ max-width:100%; }
/* liegt im beigen Kontaktbereich: dunkle Schrift, sonst verschwindet der Link auf dem Hintergrund */
.reservation-phone{ margin:12px 0 0; color:rgba(0,0,0,0.72); font-size:0.95rem; }
.reservation-phone a{ color:var(--jp-black); font-weight:600; text-decoration:underline; }
.reserve-panel{ max-width:100%; }
.reservation-embed iframe{ max-width:100% !important; }

/* Cookie-/Drittanbieter-Banner (Reservierungs-Widget) */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  max-width:760px; margin:0 auto;
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:16px 18px;
  background:rgba(12,12,12,0.97); color:var(--jp-cream);
  border:1px solid var(--jp-gold); border-radius:var(--radius-m);
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-text{ flex:1 1 320px; min-width:0; }
.cookie-banner-text strong{ font-family:var(--f-eyebrow); letter-spacing:0.08em; text-transform:uppercase; font-size:0.82rem; color:var(--jp-gold-light); }
.cookie-banner-text p{ margin:6px 0 0; font-size:0.86rem; line-height:1.5; color:var(--jp-cream-dim); }
.cookie-banner-text a{ color:var(--jp-gold-light); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:720px){
  .cookie-banner{ bottom:76px; }   /* über der Sticky-Reservierungsleiste */
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1 1 0; }
}

/* Schwebe-Knopf Reservierung (gastronaut/gastronovi) — Optik wie der Knopf von visito */
.res-fab{
  position:fixed; right:24px; bottom:24px; z-index:95;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--jp-gold); color:var(--jp-black);
  box-shadow:0 4px 14px rgba(0,0,0,0.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.res-fab:hover{ transform:scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,0.55); }
.res-fab svg{ width:22px; height:22px; }
@media (max-width:720px){ .res-fab{ right:16px; bottom:80px; } }   /* über der Sticky-Leiste */