/*
 * order/css/order.css
 *
 * DIE BESTELLSTRECKE.
 *
 * NEUE HAUPTREGEL (ersetzt die vorherige Iteration "BRAND FIRST. iOS POLISH SECOND",
 * die diese Datei ausdruecklich darauf festlegte, KEINE eigenen Farben/Schriften/
 * Radien zu definieren und ausschliesslich die Theme-Variablen zu verwenden):
 *
 *   Die Bestellstrecke ist ein PRODUKT, keine Unterseite eines Restaurant-Themes.
 *   Sie gestaltet sich vollstaendig ueber das Designsystem in css/clickro-ui.css
 *   (--ck-*) und benutzt vom Theme nur noch Layout-Infrastruktur (Bootstrap-Grid,
 *   Navigationsmechanik). Das Ergebnis soll sich wie eine App anfuehlen: ruhige
 *   Flaechen, klare Hierarchie, grosse Antippflaechen, eine einzige Akzentfarbe.
 *
 * WARUM DIE UMKEHRUNG NOETIG WAR
 * Die vorherige Fassung war handwerklich in Ordnung, hat aber die visuelle Sprache
 * des Themes uebernommen: rechteckige Buttons in Versalien, Antonio als Flaechen-
 * schrift, Eingabefelder ohne Radius mit ausgegrautem Text. Genau daraus entstand die
 * Rueckmeldung "wirkt alt, farblos, nicht hochwertig". Kein Mass an Abstands-
 * korrekturen konnte das aufheben, weil die Ursache in den Komponenten selbst lag.
 *
 * AUFBAU
 *   0  Grundgeruest, Kopfbereich, Schrittwechsel
 *   1  Statusleiste (Bestellart/Zone)
 *   2  Bestellart-Auswahl - der Einstieg
 *   3  Postleitzahl
 *   4  Menue: Werkzeugleiste, Raster, klebender Warenkorb
 *   5  Produktkarten
 *   6  Warenkorb (Leiste mobil, Panel/Sheet)
 *   7  Produktdialog - der Konfigurator
 *   8  Checkout
 *   9  Zahlung
 *  10  Bestaetigung
 *  11  Hinweise
 *
 * WAS AN DAS JAVASCRIPT GEBUNDEN IST (nicht aendern, ohne dort mitzugehen)
 *   - Zustaende haengen an ATTRIBUTEN, nicht an Klassen: [aria-pressed="true"] fuer
 *     jede Auswahl, [aria-current="true"] fuer die aktive Kategorie, :disabled fuer
 *     gesperrte Aktionen, [hidden] fuer den aktiven Schritt. Es gibt keine
 *     is-active-Klassen, und es sollen auch keine entstehen - die Attribute sind
 *     gleichzeitig die Information fuer Screenreader.
 *   - --order-header-h wird zur Laufzeit von order/js/main.mjs aus der Hoehe von
 *     nav.navbar gemessen. Alle klebenden Elemente rechnen damit.
 *   - #dialog-root ist selbst die Overlay-Flaeche: der Aussenklick-Schliesser prueft
 *     event.target === dialogRoot. Deshalb wird die Abdunkelung auf #dialog-root
 *     gelegt und NICHT auf ein zusaetzliches Backdrop-Element.
 */

/* =====================================================================================
   0. GRUNDGERUEST
===================================================================================== */

body {
  background-color: var(--ck-bg);
  font-family: var(--ck-font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ck-ink);
}

/* Der Kopfbereich bleibt dunkel.
   Die urspruengliche Begruendung ("das einzige vorhandene Logo ist ein weisses PNG")
   gilt nicht mehr: die Marke steht jetzt als Wortmarke im Markup (.ck-wordmark) und
   koennte in jeder Farbe gesetzt werden. Dunkel bleibt trotzdem - jetzt aus einem
   inhaltlichen Grund: dieser Kopfbereich ist auf ALLEN Seiten derselbe, und auf der
   Startseite sitzt er ueber einem dunklen Buehnenbild. Eine helle Leiste haette dort
   eine harte Kante gegen das Bild gesetzt. */
header {
  background-color: var(--ck-ink);
  min-height: var(--order-header-h, 92px);
}

/* Kompakterer Kopfbereich auf der Bestellstrecke: mehr Platz fuer den eigentlichen
   Menueinhalt, ohne Wortmarke/Navigation zu verkleinern. Das Theme setzt
   `header .navbar { padding: 20px 0; }` fest (style.css) - hier auf dieser einen
   Seite verkleinert, weil --order-header-h zur Laufzeit exakt aus der gemessenen
   Navbar-Hoehe berechnet wird (main.mjs): eine kleinere Navbar ergibt automatisch
   einen kleineren gemessenen Wert, keine zusaetzliche Anpassung an anderer Stelle
   noetig. */
header .navbar {
  padding: 12px 0;
}

/* Feine Abschlusskante statt harter Farbkante zum Inhalt. */
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

#order-root {
  min-height: 70vh;
}

.order-section {
  padding-top: var(--ck-8);
  padding-bottom: var(--ck-20);
}

/* Schrittwechsel: kurz, weich, nach oben. Lange Uebergaenge wirken bei einem
   Bestellvorgang traege, weil der Nutzer bereits weiss, was er als Naechstes will. */
#step-order-type,
#step-plz,
#step-location,
#step-menu,
#step-checkout,
#step-payment,
#step-confirm {
  animation: order-step-in var(--ck-dur-3) var(--ck-ease);
}

@keyframes order-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.order-step-title {
  font-family: var(--ck-font-ui);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-6);
}

/* =====================================================================================
   1. STATUSLEISTE (ui/header.mjs)
   Zeigt Bestellart und Liefergebiet unter dem Kopfbereich. Sie ist die Antwort auf
   "wo bin ich und was habe ich gewaehlt" und muss deshalb ruhig sein, nicht laut.
===================================================================================== */
.order-header:empty {
  display: none;
}

.order-header {
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-line-soft);
  padding: var(--ck-3) 0;
}

.order-header__row {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--ck-5);
  display: flex;
  align-items: center;
  gap: var(--ck-3);
}

.order-header__identity {
  display: flex;
  align-items: center;
  gap: var(--ck-2);
  min-width: 0;
  flex: 1;
}

/* Das Haekchen kommt aus dem JS als Textzeichen. Als gefuellter Kreis gelesen wirkt
   es wie ein Statussymbol und nicht wie ein Satzzeichen. */
.order-header__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-success);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.order-header__type {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
  white-space: nowrap;
}

.order-header__zone {
  font-size: 14px;
  color: var(--ck-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-header__zone::before {
  content: "·";
  margin: 0 6px 0 2px;
  color: var(--ck-ink-4);
}

.order-header__change {
  flex: 0 0 auto;
  background: var(--ck-surface-3);
  border: 1px solid transparent;
  border-radius: var(--ck-r-pill);
  color: var(--ck-ink-2);
  font-family: var(--ck-font-ui);
  font-size: 14px;
  font-weight: 590;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), color var(--ck-dur-1) var(--ck-ease-out);
}
.order-header__change:hover {
  background: var(--ck-brand-soft);
  color: var(--ck-brand);
}

.order-header__info {
  max-width: 1240px;
  margin: var(--ck-2) auto 0;
  padding: 0 var(--ck-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-1) var(--ck-3);
}

.order-header__info-item {
  font-size: 13px;
  color: var(--ck-ink-3);
  display: inline-flex;
  align-items: center;
}
.order-header__info-item + .order-header__info-item::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ck-ink-4);
  margin-right: var(--ck-3);
}
/* Kostenlose Lieferung ist ein Verkaufsargument - sie darf als solches aussehen. */
.order-header__info-item--free {
  color: var(--ck-success);
  font-weight: 590;
}

