/* ═══════════════════════════════════════════════════════════════════════
   Booklera E-Commerce — Storefront (öffentlicher Shop)
   Block 2.1 + 2.2 + 2.2-Nachtrag (Light/Dark-Switch, 2026-07-05)
   ═══════════════════════════════════════════════════════════════════════
   Eigene CSS-Basis, getrennt von admin.css/tenant.css (eigenes Universum).

   Light = Basis (:root), Dark = Override ([data-theme="dark"]) — Umschalter
   im Header (Marco-Gate 2.2). Theme-Mechanik = Admin-Muster (data-theme auf
   <html>, localStorage booklera_theme, FOUC-Script im base.html-<head>).

   Shop-Marke: --sf-primary / --sf-akzent kommen im Template per Nonce-<style>
   aus ec_shop_settings (§14.1b, Default Logo-Palette). --sf-accent-text ist
   der modus-abhängige lesbare Akzent (Primär direkt in Light, aufgehellt in
   Dark). Prefix sf-* · Mobile-first · CSP-strict.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Fallback-Marke, falls ein Shop noch keine eigene Farbe gewählt hat —
       überschrieben vom nonce-<style> in base.html aus ec_shop_settings.
       Default = Marco-Marke 2026-07-14 (#0064FA Blau + #F2A93B Gold),
       konsistent zu DB-Spalten-Default (Migration 252) + Service-Konstanten. */
    --sf-primary: #0064FA;
    --sf-akzent: #F2A93B;
    --sf-success: #059669;

    /* Marken-Band (Header + Trust-Bar): tiefes Navy, aus der Shop-Primärfarbe
       abgeleitet — tenant-korrekt (jeder Shop bekommt sein eigenes dunkles
       Band, Default-Shop = Logo-Navy), modus-unabhängig. Gold = --sf-akzent. */
    --sf-marke-bg: color-mix(in srgb, var(--sf-primary) 45%, #0A1526);
    --sf-on-marke: #FFFFFF;

    /* ── Light (Basis) — R7 v7 „Clean & High-End" (Marco-Referenz-Palette
       2026-07-14): weiches Slate-Weiß als Grund, reinweiße Karten, tiefes
       Anthrazit für Text/Preise/Buttons, Emerald fürs Lager-Signal. ── */
    --sf-accent-text: var(--sf-primary);
    --sf-bg: #F8FAFC;
    --sf-bg-tief: #F1F5F9;
    --sf-flaeche: #FFFFFF;
    --sf-flaeche-2: #F8FAFC;
    /* Bild-in-Box-Prinzip: Fotos sind Freisteller auf Weiß — die Bild-Box
       bleibt in BEIDEN Modi reinweiß und sitzt abgerundet IN der Karte. */
    --sf-bild-bg: #FFFFFF;
    --sf-bild-icon: #9AA6B5;
    /* R7 v10: Info-Sockel der Karte = eigene, leicht kühl-getönte Fläche —
       hebt die untere Kartenhälfte vom weißen Bild-Bereich ab (Marco:
       „nicht nur ganz weiß, muss sich abheben"). */
    --sf-karte-body: color-mix(in srgb, var(--sf-primary) 6%, #EEF2F8);
    --sf-trust: #16294A;
    --sf-header-bg: #FFFFFF;
    --sf-text: #0F172A;
    --sf-text-muted: #64748B;
    --sf-border: #E2E8F0;
    --sf-border-hell: #E2E8F0;
    --sf-tint: color-mix(in srgb, var(--sf-primary) 6%, #FFFFFF);
    --sf-schatten: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    --sf-schatten-hover: 0 20px 40px -15px rgba(15, 23, 42, 0.15);
    /* Einheitliche Bewegungs-Kurve (R7 v8, Gemini-Mockup) */
    --sf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Lesbares Tenant-Gold für Text (R7 v9): auf Weiß abgedunkelt. */
    --sf-gold-text: color-mix(in srgb, var(--sf-akzent) 68%, #59430D);
    /* Aktions-Ton: Light = Anthrazit-Buttons/aktive Pills, Hover füllt mit
       der Tenant-Primärfarbe. Dark überschreibt beides. */
    --sf-btn: #0F172A;
    --sf-on-btn: #FFFFFF;
    --sf-preis: #0F172A;
    --sf-on-akzent: #2B1D04;
    /* Dunkles Auftritts-Band (Startseite + Footer) — im Light Anthrazit. */
    --sf-band-bg: #0F172A;
    /* Parallax-Orbs im Seiten-Hintergrund (R7 v8: solide Kreise + blur(120px)
       statt radial-gradient — erst dadurch werden sie sichtbar). */
    --sf-orb1: color-mix(in srgb, var(--sf-primary) 6%, transparent);
    --sf-orb2: color-mix(in srgb, var(--sf-akzent) 4%, transparent);
}

[data-theme="dark"] {
    /* R7 v8 „Premium Glow" (Gemini-Mockup 2026-07-14 abends): tiefes
       Blauschwarz, Slate-Karten mit sichtbarem Rahmen + tiefem Schatten,
       Preis/Buttons in HELL leuchtendem Akzent (25 % Primär statt 45 % —
       kommt Geminis plain #7DD3FC nahe, bleibt aber Tenant-Farben-fähig),
       Mint fürs Lager-Signal. */
    --sf-accent-text: color-mix(in srgb, var(--sf-primary) 25%, #7DD3FC);
    --sf-bg: #0B0F19;
    --sf-bg-tief: #070B12;
    --sf-flaeche: #111827;
    --sf-success: #10B981;
    --sf-flaeche-2: #1E293B;
    --sf-bild-bg: #FFFFFF;
    /* R7 v10: Info-Sockel dunkler Modus = ein Slate heller als die Karte
       (#111827) — so hebt sich die untere Kartenhälfte sichtbar ab. */
    --sf-karte-body: #1E293B;
    --sf-trust: #111827;
    --sf-header-bg: #111827;
    --sf-text: #F8FAFC;
    --sf-text-muted: #94A3B8;
    --sf-border: #1E293B;
    --sf-border-hell: #2D3748;
    --sf-tint: color-mix(in srgb, var(--sf-primary) 15%, #111827);
    --sf-gold-text: var(--sf-akzent);
    --sf-schatten: 0 15px 35px -10px rgba(0, 0, 0, 0.6);
    /* Hover: Lift-Schatten + Akzent-Glow (reiner Schwarz-Schatten wäre auf
       dem Blauschwarz-Grund unsichtbar — Gemini-Mockup-Lücke geschlossen). */
    --sf-schatten-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--sf-accent-text) 18%, transparent);
    --sf-btn: #1E293B;
    --sf-on-btn: var(--sf-accent-text);
    --sf-preis: var(--sf-accent-text);
    --sf-band-bg: #111827;
    --sf-orb1: color-mix(in srgb, var(--sf-primary) 15%, transparent);
    --sf-orb2: color-mix(in srgb, var(--sf-akzent) 8%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   D1 — Maß-, Typo- und Raster-Tokens (2026-08-12)
   ═══════════════════════════════════════════════════════════════════════
   Fundament der Storefront-Neugestaltung. Quelle: Claude-Design-Entwurf
   `_ecommerce/design/` (Spezifikation §4 Maße · §6 Schrift).

   REIN ADDITIV: kein bestehender Wert oben wird geändert, keine bestehende
   Regel umgeschrieben. Bis ein Baustein die Tokens benutzt, ändert sich
   optisch nichts — genau so gewollt.

   ── Namens-Abgleich Entwurf → Bestand (Recon 2026-08-12) ───────────────
   Der Entwurf schlug eigene Farb-Token-Namen vor. Der BESTAND GEWINNT,
   damit der Shop nicht zwei konkurrierende Farbsysteme bekommt:
       --sf-accent      → --sf-akzent
       --sf-surface     → --sf-flaeche
       --sf-surface2    → --sf-flaeche-2
       --sf-line        → --sf-border
       --sf-line-strong → --sf-border-hell   (nur Rahmen/Striche, nie Text)
       --sf-fg          → --sf-text
       --sf-muted       → --sf-text-muted
       --sf-bg / --sf-primary  → unverändert übernommen
   Ebenso bleibt die Hell/Dunkel-Mechanik beim Bestand: `data-theme` am
   <html> + FOUC-Script (der Entwurf wollte Klassen `sf-theme-*`) — das
   Attribut-Muster ist flackerfrei und deckungsgleich mit dem Admin.

   ── Stufenskala für Abstände (keine Zwischenwerte!) ────────────────────
   4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72 · 96
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Schrift ────────────────────────────────────────────────────────
       Vorerst Systemschrift (= heutiges Verhalten, keine Ladezeit, kein
       Drittanbieter). Der Entwurf sieht Archivo für Überschriften und
       IBM Plex Mono für Artikelnummern vor; die Umstellung ist dann ein
       Wechsel dieser zwei Zeilen — SELBST GEHOSTET, niemals über eine
       fremde Schriften-Adresse (Drittanbieter-Verbot + DSGVO: ein Abruf
       von Google überträgt die Besucher-IP in die USA). */
    --sf-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sf-font-display: var(--sf-font);
    --sf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── Maße (Rechner) ─────────────────────────────────────────────── */
    --sf-gutter: 40px;        /* Seitenrand aller Bänder                 */
    --sf-band-y: 80px;        /* vertikale Polsterung je Band            */
    --sf-block-gap: 40px;     /* Abstand zwischen Spalten                */
    --sf-card-pad: 18px;      /* Innenabstand Karte                      */
    --sf-max: 1240px;         /* Inhaltsbreite                           */
    --sf-tap: 44px;           /* Mindestgröße alles Bedienbaren          */
    --sf-radius: 10px;        /* Karten, Panels                          */
    --sf-radius-s: 8px;       /* Knöpfe, Eingabefelder                   */
    --sf-raster-gap: 12px;    /* einheitlich in allen Rastern            */
    --sf-karte-min: 210px;    /* Mindesthöhe Produktkarte, Bild 4:3      */

    /* ── Typo-Skala (Rechner) ───────────────────────────────────────── */
    --sf-h1: 60px;
    --sf-h1-lh: 1.05;
    --sf-h1-ls: -0.02em;
    --sf-h2: 34px;
    --sf-h2-lh: 1.1;
    --sf-h2-ls: -0.015em;
    --sf-h3: 20px;            /* zugleich Produktname                    */
    --sf-h3-lh: 1.2;
    --sf-body: 16px;
    --sf-body-lh: 1.55;
    --sf-klein: 14px;
    --sf-klein-lh: 1.45;
    --sf-label: 11px;         /* Versalien, 600                          */
    --sf-label-ls: 0.09em;

    /* ── Raster (Rechner) ───────────────────────────────────────────── */
    --sf-cols-prod: repeat(4, minmax(0, 1fr));
    --sf-cols-brand: repeat(4, minmax(0, 1fr));
    --sf-cols-news: repeat(3, minmax(0, 1fr));
    --sf-cols-trust: repeat(3, minmax(0, 1fr));
    --sf-hero: 1.1fr 0.9fr;
    --sf-hero-min: 300px;
}

/* Handy — ein einziger Umbruchpunkt für alles Neue. Die sechs historisch
   gewachsenen Punkte im Bestand (560/640/720/760/768/860) bleiben absichtlich
   unangetastet: sie umzubiegen würde bestehende Layouts verändern, und D1
   soll nichts verändern. Neue Bausteine hängen ausschließlich an 900. */
@media (max-width: 900px) {
    :root {
        --sf-gutter: 16px;
        --sf-band-y: 40px;
        --sf-block-gap: 24px;
        --sf-card-pad: 14px;
        --sf-max: 100%;
        --sf-karte-min: 190px;

        --sf-h1: 32px;
        --sf-h2: 22px;
        --sf-h3: 17px;
        --sf-body: 15px;
        --sf-klein: 13px;

        --sf-cols-prod: repeat(2, minmax(0, 1fr));
        --sf-cols-brand: repeat(2, minmax(0, 1fr));
        --sf-cols-news: 1fr;
        --sf-cols-trust: 1fr;
        --sf-hero: 1fr;
        --sf-hero-min: 180px;
    }
}

* { margin: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--sf-text);
    background: var(--sf-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.55;
}

/* ── Parallax-Orbs im Seiten-Hintergrund (R7 v8, Gemini-Mockup): zwei
      SOLIDE Farbkreise mit blur(120px) — der Weichzeichner streut das Licht
      großflächig und macht die Orbs endlich sichtbar (die v7-radial-
      gradients verpufften). Wandern beim Scrollen gegenläufig weiter. ──── */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
body::before {
    top: -10%;
    right: -10%;
    width: 45vw;
    height: 45vw;
    background: var(--sf-orb1);
    transform: translate3d(0, calc(var(--sf-scroll, 0) * 0.32px), 0);
    will-change: transform;
}
body::after {
    bottom: 10%;
    left: -10%;
    width: 35vw;
    height: 35vw;
    background: var(--sf-orb2);
    transform: translate3d(0, calc(var(--sf-scroll, 0) * -0.26px), 0);
    will-change: transform;
}
.sf-main { position: relative; z-index: 1; }

/* R7: Browser-Unterstreichung global aus — der „Hyperlink-Salat" auf den
   Karten (Name/Preis/MwSt. alles unterstrichen) war der größte Billig-
   Faktor. Echte Fließtext-Links bekommen sie gezielt zurück. */
a { color: var(--sf-accent-text); text-decoration: none; }
a:hover { text-decoration: none; }
.sf-co-recht a, .sf-rechtsseite-text a { text-decoration: underline; }
h1, h2 { font-weight: 600; }

/* ── Trust-Bar (immer dunkel, aus ec_shop_settings.trust_bar_1..3) ─── */
.sf-trust {
    background: var(--sf-marke-bg);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 26px;
    padding: 7px 14px;
}
.sf-trust span { display: inline-flex; align-items: center; gap: 6px; }
.sf-trust svg { flex-shrink: 0; opacity: 0.85; }

/* ── Header (R7 v8: sticky Glas-Leiste — leicht durchscheinend mit
      backdrop-blur, Gemini-Mockup; Inhalt schimmert beim Scrollen durch) ── */
.sf-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 24px;
    border-bottom: 1px solid var(--sf-border-hell);
    background: color-mix(in srgb, var(--sf-header-bg) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.sf-header .sf-logo { color: var(--sf-text); }
/* R7 v9: Firmenname im Blau→Gold-Verlauf — Marcos Lieblings-Akzent
   („Alle Produkte"-Gradient) jetzt auch auf der Marke selbst. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-header .sf-logo,
    .sf-logo {
        background: linear-gradient(120deg, var(--sf-accent-text) 25%, var(--sf-akzent) 90%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: 800;
    }
}
.sf-header .sf-suche input {
    background: var(--sf-flaeche-2);
    border-color: var(--sf-border-hell);
    color: var(--sf-text);
}
.sf-header .sf-suche input::placeholder { color: var(--sf-text-muted); }
.sf-header .sf-suche input:focus {
    outline: none;
    border-color: var(--sf-accent-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-accent-text) 25%, transparent);
}
.sf-logo {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sf-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
}
.sf-suche { flex: 1; max-width: 520px; }
.sf-suche input {
    width: 100%;
    border: 1px solid var(--sf-border);
    background: var(--sf-flaeche-2);
    color: var(--sf-text);
    border-radius: 22px;
    padding: 9px 18px;
    font-size: 14px;
    font-family: inherit;
}
.sf-header-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sf-b2b-badge {
    font-size: 12px;
    border: 1px solid var(--sf-akzent);
    color: var(--sf-akzent);
    border-radius: 20px;
    padding: 5px 13px;
    text-decoration: none;
    white-space: nowrap;
}
.sf-cart { color: var(--sf-text); display: inline-flex; }

/* ── Theme-Toggle (Sonne/Mond, 1 Button) ───────────────────────────── */
.sf-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sf-border-hell);
    border-radius: 50%;
    background: var(--sf-flaeche-2);
    color: var(--sf-text);
    cursor: pointer;
    padding: 0;
}
.sf-theme-toggle:hover { border-color: var(--sf-akzent); }
.sf-theme-icon { display: none; align-items: center; }
[data-theme="light"] .sf-theme-icon--moon { display: inline-flex; }
[data-theme="dark"]  .sf-theme-icon--sun  { display: inline-flex; }

/* ── Kategorie-Navileiste (unter Header, horizontal scrollbar) ──────── */
.sf-katnav {
    /* R7 v11: eigene getönte Fläche (wie der Karten-Info-Sockel) — hebt die
       Tab-Leiste vom weißen/dunklen Header darüber ab (Marco: „der Background
       muss mehr Kontrast"). Unten weiter die Blau→Gold-Schimmerlinie (::after). */
    position: relative;
    background: var(--sf-karte-body);
}
.sf-katnav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--sf-primary) 55%, transparent) 28%,
        color-mix(in srgb, var(--sf-akzent) 60%, transparent) 72%,
        transparent);
    pointer-events: none;
}
.sf-katnav-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sf-katnav-inner::-webkit-scrollbar { display: none; }
.sf-katnav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-text-muted);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.sf-katnav-item svg { flex-shrink: 0; }
.sf-katnav-item:hover { color: var(--sf-accent-text); background: var(--sf-tint); }
/* R7 v9: aktive Pill trägt den Blau→Gold-Verlauf (Endpunkt bei 135 % —
   nur ein warmer Schimmer rechts, Text bleibt auf Blau lesbar) + Glow. */
