/* =========================================================================== Kopfbereich beider Shops — Neubau 12.08.2026 =========================================================================== Der Kopf ist eine dunkle Flaeche mit Signaturkante, in beiden Modi. Dasselbe Bauteil fuehrt die Seite bereits zweimal: das Titelband der Kategorieseite (#101112, spf-category-page.css:79) und die Fusszeile (#0f1011, 3 px Kante, spf-footer.css:35). Er bleibt dunkel, ob hell oder dunkel geschaltet ist — er ist die Konstante, gegen die der Rest der Seite hell wird. WERTE Alle Zahlen stammen aus spf-model-page.css und spf-category-page.css, nicht aus den Baendern der Startseite (spf-landing-ktm.css). Die sind die aeltere Bricks-Schicht mit skewX und clip-path. Flaechen kantig, Bedienelemente rund. Karte 14 px, Knopf 10 px, Pillen 999 px, Markenflaechen 0. Auszeichnung 11 px / 700 / .14em Versalien. Navigation 46 px hoch, 16 px Polsterung, 12,5 px / .07em, 2 px Unterstrich. Raster 26 x 26 px. Container 1320 px, 22 px Rand. Bewegung .15 s Farbe, .18 s Karte, cubic-bezier(.22,.61,.36,1). Trefferflaeche 44 px. SCHRIFT Nie 'Blender Pro' fest verdrahten — Husqvarna traegt Helvetica Neue LT Pro. Immer ueber --spf-brand-head / -cond / -sans aus class-spf-brand.php. MARKE Fuellung nimmt --spf-brand, Text und Linie --spf-brand-night bzw. auf hellem Grund #b84a00. Auf der dunklen Kopfflaeche gilt durchgehend die Nachtebene: Husqvarna-Blau kaeme auf #0e1420 auf 1,4:1. --brand-accent wird bewusst NICHT verwendet — das Token ist im Plugin nirgends definiert und kommt aus Bricks-Resten und WPCode. =========================================================================== */ /* --------------------------------------------------------------------------- Farbebenen Der Kopf war bis zum 13.08.2026 in beiden Modi dunkel. Auf Kilis Wunsch hat er jetzt eine helle Fassung und folgt dem Schalter wie der Rest der Seite. HELL ist die Grundstellung, DUNKEL haengt an `.spf-night` auf html oder body — derselbe Kontrakt, den spf-garage-hub.js und bso-consent verwenden. ZWEI SIGNATURFARBEN, und der Unterschied ist kein Geschmack: --spfh-sig fuer FLAECHEN und KANTEN (Markenfarbe, voll) --spfh-sig-text fuer SCHRIFT #ff6600 hat einen Rotkanal von 255 und kann als Text auf Weiss rechnerisch nie 4,5:1 erreichen — die obere Schranke liegt bei 4,0:1 (ADR-0008). Auf hellem Grund traegt deshalb --o-text (seit 04.09.2026 #f96300, 3,08:1), auf dunklem die Marke selbst (5,82:1). Wer hier das falsche Token nimmt, baut einen Kontrastfehler, den man erst im Audit sieht. --------------------------------------------------------------------------- */ #ktmps-header.spfh{ /* Marke, mit Rueckfall auf KTM */ --spfh-brand:var(--spf-brand,#ff6600); --spfh-brand-press:var(--spf-brand-press,#e25c00); --spfh-brand-ink:var(--spf-brand-ink,#ffffff); /* --- HELL (Grundstellung) --- */ --spfh-sig:var(--spf-brand,#ff6600); /* Auf Wunsch von Kili (13.08.2026) das hellere Text-Orange: --o-text-l (#f96300 bei KTM). Seit dem 04.09.2026 tragen beide Stufen denselben Wert — #c24a00 ist raus (Kili). Der Unterschied zur Marke #ff6600 ist praktisch nicht sichtbar, der Kontrast faellt dafuer von 4,91:1 auf 3,08:1. Fuer die 14-px-Menuelinks reicht das formal nicht (4,5:1 gefordert) — bewusst getragen, wie die abgeschaltete Schriftkontur auf den Buttons. Beide Werte sind markenabhaengig: Husqvarna bekommt hier sein #273a60 mit 11,29:1. */ --spfh-sig-text:var(--o-text-l,#f96300); /* Schrift auf der Signaturflaeche. Orange und Gelb sind beide hell, also dunkle Schrift — #ffffff kaeme auf #ff6600 nur auf 2,94:1. */ --spfh-sig-ink:#101112; /* Katalog-Knopf, hell: das Buttondesign des Shops — volle Markenflaeche, Schrift darauf, beim Zeigen abgedunkelt mit Glanzwischer (Vorgabe Kili, 14.08.2026, Vorbild `.spflh-cta--main` aus spf-buttons.css). Vorher stand hier `transparent`, also ein Umriss. Der Weg dahin ging ueber zwei Zwischenstufen an einem Tag — erst 2 px Umriss ohne Flaeche, dann 1 px mit 15 Prozent Tonung, die hell wie ein aufgehellter Kasten wirkte. Rueckweg auf den Umriss ist genau eine Zeile: hier `transparent` und `--spfh-knopf-text:var(--spfh-ink)`. */ --spfh-knopf-flaeche:var(--spfh-sig); --spfh-knopf-flaeche-h:color-mix(in srgb,var(--spfh-sig) 86%,#000); /* Schrift und Pfeil hell, nicht `--spfh-sig-ink` (Vorgabe Kili, 14.08.2026). Damit steht der Knopf wie jeder andere Button des Shops: `--btn-fg` ist dort ebenfalls #ffffff, auf derselben orangen Flaeche. Die dunkle Schrift war die Abweichung, nicht die helle. Der Preis steht in ADR-0008: Weiss auf #ff6600 erreicht 2,94:1 und damit nicht die 4,5:1 aus WCAG 1.4.3. Das ist bewusst getragen und im ganzen Shop schon so — es hier anders zu machen haette den Knopf nur aus der Reihe genommen, ohne die Regel woanders zu retten. Husqvarna ist davon nicht betroffen: hell steht Weiss auf #273A60 bei 10,4:1, dunkel traegt das Gelb die dunkle Schrift (siehe Husqvarna-Block). */ --spfh-knopf-text:#ffffff; --spfh-knopf-pfeil:#ffffff; /* Der Glanzwischer bleibt in beiden Modi gleich stark. Das Buttonsystem daempft ihn nachts auf .20, weil dort die ganze Seite gedaempft ist — dieser Knopf traegt aber Tag und Nacht dieselbe Flaeche, also braucht der Streifen darauf auch dieselbe Deckung. */ --spfh-knopf-sheen:rgba(255,255,255,.28); --spfh-flaeche:#ffffff; --spfh-tief:#f4f5f6; --spfh-pop:#ffffff; --spfh-zelle:rgba(0,0,0,.028); --spfh-zelle-h:rgba(0,0,0,.06); --spfh-ink:#101112; --spfh-muted:#4d5157; /* 8,3:1 auf Weiss */ --spfh-faint:#6b6b6b; /* 5,33:1 — der Wert aus spf-a11y.css */ --spfh-linie:rgba(0,0,0,.10); --spfh-linie-2:rgba(0,0,0,.17); --spfh-onink:rgba(0,0,0,.30); --spfh-schatten:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.10); /* Gruen fuer „Fahrzeug eingestellt". Auf hellem Grund braucht es den dunkleren Wert: #3ecf6a stuende gegen Weiss bei 1,9:1. */ --spfh-ok:#1e9e4a; --spfh-ok-ink:#ffffff; --spfh-max:1320px; --spfh-pad:22px; --spfh-raster:26px; --spfh-luecke:22px; /* Abstand der Rasterspalten in der Kopfzeile */ /* Linienfarbe des Rasters im Menue. Auf Weiss braucht es eine dunkle Linie — die helle aus dem Nachtmodus ist dort schlicht nicht da. */ --spfh-raster-linie:rgba(16,17,18,.055); --spfh-t:.15s; --spfh-e:cubic-bezier(.22,.61,.36,1); /* Kleben tut der Wrapper #bso-header, nicht dieser Knoten — ein sticky Element haelt nur innerhalb seines Elternelements, und #bso-header ist exakt so hoch wie der Kopf. Ein `sticky` hier haette also keinen Spielraum; genauso wenig eines auf der Kategorienzeile. Damit trotzdem nur die Kategorien mitkommen, klebt der Wrapper mit einem negativen `top` — siehe ganz unten in dieser Datei. */ position:relative; z-index:40; background:var(--spfh-flaeche); color:var(--spfh-ink); border-bottom:3px solid var(--spfh-sig); font-family:var(--spf-brand-sans,'Roboto Condensed Regular',system-ui,sans-serif); } /* --- DUNKEL --- */ html.spf-night #ktmps-header.spfh, body.spf-night #ktmps-header.spfh{ /* Auf dunklem Grund traegt die Marke selbst: 5,82:1. Bei Husqvarna ist das Gelb — Blau kaeme auf #0e1420 auf 1,4:1. */ --spfh-sig:var(--spf-brand-night,var(--spf-brand,#ff6600)); --spfh-sig-text:var(--spf-brand-night,var(--spf-brand,#ff6600)); --spfh-sig-ink:#101112; /* Katalog-Knopf, dunkel: seit dem 14.08.2026 ebenfalls voll gefuellt (Vorgabe Kili). Die Signaturfarbe ist hier die Nachtmarke — bei KTM dasselbe Orange wie am Tag, bei Husqvarna das Gelb. Flaeche und Hover werden wiederholt, damit sie an der Nachtmarke haengen. Schrift, Pfeil und Wischer stehen nicht hier: Bei KTM aendert sich die Flaeche zwischen den Modi nicht, also gilt die Grundstellung weiter. Wo es anders ist — Husqvarna, wo nachts das Gelb kommt —, steht die Ausnahme im Husqvarna-Block. */ --spfh-knopf-flaeche:var(--spfh-sig); --spfh-knopf-flaeche-h:color-mix(in srgb,var(--spfh-sig) 86%,#000); /* NICHT --spf-brand-flaeche: Die Palette fuehrt fuer KTM #0f1011 (der Ton der Buehnen), der Kopf steht bewusst zwei Punkte darueber. Nur die tiefe Ebene ist dieselbe wie im uebrigen Shop. */ --spfh-flaeche:#101112; --spfh-tief:var(--spf-brand-flaeche-tief,#08090a); --spfh-pop:#0b0c0d; --spfh-zelle:rgba(255,255,255,.045); --spfh-zelle-h:rgba(255,255,255,.085); --spfh-ink:#f2f3f5; --spfh-muted:#b9bcc0; --spfh-faint:#8d939a; --spfh-linie:rgba(255,255,255,.12); --spfh-linie-2:rgba(255,255,255,.22); --spfh-onink:rgba(255,255,255,.30); --spfh-schatten:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5); --spfh-raster-linie:rgba(232,234,237,.06); --spfh-ok:#3ecf6a; --spfh-ok-ink:#0f1011; } /* Husqvarna. Hell eine sehr helle Blaustufe, dunkel die tiefe Flaeche. Als Textsignatur taugt das Gelb nur auf Dunkel — auf Weiss steht es bei 1,3:1. Hell traegt deshalb das CI-Blau. Beide Selektoren brauchen die ID: Die Werte oben stehen an `#ktmps-header.spfh` (1-1-0), und eine blosse Klasse kommt dagegen nicht an. Genau daran ist es gescheitert — der Body traegt `spfh-shop-hqv` in Multisite nicht zuverlaessig, weshalb kopf.js ersatzweise `spfh--hqv` auf den Kopf setzt. Diese zweite Fassung verlor still, und Husqvarna lief bis zum 13.08.2026 mit der KTM-Flaeche. */ body.spfh-shop-hqv #ktmps-header.spfh, #ktmps-header.spfh.spfh--hqv{ --spfh-sig-text:var(--spf-brand,#273a60); /* Die Signaturflaeche ist hier dunkelblau, nicht orange oder gelb — darauf traegt nur helle Schrift. #101112 auf #273A60 stuende bei 1,9:1, Weiss steht bei 10,4:1. Betrifft die Zahl am Warenkorb und den „Neu"-Merker. */ --spfh-sig-ink:#ffffff; --spfh-tief:#f2f4f8; --spfh-zelle:rgba(39,58,96,.04); --spfh-zelle-h:rgba(39,58,96,.08); } html.spf-night #ktmps-header.spfh.spfh--hqv, body.spf-night #ktmps-header.spfh.spfh--hqv, body.spf-night.spfh-shop-hqv #ktmps-header.spfh{ --spfh-sig-text:var(--spf-brand-night,#ffed00); /* Der Katalog-Knopf ist hier gelb — die einzige Stelle im Projekt, an der die Signaturflaeche so hell wird, dass die Grundstellung nicht mehr passt: - Schrift und Pfeil muessen dunkel stehen. Weiss auf #FFED00 kaeme auf 1,1:1 und waere schlicht nicht lesbar. - Der Glanzwischer muss dunkel sein. Weiss auf Gelb ist hell auf hell und war praktisch unsichtbar (Kili, 14.08.2026). Derselbe Streifen in Schwarz bei 22 Prozent laeuft sichtbar durch, ohne die Flaeche schmutzig wirken zu lassen. */ --spfh-knopf-text:#101112; --spfh-knopf-pfeil:#101112; --spfh-knopf-sheen:rgba(0,0,0,.22); /* Beide Werte kommen seit dem 13.08.2026 aus der Marken-Palette und stehen nicht mehr zweimal im Projekt. Die Husqvarna-Zeile bleibt trotzdem stehen: Sie setzt --spfh-pop und die Zellenfarben, die es in der Palette nicht gibt. */ --spfh-flaeche:var(--spf-brand-flaeche,#0e1420); --spfh-tief:var(--spf-brand-flaeche-tief,#080d15); --spfh-pop:#0a0f18; --spfh-zelle:rgba(255,255,255,.05); --spfh-zelle-h:rgba(255,255,255,.09); } /* Grundstellung fuer Links und Knoepfe im Kopf. In `:where()` und damit mit Spezifitaet 0 — sonst schlaegt diese Zeile ueber ihre ID jede spaetere Komponentenregel. Genau das ist passiert: `.spfh-ma:hover{color:...}` (0-2-0) verlor gegen `#ktmps-header.spfh a` (1-1-1), weshalb sich die Kategorien beim Zeigen nicht faerbten und der Knopf im Band seine Flaeche nie bekam. Der Fehler ist lautlos — im Stylesheet steht die richtige Regel, sie greift nur nie. Gegen fremde Blaetter braucht es hier nichts: Geprueft am 13.08.2026, es gibt kein anderes Stylesheet, das `color` oder `background` auf einem Link oder Knopf im Kopf setzt. */ :where(#ktmps-header.spfh a){color:inherit;text-decoration:none} :where(#ktmps-header.spfh button){font:inherit;color:inherit;background:none;border:0;cursor:pointer} #ktmps-header.spfh :focus-visible{outline:2px solid var(--spfh-ink);outline-offset:2px} /* Das Suchfeld zeigt seinen Fokus ueber die Linie darunter, die dabei auf die Signaturfarbe wechselt und dicker wird. Ein Rahmen obendrauf wirkt wie ein Fehlerzustand. `box-shadow` muss mit zurueck: spf-a11y.css legt den Fokusring zweilagig an (`outline` plus 6 px weisser `box-shadow`). Nur die Outline abzuschalten liess den weissen Ring stehen — das war der dicke Rahmen, der beim Klick in die Suche erschien. */ #ktmps-header.spfh .spfh-sf input:focus-visible, #ktmps-header.spfh .spfh-sf input:focus{outline:none;box-shadow:none} .spfh-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .spfh-sprite{position:absolute;width:0;height:0;overflow:hidden} .spfh-i{ width:24px;height:24px;flex:none;display:block; stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; } /* Das Motorradsymbol brauchte bis zum 13.08.2026 eine Sonderbehandlung: Es kam als schwarzes PNG aus der Mediathek und wurde ueber `mask` eingefaerbt, weil es auf der dunklen Kopfflaeche sonst unsichtbar gewesen waere. Dazu gehoerte ein eigenes Seitenverhaeltnis (1,5) und weiter unten eine eigene Groessenregel. Beides ist entfallen. `#spfh-bike` ist jetzt eine Strichzeichnung im Sprite und faellt vollstaendig unter `.spfh-i` — gleiche Groesse, gleiche Strichstaerke, gleiche Farbe wie Konto, Warenkorb und Suche. */ .spfh-in{ max-width:var(--spfh-max);margin:0 auto;padding:0 var(--spfh-pad); display:flex;align-items:center; } /* --------------------------------------------------------------------------- Kopfzeile Drei Spalten, damit die Suche mittig steht und nicht am Logo klebt. --------------------------------------------------------------------------- */ .spfh-top{height:72px} .spfh-top .spfh-in{ height:100%;gap:var(--spfh-luecke); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr); align-items:center; } /* `position:relative` ist kein Zierrat: Es gibt dem Logo einen eigenen Layer und damit dieselbe Ausgangslage wie den Symbolen rechts (`.spfh-ib`, alle `relative`). Ohne das verlor der Home-Knopf am iPhone seine Treffer, sobald ein bildschirmfuellendes Element mit `backdrop-filter` darueber lag — die Symbole blieben klickbar, das Logo nicht (Kili, 09.09.2026). Der Ausloeser ist am Scrim behoben; das hier ist die zweite Sicherung, falls je wieder ein solcher Layer entsteht. Ohne `top`/`left` aendert es am Layout nichts. */ .spfh-lg{display:flex;align-items:center;flex:none;justify-self:start;position:relative} /* Beta-Zusatz im Logo-Link. Aussehen steht in spf-global.css, hier nur der Abstand und die Groesse an dieser einen Stelle — im Kopf ist es eng, im Fuss nicht. Der Abstand ist bewusst groesser als der Wortabstand innerhalb der Marke: Der Zusatz soll neben dem Logo stehen, nicht dazugehoeren. */ .spfh-lg .bso-beta{margin-left:10px} /* AUF DEM TELEFON IST DAFUER KEIN PLATZ, und das ist gemessen, nicht geschaetzt: Die Kopfzeile geht bei 390 px exakt auf — 18 Rand + 102 Logo + 12 + 44 Suche + 12 + 44 Hell/Dunkel + 12 + 128 Symbole + 18 Rand = 390. Kein einziges Pixel Reserve. Der Zusatz braucht 41 plus 10 Abstand und schob die Symbolgruppe um 33 px aus dem Bild; die Seite bekam einen waagerechten Scrollbalken. Auf beiden Shops gleich, ab 430 px verschwindet es von selbst. Ausgeblendet bis 479 px und nicht bis 429: Bei 430 ginge es mit null Reserve auf, und das haelt keinem laengeren Wort und keiner groesseren Schriftgroesse stand. Im FUSS bleibt er auch auf dem Telefon stehen — dort ist Platz. Wer ihn auch im mobilen Kopf haben will, muss dem Kopf Platz nehmen (Raender 18 -> 14, Abstaende 12 -> 10 und der Zusatz kompakt: zusammen genau die fehlenden 33 px). Das ist eine Gestaltungsfrage und keine, die nebenbei entschieden wird — deshalb steht sie hier und nicht im Code. */ @media (max-width:479px){ .spfh-lg .bso-beta{display:none} } /* Alle Bildregeln im Kopf tragen eine ID, und zwar wegen genau einer fremden Zeile: `woocommerce-layout.css` setzt auf jeder Shop-Seite `.woocommerce img, .woocommerce-page img{height:auto;max-width:100%}`. Das ist dasselbe Gewicht (0,1,1) wie eine einklassige Regel hier — und das Blatt laedt spaeter (Index 21 gegen 13), also gewinnt es. Sichtbar wurde das erst auf Shop-Seiten: Auf der Startseite fehlt `body.woocommerce-page`, dort stimmte das Logo. Auf Kategorie-, Produkt-, Warenkorb- und Kontoseiten stand es auf 69 px statt 34, bei 500 px Fensterbreite in Originalgroesse (2048 px) und der Kopf 676 px hoch. Gemeldet aus einer Parallelsitzung am 13.08.2026, hier nachgemessen. Geprueft: Es ist die EINZIGE WooCommerce-Regel, die in den Kopf greift. */ #ktmps-header .spfh-lg img{display:block;width:auto;height:40px;max-width:230px;object-fit:contain} /* Zwei Fassungen im Markup, umgeschaltet per CSS. Ein Tausch der `src` beim Moduswechsel liesse das Logo kurz verschwinden — die zweite Datei laedt erst in dem Moment, in dem sie gebraucht wird. Die Namen beschreiben den Untergrund, nicht die Farbe der Zeichnung. */ #ktmps-header .spfh-lg .spfh-lg__d{display:none} html.spf-night #ktmps-header .spfh-lg .spfh-lg__d, body.spf-night #ktmps-header .spfh-lg .spfh-lg__d{display:block} html.spf-night #ktmps-header .spfh-lg .spfh-lg__h, body.spf-night #ktmps-header .spfh-lg .spfh-lg__h{display:none} .spfh-lg__fallback{display:none;font:800 17px/1 var(--spf-brand-head,'Blender Heavy',system-ui,sans-serif)} #ktmps-header .spfh-lg.img-failed img{display:none} .spfh-lg.img-failed .spfh-lg__fallback{display:block} /* Kein Filter: das Template waehlt bereits die Fassung fuer dunklen Untergrund (KTM-PS-Logo-Dunkel.svg / Husky-PS-Logo-Weiss.svg). */ /* Symbolgruppe in eigener Huelle. Sie trennt die drei vom Suchbereich, ohne dass es dafuer eine Linie braucht. */ /* Schalter und Symbolgruppe teilen sich die rechte Rasterspalte. Ohne diese Huelle waeren es vier Spalten statt drei, und die Suche staende nicht mehr in der Mitte des Kopfes. */ /* Die Huelle fuellt die ganze rechte Rasterspalte, die Pille sitzt an deren Ende. `margin-inline:auto` am Schalter verteilt den verbleibenden Platz zu gleichen Teilen links und rechts von ihm — er steht damit mittig zwischen Suchfeld und Pille, nicht dicht an der Pille. */ .spfh-rechts{ display:flex;align-items:center;justify-self:stretch;min-width:0; /* Die Huelle beginnt erst hinter dem Spaltenabstand. Ohne diesen Ausgleich waere der Weg vom Suchfeld zum Schalter genau um diesen Abstand laenger als der vom Schalter zur Pille — gemessen 84 zu 62 px. */ margin-left:calc(-1 * var(--spfh-luecke)); } .spfh-rechts .spfh-lsw{margin-inline:auto} .spfh-acts{ display:flex;align-items:center;flex:none; height:46px;padding:0 3px; /* 14 px wie Karte und Knopf im uebrigen Kopf, nicht 999. Vorgabe Kili. */ border-radius:14px; background:rgba(255,255,255,.06);border:1px solid var(--spfh-linie-2); transition:border-color var(--spfh-t) ease; } @media (hover:hover){ .spfh-acts:hover{border-color:var(--spfh-onink)}} .spfh-ib{ width:40px;height:40px;display:grid;place-items:center;position:relative; /* Die Hoverflaeche folgt der Form der Pille, nicht dem Kreis: 14 px aussen minus 3 px Polsterung ergibt 11 px innen — so laeuft die Rundung der Flaeche parallel zur Kante der Pille statt sie zu schneiden. */ border-radius:11px;color:var(--spfh-muted); transition:color var(--spfh-t) ease,background var(--spfh-t) ease; } /* Der Hoverton kommt aus dem Zellen-Token, damit er in beiden Modi traegt — `rgba(255,255,255,.08)` waere auf der hellen Flaeche unsichtbar. */ @media (hover:hover){ .spfh-ib:hover{color:var(--spfh-ink);background:var(--spfh-zelle-h)}} /* Garage. Gleiche Huelle wie Konto und Warenkorb, dazu eine Marke unten rechts: Haken auf gruener Scheibe, wenn ein Fahrzeug eingestellt ist, sonst ein gestricheltes Plus. Beides in CSS gezeichnet — ein drittes Sprite-Symbol nur fuer zwei Zustaende waere Ballast, und der gestrichelte Kreis liesse sich als Strichzeichnung ohnehin nicht sauber skalieren. Die Marke sitzt ausserhalb des Symbols, nicht darauf: Auf dem Motorrad verdeckt sie das Vorderrad und wird bei 15 px Symbolhoehe unleserlich. */ .spfh-gib__m{ position:absolute;right:3px;bottom:3px; width:13px;height:13px;border-radius:999px; display:grid;place-items:center; /* Ein Ring in der Kopffarbe trennt die Marke vom Symbol darunter. */ box-shadow:0 0 0 2px var(--spfh-flaeche); transition:background var(--spfh-t) ease,border-color var(--spfh-t) ease; } .spfh-gib.is-belegt .spfh-gib__m{ background:var(--spfh-ok); border:0; } /* Der Haken als Rechteck mit zwei Kanten, um 45 Grad gedreht. */ .spfh-gib.is-belegt .spfh-gib__m::before{ content:""; width:3px;height:6px;margin-top:-1px; border:solid var(--spfh-ok-ink); border-width:0 1.7px 1.7px 0; transform:rotate(42deg); } .spfh-gib.is-leer .spfh-gib__m{ background:var(--spfh-flaeche); border:1.5px dashed var(--spfh-faint); } /* Plus aus zwei Strichen. */ .spfh-gib.is-leer .spfh-gib__m::before, .spfh-gib.is-leer .spfh-gib__m::after{ content:"";position:absolute;background:var(--spfh-faint); } .spfh-gib.is-leer .spfh-gib__m::before{width:7px;height:1.5px} .spfh-gib.is-leer .spfh-gib__m::after{width:1.5px;height:7px} .spfh-gib.is-belegt{color:var(--spfh-ink)} .spfh-ib__n{ position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px; display:grid;place-items:center;border-radius:999px; background:var(--spfh-sig);color:var(--spfh-sig-ink); font:700 10px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); font-variant-numeric:tabular-nums; } /* Die Null blendet CSS aus. Kein `hidden`: spf-cart-links.js setzt beim Nachzaehlen nur den Text und raeumt das Attribut nicht weg. */ .spfh-ib__n[data-spfh-zahl="0"], .spfh-ib__n:empty{display:none} /* Hell/Dunkel — Bahn mit Knebel. Das Zeichen sitzt IM Knebel und liegt absolut mit inset+margin, sonst haengt seine Lage davon ab, welche Ausrichtung der Traeger gerade mitbringt. */ /* spf-garage-hub.css:465 stylt `.spflh-themetoggle` als runden weissen Knopf mit hellem Rand — gedacht fuer den frueheren, hellen Kopf. Hier wird das zurueckgesetzt, sonst sitzt die Bahn in einem grauen Kreis. */ #ktmps-header.spfh .spfh-lsw{ width:44px;height:40px;min-width:0;display:grid;place-items:center;padding:0; border:0;background:none;transform:none; border-radius:999px;color:var(--spfh-muted); transition:color var(--spfh-t) ease,background var(--spfh-t) ease; } /* Kein Hover-Hintergrund (Vorgabe Kili, 13.08.2026). Der Schalter ist kein Symbolknopf wie Konto und Warenkorb — er zeigt seinen Zustand ueber die Bahn selbst, und eine zusaetzliche Flaeche dahinter legt eine zweite Aussage darueber. Die Rueckmeldung beim Zeigen kommt allein aus der Kante der Bahn (Regel darunter). */ @media (hover:hover){ #ktmps-header.spfh .spfh-lsw:hover{color:#fff;background:none}} .spfh-lsw__t{ position:relative;width:44px;height:24px;flex:none;border-radius:999px; background:rgba(255,255,255,.12);border:1px solid var(--spfh-linie-2); transition:background var(--spfh-t) ease,border-color var(--spfh-t) ease; } @media (hover:hover){ .spfh-lsw:hover .spfh-lsw__t{border-color:var(--spfh-onink)}} .spfh-lsw[aria-checked="true"] .spfh-lsw__t{background:var(--spfh-sig);border-color:var(--spfh-sig)} .spfh-lsw__k{ position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:999px; background:#f2f3f5;box-shadow:0 1px 3px rgba(0,0,0,.45); transition:transform .22s var(--spfh-e); } .spfh-lsw[aria-checked="true"] .spfh-lsw__k{transform:translateX(20px)} .spfh-lsw__k .spfh-i{ position:absolute;inset:0;margin:auto; width:13px;height:13px;stroke-width:2.1;color:#101112; transition:opacity .12s ease,transform .22s var(--spfh-e); } .spfh-lsw__k .spfh-moon{opacity:0;transform:rotate(-45deg) scale(.7)} .spfh-lsw[aria-checked="true"] .spfh-lsw__k .spfh-sun{opacity:0;transform:rotate(45deg) scale(.7)} .spfh-lsw[aria-checked="true"] .spfh-lsw__k .spfh-moon{opacity:1;transform:none} .spfh-burger{display:none} /* --------------------------------------------------------------------------- Suche Kein Kasten, nur eine Linie unter der Eingabe. Beim Tippen legt sich eine Ebene darunter. Produkttreffer fehlen dort bis die Route aus bso-suchmaschine steht — siehe ANWEISUNG-VORSCHLAEGE.md. --------------------------------------------------------------------------- */ .spfh-sfw{position:relative;min-width:0;display:flex} .spfh-sf{ display:flex;align-items:center;min-width:0;flex:1 1 auto; height:46px;gap:12px;padding:0 2px; border-bottom:1px solid var(--spfh-linie-2); transition:border-color var(--spfh-t) ease; } .spfh-sf:focus-within{border-bottom-color:var(--spfh-sig);border-bottom-width:2px} .spfh-sf > .spfh-i{width:19px;height:19px;color:var(--spfh-faint)} .spfh-sf input{ flex:1;min-width:0;border:0;background:none;outline:0;color:var(--spfh-ink); /* 13 px (Vorgabe Kili). Gilt nur ab Tabletbreite: Auf dem Handy steht in der 640er-Abfrage weiterhin 16 px, und das mit Absicht — Safari auf dem iPhone zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als 16 px ist. */ font:400 13px/1 var(--spf-brand-sans,'Roboto Condensed Regular',system-ui,sans-serif); padding:0; } .spfh-sf input::placeholder{color:var(--spfh-faint)} .spfh-sf input::-webkit-search-cancel-button{filter:invert(1);opacity:.5} /* Ungefuellt = kein JavaScript = das Kuerzel gibt es nicht. Siehe kopf-ansicht.php. */ .spfh-kbd:empty{display:none} .spfh-kbd{ flex:none;font:700 10.5px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.06em;padding:5px 7px;border-radius:4px; border:1px solid var(--spfh-linie-2);color:var(--spfh-faint); } .spfh-sfx{ position:absolute;left:0;right:0;top:100%;margin-top:10px;z-index:60; background:var(--spfh-flaeche);border:1px solid var(--spfh-linie-2); border-radius:16px;padding:10px;overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.5); } .spfh-sfx[hidden]{display:none} .spfh-sfx__h{ font:700 10.5px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.14em;text-transform:uppercase;color:var(--spfh-faint); padding:8px 12px 6px;margin:0; } .spfh-sfx__r{ display:flex;align-items:center;gap:11px;min-height:46px;padding:0 12px; border-radius:11px;color:var(--spfh-muted);font-size:14.5px; transition:background var(--spfh-t) ease,color var(--spfh-t) ease; } .spfh-sfx__r:focus-visible, .spfh-sfx__r.is-aktiv{ background:rgba(255,255,255,.06);color:var(--spfh-ink); } @media (hover:hover){ .spfh-sfx__r:hover{ background:rgba(255,255,255,.06);color:var(--spfh-ink); }} .spfh-sfx__r .spfh-i{width:16px;height:16px;color:var(--spfh-faint);flex:none} .spfh-sfx__r b{font-weight:400;color:var(--spfh-ink)} .spfh-sfx__r em{ margin-left:auto;font-style:normal;flex:none; font:700 10.5px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.14em;text-transform:uppercase;color:var(--spfh-sig-text); } /* Artikelzeile: Bild, Titel mit Artikelnummer, Passung, Preis. Die Werte kommen aus bsos/v1/vorschlaege. */ .spfh-sfx__r--art{gap:12px;min-height:58px} /* --------------------------------------------------------------------------- Bildzellen: flex, NICHT grid mit place-items:center --------------------------------------------------------------------------- Gemessen am 02.09.2026: In `display:grid` mit `place-items:center` wird die Rasterzelle nach ihrem Inhalt bemessen. Damit ist die Hoehe fuer das Bild unbestimmt, `height:100%` kann sich auf nichts beziehen, und das Bild nimmt seine eigene Proportion an — ein stehendes Foto von 666x1200 rendert in der 42-px-Zelle als 42x76 und wird von `overflow:hidden` oben und unten abgeschnitten. `object-fit:contain` kommt gar nicht erst zum Zug, weil es nichts zu passen gibt. Betroffen war jedes STEHENDE Bild — also alle Flaschen, Spraydosen, Gabeln und Federbeine. Liegende Bilder sahen richtig aus, deshalb fiel es lange nicht auf; aufgefallen ist es an den Oelkacheln (Kili, 02.09.2026: „zu gross fuer die Kachel bzw. nicht richtig formatiert"). In `display:flex` ist die Hoehe des Behaelters bestimmt, `height:100%` loest auf, und `contain` legt das Bild sauber hinein. `place-items:stretch` oder das Entfernen von `place-items` helfen NICHT — beides wurde gemessen, die Rasterzelle bleibt inhaltsbemessen. --------------------------------------------------------------------------- */ .spfh-sfx__b{ width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden; background:#eceef0;display:flex;align-items:center;justify-content:center; } #ktmps-header .spfh-sfx__b img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .spfh-sfx__b--leer{background:rgba(255,255,255,.07)} .spfh-sfx__b--leer .spfh-i{width:17px;height:17px;color:var(--spfh-faint)} .spfh-sfx__t{min-width:0;display:flex;flex-direction:column;gap:2px} .spfh-sfx__t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spfh-sfx__sub{ font:400 12px/1.2 var(--spf-brand-sans,'Roboto Condensed Regular',system-ui,sans-serif); color:var(--spfh-faint);font-variant-numeric:tabular-nums; } .spfh-sfx__r:not(.spfh-sfx__r--art) .spfh-sfx__sub{margin-left:8px} .spfh-sfx__p{ flex:none;margin-left:auto; font:700 14px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); color:var(--spfh-ink);font-variant-numeric:tabular-nums; } .spfh-sfx__r--art em{margin-left:0} /* Die Passung sagt nur etwas, wenn der Server sich festlegt. Gruen und Rot in den Werten, die auf dunklem Grund tragen. */ .spfh-sfx__ok{color:var(--spfh-ok)!important} .spfh-sfx__no{color:#ff7a70!important} /* Kennzeichnung als Originalteil in der Vorschlagszeile. Gleiche Beschriftung wie auf Kachel und Produktseite. Die Farben kommen aus den Kopf-Tokens und drehen sich mit dem Modus von selbst um: helle Flaeche auf dunklem Kopf, dunkle auf hellem. Aus der Produktseiten-Sitzung, 14.08.2026. */ .spfh-sfx__oem{ flex:none;display:inline-flex;align-items:center; background:var(--spfh-ink);color:var(--spfh-flaeche); font-size:9.5px;font-weight:700;line-height:1.4; text-transform:uppercase;letter-spacing:.04em; padding:2px 7px;border-radius:6px!important;white-space:nowrap; } .spfh-sfx__alle{border-top:1px solid var(--spfh-linie);margin-top:6px;border-radius:0 0 11px 11px} /* --------------------------------------------------------------------------- Navigation Reiterzeile im Duktus der Modellseite (spf-model-page.css:198-207). --------------------------------------------------------------------------- */ /* Diese Zeile ist es, die stehen bleibt — sichtbar wird das dadurch, dass alles ueber ihr einfaehrt. */ .spfh-nav{ background:var(--spfh-flaeche); border-top:1px solid var(--spfh-linie); } /* --------------------------------------------------------------------------- Einfahren beim Scrollen — ohne Hoehenaenderung Der Kopf klebt mit NEGATIVEM `top`: Er scrollt mit, bis die Kopfzeile oben heraus ist, dann bleibt die Kategorienzeile stehen. Kein Zustand, keine Klasse, keine Animation — nur natives Scrollen. Die Fassung davor animierte die Hoehe der Kopfzeile auf 0 und schaltete dabei eine Klasse. Das erzeugte eine Rueckkopplung, die sich an genau einer Stelle der Seite aufschaukelte (Messung Kili, 13.08.2026, Husky-Modellseite): Kopf faehrt ein -> Seite wird 72 px kuerzer (doc 6275 -> 6221) -> Chrome zieht die Scrollposition nach (Scroll Anchoring), y faellt 73 -> 23 -> y liegt unter der Ausfahrschwelle -> Kopf faehrt aus -> Seite wird laenger, y steigt ueber die Einfahrschwelle -> von vorn In der Aufzeichnung sind das 54 Klassenwechsel in neun Sekunden. Keine Hysterese haette das aufgehalten: Der Sprung, den die Bewegung selbst ausloest, ist genauso gross wie der Abstand der beiden Schwellen. Ein Kopf, dessen Hoehe sich aendert, waehrend er im Fluss steht, ist die falsche Konstruktion — nicht die falschen Zahlen. Nebenbei erklaert das die feste `-73px` im alten WPCode-Schnipsel: Dort war dieselbe Loesung schon einmal gebaut, nur mit einer Zahl statt einer gemessenen Hoehe. --------------------------------------------------------------------------- */ .spfh-nav__list{ max-width:var(--spfh-max);margin:0 auto;padding:0 var(--spfh-pad); } .spfh-nav__list{ list-style:none; display:flex;align-items:stretch; } .spfh-mi{position:static;display:flex;align-items:stretch} .spfh-ma{ display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 16px; white-space:nowrap;color:var(--spfh-muted); font:700 15px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.06em;text-transform:uppercase; border-bottom:2px solid transparent; transition:color var(--spfh-t) ease,border-color var(--spfh-t) ease; } @media (hover:hover){ .spfh-ma:hover{color:var(--spfh-sig-text)}} /* --------------------------------------------------------------------------- Ein Menuepunkt als Knopf Der Ersatzteilkatalog ist der Kern des Shops und soll sich von den uebrigen Punkten abheben: Umriss statt Flaeche, gefuellt beim Zeigen. Welcher Punkt es ist, entscheidet die CSS-Klasse `spfh-knopf` am Menuepunkt im Backend. Ist keine gesetzt, nimmt die erste Regel den ersten Punkt — `:not(:has(...))` sorgt dafuer, dass die Vorgabe zurueckweicht, sobald die Auszeichnung irgendwo im Menue auftaucht. So laesst sich der Knopf umhaengen, ohne dass er doppelt erscheint. --------------------------------------------------------------------------- */ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma, .spfh-mi--knopf > .spfh-ma{ align-self:center;box-sizing:border-box; min-height:34px;padding:0 15px;margin-right:6px; /* Kante in der Signaturfarbe: bei KTM Orange, bei Husqvarna das CI-Blau im hellen und Gelb im dunklen Modus. `box-sizing` haelt die Hoehe bei 34 px, unabhaengig von der Rahmenstaerke. Flaeche und Schrift stehen als Tokens bei den Farbebenen oben — hell voll gefuellt wie die Buttons des Shops, dunkel als Umriss mit Tonung. `position` und `isolation` tragen den Glanzwischer weiter unten: Ohne eigenen Stapelkontext rutscht ein Pseudoelement mit `z-index:-1` hinter den Elternhintergrund und ist unsichtbar. Dieselbe Begruendung wie in spf-buttons.css, Abschnitt 1.2. `color-mix` faellt bei sehr alten Browsern einfach aus — dann steht der Knopf ohne Tonung da. Kein kaputter Zustand. */ position:relative;overflow:hidden;isolation:isolate; border:1px solid var(--spfh-sig); background:var(--spfh-knopf-flaeche); border-radius:var(--btn-radius,10px); color:var(--spfh-knopf-text); transition:color var(--spfh-t) ease,background var(--spfh-t) ease,border-color var(--spfh-t) ease; } @media (hover:hover){ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma:hover, .spfh-mi--knopf > .spfh-ma:hover{ background:var(--spfh-knopf-flaeche-h); border-color:var(--spfh-knopf-flaeche-h); /* Dasselbe Token wie im Ruhezustand: Die Flaeche wird beim Zeigen nur abgedunkelt, sie wechselt nicht die Seite. Stand hier vorher `--spfh-sig-ink`, sprang die Schrift bei KTM beim Zeigen von hell auf dunkel. */ color:var(--spfh-knopf-text); }} /* Glanzwischer in beiden Modi — der Knopf ist ueberall gefuellt und hat damit eine Flaeche, ueber die der Streifen laufen kann. Nachgebaut aus spf-buttons.css 1.6, mit denselben Werten: 105 Grad, 550 ms, dieselbe Beschleunigung. Die Deckung steht in `--spfh-knopf-sheen` und nicht im `--btn-sheen` des Buttonsystems: Auf dem Husqvarna-Gelb muss der Streifen dunkel sein, sonst ist er hell auf hell und praktisch unsichtbar. Es ist ein `::before`, weil `::after` hier schon den Doppelpfeil traegt. Deshalb liegt der Streifen im Quelltext auch vor dem Pfeil — an der Anzeige aendert das nichts, `z-index:-1` haelt ihn unter der Schrift. */ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma::before, .spfh-mi--knopf > .spfh-ma::before{ content:""; position:absolute;inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 30%,var(--spfh-knopf-sheen,rgba(255,255,255,.28)) 48%,transparent 66%); transform:translateX(-120%); transition:transform .55s cubic-bezier(.2,.7,.3,1); } @media (hover:hover){ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma:hover::before, .spfh-mi--knopf > .spfh-ma:hover::before{transform:translateX(120%)}} /* WCAG 2.3.3 — dieselbe Abschaltung wie im Buttonsystem. */ @media (prefers-reduced-motion:reduce){ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma::before, .spfh-mi--knopf > .spfh-ma::before{transition:none;display:none} } /* Doppelpfeil wie im Fusszeilen-Verweis auf Marken und Modelle (spf-footer.css:181). Dort wie hier ein Schriftzeichen statt eines Symbols — es sitzt in derselben Zeile wie der Text und braucht keine Ausrichtung. Als `::after` gesetzt und nicht ins Markup geschrieben, damit es genau der Auswahl oben folgt: Haengt der Knopf per `spfh-knopf` an einem anderen Punkt, wandert der Pfeil ohne Zutun mit. */ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma::after, .spfh-mi--knopf > .spfh-ma::after{ content:"\00BB"; /* Feste Schriftkette statt der Hausschrift: In Helvetica Neue (Husqvarna) steht das Zeichen deutlich weicher und duenner als in Blender Pro, mit dem es bei KTM rendert. Vorgabe Kili — ueberall die KTM-Form, die Farbe bleibt markenabhaengig. `font-weight` ist ausgeschrieben und nicht geerbt: Von Blender Pro liegt nur der 700er-Schnitt auf dem Server. Erbt das Zeichen einen anderen Wert, faellt es lautlos auf Oswald zurueck und sieht wieder anders aus. */ font-family:'Blender Pro',Oswald,system-ui,sans-serif; font-weight:700; font-size:1.15em;line-height:1; /* Hell steht der Pfeil auf der gefuellten Flaeche und traegt deshalb die Schriftfarbe — in der Signaturfarbe waere er auf ihr selbst unsichtbar. */ color:var(--spfh-knopf-pfeil); transition:transform .18s ease,color var(--spfh-t) ease; } @media (hover:hover){ .spfh-nav__list:not(:has(.spfh-mi--knopf)) > .spfh-mi:first-child > .spfh-ma:hover::after, .spfh-mi--knopf > .spfh-ma:hover::after{ color:var(--spfh-knopf-pfeil); transform:translateX(3px); }} /* Schrift ueber das Text-Token, der Unterstrich ueber die volle Marke: Er ist eine Flaeche und faellt unter 1.4.11 (3:1), nicht unter 1.4.3. */ .spfh-mi.is-offen .spfh-ma{color:var(--spfh-sig-text);border-bottom-color:var(--spfh-sig)} .spfh-ma__z{width:13px;height:13px;stroke-width:2.2;opacity:.55;transition:transform var(--spfh-t) ease} .spfh-mi.is-offen .spfh-ma__z{transform:rotate(180deg);opacity:1} .spfh-neu{ font:700 10.5px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.12em;text-transform:uppercase; background:var(--spfh-sig);color:var(--spfh-sig-ink); padding:5px 9px;border-radius:999px; } /* Klappe */ .spfh-pop{ position:absolute;left:0;right:0;top:100%;z-index:50; background-color:var(--spfh-pop); background-image: linear-gradient(var(--spfh-raster-linie) 1px,transparent 1px), linear-gradient(90deg,var(--spfh-raster-linie) 1px,transparent 1px); background-size:var(--spfh-raster) var(--spfh-raster); border-top:1px solid var(--spfh-linie); border-bottom:1px solid var(--spfh-linie); opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .2s var(--spfh-e),transform .2s var(--spfh-e),visibility .2s; } .spfh-mi.is-offen .spfh-pop{opacity:1;visibility:visible;transform:none} /* --------------------------------------------------------------------------- Wechsel zwischen zwei Menuepunkten — Bewegung ohne Durchblitzen --------------------------------------------------------------------------- Rueckweg: diesen Block loeschen und `#ktmps-header.spfh--sofort .spfh-pop {transition:none}` stehen lassen. Dann wechselt es hart, wie am 13.08.2026 zwischendurch. Der Kasten selbst blendet beim Wechsel nicht — sonst stehen beide Klappen fuer einen Moment bei halber Deckkraft und man sieht durch beide hindurch. Er springt deckend um; die Bewegung macht allein sein Inhalt. Damit dabei nicht die alte Klappe oben liegt, hebt die offene ihren z-index: Ohne das entscheidet die Reihenfolge im Markup, und beim Wechsel nach links waere die verschwindende Klappe die obere. --------------------------------------------------------------------------- */ #ktmps-header.spfh--sofort .spfh-pop{transition:none} .spfh-mi.is-offen .spfh-pop{z-index:51} @keyframes spfh-ein-r{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}} @keyframes spfh-ein-l{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}} #ktmps-header.spfh--von-r .spfh-mi.is-offen .spfh-eb1{animation:spfh-ein-r .24s var(--spfh-e)} #ktmps-header.spfh--von-l .spfh-mi.is-offen .spfh-eb1{animation:spfh-ein-l .24s var(--spfh-e)} .spfh-pop__in{max-width:var(--spfh-max);margin:0 auto;padding:0 var(--spfh-pad)} .spfh-eb{display:none} .spfh-eb.is-on{display:block;animation:spfh-auf .18s var(--spfh-e)} @keyframes spfh-auf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .spfh-eb1{padding:20px 0 22px} .spfh-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:8px} .spfh-zelle{ /* Flacher seit dem Wegfall der zweiten Zeile unter dem Titel: 64 statt 76 px, Polsterung 10 statt 12. Bei 42 px Bild bleiben 11 px Luft nach oben und unten — die Kachel steht damit auf der Bildhoehe, nicht darueber. */ display:flex;align-items:center;gap:12px;padding:10px 13px;min-height:64px; border-radius:14px;background:var(--spfh-zelle); /* Sichtbarer Rahmen statt `transparent`: Auf der dunklen Flaeche standen die Kategorien sonst als Textblock ohne erkennbare Grenzen (Vorgabe Kili, 13.08.2026). */ border:1px solid var(--spfh-linie-2); transition:background var(--spfh-t) ease,border-color var(--spfh-t) ease,transform .18s ease; } @media (hover:hover){ .spfh-zelle:hover{background:var(--spfh-zelle-h);border-color:var(--spfh-onink);transform:translateY(-2px)}} .spfh-zelle__b{ width:42px;height:42px;flex:none;background:#eceef0;border-radius:9px; display:flex;align-items:center;justify-content:center;overflow:hidden; } #ktmps-header .spfh-zelle__b img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .spfh-zelle__b--leer{background:rgba(255,255,255,.07)} .spfh-zelle__b--leer span{ font:700 11px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.06em;color:var(--spfh-faint); } .spfh-zelle__t{min-width:0;display:flex;align-items:center} .spfh-zelle__n{ display:block; font:700 14px/1.3 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.05em;text-transform:uppercase;color:var(--spfh-ink); transition:color var(--spfh-t) ease; overflow-wrap:break-word;hyphens:none; /* Ohne die Zeile darunter stehen jetzt bis zu drei Zeilen Titel zur Verfuegung, statt einer knappen. */ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; } /* Ebene 2 — erst auf Klick. Zwischenzeitlich entfernt und am 13.08.2026 zurueckgeholt (Kili). Was NICHT zurueckkam, ist die Textzeile „x Unterkategorien" unter dem Kacheltitel: Den Platz braucht der Titel. Statt ihrer steht ein Winkel am rechten Rand der Kachel — er sagt dasselbe und kostet keine Zeile. */ .spfh-zelle__w{ flex:none;width:15px;height:15px;margin-left:auto; stroke-width:2.2;color:var(--spfh-faint); transition:color var(--spfh-t) ease,transform .18s ease; } @media (hover:hover){ .spfh-zelle:hover .spfh-zelle__w{color:var(--spfh-sig-text);transform:translateX(2px)}} /* Ebene 2 — erst auf Klick */ .spfh-eb2{padding:16px 0 22px} .spfh-zurueck{ display:inline-flex;align-items:center;gap:9px;min-height:44px; padding:0 16px 0 12px;margin:0 0 16px -12px;border-radius:999px; color:var(--spfh-muted); font:700 12px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.07em;text-transform:uppercase; transition:color var(--spfh-t) ease,background var(--spfh-t) ease; } @media (hover:hover){ .spfh-zurueck:hover{color:var(--spfh-ink);background:rgba(255,255,255,.06)}} .spfh-zurueck .spfh-i{width:15px;height:15px;stroke-width:2.2;transform:rotate(180deg)} .spfh-eb2__k{display:flex;align-items:center;gap:14px;margin:0 0 18px} .spfh-eb2__b{ width:60px;height:60px;flex:none;background:#eceef0;border-radius:12px; display:flex;align-items:center;justify-content:center;overflow:hidden; } .spfh-eb2__b img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .spfh-eb2__b--leer{background:rgba(255,255,255,.07)} .spfh-eb2__h{ font:800 clamp(19px,2vw,24px)/1.12 var(--spf-brand-head,'Blender Heavy',system-ui,sans-serif); letter-spacing:-.012em;text-transform:uppercase;margin:0;color:var(--spfh-ink); } .spfh-eb2__p{ margin:4px 0 0;color:var(--spfh-faint); font:400 13.5px/1 var(--spf-brand-sans,'Roboto Condensed Regular',system-ui,sans-serif); } .spfh-eb2__alle{margin-left:auto} .spfh-cols{ display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,286px));gap:8px; width:fit-content;max-width:100%; } .spfh-sl{ display:flex;align-items:center;min-height:54px;padding:0 16px; color:var(--spfh-muted); font:400 15px/1.3 var(--spf-brand-sans,'Roboto Condensed Regular',system-ui,sans-serif); overflow-wrap:break-word;border-radius:12px; background:var(--spfh-zelle);border:1px solid transparent; transition:background var(--spfh-t) ease,color var(--spfh-t) ease,border-color var(--spfh-t) ease; } @media (hover:hover){ .spfh-sl:hover{background:var(--spfh-zelle-h);border-color:var(--spfh-linie-2);color:var(--spfh-ink)}} .spfh-pop__f{ display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding:14px 0 18px;border-top:1px solid var(--spfh-linie); } .spfh-mehr{ display:inline-flex;align-items:center;color:var(--spfh-ink); font:700 12px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.07em;text-transform:uppercase; border-bottom:2px solid var(--spfh-sig);padding-bottom:3px; } /* --------------------------------------------------------------------------- Schubkasten --------------------------------------------------------------------------- */ .spfh-mob{ position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column; background:var(--spfh-flaeche);color:var(--spfh-ink); } .spfh-mob[hidden]{display:none} .spfh-mob__t{ display:flex;align-items:center;height:60px;padding:0 var(--spfh-pad); border-bottom:1px solid var(--spfh-linie-2); } .spfh-mob__t span{ font:700 11px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.14em;text-transform:uppercase;color:var(--spfh-muted); } .spfh-mob__x{margin-left:auto} /* Eine Leiste fuer die drei Wege: Suche, Konto, Garage. Die Suche nimmt den Platz, der uebrig bleibt — sie ist die haeufigste Handlung, aber nicht die einzige, und stand allein in einer eigenen Zeile zu prominent da. */ .spfh-mob__s{ display:flex;align-items:center;gap:8px; padding:12px var(--spfh-pad);border-bottom:1px solid var(--spfh-linie-2); } .spfh-mob__s .spfh-sf--mob{flex:1 1 auto;min-width:0} .spfh-mob__w{ flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; width:64px;height:48px;border-radius:12px; border:1px solid var(--spfh-linie-2); color:var(--spfh-muted); font:700 9.5px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.07em;text-transform:uppercase; transition:color var(--spfh-t) ease,border-color var(--spfh-t) ease; } .spfh-mob__w .spfh-i{width:19px;height:19px} @media (hover:hover){ .spfh-mob__w:hover{color:var(--spfh-ink);border-color:var(--spfh-onink)}} .spfh-sf--mob{ height:48px;border:1px solid var(--spfh-linie-2);border-radius:12px; padding:0 14px;gap:11px; } .spfh-sf--mob:focus-within{border-color:var(--spfh-sig);border-bottom-width:1px} .spfh-mob__l{flex:1;overflow-y:auto;padding:4px 0 20px;-webkit-overflow-scrolling:touch} .spfh-mob__a{ /* `width:100%` und `text-align:left`, weil die Punkte mit Unterpunkten `