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>

backend/src/test/java/org/raddatz/familienarchiv/service/TranscriptionServiceTest.java

@@ -241,6 +241,35 @@ class TranscriptionServiceTest {
                 .containsExactly(mention);
     }
 
+    @Test
+    void updateBlock_clearsPriorMentions_beforeApplyingDto() {
+        UUID docId = UUID.randomUUID();
+        UUID blockId = UUID.randomUUID();
+
+        PersonMention prior = new PersonMention(UUID.randomUUID(), "Heinrich");
+        PersonMention incoming = new PersonMention(UUID.randomUUID(), "Auguste");
+
+        TranscriptionBlock block = TranscriptionBlock.builder()
+                .id(blockId).documentId(docId).text("old").build();
+        block.getMentionedPersons().add(prior);
+
+        when(blockRepository.findByIdAndDocumentId(blockId, docId)).thenReturn(Optional.of(block));
+        when(blockRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+        when(documentService.getDocumentById(any())).thenReturn(
+                Document.builder().scriptType(ScriptType.TYPEWRITER).build());
+
+        UpdateTranscriptionBlockDTO dto = UpdateTranscriptionBlockDTO.builder()
+                .text("@Auguste text")
+                .mentionedPersons(List.of(incoming))
+                .build();
+
+        TranscriptionBlock result = transcriptionService.updateBlock(docId, blockId, dto, UUID.randomUUID());
+
+        assertThat(result.getMentionedPersons())
+                .containsExactly(incoming)
+                .doesNotContain(prior);
+    }
+
     @Test
     void updateBlock_triggersTraining_whenKurrentSenderPresent() {
         UUID docId = UUID.randomUUID();

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);

frontend/src/lib/components/TranscriptionReadView.svelte

@@ -155,11 +155,7 @@ async function handleMentionEnter(event: Event) {
 function handleMentionLeave(event: Event) {
 	const link = event.target as HTMLAnchorElement;
 	link.removeAttribute('aria-describedby');
-	if (event.type === 'mouseleave') {
-		scheduleCardClose();
-	} else {
-		activeCard = null;
-	}
+	scheduleCardClose();
 }
 
 /**