/* ══════════════════════════════════════════════════════════════════
   DUNKELMODUS – greift automatisch, wenn Handy/Computer auf "dunkel" steht.
   Einbinden pro Seite (nur Kundenseiten, schrittweise):
     <meta name="color-scheme" content="light dark" />
     <link rel="stylesheet" href="dark-mode.css" />
   Die meta-Angabe sagt dem Browser, dass die Seite selbst dunkel kann –
   dadurch färbt z.B. Samsung Internet sie nicht mehr zwangsweise um.

   Alle Regeln beginnen mit :root, damit sie die Styles der per fetch()
   nachgeladenen Navbar/Footer (die später im Dokument stehen) überstimmen.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --dm-bg: #121212;          /* Seitenhintergrund */
    --dm-surface: #1c1c1c;     /* Karten, Felder, abgesetzte Bereiche */
    --dm-border: #2c2c2c;
    --dm-text: #f2f2f2;
    --dm-muted: #a8a8a8;
  }

  :root body {
    background: var(--dm-bg);
    color: var(--dm-text);
  }

  /* Schwarze Linien-Icons (SVG) → weiss */
  :root .burger-icon,
  :root .icon-basket,
  :root .search-toggle-btn img,
  :root .nav-search-bar img,
  :root .mobile-overlay nav img {
    filter: invert(1);
  }

  /* ── NAVBAR ── */
  :root header {
    background: var(--dm-bg);
    border-bottom-color: var(--dm-border);
  }
  :root .nav-left a { color: var(--dm-text); }
  :root .logo.logo-light { display: none; }
  :root .logo.logo-dark { display: block; }

  :root .cart-icon,
  :root .search-toggle-btn { color: var(--dm-text); }
  :root .cart-badge { background: #fff; color: #111; }

  :root .nav-search-bar { background: var(--dm-surface); }
  :root .nav-search-bar i,
  :root .nav-search-input { color: var(--dm-text); }
  :root .nav-search-input::placeholder { color: var(--dm-muted); }

  /* Mobiles Vollbild-Menü */
  :root .mobile-overlay { background: var(--dm-bg); color: var(--dm-text); }
  :root .mobile-overlay .close-icon { color: var(--dm-text); }
  :root .mobile-overlay nav a { border-bottom-color: var(--dm-border); color: var(--dm-text); }
  :root .mobile-overlay nav a span { color: var(--dm-muted); }
  :root .mobile-overlay nav a span[style] { color: var(--dm-text) !important; } /* Inline-Farbe "Online-Shop" */

  /* ── TOPBAR & FOOTER ── sind bereits schwarz; Footer nur leicht vom Seitenhintergrund absetzen */
  :root .main-footer { background: #000; border-top: 1px solid var(--dm-border); }

  /* ── STARTSEITE (index.html) ── */
  :root .products .subline { color: var(--dm-muted); }
  :root .product-card { background: var(--dm-surface); border-color: var(--dm-border); }
  :root .product-card .text p { color: var(--dm-muted); }

  :root .about-icons { background-color: var(--dm-surface); }
  :root .icon-item p { color: var(--dm-muted); }
  :root .icon-item img { filter: invert(1); }
  :root .icon-item i { color: var(--dm-text) !important; } /* Inline color:black */

  :root .about-btn { color: var(--dm-text); border-color: #555; }
  :root .about-btn:hover { color: #fff; border-color: #888; }
}