.sf-katnav-item.is-aktiv {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--sf-primary) 25%, var(--sf-akzent) 135%);
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sf-primary) 35%, transparent);
}

/* ── Hauptbereich ──────────────────────────────────────────────────── */
.sf-main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 20px 52px;
}

/* ── Bereichs-Kopf ─────────────────────────────────────────────────── */
.sf-bereich-kopf {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}
.sf-bereich-kopf h2 {
    position: relative;
    padding-left: 13px;
    font-size: 18px;
    font-weight: 600;
}
.sf-bereich-kopf h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 4px;
    height: 0.95em;
    background: var(--sf-akzent);
    border-radius: 2px;
}
.sf-mehr-link {
    margin-left: auto;
    font-size: 13px;
    color: var(--sf-accent-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sf-mehr-link:hover { text-decoration: underline; }

/* ── Produkt-Karten (größer, bildlastig) ───────────────────────────── */
.sf-produkte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 24px;
}
/* R7-C: Featured-Karte (v8 „Dynamic Grid" — erste Startseiten-Karte über 2
   Spalten + größeres Bild) ENTFERNT. Marco-Fund 2026-07-14: als Gast wirkten
   die Karten dadurch „total falsche Größen". Jetzt ALLE Karten uniform (261px
   / Bild 190px) — identisch zur /produkte-Ansicht (Marco: die ist richtig). */
/* R7 v7 — Karten-Anatomie nach Marco-Referenz: Karte mit Innenabstand,
   das Produktfoto sitzt als EIGENE reinweiße, abgerundete Box IN der Karte
   („Bild-in-Box" — Fotos mit weißem Grund fügen sich randlos ein, egal ob
   die Karte hell oder dunkel ist). Hover: sanfter Lift, im Dark ein
   Akzent-Glow, das Bild zoomt minimal. */
.sf-produkt {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sf-flaeche);
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    padding: 14px;
    box-shadow: var(--sf-schatten);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-produkt:hover {
    transform: translateY(-8px);
    box-shadow: var(--sf-schatten-hover);
    border-color: transparent;
}
/* R7 v9: beim Hover legt sich ein Blau→Gold-Verlaufs-Rahmen um die Karte
   (1px-Ring via Mask — border-image kann keinen Radius). */
.sf-produkt::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-akzent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.sf-produkt:hover::before { opacity: 1; }
/* Stretched-Link — die ganze Karte klickt, ohne dass der Text Link-
   Styling erbt; das Quick-Add-Formular liegt mit z-index darüber. */
.sf-produkt-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sf-produkt-link:focus-visible { outline: 2px solid var(--sf-accent-text); outline-offset: -2px; }
/* Bild-Box: feste Höhe, reinweiß, abgerundet — img absolut positioniert,
   damit ein großes Foto die Box NIE aufblähen kann (Flex-min-height-Falle). */
.sf-produkt-bild {
    position: relative;
    background: var(--sf-bild-bg);
    height: 190px;
    border-radius: 12px;
    flex: none;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-bild-icon);
    border: 1px solid rgba(15, 23, 42, 0.05);
    transition: transform 0.3s ease;
}
.sf-produkt:hover .sf-produkt-bild { transform: scale(1.02); }
.sf-produkt-bild svg { width: 40px; height: 40px; opacity: 0.45; }
.sf-produkt-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}
.sf-produkt-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* R7 v10: getönter Info-Sockel — reicht per negativen Margins bis an die
       Karten-Innenränder (Karte hat 14px Padding + 1px Border → innen 19px
       Radius) und rundet den Fuß mit. Feine Trennlinie zum Bild-Bereich. */
    margin: 14px -14px -14px;
    padding: 15px 14px 14px;
    background: var(--sf-karte-body);
    border-top: 1px solid var(--sf-border-hell);
    border-radius: 0 0 19px 19px;
}
.sf-produkt-marke {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    /* R7 v9: Marken-Zeile in Gold — der warme Gegenpol zum blauen Preis
       (Light: abgedunkeltes Tenant-Gold für Lesbarkeit auf Weiß). */
    color: var(--sf-gold-text);
    min-height: 15px;
}
.sf-produkt-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 3px;
    min-height: 2.8em;
    color: var(--sf-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}
.sf-produkt:hover .sf-produkt-name { color: var(--sf-accent-text); }
.sf-produkt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sf-produkt-chips span {
    font-size: 10.5px;
    border: 1px solid var(--sf-border);
    border-radius: 10px;
    padding: 1px 8px;
    color: var(--sf-text-muted);
}
.sf-produkt-chips .sf-chip-mehr { color: var(--sf-text-muted); border-color: var(--sf-border); }
/* Fuß-Zeile — Preis links, Kauf-Button rechts (Lager-Zeile sitzt darüber
   und trägt das margin-top:auto, das beides nach unten schiebt). */
.sf-produkt-fuss {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
.sf-produkt-preis {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--sf-preis);
}
/* R7 v9: Preis im Blau→Gold-Verlauf — dieselbe Signatur wie der Seiten-
   Titel. „ab"-Präfix + NETTO-Pille (Kinder) kriegen ihre Farbe zurück,
   sonst würde der transparente Text-Fill auf sie durchvererben. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-produkt-preis {
        background: linear-gradient(120deg, var(--sf-accent-text) 30%, var(--sf-akzent) 95%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .sf-produkt-preis .sf-preis-ab,
    .sf-produkt-preis .sf-preis-netto {
        -webkit-text-fill-color: var(--sf-text-muted);
    }
}
.sf-preis-ab { font-size: 12px; font-weight: 500; color: var(--sf-text-muted); }
.sf-produkt-grundpreis { font-size: 11px; color: var(--sf-text-muted); margin-top: 2px; }
.sf-produkt-add { position: relative; z-index: 2; flex-shrink: 0; }
/* R7 v9: Kauf-Button = runder Blau→Gold-Verlaufs-Knopf in BEIDEN Modi —
   der Farbtupfer jeder Karte. Hover: leuchtet auf + wächst. */
.sf-produkt-add button {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--sf-transition);
}
.sf-produkt-add button:hover {
    filter: brightness(1.12);
    transform: scale(1.1);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent);
}
/* Lager-Signal: pulsierender Punkt (Referenz), sitzt ÜBER der Preis-Zeile */
.sf-produkt-lager {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sf-text-muted);
}
.sf-lager-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-border-hell); }
.sf-produkt-lager.ist-lager { color: var(--sf-success); }
.sf-produkt-lager.ist-lager .sf-lager-dot {
    background: var(--sf-success);
    animation: sfPuls 2s ease-in-out infinite;
}
@keyframes sfPuls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Startseiten-Marken-Band (R7) — nur echte Daten, kein KPI-Hero ──── */
.sf-band {
    position: relative;
    overflow: hidden;
    background: var(--sf-band-bg);
    border-radius: 16px;
    padding: 32px 30px 28px;
    margin-bottom: 26px;
    color: #F8FAFC;
}
.sf-band-glow {
    position: absolute;
    top: -110px;
    right: -80px;
    width: 520px;
    height: 420px;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--sf-akzent) 38%, transparent), transparent 70%);
    pointer-events: none;
    /* R7 v6/v7: Parallax — Ebene wandert beim Scrollen langsamer als die
       Seite (--sf-scroll setzt das nonce-Script, reine Zahl × px). */
    transform: translate3d(0, calc(var(--sf-scroll, 0) * -0.35px), 0);
    will-change: transform;
}
.sf-band-glow2 {
    position: absolute;
    bottom: -130px;
    left: -60px;
    width: 460px;
    height: 380px;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--sf-primary) 45%, transparent), transparent 70%);
    pointer-events: none;
    transform: translate3d(0, calc(var(--sf-scroll, 0) * 0.25px), 0);
    will-change: transform;
}

/* ── Scroll-Reveals (R7 v6): Sektionen faden beim Reinscrollen sanft ein.
      Nur Container ohne eigene Hover-Transition (kein Konflikt mit Karten). */
.sf-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.sf-reveal.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sf-band-glow, .sf-band-glow2 { transform: none; will-change: auto; }
    body::before, body::after { transform: none; will-change: auto; }
    .sf-reveal { opacity: 1; transform: none; transition: none; }
    .sf-produkt-lager.ist-lager .sf-lager-dot { animation: none; }
    .sf-produkt:hover .sf-produkt-bild { transform: none; }
}
.sf-band-inhalt { position: relative; }
/* R7 v8 (Gemini-Badge): Eyebrow als Pill statt nackter Textzeile. */
.sf-band-eyebrow {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    color: var(--sf-akzent);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding: 5px 14px;
}
.sf-band-titel {
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-top: 12px;
    color: #FFFFFF;
}
/* Shop-Name mit Weiß→Gold-Verlauf (Gemini-Hero-Akzent, dunkel-tauglich). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-band-titel {
        background: linear-gradient(120deg, #FFFFFF 35%, var(--sf-akzent));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
.sf-band-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.78);
}
.sf-band-fakt { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
a.sf-band-fakt:hover { color: #FFFFFF; }
.sf-band-trenner { color: rgba(255, 255, 255, 0.35); }
.sf-band-trust { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.85); }
.sf-band-trust svg { color: var(--sf-akzent); }

/* ── Marken-Leiste (R7) — klickbar in den Marken-Filter aus 2.4 ─────── */
.sf-marken { margin-top: 34px; }
.sf-marken-leiste { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-marken-badge {
    border: 1px solid var(--sf-border-hell);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    background: var(--sf-flaeche);
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.sf-marken-badge:hover {
    color: var(--sf-text);
    border-color: var(--sf-primary);
    background: var(--sf-tint);
}

/* ── Breadcrumb + Kategorie-Kopf ───────────────────────────────────── */
.sf-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--sf-text-muted);
    margin-bottom: 16px;
}
.sf-breadcrumb a { color: var(--sf-text-muted); text-decoration: none; }
.sf-breadcrumb a:hover { color: var(--sf-accent-text); }
.sf-breadcrumb-aktiv { color: var(--sf-text); }
.sf-kategorie-kopf {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
}
.sf-kategorie-kopf .sf-kat-icon { display: inline-flex; color: var(--sf-accent-text); }
.sf-kategorie-kopf h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
/* R7 v8 (Gemini): Seiten-Titel mit Blau→Gold-Verlauf — der eine mutige
   Akzent pro Seite. Nur wo background-clip:text sicher rendert. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-kategorie-kopf h1 {
        background: linear-gradient(135deg, var(--sf-accent-text), var(--sf-akzent));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
.sf-kategorie-anzahl { font-size: 13px; color: var(--sf-text-muted); }

/* Unterkategorie-Pills auf der Kategorie-Seite */
.sf-subkat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.sf-subkat a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sf-text);
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    background: var(--sf-flaeche);
}
.sf-subkat a:hover { border-color: var(--sf-accent-text); color: var(--sf-accent-text); }
.sf-subkat svg { color: var(--sf-accent-text); }

/* ── Leerer Shop ───────────────────────────────────────────────────── */
.sf-leer { text-align: center; padding: 52px 16px; color: var(--sf-text-muted); }
.sf-leer svg { opacity: 0.5; }
.sf-leer h2 { font-size: 18px; color: var(--sf-text); margin: 12px 0 6px; }

/* ── Bereich-Abstand ───────────────────────────────────────────────── */
.sf-produkte-bereich { margin-top: 6px; }

/* ── Footer (R7 v7: gleicher dunkler Grund wie das Startseiten-Band —
      Anthrazit im Light, Slate im Dark, Klammer zum Seitenabschluss) ─── */
.sf-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--sf-border);
    background: var(--sf-band-bg);
    padding: 34px 20px 18px;
}
.sf-footer-spalten {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 22px;
    padding-bottom: 20px;
}
.sf-footer-spalte h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    color: var(--sf-akzent);
}
.sf-footer-spalte ul { list-style: none; padding: 0; }
.sf-footer-spalte li { font-size: 13px; color: rgba(255, 255, 255, 0.62); line-height: 2; }
.sf-footer-spalte a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.sf-footer-spalte a:hover { color: #FFFFFF; }

.sf-footer-unten {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
.sf-footer-name { font-weight: 600; letter-spacing: 0.5px; color: #FFFFFF; }
.sf-footer-spacer { flex: 1; }
.sf-powered a { color: var(--sf-accent-text); text-decoration: none; }

/* ── Sprach-Umschalter (details-Dropdown, öffnet nach oben) ────────── */
.sf-lang { position: relative; }
.sf-lang summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--sf-border-hell);
    border-radius: 20px;
    padding: 5px 12px;
    background: var(--sf-flaeche);
    color: var(--sf-text);
    user-select: none;
}
.sf-lang summary::-webkit-details-marker { display: none; }
.sf-lang-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--sf-flaeche);
    border: 1px solid var(--sf-border-hell);
    border-radius: 10px;
    box-shadow: var(--sf-schatten-hover);
    min-width: 190px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    z-index: 20;
}
.sf-lang-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--sf-text);
    text-decoration: none;
}
.sf-lang-menu a:hover { background: var(--sf-flaeche-2); }
.sf-lang-menu a.is-aktiv { background: var(--sf-tint); font-weight: 600; }
.sf-lang-flagge { font-size: 15px; }
/* Header-Variante: klappt nach UNTEN (Footer-Variante klappt nach oben) */
.sf-lang--header .sf-lang-menu { top: calc(100% + 6px); bottom: auto; }
.sf-lang--header summary { padding: 6px 9px; }

/* ── Sprachwähler: Darstellung wie im Handwerker-Bereich (2026-08-13) ─────
   Marco: „ich möchte, dass sie genau so dargestellt wird wie bei Handwerker,
   damit das System einheitlicher ist."

   ⚠️ Der eigentliche FEHLER saß hier: Die Regel, die das Panel nach unten
   klappen lässt, galt nur für `.sf-lang--header`. Der Wähler in der obersten
   Leiste trägt aber `.sf-lang--service` — für ihn griff die Grundregel
   `bottom: calc(100% + 6px)`, das Panel klappte also NACH OBEN und lag damit
   außerhalb des Fensters. Man klickte, und scheinbar passierte nichts.

   Dazu die Form des Handwerker-Panels (`.bk-lang-menu__panel`): 32 Sprachen
   passen nicht sinnvoll in eine 190px-Spalte — dort ist es ein Raster mit
   fester Breite und begrenzter Höhe. */
.sf-lang--service .sf-lang-menu { top: calc(100% + 6px); bottom: auto; }

.sf-lang-menu {
    /* Handwerker-Maße statt einspaltiger Liste. */
    width: 480px;
    max-width: 92vw;
    max-height: 60vh;
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
@media (max-width: 900px) {
    .sf-lang-menu { width: 340px; grid-template-columns: repeat(2, 1fr); }
}

/* Auslöser: Flagge + Eigenname + Pfeil (vorher nur „DE" + Symbol). */
.sf-lang-name { font-weight: 600; }
.sf-lang-chev {
    font-size: 10px;
    color: var(--sf-text-muted);
    transition: transform .15s ease;
}
.sf-lang[open] .sf-lang-chev { transform: rotate(180deg); }
.sf-lang[open] > summary { border-color: var(--sf-primary); }

/* Eintrag im Panel — Muster `.bk-lang-menu__item`. */
.sf-lang-eintrag {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--sf-text);
    text-decoration: none;
}
.sf-lang-eintrag:hover { background: var(--sf-flaeche-2); }
.sf-lang-eigenname { flex: 1; }
.sf-lang-haken { color: var(--sf-primary); font-weight: 700; }
.sf-lang-eintrag.is-aktiv {
    background: color-mix(in srgb, var(--sf-primary) 12%, var(--sf-flaeche));
    color: var(--sf-primary);
    font-weight: 600;
}

/* ── Filter-/Sortier-Leiste (Block 2.4) ────────────────────────────── */
.sf-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sf-drop { position: relative; }
.sf-drop-rechts { margin-left: auto; }
.sf-drop summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    border: 1px solid var(--sf-border-hell);
    border-radius: 8px;
    padding: 8px 13px;
    background: var(--sf-flaeche);
    color: var(--sf-text);
    user-select: none;
    white-space: nowrap;
}
.sf-drop summary::-webkit-details-marker { display: none; }
.sf-drop[open] summary { border-color: var(--sf-accent-text); }
.sf-drop-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--sf-flaeche);
    border: 1px solid var(--sf-border-hell);
    border-radius: 10px;
    box-shadow: var(--sf-schatten-hover);
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    z-index: 30;
}
.sf-drop-rechts .sf-drop-menu { left: auto; right: 0; }
.sf-drop-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--sf-text);
    text-decoration: none;
}
.sf-drop-menu a:hover { background: var(--sf-flaeche-2); }
.sf-drop-menu a.is-aktiv { background: var(--sf-tint); color: var(--sf-accent-text); font-weight: 500; }
.sf-drop-anz { font-size: 11px; color: var(--sf-text-muted); }

.sf-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 16px;
}
.sf-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    background: var(--sf-tint);
    color: var(--sf-accent-text);
    border: 1px solid color-mix(in srgb, var(--sf-primary) 30%, transparent);
    border-radius: 16px;
    padding: 4px 10px;
    text-decoration: none;
}
.sf-filter-chip:hover { border-color: var(--sf-accent-text); }
.sf-filter-reset { font-size: 12px; color: var(--sf-text-muted); text-decoration: none; }
.sf-filter-reset:hover { color: var(--sf-accent-text); text-decoration: underline; }

