/* ============================================================
   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    Fließtext auf Dunkel, Flächen als Schleier
     Weiss    #ffffff    Reinweiß, sparsam

   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-cream:  #f5eac7;   /* Beige */
  --jp-white:  #ffffff;   /* Weiss */
  --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 */
  --jp-gold-light: var(--jp-cream);
  --jp-cream-dim:  rgba(245,234,199,0.72);     /* 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-cream);
  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-cream);
}
/* 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;
}

.section{
  padding:clamp(56px,9vw,110px) 0;
  border-bottom:1px solid var(--jp-line);
}
.section-head{
  margin-bottom:clamp(28px,5vw,48px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}

/* --- 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(245,234,199,0.55);
}
/* 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; }

/* 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(180deg, rgba(0,0,0,0.55) 0%, var(--jp-black) 92%),
    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%;
}
.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);
}
.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-cream-dim); 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(245,234,199,0.35);
  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 / STAMPS
   ============================================================ */
.pasaporte{
  background:linear-gradient(155deg, rgba(233,177,39,0.18) 0%, var(--jp-black) 100%);
  border-radius:var(--radius-m);
  padding:clamp(32px,6vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.pasaporte h2{ color:var(--jp-cream); }
.pasaporte .lede{ color:rgba(245,234,199,0.85); }
.stamp-row{ display:flex; gap:14px; flex-wrap:wrap; }
.stamp{
  width:64px; height:64px; border-radius:50%;
  border:2px dashed rgba(245,234,199,0.5);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); color:rgba(245,234,199,0.65); font-size:0.85rem;
}
@media (max-width: 860px){ .pasaporte{ grid-template-columns:1fr; } }

/* ============================================================
   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/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/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-green-dark); 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-cream-dim); 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; color:var(--jp-cream);
}

/* ============================================================
   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(240px, 31%, 340px); 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; }
/* Verlauf für die Bildunterschrift */
.gallery-item::after{
  content:""; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(to top, rgba(0,0,0,0.92), transparent);
  pointer-events:none;
}
.gallery-item-caption{
  position:absolute; left:16px; right:52px; bottom:13px; z-index:1;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--jp-cream); text-align:left;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
}
.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; }
  .lightbox-nav{ grid-row:2; width:42px; height:42px; }
  .lightbox-nav.prev{ grid-column:1; justify-self:start; }
  .lightbox-nav.next{ grid-column:1; justify-self:end; margin-top:-42px; }
  .lightbox-figure img{ max-height:calc(100vh - 190px); }
}

/* ============================================================
   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,
.occasion-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-line); border-radius:var(--radius-s);
  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; cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.job-contact:hover{ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.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 — Kachel-Grid (Desktop) / Karussell (Mobile)
   Die Aktionen des laufenden Tages werden von page-location.js mit
   .is-today ausgezeichnet und per `order` nach vorn sortiert.
   ============================================================ */
/* 280px als Mindestbreite ergibt auf Desktop 3 Spalten — zusammen mit der
   doppelt breiten Tagesaktion gehen die 8 Aktionen genau in 3 Reihen auf. */
.week-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;
}
/* Bewusst ohne Hover-Effekt: die Kacheln sind nicht klickbar, eine
   Hover-Reaktion würde Interaktivität vortäuschen. */
.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-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.week-tile-media img{ width:100%; height:100%; object-fit:cover; }
/* Textfläche in Grün-dunkel, deckend und ohne Verlauf. Sie beginnt dort, wo
   das Bild endet — keine Überlappung. */
.week-tile-body{
  padding:16px 22px 24px;
  display:flex; flex-direction:column; gap:8px; flex:1;
  background:var(--jp-green-dark);
}
.week-tile .day{
  font-family:var(--f-eyebrow); font-size:0.76rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--jp-gold);
}
.week-tile h3{ font-size:1.15rem; margin:0; }
.week-tile p{ margin:0; color:var(--jp-cream-dim); font-size:0.9rem; }
.week-tile-lead{ color:var(--jp-cream) !important; font-style:italic; }

/* --- Heute-Hervorhebung --- */
.week-tile-flag{
  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{
  border-color:var(--jp-gold);
  box-shadow:0 0 0 1px var(--jp-gold), 0 16px 40px rgba(233,177,39,0.16);
}

/* Tagesaktion: doppelt so breit, Bild und Text nebeneinander */
.week-tile.is-today-feature{ grid-column:span 2; }
.week-tile.is-today-feature .week-tile-body{ padding:22px 26px 26px; gap:10px; }
.week-tile.is-today-feature h3{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.week-tile.is-today-feature p{ font-size:0.98rem; }
@media (min-width: 900px){
  .week-tile.is-today-feature{ flex-direction:row; }
  .week-tile.is-today-feature .week-tile-media{ flex:0 0 46%; aspect-ratio:auto; }
  .week-tile.is-today-feature .week-tile-body{ justify-content:center; }
}

/* Begleitzeile im Abschnittskopf */
.today-hint{
  margin:14px 0 0;
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.86rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--jp-gold-light);
  display:flex; align-items:center; gap:9px;
}
.today-hint::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--jp-gold); flex-shrink:0;
  box-shadow:0 0 0 4px rgba(233,177,39,0.2);
}
/* display:flex würde das hidden-Attribut aushebeln — ohne JS bleibt die
   Zeile so zuverlässig ausgeblendet. */
