/* ==========================================================================
   LETOKY: Design-System
   ==========================================================================
   Farbkonzept, abgeleitet direkt aus dem Logo (schwarz / Gold-Verlauf):
   - Ink:    warmes Tiefschwarz als Grundfläche. Kein Reinschwarz, damit die
             Seite Tiefe behält und Gold darauf nicht flach wirkt.
   - Gold:   der Verlauf aus der Bildmarke (#B8862B → #F0D27C). Trägt Logo,
             Buttons, Preise, Linien und Akzente.
   - Text:   warmes Off-White statt Reinweiß, damit es neben Gold nicht kalt
             wirkt.
   Gold ist bewusst dosiert: Flächen bleiben schwarz, Gold markiert nur
   Handlung, Hierarchie und Preis.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Flächen ---- */
  --ink-900: #0a0908;
  --ink-850: #121110;
  --ink-800: #1a1815;
  --ink-700: #23201a;
  --line: #2e2a22;
  --line-strong: #423a2a;

  /* ---- Text ---- */
  --text: #efe9de;
  --text-soft: #a8a094;
  --text-dim: #7a7368;

  /* ---- Gold (aus dem Logo gemessen) ---- */
  --gold: #d9ae48;
  --gold-bright: #f0d27c;
  --gold-deep: #b8862b;
  --gold-veil: rgba(217, 174, 72, 0.12);
  --gold-gradient: linear-gradient(135deg, #b8862b 0%, #f0d27c 45%, #c79a34 100%);

  /* ---- Typografie ---- */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5.2rem);

  /* ---- Abstände (8px-Basis) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;
  --sp-9: 10rem;

  /* ---- Bewegung ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --content-max: 78rem;
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
/* Ohne height:auto gewinnt das height-Attribut im HTML gegen die
   aspect-ratio-Regeln, Bilder wurden dadurch deutlich zu hoch gerendert. */
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--text);
}

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

/* ---- Fokus-Sichtbarkeit ---- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Layout-Hilfen ---- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 900px) {
  .wrap { padding-inline: var(--sp-6); }
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.rule { border: 0; border-top: 1px solid var(--line); }

/* ---- Buttons / Links ---- */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-900);
  background: var(--gold-gradient);
  padding: 0.95em 1.6em;
  border-radius: 2px;
  transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.btn-call:hover { filter: brightness(1.12); }
