/* ==========================================================================
   dark.css — Feinschliff für den Dunkelmodus + Zugänglichkeit
   Der Großteil des Dark-Modes entsteht bereits durch die Token-Umschaltung
   in tokens.css. Hier stehen nur ergänzende Politur-Regeln.
   ========================================================================== */

/* Weiche Übergänge beim Umschalten (nur Flächen, nicht alles) */
.card, .product, .step, .price, .contact-box, .map-box,
.hero-panel, .proof, .site-header, .legal article,
.form-field input, .form-field select, .form-field textarea {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Kein Umschalt-Flackern, solange das Theme noch nicht gesetzt wurde */
html.theme-preload * { transition: none !important; }

/* Bilder im Dunkelmodus einen Hauch abdunkeln (angenehmer für die Augen) */
:root[data-theme="dark"] .product img,
:root[data-theme="dark"] .image-card img,
:root[data-theme="dark"] .portrait img { filter: brightness(.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product img,
  :root:not([data-theme="light"]) .image-card img,
  :root:not([data-theme="light"]) .portrait img { filter: brightness(.92); }
}

/* Nutzer, die reduzierte Bewegung wünschen, respektieren */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}