/* =============================================================================
   Mini Cafe · Entwürfe v2 · bausteine.css
   Alle wiederkehrenden Bausteine. Eine HTML-Struktur, zwei Looks:
   Unterschiede stehen als  html[data-look="dunkel"] …  direkt unter dem Baustein.
   Übersicht und Beispiele: v2/LIESMICH.md und v2/bausteine.html
   ============================================================================= */

/* ===================== Symbole ===================== */
.symbol { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-look="dunkel"] .symbol { stroke-width: 1.7; }
[data-zeichnung] > svg { width: 100%; height: 100%; }
[data-logo] { display: inline-flex; }
.zeichnung { display: inline-block; width: 44px; height: 44px; flex: none; color: var(--text); }
.zeichnung > svg { width: 100%; height: 100%; }
.logo { display: inline-flex; color: var(--logo-farbe); }
.logo > svg { display: block; width: 100%; height: auto; }
.muenze-bild { width: 30px; height: 30px; flex: none; }

/* ===================== Zum Inhalt springen (Tastatur) ===================== */
.springen { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 14px 20px; border-radius: var(--rund-pille); background: var(--haupt); color: var(--auf-haupt); font-weight: var(--gewicht-knopf); }
.springen:focus { top: 12px; }

/* ===================== Kopfzeile ===================== */
.kopf {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  height: var(--kopf-h);
  padding-left: var(--rand);
  background: var(--grund);
}
.kopf-logo { display: inline-flex; align-items: center; flex: none; min-height: var(--tippen); margin-right: 10px; color: var(--logo-farbe); }
.kopf-logo svg { display: block; height: var(--logo-h); width: auto; }
.kopf-nav { display: none; }
.kopf-werkzeuge { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kopf .kopf-konto { display: none; }
.kopf-menue { flex: none; }

/* Sprache: Computer zwei Links „DE | EN“, Handy ein Schalter mit beiden Kürzeln */
.sprache { display: none; align-items: center; height: var(--tippen); font: 600 17px/1 var(--schrift); color: var(--text-neben); }
.sprache a { display: inline-grid; place-items: center; min-width: 40px; height: var(--tippen); padding: 0 4px; }
.sprache a[aria-current="true"] { color: var(--text); font-weight: 800; }
.sprache .strich { color: var(--text-still); }
.sprache-schalter { display: inline-flex; align-items: center; gap: 4px; height: var(--tippen); padding: 0 6px; border-radius: var(--rund-pille); font: 700 14px/1 var(--schrift); color: var(--text-neben); }
.sprache-schalter .ist-aktiv { color: var(--text); }
.sprache-schalter .strich { color: var(--text-still); font-weight: 400; }
html[data-look="dunkel"] .sprache { font-size: 15px; }
html[data-look="dunkel"] .sprache a[aria-current="true"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
html[data-look="dunkel"] .sprache-schalter { padding: 0 11px; background: var(--flaeche-tief); font-weight: 600; font-size: 15px; }

/* Bestellen-Pille am rechten Rand (Haven) */
.bestellen {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 52px; padding: 0 22px 0 26px;
  border-radius: var(--rund-pille) 0 0 var(--rund-pille);
  background: var(--haupt); color: var(--auf-haupt);
  font: var(--gewicht-knopf) 16px/1 var(--schrift); white-space: nowrap;
  transition: background-color 160ms var(--kurve-druck);
}
.bestellen:active { background: var(--haupt-druck); }
html[data-look="dunkel"] .bestellen { height: 48px; padding: 0 20px 0 22px; font-size: 17px; }
/* Dunkel am Handy: volle Pille mit Abstand zum Rand, wirkt nicht abgeschnitten (F4, Punkt 1) */
@media (max-width: 1023.98px) {
  .bestellen, html[data-look="dunkel"] .bestellen { border-radius: var(--rund-pille); margin-right: 12px; }   /* hell wie dunkel (F25) */
}

/* Schmaler Kopf (Handy: Produktseite, Baukasten): Zurück · Titel · Warenkorb */
.kopf--schmal {
  display: none; position: sticky; top: 0;
  grid-template-columns: var(--tippen) minmax(0, 1fr) var(--tippen) var(--tippen); align-items: center; gap: 8px;
  height: 60px; padding: 0 var(--rand);
}
.kopf-titel { font: var(--gewicht-titel) 20px/1.1 var(--schrift-titel); letter-spacing: var(--sperrung-klein); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-look="hell"] .kopf--schmal .rund { background: var(--flaeche); }
html[data-look="dunkel"] .kopf-titel { font-size: 26px; text-align: left; }
@media (max-width: 1023.98px) {
  body[data-kopf="schmal"] .kopf--voll { display: none; }
  body[data-kopf="schmal"] .kopf--schmal { display: grid; }
}
/* Schmale Handys: Kopf rückt enger zusammen (390 px und breiter bleibt unverändert).
   Das Quer-Logo wird nur skaliert (26 px hoch), Tippflächen bleiben ≥ 44 px. */
@media (max-width: 389.98px) {   /* 380–389 px und kleiner */
  .kopf { gap: 4px; }
  .kopf-logo { margin-right: 6px; }
  .kopf-logo svg { height: 26px; }
  .kopf-werkzeuge { gap: 4px; }
  .sprache-schalter, html[data-look="dunkel"] .sprache-schalter { min-width: var(--tippen); justify-content: center; padding: 0 4px; }
  .bestellen, html[data-look="dunkel"] .bestellen { padding: 0 16px 0 20px; font-size: 15px; }
}
@media (max-width: 349.98px) {   /* 320–349 px: etwas enger, damit nichts über den Rand ragt */
  .kopf { padding-left: 12px; }
  .kopf-logo { margin-right: 2px; }
  .kopf-werkzeuge { gap: 2px; }
  .sprache-schalter, html[data-look="dunkel"] .sprache-schalter { padding: 0 2px; font-size: 13px; gap: 3px; }
  .bestellen, html[data-look="dunkel"] .bestellen { padding: 0 12px 0 14px; font-size: 14px; }
}
@media (min-width: 1024px) {
  .kopf { position: sticky; top: 0; gap: 36px; }
  .kopf-logo { margin-right: 0; }
  .kopf-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
  .kopf-nav a { padding: 14px 0; font: 600 17px/1 var(--schrift); color: var(--text); text-decoration-thickness: 2px; text-underline-offset: 8px; transition: color 160ms; }
  .kopf-nav a[aria-current="page"] { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-linie); }
  .kopf-werkzeuge { margin-left: 0; gap: 12px; }
  .sprache { display: flex; }
  .sprache-schalter { display: none; }
  .kopf .kopf-konto { display: grid; }
  .kopf .kopf-menue { display: none; }
  .bestellen { height: 60px; padding: 0 30px 0 34px; font-size: 18px; }
  html[data-look="dunkel"] .kopf-nav { margin-left: 20px; }
  html[data-look="dunkel"] .kopf-nav a { font-weight: 500; }
  html[data-look="dunkel"] .kopf-werkzeuge { margin-left: auto; }
  html[data-look="dunkel"] .bestellen { height: 56px; padding: 0 34px 0 32px; font-size: 18px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .kopf { gap: 20px; }
  .kopf-logo svg { height: 38px; }
  .kopf-nav { gap: 18px; }
  .kopf-nav a { font-size: 15px; }
  html[data-look="dunkel"] .kopf-nav { margin-left: 0; }
  .kopf-werkzeuge { gap: 8px; }
}
@media (hover: hover) and (pointer: fine) {
  .kopf-nav a:hover { color: var(--link); }
  html[data-look="dunkel"] .kopf-nav a:hover { color: var(--akzent); }
  .bestellen:hover { background: var(--haupt-druck); }
}

/* ===================== Infozeile (lebende Abholzeit) ===================== */
.infozeile-leiste { padding: 0 var(--rand); }
.infozeile {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px;
  min-height: 34px; padding: 0 0 8px;
  font: 500 14px/1.35 var(--schrift); color: var(--text);
}
.info-oeffnung { font-weight: 600; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
html[data-look="dunkel"] .infozeile { font-size: 15px; }
@media (min-width: 1024px) { .infozeile, html[data-look="dunkel"] .infozeile { font-size: 15px; } }
.info-trenner { color: var(--text-neben); }
html[data-look="dunkel"] .info-oeffnung { font-weight: 500; }

.live { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--gewicht-stark); color: var(--live); }
.live-zeit { color: var(--live-zeit); font-weight: var(--gewicht-stark); }
.live-punkt { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--live-punkt); }
.live-punkt::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: var(--live-punkt); opacity: .18; animation: mc-atmen 2.4s var(--kurve-gleiten) infinite; }
.live.ist-zu { color: var(--text); }
.live.ist-zu .live-punkt { background: var(--text-still); }
.live.ist-zu .live-punkt::after { display: none; }
@keyframes mc-atmen { 0%, 100% { transform: scale(.6); opacity: .25; } 50% { transform: scale(1.15); opacity: .08; } }
html[data-look="dunkel"] .live { font-weight: 500; }
html[data-look="dunkel"] .live-punkt::after { inset: 0; opacity: .7; animation: mc-puls 2.4s var(--kurve-gleiten) infinite; }
html.bild[data-look="dunkel"] .live-punkt::after { display: none; }
@keyframes mc-puls { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* Infokarte (z. B. im Startbild): Öffnungszeit + Adresse */
.infokarte {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: center;
  padding: 13px 16px; border-radius: 20px; background: var(--flaeche);
  font-size: var(--gr-klein); line-height: 1.35;
}
.infokarte-zeile { display: contents; }
.infokarte-zeile .symbol { width: 20px; height: 20px; color: var(--haupt); }
.infokarte-bild { display: none; }
html[data-look="dunkel"] .infokarte { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding: 10px 16px 10px 10px; border-radius: var(--rund-karte); font-size: 15px; }
html[data-look="dunkel"] .infokarte-bild { display: block; grid-row: 1 / span 2; width: 52px; height: 66px; }
html[data-look="dunkel"] .infokarte-bild img { object-view-box: inset(5% 1% 63% 57%); }
html[data-look="dunkel"] .infokarte-zeile { display: block; grid-column: 2; }
html[data-look="dunkel"] .infokarte-zeile .symbol { display: none; }
html[data-look="dunkel"] .infokarte-zeile:first-of-type { align-self: end; font-size: 16px; }
html[data-look="dunkel"] .infokarte-zeile:last-of-type { align-self: start; color: var(--text-neben); }

/* ===================== Knöpfe ===================== */
/* Genau ein Hauptknopf-Stil (.knopf) und ein Nebenknopf (.knopf--neben). */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px;
  border-radius: var(--rund-pille);
  background: var(--haupt); color: var(--auf-haupt);
  font: var(--gewicht-knopf) var(--gr-knopf)/1 var(--schrift); letter-spacing: -0.005em;
  white-space: nowrap; text-align: center;
  transition: transform var(--dauer-druck) var(--kurve-druck), background-color 160ms var(--kurve-druck);
}
.knopf:active { transform: scale(.97); background: var(--haupt-druck); }
.knopf--neben { background: var(--flaeche-tief); color: var(--text); }
.knopf--neben:active { background: var(--flaeche-druck); }
.knopf--breit { display: flex; width: 100%; }
.knopf--klein { min-height: 48px; padding: 0 18px; font-size: 15px; gap: 8px; }
.knopf--gross { min-height: 60px; font-size: 18px; }
.knopf .preis { font-weight: 800; }
.knopf[aria-disabled="true"], .knopf:disabled { background: var(--aus-knopf); color: var(--text-neben); cursor: not-allowed; transform: none; }
/* Trenner zwischen Text und Preis: hell = feiner Strich, dunkel = Punkt */
.trenner { width: 1.5px; height: 22px; flex: none; background: currentColor; opacity: .35; border-radius: 2px; }
html[data-look="dunkel"] .knopf { gap: .5em; }
html[data-look="dunkel"] .knopf .preis { font-weight: 600; }
html[data-look="dunkel"] .trenner { width: auto; height: auto; background: none; opacity: 1; }
html[data-look="dunkel"] .trenner::before { content: "·"; }
@media (hover: hover) and (pointer: fine) {
  .knopf:not([aria-disabled="true"]):not(:disabled):hover { background: var(--haupt-druck); }
  .knopf--neben:not([aria-disabled="true"]):hover { background: var(--flaeche-druck); }
}

