/* =====================================================================
   VILO Storefront — helles, white-label Bestell-Design (Stil großer Lieferplattformen)
   ---------------------------------------------------------------------
   Bewusst getrennt von _pattern.css (dem dunklen OS-Hausstil), weil die
   Storefront auf der EIGENEN Website des Betriebs eingebettet läuft.
   EIN Template für alle Betriebe — pro Restaurant über --brand gebrandet.

   Regeln (VILO-konform übertragen):
     · Volle Farben (kein rgba-Fill, keine Gradients — Tints via color-mix).
     · Keine Shadows → 1px-Border + Flächen-Wechsel als Elevation.
     · Keine Emojis → Inline-SVG-Food-Glyphs in Brand-Tint.
     · Deutsche UI, tabular-nums für Preise.
   ===================================================================== */

:root {
  /* FESTE FARBEN, KEINE WAHL (Vorgabe Betreiber 2026-10-21): ein Betrieb ändert die Farben nicht.
     CTA hell schwarz, dunkel weiss (--cta); EIN Akzent für Hervorhebungen — ein krebsartiges
     Orange-Rot (--brand), 4,7:1 mit weisser Schrift, 4,6:1 auf dem hellen Grund. */
  --brand:      #d2401c;
  --brand-ink:  var(--weiss);
  /* WARM, NICHT KÜHL (Vorgabe Betreiber 2026-10-21): die Flächen tragen einen leichten Gelbstich
     wie ein Speisekarten-Papier — Seite, Flächen und Kanten aus derselben Familie, die Schrift ein
     warmes Fast-Schwarz. Kontraste wie zuvor: --ink-2 hält 6:1, --ink-3 bleibt Nebensache. */
  --bg:         #fffdf8;
  --bg-2:       #f8f4ec;
  --bg-3:       #f0eadf;
  --card:       #fffdf8;
  --ink:        #1d1b17;
  --ink-2:      #5f5a52;
  --ink-3:      #8d877c;
  --line:       #ebe4d7;
  --line-2:     #ddd4c4;
  --ok:         #0e8a4f;
  /* Abholrabatt (Vorgabe Betreiber 2026-10-16: „rot auf weiss"). Volles Rot, 5,3:1 gegen Weiss —
     als Fläche der Plakette (weisse Schrift) und als Schrift des Neupreises gleich gut lesbar. */
  --sale:       #d1242f;
  --sale-ink:   #ffffff;
  /* Der Stern der Bewertung und das gewählte Symbol im Umschalter: ein warmes Orange. */
  --stern:      #e8700f;
  /* Weiss auf festen Signalflächen (Grün, Rot, Orange) und als Grund für Logos — in BEIDEN Modi. */
  --weiss:      #ffffff;
  /* Schrift auf --ink-Flächen (dunkle Knöpfe, aktive Kategorie): kehrt sich mit dem Modus um. */
  --invers:     var(--bg);
  /* Akzent für Bedienelemente (Häkchen, Auswahl, Fokus, Links, Mengen-Plakette): die Schriftfarbe —
     hell schwarz, dunkel weiss. Orange-Rot an einem Feld sah aus wie ein Fehler (Vorgabe Betreiber
     2026-10-21); es bleibt den Hervorhebungen (--brand: „Beliebt", Aktionen). */
  --brand-ui:     var(--ink);
  --brand-ui-ink: var(--invers);
  /* CTA: hell schwarz mit heller Schrift, dunkel weiss mit dunkler Schrift (s. Dunkel-Blöcke). */
  --cta:     var(--ink);
  --cta-ink: var(--invers);
  /* Das Titelbild ohne Foto: hell schwarz, dunkel eine dunkle Fläche (nicht das helle --ink). */
  --cover:   var(--ink);
  --fehler:     #c0362c;
  --fehler-bg:  #fdecea;
  --fehler-ink: #8a1c13;
  --link:       #2b6ef2;
  --warn-text:  #b45309;
  --warn-soft:  #fdf3e3;
  --warn-line:  #ecd9b4;
  --warn-ink:   #7a4d06;
  --warn-ink-2: color-mix(in srgb, var(--warn-ink) 85%, var(--bg));
  color-scheme: light;
  /* DUNKEL (Vorgabe Betreiber 2026-10-21): dieselbe warme Familie, nur dunkel. Die Werte stehen
     EINMAL hier; die zwei Schalter unten (Gerät / Wahl im Menü) setzen nur noch Verweise. */
  --dk-bg:      #1c1a16;
  --dk-bg-2:    #13120f;
  --dk-bg-3:    #2b2822;
  --dk-card:    #211f1a;
  --dk-ink:     #f4f0e8;
  --dk-ink-2:   #bfb8ab;
  --dk-ink-3:   #918a7e;
  --dk-line:    #35312a;
  --dk-line-2:  #47423a;
  --dk-fehler:  #ff8a7e;
  --dk-fehler-bg: #3b1915;
  --dk-fehler-ink: #ffb8ae;
  --dk-link:    #8fb2ff;
  --dk-warn:    #f2a65a;
  --dk-warn-soft: #33270f;
  --dk-warn-line: #5a4419;
  --dk-warn-ink: #f6d58e;
  --radius:     16px;
  --radius-sm:  12px;
  --radius-pill:999px;
  --maxw:       1080px;
  /* Die zwei klebenden Leisten oben: Kopf (Menü/Umschalter/Suche) und Kategorien (10 + 38 + 10 px
     plus Kante). Alles, was darunter klebt oder dorthin springt, rechnet mit DIESEN Werten — sonst
     schiebt sich der Warenkorb beim Scrollen unter die Kategorien (Befund Betreiber 2026-10-21). */
  --sf-kopf:    72px;
  --sf-cats:    59px;
  --sf-klebt:   calc(var(--sf-kopf) + var(--sf-cats));
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  /* abgeleitete Brand-Tints (solid, via color-mix) */
  --brand-soft:  color-mix(in srgb, var(--brand) 12%, var(--bg));   /* warm getönt, nicht auf Kaltweiss */
  --brand-soft2: color-mix(in srgb, var(--brand) 20%, var(--bg));
  --brand-tint:  color-mix(in srgb, var(--brand) 4%,  var(--bg-3));   /* Bildplatzhalter: warm-neutral, nicht rosa */
}

