fix(PersonHoverCard): move chip colon into DOM for consistent screen reader announcement

Replaces CSS ::after { content: ':' } with literal colon inside the
chip-type span. CSS-generated content is announced inconsistently
across NVDA+Chrome and VoiceOver+Safari; a real text node is always
reliable.

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

frontend/src/lib/components/PersonHoverCard.svelte

@@ -131,7 +131,7 @@ const showMaidenName = $derived(
 				<div class="chips" data-testid="person-hover-card-chips">
 					{#each familyChips as chip (chip.id)}
 						<span class="chip">
-							<span class="chip-type">{chipLabel(chip, personId)}</span>
+							<span class="chip-type">{chipLabel(chip, personId)}:</span>
 							{otherName(chip, personId)}
 						</span>
 					{/each}
@@ -261,10 +261,6 @@ const showMaidenName = $derived(
 	opacity: 0.7;
 }
 
-.chip-type::after {
-	content: ':';
-}
-
 .notes {
 	font-size: 13px;
 	color: var(--c-ink-2);