/* ═════════════════════════════════════════════════════════════════════════
   Restaurant Kastanie — Entwurf 2 · „Mittagstisch"
   ─────────────────────────────────────────────────────────────────────────
   Die Haltung
   Entwurf 1 ist das Abendlokal: dunkel, still, Kerzenlicht. Dieser Entwurf
   ist dasselbe Haus um halb eins. Hell, laut, jemand raeumt Teller ab. Das
   Versprechen lautet nicht „ein besonderer Abend", sondern „du bist in
   vierzig Minuten satt und wieder draussen".

   Deshalb ist hier alles rund. Runde Karten, runde Knoepfe, runde Bilder.
   Runde Formen wirken zugewandt und alltagstauglich; scharfe Kanten wirken
   teuer. Der Grund ist eine warme Creme, kein Weiss — Weiss waere Kantine.
   Die Karten darauf sind weiss und werfen einen weichen Schatten, damit man
   sie einzeln greifen kann.

   Wo dieser Entwurf sich von 1 und 3 unterscheidet — Abschnitt fuer Abschnitt
   ─────────────────────────────────────────────────────────────────────────
   · Buehne — hier ein breites Bildband ganz oben und darunter eine weisse
     Karte, die ins Bild hineinragt. Der Text steht also auf Weiss, nicht auf
     dem Foto. Entwurf 1 legt den Text ins Vollbild, Entwurf 3 stellt ihn
     mittig und laesst das Bild ganz weg.
   · Direkt darunter — das Tagesgericht als eigene, grosse Karte. Es ist das
     erste, was ein Mittagsgast wissen will. Entwurf 1 hat an dieser Stelle
     eine schmale Faktenzeile, Entwurf 3 einen einzelnen Satz.
   · Speisekarte — vier runde Karten nebeneinander, je Gruppe eine. Entwurf 1
     baut eine echte zweispaltige Speisekarte mit Punktfuehrung, Entwurf 3
     eine einzige ruhige Liste untereinander.
   · Galerie — eine Wischleiste: die Bilder liegen in einer Reihe und rasten
     beim Wischen ein. Entwurf 1 hat ein Mosaik aus acht Bildern, Entwurf 3
     vier grosse Zutatenfotos im Quadrat.
   · Fragen — offene Karten im Gitter, alles sofort lesbar. Entwurf 1 klappt
     auf, Entwurf 3 stellt die Fragen mittig untereinander.
   · Kontaktteil — Formular und Zeiten in einer einzigen breiten Karte.
     Entwurf 1 teilt die Flaeche in zwei Haelften, Entwurf 3 setzt beides
     mittig untereinander.
   · Kantenradius — 22px, Knoepfe voll rund. Entwurf 1 hat 0px, Entwurf 3
     hat 4px.
   · Schriftpaarung — Rubik (kraeftig, geometrisch, freundlich) ueber Karla
     (schmal, gut lesbar). Beides serifenlos. Entwurf 1 setzt eine Serife
     ueber eine Grotesk, Entwurf 3 eine ruhige Lesesserife ueber Inter.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── Marken-Kontrakt ───────────────────────────────────────────────────────
   Alle Farben dieses Entwurfs stehen hier. Wer die Marke wechselt, aendert
   nur diesen Block. Die Kontrastwerte dahinter sind gerechnet, nicht
   geschaetzt — WCAG verlangt fuer Fliesstext 4,5:1, fuer Bedienelemente 3:1. */
