feat(stammbaum): person detail Beziehungen card

- persons/[id]/+page.server.ts loads relationships and
  inferred-relationships in the existing parallel fetch.
- New PersonRelationshipsCard renders direct chips (mint) and the
  top-5 derived chips (grey) on /persons/{id}, both linked to the
  other person's page. Empty state shows
  "Noch keine Beziehungen bekannt." in muted serif.
- Card sits in the right column above the document lists.

Refs #358.

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

frontend/src/routes/persons/[id]/+page.server.ts

@@ -11,11 +11,20 @@ export async function load({ params, fetch, locals }) {
 			g.permissions.includes('WRITE_ALL')
 		) ?? false;
 
-	const [personResult, sentDocsResult, receivedDocsResult, aliasesResult] = await Promise.all([
+	const [
+		personResult,
+		sentDocsResult,
+		receivedDocsResult,
+		aliasesResult,
+		relsResult,
+		inferredResult
+	] = await Promise.all([
 		api.GET('/api/persons/{id}', { params: { path: { id } } }),
 		api.GET('/api/persons/{id}/documents', { params: { path: { id } } }),
 		api.GET('/api/persons/{id}/received-documents', { params: { path: { id } } }),
-		api.GET('/api/persons/{id}/aliases', { params: { path: { id } } })
+		api.GET('/api/persons/{id}/aliases', { params: { path: { id } } }),
+		api.GET('/api/persons/{id}/relationships', { params: { path: { id } } }),
+		api.GET('/api/persons/{id}/inferred-relationships', { params: { path: { id } } })
 	]);
 
 	if (!personResult.response.ok) {
@@ -28,6 +37,8 @@ export async function load({ params, fetch, locals }) {
 		sentDocuments: sentDocsResult.data ?? [],
 		receivedDocuments: receivedDocsResult.data ?? [],
 		aliases: aliasesResult.data ?? [],
+		relationships: relsResult.data ?? [],
+		inferredRelationships: inferredResult.data ?? [],
 		canWrite
 	};
 }

frontend/src/routes/persons/[id]/+page.svelte

@@ -6,6 +6,7 @@ import PersonCard from './PersonCard.svelte';
 import NameHistoryCard from './NameHistoryCard.svelte';
 import CoCorrespondentsList from './CoCorrespondentsList.svelte';
 import PersonDocumentList from './PersonDocumentList.svelte';
+import PersonRelationshipsCard from './PersonRelationshipsCard.svelte';
 
 let { data } = $props();
 
@@ -64,10 +65,18 @@ const coCorrespondents = $derived.by(() => {
 			</div>
 		</div>
 
-		<!-- Right column: correspondents + documents -->
+		<!-- Right column: correspondents + relationships + documents -->
 		<div>
 			<CoCorrespondentsList coCorrespondents={coCorrespondents} personId={person.id} />
 
+			<div class="mt-6">
+				<PersonRelationshipsCard
+					personId={person.id}
+					relationships={data.relationships}
+					inferredRelationships={data.inferredRelationships}
+				/>
+			</div>
+
 			<PersonDocumentList
 				documents={sentDocuments}
 				heading={m.person_docs_heading()}

frontend/src/routes/persons/[id]/PersonRelationshipsCard.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { inferredRelationshipLabel } from '$lib/relationshipLabels';
+import type { components } from '$lib/generated/api';
+
+type RelationshipDTO = components['schemas']['RelationshipDTO'];
+type InferredRelationshipWithPersonDTO = components['schemas']['InferredRelationshipWithPersonDTO'];
+
+interface Props {
+	personId: string;
+	relationships: RelationshipDTO[];
+	inferredRelationships: InferredRelationshipWithPersonDTO[];
+}
+
+let { personId, relationships, inferredRelationships }: Props = $props();
+
+const topDerived = $derived(inferredRelationships.slice(0, 5));
+
+function chipLabel(rel: RelationshipDTO): string {
+	const viewpointIsSubject = rel.personId === personId;
+	switch (rel.relationType) {
+		case 'PARENT_OF':
+			return viewpointIsSubject ? m.relation_parent_of() : m.relation_child_of();
+		case 'SPOUSE_OF':
+			return m.relation_spouse_of();
+		case 'SIBLING_OF':
+			return m.relation_sibling_of();
+		case 'FRIEND':
+			return m.relation_friend();
+		case 'COLLEAGUE':
+			return m.relation_colleague();
+		case 'EMPLOYER':
+			return m.relation_employer();
+		case 'DOCTOR':
+			return m.relation_doctor();
+		case 'NEIGHBOR':
+			return m.relation_neighbor();
+		default:
+			return m.relation_other();
+	}
+}
+
+function otherId(rel: RelationshipDTO): string {
+	return rel.personId === personId ? rel.relatedPersonId : rel.personId;
+}
+
+function otherName(rel: RelationshipDTO): string {
+	return rel.personId === personId ? rel.relatedPersonDisplayName : rel.personDisplayName;
+}
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.person_relationships_heading()}
+	</h2>
+
+	{#if relationships.length === 0 && topDerived.length === 0}
+		<p class="font-serif text-sm text-ink-2 italic">{m.person_relationships_empty()}</p>
+	{:else}
+		{#if relationships.length > 0}
+			<ul class="mb-4 space-y-2">
+				{#each relationships as rel (rel.id)}
+					<li class="flex items-center gap-2">
+						<span
+							class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink uppercase"
+						>
+							{chipLabel(rel)}
+						</span>
+						<a
+							href="/persons/{otherId(rel)}"
+							class="min-w-0 flex-1 truncate font-serif text-sm text-ink hover:underline"
+						>
+							{otherName(rel)}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+
+		{#if topDerived.length > 0}
+			<ul class="space-y-2">
+				{#each topDerived as derived (derived.person.id)}
+					<li class="flex items-center gap-2">
+						<span
+							class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink-2 uppercase"
+						>
+							{inferredRelationshipLabel(derived.label)}
+						</span>
+						<a
+							href="/persons/{derived.person.id}"
+							class="min-w-0 flex-1 truncate font-serif text-sm text-ink-2 hover:underline"
+						>
+							{derived.person.displayName}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/if}
+</div>