/* =====================================================================================
   2. BESTELLART - DER EINSTIEG (ui/orderTypeStep.mjs)

   Das ist der erste Bildschirm der Bestellstrecke und entscheidet, ob jemand
   ueberhaupt weitergeht. Er hat deshalb genau eine Aufgabe: zwei grosse, eindeutige
   Antippflaechen und sonst nichts, was ablenkt.
===================================================================================== */
.order-type-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Der Einstieg fuellt den sichtbaren Bereich. Vorher endete der Inhalt nach etwa
     einem Drittel der Hoehe und darunter stand eine leere Flaeche - das laesst eine
     Seite unfertig aussehen, gerade auf dem ersten Bildschirm. */
  min-height: calc(100vh - var(--order-header-h, 92px));
  padding: clamp(var(--ck-10), 7vw, var(--ck-20)) var(--ck-5);
  text-align: center;
  /* Sehr weicher Markenschimmer von oben. Er gibt dem Einstieg Tiefe, ohne eine
     Flaeche einzufaerben - eine vollflaechig rote Sektion waere genau die "billige,
     grelle" Optik, die vermieden werden soll. */
  background:
    radial-gradient(1100px 420px at 50% -140px, var(--ck-brand-soft) 0%, rgba(253, 242, 241, 0) 70%),
    var(--ck-bg);
}

.order-type-screen__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 var(--ck-4);
  padding: 7px 14px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface);
  border: 1px solid var(--ck-brand-border);
  color: var(--ck-brand-ink);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: var(--ck-tracking-normal);
  box-shadow: var(--ck-shadow-xs);
}
/* Kleiner Punkt als Live-Signal - dasselbe Motiv, das Apps fuer "geoeffnet" nutzen. */
.order-type-screen__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ck-success);
  box-shadow: 0 0 0 3px var(--ck-success-soft);
}

.order-type-screen__title {
  font-family: var(--ck-font-ui);
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-3);
}

.order-type-screen__subtitle {
  max-width: 46ch;
  margin: 0 auto var(--ck-10);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ck-ink-2);
}

.order-type-cards {
  display: grid;
  gap: var(--ck-4);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .order-type-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--ck-5);
  }
  /* Beide Karten reservieren zwei Untertitelzeilen, damit "Abholung" und "Lieferung"
     auf derselben Grundlinie stehen. Ohne das rutscht die Karte mit dem laengeren
     Untertitel nach oben und die beiden Titel liegen sichtbar versetzt - genau die
     Art Unruhe, an der ein Raster unsauber wirkt. */
  .order-type-card__subtitle {
    min-height: 2.8em;
  }
}

.order-type-card {
  display: flex;
  align-items: center;
  gap: var(--ck-4);
  width: 100%;
  min-height: 104px;
  padding: var(--ck-5);
  text-align: left;
  background: var(--ck-surface);
  border: 1.5px solid var(--ck-line-soft);
  border-radius: var(--ck-r-xl);
  box-shadow: var(--ck-shadow-sm);
  cursor: pointer;
  transition: border-color var(--ck-dur-2) var(--ck-ease-out),
    box-shadow var(--ck-dur-2) var(--ck-ease-out),
    transform var(--ck-dur-2) var(--ck-ease-out),
    background-color var(--ck-dur-2) var(--ck-ease-out);
}
.order-type-card:hover {
  border-color: var(--ck-brand-border);
  box-shadow: var(--ck-shadow-md);
  transform: translateY(-2px);
}
.order-type-card:active {
  transform: translateY(0) scale(0.99);
}

/* Gewaehlt: Markenrahmen plus getoente Flaeche. Der Zustand kommt aus aria-pressed,
   das das JS setzt - es gibt keine zusaetzliche Klasse dafuer. */
.order-type-card[aria-pressed="true"] {
  border-color: var(--ck-brand);
  background: var(--ck-brand-soft);
  box-shadow: 0 0 0 4px var(--ck-brand-soft-2), var(--ck-shadow-sm);
}

/* Icon in einer abgerundeten Flaeche - das App-Icon-Motiv von iOS. */
.order-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: var(--ck-r-lg);
  background: var(--ck-brand-soft);
  color: var(--ck-brand);
  font-size: 24px;
  transition: background-color var(--ck-dur-2) var(--ck-ease-out), color var(--ck-dur-2) var(--ck-ease-out);
}
.order-type-card[aria-pressed="true"] .order-type-card__icon {
  background: var(--ck-brand);
  color: #fff;
}

.order-type-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.order-type-card__label {
  font-size: 19px;
  font-weight: 660;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
}

.order-type-card__subtitle {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ck-ink-3);
}

.order-type-card__chevron {
  flex: 0 0 auto;
  color: var(--ck-ink-4);
  font-size: 20px;
  transition: transform var(--ck-dur-2) var(--ck-ease-out), color var(--ck-dur-2) var(--ck-ease-out);
}
.order-type-card:hover .order-type-card__chevron {
  color: var(--ck-brand);
  transform: translateX(3px);
}

.order-type-screen__trust {
  margin: var(--ck-8) auto 0;
  max-width: 52ch;
  font-size: 14px;
  color: var(--ck-ink-3);
}

/* =====================================================================================
   3. POSTLEITZAHL (Markup in index.html, Logik in main.mjs)
===================================================================================== */
.plz-step__title {
  font-family: var(--ck-font-ui);
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-8);
}

.plz-step__field {
  text-align: left;
  margin-bottom: var(--ck-4);
}

.plz-step__label {
  display: block;
  margin-bottom: var(--ck-2);
  font-size: 14px;
  font-weight: 590;
  color: var(--ck-ink-2);
}

#plz-input {
  /* Eine Postleitzahl ist eine kurze Zahl - grosse Ziffern mit Laufweite lesen sich
     wie ein Code-Feld und machen Tippfehler sichtbar. */
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  min-height: 62px;
  font-variant-numeric: tabular-nums;
}

.plz-step__submit {
  width: 100%;
}

.plz-result {
  margin-top: var(--ck-5);
  padding: var(--ck-4);
  border-radius: var(--ck-r-lg);
  text-align: left;
  font-size: 15px;
}
.plz-result:empty {
  display: none;
  padding: 0;
}
.plz-result--success {
  background: var(--ck-success-soft);
  border: 1px solid var(--ck-success-border);
  color: var(--ck-success);
}
.plz-result--info {
  background: var(--ck-warn-soft);
  border: 1px solid var(--ck-warn-border);
  color: var(--ck-warn);
}
.plz-result__line {
  display: block;
  font-weight: 590;
}
.plz-result__switch {
  margin-top: var(--ck-3);
  background: var(--ck-surface);
  border: 1px solid currentColor;
  border-radius: var(--ck-r-md);
  padding: 11px 18px;
  font-family: var(--ck-font-ui);
  font-size: 15px;
  font-weight: 590;
  color: inherit;
  cursor: pointer;
}
.plz-result__switch:hover {
  background: #fff;
}

.plz-candidates {
  display: grid;
  gap: var(--ck-2);
  margin-top: var(--ck-4);
}
.plz-candidate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--ck-4);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-md);
  text-align: left;
  font-family: var(--ck-font-ui);
  font-size: 16px;
  font-weight: 590;
  color: var(--ck-ink);
  cursor: pointer;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out), background-color var(--ck-dur-1) var(--ck-ease-out);
}
.plz-candidate:hover {
  border-color: var(--ck-brand);
  background: var(--ck-brand-soft);
}
.plz-candidate__meta {
  font-size: 13px;
  font-weight: 400;
  color: var(--ck-ink-3);
}

/* =====================================================================================
   4. MENUE: WERKZEUGLEISTE, RASTER, KLEBENDER WARENKORB
===================================================================================== */
.order-menu-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--ck-5);
}

.order-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-6);
  padding-top: var(--ck-6);
  /* Platz fuer die feste Warenkorbleiste am unteren Rand, damit die letzte
     Produktkarte nicht darunter verschwindet. */
  padding-bottom: calc(var(--ck-20) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .order-menu-grid {
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: var(--ck-8);
    align-items: start;
    padding-bottom: var(--ck-16);
    padding-top: var(--ck-8);
  }
}

