diff --git a/apps/api/src/modules/articles/routes.ts b/apps/api/src/modules/articles/routes.ts
index 79263e4f8..8772a2f39 100644
--- a/apps/api/src/modules/articles/routes.ts
+++ b/apps/api/src/modules/articles/routes.ts
@@ -1,35 +1,72 @@
 /**
  * Articles module — server-side URL extraction.
  *
- * Thin wrapper around `@mana/shared-rss`'s Readability pipeline. The
- * extracted payload is returned to the client which then encrypts +
- * stores it locally (and syncs via mana-sync). The server keeps no
- * per-user article state — all reading-list data lives in the unified
- * Mana app's IndexedDB.
+ * Two endpoints, both thin wrappers around `@mana/shared-rss`:
  *
- * One endpoint (`POST /extract`), not two. News has a `preview` + `save`
- * split for legacy reasons; here both UI paths (AddUrlForm preview + the
- * direct saveFromUrl path) use the same payload. The client caches the
- * response when the user confirms, avoiding a double server fetch.
+ *   POST /extract         ← server fetches the URL itself, then runs
+ *                           Readability on the HTML it got back. Works
+ *                           for simple sites but fails on anything behind
+ *                           a cookie-consent wall or a paywall — the
+ *                           server has no user session.
+ *   POST /extract/html    ← client already has the rendered HTML (from a
+ *                           browser bookmarklet running in the user's
+ *                           own tab with all their cookies applied).
+ *                           Server just runs Readability on that. This
+ *                           is how we bypass Golem / Spiegel / Zeit /
+ *                           Heise-style consent dialogs: use the user's
+ *                           already-consented session, not the server's
+ *                           anonymous fetch.
+ *
+ * Consent-wall heuristic: when /extract returns a suspiciously short
+ * payload that contains consent-dialog vocabulary we still hand the
+ * extracted text back but flag it with `warning: 'probable_consent_wall'`
+ * so the client can offer the bookmarklet-v2 path instead of pretending
+ * a 4-line "Cookies zustimmen" blob is the article.
  */
 
 import { Hono } from 'hono';
-import { extractFromUrl } from '@mana/shared-rss';
+import { extractFromUrl, extractFromHtml } from '@mana/shared-rss';
 
 const routes = new Hono();
 
