/* Bestellshop.
   Aufbau nach dem, was Kunden von Lieferando, Wolt und Domino's kennen:
   Kopfband, Restaurantkarte mit Eckdaten, Modusumschalter, klebende
   Kategorienleiste mit Mitlauf, Kartenraster, Warenkorb rechts
   (schmal: Leiste unten). Wer schon einmal woanders bestellt hat, muss
   hier nichts Neues lernen.

   Hell statt dunkel. Und ohne Produktfotos gebaut: es gibt noch keine.
   Ein Entwurf, der auf Bildern steht, sieht ohne sie kaputt aus — dieser
   nutzt sie, wenn sie da sind, und kommt ohne sie aus.

   Diese Datei wird NACH basis.css geladen und überschreibt deren
   Farben. Die Küche bleibt unberührt dunkel. */

/* Farben und Maße stehen in hell.css — von index.html vor dieser
   Datei geladen und mit den Rechtstextseiten geteilt. */


/* Knöpfe und Felder kommen aus basis.css; hier nur, was der helle
   Untergrund anders braucht. Gleiche Stärke wie dort, aber später
   geladen — deshalb muss die Füllung des Hauptknopfs mit. */
.knopf { background: var(--flaeche); box-shadow: var(--schatten); font-weight: 600; }
.knopf:hover:not(:disabled) { border-color: var(--linie-satt); }
.knopf-haupt {
  background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent);
  box-shadow: 0 2px 10px rgba(168,64,44,0.28);
}
.knopf-haupt:hover:not(:disabled) { background: var(--akzent-hell); border-color: var(--akzent-hell); }
.knopf-still { background: var(--flaeche-2); }
.feld { background: var(--flaeche); border-color: var(--linie); }
.feld:hover { border-color: var(--linie-satt); }
.klein, .hinweis { color: var(--leise); }
.hinweiskasten { background: var(--warnung-weich); border-left-color: var(--warnung); color: var(--text); }
.fehlerzeile { color: var(--akzent); }

.mittig { width: min(var(--breite), 100%); margin: 0 auto; padding-inline: var(--rand); }

/* ── Ladeschirm ────────────────────────────────────────────── */
.ladeschirm { min-height: 100dvh; display: grid; place-items: center; gap: 16px; align-content: center; }
.ladeschirm .marke-name { font-size: 2rem; animation: pulsieren 1.4s ease-in-out infinite; }

/* Statt eines leeren Bildschirms die Umrisse dessen, was gleich kommt —
   das lässt kurze Wartezeiten kürzer wirken als ein Spinner. */
.geruest { border-radius: var(--rund); background: var(--flaeche-2); position: relative; overflow: hidden; }
.geruest::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: schimmern 1.3s infinite;
}
.geruest.zeile { height: 92px; margin-bottom: 8px; }
@keyframes schimmern { to { transform: translateX(100%); } }