.btn-call:active { transform: scale(0.97); }
.btn-call svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-call--lg { font-size: var(--step-0); padding: 1.05em 1.9em; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 0.9em 1.6em;
  border-radius: 2px;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn-ghost:hover { border-color: var(--gold); background: var(--gold-veil); }
.btn-ghost:active { transform: scale(0.97); }
.btn-ghost svg { width: 1.05em; height: 1.05em; flex: none; }

.text-link {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.text-link:hover { text-decoration-color: var(--gold); color: var(--gold); }

/* ---- Logo ----
   Das Logo liegt als goldene Marke auf Schwarz vor. mix-blend-mode: screen
   löscht das Schwarz auf jedem dunklen Untergrund exakt aus, ohne dass beim
   Freistellen die feinen Konturen der Wortmarke ausfransen. */
.brand {
  display: block;
  text-decoration: none;
  line-height: 0;
}
.brand img {
  mix-blend-mode: screen;
  width: auto;
}
/* Im Header steht nur die Bildmarke: der Schriftzug besteht aus sehr feinen
   Outline-Linien und trägt auf Header-Höhe nicht. Die massive Bildmarke
   funktioniert dort deutlich besser. Die vollständige Marke inklusive
   Schriftzug und Subline steht im Footer, wo genug Fläche dafür ist. */
.brand--header img { height: 2.4rem; }
@media (min-width: 640px) { .brand--header img { height: 2.8rem; } }
.brand--footer img { height: 6.5rem; }

/* ---- Platzhalter-Slots (Inhalte kommen von LETOKY) ---- */
.placeholder {
  font-family: var(--font-body);
  color: var(--text-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  padding: 0.7em 0.9em;
  background: var(--ink-850);
}
.placeholder--lead {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  padding: 1em 1.1em;
}
.placeholder--title { font-size: var(--step-2); display: inline-block; }
.placeholder-stack { display: grid; gap: var(--sp-2); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}

.site-nav { display: none; }
/* Breakpoint bewusst auf 1180px: fünf Navigationspunkte mit inhaltlich
   sprechenden Labels („Was bekommt man bei LETOKY") brauchen Platz. */
@media (min-width: 1180px) {
  .site-nav {
    display: flex;
    gap: var(--sp-4);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
  }
  .site-nav a {
    text-decoration: none;
    position: relative;
    padding-block: 0.3em;
    color: var(--text-soft);
    transition: color 160ms var(--ease-out);
  }
  .site-nav a:hover { color: var(--text); }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1.5px;
    background: var(--gold);
    transition: right 200ms var(--ease-out);
  }
  .site-nav a:hover::after { right: 0; }
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.nav-toggle {
  display: inline-flex;
  width: 2.4rem; height: 2.4rem;
  align-items: center; justify-content: center;
  color: var(--gold);
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 1180px) { .nav-toggle { display: none; } }
.header-actions .btn-call { display: none; }
@media (min-width: 640px) { .header-actions .btn-call { display: inline-flex; } }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--ink-850);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { text-decoration: none; font-size: var(--step-1); font-family: var(--font-display); }
@media (min-width: 1180px) { .mobile-menu { display: none !important; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: var(--sp-6);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: end;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-5);
    align-items: stretch;
  }
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
}
@media (min-width: 900px) {
  .hero__text { padding-bottom: var(--sp-8); }
}

/* Headline ist länger als eine klassische Claim-Zeile, deshalb eine eigene,
   etwas ruhigere Skala statt --step-5. */
.hero__title {
  font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.4rem);
  max-width: 16ch;
}
.hero__title em {
  font-style: italic;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--text-soft);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-2);
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.hero__tel {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--gold);
}
.hero__hours,
.hero__keywords {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  padding: 0.5em 0.9em;
  border-radius: 999px;
}

/* Die Bildmarke gehoert zum zweispaltigen Hero. Einspaltig steht sie als
   zweite, groessere Wiederholung des Logos aus der Kopfzeile direkt darunter
   und schiebt den Text nach oben aus dem Bild, deshalb dort ganz weg. */
.hero__image-col { display: none; }
@media (min-width: 900px) {
  .hero__image-col {
    display: block;
    position: relative;
  }
}
.hero__image-frame {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border-radius: 2px;
}
@media (min-width: 900px) {
  .hero__image-frame {
    position: absolute;
    inset: 0 calc(var(--sp-6) * -1) 0 0;
    min-height: unset;
  }
}
/* Im Hero steht die Bildmarke, kein Foto: mittig eingepasst statt
   formatfuellend beschnitten. */
.hero__image-frame--mark {
  display: grid;
  place-items: center;
}
.hero__mark {
  height: min(68%, 440px);
  width: auto;
  max-width: 76%;
  display: block;
}

/* ==========================================================================
   ÜBER UNS
   ========================================================================== */
.about { padding-block: var(--sp-7); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 860px) {
  .about__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); }
}
.about__media { overflow: hidden; border-radius: 2px; }
.about__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
@media (min-width: 860px) {
  .about__media { position: sticky; top: 6rem; }
}
.about__text { display: grid; gap: var(--sp-3); }
/* Groesser als der uebrige Fliesstext: der Abschnitt ist der Einstieg in die
   Seite und darf wie ein Lead lesen. --step-1 statt --step-0. */
.about__text p {
  color: var(--text-soft);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 52ch;
}
.about__copy h2 {
  font-size: var(--step-4);
  margin-block: var(--sp-2) var(--sp-4);
}

/* ==========================================================================
   CHEF’S CHOICES: redaktionelle Strecke
   ========================================================================== */
.dishes { padding-block: var(--sp-7); }
.dishes__head {
  max-width: 44rem;
  margin-bottom: var(--sp-6);
}
/* Drei Sterne stehen anstelle der sonst üblichen Eyebrow-Zeile, rein
   dekorativ, deshalb aria-hidden im Markup. */
