/* SMASH WERK · neuer Entwurf (06.10.2026).
   Maße aus bude/ (rot) gemessen in Firefox (smash-werk/_bau/aufnahmen/vorlagen/bude-rot-1440.json, -390.json):
   Ansage 36, Kopf 86, Phudu/Poppins, H1 5,5 vw / .96 / −.025 em, Knöpfe 48 hoch, Rundung 12.
   Farbe und Logo aus smash-werk/: Limette #E1FB95, Schwarz #0D0D0D, Creme #FAF7ED, Stempel; Logo-Schrift seit 06.10. Phudu.
   Übersetzung der Farben: Maron → Schwarz, Senf → Limette, Rot (Ansage) → Limette, Creme bleibt Creme. */

:root {
  --schwarz: #0D0D0D;
  --creme: #FAF7ED;
  --limette: #E1FB95;
  --limette-tief: #D2EE7F;

  --kopf-schrift: 'Phudu', 'Arial Narrow', sans-serif;
  --text: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --breite: 1360px;
  --rand: 64px;
  --ansage: 36px;
  --leiste: 86px;
  --kurve-aus: cubic-bezier(.23, 1, .32, 1);
  --kurve-schub: cubic-bezier(.65, 0, .35, 1);   /* Bewegung auf der Fläche (Karussell): An- und Auslauf */
  --kurve-schublade: cubic-bezier(.32, .72, 0, 1);   /* Kasse: Schublade/Blatt, schneller Anlauf, weiches Ankommen (09.10.) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--schwarz) var(--creme); }
body { margin: 0; background: var(--schwarz); color: var(--creme); font: 400 16px/24px var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
h2, .burgerart, .ueber__satz, .sek-kopf p { text-wrap: balance; }   /* polish 09.10.: am Handy kein Wort allein in der letzten Zeile („LUST?“, „Bild.“) */
a { color: inherit; }
svg { width: 18px; height: 18px; flex: none; }
::selection { background: var(--limette); color: var(--schwarz); }
/* Überfahren-Regeln stehen in @media (hover: hover) and (pointer: fine) — am Handy blieb nach dem Tippen der Zustand kleben
   (Reiter, Karten mit gekipptem Burger); emil 08.10. */
:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; }   /* Audit 08.10.: Limette verschwand auf den grünen Flächen; Schwarz trägt auf Limette, Creme und Weiß */
:is(.kopf, .held, .fuss, .neuheit__punkte) :focus-visible { outline-color: var(--limette); }   /* auf dunklem Grund Limette */
.sprung { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--limette); color: var(--schwarz); transform: translateY(-200%); }
.sprung:focus { transform: none; }

/* ---------- Stempel (Logo aus smash-werk) ---------- */
.stempel { display: inline-block; flex: none; line-height: 0; }
.stempel svg { width: 100%; height: 100%; }
.stempel--kopf { width: 46px; height: 46px; color: var(--limette); }

/* ---------- Knöpfe (bude: Rundung 12, Phudu) ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 47px; padding: 0 30px; border: 0; border-radius: 12px;
  font: 500 20px/1 var(--kopf-schrift); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--kurve-aus);
}
.knopf:active { transform: scale(.97); }
.knopf--limette { background: var(--limette); color: var(--schwarz); }
@media (hover: hover) and (pointer: fine) { .knopf--limette:hover { background: var(--limette-tief); } }
.knopf--gross { height: 48px; padding: 0 22px; font: 600 18px/28px var(--kopf-schrift); letter-spacing: -.4px; }
.knopf--gross svg { width: 22px; height: 22px; }
.knopf--linie { background: rgba(13, 13, 13, .22); color: var(--creme); box-shadow: inset 0 0 0 1px var(--creme); }
@media (hover: hover) and (pointer: fine) { .knopf--linie:hover { background: var(--creme); color: var(--schwarz); } }
.korb-zahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--schwarz); color: var(--limette); font: 600 13px/1 var(--text); }
.korb-zahl[hidden] { display: none; }

/* ---------- 0 · Ansage + Kopf (bude) ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 220ms ease; }
.kopf--fest { background: var(--schwarz); }
.ansage {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ansage); padding: 0 16px;
  background: var(--limette); color: var(--schwarz);
  font: 600 15px/1 var(--kopf-schrift); letter-spacing: .3px; text-transform: uppercase; text-decoration: none;
}
.ansage svg { width: 16px; height: 16px; transition: transform 200ms var(--kurve-aus); }
@media (hover: hover) and (pointer: fine) { .ansage:hover svg { transform: translateX(3px); } }
/* Leiste (Inhaber 06.10.: „den kompletten kopf einmal vernünftig machen"): drei Spalten 1fr | auto | 1fr — Logo bündig an
   der linken Inhaltskante, Menü genau in der Seitenmitte, „Vorbestellen" bündig an der rechten Inhaltskante (vorher stand
   der Knopf 45 innen: eine leere vierte Spalte für den Handy-Menüknopf hielt ihren Abstand; das Menü stand nur mittig
   zwischen Logo und Knopf). Alles auf einer Mittellinie. */
.kopf__leiste {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 32px;
  width: min(var(--breite), 100% - 2 * var(--rand)); height: var(--leiste); margin: 0 auto;
}
/* Logo in der Schrift des Entwurfs (Inhaber 06.10.: „das logo muss auch noch an die schriftart angepasst werden"):
   Wortmarke zweizeilig Phudu 900 wie die Marke im roten Entwurf (27/.86), daneben der Stempel. */
.marke { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; white-space: nowrap; }
/* Wortmarke auf einer Zeile (Inhaber 06.10.: „ich möchte im logo smash werk auch nebeneinander"), vorher zweizeilig */
.marke__wort { font: 900 27px/1 var(--kopf-schrift); letter-spacing: -.01em; text-transform: uppercase; }
.kopf__nav { display: flex; justify-content: center; gap: 32px; }   /* 16 war gedrängt */
.kopf__knopf { justify-self: end; }
.kopf__nav a { font: 500 20px/25px var(--kopf-schrift); text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover { color: var(--limette); } }
.menue-knopf { display: none; }
.handy-menue[hidden] { display: none; }

/* ---------- 1 · Hero (bude: Foto voll, Text links im 1360er-Rahmen) ---------- */
.held {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--ansage) + var(--leiste));
  background: var(--schwarz);
}
.held__bild { position: absolute; inset: 0; z-index: -2; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Text mittig (Inhaber 06.10.: „in dem hero muss die text ausrichtung mittig sein") — deshalb kein Verlauf von links
   wie bei bude, sondern ein gleichmäßiger Schleier, in der Mitte etwas dichter, wo die Schrift steht. */
.held::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(13, 13, 13, .5) 0%, rgba(13, 13, 13, .2) 70%, rgba(13, 13, 13, 0) 100%),
    linear-gradient(180deg, rgba(13, 13, 13, .45) 0%, rgba(13, 13, 13, .25) 40%, rgba(13, 13, 13, .4) 100%);
}
.held__inhalt { width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto; padding-block: 58px; }
.held__text { max-width: 760px; margin: 0 auto; text-align: center; }
.pille { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.held__orte {
  height: 33px; padding: 6px 18px; border-radius: 8px;
  background: rgba(13, 13, 13, .36); box-shadow: inset 0 0 0 1px var(--creme);
  font: 400 12px/20px var(--text);
}
.held__orte svg { width: 15px; height: 15px; color: var(--limette); }
.held h1 { margin: 23px 0 0; font: 900 clamp(58px, 5.5vw, 84px)/.96 var(--kopf-schrift); letter-spacing: -.025em; color: var(--creme); }
.held h1 em { font-style: normal; color: var(--limette); }
.held__unter { max-width: 410px; margin: 22px auto 0; font-size: 14px; line-height: 1.7; text-wrap: balance; }
.held__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; }

/* Codex · 06.10.2026 · Hero-Schriftprobe zur großen Bildvariante.
   Vom Inhaber beauftragt; Abstimmung in BILDER.md. Nur Desktop. */
@media (min-width: 810px) {
  .held::before {
    background:
      radial-gradient(ellipse 46% 68% at 50% 56%, rgba(13, 13, 13, .76) 0%, rgba(13, 13, 13, .57) 38%, rgba(13, 13, 13, .16) 72%, rgba(13, 13, 13, 0) 100%),
      linear-gradient(180deg, rgba(13, 13, 13, .38) 0%, rgba(13, 13, 13, .12) 45%, rgba(13, 13, 13, .28) 100%);
  }
  .held__text { max-width: 1000px; }
  .held h1 {
    font-size: clamp(64px, 6.5vw, 108px);
    line-height: .96;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .7), 0 8px 28px rgba(0, 0, 0, .45);
  }
  .held__unter {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
  }
  .held__knoepfe .knopf--linie { background: rgba(13, 13, 13, .72); }
}

/* ---------- 2 · Karte (bude: gemessen 1440 / 390) ----------
   Grund Creme, oben 75 / unten 80. Kopf: H2 Phudu 900 58/1,04 links, „Ganze Karte" rechts auf Höhe der Unterkante.
   Reiter 114 × 35 voll gerundet, aktiv Limette (bude Senf), sonst Creme dunkel (bude Sand). Karten 4 Spalten, Abstand 20,
   Rundung 20, Rand innen 1 px, Innenabstand 12/12/22; Bühne 220 hoch, Rundung 14, heller Verlauf; Preis Phudu 600 32. */
.karte, .ganz { --tinte: #0D0D0D; --grau: #5E5D58; --sand: #E9E4D4; --rand-karte: rgba(13, 13, 13, .14); background: var(--creme); color: var(--tinte); }
/* Abstände (Inhaber 06.10.: „jetzt einmal bitte abstände anpassen"): ein Blockabstand für die ganze Seite —
   Rechner 80, Handy 60 (der größere der vorhandenen Werte; vorher 75/80/65 und 50/60/45 durcheinander).
   Gilt für Karte oben/unten und den Abstand Karten → Video-Karte. Der Standorte-Streifen ist abgenommen und bleibt. */
.karte { padding: 80px 0 80px; }
.karte__kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto;
}
.karte h2 { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }
.burgerart { margin: 10px 0 0; font: 500 16px/24px var(--text); color: var(--grau); }
.burgerart b { font-weight: 600; color: var(--tinte); }
.burgerart[data-aus] { visibility: hidden; }
.knopf--schwarz { background: var(--schwarz); color: var(--creme); }
@media (hover: hover) and (pointer: fine) { .knopf--schwarz:hover { background: #2A2A2A; } }
.knopf--schwarz svg { width: 20px; height: 20px; }
.karte__ganz { flex: none; }
/* 08.10. („der button auf die höhe der anderen 4 button auf der linken seite und die pfeile drüber"): die Pfeile stehen
   rechts im Kopf, unten bündig mit dem Satz; „Ganze Karte" rechts in der Reihe der Reiter, genau so hoch wie sie (35) —
   „alles auf einer höhe". Die Reihe hat die Breite des Kopfes, die Reiter bleiben links. */
.karte__kopf > .pfeile { flex: none; }
.karte__leiste { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--breite), 100% - 2 * var(--rand)); margin: 30px auto 0; }
.karte__leiste .reiter { width: auto; margin: 0; }
.karte__leiste .karte__ganz { height: 35px; padding: 0 18px; gap: 8px; font-size: 18px; }
.karte__leiste .karte__ganz svg { width: 18px; height: 18px; }

.reiter { display: flex; gap: 10px; width: min(var(--breite), 100% - 2 * var(--rand)); margin: 30px auto 0; }
.reiter button {
  min-width: 114px; height: 35px; padding: 0 16px; border: 0; border-radius: 50px;
  background: var(--sand); color: var(--tinte); font: 500 16px/1 var(--kopf-schrift); cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--kurve-aus);
}
@media (hover: hover) and (pointer: fine) { .reiter button:hover { background: #DDE9B4; } }
.reiter button:active { transform: scale(.97); }
.reiter button[aria-selected="true"] { background: var(--limette); }

.gerichte {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  width: min(var(--breite), 100% - 2 * var(--rand)); margin: 31px auto 0; outline: none;
}
.gericht {
  display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 22px;
  border-radius: 20px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--rand-karte);
  transition: box-shadow 200ms ease, transform 300ms var(--kurve-aus);
}
@media (hover: hover) and (pointer: fine) { .gericht:hover { box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .3), 0 18px 34px -24px rgba(13, 13, 13, .35); } }
/* Fläche hinter dem Produkt in Limette (Inhaber 06.10.: „denkst du an die grünen flächen hinter den produkten" — wie
   die farbigen Bühnen bei bude und die Combos); Marke darauf in der Gegenfarbe Schwarz */