.today-hint[hidden]{ display:none; }

@media (max-width: 720px){
  .week-grid{
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:8px; margin:0 -20px; padding-left:20px; padding-right:20px;
    -webkit-overflow-scrolling:touch;
  }
  .week-grid::-webkit-scrollbar{ display:none; }
  .week-tile{ flex:0 0 78%; scroll-snap-align:start; }
  /* im Karussell bekommt die Tagesaktion mehr Fläche statt einer zweiten Spalte */
  .week-tile.is-today-feature{ flex:0 0 88%; }
}

/* ============================================================
   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;
  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){
  .event-modal{ max-height:calc(100vh - 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); }
  /* Einspaltig stehen Kalender und Detail untereinander — dann scrollt
     sinnvollerweise der ganze Rumpf statt jeder Block für sich. */
  .event-modal-body{ grid-template-columns:1fr; overflow-y:auto; }
  .calendar{
    border-right:0; border-bottom:1px solid var(--jp-line); padding:20px;
    overflow:visible;
  }
  .calendar-detail{ padding:20px 20px 24px; overflow:visible; }
  .event-modal-head{ padding:20px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ padding:56px 0 0; }
.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); }
.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: Anlass-Slider --- */
.occasion-slider{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:26px; }
.occasion-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.occasion-tab{
  background:none; border:1px solid var(--jp-line); border-radius:20px;
  padding:8px 16px; color:var(--jp-cream-dim);
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.occasion-tab:hover:not([aria-selected="true"]){ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.occasion-tab[aria-selected="true"]{
  background:var(--jp-gold); border-color:var(--jp-gold); color:var(--jp-black);
}
.occasion-text{
  margin:0; color:var(--jp-cream-dim);
  /* Höhe des längsten Textes reservieren, damit der Button nicht springt */
  min-height:5.2em;
}
@media (max-width: 860px){ .occasion-text{ min-height:0; } }

/* --- 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{
  font-family:var(--f-eyebrow); font-weight:600;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--jp-cream-dim);
}
.menu-filter-chip{
  background:none; border:1px solid var(--jp-line); border-radius:20px;
  padding:7px 14px; color:var(--jp-cream-dim);
  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"]){ border-color:var(--jp-gold); color:var(--jp-gold-light); }
.menu-filter-chip[aria-pressed="true"]{
  background:var(--jp-gold); border-color:var(--jp-gold); color:var(--jp-black);
}
.menu-filter-reset{
  background:none; border:0; padding:6px 4px; color:var(--jp-cream-dim);
  font-size:0.8rem; text-decoration:underline; text-underline-offset:3px;
}
.menu-filter-reset:hover{ color:var(--jp-gold-light); }
.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-black); color:var(--jp-cream);
  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='%23e9b127' 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-cream); }

/* --- 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 var(--jp-line); border-radius:20px;
  color:var(--jp-cream-dim);
  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-gold-light); }
.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;
}
/* Ebene 0 am kräftigsten, jede weitere Zeile zurückhaltender */
.menu-tabs-0{ padding-bottom:14px; border-bottom:1px solid var(--jp-line); }
.menu-tabs-0 .menu-tab{ padding:9px 18px; font-size:0.76rem; letter-spacing:0.12em; }
.menu-tabs-1 .menu-tab{ padding:7px 15px; font-size:0.7rem; letter-spacing:0.1em; }
.menu-tabs-2 .menu-tab{
  padding:5px 12px; font-size:0.66rem; letter-spacing:0.08em;
  border-radius:var(--radius-s);
}

.menu-section-desc{
  margin:0 0 14px; color:var(--jp-cream-dim); 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-cream-dim); font-size:1.02rem; }

/* Überschriften, sobald die Reitertiefe erschöpft ist */
.menu-group{ margin:34px 0 16px; }
.menu-group:first-child{ margin-top:0; }
.menu-group h3{
  font-size:1rem; margin:0;
  font-family:var(--f-eyebrow); font-weight:700;
  letter-spacing:0.16em; color:var(--jp-gold);
}
.menu-group-desc{ margin:8px 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(245,234,199,0.07); }
.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-cream);
}
/* Artikelnummer der Karte, sofern die API eine liefert */
.menu-item-code{
  display:inline-block; margin-right:2px;
  color:var(--jp-gold); 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-cream-dim);
  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-light); }
.menu-price{
  flex-shrink:0; font-family:var(--f-eyebrow); font-weight:600;
  font-size:1.08rem; color:var(--jp-gold-light); white-space:nowrap;
}
.menu-item-desc{
  margin:6px 0 0; color:var(--jp-cream-dim); 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-gold); border:1px solid rgba(233,177,39,0.45);
  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-gold-light); white-space:nowrap; }
.menu-options-wrap{ margin-top:10px; padding-left:12px; border-left:1px solid var(--jp-line); }
.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);
}

/* --- 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; }
}