/* pz: Artikelseite — Galerie, Buy-Box, USPs, Zahlarten, Pflege-Band, Tabs. SOLL: mockup-artikel.html. NOVAs Struktur bleibt, hier nur Optik. ⚠️ Lehre I.6: NOVA deckelt Form-Controls/Buttons per max-height - bei Hoehenangaben in der Kaufzeile immer max-height:none mitsetzen. Version: siehe Marker --pz-css-artikel unten (muss mit layout/header.tpl uebereinstimmen) — der Dateikopf nennt bewusst KEINE Zahl mehr: er stand seit dem 19.08. auf "20260819-1", waehrend der Marker bei -43 war, und eine Version, die an zwei Stellen steht, laeuft auseinander. */ :root { --pz-css-artikel: "20260921-47"; /* pz: THUMBLEISTEN-GITTER (Ben 20.08./P7). Der Abstand zwischen zwei Thumbs ist das Mockup-Thumbmass und steht seit Fixrunde 3 an zwei Stellen (gap der Leiste, Abstand Buehne->Leiste). Er geht ab jetzt zusaetzlich in die BREITENRECHNUNG der Spuren ein — drei Kopien desselben Wertes koennen auseinanderlaufen (Fehlerregister 17), deshalb EIN benannter Wert. */ --pz-gal-thumb-gap: 12px; } /* ============ Kopfzeile / Titel ============ */ .pz-pdp-kick { display: block; margin-bottom: 14px; } #product-offer .product-title, .product-title h1, h1.product-title { font-family: var(--pz-serif); font-size: 44px; font-weight: 500; line-height: 1.08; color: var(--pz-ink); } /* Artikelnummer/Kategorie-Zeile ruhig */ #product-offer .product-attributes, #product-offer .base-data { font-size: 11.5px; letter-spacing: .05em; color: var(--pz-muted); } /* ============================================================================ pz: GALERIE KOMPLETT (Review R3, B6). Gemessen 20.08. (1440, P026) VORHER: Buehne .square.square-image x111-704 y360-953 (593x593 = 1:1) Bild img.product-image y444-868 -> 84px Weissband oben und unten Thumbs 4 Slides x170-273 … x527-630 in einer 593px-Leiste -> 59px tote Rinne links UND rechts (NOVA-Lehre N.4: `.carousel-arrows-inside` reserviert Track-Margins, hier 57,5px, auch ohne gebaute Pfeile) Leiste #gallery_preview_wrapper: weisser Kasten mit 1px Rahmen Abstand Bild -> Leiste sichtbar 119px (Bildunterkante 868 zu 987) SOLL (Mockup .gal): Buehne 5/4 in ivory-2, Bild formatfuellend, direkt darunter eine randlose Thumbleiste aus gleich grossen Quadraten. ⚠️ Der Zoom bleibt ausgenommen: NOVAs Fullscreen ist kein Modal, sondern der Zustand `.fullscreen` an #image_wrapper — mit `cover` waere das vergroesserte Bild dort beschnitten. */ #gallery .square.square-image { background: var(--pz-ivory-2); border: 1px solid var(--pz-line); } /* 5/4 statt NOVAs Quadrat: das Verhaeltnis macht `.square::before` (base_crit.scss) — 80 % = 4/5 Hoehe zu Breite. */ #gallery .square.square-image::before { padding-bottom: 80%; } #image_wrapper:not(.fullscreen) #gallery .square-image .inner, #image_wrapper:not(.fullscreen) #gallery .square-image .inner picture { display: block; width: 100%; height: 100%; } #image_wrapper:not(.fullscreen) #gallery .square-image .inner img { width: 100%; height: 100%; object-fit: cover; } /* Ein Rabatt-Badge auf der PDP-Buehne gibt es in diesem Shop NICHT: `snippets/ribbon.tpl` wird ausschliesslich aus productlist/item_box.tpl und item_list.tpl eingebunden (gegengeprueft 20.08. per grep ueber alle NOVA-.tpl). Die Fahne der Produktkarte sitzt seit heute flach im Bildeck (pz-base.css) — dieselbe Optik, dort wo sie wirklich rendert. Sollte der Kunde spaeter ein Badge-Plugin einsetzen, gehoert die Regel HIER hin. */ /* --- Thumbleiste: randlos, gleich grosse Quadrate, volle Breite ---------- */ #gallery_preview_wrapper { background: transparent; border: 0; padding: 0; } /* NOVA-Lehre N.1: `gallery_preview` hat `slidesToShow` HART in jtl.evo.js — ueber kein Template konfigurierbar. Der Track wird deshalb per CSS zum Raster; der delegierte Klick-Handler von slick ueberlebt das (bei cargotrike gemessen). ⚠️ Die Inline-Styles von slick (`width:476px` am Track, `width:103px` je Slide) verlangen !important — hier kein Nachdruck, sondern die einzige Ebene, die gegen ein style-Attribut gewinnt. ⚠️ KORREKTUR 20.08. (Ben/P7: "die thumbs der zusaetzlichen bilder soll IMMER einheitlich gross sein"). Vorher stand hier `grid-auto-flow: column` + `grid-auto-columns: minmax(0,1fr)`: die Spuren teilten die Buehnenbreite unter der jeweiligen BILDANZAHL auf. Gemessen 20.08. (1440, Buehne 584px): 4 Bilder -> 137px je Thumb (Soll), 3 Bilder -> 186px, 2 Bilder -> 286px. Dieselbe Leiste in drei Groessen, je nachdem wie viele Fotos gepflegt sind. Jetzt: FESTE Spurbreite, abgeleitet aus der 4er-Reihe, die Ben als Sollmass benannt hat — (Buehnenbreite - 3 Luecken) / 4. Bei 1-3 Zusatzbildern bleiben die Thumbs damit 137px und stehen linksbuendig; die Restflaeche bleibt frei, statt die Bilder aufzublasen. `justify-content: start` ist dafuer noetig, weil ein Grid seine Spuren sonst im Container verteilt. VERHALTEN AB 5 BILDERN — bewusste Entscheidung (im Bestand gibt es den Fall noch nicht, per DOM-Duplikation im Browser geprueft): MEHRZEILIGER UMBRUCH, kein Thumb-Slider. `repeat(4, )` mit dem Grid-Standardfluss `row` legt Bild 5 ff. automatisch in eine zweite Reihe, in derselben Groesse. Gegen den Slider spricht die Mechanik, nicht der Geschmack: slick baut fuer den Endlos-Modus KLONE (Fixrunde 3, gemessen 390: 4 echte Bilder -> 11 Slides), die in einem Raster als Phantomspalten auftauchen und die hier eine Zeile darunter zurueckkaemen; dazu steht `slidesToShow` hart im Shop-JS. Eine zweite Thumbreihe braucht keine Bedienung, zeigt alle Bilder gleichzeitig und kann nichts verstecken. */ #gallery_preview .slick-list { margin: 0 !important; padding: 0 !important; } #gallery_preview .slick-track { display: grid; grid-template-columns: repeat(4, calc((100% - 3 * var(--pz-gal-thumb-gap)) / 4)); justify-content: start; gap: var(--pz-gal-thumb-gap); width: 100% !important; margin: 0 !important; transform: none !important; } /* slicks Clearfix wuerde als echtes Grid-Item zwei Phantomspalten erzeugen */ #gallery_preview .slick-track::before, #gallery_preview .slick-track::after { content: none; } #gallery_preview .slick-slide { width: auto !important; margin: 0 !important; float: none !important; /* ⚠️ Fixrunde 8 / C4: NOVA gibt jedem Slide einen 1px TRANSPARENTEN Rahmen. Er ist unsichtbar und hat den Thumb trotzdem auf 135px statt der als Sollmass festgehaltenen 137px gedrueckt (Grid-Spur 137, Inhalt 135) — und die Thumbleiste endete dadurch 1px vor der Kante, an der Buehne und Naturprodukt-Linie abschliessen. Erst mit border:0 misst die ganze Galeriespalte EINE Fluchtlinie (120…704). */ border: 0; } /* ⚠️ slick baut unterhalb lg KLONE fuer den Endlos-Modus (gemessen 390: 4 echte Bilder, 11 Slides). In einem Raster, das alle Spuren gleich breit macht, wurden daraus elf 22px-Briefmarken. Klone raus — sie werden nur fuer das Weiterschieben gebraucht, das die Leiste als Raster gar nicht macht. */ #gallery_preview .slick-slide.slick-cloned { display: none !important; } /* ⚠️ Ebenso raus: Pfeile und Punkte DER LEISTE. Auf 1440 baut slick sie gar nicht (4 Bilder <= slidesToShow), unterhalb lg schon — dort standen sie als zwei 33x71-Knoepfe rechts neben den Thumbs und blaehten die Leiste von 88 auf 263px auf (im Screenshot als grosse Luecke gesehen). Ein Raster, das alle Thumbs zeigt, hat nichts zu blaettern. */ #gallery_preview .slick-arrow, #gallery_preview .slick-dots { display: none !important; } #gallery_preview .slick-slide .square { width: 100% !important; display: block !important; background: var(--pz-ivory-2); border: 1px solid var(--pz-line); } #gallery_preview .slick-slide .square::before { padding-bottom: 100%; } /* ⚠️ NOVA-BEFUND FIXRUNDE 8 / C4 (gemessen 1440, P026, VORHER): Thumb-Rect 135 x 142,75px — die Quadrate waren gar keine. NOVAs `.square::before` (base_crit.scss) ist `display: inline-block`; als Inline-Element haengt es in einer Zeilenbox und bekommt deren Unterlaenge dazu (line-height 24,75px -> +7,75px). Der Platzhalter selbst rechnet richtig (padding-bottom 133px = 100 % der Inhaltsbreite), das Seitenverhaeltnis ist trotzdem falsch, und zwar an JEDEM .square dieser Galerie — Buehne wie Thumb. `display: block` nimmt das Element aus dem Zeilenfluss; danach ist das Kastenmass exakt Inhaltsbreite + Rahmen. ⚠️ Fullscreen-Guard (NOVA-Lehre N.5): der Zoom ist ein ZUSTAND desselben #image_wrapper, kein Modal — eigene BUEHNEN-Regeln gelten dort sonst unveraendert weiter und schneiden das Vollbild an. Deshalb steht die BUEHNE unter `:not(.fullscreen)`. ⚠️ FIXRUNDE 8b / 15e — DIE THUMBLEISTE AUSDRUECKLICH NICHT. Der Guard stand bisher auch an `#gallery_preview`, obwohl der gesamte uebrige Leisten-Umbau (Grid statt slick-Track, border:0, transform:none, Klone aus) ihn nie hatte. Ergebnis war eine Leiste, die im Zoom in EINEM Punkt zurueckfiel: gemessen nach echtem Lupen-Klick (1440) Thumbs 173x181px statt quadratisch — genau die 8px Zeilenkasten-Unterlaenge aus N.11(a), die der Guard im Ruhezustand entfernt. Konsequent ist hier NICHT, den Rest auch zu guarden: das gaebe im Zoom NOVAs slick-Leiste mit `slidesToShow:5`, Klonen und Pfeilen zurueck (N.1) — also eine ZWEITE Bauart derselben Leiste, die niemand entworfen hat. Die Thumbleiste ist im Zoom deshalb bewusst DERSELBE Baustein wie darunter; der Guard faellt fuer sie ersatzlos weg. Gegengemessen: Lupe real geklickt, Leiste 4 Thumbs, keine Klone, keine Pfeile, Bilder sichtbar. */ #image_wrapper:not(.fullscreen) #gallery .square::before { display: block; } #image_wrapper #gallery_preview .square::before { display: block; } /* ⚠️ Fehlerregister 1 (Bilder unsichtbar nach Galerie-CSS) — beim ersten Versuch genau so passiert und im Screenshot gesehen: vier leere Kaesten. Ursache war NICHT das Laden (naturalWidth 200, opacity 1), sondern die Position: NOVA setzt am Thumb-`.inner` ein `top` in Hoehe des ::before-Platzhalters (gemessen top: 140.75px) statt top:0 wie in der Hauptbuehne — das Bild lag dadurch KOMPLETT UNTER seinem Kasten und wurde vom overflow der slick-list abgeschnitten. Die vier Seiten deshalb ausdruecklich auf 0 setzen. */ #gallery_preview .slick-slide .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: auto; height: auto; } #gallery_preview .slick-slide .inner picture { display: block; width: 100%; height: 100%; } #gallery_preview .slick-slide .inner img { width: 100%; height: 100%; object-fit: cover; } #gallery_preview .slick-current .square { border-color: var(--pz-gold); } #gallery .thumb.active, #gallery img.active { box-shadow: inset 0 0 0 2px var(--pz-gold); } /* Abstand Bild -> Leiste: EIN Wert (Mockup-Thumb-Gap), nicht die Summe aus Slick-Bottom-Margin und Bootstrap-Spaltenpolster. */ #image_wrapper .product-detail-image-preview-bar { margin-top: var(--pz-gal-thumb-gap); padding-top: 0; } /* ⚠️ Der Eigenabstand sitzt an #gallery (slick), NICHT an #gallery_wrapper — gemessen 32px; ohne ihn zu nullen bleibt die Summe 32+12 statt 12. */ #image_wrapper #gallery, #image_wrapper #gallery_wrapper { margin-bottom: 0; } #image_wrapper .gallery-with-action-main > .col { padding-bottom: 0; } /* --- Merken/Vergleichen an der Buehne verankern (B13a) ------------------- Gemessen: die beiden runden NOVA-Knoepfe schwebten in Weiss (#fff auf #707070) 16px vor der Bildecke, mobil ueberlappten sie die Bildkante. Sie bleiben (Merkzettel/Vergleich sind Funktionen), bekommen aber die Palette und sitzen flach in der oberen rechten Bildecke — Gegenstueck zur flachen Fahne links oben in der Produktkarte. ⚠️ NOVA-Lehre N.3: `.badge-circle-1{border-radius:50%!important}` steht im Kompilat — ohne gleiche important-Ebene bleibt die Kreisform. */ /* ⚠️ Der rechte Wert enthaelt ZWEI Anteile, beide benannt: 16px = Spaltenpolster. Bezugsrahmen der absoluten Position ist die Bootstrap-Spalte, und die traegt ihr Gutter — mit right:0 sassen die Knoepfe 16px NEBEN der Buehne statt in ihrer Ecke (gemessen: Knopfkante 720 gegen Buehnenkante 704). --pz-nav-halb = der EINZUG in die Buehne hinein. ⚠️ FIXRUNDE 8b / N7 (Fehlerregister 2): Mit `top: 0; right: 16px` sassen die beiden Knoepfe exakt AUF der Buehnenkante — gemessen 20.08. (1440): Overlay 599,348 R=704 B=388, Buehne 120,348 R=704. Also Abstand nach oben 0 und nach rechts 0. Register 2 ist da unmissverstaendlich: "Ein Overlay, das im Ruhezustand ueber/auf der Kante sitzt, ist schon der Fehler — der Hover macht ihn nur sichtbar." Bens Vorgabe von heute frueh galt der NEU-Fahne der Produktkarte ("mehr nach innen eingedrueckt, von oben und von links"); es ist derselbe Baustein-Typ und bekommt denselben Einzug aus derselben Skalenstufe (Fehlerregister 17 — der Wert ist nicht auf der Karte richtig und auf der PDP egal). Ein Fullscreen-Guard ist hier NICHT noetig und waere irrefuehrend: `.product-actions` haengt in der Bootstrap-Spalte, nicht in #image_wrapper (gemessen: parent = `col col-12`) — NOVAs `.fullscreen` erreicht sie nicht. */ #product-offer .product-actions { top: var(--pz-nav-halb); right: calc(16px + var(--pz-nav-halb)); display: flex; gap: 1px; } #product-offer .product-actions .badge-circle-1 { border-radius: 0 !important; background-color: var(--pz-ivory) !important; border: 1px solid var(--pz-line) !important; color: var(--pz-ink) !important; width: 40px; height: 40px; box-shadow: none; } #product-offer .product-actions .badge-circle-1:hover { background-color: var(--pz-gold) !important; border-color: var(--pz-gold) !important; color: #14110c !important; } /* ============ Preisbox ============ */ /* Lehre 18/spanl: NOVA setzt PDP-Werte per ID - eigener Selektor beginnt mit #product-offer, sonst verliert die Klassenregel still. */ #product-offer .price_wrapper .price { font-size: 46px; font-weight: 600; letter-spacing: -.02em; color: var(--pz-ink); line-height: 1; font-family: var(--pz-sans); } #product-offer .price_wrapper .strike, #product-offer .price_wrapper del { font-size: 13px; color: var(--pz-muted); /* pz: 21.08. heller Grund -> --pz-muted (muted-d misst hier 2,45:1) */ } #product-offer .vat_info, #product-offer .vat-info { font-size: 12.5px; color: var(--pz-muted); } /* pz: Reviewer M7 — UVP-/Ersparnis-Zeile und Kurzbeschreibung standen in NOVA-Blau; ruhig in Palette faerben (der Netto-UVP-WERT bleibt als Datenthema dokumentiert) */ #product-offer .rrp-price, #product-offer .uvp, #product-offer .product-uvp, #product-offer small, #product-offer .text-muted { color: var(--pz-muted) !important; } #product-offer a { color: var(--pz-text); } #product-offer a:hover { color: var(--pz-gold); } /* pz: Reviewer M8 — "Aehnliche Artikel" ins Seitenraster ruecken; die Kartenoptik selbst kommt jetzt generisch aus pz-base (.productbox) */ .recommendations, #product-offer ~ .recommendations { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } .recommendations .productbox-title a { text-decoration: none; } /* ============ Kaufzeile (Stepper + Button) ============ */ /* pz: Reviewer M6 — der Wrapper heisst .form-counter (#quantity-grp), nicht .quantity-wrapper; die alte Regel griff nie (Stepper blieb 41px). */ #add-to-cart .form-counter .form-control, #add-to-cart .form-counter .btn { /* pz: !important - NOVA setzt die Input-Hoehe auch nach max-height:none auf 45px (gemessen 19.08., Buttons ragten 13px ueber die Box) */ height: 58px !important; max-height: none; /* pz: Lehre I.6 - sonst kappt NOVAs max-height (48.5px) */ border-radius: 0; border-color: var(--pz-ctl-line); background: transparent; color: var(--pz-ink); } #add-to-cart .form-counter .input-group-prepend, #add-to-cart .form-counter .input-group-append { height: 58px; } /* Stepper kompakt wie im Mockup (~133px statt 278px) */ #add-to-cart .form-counter .form-control { width: 48px; flex: 0 0 48px; /* pz: NOVAs 15px Innenpolster je Seite frisst eine 44px-Zelle auf (Fehlerregister 15) - Polster runter, damit die Zahl Platz behaelt. */ padding-left: 4px; padding-right: 4px; text-align: center; font-weight: 600; } #add-to-cart .form-counter { flex-wrap: nowrap; width: fit-content; } #add-to-cart .form-counter .btn { flex: 0 0 44px; width: 44px; padding: 0; } /* Kaufzeile: beide Elemente auf eine Grundlinie (Reviewer M6, 14px Versatz) */ #add-to-cart .basket-form-inline { align-items: flex-end; } #product-offer #add-to-cart .btn-primary, #product-offer button[name='inWarenkorb'] { height: 58px; max-height: none; /* pz: Lehre I.6 */ border-radius: 0; background: var(--pz-gold); border-color: var(--pz-gold); color: #14110c; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } #product-offer #add-to-cart .btn-primary:hover, #product-offer button[name='inWarenkorb']:hover { background: var(--pz-gold-lt); border-color: var(--pz-gold-lt); color: #14110c; } /* ============================================================================ pz: D8 — CONTAINER FUER EXPRESS-ZAHLARTEN VORHALTEN (Ben 20.08., Nachtrag zur Fixrunde 8; NOVA-LIVE-LEHREN O.5, dort aus spanl gemessen). Die Zahlarten-Plugins haengen ihre Buttons SELBST ins Template. Aktiv ist hier heute keines — genau deshalb steht die Regel jetzt hier: wer den Kaufblock umbaut und den Platz nicht einplant, bekommt beim Aktivieren einen Fremdkoerper mitten in die Kaufzeile (spanl-Verlauf). AmazonPay haengt `.lpa-button-context-payDetail` (~514x64px) direkt in `#add-to-cart` unter die Kaufzeile — die richtige Stelle. Deshalb kein Eingriff am Plugin-Markup, nur ein Rahmen darum: Trennlinie aus --pz-line plus Mikro-Label, das den zweiten Kaufweg ankuendigt. ⚠️ Der zweite, kontextlose `.lpa-button-context-login` (0x0, ausgeblendet) wird BEWUSST nicht mitgestylt — sonst steht dort eine Trennlinie mit Label ueber einem Button, den es nicht gibt (O.5). ⚠️ PayPal bekommt hier KEINE Breitenregel: das Plugin rendert PayPal und "Spaeter bezahlen" als zwei `col-sm-6`. Bleibt ein halbbreiter Einzelbutton stehen, fehlt die zweite Zahlart — das ist Plugin-Konfiguration, keine CSS-Frage (O.5, bei spanl so entschieden). */ #add-to-cart .lpa-button-context-payDetail { /* ⚠️ Fixrunde 8b: hier stand ein freihaendiges `margin-top: 18px` — der einzige Pixelwert im ganzen Block, waehrend Polster und Linie darunter schon aus der Skala kamen (Fehlerregister 3: Einzelwerte statt Skala). --pz-sek-nav ist die naechste benannte Stufe (32 / 24 / 20px) und zieht responsiv mit; der optische Abstand aendert sich um 14px nach oben, was dem Trenncharakter der Linie entspricht. */ margin-top: var(--pz-sek-nav); padding-top: var(--pz-nav-halb); border-top: 1px solid var(--pz-line); } #add-to-cart .lpa-button-context-payDetail::before { content: "oder direkt bezahlen mit"; display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pz-text); margin-bottom: 10px; } /* Die Plugin-Buttons duerfen nie breiter werden als die Kaufspalte: 514px Plugin-Mass gegen 358px Kaufspalte bei 390px (O.5). Gemessen mit einer DOM-Probe in genau diesen Massen: die Plugin-`.row` selbst steht dank der Basisregel buendig (Ueberstand 0/0), ein Kind mit fester 514px-Breite sprengte den Viewport aber weiter (scrollWidth 546 bei clientWidth 390). Der Deckel greift deshalb auch eine Ebene tiefer — dort, wo das Plugin seinen Button in die `col` haengt. */ #add-to-cart .lpa-button-context-payDetail > *, #add-to-cart .lpa-button-content.row > [class*="col"] > * { max-width: 100%; } /* Merkzettel/Vergleich als ruhige Textlinks */ #product-offer .wishlist-add, #product-offer .compare-add { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #413b34; } /* ============ USPs + Zahlarten unter der Kaufbox ============ */ .pz-pdp-usps { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--pz-line); } .pz-pdp-usps li { display: flex; gap: 15px; align-items: center; padding: 16px 0; font-size: 13.5px; color: #413b34; border-bottom: 1px solid var(--pz-line); } .pz-pdp-usps svg { width: 19px; height: 19px; color: var(--pz-gold); flex: none; } .pz-paysm { margin-top: 26px; } .pz-paysm-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pz-muted); margin-bottom: 12px; } /* pz: Review R3 (B13c) — die Chips standen in der 593px breiten Kaufspalte als 2x50%-Raster mit Umbruch. Mockup .paysm div ist ausdruecklich `display:flex;flex-wrap:wrap;gap:8px` mit inhaltsbreiten Kaestchen; die Rasterfassung (auto-fit/minmax) bleibt dem FUSS vorbehalten, wo die Spalte nur ~230px breit ist und ein langer Chip sonst ueberliefe. Zwei bewusst verschiedene Fassungen fuer zwei verschiedene Breiten — kein doppelter Fix derselben Sache (Fehlerregister 17), deshalb hier ausdruecklich notiert. */ .pz-paysm .pz-pays { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0; } .pz-paysm .pz-pays span { border-color: var(--pz-line); color: #5b544c; /* EINE Hoehe fuer die ganze Gruppe (Fehlerregister 11) */ min-height: 38px; padding: 8px 14px; white-space: nowrap; } /* ============================================================================ pz: STAMMDATEN-ZEILE (Review R3, B13d). Gemessen 20.08.: `ul.info-essential` setzte Artikelnummer und Kategorie untereinander (y566-591 / y591-616) ohne Abschluss. Mockup: EINE Zeile, durch einen Punkt getrennt, darunter eine Linie. */ #product-offer .info-essential { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 26px; padding: 0 0 18px; border-bottom: 1px solid var(--pz-line); list-style: none; font-size: 11.5px; letter-spacing: .05em; color: var(--pz-muted); } #product-offer .info-essential > li { margin: 0; } #product-offer .info-essential > li + li::before { content: "·"; margin-right: 10px; color: var(--pz-muted); /* pz: 21.08. heller Grund -> --pz-muted (muted-d misst hier 2,45:1) */ } /* ============ Tabs / Beschreibung ============ ⚠️ ENTFERNT in Fixrunde 8 / C1: hier standen drei Regeln auf `.product-tabs …` und `#product-offer ~ * .nav-tabs …`. BEIDE Anker gibt es im NOVA-Markup nicht — `product-tabs` ist die ID der Reiterliste (keine Klasse), und der Reiterbereich ist kein Geschwister von #product-offer. Die Regeln waren also seit dem ersten Tag wirkungslos und haben die Stelle trotzdem als "erledigt" aussehen lassen (Fehlerregister 17: eine zweite, tote Fassung derselben Sache verhindert, dass jemand weitersucht). Die wirksame Fassung steht weiter unten im C1-Block. */ /* ============ Pflege-Band (dunkel) ============ */ .pz-care { background: var(--pz-ink); color: #b3a89b; /* pz: Skala statt Einzelwerte (110/96) — das dunkle Band traegt sein Innenmass selbst, den hellen Anteil der Grenze traegt das Beschreibungsband darueber. ⚠️ 20.08. (Ben/P3b+c): "abstaende halbieren" — markiert waren der Band-Innenabstand OBEN (ueber "PERLEN RICHTIG TRAGEN") und UNTEN (unter den vier Pflege-Spalten), gemessen je 96px. Halbe Bandstufe statt zweier freier Werte; die responsiven Entsprechungen (28/20px) ziehen ueber das Token automatisch mit. */ padding: var(--pz-band-halb) 0; margin-top: 0; } .pz-care-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 64px; } .pz-care h2 { font-size: 50px; color: #f7f2e9; margin: 22px 0 0; } /* pz: 21.08. — die Basisregel `h1 em, h2 em` traegt seit heute --pz-gold-text (Hellgrund-Ton, 5,01:1 auf Ivory). Auf diesem DUNKLEN Band waere das 3,46:1 statt der bisherigen 6,32:1 — also eine Verschlechterung. Dunkle Baender holen den Flaechen-Ton zurueck, genau wie .pz-eyebrow-d es fuer die Eyebrow tut. */ .pz-care h2 em { color: var(--pz-gold); } .pz-care .pz-lead { max-width: 34ch; margin: 0; } .pz-care-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } /* pz: Review R3 (B7) — die Trennlinie ueber den vier Pflege-Spalten war angelegt, aber unwirksam: `border-top-color` stand, `border-top-width` blieb 0 (gemessen 20.08.). Mockup .care .col: 1px Linie + 26px Luft. */ .pz-care-grid > div { min-width: 0; border-top: 1px solid var(--pz-line-d); padding-top: 26px; } .pz-care-n { font-family: var(--pz-serif); font-size: 21px; /* pz: bleibt --pz-gold: das Pflegeband ist DUNKEL (--pz-ink), dort misst Flaechen-Gold 6,32:1. --pz-gold-text waere hier mit 3,46:1 die Verschlechterung — Text-Gold ist ausschliesslich ein Hellgrund-Ton. */ color: var(--pz-gold); margin-bottom: 14px; } .pz-care-grid p { font-size: 13.5px; line-height: 1.75; color: #9d9286; margin: 0; } /* ============ Responsive (Mockup ist Desktop-only — eigene Entscheidungen) ============ */ @media (max-width: 991.98px) { #product-offer .product-title, .product-title h1, h1.product-title { font-size: 32px; } #product-offer .price_wrapper .price { font-size: 36px; } .pz-care-top { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; } .pz-care h2 { font-size: 34px; } .pz-care-grid { grid-template-columns: 1fr 1fr; gap: 28px; } /* ⚠️ Die Mobilfassung des Beschreibungsbandes steht NICHT hier, sondern direkt an ihrem Band weiter unten — `.pz-pdesc-wrap` wird erst DANACH definiert, und bei gleicher Spezifitaet entscheidet die Quellreihenfolge (erster Versuch genau so gemessen: Regel griff nicht, Spalten blieben 118/142px). Fehlerregister 16 in seiner harmlosen Variante. */ } @media (max-width: 575.98px) { .pz-care-grid { grid-template-columns: 1fr; } .pz-care h2 { font-size: 28px; } } /* ============ "Aehnliche Artikel" — Slider-Karten (Reviewer F3) ============ Die Slider-Items tragen KEINE .productbox, sondern .item-slider-* - die generische Kartentypo aus pz-base greift dort nicht. Gemessen 19.08.: Titel Inter 15px unterstrichen in #525252, Preis 16px #525252. */ .x-related .item-slider-desc { font-family: var(--pz-serif); font-size: 20.5px; line-height: 1.25; font-weight: 500; color: var(--pz-ink); } /* Die Unterstreichung sitzt am umschliessenden , nicht am span */ .x-related .product-wrapper a, .x-related .product-wrapper a:hover { text-decoration: none; } .x-related .product-wrapper a:hover .item-slider-desc { color: var(--pz-gold); } .x-related .item-slider-price .price { font-size: 19px; font-weight: 600; color: var(--pz-ink); } .x-related .item-slider-price .price_wrapper .strike, .x-related .item-slider-price .price_wrapper del { font-size: 13px; color: var(--pz-muted); /* pz: 21.08. heller Grund -> --pz-muted (muted-d misst hier 2,45:1) */ } /* pz: Schutz gegen NOVAs `.slick-smooth-loading{max-height:200px}` (_carousel.scss). Der Slider-Inhalt misst 220px - die Regel wird zwar im Normalfall von .slick-lazy bzw. .slick-initialized ueberschrieben (19.08. in BEIDEN Zustaenden gemessen: max-height none, Inhalt 220 in 244/246px Zeile, kein Beschnitt), faellt aber weg, sobald der IntersectionObserver spaeter greift. Deckel hier hart aufheben. */ .x-related .row.slick-smooth-loading { max-height: none; } /* ============================================================================ pz: C5 — "AEHNLICHE ARTIKEL": NOVA-STANDARD, NUR CI (Ben-Entscheidung 20.08.; Fehlerregister-23-Default "Framework-Baustein unangetastet lassen und nur die Farbgebung auf CI ziehen"). An der slick-Mechanik wird NICHTS geaendert — keine Track-Umbauten, keine Klon-Regeln, keine eigene Blaetterlogik. Was hier steht, ist ausschliesslich Farbe und Kontur der Bedienelemente. BEFUND (gemessen 1440, P026, nach Scroll + 2s slick-Init): die beiden Pfeile rendern als 32,75 x 71px Kaesten in `rgb(235,235,235)` mit schwarzem Glyph — NOVA-Grau mitten in einer warmen Ivory-Sektion. Sie liegen als Overlay ueber der ersten/letzten Karte und fallen im Ruhezustand nicht auf; genau deshalb sind sie bis Fixrunde 8 durchgerutscht (Fehlerregister 14: ein Element, das man nie ausgeloest hat, ist ungeprueft). ⚠️ NOVA-Lehre N.4 GEGENGEMESSEN, greift hier NICHT: `.carousel-arrows-inside` reserviert bei cargotrike `margin: 0 99px` am Track. Hier misst der Track `margin: 0px 0px 2px` und die Leiste steht buendig in der Inhaltsspalte — die tote Rand-Rinne existiert in diesem Slider nicht, es gibt also nichts zu neutralisieren (eine Regel "auf Verdacht" waere eine tote Fassung, Fehlerregister 17). */ .x-related .slick-arrow { background-color: var(--pz-ivory); border: 1px solid var(--pz-line); color: var(--pz-ink); border-radius: 0; box-shadow: none; } .x-related .slick-arrow:hover, .x-related .slick-arrow:focus { background-color: var(--pz-gold); border-color: var(--pz-gold); color: #14110c; } /* ⚠️ Fixrunde 8b: Hier standen zwei Regeln fuer `.x-related .slick-dots` ("falls slick unterhalb lg Punkte baut"). Gegengemessen am echten DOM, 1440 UND 390 mit voller Datenlage (7 Empfehlungen): `.x-related .slick-dots` = 0 Treffer auf beiden Breiten; das einzige `.slick-dots` des Shops sitzt @390 an `.product-images` (der Hauptgalerie) und wird dort ausgeblendet. Die Regeln waren also "auf Verdacht" gebaut und haben nie getroffen — genau der tote Selektor aus Lehre N.13, der nicht auffaellt, weil nichts kaputt aussieht. Ersatzlos entfernt. */ /* ============ Stepper: EIN Rahmen statt drei Kaesten (Reviewer m10) ============ Ben 19.08. (Screenshot): "die drei Stepper-Boxen sind sichtbar ungleich, die Border-Linien springen". Gemessen war die Ursache NICHT die Hoehe der Kinder (alle drei 58px), sondern: a) der mittlere .form-control hatte border-style:none, die beiden Buttons 1px solid -> keine durchgehende Rahmenlinie, die Buttonkanten standen als eigene Kaesten da; b) .form-counter selbst war nur 44.5px hoch, die 58px-Kinder ragten 13.5px heraus -> die Spalte war zu kurz und der CTA sass 1.5px tiefer. Fehlerregister 11: die Hoehe wird EINMAL festgelegt (am Gruppen-Element) und von allen Teilen referenziert; der Rahmen gehoert an die Gruppe, innen nur Trennlinien. Mockup .step: ein Rahmen, zwei Trennlinien. */ #add-to-cart .form-counter { height: 58px; /* pz: Lehre I.6 - NOVA deckelt .form-counter per max-height:$input-height (gemessen 44.5px, _forms.scss Z.68). Ohne diese Zeile bleibt die Gruppe 44.5px hoch und die 58px-Kinder ragen unten heraus. */ max-height: none; border: 1px solid var(--pz-ctl-line); background: transparent; } #add-to-cart .form-counter .input-group-prepend, #add-to-cart .form-counter .input-group-append { height: 100%; } #add-to-cart .form-counter .form-control, #add-to-cart .form-counter .btn { height: 100% !important; max-height: none; /* Lehre I.6: NOVA deckelt auch die Kinder (42.5px) */ border: 0; } #add-to-cart .form-counter .input-group-prepend .btn { border-right: 1px solid var(--pz-ctl-line); } #add-to-cart .form-counter .input-group-append .btn { border-left: 1px solid var(--pz-ctl-line); } /* NOVAs Hover-Flaeche des Steppers ist Bootstrap-Graublau */ #add-to-cart .form-counter .btn:hover { background-color: var(--pz-ivory-2); } /* Stepper und CTA auf EINE Unterkante: NOVA gibt der Stepper-Spalte ein margin-bottom:16px, der CTA-Spalte nicht - `align-items:flex-end` richtet die MARGIN-Kanten aus, deshalb sass der sichtbare Stepper 16px hoeher. ⚠️ 20.08. ENTSCOPT (Ben/P5): die Spalten stehen jetzt auf JEDER Breite nebeneinander, also darf auch der Stapelabstand nirgends mehr stehen. */ #add-to-cart .basket-form-inline > .col { margin-bottom: 0; } /* ============================================================================ pz: SPALTENFLUCHT DER ARTIKELSEITE (Review R3, B5). Gemessen 20.08. (1440): #buy_form (Galerie + Kaufspalte) und der Brotkrumen-Streifen liefen 111…1329 — NOVAs container-fluid-xl mit `margin:0 95px` + 16px Polster. Die Inhaltsspalte der Seite ist 120…1320 (.pz-wrap), und genau darauf sitzt auch die Slider-Sektion darunter. ⚠️ NUR diese beiden Container, NICHT #content-wrapper: die Baender .pz-pdesc / .pz-care sind vollbreit (x0-1440) und muessten sonst mit vw-Hacks wieder ausbrechen. ⚠️ Der Anker ist `#result-wrapper > .container`, NICHT #buy_form: die Breite kommt aus dem Bootstrap-Container DARUEBER (gemessen: x95-1345, `max-width:1250px; margin:0 95px`). Ein max-width am Formular darin war wirkungslos — ein Block wird nicht breiter als sein Elternteil (erster Versuch genau so gemessen: buy_form blieb 111…1329). */ @media (min-width: 1200px) { #content-wrapper:has(#result-wrapper > .pz-care) > #content > #result-wrapper > .container, #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb-container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } } /* ============================================================================ pz: BROTKRUMEN DER ARTIKELSEITE (Review R3, B14). Auf der Kategorie sind die Krumen ins dunkle Kopfband gewandert; die Artikelseite hat kein solches Band und behaelt deshalb NOVAs Streifen — aber als ruhigen, ZENTRIERTEN Streifen in der Krumen-Typo der Kategorie. "Zurueck zur Liste" und die Vor/Zurueck-Pfeile bleiben funktional erhalten und ordnen sich derselben Typo unter. Der volle Artikelname wird nur in der ANZEIGE gekuerzt (max-width + Ellipse): im Markup bleibt er vollstaendig, damit die schema.org- BreadcrumbList korrekt bleibt — ein gekuerzter Strukturdaten-Name waere ein Datenfehler, kein Layoutfix. */ /* ⚠️ `justify-content:center` am Zeilen-Container reicht NICHT: NOVA legt die Vor/Zurueck-Pfeile als zweite Spalte mit `flex:1 1 0` daneben — die frisst den ganzen Rest und drueckt die Krumen wieder nach links (gemessen: Krumen 120…683 in einer Zeile 120…1320, obwohl jc=center stand). Deshalb: die KRUMEN-Spalte nimmt den Rest und zentriert ihren Inhalt, die Pfeil-Spalte wird inhaltsbreit und bleibt am rechten Rand. */ /* ⚠️ NACHTRAG 20.08. (Ben/P1: "Zurueck zur Liste | Startseite / ... und der Blaetter-Pfeil stehen auf zwei Zeilen"). Gemessen vorher (1440, P026): .breadcrumb-wrapper 258-335 (77px hoch), .breadcrumb y259 BREITE 1200, .navigation-arrows y291 BREITE 1200 — beide vollbreit, also je eine eigene Zeile. Ursache ist exakt die Falle, die in dieser Datei schon einmal die Stepper-Spalte gekostet hat: `flex: 0 0 auto` setzt die Basis auf `auto`, und dann gewinnt die `width`-Eigenschaft — Bootstraps `.col`-Regel setzt `width: 100%` (gemessen im Regel-Scan). Die Spalte war also inhaltsbreit GEDACHT und 1200px BREIT. Sie brauchte, wie die Stepper-Spalte, zusaetzlich eine Breite. Gewaehlt ist trotzdem NICHT die Flex-Loesung, sondern die absolute: mit inhaltsbreiter Pfeilspalte waere die Krumenspalte um deren Breite schmaler und die zentrierten Krumen um ~22px aus der Seitenmitte gerueckt. Absolut positioniert bleibt die Krumenspalte vollbreit (= echte Seitenmitte) und der Pfeil steht rechts in derselben Flucht — genau Bens Vorgabe. `right: 16px` ist das Spaltengutter des Rasters (derselbe belegte Wert wie bei #product-offer .product-actions weiter oben), kein freier Pixelwert. */ #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb-wrapper { justify-content: center; position: relative; } #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb-wrapper > .col:has(.breadcrumb) { flex: 1 1 0; max-width: none; } #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb-wrapper > .navigation-arrows { position: absolute; right: 16px; top: 0; bottom: 0; width: auto; max-width: none; align-items: center; padding: 0; } #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb { justify-content: center; flex-wrap: wrap; } #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb .breadcrumb-item, #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb a { font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--pz-muted); text-decoration: none; } #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb a:hover { color: var(--pz-gold); } #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb .breadcrumb-item.last span, #content-wrapper:has(#result-wrapper > .pz-care) .breadcrumb .breadcrumb-item.active span { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* pz: Review R3 (B4) — das Mengenfeld der Kaufzeile rendert in Montserrat. Es traegt `input.form-control.quantity`; die generische Feldregel in pz-base setzt keine Familie, also blieb NOVAs Preis-/Zahlenschrift stehen. */ #product-offer input.form-control.quantity, #add-to-cart input.form-control.quantity { font-family: var(--pz-sans); } /* ============================================================================ pz: SEKTIONSGRENZEN DER ARTIKELSEITE (Skala aus pz-base). Kette SOLL 1440 (Stand 20.08. nach Ben/P3 — jede Grenze GENAU EIN Token): Brotkrumen --pz-sek-nav (32)---> Produktzeile Produktzeile --pz-sek-halb (64)--> Beschreibungsband (Kopfmass .pz-pdesc) Beschreibung --pz-sek-halb (64)--> harte Kante (Fussmass .pz-pdesc) Pflegeband --pz-band-halb (48)-> innen oben und unten Pflegeband --pz-sek-halb (64)--> "Aehnliche Artikel" (Kopfmass .x-related) Slider --pz-sek-halb (64)--> Footer (Fussmass .x-related) Das Kaufformular gibt sein Fussmass ab, solange ein Beschreibungsband folgt (Skalen-Regel 2, Regel weiter unten) — ohne Band behaelt es --pz-sek. Frueher: 110/96/120/48-Mischung plus NOVAs 64/48-Zuschlaege. */ #content-wrapper:has(#result-wrapper > .pz-care) #buy_form { padding-bottom: var(--pz-sek); } /* ============================================================================ pz: KLEBENDE GALERIE (Ben-Wunsch, Referenz spanl NOVAChild571/spl-artikel.css). Befund gemessen 19.08. (1440, P905): die Kaufspalte ist 1029px hoch, die Galerie 734px — unter der Galerie stand eine leere Flaeche von ~300px, waehrend rechts noch Inhalt lief. Zwei Voraussetzungen: 1. `align-self:stretch` — sonst ist die Spalte nur so hoch wie ihr Inhalt und sticky hat keinen Klebeweg. 2. Der Offset. Unser Kopf ist `position:sticky` und bleibt gemessen KONSTANT 182px hoch oben stehen (nachgemessen bei scrollY 400/900/ 1400/2000 auf 1440 UND auf 1000 Breite: headerTop 0, h 182). 182 + 24px Luft = 206px. ⚠️ `:not(.fullscreen)` ist PFLICHT und nicht kosmetisch: NOVAs Zoom ist kein Modal, sondern ein Zustand DIESES Elements — der Klick haengt `.fullscreen` an #image_wrapper, und my-nova macht daraus ein `position:fixed`-Overlay. Eine speziellere sticky-Regel wuerde das fixed ueberschreiben und den Zoom als toten Kasten in der linken Spalte stehen lassen (bei spanl genau so passiert). ⚠️ Nur ab lg — darunter steht die Seite einspaltig, dort waere Kleben sinnlos (Fehlerregister 10: dieselbe Mechanik auf beiden Breiten pruefen). */ @media (min-width: 992px) { #product-offer > .product-gallery { align-self: stretch; } /* pz: 20.08. — die klebende Huelle ist jetzt .pz-gal-sticky (Markup: productdetails/details.tpl), NICHT mehr #image_wrapper allein: sonst wandert das Bild beim Scrollen ueber den Naturprodukt-Hinweis darunter (gemessen 50px Ueberdeckung bei scrollY 230). ⚠️ Fullscreen-Zoom (Ben-Befund + Audit 20.08.): `position:sticky` erzeugt zwar KEINEN Containing Block fuer `position:fixed` (das Overlay spannt weiter den Viewport auf), ABER einen STACKING CONTEXT — das z-index:10000 von #image_wrapper.fullscreen galt nur noch innerhalb der Huelle. Nach aussen konkurrierte die Huelle mit z-index:auto: .product-info (spaeter im DOM) und der sticky Header (z 1020) zeichneten UEBER dem Zoom, das Schliessen-X war unklickbar. Fix: die Regel direkt unter der sticky-Huelle hebt Spalte UND Huelle im Zoom-Zustand ueber den Header. */ #product-offer > .product-gallery > .pz-gal-sticky { position: sticky; top: 206px; /* ⚠️ 20.08. (Ben/P2: "sonst klebt der hinweis direkt an der sektion unten"). Die klebende Huelle durfte bis an die Unterkante ihrer Spalte wandern — der Naturprodukt-Hinweis stand dann auf der Farbkante zum Beschreibungsband (gemessen: #buy_form endet y1442, .pz-pdesc beginnt y1442, Klebeweg-Stopp ebenfalls 1442). Fehlerregister 5, hier ABSICHTLICH ausgenutzt statt vermieden: ein margin-bottom am sticky-Element deckelt seinen Klebeweg. Genau das ist der gesuchte Stopp-Abstand — kein zweites Konstrukt noetig. Wert aus der Skala: halbe Sektionsgrenze, dieselbe Stufe, die die angrenzenden Baender seit dieser Runde tragen. */ margin-bottom: var(--pz-sek-halb); } /* pz: 20.08. Zoom-Fix (s. Kommentar oben): im Fullscreen-Zustand muessen Spalte UND Sticky-Huelle ihren Stacking Context ueber den Header (z 1020) heben — die Huelle allein reicht nicht, sie konkurriert sonst als z-index:auto-Geschwister von .product-info. SOLL-Messung: elementsFromPoint auf Bildmitte = IMG, auf #image_fullscreen_close = der Schliessen-Knopf. */ #product-offer > .product-gallery:has(.gallery-with-action.fullscreen), #product-offer > .product-gallery:has(.gallery-with-action.fullscreen) > .pz-gal-sticky { z-index: 10000; } } /* ============================================================================ pz: Naturprodukt-Hinweis unter der Galerie (Mockup .nature, Reviewer F1). Fuellt zugleich das Loch unter der Galeriespalte mit einer Aussage, die bei echten Zuchtperlen Retouren spart. Markup: productdetails/details.tpl. Sitzt bewusst AUSSERHALB von #image_wrapper — sonst waere der Text im Fullscreen-Zoom mit im Overlay. ⚠️ FIXRUNDE 8 / C3 (Ben 20.08., Screenshot): "die Trennlinie ueber dem Naturprodukt-Hinweis schliesst nicht mit den Galerie-Thumbs ab, der Text bricht zu frueh um." Gemessen VORHER (1440, P026): letzter Thumb endet bei x703, die Galerie- spalte bei x704 — die Linie und der Textkasten endeten bei x612. 91px Fehlbetrag, und das an einem Element, das direkt unter einer Bildkante steht, also die auffaelligste Fluchtlinie der Seite bricht. URSACHE war ein `max-width: 60ch` an genau diesem Kasten. Es sollte die Lesbarkeit sichern — an einem dreizeiligen Hinweis von 148 Zeichen leistet es das nicht (die Zeile bleibt weit unter der WCAG-Obergrenze von 80 Zeichen, siehe Rechnung am .pz-pdesc-text), es hat nur die Flucht zerstoert. Ersatzlos raus: der Kasten nimmt die Breite seiner Spalte, und die IST die Thumb-Aussenkante — Linie und Textbreite enden damit an derselben Kante. */ .pz-nature { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--pz-line); font-size: 13px; color: var(--pz-muted); line-height: 1.7; } /* Fehlerregister 15: der Textknoten ist ein Flex-Item und wuerde ohne min-width:0 nie unter sein laengstes Wort schrumpfen. */ .pz-nature > span { min-width: 0; } .pz-nature svg { width: 18px; height: 18px; color: var(--pz-gold); flex: none; margin-top: 3px; } /* ============================================================================ pz: KAUFZEILE — Stepper und Button direkt nebeneinander (Reviewer F6, Mockup .cartrow: `display:flex;gap:14px`, `.btn-buy{flex:1}`). Gemessen 19.08.: NOVA legt beide in je eine 50%-Bootstrap-Spalte (col-sm-6, je 313px) — zwischen dem 133px breiten Stepper und dem Button klaffte deshalb ein 177px-Loch, und der Button war unnoetig schmal. ⚠️ Fehlerregister 10: die `.row` bringt -16px Randmargins und die Spalten je 16px Polster mit — beides muss beim Umbau mit weg, sonst ragt die Zeile ueber die Kaufspalte. ⚠️ 20.08. ENTSCOPT (Ben/P5: "Mengen-Stepper und Warenkorb-Button NEBENEINANDER"). Der Umbau stand bisher in `@media (min-width: 576px)`; darunter blieb NOVAs Bootstrap-Stapel stehen (gemessen 390: Stepper y1434-1492, Knopf y1508-1566 — zwei Zeilen, 16px Loch dazwischen). Die Media-Query faellt ersatzlos weg: die Regeln sind breitenneutral (der Stepper ist inhaltsbreit, der Knopf nimmt den Rest), und der DESKTOP-STAND AENDERT SICH DADURCH NICHT — ueber 576px galten exakt dieselben Regeln schon vorher (Ben ausdruecklich: Desktop-Kaufbereich bleibt wie er ist). Registerhaltigkeit kommt aus `align-items: stretch` plus der einen Gruppenhoehe von 58px (Fehlerregister 11): beide Teile haben dieselbe Ober- UND Unterkante. */ #add-to-cart .basket-form-inline { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 14px; margin-left: 0; margin-right: 0; } #add-to-cart .basket-form-inline > .col { /* Kaufbutton-Spalte: nimmt den Rest. flex-basis 0 statt auto — mit auto bekaeme sie die Breite ihres Inhalts, und die Spalte daneben traegt ein geerbtes width:100%. */ flex: 1 1 0; min-width: 0; /* Fehlerregister 15 */ max-width: none; padding-left: 0; padding-right: 0; } /* ⚠️ Die Stepper-Spalte braucht BEIDES: flex:0 0 auto UND width:max-content. Ohne die Breite erbt sie ein width:100% (gemessen 593px) — sie hat dann die ganze Zeile gefressen und der Kaufbutton war 32px breit. */ #add-to-cart .basket-form-inline > .col:has(.form-counter) { flex: 0 0 auto; width: max-content; } /* ============================================================================ pz: ZWEI RUHIGE NEBENAKTIONEN UNTER DEM KAUFKNOPF (Ben 20.08./P6: "auf wunschzettel" + "frage zum artikel" = zwei ruhige, einheitliche Buttons, "nicht so aufdringlich wie der warenkorb-button", beide auf Desktop UND Mobil UNTER dem Warenkorb-Button). Vorher (gemessen 1440, P026): "Auf Wunschzettel" war ein unterstrichener Textlink unter der Kaufzeile (.pz-wish, x736 y1040, 185x25), "Frage zum Artikel" stand als NOVA-Link-Button OBEN RECHTS neben der Lieferzeit (x1184 y870, 136x25) — zwei gleichrangige Nebenaktionen in zwei verschiedenen Optiken an zwei Stellen der Seite. Jetzt: EIN Paar im Ghost-/Outline-Stil der CI (dieselbe Sprache wie .pz-btn-ghost in pz-base und der Widerrufs-Knopf im Fuss). Markup: productdetails/details.tpl — dort wird NOVAs Original-Position der Frage leergeraeumt und beide Knoepfe kommen im selben Container heraus, also mit identischem Ausgabeweg (Fehlerregister 13: nicht zwei Fassungen). ⚠️ Raster statt flex-wrap (Fehlerregister 3b): mit zwei inhaltsbreiten Knoepfen in einer flex-Zeile bliebe rechts eine Restflaeche stehen. Das fuellende Raster gibt beiden dieselbe Breite; faellt einer der beiden weg (Wunschliste im Shop abgeschaltet, Frageformular auf 'N'), nimmt der verbliebene die volle Zeile ein statt eine Leerspur zu lassen. ⚠️ EINE Hoehe fuer die Gruppe (Fehlerregister 11): das Mass liegt am Container, nicht an den Knoepfen — sonst zieht der eine seine Hoehe aus dem Icon und der andere aus dem Text. */ .pz-pdp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 22px; } .pz-pdp-act, .pz-pdp-act.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 16px; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; text-align: center; color: #413b34; background: transparent; border: 1px solid var(--pz-ctl-line); border-radius: 0; text-decoration: none; box-shadow: none; cursor: pointer; } .pz-pdp-act:hover, .pz-pdp-act.btn:hover, .pz-pdp-act.btn:focus { border-color: var(--pz-gold); color: var(--pz-ink); background: transparent; text-decoration: none; box-shadow: none; } /* Die Icons sind das einzige Farbsignal — dieselbe Gold-Rolle wie in den USP-Zeilen darunter. */ .pz-pdp-act .wishlist-icon, .pz-pdp-act .fa-question-circle { font-size: 14px; color: var(--pz-gold); } .pz-pdp-act .wishlist-button-inner { display: inline-flex; align-items: center; gap: 10px; } /* ⚠️ Die Unterstreichung sitzt NICHT am Knopf, sondern am innersten Span: my-nova.css setzt `.wishlist-button .wishlist-button-inner .wishlist-button-text {text-decoration: underline}` (0,3,0, im Regel-Scan belegt). `text-decoration: none` am Knopf vererbt sich nicht dagegen — im Screenshot stand "AUF WUNSCHZETTEL" unterstrichen neben dem glatten "FRAGE ZUM ARTIKEL", also zwei Optiken im Paar (Fehlerregister 11/16). Anker deshalb am selben Element. */ .pz-pdp-act .wishlist-button-inner .wishlist-button-text { text-decoration: none; } /* NOVA blendet die Beschriftung der Frage unterhalb md aus (`.hidden-xs.hidden-sm`) — im Paar waere das ein Knopf ohne Wort. */ .pz-pdp-act .hidden-xs, .pz-pdp-act .hidden-sm { display: inline !important; } /* ============================================================================ pz: BESCHREIBUNGSBAND (Mockup .desc, Reviewer-Punkt 3). Statt eines nackten Bootstrap-Tabs ein gestaltetes Band: Eyebrow + Serif-h2 links, Fliesstext rechts — dasselbe redaktionelle Zweispalter- Muster wie das SEO-Band der Kategorie (mockup-kategorie .seo). Die Datenblatt-Spalte des Mockups (.spec "Auf einen Blick") entfaellt bewusst: es sind KEINE Merkmale gepflegt (19.08. in der Shop-DB geprueft) — eine leere zweite Spalte waere tote Flaeche (Fehlerregister 3b). */ /* ⚠️ 20.08. (Ben/P3a+b): "abstaende halbieren" — markiert war der Raum zwischen Kaufbereich/Naturprodukt-Hinweis und dem Eyebrow "BESCHREIBUNG" (= das KOPFMASS dieses Bandes, gemessen 126px) sowie der Raum zwischen "Gut zu wissen." und der dunklen Bandkante (= das FUSSMASS, ebenfalls 126). Beides ist derselbe Skalenwert -> beides auf dieselbe Halbstufe. Bewusst NICHT mitgezogen: `.pz-catseo` auf der Kategorieseite benutzt weiterhin --pz-sek. Ben hat die Kategoriekette in Fixrunde 4 abgenommen und hier ausdruecklich die ARTIKELSEITE markiert — ein stiller Gleichzug haette eine abgenommene Seite mitveraendert. */ .pz-pdesc { background: var(--pz-ivory-2); padding: var(--pz-sek-halb) 0; } /* ⚠️ UMBAU 20.08. (Ben, Screenshot mit Pfeil): "die gut zu wissen section wuerd ich in ne section DARUEBER packen, nicht DANEBEN und damit die seite UNNOETIG in die laenge ziehen." Der Zweispalter (.82fr 1.18fr) funktionierte, solange rechts ein Einzeiler stand. Mit den echten Langbeschreibungen (5.500+ Zeichen) stand links eine ueber 2.400px hohe LEERE Spalte neben einem Turm Text — und der Text quetschte sich in 655 von 1200px Bandbreite. Jetzt: Kopf als eigene Zeile ueber dem Text, Text darunter im lesbaren Mass. Damit gewinnt der Text Breite (= weniger Zeilen = kuerzere Seite) und die leere Spalte verschwindet. ⚠️ LESEMASS AUFGEHOBEN — pz: 21.09.2026 (cargo FEHLERMUSTER 11, Kundenbefund Ralf 31.08.2026; hier prophylaktisch vor der Uebergabe nachgezogen). Bis 20260821-46 stand hier `max-width: 780px`, hergeleitet aus WCAG 1.4.8 (80 Zeichen je Zeile, per `Range.getClientRects()` an P026 nachgezaehlt). Die Rechnung stimmte, die Wirkung nicht: der Block war LINKS verankert (kein `margin-inline: auto`) und stand damit als schmale Spalte in einem ueber 1200px breiten Band. Auf dem Schwesterprojekt cargotrike hat Ralf genau das als Fehler gemeldet — „Die Beschreibung nutzt nicht den verfuegbaren Bereich." Verschaerft wird es durch zentrierte Ueberschriften im Wawi-HTML: die zentrieren sich dann auf die halbe Bandbreite. Der Block nutzt jetzt die volle Bandbreite; die Zeilenlaenge steuert der Kunde ueber seine Texte. ⚠️ Bewusst KEIN `margin-inline: auto` als Ersatzloesung — dieselbe Entscheidung wie in cargo, damit beide Shops den gleichen Text gleich darstellen (Schwesterprojekt-Gleichlauf). */ .pz-pdesc-wrap { display: block; } .pz-pdesc-head { margin-bottom: 36px; } .pz-pdesc .pz-eyebrow { display: block; margin-bottom: 22px; } .pz-pdesc h2 { font-size: 44px; margin: 0; } .pz-pdesc-text { font-size: 16px; line-height: 1.9; color: #4a443c; } .pz-pdesc-text p + p { margin-top: 22px; } .pz-pdesc-text p:last-child { margin-bottom: 0; } /* ⚠️ NACHTRAG 20.08. (beim Nachmessen von Ben/P8 an der 390er-Ansicht gefunden, Fehlerregister 9 "Framework-Mobil-Fallback als Design"): Das Band behielt unterhalb lg sein Desktop-Raster `.82fr 1.18fr` mit 90px Gap — gemessen 390: Spalten 118px und 142px, die 44px-Serif-H2 stand in einer 118px-Spalte. Das SEO-Band der Kategorie (`.pz-catseo-wrap`, dasselbe redaktionelle Zweispalter-Muster) hat seine Mobilfassung seit Fixrunde 1; hier fehlte sie schlicht. Werte 1:1 die des Schwesterbandes — zwei Bausteine mit gleichem Aufbau bekommen nicht zwei Rhythmen. */ @media (max-width: 991.98px) { .pz-pdesc-head { margin-bottom: 28px; } .pz-pdesc h2 { font-size: 32px; } } /* ⚠️ Die frueher hier stehende Regel `#content:has(.pz-pdesc-fallback) .shortdesc { display: none }` ist mit C2 gegenstandslos: die Kurzbeschreibung steht nicht mehr im Band, also gibt es die Dopplung nicht mehr, die sie verdeckt hat. Die Sichtbarkeit der beiden neuen Slots regelt der C2-Block weiter unten — EINE Stelle, nicht zwei (Fehlerregister 17). */ /* ============================================================================ pz: FELD-KENNZEICHNUNG IM BESCHREIBUNGSBAND (Ben 20.08./P8: "auch kurzbeschreibung langbeschreibung moechte ich testweise abbilden koennen, kannst ja entsprechend kennzeichenen damit man weis - was was ist"). Es ist ein DATENTEST-Hilfsmittel, kein Gestaltungselement: deshalb kein neuer Ton und keine neue Schriftgroesse, sondern der vorhandene Eyebrow — dieselbe Rolle, die auf dieser Seite schon "BESCHREIBUNG" und "PERLEN RICHTIG TRAGEN" traegt. Markup und Feld-Mapping: productdetails/details.tpl. */ .pz-pdesc-part + .pz-pdesc-part { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--pz-line); } .pz-pdesc-lbl { display: block; margin-bottom: 10px; font-size: 9.5px; letter-spacing: .22em; color: var(--pz-muted); /* pz: 21.08. heller Grund -> --pz-muted (muted-d misst hier 2,45:1) */ } /* ============================================================================ pz: C2 — KURZBESCHREIBUNG IN ZWEI SLOTS (Ben 20.08.: "sitzt sinnlos direkt ueber der Langbeschreibung"; SOLL Desktop unter der Galerie ueber dem Naturprodukt-Hinweis, SOLL Mobil ueber dem Preis unter der Trennlinie des Artikelnummer-Bereichs — ausdruecklich NICHT ueber Naturprodukt). Die beiden Sollpositionen liegen in VERSCHIEDENEN Bootstrap-Spalten (Galerie links, Kaufspalte rechts). Ein einziges Element kann nicht in beiden stehen; verschoben wird per DOM-Umhaengen (Skript, Sprung beim Laden, zweite Fehlerquelle) oder per zweitem Slot. Gewaehlt: zwei Slots, EINE Umschaltregel — genau diese hier. Der Breakpoint ist lg, weil dort das zweispaltige Produktraster entsteht; darunter steht die Galerie ueber der Kaufspalte, und ein Text unter der Galerie waere dann weit weg vom Preis (= die Position, die Ben mobil gerade NICHT will). ⚠️ Fehlerregister 13: es gibt nie zwei sichtbare Fassungen — gemessen wird auf beiden Breiten die Zahl der sichtbaren Instanzen (SOLL: genau 1). Der mobile Slot ist NOVAs Originalposition (Markup-Override nur wegen der Feld-Kennzeichnung); der Desktop-Slot steht in der klebenden Galeriehuelle vor .pz-nature (beides productdetails/details.tpl). */ .pz-gal-desc { display: none; } .pz-sdesc { /* 26px = derselbe Inhaltsrhythmus, den .pz-nature (Mockup .nature) und die Stammdaten-Zeile (.info-essential margin-bottom) auf dieser Seite schon tragen — kein neuer Wert (Fehlerregister 3). */ margin-bottom: 26px; } .pz-sdesc .shortdesc { font-size: 14.5px; line-height: 1.75; color: var(--pz-text); margin: 0; } @media (min-width: 992px) { .pz-sdesc { display: none; } .pz-gal-desc { display: block; margin-top: 26px; font-size: 14.5px; line-height: 1.75; color: var(--pz-text); } /* Der Abstand zum Naturprodukt-Hinweis kommt allein aus dessen eigenem margin-top (26px, Mockup .nature) — dieser Slot bringt kein Fussmass mit. Nur ein Absatz-Fussmass aus dem Framework wird geschluckt, falls die Wawi einmal HTML statt Rohtext liefert (Fehlerregister 3: keine zwei Quellen fuer eine Luecke). */ .pz-gal-desc > p:last-child { margin-bottom: 0; } } /* ============================================================================ pz: C1 — SEKTION "AUF EINEN BLICK" (Mockup .spec; Ben-Freigabe 20.08.). Ben zum Vorzustand: ein Reiter mit der Beschriftung "Beschreibung", unter dem NUR die Merkmal-/Gewichtstabelle stand — "macht ueberhaupt keinen Sinn", Reiteroptik "absolut un-edel". Der Reiter ist weg (Child-Override productdetails/tabs.tpl), die Daten bekommen hier ihre eigene Sektion mit passender Beschriftung. MASSE — alle abgeleitet, keine gegriffenen Werte: - Sektionsmass: --pz-sek-halb, dieselbe Halbstufe, die die ganze Artikelkette seit Fixrunde 7 traegt. Folgt die Sektion direkt auf das Beschreibungsband, faellt ihr Kopfmass auf 0 (Skalen-Regel 2 in pz-base.css: zwei helle Sektionen -> genau EIN Wert an der Grenze). - Kastenbreite 780px = exakt die Zeilenbreite von .pz-pdesc-text. Damit stehen Beschreibungstext und Datenblatt in derselben Flucht, und die Restbreite rechts ist dieselbe wie eine Sektion darueber — also kein NEUES Loch (Fehlerregister 3b), sondern der fortgesetzte Rhythmus. - Rahmen/Innenpolster 1px + 8px 32px: 1:1 Mockup `.spec`. - Ueberschrift: der vorhandene .pz-eyebrow (11px, .24em, Gold) statt der Mockup-Sonderwerte (10px/.22em) — dieselbe Rolle wie "BESCHREIBUNG" und "PERLEN RICHTIG TRAGEN" auf derselben Seite, ein Ton weniger im System. Das Innenpolster 26px/18px kommt aus dem Mockup. ⚠️ MOCKUP-ABWEICHUNG mit Ansage (Fehlerregister 6): Im Mockup steht der Kasten als schmale zweite Spalte NEBEN dem Beschreibungstext und setzt Label/Wert per `space-between` an die beiden Kastenkanten. Ben hat den Zweispalter im Beschreibungsband am 20.08. ausdruecklich verworfen ("in ne section DARUEBER, nicht DANEBEN") — der Kasten ist deshalb breiter, und in einem 780px-Kasten waere `space-between` bei einer einzigen Datenzeile ein halber Meter Luft zwischen Wort und Wert. Label- und Wertspalte stehen stattdessen fest nebeneinander. */ .pz-spec { padding: var(--pz-sek-halb) 0; } /* ⚠️ Folgt die Sektion auf das Beschreibungsband, uebernimmt sie DESSEN Flaeche und ihr Kopfmass faellt auf 0 — beides zusammen ergibt genau das Mockup-Bild: EIN ivory-2-Band, in dem der ivory-Kasten mit Rahmen liegt (mockup-artikel .desc + .spec). Ohne die Flaeche stand der Kasten mit seinem sichtbaren Rahmen exakt AUF der Farbkante des Bandes (im ersten Screenshot dieser Runde gesehen) — und der einzige rechnerisch saubere Ausweg waere gewesen, an einem schwachen Flaechenwechsel ZWEI Skalenwerte zu stapeln (64+64), also genau die Beliebigkeit aus FEHLERMUSTER.md Zeile 1. Die Grenze traegt so weiterhin genau EINEN Wert: die 64px Fussmass des Bandes werden zum Abstand Text -> Kasten, die 64px dieser Sektion zum Abstand Kasten -> Pflegeband. */ .pz-pdesc + .pz-spec { background: var(--pz-ivory-2); padding-top: 0; } .pz-spec-box { max-width: 780px; padding: 8px 32px; border: 1px solid var(--pz-line); background: var(--pz-ivory); } .pz-spec-h { display: block; margin: 0; padding: 26px 0 18px; font-family: var(--pz-sans); } /* --- die NOVA-Tabelle im Kasten: Haarlinien statt Bootstrap-Kasten -------- */ .pz-spec-box .product-attributes { margin: 0; } .pz-spec-box .product-attributes table { width: 100%; margin: 0; border: 0; /* ⚠️ `table-layout: fixed` waere hier die FALSCHE Wahl und stand im ersten Versuch drin: NOVAs attributes.tpl hat einen mit zwei `sr-only`-Kopfzellen, und `.sr-only` setzt `position: absolute` — die Zellen sind damit gar keine Tabellenzellen mehr, die Kopfzeile hat keine Spurbreiten, und der fixe Algorithmus verteilt gleichmaessig. Gemessen: 356,5px / 356,5px statt 38 % / Rest. Mit `auto` greift die Breite an td.h6 wie gedacht. */ table-layout: auto; } /* Bootstrap streift die Zeilen ein (.table-striped tbody tr:nth-of-type(odd)) und `.table-bordered-outline` legt jeder Zeile einen 1px-Rahmen in rgb(235,235,235) um (gemessen) — das war der graue Kasten IM Kasten. Anker mit einer Klasse mehr, damit die Regeln sicher gewinnen — Spezifitaet zaehlen statt !important (Fehlerregister 16). */ .pz-spec-box .product-attributes .table tbody tr, .pz-spec-box .product-attributes .table tbody tr > td { background: transparent; border-left: 0; border-right: 0; } .pz-spec-box .product-attributes .table tbody tr { border-top: 0; border-bottom: 0; } .pz-spec-box .product-attributes td { border: 0; border-top: 1px solid var(--pz-line); padding: 15px 0; vertical-align: baseline; /* ⚠️ Bens Mobilbefund war "Artikelgewicht" und ":" auf zwei Zeilen. Ein Umbruch INNERHALB eines Wortes (oder vor dem angehaengten Doppelpunkt) ist in einer Datentabelle immer ein Fehler — hier ausdruecklich abgestellt, statt sich auf Framework-Defaults zu verlassen. */ overflow-wrap: normal; word-break: normal; hyphens: none; } .pz-spec-box .product-attributes tbody tr:first-child td { border-top: 0; } .pz-spec-box .product-attributes td.h6 { width: 38%; padding-right: 20px; font-size: 14px; font-weight: 500; color: var(--pz-text); } /* Serifen-Akzent auf der WERT-Spalte: dieselbe Rolle wie die Serif-Preise und -Ueberschriften der Seite. Das Label bleibt in der Sans — es ist Navigation im Datenblatt, der Wert ist die Aussage. */ .pz-spec-box .product-attributes td:not(.h6), .pz-spec-box .product-attributes .attr-characteristic .badge { font-family: var(--pz-serif); font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--pz-ink); /* ⚠️ Cormorant Garamond setzt Ziffern als MEDIAEVALZIFFERN: 3,4,5,7,9 haengen unter die Grundlinie. Im ersten Screenshot dieser Runde sahen "4–5 mm" und "ca. 45 cm" dadurch gegenueber ihren Labels abgesackt aus — in einer Datentabelle liest sich das als Ausrichtungsfehler, nicht als Schriftcharakter. `lining-nums` holt die Versalziffern der Schrift. */ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } @media (max-width: 575.98px) { /* Unter 576px waere die 38%-Labelspalte ~111px breit — genau die Enge, in der Ben "Artikelgewicht :" zweizeilig gesehen hat. Die Zeile wird deshalb gestapelt: Label ueber Wert, beide auf voller Kastenbreite. Innenpolster 4px/20px: 20px ist das Mobilpolster von .pz-wrap, 4px die halbe Mockup-Stufe — kein freier Wert. WARUM STAPELN und nicht einfach die Spalte breiter machen: ein Merkmalname ist EIN Wort mit angehaengtem Doppelpunkt. Passt er nicht in die Spalte, ist die einzige Umbruchstelle die VOR dem Doppelpunkt — also genau Bens Befund. Eine breitere Spalte verschiebt die Grenze nur bis zum naechsten laengeren Merkmalnamen; auf voller Kastenbreite gibt es sie nicht mehr. `nowrap` waere die Alternative gewesen und haette bei langen Namen den Kasten gesprengt (Fehlerregister 15). ⚠️ Der von NOVAs attributes.tpl (zwei `sr-only`-Kopfzellen) wird hier ausgeblendet: sobald die Tabelle in Bloecke aufgeloest ist, ordnen Screenreader die Kopfzellen ohnehin keiner Spalte mehr zu, und im ersten Versuch stand seine Zeile als leerer Strich unter der Ueberschrift im Kasten (im Mobil-Screenshot gesehen). Es geht keine Information verloren — jede Zeile traegt ihr Label sichtbar mit Doppelpunkt. ⚠️ ANKER `.table tbody`: die Grundregeln oben haengen an `.pz-spec-box .product-attributes .table tbody tr` (0,3,2). Eine kuerzere Fassung hier verlor still — im ersten Versuch fehlten dadurch auf Mobil ALLE Trennlinien (Fehlerregister 16). */ .pz-spec-box { padding: 4px 20px; } .pz-spec-box .product-attributes .table thead { display: none; } .pz-spec-box .product-attributes .table, .pz-spec-box .product-attributes .table tbody, .pz-spec-box .product-attributes .table tbody tr, .pz-spec-box .product-attributes .table tbody td { display: block; width: auto; } .pz-spec-box .product-attributes .table tbody tr { border-top: 1px solid var(--pz-line); padding: 14px 0; } .pz-spec-box .product-attributes .table tbody tr:first-child { border-top: 0; } .pz-spec-box .product-attributes .table tbody td { border-top: 0; padding: 0; } .pz-spec-box .product-attributes .table tbody td.h6 { width: auto; padding-right: 0; margin-bottom: 4px; } } /* ============================================================================ pz: C1 — NOVAs REITERBEREICH FUER DEN MEHR-REITER-FALL (Ben 20.08.: das Tab-Styling ist "absolut un-edel"; mobil klebte der Bereich ohne Abstand an der Sektion darueber). Im Grundzustand dieses Shops rendert der Bereich seit C1 GAR NICHTS mehr (der Beschreibungs-Reiter ist weg, Bewertungen/Downloads/Preisverlauf sind aus). Er ist damit aber NICHT erledigt: er wacht auf, sobald der Kunde eine dieser Funktionen einschaltet — genau die Fehlerklasse "Baustein war nur stumm, nicht geprueft" (Fehlerregister 25). Deshalb hier gestaltet und per DOM-Probe mit einem zweiten Reiter gemessen. ⚠️ ANKER: die Leiste ist `ul.nav.nav-tabs#product-tabs` in `nav.tab-navigation` — die frueher hier stehenden Selektoren (`.product-tabs …` und `#product-offer ~ * .nav-tabs …`) trafen sie NIE: `product-tabs` ist eine ID, keine Klasse, und der Reiterbereich ist kein Geschwister von #product-offer. Genau deshalb stand die Leiste im NOVA-Rohzustand (Fehlerregister 16: erst den treffenden Selektor suchen). OPTIK: 1:1 die Sprache der Hauptnavigation (pz-header.css, `#mainNavigation .nav-item > .nav-link`) — uppercase 11,5px/.17em mit Gold-Unterstrich. Eine Reihe gleichrangiger Textmarken mit aktiver Markierung ist derselbe Baustein; zwei Rhythmen fuer dieselbe Sache waeren Fehlerregister 3/13. */ #result-wrapper .tab-navigation .nav-tabs { border-bottom: 1px solid var(--pz-line); flex-wrap: nowrap; } #result-wrapper .tab-navigation .nav-tabs .nav-link { font-size: 11.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: #3a352e; background: transparent; padding: 6px 17px 14px; border: 0; border-bottom: 1px solid transparent; /* die aktive Linie legt sich AUF die Leistenlinie statt darunter */ margin-bottom: -1px; border-radius: 0; } /* Erster Reiter buendig zur Inhaltsspalte — wie jede Sektionsueberschrift dieser Seite. */ #result-wrapper .tab-navigation .nav-tabs > .nav-item:first-child > .nav-link { padding-left: 0; } #result-wrapper .tab-navigation .nav-tabs .nav-link:hover, #result-wrapper .tab-navigation .nav-tabs .nav-link.active { color: var(--pz-ink); background: transparent; border-bottom-color: var(--pz-gold); } #result-wrapper .tab-content { padding-top: var(--pz-sek-nav); font-size: 15.5px; line-height: 1.85; color: #4a443c; } /* Akkordeon-Zweig (NOVA rendert ihn bei mobiler Geraeteerkennung statt der Reiterleiste — Bens Mobil-Screenshot zeigt genau diesen). Dieselbe Beschriftungssprache, Karten ohne Bootstrap-Kasten. */ #result-wrapper .accordion .card, #result-wrapper .accordion .card-header { background: transparent; border: 0; border-radius: 0; } #result-wrapper .accordion .card + .card { border-top: 1px solid var(--pz-line); } #result-wrapper .accordion .card-header { padding: 16px 0; font-size: 11.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--pz-ink); } #result-wrapper .accordion .card-body { padding: 0 0 20px; } /* ⚠️ Bens Mobilbefund "klebt ohne Abstand an der Sektion darueber": gemessen endete das Beschreibungsband bei y3848 und die Reiterleiste begann bei y3848 — der Bereich hatte gar kein eigenes Mass, weder oben noch unten, und stiess unten direkt an die dunkle Kante des Pflegebandes. Das KOPFmass gibt die Sektion darueber ab (Skalen-Regel 2, genau EIN Wert an der Grenze); das FUSSmass zur harten Farbkante traegt der Bereich selbst (Skalen-Regel 3). ⚠️ `:has()` ist noetig, weil `#result-wrapper > .container` auch das Kaufformular trifft — dessen Mass steht woanders. */ #result-wrapper > .container:has(.tab-navigation), #result-wrapper > .container:has(.accordion) { padding-bottom: var(--pz-sek-halb); } /* ============================================================================ pz: MERKMAL-TABELLE (NOVA productdetails/attributes.tpl) — Ben 20.08.: "das hier is nich sonderlich barrierefreundlich...." Dieselbe Fehlerklasse wie der doppelte Beschreibungsblock: der Baustein war unsichtbar, solange keine Merkmale gepflegt waren, und ist mit dem Datenimport aufgewacht. NOVA gibt jeden Merkmalwert als `a.badge .badge-primary` aus; unsere CI-Regel faerbt Badges gold — heraus kamen winzige Gold-Chips mit dunkler 11px-Schrift (Screenshot). Ein Merkmalwert ist DATEN, kein Statuszeichen: er wird als normaler Text gesetzt, in derselben Groesse wie das Label daneben. Der Wert bleibt ein Link auf die Merkmalwertseite (das ist NOVA-Funktion, keine Optik) — erkennbar am Gold-Hover wie jeder andere Link im Shop. ⚠️ NOVA umschliesst die Werte mit {strip}; mehrere Werte in einer Zelle haetten deshalb ohne Trennzeichen aneinandergeklebt. Das Komma kommt ueber ::before am zweiten und jedem weiteren Wert. ⚠️ STAND FIXRUNDE 8: die vertagte Entscheidung ist gefallen — die Tabelle steht jetzt im Kasten "Auf einen Blick" (C1-Block weiter oben), der ihre Optik dort weiter zuschneidet. DIESE Regeln bleiben ungescopet, weil sie die NOVA-Ausgabe grundsaetzlich zugaenglich machen (Merkmalwert als Text statt Gold-Chip) und auch dann gelten muessen, wenn die Tabelle einmal woanders auftaucht — etwa in NOVAs Quick-View (Fehlerregister 17). */ .product-attributes .attr-characteristic .badge { background-color: transparent; border: 0; border-radius: 0; padding: 0; color: var(--pz-ink); font-family: var(--pz-sans); font-size: 15px; font-weight: 400; line-height: 1.65; letter-spacing: normal; text-transform: none; white-space: normal; vertical-align: baseline; text-decoration: none; } .product-attributes .attr-characteristic .badge:hover { color: var(--pz-gold); } .product-attributes .attr-characteristic .badge + .badge::before { content: ", "; } /* Label- und Wertspalte in EINER Typo und auf EINER Grundlinie (das Label traegt NOVAs .h6 und damit die Ueberschriftenschrift — Fehlerregister 11: zwei Quellen fuer dieselbe Zeile sind immer ein Bug). */ .product-attributes td, .product-attributes td.h6 { font-family: var(--pz-sans); font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--pz-ink); vertical-align: top; margin: 0; } /* Label vom Wert unterscheidbar ueber das GEWICHT, nicht ueber einen leiseren Ton. ⚠️ Erster Versuch war --pz-muted fuers Label — im Browser nachgerechnet ergab das auf --pz-ivory (#f7f4ee) nur 4,25:1 und auf der Zebra-Zeile (--pz-ivory-2 #efeadf) noch weniger, also UNTER AA. Ein Spec-Label darf nicht das schwaechste Element der Seite sein: es traegt jetzt --pz-text. ⚠️ RICHTIGSTELLUNG 20.08.: Hier stand, der Kommentar in pz-base.css nenne fuer DIESE Paarung 5,51:1 und sei falsch. Das war eine Verwechslung — die 5,51:1 dort gehoeren zu --pz-ok #4f6a42 auf --pz-ivory (nachgerechnet: korrekt), nicht zu --pz-muted. Der gemeldete "Befund" existierte also nicht; die 4,25:1 fuer --pz-muted stimmen und stehen jetzt als Nutzungsregel bei der Token-Definition in pz-base.css. */ .product-attributes td.h6 { color: var(--pz-text); font-weight: 500; } /* ============================================================================ pz: "Aehnliche Artikel" — Bildbuehnen mit fester Buehne (Reviewer F7). Gemessen 19.08.: die Slider-Items hatten gar keine Buehne, die Bilder standen in ihrer Naturhoehe -> die Titel begannen auf sieben verschiedenen Hoehen (Fehlerregister 19: gleiche Karten, ungleiche Bilder darin). Buehne 4/3 wie die Produktkarte, contain statt cover, damit die Oberkante bei jedem Bild buendig sitzt. */ /* ⚠️ 20.08. (Ben/P3c+d): markiert waren der Raum zwischen dunklem Pflegeband und "PASST DAZU" (Kopfmass, gemessen 126) und der zwischen den Slider-Preiszeilen und der Fusskante (Fussmass, ebenfalls 126). Beide auf dieselbe Halbstufe wie die uebrige Artikelkette. */ .x-related { padding: var(--pz-sek-halb) 0; } /* ⚠️ Der Selektor ist gemessen, nicht geraten: die Buehne heisst .item-slider.productbox-image.square.square-image, das Seitenverhaeltnis macht NOVAs .square::before{padding-bottom:100%} (base_crit.scss) — dieselbe Mechanik wie in der Produktkarte. Ein aspect-ratio auf im absolut positionierten .inner kollabiert die Buehne stattdessen (beim ersten Versuch genau so passiert: leere weisse Kaesten). */ /* pz: Buehne 20.08. auf denselben Stand wie die Produktkarte gezogen (Review R3, B2 — ivory-2 statt Weiss, cover statt contain). Die Slider-Items tragen KEINE .productbox, deshalb greift die Basisregel hier nicht und der Wert muss an dieser einen zusaetzlichen Stelle stehen — sonst haette der Slider als einzige Kartenart eine weisse Briefmarken- Buehne behalten (Fehlerregister 13). */ .x-related .item-slider.square { background: var(--pz-ivory-2); border: 1px solid var(--pz-line); } .x-related .item-slider.square::before { padding-bottom: 75%; } .x-related .item-slider .inner, .x-related .item-slider .inner picture { display: block; width: 100%; height: 100%; } .x-related .item-slider .inner img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================================ pz: SLIDER-KARTE REGISTERHALTIG (Review R3, B11). Gemessen 20.08. (1440, P026): alle Titel starteten bei y2706, die Preiszeilen aber bei 2783 / 2809 / 2834 / 2860 — 77px Spreizung ueber 10 Karten. ⚠️ Die Ursache war HAUSGEMACHT: `.item-slider-desc { display:block }` (die frueher hier stehende Fassung) schlug NOVAs `.text-clamp-2`, das seine Zweizeilen-Begrenzung ueber `display:-webkit-box` macht. Ohne die Begrenzung wuchs der Titel auf 3-6 Zeilen und schob den Preis mit. Fehlerregister 19: gleiche Karten, ungleiches Innenleben — die Kartenhoehe allein war nie der Messpunkt. Jetzt: Klammer wieder aktiv PLUS min-height wie in der Produktkarte (.productbox-title, 52px = 2 Zeilen) — die Preiszeile startet damit auf EINER Linie, unabhaengig von der Titellaenge. */ .x-related .item-slider-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 52px; margin-top: 24px; } /* Die MwSt-Zeile der Produktkarte hat der Slider nicht — sein Fussmass darf deshalb nicht aus dem Zufall kommen (gemessen: ~180px Rest zum Footer). Die Sektion traegt ihr Mass ueber .x-related (--pz-sek, weiter oben); NOVAs Slider-Eigenmargen werden hier genullt. */ .x-related .slick-slider, .x-related .row.slick-slider { margin-bottom: 0; } .x-related .item-slider-price { margin-bottom: 0; } /* ============================================================================ pz: Nachjustierung der Artikel-Sektionskette (gemessen 19.08. nach dem Umbau — genau die Stellen, an denen noch zwei Skalenwerte stapelten): a) Produktzeile -> Beschreibungsband ist ein SCHWACHER Flaechenwechsel (ivory -> ivory-2): gemessen 252px. Traegt das Band sein Kopfmass, gibt die Produktzeile ihres ab (Skalen-Regel 2). Ohne Band behaelt sie es (sonst klebt die Kaufspalte am dunklen Pflegeband). b) NOVAs Slider bringt `margin-bottom:32px` mit — der Rest, der die Grenze zum Footer auf 254 statt 222 brachte. */ /* ⚠️ Anker-Form identisch zur Regel oben: :has() erbt die Spezifitaet seines Arguments — mit nur #result-wrapper davor (2,1,0) verlor die Regel still gegen die 126px-Regel (3,1,0). Fehlerregister 16. */ #content-wrapper:has(#result-wrapper > .pz-pdesc) #buy_form { padding-bottom: 0; } /* pz: Fixrunde 8 / C1 — dieselbe Regel fuer die neue Sektion "Auf einen Blick": auch sie traegt ihr Kopfmass selbst (--pz-sek-halb). Ohne diese Zeile stapelten sich bei einem Artikel OHNE Langbeschreibung, aber MIT Merkmalen, das Fussmass des Kaufformulars (--pz-sek) und das Kopfmass der Sektion (Skalen-Regel 2: an einer Grenze zieht genau EIN Wert). ⚠️ Ankerform identisch zur Regel darueber — `:has()` erbt die Spezifitaet seines Arguments, eine kuerzere Form verloere still (Fehlerregister 16). */ #content-wrapper:has(#result-wrapper > .pz-spec) #buy_form { padding-bottom: 0; } #result-wrapper .x-related { margin-bottom: 0; } /* pz: Fehlerregister 5 — NOVAs `margin-bottom:48px` an #image_wrapper DECKELT den Klebeweg des sticky-Elements (gemessen: Stopp bei Dokument-Y 649 statt 698, exakt die 48px). Der Abstand zum Naturprodukt-Hinweis kommt ohnehin aus dessen margin-top (26px, Mockup .nature). ⚠️ 20.08. ENTSCOPT (Ben/P4: "Mobil: Thumbnail-Leiste -> Naturprodukt-Hinweis halbieren", Fehlerregister 17 — der Wert war nicht ab 992 falsch, sondern darunter genauso). Gemessen vorher (390): Thumbleiste endet y613, .pz-nature beginnt y693 — 80px aus DREI unabhaengigen Quellen gestapelt: 32px #gallery_preview margin-bottom (slick) 48px #image_wrapper margin-bottom (NOVA), schluckt per Margin-Collapse die 26px der .pz-nature 26px .pz-nature margin-top (Mockup .nature) — wirkungslos Auf 1440 waren die ersten beiden bereits weg, dort mass dieselbe Grenze 27px. Also nicht "einen Wert halbieren", sondern die zwei fremden Quellen abraeumen: uebrig bleibt der EINE Mockup-Wert, derselbe wie auf dem Desktop. Ergebnis 80 -> 26px, und dieselbe Grenze misst auf allen Breiten gleich. */ #product-offer > .product-gallery .pz-gal-sticky > #image_wrapper { margin-bottom: 0; } #image_wrapper .product-detail-image-preview-bar .product-thumbnails, #image_wrapper .product-detail-image-preview-bar #gallery_preview { margin-bottom: 0; } /* Sektionskopf der Slider (Markup: snippets/product_slider.tpl) — .pz-sec-head kommt aus pz-startseite.css und ist dort nur fuer die Startseite definiert; hier die wenigen Werte, die der Slider braucht. */ .pz-slider-head { display: block; margin-bottom: 60px; } .pz-slider-head .pz-eyebrow { display: block; margin-bottom: 22px; } .pz-slider-head h2 { font-size: 50px; margin: 0; text-align: left; } @media (max-width: 991.98px) { .pz-slider-head { margin-bottom: 32px; } .pz-slider-head h2 { font-size: 30px; } } /* Kartentexte im Slider linksbuendig wie im Mockup (.card) — NOVA setzt `text-center-util` am .product-wrapper (Mockup-Abweichung Klasse 6: Ausrichtung ist Vertragsbestandteil, nicht Geschmack). */ .x-related .product-wrapper { text-align: left; } .x-related .item-slider-desc, .x-related .item-slider-price { text-align: left; } /* ============================================================================ pz: MOBILE NACHARBEIT DER ARTIKELSEITE (390 gemessen, Klasse 9: mobil bewusst gestalten statt Framework-Rest stehen lassen). a) Kaufbutton ohne Beschriftung. NOVA blendet das Label unterhalb seines Breakpoints aus (`#add-to-cart .btn .btn-basket-check span{display:none}`, my-nova.css) — uebrig blieb ein 358px breiter Goldbalken mit einem Warenkorb-Glyph. Das Mockup (.btn-buy) traegt die Beschriftung, und Platz ist reichlich. Gleicher Anker wie NOVA (Fehlerregister 16). b) Lieferzeit-Zeile und "Frage zum Artikel" stehen als zwei Spalten nebeneinander; die umbrechende Lieferzeit lief optisch in die Frage hinein. Unter sm gestapelt. c) Der Naturprodukt-Hinweis stiess einspaltig direkt an den Eyebrow der Kaufspalte — er braucht seinen eigenen Fussabstand aus der Skala. */ @media (max-width: 991.98px) { #add-to-cart .btn .btn-basket-check span { display: inline-block; } .pz-nature { margin-bottom: var(--pz-sek-lead); } /* pz: d) THUMBLEISTE AUCH MOBIL (Review R3, B6). Gemessen 20.08. (390): NOVA blendet die Leiste unterhalb lg komplett aus (`.product-detail .product-thumbnails-wrapper .product-thumbnails {display:none}`) und laesst nur Wisch-Punkte + Pfeile stehen; uebrig blieb ein leerer Wrapper (der "2px"-Befund des Reviews — nach dem Entfernen von Kasten und Rahmen jetzt 0px, also kein Artefakt mehr, aber eben auch keine Leiste). Vier gleich grosse Quadrate passen bei 390px bequem in die Zeile und sind ein besserer Direktzugriff als Punkte. Die Punkte entfallen dann: der aktive Thumb traegt bereits den Gold-Rahmen, zwei Positionsanzeigen nebeneinander sind eine zu viel. ⚠️ ID-Anker, weil NOVAs Regel (0,3,0) sonst gewinnt (Fehlerregister 16). */ #product-offer .product-detail-image-preview-bar .product-thumbnails { display: block; } /* ⚠️ !important ist hier kein Nachdruck: slick setzt `display:block` als INLINE-Style am Punkte-Element (nachgemessen — die einzige passende CSS-Regel war bereits unsere eigene mit display:none, wirksam war trotzdem block). Gegen ein style-Attribut hilft nur die important-Ebene. */ #product-offer #gallery .slick-dots { display: none !important; } } /* pz: Der frueher hier stehende 575er-Block (Lieferzeit-Zeile und "Frage zum Artikel" untereinander stapeln) ist mit Ben/P6 gegenstandslos geworden — die Frage steht nicht mehr neben der Lieferzeit, sondern als Knopf unter dem Warenkorb. NOVAs Spalte an der alten Stelle wird in details.tpl leer ueberschrieben; eine Regel fuer ein Element, das dort nicht mehr rendert, waere genau die tote Fassung aus Fehlerregister 17. */