diff --git a/pruef-verwaltung.mjs b/pruef-verwaltung.mjs
new file mode 100644
index 00000000..2455054f
--- /dev/null
+++ b/pruef-verwaltung.mjs
@@ -0,0 +1,256 @@
+/* Prüft die neuen Bereiche der Verwaltung: Projekte mit Aufgabenliste
+   und das Postfach. Wieder mit abgefangenen Netzanfragen, aber mit
+   Daten, die den heiklen Faellen entsprechen:
+
+     - ein Punkt, der auf den KUNDEN wartet (muss auffallen)
+     - ein Punkt "nicht enthalten" (muss als solcher erkennbar sein)
+     - eine INTERNE Notiz im Postfach (darf nicht wie eine gesendete
+       Nachricht aussehen)
+*/
+import { chromium } from "playwright";
+import { createServer } from "node:http";
+import { readFileSync, existsSync } from "node:fs";
+import { join, extname } from "node:path";
+
+const W = process.cwd();
+const T = { ".html": "text/html", ".css": "text/css", ".js": "text/javascript",
+  ".png": "image/png", ".jpg": "image/jpeg", ".svg": "image/svg+xml",
+  ".webp": "image/webp", ".ico": "image/x-icon", ".json": "application/json" };
+const srv = createServer((q, r) => {
+  const p = join(W, decodeURIComponent(q.url.split("?")[0]));
+  if (existsSync(p) && !p.endsWith("/")) {
+    r.writeHead(200, { "content-type": T[extname(p)] || "text/plain" });
+    return r.end(readFileSync(p));
+  }
+  r.writeHead(404).end("");
+});
+await new Promise((r) => srv.listen(4325, r));
+
+const PROJEKT = {
+  id: "p1", nummer: "P-0001", titel: "Website für Musterbau", paket: "website",
+  status: "design", kunde_id: "k1", kunde_name: "Anna Muster", kunde_firma: "Musterbau",
+  preis_cent: 180000, waehrung: "EUR", richttermin: null, archiviert: 0,
+  anzahlung_bezahlt: 1, rest_bezahlt: 0, erstellt_am: new Date().toISOString(),
+  aufg_gesamt: 6, aufg_erledigt: 2, aufg_kunde: 2, ungelesen: 1,
+};
+
+const AUFGABEN = [
+  { id: "a1", titel: "Briefing-Gespräch führen", beschreibung: "Ziel und Umfang klären.",
+    kategorie: "start", status: "erledigt", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 10 },
+  { id: "a2", titel: "Texte und Bilder zusammenstellen", beschreibung: "Lieber früh als vollständig.",
+    kategorie: "start", status: "offen", wer_dran: "kunde", nicht_enthalten: 0, hinweis: null, reihenfolge: 20 },
+  { id: "a3", titel: "Entwurf der Startseite", beschreibung: null,
+    kategorie: "gestaltung", status: "erledigt", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 110 },
+  { id: "a4", titel: "Entwurf ansehen und Rückmeldung geben", beschreibung: null,
+    kategorie: "gestaltung", status: "offen", wer_dran: "kunde", nicht_enthalten: 0, hinweis: null, reihenfolge: 130 },
+  { id: "a5", titel: "Alle Unterseiten bauen", beschreibung: null,
+    kategorie: "umsetzung", status: "in_arbeit", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 210 },
+  { id: "a6", titel: "Mehrsprachigkeit", beschreibung: null,
+    kategorie: "umsetzung", status: "offen", wer_dran: "dogfather", nicht_enthalten: 1,
+    hinweis: "Nicht im Paket enthalten — auf Wunsch als Zusatz.", reihenfolge: 260 },
+  { id: "a7", titel: "Seite live schalten", beschreibung: null,
+    kategorie: "abschluss", status: "offen", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 860 },
+];
+
+const FORTSCHRITT = {
+  gesamt: 6, erledigt: 2, inArbeit: 1, beimKunden: 2, prozent: 33,
+  jeKategorie: {
+    start: { gesamt: 2, erledigt: 1, inArbeit: 0 },
+    gestaltung: { gesamt: 2, erledigt: 1, inArbeit: 0 },
+    umsetzung: { gesamt: 1, erledigt: 0, inArbeit: 1 },
+    abschluss: { gesamt: 1, erledigt: 0, inArbeit: 0 },
+  },
+};
+
+const VERLAUF = [
+  { id: "n1", autor: "kunde", text: "Hallo! Können wir das Logo noch etwas grösser machen?",
+    intern: 0, projekt_titel: null, erstellt_am: new Date(Date.now() - 7200000).toISOString() },
+  { id: "n2", autor: "dogfather", text: "Klar, mache ich heute noch.",
+    intern: 0, projekt_titel: "Website für Musterbau", erstellt_am: new Date(Date.now() - 3600000).toISOString() },
+  { id: "n3", autor: "dogfather", text: "Nicht vergessen: Rechnung erst nach Abnahme.",
+    intern: 1, projekt_titel: null, erstellt_am: new Date(Date.now() - 1800000).toISOString() },
+];
+
+const ergebnisse = [];
+function pruefe(name, ok, zusatz) {
+  ergebnisse.push({ name, ok });
+  console.log((ok ? "  ok   " : "  FEHL ") + name + (zusatz ? "  -> " + zusatz : ""));
+}
+
+const browser = await chromium.launch();
+
+for (const [wo, breite, hoehe] of [["Computer", 1440, 950], ["Handy", 390, 844]]) {
+  const seite = await browser.newPage({ viewport: { width: breite, height: hoehe } });
+  const fehlerImProtokoll = [];
+  seite.on("pageerror", (e) => fehlerImProtokoll.push(e.message));
+
+  // NUR die API abfangen. Ein Muster, das den ganzen Ordner /webdesign
+  // umfasst, trifft auch die Seite SELBST -- dann bekommt der Browser
+  // statt der HTML-Datei ein JSON serviert. Genau das ist beim ersten
+  // Lauf passiert: Die Seite blieb leer, und der Test meldete
+  // "Abzeichen fehlt" statt "Seite gar nicht geladen".
+  // (Und der Hinweis steht in Zeilenkommentaren, weil das Glob-Muster
+  //  ein Sternchen-Schrägstrich enthält und einen Blockkommentar
+  //  vorzeitig beenden würde -- auch das ist hier schon passiert.)
+  await seite.route("**/webdesign/admin/**", (route) => {
+    const u = route.request().url();
+    if (u.includes("/admin/projekte/p1/aufgaben")) {
+      return route.fulfill({ json: { ok: true, projekt: PROJEKT, aufgaben: AUFGABEN, fortschritt: FORTSCHRITT } });
+    }
+    if (u.includes("/admin/projekte")) return route.fulfill({ json: { ok: true, projekte: [PROJEKT] } });
+    if (u.includes("/admin/postfach-zaehler")) return route.fulfill({ json: { ok: true, ungelesen: 1 } });
+    if (u.includes("/admin/postfach/k1")) {
+      return route.fulfill({ json: { ok: true,
+        kunde: { id: "k1", name: "Anna Muster", email: "anna@example.com", sprache: "de" },
+        nachrichten: VERLAUF, projekte: [{ id: "p1", titel: "Website für Musterbau" }] } });
+    }
+    if (u.includes("/admin/postfach")) {
+      return route.fulfill({ json: { ok: true, ungelesen: 1, verlaeufe: [{
+        kunde_id: "k1", name: "Anna Muster", firma: "Musterbau", email: "anna@example.com",
+        anzahl: 3, ungelesen: 1, letzte: new Date(Date.now() - 1800000).toISOString(),
+        letzter_text: "Nicht vergessen: Rechnung erst nach Abnahme.", letzter_autor: "dogfather" }] } });
+    }
+    if (u.includes("/admin/anfragen")) return route.fulfill({ json: { ok: true, anfragen: [] } });
+    if (u.includes("/admin/kunden")) return route.fulfill({ json: { ok: true, kunden: [] } });
+    return route.fulfill({ json: { ok: true } });
+  });
+  await seite.route("**/auth/**", (r) => r.fulfill({ json: { ok: true, user: { name: "Test" } } }));
+  await seite.addInitScript(() => {
+    sessionStorage.setItem("wd-vw-token", "t");
+    sessionStorage.setItem("wd-sitzung-aktiv", "1");
+  });
+
+  await seite.goto("http://127.0.0.1:4325/webdesign/verwaltung.html");
+  await seite.waitForTimeout(900);
+  console.log("\n=== " + wo + " ===");
+
+  // Abzeichen am Reiter
+  const abz = await seite.locator("#vw-pf-zaehler").innerText().catch(() => "");
+  const abzSichtbar = await seite.locator("#vw-pf-zaehler").isVisible().catch(() => false);
+  pruefe(wo + ": Postfach-Abzeichen zeigt die ungelesene Nachricht", abzSichtbar && abz === "1", abz);
+
+  // ---- Projekte ----
+  await seite.click('[data-tab="projekte"]');
+  await seite.waitForTimeout(500);
+  pruefe(wo + ": Projektliste zeigt das Projekt", await seite.locator("[data-projekt]").count() === 1);
+  pruefe(wo + ": „wartet auf Kunde“ ist sichtbar", await seite.locator(".vw-wartet").count() === 1);
+
+  await seite.click("[data-projekt]");
+  await seite.waitForTimeout(600);
+
+  const m = await seite.evaluate(() => {
+    const gruppen = Array.from(document.querySelectorAll(".vw-aufg-gruppe")).map((g) => g.dataset.k);
+    const farben = Array.from(document.querySelectorAll(".vw-aufg-gruppe")).map((g) =>
+      getComputedStyle(g.querySelector(".vw-aufg-kopf")).color);
+    const balken = Array.from(document.querySelectorAll(".vw-fs-teil > i")).map((i) =>
+      getComputedStyle(i).backgroundColor);
+    const zeile = document.querySelector('[data-aufgabe="a2"]');
+    const normal = document.querySelector('[data-aufgabe="a5"]');
+    return {
+      gruppen, farben, balkenFarben: [...new Set(balken)].length,
+      kundenZeileAnders: zeile && normal
+        ? getComputedStyle(zeile).backgroundColor !== getComputedStyle(normal).backgroundColor : false,
+      nichtEnthalten: document.querySelectorAll(".vw-aufg-nicht").length,
+      haken: document.querySelectorAll(".vw-aufg-haken").length,
+      erledigtDurchgestrichen: getComputedStyle(
+        document.querySelector('[data-aufgabe="a1"] .vw-aufg-titel')).textDecorationLine,
+      blickFelder: document.querySelectorAll(".vw-blick-feld").length,
+
+      /* Die REIHENFOLGE im Bild, nicht im Quelltext.
+
+         Diese Pruefung fehlte im ersten Anlauf, und deshalb meldete der
+         Test 37 von 37 gruen, waehrend jede Zeile sichtbar falsch herum
+         gebaut war: Kaestchen, dann die kleinen Knoepfe, und der Titel
+         ganz rechts. Alle inhaltlichen Pruefungen (Farben, Anzahl,
+         Durchgestrichenes) trafen zu -- keine einzige schaute darauf, WO
+         die Dinge liegen. Aufgefallen ist es erst am Screenshot.
+
+         Lehre: Wer eine Anordnung baut, muss die Anordnung pruefen, nicht
+         nur ihre Bestandteile. */
+      anordnung: (() => {
+        const z = document.querySelector('[data-aufgabe="a2"]');
+        if (!z) return null;
+        const k = z.querySelector(".vw-aufg-haken").getBoundingClientRect();
+        const t = z.querySelector(".vw-aufg-titel").getBoundingClientRect();
+        const r = z.querySelector(".vw-aufg-rechts").getBoundingClientRect();
+        const b = z.querySelector(".vw-aufg-text");
+        return {
+          reihenfolgeStimmt: k.right <= t.left + 1 && t.right <= r.left + 1,
+          textUnterTitel: b ? b.getBoundingClientRect().top >= t.bottom - 2 : true,
+          textNichtUnterKaestchen: b ? b.getBoundingClientRect().left >= k.right - 1 : true,
+        };
+      })(),
+    };
+  });
+
+  pruefe(wo + ": alle vier Abschnitte erscheinen", m.gruppen.join(",") === "start,gestaltung,umsetzung,abschluss", m.gruppen.join(","));
+  pruefe(wo + ": jeder Abschnitt hat eine EIGENE Farbe", new Set(m.farben).size === 4, m.farben.join(" | "));
+  pruefe(wo + ": Punkt für den Kunden hebt sich ab", m.kundenZeileAnders);
+  pruefe(wo + ": „nicht enthalten“ ist gekennzeichnet", m.nichtEnthalten === 1);
+  pruefe(wo + ": jeder Punkt hat ein Kästchen zum Abhaken", m.haken === 7, "n=" + m.haken);
+  pruefe(wo + ": Erledigtes ist durchgestrichen", m.erledigtDurchgestrichen.includes("line-through"), m.erledigtDurchgestrichen);
+  pruefe(wo + ": Zusammenfassung mit vier Zahlen", m.blickFelder === 4);
+  pruefe(wo + ": Kästchen — Titel — Knöpfe stehen in dieser Reihenfolge", m.anordnung?.reihenfolgeStimmt);
+  pruefe(wo + ": die Erklärung steht UNTER dem Titel", m.anordnung?.textUnterTitel);
+  pruefe(wo + ": die Erklärung ist am Titel ausgerichtet, nicht am Rand", m.anordnung?.textNichtUnterKaestchen);
+
+  // Touch-Ziele auf dem Handy
+  if (breite < 900) {
+    const zuKlein = await seite.evaluate(() =>
+      Array.from(document.querySelectorAll(".vw-aufg-haken, .vw-mini"))
+        .filter((b) => { const r = b.getBoundingClientRect(); return r.width < 24 || r.height < 24; }).length);
+    pruefe(wo + ": alle Knöpfe sind gross genug zum Antippen", zuKlein === 0, "zu klein: " + zuKlein);
+  }
+
+  await seite.screenshot({ path: `pruef-aufgaben-${wo.toLowerCase()}.png` });
+  await seite.keyboard.press("Escape");
+  await seite.waitForTimeout(300);
+
+  // ---- Postfach ----
+  await seite.click('[data-tab="postfach"]');
+  await seite.waitForTimeout(500);
+  pruefe(wo + ": Postfach zeigt den Verlauf", await seite.locator("[data-verlauf]").count() === 1);
+
+  await seite.click("[data-verlauf]");
+  await seite.waitForTimeout(600);
+
+  const pf = await seite.evaluate(() => {
+    const intern = document.querySelector(".vw-blase--intern");
+    const wir = document.querySelector(".vw-blase--wir");
+    const kunde = document.querySelector(".vw-blase--kunde");
+    const lauf = document.getElementById("vw-blasen");
+    return {
+      anzahl: document.querySelectorAll(".vw-blase").length,
+      internDa: !!intern,
+      internAnders: intern && wir
+        ? getComputedStyle(intern).borderStyle !== getComputedStyle(wir).borderStyle : false,
+      kundeLinks: kunde && wir
+        ? kunde.getBoundingClientRect().left < wir.getBoundingClientRect().left : false,
+      amEnde: lauf ? lauf.scrollTop + lauf.clientHeight >= lauf.scrollHeight - 5 : false,
+      schalterDa: !!document.getElementById("vw-pf-intern"),
+    };
+  });
+  pruefe(wo + ": alle drei Nachrichten erscheinen", pf.anzahl === 3, "n=" + pf.anzahl);
+  pruefe(wo + ": die interne Notiz ist da", pf.internDa);
+  pruefe(wo + ": interne Notiz sieht ANDERS aus als eine gesendete", pf.internAnders);
+  pruefe(wo + ": Kunde links, eigene Nachrichten rechts", pf.kundeLinks);
+  pruefe(wo + ": Verlauf springt ans Ende", pf.amEnde);
+
+  // Der Schalter muss das Schreibfeld sichtbar umfaerben
+  const vorher = await seite.evaluate(() => getComputedStyle(document.getElementById("vw-schreibfeld")).borderColor);
+  await seite.check("#vw-pf-intern");
+  await seite.waitForTimeout(250);
+  const nachher = await seite.evaluate(() => getComputedStyle(document.getElementById("vw-schreibfeld")).borderColor);
+  pruefe(wo + ": „interne Notiz“ färbt das Schreibfeld sichtbar um", vorher !== nachher, vorher + " -> " + nachher);
+
+  pruefe(wo + ": keine Fehler im Protokoll", fehlerImProtokoll.length === 0, fehlerImProtokoll.join(" | "));
+
+  await seite.screenshot({ path: `pruef-postfach-${wo.toLowerCase()}.png` });
+  await seite.close();
+}
+
+await browser.close();
+srv.close();
+const fehler = ergebnisse.filter((e) => !e.ok).length;
+console.log(`\n===== ${ergebnisse.length - fehler} bestanden, ${fehler} fehlgeschlagen =====`);
+process.exitCode = fehler ? 1 : 0;
diff --git a/server-internal/index.js b/server-internal/index.js
index c746abc3..5988e511 100644
--- a/server-internal/index.js
+++ b/server-internal/index.js
@@ -99,7 +99,7 @@ import {
    Kundenzugaenge -- es gibt bewusst keine Selbstregistrierung. */
 import {
   kundeAnlegen, kundeEinladungNeu, kundenListe, kundeSchalten,
-  projektAnlegen, projektAendern, aenderungBeziffern, projektNachricht,
+  projektAnlegen, projektAendern, aenderungBeziffern, projektNachricht, projekteListe,
 } from "./routes/webdesign-kunden.js";
 /* Aufgabenliste je Projekt ("was ist schon gemacht von dem, was im Plan
    war") und allgemeines Postfach fuer Nachrichten OHNE Projektbezug. */
@@ -279,6 +279,7 @@ app.get("/webdesign/admin/kunden", wrap(kundenListe));
 app.post("/webdesign/admin/kunden", wrap(kundeAnlegen));
 app.post("/webdesign/admin/kunden/:id/einladung", wrap(kundeEinladungNeu));
 app.post("/webdesign/admin/kunden/:id/zugang", wrap(kundeSchalten));
+app.get("/webdesign/admin/projekte", wrap(projekteListe));
 app.post("/webdesign/admin/projekte", wrap(projektAnlegen));
 app.post("/webdesign/admin/projekte/:id", wrap(projektAendern));
 app.post("/webdesign/admin/aenderungen/:id/beziffern", wrap(aenderungBeziffern));
diff --git a/server-internal/routes/webdesign-kunden.js b/server-internal/routes/webdesign-kunden.js
index a5d153af..5afc5a9b 100644
--- a/server-internal/routes/webdesign-kunden.js
+++ b/server-internal/routes/webdesign-kunden.js
@@ -166,6 +166,55 @@ export async function kundenListe(req, res) {
   return json(res, { ok: true, kunden: zeilen });
 }
 
+/* ---------------------------------------------------------------------
+   PROJEKTE — flache Liste über alle Kunden
+
+   Bisher gab es nur die Anzahl je Kunde. Zum Abhaken von Aufgaben muss
+   man aber ein einzelnes Projekt öffnen können, ohne vorher zu wissen,
+   wem es gehört — man denkt in Projekten, nicht in Kunden.
+
+   Der Fortschritt wird gleich mitgerechnet. Er einzeln je Projekt
+   nachzufragen hiesse bei zwanzig Projekten einundzwanzig Anfragen,
+   und die Liste würde sichtbar stockend aufbauen.
+   --------------------------------------------------------------------- */
+export async function projekteListe(req, res) {
+  const p = await darf(req, "WD_PROJEKTE_MANAGE");
+  if (!p.erlaubt) return json(res, { ok: false, error: "Kein Zugriff." }, p.grund);
+
+  const zeigeArchiv = req.query?.archiv === "1";
+
+  const zeilen = db
+    .prepare(
+      `SELECT p.id, p.nummer, p.titel, p.paket, p.status, p.kunde_id,
+              p.preis_cent, p.waehrung, p.richttermin, p.archiviert,
+              p.anzahlung_bezahlt, p.rest_bezahlt, p.erstellt_am,
+              k.name AS kunde_name, k.firma AS kunde_firma,
+
+              /* Aufgabenzahlen direkt mitgeliefert. "entfaellt" zaehlt
+                 nicht mit -- ein weggefallener Punkt darf den Fortschritt
+                 weder bremsen noch beschleunigen. */
+              (SELECT COUNT(*) FROM wd_aufgaben a
+                 WHERE a.projekt_id = p.id AND a.status <> 'entfaellt')          AS aufg_gesamt,
+              (SELECT COUNT(*) FROM wd_aufgaben a
+                 WHERE a.projekt_id = p.id AND a.status = 'erledigt')            AS aufg_erledigt,
+              /* Die Zahl, die zuerst interessiert: worauf warte ICH gerade
+                 vom Kunden? Steht sie über 0, ist Nachfassen dran. */
+              (SELECT COUNT(*) FROM wd_aufgaben a
+                 WHERE a.projekt_id = p.id AND a.wer_dran = 'kunde'
+                   AND a.status <> 'erledigt' AND a.status <> 'entfaellt')       AS aufg_kunde,
+              (SELECT COUNT(*) FROM wd_postfach n
+                 WHERE n.projekt_id = p.id AND n.gelesen_admin = 0
+                   AND n.autor = 'kunde')                                        AS ungelesen
+       FROM wd_projekte p
+       JOIN wd_kunden k ON k.id = p.kunde_id
+       WHERE p.archiviert = ?
+       ORDER BY p.erstellt_am DESC LIMIT 300`
+    )
+    .all(zeigeArchiv ? 1 : 0);
+
+  return json(res, { ok: true, projekte: zeilen });
+}
+
 /* ---------------------------------------------------------------------
    FREISCHALTEN / SPERREN
    --------------------------------------------------------------------- */
diff --git a/webdesign/ablauf.html b/webdesign/ablauf.html
index 868b2b4b..b06092b6 100644
--- a/webdesign/ablauf.html
+++ b/webdesign/ablauf.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   /* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
      den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
@@ -183,7 +183,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ablauf.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-ablauf.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/anfrage.html b/webdesign/anfrage.html
index a1d3059e..58e01218 100644
--- a/webdesign/anfrage.html
+++ b/webdesign/anfrage.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   /* ---------- Schrittanzeige ----------
      Zeigt alle vier Schritte gleichzeitig statt nur "3 von 4". Man sieht
@@ -418,8 +418,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-anfrage.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-anfrage.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-anfrage.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-anfrage.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/faq.html b/webdesign/faq.html
index 0c605689..3e0b2b76 100644
--- a/webdesign/faq.html
+++ b/webdesign/faq.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   .fq-thema { scroll-margin-top: 90px; }
   .fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
@@ -195,7 +195,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-faq.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-faq.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/index.html b/webdesign/index.html
index 8927d182..5ce3dcff 100644
--- a/webdesign/index.html
+++ b/webdesign/index.html
@@ -16,8 +16,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   /* ---------- Nur auf der Startseite gebraucht ---------- */
 
@@ -407,8 +407,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-index.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-index.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 <script>
 /* ---------------------------------------------------------------------
    Marken-Intro (Masterplan S.3, Schritt 02: "Nach erfolgreichem Code
diff --git a/webdesign/leistungen.html b/webdesign/leistungen.html
index 3471fb38..386bce0c 100644
--- a/webdesign/leistungen.html
+++ b/webdesign/leistungen.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   /* Sprungmarken.
      Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
@@ -331,7 +331,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-leistungen.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-leistungen.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/portal.html b/webdesign/portal.html
index b9f386e3..9c7a5a11 100644
--- a/webdesign/portal.html
+++ b/webdesign/portal.html
@@ -12,8 +12,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   .po-login { max-width: 440px; margin: clamp(1.5rem,6vh,4rem) auto; }
 
@@ -134,8 +134,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-portal.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-portal.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-portal.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-portal.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/portfolio.html b/webdesign/portfolio.html
index e04a1989..a017373d 100644
--- a/webdesign/portfolio.html
+++ b/webdesign/portfolio.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   .pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
   .pfo-bild {
@@ -192,7 +192,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-portfolio.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-portfolio.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/preise.html b/webdesign/preise.html
index 46bd995d..e04d08a5 100644
--- a/webdesign/preise.html
+++ b/webdesign/preise.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   .pr-preis-gross { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); white-space: nowrap; }
 
@@ -196,7 +196,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-preise.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-preise.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/sw.js b/webdesign/sw.js
index 3ed86c8d..9c586fa0 100644
--- a/webdesign/sw.js
+++ b/webdesign/sw.js
@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v3";
+const CACHE_NAME = "dogfather-webdesign-v4";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */
diff --git a/webdesign/ueber.html b/webdesign/ueber.html
index 98b2e873..55ac0fd2 100644
--- a/webdesign/ueber.html
+++ b/webdesign/ueber.html
@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   .ue-kopf { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
   /* Auf dem Handy zuerst der Text, dann das Bild: sonst schiebt ein
@@ -127,7 +127,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ueber.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-ueber.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 </body>
 </html>
diff --git a/webdesign/verwaltung.html b/webdesign/verwaltung.html
index 1cbd292b..31f2609c 100644
--- a/webdesign/verwaltung.html
+++ b/webdesign/verwaltung.html
@@ -11,8 +11,8 @@
 <link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-title" content="DF Verwaltung" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   /* =====================================================================
      Verwaltungsbereich — bewusst NUR AUF DEUTSCH.
@@ -401,6 +401,205 @@
 
   .vw-leer-hinweis { text-align: center; padding: 3rem 1rem; color: var(--wd-text-soft); }
   .vw-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); }
+
+  /* =====================================================================
+     PROJEKTE UND AUFGABEN
+
+     Die vier Farben sind DIESELBEN wie im Portal und auf der Ablaufseite
+     (--wd-p1 bis --wd-p4). Das ist der eigentliche Punkt: Eine Farbe
+     bedeutet ueberall im Bereich dasselbe. Sonst waere sie Deko.
+     ===================================================================== */
+
+  /* Ein Abzeichen an der Reiterleiste. Zeigt es nichts an, ist es GANZ
+     weg statt eine 0 zu zeigen -- eine Null, die man taeglich sieht,
+     wird zu Rauschen und man uebersieht irgendwann auch die 3. */
+  .vw-abzeichen {
+    display: inline-block; min-width: 19px; padding: 0 .32rem;
+    margin-left: .38rem; border-radius: 999px;
+    background: var(--wd-gold); color: #17120a;
+    font-size: .7rem; font-weight: 800; line-height: 19px; text-align: center;
+    vertical-align: text-top;
+  }
+
+  /* ---------- Fortschrittsbalken in vier Abschnitten ----------
+     Ein einzelner Balken sagt "60 %". Vier Abschnitte sagen zusaetzlich
+     WO die 60 % liegen -- ob die Gestaltung durch ist oder ob ueberall
+     ein bisschen angefangen wurde. Das ist beim Draufschauen die
+     nuetzlichere Information. */
+  .vw-fortschritt { display: flex; gap: 3px; height: 7px; margin: .55rem 0 .3rem; }
+  .vw-fs-teil {
+    flex: 1; border-radius: 999px; overflow: hidden;
+    background: rgba(255,255,255,.07);
+    position: relative;
+  }
+  .vw-fs-teil > i {
+    position: absolute; inset: 0 auto 0 0; display: block;
+    border-radius: 999px;
+    transition: width var(--wd-zeit) ease;
+  }
+  .vw-fs-teil[data-k="start"]      > i { background: var(--wd-p1); }
+  .vw-fs-teil[data-k="gestaltung"] > i { background: var(--wd-p2); }
+  .vw-fs-teil[data-k="umsetzung"]  > i { background: var(--wd-p3); }
+  .vw-fs-teil[data-k="abschluss"]  > i { background: var(--wd-p4); }
+
+  .vw-fs-text { font-size: .78rem; color: var(--wd-text-soft); }
+  .vw-fs-text b { color: var(--wd-text); font-weight: 700; }
+
+  /* "Wartet auf dich"-Hinweis. Gold ist im ganzen Bereich fuer Hinweise
+     und Zahlung reserviert -- hier passt es: Es ist ein Hinweis, kein
+     Fehler. Rot waere zu laut fuer "der Kunde muss noch Texte schicken". */
+  .vw-wartet {
+    display: inline-flex; align-items: center; gap: .3rem;
+    padding: .1rem .5rem; border-radius: 999px;
+    background: rgba(232,200,119,.13); border: 1px solid rgba(232,200,119,.3);
+    color: var(--wd-gold); font-size: .76rem; font-weight: 600;
+  }
+
+  /* ---------- Aufgabenliste ---------- */
+  .vw-aufg-gruppe { margin-bottom: 1.1rem; }
+  .vw-aufg-kopf {
+    display: flex; align-items: baseline; gap: .5rem;
+    font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
+    margin-bottom: .5rem; padding-bottom: .35rem;
+    border-bottom: 1px solid var(--wd-rand);
+  }
+  .vw-aufg-kopf .vw-aufg-zahl { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: .8rem; color: var(--wd-text-soft); }
+  .vw-aufg-gruppe[data-k="start"]      .vw-aufg-kopf { color: var(--wd-p1); }
+  .vw-aufg-gruppe[data-k="gestaltung"] .vw-aufg-kopf { color: var(--wd-p2); }
+  .vw-aufg-gruppe[data-k="umsetzung"]  .vw-aufg-kopf { color: var(--wd-p3); }
+  .vw-aufg-gruppe[data-k="abschluss"]  .vw-aufg-kopf { color: var(--wd-p4); }
+
+  .vw-aufg {
+    display: grid; grid-template-columns: auto 1fr auto;
+    gap: .1rem .7rem; align-items: start;
+    padding: .55rem .7rem; margin-bottom: .3rem;
+    border-radius: 10px; border: 1px solid transparent;
+  }
+  .vw-aufg:hover { background: rgba(127,208,232,.045); border-color: var(--wd-rand); }
+
+  /* Das Kaestchen ist ein echter Knopf, kein Symbol mit Klickfläche
+     drumherum: Es muss ueber die Tastatur erreichbar sein und beim
+     Anspringen sichtbar umrandet werden. */
+  /* JEDES Kind bekommt Zeile UND Spalte ausdruecklich zugewiesen.
+
+     Ohne die Spaltenangabe geht es schief, und zwar auf eine Art, die man
+     nicht erraet: Das Raster platziert zuerst alle Elemente mit
+     FESTGELEGTER Zeile und erst danach die freien. Kaestchen und
+     Knopfgruppe haben beide "grid-row: 1 / span 2" -- sie wurden deshalb
+     zusammen nach vorne gesetzt (Spalte 1 und 2), und der Titel landete
+     als letzter in Spalte 3, ganz rechts. Im Bild sah das aus wie ein
+     falsch herum gebautes Formular. */
+  .vw-aufg-haken {
+    grid-row: 1 / span 2; grid-column: 1;
+    width: 24px; height: 24px; margin-top: .1rem; padding: 0;
+    border-radius: 7px; border: 2px solid var(--wd-rand-stark);
+    background: transparent; color: transparent;
+    cursor: pointer; font-size: .9rem; line-height: 1;
+    display: grid; place-items: center;
+    transition: all var(--wd-zeit-schnell) ease;
+  }
+  .vw-aufg-haken:hover { border-color: var(--wd-blau); }
+  .vw-aufg--erledigt .vw-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: #06120c; }
+  .vw-aufg--arbeit  .vw-aufg-haken { border-color: var(--wd-p2); color: var(--wd-p2); }
+  .vw-aufg--weg     .vw-aufg-haken { border-style: dashed; color: var(--wd-text-soft); }
+
+  .vw-aufg-titel { grid-row: 1; grid-column: 2; font-size: .93rem; color: var(--wd-text); overflow-wrap: anywhere; }
+  .vw-aufg--erledigt .vw-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
+  .vw-aufg--weg .vw-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; opacity: .6; }
+  .vw-aufg-text { grid-row: 2; grid-column: 2; font-size: .82rem; color: var(--wd-text-soft); line-height: 1.5; }
+  .vw-aufg-rechts { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: .3rem; }
+
+  /* Punkte, die auf den KUNDEN warten, muessen sich unterscheiden --
+     sonst liest man die Liste als reine Fortschrittsanzeige und
+     uebersieht, dass man selbst gar nicht am Zug ist. */
+  .vw-aufg--kunde { background: rgba(232,200,119,.055); }
+  .vw-aufg--kunde:hover { background: rgba(232,200,119,.1); }
+  .vw-aufg-wer {
+    font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
+    padding: .12rem .4rem; border-radius: 999px; white-space: nowrap;
+    background: rgba(232,200,119,.15); color: var(--wd-gold);
+  }
+
+  .vw-aufg-nicht {
+    display: inline-block; margin-left: .35rem;
+    font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
+    padding: .12rem .4rem; border-radius: 999px;
+    background: rgba(255,157,157,.12); color: var(--wd-fehler);
+  }
+
+  .vw-mini {
+    padding: .2rem .45rem; border-radius: 7px; font-size: .82rem;
+    border: 1px solid var(--wd-rand); background: transparent;
+    color: var(--wd-text-soft); cursor: pointer; line-height: 1;
+    min-width: 30px; min-height: 30px;
+  }
+  .vw-mini:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); }
+
+  /* =====================================================================
+     POSTFACH
+     ===================================================================== */
+  .vw-pf { display: grid; gap: 1rem; }
+  @media (min-width: 900px) { .vw-pf { grid-template-columns: minmax(0,320px) minmax(0,1fr); align-items: start; } }
+
+  .vw-pf-eintrag {
+    display: block; width: 100%; text-align: left; cursor: pointer;
+    padding: .8rem .9rem; margin-bottom: .4rem;
+    border-radius: 12px; border: 1px solid var(--wd-rand);
+    background: var(--wd-glas); color: inherit;
+  }
+  .vw-pf-eintrag:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.05); }
+  .vw-pf-eintrag.vw-an { border-color: var(--wd-blau); background: rgba(127,208,232,.09); }
+  .vw-pf-eintrag--neu { border-left: 3px solid var(--wd-gold); }
+  .vw-pf-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
+  .vw-pf-vorschau {
+    font-size: .84rem; color: var(--wd-text-soft); margin-top: .2rem;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .vw-pf-zeit { font-size: .74rem; color: var(--wd-text-soft); margin-top: .3rem; }
+
+  /* Verlauf: Der Kunde links, wir rechts -- die im Nachrichtenverkehr
+     gewohnte Anordnung. Man erkennt den Absender an der Seite, noch
+     bevor man den Namen liest. */
+  .vw-pf-verlauf {
+    max-height: 60vh; overflow-y: auto;
+    padding: .3rem .5rem .3rem .3rem;
+    display: flex; flex-direction: column; gap: .6rem;
+  }
+  .vw-blase {
+    max-width: 82%; padding: .65rem .85rem; border-radius: 14px;
+    font-size: .92rem; line-height: 1.55; white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .vw-blase--kunde {
+    align-self: flex-start;
+    background: rgba(255,255,255,.055); border: 1px solid var(--wd-rand);
+    border-bottom-left-radius: 5px;
+  }
+  .vw-blase--wir {
+    align-self: flex-end;
+    background: rgba(127,208,232,.12); border: 1px solid var(--wd-rand-stark);
+    border-bottom-right-radius: 5px;
+  }
+  /* Interne Notiz: deutlich anders. Sie darf keinesfalls wie eine
+     gesendete Nachricht aussehen -- sonst haelt man sie fuer verschickt
+     oder, schlimmer, tippt Vertrauliches ins falsche Feld. */
+  .vw-blase--intern {
+    align-self: flex-end;
+    background: rgba(232,200,119,.08);
+    border: 1px dashed rgba(232,200,119,.45);
+    border-bottom-right-radius: 5px;
+  }
+  .vw-blase-kopf { font-size: .7rem; color: var(--wd-text-soft); margin-bottom: .25rem; }
+  .vw-blase--intern .vw-blase-kopf { color: var(--wd-gold); font-weight: 700; }
+
+  /* Der Schalter "interne Notiz" veraendert die Farbe des Schreibfeldes.
+     Ein Haekchen allein uebersieht man -- die Umgebung muss sich sichtbar
+     aendern, sonst landet irgendwann eine interne Bemerkung beim Kunden. */
+  .vw-pf-schreiben { margin-top: .8rem; padding: .8rem; border-radius: 14px; border: 1px solid var(--wd-rand); }
+  .vw-pf-schreiben--intern { border-color: rgba(232,200,119,.45); background: rgba(232,200,119,.05); }
+  .vw-pf-schalter { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--wd-text-soft); cursor: pointer; }
+  .vw-pf-schalter input { width: 18px; height: 18px; accent-color: var(--wd-gold); }
 </style>
 </head>
 <body class="wd">
@@ -437,7 +636,10 @@
           <h1 id="vw-titel">Projektanfragen</h1>
           <div class="vw-tabs">
             <button type="button" class="vw-filter-knopf vw-an" data-tab="anfragen">Anfragen</button>
+            <button type="button" class="vw-filter-knopf" data-tab="projekte">Projekte</button>
             <button type="button" class="vw-filter-knopf" data-tab="kunden">Kunden</button>
+            <button type="button" class="vw-filter-knopf" data-tab="postfach">Postfach<span
+              class="vw-abzeichen" id="vw-pf-zaehler" hidden>0</span></button>
           </div>
           <div class="vw-wer">
             <span id="vw-name">—</span>
@@ -512,6 +714,33 @@
           <h2 style="font-size:1.15rem">Bestehende Zugänge</h2>
           <div id="vw-kunden-liste"><div class="vw-laedt">Wird geladen…</div></div>
         </div>
+
+        <!-- ============ PROJEKTE ============ -->
+        <div id="vw-projekte-bereich" hidden>
+          <p class="wd-klein wd-leise" style="margin-bottom:1rem">
+            Jedes Projekt hat eine Aufgabenliste in den vier Abschnitten des
+            Ablaufs. Abgehakte Punkte sieht der Kunde sofort in seinem Portal —
+            das ersetzt die meisten „Wie weit seid ihr?“-Nachrichten.
+          </p>
+          <div id="vw-projekte-liste"><div class="vw-laedt">Wird geladen…</div></div>
+        </div>
+
+        <!-- ============ POSTFACH ============ -->
+        <div id="vw-postfach-bereich" hidden>
+          <p class="wd-klein wd-leise" style="margin-bottom:1rem">
+            Nachrichten, die zu keinem bestimmten Projekt gehören — Fragen,
+            Kleinigkeiten, alles Kurze. Auch Kunden ohne laufendes Projekt
+            können hier schreiben.
+          </p>
+          <div class="vw-pf">
+            <div id="vw-pf-liste"><div class="vw-laedt">Wird geladen…</div></div>
+            <div id="vw-pf-verlauf" class="wd-karte">
+              <p class="wd-leise" style="text-align:center;padding:2rem 0">
+                Wähle links einen Verlauf aus.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
 
     </div>
@@ -524,7 +753,7 @@
   <div class="vw-detail-blatt" id="vw-detail-blatt"></div>
 </div>
 
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 <script>
 /* =====================================================================
    Verwaltung: Anfragen ansehen, Status ändern, Notizen, Archivieren.
@@ -614,6 +843,10 @@
       document.getElementById("vw-name").textContent = antwort.name || antwort.actor || "angemeldet";
       zeigeBereich();
       ladeAnfragen();
+      /* Der Postfach-Zaehler direkt nach der Anmeldung. Ohne das sieht man
+         neue Nachrichten erst, wenn man den Reiter zufaellig anklickt --
+         also womoeglich tagelang nicht. */
+      zaehlerHolen();
     } catch (fehler) {
       feld.classList.add("wd-feld--fehler");
       feld.querySelector(".wd-feld-fehler").textContent = fehler.message || "Anmeldung fehlgeschlagen.";
@@ -864,6 +1097,10 @@
   function schliesseDetail() {
     detail.classList.remove("vw-auf");
     offeneId = null;
+    /* Auch das offene Projekt zuruecksetzen. Bliebe es stehen, wuerde ein
+       spaeterer Klick auf "+ Punkt" ihn im zuletzt geoeffneten Projekt
+       anlegen -- also im falschen. */
+    offenesProjekt = null;
     document.body.style.overflow = "";
   }
   detail.querySelector("[data-schliessen]").addEventListener("click", schliesseDetail);
@@ -1175,17 +1412,469 @@
       document.querySelectorAll("[data-tab]").forEach(function (x) {
         x.classList.toggle("vw-an", x.dataset.tab === aktiverTab);
       });
+      /* Vorher war das eine Ja/Nein-Umschaltung zwischen zwei Bereichen.
+         Mit vier Reitern geht das nicht mehr: Jede neue Ansicht haette
+         eine weitere Zeile "hidden = ..." gebraucht, und beim naechsten
+         Reiter vergisst man eine — dann liegen zwei Ansichten
+         uebereinander. Deshalb jetzt eine Zuordnung: Reiter -> Titel und
+         zugehoeriger Kasten. Alles andere wird ausgeblendet, ohne dass
+         man es einzeln aufzaehlen muss. */
+      var ANSICHTEN = {
+        anfragen: { titel: "Projektanfragen", kasten: null },
+        projekte: { titel: "Projekte",        kasten: "vw-projekte-bereich" },
+        kunden:   { titel: "Kunden",          kasten: "vw-kunden-bereich" },
+        postfach: { titel: "Postfach",        kasten: "vw-postfach-bereich" },
+      };
+
       var istAnfragen = aktiverTab === "anfragen";
-      document.getElementById("vw-titel").textContent = istAnfragen ? "Projektanfragen" : "Kunden";
+      document.getElementById("vw-titel").textContent = ANSICHTEN[aktiverTab].titel;
+
+      /* Die Werkzeuge oben (Zahlen, Filter, Suche) gehoeren zur
+         Anfragenliste und zu keiner anderen Ansicht. */
       document.getElementById("vw-zahlen").hidden = !istAnfragen;
       document.getElementById("vw-filter").hidden = !istAnfragen;
       document.getElementById("vw-suche").closest(".wd-feld").hidden = !istAnfragen;
       document.getElementById("vw-liste").hidden = !istAnfragen;
-      document.getElementById("vw-kunden-bereich").hidden = istAnfragen;
-      if (!istAnfragen) ladeKunden();
+
+      Object.keys(ANSICHTEN).forEach(function (name) {
+        var id = ANSICHTEN[name].kasten;
+        if (id) document.getElementById(id).hidden = name !== aktiverTab;
+      });
+
+      if (aktiverTab === "kunden") ladeKunden();
+      if (aktiverTab === "projekte") ladeProjekte();
+      if (aktiverTab === "postfach") ladePostfach();
     });
   });
 
