/* Product Page Addon - Dark Mode Overrides (Lagom2-tauglich) ----------------------------------------------------------------- WICHTIG: Der Dark-Modus wird AUSSCHLIESSLICH über die Theme-Klasse gesteuert (Lagom2 setzt `lagom-dark-mode` auf /), NICHT über @media (prefers-color-scheme). Damit folgt das Produktblatt exakt dem Hell/Dunkel-Umschalter von Lagom2 – auch wenn das Betriebssystem anders eingestellt ist. clientstyle.css ist vollständig variablen-getrieben (var(--pp-*)). Es genügt daher, im Dark-Scope die --pp-* Variablen umzudefinieren; die wenigen nicht-variablen Stellen werden explizit nachgezogen. Scope-Selektoren (führend Lagom2, danach generische Fallbacks): .lagom-dark-mode → Lagom2 (Klasse auf html ODER body) [data-bs-theme=dark], html.dark, body.dark-mode → Fallbacks */ /* ---- Helle Standardwerte (Light Mode) ---- */ .pp-wrapper { --pp-font: inherit; --pp-accent: var(--primary, var(--bs-primary, #0d6efd)); --pp-accent-2: var(--secondary, #6c757d); --pp-card-bg: #ffffff; --pp-header-bg: #f5f7fb; --pp-text: #1f2937; --pp-muted: #6b7280; --pp-border: rgba(15, 23, 42, 0.12); --pp-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); --pp-link: var(--pp-accent); --pp-surface: rgba(255, 255, 255, 0.55); --pp-star: #f5a623; --pp-star-off: rgba(31, 41, 55, 0.25); } /* ========================================================================== DARK MODE – nur wenn das Theme den Dunkelmodus aktiv schaltet ========================================================================== */ /* 1) Variablen umdefinieren (kaskadiert in alle var(--pp-*)-Regeln) */ .lagom-dark-mode .pp-wrapper, [data-bs-theme="dark"] .pp-wrapper, html.dark .pp-wrapper, body.dark-mode .pp-wrapper { --pp-accent: #60a5fa; --pp-card-bg: rgba(36, 36, 36, 0.92); --pp-header-bg: rgba(255, 255, 255, 0.04); --pp-text: #e5e7eb; --pp-muted: #9ca3af; --pp-border: rgba(255, 255, 255, 0.12); --pp-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); --pp-link: #93c5fd; --pp-surface: rgba(255, 255, 255, 0.04); --pp-star-off: rgba(229, 231, 235, 0.25); background: var(--pp-card-bg); color: var(--pp-text); } /* 2) Header */ .lagom-dark-mode .pp-wrapper .pp-header, [data-bs-theme="dark"] .pp-wrapper .pp-header, html.dark .pp-wrapper .pp-header, body.dark-mode .pp-wrapper .pp-header { background: var(--pp-header-bg); border-bottom: 1px solid var(--pp-border); } /* 3) Überschriften / Text / Listen */ .lagom-dark-mode .pp-wrapper h1, .lagom-dark-mode .pp-wrapper h2, .lagom-dark-mode .pp-wrapper h3, .lagom-dark-mode .pp-wrapper h4, .lagom-dark-mode .pp-wrapper h5, .lagom-dark-mode .pp-wrapper h6, .lagom-dark-mode .pp-wrapper p, .lagom-dark-mode .pp-wrapper span, .lagom-dark-mode .pp-wrapper li, [data-bs-theme="dark"] .pp-wrapper h1, [data-bs-theme="dark"] .pp-wrapper h2, [data-bs-theme="dark"] .pp-wrapper h3, [data-bs-theme="dark"] .pp-wrapper h4, [data-bs-theme="dark"] .pp-wrapper h5, [data-bs-theme="dark"] .pp-wrapper h6, [data-bs-theme="dark"] .pp-wrapper p, [data-bs-theme="dark"] .pp-wrapper span, [data-bs-theme="dark"] .pp-wrapper li, html.dark .pp-wrapper h1, html.dark .pp-wrapper h2, html.dark .pp-wrapper h3, html.dark .pp-wrapper h4, html.dark .pp-wrapper h5, html.dark .pp-wrapper h6, html.dark .pp-wrapper p, html.dark .pp-wrapper span, html.dark .pp-wrapper li, body.dark-mode .pp-wrapper h1, body.dark-mode .pp-wrapper h2, body.dark-mode .pp-wrapper h3, body.dark-mode .pp-wrapper h4, body.dark-mode .pp-wrapper h5, body.dark-mode .pp-wrapper h6, body.dark-mode .pp-wrapper p, body.dark-mode .pp-wrapper span, body.dark-mode .pp-wrapper li { color: var(--pp-text); } /* 4) Links */ .lagom-dark-mode .pp-wrapper .pp-link, .lagom-dark-mode .pp-wrapper a#totalReviews, [data-bs-theme="dark"] .pp-wrapper .pp-link, [data-bs-theme="dark"] .pp-wrapper a#totalReviews, html.dark .pp-wrapper .pp-link, html.dark .pp-wrapper a#totalReviews, body.dark-mode .pp-wrapper .pp-link, body.dark-mode .pp-wrapper a#totalReviews { color: var(--pp-link) !important; } /* 5) Karten- / Review-Flächen */ .lagom-dark-mode .pp-wrapper .review, .lagom-dark-mode .pp-wrapper .review-card, .lagom-dark-mode .pp-wrapper .review-response, [data-bs-theme="dark"] .pp-wrapper .review, [data-bs-theme="dark"] .pp-wrapper .review-card, [data-bs-theme="dark"] .pp-wrapper .review-response, html.dark .pp-wrapper .review, html.dark .pp-wrapper .review-card, html.dark .pp-wrapper .review-response, body.dark-mode .pp-wrapper .review, body.dark-mode .pp-wrapper .review-card, body.dark-mode .pp-wrapper .review-response { background-color: var(--pp-surface) !important; border-color: var(--pp-border) !important; } /* 6) Sekundärer Text (Datum, Rating-Labels …) */ .lagom-dark-mode .pp-wrapper .review-message, .lagom-dark-mode .pp-wrapper .review-date, .lagom-dark-mode .pp-wrapper .rating-text, .lagom-dark-mode .pp-wrapper .rating-label, .lagom-dark-mode .pp-wrapper .rating-count, .lagom-dark-mode .pp-wrapper .total-reviews, [data-bs-theme="dark"] .pp-wrapper .review-message, [data-bs-theme="dark"] .pp-wrapper .review-date, [data-bs-theme="dark"] .pp-wrapper .rating-text, [data-bs-theme="dark"] .pp-wrapper .rating-label, [data-bs-theme="dark"] .pp-wrapper .rating-count, [data-bs-theme="dark"] .pp-wrapper .total-reviews, html.dark .pp-wrapper .review-message, html.dark .pp-wrapper .review-date, html.dark .pp-wrapper .rating-text, html.dark .pp-wrapper .rating-label, html.dark .pp-wrapper .rating-count, html.dark .pp-wrapper .total-reviews, body.dark-mode .pp-wrapper .review-message, body.dark-mode .pp-wrapper .review-date, body.dark-mode .pp-wrapper .rating-text, body.dark-mode .pp-wrapper .rating-label, body.dark-mode .pp-wrapper .rating-count, body.dark-mode .pp-wrapper .total-reviews { color: var(--pp-muted) !important; } /* 7) Rating-Balken-Hintergrund (in clientstyle hart auf hellgrau) */ .lagom-dark-mode .pp-wrapper .rating-bar, [data-bs-theme="dark"] .pp-wrapper .rating-bar, html.dark .pp-wrapper .rating-bar, body.dark-mode .pp-wrapper .rating-bar { background-color: rgba(255, 255, 255, 0.10) !important; } /* 8) Tabs */ .lagom-dark-mode .pp-wrapper .tab, [data-bs-theme="dark"] .pp-wrapper .tab, html.dark .pp-wrapper .tab, body.dark-mode .pp-wrapper .tab { color: var(--pp-muted); } .lagom-dark-mode .pp-wrapper .tab:hover, .lagom-dark-mode .pp-wrapper .tab.active, [data-bs-theme="dark"] .pp-wrapper .tab:hover, [data-bs-theme="dark"] .pp-wrapper .tab.active, html.dark .pp-wrapper .tab:hover, html.dark .pp-wrapper .tab.active, body.dark-mode .pp-wrapper .tab:hover, body.dark-mode .pp-wrapper .tab.active { color: var(--pp-accent); border-bottom-color: var(--pp-accent); } /* 9) Sterne-„leer"-Farbe */ .lagom-dark-mode .pp-wrapper .stars, [data-bs-theme="dark"] .pp-wrapper .stars, html.dark .pp-wrapper .stars, body.dark-mode .pp-wrapper .stars { --star-background: var(--pp-star-off); } /* 10) "See Also" Related-Karten (liegen AUSSERHALB .pp-wrapper) */ .lagom-dark-mode .container_seealso .box, [data-bs-theme="dark"] .container_seealso .box, html.dark .container_seealso .box, body.dark-mode .container_seealso .box { background: #2a2a2a !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Titel hat inline style="color:black" -> nur mit !important überschreibbar */ .lagom-dark-mode .container_seealso .text-container, .lagom-dark-mode .container_seealso .text-container b, .lagom-dark-mode .container_seealso .product-descriptionn, [data-bs-theme="dark"] .container_seealso .text-container, [data-bs-theme="dark"] .container_seealso .text-container b, [data-bs-theme="dark"] .container_seealso .product-descriptionn, html.dark .container_seealso .text-container, html.dark .container_seealso .text-container b, html.dark .container_seealso .product-descriptionn, body.dark-mode .container_seealso .text-container, body.dark-mode .container_seealso .text-container b, body.dark-mode .container_seealso .product-descriptionn { color: #e5e7eb !important; }