/* Dunkelmodus: automatisch nach dem Gerät, ausser der Gast hat im Menü „Hell" gewählt; „Dunkel"
   gilt immer. Gesetzt wird `data-theme` am <html> (applyTheme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dk-bg); --bg-2: var(--dk-bg-2); --bg-3: var(--dk-bg-3); --card: var(--dk-card);
    --ink: var(--dk-ink); --ink-2: var(--dk-ink-2); --ink-3: var(--dk-ink-3);
    --line: var(--dk-line); --line-2: var(--dk-line-2);
    --fehler: var(--dk-fehler); --fehler-bg: var(--dk-fehler-bg); --fehler-ink: var(--dk-fehler-ink);
    --link: var(--dk-link); --warn-text: var(--dk-warn);
    --warn-soft: var(--dk-warn-soft); --warn-line: var(--dk-warn-line);
    --warn-ink: var(--dk-warn-ink); --warn-ink-2: var(--dk-warn-ink);
    /* abgeleitete Tönungen neu rechnen — sie hängen an --bg */
    --brand-soft:  color-mix(in srgb, var(--brand) 22%, var(--bg));
    --brand-soft2: color-mix(in srgb, var(--brand) 32%, var(--bg));
    --brand-tint:  color-mix(in srgb, var(--brand) 5%, var(--bg-3));
    --cta: var(--weiss); --cta-ink: var(--dk-bg-2); --cover: var(--dk-bg-3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--dk-bg); --bg-2: var(--dk-bg-2); --bg-3: var(--dk-bg-3); --card: var(--dk-card);
  --ink: var(--dk-ink); --ink-2: var(--dk-ink-2); --ink-3: var(--dk-ink-3);
  --line: var(--dk-line); --line-2: var(--dk-line-2);
  --fehler: var(--dk-fehler); --fehler-bg: var(--dk-fehler-bg); --fehler-ink: var(--dk-fehler-ink);
  --link: var(--dk-link); --warn-text: var(--dk-warn);
  --warn-soft: var(--dk-warn-soft); --warn-line: var(--dk-warn-line);
  --warn-ink: var(--dk-warn-ink); --warn-ink-2: var(--dk-warn-ink);
  /* abgeleitete Tönungen neu rechnen — sie hängen an --bg */
  --brand-soft:  color-mix(in srgb, var(--brand) 22%, var(--bg));
  --brand-soft2: color-mix(in srgb, var(--brand) 32%, var(--bg));
  --brand-tint:  color-mix(in srgb, var(--brand) 5%, var(--bg-3));
  --cta: var(--weiss); --cta-ink: var(--dk-bg-2); --cover: var(--dk-bg-3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
svg { display: block; }
.tnum { font-variant-numeric: tabular-nums; }

/* ============ TOP BAR ============ */
/* Links das Menü, in der Mitte der Umschalter Liefern/Abholen mit Zeit, rechts die Suche
   (Vorgabe Betreiber 2026-10-21). Runde helle Knöpfe auf der warmen Leiste — Kante statt Schatten. */
.sf-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.sf-top__in {
  max-width: var(--maxw); margin: 0 auto;
  height: var(--sf-kopf); padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.sf-top__spacer { flex: 1; }
.sf-rund {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.sf-rund svg { width: 22px; height: 22px; }
.sf-kseg {
  flex: 1; min-width: 0; max-width: 440px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: var(--radius-pill); background: var(--bg-3);
}
.sf-kseg__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0;
  height: 50px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid transparent; color: var(--ink-2); text-align: left;
}
.sf-kseg__btn.is-active { background: var(--card); color: var(--ink); border-color: var(--line); }
.sf-kseg__ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-3); }
.sf-kseg__btn.is-active .sf-kseg__ic { color: var(--stern); }
.sf-kseg__ic svg { width: 100%; height: 100%; }
.sf-kseg__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sf-kseg__w { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.sf-kseg__w .sf-seg__rabatt { height: 18px; padding: 0 6px; font-size: 11px; }
.sf-kseg__eta { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
/* Das Zeichen des Betriebs (markeHtml): hochgeladenes Logo auf Weiss mit Kante, sonst grauer
   Platzhalter — „hier fehlt ein Logo", ausdrücklich nicht in der Markenfarbe. */
.sf-marke.sf-marke--bild { background: var(--weiss); border: 1px solid var(--line); overflow: hidden; padding: 0; }
.sf-marke.sf-marke--bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-marke.sf-marke--fehlt { background: var(--bg-3); color: var(--ink-3); }

/* Das Zeichen auf dem Titelbild, unten links: eine helle Kachel mit Kante. */
.sf-hero__logo {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  width: 84px; height: 84px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.sf-hero__logo svg { width: 46px; height: 46px; }
.sf-hero__logo.sf-marke--bild { padding: 6px; }
.sf-hero__logo.sf-marke--bild img { border-radius: 10px; }

/* ============ HERO ============ */
.sf-hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.sf-hero__band {
  max-width: var(--maxw); margin: 0 auto; padding: 20px;
}
.sf-hero__cover {
  height: 260px; border-radius: var(--radius); overflow: hidden;
  background: var(--cover); color: var(--invers);
  position: relative;
}
/* Ein hochgeladenes Titelbild füllt die Fläche; der Ausschnitt sitzt mittig. */
.sf-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-hero__cover-tag {
  position: absolute; right: 16px; bottom: 16px; max-width: calc(100% - 128px);
  font-weight: 700; font-size: 14px; line-height: 1.25;
  background: var(--card); color: var(--ink);
  padding: 9px 16px; border-radius: var(--radius-pill);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-hero__info { padding: 16px 4px 4px; }
.sf-hero__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; min-width: 0; }
/* Name links, „Über uns" als Pille rechts daneben — wie im Vorbild. */
.sf-hero__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sf-pille {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--bg-3); color: var(--ink); font-weight: 700; font-size: 15px;
}
.sf-pille svg { width: 20px; height: 20px; }
.sf-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.sf-hero__meta--2 { display: block; margin-top: 4px; }
.sf-hero__meta b { color: var(--ink); font-weight: 700; }
.sf-hero__meta b.sf-sale { color: var(--sale); }
.sf-hero__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
/* Bewertung unter dem Namen — nur mit Quelle (s. bewertungHtml). */
.sf-stars { display: inline-flex; align-items: center; gap: 5px; }
.sf-hero__meta .sf-stars b { color: var(--ink); font-weight: 800; }
.sf-stars__ic { width: 18px; height: 18px; color: var(--stern); }
.sf-stars__ic svg { width: 100%; height: 100%; }
#sfUeber .sf-acct-row__t, #sfUeber .sf-acct-row__s { white-space: normal; }
.sf-ueber__satz { color: var(--ink-2); font-size: 15px; margin: 0 0 6px; }

/* ============ Umschalter (Checkout) ============ */
.sf-seg { display: inline-flex; background: var(--bg-3); border-radius: var(--radius-pill); padding: 4px; }
.sf-seg__btn {
  height: 36px; padding: 0 20px; border-radius: var(--radius-pill);
  font-weight: 600; color: var(--ink-2);
}
.sf-seg__btn.is-active { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
/* Abholrabatt am Knopf „Abholen": eine rote Plakette mit weisser Schrift, in BEIDEN Zuständen
   des Knopfs gleich — sie wirbt gerade dann, wenn „Liefern" gewählt ist. */
.sf-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sf-seg__rabatt {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--sale); color: var(--sale-ink);
  font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
.sf-sale { color: var(--sale); }

/* ============ CATEGORY NAV (sticky) ============ */
.sf-cats { position: sticky; top: var(--sf-kopf); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.sf-cats__in {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 20px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.sf-cats__in::-webkit-scrollbar { display: none; }
.sf-cat {
  flex-shrink: 0; height: 38px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--bg-3); color: var(--ink-2); font-weight: 600; white-space: nowrap;
}
.sf-cat.is-active { background: var(--ink); color: var(--invers); }

/* ============ BODY: menu + cart ============ */
.sf-body {
  max-width: var(--maxw); margin: 0 auto; padding: 20px;
  display: grid; grid-template-columns: 1fr 348px; gap: 28px; align-items: start;
}
.sf-menu { min-width: 0; }
.sf-sec { margin-bottom: 30px; scroll-margin-top: calc(var(--sf-klebt) + 12px); }
.sf-sec__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }

/* dish rows */
.sf-dish {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 1fr 140px; gap: 16px; align-items: stretch;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.sf-sec .sf-dish:first-of-type { border-top: 0; }
.sf-dish:hover .sf-dish__name { color: var(--brand-ui); }
.sf-dish__body { min-width: 0; display: flex; flex-direction: column; }
.sf-dish__name { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
.sf-dish__desc {
  color: var(--ink-2); font-size: 14px; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-dish__price { margin-top: 8px; font-weight: 700; }   /* direkt unter dem Text — keine Lücke bis zur Bildunterkante */
.sf-dish__price s { color: var(--ink-3); font-weight: 500; margin-left: 8px; }
.sf-dish__price .sf-preis-neu { color: var(--sale); }
.sf-dish__media { position: relative; align-self: start; }   /* nur so hoch wie das Bild — Plus und Menge sitzen IM Bild, nicht unten in der Zeile */
.sf-dish__img {
  width: 140px; height: 140px; border-radius: var(--radius-sm);
  background: var(--brand-tint); color: var(--brand-ui);
  display: grid; place-items: center; border: 1px solid var(--line);
}
.sf-dish__img svg { width: 60px; height: 60px; }
.sf-dish__add {
  position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line-2);
  color: var(--ink); display: grid; place-items: center;
}
.sf-dish__add svg { width: 18px; height: 18px; }
.sf-dish__addqty {
  position: absolute; right: 8px; bottom: 8px; height: 36px; min-width: 36px;
  border-radius: var(--radius-pill); background: var(--brand-ui); color: var(--brand-ui-ink);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  font-weight: 800; font-size: 16px; line-height: 1;
}
.sf-tag {
  align-self: flex-start; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: var(--brand); color: var(--brand-ink);
}
.sf-tag--veg { background: var(--ok); color: var(--weiss); }

/* Gerichtsfoto: füllt seine Fläche (Zeile, Karussell-Karte, Sheet). Davor/dahinter liegen
   Plus, Menge und Rang — sie stehen im DOM nach dem Bild und damit darüber. */
.sf-dish__img { position: relative; overflow: hidden; }
.sf-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-tag--rang, .sf-tag--zusammen { background: var(--ok); color: var(--weiss); }

/* ============ Karussell „Beliebt" ============
   Handauswahl zuerst, dann die meistbestellten (Server). Fotokarten im Band, am Schreibtisch mit
   Pfeilen, auf dem Telefon zum Wischen. Keine Schatten: die Karte trägt 1px-Linie und Fläche. */
.sf-beliebt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sf-beliebt__kopf .sf-sec__title { margin-bottom: 0; }
.sf-beliebt__pfeile { display: flex; gap: 8px; flex-shrink: 0; }
.sf-beliebt__pfeil {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-3); color: var(--ink); display: grid; place-items: center;
}
.sf-beliebt__pfeil svg { width: 20px; height: 20px; }
.sf-beliebt__pfeil:disabled { background: var(--bg-2); color: var(--line-2); cursor: default; }
.sf-beliebt__pfeil:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sf-beliebt.is-passt .sf-beliebt__pfeile { display: none; }
.sf-beliebt__band {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3.2); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 2px;
}
.sf-beliebt__band::-webkit-scrollbar { display: none; }
.sf-bk { display: flex; flex-direction: column; min-width: 0; text-align: left; scroll-snap-align: start; }
.sf-bk__bild {
  position: relative; display: grid; place-items: center; aspect-ratio: 6 / 5; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--brand-tint); color: var(--brand-ui);
}
.sf-bk__bild > svg { width: 56px; height: 56px; }
.sf-bk__rang {
  position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 8px;
  background: var(--ok); color: var(--weiss); font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.sf-bk__name {
  margin-top: 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-bk:hover .sf-bk__name { color: var(--brand-ui); }
.sf-bk__preis { margin-top: 2px; color: var(--ink-2); font-size: 14.5px; }
.sf-bk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--radius); }
.sf-sheet__hero--foto { height: 240px; }
@media (hover: none) { .sf-beliebt__pfeile { display: none; } }

/* ============ „Passt dazu" (Gericht-Sheet und Warenkorb) ============
   Zeilen wie in der Karte, nur kleiner: Name, Preis der Standardwahl, ggf. „Oft zusammen bestellt"
   (grün wie der Rang: beides ist gemessen), rechts das Foto mit Plus bzw. Häkchen. Im Sheet ist die
   Zeile ein Häkchen (angehakt: Rahmen und Knopf in der Farbe des Betriebs), im Warenkorb ein Plus.
   Keine Schatten, keine Verläufe. */
.sf-dazu { margin-top: 22px; }
.sf-dazu__t { font-size: 17px; font-weight: 800; letter-spacing: -0.005em; margin-bottom: 4px; }
.sf-dz {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1fr 72px; gap: 14px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line); min-height: 44px;
}
.sf-dazu__t + .sf-dz { border-top: 0; }
.sf-dz__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-dz__name { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.sf-dz:hover .sf-dz__name { color: var(--brand-ui); }
.sf-dz__preis { color: var(--ink-2); font-size: 14px; }
.sf-dz__preis s { color: var(--ink-3); margin-left: 6px; }
.sf-dz__preis .sf-preis-neu { color: var(--sale); font-weight: 700; }
.sf-dz .sf-tag { margin: 3px 0 0; }
.sf-dz__bild {
  position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--brand-tint); color: var(--brand-ui); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.sf-dz__bild > svg { width: 36px; height: 36px; }
.sf-dz__knopf {
  position: absolute; right: 5px; bottom: 5px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line-2); color: var(--ink); display: grid; place-items: center;
}
.sf-dz__knopf svg { width: 15px; height: 15px; }
.sf-dz.is-on .sf-dz__bild { border-color: var(--brand-ui); }
.sf-dz.is-on .sf-dz__knopf { background: var(--brand-ui); border-color: var(--brand-ui); color: var(--brand-ui-ink); }
.sf-dz:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Im Warenkorb-Panel des Schreibtischs: eingerückt wie die Zeilen, Fotos so groß wie deren Symbol. */
.sf-cart__lines .sf-dazu { margin: 0; padding: 14px 18px 4px; }
.sf-cart__lines .sf-dz { grid-template-columns: 1fr 52px; gap: 12px; padding: 10px 0; }
.sf-cart__lines .sf-dz__bild { width: 52px; height: 52px; border-radius: 10px; }
.sf-cart__lines .sf-dz__bild > svg { width: 28px; height: 28px; }
.sf-cart__lines .sf-dz__knopf { width: 24px; height: 24px; right: 3px; bottom: 3px; }
.sf-cart__lines .sf-dz__name { font-size: 14px; }
.sf-cart__lines .sf-dz__preis { font-size: 13px; }
.sf-dazu--add { margin-bottom: 6px; }
/* Im Warenkorb-Sheet so weit eingerückt wie dessen Zeilen und Extras. */
#sfCartSheet .sf-dazu { padding: 0 18px; }

/* ============ CART PANEL (desktop) ============ */
.sf-cart {
  /* Klebt UNTER Kopf und Kategorien, nie dahinter — und passt in die verbleibende Höhe: wird sie
     knapp, schrumpft die Liste der Gerichte und scrollt, Kopf, Extras und „Zur Kasse" bleiben sichtbar. */
  position: sticky; top: calc(var(--sf-klebt) + 16px);
  max-height: calc(100vh - var(--sf-klebt) - 32px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.sf-cart > * { flex-shrink: 0; }
.sf-cart__head { padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.sf-cart__title { font-size: 18px; font-weight: 800; }
.sf-cart__sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.sf-cart > .sf-cart__lines { flex: 0 1 auto; min-height: 72px; }
.sf-cart__lines { max-height: 46vh; overflow-y: auto; scrollbar-width: none; }
.sf-cart__lines::-webkit-scrollbar { display: none; }
.sf-line { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sf-line__thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-tint); color: var(--brand-ui); border: 1px solid var(--line); display: grid; place-items: center; }
.sf-line__thumb svg { width: 26px; height: 26px; }
.sf-line__body { min-width: 0; }
.sf-line__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-line__opt { color: var(--ink-3); font-size: 12.5px; }
.sf-line__edit { color: var(--brand-ui); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.sf-line__price { font-weight: 700; font-size: 14px; }
.sf-cart__empty { padding: 34px 18px; text-align: center; color: var(--ink-3); }
.sf-cart__empty svg { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--line-2); }
.sf-cart__foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.sf-sumrow { display: flex; justify-content: space-between; padding: 3px 0; color: var(--ink-2); font-size: 14px; }
.sf-sumrow--total { color: var(--ink); font-weight: 800; font-size: 17px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.sf-sumrow.is-disc span { color: var(--ok); }
/* Nur für Vorlesehilfen (z. B. „statt" vor einem Streichpreis, den <s> allein nicht ansagt). */
.sf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sf-minhint { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ui); font-size: 13px; font-weight: 600; text-align: center; }

/* ============ STEPPER ============ */
.sf-step { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.sf-step__b { width: 30px; height: 30px; border-radius: 50%; color: var(--brand-ui); display: grid; place-items: center; }
.sf-step__b svg { width: 16px; height: 16px; }
.sf-step__n { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============ BUTTONS ============ */
.sf-btn {
  width: 100%; height: 52px; border-radius: var(--radius-sm);
  background: var(--cta); color: var(--cta-ink); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
}
.sf-btn > span { white-space: nowrap; }
.sf-btn:disabled { background: var(--bg-3); color: var(--ink-3); cursor: not-allowed; }
.sf-btn--dark { background: var(--cta); color: var(--cta-ink); }   /* CTA wie .sf-btn (früher Schwarz) */
.sf-btn--ghost { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); }
.sf-btn__amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.sf-btn--split { justify-content: space-between; padding: 0 20px; }
/* Streichpreis im Knopf (Gericht bei Abholung): leiser als der neue Betrag, volle Mischfarbe. */
.sf-btn__alt { margin-right: 8px; font-weight: 500; color: color-mix(in srgb, var(--cta-ink) 62%, var(--cta)); }
/* Auf dem Telefon reicht die Breite nicht für beide Beträge (der neue würde abgeschnitten) — der
   Streichpreis steht dort schon in der Karte, der Knopf trägt nur den Betrag, der gilt. */
@media (max-width: 480px) { .sf-btn__alt { display: none; } }

/* ============ MOBILE CART BAR ============ */
.sf-cartbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg);
  border-top: 1px solid var(--line);
}

/* ============ SHEET / MODAL ============ */
.sf-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, #0b0c0e 42%, transparent);
  display: flex; align-items: flex-end; justify-content: center;
}
.sf-scrim.is-center { align-items: center; }
.sf-sheet {
  width: 100%; max-width: 520px; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  background: var(--bg); border-radius: 20px 20px 0 0;
  scrollbar-width: none;
}
.sf-scrim.is-center .sf-sheet { border-radius: 20px; margin: 0 16px; }
/* Das Menü fährt von links ein (Schublade), die Suche hängt oben. */
.sf-scrim.is-links { justify-content: flex-start; align-items: stretch; }
.sf-scrim.is-links .sf-sheet { max-width: 360px; height: 100%; max-height: none; border-radius: 0 20px 20px 0; }
.sf-scrim.is-oben { align-items: flex-start; }
.sf-scrim.is-oben .sf-sheet { max-width: 640px; max-height: 86vh; max-height: 86dvh; border-radius: 0 0 20px 20px; }
.sf-menu-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sf-menu-kopf__logo { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-3); color: var(--ink); }
.sf-menu-kopf__logo svg { width: 26px; height: 26px; }
.sf-menu-kopf__t { flex: 1; min-width: 0; }
.sf-menu-kopf__t .sf-sheet__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-menu-kopf__s { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.sf-drawer a.sf-acct-nav { color: inherit; text-decoration: none; }
.sf-suche__bar { display: flex; align-items: center; gap: 10px; }
.sf-suche__feld {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-pill); background: var(--bg-3); color: var(--ink-3);
}
.sf-suche__ic svg { width: 20px; height: 20px; }
.sf-suche__feld input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--ink); }
.sf-suche__zu { font-weight: 700; color: var(--ink); padding: 0 4px; height: 44px; }
.sf-suche__liste { margin-top: 8px; }
.sf-suche__hint { padding: 22px 4px 10px; color: var(--ink-3); font-size: 14.5px; }
.sf-sheet::-webkit-scrollbar { display: none; }
.sf-sheet__hero {
  height: 180px; background: var(--brand-tint); color: var(--brand-ui);
  display: grid; place-items: center; position: relative;
}
.sf-sheet__hero svg { width: 90px; height: 90px; }
.sf-sheet__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center;
}
.sf-sheet__close svg { width: 18px; height: 18px; }
.sf-sheet__body { padding: 20px; }
.sf-sheet__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.sf-sheet__desc { color: var(--ink-2); margin-top: 8px; }
.sf-sheet__foot { position: sticky; bottom: 0; background: var(--bg); padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }

/* option groups */
.sf-optg { margin-top: 22px; }
.sf-optg__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sf-optg__title { font-weight: 700; }
.sf-optg__req { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg-3); padding: 2px 8px; border-radius: 6px; }
.sf-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.sf-opt__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; display: grid; place-items: center; }
.sf-opt.is-on .sf-opt__mark { border-color: var(--brand-ui); background: var(--brand-ui); }
.sf-opt.is-on .sf-opt__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-ui-ink); }
.sf-opt__name { flex: 1; }
.sf-opt__price { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ============ CHECKOUT ============ */
.sf-field { margin-bottom: 14px; }
.sf-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.sf-field input, .sf-field textarea, .sf-field select {
  width: 100%; min-height: 46px; padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); outline: none;
}
.sf-field input:focus, .sf-field textarea:focus { border-color: var(--brand-ui); }
.sf-field textarea { min-height: 74px; resize: vertical; }
.sf-field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-radios { display: flex; flex-direction: column; gap: 10px; }
.sf-radio { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; }
.sf-radio.is-on { border-color: var(--brand-ui); background: var(--brand-tint); }
.sf-radio__mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; display: grid; place-items: center; }
.sf-radio.is-on .sf-radio__mark { border-color: var(--brand-ui); }
.sf-radio.is-on .sf-radio__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.sf-radio__main { flex: 1; }
.sf-radio__name { font-weight: 600; }
.sf-radio__sub { font-size: 13px; color: var(--ink-3); }

/* ============ CONFIRM / STATUS ============ */
.sf-confirm { max-width: 560px; margin: 0 auto; padding: 40px 20px 80px; text-align: center; }
.sf-confirm__badge { width: 76px; height: 76px; border-radius: 50%; background: var(--ok); color: var(--weiss); display: grid; place-items: center; margin: 0 auto 20px; }
.sf-confirm__badge svg { width: 40px; height: 40px; }
.sf-confirm__title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.sf-confirm__sub { color: var(--ink-2); margin-top: 8px; }
.sf-confirm__card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 24px 0; }
/* „Restaurant anrufen" (Shop-Audit H3): die ganze Karte ist der tel:-Link, Nummer sichtbar für
   den Schreibtisch, an dem niemand auf „tel:" tippt. */
