/* sg-version: 20260921-26 */
/* sg: Artikelliste nach mockup-kategorie.html — gilt fuer JEDE Liste, die ueber
productlist/index.tpl laeuft: Kategorie, Suche, Hersteller, Merkmalwert,
Suchspecials (Reg. 17: der Fix wird nicht auf die Kategorie gescopet, sonst kommt
der Befund auf der Suchseite wieder). Anker ist NOVAs eigene Wrapper-Klasse
`.is-item-list` bzw. `.has-left-sidebar` an #content-wrapper.
Das Child STYLT die NOVA-Filterfunktion, es baut keine eigene: Kategorienbox,
Verfuegbarkeits-, Merkmal- und Preisspannenfilter sind Shop-Boxen (Backend
"Darstellung > Boxen"), die Sortierung/Seitenzahl/Darstellung ist NOVAs
productlist_page_nav. Die Produktkarte selbst steht in css/sg-karte.css.
Abstaende nur aus der Skala in sg-base.css. Kein !important. */
:root{
--sg-css-kategorie:'20260921-26';
--sg-filter-active:#f4f4f4; /* Mockup .catlist a:hover */
--sg-chip-bg:#efefef; /* Mockup .cnt / .pagination a:hover */
/* Bauteilmasse der Liste — eine Quelle je Gruppe (Reg. 11) */
--sg-toolbar-h:var(--sg-btn-h); /* Sortierung, Artikel pro Seite, Ansichts-Umschalter = Knopfhoehe (46, vorher 42) */
--sg-page-tile:40px; /* Seitennavigations-Kachel (Mockup .pagination a) */
--sg-listimg:112px; /* Bildspalte der Listenansicht unter 768 px */
}
/* sg: Ab hier ist Touch der Normalfall — die Seitenkachel auf 44 px (Review rev1); die Toolbar steht seit
Intensiv 1 auf der Knopfhoehe (46). 991.98 ist der Tablet-Breakpoint, den das Child durchgehend fuehrt. */
@media (max-width:991.98px){
:root{
--sg-page-tile:44px;
}
}
/* ---------- Seitenkopf (Mockup .cat-head) ---------- */
/* sg: NOVA setzt die H1 der Liste als .h2 (my-nova_crit.css, 1.5rem). Das Mockup
fuehrt sie als 42-px-Versalie mit gelbem Unterstrich — wie die Sektionskoepfe der
Startseite (.sg-h2), nur eine Stufe groesser. Groesse und Gelbstrich stehen seit
21.09.2026 als Seitenkopf in sg-base.css (gilt fuer alle Seitentypen). */
.is-item-list h1{margin:0}
.is-item-list .title{margin-bottom:var(--sg-space-6)}
/* sg: Suche ohne Treffer — H1 und Hinweis sind Geschwister ohne .title/Toolbar dazwischen:
der Hinweis klebte an der gelben Linie (gemessen 0 px). Seit Intensiv 1 (Befund 5) derselbe
Kopfabstand wie auf allen Seiten (24, sg-base.css). */
.is-item-list h1 + .alert{margin-top:var(--sg-space-6)}
/* sg: Befund 5 — NOVA gibt der Kopf-Toolbar einen eigenen Rand oben (1440: 32, unter 576: 48), der
mit dem .title-Rand 24 verschmilzt und ihn uebertrifft. Den Kopfabstand traegt allein .title. */
.is-item-list .productlist-page-nav.productlist-page-nav-header-m{margin-top:0}
/* sg: Suche mit Treffern: dort steht die H1 ohne .title direkt vor der Toolbar — der Kopfabstand kommt hier von
der Toolbar selbst (gemessen Handy-UA nach dem Nullen: 0 px). */
.is-item-list h1 + .productlist-page-nav.productlist-page-nav-header-m{margin-top:var(--sg-space-6)}
/* sg: Hersteller-/Merkmalwertbeschreibung bleiben NOVAs Kopfposition unter der H1
(Schalter heute N). Die KATEGORIEbeschreibung steht seit 17.09. unter der Liste
(.sg-catdesc, Abschnitt "Kategoriebeschreibung" unten). */
.is-item-list .title + .desc{
margin-top:0; /* Befund 5: Kopfabstand 24 wie ueberall (vorher 16) */
margin-bottom:var(--sg-space-6);
color:#4a4a4a;
font-size:14.5px;
}
.is-item-list .title + .desc p:last-child{margin-bottom:0}
/* ---------- Spalten (Mockup .cat-layout 264px + 1fr, gap 28) ---------- */
/* sg: Der Abstand zwischen Sidebar und Liste ist NOVAs Bootstrap-Gutter; die
Spaltenbreiten bleiben NOVAs col-lg-4/col-xl-3 — eine eigene Breite wuerde das
Raster nur gegen sich selbst stellen. Gemessen 1440: 312 px Sidebar. */
.sidepanel-left{margin-bottom:var(--sg-space-8)}
/* sg (Intensiv 2, Nr. 7): NOVA verdoppelt das rechte Polster der Sidebar ab 1300 px auf 4rem (my-nova.css) —
die Box schrumpfte auf 232 statt der Mockup-264 (.cat-layout 264px), Luft zur Liste 64 statt 32 wie bei 1024.
Ein Mass ab 992: --sg-space-7 (= NOVAs 2rem bis 1299). */
@media (min-width:992px){
.sidepanel-left{padding-right:var(--sg-space-7)}
}
/* ---------- Sidebar-Boxen (Mockup .fbox) ---------- */
/* sg: Jede Box ist eine eigene weisse Karte. NOVA trennt die Boxen stattdessen mit
(.box-normal-hr / .box-filter-hr) — zwei Trennsysteme uebereinander waeren
gewuerfelte Linien (Reg. 3c), deshalb bleibt die Karte, die Linie geht. */
/* sg: Intensiv 1 (Befund 6) — Boxabstand als gap statt margin-bottom: NOVA haengt ausgeblendete
Filterboxen (.d-none) hinter die letzte sichtbare, `:last-child` traf deshalb nie die sichtbare
letzte Box; ihr Rand stand mobil zusaetzlich vor dem Fuss. gap entsteht nur ZWISCHEN sichtbaren. */
.sidepanel-left{display:flex;flex-direction:column;gap:var(--sg-space-4)}
/* sg: Unter 992 px steht die Sidebar UNTER der Liste — derselbe Uebergang 32 wie am Listenende (Befund 22). */
@media (max-width:991.98px){
#content .sidepanel-left{margin-top:var(--sg-space-7)}
}
.sidepanel-left .box{
margin-bottom:0;
padding:var(--sg-space-5) var(--sg-space-6);
border-radius:var(--sg-radius);
background:var(--sg-card);
box-shadow:var(--sg-shadow);
}
.sidepanel-left .box-normal-hr,
.sidepanel-left .box-filter-hr{display:none}
/* Boxtitel (Mockup .fbox h3): zwei Schreibweisen, NOVA rendert beide —
.productlist-filter-headline ab md, .box-normal-link/.btn-filter-box als
Klapp-Kopf (LEHREN I.0: ueber den Inhalt/die Rolle adressieren, nie ueber #boxNNN). */
.sidepanel-left .productlist-filter-headline,
.sidepanel-left .box-normal .box-normal-link,
.sidepanel-left .btn-filter-box{
width:100%;
margin:0 0 var(--sg-space-3);
padding:0 0 var(--sg-space-3);
border-bottom:1px solid var(--sg-line);
font-family:var(--sg-font-head);
font-size:18px;
font-weight:600;
line-height:1.2;
letter-spacing:.03em;
text-align:left;
text-transform:uppercase;
color:var(--sg-text);
}
/* sg: `display` bleibt bei .box-normal-link ausdruecklich NOVAs Sache — my-nova.css
blendet den Klapp-Kopf ab 768 px aus (`.box-normal .box-normal-link{display:none}`,
0,2,0). Eine eigene display-Angabe in der Sammelregel (0,3,0) hat ihn wieder
eingeblendet: der Boxtitel stand zweimal untereinander (gemessen 1440). */
.sidepanel-left .productlist-filter-headline,
.sidepanel-left .btn-filter-box{
display:flex;
align-items:center;
justify-content:space-between;
}
.sidepanel-left .btn-filter-box{min-height:44px}
/* sg: Zugeklappte Filterbox — ohne Inhalt darunter waere die Trennlinie eine Linie
ohne Gegenueber und darunter 32 px tote Flaeche. aria-expanded pflegt Bootstrap
beim Aufklappen selbst, die Linie kommt im offenen Zustand zurueck (Reg. 14). */
.sidepanel-left .btn-filter-box[aria-expanded="false"]{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
/* sg: Fixrunde 2 (a), Reg. 49 — derselbe Fall beim mobilen Klapp-Kopf der Kategorienbox:
zugeklappt standen Linie + 12/12 px unter dem Titel, gemessen 390 Text 19 px oben /
32 px unten. Bootstrap pflegt aria-expanded am Ausloeser selbst. */
.sidepanel-left .box-normal .box-normal-link[aria-expanded="false"]{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
/* sg: Fixrunde 2 (a), Reg. 49 — endet eine OFFENE Box mit einer Linkliste, sitzt der
letzte Text in einer 44-px-Zeile (Touch-Ziel) bereits ~14 px ueber deren Unterkante;
mit den 20 px Boxpolster waren es unten 34 bzw. 38 px gegen 19/24 px ueber dem Titel
(gemessen 1440, Kategorien- und Herstellerbox). Das Polster traegt unten nur noch den
Rest, die Zeile selbst liefert die Luft. Zugeklappte Boxen behalten ihr Polster. */
.sidepanel-left .box-categories:has(.box-normal-link[aria-expanded="true"]),
.sidepanel-left .box:has(.btn-filter-box[aria-expanded="true"]):has(.filter-item){padding-bottom:var(--sg-space-2)}
@media (min-width:768px){
.sidepanel-left .box-categories{padding-bottom:var(--sg-space-2)}
}
.sidepanel-left .btn-filter-box:hover,
.sidepanel-left .box-normal .box-normal-link:hover{color:#000;text-decoration:none}
/* Kategorienbox (Mockup .catlist) */
.sidepanel-left .box-categories .nav-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sg-space-2);
min-height:44px;
min-width:0;
padding:var(--sg-space-2) var(--sg-space-3);
border:0;
border-radius:7px;
font-size:14px;
color:#3c3c3c;
}
.sidepanel-left .box-categories .nav-link > a{min-width:0;color:inherit}
.sidepanel-left .box-categories .nav-link:hover{background:var(--sg-filter-active);color:#000}
/* sg: Der aktive AST traegt die CI-Linie, das aktive BLATT die dunkle Flaeche
(Mockup .catlist a.active). NOVA setzt .active auf beide li-Ebenen. */
.sidepanel-left .box-categories .nav-item.dropdown.active > .nav-link{
font-weight:600;
color:var(--sg-text);
}
.sidepanel-left .box-categories .nav-item.active > .snippets-categories-nav-link-child{
background:var(--sg-dark);
font-weight:600;
color:#fff;
}
.sidepanel-left .box-categories .nav-item.active > .snippets-categories-nav-link-child:hover{
background:var(--sg-dark-2);
color:#fff;
}
.sidepanel-left .box-categories .snippets-categories-collapse > .nav{padding-left:var(--sg-space-3)}
/* sg: my-nova.css legt den aufgeklappten Ast auf #f5f7fa (`.box-categories .dropdown
.collapse`, 0,3,0) — im Mockup ist die Box durchgehend weiss, die Hervorhebung
traegt allein das aktive Blatt. Gleiche Spezifitaet reicht, sg-* laedt spaeter.
Die Grauwerte stecken als fertiges HEX im Kompilat, ein :root-Override auf
--light waere wirkungslos (LEHREN N.2). */
.sidepanel-left .box-categories .dropdown .collapse{background:transparent}
/* Filterzeilen (Mockup .fgroup label + .cnt) */
.sidepanel-left .filter-item{
display:block;
border-radius:7px;
font-size:14px;
color:#3c3c3c;
}
.sidepanel-left .filter-item:hover{background:var(--sg-filter-active);color:#000;text-decoration:none}
.sidepanel-left .filter-item .box-link-wrapper{
display:flex;
align-items:center;
gap:var(--sg-space-3);
min-height:44px;
min-width:0;
padding:0 var(--sg-space-3);
}
/* sg: Der Zaehler steht rechts aussen (Mockup .cnt mit margin-left:auto). */
.sidepanel-left .filter-item .box-link-wrapper > .badge{
flex:none;
margin-left:auto;
padding:1px var(--sg-space-2);
border:0;
border-radius:99px;
background:var(--sg-chip-bg);
font-size:11.5px;
font-weight:600;
color:var(--sg-muted);
}
.sidepanel-left .filter-item .word-break,
.sidepanel-left .filter-item .filter-item-value{min-width:0}
.sidepanel-left .filter-item .snippets-filter-item-icon-right{flex:none;color:var(--sg-muted)}
/* Aktiver Filter: Haken in CI, Zeile dunkel wie das aktive Kategorieblatt. */
.sidepanel-left .filter-item.active{background:var(--sg-dark);font-weight:600;color:#fff}
.sidepanel-left .filter-item.active:hover{background:var(--sg-dark-2);color:#fff}
.sidepanel-left .filter-item.active .snippets-filter-item-icon-right{color:var(--sg-yellow)}
.sidepanel-left .filter-item.active .box-link-wrapper > .badge{background:var(--sg-yellow);color:var(--sg-dark)}
/* "Alle anzeigen" der gekuerzten Filterlisten */
.sidepanel-left .snippets-filter-show-all .btn{
padding:var(--sg-space-2) var(--sg-space-3);
font-size:12.5px;
color:var(--sg-muted);
text-decoration:underline;
}
.sidepanel-left .snippets-filter-show-all .btn:hover{color:var(--sg-text)}
/* Preisspanne (Mockup .pricerow) */
.sidepanel-left .price-range-inputs{
display:flex;
gap:var(--sg-space-2);
margin-bottom:var(--sg-space-4);
}
.sidepanel-left .price-range-inputs > .col{flex:1 1 0;width:auto;max-width:none;padding:0}
.sidepanel-left .price-range-input{
height:40px;
border:1px solid var(--sg-line);
border-radius:7px 0 0 7px;
font-size:13.5px;
}
.sidepanel-left .price-range-inputs .input-group-text{
height:40px;
border:1px solid var(--sg-line);
border-left:0;
border-radius:0 7px 7px 0;
background:var(--sg-bg);
font-size:12px;
color:var(--sg-muted);
}
.sidepanel-left .price-range-slide{margin:0 var(--sg-space-2) var(--sg-space-2)}
/* sg: Gleiche Ursache wie beim Toolbar-Kasten (Ben 17.09.): NOVA polstert den Klappbereich
der Preisspanne unten zusaetzlich (padding-bottom 24 px) innerhalb der Box, die ihr
Polster selbst traegt — gemessen 1440 Inhalt 20 px oben, 54 px unten. Die 8 px unter
dem Regler bleiben: die Griffe ragen unter die Spur. */
.sidepanel-left .box-filter-price-collapse{padding-bottom:0}
/* Aktive Filter ueber der Liste (Mockup: "Alle Filter zuruecksetzen") */
.active-filters{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--sg-space-2);
margin-bottom:var(--sg-space-5);
}
.active-filters .snippets-filter-item.btn{
min-height:38px;
border-color:var(--sg-line);
border-radius:var(--sg-radius-sm);
background:var(--sg-card);
font-size:13px;
color:var(--sg-text);
}
.active-filters .snippets-filter-item.btn:hover{background:var(--sg-chip-bg);color:#000}
.active-filters .snippets-filter-item-all{
display:inline-flex;
align-items:center;
min-height:38px;
font-size:12.5px;
color:var(--sg-muted);
text-decoration:underline;
}
.active-filters .snippets-filter-item-all:hover{color:var(--sg-text)}
/* ---------- Toolbar (Mockup .toolbar) ---------- */
/* sg: NOVAs Reihenfolge im Markup ist Optionen -> Trefferzahl -> Seitennavigation.
Das Mockup liest Trefferzahl links, Bedienelemente rechts — per order, damit kein
Block umgebaut werden muss. Die Kopf-Seitennavigation bleibt erhalten (sie ist
dieselbe Funktion wie unten, kein Duplikat zum Wegwerfen) und steht rechts aussen. */
.productlist-page-nav-header-m{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--sg-space-3) var(--sg-space-5);
margin:0 0 var(--sg-space-5);
padding:var(--sg-space-3) var(--sg-space-5);
border-radius:var(--sg-radius);
background:var(--sg-card);
box-shadow:var(--sg-shadow);
}
/* sg: ⚠️ Innenabstand oben != unten (Ben 17.09., "wie immer"). my-nova_crit.css (inline im
) gibt ab 768 px JEDER Spalte der Kopf-Toolbar `margin-top:1rem`
(`.productlist-page-nav.productlist-page-nav-header-m > .col`, 0,3,0) — NOVAs Abstand
zwischen umbrechenden Bootstrap-Zeilen. Im Flex-Kasten mit eigenem Polster kollabiert
der Rand nicht: gemessen 1440 Inhalt 28 px unter der Oberkante, 12 px ueber der
Unterkante. Unter 768 px dasselbe Muster mit `margin-bottom` (`.productlist-page-nav
.displayoptions` 1rem, `.productlist-item-info` .5rem, 0,2,0): die Abstaende ZWISCHEN
den gestapelten Zeilen lagen bei 28 bzw. 20 px statt gap 12. Den Zeilenabstand traegt
hier `gap`, das Polster traegt den Kasten — NOVAs Spaltenraender sind alle aus. */
.productlist-page-nav.productlist-page-nav-header-m > .col{margin-top:0;margin-bottom:0}
.productlist-page-nav-header-m > .productlist-item-info{
order:1;
flex:1 1 auto;
width:auto;
max-width:none;
padding:0;
font-size:14px;
color:var(--sg-muted);
}
.productlist-page-nav-header-m > .displayoptions{
order:2;
display:flex;
flex:0 0 auto;
flex-wrap:wrap;
align-items:center;
gap:var(--sg-space-2);
width:auto;
max-width:none;
padding:0;
}
.productlist-page-nav-header-m > .productlist-pagination{
order:3;
flex:0 0 auto;
width:auto;
max-width:none;
padding:0;
}
/* sg: NOVA trennt Trefferzahl und Seitennavigation mit einem Rahmen an der Spalte
(.productlist-item-border) — im Kartenlayout eine Linie zu viel (Reg. 3c). */
.productlist-page-nav-header-m > .productlist-item-border{border:0}
.is-item-list hr.productlist-page-nav-top,
.is-item-list hr.productlist-page-nav-bottom{display:none}
/* Bedienelemente (Mockup .toolbar select / .viewtoggle) */
/* sg: EINE Hoehe fuer die ganze Gruppe (Reg. 11, Review rev1): Sortierung, Artikel
pro Seite und der Galerie/Liste-Umschalter standen auf 42 gegen 38 px — das Mass
liegt jetzt in --sg-toolbar-h und wird als `height` gesetzt, nicht als min-height
(NOVA deckelt Buttons zusaetzlich per max-height, LEHREN I.6). */
.productlist-page-nav .btn-outline-secondary{
height:var(--sg-toolbar-h);
max-height:none;
border-color:var(--sg-line);
border-radius:var(--sg-radius-sm);
background:var(--sg-card);
font-family:var(--sg-font-text);
font-size:13.5px;
color:var(--sg-text);
}
.productlist-page-nav .btn-outline-secondary:hover,
.productlist-page-nav .show > .btn-outline-secondary.dropdown-toggle{
border-color:var(--sg-line);
background:var(--sg-chip-bg);
color:var(--sg-text);
}
.productlist-page-nav .btn-option.ed{
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--sg-toolbar-h);
padding:0;
color:var(--sg-muted);
}
.productlist-page-nav .btn-option.ed.active,
.productlist-page-nav .btn-option.ed.active:hover{
border-color:var(--sg-dark);
background:var(--sg-dark);
color:var(--sg-yellow);
}
.productlist-page-nav .dropdown-menu{
border-color:var(--sg-line);
border-radius:var(--sg-radius-sm);
box-shadow:var(--sg-shadow-lift);
}
.productlist-page-nav .dropdown-item.active,
.productlist-page-nav .dropdown-item:active{background:var(--sg-yellow);color:var(--sg-dark)}
/* Mobil-Filterknopf in der Toolbar */
.productlist-page-nav .result-option-wrapper #js-filters{
min-height:44px;
border-color:var(--sg-line);
border-radius:var(--sg-radius-sm);
background:var(--sg-card);
font-size:13.5px;
color:var(--sg-text);
}
.productlist-page-nav .result-option-wrapper #js-filters .fas{margin-right:var(--sg-space-2)}
/* ---------- Produktraster ---------- */
/* sg: Spaltenzahl an der GEMESSENEN Kartenbreite, nicht an der Fensterbreite
(LEHREN I.3b — ab 992 px blendet NOVA die Filterspalte ein und die Karte wird
SCHMALER). NOVA liefert von Haus aus 4 Spalten ab xl und 3 ab md; gemessen 1440:
202 px Karte. Mockup: 3 Spalten, ~289 px.
Gemessen (Kartenbreite): 1440 -> 3 Sp. 295 | 1199 -> 2 Sp. 288 | 992 -> 2 Sp. 235
| 768 -> 3 Sp. 232 | 390 -> 1 Sp. 358 (Ben 21.09.: vorher 2 Sp. 163, "sehr gequetscht"). */
/* sg: Reihenabstand = Rasterabstand (Mockup .prodgrid gap 20). NOVA setzt hier
`#product-list .product-wrapper:not(:last-child){margin-bottom:4rem}` (1,2,0) —
und weil die LETZTE Karte diese 64 px NICHT bekommt, war die Flex-Zeile 64 px hoch
und die letzte Karte streckte sich um 44 px (gemessen: Reihe 7 = 403 / 447 px,
Reg. 27/37 + LEHREN R.17). Gleiche ID-Kette plus eine Klasse mehr, damit die Regel
ALLE Karten trifft — kein !important noetig. */
#product-list.product-list > .product-wrapper{margin-bottom:var(--sg-grid-gap)}
@media (min-width:1200px){
.product-list.layout-gallery > .product-wrapper{flex:0 0 33.3333%;max-width:33.3333%}
}
@media (min-width:992px) and (max-width:1199.98px){
.product-list.layout-gallery > .product-wrapper{flex:0 0 50%;max-width:50%}
}
/* sg: Ben 21.09.2026 — unter 576 EINE Karte pro Reihe (NOVA: col-6). Gilt fuer jede
Galerie-Liste (Kategorie, Suche, Hersteller, Merkmalwert), nicht fuer ?ed=1. */
@media (max-width:575.98px){
.product-list.layout-gallery > .product-wrapper{flex:0 0 100%;max-width:100%}
}
/* ---------- Seitennavigation (Mockup .pagination) ---------- */
/* sg: NOVAs Seitennavigation hat ZWEI Gesichter (LEHREN N.15): ab md liegt das
.dropdown-menu statisch als Flex-Reihe — die Zahlen sind dann .dropdown-item
.page-item, NICHT li.page-item; darunter ist es ein echtes Dropdown, sichtbar nur
der Toggle "Seite 1". Beide Zustaende bekommen dieselbe Kachel. */
.pagination{align-items:center;gap:var(--sg-space-2)}
/* sg: LEHREN N.16 — Flex blockifiziert die Kinder und FRISST das Leerzeichen zwischen
Seite und der Zahl; der Knopf las sich als "Seite1" (gemessen 390). */
.pagination .page-item.dropdown > .btn.dropdown-toggle{gap:.25em}
.pagination .page-link,
.pagination .page-item.dropdown > .btn.dropdown-toggle{
display:flex;
align-items:center;
justify-content:center;
min-width:var(--sg-page-tile);
min-height:var(--sg-page-tile);
padding:0 var(--sg-space-2);
border:0;
border-radius:var(--sg-radius-sm);
background:var(--sg-card);
box-shadow:var(--sg-shadow);
font-size:14px;
font-weight:600;
color:#3c3c3c;
}
.pagination .page-link:hover{background:var(--sg-chip-bg);color:#000}
/* sg: NOVA rundet erste/letzte Kachel nur aussen (.page-item:first-/last-child .page-link, 0,3,0) — die letzte
Kachel hatte rechts 2 statt 8 px (gemessen). Jede Kachel hat dieselben Ecken. */
.pagination .page-item .page-link{border-radius:var(--sg-radius-sm)}
/* sg (Intensiv 2, Nr. 19): Unter 768 ist die Seitenauswahl ein Dropdown-Knopf ("Seite 1") und steht in der Toolbar
neben Filter/Sortierung/Artikel pro Seite — dort trug sie als einzige keinen Rand (Kachel-Optik: Rand 0, Schatten,
14/600 #3c3c3c gegen 1 px --sg-line, 13,5/700 --sg-text). Jetzt dieselbe Regel wie die Toolbar-Knoepfe
(.productlist-page-nav .btn-outline-secondary), auch unten am Listenende. Die Zahlenkacheln ab 768 bleiben. */
.pagination .page-item.dropdown > .btn.dropdown-toggle{
height:var(--sg-toolbar-h);
border:1px solid var(--sg-line);
box-shadow:none;
font-size:13.5px;
font-weight:700;
color:var(--sg-text);
}
.pagination .page-item.dropdown > .btn.dropdown-toggle:hover,
.pagination .page-item.dropdown.show > .btn.dropdown-toggle{border-color:var(--sg-line);background:var(--sg-chip-bg);color:var(--sg-text)}
/* Dieselbe Gruppe: die Pfeile daneben (vorher Kachel 40 mit Schatten neben dem 46er Knopf, Reg. 11) — unter 768
ebenfalls Toolbar-Knopf, quadratisch. Die deaktivierte Richtung bleibt flaechenlos (NOVA .disabled). */
@media (max-width:767.98px){
.pagination .page-item:not(.disabled) > .page-link{
min-width:var(--sg-toolbar-h);
height:var(--sg-toolbar-h);
border:1px solid var(--sg-line);
box-shadow:none;
color:var(--sg-text);
}
.pagination .page-item.disabled > .page-link{min-width:var(--sg-toolbar-h);height:var(--sg-toolbar-h)}
}
.pagination .page-item.active .page-link{background:var(--sg-dark);color:var(--sg-yellow)}
/* sg: NOVA zeichnet die aktive Seite als 4-px-Balken in .page-item.active
.page-link::after — im Mockup ist die aktive Seite die dunkle Kachel selbst. */
.pagination .page-item.active .page-link::after{display:none}
.pagination .page-item.disabled .page-link{background:transparent;box-shadow:none;color:#c8c8c8}
/* sg: Ab md stehen die Zahlen nebeneinander — das Wort "Seite" vor jeder Zahl waere
dort das Mockup-Raster gesprengt. Unter md bleibt es im Dropdown-Toggle stehen. */
@media (min-width:768px){
.pagination .dropdown-item .pagination-site{display:none}
.pagination .page-item.dropdown > .btn.dropdown-toggle{display:none}
.pagination .page-item.dropdown > .dropdown-menu{
display:flex;
gap:var(--sg-space-2);
padding:0;
border:0;
background:none;
box-shadow:none;
}
.pagination .dropdown-item.page-item{width:auto;padding:0;background:none}
}
/* Fusszeilen-Navigation zentriert (Mockup .pagination) */
/* sg: Intensiv 1 (Befund 22) — jede Uebergangsstufe am Listenende 32 (--sg-space-7): letzte Karte ->
Trefferzeile, Seitennavigation -> Kategorietext. Die Karten der letzten Reihe tragen den
Reihenabstand (--sg-grid-gap) als margin-bottom mit (welche Karte zuletzt steht, weiss das
Flex-Raster nicht) — er wird hier herausgerechnet. Vorher 60 bzw. 52 px. */
.productlist-page-nav:not(.productlist-page-nav-header-m){
align-items:center;
justify-content:center;
margin-top:calc(var(--sg-space-7) - var(--sg-grid-gap));
margin-bottom:0;
}
/* sg: NOVA setzt .productlist-item-info auf display:flex — `text-align:center`
zentriert darin NICHTS, der Textknoten wird zum Flex-Item am Zeilenanfang
(gemessen 768: Text bei x=24 in einer 720 px breiten, "zentrierten" Box). */
.productlist-page-nav:not(.productlist-page-nav-header-m) > .productlist-item-info{
justify-content:center;
width:100%;
max-width:none;
margin-bottom:var(--sg-space-3);
padding:0;
border:0;
font-size:13px;
color:var(--sg-muted);
}
.productlist-page-nav:not(.productlist-page-nav-header-m) > .productlist-pagination{
display:flex;
justify-content:center;
width:100%;
max-width:none;
padding:0;
}
/* ---------- Listenansicht (?ed=1) ---------- */
/* sg: Bau-Kontrakt B.16 / Reg. 23 — die Zweitansicht ist Lieferumfang. Sie bleibt
NOVAs Listenbaustein (item_list.tpl), bekommt aber die CI-Flaeche der Karte:
weisse Karte mit Radius/Schatten, CI-Knopf, Preis in Kartengroesse. Kein halb
umgebautes Eigenmarkup. */
.product-list.layout-list > .product-wrapper{flex:0 0 100%;max-width:100%}
/* sg: Auf dem PHONE rendert NOVA die Listenansicht nicht als item_list, sondern als
item_box — also unsere Karte, einspaltig ueber die volle Breite ($isMobile ist
UA-Erkennung, LEHREN N.18a; mit Mobil-UA gemessen: 358 px Karte). Die quadratische
Buehne aus css/sg-karte.css gilt dort fuer die ZWEISPALTIGE Galerie (169 px) — bei
358 px waeren das 334 px Schwarzflaeche um ein kleines Foto. Flacher, an der
gemessenen Kartenbreite ausgerichtet (LEHREN I.3b). */
.product-list.layout-list .sg-card .productbox-image.square::before{padding-bottom:56%}
.product-list .productbox.productbox-row{
overflow:hidden;
border-radius:var(--sg-radius);
background:var(--sg-card);
box-shadow:var(--sg-shadow);
}
.product-list .productbox.productbox-row:hover{box-shadow:var(--sg-shadow-lift)}
.product-list .productbox.productbox-row.productbox-hover .productbox-inner::before{display:none}
.product-list .productbox-row .productbox-inner{padding:var(--sg-space-4)}
/* sg: ⚠️ Reg. 1 — die Buehnenfarbe gehoert AUSSCHLIESSLICH auf den aeusseren
Bildwrapper. `.productbox-image` heisst in NOVA auch das zweite, ABSOLUT
positionierte Hover-Bild (`.square.second-wrapper`): mit Dunkelgrund darauf lag
ein deckender Kasten ueber dem sichtbaren Bild — Kachel komplett schwarz, obwohl
`naturalWidth` 259 und `opacity` 1 meldeten (gemessen 1440, ?ed=1; erst
`elementFromPoint` + Pixelprobe brachten es ans Licht). */
.product-list .productbox-row .col > .productbox-image{
padding:var(--sg-space-3);
background:var(--sg-image-stage);
}
/* sg: Zweitbild-Buehne auf den Kasten INNERHALB des Polsters beziehen — dieselbe
Falle wie auf der Karte (Reg. 2, Begruendung in css/sg-karte.css). */
.product-list .productbox-row .productbox-images{position:relative}
.product-list .productbox-row .second-wrapper{inset:0;width:auto;height:auto}
.product-list .productbox-row .productbox-title a{
font-size:16px;
font-weight:600;
color:var(--sg-text);
text-decoration:none;
}
/* sg: `min-width:0` NUR auf die Textspalte (LEHREN I.3). Auf ALLE Spalten gelegt
kippte die Merkmal-Liste: `dl.productlist-item-detail` setzt dt/dd als col-6 mit
`text-nowrap-util` — ohne min-content-Untergrenze lief "Artikelnummer:" unter den
Wert und las sich als "ArtikelnummerV19-Vlies-D150" (gemessen 1440, ?ed=1). */
.product-list .productbox-row .productbox-title{min-width:0}
/* sg: NOVA legt Merkmalzeilen als dt/dd im halben Spaltenmass an und setzt
`.text-nowrap-util` (0,1,0, ohne !important) darauf. In der 204 px schmalen
Detailspalte passte "Artikelnummer:" nicht in seine 102 px und lief ueber den Wert
(gemessen 1440, ?ed=1).
Review rev1: Mit dt/dd als Bootstrap-Spalten blieb der Wert 86 px breit und
Artikelnummern brachen mitten im Wort ("CS-Abdeckfoli / e-GELB"). Label und Wert
stehen jetzt GESTAPELT (einspaltiges Raster): der Wert hat immer die volle
Spaltenbreite, unabhaengig davon, wie schmal NOVAs Detailspalte gerade ist — ein
nebeneinander gesetztes Paar wuerde denselben Befund bei der naechsten
Spaltenbreite wieder erzeugen (Reg. 15, inhaltsabhaengige Umbrueche
inhaltsunabhaengig loesen). */
.product-list .productbox-row .productlist-item-detail{
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:0;
margin:0;
white-space:normal;
}
.product-list .productbox-row .productlist-item-detail dt,
.product-list .productbox-row .productlist-item-detail dd{
width:auto;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
.product-list .productbox-row .productlist-item-detail dt{
font-size:12.5px;
font-weight:600;
color:var(--sg-muted);
}
.product-list .productbox-row .productlist-item-detail dd{
margin-bottom:var(--sg-space-3);
overflow-wrap:anywhere;
}
.product-list .productbox-row .productlist-item-detail dd:last-child{margin-bottom:0}
/* sg: Tote Flaeche rechts der Merkmalliste (Reg. 3b / LEHREN N.8): NOVA teilt die
Textzeile in drei starre Drittel (`col-xl-4` fuer Details, Variationen, Kaufblock)
— die Variationsspalte ist oft leer, ihre Prozente werden NICHT neu verteilt, und
die Merkmalliste bleibt in 204 px gequetscht, waehrend rechts ~480 px frei stehen.
Jetzt fuellt die Merkmalspalte, der Kaufblock hat ein festes Mass.
Zwei Fallen dabei, beide gemessen: mit `min-width: auto` (Flex-Default) sinkt keine
Spalte unter ihren min-content und der Kaufblock kippt in eine eigene Zeile (416 px
tote Flaeche rechts der Merkmale); mit `min-width: 0` an der Merkmalspalte schrumpft
sie umgekehrt bis auf 148 px und der Wert auf 0 px Breite. Deshalb: Untergrenze an
der Merkmalspalte, schrumpfen darf die Variationsspalte. */
@media (min-width:1200px){
/* `nowrap` ist der Schluessel: Beim Zeilenumbruch rechnet Flexbox mit der
HYPOTHETISCHEN Groesse (flex-basis), nicht mit der geschrumpften — die
Variationsspalte mit `flex-basis: auto` schob den Kaufblock deshalb in eine
eigene Zeile, bevor ueberhaupt geschrumpft wurde (gemessen, 438 px tot). */
/* Ohne `min-width: 0` an der Textspalte wandert deren neue min-content-Breite
(Merkmale 260 + Kaufblock 240) nach aussen und die AEUSSERE Zeile bricht um:
Bild oben, Text darunter (gemessen). */
.product-list .productbox-row .productbox-inner > .row > .col:last-child{min-width:0}
.product-list .productbox-row .row:has(> .productbox-details){flex-wrap:nowrap}
.product-list .productbox-row .productbox-details{flex:1 1 0;width:auto;max-width:none;min-width:260px}
.product-list .productbox-row .productbox-variations{flex:0 1 auto;width:auto;max-width:none;min-width:0}
.product-list .productbox-row .productbox-options{flex:0 0 240px;width:240px;max-width:none}
}
/* sg: ⚠️ Reg. 8 — der Primaer-CTA der Listenzeile ("Zum Artikel" bzw. "In den
Warenkorb") steckt in `.productbox-onhover`; my-nova.css setzt darauf ab 768 px
`opacity: 0`, solange die Zeile nicht gehovert ist (0,3,0). Ohne Maus gab es damit
keinen sichtbaren Weg zum Artikel. In der LISTE ist der Kaufblock dauerhaft
sichtbar; die Zweitaktionen (Merken/Vergleichen) bleiben bewusst hover-gebunden. */
@media (min-width:768px){
.product-list .productbox-row.productbox-hover:not(:hover, :focus, .focus) .item-list-basket-details{opacity:1}
/* sg (Intensiv 2, Nr. 5): dasselbe fuer die Variationsauswahl — sie steht ohne Maus unsichtbar in der Zeile
(gemessen 768/1024/1440 opacity 0), auf Touch-Tablets also nie; uebrig blieb ein Loch ueber "Zum Artikel". */
.product-list .productbox-row.productbox-hover:not(:hover, :focus, .focus) .productbox-variations .productbox-onhover{opacity:1}
}
/* sg: Badge in der Listenansicht wie auf der Karte (Gelb, Rot nur fuer Rabatt) —
NOVAs Gruen fuer "Auf Lager" gibt es im Mockup nicht. Reg. 13: derselbe Baustein
in einer zweiten Huelle braucht dieselbe Regel. */
.product-list .productbox-row .productbox-ribbon.ribbon:not(.ribbon-custom){
background:var(--sg-yellow);
color:var(--sg-dark);
}
.product-list .productbox-row .productbox-ribbon.ribbon-2{background:var(--sg-red);color:#fff}
.product-list .productbox-row .productbox-ribbon.ribbon::before{display:none}
.product-list .productbox-row .productbox-ribbon.ribbon{
top:var(--sg-space-3);
left:var(--sg-space-3);
padding:var(--sg-space-1) var(--sg-space-2);
line-height:1.2;
border-radius:var(--sg-radius-xs);
box-shadow:none;
font-size:11.5px;
letter-spacing:.05em;
}
/* sg: LEHREN R.38 — der Listenpreis kommt aus zwei Quellen ausserhalb von custom.css:
my-nova_crit.css zentriert ihn im Galerie-Layout per ID-Kette mit !important, und
aus dem Minify-Bundle traegt .price_wrapper .price die PDP-Groesse 2.1rem in JEDE
Liste. Hier gewinnt (0,3,0) gegen (0,2,0) ohne !important. */
.product-list .price_wrapper .price,
.product-list .productbox-price{font-size:21px;font-weight:700;line-height:1.2}
/* sg: Fixrunde 2 (p) — diese Regel gilt in Listen in JEDER Breite (auch unter 576, wo
sg-karte.css 18 px vorsieht). Die Zeilenhoehe, die "Preis auf Anfrage" reserviert,
folgt deshalb hier derselben Quelle. */
.product-list .productbox.sg-card{--sg-card-price-lh:calc(21px * 1.2)}
/* sg: Paket 5 (Mitnahme Fixrunde 2) — die Regel oben ueberstimmte das Kartenmass unter 576 px
(sg-karte.css: 18 px, zweispaltige Karte ~169 px) in JEDER Liste: gemessen 21 px auf
/DOPPELSEITIG bei 390. Die Karte folgt in Listen wieder ihrem Mobilmass; die Listenzeile
(.productbox-row, Desktop-UA schmal) bleibt bei 21 px. */
@media (max-width:575.98px){
.product-list .sg-card :is(.price_wrapper .price,.productbox-price){font-size:18px}
.product-list .productbox.sg-card{--sg-card-price-lh:calc(18px * 1.2)}
}
.product-list .productbox-row .btn-primary{
border:0;
border-radius:var(--sg-radius-sm);
background:var(--sg-yellow);
font-weight:700;
color:var(--sg-dark);
}
.product-list .productbox-row .btn-primary:hover,
.product-list .productbox-row .btn-primary:focus{background:var(--sg-yellow-hover);color:var(--sg-dark)}
/* sg: Ben 21.09.2026 — mit buy_productlist = N (B.20) rendert NOVA statt des Kaufblocks den
Link "Zum Artikel" als .btn-outline-primary: in der Liste stand er hell (weiss, Rand #e6e6e6),
waehrend der gleiche Weg in der Galerie der gelbe Kachelpfeil a.sg-cartbtn ist. Gleiche
Rolle, gleiche Farbe; der Rand bleibt (in Gelb), damit die Hoehe gleich bleibt. */
.product-list .productbox-row a.btn-outline-primary{
border-color:var(--sg-yellow);
background:var(--sg-yellow);
color:var(--sg-dark);
}
.product-list .productbox-row a.btn-outline-primary:hover,
.product-list .productbox-row a.btn-outline-primary:focus{
border-color:var(--sg-yellow-hover);
background:var(--sg-yellow-hover);
color:var(--sg-dark);
}
/* ---------- Kategoriebeschreibung (Wawi-Text unter der Liste) ---------- */
/* sg: Ben 17.09.: unter Liste + Seitennavigation, nur wenn gefuellt (productlist/index.tpl).
Weisse Karte wie Toolbar und Sidebar-Boxen, volle Spaltenbreite ohne linksbuendiges
Lesemass (Reg. 40). Wawi-HTML bringt Absaetze, Listen, Ueberschriften und Links mit —
Abstaende nur ueber Randregeln, nie per Flex (Kontrakt B.23). Oben 40 px = Abstand der
Seitennavigation zur Liste. */
.sg-catdesc{
margin-top:var(--sg-space-7);
padding:var(--sg-space-7);
border-radius:var(--sg-radius);
background:var(--sg-card);
box-shadow:var(--sg-shadow);
font-size:15px;
line-height:1.7;
color:#3c3c3c;
overflow-wrap:anywhere;
}
.sg-catdesc > :first-child{margin-top:0}
.sg-catdesc > :last-child{margin-bottom:0}
.sg-catdesc p,
.sg-catdesc ul,
.sg-catdesc ol{margin:0 0 var(--sg-space-4)}
.sg-catdesc ul,
.sg-catdesc ol{padding-left:var(--sg-space-6)}
.sg-catdesc li + li{margin-top:var(--sg-space-1)}
.sg-catdesc h2,
.sg-catdesc h3,
.sg-catdesc h4{
margin:var(--sg-space-6) 0 var(--sg-space-3);
font-size:22px;
line-height:1.2;
color:var(--sg-text);
}
.sg-catdesc strong,
.sg-catdesc b{font-weight:600;color:var(--sg-text)}
.sg-catdesc a{color:var(--sg-text);text-decoration:underline}
.sg-catdesc a:hover{color:#000}
@media (max-width:575.98px){
.sg-catdesc{padding:var(--sg-space-5);font-size:14.5px}
}
/* ---------- Unterkategorie-Kacheln (Kategorie ohne eigene Artikel) ---------- */
/* sg: NOVA rendert sie ueber productlist-header-subcategories. Optik wie die
Kategoriekacheln der Startseite, damit dieselbe Navigation nicht zweierlei
aussieht. Gleiche Reihenhoehe ueber row-eq-height + h:100% (Reg. 27). */
/* sg: Reg. 3b (tote Flaeche), Review rev1 — NOVA rendert die Kacheln als
`col-md-4 col-lg-3`: /Abdecken hat FUENF Unterkategorien, die fuenfte stand allein
vor 75 % Leere. Das Band nutzt jetzt dasselbe fuellende Raster wie die
Kategoriekacheln der Startseite (.sg-catgrid: 3 / 2 / 1 an den Theme-Breakpoints
992 und 576) — bei fuenf Items 3 + 2 statt 4 + 1, und dieselbe Navigation sieht an
beiden Orten gleich aus. `grid-auto-rows: 1fr` haelt die Reihen gleich hoch
(Reg. 27). Die Bootstrap-Spaltenklassen der Kinder werden dabei wirkungslos. */
.content-cats-small{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
grid-auto-rows:1fr;
gap:var(--sg-grid-gap);
margin:0 0 var(--sg-space-8);
}
/* sg: NOVA gibt den Spalten ab 768 px margin-bottom 16 px — im Grid kam das zum gap dazu:
Reihenabstand 36 statt 20 px wie zwischen den Spalten (gemessen /Abdecken + /Hersteller). */
.content-cats-small > [class*="col"]{width:auto;max-width:none;margin:0;padding:0}
/* sg: Intensiv 1 (Befund 6) — NOVAs Clearfix `.row::after{content:""}` wird im Grid zu einem
eigenen Rasterfeld: eine unsichtbare Zusatzreihe (1fr = Kachelhoehe) + gap unter der letzten
Kachel (gemessen /Hersteller 390: 70 px Leerraum). Im Grid gibt es nichts zu umfliessen. */
.content-cats-small::after{content:none}
@media (max-width:991.98px){
.content-cats-small{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:575.98px){
.content-cats-small{grid-template-columns:minmax(0, 1fr)}
}
.content-cats-small .sub-categories{
display:flex;
flex-direction:column;
height:100%;
overflow:hidden;
margin-bottom:var(--sg-grid-gap);
border-radius:var(--sg-radius);
background:var(--sg-card);
box-shadow:var(--sg-shadow);
transition:transform .15s, box-shadow .15s;
}
.content-cats-small .sub-categories:hover{transform:translateY(-4px);box-shadow:var(--sg-shadow-lift)}
.content-cats-small .sub-categories > div{justify-content:center}
.content-cats-small .subcategories-image{background:var(--sg-image-stage)}
.content-cats-small .sub-categories > div{
display:flex;
flex:1 1 auto;
flex-direction:column;
min-width:0;
padding:var(--sg-space-4) var(--sg-space-5);
}
.content-cats-small .caption a{
font-family:var(--sg-font-head);
font-size:18px;
font-weight:600;
letter-spacing:.03em;
text-transform:uppercase;
color:var(--sg-text);
text-decoration:none;
}
/* sg: NOVA gibt .caption margin-bottom .5rem — in der Kachel mit eigenem Polster stand der
Name dadurch 8 px zu hoch (gemessen /Abdecken 1440: 29 px oben, 38 px unten). Nur am
letzten Kind, damit eine Level-2-Liste darunter ihren Abstand behaelt. */
.content-cats-small .caption:last-child{margin-bottom:0}
/* sg: Eine Ausrichtung in jeder Breite (Intensiv 1, Befund 24 / Ben-Frage 6, Empfehlung links): NOVA zentriert die
Beschriftung ab 768 (.caption text-md-center), darunter steht sie links — dieselbe Kachel sah je Breite anders aus. */
.content-cats-small .caption{text-align:left}
.content-cats-small .sub-categories:hover .caption a{color:#000}
/* sg: GANZE Kachel klickbar (Ben 17.09., Reg. 39). NOVA verlinkt nur den Namen — gemessen
/Abdecken 1440: elementFromPoint an den vier Ecken lieferte das DIV, Treffer 5/25.
Bootstrap-Muster stretched-link, ohne JS: das Namens- spannt per ::after ueber die
Kachel (Anker `position:relative` an .sub-categories). Die Level-2-Links
(unterkategorien_lvl2_anzeigen = Y) bleiben eigene Ziele und liegen darueber. Fokus
sichtbar an der KACHEL, weil der Link selbst nur die Textzeile umfasst. */
.content-cats-small .sub-categories{position:relative}
.content-cats-small .caption a::after{content:"";position:absolute;inset:0;z-index:1}
.content-cats-small .sub-categories ul a{position:relative;z-index:2}
.content-cats-small .caption a:focus{outline:0}
.content-cats-small .sub-categories:has(.caption a:focus-visible){outline:2px solid var(--sg-dark);outline-offset:2px}
/* sg: Herstellerübersicht (page/manufacturers.tpl, Ben 21.09.2026) — dieselbe Textkachel wie
oben. Die Seite hat keine Sidebar (volle Containerbreite) und 59 kurze Namen: vier Spalten ab
1200 (NOVAs xl=3), drei ab 768, zwei darunter — einspaltig waere die Seite mobil ~3500 px
lang. Raster und gleiche Reihenhoehe wie oben (Reg. 27). */
.sg-mft-grid.content-cats-small{grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width:1199.98px){
.sg-mft-grid.content-cats-small{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width:767.98px){
.sg-mft-grid.content-cats-small{grid-template-columns:repeat(2, minmax(0, 1fr))}
.sg-mft-grid .sub-categories > div{padding:var(--sg-space-3) var(--sg-space-4)}
.sg-mft-grid .caption a{font-size:16px}
}
.sg-mft-grid .sub-categories{margin-bottom:0}
.sg-mft-grid .caption a{overflow-wrap:anywhere}
/* ---------- Filter mobil (Modal bzw. Klappbereich) ---------- */
/* sg: NOVA-Mechanik, nur gefaerbt: unter lg blendet NOVA die Sidebar aus und zeigt
den Knopf "Filter"; je nach UA-Erkennung oeffnet er ein Modal (Tablet/Desktop-UA)
oder einen Klappbereich (Mobil-UA) — derselbe Inhalt, zwei Huellen (LEHREN N.18a).
Beide Zweige bekommen dieselben Zeilen wie die Sidebar. */
/* sg: Die GEOMETRIE des Modals bleibt NOVA. Ein `margin:0` am .modal-dialog plus
`min-height:100vh` hat den Schliessen-Knopf zerlegt: NOVA setzt ihn
`position:absolute` ueber den Dialog (gemessen top:-24 px) — am oberen
Fensterrand war er halb abgeschnitten (Reg. 43). Hier nur Farbe und Schrift. */
#collapseFilter .modal-header{
align-items:center;
border-bottom:1px solid var(--sg-line);
}
#collapseFilter .modal-title{
font-family:var(--sg-font-head);
font-size:22px;
letter-spacing:.03em;
text-transform:uppercase;
}
#collapseFilter .modal-header .close{min-width:44px;min-height:44px}
.productlist-filter .productlist-filter-wrapper,
#collapseFilter .productlist-filter-wrapper{margin-bottom:var(--sg-space-5)}
.productlist-filter-accordion{margin:0;padding:0;list-style:none}
.productlist-filter-accordion > li{border-bottom:1px solid var(--sg-line)}
.productlist-filter-accordion > li > a{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sg-space-3);
min-height:52px;
font-family:var(--sg-font-head);
font-size:17px;
font-weight:600;
letter-spacing:.03em;
text-transform:uppercase;
color:var(--sg-text);
text-decoration:none;
}
.productlist-filter-accordion .filter-item{
display:block;
border-radius:7px;
font-size:14px;
color:#3c3c3c;
}
.productlist-filter-accordion .filter-item .box-link-wrapper{
display:flex;
align-items:center;
gap:var(--sg-space-3);
min-height:44px;
min-width:0;
padding:0 var(--sg-space-3);
}
.productlist-filter-accordion .filter-item .box-link-wrapper > .badge{
flex:none;
margin-left:auto;
border:0;
border-radius:99px;
background:var(--sg-chip-bg);
font-size:11.5px;
font-weight:600;
color:var(--sg-muted);
}
.productlist-filter-accordion .filter-item.active{background:var(--sg-dark);color:#fff}
.productlist-filter-accordion .filter-item.active .box-link-wrapper > .badge{background:var(--sg-yellow);color:var(--sg-dark)}
.snippets-filter-mobile-sorting-collapse .dropdown-item{min-height:44px;display:flex;align-items:center}
.snippets-filter-mobile-sorting-collapse .dropdown-item.active{background:var(--sg-yellow);color:var(--sg-dark)}
/* Fussleiste: "Filter anwenden" in CI (Mockup .fbtn) */
.productlist-filter-footer .btn{
min-height:var(--sg-btn-h);
border-radius:var(--sg-radius-sm);
font-weight:700;
}
.productlist-filter-footer .btn-primary{
border:0;
background:var(--sg-yellow);
color:var(--sg-dark);
}
.productlist-filter-footer .btn-primary:hover,
.productlist-filter-footer .btn-primary:focus{background:var(--sg-yellow-hover);color:var(--sg-dark)}
.productlist-filter-footer .btn-outline-primary{
border-color:var(--sg-line);
background:var(--sg-card);
color:var(--sg-text);
}
.productlist-filter-footer .btn-outline-primary:hover{background:var(--sg-chip-bg);color:#000}
/* ---------- Listenansicht unter 768 px ---------- */
/* sg: ⚠️ Review rev1, Korrektur einer falschen Annahme: Unter 768 px rendert NOVA
die Listenansicht NICHT immer als Karte. `$isMobile` ist UA-Erkennung (LEHREN
N.18a) — mit Handy-UA kommt `item_box` (die SG-Karte), mit Desktop-UA auf schmalem
Fenster und auf Tablets kommt `item_list`, also `.productbox-row`. BEIDE Zweige
treten real auf und muessen sitzen. Ungestaltet stapelte `.productbox-row` bei
390 px das Bild 326 x 326 ueber den Text: 539 bis 671 px je Artikel, fast ein
Bildschirm pro Zeile und ungleiche Hoehen (gemessen).
Hier steht die Zeile deshalb NEBENEINANDER: feste Bildspalte (--sg-listimg), Text
fuellt; der Namensblock reserviert zwei Zeilen, damit die Zeilen gleich hoch
bleiben (Reg. 27/37). */
@media (max-width:767.98px){
.product-list .productbox-row .productbox-inner{padding:var(--sg-space-3)}
.product-list .productbox-row .productbox-inner > .row{flex-wrap:nowrap;margin:0}
.product-list .productbox-row .productbox-inner > .row > .col:first-child{
flex:0 0 var(--sg-listimg);
width:var(--sg-listimg);
max-width:var(--sg-listimg);
padding:0;
}
.product-list .productbox-row .productbox-inner > .row > .col:last-child{
flex:1 1 auto;
width:auto;
max-width:none;
min-width:0;
padding:0 0 0 var(--sg-space-4);
}
.product-list .productbox-row .productbox-title a{
display:block;
min-height:calc(15px * 1.4 * 2);
font-size:15px;
line-height:1.4;
}
/* Die drei starren Drittel der Textzeile stapeln unter 768 ohnehin — Polster raus.
Die negativen Bootstrap-Randmasse der inneren `.row` mit: sie schoben den Block
4 px ueber die Kartenkante (gemessen 390). */
.product-list .productbox-row form .row{margin-left:0;margin-right:0}
.product-list .productbox-row .productbox-details,
.product-list .productbox-row .productbox-variations,
.product-list .productbox-row .productbox-options{padding:0}
.product-list .productbox-row .item-list-basket-details{margin-top:var(--sg-space-3)}
}
/* ---------- Tablet / Mobil ---------- */
@media (max-width:991.98px){
/* sg: Die Touch-Masse der Toolbar und der Seitennavigation kommen aus
--sg-toolbar-h / --sg-page-tile (oben im :root-Block dieser Datei). */
}
@media (max-width:575.98px){
.productlist-page-nav-header-m{padding:var(--sg-space-3) var(--sg-space-4)}
.productlist-page-nav-header-m > .productlist-item-info{flex:1 1 100%;order:2}
.productlist-page-nav-header-m > .displayoptions{order:1;flex:1 1 100%}
.productlist-page-nav-header-m > .displayoptions .result-option-wrapper{flex:1 1 auto}
.productlist-page-nav-header-m > .displayoptions .result-option-wrapper #js-filters{width:100%}
}
/* ---------- Variationsauswahl in der Listenansicht (Intensiv 1, Befund 4) ---------- */
/* sg: Mit Desktop-UA im schmalen Fenster rendert NOVA in item_list je Zeile die Variationsauswahl (390: 174x43,
Radius 2, Rahmen #525252, Text #707070, 16 px gegen die Textspalte eingerueckt, "Bitte waehlen Sie ei..."
abgeschnitten). Sie bleibt: `buy_productlist = N` nimmt nur den Kaufblock, die Auswahl hat weiter eine
Wirkung — jtl.article.js `registerSwitchVariations` -> `variationSwitch` laedt Preis und Bild der gewaehlten
Variation in die Zeile (/io). Gestaltet wie das Auswahlfeld der Artikelseite (sg-artikel.css), in der
Feldhoehe der Basis, buendig mit der Textspalte. */
.product-list .productbox-variations .variations > [class*="col"]{padding-left:0;padding-right:0}
.product-list .productbox-variations .variations dl{margin:0}
.product-list .productbox-variations .variations dt{
margin-bottom:var(--sg-space-2);
font-family:var(--sg-font-text);
font-size:13px;
font-weight:600;
color:var(--sg-text);
}
.product-list .productbox-variations .variations dd{margin:0}
.product-list .productbox-variations .variations dd .form-group{margin-bottom:0}
.product-list .productbox-variations .variations .bootstrap-select > .dropdown-toggle{
height:var(--sg-control-h);
max-height:none;
padding:var(--sg-space-2) var(--sg-space-4);
border:1.5px solid var(--sg-field-line);
border-radius:var(--sg-radius-sm);
font-size:13.5px;
font-weight:600;
color:var(--sg-text);
background-color:var(--sg-card);
}
.product-list .productbox-variations .variations .bootstrap-select > .dropdown-toggle .filter-option{display:flex;align-items:center}
/* sg (Intensiv 2, Nr. 5): Das Feld hat die Standardhoehe (46) wie "Zum Artikel" und jedes andere Feld — vorher
brach "Bitte waehlen Sie eine Variation." in der schmalen Spalte zweizeilig um (59 neben 46, Reg. 11). Der
Platzhalter kuerzt jetzt einzeilig (bootstrap-select-Standard: Ellipse); die Variante nennt die Zeile darueber
(dt, z. B. "Breite"), der gewaehlte Wert ist kurz. */
.product-list .productbox-variations .variations .bootstrap-select > .dropdown-toggle .filter-option-inner{min-width:0}
.product-list .productbox-variations .variations .bootstrap-select > .dropdown-toggle .filter-option-inner-inner{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
/* sg (Intensiv 2, Nr. 5): Unter xl stapelt NOVA die drei Spalten (Details | Variationen | Preis+Lager+Knopf), die
Auswahl stand dadurch ueber Preis und Lagerstatus, 96-112 px vom Knopf getrennt — zwei Bedienteile derselben
Handlung ohne Zusammenhang. Die Preis-/Kaufspalte wird aufgeloest (display:contents, Markup unveraendert) und
die Auswahl direkt vor "Zum Artikel" gestellt: Preis, Lager, dann Auswahl + Knopf als Gruppe, gleiche Breite,
gleiche Hoehe, Abstand eine Skalenstufe. Die Auswahl behaelt ihre Funktion (variationSwitch). */
@media (max-width:1199.98px){
.product-list .productbox-row form > .row > .productbox-options{display:contents}
/* Bezugsrahmen = Inhaltskante der Textspalte (wie der Titel): NOVAs -16-px-Rand der Formularzeilen und das
Spaltenpolster heben sich sonst nur teilweise auf — Auswahl und Knopf standen buendig an der Kartenkante. */
.product-list .productbox-row form .row{margin-left:0;margin-right:0}
.product-list .productbox-row form > .row > [class*="col"]{padding-left:0;padding-right:0}
.product-list .productbox-row form > .row > .productbox-options > *{flex:0 0 100%;max-width:100%}
.product-list .productbox-row form > .row > .productbox-variations{order:1}
/* Als Flex-Items kollabieren die Raender nicht mehr (vorher: Lager mb 16 + Knopf mt 12 -> 16). Der Knopf traegt
deshalb keinen eigenen Rand; vor ihm steht entweder der Lagerstatus (sein mb, wie bisher) oder die Auswahl
(eine Stufe, --sg-space-3). */
.product-list .productbox-row form > .row > .productbox-options > .item-list-basket-details{order:2;margin:0}
.product-list .productbox-row form > .row > .productbox-variations:has(.variations){margin-bottom:var(--sg-space-3)}
.product-list .productbox-row form > .row > .productbox-options > .item-list-basket-details > .col{padding-inline:0}
/* NOVAs .productbox-onhover traegt padding-bottom 1rem — zwischen Auswahl und Knopf steht nur die eine Stufe. */
.product-list .productbox-row form > .row > .productbox-variations > .productbox-onhover{padding-bottom:0}
}