/* ============================================================
   Liebighof im Lehel
   Weisser Grund, Messing als Schriftfarbe, Creme-Block als Akzent.
   Farben aus den Bestandsfotos gemessen, Kontraste geprueft.

   TYPOGRAFIE: eine Skala, eine Laufweite fuer Versalien, drei
   Rollen. Keine Einzelwerte im Markup - alles ueber Tokens.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Farbe ------------------------------------------- */
  --weiss:      #FFFFFF;
  --papier:     #FBFAF7;
  --ink:        #33302B;      /* 13.1:1 auf Weiss */
  --ink-2:      #6A645C;      /* 5.9:1 */
  --ink-3:      #767063;      /* 4.9:1 auf Weiss, 4.7:1 auf Papier - traegt
                                 auch kleine Schrift (.leise, .klein, Reiter) */
  --linie:      #E4E0D8;
  --linie-2:    #CBC5B8;

  /* Schrift-Gold der Fassade (#C4A055), fuer Weiss vertieft.
     Zwei Stufen: kleine Versalien brauchen mehr Kontrast als
     eine 60-px-Antiqua. */
  --messing:      #9C7C3C;    /* 3.9:1 - Display ab 32 px */
  --messing-tief: #856A2E;    /* 5.1:1 auf Weiss, 4.6:1 auf dem Goldkopf */
  --messing-hell: #D0AE68;    /* 8.5:1 auf der Vertaefelung */

  /* Der klebende Kopf bekommt einen Goldschimmer statt Weiss - so
     hebt er sich vom Inhalt ab und traegt die Marke mit. Der Ton
     kostet Kontrast, deshalb ist --messing-tief entsprechend
     vertieft; beide Gruende sind damit abgedeckt. */
  --kopf-grund: #F8F2E4;
  --kopf-linie: #DDD3BC;

  --dunkel:       #21140E;    /* Vertaefelung, Messwert Schankraum -
                                  lebt im Hero-Verlauf und als
                                  Knopf-Grund weiter */
  --auf-dunkel:   #F1E7D8;    /* 14.7:1 - Knopftext auf --dunkel */

  /* Der Akzentblock: Creme statt Vertaefelung. Gepruefte Tochtertoene,
     da die tiefere Flaeche mehr Kontrast braucht als Weiss/Papier. */
  --creme-block:  #EFE6CC;
  --creme-akzent: #7A6127;    /* 4.7:1 - Labels, Links, Preise, Zeiten */
  --creme-gross:  #8F7134;    /* 3.7:1 - nur grosse Ueberschriften ab 24px */
  --creme-leise:  #6E6558;    /* 4.6:1 - gedaempfter Text */
  --creme-linie:  rgba(51,48,43,.18);

  --rot:        #8C3F35;      /* Markise */

  /* ---- Schrift ------------------------------------------ */
  --fraktur: 'UnifrakturMaguntia', Georgia, serif;
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Eine Skala. Vier Stufen im Fliessbereich, fuenf im Display.
     Cormorant hat eine kleine x-Hoehe und wird darum eine Spur
     groesser gesetzt als Archivo bei gleicher Wirkung. */
  --t-label: .72rem;
  --t-mini:  .8125rem;
  --t-klein: .9375rem;
  --t-body:  1rem;
  --t-lead:  1.1875rem;

  --d-xs: clamp(1.18rem, 1.9vw, 1.34rem);   /* Gerichtsnamen */
  --d-s:  clamp(1.55rem, 2.6vw, 2.05rem);   /* h3, und .titel--klein auf h2 */
  --d-m:  clamp(2.15rem, 4.8vw, 3.5rem);    /* h2 */
  --d-l:  clamp(2.5rem, 6vw, 4.4rem);       /* h1 Unterseiten */
  --d-xl: clamp(2.9rem, 8.5vw, 6rem);       /* Hero */

  --lh-display: 1.06;
  --lh-titel:   1.16;
  --lh-lead:    1.55;
  --lh-body:    1.7;
  --lh-label:   1.5;

  /* EINE Laufweite fuer alle Versalien. Vorher waren es sechs. */
  --ls-label:   .16em;
  --ls-display: .004em;

  /* ---- Abstaende ---------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;
  --s8: clamp(3.4rem, 8vw, 6rem);     /* Abschnittsluft */
  --s9: clamp(4.5rem, 11vw, 8.5rem);  /* Grossraum */

  --wrap: 1280px;
  --gut: clamp(1.15rem, 5vw, 3.5rem);
  --kopf-h: 4.6rem;
  --radius: 6px;   /* Knoepfe und Eingabefelder */

  /* Die Wortmarke ist ein Logotyp, kein Fliesstext - sie steht
     ausserhalb der --d-*-Skala. Drei bewusst verschiedene Groessen
     je Auftrittsort, hier benannt statt als verstreute Zahlen. */
  --logo-kopf:   2rem;     /* Hauptnavigation */
  --logo-mobil:  1.6rem;   /* schmale Kopfzeile */
  --logo-fuss:   1.7rem;   /* Signatur, nicht Navigation */
}

