/* ==========================================================================
   Zum Hocker by Tidija, Duisburg-Bissingheim, Fassung vom 03.11.2026.
   Farben und Logo aus der
   gedruckten Speisekarte (Oktober 2026): Grün #5a865c, Gold #b09d57, Text
   #1d1d1b. Das Grün ist für die Lesbarkeit weißer Schrift leicht abgedunkelt.
   Formen wie auf der Karte: Balken mit Sperrschrift, gepunktete Linie, Kreise,
   Wellenschnitt über Fotos.
   Eigenes Stylesheet, keine Bibliothek, kein JavaScript, keine fremden Server.
   Schrift: Montserrat (variabel, selbst gehostet, SIL Open Font License).
   Aufbau: 0 Schrift, 1 Grundlagen, 2 Bausteine, 3 Kopf, 4 Start, 5 Abschnitte,
           6 Speisekarte, 7 Kontakt, 8 Fuß, 9 Bewegung, 10 Schmale Schirme,
           11 Eigenes dieser Seite
   ========================================================================== */

/* --- 0 Schrift ----------------------------------------------------------- */

@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-variabel.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-italic-variabel.woff2") format("woff2");
}

/* --- 1 Grundlagen -------------------------------------------------------- */

:root {
  --gruen:       #4a7350;   /* Grün der Karte, leicht abgedunkelt */
  --gruen-tief:  #38583c;
  --gold:        #b09d57;   /* Gold der Karte, nur für Flächen und Kreise */
  --gold-text:   #75662e;   /* dunkles Gold für Schrift auf Hell */
  --gold-hell:   #f2edd8;   /* Schrift auf Grün */
  --creme:       #f6f4ec;   /* helle Fläche */
  --creme-2:     #e8e3d2;
  --weiss:       #ffffff;
  --text:        #1d1d1b;   /* Schrift der Karte */
  --text-hell:   #5b5b55;
  --veg:         #4a7350;   /* V der Karte */
  --punkt:       rgba(176, 157, 87, .8);

  --breite:      1180px;
  --luft:        clamp(1rem, 4vw, 2rem);
  --abschnitt:   clamp(3.5rem, 8vw, 6.5rem);
  --rund:        28px;
  --rund-klein:  14px;
  --schrift:     "Montserrat", "Segoe UI", Arial, sans-serif;
  --schatten:    0 14px 40px rgba(56, 88, 60, .10);
  --schatten-2:  0 24px 70px rgba(56, 88, 60, .20);
  --tempo:       .4s cubic-bezier(.22, .68, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: clamp(.98rem, .94rem + .2vw, 1.05rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible { color: var(--gold-text); }
@media (hover: hover) { a:hover { color: var(--gold-text); } }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; color: var(--gruen); }
h1, h2 { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); }
h3 { font-weight: 800; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: .08em; text-transform: uppercase; }
h4 { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 1.2rem 0 .4rem; }

/* Die leichte, kursive Zweitzeile, wie „frisch und hausgemacht" auf der Karte */
h1 em, h2 em {
  display: block;
  font-style: italic; font-weight: 300;
  text-transform: none; letter-spacing: .01em;
  color: var(--gold-text);
  font-size: .55em; line-height: 1.3; margin-top: .35em;
}
h1 em { font-size: .5em; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
address { font-style: normal; }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gruen); color: #fff; padding: .8rem 1.2rem; font-weight: 600; }
.skip:focus { left: 0; }

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

/* --- 2 Bausteine --------------------------------------------------------- */

.huelle, .wrap { width: min(100% - 2 * var(--luft), var(--breite)); margin-inline: auto; }
.huelle.schmal, .wrap.text { width: min(100% - 2 * var(--luft), 780px); }
.mitte { text-align: center; }

/* Pill-Knöpfe wie das Telefon-Schild des Schnitzeltaxi-Flyers */
.knopf, .knopf--voll {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.7rem; border: 2px solid var(--gruen); border-radius: 999px;
  background: var(--gruen); color: #fff;
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: rgba(176, 157, 87, .35);
}
.knopf:focus-visible, .knopf--voll:focus-visible {
  background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(56, 88, 60, .25);
}
.knopf-leer, .knopf--rand { background: transparent; color: var(--gruen); }
.knopf-leer:focus-visible, .knopf--rand:focus-visible { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf-weiss { background: #fff; border-color: #fff; color: var(--gruen); }
.knopf-weiss:focus-visible { background: var(--creme); border-color: var(--creme); color: var(--gruen); }
.knopf-weiss-leer { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.knopf-weiss-leer:focus-visible { background: #fff; border-color: #fff; color: var(--gruen); }
/* Hover nur mit Maus, auf dem Handy bliebe der Knopf nach dem Antippen sonst gefärbt stehen */
@media (hover: hover) {
  .knopf:hover, .knopf--voll:hover {
    background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff;
    transform: translateY(-2px); box-shadow: 0 12px 26px rgba(56, 88, 60, .25);
  }
  .knopf-leer:hover, .knopf--rand:hover { background: var(--gruen); border-color: var(--gruen); color: #fff; }
  .knopf-weiss:hover { background: var(--creme); border-color: var(--creme); color: var(--gruen); }
  .knopf-weiss-leer:hover { background: #fff; border-color: #fff; color: var(--gruen); }
  }
/* Gedrückt: dunkle Fläche, ohne Anheben */
.knopf:active, .knopf--voll:active {
  background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff;
  transform: none; box-shadow: none;
}
.knopf-weiss:active, .knopf-weiss-leer:active { background: var(--creme-2); border-color: var(--creme-2); color: var(--gruen); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Kicker: der dunkelblaue Balken mit weißer Sperrschrift („SPEISEN" auf der Karte),
   dahinter läuft eine gepunktete Linie aus */
.kicker { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; }
.kicker span {
  display: inline-block; background: var(--gruen); color: #fff;
  padding: .4rem 1rem .38rem; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.kicker::after { content: ""; flex: 1; max-width: 200px; border-top: 3px dotted var(--punkt); }
.mitte .kicker { justify-content: center; }
.mitte .kicker::after { display: none; }

.vorspann { font-size: clamp(1rem, .96rem + .3vw, 1.15rem); color: var(--text-hell); max-width: 62ch; }
.kopfzeile { max-width: 780px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kopfzeile.mitte { margin-inline: auto; }
.kopfzeile.mitte .vorspann { margin-inline: auto; }

.punktlinie { border: 0; border-top: 3px dotted var(--punkt); margin: 0; }
.symbol { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* Fotomedaillon: rundes Foto mit weißem Ring, dahinter ein Stahlblau-Kreis */
.medaillon { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--schatten-2); border: 8px solid #fff; background: var(--creme-2); }
.medaillon img { width: 100%; height: 100%; object-fit: cover; }

/* --- 3 Kopf -------------------------------------------------------------- */

.kopf-info { background: var(--creme); color: var(--gruen); font-size: .8rem; border-bottom: 1px solid var(--creme-2); }
.kopf-info-innen { display: flex; flex-wrap: wrap; gap: .25rem 1.8rem; align-items: center; justify-content: center; padding-block: .45rem; }
.kopf-info-teil { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; font-weight: 600; }
a.kopf-info-teil:hover, a.kopf-info-teil:focus-visible { color: var(--gold-text); }
.kopf-info-zusatz { color: var(--gold-text); font-weight: 400; }

.kopf-marke {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--creme-2);
}
.kopf-marke-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .4rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; }
.logo img { width: auto; height: 74px; }

.menue ul { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: 0; padding: 0; align-items: center; }
.menue li { margin: 0; }
.menue a {
  display: inline-block; padding: .5rem 0; text-decoration: none; color: var(--gruen);
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 3px dotted transparent;
}
.menue a:hover, .menue a:focus-visible, .menue a[aria-current="page"] { color: var(--gruen); border-bottom-color: var(--gold-text); }
.menue-aktion { margin-left: .4rem; }
.menue-aktion a { border-bottom: 2px solid var(--gruen); color: #fff; }
.menue-aktion a:hover, .menue-aktion a:focus-visible { border-bottom-color: var(--gruen); color: #fff; }
.menue-aktion a:focus-visible, .menue-aktion a:active { border-bottom-color: var(--gruen-tief); }
@media (hover: hover) { .menue-aktion a:hover { border-bottom-color: var(--gruen-tief); } }
.menue-aktion .knopf { padding: .65rem 1.2rem; font-size: .76rem; }

.klapp { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menue-schalter {
  display: none; align-items: center; gap: .6rem;
  border: 2px solid var(--gruen); color: var(--gruen); border-radius: 999px;
  padding: .55rem 1rem; font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: rgba(176, 157, 87, .35);
}
.menue-schalter:active { background: var(--gruen); color: #fff; }
.klapp:focus-visible + .menue-schalter { outline: 3px solid var(--gold); outline-offset: 3px; }
.balken { width: 18px; height: 2px; background: currentColor; position: relative; display: block; }
.balken::before, .balken::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
.balken::before { top: -6px; }
.balken::after  { top: 6px; }

/* --- 4 Start ------------------------------------------------------------- */

/* Startbild: helle Fläche, links Text, rechts das Fotomedaillon vor einem
   großen Stahlblau-Kreis, der rechts aus der Seite läuft (wie der Kreis auf
   dem Titel der Karte) */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--creme); }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  right: -14vw; top: -22%; width: clamp(420px, 56vw, 820px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); opacity: .9;
}
.hero::after {
  content: ""; position: absolute; z-index: -1;
  left: -6rem; bottom: -9rem; width: 18rem; aspect-ratio: 1; border-radius: 50%;
  border: 3px dotted var(--punkt); opacity: .5;
}
.hero-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero h1 { margin-bottom: .5em; }
.hero-text { font-size: clamp(1rem, .95rem + .35vw, 1.18rem); color: var(--text-hell); max-width: 50ch; }
.hero-hinweis { margin: 1.4rem 0 0; font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
.hero-hinweis span { display: inline-block; }
.hero-hinweis span + span::before { content: "•"; margin: 0 .7rem; color: var(--gruen); }
.hero-bild { position: relative; justify-self: end; width: min(100%, 520px); }
.hero-bild .medaillon { border-width: 10px; }
.hero-bild::after {
  content: ""; position: absolute; left: -2.2rem; bottom: 1.4rem; width: 7.5rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--gruen); z-index: 1;
  box-shadow: 0 10px 30px rgba(56, 88, 60, .3);
}
.hero-stempel {
  position: absolute; left: -2.2rem; bottom: 1.4rem; width: 7.5rem; aspect-ratio: 1; z-index: 2;
  display: grid; place-items: center; text-align: center; color: #fff;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; padding: .8rem;
}
.hero-stempel b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; margin-top: .15rem; }

/* Eckdaten-Streifen unter dem Startbild, Zellen mit gepunkteten Trennlinien */
.streifen { background: var(--weiss); border-bottom: 3px dotted var(--punkt); }
.streifen-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.streifen-reihe li { margin: 0; border-left: 3px dotted var(--punkt); }
.streifen-reihe li:first-child { border-left: 0; }
.streifen-reihe a { display: block; height: 100%; padding: 1.2rem 1.5rem; color: var(--text); text-decoration: none; transition: background .2s; }
.streifen-reihe a:hover, .streifen-reihe a:focus-visible { background: var(--creme); color: var(--text); }
.streifen-titel { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .25rem; }
.streifen-wert { display: block; font-weight: 800; color: var(--gruen); line-height: 1.3; }
.streifen-wert small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-hell); margin-top: .15rem; }

/* --- 5 Abschnitte -------------------------------------------------------- */

.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-creme { background: var(--creme); }
.abschnitt-weiss { background: var(--weiss); }
.abschnitt-gruen { background: var(--gruen); color: #fff; }
.abschnitt-gruen h2, .abschnitt-gruen h3 { color: #fff; }
.abschnitt-gruen h2 em { color: var(--gold-hell); }
.abschnitt-gruen .kicker span { background: #fff; color: var(--gruen); }
.abschnitt-gruen .kicker::after { border-color: rgba(255, 255, 255, .5); }
.abschnitt-gruen .vorspann { color: var(--gold-hell); }
.abschnitt-gruen a:not(.knopf) { color: #fff; }

/* Zwei Spalten: Text und Medaillon-Paar */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.duo-bilder { position: relative; padding: 0 0 22% 0; }
.duo-bilder .medaillon-gross { width: 78%; }
.duo-bilder .medaillon-klein { position: absolute; right: 0; bottom: 0; width: 46%; border-width: 8px; }
.duo-bilder::before { content: ""; position: absolute; right: 8%; top: -6%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); opacity: .85; z-index: -1; }
.duo-bilder::after { content: ""; position: absolute; left: -4%; bottom: 10%; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 3px dotted var(--punkt); z-index: -1; }
.duo.gespiegelt .duo-bilder { order: -1; }

/* Kartenauszug: weiße Tafeln mit großer Rundung, Gerichte mit gepunkteten Linien */
.auszug-raster { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); }
.tafel {
  position: relative; background: var(--weiss); border-radius: var(--rund); padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: var(--schatten); transition: transform var(--tempo), box-shadow var(--tempo);
}
.abschnitt-weiss .tafel { background: var(--creme); box-shadow: none; }
.tafel:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.tafel h3 { margin-bottom: .2rem; font-size: 1.05rem; }
.tafel h3 a { color: inherit; text-decoration: none; }
.tafel h3 a:hover { color: var(--gold-text); }
.tafel-unter { font-style: italic; font-weight: 300; color: var(--gold-text); margin: 0 0 .9rem; }
.tafel-zahl { position: absolute; right: 1.4rem; top: 1.1rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; color: var(--gold-text); }
.tafel .text-link { font-size: .84rem; }
.tafel p { color: var(--text-hell); }

.gerichte { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.gerichte li { display: flex; align-items: baseline; gap: .6rem; margin: 0; padding: .5rem 0; border-bottom: 2px dotted var(--creme-2); }
.gerichte li:last-child { border-bottom: 0; }
.abschnitt-weiss .gerichte li, .tafel-gruen .gerichte li { border-bottom-color: rgba(56, 88, 60, .12); }
.gericht-name { font-weight: 600; color: var(--text); }
.gericht-platz { flex: 1; }
.gericht-preis { font-weight: 800; color: var(--gruen); white-space: nowrap; letter-spacing: .02em; }
.gericht-preis::after { content: " €"; font-weight: 600; }

/* Preisstempel: Kreis in Stahlblau, wie der Kreis auf dem Titel der Karte */
.tafel.tafel-stempel, .abschnitt-weiss .tafel.tafel-stempel { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; background: var(--gruen); color: #fff; }
.tafel-stempel h3 { color: #fff; }
.tafel-stempel .tafel-unter { color: var(--gold-hell); }
.tafel-stempel p { color: rgba(255, 255, 255, .85); font-size: .92rem; margin: 0; }
.stempel {
  width: 8.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: var(--text);
  display: grid; place-items: center; text-align: center; line-height: 1.1; padding: .6rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transform: rotate(-6deg);
}
.stempel b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: .02em; }
.stempel small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-top: .3rem; }

/* Galerie: Mauerwerk mit runden Ecken */
.galerie { columns: 4 240px; column-gap: 1rem; }
.galerie a { display: block; break-inside: avoid; margin-bottom: 1rem; border-radius: var(--rund-klein); overflow: hidden; }
.galerie img { width: 100%; transition: transform var(--tempo); }
.galerie a:hover img { transform: scale(1.04); }

/* Wellenschnitt: Foto am unteren Rand des Abschnitts, die obere Kante ist
   eine Welle, wie die Fotos am Seitenfuß der gedruckten Karte */
.welle { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }
.welle-bild { width: 100%; height: clamp(260px, 36vw, 480px); object-fit: cover; object-position: center 60%; }
.welle-kante { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: clamp(40px, 6vw, 90px); }
.welle-kante path { fill: var(--weiss); }
.abschnitt-creme .welle-kante path { fill: var(--creme); }
.abschnitt-welle { padding-bottom: 0; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.zweispaltig h3 { margin-top: .4rem; }

.zweier { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); }
.tafel-gruen { background: var(--gruen); color: #fff; }
.tafel-gruen h3, .tafel-gruen strong { color: #fff; }
.tafel-gruen .tafel-unter { color: var(--gold-hell); }
.tafel-gruen p { color: rgba(255, 255, 255, .85); }
.tafel-gruen a { color: #fff; }
.tafel-gruen .zeiten { margin: 0 0 1rem; }
.tafel-gruen .zeiten dt { color: var(--gold-hell); }
.tafel-gruen .zeiten dd { color: #fff; }
.tafel-gruen .gericht-name, .tafel-gruen .gericht-preis { color: #fff; }
.tafel-gruen .gerichte li { border-bottom-color: rgba(255, 255, 255, .2); }
.tafel-gruen .tafel-zahl { color: var(--gold-hell); }
.abschnitt-weiss .tafel-gruen { background: var(--gruen); }

/* Telefon-Schild wie auf dem Flyer: weiße Pille mit blauer Nummer */
.telefon-schild {
  display: inline-block; background: #fff; color: var(--gruen); border-radius: 999px;
  padding: .55rem 1.4rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: .04em;
  text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); margin: .4rem 0 .8rem;
  -webkit-tap-highlight-color: rgba(176, 157, 87, .35);
}
/* Auf der blauen Tafel färbt .tafel-gruen a sonst die Nummer weiß */
.tafel-gruen .telefon-schild { color: var(--gruen); }
.telefon-schild:focus-visible { color: var(--gold-text); }
@media (hover: hover) { .telefon-schild:hover { color: var(--gold-text); } }
.telefon-schild:active { background: var(--creme-2); color: var(--gruen); }

/* Öffnungszeiten und Reservierung */
.zeiten-raster { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1.4rem; align-items: stretch; }
.zeiten { margin: 0; }
.zeiten dt { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
.zeiten dd { margin: 0 0 .8rem; color: var(--text); font-weight: 600; }
.zeiten dd:last-child { margin-bottom: 0; }
.zeiten-hinweis { margin: 1rem 0 0; font-style: italic; font-weight: 300; color: var(--text-hell); }
.tafel .zeiten-hinweis { color: var(--text-hell); }
.tafel.reservierung, .abschnitt-weiss .tafel.reservierung { background: var(--gruen); color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: var(--schatten); }
.reservierung h3 { color: #fff; }
.reservierung .kicker { justify-content: center; margin-bottom: 1rem; }
.reservierung .kicker span { background: var(--gold); color: var(--text); }
.reservierung .kicker::after { display: none; }
.reservierung p { color: rgba(255, 255, 255, .85); margin: .3rem 0 0; }
.reservierung-breit { grid-column: span 2; }

/* Seitenkopf der Unterseiten: hell, mit Medaillon rechts */
.seitenkopf, .titel { position: relative; isolation: isolate; overflow: hidden; background: var(--creme); border-bottom: 3px dotted var(--punkt); }
.seitenkopf::before {
  content: ""; position: absolute; z-index: -1; right: -10vw; top: -40%; width: clamp(320px, 40vw, 600px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); opacity: .9;
}
.seitenkopf-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seitenkopf-raster > .medaillon { width: min(100%, 300px); justify-self: end; }
.seitenkopf h1 { margin-bottom: .3em; }
.seitenkopf .knoepfe { margin-top: 1.2rem; }
.seitenkopf-ohne .seitenkopf-raster { grid-template-columns: 1fr; }
.seitenkopf-ohne::before { opacity: .25; }
.titel .huelle { padding-block: 3rem; }

/* Lange Textseiten */
.text h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); margin-top: 1.8em; }
.text h2:first-child { margin-top: 0; }
.text h3 { margin-top: 1.2em; font-size: 1rem; }
.hinweis { background: var(--creme); border-radius: var(--rund-klein); padding: 1rem 1.3rem; margin-bottom: 2rem; }
.hinweis p { margin: 0; }

/* --- 6 Speisekarte als HTML ---------------------------------------------- */

.karte-nav { position: sticky; top: 90px; z-index: 5; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--creme-2); }
.karte-nav ul { list-style: none; margin: 0; padding: .7rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.karte-nav li { margin: 0; }
.karte-nav a {
  display: inline-block; padding: .35rem .95rem; border-radius: 999px; border: 2px solid var(--creme-2);
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen); text-decoration: none;
  -webkit-tap-highlight-color: rgba(176, 157, 87, .35);
}
.karte-nav a:focus-visible { background: var(--gruen); border-color: var(--gruen); color: #fff; }
@media (hover: hover) { .karte-nav a:hover { background: var(--gruen); border-color: var(--gruen); color: #fff; } }
.karte-nav a:active { background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff; }

.abschnitt-karte { scroll-margin-top: 150px; }
.karte-spalten { columns: 2; column-gap: 1.6rem; }
.karte-spalten-3 { columns: 3; }
.karte-teil {
  break-inside: avoid; margin-bottom: 1.6rem; scroll-margin-top: 170px;
  background: var(--weiss); border-radius: var(--rund); padding: 1.8rem 1.9rem 1.5rem; box-shadow: var(--schatten);
}
.abschnitt-weiss .karte-teil { background: var(--creme); box-shadow: none; }
.karte-teil h3 { margin-bottom: .15rem; }
.karte-unter { font-style: italic; font-weight: 300; color: var(--gold-text); margin: 0 0 .8rem; }
.karte-hinweis { font-size: .88rem; color: var(--text-hell); margin: 0 0 1rem; }
.karte-liste { list-style: none; margin: 0; padding: 0; }
.karte-gericht {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: .6rem;
  padding: .65rem 0; margin: 0; border-bottom: 2px dotted var(--creme-2);
}
.karte-gericht:last-child { border-bottom: 0; }
.abschnitt-weiss .karte-gericht { border-bottom-color: rgba(56, 88, 60, .12); }
.karte-name { font-weight: 600; color: var(--text); }
.karte-punkte { min-width: 1rem; }
.karte-preis { font-weight: 800; color: var(--gruen); white-space: nowrap; letter-spacing: .02em; }
.karte-preis::after { content: " €"; font-weight: 600; }
.karte-preis small { font-weight: 400; font-size: .74rem; color: var(--text-hell); margin-right: .4rem; letter-spacing: 0; }
.karte-preis + .karte-preis { margin-left: .9rem; }
.karte-text { grid-column: 1 / -1; font-size: .88rem; color: var(--text-hell); line-height: 1.5; margin-top: .05rem; }
.karte-gericht-klein { padding-block: .4rem; }
.karte-gericht-klein .karte-name { font-weight: 400; }
.kennz { font-size: .6em; font-weight: 600; color: var(--gold-text); margin-left: .15em; letter-spacing: .06em; cursor: help; }
.veggie {
  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .3rem;
  border: 1.5px solid var(--veg); border-radius: 50%; color: var(--veg);
  font-size: .6rem; font-weight: 800; line-height: 1; vertical-align: .1em; cursor: help;
}
.karte-teil.karte-highlight, .abschnitt-weiss .karte-teil.karte-highlight { background: var(--gruen); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; box-shadow: var(--schatten); }
.karte-highlight h3 { color: #fff; }
.karte-highlight .karte-unter { color: var(--gold-hell); }
.karte-highlight .karte-hinweis { color: rgba(255, 255, 255, .85); margin: 0; }
.karte-highlight .karte-ueber { grid-column: 1 / -1; font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hell); margin: 0 0 .4rem; }
.karte-legende { font-size: .8rem; color: var(--text-hell); margin-top: 1rem; max-width: 100ch; }
.karte-legende p { margin: 0 0 .4rem; }
.karte-legende b { color: var(--gruen); }
.karte-stand { font-style: italic; font-weight: 300; color: var(--text-hell); margin-top: 1.4rem; }

/* Getränke auf Blau */
.abschnitt-gruen .karte-teil { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; }
.abschnitt-gruen .karte-teil h3 { color: #fff; }
.abschnitt-gruen .karte-unter { color: var(--gold-hell); }
.abschnitt-gruen .karte-name { color: #fff; }
.abschnitt-gruen .karte-gericht { border-bottom-color: rgba(255, 255, 255, .22); }
.abschnitt-gruen .karte-preis { color: #fff; }
.abschnitt-gruen .karte-preis small, .abschnitt-gruen .karte-text, .abschnitt-gruen .karte-hinweis { color: var(--gold-hell); }
.abschnitt-gruen h4 { color: var(--gold-hell); }
.abschnitt-gruen .kennz { color: var(--gold-hell); }

/* --- 7 Kontakt ----------------------------------------------------------- */

.kontakt { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.anschrift { margin-bottom: 1.5rem; line-height: 1.9; }
.dank { font-style: italic; font-weight: 300; color: var(--gold-text); font-size: 1.1rem; }
.formular-karte { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); padding: clamp(1.6rem, 3vw, 2.4rem); }
.formular-karte h3 { margin-bottom: 1rem; }
form { max-width: 620px; }
.feld { margin-bottom: 1.1rem; }
label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--gruen); font-size: .86rem; letter-spacing: .04em; }
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: .8rem 1rem; border: 2px solid var(--creme-2); border-radius: var(--rund-klein);
  font: inherit; color: var(--text); background: #fff;
}
input:focus, textarea:focus { outline: 0; border-color: var(--gold-text); box-shadow: 0 0 0 4px rgba(176, 157, 87, .2); }
textarea { resize: vertical; min-height: 140px; }
.zustimmung { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--text); letter-spacing: 0; }
.zustimmung input { margin-top: .3rem; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--gruen); }
.falle { position: absolute; left: -9999px; }
.hinweis-klein { font-size: .85rem; margin: 1rem 0 0; color: var(--text-hell); }

.anfahrt figure { margin: 0; }
.anfahrt img { width: 100%; border-radius: var(--rund); box-shadow: var(--schatten); }
.anfahrt figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .85rem; margin-top: .9rem; color: var(--text-hell); }
.routen { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.routen a { font-weight: 600; }

/* --- 8 Fuß --------------------------------------------------------------- */

.fuss { background: var(--gruen); color: var(--gold-hell); font-size: .92rem; }
.fuss-raster { display: grid; gap: 2rem; grid-template-columns: 1.3fr 1fr 1fr 1fr; padding-block: clamp(2.6rem, 5vw, 4rem); }
.fuss-logo { width: 120px; height: auto; margin-bottom: 1rem; }
.fuss-text { color: var(--gold-hell); max-width: 34ch; }
.fuss-titel { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { color: var(--gold-hell); text-decoration: underline; }
.fuss-adresse { line-height: 1.9; }
.fuss .zeiten dt { color: var(--gold-hell); }
.fuss .zeiten dd { margin: 0 0 .6rem; color: #fff; font-size: .92rem; }
.fuss-liste, .fuss-recht { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: .4rem; }
.fuss-schluss { background: var(--gruen-tief); }
.fuss-schluss-innen { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; padding-block: 1rem; font-size: .82rem; }
.fuss-schluss p { margin: 0; }
.fuss-recht { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fuss-recht li { margin: 0; }

/* --- 9 Bewegung ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- 10 Schmale Schirme -------------------------------------------------- */

@media (max-width: 1100px) {
  .auszug-raster { grid-template-columns: repeat(2, 1fr); }
  .karte-spalten-3 { columns: 2; }
  .zeiten-raster { grid-template-columns: 1fr 1fr; }
  .zeiten-raster .reservierung { grid-column: 1 / -1; }
  .streifen-reihe { grid-template-columns: repeat(2, 1fr); }
  .streifen-reihe li:nth-child(3) { border-left: 0; }
  .streifen-reihe li:nth-child(n+3) { border-top: 3px dotted var(--punkt); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .menue-schalter { display: inline-flex; }
  .menue { flex-basis: 100%; display: none; padding-bottom: .6rem; }
  .klapp:checked ~ .menue { display: block; }
  .klapp:checked ~ .menue-schalter .balken { background: transparent; }
  .klapp:checked ~ .menue-schalter .balken::before { transform: translateY(6px) rotate(45deg); }
  .klapp:checked ~ .menue-schalter .balken::after { transform: translateY(-6px) rotate(-45deg); }
  .menue ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menue li { border-top: 2px dotted var(--creme-2); }
  .menue a { padding: .85rem 0; border-bottom: 0; }
  .menue-aktion { margin: 0; border-top: 0; padding-top: .9rem; }
  .menue-aktion .knopf { display: flex; width: 100%; }

  .hero-raster { grid-template-columns: 1fr; }
  .hero-bild { justify-self: center; width: min(100%, 420px); margin-top: 1rem; }
  .hero::before { right: -30vw; top: auto; bottom: -10%; width: 80vw; }
  .duo { grid-template-columns: 1fr; }
  .duo.gespiegelt .duo-bilder { order: 0; }
  .duo-bilder { width: min(100%, 480px); margin-inline: auto; }
  .kontakt { grid-template-columns: 1fr; }
  .karte-spalten, .karte-spalten-3 { columns: 1; }
  .karte-nav { top: 78px; }
  .zweier, .zweispaltig { grid-template-columns: 1fr; }
  .seitenkopf-raster { grid-template-columns: 1fr; }
  .seitenkopf-raster > .medaillon { width: min(60%, 240px); justify-self: start; }
}

@media (max-width: 640px) {
  .auszug-raster, .zeiten-raster, .streifen-reihe { grid-template-columns: 1fr; }
  .streifen-reihe li { border-left: 0; }
  .streifen-reihe li + li { border-top: 3px dotted var(--punkt); }
  .reservierung-breit { grid-column: auto; }
  .fuss-raster { grid-template-columns: 1fr; }
  .kopf-info-innen { justify-content: flex-start; gap: .25rem 1.2rem; }
  .karte-gericht { grid-template-columns: 1fr auto; }
  .karte-punkte { display: none; }
  .karte-preis + .karte-preis { margin-left: .6rem; }
  .tafel-stempel, .karte-highlight { grid-template-columns: 1fr; }
  .stempel { margin-top: .6rem; }
  .hero-bild::after, .hero-stempel { left: 0; bottom: 0; width: 6.5rem; }
  .logo img { height: 62px; }
}

/* --- 11 Eigenes dieser Seite --------------------------------------------- */


.punkt { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .45rem; background: var(--gold); vertical-align: .05em; }
.punkt.ist-offen { background: #3f9a55; }
.punkt.ist-zu { background: #b5622e; }

/* Neueröffnung: blendet sich nach dem Termin selbst aus */
.eroeffnung { background: var(--gruen); color: #fff; }
.eroeffnung-innen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem 2.5rem; padding-block: 1.8rem; }
.eroeffnung .stempel { width: 7.5rem; }
.eroeffnung .stempel b { font-size: 1.5rem; }
.eroeffnung h2 { color: #fff; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin-bottom: .1em; }
.eroeffnung h2 em { color: var(--gold-hell); }
.eroeffnung-punkte { list-style: none; margin: .7rem 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.eroeffnung-punkte li { margin: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: .2rem .85rem; font-size: .8rem; font-weight: 600; }
.eroeffnung-gueltig { margin: 0; font-size: .82rem; color: var(--gold-hell); }

/* Schnitzel-Stempelkarte: elf Kreise wie auf dem Flyer, über die ganze Breite */
.tafel.stempelkarte, .abschnitt-weiss .tafel.stempelkarte {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.6rem 2.5rem; align-items: center;
  background: var(--gruen); color: #fff;
}
.stempelkarte h3 { color: #fff; }
.stempelkarte .tafel-unter { color: var(--gold-hell); }
.stempelkarte p { color: rgba(255, 255, 255, .92); margin-bottom: .4rem; }
.stempelkarte .gueltig { color: var(--gold-hell); font-weight: 600; }
.stempelkarte a { color: #fff; }
.stempel-reihe { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.stempel-reihe li {
  margin: 0; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--gruen-tief); font-weight: 800; font-size: .9rem;
}
.stempel-reihe li.gratis { background: var(--gold); color: var(--text); font-size: .68rem; font-weight: 600; }

/* Unterseiten */
.seitenkopf > .huelle:not(.seitenkopf-raster) { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seitenkopf .vorspann { color: var(--text); }
.seitenkopf .medaillon { width: min(100%, 300px); justify-self: end; }
.kacheln { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tafel svg { width: 38px; height: 38px; color: var(--gold-text); margin-bottom: .9rem; }
.tafel h2 { font-size: 1.05rem; letter-spacing: .08em; margin-bottom: .5rem; }
.zwei-spalten { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.zeiten-paar { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bild-rand { width: 100%; border-radius: var(--rund); box-shadow: var(--schatten); }
.telefon-zeile { margin: 1rem 0 0; }
.zeiten-tag { font-weight: 600; color: var(--gruen); margin: 1rem 0 0; }
.band-reservierung { background: var(--gruen); color: #fff; text-align: center; }
.band-reservierung h2 { color: #fff; }
.band-reservierung .kicker { justify-content: center; }
.band-reservierung .kicker span { background: var(--gold); color: var(--text); }
.band-reservierung .kicker::after { display: none; }
.band-reservierung p { color: rgba(255, 255, 255, .92); }
.karte-hinweis { font-style: italic; font-weight: 300; }
.karte-legende strong { color: var(--gruen); }

/* Lange Textseiten: Zwischenüberschriften eine Stufe kleiner */
.huelle.schmal h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); margin-top: 1.8em; }
.huelle.schmal h2:first-child, .band-reservierung .huelle.schmal h2 { margin-top: 0; }
.huelle.schmal h3 { margin-top: 1.2em; font-size: 1rem; }
.liste { margin: 0 0 1.1em; padding-left: 1.3em; }
.adresse { font-style: normal; line-height: 1.9; margin-bottom: 1.1em; }
.adresse-gross { font-size: 1.1rem; }
.eckdaten { margin: 0 0 1.4em; }
.eckdaten dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-text); font-weight: 600; margin-top: .9rem; }
.eckdaten dt:first-child { margin-top: 0; }
.eckdaten dd { margin: 0; }
.hinweis { font-size: .88rem; color: var(--text-hell); }
.hinweis-offen { background: #fff6d6; }

@media (max-width: 1100px) {
  .eroeffnung-innen { grid-template-columns: auto 1fr; }
  .eroeffnung-innen .knoepfe { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 900px) {
  .tafel.stempelkarte, .abschnitt-weiss .tafel.stempelkarte { grid-template-columns: 1fr; }
  .seitenkopf .medaillon { width: min(60%, 240px); justify-self: start; }
}
@media (max-width: 640px) {
  .eroeffnung-innen { grid-template-columns: 1fr; }
  .eroeffnung .stempel { justify-self: start; }
  .seitenkopf .medaillon { display: none; }
}
.galerie-bild { display: block; break-inside: avoid; margin-bottom: 1rem; border-radius: var(--rund-klein); overflow: hidden; }

/* Das Schnitzelfoto ist links dunkel, im Kreis nur der Teil mit dem Essen */
.medaillon-zoom img { transform: scale(1.6); transform-origin: 90% 80%; }
.hero-stempel { text-decoration: none; }
.hinweis { background: none; padding: 0; border-radius: 0; margin-bottom: 1rem; }
.hinweis-offen { background: #fff6d6; padding: 1rem 1.3rem; border-radius: var(--rund-klein); }
.kacheln { margin-top: 1.4rem; }
.tafel h3 + .zeiten { margin-top: .8rem; }
@media (max-width: 640px) {
  .seitenkopf::before { width: 170px; right: -80px; top: -70px; }
}
.raeume { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.raeume .stempel { margin: 0; transform: none; }
.abschnitt-welle .welle-kante path { fill: var(--weiss); }
.kacheln h3 { overflow-wrap: anywhere; }
.kacheln-vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }