diff --git a/frontend/src/lib/components/document/ScopeCard.svelte b/frontend/src/lib/components/document/ScopeCard.svelte
new file mode 100644
index 00000000..d0e7c5c7
--- /dev/null
+++ b/frontend/src/lib/components/document/ScopeCard.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+let {
+	variant,
+	count = 0,
+	children
+}: {
+	variant: 'per-file' | 'shared';
+	count?: number;
+	children?: import('svelte').Snippet;
+} = $props();
+</script>
+
+<div
+	data-testid="scope-card"
+	class="rounded-sm border p-4
+		{variant === 'per-file'
+		? 'border-brand-mint bg-brand-mint/10'
+		: 'border-brand-sand bg-white'}"
+>
+	{#if variant === 'shared'}
+		<div class="mb-3 flex items-center justify-between">
+			<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">
+				Gilt für alle Dateien
+			</span>
+			<span
+				class="bg-brand-sand inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-bold text-brand-navy"
+			>
+				{count}
+			</span>
+		</div>
+	{:else}
+		<p class="mb-3 text-xs font-bold tracking-widest text-brand-mint uppercase">Diese Datei</p>
+	{/if}
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/document/ScopeCard.svelte.spec.ts b/frontend/src/lib/components/document/ScopeCard.svelte.spec.ts
new file mode 100644
index 00000000..51c4ae1b
--- /dev/null
+++ b/frontend/src/lib/components/document/ScopeCard.svelte.spec.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ScopeCard from './ScopeCard.svelte';
+
+afterEach(cleanup);
+
+describe('ScopeCard', () => {
+	it('per-file variant has mint background class', async () => {
+		const { container } = render(ScopeCard, { variant: 'per-file', count: 1 });
+		const card = container.querySelector('[data-testid="scope-card"]');
+		expect(card?.className).toMatch(/brand-mint/);
+	});
+
+	it('shared variant does not have mint background', async () => {
+		const { container } = render(ScopeCard, { variant: 'shared', count: 3 });
+		const card = container.querySelector('[data-testid="scope-card"]');
+		expect(card?.className).not.toMatch(/bg-brand-mint/);
+	});
+
+	it('shared variant renders count badge with file count', async () => {
+		render(ScopeCard, { variant: 'shared', count: 5 });
+		await expect.element(page.getByText('5')).toBeInTheDocument();
+	});
+
+	it('per-file variant renders slot content', async () => {
+		// ScopeCard is a container — verify it renders children
+		render(ScopeCard, { variant: 'per-file', count: 1 });
+		const card = await page.getByTestId('scope-card');
+		await expect.element(card).toBeInTheDocument();
+	});
+});