feat(ui): add AnnotateHintStrip — 18px hint strip, hidden md:flex, annotateMode gated

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

frontend/src/lib/components/AnnotateHintStrip.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+type Props = {
+	annotateMode: boolean;
+};
+
+let { annotateMode }: Props = $props();
+</script>
+
+{#if annotateMode}
+	<div
+		data-testid="annotate-hint-strip"
+		class="hidden h-[18px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
+		style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
+	>
+		<span class="text-[10px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
+		<span class="text-[10px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
+	</div>
+{/if}

frontend/src/lib/components/AnnotateHintStrip.svelte.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AnnotateHintStrip from './AnnotateHintStrip.svelte';
+
+afterEach(cleanup);
+
+describe('AnnotateHintStrip', () => {
+	it('is absent from the DOM when annotateMode is false', async () => {
+		render(AnnotateHintStrip, { annotateMode: false });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).not.toBeInTheDocument();
+	});
+
+	it('is present in the DOM when annotateMode is true', async () => {
+		render(AnnotateHintStrip, { annotateMode: true });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).toBeInTheDocument();
+	});
+
+	it('has hidden md:flex class to hide below 768px', async () => {
+		render(AnnotateHintStrip, { annotateMode: true });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).toHaveClass('hidden');
+		await expect.element(strip).toHaveClass('md:flex');
+	});
+});