/* =============================================================================
   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:#0A0A0A; --tief-2:#171717;
  --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{
    /* Auch die Tafel wird im Dunkeln schwarz statt dunkelgrün: Gold auf
       Schwarz ist die ruhigere Karte, und dieselbe Seite soll im Editor
       und beim Gast nicht zwei verschiedene Grundfarben haben. */
    --grund:#0A0A0A; --flaeche:#121212; --flaeche-2:#1A1A1A; --flaeche-3:#232323; --zebra:#121212;
    --tinte:#EFEDE6; --tinte-2:#BCBAB3; --tinte-3:#9C9A93;
    --linie:#252525; --linie-2:#383838;
    --gold:#D4B26A; --gold-schrift:#D4B26A; --gold-sanft:#2A2616;
    --akzent:#D4B26A; --akzent-tief:#E2C27C; --akzent-auf:#141210; --akzent-schrift:#D4B26A; --akzent-sanft:#2A2616;
    --gruen:#7BD09A; --gruen-sanft:#1B1B1B;
  }
}
:root[data-theme="dark"] body.tafel{
  --grund:#0A0A0A; --flaeche:#121212; --flaeche-2:#1A1A1A; --flaeche-3:#232323; --zebra:#121212;
  --tinte:#EFEDE6; --tinte-2:#BCBAB3; --tinte-3:#9C9A93;
  --linie:#252525; --linie-2:#383838;
  --gold:#D4B26A; --gold-schrift:#D4B26A; --gold-sanft:#2A2616;
  --akzent:#D4B26A; --akzent-tief:#E2C27C; --akzent-auf:#141210; --akzent-schrift:#D4B26A; --akzent-sanft:#2A2616;
  --gruen:#7BD09A; --gruen-sanft:#1B1B1B;
}
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:0;
  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:0}
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}
  /* Auf einem Telefon lief die Kopfleiste 14 Pixel über den Rand hinaus:
     Marke, zwei Wortlinks und ein Knopf passen nebeneinander nicht auf
     390 Pixel. Der Knopf bleibt — er ist der Weg hinein —, die beiden
     Wortlinks stehen ohnehin auf jeder Seite im Fuß. */
  body.tafel .kopf-nav{gap:12px}
  body.tafel .kopf-nav a:not(.knopf):not(.kopf-suche):not(.darstellungsknopf){display:none}
  body.tafel .kopf-nav a.knopf{padding:8px 12px;font-size:11px;letter-spacing:.06em}
}

/* ---------------------------------------------------------------- Knöpfe */
body.tafel .knopf{
  border-radius:0;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}
/* Der Ortsname in der Frage: Schreibschrift in Gold, ein wenig größer, weil
   die Schreibschrift kleiner wirkt als die Serife daneben */
body.tafel .tafelkopf h1 .ortsname{font-family:var(--schreib);font-weight:400;font-size:1.12em;color:var(--gold);letter-spacing:0;padding:0 .04em}
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:0;border:1px solid var(--linie);background:var(--flaeche);
  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:var(--tinte)}
body.tafel .tafelkopf .schnellsuche input[type=search]::placeholder{color:var(--tinte-3)}
body.tafel .tafelkopf .schnellsuche .ic{color:var(--tinte-3)}
body.tafel .suchvorschlaege{border-radius:0;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){
  /* Mindestens so breit wie die Tageswahl — und wenn ein Knopf mehr da ist
     (die Karte, sobald Häuser Koordinaten haben), so breit wie nötig statt
     umzubrechen: Der Filterknopf allein in einer Zeile sah verloren aus. */
  body.tafel .werkzeugzeile{width:fit-content;min-width:min(100%,820px);max-width:100%;margin:0 auto;flex-wrap:nowrap}
  body.tafel .werkzeugzeile .schnellwahl{flex:1 1 auto}
  body.tafel .werkzeugzeile .schnellwahl > .knopf:not(.knopf--symbol),
  body.tafel .werkzeugzeile .anzeigewahl,
  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}
/* Die Anzeige-Wahl: ein Knopf, darunter drei Haken. Der Knopf ist ein
   summary im Gewand der übrigen Umrissknöpfe; das Feld hängt darunter. */
body.tafel .anzeigewahl{position:relative;display:flex}
body.tafel .anzeigewahl summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;width:100%;justify-content:center;user-select:none}
body.tafel .anzeigewahl summary::-webkit-details-marker{display:none}
body.tafel .anzeigewahl[open] summary,body.tafel .anzeigewahl summary.ist-aktiv{border-color:#fff;color:#fff}
body.tafel .anzeigewahl summary.ist-aktiv{background:#fff;color:var(--tief)}
body.tafel .anzeigezahl{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--tief);color:var(--gold);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
/* Das Feld liegt fest im Fenster, nicht im Kopf: Der Kopf schneidet ab
   (overflow:hidden), und die erste Tafel ragt in ihn hinein. Wo es hängt,
   rechnet das Skript beim Aufklappen aus dem Knopf aus. */
body.tafel .anzeigewahl-feld{position:fixed;top:0;left:0;z-index:40;min-width:250px;display:grid;gap:2px;padding:8px;background:var(--tief-2);border:1px solid rgba(255,255,255,.3);box-shadow:0 12px 30px rgba(0,0,0,.35)}
body.tafel .anzeigewahl-feld label{display:flex;align-items:center;gap:10px;padding:8px 10px;color:#fff;font-size:13px;letter-spacing:.02em;cursor:pointer;white-space:nowrap}
body.tafel .anzeigewahl-feld label:hover{background:rgba(255,255,255,.08)}
body.tafel .anzeigewahl-feld label .ic{color:rgba(255,255,255,.6);flex:none}
body.tafel .anzeigewahl-feld input{accent-color:var(--gold);width:16px;height:16px;margin:0;flex:none}
@media (max-width:560px){
  body.tafel .anzeigewahl-feld{left:16px !important;right:16px;min-width:0}
}
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}
}

/* Die Filter stehen als weiße Tafel in einem Fenster über der Seite */
body.tafel .filtermenue{
  margin:auto;max-width:860px;border-radius:0;border:none;
  padding:22px 34px 24px;box-shadow:var(--s3);font-family:Jost,sans-serif;
}
body.tafel .filtermenue .filterfuss{border-top-color:var(--linie)}
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} }

/* ------------------------------------------------- Bild über der Tafel
   Hat ein Haus ein eigenes Bild hinterlegt, sitzt es als Kopf auf der Tafel:
   ein eingeklebtes Foto, darunter die Kerbe, wo das Weiß anfängt. Dann
   braucht die Tafel ihre eigene Polsterung nicht mehr — das Bild geht bis an
   die Kante, und der Text bekommt sie im Körper. */
body.tafel .lokalkarte:has(.kartenbild){padding:0;-webkit-mask:none;mask:none;background:none}
body.tafel .lokarte-koerper{position:relative}
/* Polsterung und Kerbe wandern nur dann an den Körper, wenn ein Bild darüber
   sitzt. Ohne Bild trägt die Tafel selbst beides — sonst stünden Polsterung
   und Kerbe zweimal da, und der Kopf begann 70 Pixel unter der Kante. */
body.tafel .lokalkarte:has(.kartenbild) > .lokarte-koerper{
  background:var(--flaeche);padding:34px 40px 30px;
  /* Dieselbe Kerbe wie an der Tafel, jetzt am Körper: unter dem Bild und am
     unteren Rand. */
  -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:has(.kartenbild){box-shadow:var(--s3)}
body.tafel .kartenbild{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--tief);
}
body.tafel .kartenbild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.75,.3,1)}
body.tafel .lokalkarte:hover .kartenbild img{transform:scale(1.03)}
/* Ob offen ist, steht auf dem Bild — das will man vor dem Lesen wissen. */
body.tafel .bildpille{
  position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;background:rgba(10,12,8,.72);backdrop-filter:blur(6px);
  font-family:Jost,sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
}
body.tafel .bildpille i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
body.tafel .bildpille.ist-offen i{background:#7BC49A}
body.tafel .bildpille.ist-offen{color:#CFEBDB}
/* Und der Knopf zum Merken sitzt in der anderen Ecke. */
body.tafel .bildherz{
  position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  background:rgba(10,12,8,.72);backdrop-filter:blur(6px);color:rgba(255,255,255,.9);
  transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.75,.3,1);
}
body.tafel .bildherz:hover{background:var(--gold);color:var(--tief);transform:scale(1.06)}
body.tafel .bildherz.ist-gemerkt{background:var(--gold);color:var(--tief)}
body.tafel .bildherz.ist-gemerkt .ic{fill:currentColor}
body.tafel .bildherz .ic{font-size:17px}
@media (max-width:640px){
  body.tafel .lokalkarte:has(.kartenbild) > .lokarte-koerper{padding:28px 22px 26px}
  body.tafel .kartenbild{aspect-ratio:3/2}
}

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}
/* Lange Karten: eingeklappte Zeilen (und ihr Gangwort) sind weg, bis der
   Gast aufklappt. Der Knopf steht als leise Zeile unter den drei sichtbaren. */
body.tafel .gerichte--klappbar:not(.ist-offen) .ist-eingeklappt{display:none}
body.tafel .mehrzeigen{
  display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 0;border:0;background:none;cursor:pointer;
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-schrift);
}
body.tafel .mehrzeigen .ic{font-size:14px}
body.tafel .mehrzeigen:hover{color:var(--tinte)}
body.tafel .mehrzeigen:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.tafel .gerichte--klappbar.ist-offen + .mehrzeigen .ic{transform:rotate(45deg)}
/* 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:19px;line-height:1.3;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}

/* Welcher Gang ist das? Das Wort steht klein und gesperrt über der Zeile —
   dieselbe Handschrift wie „Lokal" über dem Hausnamen, eine Ebene tiefer.
   Es erscheint nur dort, wo der Gang wechselt: So gliedert es die Karte,
   statt sie zu füllen. */
body.tafel .gangwort{
  display:block;font-family:Jost,sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-3);
  margin-bottom:0;
}
/* Die Hauptspeise ist das, weswegen der Gast kommt — sie bleibt groß. Suppe,
   Salat, Vorspeise, Beilage und Dessert stehen eine Spur kleiner, damit auf
   einen Blick zu sehen ist, was das Hauptgericht ist. */
body.tafel .gericht--neben .gericht-name{font-size:16.5px;color:var(--tinte-2)}
body.tafel .gericht--neben .preis{font-size:16.5px}
body.tafel .gericht--neben{padding:10px 0}
body.tafel .gericht--neben .gangwort{opacity:.8}
/* 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:19px;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;
}
/* Der alte Aufpreis mit vorangestelltem „dazu" — steht noch auf der
   Lokalseite und in den Wochenangeboten. */
body.tafel .preis--auf{
  font-size:17px;color:var(--gold-schrift);opacity:.9;white-space:nowrap;
  min-width:110px;
}
body.tafel .preis--auf em{
  font-family:Jost,sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;font-style:normal;color:var(--tinte-3);margin-right:4px;
}

/* Getränke sind der zweite Teil der Karte, kein Aufpreis: eine eigene Gruppe
   mit Abstand darüber, das Glas als Zeichen. */
/* Wann es das Menü gibt — neben der Öffnungszeit, nicht statt ihr. In
   normaler Schreibweise: Versalien machten aus der Auskunft eine Ansage. */
body.tafel .menuezeit{color:var(--tinte-3);text-transform:none;letter-spacing:0}
/* Das Getränk steht über der Karte: Es gehört zum Menü, und wer liest, was es
   heute gibt, will zuerst wissen, ob eines dabei ist. Oben braucht es keine
   Linie über sich — die Tafel fängt dort an. */
body.tafel .getraenkeblock{
  /* Über dem ersten Schild steht die Linie unter der Adresse — sie braucht
     Luft, sonst sitzt das Getränk im Kopf des Hauses. */
  margin:22px 0 26px;
  display:flex;flex-direction:column;gap:6px;
}
/* Die Getränkemarke ist keine eigene Marke: Sie ist dieselbe wie
   „Mittagsmenü" und „Menü erweitern", nur mit dem Glas davor. Sie stand
   einmal als eigene Regel da — und wurde bei jeder Änderung an der einen
   vergessen. Jetzt trägt der Block die Klasse .abschnittsmarke. */
body.tafel .getraenk{display:flex;align-items:baseline;gap:0 12px;font-size:16px;color:var(--tinte-2)}
body.tafel .getraenk-name{flex:0 1 auto;font-family:Jost,sans-serif;color:var(--tinte)}
body.tafel .getraenk .fuehrung{flex:1 1 20px;min-width:16px}
body.tafel .getraenk b{
  font-family:var(--serif);font-weight:500;font-size:17px;color:var(--gold-schrift);
  min-width:74px;text-align:right;
}
/* Die Zeile aus der Hausregel („0,3 l Mineral + 2,90 €") stand grau und klein
   da und war leicht zu überlesen — dabei ist sie oft die einzige Auskunft zum
   Getränk. Sie liest sich jetzt wie eine Gerichtzeile, und die Zahl darin
   trägt die Serifenschrift der übrigen Preise. */