/* ── Kopfband ──────────────────────────────────────────────── */
.kopfband {
  position: sticky; top: 0; z-index: 20; height: var(--kopfhoehe);
  background: rgba(255,255,255,0.92); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopfband-innen { display: flex; align-items: center; gap: 14px; height: 100%; }
.kopfband .marke-name { font-size: 1.2rem; }
.kopfband .marke-zusatz { font-size: 0.64rem; }
/* Alles rechts im Kopfband in einer Gruppe. Vorher schob der
   Öffnungsstatus die Zeichen mit `margin-left: auto` nach rechts — den
   gibt es nur noch im geschlossenen Fall, und ohne ihn wären sie an die
   Marke gerutscht. */
.kopfwerkzeuge { margin-left: auto; display: flex; align-items: center; }
.kopf-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.84rem; font-weight: 600; color: var(--gut);
}
.suchzeichen {
  width: 40px; height: 40px; flex: none; margin-left: 10px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 50%;
  background: var(--flaeche); color: var(--text);
  transition: border-color var(--takt) ease, color var(--takt) ease;
}
.suchzeichen:hover { border-color: var(--linie-satt); color: var(--akzent); }
.kopf-status.ist-zu { color: var(--akzent); }
.ampel { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.kopf-status.ist-offen .ampel { box-shadow: 0 0 0 0 rgba(46,113,69,0.5); animation: puls 2.4s infinite; }
@keyframes puls {
  70% { box-shadow: 0 0 0 7px rgba(46,113,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,113,69,0); }
}

/* ── Kopfband auf dem Telefon ─────────────────────────────────────
   Auf einem 440 Pixel breiten iPhone brauchte diese Zeile 517: Konto
   und Warenkorb standen rechts außerhalb des Bildes, und die Seite ließ
   sich seitwärts schieben. Ein Hamburger-Menü wäre die naheliegende
   Antwort und die falsche — es legt Suche und Korb, die zwei meist
   benutzten Knöpfe, hinter einen zusätzlichen Tipper. Weg fällt
   stattdessen, was es doppelt gibt:

   • Der Ort steht in der Restaurantkarte direkt darunter und im Fuß.
   • Der Warenkorb ist auf dem Telefon die Pille unten rechts. Die gibt
     es genau dann, wenn etwas drin ist — und bei leerem Korb öffnete
     das Zeichen oben ohnehin nur eine leere Liste.

   „Geschlossen" bleibt stehen. Das ist die eine Auskunft hier oben, die
   nach dem Scrollen nirgendwo sonst zu sehen ist. Der Name darf im
   Notfall kürzen, damit die Zeile unter keinen Umständen wieder
   überläuft — bis hinunter zu 320 Pixeln passt er ungekürzt. */
@media (max-width: 47.99rem) {
  .kopfband .marke { min-width: 0; }
  .kopfband .marke-name {
    font-size: 1.1rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kopfband .marke-zusatz { display: none; }
  .kopfband .korbzeichen { display: none; }
  .kopfband .kopf-status { flex: none; font-size: 0.78rem; gap: 5px; }
  .kopfband .suchzeichen,
  .kopfband .kontozeichen { margin-left: 8px; }
}

/* Schmaler als ein iPhone SE (375) geht das Rundlogo. Es ist hier oben
   Schmuck — der Name daneben sagt dasselbe und lässt sich lesen. Der
   Kontoknopf bleibt dagegen stehen: er ist der einzige Weg zur
   Anmeldung, im Fuß steht keiner. */
@media (max-width: 23.43rem) {
  .kopfband .logo-rund { display: none; }
}

/* ── Restaurantkopf ────────────────────────────────────────── */
.held { position: relative; }
.held-band {
  height: 138px;
  background:
    radial-gradient(120% 150% at 12% 0%, var(--band-glanz) 0%, transparent 58%),
    radial-gradient(90% 120% at 92% 20%, rgba(138,90,12,0.42) 0%, transparent 60%),
    linear-gradient(120deg, var(--band-1) 0%, var(--band-2) 52%, var(--band-3) 100%);
  position: relative; overflow: hidden;
}
/* Feines Karo — gibt dem Band Textur, ohne dass eine Datei geladen wird. */
.held-band::after {
  content: ''; position: absolute; inset: 0; opacity: 0.16;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.7) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 13px);
}
.held-karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px;
  box-shadow: var(--schatten-2); padding: 18px 20px; margin-top: -54px; position: relative;
  display: flex; flex-direction: column; gap: 12px;
}
.held-kopf { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.held-zeichen {
  width: 58px; height: 58px; border-radius: 50%; flex: none; display: block;
  box-shadow: 0 6px 16px rgba(35,35,35,0.35);
}
.held-titel { flex: 1; min-width: 12rem; }
.held-titel h1 { margin: 0; font-size: clamp(1.35rem, 4vw, 1.75rem); letter-spacing: -0.02em; }
.held-titel p { margin: 3px 0 0; color: var(--leise); font-size: 0.92rem; }
.held-titel a { color: inherit; text-decoration: none; }
.held-titel a:hover { color: var(--akzent); }

.merkmale { display: flex; gap: 8px; flex-wrap: wrap; }
.merkmal {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 11px;
  padding: 7px 12px; font-size: 0.85rem; color: var(--leise);
}
.merkmal b { color: var(--text); font-weight: 700; }
.merkmal.betont { background: var(--gut-weich); border-color: #BFD9C6; }
.merkmal.warn { background: var(--warnung-weich); border-color: #E4CFA2; }

.bandzeile {
  display: flex; align-items: center; gap: 10px;
  background: var(--warnung-weich); border: 1px solid #E4CFA2; border-radius: 12px;
  padding: 11px 14px; font-size: 0.92rem;
}

/* ── Abholen / Liefern ─────────────────────────────────────── */
/* ── Körper ────────────────────────────────────────────────── */
.shopkoerper { display: flex; gap: 26px; align-items: flex-start; }
/* Die 120 Pixel sind Platz für die schwebende Warenkorbleiste — und
   nur dann nötig, wenn etwas im Korb liegt. Ohne die Bedingung stand
   auf der Probefassung eine Handbreit Leere zwischen dem letzten Absatz
   der Karte und den drei Bändern darunter. */
.karte { flex: 1; min-width: 0; padding-bottom: 28px; }
.hat-korb .karte { padding-bottom: 120px; }

.suchzeile { padding: 12px 0 10px; }
/* Im Suchblatt sitzt die Zeile ganz oben — der Abstand darüber kommt
   schon vom Blattkörper. */
.blatt .suchzeile { padding-top: 0; }
.suchhinweis { color: var(--leise); margin: 4px 0 0; }
.suchfeld-huelle { position: relative; display: flex; align-items: center; }
.suchfeld {
  width: 100%; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text);
  border-radius: 13px; padding: 14px 44px 14px 44px; font-size: 1rem;
  box-shadow: var(--schatten); transition: border-color var(--takt) ease;
}
.suchfeld:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.suchfeld::-webkit-search-cancel-button { display: none; }
.lupe { position: absolute; left: 15px; color: var(--leise); pointer-events: none; display: flex; }
.suchweg {
  position: absolute; right: 8px; border: 0; background: var(--flaeche-2); color: var(--leise);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.suchweg:hover { background: var(--flaeche-3); color: var(--text); }

/* Kategorienleiste mit Mitlauf: der Reiter des Abschnitts, in dem man
   gerade steht, ist hervorgehoben und schiebt sich selbst ins Bild.
   Vorher war die Hervorhebung fest auf "nichts" gesetzt. */
.kategorierail {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 12px;
  background: var(--bg); scrollbar-width: none; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0 96%, transparent);
}
.kategorierail::-webkit-scrollbar { display: none; }
.kategorie {
  white-space: nowrap; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--leise); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; flex: none;
  transition: background var(--takt) ease, color var(--takt) ease, border-color var(--takt) ease;
}
.kategorie:hover { border-color: var(--linie-satt); color: var(--text); }
.kategorie.ist-an { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

.kategorieblock { scroll-margin-top: calc(var(--kopfhoehe) + 138px); }
.kartenkopf { position: sticky; top: var(--kopfhoehe); z-index: 12; background: var(--bg); }
.kategorieblock h2 {
  font-size: 1.22rem; margin: 26px 0 4px; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 10px;
}
.kategorieblock h2 .anzahl { color: var(--leise); font-size: 0.82rem; font-weight: 500; }
.kategoriebeschreibung { color: var(--leise); margin: 0 0 12px; font-size: 0.92rem; }

/* ── Artikel ───────────────────────────────────────────────── */
.artikelliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr;
}
.artikel {
  width: 100%; height: 100%; display: flex; align-items: stretch; gap: 14px; text-align: left;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 14px 15px; cursor: pointer; position: relative;
  box-shadow: var(--schatten);
  transition: border-color var(--takt) ease, box-shadow var(--takt) ease, transform var(--takt) ease;
}
.artikel:hover { border-color: var(--linie-satt); box-shadow: var(--schatten-2); transform: translateY(-1px); }
.artikel:active { transform: translateY(0) scale(0.995); }
.artikel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.artikel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.artikel-kopf { display: flex; align-items: baseline; gap: 9px; }
.artikel-kopf .nummer {
  color: var(--akzent); font-variant-numeric: tabular-nums; font-weight: 800;
  font-size: 0.86rem; background: var(--akzent-weich); border-radius: 7px;
  padding: 2px 7px; flex: none;
}
.artikel-kopf .name { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.artikel .beschreibung {
  color: var(--leise); font-size: 0.9rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.artikel .kuerzel { color: var(--leise); font-size: 0.72rem; letter-spacing: 0.1em; margin-top: auto; padding-top: 4px; }
.artikel-preis {
  margin-top: auto; padding-top: 6px; font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.artikel-preis em { font-style: normal; font-weight: 400; font-size: 0.75rem; color: var(--leise); margin-left: 6px; }

.artikel-rand { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex: none; }
.artikel-bild { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; display: block; }
/* Kein Foto? Dann kein graues Rechteck, sondern die Nummer als
   Kachel — das ist ein Gestaltungselement, kein Fehlbild. */
.artikel-kachel {
  width: 96px; height: 96px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--flaeche-2), var(--flaeche-3));
  border: 1px solid var(--linie); color: var(--akzent);
  font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums;
}
.artikel-kachel.ohne-nummer { font-size: 1.6rem; opacity: 0.55; }
.plusknopf {
  position: absolute; right: 10px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--akzent); color: var(--auf-akzent); font-size: 1.25rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(168,64,44,0.4);
  transition: transform var(--takt) ease, background var(--takt) ease;
}
.plusknopf:hover { background: var(--akzent-hell); transform: scale(1.08); }
.plusknopf:active { transform: scale(0.94); }
.artikel.hat-bild .plusknopf { right: 14px; bottom: 14px; }

.leerhinweis { color: var(--leise); padding: 44px 10px; text-align: center; }
.leerhinweis b { color: var(--text); }

/* ── Blatt (Dialoge) ───────────────────────────────────────── */
.blatt { background: var(--flaeche); border-color: var(--linie); box-shadow: var(--schatten-3); }
.blatt-kopf { padding: 20px 20px 12px; border-bottom: 1px solid var(--linie); }
.blatt-kopf h2 { font-size: 1.28rem; letter-spacing: -0.02em; }
.blatt-kopf .artikelnummer {
  color: var(--akzent); font-weight: 800; font-size: 0.76rem;
  background: var(--akzent-weich); border-radius: 6px; padding: 2px 7px;
}
.blatt-kopf .beschreibung { color: var(--leise); font-size: 0.93rem; margin: 6px 0 0; }
.blatt-koerper { padding: 16px 20px 18px; gap: 22px; }
.blatt-fuss { padding: 14px 20px 18px; background: var(--flaeche); gap: 12px; }
.schliessen {
  background: var(--flaeche-2); border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; font-size: 1.3rem; flex: none;
}
.schliessen:hover { background: var(--flaeche-3); color: var(--text); }
.blattbild { width: 100%; height: 190px; object-fit: cover; display: block; }

/* ── Optionsgruppen ────────────────────────────────────────── */
/* Die Gruppe setzt ihre Abstände selbst — die Ränder, die der Browser
   Überschriften und Absätzen mitgibt, kommen hier oben drauf und
   verdoppeln den Abstand. Zwischen „Trinkgeld für das Team" und dem
   Satz darunter standen so vierzig Pixel Luft. */
.gruppe { display: flex; flex-direction: column; gap: 10px; }
.gruppe > h3, .gruppe > h4, .gruppe > p { margin: 0; }
/* Überschrift mit Sinnbild davor. */
.gruppe > h3.mit-zeichen { display: flex; align-items: center; gap: 8px; }
.gruppe > h3.mit-zeichen .sinnbild { color: var(--akzent); flex: none; }
.gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gruppe-kopf h3 { margin: 0; font-size: 1.02rem; }
.gruppe-regel {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--leise); background: var(--flaeche-2); border-radius: 6px; padding: 3px 8px;
}
.gruppe-hinweis { color: var(--leise); font-size: 0.84rem; margin: 0; }
.eintraege { display: flex; flex-direction: column; gap: 7px; }
.eintrag {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  padding: 13px 14px; cursor: pointer; font-size: 0.98rem;
  transition: border-color var(--takt) ease, background var(--takt) ease;
}
.eintrag:hover:not(:disabled) { border-color: var(--linie-satt); }
.eintrag.ist-an { border-color: var(--akzent); background: var(--akzent-weich); }
.eintrag:disabled { opacity: 0.42; cursor: default; }
.haken {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--linie-satt);
  display: grid; place-items: center; font-size: 0.8rem; flex: none; color: transparent;
  transition: background var(--takt) ease, border-color var(--takt) ease;
}
.haken.rund { border-radius: 50%; }
.eintrag.ist-an .haken { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.eintrag-name { flex: 1; }
.aufpreis { color: var(--leise); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.aufpreis.frei { color: var(--gut); }
.allergenzeile {
  color: var(--leise); font-size: 0.84rem; margin: 0; background: var(--flaeche-2);
  border-radius: 11px; padding: 11px 13px;
}

/* ── Warenkorb ─────────────────────────────────────────────── */
.warenkorb { display: flex; flex-direction: column; gap: 15px; }
.warenkorb-leer { color: var(--leise); text-align: center; padding: 40px 18px; }
.warenkorb-leer .zeichen { display: block; margin-bottom: 10px; opacity: 0.45; }
.warenkorb-leer p { margin: 0 0 6px; }

.korbliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.korbzeile {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linie);
  animation: hereinkommen 240ms ease both;
}
.korbzeile:last-child { border-bottom: 0; padding-bottom: 0; }
.korbname { font-weight: 600; line-height: 1.3; }
.korbname .menge { color: var(--akzent); font-weight: 800; margin-right: 5px; font-variant-numeric: tabular-nums; }
.korbpreis { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
/* Alles Übrige kommt aus `.positionsoptionen` weiter unten — der Korb
   zeigt dieselbe Aufzählung wie Kasse, Verfolgung und Backend. Hier
   steht nur, wo sie sitzt: über die ganze Breite, denn die Korbzeile
   ist ein zweispaltiges Raster aus Name und Preis. */
.korboptionen { grid-column: 1 / -1; }
/* Muss über die ganze Breite: die Korbzeile ist ein zweispaltiges
   Raster aus Name und Preis. Kleiner und leiser als ein Formularfeld —
   sie steht in einer Liste und soll sie nicht dominieren. */
.korbanmerkung {
  grid-column: 1 / -1; font-size: 0.86rem; padding: 7px 10px; border-radius: 8px;
}
/* Die Anmerkung in den reinen Leselisten (Kasse, Verfolgung). Kursiv
   und in Anführungszeichen, damit sie sich nicht wie eine berechnete
   Zutat liest — sie ist Kundentext. */
.positionsanmerkung { display: block; font-size: 0.84rem; color: var(--leise); font-style: italic; }
/* Die geänderten Zutaten — im Korb wie in den Leselisten. Aufrecht
   statt kursiv: das ist keine Kundenprosa, sondern gewählte Zutat.
   Bewusst normaler Textfluss und kein `flex`: die Aufzählung trennt
   Kommas und soll umbrechen wie ein Satz. Mit `flex` hing an jedem
   Komma noch ein Abstand von acht Pixeln, und die Zeile fiel wieder
   auseinander. `block` auf einem `<span>`, weil ein `<div>` innerhalb
   des Namensfeldes kein gültiges HTML wäre. */
.positionsoptionen {
  display: block; font-size: 0.84rem; color: var(--leise); line-height: 1.4;
}
.positionsoptionen .ohne { color: var(--warnung); }
.korbzeile-fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.mengenwahl {
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 2px;
}
.mengenwahl button { background: none; border: 0; color: var(--text); }
.mengenwahl button:hover { color: var(--akzent); }
.mengenwahl.klein button { width: 32px; height: 32px; }

.korbsummen { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--linie); }
.korbsumme-zeile { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.korbsumme-zeile.leise { color: var(--leise); font-size: 0.9rem; }
.korbsumme-zeile.rabatt { color: var(--gut); }
.korbsumme-zeile.gesamt {
  font-weight: 800; font-size: 1.16rem; padding-top: 9px; margin-top: 3px;
  border-top: 1px solid var(--linie);
}

.gutscheinfeld { display: flex; flex-direction: column; gap: 7px; }
.gutscheinzeile { display: flex; gap: 8px; }
.gutscheinzeile .feld { text-transform: uppercase; letter-spacing: 0.05em; }
.gutschein-gut {
  margin: 0; color: var(--gut); font-size: 0.88rem; background: var(--gut-weich);
  border-radius: 9px; padding: 8px 11px;
}

/* ── Stempelkarte ─────────────────────────────────────────────────────────────── */
/* Die Sterne in einer Reihe statt „7 von 10": eine Zahl muss man lesen,
   eine Reihe sieht man. Dasselbe Argument wie beim Balken für den
   Mindestbestellwert ein paar Zeilen weiter unten. */
.stempelkarte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--linie); background: var(--flaeche-2);
}
/* Die volle Karte trägt den Goldrand aus .metall — deshalb hier weder
   Rahmen noch Fläche: beides malt ::after, sonst läge der 1-px-Rand
   über dem fließenden Verlauf. Vorbild: .kategorie.ist-an weiter oben. */