/* Textlink (z. B. „Alle anzeigen“) */
.textlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tippen);
  font-weight: 600; color: var(--link);
  text-decoration: underline; text-decoration-color: var(--link-linie);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
html[data-look="dunkel"] .textlink { font-size: 17px; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { text-decoration-thickness: 2.5px; }
  html[data-look="dunkel"] .textlink:hover { text-decoration-color: var(--text); }
}

/* Runde Knöpfe (Symbol), runder „+“-Knopf, Zähler */
.rund {
  position: relative; flex: none;
  width: var(--tippen); height: var(--tippen);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--flaeche-tief); color: var(--text);
  transition: transform var(--dauer-druck) var(--kurve-druck), background-color 160ms var(--kurve-druck);
}
.rund:active { transform: scale(.94); background: var(--flaeche-druck); }
.rund .symbol, .rund > svg { width: 22px; height: 22px; }
.rund--hell { background: var(--flaeche); }
.rund--gross { width: 56px; height: 56px; }
.rund--gross .symbol { width: 24px; height: 24px; }
.plus {
  position: relative; flex: none;
  width: var(--tippen); height: var(--tippen);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--plus); color: var(--auf-plus);
  transition: transform var(--dauer-druck) var(--kurve-druck), background-color 160ms var(--kurve-druck);
}
.plus:active { transform: scale(.92); background: var(--plus-druck); }
.plus .symbol, .plus > svg { width: 20px; height: 20px; stroke-width: 2.2; }
.zaehler {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--rund-pille);
  background: var(--akzent); color: var(--auf-akzent);
  font: 800 12px/20px var(--schrift); text-align: center;
  font-variant-numeric: tabular-nums;
}
.zaehler[hidden] { display: none; }
html[data-look="dunkel"] .zaehler { min-width: 22px; height: 22px; padding: 0 6px; font: 700 13px/22px var(--schrift); }
@media (hover: hover) and (pointer: fine) {
  .rund:hover { background: var(--flaeche-druck); }
  .plus:hover { background: var(--plus-druck); }
}

/* Zähler hüpft (MC.huepf(element)) */
.huepf { animation: mc-huepf .42s var(--kurve-gleiten); }
@keyframes mc-huepf { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* fliegendes Bild (MC.fliegen) */
.flug { position: fixed; z-index: 90; pointer-events: none; margin: 0; object-fit: contain; }

/* ===================== Chips ===================== */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 0 var(--rand); scroll-padding: 0 var(--rand);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: var(--tippen); padding: 0 18px 0 13px;
  border-radius: var(--rund-pille);
  background: var(--flaeche); color: var(--text);
  font: var(--gewicht-chip) var(--gr-chip)/1 var(--schrift); white-space: nowrap;
  transition: background-color var(--dauer-wechsel) var(--kurve-gleiten), color var(--dauer-wechsel), transform var(--dauer-druck) var(--kurve-druck);
}
.chip:active { transform: scale(.97); }
.chip .symbol { width: 22px; height: 22px; }
.chip.aktiv, .chip[aria-current="true"], .chip[aria-current="page"], .chip[aria-pressed="true"], .chip[aria-checked="true"] {
  background: var(--gewaehlt); color: var(--auf-gewaehlt);
}
.chip[aria-disabled="true"] { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.chip .haken { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); display: grid; place-items: center; }
.chip .haken .symbol { width: 12px; height: 12px; stroke-width: 3; }
html[data-look="dunkel"] .chip { gap: 7px; padding: 0 15px 0 10px; background: var(--flaeche-tief); }
html[data-look="dunkel"] .chip .symbol { width: 24px; height: 24px; }
html[data-look="dunkel"] .chip.aktiv, html[data-look="dunkel"] .chip[aria-current="true"], html[data-look="dunkel"] .chip[aria-current="page"],
html[data-look="dunkel"] .chip[aria-pressed="true"], html[data-look="dunkel"] .chip[aria-checked="true"] { font-weight: 600; background: var(--gewaehlt); color: var(--auf-gewaehlt); }

/* kleine Chips (Filter, Anpassen): sichtbar 36 px, Tippfläche trotzdem 44 px */
.chip--klein { height: 36px; padding: 0 14px 0 10px; gap: 6px; font-size: 14px; background: var(--flaeche-tief); }
.chip--klein::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.chip--klein .symbol { width: 18px; height: 18px; }
.chip--ohne-symbol { padding: 0 14px; }
html[data-look="dunkel"] .chip--klein { height: 40px; padding: 0 14px 0 10px; font-size: 15px; background: var(--flaeche); }
html[data-look="dunkel"] .chip--klein::after { top: -2px; bottom: -2px; }
html[data-look="dunkel"] .chip--klein .symbol { width: 20px; height: 20px; }
html[data-look="dunkel"] .chip--ohne-symbol { padding: 0 14px; }

/* Erledigter Schritt (Baukasten): Chip mit goldenem Haken */
.chip--erledigt { padding: 0 16px 0 10px; background: var(--flaeche); }
.chip--erledigt small { font-weight: 500; color: var(--text-neben); font-size: inherit; }
html[data-look="dunkel"] .chip--erledigt { height: 40px; background: var(--flaeche); font-size: 15px; }

