/* === Schriften vom eigenen Server === */
/* Erzeugt von fonts-lokal.py. Die Dateien liegen in fonts/.
   Dadurch geht beim Seitenaufruf keine Anfrage mehr an Google. */

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-v33-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/karla-v33-latin_latin-ext-500.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/karla-v33-latin_latin-ext-600.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/karla-v33-latin_latin-ext-700.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/karla-v33-latin_latin-ext-800.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-v5-latin_latin-ext-italic.woff2") format("woff2");
}

/* ==========================================================================
   Gasthaus Lindenhof
   Farben, Typografie und Raster an einer Stelle. Alles Weitere leitet sich
   aus diesen Werten ab, damit Änderungen an einer Stelle genügen.
   ========================================================================== */

:root {
  /* Grundton: tiefes Marineblau. Das Wappenrot sitzt darauf besser als auf
     Gruen und deutlich kuehler als auf Braun.
     Zum Zurueckdrehen auf Braun: --grund #17120E, --grund-2 #211913,
     --grund-3 #2C221A, --grund-4 #3A2C21, Text hell #F5F0E6, leise #B3A79A. */
  --grund:   #0B1622;
  --grund-2: #14202D;
  --grund-3: #1B2A39;
  --grund-4: #26384A;

  /* Papier: exakt der Cremeton aus der Logodatei. Nur fuer die Karte. */
  --paper:    #FDFAF1;
  --paper-2:  #F2EBDC;

  /* Rot des Wappens, in drei Abstufungen fuer drei Untergruende */
  --wappen:      #DE3025;   /* Original, nur fuer Flaechen und Linien */
  --akzent:      #B31E15;   /* Schalter auf Creme, Ueberschriften der Karte */
  --akzent-hell: #F07068;   /* Text auf dunklem Grund, 6,3:1 */

  --oxblood:  #8C2B22;

  --text-hell:  #EAF1F7;
  --text-leise: #9DB0C0;
  --text-dunkel: #1C1712;
  --text-dunkel-leise: #6B5F52;

  --linie: rgba(234, 241, 247, 0.15);
  --linie-papier: rgba(28, 23, 18, 0.18);

  /* Ueberschriften in derselben Grotesk wie der Fliesstext, nur schwerer und
     enger gesetzt. Playfair Display SC setzt echte Kapitaelchen, das sah auf
     grossen Zeilen wie eine Urkunde aus und nicht wie die Vorlage. */
  --schrift-anzeige: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-text: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Großzügige Abstände (Dichte 3/10) */
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.5rem;
  --raum-5: 4rem;
  --raum-6: 6rem;
  --raum-7: 9rem;

  --breite: 76rem;
  --tempo: 220ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text-hell);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; }

p { margin: 0 0 var(--raum-2); max-width: 62ch; }

:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: var(--grund);
  padding: var(--raum-2) var(--raum-3);
  z-index: 200;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- Kopfzeile */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-3) clamp(1rem, 4vw, 3rem);
  transition: background var(--tempo) var(--kurve),
              padding var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
  border-bottom: 1px solid transparent;
}

.topbar.is-fest {
  background: rgba(16, 22, 15, 0.94);
  backdrop-filter: blur(10px);
  padding-top: var(--raum-2);
  padding-bottom: var(--raum-2);
  border-bottom-color: var(--linie);
}

.wordmark { text-decoration: none; display: block; }

.wordmark__name {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wordmark__sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-leise);
  margin-top: 2px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.nav__list a {
  text-decoration: none;
  padding: 0.6rem 0;
  display: inline-block;
  color: var(--text-hell);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.nav__list a:hover { border-bottom-color: var(--akzent); }

.nav__cta {
  border: 1px solid var(--akzent);
  border-radius: 999px;
  padding: 0.55rem 1.2rem !important;
  color: var(--akzent-hell) !important;
}
.nav__cta:hover {
  background: var(--akzent);
  color: var(--paper) !important;
  border-bottom-color: var(--akzent) !important;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: center;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-hell);
  transition: transform var(--tempo) var(--kurve), opacity var(--tempo) var(--kurve);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* -------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--raum-7) clamp(1rem, 4vw, 3rem) var(--raum-5);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--grund-2); }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.85);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--grund) 4%,
    rgba(16, 22, 15, 0.85) 38%,
    rgba(16, 22, 15, 0.35) 100%
  );
}

.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
}

/* Der eine auffällige Moment der Seite: der Live-Status */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--raum-3);
  padding: 0.4rem 1rem 0.4rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(16, 22, 15, 0.6);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-leise);
  flex: none;
}

.status.ist-offen .status__dot {
  background: var(--akzent-hell);
  box-shadow: 0 0 0 0 rgba(240, 112, 104, 0.65);
  animation: puls 2.6s infinite;
}

.status.ist-zu .status__dot { background: var(--oxblood); }

@keyframes puls {
  70%  { box-shadow: 0 0 0 9px rgba(240, 112, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 112, 104, 0); }
}

.hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  max-width: 18ch;
  margin-bottom: var(--raum-3);
}

.hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-leise);
  max-width: 46ch;
  margin-bottom: var(--raum-4);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--raum-2); }

/* ---------------------------------------------------------------- Schalter */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}

.btn--solid { background: var(--akzent); color: var(--paper); }
.btn--solid:hover { background: var(--wappen); }

.btn--ghost { border-color: var(--linie); color: var(--text-hell); }
.btn--ghost:hover { border-color: var(--akzent); color: var(--akzent-hell); }

/* --------------------------------------------------------------- Das Haus */

.haus {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-6) clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--raum-5);
  align-items: start;
}

.haus h2 { margin-bottom: var(--raum-3); }
.haus p { color: var(--text-leise); }

.fakten {
  margin: 0;
  border-top: 1px solid var(--linie);
}

.fakten > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-2) 0;
  border-bottom: 1px solid var(--linie);
}

.fakten dt { color: var(--text-leise); font-size: 0.95rem; }

.fakten dd {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--akzent-hell);
}

/* --------------------------------------------------------- Die Speisekarte */

.karte {
  padding: var(--raum-4) clamp(1rem, 4vw, 3rem) var(--raum-6);
}

.karte__blatt {
  max-width: var(--breite);
  margin: 0 auto;
  background: var(--paper);
  color: var(--text-dunkel);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 3px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
  /* Andeutung von Papierfaser, kein Bild nötig */
  background-image:
    repeating-linear-gradient(0deg, rgba(28,23,18,0.02) 0 1px, transparent 1px 3px);
}

.karte__kopf {
  text-align: center;
  padding-bottom: var(--raum-4);
  margin-bottom: var(--raum-4);
  border-bottom: 1px solid var(--linie-papier);
}

.karte__kopf h2 { color: var(--text-dunkel); }

.karte__stand {
  margin: var(--raum-1) auto 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--text-dunkel-leise);
}

.karte__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-5);
}

.gang h3 {
  color: var(--akzent);
  padding-bottom: var(--raum-1);
  margin-bottom: var(--raum-3);
  border-bottom: 1px solid var(--linie-papier);
}

.gang__zweit { margin-top: var(--raum-4); }

.gericht-liste { list-style: none; margin: 0; padding: 0; }

.gericht { margin-bottom: var(--raum-3); }

.gericht__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 2px;
  max-width: none;
}

.gericht__name { font-weight: 600; }

/* Punktlinie zwischen Gericht und Preis, wie auf einer gedruckten Karte */
.gericht__kopf::after {
  content: "";
  flex: 1 1 auto;
  order: 1;
  height: 0;
  border-bottom: 1px dotted rgba(28, 23, 18, 0.35);
  transform: translateY(-4px);
  min-width: 1rem;
}

.gericht__preis {
  order: 2;
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-dunkel);
}

.gericht__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dunkel-leise);
  max-width: none;
}

.gericht__kennz {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--linie-papier);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dunkel-leise);
  vertical-align: 1px;
}

.karte__fuss {
  margin: var(--raum-5) auto 0;
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie-papier);
  font-size: 0.85rem;
  color: var(--text-dunkel-leise);
  text-align: center;
  max-width: 60ch;
}

/* ------------------------------------------------------------------ Bilder */

.bilder {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem) var(--raum-6);
}

.bilder__titel { margin-bottom: var(--raum-4); }

.bilder__gitter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-2);
}

.bild {
  margin: 0;
  overflow: hidden;
  background: var(--grund-2);
  border-radius: 2px;
  aspect-ratio: 4 / 3;
}

.bild img { width: 100%; height: 100%; object-fit: cover; }

.bild--hoch { grid-row: span 2; aspect-ratio: 3 / 4; }
.bild--breit { grid-column: span 2; aspect-ratio: 16 / 9; }

/* ------------------------------------------------------- Zeiten & Anfahrt */

.finden {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) var(--raum-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--raum-5);
  align-items: start;
}

.finden h2 { margin-bottom: var(--raum-3); }
.finden__zweit { margin-top: var(--raum-5); }

.zeiten { width: 100%; border-collapse: collapse; font-size: 1rem; }

.zeiten th,
.zeiten td {
  text-align: left;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
  font-weight: 400;
}

.zeiten td { text-align: right; color: var(--text-leise); font-variant-numeric: tabular-nums; }

.zeiten tr.ist-heute th,
.zeiten tr.ist-heute td { color: var(--akzent-hell); font-weight: 600; }

.adresse { font-style: normal; margin-bottom: var(--raum-2); line-height: 1.8; }

.finden__hinweis { color: var(--text-leise); font-size: 0.95rem; margin-bottom: var(--raum-3); }

.finden__karte {
  border: 1px solid var(--linie);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--grund-2);
}

.finden__karte iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------ Reservierung */

.tisch {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) var(--raum-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--raum-5);
  align-items: start;
}

.tisch__intro h2 { margin-bottom: var(--raum-3); }
.tisch__intro p { color: var(--text-leise); }
.tisch__intro a { color: var(--akzent-hell); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-3);
}

.feld { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.4rem; }
.feld--halb { grid-column: span 1; }

.feld label { font-size: 0.9rem; letter-spacing: 0.04em; color: var(--text-leise); }

.feld__opt { color: var(--text-leise); opacity: 0.7; }

.feld input,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 3px;
  color: var(--text-hell);
  font-family: var(--schrift-text);
  font-size: 1rem;
  transition: border-color var(--tempo) var(--kurve);
}

.feld textarea { min-height: auto; resize: vertical; }

.feld input:hover,
.feld textarea:hover { border-color: rgba(242, 239, 231, 0.3); }

.feld input:focus,
.feld textarea:focus { border-color: var(--akzent); outline-offset: 1px; }

.feld input.ist-fehlerhaft { border-color: var(--oxblood); }

.fehler { margin: 0; font-size: 0.85rem; color: #E08A8A; }

.hilfe { margin: 0; font-size: 0.82rem; color: var(--text-leise); }

.datenschutz-hinweis {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-leise);
}
.datenschutz-hinweis a { color: var(--akzent-hell); }

.form .btn { grid-column: 1 / -1; justify-self: start; }

.form__antwort {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--raum-2) var(--raum-3);
  border-radius: 3px;
  border: 1px solid var(--akzent);
  background: rgba(240, 112, 104, 0.13);
  color: var(--akzent-hell);
  font-size: 0.95rem;
}

.form__antwort.ist-fehler {
  border-color: var(--oxblood);
  background: rgba(124, 42, 42, 0.16);
  color: #E8A5A5;
}

/* ---------------------------------------------------------------- Fußzeile */

.fuss {
  border-top: 1px solid var(--linie);
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-4);
  max-width: var(--breite);
  margin: 0 auto;
  font-size: 0.95rem;
  color: var(--text-leise);
}

.fuss p { margin: 0 0 0.35rem; }

.fuss__name {
  font-family: var(--schrift-anzeige);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-hell);
  margin-bottom: var(--raum-2) !important;
}

.fuss a { color: var(--text-leise); text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss a:hover { color: var(--akzent-hell); border-bottom-color: var(--akzent); }

/* ------------------------------------------------------------- Rechtstexte */

.recht {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--raum-7) clamp(1rem, 4vw, 3rem) var(--raum-6);
}

.recht h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--raum-4); }
.recht h2 { font-size: 1.4rem; margin: var(--raum-5) 0 var(--raum-2); }
.recht h3 { margin: var(--raum-3) 0 var(--raum-1); }
.recht p, .recht li { color: var(--text-leise); }
.recht a { color: var(--akzent-hell); }
.recht ul { padding-left: 1.2rem; }
.recht li { margin-bottom: 0.4rem; }

