/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlowcondensed_v13_HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3nWuZEC.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlowcondensed_v13_HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3jWuZEC.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlowcondensed_v13_HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlowcondensed_v13_HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3nWuZEC.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlowcondensed_v13_HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3jWuZEC.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlowcondensed_v13_HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat_v23_WnznHAc5bAfYB2QRah7pcpNvOx-pjRV6eIipYSxP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat_v23_WnznHAc5bAfYB2QRah7pcpNvOx-pjRV6eIGpYSxP.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat_v23_WnznHAc5bAfYB2QRah7pcpNvOx-pjRV6eIupYSxP.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat_v23_WnznHAc5bAfYB2QRah7pcpNvOx-pjRV6eIWpYQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/karla_v33_qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUjm6bnEr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/karla_v33_qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/karla_v33_qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUjm6bnEr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/karla_v33_qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/karla_v33_qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUjm6bnEr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/karla_v33_qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ======================================================================
   Café Dany — Styling nach Referenz „Café Dany One-Pager" (Claude Design).
   Farb- und Typo-Tokens sind 1:1 aus der Referenz abgeleitet.
   ====================================================================== */

:root {
  --creme:      #F4EBD6;   /* Body-Hintergrund */
  --warmweiss:  #FBF6EA;   /* Karten & helle Sektionen */
  --espresso:   #3B2A1D;   /* Text & dunkle Sektionen */
  --gold:       #B8862B;   /* Primär-Akzent (Flächen, Pin) */
  --gold-btn:   #B48327;   /* Button-Gold: minimal dunkler für ≥3:1 mit Creme-Text */
  --gold-text:  #AC7D20;   /* Gold als TEXT auf hellem Grund: ≥3:1 (WCAG large text) */
  --gold-hell:  #C99A3F;   /* Script/Akzent auf dunkel, Unterstreichung */
  --gold-tief:  #8A6420;   /* Links, Labels & Badge auf hellem Grund */
  --muted:      #6D5A44;   /* Sekundärtext auf hell */
  --linie-dunkel: rgba(244,235,214,0.22); /* Trennlinien auf braun */

  --schrift-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --schrift-script:  'Caveat', cursive;
  --schrift-text:    'Karla', 'Segoe UI', sans-serif;

  --radius: 10px;
  --radius-gross: 14px; /* große Bildflächen (Hero-Foto) */
  /* Weiche, zweistufige Schatten: breit + diffus statt hart */
  --schatten-gross:  0 20px 48px rgba(59,42,29,0.14), 0 4px 12px rgba(59,42,29,0.08);
  --schatten-karte:  0 8px 24px rgba(59,42,29,0.10);
  --schatten-karte-hover: 0 14px 36px rgba(59,42,29,0.14);
  --schatten-kachel: 0 4px 14px rgba(59,42,29,0.08);
  --schatten-kachel-hover: 0 12px 28px rgba(59,42,29,0.14);

  /* Vertikaler Rhythmus — EINE Stellschraube für alle Sektionen */
  --sektion-y:     clamp(56px, 9vw, 88px);   /* Abstand oben/unten je Sektion */
  --titel-abstand: clamp(28px, 5vw, 40px);   /* Sektionstitel → Inhalt */

  /* Motion — zentrale Stellschrauben für alle Übergänge */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --t-schnell: 0.18s;  /* Farben, Buttons */
  --t-sanft:   0.3s;   /* Karten-Hover */
  --t-zoom:    0.55s;  /* Foto-Zoom beim Hover (Kacheln, Karte) */
  --t-reveal:  0.65s;  /* Scroll-Einblendungen */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  color: var(--espresso);
  background: var(--creme);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--gold-tief);
  text-decoration-color: var(--gold-hell);
  transition: color var(--t-schnell) ease-out, text-decoration-color var(--t-schnell) ease-out;
}
a:hover { color: var(--espresso); }

:focus-visible {
  /* gold-tief statt gold: 4,96:1 auf Creme — gold erreicht nur 2,73:1
     und verfehlt die 3:1-Anforderung für Nicht-Text-Kontrast. */
  outline: 3px solid var(--gold-tief);
  outline-offset: 2px;
  border-radius: 3px;
}
.bg-braun :focus-visible, .quickinfo :focus-visible, .schmankerl :focus-visible {
  outline-color: var(--gold-hell);
}

.wrap { max-width: 1080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* --- Typo-Bausteine ------------------------------------------------- */

/* Handschrift-Zeile (Caveat) — bewusst sparsam: maximal vier pro Seite
   (Hero-Claim, Angebot, Öffnungszeiten, Anfahrt). 28px Mindestgröße,
   damit die Handschrift auch auf kleinen Screens gut lesbar bleibt. */
.script {
  font-family: var(--schrift-script);
  font-weight: 700;
  font-size: 28px;
  color: var(--gold-text);
  line-height: 1.2;
}
.bg-braun .script { color: var(--gold-hell); }

/* Label-Zeile — die „normale" Auszeichnungs-Typo für alles, was früher
   Handschrift war, aber keine der vier Script-Stellen ist (Über-uns,
   Deko-Kacheln, Schmankerl-Banner, Platzhalter-Titel). Gleiche Typo wie
   .k-label/.badge: Barlow 600, uppercase, 0.14em. */
.label-zeile {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-tief);
}
.kachel-deko .label-zeile, .schmankerl .label-zeile { color: var(--gold-hell); }

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(48px, 8vw, 76px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 10px 0 16px;
}

h2 { font-size: clamp(31px, 4.5vw, 38px); line-height: 1.05; margin: 6px 0 14px; }

.sektion-kopf { text-align: center; margin-bottom: var(--titel-abstand); }
.sektion-kopf h2 { margin-bottom: 0; }

/* --- Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  /* 19px statt 16px (Referenz): ab 18,66px gilt Bold als „large text",
     damit erfüllt Creme auf Gold (3,1:1) die WCAG-Kontrastanforderung. */
  font-size: 19px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  /* Einheitliche Höhe für ALLE Varianten (48px = komfortables Tap-Ziel) */
  min-height: 48px;
  padding: 12px 24px;
  /* Auf sehr schmalen Screens bricht die Beschriftung zentriert um,
     statt aus dem Container zu laufen. */
  max-width: 100%;
  justify-content: center;
  text-align: center;
  transition: background-color var(--t-schnell) ease-out, color var(--t-schnell) ease-out,
              transform var(--t-schnell) var(--ease-out), box-shadow var(--t-schnell) var(--ease-out);
}
/* Hover: leichte Hebung; Active: kurzer Druck-Moment (nur transform/opacity) */
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59,42,29,0.16); }
.btn:active { transform: translateY(0) scale(0.985); box-shadow: 0 2px 6px rgba(59,42,29,0.12); transition-duration: 0.06s; }
.btn-gold { background: var(--gold-btn); color: var(--warmweiss); }
.btn-gold:hover { background: var(--espresso); color: var(--warmweiss); }
/* Auf dunklen Sektionen würde der Espresso-Hover im Hintergrund verschwinden */
.bg-braun .btn-gold:hover { background: var(--creme); color: var(--espresso); }
.btn-dunkel { background: var(--espresso); color: var(--warmweiss); font-size: 15px; padding: 12px 20px; }
/* gold-tief statt gold: 15px-Text ist kein Large Text und braucht 4,5:1 —
   Warmweiß auf gold-tief erreicht ~5:1, auf gold nur 3,0:1. */
.btn-dunkel:hover { background: var(--gold-tief); color: var(--warmweiss); }

/* ============================ 01 · HERO ============================= */

.hero-inner {
  padding-top: clamp(24px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 48px);
  align-items: center;
}
/* Textspalte minimal breiter als das Foto — ausgewogene Zeilenlängen. */
.hero-text { flex: 1.2 1 340px; min-width: min(280px, 100%); padding: 24px 0 32px; }
.hero-brand { display: flex; align-items: center; gap: 16px; }
.hero-logo { width: 96px; height: auto; }
.hero-sub { margin: 0 0 24px; font-size: 18px; line-height: 1.6; max-width: 42ch; text-wrap: pretty; }
/* EIN dominanter CTA (Anruf), daneben der sekundäre Zeiten-Link —
   klare Hierarchie statt zwei gleich schwerer Buttons. */
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero-zeiten-link {
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-tief);
  text-decoration: underline;
  text-decoration-color: var(--gold-hell);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hero-zeiten-link:hover { color: var(--espresso); }
/* Feste 4:3-Bildfläche: gilt für den Platzhalter heute und hero.jpg
   morgen — der Fototausch ändert nichts am Layout. */
.hero-foto { flex: 1 1 320px; min-width: min(280px, 100%); }
.hero-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-gross);
}
.hero-foto .platzhalter { border-radius: var(--radius-gross); }