/* ---------- Grundlagen ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--messing-hell); color: var(--dunkel); }

:focus-visible { outline: 2px solid var(--messing-tief); outline-offset: 3px; }
.hero :focus-visible { outline-color: var(--messing-hell); }
.dunkel :focus-visible { outline-color: var(--creme-akzent); }

/* Sprungziele nicht unter den klebenden Kopf schieben */
[id] { scroll-margin-top: calc(var(--kopf-ist, var(--kopf-h)) + var(--s5)); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dunkel); color: var(--auf-dunkel);
  padding: var(--s3) var(--s4); font-weight: 600;
}
.skip:focus { left: var(--s2); top: var(--s2); }

/* ---------- Typografie ------------------------------------
   Drei Rollen, streng getrennt:
   1. LABEL  - Archivo, Versalien, --ls-label. Fuer alles Kleine:
      Augenbrauen, Navigation, Knoepfe, Pfeil-Links, Zeiten.
   2. DISPLAY- Cormorant 300 in Messing. Nur Ueberschriften und
      Gerichtsnamen.
   3. FLIESS - Archivo, gemischt. Alles Uebrige.               */

.label,
.nav a,
.knopf,
.pfeil,
.zeiten li,
.reiter a,
.fuss h3 {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: var(--lh-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.label { color: var(--messing-tief); margin: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  color: var(--messing);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--d-l); }
h2 { font-size: var(--d-m); }
h3 { font-size: var(--d-s); line-height: var(--lh-titel); }

/* Ebene und Groesse getrennt: eine Ueberschrift, die im Dokument
   auf h2-Ebene steht (Bandueberschriften, Kartengruppen), aber
   optisch die kleinere h3-Groesse tragen soll. Verhindert, dass
   die Groesse allein die Gliederungsebene bestimmt - ein h3 ohne
   umgebendes h2 verletzt sonst die Dokumentstruktur. */
.titel--klein { font-size: var(--d-s); line-height: var(--lh-titel); }

p { margin: 0; text-wrap: pretty; }
.fliess { color: var(--ink-2); max-width: 56ch; }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 52ch; }
.klein { font-size: var(--t-klein); }
.mini  { font-size: var(--t-mini); }
.leise { color: var(--ink-3); }

.wortmarke {
  font-family: var(--fraktur);
  font-weight: 400; line-height: 1;
  letter-spacing: .012em;
  color: var(--ink);
}

/* ---------- Textlink ---------------------------------------
   Ohne Zierstrich. Stattdessen eine feine Unterstreichung mit
   Abstand: Links duerfen nicht allein an der Farbe erkennbar
   sein (WCAG 1.4.1), und ein Unterstrich ist die erwartete
   Kennzeichnung - kein Schmuck. */
