diff --git a/CLAUDE.md b/CLAUDE.md
index 2a2014a..1968a8f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -150,6 +150,16 @@ controls and handlers a person does; it is NOT a second rendering path.
   Colours, fonts and logo placement need no documenting; "Typografie steht
   immer in Kombination mit Grün" and the protective margin M = 0.06 x short
   edge do.
+- `e2e/api-coverage.spec.js` holds the facade to its promise of covering the
+  whole UI: it walks the wizard's controls and asserts each has a counterpart,
+  compares every `<option>` against `options()`, and checks each QR content
+  type can be built. **Add a control to the UI, add it there too** — otherwise
+  the gap is invisible until somebody asks for the feature.
+- `e2e/llms-examples.spec.js` executes every ```js block in `llms.txt` against
+  the page. A worked example that does not work is worse than none: the model
+  follows it, hits an error it cannot interpret, and improvises — the failure
+  this interface exists to prevent. Keep examples complete and runnable, not
+  fragments.
 - `lastAdded()` exists because `canvas.getObjects()` ends with the organisation
   LOGO, not with the element just added — `addLogo()` and the QR handler both
   call `bringLogoToFront()`. Anything that operates on "the last object" moves
diff --git a/e2e/api-coverage.spec.js b/e2e/api-coverage.spec.js
new file mode 100644
index 0000000..87adccc
--- /dev/null
+++ b/e2e/api-coverage.spec.js
@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * The facade's promise is "everything the page can do". This test holds it to
+ * that literally: it walks the interactive controls of the wizard and asserts
+ * that each one has a counterpart on window.Bildgenerator.
+ *
+ * Without it the promise decays silently — a new button in the UI is simply
+ * unreachable for callers, and nobody notices until someone asks for it.
+ */
+test.describe('facade covers the whole UI', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForFunction(() => typeof window.Bildgenerator !== 'undefined');
+  });
+
+  // Every control a person can operate, and the call that replaces it.
+  const CONTROLS = {
+    'canvas-template': 'setTemplate',
+    'logo-selection': 'setLogo',
+    'logo-toggle': 'setLogoEnabled',
+    'meme-input': 'setBackground',
+    text: 'addText',
+    'text-color': 'addText',
+    'font-style-select': 'addText',
+    'line-height': 'addText',
+    'shadow-depth': 'addText',
+    'add-text': 'addText',
+    'add-pink-circle': 'addShape',
+    'add-cross': 'addShape',
+    'add-image': 'addImage',
+    'add-circle': 'clipToCircle',
+    'circle-radius': 'clipToCircle',
+    'qr-text': 'addQRCode',
+    'qr-color': 'addQRCode',
+    'add-qr-code': 'addQRCode',
+    scale: 'resize',
+    'remove-element': 'remove',
+    'bring-to-front': 'bringToFront',
+    'image-format': 'export',
+    'image-quality': 'export',
+    'generate-meme': 'export',
+    'start-over': 'reset',
+  };
+
+  test('every control in the wizard has a counterpart on the facade', async ({ page }) => {
+    const result = await page.evaluate((controls) => {
+      const missingInUI = [];
+      const missingInFacade = [];
+      for (const [id, method] of Object.entries(controls)) {
+        if (!document.getElementById(id)) missingInUI.push(id);
+        if (typeof window.Bildgenerator[method] !== 'function') missingInFacade.push(method);
+      }
+      return { missingInUI, missingInFacade };
+    }, CONTROLS);
+
+    // A control that vanished from the UI means this map is stale.
+    expect(result.missingInUI, 'controls named here but gone from the markup').toEqual([]);
+    expect(result.missingInFacade, 'controls with no facade counterpart').toEqual([]);
+  });
+
+  test('capabilities beyond single controls are reachable too', async ({ page }) => {
+    const missing = await page.evaluate(() => {
+      // Things a person does by dragging, clicking or looking — no control id.
+      const needed = [
+        'place',        // dragging an element
+        'rotate',       // the rotation handle
+        'select',       // clicking an element
+        'update',       // editing a placed element
+        'objects',      // seeing what is on the canvas
+        'lastAdded',
+        'protectiveMargin',
+        'templates', 'logos', 'options',
+        'render', 'renderQRCode', 'qrPayload',
+      ];
+      return needed.filter((n) => typeof window.Bildgenerator[n] !== 'function');
+    });
+
+    expect(missing).toEqual([]);
+  });
+
+  test('every selectable value in the UI is offered by options()', async ({ page }) => {
+    const result = await page.evaluate(() => {
+      const values = (sel) => [...document.querySelectorAll(`${sel} option`)]
+        .map((o) => o.value).filter(Boolean);
+      const o = window.Bildgenerator.options();
+      const compare = (a, b) => a.every((v) => b.includes(v));
+      return {
+        textColors: compare(values('#text-color'), o.textColors),
+        lineHeights: compare(values('#line-height'), o.lineHeights),
+        clipSizes: compare(values('#circle-radius'), o.clipSizes),
+        qrColorsOnImage: compare(values('#qr-color'), o.qrColorsOnImage),
+        qrColors: compare(values('#qr-color-select'), o.qrColors),
+        qrBackgrounds: compare(values('#qr-background-select'), o.qrBackgrounds),
+      };
+    });
+
+    for (const [key, ok] of Object.entries(result)) {
+      expect(ok, `options().${key} is missing values the UI offers`).toBe(true);
+    }
+  });
+
+  test('every QR content type of the wizard can be built', async ({ page }) => {
+    const result = await page.evaluate(() => {
+      const uiTypes = [...document.querySelectorAll('.app-qr-type-button')]
+        .map((b) => b.dataset.type);
+      const B = window.Bildgenerator;
+      const samples = {
+        text: { type: 'text', text: 'x' },
+        url: { type: 'url', url: 'gruene.at' },
+        email: { type: 'email', email: 'a@gruene.at' },
+        vcard: { type: 'vcard', firstname: 'A', lastname: 'B' },
+      };
+      const unsupported = uiTypes.filter((t) => !samples[t] || !B.qrPayload(samples[t]));
+      return { uiTypes, unsupported };
+    });
+
+    expect(result.uiTypes.length).toBeGreaterThan(0);
+    expect(result.unsupported, 'QR types the wizard offers but the facade cannot build').toEqual([]);
+  });
+});
diff --git a/e2e/api-editing.spec.js b/e2e/api-editing.spec.js
new file mode 100644
index 0000000..46577ad
--- /dev/null
+++ b/e2e/api-editing.spec.js
@@ -0,0 +1,185 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Everything to do with elements that are ALREADY on the canvas: looking at
+ * them, selecting, changing, deleting, reordering.
+ *
+ * The wizard can do all of this by clicking an object and touching a control.
+ * Without it a caller is blind — it can add elements but never check what it
+ * built, and to change a colour it would have to start over.
+ */
+test.describe('Bildgenerator facade — inspecting and editing', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForFunction(() => typeof window.Bildgenerator !== 'undefined');
+    page.on('dialog', (dialog) => dialog.accept());
+  });
+
+  test('objects() reports what is on the canvas and what each thing is', async ({ page }) => {
+    const objects = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      await B.setTemplate('artikel_23');
+      await B.setLogo('HERZOGENBURG');
+      await B.addText('Hallo');
+      return B.objects();
+    });
+
+    const roles = objects.map((o) => o.role);
+    expect(roles).toContain('canvas');
+    expect(roles).toContain('logo');
+
+    const text = objects.find((o) => o.type === 'text');
+    expect(text.text).toBe('Hallo');
+    expect(text.editable).toBe(true);
+
+    // The logo must be marked as off-limits, or a caller will try to move it.
+    expect(objects.find((o) => o.role === 'logo').editable).toBe(false);
+  });
+
+  test('update() changes a text that is already placed', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      await B.setTemplate('feed_post_45');
+      await B.addText('Alt', { color: '#FFFFFF' });
+      const before = { ...B.objects().find((o) => o.type === 'text') };
+
+      await B.update({ text: 'Neu', color: '#FFED00', align: 'right' });
+      const after = B.objects().find((o) => o.type === 'text');
+      return { before, after, textAlign: B.lastAdded().textAlign };
+    });
+
+    expect(result.before.text).toBe('Alt');
+    expect(result.after.text).toBe('Neu');
+    expect(result.after.color).toBe('#FFED00');
+    expect(result.textAlign).toBe('right');
+  });
+
+  test('update() re-measures the text instead of keeping stale dimensions', async ({ page }) => {
+    const sizes = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      await B.setTemplate('feed_post_45');
+      await B.addText('Kurz');
+      const before = B.lastAdded().width;
+      await B.update({ text: 'Ein deutlich laengerer Text' });
+      return { before, after: B.lastAdded().width };
+    });
+
+    // Fabric caches char metrics; without initDimensions() the box stays the
+    // old size and the new text overflows it.
+    expect(sizes.after).toBeGreaterThan(sizes.before);
+  });
+
+  test('select() addresses an element by its index', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      await B.setTemplate('feed_post_45');
+      await B.setLogoEnabled(false);
+      await B.addText('Eins');
+      await B.place('top');
+      await B.addText('Zwei');
+      await B.place('bottom');
+
+      const first = B.objects().find((o) => o.text === 'Eins');
+      B.select(first.index);
+      await B.update({ color: '#FFED00' });
+      return B.objects().filter((o) => o.type === 'text').map((o) => ({ t: o.text, c: o.color }));
+    });
+
+    expect(result.find((o) => o.t === 'Eins').c).toBe('#FFED00');
+    expect(result.find((o) => o.t === 'Zwei').c).not.toBe('#FFED00');
+  });
+
+  test('remove() deletes an element', async ({ page }) => {
+    const counts = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      await B.setTemplate('feed_post_45');
+      await B.addShape('cross');
+      const before = B.objects().length;
+      await B.remove();
+      return { before, after: B.objects().length };
+    });
+
+    expect(counts.after).toBe(counts.before - 1);
+  });
+
+  test('remove() refuses the logo and the background, as the UI does', async ({ page }) => {
+    const messages = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      const png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVR42mP8z8BQz0AEYBxVSF+FAP5FDvcfRYWgAAAAAElFTkSuQmCC';
+      await B.setTemplate('feed_post_45');
+      await B.setBackground(png);
+      await B.setLogo('HERZOGENBURG');
+
+      const out = {};
+      for (const role of ['logo', 'background']) {
+        const item = B.objects().find((o) => o.role === role);
+        try {
+          await B.remove(item.index);
+          out[role] = null;
+        } catch (e) {
+          out[role] = e.message;
+        }
+      }
+      return out;
+    });
+
+    expect(messages.logo).toContain('logo');
+    expect(messages.background).toContain('background');
+  });
+
+  test('bringToFront() reorders but keeps the logo on top', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      const B = window.Bildgenerator;
+      await B.setTemplate('feed_post_45');
+      await B.setLogo('HERZOGENBURG');
+      await B.addText('Hinten');
+      await B.addShape('pinkCircle');
+
+      const text = B.objects().find((o) => o.type === 'text');
+      await B.bringToFront(text.index);
+
+      const after = B.objects();
+      return {
+        lastRole: after[after.length - 1].role,
+        textIndex: after.find((o) => o.type === 'text').index,
+        circleIndex: after.find((o) => o.type === 'circle').index,
+      };
+    });
+
+    expect(result.textIndex).toBeGreaterThan(result.circleIndex);
+    expect(result.lastRole).toBe('logo');
+  });
+
+  test('builds QR payloads for all four content types', async ({ page }) => {
+    const payloads = await page.evaluate(() => {
+      const B = window.Bildgenerator;
+      return {
+        text: B.qrPayload({ type: 'text', text: 'Hallo' }),
+        url: B.qrPayload({ type: 'url', url: 'gruene.at' }),
+        email: B.qrPayload({ type: 'email', email: 'a@gruene.at', subject: 'Hallo Welt' }),
+        vcard: B.qrPayload({ type: 'vcard', firstname: 'Anna', lastname: 'Muster', email: 'a@gruene.at' }),
+      };
+    });
+
+    expect(payloads.text).toBe('Hallo');
+    expect(payloads.url).toContain('gruene.at');
+    expect(payloads.email.startsWith('mailto:a@gruene.at')).toBe(true);
+    expect(payloads.email).toContain('subject=Hallo%20Welt');
+    expect(payloads.vcard).toContain('BEGIN:VCARD');
+    expect(payloads.vcard).toContain('Anna');
+  });
+
+  test('renderQRCode() takes a typed spec, not just a raw string', async ({ page }) => {
+    const result = await page.evaluate(async () =>
+      window.Bildgenerator.renderQRCode({
+        type: 'email',
+        email: 'buero@gruene.at',
+        subject: 'Anfrage',
+        color: '#257639',
+      })
+    );
+
+    expect(result.dataURL.startsWith('data:image/png;base64,')).toBe(true);
+    expect(result.width).toBeGreaterThan(0);
+  });
+});
diff --git a/e2e/api.spec.js b/e2e/api.spec.js
index df51770..64e000e 100644
--- a/e2e/api.spec.js
+++ b/e2e/api.spec.js
@@ -34,7 +34,9 @@ test.describe('Bildgenerator facade', () => {
       version: window.Bildgenerator.VERSION,
     }));
 
-    expect(version).toBe(3);
+    // The exact number is asserted in llms-txt.spec.js, against the document.
+    // Repeating it here would just be a second place to forget on a bump.
+    expect(Number.isInteger(version) && version > 0).toBe(true);
     expect(templates).toContain('artikel_23');
     expect(templates).toContain('feed_post_45');
     expect(logos).toContain('HERZOGENBURG');
@@ -336,6 +338,23 @@ test.describe('Bildgenerator facade', () => {
     expect(result.after).toEqual(result.before);
   });
 
+  test('rejects free coordinates outside the canvas', async ({ page }) => {
+    const message = await page.evaluate(async () => {
+      await window.Bildgenerator.setTemplate('feed_post_45');
+      await window.Bildgenerator.addShape('cross');
+      try {
+        await window.Bildgenerator.place({ x: 1.5, y: 0 });
+        return null;
+      } catch (error) {
+        return error.message;
+      }
+    });
+
+    // llms.txt promises these are rejected; silently clamping would make the
+    // document a lie and put elements somewhere the caller did not ask for.
+    expect(message).toContain('between 0 and 1');
+  });
+
   test('rejects an unknown position and lists the valid ones', async ({ page }) => {
     const message = await page.evaluate(async () => {
       await window.Bildgenerator.setTemplate('feed_post_45');
@@ -352,6 +371,131 @@ test.describe('Bildgenerator facade', () => {
     expect(message).toContain('top-left');
   });
 
+  // -------------------------------------------------- several texts, sizing
+
+  test('renders several texts with their own colour, size and position', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      await window.Bildgenerator.render({
+        template: 'artikel_23',
+        logoEnabled: false,
+        texts: [
+          { text: 'Windpark', color: '#FFED00', position: 'top' },
+          { text: 'kommt', color: '#FFFFFF', size: 0.5, position: 'bottom' },
+        ],
+        dpi: 72,
+      });
+      const texts = canvas.getObjects().filter((o) => o.type === 'text');
+      return texts.map((t) => ({
+        text: t.text,
+        fill: t.fill,
+        scale: Math.round(t.scaleX * 100) / 100,
+        top: Math.round(t.top),
+      }));
+    });
+
+    expect(result).toHaveLength(2);
+    expect(result[0].fill).toBe('#FFED00');
+    expect(result[1].fill).toBe('#FFFFFF');
+    // Two texts must not end up stacked on the same spot.
+    expect(result[0].top).not.toBe(result[1].top);
+    expect(result[1].top).toBeGreaterThan(result[0].top);
+  });
+
+  test('resize() changes an element without moving it off the canvas', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      await window.Bildgenerator.setTemplate('feed_post_45');
+      await window.Bildgenerator.addText('Test');
+      const before = window.Bildgenerator.lastAdded().getScaledWidth();
+      await window.Bildgenerator.resize(0.4);
+      const after = window.Bildgenerator.lastAdded().getScaledWidth();
+      return { before, after };
+    });
+
+    expect(result.after).toBeLessThan(result.before);
+  });
+
+  test('place() accepts free coordinates and still honours the margin', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      await window.Bildgenerator.setTemplate('feed_post_45');
+      await window.Bildgenerator.setLogoEnabled(false);
+      await window.Bildgenerator.addShape('pinkCircle');
+      await window.Bildgenerator.place({ x: 0, y: 0 });
+      const atOrigin = { ...window.Bildgenerator.lastAdded() };
+      const o = window.Bildgenerator.lastAdded();
+      const topLeft = { left: o.left, top: o.top };
+
+      await window.Bildgenerator.place({ x: 1, y: 1 });
+      const bottomRight = {
+        right: o.left + o.getScaledWidth(),
+        bottom: o.top + o.getScaledHeight(),
+      };
+      return {
+        topLeft,
+        bottomRight,
+        margin: window.Bildgenerator.protectiveMargin(),
+        canvas: { w: canvas.width, h: canvas.height },
+      };
+    });
+
+    expect(result.topLeft.left).toBeCloseTo(result.margin, 1);
+    expect(result.topLeft.top).toBeCloseTo(result.margin, 1);
+    expect(result.bottomRight.right).toBeCloseTo(result.canvas.w - result.margin, 1);
+    expect(result.bottomRight.bottom).toBeCloseTo(result.canvas.h - result.margin, 1);
+  });
+
+  test('text alignment and block placement are different things', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      await window.Bildgenerator.setTemplate('feed_post_45');
+      await window.Bildgenerator.setLogoEnabled(false);
+      await window.Bildgenerator.addText('Zeile eins\nZeile zwei', { align: 'right' });
+      const text = window.Bildgenerator.lastAdded();
+      const centred = text.left;
+      await window.Bildgenerator.place('left');
+      return { textAlign: text.textAlign, centred, placed: text.left };
+    });
+
+    // align='right' sets the lines inside the block; the block itself only
+    // moves through place(). Confusing the two is the most common mistake.
+    expect(result.textAlign).toBe('right');
+    expect(result.placed).toBeLessThan(result.centred);
+  });
+
+  test('rotate() turns an element and normalises the angle', async ({ page }) => {
+    const result = await page.evaluate(async () => {
+      await window.Bildgenerator.setTemplate('feed_post_45');
+      await window.Bildgenerator.addShape('cross');
+      await window.Bildgenerator.rotate(15);
+      const after = window.Bildgenerator.lastAdded().angle;
+      await window.Bildgenerator.rotate(-90);
+      const negative = window.Bildgenerator.lastAdded().angle;
+      return { after, negative };
+    });
+
+    expect(result.after).toBe(15);
+    // Absolute, not relative — and a negative angle comes back in 0..360.
+    expect(result.negative).toBe(270);
+  });
+
+  test('render() rotates shapes and texts', async ({ page }) => {
+    const angles = await page.evaluate(async () => {
+      await window.Bildgenerator.render({
+        template: 'feed_post_45',
+        logoEnabled: false,
+        texts: [{ text: 'Schräg', rotate: 350, position: 'center' }],
+        shapes: [{ kind: 'cross', rotate: 20, position: 'top-right' }],
+        dpi: 72,
+      });
+      const objects = canvas.getObjects();
+      return {
+        text: objects.find((o) => o.type === 'text').angle,
+        cross: objects.find((o) => o.type === 'image').angle,
+      };
+    });
+
+    expect(angles.text).toBe(350);
+    expect(angles.cross).toBe(20);
+  });
+
   // --------------------------------------------------------------- failures
 
   test('rejects an unknown template by name and lists the valid ones', async ({ page }) => {
diff --git a/e2e/llms-examples.spec.js b/e2e/llms-examples.spec.js
new file mode 100644
index 0000000..afa233d
--- /dev/null
+++ b/e2e/llms-examples.spec.js
@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const llms = readFileSync(join(process.cwd(), 'llms.txt'), 'utf8');
+
+/**
+ * Runs the code examples from llms.txt against the real page.
+ *
+ * A worked example that does not work is worse than none: the model follows it,
+ * hits an error it cannot interpret, and improvises — the exact failure this
+ * interface exists to prevent. The examples are the part of the document most
+ * likely to be copied verbatim, so they are the part that must be executable.
+ */
+test.describe('llms.txt examples actually run', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForFunction(() => typeof window.Bildgenerator !== 'undefined');
+    page.on('dialog', (dialog) => dialog.accept());
+  });
+
+  // Every ```js block in the document.
+  const examples = [...llms.matchAll(/```js\n([\s\S]*?)```/g)].map((m) => m[1]);
+
+  test('the document contains runnable examples', () => {
+    expect(examples.length).toBeGreaterThanOrEqual(3);
+  });
+
+  for (const [index, code] of examples.entries()) {
+    const firstLine = code.trim().split('\n')[0].slice(0, 60);
+    test(`example ${index + 1} runs: ${firstLine}…`, async ({ page }) => {
+      const error = await page.evaluate(async (source) => {
+        try {
+          // The examples are written as top-level await against the page.
+          const run = new Function(`return (async () => { ${source} })()`);
+          await run();
+          return null;
+        } catch (e) {
+          return e.message;
+        }
+      }, code);
+
+      expect(error, `example ${index + 1} failed`).toBeNull();
+    });
+  }
+});
diff --git a/llms.txt b/llms.txt
index fbcdc7c..329d2e2 100644
--- a/llms.txt
+++ b/llms.txt
@@ -49,7 +49,7 @@ weitere Freigabe.
 
 Seite laden, warten bis `window.Bildgenerator` existiert, dann aufrufen.
 Alle Methoden sind asynchron und liefern erst zurück, wenn das Canvas seine
