/**********************************************************************
 Globaler Dark Mode
 Geheimer Schalter: 3x schnell auf den Schreibtisch (Header) klicken
 -> blendet den Dark-Mode-Schalter auf dem Schreibtisch ein/aus.
 Logik: jsc/darkmode.js

 Trick: invert + hue-rotate auf dem Root-Element dreht alle Farben
 der gesamten Seite (inkl. Inline-Styles), ohne dass einzelne
 CSS-Regeln angepasst werden muessen. Laut CSS-Spec bricht ein
 filter auf dem Root-Element position:fixed/sticky NICHT.

 invert(0.85): Weiss -> #262626 (weiches Dunkelgrau),
 Schwarz -> #d9d9d9 (angenehmes helles Grau statt grellem Weiss).
**********************************************************************/

html.bilsa-dark {
  filter: invert(0.85) hue-rotate(180deg);
  background: #e0e0e0; /* wird invertiert zu ~#3c3c3c (Seitenhintergrund) */
  color-scheme: dark;  /* dunkle Scrollbars (werden vom Filter nicht erfasst) */
}


/**********************************************************************
 Portalfarben im Dark Mode = Originale Akzentfarben.
 Die Werte sind VOR-invertiert, d.h. so gerechnet, dass sie NACH der
 Filterkette [invert(0.85) -> hue-rotate(180deg)] moeglichst exakt
 wie die Original-Akzentfarben erscheinen:

   Quelle #ff6600  ->  angezeigt ~#d96e26 (EXAKT der Farbton des
                                           Original-Orange #ff822d [Hue 24],
                                           voll gesaettigt, nur ca. 15%
                                           dunkler - heller als Kanalwert
                                           217 kann der Filter nicht;
                                           Kontrast 4.5:1 - lesbar)
   Quelle #4a7aff  ->  angezeigt ~#6284e1 (kraeftiges Royalblau statt
                                           Original-Navy #243367 - Navy
                                           haette auf dunklem Grund nur
                                           1.3:1 Kontrast und waere als
                                           Textfarbe unlesbar; so: 4.3:1)

 Der Seitenhintergrund (body) bekommt zusaetzlich eine hellere
 Flaeche (#3c3c3c), damit sich der Inhaltsbereich abhebt.
**********************************************************************/
html.bilsa-dark body {
  background-color: #e0e0e0; /* angezeigt ~#3c3c3c (Seitenhintergrund) */
  --bs-primary: #ff6600;
  --bs-primary-rgb: 255, 102, 0;
  --bs-secondary: #4a7aff;
  --bs-secondary-rgb: 74, 122, 255;
}

/* Medien und das Schreibtisch-Foto zurueck-invertieren.
   invert(1) allein wuerde unter dem aeusseren invert(0.85) den
   Kontrast um Faktor 0.7 stauchen ("grauer Schleier") - das
   contrast(1.4286) = 1/0.7 ist die exakte mathematische Umkehrung:
   alle Mitteltoene erscheinen wieder 1:1 original, nur reines
   Schwarz/Weiss wird auf #262626/#d9d9d9 begrenzt (physikalische
   Grenze des Root-Filters). */
html.bilsa-dark img,
html.bilsa-dark video,
html.bilsa-dark iframe,
html.bilsa-dark canvas,
html.bilsa-dark .desktop {
  filter: invert(1) contrast(1.4286) hue-rotate(180deg);
}

/* Der Schreibtisch wird komplett zurueck-invertiert und zeigt daher
   die Farben unveraendert an -> dort wieder die Originalfarben nutzen */
html.bilsa-dark .desktop {
  --bs-primary: #ff822d;
  --bs-primary-rgb: 255, 130, 45;
  --bs-secondary: #243367;
  --bs-secondary-rgb: 36, 51, 103;
}

/**********************************************************************
 Vordergrund/Hintergrund-Trennung - WICHTIG, warum genau so herum:

 Beitragsinhalte enthalten redaktionell gepflegte Boxen/Tabellen mit
 WEISSEM Inline-Hintergrund (aus dem Editor). Die kann kein Selektor
 zuverlaessig erfassen. Weiss wird vom Filter IMMER zu #262626 - dem
 dunkelstmoeglichen Ton. Ein einheitlicher Inhaltsbereich ist daher
 nur moeglich, wenn die Inhaltsflaeche selbst WEISS (= #262626) ist:
 dann kollabieren Container, Cards und alle Redakteurs-Boxen von
 selbst auf exakt dieselbe Farbe.
 Der Seitenhintergrund ist folglich der HELLERE Ton:
   Inhaltsbereich:    #fff    -> angezeigt  #262626 (einheitlich)
   Seitenhintergrund: #e0e0e0 -> angezeigt ~#3c3c3c
**********************************************************************/
html.bilsa-dark .desktop_container,
html.bilsa-dark .desktop_container .card {
  --bs-card-bg: #fff;
  background-color: #fff;
}

/* Der helle Standard-Schatten (var(--bs-gray)) wirkt im Dark Mode wie
   ein seltsamer Glow. Weisse Schattenfarbe -> wird vom Filter zum
   dunkelstmoeglichen Ton -> normaler dunkler Schatten. */
html.bilsa-dark .desktop_container {
  box-shadow: 1px 1px 22px 0px #fff;
}

/* Digitale-Dienste-Kacheln: Marken-Logos IMMER in Originalfarben zeigen
   (Farbrotation veraendert fremde Wort-/Bildmarken - rechtlich heikel).
   Die Rueck-Invertierung liegt auf dem Logo-Container (.dd26-logo), damit
   auch Inline-SVGs und die farbigen Initial-Badges erfasst sind - nicht
   nur <img> (das die globale Regel oben schon abdeckt). Die Kind-Filter
   werden abgeschaltet, sonst wuerde doppelt invertiert (= wieder rotiert). */
