Webklar/docs/superpowers/specs/2026-10-04-funktionen-demos.md

Funktions-Demos im Abschnitt Kundenportal (2026-10-04)

Auftrag des Inhabers (2026-10-04, sinngemäß): In der Handy-Sektion (Kundenportal-Bühne) die eine Station „Funktionen“ herausnehmen und stattdessen die einzelnen Funktionen zeigen, die WEBklar anbietet: Terminplaner, Website-Analyse (Heatmap) und News-Pinnwand. Je Funktion eine erfundene, interessante Kunden-Website, bei der die Funktion Sinn ergibt. Auf dem Laptop die richtige Website groß, auf dem Handy das Kundenportal (die Einrichtung/Verwaltung). Die Heatmap soll „fancy“ wirken: simulierte Klicks, die Heatmap baut sich auf; beim Hovern sieht man, wo viel geklickt wurde, darunter eine kleine Diagnose. Beim Terminplaner soll ein Kalender (Google Kalender) mit den Einträgen im Bild sein. Bei der Pinnwand eine Website wie eine Gemeinde/Stadtverwaltung – „irgendwas Interessantes“.

Dieses Dokument ergänzt 2026-10-01-relaunch-design.md (Abschnitt 7.2 Kundenportal). Wo es abweicht, gilt es.

1. Stationen der Bühne (Reihenfolge)

1. Live-Vorschau · 2. Fortschritt · 3. Chat · 4. Rechnungen (unverändert)
2. Terminplaner · 6. Website-Analyse · 7. News-Pinnwand – Gruppe „Weitere Funktionen“ (Inhaber 2026-10-04: so nennen, Unterpunkte nur in Stichpunkten)
3. Als App (unverändert, bleibt die letzte Station mit dem langen Screenshot)

Texte (Sie-Form, keine Erfolgsversprechen, keine Zahlen ohne Quelle):

Station	Titel	Stichpunkte
5	Terminplaner	Gäste buchen direkt auf Ihrer Website · Termine und Anfragen im Portal · Kalender-Abo, z. B. Google Kalender
6	Website-Analyse	Heatmap: wohin Besucher klicken · Aufrufe, Herkunft und Geräte · Im Wartungs-Abo enthalten
7	News-Pinnwand	Text und Foto, vom Handy aus · Hängt direkt auf Ihrer Website · Laufzeit je Zettel wählbar

Bedienhinweis der Heatmap (nicht in den Stichpunkten, sondern im Hinweis unter dem MacBook bzw. in der Karte): „Zeigen Sie mit der Maus auf die Seite.“ (Maus) / „Tippen Sie auf eine Stelle der Seite.“ (Touch).

Wahrheit der Aussagen (geprüft im Portal-Code und in den Spezifikationen):

• Terminplaner: Buchung im Widget, Gast bestätigt per Link in der E-Mail, Betrieb bekommt eine Mail „Neue Buchung: {Leistung} am {Datum} um {Zeit}“ (K20), Termine stehen im Portal (Reiter Termine). Kalender: Kalender-Abo je Person/Platz (geheimer .ics-Link), den man in Google Kalender, Apple Kalender oder Outlook einfügt; Google aktualisiert nur alle paar Stunden. Es gibt keinen Zwei-Wege-Sync. Kalendereinträge für den Betrieb heißen „{Leistung}: {Gastname}“.
• Website-Analyse: Heatmap der Klicks (Farbskala blau → grün → gelb → rot, wie analytics/client/h.js), Seitenaufrufe, Besucher, Herkunft, Geräte, Kontakt-Klicks; nur mit Einwilligung; im Wartungs-Abo enthalten.
• News-Pinnwand: kurze Neuigkeiten mit Text und/oder Foto, „hängen wie Zettel an einer Pinnwand auf deiner Website“.

2. Erfundene Beispiel-Kunden

Alle drei sind erfunden und werden als Beispiel gekennzeichnet (kleiner Hinweis „Erfundenes Beispiel“ an der Bühne). Adressen in der Safari-Leiste mit der reservierten Endung .example (RFC 2606), damit kein echter Betrieb gemeint sein kann. Keine Fotos von Menschen, keine Stockfotos, keine fremden Logos: Bilder sind selbst gezeichnete SVG/CSS-Grafiken. Keine Anfragen an fremde Server.

Funktion	Beispiel	Adresse	Warum
Terminplaner	Salon Schnittstelle – Friseur, drei Personen (Mia, Can, Lea)	salon-schnittstelle.example	Klassischer Fall: Leistung, Person, Zeit
Website-Analyse	Boulderhalle Überhang – Kletterhalle	boulderhalle-ueberhang.example	Viele Klickziele (Tageskarte, Live-Auslastung, Kurse, Preise, Öffnungszeiten, Routenfoto)
News-Pinnwand	Ortsgemeinde Musterbach – Gemeinde-Website	musterbach.example	Ständig Neues: Kerwe, Straßensperrung, Bücherzelle, Sprechstunde