body.tafel .getraenk--wort{color:var(--tinte-2);font-size:16px;font-family:Jost,sans-serif}
body.tafel .getraenk--wort b{
  font-family:var(--serif);font-size:17px;font-weight:500;color:var(--gold-schrift);
}

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{
  /* Die Beschreibung gehört zum Namen darüber — sie rückt nah an ihn heran.
     Mit vier Pixeln Abstand und weiter Zeile stand sie wie ein eigener
     Absatz da. */
  display:block;margin-top:0;
  font-family:Jost,sans-serif;font-size:13.5px;line-height:1.25;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:17px}
  body.tafel .gericht--neben .gericht-name,body.tafel .gericht--neben .preis{font-size:15px}
  body.tafel .getraenk,body.tafel .getraenk b{font-size:15px}
}

/* „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}
/* Unter den Pillen war es eng: 22 Pixel bis zur Marke „Mittagsmenü", und
   die Pillen sind selbst 30 hoch. Zwölf Pixel Polster mehr — als Polster,
   nicht als Rand, weil ein Rand mit dem Abstand der Marke verschmölze. */
body.tafel .preisstufen--oben{padding-bottom:12px}

/* 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}
/* Als Schild — auf der Tafel und im Widget: dieselbe Marke, derselbe Rahmen
   wie bei Getränken und Menü erweitern. Die Schreibschrift-Überschrift und
   die Linie darüber fallen weg; das Getränk der Woche steht als Zeile im
   Schild statt als dunkle Pille. */
body.tafel .wochenteil--schild{
  margin-top:32px;padding:0 15px 15px;border:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie));
  display:flex;flex-direction:column;gap:0;
}
body.tafel .wochenteil--schild > .abschnittsmarke.wochenteil-kopf{
  justify-content:flex-start;font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinte-2);transform:translateY(-50%);margin-bottom:2px;
}
body.tafel .wochenteil--schild > .abschnittsmarke.wochenteil-kopf .ic{display:block;font-size:15px}
body.tafel .wochenteil--schild .gericht--woche{padding:11px 0 12px}
body.tafel .wochenteil--schild .gericht--woche + .gericht--woche{border-top:1px solid color-mix(in srgb,var(--linie-2) 55%,transparent)}
body.tafel .wochenteil--schild .wochengetraenk{
  background:none;color:var(--tinte-2);margin-top:0;padding:11px 0 0;gap:0 10px;
  font-family:Jost,sans-serif;font-size:16px;
}
body.tafel .wochenteil--schild .gericht--woche + .wochengetraenk{border-top:1px solid color-mix(in srgb,var(--linie-2) 55%,transparent)}
body.tafel .wochenteil--schild .wochengetraenk .ic{color:var(--gold-schrift);font-size:15px}
body.tafel .wochenteil--schild .wochengetraenk-text strong{color:var(--tinte);font-weight:500}
body.tafel .wochenteil--schild .wochengetraenk-text em{color:var(--tinte-3)}
body.tafel .wochenteil--schild .wochengetraenk .preis{
  font-family:var(--serif);font-size:17px;font-weight:500;color:var(--gold-schrift);min-width:74px;text-align:right;
}

/* 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.
   Er liegt in einem eigenen, leicht grauen Streifen bis an die Kanten der
   Tafel: Das trennt die Wege („zum Lokal", „merken") von der Karte, die
   darüber steht. Die Kerbe der Tafel schneidet den Streifen unten mit — die
   Maske liegt darüber. Die negativen Seitenränder heben die Polsterung der
   Tafel auf; sie ist oben wie unten dieselbe, mit und ohne Bild. */
body.tafel .tafel-fuss{
  /* Unten deutlich mehr Polster: Die Kerbe der Maske schneidet 22 Pixel
     tief in die Karte — mit 13 Pixeln Polster saß „Teilen" genau darin. */
  margin:24px -40px -30px;padding:15px 40px 38px;
  /* Eine Spur kräftiger als der Grund der Seite: Sonst verschwindet die
     Kerbe, die die Maske unten hineinschneidet — grau auf grau sieht man
     keinen Halbkreis. */
  background:var(--flaeche-3);border-top:1px solid var(--linie);
  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}
/* Auf dem grauen Streifen braucht das Wort mehr Gewicht: Auf Weiß trug
   Tinte-3 noch 4,6 — auf dem Streifen nur 4,18 (gemessen). */
body.tafel .tafel-fuss .merken{color:var(--tinte-2)}
/* Das Wort bleibt dunkel (Kontrast), nur das Herz ist goldbraun */
body.tafel .tafel-fuss .merken .ic{color:var(--gold-schrift)}
body.tafel .tafel-fuss .merken:hover{color:var(--tinte)}
body.tafel .tafel-fuss .merken.ist-gemerkt{color:var(--gold-schrift)}
body.tafel .tafel-fuss .merken.ist-gemerkt .ic{fill:currentColor}
@media (max-width:640px){
  body.tafel .tafel-fuss{margin:20px -22px -26px;padding:13px 22px 36px;gap:16px}
}

/* 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}
/* Flächen, nicht Weiß: Im dunklen Modus stand hier ein weißes Blatt auf
   schwarzem Grund. Eine Linie hält den Kasten vom Grund getrennt, wo
   der Schatten nichts mehr ausrichtet. */
body.tafel .nichts{background:var(--flaeche);border:1px solid var(--linie);
  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)}
/* Das eigene Bild des Hauses hinter dem Kopf: gedaempft auf ein Drittel und
   nach unten ausgeblendet, damit Name und Knoepfe darauf lesbar bleiben. */
body.tafel .tafelkopf--lokal .kopfbild{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;opacity:.35;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 62%,transparent 100%);
}
/* Mit eigenem Bild tritt das Zierwerk zurueck — zwei Hintergruende
   uebereinander sind einer zu viel. */
body.tafel .tafelkopf--lokal.hat-kopfbild .kopfzier{opacity:.25}
body.tafel .tafelkopf--lokal .tafelkopf-in{position:relative;z-index:1}

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)}
/* Das Herz stand ganz rechts in der Zeile — dafür sorgte hier ein order:3.
   Seit es hinter dem Namen steht, gilt die Reihenfolge des Quelltexts. */
body.tafel .merken--klein{border-radius:0}
/* 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:var(--flaeche);
  border:1px solid var(--linie);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;
  align-content:start;
  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,body.tafel .wochenzeile .kleinkarte{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);
}
/* Die kleine Gliederung der Nebenansichten („Diese Woche", „Auch in der
   Nähe"): Gang links in einer schmalen Spalte, Gericht rechts, eine Zeile je
   Gericht. Gestapelt — Gang über dem Gericht wie auf der Tageskarte — wurden
   aus vier Gerichten acht Zeilen; das war zu schwer für eine Nebenansicht. */
body.tafel .kleinkarte{display:flex;flex-direction:column;gap:0;margin-top:4px}
/* Eine Haarlinie zwischen den Gerichten: In der Wochenliste stehen mehrere
   Gänge untereinander, und mehrzeilige Namen liefen ohne Linie ineinander. */
body.tafel .kleingericht + .kleingericht{
  margin-top:5px;padding-top:5px;
  border-top:1px solid color-mix(in srgb,var(--linie) 65%,transparent);
}
body.tafel .kleingericht{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 10px;align-items:baseline;
  font-family:Jost,sans-serif;font-size:13.5px;line-height:1.45;color:var(--tinte-2);
}
body.tafel .kleingericht.ist-haupt{color:var(--tinte);font-weight:500}
/* Der Beisatz unter dem Namen, in der Spalte des Gerichts — leise, damit
   der Name die Zeile führt und die Woche trotzdem schmal bleibt. */
body.tafel .kleinzusatz{display:block;font-size:.88em;font-weight:400;color:var(--tinte-2);line-height:1.35;margin-top:1px}
body.tafel .kleingang{
  font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.14em;line-height:1.9;
  text-transform:uppercase;color:var(--tinte-3);
}
/* Erst auf sehr schmalen Geräten wird die Spalte zur Zeile davor — sonst
   bleibt für den Namen zu wenig übrig. */
@media (max-width:360px){
  body.tafel .kleingericht{grid-template-columns:minmax(0,1fr)}
  body.tafel .kleingang{line-height:1.5}
}
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ü) */
/* Die Nachbarkarten tragen jetzt die aufgeteilte Speisenliste — dafür
   brauchen sie mehr Breite als für zwei Namen hintereinander. */
body.tafel .lokalraster .nachbarn{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,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-text .kleinkarte{margin-top:6px}
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}
/* Auch auf den Gastseiten ein Kasten, nur in der Handschrift des Hauses:
   scharfe Kanten, Jost, und das Rot als Kante statt als Fläche. */
body.tafel .melden-knopf{
  width:100%;border-radius:0;font-family:Jost,sans-serif;font-size:13px;
  background:color-mix(in srgb,var(--rot) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--rot) 34%,transparent);color:var(--rot);
}
body.tafel .melden-knopf strong{font-weight:600;letter-spacing:.01em}
body.tafel .melden-knopf em{font-size:12px;color:var(--tinte-3)}
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}
/* Der Lokalwunsch im Fuß trägt denselben Rahmen wie die Abschnitte der
   Tafel — ein Schildchen auf der Linie, der Rahmen rundherum. Hier steht er
   auf dunklem Grund, also nimmt das Schildchen dessen Farbe auf. */
body.tafel .fusswunsch{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  border:1px solid color-mix(in srgb,var(--gold) 46%,rgba(255,255,255,.22));
  border-radius:0;padding:0 18px 14px;margin:10px auto 0;max-width:38ch;
}
/* Das Schildchen sitzt mittig auf der oberen Linie — alles im Kasten ist
   zentriert, also auch die Marke. */
body.tafel .fusswunsch > .abschnittsmarke{
  position:relative;z-index:1;align-self:center;width:fit-content;line-height:1;
  transform:translateY(-50%);margin:0 0 2px;padding:0 7px;background:var(--tief);
  color:var(--gold);
}
body.tafel .fuss-links{align-items:flex-end;text-align:right}
body.tafel .fusswunsch .wunsch-frage{color:rgba(255,255,255,.82)}
body.tafel .fusswunsch .wunsch-ruf{color:var(--gold)}
/* 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)}
/* Der Kasten stand auf festem Weiß mit fester dunkler Schrift — im dunklen
   Modus war er damit das einzige weiße Feld einer schwarzen Seite. Jetzt
   nimmt er dieselben Töne wie jede andere Fläche, und im Dunkeln hält ihn
   eine Linie vom Grund getrennt, wo der Schatten nichts mehr ausrichtet.
   Nur der QR-Code bleibt auf Weiß: Eine Kamera liest ihn sonst nicht. */
body.tafel .appkasten{
  max-width:1132px;margin:-48px auto 10px;border-radius:0;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--tinte);
  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:var(--tinte-2)}
