/* =============================================================================
Globale Shop-Stile — aus Bricks' Theme-Styles herausgeloest (11.08.2026)
Diese 6,5 kB lagen in den Bricks-Theme-Styles und galten sitewide: das
Button-Design fuer WooCommerce (Produktseite, Karte, Warenkorb, Kasse) und
die Kategorie-Seitenleiste. Mit Bricks waeren sie ersatzlos verschwunden —
aufgefallen ist es am Warenkorb-Knopf in der Produktkarte, der nach dem
Theme-Wechsel als blauer Standardlink dastand.
Es gab die Datei zweimal, je Shop eine. Der einzige Unterschied waren drei
Zeilen: die Akzentfarbe. Die kommt jetzt aus `--brand-accent`.
Bewusst NICHT in eine Komponente einsortiert: Das Button-Design ist eine
CI-Entscheidung fuer den ganzen Shop (Kili, 17.07.), keine Eigenschaft eines
Bausteins. Die Produktkarte verlaesst sich ausdruecklich darauf.
============================================================================= */
/* ===== Buttons: seit 12.08.2026 in spf-buttons.css =====
Hier stand bis dahin das alte WooCommerce-Buttondesign (eckig, 2 px Rand,
Invert-Hover auf Weiss). Es ist durch Button-System B ersetzt worden —
Entscheidung Kili vom 11.08.2026, siehe
BSO/ANWEISUNG-Buttonsystem-und-Barrierefreiheit.md.
Der Block ist hier ersatzlos entfernt und nicht auskommentiert: Er fuehrte
`!important` auf Rand, Radius, Flaeche und Schriftfarbe und haette das neue
System sonst ueberstimmt. Genau diese Regel ist in der Anweisung als
„Spezifitaetsfalle" beschrieben.
Was blieb: die Kategorie-Seitenleiste unten. Sie hat mit Buttons nichts zu
tun und stand nur zufaellig in derselben Datei. */
/* ===== KTM Category Nav (Sidebar) ===== */
:root{
--ktm-orange: var(--brand-accent,#ff6600);
--nav-text: #1f1f1f;
--nav-muted: #6b6b6b;
--nav-border: #e8e8e8;
--nav-bg: #fafafa;
}
/* Sidebar-Wrapper (optional sticky) */
.cat-sidebar{
position: sticky;
top: 96px; /* an Headerhöhe anpassen */
}
/* Reset & Layout */
.cat-nav ul{ list-style:none; margin:0; padding:0; }
.cat-nav li{ margin:0; padding:0; border-bottom:1px solid var(--nav-border); }
.cat-nav li:last-child{ border-bottom:0; }
/* Link-Zeile */
.cat-nav a{
position: relative;
display:flex; align-items:center; justify-content:space-between;
gap:.75rem;
padding:.7rem .25rem;
text-decoration:none;
color:var(--nav-text);
font-weight:700; letter-spacing:.02em;
transition: color .2s ease, background-color .2s ease;
white-space: nowrap; word-break: normal; overflow-wrap: normal;
}
/* Unterstreich-Sweep (wie bei dir im Header) */
.cat-nav a::after{
content:""; position:absolute; left:0; bottom:-1px;
height:2px; width:0; background: currentColor;
transition: width .22s ease;
}
/* Hover/Focus */
.cat-nav a:focus-visible{
color: var(--ktm-orange);
}
@media (hover:hover){
.cat-nav a:hover{
color: var(--ktm-orange);
}}
.cat-nav a:focus-visible::after{
width:100%;
}
@media (hover:hover){
.cat-nav a:hover::after{
width:100%;
}}
/* Active: aktuelle Kategorie/Seite (WP & Woo Klassen) */
.cat-nav .current-menu-item > a,
.cat-nav .current_page_item > a,
.cat-nav .current-cat > a,
.cat-nav .current-menu-ancestor > a,
.cat-nav .current-cat-parent > a{
color: var(--ktm-orange);
}
.cat-nav .current-menu-item > a::before,
.cat-nav .current-cat > a::before{
content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
height:1.25rem; width:3px; background:var(--ktm-orange); border-radius:3px;
}
/* Counts (Woo Produktkategorien) */
.cat-nav .count,
.cat-nav .cat-count{
margin-left:.5rem;
font-weight:600;
font-size:.85em;
color:var(--nav-muted);
background: var(--nav-bg);
padding:.15rem .45rem; border-radius:999px;
}
.cat-nav .current-cat > a .count{ color:#fff; background:var(--ktm-orange); }
@media (hover:hover){
.cat-nav a:hover .count{ color:#fff; background:var(--ktm-orange); }}
/* Ebenenabstand & Einrückung */
.cat-nav .children,
.cat-nav .sub-menu{
padding-left: .75rem;
border-left:2px solid var(--nav-border);
margin:.25rem 0 .35rem .25rem;
}
.cat-nav .children li,
.cat-nav .sub-menu li{ border-bottom:0; }
/* Dropdown-Caret/Toggle (Bricks/Widgets variieren; wir decken gängige ab) */
.cat-nav .dropdown-toggle,
.cat-nav .bricks-dropdown-toggle,
.cat-nav .menu-toggle,
.cat-nav li > button{
flex:0 0 auto;
background:transparent; border:0; padding:.4rem; margin:-.2rem 0 -.2rem .25rem;
line-height:1; cursor:pointer;
color:inherit;
transition: transform .2s ease;
}
.cat-nav li.menu-item-has-children[aria-expanded="true"] > .dropdown-toggle,
.cat-nav li.menu-item-has-children.open > .dropdown-toggle{
transform: rotate(180deg);
}
/* Sicherheitsnetz: keine harten Zeilenumbrüche */
.cat-nav > ul > li > a,
.cat-nav > li > a{
white-space: nowrap; word-break: normal; overflow-wrap: normal;
}
/* Optional: kompakter Modus auf kleinen Screens */
@media (max-width: 1024px){
.cat-sidebar{ top:72px; }
.cat-nav a{ padding:.6rem .2rem; }
.cat-nav .sub-menu, .cat-nav .children{ padding-left:.6rem; }
}
/* =============================================================================
NACHTMODUS, SITEWIDE — aus WPCode-Snippet 278084 (13.08.2026)
-----------------------------------------------------------------------------
29 Regeln aus dem PDP-Snippet, die trotz ihres Namens ueberall gelten:
der dunkle Seitengrund, das ersetzte Platzhalterbild, die Groessen-Chips,
der Pflichtzubehoer-Kasten, die Ersetzt-durch-Zeile und der Preis-Zusatz.
Sie standen zuerst mit den PDP-Regeln zusammen in `spf-product-layout.css` —
und die wird nur auf Produktseiten geladen. Auf Kategorie- und Suchseite
fehlten sie damit. Hier gilt: was nicht `.ktmpdp` im Selektor hat, gehoert
nicht in die Produktseiten-Datei.
============================================================================= */
/* ---------- 1) GLOBAL: Preis-Suffix in eigene Zeile ---------- */
small.woocommerce-price-suffix{
display:block !important;
margin-top:3px;
line-height:1.35;
}
/* Nacht-Seitengrund: die TIEFE Ebene der Marken-Palette, nicht die Buehne.
KTM #08090a, Husqvarna #080d15 — beide dunkler als die jeweilige Buehne
(brand_flaeche), damit Kopf, Fuss und Bloecke darauf abheben. */
html.spf-night,body.spf-night{background:var(--spf-brand-flaeche-tief, #0f1011) !important}
body.spf-night .spf-unitprice{color:#9aa0a6 !important}
body.spf-night .spf-qbtn{color:#e8eaed !important}
@media (hover:hover){
body.spf-night .spf-qbtn:hover{background:#202327 !important}}
body.spf-night .spf-qbtn:disabled{color:#6b7280 !important}
body.spf-night .spf-chip{background:#1a1c1e !important;border-color:#33363a !important;color:#e8eaed !important}
@media (hover:hover){
body.spf-night .spf-chip:hover{border-color:#6b7280 !important}}
body.spf-night .spf-chip.is-sel{border-color:#ff6600 !important;color:#ff6600 !important}
body.spf-night .spf-chip.is-out{color:#6b7280 !important}
/* ENTFALLEN am 28.08.2026 (Kili: „im Darkmode ist der Text unsichtbar").
Die Regel setzte die TEXTfarbe des Knapp-Badges auf #e07c00 — dieselbe Farbe, die
`.spf-chip__low` seit dem Redesign als HINTERGRUND traegt. Oranger Text auf orangem Grund.
Sie stammt aus der Zeit, als das Badge nur farbiger Text ohne Flaeche war. Die Grundregel
in spf-product-page.css setzt bereits weissen Text auf orangem Grund und gilt in beiden
Modi. */
/* Erforderliche Artikel (Mitbestellen-Box) */
body.spf-night .spf-required{background:#17181a !important;border-color:#2a2d30 !important}
body.spf-night .spf-required__head{color:#e8eaed !important}
body.spf-night .spf-required__item{border-color:#2a2d30 !important;background:#1a1c1e !important}
body.spf-night .spf-required__name{color:#e8eaed !important}
body.spf-night .spf-required__meta{color:#9aa0a6 !important}
body.spf-night .spf-required__check{color:#c9cdd1 !important}
/* Breadcrumb/umgebende Textzeilen auf der Produktseite */
body.spf-night.single-product nav.woocommerce-breadcrumb{color:#9aa0a6 !important}
body.spf-night.single-product nav.woocommerce-breadcrumb a{color:#c9cdd1 !important}
/* ---------- 3) Required-Box: Politur aufs neue Karten-Design (hell) ---------- */
.spf-required{border-radius:14px}
.spf-required__item{border-radius:9px;overflow:hidden}
.spf-required__item img{background:#ffffff;border-radius:7px}
/* Lieferzeit-Wert (dtpw-Span mit eigener Festfarbe #343434) im Night aufhellen */
body.spf-night .dtpw-lieferzeit-text{color:#c9cdd1 !important}
/* Gewaehlter Groessen-Chip behielt weissen Grund (helle is-sel-Regel) */
body.spf-night .spf-chip.is-sel{background:#1a1c1e !important}
body.spf-night .spf-compat__item{color:#c9cdd1 !important}
/* Ersetzt-Zeile: Nachfolger-Link in der Meta-Zeile (JS-Snippet 278086 baut um) */
.spf-ersetzt-link{color:var(--brand-accent,#ff6600) !important;text-decoration:none;font-weight:600}
@media (hover:hover){
.spf-ersetzt-link:hover{text-decoration:underline}}
/* "Kein Bild"-Placeholder im KTM-Stil (Orange-Slash + KEIN BILD), ersetzt das
graue Woo-Berg-Icon per content-Swap. Eigene Variante fuer Night; die
Bildflaeche (imgwrap/stage) wird bei Placeholder-Bildern im Night dunkel. */
img[src*="woocommerce-placeholder"]{content:url("data:image/svg+xml;utf8,")}
body.spf-night img[src*="woocommerce-placeholder"]{content:url("data:image/svg+xml;utf8,") !important}
/* Die Bildzone darunter muss mitkommen: Der Platzhalter ist quadratisch und
steht mit `object-fit:contain` in der Flaeche — bleibt sie weiss, schaut sie
als heller Rand um das dunkle Bild hervor. Die Regel lag bis zum 13.08.2026
in spf-product-layout.css und griff deshalb nur auf Produktseiten. */
body.spf-night .spfcard__imgwrap:has(img[src*="woocommerce-placeholder"]){
background: #17181a !important;
}
/* =============================================================================
„KEIN BILD" — eine Komponente fuer alle Flaechen (04.09.2026)
-----------------------------------------------------------------------------
Bis hierher gab es drei Fassungen desselben Platzhalters: das Data-URI-SVG
direkt darueber (Karten, Orange hart im SVG), eine zweite Fassung in
spf-marke-husky.css und die CSS-Komposition des Warenkorb-Drawers
(spf-garage-hub.css). Nur die dritte nimmt die Markenfarbe aus dem Token und
skaliert nicht mit der Flaeche — sie ist deshalb die Vorlage.
Groesse ausschliesslich ueber `font-size`: Balken und Schrift stehen in `em`.
Eine Flaeche darf damit beliebig gross sein, ohne den Platzhalter mitzuziehen
(genau der Grund, aus dem der Drawer kein `background-size:cover` nimmt).
Die Proportionen sind aus den bestehenden Fassungen uebernommen: Balken rund
0,7 x 1,9 em, Abstand 0,5 em (SVG oben: 22 x 56 px bei 30 px Schrift;
Drawer: 5 x 15 px bei 7,5 px).
Farbe NIE hart: `--spf-brand` setzt SPF_Brand::print_vars() je Marke. Der
Rueckfall ueber `--brand-accent` faengt Stellen ab, an denen das Markenblatt
nicht laeuft — erst ganz am Ende steht KTM-Orange.
============================================================================= */
.spf-keinbild{display:flex;align-items:center;justify-content:center;gap:.5em;
background:#f5f5f4;line-height:1;overflow:hidden}
.spf-keinbild::before{content:'';flex:none;width:.7em;height:1.9em;
background:var(--spf-brand,var(--brand-accent,#ff6600));transform:skewX(-12deg)}
.spf-keinbild::after{content:'KEIN BILD';flex:none;
font:italic 800 1em/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;
color:#9aa0a6;white-space:nowrap}
/* Groessenstufen. `--gross` = Buehne der Produktseite (Schriftgrad des SVG),
`--karte` = Produktkarte, `--mini` = Drawer-Thumb (62 px breit). */
.spf-keinbild--gross{font-size:30px}
.spf-keinbild--karte{font-size:16px}
.spf-keinbild--mini{font-size:7.5px}
/* Nur der Balken, ohne Schrift. „KEIN BILD" ist in Arial Bold Italic rund
5,54 em breit; mit Balken und Abstand braucht die Zeile 6,7 em. In einer
40-px-Kachel (Suchvorschlaege, mobil 30 px) waere die Schrift damit 5 px
gross — dort traegt nur der Markenbalken. */
.spf-keinbild--zeichen::after{content:none}
/* Nacht: dunkle Flaeche und gedaempfte Schrift wie in den bestehenden
Nacht-SVGs; der Balken wechselt auf die Nachtsignatur der Marke (Husky
Gelb, KTM unveraendert Orange — `brand_night` ist dort derselbe Wert). */
body.spf-night .spf-keinbild{background:#17181a}
body.spf-night .spf-keinbild::before{background:var(--spf-brand-night,var(--spf-brand,#ff6600))}
body.spf-night .spf-keinbild::after{color:#6b7280}
/* Produktkarte: der Platzhalter tritt an die Stelle des Bildes und muss
dieselbe Flaeche fuellen — `.spfcard__imgwrap img` gilt nur fuer . */
.spfcard__imgwrap .spf-keinbild{width:100%;height:100%}
body.spf-night .spfcard__imgwrap--leer{background:#17181a}
/* =============================================================================
MARKENLOGO — die Platte (13.08.2026)
-----------------------------------------------------------------------------
Markenlogos sind fast immer dunkel auf transparent. Auf dem dunklen Titelband
und im Nachtmodus waeren sie unsichtbar, deshalb steht jedes Logo auf einer
hellen Platte. Das ist die einzige Loesung, die fuer alle 66 Marken traegt,
ohne je Marke zu entscheiden.
Steht hier und nicht in `spf-brand-page.css`, weil das Logo inzwischen an drei
Stellen erscheint: Markenseite, Markenuebersicht und Startseite. Die Varianten
(--band, --tile, --vorschau) bleiben bei der jeweiligen Seite.
============================================================================= */
.spfmk-logo {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
flex: 0 0 auto;
}
/* Weissfassungen: Manche Marken fuehren ihr Logo nur in Weiss, weil es fuer
dunkle Kopfbereiche gemacht ist. Auf der hellen Platte waere es unsichtbar —
die dreht sich deshalb um. Welche das sind, misst der Logo-Import. */
.spfmk-logo--dark { background: #17181a; }
/* `max-height:100%` ist die entscheidende Zeile: Die Dateien sind 400 x 200 px,
die Platten sind kleiner. Ohne Begrenzung stuende das Logo darueber hinaus —
bis zum 13.08.2026 war genau das der Fall. */
.spfmk-logo__img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* =============================================================================
MARKENVORSCHAU auf der Startseite (13.08.2026)
-----------------------------------------------------------------------------
Eine waagerechte Reihe Markenlogos zwischen Vertrauensleiste und „Über uns".
Kein Karussell mit Knoepfen: Die Reihe hat keinen Zustand, den man bedienen
muesste, Wischen ist auf dem Handy die erwartete Geste, und ein Automatik-Lauf
waere Bewegung ohne Nutzen (und ein Problem fuer alle, die
`prefers-reduced-motion` gesetzt haben). Auf dem Desktop steht ohnehin alles
nebeneinander; wird es enger, scrollt die Reihe mit Einrasten.
============================================================================= */
/* KOPF UND ABSTAENDE STEHEN NICHT HIER (seit 15.08.2026).
`.spfmv__kopf` und `.spfmv__titel` sind in spf-landing-highlights.css in die
gemeinsame Regel der Sektionskoepfe aufgenommen — dieselbe, die Highlights,
Bestseller und Teile-Weiche tragen (Kili: „Sektion Marken im Shop noch
vereinheitlichen auf die anderen Sektionen"). Von dort kommen Schriftgrad,
Versalien, Signaturkante und der Abstand nach unten.
Vorher stand hier ein eigener Kopf: Titel in clamp(22,2.4vw,30) statt
clamp(24,3vw,34), ohne Signaturkante, 18 statt 26 px Abstand, dazu eine
Auszeichnungszeile, die es in keinem anderen Abschnitt gibt. Vier Koepfe auf
einer Seite, vier Erscheinungsbilder.
Das ist zulaessig, weil die Vorschau NUR auf den beiden Startseiten laeuft
(`SPF_Brands::vorschau_html()`, aufgerufen in templates/landing-*.php) und
spf-landing-highlights.css dort immer geladen ist. Wandert sie je auf eine
andere Seite, muss der Kopf mitwandern. */
.spfmv { padding: 52px 0 44px; }
.spfmv__in {
width: var(--site-max, 1320px);
max-width: 100%;
margin: 0 auto;
/* 24 statt 22 px — dieselbe Rinne wie `.hl__innen` und `.tw__innen`. */
padding: 0 24px;
}
/* Seit dem 14.08.2026 dieselbe Sprache wie die uebrigen Abschnittsverweise
(„Alle Kategorien", „Alle Deals anzeigen"): 15 px, fett, keine Versalien,
Textfarbe statt Theme-Grau, Doppelpfeil in der Signaturfarbe. Vorher stand
hier 12,5 px versal in #343434 ohne Pfeil — drei Verweise auf einer Seite,
drei Erscheinungsbilder (gemeldet von Kili). */
.spfmv__alle {
flex: none;
font-family: var(--spf-brand-cond, 'Blender Pro', system-ui, sans-serif);
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
/* Versalien: Hier laeuft Blender, und Blender ist eine Versalschrift
(Kili, 14.08.2026). Husqvarna faehrt Helvetica und bleibt gemischt —
die Ausnahme steht im Marken-Nachtrag von spf-landing-highlights.css. */
text-transform: uppercase;
/* Aus dem Token, nicht fest: Die Sektion fuehrt seit dem 15.08.2026 dieselben
`--hl-*`-Werte wie die uebrigen Startseiten-Koepfe. Vorher stand hier
#111315 und daneben eine eigene Nachtregel — zwei Stellen fuer eine Farbe. */
color: var(--hl-ink, #111315);
text-decoration: none;
/* Wachsender Unterstrich wie im Fuss und in den Startseiten-Koepfen. */
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: center calc(100% - 1px);
transition: color .2s ease, background-size .25s ease;
/* Der frühere 2-px-Unterstrich in der Markenfarbe ist entfallen — seit dem
14.08.2026 laeuft hier derselbe wachsende Unterstrich wie im Fuss, und
zwei Striche uebereinander waren einer zu viel (gemeldet von Kili). */
padding-bottom: 2px;
transition: color .15s;
}
.spfmv__alle:focus-visible{ color: var(--hl-sig-txt, var(--brand-accent, #ff6600)); background-size: 100% 1px; }
@media (hover:hover){
.spfmv__alle:hover{ color: var(--hl-sig-txt, var(--brand-accent, #ff6600)); background-size: 100% 1px; }}
/* `a.` davor: Irgendeine spaetere Regel setzt hier `transition: color .15s` und
schluckt damit den Lauf des Unterstrichs — gemessen am 14.08.2026 (0,15 s nur
auf `color`). Welche es ist, liess sich nicht feststellen: LiteSpeed liefert
die Stylesheets so aus, dass `cssRules` im Browser verschlossen bleibt und
sich die gewinnende Regel nicht aufzaehlen laesst. Element plus Klasse
gewinnt gegen jede Einzelklasse, unabhaengig davon, wer sonst mitredet. */
a.spfmv__alle { transition: color .2s ease, background-size .25s ease; }
/* Der Doppelpfeil, wie im Fuss und in den Startseiten-Koepfen. Feste
Schriftkette und ausgeschriebenes `font-weight`: Von Blender Pro liegt nur
der 700er-Schnitt auf dem Server. */
.spfmv__pfeil {
display: inline-block;
vertical-align: baseline;
margin-left: 6px;
color: var(--hl-sig, var(--brand-accent, #ff6600));
font-family: 'Blender Pro', Oswald, system-ui, sans-serif;
font-weight: 700;
transition: transform .18s ease;
}
.spfmv__alle:focus-visible .spfmv__pfeil{ transform: translateX(3px); }
@media (hover:hover){
.spfmv__alle:hover .spfmv__pfeil{ transform: translateX(3px); }}
@media (prefers-reduced-motion: reduce){ .spfmv__pfeil, .spfmv__alle { transition: none; } }
/* Die Reihe bricht aus dem 1320er Raster aus und laeuft ueber die volle
Fensterbreite (Vorgabe Kili, 13.08.2026). Der Kopf mit Titel und „Alle
Marken" bleibt im Raster — nur die Logos duerfen bis an den Rand.
Das seitliche Polster haelt die erste Kachel buendig unter dem Titel: Bei
breiten Fenstern ist es der halbe Ueberhang plus die 22 px des Containers,
bei schmalen faellt es auf ebendiese 22 px zurueck. `max()` waehlt den
groesseren der beiden Werte, damit unter 1320 px nichts abgeschnitten wird. */
.spfmv__reihe {
display: flex;
gap: 14px;
margin: 0 calc(50% - 50vw);
/* Beginnt am Fensterrand, nicht unter dem Titel (Vorgabe Kili, 13.08.2026).
Nur 22 px Luft seitlich, damit die erste Kachel nicht an der Kante klebt.
Oben und unten mehr: `overflow-x: auto` zwingt `overflow-y` von `visible`
auf `auto` — das ist CSS-Regel, keine Eigenart des Browsers. Alles, was
ueber die Reihe hinausragt, wird also beschnitten, und die Kachel hebt
sich beim Ueberfahren um 3 px mit Schatten darunter. Mit 2 px oben war
der Rahmen abgeschnitten. */
padding: 8px 22px 20px;
width: 100vw;
max-width: 100vw;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
/* Die Bildlaufleiste ist hier Dekoration: Der Balken laeuft von selbst und
laesst sich wischen. Auf Husqvarna zeichnete Firefox einen breiten grauen
Streifen quer unter die Reihe. Ausgeblendet — die Bedienbarkeit haengt
nicht daran, weil Wischen, Mausrad und Tastatur weiter funktionieren. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.spfmv__reihe::-webkit-scrollbar { width: 0; height: 0; }
/* Kein `scroll-snap` mehr: Der Selbstlauf und das Einrasten arbeiten
gegeneinander — die Reihe wuerde bei jedem Bildschritt zurueckgezogen.
Gewischt wird sie deshalb frei, was bei gleich breiten Kacheln ohnehin
niemandem auffaellt. */
.spfmv__item { flex: 0 0 auto; }
.spfmv__link {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 148px;
padding: 12px 12px 10px;
background: #fff;
border: 1px solid var(--spfcp-line, #e6e7e9);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
}
.spfmv__link:focus-visible{
transform: translateY(-3px);
border-color: var(--brand-accent, #ff6600);
box-shadow: 0 4px 8px rgba(20,24,28,.06), 0 14px 36px rgba(20,24,28,.12);
}
@media (hover:hover){
.spfmv__link:hover{
transform: translateY(-3px);
border-color: var(--brand-accent, #ff6600);
box-shadow: 0 4px 8px rgba(20,24,28,.06), 0 14px 36px rgba(20,24,28,.12);
}}
.spfmv__link:focus-visible { outline: 2px solid var(--brand-accent, #ff6600); outline-offset: 2px; }
.spfmk-logo--vorschau { width: 100%; height: 62px; padding: 4px 8px; }
.spfmv__name {
font-family: var(--spf-brand-cond, 'Blender Pro', system-ui, sans-serif);
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--spfcard-muted, #5b6270);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
body.spf-night .spfmv__link { background: #1a1c1e; border-color: #2a2d30; }
/* Diese Zeile steht spaeter in der Datei als `.spfmv__link:hover` und hat
dieselbe Spezifitaet — sie hat den Hover-Rahmen im Nachtmodus stillschweigend
ueberschrieben. Deshalb hier noch einmal, mit der Nacht-Signatur: Bei KTM
dasselbe Orange, bei Husqvarna Gelb (Dunkelblau kaeme auf #1a1c1e auf 1,7:1
und waere als Rahmen nicht zu sehen). */
body.spf-night .spfmv__link:focus-visible{
border-color: var(--spf-brand-night, var(--brand-accent, #ff6600));
}
@media (hover:hover){
body.spf-night .spfmv__link:hover{
border-color: var(--spf-brand-night, var(--brand-accent, #ff6600));
}}
body.spf-night .spfmv__name { color: #9aa0a6; }
@media (max-width: 767px) {
.spfmv { padding: 40px 0 34px; }
.spfmv__link { width: 130px; }
.spfmk-logo--vorschau { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
.spfmv__link { transition: none; }
.spfmv__link:focus-visible{ transform: none; }
@media (hover:hover){
.spfmv__link:hover{ transform: none; }}
}
/* ═══════════════════════════════════════════════════════════════════════════
VERTRAUENSLEISTE (Zahlungsarten, Bewertung, Versand)
Lag bis zum 13.08.2026 in `spf-landing-ktm.css` — einer Datei, die auf
Husqvarna nicht geladen wird. Die Leiste stand dort deshalb roh da: kein
Raster, keine Farben, und die Screenreader-Ueberschrift „Warum bei Husky
PowerShop kaufen" war sichtbar, weil `position:absolute` fehlte.
Hier stehen die Regeln fuer beide Shops.
═══════════════════════════════════════════════════════════════════════════ */
/* Ausbruch aus dem Inhaltsrahmen (11.08.2026).
Solange Bricks die Seite rendete, sass dieses Band direkt im Seitenrahmen und
war deshalb so breit wie das Fenster. Seit die Abschnitte im Plugin liegen,
stehen sie in `article#brx-content` — und der ist 1.100 px breit. Alle anderen
Baender (spflh, s2, s3, s4) brechen mit derselben Rechnung aus; nur diesem
fehlte sie, weil es sie nie gebraucht hatte. */
.ktm-trust{
/* Dunkle Markenflaeche aus der Palette. KTM wechselt damit von #0d0d0d auf
#0f1011 — zwei Punkte heller, gegen die Nachbarflaechen aber endlich
derselbe Ton. Husqvarna bekommt #0e1420. */
background:var(--spf-brand-flaeche, #0d0d0d);
margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
width:100vw;max-width:100vw;
/* Oben derselbe Markenstreifen wie unten (Vorgabe Kili, 13.08.2026): Die
Leiste war vorher oben nur mit einer 1-px-Haarlinie abgesetzt und wirkte
dadurch unten schwerer als oben. Beide Kanten lesen dieselbe Variable,
damit sie nicht auseinanderlaufen koennen. */
/* Nacht-Signatur statt Arbeitsfarbe: Die Leiste steht auf dunklem Grund, und
dort traegt --brand-accent bei Husqvarna Dunkelblau — auf #0e1420 war die
Kante praktisch unsichtbar. --spf-brand-night ist die Ebene, die die Palette
genau dafuer haelt: bei KTM dasselbe Orange wie zuvor, bei Husqvarna Gelb.
(Vorgabe Kili, 13.08.2026.) */
border-top:3px solid var(--spf-brand-night,var(--brand-accent,#FF6600));
/* UNTEN KEINE EIGENE KANTE (Kili, 28.08.2026): Der Fuss (`.spffo`) bringt seine
Oberkante selbst mit — ebenfalls 3 px in derselben Nachtfarbe. Beide zusammen
ergaben 6 px, und die Leiste sah unten doppelt so schwer aus wie oben, also
genau der Zustand, den die Vorgabe vom 13.08.2026 beseitigen sollte.
Warum hier und nicht am Fuss: Die Trust-Leiste steht ausschliesslich auf der
Startseite und dort als letztes Element in `main`, unmittelbar ueber dem Fuss
(gemessen: Abstand 0 px). Der Fuss dagegen steht auf JEDER Seite und braucht
seine Kante auch dort, wo keine Leiste davorsteht. Ein Nachbarselektor scheidet
aus: Die beiden sind keine Geschwister — die Leiste liegt in `main`, der Fuss
daneben im `body`. */
border-bottom:0
}
.ktm-trust__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.ktm-trust__inner{max-width:var(--site-max,1320px);margin:0 auto;padding:18px clamp(16px,3vw,48px);display:grid;grid-template-columns:1.55fr 1fr 0.9fr;align-items:center;gap:0}
.ktm-trust__cell{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 18px;min-height:48px}
.ktm-trust__cell+.ktm-trust__cell{border-left:1px solid rgba(255,255,255,.08)}
.ktm-trust__pays{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px}
.ktm-trust .pay{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:40px;padding:0 7px;background:#fff;border-radius:4px;font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:12px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ktm-trust .pay--visa{color:#1434CB;font-style:italic;letter-spacing:.5px}
.ktm-trust .pay--ppal b{color:#003087}.ktm-trust .pay--ppal i{color:#0070BA;font-style:italic}
.ktm-trust .pay--ppal{font-style:italic;font-size:13px}
.ktm-trust .pay--mc{padding:0 7px}.ktm-trust .pay--mc svg{height:19px;width:auto;display:block}
.ktm-trust .pay--klarna{background:#FFB3C7;color:#0b051d;font-size:12px}
.ktm-trust .pay--apple{gap:2px;color:#000}.ktm-trust .pay--apple svg{height:15px;width:auto}.ktm-trust .pay--apple b{font-weight:600}
.ktm-trust .pay--sepa{color:#10298E;letter-spacing:.5px}
.ktm-trust__rating{text-decoration:none;flex-direction:column;gap:3px;transition:transform .15s}
@media (hover:hover){
.ktm-trust__rating:hover{transform:translateY(-1px)}}
.ktm-trust__stars{position:relative;display:inline-block;font-size:18px;line-height:1;letter-spacing:2px;font-family:Arial,sans-serif}
.ktm-trust__stars-bg{color:#3a3a3a}
.ktm-trust__stars-fill{position:absolute;left:0;top:0;color:#FFB500;overflow:hidden;white-space:nowrap}
.ktm-trust__rtxt{display:flex;align-items:baseline;gap:8px}
.ktm-trust__rscore{font-family:"Blender Heavy","Roboto Condensed Regular",sans-serif;font-size:22px;font-weight:900;color:#fff;line-height:1}
.ktm-trust__rscore span{font-size:13px;color:#9a9a9a;font-weight:700}
.ktm-trust__rpred{font-family:"Roboto Condensed Regular",sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#FFB500}
.ktm-trust__rsub{font-family:"Roboto Condensed Regular",sans-serif;font-size:11px;color:#8b8b8b}
.ktm-trust__rsub strong{color:#cfcfcf;font-weight:700;letter-spacing:.5px}
.ktm-trust__stxt{display:flex;flex-direction:column;line-height:1.18;text-align:center}
.ktm-trust__title{font-family:"Blender Heavy","Roboto Condensed Regular",sans-serif;font-size:14px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:#fff}
.ktm-trust__sub{font-family:"Roboto Condensed Regular",sans-serif;font-size:12px;color:#9a9a9a;margin-top:2px}
@media(max-width:900px){.ktm-trust__inner{grid-template-columns:1fr;gap:14px}.ktm-trust__cell{padding:12px 0}.ktm-trust__cell+.ktm-trust__cell{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.ktm-trust__pays{flex-wrap:wrap}}
/* =============================================================================
AUS DEM SNIPPET „GLOBALE PRODUCT CARD" UEBERNOMMEN (14.08.2026)
-----------------------------------------------------------------------------
Zwei sitewide wirksame Reste aus KTM 270851 / Husky 5316. Der Rest des
Snippets war Altbestand aus der Bricks-Zeit und ist entfallen — von 60 Regeln
des Kartenblocks trafen ueber sechs Seiten hinweg noch drei etwas.
1) Buttons entschraegen. Das alte Design kippte Schaltflaechen per `skew`;
geblieben ist die Gegenregel. Sie stand im Kopf mit Prioritaet 30, also
nach den eingereihten Blaettern — hier steht sie am Dateiende und traegt
ohnehin `!important` samt `html body`-Vorspann.
2) Die Breitenbegrenzung der Abschnittscontainer auf `--site-max`.
`--site-max` kommt aus dem Theme (bso-theme/style.css), nicht mehr aus
dem Snippet.
============================================================================= */
html body .ktm-nl__btn,html body .ktmcat__fbtn,html body .ktm-widerruf-btn,html body #brx-content a.ktm-widerruf-btn,html body .ps-btn,html body button.single_add_to_cart_button,html body .single_add_to_cart_button{transform:none!important;}html body .ktm-nl__btn>span,html body .ktmcat__fbtn>span,html body .ktm-widerruf-btn>span,html body .ps-btn>span,html body .single_add_to_cart_button>span{transform:none!important;display:inline-block}
.s1-inner,.s2-inner,.s3-inner,.s4-split,.s5-inner,.ktmcat,.ktmpdp,.ktm-nl__inner{max-width:var(--site-max)!important}
.page-id-230947 #brx-content{width:min(100%,var(--site-max))!important;max-width:var(--site-max)!important}
.page-id-230947 #brx-content>h1:first-child{display:none}
/* -----------------------------------------------------------------------------
„Vertrag widerrufen" (eu-owb) auf Archivseiten ausblenden
-----------------------------------------------------------------------------
Lag bis zum 14.08.2026 als eigenes WPCode-Snippet (KTM 270927, 252 B). Das
Rechtstexte-Plugin haengt den Knopf per wp_footer auf JEDER Seite ein; auf
Kategorie- und Archivseiten hat er dort nichts zu suchen. Rein visuell — das
Element bleibt im DOM, damit die Pflichtangabe erreichbar bleibt.
-------------------------------------------------------------------------- */
.eu-owb-order-withdraw-from-contract-button{ display:none !important; }
/* -----------------------------------------------------------------------------
Ueberschriften fremder Bausteine im Nachtmodus
-----------------------------------------------------------------------------
Das Theme faerbt `h1`–`h6` mit `var(--color-heading, #343434)` und setzt die
Farbe damit DIREKT. Tokens einer dunklen Flaeche erreichen sie nicht — jede
Ueberschrift, die nicht aus unserem eigenen Markup kommt, steht dann bei rund
1,5:1. Am 14.08.2026 zweimal aufgeschlagen: der Titel „Meine Garage" im
Drawer (1,43:1) und der Block „Unsere Bankverbindung", den WooCommerce bei
Vorkasse ausgibt (1,53:1).
Beide waren zuerst einzeln geflickt. Diese Regel ersetzt das, und sie steht
auf gemessenem Grund: Ueber sieben Seitenkontexte auf beiden Shops — Start,
Produkt, Kategorie, Konto, Finder, Finder mit geoeffnetem Drawer — sitzt im
Nachtmodus **keine einzige** der 66 sichtbaren Ueberschriften auf einer hellen
Flaeche. Die hellen Flaechen des Nachtmodus sind Bildzonen (Produktfreisteller),
und dort steht kein Text.
Wer das aendert, also eine helle Karte mit Ueberschrift in den Nachtmodus
stellt, muss `--color-heading` in deren Geltungsbereich zuruecksetzen.
-------------------------------------------------------------------------- */
body.spf-night,
html.spf-night{ --color-heading:#e8eaed; }
/* ---------------------------------------------------------------- Touch ---
BERUEHRZIELE IN DER BROTKRUME.
Gemessen am 28.08.2026 auf 390 px: Die Brotkrumen-Links sind 15 px hoch —
die blosse Zeilenhoehe von 12,5 px Schrift, ohne Innenabstand. WCAG 2.2
(2.5.8, Stufe AA) verlangt 24 x 24 CSS-Pixel; mit dem Daumen trifft man
15 px nur mit Glueck. Auf dem Desktop ist die Maus genau genug, dort bleibt
alles wie es ist.
Die Flaeche waechst ueber ein unsichtbares ::after, nicht ueber Padding:
Padding an einem `display:inline` wirkt vertikal nicht auf die Zeilenbox,
und `inline-block` mit Padding wuerde die Zeile auseinanderziehen. So
aendert sich die Darstellung um kein Pixel, nur die Trefferflaeche.
Bewusst nur +5 px nach oben und unten (macht 25 px): Die Brotkrume steht
dicht unter dem Kopfbereich und dicht ueber der Ueberschrift. Eine groessere
Flaeche wuerde anfangen, Klicks von den Nachbarn wegzufangen — das waere
schlimmer als ein flaches Ziel.
GEMESSEN, nicht angenommen: Nach oben bleibt die Erweiterung dort wirkungslos,
wo der Kopfbereich unmittelbar darueber liegt und ihn ueberdeckt — auf der
Warenkorbseite trifft ein Punkt 4 px ueber dem Link bereits `header.spfh`.
Wirksam werden dort nur die unteren 5 px, also 20 statt 25. Das ist der
Grund, warum hier nicht mehr steht, als die Nachbarschaft hergibt: Wer die
Flaeche vergroessern will, muss zuerst den Abstand zum Kopfbereich
vergroessern, und das ist eine Gestaltungsfrage, keine Trefferflaechenfrage.
Vier Schreibweisen, weil die Brotkrume in vier Bausteinen eigen aufgebaut
ist (Konto, Warenkorb, Kategorie, Produktseite v2). Sie stehen hier
zusammen, damit die naechste Aenderung sie nicht wieder einzeln sucht. */
@media (hover:none){
.psk-konto .crumbs a,
.spf-crumbs a,
.spfcp-crumbs a,
.ppv2 .bc a{ position:relative; }
.psk-konto .crumbs a::after,
.spf-crumbs a::after,
.spfcp-crumbs a::after,
.ppv2 .bc a::after{
content:''; position:absolute; left:0; right:0; top:-5px; bottom:-5px;
}
}
/* ----------------------------------------------------------------- Beta ---
„Beta" neben dem Shop-Logo, solange der Shop im Aufbau ist. Markup und
Schalter in `SPF_Beta`; hier steht nur, wie es aussieht.
ALLES AUS `currentColor`. Der Zusatz steht auf vier verschiedenen Flaechen —
KTM-Kopf (schwarz), Husky-Kopf (#273A60), beide Fuesse, dazu je Hell- und
Dunkelmodus. Feste Farben haetten acht Sonderregeln gebraucht und waeren beim
naechsten Flaechenwechsel still falsch geworden. Die Schriftfarbe des
Kopfbereichs ist per Definition auf seiner Flaeche lesbar; der Zusatz erbt
sie und ist es damit auch.
Der Rahmen wird gedaempft, die Schrift nicht. Ein Zusatz, der leiser sein
soll, verliert seine Kante — nicht seinen Kontrast ([[Farbe: nicht
verbiegen, nicht ueberinterpretieren]]). `color-mix` bekommt einen Vollton
als Rueckfall davor: Wo es fehlt, steht die Kante kraeftiger da, aber sie
steht.
Nicht in die Markenschrift gesetzt (`--spf-brand-head`): Der Zusatz gehoert
nicht zur Wortmarke, er sagt etwas ueber ihren Zustand. In der Kopfschrift
gesetzt saehe er aus, als hiesse der Shop so.
AUF HUSQVARNA GILT DAS NUR ZUR HAELFTE: `spf-marke-husky.css` setzt im Kopf
`font-family: var(--brand-font-head) !important` fuer alles ausser SVG. Die
Schriftwahl hier verliert dort also — bewusst, das ist CI §2. Was dort
nachgezogen werden MUSSTE, sind die Versalien: Dieselbe Datei nimmt dem
Kopf `text-transform` mit einer Ausnahmeliste fuer „badge", „pill" und
„tag"; `bso-beta` steht seit dem 31.08.2026 mit darin. */
.bso-beta{
display:inline-flex; align-items:center; flex:none;
font-family:var(--spf-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
font-size:10px; font-weight:700; line-height:1;
letter-spacing:.09em; text-transform:uppercase;
color:currentColor;
border:1px solid currentColor;
border-color:color-mix(in srgb, currentColor 45%, transparent);
border-radius:3px;
padding:3px 5px 2px;
white-space:nowrap;
/* Optischer Ausgleich: Versalien sitzen in ihrer Zeile hoeher als die
Mitte, ohne den Versatz haengt die Pille unter der Logomitte. */
transform:translateY(-1px);
}
/* ============================================================================
SHOP-ARCHIV (/shop/) — 31.08.2026
============================================================================
Kili: „Die Seite hier hat noch gar kein Styling und sieht noch vogelwild aus."
WARUM SIE ROH IST: `archive-product.php` ruft `[spf_category_page]` auf. Der
Shortcode liefert AUSSERHALB einer Kategorie nichts, also greift der dort
eingebaute Rueckfall — die nackte WooCommerce-Schleife. Das ist so gewollt (eine
leere Seite waere schlimmer), aber ungestaltet.
WAS HIER NICHT PASSIERT: Die Seite bekommt keine Filterspalte und keine Facetten.
Sie listet 100.083 Artikel auf 8.341 Seiten; eine Aggregat-Abfrage ueber diese
Menge waere teuer, und ein Filter ohne Kategorie hilft niemandem. Hier geht es um
die FORM — dieselbe Schrift, dieselben Abstaende, dasselbe Raster wie auf der
Kategorieseite.
Die `--spfcp-*`-Variablen leben sonst auf `.spfcp`; diese Seite hat die Huelle
nicht, deshalb stehen die benoetigten hier noch einmal. */
body.post-type-archive-product{
--spfa-ink:#16181c; --spfa-muted:#5b6270; --spfa-line:#e0e1e3; --spfa-border:#d7d9dc;
--spfa-card:#ffffff; --spfa-hover:#f7f8f9;
--spfa-orange:var(--spf-brand, #ff6600);
--spfa-cond:var(--spf-brand-cond, 'Blender Pro','Oswald',system-ui,sans-serif);
}
body.post-type-archive-product.spf-night,
body.spf-night.post-type-archive-product{
--spfa-ink:#e8eaed; --spfa-muted:#9aa0a6; --spfa-line:#2a2d30; --spfa-border:#33363a;
--spfa-card:#1a1c1e; --spfa-hover:#202226;
}
/* Titel: dieselbe Gestalt wie `.spfcp-title`, dazu der kurze Markenbalken, den auch
die Startseiten-Abschnitte und die Sidebar-Koepfe tragen. Kein dunkles Band wie auf
der Kategorieseite — dort traegt es Breadcrumb und Beschreibung, hier stuende es leer. */
body.post-type-archive-product .page-title{
position:relative;margin:0 0 26px;padding-bottom:14px;
font-family:var(--spfa-cond);font-weight:800;text-transform:uppercase;
font-size:34px;line-height:1.05;letter-spacing:.01em;color:var(--spfa-ink);
}
body.post-type-archive-product .page-title::after{
content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;
background:var(--spfa-orange);border-radius:2px;
}
/* Zeile aus Trefferzahl und Sortierung. WooCommerce stellt beide mit `float` neben-
einander, die Fitbar steht im Markup dahinter und rutschte damit in dieselbe Zeile —
drei Bloecke mit 24, 118 und 24 px Hoehe ohne gemeinsame Grundlinie. Das war das
„vogelwild". `clear:both` gibt der Fitbar ihre eigene Zeile. */
body.post-type-archive-product .woocommerce-result-count{
float:left;margin:0;font-size:14px;color:var(--spfa-muted);line-height:40px;
}
body.post-type-archive-product .woocommerce-ordering{
float:right;margin:0;display:flex;align-items:center;gap:8px;
}
body.post-type-archive-product .woocommerce-ordering::before{
content:"Sortieren";font-size:12.5px;color:var(--spfa-muted);
}
body.post-type-archive-product .woocommerce-ordering select{
min-height:40px;padding:0 10px;border:1px solid var(--spfa-border);border-radius:9px;
background:var(--spfa-card);color:var(--spfa-ink);font-size:13px;font-weight:600;cursor:pointer;
}
body.post-type-archive-product .woocommerce-ordering select:focus-visible{
outline:2px solid var(--spfa-orange);outline-offset:1px;
}
body.post-type-archive-product .spf-fitbar{
clear:both;float:none;width:100%;margin:0 0 20px;
}
/* Raster: dieselben vier Spalten und derselbe Abstand wie `.spfcp-grid`. WooCommerce
liefert eine Liste mit `columns-4` und Floats; das Grid haengt sie aus. */
body.post-type-archive-product ul.products{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
margin:0 0 28px;padding:0;list-style:none;clear:both;
}
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after{content:none}
body.post-type-archive-product ul.products li.product{
width:auto;margin:0;float:none;clear:none;
}
@media (max-width:1100px){
body.post-type-archive-product ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
body.post-type-archive-product ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering{float:none;margin-bottom:10px}
body.post-type-archive-product .page-title{font-size:26px}
}
/* Germanized haengt seine Zusatzangabe (`wc-gzd-additional-info delivery-time-info`) per
`woocommerce_after_shop_loop_item` NEBEN die Karte — als Geschwister von `.spfcard` im
`li.product`. Auf der Kategorieseite passiert das nicht: Dort rendert die eigene Schleife
die Karten ohne diesen Hook, und deshalb stand der Satz „Lieferzeit: verfuegbar" nur hier
als loser Text unter jeder Karte.
AUSGEBLENDET AUF KILIS ANSAGE (31.08.2026): „Raus mit dem germanized begriff, das haben
wir auf der Product card." Die Karte fuehrt ihre eigene Statuszeile („Verfuegbar",
„Vorbestellbar", „Bald verfuegbar"), und die Kategorieseite zeigt die Germanized-Zeile
ohnehin nicht — der Shop war an dieser Stelle uneinheitlich, jetzt ist er es nicht mehr.
Ausgeblendet, nicht entfernt: Das Markup bleibt im HTML, ein Rueckweg ist eine Zeile. */
body.post-type-archive-product ul.products li.product .wc-gzd-additional-info{display:none}
/* Gleiche Kartenhoehe im Raster. `li.product` wird vom Grid auf Zeilenhoehe gestreckt, die
`.spfcard` darin nicht — dadurch endeten die Karten auf verschiedenen Hoehen und die
Kaufen-Knoepfe standen treppenfoermig (Kili, 31.08.2026). */
body.post-type-archive-product ul.products li.product{
display:flex;flex-direction:column;
}
body.post-type-archive-product ul.products li.product > .spfcard{
flex:1 1 auto;height:100%;
}
/* Seitenzahlen: 8.341 Seiten sind kein Vergnuegen, aber sie sollen wenigstens
anfassbar sein — 40 px Zielflaeche statt nackter Links.
SPEZIFITAET: WooCommerce liefert `.woocommerce nav.woocommerce-pagination ul li
span.current{background:#ebe9eb}` mit vier Klassen und vier Elementen. Ein kuerzerer
Selektor trifft zwar, verliert aber — nachgemessen am 31.08.2026: Die aktive Seitenzahl
blieb WooCommerce-grau (rgb(233,230,237)), obwohl die eigene Regel griff. Deshalb hier
dieselbe Kette plus `body`. */
body.post-type-archive-product nav.woocommerce-pagination ul{
display:flex;flex-wrap:wrap;gap:6px;justify-content:center;border:0;margin:0;padding:0;list-style:none;
}
body.post-type-archive-product nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
body.post-type-archive-product nav.woocommerce-pagination ul li a.page-numbers,
body.post-type-archive-product nav.woocommerce-pagination ul li span.page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 12px;border:1px solid var(--spfa-border);
border-radius:9px;background:var(--spfa-card);color:var(--spfa-ink);
font-size:13.5px;font-weight:600;text-decoration:none;
}
body.post-type-archive-product nav.woocommerce-pagination ul li span.page-numbers.current{
background:var(--spfa-orange);border-color:var(--spfa-orange);
color:var(--spf-brand-ink,#fff);
}
@media (hover:hover){
body.post-type-archive-product nav.woocommerce-pagination ul li a.page-numbers:hover{
border-color:var(--spfa-orange);background:var(--spfa-hover);color:var(--spfa-ink);
}
}
/* ---------------------------------------------- Kategorieuebersicht /shop/ --
Rendert `SPF_Shop_Uebersicht`. Die WooCommerce-Regeln oben bleiben stehen: Sie greifen,
wenn die Uebersicht nichts liefert (keine Kategorie mit bestellbaren Artikeln) und der
Rueckfall auf `woocommerce_content()` doch einmal zieht. */
.spfkat{--spfk-ink:var(--spfa-ink,#16181c);--spfk-muted:var(--spfa-muted,#5b6270);
--spfk-line:var(--spfa-line,#e0e1e3);--spfk-card:var(--spfa-card,#fff);
--spfk-flaeche:#f4f5f6;--spfk-orange:var(--spf-brand,#ff6600);
--spfk-cond:var(--spf-brand-cond,'Blender Pro','Oswald',system-ui,sans-serif);}
body.spf-night .spfkat{--spfk-flaeche:#141517}
/* Dieselben Innenabstaende wie `.spfcp-in` auf der Kategorieseite: 30 px oben, 22 px an den
Seiten, 56 px unten. Ohne sie sass der Titel exakt auf der Kopf-Unterkante (gemessen: 0 px
Abstand) und der Inhalt klebte auf 1320-px-Fenstern am Rand. Die 1320 sind damit
Aussenmass wie dort — der Inhalt steht auf beiden Seiten gleich breit. */
.spfkat__in{max-width:1320px;margin:0 auto;padding:30px 22px 56px;box-sizing:border-box}
.spfkat__titel{position:relative;margin:0 0 26px;padding-bottom:14px;
font-family:var(--spfk-cond);font-weight:800;text-transform:uppercase;
font-size:34px;line-height:1.05;letter-spacing:.01em;color:var(--spfk-ink)}
.spfkat__titel::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;
background:var(--spfk-orange);border-radius:2px}
/* Unter dem Titel stand bis zum 31.08.2026 eine Zeile „7 Bereiche — waehle einen aus …".
Kili: weg damit. Sie erklaerte, was die Kacheln von selbst zeigen. Der Abstand, den sie
getragen hat, sitzt jetzt am Titel. */
/* `auto-fill` mit 300 px Mindestbreite: bei acht Bereichen ergibt das auf 1320 px vier
Spalten, auf einem 1280er drei, auf dem Tablet zwei. Kein fester Spaltenwert — die Zahl
der Wurzelkategorien kann sich aendern, das Raster soll es ueberleben. */
.spfkat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.spfkat__k{display:flex;flex-direction:column;background:var(--spfk-card);
border:1px solid var(--spfk-line);border-radius:14px;overflow:hidden;
box-shadow:0 1px 2px rgba(20,24,28,.04),0 8px 28px rgba(20,24,28,.06)}
body.spf-night .spfkat__k{box-shadow:none}
/* Ein `display:block` stand hier zuerst neben `display:flex` — Zeichen dafuer, dass die
Regel zweimal gedacht und einmal geschrieben wurde. Es blieb `flex`.
`max-width/max-height` statt `width/height`: Mit festen 100 % wurde das Bild auf die
Containerbreite gestreckt und lief bei hochkantigen Fotos 413 px hoch aus einem 197 px
hohen Kasten heraus — sichtbar war dann nichts (31.08.2026 gemessen). */
/* Die Kategoriefotos sind freigestellte Produktbilder auf WEISS. Auf grauer Flaeche stehen
sie als weisser Kasten darin — deshalb ist die Bildflaeche hell wie die Karte. Im
Nachtmodus bleibt sie es: Dieselbe Entscheidung wie beim Fahrzeug-Panel der
Kategorieseite (`body.spf-night .spfcp-veh__img{background:#fff}`) — ein Freisteller auf
Dunkel saeuft ab, und eine Umkehr gibt es bei JPG nicht. */
.spfkat__bild{display:flex;align-items:center;justify-content:center;
aspect-ratio:16/10;background:var(--spfk-card);overflow:hidden;padding:12px}
body.spf-night .spfkat__bild{background:#fff}
body.spf-night .spfkat__bild--leer{background:linear-gradient(140deg,#141517,color-mix(in srgb,var(--spfk-orange) 22%,#141517))}
.spfkat__bild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Kein Bild: der Anfangsbuchstabe auf der Markenflaeche. Auf Husqvarna hat heute nur die
Haelfte der Wurzelkategorien ein Bild — ein leerer grauer Kasten waere schlechter als
ein Zeichen, das wenigstens absichtsvoll aussieht. */
.spfkat__bild--leer{background:linear-gradient(140deg,var(--spfk-flaeche),color-mix(in srgb,var(--spfk-orange) 12%,var(--spfk-flaeche)))}
.spfkat__initial{font-family:var(--spfk-cond);font-weight:800;font-size:64px;line-height:1;
/* Fester Wert statt 55 Prozent Deckkraft (Kili, 02.09.2026): Bei transparenter
Schrift haengt der Kontrast am Verlauf darunter — hier waren es 1,79:1 auf
KTM. `--spf-brand-text` haelt 4,5:1 und ist auf Husqvarna das Dunkelblau. */
color:var(--spf-brand-text,#f96300)}
.spfkat__txt{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px}
.spfkat__name{margin:0;font-family:var(--spfk-cond);font-weight:800;text-transform:uppercase;
font-size:19px;line-height:1.15;letter-spacing:.02em}
.spfkat__name a{color:var(--spfk-ink);text-decoration:none}
@media (hover:hover){.spfkat__name a:hover{color:var(--spfk-orange)}}
.spfkat__n{margin:4px 0 12px;font-size:13px;color:var(--spfk-muted)}
.spfkat__sub{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:5px}
.spfkat__sub a{font-size:14px;color:var(--spfk-muted);text-decoration:none;
display:inline-flex;align-items:baseline;gap:7px;min-height:22px}
.spfkat__sub a::before{content:"\00bb";color:var(--spfk-orange);font-family:var(--spfk-cond);
font-weight:700;font-size:14px;flex:none}
@media (hover:hover){.spfkat__sub a:hover{color:var(--spfk-ink)}}
/* Der Weiterlink sitzt unten, egal wie viele Unterkategorien darueber stehen — sonst
springt er von Kachel zu Kachel. */
.spfkat__mehr{margin-top:auto;align-self:flex-start;font-family:var(--spfk-cond);
font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;
color:var(--spfk-orange);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
@media (hover:hover){.spfkat__mehr:hover{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:640px){
.spfkat__grid{grid-template-columns:1fr}
.spfkat__titel{font-size:26px}
}
/* ── Fremde Zahlungs-Rahmen im Nachtmodus ───────────────────────────────────
Aufgeklaert am 04.09.2026, nachdem zwei Anlaeufe am Symptom vorbeigingen.
BEFUND: Im Nachtmodus lag hinter den PayPal-Express-Knoepfen im Warenkorb eine
weisse Flaeche, auf der Produktseite dagegen nicht — bei nachweislich
identischer ppcp-Konfiguration. Gemessen wurden: gleiche style-Vorgaben
(layout, color, shape, label, tagline), gleiche SDK-Parameter, gleiche von
PayPal vergebene Container-Klassen. Der einzige Unterschied im gesamten
Konfigurationsobjekt war `context: "cart"` gegen `context: "product"`.
URSACHE — und sie liegt bei uns, nicht bei PayPal: `color-scheme` ist eine
VERERBTE Eigenschaft. Die Warenkorb-, Kassen- und Danke-Seiten setzen im
Nachtmodus `color-scheme:dark` auf dem Rumpf (spf-cart.css, spf-kasse.css,
spf-checkout.css, spf-thankyou.css), damit native Bedienelemente — Auswahl-
felder, Kaestchen, Bildlaufleisten — dunkel gezeichnet werden. Die Vererbung
endet aber nicht am eigenen Dokument: Sie erreicht auch das eingebettete
`iframe`-Element. PayPals Knopf-Dokument ist hell. Und fuer genau diesen Fall
schreibt CSS Color Adjust 2.4 vor, dass der Browser den sonst durchsichtigen
Grund des Rahmens OPAK malen muss — in der Farbe, die zum Schema des
eingebetteten Dokuments passt, also weiss. Die Produktseite setzt kein
`color-scheme`, dort entsteht kein Widerspruch, dort bleibt es durchsichtig.
Deshalb hilft hier nichts, was am Aussehen ansetzt: Der Rahmeninhalt ist
fremd und unerreichbar, `background` am iframe-Element liegt HINTER dem
Dokument, `allowtransparency` ist ein wirkungsloses Alt-Attribut, und einen
SDK-Parameter fuer Hintergrund oder Dunkelmodus gibt es nicht (PayPal hat den
Wunsch 2024 als „not planned" geschlossen). Die eine Stellschraube ist das
Schema am Rahmen-Element selbst.
Bewusst NICHT das `color-scheme:dark` der Seiten entfernen — das hat seine
eigene Aufgabe. Und bewusst am iframe, nicht am Wrapper: `light` faerbt in
seinem ganzen Teilbaum auch native Bedienelemente hell, die enge Fassung ist
die risikoaermere.
Die Regel steht netzwerkweit, weil dieselbe Falle an jeder Platzierung
zuschlaegt, die im Nachtmodus ein Zahlungs-iframe zeigt: Warenkorb, klassische
Kasse (dort erst, wenn PayPal als Zahlart gewaehlt ist) und Block-Kasse. Wo
der Browser die Regel nicht umsetzt, war der Rahmen ohnehin durchsichtig —
sie ist dort wirkungslos, nicht schaedlich. */
body.spf-night .ppc-button-wrapper iframe,
body.spf-night .paypal-buttons iframe{ color-scheme: light; }
/* =============================================================================
HUSQVARNA: MIXED CASE STATT VERSALIEN
=============================================================================
DESIGNANWEISUNG-HUSKY-CI.md §2 (Quelle: HQV CD-Manual 2024, S. 36-37):
Headlines „immer Mixed Case (Groß-/Kleinschreibung), NICHT Versal". Und
ausdruecklich unter „Stilbruch zu KTM beachten": Die KTM-Vorlagen arbeiten
mit Versal-Headlines (Blender Pro, uppercase); beim Port nach Husky ist
`text-transform: uppercase` je Element zu pruefen.
Beim Produktnamen war das laengst umgesetzt (`.spfcard--husky
.spfcard__name`), an einigen anderen Stellen nicht. Gemessen am 03.09.2026
ueber Kategorie- und Produktseite blieben genau die hier aufgezaehlten
uebrig — Kilis Einschaetzung „ist aber an den meisten stellen glaube ich eh
schon so" hat sich bestaetigt.
NICHT umgestellt sind kurze Auszeichnungen: `-50%`, „OEM-Teil", „Beta",
„Nur EU". Das sind Marker, keine Ueberschriften; dort ist Versal eine
typografische Auszeichnung und kein Stilbruch. Wer das anders sieht, nimmt
sie hier auf — die Liste ist bewusst aufgezaehlt und nicht pauschal.
Der Anker `body.bso-marke--husky` kommt aus SPF_Site_Base::body_marke().
KTM bleibt unberuehrt: Dort ist Versal die Hausschrift-Vorgabe. */
body.bso-marke--husky .add_to_cart_button,
body.bso-marke--husky .single_add_to_cart_button,
body.bso-marke--husky .spfcard .button,
body.bso-marke--husky .spfcp-cattree__leaf,
body.bso-marke--husky .spfcp-cattree__n,
body.bso-marke--husky .ktmcd__name,
body.bso-marke--husky .ktmcd__sum-lbl,
body.bso-marke--husky .ktmcd__co,
body.bso-marke--husky .ktmcd__view,
body.bso-marke--husky .gadd__head-t,
body.bso-marke--husky .spf-gside__lbl,
body.bso-marke--husky .daten__l,
body.bso-marke--husky .meta__l,
/* Landingpage (Kili, 03.09.2026: „bso-btn auf der Landingpage ist noch in
Versalien"). Die Versalie kommt NICHT aus `.bso-btn` selbst — von den sechs
Knoepfen der Seite standen vier bereits auf `none`. Sie stammt, wie beim
Kartenknopf, aus einer Regel ausserhalb des Plugin-CSS; deshalb hier mit
`!important` und ueber die Klasse statt an der Fundstelle. */
body.bso-marke--husky .bso-btn,
body.bso-marke--husky .weg__titel,
body.bso-marke--husky .weg__eyebrow,
body.bso-marke--husky .tw__nudge-titel,
body.bso-marke--husky .spflh2-mass,
/* MARKENNAMEN IM ORIGINAL — der wichtigste Eintrag dieser Liste.
Die Marken-Kacheln standen auf `uppercase`, und das schreibt fremde Marken
falsch: aus „Moto-Master" wurde „MOTO-MASTER", aus „LeoVince" „LEOVINCE",
aus „ARider" „ARIDER". Eine fremde Wortmarke gibt man so wieder, wie ihr
Inhaber sie schreibt — bei 14 Marken auf der Seite betraf das drei.
Die uebrigen (X-GRIP, AKRAPOVIC, MOTOREX …) stehen ohnehin versal in den
Daten und sehen unveraendert aus. */
body.bso-marke--husky .spfmv__name{
text-transform:none !important;
}