diff --git a/animation/post7-animForm.mp4 b/animation/post7-animForm.mp4
index 48100f4..7a3f7eb 100644
Binary files a/animation/post7-animForm.mp4 and b/animation/post7-animForm.mp4 differ
diff --git a/post7.html b/post7.html
index 10c5b90..b40d6d8 100644
--- a/post7.html
+++ b/post7.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 7 · Form Builder</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.
@@ -1418,7 +1428,7 @@ if (location.search.indexOf("nur=anim") >= 0)
       layouts: [{ id: "standard", label: "Standard" }],
       eyebrow: "Die Fragen",
       head: 'Frag genau das,<br><span class="a">was du wissen musst.</span>',
-      body: "Kurzantwort, Absatz, Multiple-Choice, Datei-Upload, Datum. Du bestimmst, was gefragt wird und in welcher Reihenfolge.",
+      body: "Text, Auswahl, Datei, Datum und mehr. Du bestimmst, was gefragt wird und in welcher Reihenfolge.",
       vis: "felder", visW: 896, visLeft: 92, visBottom: 168,
     },
     {
@@ -1438,7 +1448,7 @@ if (location.search.indexOf("nur=anim") >= 0)
       layouts: [{ id: "standard", label: "Standard" }],
       eyebrow: "Die Verknüpfung",
       head: 'Aus der Antwort<br><span class="a">wird ein Lead.</span>',
-      body: "Neue Antworten werden als Lead gespeichert, in der Pipeline, die du zuweist. Niemand tippt sie ab.",
+      body: "Neue Antworten werden als Lead gespeichert, mit den Feldern, die du zuweist. Niemand tippt sie ab.",
       vis: "lead", visW: 896, visLeft: 92, visBottom: 168,
     },
   ];
@@ -1483,8 +1493,12 @@ if (location.search.indexOf("nur=anim") >= 0)
          Karte. 268 macht daraus 118 -- derselbe Wert wie ueberall sonst. Der
          gewonnene Platz steht dafuer unten, was hier verkraftbar ist: die
          Karte ist am Anfang ohnehin zur Haelfte leer, weil sie den Raum fuer
-         die spaeter erscheinenden Optionen schon reserviert. */
-      vis: "animForm", visW: 896, visLeft: 92, visBottom: 268,
+         die spaeter erscheinenden Optionen schon reserviert.
+
+         Seit dem Neubau aus den Produkt-Komponenten (20.10.) ist die Karte
+         hoeher und stiess bei 268 fast an die Ueberschrift. 198 gibt wieder
+         Luft. */
+      vis: "animForm", visW: 896, visLeft: 92, visBottom: 198,
     },
   ];
 
@@ -3908,294 +3922,709 @@ if (location.search.indexOf("nur=anim") >= 0)
 
 
   /* ═══ Post 7 · Form Builder ══════════════════════════════════════════════
-     Quelle ist components/subframe-pages/S02EinfacherFragenEditor.tsx aus dem
-     Pitch-Paket -- derselbe Bildschirm, den assets/screens/form-builder.png
-     zeigt. Alle Beschriftungen stehen dort woertlich: die fuenf Fragen, ihre
-     Feldtypen, die Marke "Bedingt sichtbar", der Text des Hinweisfelds.
+     Neu gebaut am 20.10.2026 aus den Komponenten und dem echten Form Builder
+     von hivegrid-cloud (Stand origin/main 19.10.), nach rules.md §0 und
+     komponenten.md. Die erste Fassung kam aus dem Klickdummy des
+     Pitch-Pakets (S02EinfacherFragenEditor.tsx) und hatte Dinge, die es im
+     Produkt nicht gibt: die Pipeline am Lead-Feld, eine Fusszeile mit
+     "Zuletzt gespeichert" und "Bereit zum Veroeffentlichen", andere
+     Feldtypen-Namen.
 
-     EINE ENTSCHEIDUNG ZUR PIPELINE. Die Quelle schreibt
-     {general ? "Website-Anfragen" : "Vertrieb SHK"}. Die allgemeine Seite
-     /allgemein/formulare rendert also "Website-Anfragen"; im Screenshot im
-     Repo steht "Vertrieb SHK". Hier steht Vertrieb SHK -- der Beitrag zeigt
-     durchgehend das Gewerk (Waermepumpe Mueller, Montage Team Sued,
-     Auftragsabwicklung SHK), und ein Formular ohne Gewerk waere das erste
-     Bild der Reihe, das im Leeren steht.
+     Die Screens, alle unter apps/web/app/components/screens/forms/:
+       Kopf und Reiter   FormEditorPage.tsx:411-613
+       Fragekarten       editor/questions-tab/SortableQuestionCard.tsx
+       Optionen, Regeln  editor/questions-tab/QuestionEditors.tsx
+       Werkzeugleiste    editor/questions-tab/QuestionsTabView.tsx
+       Lead-Banner       editor/LeadBanner.tsx
+       Felder zuweisen   editor/LeadMappingView.tsx
+       Feldtypen         editor/fieldMeta.tsx
+     Beschriftungen woertlich aus translations.json, settings.forms.*.
 
-     Die Farben des Hinweisfelds sind aus ui/theme.css aufgeloest, nicht aus
-     dem Bild geschaetzt: surface-feedback-subtle-information ->
-     feedback-information-100 -> ocean-100. */
-  const FB_INFO = { flaeche: "#E1F4FD", rand: "#BCEAFB", zeichen: "#08739C" };
-  const FB_GUT = "#148134";          // feedback-positive-700, dasselbe Gruen wie die Marke
-  const FB_STERN = "#C52020";        // das Sternchen an Pflichtfeldern
+     WAS ERFUNDEN IST: der Formularname, die Fragen, die Optionen, die
+     Bedingung. Demo-Inhalt wie in den anderen Posts. */
 