body.tafel .appkasten-anleitung{color:var(--tinte-2)}
body.tafel .appkasten-qr img{border-radius:0;background:#fff}
body.tafel .handyrahmen-text{font-family:Jost,sans-serif;color:rgba(255,255,255,.72)}
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" */
/* Steht im Fuß, links unten — kein weißer Kasten, sondern zwei Zeilen in der
   Schrift des Fußes: die Frage und der Anstoß. Die Felder öffnen in einem
   Fenster; aufgeklappt haben sie den Fuß dreimal so hoch gemacht. */
/* Der Fuß ist dunkel — also gelten hier helle Farben. Die Tinte-Töne sind
   für den hellen Grund gedacht und wären auf Schwarz nicht zu lesen. */
body.tafel .wunsch-frage{font-family:var(--serif);font-size:16px;color:rgba(255,255,255,.88)}
body.tafel .wunsch-ruf{
  font-family:Jost,sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-schrift);display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;
}
body.tafel .wunsch-ruf .ic{transition:transform .25s cubic-bezier(.2,.75,.3,1)}
body.tafel .wunsch-ruf:hover .ic{transform:translateX(5px)}
/* Im Fenster: heller Grund, also die gewohnten Tinte-Töne. */
body.tafel .wunschfenster .wunsch-zeilen{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
body.tafel .wunschfenster .wunsch-fuss{color:var(--tinte-3)}
/* Die drei Arten als Chips: Der Radioknopf bleibt klein, der Chip so breit
   wie sein Wort — die Feldregeln des Fensters (100 % breit, Blocksatz der
   Beschriftung) gelten hier nicht */
body.tafel .wunschfenster .wunsch-arten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
body.tafel .wunschfenster .wunsch-formular .wunsch-art{display:inline-flex;align-items:center;gap:8px;width:auto;padding:8px 12px;border:1px solid var(--linie-2);border-radius:0;cursor:pointer;white-space:nowrap}
body.tafel .wunschfenster .wunsch-formular .wunsch-art input{width:16px;min-width:16px;height:16px;padding:0;margin:0;flex:none;accent-color:var(--gold)}
body.tafel .wunschfenster .wunsch-formular .wunsch-art span{display:inline;font-size:13.5px;line-height:1;margin:0;color:inherit;text-transform:none;letter-spacing:0}
body.tafel .wunschfenster .wunsch-formular .wunsch-art:has(input:checked){background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
body.tafel .wunschfenster .wunsch-formular textarea{width:100%;min-height:96px;padding:9px 11px;font:inherit;font-size:14px;border:1px solid var(--linie-2);border-radius:0;background:var(--flaeche);color:var(--tinte);resize:vertical}
body.tafel .wunschfenster .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 .wunschfenster .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 .wunschfenster .wunsch-formular input:focus{outline:2px solid var(--gold);outline-offset:-2px}
body.tafel .wunschfenster .wunsch-fuss{margin:10px 0 0;font-size:12.5px}
@media (max-width:760px){
  body.tafel .wunsch-frage{font-size:15px}
}

/* ------------------------------------------------------- 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 .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 .merken--klein{align-self:flex-start;margin-top:2px}

/* ------------------------------------------------ Die Karte des Tages
   Ein eigenes Feld auf der Tafel, mit Überschrift: Vorher lief die Liste in
   die Tafel hinein, und man sah nicht, wo das Menü anfängt. Der Grund ist
   eine Spur wärmer als das Weiß, die Kanten bleiben scharf. */
/* Die Tageskarte steht wieder unmittelbar auf der Tafel: kein Kasten im
   Kasten, kein zweiter Rahmen. Geblieben ist die Aufteilung — das Gangwort
   über der Zeile, die feine Linie zwischen den Gängen, die Getränke
   abgesetzt. Ein Feld mit eigenem Grund und eigener Kante war eine Fläche
   zu viel. */
body.tafel .tageskasten{margin-top:2px}

/* Das Zeichen des Gangs steht in der Zeile darüber, klein neben dem Wort.
   Als Kreis neben dem Namen schob es die Textspalte 46 Pixel nach innen —
   und ein langer Gerichtname brach viermal um. */
body.tafel .gangwort{display:flex;align-items:center;gap:6px}
body.tafel .gangwort .ic{
  font-size:13px;stroke-width:1.5;color:var(--gold-schrift);flex:0 0 auto;
}
/* Bei mehreren Hauptspeisen steht die Nummer klein links neben dem Namen —
   „Hauptspeise" bleibt die Überschrift über beiden. Oben in der Gangzeile
   stand sie zu hoch und sah aus wie ein Teil des Wortes. Die Spalte ist fest,
   damit „01" und „02" untereinander stehen. */
body.tafel .gericht-kopf{
  display:flex;align-items:baseline;gap:9px;min-width:0;flex:0 1 auto;
}
body.tafel .gangnummer{
  flex:0 0 auto;font-family:Jost,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--tinte-3);min-width:17px;
}
/* Die Zeile bleibt eine Zeile: Name links, dann die Führung, rechts die
   Preisangabe und das Herz. Der Name darf dafür schrumpfen und umbrechen —
   ohne min-width:0 schiebt er den Preis aus der Karte. */
body.tafel .gericht-name{min-width:0}
/* Steht eine Nummer vor dem Namen, gehört auch die Zeile darunter
   („Vegetarisch", Allergene, Beschreibung) an den Namen und nicht an den
   linken Rand — sonst hängt sie unter der Nummer in der Luft.
   17px Spalte + 9px Abstand = 26px. */
body.tafel .gericht:has(.gangnummer) > .gericht-zusatz{padding-left:26px}
body.tafel .gericht-zeile > .preis,
body.tafel .gericht-zeile > .merken{flex:0 0 auto}
/* Und der Preis steht immer an derselben Stelle: rechtsbündig in seiner
   Spalte, mit Ziffern gleicher Breite. Bei langen Namen rutschte er sonst
   von Zeile zu Zeile um ein paar Pixel. */
body.tafel .gericht-zeile > .preis{
  text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* „inkludiert" ist keine Zahl und drängt sich nicht vor. */
body.tafel .preis--inklusive,
body.tafel .preis--zzgl{letter-spacing:.12em}
/* Allergenbuchstaben stehen jetzt in der Zusatzzeile. */
body.tafel .gericht-zusatz .allergenzeile{margin-left:0;font-size:10.5px;letter-spacing:.2em}

/* „inkludiert" ist keine Zahl, und der alte Aufpreis („+ 2,00 €") ist keine
   Menüangabe: Beide stehen in der Schrift der Beschriftungen, klein und
   ruhig — sonst liest der Gast sie als zweites Hauptgericht und hält das
   Menü für teurer, als es ist. Der Preis einer Beigabe dagegen ist ein Preis
   wie jeder andere, nur eine Spur kleiner (.preis--neben). */
body.tafel .gericht .preis--inklusive,
body.tafel .gericht .preis--zzgl{
  font-family:Jost,sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinte-3);white-space:nowrap;
  min-width:0;text-align:right;
}
body.tafel .gericht .preis--zzgl{color:var(--gold-schrift)}
/* Eine Beigabe mit eigenem Preis: dieselbe Handschrift wie die Hauptspeise,
   nur kleiner. Kein Wort davor — „zzgl." las sich wie ein Aufschlag auf das
   Hauptgericht und stand dann im Widerspruch zum Kasten darunter. */
body.tafel .gericht .preis--neben{
  font-family:var(--serif);font-size:16.5px;font-weight:500;color:var(--gold-schrift);
  letter-spacing:0;text-transform:none;
}
@media (max-width:640px){ body.tafel .gericht .preis--neben{font-size:15px} }
/* Der Gang gibt hier nicht die Größe vor: „.gericht--neben .preis" hatte
   mehr Gewicht als diese Regel und hat die 12 Pixel auf 17 aufgeblasen —
   deshalb steht „.gericht" davor. */
@media (max-width:640px){
  body.tafel .gericht .preis--inklusive,
  body.tafel .gericht .preis--zzgl{font-size:11px}
}

/* Am Telefon ist die Spalte zu schmal für Name, Preis und Herz in einer
   Zeile: Der Name bekäme 180 px und bräche siebenmal um. Also nimmt er die
   ganze Breite, und Preis und Herz rücken darunter nach rechts. */
/* Am Telefon ist für Name, gestrichelte Führung und Preis in einer Zeile
   kein Platz. Also ein Raster statt Flex: Der Name darf über mehrere Zeilen
   laufen, der Preis bleibt rechts auf der ersten — wie auf einer gedruckten
   Karte. Die Führung fällt weg; sie hätte nichts mehr zu führen. */
@media (max-width:560px){
  body.tafel .gericht-zeile{
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    align-items:baseline;column-gap:8px;
  }
  body.tafel .gericht-zeile > .fuehrung{display:none}
  body.tafel .gericht-zeile > .preis{margin-top:0}
}


/* ------------------------------------------- Das Blatt in der Vorschau
   Die Tafel läuft im Rahmen des Wirt-Bereichs: kein Seitenrand, keine
   Höchstbreite — der Rahmen gibt die Breite vor, und seine Höhe stellt
   sich auf den Inhalt ein. */
body.tafel .inhalt--blatt{max-width:none;padding:0;margin:0}
body.tafel .lokalliste--vorschau{margin:0;grid-template-columns:minmax(0,1fr)}

/* Die Hauptspeise ist die Entscheidung, wohin der Gast geht — sie liegt auf
   einem sehr leichten Grund, der bis an die Kanten der Tafel reicht. Kein
   Kasten, kein Rahmen: nur ein Hauch Fläche, der den Blick zuerst dorthin
   zieht.

   Die Fläche trägt jedes Gericht selbst, nicht der Block um sie herum: Bei
   zwei Hauptspeisen sind es zwei Flächen mit Luft dazwischen — man wählt ja
   zwischen ihnen. Ein Grund über allem machte aus zwei Gerichten einen
   Kasten. */
body.tafel .tageskasten > .gerichte{margin-top:6px}
/* Die Fläche liegt jetzt auf dem ganzen Schild, nicht mehr unter jedem
   Gericht einzeln: Der Abschnitt ist das Feld, das aus der Tafel heraussteht.
   Nur das Wort in der Marke bleibt weiß — es sitzt ja auf der Linie und
   schneidet sie auf.

   Vorher trug jedes Gericht seine eigene Fläche, weil es damals keinen
   Rahmen gab und die Flächen die Gruppe allein zusammenhalten mussten. Jetzt
   hält der Rahmen sie zusammen, und zwischen zwei Hauptspeisen trennt eine
   feine Linie — man wählt ja zwischen ihnen. */
body.tafel .tageskasten > .gerichte,
body.tafel .menuekarte > .gerichte{
  background:color-mix(in srgb,var(--flaeche-3) 42%,transparent);
  gap:0;
}
body.tafel .tageskasten > .gerichte > .gericht,
body.tafel .menuekarte > .gerichte > .gericht{
  /* Seitlich polstert schon das Schild — zwei Pixel mehr hier hätten die
     Preisspalte gegenüber dem Getränk um genau diese zwei verschoben. */
  padding:11px 0 12px;margin:0;background:none;
}
body.tafel .tageskasten > .gerichte > .gericht + .gericht,
body.tafel .menuekarte > .gerichte > .gericht + .gericht{
  border-top:1px solid color-mix(in srgb,var(--linie-2) 55%,transparent);
}

/* ------------------------------------------------- Dazu wählbar
   Was man zum Menü dazunehmen kann. Kein Kasten mit Rahmen mehr: Die Tafel
   hat scharfe Kanten und arbeitet mit feinen Linien und kleinen Versalien —
   eine umrandete Box mit eigenem Grund war ein Fremdkörper darauf. Jetzt ist
   es ein Abschnitt wie „Getränke" darunter: Linie oben, Beschriftung, Inhalt.
   Drei Abschnitte in einer Sprache — Hauptspeise, Dazu wählbar, Getränke. */
body.tafel .preistafel{
  /* Der Rahmen kommt aus der Schild-Regel weiter unten — hier steht nur,
     was diesen Abschnitt von den anderen unterscheidet. Der Abstand nach
     oben ist größer als der des Getränks nach unten, weil dieses Schild
     seine Marke im Block trägt: Sie ragt über die Rahmenkante hinaus und
     frisst einen Teil der Lücke. Gemessen wird, was man sieht — Rahmen zu
     Rahmen, bei beiden Übergängen gleich. */
  margin-top:32px;background:transparent;
  display:flex;flex-direction:column;gap:2px;
}
/* Drei Abschnitte, eine Marke: Mittagsmenü, Menü erweitern, Getränke. Sie
   steht klein in Versalien mit einer feinen Linie, die den Rest der Zeile
   ausfüllt — so sieht man die Gliederung, bevor man ein Wort gelesen hat. */
/* Jede Marke trägt ihr Zeichen: Glas, Haube, Plus. Und sie steht deutlich
   da — sie gliedert die ganze Karte, nicht nur eine Zeile. Zu leise war sie
   ein Etikett, das man überliest. */
/* ---------------------------------------------------------------- Schilder
   Jeder Abschnitt der Tafel ist ein Schild: ein Rahmen, dessen obere Linie
   von seiner Marke aufgeschnitten wird. Das Wort liegt halb über der Linie
   und deckt sie mit dem Grund der Karte ab — die Linie läuft rechts davon
   weiter, geht rundherum und schließt links wieder an.

   Warum für alle drei dasselbe: Getränke, Mittagsmenü und Menü erweitern
   sind gleichrangig. Eine Fassung für einen von ihnen hätte gesagt, der sei
   der wichtigere; drei gleiche Fassungen sagen, wo ein Abschnitt anfängt und
   wo er aufhört — und genau das war auf der Tafel nicht zu sehen.

   Es steht bewusst als EINE Regel da. Dieselbe Gestalt dreimal aufgeschrieben
   war schon einmal der Fehler: Die Getränkemarke lief als eigene Kopie mit
   und wurde bei jeder Änderung an den anderen vergessen. */
/* Das Herz steht hinter dem Namen, nicht am rechten Rand. Die Grundfassung
   (app.css) schiebt es mit margin-left:auto ans Ende der Zeile — auf der
   Tafel gilt das nicht mehr, seit die Preise eine gemeinsame Spalte haben. */
/* Das Herz in Goldbraun: In der Linienfarbe war es auf dem dunklen Grund
   kaum zu sehen. Gemerkt ist es gefüllt, in derselben Farbe. */
body.tafel .gericht .merken--klein{
  margin-left:4px;margin-right:2px;font-size:14px;width:24px;height:24px;
  color:var(--gold-schrift);flex:0 0 auto;align-self:center;
}
body.tafel .gericht .merken--klein .ic{stroke-width:2.2}
body.tafel .gericht .merken--klein:hover{background:var(--gold-sanft);color:var(--gold-schrift)}
body.tafel .gericht .merken--klein.ist-gemerkt{color:var(--gold-schrift)}

/* ---------------------------------------------------------------- Preisspalte
   Alle Zahlen der Tafel enden an derselben Kante — ohne Platzhalter dafür:
   Das Herz zum Merken steht hinter dem Namen, nicht rechts neben dem Preis.
   Dort hielt es eine Spalte besetzt, die den übrigen Abschnitten fehlte. */

body.tafel .getraenkeblock,
body.tafel .preistafel,
body.tafel .tageskasten > .gerichte,
body.tafel .menuekarte > .gerichte{
  /* Ein Hauch Gold: Grau wäre wieder nur eine Linie gewesen, ganz Gold ein
     Angebotsschild. */
  border:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie));
  border-radius:0;
  padding:13px 15px;
}
body.tafel .abschnittsmarke{
  display:flex;align-items:center;gap:9px;
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  /* Ohne eigene Zeilenhöhe ist die Marke höher als ihre Versalien — die
     Reserve für Unterlängen sitzt unter der Schrift. Die Linie träfe dann die
     Unterkante des Wortes statt seiner Mitte, und auf der Fläche des
     Mittagsmenüs sieht man genau das: Das Etikett steht über der Linie, statt
     von ihr durchschnitten zu werden. */
  line-height:1;
  text-transform:uppercase;color:var(--tinte-2);
  /* Über der Linie, mit Luft links und rechts, damit das Wort sie sauber
     aufschneidet. Der Grund ist der der Karte — sonst liefe sie hindurch.
     Eine eigene Umrandung hatte die Marke eine Fassung lang; sie war zu
     viel für eine Tafel, die sonst mit feinen Linien arbeitet. */
  position:relative;z-index:1;align-self:flex-start;width:fit-content;
  margin:0 0 10px -6px;padding:0 7px;
  background:var(--flaeche);border-radius:0;
}
body.tafel .abschnittsmarke .ic{
  font-size:15px;stroke-width:1.6;color:var(--gold-schrift);flex:0 0 auto;
}
/* Steht die Marke IM Rahmen (Getränke, Menü erweitern), hebt sie sich selbst
   auf die Kante. Steht sie DAVOR (Mittagsmenü, wo die Speisenliste ein
   eigener Block ist), rutscht stattdessen der Rahmen unter sie. */
