/* =============================================================================
   BSO Button-System B — netzwerkweit
   -----------------------------------------------------------------------------
   Umsetzung von BSO/ANWEISUNG-Buttonsystem-und-Barrierefreiheit.md
   (Entscheidung Kili, 11.08.2026; ausgerollt 12.08.2026).

   Grundform: orange gefuellt, randlos, 10 px Radius. Bewegung: ein Glanzwischer,
   der UNTER der Schrift durchlaeuft.

   Die Beschriftung kann eine dunkle Kontur tragen (--btn-stroke). Sie war als
   Kontrastloesung gedacht: gemessen wird dann die Konturfarbe gegen die Flaeche,
   #0f1011 auf #ff6600 = 7,15:1 statt 2,94:1 fuer weisse Schrift allein.
   AUF KTM IST SIE SEIT DEM 12.08.2026 ABGESCHALTET — Kili gefiel die Optik nicht.
   Damit steht die Beschriftung dort wieder bei 2,94:1 und verfehlt WCAG 1.4.3.
   Bewusste Entscheidung; sie gehoert in die Barrierefreiheitserklaerung.
   Zurueckdrehen: in SPF_Brand::DEFAULTS 'brand_stroke' auf '' setzen.

   Ersetzt den Buttonteil von spf-global.css (dort stand seit dem Bricks-Ausbau
   das alte Design: eckig, 2 px Rand, Invert-Hover auf Weiss). Die
   Kategorie-Seitenleiste ist dort geblieben.

   Aufbau nach „Weg A" der Anweisung: Die .bso-btn-Regeln stehen zusammen mit den
   echten Selektoren des Shops. Kein Markup-Eingriff, wirkt sofort ueberall und
   ueberlebt Plugin-Updates von WooCommerce.
   ============================================================================= */

@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}

/* ── 1.1 Tokens ─────────────────────────────────────────────────────────────
   Der einzige Block, der bei einer spaeteren Designaenderung anzufassen ist. */

