diff --git a/CHANGELOG.md b/CHANGELOG.md
index f528ece..ab9a1f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -109,6 +109,14 @@ Die Android-App zählt eigenständig weiter (mehrere APKs pro Release). Welche d
 
 
 ### Changed
+- **Der Rollbalken läuft nur noch über den Inhalt, nicht über die Suchleiste (Web)** — die
+  Kopfzeile mit Suche, Glocke und Zahnrad lag **im** Rollbereich und blieb per `sticky` oben
+  kleben. Der Balken gehört zum Rollbereich und reichte damit bis ganz nach oben, neben eine
+  Leiste, in der gar nichts rollt. Die Kopfzeile sitzt jetzt außerhalb: eine Spalte rechts der
+  Seitenleiste trägt oben die feste Kopfzeile und darunter den Rollbereich. Das Suchfeld samt
+  Ergebnisfenster ist dabei unverändert geblieben — mit jsdom gegengeprüft, **14 Fälle grün**.
+- **Die Warteschlange hat einen Schließen-Knopf (Web)** — sie ließ sich nur über denselben Knopf
+  im Player wieder zumachen, mit dem man sie geöffnet hatte. Jetzt steht ein ✕ in ihrer Kopfzeile.
 - **Der Rollbalken ist greifbar (Web)** — er war 4 px breit. Sichtbar reichte das, mit der Maus war
   er kaum zu treffen: in einer langen Playlist kam man nicht ans Ende, ohne zu scrollen. Jetzt 12 px
   **Greiffläche** mit einem schmalen sichtbaren Balken darin (durchsichtiger Rand plus
diff --git a/index.html b/index.html
index 6057142..bc20aa6 100644
--- a/index.html
+++ b/index.html
@@ -98,32 +98,33 @@
     <div class="mobile-overlay" id="mobile-overlay" onclick="closeSidebar()"></div>
 
     <!-- MAIN -->
-    <main class="main" id="main-content">
-
-      <!-- Mobile header -->
-      <div id="mobile-header" style="position:sticky;top:0;background:var(--bg);z-index:10;border-bottom:1px solid var(--border)">
-        <div style="display:flex;align-items:center;gap:8px;padding:10px 12px">
-          <div class="header-search-wrap">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-            <input id="header-search-input" type="text" placeholder="Suchen…" oninput="onHeaderSearch(this.value)" autocomplete="off">
-            <button id="header-search-clear" onclick="closeHeaderSearch()" style="display:none;background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:0;line-height:1;flex-shrink:0">✕</button>
+    <!-- Kopfzeile liegt AUSSERHALB des Rollbereichs: sonst laeuft der Rollbalken bis ganz
+         nach oben neben die Suchleiste, obwohl dort nichts rollt. -->
+    <div class="main-wrap">
+        <div id="mobile-header" style="position:sticky;top:0;background:var(--bg);z-index:10;border-bottom:1px solid var(--border)">
+          <div style="display:flex;align-items:center;gap:8px;padding:10px 12px">
+            <div class="header-search-wrap">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+              <input id="header-search-input" type="text" placeholder="Suchen…" oninput="onHeaderSearch(this.value)" autocomplete="off">
+              <button id="header-search-clear" onclick="closeHeaderSearch()" style="display:none;background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:0;line-height:1;flex-shrink:0">✕</button>
+            </div>
+            <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
+              <button class="hbtn notif-bell-btn" onclick="toggleNotifPanel()" title="Benachrichtigungen" style="padding:8px;color:var(--text2)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+                <span class="notif-badge" style="display:none">0</span>
+              </button>
+              <button class="hbtn" onclick="openSettings()" title="Einstellungen" style="padding:8px;color:var(--text2)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+              </button>
+            </div>
           </div>
-          <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
-            <button class="hbtn notif-bell-btn" onclick="toggleNotifPanel()" title="Benachrichtigungen" style="padding:8px;color:var(--text2)">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
-              <span class="notif-badge" style="display:none">0</span>
-            </button>
-            <button class="hbtn" onclick="openSettings()" title="Einstellungen" style="padding:8px;color:var(--text2)">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-            </button>
+          <!-- Results panel: spans the full main-content width (anchored to the header, which already
+               sits right of the sidebar) so it never covers the sidebar and leaves no dead scroll strip -->
+          <div id="header-search-overlay" style="display:none">
+            <div id="header-search-results"></div>
           </div>
         </div>
-        <!-- Results panel: spans the full main-content width (anchored to the header, which already
-             sits right of the sidebar) so it never covers the sidebar and leaves no dead scroll strip -->
-        <div id="header-search-overlay" style="display:none">
-          <div id="header-search-results"></div>
-        </div>
-      </div>
+      <main class="main" id="main-content">
 
       <!-- HOME -->
       <div class="page active" id="page-home">
@@ -478,12 +479,18 @@
       </div>
 
 
-    </main>
+      </main>
+    </div>
   </div>
 
   <!-- QUEUE PANEL -->
   <div class="queue-panel" id="queue-panel">
-    <div class="queue-title">Warteschlange</div>
+    <div class="queue-head">
+      <div class="queue-title">Warteschlange</div>
+      <button class="queue-close" onclick="toggleQueue()" title="Warteschlange schließen" aria-label="Schließen">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
     <div class="queue-list" id="queue-list"></div>
   </div>
 
diff --git a/styles.css b/styles.css
index ef23c3c..d58fe9a 100644
--- a/styles.css
+++ b/styles.css
@@ -61,6 +61,10 @@ html.ns-authed #setup-screen{display:none}
 /* ── APP LAYOUT ── */
 #app{display:none;height:100vh;flex-direction:column}
 .app-body{display:flex;flex:1;overflow:hidden}
+/* Spalte rechts der Seitenleiste: oben die feste Kopfzeile, darunter der Rollbereich.
+   Frueher lag die Kopfzeile IM Rollbereich (sticky) — der Rollbalken lief dadurch bis ganz
+   nach oben neben die Suchleiste, obwohl dort nichts rollt. */
+.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
 
 /* ── SIDEBAR ── */
 .sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--player-h)}
@@ -397,7 +401,10 @@ button:focus{outline:none}
 /* ── QUEUE PANEL ── */
 .queue-panel{position:fixed;right:0;top:0;bottom:var(--player-h);width:290px;background:var(--bg2);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s;z-index:90;display:flex;flex-direction:column;padding:18px 0}
 .queue-panel.open{transform:translateX(0)}
-.queue-title{font-size:15px;font-weight:700;padding:0 18px 14px;border-bottom:1px solid var(--border)}
+.queue-head{display:flex;align-items:center;gap:8px;padding:0 10px 14px 18px;border-bottom:1px solid var(--border)}
+.queue-title{font-size:15px;font-weight:700;flex:1;min-width:0}
+.queue-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;color:var(--text2);border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
+.queue-close:hover{background:var(--surface);color:var(--text)}
 .queue-list{flex:1;overflow-y:auto;padding:6px 10px}
 .queue-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background .15s}
 .queue-item:hover{background:var(--surface)}