diff --git a/web/src/styles.css b/web/src/styles.css
index 56d5767..dc47d0d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -45,6 +45,21 @@ body {
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* ---------- Scrollleisten ans Theme anpassen ----------
+   Sonst blitzt in scrollbaren Karten/Tabellen die helle System-Scrollleiste
+   durch. Nutzt die Theme-Variablen, passt sich also hell/dunkel an. */
+* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 8px;
+  border: 2px solid transparent;   /* schlankerer Daumen mit runden Enden */
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+::-webkit-scrollbar-corner { background: transparent; }
+
 h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
 h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spacing: -0.005em; }