/* Filter-Zeile („Nur zeigen: vegan · ohne Nüsse“) */
.filter { display: flex; align-items: center; gap: 8px; padding: 10px var(--rand) 0; overflow-x: auto; scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
.filter-name { flex: none; font: 600 14px/1 var(--schrift); color: var(--text-neben); margin-right: 2px; }
html[data-look="dunkel"] .filter-name { font-weight: 500; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .chip:not(.aktiv):not([aria-current="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not([aria-checked="true"]):not([aria-disabled="true"]):hover { background: var(--flaeche-druck); }
}

/* Größen-Wahl (Mini / Regular) */
.groesse {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: var(--rund-pille); background: var(--flaeche-tief);
}
.groesse button {
  min-height: 48px; padding: 0 12px; border-radius: var(--rund-pille);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 15px/1.1 var(--schrift); color: var(--text); white-space: nowrap;
  transition: background-color var(--dauer-wechsel) var(--kurve-gleiten), color var(--dauer-wechsel);
}
.groesse .preis { font-size: 13px; font-weight: 500; color: var(--text-neben); }
.groesse button[aria-checked="true"], .groesse button[aria-pressed="true"], .groesse button.aktiv { background: var(--flaeche); font-weight: 700; }
html[data-look="dunkel"] .groesse { display: flex; background: var(--flaeche); }
html[data-look="dunkel"] .groesse button { flex: 1; flex-direction: row; gap: 8px; padding: 0 18px; font: 500 16px/1 var(--schrift); }
html[data-look="dunkel"] .groesse .groesse-ml { display: none; }
html[data-look="dunkel"] .groesse .preis { font-size: 16px; color: var(--text-neben); }
html[data-look="dunkel"] .groesse button[aria-checked="true"], html[data-look="dunkel"] .groesse button[aria-pressed="true"], html[data-look="dunkel"] .groesse button.aktiv { background: var(--gewaehlt); color: var(--auf-gewaehlt); font-weight: 600; }
html[data-look="dunkel"] .groesse button[aria-checked="true"] .preis, html[data-look="dunkel"] .groesse button[aria-pressed="true"] .preis, html[data-look="dunkel"] .groesse button.aktiv .preis { color: var(--auf-gewaehlt); }

/* ===================== Abzeichen ===================== */
.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px;
  border-radius: var(--rund-pille);
  background: var(--akzent); color: var(--auf-akzent);
  font: 700 14px/1 var(--schrift); white-space: nowrap;
}
.abzeichen .symbol { width: 15px; height: 15px; stroke-width: 2; }
.abzeichen .symbol--voll { fill: currentColor; }
.abzeichen--aus { background: var(--aus); color: var(--text); }
.abzeichen--ruhig { background: var(--flaeche-tief); color: var(--text-neben); font-weight: 600; font-size: 13px; height: 26px; padding: 0 11px; }
.abzeichen--platzhalter { background: transparent; color: var(--text-neben); box-shadow: inset 0 0 0 1.5px var(--text-neben); font-weight: 600; font-size: 13px; height: 26px; padding: 0 11px; }
.abzeichen--klaeren { background: var(--klaeren); color: var(--auf-klaeren); font-weight: 600; font-size: 13px; height: 26px; padding: 0 11px 0 8px; }
html[data-look="dunkel"] .abzeichen { font-weight: 600; }
html[data-look="dunkel"] .abzeichen--aus { color: var(--text-neben); }
html[data-look="dunkel"] .abzeichen--ruhig { background: var(--flaeche); }

/* ===================== Foto-Rechteck (früher Rundbogen) ===================== */
/* Fassung 2, Regel 4: Klassenname .bogen bleibt, die Form ist ein ruhiges, normal gerundetes Foto-Rechteck. */
.bogen { overflow: hidden; border-radius: var(--rund-foto); background: var(--flaeche-tief); }
.bogen > img { width: 100%; height: 100%; object-fit: cover; }

/* ===================== Abschnitts-Überschrift ===================== */
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.abschnitt-kopf > div:first-child { min-width: 0; }
.abschnitt-satz { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--text); max-width: 34em; }
.abschnitt-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.abschnitt-zaehler { font: 500 16px/1 var(--schrift); color: var(--text-neben); white-space: nowrap; }
.abschnitt-zaehler b { color: var(--text); font-weight: 600; }
html[data-look="hell"] .abschnitt-zaehler, html:not([data-look]) .abschnitt-zaehler { display: none; }
html[data-look="dunkel"] .abschnitt-kopf { align-items: flex-end; }
/* Kopf mit Abzeichen daneben: Handy untereinander und links (beide Looks), Computer nebeneinander */
@media (max-width: 1023.98px) {
  html[data-look] .abschnitt-kopf:has(> .abzeichen) { flex-direction: column; align-items: flex-start; gap: 12px; }
}
html[data-look="dunkel"] .abschnitt-satz { font-size: 16px; color: var(--text-neben); }
@media (min-width: 1024px) {
  .abschnitt-kopf { align-items: flex-end; }
  html[data-look] .abschnitt-kopf:has(> .abzeichen) { align-items: flex-end; gap: 24px; }
  .abschnitt-r { flex-direction: row; align-items: center; gap: 18px; }
  .abschnitt-satz { font-size: 18px; margin-top: 12px; }
  html[data-look="dunkel"] .abschnitt-satz { font-size: 18px; }
}

/* Abschnitts-Kopf mit Foto im Rundbogen rechts (Speisekarte: Kaffee, Kuchen) */
.abschnitt-kopf--bild { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.abschnitt-kopf--bild > .bogen { width: 112px; height: 146px; }
html[data-look="dunkel"] .abschnitt-kopf--bild { align-items: start; }
html[data-look="dunkel"] .abschnitt-kopf--bild > .bogen { width: 96px; height: 128px; }
@media (min-width: 1024px) {
  .abschnitt-kopf--bild > .bogen, html[data-look="dunkel"] .abschnitt-kopf--bild > .bogen { width: 150px; height: 196px; }
}

/* ===================== Produktzeile (Liste mit rundem „+“) ===================== */
.liste { padding: 4px 0; border-radius: var(--rund-karte); background: var(--flaeche); }
.zeile {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto var(--tippen); align-items: center; gap: 10px;
  min-height: 68px; padding: 10px 10px 10px 12px;
}
.zeile-bild { width: 40px; height: 40px; display: grid; place-items: center; }
.zeile-bild > svg, .zeile-bild > img { width: 100%; height: 100%; object-fit: contain; }
.zeile-name { font: var(--gewicht-name) var(--gr-name)/1.2 var(--schrift); letter-spacing: -0.01em; }
.zeile-info { margin-top: 3px; font: 400 13.5px/1.3 var(--schrift); color: var(--text-neben); }
.zeile .preis { font: var(--gewicht-preis) var(--gr-preis)/1.2 var(--schrift); text-align: right; white-space: nowrap; }
.zeile .preis small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-neben); }
.zeile-anpassen { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.zeile-anpassen .chip--klein:not([aria-pressed="true"]):not([aria-checked="true"]) { background: var(--grund); }
.zeile.ist-aus .zeile-name, .zeile.ist-aus .preis { color: var(--text-neben); }
html[data-look="dunkel"] .liste { padding: 0; background: none; border-radius: 0; }
html[data-look="dunkel"] .zeile { grid-template-columns: 48px minmax(0, 1fr) auto var(--tippen); gap: 12px; min-height: 64px; padding: 6px 0; }
html[data-look="dunkel"] .zeile + .zeile { margin-top: 2px; }
html[data-look="dunkel"] .zeile-bild { width: 48px; height: 48px; color: var(--text); }
html[data-look="dunkel"] .zeile-info { font-size: 15px; margin-top: 2px; }
html[data-look="dunkel"] .zeile .preis small { font-size: 15px; }
html[data-look="dunkel"] .zeile-anpassen .chip--klein:not([aria-pressed="true"]):not([aria-checked="true"]) { background: var(--flaeche); }
@media (min-width: 1024px) {
  /* Liste am Computer zweispaltig (Preistafel) */
  .liste--spalten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; padding: 8px 12px; }
  html[data-look="dunkel"] .liste--spalten { column-gap: 56px; padding: 0; }
}