.gericht__bild { position: relative; height: 220px; border-radius: 14px; background: var(--limette); }
.gericht__bild img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; transition: transform 400ms var(--kurve-aus); }
@media (hover: hover) and (pointer: fine) { .gericht:hover .gericht__bild img { transform: scale(1.04) rotate(-1deg); } }
/* Marke („Bestseller", „Neu", „Scharf") mittig auf der oberen Kante der Karte (Inhaber 06.10.: „die bestseller und neu
   pille auf den oberen rand"): Karte hat oben 12 Innenabstand, die Pille ist 26 hoch → 12 + 13 über der Fläche */
.gericht__marke { position: absolute; top: -25px; left: 14px; z-index: 1; padding: 4px 12px; border-radius: 50px; background: var(--schwarz); color: var(--limette); font: 500 16px/18px var(--kopf-schrift); }

/* Karussell + Pfeile (Inhaber 06.10.: „bei den burgern oben brauchen wir unsere pfeile wieder" — bude/Stack n Snack:
   rund 40, Senf → Limette; sitzen im Kopf unter „Ganze Karte"). Am Rechner sechs Karten in einer Reihe, vier sichtbar;
   ein Pfeil schiebt um die sichtbare Zahl (aus 4 werden die nächsten). Bewegung auf der Fläche → Kurve mit An- und Auslauf.
   Das Fenster hat oben 16 Luft für die Marke auf der Kante, unten 30 für den Schatten beim Überfahren. */
