/* =============================================================================
   Das öffentliche Blatt: die Tafel.

   Dunkles Grün, Gold, Serifen. Jedes Lokal ist eine weiße Tafel mit Kerbe oben
   und unten, die aus dem dunklen Kopf herausragt — wie eine gedruckte
   Speisekarte, nicht wie eine App. Keine Gerichtfotos: Die Karte trägt sich
   über Schrift und Papier.

   Geladen nur im öffentlichen Layout, nach app.css. Alles hier hängt an
   body.tafel, damit es die Grundregeln von app.css verlässlich überstimmt und
   Wirte- und Verwaltungsbereich unberührt lässt.
   ============================================================================= */
/* Die Schriften liegen beim Paket dabei — die Seite lädt nichts von Google.
   Playfair Display und Jost sind variabel: eine Datei trägt alle Gewichte der
   angegebenen Spanne, deshalb steht dort 500 600 statt zweimal dasselbe. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500 600;font-display:swap;
  src:url(fonts/playfair.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500 600;font-display:swap;
  src:url(fonts/playfair-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
  src:url(fonts/playfair-kursiv.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
  src:url(fonts/playfair-kursiv-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/jost.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/jost-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Petit Formal Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/petit.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Petit Formal Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/petit-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body.tafel{
  --grund:#F4F2EC; --flaeche:#FFFFFF; --flaeche-2:#F7F5F0; --flaeche-3:#ECE9E1; --zebra:#FFFFFF;
  --tinte:#1E2622; --tinte-2:#525E59; --tinte-3:#66716C;
  --linie:#E4E7E3; --linie-2:#C9CFCB;
  --gold:#C9A45C; --gold-schrift:#8A6A2B; --gold-sanft:#F5EEDD;
  --akzent:#C9A45C; --akzent-tief:#B8923F; --akzent-auf:#0F1A16; --akzent-schrift:#8A6A2B; --akzent-sanft:#F5EEDD;
  --tief:#0F1A16; --tief-2:#15231E;
  --gruen:#2E7D4A; --gruen-sanft:#E6F2EA;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  /* Petit Formal Script: fast aufrecht, mit demselben Strichkontrast wie
     Playfair — sie fügt sich ein, statt daneben zu stehen. Pinyon Script war
     zu fein, Parisienne zu schräg. Zum Tauschen: hier und in fonts/. */
  --schreib:"Petit Formal Script","Snell Roundhand","Brush Script MT",cursive;
  --r-s:2px; --r-m:2px; --r-l:2px;
  --s1:0 1px 2px rgba(20,32,27,.05);
  --s2:0 20px 50px -30px rgba(20,32,27,.35);
  --s3:0 30px 60px -30px rgba(0,0,0,.45);
  font-family:Jost,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.tafel{
    --grund:#0B1512; --flaeche:#15231E; --flaeche-2:#1B2C26; --flaeche-3:#233930; --zebra:#15231E;
    --tinte:#EFEDE6; --tinte-2:#B9C1BC; --tinte-3:#9AA5A0;
    --linie:#24352E; --linie-2:#34493F;
    --gold:#D4B26A; --gold-schrift:#D4B26A; --gold-sanft:#2A2616;
    --akzent:#D4B26A; --akzent-tief:#E2C27C; --akzent-auf:#0F1A16; --akzent-schrift:#D4B26A; --akzent-sanft:#2A2616;
    --gruen:#7BD09A; --gruen-sanft:#19261B;
  }
}
:root[data-theme="dark"] body.tafel{
  --grund:#0B1512; --flaeche:#15231E; --flaeche-2:#1B2C26; --flaeche-3:#233930; --zebra:#15231E;
  --tinte:#EFEDE6; --tinte-2:#B9C1BC; --tinte-3:#9AA5A0;
  --linie:#24352E; --linie-2:#34493F;
  --gold:#D4B26A; --gold-schrift:#D4B26A; --gold-sanft:#2A2616;
  --akzent:#D4B26A; --akzent-tief:#E2C27C; --akzent-auf:#0F1A16; --akzent-schrift:#D4B26A; --akzent-sanft:#2A2616;
  --gruen:#7BD09A; --gruen-sanft:#19261B;
}
body.tafel::before{display:none}   /* das Korn von app.css — Papier braucht keins */
body.tafel h1,body.tafel h2,body.tafel h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
body.tafel .mono{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums}

/* Eine Zeile Schreibschrift über einem Titel: „Wirtshaus", „Mittagstisch in Bludenz" */
body.tafel .vorzeile{
  display:block;font-family:var(--schreib);font-size:24px;line-height:1.2;color:var(--gold-schrift);
  font-weight:400;letter-spacing:0;text-transform:none;
}
body.tafel .goldstrich{display:block;width:56px;height:1px;background:var(--gold);margin:14px auto 4px}

/* --------------------------------------------------------------- Rahmen */
body.tafel .inhalt{max-width:1180px;padding:0 24px}
body.tafel .inhalt--lokal{max-width:1180px}
@media (max-width:640px){ body.tafel .inhalt{padding:0 14px} }