body.tafel .getraenkeblock,
body.tafel .preistafel{padding-top:0}
/* Oben darf hier kein Innenabstand stehen: Die Marke ist das erste Kind und
   würde mitrutschen — sie säße dann nicht mehr auf der Linie. Die Luft unter
   ihr macht deshalb ihr eigener Abstand, ein Stück weiter unten. */
body.tafel .preistafel{padding-bottom:19px}
body.tafel .getraenkeblock > .abschnittsmarke,
body.tafel .preistafel > .abschnittsmarke{
  transform:translateY(-50%);margin-bottom:-4px;
}
/* „Menü erweitern" führt Gangüberschriften an, keine Liste — die standen der
   Marke zu nah, als säßen sie in derselben Zeile. */
body.tafel .preistafel > .abschnittsmarke{margin-bottom:5px}
/* Zwischen dieser Marke und ihrer Liste liegt zusätzlich der Zeilenabstand
   des Kastens (6 px). Beides muss weg — die halbe Markenhöhe und der
   Abstand —, damit die Linie auch hier durch die Mitte des Wortes läuft und
   nicht an seiner Unterkante entlang. */
/* Fehlt das Getränk, führt „Mittagsmenü" die Tafel an und braucht denselben
   Abstand zur Linie beim Hausnamen wie sonst der Getränkeblock. Steht das
   Getränk davor, gilt dessen eigener Abstand — sonst zählte beides zusammen.
   (:first-of-type ginge nach dem Elementnamen und träfe die Marke auch dann,
   wenn der Getränkeblock als div davorsteht.) */
body.tafel .tageskasten > .abschnittsmarke:first-child,
body.tafel .menuekarte > .oberzeile + .abschnittsmarke{margin-top:22px}
body.tafel .abschnittsmarke:has(+ .gerichte){
  margin-bottom:-15px;
  /* Die Marken der anderen beiden stehen im Block und rücken mit dessen
     Innenabstand ein — die Ecke oben links bleibt dadurch sichtbar. Diese
     hier steht davor und lag ohne Einzug genau auf der Ecke. */
  margin-left:9px;
}
body.tafel .abschnittsmarke + .gerichte{padding-top:22px}
body.tafel .preistafel-titel{
  font-family:Jost,sans-serif;font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinte-3);margin-bottom:10px;
}

/* Die Gänge stehen nebeneinander, sobald Platz ist: „Vorspeise + 1,00 €"
   links, „Nachspeise + 2,90 €" rechts. Untereinander war die Karte lang,
   obwohl in jeder Spalte nur zwei Zeilen stehen. */
body.tafel .dazuspalten{display:grid;gap:14px 26px}
/* Ob nebeneinander Platz ist, entscheidet die Karte, nicht das Fenster: Auf
   der Ortsseite stehen drei Tafeln nebeneinander, jede davon schmal, während
   das Fenster breit ist. Deshalb ein Container und keine Media-Query. */
body.tafel .lokarte-koerper,
body.tafel .menuekarte{container-type:inline-size}
@container (min-width:520px){
  body.tafel .dazuspalten{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  body.tafel .dazuspalten .dazugruppe + .dazugruppe{
    margin-top:0;padding-top:0;border-top:none;
    padding-left:26px;border-left:1px solid color-mix(in srgb,var(--linie) 70%,transparent);
  }
}

/* Das Angebot: eine Plakette, der Name groß, rechts der Preis mit dem, was
   er spart. Derselbe Grund wie die Hauptspeise — es ist dieselbe Art von
   Entscheidung. */
body.tafel .dealblock{
  /* Rechts polstert der Block nicht: Dort steht die Preisspalte, und sie
     endet an derselben Kante wie die Zahlen der übrigen Abschnitte. */
  margin:14px 0 0;padding:12px 0 13px 13px;border-radius:0;
  border-left:3px solid var(--gold);
  background:color-mix(in srgb,var(--flaeche-3) 42%,transparent);
}
body.tafel .dealmarke{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;padding:3px 9px;
  background:var(--tinte);color:var(--flaeche);
  font-family:Jost,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;
}
body.tafel .dealzeile{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
body.tafel .dealtext{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
body.tafel .dealname{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--tinte)}
body.tafel .dealtext em{
  font-style:normal;font-family:Jost,sans-serif;font-size:13.5px;color:var(--tinte-2);
}
body.tafel .dealpreis{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto;text-align:right;
}
body.tafel .dealpreis b{
  font-family:var(--serif);font-size:24px;font-weight:500;color:var(--gold-schrift);line-height:1.1;
}
body.tafel .dealstatt{font-style:normal;font-family:Jost,sans-serif;font-size:12px;color:var(--tinte-3)}
body.tafel .dealstatt s{text-decoration-thickness:1px}
body.tafel .dealspart{
  font-style:normal;font-family:Jost,sans-serif;font-size:12.5px;font-weight:600;
  color:var(--gold-schrift);
}
@media (max-width:560px){
  /* Am Telefon zählt jede Textbreite: Rahmen und Fläche polstern sonst
     zweimal, und „Großer Salatteller mit gebackenen Hühnerstreifen" bricht
     über vier Zeilen. */
  body.tafel .getraenkeblock,
  body.tafel .preistafel,
  body.tafel .tageskasten > .gerichte,
  body.tafel .menuekarte > .gerichte{padding-left:9px;padding-right:9px}
  body.tafel .tageskasten > .gerichte > .gericht,
  body.tafel .menuekarte > .gerichte > .gericht{padding-left:11px;padding-right:0}
  body.tafel .dealblock{padding:11px 0 12px 12px}
  body.tafel .dealname{font-size:19px}
  body.tafel .dealpreis b{font-size:21px}
}
/* Die Überschrift einer Gruppe spricht wie das Gangwort oben auf der Karte:
   kleine Versalien links, die Zahl in der Serifenschrift rechts. */
body.tafel .dazugruppe{display:flex;flex-direction:column;gap:0}
/* Eine feine Linie zwischen den Gängen: Vorspeise und Nachspeise gingen mit
   bloßem Abstand ineinander über, und wer schnell liest, ordnete eine
   Nachspeise noch der Vorspeise zu. */
body.tafel .dazugruppe + .dazugruppe{
  margin-top:11px;padding-top:11px;
  border-top:1px solid color-mix(in srgb,var(--linie) 70%,transparent);
}
body.tafel .dazukopf{display:flex;align-items:baseline;gap:9px;margin-bottom:2px}
body.tafel .dazutitel{
  /* Dieselbe Zeile wie „⌂ HAUPTSPEISE" oben auf der Karte — Zeichen des
     Gangs, dann das Wort. Sie ist die eigentliche Überschrift der Gruppe und
     steht deshalb kräftiger da als die Kapitelmarke „Dazu wählbar": Vorher
     sahen beide gleich aus, und die Ebenen verschwammen. */
  display:flex;align-items:center;gap:6px;
  flex:0 0 auto;min-width:0;font-family:Jost,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinte);
  /* „Mit 1 Nachspeise" bleibt in einer Zeile: Seit die Preisspalte rechts
     frei bleibt, ist in der schmalen Gangspalte weniger Platz, und die
     Überschrift brach mitten im Wort um. Nachgeben soll die Führungslinie. */
  white-space:nowrap;
}
body.tafel .dazutitel .ic{font-size:13px;stroke-width:1.5;color:var(--gold-schrift);flex:0 0 auto}
body.tafel .dazukopf .fuehrung{flex:1 1 18px;min-width:12px}
body.tafel .dazukopf .preis{
  flex:0 0 auto;font-family:var(--serif);font-size:16px;font-weight:500;
  color:var(--gold-schrift);letter-spacing:0;text-transform:none;min-width:0;
}
body.tafel .dazukopf .preis--inklusive{
  font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-3);font-weight:500;
}
/* Die Auswahl darunter: eine Zeile je Gericht, leicht eingerückt, damit man
   sieht, zu welcher Überschrift sie gehört. */
/* Die Auswahl steht eingerückt unter ihrer Überschrift — ohne senkrechte
   Linie daneben: Die Punkte vor den Gerichten sagen schon, dass hier eine
   Aufzählung steht, und eine zweite Markierung daneben war eine Linie zu
   viel auf einer Tafel, die mit wenigen auskommt. */
body.tafel .dazuauswahl{
  /* Der Punkt steht auf der Höhe, auf der auch das Wort der Überschrift
     anfängt — links vom Zeichen ist nichts, rechts davon beginnt beides
     an derselben Kante. */
  display:flex;flex-direction:column;margin:3px 0 0;padding-left:17px;
}
/* Zwei Spalten: links der Punkt, rechts der Name und darunter, was das
   Gericht ausmacht. Der Punkt steht über beide Zeilen und bleibt dabei in
   der Mitte — vorher hing er an der ersten Zeile, und bei einem Beisatz
   stand er oben statt beim Gericht. */
body.tafel .preistafel .gericht--dazu{
  /* Beide Lücken ausdrücklich: Der geerbte Abstand von neun Pixeln galt
     auch zwischen den Zeilen — der Beisatz stand dadurch so weit vom
     Namen weg wie vom nächsten Gericht und las sich wie eine eigene
     Zeile. Innen ein Pixel, außen sieben: Was zusammengehört, steht
     zusammen. */
  display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:0;
  align-items:center;
  padding:7px 0;border-top:none;
}
/* Die Namenszeile so hoch wie ihr Text: Mit der geerbten Zeilenhöhe stand
   unter dem Namen noch eine halbe Zeile Reserve, und der Beisatz rutschte
   um diese Reserve nach unten. */
body.tafel .preistafel .gericht--dazu > .gericht-zeile{line-height:1.15}
body.tafel .preistafel .gericht--dazu .merken--klein{width:19px;height:19px;font-size:13px}
/* Ein feiner Punkt vor jedem Namen: Das hier ist eine Auswahl, eines davon. */
body.tafel .preistafel .gericht--dazu::before{
  content:"";grid-row:1 / -1;align-self:center;
  width:4px;height:4px;border-radius:50%;
  background:color-mix(in srgb,var(--gold) 65%,transparent);
}
body.tafel .preistafel .gericht--dazu > .gericht-zeile,
body.tafel .preistafel .gericht--dazu > .gericht-zusatz{grid-column:2;min-width:0}
body.tafel .preistafel .gericht--dazu .gericht-zeile{align-items:center}
body.tafel .preistafel .gericht--dazu .gericht-name{
  font-family:Jost,sans-serif;font-size:15px;font-weight:400;color:var(--tinte-2);
}
body.tafel .preistafel .gericht--dazu .preis{
  font-family:var(--serif);font-size:16px;font-weight:500;color:var(--gold-schrift);
  letter-spacing:0;text-transform:none;min-width:0;
}
body.tafel .preistafel .gericht--dazu .preis--inklusive{
  font-family:Jost,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte-3);
}
/* Die Herzen der Beigaben sind leiser als die oben — aber nur, solange
   nichts gemerkt ist: Ein gemerktes Herz ist überall rot, sonst hieße
   dieselbe Farbe an zwei Stellen etwas anderes. */
body.tafel .preistafel .gericht--dazu .merken:not(.ist-gemerkt){color:var(--gold-schrift)}
/* Beisatz, Kennzeichen und Buchstaben stehen unter dem Namen — in einer
   Zeile, klein: „mit Suppentopf · LAKTOSEFREI · E G". In der Namenszeile
   drängten sie sich zwischen Herz und Zahl. */
body.tafel .preistafel .gericht--dazu .gericht-zusatz{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:0;
  font-size:11.5px;line-height:1.2;
}
body.tafel .preistafel .gericht--dazu .gericht-zusatz .kenn{font-size:9.5px;padding:1px 5px}
body.tafel .preistafel .gericht--dazu .gericht-zusatz .allergenzeile{
  font-size:10px;color:var(--tinte-3);letter-spacing:.06em}
/* Zwischen Kennzeichen und Zahl bleibt immer eine Lücke — sonst klebt
   „LAKTOSEFREI" am Preis, sobald der Name zweizeilig wird. */