+  /* =================================================================
+     PROJEKTE UND AUFGABEN
+
+     Der Kern des Wunsches vom 22.08.2026: "wenn sie drauf drücken sollen
+     sie auch sehen was ich schon gemacht habe von dem was im plan war."
+     Hier ist die Seite, auf der ich abhake — was hier passiert, sieht der
+     Kunde unmittelbar in seinem Portal.
+     ================================================================= */
+  var KATEGORIEN = ["start", "gestaltung", "umsetzung", "abschluss"];
+  var KAT_TEXT = {
+    start: "Start", gestaltung: "Gestaltung",
+    umsetzung: "Umsetzung", abschluss: "Abschluss",
+  };
+  var offenesProjekt = null;
+
+  /* Der Balken in vier Abschnitten. Ein einzelner Balken sagt "60 %",
+     vier Abschnitte sagen zusaetzlich WO diese 60 % liegen. */
+  function balken(f) {
+    return '<div class="vw-fortschritt">' + KATEGORIEN.map(function (k) {
+      var d = (f.jeKategorie && f.jeKategorie[k]) || { gesamt: 0, erledigt: 0 };
+      var breite = d.gesamt ? Math.round((d.erledigt / d.gesamt) * 100) : 0;
+      return '<span class="vw-fs-teil" data-k="' + k + '" title="' + KAT_TEXT[k] + ": " +
+        d.erledigt + " von " + d.gesamt + '"><i style="width:' + breite + '%"></i></span>';
+    }).join("") + "</div>";
+  }
+
+  async function ladeProjekte() {
+    var ziel = document.getElementById("vw-projekte-liste");
+    ziel.innerHTML = '<div class="vw-laedt">Wird geladen…</div>';
+    try {
+      var d = await api("/webdesign/admin/projekte");
+      if (!d.projekte.length) {
+        ziel.innerHTML = '<div class="vw-leer-hinweis">Noch keine Projekte. ' +
+          "Sie entstehen aus einer Anfrage über „Anfrage übernehmen“ oder " +
+          "unter „Kunden“ über „+ Projekt“.</div>";
+        return;
+      }
+
+      ziel.innerHTML = d.projekte.map(function (p) {
+        var gesamt = p.aufg_gesamt || 0;
+        var fertig = p.aufg_erledigt || 0;
+        var prozent = gesamt ? Math.round((fertig / gesamt) * 100) : 0;
+
+        /* Der Balken braucht die Aufteilung je Kategorie, die die Liste
+           aus Sparsamkeit nicht mitliefert. Deshalb hier ein einzelner
+           Balken über alles — die genaue Aufteilung erscheint beim
+           Oeffnen. Ein falscher Vierfarbbalken waere schlimmer als ein
+           ehrlicher einfarbiger. */
+        return '<button type="button" class="vw-karte" data-projekt="' + s(p.id) + '">' +
+          '<span class="vw-karte-nr">' + s(p.nummer) + "</span>" +
+          '<span class="vw-karte-mitte">' +
+            '<span class="vw-karte-name">' + s(p.titel) + "</span>" +
+            '<span class="vw-karte-info">' + s(p.kunde_name) +
+              (p.kunde_firma ? " · " + s(p.kunde_firma) : "") + "</span>" +
+            '<span class="vw-fortschritt"><span class="vw-fs-teil" data-k="umsetzung" ' +
+              'style="flex:1"><i style="width:' + prozent + '%"></i></span></span>' +
+            '<span class="vw-fs-text"><b>' + fertig + " von " + gesamt + "</b> erledigt" +
+              (gesamt ? " · " + prozent + " %" : " — noch keine Aufgabenliste") + "</span>" +
+          "</span>" +
+          '<span class="vw-karte-rechts">' +
+            (p.aufg_kunde
+              ? '<span class="vw-wartet">wartet auf Kunde: ' + p.aufg_kunde + "</span>"
+              : '<span class="vw-status vw-status--angenommen">alles bei dir</span>') +
+            (p.ungelesen ? '<span class="vw-abzeichen">' + p.ungelesen + "</span>" : "") +
+            '<span class="vw-karte-zeit">' + s(PAKET_TEXT[p.paket] || p.paket) + "</span>" +
+          "</span></button>";
+      }).join("");
+
+      ziel.querySelectorAll("[data-projekt]").forEach(function (b) {
+        b.addEventListener("click", function () { oeffneAufgaben(b.dataset.projekt); });
+      });
+    } catch (fehler) {
+      if (fehler.status === 401) { token = null; tokenSchreiben(null); zeigeAnmeldung(); return; }
+      ziel.innerHTML = "";
+      window.WD.meldung(meldung, fehler.message, "fehler");
+    }
+  }
+
+  /* Eine einzelne Aufgabenzeile. */
+  function aufgabeZeile(a) {
+    var klasse = "vw-aufg";
+    if (a.status === "erledigt") klasse += " vw-aufg--erledigt";
+    else if (a.status === "in_arbeit") klasse += " vw-aufg--arbeit";
+    else if (a.status === "entfaellt") klasse += " vw-aufg--weg";
+    /* Der goldene Hintergrund nur, wenn der Punkt NOCH offen ist. Ein
+       erledigter Kundenpunkt braucht keine Aufmerksamkeit mehr. */
+    if (a.wer_dran === "kunde" && a.status !== "erledigt" && a.status !== "entfaellt") {
+      klasse += " vw-aufg--kunde";
+    }
+
+    var zeichen = a.status === "erledigt" ? "✓" : a.status === "in_arbeit" ? "•" : a.status === "entfaellt" ? "–" : "";
+    var naechster = a.status === "offen" ? "in_arbeit" : a.status === "in_arbeit" ? "erledigt" : "offen";
+
+    return '<div class="' + klasse + '" data-aufgabe="' + s(a.id) + '">' +
+      '<button type="button" class="vw-aufg-haken" data-weiter="' + naechster + '" ' +
+        'title="' + (a.status === "erledigt" ? "Wieder öffnen" : a.status === "in_arbeit" ? "Als erledigt setzen" : "In Arbeit setzen") + '" ' +
+        'aria-label="Zustand ändern: ' + s(a.titel) + '">' + zeichen + "</button>" +
+      '<span class="vw-aufg-titel">' + s(a.titel) +
+        (a.nicht_enthalten ? '<span class="vw-aufg-nicht">nicht enthalten</span>' : "") + "</span>" +
+      '<span class="vw-aufg-rechts">' +
+        (a.wer_dran === "kunde" && a.status !== "erledigt" ? '<span class="vw-aufg-wer">Kunde</span>' : "") +
+        '<button type="button" class="vw-mini" data-entfaellt="' + (a.status === "entfaellt" ? "0" : "1") +
+          '" title="' + (a.status === "entfaellt" ? "Doch wieder aufnehmen" : "Entfällt — zählt dann nicht mehr mit") + '">' +
+          (a.status === "entfaellt" ? "↺" : "∅") + "</button>" +
+        '<button type="button" class="vw-mini" data-loeschen="1" title="Punkt löschen">✕</button>' +
+      "</span>" +
+      (a.beschreibung || a.hinweis
+        ? '<span class="vw-aufg-text">' + s(a.beschreibung || "") +
+          (a.hinweis ? " " + s(a.hinweis) : "") + "</span>"
+        : "") +
+      "</div>";
+  }
+
+  async function oeffneAufgaben(projektId) {
+    offenesProjekt = projektId;
+    detail.classList.add("vw-auf");
+    document.body.style.overflow = "hidden";
+    blatt.innerHTML = '<div class="vw-laedt">Wird geladen…</div>';
+
+    try {
+      var d = await api("/webdesign/admin/projekte/" + encodeURIComponent(projektId) + "/aufgaben");
+      zeichneAufgaben(d);
+    } catch (fehler) {
+      if (fehler.status === 401) { schliesseDetail(); token = null; tokenSchreiben(null); zeigeAnmeldung(); return; }
+      blatt.innerHTML = '<div class="vw-leer-hinweis">' + s(fehler.message) + "</div>";
+    }
+  }
+
+  function zeichneAufgaben(d) {
+    var p = d.projekt, f = d.fortschritt;
+
+    var gruppen = KATEGORIEN.map(function (k) {
+      var drin = d.aufgaben.filter(function (a) { return a.kategorie === k; });
+      if (!drin.length) return "";
+      var z = f.jeKategorie[k] || { gesamt: 0, erledigt: 0 };
+      return '<div class="vw-aufg-gruppe" data-k="' + k + '">' +
+        '<div class="vw-aufg-kopf">' + KAT_TEXT[k] +
+          '<span class="vw-aufg-zahl">' + z.erledigt + " / " + z.gesamt + "</span></div>" +
+        drin.map(aufgabeZeile).join("") +
+        '<button type="button" class="vw-mini" data-neu="' + k + '" ' +
+          'style="margin-top:.2rem;min-width:auto;padding:.25rem .6rem">+ Punkt in „' +
+          KAT_TEXT[k] + '“</button>' +
+      "</div>";
+    }).join("");
+
+    blatt.innerHTML =
+      '<div class="vw-detail-kopf">' +
+        '<div><div class="vw-karte-nr" style="font-size:.9rem">' + s(p.nummer) + "</div>" +
+        '<h2 style="margin:.2rem 0 .3rem;font-size:1.4rem">' + s(p.titel) + "</h2>" +
+        '<span class="wd-klein wd-leise">' + s(p.kunde_name) + " · " +
+          s(PAKET_TEXT[p.paket] || p.paket) + "</span></div>" +
+        '<button class="vw-zu" type="button" aria-label="Schließen">✕</button>' +
+      "</div>" +
+
+      /* Die Zusammenfassung steht oben, weil sie die Frage beantwortet,
+         mit der man diese Ansicht oeffnet. */
+      '<div class="vw-blick">' +
+        '<div class="vw-blick-feld"><span class="vw-blick-was">Erledigt</span>' +
+          '<span class="vw-blick-wert">' + f.erledigt + " von " + f.gesamt + "</span></div>" +
+        '<div class="vw-blick-feld"><span class="vw-blick-was">Fortschritt</span>' +
+          '<span class="vw-blick-wert">' + f.prozent + " %</span></div>" +
+        '<div class="vw-blick-feld"><span class="vw-blick-was">In Arbeit</span>' +
+          '<span class="vw-blick-wert' + (f.inArbeit ? "" : " vw-leer") + '">' +
+          (f.inArbeit || "nichts") + "</span></div>" +
+        '<div class="vw-blick-feld"><span class="vw-blick-was">Wartet auf Kunde</span>' +
+          '<span class="vw-blick-wert' + (f.beimKunden ? "" : " vw-leer") + '">' +
+          (f.beimKunden || "nichts") + "</span></div>" +
+      "</div>" +
+      balken(f) +
+
+      (d.aufgaben.length ? gruppen :
+        '<div class="vw-leer-hinweis">Für dieses Projekt gibt es noch keine Aufgabenliste.' +
+        '<div style="margin-top:1rem"><button type="button" class="wd-btn wd-btn--haupt wd-btn--klein" ' +
+        'id="vw-vorlage">Standardliste für „' + s(PAKET_TEXT[p.paket] || p.paket) + '“ einsetzen</button></div></div>') +
+
+      (d.aufgaben.length
+        ? '<p class="wd-klein wd-leise" style="margin-top:1rem;border-top:1px solid var(--wd-rand);padding-top:.8rem">' +
+          "Klick auf das Kästchen schaltet weiter: offen → in Arbeit → erledigt. " +
+          "Der Kunde sieht jede Änderung sofort in seinem Portal. " +
+          '<button type="button" class="vw-mini" id="vw-vorlage" style="min-width:auto;padding:.25rem .6rem">' +
+          "Fehlende Standardpunkte ergänzen</button></p>"
+        : "");
+
+    blatt.querySelector(".vw-zu").addEventListener("click", schliesseDetail);
+
+    /* Zustand weiterschalten. */
+    blatt.querySelectorAll("[data-weiter]").forEach(function (b) {
+      b.addEventListener("click", function () {
+        aufgabeAendern(b.closest("[data-aufgabe]").dataset.aufgabe, { status: b.dataset.weiter });
+      });
+    });
+    blatt.querySelectorAll("[data-entfaellt]").forEach(function (b) {
+      b.addEventListener("click", function () {
+        aufgabeAendern(b.closest("[data-aufgabe]").dataset.aufgabe,
+          { status: b.dataset.entfaellt === "1" ? "entfaellt" : "offen" });
+      });
+    });
+    blatt.querySelectorAll("[data-loeschen]").forEach(function (b) {
+      b.addEventListener("click", async function () {
+        var id = b.closest("[data-aufgabe]").dataset.aufgabe;
+        /* Nachfragen, weil Loeschen hier wirklich loescht (kein Archiv).
+           Begruendung dafuer steht im Server-Code. */
+        if (!confirm("Diesen Punkt wirklich löschen? Das lässt sich nicht rückgängig machen.")) return;
+        try {
+          await api("/webdesign/admin/aufgaben/" + encodeURIComponent(id) + "/loeschen", { method: "POST", body: {} });
+          oeffneAufgaben(offenesProjekt);
+        } catch (f2) { window.WD.meldung(meldung, f2.message, "fehler"); }
+      });
+    });
+    blatt.querySelectorAll("[data-neu]").forEach(function (b) {
+      b.addEventListener("click", async function () {
+        var titel = prompt("Was soll als Punkt in „" + KAT_TEXT[b.dataset.neu] + "“ stehen?");
+        if (!titel || !titel.trim()) return;
+        var wer = confirm("Muss der KUNDE das erledigen?\n\nOK = Kunde · Abbrechen = du") ? "kunde" : "dogfather";
+        try {
+          await api("/webdesign/admin/projekte/" + encodeURIComponent(offenesProjekt) + "/aufgaben",
+            { method: "POST", body: { titel: titel.trim(), kategorie: b.dataset.neu, werDran: wer } });
+          oeffneAufgaben(offenesProjekt);
+        } catch (f2) { window.WD.meldung(meldung, f2.message, "fehler"); }
+      });
+    });
+
+    var vorlage = blatt.querySelector("#vw-vorlage");
+    if (vorlage) {
+      vorlage.addEventListener("click", async function () {
+        window.WD.knopfSperren(vorlage, true, "…");
+        try {
+          var r = await api("/webdesign/admin/projekte/" + encodeURIComponent(offenesProjekt) + "/aufgaben/vorlage",
+            { method: "POST", body: {} });
+          window.WD.meldung(meldung,
+            r.neu + " Punkte eingesetzt" + (r.uebersprungen ? ", " + r.uebersprungen + " waren schon da." : "."), "ok");
+          oeffneAufgaben(offenesProjekt);
+        } catch (f2) {
+          window.WD.knopfSperren(vorlage, false);
+          window.WD.meldung(meldung, f2.message, "fehler");
+        }
+      });
+    }
+  }
+
+  async function aufgabeAendern(id, felder) {
+    /* Die Zeile wird sofort umgestellt, ohne auf den Server zu warten.
+       Bei einer Liste, in der man zehn Punkte hintereinander abhakt,
+       waere ein Neuaufbau nach jedem Klick zaeh — und man verliert die
+       Stelle, an der man gerade war. Geht es schief, wird die ganze
+       Liste neu geholt und der Zustand ist wieder ehrlich. */
+    var zeile = blatt.querySelector('[data-aufgabe="' + id + '"]');
+    if (zeile) zeile.style.opacity = ".5";
+    try {
+      await api("/webdesign/admin/aufgaben/" + encodeURIComponent(id), { method: "POST", body: felder });
+      oeffneAufgaben(offenesProjekt);
+    } catch (fehler) {
+      if (zeile) zeile.style.opacity = "";
+      window.WD.meldung(meldung, fehler.message, "fehler");
+      oeffneAufgaben(offenesProjekt);
+    }
+  }
+
+  /* =================================================================
+     POSTFACH
+
+     "auf dieser seite sollen die kunden mir auch nachrichten hinterlassen
+     können, für noch kleinigkeiten oder sachen die ich brauch."
+     (22.08.2026)
+
+     Aufbau links Verläufe, rechts das Gespräch — wie in jedem
+     Nachrichtenprogramm. Nicht aus Nachahmung, sondern weil man ein
+     Gespräch abarbeitet und nicht eine Zeile: Man will sehen, was vorher
+     besprochen wurde, während man antwortet.
+     ================================================================= */
+  var offenerVerlauf = null;
+
+  async function ladePostfach() {
+    var ziel = document.getElementById("vw-pf-liste");
+    ziel.innerHTML = '<div class="vw-laedt">Wird geladen…</div>';
+    try {
+      var d = await api("/webdesign/admin/postfach");
+      zaehlerSetzen(d.ungelesen);
+
+      if (!d.verlaeufe.length) {
+        ziel.innerHTML = '<div class="vw-leer-hinweis" style="padding:2rem 1rem">' +
+          "Noch keine Nachrichten. Sobald ein Kunde schreibt, steht der Verlauf hier.</div>";
+        return;
+      }
+
+      ziel.innerHTML = d.verlaeufe.map(function (v) {
+        return '<button type="button" class="vw-pf-eintrag' +
+            (v.ungelesen ? " vw-pf-eintrag--neu" : "") +
+            (v.kunde_id === offenerVerlauf ? " vw-an" : "") +
+            '" data-verlauf="' + s(v.kunde_id) + '">' +
+          '<span class="vw-pf-name">' + s(v.name) +
+            (v.ungelesen ? '<span class="vw-abzeichen">' + v.ungelesen + "</span>" : "") + "</span>" +
+          '<span class="vw-pf-vorschau">' +
+            (v.letzter_autor === "kunde" ? "" : "Du: ") + s(v.letzter_text || "") + "</span>" +
+          '<span class="vw-pf-zeit">' + alter(v.letzte) + "</span>" +
+        "</button>";
+      }).join("");
+
+      ziel.querySelectorAll("[data-verlauf]").forEach(function (b) {
+        b.addEventListener("click", function () { oeffneVerlauf(b.dataset.verlauf); });
+      });
+    } catch (fehler) {
+      if (fehler.status === 401) { token = null; tokenSchreiben(null); zeigeAnmeldung(); return; }
+      ziel.innerHTML = "";
+      window.WD.meldung(meldung, fehler.message, "fehler");
+    }
+  }
+
+  async function oeffneVerlauf(kundeId) {
+    offenerVerlauf = kundeId;
+    var kasten = document.getElementById("vw-pf-verlauf");
+    kasten.innerHTML = '<div class="vw-laedt">Wird geladen…</div>';
+    document.querySelectorAll("[data-verlauf]").forEach(function (b) {
+      b.classList.toggle("vw-an", b.dataset.verlauf === kundeId);
+    });
+
+    try {
+      var d = await api("/webdesign/admin/postfach/" + encodeURIComponent(kundeId));
+
+      var blasen = d.nachrichten.map(function (n) {
+        var art = n.intern ? "intern" : n.autor === "kunde" ? "kunde" : "wir";
+        var wer = n.intern ? "Interne Notiz — der Kunde sieht das nicht"
+          : n.autor === "kunde" ? s(d.kunde.name) : (n.autor === "vanvan" ? "VanVan" : "Dogfather");
+        return '<div class="vw-blase vw-blase--' + art + '">' +
+          '<div class="vw-blase-kopf">' + wer + " · " + window.WD.datum(n.erstellt_am) +
+            (n.projekt_titel ? " · zu „" + s(n.projekt_titel) + "“" : "") + "</div>" +
+          s(n.text) + "</div>";
+      }).join("");
+
+      kasten.innerHTML =
+        '<div style="display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem">' +
+          '<h2 style="font-size:1.1rem;margin:0">' + s(d.kunde.name) + "</h2>" +
+          '<span class="wd-klein wd-leise">' + s(d.kunde.email) + "</span></div>" +
+        '<div class="vw-pf-verlauf" id="vw-blasen">' +
+          (blasen || '<p class="wd-leise" style="text-align:center">Noch nichts geschrieben.</p>') +
+        "</div>" +
+        '<div class="vw-pf-schreiben" id="vw-schreibfeld">' +
+          '<div class="wd-feld" style="margin-bottom:.6rem">' +
+            '<textarea id="vw-pf-text" rows="3" placeholder="Antwort schreiben…"></textarea>' +
+          "</div>" +
+          (d.projekte.length
+            ? '<div class="wd-feld" style="margin-bottom:.6rem">' +
+              '<label for="vw-pf-projekt" class="wd-klein">Bezug (optional)</label>' +
+              '<select id="vw-pf-projekt"><option value="">— kein bestimmtes Projekt —</option>' +
+              d.projekte.map(function (p) {
+                return '<option value="' + s(p.id) + '">' + s(p.titel) + "</option>";
+              }).join("") + "</select></div>"
+            : "") +
+          '<div class="wd-btn-reihe" style="align-items:center;justify-content:space-between">' +
+            '<label class="vw-pf-schalter"><input type="checkbox" id="vw-pf-intern" />' +
+              "<span>Nur interne Notiz</span></label>" +
+            '<button type="button" class="wd-btn wd-btn--haupt wd-btn--klein" id="vw-pf-senden">Senden</button>' +
+          "</div>" +
+        "</div>";
+
+      /* Ans Ende springen — beim Oeffnen will man das Neueste sehen,
+         nicht den Anfang von vor drei Monaten. */
+      var lauf = document.getElementById("vw-blasen");
+      lauf.scrollTop = lauf.scrollHeight;
+
+      /* Der Schalter faerbt das Schreibfeld um. Ein Haekchen allein
+         uebersieht man — und eine interne Bemerkung, die beim Kunden
+         landet, ist der peinlichste Fehler, den dieses System machen
+         kann. Deshalb muss sich die Umgebung sichtbar aendern. */
+      var schalter = document.getElementById("vw-pf-intern");
+      var feld = document.getElementById("vw-schreibfeld");
+      var eingabe = document.getElementById("vw-pf-text");
+      schalter.addEventListener("change", function () {
+        feld.classList.toggle("vw-pf-schreiben--intern", schalter.checked);
+        eingabe.placeholder = schalter.checked
+          ? "Interne Notiz — nur für dich und VanVan sichtbar…"
+          : "Antwort schreiben…";
+      });
+
+      var senden = document.getElementById("vw-pf-senden");
+      async function abschicken() {
+        var text = eingabe.value.trim();
+        if (!text) return;
+        var wahl = document.getElementById("vw-pf-projekt");
+        window.WD.knopfSperren(senden, true, "…");
+        try {
+          await api("/webdesign/admin/postfach/" + encodeURIComponent(kundeId), {
+            method: "POST",
+            body: {
+              text: text,
+              intern: schalter.checked === true,
+              projektId: wahl ? wahl.value : null,
+            },
+          });
+          eingabe.value = "";
+          schalter.checked = false;
+          feld.classList.remove("vw-pf-schreiben--intern");
+          await oeffneVerlauf(kundeId);
+          await ladePostfach();
+        } catch (f2) {
+          window.WD.meldung(meldung, f2.message, "fehler");
+        } finally { window.WD.knopfSperren(senden, false); }
+      }
+      senden.addEventListener("click", abschicken);
+      /* Strg+Enter sendet. Enter allein NICHT — in einem mehrzeiligen
+         Feld will man Absaetze machen koennen, ohne dass die halbe
+         Nachricht rausgeht. */
+      eingabe.addEventListener("keydown", function (e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === "Enter") { e.preventDefault(); abschicken(); }
+      });
+
+      /* Das Oeffnen hat serverseitig als gelesen markiert — der Zaehler
+         oben muss das sofort nachvollziehen, sonst zeigt er eine Zahl,
+         die nicht mehr stimmt. */
+      zaehlerHolen();
+    } catch (fehler) {
+      kasten.innerHTML = '<div class="vw-leer-hinweis">' + s(fehler.message) + "</div>";
+    }
+  }
+
+  function zaehlerSetzen(n) {
+    var z = document.getElementById("vw-pf-zaehler");
+    z.hidden = !n;
+    z.textContent = n || "";
+  }
+
+  async function zaehlerHolen() {
+    try {
+      var d = await api("/webdesign/admin/postfach-zaehler");
+      zaehlerSetzen(d.ungelesen);
+    } catch (e) { /* Ein fehlender Zaehler ist kein Grund, etwas zu melden. */ }
+  }
+
   async function ladeKunden() {
     var ziel = document.getElementById("vw-kunden-liste");
     ziel.innerHTML = '<div class="vw-laedt">Wird geladen…</div>';
@@ -1482,7 +2171,7 @@
 
   async function start() {
     token = tokenLesen();
-    if (token) { zeigeBereich(); ladeAnfragen(); return; }
+    if (token) { zeigeBereich(); ladeAnfragen(); zaehlerHolen(); return; }
 
     var ausweis = await ausweisHolen();
     if (ausweis) {
@@ -1492,6 +2181,10 @@
         (document.cookie.match(/dogiwd_rolle=([^;]+)/) || [])[1] === "vanvan" ? "VanVan" : "Dogfather";
       zeigeBereich();
       ladeAnfragen();
+      /* Auch auf diesem Weg. Der Ausweis ist der ÜBLICHE Einstieg (man
+         kommt von der Zugangswand und ist sofort drin) -- ohne diese
+         Zeile bliebe der Zähler ausgerechnet im Normalfall leer. */
+      zaehlerHolen();
       return;
     }
     zeigeAnmeldung();
diff --git a/webdesign/zugang.html b/webdesign/zugang.html
index a1a73c8e..71d99f82 100644
--- a/webdesign/zugang.html
+++ b/webdesign/zugang.html
@@ -21,8 +21,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd4" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd4" />
 <style>
   /* =====================================================================
      Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
@@ -177,8 +177,8 @@
   </div>
 </main>
 
-<script src="/assets/js/i18n-wd-zugang.js?v=20260822wd3"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
+<script src="/assets/js/i18n-wd-zugang.js?v=20260822wd4"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd4"></script>
 <script>
 (function () {
   "use strict";