+const CONSENT_KEYWORDS = [
+	'cookies zustimmen',
+	'cookie consent',
+	'zustimmung',
+	'accept all cookies',
+	'consent to the use',
+	'enable javascript',
+	'javascript is disabled',
+	'please enable',
+	'privacy center',
+	'datenschutz­einstellungen',
+	'datenschutzeinstellungen',
+];
+const CONSENT_WORDCOUNT_THRESHOLD = 300;
+
+function looksLikeConsentWall(content: string, wordCount: number): boolean {
+	if (wordCount >= CONSENT_WORDCOUNT_THRESHOLD) return false;
+	const haystack = content.toLowerCase();
+	return CONSENT_KEYWORDS.some((needle) => haystack.includes(needle));
+}
+
+function isValidHttpUrl(url: string): boolean {
+	try {
+		const u = new URL(url);
+		return u.protocol === 'http:' || u.protocol === 'https:';
+	} catch {
+		return false;
+	}
+}
+
+// POST /extract — server fetches the URL + extracts. Legacy path.
 routes.post('/extract', async (c) => {
 	const body = await c.req.json<{ url?: string }>().catch(() => ({}) as { url?: string });
 	const url = body.url;
 	if (!url || typeof url !== 'string') {
 		return c.json({ error: 'URL is required' }, 400);
 	}
-
-	// Minimal URL shape check — extractFromUrl will no-op on a bad URL but
-	// the caller deserves a clear 400 vs a generic 502.
-	try {
-		new URL(url);
-	} catch {
+	if (!isValidHttpUrl(url)) {
 		return c.json({ error: 'Invalid URL' }, 400);
 	}
 
@@ -38,6 +75,10 @@ routes.post('/extract', async (c) => {
 		return c.json({ error: 'Extraction failed' }, 502);
 	}
 
+	const warning = looksLikeConsentWall(extracted.content, extracted.wordCount)
+		? 'probable_consent_wall'
+		: undefined;
+
 	return c.json({
 		originalUrl: url,
 		title: extracted.title,
@@ -48,6 +89,59 @@ routes.post('/extract', async (c) => {
 		siteName: extracted.siteName,
 		wordCount: extracted.wordCount,
 		readingTimeMinutes: extracted.readingTimeMinutes,
+		...(warning && { warning }),
+	});
+});
+
+// POST /extract/html — client supplies HTML (from the user's browser
+// tab, where cookies + JS rendering already happened). We only run
+// Readability on it. Cap payload to 10 MiB so a pathological site
+// can't exhaust server memory via the bookmarklet — typical rendered
+// article HTML is 200-800 KB.
+const MAX_HTML_BYTES = 10 * 1024 * 1024;
+
+routes.post('/extract/html', async (c) => {
+	const body = await c.req
+		.json<{ url?: string; html?: string }>()
+		.catch(() => ({}) as { url?: string; html?: string });
+	const url = body.url;
+	const html = body.html;
+	if (!url || typeof url !== 'string') {
+		return c.json({ error: 'URL is required' }, 400);
+	}
+	if (!html || typeof html !== 'string') {
+		return c.json({ error: 'HTML is required' }, 400);
+	}
+	if (!isValidHttpUrl(url)) {
+		return c.json({ error: 'Invalid URL' }, 400);
+	}
+	if (html.length > MAX_HTML_BYTES) {
+		return c.json({ error: 'HTML payload too large' }, 413);
+	}
+
+	const extracted = await extractFromHtml(html, url);
+	if (!extracted) {
+		return c.json({ error: 'Extraction failed' }, 502);
+	}
+
+	// The consent-wall heuristic still applies here — a rare case is
+	// that the user bookmarklet-fires BEFORE the consent dialog is
+	// dismissed. Flag it so the client doesn't silently persist garbage.
+	const warning = looksLikeConsentWall(extracted.content, extracted.wordCount)
+		? 'probable_consent_wall'
+		: undefined;
+
+	return c.json({
+		originalUrl: url,
+		title: extracted.title,
+		excerpt: extracted.excerpt,
+		content: extracted.content,
+		htmlContent: extracted.htmlContent,
+		author: extracted.byline,
+		siteName: extracted.siteName,
+		wordCount: extracted.wordCount,
+		readingTimeMinutes: extracted.readingTimeMinutes,
+		...(warning && { warning }),
 	});
 });
 
diff --git a/apps/mana/apps/web/src/lib/modules/articles/api.ts b/apps/mana/apps/web/src/lib/modules/articles/api.ts
index b49b9b083..1a3fd41a2 100644
--- a/apps/mana/apps/web/src/lib/modules/articles/api.ts
+++ b/apps/mana/apps/web/src/lib/modules/articles/api.ts
@@ -28,23 +28,104 @@ export interface ExtractedArticle {
 	siteName: string | null;
 	wordCount: number;
 	readingTimeMinutes: number;
+	/**
+	 * Server-side quality flag. Today only `'probable_consent_wall'` is
+	 * emitted: the extracted text was suspiciously short AND contained
+	 * consent-dialog vocabulary, which typically means the server's
+	 * anonymous fetch hit a GDPR interstitial instead of the article.
+	 * The client uses this to offer the bookmarklet-v2 (browser-HTML)
+	 * path without silently persisting garbage.
+	 */
+	warning?: 'probable_consent_wall';
 }
 
+/**
+ * Hard client-side timeout for the extract roundtrip. The server's
+ * own Readability fetch has a 15s timeout + a few seconds of JSDOM
+ * parse overhead; anything past 25s on the wire is almost certainly a
+ * dead server or a stuck network path, not a slow article. Without
+ * this, AddUrlForm's loader just sat there forever when the API was
+ * unreachable — hence the bookmarklet-lands-on-loader bug.
+ */
+const EXTRACT_TIMEOUT_MS = 25_000;
+
 export async function extractArticle(
 	url: string,
 	fetchImpl: typeof fetch = fetch
 ): Promise<ExtractedArticle> {
-	const response = await fetchImpl(`${getManaApiUrl()}/api/v1/articles/extract`, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-			...(await authHeader()),
-		},
-		body: JSON.stringify({ url }),
-	});
+	let response: Response;
+	try {
+		response = await fetchImpl(`${getManaApiUrl()}/api/v1/articles/extract`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				...(await authHeader()),
+			},
+			body: JSON.stringify({ url }),
+			signal: AbortSignal.timeout(EXTRACT_TIMEOUT_MS),
+		});
+	} catch (err) {
+		if (err instanceof DOMException && err.name === 'TimeoutError') {
+			throw new Error(
+				`Server antwortet nicht (nach ${EXTRACT_TIMEOUT_MS / 1000}s). Läuft apps/api?`
+			);
+		}
+		if (err instanceof TypeError) {
+			// Network-layer failure (connection refused, DNS, offline).
+			throw new Error(
+				`Server nicht erreichbar. Prüf dass apps/api läuft — pnpm run mana:dev startet beides.`
+			);
+		}
+		throw err;
+	}
 	if (!response.ok) {
 		const text = await response.text();
 		throw new Error(`extractArticle failed: ${response.status} ${text}`);
 	}
 	return (await response.json()) as ExtractedArticle;
 }