@media (min-width: 810px) {
  .karussell { width: min(var(--breite), 100% - 2 * var(--rand)); margin: 15px auto -30px; padding: 16px 0 30px; overflow: hidden; }
  .karussell .gerichte { display: flex; gap: 20px; width: auto; margin: 0; transition: transform 520ms var(--kurve-schub); }
  .karussell .gericht { flex: 0 0 calc((100% - 3 * 20px) / 4); }
}
.pfeile { display: flex; gap: 10px; }
.pfeile[hidden] { display: none; }
.pfeil {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--limette); color: var(--schwarz); cursor: pointer;
  transition: background-color 160ms ease, opacity 200ms ease, transform 160ms var(--kurve-aus);
}
@media (hover: hover) and (pointer: fine) { .pfeil:hover:not(:disabled) { background: var(--limette-tief); } }
.pfeil:active:not(:disabled) { transform: scale(.94); }
.pfeil:disabled { opacity: .45; cursor: default; }
.pfeil svg { width: 16px; height: 16px; }
.gericht__sorte { display: block; margin: 20px 8px 0; font: 600 12px/1 var(--kopf-schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.gericht h3 { margin: 9px 8px 0; font: 600 25px/1.05 var(--kopf-schrift); }
.gericht p { min-height: 40px; margin: 11px 8px 0; font: 500 13px/20px var(--text); color: var(--grau);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gericht__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 18px 8px 0; }
.preis { font: 600 32px/38px var(--kopf-schrift); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.knopf--korb { height: 42px; padding: 0 15px; font-size: 16px; }
.menge { display: inline-flex; align-items: center; justify-content: space-between; min-width: 112px; height: 42px; border-radius: 12px; background: var(--schwarz); color: var(--creme); }
.menge button { display: grid; place-items: center; width: 36px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; transition: color 160ms ease, transform 160ms var(--kurve-aus); }
.menge button:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .menge button:hover { color: var(--limette); } }
.menge svg { width: 16px; height: 16px; }
.menge output { min-width: 20px; text-align: center; font: 600 16px/1 var(--text); }
.punkte { display: none; }
/* Reiterwechsel (emil 08.10.): die neuen Karten kommen kurz von unten herein statt hart zu springen — 240 ms, je Karte 40
   versetzt, ease-out; nicht beim ersten Aufbau (data-neu setzt erst der zweite Aufruf von karteZeigen) */
.gerichte[data-neu] > .gericht { animation: karte-rein 240ms var(--kurve-aus) both; }
.gerichte[data-neu] > .gericht:nth-child(2) { animation-delay: 40ms; }
.gerichte[data-neu] > .gericht:nth-child(3) { animation-delay: 80ms; }
.gerichte[data-neu] > .gericht:nth-child(4) { animation-delay: 120ms; }
@keyframes karte-rein { from { opacity: 0; transform: translateY(10px); } }

.meldung {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; margin: 0; padding: 12px 20px; border-radius: 12px;
  background: var(--schwarz); color: var(--creme); font: 500 15px/1.3 var(--text);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--kurve-aus);
}
.meldung[data-an] { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 3 · Video-Karte (bude, gemessen 1440: 1312 × 430, Rundung 22, 65 unter der Karte) ----------
   Zeile links mittig (Poppins 14 / Phudu 900 62 / Poppins 15), Verlauf von links, Glas-Knopf 76 bei 65 % der Breite.
   Spielt das Video, blendet die Zeile aus und der Knopf wird klein unten rechts (46). Farbe: Maron → Schwarz;
   beim Überfahren füllt sich der Knopf mit Limette. */

/* 08.10. Versuch („video karte auf komplette breite als banner und dann … die karte den lime hintergrund"): Karte auf Limette,
   die Video-Karte als Band über die volle Breite, 520 hoch, ohne Rundung — sie schließt die Karte unten ab. Auf Limette werden
   die grünen Teile schwarz (aktiver Reiter, Pfeile), inaktive Reiter Creme. Text im Band an der linken Inhaltskante. */
.karte { background: var(--limette); }   /* unten wieder 80: darunter folgt „So wird gesmasht" (80 + 80 = 160) */
/* Krosse Kante unter dem Hero (Inhaber 13.10.2026, aus einer Probe mit fünf Kanten; erst Welle nach poplist.framer.website,
   dann Tropfen, dann „mach da doch mal kross hin"): die Limette reißt unregelmäßig ins Foto, wie der krosse Rand eines
   gesmashten Pattys („Krosse Kanten" im Hero-Text). Kachel 720 × 20 (am Handy 520 × 14 — breit, damit sich das Muster nicht sichtbar wiederholt), fester Zufall; Anfang und Ende
   gleich hoch, „round" lässt sie ganz aufgehen. Der Hero ist um die Kantenhöhe länger als der Bildschirm — auf dem ersten
   Bildschirm nicht zu sehen. */
.karte { position: relative; --kante: 20px; }
.karte::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(1px - var(--kante)); height: var(--kante); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27720%27%20height%3D%2716%27%20viewBox%3D%270%200%20720%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2016%20L0%209%20L11.5%206.2%20L18.8%2011%20L28%206.6%20L38.5%2011.3%20L47.8%2010.5%20L57.6%2012%20L65%207.1%20L75.3%2010.7%20L81.6%2010.5%20L90.4%2013.1%20L101.2%204.4%20L110.3%2013.2%20L120.5%2010.1%20L129.9%2013%20L141.4%207.1%20L149.4%2012.2%20L157.4%204.7%20L165.2%207.7%20L172.9%2013.3%20L182.3%2011%20L193.5%203.6%20L201.2%209.2%20L210.2%207.6%20L217.4%2013%20L223.7%207%20L231.8%2010.3%20L243.3%208.7%20L250.3%207.5%20L258%207%20L266.6%206.7%20L275.8%209.8%20L283.2%2013%20L291.9%2012.5%20L301.7%2010%20L310.8%208.6%20L320.9%2013.3%20L329.3%2010.8%20L336.8%209.5%20L344.9%206.6%20L353.3%2011.7%20L364.6%204.2%20L375.5%203.9%20L383.9%204.7%20L390.4%2014%20L397.7%2010%20L404.6%208%20L414.1%204.5%20L425.7%2012.7%20L437%2012.7%20L448.4%2011.4%20L456.1%203.1%20L463.6%203.8%20L469.6%209.8%20L477%2011.2%20L485.9%2010.6%20L493.3%2012.7%20L500.8%207.1%20L512.1%204.3%20L521.1%203%20L532.5%2010%20L544.1%203.2%20L555.5%205.1%20L567.3%209.2%20L577.4%205.9%20L584.7%205.3%20L594.1%203.6%20L604.7%2010.7%20L615%208.5%20L621.2%204.2%20L632.7%204.4%20L642.8%2012.8%20L649%2012.7%20L660.2%2013.9%20L671.9%2011.4%20L680.5%205.7%20L690.8%2012.7%20L699.2%205.6%20L707.6%2012.8%20L717%206.9%20L720%209%20L720%2016%20Z%27%20fill%3D%27%23E1FB95%27%2F%3E%3C%2Fsvg%3E") 0 0 / 720px 100% round no-repeat;
}
.held { min-height: calc(100vh + 20px); min-height: calc(100svh + 20px); }
@media (max-width: 809px) {
  .karte { --kante: 14px; }
  .karte::before { background-size: 520px 100%; }
  .held { min-height: calc(100svh + 14px); }
}
.karte .reiter button { background: var(--creme); }
@media (hover: hover) and (pointer: fine) { .karte .reiter button:hover { background: #F1EED9; } }
.karte .reiter button[aria-selected="true"] { background: var(--schwarz); color: var(--limette); }
.karte .pfeil { background: var(--schwarz); color: var(--limette); }
@media (hover: hover) and (pointer: fine) { .karte .pfeil:hover:not(:disabled) { background: #2A2A2A; } }
/* Pille IN der Karte, mittig, über dem Bild statt darauf (08.10.: „die pills … sollen gerne mittig", „wieder in die karten
   wandern", „nicht in das bild rein ragen"): oben 12 in der Bühne (Pille 26 hoch), das Bild beginnt 46 tiefer — bei allen
   Karten, auch ohne Pille, damit die Burger einer Reihe auf einer Höhe stehen. Bühne 220 → 256, Burger bleiben 200 hoch. */
.karte .gericht__marke { top: 12px; left: 8px; white-space: nowrap; }   /* links an der Textkante (08.10.: „die pillen wieder links in die karte") */
.karte .gericht__bild { height: 256px; background: #FFFFFF; }
.karte .gericht__bild img { top: 46px; height: calc(100% - 56px); }   /* Fläche hinter den Produkten weiß statt Limette (08.10.: „von lime auf weiß") */
.karte .gericht { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); }   /* ganz weiß (08.10.: „die ganze karte bei der karte muss weiß"), schwarzer Rand wie die Bewertungen („karten schwarz umranden wie die bewertungs karten") */
@media (hover: hover) and (pointer: fine) { .karte .gericht:hover { box-shadow: inset 0 0 0 1.5px var(--schwarz), 0 18px 34px -24px rgba(13, 13, 13, .35); } }

/* ---------- 4 · Neu im Werk: Trüffel Smash (08.10.) — Vorlage Shake Shack „Black Truffle Menu Is Back" ----------
   Shake Shack 1440: Band 527 hoch über die volle Breite; Textfeld 630 × 354 an der Inhaltskante (Innenabstand 33/22/30),
   Überschrift zweizeilig, Text 20/30, Knopf; rechts Burger, davor der Trüffel-Dip, dahinter die Beilage, die rechts aus
   dem Bild läuft. Hier: Band Schwarz und 520 hoch (wie vorher die Video-Karte), Textfeld Limette mit Rundung 20 (alle
   Karten), mittig in der Höhe (Shake Shack hat darunter die Folienpunkte, wir nur ein Motiv); Schrift im System der
   Seite (Phudu 900 58, Poppins 18/28), Knopf schwarz. */
.neuheit { position: relative; display: grid; height: 520px; overflow: hidden; background: var(--schwarz); }
/* Karussell (08.10.: „aus dem trüffel smash banner einfach eins wo mehrere fotos drin sitzen"): Folien übereinander,
   Balken unten links zeigen 6 s. Wechsel (emil 08.10.): nur das Foto blendet über (700 ms) — die neue Aufnahme legt sich
   über die alte, die voll stehen bleibt, bis sie verdeckt ist (vorher blendeten beide gleichzeitig, in der Mitte sackte das
   Bild ins Schwarz). Das grüne Feld blendet nicht mit: das alte ist sofort weg, das neue steht sofort, nur sein Inhalt läuft
   ein (ease-out) — vorher lagen mitten im Wechsel beide Texte durchscheinend übereinander. */
.neuheit__folie { position: relative; grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 700ms; }
.neuheit__folie[data-an] { z-index: 1; visibility: visible; transition: none; }
.neuheit__folie:not([data-an]) .neuheit__feld { visibility: hidden; }
.neuheit__foto, .neuheit__bild { opacity: 0; transition: opacity 0s linear 700ms; }
.neuheit__folie[data-an] :is(.neuheit__foto, .neuheit__bild) { opacity: 1; transition: opacity 700ms ease; }
.neuheit[data-gewechselt] .neuheit__folie[data-an] .neuheit__feld > * { animation: band-rein 600ms cubic-bezier(.23, 1, .32, 1) both; }
.neuheit[data-gewechselt] .neuheit__folie[data-an] .neuheit__feld > :nth-child(1) { animation-delay: 100ms; }
.neuheit[data-gewechselt] .neuheit__folie[data-an] .neuheit__feld > :nth-child(2) { animation-delay: 160ms; }
.neuheit[data-gewechselt] .neuheit__folie[data-an] .neuheit__feld > :nth-child(3) { animation-delay: 220ms; }
@keyframes band-rein { from { opacity: 0; transform: translateY(14px); } }
.neuheit__foto img.neuheit__vorlage { object-position: 50% 50%; }   /* vorhandenes Foto, bis Codex den Bildplatz liefert */
.neuheit__folie--dienstag .neuheit__foto img.neuheit__vorlage { object-position: 50% 60%; }   /* Hero-Foto als Platzhalter: Burger im Bild */
.neuheit__punkte { position: absolute; z-index: 3; bottom: 16px; align-items: center; left: max(var(--rand), (100% - var(--breite)) / 2); display: flex; gap: 8px; color: var(--creme); }
.neuheit__punkte button { display: grid; align-items: center; width: 48px; height: 44px;   /* Tippfläche 44, der Balken bleibt 5 hoch */ padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.neuheit__punkte span { position: relative; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(250, 247, 237, .3); }
.neuheit__punkte button[aria-current] span { background: rgba(250, 247, 237, .5); }
.neuheit__punkte span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--limette); transform: scaleX(0); transform-origin: left; }
.neuheit__punkte button[aria-current] span::after { animation: band-zeit 6000ms linear forwards; }
/* Pause (Audit 08.10., WCAG 2.2.2: Wechsel alle 6 s braucht ein Anhalten, das auch ohne Maus geht) */
.neuheit__punkte .neuheit__pause { display: grid; place-items: center; width: 44px; margin-right: 2px; }
.neuheit__pause svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(250, 247, 237, .6); transition: background-color 160ms ease, transform 160ms var(--kurve-aus); }
.neuheit__pause:active svg { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .neuheit__pause:hover svg { background: rgba(250, 247, 237, .14); } }
.neuheit[data-angehalten] .neuheit__punkte button[aria-current] span::after { animation-play-state: paused; }
.neuheit[data-pause] .neuheit__punkte button[aria-current] span::after { animation-play-state: paused; }
.neuheit[data-still] .neuheit__punkte button[aria-current] span::after { animation: none; transform: scaleX(1); }
@keyframes band-zeit { to { transform: scaleX(1); } }
.neuheit__feld {
  position: absolute; z-index: 2; top: 50%; left: max(var(--rand), (100% - var(--breite)) / 2); width: min(620px, 48%);
  padding: 36px 32px 34px; border-radius: 20px; background: var(--limette); color: var(--schwarz); transform: translateY(-50%);
}
.neuheit h2 { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }
.neuheit__feld p { margin: 16px 0 0; font: 500 18px/28px var(--text); }
.neuheit__feld .knopf { margin-top: 26px; }
/* Das Foto (Codex) füllt das Band; rechts verankert, damit das Gericht bei schmaleren Breiten rechts vom Feld bleibt.
   Fehlt es, stehen die Freisteller der Karte an seiner Stelle (data-ohne-foto). */
.neuheit__foto, .neuheit__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.neuheit__foto img { object-fit: cover; object-position: 100% 50%; }
.neuheit__bild { display: none; position: absolute; inset: 0 0 0 calc(max(var(--rand), (100% - var(--breite)) / 2) + min(620px, 48%) + 56px); }
.neuheit__folie[data-ohne-foto] .neuheit__bild { display: block; }
.neuheit__bild img { position: absolute; height: auto; }
.neuheit__pommes { z-index: 1; left: 350px; top: 150px; width: 430px; }
.neuheit__burger { z-index: 2; left: 0; top: 54px; width: 400px; }
.neuheit__dip { z-index: 3; left: 268px; top: 296px; width: 186px; }

/* Laden ausgeblendet (07.10.): die Karte trägt dann selbst die 160 bis zum Standorte-Streifen (sonst nur ihre 80) */
.karte:has(+ .laden-sek[hidden] + .laeden:not([hidden])) { padding-bottom: 160px; }

/* Kopf (06.10.: „die der laden sektion braucht glaube ich auch einen kopf"): H2 + Satz links; der Knopf „Zu den Standorten"
   entfällt („kann auch weg weil die standorte eine sektion drunter sind") */
/* zentriert (Inhaber 06.10.: „überschrift zentrieren"), wie der Kopf der Combos */

/* ---------- 5 · Standorte (smash-werk / Grillify „Speakeasy": Vorhang) ----------
   Zwei Hälften eines Hauptfilialen-Fotos je 50 % gehen auseinander bis auf 19 % am Rand und geben die Mitte frei.
   Schrift im System dieses Entwurfs (bude), nicht in Six Caps — Inhaber 06.10.: „schriftart und co musst du anpassen":
   Titel Phudu 900 in Hero-Größe zwischen zwei Linien, Städte Phudu 900 32 wie bude, Status als Pille (bude, offen = Limette).
   Einrasten (Inhaber 06.10.: „es freezt nicht mehr an der richtigen stelle und öffnet sich dann erst"): der Streifen
   bleibt stehen, sobald er mittig unter dem Kopf steht (--oben setzt app.js), öffnet über die ersten 75 % der
   Zugstrecke, hält die letzten 25 % offen und scrollt dann weiter. Zugstrecke = der Abstandhalter ::after, 70 vh.
   Höhe: neuer Wunsch des Inhabers 06.10. — für das gemeinsame Hauptfilialen-Foto etwas höher,
   jedoch weiterhin heller Abstand oben/unten. Responsive Mindesthöhe unten; keine volle Fensterhöhe.
   Nur seitlich aufgehen (Inhaber 06.10.: „das soll nur zur seite aufgehen und nicht nach unten und oben"): Schwarz ist
   nur der Streifen selbst, um ihn herum Creme wie die Karte darüber — sonst wuchs beim Einrasten schwarze Fläche über
   und unter den Fotos, und es sah aus, als ginge er auch nach oben und unten auf. */

.laden { display: flex; flex-direction: column; align-items: center; }
.laden h3 { margin: 0; font: 900 32px/1 var(--kopf-schrift); }
.status { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 50px; box-shadow: inset 0 0 0 1px rgba(250, 247, 237, .35); font: 500 15px/18px var(--kopf-schrift); white-space: nowrap; }

/* Codex 06.10. · freigegebenes Hauptfilialen-Motiv: Türfuge bleibt die gemeinsame Bildkante.
   Die Bühne reserviert unter dem Kopf 96px helle Luft, sofern der Inhalt hineinpasst.
   Text bleibt innerhalb der vom unveränderten 62%-Vorhang freigegebenen Mitte. */

@media (min-width: 810px) and (max-width: 1199px) {

  .ueber__kopf { flex-direction: column; align-items: flex-start; gap: 24px; }

}

/* ---------- 4b · Der Laden, neu (08.10. abends, ohne Vorlage): „jetzt fehlt noch mindestens eine sektion über den laden …
   zwischen die combos und den bild streifen". Creme; Kopf wie Karte und Combos; Raster 4 Spalten × 2 Reihen: Foto 2 × 2,
   zwei Zahlenkarten, darunter breit die schwarze Karte. Abstände: 160 unter dem Trüffel-Streifen, 80 + 80 zu den Combos. */
.einblick { --grau: #5E5D58; padding: 160px 0 80px; background: var(--creme); color: var(--schwarz); }
.einblick__kopf h2 { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }   /* wie die Überschriften der Karte und der Combos */
.einblick__raster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(270px, auto)); gap: 20px;
  width: min(var(--breite), 100% - 2 * var(--rand)); margin: 46px auto 0;
}
.einblick__foto { position: relative; grid-column: 1 / 3; grid-row: 1 / 3; margin: 0; overflow: hidden; border-radius: 20px; background: var(--schwarz); isolation: isolate; }   /* nur Foto, Text im Bild (08.10.: „einfach als foto mit dem text im bild") */
.einblick__foto::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(0deg, rgba(13, 13, 13, .78), rgba(13, 13, 13, 0)); pointer-events: none; }
.einblick__bild { position: absolute; inset: 0; z-index: -1; }
.einblick__bild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }   /* bilder/laden-werk.webp (Codex): Motiv mittig; absolut, damit das Foto nicht die Reihenhöhe bestimmt */
.einblick__bild img.einblick__bild--vorlage { object-position: 50% 30%; }   /* Rückfall, bis Codex liefert: Ladenfoto, Schild „SMASH WERK" ganz im Bild */
.einblick__foto figcaption { position: absolute; z-index: 1; left: 26px; bottom: 24px; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--creme); font: 600 22px/1 var(--kopf-schrift); }
.einblick__foto figcaption svg { width: 18px; height: 18px; flex: none; }
.einblick__karte { display: flex; flex-direction: column; padding: 24px 28px 28px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.einblick__karte--schwarz { grid-column: 3 / 5; background: var(--schwarz); color: var(--creme); box-shadow: none; }
.einblick__karte:not(.einblick__karte--schwarz) { background: var(--limette); }   /* Zahlenkarten in Limette (08.10.: Farbe in den Karten), Rand bleibt schwarz */
.einblick__karte:not(.einblick__karte--schwarz) p { color: #3E3D39; }
.einblick__marke { align-self: flex-start; padding: 4px 12px; border-radius: 50px; background: var(--schwarz); color: var(--limette); font: 500 16px/18px var(--kopf-schrift); }
.einblick__karte--schwarz .einblick__marke { background: var(--limette); color: var(--schwarz); }
.einblick__zahl { display: flex; align-items: baseline; gap: 10px; margin-top: 44px; font: 900 108px/.8 var(--kopf-schrift); letter-spacing: -.02em; white-space: nowrap; }
.einblick__zahl small { font: 600 22px/1 var(--text); letter-spacing: 0; }
.einblick__satz { margin-top: 44px; font: 900 46px/.98 var(--kopf-schrift); letter-spacing: -.01em; }   /* Karte ohne Zahl (08.10.: „da muss … einfach etwas ohne eine zahl rein"): Aussage statt Zahl, gleiche Oberkante */
.einblick__karte p { margin: 16px 0 0; font: 500 14px/22px var(--text); color: var(--grau); }
.einblick__karte--schwarz h3 { margin: 22px 0 0; font: 900 36px/1.02 var(--kopf-schrift); letter-spacing: -.01em; }
.einblick__knopf { align-self: flex-start; margin-top: auto; height: 42px; padding: 0 18px; gap: 8px; font-size: 17px; }   /* unten in der schwarzen Karte */
.einblick__knopf svg { width: 18px; height: 18px; }
.einblick__karte--schwarz p { margin-bottom: 22px; }
.einblick__karte--schwarz p { color: rgba(250, 247, 237, .72); }
.einblick + .combos { padding-top: 80px; }

.feld { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(13, 13, 13, .2); color: rgba(13, 13, 13, .28); font: 900 30px/1 var(--kopf-schrift); }
.feld:not(.feld--voll):not(.feld--gratis) { box-shadow: none; border: 2px dashed rgba(13, 13, 13, .25); }

/* ---------- 5 · Standorte, neu (08.10.) — aus dem Entwurf neu.html („also standorte kannst du mal umbauen auf deinen
   entwurf"). Ohne Vorlage, aus den Bausteinen der Teile, die er mag: Fläche Schwarz, Kopf links wie Karte und Bewertungen,
   zwei weiße Karten wie die Gerichte (Foto oben, Pille, Stadt groß, Zeiten, „Hier abholen" + Route). Steht hinter den
   Combos: direkt unter dem schwarzen Trüffel-Streifen ginge Schwarz in Schwarz über. Die alten .werke-Regeln oben ruhen. */
/* ---------- gemeinsamer Kopf ---------- */
.sek-kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto;
}
.sek-kopf h2 { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }
.sek-kopf p { margin: 10px 0 0; font: 500 16px/24px var(--text); color: var(--grau); }
.sek-kopf > .knopf { flex: none; }
/* ---------- Standorte (Schwarz): zwei weiße Karten — Foto oben, Status-Pille, Stadt groß, Zeiten, zwei Knöpfe ---------- */
.orte-sek { --grau: rgba(250, 247, 237, .72); padding: 80px 0; background: var(--schwarz); color: var(--creme); }
.orte-sek .sek-kopf { justify-content: center; text-align: center; }   /* Kopf mittig (08.10.: „unsere werke den kopf zentrieren") */
.orte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;   /* drei Läden seit 08.10. */
  width: min(var(--breite), 100% - 2 * var(--rand)); margin: 46px auto 0;
}
.ort { display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: 20px; background: #FFFFFF; color: var(--schwarz); }
.ort__bild { position: relative; height: 240px; overflow: hidden; border-radius: 14px; background: var(--schwarz); isolation: isolate; }
/* Stadtkarte statt Foto (08.10.: „eine saubere karte … bringt wieder leben in das ganze"). Seit 12.10.2026 ein festes Bild
   (bilder/karte-<ort>.webp, erzeugt mit _bau/karten-bilder.js) statt live über MapLibre — Pin mittig, deshalb mittig zuschneiden.
   Kartendaten-Nachweis klein unten rechts, wie vorher bei MapLibre. */
.ort__bild { background: #FAF7ED; }
.ort__bild img.ort__kartenbild { object-fit: none; object-position: 50% 50%; }   /* Maßstab 1 : 1 wie die Live-Karte (640 × 600 bei 2x), nur mittig beschnitten */
.ort__quelle { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .8); color: #5C584D; font: 400 10px/14px var(--text); text-decoration: none; }
.ort__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.ort__status { align-self: flex-start; margin: 22px 8px 0; padding: 4px 12px; border-radius: 50px; background: var(--schwarz); color: var(--limette); font: 500 16px/18px var(--kopf-schrift); }
.ort h3 { margin: 18px 8px 0; font: 900 58px/.95 var(--kopf-schrift); letter-spacing: -.01em; }
.ort p { margin: 12px 8px 0; font: 500 15px/24px var(--text); color: #5E5D58; }
.ort p a { color: inherit; }
.ort__fuss { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 8px 0; }
.ort__fuss .knopf { height: 42px; padding: 0 18px; font-size: 17px; }
.ort__fuss .knopf svg { width: 18px; height: 18px; }

/* ---------- 6 · Combos — vier Karten wie die Gerichte der Karte (Inhaber 06.10.: „mach mal die 4 karten rein") ----------
   Verlauf: bude 2 × 2 (Stack n Snack) → „passen da nicht mehr rein", drei Vorschläge → „wir nehmen erstmal die 3" (hohe
   Kacheln, Grillify „The Brewery") → „zeig mir … die 4 karten wie oben bei der karten sektion" → eingebaut. Es gelten die
   Regeln von .gerichte / .gericht unverändert (auch Handy: wischen mit Punkten); hier nur, was die Sektion anders braucht.
   Die Kacheln liegen in der Sicherung (06.10. abends) und als Vorschlags-Skript in _bau/vorschlaege. */
/* Grund Sand (Inhaber 06.10.: „und dann denke ich brauchen die combos eher den anderen hintergrund") — hebt die Combos von
   Standorte (Creme) und App-Block (Creme) ab */
.combos { --grau: #5E5D58; --sand: #E9E4D4; padding: 160px 0 80px; background: var(--limette); color: var(--schwarz); }   /* Limette seit 08.10. („genau wie die karte sektion, grüner hintergrund, weiße karten"), vorher Sand */   /* oben 160: Abstand zum Standorte-Streifen wie unter der Video-Karte */
.combos__kopf { width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto; }   /* seit 08.10. aufgebaut wie der Kopf der Karte (Klasse karte__kopf), links */
.combos__kopf .karte__ganz, .einblick__kopf .karte__ganz { height: 35px; padding: 0 18px; gap: 8px; font-size: 18px; }   /* wie „Ganze Karte" in der Karte */
.combos__kopf .karte__ganz svg, .einblick__kopf .karte__ganz svg { width: 18px; height: 18px; }
.combos__kopf h2 { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }

.combos { --rand-karte: rgba(13, 13, 13, .14); }   /* Kartenrand wie in der Karte (dort an .karte gesetzt) */
.gerichte--combos { margin-top: 46px; }   /* Pille sitzt seit 08.10. innen, keine Luft für die Kante mehr nötig */
/* Karten genau wie in der Karte (08.10.): weiß, schwarzer Rand 1,5, weiße Bühne mit Zeile für die Pille, Pille innen links */
.combos .gericht { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); }
@media (hover: hover) and (pointer: fine) { .combos .gericht:hover { box-shadow: inset 0 0 0 1.5px var(--schwarz), 0 18px 34px -24px rgba(13, 13, 13, .35); } }
.combos .gericht__bild { height: 256px; background: #FFFFFF; }
.combos .gericht__bild img { top: 46px; height: calc(100% - 56px); }
.combos .gericht__marke { top: 12px; left: 8px; transform: none; white-space: nowrap; }
.gerichte--combos .gericht p { min-height: 60px; -webkit-line-clamp: 3; }

/* ---------- 7 · App / Vorbestellen — Original Stack n Snack „Order in 3 taps" (gemessen 1440 im bude-Nachbau 12511d13a) ----------
   Raster 855 breit mittig: Handy 285 (Seitenverhältnis 402 : 874) links, Text bis 470 rechts, Abstand 100, mittig zueinander.
   Rechts: umrandete Pille, H2, Text, zwei Knöpfe im App-Store-Schnitt (200 × 71, runder Kreis 44), drei Kennzahlen.
   Farbe dieses Entwurfs: Grund Sand (bude „sektion--sand", trennt von den Combos), Orange/Senf → Limette, Weinrot → Schwarz.
   Akzent in der H2 („3 Taps") als Limetten-Marker — Limette als Schrift wäre auf Sand nicht lesbar. Schrift: H2 wie die
   übrigen (Phudu 900 58), Text Poppins. Blockabstand 80 / Handy 60. */
/* volle Breite (Inhaber 06.10.: „es ist der bruch das die sektion nicht die komplette breite nutzt"; Kritik P1): zwei gleiche Spalten,
   links das Handy, rechts der Text (Limetten-Fläche hinter dem Handy wieder entfernt). Grund Creme: kurz Sand, dann
   bekamen die Combos den Sand und die App wieder hell (Inhaber 06.10.) */
.vorbestellen { --grau: #5E5D58; --weiss: #FFFFFF; padding: 80px 0; background: var(--creme); color: var(--schwarz); }
.vorbestellen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; align-items: center; width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto; }
/* ohne Farbfläche (Inhaber 06.10.: „das mit dem handy hintergrund finde ich deswegen nicht mehr gut weil es nicht mehr wie eine
   abgrenzung wirkt zur nächsten sektion und hintergrund färben bringt es nicht" — die Limetten-Fläche lief in die grüne
   Bewertungs-Sektion darunter über): das Handy steht frei und mittig in der linken Hälfte */
.vorbestellen__buehne { position: relative; display: grid; place-items: center; isolation: isolate; }
/* Kreis hinter dem Handy (08.10.: „den kreis nochmal hinter das handy … aber diesmal vernünftig"; bude: Senf-Kreis → Limette):
   mittig hinter dem Handy, 1,7 × so breit wie das Handy, liegt ganz im App-Block (oben/unten ≥ 40 Luft) */
.vorbestellen__buehne::before { content: ''; position: absolute; top: 50%; left: 50%; z-index: -1; width: 490px; aspect-ratio: 1; border-radius: 50%; background: var(--limette); transform: translate(-50%, -50%); }
.vorbestellen__text { max-width: 560px; }   /* Text 520 statt 470: „In 3 Taps bestellt." einzeilig */
/* Handy: Rahmen aus Bibliotheksbaustein e4fae03d (bude: Senf, hier Limette). Bildschirm-Lage im Rahmenbild gemessen
   (Loch im Alphakanal, 804 × 1748): links 4,10 % · oben 1,66 % · Breite 91,67 % · Höhe 96,68 % · Ecke 14,5 % der Breite. */
.handy { position: relative; width: 285px; aspect-ratio: 402 / 874; container-type: inline-size; filter: drop-shadow(0 30px 34px rgba(13, 13, 13, .18)); }
.handy__rahmen { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.handy__schirm { position: absolute; left: 4.1%; top: 1.66%; width: 91.67%; height: 96.68%; display: flex; flex-direction: column; overflow: hidden; border-radius: 14.5cqw; background: var(--creme); font-family: var(--text); }
.handy__status { display: flex; justify-content: space-between; align-items: center; height: 15cqw; padding: 2cqw 8cqw 0 10cqw; font: 600 12px/1 var(--text); }
.handy__signal { display: flex; gap: 2px; align-items: flex-end; }
.handy__signal i { width: 3px; border-radius: 1px; background: var(--schwarz); }
.handy__signal i:nth-child(1) { height: 4px; } .handy__signal i:nth-child(2) { height: 6px; } .handy__signal i:nth-child(3) { height: 8px; } .handy__signal i:nth-child(4) { height: 10px; }
.handy__kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 13px; font-weight: 500; }
.handy__rund { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 3px rgba(13, 13, 13, .12); color: var(--schwarz); font-size: 12px; font-weight: 600; text-decoration: none; }
.handy__rund svg { width: 14px; height: 14px; }
.handy__zahl { background: var(--limette); }
.korb { flex: 1; display: grid; align-content: start; gap: 8px; margin: 0; padding: 4px 12px; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.korb li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 14px; background: var(--weiss); }
.korb__bild { width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--limette); }
.korb__bild img { width: 100%; height: 100%; object-fit: contain; }
.korb__name { font-size: 12px; font-weight: 500; line-height: 15px; }
.korb__info { overflow: hidden; font-size: 10px; line-height: 13px; color: var(--grau); white-space: nowrap; text-overflow: ellipsis; }
.korb__preis { font-size: 11px; font-weight: 600; line-height: 15px; }
.korb .menge { min-width: 0; height: 24px; gap: 4px; background: none; color: var(--schwarz); }
.korb .menge button { width: 20px; height: 20px; border-radius: 50%; background: var(--schwarz); color: var(--creme); }
.korb .menge button:last-child { background: var(--limette); color: var(--schwarz); }
.korb .menge button:disabled { cursor: default; }
.korb .menge svg { width: 11px; height: 11px; }
/* Messung 15.10.2026: die Knöpfe im Handy-Bild sind 20 px — die Tippfläche wächst unsichtbar auf 32 px, das Bild bleibt gleich */
.korb .menge button { position: relative; }
.korb .menge button::after { content: ''; position: absolute; inset: -6px; }
.korb .menge output { min-width: 12px; font-size: 11px; }
.handy__summe { display: flex; justify-content: space-between; align-items: center; margin: 8px 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--schwarz); color: var(--creme); }
.handy__summe small { display: block; font-size: 10px; line-height: 12px; opacity: .8; }
.handy__summe strong { font-size: 14px; line-height: 18px; }
.handy__kasse { padding: 8px 14px; border-radius: 14px; background: var(--limette); color: var(--schwarz); font-size: 11px; font-weight: 500; text-decoration: none; }
.handy__leiste { display: flex; justify-content: space-around; padding: 8px 4px 7cqw; background: var(--schwarz); color: rgba(250, 247, 237, .7); font-size: 8px; line-height: 10px; }
.handy__leiste span { display: grid; justify-items: center; gap: 3px; }
.handy__leiste svg { width: 15px; height: 15px; }
.handy__leiste .aktiv { color: var(--limette); }
.vorbestellen__pille { display: inline-flex; align-items: center; height: 32px; margin: 0; padding: 6px 12px; border-radius: 50px; box-shadow: inset 0 0 0 1px currentColor; font: 400 14px/20px var(--text); }
.vorbestellen__text h2 { margin: 12px 0 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }
.vorbestellen__text h2 em { padding: 0 .08em; border-radius: 6px; background: var(--limette); font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vorbestellen__unter { margin: 13px 0 0; font: 400 16px/24px var(--text); color: var(--grau); }
.app-reihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 39px; }
.app-knopf { display: flex; align-items: center; gap: 10px; width: 200px; height: 71px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .22); color: var(--schwarz); text-decoration: none; transition: box-shadow 200ms ease, background-color 200ms ease, transform 160ms var(--kurve-aus); }
a.app-knopf:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { a.app-knopf:hover { box-shadow: inset 0 0 0 1px var(--schwarz); background: rgba(250, 247, 237, .5); } }
.app-knopf__rund { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--limette); color: var(--schwarz); }
.app-knopf__rund svg { width: 24px; height: 24px; }
.app-knopf small { display: block; font-size: 14px; line-height: 20px; color: var(--grau); }
.app-knopf > span:last-child { font: 500 16px/23px var(--text); }
/* Gutschein in der App-Sektion (08.10.): Schnitt der App-Knöpfe, so breit wie beide zusammen, gestrichelte Kante */
.gutschein { display: flex; align-items: center; gap: 10px; width: 414px; max-width: 100%; height: 71px; margin-top: 14px; padding: 12px 14px 12px 12px; border: 1.5px dashed rgba(13, 13, 13, .45); border-radius: 12px; background: transparent; color: var(--schwarz); text-align: left; cursor: pointer; font: inherit; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--kurve-aus); }
@media (hover: hover) and (pointer: fine) { .gutschein:hover { border-color: var(--schwarz); background: rgba(250, 247, 237, .5); } }
.gutschein:active { transform: scale(.98); }
.gutschein__rund { font: 600 20px/1 var(--text); }
.gutschein__text small { display: block; font-size: 14px; line-height: 20px; color: var(--grau); }
.gutschein__text b { font: 500 16px/23px var(--text); }
.gutschein__text b span { font-weight: 600; letter-spacing: .04em; }
.gutschein__tun { flex: none; margin-left: auto; padding: 11px 16px; border-radius: 10px; background: var(--schwarz); color: var(--limette); font: 500 16px/1 var(--kopf-schrift); text-align: center; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }   /* etwas größer (08.10.: „der kopieren button kann ruhig ein kleines stück größer") */
/* emil 08.10.: „Kopieren" ↔ „Kopiert" tauscht nicht hart — das neue Wort kommt mit 2 px Unschärfe herein (je Wechsel ein neues
   span, also läuft es jedes Mal); die Breite bleibt die von „Kopieren", damit der Knopf nicht springt */
