/* ========================================
   KLAG'S Restaurant – Premium Poster Layout
   Ziel: möglichst nah am bereitgestellten Referenzbild
   ======================================== */

:root {
  --bg: #10100f;
  --bg-2: #171716;
  --ink: #d8d2c6;
  --muted: #b1aa9d;
  --dim: #817a6f;
  --gold: #b89a56;
  --gold-soft: rgba(184, 154, 86, 0.55);
  --gold-faint: rgba(184, 154, 86, 0.24);
  --paper-shadow: rgba(0, 0, 0, 0.55);
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", cursive;
  --sans: "Montserrat", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #070707;
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(184, 154, 86, 0.08), transparent 28rem),
    radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.05), transparent 24rem),
    linear-gradient(180deg, #070707 0%, #10100f 100%);
  color: var(--ink);
  font-family: var(--serif);
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.08) brightness(0.78);
  transition: transform 0.45s ease, filter 0.45s ease;
}

figure {
  margin: 0;
  overflow: hidden;
  background: #0d0d0c;
}

.poster-shell {
  width: 100%;
  padding: 28px 18px;
  display: flex;
  justify-content: center;
}

/* Poster entspricht bewusst einer Speisekarten-/Plakatfläche wie im Bild */
.poster {
  width: min(100%, 980px);
  position: relative;
  overflow: hidden;
  padding: 24px 24px 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    radial-gradient(circle at 50% 13%, rgba(184, 154, 86, 0.1), transparent 23rem),
    radial-gradient(circle at 15% 72%, rgba(184, 154, 86, 0.055), transparent 18rem),
    var(--bg);
  background-size: 7px 7px, 9px 9px, auto, auto, auto;
  box-shadow: 0 28px 70px var(--paper-shadow);
  border: 1px solid rgba(184, 154, 86, 0.18);
}

.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent 8%, transparent 92%, rgba(0,0,0,0.22)),
    radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(0,0,0,0.22) 100%);
  mix-blend-mode: overlay;
}

.poster > * {
  position: relative;
  z-index: 1;
}

/* ================= Header ================= */

.poster-header {
  min-height: 205px;
  display: grid;
  grid-template-columns: 180px 1fr 228px;
  column-gap: 24px;
  align-items: start;
  padding-bottom: 18px;
}

.fresh-seal {
  width: 118px;
  height: 118px;
  margin-top: 10px;
  margin-left: 6px;
  border: 2px solid var(--gold-soft);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.055em;
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 1px rgba(184, 154, 86, 0.16);
}

.brand {
  text-align: center;
  color: var(--gold);
}

.lotus {
  height: 28px;
  margin-top: -2px;
  font-size: 35px;
  line-height: 1;
  opacity: 0.78;
}

.brand h1 {
  margin: 6px 0 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 74px;
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-shadow: 0 0 28px rgba(184, 154, 86, 0.14);
}

.brand h1.logo-text {
  font-family: "Caveat", cursive;
  font-size: 68px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-indent: 0;
  line-height: 0.85;
}

.brand h1.logo-text .logo-k {
  font-size: 1.6em;
  line-height: 0.7;
  vertical-align: baseline;
  margin-right: -4px;
}