-  /* Die fuenf Fragen des Formulars "Heizungs-Anfrage". Reihenfolge, Titel,
-     Feldtyp und Pflichtstern wie in der Quelle. */
-  const FRAGEN = [
-    { z: "text-t",          t: "Ihr Name",                     typ: "Kurzantwort",     pflicht: true },
-    { z: "text-align-left", t: "Beschreibung Ihres Anliegens", typ: "Absatz",          pflicht: true },
-    { z: "list-bullets",    t: "Um welchen Bereich geht es?",  typ: "Multiple-Choice-Frage", pflicht: true },
-    { z: "image",           t: "Fotos vom Objekt",             typ: "Datei oder Bild hochladen · optional",
-      marke: "Bedingt sichtbar" },
-    { z: "calendar",        t: "Wunschtermin",                 typ: "Datum" },
-  ];
-  /* Mit Umlauten, anders als in der Quelle. Dort steht "Sanitaer" und
-     "Klima / Lueftung" -- das ist kein Produktbegriff, den man zitieren
-     muesste, sondern eine Schludrigkeit im Klickdummy. Auf einem Beitrag,
-     der Handwerksbetriebe anspricht, liest sich "Sanitaer" wie ein Fehler,
-     und es ist auch einer. Die Liste steht hier einmal und wird von Slide 2
-     und vom Bewegtbild benutzt. */
-  const OPTIONEN = ["Heizung", "Sanitär", "Klima / Lüftung"];
+  /* Die Bausteine aus post8.html, unveraendert uebernommen (komponenten.md
+     Abschnitt 3). Die Icon-Tabelle ist um die des Form Builders erweitert. */
+  const LUCIDE = {
+    "align-left": "<path d=\"M15 12H3\"/> <path d=\"M17 18H3\"/> <path d=\"M21 6H3\"/>",
+    "arrow-down": "<path d=\"M12 5v14\"/> <path d=\"m19 12-7 7-7-7\"/>",
+    "arrow-left-right": "<path d=\"M8 3 4 7l4 4\"/> <path d=\"M4 7h16\"/> <path d=\"m16 21 4-4-4-4\"/> <path d=\"M20 17H4\"/>",
+    "arrow-left": "<path d=\"m12 19-7-7 7-7\"/> <path d=\"M19 12H5\"/>",
+    "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\"/>",
+    "at-sign": "<circle cx=\"12\" cy=\"12\" r=\"4\"/> <path d=\"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8\"/>",
+    "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\"/>",
+    "circle-plus": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M8 12h8\"/> <path d=\"M12 8v8\"/>",
+    "clipboard-list": "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"/> <path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"/> <path d=\"M12 11h4\"/> <path d=\"M12 16h4\"/> <path d=\"M8 11h.01\"/> <path d=\"M8 16h.01\"/>",
+    "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-vertical": "<circle cx=\"12\" cy=\"12\" r=\"1\"/> <circle cx=\"12\" cy=\"5\" r=\"1\"/> <circle cx=\"12\" cy=\"19\" r=\"1\"/>",
+    "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-horizontal": "<circle cx=\"12\" cy=\"9\" r=\"1\"/> <circle cx=\"19\" cy=\"9\" r=\"1\"/> <circle cx=\"5\" cy=\"9\" r=\"1\"/> <circle cx=\"12\" cy=\"15\" r=\"1\"/> <circle cx=\"19\" cy=\"15\" r=\"1\"/> <circle cx=\"5\" cy=\"15\" r=\"1\"/>",
+    "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\"/>",
+    "inbox": "<polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\"/> <path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\"/>",
+    "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\"/>",
+    "list-checks": "<path d=\"m3 17 2 2 4-4\"/> <path d=\"m3 7 2 2 4-4\"/> <path d=\"M13 6h8\"/> <path d=\"M13 12h8\"/> <path d=\"M13 18h8\"/>",
+    "lock": "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
+    "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\"/>",
+    "palette": "<circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/> <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/> <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/> <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/> <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"/>",
+    "paperclip": "<path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\"/>",
+    "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\"/>",
+    "upload": "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/> <polyline points=\"17 8 12 3 7 8\"/> <line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"/>",
+    "user-plus": "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/> <circle cx=\"9\" cy=\"7\" r=\"4\"/> <line x1=\"19\" x2=\"19\" y1=\"8\" y2=\"14\"/> <line x1=\"22\" x2=\"16\" y1=\"11\" y2=\"11\"/>",
+    "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\"/>",
+    "wand-sparkles": "<path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\"/> <path d=\"m14 7 3 3\"/> <path d=\"M5 6v4\"/> <path d=\"M19 14v4\"/> <path d=\"M10 2v2\"/> <path d=\"M7 8H3\"/> <path d=\"M21 16h-4\"/> <path d=\"M11 3H9\"/>",
+    "x": "<path d=\"M18 6 6 18\"/> <path d=\"m6 6 12 12\"/>"
+    };
 
-  const FB_B = 720, FB_ZH = 78;      // Breite einer Fragezeile und ihre Hoehe
-  /* Hoehe des Kartenkopfs: Name, Reiter, Trennlinie. Die Linie liegt bei 92,
-     der Inhalt beginnt also 28 Einheiten darunter -- derselbe Abstand wie
-     unten zur Fusszeile. Vorher stand hier 96, das waren vier Einheiten, und
-     die erste Frage klebte an der Linie. */
-  const FB_KOPF = 120;
+  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
 
