/* ===== QADMOUS — faithful rebuild (real palette & fonts) ===== */
:root {
  --page: #1d0f10;
  --burg1: #ffeaa4;
  --burg2: #ffeaa4;
  --box: #2a1719;
  --box2: #181310;
  --box3: #452323;
  --gold: #ecc386;
  --gold2: #c2a66d;
  --gold-lt: #f8f6b3;
  --gold-deep: #cd5000;
  --cream: #eeebe4;
  --muted: #9b7d66;
  --line: rgba(236, 195, 134, 0.30);
  --serif: 'AmpNormal', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body: 'AmpNormal', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}

/* use a normal (non-swash) ampersand everywhere — Playfair's & is decorative */
@font-face {
  font-family: 'AmpNormal';
  src: local('Georgia'), local('Times New Roman'), local('Arial');
  unicode-range: U+0026;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--page);
  color: var(--cream);
  font-family: var(--body);
  line-height: 1.6;
}

/* let the injected header/nav be direct children of body so the nav can stay sticky across the whole page */
#chrome-top { display: contents; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Section titles */
.sec-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--gold);
  text-align: center;
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  margin-left: 2%;
}
.sec-title::after {
  content: "";
  display: block;
  width: 120px; height: 2px;
  margin: 0.7rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.sec-title.sm { font-size: 1.7rem; text-align: left; }
.sec-title.sm::after { margin: 0.6rem 0 0; }

/* Original-style buttons: Palatino, engraved bronze text, beveled dark burgundy, gold glow on hover */
.btn-gold, .col-btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: #d8bd7f;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #5b3333 0%, #3c1f1f 55%, #2d1616 100%);
  border: 1px solid #7a5c33;
  border-radius: 5px;
  padding: 0.6rem 1.7rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(236,195,134,0.25), inset 0 -2px 5px rgba(0,0,0,0.45), 0 2px 5px rgba(0,0,0,0.5);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-gold:hover, .col-btn:hover {
  color: #f6e6b0;
  border-color: #ad8b57;
  text-shadow: 0 0 4px #ecc386, 0 0 7px rgba(236,195,134,0.55), 1px 1px 0 rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #6a3d3d 0%, #472525 100%);
}
.link-more { display: inline-block; margin-top: 0.7rem; color: var(--gold); font-style: italic; }
.link-more:hover { color: var(--gold-lt); }

/* ===== HEADER ===== */
.site-header {
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(236,195,134,0.14), transparent 60%),
    linear-gradient(180deg, var(--burg1), var(--burg2));
  border-bottom: 1px solid rgba(0,0,0,0.5);
  position: relative;
}
.header-inner {
  max-width: none; margin: 0; padding: 14px 26px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  /* Kopfbereich in Grau; die Menüleiste darunter ist #757474 */
  background: #b89171;
}
.hdr-left { text-align: left; margin-left: 4%;}
/* top-left corner label, copper to match the logo */
.hdr-left { position: absolute; top: 10px; left: 16px; margin: 0; padding: 0; z-index: 2; }
.hdr-tag { font-family: var(--serif); color: #862f00; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.hdr-tag-sub { color: #964800; font-size: 1.15rem; line-height: 1.4; margin-top: 2px; }
.hdr-tel { display: inline-block; margin-top: 3px; color: #964800; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.hdr-tel:hover { color: #964800; }
.header-inner { padding-left: 14px; padding-top: 2%;}
.hdr-left { padding-left: 0; }
.hdr-arabic-note { color: var(--gold2); font-size: 0.85rem; margin-top: 6px; direction: rtl; }

.hdr-center { text-align: center; grid-column: 2; }
.logo-img { height: 165px; width: auto; max-width: 100vw; margin: 0 auto; transform: translateY(-9px) scaleX(1.42) scaleY(1.32); transform-origin: center; filter: brightness(1.12) saturate(1.04) drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.hdr-center { overflow: visible; }
/* Luft über und unter dem Logo — füllt den Platz, der durch die entfernten
   Zeilen frei geworden ist */
.hdr-center { padding: 10px 0 14px; }
@media (max-width: 1200px) { .logo-img { transform: translateY(-8px) scaleX(1.18) scaleY(1.15); } }
.hdr-logo-sub { color: var(--gold-lt); font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.14em; margin-top: 5px; text-transform: uppercase; }
.hdr-quicklinks { margin-top: 8px; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--gold2); }
.hdr-quicklinks a { color: var(--gold); }
.hdr-quicklinks a:hover { color: var(--gold-lt); }
.hdr-quicklinks span { margin: 0 6px; opacity: 0.5; }

.hdr-right { text-align: right; font-size: 0.8rem; color: var(--cream); }
.hdr-social { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
.hdr-social img { width: 26px; height: 26px; transition: transform 0.2s; }
.hdr-social img:hover { transform: translateY(-2px); }
.hdr-hotline-label { color: var(--gold2); letter-spacing: 0.14em; font-size: 0.68rem; }
.hdr-phone { font-family: var(--serif); color: var(--gold-lt); font-size: 1.25rem; font-weight: 600; display: block; }
.hdr-hours { color: var(--muted); font-size: 0.72rem; margin: 2px 0 6px; }
.hdr-pay-label { color: var(--gold2); font-size: 0.66rem; letter-spacing: 0.06em; }
.hdr-pay { display: flex; gap: 5px; justify-content: flex-end; margin: 4px 0 6px; }
.pay { font-size: 0.6rem; background: #f2efe6; color: #333; padding: 2px 5px; border-radius: 2px; letter-spacing: 0.03em; }
/* real card icons */
.pay-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pay-icons img { width: 46px; height: auto; border-radius: 3px; background: #fff; padding: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.hdr-360 { color: var(--gold); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 6px; }
.hdr-360 img { width: 30px; }
.nav-toggle { display: none; background: none; border: none; color: var(--gold); font-size: 1.8rem; cursor: pointer; }

/* header (logo) + nav bar stick and travel together */
.site-top { position: sticky; top: 0; z-index: 300; }
/* anchored sections always land BELOW the sticky header, never hidden behind it */
:root {
  --top-h: 240px;
  /* Wie weit die Karte im Navigationspanel unter die Kuppelreihe rutscht: die
     GANZE Reihenhöhe. Vorher waren es nur 57px, also der Teil unterhalb der
     Leiste — die oberen 50px blieben dunkel und standen als Streifen über der
     Karte. --trig-h ist die Höhe der Reihe des offenen Panels und wird in
     partials.js laufend nachgemessen. */
  --nav-overlap: var(--trig-h, 107px);
  /* Hoehe der Burgunderleiste hinter den Kuppeln (.panels::before) */
  --bar-h: 50px;
}
/* Flush against the header, with no breathing gap: any margin here shows up as a
   strip of whatever sits above the target — the hero photo — peeking out under
   the nav bar once the scroll lands. */
.panels, .panel, .row-burg, .impressions, [id^="p-"], [id^="sub-"], [id^="sec-"] {
  scroll-margin-top: var(--top-h);
}

/* ===== NAV BAR ===== */
.menubar {
  position: relative; z-index: 200;
  /* Derselbe Farbverlauf wie zuvor, aber in Prozent statt in Pixeln: die alten
     Stopps (transparent bis 13px, dann #693e3e … #211111 bei 50px) gingen von
     einer 50px hohen Leiste aus. Sobald die Menüpunkte auf zwei oder drei
     Zeilen umbrechen (bei 1280px sind es 81px), lag der Verlauf im oberen
     Drittel und die ersten 13px blieben durchsichtig — dort schien die Seite
     durch. Mit 0–100% füllt derselbe Verlauf die Leiste in jeder Höhe. */
  background: #8f6f55;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid rgba(0,0,0,0.6);
  box-shadow: 0 0 14px rgba(236,195,134,0.18), 0 3px 10px rgba(0,0,0,0.5);
}
.menu { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; max-width: none; margin: 0; padding: 0 16px; }
.menu li { position: relative; }
.menu li + li::before,
.menu li:first-child::before,
.menu li:last-child::after {
  content: "\25CF"; position: absolute; top: 50%; transform: translateY(-50%);
  color: #ffeaa4; opacity: 1; font-size: 1rem; line-height: 1;
}
.menu li + li::before,
.menu li:first-child::before { left: -5px; }
.menu li:last-child::after { right: -5px; }
.menu a {
  display: block; padding: 7px 11px;
  font-family: var(--serif); font-size: 1rem; letter-spacing: 0.02em;
  color: #ffeaa4; font-weight: 600; transition: color 0.2s;
}
/* "Startseite" lässt Germany/English dreimal aufblinken — der Gast soll sehen,
   wo die Sprache umgestellt wird. Keyframes statt transition: ein einmaliger
   Ablauf, keine Zustandsänderung. */
@keyframes lang-blink {
  0%, 100% { color: #ffeaa4; text-shadow: none; }
  50%      { color: #fff6d8; text-shadow: 0 0 10px rgba(255,234,164,0.95), 0 0 18px rgba(236,195,134,0.7); }
}
.menu a.lang-pick.is-blinking { animation: lang-blink 0.5s ease-in-out 3; }
/* wer Bewegung reduziert hat, bekommt eine ruhige Hervorhebung statt Blinken */
@media (prefers-reduced-motion: reduce) {
  .menu a.lang-pick.is-blinking {
    animation: none; color: #fff6d8;
    background: rgba(255,234,164,0.18); border-radius: 3px;
  }
}
/* social icons at the end of the menu bar */
/* Extra room before the icon cluster as PADDING, not margin: the separator dot is
   this item's ::before at left:-5px, so a margin would drag the dot along too. */
.menu-social { display: flex; align-items: center; gap: 9px; padding: 0 11px 0 34px; }
.menu-social a { display: inline-flex; padding: 0; }
.menu-social img { width: 22px; height: 22px; transition: transform 0.18s ease; }
.menu-social a:hover img { transform: translateY(-2px); }
.menu li.menu-social::after { content: none; }
.menu li.menu-social { position: relative; }

/* Sprachwahl: keine eigene Farbe und keine Markierung der laufenden Sprache —
   die beiden Einträge erben alles von .menu a wie jeder andere Menüpunkt. */
.menu a.lang-pick.is-active { color: inherit; }
/* Nach einem Druck auf "Menü" blinken beide so lange, bis der Gast eine Sprache
   gewählt hat. Die Farbe wechselt mit, damit es auch bei hellem Hintergrund
   auffällt. */
@keyframes langBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.12; }
}
/* langsameres, ruhigeres Blinken */
.menu a.lang-pick.lang-blink { animation: langBlink 1.2s ease-in-out infinite; }
/* Kein Farbwechsel in der Menueleiste: weder beim Ueberfahren noch nachdem ein
   Eintrag angeklickt wurde (Fokus bleibt sonst als andere Farbe stehen). Alle
   Eintraege behalten immer ihr #ffeaa4. */
.menu a:hover,
.menu a:focus,
.menu a:active,
.menu a:visited,
.menu a.active { color: #ffeaa4; text-shadow: none; }
.menu a:focus { outline: none; }
.menu a.active { border-bottom: 0; }

/* ===== SUB-PAGE HERO ===== */
.page-hero {
  background: linear-gradient(180deg, #5a3636, #3a2020);
  border-bottom: 1px solid var(--line);
  padding: 2.6rem 1rem; text-align: center;
}
.page-hero h1 {
  font-family: var(--serif); color: var(--gold); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  text-shadow: 0 -1px 1px rgba(248,233,176,0.5), 0 3px 6px rgba(0,0,0,0.85);
}
.page-hero p { color: var(--cream); font-style: italic; margin-top: 0.6rem; }
.page-section { padding: 3.2rem 0; }
.map-frame { border: 3px solid var(--box3); box-shadow: 0 0 0 1px var(--gold2), 0 8px 20px rgba(0,0,0,0.6); line-height: 0; }
.map-frame iframe { display: block; filter: saturate(0.9); width: 100%; height: 380px; border: 0; }
/* big map inside the Navigation panel — fills the full width & height of the area */
#p-navigation .wrap { max-width: none; padding: 0 14px; }
.map-big { width: 100%; }
.map-big iframe { height: 82vh; min-height: 560px; }
/* "Route berechnen" sits under the title, above the map */
.map-cta { text-align: center; margin: 0 0 0.9rem; flex: 0 0 auto; }

/* Titel und Button schweben ÜBER der Karte, sie belegen keine eigene Höhe.
   Diese Regeln stehen bewusst AUSSERHALB der 901px-Media-Query: stünden sie nur
   darin, liefen beide bei jeder Abweichung wieder im Textfluss mit — und genau
   dann schiebt der Titel die Karte um seine Höhe nach unten, was als dunkles
   Band zwischen Leiste und Karte sichtbar wird. */
#p-navigation .wrap { position: relative; }
#p-navigation.open .map-title,
#p-navigation.open .map-cta {
  position: absolute; z-index: 6; margin: 0;
}
#p-navigation.open .map-title {
  top: 20px; left: 0; right: 0; text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.9);
}
#p-navigation.open .map-title::after { content: none; }
#p-navigation.open .map-cta {
  top: 72px; left: 50%; right: auto; transform: translateX(-50%);
}

/* ===== IMPRESSIONS STRIP ===== */
.impressions { background: linear-gradient(180deg, #2a1616, #1d0f10); padding: 2.4rem 0; }
.impressions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.impressions-grid img {
  width: 100%; height: 280px; object-fit: cover;
  border: 2px solid var(--box3); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(236,195,134,0.25), 0 4px 12px rgba(0,0,0,0.5);
  filter: brightness(0.94); transition: filter 0.25s, transform 0.25s;
}
.impressions-grid img:hover { filter: brightness(1.06); transform: scale(1.03); }
@media (max-width: 900px) { .impressions-grid { grid-template-columns: 1fr; } .impressions-grid img { height: 220px; } }

/* ===== IMPRESSUM ===== */
.impressum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 2rem; }
.impressum-h { font-family: var(--serif); color: var(--gold); font-size: 1.3rem; margin: 1.6rem 0 0.6rem; }
.impressum-p { color: var(--cream); font-size: 0.98rem; margin-bottom: 0.9rem; line-height: 1.75; }
.impressum a { color: var(--gold); }
@media (max-width: 900px) { .impressum-grid { grid-template-columns: 1fr; } }
.back-home { display: block; text-align: center; margin: 2.5rem 0 1rem; }
.back-home a { color: var(--gold2); font-style: italic; }
.back-home a:hover { color: var(--gold-lt); }

/* ===== INFO LINE ===== */
.infoline {
  background: linear-gradient(180deg, #3a2020, #2a1616);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px;
  text-align: center;
}
.infoline-text { color: var(--gold2); font-size: 0.85rem; font-style: italic; }
.infoline-links { display: flex; gap: 14px; }
.infoline-links a { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.05em; border-bottom: 1px solid transparent; }
.infoline-links a:hover { border-color: var(--gold); }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("assets/hero-main.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  text-align: center;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.137), rgba(0, 0, 0, 0)); }
.hero-content { position: relative; z-index: 2; padding: 3rem 1.5rem; }
.hero-kicker { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.hero-title { font-family: var(--serif); font-weight: 700; color: var(--gold-lt); font-size: clamp(3rem, 8vw, 5.5rem); text-shadow: 0 3px 16px rgba(0,0,0,0.8); line-height: 1; }
.hero-sub { color: var(--cream); font-size: 1.1rem; margin: 0.8rem 0 1.8rem; letter-spacing: 0.02em; }

/* ===== Q DIVIDER (bar + gold lines + Q medallion) ===== */
.q-divider {
  position: relative; height: 96px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0e0806; overflow: hidden;
}
.q-divider .qline {
  position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%);
  background: linear-gradient(180deg, #4a2626 0%, #2e1818 100%);
  border-top: 1px solid #c98f8f; border-bottom: 1px solid #c98f8f;
  box-shadow: 0 0 15px rgba(201,143,143,0.28);
}
.q-divider .q-badge {
  position: relative; z-index: 2; width: 116px; height: 90px;
  filter: drop-shadow(0 0 8px rgba(205,185,143,0.4)) drop-shadow(0 2px 10px rgba(0,0,0,0.85));
}
.q-divider .q-badge svg { width: 100%; height: 100%; display: block; }
.q-divider .q-badge svg image { filter: brightness(1.45) saturate(1.05); }
/* bottom of öffnen panels */
/* stands on the page rather than inside a panel, so it needs no top margin */
.q-divider.q-standing { margin: 0; }
/* solange ein Panel offen ist, tritt der stehende Q-Abschluss ab */
.q-divider.q-standing.is-away { display: none; }
.q-divider.panel-q {
  margin: 1.4rem 0 0;
  /* Everything BELOW the bar is one single #b89171 band that closes the panel.
     The stop sits exactly on the underside of the bar (its centre + half its
     40px height), so there is no dark sliver left between bar and band.
     Flat colour above, because the panel behind is a gradient and showed
     through as a second tone. */
  background: linear-gradient(180deg,
              #2a1616 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
/* Die Plakatreihe (.row-burg) steht auf Schwarz. Ober- und unterhalb blieben aber
   zwei rötliche Bänder stehen, weil dort das Seitenbraun #1d0f10 durchschien:
   oben die Kuppelreihe, die keinen eigenen Hintergrund hatte, unten der stehende
   Q-Abschluss mit seinem Verlauf und seinem oberen Abstand. Beide auf Schwarz. */
.panels.row-b { background: #000; }
.q-divider.q-standing {
  margin-top: 0;
  background: linear-gradient(180deg,
              #000 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
.q-divider.panel-q .qline {
  background: linear-gradient(180deg, #4a2626 0%, #2e1818 100%);
  border-top: 1px solid #c98f8f; border-bottom: 1px solid #c98f8f;
  /* no outer glow here: its 15px falloff painted a lighter band across part of
     the strip under the bar, which read as a second colour */
  box-shadow: none;
}

/* ===== INTRO ===== */
.intro { text-align: center; padding: 1rem 20px 0; }
.intro-lead { max-width: 780px; margin: 0 auto; color: var(--cream); font-size: 1.12rem; line-height: 1.85; }

/* ===== FEATURES ===== */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center;
  margin: 3.2rem 0;
  padding: 1.6rem;
  background: linear-gradient(180deg, var(--box), var(--box2));
  border: 1px solid var(--line);
  border-radius: 4px;
}
.feature.reverse .feature-img { order: 2; }
.feature-img img { width: 100%; height: 300px; object-fit: cover; border: 3px solid var(--box3); border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.feature-body p { color: var(--cream); font-size: 1.02rem; }

/* ===== TRIPLE BOXES ===== */
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1rem; }
.tbox { background: linear-gradient(180deg, var(--box), var(--box2)); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: transform 0.25s, border-color 0.25s; }
.tbox:hover { transform: translateY(-5px); border-color: var(--gold); }
.tbox-img img { width: 100%; height: 175px; object-fit: cover; }
.tbox h4 { font-family: var(--serif); color: var(--gold); font-size: 1.35rem; padding: 1rem 1.2rem 0.4rem; }
.tbox p { color: var(--muted); font-size: 0.92rem; padding: 0 1.2rem 1.4rem; }
.tbox p, .tbox h4 { color: var(--cream); }
.tbox p { color: #cdbfae; }

/* ===== SECTION INTRO ===== */
.sec-intro { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; color: var(--muted); font-size: 1.05rem; font-style: italic; }
.menu-note { text-align: center; color: var(--gold2); font-style: italic; margin-top: 2rem; font-size: 0.95rem; }

/* ===== SPEISEKARTE / MENU ===== */
.speisekarte { padding-top: 1rem; }
.pdf-cta { text-align: center; margin-bottom: 2.6rem; }
.pdf-hint { display: block; color: var(--muted); font-size: 0.85rem; font-style: italic; margin-top: 0.6rem; }
/* Deutsch / English menu switch */
/* Drei gleich breite Knoepfe: die fr-Spalten eines schrumpfenden Rasters werden
   alle so breit wie der laengste Text ("Vegan & Vegetarisch"). Der mittlere
   Knopf liegt dadurch genau auf der Mitte der Reihe. */
.pdf-cta .lang-row {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pdf-cta .menu-lang { margin: 0; width: 100%; text-align: center; }
/* .sec-title traegt margin-left:2%, seine Mitte (und damit die leuchtende Linie)
   liegt also bei 51% — die Knopfreihe bekommt denselben Versatz, sonst steht der
   mittlere Knopf ein paar Pixel neben der Linie. */
#p-speisen .pdf-cta { margin-left: 2%; }
@media (max-width: 760px) {
  .pdf-cta .lang-row { grid-template-columns: minmax(0, 1fr); }
}
.pdf-cta .menu-lang.is-active { color: #f6e6b0; border-color: #ad8b57; background: linear-gradient(180deg, #6a3d3d 0%, #472525 100%); box-shadow: inset 0 1px 0 rgba(236,195,134,0.35), 0 0 8px rgba(236,195,134,0.35); }

/* Menu viewer — stays inside the content column, just taller */
.pdf-embed {
  width: 100%; max-width: 1000px; margin: 0 auto;
  border: 3px solid var(--box3);
  box-shadow: 0 0 0 1px var(--gold2), 0 8px 22px rgba(0,0,0,0.6);
  background: #1a0f10; line-height: 0;
}
.pdf-embed iframe { width: 100%; height: 88vh; min-height: 640px; border: 0; display: block; }
@media (max-width: 700px) { .pdf-embed iframe { height: 70vh; min-height: 460px; } }
.menu-grid { columns: 2; column-gap: 2.4rem; }
.menu-cat { break-inside: avoid; margin-bottom: 2rem; display: inline-block; width: 100%; }
.menu-cat h3 {
  font-family: var(--serif); color: var(--gold); font-size: 1.5rem; font-weight: 600;
  padding-bottom: 0.5rem; margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.dish { padding: 0.45rem 0; border-bottom: 1px dotted rgba(236,195,134,0.12); }
.dish:last-child { border-bottom: none; }
.dish-name { display: block; font-family: var(--serif); color: var(--gold-lt); font-size: 1.08rem; }
.dish-desc { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

/* ===== COCKTAILBAR ===== */
.cocktailbar { background: linear-gradient(180deg, #241416, #1a0e0f); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3.5rem 0; }
.cocktail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.cocktail-col h3 { font-family: var(--serif); color: var(--gold); font-size: 1.5rem; text-align: center; padding-bottom: 0.5rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--line); }

/* ===== COCKTAIL CARDS (with photos) ===== */
.cocktail-cat { font-family: var(--serif); color: var(--gold); font-size: 1.7rem; text-align: center; margin: 2.4rem 0 1.4rem; }
.cocktail-cat::after { content: ""; display: block; width: 100px; height: 2px; margin: 0.6rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.cocktail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.cocktail-card { background: linear-gradient(180deg, var(--box), var(--box2)); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; text-align: center; transition: transform 0.2s, border-color 0.2s; }
.cocktail-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.cocktail-card img { width: 100%; height: 175px; object-fit: cover; display: block; }
.cocktail-card h4 { font-family: var(--serif); color: var(--gold-lt); font-size: 1.18rem; margin: 0.8rem 0.6rem 0.35rem; }
.cocktail-card p { color: var(--muted); font-size: 0.82rem; margin: 0 0.7rem 1rem; line-height: 1.42; }
/* Wine bottles are portrait — fit whole bottle on a dark backdrop */
.wine-grid .cocktail-card img { height: 260px; object-fit: contain; background: radial-gradient(circle at 50% 40%, #35211c, #160d0e); padding: 10px 0; }
.wine-grid .cocktail-card p { min-height: 0; }

/* ===== Prominente Gäste ===== */
.promi-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.promi-grid:empty { display: none; }            /* no stray gap while it is empty */
.promi-card {
  margin: 0; padding: 6px; background: linear-gradient(180deg, var(--box), var(--box2));
  border: 1px solid var(--line);
  border-radius: 10px;                          /* outer = inner 4px + 6px padding */
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.promi-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.promi-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: 4px;
  outline: 1px solid rgba(255, 255, 255, 0.1);  /* keeps photo edges crisp on dark */
  outline-offset: -1px;
}
.promi-card figcaption {
  font-family: var(--serif); color: var(--gold-lt); font-size: 1.05rem;
  text-align: center; padding: 0.7rem 0.4rem 0.5rem; text-wrap: balance;
}
.promi-card figcaption span {
  display: block; font-family: var(--body); color: var(--muted);
  font-size: 0.78rem; margin-top: 0.2rem; letter-spacing: 0.02em;
}
.promi-empty {
  text-align: center; color: var(--muted); font-style: italic;
  padding: 2.2rem 1rem; border: 1px dashed var(--line); border-radius: 6px;
}
.promi-grid:not(:empty) + .promi-empty { display: none; }   /* hides itself once photos exist */
.champagne-grid { margin-top: 0; }
.champ-card { background: linear-gradient(180deg, var(--box), var(--box2)); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; padding: 1.3rem 1rem; text-align: center; }
.champ-card h4 { font-family: var(--serif); color: var(--gold-lt); font-size: 1.25rem; }

/* ===== KSARA WEINE ===== */
.ksara { padding: 3.5rem 0; }
.wine-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.wine { background: linear-gradient(180deg, var(--box), var(--box2)); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; padding: 1.3rem 1.5rem; }
.wine h4 { font-family: var(--serif); color: var(--gold); font-size: 1.3rem; margin-bottom: 0.5rem; }
.wine p { color: var(--cream); font-size: 0.96rem; }

/* ===== LEGENDE ===== */
.legende {
  margin: 4rem 0;
  background:
    linear-gradient(rgba(24,12,13,0.86), rgba(24,12,13,0.92)),
    url('assets/legende.jpg') center/cover fixed;
  padding: 4rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.legende-inner { display: grid; grid-template-columns: 300px 1fr; gap: 2.4rem; align-items: center; }
.legende-img img { width: 100%; border: 3px solid var(--box3); border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.legende-body p { color: var(--cream); font-size: 1.05rem; line-height: 1.85; margin-bottom: 1rem; }
.legende-body p:last-child { margin-bottom: 0; }

/* ===== GALLERY ===== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 0.5rem; }
.gallery img { width: 100%; height: 210px; object-fit: cover; border: 2px solid var(--box3); border-radius: 3px; filter: brightness(0.94); transition: filter 0.25s, transform 0.25s; }
.gallery img:hover { filter: brightness(1.05); transform: scale(1.02); }

/* ===== RESERVE ===== */
.reserve { margin-top: 4rem; padding: 3.5rem 0; background: linear-gradient(180deg, #2a1616, #1d0f10); border-top: 1px solid var(--line); text-align: center; }
.reserve-intro { max-width: 680px; margin: 0 auto 1.8rem; color: var(--cream); }
.reserve-intro a { color: var(--gold); }
.reserve-form { max-width: 680px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reserve-form input { background: #140b0c; border: 1px solid var(--line); color: var(--cream); padding: 0.85rem 1rem; font-family: var(--body); font-size: 1rem; border-radius: 3px; }
.reserve-form input::placeholder { color: #7d6a5a; }
.reserve-form input:focus { outline: none; border-color: var(--gold); }
.reserve-form .btn-gold { grid-column: 1 / -1; justify-self: center; }
.reserve-hint { color: var(--gold-lt); font-style: italic; margin-top: 1rem; min-height: 1.4rem; text-align: center; text-wrap: pretty; }
.reserve-hint.is-error { color: #ffb3a7; }
/* honeypot: hidden from people, still reachable for bots that ignore CSS */
.rsv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rsv-submit { text-align: center; margin-top: 1.4rem; }
.rsv-submit .btn-gold { transition: color .15s, border-color .15s, background .15s, scale .12s ease; }
.rsv-submit .btn-gold:active { scale: 0.96; }
.rsv-submit .btn-gold[disabled] { opacity: 0.65; cursor: progress; }

/* ===== RESERVIERUNG FORM (full fields) ===== */
/* display:block cancels the 2-column grid that .reserve-form (the older class
   on the same element) applies — otherwise every row is squeezed into one
   half-width column and the fields come out half as long. */
.rsv-form { max-width: 1600px; margin: 0 auto; text-align: left; display: block; --ctl-h: 45px; }
/* one height for every control. Left to itself a date input comes out ~2px
   taller than the rest, because its picker button sets the height. */
.rsv-form input, .rsv-form select, .rsv-form textarea { height: var(--ctl-h); }
.rsv-form textarea { min-height: var(--ctl-h); }
/* The reservation form gets a far wider measure than the rest of the site so
   the fields themselves come out long. .wrap caps at 1040px by default, which
   was the real limit on how wide the fields could ever get. */
#p-reservierung > .panel-body > .wrap { max-width: 1600px;}
/* the glowing rule moves off the section title and sits under every field
   instead, so each input is closed off the same way */
#p-reservierung .sec-title::after { content: none; }
.rsv-grid .rsv-field::after {
  content: ""; display: block;
  width: 100%; height: 2px; margin-top: 0.5rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Four columns, two fields stacked in each; the message sits alone underneath.
   grid-auto-flow:column fills top-to-bottom first, so each pair stays together. */
.rsv-grid {
  display: grid; grid-template-rows: auto auto;
  /* five equal columns: the message column is exactly as wide as a field */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 1.1rem 1.5rem; margin-bottom: 1.1rem;
}
/* the message is an ordinary field in the fifth column, beside Personenanzahl;
   the send button sits directly under it in the same column */
.rsv-grid .rsv-msg { min-width: 0; }
/* same height as a normal input: rows="1" plus the input's own line-height,
   so the box lines up exactly with the fields beside it */
.rsv-grid .rsv-msg textarea {
  flex: 0 0 auto; height: auto; min-height: 0;
  line-height: normal; resize: vertical;
}
/* button aligned with the inputs of the second row, not floating at its top */
.rsv-grid .rsv-submit { display: flex; align-items: flex-end; margin: 0; min-width: 0; }
.rsv-grid .rsv-submit .btn-gold { width: 100%; text-align: center; }
.rsv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; margin-bottom: 1.1rem; }
/* Five columns need a wide screen. Below that switch to ROW flow — keeping
   column flow while naming fewer columns just spawns implicit ones sized to
   their content, which squeezed every field to about 110px. */
@media (max-width: 1180px) {
  .rsv-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  /* Der Anlass ist jetzt eine Auswahlliste wie die anderen Felder - kein
     Sonderfall mehr, der ueber die ganze Breite laeuft. */
  .rsv-msg { grid-row: auto; grid-column: auto; }
  .rsv-grid .rsv-submit { grid-column: 1 / -1; justify-content: center; }
  .rsv-grid .rsv-submit .btn-gold { width: auto; } 
}
@media (max-width: 820px) {
  .rsv-grid { grid-template-columns: minmax(0, 1fr); }
}
.rsv-field { display: flex; flex-direction: column; }
.rsv-field.full { grid-column: 1 / -1; }
.rsv-field label { color: var(--gold2); font-size: 0.85rem; margin-bottom: 0.4rem; letter-spacing: 0.02em; }
.rsv-field label .req { color: var(--gold); }
.rsv-form input, .rsv-form select, .rsv-form textarea {
  background: #140b0c; border: 1px solid var(--line); color: var(--cream);
  padding: 0.7rem 0.8rem; font-family: var(--body); font-size: 0.98rem; border-radius: 3px; width: 100%;
}
.rsv-form input::placeholder, .rsv-form textarea::placeholder { color: #7d6a5a; }
.rsv-form input:focus, .rsv-form select:focus, .rsv-form textarea:focus { outline: none; border-color: var(--gold); }
.rsv-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold2) 50%), linear-gradient(135deg, var(--gold2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem;
}
/* Auswahlwerte in derselben Farbe wie die Feldbeschriftung darueber
   ("Anrede", "Uhrzeit", ...) - gilt fuer die native Liste ... */
.rsv-form option { background: #fffbd9; color: var(--gold2); }
.rsv-datetime { display: flex; gap: 0.5rem; }
.rsv-datetime select { flex: 1; padding-right: 1.6rem; }
.rsv-form textarea { resize: vertical; min-height: 100px; }
/* "mm/dd/yyyy" is drawn by the browser inside a date input and cannot be removed
   with markup. Hide it while the field is still empty — including while it is
   focused, so clicking the field does not flash the placeholder in. The test is
   CSS-only (:invalid = required and nothing chosen yet) rather than a JS flag, so
   the chosen date can never end up invisible if a script does not run. */
/* Colouring the segments is not enough: the moment the field is focused Chrome
   repaints the selected segment with its own selection colours, which beats any
   author `color` and is what made mm/dd/yyyy flash back on press. Hiding the whole
   edit box with opacity survives that, because it applies to the painted result.
   The segments return as soon as a date is chosen and the field is no longer
   :invalid, so a picked date is never invisible. */
.rsv-form input[type="date"]:invalid::-webkit-datetime-edit { opacity: 0; }
/* no blinking caret sitting in an apparently empty field */
.rsv-form input[type="date"]:invalid { caret-color: transparent; }
/* the custom calendar takes over, so the native icon must not open the browser's
   own picker on top of it — it stays visible as the affordance, clicks fall
   through to the field */
.rsv-field.has-qcal input[type="date"]::-webkit-calendar-picker-indicator { pointer-events: none; }

/* ---- Custom date picker (see initCalendar in partials.js) -----------------
   Fixed to the viewport rather than nested in the field: .panel-body clips
   overflow and .wrap scrolls, so a nested panel would be cut off. Width is set
   in JS from the field, so it always matches. z-index clears the sticky header
   (300). Radii stay at the site's flat 3-4px rather than the concentric
   4+8=12px, so the calendar reads as part of this design and not a modern
   component dropped into it. */
.qcal {
  position: fixed; z-index: 500; padding: 8px;
  background: linear-gradient(180deg, var(--box), var(--box2));
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.65), inset 0 1px 0 rgba(236,195,134,0.12);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.14s cubic-bezier(0.2,0,0,1), transform 0.14s cubic-bezier(0.2,0,0,1);
}
.qcal.is-open { opacity: 1; transform: none; }
.qcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.qcal-title { font-family: var(--serif); color: var(--gold); font-size: 1.02rem; letter-spacing: 0.02em; }
.qcal-nav {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 3px; cursor: pointer;
  color: var(--gold2); font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  transition: color 0.15s, background 0.15s, scale 0.12s ease;
}
.qcal-nav:hover { color: var(--gold); background: rgba(236,195,134,0.08); }
.qcal-nav:active { scale: 0.96; }
.qcal-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
.qcal-dow span {
  text-align: center; color: var(--gold2);
  font-size: 0.72rem; letter-spacing: 0.06em; padding-bottom: 5px;
}
.qcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.qcal-day {
  /* 38px trims the panel by ~3% against the original 40px; the cells stay wider
     than they are tall, so the tap target is still comfortable */
  height: 38px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  color: var(--cream); font-family: var(--body); font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, background 0.15s, border-color 0.15s, scale 0.12s ease;
}
.qcal-day:hover:not(:disabled) { background: rgba(236,195,134,0.10); color: var(--gold); }
.qcal-day:active:not(:disabled) { scale: 0.96; }
.qcal-day:disabled { color: rgba(238,235,228,0.22); cursor: default; }
.qcal-day.is-today { border-color: var(--line); }
.qcal-day.is-selected {
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border-color: var(--gold); color: #2d1616;
}
.qcal-day:focus-visible, .qcal-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* the custom calendar takes over, so the native icon must not open the browser's
   own picker on top of it — it stays visible as the affordance, clicks fall
   through to the field */
.rsv-field.has-qcal input[type="date"]::-webkit-calendar-picker-indicator { pointer-events: none; }

/* ---- Custom date picker (see initCalendar in partials.js) -----------------
   Fixed to the viewport rather than nested in the field: .panel-body clips
   overflow and .wrap scrolls, so a nested panel would be cut off. Width is set
   in JS from the field, so it always matches. z-index clears the sticky header
   (300). Radii stay at the site's flat 3-4px rather than the concentric
   4+8=12px, so the calendar reads as part of this design and not a modern
   component dropped into it. */
.qcal {
  position: fixed; z-index: 500; padding: 8px;
  background: linear-gradient(180deg, var(--box), var(--box2));
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.65), inset 0 1px 0 rgba(236,195,134,0.12);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.14s cubic-bezier(0.2,0,0,1), transform 0.14s cubic-bezier(0.2,0,0,1);
}
.qcal.is-open { opacity: 1; transform: none; }
.qcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.qcal-title { font-family: var(--serif); color: var(--gold); font-size: 1.02rem; letter-spacing: 0.02em; }
.qcal-nav {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 3px; cursor: pointer;
  color: var(--gold2); font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  transition: color 0.15s, background 0.15s, scale 0.12s ease;
}
.qcal-nav:hover { color: var(--gold); background: rgba(236,195,134,0.08); }
.qcal-nav:active { scale: 0.96; }
.qcal-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
.qcal-dow span {
  text-align: center; color: var(--gold2);
  font-size: 0.72rem; letter-spacing: 0.06em; padding-bottom: 5px;
}
.qcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.qcal-day {
  /* 38px trims the panel by ~3% against the original 40px; the cells stay wider
     than they are tall, so the tap target is still comfortable */
  height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  color: var(--cream); font-family: var(--body); font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, background 0.15s, border-color 0.15s, scale 0.12s ease;
}
.qcal-day:hover:not(:disabled) { background: rgba(236,195,134,0.10); color: var(--gold); }
.qcal-day:active:not(:disabled) { scale: 0.96; }
.qcal-day:disabled { color: rgba(238,235,228,0.22); cursor: default; }
.qcal-day.is-today { border-color: var(--line); }
.qcal-day.is-selected {
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border-color: var(--gold); color: #2d1616;
}
.qcal-day:focus-visible, .qcal-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---- Select drop-down (see initSelectPicker in partials.js) ---------------
   One panel for every <select> on the site. It shares .qcal's chrome and
   .qcal-day's cell styling, so the calendar, the time list and the plain
   drop-downs are visibly one control. Single column by default — labels like
   "Empfehlung / Freunde" need the width — and .qsel-cols switches to the
   4-across grid used for the short, uniform time slots. The panel scrolls
   rather than running past the bottom of a short window. */
.qsel { max-height: 60vh; overflow-y: auto; scrollbar-width: none; }
.qsel::-webkit-scrollbar { width: 0; height: 0; }
.qsel-list { grid-template-columns: minmax(0, 1fr); }
.qsel-cols .qsel-list { grid-template-columns: repeat(4, 1fr); }
/* long labels read left-aligned like a list, not centred like a date cell.
   The rows are shorter than the calendar's cells (which stay at 38px) — a list
   does not need the square tap target a date grid does. */
.qsel-opt {
  height: 25px;
  color: var(--gold2);        /* ... und fuer die eigene Auswahlliste */
  justify-content: flex-start; text-align: left; padding: 0 10px;
  font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the time grid keeps the centred, compact treatment */
/* gleiche Farbe wie die Feldbeschriftung "Uhrzeit" darüber */
.qsel-cols .qsel-opt { justify-content: center; text-align: center; padding: 0; font-size: 0.88rem; color: var(--gold2); }
/* the native list is suppressed in JS, so the field reads as a button */
.rsv-field.has-qsel select { cursor: pointer; }
.rsv-form input[type="date"]::-webkit-datetime-edit { color: var(--cream); }
/* keep the calendar / clock button visible so it still reads as a picker */
.rsv-form input[type="date"]::-webkit-calendar-picker-indicator,
.rsv-form input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(0.4) hue-rotate(2deg); opacity: 0.55; cursor: pointer;
}
.rsv-form input[type="date"]:hover::-webkit-calendar-picker-indicator,
.rsv-form input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }
/* the whole field opens the picker (see partials.js), so it should read as clickable
   across its full width, not only over the icon */
.rsv-form input[type="date"] { cursor: pointer; }
/* the whole field opens the picker (see partials.js), so it should read as clickable
   across its full width, not only over the icon */
.rsv-form input[type="date"] { cursor: pointer; }
.rsv-submit { text-align: center; margin-top: 1.4rem; }

/* ===== FOOTER ===== */
.site-footer { background: linear-gradient(180deg, #17090a, #0d0607); border-top: 1px solid var(--gold); padding: 3rem 0 1.4rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-col h4 { font-family: var(--serif); color: var(--gold); font-size: 1.2rem; margin-bottom: 0.9rem; }
.footer-col p { color: var(--muted); font-size: 0.92rem; }
.footer-col a { color: var(--gold2); }
.footer-col a:hover { color: var(--gold-lt); }
/* ===== Öffnungszeiten ===== */
.hours-h { font-family: var(--serif); color: var(--gold); font-size: 1.25rem; margin-bottom: 0.7rem; }
/* the same glowing rule .sec-title.sm carries, so "Öffnungszeiten" is closed off
   exactly like "Adresse" opposite it */
.hours-h::after {
  content: "";
  display: block;
  width: 120px; height: 2px;
  margin: 0.6rem 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* the same glowing rule .sec-title.sm carries, so "Öffnungszeiten" is closed off
   exactly like "Adresse" opposite it */
.hours-h::after {
  content: "";
  display: block;
  width: 120px; height: 2px;
  margin: 0.6rem 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hours {
  width: 100%; color: var(--muted); font-size: 0.92rem;
  border-collapse: separate; border-spacing: 0;
}
/* a day and its time must never break onto two lines */
.hours th, .hours td {
  padding: 6px 0; font-weight: 400; text-align: left;
  vertical-align: baseline; white-space: nowrap;
}
/* hairline rules as a shadow: no hard edge, and it sits on any panel background */
.hours tr + tr th, .hours tr + tr td { box-shadow: 0 -1px 0 rgba(236, 195, 134, 0.13); }
/* tabular figures keep every opening time in the same optical column */
.hours td { text-align: right; color: var(--cream); font-variant-numeric: tabular-nums; }
.hours .is-today th, .hours .is-today td { color: var(--gold-lt); }
.hours .is-today th::after {
  content: "heute"; margin-left: 8px; vertical-align: 0.12em;
  font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold); opacity: 0.9;
}
/* Footer: seven rows would make the footer much taller than the three-line
   Adresse and Kontakt columns beside it, so set them tighter there. */
.site-footer .hours { font-size: 0.82rem; line-height: 1.45; }
.site-footer .hours th, .site-footer .hours td { padding: 2px 0; }
.site-footer .hours .is-today th::after { font-size: 0.58rem; margin-left: 6px; }
.footer-social { display: flex; gap: 10px; }
.footer-social img { width: 30px; height: 30px; }
.footer-bottom { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(236,195,134,0.15); }
.footer-bottom a { color: var(--gold2); }

/* ===== COLLAPSIBLE PANELS (öffnen/schließen) ===== */
.panels {
  position: relative;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 12px 10px 0;
}
/* continuous burgundy bar behind the dome buttons — matched to the tile, no blue line */
.panels::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; z-index: 0;
  background: linear-gradient(180deg, transparent 0, transparent 13px, #693e3e 13px, #542c2c 20px, #432323 30px, #301919 40px, #211111 50px);
}
.panel-trig { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
/* Nudge each trigger (label + dome together) sideways: the first two a little
   left, the last a little right. transform is used rather than margins so the
   items stay out of layout — the row's spacing and the burgundy bar behind them
   are untouched. Applied to every .panels row so they stay aligned with each
   other, not just the Reservierung row. */
.panels .panel-trig:nth-child(1) { transform: translateX(-2.2rem); }
.panels .panel-trig:nth-child(2) { transform: translateX(-1.5rem); }
.panels .panel-trig:nth-child(3) { transform: translateX(0.8rem); }
/* Nudge each trigger (label + dome together) sideways: the first two a little
   left, the last a little right. transform is used rather than margins so the
   items stay out of layout — the row's spacing and the burgundy bar behind them
   are untouched. Applied to every .panels row so they stay aligned with each
   other, not just the Reservierung row. */
.panels .panel-trig:nth-child(1) { transform: translateX(-2.2rem); }
.panels .panel-trig:nth-child(2) { transform: translateX(-1.5rem); }
.panels .panel-trig:nth-child(3) { transform: translateX(0.8rem); }
/* Reihe B trägt vier Kuppeln (Weine – Cocktails – Menü – Dessert). Die Nudges
   oben sind für drei gedacht und würden hier schief sitzen, also weg: bei vier
   Elementen verteilt space-around sie von selbst gleichmäßig. */
.panels.row-b .panel-trig { transform: none; }
/* Reihe B steht auf dem Kopf: die Leiste sitzt oben, die Kuppeln hängen nach
   unten. scaleY(-1) spiegelt die ganze Reihe auf einmal — Leiste, Kuppelbild und
   der goldene Bogen — statt jedes Teil einzeln umzubauen. Die Beschriftungen
   werden gleich wieder zurückgespiegelt, sonst stünde die Schrift kopfüber. */
/* Jede Kuppelreihe steht auf dem Kopf: die Leiste sitzt oben, die Kuppeln hängen
   nach unten. scaleY(-1) spiegelt die ganze Reihe auf einmal — Leiste, Kuppelbild
   und goldener Bogen — statt jedes Teil einzeln umzubauen. Schrift und
   Beschriftung werden gleich wieder zurückgespiegelt, sonst stünden sie kopfüber.
   Hintergründe bleiben unangetastet. */
.panels {
  transform: scaleY(-1);
  /* Flache Farbe, kein Verlauf: scaleY(-1) dreht einen Verlauf mit um, das Band
     lief dadurch von #1d0f10 nach #2a1616 — also genau andersherum als das Panel
     darunter, was als sichtbarer Farbsprung zwischen Band und Panel endete.
     #2a1616 ist der obere Ton von .panel, damit beide nahtlos ineinander laufen. */
  background: #2a1616;
}
.panels .hex span,
.panels .panel-label { transform: scaleY(-1); }
/* Die Beschriftung wird aus dem Fluss genommen. Sonst bestimmt sie die Höhe des
   Auslösers mit, und da die Reihe ihre Elemente unten ausrichtet, säße die Kuppel
   um die Texthöhe versetzt — nach dem Umdrehen als sichtbares Rechteck neben der
   Leiste statt bündig darauf. So ist der Auslöser nur noch die Kuppel, genau wie
   in Reihe B. bottom:100% liegt im Layout ÜBER dem Auslöser und landet nach der
   Spiegelung also DARUNTER — genau dort, wo die Beschriftung stehen soll. */
/* Der negative Abstand holt die Beschriftung dicht unter die Kuppel. Die Kachel
   ist 107px hoch, das Kuppelbild belegt davon aber nur die unteren ~66px — nach
   dem Umdrehen liegen die leeren ~41px UNTER der Kuppel und rissen sonst eine
   große Lücke zwischen Kuppel und Text auf. */
.panels .panel-label {
  position: absolute; bottom: 100%; left: 0; right: 0; z-index: 3;
  margin: 0 0 -37px; text-align: center; white-space: nowrap;
}
/* Platz für die Beschriftung INNERHALB der Reihe. Ohne ihn ragt sie über die
   Reihenkante hinaus und wird vom nächsten Abschnitt überdeckt — der Text war
   unten abgeschnitten. Nur Reihen mit Beschriftung brauchen den Platz. */
.panels.has-labels { padding-top: 46px; }
.panels.row-b { margin-top: 1.6rem; }
/* Ist ein Panel offen, bleibt nur seine Kuppel stehen und wandert in die Mitte
   der Reihe; die übrigen blenden aus. Die Verschiebung setzt partials.js als
   gemessenen Wert, hier steht nur, wie sie sich bewegt. */
/* Kuppelreihe eines Unterpanels (z. B. "Menü Deutsch"): sie gehört zum Panel und
   steht nur da, solange dieses offen ist — auf der Startseite ist sie unsichtbar
   und nimmt keinen Platz weg. */
.panels.row-solo { display: none; }
.panels.row-solo.has-open { display: flex; }
/* die Reihe, aus der das Unterpanel geöffnet wurde, tritt so lange ganz ab */
.panels.row-away { display: none; }

/* ===== AUSZEICHNUNG =====
   Beide Urkunden sollen ohne Scrollen ganz zu sehen sein: die Bildhöhe richtet
   sich nach dem, was im Panel unter dem Titel und über dem Q noch frei ist.
   width:auto ist dabei Pflicht — mit fester Breite UND Höhendeckel quetscht der
   Browser das Hochformat zusammen, statt es kleiner zu rechnen. */
@media (min-width: 901px) {
  .ausz-grid .cocktail-card img {
    width: auto; max-width: 100%; height: auto;
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 10rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 10rem);
    object-fit: contain; margin: 0 auto; padding: 10px 0;
  }
}

/* ===== BLÄTTERN (Weine · Menü · Cocktails) =====
   Ist eines dieser Panels offen, tritt die Kuppel zurück und an ihre Stelle
   kommen zwei Knöpfe, links und rechts von der Mitte. Die Kuppel bleibt im
   Layout stehen (nur unsichtbar), damit die Reihenhöhe — und damit die
   Panelhöhe und die #b89171-Linie am Bildschirmrand — gleich bleibt. */
.panels.pg-mode .panel-trig.is-open .hex { visibility: hidden; }
.panels .pg-nav { display: none; }
.panels.pg-mode .pg-nav {
  display: flex; align-items: center; justify-content: center;
  /* beide Kuppeln stehen in der Mitte der Reihe, also genau zwischen dem zweiten
     und dem dritten Bild. Der goldene Bogen läuft über die volle Kachelbreite,
     deshalb kein Abstand — "weiter" rückt sogar 2px nach links, damit die beiden
     Bögen als eine durchgehende Linie zusammenlaufen. */
  gap: 0;
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3; pointer-events: none;        /* nur die Knöpfe selbst fangen Klicks */
}
/* Die Blätterknöpfe sind dieselbe Kuppel wie Weine/Menü/Cocktails/Dessert —
   nur die Beschriftung ist länger, deshalb etwas kleinere Schrift. */
/* "zurück" und "weiter" sind kurz genug für die normale Kuppelschrift — die
   Knöpfe sehen damit aus wie Weine, Menü, Cocktails und Dessert. */
.pg-btn { pointer-events: auto; }
.pg-nav .pg-next { margin-left: -2px; }
/* ===== Überschrift über den Bildseiten (Cocktails: Mit / Ohne Alkohol) =====
   Absolut gesetzt, damit sie den Bildern keinen Platz wegnimmt: Größe und Lage
   der Plakate bleiben genau wie vorher. Darunter dieselbe leuchtende Goldlinie
   wie unter den Feldern im Reservierungsformular. */
.panel-body { position: relative; }
.pg-title {
  position: absolute; top: -0.4rem; left: 0; right: 0; margin: 0; z-index: 2;
  font-family: var(--serif); color: var(--gold); font-size: 1.7rem; font-weight: 600;
  line-height: 1.15; text-align: center; letter-spacing: 0.02em;
  text-shadow: 0 -1px 1px rgba(248,233,176,0.5), 0 2px 4px rgba(0,0,0,0.85);
}
.pg-title::after {
  content: ""; display: block;
  width: min(280px, 40%); height: 2px; margin: 0.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* ===== SEITENLEISTE der Bildpanels =====
   Steht im leeren Rand links neben den Plakaten und nimmt ihnen keinen Platz:
   Schiene mit Knopf zum Springen, darunter der Zähler "7 / 32". */
.pg-rail {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%); z-index: 4;
  /* Der Abstand zwischen Zähler und Schiene wird in partials.js anteilig zur
     Bildhöhe gesetzt (--pg-gap); der Wert hier ist nur der Rückfall. */
  display: flex; flex-direction: column; align-items: center; gap: var(--pg-gap, 46px);
  user-select: none; -webkit-user-select: none;
}
.pg-rail.is-single { display: none; }              /* eine Seite braucht keine Leiste */
.pg-rail-track {
  position: relative; width: 6px; height: min(320px, 42vh); border-radius: 3px;
  background: rgba(236,195,134,0.14);
  box-shadow: inset 0 0 0 1px rgba(236,195,134,0.28);
  cursor: pointer; touch-action: none; outline: none;
}
/* Die Schiene ist nur 6px breit — die Trefferfläche wird per Pseudoelement auf
   40px verbreitert, damit man sie mit Finger oder Maus sicher trifft. */
.pg-rail-track::before {
  content: ""; position: absolute; top: -12px; bottom: -12px; left: -17px; right: -17px;
}
.pg-rail-fill {
  position: absolute; left: 0; right: 0; top: 0; border-radius: 3px;
  background: linear-gradient(180deg, #f3dcae, #c9a463);
  transition: height 0.25s ease;
}
.pg-rail-knob {
  position: absolute; left: 50%; width: 17px; height: 17px;
  margin-left: -8.5px; margin-top: -8.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fbf3d8 0%, #c9a463 55%, #6d4a22 100%);
  box-shadow: 0 0 12px rgba(236,195,134,0.55), 0 2px 6px rgba(0,0,0,0.65);
  transition: top 0.25s ease, transform 0.15s ease;
}
.pg-rail-track:active .pg-rail-knob { transform: scale(0.96); }
.pg-rail-count {
  font-family: var(--serif); font-size: 1.35rem; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: 0.03em; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  display: flex; align-items: baseline; gap: 2px;
}
/* beide Zahlen gleich groß, nur die aktuelle Seite steht kräftiger */
.pg-rail-count b,
.pg-rail-count span { font-size: 1.55rem; }
.pg-rail-count b { font-weight: 700; }
/* der Schrägstrich leuchtet golden zwischen den beiden Zahlen */
.pg-rail-count i {
  font-style: normal; opacity: 1; margin: 0 5px; color: #f8e9b0;
  text-shadow: 0 0 6px rgba(248,233,176,0.95), 0 0 14px rgba(236,195,134,0.75),
               0 0 26px rgba(236,195,134,0.45);
}
.pg-rail-count span { opacity: 0.8; font-weight: 600; }
@media (max-width: 900px) {
  .pg-rail { left: 10px; }
  .pg-rail-track { height: min(220px, 34vh); }
}

/* Platzhalterkarte ohne Bild: hält die Seite schwarz und die Höhe stabil */
.weine-card.is-empty { min-height: 1px; }

/* Auszeichnung: nur zwei Urkunden — zwei Spalten statt vier, mittig */
.weine-grid.ausz-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* noch mehr Luft zwischen den beiden Urkunden */
  max-width: 1320px; margin: 0 auto; gap: clamp(4rem, 16vw, 13rem);
}

/* ===== LEGENDE: Text links, Bild rechts ohne Rahmen ===== */
.legende-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: center; padding: 0 clamp(1rem, 4vw, 3rem);
}
.legende-text p {
  color: var(--cream); font-size: 1.02rem; line-height: 1.8; margin: 0 0 1rem;
  text-wrap: pretty;
}
.legende-text p:last-child { margin-bottom: 0; }
.legende-bild img {
  display: block; width: auto; max-width: 100%; height: auto; margin-left: auto;
  border: 0; box-shadow: none; background: none; border-radius: 0;
}
@media (min-width: 901px) {
  /* genauso hoch wie die Plakate in den anderen Panels, damit der Q-Abschluss
     unten am Bildschirmrand bleibt */
  .legende-bild img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 4rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 4rem);
  }
}
@media (max-width: 900px) {
  .legende-split { grid-template-columns: 1fr; gap: 1.2rem; }
  .legende-bild img { margin: 0 auto; }
}

/* letzte Seite ohne Fortsetzung: "weiter" ist ganz weg, nicht nur blass */
.pg-btn.is-gone { display: none; }
.pg-btn[disabled] { opacity: 0.3; cursor: default; }
.pg-btn:not([disabled]):active { transform: scale(0.96); }
@media (max-width: 900px) {
  /* in der gestapelten Ansicht laufen die Knöpfe einfach unter der Kuppel mit */
  .panels.pg-mode .panel-trig.is-open .hex { display: none; }
  .panels.pg-mode .pg-nav {
    position: static; gap: 12px; flex-wrap: wrap; padding: 0 10px 10px;
  }
}
.panels .panel-trig { transition: transform 0.6s cubic-bezier(.45,0,.25,1), opacity 0.45s ease; }
.panels.has-open .panel-trig { opacity: 0; pointer-events: none; }
.panels.has-open .panel-trig.is-open { opacity: 1; pointer-events: auto; }
/* Ist das Panel offen, rückt sein Name ein Stück tiefer, näher an die Kuppel mit
   dem "schließen". Nur verschoben, nicht umgerechnet: die Reihe behält ihre Höhe,
   und die Panelmasse (--trig-h) bleiben davon unberührt. */
.panel-label { transition: transform 0.45s cubic-bezier(.45,0,.25,1); }
/* scaleY(-1) muss mitgeschrieben werden: diese Regel ist spezifischer als die
   Rückspiegelung und würde sie sonst ersetzen — die Beschriftung stünde beim
   Öffnen kopfüber. Das Vorzeichen des Versatzes dreht sich mit: in der
   gespiegelten Reihe schiebt -14px nach UNTEN, wie ursprünglich gemeint. */
.panels.has-open .panel-trig.is-open .panel-label { transform: translateY(-14px) scaleY(-1); }
.panel-label {
  /* kein Abstand über oder unter dem Namen: die Zeilenhöhe wird auf die
     Schrifthöhe gesetzt, sonst bliebe die Durchschusshälfte als Luft stehen */
  display: block; font-family: var(--serif); color: var(--gold);
  font-size: 1.7rem; font-weight: 600; line-height: 1; margin-top: 0; margin-bottom: 0;
  text-shadow: 0 -1px 1px rgba(248,233,176,0.5), 0 2px 4px rgba(0,0,0,0.85);
}
/* öffnen / schließen dome buttons — original tile images */
/* Alle drei Masse gehören zusammen: das Kuppelbild hat eine feste Grösse, also
   müssen Breite, Höhe UND background-size im selben Verhältnis wachsen (122x100
   -> 130x107), sonst wird die Kachel beschnitten statt vergrössert. */
.hex {
  width: 130px; height: 107px; border: none; cursor: pointer; padding: 0;
  /* ?v=2 busts the browser cache after the glow arc in the tile was recoloured;
     without it Chrome keeps serving the old image because the name is unchanged */
  background: url('assets/infoline/dome_nopush.png?v=2') center/130px 107px no-repeat;
  position: relative;
}
.hex[aria-expanded="true"] { background-image: url('assets/infoline/dome_push.png?v=2'); }
.hex span {
  /* 55px = 51px im selben Verhältnis wie die Kachel (100 -> 107) */
  position: absolute; top: 55px; left: 0; right: 0; text-align: center;
  color: #cba877; font-family: var(--serif); font-size: 0.88rem; letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  margin-top: 3px;
}
/* nur "Reservierung" ist deutlich länger als die anderen Namen und bekommt
   deshalb eine eigene, etwas kleinere Schriftgröße */
.panel-label-rsv { font-size: 1.5rem; }
/* Reihe B: etwas kleiner als Reihe A — vier Namen statt drei, sie sollen die
   Kuppeln nicht überstrahlen */
.panels.row-b .panel-label {
  font-size: 1.35rem;
  /* etwas Luft zwischen Kuppel und Name: der negative Abstand zieht den Namen
     an die Kuppel heran, ein kleinerer Betrag lässt ihn wieder tiefer stehen
     (-37px war bündig, -27px gibt 10px Abstand) */
  margin-bottom: -27px;
}
/* Ist ein Panel dieser Reihe offen, tritt der Name ab: die Plakate im Panel
   tragen ihren Titel selbst, sonst stünde er doppelt — einmal als Kuppelname
   über den Blätterpfeilen, einmal im Bild. */
/* Ist ein Panel offen, verschwindet die Beschriftung der Reihe samt dem Platz,
   den sie belegt — bisher galt das nur für Reihe B. Der Name steht dann ohnehin
   im Panel, und die 46px Reserve kommen dem Inhalt zugute: das Panel ist auf
   eine Bildschirmhöhe begrenzt, jeder Pixel zählt dort. */
/* Beim Oeffnen wird die Beschriftung nur UNSICHTBAR, nicht entfernt: sie
   behaelt ihren Platz, die Reihe bleibt exakt gleich hoch. Frueher (display:
   none) schrumpfte die Reihe nach dem Klick, dadurch aenderte sich --trig-h,
   dadurch die Panelhoehe - und alles darunter rutschte sichtbar nach. */
.panels.has-open .panel-label { visibility: hidden; }
/* Der Innenabstand bleibt auch im offenen Zustand stehen: nahm man ihn weg,
   wurde die Reihe 12px flacher, --trig-h und die Panelhoehe aenderten sich
   nach dem Klick - und die Seite rutschte sichtbar nach. */
.panels.has-labels.has-open { padding-top: 12px; }
/* "Cocktails" ist das längste Wort auf einer Kuppel und sitzt dadurch optisch
   etwas zu weit rechts — ein paar Pixel nach links rücken das gerade */
/* scaleY(-1) muss hier mit stehen: diese Regel ist spezifischer als die
   Rückspiegelung der Reihe und würde sie sonst ersetzen — das Wort stünde
   als einziges kopfüber. */
.hex[data-target="p-cocktails"] span { transform: translateX(-4px) scaleY(-1); }
.hex:hover span { color: #f0d79a; }

.panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  /* flach statt Verlauf: der Verlauf lief nach unten auf #1d0f10 zu, wodurch der
     Streifen direkt über dem Q dunkler war als das Band über dem Panel. Ein Ton
     von der Kuppelreihe bis zur Abschlusslinie. */
  background: #2a1616;
  transition: grid-template-rows 1.6s cubic-bezier(.45,0,.25,1), opacity 1.1s ease;
}
.panel.open { grid-template-rows: 1fr; opacity: 1; }
/* Wechsel Panel -> Unterpanel: das alte verschwindet ohne Schiebebewegung,
   sonst stünden beide über eine Sekunde lang zusammen auf dem Schirm. */
.panel.is-instant, .panel.is-instant > .panel-body { transition: none !important; }
.panel-body { overflow: hidden; min-height: 0; }
.panel.open .panel-body { padding-top: 2.4rem; }
/* An opened panel fills what is left of the screen, so the section underneath
   cannot peek in below a short panel (Reservierung is only a teaser + button).
   Desktop only: below 900px the trigger row stacks and is much taller, and the
   panel content already runs past the fold on its own. */
@media (min-width: 901px) {
  /* Die Höhe muss MIT der Zeile wachsen, auf derselben Kurve. Sofort gesetzt
     käme die 0fr-Spur nicht mehr zum Einklappen und das Panel würde
     aufspringen statt zu gleiten. */
  .panel > .panel-body { transition: height 1.6s cubic-bezier(.45,0,.25,1); }
  .panel.open > .panel-body {
    /* Schirm − Kopfleiste − Kuppelreihe: das abschließende #b89171-Band sitzt
       damit genau auf der Unterkante. Beide Werte misst partials.js live, das
       hält also bei jeder Fenstergröße.
       Feste height, nicht min-height: die Bilder in den Panelseiten hängen an
       loading="lazy" und steuern vor dem Laden 0px bei — mit min-height bleibt
       das Panel deshalb leer und die Bilder tauchen nie auf. */
    height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px));
    height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px));
    display: flex; flex-direction: column;
  }
  /* Cap EVERY panel to one screen so its closing #b89171 band always lands on
     the bottom edge — Navigation included. */
  .panel.open > .panel-body {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px));
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px));
  }
  /* Navigation: the map takes whatever room is left instead of a fixed 82vh,
     so the panel fits the screen and nothing has to scroll inside it. */
  /* flex:1 so the wrap GROWS to fill the panel — otherwise it only takes its
     content height and the map has nothing to expand into.
     No padding either: the map runs edge to edge. */
  #p-navigation.open > .panel-body > .wrap {
    display: flex; flex-direction: column; overflow: hidden; flex: 1 1 auto;
    position: relative; padding: 0; max-width: none;
  }
  #p-navigation.open .map-frame { flex: 1 1 auto; min-height: 0; border-width: 0; box-shadow: none; }
  #p-navigation.open .map-big iframe { height: 100%; min-height: 0; }
  /* the button floats centred at the top of the map, so it takes no vertical
     space of its own and the map keeps the whole panel */
  #p-navigation.open .map-cta {
    position: absolute; top: 72px; left: 50%; right: auto; transform: translateX(-50%);
    z-index: 5; margin: 0;
  }
  /* Der Titel schwebt wie der Button über der Karte — so kostet er keine Höhe
     und die Karte reicht bis an die Panelkante. Ohne das Nullen des oberen
     Innenabstands bliebe darüber ein leeres Band stehen. */
  #p-navigation.open > .panel-body { padding-top: 0; }
  #p-navigation.open .map-title {
    position: absolute; top: 20px; left: 0; right: 0;
    z-index: 6; margin: 0; text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.9);
  }
  /* die goldene Linie unter dem Titel würde quer über die Karte laufen */
  #p-navigation.open .map-title::after { content: none; }
  /* Ist die Karte offen, steht "Navigation" schon auf ihr. Die Kuppelbeschriftung
     wäre ein zweites Mal dasselbe Wort und das Band, das sie freihält, ein Streifen
     Leerraum zwischen Kuppel und Karte. Beides weg: die Karte beginnt direkt unter
     der Kuppel und läuft ohne Lücke bis zum Q durch. */
  .panels.is-nav-open { padding-top: 0; }
  .panels.is-nav-open .panel-label { display: none; }

  /* Die Karte läuft UNTER der Kuppelreihe und UNTER dem Q hindurch, beide liegen
     darüber. Dadurch reicht sie ohne Lücke von der Leiste bis zur Abschlusslinie.
     Das Panel rutscht um --nav-overlap nach oben und wächst um denselben Betrag,
     sonst stünde die Abschlusslinie nicht mehr am unteren Bildschirmrand. */
  .panels.is-nav-open {
    margin-bottom: calc(-1 * var(--nav-overlap));
    position: relative; z-index: 4;
  }
  /* feste Höhe statt min/max: die Karte ist ein <iframe> und trägt selbst nichts
     zur Höhe bei, das Panel bliebe sonst auf Inhaltshöhe stehen. So bekommt die
     Karte eine echte Box, die sie füllen kann. */
  #p-navigation.open > .panel-body {
    position: relative;
    height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) + var(--nav-overlap));
    height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) + var(--nav-overlap));
    min-height: 0; max-height: none;
  }
  /* das Q schwebt über dem unteren Kartenrand, statt darunter Platz zu belegen */
  #p-navigation.open > .panel-body > .q-divider {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0;
    /* Nur die Leiste und die Abschlusslinie bleiben sichtbar. Der Verlauf
       darüber ist #2a1616 und deckte die unteren 96px der Karte zu — das sah
       aus wie Leerraum unter der Karte. */
    background: linear-gradient(180deg,
                transparent 0 calc(50% + 20px),
                #b89171 calc(50% + 20px) 100%);
  }
  /* Dasselbe oben: die Kuppelreihe liegt über der Karte und ist seit der
     Farbangleichung deckend (#2a1616) — sie verdeckte die oberen 57px der
     Karte. Der burgunderfarbene Streifen kommt aus ::before und bleibt. */
  .panels.is-nav-open { background: transparent; }
  /* Die Burgunderleiste bleibt voll deckend wie in jeder anderen Reihe. Dass
     die Karte trotzdem ohne Lücke anschließt, macht --nav-overlap: die Karte
     beginnt schon am oberen Rand der Reihe und läuft hinter der Leiste durch.
     Sichtbar wird sie damit exakt an deren Unterkante — kein dunkler Streifen
     dazwischen, aber auch keine durchscheinende Leiste. */
  /* Der Schein des Q liegt sonst als heller Fleck auf der Karte — nur hier weg,
     in allen anderen Panels bleibt er. */
  #p-navigation.open > .panel-body > .q-divider .q-badge { filter: none; }
  #p-navigation.open > .panel-body > .q-divider .qline { box-shadow: none; }
  #p-navigation.open .map-cta .btn-gold {
    box-shadow: 0 4px 14px rgba(0,0,0,0.55);
    /* kleiner als die übrigen Knöpfe: er liegt auf der Karte und soll sie
       nicht dominieren */
    font-size: 0.86rem; padding: 0.4rem 1.1rem;
  }
  /* width:100% is required here: .wrap has margin:0 auto, and an auto side
     margin stops a flex item stretching, which collapsed it to its content.
     flex 0 1 auto + min-height 0 lets it shrink so longer content scrolls. */
  .panel.open > .panel-body > .wrap {
    flex: 0 1 auto; width: 100%; min-height: 0; overflow-y: auto;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* legacy Edge */
  }
  /* scrolling stays, the bar itself is hidden — no "Rollbalken" beside the text */
  .panel.open > .panel-body > .wrap::-webkit-scrollbar { width: 0; height: 0; }
  /* the Q closes the panel: always the last thing, flush with the bottom edge */
  .panel.open > .panel-body > .q-divider { flex: 0 0 auto; margin-top: auto; }
  /* Das Formular steht ganz oben im Panel, direkt unter dem Polster — höher
     geht es nicht. Kein auto-Rand und kein fester unterer Rand mehr: beides
     nimmt dem Formular Höhe weg, sobald der freie Raum aufgebraucht ist. Das
     Formular darf aber nicht schrumpfen, sonst schneidet .wrap (overflow-y)
     die untere Feldreihe ab. Das Q hängt weiter an seinem eigenen auto-Rand
     und bleibt damit auf der Unterkante des Schirms. */
  #p-reservierung.open > .panel-body > .wrap { margin-top: 0; margin-bottom: 0; }
  /* Das Polster über dem Formular fällt weg — es war das Letzte, was zwischen
     Panelkante und erster Feldreihe noch Platz belegt hat. Weiter nach oben
     geht es von hier aus nur noch, indem das Panel selbst unter die Leiste
     rückt (wie beim Kontaktpanel). */
  #p-reservierung.open > .panel-body { padding-top: 0; }
}
.panel-intro { text-align: center; color: var(--muted); margin-bottom: 1.6rem; }
.panel-intro a { color: var(--gold); }
.rsv-teaser { text-align: center; margin-bottom: 3%; }
/* Tighten the reservation panel so its content fits one screen: only then can
   the closing #b89171 band sit on the bottom edge instead of below the fold. */
#p-reservierung.open > .panel-body { padding-top: 1.1rem; }
#p-reservierung .rsv-teaser { margin-bottom: 0; }
#p-reservierung .sec-title { margin-bottom: 0.7rem; }
#p-reservierung .sec-title::after { margin-top: 0.45rem; }
/* wider gutters between the columns, and a taller row gap so the second field in
   each column (Uhrzeit under Tag der Reservierung, and its neighbours) is clearly
   separated from the one above it */
#p-reservierung .rsv-grid { gap: 2rem 3rem; margin-bottom: 0.6rem; }
/* the submit cell is a normal field now (label above the control), so it lines up
   with its neighbours instead of being nudged down */
#p-reservierung .rsv-submit { margin-top: 0; }
/* the fields start clear of the section title instead of tucked under it */
/* das Formular sitzt etwas höher im Panel */
#p-reservierung .rsv-grid { margin-top: 0.6%; }

/* "Reservierung senden" is styled as a control, not a raised button — same fill,
   border, height, radius and type as the inputs beside it, closed off by the same
   glowing rule every field gets. It stays a real <button>. */
/* text-align:left undoes the centring .rsv-submit inherits from its base rule, so the
   label sits flush left like every other field label */
.rsv-grid .rsv-submit { flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: left; }
.rsv-grid .rsv-submit .btn-gold {
  width: 100%; height: var(--ctl-h);
  background: #140b0c;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--gold);
  font-family: var(--body);
  font-size: 0.98rem;
  padding: 0.7rem 0.8rem;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
  transition: border-color 0.15s, color 0.15s, scale 0.12s ease;
}
.rsv-grid .rsv-submit .btn-gold:hover,
.rsv-grid .rsv-submit .btn-gold:focus-visible {
  background: #140b0c;
  border-color: var(--gold);
  color: #ffffff;
  text-shadow: none;
  outline: none;
}
.rsv-grid .rsv-submit .btn-gold:active { scale: 0.96; }
/* the glowing rule now comes from .rsv-grid .rsv-field::after — the submit cell
   carries .rsv-field too, so it closes off exactly like every other field. */
/* the status line only needs to reserve space once it has something to say */
#p-reservierung .reserve-hint { min-height: 0; margin-top: 0.5rem; }
.rsv-teaser .panel-intro { max-width: 620px; margin-left: auto; margin-right: auto; }
.rsv-teaser-btn { margin-top: 0.4rem; }
.sec-title.sm.center { text-align: center; }
.sec-title.sm.center::after { margin: 0.6rem auto 0; }

/* wider gutter than the old 2rem: the opening-hours table now sits on the left and
   its row rules run the full column width, so the two halves need more air between
   them to stay clearly separate */
/* The address column gets the larger share: its longest line, the bold
   "Restaurant Qadmous Arabisch & Libanesisch spezialitäten", needs ~427px to stay
   on one line, and the street line ~366px. The hours table is narrower than its
   column, so it gives up the difference without crowding.
   The gutter has to flex: held at a fixed 18rem it eats 288px of a 1000px row and
   leaves too little for either side, which is what pushed "spezialitäten" and the
   house number onto lines of their own. */
.panel-adresse {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 11vw, 18rem);
  /* start, not center: the hours table is much taller than the address block, so
     centring pushed "Adresse" down the page relative to "Öffnungszeiten". Aligning
     the tops puts the two headings on the same line. */
  align-items: start;
  /* kein eigener oberer Abstand mehr: zusammen mit dem Innenabstand des Panels
     (2.4rem) standen sonst 78px Leerraum über "Öffnungszeiten" */
  padding-top: 0;
}
/* a wider measure than the site default, so both columns clear their longest line */
#p-adresse > .panel-body > .wrap { max-width: 1400px; }
/* the address column alone sits a little lower than the hours table beside it */
.panel-adresse .adr-block { margin-top: 0.6rem;margin-left: 8rem; }
/* the address column alone sits a little lower than the hours table beside it */
.panel-adresse .adr-block { margin-top: 1.5rem; }
.panel-adresse p { color: var(--cream); margin-bottom: 1rem; }
.panel-adresse a { color: var(--gold); }
.panel-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.info-card { background: linear-gradient(180deg, var(--box), var(--box2)); border: 1px solid var(--line); border-radius: 4px; padding: 1.3rem 1.5rem; }
.info-card h4 { font-family: var(--serif); color: var(--gold); font-size: 1.25rem; margin-bottom: 0.7rem; }
.info-card p { color: var(--cream); font-size: 0.94rem; }

.panel-veg { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: center; }
.veg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.veg-gallery img { width: 100%; height: 118px; object-fit: cover; border: 2px solid var(--gold2); border-radius: 2px; }
.veg-single { display: block; }
.veg-single img { width: 100%; border: 3px solid var(--box3); border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,0.6); transition: border-color 0.2s; }
.veg-single:hover img, .veg-gallery:hover img { border-color: var(--gold); }
.veg-gallery { cursor: pointer; }
.veg-text p { color: var(--cream); font-size: 0.98rem; margin-bottom: 0.9rem; }
.veg-sub { color: var(--gold) !important; font-style: italic; margin-top: -0.4rem; }

/* ===== BURGUNDY 3-COL ROWS ===== */
/* kein border-top: die goldene Haarlinie lief als heller Strich quer über das
   Schwarz direkt oberhalb der Plakate */
.row-burg { background: linear-gradient(180deg, #000000, #000000); padding: 3rem 0; border-top: 0; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.col { text-align: center; display: flex; flex-direction: column; }
.col-title {
  font-family: var(--serif); color: var(--gold); font-size: 2.1rem; font-weight: 700; margin-bottom: 1.1rem;
  text-shadow: 0 -1px 1px rgba(248,233,176,0.55), 0 2px 5px rgba(0,0,0,0.85);
}
.frame {
  display: block; padding: 3px; background: #1a1008; margin: 0 auto 1.2rem;
  box-shadow: 0 0 0 1px #caa24d, 0 0 0 4px #1a1008, 0 0 0 5px #6a4e22, 0 8px 18px rgba(0,0,0,0.6);
  transition: transform 0.2s, box-shadow 0.2s;
}
a.frame:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #f3ce84, 0 0 0 4px #1a1008, 0 0 0 6px #8a6a2e, 0 12px 24px rgba(0,0,0,0.7); }
.frame img { width: 100%; height: 215px; object-fit: cover; display: block; border: 2px solid #caa24d; }
/* Poster: no frame, no border, no crop — the artwork already carries its own
   price, title and text, so it is shown whole at the column's full width. */
.poster { display: block; margin-top: 1.2rem; }
.poster img {
  width: 100%; height: auto; display: block;
  border: 0; border-radius: 4px;
  transition: transform 0.2s ease;
}
.poster:hover img { transform: translateY(-3px); }
.frame.play { position: relative; cursor: pointer; }
/* video frames are <button>s — strip the UA chrome so they match the <a> frames */
button.frame { width: 100%; border: 0; font: inherit; color: inherit; }
button.frame:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #f3ce84, 0 0 0 4px #1a1008, 0 0 0 6px #8a6a2e, 0 12px 24px rgba(0,0,0,0.7); }
.frame iframe { width: 100%; height: 215px; display: block; border: 2px solid #caa24d; }
/* once playing, drop the ▶ badge and the lift so the player behaves like a player */
.frame.play.is-playing { cursor: default; }
.frame.play.is-playing::after { content: none; }
button.frame.is-playing:hover { transform: none; box-shadow: 0 0 0 1px #caa24d, 0 0 0 4px #1a1008, 0 0 0 5px #6a4e22, 0 8px 18px rgba(0,0,0,0.6); }
.frame.play::after {
  content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9); font-size: 2.6rem; text-shadow: 0 0 12px rgba(0,0,0,0.9); pointer-events: none;
}
/* justified so both edges line up. The narrow 3-col measure blows the word gaps out
   on long German words, so the copy carries &shy; break points; `auto` is a bonus for
   browsers that ship a German hyphenation dictionary (many do not). */
.col-text {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--cream); font-size: 0.92rem; line-height: 1.62;
}
.col-text.drop::first-letter { font-family: var(--serif); font-size: 2.7em; float: left; line-height: 0.82; color: var(--gold); padding: 4px 7px 0 0; }
.col-btn { margin-top: 1.1rem; font-size: 0.98rem; min-width: 250px; max-width: 100%; text-align: center; align-self: center; }
/* all row buttons align at the same bottom level, with a gap above them */
.cols3 .col-text { margin-bottom: 1.5rem; }
.cols3 .col-btn { margin-top: auto; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; grid-template-areas: "center toggle"; position: relative; }
  .hdr-center { grid-area: center; }
  .nav-toggle { display: block; grid-area: toggle; }
  .hdr-left, .hdr-right { display: none; }
  .menu { display: none; flex-direction: column; }
  .menu.open { display: flex; }
  .menu li + li::before { display: none; }
  .menu a { text-align: center; border-bottom: 1px solid rgba(236, 212, 134, 0.12); }
  .feature, .feature.reverse .feature-img { grid-template-columns: 1fr; }
  .feature.reverse .feature-img { order: 0; }
  .triple { grid-template-columns: 1fr; }
  .legende-inner { grid-template-columns: 1fr; }
  .legende { background-attachment: scroll; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .menu-grid { columns: 1; }
  .cocktail-cols { grid-template-columns: 1fr; }
  .wine-list { grid-template-columns: 1fr; }
  .cocktail-grid { grid-template-columns: repeat(2, 1fr); }
  .cols3 { grid-template-columns: 1fr; gap: 2.6rem; }
  .panel-adresse, .panel-info, .panel-veg { grid-template-columns: 1fr; }
  .panels { flex-direction: column; align-items: center; gap: 1.2rem; }
  .panel-trig { width: 100%; }
  /* Schmale Schirme: die Kuppeln stehen untereinander. Ausgeblendete Kuppeln
     würden hier ihren vollen Platz behalten und ein grosses Loch zwischen der
     offenen Kuppel und dem Panel hinterlassen — sie werden deshalb nicht nur
     unsichtbar, sondern auch auf Höhe null gefahren. */
  .panels.has-open { gap: 0; }
  .panels.has-open .panel-trig {
    max-height: 0; overflow: hidden; margin: 0;
    transition: max-height 0.45s cubic-bezier(.45,0,.25,1), opacity 0.35s ease;
  }
  .panels.has-open .panel-trig.is-open { max-height: 400px; }
  /* seitlich verschieben ist hier unnötig: in der Spalte steht sie schon mittig */
  .panels.has-open .panel-trig.is-open { transform: none !important; }
}
@media (max-width: 520px) {
  .reserve-form { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .sec-title { font-size: 1.9rem; }
}

/* Banner in the middle column of the row where the three columns used to sit —
   sits under the Menü-Speisen trigger, no frame or border, whole image visible. */
.banner-img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  border: 0; box-shadow: none; background: none;
}

/* Banner in the middle column of the row where the three columns used to sit —
   sits under the Menü-Speisen trigger, no frame or border, whole image visible. */
.banner-img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  border: 0; box-shadow: none; background: none;
}
/* The dish poster is portrait and carries its own price and text, so it is
   never cropped — height:auto keeps the whole artwork. max-height stops a tall
   2:3 image from towering over the row the way a full-width one would. */
.poster-img {
  width: auto; max-width: 100%;
  max-height: 460px; height: auto;
  object-fit: contain; border-radius: 4px;
}
/* ===== DESSERT ===== */
/* Gleiche Rasteraufteilung wie bei den Weinen, aber ohne Kasten: kein Rahmen,
   keine abgerundeten Ecken, kein Schatten — die Plakate bringen ihren eigenen
   dunklen Hintergrund mit und sollen randlos stehen. Gefüllt wird von links. */
/* Die Dessert-Bilder liegen quer (3:2) und stehen in Spalten und Zeilen: drei
   nebeneinander, danach beginnt die nächste Zeile. Die Breitengrenze hält die
   Bilder auch auf einem großen Bildschirm handlich statt bildschirmfüllend. */
.dessert-grid, .weine-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem; justify-items: stretch; align-items: center;
  width: 100%; margin: 0 auto;
}

/* die Reihe läuft von Rand zu Rand: ohne die Breitengrenze des .wrap sind die
   vier Bilder so groß, wie sie nebeneinander überhaupt sein können */
#p-dessert > .panel-body > .wrap,
#p-weine > .panel-body > .wrap,
#p-speisen > .panel-body > .wrap,
#p-cocktails > .panel-body > .wrap,
#p-auszeichnung > .panel-body > .wrap,
#p-legende > .panel-body > .wrap,
#p-mediathek > .panel-body > .wrap,
#p-weihnachten > .panel-body > .wrap,
#p-catering > .panel-body > .wrap { max-width: none; padding-left: 0; padding-right: 0; }
/* schwarzer Grund statt des weinroten Verlaufs: die Plakate stehen selbst auf
   Schwarz, so gehen ihre Ränder nahtlos in das Panel über */
#p-dessert, #p-weine, #p-speisen, #p-cocktails,
#p-auszeichnung, #p-legende, #p-mediathek, #p-weihnachten, #p-catering { background: #000; }
/* In den schwarzen Plakat-Panels muss auch der Streifen über der Q-Leiste
   schwarz sein — sonst steht unter den Bildern ein weinroter Rest (#1d0f10). */
#p-dessert .q-divider.panel-q,
#p-weine .q-divider.panel-q,
#p-speisen .q-divider.panel-q,
#p-cocktails .q-divider.panel-q,
#p-auszeichnung .q-divider.panel-q,
#p-legende .q-divider.panel-q,
#p-mediathek .q-divider.panel-q,
#p-weihnachten .q-divider.panel-q,
#p-catering .q-divider.panel-q,
#p-prominenz .q-divider.panel-q {
  background: linear-gradient(180deg,
              #000 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
/* Impressum: der Streifen über der Leiste war schwarz und stand damit als
   zweiter Teil unter der Panelfläche. Er bekommt dieselbe Panelfarbe, das
   goldene Abschlussband darunter bleibt. */
#p-impressum .q-divider.panel-q {
  background: linear-gradient(180deg,
              #4A2A15 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
.dessert-card, .weine-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
/* Die Preisliste ist die einzige Karte ihrer Seite: sie spannt über alle vier
   Spalten und wird in Breite UND Höhe eingepasst, nichts wird beschnitten. */
/* Die Karte bekommt die volle Seitenfläche als Box, das Bild füllt sie mit
   object-fit:contain — so wird es so groß wie möglich, ohne dass etwas
   beschnitten wird oder über die Seite hinausläuft. max-height:none hebt den
   Deckel der normalen Weinplakate auf, der es sonst klein hielte. */
.weine-card.weine-preise {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
}
/* Passt in BEIDE Richtungen auf die Seite — kein Scrollen. Die Höhe ist hier der
   Engpass, deshalb ein knapperer Abzug (1rem statt 3rem) als bei den normalen
   Weinplakaten: jeder gesparte Pixel Höhe macht das Bild bei 3:1 um drei Pixel
   breiter. */
.weine-card.weine-preise img {
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2rem);
  max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2rem);
  object-fit: contain; margin: 0 auto;
}
.dessert-card img, .weine-card img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  border: 0; border-radius: 0; box-shadow: none; outline: 0;
}
@media (min-width: 901px) {
  /* Höhendeckel, damit eine Reihe in das Panel passt und der Q-Abschluss mit
     seiner Linie unten am Bildschirmrand stehen bleibt. */
  .dessert-card img, .weine-card img {
    width: 100%; max-width: 100%;
    max-height: calc(100vh  - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2.4rem);
    max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2.4rem);
  }

  /* Weine: vier Plakate je Reihe (1 2 3 4 / 5 6 7 8). Ein Plakat darf so hoch
     werden, wie das Panel hoch ist — dann sind Schrift und Preis lesbar. Eine
     zweite Reihe steht darunter und wird im Panel gescrollt (die Bildlaufleiste
     ist ausgeblendet, der Q-Abschluss bleibt unten stehen). */
  .weine-card img {
    /* width:auto ist Pflicht: mit fester Breite UND Höhendeckel quetscht der
       Browser das Hochformat zusammen, statt es kleiner zu rechnen. */
    width: auto; max-width: 100%;
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 3rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 3rem);
  }
  /* zwei automatische Ränder teilen sich den Rest: Bilder mittig, Q unten */
  #p-dessert.open > .panel-body > .wrap,
  #p-weine.open > .panel-body > .wrap,
  #p-speisen.open > .panel-body > .wrap,
  #p-cocktails.open > .panel-body > .wrap,
  #p-auszeichnung.open > .panel-body > .wrap,
  #p-legende.open > .panel-body > .wrap,
  #p-mediathek.open > .panel-body > .wrap,
  #p-weihnachten.open > .panel-body > .wrap,
  #p-catering.open > .panel-body > .wrap { margin-top: auto; }

  /* Weine: die Plakate sollen höher stehen und größer sein.
     margin-top:0 hebt das automatische Zentrieren von oben auf — die Reihe
     rutscht damit an den oberen Rand des Panels statt in die Mitte.
     Der knappere Abzug (1rem statt 3rem) gibt ihnen zusätzlich Höhe; da die
     Plakate hochkant sind, wächst die Breite gleich mit. */
  #p-weine.open > .panel-body > .wrap { margin-top: 0; }
  /* Der obere Innenabstand des Panels (2.4rem) kostete 38px, die den Plakaten
     fehlten. Auf 0.6rem gekürzt: die Reihe rückt nach oben UND wird höher. */
  #p-weine.open > .panel-body { padding-top: 0.6rem; }
  /* Der Deckel muss alles abziehen, was im Panel sonst noch Platz braucht:
     den Q-Abschluss (96px) und den verbliebenen Innenabstand. Sonst läuft die
     Reihe unten aus dem Panel heraus und man muss scrollen. */
  #p-weine .weine-card img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 1.5rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 1.5rem);
  }
  /* Die Preisliste braucht dieselbe ID-Stärke, sonst gewinnt die Regel darüber
     (ID schlägt Klassen) und das Bild liefe unten aus der Seite heraus. */
  #p-weine .weine-card.weine-preise img {
    width: auto; height: auto; max-width: 100%;
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2rem);
    object-fit: contain;
  }
}
@media (max-width: 900px) {
  .dessert-grid, .weine-grid { grid-template-columns: repeat(2, 1fr); }
}

/* "Menü" scrolls here without opening anything, so trigger row + posters + the
   standing Q have to add up to exactly one screen. Otherwise the Q ends up below
   the fold and you have to scroll to reach it. The posters take what is left. */
@media (min-width: 901px) {
  /* --q-gap is a safety margin: the sticky header's visible height at the scroll
     landing is not always exactly --top-h, and without slack the Q and its line
     end up a few pixels under the fold. */
  .row-burg:has(.poster-row) {
    /* war 26px Sicherheitsabstand — genau der blieb als Lücke zwischen der
       Abschlusslinie und dem unteren Bildschirmrand stehen */
    --q-gap: 0px;
    height: calc(100vh  - var(--top-h, 240px) - var(--trigb-h, 112px) - var(--qstand-h, 96px) - var(--q-gap));
    height: calc(100svh - var(--top-h, 240px) - var(--trigb-h, 112px) - var(--qstand-h, 96px) - var(--q-gap));
    padding-top: 0.8rem; padding-bottom: 0.8rem;
    display: flex; align-items: center; overflow: hidden;
  }
  /* vier Spalten, eine je Kuppel — die vierte bleibt leer, bis das
     Dessert-Plakat da ist. Steht in der Media Query, damit die Handy-Regel
     (.cols3 -> eine Spalte) weiter greift. */
  /* .wrap deckelt sonst bei 1040px — bei vier Spalten blieben davon nur gut
     230px je Plakat. Mehr Breite = größere Plakate; der kleinere Abstand gibt
     zusätzlich Platz. */
  .row-burg:has(.poster-row) > .poster-row {
    width: 100%; max-width: 1720px; align-items: center;
    grid-template-columns: repeat(4, 1fr); gap: 1rem;
    padding-left: 12px; padding-right: 12px;
  }
  .row-burg:has(.poster-row) .col { min-height: 0; }
  /* a real length, not 100%: the column has no definite height, so a percentage
     resolves to "auto" and the posters overflow and get clipped instead */
  .row-burg:has(.poster-row) .poster-img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trigb-h, 112px) - var(--qstand-h, 96px) - 1.8rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trigb-h, 112px) - var(--qstand-h, 96px) - 1.8rem);
  }
}