.brand-rule {
  margin: 6px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.brand-rule span {
  width: 76px;
  height: 1px;
  background: var(--gold-soft);
}

.brand-rule p {
  margin: 0;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.26em;
}

/* Slogan "Genuss. Tradition. Herzlichkeit." — vormals Great Vibes 43px
   geschwungen. Nach mehrfachem User-Feedback (Juli 2026) auf Cormorant
   Serif Italic umgestellt: bleibt slogan-artig und emotional, ist aber
   deutlich lesbarer für ältere Zielgruppe. */
.claim {
  margin: 0 0 13px;
  color: #d9d1c3;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.09);
}

.kitchens {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.105em;
}

.kitchens b {
  padding: 0 8px;
  color: var(--dim);
}

/* Recommendation-Box (Header rechts): Border 2px → 1px (7.7.2026),
   konsistent mit der Regel „Info/CTA-Kacheln haben 1px-Border". */
.recommendation {
  min-height: 170px;
  margin-top: 0;
  padding: 22px 18px 14px;
  border: 1px solid var(--gold-faint);
  color: var(--muted);
  text-align: center;
}

.recommendation .leaf {
  margin-bottom: 7px;
  color: #7f8f59;
  font-size: 17px;
}

.recommendation h2 {
  margin: 0 0 14px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

/* Empfehlungs-Text: bis Juli 2026 in Great Vibes (Skript, geschwungen).
   Nach User-Feedback („wirkt maschinell wenn nur normale Serif") auf
   Cormorant Serif ITALIC umgestellt — behält Wärme und Persönlichkeit,
   ist aber deutlich lesbarer als Great Vibes. Die Italic-Variante von
   Cormorant hat echte handgezeichnete Kurven, wirkt wie eine warme
   Empfehlung, nicht wie technischer Fließtext. */
.recommendation p {
  margin: 0 auto;
  max-width: 210px;
  color: #d9d1c3;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
}

.recommendation span {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-size: 24px;
}

/* ================= Main Layout ================= */

.poster-grid {
  display: grid;
  grid-template-columns: 31.5% 36% 28.8%;
  grid-template-areas:
    "left center right"
    "quote quote quote"
    "mains mains mains";
  gap: 14px;
  align-items: start;
}

.panel,
.center-feature,
.mains-band {
  min-width: 0;
}

.left-starters {
  grid-area: left;
}

.center-feature {
  grid-area: center;
  padding-top: 6px;
}

.right-indian {
  grid-area: right;
  align-self: start;
}

.chef-quote {
  grid-area: quote;
}

.mains-band {
  grid-area: mains;
}

.section-heading {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.018em;
  text-transform: uppercase;
}

.section-heading span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.section-heading a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.section-heading a:hover {
  color: #d4b46a;
  text-shadow: 0 0 12px rgba(184, 154, 86, 0.3);
}

.section-heading a::after {
  content: " →";
  font-size: 0.7em;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.section-heading a:hover::after {
  opacity: 0.7;
}


/* ================= Left starters ================= */

.starter-row {
  display: grid;
  grid-template-columns: 1fr 136px;
  gap: 12px;
  min-height: 150px;
  padding: 0 0 13px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--gold-faint);
}

/* Letztes Element jeder Spalte: keine Bottom-Border,
   damit unterhalb der Chef-Quote-Trennlinie kein doppelter Rahmen entsteht.
   :last-of-type deckt beide typischen Endelemente ab (starter-row + indian-block). */
.left-starters .starter-row:last-of-type,
.right-indian .indian-block:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.dessert-heading {
  margin-top: 4px;
  margin-bottom: 12px;
}

.dessert-row {
  min-height: 132px;
  margin-bottom: 13px;
}

.dessert-row figure {
  height: 116px;
}

.dessert-row img {
  object-position: center 58%;
}

.starter-row figure {
  height: 134px;
  border-radius: 1px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.32);
}

.starter-copy {
  min-width: 0;
  padding-top: 4px;
}

.starter-copy h3,
.indian-block h3,
.main-card h3,
.hero-copy h2 {
  margin: 0;
  color: #d6d0c7;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  /* Sanft brechen:
     - `overflow-wrap: break-word` = bricht Wort NUR wenn es sonst überläuft,
       aber nicht innerhalb kürzerer Wörter
     - `word-break: normal` = keine aggressive Buchstabenzerlegung wie mit
       `break-word` (deprecated, Safari zerlegte damit "LACHSMEDAILLON"
       Buchstabe für Buchstabe)
     - `hyphens: none` = keine automatischen Silbentrennungen in Uppercase-
       Überschriften (kommt auf iOS ohne lang-Attribute nicht gut) */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.starter-copy h3 em {
  color: #7f8f59;
  font-style: normal;
  font-size: 16px;
}

/* Beschreibungs-Fließtext für alle Speisen-Kacheln:
   Basis 17px (7.7.2026 spät abends) — vorher 18px in den oberen Kacheln
   (Vorspeisen + Indisch), was einen sichtbaren Bruch zu den Hauptgerichten
   (17px Override) erzeugte. User-Feedback: „Hauptgerichte-Größe ist schöner
   und kompakter, bitte oben angleichen." Jetzt sind alle drei Kacheln-Typen
   konsistent auf 17px. `.hero-copy p` (Center-Feature „Aus unserer Küche")
   überschreibt weiter auf 18px — bewusst als visueller Hero. */
.starter-copy p,
.indian-block p,
.main-card p,
.hero-copy p {
  margin: 6px 0 8px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.22;
}

.starter-copy strong,
.indian-block strong,
.main-card strong,
.hero-copy strong {
  display: block;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

/* ================= Center feature ================= */

.kitchen-note {
  width: 94%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--gold);
  /* "Aus unserer Küche" — bleibt in Great Vibes (Handschrift-Skript).
     Bewusste User-Entscheidung Juli 2026: Nur 3 Worte, und das folgende
     kommt tatsächlich aus eigener Hand → passt semantisch perfekt.
     Kurze Skript-Elemente sind lesbar und wirken persönlich; nur bei
     ganzen Sätzen wird's für Ältere anstrengend. */
  font-family: var(--script);
  font-size: 32px;
  line-height: 1;
  transform: rotate(-2deg);
  position: relative;
  z-index: 2;
}

.kitchen-note::before,
.kitchen-note::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.kitchen-note::after {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.kitchen-note span {
  font-family: var(--serif);
  font-size: 24px;
}

/* Hero-Dish: rahmenlos (7.7.2026, konsequente Regel „Speisen atmen frei,
   Aktionen sind eingerahmt"). Bild-Text-Trenner bleibt als 1px-Border-Bottom.
   Auszeichnung erfolgt über Größe, Position und das „Aus unserer Küche"-
   Ornament — kein Rahmen mehr nötig. */
.hero-dish {
  background: rgba(12, 12, 11, 0.62);
  transition: box-shadow 0.35s ease;
}

.hero-dish figure {
  height: 270px;
  border-bottom: 1px solid var(--gold-faint);
}

.hero-copy {
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, rgba(13, 13, 12, 0.74), rgba(13, 13, 12, 0.96));
}

.hero-copy strong {
  margin-top: 12px;
}

.hero-copy h2 {
  font-size: 22px;
}

.hero-copy p {
  max-width: 92%;
  font-size: 18px;
}

/* Ornament-Trenner zwischen den beiden Hero-Bildern im Center-Feature
   (8.7.2026 spätabends). Dezentes ✦-Symbol auf goldener Fadenlinie,
   analog zur .kitchen-note-Optik oben. Zweck: Center-Spalte fließt etwas
   länger, um Höhenunterschied zur Indisch-Spalte zu reduzieren; wirkt
   nebenbei als semantischer „Und außerdem"-Marker zwischen beiden
   Empfehlungen. Rollback: Element aus HTML entfernen. */
.dish-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 8px 4px;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  opacity: 0.75;
}

.dish-divider::before,
.dish-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.dish-divider::after {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

/* Solitary Ornament (❧ Aldus Leaf) als dezenter Spalten-Abschluss.
   Verwendet in der linken Spalte am Ende (unter der letzten Nachspeise).
   KEINE horizontale Fadenlinie — nur zentriertes Symbol auf freiem Grund.
   Konsistent zum `.lotus`-Ornament im Poster-Header (gleiches Zeichen).
   Zweck: Höhenausgleich der linken Spalte zur Indisch-Spalte + eleganter
   Signatur-Abschluss der Spalte. */
.column-ornament {
  margin: 22px 0 4px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  text-align: center;
  opacity: 0.55;
}

.hero-dish-second {
  margin-top: 14px;
}

/* Zweites Hero-Bild jetzt gleich groß wie erstes (270px statt 220px)
   — 8.7.2026 späterer Abend. Grund: Schnitzel in Jägersauce (Hochformat
   3:4, Klag's-Ambient-Foto) sitzt jetzt hier statt Tagliatelle. Bei 220px
   Höhe wirkte das Foto zu klein neben dem Bunter-Salat-Bild oben.
   Rollback: height: 220px wiederherstellen. */
.hero-dish-second figure {
  height: 270px;
}

/* ================= Right column ================= */

/* Indischer Panorama-Header (Gewürzschalen).
   Vermittelt das indische Küchen-Flair oberhalb der Sektion. */
.indian-hero {
  margin: 0 0 12px;
  height: 130px;
  overflow: hidden;
  border: 1px solid var(--gold-faint);
  position: relative;
}

.indian-hero img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 65%;
  /* Für das Gewürze-Bild einen kräftigeren Filter setzen als den globalen,
     damit die Farben im Vergleich zu den anderen Klag's-Bildern nicht matt wirken. */
  filter: saturate(1.15) contrast(1.15) brightness(0.95);
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* Dezent goldener Rand-Vignette-Overlay – bindet das Bild in die Klag's-Palette ein */
.indian-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 16, 15, 0.32) 0%, rgba(16, 16, 15, 0) 30%, rgba(16, 16, 15, 0) 70%, rgba(16, 16, 15, 0.35) 100%),
    linear-gradient(90deg, rgba(16, 16, 15, 0.25) 0%, rgba(16, 16, 15, 0) 15%, rgba(16, 16, 15, 0) 85%, rgba(16, 16, 15, 0.25) 100%);
}

.indian-hero:hover img {
  transform: scale(1.04);
  filter: saturate(0.95) contrast(1.1) brightness(0.85);
}

/* Section-Header in der Indisch-Spalte: erbt jetzt die volle Basis-Sprache
   (24px, weight 700, letter-spacing 0.018em, uppercase — siehe .section-heading).
   Konsistent mit VORSPEISEN, HAUPTGERICHTE, NACHSPEISEN, DESSERT.

   Iterations-Historie (7.7.2026):
   - Erst 22px, weil „INDISCHE SPEZIALITÄTEN" bei 24px umbrach → Trennlinien
     kollabieren, Prominenz weg.
   - Dann 20px als Notbremse — half im Layout, aber der Header wirkte
     insgesamt schwächer als die anderen Sections.
   - FINAL: Text im HTML auf „INDISCH" / „INDIAN" gekürzt (konsequent zum
     Muster der anderen Kategorie-Labels wie VORSPEISEN, PASTA, HAUPTGERICHTE).
     Dadurch passt der volle 24px-Header in eine Zeile, Trennlinien
     sichtbar, gleiche Prominenz wie die anderen. Der ausführliche Titel
     „Indische Spezialitäten" bleibt auf der Speisekarte-Seite selbst. */