body.tafel .preistafel .gericht--dazu .fuehrung{flex:1 1 14px;min-width:14px}
body.tafel .preistafel .gericht--dazu .gericht-kopf{gap:7px;flex:0 1 auto;min-width:0}
body.tafel .preistafel .gericht--dazu .gericht-zusatz{padding-left:0}
body.tafel .preistafel .gericht--dazu .beschreibung{font-size:11.5px}
/* Die Zusammenstellungen des Hauses stehen zuletzt, durch eine Haarlinie
   abgesetzt: Das eine sind Gerichte, das andere sind Pakete. */
/* Bietet ein Haus mehrere Pakete an, ist das eine Preistafel in Stufen. Eine
   leise Zwischenzeile sagt das — die Pakete sind keine Gänge. */
body.tafel .stufenmarke{
  display:block;margin:14px 0 4px;
  font-family:Jost,sans-serif;font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinte-3);
}
body.tafel .dazuspalten + .stufenmarke{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--linie);
}
body.tafel .stufenmarke + .preistafel-zeile{margin-top:0}
body.tafel .preistafel-zeile{
  display:flex;align-items:baseline;gap:9px;
  font-family:Jost,sans-serif;font-size:15px;color:var(--tinte-2);
}
body.tafel .preistafel-text{flex:0 1 auto;min-width:0}
body.tafel .preistafel-zeile .fuehrung{flex:1 1 18px;min-width:12px}
body.tafel .preistafel-zeile b{
  flex:0 0 auto;font-family:var(--serif);font-size:16px;font-weight:500;color:var(--gold-schrift);
}
body.tafel .dazuspalten + .preistafel-zeile{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);
}
/* Der Hingucker der Karte: eine Zusammenstellung, die günstiger ist als ihre
   Teile. Sie bekommt als Einzige eine Fläche — ein sanfter Goldton mit einem
   kräftigen Strich links, wie ein angeheftetes Angebot. Auf einer sonst
   weißen Tafel ist das der eine Punkt, an dem das Auge hängen bleibt; mehr
   davon wäre Lärm. */
body.tafel .preistafel-zeile--deal{
  /* Das Angebot ist die zweite Entscheidung der Karte und tritt deshalb auf
     wie die Hauptspeise: ein Block über die ganze Breite, bis an die Kanten
     der Tafel. Nur der Ton ist ein anderer — Gold statt Grau, mit einem
     kräftigen Strich links. */
  align-items:center;gap:12px;margin:12px -15px 0;padding:12px 15px;
  /* Derselbe Grund wie die Hauptspeise: Es ist dieselbe Art von Entscheidung.
     Unterschieden wird über den Strich links, nicht über eine zweite Farbe. */
  border-left:3px solid var(--gold);
  background:color-mix(in srgb,var(--flaeche-3) 42%,transparent);
}
body.tafel .preistafel .dazugruppe + .preistafel-zeile--deal,
body.tafel .preistafel .preistafel-zeile + .preistafel-zeile--deal{
  margin-top:12px;padding-top:12px;border-top:0;
}
body.tafel .preistafel-zeile--deal .preistafel-text{
  display:flex;flex-direction:column;gap:2px;color:var(--tinte);font-weight:500;
}
body.tafel .sparhinweis{
  font-style:normal;font-size:12px;letter-spacing:.01em;color:var(--tinte-2);
}
body.tafel .sparhinweis s{color:var(--tinte-3);text-decoration-thickness:1px}
body.tafel .sparhinweis b{font-weight:600;color:var(--gold-schrift)}
body.tafel .preistafel-zeile--deal b.mono{font-size:18px}
@media (max-width:560px){
  body.tafel .preistafel-zeile{font-size:14px}
  body.tafel .preistafel-zeile b{font-size:15px}
  body.tafel .preistafel .gericht--dazu .gericht-name{font-size:14.5px}
  body.tafel .preistafel .gericht--dazu{padding-left:11px}
  body.tafel .preistafel-zeile--deal{padding:11px 12px}
}

/* ================================================= Die Vorabseite
   Bis zum Start steht hier, was kommt. Sie ist die erste Seite, die jemand
   von uns sieht — also trägt sie die Handschrift der Tafeln (Serifen, Gold,
   Schreibschrift), aber als Bühne: dunkel, mit Glühen, mit Bewegung. Alles
   Bewegte steht still, sobald jemand Bewegung abgestellt hat. */
body.tafel .baldseite{max-width:none;margin:0;padding:0;display:block}
body.tafel .bald-in{max-width:1040px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ---- Die Bühne */
body.tafel .baldbuehne{
  position:relative;overflow:hidden;background:var(--tief);color:#EFEDE6;
  padding:clamp(36px,7vw,84px) 0 0;isolation:isolate;
}
body.tafel .baldglow{
  position:absolute;inset:-30% -20% auto;height:120%;pointer-events:none;z-index:0;
  background:
    radial-gradient(48% 42% at 28% 28%,rgba(212,178,106,.34),transparent 70%),
    radial-gradient(36% 34% at 78% 62%,rgba(232,164,33,.20),transparent 70%),
    radial-gradient(60% 50% at 50% 100%,rgba(212,178,106,.10),transparent 70%);
  filter:blur(18px);
  animation:baldatmen 9s ease-in-out infinite alternate;
}
@keyframes baldatmen{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}
body.tafel .baldraster{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(70% 70% at 50% 40%,#000 30%,transparent 100%);
}
body.tafel .baldbuehne-in{
  position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:center;
}
@media (max-width:860px){ body.tafel .baldbuehne-in{grid-template-columns:1fr;gap:38px} }
body.tafel .baldwort{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
@media (max-width:860px){ body.tafel .baldwort{align-items:center;text-align:center} }
body.tafel .baldmarke{color:#fff;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
body.tafel .baldmarke .marke-name{color:#fff;font-size:19px}
body.tafel .baldmarke .marke-name i{color:var(--gold)}
body.tafel .baldstart{
  display:inline-flex;align-items:center;gap:9px;
  font-family:Jost,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#E8D6A6;padding:7px 14px 7px 11px;border:1px solid rgba(212,178,106,.55);
  background:rgba(212,178,106,.08);backdrop-filter:blur(4px);
}
body.tafel .baldpuls{
  width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(212,178,106,.7);animation:baldpuls 2.2s ease-out infinite;
}
@keyframes baldpuls{0%{box-shadow:0 0 0 0 rgba(212,178,106,.7)}70%{box-shadow:0 0 0 10px rgba(212,178,106,0)}100%{box-shadow:0 0 0 0 rgba(212,178,106,0)}}
body.tafel .baldtitel{
  /* Zwei Zeilen, nicht vier: „Was kocht heute" / „die Nachbarschaft?" —
     jede Zeile bleibt zusammen, die Größe richtet sich nach der Spalte. */
  margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(34px,4.3vw,58px);color:#F6F2E8;display:flex;flex-direction:column;
}
body.tafel .baldtitel span{white-space:nowrap}
@media (max-width:860px){ body.tafel .baldtitel{font-size:clamp(34px,8.6vw,58px)} }
body.tafel .baldtitel em{
  font-family:var(--schreib);font-style:normal;font-weight:400;font-size:1.08em;line-height:1;
  color:var(--gold);padding:0 .06em;
  background:linear-gradient(90deg,#E8D6A6,#D4B26A 45%,#F1E3B7 70%,#C9A45C);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:baldschimmer 6s linear infinite;
}
@keyframes baldschimmer{to{background-position:-200% 0}}
body.tafel .baldsatz{
  margin:0;max-width:52ch;font-family:Jost,sans-serif;font-size:clamp(16px,1.6vw,19px);line-height:1.6;
  color:rgba(239,237,230,.78);
}
body.tafel .baldknoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
@media (max-width:860px){ body.tafel .baldknoepfe{justify-content:center} }
body.tafel .baldknopf{
  padding:15px 24px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  box-shadow:0 18px 40px -18px rgba(212,178,106,.7);
}
body.tafel .baldknopf:hover{background:#E2C27C;border-color:#E2C27C;transform:translateY(-1px)}
body.tafel .baldneben{
  font-family:Jost,sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:rgba(239,237,230,.8);text-decoration:none;border-bottom:1px solid rgba(212,178,106,.5);padding-bottom:2px;
}
body.tafel .baldneben:hover{color:#fff;border-bottom-color:var(--gold)}

/* Der Einzug: alles kommt aus dem Dunkel, der Reihe nach */
body.tafel .baldwort > *{animation:baldkommen .9s cubic-bezier(.2,.75,.3,1) both}
body.tafel .baldwort > :nth-child(2){animation-delay:.08s}
body.tafel .baldwort > :nth-child(3){animation-delay:.16s}
body.tafel .baldwort > :nth-child(4){animation-delay:.26s}
body.tafel .baldwort > :nth-child(5){animation-delay:.36s}
@keyframes baldkommen{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- Die Kostprobe: eine Tafel, leicht gedreht, schwebend */
body.tafel .baldkarte{
  position:relative;justify-self:center;width:min(100%,380px);
  animation:baldkommen 1.1s .3s cubic-bezier(.2,.75,.3,1) both;
}
body.tafel .baldkarte .kost{
  /* Auf der dunklen Bühne bleibt die Karte immer weiß — auch im Dunkelmodus:
     Sie ist das Papier, das aus dem Dunkel leuchtet. */
  --flaeche:#FFFFFF;--tinte:#1E2622;--tinte-2:#525E59;--tinte-3:#66716C;--linie:#E4E7E3;
  --gold:#C9A45C;--gold-schrift:#8A6A2B;
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:var(--flaeche);color:var(--tinte);padding:30px 26px 22px;
  transform:rotate(-2.5deg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(212,178,106,.35);
  animation:baldschweben 6.5s ease-in-out infinite;
}
@keyframes baldschweben{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-10px)}}
body.tafel .baldkarte-schein{
  position:absolute;inset:auto 8% -18px;height:40px;border-radius:50%;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(212,178,106,.55),transparent 70%);filter:blur(10px);
}
body.tafel .kost-vorzeile{font-family:var(--schreib);font-size:22px;line-height:1.1;color:var(--gold-schrift)}
body.tafel .kost-name{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
body.tafel .kost-datum{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3);margin-top:4px}
body.tafel .kost-strich{display:block;width:44px;height:1px;background:var(--gold);margin:12px 0 14px}
body.tafel .kost-marke{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-family:Jost,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-2);
}
body.tafel .kost-marke .ic{font-size:14px;color:var(--gold-schrift)}
body.tafel .kost-zeilen{width:100%;display:flex;flex-direction:column;margin-top:4px;text-align:left}
body.tafel .kost-zeile{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--linie)}
body.tafel .kost-zeile:first-child{border-top:none}
body.tafel .kost-gericht{flex:0 1 auto;min-width:0;font-family:var(--serif);font-size:16.5px;font-weight:500;line-height:1.25}
body.tafel .kost-gericht em{display:block;font-family:Jost,sans-serif;font-style:normal;font-size:12px;color:var(--tinte-2);margin-top:1px}
body.tafel .kost-fuehrung{flex:1 1 16px;min-width:12px}
body.tafel .kost-zeile b{font-family:var(--serif);font-size:16.5px;font-weight:500;color:var(--gold-schrift);white-space:nowrap}
body.tafel .kost-fuss{margin-top:14px;font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-3)}

/* ---- Das Laufband */
body.tafel .baldticker{
  position:relative;z-index:1;margin:clamp(40px,6vw,72px) 0 0;
  border-top:1px solid rgba(212,178,106,.25);border-bottom:1px solid rgba(212,178,106,.25);
  background:rgba(255,255,255,.025);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body.tafel .baldticker-band{display:flex;width:max-content;animation:baldlauf 160s linear infinite}
body.tafel .baldticker:hover .baldticker-band{animation-play-state:paused}
@keyframes baldlauf{to{transform:translateX(-50%)}}
body.tafel .baldticker-teil{display:flex;align-items:center;padding:16px 0}
body.tafel .baldticker-wort{
  font-family:var(--serif);font-size:19px;font-weight:500;color:#EFEDE6;white-space:nowrap;padding:0 22px;
}
body.tafel .baldticker-punkt{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 auto}

/* ---- Vier Schilder */
body.tafel .baldkicker{
  display:inline-block;font-family:Jost,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
  /* Eine Spur dunkler als das Schriftgold: 11 Pixel verlangen 4,5 zu 1,
     das reine Gold kam auf 4,49. */
  text-transform:uppercase;color:color-mix(in srgb,var(--gold-schrift) 88%,var(--tinte));margin-bottom:10px;
}
body.tafel .baldkicker--hell{color:#E8D6A6}
body.tafel .baldliste{padding:clamp(56px,8vw,96px) 0 0}
body.tafel .baldliste h2,
body.tafel .baldform h2,
body.tafel .baldwirte h2{
  font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0 0 26px;
  text-wrap:balance;
}
body.tafel .baldpunkte{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){ body.tafel .baldpunkte{grid-template-columns:1fr} }
@media (min-width:1000px){ body.tafel .baldpunkte{grid-template-columns:repeat(4,1fr)} }
body.tafel .baldpunkte li{
  position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 22px 22px;
  background:var(--flaeche);border:1px solid var(--linie);
  font-family:Jost,sans-serif;font-size:14.5px;line-height:1.55;color:var(--tinte-2);
  transition:transform .25s cubic-bezier(.2,.75,.3,1),border-color .25s ease,box-shadow .25s ease;
}
body.tafel .baldpunkte li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:.7;
}
body.tafel .baldpunkte li:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 55%,var(--linie));box-shadow:var(--s2)}
body.tafel .baldpunkte .ic{font-size:22px;color:var(--gold-schrift);stroke-width:1.5;margin-bottom:4px}
body.tafel .baldpunkte b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--tinte);line-height:1.2}

/* ---- Das Formular: wieder auf der Bühne */
body.tafel .baldform{
  position:relative;overflow:hidden;margin-top:clamp(56px,8vw,96px);padding:clamp(48px,7vw,80px) 0;
  background:var(--tief);color:#EFEDE6;text-align:center;isolation:isolate;
}
body.tafel .baldform-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 70% at 50% 110%,rgba(212,178,106,.35),transparent 70%);
}
body.tafel .baldform .bald-in{position:relative;z-index:1;max-width:720px}
body.tafel .baldform h2{color:#F6F2E8}
body.tafel .baldform-satz{margin:-12px 0 26px;font-family:Jost,sans-serif;font-size:16px;color:rgba(239,237,230,.72)}
body.tafel .baldfelder{
  display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(212,178,106,.4);
  box-shadow:0 30px 60px -30px rgba(212,178,106,.55);
}
body.tafel .baldfelder .feld{flex:1 1 220px;margin:0}
body.tafel .baldfelder input,
body.tafel .baldfelder select{
  width:100%;height:50px;background:transparent;border:0;color:#fff;font-size:16px;padding:0 14px;
}
body.tafel .baldfelder input::placeholder{color:rgba(239,237,230,.5)}
body.tafel .baldfelder select{border-left:1px solid rgba(255,255,255,.12)}
body.tafel .baldfelder select option{color:#111}
body.tafel .baldfelder .knopf{flex:0 0 auto;height:50px;padding:0 24px;letter-spacing:.12em;text-transform:uppercase;font-size:12.5px;font-weight:600}
body.tafel .baldfelder .knopf:hover{background:#E2C27C;border-color:#E2C27C}
body.tafel .baldfelder input:focus-visible,
body.tafel .baldfelder select:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
body.tafel .baldform .meldungen{max-width:520px;margin:0 auto 18px;text-align:left}
body.tafel .balddanke{
  display:flex;gap:14px;align-items:flex-start;text-align:left;max-width:560px;margin:0 auto;padding:22px 24px;
  border:1px solid rgba(212,178,106,.5);background:rgba(212,178,106,.08);
}
body.tafel .balddanke .ic{font-size:22px;color:var(--gold);flex:0 0 auto;margin-top:2px}
body.tafel .balddanke b{font-family:var(--serif);font-size:22px;font-weight:600;color:#F6F2E8}
body.tafel .balddanke p{margin:4px 0 0;font-family:Jost,sans-serif;color:rgba(239,237,230,.78)}

/* ---- Wirte */
body.tafel .baldwirte{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;
  padding:clamp(48px,7vw,80px) 0 clamp(40px,6vw,64px);
}
body.tafel .baldwirte h2{margin-bottom:10px}
body.tafel .baldwirte p{font-family:Jost,sans-serif;color:var(--tinte-2);max-width:58ch;margin:0;line-height:1.6}
body.tafel .baldwirte .knopf{flex:0 0 auto}

body.tafel .baldfuss{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
  padding:0 20px 40px;font-family:Jost,sans-serif;font-size:13px;color:var(--tinte-3);
}
body.tafel .baldfuss a{color:var(--tinte-2)}
body.tafel .verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  body.tafel .baldglow,body.tafel .baldpuls,body.tafel .baldtitel em,body.tafel .baldwort > *,
  body.tafel .baldkarte,body.tafel .baldkarte .kost,body.tafel .baldticker-band,body.tafel .baldpunkte li{animation:none !important}
  body.tafel .baldtitel em{-webkit-text-fill-color:var(--gold);background:none}
  body.tafel .baldticker-band{flex-wrap:wrap;width:auto}
  body.tafel .baldticker-teil[aria-hidden]{display:none}
}

/* ================================================= Für Gastronomen
   Dieselbe Bühne wie die Vorabseite — Glühen, Raster, Schreibschrift-Gold —,
   aber mit der Frage des Wirts: Was bringt mir das? Die Bausteine der
   Vorabseite (baldglow, baldraster, baldstart, baldkarte, baldkicker …)
   werden wiederverwendet; hier steht nur, was die Gastronomen-Seite anders
   macht. Die Klassen .held und .vorteile/.infokarte kennen die Klickwege. */
body.tafel .wirteseite{max-width:none;margin:0;padding:0}
body.tafel .wirteseite .meldungen{max-width:1040px;margin:12px auto 0;padding:0 clamp(18px,4vw,40px)}
body.tafel .wirte-buehne{
  position:relative;overflow:hidden;background:var(--tief);color:#EFEDE6;isolation:isolate;
  padding:clamp(36px,7vw,84px) 0 clamp(44px,7vw,84px);margin:0;
}
body.tafel .wirte-buehne-in{
  position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:center;
}
@media (max-width:860px){ body.tafel .wirte-buehne-in{grid-template-columns:1fr;gap:38px} }
body.tafel .wirte-wort{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
@media (max-width:860px){ body.tafel .wirte-wort{align-items:center;text-align:center} }
body.tafel .wirte-wort > *{animation:baldkommen .9s cubic-bezier(.2,.75,.3,1) both}
body.tafel .wirte-wort > :nth-child(2){animation-delay:.08s}
body.tafel .wirte-wort > :nth-child(3){animation-delay:.16s}
body.tafel .wirte-wort > :nth-child(4){animation-delay:.26s}
body.tafel .wirte-wort > :nth-child(5){animation-delay:.36s}
body.tafel .wirte-titel{
  margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(32px,4vw,54px);color:#F6F2E8;display:flex;flex-direction:column;text-wrap:balance;
}
body.tafel .wirte-titel em{
  font-family:var(--schreib);font-style:normal;font-weight:400;font-size:1.08em;line-height:1;padding:0 .06em;
  background:linear-gradient(90deg,#E8D6A6,#D4B26A 45%,#F1E3B7 70%,#C9A45C);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:baldschimmer 6s linear infinite;
}
body.tafel .wirte-titel span:last-child{color:var(--gold)}
body.tafel .wirte-satz{
  margin:0;max-width:54ch;font-family:Jost,sans-serif;font-size:clamp(16px,1.6vw,19px);line-height:1.6;
  color:rgba(239,237,230,.78);
}
body.tafel .wirte-klein{margin:0;font-family:Jost,sans-serif;font-size:13px;color:rgba(239,237,230,.6);max-width:52ch}
body.tafel .wirte-karte{position:relative}
body.tafel .wirte-karte-etikett{
  position:absolute;z-index:2;top:-14px;left:50%;transform:translateX(-50%) rotate(-2.5deg);white-space:nowrap;
  font-family:Jost,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tief);background:var(--gold);padding:6px 12px;
}

/* ---- Die drei Gründe */
body.tafel .wirte-gruende{padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .wirte-h2{
  font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);font-weight:600;letter-spacing:-.015em;line-height:1.1;
  margin:0 0 30px;text-wrap:balance;color:var(--tinte);
}
body.tafel .wirte-h2--hell{color:#F6F2E8}
body.tafel .gruende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
body.tafel .gruende li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px 28px;align-items:start;
  padding:30px 0;border-top:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie));
}
body.tafel .gruende li:last-child{border-bottom:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie))}
body.tafel .grund-zahl{
  font-family:var(--serif);font-size:clamp(34px,4vw,52px);font-weight:500;line-height:1;color:var(--gold-schrift);
  font-variant-numeric:tabular-nums;min-width:2ch;
}
body.tafel .grund-text h3{
  margin:0 0 10px;font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);font-weight:600;line-height:1.15;
  letter-spacing:-.015em;color:var(--tinte);text-wrap:balance;
}
body.tafel .grund-text p{margin:0;font-family:Jost,sans-serif;font-size:16px;line-height:1.6;color:var(--tinte-2);max-width:62ch}
body.tafel .grund-zeichen{font-size:40px;stroke-width:1.2;color:var(--gold);opacity:.9;margin-top:4px}
@media (max-width:640px){
  body.tafel .gruende li{grid-template-columns:auto minmax(0,1fr)}
  body.tafel .grund-zeichen{display:none}
}