.dishes__stars {
  display: flex;
  gap: 0.38em;
  line-height: 1;
}
.dishes__stars svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--gold);
}
.dishes__head h2 {
  font-size: var(--step-4);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}
/* Einleitungsabsatz unter der H2. Traegt die Lead-Typografie, die vorher
   an .placeholder--lead hing. Der Absatz ist jetzt ein Redaktionsfeld und
   kein Platzhalter-Slot mehr, deshalb ohne gestrichelten Rahmen und ohne
   dessen Innenabstand: so steht er buendig unter der Ueberschrift. */
.dishes__lead {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
}
.dishes__subhead {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.dishes__subhead h3 { font-size: var(--step-2); color: var(--gold); }
.dishes__subhead::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.dish-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-6);
}
.dish-row + .dish-row { border-top: 1px solid var(--line); }

@media (min-width: 860px) {
  .dish-row { grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
  .dish-row__media { grid-column: 1 / 8; }
  .dish-row__text { grid-column: 8 / 13; }
  .dish-row--reverse .dish-row__media { grid-column: 6 / 13; grid-row: 1; }
  .dish-row--reverse .dish-row__text { grid-column: 1 / 6; grid-row: 1; }
}

.dish-row__media { position: relative; overflow: hidden; border-radius: 2px; }
.dish-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease-in-out);
}
.dish-row:hover .dish-row__media img { transform: scale(1.03); }

/* ---- Wechselbild: Schrägansicht -> Draufsicht ----------------------------
   Zwei Aufnahmen desselben Gerichts liegen übereinander, die Draufsicht wird
   darübergeblendet. Der Zustand hängt als Klasse am Container (gesetzt vom
   Umschalt-Button), damit Tap und Tastatur überall funktionieren; auf
   Zeigergeräten kommt der Hover als zweiter Auslöser dazu. Gleiches Muster
   wie bei .menu-item, nur mit aria-pressed statt aria-expanded, weil hier
   nichts aufklappt, sondern umgeschaltet wird. */
.dish-flip__view {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dish-flip__view--top {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 450ms var(--ease-in-out);
}
.dish-flip.is-top .dish-flip__view--top { opacity: 1; }

/* Der Umschalter liegt über dem ganzen Bild, damit ein Tap irgendwo darauf
   reicht. Sichtbar ist nur das Schildchen unten rechts. */
.dish-flip__toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--sp-3);
}
.dish-flip__label {
  background: rgba(10, 9, 8, 0.72);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.5em 0.9em;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
/* Das Schildchen benennt die Handlung, nicht den Zustand. Ein Zustands-Text
   ("Draufsicht") wuerde beim Hover luegen: dort liegt die Draufsicht schon
   oben, ohne dass is-top gesetzt ist. */
.dish-flip__label::after { content: "Ansicht wechseln"; }
.dish-flip__toggle:hover .dish-flip__label,
.dish-flip__toggle:focus-visible .dish-flip__label {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--ink-900);
}

/* Auf Zeigergeräten reicht schon der Hover übers Bild. */
@media (hover: hover) and (pointer: fine) {
  .dish-flip:hover .dish-flip__view--top { opacity: 1; }
}

/* Der Perspektivwechsel ersetzt hier den Zoom - beides zusammen ist unruhig. */
.dish-row:hover .dish-flip .dish-flip__view { transform: none; }

.dish-row__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step--1);
  color: var(--gold);
}
.dish-row__text h4 {
  font-size: var(--step-3);
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.dish-row__text p { color: var(--text-soft); max-width: 38ch; }
.dish-row__tag {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ==========================================================================
   SPEISEKARTE
   ========================================================================== */
.menu-section {
  background: var(--ink-850);
  border-block: 1px solid var(--line);
  padding-block: var(--sp-7);
  position: relative;
}
.menu-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  max-width: 52rem;
}
.menu-section__head h2 { font-size: var(--step-4); }
.menu-section__note { color: var(--text-soft); font-size: var(--step-0); }
.menu-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Tab-Leiste: 13 Kategorien. Auf schmalen Viewports als horizontal
   scrollbarer Streifen statt als vierzeiliger Block. */
.menu-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.menu-tabs::-webkit-scrollbar { height: 3px; }
.menu-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
@media (min-width: 1040px) {
  .menu-tabs { flex-wrap: wrap; overflow-x: visible; }
}
.menu-tab {
  flex: none;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.55em 1em;
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.menu-tab:hover { color: var(--text); border-color: var(--line-strong); }
.menu-tab[aria-selected="true"] {
  color: var(--ink-900);
  background: var(--gold-gradient);
  border-color: transparent;
  font-weight: 600;
}

.menu-hint {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.menu-hint svg { width: 1em; height: 1em; flex: none; color: var(--gold); }

.menu-panel { display: none; }
.menu-panel.is-active {
  display: block;
  animation: menuReveal 420ms var(--ease-out);
}
@keyframes menuReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu-panel__intro {
  font-size: var(--step--1);
  color: var(--text-dim);
  border-left: 2px solid var(--gold);
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-4);
  max-width: 60ch;
}

.menu-list {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  column-gap: var(--sp-6);
}
@media (min-width: 760px) {
  .menu-list { grid-template-columns: 1fr 1fr; }
}

/* Jedes Gericht ist ein Button: Desktop öffnet die Beschreibung per Hover,
   Touch per Tap. Der Inhalt ist in beiden Fällen identisch. */
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  transition: background 200ms var(--ease-out);
}
.menu-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.menu-item__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--text);
  transition: color 160ms var(--ease-out);
}
.menu-item__fill {
  flex: 1;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-0.35em);
  min-width: 1.5rem;
}
.menu-item__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.menu-item__desc {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--text-soft);
  white-space: normal;
  max-width: 46ch;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 280ms var(--ease-out), opacity 220ms var(--ease-out),
              transform 280ms var(--ease-out), margin-top 280ms var(--ease-out);
}
.menu-item[aria-expanded="true"] .menu-item__desc {
  max-height: 12rem;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.5em;
}
/* Hover nur auf Geräten mit echtem Zeiger, auf Touch bleibt es beim Tap. */
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover .menu-item__desc,
  .menu-item:focus-visible .menu-item__desc {
    max-height: 12rem;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.5em;
  }
  .menu-item:hover .menu-item__name { color: var(--gold); }
}
.menu-item[aria-expanded="true"] .menu-item__name { color: var(--gold); }

.menu-footnote {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

/* ==========================================================================
   BAR & GETRÄNKE
   ==========================================================================
   Die Getränkekarte umfasst über 60 Positionen. Vollständig aufgelistet
   würde sie die Speisekarte erdrücken, ohne der Reservierungsentscheidung
   zu helfen. Deshalb: Kategorien mit Preisspanne als Überblick, die
   hausgemachten Limonaden als namentlich ausgespielter Höhepunkt.
   ========================================================================== */
.drinks { padding-block: var(--sp-7); }
.drinks__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .drinks__inner { grid-template-columns: 0.8fr 1.2fr; }
}
.drinks__media { position: relative; overflow: hidden; border-radius: 2px; }
.drinks__media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
/* Die Platzhalterfotos sind teils sehr hell. Ein dezenter Verlauf bindet sie
   an den dunklen Seitengrund an, ohne das Motiv zu verlieren. */
.drinks__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.15) 0%, rgba(10,9,8,0) 45%, rgba(10,9,8,0.45) 100%);
  pointer-events: none;
}
.drinks__copy h2 { font-size: var(--step-4); margin-block: var(--sp-2) var(--sp-3); }
.drinks__copy > p:not(.eyebrow) { max-width: 52ch; color: var(--text-soft); }

.drinks__highlight {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--ink-850);
}
.drinks__highlight h3 {
  font-size: var(--step-1);
  color: var(--gold);
  margin-bottom: var(--sp-1);
}
.drinks__highlight > p { font-size: var(--step--1); color: var(--text-dim); margin-bottom: var(--sp-3); }
.lemonade-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lemonade-tags li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35em 0.9em;
}

