/** * Betriebsstoff-Hinweis in der Suche. * * Nur was es noch nicht gibt. Zeilen, Kopfzeilen und Vorschaubilder erben von * .spflh2-* aus spf-landing-hero-v2.css -- hell wie dunkel bereits abgestimmt. * * FARBEN: ausschliesslich ueber die Marken-Token. --brand-accent ist auf KTM * orange, auf Husky blau; ein fester Hexwert waere auf einem der beiden Shops * falsch. Wo ein Token fehlen kann, steht ein Rueckfall daneben. * * RUNDUNGEN: Das Theme setzt border-radius global auf 0 !important. Neue * Bauteile brauchen darum eine eigene Zeile im Block ganz unten, sonst sind sie * eckig, waehrend alles um sie herum rund ist. */ /* ----------------------------------------------------------------------- Der Block muss fuer sich allein stehen. Erster Entwurf verliess sich darauf, dass .spflh2-zeile und .spflh2-thumb bereits gestaltet sind. Auf der Landingpage stimmte das -- auf der Suchergebnisseite nicht: spf-landing-hero-v2.css wird dort gar nicht geladen, und der Block stand mit Vorschaubildern in Originalgroesse untereinander statt in Zeilen. Am 25.08.2026 im Live-Test aufgefallen. Darum sind die Zeilenregeln hier noch einmal ausgeschrieben, eng auf .bsobs-hinweis begrenzt. Wo das Hero-CSS mitlaeuft, gewinnen diese Regeln (zwei Klassen gegen eine) -- sie sind deshalb wertgleich gehalten. ----------------------------------------------------------------------- */ .bsobs-hinweis .spflh2-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--lh2-ink, inherit); } @media (hover:hover){ .bsobs-hinweis .spflh2-zeile:hover{ background: var(--lh2-pille, rgba(0, 0, 0, .05)); }} .bsobs-hinweis .spflh2-zeile > span:not(.rechts):not(.spflh2-thumb) { flex: 1; min-width: 0; } .bsobs-hinweis .spflh2-zeile .rechts { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lh2-muted, #6b6357); } .bsobs-hinweis .spflh2-thumb { flex: none; box-sizing: border-box; width: 40px; height: 40px; object-fit: contain; background: var(--lh2-buehne, #fff); border-radius: 6px; padding: 2px; } .bsobs-hinweis .spflh2-preis { font-weight: 600; color: var(--lh2-ink, inherit); font-variant-numeric: tabular-nums; } .bsobs-hinweis .spflh2-sku { font-variant-numeric: tabular-nums; white-space: nowrap; } .bsobs-hinweis .spflh2-kopfzeile { padding: 10px 14px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .bsobs-hinweis { padding: 4px 0 10px; border-bottom: 1px solid var(--lh2-line, rgba(0, 0, 0, .08)); margin-bottom: 4px; } .bsobs-kopf { color: var(--o-text, var(--brand-accent, #ff6600)); } .bsobs-vorgabe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 14px 6px; } .bsobs-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lh2-muted, #6b6357); } /* Die Vorgabe ist die Aussage, auf die es ankommt — sie darf nicht wie ein Beiwerk aussehen. Tabellenziffern, damit 10W/50 und 5W/40 gleich breit sind. */ .bsobs-pille { display: inline-block; padding: 3px 10px; border-radius: 3px; background: var(--brand-accent-weich, rgba(255, 102, 0, .12)); color: var(--o-text, var(--brand-accent, #ff6600)); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .bsobs-pille--leer { background: var(--lh2-pille, rgba(0, 0, 0, .05)); color: var(--lh2-muted, #6b6357); font-weight: 500; } .bsobs-zusatz { padding: 0 14px 6px; font-size: 12.5px; line-height: 1.4; color: var(--lh2-muted, #6b6357); } /* Uneindeutige Angabe: Die Anleitung nannte zwei Oele verschiedener Bauart. Deutlicher als die uebrigen Zusatzzeilen, weil der Kunde hier nicht weiterlesen, sondern ins Handbuch sehen soll. Volle Textfarbe statt --lh2-muted; die Markenfarbe traegt nur die Flaeche, nie die Schrift (Kontrast, und Husky ist nie orange). */ .bsobs-zusatz--warn { color: var(--lh2-ink, #101112); margin: 0 14px 8px; padding: 7px 10px; border-radius: 8px; /* Ruhige Flaeche, die Marke traegt die Kontur (Kili, 02.09.2026). Vorher eine zu 9 Prozent verduennte Markenflaeche — auf KTM ein blasses Pfirsich. */ background: var(--bsb-hover, #f5f5f6); border: 1px solid var(--o-text, var(--brand-accent, #ff6600)); } .bsobs-luecke { color: var(--spf-warn, #9c4a2f); } .bsobs-alt-kopf { padding: 4px 14px 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lh2-muted, #6b6357); } .bsobs-artikel { text-decoration: none; color: inherit; } .bsobs-nicht-lagernd { margin-left: 8px; font-size: 12px; color: var(--lh2-muted, #6b6357); } /* Der Beleg macht aus einer Behauptung eine nachprüfbare Angabe. Er steht bewusst klein und zuletzt — gebraucht wird er selten, fehlen darf er nie. */ .bsobs-beleg { padding: 2px 14px 0; font-size: 11.5px; color: var(--lh2-muted, #6b6357); opacity: .85; } @media (max-width: 560px) { .bsobs-vorgabe { gap: 6px; } .bsobs-label { width: 100%; } } /* RUNDUNGEN ERZWINGEN — siehe Kopfkommentar. */ .bsobs-pille { border-radius: 3px !important; } .bsobs-hinweis .spflh2-zeile { border-radius: 9px !important; } .bsobs-hinweis .spflh2-thumb { border-radius: 6px !important; } /* --------------------------------------------------------------------------- Der Block im Megamenue (02.09.2026) --------------------------------------------------------------------------- Steht unter „Oele, Pflege und Reifen" in der Klappe des Kopfbereichs und uebernimmt deren Formensprache: dieselbe Flaeche und derselbe Rahmen wie eine Kategoriekachel (`.spfh-zelle`), dasselbe Bildfeld von 42 px, dieselbe Schrift fuer die Ueberschrift. Er soll wie eine breite Kachel wirken, nicht wie ein fremder Kasten. Die Token kommen aus kopf.css und tragen die Markenfarbe: Bei KTM ist `--spfh-sig-text` orange, bei Husqvarna gelb im Dunkelmodus. Nichts hier nennt eine Farbe beim Namen -- die Regel „neue Flaeche immer je Marke bauen" ist damit erfuellt, ohne sie zweimal zu schreiben. -------------------------------------------------------------------------- */ /* Die Abstaende sind bewusst ungleich, und beide sind gemessen: OBEN eng. Der erste Versuch stellte die Karte mit 39 px unter die Kacheln; sie stand dadurch als eigener Block da, nicht als Teil derselben Klappe — „ist zu weit von den anderen Kategorien weg" (Kili, 02.09.2026). Jetzt sind es 21 px inklusive Trennlinie. Die Linie bleibt: Sie sagt, dass hier etwas anderes anfaengt, und kostet keinen Platz. UNTEN reicht die Ebene selbst. Seit der Zusatz INNERHALB von `.spfh-eb1` steht, liegen deren 22 px hinter der Karte statt davor; ein eigener Rand kaeme obendrauf und triebe die Klappe wieder auf. Gemessen sind es damit 69 px bis zur Klappenkante — dieselbe Groessenordnung wie vorher, als der Abstand zuletzt gepasst hat. */ .bsobs-mega{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--spfh-linie)} .bsobs-mega[hidden]{display:none} /* Der Einstieg in den Betriebsstoff-Finder, als eigener Bereich unter den Kategoriekacheln. WAS ER SEIN SOLL (Vorgabe Kili, 02.09.2026): eine Ansage, kein Regal. Die Vorstufen listeten auf — erst sechs Pillen mit den Vorgaben des Fahrzeugs, dann sechs Kacheln je Betriebsstoffart. Beides scheitert am selben Punkt: Eine Liste ist immer unvollstaendig, und wer etwas sucht, das nicht darin steht, klickt nicht. „Ein Kunde, der etwas anderes sucht, geht dadurch vielleicht nicht drauf." Also nennt die Karte nur zwei Dinge, und beide gelten fuer alles, was dahinter liegt: Die Angabe stammt aus der Bedienungsanleitung, und was danach kommt, passt bereits zum Modell. Form, Rahmen und Radius sind die der Kategoriekachel (`.spfh-zelle`) — groesser sind nur Hoehe, Bildfeld und Schrift. Erkennbar dieselbe Familie, aber die Hauptsache im Bereich. */ .bsobs-mega__karte{ display:flex;align-items:center;gap:18px; min-height:92px;padding:16px 18px; border-radius:14px; /* `--spfh-zelle-voll`, nicht `--spfh-zelle`: Die Kategoriekacheln daneben stehen seit dem 02.09.2026 auf einer DECKENDEN Flaeche (`#ktmps-header.spfh .spfh-zelle{background:var(--spfh-zelle-voll)}`), nicht auf der Toenung. Mit der Toenung schien das Raster der Klappe durch die Karte, waehrend die Kacheln darueber deckend standen — derselbe Bereich, zwei verschiedene Flaechen (Kili). */ background:var(--spfh-zelle-voll,#ffffff); border:1px solid var(--spfh-linie-2,rgba(0,0,0,.17)); text-decoration:none;color:inherit; transition:background .15s ease,border-color .15s ease,transform .18s ease; } @media (hover:hover){ .bsobs-mega__karte:hover{ background:var(--spfh-zelle-voll-h,#f4f5f6); border-color:var(--spfh-sig,#ff6600); transform:translateY(-2px); } } .bsobs-mega__karte:focus-visible{outline:2px solid var(--spfh-sig,#ff6600);outline-offset:2px} /* Das Lupenfeld traegt die Rolle des Kachelbildes — gleiche Form, groesser. Markenton statt des hellen Bildgrunds: Hier steht kein Produkt, sondern der Weg zu einem. */ .bsobs-mega__i{ width:60px;height:60px;flex:none;border-radius:13px; display:flex;align-items:center;justify-content:center; /* Vollton statt 14 Prozent (Kili, 02.09.2026). `--spfh-sig-ink` ist die Schrift, die der Kopfbereich fuer die volle Markenflaeche schon fuehrt: dunkel auf KTM-Orange, weiss auf Husqvarna-Blau. */ background:var(--spfh-sig,#ff6600); } .bsobs-mega__i svg{ width:30px;height:30px;fill:none;stroke:var(--spfh-sig-ink,#101112); stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } .bsobs-mega__t{flex:1;min-width:0;display:block} .bsobs-mega__h{ display:block;margin:0; font:700 17px/1.25 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.04em;text-transform:uppercase;color:var(--spfh-ink,#101112); } /* Der Fahrzeugname in der Markenfarbe. Er ist der Funnel: „hier steht etwas ueber MEIN Motorrad", bevor irgendjemand einen Satz gelesen hat. */ .bsobs-mega__bike{color:var(--spfh-sig-text,#ff6600)} .bsobs-mega__punkte{display:flex;flex-wrap:wrap;gap:6px 20px;margin:8px 0 0} .bsobs-mega__punkt{ display:inline-flex;align-items:center;gap:7px; font-size:12.5px;color:var(--spfh-muted,#4d5157); } .bsobs-mega__punkt svg{ width:14px;height:14px;flex:none;fill:none;stroke:var(--spfh-ok,#1e9e4a); stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round; } .bsobs-mega__cta{ flex:none;padding:12px 18px;border-radius:10px; background:var(--spfh-sig,#ff6600);color:var(--spfh-knopf-text,#fff); font:700 12.5px/1 var(--spf-brand-cond,'Blender Pro',system-ui,sans-serif); letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; display:inline-flex;align-items:center;gap:9px; } /* Der Doppelpfeil wie im Fussbereich und am Katalog-Knopf: feste Schriftkette, weil das Zeichen in Helvetica Neue (Husqvarna) sonst weicher steht als bei KTM, und `font-weight` ausgeschrieben, weil von Blender Pro nur der 700er-Schnitt auf dem Server liegt. */ .bsobs-mega__cta span{ font-family:'Blender Pro',Oswald,system-ui,sans-serif;font-weight:700; font-size:1.15em;line-height:1; transition:transform .18s ease; } @media (hover:hover){ .bsobs-mega__karte:hover .bsobs-mega__cta span{transform:translateX(3px)} } /* Auf schmalen Klappen bricht die Zeile: Knopf unter den Text statt daneben. */ @media (max-width:860px){ .bsobs-mega__karte{flex-wrap:wrap} .bsobs-mega__cta{width:100%;justify-content:center} } @media (prefers-reduced-motion:reduce){ .bsobs-mega__karte,.bsobs-mega__cta span{transition:none} } /* --------------------------------------------------------------------------- Der Hinweis in der KOPFSUCHE. Der Block wird jetzt an drei Stellen gezeichnet: Landing-Hero, Suchergebnisseite und Kopfsuche. Die Ueberschrift traegt `spflh2-kopfzeile`, und die Klasse gibt es nur im Hero-CSS — in der Kopfsuche stuende sie sonst unformatiert da. `.bsobs-kopf` macht sie unabhaengig davon. Der Kopf ist die engste der drei Stellen: Auf 390 px geht die Kopfzeile EXAKT auf. Die Ueberschrift bricht deshalb um, statt die Ebene zu weiten. -------------------------------------------------------------------------- */ .bsobs-hinweis .bsobs-kopf { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; overflow-wrap: anywhere; /* lange Modellnamen dehnen die Ebene sonst */ /* AKZENTFARBE (Kili, 02.09.2026) — aber NICHT --spf-brand. Die Ueberschrift ist Text in Normalgroesse (11,5-12,5 px), also gilt 4,5:1. Am 02.09.2026 auf beiden Shops gemessen, gegen den tatsaechlich gemalten Grund (der Kartengrund ist halbtransparent, seine eigene Farbe sagt nichts): hell #f4f5f6 dunkel #0f1011 KTM --spf-brand 2,69 X 6,49 --spf-brand-text 4,50 OK 3,88 X --spf-brand-text-l 2,82 X 6,18 --spf-brand-night 2,69 X 6,49 OK Husky --spf-brand-text 10,34 OK 1,69 X --spf-brand-night 1,11 X 15,75 OK Es gibt also KEINEN Wert, der in beiden Modi traegt — und auf Husky faellt ausgerechnet --spf-brand-text-l im Dunkeln auf 1,69, weil die Palette dort alle drei Textwerte auf das Dunkelblau #273a60 legt. Deshalb zwei Regeln: hell die Textfassung, dunkel die Nachtfassung. */ /* --spf-brand-text-3 gibt es nur auf KTM (Markenpaket, Schluessel `extra`): #f06000, derselbe Farbton wie das Markenorange, 3,016:1 auf #f4f5f6 — Kilis ausdrueckliche Wahl gegen die 4,5:1-Fassung #c24a00, die kaum noch orange wirkte — sie ist seit dem 04.09.2026 aus dem ganzen Shop entfernt (Kili) wirkt. Auf Husky fehlt die Variable, dort greift der Rueckfall: Dunkelblau mit 10,34:1. Husky wird nie orange. */ color: var(--spf-brand-text-3, var(--spf-brand-text, #f96300)); } body.spf-night .bsobs-hinweis .bsobs-kopf { color: var(--spf-brand-night, #ff6600); } /* In der Kopfsuche sitzt der Block in einem eigenen Behaelter. Ohne die Trennlinie liefe er optisch in die Artikelliste darunter. */ [data-kopf-bsobs] .bsobs-hinweis { border-bottom: 1px solid var(--spfh-linie-2, rgba(255,255,255,.10)); padding-bottom: 6px; margin-bottom: 2px; } /* =========================================================================== Auf der SUCHERGEBNISSEITE als Karte (Kili, 02.09.2026). Dort steht der Hinweis ganz oben, über der Trefferliste, und hat die volle Seitenbreite zur Verfügung. Als lose Zeilenfolge zerfiel er in vier gleichrangige Zeilen — Kopfzeile, Vorgabe, Artikel, Quelle — und der Artikel, um den es geht, hob sich von nichts ab. Als Karte bekommt er eine Kante: Überschrift außerhalb, Artikel als Inhalt, Quelle klein darunter. Und weil zwei Betriebsstoffe (Gabelöl und Motoröl) nebeneinander passen, statt untereinander die halbe Seite zu füllen, liegen sie in einem Raster. NUR HIER. Kopfsuche und Landing-Hero bleiben Zeilenlisten — dort ist der Block ein Eintrag unter anderen in einer schmalen Ebene, und eine Karte wäre dort falsch. Gleich ist, WAS beide zeigen, nicht wie breit sie es zeigen. =========================================================================== */ .spfsr-bsobs { display: grid; /* min() verhindert den Überlauf: Eine reine minmax(22rem,1fr)-Spalte ist auf schmalen Geräten breiter als der Behälter. Und nie 1fr allein — eine 1fr-Spalte wächst mit ihrem längsten Kind, siehe Projektregel. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 14px; margin: 14px 0 18px; } .spfsr-bsobs .bsobs-hinweis { display: flex; flex-direction: column; min-width: 0; padding: 4px 14px 12px; border: 1px solid var(--spfh-linie-2, rgba(128,128,128,.28)); border-radius: 12px !important; /* Theme setzt radius global auf 0 */ background: var(--lh2-pille, rgba(128,128,128,.06)); } /* Die Überschrift trägt die Karte — sie sagt, worum es geht („GABELÖL FÜR DEINE 450 SX-F 2011"). Etwas größer als die Kopfzeile in der schmalen Ebene, aber weiter in Versalien: Sie ist ein Label, keine Seitenüberschrift. */ .spfsr-bsobs .bsobs-kopf { padding: 10px 0 8px; font-size: 12.5px; line-height: 1.35; border-bottom: 1px solid var(--spfh-linie-2, rgba(128,128,128,.20)); margin-bottom: 6px; } /* Der Artikel ist der Inhalt der Karte und darf sich das nehmen. */ .spfsr-bsobs .bsobs-hinweis .spflh2-zeile { padding: 8px 0; min-height: 44px; /* Mindestgröße für Zeigegeräte und Finger */ } /* Die Quelle steht klein darunter und schließt die Karte ab. */ .spfsr-bsobs .bsobs-beleg { margin-top: auto; padding-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--spfh-faint, #8a8f94); }