/* ct-version: 20260907-63 */ /* ct: Kategorie-/Listenseite nach mockup-kategorie.html — dunkler Kategoriekopf, Sidebar-Filter, Produktkacheln mit Kicker/Preis/CTA. ⚠️ 20260820-31: Die KACHEL-REGELN sind zweigeteilt (Fehlerregister 23) — LAYOUT haengt an `.layout-gallery`/`.productbox-column` (Galerieansicht), FARBE/TYPO weiter generisch an `.productbox`, weil dieselbe Kachel auch in der Listenansicht, in Startseiten-Grids und in Empfehlungen laeuft (Fehlerregister 13). Die Listenansicht bleibt NOVA-Standard und bekommt ausschliesslich die Farbgebung — Begruendung im Abschnitt Produktraster. */ :root{--ct-css-kategorie:'20260907-63'} /* --- Content-Flucht ------------------------------------------------------- */ /* ct: 20260819-22 — die BREITE steht nicht mehr hier. Bis -21 wiederholte diese Datei `max-width/padding-left/padding-right` fuer #content-wrapper, ct-artikel.css tat dasselbe fuer `:has(.product-detail)`, und Startseite sowie Inhaltsseiten hatten gar keine Flucht (gemessen 1920: Kontakt 0..1920, Artikel sogar linksbuendig 0..1600). Genau das ist Fehlerregister 17. Die Flucht liegt jetzt EINMAL in ct-base.css auf #content-wrapper; hier bleibt nur das seitenspezifische Vertikalmass. */ /* Vertikalmass aus dem zentralen Raster (ct-base.css) — die Mobilstufe kommt von dort mit, deshalb keine eigene Media Query mehr. */ #content-wrapper.is-item-list{padding-top:var(--ct-stack-lg)} /* ct: Sidebar/Content-Verhaeltnis auf das Mockup (.layout: 246px + 44 Gap). NOVAs col-xl-3/col-lg-8 ergaeben 228 + 80 Gap. Feste Basis statt Prozent, damit der Filter-Text bei jeder Fensterbreite gleich breit bricht. 306 = 16 (col-Polster links) + 246 (Inhalt) + 44 (Gap). */ @media (min-width: 992px){ #content-wrapper.is-item-list .row > aside.sidepanel-left{ flex:0 0 306px;max-width:306px;padding-right:44px; } #content-wrapper.is-item-list .row > .col-lg-8{ flex:1 1 0;max-width:none;padding-left:0; } } /* --- Brotkrumen-Band (Ink) ------------------------------------------------ */ /* ct: 20260819-25 (Korrekturpaket 8) — der Brotkrumen sitzt jetzt IM dunklen Band ueber dem Kategoriekopf (Mockup `.crumb`: Ink-Flaeche, 48px hoch, 11.5px Typo, muted mit weisser aktiver Stufe). Gerendert wird er aus layout/header.tpl, Block `layout-header-breadcrumb`. */ .ct-crumbband{ background:var(--ct-ink); padding:0 40px; } /* ct: 20260820-36 (Ben, 20.08.2026) — DAS KOPFBAND BEKOMMT EINE BEWUSSTE KANTE. Bens Wortlaut: "das hier sieht überall noch etwas sehr 'unfertig' aus … du könntest da schon so 'kanten' setzen um die grafik herum, aber dann halt bitte sauber und so das man es auch sieht". Bis -35 war das Ink-Band ein hartes Rechteck ohne jede Kante — auf dem weissen Grund fiel das kaum auf, auf dem neuen Papier-Grau (Befund 4) steht es als unbearbeiteter Block da, waehrend jede andere Flaeche der Seite (Sidebar-Karten, Produktkacheln, Beratungskasten) gerundet ist. ZWEI Mittel, beide aus dem vorhandenen Idiom, KEIN drittes: 1. RUNDUNG aus dem Rollen-Token. `--ct-radius-lg` (16px) ist die Stufe fuer grosse Flaechen — das Band ist der groesste Block der Seite; die Karten daneben tragen `--ct-radius` (12px). Kein freier Pixelwert. 2. EINE sichtbare Rahmenlinie in CI-Gruen. Ein weisser oder grauer Rahmen waere auf Ink unsichtbar bzw. schmutzig; Volt ist die Akzentfarbe, die im Band ohnehin schon zweimal steht (Kicker "SORTIMENT" und die Trefferzahl). .55 ist die Stufe, bei der die Linie auf Ink klar zu sehen ist, ohne als zweite Ueberschrift zu wirken (gemessen an derselben Volt-Skala wie der Kopfband-Verlauf, der .10 nutzt). ⚠️ Beide Baender sind SCHWESTERN, kein verschachteltes Element: die Rundung wird deshalb aufgeteilt (oben am Brotkrumen, unten am Kopf) und die Rahmenkanten so gesetzt, dass an der Nahtstelle KEINE Doppellinie entsteht — Brotkrumen ohne unteren, Kopf ohne oberen Rahmen (Fehlerregister 11 in der Rahmen-Fassung: eine Linie, nicht zwei parallele). ⚠️ `overflow:hidden` an beiden: der Verlauf des Kopfbandes und die Ink-Flaeche laufen bis an die Kante und stuenden sonst ueber der Rundung. ⚠️ Bewusst KEINE Passermarken wie an der Hero-Buehne: zusammen mit dem Rahmen waeren das zwei Kantenzeichen an einem Element. Ben: "im Zweifel lieber ganz ohne Deko, aber bündig." */ .ct-crumbband{ border:1px solid rgba(var(--ct-volt-rgb),.55); border-bottom:0; border-radius:var(--ct-radius-lg) var(--ct-radius-lg) 0 0; overflow:hidden; } /* ct: 20260820-36 (Ben, 20.08.2026: "oben rechts seh ich auch irgendwelche 'ecken'?") — DIE HELLE HAARLINIE AUF DEM INK-BAND. URSACHE GEMESSEN, nicht geraten: NOVAs `.row.breadcrumb-wrapper` traegt `border-TOP:1px solid rgb(235,235,235)` — die Fassung bis -35 hat nur `border-bottom` abgeraeumt (der alte Kommentar hier behauptete, die Linie sitze unten; die Messung sagt oben). Der Wrapper laeuft ausserdem von L=80..R=1360, das Band von L=40..R=1400: die helle Linie lag also 40px INNERHALB jeder Bandkante und endete vor den Ecken — genau die "Stufe" oben links und die "Ecken" oben rechts aus Bens Zoom. ⚠️ ENTSCOPET auf ALLE Brotkrumen (Fehlerregister 17): dieselbe Linie steht auf der PDP (dort L=40..R=1400, ohne Ink-Band) und war seit dem Papier-Grau-Grund auch dort ein heller Strich im Nichts. Ein Trenner, der auf zwei Seitentypen falsch ist, gehoert nicht in eine Ausnahme. Der Aussenrand faellt weiter weg, damit Brotkrumen- und Kopfband ohne Spalt aneinanderstossen (gemessen: Spalt = 0.0). */ .breadcrumb-wrapper{border-top:0;border-bottom:0} .ct-crumbband .breadcrumb-wrapper{margin-bottom:0} .ct-crumbband .breadcrumb{ margin:0;min-height:48px;align-items:center; padding-left:0;padding-right:0;padding-bottom:0; } .ct-crumbband .breadcrumb, .ct-crumbband .breadcrumb a, .ct-crumbband .breadcrumb .breadcrumb-item{color:var(--ct-dmuted)} .ct-crumbband .breadcrumb a:hover{color:var(--ct-volt)} .ct-crumbband .breadcrumb .breadcrumb-item.active{color:#fff;font-weight:600} .ct-crumbband .breadcrumb .breadcrumb-item + .breadcrumb-item::before{color:var(--ct-dmuted)} /* --- Breadcrumb (alle uebrigen Seitentypen) ------------------------------- */ .breadcrumb{ font-size:11px;letter-spacing:.08em;text-transform:uppercase; background:transparent; } .breadcrumb a{color:var(--ct-muted)} .breadcrumb a:hover{color:var(--ct-text)} .breadcrumb .breadcrumb-item.active{color:var(--ct-text);font-weight:600} /* --- Kategoriekopf (Ink-Band) --------------------------------------------- */ /* ct: Masse aus mockup-kategorie.html .cathead/.catcount. ⚠️ 20260819-25: Das Band sass bis dahin IN der Bootstrap-Produktspalte (gemessen 1440: x330..1400, also um die 306px-Sidebar eingerueckt) und war damit genau NICHT der vollbreite Seitenkopf des Mockups. Es wird jetzt aus layout/header.tpl VOR der Sidebar-Row gerendert und laeuft ueber die volle Content-Breite (40..1400 bei 1440). Der Brotkrumen steht im Band darueber. `margin-bottom` traegt weiter das Rollen-Token, nicht ein eigener Wert. */ .ct-cathead{ display:flex;align-items:flex-end;justify-content:space-between;gap:40px; background:var(--ct-ink); /* ct: 20260820-30 — greift jetzt --ct-volt-rgb statt eines zweiten harten Hexwerts. Bis -29 stand hier `rgba(143,232,56,.10)`; beim Umstellen des Gruens auf #6CBF3F waere genau diese Flaeche im alten Ton stehengeblieben (Fehlerregister 17 in der Farbfassung). */ background-image:radial-gradient(680px 300px at 82% 30%,rgba(var(--ct-volt-rgb),.10),transparent 70%); padding:var(--ct-pagehead-y) 40px; margin-bottom:var(--ct-head-gap); /* ct: 20260820-36 — untere Haelfte der Bandkante, Begruendung am .ct-crumbband weiter oben. Ohne oberen Rahmen: die Naht zum Brotkrumen traegt bereits dessen Linie. */ border:1px solid rgba(var(--ct-volt-rgb),.55); border-top:0; border-radius:0 0 var(--ct-radius-lg) var(--ct-radius-lg); overflow:hidden; } .ct-cathead-copy{min-width:0} .ct-cathead .ct-kick{color:var(--ct-volt)} .ct-cathead-h1{ font-family:var(--ct-font-display);font-weight:900; font-size:52px;line-height:1;letter-spacing:-.03em;text-transform:uppercase; color:#fff;margin:16px 0 0; /* ct: Sicherheitsnetz gegen ueberstehende Kategorienamen — gemessen ragte "SENIORENFAHRZEUGE" bei 390px 12px ueber die Bandkante. Silbentrennung bricht ihn sauber ("SENIOREN-/FAHRZEUGE") statt am Wortende auszulaufen; break-word faengt Namen ohne Trennstelle ab. */ hyphens:auto;overflow-wrap:break-word; } .ct-catcount{ flex:none;text-align:right; border:1px solid var(--ct-dline);padding:20px 26px; border-radius:var(--ct-radius); /* ct: 20260820-28 — Rolle Karte */ } .ct-catcount b{ display:block;font-family:var(--ct-font-display);font-weight:800; font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--ct-volt); } .ct-catcount span{ display:block;margin-top:8px; font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--ct-dmuted); } /* ct: NOVAs .title-Huelle traegt sonst eigene Abstaende ueber dem Band. */ #content .title:has(.ct-cathead){margin:0} /* ct: 20260820-36 (Ben, 20.08.2026: "und hier ... wie immer und immer wieder - der 'übliche' totraum : )") — LEERES BAND ZWISCHEN KOPF UND TOOLBAR. GEMESSEN (1440, /Elektro-Pick-up): Kopfband-Unterkante 513.8, Toolbar- Oberkante 585.8 = 72px Luft, obwohl das Raster --ct-head-gap (40px) sagt. Die 32px Ueberschuss kamen aus ZWEI Resten, beide Fehlerregister 3b: 1. NOVAs `
` aus productlist/header.tpl rendert als LEERE HUELLE mit `margin-bottom:24px` (gemessen: Hoehe 0, NULL Element-Kinder, nur Leerraum im HTML). Sie bleibt uebrig, weil unser Child die Ueberschrift darin bewusst leert — den Wrapper selbst erzeugt der Parent ausserhalb jedes Blocks, er ist von dort nicht erreichbar (ein Voll-Override von `productlist-header-description` waere die Alternative — genau der 66-Zeilen-Block, den NOVA-LIVE-LEHREN 18b als Update-Bremse benennt). 2. NOVAs `margin-top:32px` an der Toolbar-Zeile, gedacht als Abstand zu einer Ueberschrift, die es hier nicht mehr gibt. Beides wird ENTFERNT, nicht weggedrueckt: `:not(:has(*))` trifft ausschliesslich eine Huelle OHNE jedes Element-Kind — sobald der Wrapper Inhalt traegt (anderer Seitentyp, anderes Setting), greift die Regel nicht. Der Abstand kommt danach aus EINER Quelle: --ct-head-gap am Kopfband. */ #content-wrapper.is-item-list .title:not(:has(*)){display:none} /* ⚠️ Der Selektor heisst `-header-m`, nicht `-header` (gemessen am DOM), und er trifft bewusst NUR die OBERE Toolbar: dieselbe Basisklasse `.productlist-page-nav` traegt auch die Pagination am Listenende (Fehlerregister 13, zwei Instanzen eines Bausteins) — deren 34px Abstand zur letzten Kachelreihe ist richtig und bleibt. */ /* ⚠️ Ben, 20.08.2026: "das is immernoch nicht bündig nach oben". Sein Anspruch ist die SICHTBARE Flucht: Oberkante der Sidebar-Karte und Oberkante des ersten sichtbaren Elements der rechten Spalte auf EINER Linie. Gemessen war die Zeile als CONTAINER laengst buendig (beide bei y=555) — sichtbar wurde rechts trotzdem erst ab y=571, weil die Spalten der Toolbar `margin-top:16px` tragen. Der Leerstreifen war also nicht die Zeile, sondern das Spaltenmargin. GUTTER-MUSTER, und zwar mit BEIDEN Werten in unserer Hand: Abstand an jeder Spalte, negativer Ausgleich an der Zeile. Ein blosses `-16px` an der Zeile (erste Fassung dieses Fixes) war nachweislich falsch — gemessen trugen die Spalten NICHT ueberall 16px: bei 390px steht die erste Spalte auf 0 und die zweite auf 14px, ab 576px sind es 16/14. Der Ausgleich haette mobil 16px ZU VIEL abgezogen (sichtbarer Abstand 12px statt der 28px des Rasters). Deshalb wird der Spaltenwert hier gesetzt statt vorausgesetzt — dann stimmt die Rechnung auf jeder Breite, ohne einen Breakpoint zu raten (Fehlerregister 10: dieselbe Mechanik verhaelt sich je Breakpoint anders). Das Margin bleibt bestehen und wird nicht geloescht: unter xl bricht die Toolbar zweizeilig um, dann IST es der Zeilenabstand. */ #content-wrapper.is-item-list .productlist-page-nav-header-m{margin-top:-16px} #content-wrapper.is-item-list .productlist-page-nav-header-m > [class*="col"]{margin-top:16px} /* --- Sidebar (Kategorien + Filter) ---------------------------------------- ct: 20260820-30 (Ben, 20.08.2026) — SIDEBAR NACH v1-MOCKUP (Projektinformationen/mockup/mockup-kategorie-v1.pdf, im PDF-Viewer bei 200 % nachgesehen). SOLL: jede Gruppe ist eine EIGENE weisse Karte mit Rundung und Rahmen — KATEGORIEN-Karte mit Zeilen und Chevron rechts, aktive Zeile hell hinterlegt, darunter je eine Karte pro Filtergruppe. Bis -29 war die Sidebar eine Folge von
-getrennten Blocks ohne Flaeche; die Gruppenkoepfe standen 11px/muted, im Mockup sind sie Ink und traegt die Karte den Zusammenhalt. ⚠️ FILTERBESTAND BLEIBT: gerendert wird, was JTL an echten Filtern liefert (hier Verfuegbarkeit, Besondere Artikel, Preisspanne). Die Gruppen GESCHWINDIGKEIT/HERSTELLER/AUSSTATTUNG des Mockups sind Merkmalsfilter, die es in den Beispieldaten noch nicht gibt — sie werden NICHT erfunden (Vault jtl-nova-frontend-fallen: kein gefaktes Bedienelement). Sobald die Wawi sie liefert, tragen sie dieselbe Kartenoptik ohne weitere Regel. */ aside.sidepanel-left .box{ border:1px solid var(--ct-line); border-radius:var(--ct-radius); background:#fff; padding:20px; margin-bottom:var(--ct-stack-sm); } /* ct: NOVAs
am Fuss jeder Box IST der alte Gruppentrenner — die Karte uebernimmt diese Aufgabe. Zwei Trenner uebereinander waeren derselbe Fix in zwei Fassungen (Fehlerregister 17). Sie werden abgeschaltet, nicht auf 0 Margin gesetzt: ein Element mit Hoehe 0 ist Restmuell im Kasten. */ aside.sidepanel-left hr.box-normal-hr, aside.sidepanel-left hr.box-filter-hr{display:none} /* ct: `mb-5` (48px) haengt als Bootstrap-Utility an der Preisbox und wuerde den Kartenabstand als EINZIGE Gruppe verdoppeln — dokumentierte Utility-Ausnahme, deshalb hier mit gleicher Spezifitaet + Ladeordnung zurueckgenommen statt mit !important (Fehlerregister 16). */ aside.sidepanel-left .box.mb-5{margin-bottom:var(--ct-stack-sm)} /* Gruppenkoepfe: eine Typo fuer Kategorien-Box UND Filterboxen. ct: 20260820-30 — v1 zeigt sie in Ink und deutlich groesser als die alten 11px/muted; sie sind der Kartentitel, nicht eine Beschriftung. */ aside.sidepanel-left .productlist-filter-headline, aside.sidepanel-left .btn-filter-box{ font-family:var(--ct-font-display); font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--ct-text); text-decoration:none; margin-bottom:var(--ct-stack-sm); } /* ct: 20260820-30 — NOVA legt unter die Kategorien-Ueberschrift eine 1px-Linie (gemessen `rgb(235,235,235)`). Auf der Karte ist sie der DRITTE Trenner derselben Gruppe (Kartenrahmen + frueheres
+ Linie) und steht im v1-Mockup nicht — dort traegt allein die Karte die Gruppierung. */ aside.sidepanel-left .productlist-filter-headline{border-bottom:0;padding-bottom:0} aside.sidepanel-left .btn-filter-box{ padding:0;text-align:left; display:flex;align-items:center;justify-content:space-between; } aside.sidepanel-left .btn-filter-box:hover, aside.sidepanel-left .btn-filter-box:focus{color:var(--ct-cta);text-decoration:none} /* ct: Die Kopfzeile der Filterkarte traegt im Mockup rechts einen Chevron; NOVAs `.dropdown-toggle::after` malt dort einen Bootstrap-Caret. Nur die FARBE wird angeglichen — die Mechanik (Dreh beim Aufklappen) bleibt NOVAs, weil sie ein echtes Bedienelement ist. */ aside.sidepanel-left .btn-filter-box::after{color:var(--ct-muted);margin-left:auto} /* --- Zeilenbau der Kategorien-Karte (Mockup .ftree) ------------------------ Zeilen ohne Trennlinien, 14px, muted, Chevron rechts, aktive Zeile als heller CTA-Block. Die Zeile ist der Klickbereich — deshalb sitzt Polster und Rundung am Link, nicht am
  • . */ aside.sidepanel-left .nav-panel .nav-link{ display:flex;align-items:center;gap:10px; padding:9px 10px; border-radius:var(--ct-radius-sm); } /* Werte 14px (Mockup 13.5) */ aside.sidepanel-left .nav-panel a, aside.sidepanel-left .filter-item{color:var(--ct-muted);font-size:14px} aside.sidepanel-left .nav-panel a:hover, aside.sidepanel-left .filter-item:hover{color:var(--ct-text);text-decoration:none} aside.sidepanel-left .nav-panel .nav-link:hover{background:var(--ct-paper)} /* ct: Chevron rechts an jeder ZIELZEILE (Mockup: jede Zeile fuehrt in die Kategorie). Bewusst NUR an Zeilen OHNE `.dropdown-toggle`: die aufklappbaren Zeilen tragen bereits NOVAs Caret, und zwei Marker in einer Zeile waeren zwei Aussagen zum selben Element. `content` mit U+203A statt einer Grafik — es gibt keine zweite Icon-Quelle im Projekt. */ aside.sidepanel-left .nav-panel .nav-link:not(.dropdown-toggle)::after{ content:'\203A'; margin-left:auto; color:var(--ct-line); font-size:17px;line-height:1; } aside.sidepanel-left .nav-panel .nav-link:not(.dropdown-toggle):hover::after{color:var(--ct-muted)} /* Aktive Kategorie: heller CTA-Block mit CI-blauer Schrift (v1-Mockup). ⚠️ NOVA setzt den Marker als 6px border-bottom direkt am aktiven .nav-link (NOVA-LIVE-LEHREN C.3, dritte der vier NOVA-Gelb-Stellen). Der muss mit DEMSELBEN Anker weg, sonst stehen beide Marker uebereinander. */ aside.sidepanel-left .nav-panel > .nav > .active > .nav-link{border-bottom-width:0} /* ct: 20260820-33 (Ben: "die bereiche kleben aneinander mit den farblichen hinterlegungen, und Seniorenfahrzeuge hat NOCHMAL eine farbebene drunter") — NOVA setzt .active auf JEDER Ebene des aktiven Pfads (gemessen /3-Rad: li.dropdown.active "Seniorenfahrzeuge" UND li.active "3-Rad"). Die alte Regel hinterlegte deshalb BEIDE, die `> a`-Variante zudem nur in Textbreite (der schmale Kasten). Eine Hervorhebungs-Ebene: Flaeche nur am TIEFSTEN aktiven Punkt; der aufgeklappte Elternpunkt signalisiert nur ueber Textfarbe/-gewicht. */ aside.sidepanel-left .nav-panel li.active:not(:has(li.active)) > .nav-link, aside.sidepanel-left .nav-panel a.active{ background:var(--ct-cta-soft); border-radius:var(--ct-radius-sm); color:var(--ct-cta);font-weight:600; } /* ct: 20260820-34 (Befund 10) — ELTERNPUNKT ENTSAETTIGT. Bis -33 trug der Elternpunkt DIESELBEN zwei Signale wie das aktive Kind (CTA-Blau + 600), unterschieden nur noch durch die Flaeche — gemessen auf /B03: "Cargo-Trikes" rgb(25,118,210)/600 und "B03" rgb(25,118,210)/600. Zwei gleich starke Marker in einer Liste zeigen dem Kunden nicht, wo er steht. Der Elternpunkt behaelt jetzt die Standardtextfarbe und signalisiert nur ueber das Gewicht; den offenen Zustand zeigt ohnehin der Chevron. */ aside.sidepanel-left .nav-panel li.active:has(li.active) > .nav-link, aside.sidepanel-left .nav-panel li.active:has(li.active) > .nav-link > a{ background:transparent; color:var(--ct-text);font-weight:600; } /* ct: FIX 3 (Ben: "bisschen weird") — GRAUER KASTEN HINTER DEN UNTERKATEGORIEN. Quelle gemessen, nicht geraten: my-nova.css `.box-categories .dropdown .collapse{background:rgb(245,247,250)}` (0,3,0), zusaetzlich identisch im Inline-Block des Backend-CSS. Auf der weissen Karte wirkte der Block wie ein Fremdkoerper; die Karte traegt die Flaeche jetzt selbst. Anker mit (0,4,0) — schlaegt beide Quellen ohne !important (Fehlerregister 16). Die Einrueckung der Unterzeilen bleibt NOVAs. */ aside.sidepanel-left .box-categories .dropdown .collapse{background:transparent} /* Preis-Slider auf CI (NOVA-LIVE-LEHREN C.4: NOVA-Gelb sitzt am Handle) */ aside.sidepanel-left .noUi-connect{background:var(--ct-volt)} /* ct: 20260820-28 — Rolle Bedienelement fuer Griff und Preisfelder. */ aside.sidepanel-left .noUi-handle{ background:var(--ct-ink);border-color:var(--ct-ink);border-radius:var(--ct-radius-sm);box-shadow:none; } /* ct: 20260820-30 — PREISFELDER FUELLEN DIE KARTENBREITE. Befund nach der Kartenumstellung, im Browser gemessen: die Karte nimmt 2x20px Polster, NOVA legt die beiden Felder als `.col-5` in eine `no-gutters`-Row (2x41,67 % = 170 von 204px) und laesst 34px ungenutzt in der Mitte stehen. Das Eingabefeld blieb dadurch 41px breit und schnitt seinen eigenen Platzhalter ab — sichtbar stand "120" statt "1200" (Fehlerregister 3b: Elemente fuellen ihre Zeile nicht, und der Rest wird zur Fehlanzeige). Zwei gleiche Spalten mit einem Abstand aus der Skala statt eines Bootstrap-Rasters, das fuer eine breitere Sidebar gedacht war. */ aside.sidepanel-left .price-range-inputs{gap:8px} aside.sidepanel-left .price-range-inputs > .col{flex:1 1 0;max-width:none} aside.sidepanel-left .price-range-inputs .form-control{min-width:0} /* ct: 20260820-28 — Preisfeld + "EUR"-Anhang sind EINE Gruppe: nur die Aussenecken runden (gemessen war der Anhang kantig, waehrend das Feld links gerundet war — halb gerundete Gruppe). Gleiche Regel wie beim PDP-Stepper. */ aside.sidepanel-left .price-range-inputs .form-control{ border-radius:var(--ct-radius-sm) 0 0 var(--ct-radius-sm);font-size:12.5px; } aside.sidepanel-left .price-range-inputs .input-group-text{ border-radius:0 var(--ct-radius-sm) var(--ct-radius-sm) 0; } /* --- Beratungsbox (Mockup .helpbox) --------------------------------------- */ /* ct: 20260820-30 — Radius-Rolle von `lg` auf `md` korrigiert und der eigene 4px-Abstand entfernt. Seit die Filtergruppen echte Karten sind, ist die Beratungsbox EINE Karte unter Karten derselben Spalte — zwei Rundungen und ein Sonderabstand in einer Spalte sind genau der gewuerfelte Wert aus Fehlerregister 3. Sie greift jetzt denselben Abstand wie `.box`. */ .ct-helpbox{background:var(--ct-ink);color:#fff;padding:26px 24px;border-radius:var(--ct-radius)} .ct-helpbox-icon{width:22px;height:22px;color:var(--ct-volt);margin-bottom:14px} .ct-helpbox-h{ font-family:var(--ct-font-display);font-weight:700;font-size:15px; letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0 0 9px; } .ct-helpbox-p{font-size:12.5px;line-height:1.55;color:var(--ct-dmuted);margin:0 0 18px} .ct-helpbox-cta{width:100%;height:44px;font-size:11.5px;padding:0 18px} /* --- Unterkategorie-Leiste ------------------------------------------------- */ /* ct: NOVA rendert die Unterkategorien (`.content-cats-small`) als 4er-Raster mit nacktem Bild + unterstrichenem Link. Die erste CT-Fassung (20260820-28) machte daraus Karten in der Sprache der Produktliste — mit den echten Wawi-Bildern (21.08.) sahen zwei Unterkategorien aus wie zwei riesige Artikelkarten (Ben: "viel zu gross, wirkt als waer das ne Artikelkarte"). Das Mockup kennt keine Unterkategorie-Kacheln (Register 25) — also ist die Rolle NAVIGATION, nicht Angebot: kompakte Chips, Thumbnail links, Name rechts, so viele nebeneinander wie passen. Kein Bootstrap-Spaltenraster mehr, die Breite folgt dem Inhalt. 07.09.2026 (Kundenbefund Ralf, Mail 07.09. mit Wunschbild): die inhaltsbreiten, zentriert umbrechenden Chips (3+2+1) "werden nicht korrekt dargestellt" — Ralf hat drei gleich breite Karten nebeneinander abgesegnet (Bild links, Name, Kurztext). Ab md ist die Leiste deshalb ein 3er-Grid mit voller Klickflaeche; mobil bleibt die Textchip-Zeile unveraendert. */ #content .content-cats-small{ display:flex;flex-wrap:wrap;gap:12px; margin:0 0 var(--ct-stack-lg); } /* Die Spalten tragen Bootstrap-Klassen (col-md-3 …), nicht `.col` — gemessen: flex 0 0 25% blieb stehen, der Chip wurde 236 statt ~170px. Attribut- selektor statt Klassenrate; NOVAs clearfix::after waere im Flex-Wrap ein Phantom-Item (LEHREN I.2) und faellt weg. */ #content .content-cats-small > [class*="col"]{ flex:0 0 auto;width:auto;max-width:100%;padding:0;margin:0; } #content .content-cats-small::after{display:none} #content .content-cats-small .sub-categories{ position:relative; display:flex;flex-direction:row;align-items:center;gap:12px; height:auto;min-height:var(--ct-control-h-lg); padding:6px 18px 6px 6px; /* ct: 07.09. — Kartengrund weiss. Ein graues Karten-Backing (Kundenscreenshot) ergibt erst Sinn, wenn die Produktbilder FREIGESTELLT sind; die Wawi-Bilder haben aktuell weisse Kaesten -> grau wuerde nur einen weissen Kasten auf hellgrauer Karte zeigen. Bis dahin weiss, Thumbnail-Tile grau als Rahmen. */ border:1px solid var(--ct-line);border-radius:var(--ct-radius-sm); background:#fff; } #content .content-cats-small .sub-categories:hover{border-color:var(--ct-ink)} /* ct: Ralf 07.09.: Karten "nicht sauber klickbar" — NOVA verlinkt nur Bild und Namen, Kurztext und Polster waren tot. Bootstrap-Muster stretched-link: das Namens- bekommt ein absolut gefuelltes ::after ueber die ganze Karte (Anker ist `position:relative` an `.sub-categories`). */ #content .content-cats-small .caption a::after{content:"";position:absolute;inset:0;z-index:1} #content .content-cats-small .subcategories-image{ flex:0 0 56px;width:56px;height:56px; display:flex;align-items:center;justify-content:center; padding:0;margin:0;border:0;border-radius:calc(var(--ct-radius-sm) - 2px); background:var(--ct-band-paper);overflow:hidden; } /* NOVA haengt `margin-bottom:16px` an die Bildzone und macht das drumherum 72px hoch — der Chip wurde 86 statt 68. Das ist im Chip nur Huelle. */ #content .content-cats-small .sub-categories > a{display:flex;line-height:0} #content .content-cats-small .subcategories-image img{ width:100%;height:100%;object-fit:cover; } /* Lange Titel (Ben-Frage 21.08.): der Chip waechst mit dem Text, bis die Zeile voll ist — dann bricht der Titel im Chip um, statt ueberzulaufen. Deshalb kein nowrap, sondern flex-shrink + min-width:0 am Textblock. */ #content .content-cats-small .sub-categories > div:not(.subcategories-image){ display:block;flex:0 1 auto;min-width:0; } #content .content-cats-small .caption{padding:0;margin:0;text-align:left} #content .content-cats-small .caption a{ font-family:var(--ct-font-display);font-weight:700; font-size:12.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ct-text);text-decoration:none; display:inline-block;line-height:1.3; } #content .content-cats-small .caption a:hover{color:var(--ct-text);text-decoration:underline} /* Kurztext (NOVA: `truncate:68`, per d-none d-md-block erst ab md sichtbar). Bisher ungestylt — Bootstraps .small lief mit und weitete den Chip auf. */ #content .content-cats-small .item_desc{ margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--ct-muted); } /* Ralf 07.09. (steht NACH den Basisregeln — gleiche Spezifitaet, Reihenfolge entscheidet): ab md ein 3er-Grid gleich breiter Karten. NOVAs eigenes md=4 waere dasselbe Raster, traegt aber Gutter-Polster und clearfix (LEHREN I.2), deshalb Grid am Container statt Bootstrap-Spalten. Die Karte fuellt ihre Zelle (height:100%) — gleiche Hoehe je Reihe auch bei fehlendem Kurztext. Titel 13.5px statt der Chip-Groesse 15.5: zwischen 768 und 1199 ist die Textspalte ~130px breit, "SAIGE-DOPPELKABINE" muss dort umbrechen duerfen (overflow-wrap) statt ueber die Karte zu laufen (LEHREN I.3). */ @media (min-width: 768px){ #content .content-cats-small{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} #content .content-cats-small > [class*="col"]{width:auto;max-width:none;min-width:0} #content .content-cats-small .sub-categories{height:100%;gap:14px;padding:10px 16px 10px 10px} #content .content-cats-small .sub-categories > div:not(.subcategories-image){flex:1 1 auto} #content .content-cats-small .caption a{font-size:13.5px;overflow-wrap:anywhere} } /* Mobil blendet NOVA das Bild aus (d-none d-md-flex) — der Chip wird zum reinen Textchip mit gleichem Polster links wie rechts. */ @media (max-width: 767.98px){ #content .content-cats-small .sub-categories{padding:0 16px} } /* --- Toolbar (Sortierung/Anzeige/Trefferzahl) ------------------------------ */ /* ct: Mockup .toolbar — eine Zeile, unten Trennlinie. NOVAs
    davor/danach ersetzt die Linie der Zeile selbst, sonst stehen zwei Linien uebereinander. */ #result-wrapper hr.productlist-page-nav-top{display:none} #result-wrapper .productlist-page-nav{ align-items:center; padding-bottom:18px;margin-bottom:26px; border-bottom:1px solid var(--ct-line); } #result-wrapper .productlist-page-nav .displayoptions{display:flex;flex-wrap:wrap;gap:10px} #result-wrapper .productlist-item-info{ margin-left:auto;font-size:13px;color:var(--ct-muted); } /* ct: Mockup .toolbar — die Trefferzahl steht LINKS, die Schalter rechts. NOVA rendert die Spalten in umgekehrter Reihenfolge; statt das Markup umzubauen dreht flex `order` die Zeile (nur ab xl, darunter stapelt NOVA ohnehin und die Zahl gehoert unter die Schalter). */ @media (min-width: 1200px){ #result-wrapper .productlist-page-nav-header-m .productlist-item-info{ order:-1;margin-left:0;margin-right:auto; } #result-wrapper .productlist-page-nav-header-m .displayoptions{margin-left:auto} } .productlist-sort .custom-select, .productlist-sort .btn, #content .custom-select{ border-radius:var(--ct-radius-sm);border-color:var(--ct-line); font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600; } #result-wrapper .productlist-page-nav .btn-outline-secondary{ border-radius:var(--ct-radius-sm);border-color:var(--ct-line);color:var(--ct-text); font-size:12px;font-weight:600;letter-spacing:.04em; } #result-wrapper .productlist-page-nav .btn-outline-secondary:hover, #result-wrapper .productlist-page-nav .btn-option.active{ background:var(--ct-ink);border-color:var(--ct-ink);color:#fff; } /* ct: Unter xl bricht NOVA die Toolbar in zwei Zeilen (displayoptions = col-12). Dann steht die Trefferzahl LINKS auf derselben Fluchtlinie wie die Schalter — nicht rechts/mittig im linksbuendigen Layout. */ @media (max-width: 1199.98px){ #result-wrapper .productlist-page-nav-header-m .productlist-item-info{ margin-left:0;margin-top:14px;text-align:left; } } /* --- Produktraster --------------------------------------------------------- ⚠️ ct: 20260820-30 (Ben, 20.08.2026) — ALLES AB HIER IST AUF DIE GALERIE-ANSICHT GESCOPET. Bens Beanstandung: "und wie zu erwarten, obwohl im spanl projekt explizit als ULTRA-FAIL angeführt -> du hast hier auch wieder die listen,ansicht KOMPLETT reingeschissen" (Fehlerregister 23, dritte Wiederholung; FEHLERMUSTER.md Muster 3). URSACHE, am DOM gemessen — nicht geraten: NOVA rendert BEIDE Ansichten in demselben `#product-list` und unterscheidet sie ueber Klassen: Galerie: #product-list.layout-gallery > .product-wrapper > .productbox.productbox-column Liste: #product-list.layout-list > .product-wrapper > .productbox.productbox-row Die Regeln hingen bis -29 an `#product-list` bzw. `.productbox`, trafen also BEIDE. Wirkung in der Liste (gemessen 1440): - `flex-basis:50%` legte die Listenzeilen ZWEISPALTIG nebeneinander; - dadurch war NOVAs `.productbox-details.col-xl-4` nur noch 124px breit und die 50/50-Zeile darin 51px — "Artikelnummer:" (51px) und der Wert "CT-B03-45-GN" standen mit `text-nowrap-util` UEBEREINANDER. Das ist die Ueberlappung, die Ben gesehen hat; sie kam NICHT aus einer Farb-/Typo-Regel, sondern aus der halbierten Zeilenbreite. - `.product-list .row{align-items:flex-start}` und das 24px-Spaltenpolster zogen zusaetzlich NOVAs Listenraster auseinander. BENS DEFAULT-LOESUNG (Fehlerregister 23, keine Diskussion): Die Listenansicht bleibt NOVA-STANDARD UNANGETASTET und bekommt NUR die Farbgebung auf CI. Die Farb-/Typo-Regeln weiter unten haengen deshalb bewusst weiter an `.productbox` (Farbe gilt fuer beide Ansichten), die LAYOUT-Regeln ausnahmslos an `.layout-gallery` / `.productbox-column`. Wer hier eine Layout-Regel ergaenzt, scopet sie mit. */ /* ct: Spaltenzahl folgt dem Mockup (3, .pgrid.c3) statt NOVAs 4 — und bei genau 1/2 Treffern der TREFFERZAHL, damit keine halbe Zeile Totflaeche stehen bleibt (Fehlerregister 3b). Die Kacheln rendern Bootstrap-Spalten aus NOVA, deshalb ueber Flex-Basis statt Spaltenklassen. #product-list (1,1,0) schlaegt NOVAs .col-xl-3 (0,1,0) — kein !important. */ #product-list.layout-gallery .product-wrapper{flex:0 0 100%;max-width:100%} @media (min-width: 576px){ #product-list.layout-gallery .product-wrapper{flex:0 0 50%;max-width:50%} } @media (min-width: 992px){ #product-list.layout-gallery .product-wrapper{flex:0 0 33.3333%;max-width:33.3333%} #product-list.layout-gallery:has(> .product-wrapper:nth-child(2):last-child) .product-wrapper{flex-basis:50%;max-width:50%} #product-list.layout-gallery:has(> .product-wrapper:only-child){justify-content:center} #product-list.layout-gallery:has(> .product-wrapper:only-child) .product-wrapper{flex-basis:50%;max-width:50%} } /* ct: Reihenabstand als Gutter-Muster — Abstand an JEDER Karte, negativer Ausgleich am Container. So bleibt unter der letzten Reihe kein Totraum (Fehlerregister 5) und es braucht kein :nth-child-Zaehlen (NOVA-LIVE-LEHREN F.5). Die zweite Selektorzeile schlaegt NOVAs `#product-list .product-wrapper:not(:last-child){margin-bottom:4rem}` bei gleicher Spezifitaet ueber die Ladeordnung. */ #product-list.layout-gallery{margin-bottom:-32px} #product-list.layout-gallery .product-wrapper, #product-list.layout-gallery .product-wrapper:not(:last-child){margin-bottom:32px} #product-list.layout-gallery .row{align-items:flex-start} /* ct: ⚠️ ERSTES von ZWEI !important dieser Datei — und hier der einzige Weg: jtl.evo.js (registerImageHover) friert bei `window load` die gemessene Hoehe als INLINE-Style auf jedem .product-wrapper ein. Gemessen wurde 415px, der fertige Kartenhalt ist 511px — die Karte ragte 96px ueber ihre Spalte und ueberlappte die untere Pagination. Ein Inline-Style ist per Spezifitaet nicht schlagbar (Fehlerregister 16 greift hier ausdruecklich NICHT: es ist kein Selektor-Duell). ⚠️ ct: 20260820-34 (Befund N3) — ENTSCOPET von `.layout-gallery` auf `#product-list`. Bis -33 stand hier die Annahme, "in der Listenansicht misst NOVA seine eigene Kachel korrekt aus". Das ist WIDERLEGT (gemessen 1440, Listenansicht): jeder `.product-wrapper` traegt `height:399px` inline, die `.productbox-row` darin ist 262px hoch — 137px Totraum JE ZEILE, dreimal untereinander. Genau Fehlerregister 17 (Fix zu eng gescopet, Befund kommt auf der naechsten Ansicht wieder): der Inline-Style ist in BEIDEN Ansichten falsch, also gehoert die Gegenmassnahme an den gemeinsamen Anker. ⚠️ Reproduktion braucht einen VIEWPORT-WECHSEL — jtl.evo.js schreibt die Hoehe bei `window load`/resize; ein blosses Neuladen zeigt den Defekt nicht (bei uns: 1440 -> 1200 -> 1440). */ #product-list .product-wrapper{height:auto !important} /* --- Listenansicht: NOVA-Struktur, CI-Farbe, Knopf SICHTBAR ---------------- ct: 20260820-34 (Befunde N1/N2, Fehlerregister 23 — VIERTE Wiederholung). Bens Default aus Klasse 23 gilt weiter: Struktur bleibt NOVA, hier kommt NUR dazu, was der Kunde sonst gar nicht bedienen kann. N1 KAUFKNOPF UNSICHTBAR (gemessen 1440, Listenansicht): NOVA versteckt beide `.productbox-onhover`-Bloecke — die Quick-Actions im Bild und den ganzen Kaufblock (Stepper + "In den Warenkorb") — per `.productbox.productbox-hover:not(:hover,:focus,.focus) .productbox-onhover {opacity:0}` (my-nova.css, ab md). In der GALERIE ist das unschaedlich, weil unsere Kachel den Knopf dauerhaft zeigt; in der LISTE blieb er auf `opacity:0` stehen und wurde erst sichtbar, wenn der Zeiger zufaellig den unsichtbaren Block selbst traf. Eine Kategorieliste ohne sichtbaren Kaufknopf ist kein Hover-Feinschliff, sondern eine tote Ansicht. Gegenregel per SPEZIFITAET, nicht per !important (Fehlerregister 16): `#product-list.layout-list .productbox-row .productbox-onhover` = (1,3,0) schlaegt NOVAs (0,4,0) ueber den ID-Anker. */ #product-list.layout-list .productbox-row .productbox-onhover{opacity:1} /* Quick-Actions (Vergleichen/Merken) genauso dauerhaft sichtbar — sie sind in der Galerie ebenfalls dauerhaft (.ct-quick-actions) und waeren hier sonst die zweite unsichtbare Bedienflaeche (Fehlerregister 13: derselbe Baustein, zwei Huellen). Die Optik der Knoepfe kommt aus ct-base.css, greift also beide Instanzen. */ #product-list.layout-list .productbox-row .productbox-quick-actions{opacity:1} /* FARBE auf CI — und NUR die Farbe (Klasse-23-Default). Die Kreisform und NOVAs Groesse bleiben unangetastet; gemessen war der Icon-Ton rgb(112,112,112), ein Grauwert ausserhalb unserer Skala. */ #product-list.layout-list .productbox-row .productbox-quick-actions .btn{ color:var(--ct-muted);border-color:var(--ct-line); } #product-list.layout-list .productbox-row .productbox-quick-actions .btn:hover, #product-list.layout-list .productbox-row .productbox-quick-actions .btn.on-list{ background:var(--ct-ink);border-color:var(--ct-ink);color:#fff; } /* N2 KAUFBLOCK RAGT UEBER DIE ZEILENKANTE (gemessen: dR = -5px). Ursache ist kein eigener Wert, sondern Bootstraps `.form-row {margin-left:-5px;margin-right:-5px}` — der Block traegt beide Klassen (`form-row productbox-onhover productbox-actions`) und haengt damit 5px ueber der Kante der Zeile. Fehlerregister 2 / FEHLERMUSTER 2: ein Overlay auf oder ueber der Kante ist schon im Ruhezustand der Fehler. Randausgleich raus; das 5px-Polster der Kinder-Spalten bleibt und wird zum Innenabstand — der Kaufblock steht danach vollstaendig INNERHALB der Zeile. */ #product-list.layout-list .productbox-row .productbox-onhover.form-row{ margin-left:0;margin-right:0; } /* --- Produktkachel (NUR Galerieansicht) ------------------------------------ */ .productbox-column{ border:1px solid var(--ct-line); /* ct: 20260820-28 — Rolle Karte. overflow:hidden ist Pflicht: Bildzone und die Trennlinie der Preiszeile laufen bis an die Kartenkante und stuenden sonst ueber der Rundung. ⚠️ Genau dieses overflow schneidet jedes Overlay ab, das auf der Kante sitzt — die Einrueckung dagegen steht in ct-base.css und ist kein Zufall, sondern Bedingung. */ border-radius:var(--ct-radius); overflow:hidden; background:#fff; margin-bottom:0; } .productbox-column:hover{border-color:var(--ct-ink);box-shadow:0 10px 28px rgba(13,15,14,.10)} .productbox-column .productbox-inner{padding:0 0 24px} /* ct: Innenpolster der Kachel EINMAL festlegen (Mockup .pc-b/.pc-f: 24px). NOVA baut die Kachel als Bootstrap-row mit -16px Randausgleich; dadurch sass der Text auf der Kartenkante, waehrend die Preiszeile ihre eigenen 18px mitbrachte — zwei Fluchtlinien in einer Karte. Randausgleich raus, Polster an die Spalten. Die Bildzone bleibt vollbreit, damit ihre Trennlinie ueber die ganze Kartenbreite laeuft. */ .productbox-column .productbox-inner > .row{margin-left:0;margin-right:0} .productbox-column .productbox-inner > .row > .col{padding-left:var(--ct-card-pad);padding-right:var(--ct-card-pad)} .productbox-column .productbox-inner > .row > .col:has(.productbox-image){padding-left:0;padding-right:0} /* Bildzone: Weissbuehne (F.2: contain, Studiogruende verschmelzen) */ .productbox-column .productbox-images{background:#fff;border-bottom:1px solid var(--ct-line)} /* ct: 20260820-34 (Befund 14) — Hoehendeckel der Bildbuehne, Begruendung am Token `--ct-pcard-stage-max` in ct-base.css. ⚠️ Der Deckel haengt an `.productbox-image` (dem `.square`-Wrapper, der die Hoehe erzeugt), NICHT an `.productbox-images` (der Zone). Erster Versuch war die Zone — Ergebnis war ein Fall von Fehlerregister 1: die Zone schrumpfte auf 360, ihr `overflow` ist aber `visible`, der quadratische Wrapper blieb 517px und ragte 157px UEBER den Kartentitel (im Screenshot sichtbar, in der Zonen-Messung nicht). Deshalb steht der Deckel dort, wo die Hoehe entsteht. ⚠️ Und an BEIDEN Wrappern: NOVA legt ein zweites, absolut positioniertes Hover-Bild als `.productbox-image.s` ueber das erste (`.f`). Ein Deckel nur am sichtbaren Bild waere genau die Konstellation aus Fehlerregister 1 — zwei Wrapper, zwei Hoehen, das Hover-Bild springt. Die gemeinsame Klasse trifft beide. */ .productbox-column .productbox-image{max-height:var(--ct-pcard-stage-max)} /* Vergleichen/Merken dauerhaft oben rechts (Mockup .pc-cmp), nicht on-hover. ct: 20260820-30 — der EINZUG steht nicht mehr hier: bis -29 waren es 10px, also 2px INNERHALB der 12px-Kartenrundung und damit ein Overlay auf der Rundungskante (Fehlerregister 2). Position und Einzug liegen jetzt in ct-base.css auf NOVAs `.productbox-quick-actions` — dieselbe Regel greift damit auch die Instanz der Listenansicht, die diese ct-Klasse gar nicht traegt (Fehlerregister 13). Hier bleibt nur der z-index, weil unsere Karte im Gegensatz zu NOVAs eine eigene Stapelordnung braucht. */ .ct-quick-actions{z-index:2} /* ct: ⚠️ ZWEITES und letztes !important: NOVAs `.badge-circle-1` setzt `border-radius:50%!important`. Innerhalb der important-Ebene entscheidet wieder die Spezifitaet (Fehlerregister 16) — `.ct-quick-actions .btn` (0,2,0) schlaegt `.badge-circle-1` (0,1,0). Runde Knoepfe widersprechen der kantigen Designsprache; die Klasse steckt in NOVAs comparelist_button.tpl/wishlist_button.tpl, die auch die Artikelseite nutzt — dort einzugreifen waere teurer als diese eine Zeile. */ .ct-quick-actions .btn{ /* ct: 20260820-28 — Rolle Bedienelement statt bisher kantig; das !important bleibt, weil die Gegenregel (.badge-circle-1{border-radius:50%!important}) selbst auf der important-Ebene liegt. */ border-radius:var(--ct-radius-sm) !important;background:#fff;border:1px solid var(--ct-line); color:var(--ct-muted);opacity:1;box-shadow:none; width:38px;min-width:38px;height:38px;padding:0; } .ct-quick-actions .btn + .btn{margin-left:6px} .ct-quick-actions .btn:hover, .ct-quick-actions .btn.on-list{background:var(--ct-ink);border-color:var(--ct-ink);color:#fff} /* Kicker / Titel — Textspalte darf schrumpfen (Fehlerregister 15). ct: 20260820-30 — `min-width:0` bleibt bewusst UNGESCOPET: es ist kein Gestaltungsmittel, sondern die Gegenmassnahme gegen Flex-Items, die nie unter ihr laengstes Wort schrumpfen (NOVA-LIVE-LEHREN I.3). In der Listenansicht kann die Regel nichts verschieben, aber denselben Ueberlauf verhindern — sie gehoert deshalb an beide Ansichten. */ .productbox .productbox-image, .productbox .productbox-inner > .row > .col{min-width:0} .ct-pcat{ display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ct-muted);min-height:16px;margin-bottom:6px; } /* ct: 20260820-43 (Ben-Review) — der Kicker KLEBTE direkt an der Bildzonen- Trennlinie (Desktop wie mobil gemeldet). Luft nach oben nur in der Kategorie-Kachel; die .ct-pgrid-Karten (Startseite/PDP) haben ihren eigenen Rhythmus und waren nicht beanstandet. */ .productbox-column .ct-pcat{margin-top:14px} /* ct: 20260820-30 — TYPOGRAFIE der Kachel ist Gestaltung, keine Farbe, und damit Galerie-only (Fehlerregister 23). */ .productbox-column .productbox-title, .productbox-column .productbox-link{ font-family:var(--ct-font-text);font-weight:600;font-size:15px;line-height:1.35; } /* ct: NOVA unterstreicht global jeden Link (`a:not(.btn)`) und faerbt ihn grau — in der Kachel ist der Titel aber die Ueberschrift, nicht ein Fliesstext- Link (Mockup .pc-n). Gleicher Anker, hoehere Spezifitaet statt !important. Der Unterstrich kommt beim Hovern zurueck, damit die Klickbarkeit sichtbar bleibt. Bewusst NUR in der Kachel — der globale Unterstrich bleibt. ct: 20260820-30 — bleibt fuer BEIDE Ansichten: das ist die FARBGEBUNG, die die Listenansicht laut Bens Default-Loesung bekommen soll (CI-Ink statt NOVAs rgb(82,82,82)). */ .productbox .productbox-title, .productbox .productbox-link, .productbox .productbox-title a, .productbox a.productbox-link{color:var(--ct-text);text-decoration:none} .productbox .productbox-title a:hover, .productbox a.productbox-link:hover{color:var(--ct-text);text-decoration:underline} /* ct: Titel auf zwei Zeilen reservieren (Mockup .pc-n{min-height:63px}) — sonst sitzen Preis und CTA benachbarter Karten auf zwei Hoehen. NOVA klammert den Text ohnehin auf zwei Zeilen (.text-clamp-2). ⚠️ Galerie-only: In der Liste stehen die Kacheln untereinander, dort gibt es keine Nachbarkarte, mit der etwas fluchten muesste — ein min-height erzeugt dort nur die tote Flaeche, die Ben beanstandet hat. */ .productbox-column .productbox-title{min-height:41px} .productbox-column .item-delivery-status{min-height:42px} /* Preis + CTA in einer Zeile; bei Enge stapelt der Button INHALTSUNABHAENGIG (flex-wrap statt Fensterbreiten-Breakpoint — I.3b). */ .ct-price-row{ display:flex;align-items:flex-end;justify-content:space-between;gap:12px; flex-wrap:wrap; padding:12px 0 0;margin-top:10px;border-top:1px solid var(--ct-line); } .ct-price-row .price{ font-family:var(--ct-font-display);font-weight:900;font-size:27px;line-height:1; color:var(--ct-text); } .ct-price-vat{display:block;font-size:10.5px;color:var(--ct-muted);margin-top:4px} .ct-price-vat a{color:var(--ct-muted);text-decoration:underline} .ct-cartbtn{ border-radius:var(--ct-radius-sm); /* ct: 20260820-28 — Rolle Bedienelement */ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:12px 16px;line-height:1;max-height:none; /* ct: CTA immer auf EIGENER Zeile und vollbreit (Mockup .pc-buy .btn{flex:1}). Mit `flex:1 1 auto` schrumpfte er auf schmalen Karten neben den Preis — auf 390px stand die Kachel dann anders als auf dem Desktop, und der Tap-Bereich war halb so gross. `flex-basis:100%` erzwingt den Umbruch inhaltsunabhaengig, nicht ueber einen Fensterbreiten-Breakpoint. */ flex:1 0 100%; } /* ct: 20260820-28 (Ben, 20.08.2026) — DIE EIGENE FARBFASSUNG DER KACHEL IST ENTFALLEN. Hier stand bis -27 ein Voll-Override auf Ink mit Volt-Icon ("die Kachel darf den Hero-CTA nicht ueberbieten") — das war die Lesart der FALSCHEN Mockup-Iteration. In mockup-kategorie-v1.pdf ist "In den Warenkorb" auf jeder Karte derselbe blaue Primaerknopf wie Suche und Hero-CTA. Der Knopf traegt .btn-primary, also greift jetzt der globale CT-Buttonstil aus ct-base.css (Blau, Hover --ct-cta-d, weisser Text) — EINE Quelle fuer alle Kauf-CTAs statt einer Zweitfassung je Seitentyp (Fehlerregister 17). Das Icon erbt damit `currentColor` = Weiss; die frueheren svg-Regeln sind deshalb ebenfalls weg und nicht etwa vergessen. */ /* NEU-/Aktions-Badge auf CI (Mockup .pc-tag: Ink-Flagge oben links). ct: 20260820-30 — POSITION, RUNDUNG UND ZIPFEL SIND NACH ct-base.css UMGEZOGEN. Bis -29 stand `left:0;top:0` hier UND in ct-startseite.css — zwei Fassungen desselben Fixes, beide auf der Kartenkante, und damit die Ursache von Bens Beanstandung (Fehlerregister 2 + 17). Nicht wieder hier positionieren; hier lebt nur noch die FARBE/TYPO, die bewusst fuer JEDE Kachelinstanz gilt (Grid, Liste, Slider — Fehlerregister 13). */ .productbox .badge{border-radius:var(--ct-radius-sm)} .productbox .ribbon.productbox-ribbon{ background:var(--ct-ink);color:#fff; font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; } /* --- Listenansicht: Innenpolster (Ben-Review 20.08.) ----------------------- */ /* ct: 20260820-43 — die Listen-Karte (.productbox-row) hatte padding 0: Bild und Titel sassen exakt auf der Kartenkante (gemessen 1889: Karten-x = Bild-x = Titel-y, "alles klebt irgendwie an einem rand"). NOVA gibt erst dem Hover-Zustand Luft — deshalb "beim hovereffekt passts dann wieder". Das Ruhe-Layout bekommt dasselbe Polster wie die Galerie-Kachel. */ #product-list .productbox-row .productbox-inner{padding:var(--ct-card-pad)} /* ct: O-10 (Befund E, 21.08.2026) — die Listenkarte hatte KEINE Flaeche: auf dem Seitengrund (--ct-band-paper) stand sie rahmenlos, mobil zu zweit nebeneinander ohne erkennbare Karte. Gleiche OBERFLAECHE wie .productbox-column (Rahmen, Radius, Weiss, Hover) — Layout bleibt NOVA (Register 23, Bens Default: Liste nur farblich auf CI). */ #product-list .productbox-row{ border:1px solid var(--ct-line);border-radius:var(--ct-radius); background:#fff;overflow:hidden; } #product-list .productbox-row:hover{border-color:var(--ct-ink);box-shadow:0 10px 28px rgba(13,15,14,.10)} /* --- Mobiler Filter-Button (Ben-Review 20.08., "filter ist verloren") ------ */ /* ct: 20260820-43 — der Toggle stand als 80px-Bootstrap-Knopf zwischen den Bloecken. Volle Breite + CT-Bedienelement-Optik, nur unter lg (ab lg zeigt NOVA die Sidebar und den Knopf gar nicht). */ @media (max-width: 991.98px){ /* ct: 20260820-44 (Abnahme-Nachtrag) — NOVA rendert den Filter-Toggle MEHRFACH (Toolbar-Instanz ohne #js-filters-ID, Register 13); der data-target-Selektor trifft jede Instanz. gap gegen Icon-am-Label (Befund N-6). ct: 20260820-45 (Nachmessung Punkt 7 + Zusatz A) — width:100% am Button griff ins Leere: die ELTERNSPALTE .filter-collapsible-control kollabierte auf 126px (390) bzw. 42px (768) und liess Icon und Text ueber den Kasten laufen. Die Spalte bricht jetzt als volle Zeile aus der Toolbar aus — der Button erbt die Breite. Rand-Deklaration bleibt hier (Ink). */ /* ct: 20260820-46 — der wahre Flaschenhals sass noch eine Ebene hoeher (Ahnenkette gemessen: col 126 < row 126 < div 94 < .result-option-wrapper 94, d-inline-block schrumpft auf Inhalt). Nur die FILTER-Instanz wird vollbreit (:has) — Sortierung/Artikel-pro-Seite bleiben Chips. */ #result-wrapper .result-option-wrapper:has(.filter-collapsible-control){ display:block;width:100%; } #result-wrapper .filter-collapsible-control{ flex:0 0 100%;max-width:100%;width:100%; margin-top:10px; } /* ct: 20260820-46 — `#result-wrapper` vor beiden Selektoren ist KEIN Zierrat: die eigene Toolbar-Regel `#result-wrapper .productlist-page-nav .btn-outline-secondary` (1,2,0) schlug sonst die Ink-Kante (gemessen: Rand blieb --ct-line). */ #result-wrapper #js-filters, #result-wrapper .productlist-page-nav button[data-target="#collapseFilter"]{ display:inline-flex;align-items:center;justify-content:center;gap:8px; width:100%;min-height:var(--ct-control-h); border:1px solid var(--ct-ink);color:var(--ct-ink);background:#fff; border-radius:var(--ct-radius-sm); font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } #result-wrapper #js-filters:hover, #result-wrapper #js-filters:focus, #result-wrapper .productlist-page-nav button[data-target="#collapseFilter"]:hover, #result-wrapper .productlist-page-nav button[data-target="#collapseFilter"]:focus{background:var(--ct-ink);color:#fff} } /* --- Kategoriebeschreibung unter der Liste --------------------------------- */ #content .category-description, #content .desc-text{color:var(--ct-muted);font-size:14.5px;line-height:1.7} /* --- Pagination ------------------------------------------------------------ */ /* ct: Mockup .pager — Trennlinie oben, 34px Abstand zur letzten Kartenreihe. */ #result-wrapper hr.productlist-page-nav-bottom{display:none} #result-wrapper .productlist-page-nav:not(.productlist-page-nav-header-m){ border-bottom:0;border-top:1px solid var(--ct-line); margin-top:34px;margin-bottom:0;padding-top:24px;padding-bottom:0; } .pagination .page-link{border-radius:var(--ct-radius-sm);color:var(--ct-text)} /* ct: 20260820-28 — Rolle Bedienelement */ /* ct: 20260820-44 (Abnahme-Befund N-1) — Bootstrap rundet NUR die Aussen- ecken von first/last mit hoeherer Spezifitaet (0,2,0) und schlug damit die pauschale Regel darueber: gemessen standen 2px/8px-Mischecken spiegel- verkehrt an den Kacheln. First/Last explizit auf dasselbe Token. */ .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link{border-radius:var(--ct-radius-sm)} .pagination .page-item.active .page-link{ background:var(--ct-ink);border-color:var(--ct-ink);color:#fff; } /* ct: 20260820-44 (N-1, Teil 2) — das "Artikel pro Seite"-Dropdown der Toolbar stand als weisses Rechteck ohne Kante auf dem Papier-Grund. */ #result-wrapper .productlist-page-nav .dropdown-menu{ border:1px solid var(--ct-line);border-radius:var(--ct-radius-sm); } /* ct: NOVAs Hover-Expand-Karte abschalten — Mockup will STATISCHE Karten, die ihren ganzen Inhalt zeigen. height:100% band die Box an die Spalte (Inhalt ragte unten raus, gemessen Box 429 vs Inhalt 509), und beim Hover riss .pos-abs die Karte aus dem Flow. */ #product-list .productbox.productbox-hover.productbox-column{height:auto} #product-list .productbox.productbox-hover.productbox-column:hover .productbox-inner.pos-abs, #product-list .productbox.productbox-hover.productbox-column:focus .productbox-inner.pos-abs, #product-list .productbox.productbox-hover.productbox-column.focus .productbox-inner.pos-abs{position:static} /* --- Zwischenbreiten: H1 und Kachelinhalt an die schmalere Spalte ----------- */ /* ct: Die Content-Spalte schrumpft unter 1200 deutlich (bei 992 traegt sie nur noch ~558px, davon geht der Modell-Zaehler ab). Gemessen brach die H1 dort am internen Bindestrich um ("ELEKTRO-PICK-"/"UP"). 36px traegt auch den laengsten Kategorienamen einzeilig. Gleiches Prinzip fuer Preis und CTA: drei Spalten a ~195px sind zu eng fuer die 27px-Preisstufe. */ @media (max-width: 1199.98px){ /* ct: 20260820-41 — `margin-bottom` greift wieder das Rollen-Token statt eines freihaendigen 34px. Gemessen bei 768 und 900: der Abstand Kopfband -> Toolbar war 34px, waehrend --ct-head-gap 40px sagt — ein Wert, der sich nur zwischen 992 und 1200 vom Rest der Site unterschied und den beim Fluchten sofort auffiel (FEHLERMUSTER 1: Einzelwerte statt durchgehaltener Skala). Die PADDING-Werte bleiben: sie sind das Innenmass des Bandes und oben begruendet (H1-Umbruch). */ .ct-cathead{padding:34px 30px 36px;margin-bottom:var(--ct-head-gap)} .ct-cathead-h1{font-size:32px} .ct-catcount{padding:16px 20px} .ct-catcount b{font-size:40px} .ct-price-row .price{font-size:22px} .ct-cartbtn{font-size:10px;letter-spacing:.04em;padding:12px 8px;gap:6px} } /* --- Unter lg: Sidebar bewusst gestalten (Fehlerregister 9) ---------------- */ /* ct: NOVA schiebt die Sidebar unter die Liste (order-last). Statt sie dort im Framework-Standard stehen zu lassen, wird sie zum abgesetzten Block: Kategorienliste zweispaltig, Beratungsbox darunter. */ @media (max-width: 991.98px){ aside.sidepanel-left{ margin-top:40px;padding-top:32px;border-top:1px solid var(--ct-line); } /* ct: 20260820-31 — `> .nav` statt `.nav`. Die alte Fassung traf auch die VERSCHACHTELTE Unterkategorien-Liste: gemessen bei 768 standen B03 und KH1 nebeneinander in zwei Rasterspalten und lasen sich damit wie zwei Geschwister von "Cargo-Trikes" statt wie dessen Kinder. Der Zweispalter gilt nur fuer die oberste Ebene. */ aside.sidepanel-left .nav-panel > .nav{ display:grid;grid-template-columns:repeat(2,1fr);column-gap:24px; } .ct-helpbox{margin-top:24px} .ct-helpbox-cta{max-width:280px} } /* ct: In der mobilen 2-Spalten-Ansicht brach "7.500,00 €" um (gemessen 390px) — kleinere Preisstufe unter md, inhaltsunabhaengig statt Breakpoint-Poker. */ @media (max-width: 767.98px){ .ct-cathead{ display:block;padding:28px 22px 30px;margin-bottom:28px; } /* ct: 24px — gemessen. Bei 32px brach "ELEKTRO-PICK-UP" am internen Bindestrich zu "ELEKTRO-PICK-"/"UP", bei 28px lief "SENIORENFAHRZEUGE" 12px ueber die Bandkante und brach als "SENIORENFAHRZEU"/"GE" mitten im Wort um (Fehlerregister 3). ⚠️ hyphens:auto rettet das NICHT — Chrome hat im Headless-Betrieb keine deutsche Trennhilfe geladen, der Umbruch blieb mitten im Wort. Bei 24px passt der laengste Kategoriename (SENIORENFAHRZEUGE, gemessen 291px) einzeilig in die 306px Bandbreite. */ .ct-cathead-h1{font-size:24px} .ct-catcount{margin-top:22px;text-align:left;display:inline-block;padding:14px 20px} .ct-catcount b{font-size:38px} .ct-price-row{padding:10px 0 0} .ct-price-row .price{font-size:20px} aside.sidepanel-left .nav-panel > .nav{grid-template-columns:1fr} } /* ===== Vergleichsliste ====================================================== ct: 20260820-35 (Befund B, Ben 20.08.2026 — Fehlerregister 23, Klasse "Framework-Zweitansicht"). Befund der Gesamtabnahme: die Seite war NIE angefasst worden. Gemessen (1440, 2 Artikel auf der Liste): - Produktbild 592x592px gerendert aus einer 509er-Quelle, Kopfzeile der Tabelle dadurch 723px hoch — eine Bildschirmhoehe fuer zwei Fotos; - Knoepfe im Bootstrap-Rohzustand (rgb(82,82,82), Radius 2px/0px, drei verschiedene Hoehen 43/35); - Zeile "Hersteller" mit zwei leeren Zellen (Guard jetzt in comparelist/index.tpl — hier bewusst NICHT per display:none, sonst bliebe die Zeile auch dann weg, wenn die Wawi Hersteller liefert). BENS DEFAULT AUS KLASSE 23, hier woertlich umgesetzt: NOVA-Struktur unangetastet (Tabelle bleibt Tabelle, sticky-Kopf bleibt sticky, keine Spalten umgebaut), es kommen NUR CI-Farben, die Rollen-Token und der Bilddeckel dazu. Keine einzige Layout-Umstellung. */ /* Seitenkopf im Stil der uebrigen Seitenkoepfe — Displayschrift, versal. Der Farbwert kommt aus der globalen h1-h3-Regel in ct-base.css. */ .comparelist-page-head, #content > .container > .h2:has(+ .hr-no-top){ font-family:var(--ct-font-display);font-weight:800; letter-spacing:-.02em;text-transform:uppercase; } /* BILDDECKEL. 220px ist Bens Vorgabe aus dem Fixpaket und zugleich das Mass, bei dem zwei bis vier Spalten nebeneinander noch auf einen Schirm passen. Gedeckelt wird die HOEHE am Bild selbst (nicht an der Zelle) — dieselbe Lehre wie bei der Produktkachel weiter oben: ein Deckel auf dem Container laesst das Bild darueber hinausragen (Fehlerregister 1). */ .comparelist .comparelist-item img{ max-height:220px;width:auto;max-width:100%; object-fit:contain; margin-left:auto;margin-right:auto; } /* Tabellenfarben auf CI: NOVAs Bootstrap-Grau raus, --ct-line rein. Die Labelspalte bekommt die Papierflaeche und die Label-Typografie, die im Projekt schon fuer Merkmalslisten gilt — damit liest sich die Tabelle wie die uebrigen Datenblaetter und nicht wie ein Rohgeruest. */ .comparelist .table, .comparelist .table td, .comparelist .table th{border-color:var(--ct-line)} .comparelist .table .comparelist-label{ background:var(--ct-band-paper); font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ct-muted); vertical-align:middle; } .comparelist .comparelist-item{background:#fff;vertical-align:top} .comparelist .comparelist-item a{color:var(--ct-text);font-weight:600} .comparelist .comparelist-item a:hover{color:var(--ct-cta)} /* Bedienelemente der Seite: EINE Hoehe und EIN Radius aus den Rollen-Token (Fehlerregister 11 — gemessen standen hier 43px und 35px nebeneinander). Bewusst nur auf dieser Seite gescopet: `.btn-outline-secondary` ist eine Bootstrap-Grundklasse, die im ganzen Shop laeuft; ein globaler Eingriff waere eine ganz andere Aenderung als dieses Fixpaket (Fehlerregister 17 in die andere Richtung — nicht jeder Fix gehoert an die Basis). */ #content:has(.comparelist) .btn-outline-secondary{ height:var(--ct-control-h); display:inline-flex;align-items:center; border-radius:var(--ct-radius-sm); border-color:var(--ct-line); color:var(--ct-muted); font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } #content:has(.comparelist) .btn-outline-secondary:hover, #content:has(.comparelist) .btn-outline-secondary:focus{ background:var(--ct-ink);border-color:var(--ct-ink);color:#fff; } /* ct: Die Gruppe "Alle anzeigen | Alle ausblenden" ist eine btn-group — dort traegt NOVA die Aussenrundung an den Randknoepfen. Innenkanten bleiben deshalb eckig, sonst stehen zwei Rundungen aneinander. */ #content:has(.comparelist) .btn-group > .btn-outline-secondary:not(:first-child){ border-top-left-radius:0;border-bottom-left-radius:0; } #content:has(.comparelist) .btn-group > .btn-outline-secondary:not(:last-child){ border-top-right-radius:0;border-bottom-right-radius:0; } /* ========================================================================== Mobiles Filter-Modal #collapseFilter (Abnahme-Befund N-9 / O-3, 21.08.2026) -------------------------------------------------------------------------- NOVA-Rohzustand gemessen @390: Titel und Gruppenzeilen in NOVA-Grau (rgb 82,82,82), Bootstrap-Modal-Polster, ~90px Leere ueber den Buttons (Accordion-Polster 16 + Margin 16 + letztes li 16 + Footer 32 = vier Einzelwerte), "Abbrechen" im Fliesstext neben einem Versalien-CTA, rohe Preis-Addons. Gleiche Typo wie die Filterkarte links (Gruppenkoepfe) und die Checkout-Buttons — keine dritte Bauweise. */ #collapseFilter .modal-content{border:0;border-radius:var(--ct-radius)} #collapseFilter .modal-header{ border-bottom:1px solid var(--ct-line); padding:var(--ct-stack-sm) var(--ct-stack-md); } #collapseFilter .modal-title{ font-family:var(--ct-font-display);font-weight:800;font-size:17px; letter-spacing:.02em;text-transform:uppercase;color:var(--ct-text); } #collapseFilter .close{color:var(--ct-text);opacity:1} #collapseFilter .modal-body{padding:0 var(--ct-stack-md) var(--ct-stack-md)} /* Gruppenzeilen: Ink, 15px/600 wie die Kategorien-Zeilen; der gewaehlte Wert rechts als muted Wert statt kursivem Grau. Polster der Liste raus — die Zeilen tragen ihren Rhythmus selbst (NOVA: 16px Zeilenpolster bleibt). */ #collapseFilter .productlist-filter-accordion{padding:0;margin:0;border:0} #collapseFilter .productlist-filter-accordion > li > a{ color:var(--ct-text);font-size:15px;font-weight:600;text-decoration:none; } /* `.font-italic` ist eine Bootstrap-Utility mit !important — nur gleiches Gewicht hebt sie auf (Fehlerregister 16: dokumentierte Utility-Ausnahme). */ #collapseFilter .productlist-filter-accordion > li > a .font-italic{ font-style:normal !important;color:var(--ct-muted);font-weight:400; } #collapseFilter .productlist-filter-accordion > li > a::after{color:var(--ct-muted)} #collapseFilter .filter-item{color:var(--ct-muted);font-size:14px} #collapseFilter .filter-item.active, #collapseFilter .filter-item:hover{color:var(--ct-text);background:var(--ct-paper)} /* Preisspanne: Eingaben in Bedienhoehe, Addon wie ein Label, Slider mit Luft nach unten, damit die Griffe nicht an der naechsten Kante kleben. */ #collapseFilter .price-range-inputs .form-control{ height:var(--ct-control-h);border-color:var(--ct-line); border-radius:var(--ct-radius-sm) 0 0 var(--ct-radius-sm); font-weight:600;color:var(--ct-text); } #collapseFilter .price-range-inputs .input-group-text{ height:var(--ct-control-h); background:var(--ct-band-paper);border-color:var(--ct-line); border-radius:0 var(--ct-radius-sm) var(--ct-radius-sm) 0; font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ct-muted); } #collapseFilter .price-range-slide{margin:var(--ct-stack-md) 10px var(--ct-stack-sm)} /* Fuss: EIN Abstand zur Liste, beide Buttons in der Checkout-Bauweise. */ #collapseFilter .productlist-filter-accordion > li:last-child{padding-bottom:0} /* Flucht: NOVA gibt dem Wrapper 10px Rechtspolster (Scrollbar-Reserve) und dem Fuss 16px Polster — die Buttons standen 11px neben den Zeilenkanten. Fuss ohne Polster, gleiche Rechtsreserve wie die Liste. */ #collapseFilter .productlist-filter-footer{margin-top:var(--ct-stack-md);padding:0 10px 0 0} /* NOVAs `min-w-sm` am CTA haelt die Spalte breiter als die halbe Zeile — die zwei Buttons brachen untereinander. Spalte darf schrumpfen. */ #collapseFilter .snippets-filter-mobile-buttons .col{min-width:0} /* 2:3 statt 1:1 — "Abbrechen" ist kurz, der CTA traegt die Artikelzahl und lief bei halber Breite (138px) ueber seinen Rand. */ #collapseFilter .snippets-filter-mobile-buttons .col:first-child{flex:0 0 40%;max-width:40%} #collapseFilter .snippets-filter-mobile-buttons .btn{min-width:0;width:100%;padding-left:10px;padding-right:10px} #collapseFilter .snippets-filter-mobile-buttons .btn{ min-height:var(--ct-control-h); display:inline-flex;align-items:center;justify-content:center; border-radius:var(--ct-radius-sm); font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px; } #collapseFilter .snippets-filter-mobile-buttons .btn-outline-primary{ color:var(--ct-text);border-color:var(--ct-line);background:#fff; } #collapseFilter .snippets-filter-mobile-buttons .btn-outline-primary:hover, #collapseFilter .snippets-filter-mobile-buttons .btn-outline-primary:focus{ color:var(--ct-text);border-color:var(--ct-text);background:#fff; }