:root{
  --creme:   #FBF6EF;   /* Seitengrund — warmes Papier, kein Weiss          */
  --weiss:   #FFFFFF;   /* Karten                                          */
  --sand:    #F2E7D8;   /* abgesetzte Baender und Felder                    */
  --tief:    #2E2721;   /* Fuss                                            */

  --tinte:   #221D18;   /* Ueberschriften  (auf Creme 15,5:1 · Weiss 16,7:1) */
  --text:    #4A423A;   /* Fliesstext      (auf Creme  9,2:1 · Weiss  9,9:1) */
  --leise:   #6E6459;   /* Meta, Legenden  (auf Creme  5,4:1 · Sand   4,7:1) */

  --ton:     #B03A18;   /* Terrakotta — der eine Akzent                     */
  --ton-tief:#8E2E12;   /* gedrueckt und ueberfahren                        */
  --ton-hell:#E9A084;   /* nur im dunklen Fuss  (auf Tief 6,9:1)            */
  --auf-ton: #FFFFFF;   /* Schrift auf Terrakotta            (6,1:1)        */
  --ton-hauch:#FBEDE7;  /* ganz blasse Tonflaeche fuer Merker               */

  --fuss-text:#FBF6EF;  /* auf Tief 13,7:1                                  */
  --fuss-leise:#BDB2A4; /* auf Tief  7,1:1                                  */

  --linie:   #E6DCCD;   /* ruhige Trennlinie auf Creme                      */
  --rand:    #8C8172;   /* Umriss bedienbarer Elemente     (auf Creme 3,6:1) */

  --display:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1180px;
  --luft:clamp(18px, 4vw, 34px);
  --bogen:22px;         /* der Radius dieses Entwurfs: rund                 */
  --bogen-klein:14px;
  --schatten:0 2px 4px rgba(46,39,33,.05), 0 10px 26px rgba(46,39,33,.07);
  --schatten-hoch:0 4px 8px rgba(46,39,33,.07), 0 18px 44px rgba(46,39,33,.11);
  --tempo:.42s cubic-bezier(.25,.7,.35,1);
}


/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  /* „clip" statt „hidden": schneidet den Ueberhang ab, ohne einen neuen
     Scroll-Kontext zu erzeugen — sonst haengt position:sticky im Kopf. */
  overflow-x:clip;
  background:var(--creme);
  color:var(--text);
  font-family:var(--schrift);
  font-size:clamp(1rem, .97rem + .17vw, 1.09rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--tinte);
  line-height:1.16;
  margin:0;
  font-weight:600;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.15rem, 1.4rem + 3.2vw, 3.5rem); font-weight:700}
h2{font-size:clamp(1.75rem, 1.25rem + 2vw, 2.6rem); font-weight:700}
h3{font-size:clamp(1.15rem, 1.05rem + .5vw, 1.4rem)}
p{margin:0}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* Der Fokusring ist bewusst dick und hat einen Abstand — er muss auch auf
   einem Foto und auf einer Terrakotta-Flaeche zu sehen sein. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ton);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{
  width:min(var(--spalte), 100% - 2*var(--luft));
  margin-inline:auto;
}

/* Nur fuer Vorleseprogramme — nicht display:none, sonst wird es nicht
   vorgelesen. */
.nur-vorleser{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
a.nur-vorleser:focus{
  position:fixed; top:12px; left:12px; z-index:120;
  width:auto; height:auto; margin:0; padding:12px 20px;
  clip-path:none; white-space:normal;
  background:var(--ton); color:var(--auf-ton);
  border-radius:999px; font-weight:700;
}

.rubrik{
  display:inline-block;
  font-family:var(--display);
  font-size:.78rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ton);
}

.lead{
  font-size:clamp(1.06rem, 1rem + .35vw, 1.22rem);
  line-height:1.62;
  color:var(--text);
}


/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{
  background:var(--tief); color:var(--fuss-text);
  font-size:.86rem; padding:9px 0;
}
.entwurf-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
}
.entwurf-band b{font-family:var(--display); font-weight:600}
.entwurf-band span{color:var(--fuss-leise)}
.entwurf-band a{margin-left:auto; color:var(--ton-hell); font-weight:700}


