refactor(web): vereinfachte Navigation und inline Deck-Erstellung

- /study-Listing entfernt, Route redirectet auf /decks
- Study-Tab aus Nav entfernt; /study/*-Pfade highlighten Decks-Tab
- /decks/new und /decks/new-ai zusammengeführt: ein Formular mit
  zwei Buttons (Anlegen + ✨ Mit KI generieren), new-ai redirectet
- Inline NewDeckCard: Formular klappt in der Kachel auf (gleiche
  Größe, scrollbar), Fach als Toggle-Picker, alle Felder volle Breite
- DeckStack: Text linksbündig, Beschreibung ohne Clamp, Titel weiter oben

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

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

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { Deck } from '@cards/domain';
+	import { DECK_CATEGORY_LABELS } from '@cards/domain';
 	import { stackLayers } from '$lib/utils/deck-tilt';
 	import { t, tn } from '$lib/i18n/index.svelte.ts';
 	import CardSurface from './CardSurface.svelte';
+	import DeckCategoryIcon from './DeckCategoryIcon.svelte';
 
 	interface Props {
 		deck: Deck;
@@ -18,6 +20,7 @@
 	const layers = $derived(stackLayers(deck.id, 3));
 	const hasContent = $derived(cardCount > 0);
 	const accentColor = $derived(deck.color ?? null);
+	const category = $derived(deck.category ?? null);
 
 	const label = $derived(
 		ariaLabel ??
@@ -30,7 +33,6 @@
 </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
@@ -41,7 +43,6 @@
 		{/each}
 	{/if}
 
-	<!-- Deckblatt (vordere Karte) — gleiche Optik wie Lern- und Fan-Karten -->
 	<CardSurface
 		size="md"
 		as={href ? 'a' : 'button'}
@@ -52,12 +53,22 @@
 		class={hasContent ? 'cover' : 'cover empty'}
 	>
 		<div class="cover-inner">
+			<!-- Icon oben rechts, wie Kartenfarbe beim Spielkarten-Design -->
+			{#if category}
+				<div class="cover-corner" aria-hidden="true">
+					<DeckCategoryIcon {category} size={20} color={accentColor} weight="duotone" />
+				</div>
+			{/if}
+
+			<!-- Titel zentriert im Kartenkörper -->
 			<div class="cover-body">
 				<h2 class="cover-title">{deck.name}</h2>
 				{#if deck.description}
 					<p class="cover-desc">{deck.description}</p>
 				{/if}
 			</div>
+
+			<!-- Meta unten -->
 			<div class="cover-meta">
 				<span class="meta-count">{tn('decks.card_count', cardCount)}</span>
 				{#if dueCount > 0}
@@ -76,7 +87,6 @@
 		aspect-ratio: 5 / 7;
 	}
 
-	/* Hintergrund-Layers — versteckte Karten unter dem Deckblatt */
 	.layer {
 		position: absolute;
 		inset: 0;
@@ -86,52 +96,62 @@
 		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;
+		padding: 1rem 1rem 1.125rem 1.375rem;
 		overflow: hidden;
 	}
 
+	/* Icon-Ecke oben rechts */
+	.cover-corner {
+		position: absolute;
+		top: 0.875rem;
+		right: 0.875rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.85;
+	}
+
 	.cover-body {
 		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: 0.875rem;
+		padding: 2.5rem 0.5rem 0 0;
 		min-height: 0;
 	}
 
 	.cover-title {
 		margin: 0;
-		font-size: 1.125rem;
+		font-size: 1.0625rem;
 		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-desc {
+		margin: 0;
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		line-height: 1.4;
+	}
+
 	.cover-meta {
+		flex: 0 0 auto;
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.375rem 0.75rem;
-		font-size: 0.8125rem;
+		gap: 0.25rem 0.5rem;
+		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
 		font-variant-numeric: tabular-nums;
 	}
@@ -146,7 +166,6 @@
 		font-weight: 500;
 	}
 
-	/* Empty-State: kein Stapel-Hint, dashed Border über CardSurface-Wrapper */
 	.stack-wrap.empty :global(.cover.empty) {
 		border-style: dashed;
 		background: transparent;