+
+/**
+ * Extract from a HTML payload the browser already has. Used by the
+ * bookmarklet-v2 flow — the user's browser already dealt with the
+ * cookie-consent wall, so we skip the server-side fetch entirely.
+ *
+ * The HTML cap is 10 MiB on the server; the browser sends
+ * `document.documentElement.outerHTML` which for typical article
+ * pages is 200-800 KB, well under the limit.
+ */
+export async function extractFromHtml(
+	url: string,
+	html: string,
+	fetchImpl: typeof fetch = fetch
+): Promise<ExtractedArticle> {
+	let response: Response;
+	try {
+		response = await fetchImpl(`${getManaApiUrl()}/api/v1/articles/extract/html`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				...(await authHeader()),
+			},
+			body: JSON.stringify({ url, html }),
+			signal: AbortSignal.timeout(EXTRACT_TIMEOUT_MS),
+		});
+	} catch (err) {
+		if (err instanceof DOMException && err.name === 'TimeoutError') {
+			throw new Error(
+				`Server antwortet nicht (nach ${EXTRACT_TIMEOUT_MS / 1000}s). Läuft apps/api?`
+			);
+		}
+		if (err instanceof TypeError) {
+			throw new Error(
+				`Server nicht erreichbar. Prüf dass apps/api läuft — pnpm run mana:dev startet beides.`
+			);
+		}
+		throw err;
+	}
+	if (!response.ok) {
+		const text = await response.text();
+		throw new Error(`extractFromHtml failed: ${response.status} ${text}`);
+	}
+	return (await response.json()) as ExtractedArticle;
+}
diff --git a/apps/mana/apps/web/src/lib/modules/articles/components/AddUrlForm.svelte b/apps/mana/apps/web/src/lib/modules/articles/components/AddUrlForm.svelte
index 62fe91ee7..959454e0f 100644
--- a/apps/mana/apps/web/src/lib/modules/articles/components/AddUrlForm.svelte
+++ b/apps/mana/apps/web/src/lib/modules/articles/components/AddUrlForm.svelte
@@ -1,28 +1,25 @@
 <!--
-  AddUrlForm — paste URL → preview → save.
+  AddUrlForm — three paths in, one preview/save UI out:
 
-  Flow:
-    1. User pastes (or types) a URL, OR the page is opened with a URL
-       pre-filled via query string (?url=… / ?text=… / ?title=…). The
-       Web Share Target + bookmarklet both land here that way.
-    2. On "Vorschau abrufen": check scope-local dedupe first; if found,
-       offer "öffnen" instead of re-extracting (saves one round-trip).
-       Otherwise call /api/v1/articles/extract and render the preview.
-    3. On "Speichern": the already-extracted payload is persisted via
-       articlesStore.saveFromExtracted — no second server call.
-    4. Navigate into the new article so the user lands directly in the
-       reader view.
+    1. User types / pastes a URL manually.
+    2. `?url=…` query (Web Share Target, bookmarklet v1) — auto-fills
+       the input and triggers server-side fetch + Readability.
+    3. `?source=bookmarklet` (bookmarklet v2) — waits for the opener
+       tab to postMessage the rendered HTML over, then runs the
+       browser-HTML extract path. This bypasses cookie-consent walls
+       and soft paywalls because the HTML already came from the user's
+       own authenticated session.
 
-  Pre-filled URLs auto-trigger the preview on mount so the three-click
-  "share from browser → saved" flow really is three clicks: share →
-  pick Mana → hit "In Leseliste speichern".
+  If the server-side extract returns `warning: 'probable_consent_wall'`
+  we keep the preview but add a prominent CTA suggesting the user try
+  the browser-HTML path instead.
 -->
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { articlesStore } from '../stores/articles.svelte';
-	import { extractArticle, type ExtractedArticle } from '../api';
+	import { extractArticle, extractFromHtml, type ExtractedArticle } from '../api';
 	import type { Article } from '../types';
 
 	let url = $state('');
@@ -49,8 +46,103 @@
 		return m ? m[0] : '';
 	}
 
