/* TOP – Seitenhintergrund im Logo-Stil
   Dunkel ist Standard; Hell greift, wenn der Hell-Modus aktiv ist.
   Selektor an TOPs bestehenden Umschalter angepasst (data-theme="light"
   auf <html>, gesetzt in base.html per localStorage - siehe dort. Kein
   ".light"-Klassen-Umschalter im Einsatz, daher entfernt). */

/* Fund 23.09.2026: der urspruengliche ::before-mit-z-index:-1-Trick wurde
   vom eigenen, deckenden background-color des <body> uebermalt - body
   erzeugt (position:relative OHNE eigenes z-index) keinen eigenen
   Stacking-Context, malt sein normales Box-Hintergrund also NACH (also
   optisch ueber) dem negativ indizierten ::before. Direkt als Hintergrund-
   Ebene auf .top-bg selbst gesetzt (kein ::before mehr noetig) - dieselbe
   Technik wie bei menu.csjr.de/display-src, keine Stacking-Context-Fallen
   mehr moeglich. background-attachment:fixed statt position:fixed sorgt
   weiterhin dafuer, dass das Muster beim Scrollen an Ort und Stelle bleibt. */
.top-bg {
  background: url("/static/brand/top-background/bg-dark.svg") right center / cover no-repeat fixed, #020617;
}
html[data-theme="light"] .top-bg {
  background: url("/static/brand/top-background/bg-light.svg") right center / cover no-repeat fixed, #f8fafc;
}

/* Passende Flächen für Karten/Tabellen über dem Hintergrund */
.top-surface {
  background: rgb(15 23 42 / .86);               /* slate-900 */
  border: 1px solid rgb(56 189 248 / .14);        /* sky-400 */
  border-radius: 14px;
  box-shadow: 0 1px 0 rgb(186 230 253 / .06) inset, 0 12px 32px -12px rgb(2 6 23 / .6);
  /* bewusst kein backdrop-filter: spart GPU, v.a. auf Pi/Info-Displays */
}
html[data-theme="light"] .top-surface {
  background: rgb(255 255 255 / .88);
  border-color: rgb(2 132 199 / .14);             /* sky-600 */
  box-shadow: 0 12px 32px -14px rgb(3 105 161 / .25);
}

/* Hell/Dunkel-Umschaltung fuer die fest eingefaerbten Logo-Dateien
   (top-mark-on-*.svg, top-wordmark-on-*.svg, top-lockup-on-*.svg) - die
   nutzen KEIN currentColor (siehe deren eigene Datei-Kommentare), daher
   hier zwei uebereinander liegende <img>, per data-theme ein-/ausgeblendet,
   statt eines Farb-Tricks. Anwendung: zwei <img class="top-logo-dark">/
   <img class="top-logo-light"> nebeneinander im Markup. */
.top-logo-dark { display: block; }
.top-logo-light { display: none; }
html[data-theme="light"] .top-logo-dark { display: none; }
html[data-theme="light"] .top-logo-light { display: block; }