3. Aufbau je Station

Ab 900 px (Bühne): MacBook = die Website als Live-Komponente (keine Bilddatei), gesetzt in 1512 x 893, der Rahmen verkleinert sie (bei 1440 px Fensterbreite ca. Faktor 0,41). Darum große Schrift (Fließtext mindestens 22 Designpunkte, Überschriften 64+), große Flächen, wenig Kleinkram. iPhone = Kundenportal-Ansicht der Funktion als Screenshot aus dem echten Portal-Code mit erfundenen Daten (Fixture-Server), Format wie die übrigen Handy-Bilder (804 x 1748 @2x, ausgeliefert 390/780 px webp). Darüber dürfen kleine Live-Ebenen liegen (Mitteilung, Tipp-Welle), die mit dem Ablauf der Website synchron laufen.

Unter 900 px (Wisch-Reihe): je Funktion eine Karte; im iPhone-Rahmen läuft die Website in ihrer Handy-Fassung (402 x 874, oben 59 / unten 34 frei für Statusleiste und Home-Balken). Die Heatmap-Karte reagiert auf Tippen (Zone antippen ⇒ Diagnose unter der Karte).

3.1 Terminplaner (Salon Schnittstelle)

• Website: Kopf mit Name/Navigation, große Überschrift, rechts das Buchungs-Widget im Stil des echten Widgets (kundenbereich…/build/public/embed/termine.js, termine-demo.html): Leistung wählen → Person („Egal“ möglich) → Tag und freie Zeit → Daten → „Termin buchen“ → Hinweis „Bitte bestätigen Sie den Termin über den Link in Ihrer E-Mail.“ (der Gast bestätigt per Link).
• Kalender-Fenster über der Website (rechts oben/unten, im Stil einer Kalender-App, ohne Google-Logo und ohne Google-Farben/-Schrift als Marke): Wochenansicht mit 6–9 Einträgen „{Leistung}: {Gastname}“, Kopfzeile „Kalender-Abo · Salon Schnittstelle – Mia“, kleiner Hinweis „z. B. in Google Kalender“. Nach der Buchung erscheint der neue Eintrag (weich eingeblendet).
• Ablauf (ca. 9–11 s, Schleife): Zeiger wählt Leistung → Person → Zeit → klickt „Termin buchen“ → Bestätigung → Eintrag erscheint im Kalender; auf dem iPhone gleitet eine Mitteilung herein „Neue Buchung: Damenhaarschnitt am Do., 8. Okt. um 14:30“ (Absender WEBklar Termine). Ohne Bewegung: Endzustand (gebucht, Eintrag da).
• iPhone: Portal-Ansicht Terminplaner, Reiter „Termine“ (Liste der Woche mit Status, ein Eintrag „angefragt“).

3.2 Website-Analyse (Boulderhalle Überhang)

• Website: Navigation (Routen, Kurse, Preise, Öffnungszeiten), Held „Heute 14 neue Boulder“ mit großem Knopf „Tageskarte kaufen“, Kachel Live-Auslastung (z. B. 42 %), Karten Schnupperkurs / Preise / Öffnungszeiten, ein großes Routenbild (SVG-Wand mit bunten Griffen) – das ist kein Link, wird aber oft angeklickt („toter Klick“), Telefonnummer im Kopf. 8–10 Zonen mit data-zone.
• Heatmap: Leinwand über der Website, Zeichnung mit heat.ts (gleicher Algorithmus wie das echte Overlay). Klickpunkte sind Beispieldaten aus einer festen Saat (zufall), je Zone ein Gewicht; Summe z. B. 1.284 Klicks.
• Ablauf (Schleife): Zeiger fliegt Zonen an, Klickwelle, die Heatmap wird mit jedem Klick dichter (je Klick ein Schub Punkte), nach ca. 10 s ist sie voll, bleibt ca. 6 s stehen, blendet aus, neu. Ohne Bewegung: volle Heatmap.
• Hover (nur Maus): Sobald die Maus über der Website ist, stoppt der simulierte Zeiger, die Heatmap ist voll sichtbar; die Zone unter der Maus bekommt einen Rahmen und ein Schildchen „Tageskarte kaufen · 402 Klicks“. Diagnose darunter (unter dem MacBook, links neben dem iPhone, normaler Seitenmaßstab, Seitenfarben hell/dunkel): Kopf „Diagnose · letzte 30 Tage · Beispieldaten“, Rangliste der 4 meistgeklickten Zonen mit Balken und Prozent, dazu ein Satz zur gewählten Zone (ohne Hover: zur meistgeklickten). Beispiel-Sätze: „Am meisten geklickt: ‚Tageskarte kaufen‘ – 31 % aller Klicks.“ / „Auffällig: 12 % klicken auf das Routenbild. Es ist kein Link – hier lohnt sich ein Link zur Routenliste.“ Keine Erfolgsversprechen („mehr Umsatz“ o. Ä. verboten).
• Tastatur/Screenreader: die Ranglisten-Zeilen sind Knöpfe; Fokus/Klick wählt die Zone (Rahmen auf der Website). Die Website selbst ist aria-hidden und enthält keine fokussierbaren Elemente.
• Handy-Karte: die Website in Handy-Fassung mit Heatmap; Tippen auf eine Zone zeigt die Diagnose unter der Karte.
• iPhone (Bühne): Portal-Ansicht Analyse (Kennzahlen + Diagramm).