.right-indian .section-heading {
  margin-bottom: 10px;
}

.indian-block {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-faint);
}

.indian-block h3 {
  font-size: 20px;
}

.indian-block h3 i {
  font-size: 16px;
  font-style: normal;
}

.indian-block h3 i.veg {
  color: #7f8f59;
}

/* .indian-block p: font-size erbt jetzt die Basis-Regel (17px, siehe oben).
   Iterations-Historie: 16.5px (alt) → 18px (User-Feedback „zu klein",
   7.7.2026) → 17px (User-Feedback „Bruch zu Hauptgerichten unschön",
   7.7.2026 spät abends). Nur Margins bleiben spaltentypisch kompakter,
   weil die Indisch-Kacheln mehr Items enthalten. */
.indian-block p {
  margin-top: 5px;
  margin-bottom: 7px;
}

.indian-block strong {
  margin-bottom: 9px;
  font-size: 22px;
}

/* .indian-block figure: Bild als Card-Anker OBEN in der Kachel (7.7.2026).
   margin-bottom trennt das Bild klar vom darunterliegenden Titel — sonst
   klebt der Text direkt am Bildrand.
   HTML-Reihenfolge: <figure> → <h3> → <p> → <strong>. */
.indian-block figure {
  height: 129px;
  border-radius: 1px;
  margin-bottom: 10px;
}

.indian-block.compact figure {
  height: 142px;
}

/* ================= Chef Quote — Full-Width-Band =================
   Steht als eigenständige Signatur zwischen dem 3-Spalten-Bereich
   und den Hauptgerichten. Bezieht sich auf die gesamte Küche. */

/* Chef-Quote: Trennlinien entfernt + Abstände asymmetrisch (7.7.2026):
   - OBEN eng (4px margin + 8px padding): Anbindung an die Speisen darüber.
     Das Zitat gehört zu den Speisen die er kocht → visuelle Nähe = 
     semantische Nähe.
   - UNTEN mehr Luft (20px margin + 12px padding): Trennung zur NEUEN
     Sektion „HAUPTGERICHTE" darunter. Die ist zwar auch von ihm gekocht,
     aber strukturell startet dort ein neuer thematischer Block der Karte.
     Ohne diese Luft würde „HAUPTGERICHTE" fast wie eine Unterzeile des
     Zitats wirken. */
.chef-quote {
  margin: 4px 0 20px;
  padding: 8px 24px 12px;
  text-align: center;
}

/* Vegetarisch-Legende `.veg-legend`: Ehemals separate Info-Zeile — nach
   Iteration 3 (7.7.2026 abends) durch INLINE-Erklärung am ersten Herz-Gericht
   ersetzt („BRUSCHETTA ♥ vegetarisch"). Der Vorteil: Symbol wird am Ort der
   Verwendung erklärt, nicht in einem separaten Element. CSS-Regel entfernt.
   HTML-Klasse `.veg-legend` wird nicht mehr genutzt. */

/* Chef-Zitat "Frische Zutaten aus der Region..." — vormals Great Vibes
   28-36px geschwungen. Nach User-Feedback (Juli 2026) auf Cormorant
   Serif Italic umgestellt: bleibt literarisch und emotional (ist ja
   ein Zitat), aber deutlich lesbarer. Anführungszeichen sind bereits
   im HTML-Content, die typographischen „Guillemets" in Gold wirken
   als ornamentaler Rahmen. */
