Terminplaner: Marke „Bald verfügbar“ (noch nicht für Kunden buchbar)

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

src/components/home/Kundenportal.tsx

@@ -96,8 +96,12 @@ type Funktion = {
   beschreibung?: string;
   /** Hinweis unter dem MacBook (Live-Vorschau, Chat, Terminplaner, Pinnwand; bei der Website-Analyse steht dort die Diagnose). */
   hinweis?: string;
+  /** Noch nicht für Kunden buchbar: Marke „Bald verfügbar“ am Titel (Terminplaner läuft bisher nur im Pilot, Stand 04.10.2026). */
+  bald?: boolean;
 };
 
+const BaldMarke = ({ f }: { f: Funktion }) => (f.bald ? <span className="kp-bald">Bald verfügbar</span> : null);
+
 /** Mitte des Knopfes "Aufhängen" im Portal-Screenshot der News-Pinnwand (Designpunkte der iPhone-Fläche 402 x 874). */
 const AUFHAENGEN_PUNKT = { x: 201, y: 613 };
 
@@ -151,6 +155,7 @@ const FUNKTIONEN: Funktion[] = [
     id: "terminplaner",
     titel: "Terminplaner",
     demo: "termin",
+    bald: true,
     adresse: "salon-schnittstelle.example",
     beschreibung:
       "Beispiel-Website eines Friseursalons mit Buchungsformular und einem Kalender, in dem der neue Termin erscheint",
@@ -553,7 +558,10 @@ const Buehne = () => {
                           onClick={() => springe(d)}
                         >
                           <span className="kp-eintrag__punkt" aria-hidden="true" />
-                          <span className="kp-untereintrag__titel">{FUNKTIONEN[d].titel}</span>
+                          <span className="kp-untereintrag__titel">
+                            {FUNKTIONEN[d].titel}
+                            <BaldMarke f={FUNKTIONEN[d]} />
+                          </span>
                         </button>
                       </li>
                     ))}
@@ -728,6 +736,7 @@ const DemoKarteRahmen = ({
       </HandyRahmen>
     </div>
     <h3 className="wk-h3 kp-karte__titel">{f.titel}</h3>
+    <BaldMarke f={f} />
     <KartenUnterschrift f={f} />
     <p className="kp-karte__beispiel">{beispielText(f)}</p>
     {f.bedienhinweis ? <p className="kp-karte__bedienen">{f.bedienhinweis.tippen}</p> : null}

src/components/home/kundenportal.css

@@ -235,6 +235,20 @@
   line-height: 1.2;
   transition: color var(--dur-state) var(--ease);
 }
+/* „Bald verfügbar“: Funktion noch nicht buchbar */
+.kp-bald {
+  display: inline-block;
+  margin-left: 0.5rem;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  color: var(--fg-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: 0.15em;
+}
 .kp-untereintrag[aria-current="step"] .kp-untereintrag__titel {
   color: var(--fg);
 }
@@ -495,6 +509,10 @@
 .kp-karte__titel {
   margin-bottom: 0.35rem;
 }
+/* auf der Karte steht die Marke unter dem Titel (die Überschrift bleibt der reine Titel) */
+.kp-karte > .kp-bald {
+  margin: 0 0 0.5rem;
+}
 .kp-karte__text {
   max-width: 26ch;
 }