/* ═══════════════════════════════════════════════════════════════
   CLUB 218 · SCROLLBAR_C218_v1 · 09.09.2026
   Eine Scrollbar-Optik fuer die ganze Seite: schlank, Pink-Lila.

   Loest die alte Regel in club218-ui-v1.css ab (10 px, Pink→Cyan) —
   diese Datei wird NACH club218-ui-v1.css eingebunden und gewinnt
   dadurch bei gleicher Spezifitaet.

   Firefox versteht nur scrollbar-width/scrollbar-color und kennt
   keine Verlaeufe; dort steht deshalb ein Pink-Ton als Naeherung.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --c218-sb-size: 8px;
  --c218-sb-track: rgba(255,255,255,0.04);
  --c218-sb-thumb: linear-gradient(180deg, #FF006E 0%, #9B59FF 100%);
  --c218-sb-thumb-hover: linear-gradient(180deg, #FF3D8E 0%, #B07FFF 100%);
  --c218-sb-ff: #FF006E;
}

/* ── Firefox ── */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--c218-sb-ff) var(--c218-sb-track);
}

/* ── WebKit · Chrome, Edge, Safari ── */
::-webkit-scrollbar{
  width: var(--c218-sb-size);
  height: var(--c218-sb-size);
}
::-webkit-scrollbar-track{
  background: var(--c218-sb-track);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb{
  background: var(--c218-sb-thumb);
  border-radius: 99px;
  /* Der Rand laesst den Daumen schmaler wirken, ohne die Trefferflaeche
     zu verkleinern — die bleibt fuers Ziehen mit der Maus voll erhalten. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--c218-sb-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner{ background: transparent; }

/* Waagerechte Leisten duerfen noch feiner sein */
::-webkit-scrollbar:horizontal{ height: 6px; }

/* ── Noch schlanker in Overlays und Listen ──
   .c218-scroll-slim an ein scrollendes Element haengen. */
.c218-scroll-slim::-webkit-scrollbar{ width: 6px; height: 6px; }
.c218-scroll-slim::-webkit-scrollbar-thumb{ border-width: 1px; }

/* ── Auf Touch-Geraeten blendet das System die Leiste selbst ein und aus;
      eine dauerhaft sichtbare Spur wirkt dort wie ein Fehler. ── */
@media (hover: none) and (pointer: coarse){
  ::-webkit-scrollbar{ width: 4px; height: 4px; }
  ::-webkit-scrollbar-track{ background: transparent; }
}

/* ── Wer Bewegung reduziert haben will, bekommt keinen Farbwechsel ── */
@media (prefers-reduced-motion: reduce){
  ::-webkit-scrollbar-thumb{ transition: none; }
}