backend/static/css/components.css

@@ -2590,8 +2590,7 @@ html.modal-open {
 .rk-layout {
   display:        flex;
   flex-direction: column;
-  height:         100%;
-  overflow:       hidden;
+  min-height:     100dvh;
   background:     var(--c-bg);
 }
 .rk-header {

backend/static/css/design-system.css

@@ -197,6 +197,7 @@ html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   height: 100%;
+  overscroll-behavior: none; /* kein Window-Bounce auf iOS */
 }
 
 body {
@@ -207,6 +208,7 @@ body {
   color:            var(--c-text);
   background-color: var(--c-bg);
   min-height:       100%;
+  overscroll-behavior: none;
   -webkit-font-smoothing:  antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

backend/static/css/layout.css

@@ -10,38 +10,44 @@
 #app {
   display:        flex;
   flex-direction: column;
-  min-height:     100dvh;
+  height:         100dvh; /* dvh = dynamic viewport inkl. safe areas */
+  overflow:       hidden;
 }
 
-/* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
+/* Content-Bereich scrollt intern — kein padding-bottom nötig da Nav Flex-Kind */
 #page-content {
-  flex:           1;
-  min-height:     0; /* iOS-Flex-Bug: ohne das scrollt body statt #page-content */
-  overflow-y:     auto;
-  overflow-x:     hidden;
-  padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
+  flex:                  1;
+  min-height:            0;
+  overflow-y:            auto;
+  overflow-x:            hidden;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: none;
 }
 
-/* Mobile only: iOS-Bounce verhindert dass fixed-Nav driftet */
-@media (max-width: 767px) {
-  #page-content {
-    overscroll-behavior-y: none;
-  }
+/* Vollbild-Seiten: #page-content kein Scroll */
+body.page-fullscreen #page-content {
+  overflow: hidden;
 }
 
-/* Desktop: Sidebar-Layout — kein Bottom-Nav, natürliche Höhe */
+/* Desktop: window-scroll, Sidebar-Layout */
 @media (min-width: 768px) {
   #app {
+    height:         auto;
+    min-height:     100dvh;
+    overflow:       visible;
     flex-direction: row;
   }
   #page-content {
-    min-height:  unset;
-    overflow-y:  visible; /* nicht als Scroll-Container — Window scrollt */
-    overflow-x:  visible;
+    flex:           unset;
+    min-height:     unset;
+    overflow-y:     visible;
+    overflow-x:     visible;
     padding-bottom: 0;
     padding-left:   var(--nav-sidebar-width);
   }
+  body.page-fullscreen #page-content {
+    overflow: visible;
+  }
 }
 
 /* ------------------------------------------------------------
@@ -159,40 +165,28 @@
   position: relative;
 }
 
-/* Routen: volle Höhe damit .rk-layout height:100% auflöst und
-   das Grid intern scrollt (nicht die gesamte Seite via #page-content) */
-#page-routes {
-  height:   100%;
-  overflow: hidden;
-}
+/* Routen: window-scroll (kein overflow:hidden), padding entfernt */
 #page-routes > .page-body {
-  padding:  0 !important;
-  overflow: hidden;
-  height:   100%;
+  padding: 0 !important;
 }
 
 /* ------------------------------------------------------------
    3. BOTTOM NAVIGATION (Mobile)
    ------------------------------------------------------------ */
 #bottom-nav {
-  position:    fixed;
-  bottom:      0;
-  left:        0;
-  right:       0;
-  z-index:     700;  /* über Leaflet-Panes (~400) */
-  /* GPU-Layer erzwingen → iOS Safari fixed-position Stabilität */
-  transform:   translateZ(0);
-  -webkit-transform: translateZ(0);
-  will-change: transform;
-  min-height:  calc(var(--nav-bottom-height) + var(--safe-bottom));
+  /* Flex-Kind von #app{height:100dvh} — kein position:fixed nötig.
+     100dvh auf iOS inkludiert Safe Areas → Nav endet am physischen Rand. */
+  flex-shrink:    0;
+  z-index:        700;
+  min-height:     calc(var(--nav-bottom-height) + var(--safe-bottom));
   padding-top:    var(--space-1);
   padding-bottom: calc(var(--safe-bottom) + var(--space-1));
-  background:  var(--c-surface);
-  border-top:  1px solid var(--c-border-light);
-  display:     flex;
-  align-items: stretch;
-  box-shadow:  0 -2px 12px rgba(42, 31, 20, 0.08);
-  transition:  border-top-color 0.4s ease;
+  background:     var(--c-surface);
+  border-top:     1px solid var(--c-border-light);
+  display:        flex;
+  align-items:    stretch;
+  box-shadow:     0 -2px 12px rgba(42, 31, 20, 0.08);
+  transition:     border-top-color 0.4s ease;
 }
 
 @keyframes nav-alert-pulse {

backend/static/index.html

@@ -88,9 +88,9 @@
   </script>
 
   <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
-  <link rel="stylesheet" href="/css/design-system.css?v=543">
-  <link rel="stylesheet" href="/css/layout.css?v=543">
-  <link rel="stylesheet" href="/css/components.css?v=543">
+  <link rel="stylesheet" href="/css/design-system.css?v=500">
+  <link rel="stylesheet" href="/css/layout.css?v=500">
+  <link rel="stylesheet" href="/css/components.css?v=500">
 </head>
 <body>
 
@@ -434,7 +434,7 @@
 
   </main>
 
-  <!-- MOBILE BOTTOM NAVIGATION -->
+  <!-- MOBILE BOTTOM NAVIGATION — Flex-Kind von #app (height:100dvh) -->
   <nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
     <div class="nav-item" data-page="map">
       <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg>

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '521'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '511'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 
@@ -88,9 +88,14 @@ const App = (() => {
   // ----------------------------------------------------------
   // ROUTER
   // ----------------------------------------------------------
+  const _FULLSCREEN_PAGES = new Set(['map', 'walks', 'sitting', 'chat']);
+
   function navigate(pageId, pushHistory = true, params = {}) {
     if (!pages[pageId]) return;
 
+    // Vollbild-Seiten benötigen window-scroll deaktiviert (iOS fixed-nav Fix)
+    document.body.classList.toggle('page-fullscreen', _FULLSCREEN_PAGES.has(pageId));
+
     // Aktive Seite ausblenden
     document.querySelector('.page.active')?.classList.remove('active');
     document.querySelectorAll('.nav-item.active, .sidebar-item.active')

backend/static/sw.js

@@ -3,16 +3,16 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v544';
+const CACHE_VERSION = 'by-v534';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache
 
 // index.html wird NICHT pre-gecacht (immer Network-First)
 const STATIC_ASSETS = [
-  '/css/design-system.css?v=543',
-  '/css/layout.css?v=543',
-  '/css/components.css?v=543',
+  '/css/design-system.css?v=500',
+  '/css/layout.css?v=500',
+  '/css/components.css?v=500',
   '/icons/phosphor.svg',
   '/js/api.js',
   '/js/ui.js',