/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border-radius:999px;               /* voll rund — das Erkennungsmerkmal   */
  border:2px solid var(--ton);
  background:var(--ton); color:var(--auf-ton);
  font-family:var(--display);
  font-size:.97rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:background var(--tempo), border-color var(--tempo),
             transform var(--tempo), box-shadow var(--tempo);
}
.knopf:hover{
  background:var(--ton-tief); border-color:var(--ton-tief);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(176,58,24,.24);
}
.knopf:active{transform:translateY(0)}
.knopf svg{width:19px; height:19px; fill:currentColor; flex:none}

.knopf-leer{
  background:transparent; color:var(--ton); border-color:var(--rand);
}
.knopf-leer:hover{
  background:var(--ton-hauch); color:var(--ton-tief);
  border-color:var(--ton); box-shadow:none;
}

.knopf-klein{padding:10px 18px; font-size:.9rem}


/* ── Kopf ────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:60;
  background:rgba(251,246,239,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--tempo), border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{
  border-bottom-color:var(--linie);
  box-shadow:0 6px 22px rgba(46,39,33,.06);
}
/* Wichtig: static, damit das aufgeklappte Handy-Menue am Kopf haengt und
   nicht an der Breite von .wrap. */
.kopf .wrap{
  position:static;
  display:flex; align-items:center; gap:clamp(14px, 2.4vw, 30px);
  min-height:74px;
}

.marke{
  font-family:var(--display);
  font-size:1.42rem; font-weight:700; letter-spacing:-.02em;
  color:var(--tinte); text-decoration:none; line-height:1.1;
  margin-right:auto;
}
.marke small{
  display:block;
  font-family:var(--schrift);
  font-size:.7rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--leise); margin-top:3px;
}

.menue{display:flex; gap:clamp(12px, 1.8vw, 26px)}
.menue a{
  font-family:var(--display);
  font-size:.95rem; font-weight:500;
  color:var(--text); text-decoration:none;
  padding:8px 4px; border-radius:8px;
  position:relative;
  transition:color var(--tempo);
}
.menue a::after{
  content:""; position:absolute; left:4px; right:4px; bottom:2px;
  height:2px; border-radius:2px; background:var(--ton);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--tempo);
}
.menue a:hover{color:var(--ton)}
.menue a:hover::after{transform:scaleX(1)}

.burger{
  display:none;
  width:46px; height:46px; padding:0;
  border:1px solid var(--rand); border-radius:999px;
  background:var(--weiss); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger i{
  display:block; width:19px; height:2px; border-radius:2px;
  background:var(--tinte);
  transition:transform var(--tempo), opacity var(--tempo);
}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ── Buehne: Bildband oben, Karte ragt hinein ────────────────────────────── */
.buehne{padding-bottom:clamp(30px, 4vw, 56px)}

.buehne-band{
  position:relative;
  height:clamp(240px, 34vw, 420px);
  overflow:hidden;
}
.buehne-band img{width:100%; height:100%; object-fit:cover}
/* Ein sanfter Verlauf nach unten, damit die weisse Karte nicht hart auf dem
   Foto sitzt. Reine Deko — auf dem Bild steht kein Text. */
.buehne-band::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to bottom, rgba(251,246,239,0), rgba(251,246,239,.55));
}

.buehne-karte{
  background:var(--weiss);
  border-radius:var(--bogen);
  box-shadow:var(--schatten-hoch);
  padding:clamp(28px, 4.4vw, 56px);
  margin-top:clamp(-92px, -8vw, -44px);   /* ragt ins Bild hinein           */
  position:relative; z-index:2;
  text-align:center;
}
.buehne-karte h1{margin-top:12px; max-width:19ch; margin-inline:auto}
.buehne-karte h1 em{font-style:normal; color:var(--ton)}
.buehne-karte .lead{margin-top:16px; max-width:56ch; margin-inline:auto}

.buehne-tun{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:26px;
}

/* Drei kurze Fakten unter der Karte — kein Versprechen, nur Auskunft. */
.buehne-fakten{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 12px; margin-top:24px;
}
.buehne-fakten li{
  list-style:none;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sand); color:var(--text);
  border-radius:999px; padding:8px 17px;
  font-size:.9rem;
}
.buehne-fakten svg{width:17px; height:17px; fill:var(--ton); flex:none}