.drinks-grid {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  column-gap: var(--sp-6);
}
@media (min-width: 640px) {
  .drinks-grid { grid-template-columns: 1fr 1fr; }
}
.drinks-grid div {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.drinks-grid dt { font-size: var(--step-0); }
.drinks-grid dd {
  margin: 0;
  margin-left: auto;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}

/* ==========================================================================
   WARUM LETOKY?
   ========================================================================== */
.usp { padding-block: var(--sp-7); }
.usp__head { max-width: 40rem; margin-bottom: var(--sp-6); }
.usp__head h2 { font-size: var(--step-4); margin-top: var(--sp-2); }

.usp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 760px) {
  .usp__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
  }
  .usp__media--tall { grid-column: 1 / 6; grid-row: 1 / 3; }
  .usp__media--wide { grid-column: 6 / 13; grid-row: 1 / 2; }
  /* Bewusst auf .usp__grid beschränkt, die zweite Karte in .usp__more
     steht in einem eigenen 2-Spalten-Grid und darf diese Platzierung
     nicht erben. */
  .usp__grid > .usp-card--primary { grid-column: 6 / 13; grid-row: 2 / 3; }
}
.usp__media { overflow: hidden; border-radius: 2px; }
.usp__grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.usp__media--tall img { aspect-ratio: 3/4; }
@media (min-width: 760px) { .usp__media--tall img { aspect-ratio: auto; } }

/* Das 16:10 traegt jetzt der Rahmen statt des Bildes. Nur so hat die
   Bildhoehe darunter einen festen Bezug - haenge das Verhaeltnis am Bild,
   waere seine Hoehe von der Hoehe abhaengig, die es selbst erzeugt. */
.usp__media--wide { aspect-ratio: 16/10; }
/* Die Parallax verschiebt das Bild um bis zu 12 px nach oben und unten.
   Damit dabei keine Kante frei wird, ragt es oben und unten 16 px ueber
   den Rahmen hinaus, der es per overflow: hidden abschneidet. Vorher
   besorgte das ein scale(1.08) im Transform. Das musste die gerasterte
   GPU-Ebene hochrechnen und machte jedes Foto an dieser Stelle weich;
   ueber die Hoehe geloest bleibt es pixelgenau. */
.usp__media--wide img {
  aspect-ratio: auto;
  height: calc(100% + 32px);
  margin-block: -16px;
}

.usp-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: 2px;
}
.usp-card--primary {
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  justify-content: center;
}
.usp-card--primary h3 { font-size: var(--step-2); }
.usp-card--primary p { color: var(--text-soft); max-width: 60ch; }

/* Zweite Reihe: nur noch der zweite Punkt, ueber die volle Breite. Das
   Textmass steckt in .usp-card--primary p (max-width: 60ch), die Karte darf
   also breiter laufen, ohne dass die Zeilen zu lang werden. */
.usp__more {
  margin-top: var(--sp-4);
}

/* ==========================================================================
   GEMEINSAM GENIESSEN
   ========================================================================== */
.gather {
  background: var(--ink-850);
  border-block: 1px solid var(--line);
  padding-block: var(--sp-7);
}
.gather__inner {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  max-width: 58rem;
}
.gather__inner h2 { font-size: var(--step-4); }
.gather__inner p:not(.eyebrow) { color: var(--text-soft); font-size: var(--step-1); max-width: 58ch; }
.gather__inner .btn-call { margin-top: var(--sp-3); }

/* ==========================================================================
   ECHTE GOOGLE-REZENSIONEN
   ========================================================================== */
.testimonials { padding-block: var(--sp-7); }
.testimonials__head { max-width: 40rem; margin-bottom: var(--sp-6); }
.testimonials__head h2 { font-size: var(--step-4); margin-top: var(--sp-2); }
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 860px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--sp-5);
}
.testimonial q {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  quotes: "\201E" "\201C";
}
.testimonial q::before { content: open-quote; color: var(--gold); }
.testimonial q::after { content: close-quote; color: var(--gold); }
/* Bewusst ohne text-transform: die Namen der Rezensent:innen bleiben exakt
   so stehen, wie sie in der Google-Rezension geschrieben sind. */