/* ------------------------------------------------------------- Kopfleiste */
body.tafel .kopfleiste{
  background:var(--tief);border-bottom:1px solid rgba(255,255,255,.08);color:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.tafel .kopfleiste-in{max-width:1180px;padding:16px 24px}
body.tafel .marke-name{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:0}
body.tafel .kopfleiste .marke-name,body.tafel .fuss .marke-name{color:#fff}
body.tafel .marke-name i{color:var(--gold-schrift);font-weight:400}
body.tafel .kopfleiste .marke-name i,body.tafel .fuss .marke-name i{color:var(--gold)}
body.tafel .marke-zeichen{filter:none}
body.tafel .kopf-nav{gap:26px;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
body.tafel .kopf-nav a{color:rgba(255,255,255,.82)}
body.tafel .kopf-nav a:hover,body.tafel .kopf-nav a.aktiv{color:#fff}
body.tafel .kopf-nav a.knopf{
  background:transparent;border:1px solid var(--gold);color:var(--gold);border-radius:2px;
  padding:9px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;box-shadow:none;
}
body.tafel .kopf-nav a.knopf:hover{background:var(--gold);color:var(--tief);transform:none}
body.tafel .kopf-nav a.knopf--akzent{background:var(--gold);color:var(--tief)}
body.tafel .kopf-suche,body.tafel .darstellungsknopf{color:rgba(255,255,255,.8);border-radius:2px}
body.tafel .kopf-suche:hover,body.tafel .darstellungsknopf:hover{background:rgba(255,255,255,.08);color:#fff}
body.tafel .darstellungsknopf[data-stand="dunkel"]{color:var(--gold)}
@media (max-width:560px){ body.tafel .kopfleiste-in{padding:12px 14px} body.tafel .marke-name{font-size:18px} }

/* ---------------------------------------------------------------- Knöpfe */
body.tafel .knopf{
  border-radius:2px;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 20px;box-shadow:none;background:var(--flaeche);border:1px solid var(--tinte);color:var(--tinte);
}
body.tafel .knopf:hover{background:var(--tinte);color:var(--grund);transform:none}
body.tafel .knopf--akzent{background:var(--gold);border-color:var(--gold);color:var(--tief)}
body.tafel .knopf--akzent:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);color:var(--tief)}
body.tafel .knopf--leise{background:transparent;border-color:var(--linie-2);color:var(--tinte-2)}
body.tafel .knopf--leise:hover{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}
body.tafel .knopf--klein{padding:8px 14px;font-size:11.5px}
body.tafel .knopf--symbol{padding:8px 10px}
body.tafel .verweis{color:var(--gold-schrift)}

/* ------------------------------------------------------------- Tafelkopf */
/* Die dunkle Fläche läuft über die ganze Breite; der Inhalt bleibt im Rahmen. */
body.tafel .tafelkopf{
  position:relative;overflow:hidden;color:#fff;background:var(--tief);
  margin:0 calc(50% - 50vw);padding:56px 24px 150px;
}
body.tafel .tafelkopf-in{
  position:relative;max-width:1132px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:14px;
}
body.tafel .tafelkopf .vorzeile{color:var(--gold);font-size:32px;letter-spacing:.01em}
body.tafel .tafelkopf h1{font-size:clamp(40px,7vw,72px);font-weight:600;line-height:1.02;color:#fff;margin:0;letter-spacing:-.015em}
body.tafel .tafelkopf .datumzeile{
  margin:0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);
  display:block;
}
body.tafel .tafelkopf .datumzeile .puls{display:none}
/* Zierrat: Symbole aus dem Wirtshaus, die über die dunkle Fläche treiben.
   Zwei Ebenen, damit sich die Animationen nicht in die Quere kommen — das
   Kästchen blendet ein (Deckkraft), das Symbol darin treibt (transform). */
body.tafel .kopfzier{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
body.tafel .kopfzier-stueck{
  position:absolute;left:var(--x);top:var(--y);width:var(--g);height:var(--g);
  margin-left:calc(var(--g) / -2);margin-top:calc(var(--g) / -2);
  opacity:0;animation:zier-auf 1.1s cubic-bezier(.2,.7,.3,1) var(--e,.2s) both;
}
body.tafel .kopfzier-stueck svg{
  display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;
  animation:zier-treiben var(--t,20s) ease-in-out var(--d,0s) infinite;
}
body.tafel .kopfzier-stueck--gold{color:var(--gold)}
body.tafel .kopfzier-stueck--hell{color:#fff}
/* Die Grunddrehung sitzt am Kästchen und bleibt liegen — ein Löffel soll
   auch dann schräg liegen, wenn niemand ihn bewegt. */
@keyframes zier-auf{
  from{opacity:0;transform:translateY(14px) scale(.9) rotate(var(--r,0deg))}
  to  {opacity:var(--o,.25);transform:rotate(var(--r,0deg))}
}
/* Drei Bahnen, damit nicht fünfzehn Stücke dieselbe Schleife fliegen: eine
   steigt und lehnt sich nach rechts, eine schwingt seitlich aus, eine macht
   einen weiten Bogen nach unten und wieder hoch. Die Deckkraft atmet mit. */
@keyframes zier-treiben{
  0%   {transform:translate3d(0,0,0) rotate(0deg);opacity:.8}
  25%  {transform:translate3d(14px,-30px,0) rotate(9deg);opacity:1}
  50%  {transform:translate3d(-10px,-48px,0) rotate(-7deg);opacity:.62}
  75%  {transform:translate3d(-18px,-20px,0) rotate(6deg);opacity:.95}
  100% {transform:translate3d(0,0,0) rotate(0deg);opacity:.8}
}
@keyframes zier-treiben-b{
  0%   {transform:translate3d(0,0,0) rotate(0deg);opacity:.85}
  20%  {transform:translate3d(-24px,-14px,0) rotate(-12deg);opacity:1}
  45%  {transform:translate3d(10px,-38px,0) rotate(8deg);opacity:.65}
  70%  {transform:translate3d(26px,-16px,0) rotate(14deg);opacity:.9}
  100% {transform:translate3d(0,0,0) rotate(0deg);opacity:.85}
}
@keyframes zier-treiben-c{
  0%   {transform:translate3d(0,0,0) rotate(0deg);opacity:.75}
  30%  {transform:translate3d(20px,12px,0) rotate(10deg);opacity:1}
  55%  {transform:translate3d(8px,-34px,0) rotate(-9deg);opacity:.6}
  80%  {transform:translate3d(-22px,-8px,0) rotate(5deg);opacity:.95}
  100% {transform:translate3d(0,0,0) rotate(0deg);opacity:.75}
}
body.tafel .kopfzier-stueck--b svg{animation-name:zier-treiben-b}
body.tafel .kopfzier-stueck--c svg{animation-name:zier-treiben-c}
/* Der Lokalkopf ist flacher — dort bleibt der Zierrat zurückhaltender. */
body.tafel .tafelkopf--lokal .kopfzier-stueck{opacity:0;animation-name:zier-auf-leise}
@keyframes zier-auf-leise{
  from{opacity:0;transform:translateY(14px) scale(.9) rotate(var(--r,0deg))}
  to  {opacity:calc(var(--o,.25) * .7);transform:rotate(var(--r,0deg))}
}
@media (max-width:900px){
  body.tafel .tafelkopf{padding:34px 16px 110px}
  body.tafel .tafelkopf .vorzeile{font-size:25px}
  body.tafel .tafelkopf-in{gap:10px}
  /* Auf dem Handy bleibt die Mitte frei — dort steht die Schrift. */
  body.tafel .kopfzier-stueck--mitte{display:none}
  body.tafel .kopfzier-stueck{width:calc(var(--g) * .7);height:calc(var(--g) * .7)}
}
/* Am Handy zählt jeder Pixel bis zum ersten Gericht. Der Kopf rückt zusammen:
   kleinere Zierzeile (sie brach bei 360px auf zwei Zeilen um), das Datum in
   eine Zeile, weniger Luft zwischen den Stücken. */
@media (max-width:560px){
  body.tafel .tafelkopf{padding:20px 16px 92px}
  body.tafel .tafelkopf-in{gap:7px}
  body.tafel .tafelkopf .vorzeile{font-size:20px;line-height:1.15}
  body.tafel .tafelkopf h1{font-size:clamp(30px,9vw,44px);line-height:1.05}
  body.tafel .tafelkopf .datumzeile{font-size:11px;letter-spacing:.03em}
  body.tafel .tagwahl{margin-top:8px}
}

/* Wer Bewegung abbestellt hat, bekommt die Symbole still. */
@media (prefers-reduced-motion:reduce){
  body.tafel .kopfzier-stueck{animation:none;opacity:var(--o,.25);transform:rotate(var(--r,0deg))}
  body.tafel .kopfzier-stueck svg{animation:none}
}

/* Suche im Kopf: ein weißer Balken auf dem Dunkel */
body.tafel .tafelkopf .schnellsuche{width:100%;max-width:640px;margin:10px 0 0;text-align:left;color:var(--tinte)}
body.tafel .tafelkopf .schnellsuche form{
  border-radius:2px;border:none;background:#fff;box-shadow:0 20px 50px -24px rgba(0,0,0,.6);height:58px;padding:0 16px 0 20px;
}
body.tafel .tafelkopf .schnellsuche input[type=search]{font-size:16px;color:#1E2622}
body.tafel .tafelkopf .schnellsuche input[type=search]::placeholder{color:#8A948F}
body.tafel .tafelkopf .schnellsuche .ic{color:#8A948F}
body.tafel .suchvorschlaege{border-radius:2px;color:var(--tinte)}
@media (max-width:640px){ body.tafel .tafelkopf .schnellsuche form{height:50px} }

/* Tageswahl: Kacheln mit Goldrand statt runder Kärtchen */
body.tafel .tagwahl{margin:14px 0 0;width:100%;max-width:820px;justify-content:center}
body.tafel .tagwahl-band{flex:0 1 auto;padding:2px}
body.tafel .tagwahl-tag{
  border-radius:0;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
  min-width:92px;padding:9px 10px 8px;gap:1px;transition:.16s;
}
body.tafel .tagwahl-tag:hover{border-color:var(--gold);color:#fff;transform:none}
body.tafel .tagwahl-name{font-family:Jost,sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
body.tafel .tagwahl-zahl{font-family:var(--serif);font-size:16px;color:#fff}
body.tafel .tagwahl-punkt{display:none}
body.tafel .tagwahl-tag.ist-leer{border-style:dashed;border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.4)}
body.tafel .tagwahl-tag.ist-leer .tagwahl-zahl{color:rgba(255,255,255,.4)}
body.tafel .tagwahl-tag.ist-gewaehlt{background:var(--gold);border-color:var(--gold);color:var(--tief);box-shadow:none}
body.tafel .tagwahl-tag.ist-gewaehlt .tagwahl-zahl{color:var(--tief)}
body.tafel .tagwahl-sprung label{border-radius:0;border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent}
body.tafel .tagwahl-sprung label:hover{border-color:var(--gold)}

/* Werkzeugzeile im Kopf: Umrissknöpfe auf Dunkel, der Filterknopf in Gold */
body.tafel .werkzeugzeile{justify-content:center;padding:6px 0 0;gap:8px}
body.tafel .werkzeugzeile .schnellwahl{margin:0;gap:8px}
/* Solange beides in eine Zeile passt, steht die Werkzeugzeile im selben
   Rahmen wie die Tageswahl darüber (820px) und füllt ihn auch aus: die
   Wortknöpfe wachsen mit, die Symbolknöpfe bleiben quadratisch. So schließen
   beide Zeilen links und rechts auf derselben Kante ab. Schmäler umbricht die
   Zeile ohnehin — dort würden gedehnte Knöpfe nur ihre Beschriftung abschneiden. */
@media (min-width:900px){
  body.tafel .werkzeugzeile{width:100%;max-width:820px;margin:0 auto}
  body.tafel .werkzeugzeile .schnellwahl{flex:1 1 auto}
  body.tafel .werkzeugzeile .schnellwahl > .knopf:not(.knopf--symbol),
  body.tafel .werkzeugzeile .sortierwahl{flex:1 1 auto}
}
body.tafel .filterknopf,
body.tafel .werkzeugzeile .knopf,
body.tafel .sortierwahl{
  border-radius:0;height:42px;padding:0 18px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
}
body.tafel .filterknopf{background:var(--gold);border-color:var(--gold);color:var(--tief);font-weight:600}
body.tafel .filterknopf:hover{border-color:var(--gold)}
body.tafel .filterknopf.ist-aktiv{background:#fff;border-color:#fff;color:var(--tief)}
body.tafel .filterzahl{background:var(--tief);color:var(--gold)}
body.tafel .werkzeugzeile .knopf:hover,body.tafel .sortierwahl:hover{border-color:var(--gold);color:#fff;background:transparent}
body.tafel .werkzeugzeile .knopf--symbol{padding:0 12px}
body.tafel .sortierwahl .ic{color:rgba(255,255,255,.6)}
body.tafel .sortierwahl select{color:#fff;font-family:Jost,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
body.tafel .sortierwahl select option{color:#1E2622}
body.tafel .werkzeugzeile .zustandszeile{color:rgba(255,255,255,.7);letter-spacing:.1em}
body.tafel .werkzeugzeile .zuruecksetzen{color:var(--gold)}
/* Am Handy waren es drei Reihen: Filter allein, darunter die vier
   Symbolknöpfe, darunter die Sortierwahl — 142 Pixel für fünf Knöpfe.
   display:contents löst die Schnellwahl auf, damit alle Knöpfe in derselben
   Flexbox liegen: Filter und die Symbole teilen sich eine Reihe, die
   Sortierwahl bekommt die zweite (für „Nächste zuerst" reicht der Platz
   daneben nicht, sonst wird die Beschriftung abgeschnitten). */
@media (max-width:560px){
  body.tafel .werkzeugzeile{flex-wrap:wrap;justify-content:center;gap:6px}
  body.tafel .werkzeugzeile .schnellwahl{display:contents}
  body.tafel .filterknopf{flex:1 1 auto}
  body.tafel .werkzeugzeile .sortierwahl{flex:1 1 100%;order:1}
  body.tafel .filterknopf,body.tafel .werkzeugzeile .knopf,body.tafel .sortierwahl{height:38px;padding:0 10px}
  body.tafel .werkzeugzeile .knopf--symbol{padding:0 10px}
}

/* Das Filtermenü klappt als weiße Tafel unter dem Kopf auf */
body.tafel .filtermenue{
  margin:0 auto 28px;max-width:860px;border-radius:0;border:none;
  padding:22px 34px 26px;box-shadow:var(--s3);
}
body.tafel .filterblock h2{font-family:Jost,sans-serif;color:var(--gold-schrift);letter-spacing:.14em;font-size:11.5px}
body.tafel .chip{border-radius:0;font-weight:500;letter-spacing:.04em;font-size:12.5px}
body.tafel .chip[aria-pressed="true"]{background:var(--tief);border-color:var(--tief);color:#fff}
body.tafel .chip--gruen[aria-pressed="true"]{background:var(--gruen);border-color:var(--gruen)}
body.tafel .wert{border-radius:0;font-family:var(--serif)}

/* ------------------------------------------------------------- Die Tafeln */
/* Der Kopf zieht das, was folgt, um 96px in die dunkle Fläche hinein — ein
   Wert an einer Stelle, statt an jedem Stück darunter ein eigener Minuswert.
   Was zuerst kommt (Filtermenü, Karte oder die Tafeln), liegt damit richtig. */
body.tafel .tafelkopf{margin-bottom:-96px}
body.tafel .tafelkopf ~ *{position:relative;z-index:1}
body.tafel .lokalliste{
  display:block;column-count:2;column-gap:28px;margin:0;
}
/* Zwischen zwei Tafeln derselbe schmale Abstand wie früher im Raster (28px) —
   nur fällt er jetzt dort an, wo die nächste Tafel wirklich anfängt, statt am
   Ende der längsten Tafel einer Rasterzeile. */
body.tafel .lokalliste > .lokalkarte{break-inside:avoid;margin:0 0 28px}
@media (max-width:900px){
  body.tafel .tafelkopf{margin-bottom:-70px}
  body.tafel .lokalliste{column-count:1}
  body.tafel .lokalliste > .lokalkarte{margin-bottom:20px}
}
body.tafel .tageskarte{margin:0 auto 28px;max-width:860px}

/* Die Tafel: weiß, Kerbe oben und unten, kräftiger Schatten nach unten. */
body.tafel .lokalkarte{
  border:none;border-radius:0;padding:36px 40px 30px;overflow:visible;
  background:var(--flaeche);box-shadow:var(--s3);
  -webkit-mask:radial-gradient(circle 22px at 50% 0,transparent 98%,#000 100%) top/100% 51% no-repeat,
               radial-gradient(circle 22px at 50% 100%,transparent 98%,#000 100%) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 22px at 50% 0,transparent 98%,#000 100%) top/100% 51% no-repeat,
               radial-gradient(circle 22px at 50% 100%,transparent 98%,#000 100%) bottom/100% 51% no-repeat;
}
body.tafel .lokalkarte:hover{transform:none;box-shadow:var(--s3);border-color:transparent}
@media (max-width:640px){ body.tafel .lokalkarte{padding:30px 22px 26px} }

body.tafel .lokalkarte-kopf{display:block;text-align:center}
body.tafel .lokalkarte-titel{display:flex;flex-direction:column;align-items:center;gap:6px}
body.tafel .lokalname{
  font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-.01em;color:var(--tinte);
}
body.tafel .lokalname:hover{text-decoration:none;color:var(--gold-schrift)}
body.tafel .lokal-meta{
  justify-content:center;gap:10px;margin-top:4px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinte-3);font-weight:500;
}
body.tafel .lokal-meta .punkt{background:var(--tinte-3)}
body.tafel .gehzeit{color:var(--tinte-3)}
body.tafel .zustandspille{font-size:12.5px;letter-spacing:.08em;font-weight:600;color:var(--gold-schrift)}
body.tafel .zustandspille.ist-offen{color:var(--gruen)}
body.tafel .zustandspille.ist-knapp{color:var(--gold-schrift)}
body.tafel .merkmalzeile{justify-content:center;gap:0;margin-top:2px;font-size:12.5px;color:var(--tinte-3)}
body.tafel .merkmal{background:none;border:none;padding:0;font-size:12.5px;color:var(--tinte-3)}
body.tafel .merkmal + .merkmal::before{content:"·";margin:0 7px;color:var(--linie-2)}
@media (max-width:640px){ body.tafel .lokalname{font-size:26px} }

/* Gericht — gestrichelt — Preis, darunter die Beschreibung */
body.tafel .gerichte{margin-top:10px;gap:0}
/* Das Gericht ist ein Block: oben die geschlossene Zeile (Name — Führung —
   Preis — Knöpfe), darunter die Zusatzzeile. Als eine einzige Flexbox brach
   auf schmalen Geräten der Preis weg: Flexbox umbricht, bevor sie schrumpft. */
body.tafel .gericht{display:block;padding:14px 0;border-radius:0;background:none}
body.tafel .gericht-zeile{
  display:flex;flex-wrap:nowrap;align-items:baseline;gap:0 12px;
}
body.tafel .gericht:nth-child(even),body.tafel .gerichte--zebra .gericht.ist-gerade{background:none}
/* Zwischen zwei Gerichten dieselbe feine Linie wie über „Dazu" — das gliedert
   die Karte, ohne dass Streifen oder Kästen nötig wären. */
body.tafel .gericht + .gericht{border-top:1px solid var(--linie)}
body.tafel .gericht-name{
  flex:0 1 auto;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;letter-spacing:0;color:var(--tinte);
}
body.tafel .gericht-name mark{background:none;color:var(--gold-schrift);padding:0;font-weight:500;font-style:italic}
/* Keine Punktreihe zwischen Gericht und Preis: Die Spalten halten die Zeile
   schon zusammen, die Trennlinien gliedern die Karte. Das Element bleibt als
   Platzhalter, der den Preis nach rechts schiebt — nur ohne Striche. */
body.tafel .fuehrung{flex:1 1 24px;min-width:24px;border-bottom:none;order:0}
body.tafel .preis{
  font-family:var(--serif);font-size:21px;font-weight:500;color:var(--gold-schrift);letter-spacing:0;
  /* Eine feste Spalte, wie auf einer gedruckten Karte: sonst endet die
     gestrichelte Führung bei „4,80" weiter rechts als bei „13,90". */
  min-width:74px;text-align:right;
}
body.tafel .allergenzeile{flex:0 0 auto;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.14em;color:var(--tinte-3);margin-left:6px}
/* Beschreibung und Kennzeichen stehen unter der Gerichtzeile, über die ganze
   Breite — und in einer einzigen Zeile, durch Mittelpunkte getrennt. Als
   eigener Absatz stand die Kennzeichenzeile verloren da. */
body.tafel .gericht-zusatz{
  display:block;margin-top:4px;
  font-family:Jost,sans-serif;font-size:14px;line-height:1.55;color:var(--tinte-2);
}
body.tafel .gericht-zusatz .beschreibung{display:inline;font-style:normal;margin:0}
body.tafel .gericht-zusatz .beschreibung + .beschreibung::before{content:" · ";color:var(--linie-2)}
/* Die Kennzeichen stehen darunter, nicht daneben — und zurückhaltend: keine
   gesperrten Versalien mehr, die eine halbe Zeile breit werden. */
body.tafel .gericht-zusatz .kennzeichen{display:block;gap:0;margin:1px 0 0}
body.tafel .gericht-zusatz .kenn,
body.tafel .gericht-zusatz .kenn--grau{
  font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--tinte-3);font-weight:400;
}
body.tafel .gericht-zusatz .kenn + .kenn::before{content:" · ";color:var(--linie-2);letter-spacing:0}
body.tafel .kenn,body.tafel .kenn--grau{
  background:none;padding:0;border-radius:0;font-family:Jost,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3);
}
@media (max-width:640px){ body.tafel .gericht-name,body.tafel .preis{font-size:18px} }

/* „Dazu" ist ein eigener kleiner Abschnitt der Karte: eine Überschrift in
   Versalien, darunter jede Beigabe als eigene Zeile mit derselben
   gestrichelten Führung und demselben Goldpreis wie die Gerichte darüber.
   Vorher stand alles in einer Zeile nebeneinander, mit „Dazu" als
   Schreibschrift-Etikett davor — das las sich wie hingerutscht. */
body.tafel .aufpreise{
  display:block;font-size:15px;color:var(--tinte-2);
  /* Eine eigene Fläche von Kartenrand zu Kartenrand: zwischen den Gerichten
     ging der Block sonst unter. Die Ränder heben die Innenabstände der Tafel
     (36px 40px 30px) auf, das Band läuft dadurch bis an die Kante. */
  margin:14px -40px 0;padding:14px 40px 18px;border-top:none;
  background:var(--gold-sanft);
}
@media (max-width:640px){
  body.tafel .aufpreise{margin:12px -22px 0;padding:12px 22px 16px}
}
body.tafel .aufpreise-titel{
  /* Ohne den Rücksetzer erbt die Überschrift die beige Pille aus app.css,
     die dort alle Kinder von .aufpreise bekommen. */
  display:block;background:none;padding:0;border-radius:0;
  text-align:center;margin-bottom:2px;
  font-family:Jost,sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;
  /* Eine Spur dunkler als --gold-schrift: auf dem cremefarbenen Band käme das
     übliche Gold nur auf 4,35:1, verlangt sind 4,5:1. Auf Weiß sind es 5,3:1. */
  text-transform:uppercase;color:#856629;
}
body.tafel .aufpreis{
  display:flex;align-items:baseline;gap:0 12px;padding:7px 0;
  background:none;border-radius:0;color:var(--tinte-2);font-weight:400;
}
body.tafel .aufpreis > span:first-child{
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--tinte-2);
}
body.tafel .aufpreis b{
  font-family:var(--serif);font-size:17px;font-weight:500;color:var(--gold-schrift);letter-spacing:0;
  min-width:74px;text-align:right;
}
/* Das Getränk des Hauses hat keinen Aufpreis — es steht mittig für sich. */
body.tafel .aufpreis--wort{display:block;text-align:center;font-style:italic}
body.tafel .preisstufen{justify-content:center}

/* Die ganze Woche, das Getränk des Hauses */
body.tafel .wochenteil{margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);gap:0}
body.tafel .wochenteil-kopf{
  justify-content:center;font-family:var(--schreib);font-size:21px;letter-spacing:0;text-transform:none;
  color:var(--gold-schrift);font-weight:400;margin-bottom:0;
}
body.tafel .wochenteil-kopf .ic{display:none}
body.tafel .gericht--woche{background:none!important}
body.tafel .wochengetraenk{border-radius:0;background:var(--tief);margin-top:10px}

/* Ohne Menü, Urlaub, Liebling */
body.tafel .still{border-radius:0;background:var(--flaeche-2);justify-content:center;font-size:14px;margin-top:16px}
body.tafel .band{border-radius:0;border:none;background:var(--gold-sanft);color:var(--gold-schrift);justify-content:center}

/* Fuß der Tafel: Zum Lokal — Merken */
body.tafel .tafel-fuss{
  margin-top:22px;display:flex;justify-content:center;align-items:center;gap:22px;
}
body.tafel .tafel-weiter,body.tafel .tafel-fuss .merken{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--tinte);text-decoration:none;background:none;border:none;padding:0 0 3px;border-radius:0;
  width:auto;height:auto;transition:color .18s;
}
body.tafel .tafel-weiter{border-bottom:1px solid var(--gold)}
body.tafel .tafel-weiter:hover{color:var(--gold-schrift)}
body.tafel .tafel-weiter .ic,body.tafel .tafel-fuss .merken .ic{font-size:15px;width:15px;height:15px}
body.tafel .tafel-fuss .merken{color:var(--tinte-3)}
body.tafel .tafel-fuss .merken:hover{color:var(--tinte)}
body.tafel .tafel-fuss .merken.ist-gemerkt{color:#B3372A}
body.tafel .tafel-fuss .merken.ist-gemerkt .ic{fill:currentColor}

/* Gleiches Gericht, mehrere Häuser · Nichts dabei · Nachbarorte */
body.tafel .vergleich{max-width:860px;margin:36px auto 0}
body.tafel .abschnitt-titel{
  font-family:var(--schreib);font-size:24px;line-height:1.35;letter-spacing:0;text-transform:none;
  color:var(--gold-schrift);font-weight:400;
}
body.tafel .abschnitt-titel::after{background:var(--linie)}
body.tafel .vergleich-haus{border-radius:0}
body.tafel .vergleich-haus.ist-guenstig{background:var(--gold-sanft);border-color:var(--gold);color:var(--gold-schrift)}
body.tafel .vergleich-zeichen{border-radius:0}
body.tafel .nichts{background:#fff;box-shadow:var(--s3);margin:0 auto;max-width:860px;padding:54px 26px}
body.tafel .nichts .ic{color:var(--gold)}
body.tafel .inhalt > .nachbarn{margin:32px 0 0;padding-top:0;border:none;max-width:none}
body.tafel .nachbarn h2{font-family:var(--schreib);font-size:24px;line-height:1.35;color:var(--gold-schrift);font-weight:400}
body.tafel .nachbarn-liste a{border-radius:0}

/* ---------------------------------------------------------------- Lokalseite */
body.tafel .tafelkopf--lokal{padding:32px 24px 150px;margin-bottom:-100px}
body.tafel .tafelkopf--lokal .zurueck{
  align-self:flex-start;margin:0 0 6px;opacity:1;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
body.tafel .tafelkopf--lokal .zurueck:hover{color:#fff}
body.tafel .monogramm{
  width:84px;height:84px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:30px;color:var(--gold);margin-top:6px;background:transparent;
}
body.tafel .monogramm img{width:100%;height:100%;object-fit:cover;display:block}
body.tafel .tafelkopf--lokal .vorzeile{font-size:30px;margin-top:8px}
body.tafel .tafelkopf--lokal h1{font-size:clamp(38px,6.4vw,64px)}
body.tafel .tafelkopf--lokal .lokalkopf-fuss{
  margin:0;opacity:1;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);
  justify-content:center;gap:14px;font-family:Jost,sans-serif;
}
body.tafel .tafelkopf--lokal .lokalkopf-fuss .ic{font-size:14px}
body.tafel .tafelkopf--lokal .offen-pille{background:none;padding:0;letter-spacing:.1em;font-size:13px;color:#7BD09A}
body.tafel .tafelkopf--lokal .offen-pille i{background:#7BD09A}
body.tafel .tafelkopf--lokal .handlungen{padding:22px 0 0;justify-content:center;gap:10px}
body.tafel .handlung{
  border-radius:0;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  height:48px;padding:0 22px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
body.tafel .handlung:hover{border-color:var(--gold);color:#fff;background:transparent;transform:none}
body.tafel .handlung .ic{color:#fff;font-size:16px}
body.tafel .handlung--merken{background:var(--gold);border-color:var(--gold);color:var(--tief);font-weight:600;cursor:pointer}
body.tafel .handlung--merken .ic{color:var(--tief)}
body.tafel .handlung--merken:hover{background:var(--akzent-tief);border-color:var(--akzent-tief)}
body.tafel .handlung--merken.ist-gemerkt{background:#fff;border-color:#fff}
body.tafel .kopfmerkmale{justify-content:center;margin-top:16px;gap:18px}
body.tafel .kopfmerkmale li{
  background:none;padding:0;border-radius:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
body.tafel .kopfmerkmale .ic{opacity:1}
body.tafel .urlaubsband{border-radius:0;max-width:860px;margin:0 auto 30px;box-shadow:var(--s3)}

body.tafel .lokalraster{column-gap:28px;margin-top:0}
@media (min-width:900px){ body.tafel .lokalraster{grid-template-columns:minmax(0,1fr) 340px;padding:0} }
body.tafel .lokalraster-haupt > .abschnitt,body.tafel .lokalraster-rand > .abschnitt{padding:0;border:none}
body.tafel .lokalraster-haupt > .abschnitt + .abschnitt{margin-top:36px;padding-top:0}
body.tafel .lokalraster-haupt > .abschnitt > .abschnitt-titel{
  font-family:var(--schreib);font-style:normal;font-size:25px;line-height:1.35;color:var(--gold-schrift);margin-bottom:14px;
}
body.tafel .lokalraster-haupt > .abschnitt > .abschnitt-titel::after{opacity:1}
/* Die Tafel des Tages steht ohne eigene Überschrift — die Tafel trägt sie selbst */
body.tafel .abschnitt--heute > .abschnitt-titel{display:none}
body.tafel .menuekarte{
  border:none;border-radius:0;padding:40px 48px 36px;box-shadow:var(--s3);
  -webkit-mask:radial-gradient(circle 22px at 50% 0,transparent 98%,#000 100%) top/100% 51% no-repeat,
               radial-gradient(circle 22px at 50% 100%,transparent 98%,#000 100%) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 22px at 50% 0,transparent 98%,#000 100%) top/100% 51% no-repeat,
               radial-gradient(circle 22px at 50% 100%,transparent 98%,#000 100%) bottom/100% 51% no-repeat;
}
@media (max-width:640px){ body.tafel .menuekarte{padding:30px 22px 26px} }
body.tafel .menuekarte > .oberzeile{
  font-family:var(--serif);font-style:normal;font-size:30px;font-weight:600;color:var(--tinte);text-align:center;
  border:none;padding:0;opacity:1;letter-spacing:-.01em;display:flex;flex-direction:column;align-items:center;gap:6px;
}
body.tafel .menuekarte > .oberzeile::before{content:attr(data-vorzeile);font-family:var(--schreib);font-size:26px;font-weight:400;color:var(--gold-schrift);line-height:1.25}
body.tafel .menuekarte > .oberzeile::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:14px 0 2px}
body.tafel .menuekarte .gerichte{margin-top:6px}
body.tafel .menuekarte .gericht{align-items:baseline}
body.tafel .paketkopf{border-radius:0;background:var(--flaeche-2)}
body.tafel .daumen,body.tafel .merken--klein{border-radius:0;order:3}
/* Wie „Dazu" auf der Tageskarte: Überschrift, darunter jede Beigabe als
   eigene Zeile mit Führung und Goldpreis. */
body.tafel .kombis{
  display:block;font-size:15px;color:var(--tinte-2);
  margin:16px -48px 0;border-top:none;background:var(--gold-sanft);
  /* Rechts neben jedem Gericht stehen Daumen und Herz (41 + 12 + 30 + 12 px).
     Ohne denselben Einzug endeten die Aufpreise 95 px weiter rechts als die
     Gerichtpreise darüber — zwei Preisspalten auf einer Karte. */
  padding:14px calc(48px + var(--knopfspalte,95px)) 18px 48px;
}
@media (max-width:640px){
  body.tafel .kombis{margin:12px -22px 0;padding:12px calc(22px + var(--knopfspalte,95px)) 16px 22px}
}
body.tafel .kombi{
  display:flex;align-items:baseline;gap:0 12px;padding:7px 0;
  background:none;border-radius:0;color:var(--tinte-2);font-weight:400;
}
body.tafel .kombi > span:first-child{
  flex:0 1 auto;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--tinte-2);
}
body.tafel .kombi::after{content:"";order:0;flex:1 1 24px;min-width:24px}
body.tafel .kombi .preis{order:1;font-family:var(--serif);font-size:17px;color:var(--gold-schrift);min-width:74px}
body.tafel .menue-notiz{text-align:center}
body.tafel .menuekarte--woche{padding:24px 28px;background:var(--flaeche);-webkit-mask:none;mask:none}
body.tafel .still--gross{padding:36px 28px;background:#fff;box-shadow:var(--s3);flex-direction:column;align-items:center;text-align:center;gap:8px}
body.tafel .still--gross .anrufen{margin:8px 0 0}

/* Die Woche: dieselben Karten wie „Auch in der Nähe" — Tag als Titel in
   Serife, darunter die Gerichte in einer Zeile, die man auch wirklich liest.
   Vorher standen sie in vier schmalen Spalten und brachen nach jedem Wort um. */
body.tafel .wochenliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
body.tafel .wochenzeile,body.tafel a.wochenzeile{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;
  padding:20px 22px;margin:0;border-radius:0;
  background:var(--flaeche);border:1px solid var(--linie);transition:border-color .18s;
}
body.tafel .wochentag{grid-column:1;grid-row:1}
body.tafel .wochenzeile-heute{grid-column:2;grid-row:1}
body.tafel .wochenzeile-text{grid-column:1 / -1;grid-row:2}
body.tafel a.wochenzeile:hover{background:var(--flaeche);border-color:var(--gold)}
body.tafel .wochentag{
  background:none;padding:0;border-radius:0;min-width:0;text-align:left;
  font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinte);
}
body.tafel .wochentag em{
  font-family:Jost,sans-serif;font-style:normal;font-size:12.5px;font-weight:500;
  letter-spacing:.06em;color:var(--tinte-3);margin-left:8px;
}
body.tafel .wochenzeile-text{
  font-family:Jost,sans-serif;font-size:13.5px;line-height:1.55;font-weight:400;color:var(--tinte-2);
}
body.tafel .wochenzeile-heute{
  display:inline-block;background:none;padding:0;border-radius:0;color:var(--gold-schrift);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
body.tafel .wochenzeile.ist-heute{border-color:var(--gold);font-weight:400}
body.tafel .rueckblick summary{font-family:var(--serif);font-size:18px;color:var(--gold-schrift)}
body.tafel .musterliste li{border-radius:0}
body.tafel .fliesstext{font-family:var(--serif);font-size:19px;line-height:1.6;font-weight:400;color:var(--tinte)}

/* Auch in der Nähe (auf der Lokalseite: drei Häuser mit Menü) */
body.tafel .lokalraster .nachbarn{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0;padding:0;border:none}
body.tafel .nachbar{
  flex-direction:column;align-items:flex-start;gap:6px;padding:20px 22px;border-radius:0;
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:none;
}
body.tafel .nachbar:hover{transform:none;box-shadow:none;border-color:var(--gold)}
body.tafel .nachbar-marke{display:none}
body.tafel .nachbar-text strong{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:0}
body.tafel .nachbar-text .leise{white-space:normal;font-size:13.5px;color:var(--tinte-2)}
body.tafel .nachbar-preis{font-family:var(--serif);font-size:15px;color:var(--gold-schrift)}

/* Rechte Spalte */
body.tafel .lokalraster-rand{padding-top:0}
@media (min-width:900px){ body.tafel .lokalraster-rand{padding-top:124px;top:90px} }
body.tafel .lokalraster-rand > .abschnitt{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;padding:22px 24px;margin-bottom:16px;
}
body.tafel .lokalraster-rand > .abschnitt-titel,
body.tafel .lokalraster-rand .abschnitt-titel{
  font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinte);
}
body.tafel .lokalraster-rand .abschnitt-titel::after{display:none}
body.tafel .abschnitt--merken{display:none}   /* Merken steht im Kopf */
body.tafel .abschnitt--besuch{display:block}
body.tafel .zeitenliste{font-size:14px;color:var(--tinte-2)}
body.tafel .zeitenliste > div > span:last-child{font-family:var(--serif)}
body.tafel .zeitenliste .ist-heute{color:var(--tinte)}
body.tafel .zeitenliste .jetzt{color:var(--gruen)}
body.tafel .randadresse{font-size:14px}
body.tafel .karte{border-radius:0}
body.tafel .melden-knopf{
  width:100%;justify-content:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);
  background:none;border:none;text-decoration:none;
}
body.tafel .abschnitt--melden{padding:14px 24px}
body.tafel .kartenseite{border-radius:0}
body.tafel .randlinks a{color:var(--tinte-2)}

/* -------------------------------------------------------------- Fuß */
/* Unten spiegelt oben: die letzte Tafel bekommt Luft, dann kommt die dunkle
   Fläche, und der App-Kasten ragt genauso weit hinein wie die Tafeln oben. */
/* flow-root, sonst zieht der negative Rand des App-Kastens den ganzen Fuß mit
   nach oben, statt den Kasten in die helle Fläche ragen zu lassen. */
body.tafel .fuss{background:var(--tief);color:rgba(255,255,255,.75);border-top:none;margin-top:110px;display:flow-root}
/* Ohne App-Kasten ragt nichts heraus — dann genügt der halbe Abstand. */
body.tafel .fuss:has(.appkasten[hidden]){margin-top:64px}
body.tafel .fuss-in{max-width:1180px;padding:36px 24px 44px}
/* Unter 820px entfällt der App-Kasten — dann ragt nichts mehr aus dem Fuß
   heraus, und der große Vorlauf wäre nur noch Leere. */
@media (max-width:820px){
  body.tafel .fuss,body.tafel .fuss:has(.appkasten[hidden]){margin-top:48px}
}
@media (max-width:640px){
  body.tafel .fuss,body.tafel .fuss:has(.appkasten[hidden]){margin-top:36px}
  body.tafel .fuss-in{padding:28px 16px 32px}
}
body.tafel .fuss .marke-name{font-size:19px}
body.tafel .fuss-text{color:rgba(255,255,255,.6);font-size:13.5px}
body.tafel .fuss-links{font-size:12px;letter-spacing:.1em;text-transform:uppercase;gap:10px}
body.tafel .fuss-links a{color:rgba(255,255,255,.75)}
body.tafel .fuss-links a:hover{color:var(--gold)}
body.tafel .sprachwahl a{border-radius:0;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
body.tafel .sprachwahl a.aktiv{background:var(--gold);border-color:var(--gold);color:var(--tief)}
body.tafel .appkasten{
  max-width:1132px;margin:-48px auto 10px;border-radius:0;border:none;background:#fff;color:#1E2622;
  box-shadow:var(--s3);position:relative;z-index:1;padding:26px 32px;
}
body.tafel .appkasten-text strong{font-family:var(--serif);font-size:22px;font-weight:600}
body.tafel .appkasten-text p{color:#525E59}
body.tafel .appkasten-anleitung{color:#525E59}
body.tafel .appkasten-qr img{border-radius:0}
body.tafel .appkasten-qr span{color:#66716C}
body.tafel .appband{border-radius:0;background:var(--tief);color:#fff;border:none;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
body.tafel .appband > .ic{color:var(--gold)}
body.tafel .appband-text strong{color:#fff}
body.tafel .appband-zu{color:rgba(255,255,255,.7)}

/* Meldungen, Dialoge, Kleinkram */
body.tafel .meldung{border-radius:0}
body.tafel .dialog{border-radius:0;font-family:Jost,sans-serif}
body.tafel .dialog h2{font-size:24px}
body.tafel .hinweisblock{border-radius:0}
body.tafel .feld input,body.tafel .feld select,body.tafel .feld textarea{border-radius:0;font-family:Jost,sans-serif}
body.tafel .held .gross{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
body.tafel .kursiv{font-family:var(--schreib);font-style:normal;font-size:1.05em;color:var(--gold-schrift)}
body.tafel .ortkarte,body.tafel .infokarte,body.tafel .kartenblock{border-radius:0}
body.tafel .ortkarte-name{font-family:var(--serif);font-weight:600;letter-spacing:0}

/* Drucken: die dunkle Fläche darf keine Tinte kosten */
/* ------------------------------------------- „Mein Lieblingslokal fehlt" */
/* Eine weiße Tafel wie die Lokale darüber, aber ohne Kerbe: Sie gehört zur
   Liste, ist aber kein Haus. Zugeklappt eine Zeile, aufgeklappt drei Felder. */
body.tafel .wunschblock{max-width:860px;margin:36px auto 0}
body.tafel .wunsch{background:var(--flaeche);box-shadow:var(--s3);padding:22px 32px}
body.tafel .wunsch summary{
  list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 16px;justify-content:center;text-align:center;
}
body.tafel .wunsch summary::-webkit-details-marker{display:none}
body.tafel .wunsch-frage{font-family:var(--serif);font-size:21px;color:var(--tinte)}
body.tafel .wunsch-ruf{
  font-family:Jost,sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-schrift);display:inline-flex;align-items:center;gap:6px;
}
body.tafel .wunsch-ruf .ic{transition:transform .25s cubic-bezier(.2,.75,.3,1)}
body.tafel .wunsch summary:hover .wunsch-ruf .ic{transform:translateX(5px)}
body.tafel .wunsch[open] summary{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--linie)}
body.tafel .wunsch-zeilen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body.tafel .wunsch-formular .feld span{
  display:block;font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);margin-bottom:5px;
}
body.tafel .wunsch-formular input{
  width:100%;border:1px solid var(--linie-2);border-radius:0;padding:11px 13px;
  font-family:Jost,sans-serif;font-size:15px;background:var(--flaeche);color:var(--tinte);
}
body.tafel .wunsch-formular input:focus{outline:2px solid var(--gold);outline-offset:-2px}
body.tafel .wunsch-formular .knopf{margin-top:16px}
body.tafel .wunsch-fuss{margin:10px 0 0;font-size:12.5px}
@media (max-width:760px){
  body.tafel .wunsch{padding:18px 20px}
  body.tafel .wunsch-zeilen{grid-template-columns:minmax(0,1fr)}
  body.tafel .wunsch-frage{font-size:18px}
}

/* ------------------------------------------------------- Bewegung */
/* Die Seite soll leben, ohne zu zappeln: alles hebt sich aus derselben
   Richtung herein — von unten, leicht verkleinert — und nichts dauert
   länger als eine Dreiviertelsekunde. Wer Bewegung abbestellt hat, sieht
   die fertige Seite sofort (ganz unten in diesem Block). */

/* Der Kopf baut sich Zeile um Zeile auf. */
@keyframes kopf-auf{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:none}
}
body.tafel .tafelkopf .vorzeile,
body.tafel .tafelkopf h1,
body.tafel .tafelkopf .datumzeile,
body.tafel .tafelkopf .schnellsuche,
body.tafel .tafelkopf .tagwahl,
body.tafel .tafelkopf .werkzeugzeile,
body.tafel .tafelkopf--lokal .monogramm,
body.tafel .tafelkopf--lokal .lokalkopf-fuss,
body.tafel .tafelkopf--lokal .kopfmerkmale{
  animation:kopf-auf .66s cubic-bezier(.2,.75,.3,1) both;
}
body.tafel .tafelkopf .vorzeile,
body.tafel .tafelkopf--lokal .monogramm{animation-delay:.05s}
body.tafel .tafelkopf h1{animation-delay:.13s}
body.tafel .tafelkopf .datumzeile,
body.tafel .tafelkopf--lokal .lokalkopf-fuss{animation-delay:.21s}
body.tafel .tafelkopf .schnellsuche{animation-delay:.29s}
body.tafel .tafelkopf .tagwahl,
body.tafel .tafelkopf--lokal .kopfmerkmale{animation-delay:.37s}
body.tafel .tafelkopf .werkzeugzeile{animation-delay:.45s}

/* Die Tafeln kommen beim Scrollen herein. Den Anfangszustand setzt erst das
   Skript (html.einblenden) — ohne JavaScript steht alles sofort da. */
html.einblenden body.tafel .lokalkarte,
html.einblenden body.tafel .menuekarte,
html.einblenden body.tafel .abschnitt{
  opacity:0;transform:translateY(28px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.3,1),box-shadow .3s ease;
  transition-delay:calc(var(--reihe,0) * .09s);
}
html.einblenden body.tafel .lokalkarte.ist-da,
html.einblenden body.tafel .menuekarte.ist-da,
html.einblenden body.tafel .abschnitt.ist-da{opacity:1;transform:none}

/* Beim Überfahren hebt sich eine Tafel eine Spur an. */
body.tafel .lokalkarte{
  position:relative;transition:transform .3s cubic-bezier(.2,.75,.3,1),box-shadow .3s ease;
}
/* Seit die Tafeln aneinanderstoßen, muss die angehobene nach vorn — sonst
   schöbe sie sich unter ihre Nachbarin. */
body.tafel .lokalkarte:hover{
  transform:translateY(-4px);z-index:2;
  box-shadow:var(--s3),0 30px 60px -40px rgba(15,26,22,.55);
}

/* Knöpfe und Kacheln: der Rand kommt nicht nur an, er wandert ein Stück. */
body.tafel .tagwahl-tag{transition:border-color .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.75,.3,1),background .2s ease}
body.tafel .tagwahl-tag:hover{transform:translateY(-2px)}
body.tafel .filterknopf,body.tafel .werkzeugzeile .knopf,body.tafel .sortierwahl{
  transition:border-color .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.75,.3,1),background .2s ease;
}
body.tafel .filterknopf:hover,body.tafel .werkzeugzeile .knopf:hover,body.tafel .sortierwahl:hover{transform:translateY(-2px)}

/* Der Pfeil bei „Zum Lokal" läuft mit. */
body.tafel .tafel-weiter .ic{transition:transform .25s cubic-bezier(.2,.75,.3,1)}
body.tafel .tafel-weiter:hover .ic{transform:translateX(5px)}

/* Gemerkt: das Herz macht einen kleinen Satz. */
@keyframes herz-pocht{
  0%{transform:scale(1)} 35%{transform:scale(1.28)} 60%{transform:scale(.94)} 100%{transform:scale(1)}
}
body.tafel .merken.ist-gemerkt .ic{animation:herz-pocht .45s ease-out}

@media (prefers-reduced-motion:reduce){
  body.tafel .tafelkopf .vorzeile,body.tafel .tafelkopf h1,body.tafel .tafelkopf .datumzeile,
  body.tafel .tafelkopf .schnellsuche,body.tafel .tafelkopf .tagwahl,body.tafel .tafelkopf .werkzeugzeile,
  body.tafel .tafelkopf--lokal .monogramm,body.tafel .tafelkopf--lokal .lokalkopf-fuss,
  body.tafel .tafelkopf--lokal .kopfmerkmale,body.tafel .merken.ist-gemerkt .ic{animation:none}
  body.tafel .lokalkarte:hover,body.tafel .tagwahl-tag:hover,body.tafel .filterknopf:hover,
  body.tafel .werkzeugzeile .knopf:hover,body.tafel .sortierwahl:hover,
  body.tafel .tafel-weiter:hover .ic{transform:none}
}

@media print{
  body.tafel .tafelkopf{background:none;color:#000;padding:0 0 20px;margin:0}
  body.tafel .kopfzier,body.tafel .werkzeugzeile,body.tafel .schnellsuche,body.tafel .tagwahl{display:none}
  body.tafel .tafelkopf h1,body.tafel .tafelkopf .datumzeile{color:#000}
  body.tafel .lokalkarte,body.tafel .menuekarte{box-shadow:none;border:1px solid #ccc;-webkit-mask:none;mask:none;margin-top:0}
  body.tafel .lokalliste{margin-top:0}
}

/* ------------------------------------------------ Nachbesserungen nach dem ersten Blick */
/* Der Merken-Knopf im Kopf erbt von .merken (dem Herz auf der Tagesliste) feste Maße — hier ist er ein Knopf mit Wort. */
body.tafel .handlung--merken,body.tafel .handlung--merken.ist-gemerkt{
  width:auto;height:48px;padding:0 24px;border-radius:0;display:inline-flex;align-items:center;gap:8px;
}
body.tafel .handlung--merken .merken-wort{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
/* Gerichtzeile: der Name darf in sich umbrechen, Preis und Knöpfe bleiben
   daneben. Umbrechen darf die Zeile aber schon — darunter steht die
   Zusatzzeile mit Beschreibung und Kennzeichen. (Hier stand einmal
   flex-wrap:nowrap; das war nötig, solange die Beschreibung im Namen saß.) */
body.tafel .gericht-name{flex:0 1 auto;min-width:0}
body.tafel .fuehrung{flex:1 1 24px}
body.tafel .menuekarte .daumen,body.tafel .menuekarte .merken--klein{flex:0 0 auto;align-self:center}
/* Die Wochenkarte trägt ihre Überschrift außen — innen keine zweite Linie */
body.tafel .menuekarte--woche .wochenteil{border-top:none;padding-top:0;margin-top:0}
body.tafel .wochenzeile.ist-heute .wochentag{background:none;color:var(--gold)}
body.tafel .wochengetraenk .preis{color:var(--gold)}
/* Daumen und Herz neben dem Preis bleiben auf der ersten Zeile, auch wenn darunter eine Beschreibung steht */
body.tafel .menuekarte .daumen,body.tafel .menuekarte .merken--klein{align-self:flex-start;margin-top:2px}