Fix: Nav als Flex-Kind in #app{height:100dvh} — kein position:fixed, Desktop-Scroll repariert, SW by-v534

backend/static/css/layout.css

@@ -14,34 +14,34 @@
   overflow:       hidden;
 }
 
-/* Content-Bereich scrollt intern */
+/* Content-Bereich scrollt intern — kein padding-bottom nötig da Nav Flex-Kind */
 #page-content {
-  flex:                1;
+  flex:                  1;
-  min-height:          0;
+  min-height:            0;
-  overflow-y:          auto;
+  overflow-y:            auto;
-  overflow-x:          hidden;
+  overflow-x:            hidden;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: none; /* verhindert iOS-Bounce → fixed Nav bleibt stabil */
+  overscroll-behavior-y: none;
-  padding-bottom:      calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
 }
 
 /* Vollbild-Seiten: #page-content kein Scroll */
 body.page-fullscreen #page-content {
-  overflow:       hidden;
+  overflow: hidden;
-  padding-bottom: 0;
 }
 
-/* Desktop: normaler Dokumentfluss, Sidebar-Layout */
+/* Desktop: window-scroll, Sidebar-Layout */
 @media (min-width: 768px) {
   #app {
-    height:     auto;
+    height:         auto;
-    min-height: 100dvh;
+    min-height:     100dvh;
-    overflow:   visible;
+    overflow:       visible;
     flex-direction: row;
   }
   #page-content {
+    flex:           unset;
     min-height:     unset;
     overflow-y:     visible;
+    overflow-x:     visible;
     padding-bottom: 0;
     padding-left:   var(--nav-sidebar-width);
   }
@@ -174,23 +174,19 @@ body.page-fullscreen #page-content {
    3. BOTTOM NAVIGATION (Mobile)
    ------------------------------------------------------------ */
 #bottom-nav {
-  /* position:fixed relativ zum Viewport — da #app kein transform hat,
+  /* Flex-Kind von #app{height:100dvh} — kein position:fixed nötig.
-     ist dies stabil. Scroll passiert in #page-content (overflow-y:auto),
+     100dvh auf iOS inkludiert Safe Areas → Nav endet am physischen Rand. */
-     nicht im window → kein iOS-Drift. */
+  flex-shrink:    0;
-  position:    fixed;
+  z-index:        700;
-  bottom:      0;
+  min-height:     calc(var(--nav-bottom-height) + var(--safe-bottom));
-  left:        0;
-  right:       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);
+  background:     var(--c-surface);
-  border-top:  1px solid var(--c-border-light);
+  border-top:     1px solid var(--c-border-light);
-  display:     flex;
+  display:        flex;
-  align-items: stretch;
+  align-items:    stretch;
-  box-shadow:  0 -2px 12px rgba(42, 31, 20, 0.08);
+  box-shadow:     0 -2px 12px rgba(42, 31, 20, 0.08);
-  transition:  border-top-color 0.4s ease;
+  transition:     border-top-color 0.4s ease;
 }
 
 @keyframes nav-alert-pulse {

backend/static/index.html

@@ -434,33 +434,32 @@
 
   </main>
 
+  <!-- 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>
+      <span class="nav-item-label">Karte</span>
+    </div>
+    <div class="nav-item" data-page="routes">
+      <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
+      <span class="nav-item-label">Routen</span>
+    </div>
+    <!-- Mittlerer + Button -->
+    <div class="nav-item nav-item-center" id="nav-add">
+      <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg>
+    </div>
+    <div class="nav-item active" data-page="diary">
+      <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
+      <span class="nav-item-label">Tagebuch</span>
+    </div>
+    <div class="nav-item" data-page="forum">
+      <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>
+      <span class="nav-item-label">Forum</span>
+    </div>
+  </nav>
 
 </div><!-- #app -->
 
-<!-- MOBILE BOTTOM NAVIGATION — außerhalb #app damit position:fixed zum echten Viewport -->
-<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>
-    <span class="nav-item-label">Karte</span>
-  </div>
-  <div class="nav-item" data-page="routes">
-    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
-    <span class="nav-item-label">Routen</span>
-  </div>
-  <!-- Mittlerer + Button -->
-  <div class="nav-item nav-item-center" id="nav-add">
-    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg>
-  </div>
-  <div class="nav-item active" data-page="diary">
-    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
-    <span class="nav-item-label">Tagebuch</span>
-  </div>
-  <div class="nav-item" data-page="forum">
-    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>
-    <span class="nav-item-label">Forum</span>
-  </div>
-</nav>
-
 <!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
 <div class="toast-container" id="toast-container" role="alert" aria-live="polite"></div>
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '510'; // ← 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';
 

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v533';
+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