/* Ohne diese Regel dehnt sich eine Grid-Spalte auf die Breite ihres Inhalts aus
   (CSS-Grid-Default min-width:auto fuer Kinder), nicht auf die per Template
   zugewiesene Breite. Die Kategorienleiste (#category-nav, overflow-x:auto) hat
   IMMER einen breiteren Eigeninhalt als der Viewport, weil alle Chips
   nebeneinander gerendert werden - ohne min-width:0 hier druckt genau dieser
   Inhalt die gesamte Spalte (und damit die Seite) horizontal auf, statt intern
   zu scrollen. Betraf alle Breiten unterhalb 1024px. */
.order-menu-main {
  min-width: 0;
}

/* --- Werkzeugleiste: Suche + Kategorien ------------------------------------
   Klebt unter dem Kopfbereich. Beim Durchscrollen einer langen Karte ist der
   Kategorienwechsel die haeufigste Handlung - er darf nicht weggescrollt sein. */
.order-menu-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(-1 * var(--ck-5));
  padding: var(--ck-3) var(--ck-5) var(--ck-2);
  background: rgba(246, 245, 242, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--ck-line-soft);
}
@media (min-width: 1024px) {
  .order-menu-toolbar {
    padding: var(--ck-5) var(--ck-5) var(--ck-4);
  }
}

.search-field__wrap {
  position: relative;
  display: block;
  margin-bottom: var(--ck-3);
}
@media (min-width: 1024px) {
  .search-field__wrap {
    margin-bottom: var(--ck-4);
  }
}
.search-field__icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--ck-ink-4);
  font-size: 17px;
  pointer-events: none;
}
#search-input {
  padding-left: 46px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface);
  min-height: 50px;
  border-color: var(--ck-line);
}
@media (min-width: 1024px) {
  #search-input {
    min-height: 52px;
    font-size: 15.5px;
  }
}
/* Das Browser-eigene Kreuz in type="search" passt nicht zum Feld. */
#search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

#category-nav {
  display: flex;
  gap: var(--ck-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Ausblenden am rechten Rand signalisiert "hier geht es weiter" ohne Pfeil. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  padding: 2px 28px 2px 0;
  scroll-padding-left: var(--ck-5);
}
#category-nav::-webkit-scrollbar {
  display: none;
}

.category-nav__chip {
  flex: 0 0 auto;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface);
  color: var(--ck-ink-2);
  font-family: var(--ck-font-ui);
  font-size: 15px;
  font-weight: 590;
  letter-spacing: var(--ck-tracking-snug);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--ck-shadow-xs);
  transition: background-color var(--ck-dur-1) var(--ck-ease-out),
    color var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.category-nav__chip:hover {
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-sm);
}
/* Aktiver Zustand in der Markenfarbe statt vollem Schwarz: eine iOS-Segment-
   Control markiert die aktive Auswahl typischerweise mit der Akzentfarbe, nicht
   mit der dunkelsten verfuegbaren Flaeche. Das wirkt weniger "schwer" als
   --ck-ink, bleibt aber eindeutig als aktiv erkennbar - derselbe Farbwert wie der
   Plus-Button und der Checkout-Button, damit "Aktion/Auswahl" eine durchgaengige
   Sprache in der ganzen Bestellstrecke bleibt. */
.category-nav__chip[aria-current="true"] {
  background: var(--ck-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ck-shadow-sm);
}

/* --- Warenkorbspalte (ab 1024 px) ------------------------------------------ */
.order-menu-cart {
  display: block;
}
@media (min-width: 1024px) {
  .order-menu-cart {
    position: sticky;
    /* Gemessene Navbar-Hoehe plus Luft - kein geschaetzter Pixelwert. */
    top: var(--ck-6);
  }
}

/* =====================================================================================
   5. PRODUKTKARTEN (ui/productCard.mjs)
===================================================================================== */
.menu-category {
  /* Das Theme gibt JEDEM <section> 90 px Innenabstand oben und unten
     (style.css section{padding:...}). Da eine Kategorie ein <section> ist, riss das
     eine Luecke von 180 px zwischen Werkzeugleiste und erster Ueberschrift. Der
     Reset muss hier stehen, nicht als Utility - sonst passiert es beim naechsten
     <section> wieder. */
  padding: 0;
  margin-top: var(--ck-8);
}
.menu-category:first-child {
  margin-top: var(--ck-5);
}
@media (min-width: 1024px) {
  .menu-category {
    margin-top: var(--ck-12);
  }
  .menu-category:first-child {
    margin-top: var(--ck-6);
  }
}

/* Food-Image-Pass: dezentes, rein dekoratives Kategorie-Stimmungsbild. Feste Hoehe
   (kein aspect-ratio auf dem Container selbst, weil <picture> zwei unterschiedliche
   Seitenverhaeltnisse bedient) reserviert den Platz unabhaengig vom Ladezustand des
   Bildes - kein Layout-Shift beim Nachladen. Deutlich niedriger als ein Hero: das
   soll ein Kategorie-Header sein, keine zweite Startseite. */
.menu-category__figure {
  margin: 0 0 var(--ck-4);
  border-radius: var(--ck-r-lg);
  overflow: hidden;
  background: var(--ck-surface-3);
  height: 120px;
}
.menu-category__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1024px) {
  .menu-category__figure {
    height: 180px;
    margin-bottom: var(--ck-5);
  }
}

.menu-category__title {
  font-family: var(--ck-font-ui);
  font-size: 22px;
  font-weight: 700;
  /* Explizite Zeilenhoehe: pizza-parlor.css setzt body{line-height:30px} als festen
     Pixelwert, den Ueberschriften erben - eine 22-px-Ueberschrift wurde dadurch
     55 px hoch. */
  line-height: 1.25;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-4);
  /* Sprungziel der Kategorienavigation: Abstand nach oben, damit die klebende
     Werkzeugleiste die Ueberschrift beim Ansprung nicht verdeckt. */
  scroll-margin-top: 128px;
}
@media (min-width: 1024px) {
  .menu-category__title {
    font-size: 24px;
    margin: 0 0 var(--ck-5);
  }
}

.menu-category__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-3);
}
@media (min-width: 640px) {
  .menu-category__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-4);
  }
}

.product-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ck-4);
  padding: var(--ck-4) var(--ck-4) var(--ck-4) var(--ck-5);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-soft);
  border-radius: var(--ck-r-lg);
  box-shadow: var(--ck-shadow-xs);
  /* Die Werkzeugleiste oben klebt und ist rund 124 px hoch. Ohne diesen Wert landet
     eine Karte, die per Tastatur angesprungen oder von der Suche angefahren wird,
     UNTER der Leiste und ist dann nicht anklickbar. Der Wert gilt fuer jede Art von
     Scroll-into-View, nicht nur fuer Sprunganker. */
  scroll-margin-top: 140px;
  transition: box-shadow var(--ck-dur-2) var(--ck-ease-out),
    border-color var(--ck-dur-2) var(--ck-ease-out),
    transform var(--ck-dur-2) var(--ck-ease-out);
}
@media (min-width: 1024px) {
  .product-card {
    padding: var(--ck-5) var(--ck-5) var(--ck-5) var(--ck-6);
  }
}
.product-card--clickable {
  cursor: pointer;
}
/* Dezenter als vorher: nur noch der Schatten wandert eine Stufe hoch, kein
   Hochheben mehr (translateY). Eine Karte, die sich beim Hovern nach oben
   verschiebt, verhaelt sich wie ein Button - bei einem ganzen Raster aus
   Karten wirkt das unruhig, sobald man mit der Maus darueberstreift. */
.product-card--clickable:hover {
  box-shadow: var(--ck-shadow-sm);
  border-color: var(--ck-line);
}
.product-card--clickable:active {
  transform: scale(0.997);
}

.product-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.product-card__name {
  font-family: var(--ck-font-ui);
  font-size: 17px;
  font-weight: 660;
  line-height: 1.3;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0;
}

.product-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ck-ink-3);
  /* Zwei Zeilen Beschreibung halten die Karten im Raster gleich hoch. Ein langer
     Text wuerde sonst eine Karte doppelt so hoch machen wie ihre Nachbarin, und
     genau daran wirkt ein Raster unruhig. Ab 1024 px sind die Karten durch das
     2-Spalten-Raster (statt 3) deutlich breiter, eine dritte Zeile passt dort
     ohne die Kartenhoehen im Raster auseinanderlaufen zu lassen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .product-card__desc {
    -webkit-line-clamp: 3;
  }
}

/* Eigene Zeile mit dezenter oberer Trennlinie statt "margin-top: auto" allein -
   der Preis ist die fuer eine Kaufentscheidung wichtigste Information auf der
   Karte und soll sich optisch von der Beschreibung abheben, nicht nur durch
   den freien Raum darueber. */