/* ---- Halb zwölf: ohne und mit */
body.tafel .wirte-vergleich{
  position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(56px,8vw,96px);
  padding:clamp(48px,7vw,80px) 0;background:var(--tief);color:#EFEDE6;
}
body.tafel .wirte-vergleich .bald-in{position:relative;z-index:1}
body.tafel .vergleich-spalten{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){ body.tafel .vergleich-spalten{grid-template-columns:1fr} }
body.tafel .vergleich-spalte{padding:26px 26px 24px;border:1px solid rgba(255,255,255,.12)}
body.tafel .vergleich-spalte--mit{border-color:rgba(212,178,106,.6);background:rgba(212,178,106,.07)}
body.tafel .vergleich-kopf{
  display:inline-block;font-family:Jost,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,237,230,.6);margin-bottom:14px;
}
body.tafel .vergleich-spalte--mit .vergleich-kopf{color:var(--gold)}
body.tafel .vergleich-spalte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
body.tafel .vergleich-spalte li{
  position:relative;padding-left:26px;font-family:var(--serif);font-size:18px;line-height:1.35;color:rgba(239,237,230,.72);
}
body.tafel .vergleich-spalte li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:rgba(255,255,255,.35)}
body.tafel .vergleich-spalte--ohne li{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35);text-decoration-thickness:1px}
body.tafel .vergleich-spalte--mit li{color:#F6F2E8}
body.tafel .vergleich-spalte--mit li::before{background:var(--gold);width:14px}

/* ---- Alles inklusive */
/* margin:0 auto — mit margin:0 hob die Zeile das margin:auto der .bald-in auf,
   und der Block klebte auf breiten Bildschirmen links */
body.tafel .wirte-vorteile{margin:0 auto;padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .wirte-raster{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){ body.tafel .wirte-raster{grid-template-columns:1fr} }
@media (min-width:900px){ body.tafel .wirte-raster{grid-template-columns:repeat(3,1fr)} }
body.tafel .wirte-kachel{
  position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 22px 22px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  transition:transform .25s cubic-bezier(.2,.75,.3,1),border-color .25s ease,box-shadow .25s ease;
}
body.tafel .wirte-kachel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:.7;
}
body.tafel .wirte-kachel:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 55%,var(--linie));box-shadow:var(--s2)}
body.tafel .wirte-kachel .ic--gross{font-size:24px;color:var(--gold-schrift);stroke-width:1.5;margin:0 0 4px}
body.tafel .wirte-kachel .infokarte-titel{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2;color:var(--tinte)}
body.tafel .wirte-kachel p{margin:0;font-family:Jost,sans-serif;font-size:14.5px;line-height:1.55;color:var(--tinte-2)}

