/* ==========================================================================
   Trattoria Serafino, Ossenbeck. Relaunch-Entwurf.
   Ein Akzent (Markenrot), ein Radiussystem, ein Modus (dunkel).
   ========================================================================== */

/* --- Schriften, lokal eingebunden ----------------------------------------
   Cormorant Garamond für Überschriften, DM Sans für den Text. Beide als
   Variable Font mit Gewichtsachse. Cormorant hat keine Breitenachse, deshalb
   trägt allein das Gewicht die Hierarchie, nirgends `font-stretch`.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-latin.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 100 1000; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  font-weight: 100 1000; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Flächen. Warmes Fast-Schwarz, kein reines Schwarz, kein Blaustich. */
  --bg:      #14100e;
  --bg-2:    #1d1815;
  --bg-3:    #262019;
  --linie:   rgba(246, 239, 231, .13);
  --linie-2: rgba(246, 239, 231, .07);

  /* Schrift */
  --text:   #f6efe7;
  --text-2: #bdaea1;

  /* Akzent. Genau einer, aus dem Logoschild abgenommen. */
  --rot:      #c6202a;
  --rot-hell: #e0343e;
  --rot-tief: #8d1219;

  /* Goldton der Logoschrift. Kein zweiter Akzent, nur ein Textton. */
  --gold: #f0c97d;

  /* Form. Flächen und Bilder 16px, Bedienelemente Pille. Gemischt wird nicht. */
  --r:      16px;
  --r-klein: 10px;
  --r-pille: 999px;

  --nav-h: 78px;
  --wrap: 1280px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Ebenen. Nur diese vier Werte, nichts dazwischen. */
  --z-band: 1;
  --z-nav: 40;
  --z-mobilleiste: 45;
  --z-korn: 60;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(h1, h2, h3, h4) { font-family: 'Cormorant', ui-serif, Georgia, serif; }

::selection { background: var(--rot); color: #fff; }

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

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

/* Der Symbolvorrat am Anfang des Körpers wird nur ausgelesen, nie gezeigt.
   Das Ausblenden steht hier und nicht als style-Attribut im HTML: Die
   Content-Security-Policy der Domain lässt keine Inline-Stile zu, ein
   style="display:none" wird verworfen. Ohne diese Regel greift oben
   img, svg, video { display: block } und das leere SVG belegt seine
   Standardgröße von 300 x 150 Pixel über der Kopfzeile. */
.symbolvorrat { display: none; }

.springmarke {
  position: absolute; left: var(--pad); top: 8px; z-index: 100;
  transform: translateY(-200%);
  background: var(--rot); color: #fff;
  padding: .6rem 1.1rem; border-radius: var(--r-pille);
  font-weight: 600; font-size: .9rem;
}
.springmarke:focus { transform: translateY(0); }

/* --- Bausteine ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.abschnitt { padding-block: clamp(4.5rem, 11vw, 9rem); }

.titel {
  font-size: clamp(2.35rem, 5.4vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.vorspann {
  color: var(--text-2);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  max-width: 54ch;
  margin-top: 1.1rem;
}

/* Buttons ------------------------------------------------------------------ */
.knopf {
  --f: var(--rot);
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap;
  padding: .95rem 1.6rem;
  border-radius: var(--r-pille);
  background: var(--f);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .25s var(--ease), transform .12s var(--ease),
              box-shadow .25s var(--ease);
  box-shadow: 0 10px 30px -14px rgba(198, 32, 42, .9);
}
.knopf:hover { --f: var(--rot-hell); box-shadow: 0 14px 36px -14px rgba(224, 52, 62, .95); }
.knopf:active { transform: translateY(1px); }
.knopf .ikon { width: 1.15em; height: 1.15em; flex: none; }

.knopf--rand {
  background: transparent;
  color: var(--text);
  border-color: var(--linie);
  box-shadow: none;
}
.knopf--rand:hover {
  background: rgba(246, 239, 231, .07);
  border-color: rgba(246, 239, 231, .28);
  box-shadow: none;
}

.ikon { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

/* Zustandsanzeige. Der Punkt zeigt einen echten Zustand, keine Deko. -------- */
.status {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem .45rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-pille);
  background: rgba(246, 239, 231, .04);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-2);
}
.status b { color: var(--text); font-weight: 600; }
.status__punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--text-2); flex: none;
}
.status[data-offen="ja"] .status__punkt {
  background: #4fc47a;
  box-shadow: 0 0 0 0 rgba(79, 196, 122, .55);
  animation: puls 2.6s var(--ease) infinite;
}
.status[data-offen="nein"] .status__punkt { background: var(--rot); }
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(79, 196, 122, .5); }
  70%  { box-shadow: 0 0 0 .55rem rgba(79, 196, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 196, 122, 0); }
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
/* ── Hinweisband ───────────────────────────────────────────
   Betriebsurlaub, kurzfristige Änderungen. Kommt aus dem
   Pflegebereich und ist meistens gar nicht da.

   Steht über der Navigation im normalen Fluss und scrollt mit weg.
   Das geht nur, weil .nav sticky ist und nicht fixed: bei einem
   festen Kopf läge das Band unsichtbar dahinter.

   Gold mit dunkler Schrift — der einzige Ton der Seite, der laut
   genug ist, ohne mit dem Rot des Logoschilds zu streiten. */