.product-card__price {
  margin-top: auto;
  padding-top: var(--ck-2);
  font-size: 16px;
  font-weight: 660;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
}

/* Der Plus-Knopf. Kreisform, Markenfarbe - deutlich ueber der Mindestgroesse fuer
   eine Antippflaeche und als Aktion sofort erkennbar, aber bewusst kleiner als
   vorher: bei 40 px mit vollem Schatten wirkte er staerker als der Produktname
   und der Preis daneben - eine sekundaere Aktion darf nicht louter sein als der
   Inhalt, den sie ergaenzt. */
.product-card__add {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ck-r-pill);
  background: var(--ck-brand);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(143, 23, 18, 0.2);
  transition: background-color var(--ck-dur-1) var(--ck-ease-out),
    transform var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.product-card__add:hover {
  background: var(--ck-brand-hover);
  box-shadow: 0 2px 8px rgba(143, 23, 18, 0.3);
}
.product-card__add:active {
  transform: scale(0.9);
}
.product-card__add:disabled {
  background: var(--ck-surface-3);
  color: var(--ck-ink-4);
  box-shadow: none;
  cursor: not-allowed;
}
/* Touch-Ziel auf Mobile bleibt bei mindestens 44x44 px (Anforderung), auch wenn
   der Button auf Desktop kleiner und damit unaufdringlicher ist - dort zaehlt
   Praezision mit der Maus, hier Antippbarkeit mit dem Finger. */
@media (max-width: 1023px) {
  .product-card__add {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* Ausverkauft: die Karte bleibt lesbar, wird aber sichtbar zurueckgenommen.
   Ausgrauen allein reicht nicht - der Preis wird durch das Wort "Ausverkauft"
   ersetzt (im JS), und die Karte verliert ihren Hover. */
.product-card--sold-out {
  background: var(--ck-surface-2);
  box-shadow: none;
}
.product-card--sold-out .product-card__name,
.product-card--sold-out .product-card__desc {
  color: var(--ck-ink-4);
}
.product-card--sold-out .product-card__price {
  color: var(--ck-ink-3);
  font-weight: 590;
}

/* =====================================================================================
   6. WARENKORB
   Dasselbe Panel dient als klebende Spalte (Desktop), Bottom Sheet (mobil) und
   Zusammenfassung im Checkout. Es darf deshalb keine der drei Rollen voraussetzen.
===================================================================================== */
.cart-panel__sheet {
  display: flex;
  flex-direction: column;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-soft);
  border-radius: var(--ck-r-lg);
  box-shadow: var(--ck-shadow-sm);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cart-panel__sheet {
    border-radius: var(--ck-r-xl);
  }
}

/* --- Leerer Zustand ------------------------------------------------------- */
.cart-panel__empty {
  padding: var(--ck-10) var(--ck-5);
  text-align: center;
}
/* Warenkorb-Symbol als Vektor. Vorher stand hier ein Emoji, das auf jeder
   Plattform anders gezeichnet wird und sich nicht einfaerben laesst. */
.cart-panel__empty-icon {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto var(--ck-4);
  border-radius: var(--ck-r-lg);
  background: var(--ck-surface-3) center / 24px 24px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385807a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
.cart-panel__empty-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 620;
  color: var(--ck-ink);
}
.cart-panel__empty-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--ck-ink-3);
}

/* --- Positionen ---------------------------------------------------------- */
/* Kopfzeile des Bottom Sheets - nur vorhanden, wenn cartPanel ein onDismiss bekam. */
.cart-panel__sheet-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-3);
  padding: var(--ck-4) var(--ck-5) var(--ck-3);
  border-bottom: 1px solid var(--ck-line-soft);
  flex: 0 0 auto;
}
.cart-panel__grabber {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 5px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-line);
}
.cart-panel__sheet-title {
  font-size: 17px;
  font-weight: 660;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
}
.cart-panel__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface-3);
  color: var(--ck-ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), color var(--ck-dur-1) var(--ck-ease-out);
}
.cart-panel__close:hover {
  background: var(--ck-line);
  color: var(--ck-ink);
}

.cart-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-panel__item {
  padding: var(--ck-4) var(--ck-5);
  border-bottom: 1px solid var(--ck-line-soft);
}
@media (min-width: 1024px) {
  .cart-panel__item {
    padding: var(--ck-5);
  }
}
.cart-panel__item:last-child {
  border-bottom: 0;
}

.cart-panel__item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-3);
}

.cart-panel__item-name {
  font-size: 15.5px;
  font-weight: 620;
  line-height: 1.35;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
  min-width: 0;
}

.cart-panel__line-total {
  flex: 0 0 auto;
  font-size: 15.5px;
  font-weight: 660;
  color: var(--ck-ink);
  white-space: nowrap;
}

.cart-panel__item-options {
  list-style: none;
  margin: var(--ck-2) 0 0;
  padding: 0 0 0 var(--ck-3);
  border-left: 2px solid var(--ck-line);
  display: grid;
  gap: 3px;
}
.cart-panel__option-line {
  display: flex;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.cart-panel__option-label {
  flex: 0 0 auto;
  color: var(--ck-ink-4);
}
.cart-panel__option-label::after {
  content: ":";
}
.cart-panel__option-value {
  color: var(--ck-ink-2);
}

/* Eine Kundennotiz ist eine Anweisung an die Kueche. Sie bekommt deshalb eine
   eigene, leicht getoente Flaeche statt als weitere graue Textzeile zu verschwinden. */
.cart-panel__item-note {
  display: block;
  margin-top: var(--ck-2);
  padding: 7px 10px;
  border-radius: var(--ck-r-xs);
  background: var(--ck-warn-soft);
  color: var(--ck-warn);
  font-size: 13px;
  line-height: 1.4;
}

.cart-panel__unavailable-hint {
  display: inline-block;
  margin-top: var(--ck-2);
  padding: 5px 10px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-danger-soft);
  border: 1px solid var(--ck-danger-border);
  color: var(--ck-danger);
  font-size: 12px;
  font-weight: 590;
}

.cart-panel__item--unavailable .cart-panel__item-name,
.cart-panel__item--unavailable .cart-panel__line-total {
  color: var(--ck-ink-4);
  text-decoration: line-through;
}

.cart-panel__item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-3);
  margin-top: var(--ck-3);
}

.cart-panel__item-unit {
  font-size: 13px;
  color: var(--ck-ink-3);
  font-variant-numeric: tabular-nums;
}

.cart-panel__item-actions {
  display: flex;
  gap: var(--ck-1);
}

.cart-panel__item-edit,
.cart-panel__item-remove {
  background: transparent;
  border: 0;
  border-radius: var(--ck-r-xs);
  /* Vertikales Padding auf ca. 40 px Gesamthoehe angehoben (Touch-Ziel), ohne die
     Schrift selbst zu vergroessern - die Buttons bleiben visuell sekundaer neben
     Produktname und Preis. */
  padding: 11px 12px;
  font-family: var(--ck-font-ui);
  font-size: 13.5px;
  font-weight: 590;
  cursor: pointer;
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), color var(--ck-dur-1) var(--ck-ease-out);
}
.cart-panel__item-edit {
  color: var(--ck-ink-2);
}
.cart-panel__item-edit:hover {
  background: var(--ck-surface-3);
  color: var(--ck-ink);
}
.cart-panel__item-remove {
  color: var(--ck-ink-3);
}
.cart-panel__item-remove:hover {
  background: var(--ck-danger-soft);
  color: var(--ck-danger);
}

/* --- Summen -------------------------------------------------------------- */
.cart-panel__totals {
  margin: 0;
  padding: var(--ck-4) var(--ck-5);
  border-top: 1px solid var(--ck-line-soft);
  background: var(--ck-surface-2);
  display: grid;
  gap: var(--ck-2);
}
@media (min-width: 1024px) {
  .cart-panel__totals {
    padding: var(--ck-5);
    gap: var(--ck-3);
  }
}

