Heatmap in Geraeterahmen (Computer/Tablet + Handy) und Keks statt "Datenschutz-Einstellungen"

Heatmap im Portal (Funktionen -> Analyse): die echte Website laeuft jetzt in realistischen
Geraeterahmen, gross MacBook oder iPad (Umschalter oben), daneben das iPhone, jeweils in echter
Breite (1512 / 820 / 402 px), verkleinert und im Geraet scrollbar, mit den Klicks der
passenden Geraeteklasse als Overlay. MacBook und iPhone stammen aus den Rahmen der neuen
Website (device-mockups), das iPad ist im gleichen Stil nachgebaut (public/geraete.css/.js).

- heatmap-link: embed: true haengt __wk_embed=1 an; w.js reicht das als data-embed an h.js.
- h.js eingebettet (nur in einem Rahmen): keine Leiste, Links und Formulare gesperrt (kein
  Seitenwechsel, also keine Zaehlung und kein Banner), Scrollleisten aus, Klickzahl per
  postMessage nur an die Herkunft von h.js (project.webklar.com).
- iframe mit Sandbox allow-scripts allow-same-origin (keine Formulare, Pop-ups, keine
  Navigation des Portals); Laden erst, wenn die Heatmap in Sicht kommt. Laesst sich eine
  Website nicht einbetten, kommt nach 20 s ein Hinweis mit "In neuem Tab oeffnen" (alter Weg).

Banner-Skript: der Einstellungsknopf nach der Wahl ist jetzt ein angeknabberter Keks unten
rechts (Inline-SVG, 44 px). Er dreht sich langsam, haelt beim Darueberfahren/Fokus an und
zeigt dann "Datenschutz-Einstellungen" (auch sein Name fuer Screenreader, passend zum
Bannertext); bei reduzierter Bewegung dreht er sich nicht.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

analytics/test/client.test.js