/* ===== KONTAKT-TAFEL ====================================================
   Nachbau der Vorlage: Titel mit Ornament, darunter zwei gerahmte Tafeln mit
   einer senkrechten Zierleiste dazwischen.

   Alle Masse haengen an vh, nicht nur an rem: das Panel ist auf eine
   Bildschirmhoehe begrenzt, der Inhalt muss also mitschrumpfen statt eine
   Rollleiste zu bekommen. Die Farben sind die der Vorlage und stehen als
   eigene Variablen hier - der Rest der Seite bleibt davon unberuehrt. */
/* die ganze Tafel sitzt etwas höher im Panel */
#p-adresse.open > .panel-body { padding-top: 0.7rem; }
.kontakt-tafel {
  --kt-gold: #e2a75c;
  --kt-gold-hell: #f2cd92;
  --kt-text: #efe9e0;
  --kt-linie: rgba(226, 167, 92, 0.34);
  display: flex; flex-direction: column;
  width: 100%; max-width: none; margin: 0 auto;
  padding: clamp(0.3rem, 1.4vh, 1rem) 0 clamp(0.2rem, 1vh, 0.7rem);
  color: var(--kt-text); overflow: hidden;
}
/* Der Grund der Vorlage ist fast schwarz, nicht das Burgunderrot der anderen
   Panels — nur dieses eine Panel bekommt ihn. */
