/*
 * Nutzerwunsch 25.09.2026: die Inhalts-"Kaesten" (Panels/Karten) auf den
 * normalen TOP-Seiten (alles, was base.html nutzt und damit den
 * kuenstlerischen top-bg-Hintergrund zeigt, siehe top-background.css)
 * sollen den Hintergrund leicht durchscheinen lassen, statt ihn komplett
 * zu verdecken.
 *
 * Deckkraft-Korrektur (noch selber Tag, 25.09.2026): urspruenglich auf
 * 10% Deckkraft (= 90% durchsichtig) gesetzt - beim echten Test auf dem
 * Lenovo-Notebook-Display (mitgenommen zum Hundeplatz) war das zu
 * durchsichtig, Text auf den Kaesten wurde schlecht lesbar. Schrittweise
 * nachjustiert: 95% -> 70% -> 85% Deckkraft (= 15% durchsichtig) als
 * aktueller Stand - Hintergrund schimmert nur noch dezent durch,
 * Lesbarkeit hat klar Vorrang.
 *
 * BEWUSST NICHT angefasst: bg-slate-950(/NN) - das ist ausschliesslich die
 * abdunkelnde Modal-Backdrop-Flaeche (".fixed inset-0 bg-slate-950/80
 * backdrop-blur-sm ...", siehe live.html/training.html) - deren Zweck ist
 * gerade, den Seiteninhalt DAHINTER abzudunkeln, nicht selbst transparent
 * zu sein.
 *
 * Die eigentliche Modal-BOX innerhalb eines solchen Backdrops nutzt
 * dieselben bg-slate-900/800-Klassen wie ein normaler Inhalts-Kasten -
 * per Nutzerentscheidung (25.09.2026) bleiben Dialoge/Popups aber bewusst
 * DECKEND (bessere Lesbarkeit bei wichtigen Eingaben wie PIN/Korrektur-
 * Bestaetigung/Merge-Konflikt-Aufloesung) - deshalb die Ausnahme unten
 * (CSS Selectors Level 4, von jedem hier eingesetzten Chromium/Firefox
 * seit Jahren unterstuetzt): trifft nur Kaesten, die NICHT selbst ".fixed"/
 * ".nav-flyout-menu" sind und NICHT Nachfahre eines solchen Elements sind.
 *
 * ".nav-flyout-menu" (das Einstellungen-Dropdown im Hauptmenue, siehe
 * base.html) braucht dieselbe Ausnahme separat: es nutzt "position:fixed"
 * ueber eine EIGENE CSS-Klasse (per JS an <body> gehaengt, siehe dortiger
 * Kommentar), nicht Tailwinds ".fixed"-Utility-Klasse - blieb beim ersten
 * Anlauf faelschlich transparent und war dadurch schwer lesbar (Nutzer-
 * Fund 25.09.2026).
 *
 * !important ist hier bewusst und begrenzt eingesetzt: eine reine
 * Tailwind-Utility-Klasse (".bg-slate-900") ohne diese Ueberschreibung
 * gegen eine dynamisch generierte, gleich-spezifische Klasse zu gewinnen
 * waere sonst nicht zuverlaessig moeglich.
 */

.bg-slate-900:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
.bg-slate-900\/90:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
.bg-slate-900\/80:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
.bg-slate-900\/60:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)) {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

.bg-slate-800:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
.bg-slate-800\/60:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
.bg-slate-800\/50:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
.bg-slate-800\/40:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)) {
    background-color: rgba(30, 41, 59, 0.85) !important;
}

html[data-theme="light"] .bg-slate-900:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
html[data-theme="light"] .bg-slate-900\/90:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
html[data-theme="light"] .bg-slate-900\/80:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
html[data-theme="light"] .bg-slate-900\/60:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)) {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .bg-slate-800:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
html[data-theme="light"] .bg-slate-800\/60:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
html[data-theme="light"] .bg-slate-800\/50:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)),
html[data-theme="light"] .bg-slate-800\/40:not(:is(.fixed, .nav-flyout-menu, .fixed *, .nav-flyout-menu *)) {
    background-color: rgba(226, 232, 240, 0.85) !important;
}