Layout: JETZT/HUND/WELT Nav nach unten, Info-Karte höher

- #world-dots: ausgeblendet auf Mobile (Labels dienen als Tab-Indikator)
- #world-labels: von top→bottom (safe-area+20px), pill-Style für active
  right:80px damit FAB nicht überlappt, backdrop-blur auf active label
- .world-panel top-padding: 58→32px (Info-Karte startet weiter oben)
- Desktop @media 768px: Nav bleibt oben (dots+labels wie vorher)
- components.css ?v=1003, SW by-v1004, APP_VER 1004

backend/main.py

@@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request):
         raise _HE(404, "Nicht gefunden.")
     return _media_response(filepath)
 
-APP_VER = "1003"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "1004"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/static/css/components.css

@@ -7876,58 +7876,53 @@ svg.empty-state-icon {
 }
 #wp-welt { overflow: hidden; position: relative; }
 
-/* Navigation-Punkte */
+/* Navigation-Punkte — auf Mobile ausgeblendet, Labels übernehmen */
 #world-dots {
-  position: fixed;
+  display: none;
-  top: calc(env(safe-area-inset-top, 0px) + 14px);
-  left: 0; right: 0;
-  display: flex;
-  justify-content: center;
-  gap: 5px;
-  z-index: 60;
-  pointer-events: none;
-}
-.wdot {
-  width: 6px; height: 6px;
-  border-radius: 50%;
-  background: var(--c-text);
-  opacity: 0.2;
-  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-  cursor: pointer;
-}
-.wdot.active {
-  width: 22px;
-  border-radius: 3px;
-  opacity: 1;
-  background: var(--c-primary);
 }
 
-/* Welt-Labels */
+/* Welt-Labels — jetzt unten als Tab-Bar */
 #world-labels {
   position: fixed;
-  top: calc(env(safe-area-inset-top, 0px) + 28px);
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
-  left: 0; right: 0;
+  top: auto;
+  left: 0; right: 80px; /* Platz für FAB rechts */
   display: flex;
   justify-content: center;
-  gap: 28px;
+  gap: 8px;
   z-index: 59;
   pointer-events: none;
 }
 .wlabel {
-  font-size: 9px;
+  font-size: 10px;
   font-weight: 800;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.1em;
   color: white;
-  opacity: 0.4;
+  opacity: 0.45;
   text-transform: uppercase;
-  transition: opacity 0.18s;
+  transition: opacity 0.18s, background 0.18s;
+  padding: 6px 16px;
+  border-radius: 20px;
+}
+.wlabel.active {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
-.wlabel.active { opacity: 1; }
 
 @media (min-width: 768px) {
+  /* Desktop: Nav wieder oben, Dots wieder sichtbar */
+  #world-dots {
+    display: flex;
+    top: calc(env(safe-area-inset-top, 0px) + 14px);
+    bottom: auto;
+  }
   #world-labels {
+    bottom: auto;
+    top: calc(env(safe-area-inset-top, 0px) + 28px);
+    right: 0;
     gap: 40px;
-    top: calc(env(safe-area-inset-top, 0px) + 18px);
   }
   .wlabel {
     font-size: 13px;
@@ -7936,7 +7931,6 @@ svg.empty-state-icon {
     padding: 6px 14px;
     border-radius: 20px;
     text-shadow: 0 1px 6px rgba(0,0,0,0.7);
-    transition: opacity 0.18s, background 0.18s;
   }
   .wlabel:hover {
     opacity: 0.85;
@@ -7946,6 +7940,8 @@ svg.empty-state-icon {
     opacity: 1;
     background: rgba(255, 255, 255, 0.18);
     text-shadow: 0 1px 8px rgba(0,0,0,0.5);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
 }
 
@@ -8041,7 +8037,7 @@ svg.empty-state-icon {
   display: flex;
   flex-direction: column;
   justify-content: space-between;  /* Info oben, Chips unten */
-  padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px
+  padding: calc(env(safe-area-inset-top, 0px) + 32px) 14px
            calc(env(safe-area-inset-bottom, 0px) + 76px);
   overflow-y: auto;
   overflow-x: hidden;

backend/static/index.html

@@ -103,7 +103,7 @@
   <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
   <link rel="stylesheet" href="/css/design-system.css?v=907">
   <link rel="stylesheet" href="/css/layout.css?v=973">
-  <link rel="stylesheet" href="/css/components.css?v=1002">
+  <link rel="stylesheet" href="/css/components.css?v=1003">
 </head>
 <body>
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '1003'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1004'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/sw.js

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