Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css	(revision 125e0e17d0d92bdead20370410615d0fb9dda317)
+++ src/assets/css/style.css	(revision 441f5d6ea607779c2bfc59e9794902491d82d0a4)
@@ -265,4 +265,9 @@
 }
 ::-webkit-scrollbar-corner { background: transparent; }
+
+/* Login/auth = focus-scherm. Bij htmx-navigatie naar login blijft de bottom-tab
+   uit de vorige pagina in de DOM staan → hier verbergen zodat het login-scherm
+   net zo "kaal" is als bij een full-load (waar de tab niet eens gerenderd wordt). */
+body.on-auth .bottom-tab { display: none; }
 body:not(.admin) {
     min-height: 100dvh;
Index: src/views/partials/bottom-tab.ejs
===================================================================
--- src/views/partials/bottom-tab.ejs	(revision 125e0e17d0d92bdead20370410615d0fb9dda317)
+++ src/views/partials/bottom-tab.ejs	(revision 441f5d6ea607779c2bfc59e9794902491d82d0a4)
@@ -111,4 +111,6 @@
     <a class="bottom-tab-item<%= _active === 'login' ? ' is-active' : '' %>"
        href="/auth/login"
+       hx-get="/auth/login?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+       hx-push-url="/auth/login" hx-indicator="#pcms-loading"
        aria-label="Inloggen">
       <svg class="bottom-tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
Index: src/views/partials/topnav.ejs
===================================================================
--- src/views/partials/topnav.ejs	(revision 125e0e17d0d92bdead20370410615d0fb9dda317)
+++ src/views/partials/topnav.ejs	(revision 441f5d6ea607779c2bfc59e9794902491d82d0a4)
@@ -147,5 +147,7 @@
         </details>
       <% } else { %>
-        <a class="nav-link" href="/auth/login">
+        <a class="nav-link" href="/auth/login"
+           hx-get="/auth/login?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+           hx-push-url="/auth/login" hx-indicator="#pcms-loading">
           <span class="nav-label">Inloggen</span>
         </a>
Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs	(revision 125e0e17d0d92bdead20370410615d0fb9dda317)
+++ src/views/shell.ejs	(revision 441f5d6ea607779c2bfc59e9794902491d82d0a4)
@@ -163,5 +163,5 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=8">
+<link rel="stylesheet" href="/assets/css/style.css?v=9">
 
 <!-- Audio player styles: loaded on every page so the mini-player works
@@ -325,7 +325,8 @@
 <script>
 (function() {
-  // The set of mutually-exclusive page-context body classes. When pcmsNav
-  // fires we strip ALL of these and apply just the one the server told us.
-  var PAGE_CLASSES = ['on-home','on-post','on-special','on-archive','on-search','on-admin'];
+  // De page-context body-classes. Bij pcmsNav strippen we ze allemaal en zetten
+  // we opnieuw wat de server stuurde. 'on-auth' staat erbij zodat het login-
+  // focusscherm óók via htmx z'n styling krijgt (geen chrome, geen tab, audio op 0).
+  var PAGE_CLASSES = ['on-home','on-post','on-special','on-archive','on-search','on-admin','on-auth'];
 
   document.body.addEventListener('pcmsNav', function(ev) {
@@ -348,12 +349,14 @@
     var next = d.bodyClass;
     if (!next) return;
-    // Server may send a multi-class string ("on-post extra"). Only the first
-    // page-class is what we care about — strip and replace.
-    var firstClass = String(next).split(/\s+/).find(function(c) {
+    // De server kan meerdere page-classes sturen ("on-special on-auth"). Strip
+    // alle bekende en zet ALLE meegestuurde page-classes terug (niet alleen de
+    // eerste) — anders mist 'on-auth' bij htmx-nav en blijft het login-scherm
+    // de chrome/tab van de vorige pagina houden.
+    var matched = String(next).split(/\s+/).filter(function(c) {
       return PAGE_CLASSES.indexOf(c) >= 0;
     });
-    if (!firstClass) return;
+    if (!matched.length) return;
     PAGE_CLASSES.forEach(function(c) { document.body.classList.remove(c); });
-    document.body.classList.add(firstClass);
+    matched.forEach(function(c) { document.body.classList.add(c); });
   });
 })();