feat: Mobile Bottom-Navigation mit Swipe und Dot-Indikator

- Alle 9 Menüpunkte jetzt auf Mobile erreichbar (2 Seiten)
- Horizontaler Scroll-Snap für seitenweises Swipen
- Dezente Dot-Indikatoren zeigen aktive Seite an
- Automatischer Scroll zur richtigen Seite bei Navigation zu Seite-2-Items
- Service Worker Cache v12

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/styles/layout.css

@@ -66,7 +66,7 @@
  * -------------------------------------------------------- */
 .app-content {
   flex: 1;
-  padding-bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom));
+  padding-bottom: calc(var(--nav-height-mobile) + 12px + var(--safe-area-inset-bottom));
   overflow-y: auto;
 }
 
@@ -86,21 +86,58 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom));
-  padding-bottom: var(--safe-area-inset-bottom);
   background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
   border-top: 1px solid var(--color-border-subtle);
   display: flex;
-  align-items: center;
+  flex-direction: column;
   z-index: var(--z-nav);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
+  padding-bottom: var(--safe-area-inset-bottom);
 }
 
-.nav-bottom__items {
+/* ── Dot-Indikator ── */
+.nav-bottom__dots {
   display: flex;
-  width: 100%;
-  height: 100%;
+  justify-content: center;
+  gap: 6px;
+  padding: 5px 0 2px;
+}
+
+.nav-bottom__dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--color-text-tertiary);
+  opacity: 0.25;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.nav-bottom__dot--active {
+  opacity: 0.7;
+  transform: scale(1.2);
+}
+
+/* ── Scroll-Container ── */
+.nav-bottom__scroll {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;              /* Firefox */
+  height: var(--nav-height-mobile);
+}
+
+.nav-bottom__scroll::-webkit-scrollbar {
+  display: none;                       /* Chrome/Safari */
+}
+
+/* ── Einzelne Seiten ── */
+.nav-bottom__page {
+  display: flex;
+  min-width: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
 }
 
 /* ── Nav-Item (Bottom-Bar): Basis-State ── */