3.3 News-Pinnwand (Ortsgemeinde Musterbach)

• Website: Kopf mit erfundenem, schlichtem Wappen (SVG), Navigation (Rathaus, Leben in Musterbach, Veranstaltungen, Pinnwand), Bereich „Neues aus Musterbach“ als Pinnwand (Kork o. ä. per CSS) mit 4–5 leicht gedrehten Zetteln im Stil der echten News-Pinnwand (…/public/embed/news.js, news-demo.html): „Kerwe 2026: Freitag bis Montag auf dem Dorfplatz“, „Hauptstraße ab 13.10. halbseitig gesperrt (Kanalbau)“, „Neue Bücherzelle am Spielplatz“, „Sprechstunde des Ortsbürgermeisters: donnerstags 17–19 Uhr“ usw. Mindestens ein Zettel mit „Foto“ (gezeichnete Grafik, z. B. Kerwe-Karussell oder Bücherzelle).
• Ablauf (Schleife): auf dem iPhone (Portal-Screenshot „News-Pinnwand“ mit dem neuen Zettel) tippt eine Tipp-Welle auf „Veröffentlichen“ (Koordinaten aus der Aufnahme), kurz danach fällt der neue Zettel mit Nadel auf die Pinnwand der Website (transform/opacity), Plakette „Neu“. Ohne Bewegung: Zettel hängt schon.
• iPhone: Portal-Ansicht News-Pinnwand (Musterbach-Daten).

4. Technik

• Ordner src/components/home/demos/: gemeinsam.tsx/.css (Taktgeber useAblauf, useDemoLauf, useBewegungErlaubt, useFeinerZeiger, useImBild, DemoZeiger, zufall, zahl), heat.ts (Heatmap-Zeichnung wie h.js). Je Demo ein Unterordner termin/, heatmap/, pinnwand/.
• Schnittstelle je Demo (eine Quelle der Wahrheit für Website und Handy-Ebene):
  • use<Name>Ablauf(laeuft: boolean, statisch: boolean) liefert den Zustand (Phase usw.).
  • <Name>Seite ({ zustand, variante: "desktop" | "handy" }) = die Website auf der Fläche.
  • optional <Name>Handy ({ zustand }) = Live-Ebene über dem Portal-Screenshot im iPhone.
  • Heatmap zusätzlich HeatmapDiagnose ({ zustand }) und Auswahl/Hover im Zustand.
• laeuft = Station aktiv und Bühne/Karte im Bild und Tab sichtbar und Bewegung erlaubt. Nichts läuft im Hintergrund (Lehre aus dem Leistungs-Audit 2026-09-25).
• Bewegung nur transform/opacity hinter prefers-reduced-motion: no-preference; Ausnahme (Auftrag des Inhabers, ergänzt 8.4): das Neuzeichnen der Heatmap-Leinwand (nur bei Klicks, nicht je Frame).
• Hover-Effekte nur bei (hover: hover) and (pointer: fine).
• Die Demos werden erst geladen, wenn die Bühne die Station fast erreicht (wie die Bilder, eingehaengt), möglichst als eigener Chunk (React.lazy), damit die Startseite nicht schwerer wird.
• Inaktive Ebenen der Bühne bekommen pointer-events: none, damit nur die sichtbare Website auf die Maus reagiert.
• Tests: Vitest je Demo (Rendern Desktop/Handy, statischer Endzustand ohne Bewegung, Diagnose-Logik, keine fokussierbaren Elemente in der Website); relaunch-kundenportal.test.tsx auf 8 Stationen angepasst. sofort-paket.test.tsx (Scans gegen verbotene Aussagen) bleibt grün.

5. Offen für den Inhaber

• Terminplaner ist erst im Pilotbetrieb (TP2 „Verkauf“ noch nicht live). Vor dem Livegang des Relaunchs: entweder TP2 live oder die Station kennzeichnen („bald buchbar“).
• Namen der Beispiel-Kunden und ihre Texte sind Vorschläge.