.testimonial cite {
  margin-top: auto;
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.testimonial cite b { font-weight: 600; color: var(--gold); }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact { padding-block: var(--sp-7); }

/* Abschließender Reservierungs-Block: bewusst als eigener, ruhiger Auftakt
   über den Detailinformationen, die Seite endet mit einer klaren Handlung. */
.contact__cta {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.contact__cta h2 { font-size: var(--step-4); margin-bottom: var(--sp-2); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 860px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
}
.contact-block { margin-bottom: var(--sp-4); }
.contact-block h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-1);
  font-weight: 600;
}
.contact-block address, .contact-block p { font-style: normal; color: var(--text-soft); }
.contact-block a.tel {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-decoration: none;
  color: var(--text);
  display: inline-block;
  transition: color 160ms var(--ease-out);
}
.contact-block a.tel:hover { color: var(--gold); }

.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-1); }
.hours-table td { padding-block: 0.3em; font-variant-numeric: tabular-nums; }
.hours-table td:first-child { color: var(--text-soft); }
.hours-table td:last-child { text-align: right; }

.map-link {
  position: relative;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
  text-decoration: none;
}
/* saturate() ist raus, seit hier eine echte Außenaufnahme statt eines
   Kartenausschnitts liegt, der Filter sollte nur den Platzhalter zurücknehmen
   und würde jetzt die warmen Lampen am Eingang ausbleichen. */
/* Seit hier die eigene Nachtaufnahme von der Strassenecke liegt, ist der
   Rahmen quer statt hoch: das Bild ist 3:2 und darf die ganze Spalte
   fuellen. Die alte Deckelung auf 382 px stammte vom vorherigen Foto aus
   dem Google-Profil, das real nur 382x510 px hatte und beim Vergroessern
   matschig geworden waere. Ausgeliefert werden 1200 px, also auch auf
   Displays mit doppelter Pixeldichte scharf. */
.map-link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.map-link__label {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  background: var(--gold-gradient);
  color: var(--ink-900);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.6em 1em;
  transition: transform 160ms var(--ease-out);
}
.map-link:hover .map-link__label { transform: translateY(-2px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink-850);
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  padding-block: var(--sp-6) var(--sp-5);
}
.site-footer__top {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .site-footer__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.site-footer__desc { max-width: 32ch; margin-top: var(--sp-3); font-size: var(--step--1); }
/* h2 statt h4: im Footer folgt auf die h2-Abschnitte des Inhalts
   sonst ein Sprung von h2 auf h4. Suchmaschinen lesen die Gliederung
   als Baum, uebersprungene Ebenen brechen ihn. Optisch identisch. */
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}
.site-footer ul { display: grid; gap: 0.5em; font-size: var(--step--1); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-dim);
}

/* ==========================================================================
   RECHTS-SEITEN (Impressum / Datenschutz)
   ========================================================================== */
.legal-page { padding-block: var(--sp-7); }
.legal-page h1 { font-size: var(--step-4); margin-bottom: var(--sp-5); }
.legal-page h2 {
  font-size: var(--step-1);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  color: var(--gold);
}
/* Der Datenschutztext bringt vier Ebenen mit. h2 ist gold und klein, deshalb
   staffeln sich h3 und h4 darunter ueber Farbe und Schriftart statt ueber die
   Groesse: h3 in der Display-Schrift, h4 in der Fliesstext-Schrift halbfett. */
.legal-page h3 {
  font-size: var(--step-0);
  color: var(--text);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.legal-page h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--text);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
}
.legal-page p, .legal-page li { color: var(--text-soft); max-width: 62ch; }
/* Global gilt * { margin: 0 }: Ueberschriften bringen ihren Abstand selbst mit,
   aufeinanderfolgende Absaetze und Listen brauchen ihn hier. */
.legal-page p + p,
.legal-page p + ul,
.legal-page ul + p { margin-top: var(--sp-2); }
.legal-page ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 0.4em; }
.legal-page a { color: var(--gold); }

/* ==========================================================================
   SCROLL-REVEAL (dezent, nur wo sinnvoll)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}