/* =================================================== Night / Day Theme — Dark Mode Overrides Applied when has the class "dark" =================================================== */ /* ── Smooth transition for theme switch ───────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 200ms; transition-timing-function: ease; } /* Keep animation-heavy elements unaffected */ .hero-card, .animate-float, .hero-badge, .hero-line, .hero-sub, .hero-cta, .hero-trust, .card-animate, .reveal, canvas { transition: none; } /* ── Body ─────────────────────────────────────────── */ html.dark body { background-color: #111111; color: #f0f0f0; } /* ── Generic white backgrounds → dark surface ─────── */ html.dark .bg-white { background-color: #1a1a1a !important; } /* ── Dark sections stay dark in both modes ────────── */ html.dark .bg-gray-950, html.dark .bg-gray-900 { /* already dark — keep as-is, but unset any inherited text overrides */ background-color: revert; } html.dark .bg-gray-950 .text-white { color: #ffffff !important; } html.dark .bg-gray-950 .text-gray-400 { color: #9ca3af !important; } html.dark .bg-gray-950 .text-gray-500 { color: #6b7280 !important; } html.dark .bg-gray-950 .text-gray-600 { color: #4b5563 !important; } /* ── Gray-50 / Gray-50 variants ───────────────────── */ html.dark .bg-gray-50 { background-color: #1f1f1f !important; } html.dark section.bg-gray-50\/80, html.dark .bg-gray-50\/50 { background-color: rgba(31,31,31,0.8) !important; } /* ── Gray-100 ─────────────────────────────────────── */ html.dark .bg-gray-100 { background-color: #2a2a2a !important; } /* ── Text ─────────────────────────────────────────── */ html.dark .text-gray-900 { color: #f0f0f0 !important; } html.dark .text-gray-800 { color: #e5e7eb !important; } html.dark .text-gray-700 { color: #d1d5db !important; } html.dark .text-gray-600 { color: #9ca3af !important; } html.dark .text-gray-500 { color: #6b7280 !important; } html.dark .text-gray-400 { color: #4b5563 !important; } html.dark .text-gray-300 { color: #374151 !important; } /* ── Borders ──────────────────────────────────────── */ html.dark .border-gray-100 { border-color: #2a2a2a !important; } html.dark .border-gray-200 { border-color: #2f2f2f !important; } html.dark .border-t { border-top-color: #2a2a2a !important; } html.dark .border-b { border-bottom-color: #2a2a2a !important; } /* ── Hover states ─────────────────────────────────── */ html.dark .hover\:bg-gray-50:hover { background-color: #252525 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #2a2a2a !important; } html.dark .hover\:text-gray-900:hover { color: #ffffff !important; } html.dark .hover\:text-gray-600:hover { color: #9ca3af !important; } /* ── Navbar ───────────────────────────────────────── */ html.dark .navbar-scrolled { background: rgba(17,17,17,0.97) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } html.dark #mobile-menu { background-color: #1a1a1a !important; border-top-color: #2a2a2a !important; } /* ── Brand light backgrounds ──────────────────────── */ html.dark .bg-brand-50 { background-color: #052e16 !important; } html.dark .bg-brand-100 { background-color: #14532d !important; } html.dark .text-brand-700 { color: #4ade80 !important; } /* ── Filter buttons (katalog) ─────────────────────── */ html.dark .filter-btn:not(.active) { color: #d1d5db; border-color: #2f2f2f; background-color: transparent; } html.dark .filter-btn:not(.active):hover { background-color: #2a2a2a; border-color: #374151; } html.dark .filter-btn.active { background-color: #f0f0f0; color: #111111; } /* ── Sort select ──────────────────────────────────── */ html.dark select { background-color: #1a1a1a !important; color: #f0f0f0 !important; border-color: #2f2f2f !important; } /* ── Glassmorphism card ───────────────────────────── */ html.dark .glass { background: rgba(30,30,30,0.8) !important; border-color: rgba(255,255,255,0.08) !important; } /* ── Sticky mobile CTA (produkt) ──────────────────── */ html.dark #sticky-cta > div { background: rgba(17,17,17,0.97) !important; border-top-color: #2a2a2a !important; } /* ── Other product value links ────────────────────── */ html.dark a.border.border-gray-200 { border-color: #2f2f2f !important; color: #d1d5db !important; } html.dark a.border.border-gray-200:hover { border-color: #22c55e !important; color: #22c55e !important; } /* ── Scrollbar ────────────────────────────────────── */ html.dark ::-webkit-scrollbar-track { background: #1a1a1a; } html.dark ::-webkit-scrollbar-thumb { background: #374151; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; } /* ── Site logo — dark mode ────────────────────────── */ html.dark .site-logo { color: #f0f0f0 !important; } /* ── Carousel dots + progress ────────────────────── */ html.dark .carousel-dot { background: #374151 !important; } html.dark .carousel-dot.active { background: #22c55e !important; } html.dark .carousel-progress-bar { background: rgba(34, 197, 94, 0.08) !important; } /* ── Favorites showcase — dark overrides for light cards ── */ html.dark .fav-magazine { background: #1a1a1a !important; border-color: rgba(255,255,255,0.06) !important; } html.dark .fav-magazine .text-gray-900 { color: #f0f0f0 !important; } html.dark .fav-magazine .text-gray-400 { color: #6b7280 !important; } html.dark .fav-magazine .text-gray-500 { color: #6b7280 !important; } html.dark .fav-magazine img[style*="brightness(0)"] { filter: brightness(10) opacity(0.7) !important; } html.dark .fav-polaroid { background: #1e1e1e !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) !important; } html.dark .fav-polaroid .text-gray-800 { color: #f0f0f0 !important; } html.dark .fav-polaroid .text-gray-400 { color: #6b7280 !important; } html.dark .fav-pricetag { background: #1a1a1a !important; border-color: #2f2f2f !important; } html.dark .fav-pricetag::before { border-color: #444 !important; } html.dark .fav-pricetag::after { background: #444 !important; } html.dark .fav-pricetag .text-gray-800 { color: #f0f0f0 !important; } html.dark .fav-pricetag .text-gray-400 { color: #6b7280 !important; } html.dark .fav-coupon { background: linear-gradient(135deg, #1f1a1a 0%, #1a1a1a 50%, #1f1a18 100%) !important; border-color: #3d2f2a !important; } html.dark .fav-coupon .coupon-cut { background: #0a0a0a !important; border-color: #3d2f2a !important; } html.dark .fav-coupon .text-gray-500 { color: #9ca3af !important; } html.dark .fav-coupon .text-gray-400 { color: #6b7280 !important; } html.dark .fav-coupon .border-dashed { border-color: #3d2f2a !important; } /* ── Brand visuals on product page — dark overrides ── */ /* Amazon: already dark charcoal — no bg change needed */ html.dark .bv-amazon { border-color: transparent !important; } html.dark .bv-rossmann { background: linear-gradient(135deg, #1f1a1a 0%, #1a1a1a 50%, #1f1a18 100%) !important; border-color: #3d2f2a !important; } html.dark .bv-rossmann .coupon-cut { background: #111 !important; border-color: #3d2f2a !important; } html.dark .bv-rossmann .coupon-divider { border-left-color: #3d2f2a !important; } html.dark .bv-rossmann .text-gray-500 { color: #9ca3af !important; } html.dark .bv-rossmann .text-gray-400 { color: #6b7280 !important; } html.dark .bv-kaufland { background: #1a1a1a !important; border-color: #2a2a2a !important; } html.dark .bv-kaufland::after { background: linear-gradient(135deg, #1a1a1a 33.33%, transparent 33.33%) -12px 0, linear-gradient(225deg, #1a1a1a 33.33%, transparent 33.33%) -12px 0; background-size: 24px 16px; } html.dark .bv-kaufland .receipt-line { border-bottom-color: #2a2a2a !important; } html.dark .bv-kaufland .receipt-stamp { border-color: #e60a14 !important; } html.dark .bv-kaufland .text-gray-900 { color: #f0f0f0 !important; } html.dark .bv-kaufland .text-gray-500 { color: #9ca3af !important; } html.dark .bv-kaufland .text-gray-400 { color: #6b7280 !important; } html.dark .bv-otto { background: #1a1a1a !important; border-color: #2a2a2a !important; } html.dark .bv-otto .text-gray-900 { color: #f0f0f0 !important; } html.dark .bv-otto .text-gray-400 { color: #6b7280 !important; } html.dark .bv-ikea { background: #1a1a1a !important; border-color: #2f2f2f !important; } html.dark .bv-ikea::before { border-color: #444 !important; } html.dark .bv-ikea::after { background: #444 !important; } html.dark .bv-ikea .tag-stripe { border-radius: 1.25rem 1.25rem 0 0; } html.dark .bv-ikea .text-gray-800 { color: #f0f0f0 !important; } html.dark .bv-ikea .text-gray-400 { color: #6b7280 !important; } html.dark .bv-airbnb { background: #1e1e1e !important; box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) !important; } html.dark .bv-airbnb .text-gray-800 { color: #f0f0f0 !important; } html.dark .bv-airbnb .text-gray-400 { color: #6b7280 !important; } html.dark .bv-airbnb .postcard-lines span { background: #333; } /* MediaMarkt, PlayStation, Douglas are already dark — minimal overrides */ html.dark .bv-mediamarkt { border-color: rgba(255,255,255,0.06) !important; } html.dark .bv-playstation { border-color: rgba(100,100,255,0.1) !important; } html.dark .bv-douglas { border-color: rgba(212,175,55,0.15) !important; } /* ── Theme toggle button ──────────────────────────── */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: transparent; border: none; cursor: pointer; color: inherit; transition: background-color 200ms ease; } .theme-toggle-btn:hover { background-color: rgba(0,0,0,0.06); } html.dark .theme-toggle-btn:hover { background-color: rgba(255,255,255,0.08); } .theme-toggle-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Show sun in dark mode, moon in light mode */ .theme-toggle-btn .icon-moon { display: block; } .theme-toggle-btn .icon-sun { display: none; } html.dark .theme-toggle-btn .icon-moon { display: none; } html.dark .theme-toggle-btn .icon-sun { display: block; }