/* ========================================================================= SPF GARAGE HUB · Helle, vereinheitlichte Garage (Drawer) + Fitment ------------------------------------------------------------------------ Neuer, sauber benannter Presentation-Layer. Editiert NICHT spf-garage.css. - Drawer (#spf-gpanel) = Single Source zum Wechseln/Hinzufuegen. - Fitment (Produkt-Badge, Kategorie-Leiste) in einheitlicher heller Sprache. - Finder-Sprache (spf-schritt5-hell): Orange var(--spf-brand, #ff6600), heller BG, Blender Pro. - px statt rem (62,5%-Root). Defensiv gegen Theme-Resets (border-radius:0 !important / margin-reset) via ID-Scope + !important. ========================================================================= */ /* Blender Pro lokal (DSGVO, keine Google Fonts). Deckungsgleich mit spf-step5-v2. */ @font-face{font-family:'Blender Pro';src:url('../fonts/blender-pro/BlenderPro-Medium.woff2') format('woff2'),url('../fonts/blender-pro/BlenderPro-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Blender Pro';src:url('../fonts/blender-pro/BlenderPro-Bold.woff2') format('woff2'),url('../fonts/blender-pro/BlenderPro-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Blender Pro';src:url('../fonts/blender-pro/BlenderPro-Heavy.woff2') format('woff2'),url('../fonts/blender-pro/BlenderPro-Heavy.woff') format('woff');font-weight:800;font-style:normal;font-display:swap} /* ------------------------------------------------------------------------- Design-Tokens (auf allen Hub-Wurzeln gesetzt) ------------------------------------------------------------------------- */ /* #spf-gside (Floating-FAB) MUSS hier mit drin stehen: Er liegt als eigenes fixed Element am body — also NICHT innerhalb von #spf-gpanel — und erbt die Tokens sonst nicht. Ohne ihn lösen seine `var(--spf-hub-card)`-Angaben ins Leere auf und der Chip wird durchsichtig. */ #spf-gpanel,#spf-gscrim,#spf-gside,.spf-fitbadge,.spf-fitbar{ --spf-hub-orange:var(--spf-brand, #ff6600); /* ROLLENTRENNUNG (11.09.2026): `-orange` traegt Flaechen mit eigener Schrift darauf, `-orange-text` traegt Schrift, Kanten und Icons und wird nachts zur Signatur. */ --spf-hub-orange-text:var(--spf-hub-orange); --spf-hub-orange-press:var(--spf-brand-press, #e25c00); --spf-hub-orange-soft:var(--spf-brand-soft, rgba(255,102,0,.08)); --spf-hub-ink:#16181c; --spf-hub-muted:#5b6270; --spf-hub-faint:#666d78; --spf-hub-line:#ececec; --spf-hub-line-strong:#e0e1e3; --spf-hub-border:#d7d9dc; --spf-hub-bg:#f4f5f6; --spf-hub-card:#ffffff; --spf-hub-hover:#f7f8f9; --spf-hub-ok:#22a447; --spf-hub-ok-soft:rgba(34,164,71,.1); --spf-hub-bad:#e0453c; --spf-hub-bad-soft:rgba(224,69,60,.1); /* Zweite Stufe des Warntons, fuer Flaechen mit weisser Schrift: --spf-hub-bad ist als Rahmen- und Icon-Farbe gedacht und traegt Weiss nur mit 4,13:1 — unter den 4,5:1, die Schrift dieser Groesse braucht. #b3261e kommt auf 6,54:1, #8f1e18 als gedrueckter Zustand auf 8,87:1. Gerechnet, nicht geschaetzt. --spf-hub-line-3 ist die Kante fuer Bedienelemente: die uebrigen Hairlines dieser Datei liegen bei 1,4:1 und reichen als BEGRENZUNG eines Knopfes nicht (WCAG 1.4.11 verlangt 3:1). Der Wert ist gegen BEIDE Untergruende gerechnet, auf denen er vorkommt — 3,45:1 auf der Karte (#ffffff) und 3,01:1 auf der Flaeche der Rueckfrage (10 % Rot ueber Weiss = #fcecec). Damit die dunkelste Kante im Panel, bewusst nur dort, wo sie einen Knopf ueberhaupt erst umreisst. */ --spf-hub-bad-strong:#b3261e; --spf-hub-bad-press:#8f1e18; --spf-hub-line-3:#848b93; --spf-hub-radius:12px; --spf-hub-shadow:0 1px 2px rgba(20,24,28,.04),0 8px 28px rgba(20,24,28,.06); --spf-hub-cond:var(--spf-brand-cond, 'Blender Pro','Oswald',system-ui,sans-serif); --spf-hub-sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --spf-hub-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ========================================================================= GARAGE-DRAWER (#spf-gpanel) — zentraler Hub ========================================================================= */ /* ⚠️ `backdrop-filter` NUR im offenen Zustand. Bis zum 09.09.2026 stand er auch am geschlossenen Scrim. `opacity:0` und `pointer-events:none` machen ihn zwar unsichtbar und durchlaessig — der Weichzeichner erzwingt aber trotzdem dauerhaft einen eigenen Compositing-Layer ueber der GANZEN Seite, mit z-index 100000 also auch ueber dem Kopf (9990). Befund Kili, 09.09.2026: Im Ersatzteilkatalog liess sich am iPhone das Logo nicht antippen, „die Icons rechts funktionieren, nur der Home Button nicht". Ein langer Druck zeigte das Kontextmenue mit huskypowershop.de — der Link war also erreichbar, nur der Tap kam nicht an. Der gemessene Unterschied erklaert das Muster: Die Symbole im Kopf stehen auf `position:relative` und bilden eigene Layer, das Logo auf `position:static`. Unter einem Backdrop-Layer verliert genau das die Treffer. */ #spf-gscrim{position:fixed;inset:0;z-index:100000;background:rgba(14,16,20,.45);opacity:0;pointer-events:none;transition:opacity .25s ease} #spf-gscrim.is-open{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} #spf-gpanel{position:fixed;top:0;right:0;bottom:0;z-index:100001;width:min(440px,100%);max-width:100%;background:var(--spf-hub-bg);box-shadow:-12px 0 40px rgba(14,16,20,.18);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.61,.36,1);visibility:hidden;font-family:var(--spf-hub-sans);color:var(--spf-hub-ink);font-size:15px;line-height:1.5;text-align:left} #spf-gpanel.is-open{transform:translateX(0);visibility:visible} #spf-gpanel *,#spf-gpanel *::before,#spf-gpanel *::after{box-sizing:border-box} #spf-gpanel button{font-family:inherit} body.spf-gpanel-open{overflow:hidden} /* Kopf */ #spf-gpanel .gpanel__head{display:flex;align-items:center;gap:12px;padding:18px 22px;background:var(--spf-hub-card);border-bottom:1px solid var(--spf-hub-line-strong);flex:none} #spf-gpanel .gpanel__head svg{width:26px;height:26px;stroke:var(--spf-hub-orange-text);fill:none;stroke-width:1.7;flex:none} #spf-gpanel .gpanel__title{margin:0;font-family:var(--spf-hub-cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:20px;line-height:1.1} #spf-gpanel .gpanel__close{margin-left:auto;width:44px;height:44px;border:1px solid var(--spf-hub-border)!important;border-radius:10px!important;background:var(--spf-hub-card);color:var(--spf-hub-ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s} @media (hover:hover){ #spf-gpanel .gpanel__close:hover{border-color:var(--spf-hub-orange-text);color:var(--spf-hub-orange-text)}} #spf-gpanel .gpanel__body{flex:1;overflow-y:auto;padding:20px 22px 26px;display:flex;flex-direction:column;gap:22px} #spf-gpanel .gpanel__sec-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--spf-hub-faint);margin:0 0 10px} #spf-gpanel section{margin:0} /* Aktives Fahrzeug — grosse Karte */ #spf-gpanel .gveh-active{position:relative;background:var(--spf-hub-card);border:1px solid var(--spf-hub-ok);border-left:4px solid var(--spf-hub-ok);border-radius:var(--spf-hub-radius)!important;padding:16px 18px;display:flex;gap:14px;align-items:center;box-shadow:var(--spf-hub-shadow)} #spf-gpanel .gveh-active__icon{width:44px;height:44px;flex:none;color:var(--spf-hub-orange-text)} #spf-gpanel .gveh-active__icon svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.5} /* Aktives Fahrzeug: echtes Modellbild (wie Schritt 3) statt Icon */ #spf-gpanel .gveh-active__img{width:76px;height:52px;flex:none;border-radius:8px!important;overflow:hidden;background:transparent;display:flex;align-items:center;justify-content:center} #spf-gpanel .gveh-active__img img{width:100%;height:100%;object-fit:contain;display:block} #spf-gpanel .gveh-active__img.is-fallback{color:var(--spf-hub-faint)} #spf-gpanel .gveh-active__img.is-fallback svg{width:38px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5} #spf-gpanel .gveh-active__txt{flex:1 1 auto;min-width:0} #spf-gpanel .gveh-active__remove{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border:0;border-radius:9px!important;background:none;color:var(--spf-hub-faint);font-size:20px;line-height:1;cursor:pointer;transition:background-color .15s,color .15s} @media (hover:hover){ #spf-gpanel .gveh-active__remove:hover{background:var(--spf-hub-bad-soft);color:var(--spf-hub-bad)}} #spf-gpanel .gveh-active__name{display:block;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;font-size:19px;letter-spacing:.02em;line-height:1.15} #spf-gpanel .gveh-active__meta{color:var(--spf-hub-muted);font-size:13px;margin-top:3px} #spf-gpanel .gveh-active__badge{position:absolute;top:-10px;right:14px;display:flex;align-items:center;gap:5px;background:var(--spf-hub-ok);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:999px!important;box-shadow:0 2px 8px rgba(34,164,71,.35)} #spf-gpanel .gveh-active__badge svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3} #spf-gpanel .gveh-empty{background:var(--spf-hub-card);border:1px dashed var(--spf-hub-border);border-radius:var(--spf-hub-radius)!important;padding:18px;color:var(--spf-hub-muted);font-size:13.5px;text-align:center} /* Gespeicherte Fahrzeuge */ #spf-gpanel .gveh-list{display:flex;flex-direction:column;gap:8px} #spf-gpanel .gveh{display:flex;align-items:center;gap:12px;background:var(--spf-hub-card);border:1px solid var(--spf-hub-line-strong);border-radius:var(--spf-hub-radius)!important;padding:6px 6px 6px 14px;transition:border-color .15s,box-shadow .15s} @media (hover:hover){ #spf-gpanel .gveh:hover{border-color:var(--spf-hub-orange-text);box-shadow:var(--spf-hub-shadow)}} #spf-gpanel .gveh__pick{flex:1;display:flex;align-items:center;gap:12px;min-height:44px;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--spf-hub-ink)} #spf-gpanel .gveh__radio{width:20px;height:20px;flex:none;border-radius:50%!important;border:2px solid var(--spf-hub-border);transition:border-color .15s} @media (hover:hover){ #spf-gpanel .gveh__pick:hover .gveh__radio{border-color:var(--spf-hub-orange-text)}} #spf-gpanel .gveh__thumb{width:52px;height:38px;flex:none;border-radius:7px!important;overflow:hidden;background:transparent;display:flex;align-items:center;justify-content:center} #spf-gpanel .gveh__thumb img{width:100%;height:100%;object-fit:contain;display:block} #spf-gpanel .gveh__thumb--sil,#spf-gpanel .gveh__thumb.is-fallback{color:var(--spf-hub-faint)} #spf-gpanel .gveh__thumb--sil svg,#spf-gpanel .gveh__thumb.is-fallback svg{width:30px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5} #spf-gpanel .gveh__name{display:block;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em;line-height:1.15} #spf-gpanel .gveh__meta{color:var(--spf-hub-muted);font-size:12.5px;margin-top:1px} #spf-gpanel .gveh__remove{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:0;border-radius:9px!important;background:none;color:var(--spf-hub-faint);font-size:19px;line-height:1;cursor:pointer;transition:background .15s,color .15s} @media (hover:hover){ #spf-gpanel .gveh__remove:hover{background:var(--spf-hub-bad-soft);color:var(--spf-hub-bad)}} /* Fahrzeug hinzufuegen */ #spf-gpanel .gadd{background:var(--spf-hub-card);border:1px solid var(--spf-hub-line-strong);border-radius:var(--spf-hub-radius)!important;overflow:hidden} #spf-gpanel .gadd__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--spf-hub-line);font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:15px} #spf-gpanel .gadd__head-t{display:inline-flex;align-items:center;gap:9px;min-width:0} #spf-gpanel .gadd__head svg{width:18px;height:18px;stroke:var(--spf-hub-orange-text);fill:none;stroke-width:2.4;flex:none} /* "Nur EU"-Toggle (identisch zur Schritt-3-Optik: Label + Pillen-Knopf, Orange=an). */ #spf-gpanel .gadd__eu{display:inline-flex;align-items:center;gap:8px;flex:none;border:0;background:none;padding:0;margin:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent} #spf-gpanel .gadd__eu-lbl{font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px;color:var(--spf-hub-muted);transition:color .2s} #spf-gpanel .gadd__eu-knob{position:relative;width:40px;height:22px;border-radius:14px!important;background:var(--spf-hub-line-strong);flex:none;transition:background-color .2s} #spf-gpanel .gadd__eu-knob::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%!important;background:var(--spf-hub-card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.22,.61,.36,1)} #spf-gpanel .gadd__eu.is-on .gadd__eu-knob{background:var(--spf-hub-orange)} #spf-gpanel .gadd__eu.is-on .gadd__eu-knob::after{transform:translateX(18px)} #spf-gpanel .gadd__eu.is-on .gadd__eu-lbl{color:var(--spf-hub-ink,#16181c)} #spf-gpanel .gadd__eu:focus-visible{outline:none} #spf-gpanel .gadd__eu:focus-visible .gadd__eu-knob{box-shadow:0 0 0 3px var(--spf-hub-orange-soft,rgba(255,102,0,.22))} /* ALT (bis 25.09.2026): die zwei Reiter „VIN eingeben" / „Modell wählen" und ihre Zeile mit Feld und Suchknopf. Das Markup ist weg, die Regeln bleiben bis zum Purge stehen — Begruendung im Block „Alt-Regeln" weiter unten. */ #spf-gpanel .gadd__tabs{display:flex;gap:8px;padding:14px 16px 0} #spf-gpanel .gadd__tab{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;border:1px solid var(--spf-hub-border);border-radius:9px!important;background:var(--spf-hub-card);color:var(--spf-hub-muted);font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13px;cursor:pointer;transition:all .15s} @media (hover:hover){ #spf-gpanel .gadd__tab:hover{border-color:var(--spf-hub-orange-text);color:var(--spf-hub-orange-text)}} #spf-gpanel .gadd__tab.is-active{background:var(--spf-hub-orange);border-color:var(--spf-hub-orange);color:#fff} #spf-gpanel .gadd__pane{padding:16px} #spf-gpanel .gadd__pane[hidden]{display:none} #spf-gpanel .gadd__vinrow{display:flex;gap:8px} #spf-gpanel .gadd__vin{flex:1;min-width:0;height:44px!important;border:1px solid var(--spf-hub-border);border-radius:9px!important;padding:0 13px!important;font-family:var(--spf-hub-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--spf-hub-ink);background:var(--spf-hub-card)} #spf-gpanel .gadd__vin::placeholder{font-family:var(--spf-hub-sans);letter-spacing:0;text-transform:none;color:var(--spf-hub-faint)} #spf-gpanel .gadd__vin:focus{outline:2px solid var(--spf-hub-orange-text);outline-offset:-1px;border-color:var(--spf-hub-orange-text)} #spf-gpanel .gadd__go{min-height:44px;padding:0 18px;border:0;border-radius:9px!important;background:var(--spf-hub-orange);color:#fff;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:13.5px;cursor:pointer;transition:background .15s} @media (hover:hover){ #spf-gpanel .gadd__go:hover:not(:disabled){background:var(--spf-hub-orange-press)}} /* Gesperrter Zustand: Der Grund ist ein helles Grau, weisse Schrift darauf kommt auf 1,40:1 — in BEIDEN Modi, das ist kein Nachtmodus-Fehler (gemessen 14.08.2026). Ein dunkles Grau auf demselben Grund liegt bei rund 5,4:1 und liest sich weiterhin als „gesperrt", weil die Flaeche stumpf bleibt. */ #spf-gpanel .gadd__go:disabled{background:#d8dadd;color:#4a5058;cursor:not-allowed} #spf-gpanel .gadd__hint{margin:10px 0 0;font-size:12.5px;color:var(--spf-hub-muted);line-height:1.55} #spf-gpanel .gadd__hint b{color:var(--spf-hub-ink);font-weight:600} #spf-gpanel .gadd__count{font-family:var(--spf-hub-mono);font-size:11px;color:var(--spf-hub-faint);margin-top:6px} /* ------------------------------------------------------------------------- FAHRZEUGSUCHE: EIN FELD (25.09.2026) ------------------------------------------------------------------------- Modellname ODER Fahrgestellnummer im selben Feld, darunter die Vorschlaege. Loest die zwei Reiter ab (siehe den Block „Alt-Regeln" darunter). DIE EBENE LIEGT IM FLUSS, nicht als schwebendes Dropdown: Der Drawer ist 440 px breit und scrollt selbst (`.gpanel__body{overflow-y:auto}`). Ein absolut positioniertes Blatt waere dort entweder abgeschnitten oder bliebe beim Scrollen stehen, waehrend das Feld darunter wegwandert. Alle Farben kommen aus den --spf-hub-*-Tokens. Damit traegt der Nachtmodus ohne eine einzige eigene Regel — die Tokenblocks unten setzen ihn um. ------------------------------------------------------------------------- */ #spf-gpanel .gsuch__vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} #spf-gpanel .gsuch__feld{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 6px 0 10px;border:1px solid var(--spf-hub-border);border-radius:11px!important;background:var(--spf-hub-card);transition:border-color .15s,box-shadow .15s} #spf-gpanel .gsuch__feld:focus-within, #spf-gpanel .gsuch__feld.ist-aktiv{border-color:var(--spf-hub-orange-text);box-shadow:0 0 0 3px var(--spf-hub-orange-soft)} /* Dasselbe Platzhalterbild wie in der Fahrzeugliste darueber und im Hero — `.spf-ph-img` tauscht es im Nachtmodus gegen die helle Fassung, ohne dass JavaScript den Modus kennen muss. */ #spf-gpanel .gsuch__bild{width:44px;height:30px;flex:none;object-fit:contain;display:block} #spf-gpanel .gsuch__lupe{width:19px;height:19px;flex:none;stroke:var(--spf-hub-faint);fill:none;stroke-width:2} /* Gegen Theme-Resets: Das Bricks-Theme setzt Hoehe, Rahmen und Innenabstand fuer JEDES input im Dokument. Ohne !important sitzt das Feld schief im eigenen Rahmen. Dieselbe Vorsichtsmassnahme wie bei .gadd__vin vorher. */ #spf-gpanel .gsuch__feld input{flex:1 1 auto;min-width:0;height:44px!important;min-height:44px!important;border:0!important;outline:none!important;background:none!important;box-shadow:none!important;padding:0!important;margin:0!important;font-family:var(--spf-hub-sans);font-size:15px;line-height:1.2;color:var(--spf-hub-ink)} #spf-gpanel .gsuch__feld input::placeholder{color:var(--spf-hub-faint);opacity:1} #spf-gpanel .gsuch__leeren{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border:0;border-radius:9px!important;background:none;color:var(--spf-hub-faint);font-size:21px;line-height:1;cursor:pointer;transition:background-color .15s,color .15s} @media (hover:hover){ #spf-gpanel .gsuch__leeren:hover{background:var(--spf-hub-hover);color:var(--spf-hub-ink)}} #spf-gpanel .gsuch__leeren:focus-visible{outline:2px solid var(--spf-hub-orange-text);outline-offset:-2px} /* Vorschlagsebene. `overscroll-behavior:contain` haelt das Scrollen in der Liste: Ohne sie schiebt der letzte Wisch den ganzen Drawer weiter. */ #spf-gpanel .gsuch__ebene{margin-top:10px;border:1px solid var(--spf-hub-line-strong);border-radius:11px!important;background:var(--spf-hub-card);box-shadow:var(--spf-hub-shadow);max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain} #spf-gpanel .gsuch__frage{padding:12px 13px 8px;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--spf-hub-ink)} #spf-gpanel .gsuch__kopf{padding:10px 13px 6px;border-top:1px solid var(--spf-hub-line);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--spf-hub-faint)} #spf-gpanel .gsuch__laedt, #spf-gpanel .gsuch__leer{padding:13px;font-size:13.5px;line-height:1.55;color:var(--spf-hub-muted)} #spf-gpanel .gsuch__leer b{color:var(--spf-hub-ink)} #spf-gpanel .gsuch__leer a{color:var(--spf-hub-orange-text);text-decoration:underline} #spf-gpanel .gsuch__link{border:0;background:none;padding:0;font:inherit;color:var(--spf-hub-orange-text);text-decoration:underline;cursor:pointer} #spf-gpanel .gsuch__mehr{padding:10px 13px;border-top:1px solid var(--spf-hub-line);font-size:12.5px;color:var(--spf-hub-faint)} /* Trefferzeile */ #spf-gpanel .gsuch__zeile{display:flex;align-items:center;gap:11px;min-height:54px;padding:8px 12px;border-top:1px solid var(--spf-hub-line);cursor:pointer;transition:background-color .12s} #spf-gpanel .gsuch__zeile:first-child{border-top:0} #spf-gpanel .gsuch__frage + .gsuch__zeile, #spf-gpanel .gsuch__kopf + .gsuch__zeile{border-top:0} @media (hover:hover){ #spf-gpanel .gsuch__zeile:hover{background:var(--spf-hub-hover)}} #spf-gpanel .gsuch__zeile.ist-aktiv{background:var(--spf-hub-orange-soft);outline:none} #spf-gpanel img.gsuch__thumb{width:50px;height:34px;flex:none;object-fit:contain;display:block} /* `flex`, NICHT `grid` mit place-items: In einem Grid ist die Prozenthoehe des Kindes unbestimmt, ein stehendes Foto rendert dann auf Bruchteilen seiner Zelle (nachgewiesen am Megamenue, 02.09.2026). */ #spf-gpanel span.gsuch__thumb{width:50px;height:34px;flex:none;display:flex;align-items:center;justify-content:center} #spf-gpanel span.gsuch__thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} #spf-gpanel .gsuch__txt{flex:1 1 auto;min-width:0} #spf-gpanel .gsuch__name{display:block;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em;line-height:1.15;color:var(--spf-hub-ink)} #spf-gpanel .gsuch__meta{display:block;margin-top:1px;font-family:var(--spf-hub-sans);font-size:12.5px;color:var(--spf-hub-muted)} #spf-gpanel .gsuch__pf{width:15px;height:15px;flex:none;stroke:var(--spf-hub-faint);fill:none;stroke-width:2.2;transition:stroke .12s,transform .12s} @media (hover:hover){ #spf-gpanel .gsuch__zeile:hover .gsuch__pf{stroke:var(--spf-hub-orange-text);transform:translateX(2px)}} #spf-gpanel .gsuch__zeile.ist-aktiv .gsuch__pf{stroke:var(--spf-hub-orange-text)} /* Baujahr-Chips — die fuehrende Frage, wenn mehrere Jahrgaenge passen. */ #spf-gpanel .gsuch__jahre{display:flex;flex-wrap:wrap;gap:7px;padding:0 13px 12px} #spf-gpanel .gsuch__jahr{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 13px;border:1px solid var(--spf-hub-border);border-radius:999px!important;background:var(--spf-hub-card);color:var(--spf-hub-ink);font-family:var(--spf-hub-cond);font-weight:600;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s} #spf-gpanel .gsuch__jahr i{font-style:normal;font-size:11px;color:var(--spf-hub-faint)} @media (hover:hover){ #spf-gpanel .gsuch__jahr:hover{border-color:var(--spf-hub-orange-text);color:var(--spf-hub-orange-text)}} #spf-gpanel .gsuch__jahr.ist-aktiv{background:var(--spf-hub-orange);border-color:var(--spf-hub-orange);color:#fff} #spf-gpanel .gsuch__jahr.ist-aktiv i{color:rgba(255,255,255,.8)} #spf-gpanel .gsuch__jahr:focus-visible{outline:2px solid var(--spf-hub-orange-text);outline-offset:2px} /* Klickstrecke: Kategorie-Kacheln und Rueckweg */ #spf-gpanel .gsuch__kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 13px 13px} #spf-gpanel .gsuch__kachel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 8px;border:1px solid var(--spf-hub-border);border-radius:10px!important;background:var(--spf-hub-card);color:var(--spf-hub-ink);font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:12.5px;line-height:1.2;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s} #spf-gpanel .gsuch__kachel img{width:100%;max-width:92px;height:38px;object-fit:contain;display:block} @media (hover:hover){ #spf-gpanel .gsuch__kachel:hover{border-color:var(--spf-hub-orange-text);box-shadow:var(--spf-hub-shadow)}} #spf-gpanel .gsuch__kachel:focus-visible{outline:2px solid var(--spf-hub-orange-text);outline-offset:2px} #spf-gpanel .gsuch__zurueck{display:inline-flex;align-items:center;min-height:40px;margin:8px 13px 0;padding:0 10px;border:1px solid var(--spf-hub-border);border-radius:9px!important;background:var(--spf-hub-card);color:var(--spf-hub-muted);font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s} @media (hover:hover){ #spf-gpanel .gsuch__zurueck:hover{border-color:var(--spf-hub-orange-text);color:var(--spf-hub-orange-text)}} /* Markenweiche: „Sieht so aus, als wuerdest du nach … suchen." */ #spf-gpanel .gsuch__weiche{padding:12px 13px;background:var(--spf-hub-hover);border-bottom:1px solid var(--spf-hub-line)} #spf-gpanel .gsuch__weiche-txt{font-size:13.5px;line-height:1.5;color:var(--spf-hub-ink)} #spf-gpanel .gsuch__weiche-ja{display:inline-flex;align-items:center;min-height:38px;margin-top:9px;padding:0 14px;border-radius:9px!important;background:var(--spf-hub-orange);color:#fff!important;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;text-decoration:none!important} /* Der Rueckweg unter dem Feld. Kein Reiter mehr, sondern eine Zeile, die man lesen kann und nicht beantworten muss. */ #spf-gpanel .gsuch__weg{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;margin-top:12px;padding:0 12px;border:1px dashed var(--spf-hub-border);border-radius:10px!important;background:none;color:var(--spf-hub-muted);font-family:var(--spf-hub-sans);font-size:13px;text-align:left;cursor:pointer;transition:border-color .15s,color .15s} #spf-gpanel .gsuch__weg svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2} @media (hover:hover){ #spf-gpanel .gsuch__weg:hover{border-color:var(--spf-hub-orange-text);color:var(--spf-hub-orange-text)}} #spf-gpanel .gsuch__weg:focus-visible{outline:2px solid var(--spf-hub-orange-text);outline-offset:2px} /* ------------------------------------------------------------------------- ALT-REGELN der zwei Reiter (VIN / Modell waehlen). Das Markup dazu ist am 25.09.2026 entfallen — es steckt aber noch in JEDER Seite, die im LiteSpeed-Cache liegt, denn der Drawer wird im Fussbereich gerendert. Bis zum „Purge All" liefert der Server also altes Markup mit neuem CSS aus. Stuenden diese Regeln nicht mehr hier, saehe der Kunde in dieser Zeitspanne unformatierte Reiter und Auswahlfelder. NACH dem Purge sind sie tot und koennen mit der naechsten Auslieferung dieser Datei weg (siehe Doku, Feature-Seite „Garage-Drawer"). ------------------------------------------------------------------------- */ /* Modell waehlen: drei abhaengige Dropdowns (kompakt) */ #spf-gpanel .gdd{display:flex;flex-direction:column;gap:10px} #spf-gpanel .gdd__field{display:flex;flex-direction:column;gap:4px} #spf-gpanel .gdd__label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--spf-hub-muted)} #spf-gpanel .gdd__field.is-disabled .gdd__label{color:var(--spf-hub-faint)} #spf-gpanel .gdd__selwrap{position:relative;display:block} #spf-gpanel .gdd__select{width:100%;height:44px!important;min-height:44px!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--spf-hub-border);border-radius:9px!important;background:var(--spf-hub-card);color:var(--spf-hub-ink);font-family:var(--spf-hub-sans);font-size:14px;padding:0 40px 0 13px!important;line-height:1.2;cursor:pointer;transition:border-color .15s} @media (hover:hover){ #spf-gpanel .gdd__select:hover:not(:disabled){border-color:var(--spf-hub-orange-text)}} #spf-gpanel .gdd__select:focus-visible{outline:2px solid var(--spf-hub-orange-text);outline-offset:-1px;border-color:var(--spf-hub-orange-text)} #spf-gpanel .gdd__select:disabled{opacity:.45;cursor:not-allowed;background:var(--spf-hub-hover)} #spf-gpanel .gdd__chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;stroke:var(--spf-hub-faint);fill:none;stroke-width:2.2} #spf-gpanel .gdd__field.is-disabled .gdd__chev{opacity:.45} #spf-gpanel .gdd__submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:3px;border:0;border-radius:9px!important;background:var(--spf-hub-orange);color:#fff;font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:13px;cursor:pointer;transition:background .15s} @media (hover:hover){ #spf-gpanel .gdd__submit:hover:not(:disabled){background:var(--spf-hub-orange-press)}} #spf-gpanel .gdd__submit:disabled{background:#d8dadd;cursor:not-allowed} #spf-gpanel .gdd__submit svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;flex:none} #spf-gpanel .gdd__submit:focus-visible{outline:2px solid var(--spf-hub-orange-text);outline-offset:2px} /* Meldung */ #spf-gpanel .gadd__msg{margin:0 16px 14px;padding:10px 13px;border-radius:9px!important;font-size:13px;display:none} #spf-gpanel .gadd__msg.is-show{display:block;background:var(--spf-hub-hover);color:var(--spf-hub-ink);border:1px solid var(--spf-hub-line-strong)} #spf-gpanel .gadd__msg.is-ok{display:block;background:var(--spf-hub-ok-soft);color:#177a35;border:1px solid rgba(34,164,71,.3)} #spf-gpanel .gadd__msg.is-error{display:block;background:var(--spf-hub-bad-soft);color:#a5251d;border:1px solid rgba(224,69,60,.3)} /* Fuss */ #spf-gpanel .gpanel__foot{flex:none;padding:14px 22px;background:var(--spf-hub-card);border-top:1px solid var(--spf-hub-line-strong);font-size:12px;color:var(--spf-hub-faint)} #spf-gpanel .gpanel__foot-note{margin:0} /* `[hidden]` MUSS hier gewinnen: Die Regeln darunter setzen `display:flex`, und das schlaegt die `display:none`-Regel des Browsers fuer [hidden]. Ohne diese Zeile stuende die Rueckfrage dauerhaft offen. */ #spf-gpanel [hidden]{display:none!important} /* --- Garage leeren ------------------------------------------------------- Kein eigener Knopf: beide Schaltflaechen tragen `.bso-btn` aus spf-buttons.css. Angepasst wird ausschliesslich ueber Tokens, damit sie den Rollen des Systems folgen und beim naechsten Buttonumbau mitwandern. */ #spf-gpanel .gpanel__foot-act{display:flex;margin-top:12px} /* Der ausloesende Knopf ist die zurueckhaltende Stufe: tertiaere Rolle (neutraler Umriss), damit er dem orangen „Fahrzeug uebernehmen" nicht die Aufmerksamkeit nimmt. --btn-h-s steht global auf 38px; fuer eine Flaeche, die man auf dem Telefon trifft, sind das zu wenig — 44 px ist die Untergrenze (WCAG 2.5.5 / HIG). --o dreht auf den Warnton: `.bso-btn--ter` faerbt Schrift und Kante beim Ueberfahren auf --o, und Orange waere hier die falsche Ansage. */ /* Der Knopf lief zu schwer neben seinen Nachbarn (Kili, 02.09.2026: „‚Garage Leeren' ist ausserdem etwas zu gross im vergleich zu den anderen Buttons im Drawer"). Die HOEHE war es nicht — er stand schon auf 44 px, genau wie `.gadd__tab` und `.gadd__go`. Das Gewicht kam aus der Schrift: 14 px in 700 gegen 13 px in 600 bei den Nachbarn, dazu 10 px Radius gegen 9. Drei kleine Abweichungen, die sich addieren — und ausgerechnet an der Aktion, die am wenigsten Aufmerksamkeit braucht. Angeglichen wird ueber die Token des Buttonsystems, nicht mit eigenen Regeln: So bleiben Zustaende, Nachtmodus und Fokusring die des Systems. ⚠️ DIE HOEHE BLEIBT BEI 44 px, obwohl der Knopf damit hoeher ist als sein Text verlangt. Er loescht die ganze Garage ohne Rueckweg — eine kleinere Trefferflaeche waere hier die falsche Sparsamkeit, und 44 px ist das Mindestmass fuer Touch. Was ihn zuruecknimmt, ist die Schrift, nicht die Flaeche. */ #spf-gpanel .gpanel__clear{ --btn-h-s:44px; --btn-fs-s:13px; /* wie .gadd__tab / .gadd__go */ --btn-weight:600; /* dito — vorher 700 */ --btn-radius:9px; /* dito — vorher 10 */ --btn-text:var(--spf-hub-muted); /* #5b6270 auf Weiss: 6,13:1 */ --btn-line:var(--spf-hub-line-3); /* Kante 3,45:1, siehe Tokenblock */ --o:var(--spf-hub-bad-strong); /* Hover-Schrift/Kante: 6,54:1 */ } #spf-gpanel .gpanel__clear svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} /* Rueckfrage */ #spf-gpanel .gpanel__confirm{margin-top:12px;padding:12px 13px;border-radius:10px!important;background:var(--spf-hub-bad-soft);border:1px solid rgba(224,69,60,.32)} /* #a5251d auf der Flaeche (10 % Rot ueber Weiss = #fcecec): 6,37:1. Der Text ist 13 px gross, faellt also unter „grosse Schrift" und muss 4,5:1 halten. */ #spf-gpanel .gpanel__confirm-q{margin:0 0 10px;font-size:13px;line-height:1.45;color:#a5251d} #spf-gpanel .gpanel__confirm-act{display:flex;flex-wrap:wrap;gap:8px} /* Bestaetigen: gefuellte Hauptrolle, aber in der Warnfarbe statt in Orange — dieselbe Substitution wie oben, nur auf der Flaeche. Die Zustandsregeln (:hover in @media (hover:hover), :active, :focus-visible, [disabled]) kommen unveraendert aus spf-buttons.css. */ #spf-gpanel .gpanel__confirm-yes{ --btn-h-s:44px; --btn-bg:var(--spf-hub-bad-strong); /* Weiss darauf: 6,54:1 */ --btn-bg-h:var(--spf-hub-bad-press); /* Weiss darauf: 8,87:1 */ --btn-bg-a:var(--spf-hub-bad-press); --btn-fg:#ffffff; } /* Abbrechen bleibt neutral und ohne Warnton — der harmlose Weg soll nicht wie eine zweite Warnung aussehen. */ #spf-gpanel .gpanel__confirm-no{ --btn-h-s:44px; --btn-text:var(--spf-hub-ink); /* #16181c auf #fcecec: 15,53:1 */ --btn-line:var(--spf-hub-line-3); /* Kante 3,01:1 auf #fcecec */ --o:var(--spf-hub-ink); } /* Fokusring. spf-buttons.css dreht ihn nachts auf Weiss (`body.spf-night .bso-btn:focus-visible{outline-color:#ffffff}`). Hier steht stattdessen --spf-hub-ink — NICHT weil das Panel in beiden Modi hell waere (das ist es nicht: der Tokenblock `body.spf-night #spf-gpanel` weiter unten gibt ihm eine vollstaendige Nachtpalette, und das JS setzt `body.spf-night` selbst), sondern weil dieses eine Token mit dem Panel kippt und der Ring damit ohne zweite Regel in beiden Modi traegt: #16181c auf der hellen Karte 17,77:1 und auf der Rueckfrage-Flaeche 15,53:1, #e8eaed auf der dunklen Karte 14,74:1 und auf der dunklen Rueckfrage-Flaeche 12,33:1. Gerechnet, nicht geschaetzt. Der ID-Scope schlaegt die Nachtregel; der orange Hof aus dem Buttonsystem bleibt und traegt zusaetzlich. */ #spf-gpanel .gpanel__clear:focus-visible, #spf-gpanel .gpanel__confirm-yes:focus-visible, #spf-gpanel .gpanel__confirm-no:focus-visible{outline-color:var(--spf-hub-ink)} /* Auf schmalen Geraeten volle Breite statt zweier gequetschter Knoepfe — und damit auch kein Vertippen zwischen „Ja" und „Abbrechen". */ @media (max-width:479px){ #spf-gpanel .gpanel__confirm-act .bso-btn{flex:1 0 100%} } /* Mobil: Vollbild-Sheet von unten */ @media (max-width:767px){ #spf-gpanel{width:100%;transform:translateY(103%);transition:transform .32s cubic-bezier(.22,.61,.36,1)} #spf-gpanel.is-open{transform:translateY(0)} #spf-gpanel .gpanel__body{padding:16px 14px 22px} #spf-gpanel .gpanel__head{padding:14px} #spf-gpanel .gpanel__foot{padding:12px 14px} /* 16px gegen den iOS-Fokus-Zoom: Safari zoomt beim Fokus in jedes Feld unter 16px hinein und kehrt danach nicht von allein zurueck. Die Hoehe steht per !important auf 44px, die Zeile mit dem Suchen-Knopf springt also nicht. */ #spf-gpanel .gadd__vin{font-size:16px} /* Gilt seit dem 25.09.2026 fuer das EINE Suchfeld, das die beiden Reiter abgeloest hat — derselbe Grund, dieselbe Regel. Das Feld nimmt Modellnamen UND Fahrgestellnummern entgegen und wird auf dem Telefon oft benutzt. */ #spf-gpanel .gsuch__feld input{font-size:16px} /* Auf schmalen Geraeten ist die Vorschlagsebene das eigentliche Werkzeug: Der Drawer fuellt den Schirm, unter dem Feld ist Platz. */ #spf-gpanel .gsuch__ebene{max-height:min(60vh,520px)} } @media (prefers-reduced-motion:reduce){ #spf-gpanel,#spf-gscrim{transition:none!important} } /* ========================================================================= FITMENT · Produkt-Badge (nahe „In den Warenkorb") ========================================================================= */ .spf-fitbadge{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:11px!important;font-family:var(--spf-hub-sans);font-size:13.5px;font-weight:600;line-height:1.35;border:1px solid transparent;box-shadow:0 1px 2px rgba(20,24,28,.05),0 2px 8px rgba(20,24,28,.05);margin:0 0 14px;text-wrap:pretty;max-width:100%} /* `stroke-linecap:round` ist NICHT Kosmetik: Der Punkt unter dem Fragezeichen ist eine Null-Strecke (`M12 17.3h.01`, das uebliche Muster in diesem Icon-Satz). Mit dem Standardwert `butt` hat sie keine Laenge und wird gar nicht gezeichnet — das Fragezeichen stand ohne Punkt da (Kili, 18.08.2026). Haken und Kreuz gewinnen dadurch ebenfalls saubere Enden. */ .spf-fitbadge svg{width:18px;height:18px;flex:none;stroke-width:2.4;fill:none; stroke-linecap:round;stroke-linejoin:round} .spf-fitbadge__link{display:inline-flex;align-items:center;min-height:30px;margin:-4px -4px -4px 2px;padding:4px 8px;border-radius:7px!important;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:0;font-size:inherit;font-family:inherit;transition:background-color .15s ease,transform .12s ease} @media (hover:hover){ .spf-fitbadge__link:hover{background:rgba(20,24,28,.05);text-decoration:none}} .spf-fitbadge__link:active{transform:scale(.96)} .spf-fitbadge__link:focus-visible{outline:2px solid currentColor;outline-offset:1px} .spf-fitbadge--fit{background:var(--spf-hub-ok-soft);border-color:rgba(34,164,71,.3);color:#177a35} .spf-fitbadge--fit svg{stroke:var(--spf-hub-ok)} .spf-fitbadge--nofit{background:var(--spf-hub-bad-soft);border-color:rgba(224,69,60,.3);color:#a5251d} .spf-fitbadge--nofit svg{stroke:var(--spf-hub-bad)} .spf-fitbadge--none{background:var(--spf-hub-hover);border-color:var(--spf-hub-line-strong);color:var(--spf-hub-muted)} .spf-fitbadge--none svg{stroke:var(--spf-hub-faint)} /* ========================================================================= FITMENT · Kategorie-Leiste + Ausgrauen nicht passender Karten ========================================================================= */ .spf-fitbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;background:var(--spf-hub-card);border:1px solid var(--spf-hub-line-strong);border-left:4px solid var(--spf-hub-orange-text);border-radius:var(--spf-hub-radius)!important;padding:12px 16px;margin:0 0 18px;font-family:var(--spf-hub-sans);color:var(--spf-hub-ink);box-shadow:var(--spf-hub-shadow)} .spf-fitbar__icon{width:26px;height:26px;flex:none;color:var(--spf-hub-orange-text)} .spf-fitbar__icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6} .spf-fitbar__img{width:58px;height:40px;flex:none;border-radius:8px!important;overflow:hidden;background:transparent;display:flex;align-items:center;justify-content:center} .spf-fitbar__img img{width:100%;height:100%;object-fit:contain;display:block} .spf-fitbar__img.is-fallback{color:var(--spf-hub-faint)} .spf-fitbar__img.is-fallback svg{width:30px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6} .spf-fitbar__text{font-size:14px;line-height:1.35} .spf-fitbar__veh{font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.02em} .spf-fitbar__count{color:var(--spf-hub-muted);font-size:12.5px;margin-top:1px} .spf-fitbar__spacer{flex:1 1 auto} /* Toggle „nur passende" */ .spf-fittoggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--spf-hub-ink);-webkit-user-select:none;user-select:none} .spf-fittoggle input{position:absolute;opacity:0;width:0;height:0} .spf-fittoggle__track{width:40px;height:22px;border-radius:999px!important;background:var(--spf-hub-border);position:relative;transition:background .18s;flex:none} .spf-fittoggle__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%!important;background:var(--spf-hub-card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s} .spf-fittoggle input:checked+.spf-fittoggle__track{background:var(--spf-hub-orange)} .spf-fittoggle input:checked+.spf-fittoggle__track::after{transform:translateX(18px)} .spf-fittoggle input:focus-visible+.spf-fittoggle__track{outline:2px solid var(--spf-hub-orange-text);outline-offset:2px} .spf-fitbar__change{min-height:40px;padding:0 14px;border:1px solid var(--spf-hub-border)!important;border-radius:9px!important;background:var(--spf-hub-card);color:var(--spf-hub-ink);font-family:var(--spf-hub-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;cursor:pointer;transition:border-color .15s,color .15s} @media (hover:hover){ .spf-fitbar__change:hover{border-color:var(--spf-hub-orange-text);color:var(--spf-hub-orange-text)}} /* Nicht passende Karten markieren/ausgrauen */ .spf-unfit{position:relative;opacity:.45;filter:grayscale(.65);transition:opacity .2s,filter .2s} @media (hover:hover){ .spf-unfit:hover{opacity:.85;filter:grayscale(.2)}} .spf-fitbar-hide-unfit .spf-unfit{display:none!important} /* Fitment-Tags auf den Karten („Passt" / „Passt nicht"). Die Karten liegen AUSSERHALB der Hub-Token-Scopes (#spf-gpanel/.spf-fitbar & Co.) — die früheren var()-Bezüge waren dort undefined (Tag-Hintergrund transparent, SVG ungestylt = die „grauen Punkte"). Daher: Fallback-Werte + SVG-Sizing. */ .spf-fit{position:relative} /* Dritter Zustand „Keine Passungsdaten" (25.09.2026): Die Karte wird bewusst NICHT ausgegraut — „unbekannt" ist kein Ausschluss, und ein zweites graues Kartenbild neben den echten „Passt nicht"-Karten hiesse genau das. */ .spf-nodata{position:relative} .spf-unfit .spf-unfit-tag,.spf-fit .spf-fit-flag,.spf-nodata .spf-nodata-tag{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;color:#fff;font-family:var(--spf-hub-sans,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);font-size:10.5px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:6px!important;pointer-events:none} .spf-unfit .spf-unfit-tag{background:var(--spf-hub-bad,#e0453c)} .spf-fit .spf-fit-flag{background:var(--spf-hub-ok,#22a447)} /* Neutrales Grau statt Rot/Gruen: keine Wertung. `--spf-hub-muted` traegt weisse Schrift mit 6,13:1 und erfuellt damit WCAG AA (4,5:1) — die beiden bestehenden Tags tun das mit 4,13:1 und 3,25:1 nicht ganz. `pointer-events:auto` weicht bewusst von der Sammelregel ab: nur so erreicht der Zeiger den `title`, der erklaert, was „keine Passungsdaten" bedeutet. `max-width` laesst das laengere Wort umbrechen statt ueber die Karte zu ragen — gemessen an der schmalsten Spalte des Rasters. */ .spf-nodata .spf-nodata-tag{background:var(--spf-hub-muted,#5b6270);pointer-events:auto;cursor:help;max-width:calc(100% - 16px)} .spf-unfit .spf-unfit-tag svg,.spf-fit .spf-fit-flag svg,.spf-nodata .spf-nodata-tag svg{width:12px;height:12px;flex:none;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} /* ========================================================================= HELLER THEME-OVERRIDE fuer bestehende [spf_garage]-Instanzen (Default-Theme sitewide auf hell; ohne spf-garage.css zu editieren) ------------------------------------------------------------------------- */ .spf-garage{ --spf-acc:var(--spf-brand, #ff6600); --spf-acc-press:var(--spf-brand-press, #e25c00); --spf-acc-text:var(--spf-acc); --spf-bg:#f4f5f6; --spf-bg-2:#ffffff; --spf-bg-3:#f7f8f9; --spf-line:var(--spf-hub-line); --spf-line-strong:var(--spf-hub-line-strong); --spf-text:#16181c; --spf-muted:#5b6270; --spf-radius:16px; --spf-radius-inner:12px; } .spf-garage,.spf-garage .spf-garage-summary,.spf-garage .spf-garage-panel-inner{color:var(--spf-hub-ink)} /* Inline-[spf_garage]-Widgets (Homepage-Hero, Produkt) zeigen nur die helle Zusammenfassung; „wechseln/wählen" öffnet den DRAWER (Single Source), nie den alten Inline-Picker. Der zweispaltige Panel-Teil wird daher unterdrückt. */ .spf-garage .spf-garage-panel{display:none!important} .spf-garage .spf-garage-summary{display:flex!important} /* Kategorie: die Theme-eigene dunkle „Produktfilter aktiv"-Leiste entfällt — unsere helle .spf-fitbar ist die einheitliche Fitment-Leiste (kein Duplikat). */ .ktmcat__garagebar{display:none!important} /* ========================================================================= HINWEIS: Dieser Header-Chip ist DEAKTIVIERT (Entscheidung Kili: aktives Fahrzeug zeigt der Rand-Chip #spf-gside weiter unten). Die JS-Funktion enhanceHeaderChip() setzt die Klasse .spf-ghchip-active NICHT mehr, daher greifen die folgenden Regeln aktuell nicht. Block bleibt als Fallback/zum schnellen Reaktivieren erhalten. ------------------------------------------------------------------------- HEADER-GARAGE-BUTTON -> CHIP mit aktivem Fahrzeug (Weg A, plugin-seitig) Wertet den bestehenden Bricks-Header-Button #ktmps-garage-btn auf, ohne den Header-Code zu ändern. Feinschliff (Breite/Position) via Bricks möglich. Design-Sprache Header: gerade (kein Skew), Orange var(--spf-brand, #ff6600), Radius ~9-10px wie der Suchbutton (border-radius:0 9px 9px 0). Chip = heller Info-/Status- Chip (zeigt Fahrzeugbild + Name), bewusst NICHT solid-orange wie die CTA- Buttons, aber im selben System (gleiches Orange, gleicher Radius, gleiche Höhenordnung, etwas größer für Präsenz). - Theme-Regel `#ktmps-header .ktmps-garage-btn` (border-radius:0 + skewX(-12deg), Spez. 1,1,0, Inline-