/*
 * Zentrales Scrollbar-Styling.
 *
 * WARUM zentral statt pro Seite: Vor dieser Datei gab es im Projekt gar kein
 * Scrollbar-Styling, jede Seite und jedes interne Scroll-Panel zeigte den
 * hellen Browser-Standard auf dunklem Hintergrund. Eine einzelne Datei, die
 * global auf allen Seiten geladen wird, hält das Erscheinungsbild an einer
 * Stelle pflegbar, statt die gleichen Regeln in jedem Template/Panel zu
 * wiederholen (und dabei unweigerlich auseinanderlaufen zu lassen).
 *
 * Es werden ausschließlich bestehende Design-Tokens aus style.css/consent.css
 * verwendet (--bg, --panel-deep, --border, --accent) - beide Stylesheets
 * definieren diese mit identischen Werten, daher funktioniert die Datei auf
 * jeder Seite unabhängig davon, welches der beiden Basis-Stylesheets geladen
 * ist.
 */

/* Firefox: eigenes, schmales Scrollbar-Modell ohne Pseudo-Elemente. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--panel-deep);
}

/* WebKit/Blink (Chrome, Edge, neueres Safari): Pseudo-Elemente. */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--panel-deep);
}

::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 999px;
  /* Transparenter Rand sorgt für sichtbaren Abstand zum Track, ohne eine
     neue Farbe einzuführen (border-color folgt dem Thumb, aber der Rand
     selbst bleibt "clip: padding-box"-artig durchsichtig). */
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

::-webkit-scrollbar-corner {
  background: var(--bg);
}