.gutschein__tun > span { display: inline-block; animation: code-tausch 220ms var(--kurve-aus) both; }
@keyframes code-tausch { from { opacity: 0; filter: blur(2px); transform: translateY(4px); } }
.gutschein[data-kopiert] .gutschein__tun { background: var(--limette); color: var(--schwarz); box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 39px 0 0; padding: 0; list-style: none; color: var(--grau); font: 400 16px/24px var(--text); }
.kennzahlen li { display: flex; align-items: center; gap: 7px; }
.kennzahlen svg { width: 19px; height: 19px; color: var(--schwarz); }

/* ---------- 8 · Über uns + Bewertungen — bude, auf Linien gebracht ----------
   Inhaber 06.10.: „mach wieder die alte und bring das alles in form für das einheitliche" · „immer alles gerne auf einer
   höhe nichts höher als das andere". Raster zwei gleiche Spalten (Abstand 70, Kanten an der Inhaltsbreite), drei Reihen:
   1) beide H2 gleich groß (Phudu 900 58), oben bündig; rechts die Wertung unten an der H2-Linie (wie „Ganze Karte").
   2) das Laufband über die Inhaltsbreite (280 hoch), Ränder blenden aus; Karten Creme, Rundung 18 (Teamfoto entfällt 06.10.).
   3) Text links und Schlusssatz rechts in derselben Schrift, oben bündig.
   Karten wie bude: Creme mit Rand, Zitat Phudu 500 18 Versalien, Kürzel abwechselnd Limette/Schwarz. Laufband ~45 px/s,
   hält beim Überfahren an. Grund Creme, Blockabstand 80 / Handy 60. */