/* ===================== Produktkarte ===================== */
.karte-produkt { position: relative; display: flex; flex-direction: column; padding: 8px 8px 12px; border-radius: var(--rund-karte); background: var(--flaeche); }
.karte-foto { position: relative; aspect-ratio: 1 / .86; border-radius: var(--rund-foto); overflow: hidden; background: var(--flaeche-tief); }
.karte-foto > img { width: 100%; height: 100%; object-fit: cover; }
.karte-foto--bowl { padding: 6px; }
.karte-foto--bowl > img, .karte-foto--bowl > svg { width: 100%; height: 100%; object-fit: contain; }
/* Etappe A4 (W8): ganzer Teller. Quadratisches Foto im quadratischen Rahmen, nichts hineingezoomt (vorher scale 1.32 + Rahmen 1 : .86). */
.karte-foto--kuchen { aspect-ratio: 1 / 1; }
.karte-foto--kuchen > img { transform: none; object-fit: cover; }
.karte-foto--gezeichnet { display: grid; place-items: center; }
.karte-foto--gezeichnet > svg, .karte-foto--gezeichnet > .zeichnung { width: 54%; height: auto; aspect-ratio: 1; }
.karte-foto--bowl.karte-foto--gezeichnet > svg { width: 100%; height: 100%; }
.karte-name { margin: 10px 6px 0; font: 700 16px/1.2 var(--schrift); letter-spacing: -0.01em; }
.karte-zusatz { margin: 3px 6px 0; font-size: 13px; line-height: 1.3; color: var(--text-neben); }
.karte-unten { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: auto 0 0 6px; padding-top: 8px; }
.karte-unten .preis { font: var(--gewicht-preis) 17px/1 var(--schrift); }
.karte-produkt > .abzeichen { position: absolute; left: 18px; top: 18px; }
.karte-produkt .ausverkauft { display: none; }
.karte-produkt.ist-aus .karte-foto img { filter: grayscale(1) contrast(.85) brightness(1.08); opacity: .55; }
.karte-produkt.ist-aus .karte-name, .karte-produkt.ist-aus .preis { color: var(--text-neben); }
.karte-produkt.ist-aus .plus { visibility: hidden; }
.karte-produkt.ist-aus > .abzeichen--aus { left: 50%; top: calc(8px + (100% - 16px) * .43 / 1.86); transform: translateX(-50%); }
html[data-look="dunkel"] .karte-produkt { padding: 12px 12px 12px 14px; }
html[data-look="dunkel"] .karte-foto { width: 112px; height: 112px; aspect-ratio: auto; margin: 2px auto 10px; border-radius: 50%; background: var(--c-schwarz); }
html[data-look="dunkel"] .karte-foto--kuchen > img { transform: none; object-view-box: var(--ausschnitt, inset(24% 20% 11% 14%)); }
html[data-look="dunkel"] .karte-foto--bowl { padding: 0; background: none; overflow: visible; }
html[data-look="dunkel"] .karte-foto--gezeichnet { background: var(--c-gruen-tief); }
html[data-look="dunkel"] .karte-foto--gezeichnet > svg, html[data-look="dunkel"] .karte-foto--gezeichnet > .zeichnung { width: 60px; height: 60px; color: var(--text); }
html[data-look="dunkel"] .karte-foto--bowl.karte-foto--gezeichnet > svg { width: 100%; height: 100%; padding: 6px; }
html[data-look="dunkel"] .karte-name { margin: 0; font: 500 16px/1.3 var(--schrift); min-height: 2.6em; letter-spacing: 0; }
html[data-look="dunkel"] .karte-zusatz { margin: 3px 0 0; font-size: 14px; }
html[data-look="dunkel"] .karte-unten { margin: auto 0 0; padding-top: 6px; }
/* dunkel: runde Fotos – Abzeichen steht unter dem Foto statt darauf */
html[data-look="dunkel"] .karte-produkt > .abzeichen { position: static; align-self: flex-start; margin: 0 0 8px; height: 26px; font-size: 13px; padding: 0 10px; }
html[data-look="dunkel"] .karte-produkt.ist-aus .karte-foto img { filter: grayscale(1) brightness(.75); opacity: 1; }
html[data-look="dunkel"] .karte-produkt.ist-aus .karte-name, html[data-look="dunkel"] .karte-produkt.ist-aus .preis { color: var(--text-still); }
html[data-look="dunkel"] .karte-produkt.ist-aus > .abzeichen--aus { display: none; }
html[data-look="dunkel"] .karte-produkt.ist-aus .plus { display: none; }
html[data-look="dunkel"] .karte-produkt.ist-aus .ausverkauft { display: inline-flex; align-items: center; min-height: var(--tippen); font: 600 15px/1 var(--schrift); color: var(--text-neben); }