/* ---- Ablauf */
body.tafel .wirte-ablauf{margin:0 auto;padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .wirte-schritte{max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){ body.tafel .wirte-schritte{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ body.tafel .wirte-schritte{grid-template-columns:1fr} }
body.tafel .wirte-schritte li{
  flex-direction:column;gap:12px;padding:22px 20px 20px;border:1px solid var(--linie);border-bottom:1px solid var(--linie);
  background:var(--flaeche);
}
body.tafel .wirte-schritte .ablauf-zahl{
  width:40px;height:40px;border-radius:0;background:var(--tief);color:var(--gold);
  font-family:var(--serif);font-size:20px;font-weight:500;display:grid;place-items:center;
}
body.tafel .wirte-schritte strong{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:4px}
body.tafel .wirte-schritte p{font-family:Jost,sans-serif;font-size:14.5px;color:var(--tinte-2)}

/* ---- Schluss: kostet nichts, Knopf */
body.tafel .wirte-schluss{
  position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(56px,8vw,96px);
  padding:clamp(56px,8vw,96px) 0;background:var(--tief);color:#EFEDE6;text-align:center;
}
body.tafel .wirte-schluss .bald-in{position:relative;z-index:1;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:18px}
body.tafel .wirte-nichts{font-size:clamp(56px,9vw,112px);line-height:1;margin:0;
  background:linear-gradient(90deg,#E8D6A6,#D4B26A 45%,#F1E3B7 70%,#C9A45C);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;
  animation:baldschimmer 6s linear infinite}
body.tafel .wirte-schluss-satz{margin:0;font-family:Jost,sans-serif;font-size:16.5px;line-height:1.6;color:rgba(239,237,230,.78);max-width:60ch}
body.tafel .wirte-schluss-satz--klein{font-size:13.5px;color:rgba(239,237,230,.6);margin-top:-6px}
body.tafel .wirte-schluss-klein{margin:6px 0 0;font-family:Jost,sans-serif;font-size:13px;color:rgba(239,237,230,.6)}
body.tafel .wirte-schluss-klein a{color:#E8D6A6}
/* Der Fuß folgt direkt auf die dunkle Bühne — ohne die Luft der Textseiten */
body.tafel .wirteseite + .fuss{margin-top:0}
@media (prefers-reduced-motion:reduce){
  body.tafel .wirte-wort > *,body.tafel .wirte-titel em,body.tafel .wirte-nichts,body.tafel .wirte-kachel{animation:none !important}
  body.tafel .wirte-titel em,body.tafel .wirte-nichts{-webkit-text-fill-color:var(--gold);background:none}
}

/* ================================================= Über uns
   Die Bühne der Gastronomen-Seite, mit zwei Menschen darauf: zwei Fotos
   wie auf einem Tisch, leicht versetzt, mit Goldrand. */
body.tafel .teamkarten{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:300px}
body.tafel .teamkarte{
  position:relative;margin:0;width:min(46%,210px);background:#fff;padding:10px 10px 12px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(212,178,106,.35);
  animation:baldkommen 1.1s .3s cubic-bezier(.2,.75,.3,1) both;
}
body.tafel .teamkarte--1{transform:rotate(-4deg) translateY(10px);z-index:1}
body.tafel .teamkarte--2{transform:rotate(3deg) translate(-14px,-14px);z-index:2}
body.tafel .teamkarte img,body.tafel .teamkarte picture{display:block;width:100%;aspect-ratio:1;object-fit:cover}
body.tafel .teamkarte-initiale{
  display:grid;place-items:center;width:100%;aspect-ratio:1;background:var(--tief);
  font-family:var(--schreib);font-size:96px;line-height:1;color:var(--gold);
}
body.tafel .teamkarte figcaption{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:9px;text-align:center}
body.tafel .teamkarte strong{font-family:var(--serif);font-size:17px;font-weight:600;color:#1E2622}
body.tafel .teamkarte figcaption span{font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#66716C}
@media (max-width:860px){ body.tafel .teamkarten{min-height:0;margin-top:10px} }

body.tafel .ueber-team{padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .teamtexte{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){ body.tafel .teamtexte{grid-template-columns:1fr} }
body.tafel .teamtext{padding:26px 26px 24px;background:var(--flaeche);border:1px solid var(--linie);position:relative}
body.tafel .teamtext::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.7}
body.tafel .teamtext h3{margin:0;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em}
body.tafel .teamtext-rolle{display:block;margin:4px 0 12px;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-schrift)}
body.tafel .teamtext p{margin:0;font-family:Jost,sans-serif;font-size:16px;line-height:1.6;color:var(--tinte-2)}

body.tafel .ueber-warum{
  position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(56px,8vw,96px);
  padding:clamp(48px,7vw,80px) 0;background:var(--tief);color:#EFEDE6;
}
body.tafel .ueber-warum .bald-in{position:relative;z-index:1}
body.tafel .warum-spalten{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:720px){ body.tafel .warum-spalten{grid-template-columns:1fr} }
body.tafel .warum-spalten p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.5;color:rgba(239,237,230,.82)}
body.tafel .warum-spalten p:first-child::first-letter{font-family:var(--schreib);font-size:2.4em;line-height:.8;color:var(--gold);padding-right:.06em;float:left;margin-top:.08em}

body.tafel .ueber-haltung{padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .ueber-haltung .wirte-kachel .ic--gross{color:var(--gold-schrift)}

body.tafel .ueber-agentur{padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .agentur-kasten{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,48px);align-items:center;
  padding:clamp(24px,4vw,40px);background:var(--flaeche);border:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie));
}
@media (max-width:860px){ body.tafel .agentur-kasten{grid-template-columns:1fr} }
body.tafel .agentur-kasten > div > p{margin:0 0 14px;font-family:Jost,sans-serif;font-size:16px;line-height:1.6;color:var(--tinte-2)}
body.tafel .agentur-adresse{font-size:14px !important;color:var(--tinte-3) !important}
body.tafel .agentur-adresse a{color:var(--gold-schrift)}
body.tafel .agentur-karte{width:min(100%,320px);justify-self:center}
body.tafel .agentur-karte .kost{transform:rotate(2deg);animation:none;padding:24px 22px 18px}
body.tafel .ueber-schluss .wirte-h2{max-width:20ch}
@media (prefers-reduced-motion:reduce){ body.tafel .teamkarte{animation:none !important} }

/* Vier Zahlen der Heftis, direkt unter der Bühne */
body.tafel .ueber-fakten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 12px;
  margin:-34px auto 0;position:relative;z-index:2;padding:24px clamp(18px,3vw,34px);
  background:var(--flaeche);border:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie));box-shadow:var(--s2);
}
body.tafel .ueber-fakten div{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
body.tafel .ueber-fakten b{font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);font-weight:600;line-height:1;color:var(--gold-schrift);font-variant-numeric:tabular-nums}
body.tafel .ueber-fakten span{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-3);max-width:22ch}
body.tafel .team-nebenbei{margin:18px 0 0;font-family:var(--serif);font-size:18px;font-style:italic;line-height:1.5;color:var(--tinte-2);max-width:70ch}
body.tafel .agentur-leistungen{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
body.tafel .agentur-leistungen li{
  font-family:Jost,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-2);
  padding:6px 10px;border:1px solid var(--linie-2);
}
body.tafel .agentur-referenzen{font-size:15px !important}
body.tafel .agentur-referenzen a{color:var(--gold-schrift)}
body.tafel .ueber-buehne{padding-bottom:clamp(64px,9vw,110px)}

/* Das gemeinsame Foto auf der Bühne der Über-uns-Seite */
body.tafel .teamfoto{
  position:relative;margin:0;justify-self:center;width:min(100%,440px);
  animation:baldkommen 1.1s .3s cubic-bezier(.2,.75,.3,1) both;
}
body.tafel .teamfoto picture,body.tafel .teamfoto > img{
  position:relative;z-index:1;display:block;background:#fff;padding:10px 10px 0;
  transform:rotate(-2.5deg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(212,178,106,.35);
}
body.tafel .teamfoto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
body.tafel .teamfoto figcaption{
  position:relative;z-index:1;margin:-1px 0 0;background:#fff;padding:12px 12px 14px;transform:rotate(-2.5deg);
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(212,178,106,.35);
}
body.tafel .teamfoto strong{font-family:var(--serif);font-size:19px;font-weight:600;color:#1E2622}
body.tafel .teamfoto span{font-family:Jost,sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#66716C}
body.tafel .teamfoto > picture + figcaption,body.tafel .teamfoto > img + figcaption{clip-path:inset(0 -60px -60px -60px)}
body.tafel .teamtext-bild{display:block;width:72px;height:72px;margin-bottom:12px;overflow:hidden;border:1px solid var(--linie)}
body.tafel .teamtext-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){ body.tafel .teamfoto{animation:none !important} }

/* ---- Was noch kommt */
body.tafel .wirte-fahrplan{padding:clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0}
body.tafel .fahrplan-satz{margin:-14px 0 26px;font-family:Jost,sans-serif;font-size:16.5px;line-height:1.6;color:var(--tinte-2);max-width:66ch}
body.tafel .fahrplan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){ body.tafel .fahrplan{grid-template-columns:1fr} }
body.tafel .fahrplan li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;
  padding:18px 18px 18px 16px;background:var(--flaeche);border:1px dashed color-mix(in srgb,var(--gold) 55%,var(--linie));
}
body.tafel .fahrplan li > .ic{font-size:22px;stroke-width:1.5;color:var(--gold-schrift);margin-top:2px}
body.tafel .fahrplan b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.2;color:var(--tinte);margin-bottom:4px}
body.tafel .fahrplan span{font-family:Jost,sans-serif;font-size:14px;line-height:1.5;color:var(--tinte-2)}
body.tafel .fahrplan em{
  font-style:normal;font-family:Jost,sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-schrift);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);padding:4px 8px;white-space:nowrap;
}
body.tafel .fahrplan-wunsch{border-style:solid;background:color-mix(in srgb,var(--gold-sanft) 55%,var(--flaeche))}
body.tafel .fahrplan-wunsch a{
  font-family:Jost,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--tief);background:var(--gold);padding:8px 12px;text-decoration:none;
}
body.tafel .fahrplan-wunsch a:hover{background:#E2C27C}
@media (max-width:560px){
  body.tafel .fahrplan li{grid-template-columns:auto minmax(0,1fr)}
  body.tafel .fahrplan em,body.tafel .fahrplan-wunsch a{grid-column:2;justify-self:start}
}

/* Noch keine Zeiten hinterlegt — gesagt, nicht verschwiegen. */
body.tafel .zeiten-fehlen{margin:0;line-height:1.55}
body.tafel .zeiten-fehlen a{display:inline-block;margin-top:4px;color:var(--gold-schrift)}

/* Auch die letzten weichen Ecken: Auswahlfelder, die Gründe im Melden-Fenster,
   das Schließkreuz am App-Band und die Kachel im Kopf. Rund bleiben nur die
   echten Kreise und Pillen — ein Punkt ist keine Umrandung. */
body.tafel select,
body.tafel .meldegrund,
body.tafel .appband-zu,
body.tafel .kopfkachel{border-radius:0}

/* Das Widget im Stil der Tafel: nur die Karte, kein Rand, ein Link darunter */
/* Der Rahmen steht auf einer fremden Seite: kein eigener Grund dahinter,
   die Karte mittig und nicht breiter als auf der Ortsseite. */
body.tafel.einbett{padding:0;background:transparent}
body.tafel.einbett .inhalt--einbett{padding:0}
body.tafel.einbett .lokalliste--vorschau{margin:0 auto;max-width:560px}
body.tafel.einbett .einbett-fuss{margin:10px auto 0;max-width:560px;padding:0 4px 6px;text-align:center;font-size:12px}
body.tafel.einbett .einbett-fuss a{color:var(--gold);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 50%,transparent)}

/* ---- Kacheln: dieselben Tafeln, nur Haus, Preis und Hauptspeisen -------- */
body.tafel .lokalliste--kacheln{column-count:3;column-gap:20px}
@media (max-width:1100px){body.tafel .lokalliste--kacheln{column-count:2}}
@media (max-width:640px){body.tafel .lokalliste--kacheln{column-count:1}}
body.tafel .lokalliste--kacheln > .lokalkarte{margin-bottom:20px;padding:22px 24px 18px}
body.tafel .lokalliste--kacheln .kartenbild{display:none}
body.tafel .lokalliste--kacheln .merkmalzeile,
body.tafel .lokalliste--kacheln .getraenkeblock,
body.tafel .lokalliste--kacheln .preistafel,
body.tafel .lokalliste--kacheln .band,
body.tafel .lokalliste--kacheln .wochenangebote,
body.tafel .lokalliste--kacheln .wochenteil,
body.tafel .lokalliste--kacheln .menue-notiz,
body.tafel .lokalliste--kacheln .gericht-zusatz,
body.tafel .lokalliste--kacheln .gericht-beschreibung{display:none}
body.tafel .lokalliste--kacheln .lokalname{font-size:22px}
body.tafel .lokalliste--kacheln .gericht{padding-top:6px;padding-bottom:6px}
/* Drei Spalten sind schmäler als zwei: Hauptspeise und Preis eine Stufe
   kleiner, damit „Gebratenes Huhn mit rotem Curry" nicht auf vier Zeilen
   umbricht. Bei zwei Spalten (unter 1100px) gilt wieder die große Schrift. */
@media (min-width:1101px){
  body.tafel .lokalliste--kacheln .gericht-name,body.tafel .lokalliste--kacheln .preis{font-size:16.5px}
  body.tafel .lokalliste--kacheln .gericht--neben .gericht-name,body.tafel .lokalliste--kacheln .gericht--neben .preis{font-size:14.5px}
}
/* Auch die Kachel braucht unten Platz für die Kerbe — sonst sitzt „Teilen" darin. */
body.tafel .lokalliste--kacheln .tafel-fuss{margin-top:12px;padding-top:10px;padding-bottom:34px}