/* 06.10.: Grund Limette („die sektion in dem grün einfärben"); nur ein Band über die Inhaltsbreite, an beiden Rändern hart
   abgeschnitten — die Karten kommen rechts aus der Seite und gehen links in die Seite („aus der seite kommt und in die seite geht") */
.ueber { --grau: rgba(13, 13, 13, .72); --stimmen-hoehe: 280px; padding: 80px 0; background: var(--limette); color: var(--schwarz); }
/* 06.10.: Kopf — Überschrift links, rechts in einer Reihe Satz, Zahl und Sterne; beide gleich hoch auf einer Mittellinie,
   Kanten an der Inhaltsbreite. Darunter das Band über die Inhaltsbreite (harte Ränder). */
.ueber__raster { display: grid; row-gap: 46px; width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto; }
/* 08.10. („den kopf … jetzt mal wirklich vernünftig machen"): rechts zwei Zeilen genau so hoch wie die Überschrift — oben
   Zahl + Sterne + Quelle (oben bündig mit den Versalien der Überschrift), unten der Satz (auf ihrer Grundlinie), rechtsbündig */
/* 08.10. (Inhaber: „überschrift und der einzeiler nach links und das 4,8 und die 5 sterne und das stimmen aus kiel machst du
   größer rechts damit beides die gleiche höhe hat"): links Überschrift + Satz wie der Kopf der Karte; rechts die Wertung,
   oben bündig mit den Versalien der Überschrift, unten auf der Grundlinie des Satzes — die Zahl füllt die ganze Höhe,
   daneben oben die Sterne, unten die Quelle (so groß wie der Satz) */
.ueber__kopf { display: flex; align-items: stretch; justify-content: space-between; gap: 32px; }
.ueber__kopf .ueber__titel { white-space: nowrap; }   /* einzeilig (alle Überschriften eine Zeile) */
.ueber__satz { margin: 10px 0 0; font: 500 16px/24px var(--text); color: var(--grau); }
.ueber__titel { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }
.wertung { display: flex; gap: 16px; flex: none; padding-block: 5px 4px; }
.wertung > strong { display: flex; align-items: flex-end; font: 900 108px/.74 var(--kopf-schrift); letter-spacing: -.03em; }
.wertung > div { display: flex; flex-direction: column; justify-content: space-between; }
.wertung__sterne { display: flex; gap: 3px; color: var(--schwarz); }   /* dieselben Sterne wie in den Karten */
.wertung__sterne svg { width: 30px; height: 30px; }
.wertung p { margin: 0; font: 500 16px/1 var(--text); color: var(--grau); white-space: nowrap; }
/* harte Kante an den Rändern der Inhaltsbreite, kein Ausblenden (Inhaber 06.10.: „kein weichzeichnen an den übergängen") */
.stimmen__band { min-width: 0; height: var(--stimmen-hoehe); overflow: hidden; }   /* Inhaltsbreite (08.10. kurz volle Breite: „ne mach das wieder zurück") */
.stimmen__spur { display: flex; gap: 20px; width: max-content; height: 100%; padding-right: 20px; }
.stimmen__spur.laeuft { animation: laufband var(--dauer, 60s) linear infinite; }
@media (hover: hover) and (pointer: fine) { .stimmen__band:hover .stimmen__spur { animation-play-state: paused; } }
/* Pause für das Laufband (Audit 08.10., WCAG 2.2.2): rechts unter dem Band */
.stimmen__pause { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: -24px; padding: 0 16px 0 13px; border: 0; border-radius: 50px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--schwarz); color: var(--schwarz); font: 500 16px/1 var(--kopf-schrift); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--kurve-aus); }
.stimmen__pause:active { transform: scale(.97); }
.stimmen__pause svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .stimmen__pause:hover { background: var(--schwarz); color: var(--limette); } }
.stimmen__band[data-angehalten] .stimmen__spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(-50%); } }
.stimme { display: flex; flex-direction: column; flex: none; width: 290px; height: 100%; padding: 24px; border-radius: 20px; background: var(--creme); box-shadow: inset 0 0 0 1.5px var(--schwarz); }   /* schwarzer Rand (Inhaber 07.10.: „die bewertungs karten brauchen glaube ich einen schwarzen rand") */
.stimme__sterne { display: flex; gap: 2px; color: var(--schwarz); }
.stimme__sterne svg { width: 16px; height: 16px; }
.stimme blockquote { margin: 18px 0 0; font: 500 18px/1.15 var(--kopf-schrift); letter-spacing: -.2px; text-transform: uppercase; }
.stimme__wer { display: flex; align-items: center; gap: 14px; margin-top: auto; font: 500 15px/1.3 var(--text); }
.stimme__kuerzel { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font: 600 17px/1 var(--kopf-schrift); }
.stimme__kuerzel--limette { background: var(--limette); color: var(--schwarz); }   /* auf der Creme-Karte */
.stimme__kuerzel--schwarz { background: var(--schwarz); color: var(--limette); }
.knopf--umriss { background: transparent; color: var(--schwarz); box-shadow: inset 0 0 0 1px var(--schwarz); }
@media (hover: hover) and (pointer: fine) { .knopf--umriss:hover { background: var(--schwarz); color: var(--creme); } }
.knopf--umriss svg { width: 20px; height: 20px; }

/* ---------- 9 · Fuß — bude (style.css 478–509, design.css 134–138; „ursprünglicher Bude-Fuß") ----------
   Raster volle Breite: Links-Block | „Komm vorbei" 320, Abstand 80 (Stadtkarte entfernt 06.10.: „die karte aus dem footer muss auch weg"). Links: drei Spalten (Schnell, Rechtliches,
   Bestellen), darunter Newsletter über die ganze Breite. Überschriften Phudu 500 20 in Limette (bude Senf), Links Phudu 500 16.
   Karte 411 hoch, Pins wie bude (Tropfen, heute offen größer in Limette). Grund Schwarz (bude Weinrot), Abstand 80 / Handy 60. */
.fuss { overflow: hidden; padding: 80px 0; background: var(--schwarz); color: var(--creme); }
/* Krosse Kante über dem Fuß (13.10.2026, Gegenstück zur Kante unter dem Hero): die Limette davor reißt in den schwarzen Fuß.
   Sitzt im Fuß (overflow: hidden); die Kantenhöhe kommt oben auf den Innenabstand. Gilt auch für karte.html. */