.cart-panel__totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ck-3);
}
.cart-panel__totals dt {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ck-ink-2);
}
.cart-panel__totals dd {
  margin: 0;
  font-size: 14px;
  font-weight: 590;
  color: var(--ck-ink);
  white-space: nowrap;
}

/* Ein Rabatt ist eine gute Nachricht. Gruen und mit Haekchen gelesen wirkt er als
   Gewinn; als weitere graue Zeile geht er unter. */
.cart-panel__discount-row dt,
.cart-panel__discount-row dd {
  color: var(--ck-success);
  font-weight: 590;
}
.cart-panel__discount-row dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-panel__discount-row dt::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ck-success) center / 9px 9px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  flex: 0 0 15px;
}

.cart-panel__total-row {
  margin-top: var(--ck-1);
  padding-top: var(--ck-3);
  border-top: 1px solid var(--ck-line);
}
.cart-panel__total-row dt {
  font-size: 16px;
  font-weight: 620;
  color: var(--ck-ink);
}
.cart-panel__total-row dd {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
}

.cart-panel__minimum-order,
.cart-panel__rejection {
  margin: 0;
  padding: var(--ck-3) var(--ck-5);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--ck-warn-soft);
  color: var(--ck-warn);
  border-top: 1px solid var(--ck-warn-border);
}

.cart-panel__checkout {
  margin: var(--ck-4) var(--ck-5) var(--ck-5);
  padding: 16px 22px;
  border: 0;
  border-radius: var(--ck-r-md);
  background: var(--ck-brand);
  color: #fff;
  font-family: var(--ck-font-ui);
  font-size: 16.5px;
  font-weight: 640;
  letter-spacing: var(--ck-tracking-snug);
  cursor: pointer;
  box-shadow: var(--ck-shadow-brand);
  transition: background-color var(--ck-dur-1) var(--ck-ease-out),
    transform var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.cart-panel__checkout:hover {
  background: var(--ck-brand-hover);
}
.cart-panel__checkout:active {
  transform: scale(0.985);
}
.cart-panel__checkout:disabled {
  background: var(--ck-surface-3);
  color: var(--ck-ink-4);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- Feste Warenkorbleiste (mobil) --------------------------------------- */
#cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--ck-3) var(--ck-4) calc(var(--ck-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--ck-line-soft);
}
#cart-bar[hidden] {
  display: none;
}
@media (min-width: 1024px) {
  /* Ab der Breite, ab der die klebende Spalte sichtbar ist, waere die Leiste eine
     zweite Darstellung derselben Information. */
  #cart-bar {
    display: none;
  }
}

.cart-bar__button {
  display: flex;
  align-items: center;
  gap: var(--ck-3);
  width: 100%;
  min-height: 54px;
  padding: 10px var(--ck-4);
  border: 0;
  border-radius: var(--ck-r-md);
  background: var(--ck-brand);
  color: #fff;
  font-family: var(--ck-font-ui);
  cursor: pointer;
  box-shadow: var(--ck-shadow-brand);
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), transform var(--ck-dur-1) var(--ck-ease-out);
}
.cart-bar__button:hover {
  background: var(--ck-brand-hover);
}
.cart-bar__button:active {
  transform: scale(0.99);
}

.cart-bar__count {
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--ck-r-pill);
  background: rgba(255, 255, 255, 0.22);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-bar__label {
  flex: 1;
  text-align: left;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: var(--ck-tracking-snug);
}

.cart-bar__total {
  flex: 0 0 auto;
  font-size: 16.5px;
  font-weight: 700;
}

/* --- Bottom Sheet des Warenkorbs (mobil) --------------------------------
   #cart-sheet liegt in der aside-Spalte und ist leer, solange das Sheet zu ist.
   `:empty` / `:not(:empty)` ist deshalb der Zustandstraeger - ohne zusaetzliche
   Klasse und ohne Aenderung am JavaScript.

   Bewusst OHNE :has() am Elternelement: faellt :has() aus (aeltere Browser), waere
   die Spalte weiterhin ausgeblendet und der Warenkorb auf dem Handy gar nicht
   erreichbar. So traegt das Element, das den Inhalt bekommt, den Zustand selbst -
   das kann nicht fehlschlagen. */
@media (max-width: 1023px) {
  /* Leer = nimmt keinen Platz. Die Spalte selbst bleibt im Fluss, damit das Raster
     unveraendert bleibt. */
  #cart-sheet:empty {
    display: none;
  }

  #cart-sheet:not(:empty) {
    position: fixed;
    inset: 0;
    /* Ueber nav.navbar (Theme: z-index 99) - sonst liegt der Kopfbereich auf dem
       Sheet und dessen Navigationspunkte bleiben anklickbar. */
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    background: rgba(23, 22, 26, 0.4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: cart-sheet-fade var(--ck-dur-2) var(--ck-ease-out);
  }
  #cart-sheet:not(:empty) .cart-panel__sheet {
    width: 100%;
    border-radius: var(--ck-r-2xl) var(--ck-r-2xl) 0 0;
    border-bottom: 0;
    max-height: 88vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: var(--ck-shadow-sheet);
    animation: cart-sheet-up var(--ck-dur-3) var(--ck-ease);
  }
  #cart-sheet:not(:empty) .cart-panel__list {
    max-height: 46vh;
  }
}

@keyframes cart-sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cart-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* =====================================================================================
   7. PRODUKTDIALOG - DER KONFIGURATOR (ui/productDialog.mjs)

   Die Flaeche, auf der die Rueckmeldung "wirkt kindlich/unsauber" am deutlichsten
   war. Ursache: Varianten und Extras waren nackte Buttons, die in einer Reihe
   umbrachen, mit Aufpreis in Klammern im Namen. Jetzt sind sie Listenzeilen bzw.
   Kacheln mit eigener Preisspalte und einem echten Auswahlzustand.
===================================================================================== */

/* #dialog-root ist selbst die Overlay-Flaeche - der Aussenklick-Schliesser im JS
   prueft event.target === dialogRoot. Ein zusaetzliches Backdrop-Element wuerde
   diesen Vergleich brechen.

   Z-INDEX 1200, NICHT 90: das Theme gibt nav.navbar z-index 99 (style.css). Mit einem
   niedrigeren Wert lag der Kopfbereich UEBER dem Dialog - er blieb voll sichtbar und
   anklickbar, sodass man mitten in der Produktkonfiguration auf "Startseite" klicken
   und die gesamte Auswahl verlieren konnte. Ein modaler Dialog, der die Navigation
   nicht abdeckt, ist nicht modal. */
#dialog-root:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(23, 22, 26, 0.44);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: dialog-fade var(--ck-dur-2) var(--ck-ease-out);
}
@keyframes dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.product-dialog {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}
.product-dialog--bottom-sheet {
  align-items: flex-end;
  justify-content: center;
}
.product-dialog--modal {
  align-items: center;
  justify-content: center;
  padding: var(--ck-6);
}

