feat(decks): card-stack visualization + direct-launch study mode

Decks fühlen sich jetzt wie echte Karten an, statt flacher Boxen.
Eine zentrale CardSurface-Komponente trägt die Karten-Optik
(Border, Radius 0.875rem, Shadow, Color-Stripe links) — drei
Sizes (md/lg/hero), drei Konsumenten, ein visuelles Familien-Set.

Komponenten:
- CardSurface.svelte   Foundation für jede Card-Erscheinung in Cards
- DeckStack.svelte     5:7-Stapel mit 3 deterministisch tilted
                       Hintergrund-Layern (cyrb53-Hash der Deck-ID,
                       reproduzierbar pro Mount), Color-Stripe-Akzent,
                       Title/Description/Card-Count/Due-Badge
- DeckGrid.svelte      Auto-fill responsive Grid; selectedId-Prop
                       triggert Stufe-1-Animation (others fade-out,
                       selected scale-up)
- DeckFan.svelte       Auffächer-Detail-View (Hand of Cards) mit
                       Top-7-Karten als Spread, Mount-Animation
                       gestapelt → fanned via doppeltem rAF +
                       cubic-bezier-Transition
- utils/deck-tilt.ts   cyrb53 + stackLayers für Pseudo-Random-Tilts

Routing-Wechsel: Klick auf Deck-Stack → 220ms Stufe-1-Fade →
goto('/study/<id>') direkt in den Lernmodus. Detail-View
(/decks/<id>) bleibt erreichbar über "Karten verwalten →"-Link
in der Study-Sidebar.

Lernmodus visuell als Karte:
- Globale Header (Logo + Nav + Sprach-Switcher) im Lernmodus
  ausgeblendet (routes/+layout.svelte detektiert /study/<deckId>
  per Regex), volle Konzentration auf die Karte
- Lern-Karte ist CardSurface size="hero" mit aspect-ratio 5:7
  (Portrait, gleiches Verhältnis wie Deck-Stacks und Fan-Karten)
- Color-Stripe links zeigt die Deck-Farbe — visuelle Bindung an
  Herkunft
- Sidebar oben links absolute-positioniert: ← Decks, Deck-Name,
  Fortschritt, Karten verwalten → — kompakter UI-Block, der die
  Karten-Zentrierung NICHT beeinflusst (Karte bleibt geometrisch
  Bildschirm-Mitte)
- Reveal-Button + 4er-Grade-Grid (Wieder/Schwer/Gut/Leicht) als
  Aktions-Leiste UNTER der Karte — keine weiteren Karten, ein
  Review = eine Karte

Mobile (≤720px): Sidebar wird zur horizontalen Zeile oben, Karte
rückt darunter durch padding-top: 6.5rem.

