/* ══════════════════════════════════════════════════════════════════════════
   Dark-/White-Mode – Feinschliff (Modul „dark_mode")
   Die Masse der Dark-Regeln wird automatisch aus style.css/premium.css erzeugt
   (css/theme-dark.gen.css, siehe includes/theme.php). Hier stehen nur der
   Umschalter, Ausnahmen und von Hand abgestimmte Stellen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Umschalter in der Kopfzeile ── */
.pb-theme-toggle svg{width:20px;height:20px;fill:currentColor;}
.pb-theme-toggle .pb-theme-ico-sun{display:none;}
html[data-theme="dark"] .pb-theme-toggle .pb-theme-ico-sun{display:inline-block;}
html[data-theme="dark"] .pb-theme-toggle .pb-theme-ico-moon{display:none;}

html[data-theme="dark"]{color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}
html[data-theme="dark"] body{background:#121212;color:#dedede;}

/* Status-Farben (inline) auf dunklen Flächen: hellere Töne */
html[data-theme="dark"] [style*="color:#10b981"]{color:#34d399 !important;}
html[data-theme="dark"] [style*="color:#ef4444"]{color:#f87171 !important;}
html[data-theme="dark"] [style*="color:#888"],html[data-theme="dark"] [style*="color: #888"],
html[data-theme="dark"] [style*="color:#999"],html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#9ca3af"],html[data-theme="dark"] [style*="color: #9ca3af"]{color:#ababab !important;}

/* ── White-Mode: Startseite ──
   Die Startseite wurde im Page Builder mit schwarzem Seitenhintergrund und
   weißen Zwischenüberschriften gestaltet. Im hellen Design bekommt sie eine
   weiße Fläche mit dunklen Überschriften; die dunklen Bänder (Hero, Reifen-
   suche, Instagram) bleiben als Akzente erhalten. */
html[data-theme="light"] body#ipmn{background-color:#ffffff;}
html[data-theme="light"] #ipmn > h3 > span,
html[data-theme="light"] #ipmn #i7jgf,html[data-theme="light"] #ipmn #ir7je,html[data-theme="light"] #ipmn #ifb9xb{color:#111111;}
html[data-theme="light"] #ipmn > hr{border-top-color:#e5e7eb;}
html[data-theme="dark"] body#ipmn{background-color:#000000;}

/* ── Dark-Mode: Produktfotos ──
   Die Produktfotos haben einen weißen Hintergrund. Damit kein weißes Rechteck
   in einer dunklen Fläche „schwebt", bleibt die gesamte Bildfläche weiß –
   das wirkt wie ein bewusst gesetztes Bildfeld. */
html[data-theme="dark"] .product-card-img-wrap,
html[data-theme="dark"] .product-main-img,
html[data-theme="dark"] .product-thumb,
html[data-theme="dark"] .rv-card-img,
html[data-theme="dark"] .pb-fit-img,
html[data-theme="dark"] .cart-item-img,
html[data-theme="dark"] .atc-modal-product img{background:#ffffff !important;}
html[data-theme="dark"] .product-main-img{border-color:#343434;}


/* ── White-Mode: „Reifen finden" (Reifen-/Fahrzeug-Suche) ──
   Der Kasten ist dunkel gestaltet; im hellen Design wird er hell, die roten
   Akzente (aktive Saison, Knopf) bleiben. */
html[data-theme="light"] .tire-finder.vts-widget{color:#111111;background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 6px 24px rgba(0,0,0,.08);}
html[data-theme="light"] .vts-widget .tire-finder-title{color:#111111;}
html[data-theme="light"] .vts-sub{color:#5f5f5f;}
html[data-theme="light"] .vts-tab{color:#6b6b6b;}
html[data-theme="light"] .vts-tab:hover,html[data-theme="light"] .vts-tab.active{color:#111111;}
html[data-theme="light"] .vts-seasons,
html[data-theme="light"] .vts-size-inputs,
html[data-theme="light"] .vts-select select{background:#f5f5f5;border-color:#d4d4d8;}
html[data-theme="light"] .vts-size-inputs:hover{border-color:#a3a3a3;}
html[data-theme="light"] .vts-size-inputs:focus-within,html[data-theme="light"] .vts-select select:focus{border-color:#b00000;}
html[data-theme="light"] .vts-chip span{color:#5f5f5f;}
html[data-theme="light"] .vts-chip:hover span{color:#111111;}
html[data-theme="light"] .vts-chip input:checked + span{background:#b00000;color:#ffffff;}
html[data-theme="light"] .vts-chip input:focus-visible + span{outline-color:#111111;}
html[data-theme="light"] .vts-size-box span{color:#6b6b6b;}
html[data-theme="light"] .vts-size-box input{color:#111111;}
html[data-theme="light"] .vts-size-box input::placeholder{color:#8a8a8a;}
html[data-theme="light"] .vts-size-sep{color:#8a8a8a;}
html[data-theme="light"] .vts-size-r{color:#b00000;}
html[data-theme="light"] .vts-select select{color:#111111;}
html[data-theme="light"] .vts-select select option{background:#ffffff;color:#111111;}
html[data-theme="light"] .vts-select::after{border-color:#5f5f5f;}
@media (max-width:768px){html[data-theme="light"] .vts-tabs{border-bottom-color:#e0e0e0;}}