Replace Next.js app with Vite React app (gerbil-manager-web)

- Remove gerbil-manager-nextjs (unused scaffold; recoverable from history)
- Scaffold gerbil-manager-web: Vite + React 19 + TypeScript
- German-only UI (lang=de, central strings in src/strings/de.ts)
- Mobile-first shell: bottom tab bar on phones, sidebar on >=768px
- react-router with skeleton routes (Start, Rennmaeuse, Wuerfe, Zuechter)
- API client (src/api/client.ts) pointing at GerbilManagerWebAPI,
  configurable via VITE_API_BASE_URL (default http://localhost:5179)
- nginx-based Dockerfile with SPA fallback; docker-compose frontend
  service now builds gerbil-manager-web

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gerbil-manager-web/src/index.css

@@ -0,0 +1,157 @@
+/* Mobile-first Grundlayout: Tab-Leiste unten auf dem Smartphone,
+   Seitenleiste links ab 768px (Laptop). */
+
+:root {
+  --color-bg: #faf7f2;
+  --color-surface: #ffffff;
+  --color-border: #e5ddd0;
+  --color-text: #3b3026;
+  --color-text-muted: #8a7d6b;
+  --color-accent: #b5651d;
+  --color-accent-soft: #f6e7d7;
+
+  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0 0 0.5rem;
+}
+
+a {
+  color: var(--color-accent);
+}
+
+/* --- Grundgerüst (Smartphone) --- */
+
+.app-shell {
+  display: grid;
+  min-height: 100dvh;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    'header'
+    'main'
+    'nav';
+}
+
+.app-header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+}
+
+.app-logo {
+  font-size: 1.5rem;
+}
+
+.app-title {
+  font-size: 1.15rem;
+  margin: 0;
+}
+
+.app-main {
+  grid-area: main;
+  padding: 1rem;
+  max-width: 60rem;
+  width: 100%;
+}
+
+/* Tab-Leiste unten */
+.app-nav {
+  grid-area: nav;
+  display: flex;
+  justify-content: space-around;
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  position: sticky;
+  bottom: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.nav-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.5rem 0.75rem;
+  flex: 1;
+  font-size: 0.7rem;
+  text-decoration: none;
+  color: var(--color-text-muted);
+  min-height: 44px; /* Touch-Ziel */
+}
+
+.nav-link--active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.nav-icon {
+  font-size: 1.25rem;
+}
+
+/* --- Laptop / Tablet (ab 768px): Seitenleiste links --- */
+
+@media (min-width: 768px) {
+  .app-shell {
+    grid-template-columns: 14rem 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      'header header'
+      'nav    main';
+  }
+
+  .app-nav {
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 0.25rem;
+    border-top: none;
+    border-right: 1px solid var(--color-border);
+    padding: 1rem 0.5rem;
+    position: static;
+  }
+
+  .nav-link {
+    flex-direction: row;
+    flex: 0 0 auto;
+    gap: 0.6rem;
+    font-size: 0.95rem;
+    padding: 0.6rem 0.75rem;
+    border-radius: 0.5rem;
+  }
+
+  .nav-link:hover {
+    background: var(--color-accent-soft);
+  }
+
+  .nav-link--active {
+    background: var(--color-accent-soft);
+  }
+
+  .app-main {
+    padding: 1.5rem 2rem;
+  }
+}