-Ruhelage erreicht hat. Aktuelle Schnittstellenversion: `Bildgenerator.VERSION === 3`.
+Ruhelage erreicht hat. Aktuelle Schnittstellenversion: `Bildgenerator.VERSION === 6`.
 
 ```js
 const bild = await window.Bildgenerator.render({
@@ -85,14 +85,17 @@ Bildgenerator.options()    // alle übrigen Auswahlmöglichkeiten
 | `background` | Hintergrundbild als `data:`-URL oder absolute URL |
 | `logo` | Organisation aus `logos()`, z. B. `'HERZOGENBURG'` |
 | `logoEnabled` | `false`, um ganz ohne Organisationslogo zu arbeiten |
-| `text` | Schlagzeile |
+| `text` | eine einzelne Schlagzeile |
+| `texts` | **mehrere Texte** mit eigener Farbe, Größe und Position — siehe unten |
 | `textColor` | aus `options().textColors` |
 | `fontStyle` | aus `options().fontStyles` — `'standard'` oder `'accent'` (kursive Akzentschrift) |
-| `align` | `left` \| `center` \| `right` |
+| `align` | `left` \| `center` \| `right` — Ausrichtung **innerhalb** des Textblocks |
+| `textSize` | Skalierung des Textblocks, `1` = wie eingefügt |
+| `textRotate` | Drehung in Grad |
 | `lineHeight` | aus `options().lineHeights` |
 | `shadow` | Schattentiefe als Zahl |
 | `textPosition` | aus `options().positions` |
-| `shapes` | Liste aus `options().shapes` — `'pinkCircle'`, `'cross'` (Wahlkreuz). Auch `{ kind, position }` |
+| `shapes` | Liste aus `options().shapes` — `'pinkCircle'`, `'cross'` (Wahlkreuz). Auch `{ kind, position, size, rotate }` |
 | `images` | Liste weiterer Bilder. Auch `{ url, position }` |
 | `qr` | `{ text, color, position }` — QR-Code auf dem Bild |
 | `format` | `'png'` (Standard) oder `'jpeg'` |
@@ -116,11 +119,19 @@ Objekt zurück, sind also verkettbar.
 | `setLogo(name)` | Organisationslogo setzen |
 | `setLogoEnabled(false)` | Organisationslogo entfernen |
 | `setBackground(url)` | Hintergrundbild setzen |
-| `addText(text, opts)` | Schlagzeile hinzufügen |
+| `addText(text, opts)` | Text hinzufügen, beliebig oft — Optionen siehe unten |
 | `addShape(kind)` | `'pinkCircle'` oder `'cross'` hinzufügen |
 | `addImage(url)` | weiteres Bild auf das Motiv legen |
 | `addQRCode({text, color})` | QR-Code auf das Bild setzen |
 | `place(position)` | das zuletzt hinzugefügte Element positionieren |
+| `resize(faktor)` | das zuletzt hinzugefügte Element vergrößern oder verkleinern |
+| `rotate(grad)` | das zuletzt hinzugefügte Element drehen |
+| `objects()` | alles auflisten, was auf dem Bild liegt |
+| `select(index)` | ein Element ansprechen |
+| `update(änderungen)` | ein gesetztes Element ändern |
+| `remove(index)` | ein Element löschen |
+| `bringToFront(index)` | ein Element nach vorne holen |
+| `qrPayload(spec)` | QR-Inhalt für `url`, `email`, `vcard` bauen |
 | `clipToCircle(size)` | das zuletzt hinzugefügte Objekt kreisrund beschneiden |
 | `lastAdded()` | das zuletzt hinzugefügte Objekt |
 | `protectiveMargin()` | die Schutzzone M in Pixeln |
@@ -131,6 +142,129 @@ Objekt zurück, sind also verkettbar.
 nichts hinzu — er beschneidet. Der Kreis, den man hinzufügen kann, ist
 `addShape('pinkCircle')`.
 
+## Text im Detail
+
+Der häufigste Stolperstein. Text ist das einzige Element mit vielen Optionen,
+und zwei davon werden regelmäßig verwechselt.
+
+### Alle Optionen von `addText(text, optionen)`
+
+| Option | Werte | Bedeutung |
+|---|---|---|
+| `color` | aus `options().textColors` | `'#FFFFFF'` weiß, `'#FFED00'` gelb, `'#000000'` schwarz |
+| `fontStyle` | aus `options().fontStyles` | `'standard'` oder `'accent'` (kursiv, nur für Zitate und Hervorhebungen) |
+| `align` | `left`, `center`, `right` | Ausrichtung **innerhalb** des Blocks |
+| `lineHeight` | aus `options().lineHeights` | `'1.0'`, `'1.15'`, `'1.35'` |
+| `shadow` | Zahl | Schattentiefe, `0` = kein Schatten |
+
+Zeilenumbrüche setzt du mit `\n` im Text selbst.
+
+### `align` ist nicht Positionierung
+
+Das ist die Verwechslung, die am meisten Zeit kostet:
+
+- **`align`** bestimmt, wie die Zeilen *innerhalb* des Textblocks stehen. Bei
+  einzeiligem Text ist es wirkungslos.
+- **`place()`** bewegt den Block *auf dem Bild*.
+
+Linksbündig am linken Bildrand heißt also beides: `addText(t, { align: 'left' })`
+**und** `place('left')`.
+
+### Größe
+
+Es gibt kein Schriftgrößenfeld. Ein neuer Text wird automatisch auf 80 % der
+Bildbreite skaliert — je mehr Wörter, desto kleiner wird er.
+
+`resize(faktor)` ändert das nachträglich: `1` ist die eingefügte Größe, `0.5`
+die Hälfte, `2` das Doppelte. Der Regler in der Oberfläche erlaubt 0,1 bis 2;
+darüber hinaus wird es unbrauchbar.
+
+Für eine kleine Subline unter einer großen Headline ist etwa `0.4` bis `0.5`
+ein brauchbarer Ausgangswert.
+
+### Mehrere Texte
+
+`addText()` kann beliebig oft aufgerufen werden. **Jeder neue Text landet
+zentriert** — ohne `place()` liegt der zweite auf dem ersten.
+
+In `render()` geht das über `texts`:
+
+```js
+await window.Bildgenerator.render({
+  template: 'artikel_23',
+  logo: 'HERZOGENBURG',
+  texts: [
+    { text: 'Windpark\nkommt',
+      color: '#FFED00', position: 'top' },
+    { text: 'Gemeinderat beschließt Standort',
+      color: '#FFFFFF', size: 0.35, position: 'center' },
+  ],
+});
+```
+
+Einzeln geht dasselbe so:
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('artikel_23');
+await B.setLogo('HERZOGENBURG');
+
+await B.addText('Windpark\nkommt', { color: '#FFED00', align: 'left' });
+await B.place('top-left');
+
+await B.addText('Gemeinderat beschließt Standort', { color: '#FFFFFF' });
+await B.resize(0.35);
+await B.place({ x: 0, y: 0.45 });
+
+const bild = await B.export();
+```
+
+### Freie Positionierung
+
+`place()` nimmt neben den neun Feldern auch Koordinaten:
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('artikel_23');
+await B.addText('Frei platziert');
+await B.resize(0.4);
+await B.place({ x: 0, y: 0.45 });   // linker Rand, knapp oberhalb der Mitte
+```
+
+`x` und `y` laufen von `0` (links beziehungsweise oben) bis `1` (rechts
+beziehungsweise unten), jeweils innerhalb der Schutzzone. `{ x: 0.5, y: 0.5 }`
+ist die Mitte. Werte außerhalb von 0 bis 1 werden nicht akzeptiert — die
+Schutzzone gilt immer.
+
+### Drehen
+
+`rotate(grad)` dreht das zuletzt hinzugefügte Element im Uhrzeigersinn. Der
+Wert ist absolut, nicht relativ.
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('feed_post_45');
+await B.addShape('cross');
+await B.rotate(15);
+await B.place('top-right');
+```
+
+In der Oberfläche rastet der Drehgriff bei 0, 90, 180 und 270 Grad ein; über
+die Schnittstelle wird der Winkel exakt gesetzt, ohne Einrasten.
+
+Sparsam einsetzen. Gedrehte Headlines sind im Erscheinungsbild nicht
+vorgesehen — für Störer und Wahlkreuz ist eine leichte Schräge dagegen üblich.
+
+### Was nicht geht
+
+- **Keine freie Schriftgröße in Punkt** — Größe entsteht ausschließlich über
+  `resize()`, relativ zur eingefügten Größe.
+- **Keine freien Farben** — nur die Werte aus `options().textColors`
+  beziehungsweise `options().qrColors`.
+- **Kein Textrahmen und keine Hintergrundfläche hinter dem Text.**
+
+Wenn eine Anforderung das braucht, sag es, statt etwas Ähnliches zu liefern.
+
 ## QR-Code-Generator
 
 Das zweite Werkzeug der Seite erzeugt einen QR-Code für sich, ohne Bild