:root{
	/* Marke — nicht aendern.
	   Hover und Aktiv MUESSEN aus der Palette kommen: Standen sie fest auf dem
	   KTM-Orange, sprang der Husky-Knopf beim Ueberfahren von Blau auf Orange
	   (gefunden 12.08.2026). --spf-brand-press ist der dunklere Zwilling der
	   Markenfarbe und je Shop gesetzt.
	   Aktiv gibt es in der Palette nicht — es wird aus dem Hover abgeleitet,
	   damit es ohne weiteren Pflegepunkt in jeder Marke stimmt. */
	/* Flaeche: --spf-brand-fill ist die Markenfarbe, notfalls minimal abgedunkelt,
	   bis sie 3:1 gegen Weiss haelt (WCAG 1.4.11 — sonst ist der Knopf nicht als
	   Knopf erkennbar). Bei KTM #ff6600 -> #f96300, mit blossem Auge nicht zu
	   unterscheiden; Husky-Blau haelt 11,29:1 und bleibt unveraendert.
	   Entscheidung Kili, 12.08.2026 — vorher stand dort eine sichtbare Kante.
	   --o bleibt die reine Markenfarbe fuer Kanten, Punkte und Akzente. */
	--o:          var(--brand-accent, #ff6600);
	--o-fill:     var(--spf-brand-fill, var(--o));
	--o-hover:    var(--spf-brand-press, #e25c00);
	--o-active:   color-mix(in srgb, var(--o-hover) 88%, #000);
	/* Konturfarbe kommt aus der Markenpalette und wird dort gerechnet: dunkel,
	   wo die Schrift auf der Markenflaeche den Kontrast nicht allein traegt
	   (KTM: Weiss auf Orange = 2,94:1), sonst `transparent`
	   (Husky: Weiss auf #273a60 = 11,3:1, dort waere eine Kontur nur schmutzig).
	   Siehe SPF_Brand::stroke_fuer(). */
	--btn-stroke: var(--spf-brand-stroke, #0f1011);

	/* Fokusring bewusst NICHT an --btn-stroke gehaengt: Die Kontur laesst sich
	   je Marke auf `transparent` stellen (KTM seit 12.08.2026), der Fokusring
	   muss aber immer sichtbar bleiben — sonst faellt WCAG 2.4.7 als
	   Nebenwirkung einer Designentscheidung mit um. */
	--btn-focus:  #0f1011;

	/* Form */
	--btn-radius: 10px;
	--btn-speed:  .16s;

	/* Groessen: genau drei, keine weiteren */
	--btn-h-s:  38px;  --btn-px-s: 16px;  --btn-fs-s: 14px;
	--btn-h:    48px;  --btn-px:   24px;  --btn-fs:   15px;
	--btn-h-l:  54px;  --btn-px-l: 28px;  --btn-fs-l: 16px;

	/* Typografie: ein Schnitt fuer alle Buttons.
	   Eigenes Token statt --brand-font-head, weil dort bei KTM „Blender Heavy"
	   steht — die Anweisung verlangt ausdruecklich Blender Pro 700 und keinen
	   Heavy-Schnitt. Husky setzt --brand-font-btn in seiner Palette und bekommt
	   damit die Hausschrift, ohne dass hier etwas geaendert werden muss. */
	--btn-font:   var(--brand-font-btn, 'Blender Pro', system-ui, sans-serif);
	--btn-weight: 700;
	--btn-ls:     .5px;

	/* Rollen */
	--btn-bg:   var(--o-fill);
	--btn-bg-h: var(--o-hover);
	--btn-bg-a: var(--o-active);
	--btn-fg:   #ffffff;

	/* Flaechen — Tag */
	--btn-line:  #e4e6e8;
	--btn-text:  #16181c;
	--btn-muted: #6b7280;
	--btn-sheen: rgba(255,255,255,.28);
}

body.spf-night, html.spf-night{
	--btn-line:  #33363a;
	--btn-text:  #e8eaed;
	--btn-muted: #a9adb3;
	--btn-sheen: rgba(255,255,255,.20);
}


/* ── 1.2 Basis ──────────────────────────────────────────────────────────────
   `isolation:isolate` ist Pflicht, nicht Kosmetik: ohne eigenen Stapelkontext
   rutscht der Glanzwischer aus 1.6 (z-index:-1) hinter den Elternhintergrund
   und ist unsichtbar.                                                        */

.bso-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
button.single_add_to_cart_button,
a.checkout-button,
a.add_to_cart_button,
/* Karten-CTA (.spfcard) — ZUSAETZLICH zu a.add_to_cart_button noetig, nicht doppelt
   gemoppelt: WooCommerce vergibt `add_to_cart_button` nur bei kaufbar UND auf Lager.
   Ein nicht lieferbares oder variables Produkt bekommt lediglich
   `class="button product_type_variable"` — der Knopf fiel damit aus jeder Regel dieser
   Datei heraus. `.woocommerce a.button` faengt ihn nicht auf, weil die Cross-Sell-
   Sektion des Warenkorbs ([data-spf-crosssells]) ausserhalb des .woocommerce-Wrappers
   direkt in main#brx-content steht. Ergebnis war ein nackter Unterstrich-Link
   (gefunden 24.08.2026 an Produkt 779 QLC-HAW). */
.spfcard__actions a.button,
/* Konto und Anmeldung (.psk-konto) — aus demselben Grund wie die Karten-CTA
   darueber: Das WooCommerce-Formular steht dort NICHT in einem
   `.woocommerce`-Wrapper (Elternkette gemessen 18.08.2026: form.login ->
   div.wcwrap -> div.card -> div.psk-konto), also greift `.woocommerce
   button.button` nicht. Ohne diese Zeilen traegt der Anmelden-Knopf eine eigene
   Nachbildung aus spf-account.css: 9 px rund statt 10, ohne Glanzwischer, ohne
   den Fokusring des Systems. */
.psk-konto .wcwrap .button,
.psk-konto .wcwrap button[type="submit"],
.psk-konto .wcwrap input[type="submit"],
.psk-konto .btn.primary,
button.wc-block-components-checkout-place-order-button,
button.wc-block-components-button,
button.ktm-nl__btn,
button.spffo__top,
a.spflh-cta--main,
a.spflh-cta--sec,
a.ps-btn--dark,
button.spfcp-more__btn,
a.bmp-btn,
a.btn.primary{
	--_h:var(--btn-h); --_px:var(--btn-px); --_fs:var(--btn-fs);

	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	height:var(--_h); padding:0 var(--_px);
	border:0; border-radius:var(--btn-radius);
	background:var(--btn-bg); color:var(--btn-fg);
	font-family:var(--btn-font); font-size:var(--_fs); font-weight:var(--btn-weight);
	line-height:1; letter-spacing:var(--btn-ls); text-transform:uppercase;
	text-decoration:none; white-space:nowrap; cursor:pointer;

	position:relative; overflow:hidden; isolation:isolate;

	transition:background-color var(--btn-speed) ease,
	           color            var(--btn-speed) ease,
	           box-shadow       var(--btn-speed) ease,
	           transform        var(--btn-speed) ease;
}

.bso-btn--s{ --_h:var(--btn-h-s); --_px:var(--btn-px-s); --_fs:var(--btn-fs-s) }
.bso-btn--l{ --_h:var(--btn-h-l); --_px:var(--btn-px-l); --_fs:var(--btn-fs-l) }
.bso-btn--block{ display:flex; width:100% }


/* ── 1.3 Zustaende ────────────────────────────────────────────────────────── */

/* ⚠️ DIE AUSSCHLUSSLISTE IST PFLICHT (02.09.2026).

   Diese Regel fuellt beim Zeigen die Flaeche. Sie stand als blankes `.bso-btn:hover` da
   und traf damit AUCH die Rollen, die keine Flaeche haben: `--ter` (nur Kante),
   `--link` (nur Text) und `--sec` (eigene Hover-Regel weiter unten).

   Was dabei herauskam, hat Kili am Knopf „Garage leeren" gesehen: Im Nachtmodus wurde die
   Flaeche beim Zeigen KTM-orange (#e25c00), waehrend Schrift und Kante aus
   `.bso-btn--ter:hover` in den Warnton (#ff8a80) drehten — rosa Schrift auf orangem Kasten,
   knapp ueber 1:1 Kontrast und optisch ein Fremdkoerper. Der Grund, warum es so lange
   unbemerkt blieb: `.bso-btn--ter:hover` setzt Farbe und Kante, aber KEINEN Hintergrund,
   raeumt die geerbte Fuellung also nicht weg. Und `.bso-btn--ter{background:transparent}`
   verliert gegen `:hover` schlicht an Spezifitaet (0,1,0 gegen 0,2,0).

   Die Liste ist dieselbe, die weiter unten schon bei der Textkontur steht — dort war der
   Ausschluss von Anfang an da, hier fehlte er. */
@media (hover:hover){
.bso-btn:not(.bso-btn--link):not(.bso-btn--sec):not(.bso-btn--ter):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
button.single_add_to_cart_button:hover,
a.checkout-button:hover,
a.add_to_cart_button:hover,
.spfcard__actions a.button:hover,
.psk-konto .wcwrap .button:hover,
.psk-konto .wcwrap button[type="submit"]:hover,
.psk-konto .wcwrap input[type="submit"]:hover,
.psk-konto .btn.primary:hover,
button.wc-block-components-checkout-place-order-button:hover,
button.ktm-nl__btn:hover,
button.spffo__top:hover,
a.spflh-cta--main:hover,
a.bmp-btn:hover{ background:var(--btn-bg-h) }}

.bso-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce .button.alt:active,
button.single_add_to_cart_button:active,
a.checkout-button:active,
a.add_to_cart_button:active,
.spfcard__actions a.button:active,
.psk-konto .wcwrap .button:active,
.psk-konto .wcwrap button[type="submit"]:active,
.psk-konto .wcwrap input[type="submit"]:active,
.psk-konto .btn.primary:active,
button.ktm-nl__btn:active,
button.spffo__top:active,
a.bmp-btn:active{ background:var(--btn-bg-a); transform:translateY(1px) }

/* Beim Druecken gilt dasselbe wie beim Zeigen: Rollen ohne Fuellung bekommen keine.
   Hier steht bewusst nur der Hintergrund und nicht die ganze Ausschlussliste im Selektor
   darueber — `transform:translateY(1px)` soll bleiben. Das Nachgeben ist die Rueckmeldung
   auf den Druck, die Flaeche ist es nicht.
   Gleiche Spezifitaet wie `.bso-btn:active` (0,2,0), deshalb muss diese Regel DANACH
   stehen. `--sec` bleibt aussen vor, die faerbt beim Druecken absichtlich. */
.bso-btn--ter:active,
.bso-btn--link:active{ background:transparent }

/* Fokusring: dunkler Kern plus oranger Hof. Ein einfarbig oranger Ring waere auf
   der orangen Flaeche unsichtbar. Der globale Ring aus spf-a11y.css setzt einen
   weissen Aussenring — der wuerde hier die Innenkante ueberschreiben, deshalb
   fuer Buttons eine eigene Fassung. */
.bso-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .button.alt:focus-visible,
button.single_add_to_cart_button:focus-visible,
a.checkout-button:focus-visible,
a.add_to_cart_button:focus-visible,
.spfcard__actions a.button:focus-visible,
.psk-konto .wcwrap .button:focus-visible,
.psk-konto .wcwrap button[type="submit"]:focus-visible,
.psk-konto .wcwrap input[type="submit"]:focus-visible,
.psk-konto .btn.primary:focus-visible,
button.wc-block-components-checkout-place-order-button:focus-visible,
button.wc-block-components-button:focus-visible,
button.ktm-nl__btn:focus-visible,
button.spffo__top:focus-visible,
a.spflh-cta--main:focus-visible,
a.spflh-cta--sec:focus-visible,
a.ps-btn--dark:focus-visible,
button.spfcp-more__btn:focus-visible,
a.btn.primary:focus-visible,
a.bmp-btn:focus-visible{
	outline:2px solid var(--btn-focus);
	outline-offset:2px;
	/* Der Hof kommt aus der Markenpalette, nicht aus einem festen Orange: Auf
	   Husky lag um den blauen Knopf sonst ein oranger Ring. */
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--spf-brand, #ff6600) 45%, transparent);
}
body.spf-night .bso-btn:focus-visible,
html.spf-night .bso-btn:focus-visible,
body.spf-night .woocommerce a.button:focus-visible,
body.spf-night .woocommerce button.button:focus-visible,
body.spf-night button.single_add_to_cart_button:focus-visible{ outline-color:#ffffff }
body.spf-night, html.spf-night{ --btn-focus:#ffffff }

.bso-btn[disabled], .bso-btn.is-disabled,
.woocommerce a.button.disabled, .woocommerce button.button:disabled,
.spfcard__actions a.button.disabled,
.psk-konto .wcwrap .button.disabled,
.psk-konto .wcwrap button[type="submit"].disabled,
.psk-konto .wcwrap input[type="submit"].disabled,
.psk-konto .btn.primary.disabled,
button.single_add_to_cart_button:disabled{
	opacity:.45; cursor:not-allowed; pointer-events:none;
}


/* ── 1.4 Rollen ─────────────────────────────────────────────────────────────
   Sekundaer — Umriss. Tag dunkles Label (15:1), Nacht oranges Label (6,49:1).
   Grund: oranger Text auf Weiss erreicht nur 2,94:1, und eine dunkle Kontur um
   orangen Text auf hellem Grund sieht rau aus.                               */

.bso-btn--sec{
	background:transparent; color:var(--btn-text);
	box-shadow:inset 0 0 0 1.5px var(--o);
}
/* NICHT --o, sondern die Nacht-Signatur — dieselbe Begruendung wie beim
   Hero-Sekundaerknopf ein paar Zeilen weiter unten, sie gilt hier genauso und
   war nur nie nachgezogen worden: Bei KTM sind beide Ebenen Orange, bei Husky
   ist die Arbeitsfarbe Dunkelblau. Als Schrift auf dunklem Grund kam sie am
   26.08.2026 auf der Fehlerseite auf **1,72:1** und war praktisch unsichtbar;
   mit --spf-brand-night (Husky: Signalgelb) sind es 16,10:1. Gemessen, nicht
   geschaetzt.

   Der Umriss folgt ueber `currentColor` automatisch mit — sonst bliebe die
   Kante im alten Dunkelblau stehen, waehrend die Schrift wechselt. */
body.spf-night .bso-btn--sec, html.spf-night .bso-btn--sec{
	color:var(--spf-brand-night, var(--o));
	box-shadow:inset 0 0 0 1.5px currentColor;
}

/* Hero-Sekundaerknopf: ohne Umriss, Beschriftung in der Markenfarbe.
   Entscheidung Kili, 12.08.2026 — der Rahmen wirkte neben dem gefuellten
   Hauptknopf zu laut.

   NICHT --o, sondern die Nacht-Signatur: Der Hero-Grund ist in beiden Modi
   dunkel (#0f1011). Bei KTM sind beide Ebenen Orange (6,49:1), bei Husky ist
   die Arbeitsfarbe aber Dunkelblau — als Text auf dieser Buehne kommt sie auf
   1,69:1 und ist praktisch unsichtbar. Genau dafuer haelt die Palette
   --spf-brand-night bereit (Husky: Signalgelb #ffed00, rund 15:1).
   Dieselbe Trennung fuehrt das Kopf-Skin unter --spf-hd-sig. */
a.spflh-cta--sec{
	background:transparent;
	color:var(--spf-brand-night, var(--o));
	box-shadow:none;
	/* Der Rand kam bisher aus spf-landing-hero.css (`border:1.5px solid
	   var(--spflh-orange)`). Die Grundstellung dieses Stylesheets setzt
	   `border:0` und ist durch das vorangestellte `a` spezifischer — der Rand
	   fiel damit lautlos weg. Hier gehoert er hin, und `currentColor` haelt ihn
	   automatisch auf der Ebene der Schrift: Orange bei KTM, Gelb bei Husky. */
	border:1.5px solid currentColor;
}
@media (hover:hover){
.bso-btn--sec:hover{ background:var(--o); color:#fff }}
.bso-btn--sec:active{ background:var(--o-hover) }

/* Hero-Sekundaerknopf, gefuellter Zustand: dieselbe Ebene wie die Ruheschrift.
   Vorher fuellte er mit der Arbeitsfarbe — auf KTM stimmig (orange zu orange),
   auf Husky ein Bruch: gelbe Schrift sprang auf blaue Flaeche.
   `--spf-brand-night-ink` ist der zugehoerige Schriftton und in der Palette
   bereits gepflegt: KTM Weiss auf Orange, Husky Dunkelblau auf Gelb (9,3:1).
   Aktiv wird aus derselben Farbe abgeleitet, damit auch dort nichts springt. */
@media (hover:hover){
a.spflh-cta--sec:hover{
	background:var(--spf-brand-night, var(--o));
	color:var(--spf-brand-night-ink, #fff);
	/* Ohne diese Zeile bliebe der Rand auf currentColor stehen, also auf der
	   Schriftfarbe des gefuellten Zustands — ein blauer Strich auf gelber
	   Flaeche bei Husky. */
	border-color:var(--spf-brand-night, var(--o));
}}
a.spflh-cta--sec:active{
	background:color-mix(in srgb, var(--spf-brand-night, var(--o)) 88%, #000);
	color:var(--spf-brand-night-ink, #fff);
	border-color:color-mix(in srgb, var(--spf-brand-night, var(--o)) 88%, #000);
}

/* Tertiaer — neutral */
.bso-btn--ter,
button.spfcp-more__btn{
	background:transparent; color:var(--btn-text);
	box-shadow:inset 0 0 0 1px var(--btn-line);
}
@media (hover:hover){
.bso-btn--ter:hover,
button.spfcp-more__btn:hover{ color:var(--o); box-shadow:inset 0 0 0 1px var(--o) }}

/* Modellseiten-CTA, zweite Rolle. Neutraler Rahmen statt Markenfarbe — er steht
   direkt neben dem orangen Hauptknopf und soll ihm nicht die Aufmerksamkeit
   nehmen. Kein Glanzwischer, weil die Flaeche leer ist. */
/* WICHTIG: Die Modellseite ist dunkel gestaltet (Flaeche #17181a). Die globalen
   Tokens --btn-text/--btn-line sind fuer helle Seiten gedacht und ergaben hier
   dunkle Schrift auf dunklem Grund — der Knopf war praktisch unsichtbar
   (gefunden 12.08.2026). Deshalb die seitenlokalen Tokens zuerst, die globalen
   nur als Rueckfall, falls die Rolle einmal ausserhalb der Modellseite auftaucht. */
a.bmp-btn--ghost{
	background:transparent;
	color:var(--bmp-ink, var(--btn-text));
	box-shadow:inset 0 0 0 1px var(--bmp-line-strong, var(--btn-line));
	-webkit-text-stroke:0;
}
@media (hover:hover){
a.bmp-btn--ghost:hover{
	background:var(--bmp-ink, var(--btn-text));
	color:var(--bmp-panel, #fff);
	box-shadow:inset 0 0 0 1px var(--bmp-ink, var(--btn-text));
}}
a.bmp-btn--ghost::after{ display:none }

/* Neutral gefuellt — „Mehr ueber uns" */
.bso-btn--dark,
a.ps-btn--dark{ background:var(--btn-text); color:#fff }
/* Nachts dreht --btn-text auf hell (#e8eaed). Die Flaeche wird damit fast weiss,
   die Schrift blieb Weiss — gemessen 1,09:1. Die Schriftfarbe muss mitdrehen,
   die Flaeche bleibt am Token. Steht bewusst VOR der Hover-Regel: gleiche
   Spezifitaet, und auf der orangen Hover-Fuellung soll weiter Weiss stehen. */
body.spf-night .bso-btn--dark, html.spf-night .bso-btn--dark,
body.spf-night a.ps-btn--dark, html.spf-night a.ps-btn--dark{ color:#16181c }
@media (hover:hover){
.bso-btn--dark:hover,
a.ps-btn--dark:hover{ background:var(--o); color:#fff }}

/* Textlink in Buttonrolle */
.bso-btn--link,
button.bsoc-open,
span.s2-tile-cta,
button.spf-fitbadge__link,
span.wc-block-components-address-card__edit{
	height:auto; padding:0; background:none; color:var(--btn-muted);
	font-family:var(--brand-font-body, 'Roboto Condensed Regular', system-ui, sans-serif);
	font-weight:400; font-size:13.5px; letter-spacing:normal; text-transform:none;
	overflow:visible; box-shadow:none; border-radius:0;
}

/* Trefferflaeche. Die Rolle steht auf `height:auto; padding:0` und ist damit nur
   so hoch wie ihre Schrift. Der Innenabstand vergroessert das Ziel, der gleich
   grosse negative Aussenabstand nimmt ihn aus dem Fluss wieder heraus —
   Grundlinie und Zeilenrhythmus bleiben, wo sie waren.
   16 px und nicht 12: 13,5 px Schrift plus 2x12 sind erst 37,5 px, die 44 px
   tragen erst 2x16. Sichtbar aendert sich nichts, die Rolle hat in keinem
   Zustand eine Flaeche (kein Hintergrund, kein Glanzwischer). */
.bso-btn--link{
	padding-top:16px; padding-bottom:16px;
	margin-top:-16px; margin-bottom:-16px;
}
/* Fitment-Knopf: Groesse und Hover-Flaeche kommen aus `spf-garage-hub.css`
   (min-height 30 px, padding 4/8, margin -4). 7 px Innenabstand ergeben mit
   dieser Mindesthoehe genau 44 px, der negative Aussenabstand haelt die
   Aussenhoehe bei denselben 30 px wie bisher. Auf der Produktseite v2 bleibt
   die dortige Regel gueltig (40x40, hoehere Spezifitaet). */
button.spf-fitbadge__link{
	padding-top:7px; padding-bottom:7px;
	margin-top:-7px; margin-bottom:-7px;
}
@media (hover:hover){
.bso-btn--link:hover,
button.bsoc-open:hover,
span.s2-tile-cta:hover,
button.spf-fitbadge__link:hover{ color:var(--o); text-decoration:underline; text-underline-offset:3px }}
.bso-btn--link:active{ transform:none }

/* Dunkle Flaechen im hellen Modus. Die Tokens --btn-text und --btn-muted sind
   fuer helle Untergruende gedacht; wo der Grund dunkel ist, muessen sie drehen.
   Sonst steht dunkle Schrift auf dunklem Grund — im Hero war der Sekundaerknopf
   dadurch bei 1,07:1 und faktisch unsichtbar (gefunden auf Husky, 12.08.2026).
   Ueber die Kaskade geloest, damit die Rollen oben unveraendert bleiben. */
.spffo, .spffo__col, .spffo__bottom{
	--btn-muted: #a9adb3;
}
#spflh, .spflh{
	--btn-text:  var(--spflh-ink, #ffffff);
	--btn-muted: #c9ced4;
}

/* Icon — rund, Breite folgt der Hoehe */
.bso-btn--icon,
button.spf-qbtn--plus, button.spf-qbtn--minus,
button.spfcp-veh__swap, button.spflh-veh__swap{
	width:var(--_h, var(--btn-h)); padding:0; border-radius:999px;
	font-size:17px; letter-spacing:0;
}


/* ── 1.5 Kontur — der Kontrast-Kern ─────────────────────────────────────────
   W3C, Understanding SC 1.4.3: „A narrow border around the letter would be used
   as the letter." Gemessen wird also die Konturfarbe gegen die Flaeche:
   #0f1011 auf #ff6600 = 7,15:1. Damit ist AA erfuellt und AAA gleich mit.

   Nur wo paint-order unterstuetzt wird. Ohne paint-order zeichnet der Browser
   die Kontur MITTIG auf die Buchstabenkante — die Schrift wirkt dann duenner
   statt kraeftiger. Lieber keine Kontur als eine falsch gezeichnete.
   Keine Buttonbeschriftung unter 14 px: darunter zeichnet das Antialiasing die
   1-px-Kontur grau statt schwarz, das Ergebnis wird schlechter lesbar.        */

@supports (paint-order: stroke){
	.bso-btn:not(.bso-btn--link):not(.bso-btn--sec):not(.bso-btn--ter),
	.woocommerce a.button:not(.bso-btn--sec),
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce .button.alt,
	button.single_add_to_cart_button,
	a.checkout-button,
	a.add_to_cart_button,
	/* Auch hier, sonst traegt der Karten-CTA ohne `add_to_cart_button` als einziger
	   gefuellter Knopf keine Kontur und steht bei KTM bei 2,94:1 statt 7,15:1. */
	.spfcard__actions a.button,
.psk-konto .wcwrap .button,
.psk-konto .wcwrap button[type="submit"],
.psk-konto .wcwrap input[type="submit"],
.psk-konto .btn.primary,
	button.wc-block-components-checkout-place-order-button,
	button.ktm-nl__btn > span,
	button.spffo__top > span,
	a.spflh-cta--main,
	a.ps-btn--dark,
	a.bmp-btn{
		-webkit-text-stroke:1px var(--btn-stroke);
		paint-order:stroke fill;
	}
	/* Sekundaer/Tertiaer bekommen die Kontur erst, wenn sie im Hover orange gefuellt sind */
	@media (hover:hover){
	.bso-btn--sec:hover,
a.spflh-cta--sec:hover{
		-webkit-text-stroke:1px var(--btn-stroke);
		paint-order:stroke fill;
	}}
	/* Textlinks nie */
	.bso-btn--link, button.bsoc-open, span.s2-tile-cta, button.spf-fitbadge__link{
		-webkit-text-stroke:0;
	}
}


/* ── 1.6 Glanzwischer ───────────────────────────────────────────────────────
   `z-index:-1` ist der wichtige Teil. Liefe der Streifen ueber dem Text, wuerde
   er fuer 550 ms genau die Flaeche aufhellen, deren Kontrast die Kontur gerade
   absichert. Mit z-index:-1 und dem isolation:isolate aus 1.2 malt der Browser
   den Streifen ueber den orangen Hintergrund, aber unter die Schrift.

   Erscheint der Effekt gar nicht: fast immer fehlt isolation:isolate oder
   position:relative am Button, dann rutscht das ::after hinter den
   Elternhintergrund.                                                          */

.bso-btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce .button.alt::after,
button.single_add_to_cart_button::after,
a.checkout-button::after,
a.add_to_cart_button::after,
/* Glanzwischer auch fuer die Karten-CTA-Variante ohne `add_to_cart_button` — sonst
   verhielten sich zwei optisch gleiche Knoepfe nebeneinander unterschiedlich. */
.spfcard__actions a.button::after,
.psk-konto .wcwrap .button::after,
.psk-konto .wcwrap button[type="submit"]::after,
.psk-konto .wcwrap input[type="submit"]::after,
.psk-konto .btn.primary::after,
button.wc-block-components-checkout-place-order-button::after,
button.ktm-nl__btn::after,
button.spffo__top::after,
a.spflh-cta--main::after,
a.ps-btn--dark::after,
a.bmp-btn::after{
	content:"";
	position:absolute; inset:0;
	z-index:-1;
	pointer-events:none;
	background:linear-gradient(105deg,
	           transparent 30%, var(--btn-sheen) 48%, transparent 66%);
	transform:translateX(-120%);
	transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){
.bso-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce .button.alt:hover::after,
button.single_add_to_cart_button:hover::after,
a.checkout-button:hover::after,
a.add_to_cart_button:hover::after,
.spfcard__actions a.button:hover::after,
.psk-konto .wcwrap .button:hover::after,
.psk-konto .wcwrap button[type="submit"]:hover::after,
.psk-konto .wcwrap input[type="submit"]:hover::after,
.psk-konto .btn.primary:hover::after,
button.wc-block-components-checkout-place-order-button:hover::after,
button.ktm-nl__btn:hover::after,
button.spffo__top:hover::after,
a.spflh-cta--main:hover::after,
a.ps-btn--dark:hover::after,
a.bmp-btn:hover::after{ transform:translateX(120%) }}

/* Nicht auf Textlinks und nicht auf ungefuellten Rollen */
.bso-btn--link::after,
.bso-btn--ter::after,
button.spfcp-more__btn::after,
button.bsoc-open::after,
span.s2-tile-cta::after,
button.spf-fitbadge__link::after{ display:none }
.bso-btn--sec::after, a.spflh-cta--sec::after{ display:none }
@media (hover:hover){
.bso-btn--sec:hover::after,
a.spflh-cta--sec:hover::after{ display:block }}


/* ── 1.7 Bewegung abschaltbar ───────────────────────────────────────────────
   WCAG 2.3.3. Wer im Betriebssystem reduzierte Bewegung eingestellt hat,
   bekommt keinen Wischer. Pflicht, nicht optional.                           */

@media (prefers-reduced-motion: reduce){
	.bso-btn, .bso-btn::after,
	.woocommerce a.button, .woocommerce a.button::after,
	.woocommerce button.button, .woocommerce button.button::after,
	button.single_add_to_cart_button, button.single_add_to_cart_button::after,
	a.checkout-button, a.checkout-button::after,
	a.add_to_cart_button, a.add_to_cart_button::after,
	/* Muss mitlaufen, sobald die Karten-CTA-Variante oben Wischer und Uebergaenge
	   bekommt — WCAG 2.3.3 gilt fuer sie genauso. */
	.spfcard__actions a.button,
.psk-konto .wcwrap .button,
.psk-konto .wcwrap button[type="submit"],
.psk-konto .wcwrap input[type="submit"],
.psk-konto .btn.primary, .spfcard__actions a.button::after,
.psk-konto .wcwrap .button::after,
.psk-konto .wcwrap button[type="submit"]::after,
.psk-konto .wcwrap input[type="submit"]::after,
.psk-konto .btn.primary::after{ transition-duration:.01ms !important }

	@media (hover:hover){
	.bso-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
button.single_add_to_cart_button:hover::after,
a.checkout-button:hover::after,
a.add_to_cart_button:hover::after,
.spfcard__actions a.button:hover::after,
.psk-konto .wcwrap .button:hover::after,
.psk-konto .wcwrap button[type="submit"]:hover::after,
.psk-konto .wcwrap input[type="submit"]:hover::after,
.psk-konto .btn.primary:hover::after{ transform:translateX(-120%) }}

	.bso-btn:active,
	button.single_add_to_cart_button:active,
	a.checkout-button:active{ transform:none }
}


/* ── 2 · Groessenzuordnung ──────────────────────────────────────────────────
   Genau drei Hoehen. Was hier nicht steht, laeuft auf der mittleren Groesse.  */

/* Gross (L) — die drei Kaufabschluss-Knoepfe */
button.single_add_to_cart_button,
a.checkout-button,
button.wc-block-components-checkout-place-order-button{
	--_h:var(--btn-h-l); --_px:var(--btn-px-l); --_fs:var(--btn-fs-l);
}

/* Klein (S) */
a.btn.primary,
button.woocommerce-Button.button,
button.button[name="update_cart"],
button.wc-block-components-button,
button.spffo__top,
.ktmpsa-search button,
.ktmps-search button{
	--_h:var(--btn-h-s); --_px:var(--btn-px-s); --_fs:var(--btn-fs-s);
}


/* ── 3 · Zwei Fehler, die dabei mit erledigt werden ─────────────────────────

   3.1 Das Passwort-Auge sah aus wie ein Primaerbutton: `button.show-password-input`
   hatte die globale Buttonregel abbekommen und erschien als vollflaechig oranger
   Block — optisch staerker als „Aenderungen speichern" direkt darunter.
   `all:unset` entfernt auch cursor und Fokusverhalten, deshalb beides explizit
   wieder setzen.                                                              */

button.show-password-input{
	all:unset;
	cursor:pointer;
	/* `all:unset` macht den Knopf inline und so gross wie sein Icon — als
	   Trefferflaeche auf dem Telefon zu klein. Box deshalb explizit setzen;
	   Farbe und Innenabstand bleiben wie bisher. */
	display:inline-flex; align-items:center; justify-content:center;
	min-height:44px; min-width:44px;
	padding:0 10px;
	color:var(--btn-muted);
}
@media (hover:hover){
button.show-password-input:hover{ color:var(--o) }}
button.show-password-input:focus-visible{ outline:2px solid var(--o); outline-offset:2px }

/* 3.2 „Warenkorb aktualisieren" — in der Anweisung stand hier ein Fix gegen den
   dauerhaft halbtransparenten Knopf. Der ist gegenstandslos geworden: Die
   Warenkorb-Komponente blendet den Knopf inzwischen bewusst aus
   (`spf-cart.css`, `.spf-cart__actions button[name="update_cart"]`), weil
   JavaScript den Warenkorb automatisch aktualisiert. Er bleibt nur im Markup,
   damit das Formular abschickbar bleibt.

   Deshalb hier keine Sichtbarkeitsregel. Was offen bleibt: Der Knopf steht per
   `left:-9999px` ausserhalb des Bildes und ist trotzdem mit der Tabulatortaste
   erreichbar — der Fokus verschwindet dort ins Nichts. Das laesst sich nicht in
   CSS loesen, es braucht `tabindex="-1"` im Markup. Notiert in der Anweisung. */


/* ── 4 · Ausdruecklich NICHT angefasst ──────────────────────────────────────
   Diese Elemente behalten ihr eigenes Aussehen. Sie sind Navigation oder
   Zustandsschalter, keine Kaufknoepfe — dass sie sich unterscheiden, ist
   beabsichtigt (Anweisung, Abschnitt 2). Die Regeln setzen zurueck, was ueber
   die WooCommerce-Sammelselektoren versehentlich auf sie durchschlagen koennte.

   DREI SIND HIER RAUSGEFLOGEN (12.08.2026): `.ktmpdp__tabbtn`,
   `.spfcp-cattree__head` und `.spfcp-acc__head`. Sie setzen in ihrer eigenen
   Datei ausdruecklich `text-transform:uppercase` — und diese Zeile hier hat es
   ihnen wieder weggenommen. `button.spfcp-cattree__head` kommt auf (0,1,1),
   `.spfcp-cattree__head` nur auf (0,1,0); der Schutz war staerker als das, was
   er schuetzen sollte. Sichtbar an der Kategorieseite: Hauptkategorien und
   Filterueberschriften standen in Blender, aber gemischt geschrieben, waehrend
   der Blattknoten daneben (ein `<a>`, also nicht in dieser Liste) in
   Grossbuchstaben stand. Kili am 12.08.2026: „Blender muss immer CAPS sein."

   Die verbliebenen fuenf deklarieren selbst nichts. Fuer sie ist die Zeile
   nicht wirkungslos: `text-transform` wird vererbt, und ein Knopf in einem
   Grossbuchstaben-Umfeld wuerde es sonst uebernehmen. Wer hier etwas ergaenzt,
   prueft erst, ob das Element seine Schreibweise selbst festlegt. */

button.ktmpdp__thumb,
button.spf-gside,
button.spfsr-group__head,
button.ktmpdp__carbtn,
button.spf-chip{
	text-transform:none;
	letter-spacing:normal;
}


/* ── 5 · Schmale Geraete ────────────────────────────────────────────────────
   Die Grundregel in 1.2 setzt `white-space:nowrap` und eine feste `height`.
   Auf breiten Seiten ist das richtig — bis 480 px passen die langen
   Beschriftungen der Kaufabschluss-Knoepfe („In den Warenkorb legen", „Zur
   Kasse gehen", „Jetzt kaufen") aber nicht mehr in eine Zeile: der Text lief
   aus dem Knopf heraus, und weil `nowrap` die Mindestbreite hochzieht, schob
   der Knopf im Flexkontext die SEITE breiter.

   `height:auto` allein wuerde den Knopf auf Texthoehe zusammenfallen lassen,
   deshalb `min-height` mit derselben Groesse, die die Grundregel ueber --_h
   vergibt. Der Innenabstand oben und unten haelt die zweite Zeile vom Rand
   weg; `min-width:0` nimmt dem Knopf die automatische Mindestbreite, damit er
   in einem Grid- oder Flexfeld nicht mehr ueber die Zelle hinauswaechst.
   Die Grundregel bleibt unangetastet — das gilt nur hier unten.             */

@media (max-width:480px){
	button.single_add_to_cart_button,
	a.checkout-button,
	.woocommerce .button.alt,
	button.wc-block-components-checkout-place-order-button,
	.bso-btn--block{
		white-space:normal;
		height:auto;
		min-height:var(--_h, var(--btn-h));
		padding-top:10px; padding-bottom:10px;
		line-height:1.2;
		min-width:0;
	}
}

/* Doppeltipp-Zoom unterbinden (Tester, 03.09.2026): Auf allen tippbaren
   Bedienelementen loest schnelles Doppeltippen sonst den Browser-Zoom aus —
   besonders stoerend an den Mengen-Steppern. Pinch-Zoom bleibt unberuehrt,
   `manipulation` nimmt nur Doppeltipp und Tap-Verzoegerung. */
.bso-btn, .woocommerce a.button, .woocommerce .button.alt,
button.single_add_to_cart_button, a.checkout-button,
.spf-qbtn, .spf-ci__qty .quantity button, .spf-ci__qty .quantity input.qty,
.leiste__menge button, .leiste__menge input,
.spf5-qty button, .spf5-qty input, .ktmcd__qty button, .ktmcd__qty .ktmcd__qtyin,
.spf-qty-btn, .spf-qty-input{touch-action:manipulation}