/* ==========================================================================
   TILL – zweite Gestaltung (Fassung B)
   Eigenständiges Stylesheet für /v2/ – wird nur dort geladen.
   Leitidee: das Hummer-Gemälde aus dem Gastraum als Markenzeichen.
   Farben aus dem Bild: Rot #c5321a · Ocker #e0a33c · Jute #b7895a
   Markenfarben: Creme #f4f0e7 · Terracotta #c85a32
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2?v=2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2?v=2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Ersatzschriften mit angeglichenen Maßen (gemessen 30.09.2026).
   Bis die Web-Schriften eingetroffen sind, zeigt der Browser diese Fassung –
   sie belegt fast dieselbe Breite und Höhe. Vorher sprangen die Überschriften
   beim Umschalten um (Layout-Sprung CLS 0,38), weil Georgia/Arial schmaler sind. */
@font-face {
  font-family: "Fraunces Ersatz";
  src: local("Georgia"), local("Times New Roman");
  font-weight: 300 900;      /* ohne diese Zeile greift bei fetten Überschriften
                                wieder das unkorrigierte Georgia (Sprung!) */
  font-style: normal;
  size-adjust: 110%;
  ascent-override: 97.9%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial"), local("Helvetica");
  font-weight: 300 700;
  font-style: normal;
  size-adjust: 104.7%;
  ascent-override: 97.9%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --nacht: #14110e;
  --nacht-hell: #1e1a15;
  --nacht-linie: rgba(244, 240, 231, 0.14);
  --kreide: #f4f0e7;
  --kreide-70: rgba(244, 240, 231, 0.72);
  --kreide-45: rgba(244, 240, 231, 0.45);
  --rot: #c5321a;
  --rot-hell: #e2452a;
  --ocker: #e0a33c;
  --jute: #b7895a;
  --display: "Fraunces", "Fraunces Ersatz", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text: "Inter", "Inter Ersatz", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --breite: 1200px;
  --lesebreite: 42rem;
  --radius: 999px;
  --kopf-hoehe: 72px;
  --kopf-ist: var(--kopf-hoehe);
}

@media (max-width: 620px) {
  :root { --kopf-hoehe: 62px; }
}
@media (min-width: 1700px) {
  :root { --breite: 1320px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--kreide);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ocker); }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 100;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
}
h1 { font-size: clamp(2.4rem, 9vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 6vw, 3.6rem); }
h3 { font-size: clamp(1.25rem, 3.6vw, 1.9rem); }
p { margin: 0 0 1.15em; }

.innen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: clamp(0.875rem, 4vw, 1.75rem);
}

/* Nur für Vorleseprogramme und Suchmaschinen – für das Auge unsichtbar.
   Nötig auf Seiten, deren sichtbare Gestaltung keine eigene Seitenüberschrift
   vorsieht (Rechtstexte, Speisekarte). Eine Seite ohne h1 ist für Suchmaschinen
   unklar; eine sichtbare Überschrift würde die abgestimmte Gestaltung ändern. */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kreide); color: var(--nacht); padding: 0.75rem 1.25rem;
}
.sprungmarke:focus { left: 0; }

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ocker);
  margin: 0 0 1rem;
}

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 17, 14, 0.9);
  border-bottom: 1px solid var(--nacht-linie);
}
@supports (backdrop-filter: blur(8px)) {
  .kopf { backdrop-filter: blur(8px); }
}
.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--kopf-hoehe);
}

/* Wortmarke: das vollständige Original-Logo — Schriftzug T[Figur]LL, Tagline und
   Spielkarten-Zeile — als freigestellte Fassung für den dunklen Grund.
   Erzeugt von tools/logo_hell_machen.py (nicht von Hand bearbeiten).
   Breite so gewählt, dass das Logo in die vorhandene Kopfzeilenhöhe passt:
   152 px Breite -> 65 px Höhe bei 72 px Kopfzeile. */
.wortmarke { display: block; flex: 0 0 auto; }
.wortmarke img { display: block; width: clamp(104px, 12vw, 152px); height: auto; }

.nav { display: none; }
.nav ul { display: flex; gap: clamp(1rem, 2.6vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--kreide-70);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--kreide); border-bottom-color: var(--rot); }

