fix(web): Rollbalken lief ueber die Player-Leiste

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

CHANGELOG.md

@@ -122,6 +122,14 @@ Die Android-App zählt eigenständig weiter (mehrere APKs pro Release). Welche d
   - Die Seite hat dafür einen Zurück-Knopf bekommen (vorher unnötig, weil sie über die Seitenleiste
     erreichbar war) und zählt für die Seitenleiste jetzt zur Bibliothek statt zu Entdecken.
 
+### Fixed
+- **Der Rollbalken lief über die Player-Leiste (Web)** — sofort nach dem Verbreitern gemeldet. Der
+  Balken gehört zum Scrollbereich und läuft über dessen ganze Höhe, und `.main` reichte per
+  `padding-bottom` bis an den Fensterboden, also bis **unter** die Leiste. Bei 4 px fiel das nie
+  auf, bei 12 px sofort. Der Scrollbereich endet jetzt per `margin-bottom` über der Leiste — auf
+  dem Handy über Leiste **und** unterer Navigation. Die Platzreserve für den Inhalt, die das
+  `padding-bottom` war, ist damit überflüssig geworden und entfällt.
+
 ---
 
 ## [3.0] — 2026-09-19

styles.css

@@ -101,7 +101,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .nav-item svg{flex-shrink:0;width:15px;height:15px}
 
 /* ── MAIN ── */
-.main{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--player-h);background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(232,160,32,.04) 0%,transparent 60%)}
+/* Der Rollbalken gehoert zum Scrollbereich und laeuft ueber dessen ganze Hoehe. Mit
+   padding-bottom reichte .main bis an den Fensterboden, also bis UNTER die Player-Leiste —
+   bei 4 px fiel das nicht auf, bei 12 px schon. Deshalb endet der Scrollbereich jetzt per
+   margin-bottom ueber der Leiste; die Platzreserve fuer den Inhalt ist damit ohnehin ueberfluessig. */
+.main{flex:1;overflow-y:auto;overflow-x:hidden;margin-bottom:var(--player-h);padding-bottom:16px;background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(232,160,32,.04) 0%,transparent 60%)}
 .page{display:none;padding:24px 28px}
 .page.active{display:block}
 .page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px}
@@ -608,9 +612,9 @@ button:focus{outline:none}
   .bottom-nav{display:flex;flex-direction:column;justify-content:flex-start}
   /* player sits above bottom nav */
   .player{bottom:80px}
-  /* push content above player + bottom nav */
-  .main{padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 64px)}
-  .page{padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 96px)}
+  /* Scrollbereich endet ueber Player UND unterer Leiste — siehe Kommentar bei .main */
+  .main{margin-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom));padding-bottom:16px}
+  .page{padding-bottom:24px}
   .queue-panel{bottom:calc(var(--player-h) + 80px)}
   .preview-bar{bottom:calc(var(--player-h) + 80px)}
   .toast-container{bottom:calc(var(--player-h) + 80px + 16px)}