.chef-quote p {
  margin: 0 auto 10px;
  max-width: 780px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.chef-quote cite {
  display: block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================= Bottom mains band ================= */

.mains-band {
  margin-top: 2px;
}

.mains-band .section-heading {
  margin-bottom: 13px;
}

/* Main-Cards: rahmenlos (7.7.2026, konsequente Regel „Speisen atmen frei,
   Aktionen sind eingerahmt"). Nur die Trennlinie ZWISCHEN den beiden Cards
   (border-left) bleibt — analog zur border-bottom bei den Vorspeisen. Der
   ursprünglich 2px starke Außen-Rahmen war Erbe eines früheren Layouts. */
.main-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: rgba(12, 12, 11, 0.72);
}

.main-card {
  background: rgba(12, 12, 11, 0.72);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Vertikale Trennlinie zwischen den beiden Hauptgerichten entfernt
   (7.7.2026): Der Grid-Gap (14px) trennt die Karten bereits visuell —
   analog zu den 3 Spalten oben (Vorspeisen | Hero | Indisch), wo es
   ebenfalls keine vertikalen Trennlinien gibt. Konsequente Regel:
   „Grid-Gap trennt Spalten, border-bottom trennt Zeilen innerhalb
   einer Spalte". */

/* Card-Höhe von 205 → 240px (8.7.2026 späterer Abend, User-Idee): 
   Nachdem Tagliatelle Gamberetto vom Center-Feature-2nd-Slot in die 
   Hauptgerichte-Card 2 gewandert ist (Jägerschnitzel-Hero-Foto sitzt jetzt 
   im Center-Feature), soll die Card-Höhe etwas quadratischer werden, damit 
   die Tagliatelle-Pfanne (1369×1249 = fast 1:1) mehr zur Geltung kommt.
   Rumpsteak (680×510 = 4:3 Querformat) wird durch object-fit: cover weiter 
   zentriert dargestellt — kleiner Verlust am oberen/unteren Bildrand.
   Rollback: 205px wiederherstellen. */
.main-card figure {
  height: 240px;
  border-bottom: 1px solid var(--gold-faint);
}

.main-card div {
  padding: 18px 14px 16px;
}

.main-card h3 {
  font-size: 21px;
}

/* .main-card p: font-size erbt jetzt die Basis-Regel (17px, siehe oben).
   Früherer expliziter Override auf 17px ist redundant seit Basis auf 17
   umgestellt wurde (7.7.2026 spät abends). Regel bleibt als Marker/Anker
   für ggf. spätere Card-spezifische Overrides. */
.main-card p {
  font-size: 17px;
}

.main-card strong {
  margin-top: 10px;
  font-size: 24px;
}

/* ================= Footer ================= */

/* .poster-footer: `border-top` entfernt (7.7.2026) — Teil der bewussten
   Reduktion goldener Elemente im Footer-Bereich. Der Content-zu-Footer-
   Übergang wird bereits durch die `.visit-note` in Serif Italic + Ornament
   sowie den erhöhten `padding-top` visuell klar gemacht.

   Layout-Update (7.7.2026 abends): 2-Spalten statt 3, nachdem die
   `.legend`-Box („VEGETARISCH ♥") komplett entfernt wurde (die Symbol-
   Legende steht jetzt oben bei den Vorspeisen als `.veg-legend`). Die
   `.visit-note` rückt jetzt rechtsbündig näher zur Mitte, `.address-block`
   linksbündig — das ergibt eine harmonischere symmetrische Balance. */
/* Poster-Footer-Struktur (Iteration 7, 7.7.2026 später Abend, FINAL FINAL):
   flex + center + fester gap. Vorher: 3-Spalten-Grid mit justify-self: center.
   Problem: Zitat mittig im linken Drittel = ganz links, Klag's mittig im
   rechten Drittel = gleich rechts vom Herz → asymmetrische Wahrnehmung.
   Lösung: flex center mit gap 48px zwischen den 3 Elementen. Dadurch ist
   der Abstand LINKS vom Herz (zum Zitat) IDENTISCH zum Abstand RECHTS vom
   Herz (zum Klag's) — echte visuelle Symmetrie. */
.poster-footer {
  margin-top: 16px;
  min-height: 102px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding-top: 22px;
}

/* .visit-note: 7.7.2026 Iteration 5 — Text-Block ohne Herz.
   Das Herz wurde als eigenständiges `.footer-heart`-Element aus visit-note
   herausgelöst, damit der Poster-Footer 3 Elemente hat (Zitat / Herz / Adresse),
   die per flex + space-between harmonisch über die volle Breite verteilt werden.
   Vorher waren nur 2 Elemente, was zu unbalancierten Layouts führte. */
.visit-note {
  color: #d6d0c7;
}

/* "Wir freuen uns auf Ihren Besuch!" — vormals Great Vibes 31px
   geschwungen. Nach User-Feedback auf Cormorant-Serif Italic
   umgestellt: bleibt emotional und einladend, ist aber lesbar. */
.visit-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
}

/* Footer-Herz — eigenständiges Ornament zwischen visit-note und address-block,
   dient als visueller Anker in der Mitte des 3-teiligen Footers. Gold, groß
   genug um Präsenz zu haben, aber nicht dominant. Iteration 5 (7.7.2026). */
.footer-heart {
  color: var(--gold);
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.address-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  text-align: left;
}

/* Kleine dezente Preishinweis-Zeile am Ende des Address-Blocks.
   Enthält „Alle Preise inkl. MwSt." — war früher in der eigenen `.legend`-
   Box im Footer (die 7.7.2026 entfernt wurde). Hier semantisch am
   richtigen Ort: Preisinfo bei der Restaurant-Info. */
.address-block .price-note {
  margin-top: 8px;
  color: var(--dim) !important;
  font-family: var(--serif);
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing: normal !important;
  opacity: 0.85;
}


.address-block h2 {
  margin: 0 0 4px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.055em;
}


/* Adress-Zeilen im Footer: bis 7.7.2026 abends fett + gold. User-Feedback:
   „Zu viel Gold, das sind nur Randnotizen." Umgestellt auf muted (heller
   Beige) + weight 500. Das Logo darüber bleibt gold als visueller Marken-
   Anker, das Herz in `.visit-note` bleibt gold als Stil-Akzent — aber der
   Fließtext (Adresse, Telefon, Website) tritt in den Hintergrund, wo er
   semantisch hingehört. */
.address-block p {
  margin: 2px 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Legend-Box (Footer rechts: „VEGETARISCH ♥") wurde 7.7.2026 komplett entfernt (Session 46).
   Symbol-Legende steht jetzt inline am ersten vegetarischen Gericht.
   Zugehörige CSS-Regeln am 8.7.2026 aufgeräumt. */

/* ================= Footer Hours (compact) ================= */

/* .footer-hours: `border-top` entfernt (7.7.2026) — Teil der Reduktion
   goldener Elemente im Footer-Bereich. Der Abstand zur Adress-Zeile darüber
   reicht als optische Trennung. */
.footer-hours {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  padding: 14px 16px;
  margin-top: 0;
  text-align: center;
}

.footer-hours span {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
}

.footer-hours span.hours-closed {
  opacity: 0.8;
}

/* ================= Footer Legal Links ================= */

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 16px 6px;
}

.footer-legal a {
  color: var(--dim);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.25s;
}

.footer-legal a:hover {
  color: var(--gold);
}

/* Preis-Hinweis in footer-legal (7.7.2026 spät abends): war vorher im
   address-block direkt unter der Adresse, macht den Klag's-Block aber
   breiter als nötig. Jetzt in der letzten Zeile zusammen mit Impressum
   und Datenschutz — passt semantisch (rechtliche Nebeninfo). */
.footer-legal .price-note {
  color: var(--dim);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-style: italic;
}

/* ================= Menu Links Band ================= */

.menu-links-band {
  margin-top: 22px;
  padding: 28px 24px;
  border: 1px solid var(--gold-faint);
  background: rgba(184, 154, 86, 0.03);
  text-align: center;
}

/* „Unsere Speisekarte" — Iterations-Historie:
   1. Bis Juli 2026: Great Vibes (Skript). Verworfen — für Erstbesucher schwer
      entzifferbar.
   2. 7.7.2026 nachmittags: Cormorant Serif Italic 32px + Gold-Glow. Prominenter
      gemacht, weil die Speisekarte inhaltlich das Wichtigste ist.
   3. 7.7.2026 abends: erster Angleichungs-Versuch (weight 500, letter-spacing
      0.15em) — verworfen. Wirkte blass gegenüber den weißen Speise-Buttons
      und die weiten Buchstabenabstände wirkten „zerfließend".
   4. 7.7.2026 spät (finale Version): 1:1 an die echte `.section-heading`-
      Sprache der Startseite angeglichen — weight 700, letter-spacing 0.018em.
      Das sind die identischen Werte wie VORSPEISEN/HAUPTGERICHTE/DESSERT.
      Damit hat der Titel dieselbe visuelle Autorität wie die Section-Header
      im Poster darüber — konsistent, prominent ohne zu schreien.
      → Kein italic, kein Glow. Prominenz durch Weight 700 + Gold + Größe.
   5. 7.7.2026 (Nachtrag): Mit Zierstrichen links/rechts eingefasst — 1:1 wie
      `.section-heading` (VORSPEISEN, HAUPTGERICHTE etc.). HTML hat jetzt
      `<span></span>` links + rechts um den Text. Damit ist die Speisekarte-
      Überschrift auch visuell in die Section-Header-Familie eingereiht. */
.menu-links-title {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.018em;
  text-transform: uppercase;
}

/* Zierstriche links/rechts vom Titel — identisches Muster wie
   `.section-heading span` (Gold-Fade-Verlauf, 1px hoch). */
.menu-links-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.menu-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.menu-links-row a {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--gold-faint);
  border-radius: 3px;
  transition: all 0.25s ease;
}

.menu-links-row a:hover {
  color: var(--gold);
  border-color: var(--gold-soft);
  background: rgba(184, 154, 86, 0.08);
}

.menu-cta {
  display: inline-block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 10px 28px;
  border: 2px solid var(--gold-soft);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.menu-cta:hover {
  background: rgba(184, 154, 86, 0.12);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184, 154, 86, 0.15);
}

.menu-cta-en {
  margin-left: 12px;
  border-color: var(--gold-faint);
  font-size: 13px;
  opacity: 0.85;
}

.menu-cta-en:hover {
  opacity: 1;
}

/* Kleiner PDF-Hinweis unter den CTA-Buttons.
   User-Feedback vom 5. Juli 2026: „PDF-Funktion war nicht sichtbar."
   Diese kleine dezente Zeile weist auf die Funktion hin, ohne das
   Design zu dominieren. Klick verlinkt auf speisekarte.html?print=1
   – dort löst ein URL-Parameter-Handler automatisch den Print-Dialog aus.

   Iteration nach 2. User-Feedback (5. Juli, nachmittags):
   Das ursprünglich verwendete 📄-Emoji rendert auf Windows als weißes
   Platzhalter-Icon (sieht wie fehlender Bild-Load aus). Auch die
   gepunktete Unterstrich-Linie wirkte "fehlerhaft" statt dezent-elegant.
   Neu: sauberes SVG-Drucker-Icon (matcht den bestehenden Print-Button
   auf speisekarte.html) + kein Border. Hover-Farbe reicht als Feedback. */
.menu-cta-print-hint {
  margin-top: 14px;
  text-align: center;
}

.menu-cta-print {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 6px 14px;
  transition: color 0.25s ease;
}

.menu-cta-print svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.85;
}