/* Quick-Info-Leiste */
.quickinfo { background: var(--espresso); color: var(--creme); margin-top: 28px; }
.quickinfo .wrap {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  font-size: 15px;
}
.quickinfo strong { color: var(--gold-hell); }
/* Unterstrichen in Gold-hell (Link-Grammatik der Seite): die Nummer muss
   auch ohne Hover als tappbar erkennbar sein. */
.quickinfo a {
  color: var(--creme);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold-hell);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.quickinfo a:hover { color: var(--gold-hell); }

/* =========================== 02 · ÜBER UNS ========================== */

.bg-warmweiss { background: var(--warmweiss); }
.bg-braun { background: var(--espresso); color: var(--creme); }
.bg-braun a:not(.btn) { color: var(--gold-hell); }
.bg-braun a:not(.btn):hover { color: var(--creme); }

.ueber-inner {
  padding-top: var(--sektion-y);
  padding-bottom: var(--sektion-y);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.ueber-text { flex: 1 1 340px; min-width: min(280px, 100%); }
.ueber-text .label-zeile { margin: 0 0 4px; }
.ueber-text p:not(.script):not(.label-zeile) { margin: 0 0 12px; font-size: 17px; max-width: 52ch; text-wrap: pretty; }
.ueber-text p:last-child { margin-bottom: 0; }
.gastgarten-slot { flex: 1 1 300px; min-width: min(260px, 100%); }

/* Gemeinsame Rahmung aller Fotos dieser Sektion: feste 4:3-Fläche, damit
   die Hochformat-Vorlagen nichts verrutschen lassen (CLS 0). Der
   Bildausschnitt wird je Foto über object-position gesetzt. */
.gastgarten-slot img, .ueber-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
}
/* Schild oben + gedeckte Tische unten im Bild halten */
.gastgarten-slot img { object-position: 50% 22%; }

/* Zweite Bildzeile (Gastraum groß, Tischdetail kleiner) — volle Breite
   der Über-uns-Zeile, deshalb flex-basis 100 %. */
.ueber-fotos {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.ueber-foto { margin: 0; }
.ueber-foto-gross img { object-position: 50% 55%; } /* Bar und Hocker im Bild */
.ueber-foto-klein img { object-position: 50% 32%; } /* Aperol-Tafel bis Rose */
@media (min-width: 700px) {
  .ueber-fotos { grid-template-columns: 1.5fr 1fr; }
  /* Nebeneinander soll die Zeile unten bündig abschließen: das kleinere
     Foto füllt die Zeilenhöhe. Das <img> liegt dafür absolut — die
     Zeilenhöhe kommt allein aus der 4:3-Fläche des großen Fotos und
     bleibt damit vorab berechenbar (CLS 0). Einspaltig (< 700 px) gilt
     wieder die normale 4:3-Fläche. */
  .ueber-foto-klein { position: relative; }
  .ueber-foto-klein img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* --- Platzhalter-Komponente -----------------------------------------
   Wiederverwendbarer Foto-Platzhalter: gleiche aspect-ratio wie das
   spätere Bild (Standard 4:3, überschreibbar via --platzhalter-ratio),
   gestrichelte Umrandung, Label-Titel + kurzer Hinweis. Ein echtes Foto
   ersetzt den <div> ohne jede Layout-Änderung. Aktuell nicht mehr im
   Einsatz (Hero und Über-uns haben echte Fotos) — bleibt für künftige
   Motive ohne Foto stehen. */
.platzhalter {
  aspect-ratio: var(--platzhalter-ratio, 4 / 3);
  border-radius: var(--radius);
  border: 2px dashed var(--gold-hell);
  background: repeating-linear-gradient(45deg, var(--creme), var(--creme) 14px, var(--warmweiss) 14px, var(--warmweiss) 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.platzhalter small { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* =========================== 03 · ANGEBOT =========================== */

.angebot-inner { padding-top: var(--sektion-y); padding-bottom: var(--sektion-y); }

/* Buffet-Karte */
.buffet-karte {
  background: var(--warmweiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-karte);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  transition: box-shadow var(--t-sanft) var(--ease-out);
}
.buffet-karte:hover { box-shadow: var(--schatten-karte-hover); }
.buffet-karte picture { flex: 1 1 320px; min-width: min(260px, 100%); display: flex; }
.buffet-karte img {
  width: 100%;
  min-height: 260px;
  max-height: 380px;
  object-fit: cover;
  object-position: 50% 60%;
}
.buffet-body { flex: 1 1 320px; min-width: min(280px, 100%); padding: 32px 28px; align-self: center; }
.badge {
  display: inline-block;
  /* gold-tief statt gold (Referenz): 14px-Text braucht 4,5:1 — Creme auf
     #8A6420 erreicht 4,96:1, auf #B8862B nur 3,0:1. */
  background: var(--gold-tief);
  color: var(--warmweiss);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
}
.buffet-body h3 { font-size: 32px; margin: 12px 0 8px; }
.buffet-body h3 span { color: var(--gold-text); }
.buffet-body > p { margin: 0 0 14px; font-size: 16px; text-wrap: pretty; }
.buffet-preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 18px;
}
.buffet-preis strong { font-family: var(--schrift-display); font-weight: 700; font-size: 40px; line-height: 1; }
.buffet-preis small { font-size: 14px; color: var(--muted); }

/* Frühstücksplatte unter der Buffet-Karte: bewusst mittelgroß und
   zentriert statt formatfüllend — die Vorlage hat weniger Reserve als
   die übrigen Fotos. Quadratische Fläche, fix ⇒ kein Layout-Shift. */
.buffet-teller {
  margin: 0 auto 20px;
  max-width: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-karte);
}
.buffet-teller img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 70%; /* Tischkante oben aus dem Bild schneiden */
}
/* 4er-Kachelraster: explizite Spalten (1 → 2 → 4) statt auto-fit —
   verhindert die unruhige 3+1-Zeile in mittleren Viewports.
   Breakpoints korrespondieren mit den sizes-Attributen im HTML. */
.kacheln {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px)  { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel {
  background: var(--warmweiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-kachel);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-sanft) var(--ease-out), box-shadow var(--t-sanft) var(--ease-out);
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-kachel-hover); }
.kachel-foto { overflow: hidden; }
.kachel-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 55%;
  transition: transform var(--t-zoom) var(--ease-out);
}
.kachel:hover .kachel-foto img { transform: scale(1.04); }
/* Eis-Kachel: Hochformat-Vorlage im 16:9-Fenster — Ausschnitt oben auf
   den drei Kugeln, sonst zeigt die Kachel nur ein Stück Waffel. */
