feat: add bottom navigation bar (mobile-first)

Fixed bottom nav with Home/Spiele/Rangliste/Profil tabs.
Desktop keeps header nav. Admin hidden behind gear icon.
Main content padded to avoid overlap with bottom nav.

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

frontend/src/components/BottomNav.module.css

@@ -0,0 +1,47 @@
+.bottomNav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 60px;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(75, 183, 248, 0.15);
+  z-index: 100;
+}
+
+.tab, .tabActive {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 16px;
+  font-size: 11px;
+  text-decoration: none;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.tabActive {
+  color: var(--primary);
+}
+
+.tab:hover {
+  color: var(--text-secondary);
+}
+
+.emojiIcon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .bottomNav {
+    display: none;
+  }
+}

frontend/src/components/BottomNav.tsx

@@ -0,0 +1,29 @@
+import { NavLink } from 'react-router-dom';
+import { Home, Trophy, User } from 'lucide-react';
+import styles from './BottomNav.module.css';
+
+export default function BottomNav() {
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive ? styles.tabActive : styles.tab;
+
+  return (
+    <nav className={styles.bottomNav}>
+      <NavLink to="/" end className={linkClass}>
+        <Home size={20} />
+        <span>Home</span>
+      </NavLink>
+      <NavLink to="/spiele" className={linkClass}>
+        <span className={styles.emojiIcon}>⚽</span>
+        <span>Spiele</span>
+      </NavLink>
+      <NavLink to="/rangliste" className={linkClass}>
+        <Trophy size={20} />
+        <span>Rangliste</span>
+      </NavLink>
+      <NavLink to="/profil" className={linkClass}>
+        <User size={20} />
+        <span>Profil</span>
+      </NavLink>
+    </nav>
+  );
+}