/* Das Panel selbst traegt wieder denselben Grund wie alle anderen (.panel).
   Schwarz sind nur noch die beiden Tafeln — siehe .kt-karte weiter unten. */

.kt-titel {
  font-family: var(--serif); color: var(--kt-gold);
  font-size: clamp(1rem, 3vh, 2.1rem); font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase;
  text-align: center; margin: 0 0 clamp(0.15rem, 0.4vh, 0.3rem);
}

/* --- Ornamente: zwei Haarlinien mit einer Raute in der Mitte ------------- */
.kt-orn { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 auto clamp(0.3rem, 1.1vh, 0.85rem); width: min(240px, 60%); }
.kt-orn .kt-linie { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--kt-gold)); }
.kt-orn .kt-linie:last-child { background: linear-gradient(90deg, var(--kt-gold), transparent); }
.kt-orn .kt-raute { width: 7px; height: 7px; transform: rotate(45deg); background: var(--kt-gold); flex: 0 0 auto; }
.kt-orn .kt-raute.klein { width: 5px; height: 5px; }
.kt-orn-quer { width: min(170px, 38%); }

/* --- Raster: Tafel | Zierleiste | Tafel ---------------------------------- */
.kt-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: stretch; flex: 1 1 auto; min-height: 0;
}
.kt-karte {
  border: 1px solid var(--kt-linie); border-radius: 12px;
  padding: clamp(0.35rem, 1.2vh, 1.1rem) clamp(0.6rem, 1.4vw, 1.4rem);
  min-width: 0; display: flex; flex-direction: column;
}
.kt-kopf {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--serif); color: var(--kt-gold-hell);
  font-size: clamp(0.72rem, 2.35vh, 1.5rem); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  margin: 0 0 clamp(0.1rem, 0.5vh, 0.35rem); white-space: nowrap;
}
.kt-kopf-icon { width: 1.15em; height: 1.15em; fill: none; stroke: var(--kt-gold); stroke-width: 1.4; stroke-linecap: round; flex: 0 0 auto; }

