feat(decks): Deck-Kategorien über den ganzen Stack

- cards-domain: DECK_CATEGORY_IDS, Labels, DeckCategorySchema,
  category-Feld im DeckSchema
- DB-Schema (decks + marketplace/decks): category-Spalte
- API-Routen: category in create/update/list/explore
- Web: DeckCategoryIcon-Komponente, Kategorie-Picker auf Deck-Detail,
  Kategorie-Icon in DeckListGrid (Marketplace)
- Layout: Bottom-Padding für floating Nav-Bar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -29,6 +29,7 @@ export interface MarketplaceDeck {
 	title: string;
 	description: string | null;
 	language: string | null;
+	category: string | null;
 	license: string;
 	price_credits: number;
 	owner_user_id: string;
@@ -61,6 +62,7 @@ export interface DeckListEntry {
 	title: string;
 	description: string | null;
 	language: string | null;
+	category: string | null;
 	license: string;
 	price_credits: number;
 	card_count: number;

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { DeckCategoryId } from '@cards/domain';
+	import {
+		Globe,
+		Heartbeat,
+		Leaf,
+		Brain,
+		Flag,
+		Medal,
+		Lightning,
+		Palette,
+		MusicNote,
+		Barbell,
+		Sparkle,
+	} from '@mana/shared-icons';
+
+	type Weight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+
+	interface Props {
+		category: DeckCategoryId;
+		size?: number;
+		color?: string | null;
+		weight?: Weight;
+	}
+
+	let { category, size = 32, color = null, weight = 'duotone' }: Props = $props();
+
+	const ICON_MAP: Record<DeckCategoryId, typeof Globe> = {
+		language: Globe,
+		medicine: Heartbeat,
+		science: Leaf,
+		math: Brain,
+		history: Flag,
+		law: Medal,
+		technology: Lightning,
+		arts: Palette,
+		music: MusicNote,
+		sport: Barbell,
+		other: Sparkle,
+	};
+
+	const IconComponent = $derived(ICON_MAP[category]);
+</script>
+
+{#if IconComponent}
+	<IconComponent {size} {weight} color={color ?? undefined} />
+{/if}

apps/web/src/lib/components/marketplace/DeckListGrid.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { DeckListEntry } from '$lib/api/marketplace.ts';
+	import type { DeckCategoryId } from '@cards/domain';
+	import { DECK_CATEGORY_IDS } from '@cards/domain';
 	import AuthorBadge from './AuthorBadge.svelte';
+	import DeckCategoryIcon from '$lib/components/DeckCategoryIcon.svelte';
 
 	interface Props {
 		items: DeckListEntry[];
@@ -9,6 +12,10 @@
 
 	const { items, emptyMessage = 'Noch keine Decks gefunden.' }: Props = $props();
 
+	function isValidCategory(c: string | null): c is DeckCategoryId {
+		return c !== null && (DECK_CATEGORY_IDS as readonly string[]).includes(c);
+	}
+
 	function languageLabel(code: string | null): string {
 		if (!code) return '';
 		const map: Record<string, string> = { de: 'Deutsch', en: 'English', es: 'Español', fr: 'Français' };
@@ -29,14 +36,21 @@
 				<a href="/d/{deck.slug}" class="block">
 					<div class="flex items-start justify-between gap-2">
 						<h3 class="truncate font-medium">{deck.title}</h3>
-						{#if deck.is_featured}
-							<span
-								class="shrink-0 rounded-full bg-[hsl(var(--color-primary))]/15 px-2 py-0.5 text-[10px] font-medium text-[hsl(var(--color-primary))]"
-								title="Editorial Pick"
-							>
-								★ Featured
-							</span>
-						{/if}
+						<div class="flex shrink-0 items-center gap-1.5">
+							{#if isValidCategory(deck.category)}
+								<span class="text-[hsl(var(--color-muted-foreground))]" aria-hidden="true">
+									<DeckCategoryIcon category={deck.category} size={16} weight="duotone" />
+								</span>
+							{/if}
+							{#if deck.is_featured}
+								<span
+									class="rounded-full bg-[hsl(var(--color-primary))]/15 px-2 py-0.5 text-[10px] font-medium text-[hsl(var(--color-primary))]"
+									title="Editorial Pick"
+								>
+									★ Featured
+								</span>
+							{/if}
+						</div>
 					</div>
 					{#if deck.description}
 						<p

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

@@ -50,7 +50,7 @@
 
 	.default-pad {
 		max-width: 72rem;
-		padding: 2rem 1rem;
+		padding: 2rem 1rem 6rem;
 	}
 
 	/* Focus-Mode: keine max-width-Begrenzung, kein Außen-Padding —

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

@@ -3,13 +3,15 @@
 	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 { type DeckCategoryId, DECK_CATEGORY_IDS, DECK_CATEGORY_LABELS } from '@cards/domain';
+	import { getDeck, updateDeck } 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';
 	import { t, tn } from '$lib/i18n/index.svelte.ts';
 	import DeckFan from '$lib/components/DeckFan.svelte';
+	import DeckCategoryIcon from '$lib/components/DeckCategoryIcon.svelte';
 
 	let deck = $state<Deck | null>(null);
 	let cards = $state<Card[]>([]);
@@ -46,6 +48,16 @@
 		}
 	}
 
+	async function onSetCategory(id: DeckCategoryId) {
+		if (!deck) return;
+		const next = deck.category === id ? null : id;
+		try {
+			deck = await updateDeck(deck.id, { category: next ?? undefined });
+		} catch (e) {
+			toasts.error((e as Error).message);
+		}
+	}
+
 	async function onDeleteCard(id: string) {
 		if (!confirm(t('deck_detail.card_delete_confirm'))) return;
 		try {
@@ -112,6 +124,24 @@
 		{tn('decks.card_count', cards.length)} · {t('study.due_count', { n: dueCount })}
 	</div>
 
+	<div class="category-row mt-3">
+		{#each DECK_CATEGORY_IDS as id}
+			<button
+				class="cat-btn"
+				class:active={deck.category === id}
+				onclick={() => onSetCategory(id)}
+			>
+				<DeckCategoryIcon
+					category={id}
+					size={16}
+					color={deck.category === id ? (deck.color ?? null) : null}
+					weight={deck.category === id ? 'fill' : 'regular'}
+				/>
+				<span class="cat-label">{DECK_CATEGORY_LABELS[id]}</span>
+			</button>
+		{/each}
+	</div>
+
 	{#if cards.length === 0}
 		<div
 			class="mt-8 rounded-lg border border-dashed border-[hsl(var(--color-border))] p-12 text-center"
@@ -183,6 +213,41 @@
 {/if}
 
 <style>
+	.category-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+	}
+
+	.cat-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.375rem;
+		border: 1px solid transparent;
+		background: transparent;
+		color: hsl(var(--color-muted-foreground));
+		cursor: pointer;
+		transition: border-color 0.12s, background 0.12s, color 0.12s;
+	}
+
+	.cat-btn:hover {
+		border-color: hsl(var(--color-border));
+		color: hsl(var(--color-foreground));
+	}
+
+	.cat-btn.active {
+		border-color: hsl(var(--color-primary) / 0.4);
+		background: hsl(var(--color-primary) / 0.08);
+		color: hsl(var(--color-foreground));
+	}
+
+	.cat-label {
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
 	.list-toggle {
 		cursor: pointer;
 		font-size: 0.875rem;