+	// ─── Bookmarklet-v2 handshake ─────────────────────────
+	//
+	// When the settings bookmarklet opens Mana with ?source=bookmarklet,
+	// the opener tab wants to push its rendered HTML over via
+	// postMessage so we can extract WITH the user's cookies/consent
+	// already applied. Protocol:
+	//
+	//   Mana (us)            Opener (the article site)
+	//    │                    │
+	//    │  mana-ready        │
+	//    │ ─────────────────→ │
+	//    │                    │
+	//    │        mana-html   │
+	//    │ ←───────────────── │   { url, html, title }
+	//    │                    │
+	//
+	// We only TRUST the `html` payload — we don't navigate using it, we
+	// hand it to our own backend at /api/v1/articles/extract/html which
+	// sanitises via Readability. Origin of the sender is free to be
+	// anything (that's the whole point) so we don't gate on it.
+
+	let messageHandler: ((e: MessageEvent) => void) | null = null;
+	let bookmarkletTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	async function handleBookmarkletHtml(payload: { url: string; html: string; title?: string }) {
+		const trimmed = payload.url.trim();
+		if (!trimmed) {
+			error = 'Bookmarklet hat keine URL mitgeschickt.';
+			return;
+		}
+		url = trimmed;
+		reset();
+		loading = true;
+		try {
+			const alreadySaved = await articlesStore.findByUrl(trimmed);
+			if (alreadySaved) {
+				duplicate = alreadySaved;
+				return;
+			}
+			const extracted = await extractFromHtml(trimmed, payload.html);
+			await persistOrShowWarning(extracted);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Extraktion fehlgeschlagen.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function armBookmarkletHandshake() {
+		if (typeof window === 'undefined') return;
+		messageHandler = (e: MessageEvent) => {
+			const data = e.data as { type?: string; url?: string; html?: string; title?: string } | null;
+			if (
+				!data ||
+				data.type !== 'mana-html' ||
+				typeof data.url !== 'string' ||
+				typeof data.html !== 'string'
+			) {
+				return;
+			}
+			// One-shot — disarm so a misbehaving parent can't flood us.
+			if (messageHandler) window.removeEventListener('message', messageHandler);
+			messageHandler = null;
+			if (bookmarkletTimeout) {
+				clearTimeout(bookmarkletTimeout);
+				bookmarkletTimeout = null;
+			}
+			void handleBookmarkletHtml({ url: data.url, html: data.html, title: data.title });
+		};
+		window.addEventListener('message', messageHandler);
+		// Tell the opener we're ready to receive. targetOrigin '*' is fine
+		// here — the payload in THIS direction is just a readiness ping,
+		// no data worth origin-gating.
+		try {
+			window.opener?.postMessage({ type: 'mana-ready' }, '*');
+		} catch {
+			// Opener may be cross-origin closed — fall through to timeout.
+		}
+		// Bail out if nothing arrives within 30s so the UI doesn't sit
+		// spinning forever when the user re-opened this page from a stale
+		// bookmarklet-v2 link without an opener tab.
+		loading = true;
+		bookmarkletTimeout = setTimeout(() => {
+			if (loading && !preview && !duplicate && !error) {
+				loading = false;
+				error =
+					'Bookmarklet-Handshake ist fehlgeschlagen. Öffne das Bookmarklet aus dem Browser-Tab in dem der Artikel läuft.';
+			}
+		}, 30_000);
+	}
+
 	onMount(() => {
 		const params = $page.url.searchParams;
+		if (params.get('source') === 'bookmarklet') {
+			armBookmarkletHandshake();
+			return;
+		}
 		const fromUrl = params.get('url')?.trim() ?? '';
 		const fromText = params.get('text')?.trim() ?? '';
 		const candidate = fromUrl || firstUrl(fromText);
@@ -58,7 +150,18 @@
 			url = candidate;
 			// Fire-and-forget — the handler is idempotent enough that a
 			// stray second click does no harm.
-			void handlePreview();
+			void handleSubmit();
+		}
+	});
+
+	onDestroy(() => {
+		if (messageHandler && typeof window !== 'undefined') {
+			window.removeEventListener('message', messageHandler);
+			messageHandler = null;
+		}
+		if (bookmarkletTimeout) {
+			clearTimeout(bookmarkletTimeout);
+			bookmarkletTimeout = null;
 		}
 	});
 
@@ -68,7 +171,7 @@
 		error = null;
 	}
 
-	async function handlePreview() {
+	async function handleSubmit() {
 		reset();
 		const trimmed = url.trim();
 		if (!trimmed) {
@@ -89,7 +192,8 @@
 				duplicate = alreadySaved;
 				return;
 			}
-			preview = await extractArticle(trimmed);
+			const extracted = await extractArticle(trimmed);
+			await persistOrShowWarning(extracted);
 		} catch (e) {
 			error = e instanceof Error ? e.message : 'Extraktion fehlgeschlagen.';
 		} finally {
@@ -97,23 +201,43 @@
 		}
 	}
 