.zurueck {
  display: inline-block;
  margin-bottom: var(--raum-4);
  color: var(--text-leise);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.zurueck:hover { color: var(--akzent-hell); }

/* ------------------------------------------------------------ Umbruchpunkte */

@media (max-width: 60rem) {
  .haus,
  .finden,
  .tisch { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }

  .karte__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); }

  .bilder__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bild--hoch { grid-row: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 44rem) {
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    background: var(--grund-2);
    border-bottom: 1px solid var(--linie);
    padding: 5.5rem var(--raum-3) var(--raum-4);
    transform: translateY(-100%);
    /* visibility haelt das geschlossene Menue zuverlaessig verborgen. Allein
       auf das Hochschieben ist kein Verlass: sobald die Kopfzeile klebt,
       bekommt .topbar__innen einen backdrop-filter und wird damit zum Bezug
       fuer alles, was darin fixiert ist. Dann sitzt oben 0 nicht mehr am
       Bildschirmrand, und ein schmaler Streifen des Menues blieb sichtbar.
       Nebenbei nimmt das geschlossene Menue so auch keinen Tabstopp mehr. */
    visibility: hidden;
    transition: transform 280ms var(--kurve), visibility 0s linear 280ms;
    z-index: -1;
  }

  .nav.ist-offen {
    transform: translateY(0);
    visibility: visible;
    transition: transform 280ms var(--kurve), visibility 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: 1.1rem; }

  .nav__list li { border-bottom: 1px solid var(--linie); }
  .nav__list li:last-child { border-bottom: 0; padding-top: var(--raum-3); }

  .nav__list a { padding: 0.9rem 0; }

  .nav__cta { text-align: center; }

  .karte__spalten { grid-template-columns: minmax(0, 1fr); }

  .bilder__gitter { grid-template-columns: minmax(0, 1fr); }
  .bild--breit { grid-column: auto; }

  .form { grid-template-columns: minmax(0, 1fr); }
  .feld--halb { grid-column: 1 / -1; }

  .hero { min-height: 92svh; }
}

/* -------------------------------------------------------- Reduzierte Bewegung */

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

/* ------------------------------------------------------------------ Drucken */

@media print {
  .topbar, .hero__media, .hero__actions, .bilder, .finden__karte, .form, .fuss { display: none; }
  body { background: #fff; color: #000; }
  .karte__blatt { box-shadow: none; }
}

/* ==========================================================================
   Ergaenzungen fuer "Zur Stadt Mainz": Logo und Kartenreiter
   ========================================================================== */

/* ------------------------------------------------------------------- Logo */

.wordmark { display: flex; align-items: center; gap: 0.9rem; }

.wordmark__bild { height: 46px; width: auto; flex: none; transition: height var(--tempo) var(--kurve); }

.topbar.is-fest .wordmark__bild { height: 38px; }

.wordmark__sub {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--text-leise);
  white-space: nowrap;
}

.hero__logo {
  width: min(360px, 68vw);
  height: auto;
  margin-bottom: var(--raum-4);
}

.karte__logo { width: min(240px, 50vw); height: auto; margin: 0 auto var(--raum-3); }

/* --------------------------------------------------------- Kartenreiter */

.reiter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: var(--raum-4);
  border-bottom: 1px solid var(--linie-papier);
  padding-bottom: var(--raum-2);
}

.reiter__knopf {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  min-height: 44px;
  font-family: var(--schrift-text);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dunkel-leise);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.reiter__knopf:hover { background: var(--paper-2); color: var(--text-dunkel); }

.reiter__knopf[aria-selected="true"] {
  background: var(--akzent);
  color: var(--paper);
}

.reiter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.tafel[hidden] { display: none; }

/* Preisangabe fuer Gerichte mit Aufpreis, etwas leiser als der Hauptpreis */
.gericht__zusatz {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.15rem 0 0 0.9rem;
  font-size: 0.88rem;
  color: var(--text-dunkel-leise);
  max-width: none;
}

.gericht__zusatz span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zweispaltige Gaenge in der Karte, damit lange Listen nicht endlos werden */
.gang--breit { grid-column: 1 / -1; }

.gang--breit .gericht-liste {
  columns: 2;
  column-gap: var(--raum-5);
}

.gang--breit .gericht { break-inside: avoid; }

.karte__hinweis {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--raum-2) var(--raum-3);
  background: var(--paper-2);
  border-radius: 3px;
  font-size: 0.9rem;
  color: var(--text-dunkel-leise);
  max-width: none;
}

@media (max-width: 60rem) {
  .gang--breit .gericht-liste { columns: 1; }
}

@media (max-width: 44rem) {
  .wordmark__sub { display: none; }
  .wordmark__bild { height: 38px; }
  .reiter__knopf { padding: 0.6rem 1rem; font-size: 0.92rem; }
}

/* ==========================================================================
   Ebene 2: Glasflaechen, runde Karten, Chips, Akkordeon
   Struktur nach dem Vorbild moderner Produktseiten, Farben weiter aus dem
   Wappen. Nicht die Farbe macht den Unterschied, sondern die Tiefe.
   ========================================================================== */

:root {
  --glas:      rgba(255, 255, 255, 0.05);
  --glas-2:    rgba(255, 255, 255, 0.085);
  --glas-rand: rgba(255, 255, 255, 0.13);
  --glas-rand-hell: rgba(255, 255, 255, 0.22);

  --rund-s:  14px;
  --rund-m:  20px;
  --rund-l:  28px;
  --rund-xl: 34px;

  --schatten-tief: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

.glas {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

/* Weicher Lichtschein hinter den Abschnitten, damit der dunkle Grund
   nicht als flache Flaeche wirkt. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62rem 42rem at 12% -5%,  rgba(56, 122, 168, 0.20), transparent 62%),
    radial-gradient(52rem 38rem at 96% 18%,  rgba(222, 48, 37, 0.11), transparent 62%),
    radial-gradient(48rem 34rem at 52% 104%, rgba(38, 92, 132, 0.18), transparent 62%);
}

/* ------------------------------------------------------- Kopfzeile als Pille */

.topbar {
  padding-top: var(--raum-2);
  padding-bottom: var(--raum-2);
}

.topbar.is-fest {
  background: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.topbar__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}

.topbar.is-fest .topbar__innen {
  background: rgba(11, 22, 34, 0.74);
  border-color: var(--glas-rand);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--schatten-tief);
}

.nav__list a {
  border-bottom: 0;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.nav__list a:hover { background: var(--glas-2); border-bottom: 0; }

/* --------------------------------------------------------- Hero mit Karten */

.hero { align-items: center; padding-top: 7.5rem; padding-bottom: var(--raum-5); }

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--raum-5);
  align-items: center;
}

.hero__karten {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  align-items: stretch;
}

.hkarte {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--schatten-tief);
  padding: var(--raum-3);
}

/* Statuskarte: der eine auffaellige Moment der Seite */
.hkarte--status { display: flex; align-items: center; gap: var(--raum-2); }

.hkarte__ring {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(240, 112, 104, 0.14);
  border: 1px solid rgba(240, 112, 104, 0.4);
}

.hkarte__punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--text-leise); }

.hkarte--status.ist-offen .hkarte__ring {
  background: rgba(240, 112, 104, 0.2);
  border-color: rgba(240, 112, 104, 0.6);
}

.hkarte--status.ist-offen .hkarte__punkt {
  background: var(--akzent-hell);
  animation: puls 2.6s infinite;
}

.hkarte--status.ist-zu .hkarte__punkt { background: var(--text-leise); }

.hkarte__label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-leise);
}

.hkarte__wert { margin: 0; font-size: 1.05rem; font-weight: 600; max-width: none; }

/* Empfehlungskarte mit Bild */
.hkarte--tipp { padding: 0; overflow: hidden; }

.hkarte__bild { aspect-ratio: 16 / 9; background: var(--grund-2); }
.hkarte__bild img { width: 100%; height: 100%; object-fit: cover; }

.hkarte__text { padding: var(--raum-3); }

.hkarte__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-2);
  margin: 0.35rem 0 0;
  max-width: none;
}

.hkarte__name { font-family: var(--schrift-anzeige); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.hkarte__preis { color: var(--akzent-hell); font-weight: 600; font-variant-numeric: tabular-nums; }
.hkarte__note { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--text-leise); max-width: none; }

/* Kleine Fakten als Chips */
.hchips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.hchip {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-leise);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero__title { letter-spacing: -0.015em; }

.btn { border-radius: 999px; }

.btn--solid { box-shadow: 0 12px 30px -12px rgba(179, 30, 21, 0.9); }

.btn--glas {
  background: var(--glas);
  border-color: var(--glas-rand);
  color: var(--text-hell);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--glas:hover { background: var(--glas-2); border-color: var(--glas-rand-hell); }

/* --------------------------------------------------------------- Highlights */

.highlights {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem) var(--raum-4);
}

.abschnitt__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-3);
  margin-bottom: var(--raum-4);
  flex-wrap: wrap;
}

.abschnitt__kopf p { margin: 0.5rem 0 0; color: var(--text-leise); }

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--raum-2);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--text-leise);
}

.reihe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 1fr);
  gap: var(--raum-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--raum-2);
  scrollbar-width: thin;
  scrollbar-color: var(--glas-rand) transparent;
}

.reihe::-webkit-scrollbar { height: 6px; }
.reihe::-webkit-scrollbar-thumb { background: var(--glas-rand); border-radius: 999px; }

.tkarte {
  scroll-snap-align: start;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

.tkarte:hover { border-color: var(--glas-rand-hell); transform: translateY(-3px); }

.tkarte__bild { aspect-ratio: 4 / 3; background: var(--grund-2); position: relative; }
.tkarte__bild img { width: 100%; height: 100%; object-fit: cover; }

.tkarte__marke {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(11, 22, 34, 0.74);
  border: 1px solid var(--glas-rand);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.76rem;
  color: var(--text-hell);
}

.tkarte__text { padding: var(--raum-3); }
.tkarte__text h3 { margin-bottom: 0.3rem; }
.tkarte__text p { margin: 0; font-size: 0.92rem; color: var(--text-leise); }

.tkarte__fuss {
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
}

.tkarte__preis { color: var(--akzent-hell); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- Filterchips der Karte */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: var(--raum-4);
}

.filter__knopf {
  appearance: none;
  border: 1px solid var(--linie-papier);
  background: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  min-height: 44px;
  font-family: var(--schrift-text);
  font-size: 0.92rem;
  color: var(--text-dunkel-leise);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}

.filter__knopf:hover { background: var(--paper-2); color: var(--text-dunkel); }

.filter__knopf[aria-pressed="true"] {
  background: var(--text-dunkel);
  border-color: var(--text-dunkel);
  color: var(--paper);
}

.gericht[hidden] { display: none; }
.gang[hidden] { display: none; }

.filter__leer {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dunkel-leise);
  padding: var(--raum-4) 0;
  max-width: none;
}

/* Runder, weicher: Karte und Reiter */
.karte__blatt { border-radius: var(--rund-xl); }
.reiter__knopf { border-radius: 999px; }

/* ----------------------------------------------------------------- Stimmen */

.stimmen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem);
}

.stimmen__gitter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-2);
}

.stimme {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  padding: var(--raum-3);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.stimme__kopf { display: flex; align-items: center; gap: 0.75rem; }

.stimme__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(222, 48, 37, 0.16);
  border: 1px solid rgba(222, 48, 37, 0.35);
  font-family: var(--schrift-anzeige);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--akzent-hell);
}

.stimme__name { margin: 0; font-weight: 600; max-width: none; }
.stimme__quelle { margin: 0; font-size: 0.8rem; color: var(--text-leise); max-width: none; }
.stimme__text { margin: 0; color: var(--text-leise); font-size: 0.95rem; max-width: none; }

.sterne { display: flex; gap: 2px; color: var(--akzent-hell); }
.sterne svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Akkordeon */

.fragen {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem) var(--raum-6);
}

.frage {
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-m);
  background: var(--glas);
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.frage__knopf {
  appearance: none;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  padding: 1.05rem var(--raum-3);
  min-height: 56px;
  font-family: var(--schrift-text);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-hell);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve);
}

.frage__knopf:hover { background: var(--glas-2); }

.frage__zeichen {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glas-rand);
  color: var(--akzent-hell);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}

.frage__knopf[aria-expanded="true"] .frage__zeichen {
  transform: rotate(45deg);
  background: rgba(240, 112, 104, 0.16);
}

.frage__inhalt { padding: 0 var(--raum-3) var(--raum-3); }
.frage__inhalt p { margin: 0; color: var(--text-leise); }
.frage__inhalt[hidden] { display: none; }

/* ------------------------------------------------- Runde Ecken ueberall sonst */