.hinweisband {
  background: var(--gold);
  color: var(--bg);
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.hinweisband p {
  margin: 0 auto;
  max-width: var(--wrap);
  padding: .7rem var(--pad);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav[data-fest="ja"] {
  background: rgba(20, 16, 14, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--linie-2);
}
@media (prefers-reduced-transparency: reduce) {
  .nav[data-fest="ja"] { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav__innen {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}

.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
/* Das Logo ist ein breites Schild (5:3). Es trägt die Kopfzeile, deshalb
   nimmt es rund zwei Drittel der Leistenhöhe ein. */
.marke__bild { height: 56px; width: auto; }
.marke__text { display: none; }
.marke.ohne-bild .marke__bild { display: none; }
.marke.ohne-bild .marke__text { display: block; }
.marke__name {
  font-family: 'Cormorant', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 1.62rem; line-height: 1;
  letter-spacing: .06em;
  color: var(--gold);
  text-transform: uppercase;
}
.marke__zusatz {
  font-size: .62rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-2); margin-top: .2rem;
}

.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__links a {
  text-decoration: none; font-size: .95rem; font-weight: 500;
  color: var(--text-2);
  transition: color .2s var(--ease);
  position: relative;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1.5px; background: var(--rot);
  transition: right .3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { right: 0; }

.nav__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-pille);
  font-size: .92rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav__tel:hover { border-color: rgba(246, 239, 231, .32); background: rgba(246, 239, 231, .06); }
.nav__tel .ikon { color: var(--rot-hell); }

/* ==========================================================================
   Kopfbereich
   ========================================================================== */
.kopf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  min-height: min(calc(100dvh - var(--nav-h)), 780px);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.kopf::before {
  /* Warmer Lichtschein, greift das Leuchtschild auf dem Foto auf. */
  content: ''; position: absolute; inset: -20% 40% 0 -20%;
  background: radial-gradient(60% 55% at 30% 40%, rgba(198, 32, 42, .20), transparent 70%);
  pointer-events: none; z-index: 0;
}
.kopf__text {
  position: relative; z-index: 1;
  padding-left: var(--pad);
  max-width: 640px;
  margin-left: auto;
  padding-right: clamp(0rem, 2vw, 2rem);
  width: 100%;
}
.kopf__wrap { max-width: 640px; margin-left: auto; }

.kopf h1 {
  font-size: clamp(2.9rem, 6.6vw, 5.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-top: 1.4rem;
  text-wrap: balance;
}
.kopf h1 .ort { color: var(--gold); font-weight: 600; }

.kopf__unter {
  color: var(--text-2);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  max-width: 46ch;
  margin-top: 1.4rem;
}
.kopf__aktion { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }

.kopf__bild {
  position: relative;
  height: 100%;
  min-height: 340px;
  border-radius: var(--r) 0 0 var(--r);
  overflow: hidden;
}
/* Der Leuchtschriftzug sitzt am linken Bildrand, deshalb wird von links
   angeschnitten und nicht aus der Mitte. */
.kopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.kopf__bild::after {
  content: ''; position: absolute; inset: 0;
  /* Nur ein schmaler Saum zur Textspalte. Breiter darf er nicht sein, sonst
     liegt der Schriftzug im Dunkeln. */
  background: linear-gradient(90deg, var(--bg) 0%, rgba(20, 16, 14, .34) 8%, rgba(20, 16, 14, 0) 26%),
              linear-gradient(0deg, rgba(20, 16, 14, .42), transparent 42%);
}

/* ==========================================================================
   Geschichte. Versetztes Redaktionslayout.
   ========================================================================== */
.geschichte { position: relative; }
.geschichte__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.geschichte__text { grid-column: 1 / 6; padding-top: clamp(1rem, 4vw, 3.5rem); }
.geschichte__text h2 { font-size: clamp(2.2rem, 4.7vw, 3.6rem); font-weight: 500;
  line-height: 1.12; letter-spacing: -.005em; }
.geschichte__text h2 .zahl { color: var(--gold); }
.geschichte__text p { color: var(--text-2); margin-top: 1.4rem; max-width: 40ch; }

.signatur {
  margin-top: 2rem; padding-top: 1.3rem;
  border-top: 1px solid var(--linie);
  display: inline-flex; flex-direction: column; gap: .15rem;
}
.signatur__name {
  font-family: 'Cormorant', ui-serif, Georgia, serif;
  font-size: 1.62rem; font-weight: 600;
  color: var(--text);
}
.signatur__rolle { font-size: .82rem; color: var(--text-2); letter-spacing: .04em; }

.geschichte__bild {
  grid-column: 7 / 13;
  margin-top: clamp(0rem, -4vw, 0rem);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.geschichte__bild img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Die Karte. Bento, sieben Felder für sieben Kategorien.
   ========================================================================== */
.karte__kopf { margin-bottom: clamp(2rem, 4vw, 3.2rem); max-width: 58ch; }

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(158px, auto);
  gap: .9rem;
}
.feld {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--linie-2);
  text-decoration: none;
  isolation: isolate;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.feld:hover { transform: translateY(-4px); border-color: rgba(246, 239, 231, .2); }
.feld:active { transform: translateY(-1px); }

.feld__bild { position: absolute; inset: 0; z-index: -2; }
.feld__bild img { width: 100%; height: 100%; object-fit: cover; }
.feld--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(15, 11, 10, .93) 0%, rgba(15, 11, 10, .55) 45%,
              rgba(15, 11, 10, .2) 100%);
}
.feld--foto .feld__bild img { transition: transform .7s var(--ease); }
.feld--foto:hover .feld__bild img { transform: scale(1.055); }
.feld--fleisch .feld__bild img { object-position: 48% 56%; }
.feld--salate .feld__bild img { object-position: 58% 54%; }
.feld--vorspeisen .feld__bild img { object-position: 58% 55%; }
.feld--rollo .feld__bild img { object-position: 48% 52%; }

.feld__name {
  font-family: 'Cormorant', ui-serif, Georgia, serif;
  font-size: clamp(1.32rem, 2vw, 1.78rem);
  font-weight: 600;
  line-height: 1.16; letter-spacing: 0;
  color: var(--text);
}
.feld__was { color: var(--text-2); font-size: .88rem; margin-top: .3rem; line-height: 1.45; }
.feld__pfeil {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(246, 239, 231, .09);
  color: var(--text);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.feld:hover .feld__pfeil { opacity: 1; transform: translate(0, 0); background: var(--rot); color: #fff; }
.feld__pfeil .ikon { width: 1rem; height: 1rem; }

.feld--pizza      { grid-area: 1 / 1 / 3 / 3; }
.feld--pizza .feld__name { font-size: clamp(1.9rem, 3.4vw, 2.95rem); font-weight: 600; }
.feld--pasta      { grid-area: 1 / 3 / 2 / 5; }
.feld--fleisch    { grid-area: 2 / 3 / 3 / 4; }
.feld--salate     { grid-area: 2 / 4 / 3 / 5; }
.feld--vorspeisen { grid-area: 3 / 1 / 4 / 2; }
.feld--rollo      { grid-area: 3 / 2 / 4 / 3; }
.feld--auflaeufe  { grid-area: 3 / 3 / 4 / 5; }

.karte__fuss { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.karte__hinweis { color: var(--text-2); font-size: .88rem; }

/* ==========================================================================
   Räume. Linke Spalte bleibt stehen, rechte läuft durch.
   ========================================================================== */
.raeume__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.raeume__fest { position: sticky; top: calc(var(--nav-h) + 3rem); align-self: start; }
.raeume__fest .knopf { margin-top: 2rem; }

.raeume__liste { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.raum {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  align-items: center;
  padding: 1.2rem;
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  background: var(--bg-2);
}
.raum__bild { border-radius: var(--r-klein); overflow: hidden; aspect-ratio: 4 / 3; }
.raum__bild img { width: 100%; height: 100%; object-fit: cover; }
.raum h3 {
  font-size: clamp(1.38rem, 2.1vw, 1.82rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.2;
}
.raum p { color: var(--text-2); font-size: .95rem; margin-top: .6rem; }

/* ==========================================================================
   Bildband über die volle Breite
   ========================================================================== */
.band {
  position: relative;
  isolation: isolate;
  min-height: min(78dvh, 640px);
  display: grid; place-items: center;
  overflow: hidden;
  z-index: var(--z-band);
}
.band__bild { position: absolute; inset: 0; z-index: -2; }
.band__bild img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(20, 16, 14, .55) 28%,
              rgba(20, 16, 14, .68) 72%, var(--bg) 100%);
}
.band__satz {
  font-family: 'Cormorant', ui-serif, Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 4.7rem);
  font-weight: 500;
  line-height: 1.14; letter-spacing: -.005em;
  text-align: center; text-wrap: balance;
  max-width: 16ch;
  padding-inline: var(--pad);
}
.band__satz .gold { color: var(--gold); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band__bild img {
      animation: bandZoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes bandZoom {
      from { transform: scale(1.16); }
      to   { transform: scale(1.0); }
    }
  }
}

/* ==========================================================================
   Besuch. Zeiten links, Anfahrt rechts.
   ========================================================================== */
.besuch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.zeiten { margin-top: 2rem; }
.zeiten__block + .zeiten__block { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.zeiten__reihe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .42rem 0;
}
.zeiten__tag { color: var(--text-2); font-size: .98rem; }
.zeiten__zeit { font-variant-numeric: tabular-nums; font-weight: 500; }
.zeiten__reihe[data-heute="ja"] .zeiten__tag,
.zeiten__reihe[data-heute="ja"] .zeiten__zeit { color: var(--gold); font-weight: 600; }
.zeiten__reihe[data-heute="ja"] .zeiten__tag::after {
  content: 'heute'; margin-left: .6rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); background: var(--gold);
  padding: .12rem .45rem; border-radius: var(--r-pille);
  vertical-align: .12em;
}

.anfahrt { display: grid; gap: 1.5rem; margin-top: 2rem; }
.zeile { display: flex; gap: 1rem; align-items: center; text-decoration: none; }
.zeile__ikon {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(246, 239, 231, .06);
  border: 1px solid var(--linie-2);
  color: var(--gold);
  transition: background .25s var(--ease), color .25s var(--ease);
}
a.zeile:hover .zeile__ikon { background: var(--rot); color: #fff; border-color: transparent; }
.zeile__wert { font-size: 1.06rem; font-weight: 500; }
.zeile__wert .neben { display: block; font-weight: 400; color: var(--text-2); font-size: .93rem; margin-top: .15rem; }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.fuss { border-top: 1px solid var(--linie); padding-block: 3rem 2.5rem; }
.fuss__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; justify-content: space-between; }
.fuss__adresse { color: var(--text-2); font-size: .94rem; line-height: 1.8; }
.fuss__adresse strong { color: var(--text); font-weight: 600; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .92rem; }
.fuss__nav a { color: var(--text-2); text-decoration: none; transition: color .2s var(--ease); }
.fuss__nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Feste Leiste auf dem Handy
   ========================================================================== */
.mobilleiste {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobilleiste);
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  gap: .6rem;
  background: rgba(20, 16, 14, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie-2);
}
.mobilleiste .knopf { flex: 1; justify-content: center; padding-block: .85rem; font-size: .95rem; }

/* ==========================================================================
   Seite Speisekarte
   ========================================================================== */
.sk-kopf { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.sk-kopf h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 500;
  line-height: 1.1; letter-spacing: -.005em;
}
.zurueck {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text-2); text-decoration: none; font-size: .9rem; margin-bottom: 1.2rem;
  transition: color .2s var(--ease);
}
.zurueck:hover { color: var(--text); }
.zurueck .ikon { width: .9rem; height: .9rem; transform: rotate(180deg); }

.reiter {
  position: sticky; top: var(--nav-h); z-index: 30;
  display: flex; gap: .5rem; overflow-x: auto;
  padding: .8rem 0;
  background: rgba(20, 16, 14, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie-2);
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  flex: none; padding: .5rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--r-pille);
  font-size: .88rem; font-weight: 500; text-decoration: none; color: var(--text-2);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.reiter a:hover { color: var(--text); border-color: rgba(246, 239, 231, .3); }
.reiter a[aria-current="true"] { background: var(--rot); border-color: var(--rot); color: #fff; }

.gruppe { padding-block: clamp(2.2rem, 5vw, 3.5rem); scroll-margin-top: calc(var(--nav-h) + 70px); }
.gruppe + .gruppe { border-top: 1px solid var(--linie-2); }
.gruppe > h2 {
  font-size: clamp(1.9rem, 3.9vw, 2.85rem); font-weight: 500;
  letter-spacing: -.005em; line-height: 1.14;
}
.gruppe__unter { color: var(--text-2); font-size: .95rem; margin-top: .5rem; max-width: 56ch; }
.gruppe h3 {
  font-size: 1.34rem; font-weight: 600;
  color: var(--gold); letter-spacing: .01em;
  margin-top: 2.4rem; margin-bottom: .5rem;
}

/* Gerichte als Kartenraster, nicht als Zeilenliste mit Linie unter jeder Zeile. */
.gerichte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .6rem;
  margin-top: 1.5rem;
  list-style: none; padding: 0;
}
.gericht {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: .1rem .8rem;
  align-items: baseline;
  padding: .85rem 1rem;
  border-radius: var(--r-klein);
  background: var(--bg-2);
  border: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.gericht:hover { background: var(--bg-3); border-color: var(--linie-2); }
.gericht__nr {
  font-variant-numeric: tabular-nums;
  font-size: .82rem; color: var(--text-2); grid-row: 1;
}
.gericht__name { font-weight: 600; grid-row: 1; }
.gericht__preis {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--gold); white-space: nowrap; grid-row: 1;
}
.gericht__was {
  grid-column: 2 / 4; grid-row: 2;
  color: var(--text-2); font-size: .88rem; line-height: 1.5; margin-top: .15rem;
}
.gericht__preis small { color: var(--text-2); font-weight: 400; font-size: .78em; }

.sk-fuss {
  margin-top: 1rem; padding: 1.4rem 1.5rem;
  border: 1px solid var(--linie); border-radius: var(--r);
  color: var(--text-2); font-size: .9rem;
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.recht { max-width: 68ch; padding-block: clamp(2.5rem, 6vw, 4rem) 5rem; }
.recht h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 500; letter-spacing: -.005em; line-height: 1.14; }
.recht h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2.4rem; color: var(--gold); }
.recht p, .recht li { color: var(--text-2); margin-top: .9rem; }
.recht ul { padding-left: 1.2rem; }
.recht a { color: var(--text); text-underline-offset: 3px; }
.recht .luecke {
  background: rgba(198, 32, 42, .16);
  border-bottom: 1px dashed var(--rot-hell);
  color: var(--text); padding: 0 .25rem; border-radius: 3px;
}