/* ── Abschnitte allgemein ────────────────────────────────────────────────── */
section[id]{padding:clamp(52px, 6.5vw, 96px) 0; scroll-margin-top:92px}
.band-sand{background:var(--sand)}

.kopfzeile{max-width:60ch; margin-bottom:clamp(28px, 3.6vw, 46px)}
.kopfzeile h2{margin-top:11px}
.kopfzeile p{margin-top:14px}
.kopfzeile--mitte{margin-inline:auto; text-align:center}


/* ── Tagesgericht: die groesste Karte der Seite ──────────────────────────── */
.tagesgericht{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1fr);
  gap:clamp(22px, 3vw, 44px);
  align-items:center;
  background:var(--weiss);
  border-radius:var(--bogen);
  box-shadow:var(--schatten);
  overflow:hidden;
}
.tagesgericht-bild{position:relative; align-self:stretch; min-height:240px}
.tagesgericht-bild img{width:100%; height:100%; object-fit:cover}
.tagesgericht-text{padding:clamp(24px, 3.4vw, 46px); padding-left:0}

.merker{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ton-hauch); color:var(--ton-tief);
  border-radius:999px; padding:7px 16px;
  font-family:var(--display); font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.tagesgericht h2{margin-top:14px; font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)}
.tagesgericht p{margin-top:13px}
.tagesgericht .preiszeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--linie);
}
.tagesgericht .preis{
  font-family:var(--display); font-size:1.3rem; font-weight:700;
  color:var(--ton);
}
.tagesgericht .stoffe{font-size:.88rem; color:var(--leise)}


/* ── Speisekarte: vier runde Karten ──────────────────────────────────────── */
.gruppen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:clamp(18px, 2.4vw, 30px);
  align-items:start;
}
.gruppe{
  background:var(--weiss);
  border-radius:var(--bogen);
  box-shadow:var(--schatten);
  padding:clamp(22px, 2.6vw, 32px);
  transition:transform var(--tempo), box-shadow var(--tempo);
}
.gruppe:hover{transform:translateY(-4px); box-shadow:var(--schatten-hoch)}

.gruppe-kopf{display:flex; align-items:center; gap:13px; margin-bottom:6px}
.gruppe-zahl{
  flex:none;
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--ton-hauch); color:var(--ton-tief);
  font-family:var(--display); font-weight:700; font-size:1.02rem;
}
.gruppe h3{margin:0}

.gerichte{list-style:none; margin:18px 0 0; padding:0}
.gerichte li{padding:14px 0; border-top:1px solid var(--linie)}
.gerichte li:first-child{border-top:0; padding-top:4px}