.bild, .finden__karte { border-radius: var(--rund-m); }
.feld input, .feld textarea { border-radius: var(--rund-s); }
.form__antwort { border-radius: var(--rund-s); }

.fakten {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  padding: var(--raum-2) var(--raum-3);
  border-top: 1px solid var(--glas-rand);
}

.fakten > div:last-child { border-bottom: 0; }

.tisch__intro, .finden__spalte { position: relative; }

/* ------------------------------------------------------------ Umbruchpunkte */

@media (max-width: 68rem) {
  .hero__body { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .hero { align-items: flex-end; padding-top: 8rem; }
  .hero__karten { flex-direction: row; flex-wrap: wrap; }
  .hkarte--status { flex: 1 1 16rem; }
  .hkarte--tipp { flex: 1 1 18rem; max-width: 24rem; }
  .hchips { flex-basis: 100%; }
  .stimmen__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .topbar__innen { padding-left: 0.75rem; }
  .hero__karten { flex-direction: column; }
  .hkarte--tipp { max-width: none; }
  .stimmen__gitter { grid-template-columns: minmax(0, 1fr); }
  .reihe { grid-auto-columns: minmax(15.5rem, 1fr); }
  .abschnitt__kopf { align-items: flex-start; }
}

/* Sprungziele nicht unter die schwebende Kopfzeile schieben */
section[id], main[id] { scroll-margin-top: 6.5rem; }

/* Fragen zentriert, damit sie nicht linkslastig stehen */
.fragen .abschnitt__kopf { justify-content: center; text-align: center; }
.fragen .abschnitt__kopf > div { max-width: 34rem; }
.fragen .eyebrow { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------- Sprachumschalter */

.sprache {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  flex: none;
}

.sprache__knopf {
  appearance: none;
  border: 0;
  background: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  font-family: var(--schrift-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-leise);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.sprache__knopf:hover { color: var(--text-hell); }

.sprache__knopf[aria-pressed="true"], .sprache__knopf.ist-aktiv {
  background: var(--glas-2);
  color: var(--text-hell);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
}

.sprache__knopf:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
a.sprache__knopf { text-decoration: none; }
span.sprache__knopf { cursor: default; }

@media (max-width: 44rem) {
  .sprache { margin-left: auto; }
  .sprache__knopf { min-width: 40px; min-height: 40px; padding: 0 0.55rem; }
}

/* ==========================================================================
   Ebene 3: Hero als gerahmtes Bild mit schwebenden Karten
   Ersetzt die frueheren Hero-Regeln. Steht bewusst am Ende der Datei.
   ========================================================================== */

.hero {
  min-height: auto;
  display: block;
  padding: 5.5rem clamp(0.6rem, 1.6vw, 1.1rem) 0;
  overflow: visible;
}

.hero::after { content: none; }

.hero__rahmen {
  position: relative;
  isolation: isolate;
  border-radius: var(--rund-xl);
  overflow: hidden;
  min-height: min(46rem, calc(100svh - 6.5rem));
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--glas-rand);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--grund-2); }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
}

/* Zwei Verlaeufe: einer von links fuer die Schrift, einer von unten */
.hero__rahmen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(11, 22, 34, 0.94) 0%, rgba(11, 22, 34, 0.72) 34%,
                    rgba(11, 22, 34, 0.28) 62%, rgba(11, 22, 34, 0.42) 100%),
    linear-gradient(to top, rgba(11, 22, 34, 0.82) 0%, transparent 45%);
}

.hero__inhalt { position: relative; z-index: 2; max-width: 34rem; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--raum-3);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-hell);
  max-width: none;
}

.hero__eyebrow span { color: var(--akzent-hell); font-size: 0.7rem; }

.hero__title {
  font-size: clamp(2rem, 4.1vw, 3.45rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
  max-width: none;
  margin-bottom: var(--raum-3);
}

.hero__lede {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--text-leise);
  max-width: 30rem;
  margin-bottom: var(--raum-4);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* --------------------------------------------- Schwebende Karten im Hero */

.hkarte--schwebt { position: absolute; z-index: 3; }

.hkarte--oben  { top: clamp(1.5rem, 4vw, 3.5rem); right: clamp(1.5rem, 4vw, 3.5rem); max-width: 24rem; }
.hkarte--mitte { top: 50%; right: clamp(1.5rem, 4vw, 3.5rem); transform: translateY(-38%); width: 19rem; }
.hkarte--unten { bottom: clamp(1.5rem, 4vw, 3.5rem); right: clamp(1.5rem, 4vw, 3.5rem); }

.hkarte--unten { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; max-width: 26rem; }

/* --------------------------------------------------------- Kopfzeile oben */

.topbar { padding-top: 0.9rem; }
.topbar__innen { max-width: calc(var(--breite) + 4rem); }

/* ------------------------------------------------------------ Bis 1100 px */

@media (max-width: 68rem) {
  .hero { padding-top: 5rem; }

  .hero__rahmen {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding-top: 16rem;
  }

  .hero__rahmen::before {
    background:
      linear-gradient(to top, rgba(11, 22, 34, 0.96) 0%, rgba(11, 22, 34, 0.86) 34%,
                      rgba(11, 22, 34, 0.30) 78%, rgba(11, 22, 34, 0.45) 100%);
  }

  .hero__inhalt { max-width: none; }

  /* Karten wieder in den Fluss, unter dem Text */
  .hkarte--schwebt {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin-top: var(--raum-2);
  }

  .hkarte--unten { justify-content: flex-start; }
}

/* --------------------------------------------------------- Bis 700 px */

@media (max-width: 44rem) {
  .hero { padding: 4.6rem 0.55rem 0; }

  .hero__rahmen {
    border-radius: var(--rund-l);
    padding: 11rem 1.1rem 1.1rem;
    min-height: calc(100svh - 5.6rem);
  }

  .hero__eyebrow { font-size: 0.76rem; padding: 0.38rem 0.85rem; }

  .hero__title { font-size: clamp(2rem, 8.6vw, 2.7rem); }

  .hero__lede { font-size: 1rem; margin-bottom: var(--raum-3); }

  .hero__actions { gap: 0.55rem; }
  .hero__actions .btn { flex: 1 1 100%; }

  .hkarte { padding: 1rem; border-radius: var(--rund-m); }
  .hkarte--tipp { padding: 0; }
  .hkarte__wert { font-size: 0.98rem; }

  /* Chips als eine Zeile, die seitlich scrollt statt umzubrechen */
  .hkarte--unten {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .hkarte--unten::-webkit-scrollbar { display: none; }
  .hchip { white-space: nowrap; flex: none; }
}

/* Feinschliff Hero */

.btn { gap: 0.45rem; }
.btn span[aria-hidden] { font-size: 0.9em; }

.hero__inhalt { max-width: 47rem; }
.hero__title { max-width: none; }
.hkarte--unten { max-width: 32rem; }

@media (max-width: 68rem) {
  .hero__inhalt { max-width: none; }
  .hero__title { max-width: none; }
}

@media (max-width: 44rem) {
  .hero__rahmen { padding-top: 8.5rem; }
  .hero__title { max-width: none; }
  .hero__title br { display: none; }
  .hero__lede { max-width: none; }
}

/* Tippziele auf dem Handy vergroessern */

@media (max-width: 44rem) {
  .fuss a,
  .tisch__intro a,
  .datenschutz-hinweis a,
  .finden a:not(.btn) {
    display: inline-block;
    padding: 0.6rem 0;
    min-height: 44px;
    line-height: 1.6;
  }

  .fuss__block p { margin-bottom: 0; }

  .wordmark { min-height: 44px; display: flex; align-items: center; }
  .wordmark__bild { height: 34px; }

  /* Reihe darf am Rand ausbrechen, damit die Karten angeschnitten sind
     und man sieht, dass es weitergeht */
  .highlights { padding-left: 0; padding-right: 0; }
  .highlights .abschnitt__kopf { padding: 0 1rem; }
  .reihe { padding-left: 1rem; padding-right: 1rem; grid-auto-columns: minmax(15rem, 78vw); }
}

/* Zwischen 1100 und 1300 px wird der Rahmen zu schmal fuer Text und Karten
   nebeneinander. Dort schrumpft die Textspalte, statt dass sich beides
   ueberlagert. */
@media (max-width: 82rem) and (min-width: 68.0625rem) {
  .hero__inhalt { max-width: min(47rem, calc(100% - 23rem)); }
  .hero__title { font-size: clamp(1.9rem, 3.5vw, 2.9rem); }
  .hkarte--mitte { width: 17.5rem; }
  .hkarte--oben { max-width: 20rem; }
}

/* ==========================================================================
   Anlass-Slider und Kontaktabschnitt
   ========================================================================== */

.anlaesse {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem) var(--raum-4);
}

.slider__pfeile { display: flex; gap: 0.5rem; flex: none; }

.slider__pfeil {
  appearance: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--glas-rand);
  background: var(--glas);
  color: var(--text-hell);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
              opacity var(--tempo) var(--kurve);
}

.slider__pfeil:hover { background: var(--glas-2); border-color: var(--glas-rand-hell); }
.slider__pfeil[disabled] { opacity: 0.35; cursor: default; }

.reihe--anlass { grid-auto-columns: minmax(21rem, 1fr); }

.akarte {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  overflow: hidden;
  transition: border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

.akarte:hover { border-color: var(--glas-rand-hell); transform: translateY(-3px); }

.akarte__bild { position: relative; aspect-ratio: 16 / 10; background: var(--grund-2); }
.akarte__bild img { width: 100%; height: 100%; object-fit: cover; }

.akarte__text {
  padding: var(--raum-3);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
}

.akarte__text h3 { margin: 0; font-size: 1.25rem; }
.akarte__text > p { margin: 0; font-size: 0.94rem; color: var(--text-leise); max-width: none; }

.akarte__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-leise);
}

.akarte__liste li { position: relative; padding-left: 1.15rem; }

.akarte__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent-hell);
}

.akarte__aktionen {
  margin-top: auto;
  padding-top: var(--raum-2);
  display: flex;
  gap: 0.5rem;
}

.btn--klein {
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  font-size: 0.92rem;
  flex: 1 1 0;
}

/* Hervorheben, wenn aus einer Karte heraus angefragt wurde */
.feld--markiert select,
.feld--markiert input {
  border-color: var(--akzent-hell);
  box-shadow: 0 0 0 3px rgba(240, 112, 104, 0.16);
}

/* Auswahlfeld wie die uebrigen Felder */
.feld select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 2.4rem 0.75rem 1rem;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--rund-s);
  color: var(--text-hell);
  font-family: var(--schrift-text);
  font-size: 1rem;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
                    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.85rem) 1.35rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--tempo) var(--kurve);
}

.feld select:hover { border-color: rgba(234, 241, 247, 0.3); }
.feld select:focus { border-color: var(--akzent-hell); }
.feld select option { background: var(--grund-2); color: var(--text-hell); }

@media (max-width: 68rem) {
  .slider__pfeile { display: none; }
}

@media (max-width: 44rem) {
  .akarte__aktionen { flex-direction: column; }
  .btn--klein { flex: none; width: 100%; }
  .anlass.ist-aktiv { margin-left: -0.6rem; margin-right: -0.6rem; }
}

/* ==========================================================================
   Ebene 4: helles Thema
   Die Seite steht auf Weiss, der Startbereich bleibt eine dunkle Karte.
   Alles Weitere leitet sich wie bisher aus den Variablen ab.
   ========================================================================== */

:root {
  --grund:   #FBFBF9;   /* Seite */
  --grund-2: #F4F3F0;   /* ruhige Flaechen */
  --grund-3: #EBEAE6;
  --grund-4: #DEDCD6;

  --text-hell:  #14181C;   /* Name historisch, jetzt der dunkle Fliesstext */
  --text-leise: #5F6469;

  --akzent:      #B31E15;
  --akzent-hell: #B31E15;
  --wappen:      #DE3025;

  --linie: rgba(20, 24, 28, 0.11);

  --glas:      rgba(255, 255, 255, 0.72);
  --glas-2:    rgba(255, 255, 255, 0.92);
  --glas-rand: rgba(20, 24, 28, 0.10);
  --glas-rand-hell: rgba(20, 24, 28, 0.20);

  --schatten-tief: 0 18px 44px -22px rgba(20, 24, 28, 0.28);

  --dunkel:      #0B1622;   /* fuer Flaechen, die dunkel bleiben */
  --dunkel-text: #EAF1F7;
  --dunkel-leise:#9DB0C0;
  --dunkel-rand: rgba(255, 255, 255, 0.14);

  --schrift-kursiv: "Instrument Serif", Georgia, serif;

  --raum-6: 7rem;
  --raum-7: 10rem;
}

body { background: var(--grund); color: var(--text-hell); }

/* Farbschleier weg, die helle Seite bleibt ruhig */
body::before { content: none; }

/* Zweite Zeile der Ueberschriften kursiv, wie in der Vorlage */
.kursiv {
  display: block;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-leise);
}

h2 .kursiv { font-size: 1.02em; }

.eyebrow {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--raum-2);
}

/* --------------------------------------------------------------- Kopfzeile */

.topbar__innen { background: none; }

.topbar.is-fest .topbar__innen {
  background: rgba(251, 251, 249, 0.82);
  border-color: var(--glas-rand);
  box-shadow: 0 10px 30px -18px rgba(20, 24, 28, 0.35);
}

.nav__list a { color: var(--text-hell); }
.nav__list a:hover { background: var(--grund-2); }

.nav__cta { border-color: var(--akzent); color: var(--akzent) !important; }
.nav__cta:hover { background: var(--akzent); color: #fff !important; }

.sprache { background: var(--grund-2); border-color: var(--glas-rand); }
.sprache__knopf { color: var(--text-leise); }
.sprache__knopf:hover { color: var(--text-hell); }
.sprache__knopf[aria-pressed="true"], .sprache__knopf.ist-aktiv { background: #fff; color: var(--text-hell); }

.burger span { background: var(--text-hell); }

/* ------------------------------------------------------- Startbereich dunkel */

.hero { padding-top: 6rem; }

.hero__rahmen {
  border-color: transparent;
  background: var(--dunkel);
  color: var(--dunkel-text);
  box-shadow: 0 30px 70px -40px rgba(20, 24, 28, 0.55);
  padding-bottom: 6.5rem;
}

.hero__inhalt,
.hero__inhalt .hero__title { color: var(--dunkel-text); }
.hero__lede { color: var(--dunkel-leise); }

.hero__eyebrow {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--dunkel-rand);
  color: var(--dunkel-text);
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  font-weight: 400;
  padding: 0.45rem 1rem;
  margin-bottom: var(--raum-3);
}
.hero__eyebrow span { color: #F0837A; }

.hkarte--schwebt {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--dunkel-rand);
  color: var(--dunkel-text);
}

.hkarte--schwebt .hkarte__label,
.hkarte--schwebt .hkarte__note { color: var(--dunkel-leise); }
.hkarte--schwebt .hkarte__preis { color: #F0837A; }
.hkarte--status.ist-offen .hkarte__punkt { background: #F0837A; }

.hchip {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--dunkel-rand);
  color: var(--dunkel-leise);
}

.btn--glas {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--dunkel-rand);
  color: var(--dunkel-text);
}
.btn--glas:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255,255,255,0.34); }

/* Ausserhalb des dunklen Rahmens sieht der Glasschalter hell aus */
.abschnitt__kopf .btn--glas,
.akarte .btn--glas {
  background: #fff;
  border-color: var(--glas-rand);
  color: var(--text-hell);
}
.abschnitt__kopf .btn--glas:hover,
.akarte .btn--glas:hover { background: var(--grund-2); border-color: var(--glas-rand-hell); }

.btn--solid { background: var(--akzent); color: #fff; box-shadow: none; }
.btn--solid:hover { background: var(--wappen); }

/* Aussparung unten in der Mitte mit rundem Schalter, wie in der Vorlage */

/* Pille mittig am unteren Rand der Startkarte, wie der Sprungpunkt in der
   Vorlage. Bewusst innerhalb des Rahmens, damit nichts abgeschnitten wird. */
.hero__notch {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 2.4vw, 2rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.42rem 0.42rem 0.42rem 1.5rem;
  border-radius: 999px;
  background: var(--grund);
  color: var(--text-hell);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.96rem;
  white-space: nowrap;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.hero__notch:hover { transform: translateX(-50%) translateY(-2px); }

.hero__notch span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 1rem;
  transition: background var(--tempo) var(--kurve);
}

.hero__notch:hover span { background: var(--wappen); }

/* ------------------------------------------------------------- Karten hell */

.tkarte, .akarte, .stimme, .frage, .fakten {
  background: #fff;
  border-color: var(--glas-rand);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 30px -24px rgba(20, 24, 28, 0.4);
}

.tkarte:hover, .akarte:hover { border-color: var(--glas-rand-hell); }

.tkarte__bild, .akarte__bild, .bild, .hkarte__bild, .finden__karte { background: var(--grund-3); }

.tkarte__marke {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(20, 24, 28, 0.08);
  color: var(--text-hell);
}

.tkarte__preis, .akarte__liste li::before { color: var(--akzent); }
.akarte__liste li::before { background: var(--akzent); }

.frage__knopf { color: var(--text-hell); }
.frage__knopf:hover { background: var(--grund-2); }
.frage__zeichen { border-color: var(--glas-rand); color: var(--akzent); }
.frage__knopf[aria-expanded="true"] .frage__zeichen { background: rgba(179, 30, 21, 0.08); }

.stimme__avatar {
  background: rgba(179, 30, 21, 0.08);
  border-color: rgba(179, 30, 21, 0.22);
  color: var(--akzent);
}

.slider__pfeil { background: #fff; border-color: var(--glas-rand); color: var(--text-hell); }
.slider__pfeil:hover { background: var(--grund-2); }

.fakten dd { color: var(--akzent); }

/* --------------------------------------------------------- Speisekarte hell */

.karte__blatt {
  background: #fff;
  background-image: none;
  color: var(--text-hell);
  border: 1px solid var(--glas-rand);
  box-shadow: 0 30px 70px -50px rgba(20, 24, 28, 0.45);
}

.karte__kopf { border-bottom-color: var(--linie); }
.karte__kopf h2, .gericht__preis, .gericht__name { color: var(--text-hell); }
.karte__stand, .gericht__note, .karte__fuss, .gericht__kennz, .gericht__zusatz { color: var(--text-leise); }
.gericht__kennz { border-color: var(--linie); }
.gericht__kopf::after { border-bottom-color: rgba(20, 24, 28, 0.28); }
.gang h3 { color: var(--akzent); border-bottom-color: var(--linie); }
.karte__fuss { border-top-color: var(--linie); }
.reiter { border-bottom-color: var(--linie); }
.reiter__knopf { color: var(--text-leise); }
.reiter__knopf:hover { background: var(--grund-2); color: var(--text-hell); }
.reiter__knopf[aria-selected="true"] { background: var(--text-hell); color: #fff; }
.filter__knopf { border-color: var(--linie); color: var(--text-leise); }
.filter__knopf:hover { background: var(--grund-2); color: var(--text-hell); }
.filter__knopf[aria-pressed="true"] { background: var(--text-hell); border-color: var(--text-hell); color: #fff; }
.karte__hinweis { background: var(--grund-2); color: var(--text-leise); }
.filter__leer { color: var(--text-leise); }

/* ------------------------------------------------------------- Formular hell */

.feld input, .feld textarea, .feld select {
  background: #fff;
  border-color: var(--glas-rand);
  color: var(--text-hell);
}
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: var(--glas-rand-hell); }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--akzent); }
.feld select option { background: #fff; color: var(--text-hell); }
.feld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
                    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
}
.form__antwort { background: rgba(179, 30, 21, 0.06); border-color: var(--akzent); color: var(--akzent); }
.fehler { color: #A3231A; }

/* ------------------------------------------------------------ Zeiten, Fuss */

.zeiten th, .zeiten td { border-bottom-color: var(--linie); }
.zeiten tr.ist-heute th, .zeiten tr.ist-heute td { color: var(--akzent); }
.finden__karte { border-color: var(--glas-rand); }

.fuss { border-top-color: var(--linie); color: var(--text-leise); }
.fuss a { border-bottom-color: var(--linie); }
.fuss a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }
.fuss__name { color: var(--text-hell); }

.recht p, .recht li { color: var(--text-leise); }
.recht a, .tisch__intro a, .datenschutz-hinweis a { color: var(--akzent); }
.zurueck { border-bottom-color: var(--linie); }

.skip { background: var(--akzent); color: #fff; }

/* Das helle Logo nur noch im dunklen Rahmen, sonst die dunkle Fassung */


@media (max-width: 44rem) {
  .hero { padding-top: 4.6rem; }
  .hero__rahmen { padding-bottom: 5.5rem; }
  .hero__notch { font-size: 0.92rem; padding-left: 1.2rem; }
  .hero__notch span { width: 38px; height: 38px; }
}

/* ------------------------------------------------------- Kennzahlen im Hero */

.hstats { display: flex; gap: 0.6rem; background: none; border: 0; padding: 0; }

.hstat {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid var(--dunkel-rand);
  border-radius: var(--rund-m);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.85rem 1.15rem;
  min-width: 8.5rem;
}

.hstat__zahl {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--dunkel-text);
  max-width: none;
}

.hstat__zahl span { font-size: 0.6em; font-weight: 500; margin-left: 0.1em; }

.hstat__label {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dunkel-leise);
  max-width: none;
}

/* --------------------------------------------------------------- Bento */

.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 15rem 15rem;
  gap: 0.75rem;
}

.bento__feld {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rund-m);
  background: var(--grund-3);
}

.bento__feld--gross { grid-row: span 2; }

.bento__feld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--kurve);
}

.bento__feld:hover img { transform: scale(1.04); }

.bento__feld figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: linear-gradient(to top, rgba(11, 22, 34, 0.82), transparent);
  color: #fff;
}

.bento__titel { font-weight: 700; letter-spacing: -0.01em; }
.bento__note { font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); }

@media (max-width: 60rem) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 13rem 13rem 13rem; }
  .bento__feld--gross { grid-row: span 2; }
}

@media (max-width: 44rem) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento__feld { aspect-ratio: 4 / 3; }
  .bento__feld--gross { grid-row: auto; aspect-ratio: 3 / 4; }
  .hstats { flex-wrap: wrap; }
  .hstat { flex: 1 1 8rem; min-width: 0; }
}

/* ==========================================================================
   Ebene 5: Kopfzeile robust machen
   Die volle Navigation braucht rund 960 px. Darunter uebernimmt das
   Klappmenue, sonst bricht die Leiste um und schiebt sich in den Hero.
   ========================================================================== */

.nav__list a { white-space: nowrap; }
.wordmark { flex: none; }
.topbar__innen { flex-wrap: nowrap; min-width: 0; }
.nav { min-width: 0; }

@media (max-width: 60rem) {
  .burger { display: flex; order: 3; }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    padding: 6rem clamp(1rem, 4vw, 2rem) var(--raum-4);
    transform: translateY(-100%);
    /* Siehe oben: das Hochschieben allein genuegt nicht, sobald die Kopfzeile
       klebt und .topbar__innen zum Bezugsrahmen wird. */
    visibility: hidden;
    transition: transform 280ms var(--kurve), visibility 0s linear 280ms;
    z-index: -1;
    box-shadow: 0 24px 50px -30px rgba(20, 24, 28, 0.4);
  }

  .nav.ist-offen {
    transform: translateY(0);
    visibility: visible;
    transition: transform 280ms var(--kurve), visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 1.05rem;
    max-width: 30rem;
    margin: 0 auto;
  }

  .nav__list li { border-bottom: 1px solid var(--linie); }
  .nav__list li:last-child { border-bottom: 0; padding-top: var(--raum-3); }
  .nav__list a { padding: 0.95rem 0; border-radius: 0; }
  .nav__list a:hover { background: none; color: var(--akzent); }
  .nav__cta { text-align: center; border-radius: 999px !important; padding: 0.85rem 1.2rem !important; }

  .sprache { margin-left: auto; }

  /* Der Rahmen bekommt oben wieder Luft, weil die Leiste jetzt schmal ist */
  .hero { padding-top: 5.2rem; }
  .hero__rahmen { padding-top: 11rem; }
}

@media (max-width: 44rem) {
  .hero { padding-top: 4.6rem; }
  .hero__rahmen { padding-top: 8.5rem; }
}

/* Zwischen 960 und 1200 px wird es eng: Abstaende und Schrift etwas kleiner,
   damit die Leiste einzeilig bleibt. */
@media (min-width: 60.0625rem) and (max-width: 78rem) {
  .nav__list { gap: 0.35rem; font-size: 0.9rem; }
  .nav__list a { padding: 0.5rem 0.6rem; }
  .nav__cta { padding: 0.5rem 0.95rem !important; }
  .topbar__innen { padding-left: 0.8rem; gap: var(--raum-2); }
  .wordmark__bild { height: 38px; }
}

/* ------------------------------------------------- Über uns mit Bild rechts */

