Index: src/assets/css/ward.css
===================================================================
--- src/assets/css/ward.css	(revision 303bfc4daeb122010e84e14370b612f2e7e286f4)
+++ src/assets/css/ward.css	(revision a5a62490bec7673afe4e4c5c788f48466eb96b8b)
@@ -43,2 +43,45 @@
 .note.alarm { background: rgba(239,159,39,.16); color: var(--alarm); }
 .note.unknown { background: rgba(154,167,187,.14); color: var(--dim); }
+
+/* ── De feed ──────────────────────────────────────────────────────────── */
+.cards { display: grid; gap: 12px; }
+.post { background: var(--card); border-radius: 12px; padding: 12px 14px; border: 2px solid transparent; }
+.post .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
+.post .when { margin-left: auto; color: var(--dim); font-size: .8rem; }
+.post .cw { color: var(--alarm); font-size: .85rem; margin: 6px 0 0; }
+.post .body { margin-top: 8px; overflow-wrap: anywhere; }
+.post .body img, .post .body video { max-width: 100%; height: auto; border-radius: 8px; }
+/* Waar de boei zou landen. Zichtbaar oplichten, want mikken met een vinger
+   zonder terugkoppeling is gokken. */
+.post.hover { border-color: var(--accent); }
+
+/* ── De reddingsboei ──────────────────────────────────────────────────── */
+#buoy {
+  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
+  width: 76px; height: 76px; border: 0; border-radius: 50%;
+  background: transparent; font-size: 52px; line-height: 1;
+  /* Zonder dit vecht slepen met scrollen en verlies je hem halverwege. */
+  touch-action: none; cursor: grab; z-index: 50;
+}
+#buoy.dragging { cursor: grabbing; transform: scale(1.1); }
+
+dialog#help-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 420px; width: calc(100% - 32px);
+  background: var(--card); color: var(--ink);
+}
+dialog#help-dialog::backdrop { background: rgba(0,0,0,.5); }
+dialog#help-dialog h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink); }
+dialog#help-dialog label { display: block; color: var(--dim); font-size: .85rem; margin-bottom: 4px; }
+dialog#help-dialog textarea {
+  width: 100%; border-radius: 10px; border: 1px solid #2a3342;
+  background: #131a25; color: var(--ink); padding: 8px; font: inherit;
+}
+dialog#help-dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 0; padding: 0; }
+dialog#help-dialog button { border: 0; border-radius: 10px; padding: 10px 14px; background: #2a3342; color: var(--ink); font: inherit; }
+dialog#help-dialog button.primary { background: var(--accent); color: #fff; font-weight: 600; }
+
+/* Voor schermlezers, niet voor het oog. */
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
Index: src/assets/js/ward.js
===================================================================
--- src/assets/js/ward.js	(revision 303bfc4daeb122010e84e14370b612f2e7e286f4)
+++ src/assets/js/ward.js	(revision a5a62490bec7673afe4e4c5c788f48466eb96b8b)
@@ -98,4 +98,121 @@
 }
 
