feat(transcribe): add TranscribeCoachEmptyState and TranscribeDragDemo components

New coach card replaces the icon+sentence empty state in the Transcribe
panel (edit mode). Three-step guide with 5-s SMIL drawing animation in
step 1 only. Animation freezes at the final frame when
prefers-reduced-motion is active. Footer links to Wikipedia Kurrent and
the Richtlinien page open in new tabs with visible '(öffnet in neuem Tab)'
annotations. 34 new i18n keys in de/en/es.

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

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

@@ -0,0 +1,71 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TranscribeCoachEmptyState from './TranscribeCoachEmptyState.svelte';
+
+vi.mock('$lib/paraglide/messages.js', () => ({
+	m: {
+		transcribe_coach_title: () => 'Erste Transkription?',
+		transcribe_coach_preamble: () => 'Unser Kurrent-Erkenner lernt noch.',
+		transcribe_coach_step_1_title: () => 'Rahmen ziehen.',
+		transcribe_coach_step_1_body: () => 'Klicken und ziehen Sie mit der Maus einen Rahmen.',
+		transcribe_coach_step_2_title: () => 'Text eingeben.',
+		transcribe_coach_step_2_body: () => 'Geben Sie den Text ein.',
+		transcribe_coach_step_3_title: () => 'Speichert automatisch.',
+		transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗',
+		transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗',
+		common_opens_new_tab: () => '(öffnet in neuem Tab)'
+	}
+}));
+
+afterEach(() => {
+	cleanup();
+	vi.restoreAllMocks();
+});
+
+describe('TranscribeCoachEmptyState', () => {
+	it('renders the title and preamble', async () => {
+		render(TranscribeCoachEmptyState);
+		await expect
+			.element(page.getByRole('heading', { level: 2 }))
+			.toHaveTextContent('Erste Transkription?');
+		await expect.element(page.getByText('Unser Kurrent-Erkenner lernt noch.')).toBeInTheDocument();
+	});
+
+	it('renders three numbered steps', async () => {
+		render(TranscribeCoachEmptyState);
+		await expect.element(page.getByText('Rahmen ziehen.')).toBeInTheDocument();
+		await expect
+			.element(page.getByText('Klicken und ziehen Sie mit der Maus einen Rahmen.'))
+			.toBeInTheDocument();
+		await expect.element(page.getByText('Text eingeben.')).toBeInTheDocument();
+		await expect.element(page.getByText('Geben Sie den Text ein.')).toBeInTheDocument();
+		await expect.element(page.getByText('Speichert automatisch.')).toBeInTheDocument();
+	});
+
+	it('renders footer links to Wikipedia Kurrent and Richtlinien page', async () => {
+		render(TranscribeCoachEmptyState);
+		const kurrentLink = page.getByRole('link', { name: /Hilfe zu Kurrent/ });
+		await expect.element(kurrentLink).toBeInTheDocument();
+		await expect.element(kurrentLink).toHaveAttribute('target', '_blank');
+		await expect.element(kurrentLink).toHaveAttribute('rel', 'noopener noreferrer');
+		await expect.element(kurrentLink).toHaveAttribute('referrerpolicy', 'no-referrer');
+
+		const richtlinienLink = page.getByRole('link', { name: /Transkriptions-Richtlinien/ });
+		await expect.element(richtlinienLink).toBeInTheDocument();
+		await expect.element(richtlinienLink).toHaveAttribute('target', '_blank');
+		await expect.element(richtlinienLink).toHaveAttribute('rel', 'noopener noreferrer');
+	});
+
+	it('renders visible "(öffnet in neuem Tab)" annotation on each footer link', async () => {
+		render(TranscribeCoachEmptyState);
+		const annotations = page.getByText('(öffnet in neuem Tab)');
+		await expect.element(annotations.first()).toBeInTheDocument();
+	});
+
+	it('renders the drag demo animation region inside step 1', async () => {
+		render(TranscribeCoachEmptyState);
+		const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });
+		await expect.element(demo).toBeInTheDocument();
+	});
+});