.haus {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.haus__text { display: flex; flex-direction: column; align-items: flex-start; }
.haus__text h2 { margin-bottom: var(--raum-3); }
.haus__text p { color: var(--text-leise); }

.haus .fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--raum-4);
  width: 100%;
  margin: var(--raum-2) 0 var(--raum-4);
  background: none;
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.haus__bild {
  margin: 0;
  border-radius: var(--rund-l);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--grund-3);
}

.haus__bild img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 60rem) {
  .haus { grid-template-columns: minmax(0, 1fr); }
  .haus__bild { aspect-ratio: 16 / 10; order: -1; margin-bottom: var(--raum-3); }
}

@media (max-width: 44rem) {
  .haus .fakten { grid-template-columns: minmax(0, 1fr); }
}

/* Der Glasschalter ist auf heller Seite hell. Nur im dunklen Startbereich
   bekommt er die durchscheinende Fassung. */
.btn--glas {
  background: #fff;
  border-color: var(--glas-rand);
  color: var(--text-hell);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.btn--glas:hover { background: var(--grund-2); border-color: var(--glas-rand-hell); }

.hero .btn--glas {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--dunkel-rand);
  color: var(--dunkel-text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero .btn--glas:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.34); }

/* ==========================================================================
   Ebene 6: schmale Schirme
   Im Spaltenlayout wird aus flex-basis eine Hoehe. Die Werte aus dem
   Zeilenlayout muessen hier zurueckgenommen werden, sonst blaeht sich die
   Statuskarte auf 16rem Hoehe auf.
   ========================================================================== */

@media (max-width: 44rem) {
  .hero__karten > * ,
  .hkarte--status,
  .hkarte--tipp,
  .hstats {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .hkarte--status { min-height: 0; }

  /* Der Startbereich braucht auf dem Handy nicht die volle Fensterhoehe,
     der Inhalt fuellt ihn ohnehin. */
  .hero__rahmen {
    min-height: 0;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }

  .hero__lede { margin-bottom: var(--raum-3); }
  .hero__karten { gap: 0.6rem; margin-top: var(--raum-3); }
  .hkarte__bild { aspect-ratio: 16 / 9; }
}

/* Gleiches Problem im Zwischenbereich, dort bleibt die Zeile erhalten,
   aber die Karten sollen nicht ungleich hoch werden. */
@media (min-width: 44.0625rem) and (max-width: 68rem) {
  .hero__karten { align-items: flex-start; }
  .hkarte--status { flex: 1 1 18rem; }
  .hkarte--tipp { flex: 1 1 18rem; }
}

/* Bei umgebrochenen Zeilen streckt der Browser die Zeilen auf die volle
   Hoehe. Das laesst die Karten aufblaehen, deshalb ausdruecklich oben halten. */
@media (max-width: 68rem) {
  .hero__karten { align-content: flex-start; align-items: flex-start; }
}

/* Die Karten haengen direkt im Rahmen, und der ist unterhalb von 68rem eine
   Spalte. Jede flex-basis wird dort zur Hoehe, deshalb alle zuruecksetzen. */
@media (max-width: 68rem) {
  .hero__rahmen > .hkarte--schwebt,
  .hero__rahmen > .hstats {
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    max-width: none;
    min-height: 0;
  }

  .hero__rahmen > .hstats { display: flex; }
  .hstat { flex: 1 1 0; }
}

/* Zwischen Handy und Schreibtisch stehen die Karten gestapelt. Ohne Deckel
   wird das Bild so breit, dass die Karte den halben Schirm frisst. */
@media (min-width: 34rem) and (max-width: 68rem) {
  .hero__rahmen > .hkarte--schwebt,
  .hero__rahmen > .hstats {
    align-self: flex-start;
    max-width: 27rem;
    width: 100%;
  }
  .hero__rahmen > .hkarte--tipp .hkarte__bild { aspect-ratio: 16 / 9; }
  .hero__rahmen { padding-top: 9rem; }
}

/* Tippziele auch auf Tablets grosszuegig, nicht nur auf dem Handy */
@media (max-width: 60rem) and (pointer: coarse), (max-width: 60rem) {
  .fuss a,
  .tisch__intro a,
  .datenschutz-hinweis a,
  .finden a:not(.btn) {
    display: inline-block;
    padding: 0.55rem 0;
    min-height: 44px;
    line-height: 1.7;
  }
  .fuss__block p { margin-bottom: 0; }
}

/* ------------------------------------------- Gerichtkarten ohne Bild
   Es gibt noch keine Speisenfotos. Statt fremde oder erfundene Bilder zu
   zeigen, tragen diese Karten die Typografie allein. */

.reihe--gerichte { grid-auto-columns: minmax(17rem, 1fr); }

.gkarte {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: var(--raum-3);
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-l);
  box-shadow: 0 12px 30px -24px rgba(20, 24, 28, 0.4);
  transition: border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

.gkarte:hover { border-color: var(--glas-rand-hell); transform: translateY(-3px); }

.gkarte__marke {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--grund-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.gkarte h3 { margin: 0.2rem 0 0; font-size: 1.2rem; }
.gkarte > p { margin: 0; font-size: 0.93rem; color: var(--text-leise); max-width: none; }

.gkarte__fuss {
  margin-top: auto !important;
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
}

/* Das Hero-Bild ist jetzt eine helle Aufnahme. Der Verlauf links muss
   kraeftiger sein, damit die weisse Schrift sicher lesbar bleibt. */
.hero__rahmen::before {
  background:
    linear-gradient(100deg, rgba(8, 16, 26, 0.93) 0%, rgba(8, 16, 26, 0.80) 32%,
                    rgba(8, 16, 26, 0.34) 62%, rgba(8, 16, 26, 0.46) 100%),
    linear-gradient(to top, rgba(8, 16, 26, 0.72) 0%, transparent 42%);
}

@media (max-width: 68rem) {
  .hero__rahmen::before {
    background:
      linear-gradient(to top, rgba(8, 16, 26, 0.95) 0%, rgba(8, 16, 26, 0.88) 38%,
                      rgba(8, 16, 26, 0.42) 76%, rgba(8, 16, 26, 0.52) 100%);
  }
}

@media (max-width: 44rem) {
  .reihe--gerichte { grid-auto-columns: minmax(15rem, 80vw); }
}

/* Bildunterschriften liegen auf hellen Aufnahmen, deshalb kraeftiger
   abdunkeln und den Verlauf hoeher ziehen. */
.bento__feld figcaption {
  padding: 3rem 1.1rem 1rem;
  background: linear-gradient(to top,
              rgba(8, 16, 26, 0.92) 0%,
              rgba(8, 16, 26, 0.68) 38%,
              rgba(8, 16, 26, 0.18) 72%,
              transparent 100%);
  text-shadow: 0 1px 3px rgba(8, 16, 26, 0.6);
}

.bento__note { color: rgba(255, 255, 255, 0.86); }

/* Gleiches gilt fuer die Marke auf den Anlassbildern */
.tkarte__marke {
  background: rgba(8, 16, 26, 0.72);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   Ebene 7: mittiger Startbereich mit grosser Wortmarke
   ========================================================================== */

.hero__rahmen {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 12vw, 9rem) clamp(1.2rem, 4vw, 3rem) clamp(7rem, 14vw, 11rem);
  min-height: min(44rem, calc(100svh - 6rem));
}

.hero__inhalt {
  position: relative;
  z-index: 3;
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow--hell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(234, 241, 247, 0.85);
  margin-bottom: var(--raum-3);
}

.eyebrow--hell span {
  width: 7px;
  height: 7px;
  background: var(--wappen);
  border-radius: 1px;
}

.hero__title {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: 0 auto var(--raum-3);
  text-wrap: balance;
}

.hero__lede {
  max-width: 34rem;
  margin: 0 auto var(--raum-4);
  color: rgba(234, 241, 247, 0.78);
}

/* Weisse Pille mit rundem Pfeil, wie im Vorbild */
.pillbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.42rem 0.42rem 0.42rem 1.6rem;
  border-radius: 999px;
  background: var(--grund);
  color: var(--text-hell);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.55);
  transition: transform var(--tempo) var(--kurve);
}

.pillbtn:hover { transform: translateY(-2px); }

.pillbtn span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 1rem;
  transition: background var(--tempo) var(--kurve);
}

.pillbtn:hover span { background: var(--wappen); }

/* Live-Anzeige als schlichte Pille unter dem Schalter */
.hero__inhalt .status {
  margin: var(--raum-3) 0 0;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--dunkel-rand);
  border-radius: 999px;
  color: rgba(234, 241, 247, 0.9);
  font-size: 0.88rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: none;
}

.hero__inhalt .status.ist-offen .status__dot { background: #F0837A; }
.hero__inhalt .status.ist-zu .status__dot { background: rgba(234, 241, 247, 0.55); }

/* Grosse Wortmarke am unteren Rand, halb angeschnitten */
.hero__wortmarke {
  position: absolute;
  left: 50%;
  bottom: clamp(-2.2rem, -3.5vw, -1rem);
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 44rem) {
  .hero__rahmen { padding-bottom: 6rem; }
  .hero__wortmarke { font-size: clamp(3rem, 18vw, 5rem); bottom: -1rem; }
  .pillbtn { font-size: 0.95rem; padding-left: 1.3rem; }
  .pillbtn span { width: 40px; height: 40px; }
}

/* ------------------------- Über uns: Bild links, Karte darauf, Text rechts */

.haus {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  padding-top: var(--raum-6);
  padding-bottom: var(--raum-6);
}

.haus__bild {
  position: relative;
  order: -1;
  aspect-ratio: 4 / 5;
  margin: 0;
}

.hauskarte {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  background: rgba(251, 251, 249, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--rund-m);
  padding: var(--raum-3);
  box-shadow: 0 20px 40px -22px rgba(8, 16, 26, 0.5);
}

.hauskarte__text {
  margin: 0 0 var(--raum-2);
  font-size: 0.94rem;
  color: var(--text-hell);
  max-width: none;
}

.hauskarte__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-2); }
.hauskarte__name { display: block; font-weight: 700; font-size: 0.95rem; }
.hauskarte__rolle { display: block; font-size: 0.8rem; color: var(--text-leise); }

.hauskarte__marke {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.haus__text .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; }
.haus__text .eyebrow span { width: 7px; height: 7px; background: var(--wappen); border-radius: 1px; }

.haus__text h2 { max-width: 16ch; }

/* Kennzahlenreihe mit senkrechten Trennern */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  width: 100%;
  margin-top: var(--raum-5);
}

.kennzahlen > div + div {
  border-left: 1px solid var(--linie);
  padding-left: var(--raum-3);
}

.kennzahl {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: none;
}

.kennzahl__label {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-leise);
  max-width: none;
}

/* --------------------------------------------------------- Fußzeile dunkel */

.fuss {
  display: block;
  max-width: none;
  margin: var(--raum-6) 0 0;
  padding: 0;
  border: 0;
  background: none;
}

.fuss__innen {
  position: relative;
  overflow: hidden;
  max-width: calc(var(--breite) + 6rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) clamp(7rem, 13vw, 10rem);
  border-radius: var(--rund-xl);
  background: var(--dunkel);
  color: var(--dunkel-leise);
}

.fuss__spalten {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--raum-4);
}

.fuss__marke img { height: 46px; width: auto; margin-bottom: var(--raum-2); }
.fuss__marke p { margin: 0; font-size: 0.92rem; max-width: 30ch; color: var(--dunkel-leise); }

.fuss__titel {
  margin: 0 0 var(--raum-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 241, 247, 0.55);
  max-width: none;
}

.fuss__block p { margin: 0 0 0.45rem; font-size: 0.94rem; max-width: none; }

.fuss__block a {
  color: var(--dunkel-leise);
  text-decoration: none;
  border: 0;
  transition: color var(--tempo) var(--kurve);
}
.fuss__block a:hover { color: var(--dunkel-text); }

.fuss__unten {
  position: relative;
  z-index: 2;
  margin-top: var(--raum-5);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--dunkel-rand);
  font-size: 0.85rem;
}
.fuss__unten p { margin: 0; max-width: none; }