+/**
+ * De kaarten. De body komt AF van de server (dezelfde partial als de Krant),
+ * dus hier alleen invoegen; zelf HTML samenstellen zou opmaak, media en
+ * quote-kaarten opnieuw moeten uitvinden en er anders uit laten zien.
+ */
+function renderFeed(items) {
+  const box = document.getElementById('card-list');
+  box.replaceChildren();
+  document.getElementById('feed-empty').hidden = items.length > 0;
+
+  items.forEach((it) => {
+    const card = el('article', 'post');
+    card.dataset.note = it.id;              // waar de boei op mikt
+    const head = el('div', 'row');
+    if (it.authorIcon) {
+      const img = el('img', 'avatar');
+      img.src = it.authorIcon; img.alt = ''; img.loading = 'lazy';
+      head.append(img);
+    }
+    head.append(el('span', 'name', it.authorName || it.author));
+    head.append(el('span', 'when', it.whenText || ''));
+    card.append(head);
+
+    if (it.cw) card.append(el('p', 'cw', it.cw));
+    const body = el('div', 'body');
+    body.innerHTML = it.bodyHtml || '';     // server-gerenderd en gesaniteerd
+    card.append(body);
+    box.append(card);
+  });
+}
+
+async function loadFeed() {
+  try {
+    const r = await fetch('/ward/api/feed', { headers: { Accept: 'application/json' } });
+    if (!r.ok) return;
+    renderFeed((await r.json()).items || []);
+  } catch { /* de pagina blijft staan met wat er al is */ }
+}
+
+/**
+ * De reddingsboei: sleep hem op een kaart en je guardians krijgen die post.
+ *
+ * Pointer-events in plaats van muis- of touch-events apart, want dat is het
+ * enige dat op een telefoon en met een muis hetzelfde doet. `setPointerCapture`
+ * zorgt dat de sleep van jou blijft, en `touch-action: none` op de boei houdt
+ * de pagina stil terwijl je hem verplaatst: zonder dat vecht het slepen met
+ * scrollen en verlies je hem halverwege.
+ */
+function wireBuoy() {
+  const buoy = document.getElementById('buoy');
+  const dlg = document.getElementById('help-dialog');
+  let dragging = false, dx = 0, dy = 0, target = null;
+
+  const cardUnder = (x, y) => document.elementFromPoint(x, y)?.closest('.post');
+
+  buoy.addEventListener('pointerdown', (e) => {
+    dragging = true;
+    buoy.setPointerCapture(e.pointerId);
+    const r = buoy.getBoundingClientRect();
+    dx = e.clientX - r.left; dy = e.clientY - r.top;
+    buoy.classList.add('dragging');
+  });
+
+  buoy.addEventListener('pointermove', (e) => {
+    if (!dragging) return;
+    buoy.style.left = `${e.clientX - dx}px`;
+    buoy.style.top = `${e.clientY - dy}px`;
+    buoy.style.right = 'auto'; buoy.style.bottom = 'auto';
+    // Onderweg oplichten waar hij zou landen, zodat je ziet wat je kiest.
+    document.querySelectorAll('.post.hover').forEach((n) => n.classList.remove('hover'));
+    cardUnder(e.clientX, e.clientY)?.classList.add('hover');
+  });
+
+  const drop = (e) => {
+    if (!dragging) return;
+    dragging = false;
+    buoy.classList.remove('dragging');
+    const card = cardUnder(e.clientX, e.clientY);
+    document.querySelectorAll('.post.hover').forEach((n) => n.classList.remove('hover'));
+    // Terug naar zijn hoek: de boei hoort altijd op dezelfde plek te liggen.
+    buoy.style.left = buoy.style.top = 'auto';
+    buoy.style.right = ''; buoy.style.bottom = '';
+    if (card) askHelp(card.dataset.note, card.querySelector('.name')?.textContent || '');
+  };
+  buoy.addEventListener('pointerup', drop);
+  buoy.addEventListener('pointercancel', drop);
+
+  // Een tik (zonder slepen) vraagt hulp zonder dat er een post bij hoort.
+  buoy.addEventListener('click', (e) => { if (!e.detail || !dragging) askHelp(null, null); });
+
+  function askHelp(noteId, who) {
+    document.getElementById('help-title').textContent = who
+      ? `Hulp vragen bij het bericht van ${who}?` : 'Hulp vragen aan je guardians?';
+    dlg.dataset.note = noteId || '';
+    document.getElementById('help-words').value = '';
+    dlg.showModal();
+  }
+
+  dlg.addEventListener('close', async () => {
+    if (dlg.returnValue !== 'send') return;
+    const body = { note: dlg.dataset.note || undefined, words: document.getElementById('help-words').value };
+    const hint = document.getElementById('help-hint');
+    try {
+      const r = await fetch('/ward/api/help', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const out = await r.json().catch(() => ({}));
+      hint.textContent = r.ok ? state.strings.helpSent
+        : (out.error === 'no_guardians' ? 'Je hebt nog geen guardians om te vragen.' : 'Dat lukte niet; probeer het nog eens.');
+    } catch {
+      hint.textContent = 'Dat lukte niet; probeer het nog eens.';
+    }
+  });
+}
+
 /** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
 async function loadChecks() {
@@ -118,7 +235,10 @@
   }
   hint.textContent = `Gaat naar ${state.guardians.length} guardian(s).`;
+  btn.addEventListener('click', () => document.getElementById('buoy').click());
 }
 
 renderGuardians(null);
+wireBuoy();
+loadFeed();
 renderOffers();
 renderWaiting();