/* --- linke Tafel: Zeiten ------------------------------------------------- */
.kt-zeiten { width: 100%; border-collapse: collapse;
  font-size: clamp(0.6rem, 2vh, 1.3rem); flex: 1 1 auto; }
.kt-zeiten th, .kt-zeiten td { padding: clamp(1px, 0.3vh, 6px) 0; }
/* Wochentage in derselben Farbe wie die Uhrzeiten daneben */
.kt-zeiten th { text-align: left; font-weight: 400; color: var(--kt-gold);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
/* Zahlen mit fester Breite: sonst tanzen die Spalten von Zeile zu Zeile */
.kt-zeiten td { text-align: right; color: var(--kt-gold); font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em; white-space: nowrap; }
.kt-zeiten tr + tr th, .kt-zeiten tr + tr td { border-top: 1px solid rgba(226, 167, 92, 0.15); }
/* keine Hervorhebung des heutigen Tages mehr */

/* --- senkrechte Zierleiste zwischen den Tafeln --------------------------- */
.kt-saeule { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 14px; }
.kt-saeule-linie { flex: 1 1 auto; width: 1px; background: linear-gradient(180deg, transparent, var(--kt-gold) 22%, var(--kt-gold) 78%, transparent); }
.kt-saeule-raute { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--kt-gold); position: relative; flex: 0 0 auto; }
.kt-saeule-raute::after { content: ""; position: absolute; inset: 2.5px; background: var(--kt-gold); }