.pfeil {
  display: inline-block;
  color: var(--messing-tief);
  padding-block: var(--s1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: text-decoration-color .18s ease;
}
.pfeil:hover { text-decoration-color: currentColor; }
.pfeil--hell { color: var(--messing-hell); }

/* ---------- Knopf ------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.1rem;
  cursor: pointer; text-decoration: none;
  background: var(--dunkel); color: var(--auf-dunkel);
  border: 1px solid var(--dunkel); border-radius: var(--radius);
  transition: background-color .18s ease, border-color .18s ease;
}
/* Hover ist eine Schattierung derselben Erscheinung, keine Umkehrung:
   gefuellt bleibt gefuellt (nur dunkler/heller), Kontur bleibt Kontur
   (nur mit Schimmer). Sonst tauschen zwei nebeneinanderstehende
   Knoepfe beim Ueberfahren ihre Rolle - genau das war der Fehler:
   die Kontur sah im Hover wie der volle Primaerknopf aus. */
.knopf:hover { background: color-mix(in srgb, var(--dunkel) 84%, white 16%); }
.knopf--klein { padding: .62rem 1.15rem; }

/* Nur ueber dem Hero-Foto umgekehrt (dort verlangt der dunkle
   Fussverlauf des Bildes eine helle Fuellung). Im Creme-Block
   bleibt der Knopf beim Grundzustand: dunkel gefuellt auf hellem
   Grund - das braucht keine eigene Regel mehr. */
.knopf--hell {
  background: var(--messing-hell); color: var(--dunkel); border-color: var(--messing-hell);
}
.knopf--hell:hover {
  background: color-mix(in srgb, var(--messing-hell) 84%, black 16%);
}

/* Zweiter, nachgeordneter Knopf: gleiche Farbe, geringeres Gewicht.
   Rangfolge kommt aus gefuellt gegen Kontur, nicht aus zwei Farben -
   und bleibt es auch im Hover: die Kontur bekommt nur einen
   Schimmer, nie die volle deckende Flaeche des Primaerknopfs.
   Zwei Faerbungen: golden ueber dem Hero-Foto, erdig im Creme-Block. */
.knopf--kontur {
  background: transparent;
  color: var(--messing-hell);
  border-color: color-mix(in srgb, var(--messing-hell) 62%, transparent);
  backdrop-filter: blur(2px);
}
.knopf--kontur:hover {
  background: color-mix(in srgb, var(--messing-hell) 18%, transparent);
  border-color: var(--messing-hell);
}
.dunkel .knopf--kontur {
  color: var(--creme-akzent);
  border-color: color-mix(in srgb, var(--creme-akzent) 55%, transparent);
  backdrop-filter: none;
}
.dunkel .knopf--kontur:hover {
  background: color-mix(in srgb, var(--creme-akzent) 14%, transparent);
  border-color: var(--creme-akzent);
}

/* ---------- Kopf ------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 60;
  transition: background-color .25s ease, border-color .25s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.kopf__zeile {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--kopf-h);
}
.kopf__marke { display: flex; align-items: baseline; gap: .42em; text-decoration: none; margin-right: auto; }
/* Bruchschrift hat enge Punzen und wirkt bei gleicher Pixelgroesse
   kleiner als eine Grotesk. 2rem statt 1.7rem, dazu etwas mehr
   Laufweite - sonst laufen "e", "g" und "o" zu. */
.kopf__marke .wortmarke { font-size: var(--logo-kopf); letter-spacing: .02em; }
/* "im Lehel" steht am Haus in DERSELBEN Schrift wie der Name.
   Eine dritte Schriftart im Logo waere erfunden, nicht gefunden. */
/* Bewusst NICHT in Gold: das Gold im Kopf gehoert dem Knopf. Zwei
   goldene Dinge nebeneinander, und das Auge weiss nicht mehr, was
   die Handlung ist. Stattdessen ein Tonwert der Wortmarke - so
   bleibt "Liebighof im Lehel" eine Inschrift, wie am Haus, und die
   Rangfolge kommt allein aus der Groesse. */
.kopf__ort {
  font-family: var(--fraktur);
  font-size: .62em;
  font-style: normal;
  letter-spacing: .02em;
  color: #76726A;   /* 66 % der Wortmarke, 4.3:1 auf dem Goldkopf */
}
.kopf__marke .kopf__ort { font-size: 1.24rem; }

.nav { display: flex; align-items: center; gap: var(--s6); }
.nav a {
  text-decoration: none; color: var(--ink-2);
  padding-block: var(--s1);
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--messing-tief); border-bottom-color: currentColor; }