@@ -147,10 +281,30 @@ const qr = await window.Bildgenerator.renderQRCode({
 
 | Feld | Bedeutung |
 |---|---|
-| `data` | **Pflicht.** Inhalt — URL, Text, `mailto:` oder vCard |
+| `data` | fertiger Inhalt als Zeichenkette |
+| `type` | statt `data`: `text`, `url`, `email` oder `vcard` — dann kommen die Felder dazu |
 | `color` | aus `options().qrColors` |
 | `background` | aus `options().qrBackgrounds`, `'transparent'` erlaubt |
 
+Die vier Inhaltstypen sind dieselben, die der QR-Assistent in der Oberfläche
+anbietet. Bau `mailto:`-Zeichenketten oder vCards **nicht selbst** zusammen —
+die Formatierungsregeln stecken im Werkzeug:
+
+```js
+const B = window.Bildgenerator;
+
+await B.renderQRCode({ type: 'url', url: 'gruene.at' });
+await B.renderQRCode({ type: 'email', email: 'buero@gruene.at', subject: 'Anfrage' });
+await B.renderQRCode({
+  type: 'vcard',
+  firstname: 'Anna', lastname: 'Muster',
+  email: 'anna.muster@gruene.at', phone: '+43 1 234567',
+});
+```
+
+`qrPayload(spec)` gibt dieselbe Zeichenkette zurück, ohne zu rendern. Dieselben
+Typangaben funktionieren auch bei `addQRCode()` für den QR auf dem Bild.
+
 Vorder- und Hintergrundfarbe müssen sich unterscheiden, sonst wird der Aufruf
 abgelehnt.
 
@@ -256,6 +410,84 @@ wegfallen.
 Beim Facebook-Header schneidet Facebook auf Mobilgeräten seitlich zu. Auch
 dort gehört alles Wichtige in die Mitte.
 
+## Ändern, was schon da ist
+
+Bis hierher ging es ums Hinzufügen. Alles, was liegt, lässt sich auch wieder
+ansehen, ändern, verschieben oder löschen — genau wie in der Oberfläche, wo man
+ein Objekt anklickt und dann die Regler bedient.
+
+### Nachsehen, was auf dem Bild liegt
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('artikel_23');
+await B.setLogo('HERZOGENBURG');
+await B.addText('Windpark kommt');
+console.log(B.objects());
+```
+
+`objects()` liefert für jedes Element:
+
+| Feld | Bedeutung |
+|---|---|
+| `index` | die Nummer, mit der `select`, `update`, `remove`, `bringToFront` es ansprechen |
+| `type` | `text`, `image`, `circle`, `rect` |
+| `role` | `canvas` (grüne Fläche), `background` (Foto), `logo`, sonst wie `type` |
+| `text` | der Inhalt, bei Textelementen |
+| `color`, `left`, `top`, `width`, `height`, `angle`, `scale` | Zustand |
+| `editable` | `false` bei Logo, Hintergrund und Grundfläche |
+| `insideMargin` | ob das Element die Schutzzone einhält |
+
+**Verlass dich nicht auf die Reihenfolge.** Das letzte Element in der Liste ist
+das Organisationslogo, nicht das, was du zuletzt hinzugefügt hast — der
+Generator holt das Logo nach jedem Schritt nach vorne. `lastAdded()` gibt dir
+dein Element, `objects()` mit `role` sagt dir, was was ist.
+
+### Ändern statt neu bauen
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('artikel_23');
+await B.addText('Windpark kommt');
+
+await B.update({ text: 'Windpark beschlossen', color: '#FFED00', align: 'left' });
+```
+
+`update()` nimmt `text`, `color`, `align`, `lineHeight`, `shadow` und
+`fontStyle`. Ohne Angabe wirkt es auf das zuletzt hinzugefügte Element;
+mit `{ target: index }` auf ein beliebiges.
+
+Ein anderes Element sprichst du über seinen Index an:
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('artikel_23');
+await B.addText('Windpark kommt');
+
+const kopfzeile = B.objects().find(o => o.text === 'Windpark kommt');
+B.select(kopfzeile.index);
+await B.update({ color: '#FFFFFF' });
+```
+
+### Löschen und Reihenfolge
+
+```js
+const B = window.Bildgenerator;
+await B.setTemplate('artikel_23');
+await B.addText('Erster');
+await B.addShape('cross');
+
+await B.remove();                        // das zuletzt hinzugefügte
+const text = B.objects().find(o => o.type === 'text');
+await B.bringToFront(text.index);        // nach vorne holen
+```
+
+Logo und Hintergrundbild lassen sich nicht löschen — genau wie in der
+Oberfläche. Für das Logo nimm `setLogoEnabled(false)`, für den Hintergrund
+setz einfach ein anderes Bild.
+
+`bringToFront()` holt ein Element nach vorne, lässt das Logo aber oben.
+
 ## Formate
 
 | Name | Canvas | Wofür |
diff --git a/resources/js/api.js b/resources/js/api.js
index 66ea3aa..30fd5c0 100644
--- a/resources/js/api.js
+++ b/resources/js/api.js
@@ -31,7 +31,7 @@
  * breakage surfaces in e2e/api.spec.js instead of in somebody else's script.
  */
 const Bildgenerator = {
-    VERSION: 3,
+    VERSION: 6,
 
     /** The object the most recent add* call put on the canvas. */
     _lastAdded: null,
@@ -153,7 +153,9 @@ const Bildgenerator = {
      * @param {Object} [options]
      * @param {string} [options.color]      value from options().textColors
      * @param {string} [options.fontStyle]  id from options().fontStyles
-     * @param {string} [options.align]      left | center | right
+     * @param {string} [options.align]      left | center | right — how the lines
+     *                                        sit inside the text block. To move
+     *                                        the block itself, use place().
      * @param {string} [options.lineHeight] value from options().lineHeights
      * @param {number} [options.shadow]     shadow depth
      */
@@ -252,13 +254,19 @@ const Bildgenerator = {
      */
     async addQRCode(spec) {
         const opts = spec || {};
-        if (!opts.text) throw new Error("addQRCode() needs { text }");
+        const payload = opts.text || this.qrPayload(opts);
+        if (!payload) {
+            throw new Error(
+                "addQRCode() needs { text }, or a { type } of " +
+                "text | url | email | vcard with its fields"
+            );
+        }
 
         this._openSection("qr-section", "#show-qr-section");
 
         if (opts.color) jQuery("#qr-color").val(opts.color);
         await this._addTracking(function () {
-            jQuery("#qr-text").val(opts.text);
+            jQuery("#qr-text").val(payload);
             jQuery("#add-qr-code").trigger("click");
         }, "QR code to be added to the canvas");
         return this;
@@ -287,17 +295,42 @@ const Bildgenerator = {
             throw new Error("place() needs an element that was added first");
         }
 
+        const margin = this.protectiveMargin();
+        const width = target.getScaledWidth();
+        const height = target.getScaledHeight();
+
+        // Free positioning: { x, y } as fractions of the canvas, 0 = left/top
+        // edge of the usable area, 1 = right/bottom. Still clamped to the
+        // protective margin, because that is a brand rule and not a default.
+        if (position && typeof position === "object") {
+            const inRange = function (v) {
+                return v === undefined || (typeof v === "number" && v >= 0 && v <= 1);
+            };
+            if (!inRange(position.x) || !inRange(position.y)) {
+                throw new Error(
+                    "place({ x, y }) takes fractions between 0 and 1; the " +
+                    "protective margin is not optional"
+                );
+            }
+            const usableWidth = canvas.width - 2 * margin - width;
+            const usableHeight = canvas.height - 2 * margin - height;
+            target.set({
+                left: margin + Math.max(0, usableWidth) * (position.x || 0),
+                top: margin + Math.max(0, usableHeight) * (position.y || 0),
+            });
+            target.setCoords();
+            canvas.renderAll();
+            return this;
+        }
+
         const valid = this.options().positions;
         if (!valid.includes(position)) {
             throw new Error(
-                `Unknown position "${position}". Available: ${valid.join(", ")}`
+                `Unknown position "${position}". Available: ${valid.join(", ")}, ` +
+                `or { x, y } with values between 0 and 1`
             );
         }
 
-        const margin = this.protectiveMargin();
-        const width = target.getScaledWidth();
-        const height = target.getScaledHeight();
-
         // The logo is placed by the app at the bottom; keep clear of it.
         let bottomLimit = canvas.height - margin;
         const placedLogo = this._logoObject();
@@ -323,6 +356,53 @@ const Bildgenerator = {
         return this;
     },
 
+    /**
+     * Scale an element. The wizard exposes this as a slider on the selected
+     * object; there is no font-size field, so this is how text gets bigger or
+     * smaller too.
+     *
+     * A new text object is scaled to fit 80 % of the canvas width, so 1 is
+     * "as added". The UI slider allows 0.1 to 2.
+     *
+     * @param {number} factor absolute scale, not a multiplier
+     * @param {Object} [options]
+     * @param {fabric.Object} [options.target] default: the last element added
+     */
+    async resize(factor, options) {
+        const opts = options || {};
+        const target = opts.target || this.lastAdded();
+        if (!target) throw new Error("resize() needs an element that was added first");
+        if (typeof factor !== "number" || factor <= 0) {
+            throw new Error("resize() needs a positive number");
+        }
+        target.scale(factor).setCoords();
+        canvas.renderAll();
+        return this;
+    },
+
+    /**
+     * Rotate an element. The wizard offers this as the rotation handle on a
+     * selected object, and while dragging it snaps to 0, 90, 180 and 270
+     * degrees within a 2 degree tolerance. Programmatic rotation sets the
+     * angle exactly and does not snap — pass the right angle.
+     *
+     * @param {number} degrees clockwise, absolute (not relative)
+     * @param {Object} [options]
+     * @param {fabric.Object} [options.target] default: the last element added
+     */
+    async rotate(degrees, options) {
+        const opts = options || {};
+        const target = opts.target || this.lastAdded();
+        if (!target) throw new Error("rotate() needs an element that was added first");
+        if (typeof degrees !== "number" || !isFinite(degrees)) {
+            throw new Error("rotate() needs a number of degrees");
+        }
+        target.rotate(((degrees % 360) + 360) % 360);
+        target.setCoords();
+        canvas.renderAll();
+        return this;
+    },
+
     /**
      * The brand's protective margin in canvas pixels: M = 0.06 x short edge.
      * No element may fall inside it. Exposed so callers can reason about
@@ -371,6 +451,151 @@ const Bildgenerator = {
         return [row, column];
     },
 
+    // ------------------------------------------------- inspect and edit what is there
+
+    /**
+     * Everything currently on the canvas, in stacking order (last = in front).
+     *
+     * Without this a caller is blind: it can add elements but never check what
+     * it built, and it cannot address anything but the most recent element.
+     * `index` is what select(), remove(), update() and the *target* options
+     * take.
+     */
+    objects() {
+        const margin = this.protectiveMargin();
+        const logoObject = this._logoObject();
+        return canvas.getObjects().map(function (o, index) {
+            return {
+                index: index,
+                type: o.type,
+                role: o === logoObject ? "logo"
+                    : o === contentImage ? "background"
+                    : o.type === "rect" ? "canvas"
+                    : o.type,
+                text: o.type === "text" ? o.text : undefined,
+                color: o.fill,
+                left: Math.round(o.left),
+                top: Math.round(o.top),
+                width: Math.round(o.getScaledWidth()),
+                height: Math.round(o.getScaledHeight()),
+                angle: Math.round(o.angle || 0),
+                scale: Math.round((o.scaleX || 1) * 1000) / 1000,
+                insideMargin: o.left >= margin - 0.5 && o.top >= margin - 0.5,
+                editable: o !== logoObject && o !== contentImage && o.type !== "rect",
+            };
+        });
+    },
+
+    /**
+     * Make an element the active one and the target of the next edit.
+     * Accepts the index from objects(), or a fabric object.
+     */
+    select(which) {
+        const target = this._resolveTarget(which);
+        canvas.setActiveObject(target);
+        canvas.renderAll();
+        this._lastAdded = target;
+        return this;
+    },
+
+    /**
+     * Change properties of an element that is already on the canvas.
+     *
+     * The wizard does this by selecting an object and touching the colour,
+     * alignment, line-height or shadow control; the handlers write straight
+     * onto the active object. Without this a caller has to delete and rebuild
+     * an element to change its colour.
+     *
+     * @param {Object} changes  text, color, align, lineHeight, shadow, fontStyle
+     * @param {Object} [options]
+     * @param {number|Object} [options.target] index from objects(), or object
+     */
+    async update(changes, options) {
+        const opts = options || {};
+        const target = this._resolveTarget(
+            opts.target !== undefined ? opts.target : this.lastAdded()
+        );
+        const spec = changes || {};
+
+        if (spec.text !== undefined) {
+            const validation = ValidationUtils.validateTextInput(spec.text);
+            if (!validation.isValid) throw new Error(`Invalid text: ${validation.error}`);
+            target.set("text", spec.text);
+        }
+        if (spec.color !== undefined) target.set("fill", spec.color);
+        if (spec.align !== undefined) target.set("textAlign", spec.align);
+        if (spec.lineHeight !== undefined) target.set("lineHeight", parseFloat(spec.lineHeight));
+        if (spec.shadow !== undefined) target.set("shadow", createShadow("#000000", spec.shadow));
+        if (spec.fontStyle !== undefined) {
+            const option = AppConstants.FONTS.OPTIONS.find(function (o) {
+                return o.id === spec.fontStyle;
+            });
+            if (!option) {
+                throw new Error(
+                    `Unknown fontStyle "${spec.fontStyle}". ` +
+                    `Available: ${AppConstants.FONTS.OPTIONS.map((o) => o.id).join(", ")}`
+                );
+            }
+            target.set({
+                fontFamily: option.family,
+                fontWeight: option.weight,
+                fontStyle: option.style,
+            });
+        }
+
+        // Text caches its metrics, so a changed string or font needs a
+        // re-measure or the old dimensions stick.
+        if (typeof target.initDimensions === "function") {
+            target.dirty = true;
+            target.initDimensions();
+        }
+        target.setCoords();
+        canvas.renderAll();
+        return this;
+    },
+
+    /**
+     * Remove an element. The organisation logo and the background image are
+     * protected, exactly as the wizard's delete button protects them.
+     */
+    async remove(which) {
+        const target = this._resolveTarget(which !== undefined ? which : this.lastAdded());
+        if (target === this._logoObject()) {
+            throw new Error("The organisation logo cannot be removed; use setLogoEnabled(false)");
+        }
+        if (target === contentImage) {
+            throw new Error("The background image cannot be removed; set a different one");
+        }
+        canvas.remove(target);
+        if (this._lastAdded === target) this._lastAdded = null;
+        canvas.renderAll();
+        return this;
+    },
+
+    /** Move an element to the front of the stack. */
+    async bringToFront(which) {
+        const target = this._resolveTarget(which !== undefined ? which : this.lastAdded());
+        canvas.bringToFront(target);
+        // The organisation logo is meant to stay on top.
+        CanvasUtils.bringLogoToFront();
+        canvas.renderAll();
+        return this;
+    },
+
+    _resolveTarget(which) {
+        if (which && typeof which === "object") return which;
+        if (typeof which === "number") {
+            const target = canvas.getObjects()[which];
+            if (!target) {
+                throw new Error(
+                    `No element at index ${which}. See Bildgenerator.objects().`
+                );
+            }
+            return target;
+        }
+        throw new Error("Expected an index from objects(), or an element that was added first");
+    },
+
     // ----------------------------------------------------------- step 4: export
 
     /**
@@ -412,15 +637,22 @@ const Bildgenerator = {
      * @param {string}   [spec.background]  data: URL or absolute URL
      * @param {string}   [spec.logo]        from logos()
      * @param {boolean}  [spec.logoEnabled] false to leave the logo off
-     * @param {string}   [spec.text]        headline
+     * @param {string}   [spec.text]        a single headline
+     * @param {Array}    [spec.texts]       several texts, each
+     *                                      { text, color, fontStyle, align,
+     *                                        lineHeight, shadow, size, rotate,
+     *                                        position }
      * @param {string}   [spec.textColor]   from options().textColors
      * @param {string}   [spec.fontStyle]   from options().fontStyles
-     * @param {string}   [spec.align]       left | center | right
+     * @param {string}   [spec.align]       left | center | right — alignment
+     *                                      WITHIN the text block, not on the canvas
      * @param {string}   [spec.lineHeight]  from options().lineHeights
      * @param {number}   [spec.shadow]      shadow depth
+     * @param {number}   [spec.textSize]    scale, 1 = as added
+     * @param {number}   [spec.textRotate]  degrees clockwise
      * @param {string}   [spec.textPosition] from options().positions
      * @param {Array}    [spec.shapes]      names from options().shapes, or
-     *                                      { kind, position } objects
+     *                                      { kind, position, size, rotate } objects
      * @param {Array}    [spec.images]      URLs, or { url, position } objects
      * @param {Object}   [spec.qr]          { text, color, position }
      * @param {string}   [spec.format='png']
@@ -447,21 +679,39 @@ const Bildgenerator = {
         for (const shape of spec.shapes || []) {
             const kind = typeof shape === "string" ? shape : shape.kind;
             await this.addShape(kind);
+            if (typeof shape.rotate === "number") await this.rotate(shape.rotate);
+            if (typeof shape.size === "number") await this.resize(shape.size);
             if (shape.position) await this.place(shape.position);
         }
         if (spec.qr) {
             await this.addQRCode(spec.qr);
             if (spec.qr.position) await this.place(spec.qr.position);
         }
-        if (spec.text) {
-            await this.addText(spec.text, {
-                color: spec.textColor,
-                fontStyle: spec.fontStyle,
-                align: spec.align,
-                lineHeight: spec.lineHeight,
-                shadow: spec.shadow,
-            });
-            if (spec.textPosition) await this.place(spec.textPosition);
+        // One headline via `text`, or several via `texts`. Each entry carries
+        // its own colour, size and position — a second text would otherwise
+        // land centred on top of the first.
+        const texts = spec.texts
+            ? spec.texts.slice()
+            : (spec.text
+                ? [{
+                    text: spec.text,
+                    color: spec.textColor,
+                    fontStyle: spec.fontStyle,
+                    align: spec.align,
+                    lineHeight: spec.lineHeight,
+                    shadow: spec.shadow,
+                    position: spec.textPosition,
+                    size: spec.textSize,
+                    rotate: spec.textRotate,
+                }]
+                : []);
+
+        for (const entry of texts) {
+            const item = typeof entry === "string" ? { text: entry } : entry;
+            await this.addText(item.text, item);
+            if (typeof item.size === "number") await this.resize(item.size);
+            if (typeof item.rotate === "number") await this.rotate(item.rotate);
+            if (item.position) await this.place(item.position);
         }
         return this.export({
             format: spec.format,
@@ -485,10 +735,16 @@ const Bildgenerator = {
      */
     async renderQRCode(spec) {
         const opts = spec || {};
-        if (!opts.data) throw new Error("renderQRCode() needs { data }");
+        const data = opts.data || this.qrPayload(opts);
+        if (!data) {
+            throw new Error(
+                "renderQRCode() needs { data }, or a { type } of " +
+                "text | url | email | vcard with its fields"
+            );
+        }
 
         const element = await generateQRCode(
-            opts.data,
+            data,
             opts.color || "#000000",
             opts.background || "#FFFFFF"
         );
@@ -499,6 +755,33 @@ const Bildgenerator = {
         };
     },
 
+    /**
+     * Build the payload string for one of the four content types the QR wizard
+     * offers. Without this a caller has to hand-assemble mailto: query strings
+     * and vCard records — error-prone, and the formatting rules already live
+     * in the app.
+     *
+     * @param {Object} spec { type: 'text'|'url'|'email'|'vcard', ...fields }
+     * @returns {string|null}
+     */
+    qrPayload(spec) {
+        const opts = spec || {};
+        switch (opts.type) {
+            case "text":
+                return opts.text || null;
+            case "url":
+                return opts.url ? QRFormatHelpers.formatURL(opts.url) : null;
+            case "email":
+                return opts.email
+                    ? QRFormatHelpers.formatEmail(opts.email, opts.subject || "", opts.body || "")
+                    : null;
+            case "vcard":
+                return QRFormatHelpers.formatVCard(opts);
+            default:
+                return null;
+        }
+    },
+
     // ----------------------------------------------------------- housekeeping
 
     /**