.sf-kontakt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--ink); text-decoration: none; min-height: 44px; }
.sf-kontakt:hover .sf-kontakt__t { text-decoration: underline; }
.sf-kontakt__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; flex-shrink: 0; }
.sf-kontakt__ic svg { width: 20px; height: 20px; }
.sf-kontakt__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-kontakt__t { font-weight: 700; }
.sf-kontakt__s { color: var(--ink-2); font-size: 13px; margin-top: 1px; }
.sf-kontakt__s .tnum { white-space: nowrap; }   /* die Nummer bricht nie in der Mitte um */
.sf-kontakt__chev { color: var(--ink-3); flex-shrink: 0; }
.sf-kontakt__chev svg { width: 20px; height: 20px; }
.sf-steps { display: flex; flex-direction: column; gap: 0; }
.sf-pstep { display: flex; gap: 14px; align-items: flex-start; }
.sf-pstep__rail { display: flex; flex-direction: column; align-items: center; }
.sf-pstep__dot { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-3); color: var(--ink-3); border: 2px solid var(--line-2); display: grid; place-items: center; flex-shrink: 0; }
.sf-pstep__dot svg { width: 14px; height: 14px; }
.sf-pstep__line { width: 2px; flex: 1; min-height: 26px; background: var(--line-2); }
.sf-pstep.is-done .sf-pstep__dot, .sf-pstep.is-active .sf-pstep__dot { background: var(--brand-ui); border-color: var(--brand-ui); color: var(--brand-ui-ink); }
.sf-pstep.is-done .sf-pstep__line { background: var(--brand); }
.sf-pstep__body { padding-bottom: 20px; }
.sf-pstep__name { font-weight: 700; }
.sf-pstep.is-idle .sf-pstep__name { color: var(--ink-3); }
.sf-pstep__hint { font-size: 13px; color: var(--ink-2); }

