/* 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); }
}

/* ── Restaurantkopf ────────────────────────────────────────── */
.held { position: relative; }
.held-band {
  height: 138px;
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(194,84,56,0.55) 0%, transparent 58%),
    radial-gradient(90% 120% at 92% 20%, rgba(138,90,12,0.42) 0%, transparent 60%),
    linear-gradient(120deg, #33231D 0%, #4A2A20 52%, #6B3524 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; }
.karte { flex: 1; min-width: 0; 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-regel.pflicht { color: var(--akzent); background: var(--akzent-weich); }
.gruppe-regel.erledigt { color: var(--gut); background: var(--gut-weich); }
.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; }
.korboptionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.84rem; color: var(--leise); }
.korboptionen .ohne { color: var(--warnung); }
/* 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; }
.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 { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.zahlart {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  border-radius: 12px; padding: 13px 14px; cursor: pointer; font-weight: 600;
}
.zahlart:hover { border-color: var(--linie-satt); }
.zahlart.ist-an { border-color: var(--akzent); background: var(--akzent-weich); }
.zahlart .sinnbild { flex: none; color: var(--akzent); }
.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; }
.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". */
/* ── Bezahlblatt: PayPals Kartenfelder ─────────────────────────
   Die Felder selbst liegen in iframes von PayPal — gestaltet wird
   dort über die `style`-Angabe im JavaScript. Hier steht nur der
   Rahmen darum, damit die Fremdfelder aussehen wie unsere eigenen. */
.kartenfelder { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.kartenzeile { display: flex; gap: 10px; }
.kartenzeile .kartenfeld { flex: 1; }
.kartenfeld {
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche); padding: 2px 12px; height: 48px;
}
.kartenfeld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.bezahlfeld.ist-versteckt { display: none; }
.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); }
.zahlung-offen .knopf { width: 100%; max-width: 18rem; }

/* Das Bezahlfeld im Blatt. Die Kartenfelder stecken in iframes von
   PayPal und bringen ihr Aussehen von dort mit; Apple Pay und Google Pay
   zeigen hier 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); }
.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; }
.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); }
.shopfuss-innen {
  display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center;
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
}
.shopfuss .anschrift { color: var(--leise); font-size: 0.88rem; }
.shopfuss nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.shopfuss a { color: var(--leise); text-decoration: none; font-size: 0.9rem; }
.shopfuss a:hover { color: var(--akzent); text-decoration: underline; }
.karte + .shopfuss, .ist-breit .shopfuss-innen { padding-bottom: 24px; }

/* ── 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; }
}

/* ═══════════════════════════════════════════════════════════════
   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-gross { width: min(44rem, 100%); }
.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; }

/* ── Fuß ───────────────────────────────────────────────────── */
.fussnav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }

/* ── 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. Auch
     hier quadratisch: die Kachelbreite gibt die Höhe vor. */
  .artikel-bildflaeche {
    width: 100%; aspect-ratio: 1 / 1; 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),
    #FBEEE9 0%, #C25438 9%, #6B2A1C 18%, #F5D9CF 27%,
    #A8402C 37%, #FFFFFF 46%, #C25438 57%, #4A1E14 68%,
    #EFC1B2 79%, #6B2A1C 89%, #FBEEE9 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, #B44A35 0%, #8E3323 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, #EFC1B2, #A8402C 45%, #FBEEE9 60%, #6B2A1C); }
}

/* 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 {
  background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent);
  box-shadow: 0 4px 14px rgba(168,64,44,0.30);
}
.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; }

.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; }

.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; }