/* 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. */
/* PERFORMANCE (Fund 12.10.2026: Chrome auf dem Windows-ARM-Tablet ruckelte beim Scrollen fast unbenutzbar, Firefox nicht).
   Frueher: "background ... fixed" (SVG mit Filter/Maske) auf dem body UND auf dem sticky Kopfbereich - dabei muss der Browser den Hintergrund bei
   JEDEM Scroll-Frame neu zeichnen (fixed-Hintergrund an einem bewegten/sticky Element laesst sich nicht auf der GPU zwischenspeichern).
   Jetzt: EIN fest stehender Layer (html::before, position:fixed) mit dem Bild - wird einmal gezeichnet und nur noch zusammengesetzt; der body ist
   transparent, der sticky Kopfbereich hat eine einfache Volltonfarbe (.top-bg-sticky) statt eines zweiten Bildausschnitts. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/static/brand/top-background/bg-dark.svg") right center / cover no-repeat;
  will-change: transform;
}
html[data-theme="light"]::before {
  background-image: url("/static/brand/top-background/bg-light.svg");
}
.top-bg { background: transparent; }
.top-bg-sticky { background: #040918; }
html[data-theme="light"] .top-bg-sticky { background: #f1f5f9; }

/* Weichzeichner hinter halbtransparenten Leisten (backdrop-filter) ist auf schwacher/Software-Grafik der teuerste Effekt - bei 90 % Deckkraft
   ohnehin kaum sichtbar, daher global aus. */
.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 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; }