/* ============ FOOTER ============ */
.sf-foot { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 24px; }
.sf-foot__in { max-width: var(--maxw); margin: 0 auto; padding: 32px 20px 28px; color: var(--ink-3); font-size: 13px; }
.sf-foot__oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 40px; flex-wrap: wrap; padding-bottom: 22px; }
.sf-foot__betrieb { min-width: 0; }
.sf-foot__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.sf-foot__satz { margin-top: 4px; color: var(--ink-2); font-size: 14px; }
.sf-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-foot__links a, .sf-foot__links .sf-foot__link {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.sf-foot__links a:hover, .sf-foot__links .sf-foot__link:hover { border-color: var(--line-2); }
.sf-foot__unten { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.sf-foot__hint { color: var(--ink-2); font-size: 13px; }
.sf-foot__vilo { color: var(--ink-3); font-size: 13px; }
.sf-foot__vilo b { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
@media (max-width: 860px) {
  .sf-foot__in { padding: 28px 16px 24px; }
  .sf-foot__oben { flex-direction: column; gap: 18px; }
  .sf-foot__unten { flex-direction: column; align-items: flex-start; }
  /* Die Warenkorb-Leiste liegt fest unten — die Fusszeile endet über ihr, nicht darunter. */
  .sf-foot { margin-top: 0; }
  .sf-cartbar:not(:empty) ~ .sf-foot .sf-foot__in { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  /* Leerer Warenkorb: keine Leiste — sonst bliebe unten ein leerer Streifen stehen. */
  .sf-cartbar:empty { display: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .sf-body { grid-template-columns: 1fr; padding-bottom: 8px; }
  .sf-cart { display: none; }
  .sf-cartbar { display: block; }
  :root { --sf-kopf: 64px; }
  .sf-top__in { padding: 0 12px; gap: 8px; }
  .sf-rund { width: 44px; height: 44px; }
  .sf-kseg__btn { height: 46px; gap: 8px; padding: 0 8px; }
  .sf-kseg__w { font-size: 14px; }
  .sf-kseg__eta { font-size: 12.5px; }
  /* Schmal reicht die Breite nicht neben dem Wort: die Rabatt-Plakette sitzt an der Ecke des Knopfs. */
  .sf-kseg__btn { position: relative; }
  .sf-kseg__w .sf-seg__rabatt { position: absolute; top: -9px; right: 2px; }
  .sf-hero__band { padding: 16px; }
  .sf-hero__cover { height: auto; aspect-ratio: 2 / 1; }
  .sf-hero__logo { width: 64px; height: 64px; left: 12px; bottom: 12px; border-radius: 14px; }
  .sf-hero__logo svg { width: 36px; height: 36px; }
  .sf-hero__cover-tag { right: 12px; bottom: 12px; max-width: calc(100% - 100px); font-size: 13px; padding: 8px 13px; }
  .sf-hero__title { font-size: 26px; }
  .sf-pille { height: 40px; padding: 0 14px; font-size: 14px; }
  .sf-dish { grid-template-columns: 1fr 120px; }
  .sf-dish__img { width: 120px; height: 120px; }
  .sf-dish__img svg { width: 52px; height: 52px; }
  /* Das Band läuft bis an den Rand (die nächste Karte lugt an) und rastet am Inhaltsrand ein. */
  .sf-beliebt__band { grid-auto-columns: min(64%, 240px); margin: 0 -20px; padding: 0 20px 2px; scroll-padding-inline: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .sf-sheet { animation: sf-rise 240ms cubic-bezier(.2,.7,.2,1); }
  .sf-scrim.is-center .sf-sheet { animation: sf-pop 200ms cubic-bezier(.2,.7,.2,1); }
  @keyframes sf-rise { from { transform: translateY(24px); } to { transform: translateY(0); } }
  @keyframes sf-pop { from { transform: scale(.97); } to { transform: scale(1); } }
  /* Schließen (X / Tap außerhalb): Backdrop faden, Sheet sinkt ab (zentrierte Sheets schrumpfen). */
  .sf-scrim.is-closing { animation: sf-fade-out 200ms ease forwards; pointer-events: none; }
  .sf-scrim.is-closing .sf-sheet { animation: sf-sink 200ms cubic-bezier(.4,0,1,1) forwards; }
  .sf-scrim.is-center.is-closing .sf-sheet { animation: sf-shrink 200ms ease forwards; }
  .sf-scrim.is-links .sf-sheet { animation: sf-slide 240ms cubic-bezier(.2,.7,.2,1); }
  .sf-scrim.is-links.is-closing .sf-sheet { animation: sf-slide-out 200ms cubic-bezier(.4,0,1,1) forwards; }
  .sf-scrim.is-oben .sf-sheet { animation: sf-drop 220ms cubic-bezier(.2,.7,.2,1); }
  .sf-scrim.is-oben.is-closing .sf-sheet { animation: sf-lift 200ms ease forwards; }
  @keyframes sf-slide { from { transform: translateX(-32px); } to { transform: translateX(0); } }
  @keyframes sf-slide-out { to { transform: translateX(-32px); } }
  @keyframes sf-drop { from { transform: translateY(-20px); } to { transform: translateY(0); } }
  @keyframes sf-lift { to { transform: translateY(-20px); } }
  @keyframes sf-fade-out { to { opacity: 0; } }
  @keyframes sf-sink { to { transform: translateY(24px); } }
  @keyframes sf-shrink { to { transform: scale(.97); } }
}

/* ============ WARENKORB-EXTRAS ============ */
.sf-cart__extras { padding: 0 18px; }
.sf-cart-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); font-weight: 700; color: var(--ink); margin: 12px 0; }
.sf-cart-add svg { width: 18px; height: 18px; }
/* „Artikel hinzufügen" schließt nur das Warenkorb-Sheet (mobil), um zur Karte zurückzukehren.
   Im Desktop-/iPad-Seitenpanel (.sf-cart, >860px) ist die Karte daneben ohnehin offen → sinnlos, daher aus. */
.sf-cart .sf-cart-add { display: none; }
.sf-cutlery { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.sf-cutlery__ic { color: var(--ink-2); display: grid; place-items: center; }
.sf-cutlery__ic svg { width: 22px; height: 22px; }
.sf-cutlery__t { flex: 1; font-weight: 600; }
.sf-cbox { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; color: var(--brand-ui-ink); flex-shrink: 0; }
.sf-cbox.is-on { background: var(--brand-ui); border-color: var(--brand-ui); }
.sf-cbox svg { width: 15px; height: 15px; }
.sf-note { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; margin-bottom: 6px; border: 0; background: var(--bg-2); border-radius: var(--radius-sm); }
.sf-note__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sf-note__t { font-weight: 700; }
.sf-note__s { color: var(--ink-3); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-note__ic { color: var(--ink-3); }
.sf-note__ic svg { width: 20px; height: 20px; }

/* ============ CHECKOUT-WIZARD ============ */
.sf-co { max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.sf-co-top { position: sticky; top: 0; z-index: 20; background: var(--bg); display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sf-co-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.sf-co-back:hover { background: var(--bg-2); }
.sf-co-back svg { width: 22px; height: 22px; }
.sf-co-title { font-weight: 700; font-size: 16px; }
.sf-co-body { padding: 24px 20px 40px; flex: 1; }
.sf-co-review { padding-bottom: 130px; }
.sf-co-h { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 18px; }
.sf-co-input { width: 100%; height: 52px; padding: 0 16px; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 12px; outline: none; font-size: 16px; margin-bottom: 12px; }
.sf-co-input::placeholder { color: var(--ink-3); }
.sf-co-input:focus { border-color: var(--brand-ui); }
.sf-co-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-co-or { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 13px; margin: 16px 0; }
.sf-co-or::before, .sf-co-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sf-co-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: 12px; background: var(--bg-3); font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.sf-co-social:disabled { color: var(--ink-3); cursor: not-allowed; }
/* „Mit Google/Apple fortfahren" (Vorlage Betreiber 2026-10-21): die leisen grauen Knöpfe der
   Kasse mit dem Zeichen des Anbieters — Googles „G" in seinen Farben (Vorgabe von Google), Apples
   Apfel in Schriftfarbe. 52 px hoch wie jeder Knopf hier. Nach dem Tipp auf Google steht an der
   Stelle Googles EIGENER Knopf (fremder Rahmen, 40 px — Googles größte Stufe); sein Platz ist
   52 px hoch, damit nichts springt. Der Hinweis darunter sagt, was der Tipp auslöst. */
.sf-oidc__logo { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; }
.sf-oidc__logo svg { width: 20px; height: 20px; }
.sf-oidc__ziel { min-height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sf-oidc__sk { display: block; margin-bottom: 12px; }
.sf-oidc__tipp { color: var(--ink-2); font-size: 13px; line-height: 1.45; margin: -4px 0 12px; text-align: center; }
.sf-oidc__hinweis { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.sf-co-fine { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 16px 0 20px; }
.sf-co-p { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.sf-co-link { color: var(--link); text-decoration: underline; }
button.sf-co-link { display: inline; padding: 0; font-size: inherit; font-weight: inherit; }

.sf-co-seg { width: 100%; margin-bottom: 4px; }
.sf-co-seg .sf-seg__btn { flex: 1; }
.sf-co-row, .sf-co-rsum { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.sf-co-row__ic, .sf-co-card__ic { width: 26px; display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.sf-co-row__ic svg, .sf-co-card__ic svg { width: 24px; height: 24px; }
.sf-co-rsum__logo { width: 40px; height: 40px; border-radius: 9px; background: var(--brand-tint); color: var(--brand-ui); display: grid; place-items: center; flex-shrink: 0; }
.sf-co-rsum__logo svg { width: 22px; height: 22px; }
.sf-co-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-co-card__t { font-weight: 700; }
.sf-co-card__s { color: var(--ink-2); font-size: 13px; margin-top: 1px; }
.sf-co-chev { color: var(--ink-3); flex-shrink: 0; }
.sf-co-chev svg { width: 20px; height: 20px; }
.sf-co-chev.is-open { transform: rotate(90deg); }
.sf-co-sec { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 8px; }
.sf-co-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: var(--bg); }
.sf-co-card.is-on { border-color: var(--brand-ui); background: var(--brand-tint); }
.sf-co-card__right { font-weight: 700; color: var(--ink); flex-shrink: 0; }
.sf-co-card__right svg { width: 20px; height: 20px; }
.sf-co-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; display: grid; place-items: center; }
.sf-co-card.is-on .sf-co-radio { border-color: var(--brand-ui); }
.sf-co-card.is-on .sf-co-radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); }
.sf-co-items { padding: 4px 0 8px; }
.sf-co-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sf-co-item__o { color: var(--ink-3); }
.sf-co-promomsg { font-size: 13px; font-weight: 600; margin-top: 8px; }
.sf-co-promomsg.is-ok { color: var(--ok); }
.sf-co-promomsg.is-err { color: var(--fehler); }
.sf-co-costs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sf-co-costs .sf-sumrow { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink-2); font-size: 14px; }
.sf-co-costs .sf-sumrow.is-disc span { color: var(--ok); }
.sf-co-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; margin-top: 8px; color: var(--ink); }
.sf-co-vat { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; text-align: right; }
.sf-co-legal { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; margin-top: 18px; }
.sf-co-widerruf { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; margin: 0 0 10px; }
.sf-co-widerruf a, .sf-co-legal a, .sf-co-fine a { color: inherit; text-decoration: underline; }
.sf-co-foot { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }

@media (max-width: 560px) {
  .sf-co-grid2 { grid-template-columns: 1fr; }
}

/* ============ SKELETON (Ladezustand echter Shops — keine Demo-Karte aufblitzen) ============ */
/* Neutrale Shimmer-Blöcke in der exakten Store-Geometrie: kein fremder Name/Preis, kein Layout-Sprung. */
.sf-sk {
  display: block; border-radius: 8px; background: var(--bg-3);
  position: relative; overflow: hidden;
}
.sf-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 92%, var(--bg-3)), transparent);
  animation: sf-sk-shimmer 1.15s ease-in-out infinite;
}
@keyframes sf-sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sf-sk::after { animation: none; } .sf-sk--spaet { animation: none; opacity: 1; } }

.sf-sk--rund  { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.sf-sk--kseg  { flex: 1; max-width: 440px; height: 58px; margin: 0 auto; border-radius: var(--radius-pill); }
.sf-sk--cover { height: 260px; border-radius: var(--radius); }
.sf-sk--title { width: 58%; height: 30px; margin-top: 4px; border-radius: 10px; }
.sf-sk--meta  { width: 82%; height: 15px; margin-top: 12px; }
.sf-sk--chip  { flex-shrink: 0; width: 84px; height: 38px; border-radius: var(--radius-pill); }
.sf-sk--sec   { width: 180px; height: 22px; margin-bottom: 14px; }
.sf-sk-dish .sf-sk--line1 { width: 55%; height: 16px; }
.sf-sk-dish .sf-sk--line2 { width: 88%; height: 14px; margin-top: 8px; }
.sf-sk-dish .sf-sk--price { width: 64px; height: 15px; margin-top: auto; }
.sf-sk--img   { width: 140px; height: 140px; border-radius: var(--radius-sm); }

/* ============ Fehler beim Laden des echten Shops ============ */
/* #667 — „zurzeit geschlossen". Volle Farbe, kein Schatten, kein Emoji (VILO-Regeln). Der
   Hinweis steht ÜBER der Karte und nicht an ihrer Stelle: der Gast soll sehen, was es morgen
   gibt. Kein Rot — geschlossen ist kein Fehler, sondern eine Öffnungszeit. */
.sf-zu { background: var(--warn-soft); border-bottom: 1px solid var(--warn-line); }
.sf-zu__in { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sf-zu__title { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--warn-ink); }
.sf-zu__sub { font-size: 14px; color: var(--warn-ink-2); line-height: 1.5; }
.sf-loaderr { min-height: 70vh; display: grid; place-items: center; padding: 40px 20px; }
.sf-loaderr__box { max-width: 360px; text-align: center; }
.sf-loaderr__title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.sf-loaderr__sub { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; line-height: 1.5; }
.sf-loaderr__btn {
  margin-top: 18px; height: 46px; padding: 0 24px; border-radius: var(--radius-pill);
  background: var(--cta); color: var(--cta-ink); font-weight: 700;
}

/* Skeleton-Zeilen in Sheets (Konto → Bestellverlauf lädt frisch vom Server) */
.sf-sk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.sf-sk-row:first-child { border-top: 0; }
.sf-sk-row__body { flex: 1; min-width: 0; }
.sf-sk--rowname { width: 52%; height: 14px; }
.sf-sk--rowsub  { width: 32%; height: 12px; margin-top: 8px; }
.sf-sk--rowval  { width: 56px; height: 14px; flex-shrink: 0; }

/* Skeletons der Kasse (Code-Schritt · Übersicht · Bezahlfeld · Bestätigung). Höhen aus den echten
   Flächen: Feld 52 px (.sf-co-input), Knopf 52 px (.sf-btn), Überschrift 21 px/1.3 (.sf-co-h). */
.sf-sk--h     { width: 62%; height: 26px; margin-bottom: 18px; }
.sf-sk--p     { width: 92%; height: 15px; margin-bottom: 9px; }
.sf-sk--p2    { width: 58%; height: 15px; margin-bottom: 24px; }
.sf-sk--field { height: 52px; border-radius: 12px; margin-bottom: 12px; }
.sf-sk--btn   { height: 52px; border-radius: var(--radius-sm); }
.sf-sk--lbl   { width: 34%; height: 12px; margin-bottom: 8px; }
.sf-sk-corow  { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.sf-sk-corow__b { flex: 1; min-width: 0; }
.sf-sk--ic    { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.sf-sk--l1    { width: 56%; height: 15px; }
.sf-sk--l2    { width: 34%; height: 12px; margin-top: 7px; }
.sf-sk--cosec { width: 96px; height: 12px; margin: 22px 0 10px; }
.sf-sk-sum    { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.sf-sk--sumk  { width: 42%; height: 14px; }
.sf-sk--sumv  { width: 64px; height: 14px; }
.sf-sk-tabs   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sf-sk--tab   { height: 62px; border-radius: 10px; }
.sf-sk-grid2  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-sk--badge { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px; }
.sf-sk--ctitle { width: 70%; height: 28px; margin: 0 auto; border-radius: 10px; }
.sf-sk--csub  { width: 46%; height: 15px; margin: 12px auto 0; }
.sf-confirm .sf-confirm__card .sf-sk--l1 { width: 48%; }
/* Anmelde-Schritt (E-Mail-Feld, Knopf, „oder", Gast, Kleingedrucktes, Zahlungszeichen). */
.sf-sk-or     { display: flex; align-items: center; justify-content: center; margin: 16px 0; height: 15px; }
.sf-sk-or::before, .sf-sk-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sf-sk--or    { width: 34px; height: 13px; margin: 0 14px; }
.sf-sk--fine  { margin-top: 18px; }
.sf-sk-logos  { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.sf-sk--logo  { width: 50px; height: 24px; border-radius: 6px; }
/* Zeilen IN einer fertigen Fläche (Steuer, Liefergebiet, Aktion): der Platz ist sofort reserviert,
   sichtbar wird der Puls erst nach 150 ms — antwortet der Server schneller, blitzt nichts. */
.sf-sk--hint  { width: 64%; height: 13px; margin-top: 8px; }
.sf-sk--vat   { display: inline-block; width: 150px; height: 12px; vertical-align: middle; }
.sf-sk--spaet { opacity: 0; animation: sf-sk-ein .2s ease-out .15s forwards; }
@keyframes sf-sk-ein { to { opacity: 1; } }   /* ohne Bewegung: sofort sichtbar (Block oben bei .sf-sk) */

/* ============ Zahlungszeichen unter der Anmeldung (Apple Pay · Google Pay · Stripe) ============ */
/* Klein und ruhig: die Zeichen sagen, womit bezahlt wird, sie werben nicht. Volle Farben, kein Schatten. */
.sf-paylogos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sf-paylogos__l { width: 100%; text-align: center; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.sf-paylogo {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 24px; min-width: 50px; padding: 0 8px; border-radius: 6px;
  font-size: 12.5px; line-height: 1; letter-spacing: -0.01em;
}
.sf-paylogo b { font-weight: 600; }
.sf-paylogo svg { width: 13px; height: 13px; flex-shrink: 0; }
.sf-paylogo--apple  { background: #000; color: var(--weiss); }
.sf-paylogo--apple svg { margin-top: -2px; }
.sf-paylogo--google { background: var(--weiss); color: #3c4043; border: 1px solid #dadce0; gap: 3px; }
.sf-paylogo--stripe { background: #635bff; color: var(--weiss); }
.sf-paylogo--stripe b { font-weight: 800; font-size: 13px; letter-spacing: -0.03em; }

@media (max-width: 720px) {
  .sf-sk--cover { height: auto; aspect-ratio: 2 / 1; }
  .sf-sk--rund { width: 44px; height: 44px; }
  .sf-sk--kseg { height: 54px; }
  .sf-sk--img   { width: 120px; height: 120px; }
}

/* ============ ADRESS-SHEET (Autovervollständigung + Ortung) ============ */
.sf-addr__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sf-addr__title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.sf-addr__x { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.sf-addr__x svg { width: 16px; height: 16px; }
.sf-addr__field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); }
.sf-addr__field > svg { width: 20px; height: 20px; color: var(--ink-3); flex-shrink: 0; }
.sf-addr__field:focus-within { border-color: var(--brand-ui); }
.sf-addr__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--ink); }
.sf-addr__geo { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; height: 46px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-ui); font-weight: 600; }
.sf-addr__geo svg { width: 19px; height: 19px; }
.sf-addr__geo:disabled { opacity: .6; }
.sf-addr__msg { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--fehler); }
.sf-addr__list { margin-top: 8px; }
.sf-addr__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 4px; border-top: 1px solid var(--line); }
.sf-addr__row:first-child { border-top: 0; }
.sf-addr__row > svg:first-child { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.sf-addr__row-line { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); }
.sf-addr__row > svg:last-child { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.sf-addr__row:hover .sf-addr__row-line { color: var(--brand-ui); }
.sf-addr__empty { padding: 16px 4px; color: var(--ink-3); font-size: 14px; }
/* Pflicht-Hinweis des Adress-Anbieters (heute nur Google), leise unter den Vorschlägen. */
.sf-addr__quelle { padding: 8px 4px 0; text-align: right; color: var(--ink-3); font-size: 11.5px; }

/* Lieferhinweis-Sheet: Auswahl-Karten + Fahrer-Notiz */
.sf-co-cards { display: grid; gap: 10px; }
.sf-instr__note {
  width: 100%; min-height: 76px; margin-top: 8px; padding: 12px 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2);
  font: inherit; font-size: 16px; color: var(--ink); resize: vertical; outline: none;
}
.sf-instr__note:focus { border-color: var(--brand-ui); }

/* ============ KONTO-SHEET (Drill-down: Start · Profil · Adressen · Bestellungen) ============ */
/* Kopfleiste jeder (Unter-)Seite: Zurück-Pfeil (oder Platzhalter) + Titel + Schließen. */
.sf-acct-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sf-acct-bar__t { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-acct-back { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--bg-2); flex-shrink: 0; }
.sf-acct-back svg { width: 20px; height: 20px; }
.sf-acct-back--ph { background: transparent; pointer-events: none; }
/* Startseite: „Hallo {Vorname}!" + Avatar (klickbar → Name ändern). */
.sf-acct-hello { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 0 22px; }
.sf-acct-hello__h { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-acct-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-ui);
  display: grid; place-items: center; font-weight: 800; font-size: 21px;
}
.sf-acct-avatar svg { width: 26px; height: 26px; }
.sf-acct-avatar--btn { background: var(--brand); color: var(--brand-ink); cursor: pointer; }
/* Sektionslabel + tappbare Menüzeilen. */
.sf-acct-sec { font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 4px; }
.sf-acct-nav { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sf-acct-nav:last-of-type { border-bottom: 0; }
.sf-acct-nav__ic { width: 26px; display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.sf-acct-nav__ic svg { width: 23px; height: 23px; }
.sf-acct-nav__t { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; }
.sf-acct-nav__chev { color: var(--ink-3); flex-shrink: 0; }
.sf-acct-nav__chev svg { width: 18px; height: 18px; }
/* Profil-Formular: beschriftetes Feld; E-Mail (Login) nur lesbar. */
.sf-acct-field { display: block; margin-bottom: 14px; }
.sf-acct-field__l { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.sf-acct-ro { padding: 13px 15px; border-radius: var(--radius-sm); background: var(--bg-2); color: var(--ink-2); font-size: 15px; border: 1px solid var(--line); }
/* Deutschland-Flagge als runder Badge (drei Streifen) — im Menü-Icon und auf der Land-Seite. */
.sf-flag { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; }
.sf-flag i { display: block; flex: 1; }
/* Einstellungs-Zeile mit Schalter rechts. */
.sf-set-row { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.sf-set-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-set-row__t { font-weight: 700; font-size: 15.5px; }
.sf-set-row__s { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
/* iOS-artiger Schalter — „an" grün (marken-unabhängig, damit es nicht mit rot/storniert kollidiert). */
.sf-switch { width: 50px; height: 30px; border-radius: var(--radius-pill); background: var(--line-2); position: relative; flex-shrink: 0; transition: background .18s ease; }
.sf-switch.is-on { background: var(--ok); }
.sf-switch__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--weiss); transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.sf-switch.is-on .sf-switch__knob { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .sf-switch, .sf-switch__knob { transition: none; } }
/* Auswahl-Zeile (Land/Sprache) mit Häkchen rechts. */
.sf-set-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.sf-set-opt:last-of-type { border-bottom: 0; }
.sf-set-opt__t { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; }
.sf-set-opt__mk { color: var(--brand-ui); flex-shrink: 0; }
.sf-set-opt__mk svg { width: 20px; height: 20px; }
.sf-set-opt.is-on .sf-set-opt__t { color: var(--ink); }

.sf-acct-sechead { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 6px; }
.sf-acct-sechead__t { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.sf-acct-new {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--bg-3); color: var(--ink); font-weight: 600; font-size: 13.5px;
}
.sf-acct-new svg { width: 15px; height: 15px; }

.sf-acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.sf-acct-row:first-of-type { border-top: 0; }
.sf-acct-row__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--bg-3); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.sf-acct-row__ic svg { width: 19px; height: 19px; }
.sf-acct-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-acct-row__t { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-acct-row__s { color: var(--ink-3); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-acct-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.sf-acct-del { width: 34px; height: 34px; border-radius: 50%; color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.sf-acct-del svg { width: 17px; height: 17px; }
.sf-acct-del:hover { color: var(--fehler); background: var(--bg-3); }
.sf-acct-empty { padding: 14px 2px; color: var(--ink-3); font-size: 14px; }

/* Modus-Leiste: Adresse als tappbares Feld statt Inline-Input */

/* ============ BESTELLUNGEN: Übersichts-Karten (Konto-Vorschau + volle Liste) ============ */
.sf-ord-list { display: grid; gap: 14px; margin-top: 4px; }
.sf-ord { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.sf-ord__top { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px; cursor: pointer; }
.sf-ord__logo {
  width: 52px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-ui); display: grid; place-items: center;
}
.sf-ord__logo svg { width: 28px; height: 28px; }
.sf-ord__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-ord__shop { font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-ord__meta { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-ord__status { font-weight: 700; color: var(--ink-2); }
.sf-ord__status.is-live   { color: var(--brand-ui); }
.sf-ord__status.is-done   { color: var(--ok); }
.sf-ord__status.is-cancel { color: var(--fehler); }
.sf-ord__sum { font-size: 13.5px; color: var(--ink-2); }
.sf-ord__sum b { color: var(--ink); font-weight: 700; }
.sf-ord__chev { color: var(--ink-3); flex-shrink: 0; }
.sf-ord__chev svg { width: 18px; height: 18px; }
.sf-ord__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 14px; }
.sf-ord__btn { height: 44px; font-size: 14px; }
.sf-ord__empty { padding: 40px 18px; text-align: center; color: var(--ink-3); }
.sf-ord__empty svg { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--line-2); }
.sf-ord--sk .sf-ord__top { cursor: default; }
.sf-sk--rowic  { width: 52px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0; }
.sf-sk--rowbtn { height: 44px; border-radius: var(--radius-pill); }
.sf-ord--sk .sf-ord__id { gap: 8px; }

/* ============ BESTELL-DETAIL: Quittung ============ */
.sf-odt__head { padding: 4px 0 18px; }
.sf-odt__title { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.sf-odt__date { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.sf-odt__where { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.sf-odt__wic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-3); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.sf-odt__wic svg { width: 18px; height: 18px; }
.sf-odt__wtxt { min-width: 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.sf-odt__wtxt b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.sf-odt__receipt { margin: 16px 0; padding: 18px; }
.sf-odt__rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sf-odt__shop { font-weight: 800; font-size: 15px; }
.sf-odt__ref { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sf-odt__lines { display: grid; gap: 12px; }
.sf-odt__line { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: baseline; }
.sf-odt__q { color: var(--ink-2); font-weight: 700; }
.sf-odt__nm { min-width: 0; font-size: 14.5px; color: var(--ink); }
.sf-odt__opt { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.sf-odt__pr { font-weight: 700; color: var(--ink); }
.sf-odt__rule { height: 1px; background: var(--line); margin: 14px 0; }
.sf-odt__paid { margin-top: 12px; }

/* ============ Toast (z. B. „Zum Warenkorb hinzugefügt") ============ */
.sf-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 60; max-width: min(420px, calc(100vw - 32px));
  padding: 13px 20px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--invers); font-weight: 600; font-size: 14px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
}
.sf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .sf-toast { transition: opacity .2s ease; transform: translate(-50%, 0); } }

/* ============ Pilot (F2): Demo-Hinweis, Kennzeichen, Allergene, Fehler, Zahlung ============ */
/* Die Galerie zeigt einen erfundenen Betrieb — und sagt es, ohne zu schreien. */
.sf-demo { background: var(--ink); color: var(--invers); font-size: 13px; font-weight: 600; text-align: center; padding: 8px 16px; }
.sf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sf-tags .sf-tag { margin-bottom: 0; }
.sf-sheet__body > .sf-tags { margin-top: 12px; }
.sf-tag--hot { background: #c2410c; color: var(--weiss); }
.sf-tag--al { background: var(--bg-3); color: var(--ink); }
.sf-tag--warn { background: #b45309; color: var(--weiss); }
.sf-tag--muted { background: var(--bg-3); color: var(--ink-2); }
/* Allergene im Gericht-Sheet: beim Namen, als Liste. „Keine Angabe" ist ein eigener Satz. */
.sf-al { margin-top: 22px; }
.sf-al__t { font-weight: 700; margin-bottom: 8px; }
.sf-al__list { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-al__i { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg-3); color: var(--ink); }
.sf-al__none { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
/* Fehler stehen IN der Fläche, an der Stelle, wo sie zu beheben sind — kein window.alert mehr. */
.sf-err { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--fehler-bg); color: var(--fehler-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.sf-err > div + div { margin-top: 4px; }
.sf-err:focus { outline: 2px solid var(--fehler-ink); outline-offset: 2px; }
.sf-co-ferr { margin: -4px 0 12px; color: var(--fehler); font-size: 13px; font-weight: 600; }
.sf-co-row + .sf-co-ferr { margin-top: 6px; }
/* Stand der Verfolgung: der Zeitpunkt der letzten bestätigten Antwort. */
.sf-stand { margin-top: 12px; color: var(--ink-3); font-size: 12.5px; }
.sf-stand:empty { display: none; }
.sf-confirm__badge.is-cancel { background: var(--ink-2); }
/* Zahlung ausstehend / wird geprüft. */
.sf-pend__sum { margin: -12px 0 18px; color: var(--ink-2); font-size: 15px; }
.sf-pend__sum b { color: var(--ink); }
.sf-pend .sf-err { margin: 0 0 14px; }
.sf-pend__ask { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--bg-2); }
.sf-pend__ask .sf-co-p { margin-bottom: 12px; }
.sf-pend__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Fußzeile: das Impressum ist ein Knopf (öffnet das Sheet), Datenschutz und AGB echte Links. */
.sf-imp__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 14px; }
.sf-imp__links a { color: var(--ink-2); text-decoration: underline; }

/* ============ Aktion (Flyer-Aktionscode) ============
   Die Leiste unter Liefern/Abholen sagt nach dem Scan, was die Aktion ist — Text in `--ink`,
   die Marke nur als Fläche des Satz-Kästchens (dort trägt `--brand-ink` die Schrift, wie an
   jedem anderen Brand-Knopf). Was die Aktion an DIESEM Warenkorb spart, steht erst im Checkout,
   und zwar vom Server gerechnet. */
.sf-aktion { background: var(--bg); border-bottom: 1px solid var(--line); }
.sf-aktion__in {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sf-aktion__satz {
  flex: 0 0 auto; min-width: 58px; height: 40px; padding: 0 10px; border-radius: 10px;
  background: var(--brand); color: var(--brand-ink); display: grid; place-items: center;
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
}
.sf-aktion__txt { flex: 1 1 220px; min-width: 0; }
.sf-aktion__t { font-weight: 700; font-size: 15px; color: var(--ink); }
.sf-aktion__s { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.sf-aktion__btn {
  height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: var(--card); font-weight: 700;
}
.sf-aktion--hinweis .sf-aktion__t { font-weight: 600; color: var(--ink-2); }
.sf-aktion__x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.sf-aktion__x svg { width: 18px; height: 18px; }

.sf-co-aktion {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
}
.sf-co-aktion__main { flex: 1 1 auto; min-width: 0; }
.sf-co-aktion__t { font-weight: 700; font-size: 15px; color: var(--ink); }
.sf-co-aktion__s { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.sf-co-aktion__x { height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); font-weight: 600; font-size: 14px; }
.sf-co-aktion__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sf-co-aktion__acts .sf-co-promo__btn { height: 40px; }

/* ============ Der Gast sieht seinen Fahrer (Fahrer-App C7) ============
   Eine Karte wie die übrigen der Bestätigung (Rahmen, Radius, Tokens der Seite). Die Kartenfläche
   hat EINE feste Höhe — als Skeleton wie geladen —, damit nichts springt, wenn sie erscheint.
   Logo und Nutzungsbedingungen des Anbieters bleiben frei: nichts liegt über den Ecken. */
.sf-fahrt.is-leer { display: none; }
.sf-fahrt__kopf { display: flex; align-items: flex-start; gap: 12px; }
.sf-fahrt__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink); }
.sf-fahrt__ic svg { width: 22px; height: 22px; }
.sf-fahrt__txt { flex: 1 1 auto; min-width: 0; }
.sf-fahrt__titel { font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--ink); }
.sf-fahrt__zeile { color: var(--ink-2); font-size: 14px; line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.sf-fahrt__zeile b { color: var(--ink); }
.sf-fahrt__alt { color: var(--warn-text); font-weight: 600; }
.sf-fahrt__pille { flex: 0 0 auto; margin: 2px 0 0; }
/* „Live" trägt 12 px: Weiß auf --ok hielt 4,4 : 1 — dieses Grün hält 5,4 : 1. Ein Chip in vollen
   Farben (Regel Betreiber 2026-10-16: deckend, Schrift ≥ 4,5 : 1) — in der eigenen Palette der
   Storefront wie jede ihrer Plaketten (Kopf dieser Datei), nicht im Grün der OS-Fenster. Gepinnt
   durch mockups/tests/fahrer-chips-farben.test.js. */
.sf-tag--live { background: #0b7a45; color: #fff; }
/* „Karte ausblenden" — leise, als Textlink, aber ein volles Ziel (44 px). */
.sf-fahrt__weg {
  display: block; margin: 4px auto 0; min-height: 44px; padding: 0 12px;
  background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sf-sk--fahrt1 { width: 62%; height: 16px; margin-top: 3px; }
.sf-sk--fahrt2 { width: 44%; height: 13px; margin-top: 9px; }
.sf-fahrt__frage { margin-top: 16px; }
.sf-fahrt__hinweis { margin-top: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.45; text-align: center; }
.sf-fahrt__fehler { margin-top: 16px; color: var(--ink-2); font-size: 14px; }
.sf-fahrt__fehler .sf-btn { margin-top: 10px; }
.sf-fahrt__map { position: relative; margin-top: 16px; height: 240px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-3); }
.sf-fahrt__mapel { position: absolute; inset: 0; }
.sf-fahrt__mapsk { position: absolute; inset: 0; border-radius: 0; z-index: 1; }
.sf-nw { white-space: nowrap; }
/* Das Adressfeld im Titelbild (s. heroSuche): eine helle Leiste, breit mittig, schmal oben. */
/* Breit: über der Mitte des Bilds (Band-Innenabstand 20 px + halbe Bildhöhe 130 px). */
.sf-hero__band { position: relative; }
.sf-hsuche {
  position: absolute; z-index: 2; left: 50%; top: 150px; transform: translate(-50%, -50%);
  width: calc(100% - 48px); max-width: 600px; height: 68px; padding: 0 8px 0 22px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
/* justify-content: flex-end hält den Los-Knopf rechts, auch wenn die Leiste beim Aufklappen
   schmaler ist als ihr Inhalt (der Überhang geht nach links und wird abgeschnitten). */
.sf-hsuche { overflow: hidden; justify-content: flex-end; }
.sf-hsuche--feld { cursor: pointer; }
.sf-hsuche--feld:hover { border-color: var(--line-2); }
.sf-hsuche__ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); }
.sf-hsuche__ic svg { width: 100%; height: 100%; }
.sf-hsuche__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sf-hsuche__k { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sf-hsuche__a { font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-hsuche__a.is-ph { color: var(--ink-3); }
.sf-hsuche__los {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--cta); color: var(--cta-ink);
}
.sf-hsuche__los svg { width: 22px; height: 22px; }
.sf-hsuche:not(.sf-hsuche--feld) { padding-right: 22px; }
/* Mehrere Abholorte (s. abholorteListe): die Leiste trägt „n Standorte" und einen Pfeil, der
   beim Aufklappen nach unten zeigt; die Liste hängt darunter (breit über dem Bild, schmal im Fluss). */
.sf-hsuche__mehr { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sf-hsuche__chev { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink); margin-right: 8px; }
.sf-hsuche__chev svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .2s ease; }
.sf-hsuche.is-offen .sf-hsuche__chev svg { transform: rotate(-90deg); }
.sf-abholorte {
  position: absolute; z-index: 3; left: 50%; top: 192px; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 600px; max-height: 360px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 6px 0;
}
.sf-abholorte__liste { list-style: none; margin: 0; padding: 0; }
.sf-abholort { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 0; border-top: 1px solid var(--line); }
.sf-abholort:first-child { border-top: 0; }
.sf-abholort__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; color: inherit; text-decoration: none; }
a.sf-abholort__main:hover .sf-abholort__name { text-decoration: underline; }
.sf-abholort__name { font-weight: 700; font-size: 15px; color: var(--ink); }
.sf-abholort__hier { font-weight: 600; font-size: 12.5px; color: var(--ink-3); margin-left: 4px; white-space: nowrap; }
.sf-abholort__adr { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-abholort__neben { font-size: 13px; color: var(--ink-3); }
.sf-abholort__neben b { color: var(--ink); font-weight: 700; }
.sf-abholort__nav {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-3); color: var(--ink);
}
.sf-abholort__nav:hover { background: var(--line); }
.sf-abholort__nav svg { width: 19px; height: 19px; }
.sf-abholorte__fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 18px 8px; border-top: 1px solid var(--line); }
.sf-abholorte__hinweis { font-size: 13px; color: var(--ink-3); min-width: 0; }
.sf-abholorte__sort { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--bg-3); color: var(--ink); font-weight: 700; font-size: 14px; }
.sf-abholorte__sort svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .sf-abholorte { position: static; transform: none; width: 100%; max-width: none; max-height: none; margin: -4px 0 12px; }
  .sf-hsuche__mehr { display: none; }
}
/* Aufklappen beim ersten Zeigen: erst der runde Lupen-Knopf, dann die Leiste, dann ihr Text. */
@media (prefers-reduced-motion: no-preference) {
  .sf-hsuche.is-intro { animation: sf-hsuche-auf 560ms cubic-bezier(.2,.7,.2,1) 260ms both; }
  .sf-hsuche.is-intro .sf-hsuche__ic, .sf-hsuche.is-intro .sf-hsuche__txt { animation: sf-hsuche-text 280ms ease 700ms both; }
  @keyframes sf-hsuche-auf { from { width: 68px; } }
  @keyframes sf-hsuche-text { from { opacity: 0; } }
  /* Wechsel Lieferung ↔ Abholung: der neue Inhalt gleitet leicht ein. */
  .sf-hsuche.is-wechsel .sf-hsuche__ic, .sf-hsuche.is-wechsel .sf-hsuche__txt { animation: sf-hsuche-rein 300ms cubic-bezier(.2,.7,.2,1) both; }
  .sf-hsuche.is-wechsel .sf-hsuche__los { animation: sf-hsuche-los 300ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes sf-hsuche-rein { from { opacity: 0; transform: translateY(6px); } }
  @keyframes sf-hsuche-los { from { opacity: 0; transform: scale(.7); } }
}
.sf-sk--meta1 { display: inline-block; width: 230px; height: 16px; border-radius: 6px; }
.sf-sk--meta2 { display: inline-block; width: 140px; height: 16px; border-radius: 6px; }
@media (max-width: 860px) {
  /* Telefon: über dem Bild, volle Breite. */
  .sf-hsuche { position: static; transform: none; width: 100%; max-width: none; margin: 0 auto 12px; height: 56px; padding: 0 6px 0 16px; gap: 10px; }
  .sf-hsuche__los { width: 44px; height: 44px; }
  @keyframes sf-hsuche-auf { from { width: 56px; } }
  .sf-hsuche__los svg { width: 20px; height: 20px; }
  .sf-hsuche__k { font-size: 12px; }
  .sf-hsuche__a { font-size: 14px; }
}
/* Offene Abholort-Liste: der Kopfbereich liegt über der klebenden Kategorienleiste (z 30), sonst
   verdeckte sie den unteren Teil der Liste — nur solange offen, sonst schöbe er sich beim Scrollen darüber. */
.sf-hero.is-ueber { position: relative; z-index: 35; }
/* Zweite Zeile einer Wahl (Darstellung → „Automatisch"). */
.sf-set-opt__s { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
/* ============ Weg zum Laden (s. abholwegFlaeche) ============
   Die Karte füllt das Titelbild; darauf Glas-Karten im Stil „Liquid Glass" (glas.md): leicht
   durchscheinende Fläche, Kante statt Schatten, kein Weichzeichner, kein Verlauf. Unten bleibt ein
   Rand für Logo und Bedingungen des Kartenanbieters (_karte.js: „das Fenster legt nichts über die Ecken"). */
.sf-hero__cover--karte { background: var(--cover); }   /* dieselbe Höhe wie das Titelbild (260 px, schmal 2 : 1) */
.sf-hero__band.is-karte .sf-hsuche { top: 52px; }
.sf-aw__karte, .sf-aw__map { position: absolute; inset: 0; }
.sf-aw__map { width: 100%; height: 100%; }
.sf-aw__sk { position: absolute; inset: 0; border-radius: 0; }
.sf-aw__glas {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 34px;
  background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px;
}
.sf-hero__band:not(.is-karte) .sf-aw__glas { bottom: 34px; }
.sf-aw__kpis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 12px 4px; max-width: 420px; margin: 0 auto; }
.sf-aw__kpi { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 6px; min-width: 0; }
.sf-aw__kpi + .sf-aw__kpi { border-left: 1px solid var(--line); }
.sf-aw__kpi b { font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sf-aw__kpi span { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.sf-aw__frage { max-width: 440px; margin: 0 auto; }
.sf-aw__t { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.sf-aw__s { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sf-aw__knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sf-aw__spaeter, .sf-aw__los { height: 44px; padding: 0 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14.5px; }
.sf-aw__spaeter { background: var(--bg-3); color: var(--ink); }
.sf-aw__los { background: var(--cta); color: var(--cta-ink); }
.sf-aw__nav {
  position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--line);
}
.sf-aw__nav svg { width: 19px; height: 19px; }
@media (max-width: 860px) {
  .sf-aw__glas.sf-aw__kpis { bottom: 26px; }
  .sf-aw__glas { left: 10px; right: 10px; bottom: 30px; padding: 12px; border-radius: 18px; }
  .sf-aw__kpis { padding: 10px 0; }
  .sf-aw__kpi { padding: 0 4px; }
  .sf-aw__kpi b { font-size: 14.5px; }
  .sf-aw__kpi span { font-size: 11.5px; }
  .sf-aw__nav { top: 10px; right: 10px; }
}
/* Die gefundene Adresse oben neben dem Menü (s. kopfAdresse): breit in der Zeile, schmal darunter. */
.sf-kopf-adr {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 260px;
  height: 44px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); color: var(--ink);
  font-weight: 700; font-size: 15px;
}
.sf-kopf-adr:hover { background: var(--bg-3); }
.sf-kopf-adr__ic { width: 20px; height: 20px; flex-shrink: 0; }
.sf-kopf-adr__ic svg { width: 100%; height: 100%; }
.sf-kopf-adr__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-kopf-adr__chev { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-3); }
.sf-kopf-adr__chev svg { width: 100%; height: 100%; transform: rotate(90deg); }
.sf-top__adr-breit { display: flex; min-width: 0; flex-shrink: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sf-kopf-adr { animation: sf-adr-rein 320ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes sf-adr-rein { from { opacity: 0; transform: translateY(-6px); } }
  /* Die Leiste im Bild klappt weg: zurück zum Lupen-Knopf, dann aus. */
  .sf-hsuche.is-weg { animation: sf-hsuche-weg 420ms cubic-bezier(.4,0,.2,1) both; pointer-events: none; }
  @keyframes sf-hsuche-weg { 60% { opacity: 1; width: 68px; } to { opacity: 0; width: 68px; } }
}
.sf-hsuche.is-weg .sf-hsuche__ic, .sf-hsuche.is-weg .sf-hsuche__txt { opacity: 0; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .sf-hsuche.is-weg { display: none; } }
@media (max-width: 860px) {
  .sf-top__adr-breit { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    /* schmal steht die Leiste im Fluss: sie gibt ihre Höhe mit ab */
    @keyframes sf-hsuche-weg { 50% { opacity: 1; width: 56px; height: 56px; margin-bottom: 12px; } to { opacity: 0; width: 56px; height: 0; margin-bottom: 0; border-width: 0; } }
  }
}
/* „Details zur Lieferung/Abholung" (s. lieferdetailsSheet): Zeilen mit Symbol, Text, Pillenknopf. */
.sf-ld { margin: 4px 0 18px; }
.sf-ld__zeile { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.sf-ld__zeile + .sf-ld__zeile { border-top: 1px solid var(--line); margin-left: 38px; padding-left: 0; }
.sf-ld__zeile + .sf-ld__zeile .sf-ld__ic { margin-left: -38px; }
.sf-ld__ic { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink); }
.sf-ld__ic svg { width: 100%; height: 100%; }
.sf-ld__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-ld__t { font-size: 16px; font-weight: 600; color: var(--ink); }
.sf-ld__s { font-size: 14px; color: var(--ink-2); }
.sf-ld__knopf { height: 40px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--bg-3); color: var(--ink); font-weight: 700; font-size: 14.5px; flex-shrink: 0; }

/* ============ Vorbestellen: „Lieferung planen" (Vorbild Lieferplattform, 2026-10-21) ============
   Tage als Kacheln, darunter die Fenster als Radioliste, unten „Planen" (CTA) und „Abbrechen".
   Flächen und Schrift aus den Tokens oben (hell/dunkel von selbst), keine Schatten, keine Verläufe. */
.sf-ld__knoepfe { display: flex; gap: 8px; flex-shrink: 0; }
.sf-zu__vb { margin-top: 12px; align-self: flex-start; }
.sf-vb-tage { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 14px; margin: 0 -2px; scrollbar-width: none; }
.sf-vb-tage::-webkit-scrollbar { display: none; }
.sf-vb-tag {
  flex: 0 0 auto; min-width: 96px; min-height: 64px; padding: 10px 14px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  background: var(--bg-2); border: 2px solid var(--line); color: var(--ink); text-align: left;
}
.sf-vb-tag.is-on { border-color: var(--ink); background: var(--bg); }
.sf-vb-tag:disabled { background: var(--bg-3); border-color: var(--bg-3); color: var(--ink-3); cursor: not-allowed; }
.sf-vb-tag__o { font-size: 15px; font-weight: 700; }
.sf-vb-tag__u { font-size: 13.5px; color: var(--ink-2); }
.sf-vb-tag:disabled .sf-vb-tag__u { color: var(--ink-3); }
.sf-vb-liste { max-height: min(46vh, 380px); overflow-y: auto; margin: 0 0 14px; }
.sf-vb-fenster {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 600; text-align: left;
}
.sf-vb-fenster:last-child { border-bottom: 0; }
.sf-vb-fenster.is-on .sf-co-radio { border-color: var(--ink); }
.sf-vb-fenster.is-on .sf-co-radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.sf-vb__fuss { display: flex; flex-direction: column; gap: 10px; }
.sf-vb__ab { margin-top: 14px; }
.sf-vb__weg { margin: 0 0 14px; }