/* --- rechte Tafel: Adresse und Erreichbarkeit ---------------------------- */
.kt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  flex: 1 1 auto; justify-content: space-evenly; }
.kt-liste li { display: flex; align-items: center; gap: clamp(0.45rem, 1.2vw, 1rem);
  padding: clamp(1px, 0.32vh, 7px) 0; }
.kt-liste li + li { border-top: 1px solid rgba(226, 167, 92, 0.15); }
.kt-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(20px, 4.2vh, 48px); height: clamp(20px, 4.2vh, 48px);
  border: 1px solid var(--kt-linie); border-radius: 50%;
}
.kt-icon svg { width: 55%; height: 55%; fill: none; stroke: var(--kt-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kt-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* Adresse & Kontakt in derselben Goldfarbe wie die Oeffnungszeiten */
.kt-stark { font-family: var(--serif); color: var(--kt-gold); font-weight: 500;
  font-size: clamp(0.68rem, 2.1vh, 1.4rem); letter-spacing: 0.09em; text-transform: uppercase; }
.kt-label { color: var(--kt-gold); font-size: clamp(0.5rem, 1.5vh, 0.95rem);
  letter-spacing: 0.16em; text-transform: uppercase; }
.kt-zeile { color: var(--kt-gold); font-size: clamp(0.63rem, 2vh, 1.28rem); }
a.kt-zeile { color: var(--kt-gold); text-decoration: none; }
a.kt-zeile:hover { color: var(--kt-gold-hell); }

/* Schmale Schirme: die Zierleiste faellt weg, die Tafeln stehen untereinander */
@media (max-width: 900px) {
  .kt-grid { grid-template-columns: 1fr; }
  .kt-saeule { display: none; }
}

/* Sehr flache Fenster: das Panel ist auf eine Bildhoehe begrenzt, unten steht
   ausserdem die Abschlusslinie. Bleibt zu wenig uebrig, fallen zuerst Titel und
   Ornament weg — der Name steht ohnehin schon auf der Kuppel darueber — und die
   Zeilen ruecken enger zusammen. Lieber knapper als eine Rollleiste. */
@media (max-height: 860px) {
  .kontakt-tafel .kt-titel,
  .kontakt-tafel > .kt-orn-quer { display: none; }
  .kontakt-tafel { padding-top: 0.2rem; }
  .kt-karte { padding: 0.3rem 0.7rem; border-radius: 10px; }
  .kt-kopf { margin-bottom: 0.1rem; }
  .kt-orn { margin-bottom: 0.25rem; }
  .kt-zeiten th, .kt-zeiten td { padding: 1px 0; }
  .kt-liste li { padding: 1px 0; }
}
@media (max-height: 700px) {
  .kontakt-tafel .kt-kopf, .kontakt-tafel > .kt-grid .kt-orn { display: none; }
}

/* Noch flacher: hier wird jeder Rest an Polster gestrichen, damit auch auf
   kleinen Notebook-Schirmen nichts gerollt werden muss. */
@media (max-height: 800px) {
  .kt-karte { padding: 2px 8px; }
  .kt-zeiten { font-size: 0.6rem; }
  .kt-zeiten th, .kt-zeiten td { padding: 0; }
  .kt-liste li { padding: 0; gap: 0.4rem; }
  .kt-icon { width: 20px; height: 20px; }
  .kt-stark { font-size: 0.66rem; }
  .kt-zeile { font-size: 0.6rem; }
  .kt-label { font-size: 0.48rem; }
  .kt-grid { gap: 0.5rem; }
  .kt-kopf { font-size: 0.7rem; margin-bottom: 2px; }
  .kt-orn { margin-bottom: 2px; }
}

/* ===== Kontakt schliesst direkt an die Leiste an ==========================
   Unter der Leiste blieb ein Streifen Reihenhintergrund stehen, in dem nur die
   Kuppel haengt — links und rechts davon leerer Platz. Das Panel wird deshalb
   bis an die Unterkante der Leiste hochgezogen und laeuft hinter der Kuppel
   durch, genau wie die Karte im Navigationspanel. Es waechst um denselben
   Betrag, damit die Abschlusslinie weiter auf der Unterkante des Schirms sitzt.

   --bar-h ist die Hoehe der Leiste (.panels::before). Der Rest der Reihe ist
   der Bereich, in den die Kuppel haengt. */
@media (min-width: 901px) {
  .panels[data-open="p-adresse"] {
    margin-bottom: calc(var(--bar-h) - var(--trig-h, 107px));
    position: relative; z-index: 4;
  }
  #p-adresse.open > .panel-body {
    height: calc(100vh  - var(--top-h, 240px) - var(--bar-h));
    height: calc(100svh - var(--top-h, 240px) - var(--bar-h));
    max-height: none;
    /* Der Inhalt rueckt hoch, dicht unter die Leiste. Ganz ohne Polster
       stuende der Titel hinter der herabhaengenden Kuppel — deren unteres Ende
       ist aber nur eine schmale Spitze, ein Teil des Weges reicht also. */
    padding-top: calc(var(--trig-h, 107px) - var(--bar-h) - 20px);
  }
}

/* Kontakt-Tafel laeuft ueber die ganze Panelbreite — die beiden Karten
   sitzen dadurch ganz links und ganz rechts. */
#p-adresse > .panel-body > .wrap.kontakt-tafel {
  max-width: none; width: 100%;
  padding-left: 40px; padding-right: 40px;   /* Rand an beiden Seiten */
}