.menu-cta-print:hover,
.menu-cta-print:focus-visible {
  color: var(--gold);
  outline: none;
}

.menu-cta-print:hover svg,
.menu-cta-print:focus-visible svg {
  opacity: 1;
}

/* ================= Teaser Row (Lunch + Pickup side-by-side) ================= */

.teaser-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.teaser-row .lunch-teaser {
  margin-bottom: 0;
}

/* Zwischenschritt: bei 3 Teasern und mittlerer Breite auf 2-spaltig fallen,
   der dritte springt in eine neue Zeile. */
@media (max-width: 980px) {
  .teaser-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .teaser-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ================= Lunch/Pickup/Gutschein Teaser =================
   Kompakte vertikale Anordnung: Badge oben, Text darunter, kleiner Pfeil
   in der Ecke oben rechts. Passt drei Teaser nebeneinander harmonisch. */

.lunch-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(184, 154, 86, 0.06), rgba(184, 154, 86, 0.03));
  border: 1px solid var(--gold-faint);
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.lunch-teaser:hover {
  background: linear-gradient(180deg, rgba(184, 154, 86, 0.12), rgba(184, 154, 86, 0.05));
  border-color: var(--gold-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184, 154, 86, 0.12);
}

.lunch-teaser-badge {
  display: inline-block;
  padding: 4px 11px;
  background: var(--gold);
  color: #10100f;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 2px;
  text-transform: uppercase;
}

