fix(bereich): Bereich-Dropdown im "Neues Projekt"-Dialog war leer

Zwei Ursachen behoben:
- Frontend: areaId/Default wurden nur beim Mount aus dem (noch ladenden)
  areas-Prop berechnet → kein Default, keine Platzhalter-Option. Jetzt via
  useEffect Default setzen sobald Areas geladen sind + Platzhalter-Option.
- Prod: Deploy seedet nicht → frische DB hatte keine Areas. Neue
  ensureBaseAreas() legt die Basis-Bereiche idempotent beim API-Start an
  (nach den Migrationen), analog zu runMigrations.

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

apps/web/src/routes/bereich.tsx

@@ -1,5 +1,5 @@
 import { Link, NavLink, useParams } from 'react-router';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { trpc } from '../lib/trpc';
 import { voice } from '../lib/voice';
 import { Card } from '../components/ui/Card';
@@ -176,6 +176,15 @@ function ProjectCreateDialog({
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [areaId, setAreaId] = useState(defaultArea?.id ?? '');
+
+  // Areas werden asynchron geladen; sobald sie da sind und noch nichts gewählt
+  // wurde, sinnvollen Default setzen (Dropdown war sonst leer).
+  useEffect(() => {
+    if (!areaId && areas.length > 0) {
+      const fallback = areas.find((a) => a.slug === defaultSlug) ?? areas[0];
+      if (fallback) setAreaId(fallback.id);
+    }
+  }, [areas, areaId, defaultSlug]);
   const [kind, setKind] = useState<'kundenprojekt' | 'internes_projekt'>('internes_projekt');
   const [arbeitsmodus, setArbeitsmodus] = useState<'cycle' | 'kanban'>('kanban');
   const [steckbrief, setSteckbrief] = useState('');
@@ -241,6 +250,9 @@ function ProjectCreateDialog({
               onChange={(e) => setAreaId(e.target.value)}
               className="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-white px-3 py-2 text-sm"
             >
+              <option value="" disabled>
+                {areas.length ? '— Bereich wählen —' : 'Bereiche werden geladen…'}
+              </option>
               {areas.map((a) => (
                 <option key={a.id} value={a.id}>
                   {a.name}