html.bilsa-dark .dd26-logo {
  filter: invert(1) contrast(1.4286) hue-rotate(180deg);
}
html.bilsa-dark .dd26-logo img,
html.bilsa-dark .dd26-logo svg,
html.bilsa-dark .dd26-logo picture {
  filter: none;
}

/* Innerhalb bereits zurueck-invertierter Bereiche (Schreibtisch)
   nicht doppelt invertieren */
html.bilsa-dark .desktop img,
html.bilsa-dark .desktop video,
html.bilsa-dark .desktop iframe,
html.bilsa-dark .desktop canvas {
  filter: none;
}

/**********************************************************************
 Der Dark-Mode-Schalter auf dem Schreibtisch.
 Unsichtbar, bis er per 3fach-Klick auf den Schreibtisch
 freigeschaltet wird (html.show-darkmode-switch).
 Liegt innerhalb von .desktop und wird daher immer unveraendert
 (nicht invertiert) dargestellt -> Originalfarben verwenden.
**********************************************************************/
.darkmode-switch {
  display: none;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 300;
  width: 58px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  background: #243367;
  border: 2px solid rgba(255, 255, 255, 0.75);
  transition: background 0.25s ease-in-out;
}
html.show-darkmode-switch .darkmode-switch {
  display: block;
}
/* Bei eingeklapptem Schreibtisch ist dessen oberer Bereich nicht
   sichtbar -> Schalter dort ausblenden (nach der show-Regel, damit
   sie bei gleicher Spezifitaet gewinnt) */
.cover-small .darkmode-switch {
  display: none;
}
.darkmode-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #243367;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  transition: left 0.25s ease-in-out;
}
html.bilsa-dark .darkmode-switch {
  background: #ff822d;
}
html.bilsa-dark .darkmode-switch .knob {
  left: 32px;
  color: #ff822d;
}
/* Icon im Knopf: Mond im hellen Modus (= "schalte dunkel"),
   Sonne im dunklen Modus (= "schalte hell") */
.darkmode-switch .fa-sun { display: none; }
.darkmode-switch .fa-moon { display: inline-block; }
html.bilsa-dark .darkmode-switch .fa-sun { display: inline-block; }
html.bilsa-dark .darkmode-switch .fa-moon { display: none; }

/**********************************************************************
 Hauptnavigation (#menu_desk, aus bs_mmenu.html) im Dark Mode.

 Die Nav liegt AUSSERHALB von #cover und laeuft daher durch den
 Filter. Ihre Submenues/Hover nutzen im Light Mode var(--bs-dark)
 (#3c454c) mit weisser Schrift - der Filter dreht das um zu einem
 schmutzigen Hellgrau (~#a4aaaf) mit dunkler Schrift.

 Fix nach Filter-Logik: Quellfarben Hell/Dunkel TAUSCHEN, dann rendert
 der Filter das gewuenschte Ergebnis:
   Quelle #fff (Flaechen) -> angezeigt #262626 (dunkle Dropdowns,
                             buendig mit dem Inhaltsbereich)
   Quelle #000 (Schrift)  -> angezeigt #d9d9d9 (helle Schrift)
 Der Tab-Balken selbst nutzt var(--bs-primary) und bekommt das
 kraeftige Orange automatisch ueber die Variable oben.
**********************************************************************/
html.bilsa-dark #menu_desk .nav-link:active,
html.bilsa-dark #menu_desk .nav-link:hover,
html.bilsa-dark #menu_desk .nav-link:focus,
html.bilsa-dark .submenu,
html.bilsa-dark #menu_desk > ul > li > ul > li {
  background-color: #fff; /* angezeigt #262626 */
}
html.bilsa-dark #menu_desk .nav-link,
html.bilsa-dark .submenu .dropdown-item {
  color: #000; /* angezeigt #d9d9d9 */
}
/* Pfeil unter dem aktiven Tab (border-top: var(--bs-dark)) an die
   dunkle Dropdown-Flaeche angleichen */
html.bilsa-dark #menu_desk > ul > li > a.show::after {
  border-top-color: #fff; /* angezeigt #262626 */
}

/**********************************************************************
 Moderne Browser: Statt die ganze Seite zu filtern, wird eine fixe
 Filter-EBENE (backdrop-filter) ueber den Inhalt gelegt. Der
 Schreibtisch wird per z-index UEBER diese Ebene gehoben und bleibt
 damit KOMPLETT ungefiltert - echtes Weiss, volle Originalfarben.
 (Der Root-Filter oben dient nur als Fallback ohne backdrop-filter.)

 WICHTIG: Dieser Block MUSS am DATEIENDE stehen! Das "filter: none"
 fuer .desktop muss die Rueck-Invertierungs-Regel (gleiche
 Spezifitaet) ueberschreiben - sonst wird der Schreibtisch doppelt
 invertiert und erscheint in Negativfarben.
**********************************************************************/
@supports (backdrop-filter: invert(0.85)) {
  html.bilsa-dark {
    filter: none;
  }
  html.bilsa-dark::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    backdrop-filter: invert(0.85) hue-rotate(180deg);
  }
  /* Schreibtisch ueber die Filter-Ebene heben -> Originalfarben pur */
  html.bilsa-dark #cover {
    position: relative;
    z-index: 1000000;
  }
  /* KEINE Rueck-Invertierung fuer den (ungefilterten) Schreibtisch */
  html.bilsa-dark .desktop {
    filter: none;
  }
}