/* Dunkles Design für „Die kleinen Strolche“ e. V.
   Nach dem Markenhandbuch, S. 7 „Gut lesbare Kombinationen“ (Petrol mit
   Akzent Gelb und Text in Weiß) und dem Petrol-Thema im Grafik-Generator des
   Markenkits: Grund in Petrol, große Überschriften und Kategorie-Zeilen in
   Sonnengelb, Text in Weiß, Logo und Figuren in den weißen Kit-Varianten,
   Strolch-Linie in Himmelblau und Sonnengelb.

   Eingebunden mit media="(prefers-color-scheme: dark)" und damit ohne
   JavaScript an die Systemeinstellung gekoppelt. theme.js setzt das
   media-Attribut auf "all" oder "not all", wenn jemand das Design über den
   Schalter im Header festlegt. Die Stempeluhr bindet diese Datei nicht ein.

   Hier nur Tokens und Bildwechsel. Komponenten verwenden die semantischen
   Rollen aus styles.css und brauchen keine eigenen Dunkel-Regeln.

   Kontraste, geprüft:
   Weiß auf Grund 11,9:1, Text auf Karte 9,6:1, Text-muted auf Karte 7,1:1,
   Sonnengelb auf Karte 4,8:1 und auf Grund 5,4:1,
   Petrol-tief auf Sonnengelb (Primär-Button) 5,4:1,
   Weiß auf Petrol (Footer) 7:1, Sonnengelb hell auf Petrol 5,5:1,
   Nav aktiv (#ecbd6f auf #1f5154) 5,1:1. */

:root {
  color-scheme: dark;

  /* Abstufungen von Petrol #206265 aus dem Markenkit */
  --petrol-tief: #143d3f;
  --petrol-karte: #184548;
  --petrol-dunkel: #113638;
  --petrol-linie: #2b6063;
  --petrol-hover: #1f5154;
  --sonnengelb-strong: #ecbd6f;

  --bg: var(--petrol-tief);
  --surface: var(--petrol-karte);
  --surface-soft: var(--petrol-dunkel);
  --surface-warm: #2c4f48;
  --border: var(--petrol-linie);
  --text: #eef5f4;
  --text-strong: var(--white);
  --text-muted: #c3d8d5;
  --heading: var(--sonnengelb);
  --brand: var(--sonnengelb);
  --brand-strong: var(--sonnengelb-strong);
  --brand-deep: var(--sonnengelb-hell);
  --brand-soft: var(--petrol-hover);
  --warm-soft: var(--petrol-linie);
  --link: var(--sonnengelb);
  --link-hover: var(--sonnengelb-hell);
  --kicker: var(--sonnengelb);

  --on-brand: var(--petrol-tief);
  --surface-brand: var(--petrol);
  --header-bg: rgba(20, 61, 63, 0.84);
  --header-bg-stuck: rgba(20, 61, 63, 0.95);
  --field-bg: var(--petrol-dunkel);
  --field-border: #5a9195;
  --focus-ring: rgba(223, 164, 74, 0.35);
  --glow-1: rgba(119, 173, 195, 0.16);
  --glow-2: rgba(32, 98, 101, 0.75);

  --shadow-sm: 0 1px 2px rgba(4, 22, 23, 0.25), 0 2px 6px -2px rgba(4, 22, 23, 0.3);
  --shadow-md: 0 2px 4px rgba(4, 22, 23, 0.2), 0 12px 28px -12px rgba(4, 22, 23, 0.5);
  --shadow-lg: 0 4px 8px rgba(4, 22, 23, 0.2), 0 28px 56px -20px rgba(4, 22, 23, 0.55);
}

/* Logo und Figuren: weiße Varianten aus dem Markenkit */
.theme-light-only {
  display: none;
}

.theme-dark-only {
  display: block;
}

/* Strolch-Linie wie im Petrol-Thema des Markenkits */
.strolche-line {
  background-image: url("../images/strolche/linie-dunkel.svg");
}

/* Vorbereitete Bausteine mit heller Fläche behalten dunkle Schrift
   (Handbuch: auf Sonnengelb immer Tinte). Derzeit nicht auf den Seiten. */
.notice,
.band--yellow {
  color: var(--tinte-strong);
}

.notice a,
.band--yellow h2,
.band--yellow h3 {
  color: var(--waldgruen-deep);
}

.card__icon,
.note svg,
.contact-list__icon {
  color: var(--waldgruen-strong);
}

.card__icon--orange,
.card__icon--red {
  color: var(--brand-strong);
}