/* Die Merkmale im Filter in vier Gruppen */
body.tafel .chipgruppe{display:block;margin:10px 0 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
body.tafel .chipgruppe:first-child{margin-top:0}

/* Die Woche: Montag bis Freitag stehen immer da, leere Tage mit Grund. Das
   Raster bleibt flexibel — sieben feste Spalten passten in den Hauptbereich
   nicht, die Namen brachen nach jedem Buchstaben. */
body.tafel .wochenliste--spalten{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
body.tafel .wochenzeile--leer{opacity:.72;min-height:0}
body.tafel .wochenzeile--leer .wochenzeile-text{font-style:italic}

/* Die eingebettete Tafel: abgeschaltete Elemente. Alles an ist die Gastkarte;
   jede Klasse nimmt genau ein Stück weg. Die Breite kommt als Maß am main. */
body.tafel.einbett .inhalt--einbett{margin:0 auto}
body.tafel.einbett .lokalliste--vorschau{max-width:none}
body.tafel.einbett .einbett-fuss{max-width:none}
body.tafel.einbett .ohne-bild .kartenbild,
body.tafel.einbett .ohne-bild .bildherz,
body.tafel.einbett .ohne-vorzeile .vorzeile,
body.tafel.einbett .ohne-titel .lokalname,
body.tafel.einbett .ohne-meta .lokal-meta,
body.tafel.einbett .ohne-merkmale .merkmalzeile,
body.tafel.einbett .ohne-stufen .preisstufen,
body.tafel.einbett .ohne-getraenke .getraenkeblock,
body.tafel.einbett .ohne-erweitern .preistafel,
body.tafel.einbett .ohne-notiz .menue-notiz,
body.tafel.einbett .ohne-woche .wochenangebote,
body.tafel.einbett .ohne-woche .wochenteil,
body.tafel.einbett .ohne-herz .merken,
body.tafel.einbett .ohne-herz .bildherz,
body.tafel.einbett .ohne-beisatz .gericht-zusatz,
body.tafel.einbett .ohne-preise .preis,
body.tafel.einbett .ohne-preise .preistafel .mono,
body.tafel.einbett .ohne-preise .dealblock,
body.tafel.einbett .ohne-fuss .tafel-fuss,
body.tafel.einbett .ohne-fuss .einbett-fuss{display:none !important}
body.tafel.einbett .ohne-bild .lokalkarte{padding-top:28px}
body.tafel.einbett .ohne-titel.ohne-vorzeile .goldstrich{display:none}
/* Auf einer fremden Webseite gibt es kein „Zum Lokal", kein Teilen und kein
   Merken am Fuß der Karte — das sind Wege durch unsere Seite. Der Link unter
   der Karte („Alle Tage auf mittagsmenues.info") bleibt und ist schaltbar. */
body.tafel.einbett .tafel-fuss{display:none !important}
/* Der Tag-Umschalter in der Karte: dieselben Kacheln wie über der Ortsseite,
   nur in den Farben der Karte statt in Weiß auf Schwarz. */
body.tafel.einbett .tagwahl--karte{margin:16px 0 0;max-width:none;justify-content:center}
body.tafel.einbett .tagwahl--karte .tagwahl-band{flex-wrap:wrap;justify-content:center;overflow:visible;gap:5px}
body.tafel.einbett .tagwahl--karte .tagwahl-tag{
  min-width:0;padding:7px 10px 6px;border-color:var(--linie-2);color:var(--tinte-2);
}
body.tafel.einbett .tagwahl--karte .tagwahl-zahl{color:var(--tinte);font-size:15px}
body.tafel.einbett .tagwahl--karte .tagwahl-tag:hover{border-color:var(--gold);color:var(--tinte)}
body.tafel.einbett .tagwahl--karte .tagwahl-tag.ist-leer{border-color:var(--linie);color:var(--tinte-3)}
body.tafel.einbett .tagwahl--karte .tagwahl-tag.ist-leer .tagwahl-zahl{color:var(--tinte-3)}
body.tafel.einbett .tagwahl--karte .tagwahl-tag.ist-gewaehlt{background:var(--gold);border-color:var(--gold);color:var(--tief)}
body.tafel.einbett .tagwahl--karte .tagwahl-tag.ist-gewaehlt .tagwahl-zahl{color:var(--tief)}
/* Die Wochenansicht: jeder Tag ein Schild mit dem Datum als Marke */
body.tafel .tageskasten--woche + .tageskasten--woche{margin-top:26px}
body.tafel .tageskasten--woche .abschnittsmarke b{font-family:var(--serif);font-weight:500;font-size:13px;
  letter-spacing:0;text-transform:none;color:var(--gold-schrift);margin-left:2px}
body.tafel .tageskasten--woche .wochenleer{
  margin:0;padding:22px 14px 14px;border:1px solid color-mix(in srgb,var(--gold) 46%,var(--linie));
  font-family:Jost,sans-serif;font-size:13.5px;font-style:italic;color:var(--tinte-3);text-align:center;
}
body.tafel .tageskasten--woche .abschnittsmarke:has(+ .wochenleer){margin-bottom:-8px;margin-left:9px}

/* Allergene: Buchstaben sind ein Knopf, der Klartext klappt darunter aus */
body.tafel button.allergenzeile{background:none;border:0;padding:0 2px;cursor:pointer;color:var(--tinte-3);
  border-bottom:1px dotted color-mix(in srgb,var(--tinte-3) 60%,transparent)}
body.tafel button.allergenzeile[aria-expanded="true"]{color:var(--gold-schrift);border-bottom-color:var(--gold)}
body.tafel .allergenliste{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0 2px;
  font-family:Jost,sans-serif;font-size:12px;color:var(--tinte-2)}
body.tafel .allergenliste .allergen b{font-weight:600;letter-spacing:.06em;color:var(--tinte-3);margin-right:2px}

/* Teilen je Menü im Tafelfuß: wie „Merken", nur mit Pfeil */
body.tafel .teilen-klein{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  font-family:Jost,sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tinte-2)}
body.tafel .teilen-klein:hover{color:var(--gold-schrift)}
body.tafel .teilen-klein .ic{font-size:13px}

/* Die ausgeklappte Allergenliste gehört in die Textspalte der Dazu-Zeile,
   nicht in die Punktspalte — sonst rutscht der Name nach rechts. */
body.tafel .preistafel .gericht--dazu > .allergenliste{grid-column:2;min-width:0}
/* Die eingebettete Tafel ist eine Karte, nicht zwei Spalten */
body.tafel.einbett .lokalliste{column-count:1}


/* Landingpages je Suchbegriff */
body.tafel .landing-zahlen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
body.tafel .landing-zahl{flex:1 1 180px;max-width:260px;padding:18px 20px;background:var(--flaeche);border:1px solid var(--linie);text-align:center}
body.tafel .landing-zahl b{display:block;font-family:var(--serif);font-size:34px;font-weight:600;color:var(--gold-schrift)}
body.tafel .landing-zahl span{font-size:13px;color:var(--tinte-2)}
body.tafel .landing-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
body.tafel .landing-haus{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:var(--flaeche);border:1px solid var(--linie);text-decoration:none;color:var(--tinte)}
body.tafel .landing-haus:hover{border-color:var(--gold)}
body.tafel .landing-haus-name{font-family:var(--serif);font-size:20px;font-weight:600}
body.tafel .landing-haus-gericht{font-size:14px;color:var(--tinte-2)}
body.tafel .landing-frage{border-top:1px solid var(--linie);padding:12px 0}
body.tafel .landing-frage summary{cursor:pointer;font-family:var(--serif);font-size:19px;font-weight:600}
body.tafel .landing-frage p{margin:8px 0 0;color:var(--tinte-2);max-width:70ch}

/* ---- Wo bist du? Standortwahl auf Startseite und Tafel -------------------- */
body.tafel .standortblock{max-width:720px;margin:0 auto 8px;padding:26px 24px 22px;background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--s1)}
body.tafel .standortblock-titel{margin:0 0 12px;font-family:var(--serif);font-size:24px;font-weight:600}
body.tafel .standort-bisher{margin:0 0 12px}
body.tafel .standortwahl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
body.tafel .standort-gps{border-radius:0}
body.tafel .standort-oder{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-3)}
body.tafel .standort-formular{display:flex;flex:1 1 320px;gap:8px;min-width:0}
body.tafel .standort-feld{flex:1 1 auto;min-width:0;padding:11px 13px;border:1px solid var(--linie-2);border-radius:0;background:var(--flaeche);color:var(--tinte);font-family:Jost,sans-serif;font-size:15px}
body.tafel .standort-feld:focus{outline:2px solid var(--gold);outline-offset:-2px}
body.tafel .standort-formular .knopf{border-radius:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
body.tafel .ortliste-title,body.tafel .ortliste-titel{max-width:720px;margin:28px auto 0;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-3)}
body.tafel .ortliste{max-width:720px;margin-left:auto;margin-right:auto;margin-top:10px}
@media (max-width:560px){
  body.tafel .standortwahl{flex-direction:column;align-items:stretch}
  body.tafel .standort-oder{text-align:center}
  body.tafel .standort-formular{flex-direction:column}
}
/* Der Chip unter dem Datum: wo die Tafel spielt, und „ändern" */
body.tafel .standortchip{
  display:inline-flex;align-items:center;gap:6px;margin:2px auto 0;padding:7px 14px;border:1px solid rgba(255,255,255,.3);border-radius:0;
  background:transparent;color:#fff;font-family:Jost,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
body.tafel .standortchip:hover{border-color:var(--gold)}
body.tafel .standortchip .ic{color:var(--gold);font-size:14px}
body.tafel .standortchip em{font-style:normal;color:rgba(255,255,255,.6)}
body.tafel .standortchip b{font-weight:600;color:var(--gold);margin-left:4px}
/* Das Fenster: Standortwahl, Umkreis, Orte */
body.tafel .standortfenster .standortwahl{margin-top:14px}
body.tafel .umkreiswahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
body.tafel .umkreiswahl .chip{text-decoration:none;border-radius:0}
body.tafel .umkreiswahl .chip.ist-an{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
body.tafel .standort-orte{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
body.tafel .standort-orte a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie-2)}
body.tafel .standort-orte a.ist-an{color:var(--gold-schrift);border-color:var(--gold)}

/* ---- Die Startseite: dieselbe Bühne wie die Tafel, eine Frage darauf ---- */
/* Volle Bildschirmhöhe: Kopf, Bühne, Fuß — die Bühne nimmt den Rest und
   stellt die Frage in die Mitte, der Fuß steht unten. Kein heller Rest. */
body.tafel:has(.tafelkopf--start){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--tief)}
body.tafel:has(.tafelkopf--start) > main.inhalt{flex:1 1 auto;display:flex;flex-direction:column;max-width:none;padding:0;margin:0}
body.tafel:has(.tafelkopf--start) > .fuss{margin-top:0}
/* Kein Handy-Kasten und kein Handy-Band auf der Startseite: eine Frage, sonst nichts */
body.tafel:has(.tafelkopf--start) .fuss .appkasten,
body.tafel:has(.tafelkopf--start) .appband{display:none}
body.tafel .tafelkopf--start{flex:1 1 auto;display:flex;align-items:center;justify-content:center;margin:0;padding:48px 24px 56px}
body.tafel .tafelkopf--start .tafelkopf-in{width:100%}
body.tafel .tafelkopf--start .vorzeile{font-family:var(--schreib);font-size:30px;color:var(--gold);line-height:1}
body.tafel .tafelkopf--start h1{margin-top:2px}
/* Der Kasten: hell im hellen Modus; im dunklen Modus getöntes Dunkel mit
   demselben Goldrahmen wie „Wünsche & Feedback" im Fuß. Die Farben hängen
   an eigenen Token, damit nur diese im dunklen Modus wechseln. */
body.tafel .startwahl{
  --sw-grund:#F7F5F0;--sw-tinte:#1E2622;--sw-tinte-2:#525E59;--sw-tinte-3:#66716C;
  --sw-feld:#FFFFFF;--sw-linie:#D9D4C7;--sw-rahmen:transparent;--sw-schatten:0 24px 60px rgba(0,0,0,.45);
  width:100%;max-width:760px;margin:22px auto 0;padding:28px 28px 22px;text-align:center;
  background:var(--sw-grund);color:var(--sw-tinte);border:1px solid var(--sw-rahmen);box-shadow:var(--sw-schatten);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.tafel .startwahl{
    --sw-grund:#161412;--sw-tinte:#EFEDE6;--sw-tinte-2:#BCBAB3;--sw-tinte-3:#9C9A93;
    --sw-feld:#1E1C19;--sw-linie:rgba(255,255,255,.22);--sw-rahmen:color-mix(in srgb,var(--gold) 46%,rgba(255,255,255,.22));--sw-schatten:none;
  }
}
:root[data-theme="dark"] body.tafel .startwahl{
  --sw-grund:#161412;--sw-tinte:#EFEDE6;--sw-tinte-2:#BCBAB3;--sw-tinte-3:#9C9A93;
  --sw-feld:#1E1C19;--sw-linie:rgba(255,255,255,.22);--sw-rahmen:color-mix(in srgb,var(--gold) 46%,rgba(255,255,255,.22));--sw-schatten:none;
}
body.tafel .startwahl-titel{margin:0 0 14px;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--sw-tinte)}
body.tafel .startwahl-bisher{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 14px;font-size:14px;color:var(--sw-tinte-2)}
body.tafel .startwahl-bisher .ic,body.tafel .startwahl-bisher a{color:var(--gold-schrift)}
body.tafel .startwahl .standortwahl{justify-content:center}
body.tafel .startwahl .standort-oder{color:var(--sw-tinte-3)}
body.tafel .startwahl .standort-formular{flex:1 1 100%;max-width:620px;margin:0 auto}
body.tafel .startwahl .standort-feld{height:46px;background:var(--sw-feld);color:var(--sw-tinte);border-color:var(--sw-linie)}
body.tafel .startwahl .standort-feld::placeholder{color:var(--sw-tinte-3)}
body.tafel .startwahl .standort-formular .knopf{height:46px;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;background:transparent;color:var(--sw-tinte);border:1px solid var(--sw-tinte)}
body.tafel .startwahl .standort-formular .knopf:hover{background:var(--sw-tinte);color:var(--sw-grund)}
body.tafel .startwahl .standort-gps{padding:0 18px;height:46px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:8px;background:#C9A45C;color:#0A0A0A;border-color:#C9A45C}
body.tafel .startwahl .standort-gps:hover{background:#B8933F;border-color:#B8933F}
body.tafel .startwahl-hinweis{max-width:56ch;margin:16px auto 0;font-size:12.5px;line-height:1.5;color:var(--sw-tinte-2)}
@media (max-width:560px){
  body.tafel .tafelkopf--start{padding:32px 16px 40px}
  body.tafel .startwahl{padding:20px 16px 16px}
}