From 9ecfc015b19912b22b00348fa918fe8641dba27e Mon Sep 17 00:00:00 2001
From: ToolCTRL <node2@tool-ctrl.de>
Date: Wed, 3 Jun 2026 12:21:39 +0200
Subject: [PATCH] Form: Vorname/Nachname + Branche, Hero ohne Leistungen-Button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Form
- Name in Vorname + Nachname gesplittet (beide Pflicht), 2-Spalten-Grid
- Neues Feld Branche neben Firmenname (optional, 2-Spalten-Grid)
- Telefon-Label auf 'Telefonnummer' vereinheitlicht
- Placeholder ohne Em-Dash

script.js
- Validierung jetzt auf vorname/nachname/email/nachricht
- Payload sendet neue Einzelfelder (vorname, nachname, firmenname,
  branche) PLUS zusammengesetzte Backward-Compat-Felder (name, firma
  mit Branche-Suffix in Klammern), damit server.js/Inbox-Schema
  unverändert bleibt

Hero
- 'Leistungen ansehen' Ghost-Button entfernt, nur noch der schwarze
  'Kontakt aufnehmen' CTA

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 29 ++++++++++++++++++++---------
 public/script.js  | 17 +++++++++++++----
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/public/index.html b/public/index.html
index 46af156..956c302 100644
--- a/public/index.html
+++ b/public/index.html
@@ -53,7 +53,6 @@
       </p>
       <div class="hero-actions">
         <a class="btn btn-solid" href="#kontakt">Kontakt aufnehmen</a>
-        <a class="btn btn-ghost" href="#leistungen">Leistungen ansehen</a>
       </div>
     </div>
 
@@ -349,13 +348,25 @@
     </div>
 
     <form class="lead-form" id="lead-form" novalidate>
-      <div class="form-row">
-        <label for="f-name">Name <span>*</span></label>
-        <input id="f-name" name="name" type="text" autocomplete="name" required />
+      <div class="form-grid">
+        <div class="form-row">
+          <label for="f-vorname">Vorname <span>*</span></label>
+          <input id="f-vorname" name="vorname" type="text" autocomplete="given-name" required />
+        </div>
+        <div class="form-row">
+          <label for="f-nachname">Nachname <span>*</span></label>
+          <input id="f-nachname" name="nachname" type="text" autocomplete="family-name" required />
+        </div>
       </div>
-      <div class="form-row">
-        <label for="f-firma">Firma</label>
-        <input id="f-firma" name="firma" type="text" autocomplete="organization" />
+      <div class="form-grid">
+        <div class="form-row">
+          <label for="f-firmenname">Firmenname</label>
+          <input id="f-firmenname" name="firmenname" type="text" autocomplete="organization" />
+        </div>
+        <div class="form-row">
+          <label for="f-branche">Branche</label>
+          <input id="f-branche" name="branche" type="text" />
+        </div>
       </div>
       <div class="form-grid">
         <div class="form-row">
@@ -363,14 +374,14 @@
           <input id="f-email" name="email" type="email" autocomplete="email" required />
         </div>
         <div class="form-row">
-          <label for="f-telefon">Telefon</label>
+          <label for="f-telefon">Telefonnummer</label>
           <input id="f-telefon" name="telefon" type="tel" autocomplete="tel" />
         </div>
       </div>
       <div class="form-row">
         <label for="f-nachricht">Worum geht es Ihnen? <span>*</span></label>
         <textarea id="f-nachricht" name="nachricht" rows="4" required
-          placeholder="Kurz Ihr Anliegen — wir kümmern uns um die Details."></textarea>
+          placeholder="Kurz Ihr Anliegen, wir kümmern uns um die Details."></textarea>
       </div>
       <!-- Honeypot gegen Spam -->
       <div class="hp" aria-hidden="true">
diff --git a/public/script.js b/public/script.js
index 41e0134..cff7b0d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -46,8 +46,9 @@
 
   function validate() {
     var ok = true;
-    ["f-name", "f-email", "f-nachricht"].forEach(function (id) {
+    ["f-vorname", "f-nachname", "f-email", "f-nachricht"].forEach(function (id) {
       var el = document.getElementById(id);
+      if (!el) return;
       var row = fieldRow(el);
       var valid = el.value.trim() !== "";
       if (id === "f-email" && valid) {
@@ -68,14 +69,22 @@
     }
 
     var btn = form.querySelector("button[type=submit]");
+    var vorname = form.vorname.value.trim();
+    var nachname = form.nachname.value.trim();
+    var firmenname = form.firmenname.value.trim();
+    var branche = form.branche.value.trim();
     var payload = {
-      name: form.name.value.trim(),
-      firma: form.firma.value.trim(),
+      name: (vorname + " " + nachname).trim(),
+      vorname: vorname,
+      nachname: nachname,
+      firma: firmenname + (branche ? " (" + branche + ")" : ""),
+      firmenname: firmenname,
+      branche: branche,
       email: form.email.value.trim(),
       telefon: form.telefon.value.trim(),
       nachricht: form.nachricht.value.trim(),
       website: form.website.value.trim(), // Honeypot
-      quelle: "Messe — Landing Page"
+      quelle: "Landing Page"
     };
 
     if (btn) { btn.disabled = true; btn.textContent = "Wird gesendet …"; }