/* BackToSmoke · custom.css Glut-Glow-Feinschliff der dynamischen NOVA-Produktboxen (Startseite + Kategorie). Wird ohne Smarty-Recompile geladen. */ /* --- Glut-Glow Design-Tokens GLOBAL: damit die Produktkarten auch außerhalb von .bts-home greifen (z.B. Kategorieseite #product-list) --- */ :root { --bg:#0c0907; --bg2:#14100d; --ash:#1d1814; --ash2:#261f19; --ember:#ff7a2e; --ember2:#ff9a4f; --ember3:#d6501a; --cream:#f5ece0; --muted:rgba(245,236,224,.64); --muted2:rgba(245,236,224,.42); --line:rgba(245,236,224,.12); --glow:rgba(255,122,46,.55); } /* Default-Textfarbe: NOVA-Basis lässt body auf #525252 (Light-Theme-Grau) -> generischer Inhalt (CMS-Seiten wie Versand/Widerruf, Formulare, Tabellen), der keine eigene Farbe hat, ist auf dem dunklen BG kaum lesbar. Default auf --cream setzen. AUSNAHME: .btn-skip-to (Accessibility-Sprunglinks) haben weißen BG -> dunkel halten. */ body { color:var(--cream); } .btn-skip-to, a.btn-skip-to { color:var(--bg) !important; } /* Input-Placeholder lesbarer: NOVA-Default war #707070 (dunkelgrau) -> auf Dunkel zu schwach. */ :is(input,textarea,.form-control,.selectpicker)::placeholder { color:rgba(245,236,224,.7) !important; opacity:1 !important; } /* Link-Default war NOVAs #525252 (Light-Theme-Grau) -> graue, kaum lesbare Links (Kategoriebaum, Filter, Breadcrumb …). Lesbares Creme + Ember beim Hover. Eigene Link-Farben (nav-link, Consent, Buttons, .btn-skip-to) gewinnen per Spezifität / kommen später. */ a { color:var(--cream); } a:hover, a:focus { color:var(--ember2); } /* --- Header: dunkler Glass-Look (Blur + unterer Border) wie Preview --- Opak ~94% statt 72%, weil hinter dem Live-Header heller Content liegt (sonst grau). */ #jtl-nav-wrapper { background-color:rgba(12,9,7,.94) !important; -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid rgba(245,236,224,.12); box-shadow:0 10px 30px -22px rgba(0,0,0,.8); } #jtl-nav-wrapper #header-top-bar, #jtl-nav-wrapper .navbar, #jtl-nav-wrapper .nav-wrapper, #jtl-nav-wrapper > .container-fluid { background-color:transparent !important; } /* --- Button-/Link-Unterstriche entfernen (Preview hat keine) --- */ .bts-home a.bts-btn, .bts-home a.bts-btn:hover, .bts-home .bts-add, .bts-home .bts-add:hover, .bts-home .bts-pair, .bts-home .productbox-title a, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox a, .bts-home .bts-card-body h3 a { text-decoration:none !important; } /* --- Button-Schein: Ember-Glow + inneres Highlight (Sheen) wie Preview --- */ .bts-home .bts-btn-primary, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .btn, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox button[type="submit"].btn, .bts-home .bts-add { box-shadow:0 10px 30px -8px rgba(255,122,46,.55), inset 0 1px 0 rgba(255,255,255,.35) !important; } .bts-home .bts-btn-primary:hover, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .btn:hover, .bts-home .bts-add:hover { box-shadow:0 16px 44px -8px rgba(255,122,46,.65), inset 0 1px 0 rgba(255,255,255,.45) !important; } /* --- Cookie-Consent-Banner im Glut-Glow-Look --- */ #consent-banner { background:linear-gradient(180deg,#1d1814,#14100d) !important; color:#f5ece0 !important; border:1px solid rgba(245,236,224,.14) !important; border-radius:14px !important; box-shadow:0 24px 70px -24px rgba(0,0,0,.7), 0 0 50px -18px rgba(255,122,46,.35) !important; } #consent-banner, #consent-banner p, #consent-banner span, #consent-banner .consent-banner-body, #consent-banner a:not(.consent-btn) { color:#f5ece0 !important; } #consent-banner a:not(.consent-btn) { text-decoration:underline; text-underline-offset:2px; color:#ff9a4f !important; } #consent-banner .consent-banner-icon { color:#ff7a2e !important; } /* Akzeptieren-Button = Glut-Ember */ #consent-banner #consent-banner-btn-all, #consent-banner .consent-btn:not(.consent-btn-outline-primary) { background:#ff7a2e !important; border-color:#ff7a2e !important; color:#1a0d05 !important; } /* Einstellungen/Ablehnen = Ghost mit Ember-Rahmen */ #consent-banner .consent-btn-outline-primary, #consent-banner #consent-banner-btn-settings, #consent-banner #consent-banner-btn-close { background:transparent !important; border:1px solid rgba(245,236,224,.36) !important; color:#f5ece0 !important; } #consent-banner .consent-btn-outline-primary:hover, #consent-banner #consent-banner-btn-settings:hover, #consent-banner #consent-banner-btn-close:hover { border-color:#ff7a2e !important; color:#ff9a4f !important; } /* Consent-Modal (Einstellungen) ebenfalls dunkel */ .consent-modal .modal-content, #consent-manager .modal-content { background:#14100d !important; color:#f5ece0 !important; border:1px solid rgba(245,236,224,.14) !important; } .consent-modal .modal-content .consent-label, .consent-modal .modal-content p, .consent-modal .modal-content span, .consent-modal .modal-content h1, .consent-modal .modal-content h2, .consent-modal .modal-content h3 { color:#f5ece0 !important; } /* --- Karte --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox { position:relative; height:100%; border-radius:14px; overflow:hidden; background-color:#1d1814; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-inner::before { background-color:#1d1814 !important; border-radius:14px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-inner { background-color:transparent; padding-bottom:18px; } /* --- Bild: rundes, dunkles Medienfeld --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-image, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox picture, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .image-wrapper { background-color:#14100d !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-image { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:12px 12px 0 0; } /* Galerie + Bilder füllen das Medienfeld deckungsgleich (absolut übereinander), damit der Hover-Wechsel auf das 2. Bild sauber an gleicher Stelle blendet. Ersetzt NOVAs .square-Zentrierung (top/left:50% + translate) durch echtes Füllen. */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-image .productbox-images { position:absolute; inset:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-image img { position:absolute; inset:0; top:0; left:0; width:100%; height:100%; object-fit:cover; transform:none; transition:transform .6s cubic-bezier(.2,.7,.2,1); } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox:hover .productbox-image img { transform:scale(1.04); } /* --- Titel --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-title { padding:16px 16px 0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-title, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-title a { color:#f5ece0 !important; font-family:'Bricolage Grotesque',Georgia,serif; font-weight:700; font-size:1.3rem; line-height:1.1; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-title a:hover { color:#ff9a4f !important; } /* --- Rauchprofil-Tag: als Overlay oben links auf dem Bild --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .bts-card-attrs { padding:0 16px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .bts-tag { position:absolute; top:12px; left:12px; z-index:4; margin:0; } /* --- Intensitäts-Meter im Körper --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .bts-meter { display:flex; margin:10px 16px 0; color:rgba(245,236,224,.6); } /* --- Preis: prominent in Glut-Orange --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .price_wrapper, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox [class*="price"], :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .price { color:#ff9a4f !important; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.15rem; padding:0 16px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox small, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .text-muted { color:rgba(245,236,224,.55) !important; } /* --- Hover-Clutter (Vergleichen/Merken) ausblenden für klare Karte --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-quick-actions { display:none !important; } /* --- Kurzbeschreibung + Meter-Label + Footer (Preis links / Ansehen-Button rechts) --- */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-card-desc { margin:6px 16px 0; color:var(--muted); font-size:.9rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-meter-label { font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-right:8px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .bts-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 16px 6px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-card-foot [itemprop="offers"] { margin:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-card-foot [class*="price"] { padding-left:0 !important; padding-right:0 !important; } /* NOVA gibt .price_wrapper 24px margin-bottom -> Toter Platz unter dem Preis, blähte den Footer auf 52px und schob den Preis tiefer unter den Strich. Weg damit: Abstand Strich->Preis soll <= dem Abstand darüber (Inhalt->Strich, 14px) sein. */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-card-foot .price_wrapper { margin-bottom:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-card-cta { flex:none; display:inline-flex; align-items:center; min-height:38px; padding:0 18px; border-radius:999px; background:linear-gradient(180deg,var(--ember2),var(--ember3)); color:#1a0d05 !important; font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none !important; box-shadow:0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .2s, box-shadow .2s; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .bts-card-cta:hover { transform:translateY(-2px); box-shadow:0 16px 36px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.45); color:#1a0d05 !important; } /* ===================================================================== GLUT-GLOW VOLL-DARK — Stragglers (hartcodierte helle Stellen, die SCSS-Vars nicht erwischen). Workflow-geprüft. Läuft zuletzt -> gewinnt die Kaskade. ===================================================================== */ #main-wrapper { background: #0c0907 !important; } .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label, .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label:after { background: #14100d !important; } .bg-white { background-color: #1d1814 !important; } /* Cookie-Consent (Critical) */ .consent-modal-content, #consent-banner { background: #1d1814 !important; color: #f5ece0 !important; } .consent-btn-secondary, #consent-settings-btn, .consent-more-description { background: #261f19 !important; color: #f5ece0 !important; border-color: rgba(245,236,224,.18) !important; } /* Cookie-Modal "Datenschutz-Einstellungen": Texte/Links tragen die Consent-Default-Farben (#435A6B Blaugrau, #525252 Grau) -> auf #1d1814 schlecht lesbar. Die alten Regeln zielten auf .consent-modal .modal-content (falsche Klasse; echt ist .consent-modal-content). Texte -> creme, Links -> ember (= das "Blau" raus). Primär-Buttons behalten dunklen Text auf Ember. */ .consent-modal-content :is(p,span,strong,li,h1,h2,h3,h4,.consent-display-1,.consent-display-3,.consent-help,.consent-more-description,.consent-label,.consent-label-secondary,.consent-show-more) { color:var(--cream) !important; } .consent-modal-content a:not(.consent-btn) { color:var(--ember2) !important; text-decoration:underline; text-underline-offset:2px; } .consent-modal-content :is(.consent-btn,.consent-accept):not(.consent-btn-outline-primary):not(.consent-btn-secondary), .consent-modal-content :is(.consent-btn,.consent-accept):not(.consent-btn-outline-primary):not(.consent-btn-secondary) * { color:#1a0d05 !important; } /* Modal-Primärbutton ("Übernehmen") war Consent-Grün #397C26 -> auf Ember umstellen wie der Banner */ .consent-modal-content .consent-btn-primary { background:var(--ember) !important; border-color:var(--ember) !important; } /* Toggle-Schalter waren hellgrau/weiß (Track ::before #ddd, Knopf ::after #fff) -> ins Theme: Track AUS dunkel-gedämpft, Track AN ember, Knopf creme. (input + label adjazent in .consent-switch) */ .consent-switch .consent-label::before { background:rgba(245,236,224,.20) !important; border:1px solid rgba(245,236,224,.28) !important; } .consent-switch .consent-input:checked + .consent-label::before { background:var(--ember) !important; border-color:var(--ember) !important; } .consent-switch .consent-label::after { background:#f5ece0 !important; } /* bootstrap-select */ .bootstrap-select.custom-select button.dropdown-toggle, .bootstrap-select .no-results { background: #14100d !important; color: #f5ece0 !important; } .bootstrap-select.custom-select button.dropdown-toggle:hover, .bootstrap-select.custom-select button.dropdown-toggle:focus, .bootstrap-select.custom-select.show button.dropdown-toggle { background: #261f19 !important; } /* Card-Header / Sidebar-Boxen */ .card-gray { background: #14100d !important; } .card-header { background: #261f19 !important; color: #f5ece0 !important; } .card-header .btn { background: #261f19 !important; } .box-categories .dropdown .collapse, .box-linkgroup .dropdown .collapse { background: #1d1814 !important; } /* Artikelliste / Filter */ @media (max-width: 767.98px) { .productlist-filter#collapseFilter, .productlist-filter#collapseFilter .productlist-filter-footer { background: #0c0907 !important; color: #f5ece0 !important; } } .filter-search-wrapper .input-group-text { background-color: #14100d !important; color: #f5ece0 !important; border-color: rgba(245,236,224,.18) !important; } #product-list.layout-gallery .productbox-hover.productbox-show-variations:hover, #product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:hover { background-color: #1d1814 !important; } /* Produktdetail: Galerie/Zoom + Konfigurator */ .gallery-with-action-main, .product-detail-image-preview-bar, .product-detail-image-topbar, #image_wrapper.fullscreen .gallery-with-action-main { background: #1d1814 !important; } .product-configuration .variation-image-preview { background: #14100d !important; border-color: rgba(245,236,224,.18) !important; } .bg-recommendation { background-color: #261f19 !important; color: #f5ece0 !important; } .cfg-group .form-counter .btn { background-color: #1d1814 !important; color: #f5ece0 !important; } .cfg-group .cfg-swatch:disabled ~ .custom-control-label .config-item { background: #14100d !important; color: rgba(245,236,224,.42) !important; } /* Vergleichsliste / Checkout-Stepper / RMA-Overlay */ .comparelist .table thead th, .comparelist .table thead th:not(:first-child) { background: #0c0907 !important; color: #f5ece0 !important; } .stepper .step-active { background: #1d1814 !important; color: #f5ece0 !important; border-color: #ff7a2e !important; } @media (max-width: 991.98px) { .stepper { background: #0c0907 !important; } } #rmaStickyPositions.loadingAJAX::after, #rmaStickyPositions.loadingAJAX::before { background: linear-gradient(0deg, rgba(12,9,7,.5) 0%, rgba(12,9,7,1) 100%) !important; } /* Kleinteile + Slider */ .bubble, .swatches-image { background: #1d1814 !important; } .btn-icon-primary { background-color: #14100d !important; } .noUi-tooltip { background: #1d1814 !important; color: #f5ece0 !important; border-color: rgba(245,236,224,.18) !important; } .theme-light.slider-wrapper, .theme-dark .nivoSlider, .theme-bar .nivoSlider, .theme-default .nivoSlider { background-color: #0c0907 !important; } /* Outline-Buttons (color-yiq -> sonst dunkel auf dunkel) */ .btn-outline-primary { color: #ff9a4f !important; border-color: #ff7a2e !important; } .btn-outline-secondary { color: #f5ece0 !important; border-color: rgba(245,236,224,.28) !important; } /* .btn-light (Datei-Upload „Browse") */ .btn-light { background-color: #261f19 !important; border-color: rgba(245,236,224,.28) !important; color: #f5ece0 !important; } .btn-light:hover, .btn-light:focus, .btn-light:active { background-color: #322820 !important; color: #f5ece0 !important; } /* .text-dark Icons / .badge-light / .alert-light+gray (dunkel-auf-dunkel-Schutz) */ .text-dark { color: #f5ece0 !important; } .badge-light { background-color: #261f19 !important; color: #f5ece0 !important; } .alert-light, .alert-gray, .alert-gray-light, .alert-gray-medium, .alert-gray-dark, .alert-info, .alert-primary, .alert-secondary { background-color: #1d1814 !important; border-color: rgba(245,236,224,.18) !important; color: #f5ece0 !important; } .alert-light .alert-link, .alert-gray .alert-link, .alert-gray-light .alert-link, .alert-info .alert-link, .alert-primary .alert-link { color: #ff9a4f !important; } /* Semantische Alerts: dunkler Grund, aber farbiger Akzent (Rand+Text) zur Wiedererkennung — statt grellem Hell-Kasten */ .alert-success { background-color:#15211a !important; border-color:rgba(120,200,120,.45) !important; color:#c2e6c7 !important; } .alert-warning { background-color:#241d12 !important; border-color:rgba(255,180,80,.45) !important; color:#f0d49c !important; } .alert-danger { background-color:#241414 !important; border-color:rgba(255,120,120,.45) !important; color:#f1b6b6 !important; } .alert-success .alert-link, .alert-warning .alert-link, .alert-danger .alert-link { color:#ff9a4f !important; } /* Produktdetail: Wunschzettel-/Vergleich-Buttons ÜBER dem Bild waren weiß (bg #fff) mit grauem Icon (#707070) -> wirken hell/blau, off-brand. Auf Glut-Glow-Glass umstellen (wie Karten-Quick- Actions): dunkles Glas + creme Icon; Hover/Focus/aktiv = Ember. */ .btn.wishlist, .btn.compare { background:rgba(12,9,7,.74) !important; border:1px solid rgba(245,236,224,.22) !important; color:var(--cream) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:none !important; } .btn.wishlist:hover, .btn.wishlist:focus, .btn.wishlist.active, .btn.wishlist.is-active, .btn.compare:hover, .btn.compare:focus, .btn.compare.active, .btn.compare.is-active { background:rgba(12,9,7,.92) !important; border-color:var(--ember) !important; color:var(--ember2) !important; } /* Select-Pfeil hell erzwingen */ select.custom-select, .custom-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23f5ece0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right .85rem center !important; background-size:11px 14px !important; } /* ===================================================================== LESBARKEIT — NOVA-Grautexte (#525252/#707070) auf dunklem Grund aufhellen. Hauptquelle: _base.scss faerbt ALLE .content-wrapper a hart auf #525252 (nice-deco-Linkstil) -> auf Dunkel unlesbar. Dazu Sekundaertexte. ===================================================================== */ #main-wrapper .content-wrapper a, #main-wrapper .attr-characteristica, #main-wrapper a.nice-deco { color:#f5ece0; } #main-wrapper .content-wrapper a:hover, #main-wrapper a.nice-deco:hover { color:#ff9a4f; } #main-wrapper .content-wrapper a::before, #main-wrapper .content-wrapper a::after, #main-wrapper a.nice-deco::before, #main-wrapper a.nice-deco::after { background-color:#ff7a2e !important; } .breadcrumb a, .breadcrumb-link, .breadcrumb-link span, .breadcrumb-item, .breadcrumb-item span { color:rgba(245,236,224,.74) !important; } .breadcrumb-item.last span, .breadcrumb-item.active, .breadcrumb-item.active span { color:#f5ece0 !important; } .productlist-item-info, .productlist-filter-headline, .box .box-headline, .box-headline, .sidepanel-left .headline, .filter-option-headline, .productlist-config-headline { color:rgba(245,236,224,.7) !important; } .sidepanel-left .nav-link, .box-categories .nav-link, .box-linkgroup .nav-link, aside .nav .nav-link { color:rgba(245,236,224,.82) !important; } .sidepanel-left .nav-item.active > .nav-link, .box-categories .nav-item.active > .nav-link { color:#ff9a4f !important; } #main-wrapper small.text-muted, #main-wrapper .form-text, #main-wrapper .custom-control-label, #main-wrapper figure figcaption { color:rgba(245,236,224,.7) !important; } /* Theme-Sweep 2026-06-29 — weitere NOVA-Light-Reste (#525252/#707070): */ /* Bootstrap-Tabs (z.B. Produktdetail "Beschreibung"/"Bewertungen") waren #525252 */ .nav-tabs .nav-link, ul.nav-tabs > li > a, .product-info .nav-link { color:rgba(245,236,224,.7) !important; } .nav-tabs .nav-link:hover, ul.nav-tabs > li > a:hover { color:var(--cream) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, ul.nav-tabs > li.active > a { color:var(--ember2) !important; } /* Formular-/Floating-Labels (NOVAs Placeholder-Optik) waren #707070 -> lesbar */ #main-wrapper label, #main-wrapper .control-label, #main-wrapper .form-group label, #main-wrapper .form-floating label, #main-wrapper label.floating-label, #main-wrapper .input-label { color:rgba(245,236,224,.72) !important; } /* ===================================================================== KONSISTENZ für gemischte Produkte (Pellets + Demo-Artikel): NOVA-Ribbons, Bewertungs-Sterne, sauberer Hover. Scope: :is(.bts-prodgrid,#product-list,.opc-ProductStream) ===================================================================== */ /* Ribbon (TOP BEWERTET / NEU / TOP …) als Glut-Glow-Glass-Pille wie .bts-tag */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-ribbon.ribbon { top:12px !important; left:12px !important; right:auto !important; z-index:4; margin:0 !important; padding:5px 11px !important; border-radius:999px !important; background:rgba(12,9,7,.74) !important; border:1px solid rgba(245,236,224,.18) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-family:'IBM Plex Mono',monospace !important; font-size:.6rem !important; font-weight:600 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--ember2) !important; box-shadow:none !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-ribbon.ribbon::before, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-ribbon.ribbon::after { display:none !important; } /* Bewertungs-Sterne: voll = warmes Gold, leer = muted (statt #525252) */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .rating { display:inline-flex; gap:2px; margin:8px 16px 0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .rating .fas.fa-star, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .rating .fas.fa-star-half-alt { color:#ffb24d !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .rating .far.fa-star { color:rgba(245,236,224,.28) !important; } /* Sauberer Hover: NOVAs "Aufploppen" aus (kein ::before-Wachsen, kein pos-abs-Sprung, Ribbon bleibt an Ort) -> nur mein Lift + dezenter Bild-Zoom */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-hover:hover .productbox-inner::before, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-hover:focus .productbox-inner::before, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-hover.focus .productbox-inner::before { left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; box-shadow:none !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-hover:hover .productbox-inner.pos-abs { position:static !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-hover:hover .productbox-ribbon.ribbon { top:12px !important; left:12px !important; } /* Bild-Zoom dezent + zentriert. (Bilder sind jetzt absolut/füllend, daher KEIN translate(-50%,-50%) mehr nötig — nur Scale.) */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox:hover .productbox-image img { transform:scale(1.04) !important; } /* ===================================================================== GLEICHE KARTENHÖHE: nur die äußere Row auf align-items:stretch. (Stand auf flex-start -> ungleiche Höhen. NOVAs row-eq-height ist JS und greift im OPC nicht.) Die vorhandene .productbox{height:100%} füllt die gestreckte Spalte. Bewusst KEIN Eingriff in NOVAs innere Verschachtelung (form>inner>row>col) -> der hatte die Karten zerschossen. *) ===================================================================== */ .opc-ProductStream, .bts-prodgrid { align-items:stretch !important; } /* Spalte = Flex-Spalte, Karte füllt die gestreckte Spalte (statt height:100% -> zirkulär). NOVAs innere Struktur (form>inner>row>col) bleibt unberührt -> Inhalt fließt normal. */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) > .product-wrapper { display:flex; flex-direction:column; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .product-wrapper > .productbox { flex:1 1 auto; height:auto !important; } /* ===================================================================== 2-BILD-GALERIE (z.B. Bronze-Uhr): NOVAs gestapelte .square-Wrapper (.first-wrapper/.second-wrapper) + der opacity-Fade lassen das Zweitbild im Hover falsch/leer erscheinen. Robust: nur das Erstbild (stabil, füllend), Zweitbild-Wechsel aus -> Hover = nur sauberer Zoom. Erstbild bleibt im Hover. ===================================================================== */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-image .list-gallery > a { display:block; position:absolute; inset:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-image .list-gallery .first-wrapper { position:absolute; inset:0; aspect-ratio:auto; margin:0; border-radius:0; opacity:1 !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-image .list-gallery .first-wrapper > .inner { position:absolute; inset:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-image .list-gallery .second-wrapper { display:none !important; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-image .list-gallery:hover img.first, :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-image .list-gallery:hover img.second { opacity:1 !important; } /* ===================================================================== PREIS-FOOTER ("strich" + Preis + Ansehen) an die Karten-Unterkante. Durchgehende Flex-SPALTE von .productbox bis zur Caption-Spalte, dann margin-top:auto am Footer. Knackpunkt: NOVAs cols sind .col-12 = flex:0 0 100% -> in Spalten-Richtung wäre das 100% HÖHE (Bildspalte würde die ganze Karte füllen, Caption kollabiert). Darum Bild-Spalte explizit 0 0 auto, nur die Caption-Spalte 1 1 auto. min-height:0 überall, damit nichts clippt. quick-actions ist position:absolute -> nimmt keinen Flex-Platz weg. ===================================================================== */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .product-wrapper > .productbox { display:flex; flex-direction:column; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox > form.form-basket { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .productbox-inner { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-inner > .row { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } /* ALLE Nicht-Caption-Spalten auf natürliche Höhe: Bildspalte + (bei Variations- Eltern) die mittlere .productbox-variations-Spalte. Beide haben NOVAs .col-12 = flex:0 0 100% -> in Spalten-Richtung = 100% HÖHE -> Caption würde hinter das Bild geschoben (Variations-Karten zeigten leeren Body). :not(:last-child) deckt 2- UND 3-Spalten-Layout ab. */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-inner > .row > .col:not(:last-child) { flex:0 0 auto; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox-inner > .row > .col:last-child { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } /* Caption-Spalte: füllt Rest */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .bts-card-foot { margin-top:auto; } /* Footer an die Unterkante (specificity = Basisregel oben, kommt danach -> gewinnt) */ /* Mindest-Luft ÜBER dem Strich: margin-top:auto kollabiert auf der höchsten Karte einer Reihe zu 0 -> Sterne/Rauch-Meter klebten am Strich. NICHT :has(+ .bts-card-foot) benutzen: das direkte DOM-Geschwister vor dem Footer ist auf Karten OHNE Rating ein (display:none, kein Flex-Item) -> margin wirkungslos (Karte 7). Stattdessen das jeweils LETZTE SICHTBARE Element ansteuern: rating ist immer letztes (wenn vorhanden), sonst meter, sonst desc. auto am Footer schluckt den Rest -> gepinnt. */ :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .col:last-child > .rating { margin-bottom:14px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .col:last-child:not(:has(.rating)) > .bts-meter { margin-bottom:14px; } :is(.bts-prodgrid,#product-list,.opc-ProductStream) .productbox .col:last-child:not(:has(.rating)):not(:has(.bts-meter)) > .bts-card-desc { margin-bottom:14px; } /* ===================================================================== HINWEIS: Den "Hover-Sprung" der Variations-Eltern-Karten (#product-list .layout-gallery .productbox-show-variations -> position:absolute) NICHT zurücksetzen! Das ist KEIN Bug, sondern NOVAs Mechanismus, um beim Hover die Variations-Auswahl (.productbox-onhover, normal display:none) einzublenden: die Karte muss aus dem Fluss (position:absolute), um zu wachsen und das Panel über die Nachbarn zu zeigen — sonst klippt es das overflow:hidden der Karte ab und das Variations-Select bleibt unsichtbar. Der frühere Audit hat das als Defekt fehlinterpretiert; ein position:relative-Override hat das Select verdeckt. Bewusst weggelassen -> NOVA-Standardverhalten beibehalten. ===================================================================== */ /* WARENKORB: NOVAs `.wishlist-button` (backtosmoke.css ~27282: margin-right:1rem; padding:0 1rem 0 0; display:block; +@media≥992 inline-block & border-right) sieht im Warenkorb neben „Entfernen" nicht gut aus. Im Warenkorb (.cart-items-delete) neutralisieren — wirkt wie deaktivierte Regel. Produktliste und Produktdetail-Bild bleiben unverändert. */ /* Warenkorb-Aktionen einheitlich: KEIN border-right-Trenner (sah mit der Button-Rundung + dem Hover- Farbwechsel doof aus). Stattdessen Wunschzettel + Löschen mit GLEICHEM Padding. Der Wunschzettel- Button ist