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/demos/heatmap/HeatmapSeite.tsx

@@ -318,9 +318,9 @@ const useGemessen = (ref: RefObject<HTMLElement | null>, variante: DemoVariante)
 
 /**
  * Wie viele Punkte eine Zone bekommt. Die Skala der Heatmap sättigt schon bei zwei, drei überlagerten Flecken (rot);
- * damit die Farbe die Rangfolge zeigt, steigt die Dichte mit dem Quadrat des Klickanteils (Tageskarte = 1):
- * nur die meistgeklickte Stelle wird durchgehend rot, Menü und Telefon bleiben gelb bis grün.
- * Große Zonen bekommen mehr Punkte, damit ihre Fläche nicht leer wirkt.
+ * die Dichte steigt darum steil mit dem Klickanteil (Tageskarte = 1, nur sie wird durchgehend rot).
+ * Jede Zone bekommt aber mindestens so viele Punkte, dass ihre Klicks sichtbar sind (Wunsch des Inhabers 2026-10-04:
+ * nicht nur Punkte auf „Tageskarte kaufen“, auch z. B. die Telefonnummer). Große Zonen bekommen mehr Punkte.
  */
 const punktAnzahl = (zone: Zone, r: PunktRechteck, variante: DemoVariante) => {
   const anteil = zone.klicks / TOP_ZONE.klicks;
@@ -328,7 +328,8 @@ const punktAnzahl = (zone: Zone, r: PunktRechteck, variante: DemoVariante) => {
   const fleck = Math.PI * (2 * LEINWAND[variante].radius) ** 2;
   const flecke = Math.max(r.b * r.h, 2 * fleck) / (2 * fleck);
   const obergrenze = Math.max(1, Math.round(zone.klicks / KLICKS_JE_PUNKT[variante]));
-  return Math.min(obergrenze, Math.max(1, Math.round(anteil ** 2 * 8 * flecke)));
+  const minimum = Math.round(zone.klicks / MINDEST_KLICKS_JE_PUNKT[variante]);
+  return Math.min(obergrenze, Math.max(minimum, Math.round(anteil ** 1.6 * 8 * flecke)));
 };
 
 /** Alle Klickpunkte (Beispieldaten, feste Saat) je Zone, relativ zur Fläche. 85 % in der Zone, 15 % als Streuung am Rand. */
@@ -367,6 +368,8 @@ const erzeugePunkte = (rechtecke: Rechtecke, variante: DemoVariante): Record<str
 };
 
 const KLICKS_JE_PUNKT = { desktop: 4, handy: 7 } as const;
+/** Untergrenze: höchstens so viele Klicks je gezeichnetem Punkt (Telefon 96 Klicks = 7 Punkte auf dem MacBook). */
+const MINDEST_KLICKS_JE_PUNKT = { desktop: 14, handy: 24 } as const;
 
 const LEINWAND = { desktop: { b: 756, h: 447, radius: 19 }, handy: { b: 201, h: 437, radius: 9 } } as const;
 

src/components/home/demos/heatmap/zonen.ts

@@ -48,7 +48,7 @@ const ROH: Rohzone[] = [
   {
     id: "telefon",
     name: "Telefonnummer",
-    klicks: 61,
+    klicks: 96,
     satz: (p) => `${p}\u00a0% der Klicks gehen auf die Telefonnummer im Kopf der Seite.`,
   },
   {
@@ -86,7 +86,7 @@ const ROH: Rohzone[] = [
   {
     id: "oeffnungszeiten",
     name: "Öffnungszeiten",
-    klicks: 96,
+    klicks: 61,
     satz: (p) => `Die Öffnungszeiten bekommen ${p}\u00a0% der Klicks.`,
   },
 ];