refactor(geschichte): CSS.escape in focus queries, announceTimer cleanup, warning icon (#795)

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

frontend/src/lib/geschichte/StoryDocumentPanel.svelte

@@ -29,6 +29,10 @@ let liveAnnounce = $state('');
 let announceTimer: ReturnType<typeof setTimeout> | null = null;
 let sectionEl: HTMLElement | null = $state(null);
 
+$effect(() => () => {
+	if (announceTimer) clearTimeout(announceTimer);
+});
+
 const alreadyAddedIds = $derived(
 	new Set(items.filter((i) => i.document).map((i) => i.document!.id))
 );
@@ -86,7 +90,9 @@ async function moveFocusAfterRemove(removedIdx: number) {
 		return;
 	}
 	const target = items[Math.max(removedIdx - 1, 0)];
-	sectionEl?.querySelector<HTMLElement>(`[data-item-id="${target.id}"] [data-remove-btn]`)?.focus();
+	sectionEl
+		?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(target.id)}"] [data-remove-btn]`)
+		?.focus();
 }
 
 /** Optimistic removal with snapshot-and-rollback. */
@@ -142,8 +148,22 @@ async function handleRemove(item: JourneyItemView) {
 		{#if errorMessage}
 			<p
 				role="alert"
-				class="mb-3 rounded border border-danger bg-danger/10 px-3 py-2 font-sans text-sm text-danger"
+				class="mb-3 flex items-start gap-2 rounded border border-danger bg-danger/10 px-3 py-2 font-sans text-sm text-danger"
 			>
+				<svg
+					class="mt-0.5 h-4 w-4 flex-none"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+					/>
+				</svg>
 				{errorMessage}
 			</p>
 		{/if}