/* Die dunkle Farbtafel der Probefassung.

   Greift nur, wenn `farbe.js` an der Wurzel `data-farbe="dunkel"`
   gesetzt hat — nach der Wahl im Kopf oder, wenn nie gewählt wurde,
   nach der Einstellung des Geräts. Geladen NACH allen anderen Tafeln.

   Kontrast nachgerechnet (WCAG, Stufe AA = 4,5 : 1 für Fließtext):
     Text    #F4ECE6 auf Grund #120E0C ………… 16,4
     Leise   #BBA99E auf Fläche-3 #322824 …… 6,3
     Akzent  #EE8266 als Schrift auf Fläche-2 … 6,2
     Weiß auf Akzentfläche #B8452F (Hover C24E36) 5,3 (4,7)
     Grün    #72C990 auf Grün-weich …………… 7,7
     Warnung #E9B660 auf Warnung-weich ……… 8,5

   Warum zwei Rottöne: Ein Rot, das als Schrift auf dunklem Grund
   lesbar ist, ist zu hell für weiße Schrift darauf — und umgekehrt.
   Keins erfüllt beides (nachgerechnet: die Grenzen liegen bei einer
   Helligkeit von 0,20 und 0,18). Also ist `--akzent` hier das helle
   Schriftrot, und jede Regel, die mit `--akzent` eine FLÄCHE füllt und
   weiß darauf schreibt, bekommt unten das tiefe Rot zurück.
   bin/pruefe_oberflaechen.php hält die Liste vollständig. */

:root[data-farbe="dunkel"] {
  color-scheme: dark;

  --bg:        #120E0C;
  --flaeche:   #1C1714;
  --flaeche-2: #261F1B;
  --flaeche-3: #322824;
  --linie:     #3A2F29;
  --linie-satt:#5C4B42;
  --text:      #F4ECE6;
  --leise:     #BBA99E;
  --akzent:      #EE8266;
  --akzent-hell: #F59C83;
  --akzent-weich:#3A211A;
  --auf-akzent:  #FFFFFF;
  /* Das tiefe Rot der gefüllten Flächen — siehe oben und die Liste
     unten. Als Variable, damit eine Marke es umstellen kann, ohne die
     Liste zu wiederholen. */
  --akzent-flaeche:      #B8452F;
  --akzent-flaeche-hell: #C24E36;
  /* Eine Stufe unter dem Grund: Servicezeile und dunkles Band sollen
     sich weiter abheben — nur jetzt nach unten statt nach oben. */
  --dunkel:    #0A0706;
  --gut:       #72C990;
  --gut-weich: #16281C;
  --warnung:   #E9B660;
  --warnung-weich: #2C2113;

  --gold:       #F2B33D;
  --gold-tief:  #E9B660;
  --gold-weich: #2C2113;
  --auf-gold:   #2B1A12;

  /* Schatten sieht man auf Dunkel kaum; sie tragen hier nur noch die
     Tiefe unter Blättern und Pillen, dafür kräftiger. */
  --schatten:   0 1px 2px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.25);
  --schatten-2: 0 6px 22px rgba(0,0,0,0.45);
  --schatten-3: 0 18px 46px rgba(0,0,0,0.6);
}

/* ── Flächen, die mit dem Akzent gefüllt sind ─────────────────────
   Das tiefe Rot gilt nur INNERHALB dieser Elemente: Eine
   Variablenangabe am Element schlägt die der Wurzel, und die Regeln in
   shop.css und probe.css bleiben unverändert. */
[data-farbe="dunkel"] .knopf-haupt,
[data-farbe="dunkel"] .probe-korb.hat-inhalt,
[data-farbe="dunkel"] .ist-probe .artikel-abzeichen,
[data-farbe="dunkel"] .kategorie.ist-an,
[data-farbe="dunkel"] .plusknopf,
[data-farbe="dunkel"] .eintrag.ist-an .haken,
[data-farbe="dunkel"] .stempel.ist-da,
[data-farbe="dunkel"] .stufe.ist-an,
[data-farbe="dunkel"] .fortschritt-balken span,
[data-farbe="dunkel"] .korbleiste,
[data-farbe="dunkel"] .stationen li.erreicht .punkt,
[data-farbe="dunkel"] .korbzeichen .zahl,
[data-farbe="dunkel"] .zeitknopf.ist-noetig,
[data-farbe="dunkel"] .zonenzeile .punkt.fehler,
[data-farbe="dunkel"] .probe-held {
  --akzent: var(--akzent-flaeche);
  --akzent-hell: var(--akzent-flaeche-hell);
}

/* ── Fest eingetragene helle Töne ─────────────────────────────── */

[data-farbe="dunkel"] .kopfband { background: rgba(28,23,20,0.92); }
[data-farbe="dunkel"] .bandpfeil { background: rgba(28,23,20,0.9); }
[data-farbe="dunkel"] .geruest::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
[data-farbe="dunkel"] .merkmal.betont { border-color: #2D5238; }
[data-farbe="dunkel"] .merkmal.warn,
[data-farbe="dunkel"] .bandzeile { border-color: #5A4420; }

/* Das dunkle Band läge sonst fast unsichtbar auf dem Grund. Die Kante
   in seiner Scheinfarbe setzt probe.css schon; hier nur etwas kräftiger. */
[data-farbe="dunkel"] .probe-band.ist-dunkel { border-color: color-mix(in srgb, var(--ton) 38%, var(--linie)); }
[data-farbe="dunkel"] .probe-service { border-bottom: 1px solid var(--linie); }

/* Das runde Logo ist ein Bild mit hellem Rand; auf Dunkel bekommt es
   eine feine Kante, damit es nicht wie ausgeschnitten wirkt. */
[data-farbe="dunkel"] .probe-marke .logo-rund { box-shadow: 0 0 0 1px var(--linie); }

/* Produktfotos strahlen auf dunklem Grund stärker als auf hellem. */
[data-farbe="dunkel"] .ist-probe .artikel img { filter: brightness(0.94); }