/* =============================================================================
   Dunkelmodus ("Space Grey")  -  2026-08-22
   =============================================================================
   Die Oberflaeche faerbt sich seit jeher ueber bgcolor-Attribute und inline-
   styles direkt im PHP - ueber 500 Stellen in mehr als hundert Dateien. Ein
   Umbau auf CSS-Variablen waere ein Grossprojekt mit Risiko in jeder Maske.

   Stattdessen greift diese Datei genau die Farbwerte ab, die der Code ohnehin
   schon setzt (Attribut-Selektoren). Damit bleibt der PHP-Code unberuehrt und
   der Hellmodus exakt so, wie er war: ALLES hier haengt an html.dark, ohne
   diese Klasse ist die Datei wirkungslos.

   Farbwerte kommen aus der Auszaehlung des Codes:
     #FAFAFA  323x  helle Flaeche      -> Panel
     #E6E6E6  153x  Rahmen/Kopfzeile   -> Grundflaeche
     #CEE3F6   31x  Auswahl (blau)     -> Auswahl dunkelblau
     #CCCCCC   29x  Rahmenlinie        -> Linie
   ============================================================================= */

html.dark {
    --bg:      #131313;   /* Grundflaeche  */
    --panel:   #1d1d1d;   /* helle Flaeche */
    --raised:  #2a2a2a;   /* hervorgehoben */
    --line:    #383838;   /* Rahmenlinie   */
    --sel:     #2b3a47;   /* Auswahl       */
    --text:    #dcdee0;
    --muted:   #8a8d90;
    --link:    #7fb0e8;
    --field:   #0d0d0d;   /* Eingabefelder - ohne Rahmen ueber Kontrast erkennbar */
}

/* ---- Grundflaechen ------------------------------------------------------- */
html.dark, html.dark body            { background-color: var(--bg) !important; color: var(--text); }
html.dark table, html.dark tr,
html.dark td, html.dark th, html.dark div,
html.dark p, html.dark span, html.dark li,
html.dark b, html.dark label          { color: var(--text); }

/* ---- die vier Hauptfarben aus dem PHP-Code ------------------------------- */
html.dark [bgcolor="#FAFAFA" i], html.dark [bgcolor="FAFAFA" i],
html.dark [bgcolor="#F8F8F6" i], html.dark [bgcolor="F8F8F6" i],
html.dark [style*="#FAFAFA" i], html.dark [style*="rgb(250, 250, 250)" i], html.dark [style*="#F5F5F5" i], html.dark [style*="rgb(245, 245, 245)" i],
html.dark [style*="#F2F2F2" i], html.dark [style*="rgb(242, 242, 242)" i], html.dark [style*="#F7F7F7" i], html.dark [style*="rgb(247, 247, 247)" i],
html.dark [style*="#FBF8EF" i], html.dark [style*="rgb(251, 248, 239)" i], html.dark [style*="#FFFFFF" i], html.dark [style*="rgb(255, 255, 255)" i],
html.dark [bgcolor="#FFFFFF" i], html.dark [bgcolor="#F2F2F2" i],
html.dark [bgcolor="#F6F6F6" i], html.dark [bgcolor="#F7F7F7" i],
/* #F6F6F6 war nur als ATTRIBUT erfasst, nicht als inline-style. FwGui::eBox
   schreibt die Farbe aber in ein style-Attribut ("background-color:#f6f6f6").
   Deshalb blieben ":: Eigenschaften" (PpDaten), ":: Property Management" und
   die beiden Kaesten in PpConfig im Dunkelmodus weiss. Der Serienbrief-Kasten
   fiel nicht auf, weil er #FAF0E6 nimmt - und das war beides Mal erfasst. */
html.dark [style*="#F6F6F6" i], html.dark [style*="rgb(246, 246, 246)" i],
/* #F5F5F5 war bisher nur als inline-style erfasst, nicht als Attribut -
   citrumtermin.js baut damit aber die ganze Zeitspalte des Termin-Fensters
   (bgcolor=#f5f5f5), die deshalb weiss blieb. */
html.dark [bgcolor="#F5F5F5" i], html.dark [bgcolor="#F8F8FF" i]
                                      { background-color: var(--panel) !important; }

html.dark [bgcolor="#E6E6E6" i], html.dark [bgcolor="E6E6E6" i],
html.dark [style*="#E6E6E6" i], html.dark [style*="rgb(230, 230, 230)" i], html.dark [style*="#E5E5E5" i], html.dark [style*="rgb(229, 229, 229)" i],
html.dark [style*="#E7E7E7" i], html.dark [style*="rgb(231, 231, 231)" i], html.dark [bgcolor="#E7E7E7" i]
                                      { background-color: var(--bg) !important; }

html.dark [bgcolor="#CCCCCC" i], html.dark [bgcolor="#848484" i],
/* #A7A7A7 (iPDF-Cnf) und #A4A4A4 (Zahlungsliste) sind Tabellenflaechen in
   derselben Rolle wie #CCCCCC. Auf #131313 stachen sie als helle Bloecke
   heraus. #A4A4A4 ist zugleich die Terminfarbe "keine" - die wird damit
   ebenfalls dunkelgrau, was fuer "nicht eingefaerbt" genau passt. */
html.dark [bgcolor="#A7A7A7" i], html.dark [bgcolor="#A4A4A4" i],
html.dark [bgcolor="#B0C4DE" i]       { background-color: var(--line) !important; }

html.dark [bgcolor="#CEE3F6" i], html.dark [bgcolor="CEE3F6" i],
html.dark [bgcolor="#ADD8E6" i], html.dark [style*="#ADD8E6" i], html.dark [style*="rgb(173, 216, 230)" i],
html.dark [style*="#CEE3F6" i], html.dark [style*="rgb(206, 227, 246)" i], html.dark [style*="#E0F2F7" i], html.dark [style*="rgb(224, 242, 247)" i],
html.dark [style*="#F0F8FF" i], html.dark [style*="rgb(240, 248, 255)" i], html.dark [style*="#EFF5FB" i], html.dark [style*="rgb(239, 245, 251)" i],
html.dark [style*="#F0FFFF" i], html.dark [style*="rgb(240, 255, 255)" i], html.dark [bgcolor="#EFF9FC" i],
/* #ECF8E0 ist der ausgewaehlte Reiter in der Zeile "Configuration" des Kunden-
   Detail (KontaktMod) sowie in KontaktPool und KontaktWorkerPool - dieselbe
   Bedeutung wie #CEE3F6, nur in gruen. Fehlte hier, weshalb der aktive Reiter
   im Dunkelmodus als hellgruener Block stehenblieb. */
html.dark [bgcolor="#ECF8E0" i], html.dark [bgcolor="ECF8E0" i]
                                      { background-color: var(--sel) !important; }