.gericht-zeile{
  display:flex; align-items:baseline; gap:12px;
  /* wrap, damit ein langer Gerichtname den Preis auf 375px nicht
     hinausdrueckt */
  flex-wrap:wrap;
}
.gericht-zeile b{
  font-family:var(--display); font-weight:600; color:var(--tinte);
  font-size:1.02rem; flex:1 1 auto; min-width:0;
}
.gericht-zeile .preis{
  flex:none;
  background:var(--sand); color:var(--tinte);
  border-radius:999px; padding:3px 13px;
  font-family:var(--display); font-size:.88rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.gericht-zeile em{
  flex-basis:100%;
  font-style:normal; font-size:.84rem; color:var(--leise);
  letter-spacing:.03em;
}
.gerichte small{display:block; margin-top:5px; font-size:.92rem; color:var(--leise)}

/* Der Pflichtteil unter der Karte — Allergene, Zusatzstoffe, Preise. */
.karte-fuss{
  margin-top:clamp(24px, 3vw, 38px);
  background:var(--weiss);
  border-radius:var(--bogen);
  border:1px solid var(--linie);
  padding:clamp(22px, 2.8vw, 34px);
}
.karte-fuss h3{font-size:1.08rem}
.karte-fuss p{margin-top:12px; font-size:.95rem; max-width:74ch}
.karte-fuss strong{color:var(--tinte); font-weight:700}
.legende{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
.legende li{
  background:var(--sand); border-radius:999px;
  padding:5px 14px; font-size:.87rem; color:var(--text);
}
.legende b{font-family:var(--display); color:var(--ton-tief); margin-right:4px}
.pruefen{
  margin-top:18px; padding:14px 18px;
  border-radius:var(--bogen-klein);
  background:var(--ton-hauch);
  font-size:.9rem; color:var(--text);
}


/* ── Galerie: Wischleiste ────────────────────────────────────────────────── */
.wisch-hinweis{
  display:flex; align-items:center; gap:9px;
  font-size:.88rem; color:var(--leise); margin-bottom:14px;
}
.wisch-hinweis svg{width:17px; height:17px; fill:var(--ton)}

.wischen{
  display:flex; gap:clamp(12px, 1.6vw, 20px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:14px;
  /* Die Leiste liegt vollstaendig innerhalb von .wrap — kein negativer
     Rand, sonst schiebt sie auf 375px die Seite auf. */
  scrollbar-color:var(--rand) transparent;
}
.wischen figure{
  flex:0 0 clamp(230px, 30vw, 330px);
  margin:0; scroll-snap-align:start;
}
.wischen img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--bogen);
  box-shadow:var(--schatten);
}
.wischen figcaption{
  margin-top:11px; font-size:.9rem; color:var(--leise);
  padding-inline:4px;
}
.wischen::-webkit-scrollbar{height:8px}
.wischen::-webkit-scrollbar-thumb{background:var(--rand); border-radius:999px}
.wischen::-webkit-scrollbar-track{background:transparent}


/* ── Das Haus: Text links, Bild rechts ───────────────────────────────────── */
.haus{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .9fr);
  gap:clamp(26px, 4vw, 60px);
  align-items:center;
}
.haus-text h2{margin-top:11px}
.haus-text p{margin-top:15px}
.haus-bild img{
  width:100%; border-radius:var(--bogen);
  box-shadow:var(--schatten-hoch);
}
.unterschrift{
  display:flex; align-items:center; gap:13px;
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--linie);
}
.unterschrift b{font-family:var(--display); color:var(--tinte); display:block}
.unterschrift span{font-size:.9rem; color:var(--leise)}


/* ── Reservierung: eine breite Karte ─────────────────────────────────────── */
.reservieren{
  background:var(--weiss);
  border-radius:var(--bogen);
  box-shadow:var(--schatten);
  padding:clamp(24px, 3.6vw, 50px);
}
.reservieren-gitter{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1fr);
  gap:clamp(26px, 3.4vw, 48px);
  align-items:start;
  margin-top:clamp(22px, 2.8vw, 34px);
}

.zeiten{list-style:none; margin:0; padding:0}
.zeiten li{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--linie);
  font-size:.97rem;
}
.zeiten li:last-child{border-bottom:0}
.zeiten b{font-family:var(--display); font-weight:600; color:var(--tinte)}
.zeiten span{color:var(--leise); text-align:right}
.zeiten li.zu b,.zeiten li.zu span{color:var(--leise)}