/* ==========================================================================
   Bildplatzhalter. Greift erst, wenn die Datei fehlt (.leer setzt das JS
   per onerror). Liegt die echte Datei, ist hier nichts aktiv.
   ========================================================================== */
.platzhalter.leer { position: relative; background: linear-gradient(150deg, #2a211b, #171210); }
.platzhalter.leer img { opacity: 0; }

/* Freistehende Bildflächen zeigen an, welche Datei hier hingehört. */
.platzhalter.leer:not(.feld)::before {
  content: attr(data-brief);
  position: absolute; inset: 0;
  display: grid; place-content: center; align-content: center;
  text-align: center; padding: 1.2rem;
  font-size: .76rem; line-height: 1.6; letter-spacing: .04em;
  color: rgba(246, 239, 231, .46);
  white-space: pre-line;
}

/* Im Bentoraster keine Beschriftung, sonst kollidiert sie mit dem Kategorie-
   namen. Stattdessen unterschiedliche warme Flächen, damit das Raster auch
   dann lesbar und abwechslungsreich bleibt, wenn einzelne Fotos fehlen. */
.feld--foto.leer::after { opacity: .5; }
.feld--pizza.leer     { background: radial-gradient(95% 95% at 72% 18%, #3d2419, #17110e); }
.feld--pasta.leer     { background: linear-gradient(112deg, #302518, #191310); }
.feld--fleisch.leer   { background: radial-gradient(100% 100% at 25% 75%, #3b2119, #17110e); }
.feld--salate.leer    { background: linear-gradient(145deg, #252b1c, #171310); }
.feld--vorspeisen.leer { background: linear-gradient(155deg, #342619, #18120f); }
.feld--rollo.leer     { background: radial-gradient(110% 100% at 30% 60%, #382218, #17110e); }
.feld--auflaeufe.leer { background: linear-gradient(202deg, #33231d, #1a1310); }

/* ==========================================================================
   Bewegung
   ========================================================================== */
/* Das Einblenden greift nur, wenn JavaScript läuft. Ohne JavaScript steht
   alles sofort da, statt unsichtbar zu bleiben. Die Klasse setzt ein kurzes
   Inline-Skript im Kopf der Seite. */
.js [data-auf] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
.js [data-auf="ja"] { opacity: 1; transform: none; }

/* Staffelung der Einblendungen. Aus demselben Grund wie oben als Klassen und
   nicht als style="--verzug:120ms" am Element. */
.verzug-70  { --verzug:  70ms; }
.verzug-110 { --verzug: 110ms; }
.verzug-120 { --verzug: 120ms; }
.verzug-140 { --verzug: 140ms; }
.verzug-210 { --verzug: 210ms; }
.verzug-220 { --verzug: 220ms; }
.verzug-280 { --verzug: 280ms; }
.verzug-350 { --verzug: 350ms; }
.verzug-420 { --verzug: 420ms; }

.kopf__text > * { animation: einzug .85s var(--ease) both; }
.kopf__text > .status  { animation-delay: .05s; }
.kopf__text > h1       { animation-delay: .14s; }
.kopf__text > .kopf__unter { animation-delay: .26s; }
.kopf__text > .kopf__aktion { animation-delay: .36s; }
@keyframes einzug {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.kopf__bild img { animation: setzen 1.5s var(--ease) both; }
@keyframes setzen {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-auf] { opacity: 1; transform: none; }
  .status[data-offen="ja"] .status__punkt { animation: none; box-shadow: none; }
}

/* ==========================================================================
   Kleinere Schirme
   ========================================================================== */
@media (max-width: 1023px) {
  .kopf {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2rem;
  }
  .kopf::before { inset: -10% 0 40% -30%; }
  .kopf__text { max-width: none; margin-left: 0; padding-inline: var(--pad); }
  .kopf__bild { border-radius: var(--r); margin-inline: var(--pad); aspect-ratio: 16 / 10; min-height: 0; }
  .kopf__bild::after { background: linear-gradient(0deg, rgba(20, 16, 14, .5), transparent 55%); }

  .geschichte__text { grid-column: 1 / 13; }
  .geschichte__bild { grid-column: 1 / 13; }

  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(150px, auto); }
  .feld--pizza      { grid-area: 1 / 1 / 3 / 3; }
  .feld--pasta      { grid-area: 3 / 1 / 4 / 3; }
  .feld--fleisch    { grid-area: 4 / 1 / 5 / 2; }
  .feld--salate     { grid-area: 4 / 2 / 5 / 3; }
  .feld--vorspeisen { grid-area: 5 / 1 / 6 / 2; }
  .feld--rollo      { grid-area: 5 / 2 / 6 / 3; }
  .feld--auflaeufe  { grid-area: 6 / 1 / 7 / 3; }

  .raeume__grid { grid-template-columns: 1fr; }
  .raeume__fest { position: static; }
  .besuch__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --nav-h: 68px; }
  body { padding-bottom: 4.6rem; }

  .nav__links { display: none; }
  .nav__tel span { display: none; }
  /* Klickflächen auf dem Handy großzügig genug zum Treffen. */
  .nav__tel { padding: .55rem .78rem; min-height: 42px; }
  .marke { padding-block: .4rem; }
  .fuss__nav { gap: .2rem 1.4rem; }
  .fuss__nav a { padding-block: .55rem; }
  .marke__bild { height: 46px; }
  .marke__name { font-size: 1.4rem; }

  .kopf h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .kopf__aktion .knopf { flex: 1; justify-content: center; }

  .bento { grid-template-columns: 1fr; }
  .feld { grid-area: auto !important; min-height: 148px; }
  .feld--pizza { min-height: 230px; }

  .raum { grid-template-columns: 1fr; padding: 1rem; }
  .raum__bild { aspect-ratio: 16 / 10; }

  .gerichte { grid-template-columns: 1fr; }
  .zeile__wert { font-size: 1rem; }
  .mobilleiste { display: flex; }
  .reiter { top: var(--nav-h); }
}