/* ============================================================
   Der Hausmeister Haake · Dunkelmodus
   Folgt der Systemeinstellung und lässt sich über den
   Schalter im Seitenkopf manuell umstellen.
   ============================================================ */

/* ---------- Farbwerte ---------- */
:root[data-theme="dark"] {
  --gruen:        #58B838;
  --gruen-dunkel: #6DC94E;
  --gruen-tief:   #081408;
  --gruen-blass:  #16301A;
  --gruen-linie:  #2E5230;

  --bg:           #0C1E0F;
  --flaeche:      #132A16;
  --text:         #D6E4D2;
  --text-hell:    #A3B99F;
  --linie:        #24421F;
  --titel:        #F1F8ED;

  --schatten:      0 2px 10px rgba(0, 0, 0, .45);
  --schatten-hoch: 0 12px 34px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gruen:        #58B838;
    --gruen-dunkel: #6DC94E;
    --gruen-tief:   #081408;
    --gruen-blass:  #16301A;
    --gruen-linie:  #2E5230;

    --bg:           #0C1E0F;
    --flaeche:      #132A16;
    --text:         #D6E4D2;
    --text-hell:    #A3B99F;
    --linie:        #24421F;
    --titel:        #F1F8ED;

    --schatten:      0 2px 10px rgba(0, 0, 0, .45);
    --schatten-hoch: 0 12px 34px rgba(0, 0, 0, .6);
  }
}

/* ---------- Hintergrundbilder ---------- */
:root[data-theme="dark"] body { background-image: url("/images/hintergrund-dunkel.jpg?v=202607300417"); }
:root[data-theme="dark"] .abschnitt-ziegel { background-image: url("/images/hintergrund-dunkel-mauer.jpg?v=202607300417"); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: url("/images/hintergrund-dunkel.jpg?v=202607300417"); }
  :root:not([data-theme="light"]) .abschnitt-ziegel { background-image: url("/images/hintergrund-dunkel-mauer.jpg?v=202607300417"); }
}

/* ---------- Flächen und Kanten ---------- */
:root[data-theme="dark"] .site-header     { background: rgba(10, 26, 12, .96); }
:root[data-theme="dark"] .infoleiste      { background: rgba(8, 20, 8, .96); }
:root[data-theme="dark"] .haupt-nav.offen { background: #0A1A0C; }
:root[data-theme="dark"] .abschnitt-weiss { background: rgba(10, 26, 12, .92); }
:root[data-theme="dark"] .leistungen {
  background: linear-gradient(180deg, rgba(88, 184, 56, 0) 0%, rgba(88, 184, 56, .10) 100%);
}
:root[data-theme="dark"] .karte,
:root[data-theme="dark"] .kontakt-feld,
:root[data-theme="dark"] .zahl,
:root[data-theme="dark"] .liste li,
:root[data-theme="dark"] .merkkasten    { background: rgba(19, 42, 22, .93); border-color: var(--linie); }
:root[data-theme="dark"] .notdienst     { background: rgba(8, 20, 8, .95); border: 1px solid var(--gruen-linie); }
:root[data-theme="dark"] .notdienst p   { color: #B7CFB0; }
:root[data-theme="dark"] .site-footer   { background: #081408; border-top: 1px solid var(--linie); }
:root[data-theme="dark"] .site-footer p { color: #9DB397; }
:root[data-theme="dark"] .knopf-weiss   { background: var(--flaeche); }
:root[data-theme="dark"] .bild-plakette { background: rgba(19, 42, 22, .96); border: 1px solid var(--gruen-linie); }
:root[data-theme="dark"] .anrufbalken   { background: #0A1A0C; }
:root[data-theme="dark"] .anrufbalken .a-mail { background: var(--gruen-blass); color: var(--titel); }
:root[data-theme="dark"] ::selection    { background: var(--gruen); color: #06180A; }

/* Dasselbe, wenn das System auf dunkel steht und nichts manuell gewählt wurde */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header     { background: rgba(10, 26, 12, .96); }
  :root:not([data-theme="light"]) .infoleiste      { background: rgba(8, 20, 8, .96); }
  :root:not([data-theme="light"]) .haupt-nav.offen { background: #0A1A0C; }
  :root:not([data-theme="light"]) .abschnitt-weiss { background: rgba(10, 26, 12, .92); }
  :root:not([data-theme="light"]) .karte,
  :root:not([data-theme="light"]) .kontakt-feld,
  :root:not([data-theme="light"]) .zahl,
  :root:not([data-theme="light"]) .liste li      { background: rgba(19, 42, 22, .93); border-color: var(--linie); }
  :root:not([data-theme="light"]) .notdienst     { background: rgba(8, 20, 8, .95); border: 1px solid var(--gruen-linie); }
  :root:not([data-theme="light"]) .notdienst p   { color: #B7CFB0; }
  :root:not([data-theme="light"]) .site-footer   { background: #081408; border-top: 1px solid var(--linie); }
  :root:not([data-theme="light"]) .bild-plakette { background: rgba(19, 42, 22, .96); border: 1px solid var(--gruen-linie); }
  :root:not([data-theme="light"]) .anrufbalken   { background: #0A1A0C; }
}