.knopf {
  display: inline-block;
  background: var(--rot);
  color: var(--kreide);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.knopf:hover { background: var(--rot-hell); color: var(--kreide); }
.knopf--hell { background: var(--kreide); color: var(--nacht); }
.knopf--hell:hover { background: #fff; color: var(--nacht); }
.knopf--rand { background: none; border: 1px solid var(--kreide-45); color: var(--kreide); }
.knopf--rand:hover { background: var(--kreide); color: var(--nacht); }
.knopf--gross { padding: 1rem 2rem; font-size: 1.05rem; }

.kopf__aktion { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
@media (max-width: 400px) {
  .kopf__aktion > .knopf { padding: 0.55rem 0.85rem; font-size: 0.85rem; }
}

.menue-knopf {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--kreide-45);
  border-radius: 10px;
  cursor: pointer;
}
.menue-knopf span { display: block; height: 2px; background: var(--kreide); transition: transform 0.2s ease, opacity 0.2s ease; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobil-navi { display: none; border-top: 1px solid var(--nacht-linie); }
.mobil-navi.offen { display: block; }
.mobil-navi ul { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.mobil-navi li { border-bottom: 1px solid var(--nacht-linie); }
.mobil-navi li:last-child { border-bottom: 0; }
.mobil-navi a { display: block; padding: 1rem 0; text-decoration: none; font-size: 1.08rem; }
.mobil-navi .knopf { display: block; margin-top: 1rem; }

@media (min-width: 900px) {
  .nav { display: block; }
  .menue-knopf { display: none; }
}

/* --- Hauptbanner --------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 74vh, 780px);
  background: var(--nacht);
  overflow: hidden;
  isolation: isolate;
}
.hero__bilder { position: absolute; inset: 0; }
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero__bild.ist-da { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0.72) 0%, rgba(20, 17, 14, 0.55) 45%, rgba(20, 17, 14, 0.95) 100%);
}
.hero__inhalt {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(3rem, 9vw, 6.5rem) 1.25rem;
  max-width: 54rem;
}
/* Zeilenumbruch ausgleichen, damit keine einzelne Silbe/Nummer allein steht */
.hero__inhalt p, .hero h1, .abschnitt__kopf h1, .abschnitt__kopf h2 { text-wrap: balance; }
.hero .kicker { max-width: 28rem; margin-inline: auto; }
.hero h1 { color: var(--kreide); }
.hero h1 em { font-style: normal; color: var(--ocker); }
.hero p {
  color: var(--kreide-70);
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  max-width: 34em;
  margin: 0 auto 2rem;
}
.hero__aktion { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

.hero__pause {
  position: absolute;
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--kreide-45);
  background: rgba(20, 17, 14, 0.45);
  cursor: pointer;
}
.hero__pause:hover { background: rgba(20, 17, 14, 0.75); }
.hero__pause-zeichen {
  display: block;
  width: 9px; height: 11px;
  border-left: 3px solid var(--kreide);
  border-right: 3px solid var(--kreide);
}
.hero__pause[aria-pressed="true"] .hero__pause-zeichen {
  width: 0; height: 0;
  border-left: 9px solid var(--kreide);
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
@media (pointer: coarse) { .hero__pause { width: 44px; height: 44px; } }
@media (orientation: landscape) and (max-height: 540px) {
  .hero { min-height: 0; }
  .hero__inhalt { padding-block: clamp(1.25rem, 4vh, 2.5rem); }
  .hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
  .hero p { font-size: 0.95rem; margin-bottom: 1rem; }
  .hero .knopf--gross { padding: 0.8rem 1.6rem; font-size: 1rem; }
}

/* --- Kunstwerk ----------------------------------------------------------- */
.kunst {
  position: relative;
  z-index: 3;
  margin-top: clamp(-90px, -6vw, -40px);
  padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
}
.kunst__paar {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
.kunst__rahmen {
  position: relative;
  margin: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.2deg);
}
.kunst__rahmen img { width: 100%; }
.kunst__rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244, 240, 231, 0.16);
  pointer-events: none;
}
.kunst__text h2 { margin-bottom: 0.35em; }
.kunst figcaption {
  font-size: 0.85rem;
  color: var(--kreide-45);
  margin-top: 0.9rem;
  transform: rotate(1.2deg);
}
@media (min-width: 900px) {
  .kunst__paar { grid-template-columns: 1.05fr 0.95fr; }
}

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { padding: clamp(2.75rem, 7vw, 5rem) 0; }
.abschnitt--linie { border-top: 1px solid var(--nacht-linie); }
.abschnitt--hell { background: var(--kreide); color: var(--nacht); }
.abschnitt--hell .kicker { color: var(--rot); }
.abschnitt--hell h2 { color: var(--nacht); }
.abschnitt--hell a:hover { color: var(--rot); }

.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }

.fliesstext { max-width: var(--lesebreite); }
.fliesstext p { font-size: 1.05rem; }
.fliesstext h3 { margin-top: 2rem; }
.fliesstext h3:first-child { margin-top: 0; }
.fliesstext--mittig { text-align: center; margin-inline: auto; }

.zweispalt { display: grid; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start; }
.zweispalt figure { margin: 0; }
.zweispalt img { border-radius: 2px; }
@media (min-width: 900px) {
  .zweispalt { grid-template-columns: 1.05fr 0.95fr; }
  .zweispalt--umgekehrt > figure { order: -1; }
  .zweispalt .fliesstext { max-width: none; }
}

/* Kapitelnummern */
.kapitel__nr {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rot);
  margin-bottom: 0.15em;
}
.abschnitt--hell .kapitel__nr { color: var(--rot); }

/* Zitat */
.zitat {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  max-width: 30em;
}
.zitat__quelle { font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kreide-45); }
.abschnitt--hell .zitat__quelle { color: rgba(29, 29, 26, 0.55); }