/* Ueber dem Hero: heller Kopf ohne Grund */
.kopf[data-oben="true"] .wortmarke,
.kopf[data-oben="true"] .kopf__ort,
.kopf[data-oben="true"] .nav a { color: #FFF; text-shadow: 0 1px 8px rgba(12,8,4,.5); }
.kopf[data-oben="true"] .nav a:hover, .kopf[data-oben="true"] .nav a[aria-current="page"] { color: var(--messing-hell); }
.kopf[data-oben="true"] .nav-knopf { color: #FFF; border-color: rgba(255,255,255,.5); }
.kopf[data-oben="true"] .kopf__cta {
  background: transparent; color: #FFF; border-color: rgba(255,255,255,.65);
  text-shadow: 0 1px 8px rgba(12,8,4,.5);
}
/* Der Knopf loest in BEIDEN Zustaenden nach Gold auf - so ist der
   Hover ueberall dieselbe Zusage. 8.5:1 Kontrast. */
.kopf[data-oben="true"] .kopf__cta:hover {
  background: var(--messing-hell); color: var(--dunkel);
  border-color: var(--messing-hell); text-shadow: none;
}
.kopf[data-oben="false"] .kopf__cta:hover {
  background: var(--messing-hell); color: var(--dunkel);
  border-color: var(--messing-hell);
}

/* Ohne Trennlinie: der Goldton und der Weichzeichner grenzen den
   Kopf bereits vom Inhalt ab, eine Haarlinie obendrauf ist doppelt. */
.kopf[data-oben="false"] {
  background: color-mix(in srgb, var(--kopf-grund) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: transparent;
}

.nav-knopf {
  display: none; background: none; cursor: pointer; line-height: 0;
  border: 1px solid var(--linie-2); color: var(--ink);
  padding: .55rem .62rem; border-radius: 1px;
}
.nav-knopf svg { width: 22px; height: 22px; display: block; }
.nav-knopf .zu { display: none; }
.nav-knopf[aria-expanded="true"] .auf { display: none; }
.nav-knopf[aria-expanded="true"] .zu { display: block; }

@media (max-width: 960px) {
  .nav-knopf { display: block; order: 3; }
  .kopf__zeile { flex-wrap: wrap; gap: var(--s3); padding-block: var(--s3); }
  /* Beiwort faellt weg, Wortmarke wird kleiner - sonst wird die
     Zeile neben Knopf und Menuegriff zu eng. */
  .kopf__ort { display: none; }
  .kopf__marke .wortmarke { font-size: var(--logo-mobil); }
  .kopf__cta { order: 2; }
  .nav {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; max-height: 0; overflow: hidden; transition: max-height .24s ease;
  }
  .nav[data-offen="true"] { max-height: 22rem; }
  .nav a { padding: var(--s3) 2px; border-bottom: 1px solid var(--linie); }
  .kopf[data-oben="true"] .nav a { border-bottom-color: rgba(255,255,255,.25); }

  /* Aufgeklapptes Menue: immer derselbe feste Grund, egal ob ueber
     dem Bild oder gescrollt. Muss NACH den data-oben-Regeln stehen -
     gleiche Spezifitaet, spaetere Position gewinnt. */
  .kopf[data-menue="true"] {
    background: var(--kopf-grund);
    border-bottom-color: var(--kopf-linie);
  }
  .kopf[data-menue="true"] .wortmarke { color: var(--ink); text-shadow: none; }
  .kopf[data-menue="true"] .kopf__ort { color: #76726A; text-shadow: none; }
  .kopf[data-menue="true"] .nav a {
    color: var(--ink-2); text-shadow: none; border-bottom-color: var(--linie);
  }
  .kopf[data-menue="true"] .nav a:hover,
  .kopf[data-menue="true"] .nav a[aria-current="page"] { color: var(--messing-tief); }
  .kopf[data-menue="true"] .nav-knopf { color: var(--ink); border-color: var(--linie-2); }
  .kopf[data-menue="true"] .kopf__cta {
    background: var(--dunkel); color: var(--auf-dunkel);
    border-color: var(--dunkel); text-shadow: none;
  }
  .kopf[data-menue="true"] .kopf__cta:hover {
    background: var(--messing-hell); color: var(--dunkel); border-color: var(--messing-hell);
  }
}

/* ---------- Hero ------------------------------------------
   Bildband, kein Vollbild. Zeile am unteren Rand.
   Ein Primaerknopf, ein leiser Pfeil - keine zwei Gleichen. */
.hero {
  position: relative;
  height: clamp(440px, 76vh, 720px);
  margin-top: calc(var(--kopf-h) * -1);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,9,5,.78) 0%, rgba(14,9,5,.30) 40%, rgba(14,9,5,0) 68%),
              linear-gradient(to bottom, rgba(14,9,5,.44) 0%, rgba(14,9,5,0) 24%);
}
.hero__zeile {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(2rem, 5vw, 3.6rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s3);
}
.hero__zeile .label { color: #FFF; opacity: .92; text-shadow: 0 1px 10px rgba(10,6,3,.8); }
.hero__zeile h1 {
  color: #FFFFFF;
  font-size: var(--d-xl);
  text-shadow: 0 2px 30px rgba(10,6,3,.5);
}
.hero__unter {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.1rem, 2.3vw, 1.6rem);
  line-height: 1.35;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 14px rgba(10,6,3,.75);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4) var(--s6);
  margin-top: var(--s3);
}
/* Handy: beide Knoepfe gleich breit statt am Text zu haengen -
   Standard-Muster (Apple HIG, Material). Der Block selbst bleibt
   linksbuendig mit Titel und Label, nur der Buttontext bleibt
   zentriert (schon in .knopf angelegt) - nichts wird als Ganzes
   mittig gesetzt. */
@media (max-width: 640px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
}

/* ---------- Abschnitte ------------------------------------ */
.abschnitt { padding-block: var(--s8); }
.abschnitt--papier { background: var(--papier); }
.abschnitt--flach { padding-block: var(--s6) var(--s7); }
.kopfblock { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s6); }

