fix(richtlinien): improve examples, copy, and Wikipedia link

- Rule cards now show before→after examples; strikethrough rule input
  renders with CSS line-through so the visual context is honest
- Illegible-words rule shows output only — can't represent unreadable
  text as readable characters
- Intro drops fictional family names in favour of "egal wer tippt"
- Wikipedia card copy is more direct; link uses icon instead of
  parenthetical "(öffnet in neuem Tab)" text

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

frontend/src/lib/components/RichtlinienRuleCard.svelte

@@ -3,11 +3,21 @@ type Props = {
 	icon: string;
 	title: string;
 	body: string;
+	beispielInput?: string;
+	beispielInputStrike?: boolean;
 	beispielOutput?: string;
 	beispielLabel?: string;
 };
 
-let { icon, title, body, beispielOutput, beispielLabel = 'Beispiel' }: Props = $props();
+let {
+	icon,
+	title,
+	body,
+	beispielInput,
+	beispielInputStrike = false,
+	beispielOutput,
+	beispielLabel = 'Beispiel'
+}: Props = $props();
 </script>
 
 <div class="border-brand-sand break-inside-avoid rounded-sm border bg-white p-5 shadow-sm">
@@ -23,7 +33,13 @@ let { icon, title, body, beispielOutput, beispielLabel = 'Beispiel' }: Props = $
 				{beispielLabel}
 			</p>
 			<p class="mt-1 font-sans text-sm text-ink">
-				→ <code class="font-mono">{beispielOutput}</code>
+				{#if beispielInput !== undefined}
+					<code
+						class={['font-mono', beispielInputStrike && 'line-through'].filter(Boolean).join(' ')}
+						>{beispielInput}</code
+					> →
+				{/if}
+				<code class="font-mono">{beispielOutput}</code>
 			</p>
 		</div>
 	{/if}

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

@@ -13,18 +13,22 @@ const rules = [
 		icon: '✗',
 		title: m.richtlinien_rule_durchgestrichen_title(),
 		body: m.richtlinien_rule_durchgestrichen_body(),
+		beispielInput: 'der Text',
+		beispielInputStrike: true,
 		beispielOutput: '[durchgestrichen: der Text]'
 	},
 	{
 		icon: 'ſ',
 		title: m.richtlinien_rule_langes_s_title(),
 		body: m.richtlinien_rule_langes_s_body(),
-		beispielOutput: 's'
+		beispielInput: 'ſtraße',
+		beispielOutput: 'straße'
 	},
 	{
 		icon: '?',
 		title: m.richtlinien_rule_name_title(),
 		body: m.richtlinien_rule_name_body(),
+		beispielInput: 'Müller',
 		beispielOutput: '[Müller?]'
 	},
 	{
@@ -61,10 +65,23 @@ const klaerungChips = [
 			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]"
+			aria-label="{m.richtlinien_wiki_link()} — {m.common_opens_new_tab()}"
+			class="inline-flex items-center gap-1.5 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>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="h-3.5 w-3.5 shrink-0"
+				aria-hidden="true"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Zm6.75-3a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0V3.56l-4.22 4.22a.75.75 0 0 1-1.06-1.06l4.22-4.22H11a.75.75 0 0 1-.75-.75Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
 		</a>
 	</div>
 
@@ -78,6 +95,8 @@ const klaerungChips = [
 				icon={rule.icon}
 				title={rule.title}
 				body={rule.body}
+				beispielInput={rule.beispielInput}
+				beispielInputStrike={rule.beispielInputStrike}
 				beispielOutput={rule.beispielOutput}
 				beispielLabel={m.richtlinien_beispiel_label()}
 			/>
@@ -113,10 +132,6 @@ const klaerungChips = [
 		display: none;
 	}
 
-	.new-tab {
-		display: none;
-	}
-
 	@page {
 		margin: 1.5cm;
 	}