/* ---- Meldungs- und Statuskaesten ----------------------------------------- */
/* Die farbigen Kaesten (Erfolg gruen, Fehler rot, Hinweis gelb, Testphase blau)
   baut das PHP mit festen Werten direkt ins style-Attribut: AboManager,
   AboAdmin, ConfigFirma, ImportExport und die Rueckmeldung beim Einrichten
   einer Firma im Kunden-Reiter (Kontakt::neueFirmaEinrichten).
   Sie blieben im Dunkelmodus hell.

   Es genuegt NICHT, nur die Flaeche umzufaerben. Weiter oben steht
       html.dark td, html.dark div, html.dark li, html.dark b { color: var(--text) }
   und das schlaegt die Vererbung: ein Kasten, der seine Textfarbe per inline-
   style setzt, gibt sie NICHT an sein <li> oder <b> weiter - die bekommen das
   helle var(--text). Genau so entstand hellgrauer Text auf hellgruenem Grund.
   Darum jedes Mal beides: Flaeche UND Textfarbe, und die Textfarbe zusaetzlich
   fuer die Kindelemente. <a> bleibt bewusst aussen vor, Verweise faerbt die
   Link-Regel weiter unten.
   Jeweils Hex UND rgb() - siehe den Hinweis zu jQuery weiter oben. */