.reihe { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.reihe__text { display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 900px) {
  .reihe { grid-template-columns: 1fr 1fr; }
  /* Gespiegelt wird nur das Bild (fuer Rhythmus im Seitenverlauf).
     Der Text bleibt in JEDER Reihe linksbuendig - ein rechtsbuendiger
     Titel ueber linksbuendigem Fliesstext las sich als Versatz,
     nicht als Gestaltung. */
  .reihe--bild-links .reihe__bild { order: -1; }
}

/* Modifikator fuer hochformatige Fotos in einer .reihe (z.B. Gaststube):
   ohne Deckelung wuerde das Bild bei align-items:center trotzdem seine
   volle Hochformat-Hoehe beanspruchen und die Reihe unnoetig strecken. */
.reihe__bild--hoch img { max-height: 520px; width: auto; }

/* ---------- Creme-Block, drei Rollen ------------------------
   War die Vertaefelung (Schankraum bei Nacht), jetzt Creme -
   die dritte Flaeche neben Weiss und Papier, kraeftig genug fuer
   einen eigenen Block, ohne in Kontrast zum Hero-Foto zu gehen. */
.dunkel { background: var(--creme-block); color: var(--ink); }
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--creme-gross); }
.dunkel .label { color: var(--creme-akzent); }
.dunkel .fliess, .dunkel .lead { color: var(--ink-2); }
.dunkel .leise { color: var(--creme-leise); }
.dunkel .pfeil { color: var(--creme-akzent); }

/* Rolle 1: halbe Flaeche, stumpf ans Bild gestossen.
   Quelltext-Reihenfolge ist Text-dann-Bild (wie bei .reihe): auf dem
   Handy soll immer erst der Text kommen, nie das Bild. Auf dem
   Desktop zieht .halbblock__bild per order optisch wieder nach links -
   derselbe Trick wie bei .reihe--bild-links. */
.halbblock { display: grid; }
@media (min-width: 900px) {
  .halbblock { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .halbblock__bild { order: -1; }
}
.halbblock__bild { min-height: 300px; }
.halbblock__bild img { width: 100%; height: 100%; object-fit: cover; }
.halbblock__text {
  padding: var(--s8) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; gap: var(--s4); justify-content: center;
}

/* Rolle 2: schmales Band als Aufruf */
.band { padding-block: var(--s7); }
.band__inhalt { display: flex; flex-direction: column; gap: var(--s3); align-items: center; text-align: center; }
.band__inhalt .fliess { max-width: 50ch; }

/* Rolle 3: ganze Flaeche fuer die Reservierung */
.formblock { padding-block: var(--s8); }

/* ---------- Formularfelder ohne Kasten --------------------- */
.feld { display: flex; flex-direction: column; gap: var(--s1); }
.feld label {
  font-family: var(--sans);
  font-size: var(--t-mini); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--creme-akzent);
}
/* Pflichtfeld-Sternchen automatisch aus dem required-Attribut - keine
   doppelte Pflege von Markup und Kennzeichnung. Die Personenzahl
   (Stepper) hat immer einen Wert und bleibt darum ohne Sternchen. */