/* ── Produkt-Detail (Block 2.3) ────────────────────────────────────── */
.sf-pd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    margin-bottom: 8px;
}
.sf-pd-hauptbild {
    background: var(--sf-bild-bg);
    border: 1px solid var(--sf-border);
    border-radius: 14px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-text-muted);
    overflow: hidden;
}
.sf-pd-hauptbild svg { width: 48px; height: 48px; opacity: 0.5; }
/* R7 v13: contain statt cover — das GANZE Produktfoto sichtbar (hohe Flaschen/
   Rollen wurden mit cover oben/unten beschnitten). Innenabstand wie die
   Grid-Karten, damit das Motiv nicht am Rand klebt. */
.sf-pd-hauptbild img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.sf-pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sf-pd-thumb {
    width: 56px;
    height: 56px;
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    background: var(--sf-bild-bg);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}
.sf-pd-thumb.is-aktiv { border: 2px solid var(--sf-accent-text); }
.sf-pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.sf-pd-marke {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--sf-text-muted);
}
.sf-pd-name { font-size: 24px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.sf-pd-preis { font-size: 27px; font-weight: 600; margin-top: 16px; color: var(--sf-accent-text); }
.sf-pd-grundpreis { font-size: 12px; color: var(--sf-text-muted); margin-top: 3px; }

.sf-pd-selektor { margin-top: 18px; }
.sf-pd-selektor-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sf-text-muted);
    margin-bottom: 7px;
}
.sf-pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pd-chip {
    font-size: 13px;
    border: 1px solid var(--sf-border-hell);
    border-radius: 20px;
    padding: 7px 15px;
    background: var(--sf-flaeche);
    color: var(--sf-text);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.sf-pd-chip:hover { border-color: var(--sf-accent-text); }
.sf-pd-chip.is-aktiv {
    border: 2px solid var(--sf-accent-text);
    color: var(--sf-accent-text);
    background: var(--sf-tint);
    padding: 6px 14px;
}

.sf-pd-lager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-top: 18px;
}
.sf-pd-lager.sf-lager-auf_lager { color: #1D9E75; }
[data-theme="dark"] .sf-pd-lager.sf-lager-auf_lager { color: #5DCAA5; }
.sf-pd-lager.sf-lager-knapp { color: #BA7517; }
[data-theme="dark"] .sf-pd-lager.sf-lager-knapp { color: #EF9F27; }
.sf-pd-lager.sf-lager-lieferbar { color: var(--sf-text-muted); }

.sf-pd-block {
    border-top: 1px solid var(--sf-border);
    margin-top: 28px;
    padding-top: 22px;
}
.sf-pd-block h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.sf-pd-text { font-size: 14px; color: var(--sf-text); line-height: 1.65; max-width: 760px; white-space: pre-line; }
.sf-pd-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    max-width: 760px;
}
.sf-pd-details > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sf-border);
}
.sf-pd-details span:first-child { color: var(--sf-text-muted); }

/* ── Mobil ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .sf-pd { grid-template-columns: 1fr; gap: 18px; }
    .sf-pd-name { font-size: 20px; }
    .sf-pd-preis { font-size: 24px; }
    .sf-pd-details { grid-template-columns: 1fr; }
    .sf-trust { font-size: 11px; gap: 4px 16px; }
    .sf-header { padding: 12px 15px; gap: 10px; }
    .sf-logo { font-size: 17px; }
    .sf-katnav-inner { padding: 9px 15px; }
    .sf-main { padding: 20px 15px 40px; }
    .sf-produkte { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sf-produkt-body { padding: 11px 12px 13px; }
    .sf-produkt-preis { font-size: 17px; }
    .sf-footer-spalten { grid-template-columns: 1fr 1fr; }
    .sf-kategorie-kopf h1 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Shop-Kundenkonto (Block 5.1) — Login/Registrierung/Konto/Adressen
   ═══════════════════════════════════════════════════════════════════════ */

/* Header-Einstieg (auf dem Navy-Header) */
.sf-konto-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sf-text);
    text-decoration: none;
    font-size: 13px;
}
.sf-konto-link:hover { color: var(--sf-accent-text); }

/* Flash-Meldungen */
.sf-flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sf-flash {
    font-size: 13px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--sf-border);
}
.sf-flash-success {
    color: #1D9E75;
    background: color-mix(in srgb, #1D9E75 10%, var(--sf-flaeche));
    border-color: color-mix(in srgb, #1D9E75 30%, transparent);
}
.sf-flash-error {
    color: #C6453F;
    background: color-mix(in srgb, #C6453F 10%, var(--sf-flaeche));
    border-color: color-mix(in srgb, #C6453F 30%, transparent);
}

/* Auth-Karten (Login/Registrierung/Adresse/Reset) */
.sf-auth { display: flex; justify-content: center; padding: 8px 0 20px; }
.sf-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--sf-flaeche);
    border: 1px solid var(--sf-border);
    border-radius: 14px;
    box-shadow: var(--sf-schatten);
    padding: 26px 26px 24px;
}
.sf-auth-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.sf-auth-sub { font-size: 13px; color: var(--sf-text-muted); margin-bottom: 14px; }

.sf-field { display: block; margin-top: 13px; }
.sf-field > span {
    display: block;
    font-size: 12px;
    color: var(--sf-text-muted);
    margin-bottom: 5px;
}
.sf-input {
    width: 100%;
    border: 1px solid var(--sf-border-hell);
    background: var(--sf-flaeche-2);
    color: var(--sf-text);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 14px;
    font-family: inherit;
}
.sf-input:focus {
    outline: none;
    border-color: var(--sf-accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 18%, transparent);
}
.sf-field-row { display: flex; gap: 12px; }
.sf-field-plz { flex: 0 0 34%; }
.sf-field-ort { flex: 1; }
.sf-fehler { display: block; font-size: 12px; color: #C6453F; margin-top: 5px; font-style: normal; }
.sf-hint {
    font-size: 12px;
    color: var(--sf-text-muted);
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.sf-hint svg { flex-shrink: 0; margin-top: 1px; }

.sf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--sf-text);
    cursor: pointer;
}
.sf-check input { width: 16px; height: 16px; accent-color: var(--sf-primary); }

/* Buttons */
/* R7-C: Konto-Primär-Button = Blau→Gold-Signatur wie Kasse/Bestellen (nur in
   den konto_*-Templates verwendet). */
.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent);
    transition: var(--sf-transition);
}
.sf-btn:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
.sf-btn-block { width: 100%; margin-top: 18px; }
.sf-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--sf-border-hell);
    color: var(--sf-text);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.sf-btn-ghost:hover { border-color: var(--sf-accent-text); color: var(--sf-accent-text); }

.sf-auth-row { text-align: right; margin-top: 7px; }
.sf-auth-row a { font-size: 12px; color: var(--sf-accent-text); text-decoration: none; }
.sf-auth-alt { text-align: center; font-size: 13px; color: var(--sf-text-muted); margin-top: 16px; }
.sf-auth-alt a { color: var(--sf-accent-text); text-decoration: none; }
/* Wegweiser für Team-Mitglieder (getrennte Zugänge Shop-Kunde ↔ Admin) —
   dezenter als der Konto-Hinweis darüber, mit Trennlinie abgesetzt. */
.sf-auth-team { margin-top: 12px; padding-top: 12px; font-size: 12px;
                border-top: 1px solid var(--sf-border); }

/* Segmented Privat/Gewerbe */
.sf-seg { display: flex; gap: 8px; margin-top: 6px; }
.sf-seg-opt { flex: 1; cursor: pointer; }
.sf-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sf-seg-opt span {
    display: block;
    text-align: center;
    font-size: 13px;
    padding: 9px;
    border-radius: 9px;
    border: 1px solid var(--sf-border-hell);
    color: var(--sf-text-muted);
}
.sf-seg-opt input:checked + span {
    border: 2px solid var(--sf-primary);
    color: var(--sf-accent-text);
    background: var(--sf-tint);
    padding: 8px;
    font-weight: 500;
}

/* B2B-Zusatzblock */
.sf-b2b-block {
    margin-top: 13px;
    padding: 13px;
    border-radius: 11px;
    background: var(--sf-flaeche-2);
    border: 1px solid var(--sf-border);
}
.sf-b2b-block.is-hidden { display: none; }
.sf-b2b-kopf {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sf-accent-text);
}

/* Konto-Übersicht + Unterseiten */
.sf-konto { max-width: 980px; margin: 0 auto; }
.sf-konto-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.sf-konto-kopf h1 { font-size: 22px; }
.sf-konto-mail {
    font-size: 13px;
    color: var(--sf-text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sf-badge-gold {
    font-size: 11px;
    color: #8A5A0B;
    background: color-mix(in srgb, var(--sf-akzent) 30%, var(--sf-flaeche));
    border: 1px solid color-mix(in srgb, var(--sf-akzent) 55%, transparent);
    border-radius: 12px;
    padding: 2px 9px;
}
[data-theme="dark"] .sf-badge-gold { color: var(--sf-akzent); }
.sf-badge-muted {
    font-size: 11px;
    color: var(--sf-text-muted);
    border: 1px solid var(--sf-border-hell);
    border-radius: 12px;
    padding: 2px 9px;
}
.sf-badge-blau {
    font-size: 11px;
    color: var(--sf-accent-text);
    border: 1px solid color-mix(in srgb, var(--sf-primary) 40%, transparent);
    border-radius: 12px;
    padding: 1px 8px;
}

.sf-konto-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 16px;
    align-items: start;
}
.sf-konto-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) {
    .sf-konto-grid { grid-template-columns: 1fr; }
}
.sf-konto-card {
    background: var(--sf-flaeche);
    border: 1px solid var(--sf-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--sf-schatten);
    text-decoration: none;
    color: var(--sf-text);
}
.sf-konto-card-link { transition: transform 0.15s ease, border-color 0.15s ease; display: block; }
.sf-konto-card-link:hover { transform: translateY(-2px); border-color: var(--sf-border-hell); }
.sf-konto-card-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
.sf-konto-card-kopf svg { color: var(--sf-accent-text); }
.sf-muted { font-size: 13px; color: var(--sf-text-muted); }
.sf-konto-card .sf-hint { margin-top: 4px; }
.sf-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--sf-accent-text);
    text-decoration: none;
    margin-top: 10px;
}
.sf-link:hover { text-decoration: underline; }

/* Adressen-Liste */
.sf-adr-liste { display: flex; flex-direction: column; gap: 12px; }
.sf-adr-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--sf-flaeche);
    border: 1px solid var(--sf-border);
    border-radius: 12px;
    padding: 15px 17px;
}
.sf-adr-titel { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sf-adr-zeile { font-size: 13px; color: var(--sf-text-muted); line-height: 1.5; }
.sf-adr-aktionen { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.sf-adr-aktionen form { display: inline; }
.sf-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-family: inherit;
    color: var(--sf-accent-text);
    cursor: pointer;
}
.sf-link-btn:hover { text-decoration: underline; }
.sf-link-danger { color: #C6453F; }

/* Konto-Daten (2 Formulare) */
.sf-daten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}
.sf-daten-grid .sf-auth-card { max-width: none; }
.sf-daten-fix {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sf-border);
    margin-bottom: 4px;
}
.sf-daten-fix-label { color: var(--sf-text-muted); }
.sf-daten-abmelden { margin-top: 18px; }

/* E-Mail-Verifizierung (Block 5.1-Nachtrag) */
.sf-auth-zentriert { text-align: center; }
.sf-auth-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sf-tint);
    color: var(--sf-accent-text);
    margin-bottom: 12px;
}
.sf-auth-icon-ok {
    background: color-mix(in srgb, #1D9E75 15%, var(--sf-flaeche));
    color: #1D9E75;
}
.sf-verify-mail { font-weight: 500; color: var(--sf-text); margin: 4px 0 10px; }
.sf-auth-zentriert .sf-btn-ghost { margin-top: 16px; }

/* Passwort-Feld mit Auge (Block 5.1-Nachtrag) */
.sf-pw-wrap { position: relative; }
.sf-pw-wrap .sf-input { padding-right: 44px; }
.sf-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--sf-text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
}
.sf-pw-toggle:hover { color: var(--sf-accent-text); }
.sf-pw-eye, .sf-pw-eye-off { align-items: center; }
.sf-pw-eye { display: inline-flex; }
.sf-pw-eye-off { display: none; }
.sf-pw-shown .sf-pw-eye { display: none; }
.sf-pw-shown .sf-pw-eye-off { display: inline-flex; }

@media (max-width: 720px) {
    .sf-konto-label { display: none; }
    .sf-auth-card { padding: 20px 18px; }
    .sf-adr-item { flex-direction: column; gap: 12px; }
}

/* ── Block 5.4: B2B-Netto-Anzeige + Staffel-Anreiz + Reverse-Charge ── */
.sf-preis-netto {
    /* R7 v3: dezente Outline-Pille statt blauem Farbtupfer auf jeder Karte
       (8× blau im B2B-Grid war visueller Lärm). */
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid var(--sf-border-hell);
    color: var(--sf-text-muted);
}
.sf-produkt-staffel {
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-akzent);
    margin-top: 4px;
}
.sf-pd-staffel {
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-akzent);
    margin-top: 6px;
}
.sf-pd-staffel:empty { display: none; }
.sf-pd-rc {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--sf-text-muted);
    margin-top: 10px;
    padding: 8px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--sf-akzent) 12%, transparent);
}

/* ── Block 3.1 — Warenkorb + Add-to-Cart + Mini-Cart-Badge ─────────────── */
.sf-cart { position: relative; }
.sf-cart-badge {
    position: absolute; top: -7px; right: -9px;
    background: var(--sf-akzent); color: #3A2600;
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 2px 6px; border-radius: 20px; min-width: 8px; text-align: center;
}

/* Add-to-Cart auf der Produkt-Detailseite */
.sf-pd-add { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.sf-pd-menge {
    width: 74px; padding: 10px 10px; font-size: 15px; text-align: center;
    color: var(--sf-text); background: var(--sf-flaeche);
    border: 1px solid var(--sf-border-hell); border-radius: 8px;
}
.sf-pd-add-btn {
    flex: 1; min-width: 190px; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; cursor: pointer;
    padding: 11px 18px; font-size: 15px; font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%);
    border: none; border-radius: 8px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent);
    transition: var(--sf-transition);
}
.sf-pd-add-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent);
}

/* Warenkorb-Seite */
.sf-wk { max-width: 1080px; margin: 0 auto; }
.sf-wk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sf-wk-kopf h1 { font-size: 24px; color: var(--sf-text); margin: 0; }
.sf-wk-anzahl { font-size: 14px; color: var(--sf-text-muted); }
.sf-wk-b2b {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 12px; padding: 4px 11px; border-radius: 20px;
    background: color-mix(in srgb, var(--sf-akzent) 16%, transparent);
    color: var(--sf-accent-text);
}

.sf-wk-leer { text-align: center; padding: 56px 20px; }
.sf-wk-leer-icon { color: var(--sf-text-muted); margin-bottom: 12px; }
.sf-wk-leer h2 { font-size: 19px; color: var(--sf-text); margin: 0 0 6px; }
.sf-wk-leer p { color: var(--sf-text-muted); margin: 0 0 18px; }
.sf-wk-weiter {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--sf-accent-text); font-weight: 500; font-size: 14px;
}
.sf-wk-weiter--klein { margin-top: 6px; font-size: 13px; }

.sf-wk-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px; align-items: start; margin-top: 18px;
}
.sf-wk-zeilen { display: flex; flex-direction: column; gap: 12px; }

.sf-wk-zeile {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--sf-flaeche); border: 1px solid var(--sf-border);
    border-radius: 12px; padding: 14px; box-shadow: var(--sf-schatten);
}
.sf-wk-bild {
    width: 64px; height: 64px; flex: 0 0 auto; border-radius: 8px;
    background: var(--sf-bild-bg); display: flex; align-items: center;
    justify-content: center; color: var(--sf-accent-text); overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.05);
}
/* R7-C: contain + Innenabstand — Produktfotos mit weissem Rand randlos statt
   beschnitten (Bild-Box ist reinweiss, wie die Karten). */
.sf-wk-bild img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sf-wk-info { flex: 1; min-width: 0; }
.sf-wk-marke { font-size: 11px; color: var(--sf-accent-text); font-weight: 500; }
.sf-wk-name { display: block; font-size: 15px; font-weight: 500; color: var(--sf-text); margin-top: 1px; }
.sf-wk-name:hover { color: var(--sf-accent-text); }
.sf-wk-variante { font-size: 12px; color: var(--sf-text-muted); margin-top: 2px; }
.sf-wk-staffel {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 11px; padding: 2px 8px; border-radius: 6px;
    background: color-mix(in srgb, #1D9E75 18%, transparent); color: #1D9E75;
}
.sf-wk-warnung {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 11px; padding: 2px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--sf-akzent) 16%, transparent);
    color: var(--sf-accent-text);
}