.lunch-teaser-text {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.lunch-teaser-text strong {
  color: var(--gold);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lunch-teaser-text small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.95;
}

.lunch-teaser-arrow {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--gold);
  font-size: 14px;
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.lunch-teaser:hover .lunch-teaser-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.pickup-teaser .lunch-teaser-arrow {
  font-size: 13px;
}

/* Info-Variante: nicht klickbare Kachel (z. B. Gutschein-Hinweis).
   Kein Hover-Lift, kein Cursor-Pointer — visuell ähnlich, aber ohne
   Aktionscharakter. */
.lunch-teaser-info {
  cursor: default;
}

.lunch-teaser-info:hover {
  background: linear-gradient(180deg, rgba(184, 154, 86, 0.06), rgba(184, 154, 86, 0.03));
  border-color: var(--gold-faint);
  transform: none;
  box-shadow: none;
}

.lunch-teaser-info .lunch-teaser-arrow {
  transition: none;
}

.lunch-teaser-info:hover .lunch-teaser-arrow {
  transform: none;
  opacity: 0.7;
}

/* Auf Mobile (unter 680px) bleibt vertikaler Look erhalten, nur der Container
   wechselt in eine Spalte (siehe .teaser-row Regel weiter oben). */
@media (max-width: 680px) {
  .lunch-teaser {
    padding: 10px 14px 12px;
  }
}

/* ================================================================
   ANNOUNCEMENT BANNERS — saisonale Aktionen & Betriebsferien
   ================================================================
   Gefüttert vom Google-Sheet "Ankuendigungen" via announcements.js.
   Zwei visuelle Varianten:
     .ann--action  – glamouröser Werbe-Banner (Aktion / Event)
                     Gold-Verlauf, ✦-Ornament, prominenter CTA-Button
     .ann--info    – dezenter Info-Hinweis (Betriebsferien / Ruhetag)
                     Sand-Ton, ❧-Ornament, kein CTA
   Beide passen sich in die bestehende .poster-Ästhetik ein.
   ================================================================ */

/* Container ist standardmäßig hidden bis JS das Rendering abgeschlossen hat.
   Verhindert Layout-Sprung bei langsamer Sheet-Antwort. */
[data-announcements] {
  display: block;
}

[data-announcements]:empty {
  display: none;
}

/* Wenn der Container Inhalt bekommt, sorgt der Abstand nach unten dafür,
   dass der folgende Content nicht direkt anschließt. */
[data-announcements].ann-container--filled {
  margin: 0 0 18px;
}

/* Modifier für Seiten OHNE eigenen zentrierten Container (Speisekarte,
   Mittagstisch): Container bekommt selbst die max-width + Padding. */
[data-announcements].ann-wrap-page {
  max-width: 900px;
  margin: 20px auto 0;
  padding: 0 24px;
}

[data-announcements].ann-wrap-page.ann-container--filled {
  margin: 20px auto 18px;
}

/* Mehrere Banner untereinander */
[data-announcements] .ann + .ann {
  margin-top: 12px;
}

/* --- Basis-Kachel für beide Typen --- */

.ann {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px 18px;
  padding: 16px 22px 16px 18px;
  border: 1px solid var(--gold-faint);
  border-radius: 4px;
  font-family: var(--serif);
  overflow: hidden;
}

.ann-ornament {
  align-self: center;
  justify-self: center;
  font-size: 26px;
  line-height: 1;
  opacity: 0.85;
}

.ann-body {
  min-width: 0;
}

.ann-badge {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
}

.ann-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.ann-date {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* CTA-Gruppe: zwei Buttons nebeneinander (Anrufen + Online reservieren) */
.ann-cta-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.ann-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* --- Variante A: Aktion (Werbe-Charakter) --- */

.ann--action {
  background:
    linear-gradient(135deg, rgba(184, 154, 86, 0.18), rgba(184, 154, 86, 0.06) 50%, rgba(184, 154, 86, 0.02) 100%),
    var(--bg-2);
  border-color: var(--gold-soft);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ann--action::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(184, 154, 86, 0.18);
  border-radius: 2px;
  pointer-events: none;
}

.ann--action .ann-ornament {
  color: var(--gold);
  font-size: 30px;
  text-shadow: 0 0 12px rgba(184, 154, 86, 0.35);
}

.ann--action .ann-badge {
  background: var(--gold);
  color: #10100f;
}

.ann--action .ann-text {
  color: var(--ink);
  font-size: 17px;
}

.ann--action .ann-date {
  color: var(--gold);
  opacity: 0.9;
}

/* Primärer Call-Button: goldene Füllung */
.ann--action .ann-cta--call {
  background: var(--gold);
  color: #10100f;
  border: 1.5px solid var(--gold);
}

.ann--action .ann-cta--call:hover,
.ann--action .ann-cta--call:focus-visible {
  background: #d4b46a;
  border-color: #d4b46a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 154, 86, 0.3);
  outline: none;
}

/* Sekundärer Online-Button: gold-outlined, transparent */
.ann--action .ann-cta--online {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold-soft);
}

.ann--action .ann-cta--online:hover,
.ann--action .ann-cta--online:focus-visible {
  background: rgba(184, 154, 86, 0.12);
  border-color: var(--gold);
  color: #d4b46a;
  transform: translateY(-1px);
  outline: none;
}

/* --- Variante B: Info / Geschlossen (sachlich, aber deutlich sichtbar) ---
   Ist kein Werbebanner, sondern ein wichtiger Hinweis. Wird visuell
   klar hervorgehoben — genug Kontrast, damit's nicht übersehen wird,
   aber trotzdem kein Werbe-Charakter (kein Gold-Verlauf, kein CTA-Button). */

.ann--info {
  background: linear-gradient(180deg, rgba(184, 154, 86, 0.09), rgba(184, 154, 86, 0.04));
  border: 1px solid var(--gold-soft);
  border-left: 5px solid var(--gold);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.ann--info .ann-ornament {
  color: var(--gold);
  font-size: 28px;
  opacity: 1;
}

.ann--info .ann-badge {
  background: rgba(184, 154, 86, 0.15);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 11px;
}

.ann--info .ann-text {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  font-style: normal;
}

.ann--info .ann-date {
  color: var(--gold);
  opacity: 0.95;
  font-size: 13px;
}

/* --- Responsive --- */

@media (max-width: 640px) {
  .ann {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
    text-align: center;
  }

  .ann-ornament {
    font-size: 22px;
  }

  .ann-cta-group {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
  }

  .ann-cta {
    flex: 1;
    max-width: 180px;
    justify-content: center;
  }
}

/* --- Sticky-Variante für Betriebsferien (optional per Klasse aktivierbar) ---
   Aktuell nicht default; kann später gesetzt werden, falls gewünscht.
   Beispiel: <div data-announcements class="ann-sticky"></div> */
[data-announcements].ann-sticky {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(16, 16, 15, 0.96);
  backdrop-filter: blur(8px);
}

/* --- Print: Banner nicht drucken --- */
@media print {
  [data-announcements] {
    display: none !important;
  }
}

/* ================= Ratings Bar ================= */

/* Bewertungs-Bar: margin-bottom hinzu (7.7.2026 spät abends), damit
   zwischen dieser Zeile und dem darunter folgenden Reservieren-Teaser
   ein spürbarer Abstand entsteht. Vorher klebten die beiden aneinander,
   nachdem die Reihenfolge umgestellt wurde (Bewertungen VOR Teaser). */
.ratings-bar {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Reservieren-Teaser: leichte Aufwertung nach Flow-Umstellung (7.7.2026).
   Iterationen:
   1. Zu unprominent (User: „nicht mehr so dominant wie vorher")
   2. Dann zu prominent nach Aufwertung (User: „jetzt zu dominant")
   3. FINAL: mittlere Aufwertung — dezent aber sichtbar
   
   Padding etwas mehr als Standard, Titel eine Nuance größer, sonst wie
   Basis. Basis-Regeln stehen in reservierung.css. */
.reserv-hero-teaser {
  padding: 16px 22px !important;
}

.reserv-hero-teaser .rht-title {
  font-size: 18px !important;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid var(--gold-faint);
  border-radius: 4px;
  background: rgba(184, 154, 86, 0.03);
  text-decoration: none;
  transition: all 0.25s ease;
}

.rating-badge:hover {
  background: rgba(184, 154, 86, 0.07);
  border-color: var(--gold-soft);
  transform: translateY(-1px);
}

.rating-source {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rating-stars {
  color: #e8c44a;
  font-size: 20px;
  letter-spacing: -1px;
}

.rating-score {
  color: #e8c44a;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
}

.rating-count {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
}

@media (max-width: 560px) {
  .ratings-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 0 4px;
  }

  /* Auf Mobile die Bewertungs-Kacheln volle Breite (bis 480 px) nutzen –
     kein künstliches max-width: 300 px mehr, sonst wirken sie im
     Verhältnis zum umgebenden Content zu klein. */
  .rating-badge {
    width: 100%;
    max-width: none;
    justify-content: center;
    padding: 18px 22px;
    gap: 14px;
  }

  .rating-score {
    font-size: 32px;
  }

  .rating-source {
    font-size: 15px;
  }

  .rating-count {
    font-size: 14px;
  }
}

/* ================= Page Language Switch ================= */

.page-lang-switch {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 9999;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 7px 14px;
  border: 1.5px solid var(--gold-soft);
  border-radius: 4px;
  background: rgba(16, 16, 15, 0.85);
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.page-lang-switch:hover {
  background: rgba(184, 154, 86, 0.15);
  border-color: var(--gold);
  transform: scale(1.05);
}

/* ================= Interaktion ================= */

.starter-row:hover img,
.hero-dish:hover img,
.indian-block:hover img,
.main-card:hover img {
  transform: scale(1.045);
  filter: saturate(0.95) contrast(1.08) brightness(0.86);
}

.hero-dish:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.main-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  transform: translateY(-2px);
}

/* Respect users who prefer reduced motion: skip the lifts and image zooms. */
@media (prefers-reduced-motion: reduce) {
  img,
  .hero-dish,
  .main-card {
    transition: none;
  }

  .starter-row:hover img,
  .hero-dish:hover img,
  .indian-block:hover img,
  .main-card:hover img {
    transform: none;
  }

  .hero-dish:hover,
  .main-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ================= Responsive ================= */

@media (max-width: 980px) {
  .poster-shell {
    padding: 0;
  }

  .poster {
    width: 100%;
    min-height: auto;
    border-left: 0;
    border-right: 0;
    padding: 18px;
  }

  .poster-header {
    grid-template-columns: 145px 1fr 200px;
    column-gap: 14px;
  }

  .brand h1 {
    font-size: clamp(48px, 7vw, 70px);
  }

  .claim {
    font-size: clamp(31px, 5vw, 41px);
  }

  .poster-grid {
    grid-template-columns: 32% 35% 29%;
    gap: 11px;
  }

  .starter-row {
    grid-template-columns: 1fr;
  }

  .starter-row figure {
    height: 120px;
  }
}

@media (max-width: 780px) {
  .poster-header {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 14px;
  }

  .fresh-seal {
    margin: 0;
  }

  .recommendation {
    width: min(100%, 330px);
  }

  .poster-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "left"
      "right"
      "mains";
  }

  .starter-row {
    grid-template-columns: 1fr 180px;
  }

  .right-indian,
  .left-starters,
  .center-feature,
  .mains-band {
    width: 100%;
  }

  .indian-block figure {
    height: 190px;
  }

  .poster-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .address-block {
    text-align: center;
  }
}

@media (max-width: 560px) {
  .poster {
    padding: 14px;
  }

  .brand h1 {
    font-size: 45px;
  }

  .brand-rule p {
    font-size: 13px;
  }

  .claim {
    font-size: 32px;
  }

  .kitchens {
    font-size: 14px;
  }

  .starter-row {
    grid-template-columns: 1fr;
  }

  .starter-row figure {
    height: 180px;
  }

  .hero-dish figure {
    height: 280px;
  }

  .main-cards {
    grid-template-columns: 1fr;
  }

  .main-card + .main-card {
    border-left: 0;
    border-top: 2px solid var(--gold-faint);
  }

  .section-heading {
    font-size: 22px;
  }
}

@media print {
  body {
    background: white;
  }

  .poster-shell {
    padding: 0;
  }

  .poster {
    width: 100%;
    box-shadow: none;
  }
}

/* ================================================================
   Sticky Call Button – always visible, encourages the primary
   customer action (call/reserve). Floats bottom-right on every page.
   ================================================================ */

.sticky-call {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: rgba(16, 16, 15, 0.92);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1.5px solid var(--gold-soft);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}

.sticky-call:hover,
.sticky-call:focus-visible {
  background: rgba(184, 154, 86, 0.16);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  outline: none;
}

.sticky-call-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Compact "icon-only" version on small phones to save space. */
@media (max-width: 480px) {
  .sticky-call {
    padding: 13px;
    border-radius: 50%;
  }
  .sticky-call span {
    display: none;
  }
  .sticky-call-icon {
    width: 20px;
    height: 20px;
  }
}

/* Auf Mobile (mit aktivierter Mobile-Action-Bar) den Sticky-Call ausblenden,
   damit der Anrufen-Button nicht doppelt erscheint. */
@media (max-width: 768px) {
  body:has(.mobile-action-bar) .sticky-call {
    display: none !important;
  }
}

@media print {
  .sticky-call {
    display: none !important;
  }
}

/* ================================================================
   Mobile Action Bar — fixierte Konversions-Leiste am unteren Rand
   Nur auf Mobile (≤ 768px) sichtbar. Drei Buttons: Anrufen,
   Speisekarte, Anfahrt. Höhe ~60px, ausreichend Touch-Target.
   ================================================================ */

.mobile-action-bar {
  display: none; /* Default: nicht sichtbar (Desktop) */
}

@media (max-width: 768px) {
  .mobile-action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9997;
    background: rgba(16, 16, 15, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--gold-faint);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    /* Sichere Zone für iPhone-Notch-Geräte */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px 12px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-right: 1px solid var(--gold-faint);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-action-bar a:last-child {
    border-right: 0;
  }

  .mobile-action-bar a:hover,
  .mobile-action-bar a:focus-visible,
  .mobile-action-bar a:active {
    background: rgba(184, 154, 86, 0.14);
    color: var(--gold);
    outline: none;
  }

  .mobile-action-bar svg {
    width: 22px;
    height: 22px;
    fill: var(--gold);
  }

  /* Mehr Platz unten am Seiteninhalt, damit nichts hinter der Bar
     versteckt ist. */
  body:has(.mobile-action-bar) {
    padding-bottom: 64px;
  }
}

@media print {
  .mobile-action-bar {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-call {
    transition: none;
  }
  .sticky-call:hover,
  .sticky-call:focus-visible {
    transform: none;
  }
}

/* ================================================================
   Global keyboard-focus polish — gold outline matches the design
   instead of the default browser blue ring on this dark theme.
   ================================================================ */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ================================================================
   MOBILE EMERGENCY OVERRIDE (≤ 768px)
   ================================================================
   Defensiver Block: Erzwingt das Mobile-Layout mit !important, um
   Cascade-Bugs oder Cache-Probleme zu überbrücken.
   Sichergestellt wird:
   - poster-grid als Block-Layout (keine Grid-Column-Trickserei mehr)
   - Alle Grid-Items 100% Breite
   - poster-header ebenfalls Block-Layout
   - Bilder mit min-width: 100%
   Wenn ein User trotz Media Queries "sehr schmale Spalten" sieht,
   dann greift zumindest DIESER Block. Er ist explizit und dominant.
   ================================================================ */

/* ================================================================
   LIGHTBOX für Speisen-Fotos (nur Startseite)
   ================================================================
   Aktiviert für alle <img> mit class="zoomable" — typischerweise
   die Speisen-Bilder in .starter-row, .hero-dish, .indian-block,
   .main-card. NICHT für Chef-Fotos, Innenraum, Deko-Bilder.

   Verhalten: Klick öffnet Modal mit großem Bild, klar sichtbarem
   Close-Button, Klag's-Look (dunkler Overlay, goldene Akzente).
   ESC + Klick-außerhalb + Focus-Trap für Barrierefreiheit.

   Cursor-Hint + kleines Lupe-Icon oben rechts im figure signalisieren
   dass das Bild klickbar ist. */

/* Cursor-Hint auf klickbaren Bildern + umgebendem figure */
img.zoomable {
  cursor: zoom-in;
}

figure:has(> img.zoomable) {
  cursor: zoom-in;
  position: relative;
}

/* Kleines Lupe-Icon oben rechts als visueller Klick-Hinweis.
   Dezent im Ruhezustand, deutlich beim Hover. Klag's-Gold. */
figure:has(> img.zoomable)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    rgba(16, 16, 15, 0.72)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b89a56'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") center / 16px 16px no-repeat;
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 2;
}

figure:has(> img.zoomable):hover::after,
figure:has(> img.zoomable):focus-visible::after {
  opacity: 0.95;
  transform: scale(1.06);
}

/* Fokus-Rahmen um klickbare figure für Tastatur-User */
figure:has(> img.zoomable):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- Lightbox-Overlay --- */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(6, 6, 6, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lb-overlay.is-open {
  opacity: 1;
}

.lb-overlay[hidden] {
  display: none !important;
}

.lb-figure {
  margin: 0;
  max-width: min(1400px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.98);
  transition: transform 0.28s ease;
}

.lb-overlay.is-open .lb-figure {
  transform: scale(1);
}

.lb-image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  /* Klag's-Bildfilter für Modal etwas zurücknehmen — im Großformat
     wirkt der stark abgedunkelte Look weniger passend. */
  filter: saturate(0.95) contrast(1.05) brightness(0.92);
}

.lb-caption {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  max-width: 90vw;
}

.lb-caption[hidden] {
  display: none;
}

.lb-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--gold-soft);
  border-radius: 50%;
  background: rgba(16, 16, 15, 0.85);
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 10001;
}

.lb-close svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.lb-close:hover,
.lb-close:focus-visible {
  background: rgba(184, 154, 86, 0.2);
  border-color: var(--gold);
  transform: scale(1.05);
  outline: none;
}

/* --- Navigation-Pfeile (Prev / Next) ---
   Nur sichtbar wenn > 1 zoomable-Bild in der Galerie.
   Wrap-around: nach letztem Bild geht's zurück zum ersten. */
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid var(--gold-soft);
  border-radius: 50%;
  background: rgba(16, 16, 15, 0.8);
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 10001;
}

.lb-prev { left: 20px; }
.lb-next { right: 20px; }

.lb-nav svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.lb-nav:hover,
.lb-nav:focus-visible {
  background: rgba(184, 154, 86, 0.25);
  border-color: var(--gold);
  outline: none;
}

.lb-prev:hover,
.lb-prev:focus-visible {
  transform: translateY(-50%) translateX(-2px);
}

.lb-next:hover,
.lb-next:focus-visible {
  transform: translateY(-50%) translateX(2px);
}

.lb-nav[hidden] {
  display: none;
}

/* --- Counter unten mittig ("3 / 8") --- */
.lb-counter {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  background: rgba(16, 16, 15, 0.75);
  border: 1px solid var(--gold-soft);
  border-radius: 20px;
  pointer-events: none;
  z-index: 10001;
}

.lb-counter[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .lb-overlay {
    padding: 12px;
  }
  .lb-close {
    top: 12px;
    right: 12px;
  }
  .lb-caption {
    font-size: 18px;
  }
  .lb-image {
    max-height: 70vh;
  }
  /* Mobile: Nav-Buttons kleiner + weiter aussen, damit Bild-Platz bleibt.
     Swipe-Geste ist sowieso primäre Bedienung auf Mobile. */
  .lb-nav {
    width: 40px;
    height: 40px;
  }
  .lb-nav svg {
    width: 22px;
    height: 22px;
  }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }

  .lb-counter {
    bottom: 12px;
    font-size: 11px;
    padding: 5px 12px;
  }
}

/* Barrierefreiheit: reduce-motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .lb-overlay,
  .lb-figure,
  .lb-close,
  figure:has(> img.zoomable)::after {
    transition: none !important;
  }
  .lb-figure {
    transform: none;
  }
}

/* Print: Lightbox-Elemente nicht drucken */
@media print {
  .lb-overlay,
  figure:has(> img.zoomable)::after {
    display: none !important;
  }
  figure:has(> img.zoomable) {
    cursor: default;
  }
  img.zoomable {
    cursor: default;
  }
}

@media (max-width: 768px) {
  .poster-grid {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  .poster-grid > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    grid-area: auto !important;
  }

  .poster-header {
    display: block !important;
    grid-template-columns: none !important;
  }

  .poster-header > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
  }

  /* Fresh-Seal: Kreis bleibt Kreis + Flex-Layout erhalten.
     Der übergeordnete `.poster-header > *`-Override zwingt Kinder auf
     `display: block !important` – das würde das ursprüngliche `display: flex`
     des Seals zerstören und die 4 <span>-Zeilen ("FRISCH / REGIONAL / MIT
     LIEBE / GEMACHT") würden als inline-Elemente nebeneinander fließen.
     Deshalb hier explizit `display: flex !important` – Layout wie Desktop. */
  .poster-header .fresh-seal {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 118px !important;
    max-width: 118px !important;
    height: 118px !important;
    margin: 0 auto 16px !important;
  }

  .poster-header .recommendation {
    max-width: 400px !important;
  }

  /* Chef-Quote soll sichtbar in normaler Größe bleiben, keine
     Grid-Container-Zwänge mehr. */
  .chef-quote {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 !important;
  }

  /* Starter-Row + Hero-Dish + Indian-Block: einspaltig stacken,
     kein festes Grid mehr. */
  .starter-row {
    display: block !important;
    grid-template-columns: none !important;
    min-height: auto !important;
  }

  .starter-row figure,
  .hero-dish figure,
  .main-card figure,
  .indian-block figure {
    height: 220px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .main-cards {
    display: block !important;
    grid-template-columns: none !important;
  }

  .main-card + .main-card {
    border-left: 0 !important;
    border-top: 2px solid var(--gold-faint) !important;
  }

  .poster-footer {
    display: block !important;
    grid-template-columns: none !important;
    text-align: center !important;
  }

  .poster-footer > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }
}