.stempelkarte.ist-voll { border-color: transparent; background: transparent; }
.stempelkarte.ist-werbung { background: none; border-style: dashed; }
.stempelkarte .klein { margin: 0; }

.stempelreihe { display: flex; flex-wrap: wrap; gap: 5px; }
.stempel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--linie-satt, var(--linie));
  color: var(--linie-satt, var(--leise)); background: var(--flaeche);
  transition: background var(--takt) ease, color var(--takt) ease, border-color var(--takt) ease;
}
.stempel.ist-da {
  background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent, #fff);
}
.stempelkarte.ist-voll .stempel.ist-da {
  background: var(--gold); border-color: var(--gold-tief); color: var(--auf-gold);
}
.stempelkarte.ist-voll .ist-abgezogen { color: var(--gold-tief); }

.trinkgeldstufen { display: flex; gap: 6px; }
.stufe {
  flex: 1; border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise);
  border-radius: 10px; padding: 10px 4px; cursor: pointer; font-size: 0.9rem; font-weight: 600;
  transition: border-color var(--takt) ease, background var(--takt) ease, color var(--takt) ease;
}
.stufe:hover { border-color: var(--linie-satt); color: var(--text); }
.stufe.ist-an { border-color: var(--akzent); background: var(--akzent); color: var(--auf-akzent); }

.fortschritt { display: flex; flex-direction: column; gap: 6px; }
.fortschritt-balken { height: 6px; border-radius: 999px; background: var(--flaeche-3); overflow: hidden; }
.fortschritt-balken span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; transition: width 320ms ease; }
.fortschritt-text { font-size: 0.86rem; color: var(--leise); }
.fortschritt-text b { color: var(--text); }

/* ── Warenkorbleiste (schmal: Leiste · breit: Pille) ──────────────────────────────── */
.korbleiste {
  position: fixed; left: var(--rand); right: var(--rand); z-index: 22;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: var(--akzent); border: 0; border-radius: 15px; color: var(--auf-akzent);
  padding: 14px 16px; cursor: pointer; font-size: 1rem; font-weight: 700;
  box-shadow: 0 12px 30px rgba(93,32,20,0.34);
  animation: hochschieben 260ms cubic-bezier(0.2,0.8,0.3,1) both;
}
.korbleiste b { margin-left: auto; font-variant-numeric: tabular-nums; }
.korbleiste.hupft { animation: huepfen 640ms ease; }
.korbzahl {
  background: rgba(0,0,0,0.24); border-radius: 9px; padding: 4px 10px;
  font-variant-numeric: tabular-nums; font-weight: 800;
}
.korbleiste .fehlt { margin-left: auto; font-size: 0.86rem; font-weight: 600; opacity: 0.92; }

/* ── Kasse ─────────────────────────────────────────────────── */
.kassenblatt { width: min(40rem, 100%); }
.zweispaltig { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
/* Die Wunschzeit im Lieferart-Blatt ist ein Auswahlfeld. Hier stand
   einmal ein Raster aus Knöpfen — bei einer Viertelstunde Takt und zehn
   Stunden Öffnung sind das vierzig Kacheln, und die Nebensache „wann"
   nahm mehr Platz ein als alles andere zusammen. */
select.feld {
  appearance: none; cursor: pointer; font-weight: 600;
  /* Der Pfeil als Verlauf: eine eingebettete Grafik statt einer Datei —
     die eigene Zeichnung des Browsers lässt sich nicht einfärben. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
/* ── Zahlarten ─────────────────────────────────────────────────
   Untereinander und nicht mehr nebeneinander: die Onlinezahlarten
   tragen jetzt die Farben ihrer Anbieter, und zwei bunte Pillen
   nebeneinander in halber Breite sehen aus wie eine Werbeleiste. In
   einer Spalte liest sich die Reihe wie PayPals eigener Knopfstapel.

   Die Farben stehen als feste Werte da und nicht als Farbnamen aus der
   Tafel: das Gelb von PayPal ist das Gelb von PayPal, es darf sich mit
   einer Designänderung des Ladens nicht mitverschieben. */
.zahlarten { display: grid; gap: 8px; grid-template-columns: 1fr; }
.zahlart {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--text); border-radius: 24px; padding: 11px 44px;
  cursor: pointer; font-weight: 700;
}
.zahlart:hover { border-color: var(--linie-satt); }
.zahlart .sinnbild { flex: none; color: currentColor; }
/* Der Haken sitzt rechts im Knopf, das Polster oben hält ihm den Platz
   frei — sonst rückte die Beschriftung beim Anklicken zur Seite. */
.zahlart .sinnbild:last-child { position: absolute; right: 15px; }

/* Die Auswahl kann nicht mehr die Fläche einfärben: auf Gelb und
   Schwarz gibt es keine hellere Tönung. Also ein Ring AUSSEN, mit einem
   schmalen Streifen Blattfarbe dazwischen, damit er nicht am Knopf
   klebt. */
.zahlart.ist-an { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--akzent); }
.zahlart:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 4px; }