.sf-wk-rechts {
    display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
    flex: 0 0 auto; text-align: right;
}
.sf-wk-einzel { line-height: 1.35; }
.sf-wk-streich { display: block; font-size: 12px; color: var(--sf-text-muted); text-decoration: line-through; }
.sf-wk-preis { font-size: 14px; color: var(--sf-text); }
.sf-wk-je { font-size: 11px; color: var(--sf-text-muted); }

.sf-wk-stepper { display: flex; align-items: center; border: 1px solid var(--sf-border-hell); border-radius: 8px; overflow: hidden; }
.sf-wk-stepper form { display: inline-flex; margin: 0; }
.sf-wk-stepper button {
    padding: 5px 11px; font-size: 15px; line-height: 1; cursor: pointer;
    color: var(--sf-text); background: var(--sf-flaeche-2); border: none;
}
.sf-wk-stepper button:hover { background: var(--sf-tint); }
.sf-wk-menge {
    padding: 5px 10px; font-size: 14px; color: var(--sf-text); min-width: 40px;
    text-align: center; border-left: 1px solid var(--sf-border-hell);
    border-right: 1px solid var(--sf-border-hell);
}
.sf-wk-summe { font-size: 15px; font-weight: 600; color: var(--sf-text); }
.sf-wk-remove { background: none; border: none; cursor: pointer; color: var(--sf-text-muted); padding: 2px; }
.sf-wk-remove:hover { color: #E24B4A; }

.sf-wk-summary {
    background: var(--sf-karte-body); border: 1px solid var(--sf-border);
    border-radius: 12px; padding: 16px; box-shadow: var(--sf-schatten);
    position: sticky; top: 16px;
}
.sf-wk-summary h2 { font-size: 15px; color: var(--sf-text); margin: 0 0 12px; }
.sf-wk-sum-zeile { display: flex; justify-content: space-between; font-size: 14px; color: var(--sf-text); margin-bottom: 8px; }
.sf-wk-sum-note { font-size: 12px; color: var(--sf-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.sf-wk-sum-total {
    display: flex; justify-content: space-between; font-size: 16px; font-weight: 600;
    color: var(--sf-text); border-top: 1px solid var(--sf-border);
    padding-top: 11px; margin-top: 6px; margin-bottom: 14px;
}
/* R7-C: Gesamtbetrag im Blau→Gold-Verlauf (Karten-Preis-Signatur) — nur der
   Betrag (2. Span), Label „Summe" bleibt normal. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-wk-sum-total span:last-child {
        background: linear-gradient(120deg, var(--sf-accent-text) 30%, var(--sf-akzent) 95%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
/* R7-C: Kasse-Button = Blau→Gold-Signatur wie der Quick-Add-„Kaufen"-Knopf. */
.sf-wk-kasse {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; font-size: 15px; font-weight: 600; color: #FFFFFF;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%);
    border-radius: 8px; box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent);
    transition: var(--sf-transition);
}
.sf-wk-kasse:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
.sf-wk-kasse-bald {
    text-align: center; padding: 12px; font-size: 13px; color: var(--sf-text-muted);
    background: var(--sf-flaeche-2); border: 1px dashed var(--sf-border-hell); border-radius: 8px;
}

@media (max-width: 760px) {
    .sf-wk-grid { grid-template-columns: 1fr; }
    .sf-wk-summary { position: static; }
    .sf-wk-zeile { flex-wrap: wrap; }
    .sf-wk-rechts { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ── Kasse / Checkout (Block 3.2) ─────────────────────────────────────────── */
.sf-co { max-width: 1080px; margin: 0 auto; }
.sf-co-kopf { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.sf-co-kopf h1 { font-size: 26px; margin: 0; color: var(--sf-text); }
.sf-co-zurueck { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sf-text-muted); text-decoration: none; }
.sf-co-zurueck:hover { color: var(--sf-primary); }
.sf-co-warnung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--sf-akzent) 16%, var(--sf-flaeche)); border: 1px solid var(--sf-akzent); color: var(--sf-text); border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: 14px; }
.sf-co-warnung-liste { color: var(--sf-text-muted); font-size: 13px; }

.sf-co-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.sf-co-spalte { display: flex; flex-direction: column; gap: 16px; }
.sf-co-card { background: var(--sf-flaeche); border: 1px solid var(--sf-border); border-radius: 14px; padding: 18px; box-shadow: var(--sf-schatten); }
.sf-co-card h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 14px; color: var(--sf-text); }
.sf-co-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-akzent); color: #0A1526; font-size: 13px; font-weight: 600; }

.sf-co-radio { display: flex; align-items: center; gap: 12px; border: 1px solid var(--sf-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s; }
.sf-co-radio:hover { border-color: var(--sf-border-hell); }
.sf-co-radio.is-aktiv { border-color: var(--sf-akzent); background: var(--sf-tint); }
.sf-co-radio input { accent-color: var(--sf-primary); }
.sf-co-radio-body { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.sf-co-radio-titel { font-size: 14px; font-weight: 500; color: var(--sf-text); }
.sf-co-radio-text { font-size: 12px; color: var(--sf-text-muted); }
.sf-co-radio-preis { font-size: 14px; font-weight: 500; color: var(--sf-text); }
.sf-co-tag { font-size: 11px; padding: 1px 7px; border-radius: 12px; background: var(--sf-akzent); color: #0A1526; }

.sf-co-hint { font-size: 13px; color: var(--sf-text-muted); margin: 0 0 10px; }
.sf-co-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sf-primary); text-decoration: none; margin-top: 4px; }
.sf-co-link:hover { text-decoration: underline; }
.sf-co-inline-link { color: var(--sf-primary); }
.sf-co-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-co-input { background: var(--sf-bg); border: 1px solid var(--sf-border); color: var(--sf-text); border-radius: 8px; padding: 9px 11px; font-size: 14px; width: 100%; }
.sf-co-input:focus { outline: none; border-color: var(--sf-primary); }
.sf-co-voll { grid-column: 1 / 3; }
.sf-co-refresh { margin-top: 10px; background: transparent; border: 1px solid var(--sf-border-hell); color: var(--sf-text); border-radius: 8px; padding: 9px 14px; font-size: 13px; cursor: pointer; }

/* Schritt 1b — abweichende Rechnungsadresse.
   Aufklappen rein per CSS (:checked ~ .panel): kein JS, kein Inline-Handler,
   damit CSP-strict gilt. Die Checkbox ist ein echtes Formularfeld und bleibt
   fuer Screenreader ueber das verknuepfte <label for> bedienbar. */
.sf-co-rech { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-co-rech-toggle { accent-color: var(--sf-primary); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.sf-co-rech-lbl { font-size: 14px; color: var(--sf-text); cursor: pointer; user-select: none; }
.sf-co-rech-panel { display: none; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--sf-border); }
.sf-co-rech-toggle:checked ~ .sf-co-rech-panel { display: block; }
.sf-co-rech-panel .sf-co-hint { margin: 10px 0 0; }

/* R7-C: Zusammenfassungs-Panel getönt wie im Warenkorb (--sf-karte-body). */
.sf-co-summary { background: var(--sf-karte-body); border: 1px solid var(--sf-border); border-radius: 14px; padding: 18px; box-shadow: var(--sf-schatten); position: sticky; top: 16px; }
.sf-co-summary h2 { font-size: 16px; margin: 0 0 14px; color: var(--sf-text); }
.sf-co-zeilen { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--sf-border); }
.sf-co-zeile { display: flex; gap: 10px; align-items: center; }
.sf-co-zbild { width: 40px; height: 40px; border-radius: 8px; background: var(--sf-bild-bg); display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); flex-shrink: 0; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.05); }
/* R7-C: contain + Innenabstand (weisse Bild-Box, wie die Karten). */
.sf-co-zbild img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sf-co-zinfo { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-co-zmarke { font-size: 11px; color: var(--sf-text-muted); text-transform: uppercase; letter-spacing: .02em; }
.sf-co-zname { font-size: 13px; color: var(--sf-text); }
.sf-co-zmeta { font-size: 12px; color: var(--sf-text-muted); }
.sf-co-zsumme { font-size: 13px; font-weight: 500; color: var(--sf-text); white-space: nowrap; }

.sf-co-sum { padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sf-co-sum-zeile { display: flex; justify-content: space-between; font-size: 14px; color: var(--sf-text); }
.sf-co-sum-ust { font-size: 13px; color: var(--sf-text-muted); }
.sf-co-sum-rc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sf-akzent); }
.sf-co-sum-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--sf-border-hell); margin-top: 5px; padding-top: 11px; }
.sf-co-sum-total span:first-child { font-size: 15px; font-weight: 500; color: var(--sf-text); }
.sf-co-sum-total span:last-child { font-size: 19px; font-weight: 600; color: var(--sf-akzent); }
/* R7-C: Gesamtbetrag im Blau→Gold-Verlauf (Karten-Preis-Signatur, greift auch auf der Danke-Seite). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-co-sum-total span:last-child {
        background: linear-gradient(120deg, var(--sf-accent-text) 30%, var(--sf-akzent) 95%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
}
.sf-co-sum-hint { font-size: 11px; color: var(--sf-text-muted); text-align: right; }

/* R7-C: Bestellen-Button = Blau→Gold-Signatur wie Quick-Add + Kasse. */
.sf-co-bestellen { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%); color: #FFFFFF; border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--sf-transition); box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent); }
.sf-co-bestellen:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
.sf-co-note { font-size: 11px; color: var(--sf-text-muted); text-align: center; margin: 8px 0 0; }

.sf-co--weiter { max-width: 620px; }
.sf-co-fertig { text-align: center; padding: 12px 0 20px; }
.sf-co-fertig-icon { color: var(--sf-primary); display: flex; justify-content: center; margin-bottom: 8px; }
.sf-co-fertig h1 { font-size: 24px; margin: 0 0 8px; color: var(--sf-text); }
.sf-co-fertig p { font-size: 14px; color: var(--sf-text-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; }
.sf-co-summary--zentriert { position: static; }

@media (max-width: 860px) {
    .sf-co-grid { grid-template-columns: 1fr; }
    .sf-co-summary { position: static; }
}

/* ── Bestellbestätigung (Block 3.4) ───────────────────────────────────────── */
.sf-dk { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; }
.sf-dk-hero { text-align: center; padding: 12px 0 24px; }
.sf-dk-check {
    width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sf-ok, #2F9E6A) 16%, transparent);
    color: var(--sf-ok, #2F9E6A);
}
.sf-dk-hero h1 { font-size: 25px; margin: 0 0 8px; color: var(--sf-text); }
.sf-dk-hero p { margin: 0; color: var(--sf-text-muted); }
.sf-dk-nr {
    display: inline-block; margin-top: 14px; padding: 7px 16px; border-radius: 999px;
    background: var(--sf-tint); border: 1px solid var(--sf-border-hell);
    color: var(--sf-accent-text); font-weight: 700; letter-spacing: .4px;
}
.sf-dk-card { margin-bottom: 16px; }
.sf-dk-h {
    font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
    color: var(--sf-text-muted); font-weight: 700; margin: 0 0 14px;
}
.sf-dk-steps { display: flex; flex-direction: column; gap: 13px; }
.sf-dk-step { display: flex; gap: 12px; align-items: flex-start; }
.sf-dk-step-ic {
    flex: 0 0 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-tint); color: var(--sf-accent-text);
}
.sf-dk-step b { color: var(--sf-text); font-size: 14.5px; }
.sf-dk-step p { margin: 3px 0 0; color: var(--sf-text-muted); font-size: 13.5px; }
.sf-dk-pill {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px;
    border-radius: 999px; margin-left: 4px;
    background: color-mix(in srgb, var(--sf-primary) 14%, transparent);
    color: var(--sf-accent-text);
}
.sf-dk-zeile { align-items: center; }
.sf-dk-zmenge { color: var(--sf-text-muted); font-size: 13.5px; white-space: nowrap; padding: 0 12px; }
.sf-dk-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sf-dk-addr h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--sf-text-muted); margin: 0 0 7px;
}
.sf-dk-addr p { margin: 0; color: var(--sf-text); font-size: 14px; line-height: 1.55; }
.sf-dk-cta-wrap { text-align: center; margin-top: 8px; }
/* R7-C: Danke-CTA = Blau→Gold-Signatur wie Kasse/Bestellen. */
.sf-dk-cta {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%); color: #fff; padding: 12px 22px;
    border-radius: 10px; font-weight: 700;
    /* 3.3b: auch als <button> (Retry-Formular) identisch gestylt */
    border: 0; cursor: pointer; font-family: inherit; font-size: inherit;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent); transition: var(--sf-transition);
}
.sf-dk-cta:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
@media (max-width: 640px) {
    .sf-dk-addr-grid { grid-template-columns: 1fr; }
}

/* Konto — Bestellhistorie (Block 3.4) */
/* ── Konto-Übersicht: kompakte Ein-Zeilen-Rows + Suche + Scroll (Polish 2026-07-08) ── */
.sf-konto-cnt {
    margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sf-text-muted);
    background: color-mix(in srgb, var(--sf-text-muted) 12%, transparent);
    border-radius: 20px; padding: 2px 10px;
}
.sf-konto-suchbox { position: relative; margin: 4px 0 2px; }
.sf-konto-suchbox svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--sf-text-muted); pointer-events: none;
}
.sf-konto-suche {
    width: 100%; padding: 9px 12px 9px 34px; border-radius: 9px;
    border: 1px solid var(--sf-border);
    background: color-mix(in srgb, var(--sf-text-muted) 8%, var(--sf-flaeche));
    color: var(--sf-text); font-size: 13.5px; font-family: inherit;
}
.sf-konto-suche:focus { outline: none; border-color: color-mix(in srgb, var(--sf-primary) 55%, var(--sf-border)); }
.sf-konto-liste { max-height: 360px; overflow-y: auto; margin: 8px -8px 0; padding: 0 8px; }
.sf-konto-side .sf-konto-liste { max-height: 300px; }
.sf-konto-liste::-webkit-scrollbar { width: 7px; }
.sf-konto-liste::-webkit-scrollbar-thumb { background: var(--sf-border-hell); border-radius: 4px; }
.sf-konto-nomatch { display: none; font-size: 13px; color: var(--sf-text-muted); padding: 12px 4px 2px; }
.sf-konto-nomatch.is-shown { display: block; }

.sf-krow {
    display: flex; align-items: center; gap: 10px; padding: 11px 10px; margin: 0 -10px;
    border-top: 1px solid var(--sf-border); border-radius: 9px;
    text-decoration: none; color: var(--sf-text); font-size: 13.5px;
    transition: background 0.12s ease;
}
.sf-krow:first-child { border-top: none; }
.sf-krow.is-hidden { display: none; }
a.sf-krow:hover { background: color-mix(in srgb, var(--sf-primary) 7%, transparent); }
.sf-krow-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-krow-nr { font-weight: 700; }
.sf-krow-datum { color: var(--sf-text-muted); font-size: 12px; }
.sf-krow-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.sf-krow-betrag { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 78px; text-align: right; }
.sf-krow-chev { color: var(--sf-text-muted); display: inline-flex; }
.sf-krow-pdf { font-size: 12px; }