/* --- Mosaik-Galerie ------------------------------------------------------ */
.mosaik { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
.mosaik__feld {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 2px;
}
.mosaik__feld img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; }
.mosaik__feld:hover img { transform: scale(1.04); filter: brightness(1.08); }
/* unregelmäßiges Raster: einige Felder nehmen zwei Spalten ein */
.mosaik__feld--breit { grid-column: span 2; aspect-ratio: 16 / 9; }
.mosaik__feld--hoch { aspect-ratio: 3 / 4; }
.mosaik__feld--quadrat { aspect-ratio: 1 / 1; }
@media (min-width: 760px) {
  .mosaik { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .mosaik { gap: 0.7rem; }
}

/* --- Aus der Küche (Startseite) ------------------------------------------ */
.gerichte {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
}
.gerichte figure { margin: 0; border-radius: 2px; overflow: hidden; }
.gerichte img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 700px) {
  .gerichte { grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
}

/* --- Lage (Startseite) ---------------------------------------------------- */
.lage__adresse {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin-top: 1.2rem;
}

/* Knopfzeile unter einem Abschnitt (zentriert) */
.abschnitt__fuss { margin-top: clamp(1.2rem, 4vw, 2rem); text-align: center; }
.abschnitt__fuss .knopf { margin: 0.3rem 0.25rem; }

/* --- Geschichte (Zeitleiste) --------------------------------------------- */
.station__jahr {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rot);
  margin-bottom: 0.15em;
}
.zweispalt figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--kreide-45);
}

/* --- Band (Öffnungszeiten / Reservieren) --------------------------------- */
.band {
  background: var(--rot);
  color: var(--kreide);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}
.band h2, .band h3 { color: var(--kreide); }
.band a:hover { color: var(--kreide); }
.band__paar { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .band__paar { grid-template-columns: 1fr 1fr; } }

.zeiten { max-width: 26rem; }
.zeiten .zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(244, 240, 231, 0.32);
  font-size: 1.05rem;
}
.zeiten .zeile dt { font-weight: 500; }
.zeiten .zeile dd { margin: 0; font-variant-numeric: tabular-nums; }
.zeiten__hinweis { font-family: var(--display); font-size: 1.25rem; font-weight: 600; margin: 1.2rem 0 0.4rem; }
.zeiten__note { font-size: 0.92rem; color: rgba(244, 240, 231, 0.8); margin: 0; }