.fuss { position: relative; --kante: 20px; padding-top: calc(80px + var(--kante)); }
.fuss::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: calc(var(--kante) + 1px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27720%27%20height%3D%2716%27%20viewBox%3D%270%200%20720%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20L0%207%20L11.5%209.8%20L18.8%205%20L28%209.4%20L38.5%204.699999999999999%20L47.8%205.5%20L57.6%204%20L65%208.9%20L75.3%205.300000000000001%20L81.6%205.5%20L90.4%202.9000000000000004%20L101.2%2011.6%20L110.3%202.8000000000000007%20L120.5%205.9%20L129.9%203%20L141.4%208.9%20L149.4%203.8000000000000007%20L157.4%2011.3%20L165.2%208.3%20L172.9%202.6999999999999993%20L182.3%205%20L193.5%2012.4%20L201.2%206.800000000000001%20L210.2%208.4%20L217.4%203%20L223.7%209%20L231.8%205.699999999999999%20L243.3%207.300000000000001%20L250.3%208.5%20L258%209%20L266.6%209.3%20L275.8%206.199999999999999%20L283.2%203%20L291.9%203.5%20L301.7%206%20L310.8%207.4%20L320.9%202.6999999999999993%20L329.3%205.199999999999999%20L336.8%206.5%20L344.9%209.4%20L353.3%204.300000000000001%20L364.6%2011.8%20L375.5%2012.1%20L383.9%2011.3%20L390.4%202%20L397.7%206%20L404.6%208%20L414.1%2011.5%20L425.7%203.3000000000000007%20L437%203.3000000000000007%20L448.4%204.6%20L456.1%2012.9%20L463.6%2012.2%20L469.6%206.199999999999999%20L477%204.800000000000001%20L485.9%205.4%20L493.3%203.3000000000000007%20L500.8%208.9%20L512.1%2011.7%20L521.1%2013%20L532.5%206%20L544.1%2012.8%20L555.5%2010.9%20L567.3%206.800000000000001%20L577.4%2010.1%20L584.7%2010.7%20L594.1%2012.4%20L604.7%205.300000000000001%20L615%207.5%20L621.2%2011.8%20L632.7%2011.6%20L642.8%203.1999999999999993%20L649%203.3000000000000007%20L660.2%202.0999999999999996%20L671.9%204.6%20L680.5%2010.3%20L690.8%203.3000000000000007%20L699.2%2010.4%20L707.6%203.1999999999999993%20L717%209.1%20L720%207%20L720%200%20Z%27%20fill%3D%27%23E1FB95%27%2F%3E%3C%2Fsvg%3E") 0 0 / 720px 100% round no-repeat;
}
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 80px; align-items: start; width: min(var(--breite), 100% - 2 * var(--rand)); margin: 0 auto; }
.fuss__links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr); column-gap: 20px; row-gap: 74px; align-content: start; }
.fuss__links h3 { margin: 0 0 24px; font: 500 20px/20px var(--kopf-schrift); letter-spacing: -.4px; color: var(--limette); }
.fuss__links > div > a:not(.fuss__knopf), .fuss__links > div > button {
  display: block; margin-bottom: 13px; padding: 0; border: 0; background: none; color: inherit;
  font: 500 16px/19px var(--kopf-schrift); text-align: left; text-decoration: none; cursor: pointer; transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .fuss__links > div > a:not(.fuss__knopf):hover, .fuss__links > div > button:hover { color: var(--limette); } }