.product-dialog__panel {
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ck-surface);
  box-shadow: var(--ck-shadow-lg);
}
.product-dialog--bottom-sheet .product-dialog__panel {
  border-radius: var(--ck-r-2xl) var(--ck-r-2xl) 0 0;
  max-height: 93vh;
  animation: dialog-up var(--ck-dur-3) var(--ck-ease);
}
.product-dialog--modal .product-dialog__panel {
  border-radius: var(--ck-r-xl);
  max-width: 560px;
  max-height: 88vh;
  animation: dialog-pop var(--ck-dur-2) var(--ck-ease-out);
}
@keyframes dialog-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes dialog-pop {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ZWEITE ABSICHERUNG: auf schmalen Bildschirmen ist der Dialog IMMER ein Bottom Sheet,
   unabhaengig davon, welche Klasse das JavaScript gesetzt hat.
   Der Modus wird beim Oeffnen aus einer Pixelbreite abgeleitet; weicht diese von der
   Breite ab, mit der die Media-Queries rechnen, erscheint auf dem Telefon ein mittig
   schwebender Kasten statt eines Sheets - genau das war messbar der Fall. Eine
   Media-Query kann sich selbst nicht widersprechen, deshalb entscheidet hier das CSS
   und die Klasse ist nur noch Zusatzinformation. */
@media (max-width: 767px) {
  .product-dialog {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .product-dialog .product-dialog__panel {
    border-radius: var(--ck-r-2xl) var(--ck-r-2xl) 0 0;
    max-width: none;
    max-height: 93vh;
    animation: dialog-up var(--ck-dur-3) var(--ck-ease);
  }
}

.product-dialog__grabber {
  display: block;
  width: 38px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: var(--ck-r-pill);
  background: var(--ck-line);
  flex: 0 0 auto;
}

.product-dialog__close {
  position: absolute;
  top: var(--ck-3);
  right: var(--ck-3);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface-3);
  color: var(--ck-ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), color var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__close:hover {
  background: var(--ck-line);
  color: var(--ck-ink);
}

.product-dialog__content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ck-6) var(--ck-5) 0;
  /* overscroll-behavior verhindert, dass der Hintergrund weiterscrollt, sobald das
     Sheet oben oder unten anschlaegt - das ist der Unterschied zwischen "Sheet" und
     "Seite mit Kasten drauf". */
  overscroll-behavior: contain;
}

.product-dialog__title {
  font-family: var(--ck-font-ui);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 var(--ck-8) 0 0;
  padding-right: var(--ck-4);
}

.product-dialog__desc {
  margin: var(--ck-2) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-ink-3);
}

.product-dialog__section {
  margin-top: var(--ck-6);
}
.product-dialog__section-title,
.product-dialog__legend {
  font-family: var(--ck-font-ui);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-3);
  padding: 0;
  float: none;
  width: 100%;
}

.product-dialog__legend-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-3);
  width: 100%;
}
.product-dialog__legend-name {
  min-width: 0;
}
/* Die Auswahlregel als Marke rechts in der Zeile statt in Klammern hinter dem
   Namen: der Name bleibt Titel, die Regel wird als Regel lesbar. */
.product-dialog__legend-meta {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface-3);
  color: var(--ck-ink-3);
  font-size: 12px;
  font-weight: 590;
  font-variant-numeric: tabular-nums;
}
.product-dialog__legend-meta--required {
  background: var(--ck-brand-soft);
  color: var(--ck-brand-ink);
}

/* --- Varianten (Groessen) ------------------------------------------------- */
.product-dialog__variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--ck-2);
}

.product-dialog__variant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--ck-3) var(--ck-4);
  background: var(--ck-surface);
  border: 1.5px solid var(--ck-line);
  border-radius: var(--ck-r-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out),
    background-color var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__variant:hover {
  border-color: var(--ck-ink-4);
}
.product-dialog__variant[aria-pressed="true"] {
  border-color: var(--ck-brand);
  background: var(--ck-brand-soft);
  box-shadow: 0 0 0 3px var(--ck-brand-soft-2);
}
.product-dialog__variant-label {
  font-size: 15px;
  font-weight: 620;
  color: var(--ck-ink);
}
.product-dialog__variant-price {
  font-size: 13.5px;
  color: var(--ck-ink-3);
  font-variant-numeric: tabular-nums;
}
.product-dialog__variant[aria-pressed="true"] .product-dialog__variant-price {
  color: var(--ck-brand-ink);
}

/* --- Optionsgruppen (Extras, Menue-Wahlpositionen) ----------------------- */
.product-dialog__group {
  margin: var(--ck-6) 0 0;
  padding: 0;
  border: 0;
}

.product-dialog__group-hint {
  margin: 0 0 var(--ck-2);
  padding: 9px 12px;
  border-radius: var(--ck-r-xs);
  background: var(--ck-warn-soft);
  border: 1px solid var(--ck-warn-border);
  color: var(--ck-warn);
  font-size: 13px;
  font-weight: 500;
}

.product-dialog__options {
  display: grid;
  gap: var(--ck-2);
}

/* Eine Option ist eine Listenzeile, keine Schaltflaeche mit Text drin: Name links,
   Aufpreis rechts, Auswahlmarke ganz rechts. Dadurch stehen alle Aufpreise in einer
   Spalte und sind vergleichbar. */
.product-dialog__option {
  display: flex;
  align-items: center;
  gap: var(--ck-3);
  width: 100%;
  min-height: 52px;
  padding: var(--ck-3) var(--ck-4);
  background: var(--ck-surface);
  border: 1.5px solid var(--ck-line);
  border-radius: var(--ck-r-md);
  text-align: left;
  font-family: var(--ck-font-ui);
  cursor: pointer;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out),
    background-color var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__option:hover:not(:disabled) {
  border-color: var(--ck-ink-4);
}
.product-dialog__option[aria-pressed="true"] {
  border-color: var(--ck-brand);
  background: var(--ck-brand-soft);
  box-shadow: 0 0 0 3px var(--ck-brand-soft-2);
}
.product-dialog__option:disabled {
  background: var(--ck-surface-2);
  border-color: var(--ck-line-soft);
  color: var(--ck-ink-4);
  cursor: not-allowed;
}

.product-dialog__option-name {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--ck-ink);
}
.product-dialog__option:disabled .product-dialog__option-name {
  color: var(--ck-ink-4);
}

.product-dialog__option-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 590;
  color: var(--ck-ink-2);
  font-variant-numeric: tabular-nums;
}
.product-dialog__option[aria-pressed="true"] .product-dialog__option-price {
  color: var(--ck-brand-ink);
}

.product-dialog__option-note {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--ck-ink-4);
}

/* Auswahlmarke: leerer Ring, im gewaehlten Zustand gefuellt mit Haekchen.
   Sie ist die einzige Stelle, an der der Zustand ohne Farbvergleich erkennbar ist -
   wichtig fuer Rot-Gruen-Sehschwaeche, bei der Rahmenfarbe allein nicht reicht. */
.product-dialog__option::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: var(--ck-r-pill);
  border: 1.5px solid var(--ck-line);
  background: transparent center / 12px 12px no-repeat;
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), border-color var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__option[aria-pressed="true"]::after {
  border-color: var(--ck-brand);
  background-color: var(--ck-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.product-dialog__option:disabled::after {
  border-color: var(--ck-line-soft);
}

/* --- Menue-Wizard -------------------------------------------------------- */
.product-dialog__wizard-progress {
  display: flex;
  align-items: center;
  gap: var(--ck-3);
  margin: var(--ck-5) 0 0;
}
.product-dialog__wizard-dots {
  display: inline-flex;
  gap: 5px;
}
.product-dialog__wizard-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ck-line);
  transition: background-color var(--ck-dur-2) var(--ck-ease-out), width var(--ck-dur-2) var(--ck-ease-out);
}
.product-dialog__wizard-dot--done {
  background: var(--ck-brand-soft-2);
}
/* Der aktuelle Schritt wird zum Strich statt zum Punkt - dieselbe Sprache, die
   Seitenindikatoren in Apps benutzen. */
.product-dialog__wizard-dot--current {
  width: 20px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-brand);
}
.product-dialog__wizard-label {
  font-size: 13px;
  font-weight: 590;
  color: var(--ck-ink-3);
}

