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/steuerung.tsx

@@ -0,0 +1,46 @@
+import { memo, useEffect } from "react";
+import { useTerminAblauf, type TerminZustand } from "./termin/ablauf";
+import { useHeatmapAblauf, type HeatmapZustand } from "./heatmap/ablauf";
+import { usePinnwandAblauf, type PinnwandZustand } from "./pinnwand/ablauf";
+
+/**
+ * Taktgeber der drei Funktions-Demos als unsichtbare Bauteile (rendern nichts, melden nur ihren Zustand).
+ * Sie liegen in einem eigenen Chunk, damit die Startseite die Ablauf-Logik erst lädt, wenn die Kundenportal-Bühne
+ * eine Demo-Station fast erreicht (Spezifikation 4). Die Bühne hält den gemeldeten Zustand und gibt denselben
+ * Zustand an Website, Handy-Ebene und Diagnose.
+ * `laeuft` und `statisch` kommen von useDemoLauf (Station aktiv, im Bild, Tab sichtbar, Bewegung erlaubt).
+ * Die Bauteile sind memoisiert: sie rechnen nur neu, wenn sich ihr eigener Ablauf bewegt, nicht bei jedem Rendern der Bühne.
+ */
+
+type Props<Z> = { laeuft: boolean; statisch: boolean; onZustand: (zustand: Z) => void };
+
+export const TerminSteuerung = memo(function TerminSteuerung({ laeuft, statisch, onZustand }: Props<TerminZustand>) {
+  const zustand = useTerminAblauf(laeuft, statisch);
+  useEffect(() => onZustand(zustand), [zustand, onZustand]);
+  return null;
+});
+
+export const PinnwandSteuerung = memo(function PinnwandSteuerung({ laeuft, statisch, onZustand }: Props<PinnwandZustand>) {
+  const zustand = usePinnwandAblauf(laeuft, statisch);
+  useEffect(() => onZustand(zustand), [zustand, onZustand]);
+  return null;
+});
+
+/** `aktiv`: Station ist die aktive; sonst bleiben weder Maus-Zustand noch Auswahl der Heatmap hängen. */
+export const HeatmapSteuerung = memo(function HeatmapSteuerung({
+  laeuft,
+  statisch,
+  aktiv,
+  onZustand,
+}: Props<HeatmapZustand> & { aktiv: boolean }) {
+  const zustand = useHeatmapAblauf(laeuft, statisch);
+  const { setzeMaus, waehle } = zustand;
+  useEffect(() => {
+    if (!aktiv) {
+      setzeMaus(false);
+      waehle(null);
+    }
+  }, [aktiv, setzeMaus, waehle]);
+  useEffect(() => onZustand(zustand), [zustand, onZustand]);
+  return null;
+});