Index: CHANGELOG.md
===================================================================
--- CHANGELOG.md	(revision a0bff445a23aaf9813e1aadbc4a793496eac0087)
+++ CHANGELOG.md	(revision 9ef3c567e925f3102a1ed486c62e7456a9cfc239)
@@ -15,4 +15,8 @@
 
 ### Opgelost
+- Mobiel toetsenbord vs. layout (site-breed): zodra het toetsenbord opent tijdens
+  het typen, verbergen de vaste onderbalken (bottom-tab + mini-speler) zich, zodat
+  ze niet meer over het invoerveld zweven of het overlappen. Ze komen terug zodra
+  het toetsenbord sluit. (Detectie via visualViewport → `body.kb-open`.)
 - Post bewerken op mobiel opende niet meer meteen het toetsenbord: de titel kreeg
   niet langer automatisch focus (`autofocus` weg). Op desktop focust de titel nog wel.
Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css	(revision a0bff445a23aaf9813e1aadbc4a793496eac0087)
+++ src/assets/css/style.css	(revision 9ef3c567e925f3102a1ed486c62e7456a9cfc239)
@@ -620,4 +620,12 @@
 .pcms-main { padding-bottom: 5.5rem; }
 body.has-audio-player .pcms-main { padding-bottom: 5.5rem; }
+
+/* Mobiel toetsenbord open (body.kb-open, gezet via visualViewport in shell.ejs):
+   verberg de vaste onderbalken — anders zweven de bottom-tab + mini-speler boven
+   het toetsenbord of overlappen ze het invoerveld. Ze komen terug zodra het
+   toetsenbord sluit. De extra clearance onderaan is dan ook niet meer nodig. */
+body.kb-open .bottom-tab,
+body.kb-open .audio-player { display: none !important; }
+body.kb-open .pcms-main { padding-bottom: 1rem; }
 
 /* ============================================================
Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs	(revision a0bff445a23aaf9813e1aadbc4a793496eac0087)
+++ src/views/shell.ejs	(revision 9ef3c567e925f3102a1ed486c62e7456a9cfc239)
@@ -163,5 +163,5 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=11">
+<link rel="stylesheet" href="/assets/css/style.css?v=12">
 
 <!-- Audio player styles: loaded on every page so the mini-player works
@@ -528,4 +528,28 @@
 </script>
 
+<!-- Mobiel toetsenbord vs. site-layout: zet body.kb-open zodra het toetsenbord
+     open is (visual viewport fors korter dan het venster) ÉN er een invoerveld
+     focus heeft. CSS verbergt dan de vaste onderbalken (bottom-tab + mini-speler)
+     zodat ze niet over het invoerveld zweven. -->
+<script>
+(function () {
+  var vv = window.visualViewport;
+  if (!vv) return;
+  function isField(el) {
+    if (!el) return false;
+    var t = el.tagName;
+    return t === 'INPUT' || t === 'TEXTAREA' || el.isContentEditable;
+  }
+  function update() {
+    var open = (window.innerHeight - vv.height) > 150 && isField(document.activeElement);
+    document.body.classList.toggle('kb-open', open);
+  }
+  vv.addEventListener('resize', update);
+  vv.addEventListener('scroll', update);
+  document.addEventListener('focusin', function () { setTimeout(update, 60); });
+  document.addEventListener('focusout', function () { setTimeout(update, 60); });
+})();
+</script>
+
 <!-- PWA install prompt — show button when browser fires beforeinstallprompt -->
 <script>