.kachel-foto-eis img { object-position: 50% 8%; }
.kachel-deko {
  aspect-ratio: 16 / 9;
  background: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
}
.kachel-body { padding: 20px 20px 24px; }
.kachel-body h3 { font-size: 24px; margin: 0 0 8px; }
.kachel-body p { margin: 0; font-size: 15px; text-wrap: pretty; }
.kachel-body a { font-weight: 700; white-space: nowrap; }
.eis-liste { font-size: 15px; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.eis-liste li { display: flex; justify-content: space-between; gap: 12px; }

/* Schmankerl-Banner */
.schmankerl {
  background: var(--espresso);
  color: var(--creme);
  border-radius: var(--radius);
  margin-top: 20px;
  padding: 22px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.schmankerl p { font-size: 16px; flex: 1 1 300px; margin: 0; }

/* ======================= 04 · ÖFFNUNGSZEITEN ======================== */

.zeiten-inner { max-width: 720px; margin: 0 auto; padding: var(--sektion-y) 20px; }

.zeiten-tabelle { width: 100%; border-collapse: collapse; }
.zeiten-tabelle tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linie-dunkel);
}
.zeiten-tabelle tr:last-child { border-bottom: 0; }
.zeiten-tabelle th { font-weight: 700; font-family: var(--schrift-text); font-size: inherit; text-align: left; padding: 0; }
.zeiten-tabelle td { font-family: var(--schrift-display); font-weight: 600; font-size: 22px; padding: 0; }
.zeiten-tabelle .ruhetag td { color: var(--gold-hell); }

.zeiten-cta {
  margin-top: 32px;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}
.zeiten-erklaerung {
  font-size: 15px;
  color: rgba(244,235,214,0.85);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}

/* ====================== 05 · ANFAHRT & KONTAKT ====================== */

.anfahrt-inner { padding-top: var(--sektion-y); padding-bottom: var(--sektion-y); }
.anfahrt-grid { display: flex; flex-wrap: wrap; gap: 24px; }

