@charset "UTF-8";
/* ==========================================================================
   Il Colosseo, Erlangen-Dechsendorf
   Richtung A "Sera" (Farbwelt, Raster, Bewegung) + Schriftsystem aus B "Tavola"
   Vanilla CSS, ein Stylesheet fuer alle Seiten. FARU Studio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Schriften, lokal gehostet (DSGVO). SIL Open Font License.
   Newsreader und IBM Plex Sans liegen als variable woff2 in assets/fonts/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/newsreader-latin.woff2") format("woff2");
  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: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  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: "Newsreader";
  font-style: italic;
  /* Nur Gewicht 400: die Kursive wird ausschliesslich fuer Kicker,
     Bildunterschriften und Zeitangaben benutzt. */
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  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: "Newsreader";
  font-style: italic;
  /* Nur Gewicht 400: die Kursive wird ausschliesslich fuer Kicker,
     Bildunterschriften und Zeitangaben benutzt. */
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/plexsans-latin.woff2") format("woff2");
  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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/plexsans-latin-ext.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------------------
   2 — Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Kundenpalette (gemessen aus der Farbreferenz) */
  --creme: #fbeccf;
  --sand: #e6c29e;
  --terrakotta: #b07448;
  --salbei: #9fa98c;
  --espresso: #472d17;
  --notte: #22190d;

  /* Waldgruen-Skala */
  --wald-tief: #14201a;
  --wald: #23372a;
  --wald-mittel: #3b5a3c;
  --laub: #3c4e3a;
  --wald-nacht: #1b2a1d;
  --wald-tiefer: #101a14; /* Fusszeile und mobile Leiste */
  --linie: #4a5a44;

  /* Schrift */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, sans-serif;

  /* Groessenskala aus Richtung A, um rund 5 % angehoben,
     weil Newsreader bei gleicher Punktgroesse optisch kleiner wirkt als Bodoni. */
  --t-h1: clamp(36px, 7.6vw, 80px);
  --t-h2: clamp(30px, 8vw, 61px);
  --t-h2-klein: clamp(28px, 7vw, 52px);
  --t-h3: clamp(21px, 5vw, 27px);
  --t-body: 17px;
  --t-klein: 15px;
  --t-kicker: 16px;

  /* Raster */
  --huelle: 1180px;
  --rand: 20px;
  --leiste-h: 76px; /* Hoehe der mobilen Reservierungsleiste */

  --uebergang: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 900px) {
  :root {
    --rand: 32px;
    --leiste-h: 0px;
  }
}

/* --------------------------------------------------------------------------
   3 — Grundlagen
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Das hidden-Attribut muss gewinnen.

   02.09.2026, echter Fehler, von Filip gefunden ("der Rundgang laedt nicht").
   Der Browser setzt fuer [hidden] nur `display: none` im eigenen Stylesheet.
   Jede Autorenregel mit `display` schlaegt das. Betroffen waren drei Klassen:

     .knopf         inline-flex   -> js/app.js setzt knopf.hidden = true, wenn
                                    fuer eine Einbindung keine Quelle
                                    hinterlegt ist. Der Knopf blieb sichtbar,
                                    aber ohne Klick-Behandlung: Rundgang und
                                    Instagram-Feed sahen anklickbar aus und
                                    taten nichts.
     .lade__hinweis grid          -> nach dem Laden blieb der Hinweiskasten mit
                                    dem Knopf stehen, obwohl der Inhalt schon
                                    da war.
     .lade__ersatz  grid          -> dasselbe beim Ersatzzustand.

   Deshalb hier einmal zentral und mit !important. Wer eine neue Klasse mit
   `display` anlegt, faellt sonst in dieselbe Falle.
   -------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: var(--leiste-h);
  background: var(--wald-tief);
  color: var(--creme);
  font: 400 var(--t-body) / 1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--creme);
}

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--t-h1);
  line-height: 0.92;
  max-width: 20ch;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.03;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
}

p {
  margin: 0;
}

/* Sprungmarke fuer Tastatur und Screenreader */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.sprung:focus {
  left: 8px;
  top: 8px;
  padding: 12px 18px;
  background: var(--creme);
  color: var(--wald-tief);
  font: 600 13px/1 var(--body);
  text-decoration: none;
}

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

/* --------------------------------------------------------------------------
   4 — Layout-Bausteine
   -------------------------------------------------------------------------- */

.huelle {
  max-width: var(--huelle);
  margin: 0 auto;
  width: 100%;
}

.abschnitt {
  padding: clamp(48px, 10vw, 110px) var(--rand);
}

.abschnitt--eng {
  padding: clamp(38px, 8vw, 80px) var(--rand);
}

.abschnitt--weit {
  padding: clamp(56px, 12vw, 130px) var(--rand);
}

.grund-tief {
  background: var(--wald-tief);
}
.grund-nacht {
  background: var(--wald-nacht);
}
.grund-verlauf {
  background: linear-gradient(var(--wald-tief), var(--wald-nacht));
}
.grund-verlauf-um {
  background: linear-gradient(var(--wald-nacht), var(--wald-tief));
}

.kicker {
  margin: 0 0 12px;
  font: italic 400 var(--t-kicker) / 1.4 var(--display);
  color: var(--sand);
}

.fliess {
  color: var(--creme);
  max-width: 46ch;
}

.fliess--zweit {
  color: var(--sand);
}

.fliess + .fliess {
  margin-top: 1em;
}

