Phase 4: Frontend-Core MVP — Decks, Cards, Study mit FSRS-Loop

Stack:
- Tailwind 4 via @tailwindcss/vite (oklch-Theme + Dark-Mode-Auto)
- marked + DOMPurify für Markdown (sanitized, SSR-Safe)
- Svelte 5 runes durchgängig ($state, $derived, $effect)
- @sveltejs/adapter-node für Production-Build

Infrastruktur:
- $lib/auth/dev-stub.svelte.ts: User-ID via sessionStorage (Phase 2
  ersetzt durch echtes JWT via @mana/shared-auth)
- $lib/api/{client,decks,cards,reviews}.ts: typed Fetch-Wrapper, ruft
  cards-api auf 3081 mit X-User-Id-Header
- $lib/stores/toasts.svelte.ts: Toast-Store mit info/success/warning/error
- $lib/markdown.ts: marked → DOMPurify-Pipeline
- $lib/components/{Header,ToastStack}.svelte: Layout-Shell

Routes:
- / → Dev-Login-Form oder Redirect zu /decks (wenn eingeloggt)
- /decks → Liste mit Color-Dot, Hover-Delete-Button
- /decks/new → Create-Form (Name, Beschreibung, Color-Picker)
- /decks/[id] → Detail mit Cards-Liste + dueCount + "Lernen"-Button
- /cards/new?deck=... → Type-Picker (basic|basic-reverse) +
  Side-by-Side Markdown-Editor mit Live-Preview
- /study → Übersicht aller Decks mit Due-Counts
- /study/[deckId] → Session-View mit Queue-Snapshot, Reveal/Grade,
  Hotkeys (Space/Enter=Reveal & Good, 1-4=Again/Hard/Good/Easy),
  INPUT-Skip im Keyboard-Handler

CORS auf cards-api für localhost-Origins + cardecky.mana.how.

Verifiziert:
- pnpm run type-check ✅ 4/4 packages, svelte-check 0 errors
- pnpm build (cards-web) ✅ adapter-node bundle 140 kB server,
  alle Routen bundled
- Tailwind-CSS inlined in SSR-HTML, oklch-Theme korrekt
- CORS-Preflight funktioniert (OPTIONS 204 mit korrekten Allow-*-Headers)
- Live-Smoke-Test gegen localhost:3081 (cards-api) + localhost:3082
  (cards-web): Beide laufen parallel, Web → API CORS-fetch grün

Outside scope (Phase 4):
- Card-Edit-Page (/cards/[id]/edit) — heute nur Create + Delete
- Settings/Account/Credits/DSGVO-Pages — Phase 9 (Polish)
- Anki-Import — Phase 8

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

apps/api/src/index.ts

@@ -1,4 +1,5 @@
 import { Hono } from 'hono';
+import { cors } from 'hono/cors';
 
 import { manifestRoute } from './routes/manifest.ts';
 import { healthRoute } from './routes/health.ts';
@@ -8,6 +9,23 @@ import { reviewsRouter } from './routes/reviews.ts';
 
 const app = new Hono();
 
+app.use(
+	'*',
+	cors({
+		origin: (origin) => {
+			if (!origin) return origin;
+			// Dev: localhost-Ports erlaubt. Prod: explizite Whitelist.
+			if (/^https?:\/\/localhost(:\d+)?$/.test(origin)) return origin;
+			if (/^https?:\/\/127\.0\.0\.1(:\d+)?$/.test(origin)) return origin;
+			if (origin === 'https://cardecky.mana.how') return origin;
+			return null;
+		},
+		allowHeaders: ['Content-Type', 'X-User-Id', 'Authorization', 'X-Service-Key'],
+		allowMethods: ['GET', 'POST', 'PATCH', 'DELETE', 'OPTIONS'],
+		credentials: true,
+	})
+);
+
 app.route('/', healthRoute);
 app.route('/.well-known/mana-app.json', manifestRoute);
 app.route('/api/v1/decks', decksRouter());