/* LM-CSS-VERSION: v16.13 (Marker zum Verifizieren, dass das neue Bundle lädt) */ .lm-css-version-v16-13 { display: none; } /* ========================================================================= LAPTOP-MARKT – CUSTOM CSS für Mono-Child (Remake-Parent, Themeart) Datei-Ziel: public_html/templates/Mono/themes/mono/custom.css -------------------------------------------------------------------------- WICHTIG: - Diese Datei wird AUTOMATISCH durch das Minify-Bundle (template.xml) hinter mono.css geladen → KEIN Smarty/Hook nötig, einfach Inhalt ÜBERSCHREIBEN. Vor dem Speichern: BACKUP-KOPIE custom.css.bak anlegen (per Dateimanager → Rechtsklick → Duplizieren). - Update-sicher: Remake-Updates fassen Mono nie an. - Falls etwas schief geht: custom.css.bak → custom.css zurück-umbenennen, dann Browser-Cache + LiteSpeed leeren → Original wieder da. -------------------------------------------------------------------------- Stand: 2026-05-29 (Nacht). Konsolidiert v3+v4. Variante wird oben per Variable umgeschaltet — Default: V4 (Konfigurator unter dem Foto). ========================================================================= */ /* === (0) Beibehalten aus Original-custom.css ============================= */ .nav-link[aria-expanded="true"] .text-cart::after, .accordion .menu[aria-expanded="true"]::after, .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } /* === (1) Artikelnummer-Box im Reiter „Beschreibung" weg + Vollbreite ===== */ /* SKU bleibt im DOM (itemprop=sku) → SEO/Schema bleibt erhalten. */ #tab-description .row > .col-lg-5 { display: none !important; } #tab-description .row > .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; } #tab-description .desc > div[style*="border-right"] { border-right: 0 !important; padding-right: 0 !important; } /* === (2) Konfigurator: „In den Warenkorb" wieder Marken-Grün ============= */ #konfiguratorx__add-to-cart .btn-primary { background-color: #36AB4F !important; border-color: #36AB4F !important; color: #fff !important; } #konfiguratorx__add-to-cart .btn-primary:hover { background-color: #2f9444 !important; border-color: #2f9444 !important; } /* === (3) Konfigurator-Optik (Gruppen-Überschrift + Karten + Marken-Icons) = */ #konfiguratorx__groups .konfiguratorx_group__label { font: 700 15px/1.2 "IBM Plex Sans", Helvetica, Arial, sans-serif; color: #2B2B2B; border-bottom: 2px solid #03B452; padding-bottom: 6px; margin: 18px 0 10px !important; } #konfiguratorx__groups .konfiguratorx_item { border: 1px solid #e3e3e3; border-radius: 10px; padding: 10px 12px; background: #f8f8f8; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } #konfiguratorx__groups .konfiguratorx_item__selection { border: 0; background: transparent; padding: 0; display: flex; align-items: center; gap: 12px; flex: 1 1 auto; } /* Leeres Platzhalter-Bild → Marken-Icon (grüner Kreis + FA-Symbol) */ #konfiguratorx__groups .selection__image img { display: none !important; } #konfiguratorx__groups .selection__image { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #c1ecca; display: inline-flex; align-items: center; justify-content: center; } #konfiguratorx__groups .selection__image::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 18px; color: #383e42; } /* Mapping Komponenten-Typ → FA-Icon. Erweitern bei neuen Komponenten. */ .konfiguratorx_item__selection[data-ctyp="Akku"] .selection__image::before { content: "\f240"; } /* battery-full */ .konfiguratorx_item__selection[data-ctyp="Garantie"] .selection__image::before { content: "\f3ed"; } /* shield-halved */ .konfiguratorx_item__selection[data-ctyp="Altgeraet"] .selection__image::before { content: "\f0ec"; } /* arrow-right-arrow-left */ .konfiguratorx_item__selection[data-ctyp="Altgerät"] .selection__image::before { content: "\f0ec"; } /* arrow-right-arrow-left (Umlaut-Variante) */ /* Add-on-Artikelnummer in der Option ausblenden */ #konfiguratorx__groups .selection__text small:not([class]) { display: none !important; } #konfiguratorx__groups .selection__text { font-size: 14px; color: #2B2B2B; } /* === (4) Häkchen-Auswahl (Mengen-Spinner → Checkbox; siehe footer__.tpl) = */ .lm-cfg-check { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: #2B2B2B; user-select: none; white-space: nowrap; } .lm-cfg-check input { width: 22px; height: 22px; accent-color: #36AB4F; cursor: pointer; margin: 0; } .lm-cfg-check input:checked + span { color: #1C7B36; } /* ========================================================================= (5) STICKY-KAUFBOX (gemeinsam für v3 + v4) Buy-Box bleibt beim Scrollen rechts kleben — USP gegen AFB & Circulee. Ziel-Selektor: die rechte Spalte der Artikeldetail-Seite im Remake-Template. Falls Selektor abweicht (Mono override): per Browser-DevTools nachprüfen und unten anpassen. Sticky braucht: parent darf KEIN overflow:hidden haben. ========================================================================= */ @media (min-width: 992px) { /* Remake nutzt typischerweise .product-page__buy-box ODER die rechte Bootstrap-Spalte mit dem Add-to-Cart-Bereich. Mehrere Fallback- Selektoren — der erste, der greift, wirkt. */ .product-page__buy-box, .product-details .col-lg-4:has(#konfiguratorx__add-to-cart), .product-details .col-lg-4:has(.add-to-cart-row), .product-info-aside { position: sticky; top: 16px; align-self: flex-start; /* damit Sticky in Flex-Grids greift */ } } /* ========================================================================= (6) „AUF EINEN BLICK"-KACHELN (8 Spec-Tiles unter dem Bild) Wird via OPC-Inhaltselement „HTML/Smarty" eingefügt; CSS unten stylt nur die Klassen (.lm-glance, .lm-gtile). HTML-Snippet siehe RUNBOOK.md §4. Funktioniert bei v3 UND v4. ========================================================================= */ .lm-glance { background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; padding: 18px; margin: 16px 0 0; } .lm-glance__title { font-size: 15px; font-weight: 700; color: #2B2B2B; border-bottom: 2px solid #03B452; padding-bottom: 6px; margin: 0 0 12px; } .lm-gtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 760px) { .lm-gtiles { grid-template-columns: repeat(2, 1fr); } } .lm-gtile { background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px; padding: 10px 11px; display: flex; gap: 10px; align-items: center; } .lm-gtile__ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #c1ecca; display: flex; align-items: center; justify-content: center; } .lm-gtile__ic i { color: #383E42; font-size: 13.5px; } .lm-gtile small { display: block; color: #707070; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; line-height: 1; } .lm-gtile b { font-size: 13px; font-weight: 700; display: block; margin-top: 2px; } /* ========================================================================= (7) TRUST-BLOCK (rechts in der Buy-Box) „Versand aus Deutschland"-Badge + 5-Punkte-QA-Checkliste. Eingefügt via OPC oder als footer-Block — Klassen .lm-debadge / .lm-qa. ========================================================================= */ .lm-debadge { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #03B452; border-radius: 10px; padding: 10px 12px; margin-top: 14px; } .lm-debadge__flag { flex: 0 0 28px; width: 28px; height: 20px; border-radius: 3px; background: linear-gradient(to bottom, #000 33%, #DD0000 33% 66%, #FFCC00 66%); border: 1px solid #ddd; } .lm-debadge__tx { font-size: 12.5px; line-height: 1.25; } .lm-debadge__tx b { display: block; font-weight: 700; color: #2B2B2B; } .lm-debadge__tx span { color: #707070; font-size: 11.5px; } .lm-qa { margin-top: 14px; background: #f8f8f8; border: 1px solid #e3e3e3; border-radius: 10px; padding: 12px 14px; } .lm-qa__title { font-size: 12px; color: #707070; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; font-weight: 700; } .lm-qa__it { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; color: #2B2B2B; } .lm-qa__it i { color: #03B452; font-size: 13px; width: 16px; text-align: center; } /* ========================================================================= (8) ENTFERNUNG TRUST-ICON-BAR (Denis-Wunsch: komplett raus) 30 Tage Rückgabe / Umweltfreundlich / Geprüft etc. – ersetzt durch die .lm-qa-Checkliste oben. Ziel-Selektor: hängt vom Mono-Markup ab; Standard-Klassen aus dem Remake-Template: ========================================================================= */ .product-page__usp, .product-details__usp, .product-page__trust-icons, .product-trust-bar { display: none !important; } /* Falls die Trust-Bar in einer OPC-Section sitzt: über OPC-Editor löschen (siehe RUNBOOK.md §5). */ /* ========================================================================= (9) TITEL-HEADER aufwerten (v4) Größerer h1, mehr Hierarchie, ausgeschriebener Titel. Selektor: .product-page__title oder h1.product-name (Remake-Standard). ========================================================================= */ .product-page__title, h1.product-name, .product-detail h1 { font-size: 28px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -0.3px; margin: 0 0 8px !important; } .product-page__subtitle, .product-detail .product-subtitle { font-size: 15.5px !important; color: #3a3a3a !important; font-weight: 500; margin: 6px 0 8px; } /* ========================================================================= (10) v16-LAYOUT (NEU 30.05.2026) — finale verifizierte Anker (Remake/Mono) -------------------------------------------------------------------------- Diese Regeln greifen erst voll, wenn auch details.tpl deployed ist (siehe live_package/details.tpl). Bis dahin schaden sie nicht: leere Selektoren bleiben inaktiv. ========================================================================= */ /* (10.1) USP-Icon-Bar entfernen ("30 Tage Rückgabe…") — sicherheits-Fallback, falls das OPC-Element vergessen wurde. */ .product-usp-bar, .details-usp-bar { display: none !important; } /* (10.2) HEADER-ROW: eigene Kachel ÜBER der Foto/Buy-Row (Mockup-treu). Aufbau: links Titel + Specs + Refurbished-Chip + Google rechts DE-Badge + Art.-Nr. (untereinander, gleich breit). */ .lm-header-row { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 16px 20px; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .lm-header-row__main { min-width: 0; } .lm-product-title { font-size: 1.5rem !important; margin: 0 0 8px !important; line-height: 1.2; color: #2B2B2B; font-weight: 700; font-family: "IBM Plex Sans", sans-serif; } .lm-header-row__side { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; } .lm-header-row__side > .lm-de-badge, .lm-header-row__side > .lm-artnr-box { min-width: 220px; } /* Mobile: alles untereinander, side flext voll */ @media (max-width: 768px) { .lm-header-row { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; } .lm-product-title { font-size: 1.25rem !important; } .lm-header-row__side { flex-direction: row; flex-wrap: wrap; gap: 6px; } .lm-header-row__side > * { flex: 1 1 100%; min-width: 0; } } /* Den Original-product-headline-Slot leeren (wir haben den Titel-Block schon im Smarty leer overridet, aber JTL könnte Wrappers übrig lassen). */ .product-headline:empty, .rating-wrapper:empty { display: none !important; } .manufacturer:empty { display: none !important; } /* (10.3) DE-Versand-Badge — kompakt, exakt gleich breit wie Art.-Nr.-Box */ .lm-de-badge { display: flex; align-items: center; gap: 8px; background: #f3fbf5; border: 1.5px solid #03b452; border-radius: 8px; padding: 6px 11px; white-space: nowrap; width: 100%; } .lm-flag { flex: 0 0 22px; width: 22px; height: 15px; border-radius: 3px; background: linear-gradient(to bottom, #000 33%, #DD0000 33% 66%, #FFCC00 66%); border: 1px solid #ddd; } .lm-de-tx { line-height: 1.12; min-width: 0; } .lm-de-tx b { display: block; font-size: 12px; font-weight: 700; color: #1c7b36; margin: 0; } .lm-de-tx span { font-size: 10.5px; color: #707070; } /* (10.4) Art.-Nr.-Box — dezent grau, gleiche Breite wie DE-Badge */ .lm-artnr-box { display: flex; align-items: center; gap: 7px; width: 100%; background: #f7f7f7; border: 1px solid #ececec; border-radius: 8px; padding: 7px 11px; font-size: 11.5px; color: #707070; } .lm-artnr-box i { color: #bcbcbc; font-size: 11px; } .lm-artnr-box b { color: #555; font-weight: 700; letter-spacing: .2px; } /* (10.5) Meta-Zeile unter Titel: Refurbished-Chip + Google-Bewertung */ .lm-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0; } .lm-refurb-chip { display: inline-flex; align-items: center; gap: 5px; background: #eaf7ed; border: 1px solid #c1ecca; border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: #1c7b36; } .lm-refurb-chip i { color: #03b452; } .lm-google-rev { display: inline-flex; align-items: center; gap: 6px; } .lm-google-rev > i { color: #4285F4; font-size: 14px; } .lm-google-rev .lm-stars i { color: #f39932; font-size: 12px; } .lm-google-rev b { color: #2b2b2b; } .lm-rev-meta { color: #707070; } /* (10.6) Mini-Hero-Kachel oben in der Kaufspalte */ .lm-mini-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #fff 0%, #f8fbf9 100%); border: 1px solid #03b452; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; } .lm-mini-hero__img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; background: #fafafa; border: 1px solid #eee; overflow: hidden; display: flex; align-items: center; justify-content: center; } .lm-mini-hero__img img { max-width: 100%; max-height: 100%; } .lm-mini-hero__tx { flex: 1; min-width: 0; } .lm-mini-hero__model { font-size: 13px; font-weight: 700; color: #2b2b2b; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lm-mini-hero__sub { font-size: 11px; color: #707070; margin-top: 2px; } /* (10.7) Statt-Preis durchgestrichen + ROTER Rabatt-Badge (nicht grün) */ /* Remake rendert UVP nativ aus tArtikel.fUVP. Wir färben nur. */ .product-offer .price-old, .product-offer .uvp, .product-price .price-old, .product-price .uvp { color: #9aa0a6 !important; text-decoration: line-through; font-weight: 600; } .product-offer .discount, .product-offer .savings, .product-price .discount, .product-price .savings, .badge-discount, .label-discount { background-color: #e02424 !important; color: #fff !important; border-color: #e02424 !important; } /* (10.8) Sticky-Buy-Box: Mono-Original hat .product-info-inner schon bei eingeschaltetem Setting sticky → hier nur als Fallback explizit. */ @media (min-width: 981px) { .product-info-inner { position: sticky; top: 16px; align-self: flex-start; } } /* (10.9) Mobile-Bottom-Kauf-Leiste — nur sichtbar <980px */ .lm-mobile-buybar { display: none; } @media (max-width: 980px) { .lm-mobile-buybar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid #ddd; box-shadow: 0 -2px 12px rgba(0, 0, 0, .10); padding: 10px 14px; gap: 12px; align-items: center; } .lm-mb-info { line-height: 1.1; } .lm-mb-price { font-size: 18px; font-weight: 800; } .lm-mb-ref { font-size: 11px; color: #9aa0a6; text-decoration: line-through; margin-left: 4px; } .lm-mb-save { font-size: 10px; color: #e02424; font-weight: 800; display: block; } .lm-mb-cart { flex: 1; background: #36AB4F; color: #fff; border: 0; border-radius: 8px; padding: 13px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } body { padding-bottom: 72px; } } /* ========================================================================= (11) v16.1 ERWEITERUNG (Denis 30.05.2026 Update 2) - Sticky-Buy-Box (Layout-Tweak) - 2-Spalten-Beschreibung erzwingen (Layout-Tweak) - NEU: Mollie-Zahlarten-Chips (.lm-pay-row) - NEU: Inklusive-Block (.lm-incl) - NEU: Miet-Button-Box (.lm-rent-card) + Trust-Box (.lm-trust) ========================================================================= */ /* (11.1) STICKY BUY-BOX — DEAKTIVIERT 30.05.2026 (Denis-Korrektur): Das frühere `max-height + overflow-y:auto` hat den Konfigurator-Button (sitzt unten in der Buy-Spalte) abgeschnitten. Sticky wird wieder aktiv, sobald wir die Buy-Spalten-Höhe sauber im Griff haben (= später). Bis dahin: alle Elemente (Mini-Hero, Preis, Konfigurator, Cart, PayPal, Mollie-Chips, Inklusive) IMMER sichtbar, kein internes Scrollen. */ @media (min-width: 981px) { .product-detail .row, .product-detail #product-offer { align-items: flex-start; } /* WICHTIG: kein position:sticky, kein max-height, kein overflow-y. Sonst wird der Konfigurator-Block (unten in der Buy-Spalte) versteckt. JTL-eigenes sticky-Setting kann dafür im Admin separat aktiviert werden (Template-Einstellungen → Artikeldetails → "Buy-Box sticky"). */ .product-info-inner { position: static; max-height: none; overflow: visible; } } /* (11.2) 2-SPALTEN-BESCHREIBUNG erzwingen. Das pdp_design.beschreibung_html-Output enthält bereits `style="display:grid;grid-template-columns:1fr 1fr"` — aber JTL kann den Inline-Style stellenweise rauswerfen. Sicherheits-Override per CSS. */ #tab-description .desc > div[style*="grid-template-columns"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; } #tab-description .desc > div[style*="grid-template-columns"] > div { min-width: 0; /* damit lange Inhalte den Grid nicht sprengen */ } @media (max-width: 980px) { #tab-description .desc > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Trennstrich auf Mobile vom Border-Right auf Border-Bottom umstellen */ #tab-description .desc > div[style*="grid-template-columns"] > div:first-child { border-right: 0 !important; border-bottom: 1px solid #e3e3e3 !important; padding-right: 0 !important; padding-bottom: 20px !important; margin-bottom: 20px !important; } #tab-description .desc > div[style*="grid-template-columns"] > div:last-child { padding-left: 0 !important; } } /* (11.3) UNTER-FOTO-CONTAINER — kompakt */ .lm-under-photo { margin-top: 1rem; display: flex; flex-direction: column; gap: 8px; max-width: 640px; /* damit es nicht über volle Fotobreite läuft */ } /* (11.4) MIET-BUTTON-BOX (lila) — kompakt */ .lm-rent-card { background: linear-gradient(135deg, #f3effa, #ece5f5); border: 1px solid #d6c9eb; border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; } .lm-rent-card__ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #5b53c6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; } .lm-rent-card__tx { flex: 1; min-width: 0; line-height: 1.25; } .lm-rent-card__tx b { display: block; font-size: 12.5px; color: #2b2b2b; font-weight: 700; margin: 0 0 1px; } .lm-rent-card__tx span { display: block; font-size: 11px; color: #555; } .lm-rent-card__btn { background: #5b53c6 !important; color: #fff !important; padding: 9px 14px; border-radius: 8px; text-decoration: none !important; font-weight: 700; font-size: 13px; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 6px; flex-shrink: 0; } .lm-rent-card__btn:hover { background: #4a44a0 !important; color: #fff !important; } @media (max-width: 540px) { .lm-rent-card { flex-wrap: wrap; } .lm-rent-card__btn { width: 100%; justify-content: center; margin-top: 6px; } } /* (11.5) TRUST-BOX (Händlerbund + CO₂) — kompakt */ .lm-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lm-trust__item { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 8px 11px; display: flex; gap: 9px; align-items: center; } .lm-trust__ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; } .lm-trust__kauf .lm-trust__ic { background: #fff7e6; color: #f39932; } .lm-trust__env .lm-trust__ic { background: #eaf7ed; color: #03b452; } /* Echtes Händlerbund-Logo (statt Icon) - kompakt + scharf */ .lm-trust__hb { gap: 10px; padding: 8px 11px; } .lm-trust__hb-logo { flex: 0 0 auto; display: inline-flex; align-items: center; } .lm-trust__hb-logo img { width: auto; height: 44px; max-width: 70px; object-fit: contain; margin: 0 !important; padding: 0; } .lm-trust__hb-tx { flex: 1; min-width: 0; line-height: 1.3; } .lm-trust__hb-tx b { display: block; font-size: 12px; color: #2b2b2b; font-weight: 700; margin: 0; line-height: 1.25; } .lm-trust__hb-tx span { display: block; font-size: 10.5px; color: #707070; margin-top: 1px; line-height: 1.25; } /* "Nicht kaufbar"-Alert hübscher (statt grauer Klotz: oranger Hinweis) */ .product-offer .alert-info, .product-offer .alert.alert-variation, #buy_form .alert.alert-info { background: #fff4e5 !important; border: 1px solid #f3c994 !important; color: #8b5a1a !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 12.5px !important; margin-top: 10px !important; } .product-offer .alert-info::before, #buy_form .alert.alert-info::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; color: #f39932; } /* Mini-Hero — wenn als prepend in product-offer, kein doppelter margin oben */ .product-offer > .lm-mini-hero:first-child { margin-top: 0; } .lm-trust__item > div { min-width: 0; line-height: 1.3; } .lm-trust__item b { display: block; font-size: 12.5px; color: #2b2b2b; font-weight: 700; margin: 0; } .lm-trust__item span { display: block; font-size: 10.5px; color: #707070; margin-top: 1px; } @media (max-width: 540px) { .lm-trust { grid-template-columns: 1fr; } } /* (11.6) MOLLIE-ZAHLARTEN-CHIPS unter Cart-Button */ .lm-pay-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; background: #fafafa; border-radius: 8px; margin: 14px 0 0; font-size: 11px; } .lm-pay-row__label { width: 100%; color: #707070; font-weight: 600; font-size: 11px; margin-bottom: 4px; } .lm-pay-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 4px 8px; font-size: 11px; font-weight: 600; color: #555; line-height: 1; } .lm-pay-chip i { font-size: 13px; } .lm-pay-chip .lm-klarna { background: #ffb3c7; color: #000; padding: 1px 4px; border-radius: 3px; font-size: 10px; font-weight: 800; } .lm-pay-chip.lm-pay-rechn { background: #eaf7ed; border-color: #c1ecca; color: #1c7b36; } .lm-pay-chip.lm-pay-rechn i { color: #03b452; } /* (11.7) „INKLUSIVE · GEPRÜFTE QUALITÄT"-Block unter Buttons */ .lm-incl { margin-top: 12px; padding: 12px 14px; border: 1px solid #c1ecca; border-radius: 10px; background: #f3fbf5; } .lm-incl__title { font-size: 11px; font-weight: 700; color: #1c7b36; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } .lm-incl__item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #2b2b2b; padding: 3px 0; line-height: 1.3; } .lm-incl__item i { color: #03b452; width: 16px; text-align: center; font-size: 13px; } /* ========================================================================= (12) v16.2 KONFIGURATOR-PANEL LINKS UNTER FOTO (Denis 30.05.2026, 14:30) -------------------------------------------------------------------------- Mockup-treu (konfig_design_x13_komplett.html): Konfigurator als eigene weiße Panel-Box LINKS UNTER DEM FOTO. Plugin „Konfigurator-X" rendert sich originär in der Buy-Spalte rechts; per JS (details.tpl) wird #konfiguratorx__groups in #lm-konfig-target verschoben. Wenn der Artikel KEINEN Konfigurator-X hat (z. B. einfache Variation ohne Add-Ons), bleibt #lm-konfig-target leer → das gesamte Panel wird per :has(:empty) ausgeblendet. Fallback ohne :has-Support (alte Browser): Panel bleibt sichtbar mit nur Titel — unkritisch. ========================================================================= */ /* (12.1) Konfigurator-Panel-Box */ .lm-konfig-panel { background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; } .lm-konfig-panel__title { font-size: 15px; font-weight: 700; color: #2B2B2B; border-bottom: 2px solid #03B452; padding-bottom: 6px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } .lm-konfig-panel__title i { color: #03B452; font-size: 15px; } .lm-konfig-panel__sub { font-size: 12.5px; color: #707070; margin: 0 0 14px; font-weight: 400; } /* (12.2) v16.11: Konfigurator wird jetzt INLINE im Panel gerendert (#product-configurator innerhalb .lm-konfig-panel). Bootstrap-Spalten- Reste neutralisieren, damit der native Konfig sauber im Panel sitzt. */ .lm-konfig-panel #product-configurator { padding: 0 !important; margin: 0 !important; } .lm-konfig-panel #product-configurator .row { margin: 0 !important; } .lm-konfig-panel #product-configurator [class^="col-"], .lm-konfig-panel #product-configurator [class*=" col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* Riesiges Konfig-Platzhalter-Bild (Schild/Garantie-Grafik) verkleinern, damit es das Panel nicht sprengt. */ .lm-konfig-panel #product-configurator img { max-width: 90px !important; height: auto !important; } /* Konfig-Gruppen-Überschriften kompakt */ .lm-konfig-panel #product-configurator h2, .lm-konfig-panel #product-configurator h3, .lm-konfig-panel #product-configurator .konfig-group-name { font-size: 14px !important; font-weight: 700 !important; color: #2B2B2B !important; margin: 12px 0 8px !important; padding-bottom: 4px !important; } /* (12.3) Konfigurator-„wird vorbereitet"-Info-Block (3 erwartete Optionen). Optisch wie der echte Konfig-Item-Look, aber leicht ausgegraut + Hinweis. */ .lm-konfig-soon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .lm-konfig-soon__row { display: flex; gap: 12px; align-items: center; background: #fafafa; border: 1.5px dashed #d6d6d6; border-radius: 10px; padding: 12px 14px; opacity: .72; } .lm-konfig-soon__ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #ebf2ec; display: flex; align-items: center; justify-content: center; } .lm-konfig-soon__ic i { color: #707070; font-size: 15px; } .lm-konfig-soon__tx b { display: block; font-size: 13.5px; font-weight: 700; color: #555; margin: 0 0 1px; } .lm-konfig-soon__tx span { font-size: 11px; color: #909090; font-style: italic; } .lm-konfig-soon__note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11.5px; color: #707070; display: flex; gap: 7px; align-items: flex-start; } .lm-konfig-soon__note i { color: #f39932; margin-top: 2px; } @media (max-width: 760px) { .lm-konfig-soon { grid-template-columns: 1fr; } } /* (12.4) Pflicht-Auswahl-Wrapper im Buy-Form (Variations-Dropdowns Tastatur+ Zustand) — Mockup-treu als grauer Pflicht-Block mit kleinem „Bitte wählen"- Header darstellen. Greift nur, wenn Variations existieren. */ .product-offer .product-variations-wrapper, .product-offer .variations, .product-offer .js-variations-container { background: #f8f8f8; border: 1px solid #ddd; border-radius: 10px; padding: 12px 14px; margin: 6px 0 12px; } .product-offer .product-variations-wrapper::before, .product-offer .variations::before, .product-offer .js-variations-container::before { content: "\f192 Bitte wählen"; /* fa-circle-dot + Text */ font-family: "Font Awesome 6 Free", "IBM Plex Sans", sans-serif; font-weight: 900; font-size: 11.5px; color: #707070; text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 8px; } [lang="en"] .product-offer .product-variations-wrapper::before, [lang="en"] .product-offer .variations::before, html[lang="en"] .product-offer .js-variations-container::before { content: "\f192 Please choose"; } /* (12.5) Konfigurator-Add-to-Cart-Button (wenn er nach links wandert, beim X13 bleibt er rechts, weil wir nur #konfiguratorx__groups verschieben). */ #konfiguratorx__add-to-cart { margin-top: 14px; } /* ========================================================================= (13) v16.5 Denis-Feedback 30.05.2026 16:00 -------------------------------------------------------------------------- - "Neu"-Overlay/Badge ausblenden (passt nicht zu refurbished) - Konfigurator wandert von links-unter-Foto in RECHTE Buy-Spalte - Header-Row: Titel-Schrift verbessert + Sub-Specs-Zeile - Tab-Navigation Mockup-treu (durchgehender Border, aktiv = grün) - Versand-„Ausland abweichend"-Link dezenter - Zustand-Schild kompakter (Schild rechts kleiner) ========================================================================= */ /* (13.1) „NEU"-Badge / -Overlay komplett ausblenden --------------------------- JTL/Remake rendert bei tArtikel.cNeu='Y' verschiedene Overlay-Varianten: product-overlays, ribbon, neue-Artikel-Badge. Alle ausschalten. */ .product-overlays, .widget-new, .ribbon-new, .ribbon.ribbon-new, .product-overlay-new, .product-flag-new, .badge-new, .label-new, .tag-new, .product-tag.new { display: none !important; } /* Wenn .product-overlays-Element komplett weg ist, kein Layout-Sprung. */ .product-gallery .product-overlays, .product-gallery .widget-new { display: none !important; } /* (13.2) Mini-Hero ist jetzt OBEN in der Buy-Spalte (vor dem Zustand-Schild aus cKurzBeschreibung). Margin-Top reduzieren, da info-manufacturer-wrapper sonst noch Spacing einfügt. */ .product-info-inner .lm-mini-hero { margin-top: 0; margin-bottom: 12px; } /* (13.3) ZUSTAND-SCHILD aus cKurzBeschreibung kompakter ---------------------- Das von pdp_design.kurzbeschreibung_html erzeugte Schild hat ein 80×80 Schild-Icon. Mockup-Vergleich: rechtes Schild deutlich kleiner. Wir verkleinern nur per CSS — kein Backfill nötig. Greift via Attribut-Selektor auf das inline-style Schild-Element. */ .product-info-inner .shortdesc > div > div:first-child > span[style*="80px"] { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; } .product-info-inner .shortdesc > div > div:first-child > span[style*="80px"] i.fa-shield { font-size: 56px !important; } .product-info-inner .shortdesc > div > div:first-child > span[style*="80px"] i.fa-check { font-size: 19px !important; } /* Zustand-Schild äußerer Wrapper: weniger Innen-Padding + Border-Box weicher */ .product-info-inner .shortdesc > div[style*="border-radius:14px"] { padding: 14px 16px !important; border-radius: 12px !important; } /* "GEPRÜFTER ZUSTAND" Caps-Label etwas kleiner */ .product-info-inner .shortdesc div[style*="text-transform:uppercase"] { font-size: 10.5px !important; letter-spacing: .5px !important; } /* Zustand-Grad (z.B. "Hervorragend") etwas kleiner aber bleibt dominant */ .product-info-inner .shortdesc div[style*="font-size:23px"] { font-size: 21px !important; } /* (13.4) HEADER-ROW Titel-Schrift verbessern + Sub-Specs --------------------- */ .lm-product-title { font-size: 1.6rem !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: -.2px; color: #2B2B2B !important; font-family: "IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important; margin: 0 0 6px !important; } /* Sub-Specs-Zeile direkt unter dem Titel (per JS aus Titel geparst) */ .lm-subspecs { color: #707070; font-size: 13.5px; margin: 4px 0 6px; line-height: 1.4; font-weight: 400; } .lm-subspecs b { color: #2B2B2B; font-weight: 700; } /* (13.5) TAB-NAVIGATION — Override ENTFERNT (Denis 30.05. 18:00): Mein voriger Override hat die Tabs auf "nur Unterstrich" reduziert. Wir lassen jetzt das Mono-NATIVE Tab-Styling stehen und färben nur den AKTIVEN Tab grün (Marken-Akzent), ohne Borders/Padding zu kapern. */ .product-detail .nav-tabs .nav-link.active, .product-tabs .nav-tabs .nav-link.active { color: #03B452 !important; border-bottom-color: #03B452 !important; } /* (13.6) Konfigurator-Container IN der Buy-Spalte ---------------------------- */ .lm-konfig-buy { margin: 14px 0 6px; padding: 12px 14px; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; } .lm-konfig-buy__title { font-size: 13px; font-weight: 700; color: #2B2B2B; text-transform: uppercase; letter-spacing: .4px; border-bottom: 2px solid #03B452; padding-bottom: 5px; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; } .lm-konfig-buy__title i { color: #03B452; font-size: 13px; } .lm-konfig-buy:has(#lm-konfig-target-buy:empty) { display: none; } /* Verschobener JTL-Konfigurator-Container: Spalten-Reste neutralisieren */ #lm-konfig-target-buy > [id="product-configurator"] { padding: 0 !important; margin: 0 !important; } /* In der schmalen Buy-Spalte: alles 1-spaltig statt Bootstrap-Grids */ #lm-konfig-target-buy .row { margin: 0 !important; } #lm-konfig-target-buy [class^="col-"], #lm-konfig-target-buy [class*=" col-"] { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; } /* Konfig-Gruppen-Überschrift kompakt */ #lm-konfig-target-buy .konfig-group-name, #lm-konfig-target-buy .group-title, #lm-konfig-target-buy h2, #lm-konfig-target-buy h3 { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .3px; color: #707070 !important; border: 0 !important; margin: 8px 0 6px !important; padding: 0 !important; } #lm-konfig-target-buy h2:first-child, #lm-konfig-target-buy h3:first-child { margin-top: 0 !important; } /* Einzel-Konfig-Item: kompakte 1-Zeile mit Checkbox */ #lm-konfig-target-buy .konfig-item, #lm-konfig-target-buy .configurator-item, #lm-konfig-target-buy [class*="konfig"][class*="item"] { background: #fafafa; border: 1px solid #ececec; border-radius: 8px; padding: 9px 11px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font-size: 13px; } #lm-konfig-target-buy .konfig-item:hover { border-color: #03B452; } /* (13.7) Versand-„Ausland abweichend"-Link dezenter -------------------------- */ .shipping-info a, .delivery-info a, .shipping-link, .versand-link, a[href*="versand"], a[href*="Versand"] { color: #707070 !important; text-decoration: none !important; border-bottom: 1px dotted #c0c0c0; font-weight: 400 !important; font-size: inherit; } .shipping-info a:hover, .delivery-info a:hover { color: #2B2B2B !important; border-bottom-color: #03B452; } /* (13.8) Konfigurator-Panel unter dem Foto (v16.9 zurück, Mockup-Position) -- */ .lm-konfig-panel { background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; padding: 18px 20px; margin: 0 0 12px; } .lm-konfig-panel__title { font-size: 15px; font-weight: 700; color: #2B2B2B; border-bottom: 2px solid #03B452; padding-bottom: 6px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; } .lm-konfig-panel__title i { color: #03B452; } .lm-konfig-panel__sub { font-size: 12.5px; color: #707070; margin: 0 0 14px; font-weight: 400; } /* Auto-hide wenn Konfig-Container leer (kein bHasKonfig zur Laufzeit) */ /* WICHTIG v16.13: KEIN display:none mehr aufs Panel — der Konfigurator wird via Smarty nur bei bHasKonfig gerendert. Explizit sichtbar erzwingen, falls ein altes Minify-Bundle noch eine display:none-Regel hat. */ .lm-konfig-panel { display: block !important; } /* Konfigurator-Items in 3-Spalten-Grid (Mockup-Look) */ #lm-konfig-target #konfiguratorx__groups, #lm-konfig-target .konfig-groups, #lm-konfig-target .konfig-group-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; } @media (max-width: 760px) { #lm-konfig-target #konfiguratorx__groups, #lm-konfig-target .konfig-groups, #lm-konfig-target .konfig-group-items { grid-template-columns: 1fr; } } #lm-konfig-target .konfig-item, #lm-konfig-target .configurator-item { background: #f8f8f8; border: 1.5px solid #e3e3e3; border-radius: 10px; padding: 14px 16px; margin: 0; transition: border-color .15s, background .15s; } #lm-konfig-target .konfig-item:hover, #lm-konfig-target .configurator-item:hover { border-color: #03B452; background: #fff; } /* Konfig-Gruppe-Header (oben über jeder Gruppe — Mockup: ktitle) */ #lm-konfig-target h2, #lm-konfig-target h3, #lm-konfig-target .konfig-group-name { grid-column: 1 / -1; font-size: 13.5px !important; font-weight: 700 !important; color: #2B2B2B !important; border-bottom: 1px solid #eee !important; padding-bottom: 4px !important; margin: 4px 0 6px !important; } #lm-konfig-target h2:first-child, #lm-konfig-target h3:first-child { margin-top: 0 !important; } /* Verschobener config-container: Bootstrap-col-Reste neutralisieren */ #lm-konfig-target > [id="product-configurator"] { padding: 0 !important; margin: 0 !important; flex: 1 1 100% !important; max-width: 100% !important; } /* ========================================================================= (14) FONT-AWESOME-ICONS in der cBeschreibung sichtbar machen -------------------------------------------------------------------------- Problem (Denis-Screenshot 30.05. 16:30): in "Technische Daten" und "Auf einen Blick" Kacheln sind die FA-Icons aus pdp_design.py nicht sichtbar — im DB-HTML stehen `` etc., aber JTL/Mono rendert sie nicht. Vermutlich: HTMLPurifier strippt inline-style oder die Schrift-Variante. Fix mit Belt-and-Suspenders: (A) Force font-family + font-weight + display (B) Fallback ::before content per FA-Klassen-Name (falls fa-solid-Klasse vom Purifier weggefiltert ist und somit FA-CSS nicht greift) ========================================================================= */ /* (14.A) FA-Force für ALLE Icons im Beschreibungs-Tab + Kurzbeschreibung */ #tab-description i[class*="fa-"], #tab-description span[class*="fa-"], .product-description i[class*="fa-"], .product-description span[class*="fa-"], .shortdesc i[class*="fa-"], .shortdesc span[class*="fa-"], .tab-content i[class*="fa-"], .tab-content span[class*="fa-"] { display: inline-block !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; line-height: 1 !important; visibility: visible !important; } /* Solid-Style (Standard für die meisten FA-Icons) */ #tab-description .fa-solid, #tab-description i[class*="fa-"]:not([class*="fa-brands"]), .shortdesc .fa-solid, .shortdesc i[class*="fa-"]:not([class*="fa-brands"]), .product-description .fa-solid { font-family: "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900 !important; } /* Brand-Style (z.B. fa-windows, fa-google) */ #tab-description .fa-brands, #tab-description i.fa-windows, #tab-description i.fa-google, .shortdesc .fa-brands, .product-description .fa-brands, #tab-description i[class*="fa-brands"], .shortdesc i[class*="fa-brands"] { font-family: "Font Awesome 6 Brands", "FontAwesome" !important; font-weight: 400 !important; } /* (14.B) Fallback-Codepoints für die in pdp_design.py verwendeten Icons, falls FA-Klassen-CSS aus Theme nicht greift. Diese Liste deckt: - Spec-Icons (cpu, ram, ssd, display, wifi, keyboard, weight, industry, laptop, plug) - Brand-Icons (windows, google) - Prozess-Icons (laptop-file, screwdriver-wrench, spray-can-sparkles, laptop-medical, user) - Vorteile + Schild + Sonstige (circle-check, broom, shield-halved, headset, rotate-left, leaf, recycle, file-invoice, cart-shopping, star, sliders, ...) */ #tab-description .fa-microchip::before, .shortdesc .fa-microchip::before { content: "\f2db"; } #tab-description .fa-memory::before, .shortdesc .fa-memory::before { content: "\f538"; } #tab-description .fa-hard-drive::before, .shortdesc .fa-hard-drive::before { content: "\f0a0"; } #tab-description .fa-display::before, .shortdesc .fa-display::before { content: "\e163"; } #tab-description .fa-wifi::before, .shortdesc .fa-wifi::before { content: "\f1eb"; } #tab-description .fa-keyboard::before, .shortdesc .fa-keyboard::before { content: "\f11c"; } #tab-description .fa-weight-hanging::before, .shortdesc .fa-weight-hanging::before { content: "\f5cd"; } #tab-description .fa-industry::before, .shortdesc .fa-industry::before { content: "\f275"; } #tab-description .fa-laptop::before, .shortdesc .fa-laptop::before { content: "\f109"; } #tab-description .fa-plug::before, .shortdesc .fa-plug::before { content: "\f1e6"; } #tab-description .fa-laptop-file::before, .shortdesc .fa-laptop-file::before { content: "\e51d"; } #tab-description .fa-laptop-medical::before, .shortdesc .fa-laptop-medical::before { content: "\f812"; } #tab-description .fa-screwdriver-wrench::before, .shortdesc .fa-screwdriver-wrench::before { content: "\f7d9"; } #tab-description .fa-spray-can-sparkles::before, .shortdesc .fa-spray-can-sparkles::before { content: "\f5d0"; } #tab-description .fa-user::before, .shortdesc .fa-user::before { content: "\f007"; } #tab-description .fa-shield::before, .shortdesc .fa-shield::before { content: "\f132"; } #tab-description .fa-shield-halved::before, .shortdesc .fa-shield-halved::before { content: "\f3ed"; } #tab-description .fa-check::before, .shortdesc .fa-check::before { content: "\f00c"; } #tab-description .fa-circle-check::before, .shortdesc .fa-circle-check::before { content: "\f058"; } #tab-description .fa-broom::before, .shortdesc .fa-broom::before { content: "\f51a"; } #tab-description .fa-headset::before, .shortdesc .fa-headset::before { content: "\f590"; } #tab-description .fa-rotate-left::before, .shortdesc .fa-rotate-left::before { content: "\f2ea"; } #tab-description .fa-leaf::before, .shortdesc .fa-leaf::before { content: "\f06c"; } #tab-description .fa-recycle::before, .shortdesc .fa-recycle::before { content: "\f1b8"; } #tab-description .fa-star::before, .shortdesc .fa-star::before { content: "\f005"; } #tab-description .fa-star-half-stroke::before, .shortdesc .fa-star-half-stroke::before { content: "\f5c0"; } #tab-description .fa-magnifying-glass::before, .shortdesc .fa-magnifying-glass::before { content: "\f002"; } #tab-description .fa-clipboard-check::before, .shortdesc .fa-clipboard-check::before { content: "\f46c"; } #tab-description .fa-file-invoice::before, .shortdesc .fa-file-invoice::before { content: "\f570"; } #tab-description .fa-sliders::before, .shortdesc .fa-sliders::before { content: "\f1de"; } #tab-description .fa-table-list::before, .shortdesc .fa-table-list::before { content: "\e236"; } #tab-description .fa-bolt::before, .shortdesc .fa-bolt::before { content: "\f0e7"; } #tab-description .fa-feather-pointed::before, .shortdesc .fa-feather-pointed::before { content: "\f56b"; } #tab-description .fa-arrow-right::before, .shortdesc .fa-arrow-right::before { content: "\f061"; } #tab-description .fa-arrow-right-arrow-left::before, .shortdesc .fa-arrow-right-arrow-left::before { content: "\f0ec"; } #tab-description .fa-handshake-angle::before, .shortdesc .fa-handshake-angle::before { content: "\f4c4"; } #tab-description .fa-battery-full::before, .shortdesc .fa-battery-full::before { content: "\f240"; } #tab-description .fa-tag::before, .shortdesc .fa-tag::before { content: "\f02b"; } #tab-description .fa-circle-info::before, .shortdesc .fa-circle-info::before { content: "\f05a"; } #tab-description .fa-truck::before, .shortdesc .fa-truck::before { content: "\f0d1"; } #tab-description .fa-certificate::before, .shortdesc .fa-certificate::before { content: "\f0a3"; } #tab-description .fa-award::before, .shortdesc .fa-award::before { content: "\f559"; } /* Brand-Icons */ #tab-description .fa-windows::before, .shortdesc .fa-windows::before { content: "\f17a"; font-family: "Font Awesome 6 Brands", "FontAwesome" !important; font-weight: 400 !important; } #tab-description .fa-google::before, .shortdesc .fa-google::before { content: "\f1a0"; font-family: "Font Awesome 6 Brands", "FontAwesome" !important; font-weight: 400 !important; } #tab-description .fa-cc-paypal::before, .shortdesc .fa-cc-paypal::before { content: "\f1f4"; font-family: "Font Awesome 6 Brands", "FontAwesome" !important; font-weight: 400 !important; } #tab-description .fa-cc-visa::before, .shortdesc .fa-cc-visa::before { content: "\f1f0"; font-family: "Font Awesome 6 Brands", "FontAwesome" !important; font-weight: 400 !important; } #tab-description .fa-cc-mastercard::before, .shortdesc .fa-cc-mastercard::before { content: "\f1f1"; font-family: "Font Awesome 6 Brands", "FontAwesome" !important; font-weight: 400 !important; } /* (14.C) Falls Purifier das style="" Attribut auf komplett strippt: nutzt den umliegenden Span/Div als Color-Anchor — der Pseudo-element- Text erbt color: */ #tab-description span[style*="background:#c1ecca"] i, #tab-description span[style*="background:#c1ecca"] span, .shortdesc span[style*="background:#c1ecca"] i, .shortdesc span[style*="background:#c1ecca"] span { color: #383e42 !important; font-size: 18px !important; } /* Tabellen-Zeilen-Icons: 14px, anthrazit */ #tab-description td > span[style*="width:18px"] i, #tab-description td > span[style*="width:18px"] span, .shortdesc td > span[style*="width:18px"] i, .shortdesc td > span[style*="width:18px"] span { color: #383e42 !important; font-size: 14px !important; } /* ========================================================================= (14b) Konfig-in-Buy-Spalte-Stile DEAKTIVIERT (v16.9 zurück zu Mockup) -- Der Konfigurator ist wieder LINKS UNTER FOTO. Container in der Buy- Spalte (lm-konfig-buy) wird in v16.9 nicht mehr gerendert. */ .lm-konfig-buy { display: none !important; } /* ========================================================================= (15) v16.7 LAYOUT-FIX (Denis 30.05.2026, 16:40) -------------------------------------------------------------------------- Symptom v16.5/16.6: Buy-Spalte ist unter das Foto gerutscht statt daneben. Ursache: Override von info-manufacturer-wrapper-top hat das Bootstrap-Sub-Col-Layout zerschossen (siehe v16.7 details.tpl). Mini-Hero ist zurück in product-offer prepend — die Buy-Spalte ist damit wieder strukturell identisch zum Mono-Original. Zusätzlich: CSS-Force, falls das Bootstrap-Grid trotzdem mal wraps. ========================================================================= */ /* (15.1) v16.11 — 2-SPALTEN DETERMINISTISCH (Foto LINKS, Buy RECHTS) -------------------------------------------------------------------------- KEIN JS mehr fürs Layout. Der Konfigurator wird jetzt im Smarty direkt unter dem Foto gerendert (kein col-12-Block mehr in der Row), daher hat die Row nur noch 2 Cols: .product-gallery + .product-info. Wir zwingen die Row auf flex und die beiden Cols auf 58/42 mit `order`, damit Foto IMMER links und Buy-Box IMMER rechts steht — unabhängig vom Mono-Setting. !important schlägt Bootstrap (custom.css lädt danach). */ .product-detail.row, #product-offer, #product-offer.row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; } .product-detail .product-gallery, #product-offer .product-gallery { order: 1 !important; } .product-detail .product-info, #product-offer .product-info { order: 2 !important; } @media (min-width: 992px) { .product-detail .product-gallery, #product-offer .product-gallery { flex: 0 0 58.333% !important; max-width: 58.333% !important; padding-right: 24px; } .product-detail .product-info, #product-offer .product-info { flex: 0 0 41.666% !important; max-width: 41.666% !important; } } @media (min-width: 768px) and (max-width: 991px) { .product-detail .product-gallery, #product-offer .product-gallery { flex: 0 0 52% !important; max-width: 52% !important; padding-right: 16px; } .product-detail .product-info, #product-offer .product-info { flex: 0 0 48% !important; max-width: 48% !important; } } /* Mobile (<768): unter-/übereinander, Foto zuerst */ @media (max-width: 767px) { .product-detail .product-gallery, #product-offer .product-gallery, .product-detail .product-info, #product-offer .product-info { flex: 0 0 100% !important; max-width: 100% !important; } } /* (15.2) Sub-Specs-Zeile: ab und an erlaubte Spaces (z.B. „8 GB" statt „8GB" — der Cut-Regex matcht beides per `\d+\s?GB`. */ .lm-subspecs { color: #707070; font-size: 13.5px; margin: 4px 0 8px; line-height: 1.4; font-weight: 400; letter-spacing: .1px; } .lm-subspecs b { color: #2B2B2B; font-weight: 700; } /* ========================================================================= (16) v16.12 — NATIVEN JTL-KONFIGURATOR KOMPAKT (Denis: "viel zu groß") -------------------------------------------------------------------------- Verifizierte echte Klassen aus Remake config_options_list.tpl / config_container.tpl: .cfg-group = je Konfig-Gruppe .h2.hr-sect-line = Gruppen-Überschrift ("PC Garantieverlängerung") .cfg-group-info = "Bitte wählen..."-Badge .group-description = ROW mit langer Beschreibung + RIESEN-BILD (Schild) .config-option-dropdown = Dropdown-Wrapper .custom-select = das