.sf-kpill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sf-kpill-blau { background: color-mix(in srgb, var(--sf-primary) 15%, transparent); color: var(--sf-accent-text); }
.sf-kpill-gruen { background: color-mix(in srgb, #2E9E6A 16%, transparent); color: #2E9E6A; }
[data-theme="dark"] .sf-kpill-gruen { background: color-mix(in srgb, #4CC58C 16%, transparent); color: #4CC58C; }
.sf-kpill-gold { background: color-mix(in srgb, var(--sf-akzent) 20%, transparent); color: #8A5A0B; }
[data-theme="dark"] .sf-kpill-gold { color: var(--sf-akzent); }
.sf-kpill-rot { background: color-mix(in srgb, #C0483F 16%, transparent); color: #C0483F; }
[data-theme="dark"] .sf-kpill-rot { background: color-mix(in srgb, #e08079 16%, transparent); color: #e08079; }
.sf-kpill-grau { background: color-mix(in srgb, var(--sf-text-muted) 14%, transparent); color: var(--sf-text-muted); }
.sf-kpill-teal { background: color-mix(in srgb, #1F9AA8 16%, transparent); color: #1F9AA8; }
[data-theme="dark"] .sf-kpill-teal { background: color-mix(in srgb, #4ec7d6 16%, transparent); color: #4ec7d6; }

/* ── Konto-Polish v2: Bereiche + KPI-Band + 2-Spalten (2026-07-08, Marco-Feedback) ── */
.sf-konto-bereich { background: var(--sf-flaeche); border: 1px solid var(--sf-border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--sf-schatten); margin-bottom: 16px; }
.sf-konto-bereich-kopf { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.sf-konto-bereich-kopf svg { color: var(--sf-accent-text); }
.sf-konto-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sf-text-muted); margin: 2px 0 8px; }
.sf-konto-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sf-konto-kpi-row:last-child { margin-bottom: 0; }
.sf-konto-kpi { border: 1px solid var(--sf-border); border-radius: 11px; padding: 12px 13px; background: color-mix(in srgb, var(--sf-text-muted) 6%, var(--sf-flaeche)); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.sf-konto-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-acc, var(--sf-primary)); }
.sf-konto-kpi-num { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--kpi-acc, var(--sf-text)); line-height: 1.1; }
.sf-konto-kpi-name { font-size: 12px; color: var(--sf-text-muted); font-weight: 600; }
.sf-konto-kpi.k-blau { --kpi-acc: var(--sf-accent-text); }
.sf-konto-kpi.k-teal { --kpi-acc: #1F9AA8; }
[data-theme="dark"] .sf-konto-kpi.k-teal { --kpi-acc: #4ec7d6; }
.sf-konto-kpi.k-gruen { --kpi-acc: #2E9E6A; }
[data-theme="dark"] .sf-konto-kpi.k-gruen { --kpi-acc: #4CC58C; }
.sf-konto-kpi.k-gold { --kpi-acc: #B7791F; }
[data-theme="dark"] .sf-konto-kpi.k-gold { --kpi-acc: var(--sf-akzent); }
.sf-konto-kpi.k-rot { --kpi-acc: #C0483F; }
[data-theme="dark"] .sf-konto-kpi.k-rot { --kpi-acc: #e08079; }
.sf-konto-kpi.k-grau { --kpi-acc: var(--sf-text-muted); }
.sf-konto-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sf-konto-spalte { min-width: 0; }
.sf-konto-spalte-kopf { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; margin-bottom: 8px; }
.sf-konto-kkarte { border: 1px solid var(--sf-border); border-radius: 11px; padding: 14px 16px; background: color-mix(in srgb, var(--sf-text-muted) 5%, var(--sf-flaeche)); text-decoration: none; color: var(--sf-text); display: block; }
.sf-konto-kkarte-link { transition: transform .15s ease, border-color .15s ease; }
.sf-konto-kkarte-link:hover { transform: translateY(-2px); border-color: var(--sf-border-hell); }
.sf-konto-kkarte-kopf { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.sf-konto-kkarte-kopf svg { color: var(--sf-accent-text); }
@media (max-width: 760px) { .sf-konto-zwei { grid-template-columns: 1fr; } }

/* ── Kunden-Bestell-Detail (4.1-C-4) ──────────────────────────────────────── */
.sf-obd { max-width: 760px; margin: 0 auto; }
.sf-obd-crumb { font-size: 12.5px; color: var(--sf-text-muted); margin-bottom: 14px; }
.sf-obd-crumb a { color: var(--sf-accent-text); text-decoration: none; }
.sf-obd-crumb a:hover { text-decoration: underline; }
.sf-obd-sep { margin: 0 6px; }
.sf-obd-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-obd-kopf h1 { font-size: 21px; margin: 0; }
.sf-obd-meta { font-size: 13.5px; color: var(--sf-text-muted); margin: 4px 0 18px; }
.sf-obd-meta b { color: var(--sf-text); font-weight: 600; }
.sf-obd-faellig { color: var(--sf-text-muted); }
.sf-obd-badge {
    font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    white-space: nowrap;
}
.sf-obd-b-suc { background: color-mix(in srgb, var(--sf-success) 16%, transparent); color: var(--sf-success); }
.sf-obd-b-warn { background: color-mix(in srgb, var(--sf-akzent) 18%, transparent); color: var(--sf-accent-text); }
.sf-obd-b-mut { background: color-mix(in srgb, var(--sf-text-muted) 16%, transparent); color: var(--sf-text-muted); }
.sf-obd-card {
    background: var(--sf-flaeche); border: 1px solid var(--sf-border);
    border-radius: 12px; padding: 16px 18px; box-shadow: var(--sf-schatten);
    margin-bottom: 14px;
}
.sf-obd-card-kopf {
    display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-text-muted);
    margin-bottom: 12px;
}
.sf-obd-card-kopf svg { color: var(--sf-accent-text); }
.sf-obd-hinweis { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--sf-text-muted); }
.sf-obd-hinweis svg { color: var(--sf-accent-text); flex-shrink: 0; }
.sf-obd-sendung {
    border: 1px solid var(--sf-border); border-left: 3px solid var(--sf-success);
    border-radius: 10px; padding: 13px 15px; margin-bottom: 12px;
}
.sf-obd-sendung:last-child { margin-bottom: 0; }
.sf-obd-sendung-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sf-obd-sendung-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 14px; color: var(--sf-text); }
.sf-obd-sendung-datum { font-size: 12.5px; color: var(--sf-text-muted); margin-left: auto; }
.sf-obd-track { font-size: 13px; margin: 4px 0 8px; color: var(--sf-text-muted); }
.sf-obd-track-v { font-family: ui-monospace, monospace; font-weight: 600; color: var(--sf-accent-text); }
.sf-obd-items { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.sf-obd-items li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--sf-border); }
.sf-obd-items li:first-child { border-top: none; }
.sf-obd-q { color: var(--sf-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-obd-dl {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    border: 1px solid var(--sf-primary); color: var(--sf-accent-text);
    border-radius: 9px; padding: 8px 13px;
}
.sf-obd-dl:hover { background: color-mix(in srgb, var(--sf-primary) 8%, transparent); }
.sf-obd-offen {
    border: 1px dashed var(--sf-akzent); border-radius: 10px; padding: 12px 15px;
    margin-top: 12px; background: color-mix(in srgb, var(--sf-akzent) 7%, transparent);
}
.sf-obd-offen-kopf { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--sf-accent-text); margin-bottom: 7px; }
.sf-obd-zwei { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.sf-obd-adr { font-size: 13.5px; color: var(--sf-text); line-height: 1.6; }
.sf-obd-sum { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sf-border); color: var(--sf-text); }
/* R7-C: Order-Detail-Gesamtbetrag im Blau→Gold-Verlauf (nur der Betrag). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-obd-sum span:last-child {
        background: linear-gradient(120deg, var(--sf-accent-text) 30%, var(--sf-akzent) 95%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
}
.sf-obd-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--sf-accent-text); text-decoration: none; }
.sf-obd-back:hover { text-decoration: underline; }
@media (max-width: 560px) { .sf-obd-zwei { grid-template-columns: 1fr; } }

/* ── Quick-Order / Schnellbestellung (Block 5.5, B2B-Cockpit) ──────────────── */
.sf-qo { max-width: 1120px; margin: 0 auto; }
.sf-qo-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.sf-qo-kopf h1 { margin: 0; font-size: 1.6rem; color: var(--sf-text); }
.sf-qo-sub { margin: 4px 0 0; color: var(--sf-text-muted); font-size: 0.92rem; max-width: 640px; }
.sf-qo-net30 {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem;
    color: #7A5410; background: color-mix(in srgb, var(--sf-akzent) 26%, var(--sf-flaeche));
    border: 1px solid color-mix(in srgb, var(--sf-akzent) 45%, transparent);
    padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
[data-theme="dark"] .sf-qo-net30 { color: #F2C879; }

/* Toolbar */
.sf-qo-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    background: var(--sf-karte-body); border: 1px solid var(--sf-border);
    border-radius: 12px; padding: 12px; margin: 14px 0 10px;
}
.sf-qo-sku {
    flex: 1; min-width: 260px; display: flex; align-items: center; gap: 8px;
    background: var(--sf-bg); border: 1px solid var(--sf-border-hell);
    border-radius: 9px; padding: 5px 6px 5px 10px; margin: 0;
}
.sf-qo-sku-icon { display: inline-flex; color: var(--sf-akzent); }
.sf-qo-sku input[type="text"] {
    flex: 1; border: none; background: transparent; color: var(--sf-text);
    font-size: 0.95rem; padding: 6px 2px; min-width: 80px; outline: none;
}
.sf-qo-sku-menge {
    width: 62px; border: 1px solid var(--sf-border-hell); border-radius: 7px;
    background: var(--sf-flaeche); color: var(--sf-text); padding: 6px 4px;
    text-align: center; font-variant-numeric: tabular-nums;
}
.sf-qo-sku-add {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%);
    color: #fff; border: none; border-radius: 7px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent);
    padding: 8px 13px; font-size: 0.88rem; font-weight: 500; white-space: nowrap;
    transition: var(--sf-transition);
}
.sf-qo-sku-add:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
/* Suchfeld-Wrapper + Live-Vorschau-Dropdown (Namenssuche) */
.sf-qo-search { position: relative; flex: 1 1 260px; min-width: 260px; }
.sf-qo-search .sf-qo-sku { width: 100%; flex: none; min-width: 0; }
.sf-qo-suggest {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 40; background: var(--sf-flaeche); border: 1px solid var(--sf-border-hell);
    border-radius: 10px; box-shadow: var(--sf-schatten-hover);
    overflow: hidden auto; max-height: 360px;
}
.sf-qo-suggest.is-offen { display: block; }
.sf-qo-suggest-row {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    background: transparent; border: none; border-top: 1px solid var(--sf-border);
    padding: 9px 12px; cursor: pointer; color: var(--sf-text);
}
.sf-qo-suggest-row:first-child { border-top: none; }
.sf-qo-suggest-row:hover { background: var(--sf-tint); }
/* Tastatur-Auswahl im Vorschlagsfeld (Pfeiltasten). Nur der so markierte
   Eintrag wird von Enter übernommen — ohne Markierung zählt das Getippte. */
.sf-qo-suggest-row.is-aktiv {
    background: var(--sf-tint);
    box-shadow: inset 3px 0 0 var(--sf-primary);
}
.sf-qo-sg-ampel { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sf-qo-sg-ampel--auf_lager { background: #1D9E75; }
.sf-qo-sg-ampel--knapp { background: #BA7517; }
.sf-qo-sg-ampel--lieferbar { background: var(--sf-text-muted); }
[data-theme="dark"] .sf-qo-sg-ampel--auf_lager { background: #5DCAA5; }
[data-theme="dark"] .sf-qo-sg-ampel--knapp { background: #EF9F27; }
.sf-qo-sg-info { flex: 1; min-width: 0; }
.sf-qo-sg-marke { font-size: 0.7rem; color: var(--sf-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.sf-qo-sg-name { font-size: 0.9rem; font-weight: 500; color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-qo-sg-meta { font-size: 0.72rem; color: var(--sf-text-muted); font-family: monospace; }
.sf-qo-sg-preis { font-size: 0.9rem; font-weight: 500; color: var(--sf-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-qo-suggest-leer { padding: 12px; text-align: center; color: var(--sf-text-muted); font-size: 0.86rem; }
.sf-qo-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sf-qo-tools form { margin: 0; }
.sf-qo-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--sf-flaeche); color: var(--sf-text);
    border: 1px solid var(--sf-border-hell); border-radius: 8px;
    padding: 8px 12px; font-size: 0.86rem; white-space: nowrap; text-decoration: none;
}
.sf-qo-btn:hover { background: var(--sf-tint); border-color: var(--sf-primary); }
.sf-qo-csv { display: inline-flex; align-items: center; gap: 6px; }
.sf-qo-file {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--sf-flaeche); color: var(--sf-text-muted);
    border: 1px dashed var(--sf-border-hell); border-radius: 8px;
    padding: 8px 12px; font-size: 0.86rem; max-width: 220px;
}
.sf-qo-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-qo-file input[type="file"] { max-width: 132px; font-size: 0.76rem; color: var(--sf-text-muted); }

/* Gespeicherte-Listen-Dropdown */
.sf-qo-listen { position: relative; }
.sf-qo-listen > summary { list-style: none; }
.sf-qo-listen > summary::-webkit-details-marker { display: none; }
.sf-qo-listen-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 240px; background: var(--sf-flaeche);
    border: 1px solid var(--sf-border-hell); border-radius: 10px;
    box-shadow: var(--sf-schatten-hover); padding: 6px;
}
.sf-qo-listen-row { display: flex; align-items: center; gap: 4px; }
.sf-qo-listen-row form { margin: 0; flex: 0 0 auto; }
.sf-qo-listen-row form:first-child { flex: 1; }
.sf-qo-listen-load {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; cursor: pointer; background: transparent; border: none;
    color: var(--sf-text); padding: 8px 10px; border-radius: 7px; font-size: 0.88rem;
    text-align: left;
}
.sf-qo-listen-load:hover { background: var(--sf-tint); }
.sf-qo-listen-n { color: var(--sf-text-muted); font-size: 0.76rem; white-space: nowrap; }
.sf-qo-listen-del {
    cursor: pointer; background: transparent; border: none; color: var(--sf-text-muted);
    padding: 8px; border-radius: 7px; display: inline-flex;
}
.sf-qo-listen-del:hover { color: #C0392B; background: color-mix(in srgb, #C0392B 12%, transparent); }
.sf-qo-listen-leer { color: var(--sf-text-muted); font-size: 0.84rem; padding: 8px 10px; margin: 0; }

/* Legende */
.sf-qo-legende {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    color: var(--sf-text-muted); font-size: 0.78rem; margin: 0 2px 8px;
}
.sf-qo-legende-hint { margin-left: auto; }
.sf-qo-ampel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 0; }
.sf-qo-ampel--auf_lager { background: #1D9E75; }
.sf-qo-ampel--knapp { background: #BA7517; }
.sf-qo-ampel--lieferbar { background: var(--sf-text-muted); }
[data-theme="dark"] .sf-qo-ampel--auf_lager { background: #5DCAA5; }
[data-theme="dark"] .sf-qo-ampel--knapp { background: #EF9F27; }

/* Grid */
.sf-qo-grid {
    border: 1px solid var(--sf-border); border-radius: 12px; overflow: hidden;
    background: var(--sf-flaeche);
}
.sf-qo-head, .sf-qo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 194px 96px 132px 92px 40px;
    gap: 10px; align-items: center; padding: 11px 14px;
}
.sf-qo-head {
    background: var(--sf-bg-tief); color: var(--sf-text-muted);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
}
.sf-qo-mid { text-align: center; }
.sf-qo-right { text-align: right; }
.sf-qo-row { border-top: 1px solid var(--sf-border); }
.sf-qo-row:nth-child(even) { background: color-mix(in srgb, var(--sf-primary) 3%, var(--sf-flaeche)); }
.sf-qo-marke { font-size: 0.72rem; color: var(--sf-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.sf-qo-name { display: block; color: var(--sf-text); font-weight: 500; font-size: 0.92rem; text-decoration: none; }
.sf-qo-name:hover { color: var(--sf-accent-text); }
.sf-qo-meta { display: flex; gap: 8px; align-items: center; margin-top: 2px; flex-wrap: wrap; }
.sf-qo-sku-tag { font-family: monospace; font-size: 0.74rem; color: var(--sf-text-muted); }
.sf-qo-var {
    font-size: 0.72rem; color: var(--sf-accent-text);
    background: var(--sf-tint); border-radius: 5px; padding: 1px 6px;
}
.sf-qo-c-vpe { color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-qo-preiszeile { display: flex; align-items: baseline; gap: 6px; }
.sf-qo-streich { color: var(--sf-text-muted); text-decoration: line-through; font-size: 0.78rem; }
.sf-qo-einzel { color: var(--sf-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.sf-qo-staffel { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; margin-top: 2px; }
.sf-qo-staffel--upsell { color: #BA7517; }
.sf-qo-staffel--ok { color: #1D9E75; }
.sf-qo-staffel--none { color: var(--sf-text-muted); }
[data-theme="dark"] .sf-qo-staffel--upsell { color: #EF9F27; }
[data-theme="dark"] .sf-qo-staffel--ok { color: #5DCAA5; }
.sf-qo-bestand-txt { display: block; font-size: 0.7rem; color: var(--sf-text-muted); margin-top: 2px; }
.sf-qo-bestand-txt--knapp { color: #BA7517; }
[data-theme="dark"] .sf-qo-bestand-txt--knapp { color: #EF9F27; }

/* Menge-Stepper (−  [input] ✓  +) */
.sf-qo-stepper {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sf-border-hell); border-radius: 8px; overflow: hidden;
}
.sf-qo-stepper form { display: inline-flex; align-items: center; margin: 0; }
.sf-qo-stepper button {
    cursor: pointer; background: var(--sf-flaeche); color: var(--sf-text);
    border: none; padding: 6px 9px; font-size: 0.95rem; line-height: 1;
    display: inline-flex; align-items: center;
}
.sf-qo-stepper button:hover { background: var(--sf-tint); }
.sf-qo-set { border-left: 1px solid var(--sf-border); border-right: 1px solid var(--sf-border); }
.sf-qo-menge-input {
    width: 44px; border: none; background: transparent; color: var(--sf-text);
    text-align: center; font-size: 0.9rem; padding: 6px 2px; outline: none;
    font-variant-numeric: tabular-nums;
}
.sf-qo-menge-go { color: var(--sf-text-muted); padding: 6px 6px; opacity: 0.5; }
.sf-qo-set:focus-within .sf-qo-menge-go { opacity: 1; color: var(--sf-primary); }
.sf-qo-c-summe { color: var(--sf-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.sf-qo-c-del { margin: 0; display: flex; justify-content: center; }
.sf-qo-remove {
    cursor: pointer; background: transparent; border: none; color: var(--sf-text-muted);
    padding: 6px; border-radius: 6px; display: inline-flex;
}
.sf-qo-remove:hover { color: #C0392B; background: color-mix(in srgb, #C0392B 12%, transparent); }

/* Footer */
.sf-qo-footer {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sf-border);
}
.sf-qo-footer form { margin: 0; }
.sf-qo-summe-box { flex: 1; min-width: 180px; }
.sf-qo-summe-label { font-size: 0.8rem; color: var(--sf-text-muted); }
.sf-qo-summe-wert { font-size: 1.5rem; font-weight: 600; color: var(--sf-text); font-variant-numeric: tabular-nums; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sf-qo-summe-wert {
        background: linear-gradient(120deg, var(--sf-accent-text) 30%, var(--sf-akzent) 95%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.sf-qo-summe-hint { font-size: 0.74rem; color: var(--sf-text-muted); }
.sf-qo-save { display: flex; align-items: center; gap: 6px; }
.sf-qo-save input[type="text"] {
    width: 200px; border: 1px solid var(--sf-border-hell); border-radius: 8px;
    background: var(--sf-bg); color: var(--sf-text); padding: 8px 10px; font-size: 0.86rem;
}
.sf-qo-cta {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%);
    color: #FFFFFF; border: none; border-radius: 9px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent);
    padding: 11px 18px; font-size: 0.95rem; font-weight: 600; white-space: nowrap;
    transition: var(--sf-transition);
}
.sf-qo-cta:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }

/* Header-Quick-Link */
.sf-quickorder-link {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    color: var(--sf-accent-text); background: var(--sf-flaeche-2);
    border: 1px solid color-mix(in srgb, var(--sf-accent-text) 30%, transparent);
    border-radius: 8px; padding: 6px 11px; font-size: 0.85rem;
}
.sf-quickorder-link:hover, .sf-quickorder-link.is-aktiv { background: var(--sf-akzent); color: #2A1B04; border-color: var(--sf-akzent); }

/* Leer-Zustand */
.sf-qo-leer { text-align: center; padding: 48px 20px; color: var(--sf-text-muted); }
.sf-qo-leer-icon { color: var(--sf-akzent); margin-bottom: 8px; }
.sf-qo-leer h2 { margin: 0 0 6px; color: var(--sf-text); font-size: 1.15rem; }
.sf-qo-leer p { margin: 0 0 16px; }

/* Mobile: Grid -> gestapelte Karten */
@media (max-width: 768px) {
    .sf-qo-head { display: none; }
    .sf-qo-row {
        grid-template-columns: 1fr auto; gap: 6px 10px;
        padding: 12px 14px; align-items: center;
    }
    .sf-qo-c-art { grid-column: 1 / -1; }
    .sf-qo-c-vpe { display: none; }
    .sf-qo-c-preis { grid-column: 1; text-align: left; }
    .sf-qo-c-bestand { grid-column: 2; text-align: right; }
    .sf-qo-c-menge { grid-column: 1; justify-self: start; }
    .sf-qo-c-summe { grid-column: 2; text-align: right; }
    .sf-qo-c-del { grid-column: 2; justify-self: end; }
    .sf-qo-mid { text-align: left; }
    .sf-qo-listen-menu { right: auto; left: 0; }
}

/* ── Block 5.6 — nur-B2B-Riegel: Preis verborgen + Freigabe-Banner ─────── */
.sf-produkt-preis-frei {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sf-accent-text);
    background: color-mix(in srgb, var(--sf-primary) 12%, transparent);
    border-radius: 8px;
    padding: 5px 9px;
}
.sf-pd-preis-frei {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sf-accent-text);
    background: color-mix(in srgb, var(--sf-primary) 12%, transparent);
    border-radius: 10px;
    padding: 10px 14px;
}
.sf-pd-frei-hint {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--sf-text-muted);
    max-width: 42ch;
}
.sf-freigabe-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--sf-akzent) 40%, var(--sf-border));
    background: color-mix(in srgb, var(--sf-akzent) 12%, var(--sf-flaeche));
    color: var(--sf-text);
}
.sf-freigabe-banner svg { flex: 0 0 auto; margin-top: 1px; color: var(--sf-akzent); }
.sf-freigabe-banner b { display: block; font-size: 14px; }
.sf-freigabe-banner span { display: block; margin-top: 3px; font-size: 13px; color: var(--sf-text-muted); }

/* ── Zahlungsart-Wahl (R9 6a) — nur freigegebene B2B-Kunden: Stripe|Rechnung */
.sf-co-zahlart {
    margin: 14px 0 4px; padding: 12px 14px;
    border: 1px solid var(--sf-border); border-radius: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.sf-co-zahlart-titel {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--sf-text-muted);
}
.sf-co-zahlart-opt {
    display: grid; grid-template-columns: auto 1fr; column-gap: 8px;
    align-items: center; cursor: pointer;
}
.sf-co-zahlart-opt input { accent-color: var(--sf-akzent); }
.sf-co-zahlart-name { font-size: 14px; font-weight: 600; }
.sf-co-zahlart-hint {
    grid-column: 2; font-size: 12px; color: var(--sf-text-muted);
}

/* ── Stripe-Zahlung (Block 3.3) ─────────────────────────────────────────── */
/* Checkout: „Sichere Zahlung über Stripe"-Hinweis unter dem Bestellen-Button */
.sf-co-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sf-text-muted);
}
.sf-co-secure svg { flex: 0 0 auto; }
/* Danke-Seite: Abbruch-Zustand (Stripe cancel_url) — Warn-Icon statt grün */
.sf-dk-check.is-warn {
    background: color-mix(in srgb, var(--sf-akzent) 16%, transparent);
    color: var(--sf-akzent);
}
/* Danke-Seite: „Zahlung erhalten"-Pille grün (bezahlt) */
.sf-dk-pill-ok {
    display: inline-flex; align-items: center; gap: 5px;
    background: color-mix(in srgb, var(--sf-success) 16%, transparent);
    color: var(--sf-success);
}
.sf-dk-pill-ok svg { flex: 0 0 auto; }
/* Danke-Seite: Retry-Karte (Zahlung erneut starten) */
.sf-dk-retry { text-align: center; }
.sf-dk-retry p { margin: 0 0 14px; color: var(--sf-text-muted); }
/* 3.3b-3b: Konto-Bestelldetail — Nachzahlen-Kasten bei abgebrochener Zahlung */
.sf-obd-zahl {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; padding: 14px 16px;
    border: 1px solid color-mix(in srgb, #C0483F 35%, transparent);
    background: color-mix(in srgb, #C0483F 8%, transparent); border-radius: 12px;
}
.sf-obd-zahl > span { display: inline-flex; align-items: center; gap: 8px; color: #C0483F; font-weight: 600; }
.sf-obd-zahl form { margin: 0; }

/* ═══ Block 6.1 — Shop-Rechtsseiten (Impressum/AGB/Widerruf/Versand/Zahlung) ═══ */
.sf-rechtsseite { max-width: 820px; margin: 0 auto; }
.sf-rechtsseite-titel { font-size: 24px; font-weight: 600; margin: 2px 0 18px; color: var(--sf-text); }
.sf-rechtsseite-text {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 14px;
    color: var(--sf-text);
    max-width: 760px;
}
.sf-impressum { font-size: 14px; line-height: 1.7; color: var(--sf-text); max-width: 620px; }
.sf-impressum-block { margin: 0 0 18px; }
.sf-impressum-block strong { font-weight: 600; }
.sf-impressum-hinweis { color: var(--sf-text-muted); font-style: italic; margin-top: 8px; }

/* ── 6.1-5 Checkout-Rechts-Hinweis (Button-Lösung §312j BGB) ── */
.sf-co-recht { font-size: 12px; color: var(--sf-text-muted); line-height: 1.6; margin: 14px 0 10px; }
.sf-co-recht a { color: var(--sf-akzent); text-decoration: underline; text-underline-offset: 2px; }
.sf-co-recht a:hover { opacity: 0.85; }

/* ── 6.4-6 Rücksendungen: Konto-Detail (Timeline) + Antragsformular ── */
.sf-ret-intro { color: var(--sf-text-muted); font-size: 13.5px; margin: 0 0 12px; }
.sf-ret-cta { display: inline-flex; }
.sf-ret-eintrag { padding: 12px 0; border-top: 1px solid var(--sf-border); }
.sf-ret-eintrag:first-of-type { border-top: 0; padding-top: 2px; }
.sf-ret-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sf-ret-nr { font-weight: 700; }
.sf-ret-datum { color: var(--sf-text-muted); font-size: 12.5px; }
.sf-ret-betrag { margin-left: auto; font-size: 13px; color: var(--sf-text-muted); }
.sf-ret-betrag b { color: var(--sf-text); }
.sf-ret-timeline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.sf-ret-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sf-text-muted); white-space: nowrap; }
.sf-ret-step.done { color: var(--sf-text); font-weight: 600; }
.sf-ret-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--sf-border); color: var(--sf-text-muted); }
.sf-ret-step.done .sf-ret-dot { background: var(--sf-success); color: #fff; }
.sf-ret-lin { width: 26px; height: 2px; background: var(--sf-border); margin: 0 8px; flex-shrink: 0; }
.sf-ret-lin.done { background: var(--sf-success); }
.sf-ret-hinweis { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-top: 10px;
    background: color-mix(in srgb, var(--sf-akzent) 12%, var(--sf-flaeche));
    border: 1px solid color-mix(in srgb, var(--sf-akzent) 35%, var(--sf-border)); }
.sf-ret-hinweis.gruen { background: color-mix(in srgb, var(--sf-success) 12%, var(--sf-flaeche));
    border-color: color-mix(in srgb, var(--sf-success) 35%, var(--sf-border)); }
.sf-ret-hinweis.rot { background: color-mix(in srgb, #D14343 12%, var(--sf-flaeche));
    border-color: color-mix(in srgb, #D14343 35%, var(--sf-border)); }
.sf-ret-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sf-border); }
.sf-ret-zeile:last-of-type { border-bottom: 0; }
.sf-ret-wahl input { width: 17px; height: 17px; accent-color: var(--sf-primary); }
.sf-ret-artikel { min-width: 0; }
.sf-ret-name { font-weight: 600; font-size: 14px; }
.sf-ret-sub { color: var(--sf-text-muted); font-size: 12px; }
.sf-ret-menge { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sf-ret-select { border: 1px solid var(--sf-border-hell); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; background: var(--sf-flaeche); color: var(--sf-text); }
.sf-ret-select-breit { width: 100%; }
.sf-ret-von { color: var(--sf-text-muted); font-size: 12.5px; white-space: nowrap; }
.sf-ret-lbl { display: block; color: var(--sf-text-muted); font-size: 12.5px; margin-bottom: 5px; }
.sf-ret-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.sf-ret-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.sf-ret-vorschau { color: var(--sf-text-muted); font-size: 13.5px; }
.sf-ret-vorschau b { color: var(--sf-text); }
.sf-ret-vh { font-size: 12px; }
@media (max-width: 720px) {
    .sf-ret-form-grid { grid-template-columns: 1fr; }
    .sf-ret-betrag { margin-left: 0; width: 100%; }
}

/* ── 6.3 Rabattcode — Warenkorb + Kasse (Zustände: Eingabe / eingelöst / Fehler) ── */
.sf-rab { margin: 12px 0 4px; }
.sf-rab-zeile .sf-rab-betrag { color: var(--sf-success); font-weight: 600; }
.sf-rab-details { margin: 12px 0 4px; }
.sf-rab-details summary { cursor: pointer; font-size: 13px; color: var(--sf-text-muted); user-select: none; }
.sf-rab-details summary:hover { color: var(--sf-text); }
.sf-rab-details[open] summary { color: var(--sf-text); margin-bottom: 8px; }
.sf-rab-form { display: flex; gap: 8px; }
.sf-rab-input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--sf-border-hell); border-radius: 9px; background: var(--sf-flaeche); color: var(--sf-text); font-size: 14px; text-transform: uppercase; }
.sf-rab-input::placeholder { text-transform: none; }
.sf-rab-input:focus { outline: none; border-color: var(--sf-akzent); }
.sf-rab-btn { padding: 9px 14px; border: 0; border-radius: 9px; background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%); color: #FFFFFF; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent); transition: var(--sf-transition); }
.sf-rab-btn:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
.sf-rab-aktiv { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 4px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--sf-success) 45%, transparent); background: color-mix(in srgb, var(--sf-success) 12%, transparent); border-radius: 9px; }
.sf-rab-aktiv-text { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--sf-success); }
.sf-rab-aktiv form { display: flex; }
.sf-rab-x { border: 0; background: transparent; color: var(--sf-text-muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.sf-rab-x:hover { color: #C0483F; background: color-mix(in srgb, #C0483F 12%, transparent); }
[data-theme="dark"] .sf-rab-x:hover { color: #e08079; background: color-mix(in srgb, #e08079 12%, transparent); }
.sf-rab-fehler { margin-top: 8px; font-size: 13px; color: #C0483F; }
[data-theme="dark"] .sf-rab-fehler { color: #e08079; }

/* ── Block R3/6.5 — Produktbewertungen (Sektion Produktseite) ─────────────── */
.sf-bw-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sf-bw-kopf h2 { margin: 0; }
.sf-bw-sterne { color: var(--sf-akzent); font-size: 17px; letter-spacing: 2px; }
.sf-bw-schnitt { font-weight: 700; color: var(--sf-text); }
.sf-bw-anzahl { font-size: 13px; color: var(--sf-text-muted); }
.sf-bw-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.sf-bw-karte { background: var(--sf-bg-tief); border: 1px solid var(--sf-border); border-radius: 11px; padding: 12px 14px; }
.sf-bw-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-bw-name { font-size: 13px; font-weight: 600; color: var(--sf-text); }
.sf-bw-badge { font-size: 11px; color: var(--sf-success); border: 1px solid color-mix(in srgb, var(--sf-success) 55%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sf-bw-sterne-s { color: var(--sf-akzent); font-size: 12px; letter-spacing: 2px; }
.sf-bw-datum { font-size: 12px; color: var(--sf-text-muted); margin-left: auto; }
.sf-bw-text { font-size: 13px; color: var(--sf-text); margin: 8px 0 0; line-height: 1.6; white-space: pre-line; }
.sf-bw-gast { font-size: 13px; color: var(--sf-text-muted); margin: 12px 0 0; }
.sf-bw-gast a { color: var(--sf-accent-text); font-weight: 600; }
.sf-bw-eigene { margin-top: 12px; border-color: var(--sf-border-hell); }
.sf-bw-pille { font-size: 11px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sf-bw-pille-offen { color: var(--sf-akzent); border: 1px solid color-mix(in srgb, var(--sf-akzent) 60%, transparent); }
.sf-bw-pille-ok { color: var(--sf-success); border: 1px solid color-mix(in srgb, var(--sf-success) 55%, transparent); }
.sf-bw-pille-neutral { color: var(--sf-text-muted); border: 1px solid var(--sf-border-hell); }

/* Formular — Sterne-Eingabe CSS-only: Radios 5→1 im DOM, row-reverse dreht
   die Optik auf 1→5; :checked ~ label färbt alle Sterne links davon. */
.sf-bw-form { margin-top: 12px; background: var(--sf-bg-tief); border: 1px solid var(--sf-border-hell); border-radius: 11px; padding: 14px 16px; }
.sf-bw-form-titel { font-size: 14px; font-weight: 700; color: var(--sf-text); margin: 0 0 8px; }
.sf-bw-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sf-bw-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-bw-input label { font-size: 26px; line-height: 1; color: var(--sf-border-hell); cursor: pointer; padding: 0 2px; transition: color 0.12s ease; }
.sf-bw-input label:hover,
.sf-bw-input label:hover ~ label,
.sf-bw-input input:checked ~ label { color: var(--sf-akzent); }
.sf-bw-input input:focus-visible + label { outline: 2px solid var(--sf-accent-text); outline-offset: 2px; border-radius: 4px; }
.sf-bw-textarea { display: block; width: 100%; margin-top: 10px; background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--sf-text); font-family: inherit; resize: vertical; }
.sf-bw-textarea:focus { outline: none; border-color: var(--sf-accent-text); }
.sf-bw-consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 12px; color: var(--sf-text-muted); line-height: 1.5; cursor: pointer; }
.sf-bw-consent input { margin-top: 2px; flex-shrink: 0; }
.sf-bw-form-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-bw-submit { background: linear-gradient(135deg, var(--sf-primary) 15%, var(--sf-akzent) 120%); color: #FFFFFF; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 30%, transparent); transition: var(--sf-transition); }
.sf-bw-submit:hover { filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-primary) 45%, transparent); }
.sf-bw-hinweis { font-size: 12px; color: var(--sf-text-muted); }
@media (max-width: 640px) {
    .sf-bw-datum { margin-left: 0; width: 100%; }
    .sf-bw-form-fuss { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Karten-Sterne im Produkt-Grid (R3-I) — Ø-Sterne + Anzahl auf der Karte,
   nur gerendert wenn das Produkt freigegebene Bewertungen hat. */
.sf-produkt-bw { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sf-bw-sterne-mini { color: var(--sf-akzent); font-size: 12px; letter-spacing: 1px; line-height: 1; }
.sf-bw-mini-zahl { font-size: 11px; color: var(--sf-text-muted); }

/* ── R26 Gewerbenachweis im Kundenkonto (2026-08-07) ──────────────────────
   Ohne Nachweis bleibt der Kunde B2C — die Karte ist ein Angebot, keine
   Sperre. Farben deshalb ruhig; nur die Ablehnung wird deutlich. */
.sf-konto-nw-hinweis, .sf-konto-nw-wartet, .sf-konto-nw-ok,
.sf-konto-nw-abgelehnt {
    display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
    font-size: 0.9rem; line-height: 1.5; margin: 0 0 14px;
}
.sf-konto-nw-ok { color: #1D9E75; }
.sf-konto-nw-wartet { color: var(--sf-text-muted); }
.sf-konto-nw-abgelehnt { color: #BA7517; }
.sf-konto-nw-grund {
    display: block; width: 100%; font-style: italic;
    color: var(--sf-text); padding-left: 23px;
}
[data-theme="dark"] .sf-konto-nw-ok { color: #5DCAA5; }
[data-theme="dark"] .sf-konto-nw-abgelehnt { color: #EF9F27; }

.sf-konto-nw-form {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px; border: 1px solid var(--sf-border);
    border-radius: 10px; background: var(--sf-tint);
}
.sf-konto-nw-art { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.sf-konto-nw-art select {
    padding: 7px 10px; border: 1px solid var(--sf-border-hell);
    border-radius: 8px; background: var(--sf-flaeche); color: var(--sf-text);
}
.sf-konto-nw-datei {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 12px; border: 1px solid var(--sf-border-hell);
    border-radius: 8px; background: var(--sf-flaeche); font-size: 0.85rem;
}
.sf-konto-nw-datei input[type="file"] { max-width: 190px; font-size: 0.8rem; }
.sf-konto-nw-limit { font-size: 0.78rem; color: var(--sf-text-muted); }

.sf-konto-nw-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.sf-konto-nw-zeile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 0; border-top: 1px solid var(--sf-border);
    font-size: 0.87rem;
}
.sf-konto-nw-name { color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; }
.sf-konto-nw-weg { font-size: 0.78rem; color: var(--sf-text-muted); font-style: italic; }
.sf-konto-nw-status {
    font-size: 0.76rem; padding: 3px 9px; border-radius: 999px;
    background: var(--sf-tint); color: var(--sf-text-muted); white-space: nowrap;
}
.sf-konto-nw-status.s-freigegeben { color: #1D9E75; }
.sf-konto-nw-status.s-abgelehnt { color: #BA7517; }
[data-theme="dark"] .sf-konto-nw-status.s-freigegeben { color: #5DCAA5; }
[data-theme="dark"] .sf-konto-nw-status.s-abgelehnt { color: #EF9F27; }

@media (max-width: 640px) {
    .sf-konto-nw-form { flex-direction: column; align-items: stretch; }
    .sf-konto-nw-datei input[type="file"] { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   D3b — Startseiten-Bausteine (2026-08-12)
   ═══════════════════════════════════════════════════════════════════════
   Hero · Vertrauensband · „Kunde werden" · Beitrags-Anriss.
   Erste Nutzung der D1-Tokens (Maße, Typo, Raster).

   ⚠️ Der Entwurf schlug `.sf-trust` für das Vertrauensband vor — der Name ist
   BELEGT (Leiste im Kopf, 4 Regeln). Hier heißt es `.sf-vertrauen`.

   Farbe trägt nie allein: jede Auszeichnung hat zusätzlich ein Symbol, einen
   Rahmen oder Schriftgewicht. Getönte Flächen leiten sich per color-mix aus
   den ZWEI Shop-Farben ab — damit funktioniert alles mit jedem Farbwert,
   nicht nur mit dem Blau des Beispiel-Shops.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Nur die Startseite: Begrenzung von .sf-main aufheben ─────────────── */
/* `.sf-main` ist auf 1440px begrenzt und zentriert. Darin kann keine Bahn
   durchlaufen — sie bleibt eine eingerückte Fläche mit Rändern (Marco-Fund
   2026-08-12 am zweiten Bildschirmfoto). Die Begrenzung wandert deshalb auf
   der Startseite nach INNEN: `.sf-main` wird frei, und die Abschnitte, die
   begrenzt bleiben sollen, holen sich den Rahmen selbst.
   Die Body-Klasse setzt ausschließlich `index.html` — jede andere Seite
   (Produkte, Warenkorb, Konto, Kasse) bleibt exakt wie vorher. */
body.sf-ist-start .sf-main {
    max-width: none;
    padding: 0 0 52px;
}
body.sf-ist-start .sf-flashes,
body.sf-ist-start .sf-freigabe-banner,
body.sf-ist-start .sf-band,
body.sf-ist-start .sf-produkte-bereich,
body.sf-ist-start .sf-marken,
body.sf-ist-start .sf-leer {
    /* EINE Breite fuer alles: die Kopfleiste und die Baender laufen auf
       --sf-max (1240px). Hier stand vorher der Altwert 1440px von .sf-main —
       dadurch standen Kopf und Inhalt auf verschiedenen Kanten und die Seite
       wirkte verschoben (Marco-Fund 2026-08-12). */
    max-width: var(--sf-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sf-gutter);
    padding-right: var(--sf-gutter);
}
/* Den oberen Abstand, den vorher .sf-main lieferte, tragen jetzt die
   Abschnitte selbst — sonst kleben sie am Band darüber. */
body.sf-ist-start .sf-produkte-bereich,
body.sf-ist-start .sf-marken,
body.sf-ist-start .sf-leer { margin-top: 28px; }
body.sf-ist-start .sf-flashes,
body.sf-ist-start .sf-freigabe-banner { margin-top: 20px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* ZWEISTUFIG: die Bahn läuft über die volle Breite und trägt Tönung und
   Trennlinie, der Inhalt darin ist auf --sf-max begrenzt. Beides in EINE
   Ebene zu legen macht aus der durchgehenden Bahn eine eingerückte Kiste —
   genau dieser Fehler wurde am 2026-08-12 im Vergleich mit dem Entwurf
   sichtbar. Gilt genauso für Vertrauensband und Schritte weiter unten. */
/* Ruhiger Rhythmus statt Streifenmuster: NUR zwei getoente Flaechen auf der
   ganzen Seite — der Hero oben und die Aktion. Alles andere liegt auf dem
   Seitengrund, ohne Trennlinie. Fuenf wechselnde Flaechen mit Kanten sahen
   nach Baukasten aus (Marco-Fund 2026-08-12). Abstand trennt, nicht Striche. */
.sf-hero-bahn {
    background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg));
}
.sf-hero {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: var(--sf-band-y) var(--sf-gutter);
    display: grid;
    grid-template-columns: var(--sf-hero);
    gap: var(--sf-block-gap);
    align-items: center;
}
/* Ohne gepflegtes Bild gibt es nur eine Spalte — sonst bliebe rechts eine
   leere Rasterspalte stehen und der Text klebte auf der halben Breite. */
.sf-hero-bahn.ohne-bild .sf-hero { grid-template-columns: 1fr; }

.sf-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.sf-hero-eyebrow {
    font-size: var(--sf-label);
    font-weight: 600;
    letter-spacing: var(--sf-label-ls);
    text-transform: uppercase;
    /* Abgedunkelter Akzent: die reine Akzentfarbe wäre als Text zu hell. */
    color: color-mix(in srgb, var(--sf-akzent) 55%, var(--sf-text));
    margin: 0;
}
.sf-hero-titel {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h1);
    line-height: 1.04;
    letter-spacing: var(--sf-h1-ls);
    font-weight: 700;
    color: var(--sf-text);
    margin: 0;
    max-width: 16ch;
    text-wrap: pretty;
}
.sf-hero-fliess {
    font-size: 17px;
    line-height: 1.55;
    color: var(--sf-text-muted);
    max-width: 46ch;
    margin: 0;
    text-wrap: pretty;
}
.sf-hero-argumente {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sf-hero-argumente li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sf-text);
}
/* Kästchen mit Haken statt rundem Symbol — so im Entwurf. Der Rahmen trägt
   die Form, die Farbe ist nur Zugabe. */
.sf-hero-haken {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    border-radius: 5px;
    border: 1px solid var(--sf-border-hell);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: color-mix(in srgb, var(--sf-akzent) 55%, var(--sf-text));
}

.sf-hero-wege { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.sf-hero-knopf,
.sf-hero-knopf-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sf-tap);
    padding: 0 22px;
    border-radius: var(--sf-radius-s);
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    transition: var(--sf-transition);
}
.sf-hero-knopf {
    background: var(--sf-primary);
    color: #FFFFFF;
    border: 1px solid var(--sf-primary);
}
.sf-hero-knopf:hover { filter: brightness(1.08); color: #FFFFFF; }
.sf-hero-knopf-2 {
    background: transparent;
    color: var(--sf-text);
    border: 1px solid var(--sf-border-hell);
}
.sf-hero-knopf-2:hover { border-color: var(--sf-primary); color: var(--sf-primary); }

.sf-hero-bild {
    border-radius: var(--sf-radius);
    overflow: hidden;
    background: var(--sf-bild-bg);
    min-height: var(--sf-hero-min);
    display: flex;
}
.sf-hero-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Vertrauensband ───────────────────────────────────────────────────── */
/* Schmales Band direkt unter dem Hero (28px statt --sf-band-y): es trennt
   Kopf und Sortiment, ohne sich als eigener Abschnitt aufzuspielen. */
.sf-vertrauen-bahn {
    /* Gehoert optisch zum Hero — gleiche Toenung, kein Schnitt dazwischen. */
    background: color-mix(in srgb, var(--sf-primary) 9%, var(--sf-bg));
}
.sf-vertrauen {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 28px var(--sf-gutter);
}
.sf-vertrauen-titel {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h3);
    line-height: var(--sf-h3-lh);
    color: var(--sf-text);
    margin: 0 0 16px;
}
.sf-vertrauen-raster {
    display: grid;
    grid-template-columns: var(--sf-cols-trust);
    gap: 16px;
}
/* Kein Kasten, sondern ein Strich links — so im Entwurf. Der Strich trägt
   Position und Stärke, die Akzentfarbe ist nur Zugabe. */
.sf-vertrauen-punkt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 14px;
    border-left: 2px solid var(--sf-akzent);
}
.sf-vertrauen-punkt h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sf-text);
    margin: 0;
}
.sf-vertrauen-punkt p {
    font-size: var(--sf-klein);
    line-height: var(--sf-klein-lh);
    color: var(--sf-text-muted);
    margin: 0;
}

/* ── „Kunde werden" in drei Schritten ─────────────────────────────────── */
.sf-schritte-bahn { /* liegt auf dem Seitengrund, ohne Kante */ }
.sf-schritte {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: var(--sf-band-y) var(--sf-gutter);
}
.sf-schritte-titel {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h2);
    line-height: var(--sf-h2-lh);
    letter-spacing: var(--sf-h2-ls);
    color: var(--sf-text);
    margin: 0 0 12px;
}
.sf-schritte-vorspann {
    font-size: var(--sf-body);
    line-height: var(--sf-body-lh);
    color: var(--sf-text-muted);
    max-width: 60ch;
    margin: 0 0 24px;
}
.sf-schritte-raster {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: var(--sf-cols-trust);
    gap: var(--sf-raster-gap);
    counter-reset: schritt;
}
.sf-schritt {
    padding: var(--sf-card-pad);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-flaeche);
}
/* Die Ziffer trägt zusätzlich Rahmen und Gewicht — sie wäre sonst allein
   über die Farbe erkennbar. */
.sf-schritt-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    border: 1px solid var(--sf-primary);
    color: var(--sf-primary);
    font-family: var(--sf-font-mono);
    font-weight: 600;
    font-size: var(--sf-klein);
    margin-bottom: 10px;
}
.sf-schritt h3 {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h3);
    line-height: var(--sf-h3-lh);
    color: var(--sf-text);
    margin: 0 0 6px;
}
.sf-schritt p {
    font-size: var(--sf-klein);
    line-height: var(--sf-klein-lh);
    color: var(--sf-text-muted);
    margin: 0;
}

/* ── Beitrags-Anriss ──────────────────────────────────────────────────── */
.sf-beitraege {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: var(--sf-band-y) var(--sf-gutter);
}
.sf-beitraege-raster {
    display: grid;
    grid-template-columns: var(--sf-cols-news);
    gap: var(--sf-raster-gap);
}
.sf-beitrag {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-flaeche);
    padding: var(--sf-card-pad);
}
.sf-beitrag-bild {
    border-radius: var(--sf-radius-s);
    overflow: hidden;
    background: var(--sf-bild-bg);
    margin: calc(var(--sf-card-pad) * -1) calc(var(--sf-card-pad) * -1) var(--sf-card-pad);
    aspect-ratio: 3 / 2;
}
.sf-beitrag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-beitrag-datum {
    display: block;
    font-family: var(--sf-font-mono);
    font-size: var(--sf-label);
    color: var(--sf-text-muted);
    margin-bottom: 6px;
}
.sf-beitrag h3 {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h3);
    line-height: var(--sf-h3-lh);
    color: var(--sf-text);
    margin: 0 0 6px;
}
.sf-beitrag p {
    font-size: var(--sf-klein);
    line-height: var(--sf-klein-lh);
    color: var(--sf-text-muted);
    margin: 0;
}

/* Handy: der Hero wird einspaltig, das Bild rückt unter den Text.
   Die Rasterspalten schalten bereits über die D1-Tokens um. */
@media (max-width: 900px) {
    .sf-hero-titel { max-width: none; }
    .sf-hero-bild { min-height: var(--sf-hero-min); }
}

/* ═══════════════════════════════════════════════════════════════════════
   D4 — Kopfleiste (2026-08-12)
   ═══════════════════════════════════════════════════════════════════════
   Servicezeile + Hauptzeile nach dem Entwurf. Zwei Dinge, die der Entwurf
   nicht zeigt, bleiben bewusst erhalten: Warenkorb mit Zähler und der
   Hell/Dunkel-Schalter — ohne sie verlöre der Shop Funktion.
   Aufklappen über <details>, kein Klick-Code im Markup (CSP-strikt).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Servicezeile ─────────────────────────────────────────────────────── */
.sf-service {
    background: var(--sf-bg-tief);
    border-bottom: 1px solid var(--sf-border);
}
.sf-service-inner {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 8px var(--sf-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sf-service-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--sf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-service-rechts { display: flex; align-items: center; gap: 14px; flex: none; }
.sf-service-lang { font-family: var(--sf-font-mono); font-size: 12px; }
.sf-service-konto {
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text);
}
.sf-service-konto:hover { color: var(--sf-primary); }
.sf-lang--service > summary {
    display: flex; align-items: center; gap: 4px;
    color: var(--sf-text-muted); cursor: pointer; list-style: none;
}
.sf-lang--service > summary::-webkit-details-marker { display: none; }

/* ── Hauptzeile ───────────────────────────────────────────────────────── */
/* .sf-header bleibt klebend und behält Unschärfe-Hintergrund; das Ausrichten
   übernimmt jetzt der innere Container, damit die Leiste über die volle
   Breite läuft und nur der Inhalt begrenzt ist. */
.sf-header { display: block; padding: 0; }
.sf-header-inner {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: 12px var(--sf-gutter);
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Menü ─────────────────────────────────────────────────────────────── */
.sf-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.sf-nav-drop { position: relative; }
.sf-nav-drop > summary,
.sf-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--sf-radius-s);
    font-size: 15px;
    font-weight: 600;
    color: var(--sf-text);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.sf-nav-drop > summary::-webkit-details-marker { display: none; }
.sf-nav-drop > summary:hover,
.sf-nav-link:hover { background: var(--sf-tint); color: var(--sf-text); }
.sf-nav-drop[open] > summary { background: var(--sf-tint); }

.sf-nav-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-flaeche);
    box-shadow: var(--sf-schatten);
    display: grid;
    gap: 2px;
}
.sf-nav-marke {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--sf-radius-s);
    color: var(--sf-text);
}
.sf-nav-marke:hover { background: var(--sf-tint); color: var(--sf-text); }
.sf-nav-marke-name { font-weight: 600; font-size: 15px; }
.sf-nav-marke-zahl {
    font-family: var(--sf-font-mono);
    font-size: 12px;
    color: var(--sf-text-muted);
    flex: none;
}
.sf-nav-kat {
    padding: 9px 10px;
    border-radius: var(--sf-radius-s);
    font-size: 15px;
    color: var(--sf-text);
}
.sf-nav-kat:hover { background: var(--sf-tint); color: var(--sf-text); }

/* ── Schnellbestellung im Kopf ────────────────────────────────────────────
   ⚠️ Namensraum sf-kopf-qo, NICHT sf-qo: „sf-qo" ist der Seiten-Container
   der Schnellbestellungs-SEITE (oben, ~Z.2112). Die Erstfassung nutzte
   hier denselben Namen — dadurch wurde die ganze Seite zur Flex-Zeile,
   alle ihre Eingabefelder auf 96px/rahmenlos/mono gezwungen und die Seite
   am Handy komplett versteckt (Marco-Fund 2026-08-13). */
.sf-kopf-qo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 3px 3px 3px 12px;
    border: 1px solid var(--sf-border-hell);
    border-radius: var(--sf-radius-s);
}
.sf-kopf-qo-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-text-muted);
    white-space: nowrap;
}
.sf-kopf-qo input {
    width: 96px;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: var(--sf-text);
    font-family: var(--sf-font-mono);
    font-size: 13px;
}
.sf-kopf-qo input:focus { outline: none; }
.sf-kopf-qo button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: var(--sf-primary);
    color: #FFFFFF;
    cursor: pointer;
}

/* ── Suche als Aufklapper ─────────────────────────────────────────────── */
.sf-suche-drop { position: relative; flex: none; }
.sf-suche-drop > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--sf-radius-s);
    color: var(--sf-text);
    cursor: pointer;
    list-style: none;
}
.sf-suche-drop > summary::-webkit-details-marker { display: none; }
.sf-suche-drop > summary:hover { background: var(--sf-tint); }
.sf-suche-drop .sf-suche {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: min(360px, 80vw);
    padding: 8px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-flaeche);
    box-shadow: var(--sf-schatten);
}
.sf-suche-drop .sf-suche input { width: 100%; }

/* Handy: Menü bricht um, die Schnellbestellung tritt zurück. */
@media (max-width: 900px) {
    .sf-header-inner { flex-wrap: wrap; gap: 8px; }
    .sf-nav { order: 3; width: 100%; overflow-x: auto; }
    /* Nur das KOPF-Suchfeld verschwindet am Handy — die Klasse hieß hier
       vorher .sf-qo und versteckte damit die ganze Schnellbestellungs-SEITE. */
    .sf-kopf-qo { display: none; }
    .sf-service-text { font-size: 11px; }
}

/* D5: Untertitel der kuratierten Reihe (nur wenn der Betrieb einen pflegt). */
.sf-reihe-untertitel {
    font-size: var(--sf-klein);
    line-height: var(--sf-klein-lh);
    color: var(--sf-text-muted);
    margin: -8px 0 16px;
    max-width: 60ch;
}

/* ── Befund 3: Markenkacheln ──────────────────────────────────────────── */
.sf-markenkacheln-bahn { /* liegt auf dem Seitengrund, ohne Kante */ }
.sf-markenkacheln {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: var(--sf-band-y) var(--sf-gutter);
}
.sf-markenkachel-raster {
    display: grid;
    grid-template-columns: var(--sf-cols-brand);
    gap: var(--sf-raster-gap);
}
/* Akzent-Oberkante als zweites Merkmal neben der Farbe (Entwurf). */
.sf-markenkachel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--sf-border);
    border-top: 2px solid var(--sf-akzent);
    border-radius: var(--sf-radius);
    background: var(--sf-flaeche);
    color: var(--sf-text);
    transition: var(--sf-transition);
}
.sf-markenkachel:hover {
    color: var(--sf-text);
    box-shadow: var(--sf-schatten-hover);
    transform: translateY(-2px);
}
.sf-markenkachel-name {
    font-family: var(--sf-font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}
.sf-markenkachel-text {
    font-size: 13px;
    line-height: 1.3;
    color: var(--sf-text-muted);
}

/* ── Befund 4: Aktionsfläche ──────────────────────────────────────────── */
.sf-aktion-bahn {
    background: color-mix(in srgb, var(--sf-akzent) 8%, var(--sf-bg));
}
.sf-aktion {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: var(--sf-band-y) var(--sf-gutter);
    display: grid;
    grid-template-columns: var(--sf-hero);
    gap: var(--sf-block-gap);
    align-items: center;
}
.sf-aktion-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sf-aktion-etikett {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sf-akzent);
    color: var(--sf-on-akzent);
    font-size: var(--sf-label);
    font-weight: 600;
    letter-spacing: var(--sf-label-ls);
    text-transform: uppercase;
}
.sf-aktion h2 {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h2);
    line-height: var(--sf-h2-lh);
    letter-spacing: var(--sf-h2-ls);
    color: var(--sf-text);
    margin: 0;
}
.sf-aktion p {
    font-size: var(--sf-body);
    line-height: var(--sf-body-lh);
    color: var(--sf-text-muted);
    margin: 0;
    max-width: 52ch;
}
.sf-aktion-bild {
    border-radius: var(--sf-radius);
    overflow: hidden;
    background: var(--sf-bild-bg);
    aspect-ratio: 3 / 2;
    /* Luft, damit das Motiv nicht an der Kante klebt (2026-08-12). */
    padding: 12px;
}
/* „contain" statt „cover" (Marco-Befund 2026-08-12: „Bilder sind abgeschnitten
   bei Aktion"). Ein Aktionsbild ist ein PRODUKTFOTO — der Betrieb zeigt eine
   bestimmte Flasche, nicht eine Stimmung. „cover" füllt den 3:2-Rahmen und
   schneidet dafür alles weg, was nicht hineinpasst; bei einem hochformatigen
   Foto ist das der halbe Artikel. „contain" zeigt das ganze Motiv, der Rest
   des Rahmens bleibt in der Bildfläche stehen — sichtbar gewollt statt
   sichtbar beschnitten. */
.sf-aktion-bild img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 900px) { .sf-aktion { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   D5 Teil 2 — Produktkarten + Leben (2026-08-12)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Label-Zeile der Karte: Marke · Kategorie links, Art.-Nr. rechts ──── */
.sf-produkt-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.sf-produkt-label .sf-produkt-marke { min-height: 0; }
.sf-produkt-sku {
    font-family: var(--sf-font-mono);
    font-size: 10px;
    color: var(--sf-text-muted);
    white-space: nowrap;
    flex: none;
}

/* ── Typografische Karte ohne Bild (Marco-Entscheid: Name gross auf
      getöntem Grund, KEINE Bildattrappe) ─────────────────────────────── */
.sf-produkt--textonly {
    background: color-mix(in srgb, var(--sf-primary) 5%, var(--sf-flaeche));
    min-height: 300px;
}
.sf-produkt--textonly .sf-produkt-body { flex: 1; }
.sf-produkt--textonly .sf-produkt-name {
    font-family: var(--sf-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 0;
    margin-top: 8px;
    -webkit-line-clamp: 3;
}

/* ── Leben: Bild zoomt sanft beim Überfahren der Karte ────────────────── */
.sf-produkt-bild img { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.sf-produkt:hover .sf-produkt-bild img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .sf-produkt:hover .sf-produkt-bild img { transform: none; }
}

/* ── Leben: weiche Farbkreise im Hero (Muster sf-band-glow, statisch) ─── */
.sf-hero-bahn { position: relative; overflow: hidden; }
.sf-hero-bahn > .sf-hero { position: relative; z-index: 1; }
/* Waagerecht dürfen die Kreise über den Rand hinausragen — dort liegt der
   Bildschirmrand, ein Schnitt fällt nicht auf. SENKRECHT nicht: oben und unten
   grenzt die nächste Bahn an, und `overflow: hidden` kappt den Verlauf dort mit
   einer harten Kante quer über die Seite (Marco-Befund 2026-08-12: „oben sieht
   man den Blur, dass es abgeschnitten ist in einem neuen Container").

   Nachgerechnet: `closest-side` nimmt die halbe HÖHE als Radius, sichtbar ist er
   bis 70 % davon. glow2: 480/2 = 240 → sichtbar 168 px; bei `bottom: -180px` lag
   der Mittelpunkt nur 60 px über der Bahnkante, also wurden ~108 px sichtbarer
   Verlauf abgeschnitten. Oben dasselbe (161 px sichtbar, 90 px Abstand → 71 px).
   Mit `top: 0` / `bottom: 0` liegt der sichtbare Teil vollständig in der Bahn —
   der Verlauf läuft aus, statt zu enden. */
.sf-hero-glow {
    position: absolute;
    top: 0; right: -100px;
    width: 560px; height: 460px;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--sf-akzent) 30%, transparent), transparent 70%);
    pointer-events: none;
}
.sf-hero-glow2 {
    position: absolute;
    bottom: 0; left: -120px;
    width: 620px; height: 480px;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--sf-primary) 26%, transparent), transparent 70%);
    pointer-events: none;
}

/* ── Markenkacheln: Monogramm-Kreis bzw. Logo ─────────────────────────── */
.sf-markenkachel-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sf-akzent) 14%, var(--sf-flaeche));
    color: var(--sf-gold-text);
    font-family: var(--sf-font-display);
    font-size: 20px;
    font-weight: 700;
}
.sf-markenkachel-logo {
    display: inline-flex;
    width: 44px; height: 44px;
}
.sf-markenkachel-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ── D3c: öffentliche Inhaltsseite ────────────────────────────────────── */
.sf-seite {
    max-width: var(--sf-max);
    margin: 0 auto;
    padding: var(--sf-band-y) var(--sf-gutter);
}
.sf-seite-kopf h1 {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h2);
    line-height: var(--sf-h2-lh);
    letter-spacing: var(--sf-h2-ls);
    color: var(--sf-text);
    margin: 0 0 24px;
}
.sf-seite-block {
    display: grid;
    gap: var(--sf-block-gap);
    align-items: start;
    padding: 20px 0;
    max-width: 72ch;
}
.sf-seite-block--text_bild,
.sf-seite-block--bild_text { max-width: none; }
@media (min-width: 901px) {
    .sf-seite-block--text_bild { grid-template-columns: 1.1fr 0.9fr; }
    .sf-seite-block--text_bild .sf-seite-bild { order: 2; }
    .sf-seite-block--bild_text { grid-template-columns: 0.9fr 1.1fr; }
}
.sf-seite-bild {
    border-radius: var(--sf-radius);
    overflow: hidden;
    background: var(--sf-bild-bg);
}
.sf-seite-bild img { width: 100%; display: block; }
.sf-seite-text h2 {
    font-family: var(--sf-font-display);
    font-size: var(--sf-h3);
    line-height: var(--sf-h3-lh);
    color: var(--sf-text);
    margin: 0 0 10px;
}
.sf-seite-text p {
    font-size: var(--sf-body);
    line-height: var(--sf-body-lh);
    color: var(--sf-text-muted);
    margin: 0 0 12px;
}
.sf-seite-text blockquote {
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--sf-akzent);
    font-size: 18px;
    line-height: 1.5;
    color: var(--sf-text);
}
.sf-seite-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sf-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   Medien-Bausteine (2026-08-12, Migration 281) — Galerie · Video ·
   Info-Karten · Schlagwörter. Alles über die D1-Tokens, keine neuen Maße.
   ═══════════════════════════════════════════════════════════════════════ */
.sf-galerie{
    display: grid;
    grid-template-columns: repeat(var(--sf-gal-spalten, 3), 1fr);
    gap: var(--sf-luft-3, 14px);
    margin-top: var(--sf-luft-4, 20px);
}
.sf-galerie figure{ margin: 0; }
.sf-galerie img{
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--sf-radius, 12px); display: block;
}
@media (max-width: 900px){ .sf-galerie{ grid-template-columns: repeat(2, 1fr); } }

.sf-video{ margin-top: var(--sf-luft-4, 20px); }
.sf-video iframe, .sf-video video{
    width: 100%; aspect-ratio: 16 / 9; border: 0;
    border-radius: var(--sf-radius, 12px); display: block; background: #000;
}

.sf-info-karten{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sf-luft-3, 14px); margin-top: var(--sf-luft-4, 20px);
}
.sf-info-karte{
    /* #117: --sf-linie existiert nirgends — der Rückfallwert rgba(0,0,0,.08)
       war im Hellmodus zufällig passend, im Dunkelmodus aber praktisch
       unsichtbar (Schwarz auf #0B0F19). Jetzt dasselbe Token wie die übrigen
       110 Rahmen im Storefront: hell #E2E8F0, dunkel #1E293B. */
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius, 12px);
    padding: var(--sf-luft-4, 18px);
}
.sf-info-karte b{ display: block; margin-bottom: 4px; }
.sf-info-karte span{ display: block; color: var(--sf-text-2, #555); font-size: 14px; }
.sf-info-marke{
    display: inline-block !important; font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--sf-primary);
    margin-bottom: 6px !important;
}

.sf-tags{
    list-style: none; padding: 0; margin: var(--sf-luft-4, 20px) 0 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.sf-tags li{
    font-size: 13px; padding: 5px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-bg));
    color: var(--sf-text, #222);
}

/* ═══════════════════════════════════════════════════════════════════════
   Schulungs-Anmeldung (2026-08-12) — Formular im Laden
   Reines CSS, keine Ereignis-Attribute (CSP-strikt). Tokens aus D1.
   ═══════════════════════════════════════════════════════════════════════ */
.sf-schulung-form {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-flaeche);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sf-schulung-titel {
    margin: 0;
    font-family: var(--sf-font-display);
    font-size: var(--sf-h3);
    color: var(--sf-text);
}
.sf-schulung-felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.sf-schulung-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    color: var(--sf-text-muted);
}
.sf-schulung-form label em { font-style: normal; opacity: 0.75; }
.sf-schulung-form input,
.sf-schulung-form textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    background: var(--sf-bg);
    color: var(--sf-text);
    font: inherit;
    font-size: 14px;
}
.sf-schulung-form input:focus,
.sf-schulung-form textarea:focus {
    outline: 2px solid var(--sf-primary);
    outline-offset: 1px;
    border-color: var(--sf-primary);
}
.sf-schulung-personen { max-width: 140px; }
.sf-schulung-form button { align-self: flex-start; }
.sf-schulung-hinweis {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sf-text-muted);
}
/* Geschlossener Termin: sichtbar anders als ein Knopf, damit niemand klickt. */
.sf-schulung-zu {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 0;
    padding: 9px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sf-text) 8%, var(--sf-flaeche));
    color: var(--sf-text-muted);
    font-size: 13.5px;
    font-weight: 600;
}
@media (max-width: 900px) {
    .sf-schulung-felder { grid-template-columns: 1fr; }
    .sf-schulung-personen { max-width: none; }
}

/* ── Eigener Hintergrund je Baustein (2026-08-13) ─────────────────────────
   Marco: „damit jemand seine Seite individuell gestalten kann". Bis dahin
   bestimmten zwei Shop-Farben ALLE Bänder, und welches Band welche zieht,
   stand hier fest verdrahtet (sein Fund: die Aktion blieb beige, obwohl die
   Hauptfarbe auf Pink stand — sie hängt am Akzent).

   Die gewählte Farbe wird NIE pur gesetzt, sondern immer mit dem Seitengrund
   gemischt — genau wie die eingebauten Bänder darüber. Zwei Folgen, die das
   Ganze gefahrlos machen:
     · Bei kleiner Stärke wird aus jeder Farbe ein zarter Ton.
     · --sf-bg wechselt im Dunkelmodus, also mischt dieselbe Farbe nachts mit
       dem DUNKLEN Grund. Die Schriftfarbe kommt weiter vom Thema — es kann
       keinen unlesbaren Zustand geben.

   Steht bewusst am Dateiende: gleiche Spezifität wie .sf-hero-bahn &
   Geschwister, mit section davor eine Stufe darüber — der eigene Wunsch
   gewinnt also gegen die eingebaute Bandfarbe. Ohne gepflegte Farbe fehlt
   die Klasse und alles bleibt exakt wie vorher. */
section.sf-hg {
    background: color-mix(in srgb,
        var(--sf-hg-farbe) var(--sf-hg-staerke, 0%), var(--sf-bg));
}

/* Auf Inhaltsseiten ist der Baustein ein Textblock ohne eigene Polsterung —
   eine Farbfläche ohne Luft würde die Schrift an den Rand kleben. */
section.sf-seite-block.sf-hg {
    padding: 28px 26px;
    border-radius: var(--sf-radius);
}
@media (max-width: 640px) {
    section.sf-seite-block.sf-hg { padding: 20px 16px; }
}

/* ── Knopf-Verkabelung Markenkachel + kuratierte Reihe (2026-08-13) ───────
   Marco-Fund: „bei Marke habe ich Anmelden eingeteilt, es passiert nichts".
   Die Editor-Felder gab es längst, ausgeliefert wurden sie in diesen beiden
   Bändern nie.

   Die Kachel IST bereits ein Link — die Beschriftung ist deshalb ein <span>
   in Knopf-Optik, kein zweiter Anker (verschachtelte Anker sind ungültig).
   Der ganze Kasten bleibt die Klickfläche. */
.sf-markenkachel-knopf {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: var(--sf-radius-s);
    background: var(--sf-primary);
    border: 1px solid var(--sf-primary);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.sf-markenkachel:hover .sf-markenkachel-knopf { filter: brightness(1.08); }

/* Knopf unter der kuratierten Produktreihe. */
.sf-reihe-wege {
    display: flex;
    justify-content: center;
    padding-top: 22px;
}

/* ── STK-Riegel (2026-08-18): Einrichtungsseite + Inhaber-Band ─────────────
   Additiv am Datei-Ende. Nur vorhandene Tokens — Dark-Mode kommt über die
   Token-Overrides von selbst. */
.sf-einricht-body{margin:0;background:var(--sf-bg);color:var(--sf-text);
    font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.sf-einricht{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.sf-einricht-karte{max-width:420px;text-align:center;padding:40px 32px;
    border:1px solid var(--sf-border);border-radius:14px;background:var(--sf-bg-tief)}
.sf-einricht-karte h1{margin:0 0 6px;font-size:22px}
.sf-einricht-punkt{width:14px;height:14px;border-radius:50%;margin:0 auto 18px;
    background:var(--sf-akzent);opacity:.85}
.sf-einricht-titel{margin:0 0 8px;font-weight:600}
.sf-einricht-text{margin:0;color:var(--sf-text-muted)}
.sf-startklar-band{padding:10px 16px;text-align:center;font-size:14px;
    background:color-mix(in srgb, var(--sf-akzent) 14%, var(--sf-bg));
    border-bottom:1px solid var(--sf-border)}
.sf-startklar-band a{margin-left:8px;font-weight:600;color:var(--sf-primary)}