/* Frueher standen hier zwei Feinjustierungen fuer das Menue- und das
   Dessert-Plakat (translate(-15px,-65px) und translate(28px,-16px), beide
   !important). Sie stammten aus der Zeit verschieden grosser Plakate.
   Seit alle vier Plakate dasselbe Format haben, richtet alignPosters() sie
   selbst unter ihrer Kuppel aus - und ein !important im Stylesheet schlaegt
   den inline gesetzten transform aus dem Javascript. Ergebnis: die beiden
   Plakate hingen 65px bzw. 16px zu hoch und liessen sich nicht ausrichten.
   Deshalb entfernt. NICHT wieder einfuegen - wer ein einzelnes Plakat
   verschieben will, nimmt data-nudge="-4" am <img>, das rechnet
   alignPosters() mit ein. */

/* Impressum: eine einzige Tafel als Bild. Sie soll das Panel von oben bis
   zur Abschlusslinie fuellen, ohne dass gescrollt werden muss - deshalb
   begrenzt nicht die Breite, sondern die verbleibende Hoehe das Bild. */
#p-impressum { background: #000; }
#p-impressum > .panel-body > .wrap.impressum-tafel {
  max-width: none; width: 100%; padding: 0;
  flex: 1 1 auto; min-height: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
#p-impressum .impressum-tafel img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
}

/* Die Tafel wird von der HOEHE begrenzt, nicht von der Breite - jedes Pixel
   Hoehe, das das Panel oben spart, macht das Bild breiter. Deshalb hier fast
   kein Innenabstand. */
#p-impressum.open > .panel-body { padding-top: 0; }
#p-impressum > .panel-body > .wrap.impressum-tafel { align-items: flex-start; }

/* Nur BREITER, nicht hoeher: die Hoehe bleibt die eingepasste (das Bild endet
   weiter ueber der Abschlusslinie), in der Breite wird es gedehnt. scaleX
   veraendert nur die Darstellung, nicht den Platzbedarf - das Panel bleibt
   also genau so hoch wie vorher und nichts muss gescrollt werden. */

/* Wie im Navigationspanel: oben KEIN Abstand. Alles, was von den allgemeinen
   Panelregeln an Polster oder automatischem Aussenabstand kommt, wird hier
   ausdruecklich auf null gesetzt - die Tafel beginnt an der Oberkante. */
#p-impressum.open > .panel-body { padding-top: 0 !important; }
#p-impressum.open > .panel-body > .wrap.impressum-tafel {
  margin-top: 0 !important; padding-top: 0 !important;
}







/* Scroll-Anker aus. Chrome verschiebt die Seite von sich aus, wenn Inhalt
   OBERHALB des Sichtfensters seine Hoehe aendert - genau das passiert 1,6s
   lang, waehrend ein Panel aufklappt. Diese Selbstkorrektur laeuft gegen den
   eigenen Sprung und sieht als Zittern/Hin-und-Her aus. */
html, body, .panel, .panel-body, .panels { overflow-anchor: none; }
/* Nur der Grund der Reihe ist hier eingefaerbt. Leiste und Kuppel sind
   unveraendert: gleiche Regel, gleiche Bilder wie in jeder anderen Reihe.
   Dieselbe Farbe wie das Panel darunter, damit das Band ueber den Tafeln
   nicht als zweiter, schwarzer Teil stehenbleibt. */
.panels[data-open="p-impressum"] { background: #4A2A15; }

/* Impressum: oben das breite Band, darunter die sechs Tafeln in derselben
   Anordnung wie zuvor auf dem einen Bild (Qadmous - Kontakt - Paechter /
   Haftung - Copyright - Impressum). Alles wird in die Panelhoehe eingepasst,
   damit nichts gescrollt werden muss: das Band nimmt seinen Anteil, der Rest
   gehoert dem Raster, und jede Tafel fuellt ihre Zelle mit object-fit. */
/* Panelfarbe nur für das Impressum-Panel; alle anderen Panels behalten das
   #2a1616 aus .panel */
#p-impressum { background: #4A2A15; }
#p-impressum > .panel-body > .wrap.impressum-tafel {
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(4px, 1vh, 14px);
}
#p-impressum .imp-grid {
  /* engere Fugen = breitere Tafeln */
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  /* je 20px Luft links und rechts an JEDER Tafel: 40px zwischen zwei
     Tafeln, 20px am Aussenrand des Rasters. Oben/unten bleibt es eng. */
  /* 40px Band zwischen der oberen und der unteren Dreierreihe */
  row-gap: 8px;
  column-gap: 14px;
  padding: 0 8px;
}
#p-impressum .impressum-tafel .imp-grid img {
  /* fill statt contain: jede Tafel fuellt ihre Zelle aus. 30px schmaler als
     die Zelle, damit zwischen den Tafeln mehr Luft bleibt. */
  width: calc(100% - 80px); height: 100%; min-height: 0;
  object-fit: fill; display: block; margin: 0 auto;
}
@media (max-width: 900px) {
  #p-impressum .imp-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}

/* Die obere Reihe (Qadmous, Kontakt, Paechter) sitzt 20px hoeher. transform,
   damit sich am Raster selbst nichts verschiebt - die untere Reihe bleibt,
   wo sie ist, und das Panel behaelt seine Hoehe. */
#p-impressum .impressum-tafel .imp-grid img:nth-child(-n+3) {
  transform: translateY(-20px);
}

/* Die angehobene obere Reihe wurde oben vom Panel abgeschnitten: .panel-body
   schneidet ab. Fuer dieses eine Panel darf der Inhalt ueberstehen - es
   enthaelt nur Bilder, es wird nichts gescrollt, und am Layout aendert
   overflow nichts (Position und Groesse bleiben also exakt gleich). */
#p-impressum.open, #p-impressum.open > .panel-body { overflow: visible; }

/* Preistafel breiter: sie wird von der HOEHE begrenzt (Bildschirm minus Kopf,
   Kuppelreihe und Abschlusslinie), in der Breite ist also noch Luft. Deshalb
   wird sie waagerecht gedehnt - transform kostet keinen Platz, die Hoehe und
   damit die Abschlusslinie bleiben unveraendert. */
#p-weine .weine-card.weine-preise img {
  /* 100px schmaler als zuvor und rund 20px hoeher - beides als transform,
     damit das Panel seine Hoehe behaelt. */
  /* keine Dehnung mehr - die Tafel ist von Haus aus breit genug; nur ein
     kleiner Versatz nach rechts */
  transform: translateX(5px);
}

/* ===== Sprachwahl: Pfeile als Wegweiser ================================= */
/* Die Pfeile stehen wieder NEBEN den Woertern und nehmen echten Platz ein -
   der kommt aus dem Rand der Menueleiste: .menu hatte links und rechts je 16px
   Polster, das wird fuer die Pfeile hergegeben (padding 0 statt 0 16px).
   Dadurch bleibt die Leiste genauso breit wie vorher und bricht nicht um. */
body.lang-hint .menu { padding-left: 0; padding-right: 0; }
/* .menu a ist ein Block - ohne flex stuende der Pfeil in einer eigenen
   Zeile ueber dem Wort. Mit flex sitzen Pfeil und Wort nebeneinander. */
.menu li.lang-li { position: relative; display: flex; align-items: center; }
.menu .lang-arrow {
  display: none; color: #ffffff; font-size: 0.82em; line-height: 1;
  vertical-align: middle; text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
body.lang-hint .menu .lang-arrow { display: inline-block; }
.menu .lang-arrow-l { margin: 0 2px 0 6px; }
.menu .lang-arrow-r { margin: 0 6px 0 2px; }
body.lang-hint .menu .lang-arrow-l { animation: langPokeR 1.2s ease-in-out infinite; }
body.lang-hint .menu .lang-arrow-r { animation: langPokeL 1.2s ease-in-out infinite; animation-delay: 0.15s; }
@keyframes langPokeR {
  0%, 100% { transform: translateX(-4px); opacity: 0.5; }
  50%      { transform: translateX(3px);  opacity: 1; }
}
/* gespiegelt, damit die Spitze nach links auf "English" zeigt */
@keyframes langPokeL {
  0%, 100% { transform: scaleX(-1) translateX(-4px); opacity: 0.5; }
  50%      { transform: scaleX(-1) translateX(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.lang-hint .menu .lang-arrow-l { animation: none; opacity: 1; }
  body.lang-hint .menu .lang-arrow-r { animation: none; transform: scaleX(-1); opacity: 1; }
}

/* Die beiden Trennpunkte links von "Germany" und rechts von "English" fallen
   weg - genau dort stehen jetzt die Pfeile. Der Punkt ZWISCHEN den beiden
   Sprachen bleibt, damit die Leiste ihren Rhythmus behaelt. */
.menu li.lang-li-de::before { content: none; }
.menu li.lang-li-en + li::before { content: none; }


/* Die vier Netzwerk-Symbole im Kartenzahlungs-Panel waren mit 100px so gross,
   dass ihre Karte deutlich hoeher wurde als die anderen drei. Jetzt haben sie
   dieselbe Groesse wie im Fussbereich - die Karte ist damit genauso hoch wie
   "Zahlung" und "Lage". */
#p-infobox .social-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#p-infobox .social-row a { display: inline-flex; }
#p-infobox .social-row img {
  width: 30px; height: 30px; object-fit: contain;
  transition: transform 0.18s ease;
}
#p-infobox .social-row a:hover img { transform: translateY(-2px); }

/* Die drei Karten im Kartenzahlungs-Panel bekommen rund 100px mehr Hoehe.
   min-height statt Polster: der Inhalt bleibt oben stehen, die Karten sind
   aber alle gleich hoch - und das Panel muss deshalb nicht scrollen. */
#p-infobox .info-card { min-height: 340px; }

/* Prominente Gaeste: nur der Titel, und der sitzt ganz oben am Panelrand.
   Der Rest der Flaeche bleibt frei fuer die Bilder, die noch kommen. */
#p-prominenz.open > .panel-body { padding-top: 0.6rem; }
#p-prominenz > .panel-body > .wrap.prominenz-leer {
  margin-top: 0; align-self: flex-start;
}
#p-prominenz .sec-title { margin-top: 0; }

/* Dessert-Tafeln je 20px schmaler (10px links, 10px rechts) - die Bilder
   bekommen dadurch etwas Luft zueinander, die Zellen bleiben wie sie sind. */
/* Dessert-Tafeln insgesamt etwas kleiner: 88% der Zellenbreite (statt voll)
   und ein entsprechend niedrigerer Hoehendeckel. */
#p-dessert .dessert-card img { width: 60%; max-width: 60%; margin: 0 auto; }
@media (min-width: 901px) {
  #p-dessert .dessert-card img {
    width: 60%; max-width: 60%;
    max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 8.8rem);
  }
}

/* Preise stehen jetzt als Text unter der Tafel (aus den Bildern herausgeschnitten).
   Farbe und Aufbau wie zuvor im Bild: heller Pfirsichton, Serifenschrift, die
   Cents kleiner hochgestellt neben dem Komma. */
/* Kein negativer Rand mehr - der schnitt die Tafeln oben ab. Der Platz fuer
   den Preis kommt jetzt aus dem Hoehendeckel des Bildes. */
#p-dessert .dessert-card { display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; }
#p-dessert .dz-preis {
  display: block; text-align: center;
  /* schlicht und ohne Fettdruck */
  font-family: Georgia, "Times New Roman", serif;
  color: #efc196; font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 2.4rem); line-height: 1;
  letter-spacing: 0.03em; margin-top: 0.35rem; font-variant-numeric: tabular-nums;
}
#p-dessert .dz-preis span { font-size: 0.62em; }

/* Auszeichnung: der Grund der Kuppelreihe ist hier schwarz wie das Panel -
   sonst stand ueber den beiden Urkunden ein weinroter Streifen. */
.panels[data-open="p-auszeichnung"] { background: #000; }

/* Die drei Urkunden stehen dicht beieinander in der Mitte, statt sich ueber
   die vier Rasterspalten zu verteilen. */
#p-auszeichnung .weine-grid {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(70px, 10vw, 220px);   /* etwas enger, damit die Urkunden groesser werden */   /* deutlicher Abstand zwischen den Urkunden */
}
#p-auszeichnung .weine-card { flex: 0 1 auto; }
#p-auszeichnung .weine-card img {
  width: auto; max-width: 100%;
  /* die Hoehe bestimmt die Groesse: mehr Hoehe = groessere Urkunden */
  max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 1rem);
}

/* Die aeussere Urkunde je 20px nach aussen ruecken - transform, damit sich am
   Abstand im Raster nichts aendert. */
#p-auszeichnung .weine-card:first-child { transform: translateX(-70px); }
#p-auszeichnung .weine-card:last-child  { transform: translateX(70px); }

/* ===== Q-Linie ausgeblendet ============================================
   Auf Wunsch ist die waagerechte Linie im Q-Abschluss (<span class="qline">)
   ueberall unsichtbar. NICHTS wurde geloescht: das Element wird in
   partials.js weiterhin erzeugt (Zeile mit '<span class="qline">'), und alle
   bisherigen Regeln dazu stehen unveraendert in dieser Datei
   (.q-divider .qline, .q-divider.panel-q .qline, #p-navigation ... .qline).
   ZURUECKHOLEN: einfach diesen einen Block hier loeschen. */
.q-divider .qline { display: none !important; }

/* Der Grund der Kuppelreihe ist bei diesen Panels schwarz wie das Panel selbst
   - sonst steht ueber dem Inhalt ein weinroter Streifen. */
.panels[data-open="p-mediathek"],
.panels[data-open="p-catering"],
.panels[data-open="p-weihnachten"],
.panels[data-open="p-legende"] { background: #000; }

/* Interieur: fuenf Bilder dicht nebeneinander in einer Reihe, jedes so gross
   wie ein Plakat unter Reihe B. */
#p-mediathek .weine-grid.int-reihe {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(6px, 1vw, 18px);
  /* etwas Luft am linken und rechten Rand der Reihe */
  padding: 0 clamp(10px, 1.6vw, 34px);
}
#p-mediathek .int-reihe .weine-card { flex: 1 1 0; min-width: 0; }
#p-mediathek .int-reihe img {
  width: 96%; margin: 0 auto; height: auto; object-fit: contain;
  max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2rem);
}

/* Bild gross anzeigen: schwarze Lage ueber der ganzen Seite */
.bild-voll {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.96); cursor: zoom-out;
}
.bild-voll.offen { display: flex; }
.bild-voll img { max-width: 96vw; max-height: 94vh; object-fit: contain; display: block; }
.bild-voll-zu {
  position: absolute; top: 14px; right: 20px;
  background: none; border: 0; color: #ffeaa4; font-size: 2.4rem; line-height: 1;
  cursor: pointer; padding: 4px 10px;
}
#p-mediathek .int-reihe img { cursor: zoom-in; }

/* Zoomen ja, Scrollen nein: pinch-zoom laesst die Zwei-Finger-Geste (und am
   Trackpad das Aufziehen) zu, unterbindet aber das Wischen zum Scrollen. */
html, body { touch-action: pinch-zoom; }

/* Catering und Prominente Gaeste: gleicher schwarzer Grund und dieselbe
   Bilderreihe wie im Interieur-Panel. */
#p-prominenz { background: #000; }
.panels[data-open="p-prominenz"] { background: #000; }
#p-catering .weine-grid.int-reihe,
#p-prominenz .weine-grid.int-reihe {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(6px, 1vw, 18px); padding: 0 clamp(10px, 1.6vw, 34px);
}
#p-catering .int-reihe .weine-card,
#p-prominenz .int-reihe .weine-card { flex: 1 1 0; min-width: 0; }
#p-catering .int-reihe img,
#p-prominenz .int-reihe img {
  width: 96%; margin: 0 auto; height: auto; object-fit: contain; cursor: zoom-in;
  max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2rem);
}

/* Prominente Gaeste: Titel oben, darunter die Bilderreihe. Der Titel bekommt
   nur so viel Hoehe wie noetig, damit die Bilder so gross bleiben wie im
   Interieur. */
#p-prominenz > .panel-body > .wrap {
  display: flex; flex-direction: column; gap: 0.3rem;
}
#p-prominenz .sec-title { margin: 0 0 0.2rem; flex: 0 0 auto; }
#p-prominenz .weine-grid.int-reihe { flex: 1 1 auto; min-height: 0; }
#p-prominenz .sec-title { font-size: clamp(1.25rem, 2.8vh, 2.1rem); }
#p-prominenz .int-reihe img {
  /* gleicher Deckel wie im Interieur - die Bilder werden dadurch genauso gross */
  max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2rem);
}

/* Prominente Gaeste und Catering bekommen dieselbe volle Panelbreite wie das
   Interieur-Panel - vorher begrenzte die Standardbreite von .wrap (1040px) die
   Reihe und die Bilder wurden dadurch kleiner. */
#p-prominenz > .panel-body > .wrap,
#p-catering > .panel-body > .wrap { max-width: none; padding-left: 0; padding-right: 0; }

/* Legende: links Text, rechts das Bild. Das Bild wird in der Hoehe eingepasst,
   damit die Abschlusslinie unten am Bildschirmrand bleibt. */
#p-legende > .panel-body > .wrap.leg-grid {
  max-width: none; padding: 0 clamp(10px, 2vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 3vw, 60px);
}
#p-legende .leg-text { flex: 1 1 50%; min-width: 0; color: var(--cream); }
#p-legende .leg-bild { flex: 0 1 auto; display: flex; justify-content: flex-end;
  transform: translateX(-50px); }   /* 50px nach links */
#p-legende .leg-bild img {
  width: auto; max-width: 100%; height: auto; object-fit: contain; display: block;
  max-height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2rem);
}
@media (max-width: 900px) {
  #p-legende > .panel-body > .wrap.leg-grid { flex-direction: column; }
}

/* Vorhang: erscheint ohne Blende (transition: none), verschwindet weich. */
.sprung-vorhang {
  position: fixed; inset: 0; background: #000; z-index: 8000;
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
.sprung-vorhang.an { opacity: 1; transition: none; }

/* Fotos / Videos: zwei Kuppeln links und rechts neben "schließen". Sie liegen
   wie die Blaetterknoepfe absolut in der Reihe und sind nur sichtbar, solange
   das Interieur-Panel offen ist. */
.panels .med-nav { display: none; }
.panels[data-open="__aus"] .med-nav {
  display: flex; align-items: center; justify-content: space-between;
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(40px, 12vw, 260px);
  z-index: 3; pointer-events: none;
}
.med-nav .hex { pointer-events: auto; }
.med-nav .hex.is-active span { color: #fff6d8; text-shadow: 0 0 10px rgba(255,234,164,0.9); }

/* Videos im Interieur-Panel: gleiche Reihe wie die Fotos, gleiche Groesse. */
/* Alle Videofenster gleich hoch, damit die Bedienleisten auf einer Linie
   liegen. Die Filme selbst werden eingepasst (contain), nichts wird
   beschnitten - unterschiedliche Formate fuellen ihren Rahmen schwarz. */
#p-legende .video-reihe {
  align-items: stretch;
  height: calc(100svh - var(--top-h, 540px) - var(--trig-h, 360px) - var(--qstand-h, 96px) - 2rem);
}
#p-legende .video-reihe .weine-card { display: flex; align-items: stretch; }
#p-legende .video-reihe video {
  width: 96%; height: 100%; margin: 0 auto; display: block;
  object-fit: contain; background: #000;
}

