diff --git a/animation/post8-animMail.mp4 b/animation/post8-animMail.mp4
index 1bf9f07..bffcc2c 100644
Binary files a/animation/post8-animMail.mp4 and b/animation/post8-animMail.mp4 differ
diff --git a/assets/fonts/instrument-sans-latin-ext.woff2 b/assets/fonts/instrument-sans-latin-ext.woff2
new file mode 100644
index 0000000..0ea0da0
Binary files /dev/null and b/assets/fonts/instrument-sans-latin-ext.woff2 differ
diff --git a/assets/fonts/instrument-sans-latin.woff2 b/assets/fonts/instrument-sans-latin.woff2
new file mode 100644
index 0000000..8611e41
Binary files /dev/null and b/assets/fonts/instrument-sans-latin.woff2 differ
diff --git a/post8.html b/post8.html
index 9649f04..a65b270 100644
--- a/post8.html
+++ b/post8.html
@@ -17,6 +17,16 @@ if (location.search.indexOf("nur=anim") >= 0)
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>PostGrid Post 8 · E-Mail-Marketing</title>
 <link rel="stylesheet" href="./assets/fonts/manrope.css">
+<style>
+  /* Die Schrift des Produkts, fuer die nachgebauten Oberflaechen in den
+     Zeichnungen. Dieselben Dateien wie in hivegrid-cloud/apps/web/public/fonts. */
+  @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700;
+    src: url(./assets/fonts/instrument-sans-latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+  @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700;
+    src: url(./assets/fonts/instrument-sans-latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
+</style>
 <style>
   /* ─── HiveGrid design tokens (mirrored from app/globals.css) ─────────────
      Plain hex on purpose — the export libraries choke on oklch()/Tailwind.
@@ -1468,7 +1478,7 @@ if (location.search.indexOf("nur=anim") >= 0)
       layouts: [{ id: "standard", label: "Standard" }],
       eyebrow: "Der Baukasten",
       head: 'Die Mail baust du<br><span class="a">aus Bausteinen.</span>',
-      body: "Überschrift, Text, Bild, Knopf, Produkte. Aus der Leiste holen und an die richtige Stelle setzen.",
+      body: "Überschrift, Text, Bild, Button. Aus der Leiste ziehen und an die richtige Stelle setzen.",
       vis: "mail", visW: 896, visLeft: 92, visBottom: 168,
     },
   ];
@@ -3936,152 +3946,321 @@ if (location.search.indexOf("nur=anim") >= 0)
 
 
   /* ═══ Post 8 · E-Mail-Marketing ══════════════════════════════════════════
-     Quelle ist diesmal nicht das Pitch-Paket, sondern das Produkt selbst:
-     hivegrid-cloud/apps/web/app/components/screens/email-marketing/. Das
-     Pitch-Paket kennt den Bildschirm nicht -- "Kampagne" kommt dort nur als
-     Lead-Quelle im Dashboard vor. Gezeichnet ist also die Oberflaeche, die
-     wirklich laeuft.
+     Neu gebaut am 20.10.2026 aus den Komponenten von hivegrid-cloud
+     (apps/web/app/ui/components und ui/theme.css, Stand origin/main vom
+     19.10.). Die erste Fassung hatte ein eigenes Design: Marken mit Rand,
+     Haekchen-Chips, Reiter "Kampagnen / Segmente / Templates" und
+     Produktkacheln im Baukasten. Nichts davon gibt es im Produkt so.
 
-     Alle Beschriftungen stehen woertlich in
-     apps/web/public/locales/de/translations.json unter emailMarketing:
-     die drei Reiter, die Kennzahlen, der Versandverlauf, die sechs Punkte
-     der Pre-Send-Pruefung, die Filterfelder, die Ausschlussgruende, der
-     Satz auf dem Sendeknopf.
+     Jetzt bildet jede Zeichnung einen Bildschirm nach, den es gibt, mit den
+     Massen und Farben der Komponenten:
+       Bewegtbild   Kampagnenbericht       screens/email-marketing/EmailMarketingDetailScreens.tsx
+       Zielgruppe   Zielgruppe bearbeiten  SegmentEditorDialog.tsx, SegmentFilterBuilder.tsx
+       Vorlagen     Vorlagenseite          EmailMarketingTemplateScreens.tsx
+       Pruefung     Empfaenger & Versand   EmailMarketingCampaignEditorPage.tsx
+       Baukasten    Gestaltung             CampaignContentBuilder.tsx, CampaignBuilderSidebar.tsx
+     Die Beschriftungen stehen woertlich in locales/de/translations.json
+     unter emailMarketing.
 
-     WAS ERFUNDEN IST. Der Kampagnenname, die Betreffzeilen und die Zahlen.
-     Das ist Demo-Inhalt wie "Waermepumpe Mueller" in Post 5 und 6 -- die
-     Quelle liefert keine, weil die Seeds keine Templates anlegen. Die Namen
-     der Vorlagen sind dagegen zitiert, aus produkt-daten.ts der Website:
-     "Angebotsbestaetigung, Wartungserinnerung, Geburtstagsgruss: alles als
-     Vorlage".
+     Schrift ist Instrument Sans wie im Produkt (die Ueberschriften der
+     Slides bleiben Manrope). Die Icons sind Lucide: Subframes Feather-Satz
+     hat dieselben Formen, Strich 2 auf 24, runde Enden.
 
-     Die Zahlen gehen auf: 210 Kontakte treffen den Filter, 62 fallen raus
-     (31 abgemeldet, 24 ohne Adresse, 7 gesperrt), 148 bleiben -- und 148 ist
-     die Zahl auf dem Sendeknopf und bei "Zugestellt". Wer nachrechnet, soll
-     nichts finden.
+     MASSSTAB. Die Komponenten sind in Produkt-Pixeln angegeben und werden
+     mit PZ vergroessert, damit sie auf der Slide lesbar sind, wie bei einem
+     Browserzoom. Koordinaten sind Pixel der Zeichnung, nur Schriften, Icons
+     und Komponentenhoehen laufen ueber pz().
 
-     Die Farben sind aus ui/theme.css aufgeloest und nicht aus einem Bild
-     geschaetzt. Das Muster einer Marke ist immer dasselbe: Flaeche ist der
-     100er, Rand der 200er, Schrift der 700er derselben Farbe. */
-  const EM_GRUEN = { flaeche: "#DCFCE4", rand: "#BAF8CB", zeichen: "#148134" };
-  const EM_GELB  = { flaeche: "#FCF6C5", rand: "#FAEB8E", zeichen: "#9B5E0D" };
-  const EM_OCEAN = { flaeche: "#E1F4FD", rand: "#BCEAFB", zeichen: "#08739C" };
-  const EM_GRAU  = { flaeche: "#F0F0F0", rand: "#E5E5E5", zeichen: "#505057" };
+     WAS ERFUNDEN IST: Kampagnenname, Betreffzeilen, Texte, Daten und
+     Zahlen. Demo-Inhalt wie in den anderen Posts. Die Zahlen gehen auf: 210
+     Kontakte treffen den Filter, 62 fallen raus (31 abgemeldet, 24 ohne
+     Adresse, 7 gesperrt), 148 bleiben, 148 sind zugestellt. 62 % davon
+     oeffnen (92), 18 % klicken (27). */
 
-  const EM_B = 720;          // Innenbreite der Karte, wie beim Form Builder
-  /* Kopfhoehe: Name, Reiter, Trennlinie. Die Linie liegt bei 92, der Inhalt
-     beginnt 28 darunter -- derselbe Wert wie unten zum Rand. Dieselbe
-     Rechnung wie FB_KOPF in Post 7, wo vier Einheiten zu wenig waren. */
-  const EM_KOPF = 120;
-  const EM_REITER = ["Kampagnen", "Segmente", "Templates"];
+  const LUCIDE = {
+    "arrow-down": "<path d=\"M12 5v14\"/> <path d=\"m19 12-7 7-7-7\"/>",
+    "arrow-right": "<path d=\"M5 12h14\"/> <path d=\"m12 5 7 7-7 7\"/>",
+    "arrow-up-down": "<path d=\"m21 16-4 4-4-4\"/> <path d=\"M17 20V4\"/> <path d=\"m3 8 4-4 4 4\"/> <path d=\"M7 4v16\"/>",
+    "arrow-up": "<path d=\"m5 12 7-7 7 7\"/> <path d=\"M12 19V5\"/>",
+    "bookmark": "<path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z\"/>",
+    "calendar": "<path d=\"M8 2v4\"/> <path d=\"M16 2v4\"/> <rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/> <path d=\"M3 10h18\"/>",
+    "check": "<path d=\"M20 6 9 17l-5-5\"/>",
+    "chevron-down": "<path d=\"m6 9 6 6 6-6\"/>",
+    "circle-dot": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <circle cx=\"12\" cy=\"12\" r=\"1\"/>",
+    "clock": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <polyline points=\"12 6 12 12 16 14\"/>",
+    "code": "<polyline points=\"16 18 22 12 16 6\"/> <polyline points=\"8 6 2 12 8 18\"/>",
+    "copy": "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/> <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>",
+    "corner-up-left": "<polyline points=\"9 14 4 9 9 4\"/> <path d=\"M20 20v-7a4 4 0 0 0-4-4H4\"/>",
+    "corner-up-right": "<polyline points=\"15 14 20 9 15 4\"/> <path d=\"M4 20v-7a4 4 0 0 1 4-4h12\"/>",
+    "ellipsis": "<circle cx=\"12\" cy=\"12\" r=\"1\"/> <circle cx=\"19\" cy=\"12\" r=\"1\"/> <circle cx=\"5\" cy=\"12\" r=\"1\"/>",
+    "eye": "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"/> <circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+    "file-text": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/> <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/> <path d=\"M10 9H8\"/> <path d=\"M16 13H8\"/> <path d=\"M16 17H8\"/>",
+    "filter": "<polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>",
+    "grip-vertical": "<circle cx=\"9\" cy=\"12\" r=\"1\"/> <circle cx=\"9\" cy=\"5\" r=\"1\"/> <circle cx=\"9\" cy=\"19\" r=\"1\"/> <circle cx=\"15\" cy=\"12\" r=\"1\"/> <circle cx=\"15\" cy=\"5\" r=\"1\"/> <circle cx=\"15\" cy=\"19\" r=\"1\"/>",
+    "heading": "<path d=\"M6 12h12\"/> <path d=\"M6 20V4\"/> <path d=\"M18 20V4\"/>",
+    "image": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/> <circle cx=\"9\" cy=\"9\" r=\"2\"/> <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>",
+    "info": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M12 16v-4\"/> <path d=\"M12 8h.01\"/>",
+    "layout-template": "<rect width=\"18\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"/> <rect width=\"9\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"/> <rect width=\"5\" height=\"7\" x=\"16\" y=\"14\" rx=\"1\"/>",
+    "mail": "<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/> <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>",
+    "megaphone": "<path d=\"m3 11 18-5v12L3 14v-3z\"/> <path d=\"M11.6 16.8a3 3 0 1 1-5.8-1.6\"/>",
+    "minus": "<path d=\"M5 12h14\"/>",
+    "monitor": "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/> <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/> <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/>",
+    "mouse-pointer-click": "<path d=\"M14 4.1 12 6\"/> <path d=\"m5.1 8-2.9-.8\"/> <path d=\"m6 12-1.9 2\"/> <path d=\"M7.2 2.2 8 5.1\"/> <path d=\"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z\"/>",
+    "mouse-pointer": "<path d=\"M12.586 12.586 19 19\"/> <path d=\"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z\"/>",
+    "plus": "<path d=\"M5 12h14\"/> <path d=\"M12 5v14\"/>",
+    "refresh-cw": "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/> <path d=\"M21 3v5h-5\"/> <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/> <path d=\"M8 16H3v5\"/>",
+    "send": "<path d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z\"/> <path d=\"m21.854 2.147-10.94 10.939\"/>",
+    "settings": "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"/> <circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+    "smartphone": "<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"/> <path d=\"M12 18h.01\"/>",
+    "trash-2": "<path d=\"M3 6h18\"/> <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/> <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/> <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/> <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>",
+    "triangle-alert": "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/> <path d=\"M12 9v4\"/> <path d=\"M12 17h.01\"/>",
+    "type": "<polyline points=\"4 7 4 4 20 4 20 7\"/> <line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/> <line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/>",
+    "user": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/> <circle cx=\"12\" cy=\"7\" r=\"4\"/>",
+    "users": "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/> <circle cx=\"9\" cy=\"7\" r=\"4\"/> <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/> <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/>",
+    "x": "<path d=\"M18 6 6 18\"/> <path d=\"m6 6 12 12\"/>"
+    };
 
-  /* Eine Marke wie BadgeFeedback. Die Breite haengt am Text, also gibt es sie
-     auch einzeln -- der Aufrufer muss oft wissen, wo die Marke endet. */
-  const emMarkeB = (t, gr) => messen(t, gr || 14, 700) + (gr || 14) * 1.9;
-  function emMarke(x, ym, t, ton, gr) {
-    gr = gr || 14;
-    const b = emMarkeB(t, gr), h = gr + 13;
-    let g = '<rect x="' + n1(x) + '" y="' + n1(ym - h / 2) + '" width="' + n1(b) +
-      '" height="' + n1(h) + '" rx="' + n1(h / 2) + '" fill="' + ton.flaeche +
-      '" stroke="' + ton.rand + '" stroke-width="1.2"/>';
-    g += uiText(x + b / 2, ym + gr * .36, t, gr, 700, ton.zeichen, { anker: "middle" });
-    return g;
-  }
+  const PZ = 1.15;
+  const pz = v => v * PZ;
+  const P_RAD = 6;      // rounded-md, kompiliert 6 px (globals.css:1137)
+  const P_B = 788;      // Breite der Zeichnung
+  const P_PAD = 28;     // Innenabstand der Seite
+  const P_KOPF = 84;    // Kopfzeile wie PageHeader
 
-  /* Ein Punkt der Pre-Send-Pruefung: Marke mit Haken davor. */
-  function emCheck(x, ym, t, ton) {
-    const gr = 14, b = messen(t, gr, 700) + 46, h = 30;
-    let g = '<rect x="' + n1(x) + '" y="' + n1(ym - h / 2) + '" width="' + n1(b) +
-      '" height="' + h + '" rx="' + (h / 2) + '" fill="' + ton.flaeche +
-      '" stroke="' + ton.rand + '" stroke-width="1.2"/>';
-    g += ikon("check", x + 17, ym, 13, ton.zeichen);
-    g += uiText(x + 30, ym + 5, t, gr, 700, ton.zeichen);
-    return g;
-  }
+  /* Die Rollen aus ui/theme.css, aufgeloest. */
+  const P = {
+    text: "#24242B", text2: "#505057", text3: "#6D6D71", leise: "#CECECF",
+    icon3: "#858589", link: "#08739C",
+    rand: "#E5E5E5", randStark: "#B5B5B7",
+    seite: "#F5F4F4", karte: "#FAFAFA", tertiaer: "#F0F0F0", weiss: "#FFFFFF",
+  };
+  /* BadgeFeedback in der Variante subtle: Flaeche, Schrift, Punkt. */
+  const P_TON = {
+    positiv: { f: "#DCFCE4", t: "#148134", p: "#148134" },
+    warnung: { f: "#FCF6C5", t: "#24242B", p: "#9B5E0D" },
+    info:    { f: "#E1F4FD", t: "#24242B", p: "#08739C" },
+    neutral: { f: "#F0F0F0", t: "#24242B", p: "#24242B" },
+  };
+  /* Button: Flaeche, Schrift, Rand, Icon. */
+  const P_KNOPF = {
+    primaer:   { f: "#24242B", t: "#FAFAFA" },
+    sekundaer: { f: "#E3F1FF", t: "#24242B" },
+    tertiaer:  { f: "#F5F4F4", t: "#24242B", r: "#E5E5E5" },
+    geist:     { f: "none",    t: "#24242B", i: "#505057" },
+    aus:       { f: "#F0F0F0", t: "#CECECF" },
+  };
+  /* Karte und InlineMessage: Flaeche und Rand je Variante. */
+  const P_KARTE = {
+    std:     ["#FAFAFA", "#E5E5E5"],
+    weiss:   ["#FFFFFF", "#E5E5E5"],
+    neutral: ["#F0F0F0", "#E5E5E5"],
+    info:    ["#E1F4FD", "#BCEAFB"],
+    warnung: ["#FCF6C5", "#FAEB8E"],
+  };
 
-  /* Eine Kennzahlkarte, wie StatsCard: Bezeichnung, grosse Zahl, Hinweis. */
-  function emKpi(x, y, b, h, label, wert, unten) {
-    let g = '<path d="' + rundRechteck(x, y, b, h, 10) + '" fill="' + FL_KARTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += uiText(x + 18, y + 31, label, 14, 700, CHAT_TEXT3);
-    g += uiText(x + 18, y + 74, wert, 34, 800, CHAT_TEXT);
-    g += uiText(x + 18, y + h - 15, unten, 13, 500, CHAT_TEXT3);
-    return g;
-  }
-
-  /* Eine Station des Versandverlaufs. Erreicht: gruene Marke auf gruenem
-     Grund. Offen: graue Marke, grauer Grund, und das Datum steht als
-     "Noch ausstehend" da -- so steht es in der Quelle. */
-  function emStation(x, y, b, h, t, an) {
-    const ton = an ? EM_GRUEN : EM_GRAU;
-    let g = '<path d="' + rundRechteck(x, y, b, h, 10) + '" fill="' +
-      (an ? EM_GRUEN.flaeche : FL_SPALTE) + '" stroke="' +
-      (an ? EM_GRUEN.rand : CHAT_RAND) + '" stroke-width="1.2"/>';
-    g += emMarke(x + 16, y + 27, an ? "Erreicht" : "Offen", ton, 13);
-    g += uiText(x + 16, y + h - 17, t, 15, 700, an ? CHAT_TEXT : CHAT_TEXT3);
-    return g;
-  }
-
-  /* Eine Zeile des Filters: Kontaktmerkmal links, Wert rechts, beides als
-     Auswahlfeld. Zwei gleich breite Haelften, wie im Baukasten. */
-  function emBedingung(x, y, b, feld, wert) {
-    const H = 52, luecke = 12, hb = (b - luecke) / 2;
-    const kasten = (kx, txt) => '<path d="' + rundRechteck(kx, y, hb, H, 8) + '" fill="' +
-      FL_KARTE + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>' +
-      uiText(kx + 16, y + H / 2 + 6, txt, 16, 600, CHAT_TEXT) +
-      ikon("caret-down", kx + hb - 20, y + H / 2, 13, CHAT_TEXT3);
-    return kasten(x, feld) + kasten(x + hb + luecke, wert);
-  }
-
-  /* Eine Zeile der Vorlagenliste: Name, Betreff, Typ. */
-  function emVorlage(x, y, b, v, aktiv) {
-    const H = 64;
-    let g = '<path d="' + rundRechteck(x, y, b, H, 10) + '" fill="' + FL_KARTE +
-      '" stroke="' + (aktiv ? EM_OCEAN.zeichen : CHAT_RAND) + '" stroke-width="' +
-      (aktiv ? 1.8 : 1.2) + '"/>';
-    g += ikon("envelope", x + 30, y + H / 2, 18, CHAT_TEXT2);
-    g += uiText(x + 52, y + H / 2 - 4, v.name, 17, 700, CHAT_TEXT);
-    g += uiText(x + 52, y + H / 2 + 18, v.betreff, 14, 500, CHAT_TEXT3);
-    const mb = emMarkeB(v.typ, 13);
-    g += emMarke(x + b - 20 - mb, y + H / 2, v.typ, v.typ === "Standard" ? EM_GRAU : EM_OCEAN, 13);
-    return g;
-  }
-
-  /* Der Rahmen, in dem alle vier Zeichnungen sitzen: die Karte mit Kopfzeile,
-     Name, Zustandsmarke und den drei Reitern. Welcher Reiter aktiv ist,
-     entscheidet die Slide -- die Segmente liegen im Produkt auf einem
-     eigenen. */
-  function emRahmen(inhaltH, inhalt, o) {
+  /* Text in Instrument Sans. gr ist die Groesse im Produkt. */
+  const pText = (x, y, t, gr, gew, farbe, o) => {
     o = o || {};
-    const RAND = 34, KOPF = EM_KOPF, B = EM_B + 2 * RAND;
-    const titel = o.titel || "Wartungserinnerung Herbst";
-    let g = "";
-    g += ikon(o.zeichen || "envelope", RAND + 14, 33, 20, CHAT_TEXT);
-    g += uiText(RAND + 32, 40, titel, 20, 800, CHAT_TEXT);
-    const nb = messen(titel, 20, 800);
-    if (o.marke) g += emMarke(RAND + 46 + nb, 33, o.marke[0], o.marke[1]);
+    return '<text x="' + n1(x) + '" y="' + n1(y) + '" font-family="Instrument Sans, sans-serif" ' +
+      'font-size="' + n1(pz(gr)) + '" font-weight="' + gew + '" fill="' + farbe + '"' +
+      (o.anker ? ' text-anchor="' + o.anker + '"' : "") + ">" + wfEsc(t) + "</text>";
+  };
+  /* Wie messen(), nur fuer Instrument Sans. Die Seite laedt die Schrift
+     beim Start, bevor zum ersten Mal gemessen wird. */
+  const pMess = (() => {
+    let ctx = null;
+    const zwischen = new Map();
+    return (text, gr, gew) => {
+      const s = gew + "|" + gr + "|" + text;
+      if (zwischen.has(s)) return zwischen.get(s);
+      if (!ctx) ctx = document.createElement("canvas").getContext("2d");
+      ctx.font = gew + " " + pz(gr) + 'px "Instrument Sans", sans-serif';
+      const b = ctx.measureText(text).width;
+      zwischen.set(s, b);
+      return b;
+    };
+  })();
+  /* Mitte einer Textzeile in einem Kasten: Grundlinie fuer Instrument Sans. */
+  const pMitte = (ym, gr) => ym + pz(gr) * .35;
 
-    let fx = RAND + 4;
-    EM_REITER.forEach((r, i) => {
-      const aktiv = i === (o.reiter || 0);
-      const b = messen(r, 16, aktiv ? 800 : 600) + 34;
-      g += uiText(fx + b / 2, 80, r, 16, aktiv ? 800 : 600,
-                  aktiv ? CHAT_TEXT : CHAT_TEXT3, { anker: "middle" });
-      if (aktiv) g += '<path d="M' + n1(fx) + ',92H' + n1(fx + b) + '" stroke="' +
-        CHAT_TEXT + '" stroke-width="2.6"/>';
-      fx += b + 6;
-    });
-    g += '<path d="M0,92H' + n1(B) + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += '<g transform="translate(' + RAND + ',' + KOPF + ')">' + inhalt + '</g>';
-    const H = o.h !== undefined ? o.h : KOPF + inhaltH + RAND;
-    return stapelKasten(B, H, 22, g);
+  function pIkon(name, cx, cy, gr, farbe) {
+    const s = pz(gr);
+    return '<g transform="translate(' + n1(cx - s / 2) + ',' + n1(cy - s / 2) + ') scale(' +
+      (s / 24).toFixed(4) + ')" fill="none" stroke="' + farbe + '" stroke-width="2" ' +
+      'stroke-linecap="round" stroke-linejoin="round">' + LUCIDE[name] + "</g>";
   }
 
+  function pKarte(x, y, b, h, art, radius) {
+    const A = P_KARTE[art || "std"];
+    return '<path d="' + rundRechteck(x, y, b, h, radius || P_RAD) + '" fill="' + A[0] +
+      '" stroke="' + A[1] + '" stroke-width="1.2"/>';
+  }
+
+  /* BadgeFeedback: Pille ohne Rand, 4-px-Punkt, Schrift 14/500. Links an x,
+     mittig auf ym. Liefert Zeichnung und Breite. */
+  function pBadge(x, ym, t, ton, klein) {
+    const T = P_TON[ton], h = pz(klein ? 20 : 24), px = pz(10), punkt = pz(4), luecke = pz(8);
+    const b = px + punkt + luecke + pMess(t, 14, 500) + px;
+    let g = '<rect x="' + n1(x) + '" y="' + n1(ym - h / 2) + '" width="' + n1(b) + '" height="' +
+      n1(h) + '" rx="' + n1(h / 2) + '" fill="' + T.f + '"/>';
+    g += '<circle cx="' + n1(x + px + punkt / 2) + '" cy="' + n1(ym) + '" r="' + n1(punkt / 2) +
+      '" fill="' + T.p + '"/>';
+    g += pText(x + px + punkt + luecke, pMitte(ym, 14), t, 14, 500, T.t);
+    return { svg: g, b };
+  }
+  const pBadgeB = (t, klein) => pz(10) + pz(4) + pz(8) + pMess(t, 14, 500) + pz(10);
+
+  /* Button: klein 32 hoch, mittel 36. Beschriftung 16/400, Icon 16, Radius
+     rounded-md. o.ikon links, o.ikonRechts rechts. */
+  function pKnopfB(t, o) {
+    o = o || {};
+    const px = pz(o.klein ? 12 : 16), luecke = pz(o.klein ? 8 : 12);
+    return px + (o.ikon ? pz(16) + luecke : 0) + pMess(t, 16, 400) +
+      (o.ikonRechts ? luecke + pz(16) : 0) + px;
+  }
+  function pKnopf(x, y, t, art, o) {
+    o = o || {};
+    const K = P_KNOPF[art], h = pz(o.klein ? 32 : 36), px = pz(o.klein ? 12 : 16);
+    const luecke = pz(o.klein ? 8 : 12), b = o.b || pKnopfB(t, o), ym = y + h / 2;
+    let g = '<path d="' + rundRechteck(x, y, b, h, P_RAD) + '" fill="' + K.f + '"' +
+      (K.r ? ' stroke="' + K.r + '" stroke-width="1.2"' : "") + "/>";
+    let cx = x + px;
+    if (o.ikon) { g += pIkon(o.ikon, cx + pz(8), ym, 16, K.i || K.t); cx += pz(16) + luecke; }
+    g += pText(cx, pMitte(ym, 16), t, 16, 400, K.t);
+    if (o.ikonRechts) g += pIkon(o.ikonRechts, cx + pMess(t, 16, 400) + luecke + pz(8), ym, 16, K.i || K.t);
+    return { svg: g, b, h };
+  }
+
+  /* Ein Eingabefeld oder Auswahlfeld mit Beschriftung darueber: Feld 36
+     hoch, Radius 4, Rand border-strong, Flaeche surface-neutral-primary,
+     Beschriftung 16/500 in text-secondary, 6 px Abstand. */
+  function pFeld(x, y, b, o) {
+    let g = "", fy = y;
+    if (o.label) { g += pText(x, y + pz(16), o.label, 16, 500, P.text2); fy = y + pz(22) + pz(6); }
+    const h = o.hoch || pz(36);
+    g += '<path d="' + rundRechteck(x, fy, b, h, 4) + '" fill="' + P.seite + '" stroke="' +
+      P.randStark + '" stroke-width="1.2"/>';
+    const zeilen = [].concat(o.wert || o.platzhalter || "");
+    zeilen.forEach((z, i) => {
+      const zy = o.hoch ? fy + pz(10) + pz(16) + i * pz(22) : pMitte(fy + h / 2, 16);
+      g += pText(x + pz(12), zy, z, 16, 400, o.wert ? P.text2 : P.leise);
+    });
+    if (o.auswahl) g += pIkon("chevron-down", x + b - pz(12) - pz(8), fy + h / 2, 16, P.icon3);
+    let unten = fy + h;
+    if (o.hilfe) { g += pText(x, unten + pz(6) + pz(14), o.hilfe, 14, 400, P.text3); unten += pz(6) + pz(18); }
+    return { svg: g, h: unten - y };
+  }
+
+  /* Tabs: Reiter 40 hoch, oben rund, unten zwei Pixel Rand. Der aktive hat
+     die Fuellung background-information-subtle und den dunklen Rand. */
+  function pTabs(x, y, b, reiter, aktiv, innen) {
+    const h = pz(40);
+    let g = '<path d="M' + n1(x) + "," + n1(y + h) + "H" + n1(x + b) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    let rx = x;
+    reiter.forEach((r, i) => {
+      const an = i === aktiv, rb = 2 * (innen || pz(16)) + pMess(r, 14, an ? 500 : 400);
+      g += '<path d="M' + n1(rx) + "," + n1(y + h) + "V" + n1(y + P_RAD) + "a" + P_RAD + "," + P_RAD +
+        " 0 0 1 " + P_RAD + "," + (-P_RAD) + "H" + n1(rx + rb - P_RAD) + "a" + P_RAD + "," + P_RAD +
+        " 0 0 1 " + P_RAD + "," + P_RAD + "V" + n1(y + h) + 'Z" fill="' + (an ? "#E1F4FD" : P.karte) + '"/>';
+      g += '<path d="M' + n1(rx) + "," + n1(y + h - 1) + "H" + n1(rx + rb) + '" stroke="' +
+        (an ? P.text : P.rand) + '" stroke-width="2.3"/>';
+      g += pText(rx + rb / 2, pMitte(y + h / 2, 14), r, 14, an ? 500 : 400, an ? P.text : P.text2, { anker: "middle" });
+      rx += rb;
+    });
+    return g;
+  }
+
+  /* ToggleGroup, klein: Rahmen 32 hoch, Innenabstand 2, aktiver Eintrag
+     dunkel mit heller Schrift. */
+  function pUmschalter(xRechts, y, eintraege, aktiv) {
+    const h = pz(32), ih = pz(28), px = pz(10);
+    const breiten = eintraege.map(e => 2 * px + pz(16) + pz(6) + pMess(e[1], 14, 500));
+    const b = breiten.reduce((a, c) => a + c, 0) + pz(2) * (eintraege.length + 1);
+    const x = xRechts - b;
+    let g = '<path d="' + rundRechteck(x, y, b, h, P_RAD) + '" fill="' + P.tertiaer + '" stroke="' +
+      P.rand + '" stroke-width="1.2"/>';
+    let ex = x + pz(2);
+    eintraege.forEach((e, i) => {
+      const an = i === aktiv, farbe = an ? "#FAFAFA" : P.text;
+      if (an) g += '<path d="' + rundRechteck(ex, y + pz(2), breiten[i], ih, 4) + '" fill="' + P.text + '"/>';
+      g += pIkon(e[0], ex + px + pz(8), y + h / 2, 16, farbe);
+      g += pText(ex + px + pz(16) + pz(6), pMitte(y + h / 2, 14), e[1], 14, 500, farbe);
+      ex += breiten[i] + pz(2);
+    });
+    return g;
+  }
+
+  /* Tabelle: Kopfzeile 32 hoch in background-neutral-tertiary, Schrift
+     12/500 mit 12-px-Icon, Zeilen in surface-secondary mit Trennlinien.
+     spalten: [Titel, Icon, Breite]. zellen(i, j, x, ym, b) zeichnet eine
+     Zelle. */
+  function pTabelle(x, y, spalten, zeilen, zh, zelle) {
+    const kh = pz(32), b = spalten.reduce((a, s) => a + s[2], 0);
+    const h = kh + zeilen * zh;
+    let g = '<rect x="' + n1(x) + '" y="' + n1(y) + '" width="' + n1(b) + '" height="' + n1(h) +
+      '" fill="' + P.karte + '"/>';
+    g += '<rect x="' + n1(x) + '" y="' + n1(y) + '" width="' + n1(b) + '" height="' + n1(kh) +
+      '" fill="' + P.tertiaer + '"/>';
+    let sx = x;
+    spalten.forEach(([t, ikon, sb], j) => {
+      g += pIkon(ikon, sx + pz(12) + pz(6), y + kh / 2, 12, P.icon3);
+      g += pText(sx + pz(12) + pz(12) + pz(4), pMitte(y + kh / 2, 12), t, 12, 500, P.text2);
+      for (let i = 0; i < zeilen; i++) g += zelle(i, j, sx, y + kh + i * zh + zh / 2, sb);
+      if (j < spalten.length - 1) g += '<path d="M' + n1(sx + sb) + "," + n1(y) + "V" + n1(y + h) +
+        '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+      sx += sb;
+    });
+    for (let i = 0; i <= zeilen; i++) g += '<path d="M' + n1(x) + "," + n1(y + kh + i * zh) + "H" +
+      n1(x + b) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    g += '<rect x="' + n1(x) + '" y="' + n1(y) + '" width="' + n1(b) + '" height="' + n1(h) +
+      '" fill="none" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    return { svg: g, h };
+  }
+
+  /* Der Rahmen um jede Zeichnung: eine Seite des Produkts. Oben die
+     Kopfzeile wie PageHeader (surface-secondary, Icon in icon-tertiary,
+     Titel 600, rechts die Knoepfe), darunter die Seitenflaeche
+     surface-neutral-primary. kopf.rechts zeichnet der Aufrufer selbst, er
+     kennt P_B, P_PAD und P_KOPF. */
+  let pNr = 0;
+  function pRahmen(h, inhalt, kopf) {
+    const id = "prahmen" + (++pNr);
+    let g = '<clipPath id="' + id + '"><path d="' + rundRechteck(0, 0, P_B, h, 22) + '"/></clipPath>';
+    g += '<g clip-path="url(#' + id + ')"><rect width="' + P_B + '" height="' + n1(h) + '" fill="' +
+      P.seite + '"/><rect width="' + P_B + '" height="' + P_KOPF + '" fill="' + P.karte + '"/></g>';
+    g += '<path d="M0,' + P_KOPF + "H" + P_B + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    const ym = P_KOPF / 2;
+    let x = P_PAD;
+    if (kopf.ikonKasten) {
+      /* IconWithBackground, Variante information, mittel: 28er Kasten. */
+      const s = pz(28);
+      g += '<rect x="' + n1(x) + '" y="' + n1(ym - s / 2) + '" width="' + n1(s) + '" height="' + n1(s) +
+        '" rx="4" fill="#E1F4FD"/>' + pIkon(kopf.ikon, x + s / 2, ym, 20, "#08739C");
+      x += s + pz(12);
+    } else {
+      g += pIkon(kopf.ikon, x + pz(12), ym, 24, P.icon3);
+      x += pz(24) + pz(8);
+    }
+    g += pText(x, pMitte(ym, 24), kopf.titel, 24, 600, P.text);
+    x += pMess(kopf.titel, 24, 600) + pz(12);
+    if (kopf.badge) g += pBadge(x, ym, kopf.badge[0], kopf.badge[1]).svg;
+    g += kopf.rechts || "";
+    g += inhalt;
+    return stapelKasten(P_B, h, 22, g);
+  }
+  /* Ein Knopf rechts in der Kopfzeile. */
+  const pKopfKnopf = (t, art, o) => {
+    const b = pKnopfB(t, o);
+    return pKnopf(P_B - P_PAD - b, (P_KOPF - pz(36)) / 2, t, art, o);
+  };
+
   /* ─── Slide 2 · Die Zielgruppe ───────────────────────────────────────────
-     Der Segment-Baukasten. Die Trefferlogik oben, darunter drei Bedingungen,
-     darunter die Vorschau mit der Zahl und den drei Gruenden, aus denen
-     Kontakte herausfallen. Die Gruende sind nicht ausgedacht: exclusion.*
-     kennt fuenf, drei davon stehen hier. */
+     Der Dialog "Zielgruppe bearbeiten" (SegmentEditorDialog.tsx): Kopf mit
+     IconWithBackground und Titel, darunter die Schritte "Wer gehoert dazu?"
+     mit dem Filter-Baukasten und "Vorschau der Empfaenger". Die Schritte
+     "Name" und "Aktualisierung" fehlen hier aus Platzgruenden: mit ihnen
+     wurde die Karte so hoch, dass sie in den Text der Slide ragte. Die
+     Ausschlussgruende sind die der Quelle (exclusion.*), drei von fuenf. */
   const EM_FILTER = [
     ["Kontaktstatus", "Bestandskunde"],
     ["Schlagwort", "Heizung"],
@@ -4090,383 +4269,310 @@ if (location.search.indexOf("nur=anim") >= 0)
   const EM_RAUS = [["Abgemeldet", "31"], ["Keine E-Mail-Adresse", "24"], ["Auf der Sperrliste", "7"]];
 
   function visSegment() {
-    let g = "", y = 0;
-    g += uiText(0, 16, "Trefferlogik", 15, 700, CHAT_TEXT3);
-    y = 30;
-    g += '<path d="' + rundRechteck(0, y, EM_B, 52, 8) + '" fill="' + FL_KARTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += uiText(16, y + 32, "Alle Bedingungen erfüllen", 16, 600, CHAT_TEXT);
-    g += ikon("caret-down", EM_B - 20, y + 26, 13, CHAT_TEXT3);
-    y += 52 + 14;
+    const B = P_B - 2 * P_PAD, x0 = P_PAD;
+    let g = "", y = P_KOPF + P_PAD;
+    const schritt = (t, hinweis) => {
+      g += pText(x0, y + pz(16), t, 16, 600, P.text);
+      y += pz(24);
+      if (hinweis) { g += pText(x0, y + pz(14), hinweis, 14, 400, P.text3); y += pz(21); }
+      y += pz(8);
+    };
 
-    EM_FILTER.forEach(([f, w]) => { g += emBedingung(0, y, EM_B, f, w); y += 52 + 10; });
-
-    g += '<path d="' + rundRechteck(0, y, EM_B, 52, 8) + '" fill="none" stroke="' +
-      CHAT_RAND + '" stroke-width="1.6" stroke-dasharray="7 6"/>';
-    g += ikon("plus", 300, y + 26, 16, CHAT_TEXT3);
-    g += uiText(316, y + 32, "Bedingung hinzufügen", 16, 700, CHAT_TEXT3);
-    y += 52 + 24;
-
-    /* Die Vorschau. Die Ueberschrift ist der Satz aus preview.eligible,
-       eingesetzt statt umschrieben. */
-    const VH = 152;
-    g += '<path d="' + rundRechteck(0, y, EM_B, VH, 10) + '" fill="' + EM_OCEAN.flaeche +
-      '" stroke="' + EM_OCEAN.rand + '" stroke-width="1.3"/>';
-    g += ikon("funnel", 30, y + 34, 18, EM_OCEAN.zeichen);
-    g += uiText(52, y + 41, "148 von 210 Kontakten zulässig", 19, 800, CHAT_TEXT);
-    const kb = (EM_B - 40 - 2 * 12) / 3;
-    EM_RAUS.forEach(([t, n], i) => {
-      const kx = 20 + i * (kb + 12), ky = y + 58;
-      g += '<path d="' + rundRechteck(kx, ky, kb, 74, 8) + '" fill="' + FL_KARTE +
-        '" stroke="' + EM_OCEAN.rand + '" stroke-width="1.2"/>';
-      g += uiText(kx + 14, ky + 24, t, 13, 700, CHAT_TEXT3);
-      g += uiText(kx + 14, ky + 52, n, 24, 800, CHAT_TEXT);
-      g += uiText(kx + 14 + messen(n, 24, 800) + 8, ky + 52, "ausgeschlossen", 12, 500, CHAT_TEXT3);
+    schritt("Wer gehört dazu?");
+    /* Die Gruppe: eine Karte mit der Trefferlogik, darin die Bedingungen
+       als eigene Zeilen mit Rand, unten der Knopf fuer die naechste. */
+    const gp = pz(12), zp = pz(8), zeileH = pz(36) + 2 * zp, gb = B;
+    const gruppeH = gp + pz(36) + pz(12) + EM_FILTER.length * (zeileH + pz(8)) + pz(4) + pz(32) + gp;
+    g += pKarte(x0, y, gb, gruppeH, "std");
+    let gy = y + gp;
+    g += pFeld(x0 + gp, gy, pz(260), { wert: "Alle Bedingungen erfüllen", auswahl: true }).svg;
+    gy += pz(36) + pz(12);
+    EM_FILTER.forEach(([f, w]) => {
+      const zx = x0 + gp, zb = gb - 2 * gp;
+      g += pKarte(zx, gy, zb, zeileH, "std");
+      const tb = pz(32), fb = (zb - 2 * pz(12) - tb - 2 * pz(12)) / 2;
+      g += pFeld(zx + pz(12), gy + zp, fb, { wert: f, auswahl: true }).svg;
+      g += pFeld(zx + pz(12) + fb + pz(12), gy + zp, fb, { wert: w, auswahl: true }).svg;
+      /* "Bedingung entfernen": Knopf in der Variante neutral, hier als
+         Icon, die Zeile ist zu schmal fuer die Beschriftung. */
+      const kx = zx + zb - pz(12) - tb, ky = gy + zp + (pz(36) - tb) / 2;
+      g += '<path d="' + rundRechteck(kx, ky, tb, tb, P_RAD) + '" fill="' + P.text + '"/>' +
+        pIkon("trash-2", kx + tb / 2, ky + tb / 2, 16, "#FAFAFA");
+      gy += zeileH + pz(8);
     });
-    y += VH;
-    /* Ein Brief in der Kopfzeile waere hier falsch: ein Segment ist keine
-       Mail, sondern die Liste derer, die eine bekommen. */
-    return emRahmen(y, g, { titel: "Bestandskunden Heizung", reiter: 1,
-                            zeichen: "funnel", marke: ["Dynamisch", EM_OCEAN] });
+    gy += pz(4);
+    g += pKnopf(x0 + gp, gy, "Bedingung hinzufügen", "primaer", { klein: true, ikon: "plus" }).svg;
+    y += gruppeH + pz(22);
+
+    /* Die Zahl steht rechts in der Zeile der Ueberschrift, nicht darunter:
+       So bleibt die Karte niedrig genug fuer die Slide. */
+    g += pText(x0 + B, y + pz(16), "148 von 210 Kontakten zulässig", 16, 600, P.text, { anker: "end" });
+    schritt("Vorschau der Empfänger");
+    const sl = pz(12), sb = (B - 2 * sl) / 3, sh = pz(88);
+    EM_RAUS.forEach(([t, n], i) => {
+      const sx = x0 + i * (sb + sl);
+      g += '<path d="' + rundRechteck(sx, y, sb, sh, P_RAD) + '" fill="' + P.tertiaer + '"/>';
+      g += pText(sx + pz(14), y + pz(12) + pz(14), t, 14, 500, P.text);
+      g += pText(sx + pz(14), y + pz(24) + pz(32), n, 32, 600, P.text);
+      g += pText(sx + pz(14), y + sh - pz(12), "Automatisch ausgeschlossen", 12, 400, P.text3);
+    });
+    y += sh + P_PAD;
+
+    const kopf = { ikon: "users", ikonKasten: true, titel: "Zielgruppe bearbeiten",
+      rechts: pIkon("x", P_B - P_PAD - pz(10), P_KOPF / 2, 20, P.text2) };
+    return pRahmen(y, g, kopf);
   }
 
   /* ─── Slide 3 · Die Vorlagen ─────────────────────────────────────────────
-     Die Namen stehen in produkt-daten.ts der Website, die Betreffzeilen sind
-     geschrieben -- siehe oben. Die vierte Zeile ist "Eigen", damit man sieht,
-     dass eigene Vorlagen neben den mitgelieferten stehen; die Marken
-     "Standard" und "Eigen" stehen so in der Quelle. */
+     Die Vorlagenseite: Abschnitt "Eigene Vorlagen" mit Anzahl, darunter die
+     Karten im Raster (EmailMarketingTemplateScreens.tsx:365). Eine Karte:
+     Name als Link, Betreff, Auszug, unten die Marke ("Standard" in
+     information, "Eigen" neutral), das Datum und der Knopf "Als
+     Ausgangspunkt verwenden". Die Namen der mitgelieferten Vorlagen stehen
+     in produkt-daten.ts der Website, Betreff und Text sind geschrieben. Die
+     Klammervariable ist echt: personalization.ts kennt {{vorname}}. */
   const EM_VORLAGEN = [
-    { name: "Wartungserinnerung",  betreff: "Ihre Heizung ist bald wieder dran", typ: "Standard" },
-    { name: "Angebotsbestätigung", betreff: "Ihr Angebot von uns",               typ: "Standard" },
-    { name: "Geburtstagsgruß",     betreff: "Alles Gute von uns",                typ: "Standard" },
-    { name: "Neues aus dem Betrieb", betreff: "Was bei uns gerade läuft",        typ: "Eigen" },
+    { name: "Wartungserinnerung", betreff: "Ihre Heizung ist bald wieder dran", typ: "Standard",
+      text: ["Hallo {{vorname}}, die letzte Wartung", "ist ein Jahr her. Termin gefällig?"], datum: "02.09.2026" },
+    { name: "Angebotsbestätigung", betreff: "Ihr Angebot von uns", typ: "Standard",
+      text: ["Hallo {{vorname}}, danke für Ihre", "Anfrage. Hier ist unser Angebot."], datum: "02.09.2026" },
+    { name: "Geburtstagsgruß", betreff: "Alles Gute von uns", typ: "Standard",
+      text: ["Hallo {{vorname}}, alles Gute zum", "Geburtstag wünscht Ihr ganzes Team."], datum: "02.09.2026" },
+    { name: "Neues aus dem Betrieb", betreff: "Was bei uns gerade läuft", typ: "Eigen",
+      text: ["Hallo {{vorname}}, bei uns hat sich", "einiges getan. Hier das Wichtigste."], datum: "14.09.2026" },
   ];
 
   function visVorlagen() {
-    let g = "", y = 0;
-    g += uiText(0, 16, "Name und Betreff", 15, 700, CHAT_TEXT3);
-    g += uiText(EM_B, 16, "Typ", 15, 700, CHAT_TEXT3, { anker: "end" });
-    y = 32;
-    EM_VORLAGEN.forEach((v, i) => { g += emVorlage(0, y, EM_B, v, i === 0); y += 64 + 10; });
-    y += 14;
+    const B = P_B - 2 * P_PAD, x0 = P_PAD;
+    let g = "", y = P_KOPF + P_PAD;
+    g += pText(x0, y + pz(20), "Eigene Vorlagen", 20, 500, P.text);
+    g += pText(x0 + pMess("Eigene Vorlagen", 20, 500) + pz(8), y + pz(20), String(EM_VORLAGEN.length), 14, 400, P.text3);
+    y += pz(26) + pz(14);
 
-    /* Die Vorschau der ersten Vorlage. Sie steht hier nicht als Fueller: die
-       Liste allein sagt nur, dass es Vorlagen gibt, und die Slide behauptet,
-       dass Betreff und Text schon drinstehen -- das muss man sehen koennen.
-       Der Text ist geschrieben, die Klammervariable dagegen echt: der Editor
-       weist unter messageHint darauf hin, dass „vorname“ beim Versand
-       erhalten bleibt. */
-    const VH = 136;
-    g += '<path d="' + rundRechteck(0, y, EM_B, VH, 10) + '" fill="' + FL_SPALTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += emMarke(20, y + 28, "Vorschau", EM_GRAU, 13);
-    g += uiText(20, y + 68, EM_VORLAGEN[0].betreff, 17, 800, CHAT_TEXT);
-    g += uiText(20, y + 95, "Hallo {{vorname}},", 15, 500, CHAT_TEXT2);
-    g += uiText(20, y + 118, "die letzte Wartung ist ein Jahr her. Sollen wir einen Termin machen?",
-                15, 500, CHAT_TEXT2);
-    y += VH + 18;
+    const luecke = pz(16), kb = (B - luecke) / 2, pad = pz(20);
+    const kh = pad + pz(24) + pz(4) + pz(24) + pz(8) + 2 * pz(21) + pz(14) + pz(24) + pz(10) + pz(32) + pad;
+    EM_VORLAGEN.forEach((v, i) => {
+      const kx = x0 + (i % 2) * (kb + luecke), ky = y + Math.floor(i / 2) * (kh + luecke);
+      g += pKarte(kx, ky, kb, kh, "std");
+      let cy = ky + pad;
+      g += pText(kx + pad, cy + pz(17), v.name, 16, 600, P.link);
+      g += pIkon("ellipsis", kx + kb - pad - pz(8), cy + pz(12), 16, P.text2);
+      cy += pz(24) + pz(4);
+      g += pText(kx + pad, cy + pz(17), v.betreff, 16, 400, P.text2);
+      cy += pz(24) + pz(8);
+      v.text.forEach((z, j) => g += pText(kx + pad, cy + pz(15) + j * pz(21), z, 14, 400, P.text3));
+      cy += 2 * pz(21) + pz(14);
+      const bd = pBadge(kx + pad, cy + pz(12), v.typ, v.typ === "Standard" ? "info" : "neutral");
+      g += bd.svg;
+      g += pText(kx + pad + bd.b + pz(10), pMitte(cy + pz(12), 14), "Geändert am " + v.datum, 14, 400, P.text3);
+      cy += pz(24) + pz(10);
+      g += pKnopf(kx + pad, cy, "Als Ausgangspunkt verwenden", "sekundaer", { klein: true, ikonRechts: "arrow-right" }).svg;
+    });
+    y += 2 * kh + luecke + P_PAD;
 
-    /* Der Knopf aus der Vorlagenliste, woertlich. Er ist der Grund, warum
-       die Liste ueberhaupt auf einer Slide steht: eine Vorlage ist kein
-       Archiv, sondern der Anfang der naechsten Kampagne. */
-    const kt = "Als Ausgangspunkt verwenden";
-    const kb = messen(kt, 16, 700) + 60;
-    g += '<path d="' + rundRechteck(0, y, kb, 44, 8) + '" fill="#24242B"/>';
-    g += ikon("arrow-right", 22, y + 22, 15, "#FFFFFF");
-    g += uiText(38, y + 28, kt, 16, 700, "#FFFFFF");
-    y += 44;
-    return emRahmen(y, g, { titel: "E-Mail-Templates", reiter: 2 });
+    const kopf = { ikon: "megaphone", titel: "Vorlagen",
+      rechts: pKopfKnopf("Neue Vorlage", "primaer", { ikon: "plus" }).svg };
+    return pRahmen(y, g, kopf);
   }
 
-  /* ─── Slide 4 · Die Prüfung ──────────────────────────────────────────────
-     Die sechs Punkte stehen vollstaendig und in der Reihenfolge der Quelle
-     unter presend.check.*. Darunter der Footer, wie ihn der Editor
-     voreinstellt: Abmeldelink und Impressum, beides Pflicht. */
-  const EM_PRUEFUNG = [
-    "Versand-Domain verifiziert", "Abmeldelink vorhanden", "Impressum vorhanden",
-    "Betreff gesetzt", "Empfänger vorhanden", "Tageslimit eingehalten",
-  ];
+  /* ─── Slide 4 · Die Pruefung ─────────────────────────────────────────────
+     Der Abschnitt "Empfaenger & Versand" im Kampagnen-Editor. Er ist die
+     Pruefung vor dem Versand: die Karte "Bereit zum Versand?" mit fuenf
+     Punkten und je einer Marke "Erledigt" oder "Offen", darueber die
+     Meldung, was noch fehlt. Solange etwas offen ist, ist "Senden"
+     gesperrt. Darunter das Feld fuer den Footer mit seinem Hinweis, wie es
+     unter "Fusszeile & Textversion" steht.
 
-  /* Die sechs Angaben des Schritts "Pruefen". Fuenf davon stehen so in der
-     Quelle, die sechste ist das Haekchen darunter. Die Werte greifen auf die
-     beiden Slides davor zurueck: das Segment heisst hier wie dort, der
-     Betreff ist der der gewaehlten Vorlage. Wer die drei Slides
-     hintereinander liest, soll dieselbe Kampagne sehen und nicht drei. */
-  const EM_UEBERSICHT = [
-    ["Kampagnenname", "Wartungserinnerung Herbst"],
-    ["Betreff", "Ihre Heizung ist bald wieder dran"],
-    ["Absender", "buero@muster-shk.de"],
-    ["Segment", "Bestandskunden Heizung"],
-    ["Zeitplanung", "Di, 15.09.2026, 09:00 Uhr"],
-    ["Öffnungen und Klicks tracken", "An"],
+     Die Ueberschrift "Pre-Send-Pruefung" und die sechs Haekchen der ersten
+     Fassung stehen zwar in den Uebersetzungen, werden im Produkt aber
+     nirgends angezeigt. Darum stehen sie hier nicht mehr. */
+  const EM_BEREIT = [
+    ["Empfänger", "Erledigt"], ["Absender", "Erledigt"], ["Name und Betreff", "Erledigt"],
+    ["Inhalt", "Offen"], ["Versandzeit", "Erledigt"],
   ];
 
   function visPruefung() {
-    let g = "", y = 0;
-    const sb = (EM_B - 12) / 2;
-    EM_UEBERSICHT.forEach(([k, v], i) => {
-      const bx = (i % 2) * (sb + 12), by = y + Math.floor(i / 2) * 82;
-      g += '<path d="' + rundRechteck(bx, by, sb, 72, 8) + '" fill="' + FL_KARTE +
-        '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-      g += uiText(bx + 16, by + 28, k, 13, 700, CHAT_TEXT3);
-      g += uiText(bx + 16, by + 54, v, 16, 600, CHAT_TEXT);
-    });
-    y += 3 * 82 + 12;
+    const B = P_B - 2 * P_PAD, x0 = P_PAD;
+    let g = "", y = P_KOPF + P_PAD;
+    /* Die Abschnittsueberschrift "Empfaenger & Versand" steht im Produkt
+       darueber. Hier fehlt sie: Mit ihr ragte die Karte in den Text. */
 
-    g += uiText(0, y + 20, "Pre-Send-Prüfung", 19, 800, CHAT_TEXT);
-    y += 46;
-    /* Zwei Reihen, umgebrochen nach Breite statt nach Anzahl: die Punkte
-       sind verschieden lang, drei feste Spalten haetten Luecken gelassen. */
-    let zx = 0;
-    EM_PRUEFUNG.forEach(t => {
-      const b = messen(t, 14, 700) + 46;
-      if (zx > 0 && zx + b > EM_B) { zx = 0; y += 42; }
-      g += emCheck(zx, y + 15, t, EM_GRUEN);
-      zx += b + 12;
-    });
-    y += 42 + 18;
+    /* InlineMessage, Ton warning: Karte mit 16er Text. */
+    const mh = pz(12) + pz(24) + pz(12);
+    g += pKarte(x0, y, B, mh, "warnung");
+    g += pIkon("triangle-alert", x0 + pz(16) + pz(10), y + mh / 2, 20, "#9B5E0D");
+    g += pText(x0 + pz(16) + pz(20) + pz(12), pMitte(y + mh / 2, 16), "Vor dem Versand noch offen: Impressum ergänzen", 16, 400, P.text);
+    y += mh + pz(16);
 
-    /* Der Footer, wie ihn der Editor voreinstellt. Er stand einmal nicht
-       hier, weil "Abmeldelink vorhanden" schon als Punkt in der Pruefung
-       steht und zweimal dasselbe wie ein Versehen aussieht. Das war zu
-       streng: der Punkt ist die Pruefung, der Kasten ist das Geprueefte --
-       und die Ueberschrift der Slide redet vom Abmeldelink, also soll man
-       ihn auch sehen. Ohne den Kasten war die Karte ausserdem 150 px
-       kuerzer als die beiden Nachbarslides, und die Luft zur Ueberschrift
-       entsprechend groesser. Gemessen, nicht geschaetzt. */
-    const FH = 108;
-    g += '<path d="' + rundRechteck(0, y, EM_B, FH, 10) + '" fill="' + FL_SPALTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += uiText(24, y + 32, "Footer mit Abmeldelink und Impressum", 15, 700, CHAT_TEXT3);
-    g += '<path d="' + rundRechteck(24, y + 46, EM_B - 48, 44, 8) + '" fill="' + FL_KARTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += uiText(40, y + 74, "Abmelden", 16, 700, EM_OCEAN.zeichen);
-    const ab = messen("Abmelden", 16, 700);
-    g += uiText(40 + ab + 12, y + 74, "·  Impressum: Muster GmbH", 16, 500, CHAT_TEXT2);
-    y += FH;
-    return emRahmen(y, g, { marke: ["Entwurf", EM_GRAU] });
+    const pad = pz(16), zh = pz(40);
+    const kh = pad + pz(24) + pz(8) + EM_BEREIT.length * zh + pad;
+    g += pKarte(x0, y, B, kh, "std");
+    g += pText(x0 + pad, y + pad + pz(17), "Bereit zum Versand?", 16, 600, P.text);
+    let zy = y + pad + pz(24) + pz(8);
+    EM_BEREIT.forEach(([t, s], i) => {
+      if (i > 0) g += '<path d="M' + n1(x0 + pad) + "," + n1(zy) + "H" + n1(x0 + B - pad) +
+        '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+      g += pText(x0 + pad, pMitte(zy + zh / 2, 16), t, 16, 400, P.text);
+      const bb = pBadgeB(s, true);
+      g += pBadge(x0 + B - pad - bb, zy + zh / 2, s, s === "Erledigt" ? "positiv" : "neutral", true).svg;
+      zy += zh;
+    });
+    y += kh + pz(20);
+
+    const fuss = pFeld(x0, y, B, { label: "Footer mit Abmeldelink und Impressum", hoch: pz(58),
+      wert: ["Abmelden · Einstellungen verwalten"],
+      hilfe: "Der Footer muss einen Abmeldelink und ein Impressum enthalten." });
+    g += fuss.svg;
+    y += fuss.h + P_PAD;
+
+    const kopf = { ikon: "megaphone", titel: "Wartungserinnerung Herbst", badge: ["Entwurf", "neutral"],
+      rechts: pKopfKnopf("Senden", "aus", { ikon: "send" }).svg };
+    return pRahmen(y, g, kopf);
   }
 
-  /* ─── Slide 4 · Der Baukasten ────────────────────────────────────────────
-     Die Mail, waehrend sie entsteht. Aufbau und Aussehen kommen aus dem
-     Klickdummy des Kundentermins, components/subframe-pages/
-     S02EinfacherFragenEditor.tsx: Seitengrund F5F4F4, darauf die gestapelten
-     Karten, und rechts daneben die schwebende Werkzeugpille. Dort stehen
-     Type, Image und Upload schon als Symbole drin -- die Bausteine, die hier
-     gebraucht werden, hat das Haus also bereits, nur als Leiste und nicht
-     als beschriftete Spalte.
+  /* ─── Slide 5 · Der Baukasten ────────────────────────────────────────────
+     "Gestaltung" im Kampagnen-Editor (CampaignContentBuilder.tsx): links die
+     Leiste mit den Reitern "Bloecke | Layouts | Stil" und den Bausteinen in
+     der Reihenfolge der Quelle, rechts die Arbeitsflaeche in der Karte
+     neutral, darin die Mail. Der Bildbaustein ist ausgewaehlt: Rand und
+     Werkzeugzeile darueber (Griff, Icon, Name, hoch, runter, kopieren,
+     loeschen). Die Mail selbst hat die Gestalt aus campaign-mail-look.ts:
+     Arial, Ueberschrift 600, Knopf dunkel mit Radius 8, Footer klein und
+     zentriert. Sie ist kleiner gezeichnet als im Produkt, weil sie hier
+     neben der Leiste stehen muss.
 
-     ZWEI DINGE, DIE ES SO NOCH NICHT GIBT. Der Bildbaustein und die
-     Produktkacheln stehen auf der Website (components/sections/
-     EmailBuilder.tsx), aber nicht im Produkt: der Kampagneninhalt ist heute
-     ein einziges HTML-Textfeld (EmailMarketingCampaignEditorPage.tsx:199),
-     Bilder kennt der Mail-Stack ausser dem Logo keine, und einen
-     Artikelstamm gibt es nirgends -- die Migration, die
-     "email_marketing_commercial_catalog" heisst, ist HiveGrids eigener
-     Tarifkatalog. Die vier Pakete samt Preisen sind also gesetzt wie
-     "Waermepumpe Mueller" in Post 5: Beispielinhalt, kein Datenbestand.
-
-     DER AKZENT IST DIE MARKE. Aufbau und Masse kommen aus S02: ein
-     Streifen ueber der Karte (S02:204) und eine Leiste links am
-     ausgewaehlten Baustein (S02:299). Dort sind beide in Sky-Blau 0791F0,
-     weil die semantische Markenrampe des Produkts auf Grau gemappt ist und
-     Gelb dort nur im Logo vorkommt. Hier stehen sie in F1B729, dem Gelb der
-     Marke -- eine bewusste Abweichung: auf einem Beitrag soll die Farbe die
-     unsere sein und nicht die des Design-Systems.
-
-     Der Knopf in der Mail ist keine Abweichung. Das Mail-Theme des Produkts,
-     packages/mail/src/templates-react/_layout/theme.ts, setzt primary auf
-     f1b729 und die Schrift darauf auf 231f20; Button.tsx haengt dort auch
-     den Pfeil an. Eine von HiveGrid verschickte Mail hat also wirklich einen
-     gelben Knopf mit Pfeil.
-
-     Alle Farben sind ueber ui/theme.css aufgeloest, nicht aus dem
-     Bildschirmfoto gegriffen. */
-  const S_MARKE  = "#F1B729";   // brand-600, das Gelb aus dem Logo
-  const S_MTEXT  = "#231F20";   // die Schrift darauf, aus dem Mail-Theme
-  const S_STRICH = "#B5B5B7";   // border-strong, jede gestrichelte Flaeche
-  const S_GRIFF  = "#CECECF";   // text-neutral-subtle, die Ziehgriffe
-
-  const BK_PALETTE = [
-    "text-h-one", "text-t", "image", null, "cursor-click", "squares-four", "minus",
+     Produktkacheln gab es in der ersten Fassung, im Produkt gibt es sie
+     nicht. Sie sind raus, und die Slide nennt sie auch nicht mehr. */
+  const BK_BLOECKE = [
+    ["type", "Text"], ["code", "HTML"], ["code", "Markdown"], ["heading", "Überschrift"],
+    ["image", "Bild"], ["mouse-pointer-click", "Button"], ["minus", "Trennlinie"], ["arrow-up-down", "Abstand"],
   ];
-  const BK_PAKETE = [
-    ["Heizungswartung", "ab 149 €"], ["Wärmepumpe",    "ab 3.900 €"],
-    ["Bad-Sanierung",   "ab 6.200 €"], ["Solarthermie", "ab 1.490 €"],
-  ];
-  const BK_TEXT = ["Hallo {{vorname}}, die letzte Wartung Ihrer Heizung ist",
-                   "ein Jahr her. Sollen wir einen Termin ausmachen?"];
-
-  /* Eine gestrichelte Flaeche, wie S02:701 und wie das Uploadfeld des
-     Produkts (FileUpload.tsx:57): zwei Pixel gestrichelt in border-strong,
-     Radius 12, darunter der Seitengrund. */
-  function bkGestrichelt(x, y, b, h, zeichen, gr, text, tgr) {
-    let g = '<path d="' + rundRechteck(x, y, b, h, 12) + '" fill="' + FL_GRUND +
-      '" stroke="' + S_STRICH + '" stroke-width="2" stroke-dasharray="6 6"/>';
-    if (text) {
-      const tb = messen(text, tgr, 500), ges = gr + 10 + tb;
-      g += ikon(zeichen, x + b / 2 - ges / 2 + gr / 2, y + h / 2, gr, CHAT_TEXT3);
-      g += uiText(x + b / 2 - ges / 2 + gr + 10, y + h / 2 + tgr * .36, text, tgr, 500, CHAT_TEXT3);
-    } else {
-      g += ikon(zeichen, x + b / 2, y + h / 2, gr, CHAT_TEXT3);
-    }
-    return g;
-  }
+  const BK_TEXT = ["Hallo {{vorname}}, die letzte Wartung", "Ihrer Heizung ist ein Jahr her. Sollen", "wir einen Termin ausmachen?"];
+  const BK_AUSWAHL = "#0284C7";   // Rand des gewaehlten Bausteins
 
   function visMail() {
-    const PAD = 24, B = EM_B + 2 * 34;
-    const PILLE = 50, LUECKE = 20;
-    const CX = PAD, CB = B - 2 * PAD - PILLE - LUECKE;   // Mailkarte
-    const IPAD = 22, IB = CB - 2 * IPAD;                 // ihr Inneres
-    let m = "", y = 8 + IPAD;
+    const B = P_B - 2 * P_PAD, x0 = P_PAD;
+    let g = "", y = P_KOPF + P_PAD;
+    g += pText(x0, y + pz(17), "Gestaltung", 16, 600, P.text);
+    g += pUmschalter(x0 + B, y - pz(4), [["monitor", "Desktop"], ["smartphone", "Mobil"]], 0);
+    y += pz(32) + pz(14);
 
-    /* Absenderzeile. Der Kreis ist der Avatar des Produkts: Kreis in
-       surface-neutral-tertiary, Kuerzel in 500er Schnitt (Avatar.tsx:37). */
-    m += '<circle cx="' + (IPAD + 18) + '" cy="' + (y + 18) + '" r="18" fill="' + FL_SPALTE + '"/>';
-    m += uiText(IPAD + 18, y + 24, "MH", 14, 600, CHAT_TEXT2, { anker: "middle" });
-    m += uiText(IPAD + 50, y + 15, "Muster Heizung & Sanitär", 15, 700, CHAT_TEXT);
-    m += uiText(IPAD + 50, y + 34, "an Anna Berger · a.berger@web.de", 13, 400, CHAT_TEXT3);
-    y += 32 + 18;
-    m += '<path d="M' + IPAD + ',' + y + 'H' + (CB - IPAD) + '" stroke="' + CHAT_RAND +
-      '" stroke-width="1.2"/>';
-    y += 22;
-
-    /* Baustein 1: die Ueberschrift der Mail. */
-    m += uiText(IPAD, y + 20, "Ihre Heizung ist bald wieder dran", 20, 700, CHAT_TEXT);
-    y += 26 + 16;
-
-    /* Baustein 2: das Bild -- der ausgewaehlte. Karte mit Rand und der
-       sechs Pixel breiten Leiste links, wie die aufgeklappte Frage in
-       S02:298. Schatten waeren dort dabei, hier nicht: nichts auf diesen
-       Slides wirft einen (rules.md §5). */
-    const bh = 118;
-    m += '<path d="' + rundRechteck(IPAD - 12, y, IB + 24, bh, 12) + '" fill="#FAFAFA" stroke="' +
-      CHAT_RAND + '" stroke-width="1.2"/>';
-    m += '<path d="M' + (IPAD - 12) + ',' + (y + 12) + 'a12,12 0 0 1 6,-11.6V' + (y + bh - .4) +
-      'a12,12 0 0 1 -6,-11.6Z" fill="' + S_MARKE + '"/>';
-    m += ikon("griff", IPAD + 4, y + bh / 2, 17, S_GRIFF);
-    m += bkGestrichelt(IPAD + 20, y + 16, IB - 12, bh - 32, "image", 22, "Bild hierher ziehen", 15);
-    m += '<circle cx="' + (CB - IPAD + 4) + '" cy="' + (y + 4) + '" r="15" fill="' + FL_KARTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    m += ikon("trash-2", CB - IPAD + 4, y + 4, 15, CHAT_TEXT2);
-    y += bh + 16;
-
-    /* Baustein 3: der Text. Die Klammervariable steht so in der Quelle --
-       personalization.ts kennt firstName, lastName, email, company_name. */
-    BK_TEXT.forEach((z, i) => m += uiText(IPAD, y + 16 + i * 22, z, 15, 400, CHAT_TEXT2));
-    y += 40 + 16;
-
-    /* Baustein 4: der Knopf. Nicht der dunkle Primaerknopf der Oberflaeche,
-       sondern der der Mail: _layout/Button.tsx faerbt ihn mit primary f1b729,
-       Schrift 231f20 in 700, Radius 10 -- und haengt den Pfeil an. */
-    const kt = "Termin anfragen  →";
-    const kb = messen(kt, 15, 700) + 40;
-    m += '<path d="' + rundRechteck(IPAD, y, kb, 40, 10) + '" fill="' + S_MARKE + '"/>';
-    m += uiText(IPAD + 20, y + 26, kt, 15, 700, S_MTEXT);
-    y += 40 + 18;
-
-    /* Baustein 5: die Produkte. Die Kachel ist die ProjectCard des Hauses
-       (ProjectCard.tsx:200): Radius 12, ein Pixel Rand, FAFAFA -- und der
-       Preis gross und fett, dort in 32/600. Im ersten Anlauf stand er hier
-       als Kleingedrucktes in 12/400 unter dem Namen und verschwand auf der
-       Slide fast. */
-    const tb2 = (IB - 12) / 2, th = 94;
-    BK_PAKETE.forEach(([name, preis], i) => {
-      const tx = IPAD + (i % 2) * (tb2 + 12), ty = y + Math.floor(i / 2) * (th + 12);
-      m += '<path d="' + rundRechteck(tx, ty, tb2, th, 12) + '" fill="#FAFAFA" stroke="' +
-        CHAT_RAND + '" stroke-width="1.2"/>';
-      m += bkGestrichelt(tx + 10, ty + 10, tb2 - 20, 36, "image", 15, null, 0);
-      m += uiText(tx + 12, ty + 64, name, 14, 600, CHAT_TEXT2);
-      m += uiText(tx + 12, ty + 85, preis, 18, 700, CHAT_TEXT);
+    /* Die Leiste. */
+    const LB = pz(226), cp = pz(14);
+    const kachelH = pz(32) + 2 * pz(4), kl = pz(7);
+    const leisteH = cp + pz(40) + pz(12) + BK_BLOECKE.length * (kachelH + kl) - kl + cp;
+    g += pKarte(x0, y, LB, leisteH, "std");
+    g += pTabs(x0 + cp, y + cp, LB - 2 * cp, ["Blöcke", "Layouts", "Stil"], 0, pz(11));
+    /* Der Hilfetext "Ziehe einen Block auf die Arbeitsflaeche ..." steht im
+       Produkt unter den Reitern. Hier fehlt er, sonst stiesse die Karte an
+       den Text der Slide. */
+    let ly = y + cp + pz(40) + pz(12);
+    BK_BLOECKE.forEach(([ik, t]) => {
+      const kx = x0 + cp, kb = LB - 2 * cp;
+      g += '<path d="' + rundRechteck(kx, ly, kb, kachelH, P_RAD) + '" fill="' + P.seite + '" stroke="' +
+        P.rand + '" stroke-width="1.2"/>';
+      g += pIkon(ik, kx + pz(4) + pz(12) + pz(8), ly + kachelH / 2, 16, P.text2);
+      g += pText(kx + pz(4) + pz(12) + pz(16) + pz(8), pMitte(ly + kachelH / 2, 16), t, 16, 400, P.text);
+      g += pIkon("grip-vertical", kx + kb - pz(4) - pz(12), ly + kachelH / 2, 16, P.icon3);
+      ly += kachelH + kl;
     });
-    y += 2 * th + 12 + 18;
 
-    /* Und die Flaeche, um noch einen zu holen. Wortlaut und Aussehen wie
-       "Frage hinzufuegen" in S02:701. */
-    m += bkGestrichelt(IPAD, y, IB, 52, "plus", 20, "Baustein hinzufügen", 17);
-    y += 52 + IPAD;
+    /* Die Arbeitsflaeche. */
+    const AX = x0 + LB + pz(16), AB = B - LB - pz(16), ap = pz(16);
+    const ah = leisteH;
+    g += pKarte(AX, y, AB, ah, "neutral");
+    g += pText(AX + ap, y + ap + pz(14), "Block anklicken zum Bearbeiten.", 14, 400, P.text2);
+    g += pText(AX + AB - ap, y + ap + pz(14), "4 Blöcke", 14, 400, P.text2, { anker: "end" });
 
-    /* Die Mailkarte: weiss, Radius 12, ein Pixel Rand -- und oben der acht
-       Pixel hohe Streifen in Sky, wie ueber der Formularkarte in S02:203. */
-    let g = '<path d="' + rundRechteck(0, 0, B, y + 2 * PAD, 22) + '" fill="' + FL_GRUND + '"/>';
-    g += '<g transform="translate(' + CX + ',' + PAD + ')">';
-    g += '<path d="' + rundRechteck(0, 0, CB, y, 12) + '" fill="' + FL_KARTE + '" stroke="' +
-      CHAT_RAND + '" stroke-width="1.2"/>';
-    g += '<path d="M0,12a12,12 0 0 1 12,-12H' + (CB - 12) + 'a12,12 0 0 1 12,12V8H0Z" fill="' +
-      S_MARKE + '"/>';
-    g += m + '</g>';
+    /* Die Mail. Schrift wie im Mail-Look: Arial. */
+    const MX = AX + ap, MB = AB - 2 * ap, MY = y + ap + pz(14) + pz(14), MH = ah - (MY - y) - ap;
+    g += '<path d="' + rundRechteck(MX, MY, MB, MH, P_RAD) + '" fill="#FFFFFF"/>';
+    const arial = (x, yy, t, gr, gew, farbe, o) => '<text x="' + n1(x) + '" y="' + n1(yy) +
+      '" font-family="Arial, Helvetica, sans-serif" font-size="' + gr + '" font-weight="' + gew + '" fill="' + farbe + '"' +
+      (o && o.anker ? ' text-anchor="' + o.anker + '"' : "") + ">" + wfEsc(t) + "</text>";
+    const bx = MX + 14, bb = MB - 28;
+    let my = MY + 16;
+    /* Ueberschrift */
+    g += arial(bx + 10, my + 26, "Ihre Heizung ist bald", 22, 600, "#161616");
+    g += arial(bx + 10, my + 54, "wieder dran", 22, 600, "#161616");
+    my += 72;
+    /* Bild, ausgewaehlt: Werkzeugzeile darueber, Rand und Ring in 0284C7. */
+    const wz = 24, bildH = 96;
+    my += wz + 8;
+    g += '<path d="' + rundRechteck(bx, my, bb, bildH, 4) + '" fill="none" stroke="' + BK_AUSWAHL + '" stroke-width="2"/>';
+    g += '<path d="' + rundRechteck(bx + 10, my + 10, bb - 20, bildH - 20, 4) + '" fill="' + P.tertiaer + '"/>';
+    g += pIkon("image", bx + bb / 2, my + bildH / 2, 28, P.icon3);
+    let wx = bx;
+    g += pIkon("grip-vertical", wx + 9, my - 8 - wz / 2, 14, P.icon3); wx += 20;
+    g += pIkon("image", wx + 8, my - 8 - wz / 2, 14, P.text2); wx += 22;
+    g += pText(wx, pMitte(my - 8 - wz / 2, 13), "Bild", 13, 500, P.text);
+    ["arrow-up", "arrow-down", "copy", "trash-2"].forEach((ik, i) =>
+      g += pIkon(ik, bx + bb - 12 - (3 - i) * 26, my - 8 - wz / 2, 14, P.text2));
+    my += bildH + 16;
+    /* Text */
+    BK_TEXT.forEach((z, i) => g += arial(bx + 10, my + 14 + i * 21, z, 15, 400, "#161616"));
+    my += 3 * 21 + 16;
+    /* Button */
+    const kt = "Termin anfragen", kbr = 15 * .55 * kt.length + 36;
+    g += '<path d="' + rundRechteck(bx + 10, my, kbr, 38, 7) + '" fill="#161616"/>';
+    g += arial(bx + 10 + kbr / 2, my + 24, kt, 15, 500, "#FFFFFF", { anker: "middle" });
+    my += 38 + 18;
+    /* Footer */
+    g += '<path d="M' + n1(MX) + "," + n1(my) + "H" + n1(MX + MB) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    g += arial(MX + MB / 2, my + 22, "Abmelden · Einstellungen verwalten", 11.5, 400, P.text2, { anker: "middle" });
+    g += arial(MX + MB / 2, my + 38, "Impressum: Muster GmbH", 11.5, 400, P.text2, { anker: "middle" });
 
-    /* Die Werkzeugpille rechts. Pillenform, 36er Knoepfe, Symbole in 20 --
-       S02:718. Der Trenner in der Mitte trennt die Textbausteine von den
-       uebrigen, so wie dort. */
-    const px = B - PAD - PILLE;
-    let ph = 8, ys = [];
-    BK_PALETTE.forEach(z => { ys.push(ph); ph += z ? 36 + 4 : 9 + 4; });
-    ph += 4;
-    g += '<g transform="translate(' + px + ',' + PAD + ')">';
-    g += '<path d="' + rundRechteck(0, 0, PILLE, ph, PILLE / 2) + '" fill="#FAFAFA" stroke="' +
-      CHAT_RAND + '" stroke-width="1.2"/>';
-    BK_PALETTE.forEach((z, i) => {
-      if (!z) g += '<path d="M' + (PILLE / 2 - 12) + ',' + (ys[i] + 4) + 'h24" stroke="' +
-        CHAT_RAND + '" stroke-width="1.2"/>';
-      else g += ikon(z, PILLE / 2, ys[i] + 18, 20, CHAT_TEXT2);
-    });
-    g += '</g>';
-
-    return stapelKasten(B, y + 2 * PAD, 22, g);
+    y += leisteH + P_PAD;
+    const kopf = { ikon: "megaphone", titel: "Wartungserinnerung Herbst", badge: ["Entwurf", "neutral"],
+      rechts: pText(P_B - P_PAD, pMitte(P_KOPF / 2, 14), "Gespeichert", 14, 400, P.text3, { anker: "end" }) };
+    return pRahmen(y, g, kopf);
   }
 
   /* ─── Das Bewegtbild · die Kampagne geht raus ────────────────────────────
-     Der Ablauf, in Anteilen der Laufzeit (6 s):
+     Ablauf in Anteilen der Laufzeit (6 s), wie in der ersten Fassung:
 
-       0,00 - 0,05  ruhig, der Entwurf steht, alle Zahlen auf null
-       0,05 - 0,20  der Zeiger faehrt auf den Sendeknopf
+       0,05 - 0,20  der Zeiger faehrt auf "Senden"
        0,20 - 0,25  Klick
        0,24 - 0,28  der Knopf blendet weg
-       0,24 - 0,32  der Zustand springt auf "Wird gesendet", Station 2 an
-       0,32 - 0,36  "Wird gesendet …" blendet an seiner Stelle ein
+       0,24 - 0,32  Zustand "Wird gesendet", Schritt 2 erledigt
        0,30 - 0,58  Zugestellt zaehlt auf 148
        0,42 - 0,70  die Oeffnungsrate zaehlt auf 62 %
        0,50 - 0,78  die Klickrate zaehlt auf 18 %
-       0,66 - 0,74  "Gesendet", Station 3 an
-       0,74 - 0,78  das Ergebnis loest die laufende Meldung ab
-       0,58 - 0,70  der Zeiger geht
+       0,66 - 0,74  "Gesendet", Schritt 3 erledigt
        0,86 - 1,00  Halt auf dem Ergebnis
 
-     Warum der Versand und nicht das Bauen der Kampagne: das Bewegtbild ist
-     das erste Element im Carousel und traegt den ganzen Beitrag. Was ihn
-     traegt, ist nicht der Editor, sondern was hinten herauskommt -- die drei
-     Slides danach erklaeren, wie man dahin kommt.
+     Gezeichnet ist der Kampagnenbericht (EmailMarketingDetailScreens.tsx):
+     die Kennzahlen in Widget-Rahmen mit ihren Fusszeilen, der
+     Versandverlauf als Zeitleiste mit Kreisen (erledigt gruen mit Haken,
+     offen grau mit Nummer) und die Tabelle "Empfaenger" mit E-Mail, Name
+     und Status. Die Zustaende der Kampagne und der Empfaenger tragen die
+     Marken der Quelle: "Wird gesendet" information, "Gesendet" positive,
+     "Ausstehend" warning, "Zugestellt", "Geoeffnet", "Geklickt" positive.
 
-     Der Versandverlauf hat hier drei Stationen und nicht vier. Die Quelle
-     kennt auch "Eingeplant", aber die Kampagne geht hier sofort raus; eine
-     Station, die bei diesem Ablauf nie angeht, waere eine Behauptung. */
-  const EM_STATIONEN = ["Entwurf erstellt", "Versand gestartet", "Versand abgeschlossen"];
-
-  /* Drei Empfaenger, damit "aus Kontakten" nicht nur eine Zahl bleibt. Die
-     Zustaende sind die der Quelle (recipient.status.*): erst ausstehend, dann
-     zugestellt, und bei zweien danach geoeffnet und geklickt. Sie springen
-     nacheinander um und nicht gleichzeitig -- drei Zeilen, die im selben Bild
-     umschalten, sehen aus wie ein Neuzeichnen und nicht wie drei Menschen,
-     die eine Mail bekommen. */
+     Der Versandverlauf hat drei Schritte statt vier: "Eingeplant" geht bei
+     einem Sofortversand nie an. */
+  const EM_STATIONEN = [
+    ["Entwurf erstellt", "14.09.2026, 16:20"],
+    ["Versand gestartet", "15.09.2026, 09:00"],
+    ["Versand abgeschlossen", "15.09.2026, 09:03"],
+  ];
   const EM_EMPFAENGER = [
-    { name: "Anna Berger",        mail: "a.berger@web.de",          an: .46, spaet: .62, ende: ["Geöffnet", "ocean"] },
-    { name: "Michael Krüger",     mail: "m.krueger@gmx.de",         an: .52, spaet: .70, ende: ["Geklickt", "gruen"] },
-    { name: "Bauer Haustechnik",  mail: "info@bauer-haustechnik.de", an: .58, spaet: null, ende: null },
+    { name: "Anna Berger",       mail: "a.berger@web.de",           an: .46, spaet: .62, ende: "Geöffnet" },
+    { name: "Michael Krüger",    mail: "m.krueger@gmx.de",          an: .52, spaet: .70, ende: "Geklickt" },
+    { name: "Bauer Haustechnik", mail: "info@bauer-haustechnik.de", an: .58, spaet: null, ende: null },
   ];
 
-  function emEmpfaenger(x, y, b, e, t) {
-    const H = 56;
-    let g = '<path d="' + rundRechteck(x, y, b, H, 8) + '" fill="' + FL_KARTE +
-      '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += uiText(x + 16, y + H / 2 + 6, e.name, 16, 700, CHAT_TEXT);
-    const nb = messen(e.name, 16, 700);
-    g += uiText(x + 28 + nb, y + H / 2 + 6, e.mail, 14, 500, CHAT_TEXT3);
-    const [txt, ton] = e.spaet !== null && t >= e.spaet ? [e.ende[0], e.ende[1] === "ocean" ? EM_OCEAN : EM_GRUEN]
-                     : t >= e.an ? ["Zugestellt", EM_GRUEN]
-                     : ["Ausstehend", EM_GRAU];
-    const mb = emMarkeB(txt, 13);
-    g += emMarke(x + b - 16 - mb, y + H / 2, txt, ton, 13);
+  /* Ein Kennzahl-Widget wie WidgetRahmen mit KPICard: Kopf 44 hoch mit
+     Titel, Wert gross und halbfett, Fusszeile ueber einer Linie. */
+  function emKpi(x, y, b, h, titel, wert, fuss) {
+    const kh = pz(44);
+    let g = pKarte(x, y, b, h, "weiss", 8);
+    g += '<path d="M' + n1(x) + "," + n1(y + kh) + "H" + n1(x + b) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    g += pText(x + pz(12), pMitte(y + kh / 2, 13), titel, 13, 600, P.text);
+    g += pText(x + pz(14), y + kh + pz(16) + pz(30), wert, 34, 600, P.text);
+    const fy = y + h - pz(30);
+    g += '<path d="M' + n1(x + pz(14)) + "," + n1(fy) + "H" + n1(x + b - pz(14)) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    g += pText(x + pz(14), fy + pz(19), fuss, 12, 400, P.text3);
     return g;
   }
 
@@ -4475,94 +4581,88 @@ if (location.search.indexOf("nur=anim") >= 0)
     const klick    = stufe(t, .20, .25);
     const los      = stufe(t, .24, .32);
     const fertig   = stufe(t, .66, .74);
-    /* Der Zeiger geht frueher als in Post 7 (dort .72 bis .86). Er parkt auf
-       der Stelle, an der spaeter "148 von 148 zugestellt" steht -- blieb er
-       bis .86, stand der Mauspfeil im Haken der Ergebniszeile. Jetzt ist er
-       weg, bevor sie ab .74 kommt. */
     const zWeg     = stufe(t, .58, .70);
     const zu = daempfen(stufe(t, .30, .58));
     const oe = daempfen(stufe(t, .42, .70));
     const kl = daempfen(stufe(t, .50, .78));
+    const B = P_B - 2 * P_PAD, x0 = P_PAD;
+    let g = "", y = P_KOPF + P_PAD;
 
-    const luecke = 12, kb = (EM_B - 2 * luecke) / 3;
-    let g = "";
+    /* Kennzahlen */
+    const luecke = pz(14), kb = (B - 2 * luecke) / 3, kh = pz(132);
+    g += emKpi(x0, y, kb, kh, "Zugestellt", String(Math.round(148 * zu)), "Empfänger erreicht");
+    g += emKpi(x0 + kb + luecke, y, kb, kh, "Öffnungsrate", Math.round(62 * oe) + " %",
+               "Geöffnet: " + Math.round(92 * oe));
+    g += emKpi(x0 + 2 * (kb + luecke), y, kb, kh, "Klickrate", Math.round(18 * kl) + " %",
+               "Geklickt: " + Math.round(27 * kl));
+    y += kh + pz(16);
 
-    /* Die Zeile ganz oben zeigt nacheinander drei Dinge: den Sendeknopf, den
-       laufenden Versand, das Ergebnis. Nacheinander heisst hier wirklich
-       nacheinander -- das eine ist ganz weg, bevor das naechste anfaengt.
-       Ein erster Versuch liess die beiden ineinander ueberblenden, und weil
-       alle drei rechtsbuendig an derselben Stelle sitzen, stand zwei Zehntel
-       lang "An 148 EmpfWirdggesendet" im Bild. Am fertigen Video gesehen und
-       nicht in der Vorschau: dort huscht es vorbei. */
-    const oKnopf  = 1 - stufe(t, .24, .28);
-    const oLaeuft = stufe(t, .32, .36) * (1 - stufe(t, .66, .70));
-    const oFertig = stufe(t, .74, .78);
-    const ky = 0;
-
-    const kt = "An 148 Empfänger senden";
-    const kbr = messen(kt, 16, 700) + 60, kx = EM_B - kbr;
-    if (oKnopf > .01) {
-      g += '<g opacity="' + n1(oKnopf) + '"><path d="' + rundRechteck(kx, ky, kbr, 44, 8) +
-        '" fill="#24242B"/>';
-      g += ikon("paper-plane", kx + 24, ky + 22, 16, "#FFFFFF");
-      g += uiText(kx + 42, ky + 28, kt, 16, 700, "#FFFFFF") + '</g>';
-    }
-    const zustand = (o, tx, zeichen, farbe) => {
-      if (o <= .01) return "";
-      const tb = messen(tx, 16, 700);
-      return '<g opacity="' + n1(o) + '">' +
-        uiText(EM_B, ky + 28, tx, 16, 700, farbe, { anker: "end" }) +
-        ikon(zeichen, EM_B - tb - 24, ky + 22, 16, farbe) + '</g>';
-    };
-    g += zustand(oLaeuft, "Wird gesendet …", "paper-plane", CHAT_TEXT3);
-    g += zustand(oFertig, "148 von 148 zugestellt", "check-circle", EM_GRUEN.zeichen);
-
-    let y = 64;
-    g += emKpi(0, y, kb, 108, "Zugestellt", String(Math.round(148 * zu)), "Empfänger");
-    g += emKpi(kb + luecke, y, kb, 108, "Öffnungsrate",
-               Math.round(62 * oe) + " %", "Anteil der Zustellungen");
-    g += emKpi(2 * (kb + luecke), y, kb, 108, "Klickrate",
-               Math.round(18 * kl) + " %", "Anteil der Zustellungen");
-    y += 108 + 26;
-
-    g += uiText(0, y, "Versandverlauf", 17, 800, CHAT_TEXT);
-    y += 18;
-    EM_STATIONEN.forEach((s, i) => {
-      const an = i === 0 ? 1 : i === 1 ? los : fertig;
-      g += emStation(i * (kb + luecke), y, kb, 74, s, an > .5);
+    /* Versandverlauf */
+    const vh = pz(44) + pz(14) + pz(18) + pz(14) + pz(24) + pz(10) + pz(36) + pz(10);
+    g += pKarte(x0, y, B, vh, "weiss", 8);
+    g += '<path d="M' + n1(x0) + "," + n1(y + pz(44)) + "H" + n1(x0 + B) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    g += pText(x0 + pz(12), pMitte(y + pz(22), 13), "Versandverlauf", 13, 600, P.text);
+    let vy = y + pz(44) + pz(14);
+    g += pText(x0 + pz(14), vy + pz(14), "Betreff", 14, 400, P.text3);
+    g += pText(x0 + pz(14) + pMess("Betreff", 14, 400) + pz(6), vy + pz(14), "Ihre Heizung ist bald wieder dran", 14, 500, P.text);
+    vy += pz(18) + pz(14);
+    const sb = (B - 2 * pz(14)) / 3, kr = pz(24) / 2, cy = vy + kr;
+    EM_STATIONEN.forEach(([s, d], i) => {
+      const an = i === 0 ? 1 : i === 1 ? los : fertig, erledigt = an > .5;
+      const cx = x0 + pz(14) + i * sb + kr;
+      if (i < EM_STATIONEN.length - 1) g += '<path d="M' + n1(cx + kr + 6) + "," + n1(cy) + "H" +
+        n1(cx + sb - kr - 6) + '" stroke="' + P.rand + '" stroke-width="2"/>';
+      g += '<circle cx="' + n1(cx) + '" cy="' + n1(cy) + '" r="' + n1(kr) + '" fill="' +
+        (erledigt ? "#DCFCE4" : P.tertiaer) + '"/>';
+      g += erledigt ? pIkon("check", cx, cy, 14, "#148134")
+                    : pText(cx, pMitte(cy, 12), String(i + 1), 12, 500, P.icon3, { anker: "middle" });
+      g += pText(cx - kr, cy + kr + pz(10) + pz(14), s, 14, 500, P.text);
+      g += pText(cx - kr, cy + kr + pz(10) + pz(14) + pz(18), erledigt ? d : "Noch ausstehend", 12, 400, P.text3);
     });
-    y += 74 + 26;
+    y += vh + pz(16);
 
-    g += uiText(0, y, "Empfänger", 17, 800, CHAT_TEXT);
-    y += 18;
-    EM_EMPFAENGER.forEach(e => { g += emEmpfaenger(0, y, EM_B, e, t); y += 56 + 8; });
-    y -= 8;
+    /* Empfaenger */
+    g += pText(x0, y + pz(17), "Empfänger", 16, 600, P.text);
+    y += pz(24) + pz(8);
+    const spalten = [["E-Mail", "mail", pz(260)], ["Name", "user", pz(170)], ["Status", "circle-dot", B - pz(430)]];
+    const zh = pz(38);
+    g += pTabelle(x0, y, spalten, EM_EMPFAENGER.length, zh, (i, jj, sx, ym, sw) => {
+      const e = EM_EMPFAENGER[i];
+      if (jj === 0) return pText(sx + pz(12), pMitte(ym, 14), e.mail, 14, 400, P.text);
+      if (jj === 1) return pText(sx + pz(12), pMitte(ym, 14), e.name, 14, 400, P.text);
+      const [txt, ton] = e.spaet !== null && t >= e.spaet ? [e.ende, "positiv"]
+                       : t >= e.an ? ["Zugestellt", "positiv"] : ["Ausstehend", "warnung"];
+      return pBadge(sx + pz(12), ym, txt, ton, true).svg;
+    }).svg;
+    y += pz(32) + EM_EMPFAENGER.length * zh;
 
-    /* Der Zeiger faehrt von unten rechts auf den Knopf, wie in Post 7. Der
-       Bogen ist derselbe: eine gerade Linie sieht aus wie ein Sprung. */
+    /* Kopf: Zustand als Marke, rechts "Senden", das nach dem Klick weg ist.
+       Der Bericht hat dort danach "Als Vorlage speichern", das passte aber
+       neben Titel und Marke nicht in die Zeile und lag ueber "Gesendet". */
+    const marke = fertig > .5 ? ["Gesendet", "positiv"] : los > .5 ? ["Wird gesendet", "info"] : ["Entwurf", "neutral"];
+    const oKnopf = 1 - stufe(t, .24, .28);
+    const senden = pKopfKnopf("Senden", "primaer", { ikon: "send" });
+    let rechts = "";
+    if (oKnopf > .01) rechts += '<g opacity="' + n1(oKnopf) + '">' + senden.svg + "</g>";
+
+    /* Der Zeiger faehrt von unten rechts auf "Senden", im Bogen wie in
+       Post 7. */
     const zAn = zeigerAn * (1 - zWeg);
+    let zeig = "";
     if (zAn > .01) {
-      const vonX = EM_B - 40, vonY = y + 60;
-      const zuX = kx + 42, zuY = ky + 22;
+      const vonX = P_B - 120, vonY = y - 40;
+      const zuX = P_B - P_PAD - senden.b / 2 + 6, zuY = P_KOPF / 2 + 2;
       const p1 = raus(zeigerAn);
       const bx = zuX - vonX, by = zuY - vonY, BOGEN = .13;
       const sx = (vonX + zuX) / 2 - by * BOGEN, sy = (vonY + zuY) / 2 + bx * BOGEN;
       const u = 1 - p1;
       const zx2 = u * u * vonX + 2 * u * p1 * sx + p1 * p1 * zuX;
       const zy2 = u * u * vonY + 2 * u * p1 * sy + p1 * p1 * zuY;
-      g += klickRing(zx2 + 2, zy2 + 2, klick < 1 ? klick : 0);
-      g += '<g opacity="' + n1(Math.min(1, zeigerAn * 2) * (1 - zWeg)) + '">' +
-        zeiger(zx2, zy2, 1.5) + '</g>';
+      zeig += klickRing(zx2 + 2, zy2 + 2, klick < 1 ? klick : 0);
+      zeig += '<g opacity="' + n1(Math.min(1, zeigerAn * 2) * (1 - zWeg)) + '">' + zeiger(zx2, zy2, 1.5) + "</g>";
     }
-
-    const marke = fertig > .5 ? ["Gesendet", EM_GRUEN]
-                : los > .5 ? ["Wird gesendet", EM_GELB]
-                : ["Entwurf", EM_GRAU];
-    /* Feste Kartenhoehe, ausgerechnet: waechst der Kasten mit dem Inhalt,
-       waechst der viewBox, und bei fester Breite auf der Slide schrumpft die
-       ganze Zeichnung dabei. Derselbe Fehler wie in Post 7. */
-    return emRahmen(0, g, { marke: marke,
-      h: EM_KOPF + 64 + 108 + 26 + 18 + 74 + 26 + 18 + 3 * 56 + 2 * 8 + 34 });
+    y += P_PAD;
+    return pRahmen(y, g + zeig, { ikon: "megaphone", titel: "Wartungserinnerung Herbst", badge: marke, rechts });
   }
 
   /* ═══ Zeitachse ══════════════════════════════════════════════════════════
@@ -7679,12 +7779,39 @@ if (location.search.indexOf("nur=anim") >= 0)
     else if (k === "a") guard(downloadAll)();
   });
 
+  /* html-to-image bettet nur die Schrift ein, die es in den Stylesheets
+     findet und im HTML benutzt sieht, also Manrope. Instrument Sans steckt
+     nur in den SVG-Zeichnungen und fehlte im PNG: Dort stand die Oberflaeche
+     in einer Ersatzschrift. Darum haengen wir sie selbst an, als data:-URL,
+     mit denselben Bereichen wie im @font-face oben. */
+  async function instrumentSansCss() {
+    const teile = [
+      ["instrument-sans-latin.woff2", "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"],
+      ["instrument-sans-latin-ext.woff2", "U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0"],
+    ];
+    let css = "";
+    for (const [datei, bereich] of teile) {
+      const blob = await (await fetch("./assets/fonts/" + datei)).blob();
+      const url = await new Promise(fertig => {
+        const leser = new FileReader();
+        leser.onload = () => fertig(leser.result);
+        leser.readAsDataURL(blob);
+      });
+      css += '@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;' +
+        'src:url(' + url + ') format("woff2");unicode-range:' + bereich + ";}";
+    }
+    return css;
+  }
+
   /* Boot: inline the screens, wait for Manrope to actually be resident
      (otherwise the first export silently falls back to a system font), and
      pre-compute the font CSS once instead of on every render. */
   (async function boot() {
     try {
       setStatus("Lade Screens ...");
+      /* Instrument Sans vor dem ersten Zeichnen laden: pMess() misst damit,
+         und ein Mass mit der Ersatzschrift bliebe im Zwischenspeicher. */
+      await Promise.all(["400", "500", "600"].map(w => document.fonts.load(w + ' 16px "Instrument Sans"', "Äöüß")));
       await bilderNachladen();
       await preloadAssets();
       const restored = await loadState();
@@ -7721,6 +7848,7 @@ if (location.search.indexOf("nur=anim") >= 0)
       else if (restored) setStatus("Projektstand geladen", "ok");
       await document.fonts.ready;
       fontEmbedCss = await htmlToImage.getFontEmbedCSS(deck.querySelector(".slide"));
+      fontEmbedCss += await instrumentSansCss();
       ["dl-png", "dl-all"].forEach(id => document.getElementById(id).disabled = false);
       if (checkCollisions()) setStatus("Bereit. " + SLIDES.length +
         (SLIDES.length === 1 ? " Slide" : " Slides") + ", 1080 × 1350 px", "ok");