feat(study): Periodensystem-Karten mit Kategorie-Farben und Eigenschaften-Tabelle

- build_cards.py: Atommasse, Kategorie, Periode/Gruppe für alle 118 Elemente
- front: "# {Symbol}" → großes zentriertes Heading im Study-View
- back: Name + Eigenschaften-Tabelle (Z, Atommasse, Kategorie, P/G)
- fields.color: Kategorie-Farbe (10 Kategorien, je eigene Hex-Farbe)
- Study-Page: cardColor liest fields.color → linker Streifen wechselt pro Element
- CSS: h1 (4rem, zentriert), table (Header hidden, Label gedimmt)

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

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

@@ -31,6 +31,9 @@
 
 	const current = $derived(queue[queueIndex]);
 	const isDone = $derived(!loading && queueIndex >= queue.length);
+	const cardColor = $derived(
+		(current?.card?.fields as Record<string, string>)?.color ?? deckColor,
+	);
 
 	const promptMarkdown = $derived.by(() => {
 		const c = current;
@@ -201,7 +204,7 @@
 		</div>
 	{:else}
 		<div class="study-stage">
-			<CardSurface size="hero" raised colorAccent={deckColor} class="study-card">
+			<CardSurface size="hero" raised colorAccent={cardColor} class="study-card">
 				<article class="study-inner" aria-labelledby="study-prompt-heading">
 					<h2 id="study-prompt-heading" class="sr-only">
 						{revealed ? t('card_new.preview_label') : t('study_session.reveal')}
@@ -398,6 +401,42 @@
 		font-size: 0.875em;
 	}
 
+	/* Großes Symbol-Heading — z.B. "# H" auf Periodensystem-Karten */
+	.prose :global(h1) {
+		font-size: 4rem;
+		font-weight: 700;
+		text-align: center;
+		margin: 0;
+		line-height: 1;
+		letter-spacing: -0.02em;
+		color: hsl(var(--color-foreground));
+	}
+
+	/* Eigenschaften-Tabelle auf der Rückseite */
+	.prose :global(table) {
+		border-collapse: collapse;
+		width: 100%;
+		margin-top: 0.625rem;
+		font-size: 0.875rem;
+	}
+	.prose :global(thead tr) {
+		display: none;
+	}
+	.prose :global(td) {
+		padding: 0.3rem 0;
+		border-bottom: 1px solid hsl(var(--color-border));
+		vertical-align: top;
+	}
+	.prose :global(td:first-child) {
+		color: hsl(var(--color-muted-foreground));
+		padding-right: 1rem;
+		white-space: nowrap;
+		width: 1%;
+	}
+	.prose :global(tr:last-child td) {
+		border-bottom: none;
+	}
+
 	.prose.answer {
 		color: hsl(var(--color-foreground));
 	}