.zahlart-paypal    { background: #FFC439; border-color: #FFC439; color: #003087; }
.zahlart-paypal:hover    { background: #F0B72F; border-color: #F0B72F; }
.zahlart-karte     { background: #2C2E2F; border-color: #2C2E2F; color: #FFFFFF; }
.zahlart-karte:hover     { background: #1B1D1E; border-color: #1B1D1E; }
.zahlart-applepay  { background: #000000; border-color: #000000; color: #FFFFFF; }
.zahlart-applepay:hover  { background: #1B1D1E; border-color: #1B1D1E; }
.zahlart-googlepay { background: #FFFFFF; border-color: #DADCE0; color: #3C4043; }
.zahlart-googlepay:hover { border-color: #B9BDC1; }

/* ── PayPals Kartenfelder, aufgeklappt in der Kasse ─────────────
   Drei Kästen, in die PayPal je ein iframe hängt. Fläche, Rahmen und
   Polster kommen von hier — die Stilangaben, die PayPal selbst
   entgegennimmt, reichen nur für die Schrift.

   Die Höhe steht fest, und das iframe wird mit `!important`
   hineingezwungen: PayPal setzt seine Maße INLINE, dagegen verliert
   eine gewöhnliche Regel. Ohne diese beiden Zeilen wächst das Feld aus
   dem Kasten heraus. */
.kartenfelder { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; }
.kartenfeldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kartenfeld {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  height: 50px; padding: 0 15px; display: flex; align-items: center;
  /* Der Riegel gegen alles, was PayPal an Maßen mitbringt: was nicht in
     den Kasten passt, wird abgeschnitten statt die Zeile zu sprengen. */
  overflow: hidden;
}
.kartenfeld iframe { width: 100% !important; height: 100% !important; border: 0; }
.kartenhinweis { margin: 0; font-size: 0.84rem; }
.bestelluebersicht { background: var(--flaeche-2); border-radius: 14px; padding: 15px; }
.uebersichtsliste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uebersichtsliste li { display: flex; justify-content: space-between; gap: 12px; }
.uebersichtsliste li.leise { color: var(--leise); font-size: 0.9rem; }
/* Der Betrag rechts gibt keinen Millimeter her, die Bezeichnung links
   umso mehr. Ohne das teilten sich beide das Schrumpfen, und sobald
   unter dem Namen die geänderten Zutaten stehen, brach „28,00 €" in
   zwei Zeilen — mit dem Eurozeichen allein in der zweiten. */
.uebersichtsliste li > :first-child { min-width: 0; }
.uebersichtsliste li > :last-child { flex: none; }
.rechtshinweis { color: var(--leise); font-size: 0.86rem; margin: 0; line-height: 1.5; }
.rechtshinweis a { color: var(--akzent); }
.adressblock { color: var(--leise); font-size: 0.94rem; margin: 0; background: var(--flaeche-2); border-radius: 11px; padding: 11px 13px; }

/* ── Verfolgung ────────────────────────────────────────────── */
.verfolgung { padding-bottom: 60px; }
.verfolgungskarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px;
  box-shadow: var(--schatten-2); padding: 26px 22px; margin-top: -54px; position: relative;
  text-align: center; display: flex; flex-direction: column; gap: 6px;
}
.grossenummer {
  font-size: 3rem; font-weight: 800; line-height: 1; color: var(--akzent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.statuszeile { font-size: 1.15rem; margin: 6px 0 0; font-weight: 700; }

/* Wartet die Bestellung noch auf Geld, tritt dieser Kasten an die Stelle
   der Stationenleiste. Beides gleichzeitig zu zeigen wäre irreführend:
   „Angenommen" leuchtete dann neben „wir warten auf deine Zahlung". */
/* Das Bezahlblatt liegt über allem — auch über der Kasse, die
   dahinter offen bleibt. Die Reihenfolge im Baum sorgt schon dafür;
   diese Zeile ist der Riegel, damit ein späteres Umsortieren das
   Kartenfenster nicht wieder verschwinden lässt. */
.ueberlagerung-bezahlen { z-index: 34; }

/* ── Bezahlblatt: PayPals Kartenknopf ──────────────────────────
   Hier stand einmal ein Kasten für jedes Kartenfeld, weil die Eingabe
   in unserem Blatt lag (`CardFields`). Das setzte eine eigene
   Freischaltung bei PayPal voraus. Jetzt zeichnet PayPal den Knopf
   „Debit- oder Kreditkarte" selbst und öffnet damit sein eigenes
   Formular — zu gestalten gibt es hier nichts mehr, nur Platz zu
   machen. Die Höhe steht schon vor dem Zeichnen, damit das Blatt nicht
   erst zusammenfällt und dann aufspringt. */
.bezahlfeld-knopf { min-height: 52px; margin: 4px 0 8px; }

.bezahlfeld.ist-versteckt { display: none; }

/* ── Die Sekunden nach dem Bestätigen ──────────────────────────────
   Das Blatt bleibt stehen, aber es gibt nichts mehr zu tippen. Alles
   mittig und ruhig: hier soll niemand nach einem Knopf suchen. */
.abwicklung {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 4px 8px; text-align: center;
}
.abwicklung p { margin: 0; }
.abwicklung-kreisel {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--linie); border-top-color: var(--akzent);
  animation: kreiseln 0.9s linear infinite;
}
@keyframes kreiseln { to { transform: rotate(360deg); } }
/* Wer Bewegung abbestellt hat, bekommt keinen sich drehenden Ring —
   der Text sagt ohnehin, was los ist. Der Kreis bleibt als ruhiges
   Zeichen stehen, damit die Stelle nicht leer wirkt. */
@media (prefers-reduced-motion: reduce) {
  .abwicklung-kreisel { animation: none; border-top-color: var(--linie); }
}
.knopf.breit { width: 100%; justify-content: center; margin-top: 8px; }

.zahlung-offen {
  margin: 16px 0 4px; padding: 16px; border-radius: 14px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.zahlung-offen p { margin: 0; color: var(--leise); }
/* Der Ausweg unter dem Bezahlknopf: dieselben Kacheln wie an der Kasse,
   nur kleiner — hier ist es eine Korrektur, keine Auswahl. */
.andere-zahlarten { width: 100%; margin-top: 4px; }
.andere-zahlarten .klein { margin: 0 0 8px; text-align: center; }
/* Eine Spalte wie an der Kasse. Zwei Markenpillen nebeneinander in
   halber Breite kämen mit ihrer Beschriftung nicht aus. */
.andere-zahlarten .zahlart { min-height: 42px; padding: 8px 40px; font-size: 0.88rem; }
.andere-zahlarten .zahlart .sinnbild:last-child { right: 12px; }
.zahlung-offen .knopf { width: 100%; max-width: 18rem; }
/* Der Abbruch steht bewusst leise da: ein Ausweg, keine Einladung.
   Erst der Klick holt die Rückfrage hervor. */
.stornozeile {
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: var(--leise); font-size: 0.86rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.stornozeile:hover { color: var(--akzent); }
.stornofrage { width: 100%; max-width: 18rem; text-align: center; }
.stornofrage .klein { margin: 4px 0 8px; }
.stornoknoepfe { display: flex; gap: 8px; }
/* Beide Knöpfe einzeilig: „Ja, abbrechen" brach auf dem Telefon um und
   machte aus einer Rückfrage einen Klotz. */
.stornoknoepfe .knopf {
  flex: 1; max-width: none; white-space: nowrap;
  padding-left: 10px; padding-right: 10px; font-size: 0.9rem;
}
.knopf.ist-warnend { color: var(--akzent); }

/* Das Bezahlfeld im Blatt. Bei der Karte steht dort PayPals eigener
   Knopf in einem iframe; Apple Pay und Google Pay zeigen gar nichts,
   sie öffnen ein Blatt des Betriebssystems. Deshalb nur eine
   bescheidene Mindesthöhe: das Blatt soll beim Laden nicht in sich
   zusammenfallen und gleich darauf wieder aufspringen — ein leerer
   Kasten von 26rem wäre bei Apple Pay aber nur Leere. */
.bezahlfeld { min-height: 6rem; }
.mittig-text { text-align: center; }
.zusage { color: var(--leise); margin: 0; }
.zusage b { color: var(--text); font-size: 1.05rem; }

.stationen {
  list-style: none; margin: 22px 0; padding: 0;
  display: flex; justify-content: space-between; position: relative; gap: 4px;
}
.stationen::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 11px; height: 2px; background: var(--linie);
}
.stationen li {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--leise); font-size: 0.8rem; text-align: center; position: relative; z-index: 1;
}
.stationen .punkt {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linie);
  background: var(--bg); display: grid; place-items: center; font-size: 0.72rem;
  transition: background var(--takt) ease, border-color var(--takt) ease;
}
.stationen li.erreicht { color: var(--text); font-weight: 600; }
.stationen li.erreicht .punkt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.stationen li.jetzt .punkt { box-shadow: 0 0 0 5px var(--akzent-weich); }

/* Die Frage nach Mitteilungen aufs Telefon. Ein ruhiger Kasten unter den
   Stationen, kein Banner: Er steht dort, wo der Kunde ohnehin wartet,
   und darf die Seite nicht an sich reißen. Zwei gleich große Knöpfe wie
   beim Einwilligungsbanner — siehe Pushfrage.jsx. */
.pushfrage {
  margin: 18px 0 2px; padding: 14px 16px; text-align: left;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 14px;
}
.pushfrage p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.45; color: var(--leise); }
.pushfrage-titel { color: var(--text) !important; font-weight: 700; font-size: 0.95rem !important; }
.pushfrage-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pushfrage-knoepfe .knopf { min-height: 44px; justify-content: center; }
/* Steht dort nur eine Auskunft („Wir sagen dir Bescheid"), braucht es
   keinen Kasten — eine Zeile genügt. */
.pushfrage-hinweis { background: none; border: 0; padding: 6px 0 0; }
.pushfrage-hinweis p { margin: 0; }
.zusammenfassung {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 17px; box-shadow: var(--schatten);
}
.zusammenfassung h3 { margin: 0 0 12px; font-size: 1rem; }
.zusammenfassung ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.zusammenfassung li { display: flex; justify-content: space-between; gap: 10px; }
/* Wie in der Kasse: der Preis bleibt einzeilig, der Name weicht. */
.zusammenfassung li > :first-child { min-width: 0; }
.zusammenfassung li > :last-child { flex: none; }
.verlauf { margin: 16px 0 0; color: var(--leise); }
.verlauf summary { cursor: pointer; }
.verlauf ul { list-style: none; padding: 10px 0 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; }

/* ── Fuß ───────────────────────────────────────────────────── */
.shopfuss { border-top: 1px solid var(--linie); margin-top: 40px; background: var(--flaeche); }
/* `padding-block` und nicht die Kurzform `padding`: Die Kurzform
   überschrieb hier das `padding-inline` von `.mittig`, und dadurch
   klebten Anschrift und Verweise auf dem Telefon am linken Rand und
   liefen rechts aus dem Bild. */
.shopfuss-innen {
  display: flex; flex-direction: column; gap: 18px;
  padding-block: 26px calc(26px + env(safe-area-inset-bottom));
}
.shopfuss-marke { display: flex; align-items: center; gap: 13px; }
.shopfuss-logo { width: 44px; height: 44px; border-radius: 50%; flex: none; }
/* Untereinander statt in einer Zeile: „Dangelo's · Dessauer Straße 57,
   06886 Lutherstadt Wittenberg · 03491 …" passt auf 375 Pixeln in keine
   Zeile und sah umbrochen aus wie ein Versehen. */
.shopfuss .anschrift {
  display: flex; flex-direction: column; gap: 1px; margin: 0;
  color: var(--leise); font-size: 0.86rem; line-height: 1.45;
}
.shopfuss .anschrift b { color: var(--text); font-size: 1rem; letter-spacing: -0.01em; }
.shopfuss .anschrift a { font-size: 0.86rem; }
/* Zwei Spalten: vier Verweise nebeneinander brauchen mehr Platz, als
   ein Telefon hat, und eine Spalte allein wäre eine lange Liste. */
.fussnav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px; justify-items: start;
  padding-top: 16px; border-top: 1px solid var(--linie);
}
.shopfuss a, .fussverweis { color: var(--leise); text-decoration: none; font-size: 0.9rem; }
.shopfuss a:hover, .fussverweis:hover { color: var(--akzent); text-decoration: underline; }
/* „Datenschutz-Einstellungen" ist der längste Eintrag und bekommt
   deshalb die ganze Breite — sonst bricht er als einziger um. */
.fussnav .fussverweis { grid-column: 1 / -1; }
.karte + .shopfuss, .ist-breit .shopfuss-innen { padding-bottom: 24px; }

/* Ab Tablettbreite ist wieder Platz für eine Zeile: Marke links,
   Verweise rechts. */
@media (min-width: 48rem) {
  .shopfuss-innen { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .fussnav {
    display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto;
    padding-top: 0; border-top: 0;
  }
  .fussnav .fussverweis { grid-column: auto; }
}

/* ── Breiter Zweig ─────────────────────────────────────────── */
@media (min-width: 48rem) {
  .artikelliste { grid-template-columns: repeat(2, 1fr); }
  .adressfelder { grid-template-columns: 1fr; }
  .held-band { height: 168px; }
}

@media (min-width: 62rem) {
  :root { --kopfhoehe: 62px; }
  .karte { padding-bottom: 40px; }
}

@media (min-width: 78rem) {
  .artikelliste { grid-template-columns: repeat(2, 1fr); }
}

/* Auf schmalen Geräten hat die Warenkorbleiste unten Vorrang vor allem
   anderen — der Fuß darf nicht darunter verschwinden. */
@media (max-width: 61.99rem) {
  .hat-korb .shopfuss-innen { padding-bottom: 110px; }

  /* ── Einklappen beim Wischen ──────────────────────────────────
     Die Leiste liegt über der Speisekarte und verdeckt beim Stöbern
     genau das, was man sucht. Beim Herunterwischen zieht sie sich
     deshalb zum Kreis unten rechts zusammen; beim Zurückwischen ist
     sie wieder ganz da. Weg ist sie nie — der Warenkorb muss
     erreichbar bleiben.

     Bewegt wird ausschließlich `left`. Die Breite ergibt sich aus
     `left` und `right`, und weil beide Zustände Längen sind, läuft
     der Übergang glatt durch; ein Wechsel auf `left: auto` mit fester
     Breite ließe sich nicht überblenden. Die Höhe steht fest, damit
     nur die Breite wandert. */
  .korbleiste {
    height: 56px; padding: 0 16px;
    transition: left 260ms cubic-bezier(0.2, 0.8, 0.3, 1),
                border-radius 260ms cubic-bezier(0.2, 0.8, 0.3, 1),
                padding 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .korbleiste.ist-klein {
    left: calc(100% - var(--rand) - 56px);
    border-radius: 50%; padding: 0; gap: 0; justify-content: center;
  }
  /* Der Preis und das Wort verschwinden — im Kreis ist kein Platz, und
     die Vorlesehilfe bekommt beides ohnehin über `aria-label`. */
  .korbleiste.ist-klein .korbwort,
  .korbleiste.ist-klein b,
  .korbleiste.ist-klein .fehlt { display: none; }
  /* Die Anzahl rückt als Marke an den Rand des Kreises. Steht der Korb
     unter dem Mindestbestellwert, trägt sie dessen Gold — sonst ginge
     genau die Auskunft verloren, die der Chip vorher gegeben hat. */
  .korbleiste.ist-klein .korbzahl {
    position: absolute; top: -5px; right: -5px;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    display: grid; place-items: center; font-size: 0.76rem; line-height: 1;
    background: var(--dunkel); color: var(--auf-akzent);
    box-shadow: 0 0 0 2px var(--akzent);
  }
  .korbleiste.ist-klein.unter-mindestwert .korbzahl {
    background: var(--gold); color: var(--auf-gold);
  }

  /* Wer Bewegung abbestellt hat, bekommt den Wechsel ohne Fahrt — die
     Leiste springt dann einfach in ihre Form. */
  @media (prefers-reduced-motion: reduce) {
    .korbleiste { transition: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   Nachtrag zum Umbau der Oberfläche.

   Der Entwurf oben stand größtenteils schon; im JSX war er nur nie
   angeschlossen. Was hier folgt, ist das, was beim Anschließen
   wirklich gefehlt hat.
   ═══════════════════════════════════════════════════════════════ */

/* ── Grundgerüst ───────────────────────────────────────────── */
/* Die Wurzel hatte überhaupt keine Regel — der Inhalt lief bis an
   den Bildschirmrand und der Fuß klebte am letzten Artikel. */
.shop { min-height: 100dvh; display: flex; flex-direction: column; }
.shop > .mittig { flex: 1 0 auto; width: min(var(--breite), 100%); }
.shop > .shopfuss { flex: none; }

/* Nur für Vorleseprogramme. */
.nurvorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fokus sichtbar, überall. Vorher hatten genau zwei Elemente einen
   Ring; mit der Tastatur war der Shop praktisch nicht zu bedienen. */
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* ── Artikelkarte ──────────────────────────────────────────── */
/* Die Karte war ein einziger großer Knopf. Darin ließ sich das „+"
   nicht unterbringen: ein Knopf im Knopf ist ungültiges HTML und
   der Browser zerlegt die Verschachtelung beim Einlesen. Jetzt
   spannt der Textknopf eine unsichtbare Fläche über die ganze
   Karte, und das „+" liegt als eigener Knopf darüber. */
.artikel-flaeche {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  color: inherit; font: inherit; cursor: pointer; position: static;
}
.artikel-flaeche::after { content: ''; position: absolute; inset: 0; border-radius: var(--rund); }
.artikel-flaeche:focus-visible { outline: none; }
.artikel-flaeche:focus-visible::after { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Das „+" steht in der Spalte rechts, nicht schwebend über ihr:
   ohne Foto gäbe es sonst nichts, worüber es schweben könnte, und
   es läge auf dem Preis. */
.plusknopf { position: relative; right: auto; bottom: auto; z-index: 2; }
.artikel.hat-bild .plusknopf { right: auto; bottom: auto; }
.artikel-rand { justify-content: flex-start; gap: 9px; }
.artikel-rand .artikel-preis { margin-top: 0; padding-top: 0; text-align: right; }

.kennzeichnungshinweis { padding: 8px 2px 0; }

/* ── Gerüst beim Laden ─────────────────────────────────────── */
.geruest-fleck { display: block; border-radius: 10px; }
.geruest-rail { display: flex; gap: 8px; margin-bottom: 14px; overflow: hidden; }
.held-karte .geruest-fleck { margin-bottom: 10px; }

/* ── Störung, leere Karte, unbekannte Kennung ──────────────── */
.stoerung {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten); padding: 30px 24px; margin: 26px 0;
  text-align: center; max-width: 34rem; margin-inline: auto;
}
.stoerung.ist-klein { padding: 22px; box-shadow: none; background: none; border: 0; }
.stoerung h2 { margin: 0 0 8px; font-size: 1.15rem; }
.stoerung p { margin: 0; color: var(--leise); }
.stoerung-knoepfe {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px;
}
.stoerung-knoepfe .knopf { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* ── Warenkorb ─────────────────────────────────────────────── */
.zeilennummer {
  color: var(--akzent); font-weight: 800; font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.zeileweg {
  margin-left: auto; background: none; border: 0; color: var(--leise);
  cursor: pointer; padding: 8px; border-radius: 9px; display: grid; place-items: center;
}
.zeileweg:hover { color: var(--akzent); background: var(--akzent-weich); }

/* Ein Artikel aus dem Korb von gestern kann inzwischen weg sein. Der
   Server verweigert dann den ganzen Korb — ohne diesen Ausweg käme
   der Kunde aus der Fehlermeldung nicht mehr heraus. */
.korbstoerung {
  background: var(--warnung-weich); border-left: 3px solid var(--warnung);
  border-radius: 0 10px 10px 0; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.korbstoerung p { margin: 0; font-size: 0.92rem; }
.korbstoerung .knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 13px; }
.korbzeile.gestoert { opacity: 0.55; }
.korbzeile.gestoert .korbname { text-decoration: line-through; }

/* ── Bestellleiste ─────────────────────────────────────────── */
.zonenstand:empty { display: none; }

/* ── Blatt ─────────────────────────────────────────────────── */
.blatt-titel { min-width: 0; }
.blatt-titel h2 { margin: 6px 0 0; }
.blatt:focus { outline: none; }
/* Ein gesperrter Eintrag bleibt erreichbar, damit man erfährt, dass
   es ihn gibt — deshalb `aria-disabled` statt `disabled`. */
.eintrag.ist-gesperrt { opacity: 0.45; cursor: not-allowed; }
.eintrag .haken .sinnbild { display: block; }

/* ── Verfolgung ────────────────────────────────────────────── */
.held-band-schmal { height: 92px; }
/* Der Weg zurück ins Konto. Steht oben links, wo man ihn sucht — der
   Knopf „Neue Bestellung" unten ist ein anderer Vorgang. */
.zurueckzeile {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 12px 0; cursor: pointer;
  color: var(--leise); font-size: 0.92rem; font-weight: 600;
}
.zurueckzeile:hover { color: var(--akzent); }

.verfolgungsknoepfe { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0 40px; }
/* Die zwei Karten klebten aneinander — keine hatte einen Außenabstand. */
.verfolgung .zusammenfassung { margin-top: 16px; }
.stationen li.jetzt .punkt { animation: pulsieren 1.6s ease-in-out infinite; }

/* ── Bewegung ──────────────────────────────────────────────── */
/* basis.css setzt Animationen und Übergänge auf null, rührt das
   sanfte Scrollen aber nicht an — und genau davon gibt es hier zwei
   je Kategorieklick. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .kategorierail { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Rückmeldung des Betreibers: Kachel wie LiebeDöner, Warenkorb als
   Pille, Metallrand aus Combe-Solar, Kasse mit Lieferart-Blatt.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kachel: Bild links, Text rechts, „+" unten rechts ─────────── */
.artikel { padding: 0; gap: 0; align-items: stretch; overflow: hidden; }
.artikel-bildflaeche {
  flex: none; width: 118px; min-height: 118px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--flaeche-2), var(--flaeche-3));
  border-right: 1px solid var(--linie);
}
/* Das Foto ist ein Quadrat in fester Größe, gleich groß auf jeder
   Kachel. Was nicht hineinpasst, beschneidet `object-fit: cover` aus
   der Mitte heraus — die Kachel richtet sich nicht mehr nach dem Bild.
   Vorher stand hier `height: 100%`. In einer Kachel, deren Höhe der
   Inhalt bestimmt, heißt das `auto`: ein hochformatiges Foto behielt
   dann sein Seitenverhältnis und zog die ganze Karte in die Länge —
   und mit ihr, weil das Raster die Zeile ausgleicht, die Karte
   daneben ohne Bild. */
.artikel-bildflaeche .artikel-bild {
  width: 118px; height: 118px; min-height: 0; border-radius: 0;
}
.artikel-zeichen { color: var(--linie-satt); display: grid; place-items: center; }
.artikel-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 14px 10px; gap: 6px; }
.artikel-flaeche .name { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.artikel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.artikel-fuss .artikel-preis { margin: 0; padding: 0; color: var(--akzent); }
.artikel-fuss .artikel-preis em { font-style: normal; font-weight: 600; font-size: 0.8rem; color: var(--leise); margin: 0 3px 0 0; }
.artikel-fuss .plusknopf { position: relative; right: auto; bottom: auto; z-index: 2; }
/* Die alte rechte Spalte gibt es nicht mehr. */
.artikel-rand, .artikel-kachel { display: none; }

/* Schmal: Bild oben, zwei Kacheln je Reihe. */
@media (max-width: 47.99rem) {
  .artikelliste { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .artikel { flex-direction: column; }
  /* Schmal liegt das Bild oben und über die volle Kachelbreite. Es
     liegt (4:3), nicht quadratisch: unter dem Bild stehen noch Name,
     Preis und Knopf, und mit einem Quadrat wurde die Kachel dadurch
     193 breit zu 286 hoch — sichtbar in die Länge gezogen. 4:3 nimmt
     der Kachel rund 46 Pixel Höhe, ohne dem Teller so viel Rand zu
     nehmen wie 16:9. Was nicht hineinpasst, beschneidet
     `object-fit: cover` aus der Mitte. */
  .artikel-bildflaeche {
    width: 100%; aspect-ratio: 4 / 3; min-height: 0;
    border-right: 0; border-bottom: 1px solid var(--linie);
  }
  .artikel-bildflaeche .artikel-bild { width: 100%; height: 100%; min-height: 0; }
  .artikel-inhalt { padding: 9px 10px 9px; }
  .artikel-flaeche .name { font-size: 0.92rem; }
  .artikel .beschreibung { font-size: 0.8rem; }
  .artikel-fuss .plusknopf { width: 32px; height: 32px; }
}

/* ── Warenkorb als Pille (breit) ───────────────────────────────── */
@media (min-width: 62rem) {
  .korbleiste {
    left: auto; right: 24px; width: auto; border-radius: 999px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    padding: 12px 20px 12px 14px; gap: 12px;
    box-shadow: 0 14px 34px rgba(93,32,20,0.34);
  }
  .korbleiste b, .korbleiste .fehlt { margin-left: 4px; }
  .hat-korb .shopfuss-innen { padding-bottom: 96px; }
  .ueberlagerung-korb { place-items: end end; padding: 0 24px 24px 0; }
  .blatt-korb {
    width: 25rem; max-height: min(82dvh, 46rem); border-radius: 20px;
    transform-origin: 100% 100%;
    animation: aufblaettern 220ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
}
@keyframes aufblaettern { from { opacity: 0; transform: translateY(14px) scale(0.94); } }

/* Der Fehlbetrag zum Mindestbestellwert. Gelb, damit er auch ohne
   Bewegung etwas sagt; rüttelt beim Erscheinen, leuchtet dreimal. */
.korbleiste .fehlt {
  margin-left: auto; font-size: 0.84rem; font-weight: 700; white-space: nowrap;
  border-radius: 999px; padding: 4px 10px; background: var(--gold); color: var(--auf-gold);
  animation: ruetteln 520ms ease 120ms 1, aufleuchten 2.4s ease 700ms 3;
}
@keyframes ruetteln {
  0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
@keyframes aufleuchten { 50% { box-shadow: 0 0 0 5px rgba(255,255,255,0.4); } }

/* ── Warenkorb-Zeichen im Kopfband ─────────────────────────────── */
.korbzeichen {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--flaeche); color: var(--akzent); cursor: pointer;
  display: grid; place-items: center; flex: none; margin-left: 10px;
}
/* Zwei Klassen, damit es .metall schlägt: das steht weiter unten in der
   Datei und gewänne bei gleicher Spezifität. Sein `overflow: hidden`
   schnitt die Zahl ab, weil die absichtlich über dem Rand des Kreises
   sitzt. Den Kegelverlauf hält ohnehin schon das `border-radius:
   inherit` auf ::before in Form — das Abschneiden war doppelt gemoppelt
   und hier schädlich. */
.korbzeichen.metall { overflow: visible; }
.korbzeichen .zahl {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--akzent); color: var(--auf-akzent);
  font-size: 0.72rem; font-weight: 800; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; z-index: 3;
  /* Der Ring in der Farbe des Kopfbandes trennt die Zahl vom Knopf.
     Ohne ihn liegt Terrakotta auf Terrakotta, sobald etwas im Korb ist
     — die Zahl verschwände genauso, nur langsamer. */
  box-shadow: 0 0 0 2px var(--flaeche);
}
.korbzeichen.hupft { animation: huepfen 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ── Metallrand aus Combe-Solar ─────────────────────────────────── */
/* Ein rotierender Kegelverlauf hinter dem Knopf, davor der Korpus mit
   2 px Rand — so „fließt" die Kante. Der Winkel muss als Eigenschaft
   registriert sein, sonst lässt er sich nicht animieren. Farben auf
   Terrakotta und Creme umgestellt. */
@property --metall-winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.metall { position: relative; isolation: isolate; overflow: hidden; }
.metall::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--metall-winkel),
    var(--metall-hell) 0%, var(--metall-mitte) 9%, var(--metall-tief) 18%, var(--metall-licht) 27%,
    var(--metall-satt) 37%, #FFFFFF 46%, var(--metall-mitte) 57%, var(--metall-nacht) 68%,
    var(--metall-zart) 79%, var(--metall-tief) 89%, var(--metall-hell) 100%);
}
.metall::after {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: var(--flaeche);
}
.kategorie.ist-an.metall::after,
.korbzeichen.hat-inhalt::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%),
              linear-gradient(180deg, var(--knopf-oben) 0%, var(--knopf-unten) 100%);
}
.korbzeichen.hat-inhalt { color: var(--auf-akzent); }
.kategorie.ist-an { border-color: transparent; background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .metall::before { animation: metall-fliessen 7s linear infinite; }
  @keyframes metall-fliessen { to { --metall-winkel: 360deg; } }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .metall::before { background: linear-gradient(135deg, var(--metall-zart), var(--metall-satt) 45%, var(--metall-hell) 60%, var(--metall-tief)); }
}

/* Dieselbe Mechanik in Gold für die volle Stempelkarte. Langsamer als
   der Knopf: eine Karte steht im Blick und darf nicht flackern — sieben
   Sekunden sind für einen Knopf am Rand richtig, hier nicht. */
.stempelkarte.metall::before {
  background: conic-gradient(from var(--metall-winkel),
    #FCF3E2 0%, #F2B33D 9%, #8A5A0C 18%, #FBE7BC 27%,
    #D89B22 37%, #FFFFFF 46%, #F2B33D 57%, #6B4408 68%,
    #F7DFA6 79%, #8A5A0C 89%, #FCF3E2 100%);
  animation-duration: 11s;
}
.stempelkarte.metall::after { background: var(--gold-weich); }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .stempelkarte.metall::before {
    background: linear-gradient(135deg, #F7DFA6, #8A5A0C 45%, #FCF3E2 60%, #D89B22);
  }
}

/* ── Kasse: Lieferartzeile, Hausnummer ─────────────────────────── */
.lieferartzeile {
  display: flex; align-items: center; gap: 12px;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px;
}
.lieferart-bild { color: var(--akzent); display: grid; place-items: center; flex: none; }
.lieferart-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lieferart-text b { font-size: 0.98rem; }
.lieferart-text .klein { font-size: 0.85rem; }
.lieferartzeile .knopf { min-height: 38px; padding: 8px 14px; font-size: 0.9rem; flex: none; }
/* Fehlt die Lieferadresse, ist das kein Nebensatz: die Zeile wird rot
   und der Knopf zum Hauptknopf — der Bestellknopf unten bleibt gesperrt. */
.lieferartzeile.ist-luecke { border-color: var(--akzent); background: var(--akzent-weich); }
.lieferartzeile.ist-luecke .lieferart-bild { color: var(--akzent); }
.lieferart-text .warnung { color: var(--akzent); font-weight: 600; }
.blatt-lieferart { width: min(34rem, 100%); }


/* ── Bestellkarte: „Wie möchten Sie bestellen?" ───────────────── */
/* Zwei Kacheln mit der Zeit, die sie kosten — die Entscheidung braucht
   beides an einer Stelle. Rechts daneben die Zeitwahl, darunter (nur
   bei Lieferung) Anschrift und Zonenstand. Kein Übernehmen-Knopf:
   jede Änderung wirkt sofort. */
.bestellleiste { padding: 14px 0 4px; }
.bestellkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px;
  box-shadow: var(--schatten-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}
.kartenzeile { display: flex; flex-direction: column; gap: 14px; }
.kartenfrage {
  margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; color: var(--leise);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.wegwahl { flex: 1; min-width: 0; }
.wegkacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wegkachel {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  background: var(--flaeche-2); border: 1.5px solid var(--linie); border-radius: 14px;
  padding: 11px 13px; color: var(--text); min-width: 0;
  transition: border-color var(--takt) ease, background var(--takt) ease,
              box-shadow var(--takt) ease, transform var(--takt) ease;
}
.wegkachel:hover { border-color: var(--linie-satt); background: var(--flaeche); }
.wegzeichen {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 11px; background: var(--flaeche-3); color: var(--akzent);
  transition: background var(--takt) ease, color var(--takt) ease;
}
.wegtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wegtext b { font-size: 1rem; }
.wegzeit { font-size: 0.84rem; color: var(--leise); }
.weghaken { margin-left: auto; color: var(--auf-akzent); display: flex; flex: none; }

/* Die gewählte Kachel trägt die Marke, nicht nur einen Rahmen: auf dem
   Telefon entscheidet sich das im Vorbeigehen. */
.wegkachel.ist-an {
  color: var(--auf-akzent);
  box-shadow: 0 4px 14px rgba(168,64,44,0.30);
  /* Fläche und Rand liegen jetzt in den beiden Ebenen von `.metall`:
     der drehende Kegelverlauf im ::before, die Terrakottafüllung im
     ::after mit 2 px Abstand. Beides hier stehen zu lassen hieße, den
     eigenen Rand vor den fließenden zu setzen. */
  background: transparent; border-color: transparent;
}
/* Dieselbe Füllung wie unter der gewählten Kategorie — der Rand ist
   neu, die Kachel soll aussehen wie vorher. */
.wegkachel.ist-an.metall::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%),
              linear-gradient(180deg, var(--knopf-oben) 0%, var(--knopf-unten) 100%);
}
.wegkachel.ist-an .wegzeit { color: rgba(255,255,255,0.82); }
.wegkachel.ist-an .wegzeichen { background: rgba(255,255,255,0.18); color: var(--auf-akzent); }

.zeitwahl { flex: none; }
.zeitknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.zeitknopf {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--linie); border-radius: 999px; padding: 10px 15px;
  background: var(--flaeche-2); color: var(--leise); cursor: pointer;
  font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  transition: border-color var(--takt) ease, background var(--takt) ease, color var(--takt) ease;
}
.zeitknopf:hover { border-color: var(--linie-satt); color: var(--text); }
.zeitknopf.ist-an { border-color: var(--akzent); background: var(--akzent-weich); color: var(--akzent); }
/* Bei geschlossenem Laden ist die Zeitwahl der einzige Weg weiter —
   dann trägt sie die Marke, damit man sie nicht übersieht. */
.zeitknopf.ist-noetig {
  border-color: var(--akzent); background: var(--akzent); color: var(--auf-akzent);
  box-shadow: 0 3px 12px rgba(168,64,44,0.28);
}

.zeitknopf .sinnbild { color: currentColor; }
.zeitknopf .pfeil { font-size: 0.75rem; }
/* Das echte Auswahlfeld liegt unsichtbar über dem Chip: Tastatur und
   Vorleser bedienen es, die Optik macht der Chip. Eigener Name und an
   den Chip gebunden — es hieß einmal `.zeitfeld` wie die Zeitknöpfe im
   Lieferart-Blatt, und weil diese Regel weiter unten steht, gewann sie:
   die Knöpfe dort wurden unsichtbar, legten sich über das ganze Blatt
   und schluckten jeden Klick. */
.zeitknopf .zeitauswahl { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.lieferzeile {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--linie); padding-top: 13px;
}
/* Vier Spalten: Straße nimmt drei, die Nummer eine — darunter die
   Postleitzahl eine und der Ort drei. „Wittenberg" stand vorher in
   einem 5-rem-Feld und war nach dem „Witten" zu Ende. */
.adressfelder { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); min-width: 0; }
.adressfelder .strasse { grid-column: span 3; }
.adressfelder .ort { grid-column: span 3; }
.adressfelder .feld { min-height: 44px; padding: 10px 12px; font-size: 0.95rem; background: var(--flaeche-2); border-color: transparent; }
.adressfelder .feld:hover { border-color: var(--linie-satt); }
.adressfelder .feld:focus { background: var(--flaeche); border-color: var(--akzent); }
/* Zwei gleich breite Felder — Vorname und Nachname sind gleich wichtig.
   Straße/Nr. und PLZ/Ort haben ihre eigenen Breiten. */
.feldpaar { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.feldpaar.strasse { grid-template-columns: 1fr 5.5rem; }
.feldpaar.ortszeile { grid-template-columns: 8rem 1fr; }
/* Nebeneinander, solange beide Felder mindestens 13 rem bekommen —
   sonst untereinander. Bewusst KEINE Medienabfrage: dieselbe Zeile
   steht in der zweispaltigen Kasse, im breiten Blatt und im schmalen
   Blatt, und die Fensterbreite sagt über keinen dieser drei Kästen
   etwas aus. „Telefonnummer" und „E-Mail-Adresse" brauchen die 13 rem;
   darunter wären es abgeschnittene Beschriftungen. */
.feldpaar.umbrechend {
  display: flex; flex-wrap: wrap;
}
.feldpaar.umbrechend > * { flex: 1 1 13rem; min-width: 0; }

/* ── Zusammengeklappte Anmerkung ──────────────────────────────── */

.anmerkungsfeld { display: flex; flex-direction: column; gap: 10px; }
.anmerkungsfeld > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.02rem;
  padding: 2px 0;
}
.anmerkungsfeld > summary::-webkit-details-marker { display: none; }
/* Eigenes Dreieck statt des mitgelieferten: das steht je nach Browser
   woanders und in einer anderen Größe. */
.anmerkungsfeld > summary::before {
  content: ''; flex: none; width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  transition: transform .15s ease;
}
.anmerkungsfeld[open] > summary::before { transform: rotate(90deg); }
.anmerkungsfeld > summary .klein { color: var(--leise); font-weight: 400; }
.anmerkungsfeld > summary:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .anmerkungsfeld > summary::before { transition: none; }
}

.zonenstand { min-height: 0; }
.zonenstand:empty { display: none; }
.zonenzeile { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text); }
.zonenzeile.leise { color: var(--leise); }
.zonenzeile.ist-fehler { color: var(--akzent); }
.zonenzeile .punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zonenzeile .punkt.gut { background: var(--gut); box-shadow: 0 0 0 3px var(--gut-weich); }
.zonenzeile .punkt.fehler { background: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.zonenzeile .punkt.wartet { background: var(--linie-satt); animation: pulsieren 1.2s ease-in-out infinite; }

/* Schmal: dieselbe Karte, nur enger gesetzt. Sie steht vor der
   Speisekarte — jede gesparte Zeile bringt ein Gericht mehr ins Bild. */
@media (max-width: 47.99rem) {
  .bestellkarte { padding: 13px 14px; gap: 11px; border-radius: 16px; }
  .kartenzeile { gap: 11px; }
  .kartenfrage { margin-bottom: 6px; font-size: 0.74rem; }
  .wegkachel { padding: 9px 10px; gap: 9px; }
  .wegzeichen { width: 34px; height: 34px; border-radius: 10px; }
  .wegtext b { font-size: 0.95rem; }
  .wegzeit { font-size: 0.78rem; }
  .zeitknopf { padding: 9px 13px; font-size: 0.86rem; }
}

@media (min-width: 48rem) {
  .adressfelder { grid-template-columns: minmax(10rem, 2fr) 4.5rem 5.5rem minmax(7rem, 1.2fr); }
  .adressfelder .feld { grid-column: auto; }
}
@media (min-width: 62rem) {
  /* Breit: Wege links, Zeit rechts, durch eine Linie getrennt. */
  .kartenzeile { flex-direction: row; align-items: flex-start; gap: 22px; }
  .zeitwahl { border-left: 1px solid var(--linie); padding-left: 22px; }
  .wegkacheln { grid-template-columns: repeat(2, minmax(0, 18rem)); }
  /* Ohne Zeitwahl — der Laden hat zu — dürfen die Kacheln die ganze
     Breite nehmen, sonst klafft rechts ein leeres Feld. */
  .bestellkarte.ist-zu .wegkacheln { grid-template-columns: 1fr 1fr; }
  .lieferzeile { flex-direction: row; align-items: center; gap: 16px; }
  .lieferzeile .adressfelder { flex: 1; }
  .lieferzeile .zonenstand { flex: none; max-width: 22rem; }
}

/* ── Werbeband ─────────────────────────────────────────────────── */
/* Eine waagerechte Rolle mit scroll-snap: das Wischen macht der
   Browser, wir schalten nur weiter. Ein Karussell aus transform müsste
   Trägheit, Tastatur und Vorleser nachbauen. */
.werbeband { position: relative; margin: 16px 0 4px; }
.bandrolle {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: 18px;
}
.bandrolle::-webkit-scrollbar { display: none; }
.bandkachel {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  /* Seitenverhältnis für schmale Fenster, Höhendeckel für breite: auf
     dem Rechner nähme 21:8 sonst 430 Pixel und schöbe die Speisekarte
     aus dem Bild. */
  aspect-ratio: 21 / 8; max-height: 260px;
  border-radius: 18px; overflow: hidden;
  background: var(--flaeche-3); display: block; text-decoration: none; color: var(--auf-akzent);
}
.bandkachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bandkachel.ist-link:hover img { transform: scale(1.02); }
.bandkachel img { transition: transform 400ms ease; }

/* Der Verlauf trägt die Schrift — ohne ihn steht Weiß auf hellem Salat. */
.bandtext {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px;
  padding: 44px 20px 18px;
  background: linear-gradient(transparent, rgba(20,12,9,0.78));
}
.bandtext b { font-size: clamp(1.05rem, 3.2vw, 1.5rem); letter-spacing: -0.01em; }
.bandtext span { font-size: 0.92rem; opacity: 0.9; }

.bandpfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.9); color: var(--text); font-size: 1.3rem; line-height: 1;
  box-shadow: var(--schatten-2); display: grid; place-items: center;
  opacity: 0; transition: opacity var(--takt) ease;
}
.werbeband:hover .bandpfeil, .bandpfeil:focus-visible { opacity: 1; }
.bandpfeil.links { left: 10px; }
.bandpfeil.rechts { right: 10px; }
/* Auf Fingergeräten gibt es kein Überfahren — dort wischt man. */
@media (hover: none) { .bandpfeil { display: none; } }

.bandpunkte { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.bandpunkt {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.55); transition: width var(--takt) ease, background var(--takt) ease;
}
.bandpunkt.ist-an { width: 20px; border-radius: 999px; background: #fff; }

@media (max-width: 47.99rem) {
  .bandkachel { aspect-ratio: 16 / 9; max-height: 200px; border-radius: 14px; }
  .bandrolle { border-radius: 14px; gap: 8px; }
  .bandtext { padding: 36px 14px 16px; }
}

/* ── Kundenkonto ───────────────────────────────────────────────── */
/* Der Kontoknopf teilt sich Form und Maße mit dem Warenkorbzeichen,
   trägt aber bewusst NICHT den fließenden Metallrand: zwei wandernde
   Ränder nebeneinander im Kopfband wären Jahrmarkt. */
.kontozeichen {
  position: relative; width: 40px; height: 40px; flex: none; margin-left: 10px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 50%;
  background: var(--flaeche); color: var(--text);
  transition: border-color var(--takt) ease, color var(--takt) ease, background var(--takt) ease;
}
.kontozeichen:hover { border-color: var(--linie-satt); }
.kontozeichen.ist-an { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-weich); }
.kontozeichen.gross {
  width: 52px; height: 52px; margin: 0 0 4px; cursor: default;
  color: var(--akzent); background: var(--akzent-weich); border-color: var(--akzent-weich);
}

/* Sechs Ziffern, weit auseinander — man tippt sie von einem anderen
   Bildschirm ab und muss die Stelle wiederfinden. */
.codefeld {
  font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; font-weight: 700;
  padding-inline: 8px;
}

.zeilenknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.zeilenknoepfe .knopf { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }

.uebersichtsliste li.mit-knopf { display: flex; align-items: center; gap: 10px; }
.uebersichtsliste li.mit-knopf > span:first-child { flex: 1; min-width: 0; }
.uebersichtsliste li.mit-knopf .knopf { min-height: 34px; padding: 6px 10px; flex: none; }

.uebersichtsliste.bestellungen li { display: block; padding: 0; }
.bestellzeile {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; color: var(--text);
  transition: border-color var(--takt) ease, background var(--takt) ease;
}
.bestellzeile:hover { border-color: var(--linie-satt); background: var(--flaeche); }
.bestellzeile .nummer {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: var(--flaeche-3); color: var(--akzent); font-weight: 800;
}
.bestelltext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bestelltext b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestellzeile .preis { font-weight: 700; flex: none; }
/* „Nochmal" steht NEBEN der Zeile und nicht in ihr: ein Knopf im Knopf
   ist ungültig, und der Vorleser läse beide als einen. Die Meldung
   bricht darunter um. */
.uebersichtsliste.bestellungen li.mit-nochmal { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
/* Mit dem Kind-Wähler, weil weiter oben `.uebersichtsliste li > :last-child
   { flex: none }` steht — stärker als eine einzelne Klasse. Ohne das
   blieb die Meldung neben der Zeile stehen und drückte sie zusammen. */
.uebersichtsliste.bestellungen li.mit-nochmal > .bestellzeile { flex: 1 1 0; min-width: 0; width: auto; }
.uebersichtsliste.bestellungen li.mit-nochmal > .nochmalknopf { flex: none; border-radius: 12px; padding: 0 12px; font-weight: 600; color: var(--akzent); }
.uebersichtsliste.bestellungen li.mit-nochmal > .nochmalmeldung { flex: 0 0 100%; margin: 0 2px 4px; color: var(--leise); }
.textknopf { background: none; border: 0; padding: 0; color: var(--akzent); font-weight: 600; text-decoration: underline; cursor: pointer; }

.merkfeld { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; }
.merkfeld input { width: 18px; height: 18px; accent-color: var(--akzent); }

/* Kontolöschung: aufklappbar und ruhig gesetzt. Nichts, worauf man aus
   Versehen tippt. */
.loeschbereich { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.loeschbereich summary { cursor: pointer; color: var(--leise); }
.loeschbereich[open] summary { margin-bottom: 2px; }

/* ── Einwilligungsbanner ───────────────────────────────────────── */
/* Unten, nicht in der Mitte: es fragt, es sperrt nicht. Über der
   Warenkorbleiste (22), unter den Blättern (30) — wer ein Produkt
   ansieht, soll nicht von einer Frage überdeckt werden. */
.einwilligung {
  position: fixed; z-index: 26;
  left: var(--rand); right: var(--rand); bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 34rem; margin: 0 auto;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.28);
  padding: 18px 20px 16px;
  animation: hochschieben 260ms cubic-bezier(0.2,0.8,0.3,1) both;
}
.einwilligung h2 { margin: 0 0 6px; font-size: 1.05rem; padding-right: 28px; }
.einwilligung p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.45; color: var(--leise); }
.einwilligung a { color: var(--akzent-hell); }
.einwilligung-stand { font-weight: 600; color: var(--text) !important; }
/* Zwei gleiche Knöpfe, nebeneinander, gleich breit. Mit Absicht kein
   knopf-haupt für „Einverstanden" (siehe Einwilligung.jsx). */
.einwilligung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.einwilligung-knoepfe .knopf { min-height: 46px; justify-content: center; }
.einwilligung-zu {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border: 0; background: none; color: var(--leise); font-size: 1.4rem; cursor: pointer; border-radius: 8px;
}
.einwilligung-zu:hover { background: var(--flaeche-2); color: var(--text); }
/* Liegt etwas im Korb, steht die Leiste unten — das Banner rückt darüber. */
.hat-korb .einwilligung { bottom: calc(86px + env(safe-area-inset-bottom)); }
/* Breit links unten: rechts unten steht auf der Startseite die
   Warenkorbpille, auf der Probeseite die Korbspalte. */
@media (min-width: 62rem) {
  .einwilligung { right: auto; left: 24px; margin: 0; }
  .hat-korb .einwilligung { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .einwilligung { animation: none; } }

.fussverweis { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ── Ausverkauft ──────────────────────────────────────────────
   Wie auf dem Küchenbildschirm: durchgestrichen statt verschwunden.
   Der Kunde sieht, dass es das gibt — nur heute nicht. */
.artikel.ist-aus .artikel-flaeche .name,
.artikel.ist-aus .artikel-preis { text-decoration: line-through; color: var(--leise); }
.artikel.ist-aus .artikel-bildflaeche { opacity: 0.5; filter: grayscale(0.6); }
.artikel-stand {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--akzent); background: var(--akzent-weich); border-radius: 6px; padding: 3px 8px;
}
.eintrag.ist-aus { cursor: not-allowed; background: var(--flaeche-2); }
.eintrag.ist-aus .eintrag-name { text-decoration: line-through; color: var(--leise); }
.eintrag.ist-aus .haken { opacity: 0.4; }
.eintrag-stand { font-size: 0.8rem; font-weight: 600; color: var(--akzent); }

/* Der Sprachknopf im Kopf trägt zwei Buchstaben statt eines Zeichens. */
.sprachknopf { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1; }

/* ── Gruppenbestellung ─────────────────────────────────────────────
   Die Klassen heißen bewusst nicht `.gruppe`: so heißen hier schon die
   Abschnitte eines Formulars. */
.gruppenzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; margin: 0 0 12px; padding: 10px 12px; cursor: pointer; color: var(--text);
  background: var(--flaeche-2); border: 1px dashed var(--linie-satt); border-radius: 12px;
  transition: border-color var(--takt) ease, background var(--takt) ease;
}
.gruppenzeile:hover { border-color: var(--akzent); background: var(--flaeche); }
.gruppenzeile.ist-an { border-style: solid; border-color: var(--akzent); background: var(--akzent-weich); }
.gruppenzeile b { font-size: 0.95rem; }
.gruppenzeile > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.warenkorb-leer .gruppenzeile { margin-bottom: 18px; }

.gruppenwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gruppenwahl .knopf.ist-an { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-weich); }
.gruppenhinweis {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 0.92rem;
  background: var(--warnung-weich); color: var(--warnung);
}
.gruppenhinweis.ist-gut { background: var(--gut-weich); color: var(--gut); }

.gruppencode { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gruppencode > div { display: flex; flex-direction: column; }
.codezeichen { font-size: 1.7rem; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; color: var(--akzent); }

.mitbesteller { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mitbesteller > li { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: var(--flaeche); }
.mitbesteller > li.bin-ich { border-color: var(--linie-satt); background: var(--flaeche-2); }
.mitbesteller-kopf { display: flex; align-items: baseline; gap: 6px; }
.mitbesteller-summe { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.gruppenmarke {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--akzent); border: 1px solid var(--akzent); border-radius: 999px; padding: 1px 7px;
}
.mitbesteller-zeilen { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.92rem; }
.mitbesteller-zeilen li { display: flex; justify-content: space-between; gap: 10px; }
.mitbesteller-zeilen li > :first-child { min-width: 0; }
.mitbesteller-zeilen li > :last-child { flex: none; font-variant-numeric: tabular-nums; }
.mitbesteller-zeilen li.gestoert { color: var(--leise); text-decoration: line-through; }
.gruppensumme { display: flex; justify-content: space-between; font-size: 1.05rem; padding-top: 10px; border-top: 1px solid var(--linie); }
.gruppenknoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.korb-gruppe { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--linie-satt); }
.korb-gruppe > p { margin: 0 0 6px; }
.korbzeile.ist-fremd { opacity: 0.92; }
.personenmarke { white-space: nowrap; }

/* Die Zutatenliste im Artikeldialog. */
.zutatenliste { margin-top: 10px; }
.zutatenliste summary { cursor: pointer; font-size: 0.92rem; color: var(--leise); }
.zutatenliste p { margin: 6px 0 0; }
.zutatenliste b { color: var(--text); }