.wege{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.wege a{
  display:flex; align-items:center; gap:12px;
  background:var(--sand); border-radius:999px;
  padding:11px 18px; text-decoration:none;
  color:var(--tinte); font-weight:700; font-size:.96rem;
  transition:background var(--tempo), transform var(--tempo);
}
.wege a:hover{background:var(--ton-hauch); transform:translateX(3px)}
.wege svg{width:19px; height:19px; fill:var(--ton); flex:none}

.formular{display:grid; gap:15px}
.feld{display:grid; gap:6px}
.feld label{
  font-family:var(--display); font-size:.88rem; font-weight:600;
  color:var(--tinte);
}
.feld input,.feld select,.feld textarea{
  width:100%;
  font-family:inherit; font-size:1rem; color:var(--tinte);
  background:var(--creme);
  border:1px solid var(--rand);
  border-radius:var(--bogen-klein);
  padding:12px 15px;
  transition:border-color var(--tempo), background var(--tempo);
}
.feld textarea{min-height:104px; resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--ton)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.zwei-felder{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:15px;
}
.form-hinweis{
  font-size:.87rem; color:var(--leise);
  background:var(--sand); border-radius:var(--bogen-klein);
  padding:13px 16px;
}


/* ── Fragen: offene Karten ───────────────────────────────────────────────── */
.fragen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(16px, 2.2vw, 26px);
}
.frage{
  background:var(--weiss);
  border-radius:var(--bogen);
  box-shadow:var(--schatten);
  padding:clamp(22px, 2.6vw, 30px);
}
.frage h3{font-size:1.09rem}
.frage p{margin-top:11px; font-size:.97rem}


/* ── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .95fr);
  gap:clamp(26px, 3.6vw, 52px);
  align-items:center;
}
.kontakt-bild img{
  width:100%; border-radius:var(--bogen); box-shadow:var(--schatten-hoch);
}
.kontakt-liste{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
.kontakt-liste li{display:flex; gap:14px; align-items:flex-start}
.kontakt-liste .zeichen{
  flex:none; width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--ton-hauch);
}
.kontakt-liste svg{width:20px; height:20px; fill:var(--ton)}
.kontakt-liste b{
  display:block; font-family:var(--display); font-size:.85rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--leise);
}
.kontakt-liste a,.kontakt-liste span{
  color:var(--tinte); text-decoration:none; font-size:1.04rem;
}
.kontakt-liste a:hover{color:var(--ton); text-decoration:underline}


/* ── Fuss ────────────────────────────────────────────────────────────────── */
.fuss{
  background:var(--tief); color:var(--fuss-leise);
  border-radius:var(--bogen) var(--bogen) 0 0;
  padding:clamp(46px, 5.4vw, 74px) 0 clamp(94px, 8vw, 44px);
  margin-top:clamp(40px, 5vw, 70px);
}
.fuss-gitter{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap:clamp(26px, 3.4vw, 52px);
}
.fuss .marke{color:var(--fuss-text); margin-right:0}
.fuss .marke small{color:var(--fuss-leise)}
.fuss p{margin-top:15px; font-size:.94rem; max-width:38ch}
.fuss h3{
  color:var(--fuss-text); font-size:.85rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; margin-bottom:14px;
}
.fuss ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fuss a{color:var(--fuss-leise); text-decoration:none; font-size:.94rem}
.fuss a:hover{color:var(--ton-hell); text-decoration:underline}
.fuss-unten{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px 22px;
  margin-top:clamp(34px, 4vw, 52px); padding-top:22px;
  border-top:1px solid rgba(251,246,239,.15);
  font-size:.86rem;
}


/* ── Daumenleiste (nur Handy) ────────────────────────────────────────────── */
.daumen{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,246,239,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--linie);
}
.daumen .knopf{flex:1 1 0; min-width:0; padding:13px 10px; font-size:.94rem}


/* ── Einblenden beim Scrollen ────────────────────────────────────────────── */
/* Ohne JavaScript ist alles sichtbar — die Regel greift erst, wenn das
   Skript die Klasse „js" gesetzt hat. */
html.js .zeig{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease calc(var(--i, 0) * 70ms),
             transform .6s cubic-bezier(.22,.68,.36,1) calc(var(--i, 0) * 70ms);
}
html.js .zeig[data-da="1"]{opacity:1; transform:none}