html.dark [style*="#ECFDF5" i], html.dark [style*="rgb(236, 253, 245)" i],
html.dark [style*="#ECFDF5" i] li, html.dark [style*="#ECFDF5" i] b,
html.dark [style*="#ECFDF5" i] span, html.dark [style*="#ECFDF5" i] p,
html.dark [style*="rgb(236, 253, 245)" i] li, html.dark [style*="rgb(236, 253, 245)" i] b,
html.dark [style*="rgb(236, 253, 245)" i] span, html.dark [style*="rgb(236, 253, 245)" i] p
                                      { color: #6ee7b7 !important; }
html.dark [style*="#ECFDF5" i], html.dark [style*="rgb(236, 253, 245)" i]
                                      { background: #10251c !important; background-color: #10251c !important;
                                        border-color: #1f5f46 !important; }

html.dark [style*="#FEE2E2" i], html.dark [style*="rgb(254, 226, 226)" i],
html.dark [style*="#FEE2E2" i] li, html.dark [style*="#FEE2E2" i] b,
html.dark [style*="#FEE2E2" i] span, html.dark [style*="#FEE2E2" i] p,
html.dark [style*="rgb(254, 226, 226)" i] li, html.dark [style*="rgb(254, 226, 226)" i] b,
html.dark [style*="rgb(254, 226, 226)" i] span, html.dark [style*="rgb(254, 226, 226)" i] p
                                      { color: #fca5a5 !important; }
html.dark [style*="#FEE2E2" i], html.dark [style*="rgb(254, 226, 226)" i]
                                      { background: #2a1416 !important; background-color: #2a1416 !important;
                                        border-color: #7f1d1d !important; }

html.dark [style*="#FEF3C7" i], html.dark [style*="rgb(254, 243, 199)" i],
html.dark [style*="#FEF3C7" i] li, html.dark [style*="#FEF3C7" i] b,
html.dark [style*="#FEF3C7" i] span, html.dark [style*="#FEF3C7" i] p,
html.dark [style*="rgb(254, 243, 199)" i] li, html.dark [style*="rgb(254, 243, 199)" i] b,
html.dark [style*="rgb(254, 243, 199)" i] span, html.dark [style*="rgb(254, 243, 199)" i] p
                                      { color: #fcd34d !important; }
html.dark [style*="#FEF3C7" i], html.dark [style*="rgb(254, 243, 199)" i]
                                      { background: #2a2210 !important; background-color: #2a2210 !important;
                                        border-color: #78350f !important; }

/* #E0F2FE ist das Abzeichen der Testphase (AboManager). Nicht zu verwechseln
   mit #E0F2F7 weiter oben - eine Ziffer Unterschied, andere Stelle. */
html.dark [style*="#E0F2FE" i], html.dark [style*="rgb(224, 242, 254)" i],
html.dark [style*="#E0F2FE" i] li, html.dark [style*="#E0F2FE" i] b,
html.dark [style*="#E0F2FE" i] span, html.dark [style*="#E0F2FE" i] p,
html.dark [style*="rgb(224, 242, 254)" i] li, html.dark [style*="rgb(224, 242, 254)" i] b,
html.dark [style*="rgb(224, 242, 254)" i] span, html.dark [style*="rgb(224, 242, 254)" i] p
                                      { color: #7dd3fc !important; }
html.dark [style*="#E0F2FE" i], html.dark [style*="rgb(224, 242, 254)" i]
                                      { background: #10212e !important; background-color: #10212e !important;
                                        border-color: #1e4a6b !important; }

html.dark [style*="#F8FAFC" i], html.dark [style*="rgb(248, 250, 252)" i],
html.dark [style*="#F8FAFC" i] li, html.dark [style*="#F8FAFC" i] b,
html.dark [style*="#F8FAFC" i] span, html.dark [style*="#F8FAFC" i] p,
html.dark [style*="rgb(248, 250, 252)" i] li, html.dark [style*="rgb(248, 250, 252)" i] b,
html.dark [style*="rgb(248, 250, 252)" i] span, html.dark [style*="rgb(248, 250, 252)" i] p
                                      { color: var(--muted) !important; }
html.dark [style*="#F8FAFC" i], html.dark [style*="rgb(248, 250, 252)" i]
                                      { background: var(--panel) !important; background-color: var(--panel) !important;
                                        border-color: var(--line) !important; }

/* Die Verweise IN diesen Kaesten ("Reaktivierung anfragen", "Zahlungsmittel
   aktualisieren"). Sie tragen ihre Farbe als inline-style und waren oben
   bewusst ausgenommen - auf dem dunklen Grund kamen sie damit auf einen
   Kontrast von 2.7 und waren kaum lesbar (nachgemessen am 2026-09-03).
   Beide Werte kommen im ganzen Code AUSSCHLIESSLICH als color: vor, nie als
   Flaeche oder Rahmen - hier wird also nichts eingefaerbt, was nur eine Linie
   sein wollte. */
html.dark [style*="#B91C1C" i]        { color: #ff9d9d !important; }
html.dark [style*="#B45309" i]        { color: #fbbf24 !important; }

/* warme Hinweisfarben bleiben erkennbar, nur gedaempft */
html.dark [bgcolor="#F5F5DC" i], html.dark [bgcolor="#F5ECCE" i],
html.dark [style*="#FCF4E2" i], html.dark [style*="rgb(252, 244, 226)" i], html.dark [bgcolor="#F7BE81" i]
                                      { background-color: #4a4436 !important; }
html.dark [bgcolor="#FF7F50" i]       { background-color: #6b4030 !important; }

/* Fehlerzeilen (Betrieb, Modul 94 - lib/BetriebAdmin.php). #FFF4F4 ist ein
   sehr helles Rot und lag als einziger Wert der neuen Maske ausserhalb der
   Auszaehlung oben - im Dunkelmodus blieb die Zeile darum weiss, mit grauem
   Text darauf praktisch unlesbar. Gedaempftes Rotbraun in derselben Rolle wie
   die warmen Hinweisfarben darueber: erkennbar als "hier stimmt etwas nicht",
   ohne aus der Flaeche zu springen. */
html.dark [bgcolor="#FFF4F4" i], html.dark [style*="#FFF4F4" i],
html.dark [style*="rgb(255, 244, 244)" i]
                                      { background-color: #402a2a !important; }

/* ---- Kurzschreibweise und JavaScript-Farben ------------------------------ */
/* #ccc, #fff und #ff0 in Kurzschreibweise treffen die sechsstelligen Selektoren
   nicht. WICHTIG dabei: #ccc steht im Code fast immer fuer einen RAHMEN
   (border:1px solid #ccc), nicht fuer eine Flaeche. Ein pauschales
   [style*="#ccc"] { background-color } wuerde also Flaechen einfaerben, wo nur
   eine Linie gemeint war. Darum getrennt: Flaeche nur dort, wo wirklich
   background steht. */
html.dark [bgcolor="#fff" i],
html.dark [style*="background:#fff" i], html.dark [style*="background: #fff" i],
html.dark [style*="background-color:#fff" i], html.dark [style*="background-color: #fff" i]
                                      { background-color: var(--panel) !important; }

html.dark [bgcolor="#ccc" i], html.dark [bgcolor="gainsboro" i],
html.dark [bgcolor="silver" i], html.dark [style*="gainsboro" i],
html.dark [style*="background:#ccc" i], html.dark [style*="background: #ccc" i],
html.dark [style*="background-color:#ccc" i], html.dark [style*="background-color: #ccc" i],
html.dark [style*="#D4D4D4" i], html.dark [style*="rgb(212, 212, 212)" i], html.dark [style*="#B4CDCD" i], html.dark [style*="rgb(180, 205, 205)" i]
                                      { background-color: var(--line) !important; }

/* #ccc als Rahmen: nur die Linienfarbe, die Breite bleibt unangetastet */
/* auch hier die rgb()-Form: jQuery schreibt border:1px solid #cccccc als
   rgb(204, 204, 204) - so blieb der Rahmen um das Uhr- und Minutenraster
   hell, obwohl die Zellen laengst dunkel waren. */
html.dark [style*="solid #ccc" i], html.dark [style*="dotted #ccc" i],
html.dark [style*="dashed #ccc" i], html.dark [style*="solid #808080" i],
html.dark [style*="solid rgb(204, 204, 204)" i],
html.dark [style*="dotted rgb(204, 204, 204)" i],
html.dark [style*="dashed rgb(204, 204, 204)" i],
html.dark [style*="solid rgb(128, 128, 128)" i]
                                      { border-color: var(--line) !important; }

/* Wochentagszeile des Datumswaehlers (scripts.js:439) und der gelbe Streifen
   der Indexspalte, den Fix.php ueber eine eigene <style>-Regel setzt - an die
   kommt kein Attribut-Selektor heran. */
html.dark [bgcolor="#eeeee0" i], html.dark [style*="#EFE4C4" i], html.dark [style*="rgb(239, 228, 196)" i]
                                      { background-color: var(--raised) !important; }
html.dark .col:first-child            { background: #4a4436 !important; }
html.dark [bgcolor="#ff0" i], html.dark [style*="background: #ff0" i]
                                      { background-color: #4a4436 !important; }

/* ---- Farbwoerter statt Hex ----------------------------------------------- */
/* Der Agenda-Kalender faerbt seine Tage mit bgcolor=white bzw. bgcolor=yellow
   (Agenda.php:249) - Farbwoerter, keine Hex-Werte. Die Regeln oben greifen da
   nicht, die Kaestchen blieben deshalb weiss. */
html.dark [bgcolor="white" i]         { background-color: var(--panel) !important; }
html.dark [bgcolor="yellow" i]        { background-color: #6d5613 !important; }
html.dark [bgcolor="yellow" i] a      { color: #ffe08a !important; font-weight: bold; }

/* ---- Agenda-Kalender ------------------------------------------------------ */
/* Die Kaestchen stehen mit cellspacing=1 auf der Tabellenflaeche - die schmalen
   Zwischenraeume SIND das Gitter. Im Hellmodus war die Flaeche #e6e6e6 (also
   hell) und die Kaestchen weiss. Im Dunkelmodus dreht sich das Verhaeltnis um:
   Kaestchen dunkel, Gitterlinien hell, damit die Wochen weiter ablesbar sind. */
html.dark td.agenda                   { background-color: var(--panel) !important; }
html.dark td.agenda:empty             { background-color: var(--bg) !important; }
/* :has() ohne > trifft JEDE uebergeordnete Tabelle, die irgendwo ein
   Kalender-Kaestchen enthaelt - dadurch faerbte sich die ganze Flaeche um die
   Agenda herum grau. Mit der direkten Kindfolge trifft es nur die
   Kalendertabelle selbst, deren Zwischenraeume das Gitter bilden. */
html.dark table:has(> tbody > tr > td.agenda)
                                      { background-color: var(--line) !important; }
html.dark table:has(> tbody > tr > td[bgcolor="#cccccc" i]) td[bgcolor="#cccccc" i]
                                      { background-color: var(--raised) !important; }
html.dark td.agenda a                 { color: var(--link) !important; }
html.dark td.agenda:hover             { background-color: var(--raised) !important; }

/* ---- Farbwoerter als Statusfarbe ----------------------------------------- */
/* red/green/blue stehen an wenigen Stellen als bgcolor fuer einen Zustand.
   Bedeutung erhalten, aber gedaempft - satte Grundfarben blenden auf #131313. */
html.dark [bgcolor="red" i]           { background-color: #5a2323 !important; }
html.dark [bgcolor="green" i]         { background-color: #2c4a2c !important; }
html.dark [bgcolor="blue" i]          { background-color: #23395a !important; }
html.dark [bgcolor="#E0F2F7" i]       { background-color: var(--sel) !important; }

/* Der heutige Tag im Termin-Fenster (citrumtermin.js setzt #A2CD5A per .css()).
   Gruen bleibt gruen, nur dunkler - sonst leuchtet der Streifen. */
html.dark [style*="#A2CD5A" i], html.dark [style*="rgb(162, 205, 90)" i]        { background-color: #3c5c2e !important; color: #d8f0c8 !important; }

/* ---- Kopfzeile, Menue, Rahmen -------------------------------------------- */
html.dark .line tr:hover,
html.dark .mytbl td:hover             { background-color: var(--raised) !important; }
html.dark .mytbl td                   { background-color: var(--panel) !important; border-color: var(--line) !important; }
html.dark .titel                      { color: var(--text); border-bottom-color: var(--line); }
html.dark .uline                      { border-bottom-color: var(--line); }

/* ---- der lange Rest ------------------------------------------------------ */
/* Ausgezaehlt aus dem Code: alle uebrigen hellen Farbwerte (Helligkeit > 200),
   nach Rolle gruppiert statt einzeln. So bleibt keine helle Leiste stehen -
   etwa die Seitenzahlen-Leiste unter den Kundenlisten. */

/* nahezu weiss -> Flaeche */
html.dark [bgcolor="#FFFDFF" i], html.dark [style*="#FFFDFF" i], html.dark [style*="rgb(255, 253, 255)" i],
html.dark [bgcolor="#FCFCE9" i], html.dark [style*="#FCFCE9" i], html.dark [style*="rgb(252, 252, 233)" i],
html.dark [bgcolor="#F3F8F4" i], html.dark [style*="#F3F8F4" i], html.dark [style*="rgb(243, 248, 244)" i],
html.dark [bgcolor="#EFEFFB" i], html.dark [style*="#EFEFFB" i], html.dark [style*="rgb(239, 239, 251)" i],
html.dark [bgcolor="#F1ECFF" i], html.dark [style*="#F1ECFF" i], html.dark [style*="rgb(241, 236, 255)" i],
html.dark [bgcolor="#E9F1EA" i], html.dark [style*="#E9F1EA" i], html.dark [style*="rgb(233, 241, 234)" i]
                                      { background-color: var(--panel) !important; }

/* blau/lila -> Auswahl */
html.dark [bgcolor="#E0EBFF" i], html.dark [style*="#E0EBFF" i], html.dark [style*="rgb(224, 235, 255)" i],
html.dark [bgcolor="#D0E6FF" i], html.dark [style*="#D0E6FF" i], html.dark [style*="rgb(208, 230, 255)" i],
html.dark [bgcolor="#CEECF5" i], html.dark [style*="#CEECF5" i], html.dark [style*="rgb(206, 236, 245)" i],
html.dark [bgcolor="#CCCCFF" i], html.dark [style*="#CCCCFF" i], html.dark [style*="rgb(204, 204, 255)" i],
html.dark [bgcolor="#CAD6FC" i], html.dark [style*="#CAD6FC" i], html.dark [style*="rgb(202, 214, 252)" i],
html.dark [bgcolor="#E6E6FA" i], html.dark [style*="#E6E6FA" i], html.dark [style*="rgb(230, 230, 250)" i]
                                      { background-color: var(--sel) !important; }

/* Grautoene -> Linie */
html.dark [bgcolor="#DEDEDE" i], html.dark [style*="#DEDEDE" i], html.dark [style*="rgb(222, 222, 222)" i],
html.dark [bgcolor="#DCDCDC" i], html.dark [style*="#DCDCDC" i], html.dark [style*="rgb(220, 220, 220)" i],
html.dark [bgcolor="#D3D3D3" i], html.dark [style*="#D3D3D3" i], html.dark [style*="rgb(211, 211, 211)" i]
                                      { background-color: var(--line) !important; }

/* gruen = aktiv/erledigt, rot = Hinweis, gelb = Warnung - Bedeutung erhalten,
   nur gedaempft, damit sie im Dunkeln nicht blenden */
html.dark [bgcolor="#BCF5A9" i], html.dark [style*="#BCF5A9" i], html.dark [style*="rgb(188, 245, 169)" i]
                                      { background-color: #2c4a2c !important; }
html.dark [bgcolor="#BCF5A9" i] a, html.dark [style*="#BCF5A9" i], html.dark [style*="rgb(188, 245, 169)" i] a
                                      { color: #a8e6a0 !important; }
html.dark [bgcolor="#F8E0E0" i], html.dark [style*="#F8E0E0" i], html.dark [style*="rgb(248, 224, 224)" i],
html.dark [bgcolor="#FFF0F5" i], html.dark [style*="#FFF0F5" i], html.dark [style*="rgb(255, 240, 245)" i]
                                      { background-color: #4a2c2c !important; }
html.dark [bgcolor="#F7F2E0" i], html.dark [style*="#F7F2E0" i], html.dark [style*="rgb(247, 242, 224)" i],
html.dark [bgcolor="#FFFFCC" i], html.dark [style*="#FFFFCC" i], html.dark [style*="rgb(255, 255, 204)" i]
                                      { background-color: #4a4436 !important; }

/* ---- Farben, die als Funktionsargument uebergeben werden ------------------ */
/* Die Kaesten in FwGui bekommen ihre Farbe als Parameter, nicht als
   background-color im Markup - z. B.
     FwGui::eBox("<b>:: Serienbrief Generator</b>", "#cccccc", "#FAF0E6", "solid")
   Im Quelltext steht dort nur "#FAF0E6" ohne jeden CSS-Kontext. Eine Suche nach
   bgcolor= oder background-color: findet das nicht - deshalb blieb diese Leiste
   hell, und der dunkle Titeltext darauf war nach dem Umfaerben der Schrift
   praktisch unlesbar. Hier nun die vollstaendige Liste. */
html.dark [style*="#FAF0E6" i], html.dark [style*="rgb(250, 240, 230)" i], html.dark [bgcolor="#FAF0E6" i],
html.dark [style*="#F5F5E2" i], html.dark [style*="rgb(245, 245, 226)" i], html.dark [bgcolor="#F5F5E2" i],
html.dark [style*="#F2F7D3" i], html.dark [style*="rgb(242, 247, 211)" i], html.dark [bgcolor="#F2F7D3" i]
                                      { background-color: var(--raised) !important; }

html.dark [style*="#D9F3FF" i], html.dark [style*="rgb(217, 243, 255)" i], html.dark [bgcolor="#D9F3FF" i],
html.dark [style*="#C6E2FF" i], html.dark [style*="rgb(198, 226, 255)" i], html.dark [bgcolor="#C6E2FF" i]
                                      { background-color: var(--sel) !important; }

html.dark [style*="#9FF781" i], html.dark [style*="rgb(159, 247, 129)" i], html.dark [bgcolor="#9FF781" i],
html.dark [style*="#D0F5A9" i], html.dark [style*="rgb(208, 245, 169)" i], html.dark [bgcolor="#D0F5A9" i]
                                      { background-color: #2c4a2c !important; }

html.dark [style*="#F3E2A9" i], html.dark [style*="rgb(243, 226, 169)" i], html.dark [bgcolor="#F3E2A9" i],
html.dark [style*="#FFFF00" i], html.dark [style*="rgb(255, 255, 0)" i], html.dark [bgcolor="#FFFF00" i]
                                      { background-color: #4a4436 !important; }

html.dark [style*="#F6CECE" i], html.dark [style*="rgb(246, 206, 206)" i], html.dark [bgcolor="#F6CECE" i]
                                      { background-color: #4a2c2c !important; }

/* ---- Titelleisten aus Bildern -------------------------------------------- */
/* Mehrere Kaesten in FwGui legen als Titelhintergrund ein helles JPG/GIF statt
   einer Farbe (bgBox -> img/gui/btnbg1.jpg, tblBox -> r_ecke.gif, cBox ->
   img/gui/hg/*.gif, Fenstertitel in icrm.php -> tool/img/pbg.jpg). Ein Bild
   laesst sich nicht umfaerben, darum wird es hier abgeschaltet und durch eine
   Flaeche ersetzt - sonst bleiben genau diese Leisten weiss (z. B. der Kasten
   ":: Serienbrief Generator"). */
/* "btnbg" statt "img/gui/btnbg": es gibt ZWEI Kaesten-Familien mit gleich
   benannten Bildern an verschiedenen Orten - FwGui::bgBox nimmt
   img/gui/btnbg1.jpg, Fix::HtmlBox dagegen img/fix/bg/btnbg1.jpg. Die zweite
   wird von vierzehn Dateien benutzt (Checkliste, Abo, iPDF, Scanbox, StdPlan,
   ToDo, Kunden- und Mitarbeiterliste) und blieb bisher hell. */
html.dark [style*="btnbg" i],
html.dark [style*="img/gui/hg/" i],
html.dark [style*="r_ecke" i],
html.dark [style*="curly.gif" i],
html.dark [style*="tool/img/pbg" i] {
    background-image: none !important;
    background-color: var(--raised) !important;
    border-bottom-color: var(--line) !important;
}

/* Fuellfarben der FwGui-Kaesten, die oben noch nicht vorkamen */
html.dark [bgcolor="#EFF4F9" i], html.dark [style*="#EFF4F9" i], html.dark [style*="rgb(239, 244, 249)" i],
html.dark [bgcolor="#CDDEEB" i], html.dark [style*="#D9E5E5" i], html.dark [style*="rgb(217, 229, 229)" i]
                                      { background-color: var(--panel) !important; }
html.dark [style*="#A79145" i], html.dark [style*="rgb(167, 145, 69)" i]        { border-color: #6b5f2e !important; }

/* ---- Zeitwaehler (Start/Stop in der Zeitkarte) --------------------------- */
/* scripts.js baut das Uhr-/Minutenraster und setzt die Rahmen per jQuery:
     xTdCnf:  border: 1px solid #e6e6e6      (jede Zelle)
     iData:   tdborder #d4d4d4, tdbg #f8f8ff, tdhover #efe4c4,
              tdsborder #ff9900  (die AUSGEWAEHLTE Zelle)
   Weil jQuery die Werte inline schreibt, wurden sie von den Farbregeln oben
   als HINTERGRUND behandelt - der Rahmen blieb hell und das Raster leuchtete
   weiss. Hier deshalb gezielt die Rahmenfarbe, und zwar NUR fuer die hellen
   Werte: das Orange der Auswahl (#ff9900) ist bewusst nicht dabei, sonst
   waere nicht mehr zu sehen, welche Stunde gewaehlt ist. */
html.dark [style*="solid #e6e6e6" i], html.dark [style*="solid rgb(230, 230, 230)" i],
html.dark [style*="solid #d4d4d4" i], html.dark [style*="solid rgb(212, 212, 212)" i]
                                      { border-color: var(--line) !important; }

/* Fuellung und Ueberfahren-Farbe des Rasters */
html.dark [style*="#f8f8ff" i], html.dark [style*="rgb(248, 248, 255)" i]
                                      { background-color: var(--panel) !important; }
html.dark [style*="#efe4c4" i], html.dark [style*="rgb(239, 228, 196)" i]
                                      { background-color: var(--raised) !important; }
/* der Kopfstreifen Uhr/Minute ist #666666 mit weisser Schrift - der passt schon */

/* ---- Schlagschatten ------------------------------------------------------ */
/* Vier Muster im Code, alle in hellem Grau: 2px/4px/6px mit #808080 bzw. #ccc
   (Fix::HtmlDivShadow, das Fenster in icrm.php, Kundenauswahl). Auf dunklem
   Grund wird aus einem Schatten dadurch ein Leuchten - gut zu sehen als heller
   Saum um die Kaesten in Checkliste und Abo. Schatten gehoeren dunkel. */
html.dark [style*="box-shadow" i]     { box-shadow: 3px 3px 7px rgba(0,0,0,.65) !important; }

/* ---- Links --------------------------------------------------------------- */
html.dark a                           { color: var(--link); }
html.dark a:hover                     { color: #ffffff; background: none; }

/* ---- Text, der im Hellmodus dunkel gesetzt wurde -------------------------- */
html.dark font[color="#000000" i], html.dark font[color="black" i],
html.dark font[color="#585858" i], html.dark font[color="#696969" i]
                                      { color: var(--text) !important; }
html.dark font[color="#cccccc" i]     { color: var(--muted) !important; }
html.dark font[color="blue" i]        { color: var(--link) !important; }
html.dark font[color="green" i]       { color: #7bc47f !important; }
html.dark font[color="red" i]         { color: #f08a8a !important; }

/* ---- Eingabefelder ------------------------------------------------------- */
/* !important, weil viele Felder im PHP eine eigene Hintergrundfarbe als inline-
   style mitbringen (z. B. #e6e6e6 beim Suchfeld). Ohne das saehe das Feld aus
   wie die Seite dahinter. */
/* NUR die Rahmenfarbe, nicht die Breite. Neun Stellen im Code setzen bewusst
   border:0px (Agenda-Auswahlfelder, Scanbox, Task-Filter ...). Ein erzwungenes
   border:1px machte jedes dieser Felder 2px groesser und verschob damit die
   Ausrichtung in den engen Tabellen - sichtbar in den AJAX-Fenstern (Termin,
   ToDo, Datumswaehler). Die Felder heben sich stattdessen ueber ihre dunklere
   Flaeche ab. */
html.dark input, html.dark select, html.dark textarea {
    background-color: var(--field) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
html.dark input[type=submit], html.dark button, html.dark input[type=image] {
    background-color: var(--raised) !important;
    color: var(--text) !important;
    cursor: pointer;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--muted); }

/* Der Ring beim Hineinklicken in ein Feld.
   Zeichnet der BROWSER, und seit color-scheme:dark zeichnet er ihn WEISS - ein
   heller Rahmen, der auf der dunklen Oberflaeche aufblitzt. Vorher fiel das
   nicht auf, weil der Ring damals dem hellen Standard folgte.
   Ersetzt durch das Blau der Oberflaeche: sichtbar genug, um zu zeigen, wo man
   gerade tippt, aber ohne zu blenden.
   Nur im Dunkelmodus - im Hellmodus ist der Standardring dunkel und gut so. */
html.dark :focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 1px;
}

/* ---- Rahmen, die im Code fest hell gesetzt sind --------------------------- */
html.dark [style*="border: 1px solid #ccc" i],
html.dark [style*="border: 1px solid #C0C0C0" i],
html.dark [style*="1px dotted #ccc" i],
html.dark [style*="1px dashed #ccc" i]  { border-color: var(--line) !important; }

/* ---- Popup-Behaelter direkt ansprechen ----------------------------------- */
/* Sobald jQuery an einem Element etwas setzt (Breite, Position, anzeigen), baut
   der Browser das ganze style-Attribut neu auf und schreibt Farben dabei als
   rgb() statt hexadezimal. Alle Hex-Selektoren greifen dann ins Leere - genau
   das passiert bei den AJAX-Fenstern, und nur bei ihnen. Oben sind deshalb zu
   jeder Hex-Bedingung die rgb()-Entsprechungen ergaenzt.
   Zusaetzlich hier die bekannten Behaelter direkt ueber ihre ID - das haelt
   auch, wenn jQuery die Farbe spaeter noch einmal umschreibt. */
html.dark #mntFenster                 { background-color: var(--panel) !important; border-color: var(--line) !important; box-shadow: 6px 6px 8px #000 !important; }
html.dark #finhalt, html.dark #tmTermin, html.dark #tmContent,
html.dark #tmTagMonitor, html.dark #tmMonitor, html.dark #mntKundeInit,
html.dark #tmUsers, html.dark #selDatum, html.dark #mjCtrl
                                      { background-color: var(--panel) !important; border-color: var(--line) !important; color: var(--text); }
html.dark #fclose                     { border-bottom-color: var(--line) !important; color: var(--text) !important; }
html.dark #mntMsg                     { background-color: var(--raised) !important; color: var(--text) !important; }

/* ---- Klassenregeln aus den AJAX-Fenstern --------------------------------- */
/* Elf Dateien bringen einen eigenen <style>-Block mit und faerben darin ueber
   KLASSEN, nicht ueber Attribute (out/terminin.php, out/outKunde.php,
   out/outKuMitarbeiter.php, lib/Fix.php ...). An CSS-Klassen kommt ein
   Attribut-Selektor grundsaetzlich nicht heran - deshalb blieben das
   Termin-Fenster, der Datumswaehler und die Kundenliste hell, obwohl die
   Schrift laengst umgestellt war.
   Sichtbarster Fall: .tmWeekEnd behielt sein helles Grau, die Schrift darauf
   war hell - die Wochenendzeilen sahen dadurch aus, als fehlten sie ganz.
   Hier deshalb dieselben Klassen noch einmal, nur dunkel. */

/* Termin-Fenster und Datumswaehler (out/terminin.php) */
html.dark .tmMonat                    { background-color: var(--panel) !important; border-color: var(--line) !important; }
html.dark .tmWeekEnd                  { background-color: var(--raised) !important; color: var(--text) !important; }
html.dark .tmItem                     { background-color: var(--panel) !important; border-color: var(--line) !important; }
html.dark .tmUhr                      { background-color: var(--sel) !important; border-color: var(--line) !important; color: var(--text) !important; }
html.dark .tmHour                     { background-color: var(--sel) !important; border-color: var(--line) !important; color: #ffffff !important; }
html.dark .tmRow                      { border-bottom-color: var(--line) !important; }
html.dark .tmeMin                     { background-color: var(--raised) !important; color: var(--muted) !important; }
html.dark .tmMonat:hover, html.dark .tmWeekEnd:hover
                                      { background-color: var(--sel) !important; }

/* Kundenliste und Mitarbeiterliste (out/outKunde.php, out/outKuMitarbeiter.php) */
html.dark .kuTable                    { background-color: var(--panel) !important; }
html.dark .kuTable tr                 { background-color: var(--panel) !important; }
html.dark .kuTable tr:nth-child(2n+3) { background-color: var(--bg) !important; }
html.dark .kuTable tr:hover           { background-color: var(--sel) !important; }

/* Listen mit Zeilenhervorhebung (cmsadmin.css) */
html.dark .zeile tr:hover             { background-color: var(--raised) !important; }

/* ---- Handsontable (Reiter Tabellen) -------------------------------------- */
/* Das Tabellenblatt ist eine Fremdbibliothek mit eigenem Stylesheet
   (tool/hotable/jquery.handsontable.full.min.css). Sie faerbt ueber ihre
   eigenen Klassen - am lebenden System gemessen: 180 Zellen rgb(255,255,255)
   und 62 Kopfzellen rgb(238,238,238). Weder Attribut- noch rgb()-Selektoren
   erreichen das, es braucht die Klassen der Bibliothek selbst. */
html.dark .handsontable td, html.dark .htCore td,
html.dark .handsontable .wtHolder, html.dark .ht_master
                                      { background-color: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }
html.dark .handsontable th, html.dark .htCore th,
html.dark .handsontable thead th, html.dark .handsontable tbody th
                                      { background-color: var(--raised) !important; color: var(--muted) !important; border-color: var(--line) !important; }
html.dark .handsontable td.htDimmed   { background-color: var(--bg) !important; }
html.dark .handsontable .currentRow, html.dark .handsontable .currentCol
                                      { background-color: var(--raised) !important; }
html.dark .handsontable .htCore tbody tr:hover td
                                      { background-color: var(--raised) !important; }
/* Die blaue Auswahlumrandung (.wtBorder) bleibt, wie sie ist - sie zeigt an,
   welche Zelle gerade gewaehlt ist, und hebt sich auf dunklem Grund gut ab. */

/* Der Rahmen um das Blatt und die Textfelder darin */
html.dark .handsontable .wtBorder.fill { }
html.dark .htContainer, html.dark .wtHider, html.dark .wtSpreader
                                      { background-color: var(--panel) !important; }

/* ---- der Umschalter selbst ----------------------------------------------- */
#modusBtn {
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 13px;
    line-height: 16px;
    background-color: #FAFAFA;
    color: #336699;
    user-select: none;
}
html.dark #modusBtn {
    border-color: var(--line);
    background-color: var(--raised) !important;
    color: var(--text);
}

/* Symbole sind ueberwiegend helle GIF/PNG ohne Transparenz. Ganz leicht
   abdunkeln, damit sie nicht als weisse Kacheln herausstechen - invertiert
   wird bewusst nichts, sonst kippen die Farben der Modul-Symbole. */
html.dark img                          { filter: brightness(.92); }
html.dark img[src*="logo" i]           { filter: none; }

/* Das Logo ist freigestellt (Hintergrund vom Rand her entfernt) und traegt nur
   noch das gruene Zeichen - das steht auf #F8F8F6 genauso wie auf #131313.
   Eine eigene dunkle Fassung braucht es deshalb nicht; vom Filter oben ist es
   ohnehin ausgenommen. */

/* ---------------------------------------------------------------------------
   Bildlaufleisten und andere Browser-Elemente
   ---------------------------------------------------------------------------
   Die Leisten an der Kategorie-/Gruppierungsliste zeichnet der BROWSER, nicht
   wir - und er zeichnet sie hell, solange ihm niemand sagt, dass die Seite
   dunkel ist. Ergebnis: zwei weisse Balken mitten in einer dunklen Oberflaeche.

   color-scheme ist die eine Zeile, die das loest. Sie wirkt auf alles, was der
   Browser selbst malt: Bildlaufleisten, aufgeklappte Auswahlfelder, Datums-
   waehler, die Markierung von Text.

   Wichtig auch fuer den HELLmodus (siehe cmsadmin.css): ohne ausdrueckliche
   Angabe richtet sich der Browser nach der Einstellung des Betriebssystems -
   wer sein Windows dunkel gestellt hat, bekaeme sonst dunkle Leisten in Citrums
   hellem Modus. */
html.dark { color-scheme: dark; }

/* Wie im Hellmodus ausdruecklich gesetzt, statt dem Browser sein Standardgrau
   zu ueberlassen - hier auf die Flaechen der Oberflaeche abgestimmt. */
html.dark { scrollbar-color: var(--line) var(--panel); }
html.dark ::-webkit-scrollbar             { width: 12px; height: 12px; }
html.dark ::-webkit-scrollbar-track       { background: var(--panel); }
html.dark ::-webkit-scrollbar-corner      { background: var(--panel); }
html.dark ::-webkit-scrollbar-thumb       { background: var(--line); border-radius: 6px;
                                            border: 3px solid var(--panel); }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

/* Registrieren-Schaltflaeche auf der Login-Maske */
.btn-registrieren {
    background-color: var(--raised, #2a2a2a) !important;
    color: var(--text, #dcdee0) !important;
    border: 1px solid var(--line, #383838) !important;
}
.btn-registrieren:hover {
    background-color: #383838 !important;
    color: #ffffff !important;
}

/* Preise & Vorteile Schaltflaeche auf der Login-Maske */
.btn-preise {
    background-color: #23395a !important;
    color: #e0f2fe !important;
    border: 1px solid #3b5998 !important;
}
.btn-preise:hover {
    background-color: #2b4c7e !important;
    color: #ffffff !important;
}


/* ---- Swissdec-Bereiche (Jahresmeldung, Lohnausweis-Hinweis) --------------- */
/* Diese beiden Stellen brachten eine eigene Farbfamilie mit, die sonst nirgends
   im Programm vorkommt - deshalb blieben sie im Dunkelmodus hell:
     lib/lohnbuch/ElmDeklaration.php   Elektronische Jahresmeldung
     lib/LohnAusweis.php               "Fuer die elektronische Abgabe fehlt noch"
   Die Kastenflaeche selbst wurde inzwischen auf #E0F2F7 und #ccc umgestellt,
   die weiter oben schon erfasst sind. Was hier bleibt, sind die Farben, die
   eine BEDEUTUNG tragen und darum nicht in die Standardpalette passen: die
   Warnflaeche und die beiden Zeichen der Bereitschaftsanzeige.

   Textfarben brauchen !important. Sie stehen als style="color:..." direkt am
   Element, und eine Inline-Angabe schlaegt jede Regel aus dem Stylesheet. */

/* Warnkasten: dieselbe gedaempfte warme Flaeche wie die uebrigen Hinweise */
html.dark [style*="#FEF9E7" i], html.dark [style*="rgb(254, 249, 231)" i]
                                      { background-color: #4a4436 !important; }
html.dark [style*="#F7DC6F" i], html.dark [style*="rgb(247, 220, 111)" i]
                                      { border-color: #6b5f2e !important; }
html.dark [style*="#7D6608" i], html.dark [style*="rgb(125, 102, 8)" i]
                                      { color: #e0c97a !important; }

/* Bereitschaftsanzeige: Haken gruen, Kreuz gelb - beide muessen auf dunklem
   Grund noch als das erkennbar bleiben, was sie bedeuten. */
html.dark [style*="#117A65" i], html.dark [style*="rgb(17, 122, 101)" i]
                                      { color: #7bc47f !important; }
html.dark [style*="#B7950B" i], html.dark [style*="rgb(183, 149, 11)" i]
                                      { color: #d4b44a !important; }

/* Ueberschrift und Kleingedrucktes der Jahresmeldung */
html.dark [style*="#1B4F72" i], html.dark [style*="rgb(27, 79, 114)" i]
                                      { color: var(--text) !important; }
html.dark [style*="#5D6D7E" i], html.dark [style*="rgb(93, 109, 126)" i],
html.dark [style*="color:#777" i], html.dark [style*="color: #777" i],
html.dark [style*="rgb(119, 119, 119)" i]
                                      { color: var(--muted) !important; }

/* Die Schaltflaeche "Jahresmeldung als XML" bleibt blau mit weisser Schrift -
   sie ist im Dunkelmodus so gut lesbar wie im hellen und soll als Aktion
   auffallen. Nur der Rahmen wird gedaempft. */
html.dark [style*="#2E86C1" i], html.dark [style*="rgb(46, 134, 193)" i]
                                      { color: #ffffff !important; }

/* ---- Tarifabfrage (out/qst14.php) ----------------------------------------- */
/* Ein eigenes Fenster mit eigenem <html> und eigenem <style>-Block. Es setzt
   die Klasse selber (FwFunc::DunkelModus) und bindet diese Datei ein.
   ".itd" ist eine KLASSENREGEL in einem eingebetteten <style> - an die kommen
   die Attributselektoren weiter oben grundsaetzlich nicht heran, sie braucht
   ihre eigene Zeile. */
html.dark .itd                        { background-color: var(--panel) !important;
                                        border-color: var(--line) !important; }
/* Kopf und Rahmen der Ergebnistabelle */
html.dark [bgcolor="#D5D8DC" i]       { background-color: var(--raised) !important; }
html.dark [style*="#B2BABB" i], html.dark [style*="rgb(178, 186, 187)" i]
                                      { border-color: var(--line) !important; }
/* "Kein Tarif gefunden" - Rot bleibt Rot, nur gedaempft */
html.dark [style*="#FADBD8" i], html.dark [style*="rgb(250, 219, 216)" i]
                                      { background-color: #4a3232 !important; color: #f0a8a8 !important; }
html.dark [style*="#E6B0AA" i], html.dark [style*="rgb(230, 176, 170)" i]
                                      { border-color: #6b4444 !important; }
/* Die Monatssteuer - der Betrag, auf den es ankommt, bleibt gruen */
html.dark [style*="#1E8449" i], html.dark [style*="rgb(30, 132, 73)" i]
                                      { color: #7bc47f !important; }

/* Kurz gruen markierte Felder: die Tarifabfrage faerbt die beiden Felder, die
   sie eben gefuellt hat (out/qst14.php, "uebernehmen"). Ohne diese Zeile bliebe
   davon im Dunkelmodus nichts zu sehen - die Regel fuer Eingabefelder weiter
   oben traegt !important und schlaegt die Angabe am Element. */
html.dark input[style*="#D5F5E3" i], html.dark input[style*="rgb(213, 245, 227)" i]
                                      { background-color: #2d4a32 !important; color: #d8f5de !important; }

/* ---- Dunkle Strichsymbole aufhellen --------------------------------------- */
/* Ein Teil der Symbole ist schwarze Strichzeichnung auf durchsichtigem Grund.
   Im Hellmodus richtig, im Dunkelmodus fast unsichtbar - schwarz auf #131313.
   CSS kann ein Bild nicht umfaerben, aber umkehren: aus Schwarz wird Weiss,
   die Durchsichtigkeit bleibt. brightness(.9) nimmt dem Weiss die Haerte und
   bringt es auf die Helligkeit der uebrigen Schrift.

   Die Liste ist AUSGEMESSEN, nicht geraten: jedes Symbol in img/fix, img/icon
   und img/mod wurde auf mittlere Helligkeit und Farbigkeit seiner sichtbaren
   Punkte geprueft; aufgenommen ist, was dunkler als 110 und praktisch
   unbunt ist (Saettigung unter 25). Alles andere bleibt unberuehrt - die
   farbigen Modulsymbole, und vor allem img/ch: die 26 Kantonswappen sind
   durchwegs farbig und wuerden von einer Umkehrung zerstoert.

   62 Symbole. Neue Symbole erben das nicht von selbst; kommt eines dazu und
   bleibt dunkel, gehoert es hier hinein. */
html.dark img[src*="fix/ar0.png" i],
html.dark img[src*="fix/ar1.png" i],
html.dark img[src*="fix/ar4.png" i],
html.dark img[src*="fix/c0.png" i],
html.dark img[src*="fix/c00.png" i],
html.dark img[src*="fix/c1.png" i],
html.dark img[src*="fix/d1.png" i],
html.dark img[src*="fix/dn.png" i],
html.dark img[src*="fix/dt1.png" i],
html.dark img[src*="fix/elem.png" i],
html.dark img[src*="fix/fil0.png" i],
html.dark img[src*="fix/fil1.png" i],
html.dark img[src*="fix/grp.png" i],
html.dark img[src*="fix/hs.png" i],
html.dark img[src*="fix/in.png" i],
html.dark img[src*="fix/kasse.png" i],
html.dark img[src*="fix/key.png" i],
html.dark img[src*="fix/link.png" i],
html.dark img[src*="fix/mnt.png" i],
html.dark img[src*="fix/mnt2.png" i],
html.dark img[src*="fix/new.png" i],
html.dark img[src*="fix/pdf.png" i],
html.dark img[src*="fix/pg.png" i],
html.dark img[src*="fix/pg1.png" i],
html.dark img[src*="fix/pg2.png" i],
html.dark img[src*="fix/rf.png" i],
html.dark img[src*="fix/s1.png" i],
html.dark img[src*="fix/save.png" i],
html.dark img[src*="fix/save0.png" i],
html.dark img[src*="fix/set.png" i],
html.dark img[src*="fix/set1.png" i],
html.dark img[src*="fix/std.png" i],
html.dark img[src*="fix/sum.png" i],
html.dark img[src*="fix/table.png" i],
html.dark img[src*="fix/tables.png" i],
html.dark img[src*="fix/task.png" i],
html.dark img[src*="fix/tel.png" i],
html.dark img[src*="fix/todo.png" i],
html.dark img[src*="fix/u0.png" i],
html.dark img[src*="fix/u1.png" i],
html.dark img[src*="fix/u2.png" i],
html.dark img[src*="fix/uhr.png" i],
html.dark img[src*="fix/x.png" i],
html.dark img[src*="icon/az.png" i],
html.dark img[src*="icon/c0.png" i],
html.dark img[src*="icon/c1.png" i],
html.dark img[src*="icon/filter.gif" i],
html.dark img[src*="icon/info.png" i],
html.dark img[src*="icon/li1.gif" i],
html.dark img[src*="icon/ndplus.gif" i],
html.dark img[src*="icon/printer.gif" i],
html.dark img[src*="icon/rw3.png" i],
html.dark img[src*="icon/rw5.png" i],
html.dark img[src*="icon/suchen.gif" i],
html.dark img[src*="mod/33.png" i],
html.dark img[src*="mod/34.png" i],
html.dark img[src*="mod/85.png" i],
html.dark img[src*="mod/90.png" i],
html.dark img[src*="mod/91.png" i],
html.dark img[src*="mod/X34.png" i],
html.dark img[src*="mod/xx34.png" i],
html.dark img[src*="mod/zz90.png" i],
/* Der Schliessen-Knopf der AJAX-Fenster. Liegt als einziges Symbol unter
   tool/ und fiel beim ersten Durchgang durch, weil nur img/ durchsucht
   wurde. Der Durchgang deckt jetzt den ganzen lebenden Baum ab. */
html.dark img[src*="tool/img/x.png" i]
                                      { filter: brightness(0) saturate(100%) invert(56%) sepia(72%) saturate(230%) hue-rotate(172deg) brightness(104%); }

/* Warum diese Kette und nicht einfach invert(1):
     brightness(0)   macht JEDEN sichtbaren Punkt schwarz, unabhaengig davon,
                     wie dunkel er vorher war. Das ist der Schritt, der fuer
                     Gleichmaessigkeit sorgt - eine blosse Umkehrung machte aus
                     einem schwarzen Symbol ein weisses und aus einem
                     dunkelgrauen ein mittelgraues.
     der Rest        faerbt das Schwarz auf genau EINEN Ton ein.
   Ergebnis exakt rgb(127,176,232) = #7fb0e8, also --link: dieselbe Farbe, in
   der daneben die Verweise stehen. Das passt nicht nur besser zusammen, es
   stimmt auch sachlich - fast alle diese Symbole SIND anklickbar.
   Kontrast auf #131313 rund 8:1, weit ueber dem Noetigen.

   Am Bildschirm ausgemessen, nicht gerechnet: ein schwarzes Feld durch dieselbe
   Kette geschickt und die Punktfarbe ausgelesen. Die Durchsichtigkeit bleibt in
   jedem Schritt unberuehrt, die Symbole behalten also ihre weichen Kanten.
   Wer den Ton aendern will, aendert die ganze Kette - die Werte lassen sich
   nicht einzeln deuten; sie sind zusammen auf diesen einen Farbwert gesucht. */