Reduced-motion durchgängig respektiert (keine Tilts, keine Hover-
Lifts, keine Fan-Spread-Animation, kein Card-Transition).

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

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

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Zentrale Karten-Optik der Cards-App.
+	 *
+	 * Eine Komponente — drei Erscheinungen, alle gleichen "Card-Feel":
+	 *   • size="md"   → Deck-Stapel-Cover oder Hand-Karte (5:7-Format, kompakt)
+	 *   • size="lg"   → Aufgefächerte Detail-Karte
+	 *   • size="hero" → Lern-Karte (groß, fokussiert, breiter)
+	 *
+	 * Alle drei tragen den gleichen Border-Radius, Border-Style, Shadow-
+	 * Stil und Surface-Farbe. So fühlt sich jede Karten-Erscheinung wie
+	 * eine Karte an — Deckblatt, Fan-Karte, Study-Karte sind visuell ein
+	 * Familien-Set.
+	 *
+	 * 12-Token-Disziplin: nur `--color-surface`, `--color-border`,
+	 * `--color-foreground`, `--color-primary*`. Kein Hex.
+	 */
+
+	type Size = 'md' | 'lg' | 'hero';
+	type As = 'div' | 'article' | 'a' | 'button';
+
+	interface Props {
+		size?: Size;
+		as?: As;
+		href?: string;
+		onclick?: (e: MouseEvent) => void;
+		colorAccent?: string | null;
+		ariaLabel?: string;
+		title?: string;
+		raised?: boolean;
+		flat?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		size = 'md',
+		as = 'div',
+		href,
+		onclick,
+		colorAccent = null,
+		ariaLabel,
+		title,
+		raised = false,
+		flat = false,
+		class: className = '',
+		children,
+	}: Props = $props();
+</script>
+
+{#if as === 'a' || href}
+	<a
+		class="surface size-{size} {className}"
+		class:raised
+		class:flat
+		{href}
+		aria-label={ariaLabel}
+		{title}
+		{onclick}
+	>
+		{#if colorAccent}
+			<span class="accent" style="background:{colorAccent}" aria-hidden="true"></span>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</a>
+{:else if as === 'button'}
+	<button
+		type="button"
+		class="surface size-{size} {className}"
+		class:raised
+		class:flat
+		aria-label={ariaLabel}
+		{title}
+		{onclick}
+	>
+		{#if colorAccent}
+			<span class="accent" style="background:{colorAccent}" aria-hidden="true"></span>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</button>
+{:else}
+	<svelte:element
+		this={as}
+		class="surface size-{size} {className}"
+		class:raised
+		class:flat
+		aria-label={ariaLabel}
+		{title}
+	>
+		{#if colorAccent}
+			<span class="accent" style="background:{colorAccent}" aria-hidden="true"></span>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</svelte:element>
+{/if}
+
+<style>
+	.surface {
+		position: relative;
+		display: block;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.875rem;
+		color: hsl(var(--color-foreground));
+		font-family: inherit;
+		text-align: left;
+		text-decoration: none;
+		overflow: hidden;
+		box-shadow:
+			0 4px 12px hsl(var(--color-foreground) / 0.08),
+			0 1px 3px hsl(var(--color-foreground) / 0.05);
+		transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.15s ease;
+	}
+
+	/* button-/a-Variante als Karte ohne Default-Padding/-Margin */
+	button.surface,
+	a.surface {
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		cursor: pointer;
+	}
+
+	/* Sizes — definieren nur Maße, keine internen Inhalte */
+	.size-md {
+		width: 100%;
+		max-width: 18rem;
+		aspect-ratio: 5 / 7;
+	}
+
+	.size-lg {
+		width: 12rem;
+		height: 16.8rem;
+	}
+
+	.size-hero {
+		width: 100%;
+		max-width: 24rem;
+		aspect-ratio: 5 / 7;
+	}
+
+	/* Raised → echte Top-Karte mit stärkerem Schatten (Hand-of-Cards-Hover, Study-Hero) */
+	.surface.raised {
+		box-shadow:
+			0 14px 28px hsl(var(--color-foreground) / 0.16),
+			0 4px 10px hsl(var(--color-foreground) / 0.08);
+	}
+
+	/* Flat → reine Background-Layer (versteckte Hintergrund-Karten im Stapel) */
+	.surface.flat {
+		box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
+	}
+
+	/* Color-Akzent links als Identitäts-Streifen */
+	.accent {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 0.375rem;
+	}
+
+	.surface:focus-visible {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 4px;
+	}
+
+	button.surface:hover,
+	a.surface:hover {
+		transform: translateY(-2px);
+		box-shadow:
+			0 12px 28px hsl(var(--color-foreground) / 0.16),
+			0 4px 10px hsl(var(--color-foreground) / 0.08);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.surface {
+			transition: none;
+		}
+		button.surface:hover,
+		a.surface:hover {
+			transform: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Card, Deck } from '@cards/domain';
+	import { t, tn } from '$lib/i18n/index.svelte.ts';
+	import { stackLayers } from '$lib/utils/deck-tilt';
+	import CardSurface from './CardSurface.svelte';
+
+	interface Props {
+		deck: Deck;
+		cards: Card[];
+		totalCount?: number;
+		dueCount?: number;
+		maxFanCards?: number;
+		onCardClick?: (card: Card) => void;
+	}
+
+	let {
+		deck,
+		cards,
+		totalCount = cards.length,
+		dueCount = 0,
+		maxFanCards = 7,
+		onCardClick,
+	}: Props = $props();
+
+	const fanCards = $derived(cards.slice(0, maxFanCards));
+	const fanCount = $derived(fanCards.length);
+	const hiddenCount = $derived(totalCount - fanCount);
+
+	let mounted = $state(false);
+
+	onMount(() => {
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				mounted = true;
+			});
+		});
+	});
+
+	function fanTransform(index: number, count: number): string {
+		if (count <= 1) return 'translateX(0) rotate(0deg)';
+		const spread = Math.min(60, count * 9);
+		const step = spread / (count - 1);
+		const angle = -spread / 2 + index * step;
+		const xRange = Math.min(280, count * 40);
+		const xStep = xRange / (count - 1);
+		const x = -xRange / 2 + index * xStep;
+		const mid = (count - 1) / 2;
+		const distFromMid = Math.abs(index - mid);
+		const y = -distFromMid * 6;
+		return `translate(${x}px, ${y}px) rotate(${angle}deg)`;
+	}
+
+	function previewText(card: Card): string {
+		const f = card.fields as Record<string, string | undefined>;
+		switch (card.type) {
+			case 'cloze':
+				return f.text ?? '';
+			case 'image-occlusion':
+				return '🖼 ' + (f.image_ref?.slice(0, 16) ?? '');
+			default:
+				return f.front ?? '';
+		}
+	}
+</script>
+
+<div class="fan" class:mounted aria-label={t('deck_detail.fan_aria', { name: deck.name })}>
+	<!-- Ambient Stack-Layers — bleiben sichtbar als Tiefen-Hint -->
+	{#each stackLayers(deck.id, 3) as layer, i (i)}
+		<div
+			class="bg-layer"
+			style:transform="translate({layer.dx}px, {layer.dy + 4 + i * 2}px) rotate({layer.tilt}deg)"
+			aria-hidden="true"
+		></div>
+	{/each}
+
+	<!-- Aufgefächerte Karten — alle nutzen CardSurface size=lg -->
+	<div class="card-row">
+		{#each fanCards as card, i (card.id)}
+			<div
+				class="fan-card-pos"
+				style:--target-transform={fanTransform(i, fanCount)}
+				style:z-index={i + 1}
+			>
+				<CardSurface
+					size="lg"
+					as="button"
+					raised
+					onclick={() => onCardClick?.(card)}
+					ariaLabel={t('deck_detail.card_open', { type: card.type })}
+					title={previewText(card)}
+				>
+					<div class="card-inner">
+						<span class="card-type">{card.type}</span>
+						<span class="card-preview">{previewText(card)}</span>
+					</div>
+				</CardSurface>
+			</div>
+		{/each}
+	</div>
+
+	{#if hiddenCount > 0}
+		<p class="hidden-count">
+			+ {tn('decks.card_count_more', hiddenCount)}
+		</p>
+	{/if}
+</div>
+
+<style>
+	.fan {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		min-height: 22rem;
+		padding: 4rem 1rem 2rem;
+	}
+
+	.bg-layer {
+		position: absolute;
+		left: 50%;
+		top: 4rem;
+		width: 12rem;
+		height: 16.8rem;
+		margin-left: -6rem;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.875rem;
+		box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
+		opacity: 0.6;
+	}
+
+	.card-row {
+		position: relative;
+		width: 100%;
+		max-width: 36rem;
+		height: 18rem;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.fan-card-pos {
+		position: absolute;
+		left: 50%;
+		top: 0;
+		width: 12rem;
+		height: 16.8rem;
+		margin-left: -6rem;
+		transform: translate(0, 0) rotate(0deg);
+		transform-origin: 50% 95%;
+		transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
+	}
+
+	.fan.mounted .fan-card-pos {
+		transform: var(--target-transform);
+	}
+
+	.card-inner {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1.125rem;
+		height: 100%;
+	}
+
+	.card-type {
+		display: inline-flex;
+		align-self: flex-start;
+		padding: 0.0625rem 0.5rem;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: hsl(var(--color-muted-foreground));
+		background: hsl(var(--color-muted));
+		border-radius: 9999px;
+		text-transform: lowercase;
+	}
+
+	.card-preview {
+		flex: 1;
+		min-height: 0;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		color: hsl(var(--color-foreground));
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 8;
+		line-clamp: 8;
+		-webkit-box-orient: vertical;
+		word-break: break-word;
+	}
+
+	.hidden-count {
+		margin: 1.5rem 0 0;
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fan-card-pos {
+			transition: none;
+			transform: var(--target-transform);
+		}
+	}
+</style>

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { Deck } from '@cards/domain';
+	import DeckStack from './DeckStack.svelte';
+	import { t } from '$lib/i18n/index.svelte.ts';
+
+	interface DeckWithCounts {
+		deck: Deck;
+		cardCount: number;
+		dueCount: number;
+	}
+
+	interface Props {
+		decks: DeckWithCounts[];
+		selectedId?: string | null;
+		onSelect?: (deckId: string) => void;
+	}
+
+	let { decks, selectedId = null, onSelect }: Props = $props();
+
+	function handleSelect(e: MouseEvent, deckId: string) {
+		if (onSelect) {
+			e.preventDefault();
+			onSelect(deckId);
+		}
+	}
+</script>
+
+<ul
+	class="deck-grid"
+	aria-label={t('decks.title')}
+	style:--has-selection={selectedId ? 1 : 0}
+>
+	{#each decks as { deck, cardCount, dueCount } (deck.id)}
+		<li
+			class="grid-cell"
+			class:fading={selectedId !== null && selectedId !== deck.id}
+			class:selected={selectedId === deck.id}
+		>
+			<DeckStack
+				{deck}
+				{cardCount}
+				{dueCount}
+				href={`/decks/${deck.id}`}
+				onclick={(e: MouseEvent) => handleSelect(e, deck.id)}
+			/>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.deck-grid {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: 1.5rem 1rem;
+		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+		justify-items: center;
+	}
+
+	.grid-cell {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		transition: opacity 0.25s ease, transform 0.3s ease;
+	}
+
+	.grid-cell.fading {
+		opacity: 0;
+		transform: scale(0.96) translateY(8px);
+		pointer-events: none;
+	}
+
+	.grid-cell.selected {
+		transform: scale(1.06);
+		z-index: 2;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.grid-cell {
+			transition: none;
+		}
+		.grid-cell.fading {
+			transform: none;
+		}
+		.grid-cell.selected {
+			transform: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { Deck } from '@cards/domain';
+	import { stackLayers } from '$lib/utils/deck-tilt';
+	import { t, tn } from '$lib/i18n/index.svelte.ts';
+	import CardSurface from './CardSurface.svelte';
+
+	interface Props {
+		deck: Deck;
+		cardCount?: number;
+		dueCount?: number;
+		href?: string;
+		onclick?: (e: MouseEvent) => void;
+		ariaLabel?: string;
+	}
+
+	let { deck, cardCount = 0, dueCount = 0, href, onclick, ariaLabel }: Props = $props();
+
+	const layers = $derived(stackLayers(deck.id, 3));
+	const hasContent = $derived(cardCount > 0);
+	const accentColor = $derived(deck.color ?? null);
+
+	const label = $derived(
+		ariaLabel ??
+			t('deck_stack.aria_label', {
+				name: deck.name,
+				cards: cardCount.toString(),
+				due: dueCount.toString(),
+			}),
+	);
+</script>
+
+<div class="stack-wrap" class:empty={!hasContent}>
+	<!-- Untere Karten (rein dekorativ) — sichtbar als Stapel-Hint -->
+	{#if hasContent}
+		{#each layers as layer, i (i)}
+			<div
+				class="layer"
+				style:transform="translate({layer.dx}px, {layer.dy}px) rotate({layer.tilt}deg)"
+				aria-hidden="true"
+			></div>
+		{/each}
+	{/if}
+
+	<!-- Deckblatt (vordere Karte) — gleiche Optik wie Lern- und Fan-Karten -->
+	<CardSurface
+		size="md"
+		as={href ? 'a' : 'button'}
+		{href}
+		{onclick}
+		ariaLabel={label}
+		colorAccent={accentColor}
+		class={hasContent ? 'cover' : 'cover empty'}
+	>
+		<div class="cover-inner">
+			<div class="cover-body">
+				<h2 class="cover-title">{deck.name}</h2>
+				{#if deck.description}
+					<p class="cover-desc">{deck.description}</p>
+				{/if}
+			</div>
+			<div class="cover-meta">
+				<span class="meta-count">{tn('decks.card_count', cardCount)}</span>
+				{#if dueCount > 0}
+					<span class="meta-due">{t('study.due_count', { n: dueCount })}</span>
+				{/if}
+			</div>
+		</div>
+	</CardSurface>
+</div>
+
+<style>
+	.stack-wrap {
+		position: relative;
+		width: 100%;
+		max-width: 18rem;
+		aspect-ratio: 5 / 7;
+	}
+
+	/* Hintergrund-Layers — versteckte Karten unter dem Deckblatt */
+	.layer {
+		position: absolute;
+		inset: 0;
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.875rem;
+		box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
+	}
+
+	/* Inneres Layout des Deckblatt-Inhalts */
+	.cover-inner {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 0.75rem;
+		padding: 1.25rem 1.125rem 1.25rem 1.5rem;
+		overflow: hidden;
+	}
+
+	.cover-body {
+		flex: 1;
+		min-height: 0;
+	}
+
+	.cover-title {
+		margin: 0;
+		font-size: 1.125rem;
+		font-weight: 600;
+		line-height: 1.3;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.cover-desc {
+		margin: 0.5rem 0 0;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		line-height: 1.4;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.cover-meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		font-variant-numeric: tabular-nums;
+	}
+
+	.meta-due {
+		display: inline-flex;
+		align-items: center;
+		padding: 0.0625rem 0.5rem;
+		border-radius: 9999px;
+		background: hsl(var(--color-primary) / 0.12);
+		color: hsl(var(--color-primary));
+		font-weight: 500;
+	}
+
+	/* Empty-State: kein Stapel-Hint, dashed Border über CardSurface-Wrapper */
+	.stack-wrap.empty :global(.cover.empty) {
+		border-style: dashed;
+		background: transparent;
+	}
+</style>