/* ===================== Kacheln (Baukasten: 3 pro Reihe) ===================== */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kachel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-height: 112px; padding: 12px 6px 10px;
  border-radius: var(--rund-kachel);
  background: var(--flaeche); color: var(--text);
  font: 600 14px/1.15 var(--schrift); text-align: center;
  transition: transform var(--dauer-druck) var(--kurve-druck), background-color 160ms var(--kurve-druck), opacity 160ms;
}
.kachel:active { transform: scale(.97); }
.kachel img { width: 58px; height: 58px; object-fit: contain; }
.kachel-name { display: block; }
.kachel-extra { display: block; font: 500 13px/1 var(--schrift); color: var(--text-neben); }
.kachel-haken { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); display: none; place-items: center; }
.kachel-haken .symbol { width: 14px; height: 14px; stroke-width: 3; }
.kachel[aria-pressed="true"], .kachel[aria-checked="true"] { background: var(--gewaehlt); color: var(--auf-gewaehlt); }
.kachel[aria-pressed="true"] .kachel-haken, .kachel[aria-checked="true"] .kachel-haken { display: grid; }
.kachel[aria-pressed="true"] .kachel-extra, .kachel[aria-checked="true"] .kachel-extra { color: inherit; opacity: .8; }
.kachel.ist-gesperrt, .kachel[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
html[data-look="dunkel"] .kachel { min-height: 116px; padding: 10px 6px; gap: 0; font: 500 15px/1.2 var(--schrift); }
html[data-look="dunkel"] .kachel img { width: 56px; height: 56px; }
html[data-look="dunkel"] .kachel-name { margin-top: 6px; }
html[data-look="dunkel"] .kachel-extra { margin-top: 2px; font-size: 14px; }
html[data-look="dunkel"] .kachel[aria-pressed="true"] .kachel-extra, html[data-look="dunkel"] .kachel[aria-checked="true"] .kachel-extra { color: var(--c-gruen-hoch); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .kachel:not(.ist-gesperrt):hover { transform: translateY(-2px); }
}
@media (min-width: 1024px) {
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
}

/* Schritt im Baukasten (Kopf mit Zähler „2/4“), zugeklappter Schritt */
.schritt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schritt-kopf p { margin-top: 4px; font-size: var(--gr-klein); color: var(--text-neben); }
.schritt-zaehler {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 44px; min-width: 64px; padding: 0 16px; border-radius: var(--rund-pille);
  background: var(--haupt); color: var(--auf-haupt);
  font: 800 18px/1 var(--schrift); font-variant-numeric: tabular-nums;
}
html[data-look="dunkel"] .schritt-zaehler { height: 32px; min-width: 0; padding: 0 12px; background: var(--akzent); color: var(--auf-akzent); font: 700 16px/1 var(--schrift); }
.schritt-zu {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 64px; padding: 0 18px; border-radius: var(--rund-karte);
  background: var(--flaeche); color: var(--text); text-align: left;
}
.schritt-zu-name { font: var(--gewicht-titel) 20px/1.1 var(--schrift-titel); letter-spacing: var(--sperrung-klein); }
html[data-look="dunkel"] .schritt-zu-name { font-size: 24px; }
.schritt-zu .schritt-wahl { margin-left: auto; color: var(--text-neben); font-size: var(--gr-klein); }

/* ===================== Schüssel (schuessel.js) ===================== */
.schuessel-feld { position: relative; display: grid; place-items: center; padding: 10px 0 9px; border-radius: var(--rund-gross); background: var(--flaeche-tief); }
.schuessel { position: relative; width: 214px; height: 214px; transition: transform var(--dauer-gleiten) var(--kurve-gleiten); }
.schuessel.ist-mini { transform: scale(.8); }
.schuessel > svg { width: 100%; height: 100%; overflow: visible; }
.schuessel .neu { transform-box: fill-box; transform-origin: center; animation: mc-hinein 600ms var(--kurve-gleiten) both; }
@keyframes mc-hinein { from { transform: translate(40px, -60px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-look="dunkel"] .schuessel-feld { height: 232px; padding: 0; background: none; border-radius: 0; }
html[data-look="dunkel"] .schuessel { width: 212px; height: 212px; }
html[data-look="dunkel"] .schuessel.ist-mini { transform: scale(.755); }
html[data-look="dunkel"] .schuessel .neu { transform-box: fill-box; transform-origin: center; animation: mc-landen .55s var(--kurve-gleiten) both; }
@keyframes mc-landen { 0% { transform: translateY(-60px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (min-width: 1024px) {
  .schuessel { width: 320px; height: 320px; }
  html[data-look="dunkel"] .schuessel-feld { height: 360px; }
  html[data-look="dunkel"] .schuessel { width: 320px; height: 320px; }
}

/* ===================== Produkt-Bühne (buehne.js) ===================== */
/* Fassung 2 (F3, Mahdi 1.4.1 / 2.2.1 / 2.6.1): kein Rundbogen, keine grüne Fläche, kein Goldschein.
   Jedes Produkt ist eine ruhige Fotokarte (abgerundetes Rechteck) direkt auf dem Seitengrund.
   · .ist-foto  = Foto mit echtem Hintergrund: füllt die Karte, nichts hineingezoomt; Papierton darunter
                  (Multiplizieren) macht kalte Studio-Hintergründe warm, ohne das Essen zu verfälschen.
   · .ist-frei  = Freisteller (Bowl, Zutat): liegt auf ruhigem Kartenton mit natürlichem Schatten.
   · .ist-zeichnung = gezeichnetes Produkt (Foto folgt).
   Maße als Variablen – buehne.js liest --gr, --nachbar-1/2, --klein-1/2, --blass-1/2, --dreh, --luecke. */
.buehne {
  --gr: 252px;            /* Breite der Karte in der Mitte               */
  --verh: 1;              /* Höhe/Breite der Karte (1 = quadratisch)      */
  --luft: 14px;           /* Platz über und unter der Karte               */
  --luecke: 16px;         /* Abstand der Karten bei „weniger Bewegung“    */
  --nachbar-1: 242px;     /* Mitte → erster Nachbar                       */
  --nachbar-2: 196px;     /* erster → zweiter Nachbar                     */
  --klein-1: .8;          /* Maßstab erster Nachbar                       */
  --klein-2: .14;         /* Abnahme je weiterer Stelle                   */
  --blass-1: .8;          /* Deckkraft erster Nachbar                     */
  --blass-2: .35;
  --dreh: 16;             /* Grad Drehung je Stelle (nur Freisteller in der Karte) */
  --karte-grund: var(--flaeche);   /* Kartenton unter Freistellern und Zeichnungen */
  --karte-papier: var(--flaeche);  /* Papierton unter Fotos mit Hintergrund        */
  position: relative;
  height: calc(var(--gr) * var(--verh) + 2 * var(--luft));
  margin-inline: calc(-1 * var(--rand));   /* Bühne geht über den Seitenrand bis an den Bildschirmrand */
  outline-offset: 6px;
}
.buehne--hoch { --verh: 1.25; }
.abschnitt-kopf + .buehne { margin-top: 16px; }
.buehne:focus-visible { outline-offset: 6px; border-radius: var(--rund-karte); }
.buehne-spur {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  height: 100%;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  touch-action: pan-x pan-y; cursor: grab;
}
.buehne-spur::-webkit-scrollbar { display: none; }
.buehne-spur::before, .buehne-spur::after { content: ""; flex: 0 0 calc(50% - var(--slot, 200px) / 2); }
.buehne-spur.zieht { cursor: grabbing; scroll-snap-type: none; }
.buehne-spur.gleitet { scroll-snap-type: none; }
.buehne-teil { position: relative; flex: 0 0 var(--slot, 200px); height: 100%; scroll-snap-align: center; }
/* die Karte: ruhiges Rechteck, Tonstufe statt Rahmen oder Leuchten */
.buehne-bild {
  position: absolute; left: 50%; top: var(--luft);
  width: var(--gr); height: calc(var(--gr) * var(--verh)); margin-left: calc(var(--gr) / -2);
  overflow: hidden; border-radius: var(--rund-foto);
  background: var(--karte-grund);
  will-change: transform, opacity;
}
.buehne-bild img, .buehne-bild svg { -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* Foto mit Hintergrund: ganzes Bild, kein Ausschnitt (Kuchen 2.6.2) */
.buehne-teil.ist-foto .buehne-bild { background: var(--karte-papier); }
.buehne-teil.ist-foto .buehne-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: brightness(1.08) sepia(.08); }
.buehne-teil.ist-foto .buehne-bild > img[style*="--ausschnitt"] { object-view-box: var(--ausschnitt); }   /* nur wenn eine Seite es ausdrücklich will */
/* Freisteller: liegt mit Rand in der Karte, natürlicher Schatten, Drehteller */
.buehne-teil.ist-frei .buehne-bild > img,
.buehne-teil.ist-frei .buehne-bild > .buehne-bild-innen {
  position: absolute; left: 9%; top: 9%; width: 82%; height: 82%;
  transform: rotate(var(--drehen, 0deg));
}
.buehne-teil.ist-frei .buehne-bild > img,
.buehne-teil.ist-frei .buehne-bild-innen > img { object-fit: contain; filter: var(--schatten-bowl); }
.buehne-bild-innen { display: block; }
.buehne-bild-innen > img { width: 100%; height: 100%; object-fit: contain; }
/* Zeichnung (Foto folgt) */
.buehne-teil.ist-zeichnung .buehne-bild > .buehne-bild-innen { position: absolute; inset: 12%; }
.buehne-bild-innen > svg { width: 100%; height: 100%; }
/* Abzeichen auf der Karte: „Bowl des Tages“, „Ausverkauft“ */
.buehne-abzeichen { position: absolute; left: 12px; top: 12px; z-index: 2; }
.buehne-folgt { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.buehne-teil.ist-aus .buehne-bild > img,
.buehne-teil.ist-aus .buehne-bild-innen { filter: grayscale(1) contrast(.9); opacity: .6; }
.buehne .bau-plus { display: none; }
.buehne-pfeil--seite { display: none; }

/* Variante B (?buehne=b · form:'streifen'): alle Karten gleich groß, wie ein Fotostreifen */
.buehne--streifen { --gr: 272px; --nachbar-1: 286px; --nachbar-2: 286px; --klein-1: 1; --klein-2: 0; --blass-1: .78; --blass-2: .4; --dreh: 10; }

/* Infobereich unter der Bühne */
.buehne-info { text-align: center; transition: opacity var(--dauer-wechsel) var(--kurve-gleiten); }
.buehne-info.wechselt { opacity: 0; }
.buehne-wahl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; margin-top: 14px; }
.buehne-wahl .rund { width: 48px; height: 48px; background: var(--flaeche); }
.buehne-wahl .rund .symbol { width: 22px; height: 22px; stroke-width: 2.1; }
.buehne-name { font-size: 26px; letter-spacing: var(--sperrung-titel); }
.buehne-zaehler { margin-top: 2px; font: 600 14px/1 var(--schrift); color: var(--text-neben); }
.buehne-zeile { margin: 10px auto 0; max-width: 330px; font-size: 15px; line-height: 1.4; color: var(--text); }
.buehne-zeile .allergene { display: block; color: var(--text-neben); }
.buehne-zeile .allergene:empty { display: none !important; }
.buehne-kauf { display: grid; gap: 10px; margin-top: 16px; }
.buehne-kauf .groesse { margin: 0; }
.buehne-punkte { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font: 500 15px/1.35 var(--schrift); color: var(--text); }
.buehne-punkte strong { font-weight: 700; }
.buehne-punkte .symbol { width: 20px; height: 20px; color: var(--akzent); }

/* Bühne · dunkel: Freisteller auf fast schwarzem Kartenton (wie das Nasenschild), Fotos auf hellem Papier */
html[data-look="dunkel"] .buehne {
  --abdunkeln: 1;         /* Nachbarn dunkler statt durchsichtig (buehne.js) */
  --blass-1: .62; --blass-2: .3;
  --karte-grund: var(--grund-tief);
  --karte-papier: var(--c-beige);
}
html[data-look="dunkel"] .buehne .bau-plus { display: grid; position: absolute; right: 6%; top: 6%; width: 26%; height: 26%; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); place-items: center; }
html[data-look="dunkel"] .buehne .bau-plus .symbol { width: 46%; height: 46%; stroke-width: 2.2; }
html[data-look="dunkel"] .buehne-pfeil--seite {
  display: grid; position: absolute; z-index: 20; top: calc(var(--luft) + var(--gr) * var(--verh) / 2); margin-top: -24px;
  width: 48px; height: 48px; background: var(--flaeche-tief);
}
html[data-look="dunkel"] .buehne-pfeil--seite.links { left: 14px; }
html[data-look="dunkel"] .buehne-pfeil--seite.rechts { right: 14px; }
/* Pfeile liegen neben dem Namen im Infobereich (wie hell). Seitenpfeile nur bei einer Bühne ohne Infobereich. */
html[data-look="dunkel"] .buehne:has(+ .buehne-info .buehne-wahl) .buehne-pfeil--seite { display: none; }
html[data-look="dunkel"] .buehne-wahl { margin-top: 10px; }
@media (max-width: 1023.98px) {   /* Handy: Pfeile 44 px, damit der Name (Gloock) in eine Zeile passt */
  html[data-look="dunkel"] .buehne-wahl { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; }
  html[data-look="dunkel"] .buehne-wahl .rund { width: 44px; height: 44px; }
}
html[data-look="dunkel"] .buehne-zaehler { display: none; }   /* Zähler steht schon im Abschnitts-Kopf */
html[data-look="dunkel"] .buehne-name { font-size: 30px; letter-spacing: var(--sperrung-titel); }
html[data-look="dunkel"] .buehne-zeile { max-width: 24em; margin-top: 8px; font-size: 16px; color: var(--text-neben); }
html[data-look="dunkel"] .buehne-zeile .allergene { display: inline; }
html[data-look="dunkel"] .buehne-zeile .allergene::before { content: " · "; }
html[data-look="dunkel"] .buehne-kauf { margin-top: 18px; }
html[data-look="dunkel"] .buehne-punkte { margin-top: 12px; gap: 8px; color: var(--text-neben); }
html[data-look="dunkel"] .buehne-punkte strong { font-weight: 500; }

/* Bühne · Computer: fünf Karten sichtbar, Mitte groß */
@media (min-width: 1024px) {
  .buehne { --gr: 340px; --luft: 16px; --nachbar-1: 326px; --nachbar-2: 264px; }
  .buehne--streifen { --gr: 320px; --nachbar-1: 340px; --nachbar-2: 340px; }
  .buehne-abzeichen { left: 16px; top: 16px; }
  .buehne-folgt { left: 16px; bottom: 16px; }
  .buehne-info { max-width: 640px; margin: 0 auto; }
  .buehne-wahl { grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 12px; margin-top: 18px; }
  .buehne-wahl .rund { width: 56px; height: 56px; }
  .buehne-wahl .rund .symbol { width: 24px; height: 24px; }
  .buehne-name { font-size: 32px; }
  .buehne-zaehler { margin-top: 6px; font-size: 17px; }
  .buehne-zeile { max-width: none; font-size: 18px; }
  .buehne-zeile .allergene { display: inline; }
  .buehne-zeile .allergene::before { content: " · "; }
  .buehne-kauf { grid-template-columns: 1fr 1fr; align-items: center; margin-top: 18px; }
  .buehne-kauf .groesse button { min-height: 52px; font-size: 16px; }
  .buehne-kauf .groesse .preis { font-size: 15px; }
  .buehne-kauf .knopf { min-height: 60px; font-size: 18px; }
  .buehne-kauf.ohne-groesse { display: flex; justify-content: center; }
  .buehne-kauf.ohne-groesse .knopf--breit { width: auto; min-width: 300px; padding: 0 40px; }
  .buehne-punkte { margin-top: 16px; font-size: 17px; }
  html[data-look="dunkel"] .buehne-pfeil--seite { width: 60px; height: 60px; margin-top: -30px; }
  html[data-look="dunkel"] .buehne-pfeil--seite .symbol { width: 26px; height: 26px; }
  html[data-look="dunkel"] .buehne-info { max-width: 760px; }
  html[data-look="dunkel"] .buehne-name { font-size: 46px; }
  html[data-look="dunkel"] .buehne-zeile { font-size: 18px; max-width: 40em; }
  html[data-look="dunkel"] .buehne-kauf { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
  html[data-look="dunkel"] .buehne-kauf .groesse { flex: none; }
  html[data-look="dunkel"] .buehne-kauf .knopf { width: auto; min-height: 56px; padding: 0 34px; }
}
/* kleinere Bühne für Zutaten (Baukasten: Protein) */
.buehne--klein { --gr: 168px; --luft: 10px; --nachbar-1: 163px; --nachbar-2: 130px; }
.buehne--klein.buehne--streifen { --gr: 164px; --nachbar-1: 176px; --nachbar-2: 176px; }
.buehne--klein .buehne-abzeichen { left: 8px; top: 8px; }
.buehne--klein .buehne-folgt { left: 8px; bottom: 8px; }
@media (min-width: 1024px) {
  .buehne--klein { --gr: 200px; --nachbar-1: 194px; --nachbar-2: 156px; }
  .buehne--klein.buehne--streifen { --gr: 196px; --nachbar-1: 210px; --nachbar-2: 210px; }
}

/* ===================== Leisten ===================== */
/* klebende Kategorie-Leiste oben (Speisekarte) */
.leiste-oben { position: sticky; top: var(--kopf-klebt); z-index: 30; padding: 8px 0 10px; background: var(--leiste-oben); }
html[data-look="dunkel"] .leiste-oben { padding: 10px 0 2px; }
html[data-look="dunkel"] .leiste-oben .filter { padding-bottom: 10px; }

/* feste Leiste unten */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--leiste-unten);
}
body.hat-leiste { padding-bottom: 116px; }
.leiste-hinweis { margin-top: 6px; text-align: center; font-size: 14px; color: var(--text-neben); }
.leiste .knopf--breit { min-height: 60px; font-size: 18px; }
html[data-look="dunkel"] .leiste { padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Warenkorb-Leiste: „4 Artikel · 25,40 € · Zum Warenkorb“ */
.leiste-korb {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 22px 0 10px;
  border-radius: var(--rund-pille);
  background: var(--haupt); color: var(--auf-haupt);
  font: var(--gewicht-knopf) var(--gr-knopf)/1.1 var(--schrift);
  transition: transform var(--dauer-druck) var(--kurve-druck), background-color 160ms;
}
.leiste-korb:active { transform: scale(.98); background: var(--haupt-druck); }
.leiste-anzahl { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); font: 800 16px/1 var(--schrift); }
.leiste-info { display: none; }
.leiste-knopf { display: contents; }
.leiste-knopf .trenner { display: none; }
.leiste-knopf-text { text-align: left; }
.leiste-korb .preis { font-weight: 800; }
html[data-look="dunkel"] .leiste-korb { display: flex; gap: 12px; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--text); font-weight: 400; }
html[data-look="dunkel"] .leiste-korb:active { transform: none; background: none; }
html[data-look="dunkel"] .leiste-anzahl { display: none; }
html[data-look="dunkel"] .leiste-info { display: block; flex: 1; min-width: 0; line-height: 1.3; }
html[data-look="dunkel"] .leiste-info strong { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; }
html[data-look="dunkel"] .leiste-info > span { display: block; font-size: 15px; color: var(--text-neben); white-space: nowrap; }
html[data-look="dunkel"] .leiste-info b { color: var(--live-zeit); font-weight: 600; }
html[data-look="dunkel"] .leiste-knopf { display: inline-flex; align-items: center; gap: .5em; flex: none; min-height: 56px; padding: 0 24px; border-radius: var(--rund-pille); background: var(--haupt); color: var(--auf-haupt); font: 600 17px/1 var(--schrift); }
html[data-look="dunkel"] .leiste-knopf .trenner, html[data-look="dunkel"] .leiste-knopf .preis { display: none; }
html[data-look="dunkel"] .leiste-korb .preis { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .leiste-korb:hover { background: var(--haupt-druck); }
  html[data-look="dunkel"] .leiste-korb:hover { background: none; }
  html[data-look="dunkel"] .leiste-korb:hover .leiste-knopf { background: var(--haupt-druck); }
}
@media (min-width: 1024px) {
  /* Computer: Leiste schwebt rechts unten, nicht über die ganze Breite */
  .leiste { left: auto; right: var(--rand); bottom: 24px; width: 440px; padding: 0; background: none; }
  .leiste--kauf { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
  .leiste-hinweis { display: none; }
  body.hat-leiste { padding-bottom: 0; }
  html[data-look="dunkel"] .leiste { padding: 10px 10px 10px 24px; border-radius: var(--rund-pille); background: var(--leiste-unten); }
  html[data-look="dunkel"] .leiste--kauf { padding: 10px; }
}

/* ===================== Formular ===================== */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld-name { font: 600 15px/1.3 var(--schrift); color: var(--text); }
.feld-name .optional { font-weight: 400; color: var(--text-neben); }
.feld-eingabe {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--feld-rand); border-radius: var(--rund-feld);
  background: var(--feld); color: var(--text);
  font: 400 16px/1.35 var(--schrift);
  transition: border-color 160ms, box-shadow 160ms;
}
textarea.feld-eingabe { min-height: 112px; resize: vertical; }
.feld-eingabe::placeholder { color: var(--text-neben); opacity: 1; }
.feld-eingabe:focus { outline: none; border-color: var(--haupt); box-shadow: 0 0 0 3px var(--fokus); }
.feld-eingabe:focus-visible { outline: none; }
.feld-hilfe { font-size: 14px; line-height: 1.4; color: var(--text-neben); }
.feld-fehler { display: flex; align-items: center; gap: 6px; font: 600 14px/1.35 var(--schrift); color: var(--text); }
.feld-fehler .symbol { width: 18px; height: 18px; }
.feld-eingabe[aria-invalid="true"] { border-width: 2px; border-color: var(--text); }
html[data-look="dunkel"] .feld-name { font-weight: 500; }
html[data-look="dunkel"] .feld-eingabe:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(233, 185, 73, .35); }

/* Häkchen (Checkbox) und Auswahlpunkt (Radio) */
.haekchen { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; min-height: var(--tippen); padding: 9px 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.haekchen input { appearance: none; -webkit-appearance: none; margin: 0; width: 26px; height: 26px; border: 1.5px solid var(--feld-rand); border-radius: 8px; background: var(--feld); display: grid; place-items: center; cursor: pointer; transition: background-color 160ms, border-color 160ms; }
.haekchen input[type="radio"] { border-radius: 50%; }
.haekchen input:checked { border-color: var(--haupt); background: var(--haupt) center / 16px no-repeat; }
.haekchen input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23F7F2EA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.haekchen input[type="radio"]:checked { background-image: radial-gradient(circle, var(--auf-haupt) 0 5px, transparent 5.5px); } /* taste-skill-ignore: Punkt im Auswahlknopf */
.haekchen input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.haekchen a { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-linie); text-underline-offset: 3px; }
html[data-look="dunkel"] .haekchen input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23070b0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ===================== Fuß ===================== */
.fuss { margin-top: var(--abstand-abschnitt); padding: 40px var(--rand) calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--fuss-grund); color: var(--text); }
.fuss-raster { display: grid; gap: 32px; }
.fuss h2 { font-size: 20px; letter-spacing: var(--sperrung-klein); }
html[data-look="dunkel"] .fuss h2 { font-size: 26px; }
.fuss-block > h2 + * { margin-top: 12px; }
.fuss-zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; line-height: 1.45; }
.fuss-zeile + .fuss-zeile { margin-top: 10px; }
.fuss-zeile .symbol { width: 20px; height: 20px; margin-top: 2px; color: var(--haupt); }
html[data-look="dunkel"] .fuss-zeile .symbol { color: var(--akzent); }
.fuss-zeile .abzeichen { margin-top: 6px; }
.fuss-zeile .abzeichen .symbol, html[data-look="dunkel"] .fuss-zeile .abzeichen .symbol { width: 15px; height: 15px; margin: 0; color: currentColor; }
.fuss a.fuss-mail { font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-linie); text-underline-offset: 3px; }
.fuss-seiten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.fuss-seiten a { display: flex; align-items: center; min-height: var(--tippen); font-weight: 600; }
html[data-look="dunkel"] .fuss-seiten a { font-weight: 500; }
.fuss-seiten a[aria-current="page"] { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-linie); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fuss-sozial { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fuss-sozial a { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; }
html[data-look="dunkel"] .fuss-sozial a { font-weight: 500; }
.fuss-sozial .rund { width: 48px; height: 48px; background: var(--flaeche); }
html[data-look="dunkel"] .fuss-sozial .rund { background: var(--flaeche-tief); }
@media (min-width: 1024px) { .fuss-sozial { flex-direction: column; } }
.fuss-unten { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 36px; }
.fuss-recht { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 14px; color: var(--text-neben); }
.fuss-recht a { display: inline-flex; align-items: center; min-height: var(--tippen); padding: 0 8px; }
.fuss-recht .strich { color: var(--text-neben); }   /* Trennpunkte: auch AA (hell 5,65 : 1), nicht --text-still (2,6 : 1) */
.fuss-logo { display: block; width: 96px; padding: 12px;   /* klein: Mindestabstand rundum bleibt als Polster (Logo-Regeln) */
  color: var(--logo-farbe); }
.fuss-logo svg { width: 100%; height: auto; }
.fuss-komma { display: none; }
/* Handy / Tablet: Fuß kompakt (ca. 450–550 px statt 880 px), nichts weggelassen:
   Besuch uns oben, darunter Seiten (2 Spalten) neben Folge uns, ganz unten Rechtliches (2 × 2) neben dem Logo. */
@media (max-width: 1023.98px) {
  .fuss { padding-top: 22px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fuss-raster { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 14px; align-items: start; }
  .fuss-raster > section.fuss-block:first-of-type { grid-column: 1 / -1; }
  .fuss h2 { font-size: 18px; }
  html[data-look="dunkel"] .fuss h2 { font-size: 22px; }
  .fuss-block > h2 + * { margin-top: 6px; }
  .fuss-zeile { font-size: 15px; line-height: 1.35; gap: 10px; }
  .fuss-zeile + .fuss-zeile { margin-top: 6px; }
  .fuss-komma { display: inline; }
  .fuss-zeile br { display: none; }
  .fuss-zeit { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; }
  .fuss-zeile .abzeichen { margin-top: 0; }
  /* E-Mail: Tippfläche vergrößern, ohne Platz zu brauchen */
  .fuss a.fuss-mail { position: relative; }
  .fuss a.fuss-mail::after { content: ""; position: absolute; inset: -12px -8px; }
  .fuss-seiten { column-gap: 14px; }
  .fuss-seiten a { font-size: 15px; white-space: nowrap; }
  .fuss-sozial { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .fuss-sozial a { min-height: var(--tippen); gap: 10px; font-size: 15px; }
  .fuss-sozial .rund { width: 36px; height: 36px; }
  .fuss-unten { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
  .fuss-recht { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 8px; font-size: 14px; }
  .fuss-recht .strich { display: none; }
  .fuss-recht { row-gap: 18px; }   /* 08.11. R5a: ruhiger Zeilenabstand; Tippfläche ≥ 44 px über das Pseudo-Element */
  .fuss-recht a { padding: 0; min-height: 0; line-height: 1.3; justify-content: flex-start; position: relative; }
  .fuss-recht a::after { content: ""; position: absolute; inset: -13px -4px; }
  .fuss-unten > .fuss-logo { width: 84px; padding: 10px; flex: none; }
}
@media (max-width: 349.98px) {   /* 320 px: Seiten-Links und „Folge uns“ dürfen sich nicht überdecken */
  .fuss-raster { column-gap: 10px; }
  .fuss-seiten { column-gap: 8px; }
  .fuss-seiten a, .fuss-sozial a { font-size: 14px; }
  .fuss-sozial a { gap: 6px; }
  .fuss-sozial .rund { width: 32px; height: 32px; }
}
@media (hover: hover) and (pointer: fine) {
  .fuss-seiten a:hover, .fuss-recht a:hover { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-linie); text-underline-offset: 5px; }
}
@media (min-width: 1024px) {
  .fuss { padding-top: 64px; padding-bottom: 36px; }
  .fuss-raster { grid-template-columns: 1.2fr 1fr 1fr 140px; gap: 48px; align-items: start; }
  .fuss-raster > .fuss-logo { order: 9; justify-self: end; width: 120px; padding: 14px; margin: -14px -14px 0 0; }   /* Logo groß als Abschluss rechts */
  .fuss-unten { flex-direction: row; justify-content: space-between; margin-top: 44px; }
  .fuss-recht { justify-content: flex-start; margin-left: -8px; }
  .fuss-satz { font-size: 14px; color: var(--text-neben); }
}
/* Platz für die feste Leiste unten liegt IM Fuß (nicht als Body-Abstand darunter): sonst blitzt zwischen
   Fuß und Leiste der Seitengrund durch (dunkel: heller grüner Streifen). Gesamtabstand bleibt gleich. */
body.hat-leiste:has(.fuss) { padding-bottom: 0; }
body.hat-leiste .fuss { padding-bottom: calc(20px + 116px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
  body.hat-leiste .fuss { padding-bottom: 40px; }                       /* Computer: Leiste schwebt über dem Fuß */
  html.ganzseite body.hat-leiste .fuss { padding-bottom: 144px; }       /* Ganzseiten-Foto: Leiste steht am Ende */
}

/* ===================== Ganze Seite fotografieren (fotografieren.py) ===================== */
/* feste Leisten unten stehen auf dem Ganzseiten-Foto am Seitenende statt mitten im Bild */
html.ganzseite body { position: relative; }
html.ganzseite .leiste { position: absolute; }
@media (min-width: 1024px) { html.ganzseite body.hat-leiste { padding-bottom: 104px; } }

/* ===================== Look-Umschalter (nur Ausstellungsraum) ===================== */
.look-umschalter {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 95;
  display: flex; gap: 2px; padding: 3px; border-radius: var(--rund-pille);
  background: #1D1D1B; color: #F7F2EA; box-shadow: var(--schatten-schwebend);
  font: 600 13px/1 "Figtree", system-ui, sans-serif;
}
.look-umschalter { align-items: center; }
.look-umschalter button, .look-zurueck { height: var(--tippen); padding: 0 12px; border-radius: var(--rund-pille); color: inherit; opacity: .75; }
.look-umschalter button[aria-pressed="true"] { background: #F7F2EA; color: #1D1D1B; opacity: 1; }
.look-umschalter button:focus-visible, .look-zurueck:focus-visible { outline: 3px solid #E3B54A; outline-offset: 2px; }
/* Link zurück in den Ausstellungsraum (nur wenn ?aus=ausstellung) */
.look-zurueck { display: inline-flex; align-items: center; gap: 4px; padding-left: 8px; white-space: nowrap; text-decoration: none; opacity: 1; }
.look-zurueck .symbol { width: 18px; height: 18px; }
.look-zurueck:hover { background: rgba(247, 242, 234, .14); }
.look-trenner { width: 1px; height: 24px; margin: 0 3px; background: rgba(247, 242, 234, .35); }
body.hat-leiste .look-umschalter { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
html.bild .look-umschalter { display: none !important; }
@media (min-width: 1024px) {
  body.hat-leiste .look-umschalter { bottom: 24px; }
}

/* ===================== Schmale Handys (320–389 px) – steht am Ende, damit es die Grundregeln oben überstimmt ===================== */
/* Schmale Handys (bis 389 px): lange Abzeichen brechen um statt über den Rand zu ragen (390 px und breiter unverändert) */
@media (max-width: 389.98px) {
  .abzeichen { max-width: 100%; height: auto; min-height: 30px; padding-block: 6px; white-space: normal; line-height: 1.2; text-align: left; }
  .abzeichen--ruhig, .abzeichen--platzhalter, .abzeichen--klaeren { height: auto; min-height: 26px; padding-block: 4px; }
}
@media (max-width: 349.98px) {   /* 320–349 px */
  .groesse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groesse button, html[data-look="dunkel"] .groesse button { min-width: 0; padding-inline: 8px; }
  .groesse-name { white-space: normal; text-align: center; }
  .groesse-ml { display: block; }
  html[data-look="dunkel"] .groesse button { gap: 6px; }
  .leiste-korb { gap: 8px; padding: 0 16px 0 8px; font-size: 15px; }
  html[data-look="dunkel"] .leiste-korb { padding: 0; }
  html[data-look="dunkel"] .leiste-korb { gap: 8px; }
  html[data-look="dunkel"] .leiste-knopf { padding: 0 14px; min-height: 52px; font-size: 15px; }
  html[data-look="dunkel"] .leiste-info strong { font-size: 14px; }
  html[data-look="dunkel"] .leiste-info > span { font-size: 13px; }
}
/* lange Wörter (z. B. „Sonnenblumenkerne“) trennen statt die Kachel zu sprengen */
.kachel-name, .kachel-extra { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 349.98px) {
  .knopf { max-width: 100%; white-space: normal; }   /* zwei Zeilen statt über den Rand */
}


/* ===================== Platzhalter-Fotos kennzeichnen (data-platzhalter="kaffee") ===================== */
/* Abzeichen in der Foto-Ecke: ruhig, eigener Grund, damit es auf jedem Foto lesbar bleibt (AA) */
.platzhalter-wirt { position: relative; }
.platzhalter-marke {
  position: absolute; right: 8px; bottom: 8px; z-index: 3; max-width: calc(100% - 16px);
  padding: 4px 10px; border-radius: var(--rund-pille); pointer-events: none;
  background: var(--flaeche); color: var(--text-neben); box-shadow: inset 0 0 0 1px var(--feld-rand);
  font: 600 12px/1.25 var(--schrift); letter-spacing: 0; text-align: left;
}
/* im Foto-Schriftzug: ein Satz unter dem ganzen Schriftzug, nicht im Wort */
.platzhalter-satz {
  margin: var(--a-2) auto 0; max-width: 36ch; text-align: center;
  font: 500 var(--gr-mini)/1.35 var(--schrift); color: var(--text-neben);
}

/* Quellenangabe Wien-Karte (CC BY 4.0), unauffällig unter dem Fuß */
.fuss-quelle { margin: 18px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-neben); text-align: center; }
@media (min-width: 900px) { .fuss-quelle { text-align: left; } }

/* ===================== Etappe A4 (W9): Fuß kompakt, Computer + Handy =====================
   Gleicher Inhalt, weniger Höhe: engere Abstände, Seiten-Links in 3 Spalten, Logo kleiner.
   Steht ganz am Ende, damit es die früheren Fuß-Regeln oben überschreibt. */
.fuss-quelle { margin-top: 8px; font-size: 11px; line-height: 1.3; }
@media (min-width: 1024px) {
  .fuss { padding-top: 28px; padding-bottom: 16px; }
  .fuss-raster { grid-template-columns: 1.2fr 1.6fr 1fr 88px; gap: 16px 40px; }
  .fuss-raster > .fuss-logo { width: 88px; padding: 8px; margin: 0; }
  .fuss-seiten { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 28px; }
  .fuss-seiten a { min-height: 40px; }
  .fuss-sozial a { min-height: 40px; }
  .fuss-sozial .rund { width: 34px; height: 34px; }
  .fuss-unten { margin-top: 12px; }
  .fuss-recht a { min-height: 36px; }
  .fuss-quelle { margin-top: 4px; }
}
@media (max-width: 1023.98px) {
  .fuss { padding-top: 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .fuss-raster { row-gap: 10px; }
  /* „Kontakt“-Überschrift bleibt für Vorlese-Programme, Adresse + Zeiten + Mail stehen kompakt in zwei Zeilen */
  .fuss-raster > section.fuss-block:first-of-type > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fuss-raster > section.fuss-block:first-of-type > div { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; margin-top: 0; font-size: 14px; }
  .fuss-raster > section.fuss-block:first-of-type > div > .fuss-zeile { font-size: 14px; gap: 8px; grid-template-columns: 20px auto; }
  .fuss-raster > section.fuss-block:first-of-type > div > .fuss-zeile { margin-top: 0; }
  .fuss-raster > section.fuss-block:first-of-type > div > .fuss-zeile:first-child { flex-basis: 100%; }
  .fuss-seiten { row-gap: 12px; }
  .fuss-seiten a { min-height: 0; line-height: 20px; position: relative; }
  .fuss-seiten a::after { content: ""; position: absolute; inset: -7px -4px; }
  .fuss-sozial a { min-height: 34px; position: relative; }
  .fuss-sozial a::after { content: ""; position: absolute; inset: -2px -4px; }
  .fuss-sozial .rund { width: 32px; height: 32px; }
  .fuss-unten { margin-top: 0; }
  .fuss-unten > .fuss-logo { width: 64px; padding: 6px; }
  .fuss-recht { row-gap: 18px; }
}

/* ===================== Bestellen kommt bald (window.BESTELLEN_BALD, 08.11.2026) =====================
   Schalter: gemeinsam/seite.js (setzt html[data-bestellen="bald"]). Auf false = alles wie vorher.
   Hinweiskasten statt Knopf (unter einem Preis, im Baukasten, im Warenkorb):
   <p class="bestellen-bald"><em class="bald-etikett">bald</em> <span>Online vorbestellen kommt bald …</span></p> */
.bestellen-bald {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; box-sizing: border-box;
  width: 100%; max-width: 36em; margin: 0; padding: 14px 18px 15px;
  border-radius: var(--rund-karte, 24px);
  background: color-mix(in srgb, var(--haupt) 8%, var(--flaeche));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--haupt) 32%, transparent);
  color: var(--text); font: 600 16px/1.45 var(--schrift);
}
.bestellen-bald > span { flex: 1 1 14em; min-width: 0; }
.bestellen-bald .bald-etikett { flex: none; margin: 2px 0 0 2px; color: var(--haupt); }
html[data-look="dunkel"] .bestellen-bald { background: var(--flaeche-tief); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 50%, transparent); }
html[data-look="dunkel"] .bestellen-bald .bald-etikett { color: var(--akzent); }
@media (min-width: 1024px) { .bestellen-bald { padding: 16px 22px 17px; font-size: 17px; } }

/* Kopf im „bald“-Modus: ohne Warenkorb-Symbol; der Speisekarte-Knopf bleibt nur am Handy (Computer: Link steht in der Leiste) */
html[data-bestellen="bald"] .kopf--schmal { grid-template-columns: var(--tippen) minmax(0, 1fr) var(--tippen); }
@media (min-width: 1024px) {
  html[data-bestellen="bald"] .bestellen--nur-handy { display: none; }
  /* Abstand zum rechten Rand wie der übrige Kopf (vorher klebte der Bestellen-Knopf bei 1280 px am Rand) */
  html[data-bestellen="bald"] .kopf--voll .kopf-werkzeuge { padding-right: var(--rand); }
}