.feld:has(> input:required) > label::after,
.feld:has(> select:required) > label::after {
  content: " *"; color: var(--creme-akzent);
}
.feld input, .feld select, .feld textarea {
  font-family: var(--sans); font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--creme-linie);
  padding: var(--s2) 0; width: 100%; border-radius: 0;
  transition: border-color .15s ease;
}
.feld textarea { resize: vertical; }
.feld select option { background: var(--creme-block); color: var(--ink); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-bottom-color: var(--creme-akzent);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--creme-leise); }
/* Erst faerben, wenn das Feld verlassen wurde - nicht schon beim
   ersten Tippen, das liest sich sonst wie ein Vorwurf. */
.feld input:user-invalid, .feld select:user-invalid { border-bottom-color: var(--rot); }
.feld-reihe { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------- Reservierungsformular ---------------------------- */
.reservierung {
  display: flex; flex-direction: column; gap: var(--s6);
  max-width: 640px; margin-top: var(--s6);
}
/* [hidden] hat dieselbe Spezifitaet wie eine einzelne Klasse - ohne
   diese Regel gewinnt haeufig das eigene display:flex und das
   Formular bleibt sichtbar, obwohl hidden gesetzt ist. */
.reservierung[hidden], .formular-erfolg[hidden] { display: none; }
.formular-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.formular-gruppe legend.label { padding: 0; margin: 0 0 var(--s1); }
.formular-fuss { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

/* Personenzahl als Stepper statt Dropdown - der uebliche Griff bei
   Reservierungsformularen, direkter als eine Auswahlliste. */
.stepper { display: inline-flex; align-items: center; gap: var(--s3); padding-block: var(--s2); width: fit-content; }
.stepper__btn {
  width: 1.9rem; height: 1.9rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--creme-linie); border-radius: 50%;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.stepper__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--creme-akzent) 14%, transparent); border-color: var(--creme-akzent); }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper__wert {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--t-body); min-width: 1.4rem; text-align: center;
}

/* ---------- Erfolgsanzeige (Vorschau, ohne Backend) ----------- */
.formular-erfolg {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3);
  max-width: 640px; padding-block: var(--s7);
}
.formular-erfolg__icon {
  width: 2.6rem; height: 2.6rem; padding: .55rem; box-sizing: content-box;
  color: var(--creme-akzent); border: 1.5px solid var(--creme-akzent); border-radius: 50%;
}
.formular-erfolg__text { font-family: var(--display); font-weight: 400; font-size: var(--d-xs); color: var(--creme-gross); }

/* ---------- Karte -------------------------------------------- */
.karte-embed {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--creme-linie);
  filter: grayscale(.15) contrast(1.02);
}
.karte-embed--gross { aspect-ratio: 4 / 3; }
.karte-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Zeiten ----------------------------------------- */
.zeiten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.zeiten li { display: flex; align-items: baseline; gap: var(--s3); color: var(--messing-tief); }
.dunkel .zeiten li { color: var(--creme-akzent); }
.zeiten li::before { content: "•"; font-size: 1.1em; line-height: 1; }