/* NAV-BRAND-LOGO-START */
/* =============================================================
   NAV-BRAND-LOGO — Original Klag's-Logo in Nav-Bar
   Ersetzt den Caveat-Text "KLAG'S" durch die echte Wortmarke.
   Technik: CSS mask-image nutzt SVG als Formen-Maske,
   background-color liefert die Farbe.
   Farbe: Klag's-Gold statt Original-Weinrot (User-Entscheidung
   7. Juli 2026, weil das Weinrot im Gold-Kosmos Fremdkörper war).
   Umschalt zurück auf Weinrot: background-color → #aa0e2c
   ============================================================= */
.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav-brand-logo {
  display: block;
  width: 130px;
  height: 54px;
  background-color: var(--gold);
  -webkit-mask: url('LogoKlags.svg') no-repeat left center / contain;
  mask: url('LogoKlags.svg') no-repeat left center / contain;
}
.nav-brand-txt {
  display: none;
}
@media (max-width: 640px) {
  .nav-brand-logo { width: 100px; height: 42px; }
}
/* NAV-BRAND-LOGO-END */

/* FOOTER-BRAND-LOGO-START */
/* =============================================================
   FOOTER-BRAND-LOGO — Original Klag's-Logo im Footer
   Ersetzt die vorherigen zwei Caveat-Zeilen "KLAG'S" / "DAS RESTAURANT"
   durch das echte Wortmarken-Logo (kleiner als Nav-Bar, damit Footer
   nicht optisch schwer wird).
   Rollback: Diesen Block löschen; die HTML-Struktur muss dann auch
   wieder auf <h2>KLAG'S</h2><p>DAS RESTAURANT</p> zurück (siehe Git).
   ============================================================= */