.reservieren__aktion { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.reservieren__telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border: 1px solid rgba(244, 240, 231, 0.5);
  border-radius: var(--radius);
  padding: 0.85rem 1.5rem;
  min-height: 44px;
}

/* --- Speisekarte --------------------------------------------------------- */
.karte { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* WICHTIG: Grid- und Flex-Elemente haben standardmäßig min-width:auto und werden
   dann von breitem Inhalt (z. B. der scrollenden Chips-Leiste) aufgezogen – die
   ganze Seite läuft waagerecht über. min-width:0 lässt sie schrumpfen und den
   Inhalt stattdessen in seinem eigenen Container scrollen. */
.karte > *,
.kunst__paar > *,
.zweispalt > *,
.band__paar > *,
.kontakt__paar > *,
.fuss__raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .karte { grid-template-columns: 15rem 1fr; }
}
.karten-rail { position: sticky; top: calc(var(--kopf-ist) + 1.5rem); display: none; }
@media (min-width: 1000px) { .karten-rail { display: block; } }
.karten-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.karten-rail li { counter-increment: k; border-bottom: 1px solid var(--nacht-linie); }
.karten-rail a {
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 0;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--kreide-70);
}
.karten-rail a::before {
  content: counter(k, decimal-leading-zero);
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--rot);
}
.karten-rail a:hover, .karten-rail a.aktiv { color: var(--kreide); }

.karten-chips { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0 0 0.75rem; margin-bottom: 1rem; scrollbar-width: thin; }
.karten-chips ul { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.karten-chips a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kreide-70);
  border: 1px solid var(--nacht-linie);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
}
.karten-chips a.aktiv, .karten-chips a:hover { color: var(--nacht); background: var(--kreide); border-color: var(--kreide); }
@media (min-width: 1000px) { .karten-chips { display: none; } }

.karte__monat {
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0.3rem;
}
.karte__unter { color: var(--kreide-45); font-size: 0.95rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.legende {
  border: 1px solid var(--nacht-linie);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  font-size: 0.92rem;
  color: var(--kreide-70);
  margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}
.legende p { margin: 0 0 0.4rem; }
.legende p:last-child { margin-bottom: 0; }
.legende__codes { list-style: none; margin: 0.6rem 0 0.4rem; padding: 0; display: grid; gap: 0.3rem 1.5rem; }
.legende__codes li { display: flex; gap: 0.6rem; align-items: baseline; }
.legende__codes .code {
  flex: 0 0 auto; min-width: 1.7rem; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--kreide); background: rgba(197, 50, 26, 0.35);
  border-radius: 3px; padding: 0 0.35rem; line-height: 1.5;
}
@media (min-width: 620px) { .legende__codes { grid-template-columns: 1fr 1fr; } }

.kategorie { margin-bottom: clamp(2.4rem, 6vw, 3.75rem); scroll-margin-top: calc(var(--kopf-ist) + 5.5rem); }
.kategorie > h3 { border-bottom: 2px solid var(--rot); padding-bottom: 0.5rem; }
.kategorie__hinweis {
  font-size: 0.88rem;
  color: var(--kreide-45);
  margin: 0.6rem 0 1.4rem;
  max-width: 44rem;
}
/* Kategorie mit Bild: Gerichteliste links, Gerichtsfoto rechts */
.kategorie__rumpf { display: block; }
.kategorie--mit-bild .kategorie__rumpf {
  display: grid;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  align-items: start;
}
.kategorie__bild { margin: 0; }
.kategorie__bild img { width: 100%; border-radius: 2px; }
@media (min-width: 940px) {
  .kategorie--mit-bild .kategorie__rumpf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  }
}
.gericht {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--nacht-linie);
}
.gericht:last-child { border-bottom: 0; }
.gericht__name { font-weight: 500; font-size: 1.04rem; line-height: 1.45; }
.gericht__preis { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--ocker); }
/* Zusatz-/Auswahlzeilen („… plus Gemüse-Nuggets“, „- mit Pumpernickel …“): eingerückt
   und leichter gesetzt, damit sie als Ergänzung zum Gericht darüber erkennbar sind.
   Der Marker („…“, „-“) steht in einer eigenen Spalte – dadurch stehen alle Zeilen
   bündig und umgebrochener Text läuft unter dem Text weiter, nicht unter den Punkten.
   Bewusst **ohne** Linien (Kundenwunsch 29.09.2026: „die Ränder um die - und … entfernen“). */
