feat(richtlinien): add /hilfe/transkription page with RichtlinienRuleCard

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

frontend/src/routes/hilfe/transkription/+page.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import RichtlinienRuleCard from '$lib/components/RichtlinienRuleCard.svelte';
+
+const rules = [
+	{
+		icon: '❓',
+		title: m.richtlinien_rule_unleserlich_title(),
+		body: m.richtlinien_rule_unleserlich_body(),
+		beispielOutput: '[unleserlich]'
+	},
+	{
+		icon: '✗',
+		title: m.richtlinien_rule_durchgestrichen_title(),
+		body: m.richtlinien_rule_durchgestrichen_body(),
+		beispielOutput: '[durchgestrichen: der Text]'
+	},
+	{
+		icon: 'ſ',
+		title: m.richtlinien_rule_langes_s_title(),
+		body: m.richtlinien_rule_langes_s_body(),
+		beispielOutput: 's'
+	},
+	{
+		icon: '?',
+		title: m.richtlinien_rule_name_title(),
+		body: m.richtlinien_rule_name_body(),
+		beispielOutput: '[Müller?]'
+	},
+	{
+		icon: '💬',
+		title: m.richtlinien_rule_dialekt_title(),
+		body: m.richtlinien_rule_dialekt_body()
+	}
+];
+
+const klaerungChips = [
+	m.richtlinien_klaer_abkuerzungen(),
+	m.richtlinien_klaer_datumsformate(),
+	m.richtlinien_klaer_umbrueche(),
+	m.richtlinien_klaer_caps()
+];
+</script>
+
+<svelte:head>
+	<title>{m.richtlinien_title()} — Familienarchiv</title>
+</svelte:head>
+
+<div class="mx-auto max-w-2xl px-4 py-10 font-serif">
+	<!-- Title -->
+	<h1 class="mb-4 text-3xl font-bold text-ink">{m.richtlinien_title()}</h1>
+
+	<!-- Intro -->
+	<p class="mb-8 text-base leading-relaxed text-ink-2">{m.richtlinien_intro()}</p>
+
+	<!-- Wikipedia info card -->
+	<div class="border-brand-sand mb-10 rounded-sm border bg-white p-5 shadow-sm">
+		<p class="mb-3 font-sans text-sm text-ink-2">{m.richtlinien_wiki_text()}</p>
+		<a
+			href="https://de.wikipedia.org/wiki/Kurrent"
+			target="_blank"
+			rel="noopener noreferrer"
+			referrerpolicy="no-referrer"
+			class="inline-flex items-center gap-1 font-sans text-sm font-medium text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
+		>
+			{m.richtlinien_wiki_link()}
+			<span class="new-tab ml-1 text-[11px] text-ink-3">({m.common_opens_new_tab()})</span>
+		</a>
+	</div>
+
+	<!-- Rules section -->
+	<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.richtlinien_rules_label()}
+	</h2>
+	<div class="mb-10 flex flex-col gap-4">
+		{#each rules as rule (rule.title)}
+			<RichtlinienRuleCard
+				icon={rule.icon}
+				title={rule.title}
+				body={rule.body}
+				beispielOutput={rule.beispielOutput}
+				beispielLabel={m.richtlinien_beispiel_label()}
+			/>
+		{/each}
+	</div>
+
+	<!-- Noch in Klärung -->
+	<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.richtlinien_klaerung_label()}
+	</h2>
+	<p class="mb-4 font-serif text-sm leading-relaxed text-ink-2">
+		{m.richtlinien_klaerung_intro()}
+	</p>
+	<div class="mb-10 flex flex-wrap gap-2">
+		{#each klaerungChips as chip (chip)}
+			<span
+				class="border-brand-sand rounded-full border bg-white px-3 py-1 font-sans text-xs text-ink-2"
+				>{chip}</span
+			>
+		{/each}
+	</div>
+
+	<!-- Closing card -->
+	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
+		<h2 class="mb-2 font-serif text-lg font-bold text-ink">{m.richtlinien_closing_title()}</h2>
+		<p class="font-serif text-sm leading-relaxed text-ink-2">{m.richtlinien_closing_body()}</p>
+	</div>
+</div>
+
+<style>
+@media print {
+	:global(.app-nav) {
+		display: none;
+	}
+
+	.new-tab {
+		display: none;
+	}
+
+	@page {
+		margin: 1.5cm;
+	}
+}
+</style>