style: update navigation styles for improved layout and consistency

- Adjusted the height and padding of the navigation bar for better alignment with design standards.
- Enhanced the bottom navigation with a new box shadow for improved visual separation.
- Updated nav-item dimensions and styles for better responsiveness and user interaction.
- Increased icon size in navigation items for better visibility and accessibility.

frontend/src/App.jsx

@@ -55,7 +55,7 @@ function Nav({ isAdmin }) {
             'nav-item' + (navItemActive(loc.pathname, item, isActive) ? ' active' : '')
           }
         >
-          <item.Icon size={20} strokeWidth={2} />
+          <item.Icon size={26} strokeWidth={2} />
           <span>{item.shortLabel || item.label}</span>
         </NavLink>
       ))}

frontend/src/app.css

@@ -12,9 +12,9 @@
   --accent-dark: #0a5c43;
   --danger: #D85A30;
   --warn: #EF9F27;
-  /* Höhe der eigentlichen Tab-Zeile (ohne Abstand/Home-Indicator) */
-  --nav-h: 56px;
-  --nav-pad-top: 8px;
+  /* Höhe der Tab-Zeile (Icon + Beschriftung, ohne Home-Indicator) — an Mitai/iOS-Tabbar angelehnt */
+  --nav-h: 58px;
+  --nav-pad-top: 10px;
   --header-h: 52px;
   --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --capture-content-max: 800px;
@@ -27,6 +27,9 @@
     --text1: #eeecea; --text2: #aaa9a4; --text3: #686762;
     --accent-light: #04342C; --accent-dark: #5DCAA5;
   }
+  .bottom-nav {
+    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.55);
+  }
 }
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html, body, #root { height: 100%; }
@@ -168,18 +171,21 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
   width: auto;
   max-width: none;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   background: var(--surface);
   border-top: 1px solid var(--border);
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
   z-index: 20;
   overflow-x: auto;
   overflow-y: visible;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  scroll-snap-type: x proximity;
+  overscroll-behavior-x: contain;
   justify-content: flex-start;
-  gap: 2px;
-  padding: var(--nav-pad-top) max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
+  gap: 4px;
+  padding: var(--nav-pad-top) max(10px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px));
   min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px));
   height: auto;
   box-sizing: border-box;
@@ -189,25 +195,29 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 }
 .nav-item {
   flex: 0 0 auto;
-  min-width: 56px;
-  max-width: 96px;
+  min-width: 68px;
+  max-width: 108px;
+  min-height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 3px;
+  gap: 4px;
   color: var(--text3);
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 600;
   transition: color 0.15s;
-  padding: 2px 4px 4px;
+  padding: 6px 10px 8px;
   box-sizing: border-box;
+  scroll-snap-align: center;
+  -webkit-tap-highlight-color: transparent;
 }
 .nav-item span {
-  font-size: 10px;
-  line-height: 1.15;
+  font-size: 11px;
+  line-height: 1.2;
   text-align: center;
   max-width: 100%;
+  letter-spacing: 0.01em;
 }
 .nav-item.active { color: var(--accent); }
 .nav-item svg { flex-shrink: 0; }
@@ -1262,23 +1272,6 @@ a.analysis-split__nav-item {
     font-size: 0.8rem;
   }
 
-  /* Untere Hauptnavigation: etwas kompakter */
-  .bottom-nav {
-    gap: 0;
-    padding-top: 5px;
-  }
-
-  .nav-item {
-    min-width: 52px;
-    max-width: 90px;
-    padding: 1px 2px 3px;
-    gap: 2px;
-  }
-
-  .nav-item span {
-    font-size: 9.5px;
-  }
-
   .admin-page-subtabs {
     margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px)));
     margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));