.gericht--zusatz {
  padding-left: clamp(1rem, 2.5vw, 1.9rem);
  border-bottom-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.gericht--zusatz .gericht__name { display: grid; grid-template-columns: 1.4rem 1fr; align-items: baseline; }
.gericht__marker { color: var(--kreide-45); }
.gericht--zusatz .gericht__name, .gericht--zusatz .gericht__text { font-weight: 400; font-size: 0.97rem; color: var(--kreide-80); }
.gericht--zusatz .gericht__preis { font-weight: 500; font-size: 0.97rem; }
/* Zwischenzeile („Wähle zwischen“, „Pimp it:“): eigene Zeile, leitet eine Gruppe ein. */
.gericht--label { border-bottom: 0; padding-top: 1.1rem; padding-bottom: 0; }
.gericht--label .gericht__name { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.05em; color: var(--kreide-70); }
/* Gruppenzeile: die zugehörigen Einträge in **einer** Zeile unter der Zwischenzeile
   („Joghurt-Dressing V¹ · Mandarinen-Dressing V² · …“, Kundenwunsch 29.09.2026). */
.gericht--gruppe {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.15rem 0.5rem;
  border-bottom: 0; padding-top: 0.2rem; padding-bottom: 0.4rem;
}
.gericht__gruppe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.55rem; }
.gericht__eintrag { font-size: 0.97rem; color: var(--kreide-80); }
/* Trenner zwischen den Einträgen einer Gruppenzeile: „/“ wie auf der Karte,
   mit Luft auf beiden Seiten (Kundenwunsch 29.09.2026: „bitte mit / trennen und etwas mehr
   Platz dazwischen, nicht mit dem Punkt, sonst ist es nicht einheitlich“). */
.gericht__trenner { color: var(--kreide-45); padding: 0 0.25rem; }
/* Menü-Preis unter der Rubrik („54,00 €“): weiss und größer statt grauer Hinweiszeile. */
.kategorie__hinweis--preis {
  font-size: 1.25rem; font-weight: 600; color: var(--kreide);
  font-variant-numeric: tabular-nums; margin-top: 0.15rem;
}
/* „einzeln 12,00 €“ in Menü-Rubriken: das Wort steht am Preis, nicht in der Notiz. */
.gericht__einzeln {
  font-size: 0.78rem; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; color: var(--kreide-45); margin-right: 0.1rem;
}
.gericht__notiz, .gericht__allergene { grid-column: 1 / -1; font-size: 0.85rem; color: var(--kreide-45); }
.gericht__notiz { margin-top: 0.3rem; }
.gericht__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.tag {
  font-size: 0.78rem; color: var(--ocker);
  background: rgba(224, 163, 60, 0.14);
  border-radius: var(--radius); padding: 0.1rem 0.6rem;
}

/* --- Kontakt ------------------------------------------------------------- */
.kontakt__paar { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .kontakt__paar { grid-template-columns: 1fr 1fr; } }
.kontakt__adresse {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 1.5rem;
}
.daten { list-style: none; margin: 0; padding: 0; }
.daten li { padding: 0.85rem 0; border-bottom: 1px solid var(--nacht-linie); }
.daten .bez {
  display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kreide-45); margin-bottom: 0.15rem;
}

/* --- Rechtstexte --------------------------------------------------------- */
.recht { max-width: var(--lesebreite); }
.recht h2 { font-size: clamp(1.15rem, 3vw, 1.5rem); margin-top: 2.2rem; }
.recht h2:first-of-type { margin-top: 0; }
.recht p { font-size: 1rem; color: var(--kreide-70); }
.recht__stand { color: var(--kreide-45); font-size: 0.9rem; }

/* --- Lichtbox ------------------------------------------------------------ */
.lichtbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  height: 100dvh; max-height: 100vh;
  z-index: 200; display: none;
  background: rgba(10, 8, 6, 0.97);
  padding: clamp(0.6rem, 2.5vw, 1rem);
}
/* minmax(0, 1fr) statt 1fr: "1fr" ist intern minmax(auto, 1fr), und dieses auto
   kann nicht unter die Inhaltshöhe schrumpfen. Ein hohes Bild hat die mittlere Zeile
   auf seine eigene Höhe gedrückt und die Knopfleiste aus dem Fenster geschoben. */