-	async function handleSave() {
-		if (!preview) return;
+	/**
+	 * Normal path: extract succeeded cleanly → persist + navigate to the
+	 * reader so the user never has to press a second "Save" button.
+	 * Fallback: if the server flagged a probable consent wall, stop and
+	 * surface the preview + warning card so the user can decide whether
+	 * to keep the teaser anyway or re-save via the HTML bookmarklet.
+	 */
+	async function persistOrShowWarning(extracted: ExtractedArticle) {
+		if (extracted.warning === 'probable_consent_wall') {
+			preview = extracted;
+			return;
+		}
+		await persistAndGo(extracted);
+	}
+
+	async function persistAndGo(extracted: ExtractedArticle) {
 		saving = true;
 		try {
-			const saved = await articlesStore.saveFromExtracted(preview);
+			const saved = await articlesStore.saveFromExtracted(extracted);
 			goto(`/articles/${saved.id}`);
 		} catch (e) {
 			error = e instanceof Error ? e.message : 'Speichern fehlgeschlagen.';
 			saving = false;
 		}
 	}
+
+	/** Consent-wall path only: user saw the warning and still wants to keep this. */
+	async function saveDespiteWarning() {
+		if (!preview) return;
+		await persistAndGo(preview);
+	}
 </script>
 
 <div class="add-shell">
 	<header class="header">
 		<h1>Artikel speichern</h1>
-		<p class="subtitle">URL einfügen, Vorschau prüfen, speichern.</p>
+		<p class="subtitle">URL einfügen — Mana extrahiert + speichert direkt.</p>
 	</header>
 
 	<div class="input-row">
@@ -122,16 +246,33 @@
 			class="url-input"
 			bind:value={url}
 			placeholder="https://…"
+			disabled={loading || saving}
 			onkeydown={(e) => {
-				if (e.key === 'Enter') handlePreview();
+				if (e.key === 'Enter') handleSubmit();
 			}}
 			use:focusOnMount
 		/>
-		<button type="button" class="primary" disabled={loading} onclick={handlePreview}>
-			{loading ? 'Lädt…' : 'Vorschau abrufen'}
+		<button type="button" class="primary" disabled={loading || saving} onclick={handleSubmit}>
+			{#if saving}Speichere…{:else if loading}Lädt…{:else}Speichern{/if}
 		</button>
 	</div>
 
+	{#if (loading || saving) && !error && !preview && !duplicate}
+		<div class="loading-block" role="status">
+			<span class="spinner" aria-hidden="true"></span>
+			<div class="loading-text">
+				<p class="loading-headline">
+					{saving ? 'Speichere in deine Leseliste…' : 'Server extrahiert den Artikel…'}
+				</p>
+				<p class="loading-sub">
+					{saving
+						? 'Gleich weiter zum Reader.'
+						: 'Dauert normalerweise 2–5 Sekunden. Nach 25 Sekunden geben wir auf.'}
+				</p>
+			</div>
+		</div>
+	{/if}
+
 	{#if error}
 		<p class="error">{error}</p>
 	{/if}
@@ -150,6 +291,25 @@
 	{/if}
 
 	{#if preview}
+		<!--
+		  Preview-Karte erscheint nur noch im Warning-Fall (Consent-Wall).
+		  Happy-Path geht direkt zu persistAndGo() und navigiert weg, bevor
+		  das Template diesen Block überhaupt rendert.
+		-->
+		<div class="consent-warning" role="alert">
+			<p class="cw-headline">Cookie-Wand erkannt</p>
+			<p class="cw-body">
+				Der Server hat wahrscheinlich nicht den Artikel bekommen, sondern nur den
+				Cookie-Zustimmungs-Dialog der Seite — er hat keine Session / Cookies. Lösung: das
+				<strong>Browser-HTML-Bookmarklet</strong> aus
+				<a href="/articles/settings">Einstellungen</a> benutzen. Läuft in deinem Tab wo du schon zugestimmt
+				hast und schickt Mana das echte Artikel-HTML.
+			</p>
+			<p class="cw-body cw-body-muted">
+				Falls du den Teaser trotzdem speichern willst — OK, kannst du später nochmal mit dem
+				HTML-Bookmarklet überschreiben.
+			</p>
+		</div>
 		<article class="preview">
 			<h2 class="preview-title">{preview.title}</h2>
 			<div class="preview-meta">
@@ -162,8 +322,8 @@
 				<p class="preview-excerpt">{preview.excerpt}</p>
 			{/if}
 			<div class="preview-actions">
-				<button type="button" class="primary" disabled={saving} onclick={handleSave}>
-					{saving ? 'Speichere…' : 'In Leseliste speichern'}
+				<button type="button" class="primary" disabled={saving} onclick={saveDespiteWarning}>
+					{saving ? 'Speichere…' : 'Trotzdem speichern'}
 				</button>
 				<button type="button" class="secondary" onclick={reset} disabled={saving}>
 					Abbrechen
@@ -246,6 +406,71 @@
 		color: #ef4444;
 		font-size: 0.9rem;
 	}
+	.loading-block {
+		display: flex;
+		gap: 0.8rem;
+		align-items: center;
+		padding: 0.75rem 0.95rem;
+		border-radius: 0.55rem;
+		border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
+		background: color-mix(in srgb, #f97316 5%, transparent);
+	}
+	.spinner {
+		width: 1rem;
+		height: 1rem;
+		border-radius: 50%;
+		border: 2px solid color-mix(in srgb, #f97316 30%, transparent);
+		border-top-color: #f97316;
+		animation: spin 0.8s linear infinite;
+		flex-shrink: 0;
+	}
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	.loading-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+	}
+	.loading-headline {
+		margin: 0;
+		font-weight: 500;
+		font-size: 0.92rem;
+	}
+	.loading-sub {
+		margin: 0;
+		color: var(--color-text-muted, #64748b);
+		font-size: 0.82rem;
+	}
+	.consent-warning {
+		margin-top: 1rem;
+		padding: 0.85rem 1rem;
+		border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
+		border-radius: 0.55rem;
+		background: color-mix(in srgb, #f59e0b 8%, transparent);
+	}
+	.cw-headline {
+		margin: 0 0 0.35rem 0;
+		font-weight: 600;
+		font-size: 0.95rem;
+	}
+	.cw-body {
+		margin: 0 0 0.45rem 0;
+		font-size: 0.88rem;
+		line-height: 1.5;
+	}
+	.cw-body:last-child {
+		margin-bottom: 0;
+	}
+	.cw-body-muted {
+		color: var(--color-text-muted, #64748b);
+	}
+	.consent-warning a {
+		color: #ea580c;
+		text-decoration: underline;
+	}
 	.preview,
 	.duplicate {
 		margin-top: 1rem;
diff --git a/apps/mana/apps/web/src/routes/(app)/articles/settings/+page.svelte b/apps/mana/apps/web/src/routes/(app)/articles/settings/+page.svelte
index 339f1f790..4685e9449 100644
--- a/apps/mana/apps/web/src/routes/(app)/articles/settings/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/articles/settings/+page.svelte
@@ -1,47 +1,78 @@
 <!--
   /articles/settings — collection of "how to save faster" tips.
 
-  Two surfaces today:
+  Three surfaces today:
 
-   1. Bookmarklet — one-click save from any desktop browser. The user
-      drags the button into their bookmarks bar; clicking it opens
-      /articles/add?url=<current-page> in a new tab.
+   1. Browser-HTML-Bookmarklet (v2) — recommended. Reads the rendered
+      HTML from the user's browser tab + postMessages it to a new Mana
+      tab which runs Readability on that HTML. Works on cookie-walled
+      sites (Golem, Spiegel, Zeit, Heise) and soft paywalls because it
+      uses the user's already-authenticated session.
 
-   2. Share Target — installed PWA appears in the OS share sheet on
-      Android / Chromium desktop. Same landing route as the bookmarklet.
+   2. URL-Bookmarklet (v1) — legacy. Opens /articles/add?url=<page>,
+      the server does an anonymous fetch. Fails on GDPR-walled sites
+      (see AddUrlForm's "probable_consent_wall" warning). Kept because
+      it's a single click for sites where it works, and cross-browser
+      stable.
 
-  Both end up in AddUrlForm, which reads the ?url / ?text / ?title query
-  params, auto-triggers the Readability preview, and drops the user one
-  click away from "In Leseliste speichern".
+   3. Share-Target — installed PWA appears in the Android / Chromium
+      share sheet. Uses the same URL path as v1.
 -->
 <script lang="ts">
 	import { onMount } from 'svelte';
 
 	// `origin` at render time — server-side rendering has no window, so
-	// we read it client-side after mount. The bookmarklet embeds the
-	// origin so the JavaScript URL works from any other origin's bookmark
-	// bar.
+	// we read it client-side after mount. The bookmarklets embed the
+	// origin so the JavaScript URLs work from any other origin's
+	// bookmark bar.
 	let origin = $state('');
 	onMount(() => {
 		origin = window.location.origin;
 	});
 
-	const bookmarklet = $derived(
+	// Bookmarklet v1 — quick path for sites without consent walls.
+	// Single call: open new tab with ?url=<current page>; server fetches.
+	const bookmarkletV1 = $derived(
 		origin
 			? `javascript:void(window.open('${origin}/articles/add?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank'))`
 			: ''
 	);
 
-	let copyLabel = $state('Snippet kopieren');
+	// Bookmarklet v2 — browser-HTML path. Reads the rendered DOM from
+	// the user's current tab (with all cookies + consent applied), opens
+	// /articles/add?source=bookmarklet in a new tab, and postMessages
+	// the HTML over. The new tab's AddUrlForm is the authoritative
+	// receiver: it POSTs the HTML to /api/v1/articles/extract/html over
+	// its own same-origin authenticated channel. No cross-origin CORS,
+	// no token sharing, no form-submission CSP issues. Includes a 15s
+	// safety timeout in case the new tab never comes up.
+	//
+	// The snippet is intentionally compact — browsers truncate bookmark
+	// URLs at different lengths (Chrome/Firefox handle ~64 KiB fine,
+	// Safari is stricter) so readable JS compresses well here.
+	const bookmarkletV2 = $derived(
+		origin
+			? `javascript:(()=>{var h=document.documentElement.outerHTML,u=location.href,t=document.title,w=window.open('${origin}/articles/add?source=bookmarklet','_blank'),d=0;if(!w){alert('Mana: Popup blockiert');return}var m=function(e){if(e.source!==w)return;if(e.data&&e.data.type==='mana-ready'){w.postMessage({type:'mana-html',url:u,html:h,title:t},'*');window.removeEventListener('message',m);d=1}};window.addEventListener('message',m);setTimeout(function(){if(!d){window.removeEventListener('message',m);alert('Mana antwortet nicht — Tab geöffnet?')}},15000)})()`
+			: ''
+	);
 
-	async function copySnippet() {
-		if (!bookmarklet) return;
+	let copyV1Label = $state('Snippet kopieren');
+	let copyV2Label = $state('Snippet kopieren');
+
+	async function copySnippet(value: string, which: 'v1' | 'v2') {
+		if (!value) return;
 		try {
-			await navigator.clipboard.writeText(bookmarklet);
-			copyLabel = 'Kopiert ✓';
-			setTimeout(() => (copyLabel = 'Snippet kopieren'), 1500);
+			await navigator.clipboard.writeText(value);
+			if (which === 'v1') {
+				copyV1Label = 'Kopiert ✓';
+				setTimeout(() => (copyV1Label = 'Snippet kopieren'), 1500);
+			} else {
+				copyV2Label = 'Kopiert ✓';
+				setTimeout(() => (copyV2Label = 'Snippet kopieren'), 1500);
+			}
 		} catch {
-			copyLabel = 'Fehler — bitte manuell kopieren';
+			if (which === 'v1') copyV1Label = 'Fehler — bitte manuell kopieren';
+			else copyV2Label = 'Fehler — bitte manuell kopieren';
 		}
 	}
 </script>
@@ -56,37 +87,76 @@
 		<p class="subtitle">Schnellwege, um Artikel aus dem Browser in die Leseliste zu bekommen.</p>
 	</header>
 
-	<section class="card">
-		<h2>Bookmarklet</h2>
+	<section class="card card-recommended">
+		<div class="badge">Empfohlen</div>
+		<h2>Browser-HTML-Bookmarklet</h2>
 		<p>
-			Zieh den Button unten in deine Lesezeichen-Leiste. Ein Klick auf einer beliebigen Webseite
-			öffnet
-			<code>/articles/add</code> mit der aktuellen URL vorausgefüllt — du bestätigst nur noch die Vorschau.
+			Dieses Bookmarklet nimmt den <strong>schon gerenderten HTML-Inhalt</strong> aus deinem Browser-Tab
+			(inkl. aller Cookies, die du gesetzt hast) und schickt ihn an Mana. Damit klappen auch Seiten mit
+			Cookie-Wänden (Golem, Spiegel, Zeit, Heise …) und weichen Paywalls.
 		</p>
 		<div class="bookmarklet-row">
-			<!-- The anchor IS the bookmarklet: its href is the javascript: -->
-			<!-- snippet. We sanity-check it client-side (origin-prefixed and -->
-			<!-- opens a new tab) before persisting state, so there's no XSS -->
-			<!-- surface here beyond what the browser already allows on any -->
-			<!-- javascript: bookmark. -->
-			{#if bookmarklet}
-				<a class="bookmarklet" href={bookmarklet} onclick={(e) => e.preventDefault()}>
-					+ In Mana speichern
+			{#if bookmarkletV2}
+				<a class="bookmarklet" href={bookmarkletV2} onclick={(e) => e.preventDefault()}>
+					+ In Mana speichern (HTML)
 				</a>
 			{:else}
 				<span class="muted">Bookmarklet wird geladen…</span>
 			{/if}
-			<button type="button" class="copy-btn" onclick={copySnippet} disabled={!bookmarklet}>
-				{copyLabel}
+			<button
+				type="button"
+				class="copy-btn"
+				onclick={() => copySnippet(bookmarkletV2, 'v2')}
+				disabled={!bookmarkletV2}
+			>
+				{copyV2Label}
 			</button>
 		</div>
 		<details class="snippet-details">
 			<summary>Quellcode anzeigen</summary>
-			<pre class="snippet">{bookmarklet}</pre>
+			<pre class="snippet">{bookmarkletV2}</pre>
 		</details>
 		<p class="hint">
-			Funktioniert in jedem Desktop-Browser. In Safari: Lesezeichen anlegen mit einer beliebigen
-			URL, dann nachträglich die URL durch das Snippet ersetzen.
+			Öffnet einen neuen Tab mit Mana, der Mana-Tab bekommt das HTML per
+			<code>postMessage</code> von deinem Artikel-Tab. Braucht erlaubte Popups für diese Domain (Browser
+			fragt beim ersten Mal).
+		</p>
+	</section>
+
+	<section class="card">
+		<h2>URL-Bookmarklet (klassisch)</h2>
+		<p>
+			Schickt nur die URL an Mana, der Server lädt + extrahiert dann selbst. Schnell auf einfachen
+			Blogs / Wikis; scheitert auf Seiten hinter DSGVO-Zustimmungs-Dialogen.
+		</p>
+		<div class="bookmarklet-row">
+			{#if bookmarkletV1}
+				<a
+					class="bookmarklet bookmarklet-secondary"
+					href={bookmarkletV1}
+					onclick={(e) => e.preventDefault()}
+				>
+					+ In Mana speichern (URL)
+				</a>
+			{:else}
+				<span class="muted">Bookmarklet wird geladen…</span>
+			{/if}
+			<button
+				type="button"
+				class="copy-btn"
+				onclick={() => copySnippet(bookmarkletV1, 'v1')}
+				disabled={!bookmarkletV1}
+			>
+				{copyV1Label}
+			</button>
+		</div>
+		<details class="snippet-details">
+			<summary>Quellcode anzeigen</summary>
+			<pre class="snippet">{bookmarkletV1}</pre>
+		</details>
+		<p class="hint">
+			Funktioniert in jedem Desktop-Browser. In Safari: Lesezeichen mit beliebiger URL anlegen und
+			die URL dann durch das Snippet ersetzen.
 		</p>
 	</section>
 
@@ -98,7 +168,9 @@
 			auswählen → Artikel wird direkt in der Leseliste vorgeschlagen.
 		</p>
 		<p class="hint">
-			iOS-Safari unterstützt die Web-Share-Target-API derzeit nicht — nutze dort das Bookmarklet.
+			Benutzt dieselbe URL-Route wie das klassische Bookmarklet oben — für cookie-gewalled Seiten
+			lieber das HTML-Bookmarklet verwenden. iOS-Safari unterstützt die Web-Share-Target-API derzeit
+			nicht.
 		</p>
 	</section>
 </div>
@@ -126,6 +198,32 @@
 		border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
 		border-radius: 0.75rem;
 		background: var(--color-surface, transparent);
+		position: relative;
+	}
+	.card-recommended {
+		border-color: color-mix(in srgb, #f97316 50%, transparent);
+		background: color-mix(in srgb, #f97316 4%, transparent);
+	}
+	.badge {
+		position: absolute;
+		top: -0.55rem;
+		left: 1rem;
+		padding: 0.15rem 0.55rem;
+		border-radius: 999px;
+		background: #f97316;
+		color: white;
+		font-size: 0.72rem;
+		font-weight: 600;
+		letter-spacing: 0.03em;
+		text-transform: uppercase;
+	}
+	.bookmarklet-secondary {
+		background: transparent;
+		color: #f97316;
+		border: 1px solid #f97316;
+	}
+	.bookmarklet-secondary:hover {
+		background: color-mix(in srgb, #f97316 10%, transparent);
 	}
 	.card h2 {
 		margin: 0 0 0.5rem 0;