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/web/src/app.css

@@ -0,0 +1,41 @@
+@import 'tailwindcss';
+
+@theme {
+	--color-bg: oklch(0.99 0.005 240);
+	--color-fg: oklch(0.20 0.02 240);
+	--color-muted: oklch(0.55 0.02 240);
+	--color-border: oklch(0.92 0.01 240);
+	--color-card: oklch(1 0 0);
+	--color-primary: oklch(0.55 0.15 250);
+	--color-primary-fg: oklch(1 0 0);
+	--color-success: oklch(0.6 0.15 145);
+	--color-warning: oklch(0.75 0.15 75);
+	--color-danger: oklch(0.55 0.18 25);
+
+	--font-sans:
+		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+@layer base {
+	html {
+		background-color: var(--color-bg);
+		color: var(--color-fg);
+		font-family: var(--font-sans);
+	}
+	body {
+		min-height: 100dvh;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	@theme {
+		--color-bg: oklch(0.18 0.02 240);
+		--color-fg: oklch(0.95 0.01 240);
+		--color-muted: oklch(0.65 0.02 240);
+		--color-border: oklch(0.30 0.02 240);
+		--color-card: oklch(0.22 0.02 240);
+		--color-primary: oklch(0.70 0.18 250);
+		--color-primary-fg: oklch(0.18 0.02 240);
+	}
+}

apps/web/src/lib/api/cards.ts

@@ -0,0 +1,23 @@
+import type { Card, CardCreate, CardUpdate } from '@cards/domain';
+import { api } from './client.ts';
+
+export function listCards(deckId?: string) {
+	const qs = deckId ? `?deck_id=${encodeURIComponent(deckId)}` : '';
+	return api<{ cards: Card[]; total: number }>(`/api/v1/cards${qs}`);
+}
+
+export function getCard(id: string) {
+	return api<Card>(`/api/v1/cards/${id}`);
+}
+
+export function createCard(input: CardCreate) {
+	return api<Card>('/api/v1/cards', { method: 'POST', body: input });
+}
+
+export function updateCard(id: string, patch: CardUpdate) {
+	return api<Card>(`/api/v1/cards/${id}`, { method: 'PATCH', body: patch });
+}
+
+export function deleteCard(id: string) {
+	return api<{ deleted: string }>(`/api/v1/cards/${id}`, { method: 'DELETE' });
+}

apps/web/src/lib/api/client.ts

@@ -0,0 +1,55 @@
+/**
+ * Cards-API-Client. Dünner Fetch-Wrapper, der `X-User-Id`-Header aus
+ * dem Dev-Auth-Stub setzt. Phase 2 ersetzt das durch ein Bearer-Token
+ * aus @mana/shared-auth.
+ */
+
+import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+
+export const API_BASE = (() => {
+	if (typeof window !== 'undefined') {
+		return import.meta.env.PUBLIC_CARDS_API_URL ?? 'http://localhost:3081';
+	}
+	return process.env.CARDS_API_URL ?? 'http://localhost:3081';
+})();
+
+export class ApiError extends Error {
+	constructor(
+		readonly status: number,
+		readonly body: unknown,
+		message?: string
+	) {
+		super(message ?? `cards-api ${status}`);
+	}
+}
+
+type RequestOptions = {
+	method?: 'GET' | 'POST' | 'PATCH' | 'DELETE';
+	body?: unknown;
+	signal?: AbortSignal;
+};
+
+export async function api<T>(path: string, opts: RequestOptions = {}): Promise<T> {
+	const headers: Record<string, string> = {
+		'Content-Type': 'application/json',
+	};
+	if (devUser.id) {
+		headers['X-User-Id'] = devUser.id;
+	}
+	const res = await fetch(`${API_BASE}${path}`, {
+		method: opts.method ?? 'GET',
+		headers,
+		body: opts.body !== undefined ? JSON.stringify(opts.body) : undefined,
+		signal: opts.signal,
+	});
+	if (!res.ok) {
+		let body: unknown = null;
+		try {
+			body = await res.json();
+		} catch {
+			body = await res.text();
+		}
+		throw new ApiError(res.status, body);
+	}
+	return (await res.json()) as T;
+}

apps/web/src/lib/api/decks.ts

@@ -0,0 +1,22 @@
+import type { Deck, DeckCreate, DeckUpdate } from '@cards/domain';
+import { api } from './client.ts';
+
+export function listDecks() {
+	return api<{ decks: Deck[]; total: number }>('/api/v1/decks');
+}
+
+export function getDeck(id: string) {
+	return api<Deck>(`/api/v1/decks/${id}`);
+}
+
+export function createDeck(input: DeckCreate) {
+	return api<Deck>('/api/v1/decks', { method: 'POST', body: input });
+}
+
+export function updateDeck(id: string, patch: DeckUpdate) {
+	return api<Deck>(`/api/v1/decks/${id}`, { method: 'PATCH', body: patch });
+}
+
+export function deleteDeck(id: string) {
+	return api<{ deleted: string }>(`/api/v1/decks/${id}`, { method: 'DELETE' });
+}

apps/web/src/lib/api/reviews.ts

@@ -0,0 +1,23 @@
+import type { Card, Rating, Review } from '@cards/domain';
+import { api } from './client.ts';
+
+export type DueReview = Review & {
+	card?: Pick<Card, 'id' | 'deck_id' | 'type' | 'fields'>;
+};
+
+export function listDueReviews(opts: { deckId?: string; limit?: number } = {}) {
+	const params = new URLSearchParams();
+	if (opts.deckId) params.set('deck_id', opts.deckId);
+	if (opts.limit) params.set('limit', String(opts.limit));
+	const qs = params.toString();
+	return api<{ reviews: DueReview[]; total: number }>(
+		`/api/v1/reviews/due${qs ? `?${qs}` : ''}`
+	);
+}
+
+export function gradeReview(cardId: string, subIndex: number, rating: Rating) {
+	return api<Review>(`/api/v1/reviews/${cardId}/${subIndex}/grade`, {
+		method: 'POST',
+		body: { rating },
+	});
+}

apps/web/src/lib/auth/dev-stub.svelte.ts

@@ -0,0 +1,35 @@
+/**
+ * Dev-Auth-Stub. Phase 2 ersetzt diesen Layer durch echtes JWT-
+ * Handling via @mana/shared-auth gegen mana-auth.
+ *
+ * Für jetzt: User-ID lebt in sessionStorage und wird als
+ * `X-User-Id`-Header an cards-api geschickt.
+ */
+
+class DevUser {
+	id = $state<string | null>(null);
+
+	constructor() {
+		if (typeof window !== 'undefined') {
+			this.id = sessionStorage.getItem('cards.dev.userId');
+		}
+	}
+
+	set(userId: string) {
+		const trimmed = userId.trim();
+		if (!trimmed) return;
+		this.id = trimmed;
+		if (typeof window !== 'undefined') {
+			sessionStorage.setItem('cards.dev.userId', trimmed);
+		}
+	}
+
+	clear() {
+		this.id = null;
+		if (typeof window !== 'undefined') {
+			sessionStorage.removeItem('cards.dev.userId');
+		}
+	}
+}
+
+export const devUser = new DevUser();

apps/web/src/lib/components/Header.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+</script>
+
+<header
+	class="sticky top-0 z-40 w-full border-b bg-[var(--color-card)] border-[var(--color-border)]"
+>
+	<div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+		<a href="/" class="flex items-center gap-2 font-semibold">
+			<span
+				class="inline-flex h-7 w-7 items-center justify-center rounded bg-[var(--color-primary)] text-[var(--color-primary-fg)] text-sm"
+			>
+				C
+			</span>
+			<span>Cards</span>
+		</a>
+
+		<nav class="flex items-center gap-6 text-sm">
+			<a
+				href="/decks"
+				class="hover:text-[var(--color-primary)]"
+				class:font-medium={page.url.pathname.startsWith('/decks')}>Decks</a
+			>
+			<a
+				href="/study"
+				class="hover:text-[var(--color-primary)]"
+				class:font-medium={page.url.pathname.startsWith('/study')}>Lernen</a
+			>
+		</nav>
+
+		<div class="flex items-center gap-3 text-sm">
+			{#if devUser.id}
+				<span class="text-[var(--color-muted)]"
+					>{devUser.id}
+				</span>
+				<button
+					class="rounded border px-2 py-1 text-xs hover:bg-[var(--color-border)] border-[var(--color-border)]"
+					onclick={() => devUser.clear()}
+				>
+					Logout (dev)
+				</button>
+			{:else}
+				<button
+					class="rounded bg-[var(--color-primary)] px-3 py-1 text-[var(--color-primary-fg)]"
+					onclick={() => devUser.set(prompt('User-ID (dev):') ?? '')}
+				>
+					Login (dev)
+				</button>
+			{/if}
+		</div>
+	</div>
+</header>

apps/web/src/lib/components/ToastStack.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { toasts } from '$lib/stores/toasts.svelte.ts';
+</script>
+
+{#if toasts.items.length > 0}
+	<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+		{#each toasts.items as t (t.id)}
+			<div
+				class="flex items-start gap-3 rounded-lg px-4 py-3 shadow-lg max-w-sm border bg-[var(--color-card)] border-[var(--color-border)]"
+				class:text-[var(--color-success)]={t.kind === 'success'}
+				class:text-[var(--color-warning)]={t.kind === 'warning'}
+				class:text-[var(--color-danger)]={t.kind === 'error'}
+			>
+				<span class="flex-1 text-sm">{t.message}</span>
+				<button
+					class="text-[var(--color-muted)] hover:text-[var(--color-fg)] text-lg leading-none"
+					onclick={() => toasts.dismiss(t.id)}
+					aria-label="Schließen"
+				>
+					×
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}

apps/web/src/lib/markdown.ts

@@ -0,0 +1,22 @@
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+marked.setOptions({
+	gfm: true,
+	breaks: true,
+});
+
+/**
+ * Markdown → HTML, sanitized via DOMPurify.
+ * Sicher gegen Stored-XSS aus User-Card-Inhalten.
+ *
+ * SSR-Hinweis: marked + DOMPurify müssen nur im Browser laufen
+ * (DOMPurify erwartet `window`). Aufrufer sind Card-Editor und
+ * Study-View, beide sind client-only.
+ */
+export function renderMarkdown(source: string): string {
+	if (!source) return '';
+	const html = marked.parse(source, { async: false }) as string;
+	if (typeof window === 'undefined') return html; // SSR-Fallback (selten Pfad)
+	return DOMPurify.sanitize(html);
+}

apps/web/src/lib/stores/toasts.svelte.ts

@@ -0,0 +1,44 @@
+/**
+ * Toast-Notifications. Svelte-5-Runes-Pattern: ein Modul-State,
+ * dessen Mutationen reaktiv von Components beobachtet werden.
+ */
+
+export type ToastKind = 'info' | 'success' | 'warning' | 'error';
+
+export type Toast = {
+	id: string;
+	kind: ToastKind;
+	message: string;
+	expires_at: number;
+};
+
+class ToastStore {
+	items = $state<Toast[]>([]);
+	private nextId = 1;
+
+	push(kind: ToastKind, message: string, durationMs = 4000) {
+		const id = `t-${this.nextId++}`;
+		const t: Toast = { id, kind, message, expires_at: Date.now() + durationMs };
+		this.items.push(t);
+		setTimeout(() => this.dismiss(id), durationMs);
+	}
+
+	dismiss(id: string) {
+		this.items = this.items.filter((t) => t.id !== id);
+	}
+
+	info(msg: string) {
+		this.push('info', msg);
+	}
+	success(msg: string) {
+		this.push('success', msg);
+	}
+	warning(msg: string) {
+		this.push('warning', msg);
+	}
+	error(msg: string) {
+		this.push('error', msg);
+	}
+}
+
+export const toasts = new ToastStore();

apps/web/src/routes/+layout.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
+	import '../app.css';
+	import Header from '$lib/components/Header.svelte';
+	import ToastStack from '$lib/components/ToastStack.svelte';
+
 	let { children } = $props();
 </script>
 
-<main>
+<Header />
+
+<main class="mx-auto max-w-6xl px-4 py-8">
 	{@render children?.()}
 </main>
 
-<style>
-	main {
-		font-family:
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			sans-serif;
-		max-width: 64rem;
-		margin: 0 auto;
-		padding: 2rem 1rem;
-	}
-</style>
+<ToastStack />

apps/web/src/routes/+page.svelte

@@ -1,16 +1,51 @@
 <script lang="ts">
-	// Phase-0-Skelett. Sobald Auth-Föderation steht (Phase 2),
-	// redirected diese Seite zu /(app) für eingeloggte User
-	// und zu auth.mana.how/login für anonyme.
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+
+	onMount(() => {
+		if (devUser.id) goto('/decks');
+	});
 </script>
 
-<h1>Cards</h1>
-<p>
-	Karteikarten-App des Vereins <strong>mana e.V.</strong>
-	— Phase 0, Repo-Skelett.
-</p>
-<p>
-	Plan: <a href="https://github.com/mana-ev/mana/blob/main/docs/playbooks/CARDS_GREENFIELD.md">
-		CARDS_GREENFIELD.md
-	</a>
-</p>
+<div class="mx-auto max-w-2xl py-12 text-center">
+	<h1 class="text-3xl font-semibold">Cards</h1>
+	<p class="mt-2 text-[var(--color-muted)]">
+		Karteikarten-App des Vereins <strong>mana e.V.</strong>
+	</p>
+
+	{#if !devUser.id}
+		<div
+			class="mt-8 rounded-lg border bg-[var(--color-card)] border-[var(--color-border)] p-6 text-left"
+		>
+			<h2 class="text-lg font-medium">Phase 0 — Dev-Login</h2>
+			<p class="mt-1 text-sm text-[var(--color-muted)]">
+				Bevor mana-auth-Föderation steht (Phase 2), schaltet ein Dev-Stub den Login frei.
+				Trag eine User-ID ein (z.B. <code>u-test-1</code>).
+			</p>
+			<form
+				class="mt-4 flex gap-2"
+				onsubmit={(e) => {
+					e.preventDefault();
+					const fd = new FormData(e.currentTarget as HTMLFormElement);
+					const id = String(fd.get('user_id') ?? '').trim();
+					if (id) {
+						devUser.set(id);
+						goto('/decks');
+					}
+				}}
+			>
+				<input
+					name="user_id"
+					placeholder="u-test-1"
+					class="flex-1 rounded border bg-[var(--color-bg)] border-[var(--color-border)] px-3 py-2 text-sm"
+					required
+				/>
+				<button
+					class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
+					type="submit">Weiter</button
+				>
+			</form>
+		</div>
+	{/if}
+</div>

apps/web/src/routes/cards/new/+page.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import type { CardType } from '@cards/domain';
+	import { createCard } from '$lib/api/cards.ts';
+	import { listDecks, getDeck } from '$lib/api/decks.ts';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+	import { renderMarkdown } from '$lib/markdown.ts';
+	import { toasts } from '$lib/stores/toasts.svelte.ts';
+
+	type DeckLite = { id: string; name: string };
+
+	let deckId = $state(page.url.searchParams.get('deck') ?? '');
+	let decks = $state<DeckLite[]>([]);
+	let cardType = $state<CardType>('basic');
+	let front = $state('');
+	let back = $state('');
+	let saving = $state(false);
+
+	const frontHtml = $derived(renderMarkdown(front));
+	const backHtml = $derived(renderMarkdown(back));
+
+	onMount(async () => {
+		if (!devUser.id) {
+			goto('/');
+			return;
+		}
+		try {
+			const r = await listDecks();
+			decks = r.decks.map((d) => ({ id: d.id, name: d.name }));
+			if (!deckId && decks.length > 0) {
+				deckId = decks[0].id;
+			} else if (deckId) {
+				// Verify deck exists for current user
+				try {
+					await getDeck(deckId);
+				} catch {
+					deckId = decks[0]?.id ?? '';
+				}
+			}
+		} catch (e) {
+			toasts.error(`Decks konnten nicht geladen werden: ${(e as Error).message}`);
+		}
+	});
+
+	async function onSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!deckId || !front.trim() || !back.trim()) return;
+		saving = true;
+		try {
+			const card = await createCard({
+				deck_id: deckId,
+				type: cardType,
+				fields: { front: front.trim(), back: back.trim() },
+			});
+			toasts.success(
+				cardType === 'basic-reverse' ? '2 Reviews initialisiert (front→back, back→front)' : 'Karte angelegt'
+			);
+			goto(`/decks/${card.deck_id}`);
+		} catch (e) {
+			toasts.error(`Anlegen fehlgeschlagen: ${(e as Error).message}`);
+			saving = false;
+		}
+	}
+</script>
+
+<a href={deckId ? `/decks/${deckId}` : '/decks'} class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]"
+	>← Zurück</a
+>
+<h1 class="mt-2 text-2xl font-semibold">Neue Karte</h1>
+
+<form class="mt-6 space-y-5" onsubmit={onSubmit}>
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+		<label class="block">
+			<span class="text-sm font-medium">Deck</span>
+			<select
+				bind:value={deckId}
+				required
+				class="mt-1 block w-full rounded border bg-[var(--color-card)] border-[var(--color-border)] px-3 py-2 text-sm"
+			>
+				{#each decks as d}
+					<option value={d.id}>{d.name}</option>
+				{/each}
+			</select>
+		</label>
+
+		<label class="block">
+			<span class="text-sm font-medium">Typ</span>
+			<select
+				bind:value={cardType}
+				class="mt-1 block w-full rounded border bg-[var(--color-card)] border-[var(--color-border)] px-3 py-2 text-sm"
+			>
+				<option value="basic">Basic (front → back)</option>
+				<option value="basic-reverse">Basic + Reverse (front ↔ back, 2 Reviews)</option>
+			</select>
+		</label>
+	</div>
+
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+		<div>
+			<label class="block">
+				<span class="text-sm font-medium">Vorderseite (Markdown)</span>
+				<textarea
+					bind:value={front}
+					required
+					rows="8"
+					placeholder="# Markdown ist erlaubt&#10;**fett**, _kursiv_, `code`"
+					class="mt-1 block w-full rounded border bg-[var(--color-card)] border-[var(--color-border)] px-3 py-2 font-mono text-sm"
+				></textarea>
+			</label>
+			{#if front.trim()}
+				<div class="mt-2 rounded border border-[var(--color-border)] bg-[var(--color-card)] p-3 text-sm">
+					<div class="mb-1 text-xs uppercase text-[var(--color-muted)]">Vorschau</div>
+					<div class="prose prose-sm max-w-none">{@html frontHtml}</div>
+				</div>
+			{/if}
+		</div>
+
+		<div>
+			<label class="block">
+				<span class="text-sm font-medium">Rückseite (Markdown)</span>
+				<textarea
+					bind:value={back}
+					required
+					rows="8"
+					placeholder="Antwort"
+					class="mt-1 block w-full rounded border bg-[var(--color-card)] border-[var(--color-border)] px-3 py-2 font-mono text-sm"
+				></textarea>
+			</label>
+			{#if back.trim()}
+				<div class="mt-2 rounded border border-[var(--color-border)] bg-[var(--color-card)] p-3 text-sm">
+					<div class="mb-1 text-xs uppercase text-[var(--color-muted)]">Vorschau</div>
+					<div class="prose prose-sm max-w-none">{@html backHtml}</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<div class="flex items-center gap-3">
+		<button
+			type="submit"
+			disabled={saving || !deckId || !front.trim() || !back.trim()}
+			class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)] disabled:opacity-50"
+		>
+			{saving ? 'Speichere…' : 'Karte anlegen'}
+		</button>
+		<a
+			href={deckId ? `/decks/${deckId}` : '/decks'}
+			class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]">Abbrechen</a
+		>
+	</div>
+</form>

apps/web/src/routes/decks/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import type { Deck } from '@cards/domain';
+	import { listDecks, deleteDeck } from '$lib/api/decks.ts';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+	import { toasts } from '$lib/stores/toasts.svelte.ts';
+
+	let decks = $state<Deck[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	onMount(async () => {
+		if (!devUser.id) {
+			goto('/');
+			return;
+		}
+		await refresh();
+	});
+
+	async function refresh() {
+		try {
+			loading = true;
+			const r = await listDecks();
+			decks = r.decks;
+			error = null;
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function onDelete(id: string, name: string) {
+		if (!confirm(`Deck "${name}" wirklich löschen? Alle Karten + Review-Daten gehen verloren.`)) {
+			return;
+		}
+		try {
+			await deleteDeck(id);
+			toasts.success(`Deck "${name}" gelöscht`);
+			await refresh();
+		} catch (e) {
+			toasts.error(`Löschen fehlgeschlagen: ${(e as Error).message}`);
+		}
+	}
+</script>
+
+<div class="flex items-center justify-between">
+	<h1 class="text-2xl font-semibold">Decks</h1>
+	<a
+		href="/decks/new"
+		class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
+		>Neues Deck</a
+	>
+</div>
+
+{#if loading}
+	<p class="mt-8 text-[var(--color-muted)]">Lade…</p>
+{:else if error}
+	<p class="mt-8 text-[var(--color-danger)]">Fehler: {error}</p>
+{:else if decks.length === 0}
+	<div
+		class="mt-8 rounded-lg border border-dashed border-[var(--color-border)] p-12 text-center"
+	>
+		<p class="text-[var(--color-muted)]">Noch keine Decks.</p>
+		<a href="/decks/new" class="mt-4 inline-block text-[var(--color-primary)] hover:underline"
+			>Erstes Deck anlegen →</a
+		>
+	</div>
+{:else}
+	<ul class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+		{#each decks as deck (deck.id)}
+			<li
+				class="group relative rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-4 hover:border-[var(--color-primary)]"
+			>
+				<a href="/decks/{deck.id}" class="block">
+					<div class="flex items-start gap-3">
+						{#if deck.color}
+							<span
+								class="mt-1 h-3 w-3 shrink-0 rounded-full"
+								style="background:{deck.color}"
+							></span>
+						{/if}
+						<div class="min-w-0 flex-1">
+							<h2 class="truncate font-medium">{deck.name}</h2>
+							{#if deck.description}
+								<p class="mt-1 line-clamp-2 text-sm text-[var(--color-muted)]">
+									{deck.description}
+								</p>
+							{/if}
+						</div>
+					</div>
+				</a>
+				<button
+					class="absolute right-2 top-2 hidden rounded p-1 text-[var(--color-muted)] hover:bg-[var(--color-border)] hover:text-[var(--color-danger)] group-hover:block"
+					onclick={() => onDelete(deck.id, deck.name)}
+					aria-label="Deck löschen"
+					title="Deck löschen"
+				>
+					🗑
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}

apps/web/src/routes/decks/[id]/+page.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import type { Card, Deck } from '@cards/domain';
+	import { getDeck } from '$lib/api/decks.ts';
+	import { listCards, deleteCard } from '$lib/api/cards.ts';
+	import { listDueReviews } from '$lib/api/reviews.ts';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+	import { toasts } from '$lib/stores/toasts.svelte.ts';
+
+	let deck = $state<Deck | null>(null);
+	let cards = $state<Card[]>([]);
+	let dueCount = $state(0);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	const deckId = $derived(page.params.id ?? '');
+
+	onMount(async () => {
+		if (!devUser.id) {
+			goto('/');
+			return;
+		}
+		await refresh();
+	});
+
+	async function refresh() {
+		try {
+			loading = true;
+			const [d, c, due] = await Promise.all([
+				getDeck(deckId),
+				listCards(deckId),
+				listDueReviews({ deckId, limit: 500 }),
+			]);
+			deck = d;
+			cards = c.cards;
+			dueCount = due.total;
+			error = null;
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function onDeleteCard(id: string) {
+		if (!confirm('Karte wirklich löschen?')) return;
+		try {
+			await deleteCard(id);
+			toasts.success('Karte gelöscht');
+			await refresh();
+		} catch (e) {
+			toasts.error(`Löschen fehlgeschlagen: ${(e as Error).message}`);
+		}
+	}
+</script>
+
+{#if loading}
+	<p class="text-[var(--color-muted)]">Lade…</p>
+{:else if error}
+	<p class="text-[var(--color-danger)]">Fehler: {error}</p>
+{:else if deck}
+	<a href="/decks" class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]"
+		>← Decks</a
+	>
+
+	<div class="mt-2 flex flex-wrap items-center justify-between gap-4">
+		<div class="flex items-center gap-3">
+			{#if deck.color}
+				<span class="h-4 w-4 rounded-full" style="background:{deck.color}"></span>
+			{/if}
+			<h1 class="text-2xl font-semibold">{deck.name}</h1>
+		</div>
+		<div class="flex gap-2">
+			<a
+				href="/cards/new?deck={deck.id}"
+				class="rounded border border-[var(--color-border)] px-3 py-2 text-sm hover:border-[var(--color-primary)]"
+			>
+				+ Karte
+			</a>
+			{#if dueCount > 0}
+				<a
+					href="/study/{deck.id}"
+					class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
+				>
+					Lernen ({dueCount} fällig)
+				</a>
+			{:else}
+				<button
+					disabled
+					class="rounded bg-[var(--color-muted)] px-4 py-2 text-sm text-[var(--color-bg)] opacity-50"
+					title="Keine Karten fällig"
+				>
+					Lernen
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	{#if deck.description}
+		<p class="mt-2 text-[var(--color-muted)]">{deck.description}</p>
+	{/if}
+
+	<div class="mt-2 text-sm text-[var(--color-muted)]">
+		{cards.length} Karte{cards.length === 1 ? '' : 'n'} · {dueCount} fällig
+	</div>
+
+	{#if cards.length === 0}
+		<div
+			class="mt-8 rounded-lg border border-dashed border-[var(--color-border)] p-12 text-center"
+		>
+			<p class="text-[var(--color-muted)]">Noch keine Karten in diesem Deck.</p>
+			<a
+				href="/cards/new?deck={deck.id}"
+				class="mt-4 inline-block text-[var(--color-primary)] hover:underline"
+				>Erste Karte anlegen →</a
+			>
+		</div>
+	{:else}
+		<ul class="mt-6 divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)]">
+			{#each cards as card (card.id)}
+				<li class="group flex items-start justify-between gap-4 px-4 py-3">
+					<div class="min-w-0 flex-1">
+						<div class="flex items-center gap-2">
+							<span
+								class="rounded bg-[var(--color-border)] px-2 py-0.5 text-xs text-[var(--color-muted)]"
+							>{card.type}</span>
+						</div>
+						<p class="mt-1 truncate text-sm">
+							<span class="font-medium">{card.fields.front ?? '(leer)'}</span>
+							<span class="text-[var(--color-muted)]"> → {card.fields.back ?? '(leer)'}</span>
+						</p>
+					</div>
+					<button
+						class="opacity-0 group-hover:opacity-100 text-sm text-[var(--color-muted)] hover:text-[var(--color-danger)]"
+						onclick={() => onDeleteCard(card.id)}
+						aria-label="Karte löschen"
+					>
+						Löschen
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{/if}

apps/web/src/routes/decks/new/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { createDeck } from '$lib/api/decks.ts';
+	import { toasts } from '$lib/stores/toasts.svelte.ts';
+
+	let name = $state('');
+	let description = $state('');
+	let color = $state('#0088ff');
+	let saving = $state(false);
+
+	async function onSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!name.trim()) return;
+		saving = true;
+		try {
+			const deck = await createDeck({
+				name: name.trim(),
+				description: description.trim() || undefined,
+				color,
+			});
+			toasts.success(`Deck "${deck.name}" angelegt`);
+			goto(`/decks/${deck.id}`);
+		} catch (e) {
+			toasts.error(`Anlegen fehlgeschlagen: ${(e as Error).message}`);
+			saving = false;
+		}
+	}
+</script>
+
+<div class="mx-auto max-w-xl">
+	<a href="/decks" class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]"
+		>← Zurück</a
+	>
+	<h1 class="mt-2 text-2xl font-semibold">Neues Deck</h1>
+
+	<form class="mt-6 space-y-4" onsubmit={onSubmit}>
+		<label class="block">
+			<span class="text-sm font-medium">Name</span>
+			<input
+				bind:value={name}
+				required
+				maxlength="200"
+				placeholder="z.B. Konfuzius-Zitate"
+				class="mt-1 block w-full rounded border bg-[var(--color-card)] border-[var(--color-border)] px-3 py-2 text-sm"
+			/>
+		</label>
+
+		<label class="block">
+			<span class="text-sm font-medium">Beschreibung</span>
+			<textarea
+				bind:value={description}
+				maxlength="2000"
+				rows="3"
+				placeholder="Optional"
+				class="mt-1 block w-full rounded border bg-[var(--color-card)] border-[var(--color-border)] px-3 py-2 text-sm"
+			></textarea>
+		</label>
+
+		<label class="block">
+			<span class="text-sm font-medium">Farbe</span>
+			<input
+				type="color"
+				bind:value={color}
+				class="mt-1 h-10 w-20 rounded border border-[var(--color-border)] bg-transparent"
+			/>
+		</label>
+
+		<div class="flex items-center gap-3">
+			<button
+				type="submit"
+				disabled={saving || !name.trim()}
+				class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)] disabled:opacity-50"
+			>
+				{saving ? 'Speichere…' : 'Deck anlegen'}
+			</button>
+			<a href="/decks" class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]"
+				>Abbrechen</a
+			>
+		</div>
+	</form>
+</div>

apps/web/src/routes/study/+page.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import type { Deck } from '@cards/domain';
+	import { listDecks } from '$lib/api/decks.ts';
+	import { listDueReviews } from '$lib/api/reviews.ts';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+
+	type Item = { deck: Deck; due: number };
+
+	let items = $state<Item[]>([]);
+	let loading = $state(true);
+
+	onMount(async () => {
+		if (!devUser.id) {
+			goto('/');
+			return;
+		}
+		const r = await listDecks();
+		const counts = await Promise.all(
+			r.decks.map(async (d) => {
+				try {
+					const due = await listDueReviews({ deckId: d.id, limit: 1 });
+					// limit=1 gibt total zurück (alle fälligen, gecappt nur an results-Größe)
+					// für korrekte Counts müssen wir ohne Limit fragen — pragmatisch:
+					const all = await listDueReviews({ deckId: d.id, limit: 500 });
+					return { deck: d, due: all.total };
+				} catch {
+					return { deck: d, due: 0 };
+				}
+			})
+		);
+		items = counts;
+		loading = false;
+	});
+</script>
+
+<h1 class="text-2xl font-semibold">Lernen</h1>
+
+{#if loading}
+	<p class="mt-8 text-[var(--color-muted)]">Lade…</p>
+{:else}
+	<ul class="mt-6 space-y-2">
+		{#each items as it (it.deck.id)}
+			<li
+				class="flex items-center justify-between rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] px-4 py-3"
+			>
+				<div class="flex items-center gap-3 min-w-0">
+					{#if it.deck.color}
+						<span class="h-3 w-3 rounded-full" style="background:{it.deck.color}"></span>
+					{/if}
+					<span class="truncate font-medium">{it.deck.name}</span>
+					<span class="text-sm text-[var(--color-muted)]">
+						{it.due} fällig
+					</span>
+				</div>
+				{#if it.due > 0}
+					<a
+						href="/study/{it.deck.id}"
+						class="rounded bg-[var(--color-primary)] px-3 py-1.5 text-sm text-[var(--color-primary-fg)]"
+					>
+						Starten
+					</a>
+				{:else}
+					<span class="text-sm text-[var(--color-muted)]">—</span>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}

apps/web/src/routes/study/[deckId]/+page.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import type { Rating } from '@cards/domain';
+	import { getDeck } from '$lib/api/decks.ts';
+	import { listDueReviews, gradeReview, type DueReview } from '$lib/api/reviews.ts';
+	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
+	import { renderMarkdown } from '$lib/markdown.ts';
+	import { toasts } from '$lib/stores/toasts.svelte.ts';
+
+	const deckId = $derived(page.params.deckId ?? '');
+
+	let deckName = $state('');
+	let queue = $state<DueReview[]>([]);
+	let queueIndex = $state(0);
+	let revealed = $state(false);
+	let loading = $state(true);
+	let busy = $state(false);
+	let stats = $state({ reviewed: 0, again: 0 });
+
+	const current = $derived(queue[queueIndex]);
+	const isDone = $derived(!loading && queueIndex >= queue.length);
+
+	const promptMarkdown = $derived.by(() => {
+		const c = current;
+		if (!c?.card) return '';
+		const subIndex = c.sub_index;
+		const fields = c.card.fields as Record<string, string>;
+		switch (c.card.type) {
+			case 'basic':
+				return fields.front ?? '';
+			case 'basic-reverse':
+				return subIndex === 0 ? (fields.front ?? '') : (fields.back ?? '');
+			default:
+				return fields.front ?? '';
+		}
+	});
+
+	const answerMarkdown = $derived.by(() => {
+		const c = current;
+		if (!c?.card) return '';
+		const subIndex = c.sub_index;
+		const fields = c.card.fields as Record<string, string>;
+		switch (c.card.type) {
+			case 'basic':
+				return fields.back ?? '';
+			case 'basic-reverse':
+				return subIndex === 0 ? (fields.back ?? '') : (fields.front ?? '');
+			default:
+				return fields.back ?? '';
+		}
+	});
+
+	const promptHtml = $derived(renderMarkdown(promptMarkdown));
+	const answerHtml = $derived(renderMarkdown(answerMarkdown));
+
+	onMount(async () => {
+		if (!devUser.id) {
+			goto('/');
+			return;
+		}
+		try {
+			const [d, due] = await Promise.all([
+				getDeck(deckId),
+				listDueReviews({ deckId, limit: 200 }),
+			]);
+			deckName = d.name;
+			queue = due.reviews;
+		} catch (e) {
+			toasts.error(`Sitzung konnte nicht geladen werden: ${(e as Error).message}`);
+			goto('/study');
+			return;
+		}
+		loading = false;
+		window.addEventListener('keydown', onKey);
+	});
+
+	onDestroy(() => {
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('keydown', onKey);
+		}
+	});
+
+	function onKey(e: KeyboardEvent) {
+		const target = e.target as HTMLElement | null;
+		if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
+		if (busy || isDone) return;
+
+		if (!revealed) {
+			if (e.key === ' ' || e.key === 'Enter') {
+				e.preventDefault();
+				revealed = true;
+			}
+			return;
+		}
+
+		if (e.key === '1') return grade('again');
+		if (e.key === '2') return grade('hard');
+		if (e.key === '3' || e.key === ' ' || e.key === 'Enter') return grade('good');
+		if (e.key === '4') return grade('easy');
+	}
+
+	async function grade(rating: Rating) {
+		const c = current;
+		if (!c || busy) return;
+		busy = true;
+		try {
+			await gradeReview(c.card_id, c.sub_index, rating);
+			stats.reviewed += 1;
+			if (rating === 'again') stats.again += 1;
+			queueIndex += 1;
+			revealed = false;
+		} catch (e) {
+			toasts.error(`Speichern fehlgeschlagen: ${(e as Error).message}`);
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<div class="mx-auto max-w-2xl">
+	<a href="/study" class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]">← Lernen</a>
+	<h1 class="mt-2 text-xl font-semibold">{deckName}</h1>
+	<p class="mt-1 text-sm text-[var(--color-muted)]">
+		{#if !loading && !isDone}
+			{queueIndex + 1} / {queue.length}
+		{/if}
+	</p>
+
+	{#if loading}
+		<p class="mt-12 text-center text-[var(--color-muted)]">Lade Sitzung…</p>
+	{:else if queue.length === 0}
+		<div class="mt-12 rounded-lg border border-dashed border-[var(--color-border)] p-12 text-center">
+			<p>Keine Karten fällig in diesem Deck. 🎉</p>
+			<a href="/decks/{deckId}" class="mt-4 inline-block text-[var(--color-primary)] hover:underline">
+				Zurück zum Deck →
+			</a>
+		</div>
+	{:else if isDone}
+		<div class="mt-12 rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-12 text-center">
+			<h2 class="text-xl">Sitzung abgeschlossen</h2>
+			<p class="mt-2 text-[var(--color-muted)]">
+				{stats.reviewed} Reviews erledigt · {stats.again}× nochmal
+			</p>
+			<div class="mt-6 flex justify-center gap-3">
+				<a href="/decks/{deckId}" class="rounded border border-[var(--color-border)] px-4 py-2 text-sm">
+					Zurück zum Deck
+				</a>
+				<a
+					href="/study/{deckId}"
+					class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
+				>
+					Erneut prüfen
+				</a>
+			</div>
+		</div>
+	{:else}
+		<article
+			class="mt-6 rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-8"
+		>
+			<div class="prose prose-lg max-w-none">{@html promptHtml}</div>
+
+			{#if revealed}
+				<hr class="my-6 border-[var(--color-border)]" />
+				<div class="prose prose-lg max-w-none">{@html answerHtml}</div>
+			{/if}
+		</article>
+
+		{#if !revealed}
+			<div class="mt-6 flex justify-center">
+				<button
+					onclick={() => (revealed = true)}
+					class="rounded bg-[var(--color-primary)] px-6 py-3 text-sm text-[var(--color-primary-fg)]"
+				>
+					Antwort zeigen <kbd class="ml-2 text-xs opacity-70">Space</kbd>
+				</button>
+			</div>
+		{:else}
+			<div class="mt-6 grid grid-cols-4 gap-2">
+				<button
+					onclick={() => grade('again')}
+					disabled={busy}
+					class="flex flex-col items-center gap-1 rounded border border-[var(--color-danger)] bg-[var(--color-card)] px-3 py-3 text-sm disabled:opacity-50"
+				>
+					<span>Nochmal</span>
+					<kbd class="text-xs text-[var(--color-muted)]">1</kbd>
+				</button>
+				<button
+					onclick={() => grade('hard')}
+					disabled={busy}
+					class="flex flex-col items-center gap-1 rounded border border-[var(--color-border)] bg-[var(--color-card)] px-3 py-3 text-sm disabled:opacity-50"
+				>
+					<span>Schwer</span>
+					<kbd class="text-xs text-[var(--color-muted)]">2</kbd>
+				</button>
+				<button
+					onclick={() => grade('good')}
+					disabled={busy}
+					class="flex flex-col items-center gap-1 rounded border border-[var(--color-primary)] bg-[var(--color-primary)] px-3 py-3 text-sm text-[var(--color-primary-fg)] disabled:opacity-50"
+				>
+					<span>Gut</span>
+					<kbd class="text-xs opacity-70">3</kbd>
+				</button>
+				<button
+					onclick={() => grade('easy')}
+					disabled={busy}
+					class="flex flex-col items-center gap-1 rounded border border-[var(--color-success)] bg-[var(--color-card)] px-3 py-3 text-sm disabled:opacity-50"
+				>
+					<span>Leicht</span>
+					<kbd class="text-xs text-[var(--color-muted)]">4</kbd>
+				</button>
+			</div>
+		{/if}
+
+		<p class="mt-6 text-center text-xs text-[var(--color-muted)]">
+			Hotkeys: <kbd>Space</kbd>/<kbd>Enter</kbd> = aufdecken &amp; gut · <kbd>1</kbd>–<kbd>4</kbd> = bewerten
+		</p>
+	{/if}
+</div>