.lichtbox.offen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.6rem; }
/* Bühne nimmt das Bild auf und scrollt, falls doch etwas nicht passt.
   "safe center" zentriert nur, solange es passt – sonst beginnt es oben. */
.lichtbox__buehne {
  min-height: 0; overflow: auto;
  display: flex;
  overscroll-behavior: contain;
}
.lichtbox__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.9rem; }
/* margin:auto zentriert; passt das Bild nicht, wird es 0 und das Bild beginnt
   oben links – so ist nie ein Stück unerreichbar abgeschnitten. */
.lichtbox__bild { margin: auto; max-width: min(100%, 1100px); max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lichtbox__leiste { display: flex; justify-content: center; gap: 0.6rem; }
.lichtbox__leiste button, .lichtbox__kopf button {
  background: rgba(244, 240, 231, 0.12); color: var(--kreide);
  border: 1px solid var(--kreide-45); border-radius: var(--radius);
  padding: 0.6rem 1.2rem; min-height: 44px; font: inherit; cursor: pointer;
}
.lichtbox__leiste button:hover, .lichtbox__kopf button:hover { background: rgba(244, 240, 231, 0.24); }

/* --- Fuß ----------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--nacht-linie); padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 760px) { .fuss__raster { grid-template-columns: 1.2fr 1fr 1fr; } }
.fuss__claim { font-family: var(--display); font-size: 1.35rem; font-weight: 600; margin: 0 0 0.6rem; }
.fuss h4 {
  font-family: var(--text); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--kreide-45); font-weight: 500; margin: 0 0 0.8rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.4rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--nacht-linie);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.85rem; color: var(--kreide-45);
}
.fuss__wechsel { color: var(--ocker); }

/* --- 404 ----------------------------------------------------------------- */
.fehler { text-align: center; padding: clamp(3rem, 12vh, 8rem) 1.25rem; }

/* --- Touch --------------------------------------------------------------- */
@media (pointer: coarse) {
  .fuss a, .daten a, .fliesstext a, a[href^="tel:"], a[href^="mailto:"], .recht a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .fuss li { margin-bottom: 0; }
}

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .mosaik__feld:hover img { transform: none; }
  .kunst__rahmen { transform: none; }
}

/* Druck: Speisekarte hell aufs Papier */
@media print {
  .kopf, .fuss, .karten-chips, .karten-rail, .band, .mosaik, .hero { display: none !important; }
  body { background: #fff; color: #000; }
  .abschnitt, .kategorie, .gericht { break-inside: avoid; }
  .gericht__preis { color: #000; }
  a { text-decoration: none; }
}

/* ==========================================================================
   Textsorten (Redaktion) – feste Stile, je Textstelle auswaehlbar.
   Dieselben Werte wie die echten Stile der Seite (Kopf-/Abschnitts-
   ueberschrift, Kicker, Fliesschrift, Hinweis, Kleingedrucktes), damit ein
   Text auch an einer Stelle wirkt, deren Element sonst ein <p> ist.
   Die **doppelte** Klasse ist Absicht: sie muss die Seitenstile
   (.fliesstext p, .hero p …) ueberstimmen, ohne !important zu brauchen.
   Ohne gewaehlte Textsorte wird keine dieser Klassen gesetzt – dann bleibt
   die Darstellung genau wie bisher.
   ========================================================================== */
.sorte-titel.sorte-titel {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 5.4rem); line-height: 1.06; letter-spacing: -0.015em;
}
.sorte-zwischen.sorte-zwischen {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 1.9rem); line-height: 1.06; letter-spacing: -0.015em;
}
.sorte-kicker.sorte-kicker {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.sorte-text.sorte-text { font-size: 1.05rem; }
.sorte-hinweis.sorte-hinweis {
  font-family: var(--display); font-size: 1.25rem; font-weight: 600;
}
.sorte-klein.sorte-klein { font-size: 0.85rem; }