/* ============================================================================ hc-natliste.css v2 — Produktkachel v1 (Brand Book §3.4) auf der NATIVEN Liste ---------------------------------------------------------------------------- Stand: 07.08.2026 · Pilot: /Digimon-Card-Game_1 · Cache-Marke ?v=20260807a Ersetzt v1 (Suchseiten-Skin). Scope unveraendert: ALLES an body.hc-natliste. Zusammenspiel: - Markup-Erweiterungen (Meta-Chips, listdesc, Verfuegbarkeit, .hc-nl-rowend) kommen serverseitig aus dem Child-Override productlist/item_box.tpl. - Hover-Karussell + Ansichts-Umschalter: hc-natliste.js (nur Animation/Klassen). - Ansichten (Klassen-Umdeutung 3010/20.07.2026): Standard = 3 Spalten · Gross (#product-list.hc-view-gross) = 2 Spalten, Bild skaliert, Name 17px · Liste (#product-list.hc-view-liste) = Zeile, Bild 200x200, Fusspalte 254px. Sollwerte aus Brand Book §3.4: Achse 16px (Toleranz 0) · Karte weiss r24 + 1px var(--ring) · Preis navy 30px/800, H11 top:2.5px · Warenkorb-Kreis 42px · Anfragen-Pill 42px · Badge/Herz 16/16 · Herz-Kreis 32px Feather · keine weisse/beige Bildbox · AUSVERKAUFT rot #c22f2f · Mobile ≤660 = Variante B. RUECKBAU: Body-Klasse zurueck auf hc-search ODER Datei aus dem Head nehmen. ============================================================================ */ /* --------------------------------------------------------------------------- 0) TOKENS (lokal, damit die Datei selbsttragend ist) --------------------------------------------------------------------------- */ body.hc-natliste { --hcnl-primary: #ef820e; --hcnl-navy: #0c1e2a; --hcnl-ring: rgba(12, 30, 42, .16); --hcnl-green: #1a9e6e; --hcnl-red: #c22f2f; --hcnl-wish: #e4596b; --hcnl-muted: #5b6b76; } /* --------------------------------------------------------------------------- 1) NATIVE LISTE SICHTBAR HALTEN (Erbe aus v1 — Verteidigung gegen build()) --------------------------------------------------------------------------- */ body.hc-natliste #product-list { display: flex !important; } body.hc-natliste #hcSearchList { display: none !important; } /* --------------------------------------------------------------------------- 2) RASTER — Ansichten-Matrix (Standard: 3 / 2 / 2 Spalten, gap 20 / 20 / 12) Bootstrap-col-Breiten (col-6/md-4/xl-3) werden hier bewusst uebersteuert. --------------------------------------------------------------------------- */ body.hc-natliste #product-list { flex-wrap: wrap; /* flex-start statt stretch: Chrome dehnte eine Kachel im Zusammenspiel mit height:auto!important auf 678 statt 614 (gemessen 07.08.). Der Gleichstand kommt aus der identischen Kachel-Struktur (Titel = fester 2-Zeilen-Slot, alle uebrigen Zeilen einzeilig fix) — expC-Beweis: alle 5 natuerlich 614px. */ align-items: flex-start; gap: 20px; margin: 0; } body.hc-natliste #product-list > .product-wrapper { display: flex; flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); height: auto !important; padding: 0; } @media (max-width: 839px) { body.hc-natliste #product-list > .product-wrapper { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } } @media (max-width: 660px) { body.hc-natliste #product-list { gap: 12px; } body.hc-natliste #product-list > .product-wrapper { flex-basis: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); } } /* --------------------------------------------------------------------------- 3) KARTE — weiss, r24, ECHTER 1px-Rahmen var(--ring), Flex-Spalte, Hover = 3px-Lift + Schatten. Bild randlos -> overflow clip fuer die Ecken. --------------------------------------------------------------------------- */ body.hc-natliste .productbox { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--hcnl-ring); border-radius: 24px; padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; height: auto !important; } body.hc-natliste .productbox:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(12, 30, 42, .12); border-color: var(--hcnl-primary); } /* Flex-Kette bis zur Caption, damit .hc-nl-rowend unten buendig steht und alle Kacheln einer Zeile gleich hoch sind. */ body.hc-natliste .productbox form.form-basket, body.hc-natliste .productbox .productbox-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } body.hc-natliste .productbox .productbox-inner > .row { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; } body.hc-natliste .productbox .productbox-inner > .row > [class*="col"] { padding: 0; max-width: 100%; flex: 0 0 auto; } /* Caption-Spalte (letzte col) traegt die 16px-Achse */ body.hc-natliste .productbox .productbox-inner > .row > [class*="col"]:last-child { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 16px 16px; min-width: 0; } /* NOVAs Equal-Height-Inline-Style entschaerfen */ body.hc-natliste #product-list .product-wrapper { height: auto !important; } /* --------------------------------------------------------------------------- 4) BILD — randlos, quadratisch, transparent (KEINE weisse/beige Box) padding-bottom-Trick aus v1 (propagiert Hoehe vor dem Bild-Load). --------------------------------------------------------------------------- */ body.hc-natliste .productbox-images.list-gallery { position: relative; } body.hc-natliste .productbox-image.square { position: relative; display: block; height: auto; } body.hc-natliste .productbox-image.square::before { content: ""; display: block; padding-bottom: 100%; } body.hc-natliste .productbox-image.square > .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border-radius: 0; overflow: hidden; padding: 12px; } body.hc-natliste .productbox-image.square picture, body.hc-natliste .productbox-image.square img { width: 100%; height: 100%; object-fit: contain; } /* NOVAs zweites Bild bleibt aus — das Karussell (hc-natliste.js) legt eigene Ebenen an. So gibt es keinen Lazy-Blank-Frame. */ body.hc-natliste .productbox-images .productbox-image.square:not(.first-wrapper) { display: none; } /* Karussell-Ebenen (von hc-natliste.js erzeugt) */ body.hc-natliste .hc-nl-carlayer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; opacity: 0; transition: opacity .28s ease; pointer-events: none; z-index: 1; background: #fff; } /* --------------------------------------------------------------------------- 5) BADGE oben links — nur NEU (orange) / AUSVERKAUFT (rot), Achse 16/16. JTL-Suchspecial-Ribbons: ribbon-8 = "Auf Lager" -> nicht im Standard, AUS. ribbon-7 = "Ausverkauft" -> rot. ribbon-3 = "Neu im Sortiment" -> orange. --------------------------------------------------------------------------- */ /* Referenz /digimon-tcg (Marcels SOLL, 07.08.): Kacheln tragen KEINE JTL-Suchspecial-Badges — Verfuegbarkeit steht ausschliesslich als Textzeile. Alle Ribbons aus (erledigt auch das clear.css-::before-Faltdreieck). NEU-Badge kommt spaeter als eigener Baustein aus HC_NEW, nicht von hier. */ body.hc-natliste #product-list .productbox .ribbon, body.hc-natliste #product-list .productbox .productbox-ribbon, body.hc-natliste .hc-nl-cv .productbox .ribbon, body.hc-natliste .hc-nl-cv .productbox .productbox-ribbon { display: none !important; } /* --------------------------------------------------------------------------- 6) MERKEN-HERZ oben rechts — Kreis 32px, Feather-Herz, Achse 16/16. Vergleichen-Button ist nicht Teil des Kachel-Standards -> aus. --------------------------------------------------------------------------- */ body.hc-natliste #product-list .productbox-quick-actions, body.hc-natliste .hc-nl-cv .productbox-quick-actions { display: flex !important; position: absolute; top: 16px; right: 16px; left: auto; z-index: 3; gap: 8px; margin: 0; padding: 0; align-items: flex-start; } body.hc-natliste .productbox-quick-actions .compare { display: none !important; } body.hc-natliste .productbox-quick-actions .btn.wishlist { width: 34px; /* Referenz /digimon-tcg: 34px, randlos weiss */ height: 34px; min-width: 34px; margin: 0; /* Bootstrap-.btn-Margin wuerde das Herz von der 16er-Achse schieben */ padding: 0; border-radius: 999px; background-color: #fff; border: 0; box-shadow: 0 1px 4px rgba(12, 30, 42, .10); display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; box-shadow: none; transition: background-color .18s ease, transform .18s ease; } body.hc-natliste .productbox-quick-actions .btn.wishlist > * { display: none !important; } body.hc-natliste .productbox-quick-actions .btn.wishlist::before { content: ""; display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,") center / contain no-repeat; } body.hc-natliste .productbox-quick-actions .btn.wishlist:hover { background-color: var(--hcnl-primary); transform: scale(1.06); } body.hc-natliste .productbox-quick-actions .btn.wishlist:hover::before { background-image: url("data:image/svg+xml,"); } /* Auf der Liste: Herz gefuellt #E4596B (Zustand aus wishlist_button.tpl, Session) */ body.hc-natliste .productbox-quick-actions .btn.wishlist.on-list::before { background-image: url("data:image/svg+xml,"); } /* --------------------------------------------------------------------------- 7) META-ROW — Franchise-Chip + Sprache-Chip. Getoente Chips: erster/letzter BUCHSTABE steht auf der Achse -> -8px (= Chip-Padding) Ueberhang, bewusst (Ausrichtungs-Regel 2, §3.4). --------------------------------------------------------------------------- */ body.hc-natliste .hc-nl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; } body.hc-natliste .hc-nl-chip { display: inline-flex; align-items: center; font-family: var(--font-body, "Space Grotesk"), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; white-space: nowrap; } body.hc-natliste .hc-nl-chip-fr { background: rgba(239, 130, 14, .13); color: var(--hcnl-primary); margin-left: -8px; } body.hc-natliste .hc-nl-chip-lang { background: rgba(12, 30, 42, .08); color: var(--hcnl-navy); margin-right: -8px; } /* --------------------------------------------------------------------------- 8) NAME · LISTDESC · VERFUEGBARKEIT --------------------------------------------------------------------------- */ body.hc-natliste .hc-nl-title { margin: 0 0 4px; } /* Politur 09.08.: Engine-Kachel nachgemessen — Name 14.5/600 lh1.35 (war 13.5/700) */ body.hc-natliste .hc-nl-title a { font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--hcnl-navy); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } /* Politur 09.08.: Engine zeigt "English · sealed" in 16/400 lh24 NAVY (nicht klein-grau) */ body.hc-natliste .hc-nl-desc { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--hcnl-navy); margin: 0 0 6px; } /* Referenz-Werte /digimon-tcg: 12px/600 · Auf Lager gruen rgb(22,131,58) MIT 7px-Punkt · Ausverkauft GRAU rgb(125,148,159) OHNE Punkt (kein Rot!). */ body.hc-natliste .hc-nl-avail { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin: 0 0 10px; } body.hc-natliste .hc-nl-avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } body.hc-natliste .hc-nl-in { color: rgb(22, 131, 58); } body.hc-natliste .hc-nl-out { color: rgb(125, 148, 159); } body.hc-natliste .hc-nl-out::before { display: none; } /* --------------------------------------------------------------------------- 9) FUSSZEILE — Trennstrich · Preis links navy 30/800 (H11 top 2.5px) · Warenkorb-Kreis 42px / Anfragen-Pill 42px rechts. Preis bricht NIE um. --------------------------------------------------------------------------- */ body.hc-natliste .hc-nl-rowend { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; border-top: 1px solid rgba(12, 30, 42, .08); /* Referenz-Wert (.08, nicht .16) */ padding-top: 12px; } body.hc-natliste .hc-nl-price { font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 30px; font-weight: 800; /* Politur 09.08.: Engine-Preis hat lh 42px (Box = Warenkorb-Kreis 42) — damit entfaellt der alte H11-top-Ausgleich (top 2.5px) auf Desktop. */ line-height: 42px; color: var(--hcnl-navy); white-space: nowrap; flex: 0 0 auto; position: relative; } body.hc-natliste .hc-nl-offer { display: none; } body.hc-natliste .hc-nl-add { width: 42px; height: 42px; min-width: 42px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--hcnl-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .18s ease, transform .18s ease; } body.hc-natliste .hc-nl-add:hover { background: #d86f06; transform: scale(1.05); } body.hc-natliste .hc-nl-ask { height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 16px; border: 1.5px solid var(--hcnl-primary); border-radius: 999px; color: var(--hcnl-primary); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease; } body.hc-natliste .hc-nl-ask:hover { background: var(--hcnl-primary); color: #fff; } /* NOVAs Standard-Preisblock erscheint auf dem Pilot nicht (eigene Fusszeile) */ body.hc-natliste .productbox .price_wrapper, body.hc-natliste .productbox .price-note { display: none; } /* --------------------------------------------------------------------------- 10) MOBILE ≤660 — Variante B (3010/20.07.2026): Achse 12px, Preis 19px (H11 skaliert -> top 1.5px), Kreis 36px (Icon 18), "Anfragen" = ✉-Kreis 36. --------------------------------------------------------------------------- */ @media (max-width: 660px) { body.hc-natliste .productbox .productbox-inner > .row > [class*="col"]:last-child { padding: 10px 12px 12px; } body.hc-natliste .productbox .ribbon, body.hc-natliste .productbox .productbox-ribbon { top: 12px; left: 12px; } body.hc-natliste .productbox-quick-actions { top: 12px; right: 12px; } body.hc-natliste .hc-nl-chip-fr { margin-left: -8px; } body.hc-natliste .hc-nl-title a { font-size: 12.5px; } body.hc-natliste .hc-nl-rowend { gap: 8px; } /* Mobile bleibt wie vor der Politur (lh 1 + Nudge) — eigene Mobile-Spur folgt */ body.hc-natliste .hc-nl-price { font-size: 19px; line-height: 1; top: 1.5px; } /* !important gegen die globale mobile 44px-Button-Regel — sie streckte den Kreis auf 36x44 und machte kaufbare Kacheln 8px hoeher. Die 44er-TASTFLAECHE bleibt ueber das ::after erhalten (Mobile-Standard). */ body.hc-natliste .hc-nl-add { width: 36px; height: 36px !important; min-height: 36px !important; min-width: 36px; position: relative; } body.hc-natliste .hc-nl-add::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } body.hc-natliste .hc-nl-add svg { width: 18px; height: 18px; } body.hc-natliste .hc-nl-ask { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 0; } body.hc-natliste .hc-nl-ask::before { content: "\2709"; font-size: 16px; line-height: 1; } } /* --------------------------------------------------------------------------- 11) ANSICHT "GROSS" — 2 Spalten, nur Bild + Name skalieren (Name 17px). ≤839: 1 Spalte. (Klassen-Umdeutung: Gross = 2, nicht 3.) --------------------------------------------------------------------------- */ body.hc-natliste #product-list.hc-view-gross > .product-wrapper { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } body.hc-natliste #product-list.hc-view-gross .hc-nl-title a { font-size: 17px; } @media (max-width: 839px) { body.hc-natliste #product-list.hc-view-gross > .product-wrapper { flex-basis: 100%; max-width: 100%; } } /* --------------------------------------------------------------------------- 12) ANSICHT "LISTE" — Zeile: Bild 200x200 links (immer quadratisch!), Textspalte, Fusspalte 254px fix rechts mit border-left, Herz an der Zeilen-Ecke (sitzt bereits auf .productbox -> automatisch korrekt). --------------------------------------------------------------------------- */ body.hc-natliste #product-list.hc-view-liste > .product-wrapper { flex-basis: 100%; max-width: 100%; } @media (min-width: 840px) { body.hc-natliste #product-list.hc-view-liste .productbox .productbox-inner > .row { flex-direction: row; align-items: stretch; } body.hc-natliste #product-list.hc-view-liste .productbox .productbox-inner > .row > [class*="col"]:first-child { flex: 0 0 200px; width: 200px; max-width: 200px; align-self: center; } body.hc-natliste #product-list.hc-view-liste .productbox .productbox-inner > .row > [class*="col"]:last-child { display: grid; grid-template-columns: minmax(0, 1fr) 254px; grid-auto-rows: min-content; column-gap: 16px; align-content: center; padding: 16px; } body.hc-natliste #product-list.hc-view-liste .hc-nl-meta { justify-content: flex-start; gap: 8px; } body.hc-natliste #product-list.hc-view-liste .hc-nl-chip-lang { margin-right: 0; } body.hc-natliste #product-list.hc-view-liste .hc-nl-rowend { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 0; border-top: 0; border-left: 1px solid var(--hcnl-ring); padding-top: 0; padding-left: 16px; align-self: stretch; } } @media (max-width: 839px) { /* Kompakt-Zeile: Bild 110x110 links, Fusszeile unter dem Text */ body.hc-natliste #product-list.hc-view-liste .productbox .productbox-inner > .row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } body.hc-natliste #product-list.hc-view-liste .productbox .productbox-inner > .row > [class*="col"]:first-child { flex: 0 0 110px; width: 110px; max-width: 110px; } body.hc-natliste #product-list.hc-view-liste .productbox .productbox-inner > .row > [class*="col"]:last-child { flex: 1 1 calc(100% - 110px); max-width: calc(100% - 110px); } body.hc-natliste #product-list.hc-view-liste .hc-nl-price { font-size: 20px; line-height: 1; top: 1.5px; } body.hc-natliste #product-list.hc-view-liste .hc-nl-add, body.hc-natliste #product-list.hc-view-liste .hc-nl-ask { width: 36px; height: 36px; min-width: 36px; } body.hc-natliste #product-list.hc-view-liste .hc-nl-ask { padding: 0; justify-content: center; font-size: 0; } body.hc-natliste #product-list.hc-view-liste .hc-nl-ask::before { content: "\2709"; font-size: 16px; } } /* --------------------------------------------------------------------------- 13) ANSICHTS-UMSCHALTER (3 Pillen, aus productlist/layout_options.tpl) --------------------------------------------------------------------------- */ /* Alt-Look 09.08. (Engine .view-toggle DOM-gemessen): EINE Pille 44 hoch (pad 4, gap 4, Inset-Ring) mit 38x36-Knoepfen, aktiv = Orange + dunkles Icon */ body.hc-natliste .hc-nl-views { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07); vertical-align: middle; } body.hc-natliste .hc-nl-view { width: 38px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: rgb(125, 148, 159); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .18s ease, color .18s ease; } body.hc-natliste .hc-nl-view svg { width: 16px; height: 16px; } body.hc-natliste .hc-nl-view:hover { color: var(--hcnl-primary); } body.hc-natliste .hc-nl-view.is-active { background: var(--hcnl-primary); color: rgb(42, 17, 0); } /* --------------------------------------------------------------------------- 14) BAUSTEIN B — FILTER-SIDEBAR Die Filterbox-Aktivierung (JTL-Admin > Boxen-Verwaltung) wirkt SHOPWEIT. 14a) SCHUTZSCHILD fuer alle Engine-Seiten (body.hc-search = Suche, Pokemon, Gunpla, ...): dort darf weder die Sidebar erscheinen noch das Listing in NOVAs col-lg-8-Korsett rutschen. Layout bleibt exakt wie heute. --------------------------------------------------------------------------- */ body.hc-search #sidepanel_left { display: none !important; } body.hc-search .row.justify-content-lg-end > .col-lg-8.col-xl-9 { flex: 0 0 100% !important; max-width: 100% !important; } /* 14b) PILOT: Zweispalter — eigenes Markup aus productlist/index.tpl (Child-header/footer haben NOVAs sidepanel-Zweige nicht mehr; der Pilot rendert {$boxes.left} selbst in .hc-nl-sidebar). Sidebar 286px links (Referenz /digimon-tcg), sticky; Listing rechts. */ body.hc-natliste .hc-nl-zweispalter { display: flex; flex-wrap: nowrap; align-items: flex-start; /* Referenz-Geometrie /digimon-tcg (gemessen 08.08.): .wrap max-width 1280, zentriert, 28px Polster, Gap 32 -> innen 1224 = 286 Sidebar + 32 + 906 Grid. Vorher war der Pilot full-bleed - Marcels Befund "wir hatten das schmaler". */ max-width: 1280px; margin: 0 auto; gap: 32px; padding: 0 28px; } body.hc-natliste .hc-nl-sidebar { flex: 0 0 286px; max-width: 286px; padding: 0; position: sticky; top: 90px; } body.hc-natliste .hc-nl-main { flex: 1 1 auto; min-width: 0; } @media (max-width: 1023px) { body.hc-natliste .hc-nl-zweispalter { flex-wrap: wrap; } body.hc-natliste .hc-nl-sidebar { position: static; flex: 0 0 100%; max-width: 100%; } } /* 14c) FILTERBOXEN-OPTIK — NOVA-Facetten im pk-sidebar-Look der Referenz: "Filter"-Kopf, weisse Akkordeon-Karten (r24), 14px-Koepfe, Items mit Zaehler, oranger Hover. Markup bleibt NOVA ({$boxes.left}), nur Optik. */ /* EXAKT-PORT 09.08. (Loop-Brecher): alle Werte 1:1 aus Engine .pk-sidebar DOM-gemessen — Kopf "Filter" 17/800 rgb(82,82,82) + Reset 12.5/700 orange, Gruppen-Pille .filter-group: 47 hoch, r24 (KEIN Vollkreis), KEIN border (Ring = inset-Schatten rgba(12,30,42,.07) 1px), Kopf-Button pad 15/18, Label 13.5/700 navy, Chevron-SVG 16px grau (zu = -90deg), Gruppen-Gap 14. */ body.hc-natliste .hc-nl-sidebar { display: flex; flex-direction: column; gap: 14px; } body.hc-natliste .hc-nl-fkopf { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 0; } body.hc-natliste .hc-nl-fkopf span { font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 17px; font-weight: 800; color: rgb(82, 82, 82); } body.hc-natliste .hc-nl-fkopf a { font-size: 12.5px; font-weight: 700; color: var(--hcnl-primary); text-decoration: none; } body.hc-natliste .hc-nl-fkopf a:hover { text-decoration: underline; } body.hc-natliste .hc-nl-sidebar .box { background: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07); border-radius: 24px; /* Polster sitzt am Kopf-Knopf (nicht an der Pille), damit der Knopf die GANZE Pille ausfuellt — sonst waeren die Raender eine tote Hover-Zone */ padding: 0; margin: 0; transition: box-shadow .18s ease; } /* Hover wie beim "Nach Set filtern"-Knopf: oranger Ring + oranger Text. Nur wenn der KOPF ueberfahren wird — die offene Liste loest ihn nicht aus. */ body.hc-natliste .hc-nl-sidebar .box:has(> button:hover) { box-shadow: inset 0 0 0 1px var(--hcnl-primary); } body.hc-natliste .hc-nl-sidebar .box > button:hover, body.hc-natliste .hc-nl-sidebar .box > button:hover::after { color: var(--hcnl-primary); } body.hc-natliste .hc-nl-sidebar .box:has([aria-expanded="true"]) { padding-bottom: 6px; } body.hc-natliste .hc-nl-sidebar .box.mb-5 { margin-bottom: 0 !important; } /* TEMPLATE-TREU 09.08. (Marcels Regel: mit dem Template arbeiten, nicht ueberschreiben): NOVAs nativer Collapse-Caret ist ein FA-Glyph "\f078" auf .dropdown-toggle::after (clear.css) — wir faerben/skalieren ihn NUR und drehen zu nach RECHTS. Lehre: eigenes Bild UEBER den Glyph legen -> Doppel-Pfeil ("Ueberlagerung", Marcels Befund). */ body.hc-natliste .hc-nl-sidebar .box .dropdown-toggle::after { color: rgb(125, 148, 159); font-size: 15px; line-height: 1; transition: transform .18s ease; } body.hc-natliste .hc-nl-sidebar .box [aria-expanded="false"].dropdown-toggle::after { transform: rotate(-90deg); } /* Kopf-Button (Collapse-Toggle) */ body.hc-natliste .hc-nl-sidebar .box > button, body.hc-natliste .hc-nl-sidebar .box .box-title button, body.hc-natliste .hc-nl-sidebar .box [data-toggle="collapse"], body.hc-natliste .hc-nl-sidebar .box [data-bs-toggle="collapse"] { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; /* Engine .filter-group-head: pad 15/0 -> Pille 47 hoch, Label 13.5/700 */ /* 18px seitlich = frueheres Pillen-Polster (siehe .box) */ padding: 15px 18px; font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 13.5px; font-weight: 700; line-height: 17px; /* 15+17+15 = 47 wie Engine .filter-group */ color: var(--hcnl-navy); text-align: left; cursor: pointer; transition: color .18s ease; } /* NOVAs Trenner-HR unter jedem Filterkopf passt nicht zur Pillen-Optik */ body.hc-natliste .hc-nl-sidebar .box-filter-hr { display: none; } body.hc-natliste .hc-nl-sidebar .box .box-title, body.hc-natliste .hc-nl-sidebar .box h3, body.hc-natliste .hc-nl-sidebar .box h4 { margin: 0; font-size: 13.5px; border: 0; padding: 0; } /* Filter-Optionen */ body.hc-natliste .hc-nl-sidebar .filter-item, body.hc-natliste .hc-nl-sidebar li { list-style: none; } /* NOVAs Eintraege haben 3px Seitenrand — der schob die Liste gegen den Kopftext aus der Flucht (21 statt 18). Auf 0, damit beide bei 18 stehen. */ body.hc-natliste .hc-nl-sidebar .filter-item { margin-left: 0; margin-right: 0; } body.hc-natliste .hc-nl-sidebar .filter-item a, body.hc-natliste .hc-nl-sidebar li a { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--hcnl-navy); text-decoration: none; } body.hc-natliste .hc-nl-sidebar .filter-item a:hover, body.hc-natliste .hc-nl-sidebar li a:hover { color: var(--hcnl-primary); } /* Treffer-Zaehler: schlichter grauer Text rechts (Engine .cnt: 12/400 rgb(125,148,159), KEINE Pille — DOM-gemessen 09.08.) */ body.hc-natliste .hc-nl-sidebar .badge, body.hc-natliste .hc-nl-sidebar .filter-count { margin-left: auto; background: transparent; color: rgb(125, 148, 159); border-radius: 0; font-size: 12px; font-weight: 400; padding: 0; } /* Box-Koerper traegt jetzt selbst die 18px seitlich (Polster wanderte vom Pillen-Rahmen auf den Kopf-Knopf, damit der Hover die ganze Pille trifft) */ /* ⚠️ .collapsing MUSS mit adressiert werden: Bootstrap nimmt waehrend der Auf-/Zuklapp-Animation (~.35s) die Klasse .collapse WEG und setzt .collapsing. Ohne den zweiten Selektor fehlen in dieser Zeit die seitlichen 18px — der Inhalt ist 36px breiter, die Auswahl-Kreise kleben am linken Boxrand und springen am Animationsende an ihren Platz (Marcels Befund 10.08., 4 Bilder). */ body.hc-natliste .hc-nl-sidebar .box > .collapse, body.hc-natliste .hc-nl-sidebar .box > .collapsing { margin: 0; padding: 0 18px 8px; } body.hc-natliste .hc-nl-sidebar .box ul, body.hc-natliste .hc-nl-sidebar .box .list-unstyled { margin: 0; padding: 0; } /* Preisspanne: Eingaben als Pillen, Slider-Farbe kommt bereits aus dem Theme */ body.hc-natliste .hc-nl-sidebar .box-filter-price input { border: 1px solid var(--hcnl-ring); border-radius: 10px; height: 36px; font-size: 14px; } /* NOVAs d-none/d-lg-block-Gate neutralisieren wir nicht — Desktop zeigt, mobil bleibt der bestehende Weg (eigener Schritt in der Mobile-Spur). */ /* 14d) POLITUR 09.08. — Haekchen-Quadrate, aktive Filter-Chips, Reset-Link. NOVA-Markup (nachgemessen): Item =
Label N
 · Aktive Filter = .active-filters OBEN in #result-wrapper (sitzt also schon ueberm Grid — nur Optik noetig) mit Chip-Links .snippets-filter-item + Reset .snippets-filter-item-all. */ body.hc-natliste .hc-nl-sidebar a.filter-item { text-decoration: none; } /* Engine-Zeile (label.f-opt DOM-gemessen 09.08.): gap 11, 14px, Hoehe 33 */ body.hc-natliste .hc-nl-sidebar .filter-item .box-link-wrapper { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 33px; font-size: 14px; color: var(--hcnl-navy); } /* Engine .mark: 19px-KREIS, Ring = inset-Schatten 1.5px rgba(12,30,42,.12) */ body.hc-natliste .hc-nl-sidebar .filter-item .box-link-wrapper::before { content: ""; flex: 0 0 19px; width: 19px; height: 19px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(12, 30, 42, .12); transition: box-shadow .15s ease; } body.hc-natliste .hc-nl-sidebar .filter-item:hover .box-link-wrapper { color: var(--hcnl-primary); } body.hc-natliste .hc-nl-sidebar .filter-item:hover .box-link-wrapper::before { box-shadow: inset 0 0 0 1.5px var(--hcnl-primary); } /* Meta-Icons (fa-truck & Co.) passen nicht zur Referenz-Optik */ body.hc-natliste .hc-nl-sidebar .snippets-filter-item-icon-right { display: none; } /* 14e) OFFENER FILTER-ZUSTAND (Marcels Befund 09.08. "optisch nicht sauber"): Engine unterdrueckt Fokus-Glow (outline+shadow none, DOM-gemessen) · NOVAs EUR-Feld war 25.6px neben 36er-Input (Versatz) · noUi-Connect war GELB rgb(248,191,0) mit Glow-Handles. Alles template-treu: NOVA-Markup bleibt, nur Optik. */ body.hc-natliste .hc-nl-sidebar button:focus, body.hc-natliste .hc-nl-sidebar button:focus-visible, body.hc-natliste .hc-nl-sidebar a:focus, body.hc-natliste .hc-nl-sidebar input:focus, body.hc-natliste .hc-nl-sidebar .noUi-handle, body.hc-natliste .hc-nl-sidebar .noUi-handle:focus, body.hc-natliste .hc-nl-sidebar .noUi-handle:focus-visible, body.hc-natliste .hc-nl-sidebar .noUi-active { outline: 0 !important; box-shadow: none !important; } body.hc-natliste .hc-nl-sidebar input:focus { border-color: var(--hcnl-primary); } /* Preis-Inputs: EUR-Feld auf Input-Hoehe und -Optik angleichen */ body.hc-natliste .hc-nl-sidebar .price-range-inputs { row-gap: 10px; } body.hc-natliste .hc-nl-sidebar .input-group { align-items: stretch; } body.hc-natliste .hc-nl-sidebar .input-group .price-range-input { height: 36px; border: 1px solid var(--hcnl-ring); border-right: 0; border-radius: 10px 0 0 10px; font-size: 14px; color: var(--hcnl-navy); } body.hc-natliste .hc-nl-sidebar .input-group-prepend, body.hc-natliste .hc-nl-sidebar .input-group-append { height: 36px; } body.hc-natliste .hc-nl-sidebar .input-group-prepend .input-group-text, body.hc-natliste .hc-nl-sidebar .input-group-append .input-group-text { height: 36px; display: flex; align-items: center; padding: 0 10px; background: rgba(12, 30, 42, .04); border: 1px solid var(--hcnl-ring); border-left: 0; border-radius: 0 10px 10px 0; font-size: 12px; font-weight: 600; color: rgb(77, 100, 112); } /* noUi-Slider: Track 4 grau, Connect ORANGE (statt Gelb), Handle 16px weiss mit Orange-Ring, noUi-Griffstriche aus */ body.hc-natliste .hc-nl-sidebar .noUi-target { height: 4px; background: rgba(12, 30, 42, .08); border: 0; box-shadow: none; } body.hc-natliste .hc-nl-sidebar .noUi-connect { background: var(--hcnl-primary); } body.hc-natliste .hc-nl-sidebar .noUi-horizontal .noUi-handle { width: 16px; height: 16px; top: -6px; right: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--hcnl-primary); cursor: pointer; } body.hc-natliste .hc-nl-sidebar .noUi-handle::before, body.hc-natliste .hc-nl-sidebar .noUi-handle::after { display: none; } /* Aktive Filter als HC-Chips (Bootstrap-btn-Look neutralisieren) */ body.hc-natliste .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; } body.hc-natliste .active-filters .snippets-filter-item { display: inline-flex; align-items: center; gap: 8px; height: 37px; padding: 0 14px; background: #fff; border: 1px solid var(--hcnl-ring); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--hcnl-navy); text-decoration: none; transition: border-color .18s ease, color .18s ease; } body.hc-natliste .active-filters .snippets-filter-item:hover { border-color: var(--hcnl-primary); color: var(--hcnl-primary); } body.hc-natliste .active-filters .snippets-filter-item .fa-times { color: var(--hcnl-primary); } /* "Alle Filter zuruecksetzen" als dezenter Textlink */ body.hc-natliste .active-filters .snippets-filter-item-all { display: inline-flex; align-items: center; height: 37px; padding: 0 4px; background: transparent; border: 0; font-size: 13px; font-weight: 700; color: var(--hcnl-muted); text-decoration: underline; } body.hc-natliste .active-filters .snippets-filter-item-all:hover { color: var(--hcnl-primary); } /* --------------------------------------------------------------------------- 15) BAUSTEIN C — SET-RIBBON (Referenz /digimon-tcg, gemessen 08.08.): Kacheln 192 breit, r24, Gap 12 · Logo-Zone (img max-h 72, contain) · Name 13.5/700 UPPERCASE · Datum 11.5/600 rgb(77,100,112) · Button 32/r16 · Badges: Pre-Order lila rgb(110,92,224) / Neu orange, 9.5px, UNTEN im Fluss. Markup: productlist/index.tpl (Pilot-Zweig). Filter-Ziele = native Set-Facetten-URLs; Sets ohne Bestand = Info-Kachel ohne Button. --------------------------------------------------------------------------- */ /* Luft-Politur 09.08. (Marcels Wunsch): 48px Hero -> Sets und exakt dieselben 48px von der Kachel-Unterkante zum Filter-/Produktbereich (40 Margin + 8 Scrollbalken-Polster der Reihe = 48). */ body.hc-natliste .hc-nl-sets { max-width: 1280px; margin: 48px auto 40px; padding: 0 28px; } body.hc-natliste .hc-nl-sets-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: 3.84px; text-transform: uppercase; color: var(--hcnl-primary); margin: 0 0 6px; } body.hc-natliste .hc-nl-sets-titel { font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 26px; font-weight: 800; color: var(--hcnl-navy); margin: 0 0 4px; } body.hc-natliste .hc-nl-sets-sub { font-size: 13px; color: var(--hcnl-muted); margin: 0; } /* Kopfzeile + Blaetter-Pfeile (Engine .pk-ribbon-head / .ribbon-arrows, DOM-gemessen 09.08.): Zeile flex/space-between/align-end, gap 20, mb 16; Pfeile 40x40-Kreise weiss mit Inset-Ring, Icon 18px grau, an den Enden deaktiviert (opacity .35). Marcels Wunsch: Pfeile STATT Scrollleiste. */ body.hc-natliste .hc-nl-sets-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 16px; } body.hc-natliste .hc-nl-sets-pfeile { display: flex; flex: 0 0 auto; gap: 8px; } body.hc-natliste .hc-nl-sets-pfeil { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07); color: rgb(125, 148, 159); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .18s ease, box-shadow .18s ease; } body.hc-natliste .hc-nl-sets-pfeil:hover:not([disabled]) { color: var(--hcnl-primary); box-shadow: inset 0 0 0 1px var(--hcnl-primary); } body.hc-natliste .hc-nl-sets-pfeil:focus { outline: 0; } body.hc-natliste .hc-nl-sets-pfeil[disabled] { opacity: .35; cursor: default; } body.hc-natliste .hc-nl-sets-reihe { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; /* Scrollleiste unsichtbar — navigiert wird ueber die Pfeile (Engine-Muster) */ scrollbar-width: none; -ms-overflow-style: none; } body.hc-natliste .hc-nl-sets-reihe::-webkit-scrollbar { display: none; } /* Touch-Ziele auf kleinen Geraeten (Engine-Regel <=560px) */ @media (max-width: 560px) { body.hc-natliste .hc-nl-sets-pfeil { width: 44px; height: 44px; } } /* EXAKT-PORT 09.08. (Loop-Brecher): Alle Werte 1:1 aus der Engine-Kachel .set-tile DOM-gemessen — Aufloesung des Widerspruchs: die "Loecher" der ersten Politur kamen von 4 FEHLENDEN Buttons (Engine hat auf ALLEN 6 einen), nicht von der Hoehe. Ring = INSET-Schatten (Engine hat keinen border). */ body.hc-natliste .hc-nl-set { flex: 0 0 192px; width: 192px; background: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07); border-radius: 24px; padding: 16px 14px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; } body.hc-natliste .hc-nl-set-logo { height: 100px; margin: 30px 0 38px; display: flex; align-items: center; justify-content: center; } body.hc-natliste .hc-nl-set-logo img { max-height: 72px; max-width: 150px; object-fit: contain; } /* Rueckfall fuer Sets ohne eigenes Logo (Engine-Vorbild: dunkles Emblem mit dem Set-Code, z. B. OP17). Verhindert, dass halb Ribbon dasselbe Franchise-Logo zeigt. Text kommt aus dem Namensteil vor dem Mittelpunkt. */ body.hc-natliste .hc-nl-set-emblem { display: flex; align-items: center; justify-content: center; width: 128px; height: 72px; border-radius: 12px; background: var(--hcnl-navy, #0c1e2a); color: #fff; font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .04em; } body.hc-natliste .hc-nl-set-name { min-height: 48px; font-family: var(--font-display, "Epilogue"), sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--hcnl-navy); margin: 0 0 6px; display: flex; align-items: center; justify-content: center; } body.hc-natliste .hc-nl-set-datum { display: block; font-size: 11.5px; font-weight: 600; color: rgb(77, 100, 112); margin: 0 0 6px; } body.hc-natliste .hc-nl-set-filter { height: 32px; margin: 14px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--hcnl-ring); border-radius: 16px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--hcnl-navy); text-decoration: none; white-space: nowrap; transition: border-color .18s ease, color .18s ease; } body.hc-natliste .hc-nl-set-filter:hover { border-color: var(--hcnl-primary); color: var(--hcnl-primary); } /* Ghost-Button (Sets ohne Bestand): gleiche Form wie der aktive Knopf, aber sichtbar INAKTIV — Marcels Befund 09.08. "wirkt sonst wie ein Knopf ohne Funktion". Gleiche Aus-Sprache wie die deaktivierten Ribbon-Pfeile: ausgegraut, Hover tot, Cursor default. */ body.hc-natliste .hc-nl-set-filter-ghost, body.hc-natliste .hc-nl-set-filter-ghost:hover { cursor: default; background: rgba(12, 30, 42, .03); border-color: rgba(12, 30, 42, .08); color: rgb(125, 148, 159); opacity: .65; } body.hc-natliste .hc-nl-set-badge { display: inline-block; margin-top: 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; border-radius: 999px; padding: 3px 10px; } body.hc-natliste .hc-nl-b-pre { background: rgb(110, 92, 224); } body.hc-natliste .hc-nl-b-new { background: var(--hcnl-primary); } /* --------------------------------------------------------------------------- 16) BAUSTEIN D — HERO (Referenz /digimon-tcg, DOM-vermessen 08.08.): Grid 635/541 Gap 48 in .wrap-Flucht (1280/28) · Crumb 13 muted mb22 · Brandline 16 · Logo-H1 (Bild) · Lead 17/300 rgb(77,100,112) mb26 · Quick-Chips 37/r999 -> native Facetten · Trust-Zeilen mit SVG-Haken · Visual 541x340: Glow 595x408 radial-orange blur30 + 3 Sparks + 3 Holo- Karten r18 (Positionen/Schatten aus Referenz). --------------------------------------------------------------------------- */ /* Politur 09.08.: Referenz-Hoehe 664 (Nachmessung: pad 28+28, wrap 574, Rest ~34px Luft unten) — min-height statt Raten. Rueckbau-Runde 09.08. (Marcels Befund "Hintergrundbild fehlt komplett"): Alt-Hero traegt 6 Verlaufs-Schichten (Creme-Fundament + 5 Farbwolken) und eine 2px-Verlaufslinie unten — 1:1 aus .cat-hero uebernommen (DOM-gemessen). */ body.hc-natliste .hc-nl-hero { position: relative; padding: 28px 0; min-height: 664px; overflow: hidden; background: radial-gradient(130% 140% at 90% -20%, rgba(239, 130, 14, .18), rgba(0, 0, 0, 0) 56%), radial-gradient(90% 120% at 6% 110%, rgba(110, 92, 224, .14), rgba(0, 0, 0, 0) 55%), radial-gradient(80% 120% at 78% 0%, rgba(110, 92, 224, .2), rgba(110, 92, 224, 0) 55%), radial-gradient(85% 120% at 10% 100%, rgba(15, 165, 151, .22), rgba(15, 165, 151, 0) 52%), radial-gradient(65% 90% at 96% 92%, rgba(239, 130, 14, .22), rgba(239, 130, 14, 0) 55%), linear-gradient(rgb(243, 239, 229), rgb(236, 230, 218)); } body.hc-natliste .hc-nl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgb(239, 130, 14), rgb(255, 93, 122)); opacity: .55; } body.hc-natliste .hc-nl-hero-wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; } body.hc-natliste .hc-nl-crumb { font-size: 13px; color: rgb(125, 148, 159); margin: 0 0 22px; display: flex; gap: 8px; align-items: center; } body.hc-natliste .hc-nl-crumb a { color: inherit; text-decoration: none; } body.hc-natliste .hc-nl-crumb a:hover { color: var(--hcnl-primary); } /* Fluide Spalten wie die Engine (.cat-hero-grid 1.08fr/0.92fr) statt fester Pixel: bei 1224 Innenbreite ergibt das exakt 635 + 48 + 541 wie gemessen, schrumpft aber mit dem Fenster mit — statt das Visual wegzuschalten. Marcels Befund 09.08.: bei 1278 px Fensterbreite fehlten die Karten. */ body.hc-natliste .hc-nl-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; justify-content: space-between; } /* Politur 09.08.: Referenz-Brandline ist inline (Rect 18) -> line-height 18; Abstand zum Logo bleibt 20 (2 Margin + 18 Logo-mt wie Referenz). */ body.hc-natliste .hc-nl-brandline { display: block; font-size: 16px; line-height: 18px; color: var(--hcnl-navy); margin: 0 0 2px; } /* Referenz-H1-Logo rendert 326x185 (nicht 150) — Nachmessung 09.08. */ body.hc-natliste .hc-nl-hero-logo img { height: 185px; width: auto; max-width: 420px; object-fit: contain; } body.hc-natliste .hc-nl-hero-logo { margin: 18px 0 0; } body.hc-natliste .hc-nl-lead { max-width: 588px; font-size: 17px; font-weight: 300; line-height: 1.55; color: rgb(77, 100, 112); margin: 20px 0 26px; } body.hc-natliste .hc-nl-quick { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; } body.hc-natliste .hc-nl-quick a { height: 37px; display: inline-flex; align-items: center; padding: 0 16px; background: #fff; border: 1px solid var(--hcnl-ring); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--hcnl-navy); text-decoration: none; transition: border-color .18s ease, color .18s ease; } body.hc-natliste .hc-nl-quick a:hover { border-color: var(--hcnl-primary); color: var(--hcnl-primary); } body.hc-natliste .hc-nl-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } body.hc-natliste .hc-nl-trust li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--hcnl-navy); } body.hc-natliste .hc-nl-trust svg { color: var(--hcnl-primary); flex: 0 0 auto; } /* Visual */ /* Innenmasse als PROZENT der Buehne (541x340) -> Szene schrumpft proportional mit. Rechenweg je Wert: Pixel / 541 (waagerecht) bzw. / 340 (senkrecht). Bei voller Breite ergibt das exakt die gemessenen Referenz-Pixel. */ body.hc-natliste .hc-nl-hero-visual { position: relative; width: 100%; max-width: 541px; /* Buehne fuer das Karussell: eine echte Produktkachel ist bei 289 Breite 503 hoch (gemessen: quadratisches Bild + Beschriftung) - plus Luft fuer Schatten und die Punkte-Leiste darunter. */ height: 540px; justify-self: end; } body.hc-natliste .hc-nl-glow { position: absolute; left: -4.99%; top: -10%; width: 109.98%; height: 120%; background: radial-gradient(circle at 55% 45%, rgba(239, 130, 14, .45), rgba(239, 130, 14, 0) 68%); filter: blur(30px); pointer-events: none; } /* --------------------------------------------------------------------------- HERO-KARUSSELL (3D-Coverflow) - Optik aus dem Design-Modul "Hero-Karussell (Demo-Modul)", Inhalt sind unsere echten Produktkacheln. Kernidee: Die VORDERE Kachel steht ungedreht (rotateY 0) - dort ist alles lesbar und der Warenkorb-Knopf normal bedienbar. Die uebrigen staffeln sich nach hinten. --d = Abstand zur Mitte (0 = vorn), wird per JS gesetzt. --------------------------------------------------------------------------- */ body.hc-natliste .hc-nl-cv { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 45%; } body.hc-natliste .hc-nl-cv-i { position: absolute; left: 50%; top: 50%; width: 78%; max-width: 289px; transform-style: preserve-3d; transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * 52%)) translateZ(calc(max(var(--d, 0), var(--d, 0) * -1) * -105px)) rotateY(calc(var(--d, 0) * -21deg)); opacity: calc(1 - max(var(--d, 0), var(--d, 0) * -1) * .26); transition: transform .55s cubic-bezier(.22, .9, .28, 1), opacity .55s; } body.hc-natliste .hc-nl-cv-i .productbox { box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .6); transition: box-shadow .4s ease, border-color .4s ease; } /* Hintere Kacheln sind reine Kulisse: der GANZE Platzhalter ist durchlaessig, damit Klicks die darunterliegenden Pfeile erreichen (Marcels Befund 10.08.) */ body.hc-natliste .hc-nl-cv-i:not(.is-front) { pointer-events: none; } body.hc-natliste .hc-nl-cv-i:not(.is-front) .productbox:hover { transform: none; } /* SICHERUNG gegen die WEISSE Kachel bei Mauskontakt (Marcels Befund 10.08.): NOVA blendet bei Hover img.first aus und img.second ein. Dessen Wrapper ist aber per Abschnitt 4 ausgeblendet (:not(.first-wrapper)), damit das eigene Karussell den einzigen Bildweg hat. In der Liste deckt eine Karussell-Ebene das ab — im Hero gab es sie nicht, also blieb nur die weisse Box. Das Erstbild bleibt deshalb hier IMMER stehen; die Karussell-Ebenen (deckend, background:#fff) legen sich beim Durchblaettern darueber. */ body.hc-natliste .hc-nl-cv-i .productbox-images img.first { opacity: 1 !important; } body.hc-natliste .hc-nl-cv-i.is-front .productbox { border-color: var(--hcnl-primary); box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .5), 0 0 44px -10px rgba(239, 130, 14, .55); } /* Blaetter-Pfeile wie im Set-Ribbon (40px, Inset-Ring) */ body.hc-natliste .hc-nl-cv-nav { position: absolute; top: 50%; transform: translateY(-50%); /* ueber den Kacheln: das Skript vergibt dort bis Ebene 40 */ z-index: 60; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07), 0 12px 26px -18px rgba(0, 0, 0, .6); color: rgb(125, 148, 159); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .18s ease, background .18s ease; } body.hc-natliste .hc-nl-cv-nav:hover { background: var(--hcnl-primary); color: rgb(42, 17, 0); } body.hc-natliste .hc-nl-cv-nav:focus { outline: 0; } body.hc-natliste .hc-nl-cv-nav.prev { left: -6px; } body.hc-natliste .hc-nl-cv-nav.next { right: -6px; } /* Punkte unter der Buehne */ body.hc-natliste .hc-nl-cv-dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; gap: 6px; justify-content: center; z-index: 60; } /* Punkte = reine Standanzeige, nicht anklickbar (nur die Pfeile steuern) */ body.hc-natliste .hc-nl-cv-dots { pointer-events: none; } body.hc-natliste .hc-nl-cv-dots > * { display: block; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(12, 30, 42, .12); transition: width .25s ease, background .25s ease, border-radius .25s ease; } body.hc-natliste .hc-nl-cv-dots > *.on { width: 22px; border-radius: 4px; background: var(--hcnl-primary); } body.hc-natliste .hc-nl-cv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } @media (prefers-reduced-motion: reduce) { body.hc-natliste .hc-nl-cv-i { transition: none; } } /* Engine-Umbruch (.cat-hero @1080): einspaltig, Bild UEBER den Text - NICHT ausblenden. Ersetzt die alte Regel 'unter 1280 weg' (Marcels Befund). */ @media (max-width: 1079px) { body.hc-natliste .hc-nl-hero-grid { grid-template-columns: 1fr; gap: 30px; } body.hc-natliste .hc-nl-hero-visual { order: -1; justify-self: center; margin: 0 auto; } } @media (max-width: 560px) { /* Kachel 236 breit -> 236 Bild + ~214 Beschriftung = ~450 */ body.hc-natliste .hc-nl-hero-visual { height: 486px; } body.hc-natliste .hc-nl-cv-i { max-width: 236px; } body.hc-natliste .hc-nl-cv-nav { width: 44px; height: 44px; } } /* --------------------------------------------------------------------------- 17) POLITUR 09.08. — NEU-BADGE auf der Kachel. Serverseitig aus $Artikel->cNeu (Wawi "Neu bis"), Markup in item_box.tpl. Badge-Standard: UNTEN im Fluss (nach der Verfuegbarkeitszeile), orange Pille. --------------------------------------------------------------------------- */ body.hc-natliste .hc-nl-neu { display: inline-block; align-self: flex-start; margin: 4px 0 0; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--hcnl-primary); border-radius: 999px; padding: 3px 9px; } /* --------------------------------------------------------------------------- 18) TOOLBAR IM ALT-LOOK (Engine .toolbar DOM-gemessen 09.08., Marcels Wunsch "Bereich ueber den Produkten wie in der alten Version"): Zeile 44 hoch, mb 18 · links Zaehler 14.5/400 rgb(77,100,112) · rechts Sort-Pille (40/r999/Inset-Ring, 13.5/600) + Ansichts-Pille (Sektion 13). Template-treu: NOVA-Markup bleibt, "Artikel pro Seite" + H1 + Trenner-HR nur visuell weg (H1 als sr-only fuer SEO/A11y erhalten). --------------------------------------------------------------------------- */ /* H1 "Digimon Card Game" nur visuell verstecken (Alt zeigt dort keinen Titel; Branding kommt aus dem Hero) */ body.hc-natliste #result-wrapper .title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Toolbar-Zeile als eine Flex-Reihe */ body.hc-natliste #result-wrapper .row[class*="productlist-page-nav-header"] { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 0 0 18px; } body.hc-natliste #result-wrapper .row[class*="productlist-page-nav-header"] > .col { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } /* Zaehler ("Artikel 1 - 3 von 3") nach LINKS, Optik wie Engine .results-count */ body.hc-natliste #result-wrapper .row[class*="productlist-page-nav-header"] > .productlist-item-info { order: -1; margin-right: auto; font-size: 14.5px; font-weight: 400; color: rgb(77, 100, 112); } /* Dropdown-Gruppe: flex mit Abstand, "Artikel pro Seite" wie im Alt nicht sichtbar */ body.hc-natliste #result-wrapper .col.displayoptions { display: flex; align-items: center; gap: 10px; } body.hc-natliste #result-wrapper .filter-type-FilterItemLimits { display: none; } /* Sortierung als Pille (Engine .sortish select: 40/r999/Inset-Ring, 13.5/600) */ body.hc-natliste #result-wrapper .filter-type-FilterItemSort > .dropdown-toggle { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; /* !important: Bootstraps btn-Regeln nullen den Schatten sonst */ box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07) !important; font-size: 13.5px; font-weight: 600; color: var(--hcnl-navy); display: inline-flex; align-items: center; gap: 8px; } body.hc-natliste #result-wrapper .filter-type-FilterItemSort > .dropdown-toggle::after { color: rgb(125, 148, 159); font-size: 13px; } body.hc-natliste #result-wrapper .filter-type-FilterItemSort > .dropdown-toggle:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07); } /* Trenner-HR direkt unter der Toolbar passt nicht zum Alt-Look */ body.hc-natliste #result-wrapper .row[class*="productlist-page-nav-header"] + hr { display: none; } /* --------------------------------------------------------------------------- 19) MOBIL-ZONE (<=839px) — Marcels Befunde vom 10.08.2026, alle am 390er-DOM vermessen. Desktop bleibt unberuehrt (jede Regel steht in der Media Query). --------------------------------------------------------------------------- */ @media (max-width: 839px) { /* B2 — Hero-Karussell raus. Marcels Entscheid: "raus auf mobile, in desktop bleibt". Grund: es stand VOR dem Branding (order -1) und kostete 486 px, bevor der Kunde die Seite erkennt; die drei Produkte stehen 500 px weiter unten ohnehin in der Liste. Hausregel: Karussells mobil verboten. */ body.hc-natliste .hc-nl-hero-visual { display: none; } /* B5 — Sets-Kopf stapeln. Bei 390 blieben dem Text nur 203 px (Pfeile nahmen 96), Titel brach auf 3 Zeilen und die Pfeile hingen neben der letzten Textzeile. Jetzt: Text volle Breite, Pfeile darunter rechts. */ body.hc-natliste .hc-nl-sets-kopf { flex-direction: column; align-items: stretch; gap: 12px; } body.hc-natliste .hc-nl-sets-pfeile { align-self: flex-end; } /* B4 — genau ZWEI ganze Set-Kacheln sichtbar (Marcels Vorgabe). Die Breite faellt aus der sichtbaren Reihe: seit B7 sind das bei 390 px 358 - 12 Gap = 346 / 2 = 173 je Kachel (davor 153,5 bei 28er Rand). Der Blaetter-Takt im JS rechnet 2 x (Kachelbreite + Gap) aus dem ECHTEN Mass, nicht aus einer festen Zahl — er wandert also automatisch mit und landet immer auf einer Kachelkante, nie im Zwischenraum. */ body.hc-natliste .hc-nl-set { flex: 0 0 calc((100% - 12px) / 2); width: auto; /* Flex-Elemente haben min-width:auto und schrumpfen sonst nicht unter ihren Inhalt - der Filter-Knopf (132 px) hielt die Kachel bei 162 statt 153,5. */ min-width: 0; padding: 16px 10px 12px; } /* Knopf mitschrumpfen lassen, sonst sprengt er die schmalere Kachel */ body.hc-natliste .hc-nl-set-filter { max-width: 100%; padding: 0 8px; font-size: 11px; } body.hc-natliste .hc-nl-set-logo img { max-width: 120px; } /* B3 — Werkzeugleiste. Sie stand auf flex-wrap:nowrap (fuer Desktop) und schob Sortierung + Ansichtsknoepfe auf x=345..632, also komplett aus dem 390er-Fenster. Jetzt bricht sie um. */ body.hc-natliste #result-wrapper .row[class*="productlist-page-nav-header"] { flex-wrap: wrap; gap: 10px; } body.hc-natliste #result-wrapper .col.displayoptions { width: 100%; flex-wrap: wrap; justify-content: flex-end; } body.hc-natliste #result-wrapper .row[class*="productlist-page-nav-header"] > .productlist-item-info { width: 100%; margin-right: 0; } /* B3b — Filter-Kopf ohne Filter ausblenden. NOVA versteckt die Facettenboxen unter 992 px (d-none d-lg-block); uebrig blieb die Ueberschrift "Filter" mit "Alle zuruecksetzen" - eine Zusage ohne Einloesung. Der eigene mobile Filterweg ist ein eigener Schritt der Mobile-Spur. Die aktiven Filter-Chips bleiben sichtbar (die liegen in #result-wrapper, nicht in der Sidebar). */ body.hc-natliste .hc-nl-sidebar { display: none; } body.hc-natliste .hc-nl-zweispalter { display: block; padding: 0 16px; } /* B7 (Marcels Befund 10.08.: "Produktkacheln wirken klein") — EINE Kante. Gemessen bei 390: von 390 px gingen 88 px an Raendern verloren (28 aussen am Zweispalter + nochmal 16 innen an NOVAs #result-wrapper) = 23 % der Bildschirmbreite, bevor die erste Kachel beginnt. Schlimmer als die Groesse war der Versatz: Brotkrume/Hero/Logo/Set-Kacheln begannen bei x=28, die Werkzeugleiste und die Produktkacheln aber bei x=44 — zwei Kanten auf einer Seite. Jetzt liegen alle sechs Bezugspunkte auf 16. Ergebnis: Produktkachel 145 -> 173, Bild 143 -> 171, Set-Kachel 161 -> 173 (Set- und Produktkachel damit exakt gleich breit, sie fluchten). */ body.hc-natliste .hc-nl-hero-wrap { padding-left: 16px; padding-right: 16px; } body.hc-natliste .hc-nl-sets { padding-left: 16px; padding-right: 16px; } /* !important ist hier NICHT Bequemlichkeit: der 16-px-Rand am #result-wrapper steht selbst auf !important. Gegenprobe am Live-DOM — ohne !important bleibt der berechnete Wert auf 16px, egal ob 0, 3px oder Kurzform. */ body.hc-natliste #result-wrapper { padding-left: 0 !important; padding-right: 0 !important; } /* Bildpolster halbieren: 12 px auf einer 173er Kachel sind 14 % der Breite, die dem Produkt fehlen. Desktop behaelt die 12 (Regel steht in der Query). */ body.hc-natliste #product-list .productbox-image.square > .inner { padding: 6px; } /* Reihenabstand war ein Desktop-Wert (64 px) und riss mobil ein Loch zwischen die Reihen. */ body.hc-natliste #product-list .product-wrapper { margin-bottom: 24px; } /* B6 (Nebenbefund 10.08.) — Merken-Herz war mobil 34x44: die globale Tap-Regel (:where(button){min-height:44px}) streckte es, und border-radius:50% macht aus einem nicht-quadratischen Kasten eine Ellipse. Jetzt 34x34 rund; die 44er-Tastflaeche kommt ueber ::after (rundherum ist Luft, der Trick traegt hier). Wunschzettel-Funktion selbst unveraendert. */ body.hc-natliste #product-list .productbox .btn.wishlist { height: 34px; min-height: 0; position: relative; } body.hc-natliste #product-list .productbox .btn.wishlist::after { content: ""; position: absolute; inset: -5px; } } /* --------------------------------------------------------------------------- 20) MOBILER FILTER-DIALOG (<=839px) — Marcels Befund 10.08.2026: "der Bereich in dem der Filter angezeigt wird weicht von dem des Desktop ab, da sind weniger Filter und unser Design ist nicht wirklich vorhanden". Gemessen und bestaetigt: NOVAs Serien-Dialog #collapseFilter zeigte Sortierung (12) · Verfuegbarkeit (1) · Alle Hersteller (2) · Preisspanne — die Desktop-Sidebar dagegen Verfuegbarkeit (1) · Preisspanne · Set (3) · Franchise (1) · Produktart (2) · Sprache (1) · Zustand (1). Also FUENF fehlende Merkmalfilter und einer zu viel. Ursache ist ein Quellenwechsel: die Sidebar rendert das Boxen-System ({$boxes.left}), NOVAs mobiler Dialog eine eigene Vorlage, die Merkmalfilter gar nicht kennt. LOESUNG OHNE ZWEITEN FILTERWEG: Die vollstaendige Sidebar liegt mobil bereits im HTML (im 390er-DOM nachgewiesen, alle 7 Facetten mit Eintraegen) — sie war nur ausgeblendet. Sie wird deshalb NICHT nachgebaut, sondern selbst zum Vollbild-Dialog. Gleiche Quelle wie Desktop = automatisch gleiche Filter, gleiche Links, gleiche Zaehler; und weil es dieselben Elemente sind, greift die Pillen-Optik aus Abschnitt 12 unveraendert. KEIN DOM-Umzug: Kopf/Fuss werden vom JS EINMAL in die Sidebar gehaengt und sind oberhalb 839 px unsichtbar, der Koerper-Wrapper laeuft dort auf display:contents und ist fuer das Layout damit gar nicht vorhanden. Dadurch ueberlebt der Aufbau jeden Breitenwechsel, ohne dass der Desktop je seine Sidebar verliert. --------------------------------------------------------------------------- */ /* Desktop: die neuen Teile existieren, aber wirken nicht */ body.hc-natliste .hc-nl-fdialog-kopf, body.hc-natliste .hc-nl-fdialog-fuss { display: none; } body.hc-natliste .hc-nl-fdialog-koerper { display: contents; } @media (max-width: 839px) { /* Die Sidebar SELBST ist der Dialog (Abschnitt 19 haelt sie sonst aus) */ body.hc-natliste .hc-nl-sidebar.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 2000; width: auto; background: #fff; } body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fkopf { display: none; } body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fdialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 16px; border-bottom: 1px solid rgba(12, 30, 42, .09); } body.hc-natliste .hc-nl-fdialog-titel { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--hcnl-ink, #0c1e2a); } /* Schliessen-Kreis wie die Blaetterpfeile (40px, Inset-Ring). min-height:0 gegen die globale Tap-Regel, sonst wird der Kreis oval. */ body.hc-natliste .hc-nl-fdialog-zu { flex: 0 0 40px; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: rgb(125, 148, 159); box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .07); display: inline-flex; align-items: center; justify-content: center; } body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fdialog-koerper { display: block; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px; } /* NOVA versteckt die Facettenboxen unter 992 px per "d-none d-lg-block" (Bootstrap setzt display:none !important — deshalb hier !important). NUR die Filterboxen zurueckholen: die Abschnitte box-wishlist und box-compare tragen d-none OHNE d-lg-block, sind also bewusst auf jeder Breite aus und bleiben aus. */ body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fdialog-koerper > .box { display: block !important; } body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fdialog-koerper > .box + .box { margin-top: 10px; } body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fdialog-koerper > .box.mb-5 { margin-bottom: 0; } body.hc-natliste .hc-nl-sidebar.is-open .hc-nl-fdialog-fuss { display: flex; gap: 10px; flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(12, 30, 42, .09); background: #fff; } body.hc-natliste .hc-nl-fdialog-fuss > * { flex: 1 1 0; height: 48px; border-radius: 24px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } body.hc-natliste .hc-nl-fdialog-reset { color: var(--hcnl-ink, #0c1e2a); background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .14); } body.hc-natliste .hc-nl-fdialog-fertig { border: 0; color: rgb(42, 17, 0); background: var(--hcnl-primary); } /* Seite hinter dem Dialog nicht mitscrollen lassen */ body.hc-natliste.hc-fdialog-offen { overflow: hidden; } /* NOVAs Serien-Dialog nur dann still, wenn der eigene wirklich uebernommen hat. Die Klasse setzt das JS ausschliesslich, wenn Facetten vorhanden sind — bei mobiler Geraetekennung rendert JTL das Boxen-System naemlich gar nicht (Marcels Befund auf echtem Android). Ohne diese Kopplung waeren beide Wege gleichzeitig tot. */ body.hc-natliste.hc-eigener-filter #collapseFilter { display: none !important; } } /* --------------------------------------------------------------------------- 18) STANDARD-AENDERUNG 10.08.2026 (Marcel, Code 3010) — Hero-Karussell 80 % + Pfeile an den Modulrand. Variante B: die GANZE Buehne skaliert uniform per transform (auch Schrift, Preis, Kaufknopf) — die Innenmasse oben bleiben unveraendert, dadurch identische Proportionen, nur kleiner. Gilt ab 561px; der Mobile-Block (<=560: Kachel 236 / Buehne 486) bleibt bewusst unberuehrt. Pfeile: raus aus dem Kartenfaecher an den Aussenrand des Moduls, gestaffelt nach Fensterbreite, damit der rechte Pfeil nie aus dem Viewport ragt und kein Quer-Scroll entsteht. Abnahme-Referenz: Karussell_Vergleich_3-Varianten .png (Variante B). Der Takt 2,8 s -> 3,8 s liegt in hc-natliste.js (TAKT). */ @media (min-width: 561px) { body.hc-natliste .hc-nl-hero-visual { transform: scale(.8); transform-origin: 100% 50%; } body.hc-natliste .hc-nl-cv-nav.prev { left: -12px; } body.hc-natliste .hc-nl-cv-nav.next { right: -12px; } } /* einspaltig-zentriert (561-1079): von der Mitte aus schrumpfen, sonst wandert die Buehne nach rechts aus der Achse */ @media (min-width: 561px) and (max-width: 1079px) { body.hc-natliste .hc-nl-hero-visual { transform-origin: 50% 50%; } } @media (min-width: 700px) { body.hc-natliste .hc-nl-cv-nav.prev { left: -24px; } body.hc-natliste .hc-nl-cv-nav.next { right: -24px; } } /* ab 1600 ist rechts vom Modul sicher Luft fuer die volle Auslage */ @media (min-width: 1600px) { body.hc-natliste .hc-nl-cv-nav.prev { left: -100px; } body.hc-natliste .hc-nl-cv-nav.next { right: -100px; } } /* --------------------------------------------------------------------------- 19) 10.08.2026 — JTL-Kategorien-Filterbox aus der nativen Sidebar nehmen. Seit die Wawi-Kategorien fuer den Shop aktiv sind, rendert JTL in der Filter-Sidebar zusaetzlich eine Box "Kategorien" (Klasse box-categories), die nur die beiden Ober-Geschwister "Sammelkarten"/"Sammelkarten-Zubehoer" zeigt — nicht die Produktarten DIESER Seite. War nicht im abgenommenen Standard und ist auf einer Franchise-Kategorieseite redundant (Navigation macht spaeter die Hauptnav). Nur DIESE Box faellt; die echten Facetten (box-filter-price / box-filter-characteristics) bleiben unberuehrt. Reine Optik, kein Zustand. Abnahme: Filter beginnt mit "Preisspanne", 7 Facetten bleiben, Kategorie-Facette der Suche unveraendert. */ body.hc-natliste #sidepanel_left .box-categories { display: none !important; } /* --------------------------------------------------------------------------- 19b) 10.08.2026 — Set-Filter aus der Sidebar nehmen, WENN ein Set-Ribbon da ist (Marcels Befund: doppelte Set-Navigation, dazu schwammen die Starter-Decks im Filter mit). Das Ribbon ist die bessere Variante: Logos, Release-Datum und ausgegraute Kacheln fuer Sets ohne Bestand. Starter-Decks bleiben ueber "Produktart" erreichbar. ⚠️ Das MERKMAL bleibt aktiv — nur die Sidebar-Box faellt. Die Ribbon-Knoepfe sind Set-Merkmal-Filter-URLs; ein Abschalten des Merkmals im Admin wuerde sie toeten. Deshalb Ebene 5 (Optik) statt Ebene 2. Die :has()-Kopplung sorgt dafuer, dass Seiten OHNE Ribbon (z. B. Gundam, solange 'sets' dort leer ist) ihren Set-Filter behalten. Rueckholbar: diese eine Regel entfernen. */ body.hc-natliste:has(.hc-nl-sets) #sidepanel_left #sidebox101-2 { display: none !important; } /* --------------------------------------------------------------------------- 20) 10.08.2026 — Filter-Box beim Anklicken beruhigen (Marcels Befund: "springt in den Soll-Zustand"). Zwei ueberlagerte Ursachen: (a) eigene Regel .box:has(> button:hover) faerbte die GANZE Box orange, solange die Maus auf dem Header lag -> beim Wegnehmen "Sprung" zurueck auf Grau. Jetzt dezentes Grau (.14) = sichtbares, aber ruhiges Feedback ohne Farbwechsel. (b) NOVA/Bootstrap .btn:focus legte zusaetzlich einen gelben 0.2rem-Glow (rgba(248,191,0,.25)) um den Aufklapp-Button -> in der nativen Sidebar unerwuenscht, hier abgeschaltet. Der orangene Slider selbst bleibt unberuehrt (gehoert zur Preisspanne). */ body.hc-natliste .hc-nl-sidebar .box:has(> button:hover) { box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .14) !important; } body.hc-natliste .hc-nl-sidebar .btn-filter-box:focus, body.hc-natliste .hc-nl-sidebar .btn-filter-box.focus { box-shadow: none !important; outline: 0 !important; } /* --------------------------------------------------------------------------- 21) 10.08.2026 — Mobiler Filter-Dialog: Parität, Fußzeile, Opener-Mitte (Marcels drei Befunde auf /One-Piece-Card-Game_1, gemessen mit echter Android-Gerätekennung — Fensterbreite allein misst Fiktion.) AUSGANGSLAGE: Bei echter mobiler Gerätekennung rendert JTL das Boxen-System gar nicht (#sidepanel_left = 1 Box, keine Facetten). Der eigene Dialog aus Abschnitt 17 hat deshalb seinen Guard (hc-eigener-filter bleibt AUS) und NOVAs Dialog #collapseFilter übernimmt. Der ist inhaltlich und optisch nicht auf unserem Stand — genau das behebt dieser Abschnitt. Bewusst KEIN zweiter Eigenbau: "nativ zuerst", NOVAs Weg bleibt tragend. a) PARITÄT — drei Gruppen raus (gemessen: Dialog hatte 9, jetzt 6) "Alle Kategorien" : gleiche Begründung wie Abschnitt 19 (zeigt nur die Ober-Geschwister, nicht die Produktarten der Seite). "Alle Hersteller" : in der Desktop-Sidebar gar nicht vorhanden — mobil wäre es ein Filter, den es am Desktop nicht gibt. "Set" : gleiche Begründung wie 19b — das Set-Ribbon ist die bessere Navigation. Deshalb auch dieselbe :has(.hc-nl-sets)-Kopplung: Seiten OHNE Ribbon behalten ihren Set-Filter. Anker ist das data-target der Gruppe (#filter-collapse-) — stabil, im Gegensatz zu einer Position im Akkordeon, die sich mit jeder entfernten Gruppe verschiebt. ⚠️ Bewusst Ebene 5 (CSS) statt Ebene 2 (/admin/navfilter): die Schalter kategoriefilter/herstellerfilter wirken SHOPWEIT und würden auch der Suchergebnisseite ihre Kategorie-Facette nehmen. Genau die wollte Abschnitt 19 ausdrücklich unangetastet lassen. Scope body.hc-natliste hält die Änderung auf den nativen Listen. b) FUSSZEILE — auf den Hausstandard aus Abschnitt 17 (Z. 1638–1666). Gemessen vorher: "Abbrechen" 129×44 (a.btn, 14px, Radius 999) neben "18 Artikel ansehen" 188×53 (button, 15px, min-width 150) — zwei verschiedene Höhen, zwei verschiedene Breiten, NOVA-Optik. Nachher: beide 167×48, Radius 24, gleiche Schrift; Abbrechen als Inset-Ring auf Weiß, Fertig orange gefüllt — identisch zu .hc-nl-fdialog-reset / .hc-nl-fdialog-fertig. env(safe-area-inset-bottom) wegen der Home-Leiste auf iPhone. c) OPENER — "Filter und Sortierung" saß 41 px zu weit rechts (x 98, Breite 261, Mitte 229 gegen Viewport-Mitte 188). Ursache ist NICHT der Knopf, sondern .displayoptions mit justify-content:flex-end — am Desktop richtig, in der Handy-Zone ist der Knopf das einzige Kind. ⚠️ Der Befund nannte Digimon als gutes Gegenbeispiel; nachgemessen ist /Digimon-Card-Game_1 exakt gleich verschoben (x 98, w 261). Die Regel repariert beide Seiten. ⚠️ NUR Compact-Zone (<600px). Ab 600 (Medium/Tablet) rendert JTL in .displayoptions VIER Kinder (Filter · Sortierung · Limit · unser Ansichten-Umschalter) und der eigene Dialog aus Abschnitt 17 übernimmt ohnehin (Boxen sind dort vorhanden). Gemessen bei 768: ein center hätte die ganze Werkzeugleiste 163 px nach links gezogen (Öffner x 343 → 180) — eine Änderung an abgenommenem Bestand, die niemand bestellt hat. Deshalb steht diese eine Regel in einem eigenen 599er-Block, nicht im 839er unten. Breakpoints laut Deep-Research: Compact <600 / Medium 600–839 / Expanded 840+. !important nur dort, wo es nachgewiesen nötig ist: der Vier-Zeilen-Test (ohne / mit) zeigte für width, border-radius, display, color, background und justify-content, dass die Fassung ohne wirkungslos bleibt (129,6 → 166,7 bzw. flex-end → center). Ein CSSOM-Scan fand die überstimmende Regel nicht — messen war billiger als suchen. Alle übrigen Deklarationen stehen bewusst ohne. --------------------------------------------------------------------------- */ /* --- c) Werkzeugleiste: Ansichten links, Filter rechts — NUR Compact (<600) Marcel, 11.08.2026: "filter auf der rechten seite und am rechten rand, und die ansichten butten auf der linken seite am linken rand, aber alles auf einer hoehe wie jetzt". ⚠️ Diese Regel LOEST DIE VORHERIGE FASSUNG AB, die den Knopf zentriert hat. Die stammte aus der Zeit, als er das einzige Kind der Leiste war — seit dem Ansichts-Umschalter (hc-natliste.js, ensureViews) sind es zwei. Bewusst nur EINE justify-content-Regel fuer .displayoptions, damit nicht zwei widersprechende Wahrheiten im Blatt stehen. order dreht die DOM-Reihenfolge um: #improve_search (Filter) steht im Markup VOR .hc-nl-views, soll aber rechts sitzen. Gemessen @375: Ansichten 16..164, Filter 264..359, beide auf y 1470 — Container 16..359, also beide exakt buendig am jeweiligen Rand. */ @media (max-width: 599px) { body.hc-natliste .hc-nl-main .displayoptions { justify-content: space-between !important; } body.hc-natliste .hc-nl-main .displayoptions .hc-nl-views { order: 1; } body.hc-natliste .hc-nl-main .displayoptions #improve_search { order: 2; } } @media (max-width: 839px) { /* --- a) Parität: drei Gruppen aus NOVAs Dialog nehmen ------------------- */ body.hc-natliste #collapseFilter li.snippets-filter-mobile-item:has(#filter-collapse-Alle-Kategorien), body.hc-natliste #collapseFilter li.snippets-filter-mobile-item:has(#filter-collapse-Alle-Hersteller) { display: none; } body.hc-natliste:has(.hc-nl-sets) #collapseFilter li.snippets-filter-mobile-item:has(#filter-collapse-Set) { display: none; } /* --- b) Fußzeile auf Hausstandard --------------------------------------- */ body.hc-natliste #collapseFilter .productlist-filter-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(12, 30, 42, .09); background: #fff; } body.hc-natliste #collapseFilter .snippets-filter-mobile-buttons { flex-wrap: nowrap; gap: 10px; margin: 0; } body.hc-natliste #collapseFilter .snippets-filter-mobile-buttons > .col { flex: 1 1 0; max-width: none; padding: 0; } body.hc-natliste #collapseFilter .snippets-filter-mobile-buttons .btn { width: 100% !important; height: 48px; min-height: 48px; min-width: 0; padding: 0 12px; font-size: 14px; font-weight: 700; border-radius: 24px !important; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none; } body.hc-natliste #collapseFilter .snippets-filter-mobile-buttons .btn-outline-primary { border: 0 !important; color: #0c1e2a !important; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(12, 30, 42, .14); } body.hc-natliste #collapseFilter .snippets-filter-mobile-buttons .btn-primary { border: 0 !important; color: rgb(42, 17, 0) !important; background: var(--hcnl-primary, #ef820e) !important; } } /* --------------------------------------------------------------------------- 22) 10.08.2026 — Ansichts-Umschalter mobil: Tastflaeche auf 44 px. Die drei Knoepfe kommen mobil aus ensureViews() in hc-natliste.js, weil das Template (productlist/layout_options.tpl) sie bei mobiler Geraetekennung nicht rendert. Gemessen waren sie dort 38x44 — die HOEHE hatte bereits die globale Tap-Regel, die BREITE nicht. 44x44 ist der Fingerflaechen-Standard (Deep-Research Mobil-Dimensionierung: 44-48 px). Desktop bleibt bewusst bei 38x36 — dort ist es eine Maus-Zielflaeche und der abgenommene Stand. Deshalb steht die Regel im 839er-Block. Kein eigener Umbruch noetig: .displayoptions ist flex-wrap:wrap, und Filterknopf (260) + Umschalter passen nicht nebeneinander in 375 — der Umschalter faellt von selbst in eine zweite Zeile. Beide Zeilen sind durch Abschnitt 21c mittig, der Filterknopf bleibt also zentriert wie gefordert (nachgemessen: Abweichung 0 px in beiden Zeilen). --------------------------------------------------------------------------- */ @media (max-width: 839px) { body.hc-natliste .hc-nl-view { width: 44px; min-width: 44px; } } /* --------------------------------------------------------------------------- 23) 10.08.2026 — Werkzeugleiste auf EINE Linie, Zaehler darunter (Marcel). Marcels Wunsch: "filter und sortieren neben den ansicht kacheln, das alles auf einer linie ist, und ueber 'Artikel 1-18'". Dazu: "benenne den schalter in einfach nur Filter um mit dem kleinen filter Symbol. der rest kann raus" — also Trichter + Wort, ohne Aufklapp-Pfeil. WARUM DIE UMBENENNUNG NOETIG WAR (gemessen, nicht geschaetzt): mit "Filter und Sortierung" braucht der Knopf 260 px, die drei Ansichten 148 — zusammen 408 bei 343 nutzbarer Breite. Auch zusammengestaucht blieb es zu breit: Polster 16 → 392, Polster 12 + 13px Schrift → 360. Selbst OHNE die Listenansicht (Ansichten dann 100) waeren es noch 340 — das passt bei 375, aber nicht bei 360. Erst die kurze Beschriftung loest es sauber: Knopf 95 + 8 + 148 = 251, also Luft auf JEDER Matrixbreite. Nebenbefund, der die Umbenennung stuetzt: bei Desktop-/Tablet-Kennung heisst derselbe Knopf ohnehin schon "Filter" (117 px, gemessen @768). Die lange Beschriftung war die MOBILE Ausnahme — die Aenderung stellt Gleichstand her. Die Sortierung geht nicht verloren: im geoeffneten Dialog ist sie die erste Gruppe, die Ueberschrift lautet weiterhin "Filter und Sortierung", und der Knopf traegt sie als aria-label (siehe hc-natliste.js). ⚠️ NUR Compact-Zone (<600). Ab 600 rendert JTL eine andere Leiste (vier Kinder: Filter · Sortierung · Limit · Ansichten) und der Knopf heisst dort schon "Filter". Gegengeprueft @768: mit diesem Block bit-genau unveraendert. Das ist dieselbe Lehre wie in Abschnitt 21c — eine Regel gehoert in die Zone, in der ihre Voraussetzung gilt, nicht in die, in der man gerade arbeitet. Gemessen nachher: @375 Knopf 95 + Ansichten 148, beide auf y 1470, Block 62..313, Mitte 188 = Viewport-Mitte, Zaehler auf y 1532 also darunter. @360 Block 55..305, Mitte 180 = Viewport-Mitte, Raender 55/55 symmetrisch. Kein Querlauf. Knopfhoehe 52 (Fingerflaeche). order:1 braucht !important — der Vier-Zeilen-Test zeigte: ohne bleibt der Zaehler auf order -1 (y 1470), mit springt er auf y 1532. Ein CSSOM-Scan fand die ueberstimmende Regel wieder nicht; messen war billiger als suchen. --------------------------------------------------------------------------- */ @media (max-width: 599px) { /* Aufklapp-Pfeil raus ("der rest kann raus") — er ist ein ::after mit Font-Awesome-Glyphe, kein eigenes Element. */ body.hc-natliste #js-filters::after { display: none; } /* Knopf auf Inhaltsbreite statt Blockbreite, damit die Ansichten daneben passen. gap 8 haelt Trichter und Wort zusammen. */ body.hc-natliste #js-filters { width: max-content; min-width: 0; padding-left: 16px; padding-right: 16px; gap: 8px; justify-content: center; } /* Beide Bedienelemente in eine Zeile. flex-wrap bleibt als Netz: sollte eine kuenftige Breite doch zu eng werden, bricht es um statt ueberzulaufen. Die Zentrierung selbst kommt aus Abschnitt 21c. */ body.hc-natliste .hc-nl-main .displayoptions { flex-wrap: wrap; gap: 8px; align-items: center; } /* "Artikel 1 - 18 von 18" unter die Bedienelemente (stand auf order -1). */ body.hc-natliste .hc-nl-main .productlist-item-info { order: 1 !important; } } /* --------------------------------------------------------------------------- 24) 10.08.2026 — Hero mobil mittig statt linksbuendig (Marcel). "den teil im hero haette ich gerne auf dem mobile mittig zentriert anstatt links buendig" — betrifft Brandline, Logo, Fliesstext, die beiden Chips und die drei Trust-Zeilen. ENTSCHEIDUNG ZU DEN TRUST-ZEILEN (Marcel: "wir gehen deiner Empfehlung nach"): Der Block wird als GANZES zentriert, die Zeilen bleiben untereinander buendig. Zentriert man jede Zeile einzeln, stehen die Haken bei 65 / 84 / 61, weil die Texte unterschiedlich lang sind — die linke Kante franst sichtbar aus. Mit width:max-content + margin-inline:auto sitzen alle drei Haken exakt auf 61 und der Block trotzdem mittig (61..314 bei 375). ⚠️ margin-inline:auto am Fliesstext ist NOETIG, nicht kosmetisch: .hc-nl-lead hat max-width:588px bei margin:0. Ohne die Regel klebt der Absatz ab ~600px Breite links (gemessen @768: Kasten 16..604 statt 83..671), waehrend alles andere mittig steht. Auf Handybreiten faellt es nicht auf, weil 343 < 588 — genau deshalb waere es beim Testen nur auf 375 durchgerutscht. ZONE 839, nicht 599: anders als bei der Werkzeugleiste (Abschnitt 23) gilt die Voraussetzung hier auch auf dem Tablet — gemessen @768 ist der Hero derselbe EINSPALTIGE Aufbau (Grid eine Spalte 721px, Visual Breite 0, alles linksbuendig auf x16). Die Regel gehoert in die Zone, in der ihre Voraussetzung gilt, nicht in die, in der man gerade arbeitet. Gemessen nachher (jeweils gegen die ECHTE Inhaltsbreite, nicht innerWidth — bei 768 nimmt die Scrollleiste 15px und haette sonst einen 7px-Scheinversatz vorgetaeuscht): @375 clientWidth 375, Mitte 188 — Brandline 16..359, Logo 23..352, Lead 16..359, Chips 16..359, Trust 61..314: alle Mitten exakt 188. @768 clientWidth 753, Mitte 377 — Logo, Lead, Chips und Trust alle auf 377. Kein Querlauf. --------------------------------------------------------------------------- */ @media (max-width: 839px) { /* Brandline, Logo-Bildunterkante, Fliesstext und Ueberschriften mittig */ body.hc-natliste .hc-nl-hero-text { text-align: center; } /* Blockelemente zentrieren sich nicht ueber text-align — die brauchen auto */ body.hc-natliste .hc-nl-hero-logo img { margin-inline: auto; } body.hc-natliste .hc-nl-lead { margin-inline: auto; } /* Die beiden Sprungmarken ("Booster Displays" / "Starter Decks") */ body.hc-natliste .hc-nl-quick { justify-content: center; } /* Trust-Liste: Block mittig, Zeilen bleiben buendig (siehe Kopf) */ body.hc-natliste .hc-nl-trust { width: max-content; max-width: 100%; margin-inline: auto; } body.hc-natliste .hc-nl-trust > li { justify-content: flex-start; text-align: left; } } /* --------------------------------------------------------------------------- 25) 11.08.2026 — DARK MODE fuer die native Liste (Marcels Befund). "der Dark Mode auf der neuen Seite wird weder auf dem Desktop noch auf der Mobilversion richtig dargestellt." URSACHE: Der vorhandene Dark-Sweep (