/* pz: Kategorieseite — dunkler Kopf, Filter-Sidebar, Toolbar, Produktraster, Pager, SEO-Band, Berater-Box. SOLL: mockup-kategorie.html. Version: siehe Marker --pz-css-kategorie unten (muss mit layout/header.tpl uebereinstimmen) */ :root { --pz-css-kategorie: "20260921-41"; } /* ============================================================================ pz: BROTKRUMEN IM DUNKLEN KOPFBAND (Review R3, B14). IST vorher (gemessen 20.08., /Perlenketten, 1440): Band y226-542, Krumen als hellgrauer Streifen DARUNTER (y542-612), gemischte Schreibung. SOLL (Mockup .chead): kleine Gold-Versalien ueber der H1, im Band. Markup: productlist/header_lead.tpl; NOVAs Streifen ist fuer Artikellisten in layout/breadcrumb.tpl unterdrueckt (dort steht auch, warum). */ .pz-crumbs { margin-bottom: 22px; } .pz-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; list-style: none; margin: 0; padding: 0; } .pz-crumbs li { display: flex; align-items: center; gap: 10px; font-size: 9.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #8c8175; } .pz-crumbs li + li::before { content: ""; width: 12px; height: 1px; background: rgba(247, 244, 238, .28); flex: none; } .pz-crumbs a { color: var(--pz-gold-lt); text-decoration: none; } .pz-crumbs a:hover { color: #f2ede4; } .pz-crumbs li:last-child { color: #8c8175; } /* ============ Kategoriekopf (vollbreit, dunkel) ============ */ .pz-chead { background: var(--pz-ink); color: #f2ede4; /* pz: Skala statt Einzelwert (88/96 waren zwei verschiedene Masse). ⚠️ 20.08. (Ben/K1): "hier auch die abstaende nach oben und unten halbieren" — markiert war der Raum ueber der Brotkrume und unter der H1, beide je 96px (gemessen /Perlencolliers 1440: padT/padB 96px, Band y226-579). Halbe Bandstufe statt eines freien Wertes; die responsiven Entsprechungen (28/20px) ziehen ueber das Token automatisch mit. */ padding: var(--pz-band-halb) 0; } .pz-chead-wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: flex-end; } .pz-chead .pz-eyebrow { display: block; margin-bottom: 26px; } .pz-chead h1 { font-size: 78px; color: #f7f2e9; margin: 0; line-height: 1.02; } .pz-chead-cnt { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; justify-content: flex-end; } .pz-chead-cnt b { font-family: var(--pz-serif); font-size: 40px; font-weight: 500; /* pz: bleibt --pz-gold: der Kategoriekopf ist DUNKEL (.pz-chead h1 auf #f7f2e9), dort misst Flaechen-Gold 6,32:1. */ color: var(--pz-gold); } .pz-chead-cnt span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #8c8175; } /* pz: Der NOVA-Brotkrumen-Streifen ist auf Artikellisten leer (die Krumen stehen jetzt im dunklen Kopfband, siehe layout/breadcrumb.tpl) — sein Polster blieb aber als 20px hoher Leerstreifen unter dem Band stehen (gemessen 390: y390-410, h20 ohne Inhalt). Ein Abstand ohne Element ist genau der "sinnlose Whitespace" aus FEHLERMUSTER.md Zeile 1. :has-Pruefung statt fester Seiten-Ausnahme, damit der Streifen sofort zurueckkommt, falls dort je wieder etwas gerendert wird. */ #content-wrapper.is-item-list .breadcrumb-container:not(:has(.breadcrumb)) { padding-top: 0; padding-bottom: 0; } /* Breadcrumb ruhig auf ivory */ .breadcrumb-container { background: var(--pz-ivory); } .breadcrumb { background: transparent; font-size: 12px; letter-spacing: .04em; } .breadcrumb a, .breadcrumb-item { color: var(--pz-muted); } /* ============================================================================ pz: ANSCHLUSS DUNKLES BAND -> INHALT (Ben 20.08./K2: "der content klebt am banner ... hier muss etwas abstand rein"). Gemessen vorher (/Perlencolliers, 1440): Bandunterkante y=579, #sidepanel_left top=579 — also GENAU 0px. Das "KATEGORIEN"-Label sass auf der Bandkante. Die rechte Spalte startete bei 611, weil NOVAs Toolbar-Zeile ein eigenes margin-top von 32px mitbrachte: zwei verschiedene Masse an derselben Grenze, eins davon 0. Genau dafuer gibt es --pz-sek-lead (76px, Mockup `.layout{padding:76px 0 0}`) — es war auf dieser Seitengattung nur nie gesetzt, weil pz-base das NOVA-Polster an der Basis nullt. Skalen-Regel 2 "an jeder Grenze zieht GENAU EIN Skalenwert": das Mass traegt der Wrapper, NOVAs Toolbar-Margin faellt weg. Beide Spalten beginnen dadurch auf derselben Hoehe. */ /* ⚠️ KORREKTUR 20.08. (Ben/B1, Screenshot mit rot markiertem Leerband: "Abstand halbieren"). Der Wert war mit --pz-sek-lead (76px) richtig HERGELEITET, aber zu gross: ueber dem Streifen steht kein Inhalt, sondern eine harte Farbkante, und darunter beginnt die Seite nicht mit einer Ueberschrift, sondern mit der Toolbar-Zeile — 76px sehen dort aus wie ein vergessenes weisses Band. Es zieht deshalb die benannte HALBSTUFE --pz-lead-halb (38 / 24 / 16px), kein freier Pixelwert. FEHLERREGISTER 17 GEPRUEFT ("ist der Wert HIER falsch oder UEBERALL?"): --pz-sek-lead steht an vier weiteren Stellen — .pz-404-head (Kopfpolster einer Inhaltsseite), .content-cats-small (Unterkategorie-Kacheln -> Liste), .pz-setgrid (Kopf -> Raster INNERHALB des Set-Bandes) und .pz-nature (PDP). Keine davon ist diese Grenze: die Paarung "dunkles Vollbild-Kopfband -> sofort folgende Toolbar" gibt es im ganzen Shop genau einmal, auf der Artikelliste. Halbiert wird deshalb hier und nur hier — die Stufe selbst bleibt fuer die anderen vier unveraendert. */ #content-wrapper.is-item-list { padding-top: var(--pz-lead-halb); } #result-wrapper .productlist-page-nav-header-m { margin-top: 0; } /* ============ Seitenraster (Reviewer M5) ============ */ /* Artikellisten-Container auf denselben 1280px-Rahmen wie die Startseite — NOVAs container-fluid-xl lief bis an die Viewport-Kanten (Sidebar x=16). */ @media (min-width: 1200px) { #content-wrapper.is-item-list { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } /* pz: Die Spaltenzahl steht NICHT hier — sie folgt weiter unten der Item-Zahl (Reviewer F12). Zwei Fassungen desselben Fixes im selben Stylesheet sind derselbe Fehler in gruen (Fehlerregister 17). */ } /* ============ Unterkategorie-Kacheln ============ ⚠️ Der frueher hier stehende Regelblock hing an `.subcategories` — eine Klasse, die dieser Shop nie rendert; er war wirkungslos. Der wirksame Block steht am Dateiende unter "Reviewer F2" (Selektor belegt gemessen). */ /* ============ Filter-Sidebar ============ */ /* Boxen-Karten auf ruhige Mockup-Optik (fgroup): kein Kartenrahmen, Trennlinien, Gold-Titel */ #sidebox .card, .sidebox-left .card, #footer-sidepanel-left .card, aside .card { border: 0; background: transparent; border-radius: 0; } aside .card + .card, aside .box + .box { border-top: 1px solid var(--pz-line); } /* ============================================================================ pz: EIN TRENNER PRO FILTERGRUPPE (Ben 20.08./K2: "im filterbereich / navi links irgendwelche komischen sinnlosen raender doppelt"). Gemessen vorher (/Perlencolliers, 1440, Border-Scan ueber #sidepanel_left): jede Filtergruppe brachte ZWEI Haarlinien 8px auseinander mit — y=893-894 HR.box-filter-hr (NOVAs eigener Abschluss IM Kasten) y=902 border-top (die pz-Regel eine Zeile darueber) Zwei Quellen fuer dieselbe Trennung. Die Regel oben bleibt (sie sitzt an der Gruppengrenze und traegt den CI-Ton), NOVAs HR faellt weg. ⚠️ Nebenbefund, hier korrigiert: der Kommentar weiter unten behauptet, `#sidepanel_left` sei ein DIV und die aside-Regeln griffen nie. Gemessen ist es ein