.fuss__app { display: grid; gap: 17px; align-content: start; }
.fuss__app h3 { margin-bottom: 7px; }
.fuss__knopf { display: flex; align-items: center; gap: 10px; color: var(--creme); font: 500 16px/23px var(--text); text-decoration: none; }
.fuss__knopf small { display: block; font-size: 14px; line-height: 20px; color: rgba(250, 247, 237, .65); }
.fuss__rund, .hallo__rund { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--limette); color: var(--schwarz); }
.fuss__rund svg { width: 24px; height: 24px; }
.hallo__rund svg { width: 22px; height: 22px; }
.newsletter { grid-column: 1 / -1; }
.newsletter h3 { margin-bottom: 28px; }
.newsletter div { display: flex; gap: 10px; max-width: 420px; }
.newsletter input { flex: 1; min-width: 0; height: 50px; padding: 15px; border: 0; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--creme); color: var(--creme); font: 400 16px/20px var(--text); }
.newsletter input::placeholder { color: rgba(250, 247, 237, .65); }
.newsletter input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--limette); }
.newsletter input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--limette); }
.newsletter .knopf { flex: none; width: 116px; height: 50px; padding: 0; border-radius: 8px; font: 500 18px/20px var(--kopf-schrift); }
.newsletter p { max-width: 330px; margin: 18px 0 0; font: 400 14px/20px var(--text); color: rgba(250, 247, 237, .65); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fuss__hallo { display: flex; flex-direction: column; min-height: 100%; }
.fuss__hallo h3 { margin: 0; font: 600 32px/36px var(--kopf-schrift); }
.hallo__zeile { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; }
.hallo__zeile b { display: block; font: 500 16px/18px var(--kopf-schrift); }
.hallo__zeile b + span { display: block; margin-top: 2px; font: 400 14px/20px var(--text); }
.hallo__zeile a { color: inherit; white-space: nowrap; }   /* Telefonnummern nicht mitten in der Nummer umbrechen */
.folgen { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 26px; font: 400 14px/20px var(--text); }
.folgen a, .folgen button { display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; background: var(--limette); color: var(--schwarz); cursor: pointer; }   /* seit 09.10. Knöpfe: öffnen den Referenz-Hinweis (vorher zeigten sie auf den Fuß selbst) */
.folgen svg { width: 20px; height: 20px; }
.dialog { width: min(560px, 100% - 32px); padding: 36px; border: 0; border-radius: 28px; background: var(--creme); color: var(--schwarz); }
.dialog::backdrop { background: rgba(13, 13, 13, .7); }
.dialog h3 { margin: 0; font: 600 32px/36px var(--kopf-schrift); }
.dialog > p { margin: 12px 0 22px; font: 400 16px/24px var(--text); color: #5E5D58; }

/* ---------- Ganze Karte (karte.html) — bude: Sprungleiste, Gruppen, Burger nach Sorte ---------- */
/* 12.10.2026 (Inhaber: „karte an die sektionen angleichen … hintergrund lime und die karten weiß mit den bildern", Probe
   karte-probe.html → „bau es fest ein"): Die ganze Karte sieht aus wie die Karten-Sektion der Startseite — Grund Limette,
   Gerichte weiß mit schwarzem Rand, Bildfläche weiß, Pille in der Karte; Sprungleiste wie deren Reiter (Creme, Hover Schwarz). */
.kartenseite, .kartenseite .ganz { background: var(--limette); }
.ganz .gericht { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); }
@media (hover: hover) and (pointer: fine) { .ganz .gericht:hover { box-shadow: inset 0 0 0 1.5px var(--schwarz), 0 18px 34px -24px rgba(13, 13, 13, .35); } }
.ganz .gericht__bild { height: 256px; background: #FFFFFF; }
.ganz .gericht__bild img { top: 46px; height: calc(100% - 56px); }
.ganz .gericht__marke { top: 12px; left: 8px; white-space: nowrap; }
.kartenseite .kopf { background: var(--schwarz); }
.ganz { padding: calc(var(--ansage) + var(--leiste) + 60px) 0 90px; }
.ganz__kopf, .ganz__gruppe > h2, .ganz__gruppe > .burgerart, .ganz__sorte, .ganz__zurueck { width: min(var(--breite), 100% - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.ganz h1 { margin: 0; font: 900 58px/1.04 var(--kopf-schrift); letter-spacing: -.01em; }
.ganz__sprung { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ganz__sprung a { display: inline-grid; place-items: center; min-width: 114px; height: 35px; padding: 0 16px; border-radius: 50px; background: var(--creme); font: 500 16px/1 var(--kopf-schrift); text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--kurve-aus); }
.ganz__sprung a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ganz__sprung a:hover { background: var(--schwarz); color: var(--limette); } }
.ganz__gruppe { padding-top: 70px; scroll-margin-top: calc(var(--ansage) + var(--leiste)); }
.ganz__gruppe > h2 { display: block; margin-top: 0; margin-bottom: 0; font: 900 44px/1.04 var(--kopf-schrift); }
.ganz__sorte { display: block; margin-top: 34px; margin-bottom: 0; font: 600 14px/1 var(--kopf-schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.gerichte--ganz { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* je Gruppe 6 → zwei volle Reihen statt 4 + 2 */
.ganz__gruppe > h2 + .gerichte--ganz { margin-top: 26px; }
.ganz__zurueck { margin-top: 70px; }

@media (min-width: 810px) and (max-width: 1199px) {
  .gerichte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karussell .gericht { flex-basis: calc((100% - 20px) / 2); }   /* Tablet: zwei sichtbar, Pfeile schieben um zwei */
  .vorbestellen__raster { gap: 50px; }

  .fuss__raster { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }   /* Fuß ≤ 1199: „Komm vorbei" darunter */
  .fuss__links { grid-template-columns: minmax(0, 1fr) auto; }
  .fuss__hallo { grid-column: 1 / -1; max-width: 440px; min-height: 0; }

}

/* ---------- Handy (unter 810, bude-Handywerte) ---------- */
@media (max-width: 809px) {
  :root { --rand: 24px; --ansage: 32px; --leiste: 76px; }
  .ansage { font-size: 13px; letter-spacing: .26px; }
  .marke__wort { font-size: 22px; }   /* bude Handy 21/.86 */
  .stempel--kopf { width: 38px; height: 38px; }
}
/* Kopf mit Menüknopf bis 959 (polish 09.10., gemessen mit _bau/zwischenbreiten.js): bei 810 lag „KARTE“ auf „SMASH WERK“
   (−45), bei 900 berührten sie sich; erst ab ~950 haben Logo, Menü und Knopf 24 Luft. Die Regeln standen vorher im Handy-Block. */
@media (max-width: 959px) {
  .kopf__leiste { grid-template-columns: minmax(0, 1fr) auto; }
  .menue-knopf { justify-self: end; }
  .kopf__nav, .kopf__knopf { display: none; }
  .menue-knopf {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 44px; height: 44px; padding: 14px 12px; border: 0; border-radius: 12px;   /* Tippfläche 44 (Audit) */
    background: transparent; box-shadow: inset 0 0 0 1px rgba(250, 247, 237, .4); cursor: pointer;
  }
  .menue-knopf span { display: block; height: 2px; border-radius: 1px; background: var(--creme); transition: transform 200ms var(--kurve-aus), opacity 200ms ease; }
  .menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .handy-menue:not([hidden]) {
    display: grid; gap: 2px; width: calc(100% - 2 * var(--rand)); margin: 0 auto; padding: 10px;
    border-radius: 12px; background: var(--creme); color: var(--schwarz); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
  }
  .handy-menue a { padding: 14px; border-radius: 8px; font: 500 24px/1 var(--kopf-schrift); text-decoration: none; }
  .handy-menue a:hover { background: rgba(13, 13, 13, .06); }
  .handy-menue:not([hidden]) { transform-origin: 100% 0; animation: menue-auf 200ms var(--kurve-aus); }   /* emil 08.10.: vom Knopf oben rechts aus, nicht aus dem Nichts */
  @keyframes menue-auf { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
}
@media (max-width: 809px) {

  .held { align-items: flex-start; }
  .held::before { background: linear-gradient(180deg, rgba(13, 13, 13, .72) 0%, rgba(13, 13, 13, .5) 45%, rgba(13, 13, 13, .12) 75%, rgba(13, 13, 13, 0) 100%); }
  .held__inhalt { padding-block: 36px 60px; width: auto; padding-inline: 24px; }
  .held__orte { font-size: 11px; }
  .held h1 { font-size: 11.5vw; line-height: .98; }
  .held__unter { font-size: 13px; }
  .held__knoepfe { gap: 10px; }
  .knopf--gross { height: 45px; padding: 0 15px; font-size: 16px; }

  /* Karte am Handy: bude 390 (H2 45, Satz 16, „Ganze Karte" darunter); Reiter in EINER Reihe statt 2 × 2,
     Karten wischen mit Fang und Punkten statt Pfeile — die nächste Karte schaut 18 % herein. */
  /* Abstände: Blockabstand 60 wie unten; linker Rand überall 24 (= --rand), vorher Kopf und Karten 30, Reiter und
     Video 24 — die Kante sprang */
  .karte { padding: 60px 0 60px; }
  .karte:has(+ .laden-sek[hidden] + .laeden:not([hidden])) { padding-bottom: 120px; }

  /* Der Laden neu (08.10.): Foto über die Breite, darunter zwei Zahlenkarten nebeneinander, dann die schwarze Karte */
  .einblick { padding: 120px 0 60px; }
  .einblick__kopf h2 { font-size: 45px; }
  .einblick__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 14px; width: auto; margin-top: 32px; padding: 0 24px; }
  .einblick__foto { grid-column: 1 / 3; grid-row: auto; }
  .einblick__foto { aspect-ratio: 4 / 3; }
  .einblick__foto figcaption { left: 16px; bottom: 16px; font-size: 15px; white-space: nowrap; }   /* eine Zeile am Handy */
  .einblick__karte { padding: 18px 18px 22px; }
  .einblick__karte--schwarz { grid-column: 1 / 3; }
  .einblick__zahl { font-size: 64px; gap: 6px; }
  .einblick__zahl { flex-wrap: wrap; row-gap: 8px; }   /* schmale Karten: die Einheit rutscht unter die Zahl */
  .einblick__zahl small { font-size: 16px; }
  .einblick__satz { font-size: 23px; }
  .einblick__karte--schwarz h3 { font-size: 30px; }
  .einblick + .combos { padding-top: 60px; }

  /* Stempelkarte am Handy: Karte über die Breite, kleinere Felder, Schritte darunter */

  .feld { font-size: 18px; }

  /* Standorte neu (08.10.) und gemeinsamer Kopf */
  .sek-kopf { flex-direction: column; align-items: flex-start; gap: 20px; width: auto; padding: 0 24px; }
  .sek-kopf h2 { font-size: 45px; }
  .orte-sek { padding: 60px 0; }
  .orte-sek .sek-kopf { align-items: center; }
  .orte { grid-template-columns: minmax(0, 1fr); gap: 14px; width: auto; margin-top: 32px; padding: 0 24px; }
  .ort__bild { height: 220px; }
  .ort h3 { font-size: 45px; }
  .karte__kopf { flex-direction: column; align-items: flex-start; gap: 20px; width: auto; padding: 0 24px; }
  /* „Ganze Karte" bleibt am Handy links unter dem Satz, über den Reitern (Reihe umgedreht); Pfeile sind am Handy aus */
  .karte__leiste { flex-direction: column-reverse; align-items: stretch; gap: 24px; width: auto; margin-top: 20px; padding: 0 24px; }
  .karte__leiste .karte__ganz { align-self: flex-start; height: 47px; padding: 0 30px; gap: 10px; font-size: 20px; }
  .karte__leiste .karte__ganz svg { width: 20px; height: 20px; }
  .karte h2 { font-size: 45px; line-height: 1.04; }
  /* vier gleich breite Reiter füllen die Reihe — als Wischreihe wurde „Getränke" am Rand angeschnitten */
  .reiter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: auto; margin-top: 24px; padding: 0 24px; }
  .karte__leiste .reiter { margin: 0; padding: 0; }
  .reiter button { min-width: 0; height: 44px; padding: 0 4px; font-size: 15px; }   /* Tippfläche 44 (Audit) */
  .gerichte {
    display: flex; gap: 14px; width: auto; margin-top: 10px; padding: 14px 24px 6px;   /* oben 14 Luft für die Marke auf der Kante */
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .gerichte::-webkit-scrollbar { display: none; }
  .gericht { flex: 0 0 82%; scroll-snap-align: start; }
  .pfeile { display: none; }   /* Handy: wischen mit Punkten statt Pfeile (bude blendete sie am Handy ebenfalls aus) */
  .gericht__bild { height: 240px; }
  .karte .gericht__bild, .ganz .gericht__bild { height: 276px; }   /* + Zeile für die Pille, Burger bleiben 220 hoch */
  .gericht h3 { font-size: 28px; }
  .punkte:not(:empty) { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
  .punkte span { width: 8px; height: 8px; border-radius: 50%; background: rgba(13, 13, 13, .2); transition: background-color 200ms ease, transform 200ms var(--kurve-aus); }
  .punkte span[data-an] { background: var(--schwarz); transform: scale(1.25); }

  /* Trüffel-Streifen am Handy: Bild oben (Burger mittig, Dip davor, Pommes rechts angeschnitten), darunter das Textfeld */
  /* „So wird gesmasht" am Handy: Bild oben über die Breite, Text darunter mittig; 60 + 60 von den Karten, 120 zum Streifen */

  .neuheit { height: auto; }
  .neuheit__folie { display: flex; flex-direction: column; padding: 0 24px 64px; }   /* unten Platz für die Balken */
  .neuheit__punkte { left: 16px; bottom: 10px; }
  .neuheit__foto { position: relative; inset: auto; order: -1; height: auto; aspect-ratio: 4 / 3; margin: 0 -24px; width: auto; }
  .neuheit__foto img { object-position: 50% 50%; }
  .neuheit__bild { position: relative; inset: auto; order: -1; height: 290px; margin: 0 -24px; }
  .neuheit__burger { left: calc(50% - 150px); top: 34px; width: 250px; }
  .neuheit__dip { left: calc(50% + 10px); top: 160px; width: 112px; }   /* unten 286, über dem Textfeld */
  .neuheit__pommes { left: calc(50% + 60px); top: 92px; width: 240px; }
  .neuheit__feld { position: relative; top: auto; left: auto; width: auto; padding: 28px 24px; transform: none; }
  .neuheit__folie:not([data-ohne-foto]) .neuheit__feld { margin-top: -24px; }   /* das Feld greift etwas ins Foto */
  .neuheit h2 { font-size: 40px; }
  .neuheit__feld p { font-size: 16px; line-height: 24px; }
  .neuheit__feld .knopf { margin-top: 22px; }

  /* Combos am Handy: Karten zum Wischen mit Punkten — die Regeln der Gerichte gelten; Kopf und Blockabstand wie gehabt */
  .combos { padding: 120px 0 60px; }
  .combos__kopf { width: auto; padding: 0 24px; }
  .combos__kopf h2 { font-size: 45px; }
  .combos__kopf .karte__ganz { height: 47px; padding: 0 30px; gap: 10px; font-size: 20px; }   /* am Handy wie in der Karte */
  .combos__kopf .karte__ganz svg { width: 20px; height: 20px; }
  .gerichte--combos { margin-top: 18px; }   /* + 14 Innenabstand oben = 32 unter dem Kopf */
  .combos .gericht__bild { height: 276px; }   /* wie in der Karte: Zeile für die Pille, Bild 220 hoch */

  /* App am Handy (Original 390: Handy oben mittig, darunter der Text; Knöpfe untereinander, Kennzahlen untereinander) */
  .vorbestellen { padding: 60px 0; }
  .vorbestellen__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; width: auto; padding: 0 24px; }
  .vorbestellen__buehne::before { width: min(340px, 86vw); }

  .vorbestellen__text { width: 100%; }
  .vorbestellen__text h2 { font-size: 45px; }
  .app-reihe { flex-direction: column; margin-top: 30px; }
  .app-knopf { width: 100%; max-width: 330px; }
  .gutschein { width: 100%; max-width: 330px; margin-top: 14px; }
  .gutschein { height: auto; min-height: 71px; }
  .gutschein__text { white-space: nowrap; }
  .gutschein__text small { font-size: 12px; line-height: 17px; }
  .gutschein__text b { font-size: 14px; line-height: 20px; }
  .gutschein__text b span { letter-spacing: 0; }   /* schmal: Text bleibt in zwei Zeilen */
  .gutschein__tun { padding: 10px 13px; font-size: 15px; }
  .kennzahlen { flex-direction: column; gap: 20px; margin-top: 30px; }

  /* Über uns + Bewertungen am Handy: eine Spalte — Über uns (Titel, Foto, Text), dann Bewertungen (Titel + Wertung,
     Laufband, Schlusssatz); Foto und Karten gleich hoch (240) */
  .ueber { --stimmen-hoehe: 240px; padding: 60px 0; }
  .ueber__raster { row-gap: 30px; width: auto; padding: 0 24px; }
  .ueber__kopf { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ueber__kopf .ueber__titel { white-space: normal; }
  .ueber__titel { font-size: 45px; }
  .wertung { padding: 0; }
  .wertung > strong { font-size: 72px; }
  .wertung__sterne svg { width: 22px; height: 22px; }
  .wertung p { font-size: 14px; }
  .stimme { width: 260px; padding: 20px; }

  /* Fuß am Handy (bude 390: eine Spalte, Links zweispaltig, Bestellen und Newsletter über die Breite, Karte 320) */
  .fuss { --kante: 14px; padding: calc(60px + var(--kante)) 0 60px; }
  .fuss::before { background-size: 520px 100%; }
  .fuss__raster { grid-template-columns: minmax(0, 1fr); row-gap: 48px; width: auto; padding: 0 24px; }
  .fuss__links { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 48px; }
  .fuss__app, .newsletter { grid-column: 1 / -1; }
  .fuss__links > div > a:not(.fuss__knopf), .fuss__links > div > button { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }   /* Tippfläche 44 (Audit) */
  .folgen a, .folgen button { width: 44px; height: 44px; }
  .einblick__kopf .karte__ganz { height: 47px; padding: 0 30px; gap: 10px; font-size: 20px; }   /* wie die anderen Kopf-Knöpfe am Handy */
  .newsletter div { max-width: none; }
  .fuss__hallo { min-height: 0; }

  /* Standorte am Handy (smash-werk): kein Vorhang, die zwei Fotos nebeneinander oben, darunter Titel und Läden */

  .laden h3 { font-size: 30px; }

  /* Ganze Karte am Handy: untereinander statt wischen — hier will man alles sehen */
  .ganz { padding-top: calc(var(--ansage) + var(--leiste) + 36px); }
  .ganz h1 { font-size: 45px; }
  .ganz__kopf, .ganz__gruppe > h2, .ganz__gruppe > .burgerart, .ganz__sorte, .ganz__zurueck { width: auto; padding: 0 24px; }
  .ganz__sprung { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
  .ganz__sprung a { flex: none; min-width: 0; padding: 0 18px; }
  .ganz__gruppe { padding-top: 50px; }
  .ganz__gruppe > h2 { font-size: 36px; }
  .gerichte--ganz { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 24px; overflow: visible; scroll-snap-type: none; }
  .gerichte--ganz .gericht { flex: none; }
}

/* polish 09.10. — Handy. Laden: zwei Spalten à 163 px ließen „und“ allein in einer Zeile stehen (rund 15 Zeichen je Zeile);
   unter 520 stehen die beiden grünen Karten untereinander, Zahl und Satz wieder größer, die Einheit neben der Zahl.
   Hero: das Foto wird über die Höhe eingepasst, die Burger liegen bei 55–80 % der Höhe — bei 390 × 844 begannen sie an der
   Unterkante der Knöpfe, bei 375 × 667 lagen die Knöpfe mitten auf ihnen. Das Foto rückt so weit nach unten, wie die Knöpfe
   brauchen (ihre Unterkante ≈ 356 px + 45,45 vw, gemessen bei 375/390/430), höchstens 18 % der Höhe, damit die Burger unten
   nicht anstoßen. Die oberen Bildzeilen sind fast schwarz (Helligkeit 7/255), die Kante oben verschwindet im Grund.
   Kleine Handys bekommen dafür mindestens 760 Höhe. */
@media (max-width: 599px) {
  .held { --held-h: max(100svh, 760px); min-height: calc(var(--held-h) + 14px); }   /* + krosse Kante (13.10.) */
  .held__bild img { transform: translateY(clamp(0px, 376px + 45.45vw - .55 * var(--held-h), .18 * var(--held-h))); }
}
@media (max-width: 520px) {
  .einblick__karte { grid-column: 1 / 3; }
  .einblick__zahl { flex-wrap: nowrap; font-size: 76px; }
  .einblick__satz { font-size: 34px; }
}
/* polish 09.10. — seitlicher Überlauf (body schnitt ihn ab, auf dem iPhone ließ er sich trotzdem wischen):
   810: der grüne Kreis hinter dem Handy (490) ragte 51 px über den Rand → die Sektion schneidet seitlich ab, wie der Rand es tat.
   320: „Stimmen aus allen drei Werken“ durfte nicht umbrechen und drückte die Bewertungen auf 324 px; der Gutschein war mit
   Zeichen, Text und Knopf 337 breit → unter 380 bricht die Zeile, unter 360 entfällt das %-Zeichen und der Text darf umbrechen. */
.vorbestellen { overflow-x: clip; }
@media (max-width: 380px) {
  .wertung p { white-space: normal; }
}
@media (max-width: 360px) {
  .gutschein__rund { display: none; }
  .gutschein__text { white-space: normal; }
}

/* polish 09.10. — Zwischenbreiten (gemessen mit _bau/zwischenbreiten.js): die Rechner-Anordnung war nur bei 1440 geprüft.
   „100 % Rind“ lief bis 1366 aus seiner Karte (+130 bei 810), „Die Werk-Sauce.“ ebenso, „FLENSBURG“ bei 810–1024 über den
   Kartenrand, die Pillen brachen bei 810 um, im Trüffel-Band lag das Feld bei 810/900 auf den Balken.
   Zahl, Satz und Stadt richten sich jetzt nach ihrer Karte (Containerbreite), gerechnet aus den gemessenen Textbreiten:
   „100“ ≈ 1,417 × Schrift + 76 („% Rind“ und Abstand) → Schrift ≤ 70 cqi − 54 px; „WERK-SAUCE.“ ≈ 5,26 × Schrift → 18,5 cqi;
   „FLENSBURG“ ≈ 4,35 × Schrift, 16 Rand → 22,5 cqi − 4 px. Bei 1440 bleibt alles bei den alten Größen (108 / 46 / 58). */
@media (min-width: 810px) {
  .einblick__karte, .ort { container-type: inline-size; }
  .einblick__zahl { font-size: min(108px, 70cqi - 56px); }
  .einblick__satz { font-size: min(46px, 18.5cqi); }
  .ort h3 { font-size: min(58px, 22.5cqi - 4px); }
}
.einblick__marke { white-space: nowrap; }
@media (min-width: 810px) and (max-width: 1199px) {
  /* Laden wie am Handy: Foto über die volle Breite, die zwei grünen Karten nebeneinander, die schwarze darunter */
  .einblick__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .einblick__foto { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 9; }
  .einblick__karte--schwarz { grid-column: 1 / 3; }
  /* Trüffel-Band: Feld breiter, Überschrift kleiner — es bleibt niedriger als das Band über den Balken */
  .neuheit__feld { width: min(560px, 60%); }
  .neuheit h2 { font-size: 46px; }
  .neuheit__feld p { font-size: 17px; line-height: 26px; }
}

/* Standorte 810–1199 (polish 09.10.): drei Spalten à 214–285 ließen Pille, Adresse und Zeiten umbrechen und die Knöpfe
   untereinander stehen. Hier liegen die Karten: Stadtkarte links, Angaben rechts in der Höhe mittig, die Werke untereinander. */
@media (min-width: 810px) and (max-width: 1199px) {
  .orte { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 16px; padding: 12px 12px 12px; }
  .ort__bild { grid-column: 1; grid-row: 1 / -1; height: auto; min-height: 280px; }
  .ort__bild > img { position: absolute; inset: 0; }   /* das unsichtbare Ersatzfoto gab mit seinem Seitenverhältnis die Höhe vor (Karte 590 hoch bei 1024) */
  .ort__status { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0; }
  .ort h3 { grid-column: 2; grid-row: 3; }
  .ort p { grid-column: 2; grid-row: 4; }
  .ort__fuss { grid-column: 2; grid-row: 5; }
}

/* Tippflächen am Handy (09.10.): „In den Korb", Mengenwahl, „Hier abholen"/„Route" und der Knopf der schwarzen Laden-Karte
   waren 42 hoch (Audit 08.10. hatte nur Menü, Reiter, Fußlinks und Pfeile auf 44 gebracht). */
@media (max-width: 809px) {
  .knopf--korb, .ort__fuss .knopf, .einblick__knopf { height: 44px; }
  .menge { height: 44px; }
  .menge button { width: 40px; height: 44px; }
}

/* ---------- Kasse + Korbleiste (09.10.) — Ablauf aus smash-werk, Gestalt dieser Seite ----------
   Kritik 06.10.: P0 „Vorbestellen" führte im Kreis (Kopf → App-Block → Karte), P2 am Handy kein Korb. Schublade Creme,
   Posten und Werke als weiße Karten mit schwarzem Rand (Rundung 20), Pillen Schwarz/Limette, Zahlen Phudu. */
html:has(.kasse[open]) { overflow: hidden; }
.kasse {
  width: min(480px, 100%); height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 20px 0 0 20px;
  background: var(--creme); color: var(--schwarz);
}
.kasse[open] { display: flex; flex-direction: column; animation: kasse-rein 340ms var(--kurve-schublade) both; }
.kasse::backdrop { background: rgba(13, 13, 13, .55); }
@keyframes kasse-rein { from { transform: translateX(100%); } }
.kasse [hidden] { display: none; }
.kasse__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 28px 18px; }
.kasse__stand { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 50px; background: var(--schwarz); color: var(--limette); font: 500 16px/18px var(--kopf-schrift); }
.kasse__titel { margin: 14px 0 0; font: 900 46px/1 var(--kopf-schrift); letter-spacing: -.01em; }
.kasse__zu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--schwarz); color: var(--limette); cursor: pointer; transition: transform 160ms var(--kurve-aus); }
.kasse__zu:active { transform: scale(.94); }
.kasse__zu svg { width: 18px; height: 18px; }
.kasse__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kasse__schritt { flex: 1; overflow: auto; padding: 6px 28px 24px; }
.kasse__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kasse__liste li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.kasse__bild { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: var(--limette); }
.kasse__bild img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.kasse__posten b { display: block; font: 600 20px/1.05 var(--kopf-schrift); }
.kasse__posten span { display: block; margin-top: 4px; font: 500 14px/20px var(--text); color: #5E5D58; font-variant-numeric: tabular-nums; }
.kasse__leer { margin: 18px 0; padding: 32px 24px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); text-align: center; }
.kasse__leer p { margin: 0 0 18px; font: 500 16px/24px var(--text); }
.kasse__feld { display: block; min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.kasse__feld > span, .kasse__feld legend { display: block; margin-bottom: 8px; padding: 0; font: 500 16px/18px var(--kopf-schrift); text-transform: uppercase; letter-spacing: .02em; }
.kasse__feld select, .kasse__feld input { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); color: var(--schwarz); font: 500 16px/1 var(--text); }
.kasse__feld input::placeholder { color: #8A887F; }
.kasse__feld input[data-code-feld] { text-transform: uppercase; letter-spacing: .04em; }   /* Code steht immer in Versalien da, egal wie getippt */
.kasse__feld input[data-code-feld]::placeholder { text-transform: none; letter-spacing: 0; }
.laden-wahl { display: grid; gap: 10px; }
.laden-wahl label { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 14px 16px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--schwarz); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.laden-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.laden-wahl b { font: 900 26px/1 var(--kopf-schrift); }
.laden-wahl small { font: 500 12px/1.3 var(--text); color: #5E5D58; text-align: right; }
.laden-wahl span { grid-column: 1 / -1; font: 500 14px/20px var(--text); color: #5E5D58; }
.laden-wahl label:has(input:checked) { background: var(--schwarz); color: var(--creme); box-shadow: none; }
.laden-wahl label:has(input:checked) b { color: var(--limette); }
.laden-wahl label:has(input:checked) :is(small, span) { color: rgba(250, 247, 237, .72); }
.laden-wahl label:has(input:focus-visible) { outline: 3px solid var(--schwarz); outline-offset: 3px; }
.fehler { margin: 14px 0 0; font: 600 15px/1.4 var(--text); }
.fehler:not(:empty) { padding: 10px 14px; border-radius: 12px; background: var(--schwarz); color: var(--limette); }   /* im System der Seite statt Rot */
.kasse__fuss { padding: 18px 28px 28px; border-top: 1.5px solid var(--schwarz); }
.kasse__rabatt, .kasse__summe { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; font: 500 16px/1 var(--kopf-schrift); text-transform: uppercase; }
.kasse__rabatt b { font: 600 22px/1 var(--kopf-schrift); font-variant-numeric: tabular-nums; }
.kasse__summe b { font: 600 36px/1 var(--kopf-schrift); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kasse__knoepfe { display: flex; gap: 10px; }
.kasse__knoepfe .knopf { height: 52px; padding: 0 18px; font-size: 18px; }
.kasse__weiter { flex: 1; min-width: 0; }
.kasse__zurueck { background: transparent; box-shadow: inset 0 0 0 1.5px var(--schwarz); color: var(--schwarz); }
.zettel__nr { padding: 22px; border-radius: 20px; background: var(--schwarz); color: var(--limette); text-align: center; }
.zettel__nr small { display: block; font: 500 16px/18px var(--kopf-schrift); text-transform: uppercase; color: var(--creme); }
.zettel__nr strong { display: block; margin-top: 8px; font: 900 96px/.9 var(--kopf-schrift); letter-spacing: -.02em; }
.zettel p { margin: 18px 0 0; font: 500 16px/24px var(--text); }
.zettel .zettel__hinweis { font-size: 13px; line-height: 20px; color: #5E5D58; }
[data-zettel]:focus { outline: none; }
.leiste { display: none; }
@keyframes leiste-rein { from { opacity: 0; transform: translateY(16px); } }
@media (hover: hover) and (pointer: fine) { .kasse__zurueck:hover { background: var(--schwarz); color: var(--creme); } }
@media (hover: hover) and (pointer: fine) { .laden-wahl label:not(:has(input:checked)):hover { background: #F4F1E4; } }
/* bis 959 ist der Kopf-Knopf mit der Korbzahl weg → Korbleiste unten, sobald etwas im Korb liegt */
@media (max-width: 959px) {
  .leiste:not([hidden]) {
    position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 60px; padding: 0 8px 0 20px; border: 0; border-radius: 12px;
    background: var(--schwarz); color: var(--creme); font: 500 18px/1 var(--kopf-schrift); text-transform: uppercase; cursor: pointer;
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .6); animation: leiste-rein 260ms var(--kurve-aus) both;
    transition: transform 160ms var(--kurve-aus);
  }
  .leiste:active { transform: scale(.98); }
  .leiste b { color: var(--limette); font-variant-numeric: tabular-nums; }
  .leiste__weiter { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; background: var(--limette); color: var(--schwarz); }
  .leiste__weiter svg { width: 16px; height: 16px; }
  body[data-mit-leiste] { padding-bottom: 92px; }   /* Fuß bleibt ganz sichtbar */
  body[data-mit-leiste] .meldung { bottom: 92px; }
}
/* Handy: Blatt von unten statt Schublade */
@media (max-width: 599px) {
  .kasse { width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .kasse[open] { animation-name: kasse-hoch; }
  @keyframes kasse-hoch { from { transform: translateY(100%); } }
  .kasse__kopf, .kasse__schritt, .kasse__fuss { padding-left: 20px; padding-right: 20px; }
  .kasse__kopf { padding-top: 22px; }
  .kasse__titel { font-size: 38px; }
  .kasse__fuss { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .zettel__nr strong { font-size: 80px; }
  .kasse__zurueck { width: 52px; padding: 0; }   /* am Handy nur der Pfeil (Name bleibt per aria-label) — „Verbindlich vorbestellen“ passte bei 390 nicht daneben */
  .kasse__zurueck span { display: none; }
}
@media (max-width: 380px) {
  .kasse__knoepfe .kasse__weiter { padding: 0 14px; font-size: 16px; }
  /* schmal: Status unter die Adresse (bei 320 lief „HAMBURG“ in „Jetzt geöffnet · bis 24 Uhr“) */
  .laden-wahl label { grid-template-columns: minmax(0, 1fr); }
  .laden-wahl span { order: 1; }
  .laden-wahl small { order: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .kasse[open], .leiste:not([hidden]) { animation: none; }
  .neuheit__folie, .neuheit__folie[data-an], .neuheit__foto, .neuheit__bild, .neuheit__folie[data-an] :is(.neuheit__foto, .neuheit__bild) { transition: none; }
  .neuheit[data-gewechselt] .neuheit__folie[data-an] .neuheit__feld > * { animation: none; }

  html { scroll-behavior: auto; }
  .karussell .gerichte { transition: none; }
  .stimmen__band { overflow-x: auto; }
  .stimmen__spur.laeuft { animation: none; }
  .stimmen__pause { display: none; }   /* ohne Laufband nichts anzuhalten */
  .stimme[aria-hidden="true"] { display: none; }
  .knopf, .ansage svg { transition: none; }
  .gerichte[data-neu] > .gericht, .gutschein__tun > span, .handy-menue:not([hidden]) { animation: none; }
}