/* ---------- Speisen ---------------------------------------- */
.gericht {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s5);
  padding-block: var(--s4); border-bottom: 1px solid var(--linie);
  align-items: baseline; text-align: left;
}
.gericht:last-child { border-bottom: 0; }
.gericht__name {
  font-family: var(--display); font-size: var(--d-xs); font-weight: 500;
  color: var(--ink); line-height: var(--lh-titel);
}
.gericht__preis {
  font-family: var(--sans); font-size: var(--t-klein); font-weight: 600;
  color: var(--messing-tief); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gericht__text { grid-column: 1 / -1; font-size: var(--t-klein); color: var(--ink-2); max-width: 60ch; }
.dunkel .gericht { border-bottom-color: var(--creme-linie); }
.dunkel .gericht__name { color: var(--ink); }
.dunkel .gericht__preis { color: var(--creme-akzent); }
.dunkel .gericht__text { color: var(--ink-2); }

.gruppe { margin-bottom: var(--s7); }
.gruppe > .label { margin-bottom: var(--s1); }
.gruppe > .titel--klein { margin-bottom: var(--s4); }

/* Die Karte ist lang (ueber 50 Gerichte). Damit man beim Scrollen nicht
   die Orientierung verliert, bleiben die Bereiche am Kopf haengen -
   auf schmalen Schirmen in einer Zeile, seitlich scrollbar statt
   umgebrochen, sonst frisst die Leiste den halben Bildschirm. */
.reiter {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  margin-bottom: var(--s7); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: var(--kopf-ist, var(--kopf-h)); z-index: 40;
  background: var(--weiss);
}
@media (max-width: 759px) {
  .reiter {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    /* bis an den Rand scrollen, ohne den Textsatz zu verlassen */
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    -webkit-overflow-scrolling: touch;
  }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter a { white-space: nowrap; }
}
.reiter a {
  text-decoration: none; color: var(--ink-3);
  padding-block: var(--s1); border-bottom: 1px solid transparent;
}
.reiter a:hover { color: var(--ink); }
.reiter a[aria-current="true"] { color: var(--messing-tief); border-bottom-color: currentColor; }
/* Der Unterstrich faellt nur dann mit der Trennlinie zusammen, wenn
   alles in einer Zeile steht. Beim Umbruch zoege der negative Rand
   die Linie quer durch die zweite Zeile. */
@media (min-width: 760px) {
  .reiter { gap: var(--s1) var(--s6); }
  .reiter a { margin-bottom: -.85rem; }
}

/* ---------- Partner -----------------------------------------
   Fuenf fremde Marken mit eigenen Farben - graustufig gehalten,
   damit sie sich dem System unterordnen statt dagegen anzutreten.
   Farbe erst bei Hover/Fokus, als kleine Belohnung fuers Hinsehen. */
.partner-reihe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s7) var(--s6);
}
.partner-reihe img {
  max-height: 68px; width: auto; max-width: 168px;
  filter: grayscale(1) opacity(.6);
  transition: filter .22s ease;
}
.partner-reihe img:hover, .partner-reihe img:focus-visible { filter: grayscale(0) opacity(1); }

/* ---------- Galerie ----------------------------------------
   Feste 3x2 statt auto-fit: bei genau 6 Bildern bleibt so jede
   Zeile voll, auto-fit hatte je nach Breite eine unvollstaendige
   letzte Zeile erzeugt (z.B. 4+2). */
.galerie { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .galerie { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Grosses Zitat ----------------------------------
   Wortlaut aus dem Selbstportraet des Hauses. */
.zitat-gross {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  line-height: 1.22;
  color: var(--messing);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.zitat-block { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.zitat-block .zitat-gross { margin-inline: auto; }

/* Kleinere Schwester fuer eingestreute Zitate (Gaestestimme unter
   dem Portraet) - eigene Rolle, kein Fliesstext mit Notbehelf-Stil. */
.zitat-klein {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.4;
  color: var(--messing);
}

/* ---------- Platzhalter ------------------------------------ */
.tbd {
  color: var(--messing-tief);
  border-bottom: 1.5px dashed currentColor;
  white-space: nowrap; cursor: help;
}
.hero .tbd { color: var(--messing-hell); }
.dunkel .tbd { color: var(--creme-akzent); }
.tbd::after {
  content: "?"; font-family: var(--sans); font-size: .62em; font-weight: 700;
  vertical-align: super; margin-left: .12em; opacity: .85;
}

/* ---------- Fuss -------------------------------------------- */
.fuss {
  background: var(--creme-block); color: var(--ink-2);
  padding-block: var(--s7) var(--s5);
}
.fuss .wortmarke { color: var(--ink); font-size: var(--logo-fuss); letter-spacing: .02em; }
.fuss__raster { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--s6); }
.fuss h3 { color: var(--creme-akzent); margin: 0 0 var(--s3); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.fuss a { color: var(--ink-2); text-decoration: none; font-size: var(--t-klein); }
.fuss a:hover { color: var(--creme-akzent); }

.fuss__social { display: flex; gap: var(--s4); padding-top: var(--s1); }
.icon-link { color: var(--ink-2); display: inline-flex; transition: color .18s ease; }
.icon-link:hover { color: var(--creme-akzent); }
.icon-link svg { width: 21px; height: 21px; }
.fuss__unten {
  border-top: 1px solid var(--creme-linie); padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); justify-content: space-between;
  font-size: var(--t-mini); color: var(--creme-leise);
}