/* [hidden] muss staerker sein als das display:flex der Bilderreihe - sonst
   stehen Fotos und Videos gleichzeitig da. */
#p-mediathek .int-reihe[hidden] { display: none !important; }

/* Videopanel (frueher Legende): gleicher schwarzer Grund wie die anderen. */
#p-legende .video-reihe { gap: clamp(6px, 1vw, 18px); padding: 0 clamp(10px, 1.6vw, 34px); }

/* Vorhang abgeschaltet: der Sprung ist jetzt in einem Bild fertig, ein
   schwarzes Zwischenbild braucht es nicht mehr. */
.sprung-vorhang { display: none !important; }

/* ===== Videopanel: grosse Abspielknoepfe ================================= */
#p-legende .video-reihe { align-items: center; height: auto; }
.vid-play {
  width: 100%; background: none; border: 0; padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease;
}
/* Feste, gleiche Groesse fuer alle vier Knoepfe - vorher richtete sich die
   Groesse nach der Spaltenbreite und war deshalb je nach Platz verschieden. */
.vid-play svg { width: clamp(64px, 7vw, 110px); height: auto; display: block; }
.vid-play circle { fill: none; stroke: #ffeaa4; stroke-width: 1.6; opacity: 0.85; }
.vid-play polygon { fill: #452323; }   /* Dreieck im Abspielknopf */
.vid-play:hover { transform: scale(1.06); }
.vid-play:active { transform: scale(0.97); }
.vid-play:focus-visible { outline: 2px solid #ffeaa4; outline-offset: 6px; border-radius: 50%; }

/* Vollbildlage fuer den Film */
.kino {
  position: fixed; inset: 0; z-index: 9000; display: none;
  align-items: center; justify-content: center; background: #000;
}
.kino.offen { display: flex; }
.kino video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.kino-zu {
  position: absolute; top: 12px; right: 18px; z-index: 2;
  background: rgba(0,0,0,0.5); border: 0; color: #ffeaa4;
  font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 2px 14px 8px;
  border-radius: 8px;
}
.kino-zu:hover { color: #fff6d8; }

/* Ueber jedem Knopf steht seine Nummer. */
.vid-karte {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.vid-titel {
  font-family: var(--serif); color: #ffeaa4;
  font-size: clamp(0.95rem, 1.5vw, 1.5rem); letter-spacing: 0.03em;
}

/* Nur im Impressum-Panel: die ovale Platte hinter dem Q faellt weg, der
   Buchstabe und der Rest der Leiste bleiben. Nichts geloescht - eine Zeile
   entfernen holt sie zurueck. */
#p-impressum .q-divider ellipse,
#p-impressum .q-divider image { display: none; }


/* Kartenzahlung: jetzt nur noch EINE Karte (Zahlung + Netzwerke). Sie ist rund
   200px breiter als zuvor und steht mittig im Panel. */
#p-infobox .panel-info { display: flex; justify-content: center; }
#p-infobox .info-card { width: min(100%, 775px); }
#p-infobox .info-card .ic-zweit { margin-top: 1.4rem; }

/* Inhalt der Kartenzahlungs-Karte mittig: waagerecht zentriert und senkrecht
   in der Mitte des Rechtecks. */
#p-infobox .info-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
#p-infobox .info-card h4,
#p-infobox .info-card p { text-align: center; width: 100%; }
#p-infobox .pay-icons,
#p-infobox .social-row { justify-content: center; }




/* ===== Impressum als Text ===============================================
   Dieselben sechs Tafeln wie zuvor als Bilder, jetzt als echter Text: gleiche
   Reihenfolge, gleiche Gliederung (Titel, Vorspann, Zeilen, Fliesstext), in der
   Schrift und im Cremeton der Vorlage - ohne Rahmen, Ornamente und Hintergrund. */
#p-impressum .imp-tafel {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 0.14em; min-width: 0; overflow: hidden;
  font-family: var(--serif); color: #F3E2A9;
}
#p-impressum .imp-tafel h3 {
  margin: 0; font-weight: 700; color: #F3E2A9; letter-spacing: 0.01em;
  font-size: clamp(0.9rem, 2.35vh, 1.8rem); line-height: 1.06;
}
#p-impressum .imp-tafel .imp-marke { font-size: clamp(1.05rem, 2.75vh, 2.05rem); }
#p-impressum .imp-tafel .imp-zweit { margin-top: 0.25em; }
#p-impressum .imp-tafel .imp-unter {
  margin: 0; color: #F3E2A9; font-weight: 600;
  font-size: clamp(0.82rem, 1.85vh, 1.35rem); line-height: 1.1;
}
#p-impressum .imp-tafel .imp-lead,
#p-impressum .imp-tafel .imp-zeile,
#p-impressum .imp-tafel .imp-text { margin: 0; }
#p-impressum .imp-tafel .imp-lead {
  font-size: clamp(0.68rem, 1.5vh, 1.05rem); line-height: 1.18; color: #F3E2A9;
}
#p-impressum .imp-tafel .imp-zeile {
  font-size: clamp(0.78rem, 1.75vh, 1.25rem); line-height: 1.22; color: #F3E2A9;
}
#p-impressum .imp-tafel .imp-text {
  font-size: clamp(0.63rem, 1.36vh, 1rem); line-height: 1.19; color: #F3E2A9;
  max-width: 44ch;
}

/* Die beiden laengsten Tafeln (Haftungshinweis, Copyright) bekommen etwas
   kleinere Schrift und engere Zeilen, damit auch sie ohne Abschneiden in ihre
   Zelle passen. */
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text {
  font-size: clamp(0.56rem, 1.24vh, 0.9rem); line-height: 1.2; max-width: 46ch;
}
#p-impressum .imp-tafel:nth-child(4),
#p-impressum .imp-tafel:nth-child(5) { gap: 0.16em; }

/* Gewuenschte Groessen: Titel 25px, Text 22px, Spaltenbreite 320px.
   Der Text ist damit deutlich hoeher als die Panelflaeche - das Raster laesst
   die Zeilen deshalb mitwachsen und die Tafel bekommt eine eigene Bildlaufleiste,
   sonst wuerde unten abgeschnitten. */
#p-impressum .imp-grid {
  grid-template-rows: auto auto;
  align-content: start;
  overflow-y: auto; overscroll-behavior: contain;
  row-gap: 26px;
}
#p-impressum .imp-tafel { overflow: visible; width: 100%; max-width: 320px; margin: 0 auto; }
#p-impressum .imp-tafel h3 { font-size: 25px; }
#p-impressum .imp-tafel .imp-marke { font-size: 28px; }
#p-impressum .imp-tafel .imp-unter { font-size: 23px; }
#p-impressum .imp-tafel .imp-lead { font-size: 20px; }
#p-impressum .imp-tafel .imp-zeile { font-size: 22px; }
#p-impressum .imp-tafel .imp-text,
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text { font-size: 18px; max-width: 320px; }

/* Alles muss ohne Scrollen sichtbar sein: das Raster bekommt wieder zwei feste
   Zeilen und keine Bildlaufleiste. Die Schriftgroessen wachsen bis zu den
   gewuenschten Werten (Titel 25px, Text 18px), schrumpfen auf flachen Fenstern
   aber so weit mit, dass alle sechs Tafeln vollstaendig in das Panel passen. */
#p-impressum .imp-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  overflow: hidden;
  row-gap: 10px;
}
/* Oben ausrichten statt mittig: reicht der Platz einmal nicht, fehlt unten
   etwas Fliesstext — die Ueberschrift bleibt aber immer stehen. Mittig
   ausgerichtet wurde oben UND unten abgeschnitten, dadurch verschwanden
   "Haftungshinweis" und "Erklaerung zum Copyright". */
#p-impressum .imp-tafel { overflow: hidden; justify-content: flex-start; }
#p-impressum .imp-tafel h3 { font-size: min(25px, 2.55vh); }
#p-impressum .imp-tafel .imp-marke { font-size: min(28px, 2.9vh); }
#p-impressum .imp-tafel .imp-unter { font-size: min(23px, 2.2vh); }
#p-impressum .imp-tafel .imp-lead { font-size: min(20px, 1.75vh); }
#p-impressum .imp-tafel .imp-zeile { font-size: min(22px, 2vh); }
#p-impressum .imp-tafel .imp-text { font-size: min(18px, 1.6vh); }
/* Die beiden langen Tafeln eine Spur kleiner - sie haben deutlich mehr Text. */
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text { font-size: min(16px, 1.4vh); }

/* Letzte Feinheit, damit wirklich nichts abgeschnitten wird, und der Grund
   des Panels ist wieder schwarz. */
#p-impressum, #p-impressum .panel-body { background: #4A2A15; }
#p-impressum .q-divider.panel-q {
  background: linear-gradient(180deg, #4A2A15 0 calc(50% + 20px), #b89171 calc(50% + 20px) 100%);
}
.panels[data-open="p-impressum"] { background: #4A2A15; }
#p-impressum .imp-tafel h3 { font-size: min(25px, 2.35vh); }
#p-impressum .imp-tafel .imp-marke { font-size: min(28px, 2.65vh); }
#p-impressum .imp-tafel .imp-unter { font-size: min(23px, 2.05vh); }
#p-impressum .imp-tafel .imp-lead { font-size: min(20px, 1.6vh); }
#p-impressum .imp-tafel .imp-zeile { font-size: min(22px, 1.85vh); }
#p-impressum .imp-tafel .imp-text { font-size: min(18px, 1.48vh); }
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text { font-size: min(16px, 1.3vh); }

/* Rest an Ueberlauf schliessen: etwas engere Zeilen in den Textabsaetzen. */
#p-impressum .imp-tafel .imp-text { line-height: 1.16; }
/* Absaetze, deren Text in den ersten geflossen ist (siehe partials.js:
   tafelPyramide), nehmen keinen Platz mehr ein. */
#p-impressum .imp-tafel .imp-leer { display: none; }
/* Der Absatz, in den ein ganzer Abschnitt geflossen ist, bekommt immer
   die Fliesstextgroesse - sonst stuende die Tafel "Qadmous e.U." in der
   groesseren Schrift von .imp-unter und faellt aus der Reihe. */
#p-impressum .imp-tafel p.imp-fluss {
  font-size: calc(15px * var(--imp-f)); line-height: 1.25;
  /* Umbrueche, Wortabstand und Laufweite setzt partials.js. Kein Blocksatz -
     der zieht jede Zeile einzeln auf und reisst Luecken. */
  text-align: center;
  width: 100%;
}
/* Jede Zeile ein eigener Block, damit ihre Laufweite einzeln feinjustiert
   werden kann. */
#p-impressum .imp-tafel .imp-zeile-fix { display: block; }
#p-impressum .imp-tafel:nth-child(2) .imp-text,
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text { line-height: 1.14; }
#p-impressum .imp-grid { row-gap: 8px; }



/* Kein Scrollen: die Groessen sind gedeckelt (23px / 17px als Obergrenze),
   schrumpfen aber mit der Fensterhoehe, damit alle sechs Tafeln beim Oeffnen
   vollstaendig sichtbar sind. */
#p-impressum .imp-tafel h3 { font-size: min(23px, 2.3vh); }
#p-impressum .imp-tafel .imp-marke { font-size: min(26px, 2.6vh); }
#p-impressum .imp-tafel .imp-text { font-size: min(17px, 1.45vh); }
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text { font-size: min(15.5px, 1.28vh); }
#p-impressum .imp-grid { overflow: hidden; }

/* Feste Groessen: Titel 18px, Text 15px. Damit die Zeilen nicht laenger werden
   und die Tafeln dadurch tiefer, duerfen die Spalten etwas breiter sein. */
#p-impressum .imp-tafel h3 { font-size: 18px; }
#p-impressum .imp-tafel .imp-marke { font-size: 21px; }
#p-impressum .imp-tafel .imp-unter { font-size: 17px; }
#p-impressum .imp-tafel .imp-lead { font-size: 15px; }
#p-impressum .imp-tafel .imp-zeile { font-size: 16px; }
#p-impressum .imp-tafel .imp-text,
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text {
  font-size: 15px; line-height: 1.25; max-width: 100%;
  /* volle Zellenbreite statt Schrumpfen auf den Inhalt - sonst misst die
     Pyramide im Skript gegen einen Kasten, den sie selbst schmaler macht */
  width: 100%;
}
#p-impressum .imp-tafel { max-width: 380px; }
#p-impressum .imp-grid { column-gap: 10px; padding: 0 6px; }

/* Die Schriftgroessen haengen jetzt an einem Faktor, den partials.js beim
   Oeffnen misst: er beginnt bei 1 (also 18px/15px) und wird nur so weit
   verkleinert, bis auch die laengste Tafel vollstaendig in ihre Zelle passt.
   Dadurch wird nichts abgeschnitten und es muss nicht gescrollt werden. */
#p-impressum .imp-grid { --imp-f: 1; }
#p-impressum .imp-tafel h3 { font-size: calc(18px * var(--imp-f)); }
#p-impressum .imp-tafel .imp-marke { font-size: calc(21px * var(--imp-f)); }
#p-impressum .imp-tafel .imp-unter { font-size: calc(17px * var(--imp-f)); }
#p-impressum .imp-tafel .imp-lead { font-size: calc(15px * var(--imp-f)); }
#p-impressum .imp-tafel .imp-zeile { font-size: calc(16px * var(--imp-f)); }
#p-impressum .imp-tafel .imp-text,
#p-impressum .imp-tafel:nth-child(4) .imp-text,
#p-impressum .imp-tafel:nth-child(5) .imp-text { font-size: calc(15px * var(--imp-f)); }

/* ===== Nachricht / Bewertung ============================================ */
.rsv-field.rsv-msg .msg-sterne {
  display: flex; gap: 8px; align-items: center; justify-content: flex-start;
  height: var(--ctl-h); padding: 0 0.8rem;
  background: #140b0c; border: 1px solid var(--line); border-radius: 3px;
}
.rsv-field.rsv-msg .msg-stern {
  background: none; border: 0; padding: 0 2px; cursor: pointer; line-height: 1;
  font-size: 1.55rem; color: #5b4a3c; transition: color 0.15s ease, transform 0.15s ease;
}
.rsv-field.rsv-msg .msg-stern.an,
.rsv-field.rsv-msg .msg-stern.vorschau { color: var(--gold2); }
.rsv-field.rsv-msg .msg-stern:hover { transform: translateY(-1px); }
.qcal.qsel.msg-wahl .qsel-list { grid-template-columns: 1fr; }

/* [hidden] muss das display:flex der Sternenleiste schlagen - sonst steht sie
   schon da, bevor der Gast "Bewertung" gewaehlt hat. */
.rsv-field.rsv-msg .msg-sterne[hidden] { display: none !important; }

/* Trennlinie zwischen "Nachricht" und "Bewertung" in der Auswahl. */
.qcal.qsel.msg-wahl .qsel-opt + .qsel-opt {
  border-top: 1px solid rgba(255, 234, 164, 0.28);
}

/* Auswahl "Nachricht / Bewertung": jede Zeile so hoch wie das Eingabefeld
   (45.38px), die Trennlinie kraeftiger und ueber die ganze Breite - dafuer
   bekommen die Zeilen ihren seitlichen Innenabstand ueber den Text, nicht
   ueber die Zeile selbst. */
.qcal.qsel.msg-wahl .qsel-list { gap: 0; padding: 0; }
.qcal.qsel.msg-wahl .qsel-opt {
  height: 45.38px; padding: 0 12px; justify-content: center; text-align: center;
  border-radius: 0;
}
.qcal.qsel.msg-wahl .qsel-opt + .qsel-opt {
  border-top: 2px solid rgba(255, 234, 164, 0.55);
}

/* Der Rahmen der Auswahl hat rundum 8px Polster - dadurch blieb links und
   rechts von der Trennlinie eine Luecke. Fuer diese Auswahl faellt es weg,
   die Linie laeuft damit von Kante zu Kante. Die Zeilen werden dabei etwas
   flacher. */
.qcal.qsel.msg-wahl { padding: 0; overflow: hidden; }
.qcal.qsel.msg-wahl .qsel-opt { height: 38px; }

/* Waehlt der Gast "Nachricht", wird das Textfeld rund 100px hoeher - er soll
   sehen, dass er wirklich schreiben kann. */
.rsv-field.rsv-msg.ist-nachricht textarea {
  height: calc(var(--ctl-h) + 100px); min-height: calc(var(--ctl-h) + 100px);
}

/* Das frühere Textfeld-Sonderformat entfaellt: "Anlass der Reservierung" ist
   eine normale Auswahlliste und so hoch wie jedes andere Feld. */
.rsv-field.rsv-msg.ist-nachricht textarea,
.rsv-grid .rsv-msg textarea { height: var(--ctl-h); min-height: var(--ctl-h); }
.rsv-grid .rsv-msg select { width: 100%; }

/* ===== Anlass: Schreibfeld ============================================== */
.rsv-field.rsv-msg .anlass-notiz {
  margin-top: 6px; align-self: flex-start;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif); color: var(--gold2); font-size: 0.82rem;
  letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 3px;
}
.rsv-field.rsv-msg .anlass-notiz:hover { color: var(--gold); }
.rsv-field.rsv-msg .anlass-notiz[hidden] { display: none !important; }
.qcal.anlass-pop { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.qcal.anlass-pop .anlass-pop-titel {
  font-family: var(--serif); color: var(--gold2); font-size: 0.8rem; letter-spacing: 0.04em;
}
.qcal.anlass-pop textarea {
  width: 100%; resize: vertical; min-height: 140px;
  background: #140b0c; border: 1px solid var(--line); border-radius: 3px;
  color: var(--cream); font-family: var(--body); font-size: 0.95rem; padding: 8px 10px;
}
.qcal.anlass-pop textarea:focus { outline: none; border-color: var(--gold); }
.qcal.anlass-pop .anlass-fertig {
  align-self: flex-end; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--gold2); font-family: var(--serif); font-size: 0.85rem; padding: 5px 16px;
  transition: color 0.15s, border-color 0.15s;
}
.qcal.anlass-pop .anlass-fertig:hover { color: var(--gold); border-color: var(--gold); }

/* Kein leuchtender Rahmen um das Schreibfeld - weder im Ruhezustand noch beim
   Hineinklicken. */
.qcal.anlass-pop { border: 0; box-shadow: none; background: transparent; }
.qcal.anlass-pop textarea,
.qcal.anlass-pop textarea:focus {
  border-color: rgba(255, 234, 164, 0.18); box-shadow: none; outline: none;
}

/* Impressum in #452323 - Panel, Streifen ueber der Abschlusslinie und der
   Grund der Kuppelreihe. */
#p-impressum, #p-impressum .panel-body { background: #452323 !important; }
#p-impressum .q-divider.panel-q {
  background: linear-gradient(180deg,
              #452323 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%) !important;
}
.panels[data-open="p-impressum"] { background: #452323; }

/* Cocktail-Plakate 20px flacher: sie stehen in der Zeile mittig, der Deckel
   rueckt ihre Oberkante also um 10px nach unten. Zusammen mit der um gut 20px
   angehobenen Ueberschrift ("Mit Alkohol") bleibt zwischen der Goldlinie der
   Ueberschrift und den Plakaten wieder Luft - vorher lag die Linie auf den
   Plakatkoepfen. Die Hoehe des Panels aendert sich nicht. */
@media (min-width: 901px) {
  #p-cocktails .weine-card img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 3rem - 20px);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 3rem - 20px);
  }
}

