/* Der Foehrich, Entwurf Rüger Solutions 11/2026
   Farben: Kastanie (Kopf der eigenen Speisekarte, Weste im Logo), Papier (Speisekarte),
   Akzent Serviettenrot (rote Servietten im Nebenzimmer) nur für die Hauptaktion.
   Form: kantig, 2 px. Markante Form: Holzrahmen der Kreidetafel. */
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --kastanie: #2b1d14;
  --kastanie-2: #3b2a1e;
  --kastanie-3: #4c3828;
  --papier: #f3eadb;
  --papier-2: #e9dcc6;
  --linie: #cdb999;
  --tinte: #2b1d14;
  --tinte-2: #5a4636;
  --rot: #8c1d2a;
  --rot-2: #731521;
  --hell: #fbf6ec;
  --tafel: #1d2622;
  --kreide: #efebe1;
  --kreide-2: #c9c6bb;
  --holz: #6b4a2f;
  --kopf-h: 64px;
  --r: 2px;
  --breite: 1200px;
}
@media (min-width: 64rem) { :root { --kopf-h: 78px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body {
  margin: 0; overflow-x: clip;
  font-family: "Literata", Georgia, serif;
  font-size: 1.125rem; line-height: 1.6; font-weight: 400;
  font-variation-settings: "opsz" 14;
  color: var(--tinte); background: var(--papier);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 .5em; font-variation-settings: "opsz" 60; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 8.2vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 5vw, 3rem); }
h3 { font-size: 1.35rem; line-height: 1.2; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.dunkel :focus-visible, .kopf :focus-visible, .tafel :focus-visible, .fuss :focus-visible { outline-color: var(--kreide); }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nur-vorleser:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--hell); padding: 10px 14px; }
.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: clamp(3.5rem, 9vw, 7rem); }
.dunkel { background: var(--kastanie); color: var(--hell); }
.hell2 { background: var(--papier-2); }
.lead { font-size: 1.2rem; color: var(--tinte-2); max-width: 36em; }
.dunkel .lead { color: #e6d8c3; }

/* Entwurfsbalken */
.entwurf { background: #120c08; color: #e9dcc6; font-size: .8125rem; text-align: center; padding: 5px 10px; letter-spacing: .01em; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .7em 1.35em; border-radius: var(--r);
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.15; text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background-color .2s ease;
}
.knopf:active { transform: scale(.97); }
.knopf.haupt { background: var(--rot); color: #fff; border-color: var(--rot); }
.knopf.zweit { background: transparent; color: inherit; border-color: currentColor; }
.knopf.hell { background: var(--hell); color: var(--kastanie); border-color: var(--hell); }
@media (hover: hover) {
  .knopf.haupt:hover { background: var(--rot-2); border-color: var(--rot-2); }
  .knopf.zweit:hover { background: rgba(255,255,255,.08); }
  .hell2 .knopf.zweit:hover, main > section:not(.dunkel) .knopf.zweit:hover { background: rgba(43,29,20,.06); }
}
.knopf-zeile { display: flex; flex-wrap: wrap; gap: .75rem; }
.mikro { font-size: .95rem; margin-top: .6rem; color: inherit; opacity: .85; }

/* Kopfleiste */
.kopf { position: sticky; top: 0; z-index: 40; background: var(--kastanie); color: var(--hell); border-bottom: 1px solid #45311f; }
.kopf .huelle { display: flex; align-items: center; gap: .75rem; height: var(--kopf-h); width: min(100% - 1.5rem, var(--breite)); }
.marke { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: 0 0 auto; }
.marke img { height: calc(var(--kopf-h) - 10px); width: auto; }
.status { display: none; flex-direction: column; line-height: 1.25; font-size: .9rem; color: #e6d8c3; }
.status b { color: var(--hell); font-weight: 700; }
.kopf nav { display: none; margin-left: auto; }
.kopf nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.kopf nav a { display: block; padding: .6rem .7rem; text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: var(--r); }
.kopf nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--hell); }
@media (hover: hover) { .kopf nav a:hover { background: var(--kastanie-3); } }
.kopf .tel { display: none; text-decoration: none; font-weight: 700; white-space: nowrap; padding: .6rem .4rem; }
.kopf .knopf.haupt { margin-left: auto; min-height: 44px; padding: .55em .95em; font-size: 1rem; white-space: nowrap; }
.menue-knopf { width: 48px; height: 48px; border: 1px solid #6b5341; background: transparent; color: var(--hell); border-radius: var(--r); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ""; }
.menue-knopf span::before { position: absolute; top: -6px; } .menue-knopf span::after { position: absolute; top: 6px; }
.status-zeile { background: var(--kastanie-2); color: #eadfcc; font-size: .95rem; text-align: center; padding: .35rem 1rem; }
.status-zeile b { color: var(--hell); }
@media (min-width: 64rem) {
  .status { display: flex; }
  .status-zeile { display: none; }
  .kopf nav { display: block; }
  .kopf .tel { display: block; }
  .kopf .knopf.haupt { margin-left: 0; }
  .menue-knopf { display: none; }
}
@media (min-width: 64rem) and (max-width: 74rem) { .status { display: none; } }

#menue { position: fixed; inset: 0; z-index: 60; background: var(--kastanie); color: var(--hell); display: none; flex-direction: column; padding: 1rem 1.25rem 2rem; overflow-y: auto; }
#menue.offen { display: flex; }
#menue .zu { display: flex; justify-content: flex-end; }
#menue .zu button { min-height: 48px; padding: 0 1rem; background: transparent; color: inherit; border: 1px solid #6b5341; border-radius: var(--r); font: inherit; font-weight: 700; cursor: pointer; }
#menue ul { list-style: none; margin: .5rem 0 1.5rem; padding: 0; }
#menue li a { display: block; padding: .7rem 0; font-size: 1.45rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid #45311f; }
#menue p { margin: .4rem 0; }
#menue .knopf { width: 100%; }

/* Hero */
.hero { position: relative; background: var(--kastanie); color: var(--hell); overflow: hidden; }
.hero-bild { position: absolute; inset: 0; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: heranzoom 9s cubic-bezier(.2,.6,.2,1) both; }
@keyframes heranzoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,8,.10) 0%, rgba(20,13,8,0) 30%, rgba(20,13,8,.55) 58%, rgba(20,13,8,.92) 82%, #1a110b 100%); pointer-events: none; }
.hero-text { position: relative; z-index: 2; min-height: calc(100svh - var(--kopf-h) - 64px); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem 0 2.2rem; }
.hero-text .ober { font-weight: 700; font-size: 1.05rem; color: #f0e3cf; margin-bottom: .4rem; }
.hero h1 { margin-bottom: .35em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero p.unter { font-size: 1.15rem; max-width: 30em; color: #f3e8d6; }
.g-zeile { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: 1rem; text-decoration: none; }
.g-zeile .sterne { color: #f2b636; letter-spacing: 1px; }
.g-logo { width: 22px; height: 22px; flex: 0 0 auto; }
.hero-neben { display: none; }
@media (min-width: 60rem) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(calc(100svh - var(--kopf-h) - 30px), 860px); }
  .hero::after { display: none; }
  .hero-bild { position: relative; grid-column: 2; grid-row: 1; inset: auto; min-height: 640px; }
  .hero-text { grid-column: 1; grid-row: 1; min-height: 0; justify-content: center; padding: 4rem clamp(2rem, 5vw, 5rem) 4rem max(1.25rem, calc((100vw - var(--breite)) / 2)); }
  .hero-neben { display: block; position: absolute; z-index: 3; left: -9%; bottom: 7%; width: 42%; border: 6px solid var(--hell); box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: rotate(-2deg); }
  .hero-neben img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
  .hero-neben figcaption { background: var(--hell); color: var(--tinte); font-size: .85rem; padding: .35rem .5rem 0; }
}

/* Einflug */
.einflug { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.einflug.da { opacity: 1; transform: none; }
.einflug.spaet { transition-delay: .15s; } .einflug.spaeter { transition-delay: .3s; }
.ohne-js .einflug { opacity: 1; transform: none; }

/* Google-Bewertungen */
.stimmen { background: var(--hell); border-bottom: 1px solid var(--linie); padding: 2.2rem 0 2.4rem; }
.stimmen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1.2rem; }
.stimmen-kopf h2 { font-size: clamp(1.45rem, 4vw, 2rem); margin: 0; }
.g-note { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.g-note .zahl { font-size: 2rem; font-weight: 800; line-height: 1; }
.g-note .sterne { color: #e3a21a; font-size: 1.15rem; letter-spacing: 1px; }
.g-note small { display: block; font-size: .95rem; color: var(--tinte-2); }
.spur { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .2rem 0 .5rem; overscroll-behavior-x: contain; }
.spur::-webkit-scrollbar { display: none; }
.stimme { flex: 0 0 min(84%, 23rem); scroll-snap-align: start; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r); padding: 1.15rem 1.2rem 1rem; display: flex; flex-direction: column; margin: 0; }
.stimme .oben { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.stimme .sterne { color: #e3a21a; letter-spacing: 1px; }
.stimme blockquote { margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.5; }
.stimme figcaption { margin-top: auto; font-weight: 700; font-size: .98rem; }
.spur-knoepfe { display: flex; gap: .5rem; margin-top: .9rem; }
.spur-knoepfe button { min-width: 48px; min-height: 48px; padding: 0 1rem; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); border-radius: var(--r); font: inherit; font-weight: 700; cursor: pointer; }
.spur-knoepfe button:active { transform: scale(.97); }
.ohne-js .spur-knoepfe { display: none; }
@media (min-width: 48rem) { .stimme { flex-basis: calc((100% - 2rem) / 3); } }

/* Verteiler */
.verteiler-raster { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.kachel { position: relative; display: block; min-height: 260px; overflow: hidden; border-radius: var(--r); color: #fff; text-decoration: none; background: var(--kastanie); }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,8,0) 35%, rgba(20,13,8,.85) 100%); }
.kachel span { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1rem; }
.kachel b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.kachel small { display: block; font-size: 1rem; color: #f1e5d2; margin-top: .25rem; }
@media (hover: hover) { .kachel:hover img { transform: scale(1.04); } }
.kachel:active { transform: scale(.99); }
.schnell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.schnell a { display: flex; align-items: center; min-height: 56px; padding: .7rem .9rem; border: 1px solid var(--linie); background: var(--hell); border-radius: var(--r); text-decoration: none; font-weight: 700; line-height: 1.2; }
.schnell a:active { transform: scale(.98); }
@media (hover: hover) { .schnell a:hover { border-color: var(--tinte-2); } }
@media (min-width: 48rem) {
  .verteiler-raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
  .verteiler-raster .kachel:first-child { grid-row: span 2; min-height: 560px; }
  .verteiler-raster .kachel b { font-size: 2rem; }
  .schnell { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Stammtisch-Tafel (Signature) */
.tafel-abschnitt { background: var(--kastanie-2); color: var(--hell); }
.tafel-raster { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .tafel-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: center; } }
.tafel {
  position: relative; background: var(--tafel); color: var(--kreide);
  border: 14px solid var(--holz); border-radius: 3px;
  box-shadow: inset 0 0 0 2px #4f3520, inset 0 0 60px rgba(0,0,0,.45), 0 22px 40px rgba(0,0,0,.35);
  padding: 1.4rem 1.2rem 1.5rem;
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(255,255,255,.04), transparent 50%);
}
.tafel::before { content: ""; position: absolute; left: 50%; top: -14px; width: 44%; height: 14px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, transparent 3px 11px); pointer-events: none; }
.tafel h3 { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; letter-spacing: .01em; margin-bottom: .2rem; color: #fff; }
.tafel .datum { color: var(--kreide-2); font-size: 1rem; margin-bottom: 1rem; }
.tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.tage button { width: 100%; min-height: 48px; border: 1px solid rgba(239,235,225,.35); background: transparent; color: var(--kreide); border-radius: var(--r); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0; }
.tage button[aria-selected="true"] { background: var(--kreide); color: var(--tafel); border-color: var(--kreide); }
.tage button:disabled { opacity: .45; cursor: default; text-decoration: line-through; }
.tage button:active { transform: scale(.96); }
.tafel-tag { display: none; }
.tafel-tag.an, .ohne-js .tafel-tag { display: block; }
.ohne-js .tafel-tag { margin-bottom: 1rem; }
.tafel-tag h4 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--kreide-2); font-weight: 600; }
.tafel ul.runden { list-style: none; margin: 0; padding: 0; }
.tafel ul.runden li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .55rem 0; border-bottom: 1px dashed rgba(239,235,225,.28); font-size: 1.15rem; }
.tafel ul.runden li:last-child { border-bottom: 0; }
.tafel ul.runden b { font-weight: 700; }
.tafel ul.runden span { color: var(--kreide-2); font-size: 1rem; }
.tafel .leer { color: var(--kreide-2); }
.ohne-js .tage { display: none; }
.spruch { margin-top: 1.6rem; border-top: 1px solid rgba(239,235,225,.25); padding-top: 1.1rem; }
.spruch q { display: block; quotes: none; font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: #fff; }
.spruch .hochdeutsch { color: var(--kreide-2); margin: .5rem 0 0; }
.spruch button { margin-top: .7rem; min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(239,235,225,.4); background: transparent; color: var(--kreide); font: inherit; font-size: 1rem; font-weight: 600; border-radius: var(--r); cursor: pointer; }
.tafel-text p { color: #eadfcc; }

/* Angebot / Karte */
.karte-raster { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .karte-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.empfehlung { position: relative; overflow: hidden; border-radius: var(--r); background: var(--kastanie); color: var(--hell); }
.empfehlung img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.empfehlung figcaption { padding: 1.2rem 1.25rem 1.3rem; }
.empfehlung h3 { font-size: 1.7rem; margin-bottom: .2rem; }
.empfehlung .preis { font-weight: 800; font-size: 1.4rem; }
.gerichte { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.gericht { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.gericht b { font-size: 1.2rem; font-weight: 700; }
.gericht .preis { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: start; }
.gericht small { grid-column: 1 / -1; color: var(--tinte-2); font-size: 1rem; }
.zeichen { display: inline-block; font-size: .78rem; font-weight: 700; padding: .05rem .35rem; margin-left: .35rem; border: 1px solid currentColor; border-radius: var(--r); vertical-align: .2em; color: var(--tinte-2); white-space: nowrap; }
.zeichen.loewe { color: #6a4b18; }
.zeichen.veg { color: #3f5a2a; }
.dunkel .zeichen { color: #e6d8c3; }
.nachtisch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 1.5rem 0 0; }
.nachtisch figure { margin: 0; }
.nachtisch img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--r); }
.nachtisch figcaption { font-weight: 700; margin-top: .4rem; line-height: 1.3; }
.nachtisch figcaption span { display: block; font-weight: 400; color: var(--tinte-2); }

/* Instagram */
.ig-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.ig-kopf h2 { margin: 0; }
.ig-spur { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(1.25rem, calc((100vw - var(--breite)) / 2)) .8rem; scrollbar-width: thin; }
.post { flex: 0 0 min(76%, 20rem); scroll-snap-align: center; margin: 0; background: var(--hell); color: var(--tinte); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.post img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.post figcaption { padding: .85rem 1rem 1rem; font-size: 1rem; line-height: 1.45; }
.post figcaption b { display: block; font-size: .9rem; color: var(--tinte-2); margin-bottom: .2rem; }
.ig-knopf { display: inline-flex; align-items: center; gap: .55rem; }
.ig-knopf svg { width: 22px; height: 22px; }

/* Galerie */
.galerie { columns: 2; column-gap: .6rem; }
.galerie a { display: block; margin: 0 0 .6rem; break-inside: avoid; border-radius: var(--r); overflow: hidden; }
.galerie img { width: 100%; transition: transform .5s ease; }
@media (hover: hover) { .galerie a:hover img { transform: scale(1.03); } }
@media (min-width: 48rem) { .galerie { columns: 3; column-gap: .9rem; } .galerie a { margin-bottom: .9rem; } }
@media (min-width: 75rem) { .galerie.voll { columns: 4; } }
.gross { position: fixed; inset: 0; z-index: 80; background: rgba(15,10,6,.94); display: none; align-items: center; justify-content: center; }
.gross.offen { display: flex; }
.gross img { max-width: min(94vw, 1400px); max-height: 82svh; width: auto; height: auto; object-fit: contain; }
.gross button { position: absolute; min-width: 52px; min-height: 52px; border: 1px solid rgba(255,255,255,.35); background: rgba(20,13,8,.7); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; border-radius: var(--r); cursor: pointer; padding: 0 1rem; }
.gross .zu { top: 14px; right: 14px; }
.gross .zurueck { left: 10px; top: 50%; transform: translateY(-50%); }
.gross .vor { right: 10px; top: 50%; transform: translateY(-50%); }
.gross p { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #eadfcc; font-size: .95rem; margin: 0; padding: 0 1rem; }

/* Anfrage in Schritten */
.anfrage-raster { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .anfrage-raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: start; } }
.anfrage-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.anfrage { background: var(--hell); color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--r); padding: 1.3rem 1.15rem 1.4rem; }
.dunkel .anfrage { border-color: transparent; }
.anfrage h3 { font-size: 1.5rem; margin-bottom: .25rem; }
.anfrage fieldset { border: 0; margin: 0 0 1.2rem; padding: 0; min-width: 0; }
.anfrage legend { font-weight: 800; font-size: 1.3rem; margin-bottom: .7rem; padding: 0; line-height: 1.2; }
.wahl { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl.liste { grid-template-columns: minmax(0, 1fr); }
.wahl label { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: .55rem .7rem; border: 1px solid var(--linie); background: var(--papier); border-radius: var(--r); cursor: pointer; font-weight: 700; line-height: 1.2; text-align: center; }
.wahl.liste label { text-align: left; }
.wahl label small { font-weight: 400; font-size: .92rem; color: var(--tinte-2); margin-top: .15rem; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:has(input:checked) { background: var(--kastanie); color: var(--hell); border-color: var(--kastanie); }
.wahl label:has(input:checked) small { color: #e6d8c3; }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--rot); outline-offset: 2px; }
.wahl label:has(input:disabled) { opacity: .45; cursor: default; text-decoration: line-through; }
.wahl label:active { transform: scale(.98); }
.gruppe-titel { font-weight: 700; font-size: 1rem; color: var(--tinte-2); margin: .6rem 0 .4rem; }
.feld { margin-bottom: .9rem; }
.feld label { display: block; font-weight: 700; margin-bottom: .3rem; }
.feld input, .feld textarea { width: 100%; font: inherit; font-size: 1.0625rem; padding: .75rem .8rem; min-height: 50px; border: 1px solid #b9a383; border-radius: var(--r); background: #fff; color: var(--tinte); }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--rot); outline-offset: 1px; }
.feld .fehler { color: var(--rot); font-weight: 700; font-size: .95rem; margin-top: .3rem; display: none; }
.feld.falsch .fehler { display: block; }
.feld.falsch input { border-color: var(--rot); }
.hinweis-tel { background: var(--papier-2); border-radius: var(--r); padding: .7rem .85rem; font-size: 1rem; margin: .8rem 0 0; }
.verlauf { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.verlauf button { min-height: 40px; padding: .3rem .7rem; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); border-radius: var(--r); font: inherit; font-size: .95rem; cursor: pointer; }
.verlauf button b { font-weight: 700; }
.fortschritt { height: 4px; background: var(--papier-2); margin: .3rem 0 1.1rem; border-radius: 2px; overflow: hidden; }
.fortschritt span { display: block; height: 100%; width: 0; background: var(--rot); transition: width .35s ease; }
.ohne-js .fortschritt, .ohne-js .verlauf { display: none; }
.schritt[hidden] { display: none; }
.zurueck-link { min-height: 44px; padding: 0 .4rem; border: 0; background: transparent; color: var(--tinte-2); font: inherit; font-size: 1rem; text-decoration: underline; cursor: pointer; }
.zusage { font-weight: 700; margin: .7rem 0 0; }
.absenden { width: 100%; }
.tage-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.tage-raster .wt { text-align: center; font-size: .85rem; font-weight: 700; color: var(--tinte-2); padding-bottom: .1rem; }
.tage-raster label { min-height: 50px; padding: .2rem; font-size: 1rem; }
.tage-raster label small { font-size: .72rem; margin: 0; }
.monat { font-weight: 700; margin: .4rem 0 .4rem; }
.ohne-js .tage-raster { display: none; }
.datum-feld { display: none; }
.ohne-js .datum-feld { display: block; }
.danke h3 { font-size: 1.8rem; }
.danke ol { padding-left: 1.3rem; margin: .5rem 0 1rem; }
.danke li { margin-bottom: .35rem; }
.entwurf-hinweis { font-size: .95rem; color: var(--tinte-2); border-top: 1px solid var(--linie); padding-top: .7rem; }

/* Räume */
.raeume { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.raum { margin: 0; background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; transition: opacity .3s ease, border-color .3s ease; }
.raum img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.raum figcaption { padding: .9rem 1rem 1rem; }
.raum h3 { margin-bottom: .2rem; }
.raum .plaetze { font-weight: 700; color: var(--rot); }
.raum.zu-klein { opacity: .45; }
.raum.passt { border-color: var(--kastanie); box-shadow: inset 0 0 0 2px var(--kastanie); }
@media (min-width: 48rem) { .raeume { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.raumfinder { background: var(--kastanie); color: var(--hell); border-radius: var(--r); padding: 1.2rem 1.2rem 1.3rem; margin-bottom: 1.4rem; }
.raumfinder label { display: block; font-weight: 800; font-size: 1.3rem; margin-bottom: .6rem; }
.raumfinder input[type=range] { width: 100%; height: 44px; accent-color: #e9dcc6; }
.raumfinder output { font-weight: 800; font-size: 2rem; }
.raumfinder p { margin: .3rem 0 0; color: #eadfcc; }

/* Zwei Spalten mit Bild */
.zweispalt { display: grid; gap: 1.6rem; align-items: center; }
.zweispalt img { width: 100%; border-radius: var(--r); object-fit: cover; }
@media (min-width: 60rem) { .zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } .zweispalt.dreh > :first-child { order: 2; } }
.fotoreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1.2rem; }
.fotoreihe img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }

/* Fragen */
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 1rem 2.4rem 1rem 0; font-weight: 700; font-size: 1.15rem; position: relative; min-height: 48px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: .3rem; top: .8rem; font-size: 1.6rem; font-weight: 400; line-height: 1; }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { margin: 0 0 1.1rem; max-width: 42em; }
.zahlung { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.zahlung span { border: 1px solid var(--linie); background: var(--hell); padding: .45rem .75rem; border-radius: var(--r); font-weight: 700; font-size: 1rem; }

/* Lage */
.lage-raster { display: grid; gap: 1.2rem; }
@media (min-width: 60rem) { .lage-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: stretch; } }
.lage-karte { background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.lage-karte svg { width: 100%; height: auto; flex: 1 1 auto; }
.zeiten { background: var(--kastanie); color: var(--hell); border-radius: var(--r); padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; }
.zeiten h3 { margin-bottom: .8rem; }
.zeiten table { width: 100%; border-collapse: collapse; font-size: 1.08rem; }
.zeiten td { padding: .45rem 0; border-bottom: 1px solid #4c3828; }
.zeiten td:last-child { text-align: right; white-space: nowrap; }
.zeiten tr.heute td { font-weight: 800; color: #fff; }
.zeiten p { margin: .9rem 0 0; color: #eadfcc; font-size: 1rem; }
.zeiten .knopf { margin-top: auto; }
.zeiten .knopf-zeile { margin-top: 1.2rem; }
.wege { display: grid; gap: 1rem; margin-top: 1.2rem; }
.wege div { background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem 1.1rem; }
.wege h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.wege p { margin: 0; font-size: 1.02rem; }
@media (min-width: 48rem) { .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Termine (pflegbar) */
.termine { display: grid; gap: 1rem; }
.termin { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.termin img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.termin > div { padding: 1.1rem 1.15rem 1.2rem; }
.termin .wann { font-weight: 700; color: var(--rot); margin-bottom: .2rem; }
.termin h3 { margin-bottom: .35rem; }
[data-sw-off] { display: none !important; }
@media (min-width: 48rem) { .termin { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .termin img { height: 100%; aspect-ratio: auto; min-height: 260px; } }

/* Spenden */
.spenden { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spenden figure { margin: 0; }
.spenden img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.spenden figcaption { font-size: 1rem; margin-top: .4rem; line-height: 1.4; }
@media (min-width: 60rem) { .spenden { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.5rem; margin: 1.6rem 0 0; }
.zahlen div { border-top: 2px solid currentColor; padding-top: .5rem; }
.zahlen b { display: block; font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; line-height: 1; }
.zahlen span { font-size: 1rem; }
@media (min-width: 60rem) { .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Unterseiten-Kopf */
.seitenkopf { position: relative; background: var(--kastanie); color: var(--hell); overflow: hidden; }
.seitenkopf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seitenkopf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,8,.15) 0%, rgba(20,13,8,.55) 55%, rgba(20,13,8,.9) 100%); }
.seitenkopf .huelle { position: relative; z-index: 2; min-height: clamp(360px, 58svh, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 2.2rem; }
.seitenkopf p { font-size: 1.15rem; max-width: 34em; color: #f1e5d2; }
.sprung { position: sticky; top: var(--kopf-h); z-index: 30; background: var(--papier); border-bottom: 1px solid var(--linie); }
.sprung ul { display: flex; gap: .4rem; overflow-x: auto; list-style: none; margin: 0; padding: .55rem 0; scrollbar-width: none; }
.sprung ul::-webkit-scrollbar { display: none; }
.sprung a { display: block; white-space: nowrap; padding: .5rem .85rem; min-height: 44px; border: 1px solid var(--linie); border-radius: var(--r); text-decoration: none; font-weight: 700; font-size: 1rem; background: var(--hell); }
.sprung a.an { background: var(--kastanie); color: var(--hell); border-color: var(--kastanie); }

/* Speisekarte */
.karte-teil { padding-block: 2.2rem 1rem; }
.karte-teil h2 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); border-bottom: 2px solid var(--tinte); padding-bottom: .35rem; margin-bottom: .2rem; }
.karte-spalten { display: grid; gap: 0 3rem; }
@media (min-width: 60rem) { .karte-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gericht .varianten { grid-column: 1 / -1; list-style: none; margin: .3rem 0 0; padding: 0; }
.gericht .varianten li { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; color: var(--tinte-2); padding: .15rem 0; }
.gericht .varianten li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gericht.tipp { background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r); padding: .85rem .9rem; margin: .5rem 0; }
.legende { font-size: 1rem; color: var(--tinte-2); }
.mit-bild { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.mit-bild img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); grid-row: span 2; }

/* Fuß */
.fuss { background: #1a110b; color: #eadfcc; padding: 0 0 2rem; }
.fuss-szene { color: #8a6c4f; width: 100%; height: auto; min-height: 130px; display: block; }
.fuss-raster { display: grid; gap: 2rem; padding-top: 2rem; }
.fuss-raster img { width: 170px; height: auto; }
.fuss h3 { font-size: 1.1rem; color: #fff; margin-bottom: .5rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-block; padding: .35rem 0; text-decoration: none; }
@media (hover: hover) { .fuss li a:hover { text-decoration: underline; } }
.fuss p { font-size: 1rem; }
.sozial { display: flex; gap: .5rem; margin-top: .8rem; }
.sozial a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #5a4636; border-radius: var(--r); }
.sozial svg { width: 22px; height: 22px; }
.fuss-unten { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; border-top: 1px solid #3b2a1e; margin-top: 2rem; padding-top: 1.1rem; font-size: .95rem; }
.fuss-unten a { text-decoration: none; padding: .3rem 0; }
@media (min-width: 60rem) { .fuss-raster { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); } }

/* Text-Seiten */
.textseite { max-width: 46rem; }
.textseite h2 { font-size: 1.7rem; margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .einflug { opacity: 1; transform: none; }
}
html[data-leistung="sparsam"] .hero-bild img { animation: none; }

.termin.vorbei img { filter: grayscale(.6); opacity: .8; }
.termin.vorbei .wann { color: var(--tinte-2); }

/* ===== Endkontrolle 15.11.2026: Symmetrie, bündige Spalten, Umbrüche ===== */
.nb { white-space: nowrap; }
/* Knopfpaare am Handy gleich breit: passen beide nicht nebeneinander, füllt jeder die ganze Zeile */
@media (max-width: 47.99rem) {
  .knopf-zeile > .knopf { flex: 1 1 0; min-width: max-content; }
}
/* Unterseiten-Kopf: Überschrift am Handy kleiner und auf hellen Fotos lesbar */
.seitenkopf h1 { text-shadow: 0 2px 18px rgba(0,0,0,.4); }
@media (max-width: 47.99rem) {
  .seitenkopf h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .seitenkopf::after { background: linear-gradient(180deg, rgba(20,13,8,.3) 0%, rgba(20,13,8,.62) 38%, rgba(20,13,8,.92) 100%); }
}
/* Kein doppelter Abstand zwischen zwei Abschnitten mit gleichem Hintergrund */
.abschnitt:not(.dunkel):not(.hell2):not(.tafel-abschnitt) + .abschnitt:not(.dunkel):not(.hell2):not(.tafel-abschnitt) { padding-top: 0; }
#tisch-karte { padding-top: 1.5rem; }
/* Galerie als Raster: alle Spalten enden bündig */
.galerie { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.2rem; }
.galerie a { margin: 0; }
.galerie img { aspect-ratio: 1; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .galerie a { margin: 0; }
  /* 44 Bilder in drei Spalten: das erste doppelt breit, damit keine Reihe halb leer bleibt */
  .galerie.voll a:first-child { grid-column: span 2; }
  .galerie.voll a:first-child img { aspect-ratio: auto; }
}
@media (min-width: 64rem) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galerie.voll a:first-child { grid-column: auto; }
  .galerie.voll a:first-child img { aspect-ratio: 1; }
}
/* Startseite Karte: Empfehlung reicht so weit wie die Gerichte daneben */
@media (min-width: 60rem) {
  .karte-raster { align-items: stretch; }
  .empfehlung { display: flex; flex-direction: column; }
  .empfehlung img { flex: 1 1 0; min-height: 420px; height: auto; aspect-ratio: auto; }
}
/* Speisekarte am PC: Abschnitte laufen in zwei ausgeglichenen Spalten statt in Zeilen mit Lücken */
@media (min-width: 60rem) {
  .karte-spalten { display: block; columns: 2; column-gap: 3rem; }
  .karte-teil { break-inside: avoid; }
}
@media (min-width: 64rem) { .sprung a { padding-inline: .75rem; } }
/* Öffnungszeiten: Knöpfe unten bündig mit der Karte daneben */
.zeiten .knopf-zeile { margin-top: auto; padding-top: 1.2rem; }
.zeiten .knopf { margin-top: 0; }
/* Fuß: Logo mit Luft, untere Zeile sauber ausgerichtet */
.fuss-raster img { margin-bottom: 1rem; }
.fuss-unten { align-items: center; }
.fuss-unten span { padding: .3rem 0; }
@media (max-width: 47.99rem) { .fuss-unten span { flex-basis: 100%; } }
.zahlen span { display: block; line-height: 1.35; margin-top: .2rem; }
@media (min-width: 64rem) { .galerie:not(.voll):has(> a:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }