Bühne: „Funktionen“ als aufklappender Überpunkt, Heatmap mit Klicks auch außerhalb der Tageskarte

- Liste: Überpunkt „Funktionen“ (Bausteine für Ihre Website). Er klappt auf, sobald
  Terminplaner, Website-Analyse oder News-Pinnwand erreicht ist, und danach wieder zu.
  Die drei Unterpunkte zeigen nur ihren Titel (keine Stichpunkte); die Liste steht oben
  in der Bühne, damit beim Aufklappen nichts darüber springt.
- Heatmap der Boulderhalle: jede Zone bekommt eine Mindestzahl Klickpunkte (Telefon,
  Menü, Routenbild, Karten sind sichtbar), die Tageskarte bleibt klar am heißesten.
  Telefonnummer 96 statt 61 Klicks (getauscht mit Öffnungszeiten, Summe bleibt 1.284).

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

src/components/home/Kundenportal.tsx

@@ -174,7 +174,10 @@ const LETZTER = FUNKTIONEN.length - 1;
 /** Stationen vor "Als App": normale Schritte und längere Demo-Schritte (bestimmen die Scrollstrecke der Hülle). */
 const ANZAHL_DEMO = FUNKTIONEN.filter((f) => f.demo).length;
 const ANZAHL_NORMAL = LETZTER - ANZAHL_DEMO;
-const GRUPPE_TITEL = "Weitere Funktionen";
+/** Überpunkt der drei Funktionen in der Liste der Bühne (Wunsch des Inhabers 2026-10-04): klappt auf, sobald eine
+ * der drei erreicht ist; die Unterpunkte zeigen nur ihren Titel. */
+const GRUPPE = { titel: "Funktionen", text: "Bausteine für Ihre Website." };
+const DEMO_INDIZES = FUNKTIONEN.flatMap((f, i) => (f.demo ? [i] : []));
 
 // ── Demos (eigener Chunk, erst geladen, wenn die Bühne die Station fast erreicht) ──────────────────────
 
@@ -424,27 +427,54 @@ const Buehne = () => {
         <div className="wk-container kp-buehne__innen">
           <ol className="kp-liste" aria-label="Funktionen des Kundenportals">
             {FUNKTIONEN.map((f, i) => {
-              const eintrag = (
-                <button
-                  type="button"
-                  className="kp-eintrag"
-                  aria-current={i === aktiv ? "step" : undefined}
-                  onClick={() => springe(i)}
-                >
-                  <span className="kp-eintrag__punkt" aria-hidden="true" />
-                  <span className="kp-eintrag__titel">{f.titel}</span>
-                  <span className="kp-eintrag__text">
-                    <Unterschrift f={f} />
-                  </span>
-                </button>
-              );
-              if (!f.demo) return <li key={f.id}>{eintrag}</li>;
-              // die drei Funktionen stehen in einer Gruppe mit eigener Überschrift
-              const erste = !FUNKTIONEN[i - 1]?.demo;
+              if (!f.demo) {
+                return (
+                  <li key={f.id}>
+                    <button
+                      type="button"
+                      className="kp-eintrag"
+                      aria-current={i === aktiv ? "step" : undefined}
+                      onClick={() => springe(i)}
+                    >
+                      <span className="kp-eintrag__punkt" aria-hidden="true" />
+                      <span className="kp-eintrag__titel">{f.titel}</span>
+                      <span className="kp-eintrag__text">
+                        <Unterschrift f={f} />
+                      </span>
+                    </button>
+                  </li>
+                );
+              }
+              // die drei Funktionen: ein Überpunkt, der aufklappt, sobald eine von ihnen erreicht ist
+              if (i !== DEMO_INDIZES[0]) return null;
+              const offen = aktivDemo !== undefined;
               return (
-                <li key={f.id} className="kp-gruppe" data-erste={erste ? "ja" : undefined}>
-                  {erste ? <p className="kp-gruppe__titel">{GRUPPE_TITEL}</p> : null}
-                  {eintrag}
+                <li key="funktionen" className="kp-gruppe" data-offen={offen ? "ja" : "nein"}>
+                  <button
+                    type="button"
+                    className="kp-eintrag kp-eintrag--gruppe"
+                    aria-expanded={offen}
+                    aria-controls="kp-unterliste"
+                    onClick={() => springe(DEMO_INDIZES[0])}
+                  >
+                    <span className="kp-eintrag__titel">{GRUPPE.titel}</span>
+                    <span className="kp-eintrag__text">{GRUPPE.text}</span>
+                  </button>
+                  <ol id="kp-unterliste" className="kp-unterliste" aria-label={GRUPPE.titel} hidden={!offen}>
+                    {DEMO_INDIZES.map((d) => (
+                      <li key={FUNKTIONEN[d].id}>
+                        <button
+                          type="button"
+                          className="kp-untereintrag"
+                          aria-current={d === aktiv ? "step" : undefined}
+                          onClick={() => springe(d)}
+                        >
+                          <span className="kp-eintrag__punkt" aria-hidden="true" />
+                          <span className="kp-untereintrag__titel">{FUNKTIONEN[d].titel}</span>
+                        </button>
+                      </li>
+                    ))}
+                  </ol>
                 </li>
               );
             })}