/* ===================================================================
   DAS HELLE ERSCHEINUNGSBILD

   Hier hört das 1:1 auf, und das muss man sagen: **Die App hat kein
   helles Gegenstück.** Sie ist dunkel, und alle Werte oben rechnen mit
   einem dunklen Grund — der Kasten ist 2 % Weiß, sein Rand 5 % Weiß,
   der Text fast reines Weiß. Auf einer weißen Seite ist davon nichts
   zu sehen. Genau das war der Befund: ein leerer Kasten mit einer
   Überschrift darüber.

   Abgeleitet, nicht erfunden: Übernommen sind die VERHÄLTNISSE, nicht
   die Zahlen.

     · Der ausgeschaltete Kasten bleibt fast unsichtbar — er soll ja
       aussehen wie jede andere Einstellung.
     · Der eingeschaltete springt heraus.
     · Blau bleibt Blau, nur dunkler: #60A5FA hat auf Weiß ein
       Verhältnis von 3,8 und ist damit für Fließtext zu schwach.
       #1D4ED8 kommt auf 6,3.
     · Bernstein wird zu #92650A. #FBBF24 auf Weiß liegt bei 1,7 —
       das liest niemand.

   Das Demo-Bild bleibt dunkel. Es zeigt einen Bildschirm, und ein
   Bildschirm ist auch in einem hellen Raum dunkel.
   =================================================================== */

:root[data-thema="hell"] .lf-kasten {
    background: rgba(16, 16, 20, .03);
    border-color: rgba(16, 16, 20, .10);
}

:root[data-thema="hell"] .lf-kasten[data-an="ja"] {
    background: rgba(59, 130, 246, .10);
    border-color: rgba(37, 99, 235, .45);
}

:root[data-thema="hell"] .lf-titel .fr-zeichen,
:root[data-thema="hell"] .lf-hilfe {
    color: rgba(16, 16, 20, .45);
}

:root[data-thema="hell"] .lf-kasten[data-an="ja"] .lf-titel>.fr-zeichen,
:root[data-thema="hell"] .lf-kasten[data-an="ja"] .lf-titel h3,
:root[data-thema="hell"] .lf-info-kopf {
    color: #1d4ed8;
}

:root[data-thema="hell"] .lf-schieber {
    background: rgba(16, 16, 20, .18);
}

:root[data-thema="hell"] .lf-text {
    color: rgba(16, 16, 20, .62);
}

:root[data-thema="hell"] .lf-kasten[data-an="ja"] .lf-text {
    color: rgba(16, 16, 20, .86);
}

:root[data-thema="hell"] .lf-ablauf {
    color: #92650a;
}

:root[data-thema="hell"] .lf-info {
    background: rgba(16, 16, 20, .05);
}

:root[data-thema="hell"] .lf-info-text {
    color: rgba(16, 16, 20, .75);
}

:root[data-thema="hell"] .lf-zurueck {
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .35);
    color: #b91c1c;
}

:root[data-thema="hell"] .lf-zurueck:hover {
    background: rgba(220, 38, 38, .16);
}