.fuss__wortmarke {
  position: absolute;
  left: 50%;
  bottom: clamp(-2.5rem, -4vw, -1.5rem);
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  font-size: clamp(3.6rem, 15vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 68rem) {
  .haus { grid-template-columns: minmax(0, 1fr); }
  .haus__bild { aspect-ratio: 4 / 3; margin-bottom: var(--raum-3); }
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 44rem) {
  .kennzahlen { gap: var(--raum-2); }
  .kennzahlen > div + div { padding-left: var(--raum-2); }
  .kennzahl { font-size: 1.6rem; }
  .kennzahl__label { font-size: 0.72rem; }
  .fuss__spalten { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .fuss__innen { border-radius: var(--rund-l); }
}

/* Ueberschriften ohne gestrandete Einzelwoerter */
.hero__title { max-width: none; font-size: clamp(2rem, 4.6vw, 3.5rem); }
.haus__text h2 { max-width: 14ch; }

@media (max-width: 44rem) {
  .hero__title br { display: none; }
  .hero__title { font-size: clamp(1.95rem, 8vw, 2.5rem); }
}

/* Fußzeilenlinks auch am Schreibtisch bequem treffbar */
.fuss__block a,
.fuss__unten a {
  display: inline-block;
  padding: 0.42rem 0;
  min-height: 40px;
  line-height: 1.5;
}
.fuss__block p { margin-bottom: 0.1rem; }

.wordmark { min-height: 44px; display: flex; align-items: center; }

/* ==========================================================================
   Ebene 8: Wortmarke hinter dem Vordergrund, Leiste über dem Bild
   Das Foto liegt zweimal übereinander. Die obere Kopie ist unten
   beschnitten und verdeckt die Wortmarke, wie der Lastwagen im Vorbild.
   ========================================================================== */

.hero { padding: 0.55rem 0.55rem 0; }

.hero__rahmen {
  min-height: min(50rem, 100svh);
  padding: clamp(8rem, 15vw, 12rem) clamp(1.2rem, 4vw, 3rem) clamp(9rem, 20vw, 16rem);
  align-items: flex-start;
  justify-content: center;
}

.hero__media img,
.hero__vordergrund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Der Verlauf gehört zur unteren Ebene, damit der Vordergrund scharf bleibt */
.hero__rahmen::before { z-index: 1; }

.hero__wortmarke {
  z-index: 2;
  bottom: clamp(-1.5rem, -2.5vw, -0.5rem);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(4.5rem, 17vw, 15rem);
  letter-spacing: -0.055em;
  mix-blend-mode: normal;
}

/* Obere Bildkopie: nur der untere Teil, deckt die Wortmarke ab */
.hero__vordergrund {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: inset(62% 0 0 0);
}

/* Denselben Verlauf über den Vordergrund legen, sonst wirkt er heller */
.hero__vordergrund::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 16, 26, 0.93) 0%, rgba(8, 16, 26, 0.80) 32%,
                    rgba(8, 16, 26, 0.34) 62%, rgba(8, 16, 26, 0.46) 100%),
    linear-gradient(to top, rgba(8, 16, 26, 0.72) 0%, transparent 42%);
}

.hero__inhalt { z-index: 4; }

.hero__title { margin-bottom: var(--raum-4); }

/* --------------------------------------------- Kopfzeile liegt auf dem Bild */

.topbar { padding-top: 1.2rem; }

.topbar__innen { background: none; border-color: transparent; box-shadow: none; }

.nav__list a { color: rgba(255, 255, 255, 0.92); }
.nav__list a:hover { background: rgba(255, 255, 255, 0.14); }
.nav__cta { border-color: rgba(255, 255, 255, 0.55); color: #fff !important; }
.nav__cta:hover { background: #fff; color: var(--text-hell) !important; border-color: #fff; }

.sprache { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); }
.sprache__knopf { color: rgba(255, 255, 255, 0.75); }
.sprache__knopf:hover { color: #fff; }
.sprache__knopf[aria-pressed="true"], .sprache__knopf.ist-aktiv { background: #fff; color: var(--text-hell); }
.burger span { background: #fff; }

.wordmark { position: relative; }
.wordmark__bild--dunkel { position: absolute; inset: 0; opacity: 0; }
.wordmark__bild { transition: opacity var(--tempo) var(--kurve); }

/* Sobald gescrollt wird, setzt sich die Leiste als helle Pille ab */
.topbar.is-fest .topbar__innen {
  background: rgba(251, 251, 249, 0.9);
  border-color: var(--glas-rand);
  box-shadow: 0 12px 34px -20px rgba(20, 24, 28, 0.4);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.topbar.is-fest .nav__list a { color: var(--text-hell); }
.topbar.is-fest .nav__list a:hover { background: var(--grund-2); }
.topbar.is-fest .nav__cta { border-color: var(--akzent); color: var(--akzent) !important; }
.topbar.is-fest .nav__cta:hover { background: var(--akzent); color: #fff !important; }
.topbar.is-fest .sprache { background: var(--grund-2); border-color: var(--glas-rand); }
.topbar.is-fest .sprache__knopf { color: var(--text-leise); }
.topbar.is-fest .sprache__knopf[aria-pressed="true"], .sprache__knopf.ist-aktiv { background: #fff; color: var(--text-hell); }
.topbar.is-fest .burger span { background: var(--text-hell); }
.topbar.is-fest .wordmark__bild--hell { opacity: 0; }
.topbar.is-fest .wordmark__bild--dunkel { opacity: 1; }

@media (max-width: 60rem) {
  /* Das aufgeklappte Menü ist hell, dort brauchen die Links dunkle Schrift */
  .nav.ist-offen ~ .burger span,
  .nav .nav__list a { color: var(--text-hell); }
  .nav .nav__list a:hover { background: none; color: var(--akzent); }
  .nav .nav__cta { border-color: var(--akzent); color: var(--akzent) !important; }
}

@media (max-width: 44rem) {
  .hero__rahmen { padding-top: 7rem; padding-bottom: 8rem; min-height: min(42rem, 100svh); }
  .hero__wortmarke { font-size: clamp(3.2rem, 19vw, 6rem); bottom: -0.6rem; }
  .hero__vordergrund { clip-path: inset(68% 0 0 0); }
}

/* Wortmarke höher setzen, damit der Vordergrund nur ihr unteres Drittel
   verdeckt statt sie ganz zu schlucken. */
.hero__wortmarke {
  top: 46%;
  bottom: auto;
  font-size: clamp(4rem, 15.5vw, 13.5rem);
}

/* Beide Logofassungen exakt gleich gross übereinander */
.wordmark { display: inline-flex; align-items: center; }
.wordmark__bild { height: 46px; width: auto; display: block; }
.wordmark__bild--dunkel {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 46px;
  width: auto;
}

@media (max-width: 60rem) {
  .wordmark__bild, .wordmark__bild--dunkel { height: 38px; }
}

@media (max-width: 44rem) {
  .wordmark__bild, .wordmark__bild--dunkel { height: 34px; }
  .hero__wortmarke { top: 52%; font-size: clamp(3rem, 18vw, 5.5rem); }
}

/* Inhalt höher, Wortmarke tiefer, damit sich beides nicht überlagert */
.hero__rahmen { padding-top: clamp(6.5rem, 11vw, 9rem); }
.hero__wortmarke { top: 54%; }

@media (max-width: 44rem) {
  .hero__rahmen { padding-top: 6rem; }
  .hero__wortmarke { top: 58%; }
}

/* Mehr von der Wortmarke zeigen: Inhalt weiter nach oben, Wort weiter hoch,
   Vordergrundkante etwas tiefer. Sichtbar bleiben rund zwei Drittel. */
.hero__rahmen { padding-top: clamp(5.2rem, 8vw, 7rem); }
.hero__wortmarke { top: 47%; }
.hero__vordergrund { clip-path: inset(65% 0 0 0); }

@media (max-width: 44rem) {
  .hero__rahmen { padding-top: 5.5rem; }
  .hero__wortmarke { top: 55%; }
  .hero__vordergrund { clip-path: inset(72% 0 0 0); }
}

@media (max-width: 44rem) {
  .hero__rahmen { min-height: min(38rem, 100svh); padding-bottom: 6.5rem; }
  .hero__wortmarke { top: auto; bottom: 1.5rem; font-size: clamp(2.6rem, 15vw, 4.4rem); }
  .hero__vordergrund { clip-path: inset(78% 0 0 0); }
}

@media (max-width: 44rem) {
  .hero__rahmen { padding-bottom: 8.5rem; }
  .hero__wortmarke { bottom: 6.2rem; }
}

/* Wortmarke und Vordergrundkante aneinander koppeln, damit die Verdeckung
   auf jeder Breite ähnlich stark ausfällt statt ganz zu verschwinden. */
@media (min-width: 44.0625rem) and (max-width: 68rem) {
  .hero__wortmarke { top: auto; bottom: 7%; font-size: clamp(4rem, 13vw, 8rem); }
  .hero__vordergrund { clip-path: inset(82% 0 0 0); }
}

@media (max-width: 44rem) {
  .hero__wortmarke { bottom: 7.4rem; }
  .hero__vordergrund { clip-path: inset(80% 0 0 0); }
}

/* ==========================================================================
   Verdeckung in festen Einheiten statt in Prozent der Rahmenhöhe.
   Die Rahmenhöhe schwankt mit dem Inhalt, deshalb hielt kein Prozentwert.
   Wortmarke sitzt --wm-unten über der Kante, der Vordergrund beginnt
   --vg-hoch über der Kante. Liegt --vg-hoch zwischen den beiden, wird
   immer derselbe Anteil verdeckt.
   ========================================================================== */

.hero__wortmarke {
  top: auto;
  bottom: var(--wm-unten, 2rem);
  font-size: var(--wm-groesse, 13.5rem);
}

.hero__vordergrund {
  clip-path: inset(calc(100% - var(--vg-hoch, 6.6rem)) 0 0 0);
}

.hero__rahmen {
  --wm-unten: 2rem;
  --wm-groesse: clamp(4rem, 15.5vw, 13.5rem);
  --vg-hoch: 6.6rem;
  padding-bottom: 13rem;
}

@media (max-width: 68rem) {
  .hero__rahmen {
    --wm-unten: 2rem;
    --wm-groesse: clamp(4rem, 13vw, 8rem);
    --vg-hoch: 4.2rem;
    padding-bottom: 9.5rem;
  }
}

@media (max-width: 44rem) {
  .hero__rahmen {
    --wm-unten: 1.6rem;
    --wm-groesse: clamp(2.6rem, 15vw, 4.4rem);
    --vg-hoch: 2.9rem;
    padding-bottom: 7.5rem;
  }
}

/* ==========================================================================
   Ebene 9: Startbereich mit Buchungsleiste
   Inhalt links, Leistungen rechts, unten eine schwebende Leiste, die
   Datum, Uhrzeit, Personen und Anlass entgegennimmt.
   ========================================================================== */

.hero__rahmen {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: clamp(7rem, 12vw, 10rem) clamp(1.5rem, 4vw, 3.5rem) clamp(8.5rem, 12vw, 10rem);
  min-height: min(48rem, 100svh);
}

.hero__inhalt {
  max-width: 40rem;
  margin: 0;
  align-items: flex-start;
  text-align: left;
}

.hero__title { margin: 0 0 var(--raum-3); max-width: 16ch; }
.hero__lede { margin: 0 0 var(--raum-4); max-width: 30rem; text-align: left; }

.hero__beleg { text-align: left; }
.hero__belegzahl {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  max-width: none;
}
.hero__beleglabel {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: rgba(234, 241, 247, 0.72);
  max-width: none;
}

/* Wortmarke und Vordergrundebene gehören zur vorherigen Fassung */
.hero__wortmarke, .hero__vordergrund { display: none; }

/* ----------------------------------------------------- Leistungen rechts */

.hero__wirmachen {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  top: clamp(7rem, 13vw, 10rem);
  z-index: 4;
  text-align: right;
}

.hero__wirmachen-titel {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(234, 241, 247, 0.6);
  max-width: none;
}

.hero__wirmachen ul { list-style: none; margin: 0; padding: 0; }

.hero__wirmachen a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: rgba(234, 241, 247, 0.42);
  transition: color var(--tempo) var(--kurve);
}

.hero__wirmachen a span { font-size: 0.7em; }
.hero__wirmachen a:hover,
.hero__wirmachen .ist-aktiv a { color: #fff; }

/* ------------------------------------------------------- Buchungsleiste */

.buchleiste {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 0;
  padding: 0.55rem 0.55rem 0.55rem 0;
  border-radius: 999px;
  background: rgba(251, 251, 249, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 54px -24px rgba(8, 16, 26, 0.6);
}

.buchfeld {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem clamp(1rem, 2vw, 1.6rem);
  min-width: 0;
  border-left: 1px solid var(--linie);
}

.buchfeld:first-child { border-left: 0; }

.buchfeld label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.buchfeld input,
.buchfeld select {
  appearance: none;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-hell);
  cursor: pointer;
}

.buchfeld select { background-image: none; padding-right: 0; }
.buchfeld input:focus,
.buchfeld select:focus { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 3px; }

.buchleiste__knopf {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--dunkel);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

.buchleiste__knopf:hover { background: var(--akzent); transform: scale(1.05); }

/* ------------------------------------------------------------ Umbrüche */

@media (max-width: 68rem) {
  .hero__wirmachen { position: static; text-align: left; margin-top: var(--raum-4); }
  .hero__wirmachen ul { display: flex; gap: var(--raum-3); flex-wrap: wrap; }
  .hero__rahmen { padding-bottom: 15rem; }
  .buchleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--rund-l); padding: 0.4rem; }
  .buchfeld { border-left: 0; border-top: 1px solid var(--linie); padding: 0.6rem 1rem; }
  .buchfeld:nth-child(1), .buchfeld:nth-child(2) { border-top: 0; }
  .buchfeld:nth-child(odd) { border-right: 1px solid var(--linie); }
  .buchleiste__knopf { grid-column: 1 / -1; justify-self: stretch; width: 100%; border-radius: 999px; height: 52px; margin-top: 0.4rem; }
}

@media (max-width: 44rem) {
  .hero__rahmen { padding: 6rem 1.1rem 17rem; min-height: min(46rem, 100svh); }
  .hero__title { max-width: none; }
  .hero__wirmachen ul { gap: var(--raum-2); }
  .hero__wirmachen a { font-size: 1rem; }
  .buchleiste { left: 0.9rem; right: 0.9rem; }
}

/* Großer Absatz in zwei Tonwerten: der erste Satz dunkel, der Rest leiser */
.gross-zweifarbig {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-leise);
  max-width: 34ch;
  margin-bottom: var(--raum-3);
}

.gross-zweifarbig strong { color: var(--text-hell); font-weight: 700; }

/* Die Leistungen liegen über hellem Himmel. Ein weicher Schleier von rechts
   oben und mehr Deckkraft machen sie sicher lesbar. */
.hero__rahmen::before {
  background:
    radial-gradient(38rem 26rem at 100% 0%, rgba(8, 16, 26, 0.72), transparent 70%),
    linear-gradient(100deg, rgba(8, 16, 26, 0.93) 0%, rgba(8, 16, 26, 0.78) 34%,
                    rgba(8, 16, 26, 0.32) 64%, rgba(8, 16, 26, 0.44) 100%),
    linear-gradient(to top, rgba(8, 16, 26, 0.80) 0%, transparent 46%);
}

.hero__wirmachen a { color: rgba(234, 241, 247, 0.62); text-shadow: 0 1px 4px rgba(8, 16, 26, 0.5); }
.hero__wirmachen-titel { color: rgba(234, 241, 247, 0.75); text-shadow: 0 1px 4px rgba(8, 16, 26, 0.5); }

/* ==========================================================================
   Ebene 10: nummerierte Anlassliste, Ablauf, Abschlussband, Fußzeile
   ========================================================================== */

.btn--dunkel {
  background: var(--dunkel);
  color: #fff;
  border-color: var(--dunkel);
}
.btn--dunkel:hover { background: var(--akzent); border-color: var(--akzent); }

.nur-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------- Nummerierte Anlassliste */

.anlassliste { border-top: 1px solid var(--linie); }

.anlass { border-bottom: 1px solid var(--linie); transition: background var(--tempo) var(--kurve); }

.anlass__kopf {
  appearance: none;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  cursor: pointer;
  font-family: var(--schrift-text);
  color: var(--text-hell);
}

.anlass__nr {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.anlass__titel {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.anlass__marken { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }

.anlass__marken span {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-leise);
  white-space: nowrap;
}

.anlass__pfeil {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--linie);
  font-size: 0.95rem;
  color: var(--text-hell);
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}

.anlass__kopf:hover .anlass__pfeil { background: var(--grund-2); }

/* Aktive Zeile: dunkle Karte mit Bild, wie im Vorbild */
.anlass.ist-aktiv {
  background: var(--dunkel);
  color: var(--dunkel-text);
  border-radius: var(--rund-l);
  border-bottom-color: transparent;
  padding: 0 clamp(1.2rem, 2.5vw, 2rem);
  margin: 0.5rem 0;
}

.anlass.ist-aktiv .anlass__kopf { color: var(--dunkel-text); }
.anlass.ist-aktiv .anlass__nr { color: rgba(234, 241, 247, 0.6); }
.anlass.ist-aktiv .anlass__marken span { border-color: var(--dunkel-rand); color: rgba(234, 241, 247, 0.8); }
.anlass.ist-aktiv .anlass__pfeil {
  border-color: transparent;
  background: var(--akzent);
  color: #fff;
  transform: rotate(90deg);
}

.anlass__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  padding: 0 0 clamp(1.2rem, 2.5vw, 2rem);
}

.anlass__inhalt[hidden] { display: none; }

.anlass__bild { position: relative; border-radius: var(--rund-m); overflow: hidden; aspect-ratio: 16 / 10; }
.anlass__bild img { width: 100%; height: 100%; object-fit: cover; }

.anlass__bildmarke {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: rgba(251, 251, 249, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-hell);
}

.anlass__text p { margin: 0 0 var(--raum-3); color: rgba(234, 241, 247, 0.78); max-width: 44ch; }
.anlass__aktionen { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.anlass.ist-aktiv .btn--glas {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--dunkel-rand);
  color: var(--dunkel-text);
}
.anlass.ist-aktiv .btn--glas:hover { background: rgba(255, 255, 255, 0.2); }

/* ------------------------------------------------------------- Ablauf */

.schritte {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-5) clamp(1rem, 4vw, 3rem) var(--raum-6);
}

.schritte__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.schritt { position: relative; padding-top: var(--raum-2); border-top: 1px solid var(--linie); }

.schritt__nr {
  position: absolute;
  top: var(--raum-2);
  right: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Das Bild nimmt die volle Spaltenbreite ein, wie auf Tablet und Handy auch.
   Vorher war es am Rechner eine kleine Marke von 8,5rem, was neben dem Text
   verloren wirkte. */
.schritt__bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rund-m);
  overflow: hidden;
  margin: var(--raum-2) 0 var(--raum-3);
  box-shadow: 0 16px 34px -20px rgba(20, 24, 28, 0.55);
}
.schritt__bild img { width: 100%; height: 100%; object-fit: cover; }

.schritt__label {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
  max-width: none;
}

.schritt h3 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.schritt__text { margin: 0; font-size: 0.94rem; color: var(--text-leise); max-width: none; }

/* --------------------------------------------------------- Abschlussband */

.band { padding: var(--raum-5) clamp(1rem, 4vw, 3rem) var(--raum-6); }

.band__rahmen {
  position: relative;
  overflow: hidden;
  max-width: var(--breite);
  margin: 0 auto;
  border-radius: var(--rund-xl);
  min-height: clamp(20rem, 34vw, 27rem);
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}

.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }

.band__rahmen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 16, 26, 0.86), rgba(8, 16, 26, 0.58));
}

.band__inhalt { position: relative; z-index: 2; max-width: 34rem; }

.band__inhalt h2 {
  color: #fff;
  margin-bottom: var(--raum-4);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  text-wrap: balance;
}

.band__aktionen { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

.pillbtn--dunkel { background: var(--dunkel); color: #fff; }
.pillbtn--dunkel span { background: #fff; color: var(--dunkel); }
.pillbtn--dunkel:hover span { background: var(--akzent); color: #fff; }

/* ------------------------------------------------------ Fußzeile Ergänzung */

.fuss__spalten { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.1fr); }

.fuss__hinweis { font-size: 0.88rem; margin-bottom: var(--raum-2) !important; }

.nlform {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border: 1px solid var(--dunkel-rand);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.nlform input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--dunkel-text);
  font-family: var(--schrift-text);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}
.nlform input::placeholder { color: rgba(234, 241, 247, 0.45); }
.nlform input:focus { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 3px; }

.nlform button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve);
}
.nlform button:hover { background: var(--wappen); }

.fuss__unten { display: flex; justify-content: space-between; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.fuss__rechts { display: flex; gap: var(--raum-3); }
.fuss__rechts a { color: var(--dunkel-leise); text-decoration: none; }
.fuss__rechts a:hover { color: var(--dunkel-text); }

/* --------------------------------------------------- Zurück nach oben */

.nachoben {
  position: fixed;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glas-rand);
  border-radius: 50%;
  background: rgba(251, 251, 249, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-hell);
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve);
}

.nachoben.ist-da { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nachoben:hover { background: #fff; }

/* ------------------------------------- Schwebender Reservierungsschalter */
/* Sitzt unten rechts und fuehrt unmittelbar zu OpenTable. Er erscheint erst,
   wenn die Buchungsleiste im Startbereich aus dem Blick gescrollt ist -
   vorher waere er nur eine Dopplung. Der Schalter "nach oben" rueckt darueber,
   damit sich die beiden nicht ueberlagern. */

.buchfab {
  position: fixed;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 91;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-family: var(--schrift-text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(20, 24, 28, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve);
}

.buchfab.ist-da { opacity: 1; pointer-events: auto; transform: translateY(0); }
.buchfab:hover { background: #8E170F; color: #fff; }
.buchfab:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 3px; }

.buchfab__zeichen { display: inline-flex; flex: none; }

/* Der Schalter "nach oben" rueckt um die Hoehe des Reservierungsschalters
   nach oben, sobald dieser sichtbar ist. */
.nachoben { transition: opacity var(--tempo) var(--kurve),
                        transform var(--tempo) var(--kurve),
                        bottom var(--tempo) var(--kurve),
                        background var(--tempo) var(--kurve); }
body.hat-buchfab .nachoben { bottom: calc(clamp(1rem, 2vw, 1.6rem) + 64px); }

@media (max-width: 30rem) {
  .buchfab { padding: 0 1rem; font-size: 0.9rem; min-height: 48px; }
  body.hat-buchfab .nachoben { bottom: calc(clamp(1rem, 2vw, 1.6rem) + 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .buchfab { transition: opacity 1ms linear; transform: none; }
  .buchfab.ist-da { transform: none; }
}

/* ---------------------------------------------------------- Umbrüche */

@media (max-width: 68rem) {
  .anlass__kopf { grid-template-columns: auto minmax(0, 1fr) auto; }
  .anlass__marken { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; margin-top: 0.5rem; }
  .anlass__inhalt { grid-template-columns: minmax(0, 1fr); }
  .schritte__liste { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__newsletter { grid-column: 1 / -1; }
}

@media (max-width: 44rem) {
  .anlass__kopf { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; }
  .anlass__titel { font-size: 1.1rem; }
  .anlass__marken span { font-size: 0.72rem; padding: 0.25rem 0.65rem; }
  .anlass__pfeil { width: 38px; height: 38px; }
  .anlass.ist-aktiv { padding: 0 1rem; }
  .band__aktionen .pillbtn { width: 100%; justify-content: space-between; }
  .fuss__unten { flex-direction: column; align-items: flex-start; }
  .nachoben { width: 44px; height: 44px; }
}

/* Der Pfeil im Auswahlfeld besteht aus zwei kleinen Verläufen. Eine spätere
   background-Kurzschreibweise hatte Größe und Position zurückgesetzt, dadurch
   wuchs der Pfeil auf Feldgröße. Hier vollständig neu gesetzt. */
.feld select {
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
                    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.4rem, calc(100% - 0.85rem) 1.4rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.buchfeld select {
  background-color: transparent;
  background-image: none;
}

/* Tippziele in Leiste, Hero-Liste und Newsletter vergrößern */

.buchfeld { cursor: pointer; }
.buchfeld__label { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-leise); }
.buchfeld input,
.buchfeld select { min-height: 30px; }

.hero__wirmachen a { padding: 0.5rem 0; min-height: 44px; }

.nlform input { min-height: 40px; }

/* ==========================================================================
   Ruhiger Herkunftshinweis statt Zahlblock, Leistungen nur am Schreibtisch
   ========================================================================== */

.hero__zeile {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  max-width: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 241, 247, 0.82);
  text-shadow: 0 1px 4px rgba(8, 16, 26, 0.5);
}

.hero__zeile span {
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: rgba(234, 241, 247, 0.55);
}

/* Die Leistungsliste ist ein Schreibtisch-Akzent. Auf kleinen Schirmen
   verdoppelt sie nur die Navigation und drückt den Inhalt zusammen. */
@media (max-width: 68rem) {
  .hero__wirmachen { display: none; }
  .hero__rahmen { padding-bottom: 14rem; }
}

@media (max-width: 44rem) {
  .hero__rahmen { padding-top: 6.5rem; padding-bottom: 16.5rem; min-height: min(44rem, 100svh); }
  .hero__title { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
  .hero__lede { font-size: 1.02rem; }
  .hero__zeile { font-size: 0.7rem; letter-spacing: 0.13em; gap: 0.6rem; }
  .hero__zeile span { width: 1.6rem; }
}

@media (max-width: 22.5rem) {
  .hero__zeile { font-size: 0.62rem; letter-spacing: 0.08em; gap: 0; }
  .hero__zeile span { display: none; }
}

/* ==========================================================================
   Ablauf auf schmalen Schirmen: Bild trägt die Zeile, statt darin zu
   verschwinden. Tablet nebeneinander, Handy volle Breite mit Nummer im Bild.
   ========================================================================== */

@media (min-width: 44.0625rem) and (max-width: 68rem) {
  .schritt {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    grid-template-areas: "bild label" "bild titel" "bild text";
    column-gap: var(--raum-3);
    align-content: start;
  }
  .schritt__bild { grid-area: bild; width: 100%; aspect-ratio: 4 / 3; margin: var(--raum-2) 0 0; }
  .schritt__label { grid-area: label; margin-top: var(--raum-2); }
  .schritt h3 { grid-area: titel; }
  .schritt__text { grid-area: text; }
  .schritt__nr { top: var(--raum-2); }
}

@media (max-width: 44rem) {
  .schritt { padding-top: 0; border-top: 0; }

  .schritt__bild {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 var(--raum-2);
    border-radius: var(--rund-m);
  }

  /* Nummer als Plakette auf dem Bild statt frei schwebend */
  .schritt__nr {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: rgba(251, 251, 249, 0.92);
    color: var(--text-hell);
    font-size: 0.85rem;
  }

  .schritt { position: relative; }
  .schritt__label { margin-top: 0; }
  .schritt h3 { font-size: 1.35rem; }
  .schritte__liste { gap: var(--raum-5); }
}

/* ==========================================================================
   Kennzahlen als ruhige Plaketten mit zählenden Ziffern
   ========================================================================== */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  width: 100%;
  margin-top: var(--raum-5);
}

.kennzahlen > div + div { border-left: 0; padding-left: 0; }

.kennzahl__feld {
  border-top: 2px solid var(--text-hell);
  padding-top: var(--raum-2);
}

.kennzahl {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  max-width: none;
}

.kennzahl__wert {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-hell);
}

.kennzahl__zusatz {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-leise);
}

.kennzahl__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
  max-width: none;
}

.kennzahl__label span[aria-hidden] {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--wappen);
  border-radius: 1px;
}

@media (max-width: 44rem) {
  .kennzahlen { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); margin-top: var(--raum-4); }
  .kennzahl__feld { border-top-width: 1px; }
  .kennzahl__wert { font-size: 2.4rem; }
  .kennzahl__label { letter-spacing: 0.1em; }
}

/* Rotes Quadrat sitzt an der ersten Textzeile, auch wenn das Etikett umbricht */
.kennzahl__label { align-items: flex-start; }
.kennzahl__label span[aria-hidden] { margin-top: 0.28em; }

/* ==========================================================================
   Ebene 11: Kontakt als geteilte Karte, WhatsApp-Wege, Hinweiszeile
   ========================================================================== */

.buchleiste__hinweis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.35rem, 0.9vw, 0.7rem);
  z-index: 5;
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(234, 241, 247, 0.6);
  pointer-events: none;
}

.buchleiste { bottom: clamp(2.3rem, 3.6vw, 3.2rem); }

/* Der Schalter der Buchungsleiste traegt die Hausfarbe, weil er zu OpenTable
   fuehrt. Nur wenn der gewaehlte Anlass ueber WhatsApp laeuft, setzt das
   Skript die Klasse --wa und macht ihn gruen. */
.buchleiste__knopf { background: var(--akzent); }
.buchleiste__knopf:hover { background: #8E170F; transform: scale(1.05); }

/* ------------------------------------------------------ geteilte Karte */

.kontakt {
  display: block;
  max-width: none;
  padding: var(--raum-5) clamp(0.6rem, 1.6vw, 1.1rem) 0;
}

.kontakt__karte {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  max-width: calc(var(--breite) + 4rem);
  margin: 0 auto;
  border-radius: var(--rund-xl);
  overflow: hidden;
  box-shadow: 0 34px 80px -50px rgba(8, 16, 26, 0.5);
}

.kontakt__links {
  background: var(--dunkel);
  color: var(--dunkel-leise);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow--dunkelfeld { color: rgba(234, 241, 247, 0.6); display: inline-flex; align-items: center; gap: 0.55rem; }
.eyebrow--dunkelfeld span { width: 7px; height: 7px; background: var(--wappen); border-radius: 1px; }

.kontakt__links h2 { color: var(--dunkel-text); margin-bottom: var(--raum-3); max-width: 14ch; }
.kontakt__links .kursiv { color: rgba(234, 241, 247, 0.65); }

.kontakt__satz { margin: 0 0 var(--raum-4); max-width: 34ch; }

.kontakt__tel {
  display: inline-block;
  margin-bottom: var(--raum-3);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dunkel-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.kontakt__tel:hover { color: #F0837A; }

.wabtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.35rem;
  min-height: 48px;
  border-radius: 999px;
  background: #1FAF57;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}
.wabtn:hover { background: #178f47; transform: translateY(-2px); }
.wabtn svg { flex: none; }

.kontakt__daten {
  margin: var(--raum-4) 0 0;
  padding-top: var(--raum-3);
  border-top: 1px solid var(--dunkel-rand);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kontakt__daten div { display: flex; justify-content: space-between; gap: var(--raum-2); }
.kontakt__daten dt { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(234, 241, 247, 0.55); }
.kontakt__daten dd { margin: 0; font-size: 0.92rem; color: var(--dunkel-text); text-align: right; }

.kontakt__rechts { background: #fff; padding: clamp(2rem, 4.5vw, 3.5rem); }

@media (max-width: 68rem) {
  .kontakt__karte { grid-template-columns: minmax(0, 1fr); }
  .kontakt__karte { border-radius: var(--rund-l); }
}

@media (max-width: 44rem) {
  .kontakt { padding-left: 0.55rem; padding-right: 0.55rem; }
  .kontakt__links, .kontakt__rechts { padding: 1.4rem 1.2rem; }
  .kontakt__daten div { flex-direction: column; gap: 0.1rem; }
  .kontakt__daten dd { text-align: left; }
  .wabtn { width: 100%; justify-content: center; }
  .buchleiste__hinweis { font-size: 0.66rem; }
}

/* ==========================================================================
   Ebene 11: Kontakt als geteilte Karte, WhatsApp, kompakte Kennzahlen
   ========================================================================== */

.kontakt {
  max-width: calc(var(--breite) + 6rem);
  margin: 0 auto;
  padding: var(--raum-4) clamp(1rem, 4vw, 3rem) var(--raum-5);
  display: block;
}

.kontakt__karte {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border-radius: var(--rund-xl);
  overflow: hidden;
  border: 1px solid var(--glas-rand);
  box-shadow: 0 30px 70px -46px rgba(20, 24, 28, 0.5);
  background: #fff;
}

.kontakt__info {
  background: var(--dunkel);
  color: var(--dunkel-leise);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kontakt__info h2 { color: var(--dunkel-text); margin-bottom: var(--raum-3); }
.kontakt__info .kursiv { color: rgba(234, 241, 247, 0.6); }
.kontakt__satz { margin: 0 0 var(--raum-4); max-width: 34ch; }

.kontakt__telefon {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dunkel-text);
  text-decoration: none;
  border-bottom: 2px solid rgba(234, 241, 247, 0.25);
  padding-bottom: 0.2rem;
  margin-bottom: var(--raum-3);
  transition: border-color var(--tempo) var(--kurve);
}
.kontakt__telefon:hover { border-color: var(--akzent-hell); }

.wabtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: #25D366;
  color: #06281733;
  color: #073b1e;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  margin-bottom: var(--raum-4);
  transition: transform var(--tempo) var(--kurve), filter var(--tempo) var(--kurve);
}
.wabtn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.wabtn svg { flex: none; }

.kontakt__daten {
  margin: auto 0 0;
  width: 100%;
  border-top: 1px solid var(--dunkel-rand);
  padding-top: var(--raum-3);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kontakt__daten div { display: flex; justify-content: space-between; gap: var(--raum-2); }
.kontakt__daten dt { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(234, 241, 247, 0.5); }
.kontakt__daten dd { margin: 0; font-size: 0.92rem; text-align: right; color: var(--dunkel-leise); }
.kontakt__daten a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--dunkel-rand); }
.kontakt__daten a:hover { color: var(--dunkel-text); }

.kontakt__formular { padding: clamp(2rem, 4vw, 3.5rem); }
.kontakt__formular form { display: flex; flex-direction: column; }

/* --------------------------------------- Kennzahlen kompakt nebeneinander */

@media (max-width: 44rem) {
  .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-2); }
  .kennzahl__wert { font-size: clamp(1.35rem, 7vw, 1.8rem); }
  .kennzahl__zusatz { display: none; }
  .kennzahl__label { font-size: 0.62rem; letter-spacing: 0.08em; gap: 0.35rem; }

  /* Weniger Luft im Über-uns-Bereich */
  .haus { padding-top: var(--raum-5); padding-bottom: var(--raum-5); gap: var(--raum-3); }
  .haus__bild { margin-bottom: 0; }
  .gross-zweifarbig { margin-bottom: var(--raum-2); }
}

@media (max-width: 68rem) {
  .kontakt__karte { grid-template-columns: minmax(0, 1fr); }
  .kontakt__daten { margin-top: var(--raum-4); }
}

@media (max-width: 44rem) {
  .kontakt { padding-left: 0.75rem; padding-right: 0.75rem; }
  .kontakt__karte { border-radius: var(--rund-l); }
  .kontakt__daten div { flex-direction: column; gap: 0.15rem; }
  .kontakt__daten dd { text-align: left; }
  .wabtn { width: 100%; justify-content: center; }
}

.buchleiste__knopf--wa { background: #1FAF54; }
.buchleiste__knopf--wa:hover { background: #17953F; transform: scale(1.05); }

/* Beilagen zum Salat gehören optisch unter das Gericht, nicht daneben */
.gericht--zusatz {
  margin-left: 1.1rem;
  margin-top: -0.35rem;
}
.gericht--zusatz .gericht__name { font-size: 0.92rem; color: var(--text-leise); }
.gericht--zusatz .gericht__preis { font-size: 0.92rem; color: var(--text-leise); }
.gericht--zusatz .gericht__kopf::after { border-bottom-color: rgba(20, 24, 28, 0.16); }
.gericht--zusatz::marker { color: transparent; }

/* Offene Punkte in den Rechtsseiten sichtbar markieren, damit sie vor dem
   Livegang nicht übersehen werden. */
.recht mark.offen {
  background: rgba(179, 30, 21, 0.1);
  color: var(--akzent);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}

.recht .hinweis {
  border-left: 3px solid var(--linie);
  padding-left: var(--raum-2);
  font-size: 0.9rem;
  color: var(--text-leise);
}

/* ------------------------------------------------- Karte erst auf Klick
   Ohne Klick wird keine Verbindung zu OpenStreetMap aufgebaut. Damit
   braucht die Seite kein Einwilligungsbanner. */

.karte-zwei {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--rund-m);
  overflow: hidden;
  background: var(--grund-2);
  border: 1px solid var(--glas-rand);
}

.karte-zwei__knopf {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--raum-3);
  text-align: center;
  font-family: var(--schrift-text);
  color: var(--text-hell);
  transition: background var(--tempo) var(--kurve);
}

.karte-zwei__knopf:hover { background: var(--grund-3); }

.karte-zwei__zeichen {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 1.1rem;
  padding-left: 3px;
}

.karte-zwei__titel { font-weight: 700; font-size: 1.05rem; }
.karte-zwei__text { font-size: 0.86rem; color: var(--text-leise); max-width: 34ch; }

.karte-zwei iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Live-Anzeige über der Öffnungszeiten-Tabelle */
.status--block {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--raum-3);
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border: 1px solid var(--glas-rand);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-hell);
  max-width: none;
}

.status--block .status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-leise);
  flex: none;
}

.status--block.ist-offen { border-color: rgba(31, 175, 84, 0.45); }
.status--block.ist-offen .status__dot { background: #1FAF54; animation: puls 2.6s infinite; }
.status--block.ist-zu .status__dot { background: var(--text-leise); }


/* --------------------------------------------------------------------------
   Bilder liegen in <picture>, damit moderne Browser WebP bekommen und aeltere
   weiterhin JPEG. display: contents sorgt dafuer, dass die Huelle im Layout
   nicht mitzaehlt und alle bestehenden Regeln fuer img weiter greifen.
   -------------------------------------------------------------------------- */
picture { display: contents; }