.kontakt-karte {
  flex: 1 1 300px;
  min-width: min(280px, 100%);
  background: var(--warmweiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten-kachel);
  padding: clamp(24px, 5vw, 32px);
  display: grid;
  gap: 20px;
  align-content: start;
}
.k-label {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-tief);
}
.k-wert { font-size: 17px; font-weight: 700; }
/* Telefonnummern sind Links und müssen ohne Hover als solche erkennbar
   sein — Unterstreichung in Gold-hell, wie überall auf der Seite. */
a.k-wert {
  color: var(--espresso);
  text-decoration: underline;
  text-decoration-color: var(--gold-hell);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a.k-wert:hover { color: var(--gold-tief); }
.k-neben { font-size: 14px; color: var(--muted); margin-top: 4px; }
.k-neben a { font-weight: 700; }

.karte-link {
  flex: 1.4 1 340px;
  min-width: min(280px, 100%);
  min-height: 280px;
  border-radius: var(--radius);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: block;
  /* Papierweiß der Lageplan-Grafik — die Grafik wird vollständig gezeigt
     (contain), der Rest der Fläche setzt sie randlos fort. */
  background: #fff;
}
/* Anders als bei den Fotos wird hier nicht beschnitten: Voitsberg,
   Lieboch und Autobahn stehen direkt an den Rändern der Grafik. Das
   padding-bottom hält die Karte über der Leiste. */
.karte-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 46px;
  object-fit: contain;
  transition: transform var(--t-zoom) var(--ease-out);
}
.karte-link:hover img, .karte-link:focus-visible img { transform: scale(1.03); }
.karte-leiste {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--espresso);
  color: var(--creme);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.karte-leiste .karte-hinweis { font-size: 14px; }
.karte-leiste .karte-cta { font-weight: 700; font-size: 14px; color: var(--gold-hell); white-space: nowrap; }
.karte-link:hover .karte-cta { color: var(--creme); }

/* =========================== 06 · FOOTER ============================ */

