/* Warenkorb — nur das Nötigste, Gestaltung kommt später. */

.warenkorb-positionen {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.warenkorb-position {
  border-bottom: 1px solid currentColor;
  padding: 1rem 0;
}

.warenkorb-position[data-zustand="preis"],
.warenkorb-position[data-zustand="gesperrt"] {
  border-left: 4px solid #b3261e;
  padding-left: 0.75rem;
}

/* Die Farbe steht hier und nicht nur in karte.css: Dort färbt
   `.karte h1, .karte h2` die Überschriften rot — der Warenkorb nennt
   die Position als h2 und war damit rot, die Durchsicht beim Abschluss
   und auf der Dankesseite nennt sie als h3 und bekam von UIkit die
   Farbe für dunklen Grund: creme auf creme, also nichts.

   Zwei Stufen Klassen, damit die Regel gegen `.uk-light h3` gewinnt;
   die Position heißt überall dasselbe und sieht deshalb überall
   gleich aus, unabhängig von der Stufe der Überschrift. */
.bestellstrecke .warenkorb-name {
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
  color: var(--rot);
}

.warenkorb-zusatz { font-size: 0.8em; font-style: normal; }

.warenkorb-blocktitel {
  margin: 0.5rem 0 0.1rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.warenkorb-details {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.warenkorb-hinweis {
  color: #b3261e;
  font-weight: 600;
}

.warenkorb-preis {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: baseline;
}

.warenkorb-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Die Bestandteile einer Zeile mit ihrem Anteil rechts — dieselbe
   Spalte wie der Zeilenpreis, damit sich die Beträge lesen und
   nachrechnen lassen (E-086). */
.warenkorb-zusatz { font-size: 0.8em; font-style: normal; }

.warenkorb-blocktitel {
  margin: 0.5rem 0 0.1rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.warenkorb-details {
  list-style: none;
  margin: 0.3rem 0 0.6rem;
  padding: 0;
}

.warenkorb-details li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1rem;
  padding: 0.1rem 0;
}

.warenkorb-detail-preis {
  text-align: right;
  white-space: nowrap;
  color: var(--tinte-leise, #6B4A42);
  font-variant-numeric: tabular-nums;
}

.warenkorb-anzahl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.warenkorb-anzahl .zaehlfeld { width: 4rem; }
.warenkorb-anzahl-wort { color: var(--tinte-leise, #6B4A42); }

/* Am Handy fehlten einundzwanzig Pixel, und „Entfernen" rutschte in
   die zweite Reihe. Das Wort „Anzahl" ist der entbehrlichste Teil der
   Zeile: Minus, Zahl, Plus sagt dasselbe, und für Vorleseprogramme
   steht es weiter am Zahlenfeld (aria-label). */
@media (max-width: 26rem) {
  .warenkorb-anzahl-wort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.warenkorb-summen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
}

.warenkorb-summen dd {
  margin: 0;
  text-align: right;
}

.warenkorb-link {
  position: sticky;
  bottom: 0;
  display: block;
  padding: 0.75rem;
  text-align: center;
}

/* Bestellart, Ort, Zeit — nur das Nötigste. */

.bestellen-gruppe {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
}

.bestellen-gruppe legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.bestellen-art {
  display: inline-flex;
  gap: 0.5rem;
  margin-right: 1.5rem;
  padding: 0.5rem 0;
}

.bestellen-ort select {
  display: block;
  max-width: 100%;
  margin-top: 0.25rem;
}

/* Der Satz und die Zeit gehören zusammen und stehen in einer Zeile,
   solange Platz ist (E-092). */
.bestellen-zeit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
}

.bestellen-zeitfrage { margin: 0 0 0.4rem; font-weight: 700; }
.bestellen-zeitsatz { font-weight: 600; }

/* Ein eigenes Steuerelement wäre moderner anzusehen und schlechter zu
   bedienen: Am Handy öffnet ein echtes <select> das Rad des Systems,
   das jeder kennt und das mit einer Hand zu drehen ist. Gestylt wird
   deshalb das Feld selbst — Pille wie die Knöpfe, eigener Pfeil,
   große Fläche. Kein JavaScript, und ohne Stylesheet bleibt ein
   gewöhnliches Auswahlfeld übrig. */
.bestellstrecke .bestellen-zeit select {
  appearance: none;
  min-height: 2.9rem;
  padding: 0 2.6rem 0 1.2rem;
  border: 2px solid var(--rot);
  border-radius: 999px;
  background-color: var(--creme-hell);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23BD2F27' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.9rem;
  color: var(--rot);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bestellstrecke .bestellen-zeit select:hover { background-color: rgba(189, 47, 39, 0.08); }

/* Was nur Vorlesehilfen hören sollen. */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bestellen-woche dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}

.bestellen-woche dd {
  margin: 0;
}

.bestellrahmen {
  margin: 0 0 1rem;
}

/* Über der Karte steht nur, was nicht stimmt (E-083) — und das muss
   man auch sehen. Ungestaltet fiel der Satz als nackte Zeile über die
   Karte und sah aus wie ein Versehen, das jemand liegengelassen hat.
   Farbe und Strich links sind dieselben wie bei einer Position, mit
   der etwas nicht stimmt. */
.bestellrahmen-hinweis {
  margin: 0;
  border-left: 4px solid #b3261e;
  padding: 0.625rem 0.875rem;
  background: rgba(179, 38, 30, 0.07);
  color: #b3261e;
  font-weight: 600;
}

/* „Zeit wählen" ist der Ausweg und muss als solcher zu erkennen
   sein. Nicht umbrechen: zwei Wörter, ein Ziel. */
.bestellrahmen-hinweis a {
  color: inherit;
  white-space: nowrap;
}

/* Abschluss und Bestätigung — nur das Nötigste. */

.abschluss-feld label,
.abschluss-feld small,
.abschluss-feld .warenkorb-hinweis {
  display: block;
}

.abschluss-feld input {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  font: inherit;
}

/* Mittig, auf EKs Wunsch: Streng genommen gehörte der Knopf nach
   rechts, weil es dorthin weitergeht — die Mitte gefällt ihm besser,
   und das ist bei einem einzelnen Knopf unter einem breiten Block
   kein Streitfall. Am Handy nimmt er die ganze Breite. */
.warenkorb-abschluss {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
}


/* Der eine Knopf, der weiterbringt: groß, gefüllt, nicht zu übersehen.
 *
 * Mit „.bestellstrecke" davor, weil UIkit Verweise in einem Absatz
 * unterstreicht — und zwar mit einem Farbverlauf als Hintergrundbild,
 * nicht mit text-decoration. „background: var(--rot)" allein setzte das
 * nicht zurück, denn die UIkit-Regel ist genauer als eine einzelne
 * Klasse. Deshalb steht hier eine Klasse mehr. */
.bestellstrecke .warenkorb-weiter,
.bestellstrecke .abschluss-knopf {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--rot);
  border-radius: 999px;
  background: var(--rot);
  color: var(--creme-hell);
  text-decoration: none;
}

/* Nach „.bestellstrecke a" geschrieben wäre zu spät gedacht: Der
   Verweis trägt eine Klasse, die Regel muss sie nennen. */
.bestellstrecke .warenkorb-weiter,
.bestellstrecke .warenkorb-weiter:hover { color: var(--creme-hell); }

.bestellstrecke .warenkorb-weiter:hover,
.bestellstrecke .abschluss-knopf:hover {
  background: var(--rot-dunkel);
  border-color: var(--rot-dunkel);
  color: var(--creme-hell);
}

/* Am Handy über die ganze Breite: Dort ist die Mitte auch der Rand,
   und der Daumen trifft eine breite Fläche sicherer. Nach den Regeln
   oben, nicht davor — bei gleicher Genauigkeit gewinnt die spätere. */
@media (max-width: 520px) {
  /* Als Kind eines Flexbereichs bliebe der Knopf so breit wie sein
     Text — die Hauptachse streckt nicht. Also hier kein Flex. */
  .warenkorb-abschluss { display: block; }

  .bestellstrecke .warenkorb-weiter,
  .bestellstrecke .abschluss-knopf {
    display: flex;
    justify-content: center;
  }
}

.danke-nummer strong {
  display: block;
  font-size: 3rem;
  line-height: 1.1;
}

/* Pfand steht neben dem Preis, nie darin (Preisangabenverordnung). */
.warenkorb-pfand {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ===================================================================
 * Die Strecke in der Hülle der Website (E-063).
 *
 * `.bestellstrecke` setzt das Theme-Template um die Snippets. Was hier
 * steht, gilt damit für Bestellen, Warenkorb, Abschluss und Danke —
 * einmal gepflegt, viermal wirksam.
 *
 * Die Farben kommen aus karte.css, das auf diesen Seiten mitgeladen
 * wird. Deshalb stehen sie hier nicht noch einmal.
 * =================================================================== */

.bestellstrecke {
  padding-top: clamp(1.6rem, 4vw, 2.6rem);
  padding-bottom: clamp(2rem, 5vw, 3.4rem);
}

.bestellstrecke .karte {
  max-width: 46rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border-radius: 10px;
}

.bestellstrecke h1 {
  font-family: fraunces-variable, Georgia, serif;
  font-style: italic;
  font-weight: 900;
  color: var(--rot);
  line-height: 1;
  font-size: clamp(1.9rem, 1.5rem + 2.2vw, 2.9rem);
  margin: 0 0 1.2rem;
}

/* Siebzehn Ortsnamen brauchen einen Rahmen, sonst stehen sie im Raum
   (E-093). Getönt statt umrandet: Der Abschnitt hat schon zwei rote
   Linien, und das hier ist eine Angabe, keine Wahl. */
.bestellen-orte {
  margin: 0.4rem 0 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: rgba(43, 21, 18, 0.05);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Zwei gleichwertige Möglichkeiten als ein Stück (E-091): ein Rahmen,
   zwei Hälften, die gewählte gefüllt. Das Radio bleibt darunter und
   trägt die Wahl — ohne dieses Stylesheet stehen zwei Felder da, und
   es funktioniert genauso. */
.segmente {
  display: inline-flex;
  padding: 0.2rem;
  border: 2px solid var(--rot);
  border-radius: 999px;
  background: rgba(189, 47, 39, 0.06);
}

.segmente .segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  color: var(--rot);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Das Feld selbst verschwindet — die Fläche ist der Knopf. */
.segmente .segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.segmente .segment:hover { background: rgba(189, 47, 39, 0.12); }

.segmente .segment:has(:checked) {
  background: var(--rot);
  color: var(--creme-hell);
}

/* Mit der Tastatur muss zu sehen sein, wo man ist. */
.segmente .segment:has(:focus-visible) {
  outline: 3px solid var(--gold, #D9A441);
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .segmente { display: flex; }
  .segmente .segment { flex: 1; padding: 0 0.8rem; }
}

/* Wie und wann ist eine eigene Entscheidung und kein Vorspann zu den
   Angaben — also steht der Abschnitt für sich, zwischen zwei Linien
   (E-090). */
.abschluss-rahmen {
  margin: 1.2rem 0 1.6rem;
  padding: 1.2rem 0;
  border-top: 2px solid var(--rot);
  border-bottom: 2px solid var(--rot);
}

.abschluss-rahmen > h2:first-child { margin-top: 0; }
.abschluss-rahmen .bestellrahmen-zeile { margin: 0; }

/* Der Knopf, der weiterbringt, steht mittig — wie im Warenkorb. */
.abschluss-absenden {
  display: flex;
  justify-content: center;
}

/* Unter dem Mindestbestellwert: der Weg weiter und der Weg daneben
   (E-096). Der eine ist ein Knopf, der andere ein Satz — beide sind
   Auswege, aber nur einer ist der erwartete. */
.warenkorb-auswege {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 1.4rem;
}

.warenkorb-ausweg {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinte-leise, #6B4A42);
  text-align: center;
}

/* Der Bestellpfad: Wo man ist, wo man war, was noch kommt (E-089).
   Was kommt, steht blass da — es ist kein Weg, sondern ein Ausblick. */
.pfad { margin: 0 0 1rem; font-size: 0.9rem; }

.pfad ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfad li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: rgba(43, 21, 18, 0.4);
}

.pfad [data-stand="hier"] { font-weight: 700; }
.pfad [data-stand="vor"] { color: rgba(43, 21, 18, 0.45); }
.pfad [data-stand="hinter"] span { color: var(--tinte-leise, #6B4A42); }

.bestellstrecke h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin: 1.6rem 0 0.6rem; }

/* Eingabefelder und Knöpfe tragen dieselbe Form wie die Knöpfe der
   Website: Pillen mit zwei Pixel Rand, Fokus in Gold. */
.bestellstrecke button,
.bestellstrecke input[type="submit"],
.bestellstrecke .karte-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1.3rem;
  border: 2px solid var(--rot);
  border-radius: 999px;
  background: var(--rot);
  color: var(--creme-hell);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bestellstrecke button:hover,
.bestellstrecke input[type="submit"]:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }

/* Drei Stufen (E-084):
 *
 * Gefüllt ist, was weiterbringt — je Seite genau einer. Umrandet ist,
 * was etwas ändert. Und was wegnimmt, sieht aus wie ein Verweis: Wer
 * bestellen will, soll den Weg sehen, nicht den Ausgang.
 */
.bestellstrecke button.zweitrangig,
.bestellstrecke button.leer {
  background: transparent;
  color: var(--rot);
}

/* Die Knöpfe einer Zeile sind klein: Sie gehören zu ihrer Position,
   nicht zur Seite. Farbe trägt, was man häufiger tut. */
.bestellstrecke .zeilenknopf {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bestellstrecke .zeilenknopf--tun {
  background: var(--rot);
  color: var(--creme-hell);
}

.bestellstrecke .zeilenknopf--tun:hover {
  background: var(--rot-dunkel);
  color: var(--creme-hell);
}

.bestellstrecke .zeilenknopf--weg {
  background: rgba(43, 21, 18, 0.08);
  color: var(--tinte-leise, #6B4A42);
}

.bestellstrecke .zeilenknopf--weg:hover {
  background: rgba(43, 21, 18, 0.14);
  color: #2B1512;
}

.bestellstrecke button.leise {
  padding: 0.2rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tinte-leise, #6B4A42);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bestellstrecke button.leise:hover {
  background: none;
  color: var(--rot);
}



.bestellstrecke input[type="text"],
.bestellstrecke input[type="tel"],
.bestellstrecke input[type="email"],
.bestellstrecke input[type="number"],
.bestellstrecke select,
.bestellstrecke textarea {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(43, 21, 18, 0.3);
  border-radius: 6px;
  background: #fff;
  color: var(--tinte);
  max-width: 100%;
}

.bestellstrecke :focus-visible {
  outline: 3px solid var(--gold, #D9A441);
  outline-offset: 3px;
}

.bestellstrecke a { color: var(--rot); }

/* Der Weg zurück steht oben und soll dort auch zu sehen sein. */
.bestellstrecke .karte-zurueck,
.bestellstrecke p:first-child a { font-weight: 600; }

.bestellstrecke label { cursor: pointer; }
.bestellstrecke fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
.bestellstrecke legend { font-weight: 700; padding: 0; }

/* ===================================================================
 * Der Warenkorb in den Leisten der Website (E-065).
 *
 * Diese Regeln gelten auf jeder Seite, nicht nur in der Strecke —
 * deshalb stehen sie hier und nicht unter .bestellstrecke. Die
 * Leisten selbst gehören dem Theme; was hier steht, betrifft nur das,
 * was PizzaOrder hineinhängt.
 * =================================================================== */

.warenkorbknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  white-space: nowrap;
}

.warenkorbknopf svg { width: 1.1em; height: 1.1em; flex: none; }

.warenkorbzahl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* In der Handyleiste ist er ein Feld wie die anderen. */
/* Creme mit rotem Wort, nicht Gold (E-112). Gold trägt seit
   derselben Entscheidung das Feld „Bestellen" daneben, und zwei
   goldene Felder nebeneinander sind eine Fläche, keine zwei Ziele. */
.warenkorbknopf--leiste {
  flex: 1;
  justify-content: center;
  padding: 0.95rem 0.5rem;
  font-weight: 700;
  background: #F1E9D1;
}

/* Zwei Klassen, nicht eine: `.leiste a` setzt die Schriftfarbe auf
   Creme und ist spezifischer als eine einzelne Klasse. Der Korb stand
   deshalb cremefarben auf cremefarbenem Grund — da war ein Feld, aber
   nichts darin zu sehen (E-138). */
.leiste .warenkorbknopf--leiste {
  color: #BD2F27;
}

/* Es geht gerade nicht weiter (E-137). Kein Knopf daneben: Der Satz
   ist das Ende des Weges und soll nicht aussehen wie eine Station. */
.warenkorb-zu {
  margin: 0;
  border-left: 4px solid #b3261e;
  padding: 0.7rem 0.9rem;
  background: rgba(179, 38, 30, 0.07);
  color: #b3261e;
  font-weight: 600;
}

/* Die Frage nach Bestellart und Zeit steht im Warenkorb, nicht davor
   (E-066). Sie ist der nächste Schritt, also sieht sie auch so aus. */
.rahmenfrage {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.3rem;
  border-radius: 8px;
  border: 2px solid var(--rot, #BD2F27);
}

.rahmenfrage h2 { margin: 0 0 0.3rem; }
.rahmenfrage p { margin: 0 0 0.8rem; }
.rahmenfrage p:last-child { margin-bottom: 0; }
.rahmenfrage .karte-knopf { text-decoration: none; }

/* Vorbehalt im Warenkorb: der Ort steht erst mit der Adresse fest. */
.warenkorb-vorbehalt {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Der Riegel vor dem Knopf (E-100). Maße und Farben sind die des
   Schalters im Produktdialog — dieselbe Bewegung soll dasselbe
   bedeuten, egal an welcher Stelle der Bestellung sie steht.

   Die Schaltfläche selbst ist 44 × 25 px und damit flacher als das
   Mindestmaß aus E-097. Das geht hier, weil die Beschriftung zum
   Schalter gehört: Wer auf den Satz tippt, schaltet ihn. Die Fläche
   ist der ganze Absatz, nicht das Rechteck. */
/* ---- Der Stand der Bestellung (E-102) ---------------------------- */

/* Drei Schritte in einer Reihe, verbunden durch eine Linie. Erledigtes
   ist rot und ausgefüllt, das Laufende rot und umrandet, Offenes
   getönt. Die Form sagt dasselbe wie die Farbe — wer Rot nicht von
   Grau unterscheidet, sieht den gefüllten Punkt. */
.danke-stand {
  margin: 1.4rem 0 1.8rem;
  padding: 1.1rem 1.2rem 1rem;
  border: 2px solid rgba(189, 47, 39, 0.22);
  border-radius: 10px;
}

.danke-schritte {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.danke-schritte li {
  position: relative;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--tinte-leise, #6B4A42);
}

/* Der Punkt. */
.danke-schritte li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 2px solid rgba(189, 47, 39, 0.3);
  background: var(--creme-hell, #FAF6EC);
  z-index: 1;
}

/* Die Linie zum vorherigen Punkt. */
.danke-schritte li + li::after {
  content: "";
  position: absolute;
  top: 0.38rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background: rgba(189, 47, 39, 0.22);
}

.danke-schritte li[data-schritt="erledigt"],
.danke-schritte li[data-schritt="aktuell"] { color: var(--rot, #BD2F27); font-weight: 700; }

.danke-schritte li[data-schritt="erledigt"]::before { background: var(--rot, #BD2F27); border-color: var(--rot, #BD2F27); }
.danke-schritte li[data-schritt="erledigt"]::after,
.danke-schritte li[data-schritt="aktuell"]::after { background: var(--rot, #BD2F27); }

/* Das Laufende: umrandet statt gefüllt, mit einem Ring darum. */
.danke-schritte li[data-schritt="aktuell"]::before {
  border-color: var(--rot, #BD2F27);
  box-shadow: 0 0 0 4px rgba(189, 47, 39, 0.18);
}

.danke-standsatz {
  margin: 0.9rem 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--rot, #BD2F27);
}

.danke-standhinweis { margin: 0.4rem 0 0; text-align: center; font-size: 0.82rem; opacity: 0.7; }

@media (max-width: 420px) {
  .danke-schritte li { font-size: 0.78rem; }
}

.abschluss-rechtliches {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.35rem 0.7rem;
  margin: 1.4rem 0 0;
}

.abschluss-schalter {
  appearance: none;
  flex: none;
  width: 2.75rem;
  height: 1.55rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 21, 18, 0.22);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.abschluss-schalter::after {
  content: "";
  position: absolute;
  top: 0.17rem;
  left: 0.17rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.15s ease;
}

.abschluss-schalter:checked { background: var(--rot); }
.abschluss-schalter:checked::after { transform: translateX(1.2rem); }

/* Der Schalter trägt `appearance: none` und verliert damit in manchen
   Browsern den eigenen Fokusring. Hier steht er selbst — rot, nicht
   gold: Gold auf Creme kommt auf 2,08:1 und ist auf dem hellen Grund
   der Bestellstrecke praktisch unsichtbar. */
.abschluss-schalter:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
}

.abschluss-rechtliches label { cursor: pointer; }
.abschluss-rechtliches .warenkorb-hinweis { grid-column: 2; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .abschluss-schalter, .abschluss-schalter::after { transition: none; }
}

/* Was der Gast an einem Gericht geändert hat (E-072). Ruhig, aber
   sichtbar — er soll es wiederfinden, nicht erschrecken. */
.warenkorb-abweichung,
.bestellung-abweichung {
  margin: 0.2rem 0 0;
  font-weight: 600;
}