.product-dialog__wizard-nav {
  /* Klebt wie die Aktionsleiste. Ohne das lag "Weiter" bei einem Menue mit 12
     Pizzaoptionen unterhalb von 700 px Liste - man musste an jedem Schritt erst
     durch alle Optionen scrollen, um weiterzukommen. Das ist bei einem
     dreistufigen Menue-Assistenten der direkte Weg zum Abbruch. */
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--ck-2);
  margin: var(--ck-5) calc(-1 * var(--ck-5)) 0;
  padding: var(--ck-4) var(--ck-5) calc(var(--ck-4) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--ck-line-soft);
}
.product-dialog__wizard-back,
.product-dialog__wizard-next {
  flex: 1;
  min-height: 50px;
  padding: 13px 20px;
  border-radius: var(--ck-r-md);
  font-family: var(--ck-font-ui);
  font-size: 16px;
  font-weight: 620;
  cursor: pointer;
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), transform var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__wizard-back {
  flex: 0 0 auto;
  min-width: 110px;
  background: var(--ck-surface-3);
  border: 0;
  color: var(--ck-ink-2);
}
.product-dialog__wizard-back:hover {
  background: var(--ck-line);
}
.product-dialog__wizard-next {
  background: var(--ck-brand);
  border: 0;
  color: #fff;
  box-shadow: var(--ck-shadow-brand);
}
.product-dialog__wizard-next:hover {
  background: var(--ck-brand-hover);
}
.product-dialog__wizard-next:active {
  transform: scale(0.985);
}
.product-dialog__wizard-next:disabled {
  background: var(--ck-surface-3);
  color: var(--ck-ink-4);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- Menge ---------------------------------------------------------------- */
.product-dialog__quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-4);
  margin-top: var(--ck-6);
  padding: var(--ck-3) 0;
  border-top: 1px solid var(--ck-line-soft);
}
.product-dialog__quantity-label {
  font-size: 15px;
  font-weight: 620;
  color: var(--ck-ink);
}

/* Segmentierter Regler wie in iOS-Einstellungen: eine Flaeche, drei Felder. */
.product-dialog__stepper {
  display: inline-flex;
  align-items: center;
  background: var(--ck-surface-3);
  border-radius: var(--ck-r-pill);
  padding: 3px;
}
.product-dialog__qty-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ck-r-pill);
  background: var(--ck-surface);
  color: var(--ck-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ck-shadow-xs);
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), transform var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__qty-btn:hover:not(:disabled) {
  background: #fff;
}
.product-dialog__qty-btn:active:not(:disabled) {
  transform: scale(0.9);
}
.product-dialog__qty-btn:disabled {
  background: transparent;
  color: var(--ck-ink-4);
  box-shadow: none;
  cursor: not-allowed;
}
.product-dialog__qty-value {
  min-width: 44px;
  text-align: center;
  font-size: 17px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  color: var(--ck-ink);
}

/* --- Sonderwunsch -------------------------------------------------------- */
.product-dialog__note-field {
  margin-top: var(--ck-4);
}
.product-dialog__note-label {
  display: block;
  margin-bottom: var(--ck-2);
  font-size: 14px;
  font-weight: 590;
  color: var(--ck-ink-2);
}
.product-dialog__note {
  min-height: 76px;
  border-radius: var(--ck-r-md);
}

/* --- Klebende Aktionsleiste ---------------------------------------------
   Bleibt am unteren Rand des Scrollbereichs stehen. Bei einem Produkt mit vielen
   Extras stand der Abschluss vorher unerreichbar weit unten - Gesamtpreis und
   Abschluss sind jetzt immer sichtbar. */
.product-dialog__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--ck-4);
  /* Negative Seitenraender heben den Innenabstand von __content auf, damit die
     Leiste die volle Breite abdeckt und darunterliegender Text nicht durchscheint. */
  margin: var(--ck-5) calc(-1 * var(--ck-5)) 0;
  padding: var(--ck-4) var(--ck-5) calc(var(--ck-4) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--ck-line-soft);
}

.product-dialog__line-total {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 0 0 auto;
}
.product-dialog__line-total-label {
  font-size: 12px;
  color: var(--ck-ink-3);
}
.product-dialog__line-total-value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}

.product-dialog__submit {
  flex: 1;
  min-height: 52px;
  padding: 15px 22px;
  border: 0;
  border-radius: var(--ck-r-md);
  background: var(--ck-brand);
  color: #fff;
  font-family: var(--ck-font-ui);
  font-size: 16.5px;
  font-weight: 640;
  letter-spacing: var(--ck-tracking-snug);
  cursor: pointer;
  box-shadow: var(--ck-shadow-brand);
  transition: background-color var(--ck-dur-1) var(--ck-ease-out), transform var(--ck-dur-1) var(--ck-ease-out);
}
.product-dialog__submit:hover {
  background: var(--ck-brand-hover);
}
.product-dialog__submit:active {
  transform: scale(0.985);
}
.product-dialog__submit:disabled {
  background: var(--ck-surface-3);
  color: var(--ck-ink-4);
  box-shadow: none;
  cursor: not-allowed;
}

/* =====================================================================================
   8. CHECKOUT
===================================================================================== */
.order-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ck-6);
  padding-bottom: var(--ck-10);
}
@media (min-width: 1024px) {
  .order-checkout-grid {
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: var(--ck-8);
    align-items: start;
  }
  .order-checkout-summary {
    position: sticky;
    top: var(--ck-6);
  }
}

.order-form-card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-soft);
  border-radius: var(--ck-r-lg);
  box-shadow: var(--ck-shadow-xs);
  padding: var(--ck-5);
  margin-bottom: var(--ck-4);
}

.order-form-card h2 {
  font-family: var(--ck-font-ui);
  font-size: 17px;
  font-weight: 660;
  letter-spacing: var(--ck-tracking-snug);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-4);
  padding-bottom: var(--ck-3);
  border-bottom: 1px solid var(--ck-line-soft);
}

/* Das Markup ist `<label>Name <input …></label>` - der Text steht als Textknoten VOR
   dem Feld. Als Blockelement mit Blockfeld darin ergibt das automatisch die
   Beschriftung ueber dem Feld, ohne das Markup zu aendern. */
.order-form-card label {
  display: block;
  margin-bottom: var(--ck-4);
  font-size: 14px;
  font-weight: 590;
  color: var(--ck-ink-2);
}
.order-form-card label:last-child {
  margin-bottom: 0;
}
.order-form-card label input,
.order-form-card label select,
.order-form-card label textarea {
  display: block;
  width: 100%;
  margin-top: var(--ck-2);
  font-weight: 400;
  color: var(--ck-ink);
}

.order-legal-note {
  margin: 0 0 var(--ck-4);
  padding: var(--ck-4);
  border-radius: var(--ck-r-md);
  background: var(--ck-surface-2);
  border: 1px solid var(--ck-line-soft);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ck-ink-3);
}
.order-legal-note a {
  color: var(--ck-ink-2);
  font-weight: 590;
  text-decoration: underline;
  text-decoration-color: var(--ck-line);
  text-underline-offset: 2px;
}
.order-legal-note a:hover {
  color: var(--ck-brand);
  text-decoration-color: currentColor;
}

#pickup-submit,
#delivery-submit {
  width: 100%;
}

/* --- Zusammenfassung im Checkout ----------------------------------------
   Dasselbe Panel dient hier als reine Uebersicht. Sein "Zum Checkout"-Knopf muss weg:
   auf dieser Seite ist der Checkout bereits erreicht, und `main.mjs` uebergibt dort
   bewusst KEIN onCheckout - der Knopf waere also ein sichtbarer Knopf ohne Wirkung.
   (Diese Regel gehoert zur Verdrahtung in main.mjs, siehe Kommentar dort.) */
#checkout-cart-summary .cart-panel__checkout,
#checkout-cart-summary .cart-panel__rejection {
  display: none;
}

/* --- Meldungen ----------------------------------------------------------- */
.checkout-pickup__field-error,
.checkout-delivery__field-error,
.checkout-pickup__pause-notice,
.checkout-delivery__pause-notice,
.checkout-delivery__not-served,
.checkout-delivery__zone-outdated,
.checkout-delivery__minimum-order {
  margin: 0 0 var(--ck-2);
  padding: 11px 14px;
  border-radius: var(--ck-r-md);
  font-size: 14px;
  line-height: 1.45;
  /* Randakzent links: laesst eine Meldung als Meldung lesen, auch wenn Marken- und
     Fehlerrot einander aehneln. */
  border: 1px solid var(--ck-danger-border);
  border-left: 3px solid var(--ck-danger);
  background: var(--ck-danger-soft);
  color: var(--ck-danger);
  font-weight: 500;
}
.checkout-pickup__pause-notice,
.checkout-delivery__pause-notice,
.checkout-delivery__minimum-order,
.checkout-delivery__zone-outdated {
  border-color: var(--ck-warn-border);
  border-left-color: var(--ck-warn);
  background: var(--ck-warn-soft);
  color: var(--ck-warn);
}