@@ -168,6 +168,7 @@ function fire(node, type, ev) { for (const f of [...(node.listeners[type] || [])
 function walk(n, fn) { fn(n); for (const c of n.children || []) walk(c, fn); if (n.shadow) walk(n.shadow, fn); }
 function findAll(root, pred) { const out = []; walk(root, (n) => { if (pred(n)) out.push(n); }); return out; }
 const btn = (root, label) => findAll(root, (n) => n.tagName === 'BUTTON' && n.textContent === label)[0];
+const settingsBtn = (h) => findAll(h.body, (n) => n.tagName === 'BUTTON' && n.attrs['aria-label'] === SETTINGS_LABEL)[0];
 
 function harness({ gpc, dnt, stored, search = '', src = 'https://project.webklar.com/a/w.js', withConsentLink = false, bannerHeight = 0, bodyPad } = {}) {
   const sent = []; const reads = { referrer: 0, innerWidth: 0 }; const beacon = []; const fetches = []; const store = {}; let now = 1_700_000_000_000;
@@ -183,6 +184,7 @@ function harness({ gpc, dnt, stored, search = '', src = 'https://project.webklar
     currentScript: script, get referrer() { reads.referrer++; return 'https://www.google.com/'; }, visibilityState: 'visible',
     documentElement: Object.assign(html, { scrollWidth: 1000, scrollHeight: 2000 }), body, head: makeEl('head'),
     createElement(t) { const e = makeEl(t); if (bannerHeight) e.offsetHeight = bannerHeight; return e; }, activeElement: null,
+    createElementNS(ns, t) { const e = makeEl(t); e.ns = ns; return e; },
     querySelector(s) { return s === '[data-webklar-consent]' ? link : null; },
     addEventListener(t, f) { (docL[t] ||= []).push(f); },
     removeEventListener(t, f) { docL[t] = (docL[t] || []).filter((x) => x !== f); },
@@ -303,7 +305,7 @@ test('w.js: Annehmen => bn accept, Speicher, ck/ct/en; Widerruf stoppt sofort',
   assert.equal(en[0].d.scroll, 55); // (300+800)/2000
   assert.equal(typeof en[0].d.sec, 'number');
   // Widerruf ueber Einstellungs-Link
-  const settings = findAll(h.body, (x) => x.tagName === 'BUTTON' && x.textContent === SETTINGS_LABEL)[0];
+  const settings = settingsBtn(h);
   assert.ok(settings, 'fester Link');
   settings.click();
   assert.ok(btn(hostEl(h).shadow, 'Ablehnen').focused, 'Fokus beim Wiederoeffnen');
@@ -355,7 +357,7 @@ test('w.js: gespeichertes Ablehnen => nichts senden, nur Einstellungsknopf; spae
   assert.equal(h.winL.popstate, undefined);
   assert.equal(h.history.pushState, h.origPush);
   assert.equal(h.body.children.length, 1);
-  const open = findAll(h.body, (x) => x.tagName === 'BUTTON' && x.textContent === SETTINGS_LABEL)[0];
+  const open = settingsBtn(h);
   assert.ok(open);
   open.click();
   assert.equal(h.sent.length, 0);
@@ -411,9 +413,9 @@ test('w.js: Annehmen auf laufender Seite => bn:accept, genau ein cx mit ref+vp;
   assert.deepEqual(h.types(), ['pv', 'bn:shown', 'bn:accept', 'cx']);
   assert.deepEqual(h.sent.at(-1).d, { t: 'cx', site: SITE, path: '/start', ref: refHost('https://www.google.com/', 'mein.de'), vp: 'd' });
   // Widerruf, erneut annehmen
-  findAll(h.body, (x) => x.textContent === SETTINGS_LABEL)[0].click();
+  settingsBtn(h).click();
   btn(hostEl(h).shadow, 'Ablehnen').click();
-  findAll(h.body, (x) => x.textContent === SETTINGS_LABEL)[0].click();
+  settingsBtn(h).click();
   btn(hostEl(h).shadow, 'Annehmen').click();
   assert.equal(h.sent.filter((s) => s.d.t === 'cx').length, 1);
 });
@@ -443,15 +445,41 @@ test('w.js: T19 Platz unten solange Banner offen; Knopf mindestens 24px', () =>
   assert.equal(h.body.style.paddingBottom, '5px');
   const g = harness({ stored: { v: 1, a: 'reject', bv: BV, t: 1_700_000_000_000 } });
   const css = findAll(g.body, (n) => n.tagName === 'STYLE').map((n) => n.textContent).join('');
-  assert.match(css, /min-width:24px/);
-  assert.match(css, /min-height:32px/);
-  assert.match(css, /padding:8px 12px/);
-  assert.match(css, /font-size:13px/);
+  assert.match(css, /width:44px;height:44px/);
+});
+
+test('w.js: Einstellungsknopf ist ein angeknabberter Keks, der sich dreht (ohne Drehung bei reduzierter Bewegung)', () => {
+  const h = harness({ stored: { v: 1, a: 'reject', bv: BV, t: 1_700_000_000_000 } });
+  const b = settingsBtn(h);
+  assert.ok(b, 'Knopf da');
+  assert.equal(b.attrs.type, 'button');
+  assert.equal(b.textContent, '', 'kein sichtbarer Text im Knopf selbst');
+  // Etikett "Datenschutz-Einstellungen" erscheint beim Darueberfahren, fuer Screenreader zaehlt aria-label
+  const label = findAll(b, (n) => n.textContent === SETTINGS_LABEL)[0];
+  assert.ok(label);
+  assert.equal(label.attrs['aria-hidden'], 'true');
+  // Keks als Inline-SVG (keine data:-Grafik, die eine CSP der Website blockieren koennte)
+  const svg = findAll(b, (n) => n.tagName === 'SVG')[0];
+  assert.ok(svg);
+  assert.equal(svg.ns, 'http://www.w3.org/2000/svg');
+  assert.equal(svg.attrs['aria-hidden'], 'true');
+  const paths = findAll(svg, (n) => n.tagName === 'PATH');
+  assert.ok(paths.length >= 1, 'Umriss mit Bissspur');
+  assert.match(paths[0].attrs.d, /A/, 'Bogen fuer den Biss');
+  assert.ok(findAll(svg, (n) => n.tagName === 'ELLIPSE' || n.tagName === 'CIRCLE').length >= 5, 'Schokostueckchen');
+  const css = findAll(h.body, (n) => n.tagName === 'STYLE').map((n) => n.textContent).join('');
+  assert.match(css, /@keyframes wk-spin\{to\{transform:rotate\(360deg\)\}\}/);
+  assert.match(css, /animation:wk-spin \d+s linear infinite/);
+  assert.match(css, /@media \(prefers-reduced-motion:reduce\)\{[^}]*animation:none/);
+  assert.match(css, /:hover \.c,[^{]*:focus-visible \.c\{animation-play-state:paused\}/);
+  assert.ok(!/url\(/.test(css), 'keine externen oder data:-Grafiken');
+  b.click();
+  assert.ok(hostEl(h), 'Klick oeffnet das Banner');
 });
 
 test('w.js: [data-webklar-consent] oeffnet Banner, kein fester Link', () => {
   const h = harness({ stored: { v: 1, a: 'reject', bv: BV, t: 1_700_000_000_000 }, withConsentLink: true });
-  assert.equal(findAll(h.body, (x) => x.textContent === SETTINGS_LABEL).length, 0);
+  assert.equal(settingsBtn(h), undefined);
   assert.equal(hostEl(h), undefined);
   h.link.click();
   assert.ok(hostEl(h));
@@ -465,9 +493,22 @@ test('w.js: Heatmap-Modus sendet nichts, entfernt Parameter, laedt h.js', () =>
   assert.equal(h.injected.length, 1);
   assert.equal(h.injected[0].attrs.src, 'https://project.webklar.com/a/h.js');
   assert.equal(h.injected[0].attrs['data-token'], 'TOKEN.sig');
+  assert.equal(h.injected[0].attrs['data-embed'], undefined);
   assert.equal((h.docL.click || []).length, 0);
 });
 
+test('w.js: Heatmap-Modus mit __wk_embed=1 entfernt beide Parameter und reicht data-embed an h.js', () => {
+  const h = harness({ search: '?__wk_heat=TOKEN.sig&__wk_embed=1&b=2' });
+  assert.deepEqual(h.sent, []);
+  assert.equal(h.history.replaced, '/start?b=2');
+  assert.equal(h.injected.length, 1);
+  assert.equal(h.injected[0].attrs['data-embed'], '1');
+  assert.equal(h.injected[0].attrs['data-token'], 'TOKEN.sig');
+  // __wk_embed ohne Heatmap-Token: normaler Betrieb (Banner, pv)
+  const n = harness({ search: '?__wk_embed=1' });
+  assert.deepEqual(n.types(), ['pv', 'bn:shown']);
+});
+
 test('w.js: SPA-Navigation sendet pv nur bei Pfadwechsel', () => {
   const h = harness();
   h.nav('/start');

analytics/test/heatclient.test.js

@@ -0,0 +1,129 @@
+// Verhalten von dist/h.js (Heatmap-Overlay) im Fake-DOM: eigenes Fenster und Einbettung im Portal.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import vm from 'node:vm';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const H = readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'client', 'dist', 'h.js'), 'utf8');
+
+function makeEl(tag) {
+  const e = {
+    tagName: String(tag).toUpperCase(), nodeType: 1, attrs: {}, children: [], listeners: {}, style: { setProperty() {} }, parentNode: null,
+    textContent: '', removed: false,
+    setAttribute(n, v) { this.attrs[n] = String(v); },
+    getAttribute(n) { return n in this.attrs ? this.attrs[n] : null; },
+    appendChild(c) { c.parentNode = this; this.children.push(c); return c; },
+    addEventListener(t, f, o) { (this.listeners[t] ||= []).push({ f, o }); },
+    removeEventListener(t, f) { this.listeners[t] = (this.listeners[t] || []).filter((x) => x.f !== f); },
+    remove() { this.removed = true; },
+    attachShadow() { const r = makeEl('shadow'); this.shadow = r; return r; },
+    closest(sel) {
+      const tags = sel.split(',').map((t) => t.trim().toUpperCase());
+      for (let n = this; n && n.tagName; n = n.parentNode) if (tags.includes(n.tagName)) return n;
+      return null;
+    },
+    getContext() {
+      return {
+        createLinearGradient: () => ({ addColorStop() {} }),
+        createRadialGradient: () => ({ addColorStop() {} }),
+        fillRect() {}, clearRect() {},
+        getImageData: (x, y, w, hh) => ({ data: new Uint8ClampedArray(Math.max(4, w * hh * 4)) }),
+        putImageData() {},
+      };
+    },
+  };
+  return e;
+}
+
+async function harness({ embed = false, framed = true, fail = false, points = [{ x: 0.5, y: 0.5 }, { x: 0.1, y: 0.2 }, { x: 2, y: 0 }] } = {}) {
+  const body = makeEl('body'); const head = makeEl('head'); const html = makeEl('html');
+  Object.assign(html, { scrollWidth: 402, scrollHeight: 2000, clientWidth: 402, clientHeight: 800 });
+  const script = makeEl('script');
+  script.setAttribute('src', 'https://project.webklar.com/a/h.js');
+  script.setAttribute('data-token', 'TOK.sig');
+  if (embed) script.setAttribute('data-embed', '1');
+  script.src = 'https://project.webklar.com/a/h.js';
+  const fetches = []; const posted = []; const winL = {};
+  const document = {
+    currentScript: script, documentElement: html, body, head,
+    createElement: (t) => makeEl(t),
+  };
+  const win = {
+    document,
+    addEventListener(t, f, o) { (winL[t] ||= []).push({ f, o }); },
+    removeEventListener(t, f) { winL[t] = (winL[t] || []).filter((x) => x.f !== f); },
+  };
+  const parent = framed ? { postMessage(data, origin) { posted.push({ data, origin }); } } : win;
+  win.parent = parent;
+  const sandbox = {
+    window: win, document, URL, JSON, Math, String, Number, Array, Object, RegExp, Error, Uint8ClampedArray, Promise,
+    setInterval: () => 1, clearInterval() {},
+    fetch: (u, o) => {
+      fetches.push({ u, o });
+      if (fail) return Promise.resolve({ ok: false, json: () => Promise.resolve({}) });
+      return Promise.resolve({ ok: true, json: () => Promise.resolve({ points }) });
+    },
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(H, sandbox);
+  await new Promise((r) => setTimeout(r, 10));
+  const fire = (type, target) => {
+    const ev = { type, target, prevented: false, stopped: false, preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; } };
+    for (const { f } of winL[type] || []) f(ev);
+    return ev;
+  };
+  const shadowHosts = body.children.filter((c) => c.shadow);
+  return { body, head, fetches, posted, winL, fire, shadowHosts };
+}
+
+const linkIn = () => { const a = makeEl('a'); a.setAttribute('href', '/kontakt'); const span = makeEl('span'); span.parentNode = a; return span; };
+
+test('h.js eigenes Fenster: schwarze Leiste mit Klickzahl, keine Nachricht, Links bleiben klickbar', async () => {
+  const h = await harness();
+  assert.equal(h.fetches.length, 1);
+  assert.equal(h.fetches[0].u, 'https://project.webklar.com/a/heat?token=TOK.sig');
+  assert.equal(h.fetches[0].o.credentials, 'omit');
+  assert.equal(h.shadowHosts.length, 1, 'Leiste');
+  const msg = h.shadowHosts[0].shadow.children.find((c) => c.className === 'bar').children[0];
+  assert.equal(msg.textContent, 'Heatmap – 2 Klicks (letzte 30 Tage)');
+  assert.deepEqual(h.posted, []);
+  assert.equal(h.fire('click', linkIn()).prevented, false);
+});
+
+test('h.js eingebettet: keine Leiste, meldet Klickzahl nur an project.webklar.com', async () => {
+  const h = await harness({ embed: true });
+  assert.equal(h.shadowHosts.length, 0, 'keine Leiste');
+  assert.ok(h.body.children.some((c) => c.tagName === 'CANVAS'), 'Overlay da');
+  assert.deepEqual(JSON.parse(JSON.stringify(h.posted)), [{ data: { wk: 'heat', state: 'ready', count: 2 }, origin: 'https://project.webklar.com' }]);
+  // Scrollleisten ausgeblendet (Handy/Tablet haben ueberlagernde Leisten)
+  assert.ok(h.head.children.some((c) => c.tagName === 'STYLE' && /scrollbar-width:none/.test(c.textContent)));
+});
+
+test('h.js eingebettet: Links und Formulare gesperrt, andere Klicks nicht', async () => {
+  const h = await harness({ embed: true });
+  assert.ok((h.winL.click || []).some((l) => l.o === true), 'Klick-Sperre in der Capture-Phase');
+  const ev = h.fire('click', linkIn());
+  assert.equal(ev.prevented, true);
+  assert.equal(ev.stopped, true, 'Router der Seite bekommt den Klick nicht');
+  const area = h.fire('click', makeEl('area'));
+  assert.equal(area.prevented, true);
+  const other = h.fire('click', makeEl('button'));
+  assert.equal(other.prevented, false);
+  const sub = h.fire('submit', makeEl('form'));
+  assert.equal(sub.prevented, true);
+});
+
+test('h.js eingebettet: Fehler beim Laden => state error', async () => {
+  const h = await harness({ embed: true, fail: true });
+  assert.deepEqual(JSON.parse(JSON.stringify(h.posted)), [{ data: { wk: 'heat', state: 'error', count: 0 }, origin: 'https://project.webklar.com' }]);
+});
+
+test('h.js mit data-embed, aber nicht in einem Rahmen: verhaelt sich wie das eigene Fenster', async () => {
+  const h = await harness({ embed: true, framed: false });
+  assert.equal(h.shadowHosts.length, 1);
+  assert.deepEqual(h.posted, []);
+  assert.equal(h.fire('click', linkIn()).prevented, false);
+});