.footer-inner {
  padding-top: clamp(32px, 6vw, 44px);
  padding-bottom: clamp(32px, 6vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
.footer-marke { font-family: var(--schrift-display); font-weight: 700; font-size: 24px; text-transform: uppercase; }
.footer-adresse { font-size: 14px; color: rgba(244,235,214,0.7); }
.footer-links { display: flex; gap: 24px; font-size: 14px; }
.footer-links a { color: var(--creme); }
.footer-links a:hover { color: var(--gold-hell); }
.footer-unten { border-top: 1px solid rgba(244,235,214,0.18); }
.footer-unten .wrap { padding-top: 12px; padding-bottom: 12px; font-size: 12.5px; color: rgba(244,235,214,0.55); }

/* ========================== Rechtsseiten ============================ */

.rechtsseite { max-width: 720px; margin: 0 auto; padding: 48px 20px 64px; }
.rechtsseite h1 { font-size: clamp(36px, 6vw, 52px); }
.rechtsseite h2 { font-size: 26px; margin-top: 36px; }
.rechtsseite a { overflow-wrap: anywhere; }
.zurueck { display: inline-block; margin-bottom: 24px; font-weight: 700; }

/* Langer Fließtext (Datenschutzerklärung): Inhalt wird später zwischen
   den DSE-TEXT-Markern eingefügt, daher nur Element-Selektoren.
   ~68 Zeichen Zeilenlänge, etwas größere Schrift und Zeilenhöhe. */
.rechtstext {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
  hyphens: auto;
}
.rechtstext > :first-child { margin-top: 0; }
.rechtstext h1 { line-height: 1; margin: 0 0 28px; hyphens: manual; }
.rechtstext h2 {
  font-size: clamp(24px, 4vw, 28px);
  line-height: 1.1;
  margin: 2.2em 0 0.6em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(59,42,29,0.14);
  hyphens: manual;
}
.rechtstext h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext h3 {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin: 1.8em 0 0.5em;
  hyphens: manual;
}
.rechtstext h2 + h3 { margin-top: 1em; }
.rechtstext p,
.rechtstext ul,
.rechtstext ol { margin: 0 0 1em; }
.rechtstext ul,
.rechtstext ol { padding-left: 1.4em; }
.rechtstext li + li,
.rechtstext li > ul,
.rechtstext li > ol { margin-top: 0.35em; }
.rechtstext li > ul,
.rechtstext li > ol { margin-bottom: 0; }
.rechtstext li::marker { color: var(--gold-tief); }
.rechtstext ol > li::marker { font-weight: 700; }
/* hyphens: manual — sonst setzt der Browser Trennstriche mitten in URLs */
.rechtstext a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; hyphens: manual; }
.rechtstext a:hover { text-decoration-color: currentColor; }
.rechtstext blockquote {
  margin: 1.5em 0;
  padding: 14px 20px;
  background: var(--warmweiss);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.rechtstext blockquote > :last-child { margin-bottom: 0; }
.rechtstext [id] { scroll-margin-top: 16px; }
/* Rechtsseiten tragen denselben Footer wie die Startseite. Kurze Seiten
   (Impressum): Footer sitzt trotzdem am unteren Fensterrand. */
body:has(> .rechtsseite) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(> .rechtsseite) > .rechtsseite { flex: 1 0 auto; width: 100%; }

/* Der Mobil-Innenabstand in .footer-unten (Platz für die Anruf-Leiste)
   entfällt auf Seiten ohne Leiste. Browser ohne :has() ignorieren die
   Regel und behalten den Abstand — die Startseite ist nie betroffen. */
body:not(:has(.anruf-leiste)) .footer-unten .wrap { padding-bottom: 12px; }
@media (max-width: 560px) {
  .rechtstext { font-size: 16px; }
  .rechtstext h2 { margin-top: 1.8em; }
  .rechtstext blockquote { padding: 12px 16px; }
}

/* ====================== Mobile Anruf-Leiste ========================= */

/* Fixe Leiste in der Daumenzone: der primäre CTA (Anruf) bleibt beim
   Scrollen erreichbar. Nur ≤560 px; darüber übernimmt die Quickinfo. */
.anruf-leiste { display: none; }

/* Inline-Telefonlinks & Footer-Links: 44-px-Tap-Fläche ohne
   Layoutsprung (Padding wird durch negative Margins neutralisiert) */
@media (pointer: coarse) {
  .quickinfo a, .kachel-body a, .hero-zeiten-link, a.k-wert {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }
  .footer-links a {
    display: inline-block;
    padding: 12px 8px;
    margin: -12px -8px;
  }
}

/* ========================= Mobile-Feinschliff ======================= */

@media (max-width: 560px) {
  /* Hero bewusst kompakt: Kernaussage, Anruf-CTA und ein Stück Bild
     sollen ohne Scrollen sichtbar sein */
  .hero-inner { padding-top: 12px; gap: 18px; }
  .hero-text { padding: 4px 0 0; }
  .hero-logo { width: 64px; }
  .hero-brand { gap: 12px; }
  .hero-sub { font-size: 17px; margin-bottom: 18px; }
  .hero-ctas { gap: 12px; }
  .hero-ctas .btn { width: 100%; }
  .hero-zeiten-link { margin: 0 auto; }
  .quickinfo { margin-top: 20px; }

  .buffet-body { padding: 26px 22px; }
  .buffet-body .btn { width: 100%; }
  .buffet-karte img { min-height: 220px; max-height: 300px; }
  .karte-link { min-height: 320px; }
  /* Deko-Kacheln einspaltig: Höhe folgt dem Text statt dem 16:9-Loch */
  .kachel-deko { aspect-ratio: auto; padding: 28px 8px; }

  .anruf-leiste {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10; /* einzige schwebende Ebene der Seite */
    background: var(--espresso);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(59,42,29,0.28);
  }
  .anruf-leiste .btn { width: 100%; flex-wrap: wrap; gap: 0 8px; }
  /* Espresso-Hover würde auf der Espresso-Leiste verschwinden */
  .anruf-leiste .btn-gold:hover { background: var(--creme); color: var(--espresso); }
  .anruf-leiste :focus-visible { outline-color: var(--gold-hell); }
  /* Platz, damit die Leiste die letzte Footer-Zeile nicht dauerhaft
     verdeckt — 104px deckt auch die zweizeilige Leisten-Beschriftung ab */
  .footer-unten .wrap { padding-bottom: calc(12px + 104px + env(safe-area-inset-bottom)); }
}

/* ======================= 07 · Eingangs-Animation ==================== */
/* Nur aktiv mit html.intro (Inline-Gate im <head>, einmal pro Session).
   Ohne JavaScript, bei prefers-reduced-motion oder ab dem zweiten
   Aufruf fehlt die Klasse — die Seite rendert sofort im Endzustand.
   Animiert werden ausschließlich transform und opacity (GPU-Compositing,
   kein Layout). Choreografie: 300 ms Ruhe mit mittigem Logo, dann fliegt
   das Logo (Drehung + Verkleinerung) an seinen Platz, während die
   Inhalte gestaffelt einblenden. Alles fertig nach ≈ 4,3 s
   (Kundenwunsch: 75 % langsamer = Dauern/Delays ×4, Ruhe 300 ms). */

html.intro {
  /* Stellschrauben: Timing & Kurven (Drehung/Skalierung: intro.js) */
  --intro-hold: 300ms;  /* Moment der Ruhe: nur das Logo, mittig */
  --intro-flug: 3800ms; /* Dauer des Logo-Flugs */
  --intro-ease: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-expo: entschlossen, kein Überschwingen */
  --intro-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint für die Einblendungen */
}

/* Logo-Flug: Viewport-Mitte → normaler Platz. Start-Offset misst
   intro.js (--intro-dx/-dy); ohne die Variablen ist der Start identisch
   mit dem Ende — fällt das Skript aus, steht das Logo einfach still. */
html.intro .hero-logo {
  animation: intro-logo-flug var(--intro-flug) var(--intro-ease) var(--intro-hold) both;
  will-change: transform;
  z-index: 1; /* fliegt ggf. über das gleichzeitig einblendende Hero-Foto */
}
@keyframes intro-logo-flug {
  from {
    transform: translate(var(--intro-dx, 0px), var(--intro-dy, 0px))
               rotate(var(--intro-rot, 0deg))
               scale(var(--intro-scale, 1));
  }
}

/* Gestaffelte Einblendungen, alle relativ zu --intro-hold */
html.intro h1                 { animation: intro-blende 2400ms var(--intro-ease-soft) calc(var(--intro-hold) + 600ms) both; }
html.intro .hero-foto         { animation: intro-foto   2800ms var(--intro-ease-soft) calc(var(--intro-hold) + 1000ms) both; }
html.intro .hero-brand .script{ animation: intro-blende 2000ms var(--intro-ease-soft) calc(var(--intro-hold) + 1120ms) both; }
html.intro .hero-sub          { animation: intro-blende 2400ms var(--intro-ease-soft) calc(var(--intro-hold) + 1200ms) both; }
html.intro .hero-ctas         { animation: intro-hebung 2200ms var(--intro-ease-soft) calc(var(--intro-hold) + 1600ms) both; }
html.intro .quickinfo,
html.intro main,
html.intro footer,
html.intro .anruf-leiste      { animation: intro-blende 2200ms var(--intro-ease-soft) calc(var(--intro-hold) + 1800ms) both; }

@keyframes intro-blende { from { opacity: 0; } }
@keyframes intro-hebung { from { opacity: 0; transform: translateY(14px); } }
@keyframes intro-foto   { from { opacity: 0; transform: scale(0.97); } }

/* Doppelter Boden zum JS-Gate: bei reduzierter Bewegung nie animieren */
@media (prefers-reduced-motion: reduce) {
  html.intro .hero-logo,
  html.intro h1,
  html.intro .hero-brand .script,
  html.intro .hero-sub,
  html.intro .hero-ctas,
  html.intro .hero-foto,
  html.intro .quickinfo,
  html.intro main,
  html.intro footer,
  html.intro .anruf-leiste { animation: none; }
}

/* ======================== 08 · Scroll-Reveals ======================= */
/* Die Klassen vergibt AUSSCHLIESSLICH assets/js/reveal.js — ohne JS,
   bei reduzierter Bewegung oder ohne IntersectionObserver bleibt jedes
   Element von Anfang an sichtbar (kein Content-Gating). Animiert werden
   nur opacity und transform; nach dem Einblenden räumt reveal.js die
   Klassen wieder ab, damit Hover-Transitions der Karten ungestört sind. */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-foto { transform: scale(0.97); }          /* Bildflächen: fade + scale */
.reveal.reveal-sichtbar { opacity: 1; transform: none; }

/* Doppelter Boden zum JS-Gate */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============== Reduzierte Bewegung: Hover-Interaktionen ============ */

@media (prefers-reduced-motion: reduce) {
  .btn, .kachel, .kachel-foto img, .karte-link img { transition-property: background-color, color, box-shadow; }
  .btn:hover, .btn:active, .kachel:hover { transform: none; }
  .kachel:hover .kachel-foto img,
  .karte-link:hover img,
  .karte-link:focus-visible img { transform: none; }
}