/* ===== PANELGRUND WIEDERHERGESTELLT ====================================
   Die Plakat-Panels standen wieder auf reinem Schwarz (#000) - der Grund der
   Bilder (Menue/Dessert #352223, Cocktails #351001, Weine #250a01) stand damit
   als helleres Rechteck auf dunklem Grund, die Bildraender waren sichtbar.
   Hier bekommt jedes Panel wieder den Grund SEINER Bilder: Panelflaeche,
   Kuppelreihe solange das Panel offen ist, und der Streifen ueber dem
   Abschlussband. Steht am Ende der Datei und schlaegt damit die schwarzen
   Regeln weiter oben. */
#p-speisen, #p-dessert, #p-auszeichnung, #p-legende, #p-mediathek, #p-weihnachten, #p-catering, #p-prominenz { background: #352223; }
.panels[data-open="p-speisen"], .panels[data-open="p-dessert"], .panels[data-open="p-auszeichnung"], .panels[data-open="p-legende"], .panels[data-open="p-mediathek"], .panels[data-open="p-weihnachten"], .panels[data-open="p-catering"], .panels[data-open="p-prominenz"] { background: #352223; }
#p-speisen .q-divider.panel-q,
#p-dessert .q-divider.panel-q,
#p-auszeichnung .q-divider.panel-q,
#p-legende .q-divider.panel-q,
#p-mediathek .q-divider.panel-q,
#p-weihnachten .q-divider.panel-q,
#p-catering .q-divider.panel-q,
#p-prominenz .q-divider.panel-q {
  background: linear-gradient(180deg,
              #352223 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
#p-cocktails { background: #351001; }
.panels[data-open="p-cocktails"] { background: #351001; }
#p-cocktails .q-divider.panel-q {
  background: linear-gradient(180deg,
              #351001 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
#p-weine { background: #250a01; }
.panels[data-open="p-weine"] { background: #250a01; }
#p-weine .q-divider.panel-q {
  background: linear-gradient(180deg,
              #250a01 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* Dessert-Panel auf dunkles Braun #371605 - derselbe warme Ton wie der Grund
   der neuen Weinplakate. Die vier Tafeln tragen ihn als eigene Datei
   (dessert-N-braun.png); die Kopien auf Menueseite 32 bleiben auf #352223,
   weil das Menue-Panel diesen Grund hat. */
#p-dessert { background: #371605; }
.panels[data-open="p-dessert"] { background: #371605; }
#p-dessert .q-divider.panel-q {
  background: linear-gradient(180deg,
              #371605 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* ===== EIN GRUND FUER ALLE PANELS: #371605 ==============================
   Vorher hatte jedes Panel seinen eigenen Ton (#352223 Menue/Dessert,
   #351001 Cocktails, #250a01 Weine). Jetzt derselbe warme Dunkelbraunton
   ueberall - Panelflaeche, Kuppelreihe solange das Panel offen ist, und der
   Streifen ueber dem Abschlussband. Die 147 Menue-Teile tragen denselben Ton
   im Bild (assets/menue-de/*.png), sonst staenden sie als Rechtecke darauf. */
#p-speisen, #p-dessert, #p-weine, #p-cocktails, #p-auszeichnung, #p-legende, #p-mediathek, #p-weihnachten, #p-catering, #p-prominenz { background: #371605; }
.panels[data-open="p-speisen"], .panels[data-open="p-dessert"], .panels[data-open="p-weine"], .panels[data-open="p-cocktails"], .panels[data-open="p-auszeichnung"], .panels[data-open="p-legende"], .panels[data-open="p-mediathek"], .panels[data-open="p-weihnachten"], .panels[data-open="p-catering"], .panels[data-open="p-prominenz"] { background: #371605; }
#p-speisen .q-divider.panel-q,
#p-dessert .q-divider.panel-q,
#p-weine .q-divider.panel-q,
#p-cocktails .q-divider.panel-q,
#p-auszeichnung .q-divider.panel-q,
#p-legende .q-divider.panel-q,
#p-mediathek .q-divider.panel-q,
#p-weihnachten .q-divider.panel-q,
#p-catering .q-divider.panel-q,
#p-prominenz .q-divider.panel-q {
  background: linear-gradient(180deg,
              #371605 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* Menue-Panel bleibt auf seinem alten Grund #352223 - die 147 Teile tragen
   diesen Ton im Bild, und der Besitzer will das Menue unveraendert. Die
   anderen Panels stehen auf dem einheitlichen #371605. */
#p-speisen { background: #352223; }
.panels[data-open="p-speisen"] { background: #352223; }
#p-speisen .q-divider.panel-q {
  background: linear-gradient(180deg,
              #352223 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* ===== MENUE-PANEL: RASTER UND GROESSEN ==================================
   Diese Regeln waren aus dem Stylesheet verschwunden - ohne sie stand das
   Titelbild als gewoehnliche Rasterzelle NEBEN den beiden Ausschnitten und die
   Stuecke wurden viel zu klein gerechnet. Eine Seite ist: Titel oben ueber die
   ganze Breite, darunter die zwei Ausschnitte nebeneinander. */
#p-speisen .weine-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.2rem;
  align-items: start;
  justify-items: center;
  padding-left: 86px;                 /* Platz fuer die Blaetterleiste */
}
#p-speisen .weine-card { display: flex; align-items: center; justify-content: center; min-width: 0; }
#p-speisen .weine-card.is-empty { display: none; }
/* Titel, Dessert-Tafel und Weintafel laufen ueber beide Spalten */
#p-speisen .weine-card.menu-titel,
#p-speisen .weine-card.span2,
#p-speisen .weine-card.menu-dessert,
#p-speisen .weine-card.menu-weine { grid-column: 1 / -1; }
/* Die Ausschnitte: so gross wie moeglich, aber eine Seite bleibt eine Seite */
#p-speisen .weine-card img { width: auto; max-width: 100%; height: auto; margin: 0 auto; display: block; }
@media (min-width: 901px) {
  #p-speisen .weine-card.menu-titel img {
    width: auto; max-width: 100%; max-height: 104px; margin: 0 auto;
  }
  #p-speisen .weine-card:not(.menu-titel) img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 104px - 2.2rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 104px - 2.2rem);
  }
  #p-speisen .weine-card.menu-dessert img,
  #p-speisen .weine-card.menu-weine img { max-height: none; }
}
@media (max-width: 900px) {
  #p-speisen .weine-grid { padding-left: 0; }
  #p-speisen .weine-card.menu-titel img { max-height: 56px; height: auto !important; }
}

/* ===== MENUE-SEITE 32 (Dessert-Tafeln) und 54 (Weinpreise) ===============
   Auch diese Regeln fehlten. Seite 32 ist die Dessert-Seite als EINE Karte
   ueber beide Spalten, darin vier Tafeln nebeneinander mit ihrem Preis
   darunter (eigene Klassen md-grid/md-card, damit der Blaetterzaehler sie
   nicht als vier Karten mitzaehlt). Seite 54 ist die Preistafel, so breit
   wie die Seite. */
#p-speisen .menu-dessert .md-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem; width: 100%; align-items: start; justify-items: center;
}
#p-speisen .menu-dessert .md-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-width: 0;
}
#p-speisen .menu-dessert .md-card img {
  width: 100%; height: auto; max-width: 100%; margin: 0 auto; display: block;
}
#p-speisen .menu-dessert .dz-preis {
  display: block; text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  color: #efc196; font-weight: 400;
  font-size: clamp(0.95rem, 1.5vw, 1.9rem); line-height: 1;
  letter-spacing: 0.03em; margin-top: 0.3rem; font-variant-numeric: tabular-nums;
}
#p-speisen .menu-dessert .dz-preis span { font-size: 0.62em; }
#p-speisen .menu-weine img {
  width: 100%; height: auto; max-width: 100%; margin: 0 auto; display: block;
}
@media (min-width: 901px) {
  /* beide Sonderseiten duerfen die volle Resthoehe nutzen, ohne zu scrollen */
  #p-speisen .menu-dessert .md-card img,
  #p-speisen .menu-weine img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 5.5rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 5.5rem);
    width: auto;
  }
}
@media (max-width: 900px) {
  #p-speisen .menu-dessert .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menue-Panel jetzt auf demselben Grund wie alle anderen Panels. Die Teile
   tragen denselben Ton im Bild - sie wurden dafuer NEU aus dem PDF erzeugt
   (TARGET in _tools/menu_cut.py und zwei_pdf.py), nicht nachtraeglich
   umgefaerbt. */
#p-speisen { background: #371605; }
.panels[data-open="p-speisen"] { background: #371605; }
#p-speisen .q-divider.panel-q {
  background: linear-gradient(180deg,
              #371605 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
/* Seite 32 (Dessert) und 54 (Weinpreise) duerfen die ganze Seitenbreite
   nutzen: keine Einrueckung fuer die Blaetterleiste, und ein hoeherer Deckel,
   damit die Tafeln entsprechend breiter werden. */
#p-speisen .weine-card.menu-dessert,
#p-speisen .weine-card.menu-weine { width: 100%; margin-left: -86px; padding-left: 86px; }
#p-speisen .menu-dessert .md-grid { gap: 1.6rem; }
@media (min-width: 901px) {
  #p-speisen .menu-dessert .md-card img,
  #p-speisen .menu-weine img {
    max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 3rem);
    max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 3rem);
    width: auto; max-width: 100%;
  }
  #p-speisen .menu-weine img { width: 100%; height: auto; }
}

/* ===== WEINE, SEITE 1: PREISTAFEL =======================================
   Die Tafel wird von der HOEHE begrenzt (Schirm minus Kopf, Kuppelreihe und
   Abschlussband), in der Breite ist Luft. Sie wird deshalb waagerecht gedehnt:
   natuerliche Breite bei dieser Hoehe (Seitenverhaeltnis 1944:809 = 2.403)
   plus 500px, also 250px je Seite. max-width: 100% ist die Bremse - die Tafel
   laeuft nie ueber den Seitenrand, und die Blaetterleiste behaelt ihren Platz
   (ein negativer Rand wuerde von placeRail() sofort wieder ausgeglichen). */
#p-weine .weine-card.weine-preise { width: 100%; }
#p-weine .weine-card.weine-preise img {
  --wp-h: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2rem);
  height: calc(var(--wp-h) + 50px);
  width: calc(var(--wp-h) * 2.403 + 500px);
  max-width: 100%; max-height: none;
  object-fit: fill;
  margin: 0 auto;
  transform: none;
}
#p-weine .weine-card.weine-preise { margin-top: -30px; }

/* Menue-Seite 54 = Weine-Seite 1: dieselbe Datei, dieselbe Rechnung. Die
   Karte traegt jetzt beide Klassen (menu-weine weine-preise); hier steht
   dieselbe Groessenformel wie im Weine-Panel, nur auf das Menue gemuenzt. */
#p-speisen .weine-card.menu-weine.weine-preise {
  grid-column: 1 / -1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin-top: -30px;
}
#p-speisen .weine-card.menu-weine.weine-preise img {
  --wp-h: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2rem);
  height: calc(var(--wp-h) + 50px);
  width: calc(var(--wp-h) * 2.403 + 500px);
  max-width: 100%; max-height: none;
  object-fit: fill; margin: 0 auto; transform: none;
}

/* ===== MENUE-ABSCHNITT DER STARTSEITE ===================================
   Kuppelreihe B, Plakatreihe und der stehende Q-Abschluss standen auf reinem
   Schwarz. Sie bekommen denselben Grund wie die Panels (#371605) - kein
   schwarzer Fleck mehr zwischen den Plakaten. */
.panels.row-b { background: #371605; }
.row-burg { background: #371605; }
.q-divider.q-standing {
  background: linear-gradient(180deg,
              #371605 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* ===== NUR DIE VIER BILDPANELS TRAGEN DAS NEUE BRAUN ====================
   Das einheitliche #371605 war versehentlich auf ALLE Panels gelegt worden.
   Es gilt nur fuer Menue, Dessert, Cocktails und Weine. Auszeichnung, Videos,
   Mediathek, Weihnachtsangebot, Catering und Prominente Gaeste stehen wieder
   auf ihrem alten schwarzen Grund - Panelflaeche, Kuppelreihe und der
   Streifen ueber dem Abschlussband. */
#p-auszeichnung, #p-legende, #p-mediathek, #p-weihnachten, #p-catering, #p-prominenz { background: #000; }
.panels[data-open="p-auszeichnung"], .panels[data-open="p-legende"], .panels[data-open="p-mediathek"], .panels[data-open="p-weihnachten"], .panels[data-open="p-catering"], .panels[data-open="p-prominenz"] { background: #000; }
#p-auszeichnung .q-divider.panel-q,
#p-legende .q-divider.panel-q,
#p-mediathek .q-divider.panel-q,
#p-weihnachten .q-divider.panel-q,
#p-catering .q-divider.panel-q,
#p-prominenz .q-divider.panel-q {
  background: linear-gradient(180deg,
              #000 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* ===== PLATZHALTER-TEXTE (Weihnachtsangebot, Catering) ==================
   Beide Panels zeigen nur einen Satz - im selben Bild wie allergene.html:
   mittig im Panel, Playfair Display, goldene Hauptzeile, kursive cremefarbene
   Folgezeilen. Die Regeln fehlten komplett, deshalb stand dort nur nackter
   Fliesstext. */
#p-weihnachten > .panel-body > .wrap,
#p-catering > .panel-body > .wrap {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 0 6vw; min-height: 0;
}
.bald-hinweis {
  margin: 0; text-align: center; text-wrap: balance;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: #ecc386; font-weight: 500; line-height: 1.15;
  font-size: clamp(1.8rem, 4.2vw, 4rem);
}
.bald-hinweis span {
  display: block; margin-top: 0.35em;
  font-style: italic; font-weight: 400; font-size: 0.55em; color: #f3e7cc;
}
.bald-hinweis span.zeit { margin-top: 0.55em; font-style: normal; color: #ecc386; }
@media (max-width: 900px) {
  .bald-hinweis { font-size: clamp(1.4rem, 6vw, 2.6rem); }
}

/* Weihnachtsangebot und Catering auf #352223 (das dunkle Braunrot der Seite) -
   Panelflaeche, Kuppelreihe solange offen, und der Streifen ueber dem
   Abschlussband. */
#p-weihnachten, #p-catering { background: #352223; }
.panels[data-open="p-weihnachten"],
.panels[data-open="p-catering"] { background: #352223; }
#p-weihnachten .q-divider.panel-q,
#p-catering .q-divider.panel-q {
  background: linear-gradient(180deg,
              #352223 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* Auszeichnung bekommt denselben Grund wie Weihnachtsangebot und Catering. */
#p-auszeichnung { background: #352223; }
.panels[data-open="p-auszeichnung"] { background: #352223; }
#p-auszeichnung .q-divider.panel-q {
  background: linear-gradient(180deg,
              #352223 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}

/* ===== UHRZEIT-AUSWAHL: "ENDE" und der Schliesshinweis ==================
   Beide standen in Weiss, weil ihre Regeln fehlten - sie bekommen dieselbe
   Farbe wie die Uhrzeiten (var(--cream)). Der Hinweis sitzt unter einer
   kraeftigen Goldlinie und ist etwas groesser als die Zellen. */
.qsel-ende {
  display: flex; align-items: center; justify-content: center;
  height: 38px; color: var(--cream); font-family: var(--body);
  font-size: 0.92rem; letter-spacing: 0.04em; user-select: none;
}
.qsel-hinweis {
  margin: 0.55rem 0 0; padding-top: 0.55rem;
  border-top: 2px solid var(--gold);
  text-align: center; color: var(--cream); font-family: var(--body);
  font-size: 1.02rem; line-height: 1.25;
}

/* Die Uhrzeiten stehen in Gold - "ENDE" und der Schliesshinweis bekommen
   genau dieselbe Farbe (vorher standen sie in Weiss). */
.qsel-ende, .qsel-hinweis { color: var(--gold2); }   /* genau der Ton der Uhrzeiten: #c2a66d */

/* "ENDE" sass etwas tiefer als die Uhrzeiten daneben: gleiche Zellenhoehe,
   gleiche Schriftgroesse wie die Uhrzeit-Knoepfe, und 4px nach oben gerueckt,
   damit es auf einer Linie mit "23:00 Uhr" steht. */
.qsel-ende {
  font-size: 0.92rem; line-height: 1;
  align-items: center; justify-content: center;
  transform: translateY(-4px);
}

/* Videos-Panel auf denselben Grund wie Auszeichnung, Catering und
   Weihnachtsangebot. */
#p-legende { background: #352223; }
.panels[data-open="p-legende"] { background: #352223; }
#p-legende .q-divider.panel-q {
  background: linear-gradient(180deg,
              #352223 0 calc(50% + 20px),
              #b89171 calc(50% + 20px) 100%);
}
/* Die Auszeichnungen sollen ganz zu sehen sein - auch die Zeile "Mit Stolz
   ausgezeichnet von DER FEINSCHMECKER." unten. Deshalb passt sich das Bild in
   der HOEHE ein und wird nicht beschnitten. */
#p-auszeichnung .weine-card img {
  object-fit: contain; height: auto; width: auto; max-width: 100%;
}
#p-auszeichnung .weine-grid { align-items: center; overflow: visible; }

/* ===== VIDEOS: die vier Abspielknoepfe dunkler ==========================
   Der Ring stand in hellem #ffeaa4 und stach heraus. Jetzt ein deutlich
   dunkleres Gold; das Dreieck im Ring wird ebenfalls dunkler. */
.vid-play circle { stroke: #a3854a; opacity: 0.9; }
.vid-play polygon { fill: #2b1516; }
.vid-play:focus-visible { outline-color: #a3854a; }

/* ===== AUSZEICHNUNG: Urkunden vollstaendig zeigen =======================
   Der Hoehendeckel rechnete mit den Rueckfallwerten 540px/360px. Stehen die
   echten Werte (--top-h, --trig-h) niedriger, wurde das Bild hoeher als der
   Platz im Panel und unten abgeschnitten - die Zeile "Mit Stolz ausgezeichnet
   von DER FEINSCHMECKER." verschwand. Dieselbe Rechnung wie in den anderen
   Panels, damit die Urkunde immer ganz hineinpasst. */
#p-auszeichnung .weine-card img {
  max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2.5rem);
  max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 2.5rem);
  object-fit: contain; height: auto; width: auto; max-width: 100%;
}

/* Die drei Urkunden standen genau auf der Q-Leiste auf - die unterste Zeile
   sah dadurch abgeschnitten aus. Die ganze Reihe rueckt 26px nach oben; die
   seitlichen Verschiebungen der aeusseren Urkunden bleiben davon unberuehrt,
   weil sie an den Karten haengen und nicht am Raster. */
#p-auszeichnung .weine-grid { transform: none; }   /* verschoben wurde nichts mehr - siehe unten */

/* ===== AUSZEICHNUNG: nirgends beschnitten ===============================
   Verschieben war der falsche Weg - nach oben gerueckt lief die Urkunde ueber
   die Panelkante hinaus und wurde OBEN beschnitten. Stattdessen wird das Bild
   so bemessen, dass es mit Luft oben UND unten in den freien Platz passt:
   Schirm minus Kopfleiste, Kuppelreihe, Q-Leiste und 4,5rem Reserve. Die Reihe
   steht dann von selbst mittig. */
#p-auszeichnung .weine-grid { transform: none; align-items: center; }
#p-auszeichnung .weine-card img {
  object-fit: contain; height: auto; width: auto; max-width: 100%;
  max-height: calc(100vh  - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 4.5rem);
  max-height: calc(100svh - var(--top-h, 240px) - var(--trig-h, 160px) - var(--qstand-h, 96px) - 4.5rem);
}

/* Die vier Abspielknoepfe in #b89171 - Ring UND Dreieck. */
.vid-play circle { stroke: #b89171; opacity: 1; }
.vid-play polygon { fill: #b89171; }
.vid-play:focus-visible { outline-color: #b89171; }