/* =============================================================================
   SPF CART — Warenkorb (klassisches Template, Checkout Schritt 2)
   -----------------------------------------------------------------------------
   Skinning des klassischen Woo-Warenkorbs (Override cart/cart.php) in der spfcp-
   Designsprache. Ziel: spf-mockups/checkout/checkout-1-warenkorb.html.
   Eigene --spfco-*-Tokens auf body.woocommerce-cart; Night über body.spf-night.
   ============================================================================= */

@font-face{font-family:'Blender Pro';src:url('../fonts/blender-pro/BlenderPro-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Blender Pro';src:url('../fonts/blender-pro/BlenderPro-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Blender Pro';src:url('../fonts/blender-pro/BlenderPro-Heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ---------- Tokens (Hell) ---------- */
body.woocommerce-cart{
  /* Markenakzent aus der Palette (class-spf-brand.php), KTM-Werte als Fallback. */
  --spfco-orange:var(--spf-brand, #ff6600);--spfco-orange-press:var(--spf-brand-press, #e25c00);--spfco-orange-soft:color-mix(in srgb, var(--spf-brand, #ff6600) 10%, transparent);--spfco-on-brand:var(--spf-brand-ink, #ffffff);
  --spfco-ink:#16181c;--spfco-muted:#5b6270;--spfco-faint:#666d78;
  --spfco-bg:#f4f5f6;--spfco-panel:#ffffff;--spfco-card:#ffffff;--spfco-hover:#f7f8f9;
  --spfco-line:#ececec;--spfco-line-strong:#e0e1e3;--spfco-border:#d7d9dc;
  --spfco-ok:#22a447;--spfco-bad:#e0453c;
  /* Dieselbe Warnfarbe als SCHRIFT: #e0453c haelt auf der hellen Hoverflaeche
     nur 3,88:1. Fuer Flaechen und Kanten bleibt --spfco-bad. */
  --spfco-bad-text:#da2d23;
  --spfco-cond:var(--spf-brand-cond, 'Blender Pro','Oswald',system-ui,sans-serif);
  --spfco-sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --spfco-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --spfco-r:14px;--spfco-r-s:9px;
}
/* Basis-Schrift = system-ui. --cond NUR fuer H1/Sektions-Header/Buttons (Root-Cause 1). */
body.woocommerce-cart .spf-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .bso-wallet-redeem{font-family:var(--spfco-sans)}
html.spf-night body.woocommerce-cart,
body.spf-night.woocommerce-cart{
  color-scheme:dark;
  --spfco-ink:#e8eaed;--spfco-muted:#9aa0a6;--spfco-faint:#868d96;
  --spfco-bg:#0f1011;--spfco-panel:#17181a;--spfco-card:#1a1c1e;--spfco-hover:#202226;
  --spfco-line:#2a2d30;--spfco-line-strong:#2a2d30;--spfco-border:#33363a;
  /* Fuellungen nachts wie tags: --spf-brand mit --spf-brand-ink (11,3:1). */
  --spfco-orange-soft:color-mix(in srgb, var(--spf-brand, #ff6600) 16%, transparent);
}

/* Seiten-Hintergrund (sonst scheint Theme-Weiss durch, Night = weisser Rand). */
body.woocommerce-cart{background-color:var(--spfco-bg)!important}
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.wp-block-post-title{
  font-family:var(--spfco-cond);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--spfco-ink)}
.spf-h1-count{color:var(--spfco-orange)}
/* Seitenkopf (spf-cart.js baut ihn als erstes Grid-Kind; Live-Fix 22.08.) */
.spf-cart-head{margin:0 0 4px}
.spf-cart-h1{
  font-family:var(--spfco-cond);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(26px,3.2vw,36px);line-height:1.05;
  color:var(--spfco-ink);margin:0}
.spf-cart-h1 .spf-h1-count{font-size:.6em;font-weight:800}
/* Weiter-zur-Kasse: nie umbrechen */
.cart_totals .wc-proceed-to-checkout a.checkout-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spf-crumbs{font-size:12.5px;color:var(--spfco-faint);margin-bottom:8px}
.spf-crumbs a{color:var(--spfco-muted);text-decoration:none}
@media (hover:hover){
.spf-crumbs a:hover{color:var(--spfco-orange)}}
.spf-crumbs span{margin:0 7px;opacity:.6}

/* ---------- Seitenrinne ----------
   Der Warenkorb hat, anders als die Kasse, KEINEN eigenen Rahmen-DIV: dort traegt
   .spf-kasse padding:26px 22px 80px (spf-kasse.css). Hier ist der aeusserste
   Container der Shortcode-Wrapper .woocommerce in main#brx-content — und beide
   setzen keinen Innenabstand (bso-theme/style.css gibt #brx-content nur Breite
   und Zentrierung; die .woocommerce-Regel weiter unten greift erst ab 781 px und
   setzt auch dort nur Breite).

   Folge: Karten, Summenkarte, Guthaben-Panel und Cross-Sells lagen buendig am
   Bildschirmrand (Kili, 02.09.2026). Das ist NICHT mobil-spezifisch — zwischen
   781 und 1240 px Fensterbreite klebt es genauso, es faellt am grossen Schirm nur
   nicht auf, weil max-width:1240px innerhalb der 1320 px zufaellig Luft laesst.
   22 px ist derselbe Wert wie auf der Kasse. */
/* Oben fehlte der Abstand ganz: Die Brotkrume klebte an der orangen Kante unter
   dem Kopf (Kili, 04.09.2026, gemessen 0 px zwischen Kopfunterkante und Inhalt).
   Andere Seitentypen fallen nicht auf, weil dort eine Sektion mit eigenem
   Innenabstand beginnt — der Warenkorb startet direkt mit der Brotkrume.
   18 px mobil, ab 781 px 26 px: etwas mehr Luft, sobald die Seite zweispaltig
   wird und die Karten weiter auseinanderstehen. */
body.woocommerce-cart main#brx-content{padding-inline:22px;padding-top:18px}
@media (min-width:781px){
  body.woocommerce-cart main#brx-content{padding-top:26px}
}

/* ---------- 2-Spalten-Layout (Items links, Summe+Guthaben rechts) ----------
   Benannte Grid-Areas, damit auch vom Plugin eingehaengte Kinder (.bso-wallet-redeem
   via woocommerce_before_cart) sauber platziert werden statt die Auto-Platzierung zu
   sprengen. Formular links (spannt alle Zeilen), Totals + Guthaben + Cross-Sells rechts. */
@media (min-width:781px){
  body.woocommerce-cart .woocommerce{
    display:grid;grid-template-columns:minmax(0,1fr) 404px;
    grid-template-areas:"head head" "notices notices" "form totals" "form wallet";
    column-gap:28px;row-gap:16px;align-items:start;
    max-width:1240px;margin-left:auto;margin-right:auto}
  body.woocommerce-cart .woocommerce > .spf-cart-head{grid-area:head;margin:0}
  body.woocommerce-cart .woocommerce > .spf-crosssells{grid-column:1/-1;grid-row:5}
  body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-area:notices}
  body.woocommerce-cart .woocommerce > .spf-cart-form{grid-area:form}
  /* Germanized gibt .cart-collaterals float:right + width:48% -> schrumpft in der
     Grid-Zelle auf ~200px. float/width overriden, damit es die Spalte fuellt.
     KEIN sticky: sonst ueberlappt die Totals-Karte das darunterliegende Guthaben-Panel. */
  body.woocommerce-cart .woocommerce > .cart-collaterals{grid-area:totals;margin:0;float:none!important;width:auto!important}
  /* Das Guthaben&Codes-Panel liegt im Wallet-Bereich; das Standalone-bso-Feld wird
     per JS hineingeschoben und bis dahin (als direktes .woocommerce-Kind) versteckt. */
  body.woocommerce-cart .woocommerce > .spf-guthaben-panel{grid-area:wallet;margin:0}
  body.woocommerce-cart .woocommerce > .bso-wallet-redeem{display:none!important}
  body.woocommerce-cart .woocommerce > .cross-sells{grid-column:1/-1;margin:0}
}
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .return-to-shop{grid-column:1/-1}

/* ---------- Positions-Zeile (.spf-ci) ---------- */
.spf-cart__items{display:flex;flex-direction:column;gap:12px}
.spf-ci{
  display:grid;grid-template-columns:76px minmax(0,1fr) 126px 92px 34px;
  grid-template-areas:"img body qty total rm";align-items:center;gap:14px;
  background:var(--spfco-panel);border:1px solid var(--spfco-line-strong);
  border-radius:var(--spfco-r);padding:14px 16px;
  box-shadow:0 1px 2px rgba(20,24,28,.03),0 8px 26px rgba(20,24,28,.05)}
body.spf-night .spf-ci{box-shadow:none}
.spf-ci.spf-unfit{border-color:var(--spfco-bad)}
.spf-ci__img{grid-area:img;width:76px;height:76px;border-radius:10px;border:1px solid var(--spfco-line);background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.spf-ci__img img{max-width:100%;max-height:100%;object-fit:contain}
.spf-ci__body{grid-area:body;min-width:0}
.spf-ci__name{min-width:0}
.spf-ci__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--spfco-sans);font-weight:700;font-size:15px;line-height:1.3;color:var(--spfco-ink)}
.spf-ci__title a{color:inherit;text-decoration:none}
@media (hover:hover){
.spf-ci__title a:hover{color:var(--spfco-orange)}}
/* Germanized-Lieferzeit unter dem Namen (kommt via woocommerce_after_cart_item_name). */
.spf-ci__name .wc-gzd-additional-info,
.spf-ci__name .delivery-time-info,
.spf-ci__name p{margin:4px 0 0;font-size:12px;color:var(--spfco-muted)}
.spf-ci__sku{margin-top:3px;font-size:11.5px;color:var(--spfco-faint);font-family:var(--spfco-mono,ui-monospace,monospace)}
.spf-ci__each{margin-top:5px;font-size:12.5px;color:var(--spfco-muted)}
.spf-ci__each-lbl{margin-left:4px;color:var(--spfco-faint)}
.spf-ci__fit{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:11px;font-weight:700}
.spf-ci__fit svg{width:11px;height:11px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.spf-ci__fit.is-fit{color:var(--spfco-ok)}.spf-ci__fit.is-fit svg{stroke:var(--spfco-ok)}
.spf-ci__fit.is-nofit{color:var(--spfco-bad)}.spf-ci__fit.is-nofit svg{stroke:var(--spfco-bad)}

/* Mengen-Stepper */
.spf-ci__qty{grid-area:qty}
/* KEIN overflow:hidden mehr (03.09.2026): Die unsichtbaren Trefferflaechen der
   +/- Knoepfe (::after, weiter unten) ragen absichtlich ueber die Pille hinaus
   und wuerden sonst weggeschnitten. Sichtbar aendert das nichts — alle Kinder
   tragen einen durchsichtigen Grund, der Radius hat nichts zu beschneiden. */
.spf-ci__qty .quantity{display:inline-flex;align-items:center;border:1px solid var(--spfco-border);border-radius:999px;background:var(--spfco-card)}
/* Germanized/Theme setzt flex:1 1 0% aufs Input -> Pille waechst und ueberlappt den
   Preis. Auf feste Breite zwingen, damit der Stepper kompakt bleibt.
   44 px breit und 44 px hoch ist die Trefferflaeche des Eingabefelds; die
   negativen Aussenabstaende nehmen die 6 px Hoehe wieder heraus, damit die Pille
   wie bisher 38 px hoch bleibt. */
/* Kein `outline:0` mehr (stand hier bis 04.09.2026): Diese Regel hat Spezifitaet
   (0,2,1) und schlug damit den netzwerkweiten Fokusring aus spf-a11y.css, der
   bewusst mit `:where()` auf Spezifitaet 0 liegt. Sichtbar blieb dort nur der
   Gegenring aus `box-shadow` — ein dicker Kasten in Flaechenfarbe statt eines
   Rings (Kili, 04.09.2026: „komisch gestylter Rahmen"). Der eigene Ring steht
   jetzt direkt darunter, passend zur runden Pille. */
.spf-ci__qty .quantity input.qty{flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;
  height:44px;margin:-3px 0;border:0;background:none;text-align:center;font-weight:700;color:var(--spfco-ink);font-size:14px;-moz-appearance:textfield}
/* Ring nach INNEN (negativer Abstand), damit er die Pillenkontur nicht sprengt —
   dieselbe Loesung wie bei den +/- Knoepfen weiter unten. Die Farbe kommt aus
   der Markenpalette und ist damit auf Husky nicht orange. */
.spf-ci__qty .quantity input.qty:focus-visible{outline:2px solid var(--spfco-orange);outline-offset:-2px;border-radius:999px}

/* Die +/- Knoepfe baut spf-cart.js (Abschnitt 1a) als <button class="action minus|plus">.
   Bis 02.09.2026 gab es sie nirgends — die .action-Regeln hier und in
   spf-warenkorb.css waren verwaist, weil der Kommentar im JS faelschlich annahm,
   Theme oder Germanized braechten sie mit.

   Breite exakt gerechnet, damit nichts ueberlaeuft: Die Pille ist 112 px breit
   (spf-warenkorb.css), abzueglich 1 px Rahmen je Seite und 4 px Innenabstand je
   Seite bleiben 102 px nutzbar. Das Eingabefeld steht per !important auf 44 px,
   also duerfen die beiden Knoepfe zusammen hoechstens 58 px belegen — 29 px je
   Knopf geht exakt auf. Mit den 30 px aus spf-warenkorb.css waeren es 2 px zu viel.
   (Bis 03.09.2026: Pille 110 px, Feld 42 px. Die zwei Pixel mehr geben dem
   Eingabefeld die 44 px Trefferbreite, die Knopfbreite bleibt unveraendert.) */
.spf-ci__qty .quantity button.action{
  flex:0 0 29px!important;width:29px!important;height:36px;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;cursor:pointer;
  font:600 17px/1 var(--spfco-sans);color:var(--spfco-muted);
  -webkit-appearance:none;appearance:none;
}
/* Trefferflaeche 44x44 ohne Layoutverschiebung: Der sichtbare Knopf bleibt
   29x36, die unsichtbare Flaeche waechst nach aussen aus der Pille heraus
   (minus nach links, plus nach rechts) und je 4 px nach oben und unten.
   29 + 14 + 1 = 44 in der Breite, 36 + 4 + 4 = 44 in der Hoehe. Nach innen
   nur 1 px, damit dem Eingabefeld nichts von seiner eigenen Flaeche wegfaellt.
   Voraussetzung ist, dass die Pille kein overflow:hidden mehr traegt. */
.spf-ci__qty .quantity button.action::after{content:"";position:absolute;top:-4px;bottom:-4px}
.spf-ci__qty .quantity button.action.minus::after{left:-14px;right:-1px}
.spf-ci__qty .quantity button.action.plus::after{left:-1px;right:-14px}
@media (hover:hover){
.spf-ci__qty .quantity button.action:hover:not(:disabled){color:var(--spfco-ink)}}
.spf-ci__qty .quantity button.action:disabled{opacity:.35;cursor:default}
.spf-ci__qty .quantity button.action:focus-visible{outline:2px solid var(--spfco-orange);outline-offset:-2px;border-radius:999px}
.spf-ci__qty .quantity input.qty::-webkit-outer-spin-button,
.spf-ci__qty .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Theme/Germanized bringt +/- als span.action.minus/.plus (SVG-Icons) mit — stylen,
   nicht doppeln. „minus" per order vor den Input (links), „plus" rechts. */
.spf-ci__qty .quantity .action{width:36px;height:38px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;text-decoration:none;user-select:none}
.spf-ci__qty .quantity .action.minus{order:-1}
.spf-ci__qty .quantity .action svg{width:16px;height:16px;stroke:var(--spfco-muted);fill:var(--spfco-muted)}
@media (hover:hover){
.spf-ci__qty .quantity .action:hover svg{stroke:var(--spfco-orange);fill:var(--spfco-orange)}}
.spf-ci__total{grid-area:total;font-family:var(--spfco-sans);font-weight:800;font-size:16px;color:var(--spfco-ink);min-width:88px;text-align:right}
/* Die Hoehe des X haengt am Layout der Zeile, und das ist auf Schirm und Telefon
   verschieden — deshalb zwei Ausrichtungen statt einer.

   BREIT (`"img body qty total rm"`, eine Reihe): Menge und Preis stehen mittig,
   das X stand mit `align-self:start` 55 px darueber und wirkte losgeloest
   (Kili, 04.09.2026: „das X bitte auf Hoehe vom Preis"). Hier also `center` —
   die drei Bedienelemente der Zeile liegen damit auf einer Linie.

   SCHMAL (`"img body rm" / "img qty total"`, zwei Reihen): Dort steht das X gar
   nicht neben dem Preis, sondern neben dem Artikelnamen. `center` haette es in
   die Mitte des Textblocks gesetzt — also neben die Lieferzeit, wo es sich liest,
   als loesche es die (Tester, 03.09.2026). Dort bleibt es deshalb bei `start`,
   siehe den schmalen Block weiter unten. */
.spf-ci__rm{grid-area:rm;align-self:center;margin-top:0}
.spf-ci__rm a.remove{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:var(--spfco-faint);font-size:22px;line-height:1;text-decoration:none;transition:background .15s,color .15s}
/* Trefferflaeche 44x44 (34 + 5 je Seite). Die sichtbare Flaeche und damit auch
   der Hover-Grund bleiben 34x34; die 5 px ringsum liegen in der Spaltenluecke.
   Absolut positioniert, damit die Flaeche kein Flex-Kind der Zeile wird. */
.spf-ci__rm a.remove::after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px}
@media (hover:hover){
/* HOVER: VOLLTON STATT TOENUNG (Kili, 04.09.2026)
   Erst stand hier eine 8-Prozent-Rottoenung — dasselbe Muster wie bei den
   Markenflaechen, und auf Husqvarna neben dem Blau fremd. Der zweite Anlauf
   setzte die Flaeche neutralgrau und das Kreuz rot; **das war schlechter**:
   WooCommerce faerbt `a.remove:hover` mit `color:#fff !important`, unsere
   Farbangabe kam gar nicht durch. Weisses Kreuz auf hellgrauer Flaeche = 1,06:1,
   also unsichtbar (Kili: „das Kreuz wird weiss auf weiss").
   Statt gegen das `!important` anzukaempfen wird die Flaeche jetzt so gesetzt,
   dass das weisse Kreuz von WooCommerce darauf richtig steht: Vollton in unserem
   Warnrot, 4,79:1. Das ist zugleich das Muster aus ADR-0028 fuer kleine,
   klar umgrenzte Bauteile. */
.spf-ci__rm a.remove:hover{background:var(--spfco-bad-text,#da2d23)}}

/* Aktionen: Coupon + Aktualisieren */
.spf-cart__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;
  background:var(--spfco-panel);border:1px solid var(--spfco-line-strong);border-radius:var(--spfco-r);padding:14px 16px}
body.spf-night .spf-cart__actions{box-shadow:none}
.spf-cart__coupon{display:flex;gap:8px;flex:1;min-width:220px}
.spf-cart__coupon input{flex:1;min-width:0;min-height:42px;padding:0 13px;border:1px solid var(--spfco-border);border-radius:var(--spfco-r-s);background:var(--spfco-card);color:var(--spfco-ink);font-size:13.5px}
.spf-cart__coupon input:focus{border-color:var(--spfco-orange);box-shadow:0 0 0 3px var(--spfco-orange-soft);outline:none}
.spf-cart__actions button{min-height:42px;padding:0 16px;border:1px solid var(--spfco-border);border-radius:var(--spfco-r-s);background:var(--spfco-card);color:var(--spfco-ink);font-weight:700;font-size:12.5px;cursor:pointer}
@media (hover:hover){
.spf-cart__actions button[name="apply_coupon"]:hover,
.spf-cart__actions button[name="update_cart"]:hover{border-color:var(--spfco-orange);color:var(--spfco-orange)}}
.spf-cart__actions button[name="update_cart"][disabled]{opacity:.5;cursor:default}

/* ---------- Summe (cart-totals) ---------- */
.cart-collaterals .cart_totals{
  background:var(--spfco-panel);border:1px solid var(--spfco-line-strong);border-radius:var(--spfco-r);padding:20px;
  box-shadow:0 1px 2px rgba(20,24,28,.03),0 8px 26px rgba(20,24,28,.05)}
body.spf-night .cart-collaterals .cart_totals{box-shadow:none}
/* Germanized/Theme shrinkt die Totals-Tabelle sonst auf ~165px -> Umbrueche.
   Volle Spaltenbreite erzwingen, feste Spaltenaufteilung Label/Wert. */
.cart-collaterals .cart_totals{width:100%!important;float:none!important}
.cart_totals h2{font-family:var(--spfco-cond);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.03em;color:var(--spfco-ink);margin:0 0 14px;white-space:nowrap}
.cart_totals table{width:100%!important;border-collapse:collapse;table-layout:fixed}
.cart_totals table th,.cart_totals table td{padding:9px 0;font-size:13.5px;text-align:left;border:0}
.cart_totals table th{color:var(--spfco-muted);font-weight:600;width:60%;white-space:nowrap}
.cart_totals table td{color:var(--spfco-ink);text-align:right;font-weight:700;width:40%}
.cart_totals .cart-subtotal td,.cart_totals .cart-subtotal th{border-bottom:1px solid var(--spfco-line)}
.cart_totals .order-total th{font-family:var(--spfco-sans);font-weight:700;color:var(--spfco-ink);font-size:14px}
.cart_totals .order-total td{font-family:var(--spfco-sans);font-weight:800;font-size:19px;color:var(--spfco-ink)}
.cart_totals .order-total{border-top:1px solid var(--spfco-line-strong)}
/* „Weiter zur Kasse" laeuft auf dem globalen Buttonsystem (spf-buttons.css).
   `a.checkout-button` steht dort in jeder Liste — Grundform, Hover, Aktiv,
   Fokusring, Textkontur, Glanzwischer — und in Abschnitt 2 auf der grossen
   Groesse (--btn-h-l/--btn-px-l/--btn-fs-l = 54/28/16). Flaeche, Schrift,
   Radius, Zustaende und Bewegung kommen von dort und werden hier NICHT wiederholt.

   Hier steht nur noch, was am Warenkorb anders ist:
   1. Der Knopf ist ein Block ueber die volle Spaltenbreite (Entscheidung
      12.08.2026) statt inline-flex. Deshalb `text-align` und `line-height` statt
      der Flex-Zentrierung des Systems — und deshalb wirkt `text-overflow:ellipsis`
      aus der Regel weiter oben weiterhin.
   2. Drei Werte muessen gegen den WooCommerce-Kern re-gesetzt werden:
      `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{padding:1em;
      font-size:1.25em;...}` steht in woocommerce.css mit (0,3,1) und schlaegt die
      Grundform des Systems (0,3,0). Ohne diese Zeilen stuende der Knopf auf 20 px
      Schrift und 16 px Innenabstand. `var(--_px)`, `var(--_fs)` und `var(--_h)`
      sind die Variablen, die spf-buttons.css am Element selbst setzt — wir
      schreiben also keinen zweiten Wert auf, sondern reichen den des Systems
      durch. Dieselbe Spezifitaet (0,4,2) deckt weiter den senkrechten
      Innenabstand der WPCode-Politur ab (Husky-Snippet 6086, Befund 24.08.2026).
   3. Die Groessenstufe L muss hier gesetzt werden, weil sie im System nicht
      ankommt. spf-buttons.css Abschnitt 2 weist sie ueber `a.checkout-button`
      zu — Spezifitaet (0,1,1). Abschnitt 1 derselben Datei setzt die Grundgroesse
      unter anderem ueber `.woocommerce a.button` — (0,2,1). Der Knopf traegt die
      Klasse `button` und steht im `.woocommerce`-Wrapper des Shortcodes, also
      gewinnt die Grundform gegen die Groessenzuweisung, und L greift nie.
      Gemessen am 02.09.2026: --_h stand auf 48px statt 54px, der Knopf war 48 px
      hoch. Dasselbe trifft `button.single_add_to_cart_button` auf der
      Produktseite (dort 46 px). Das ist ein Fehler IM Buttonsystem und aelter als
      diese Datei — er blieb hier nur unsichtbar, solange der alte Nachbau die
      Hoehe hart setzte. Die saubere Loesung waere `.woocommerce`-qualifizierte
      Selektoren in Abschnitt 2; die aendert aber shopweit die Hoehe des
      Kaufen-Knopfes und ist deshalb Kilis Entscheidung, nicht meine.
      Bis dahin reichen wir die Token hier auf (0,4,2) durch — kein zweiter
      Zahlenwert, nur die Stufe, die das System ohnehin vorsieht.

   ERSATZLOS ENTFALLEN (Kili, 02.09.2026: „leuchtet komisch"):
   - `box-shadow:0 3px 14px …30%` — der farbige Schlagschatten. Das war der Schein.
     Das Buttonsystem kennt auf gefuellten Knoepfen keinen Schatten.
   - `background:var(--spfco-orange)` — das rohe Markenorange (auf KTM #ff6600,
     2,94:1 gegen Weiss). Das System nimmt --btn-bg -> --spf-brand-fill, den Wert,
     den class-spf-brand.php gerade so weit abdunkelt, dass die Flaeche
     WCAG 1.4.11 haelt.
   - Rand, Radius, Schriftfamilie und -gewicht, Grossschreibung, Laufweite,
     text-decoration, transition und die eigene Hover-Regel — alles Nachbau.

   OFFEN, gehoert auf die Restliste: Derselbe Komplettnachbau samt Schlagschatten
   steht noch an zwei weiteren Stellen — spf-category-page.css (.spfcp-gate__cta)
   und weiter unten in dieser Datei (.return-to-shop a.button). */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button{
  --_h:var(--btn-h-l,54px); --_px:var(--btn-px-l,28px); --_fs:var(--btn-fs-l,16px);
  box-sizing:border-box;
  display:block;width:100%;margin-top:16px;text-align:center;
  padding:0 var(--_px,var(--btn-px-l,28px));
  font-size:var(--_fs,var(--btn-fs-l,16px));
  min-height:var(--_h,var(--btn-h-l,54px));
  line-height:var(--_h,var(--btn-h-l,54px));
}

/* Versand-Auswahl in den Totals */
.cart_totals .shipping-calculator-button,
.cart_totals .woocommerce-shipping-methods label{color:var(--spfco-ink)}
.cart_totals .woocommerce-shipping-methods input[type=radio]{accent-color:var(--spfco-orange)}

/* ---------- dtpw-Positionsstatus (grün/orange, ersetzt Germanized-Grau) ---------- */
/* Farbe kommt aus dtpw (--dtpw-status-color, inline pro Status gesetzt) — identisch zu
   Produktseite und Produktkarte. is-ok/is-wait bleiben als Fallback fuer Altmarkup. */
/* Hier steht ein Lieferzeit-SATZ, kein Statuswort — deshalb kein Chip. Die
   Signalfarbe traegt der Punkt, die Schrift bleibt neutral lesbar. */
.spf-ci__stat{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;font-weight:600;
  color:var(--spfco-ink)}
.spf-ci__stat::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--dtpw-status-color,var(--spfco-muted))}
.spf-ci__stat.is-ok{color:var(--spfco-ok)}
.spf-ci__stat.is-wait{color:var(--spfco-orange)}
.spf-ci__name .wc-gzd-additional-info,
.spf-ci__name .delivery-time-info,
.spf-ci__name .wc-gzd-delivery-time-info,
.spf-ci__name .gzd-delivery-time,
.spf-ci__name .wc-gzd-additional-info-loop{display:none!important}

/* Aktualisieren-Button + Actions-Block visuell weg (JS auto-updatet), aber NICHT
   display:none — der Submit-Button muss fuer den Form-Submit funktional bleiben.
   Block auf 0 Hoehe kollabieren, Button off-screen. */
.spf-cart__actions{padding:0!important;border:0!important;margin:0!important;background:none!important;box-shadow:none!important;height:0!important;overflow:hidden!important}
.spf-cart__actions button[name="update_cart"]{position:absolute!important;left:-9999px!important;width:1px;height:1px}

/* PayPal-Express im Warenkorb: SICHTBAR seit 31.08.2026.
   Hier stand bis dahin eine harte Versteck-Regel („PayPal-Express raus, nur
   Kasse") aus der Zeit vor Kilis Entscheidung vom 25.08.2026, die
   Express-Buttons zu behalten („bringt den Kunden schnell zum Kauf"). Sie hat
   die Entscheidung ueberlebt und den Button auch nach erteilter Einwilligung
   unsichtbar gehalten — der Consent-Blocker allein haette ihn freigegeben.
   Wer ihn wieder abschalten will, tut das in den ppcp-Einstellungen
   (Position „cart"), nicht per CSS: Dort ist es sichtbar und nachvollziehbar. */
/* Buendig zum Knopf darueber. Vorher stand hier `max-width:320px`, gedacht als
   Zuegel gegen uebergrosse PayPal-Knoepfe — in der Summenkarte war die Karte
   aber breiter als 320 px, und die beiden Express-Knoepfe standen schmaler und
   linksbuendig unter einem Kassenknopf ueber die volle Breite (Kili, 03.09.2026,
   Desktop). Drei Knoepfe untereinander mit zwei verschiedenen Breiten lesen sich
   als Fehler, nicht als Rangfolge.
   PayPal rendert seine Knoepfe in einem eigenen Rahmen und passt sich der
   Containerbreite an; Radius und Flaeche gehoeren PayPal und bleiben, wie sie
   sind. Gleiches Ziel wie beim Apple-Pay-Knopf weiter unten: EINE Spaltenbreite
   fuer alles, was unter der Summe zum Kauf fuehrt. */
/* `position:relative;z-index:1` ist kein Abstand, sondern ein Deckel: PayPals
   eigenes SDK-CSS gibt seinen Knopf-iframes z-index 100 (component-frame) und 200
   (prerender-frame). Ohne eigenen Stapelkontext konkurrieren die Werte im
   Wurzelkontext der Seite und zeichnen ueber alles, was darueber liegen soll
   (Kopfleiste, mobile Kaufleiste). Mit dieser Regel bleiben sie im eigenen Kasten.
   Nur der Kontext wird gesetzt, keine Flaeche und keine Farbe — Aussehen und
   Radius gehoeren weiterhin PayPal. */
.cart_totals .ppc-button-wrapper,
.wc-proceed-to-checkout .ppc-button-wrapper{width:100%;max-width:none;margin:12px 0 0;position:relative;z-index:1}

/* Der weisse Grund hinter den Express-Knoepfen im Nachtmodus ist am 04.09.2026
   aufgeklaert und behoben — die Regel dazu steht netzwerkweit in spf-global.css
   („Fremde Zahlungs-Rahmen im Nachtmodus"). Kurzfassung: Er kam nicht von PayPal,
   sondern vom Browser, ausgeloest durch unser eigenes `color-scheme:dark` weiter
   oben in dieser Datei (Zeile 32). Hier steht bewusst nichts mehr: Ein Panel zu
   malen waere Symptomkosmetik gewesen. */

/* ---------- Apple-Pay-Express unter „Weiter zur Kasse" ----------
   Mollie erzeugt den Knopf erst im Browser: ein gewoehnliches
   <button id="mollie_applepay_button" class="apple-pay-button apple-pay-button-black">
   in dem serverseitig gelieferten <div id="mollie-applepayDirect-button">.
   KEIN Shadow-DOM, KEIN iframe — nur die ZEICHNUNG ist nativ
   (`-webkit-appearance:-apple-pay-button`). Hoehe, Breite, Radius und Abstand sind
   deshalb von aussen setzbar; Flaechenfarbe und Beschriftung nicht, die kommen aus
   `-apple-pay-button-style`/`-type` und gehoeren Apple.

   Mollie liefert dazu genau eine Regel (width:100%, display:inline-block) — eine
   Hoehe steht darin nicht, und bei uns stand zu diesem Knopf bisher gar nichts. Er
   fiel damit auf die Vorgabe des Browsers. Daher „deutlich kleiner"
   (Kili, 02.09.2026).

   --btn-h-l ist hier bewusst derselbe Token wie am Knopf darueber, NICHT --_h:
   --_h setzt spf-buttons.css am Knopf-Element selbst, es ist fuer diesen
   Nachbarn also nicht lesbar. Beide Stellen zeigen auf dieselbe Stufe L, damit
   sie zusammen wandern, wenn die Stufe je einen anderen Wert bekommt.
   Apple laesst 30 bis 64 px Hoehe zu, 54 px liegt darin. */
/* Zeiger: siehe die ausfuehrliche Begruendung an derselben Regel in
   spf-product-v2.css. Kurz: WebKit setzt an jedem <button> cursor:default,
   niemand sonst setzt etwas dagegen. Der Warenkorb hatte dasselbe Problem —
   nur eine Seite anzufassen haette die Haelfte inkonsistent gelassen. */
body.woocommerce-cart .cart_totals #mollie_applepay_button.apple-pay-button{
  display:block;width:100%;margin:0;
  height:var(--btn-h-l,54px);
  min-height:var(--btn-h-l,54px);
  border-radius:var(--btn-radius,10px);
  cursor:pointer;
}

/* ---------- Meldungen ("Artikel entfernt. Rueckgaengig machen?") ----------
   Der Warenkorb hatte dafuer KEINE einzige Regel: Die Meldung stand im
   Theme-Standard, mit gruener Linie, Woo-Icon und einem blau unterstrichenen
   Link mitten in einer sonst durchgestalteten Seite (Kili, 03.09.2026).

   Uebernommen wird die Form, die die Kasse schon hat (spf-kasse.css, Abschnitt
   Notices), damit beide Seiten dieselbe Sprache sprechen: ruhige Karte, eigener
   Rand, kein Icon.

   WARUM DAS WOO-ICON WEG MUSS: WooCommerce setzt ein absolut positioniertes
   ::before auf `left:1.5em` und rechnet mit 3.5em Innenabstand links. Unsere
   kompaktere Karte hat den nicht — das Zeichen laege auf dem Text. Derselbe
   Befund wie an der Kasse am 24.08.2026. */
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before{content:none!important;display:none!important}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info{
  border:1px solid var(--spfco-line-strong);border-left:3px solid var(--spfco-ok);
  border-radius:10px;background:var(--spfco-hover);color:var(--spfco-ink);
  padding:12px 14px;margin:0 0 16px;list-style:none;
  font-family:var(--spfco-sans);font-size:13.5px;line-height:1.55}

/* Fehler tragen dieselbe Form, nur den Rand in der Fehlerfarbe. */
body.woocommerce-cart .woocommerce-error{
  border:1px solid var(--spfco-bad);border-left:3px solid var(--spfco-bad);
  border-radius:10px;background:var(--spfco-hover);color:var(--spfco-ink);
  padding:12px 14px;margin:0 0 16px;list-style:none;
  font-family:var(--spfco-sans);font-size:13.5px;line-height:1.55}

/* KEIN Flex an der Zeile: Woo-Meldungen bestehen aus mehreren Inline-Knoten
   (Text, <a>, Text). Ein Flex-gap schoebe zwischen JEDEN davon Abstand, und die
   Wortabstaende vor Link und Satzzeichen liefen auseinander — an der Kasse am
   24.08.2026 belegt. */
body.woocommerce-cart .woocommerce-message li,
body.woocommerce-cart .woocommerce-info li,
body.woocommerce-cart .woocommerce-error li{display:block;margin:0;padding:3px 0;list-style:none}
body.woocommerce-cart .woocommerce-message li::marker,
body.woocommerce-cart .woocommerce-info li::marker,
body.woocommerce-cart .woocommerce-error li::marker{content:none}

/* Der Link "Rueckgaengig machen?" stand im Browser-Blau. Markenfarbe als TEXT
   braucht je Modus ein eigenes Token: --spf-brand-text ist der abgedunkelte
   Wert fuer helle Flaechen, --spf-brand-night der aufgehellte fuer dunkle.
   Das rohe --spf-brand traegt als Schrift auf Weiss keine 4,5:1. */
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-cart .woocommerce-error a{
  color:var(--spf-brand-text, var(--spfco-ink));font-weight:600;text-decoration:underline}
html.spf-night body.woocommerce-cart .woocommerce-message a,
body.spf-night.woocommerce-cart .woocommerce-message a,
html.spf-night body.woocommerce-cart .woocommerce-info a,
body.spf-night.woocommerce-cart .woocommerce-info a,
html.spf-night body.woocommerce-cart .woocommerce-error a,
body.spf-night.woocommerce-cart .woocommerce-error a{
  color:var(--spf-brand-night, var(--spfco-ink))}

/* Der Knopf "Zurueck zum Shop", den Woo in manche Meldungen legt, laeuft auf
   dem globalen Buttonsystem — hier steht nur die Ausrichtung. */
body.woocommerce-cart .woocommerce-message .button{float:none;margin-left:10px;vertical-align:baseline}

/* ---------- dtpw-Prognose-Box in der Summe ---------- */
.spf-cart-deliv-row td{padding:12px 0 0!important;border:0!important}
/* Radius 14 px, nicht 9: derselbe Wert wie die Summenkarte, in der die Box sitzt
   (Kili, 04.09.2026 — „Lieferzeit-Rahmen hat nicht den gleichen Border-Radius wie
   der Container"). Die Karte gibt den Ton an; 9 px las sich daneben als eigener,
   fremder Baustein. */
.spf-deliv{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:14px;
  background:var(--spfco-hover);border:1px solid var(--spfco-orange);font-size:12px;color:var(--spfco-ink);line-height:1.5}
.spf-deliv svg{width:16px;height:16px;stroke:var(--spfco-orange);fill:none;stroke-width:1.8;flex:none;margin-top:1px}
.spf-deliv b{white-space:nowrap}
.spf-deliv__note{display:block;color:var(--spfco-muted);font-size:11px;margin-top:2px}

/* ---------- Guthaben & Codes — EIN Panel (Coupon + bso-Guthaben) ---------- */
.spf-guthaben-panel{
  background:var(--spfco-panel);border:1px solid var(--spfco-line-strong);border-radius:var(--spfco-r);padding:16px 18px;
  box-shadow:0 1px 2px rgba(20,24,28,.03),0 8px 26px rgba(20,24,28,.05)}
body.spf-night .spf-guthaben-panel{box-shadow:none}
.spf-guthaben__head{font-family:var(--spfco-cond);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  font-size:12.5px;color:var(--spfco-faint);margin-bottom:12px}
.spf-coupon-form{margin:0}
.spf-coupon-row{display:flex;gap:8px}
.spf-coupon-input{flex:1;min-width:0;min-height:42px;padding:0 13px;border:1px solid var(--spfco-border);
  border-radius:var(--spfco-r-s);background:var(--spfco-card);color:var(--spfco-ink);font-size:13.5px}
.spf-coupon-input:focus{border-color:var(--spfco-orange);box-shadow:0 0 0 3px var(--spfco-orange-soft);outline:none}
.spf-coupon-btn{min-height:42px;padding:0 16px;border:1px solid var(--spfco-border);border-radius:var(--spfco-r-s);
  background:var(--spfco-card);color:var(--spfco-ink);font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap}
@media (hover:hover){
.spf-coupon-btn:hover{border-color:var(--spfco-orange);color:var(--spfco-orange)}}
.spf-guthaben__hint{margin-top:10px;font-size:11px;color:var(--spfco-faint);line-height:1.5}
/* bso-Guthaben-Feld im Slot: Eigen-Rahmen/bg weg (Panel traegt), Felder angleichen. */
.spf-wallet-slot{margin-top:12px}
.spf-wallet-slot .bso-wallet-redeem{background:transparent!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
.spf-wallet-slot label,.spf-wallet-slot legend{font-size:12.5px;color:var(--spfco-muted)}
.spf-wallet-slot input[type=text]{width:100%;min-height:42px;padding:0 13px;border:1px solid var(--spfco-border);
  border-radius:var(--spfco-r-s);background:var(--spfco-card);color:var(--spfco-ink);font-size:13.5px}
.spf-wallet-slot input[type=text]:focus{border-color:var(--spfco-orange);box-shadow:0 0 0 3px var(--spfco-orange-soft);outline:none}
.spf-wallet-slot button,.spf-wallet-slot input[type=submit]{min-height:42px;padding:0 16px;border:0;border-radius:var(--spfco-r-s);
  background:var(--spfco-orange);color:var(--spfco-on-brand, #fff);font-family:var(--spfco-cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;cursor:pointer}
@media (hover:hover){
.spf-wallet-slot button:hover,
.spf-wallet-slot input[type=submit]:hover{background:var(--spfco-orange-press)}}

/* ---------- Cross-Sells (garage-getrieben, spf-cart.js) ---------- */
/* Bodenabstand: Die Sektion ist das letzte Element der Seite und liegt ausserhalb
   des .woocommerce-Wrappers (direkt in main#brx-content) — von dort kommt kein
   Innenabstand mehr. Gemessen am 24.08.2026: 0 px zwischen Kartenkante und
   Footer, die Karten klebten an der Footer-Kante. 70 px liegt auf der Linie der
   Kasse (dort 80 px unten). Ist die Sektion leer, traegt sie `hidden` und faellt
   samt Abstand weg. */
.spf-crosssells{margin-top:36px;margin-bottom:70px}
.spf-xs__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
/* KEIN white-space:nowrap. Die Ueberschrift traegt den Fahrzeugnamen aus der
   Garage („Passend zu deiner 1390 SUPER DUKE R, black 2025"), und der ist
   datenabhaengig lang. Mit nowrap stand sie am 02.09.2026 bei 386 px Viewport
   449 px breit und schob das ganze Dokument auf 471 px — die Seite scrollte
   seitwaerts. `min-width:0` dazu, weil sie in einem Flex-Container liegt und
   Flex-Elemente sonst nicht unter ihre Inhaltsbreite schrumpfen. Auf breiten
   Schirmen aendert sich nichts: Dort passt der Titel ohnehin in eine Zeile. */
.spf-xs__title{font-family:var(--spfco-cond);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--spfco-ink);margin:0;min-width:0;overflow-wrap:anywhere}
.spf-xs__rule{flex:1;height:1px;background:var(--spfco-line-strong)}
/* Feste Spaltenzahl statt auto-fill. `auto-fill` mit 220-px-Untergrenze ergibt erst
   ab 458 px Containerbreite zwei Spalten — auf jedem Telefon (390 bis 430 px) stand
   deshalb genau EINE Karte je Zeile, ueber die volle Seitenbreite, und wegen
   aspect-ratio:1/1 am Bild auch entsprechend hoch (Kili, 02.09.2026).
   Staffel woertlich wie .spfcp-grid auf Kategorie-, Marken- und Suchergebnisseite.
   minmax(0,1fr) statt 1fr, damit ein langer Produktname die Spalte nicht aufzieht. */
.spf-xs__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1200px){.spf-xs__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (max-width:900px){.spf-xs__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.cross-sells{margin-top:34px;grid-column:1/-1}
.cross-sells>h2{font-family:var(--spfco-cond);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--spfco-ink)}

/* ---------- Leerer Warenkorb ---------- */
.cart-empty{font-size:15px;color:var(--spfco-muted)}
.return-to-shop a.button{display:inline-block;margin-top:12px;min-height:46px;line-height:46px;padding:0 20px;
  border-radius:var(--spfco-r-s);background:var(--spfco-orange);color:var(--spfco-on-brand, #fff)!important;text-decoration:none;
  font-family:var(--spfco-cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13px}

/* ---------- Mobile ---------- */
@media (max-width:780px){
  .spf-ci{grid-template-columns:72px minmax(0,1fr) auto;
    grid-template-areas:"img body rm" "img qty total";row-gap:10px}
  .spf-ci__img{width:72px;height:72px}
  .spf-ci__qty{justify-self:start}
  .spf-ci__total{text-align:left;min-width:0}
  /* Hier steht das X neben dem NAMEN, nicht neben dem Preis (zweireihiges Raster
     oben). Oben ausgerichtet bleibt es auf Hoehe der ersten Textzeile; mittig
     saesse es neben der Lieferzeit. Begruendung ausfuehrlich bei der Grundregel. */
  .spf-ci__rm{align-self:start;margin-top:-4px}
  /* iOS zoomt die Seite hinein, sobald ein Eingabefeld unter 16 px liegt, und
     zoomt danach nicht von selbst zurueck. Beide Felder standen darunter: das
     Mengenfeld auf 14 px (Regel weiter oben), das Gutscheinfeld auf 13,5 px
     (spf-warenkorb.css, `… .bso-wallet-input input`, 0,4,1 — deshalb hier ueber
     die Id). Am Schirm bleibt es bei den kleineren Werten. */
  .spf-ci__qty .quantity input.qty{font-size:16px}
  body.woocommerce-cart #bso-wallet-code{font-size:16px}
}

/* ---------- Mobil: die Summenkarte bleibt eine Tabelle ----------
   Befund 31.08.2026 (Kili: „Zusammenfassungstabelle gebrochen").

   Die Summenkarte ist KEIN eigenes Markup, sondern die unveraenderte
   WooCommerce-Kernvorlage `cart/cart-totals.php` — eine echte
   <table class="shop_table shop_table_responsive"> mit <th>Label</th> und
   <td data-title="Label">Betrag</td>. SPF_Cart::OVERRIDES enthaelt nur
   'cart/cart.php', fuer cart-totals.php gibt es keinen Override.

   Damit greift auf dem iPhone `woocommerce-smallscreen.css`, das WooCommerce mit
   media="only screen and (max-width:768px)" einreiht. Es loest die Tabelle auf:
     tr{display:block}  tbody th{display:none}  td{display:block;text-align:right}
     td::before{content:attr(data-title)}
   Das Label wandert also in ein ::before, die Wertespalte entfaellt — Label und
   Betrag stehen nur so lange nebeneinander, wie der Platz zufaellig reicht.
   Bei „Batteriepfand (1 Stück)" reichte er nicht, deshalb der Umbruch im Screenshot.

   Unsere Vorgaben weiter oben (table-layout:fixed, th 60 %, td 40 %) sind dort
   wirkungslos: `display:block` hebt den Tabellenkontext auf, damit greifen
   Spaltenbreiten nicht mehr.

   Gegenmassnahme: die Tabellenanzeige zurueckholen, aber AUSSCHLIESSLICH fuer die
   Summenkarte des Warenkorbs (doppelt geriegelt ueber body.woocommerce-cart
   .cart_totals). Andere shop_table_responsive-Tabellen — Kontoansicht,
   Danke-Seite, Kasse — behalten ihr Mobilverhalten unveraendert. */
@media only screen and (max-width:768px){
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr{display:table-row}
  body.woocommerce-cart .cart_totals table.shop_table_responsive tbody th{display:table-cell;text-align:left}
  body.woocommerce-cart .cart_totals table.shop_table_responsive tbody td{display:table-cell;text-align:right!important}
  /* Das aus data-title erzeugte Label entfaellt — das echte <th> ist wieder da,
     sonst stuende die Beschriftung doppelt. */
  body.woocommerce-cart .cart_totals table.shop_table_responsive tbody td::before{content:none!important}
  /* Etwas Luft und stabile Spalten, damit lange Beschriftungen wie
     „Batteriepfand (1 Stück)" umbrechen duerfen, ohne die Wertespalte zu druecken.
     `white-space:normal` gehoert hier zwingend dazu (03.09.2026): Die Breite und
     `hyphens:auto` allein bewirkten nichts, weil spf-warenkorb.css mit
     `body.woocommerce-cart .cart_totals table th` (0,2,3) nowrap setzt und diese
     Regel es ohne eigene Angabe nicht ueberschreibt. Die Beschriftung konnte also
     gar nicht umbrechen und schob stattdessen die Wertespalte. */
  body.woocommerce-cart .cart_totals table.shop_table_responsive th{width:58%;padding-right:10px;hyphens:auto;white-space:normal}
  body.woocommerce-cart .cart_totals table.shop_table_responsive td{width:42%;white-space:nowrap}
  /* Ausnahme: Wertzellen, die Fliesstext statt einer Zahl tragen — Versandart samt
     Adresszusatz, Gutschein mit „[Entfernen]"-Link, Gebuehrenzeile. Bei ihnen
     schiebt nowrap die Karte auf. Preise bleiben ueber die Regel darueber
     einzeilig. Der Selektor traegt `table.shop_table_responsive` und die
     Zeilenklasse mit und steht damit auf (0,4,3) — sonst verliert er gegen die
     nowrap-Regel (0,3,3). Zeilenklassen aus dem WooCommerce-Kern
     (`cart/cart-totals.php`, `cart/cart-shipping.php`), fuer den es bei uns
     keinen Override gibt. */
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td,
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.cart-discount td,
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.fee td{white-space:normal}
  /* Ausnahme: Die dtpw-Prognosebox ist KEINE Wertzelle, sondern eine Zeile ueber
     die volle Breite. Das nowrap der Zeile darueber gilt aber auch fuer sie, und
     ihr Hinweistext („Fuer getrennte Lieferung bitte getrennt bestellen.") lief
     damit am 02.09.2026 bei 386 px Viewport 25 px ueber die Karte hinaus.
     Die Datumsspanne bleibt ueber `.spf-deliv b` weiter in einer Zeile. */
  /* Selektor traegt `table.shop_table_responsive` mit, sonst steht diese Zeile
     auf (0,3,2) und verliert gegen die nowrap-Regel darueber (0,3,3). */
  body.woocommerce-cart .cart_totals table.shop_table_responsive .spf-cart-deliv-row td{width:auto;white-space:normal}
}

/* Zwischenstand der Zeilensumme: Nach einem Tipp auf +/- steht der Betrag sofort
   neu da (Stueckpreis x Menge, siehe spf-cart.js Abschnitt 1c), bestaetigt ist er
   aber erst mit der Serverantwort rund eine Sekunde spaeter. Die gedaempfte
   Darstellung sagt genau das: Die Zahl gilt, sie ist nur noch nicht quittiert.
   Kein Grau-in-Grau — der Wert muss lesbar bleiben. */
.spf-ci__total.is-vorlaeufig{opacity:.55;transition:opacity .18s ease}