.footer-brand-logo {
  display: block;
  width: 100px;
  height: 42px;
  background-color: var(--gold);
  -webkit-mask: url('LogoKlags.svg') no-repeat left center / contain;
  mask: url('LogoKlags.svg') no-repeat left center / contain;
  margin-bottom: 8px;
}
/* FOOTER-BRAND-LOGO-END */

/* POSTER-FOOTER-LOGO-OVERRIDE */
/* Poster-Footer-Logo: 7.7.2026 späterer Abend weiter reduziert auf 80×34.
   Iterationen: 130×54 → 100×42 (Standard) → 80×34 (User: „noch immer zu
   dominant"). Der Footer ist Fußzeile, keine Marken-Bühne — Logo als
   dezente Marken-Signatur, nicht als Hero-Element. Rollback größer:
   auf 100×42 oder 130×54 zurücksetzen. */
.poster-footer .footer-brand-logo {
  width: 80px;
  height: 34px;
  margin-bottom: 4px;
}
/* POSTER-FOOTER-LOGO-OVERRIDE-END */

/* FOOTER-LOGO-MOBILE-CENTER-FIX */
/* Auf Mobile klebte das Klag's-Logo im Footer links am Rand — das SVG-Element
   ist `display: block` mit fester Breite (80px auf Startseite, 100px auf
   Unterseiten). `text-align: center` auf Parent zentriert nur inline-Elemente,
   nicht block-level. Fix: `margin-inline: auto` erzwingt die Zentrierung des
   block-Elements. Gilt für BEIDE Kontexte:
   - `.poster-footer .footer-brand-logo` (Startseite index.html/index-en.html)
   - `.footer-brand .footer-brand-logo` (Unterseiten mit .menu-footer-Struktur)
   Bug entdeckt vom User im Chrome-Mobile-View (F12) am 7.7.2026 spät abends. */
@media (max-width: 768px) {
  .footer-brand-logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* FOOTER-LOGO-MOBILE-CENTER-FIX-END */