/* ── Schmalere Fenster ───────────────────────────────────────────────────── */
@media (max-width:1000px){
  .fuss-gitter{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .fuss-gitter > :first-child{grid-column:1 / -1}
}

@media (max-width:880px){
  .tagesgericht{grid-template-columns:minmax(0, 1fr)}
  .tagesgericht-bild{min-height:0; aspect-ratio:16/10}
  .tagesgericht-text{padding:clamp(22px, 4vw, 32px)}
  .reservieren-gitter,.haus,.kontakt{grid-template-columns:minmax(0, 1fr)}
  .haus-bild,.kontakt-bild{order:-1}
}

@media (max-width:820px){
  .menue{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--weiss);
    border-bottom:1px solid var(--linie);
    box-shadow:var(--schatten);
    padding:8px 0;
    display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{
    padding:14px var(--luft); border-radius:0;
    width:min(var(--spalte), 100% - 2*var(--luft));
    margin-inline:auto;
  }
  .menue a::after{display:none}
  .menue a:hover{background:var(--sand)}
  .burger{display:flex}
  .kopf .knopf{display:none}
}

@media (max-width:560px){
  .buehne-karte{margin-top:-34px; padding:24px 20px}
  .zwei-felder{grid-template-columns:minmax(0, 1fr)}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  .fuss-unten{flex-direction:column}
}

@media (max-width:520px){
  .daumen{display:flex}
  body{padding-bottom:74px}
  .wischen figure{flex-basis:min(78vw, 300px)}
}


/* ── Weniger Bewegung ────────────────────────────────────────────────────── */
/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt hier
   gar keine Animation — auch das sanfte Scrollen wird abgeschaltet. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js .zeig{opacity:1; transform:none}
  .wischen{scroll-snap-type:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Rechtsseiten — Impressum und Datenschutzerklaerung
   Bewusst schmucklos: hier zaehlt Lesbarkeit, nicht Gestaltung.
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{padding:clamp(40px, 5vw, 70px) 0 clamp(22px, 3vw, 32px)}
.rechts-kopf h1{
  margin-top:12px;
  font-size:clamp(2rem, 4vw, 2.9rem);
  hyphens:auto; overflow-wrap:break-word;
}
.rechts-kopf .lead{margin-top:15px; max-width:58ch}

.rechtstext{padding-bottom:clamp(50px, 6vw, 86px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,
.rechts-hinweis{max-width:68ch}
.rechtstext section{
  background:var(--weiss);
  border-radius:var(--bogen);
  box-shadow:var(--schatten);
  padding:clamp(22px, 2.8vw, 34px);
  margin-bottom:16px;
}
.rechtstext h2{font-size:clamp(1.25rem, 2vw, 1.6rem); margin-bottom:14px}
.rechtstext p{margin-bottom:13px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext strong{color:var(--tinte); font-weight:700}
.rechtstext em{font-style:italic}
.rechtstext ul{margin:0 0 14px; padding:0; list-style:none}
.rechtstext ul li{padding-left:22px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:999px; background:var(--ton);
}
.rechtstext dl{margin:0}
.rechtstext dt{
  font-family:var(--display); font-weight:600;
  color:var(--tinte); margin-top:15px;
}
.rechtstext dd{margin:2px 0 0}
.rechtstext address{font-style:normal; line-height:1.9}
.rechtstext a{color:var(--ton); text-underline-offset:3px}
.rechtstext a:hover{color:var(--ton-tief)}

.rechts-hinweis{
  background:var(--ton-hauch);
  border-radius:var(--bogen);
  padding:20px 24px; margin-bottom:22px;
}
.rechts-hinweis b{
  display:block; margin-bottom:6px;
  font-family:var(--display); color:var(--tinte);
}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}

/* Bewusst „.rechtstext .zurueck" und nicht nur „.zurueck": die Linkfarbe der
   Rechtsseiten wuerde den Knopf sonst mitfaerben. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:26px; padding:13px 24px;
  border-radius:999px;
  border:2px solid var(--rand);
  color:var(--ton); text-decoration:none;
  font-family:var(--display); font-weight:600;
  transition:background var(--tempo), border-color var(--tempo);
}
.rechtstext .zurueck:hover{
  background:var(--ton-hauch); border-color:var(--ton);
}