Muster & Angebot: Vor-/Nachname getrennt, „Ort" statt „Stadt", Angebot als Seite

- Muster bestellen + individuelles Angebot: getrennte Felder Vorname/Nachname
  (statt einem Namensfeld).
- Muster-Formular: Feld „Stadt" → „Ort".
- „Individuelles Angebot" öffnet jetzt eine eigene Seite (/angebot) statt Popup.

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

src/App.tsx

@@ -7,6 +7,7 @@ import Auftraege from './routes/Auftraege';
 import Stammdaten from './routes/Stammdaten';
 import Configurator from './routes/Configurator';
 import MusterSeite from './routes/Muster';
+import AngebotSeite from './routes/Angebot';
 import Textmenge from './routes/Textmenge';
 import { loadSession } from './lib/api';
 
@@ -36,8 +37,9 @@ export default function App() {
           <Routes>
             <Route path="/" element={<Configurator />} />
             <Route path="/login" element={<Login />} />
-            {/* Muster als eigene Seite (kein Popup) – Direktlink /muster. */}
+            {/* Muster & individuelles Angebot als eigene Seiten (kein Popup). */}
             <Route path="/muster" element={<MusterSeite />} />
+            <Route path="/angebot" element={<AngebotSeite />} />
             {/* Textmengen-Tool – öffentlich, Direktlink /textmenge. */}
             <Route path="/textmenge" element={<Textmenge />} />
             <Route

src/components/AppShell.tsx

@@ -180,7 +180,7 @@ function Angebot({ onClose, vorbelegung }: { onClose: () => void; vorbelegung?:
 export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: () => void; variant?: 'dialog' | 'page' }) {
   const [produkte, setProdukte] = useState<Product[]>([]);
   const [form, setForm] = useState({
-    product: '', name: '', email: '', phone: '',
+    product: '', first_name: '', last_name: '', email: '', phone: '',
     street: '', zip: '', city: '', country: 'Deutschland', message: '',
   });
   const [datenschutz, setDatenschutz] = useState(false);
@@ -195,7 +195,8 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
       fetchMyCustomer()
         .then((c) => c && setForm((f) => ({
           ...f,
-          name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+          first_name: c.first_name || f.first_name,
+          last_name: c.last_name || f.last_name,
           email: c.email || f.email,
           phone: c.phone || f.phone,
         })))
@@ -216,7 +217,8 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
     try {
       await sendSampleRequest({
         product: form.product,
-        name: form.name.trim(),
+        first_name: form.first_name.trim(),
+        last_name: form.last_name.trim(),
         email: form.email.trim(),
         phone: form.phone.trim() || undefined,
         street: form.street.trim(),
@@ -259,7 +261,7 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
     </div>
   );
 
-  const gueltig = form.product && form.name.trim() && istEmail(form.email) && form.phone.trim()
+  const gueltig = form.product && form.first_name.trim() && form.last_name.trim() && istEmail(form.email) && form.phone.trim()
     && form.street.trim() && form.zip.trim() && form.city.trim() && datenschutz;
 
   return wrap('Muster bestellen', (
@@ -275,12 +277,13 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
             {produkte.map((p) => <option key={p.key} value={p.key}>{p.name}</option>)}
           </select>
         </div>
-        {feld('name', 'Name')}
+        {feld('first_name', 'Vorname')}
+        {feld('last_name', 'Nachname')}
         {feld('email', 'E-Mail-Adresse', false, 'email')}
         {feld('phone', 'Telefon', false, 'tel')}
         {feld('street', 'Straße und Hausnummer')}
         {feld('zip', 'PLZ')}
-        {feld('city', 'Stadt')}
+        {feld('city', 'Ort')}
         <div className="sk-field">
           <label className="sk-label sk-label--required" htmlFor="m-country">Land</label>
           <select id="m-country" className="sk-input" value={form.country} onChange={set('country')}>
@@ -398,10 +401,10 @@ function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
           <IconMail />
           <span>Muster bestellen</span>
         </NavLink>
-        <button className="sk-nav-item sk-nav-item--quiet" onClick={() => { open('angebot'); onNavigate?.(); }}>
+        <NavLink to="/angebot" className="sk-nav-item sk-nav-item--quiet" onClick={onNavigate}>
           <IconOffer />
           <span>Individuelles Angebot</span>
-        </button>
+        </NavLink>
         <button className="sk-nav-item sk-nav-item--quiet" onClick={() => { open('hilfe'); onNavigate?.(); }}>
           <IconHelp />
           <span>Hilfe</span>

src/components/OfferForm.tsx

@@ -15,7 +15,7 @@ const istEmail = (e: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
  */
 export default function OfferForm({ produkt, onClose }: { produkt?: string; onClose?: () => void }) {
   const gewaehltesProdukt = produkt?.trim() || '';
-  const [form, setForm] = useState({ name: '', email: '', phone: '', quantity: '', message: '' });
+  const [form, setForm] = useState({ first_name: '', last_name: '', email: '', phone: '', quantity: '', message: '' });
   const [datenschutz, setDatenschutz] = useState(false);
   const [status, setStatus] = useState<'formular' | 'sendet' | 'fertig'>('formular');
   const [fehler, setFehler] = useState<string[]>([]);
@@ -28,7 +28,8 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
         if (!c) return;
         setForm((f) => ({
           ...f,
-          name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+          first_name: c.first_name || f.first_name,
+          last_name: c.last_name || f.last_name,
           email: c.email || f.email,
           phone: c.phone || f.phone,
         }));
@@ -49,7 +50,8 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
     setStatus('sendet');
     try {
       await sendOfferRequest({
-        name: form.name.trim(),
+        first_name: form.first_name.trim(),
+        last_name: form.last_name.trim(),
         email: form.email.trim(),
         phone: form.phone.trim() || undefined,
         quantity: form.quantity ? Number(form.quantity) : null,
@@ -90,8 +92,12 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
       )}
       <form style={{ marginTop: 'var(--sk-space-4)' }} onSubmit={absenden}>
         <div className="sk-field">
-          <label className="sk-label" htmlFor="a-name">Name</label>
+          <label className="sk-label" htmlFor="a-vorname">Vorname</label>
-          <input id="a-name" className="sk-input" value={form.name} onChange={set('name')} required />
+          <input id="a-vorname" className="sk-input" value={form.first_name} onChange={set('first_name')} required />
+        </div>
+        <div className="sk-field">
+          <label className="sk-label" htmlFor="a-nachname">Nachname</label>
+          <input id="a-nachname" className="sk-input" value={form.last_name} onChange={set('last_name')} required />
         </div>
         <div className="sk-field">
           <label className="sk-label" htmlFor="a-mail">E-Mail</label>

src/lib/api.ts

@@ -527,7 +527,8 @@ export async function uploadFile(datei: File): Promise<string> {
 /* ── Angebotsanfrage ──────────────────────────────────────────────────────── */
 
 export type OfferRequest = {
-  name: string;
+  first_name: string;
+  last_name: string;
   email: string;
   phone?: string;
   quantity?: number | null;
@@ -544,7 +545,8 @@ export async function sendOfferRequest(input: OfferRequest) {
 
 export type SampleRequest = {
   product: string;
-  name: string;
+  first_name: string;
+  last_name: string;
   email: string;
   phone?: string;
   street: string;

src/routes/Angebot.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+import OfferForm from '../components/OfferForm';
+
+/** Individuelles Angebot als eigene Seite (Direktlink /angebot) – kein Popup. */
+export default function AngebotSeite() {
+  const navigate = useNavigate();
+  return (
+    <div className="sk-view">
+      <h1>Individuelles Angebot anfordern</h1>
+      <OfferForm onClose={() => navigate('/')} />
+    </div>
+  );
+}