Wisch-Reihe: Funktions-Karten nur mit Titel, Stichpunkte entfernt

Wunsch des Inhabers: auch auf dem Handy zeigen Terminplaner, Website-Analyse und
News-Pinnwand nur ihren Titel. Stichpunkte samt Daten und Styles entfernt; der Hinweis
„Erfundenes Beispiel“ und der Tipp-Hinweis der Heatmap bleiben.

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

src/components/home/Kundenportal.tsx

@@ -55,10 +55,8 @@ type DemoArt = "termin" | "heatmap" | "pinnwand";
 type Funktion = {
   id: string;
   titel: string;
-  /** Ein Satz unter dem Titel (Portal-Stationen); die Funktionen haben stattdessen Stichpunkte. */
+  /** Ein Satz unter dem Titel; die drei Funktionen zeigen nur ihren Titel (Wunsch des Inhabers 2026-10-04). */
   unterschrift?: string;
-  /** Stichpunkte unter dem Titel (die drei Funktionen, Wunsch des Inhabers 2026-10-04). */
-  stichpunkte?: string[];
   /** Bedienhinweis zur Live-Demo, je nachdem, ob es eine Maus gibt (nur Website-Analyse). */
   bedienhinweis?: { maus: string; tippen: string };
   /** Desktop-Bild; Demo-Stationen zeigen stattdessen die Website, "Als App" hat keines (dort blendet das Fenster aus). */
@@ -119,7 +117,6 @@ const FUNKTIONEN: Funktion[] = [
   {
     id: "terminplaner",
     titel: "Terminplaner",
-    stichpunkte: ["Gäste buchen direkt auf Ihrer Website", "Termine und Anfragen im Portal", "Kalender-Abo, z. B. Google Kalender"],
     demo: "termin",
     adresse: "salon-schnittstelle.example",
     beschreibung:
@@ -134,7 +131,6 @@ const FUNKTIONEN: Funktion[] = [
   {
     id: "website-analyse",
     titel: "Website-Analyse",
-    stichpunkte: ["Heatmap: wohin Besucher klicken", "Aufrufe, Herkunft und Geräte", "Im Wartungs-Abo enthalten"],
     bedienhinweis: { maus: "Zeigen Sie mit der Maus auf die Seite.", tippen: "Tippen Sie auf eine Stelle der Seite." },
     demo: "heatmap",
     adresse: "boulderhalle-ueberhang.example",
@@ -148,7 +144,6 @@ const FUNKTIONEN: Funktion[] = [
   {
     id: "news-pinnwand",
     titel: "News-Pinnwand",
-    stichpunkte: ["Text und Foto, vom Handy aus", "Hängt direkt auf Ihrer Website", "Laufzeit je Zettel wählbar"],
     demo: "pinnwand",
     adresse: "musterbach.example",
     beschreibung: "Beispiel-Website einer Ortsgemeinde mit einer Pinnwand, an der ein neuer Zettel aufgehängt wird",
@@ -220,35 +215,9 @@ const INERT = (parseInt(version, 10) >= 19 ? { inert: true } : { inert: "" }) as
 
 const beispielText = (f: Funktion) => `Erfundenes Beispiel · ${f.adresse}`;
 
-/**
+/** Satz unter dem Titel einer Karte der Wisch-Reihe; die drei Funktionen haben keinen (nur der Titel). */
- * Unterschrift einer Station: ein Satz oder Stichpunkte. In der Liste steckt sie in einem <button> (nur Phrasing-Inhalt
- * erlaubt), darum sind die Stichpunkte dort Blöcke aus <span>; das versteckte Komma trennt sie für Screenreader.
- */
-const Unterschrift = ({ f }: { f: Funktion }) =>
-  f.stichpunkte ? (
-    <>
-      {f.stichpunkte.map((p, i) => (
-        <span key={p} className="kp-stichpunkt">
-          {p}
-          {i < f.stichpunkte!.length - 1 ? <span className="sr-only">, </span> : null}
-        </span>
-      ))}
-    </>
-  ) : (
-    <>{f.unterschrift}</>
-  );
-
-/** Unterschrift in den Karten der Wisch-Reihe (außerhalb eines Knopfs): Satz oder echte Liste. */
 const KartenUnterschrift = ({ f }: { f: Funktion }) =>
-  f.stichpunkte ? (
+  f.unterschrift ? <p className="wk-muted kp-karte__text">{f.unterschrift}</p> : null;
-    <ul className="wk-muted kp-karte__punkte">
-      {f.stichpunkte.map((p) => (
-        <li key={p}>{p}</li>
-      ))}
-    </ul>
-  ) : (
-    <p className="wk-muted kp-karte__text">{f.unterschrift}</p>
-  );
 
 const SCHRITTE = [
   { nr: 1, text: "Kennenlernen" },
@@ -438,9 +407,7 @@ const Buehne = () => {
                     >
                       <span className="kp-eintrag__punkt" aria-hidden="true" />
                       <span className="kp-eintrag__titel">{f.titel}</span>
-                      <span className="kp-eintrag__text">
+                      <span className="kp-eintrag__text">{f.unterschrift}</span>
-                        <Unterschrift f={f} />
-                      </span>
                     </button>
                   </li>
                 );

src/components/home/kundenportal.css

@@ -114,22 +114,6 @@
 .kp-eintrag[aria-current="step"] .kp-eintrag__titel {
   color: var(--fg);
 }
-/* Stichpunkte der drei Funktionen: je Punkt eine Zeile mit kleinem runden Punkt davor */
-.kp-stichpunkt {
-  position: relative;
-  display: block;
-  padding-left: 0.95em;
-}
-.kp-stichpunkt::before {
-  content: "";
-  position: absolute;
-  left: 0.15em;
-  top: calc(0.7em - 2px);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: currentColor;
-}
 /* kleiner roter Punkt als Marker der aktiven Funktion (hängt im Rand links vom Text) */
 .kp-eintrag__punkt {
   position: absolute;
@@ -445,31 +429,6 @@
 .kp-karte__text {
   max-width: 26ch;
 }
-/* Stichpunkte in den Karten: linksbündige Liste, als Block in der Kartenmitte */
-.kp-karte__punkte {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-align: left;
-}
-.kp-karte__punkte li {
-  position: relative;
-  padding-left: 0.95em;
-}
-.kp-karte__punkte li::before {
-  content: "";
-  position: absolute;
-  left: 0.15em;
-  top: calc(0.7em - 2px);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: currentColor;
-}
 .kp-karte__bedienen {
   margin: 0.35rem 0 0;
   font-size: var(--fs-small);

src/test/relaunch-kundenportal.test.tsx

@@ -11,15 +11,15 @@ const WURZEL = `${process.cwd()}/`;
 const BILDORDNER = join(WURZEL, "public/relaunch/portal");
 
 const TITEL = ["Live-Vorschau", "Fortschritt", "Chat", "Rechnungen", "Terminplaner", "Website-Analyse", "News-Pinnwand", "Als App"];
-/** Ein Satz je Portal-Station, Stichpunkte bei den drei Funktionen (Wunsch des Inhabers 2026-10-04). */
+/** Ein Satz je Portal-Station; die drei Funktionen zeigen nur ihren Titel (Wunsch des Inhabers 2026-10-04). */
-const UNTERSCHRIFTEN: (string | string[])[] = [
+const UNTERSCHRIFTEN: (string | null)[] = [
   "Ihre Website, noch während wir daran bauen.",
   "Was wir zuletzt erledigt haben – in einfachen Sätzen.",
   "Frage, Foto oder Sprachnachricht direkt ans Team.",
   "Ansehen, bezahlen, herunterladen.",
-  ["Gäste buchen direkt auf Ihrer Website", "Termine und Anfragen im Portal", "Kalender-Abo, z. B. Google Kalender"],
+  null,
-  ["Heatmap: wohin Besucher klicken", "Aufrufe, Herkunft und Geräte", "Im Wartungs-Abo enthalten"],
+  null,
-  ["Text und Foto, vom Handy aus", "Hängt direkt auf Ihrer Website", "Laufzeit je Zettel wählbar"],
+  null,
   "Aufs Handy installieren, fertig.",
 ];
 const SCHRITTE = [
@@ -91,10 +91,11 @@ describe("Kundenportal: Text und Reihenfolge", () => {
   it("Handy: die acht Funktionen stehen in der richtigen Reihenfolge mit ihren Unterschriften", () => {
     zeigeHandy();
     expect(screen.getAllByRole("heading", { level: 3 }).map((h) => h.textContent)).toEqual(TITEL);
-    for (const text of UNTERSCHRIFTEN.flat()) expect(screen.getByText(text)).toBeInTheDocument();
+    for (const text of UNTERSCHRIFTEN) if (text) expect(screen.getByText(text)).toBeInTheDocument();
-    // Stichpunkte stehen in den Karten als echte Liste
+    // die drei Funktions-Karten: nur der Titel, kein Satz und keine Stichpunkte
-    for (const punkte of UNTERSCHRIFTEN.filter(Array.isArray)) {
+    for (const titel of ["Terminplaner", "Website-Analyse", "News-Pinnwand"]) {
-      expect(screen.getByText(punkte[0]).closest("ul")).toHaveClass("kp-karte__punkte");
+      const karte = screen.getByRole("heading", { level: 3, name: titel }).closest(".kp-karte")!;
+      expect(karte.querySelector(".kp-karte__text, ul")).toBeNull();
     }
     // in der Wisch-Reihe gibt es keine Maus: der Bedienhinweis der Analyse sagt "Tippen"
     expect(screen.getByText("Tippen Sie auf eine Stelle der Seite.")).toBeInTheDocument();