Kundenportal-Bühne: Terminplaner, Heatmap und Pinnwand als Live-Demos statt „Funktionen“

Die Station „Funktionen“ ist durch drei Stationen ersetzt (Gruppe „Funktionen zum
Dazubuchen“). Auf dem MacBook läuft je eine erfundene Kunden-Website als Live-Komponente,
auf dem iPhone die Portal-Ansicht der Funktion (echter Portal-Code, Fake-Daten):

- Terminplaner (Salon Schnittstelle): Buchung im Widget, Bestätigung per Link,
  Eintrag im Kalender-Abo, Mitteilung „Neue Buchung …“ auf dem Handy
- Website-Analyse (Boulderhalle Überhang): simulierte Klicks bauen die Heatmap auf
  (Algorithmus wie analytics/client/h.js); Maus über der Seite zeigt Zone + Klickzahl,
  darunter die Diagnose mit Rangliste und Satz (Beispieldaten)
- News-Pinnwand (Ortsgemeinde Musterbach): „Aufhängen“ im Portal, Zettel fällt auf die Pinnwand

Demos laden als eigene Chunks, laufen nur bei aktiver, sichtbarer Station und ohne
reduzierte Bewegung. Unter 900 px zeigen die Karten die Website in der Handy-Fassung.
Spezifikation: docs/superpowers/specs/2026-10-04-funktionen-demos.md

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

src/components/home/demos/gemeinsam.css

@@ -0,0 +1,64 @@
+/*
+ * Gemeinsame Teile der Funktions-Demos: Zeiger und Klickwelle.
+ * Grundzustand statisch; Gleiten und Welle nur ohne prefers-reduced-motion (nur transform/opacity).
+ */
+
+.dz-zeiger {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 30;
+  pointer-events: none;
+  opacity: 1;
+}
+.dz-zeiger[data-sichtbar="nein"] {
+  opacity: 0;
+}
+.dz-pfeil {
+  display: block;
+  transform: scale(var(--dz-g, 1.6));
+  transform-origin: 0 0;
+  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
+}
+.dz-finger {
+  position: absolute;
+  left: -14px;
+  top: -14px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.55);
+  border: 2px solid rgb(0 0 0 / 0.25);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
+}
+.dz-welle {
+  position: absolute;
+  left: calc(-24px * var(--dz-g, 1.6));
+  top: calc(-24px * var(--dz-g, 1.6));
+  width: calc(48px * var(--dz-g, 1.6));
+  height: calc(48px * var(--dz-g, 1.6));
+  border-radius: 50%;
+  border: calc(3px * var(--dz-g, 1.6)) solid rgb(229 37 28 / 0.85);
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .dz-zeiger {
+    transition:
+      transform 750ms cubic-bezier(0.45, 0, 0.2, 1),
+      opacity 300ms ease;
+  }
+  .dz-welle {
+    animation: dz-welle 650ms ease-out both;
+  }
+}
+@keyframes dz-welle {
+  from {
+    opacity: 1;
+    transform: scale(0.3);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.4);
+  }
+}