.gross {
  font-size: clamp(17px, 4.2vw, 19px);
}

.klein {
  font-size: var(--t-klein);
}

.zweispalt {
  display: grid;
  gap: clamp(26px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

.zweispalt--oben {
  align-items: start;
}

.trenner {
  height: 1px;
  border: 0;
  background: var(--wald-mittel);
  margin: clamp(28px, 6vw, 48px) 0;
}

/* --------------------------------------------------------------------------
   4b — Kleine Helferklassen

   Bewusst wenige, bewusst benannt. Ersetzen die Inline-Styles, damit
   alle Seiten dieselben Werte teilen und nichts pro Seite dupliziert wird.
   -------------------------------------------------------------------------- */

/* Abstand nach unten */
.ab-6 { margin-bottom: 6px; }
.ab-10 { margin-bottom: 10px; }
.ab-14 { margin-bottom: 14px; }
.ab-16 { margin-bottom: 16px; }
.ab-18 { margin-bottom: 18px; }
.ab-20 { margin-bottom: 20px; }
.ab-22 { margin-bottom: 22px; }
.ab-24 { margin-bottom: 24px; }
.ab-26 { margin-bottom: 26px; }
.ab-28 { margin-bottom: 28px; }
.ab-30 { margin-bottom: 30px; }
.ab-gross { margin-bottom: clamp(26px, 5vw, 44px); }
.ab-riesig { margin-bottom: clamp(28px, 6vw, 54px); }

/* Abstand nach oben */
.vor-6 { margin-top: 6px; }
.vor-16 { margin-top: 16px; }
.vor-18 { margin-top: 18px; }
.vor-20 { margin-top: 20px; }
.vor-22 { margin-top: 22px; }
.vor-24 { margin-top: 24px; }
.vor-26 { margin-top: 26px; }
.vor-34 { margin-top: 34px; }

.ohne-abstand { margin: 0; }
.ohne-polster-links { padding-left: 0; }

/* Zeilenbreiten und Spaltenbreiten */
.eng-22 { max-width: 22ch; }
.eng-24 { max-width: 24ch; }
.eng-26 { max-width: 26ch; }
.eng-40 { max-width: 40ch; }
.eng-46 { max-width: 46ch; }
.eng-52 { max-width: 52ch; }
.spalte-760 { max-width: 760px; }
.spalte-820 { max-width: 820px; }
.spalte-860 { max-width: 860px; }
.spalte-900 { max-width: 900px; }

.mitte { text-align: center; }
.zentriert { margin-left: auto; margin-right: auto; }
.reihe-mitte { justify-content: center; }
.ton-sand { color: var(--sand); }

/* Stapel und Paare */
.stapel { display: grid; gap: 18px; }
.stapel--16 { gap: 16px; }
.stapel--20 { gap: 20px; }
.stapel--oben { align-content: start; }
.paar-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kopf-zwei {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

/* Ueberschriften-Varianten */
.h1-recht { font-size: var(--t-h2); line-height: 1.03; }
.h2-klein { font-size: var(--t-h2-klein); }
.h2-mega { font-size: clamp(36px, 9.6vw, 84px); line-height: 0.96; }
.h3-klein { font-size: var(--t-h3); }

/* Ein grosser Satz statt einer Ueberschrift (Sektion "Stimmung") */
.satz-gross {
  margin: 0;
  font: 600 clamp(28px, 7.2vw, 64px) / 1.1 var(--display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.satz-mittel {
  max-width: 40ch;
  font: 600 clamp(24px, 6vw, 44px) / 1.12 var(--display);
}

/* Sichtbarer Hinweiskasten fuer offene Punkte im Bau */
.notiz {
  padding: 22px;
  border: 1px dashed var(--wald-mittel);
  background: var(--wald-nacht);
}
.notiz--eng { padding: 20px; }

/* Seiten ohne Hero brauchen oben Luft unter der festen Kopfzeile */
.abschnitt--unter-kopf { padding-top: 130px; }
.abschnitt--404 {
  padding-top: 140px;
  min-height: 70svh;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5 — Knoepfe
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 26px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 600 13px/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang),
    border-color var(--uebergang);
}

/* Aktionsfarbe: Creme-Flaeche mit Waldgruen-Schrift.
   Espresso waere auf dunklem Grund nicht lesbar. */
.knopf--haupt {
  background: var(--creme);
  color: var(--wald-tief);
}

.knopf--haupt:hover {
  background: var(--sand);
  color: var(--wald-tief);
}

.knopf--rand {
  background: transparent;
  border-color: var(--laub);
  color: var(--creme);
}

.knopf--rand:hover {
  border-color: var(--sand);
  color: var(--creme);
}

.knopf--klein {
  padding: 14px 20px;
  min-height: 48px;
  font-size: 12px;
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   6 — Kopfzeile, zwei getrennte Zustaende (nicht interpoliert)
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--rand);
  /* 07.09.2026 neu gerechnet. Vorher: linear-gradient(#14201acc, #14201a00),
     also 0,80 oben und 0 unten — an der Textzeile (49-50 % der Kopfhoehe)
     kamen davon nur 0,406 an. Ueber den helleren Titelbildern der
     Unterseiten reichte das nicht: gemessen 2,86 : 1 bei „Kontakt" auf
     /kontakt/ (1280 px), Soll 4,5. Zwoelf Textstellen lagen darunter.
     axe-core hatte sie als „incomplete: color-contrast" gemeldet — also
     NICHT gemessen, nicht in Ordnung.

     Gebraucht wurde die hoechste Deckkraft aus allen sechs Seiten und vier
     Breiten: 0,59. Der Verlauf liefert nun 0,74 an der Textzeile, also
     0,15 Reserve, und faellt bis zum unteren Rand weiter auf 0 — die weiche
     Kante des Entwurfs bleibt. Rechnung: werkzeuge/kopf-kontrast.js.

     Auf dieser Flaeche liegen (alle werden durch den dunkleren Grund besser,
     keines unsichtbar): .kopf__marke (creme), .kopf__marke span (sand, nur
     im gescrollten Zustand sichtbar, dort deckender Grund), .kopf__nav a
     (creme) samt Hover und aria-current (sand), .kopf .knopf--haupt
     (deckende creme Fuellung, von der Aenderung unberuehrt). */
  background: linear-gradient(
    rgba(20, 32, 26, 0.9) 0%,
    rgba(20, 32, 26, 0.7) 62%,
    rgba(20, 32, 26, 0) 100%
  );
  border-bottom: 1px solid transparent;
}

.kopf.ist-gescrollt {
  background: rgba(20, 32, 26, 0.95);
  border-bottom-color: var(--wald-mittel);
  backdrop-filter: blur(8px);
}

.kopf__marke {
  font: 600 13px/1.2 var(--body);
  color: var(--creme);
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* 10.10.2026: Wortmarke aus Lucas Instagram-Logo nachgezeichnet (Vektor),
   ersetzt den reinen Text. Hoehe so, dass die Kopfzeile gleich hoch bleibt. */
.kopf__logo {
  display: block;
  height: 19px;
  width: auto;
}

@media (min-width: 900px) {
  .kopf__logo { height: 22px; }
}

.kopf__marke span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  color: var(--sand);
  opacity: 0;
  transition: opacity var(--uebergang);
}

.kopf.ist-gescrollt .kopf__marke span {
  opacity: 1;
}

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 18px;
}

.kopf__nav {
  display: none;
}

@media (min-width: 900px) {
  .kopf__nav {
    display: flex;
    gap: 20px;
  }
  .kopf__nav a {
    /* 24.09.2026: Klickziel auf mind. 24 px Hoehe (WCAG 2.2 · 2.5.8) */
    display: inline-block;
    padding: 6px 0;
    font: 500 13px/1 var(--body);
    color: var(--creme);
    text-decoration: none;
  }
  .kopf__nav a:hover,
  .kopf__nav a[aria-current="page"] {
    color: var(--sand);
  }
}

.kopf .knopf {
  padding: 11px 17px;
  min-height: 44px;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   6b — Mobiles Menue (10.09.2026)

   Bis heute hatte die Seite auf dem Handy KEINEN Weg zu den Unterseiten: die
   Kopfzeile blendet .kopf__nav unter 900 px aus, und die feste Leiste unten
   traegt nur „Tisch reservieren" und „Anruf". Wer auf der Startseite landete,
   kam nur ueber Verweise im Fliesstext weiter — die Speisekarte war zwei
   Bildschirmhoehen entfernt, „Feiern" und „Kontakt" gar nicht erreichbar.

   Statt neben dem Knopf noch ein drittes Element in die Kopfzeile zu quetschen
   (auf 320 px passt das nicht), UEBERNIMMT der Knopf mit den drei Strichen den
   Platz des Reservieren-Knopfes. Der ist auf dem Handy nicht verloren: er steht
   dauerhaft in der Leiste unten und noch einmal im geoeffneten Menue.

   Das Menue liegt mit z-index 39 UNTER der Kopfzeile (40) und unter der Leiste
   (50). Beides ist Absicht: der Schliessen-Knopf bleibt an derselben Stelle,
   an der man ihn geoeffnet hat, und „Tisch reservieren"/„Anruf" bleiben
   erreichbar, ohne das Menue schliessen zu muessen.
   -------------------------------------------------------------------------- */

.kopf__striche {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--creme);
  cursor: pointer;
}

.kopf__striche span {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--uebergang), opacity var(--uebergang);
}

/* Aus drei Strichen wird ein Kreuz. Der mittlere verschwindet, die aeusseren
   wandern auf die Mitte und drehen sich. 7 px = halbe Strichhoehe + Abstand. */
.kopf__striche[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.kopf__striche[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.kopf__striche[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menue {
  position: fixed;
  inset: 0;
  z-index: 39;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 88px var(--rand) calc(var(--leiste-h) + 28px);
  background: var(--wald-nacht);
  animation: menue-auf var(--uebergang) both;
}

@keyframes menue-auf {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.menue__liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie);
}

.menue__liste a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
  font: 400 clamp(26px, 7.5vw, 34px) / 1.15 var(--display);
  color: var(--creme);
  text-decoration: none;
}

.menue__liste a[aria-current="page"] {
  color: var(--sand);
}

/* Die Zeile rechts nennt, was einen dort erwartet — bei sechs fast gleich
   langen Serifen-Zeilen ist das der Unterschied zwischen Liste und Wegweiser. */
.menue__liste a span {
  flex: none;
  font: 400 11px/1.4 var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--salbei);
}

.menue__fuss {
  margin-top: 28px;
}

.menue__fuss .knopf {
  width: 100%;
}

.menue__fuss p {
  margin: 18px 0 0;
  font: 400 13px/1.7 var(--body);
  color: var(--sand);
}

/* Als Zeile im Absatz waere das Klickziel 17 px hoch. Mit inline-block und
   Polster sind es 29 px — ueber den 24 px aus WCAG 2.2 (2.5.8). */
.menue__fuss a[href^="tel:"] {
  display: inline-block;
  padding: 6px 0;
  color: var(--creme);
}

@media (min-width: 900px) {
  .kopf__striche,
  .menue {
    display: none;
  }
}

/* Unter 900 px traegt die Leiste unten den Reservieren-Knopf. */
@media (max-width: 899px) {
  .kopf__reservieren {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7 — Hero
   -------------------------------------------------------------------------- */

.held {
  position: relative;
  min-height: calc(100svh - var(--leiste-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 96px 0 24px;
  isolation: isolate;
  /* Die Einblendung skaliert das Hintergrundbild kurz auf 1.05.
     Ohne dieses Clipping erzeugt das in der ersten Sekunde
     waagerechten Ueberlauf. Gemessen: 9 px bei 375 px Breite. */
  overflow: hidden;
}

/* Kopfbereich der Unterseiten: gleiche Sprache, halbe Hoehe */
.held--seite {
  min-height: 45svh;
  padding: 116px 0 34px;
}

.held--seite h1 {
  font-size: var(--t-h2);
  line-height: 1.03;
  max-width: 22ch;
}

.held__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

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

.held__bild--bewegt img {
  /* 24.09.2026: geschlossene Bahn statt "alternate" (kein Ruck am
     Wendepunkt), anhaltbar ueber .bewegung-knopf */
  animation: kenburns 52s ease-in-out infinite;
}

.held.ist-pausiert .held__bild--bewegt img {
  animation-play-state: paused;
}

.bewegung-knopf {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(251, 236, 207, 0.55);
  border-radius: 999px;
  background: rgba(20, 32, 26, 0.72);
  color: var(--creme);
  font: 500 13px/1 var(--body);
  cursor: pointer;
}
.bewegung-knopf:hover {
  background: rgba(20, 32, 26, 0.9);
}
.bewegung-knopf:focus-visible {
  outline: 2px solid var(--creme);
  outline-offset: 3px;
}
@media (max-width: 599px) {
  .bewegung-knopf {
    min-width: 36px;
    padding: 8px 11px;
  }
  .bewegung-knopf__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Espresso-Overlay, damit Creme auf jedem Bild lesbar bleibt.

   02.09.2026 neu geformt. Vorher: 0,35 oben - 0,45 bei 40 % - 0,95 unten.
   Das legte einen gleichmaessigen Schleier ueber die obere Bildhaelfte, in
   der das Motiv steht, und war unter dem Textblock trotzdem knapp.
   Jetzt zweigeteilt:

   .held__schleier   haelt die obere Haelfte offen (0,30 bis 0,44), damit das
                     Motiv - auf der Startseite Lucas Gesicht bei rund 35 %
                     Hoehe - sichtbar bleibt.
   .held__textband   liegt NUR unter dem Textblock und wird nach unten hin
                     dicht. Der Text bekommt dadurch seinen Kontrast dort, wo
                     er steht, statt dass das ganze Bild zugedeckt wird.

   Die Werte sind nachgerechnet, nicht geschaetzt:
   werkzeuge/hero-kontrast.py, Messwerte in QA.md. */
.held__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #472d174d 0%,
    #472d1757 30%,
    #472d1775 60%,
    #472d1799 100%
  );
}

.held__textband {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #472d1700 10%,
    #472d17b3 24%,
    #472d17db 50%,
    #472d17e6 100%
  );
}

/* Auf dem Desktop ist der Hero quer und der Textblock kurz: dort darf das
   Band viel spaeter anfangen, damit das Motiv oben offen bleibt. */
@media (min-width: 900px) {
  .held__textband {
    background: linear-gradient(
      180deg,
      #472d1700 24%,
      #472d179e 42%,
      #472d17cc 70%,
      #472d17e0 100%
    );
  }

  /* Unterseiten-Heroes sind nur 45svh hoch: dort sitzt schon der Kicker in
     der oberen Haelfte, wo die sanfte Kurve noch nichts abdeckt. Gemessen
     auf /speisekarte/, /feiern/ und /kontakt/ — dort fiel der Kicker mit
     2,3 bis 2,9 durch. Diese Koepfe sind Kulisse, kein Motiv: sie duerfen
     dunkler sein. */
  .held--seite .held__textband {
    background: linear-gradient(
      180deg,
      #472d1700 6%,
      #472d17b3 28%,
      #472d17db 60%,
      #472d17e6 100%
    );
  }
}

.held__korn {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(#e6c29e26 1px, transparent 1px);
  background-size: 3px 3px;
}

.held__inhalt {
  padding: 0 var(--rand);
  max-width: var(--huelle);
  margin: 0 auto;
  width: 100%;
}

.held__linie {
  height: 1px;
  background: var(--sand);
  transform-origin: left;
  margin: 16px 0 14px;
  border: 0;
}

/* Der Kicker sitzt auf dem Handy bei rund 25 % Hoehe — dort ist das Motiv
   noch offen, und Sand (#e6c29e) faellt bei 16 px durch WCAG AA. Creme statt
   Sand loest das ohne den Hero weiter zuzudecken: gleicher Farbraum, aber
   heller, deshalb reicht ein dunkler Grund von rund 110 statt 87.
   Die Breitengrenze haelt die Zeile aus dem hellen Fensterelement rechts.
   Nachgerechnet mit werkzeuge/hero-kontrast-browser.js. */
.held__inhalt .kicker {
  max-width: 34ch;
  color: var(--creme);
}

.held__subline {
  margin: 0 0 20px;
  max-width: 38ch;
  font-size: clamp(16px, 4.2vw, 19px);
  color: var(--sand);
}

.held__meta {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--linie);
  font: italic 400 14px/1.5 var(--display);
  color: var(--sand);
  list-style: none;
}

.held__meta li {
  margin: 0;
}

/* --------------------------------------------------------------------------
   8 — Tagesablauf als vertikale Zeitleiste
   -------------------------------------------------------------------------- */

.zeitleiste {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zeitleiste__punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 4vw, 34px);
  align-items: start;
}

.zeitleiste__schiene {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.zeitleiste__marke {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--sand);
  margin-top: 10px;
}

.zeitleiste__linie {
  width: 1px;
  flex: 1 1 auto;
  background: var(--wald-mittel);
}

.zeitleiste__punkt:last-child .zeitleiste__linie {
  background: linear-gradient(var(--wald-mittel), transparent);
}

.zeitleiste__text {
  padding: 0 0 clamp(26px, 5vw, 44px);
}

.zeitleiste__zeit {
  margin: 0 0 6px;
  font: 600 clamp(25px, 6vw, 44px) / 1 var(--display);
  color: var(--sand);
}

.zeitleiste__titel {
  margin: 0 0 8px;
  font: 600 15px/1.3 var(--body);
  letter-spacing: 0.05em;
  color: var(--creme);
}

.zeitleiste__bild {
  max-width: 440px;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   9 — Bilder, Bildunterschriften, Platzhalter
   -------------------------------------------------------------------------- */

.bild {
  position: relative;
  overflow: hidden;
  background: var(--wald);
  margin: 0;
}

.bild > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bild--16-10 {
  aspect-ratio: 16 / 10;
}
.bild--3-2 {
  aspect-ratio: 3 / 2;
}
.bild--4-3 {
  aspect-ratio: 4 / 3;
}
.bild--4-5 {
  aspect-ratio: 4 / 5;
}
.bild--1-1 {
  aspect-ratio: 1;
}
.bild--rahmen {
  border: 1px solid var(--wald-mittel);
}

figure {
  margin: 0;
}

figcaption {
  margin: 8px 0 0;
  font: 400 13px/1.5 var(--body);
  color: var(--sand);
}

/* Bildplatz: es gibt noch KEIN echtes Motiv. Bewusst kein fremdes Stockfoto,
   weil fremde Aufnahmen auf der Seite eines echten Restaurants nach
   Paragraph 5 UWG irrefuehrend waeren. */
/* --------------------------------------------------------------------------
   Kennzeichen und Legende auf der Speisekarte (10.09.2026)

   Wie bei der gastronovi-Ausgabe der alten Seite: NICHT hochgestellt, sondern
   nur kleiner und auf der Grundlinie. Hochgestellte Zeichen waeren an dieser
   Stelle in Wahrheit 9 px, und Paragraf 4 Abs. 3 Satz 4 LMIDV verlangt einen
   Hinweis „in hervorgehobener Weise" — das vertraegt sich nicht.
   Die Buchstaben stehen heute noch nirgends: die Legende in
   data/speisekarte.json ist leer, bis der gastronovi-Zugang da ist.
   -------------------------------------------------------------------------- */

.gericht__kennzeichen {
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: var(--salbei);
  white-space: nowrap;
}

.gericht__kennzeichen abbr {
  text-decoration: none;
  border: 0;
  cursor: help;
}

/* Schnitt innerhalb einer Kategorie (10.09.2026, „Dolci" / „Gelato").
   Der erste bekommt keinen Abstand nach oben — er sitzt direkt unter dem
   Kategoriesatz und wuerde sonst wie ein loses Element wirken. */
.karte__gruppe {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  font: 400 clamp(19px, 4.6vw, 22px) / 1.2 var(--display);
  color: var(--creme);
}

.karte__gruppe:first-of-type {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.karte__gruppe-satz {
  margin: 6px 0 0;
  font: italic 400 13px/1.5 var(--display);
  color: var(--sand);
}

.karte__gruppe + .liste-linien,
.karte__gruppe-satz + .liste-linien {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Getraenke als Liste statt als Bildkarte (10.09.2026)

   47 Getraenke in einer 279 px schmalen Rasterspalte waren eine Rolle ohne
   Ende, und die abgetrennte Kaffee-Karte stand als fast leerer Kasten daneben.
   Jetzt: eigener Abschnitt unter den vier Bildkarten, sechs Gruppen
   nebeneinander. Eine Getraenkekarte will breit sein und den Preis rechts
   haben — nicht schmal und hoch.
   -------------------------------------------------------------------------- */

.getraenke {
  display: grid;
  gap: 30px 40px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-items: start;
}

.getraenke__gruppe {
  display: contents;
}

/* display:contents macht auch die Legende zu einem Rasterfeld — sie soll
   aber unter allen Spalten stehen, nicht in einer. Greift erst, wenn die
   Allergendaten aus gastronovi da sind. */
.getraenke__gruppe > .karte__legende {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.getraenke__name {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
  font: 400 clamp(20px, 4.8vw, 24px) / 1.2 var(--display);
  color: var(--creme);
}

.getraenke__teil .karte__gruppe-satz {
  margin: -4px 0 12px;
}

.karte__legende {
  margin: 14px 0 0;
  font: 400 13px/1.6 var(--body);
  color: var(--sand);
}

.karte__legende b {
  color: var(--creme);
  font-weight: 600;
}

/* 11.09.2026: war im Generator ein Inline-Style und im Renderer
   ul.style.marginTop — beide Seiten erzeugten also unterschiedliches Markup.
   Jetzt eine Klasse fuer beide. */
.liste-linien--abstand {
  margin-top: 14px;
}

/* 11.09.2026: Ein allgemeiner Satz unter der Legende. Er ersetzt die frueheren
   Warnzeilen je Gruppe, die sich wie eine Mangelanzeige lasen. Etwas heller als
   die Legende, weil es eine Aufforderung ist und keine Fussnote — aber ohne
   Warnfarbe, es ist kein Fehler. */
.karte__hinweis {
  margin: 8px 0 0;
  font: 400 13px/1.6 var(--body);
  color: var(--creme);
}

.getraenke__gruppe > .karte__hinweis {
  grid-column: 1 / -1;
}

/* Kategorie ohne Foto. Der Kasten wird oben angeschnitten, damit die Karte
   im Raster nicht wie ein Fehler aussieht, sondern wie eine Textkarte. */
.karte--nur-text .karte__text {
  border-top: 2px solid var(--sand);
  padding-top: 20px;
}

.bildplatz {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 16px;
  border: 1px dashed var(--wald-mittel);
  background: linear-gradient(150deg, #243425, #2a3c2b);
  color: var(--sand);
  overflow: hidden;
}

.bildplatz::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(#e6c29e1f 1px, transparent 1px);
  background-size: 4px 4px;
}

/* 02.09.2026: war Terrakotta und kam auf dem Bildplatz-Verlauf nur auf
   3,41:1 — bei 10 px verlangt WCAG AA 4,5:1. Sand statt Terrakotta bringt
   7,89:1. Gemessen mit werkzeuge/kontrast-browser.js. */
.bildplatz__marke {
  position: relative;
  font: 600 10px/1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}

.bildplatz__text {
  position: relative;
  font: italic 400 14px/1.45 var(--display);
}

/* --------------------------------------------------------------------------
   10 — Kartenraster (Speisekarten-Kategorien)
   -------------------------------------------------------------------------- */

.raster {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* 10.09.2026: ohne das streckt das Raster jede Karte einer Zeile auf die
     Hoehe der laengsten. Auf /speisekarte/ war die Kaffee-Karte mit 8 Zeilen
     dadurch 3.147 px hoch, rund 2.500 px davon leer. Karten duerfen
     unterschiedlich hoch sein. */
  align-items: start;
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.karte {
  display: grid;
  gap: 0;
  align-content: start;
  border: 1px solid var(--wald-mittel);
  background: var(--wald-nacht);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--uebergang);
}

.karte:hover {
  border-color: var(--sand);
  color: inherit;
}

.karte__text {
  padding: 16px 16px 20px;
}

.karte__name {
  margin: 0 0 6px;
  font: 700 clamp(21px, 5vw, 27px) / 1.1 var(--display);
  color: var(--creme);
}

.karte__satz {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--sand);
}

/* Platzhalterkarte, solange die Kategorien noch laden.
   Gleiche Geometrie wie die echte Karte, damit nichts springt. */
.karte--skelett .karte__text {
  display: grid;
  gap: 10px;
}

.karte--skelett .karte__text span {
  display: block;
  height: 1em;
  background: var(--wald);
  border-radius: 2px;
}

.karte--skelett .karte__text span:first-child {
  height: 1.5em;
  width: 60%;
}

/* Liste ohne Punkte, mit Trennlinien */
.liste-linien {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.liste-linien li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--wald-mittel);
}

.liste-linien b {
  font: 600 15px/1.3 var(--body);
  color: var(--creme);
}

.liste-linien span {
  font: 500 13px/1.6 var(--display);
  color: var(--sand);
  text-align: right;
}

/* --------------------------------------------------------------------------
   11 — Oeffnungszeiten
   -------------------------------------------------------------------------- */

.zeitblock {
  border: 1px solid var(--wald-mittel);
  background: var(--wald-tief);
  padding: clamp(20px, 4vw, 30px);
}

.zeitblock--betont {
  border-color: var(--sand);
  background: linear-gradient(140deg, #3b2512, var(--wald-tief));
}

.zeitblock h3 {
  margin: 0 0 4px;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.1;
}

.zeitblock__unter {
  margin: 0 0 18px;
  font: italic 400 14px/1.5 var(--display);
  color: var(--sand);
}

.zeitblock dl {
  margin: 0;
}

.zeitblock__zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--linie);
  font-size: 16px;
}

.zeitblock__zeile dt {
  margin: 0;
  color: var(--sand);
}

.zeitblock__zeile dd {
  margin: 0;
  font-weight: 600;
  color: var(--creme);
}

/* --------------------------------------------------------------------------
   12 — Bewertungen
   -------------------------------------------------------------------------- */

.bewertung-kopf {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wald-mittel);
}

.bewertung-kopf strong {
  font: 700 clamp(64px, 18vw, 148px) / 0.8 var(--display);
  color: var(--sand);
}

.bewertung-kopf span {
  font: italic 400 15px/1.6 var(--display);
  color: var(--sand);
}

.stimmen {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stimmen blockquote {
  margin: 0;
  padding: 24px 22px 24px 0;
  border-bottom: 1px solid var(--wald-mittel);
}

.stimmen p {
  margin: 0 0 12px;
  font: 600 clamp(19px, 4.6vw, 23px) / 1.35 var(--display);
  color: var(--creme);
}

.stimmen cite {
  font: 500 12px/1.6 var(--display);
  color: var(--sand);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   13 — Klick zum Laden (Drittanbieter)
   -------------------------------------------------------------------------- */

.lade {
  border: 1px solid var(--wald-mittel);
  background: var(--wald-nacht);
}

.lade__hinweis {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(20px, 5vw, 34px);
}

.lade__titel {
  margin: 0;
  font: 600 13px/1.3 var(--body);
  letter-spacing: 0.07em;
  color: var(--creme);
}

.lade__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-klein);
  color: var(--sand);
}

.lade__ziel {
  padding: clamp(14px, 3vw, 20px);
}

.lade__ziel iframe {
  width: 100%;
  border: 0;
}

/* Ruhiger Ersatzzustand, wenn noch keine Quelle hinterlegt ist:
   niemals eine kaputte leere Box zeigen. */
.lade__ersatz {
  display: grid;
  gap: 10px;
  padding: clamp(20px, 5vw, 34px);
  border-top: 1px solid var(--wald-mittel);
  /* Steht der Ersatz allein - weil fuer die Einbindung keine Quelle
     hinterlegt ist und der Hinweiskasten deshalb entfaellt - braucht er
     oben keine Trennlinie. */
  background: var(--wald-tief);
}

.lade__ersatz p {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--sand);
}

.lade__ersatz .telefon {
  font: 600 clamp(22px, 6vw, 32px) / 1.1 var(--display);
  color: var(--creme);
  text-decoration: none;
}

.lade__ersatz .telefon:hover {
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   14 — Formular
   -------------------------------------------------------------------------- */

.formular {
  display: grid;
  gap: 18px;
  border: 1px solid var(--wald-mittel);
  background: var(--wald-nacht);
  padding: clamp(20px, 5vw, 36px);
}

.feld-paar {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.feld {
  display: grid;
  gap: 6px;
}

.feld label {
  font: 600 13px/1.3 var(--body);
  color: var(--creme);
}

.feld .hinweis {
  font-size: 13px;
  color: var(--sand);
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  padding: 14px 14px;
  min-height: 52px;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: var(--wald-tief);
  color: var(--creme);
  font: 400 16px/1.5 var(--body);
  transition: border-color var(--uebergang);
}

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

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  border-color: var(--sand);
}

/* 09.10.2026: Das Datumsfeld auf /feiern/ zeigte beim Tabben keinen Rahmen
   (Chrome fokussiert die Teilfelder, :focus-visible greift am input nicht). */
.feld input[type="date"]:focus {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: var(--terrakotta);
  border-width: 2px;
}

.feld__fehler {
  font: 600 13px/1.4 var(--body);
  color: #efb98c; /* helles Terrakotta, 7,3:1 auf Wald-Nacht */
  min-height: 0;
}

.feld__fehler:empty {
  display: none;
}

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.zustimmung input {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--sand);
}

.zustimmung label {
  font: 400 14px/1.55 var(--body);
  color: var(--sand);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots sichtbar */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  padding: 16px 18px;
  border: 1px solid var(--wald-mittel);
  border-left-width: 3px;
  font-size: var(--t-klein);
}

.meldung:empty {
  display: none;
}

.meldung--gut {
  border-left-color: var(--sand);
  color: var(--creme);
  background: var(--wald);
}

.meldung--schlecht {
  border-left-color: var(--terrakotta);
  color: #efb98c;
  background: var(--wald-tief);
}

/* --------------------------------------------------------------------------
   15 — Fusszeile und mobile Leiste
   -------------------------------------------------------------------------- */

.fuss {
  padding: 48px var(--rand) 34px;
  background: var(--wald-tiefer);
  border-top: 1px solid var(--linie);
}

.fuss__raster {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  max-width: var(--huelle);
  margin: 0 auto;
}

.fuss h2 {
  margin: 0 0 10px;
  font: italic 400 16px/1.4 var(--display);
  color: var(--sand);
  letter-spacing: 0;
}

.fuss p {
  font-size: 14px;
  color: var(--sand);
}

.fuss ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: 14px;
}

.fuss__gruss {
  max-width: var(--huelle);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--wald-mittel);
  font: italic 400 clamp(17px, 4.4vw, 21px) / 1.5 var(--display);
  color: var(--sand);
}

.leiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(16, 26, 20, 0.95);
  border-top: 1px solid var(--linie);
  backdrop-filter: blur(8px);
}

.leiste .knopf {
  flex: 1;
  min-height: 52px;
  padding: 14px 18px;
}

.leiste .knopf--rand {
  flex: none;
  width: 72px;
}

@media (min-width: 900px) {
  .leiste {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16 — Bewegung
   -------------------------------------------------------------------------- */

@keyframes kenburns {
  0%,
  100% {
    transform: scale(1.04);
  }
  50% {
    transform: scale(1.13);
  }
}

@keyframes auf {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes glimmen {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ziehen {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Gestaffelter Einstieg: Kicker, H1, Linie, Subline, Aktionen, Metazeile */
.held__bild {
  animation: glimmen 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.auf-1 {
  animation: auf 0.8s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.auf-2 {
  animation: auf 0.9s 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.auf-3 {
  animation: ziehen 1s 0.46s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.auf-4 {
  animation: auf 0.9s 0.58s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.auf-5 {
  animation: auf 0.9s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.auf-6 {
  animation: auf 0.9s 0.84s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .bewegung-knopf {
    display: none;
  }
  .menue {
    animation: none;
  }
  .kopf__striche span {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   17 — Druck
   -------------------------------------------------------------------------- */

@media print {
  .kopf,
  .leiste,
  .lade {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }
}


.lade__hinweis[hidden] + .lade__ziel + .lade__ersatz,
.lade__hinweis[hidden] ~ .lade__ersatz {
  border-top: 0;
}

/* --------------------------------------------------------------------------
   19 — Zitat des Inhabers

   Wird bewusst als blockquote mit cite ausgezeichnet und nicht als Headline
   oder Fliesstext gesetzt: es ist eine Aussage des Wirts, keine Werbeaussage
   von uns. Wer daraus eine Headline macht, macht aus seiner Haltung eine
   beworbene Tatsachenbehauptung (Paragraph 5 UWG).
   -------------------------------------------------------------------------- */

.zitat {
  margin: 0;
  padding: 0 0 0 clamp(18px, 5vw, 30px);
  border-left: 2px solid var(--terrakotta);
}

.zitat p {
  margin: 0 0 14px;
  font: italic 400 clamp(19px, 4.8vw, 26px) / 1.42 var(--display);
  color: var(--creme);
  text-wrap: pretty;
}

.zitat p:last-of-type {
  margin-bottom: 18px;
}

.zitat cite {
  display: block;
  font: 500 13px/1.6 var(--body);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   20 — Gerichtzeile mit Preis (Speisekarte)

   Name und Preis in einer Zeile, Beschreibung darunter ueber die volle
   Breite. Der Preis steht rechtsbuendig und bricht nie um.
   -------------------------------------------------------------------------- */

.liste-linien li.gericht {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 16px;
  align-items: baseline;
}

/* Die Selektoren tragen bewusst .liste-linien vor sich: sonst gewinnen
   .liste-linien b und .liste-linien span (Klasse + Element schlaegt Klasse)
   und die Beschreibung stuende rechtsbuendig in der Serifenschrift. */
.liste-linien .gericht__name {
  font: 600 16px/1.35 var(--body);
  color: var(--creme);
  text-align: left;
}

.liste-linien .gericht__preis {
  font: 600 15px/1.35 var(--body);
  color: var(--sand);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.liste-linien .gericht__satz {
  grid-column: 1 / -1;
  /* 10.10.2026: 13 -> 14.5 px (Filip: „ein Tick größer"), Zielgruppe 55+ */
  font: 400 14.5px/1.55 var(--body);
  color: var(--sand);
  text-align: left;
}

/* Auf der Speisekarte sind die Listen lang: etwas enger setzen. */
.karte .liste-linien li.gericht {
  padding: 11px 0;
}

/* 24.09.2026 — Rechtstext aus dem eRecht24-Generator (Datenschutz).
   Der Text bringt seine eigene Gliederung h2/h3/h4 mit; hier nur Satz,
   keine Umformulierung. Lange Woerter (DSGVO-Deutsch) duerfen umbrechen. */
.rechtstext {
  color: var(--creme);
  max-width: 68ch;
  overflow-wrap: break-word;
  hyphens: auto;
}
.rechtstext h2 {
  font: 400 var(--t-h3) / 1.2 var(--display);
  margin: 2.2em 0 0.6em;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 {
  font: 600 19px / 1.3 var(--body);
  margin: 1.8em 0 0.5em;
}
.rechtstext h4 {
  font: 600 17px / 1.35 var(--body);
  color: var(--sand);
  margin: 1.4em 0 0.4em;
}
.rechtstext p,
.rechtstext ul { margin: 0 0 1em; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: 0.4em; }
.rechtstext a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }

/* Nur fuer Screenreader sichtbar (z. B. „neuer Tab" an Links). */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 24.09.2026 — Impressum: „Verbraucherstreitbeilegung/Universalschlichtungsstelle"
   und lange URLs sprengten bei 390 px die Breite (scrollWidth 530). */
.spalte-760 .h3-klein,
.spalte-760 .fliess {
  hyphens: auto;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   15.10.2026 — Sprungleiste auf /speisekarte/
   Klebt unter der festen Kopfzeile (69 px gemessen, 390 und 1440 px).
   Mobil: waagerecht wischbar, ohne sichtbaren Rollbalken.
   ========================================================================== */
html:has(.kartensprung) {
  scroll-padding-top: 136px;
}

.kartensprung {
  position: sticky;
  top: 69px;
  z-index: 30;
  background: rgba(20, 32, 26, 0.95);
  border-bottom: 1px solid var(--wald-mittel);
  backdrop-filter: blur(8px);
}

.kartensprung__spur {
  display: flex;
  gap: 10px;
  max-width: var(--huelle);
  margin: 0 auto;
  padding: 12px var(--rand);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.kartensprung__spur::-webkit-scrollbar {
  display: none;
}

.kartensprung__knopf {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font: 600 15px/1 var(--body);
  letter-spacing: 0.01em;
  color: var(--creme);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}

.kartensprung__knopf:hover {
  border-color: var(--sand);
  color: var(--sand);
}

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

.kartensprung__knopf[aria-current="true"] {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--wald-tief);
}

@media (min-width: 900px) {
  .kartensprung__spur {
    justify-content: center;
  }
}