#delivery-message button,
#payment-message button {
  margin-top: var(--ck-2);
  padding: 11px 18px;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-md);
  background: var(--ck-surface);
  font-family: var(--ck-font-ui);
  font-size: 15px;
  font-weight: 590;
  color: var(--ck-ink);
  cursor: pointer;
}
#delivery-message button:hover,
#payment-message button:hover {
  border-color: var(--ck-brand);
  color: var(--ck-brand);
  background: var(--ck-brand-soft);
}

#delivery-candidates {
  display: grid;
  gap: var(--ck-2);
  margin-top: var(--ck-3);
}
.checkout-delivery__candidate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--ck-3) var(--ck-4);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-md);
  background: var(--ck-surface);
  text-align: left;
  font-family: var(--ck-font-ui);
  cursor: pointer;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out), background-color var(--ck-dur-1) var(--ck-ease-out);
}
.checkout-delivery__candidate:hover {
  border-color: var(--ck-brand);
  background: var(--ck-brand-soft);
}
.checkout-delivery__candidate-name {
  font-size: 15.5px;
  font-weight: 620;
  color: var(--ck-ink);
}
.checkout-delivery__candidate-meta {
  font-size: 13px;
  color: var(--ck-ink-3);
}

/* =====================================================================================
   9. ZAHLUNG (ui/paymentStep.mjs)
===================================================================================== */
#payment-methods {
  display: grid;
  gap: var(--ck-2);
  margin-bottom: var(--ck-5);
}

.payment-method-tile {
  display: flex;
  align-items: center;
  gap: var(--ck-4);
  width: 100%;
  min-height: 68px;
  padding: var(--ck-4);
  background: var(--ck-surface);
  border: 1.5px solid var(--ck-line);
  border-radius: var(--ck-r-lg);
  text-align: left;
  font-family: var(--ck-font-ui);
  cursor: pointer;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out),
    background-color var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.payment-method-tile:hover {
  border-color: var(--ck-ink-4);
}
.payment-method-tile[aria-pressed="true"] {
  border-color: var(--ck-brand);
  background: var(--ck-brand-soft);
  box-shadow: 0 0 0 3px var(--ck-brand-soft-2);
}

/* Auswahlpunkt als echter Radio-Ring. */
.payment-method-tile::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: var(--ck-r-pill);
  border: 1.5px solid var(--ck-line);
  background: transparent;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out), box-shadow var(--ck-dur-1) var(--ck-ease-out);
}
.payment-method-tile[aria-pressed="true"]::before {
  border-color: var(--ck-brand);
  /* Innenring aus einem Schatten - kein zusaetzliches Element noetig. */
  box-shadow: inset 0 0 0 5px var(--ck-brand);
}

.payment-method-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.payment-method-tile__label {
  font-size: 16px;
  font-weight: 620;
  color: var(--ck-ink);
}
.payment-method-tile__subtitle {
  font-size: 13.5px;
  color: var(--ck-ink-3);
}

.payment-step__message {
  margin: 0 0 var(--ck-3);
  padding: 12px 14px;
  border-radius: var(--ck-r-md);
  border: 1px solid var(--ck-danger-border);
  border-left: 3px solid var(--ck-danger);
  background: var(--ck-danger-soft);
  color: var(--ck-danger);
  font-size: 14px;
  font-weight: 500;
}

#payment-confirm {
  width: 100%;
}

/* =====================================================================================
   10. BESTAETIGUNG
   Der Moment, in dem Vertrauen entsteht oder verloren geht. Er braucht ein
   eindeutiges Erfolgssignal und die Bestellnummer als groesstes Element.
===================================================================================== */
#confirm-content {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--ck-6) 0 var(--ck-16);
  text-align: center;
}

#confirm-content h1,
#confirm-content h2 {
  font-family: var(--ck-font-ui);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  text-transform: none;
  margin: 0 0 var(--ck-3);
}

#confirm-content p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ck-ink-2);
  margin: 0 0 var(--ck-3);
}

/* Erfolgs-Haken vor der Ueberschrift, rein aus CSS - das JS liefert nur Text. */
#confirm-content::before {
  content: "";
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto var(--ck-5);
  border-radius: var(--ck-r-pill);
  background: var(--ck-success-soft) center / 32px 32px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a5f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 8px rgba(15, 138, 95, 0.06);
  animation: confirm-pop var(--ck-dur-3) var(--ck-ease-out);
}
@keyframes confirm-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Die Bestellnummer ist die Information, die der Gast am Telefon nennt oder an der
   Theke zeigt. Sie bekommt eine eigene Flaeche und Tabellenziffern. */
#confirm-content strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--ck-ink);
  font-variant-numeric: tabular-nums;
}

#confirm-content .btn {
  margin-top: var(--ck-5);
}

/* =====================================================================================
   11. HINWEISE (Toast)
===================================================================================== */
#notice-root {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Ueber der Warenkorbleiste, damit ein Hinweis sie nie verdeckt. */
  bottom: calc(var(--ck-20) + env(safe-area-inset-bottom, 0px));
  /* Hoechste Ebene der Bestellstrecke: ein Hinweis muss auch ueber einem geoeffneten
     Dialog lesbar sein. */
  z-index: 1300;
  display: grid;
  gap: var(--ck-2);
  width: max-content;
  max-width: calc(100vw - var(--ck-8));
  pointer-events: none;
}
#notice-root:empty {
  display: none;
}
#notice-root > * {
  padding: 12px 18px;
  border-radius: var(--ck-r-pill);
  background: rgba(23, 22, 26, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 14.5px;
  font-weight: 550;
  text-align: center;
  box-shadow: var(--ck-shadow-lg);
  animation: notice-in var(--ck-dur-3) var(--ck-ease);
}
@keyframes notice-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 1024px) {
  #notice-root {
    bottom: var(--ck-8);
  }
}

/* =====================================================================================
   12. KLEINE BILDSCHIRME
   Keine Verkleinerung des Bestehenden, sondern eigene Werte fuer eine Hand.
===================================================================================== */
@media (max-width: 767px) {
  .order-section {
    padding-top: var(--ck-6);
    /* Luft fuer die feste Warenkorbleiste. */
    padding-bottom: calc(var(--ck-20) + env(safe-area-inset-bottom, 0px));
  }

  .order-menu-shell,
  .order-header__row,
  .order-header__info {
    padding-left: var(--ck-4);
    padding-right: var(--ck-4);
  }

  .order-menu-toolbar {
    margin-left: calc(-1 * var(--ck-4));
    margin-right: calc(-1 * var(--ck-4));
    padding-left: var(--ck-4);
    padding-right: var(--ck-4);
  }

  .product-card {
    padding: var(--ck-4);
  }

  .order-form-card {
    padding: var(--ck-4);
  }

  .product-dialog__content {
    padding: var(--ck-5) var(--ck-4) 0;
  }
  .product-dialog__actions {
    margin-left: calc(-1 * var(--ck-4));
    margin-right: calc(-1 * var(--ck-4));
    padding-left: var(--ck-4);
    padding-right: var(--ck-4);
  }

  .cart-panel__item,
  .cart-panel__totals,
  .cart-panel__minimum-order,
  .cart-panel__rejection {
    padding-left: var(--ck-4);
    padding-right: var(--ck-4);
  }
  .cart-panel__checkout {
    margin-left: var(--ck-4);
    margin-right: var(--ck-4);
  }

  /* Auf kleinen Bildschirmen scrollt die Aktionsreihe im Konfigurator sonst
     horizontal, weil Preis und Button zusammen zu breit werden. */
  .product-dialog__actions {
    gap: var(--ck-3);
  }
  .product-dialog__line-total-value {
    font-size: 17px;
  }
}

/* Sehr schmale Geraete (iPhone SE): der Preis wandert unter den Button-Text. */
@media (max-width: 359px) {
  .product-dialog__submit {
    font-size: 15.5px;
    padding-left: var(--ck-3);
    padding-right: var(--ck-3);
  }
}