-  /* Eine Fragezeile: Griff, Sinnbild, Titel mit Pflichtstern, darunter der
-     Feldtyp, rechts Kopieren und Loeschen. Die beiden Werkzeuge stehen in der
-     Quelle als Ghost-Buttons und damit ohne Flaeche. */
-  function fbZeile(x, y, f, o) {
+  /* 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"],
+  };
+
+  /* Text in Instrument Sans. gr ist die Groesse im Produkt. */
+  const pText = (x, y, t, gr, gew, farbe, o) => {
     o = o || {};
-    let g = '<path d="' + rundRechteck(x, y, FB_B, FB_ZH, 10) + '" fill="' + FL_KARTE +
-      '" stroke="' + (o.aktiv ? FB_INFO.zeichen : CHAT_RAND) + '" stroke-width="' +
-      (o.aktiv ? 1.8 : 1.2) + '"/>';
-    g += ikon("griff", x + 26, y + FB_ZH / 2, 15, "#C9C9CE");
-    g += ikon(f.z, x + 52, y + FB_ZH / 2, 19, CHAT_TEXT2);
-    const tb = messen(f.t, 18, 700);
-    g += uiText(x + 76, y + FB_ZH / 2 - 3, f.t, 18, 700, CHAT_TEXT);
-    if (f.pflicht) g += uiText(x + 82 + tb, y + FB_ZH / 2 - 3, "*", 18, 700, FB_STERN);
-    g += uiText(x + 76, y + FB_ZH / 2 + 21, f.typ, 15, 500, CHAT_TEXT3);
-    let rx = x + FB_B - 34;
-    g += ikon("trash-2", rx, y + FB_ZH / 2, 18, CHAT_TEXT3); rx -= 34;
-    g += ikon("copy", rx, y + FB_ZH / 2, 18, CHAT_TEXT3);
-    if (f.marke) {
-      const mb = messen(f.marke, 14, 700) + 30;
-      rx -= 14 + mb;
-      g += '<rect x="' + n1(rx) + '" y="' + n1(y + FB_ZH / 2 - 14) + '" width="' + n1(mb) +
-        '" height="28" rx="14" fill="' + FL_SPALTE + '"/>';
-      g += '<circle cx="' + n1(rx + 13) + '" cy="' + n1(y + FB_ZH / 2) + '" r="3.5" fill="' +
-        CHAT_TEXT3 + '"/>';
-      g += uiText(rx + 22, y + FB_ZH / 2 + 5, f.marke, 14, 700, CHAT_TEXT2);
-    }
+    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;
+
+  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;
   }
 
-  /* Das Hinweisfeld ueber dem Formular. Text woertlich, samt Mittelpunkt. */
-  function fbLead(x, y, b, auf) {
-    /* Zweizeilig, anders als in der Quelle. Dort steht der ganze Satz auf
-       einer Zeile -- hier lief er unter den Knopf "Felder zuweisen" und
-       endete bei "Pipeline: Vertrieb S". Umbrochen statt gekuerzt: der
-       Pipelinename ist die halbe Aussage des Felds. Am gerenderten Blatt
-       gesehen, nicht vermutet. */
-    const H = 112, s = auf === undefined ? 1 : auf;
-    let g = '<path d="' + rundRechteck(x, y, b, H, 10) + '" fill="' + FB_INFO.flaeche +
-      '" stroke="' + FB_INFO.rand + '" stroke-width="1.3"/>';
-    g += '<circle cx="' + n1(x + 44) + '" cy="' + n1(y + H / 2) + '" r="20" fill="' +
-      FL_KARTE + '"/>';
-    g += ikon("user-plus", x + 44, y + H / 2, 20, FB_INFO.zeichen);
-    g += uiText(x + 76, y + 40, "Lead-Verknüpfung", 18, 800, CHAT_TEXT);
-    const lb = messen("Lead-Verknüpfung", 18, 800), ab = messen("Aktiv", 14, 700) + 22;
-    g += '<rect x="' + n1(x + 86 + lb) + '" y="' + n1(y + 24) + '" width="' + n1(ab) +
-      '" height="26" rx="13" fill="' + FB_INFO.rand + '"/>';
-    g += uiText(x + 86 + lb + ab / 2, y + 42, "Aktiv", 14, 700, FB_INFO.zeichen,
-                { anker: "middle" });
-    g += uiText(x + 76, y + 68, "Neue Antworten werden als Lead gespeichert", 15, 500, CHAT_TEXT2);
-    g += uiText(x + 76, y + 92, "Pipeline: Vertrieb SHK", 15, 700, CHAT_TEXT2);
-
-    /* Rechts nur "Felder zuweisen". In der Quelle steht daneben noch
-       "Deaktivieren" -- der Knopf ist hier weg, weil ein Ausschalter nichts
-       zur Aussage der Slide beitraegt. */
-    const k1 = messen("Felder zuweisen", 15, 700) + 52;
-    const kx = x + b - 20 - k1;
-    g += '<path d="' + rundRechteck(kx, y + H / 2 - 18, k1, 36, 8) + '" fill="#24242B"/>';
-    g += ikon("arrow-right", kx + 20, y + H / 2, 15, "#FFFFFF");
-    g += uiText(kx + 34, y + H / 2 + 5, "Felder zuweisen", 15, 700, "#FFFFFF");
-    return s >= 1 ? g : '<g opacity="' + n1(s) + '">' + g + '</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;
   }
 
-  /* Der Rahmen, in dem alle vier Zeichnungen sitzen: die Karte des Editors mit
-     Kopfzeile. Der Reiter "Fragen" ist der aktive, wie im Screenshot. */
-  function fbRahmen(inhaltH, inhalt, o) {
-    o = o || {};
-    const RAND = 34, KOPF = FB_KOPF, B = FB_B + 2 * RAND;
-    let g = "";
-    g += uiText(RAND + 4, 40, "Heizungs-Anfrage", 20, 800, CHAT_TEXT);
-    const nb = messen("Heizungs-Anfrage", 20, 800);
-    g += '<rect x="' + n1(RAND + 18 + nb) + '" y="22" width="86" height="26" rx="13" fill="' +
-      FL_SPALTE + '"/>';
-    g += '<circle cx="' + n1(RAND + 32 + nb) + '" cy="35" r="3.5" fill="' + CHAT_TEXT3 + '"/>';
-    g += uiText(RAND + 42 + nb, 40, "Entwurf", 14, 700, CHAT_TEXT2);
-    // Die drei Reiter.
-    let fx = RAND + 4;
-    ["Fragen", "Design", "Antworten"].forEach((r, i) => {
-      const b = messen(r, 16, i === 0 ? 800 : 600) + 34;
-      g += uiText(fx + b / 2, 80, r, 16, i === 0 ? 800 : 600,
-                  i === 0 ? CHAT_TEXT : CHAT_TEXT3, { anker: "middle" });
-      if (i === 0) g += '<path d="M' + n1(fx) + ',92H' + n1(fx + b) + '" stroke="' +
-        CHAT_TEXT + '" stroke-width="2.6"/>';
-      fx += b + 6;
+  /* 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;
     });
-    g += '<path d="M0,92H' + n1(B) + '" stroke="' + CHAT_RAND + '" stroke-width="1.2"/>';
-    g += '<g transform="translate(' + RAND + ',' + KOPF + ')">' + inhalt + '</g>';
-    /* Die Hoehe darf fest vorgegeben werden. Das braucht das Bewegtbild:
-       waechst der Kasten mit dem Inhalt, waechst auch der viewBox, und bei
-       fester Breite auf der Slide skaliert die ganze Zeichnung dabei kleiner.
-       Die Karte wuchs also und schrumpfte gleichzeitig -- am Kontaktabzug als
-       Wackeln zu sehen. Mit fester Hoehe bewegt sich nur der Inhalt. */
-    const H = o.h !== undefined ? o.h : KOPF + inhaltH + (o.fuss ? 56 : RAND);
-    if (o.fuss) {
-      /* Die Fusszeile sitzt mittig zwischen der letzten Frage und der
-         Kartenkante: 28 nach oben, 28 nach unten. Vorher waren es 24 oben und
-         22 unten -- die Zeile klebte am Rand, und die Karte sah unten
-         beschnitten aus.
+    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 };
+  }
 
-         Rechts wird gemessen statt gezaehlt. Vorher stand dort ein fester
-         Versatz von 138, gegriffen und nicht gerechnet: der Satz endete neun
-         Einheiten AUSSERHALB der Karte. Jetzt haengt sein Ende an der
-         inneren Kante, egal wie lang er ist. */
-      const fy = KOPF + inhaltH + 28;
-      g += ikon("clock", RAND + 8, fy, 15, CHAT_TEXT3);
-      g += uiText(RAND + 24, fy + 5, "Zuletzt gespeichert vor wenigen Sekunden", 14, 500, CHAT_TEXT3);
-      const gut = "Bereit zum Veröffentlichen";
-      const gx = B - RAND - messen(gut, 14, 700);
-      g += ikon("check-circle", gx - 13, fy, 15, FB_GUT);
-      g += uiText(gx, fy + 5, gut, 14, 700, FB_GUT);
+  /* 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);
     }
-    return stapelKasten(B, H, 22, g);
+    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);
+  };
+
+
+  /* Das Blau der Streifen an der Titelkarte und an der offenen Frage:
+     brand-secondary-surface-solid-default, sky-500. */
+  const FB_STREIFEN = "#0791F0";
+  const FB_ROT = "#C52020";          // Pflichtstern, Loeschen-Icon
+
+  /* Die Fragen des Formulars "Heizungs-Anfrage". Typen und Icons aus
+     fieldMeta.tsx. Optionale Fragen bekommen " · optional" hinter dem Typ,
+     Pflichtfragen den roten Stern. */
+  const FRAGEN = [
+    { ikon: "type",       t: "Ihr Name",                    typ: "Text",    pflicht: true },
+    { ikon: "at-sign",    t: "E-Mail",                      typ: "E-Mail",  pflicht: true },
+    { ikon: "circle-dot", t: "Um welchen Bereich geht es?", typ: "Auswahl", pflicht: true },
+    { ikon: "paperclip",  t: "Fotos vom Objekt",            typ: "Datei",   marke: "Bedingt sichtbar" },
+    { ikon: "calendar",   t: "Wunschtermin",                typ: "Datum" },
+  ];
+  /* Mit Umlauten. Die Liste wird von Slide 2 und vom Bewegtbild benutzt. */
+  const OPTIONEN = ["Heizung", "Sanitär", "Klima / Lüftung"];
+
+  /* Kopfzeile des Editors (FormEditorPage.tsx:411): kein PageHeader, eine
+     eigene Zeile mit px24 py10, darin die kleinen Knoepfe. Darunter der
+     Streifen mit den drei Reitern, gleich breit, mit Icons. */
+  const FB_KOPF = Math.round(pz(32) + 2 * pz(10));
+  const FB_REITER = Math.round(pz(40));
+  const FB_OBEN = FB_KOPF + FB_REITER;
+
+  /* Text, der in ein Feld passen muss, wird wie im Produkt abgeschnitten. */
+  function pKurz(t, gr, gew, b) {
+    if (pMess(t, gr, gew) <= b) return t;
+    let s = t;
+    while (s.length > 1 && pMess(s + "…", gr, gew) > b) s = s.slice(0, -1);
+    return s.trimEnd() + "…";
   }
 
-  /* ─── Slide 1 · Die Feldtypen ─────────────────────────────────────────── */
-  function visFelder() {
-    let g = "", y = 0;
-    for (const f of FRAGEN) { g += fbZeile(0, y, f); y += FB_ZH + 12; }
-    return fbRahmen(y - 12, g);
-  }
+  /* Ghost-IconButton klein: 32er Kreis ohne Flaeche, Icon 16. */
+  const pGeist = (cx, cy, ikon, farbe) => pIkon(ikon, cx, cy, 16, farbe || P.text2);
 
-  /* ─── Slide 2 · Bedingt sichtbar ──────────────────────────────────────────
-     Die Frage, an der es haengt, und darunter das Feld mit der Marke. Welche
-     Antwort die Bedingung ausloest, steht in der Quelle nicht -- deshalb steht
-     es hier auch nicht. */
-  function visBedingt() {
-    let g = "", y = 0;
-    g += fbZeile(0, y, FRAGEN[2], { aktiv: true }); y += FB_ZH + 10;
-    // Die drei Optionen als Auswahl, wie im aufgeklappten Zustand.
-    OPTIONEN.forEach(o => {
-      g += '<circle cx="60" cy="' + n1(y + 22) + '" r="9" fill="none" stroke="' +
-        CHAT_RAND + '" stroke-width="1.6"/>';
-      g += '<rect x="84" y="' + n1(y) + '" width="' + (FB_B - 140) +
-        '" height="44" rx="8" fill="' + FL_KARTE + '" stroke="' + CHAT_RAND +
-        '" stroke-width="1.2"/>';
-      g += uiText(102, y + 29, o, 16, 500, CHAT_TEXT2);
-      y += 54;
+  /* Der Rahmen: Kopfzeile, Reiter, darunter die Seite. */
+  let fbNr = 0;
+  function fbRahmen(h, inhalt, o) {
+    o = o || {};
+    const id = "fbrahmen" + (++fbNr);
+    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="' + FB_OBEN + '" fill="' + P.karte + '"/></g>';
+    g += '<path d="M0,' + FB_KOPF + "H" + P_B + "M0," + FB_OBEN + "H" + P_B + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    /* Links: Icon, Name, Marke. */
+    const ym = FB_KOPF / 2;
+    g += pIkon("clipboard-list", P_PAD + pz(12), ym, 24, P.icon3);
+    const nx = P_PAD + pz(24) + pz(8);
+    g += pText(nx, pMitte(ym, 20), "Heizungs-Anfrage", 20, 500, P.text);
+    g += pBadge(nx + pMess("Heizungs-Anfrage", 20, 500) + pz(8), ym, "Entwurf", "neutral").svg;
+    /* Rechts: Vorschau, Veroeffentlichen, mehr. "Einbetten & QR" gibt es
+       nur bei externen Formularen und passt nicht mehr in die Zeile. */
+    const ky = (FB_KOPF - pz(32)) / 2;
+    let rx = P_B - P_PAD - pz(32);
+    g += pIkon("ellipsis", rx + pz(16), ym, 16, P.text);
+    g += '<circle cx="' + n1(rx + pz(16)) + '" cy="' + n1(ym) + '" r="' + n1(pz(16)) + '" fill="none" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    const vb = pKnopfB("Veröffentlichen", { klein: true, ikon: "upload" });
+    rx -= pz(8) + vb;
+    g += pKnopf(rx, ky, "Veröffentlichen", "primaer", { klein: true, ikon: "upload" }).svg;
+    const pb = pKnopfB("Vorschau", { klein: true, ikon: "eye" });
+    rx -= pz(8) + pb;
+    g += pKnopf(rx, ky, "Vorschau", "tertiaer", { klein: true, ikon: "eye" }).svg;
+    /* Die Reiter: gleich breit, in einem Block in der Mitte. */
+    const reiter = [["list-checks", "Fragen"], ["palette", "Design"], ["inbox", "Antworten"]];
+    const rb = (P_B - 2 * P_PAD) / reiter.length;
+    reiter.forEach(([ik, r], i) => {
+      const an = i === (o.reiter || 0), x = P_PAD + i * rb, y = FB_KOPF;
+      if (an) g += '<rect x="' + n1(x) + '" y="' + y + '" width="' + n1(rb) + '" height="' + FB_REITER + '" fill="#E1F4FD"/>';
+      g += '<path d="M' + n1(x) + "," + n1(FB_OBEN - 1) + "H" + n1(x + rb) + '" stroke="' + (an ? P.text : P.rand) + '" stroke-width="2.3"/>';
+      const tb = pz(14) + pz(8) + pMess(r, 14, an ? 500 : 400), tx = x + (rb - tb) / 2;
+      g += pIkon(ik, tx + pz(7), y + FB_REITER / 2, 14, an ? P.text : P.icon3);
+      g += pText(tx + pz(14) + pz(8), pMitte(y + FB_REITER / 2, 14), r, 14, an ? 500 : 400, an ? P.text : P.text2);
     });
-    y += 16;
-    g += fbZeile(0, y, FRAGEN[3]); y += FB_ZH;
-    return fbRahmen(y, g);
+    g += inhalt;
+    return stapelKasten(P_B, h, 22, g);
   }
 
-  /* ─── Slide 3 · Die Lead-Verknüpfung ──────────────────────────────────── */
+  /* Eine zugeklappte Frage (SortableQuestionCard.tsx:121): px20 py16,
+     Radius 8, Griff, Typ-Icon, Titel 16/500 mit rotem Stern, darunter der
+     Typ 14 und bei optionalen " · optional", rechts die kleine Marke
+     "Bedingt sichtbar", Kopieren und Loeschen in Rot. */
+  const FB_FRAGE_H = pz(16) + pz(22) + pz(2) + pz(18) + pz(16);
+  function fbFrage(x, y, b, f) {
+    const h = FB_FRAGE_H, ym = y + h / 2;
+    let g = pKarte(x, y, b, h, "std", 8);
+    let cx = x + pz(20);
+    g += pIkon("grip-vertical", cx + pz(10), ym, 20, P.leise); cx += pz(20) + pz(12);
+    g += pIkon(f.ikon, cx + pz(8), ym, 16, P.icon3); cx += pz(16) + pz(12);
+    g += pText(cx, y + pz(16) + pz(17), f.t, 16, 500, P.text);
+    if (f.pflicht) g += pText(cx + pMess(f.t, 16, 500) + pz(4), y + pz(16) + pz(17), "*", 16, 500, FB_ROT);
+    g += pText(cx, y + pz(16) + pz(22) + pz(2) + pz(14), f.typ + (f.pflicht ? "" : " · optional"), 14, 400, P.text3);
+    let rx = x + b - pz(20) - pz(16);
+    g += pGeist(rx, ym, "trash-2", FB_ROT); rx -= pz(32);
+    g += pGeist(rx, ym, "copy", P.text2); rx -= pz(16) + pz(12);
+    if (f.marke) {
+      const mb = pBadgeB(f.marke, true);
+      g += pBadge(rx - mb, ym, f.marke, "neutral", true).svg;
+    }
+    return { svg: g, h };
+  }
+
+  /* Die schwebende Werkzeugleiste rechts (QuestionsTabView.tsx): Pille,
+     Rand, Ghost-Knoepfe 36 mit Icons 20, oben "Frage hinzufuegen", dann ein
+     Trenner und die Feldtypen. "Foto (Kamera)" gibt es nur intern. */
+  const FB_LEISTE_B = pz(36) + 2 * pz(6);
+  function fbLeiste(x, y) {
+    const ikonen = ["circle-plus", null, "type", "align-left", "upload", "calendar"];
+    let h = pz(8), ys = [];
+    ikonen.forEach(i => { ys.push(h); h += (i ? pz(36) : pz(1) + pz(8)) + pz(4); });
+    h += pz(8) - pz(4);
+    let g = '<path d="' + rundRechteck(x, y, FB_LEISTE_B, h, FB_LEISTE_B / 2) + '" fill="' + P.karte + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    ikonen.forEach((i, k) => {
+      if (!i) g += '<path d="M' + n1(x + FB_LEISTE_B / 2 - pz(12)) + "," + n1(y + ys[k] + pz(4)) + "h" + n1(pz(24)) + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+      else g += pIkon(i, x + FB_LEISTE_B / 2, y + ys[k] + pz(18), 20, P.text2);
+    });
+    return g;
+  }
+
+  /* "Frage hinzufuegen": Flaeche ueber die ganze Breite, 2 px gestrichelt
+     in border-strong, py32, Icon 24 und Schrift 20/500. */
+  const FB_NEU_H = 2 * pz(32) + pz(26);
+  function fbNeu(x, y, b) {
+    let g = '<path d="' + rundRechteck(x, y, b, FB_NEU_H, 8) + '" fill="' + P.seite + '" stroke="' + P.randStark +
+      '" stroke-width="2" stroke-dasharray="7 6"/>';
+    const tb = pz(24) + pz(8) + pMess("Frage hinzufügen", 20, 500), tx = x + (b - tb) / 2;
+    g += pIkon("plus", tx + pz(12), y + FB_NEU_H / 2, 24, P.icon3);
+    g += pText(tx + pz(24) + pz(8), pMitte(y + FB_NEU_H / 2, 20), "Frage hinzufügen", 20, 500, P.text3);
+    return g;
+  }
+
+  /* Ein gefuelltes Feld ohne Beschriftung, h36 (oder h32 bei klein). */
+  function fbFeld(x, y, b, wert, o) {
+    o = o || {};
+    const h = pz(o.klein ? 32 : 36), gr = o.klein ? 14 : 16;
+    let g = '<path d="' + rundRechteck(x, y, b, h, 4) + '" fill="' + P.seite + '" stroke="' + P.randStark + '" stroke-width="1.2"/>';
+    let tx = x + pz(12);
+    if (o.ikon) { g += pIkon(o.ikon, tx + pz(7), y + h / 2, 14, P.leise); tx += pz(14) + pz(8); }
+    const platz = x + b - tx - pz(12) - (o.auswahl ? pz(16) + pz(6) : 0);
+    g += pText(tx, pMitte(y + h / 2, gr), pKurz(wert, gr, o.gew || 400, platz), gr, o.gew || 400, o.leer ? P.leise : (o.farbe || P.text2));
+    if (o.auswahl) g += pIkon("chevron-down", x + b - pz(12) - pz(8), y + h / 2, 16, P.icon3);
+    return g;
+  }
+
+  /* Die offene Frage (SortableQuestionCard.tsx:187): kein farbiger Rand,
+     sondern ein 6-px-Streifen links in Sky. Oben der Griff, dann Frage und
+     Typ nebeneinander. Was darunter kommt, liefert der Aufrufer. */
+  function fbOffenKopf(x, y, b, frage, typ, typIkon) {
+    let g = "";
+    const ix = x + 6 + pz(24), ib = b - 6 - 2 * pz(24);
+    let cy = y + pz(20);
+    g += pIkon("grip-horizontal", x + b / 2, cy + pz(10), 20, P.leise);
+    cy += pz(20) + pz(20);
+    const tb = pz(256);
+    g += fbFeld(ix, cy, ib - tb - pz(16), frage, { gew: 500, farbe: P.text });
+    g += fbFeld(ix + ib - tb, cy, tb, typ, { ikon: typIkon, auswahl: true, klein: false });
+    cy += pz(36);
+    return { svg: g, unten: cy, ix, ib };
+  }
+  function fbOffenKarte(x, y, b, h) {
+    return pKarte(x, y, b, h, "std", 8) +
+      '<path d="M' + n1(x + 8) + "," + n1(y) + "H" + n1(x + 6) + "V" + n1(y + h) + "H" + n1(x + 8) +
+      "a8,8 0 0 1 -8,-8V" + n1(y + 8) + "a8,8 0 0 1 8,-8Z" + '" fill="' + FB_STREIFEN + '"/>';
+  }
+
+  /* Eine Option (QuestionEditors.tsx:48): Kreis 16 mit 2-px-Rand, Feld,
+     Ghost-x zum Entfernen. */
+  function fbOption(x, y, b, text, leer) {
+    const h = pz(36), ym = y + h / 2;
+    let g = '<circle cx="' + n1(x + pz(8)) + '" cy="' + n1(ym) + '" r="' + n1(pz(7)) + '" fill="' + P.karte +
+      '" stroke="' + P.randStark + '" stroke-width="2"/>';
+    g += fbFeld(x + pz(16) + pz(12), y, b - pz(16) - pz(12) - pz(12) - pz(32), text, { leer });
+    g += pGeist(x + b - pz(16), ym, "x", P.text2);
+    return g;
+  }
+  function fbOptionNeu(x, y) {
+    const h = pz(32), ym = y + h / 2;
+    let g = '<circle cx="' + n1(x + pz(8)) + '" cy="' + n1(ym) + '" r="' + n1(pz(7)) + '" fill="none" stroke="' +
+      P.rand + '" stroke-width="2" stroke-dasharray="3 3"/>';
+    g += pKnopf(x + pz(16) + pz(12), y, "Option hinzufügen", "tertiaer", { klein: true, ikon: "plus" }).svg;
+    return g;
+  }
+
+  /* Switch, aus: Spur hell mit dunklem Knopf links. */
+  function fbSchalter(x, ym, an) {
+    const b = pz(36), h = pz(22), k = pz(16);
+    let g = '<rect x="' + n1(x) + '" y="' + n1(ym - h / 2) + '" width="' + n1(b) + '" height="' + n1(h) + '" rx="' + n1(h / 2) +
+      '" fill="' + (an ? P.text : P.seite) + '" stroke="' + P.text + '" stroke-width="1.2"/>';
+    g += '<circle cx="' + n1(an ? x + b - pz(3) - k / 2 : x + pz(3) + k / 2) + '" cy="' + n1(ym) + '" r="' + n1(k / 2) +
+      '" fill="' + (an ? "#FAFAFA" : P.text) + '"/>';
+    return g;
+  }
+
+  /* ─── Slide 1 · Die Fragen ───────────────────────────────────────────────
+     Der Reiter "Fragen" mit den zugeklappten Karten und der Werkzeugleiste
+     rechts. Lead-Banner und Titelkarte stehen im Produkt darueber und
+     fehlen hier, damit die Karte nicht in den Text der Slide ragt. */
+  function visFelder() {
+    const SB = P_B - 2 * P_PAD - FB_LEISTE_B - pz(12);
+    let g = "", y = FB_OBEN + P_PAD;
+    FRAGEN.forEach(f => { const k = fbFrage(P_PAD, y, SB, f); g += k.svg; y += k.h + pz(16); });
+    y -= pz(16);
+    g += fbLeiste(P_B - P_PAD - FB_LEISTE_B, FB_OBEN + P_PAD);
+    return fbRahmen(y + P_PAD, g);
+  }
+
+  /* ─── Slide 2 · Bedingt sichtbar ─────────────────────────────────────────
+     Die Frage, an der es haengt, zugeklappt, und darunter die offene Frage
+     "Fotos vom Objekt" mit dem Kasten "Nur anzeigen, wenn" und einer Regel
+     (QuestionEditors.tsx:123). Welche Antwort sie ausloest, ist Demo-Inhalt.
+     Die Feldvorschau und die Fusszeile der offenen Karte fehlen hier aus
+     Platzgruenden. */
+  function visBedingt() {
+    const SB = P_B - 2 * P_PAD;
+    let g = "", y = FB_OBEN + P_PAD;
+    const k = fbFrage(P_PAD, y, SB, FRAGEN[2]);
+    g += k.svg; y += k.h + pz(16);
+
+    const top = y, kopf = fbOffenKopf(P_PAD, top, SB, FRAGEN[3].t, "Datei", "paperclip");
+    let cy = kopf.unten + pz(20);
+    /* Der Kasten mit der Regel. */
+    const bx = kopf.ix, bb = kopf.ib, bp = pz(16);
+    const bh = pz(12) + pz(18) + pz(8) + pz(32) + pz(8) + pz(32) + pz(12);
+    let r = '<path d="' + rundRechteck(bx, cy, bb, bh, P_RAD) + '" fill="' + P.seite + '" stroke="' + P.rand + '" stroke-width="1.2"/>';
+    let ry = cy + pz(12);
+    r += pIkon("eye", bx + bp + pz(7), ry + pz(9), 14, P.text);
+    r += pText(bx + bp + pz(14) + pz(6), pMitte(ry + pz(9), 14), "Nur anzeigen, wenn", 14, 600, P.text);
+    ry += pz(18) + pz(8);
+    const fb = pz(192), bdb = pz(176), xb = pz(32), luecke = pz(8);
+    const wb = bb - 2 * bp - fb - bdb - xb - 3 * luecke;
+    let rx = bx + bp;
+    r += fbFeld(rx, ry, fb, "Um welchen Bereich geht es?", { klein: true, auswahl: true }); rx += fb + luecke;
+    r += fbFeld(rx, ry, bdb, "ist gleich", { klein: true, auswahl: true }); rx += bdb + luecke;
+    r += fbFeld(rx, ry, wb, OPTIONEN[0], { klein: true, auswahl: true }); rx += wb + luecke;
+    r += pGeist(rx + xb / 2, ry + pz(16), "x", P.text2);
+    ry += pz(32) + pz(8);
+    r += pKnopf(bx + bp, ry, "Regel hinzufügen", "tertiaer", { klein: true, ikon: "plus" }).svg;
+    cy += bh + pz(20);
+
+    g += fbOffenKarte(P_PAD, top, SB, cy - top) + kopf.svg + r;
+    y = cy;
+    return fbRahmen(y + P_PAD, g);
+  }
+
+  /* ─── Slide 3 · Aus der Antwort wird ein Lead ────────────────────────────
+     Die Ansicht "Felder zuweisen" (LeadMappingView.tsx): oben das
+     Lead-Banner mit "Aktiv" und "Zurueck zu den Fragen", darunter die Karte,
+     in der jede Frage einem Lead-Feld zugeordnet wird. Eine Pipeline gibt es im Form Builder nicht, die erste Fassung
+     hatte sie erfunden. Die Beschreibung unter "Felder zuweisen", die feste
+     Zeile "Quelle" mit "Formular (automatisch)" und die Zeile "Zugeordnete
+     Lead-Felder: n" fehlen hier aus Platzgruenden. */
+  const FB_ZUORDNUNG = [
+    [FRAGEN[0], "Nachname"],
+    [FRAGEN[1], "E-Mail"],
+    [FRAGEN[2], "Anfrageart / Leistung"],
+  ];
   function visLead() {
-    let g = fbLead(0, 0, FB_B);
-    let y = 112 + 18;
-    for (const f of FRAGEN.slice(0, 2)) { g += fbZeile(0, y, f); y += FB_ZH + 12; }
-    return fbRahmen(y - 12, g, { fuss: true });
+    const SB = P_B - 2 * P_PAD, x0 = P_PAD;
+    let g = "", y = FB_OBEN + P_PAD;
+
+    /* Das Banner (LeadBanner.tsx). */
+    const bh = pz(12) + pz(18) + pz(4) + pz(18) + pz(12);
+    g += '<path d="' + rundRechteck(x0, y, SB, bh, P_RAD) + '" fill="#E1F4FD" stroke="#BCEAFB" stroke-width="1.2"/>';
+    g += '<circle cx="' + n1(x0 + pz(16) + pz(16)) + '" cy="' + n1(y + bh / 2) + '" r="' + n1(pz(16)) + '" fill="' + P.karte + '"/>';
+    g += pIkon("user-plus", x0 + pz(32), y + bh / 2, 16, "#08739C");
+    const tx = x0 + pz(16) + pz(32) + pz(12);
+    g += pText(tx, y + pz(12) + pz(14), "Lead-Verknüpfung", 14, 600, P.text);
+    g += pBadge(tx + pMess("Lead-Verknüpfung", 14, 600) + pz(8), y + pz(12) + pz(9), "Aktiv", "info", true).svg;
+    g += pText(tx, y + pz(12) + pz(18) + pz(4) + pz(14), "Neue Antworten werden als Lead gespeichert.", 14, 400, P.text3);
+    const zb = pKnopfB("Zurück zu den Fragen", { klein: true, ikon: "arrow-left" });
+    g += pKnopf(x0 + SB - pz(16) - zb, y + (bh - pz(32)) / 2, "Zurück zu den Fragen", "tertiaer", { klein: true, ikon: "arrow-left" }).svg;
+    y += bh + pz(16);
+
+    /* Die Karte "Felder zuweisen". */
+    const kp = pz(20), zh = pz(12) + pz(18) + pz(16) + pz(12), zl = pz(8);
+    const zeilen = FB_ZUORDNUNG.length;
+    const kh = pz(16) + pz(22) + pz(16) + zeilen * (zh + zl) - zl + pz(20);
+    g += pKarte(x0, y, SB, kh, "std", 8);
+    let cy = y + pz(16);
+    g += pIkon("arrow-left-right", x0 + kp + pz(8), cy + pz(11), 16, P.text);
+    g += pText(x0 + kp + pz(16) + pz(8), pMitte(cy + pz(11), 16), "Felder zuweisen", 16, 600, P.text);
+    const ab = pKnopfB("Automatisch zuweisen", { klein: true, ikon: "wand-sparkles" });
+    g += pKnopf(x0 + SB - kp - ab, cy, "Automatisch zuweisen", "tertiaer", { klein: true, ikon: "wand-sparkles" }).svg;
+    cy += pz(22) + pz(16);
+    const lb = pz(220), zx = x0 + kp, zw = SB - 2 * kp;
+    const zeile = (ikon, titel, typ, wert, fest) => {
+      let s = '<path d="' + rundRechteck(zx, cy, zw, zh, P_RAD) + '" fill="' + P.seite + '"/>';
+      const ym = cy + zh / 2;
+      s += pIkon(ikon, zx + pz(16) + pz(8), ym, 16, P.icon3);
+      const lx = zx + pz(16) + pz(16) + pz(10);
+      s += pText(lx, cy + pz(12) + pz(14), pKurz(titel, 14, 600, lb - pz(26)), 14, 600, P.text);
+      s += pText(lx, cy + pz(12) + pz(18) + pz(12), typ, 12, 400, P.text3);
+      s += pIkon("arrow-right", zx + pz(16) + lb + pz(16) + pz(8), ym, 16, P.icon3);
+      const sx = zx + pz(16) + lb + pz(16) + pz(16) + pz(16), sb = zx + zw - pz(16) - sx;
+      s += fest ? fbFeld(sx, ym - pz(18), sb, wert, { ikon: "lock" }) : fbFeld(sx, ym - pz(18), sb, wert, { auswahl: true });
+      cy += zh + zl;
+      return s;
+    };
+    FB_ZUORDNUNG.forEach(([f, w]) => g += zeile(f.ikon, f.t, f.typ, w));
+    y += kh;
+    return fbRahmen(y + P_PAD, g);
   }
 
-  /* ─── Das Bewegtbild · das Formular entsteht ──────────────────────────────
-     Der Ablauf, in Anteilen der Laufzeit (6 s):
+  /* ─── Das Bewegtbild · eine Frage entsteht ───────────────────────────────
+     Ablauf in Anteilen der Laufzeit (6 s):
 
-       0,00 - 0,04  ruhig, zwei Fragen stehen
+       0,00 - 0,04  ruhig, "Ihr Name" steht
        0,04 - 0,20  der Zeiger faehrt auf "Frage hinzufuegen"
        0,20 - 0,25  Klick
-       0,24 - 0,40  die dritte Frage klappt auf, noch ohne Optionen
-       0,36 - 0,72  Platz fuer die Optionen waechst nach
-       0,40 - 0,72  die drei Optionen erscheinen nacheinander
-       0,72 - 0,86  der Zeiger geht, das Feld steht
+       0,24 - 0,36  die neue Frage klappt auf, Typ "Text", wie im Produkt
+       0,34 - 0,50  die Frage wird getippt
+       0,52         der Typ wechselt auf "Auswahl"
+       0,54 - 0,80  die drei Optionen erscheinen nacheinander
+       0,28 - 0,40  der Zeiger geht
        0,86 - 1,00  Halt auf dem Ergebnis
 
-     Erfunden ist daran nichts: die Frage, ihr Typ und die drei Optionen
-     stehen so in der Quelle. Gezeigt wird, in welcher Reihenfolge sie
-     entstehen -- das ist die Bewegung, die ein Standbild nicht hat. */
+     Eine neue Frage heisst im Produkt erst "Unbenannte Frage" und ist vom
+     Typ "Text". Das Bewegtbild zeigt sie gleich beim Tippen, der Name des
+     Platzhalters wuerde nur aufhalten. Die Optionen heissen im Produkt
+     zuerst "Auswahl A" und "Auswahl B", hier stehen gleich die fertigen. */
   function animFormular(j, t) {
     const zeigerAn = stufe(t, .04, .20);
     const klick    = stufe(t, .20, .25);
-    /* raus und nicht rueck: back.out ueberschwingt auf 1,099 und pendelt
-       zurueck. Der Knopf fuhr damit runter, neun Pixel wieder hoch und ab
-       t = 0,40 erneut runter -- eine Richtungsumkehr in vier Zehnteln, am
-       fertigen Video als Zucken zu sehen. Ueberschwingen passt zu etwas, das
-       aufspringt; der Knopf springt aber nicht, er wird von der neuen Frage
-       nach unten geschoben, und Geschobenes federt nicht zurueck. power2.out
-       faengt genauso schnell an -- der Klick soll ja sofort etwas ausloesen --
-       nur ohne Rueckweg. */
-    const auf      = raus(stufe(t, .24, .40));
-    const zWeg     = stufe(t, .72, .86);
+    const auf      = raus(stufe(t, .24, .36));
+    const tippen   = stufe(t, .34, .50);
+    const auswahl  = t >= .52;
+    /* Der Zeiger geht gleich nach dem Klick. Blieb er bis 0,72, stand er
+       mitten in der neuen Frage, die unter ihm aufklappt. */
+    const zWeg     = stufe(t, .28, .40);
+    const SB = P_B - 2 * P_PAD - FB_LEISTE_B - pz(12);
 
-    let g = "", y = 0;
-    for (const f of FRAGEN.slice(0, 2)) { g += fbZeile(0, y, f); y += FB_ZH + 12; }
+    let g = "", y = FB_OBEN + P_PAD;
+    FRAGEN.slice(0, 1).forEach(f => { const k = fbFrage(P_PAD, y, SB, f); g += k.svg; y += k.h + pz(16); });
+    const neuY = y;
 
-    const knopfY = y;
-    /* Der Knopf "Frage hinzufuegen": gestrichelt, wie im Screenshot. Er
-       rutscht nach unten, sobald die neue Frage Platz braucht. */
-    let neuH = 0;
-    if (auf > .01) {
-      /* Der Platz waechst ab 0,36 und nicht erst ab 0,40: sonst steht der
-         Knopf kurz still -- das Aufklappen ist ausgelaufen, das Wachsen hat
-         noch nicht angefangen -- und setzt sich dann ruckartig wieder in
-         Bewegung. Mit der Ueberlappung geht das eine ins andere ueber. Die
-         Optionen selbst erscheinen weiter ab 0,40; sie bekommen ihren Platz
-         also einen Wimpernschlag vorher, was man nicht sieht. */
-      neuH = (FB_ZH + 12) + Math.round(OPTIONEN.length * 54 * Math.min(1, stufe(t, .36, .72) * 1.15));
-    }
-    const kY = knopfY + neuH * auf;
+    /* Die offene Karte waechst mit den Optionen. Ihre volle Hoehe: Kopf,
+       drei Optionen, "Option hinzufuegen". */
+    const optH = pz(36) + pz(12);
+    const kopfH = pz(20) + pz(20) + pz(20) + pz(36) + pz(20);
+    const voll = kopfH + OPTIONEN.length * optH + pz(32) + pz(20);
+    const wachs = OPTIONEN.length * optH + pz(32) + pz(12);
+    const gewachsen = daempfen(stufe(t, .52, .80));
+    const offenH = (kopfH + pz(8)) + wachs * gewachsen;
+    const platz = auf * (offenH + pz(16));
 
     if (auf > .01) {
-      const oben = knopfY;
-      g += '<g opacity="' + n1(Math.min(1, auf * 2)) + '">';
-      g += fbZeile(0, oben, FRAGEN[2], { aktiv: true });
-      let oy = oben + FB_ZH + 10;
+      const frage = "Um welchen Bereich geht es?";
+      const sichtbar = tippen <= 0 ? "Unbenannte Frage" : frage.slice(0, Math.max(1, Math.round(frage.length * tippen)));
+      let k = '<g opacity="' + n1(Math.min(1, auf * 1.6)) + '">';
+      k += fbOffenKarte(P_PAD, neuY, SB, offenH);
+      const kopf = fbOffenKopf(P_PAD, neuY, SB, sichtbar, auswahl ? "Auswahl" : "Text", auswahl ? "circle-dot" : "type");
+      k += kopf.svg;
+      let oy = kopf.unten + pz(20);
       OPTIONEN.forEach((o, i) => {
-        const e = daempfen(stufe(t, .40 + i * .10, .52 + i * .10));
+        const e = daempfen(stufe(t, .54 + i * .08, .64 + i * .08));
         if (e <= .01) return;
-        g += '<g opacity="' + n1(e) + '" transform="translate(0,' + n1((1 - e) * 10) + ')">';
-        g += '<circle cx="60" cy="' + n1(oy + 22) + '" r="9" fill="none" stroke="' +
-          CHAT_RAND + '" stroke-width="1.6"/>';
-        g += '<rect x="84" y="' + n1(oy) + '" width="' + (FB_B - 140) +
-          '" height="44" rx="8" fill="' + FL_KARTE + '" stroke="' + CHAT_RAND +
-          '" stroke-width="1.2"/>';
-        g += uiText(102, oy + 29, o, 16, 500, CHAT_TEXT2);
-        g += '</g>';
-        oy += 54;
+        k += '<g opacity="' + n1(e) + '" transform="translate(0,' + n1((1 - e) * 8) + ')">' + fbOption(kopf.ix, oy, kopf.ib, o) + "</g>";
+        oy += optH;
       });
-      g += '</g>';
+      const eNeu = daempfen(stufe(t, .76, .84));
+      if (eNeu > .01) k += '<g opacity="' + n1(eNeu) + '">' + fbOptionNeu(kopf.ix, kopf.unten + pz(20) + OPTIONEN.length * optH) + "</g>";
+      k += "</g>";
+      g += k;
     }
-
-    g += '<path d="' + rundRechteck(0, kY, FB_B, 64, 10) + '" fill="none" stroke="' +
-      CHAT_RAND + '" stroke-width="1.6" stroke-dasharray="7 6"/>';
-    g += ikon("plus", FB_B / 2 - 78, kY + 32, 18, CHAT_TEXT3);
-    g += uiText(FB_B / 2 - 62, kY + 38, "Frage hinzufügen", 17, 700, CHAT_TEXT3);
+    const knopfY = neuY + platz;
+    g += fbNeu(P_PAD, knopfY, SB);
+    g += fbLeiste(P_B - P_PAD - FB_LEISTE_B, FB_OBEN + P_PAD);
 
     const zAn = zeigerAn * (1 - zWeg);
     if (zAn > .01) {
-      const vonX = FB_B - 60, vonY = kY + 210;
-      const zuX = FB_B / 2 - 66, zuY = knopfY + 34;
+      const vonX = SB - 40, vonY = neuY + 300;
+      const zuX = P_PAD + SB / 2 - 40, zuY = neuY + FB_NEU_H / 2 + 4;
       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 zx = u * u * vonX + 2 * u * p1 * sx + p1 * p1 * zuX;
       const zy = u * u * vonY + 2 * u * p1 * sy + p1 * p1 * zuY;
+      /* Nach dem Klick faehrt der Zeiger mit dem Knopf nicht mit, er bleibt
+         stehen, wo geklickt wurde. */
       g += klickRing(zx + 2, zy + 2, klick < 1 ? klick : 0);
-      g += '<g opacity="' + n1(Math.min(1, zeigerAn * 2) * (1 - zWeg)) + '">' +
-        zeiger(zx, zy, 1.5) + '</g>';
+      g += '<g opacity="' + n1(Math.min(1, zeigerAn * 2) * (1 - zWeg)) + '">' + zeiger(zx, zy, 1.5) + "</g>";
     }
-
-    /* Feste Kastenhoehe: der Endzustand, ausgerechnet statt gemessen --
-       zwei Zeilen, dann die dritte Frage mit ihren drei Optionen, darunter
-       der Knopf. */
-    return fbRahmen(0, g, { h: FB_KOPF + 2 * (FB_ZH + 12) + (FB_ZH + 10) +
-                            OPTIONEN.length * 54 + 64 + 34 });
+    /* Feste Hoehe: der Endzustand, ausgerechnet. */
+    const h = FB_OBEN + P_PAD + (FB_FRAGE_H + pz(16)) + voll + pz(16) + FB_NEU_H + P_PAD;
+    return fbRahmen(h, g);
   }
 
   /* ═══ Zeitachse ══════════════════════════════════════════════════════════
@@ -7311,12 +7740,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();
@@ -7353,6 +7809,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");