const {useState,useEffect,useMemo,useRef} = React; const P=window.MG_P, W=window.MG_W; const KAT=[ ['Gesichtsbehandlungen','beh-gesicht.jpg','Schöne Haut ist kein Zufall – sie ist Pflege, die bleibt.',[ ['Kosmetische Grundbehandlung','90 Min.',85,'Reinigung, Hautanalyse, Peeling, Enzym-Peeling, Tiefenreinigung, Wirkstoffampulle, Gesichts- & Dekolleté-Massage, Spezialmaske – inklusive Abschlusspflege.'], ['Basis Kurzbehandlung','60 Min.',75,'Die kompakte Gesichtsbehandlung: Reinigung, Hautanalyse, Peeling, Enzym-Peeling, Tiefenreinigung, Spezialampulle mit Maske.'], ['Comfort Männerbehandlung','90 Min.',85,'Speziell auf Männerhaut abgestimmt: Reinigung, Hautanalyse, Peeling, Enzym-Peeling, Tiefenreinigung, Spezialampulle mit Maske.'], ['Akne ade (bis 18 Jahre)','45 Min.',65,'Für junge Haut: Reinigung, Hautanalyse, Enzym-Peeling, Tiefenreinigung, Wirkstoffkonzentrat mit Spezialmaske und Abschlusspflege.'], ['Frische Kick Behandlung','45 Min.',65,'Der schnelle Glow: Reinigung, Peeling, Enzym-Peeling und Feuchtigkeitsmaske mit Abschlusspflege.'], ['Augenbehandlung','30 Min.',35,'Belebend-kühlende Modellage für die zarte Augenpartie. Strafft, glättet Linien und reduziert Müdigkeitsspuren.'], ['Manuelle Lymphdrainage','45 Min.',55,'Gesicht & Dekolleté: aktiviert den Lymphabfluss, entstaut das Gewebe und sorgt für ein frisches Hautbild.']]], ['Luxusbehandlungen','studio-5375.jpg','Zwei Masken, zwei Massagen – und 120 Minuten nur für dich.',[ ['Soin Mille Lumière','120 Min.',155,'Unsere luxuriöseste Anti-Aging-Gesichtsbehandlung mit zwei Massagen und zwei Masken. Regeneriert, strafft und verleiht unvergleichliche Ausstrahlung.'], ['Maria Galland Lift Expert','90 Min.',110,'100 % manuelle Gesichtsbehandlung für sichtbare Festigung und Definition der Konturen.'], ['Masque Modelant','105 Min.',100,'Klassische Gesichtsbehandlung mit selbst erwärmender Mineralienmaske. Vitalisiert und sorgt für einen natürlich gelifteten Teint.']]], ['Mikrodermabrasion','beh-microderm.jpg','Feine Abtragung, große Wirkung: dein Teint wirkt sofort ebenmäßiger.',[ ['Economy Behandlung','ca. 60 Min.',75,'Reinigung, Enzym-Peeling, Microdermabrasion, Wirkstoffampulle, Abschlusspflege.'], ['Business Behandlung','ca. 90 Min.',100,'Wie Economy, zusätzlich mit Tiefenausreinigung und Feuchtigkeitsmaske.'], ['Comfort Behandlung','ca. 120 Min.',110,'Das volle Programm inklusive Tiefenausreinigung, Dekolleté- und Spezialmaske.']]], ['Microneedling & BB Glow','beh-microneedling.jpg','Kollagen entsteht nicht über Nacht – aber heute fängt es an.',[ ['Microneedling Gesicht, Hals & Dekolleté','ca. 120 Min.',150,'Feinste Mikroimpulse aktivieren die Zellerneuerung und regen Kollagen & Elastin an.'], ['BB Glow Gesicht','ca. 60 Min.',100,'Die sanfte Anti-Aging-Behandlung für strahlende, ebenmäßige Haut.'], ['BB Glow Gesicht, Hals & Dekolleté','ca. 90 Min.',130,'BB Glow für das große Areal in einer Sitzung.'], ['BB Glow 3er-Paket','3 Termine',280,'Drei Behandlungen im Paket – für ein länger anhaltendes Ergebnis zum Vorteilspreis.']]], ['Rücken & Körper','studio-5397.jpg','Der Rücken bekommt selten Aufmerksamkeit – hier schon.',[ ['Rückenbehandlung','ca. 60 Min.',65,'Gegen akute Hautunreinheiten am Rücken: Reinigung, Peeling, Bedampfung und Tiefenausreinigung.'], ['Rückenbehandlung mit Mikrodermabrasion','ca. 75 Min.',85,'Die Rückenbehandlung, ergänzt um eine Mikrodermabrasion für ein feineres Hautbild.']]], ['Wimpern & Brauen','beh-wimpern-hero.jpg','Ein wacher Blick sagt mehr als tausend Worte.',[ ['Wimpernverlängerung Erstbehandlung','ca. 120 Min.',140,'Wimper-für-Wimper-Technik für einen natürlich vollen Augenaufschlag.'], ['Refill','ca. 50 Min.',58,'Auffüllen der Wimpernverlängerung – empfohlen alle 2–4 Wochen.'], ['Refill lang','ca. 75 Min.',63,'Ausführliches Refill bei längerer Pause seit der letzten Behandlung.'], ['Büscheltechnik','ca. 50 Min.',73,'Kleine Wimpernbüschel statt einzelner Wimpern – schneller aufgebaut, sichtbar voller.'], ['Wimpernlifting','ca. 75 Min.',78,'Natürlicher Schwung ohne Extensions – inklusive Färben.'], ['Wimpern entfernen','ca. 30 Min.',33,'Schonendes, vollständiges Ablösen der Extensions ohne die eigenen Wimpern zu strapazieren.'], ['Wimpern färben','15 Min.',23,'Intensiviert helle Wimpern für einen wachen Blick.'], ['Augenbrauen färben','15 Min.',14,'Intensiviert helle Brauen für mehr Tiefe und Definition.','ab 14 €'], ['Augenbrauen zupfen','15 Min.',14,'Präzise Form, abgestimmt auf deine Gesichtszüge.','ab 14 €']]], ['Make-up','hf-makeup.jpg','Das beste Make-up lässt dich aussehen wie dich – nur ausgeschlafener.',[ ['Kleines Make-up nach der Behandlung','ca. 20 Min.',25,'Der dezente Feinschliff direkt im Anschluss an deine Kosmetikbehandlung – in der Behandlung selbst nicht enthalten.'], ['Tages Make-up','30 Min.',47,'Frisches, natürliches Make-up für den Tag – typgerecht abgestimmt.'], ['Abend Make-up','45 Min.',67,'Ausdrucksstarkes Make-up für besondere Anlässe.'], ['Make-up Beratung','60 Min.',78,'Persönliche Beratung mit Übungsteil zum Selbermachen.']]], ['Depilation mit Wachs','hf-waxing-bienenwachs.jpg','Glatte Haut für Wochen – ausschließlich mit Bienenwachs.',[ ['Oberlippe','ca. 15 Min.',15,'Schnell und präzise – in der Mittagspause erledigt.'], ['Kinn','ca. 15 Min.',15,'Gründliche Entfernung feiner wie kräftiger Härchen.'], ['Wangen','ca. 15 Min.',16,'Für einen ebenmäßigen, weichen Teint.'], ['Paketpreis Gesicht','ca. 30 Min.',35,'Oberlippe, Kinn und Wangen in einem Termin – günstiger als einzeln.'], ['Achseln','ca. 15 Min.',30,'Zügig und gründlich, mit beruhigender Pflege im Anschluss.'], ['Unterarme','ca. 15 Min.',30,'Gleichmäßig glatte Arme für mehrere Wochen.'], ['Unterschenkel','ca. 30 Min.',40,'Vom Knie abwärts – der Klassiker für den Sommer.'], ['Beine komplett','ca. 45 Min.',63,'Ober- und Unterschenkel in einem Durchgang.'], ['Bikinizone (nur für Frauen)','ca. 30 Min.',35,'Saubere Kante entlang der Bikinilinie.'], ['Bikinizone komplett (nur für Frauen)','ca. 45 Min.',55,'Die vollständige Enthaarung der Intimzone.'], ['Rücken','ca. 15 Min.',45,'Auch die Stellen, an die du selbst nicht kommst.'], ['Brust','ca. 15 Min.',45,'Gründlich und mit beruhigender Nachpflege.'], ['Paketpreis Rücken & Brust','ca. 30 Min.',70,'Beide Zonen in einem Termin – günstiger als einzeln.']]], ['Hände & Nägel','beh-manikuere.jpg','Gepflegte Hände sind deine schönste Visitenkarte.',[ ['Maniküre','45 Min.',45,'Formen, Nagelhautpflege und Abschluss mit pflegendem Öl.'], ['Maniküre intensiv','60 Min.',51,'Ausführliche Maniküre mit zusätzlicher Pflege für beanspruchte Hände.'], ['Wellnessmaniküre mit Parfümbad','60 Min.',55,'Maniküre plus entspannendes Parfümbad und Handmassage.'], ['Shellac','60 Min.',55,'Langanhaltender Glanz, der 2–3 Wochen perfekt hält.'], ['Naturnagelverstärkung','60 Min.',55,'Stabilisiert weiche und brüchige Nägel – ganz ohne Kunstnagel.'], ['Shellac lösen','ca. 15 Min.',30,'Schonendes Ablösen ohne den Naturnagel anzugreifen.'], ['Reparatur des Nagels','ca. 15 Min.',9,'Ein eingerissener Nagel wird stabilisiert und wieder in Form gebracht.']]], ['Fußpflege','beh-fusspflege.jpg','Verwöhne die Füße, die dich jeden Tag tragen.',[ ['Pediküre','45 Min.',46,'Fußbad, Hornhautentfernung, Nagel- und Nagelhautpflege.'], ['Pediküre mit Lack','60 Min.',62,'Pediküre inklusive Lackierung in deiner Wunschfarbe.'], ['French Pediküre mit Lack','60 Min.',62,'Pediküre mit klassischem French-Finish in Lack.'], ['French Pediküre mit Gel','60 Min.',62,'French-Finish in Gel – besonders lange haltbar.'], ['Gel-/Carbonlack Pediküre','60 Min.',62,'Robuster Gel- oder Carbonlack für dauerhaften Glanz.'], ['Wellnesspediküre','75 Min.',57,'Pediküre mit zusätzlicher Maske und entspannender Fußmassage.'], ['Fußmassage','ca. 15 Min.',20,'Kurze, wohltuende Massage – einzeln oder im Anschluss.']]]]; /* Add-ons: 4. Feld = Kategorien, in denen das Add-on angeboten wird (die Preisliste nennt diese Preise "innerhalb einer Kosmetikbehandlung"). */ const KOSMETIK=['Gesichtsbehandlungen','Luxusbehandlungen','Mikrodermabrasion','Microneedling & BB Glow','Rücken & Körper']; /* 5. Feld = ZUSATZZEIT in Minuten. Bis 26.08.2026 hatten Add-ons nur einen Preis — eine 90-Minuten-Behandlung mit Wimpernfärben blockte im Kalender trotzdem nur 90 Minuten, und der Folgetermin lag zu früh. Die Zeiten stammen aus Svetlanas Sprachnachricht vom 26.08.2026: "wenn man zum Beispiel Wimpern färben bucht, dann müssen wir vielleicht 15 Minuten nur zusammen buchen. Oder wenn man Wimpern färben, Augenbrauen färben und Zupfen bucht, dann brauchen wir mehr oder weniger eine halbe Stunde noch dazu … dann ist es ja dann 120 Minuten zusammen." Daraus: Wimpern färben allein 15, alle drei zusammen 30. Die Aufteilung 15/10/5 erfüllt beide Aussagen — Zupfen geht am schnellsten, Färben braucht Einwirkzeit. Bei 15-Minuten-Takt und 15 Minuten Puffer ist das fein genug; wenn Svetlana es anders aufteilt, sind es drei Zahlen hier. */ const ADDONS=[ ['Mikrodermabrasion als Add-on',40,'Sanfte Abtragung der obersten Hautschicht – direkt in deine Behandlung integriert.',['Gesichtsbehandlungen','Luxusbehandlungen'],15], ['Kleines Make-up danach',25,'Der dezente Feinschliff direkt im Anschluss – du gehst fertig gestylt aus dem Studio.',KOSMETIK,20], ['Wimpern färben',19,'Intensiviert helle Wimpern während deiner Behandlung – ohne Extra-Termin.',KOSMETIK,15], ['Augenbrauen färben',13,'Mehr Tiefe und Definition – im Anschluss an deine Behandlung.',KOSMETIK,10], ['Augenbrauen zupfen',13,'Präzise Form, direkt mitgemacht.',KOSMETIK,5], ['Oberlippe oder Kinn mit Wachs',14,'Kleine Depilation innerhalb der Kosmetikbehandlung – günstiger als einzeln.',KOSMETIK,15], ['Nagelreparatur',8,'Ein eingerissener Nagel wird während der Behandlung mitrepariert.',['Hände & Nägel','Fußpflege'],15]]; const STAFF=[['Egal','Nächste freie Mitarbeiterin'],['Svetlana','Inhaberin · seit 2004'],['Eugenia','Kosmetikerin · seit 2006']]; /* Die frueher hier fest verdrahtete Slot-Liste ist entfallen: das Zeitraster kommt seit 26.08.2026 vom Server (/api/frei, db/013) und richtet sich nach Oeffnungszeiten, Puffer und Behandlungsdauer. */ const STEPS=['Behandlung','Termin','Deine Daten','Bestätigung']; /* --- Anzahlung ---------------------------------------------------------- Bei JEDER Online-Buchung werden ANZ_BETRAG € im Voraus gezahlt (Ansage der Inhaberin vom 24.08.2026 — vorher galt eine 100-€-Schwelle). Rechtlich ist das eine Vorauszahlung auf den Behandlungspreis, KEINE "Reservierungsgebühr" – die Bezeichnung ändert nach § 306a BGB ohnehin nichts. Der Einbehalt bei No-Show ist pauschalierter Schadensersatz und braucht den Gegenbeweisvorbehalt aus § 309 Nr. 5 BGB. */ const ANZ_BETRAG=25; const anzPflicht=summe=>summe>0; /* --- Willkommensgutschein (?code=LAVIE10-XXXX) -------------------------- Kommt aus der Newsletter-Willkommens-Mail. Die Anzeige hier ist nur Vorschau — ob der Code wirklich gilt (eigener Code, unbenutzt, ERSTE Buchung), entscheidet der Server bei der Buchung; er rechnet den Preis selbst und weist das Ergebnis in der Bestätigungs-Mail aus. */ const GUTSCHEIN_CODE=(()=>{try{const c=new URLSearchParams(location.search).get('code')||''; return /^[A-Z0-9-]{6,20}$/i.test(c)?c.toUpperCase():null}catch(e){return null}})(); /* Quelle der Wahrheit ist das Gutscheincode-FELD (Schritt 3) — der URL-Code füllt es nur vor. So kann die Kundin den Code auch von Hand eintragen oder korrigieren, und Anzeige wie Buchung nutzen denselben Wert. */ const codeNorm=c=>{const x=(c||'').trim().toUpperCase();return /^[A-Z0-9-]{6,20}$/.test(x)?x:null}; const rabattWert=(s,code)=>code?Math.round(s*0.9*100)/100:s; const eurF=n=>n.toFixed(2).replace('.',',').replace(',00',''); /* Zitate der Kundin fuer die Wartescreens. `a` = Urheberin, wird als Eyebrow unter dem Zitat gesetzt. Die Auswahl passiert EINMAL beim Start des jeweiligen Screens (State in MgBuchung) – wuerde man im Render wuerfeln, wechselte das Zitat bei jedem Re-Render mitten in der Einblendung. */ const ZITATE=[ {t:'Deine Haut – das einzig wahre Accessoire, das du ein Leben lang trägst. Pflege, was dich täglich begleitet.'}, {t:'Kosmetik ist die Kunst, die Geburtsurkunde zu dementieren.',a:'Olga Tschechowa'}]; const waehle=arr=>arr[Math.floor(Math.random()*arr.length)]; /* --- Einwilligungen ----------------------------------------------------- Ein Kanal = eine eigene Checkbox. Gebündelte Werbe-Einwilligungen sind nicht "spezifisch" im Sinne von Art. 4 Nr. 11 DSGVO. Keine Box ist vorausgewählt (EuGH "Planet49"). Der Wortlaut wird mitprotokolliert, damit später beweisbar ist, wofür genau zugestimmt wurde (Art. 7 I DSGVO). */ const CONSENT_VERSION='2026-08-16.1'; const KANAELE=[ ['m_email','E-Mail','Angebote, Pflegetipps und Aktionen – bestätigt per Double-Opt-in.'], ['m_sms','SMS','Kurze Nachrichten zu kurzfristig frei gewordenen Terminen und Aktionen.'], ['m_wa','WhatsApp','Angebote und Neuigkeiten per WhatsApp – zusätzlich im Chat zu bestätigen.']]; const TXT_WERBUNG=k=>{const f=KANAELE.find(x=>x[0]===k);return f?'Ich willige ein, Werbung von La Vie per '+f[1]+' zu erhalten ('+f[2]+'). Widerruf jederzeit und kostenfrei möglich.':''}; const TXT_GESUND='Ich willige ausdrücklich ein, dass La Vie meine Angaben zu Haut, Allergien und Gesundheit zur Vorbereitung und Durchführung der Behandlung verarbeitet (Art. 9 Abs. 2 lit. a DSGVO).'; /* Die Ausfallpauschale hängt an der Anzahlung: Sie darf den typischen Schaden nicht übersteigen (§ 309 Nr. 5 lit. a BGB). Bei einer 30-€-Behandlung wären 25 € unverhältnismäßig – dort wird deshalb nichts pauschaliert. */ const TXT_STORNO=anz=>anz ? 'Ich habe die Buchungs- und Stornobedingungen gelesen und akzeptiere sie, einschließlich der Anzahlung von '+ANZ_BETRAG+' € und der Ausfallregelung bei Absagen weniger als 24 Stunden vor dem Termin.' : 'Ich habe die Buchungs- und Stornobedingungen gelesen und akzeptiere sie und sage meinen Termin rechtzeitig ab, falls ich ihn nicht wahrnehmen kann.'; const TXT_DS='Ich habe die Datenschutzerklärung zur Kenntnis genommen.'; /* --- Datum --------------------------------------------------------------- `tag` ist seit 26.08.2026 ein ISO-Datum 'YYYY-MM-DD' (vorher ein toDateString()-Schlüssel). Grund: es geht so, wie es ist, an /api/frei und in die Buchung — kein Hin- und Herwandeln, keine Zeitzonen-Überraschung. dParse baut daraus ein LOKALES Date; `new Date('2026-09-01')` wäre UTC und läge je nach Zeitzone einen Tag daneben. */ const isoVon=d=>{const p=n=>String(n).padStart(2,'0');return d.getFullYear()+'-'+p(d.getMonth()+1)+'-'+p(d.getDate())}; const dParse=s=>{const[j,m,t]=String(s||'').split('-').map(Number);return new Date(j||1970,(m||1)-1,t||1)}; const minUhr=z=>{const[a,b]=String(z||'0:0').split(':').map(Number);return (a||0)*60+(b||0)}; const fmt=d=>d.toLocaleDateString('de-DE',{weekday:'long',day:'numeric',month:'long'}); const fmtS=d=>d.toLocaleDateString('de-DE',{weekday:'short',day:'numeric',month:'short'}); const fmtISO=s=>fmt(dParse(s)); const fmtISOS=s=>fmtS(dParse(s)); /* --- Monatskalender ------------------------------------------------------ Ansage der Inhaberin: "Richtiges Kalendar in Buchungssystem auch auf webiste, sodass sie auch den ganzen Jahr buchen Können. Also nicht nur 1 woche zeitraum." Vorher zeigte der Funnel sieben Tage ab morgen. Der Raster beginnt montags (deutsche Konvention; getDay() liefert 0 = So). */ const WOCHENTAGE=['Mo','Di','Mi','Do','Fr','Sa','So']; const MONATSNAMEN=['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']; const monatsRaster=(jahr,monat)=>{ const erster=new Date(jahr,monat,1); const versatz=(erster.getDay()+6)%7; // Mo=0 … So=6 const tage=new Date(jahr,monat+1,0).getDate(); const zellen=[]; for(let i=0;i {STEPS.map((l,i)=>
step?.45:1,transition:'opacity .4s var(--ease),border-color .4s var(--ease)'}}> {String(i+1).padStart(2,'0')} {l} {l}
)} ; } function Step1({sel,setSel,addons,setAddons,persons,setPersons}){ const [open,setOpen]=useState(0); const [info,setInfo]=useState(''); return
{KAT.map(([kat,img,quote,items],ki)=>
{items.map(([n,dur,pr,desc,plabel])=>{const on=sel&&sel.name===n;const io=info===n; return
{setSel({name:n,dur,preis:pr,kat,img,quote,plabel});setAddons(a=>a.filter(x=>{const ad=ADDONS.find(y=>y[0]===x);return !ad||!ad[3]||ad[3].includes(kat)}))}} style={{cursor:'pointer',padding:'16px 18px',marginBottom:8,background:on?'var(--paper-2)':'transparent',border:'1px solid '+(on?'var(--ink)':'var(--line)'),transition:'border-color .3s var(--ease),background .3s var(--ease)'}}>
{on&&} {n} {dur} · {plabel||pr+' €'}

{desc}

;})}
)}
{sel&&
Ergänzen
{ADDONS.filter(([,,,kats])=>!kats||kats.includes(sel.kat)).map(([n,pr,desc])=>{const on=addons.includes(n); return ;})}
Für wie viele Personen?
{[1,2,3].map(p=>)}
{persons>1&&

Wir reservieren {persons} Plätze parallel – bei Bedarf melden wir uns zur Feinabstimmung.

}
}
; } /* --- Schritt 2: Kosmetikerin, Tag, Uhrzeit, weitere Termine --------------- Alles Zeitliche kommt seit 26.08.2026 vom SERVER (db/013, /api/frei): Viertelstunden-Takt aus den Öffnungszeiten des Wochentags, 15 Minuten Puffer nach jeder Behandlung, Sperrzeiten der Inhaberin, Vorlauf. Hier wird nichts mehr gerechnet — vorher stand eine feste 8-Slot-Liste im JS, die der Server gar nicht kannte. */ function Kalender({monat,setMonat,tag,setTag,tage,laedt,horizontBis}){ const heute=new Date();heute.setHours(0,0,0,0); const info=Object.fromEntries((tage||[]).map(t=>[t.datum,t])); const zellen=monatsRaster(monat.getFullYear(),monat.getMonth()); const grenze=horizontBis?dParse(horizontBis):null; /* Nicht vor den aktuellen Monat und nicht über den Buchungshorizont hinaus. */ const zurueckMoeglich=monat.getFullYear()>heute.getFullYear()|| (monat.getFullYear()===heute.getFullYear()&&monat.getMonth()>heute.getMonth()); const vorMoeglich=!grenze||new Date(monat.getFullYear(),monat.getMonth()+1,1)<=grenze; const springe=n=>setMonat(new Date(monat.getFullYear(),monat.getMonth()+n,1)); return
{MONATSNAMEN[monat.getMonth()]} {monat.getFullYear()}
{WOCHENTAGE.map(w=>
{w}
)} {zellen.map((d,i)=>{ if(!d)return
; const iso=isoVon(d); const t=info[iso]; const vergangen=dgrenze); /* Ohne geladene Übersicht wird nichts als "zu" behauptet — sonst blitzt beim Monatswechsel kurz ein komplett geschlossener Monat auf. */ const zu=vergangen||(t?(t.modus==='zu'||t.gesperrt):false); const anfrage=!!t&&t.modus==='anfrage'&&!zu; const voll=!!t&&!zu&&t.offen_min>0&&t.belegt_min>=t.offen_min; const aus=zu||voll; const on=tag===iso; return ; })}
{laedt&&Verfügbarkeit wird geladen …}
; } function Step2({staff,setStaff,tag,setTag,slot,setSlot,frei,freiLaedt,belegtHinweis, monat,setMonat,tage,tageLaedt,horizontBis,weitere,setWeitere,sel,dauerMin}){ const slots=(frei&&Array.isArray(frei.slots))?frei.slots:[]; const anfrage=!!(frei&&frei.anfrage); const zu=!!(frei&&frei.modus==='zu'); const nichtsFrei=!freiLaedt&&!!tag&&!zu&&slots.length>0&&!slots.some(s=>s.frei); return
Mitarbeiterin
{STAFF.map(([s,d])=>)}
Tag
{tag&&<>
Uhrzeit{freiLaedt&& · Verfügbarkeit wird geprüft …}
{zu&&!freiLaedt ?

An diesem Tag haben wir geschlossen. Wähl bitte einen anderen Tag im Kalender.

: <>
{(freiLaedt?[]:slots).map(s=>{const off=s.frei;const on=slot===s.zeit&&off; return ;})}
{freiLaedt&&

Einen Moment …

} {nichtsFrei&&

An diesem Tag ist alles vergeben{staff&&staff!=='Egal'?' – bei „Egal" ist oft noch etwas frei':''}. Schau gern auf einen anderen Tag.

} {!freiLaedt&&!nichtsFrei&&slots.some(s=>!s.frei)&&

Durchgestrichene Zeiten sind bereits vergeben{staff==='Egal'?'':' – bei „Egal" ist oft mehr frei'}.

} } {/* Montag und Samstag öffnet das Studio nach Vereinbarung: die Kundin wählt eine Zeit, die Inhaberin bestätigt — und erst dann wird die Anzahlung eingezogen. Das muss VOR dem Absenden klar sein. */} {anfrage&&!zu&&

Montags und samstags öffnen wir nach Vereinbarung. Du wählst hier deine Wunschzeit – wir prüfen sie und melden uns kurzfristig. Erst nach unserer Bestätigung wird die Anzahlung fällig; jetzt wird nichts abgebucht.

} {belegtHinweis&&

{belegtHinweis}

}

Zum ersten Mal bei uns? Dann gehört eine ausführliche persönliche Beratung dazu – mit Hautanalyse und Produktempfehlung, als Geschenk. Plane dafür etwa 30 Minuten zusätzlich ein; wir reservieren die Zeit automatisch mit.

{slot&&} }
; } /* --- Weitere Termine im Voraus ------------------------------------------- Ansage der Inhaberin: "Kunden buchen direkt mehrere behandlung im Vorraus", "meistens machen die gleiche Behandlung für 1 jahr schonmal vorraus", "Weiter termin dann kann man auch neue oder zusätzliche behandlung machen kann und anzahlung wrd immer genommen im Vorraus." Deshalb: Vorschläge im gewohnten Rhythmus (4/6/8 Wochen) mit derselben Behandlung und Uhrzeit — ein Klick statt vier. Wer etwas anderes will, wählt Datum, Uhrzeit und Behandlung frei. Die Anzahlung addiert sich, weil jeder dieser Tage geblockt wird. */ function Serie({weitere,setWeitere,sel,dauerMin,staff,ersterTag,ersterSlot,anfrage}){ const [offen,setOffen]=useState(false); const api=window.LAVIE_API; const [entwurf,setEntwurf]=useState(null); // {datum,uhrzeit,behandlung,minuten,summe} const [slots,setSlots]=useState(null); const alleBehandlungen=useMemo(()=>{ const o=[];KAT.forEach(([kat,,,items])=>items.forEach(([n,dur,preis])=>o.push({name:n,dur,preis,kat}))); return o;},[]); const dauerVon=b=>{const m=(String(b&&b.dur||'').match(/\d+/g)||[]).map(Number);return m.length?Math.max(...m):60}; const plus=(wochen)=>{ const d=dParse(ersterTag);d.setDate(d.getDate()+wochen*7); return {datum:isoVon(d),uhrzeit:ersterSlot,behandlung:sel.name,minuten:dauerMin,summe:sel.preis}; }; /* Verfügbarkeit des Entwurfs-Tages — dieselbe Quelle wie oben. */ useEffect(()=>{ if(!entwurf||!entwurf.datum||!api){setSlots(null);return} let aktiv=true;setSlots(null); const q='?datum='+entwurf.datum+'&minuten='+(entwurf.minuten||60) +(staff?'&mit='+encodeURIComponent(staff):''); fetch(api+'/frei'+q).then(r=>r.ok?r.json():null) .then(d=>{if(aktiv)setSlots(d&&Array.isArray(d.slots)?d.slots:[])}) .catch(()=>{if(aktiv)setSlots([])}); return()=>{aktiv=false}; },[entwurf&&entwurf.datum,entwurf&&entwurf.minuten,staff]); const hinzu=(t)=>{ if(!t||!t.datum||!t.uhrzeit)return; if(weitere.some(w=>w.datum===t.datum&&w.uhrzeit===t.uhrzeit))return; setWeitere([...weitere,t].sort((a,b)=>(a.datum+a.uhrzeit).localeCompare(b.datum+b.uhrzeit))); setEntwurf(null); }; return
Weitere Termine im Voraus

Viele Kundinnen legen ihre Behandlungen gleich für ein ganzes Jahr fest. Du kannst hier beliebig viele Folgetermine dazunehmen – auch mit einer anderen Behandlung. {anfrage ? ' Bestätigt werden sie gemeinsam mit deinem Wunschtermin.' : ' Die Anzahlung fassen wir dann zusammen, weil wir jeden dieser Tage für dich blocken.'}

{weitere.length>0&&
{weitere.map((w,i)=>
Termin {i+2} {w.behandlung} {fmtISOS(w.datum)}, {w.uhrzeit}
)}
} {!offen&&} {offen&&
Im gewohnten Rhythmus
{[4,6,8,12].map(w=>)}
Oder frei wählen
setEntwurf({...(entwurf||plus(4)),datum:e.target.value,uhrzeit:''})} style={{border:'1px solid var(--line)',background:'transparent',color:'var(--ink)', fontFamily:'Jost,sans-serif',fontSize:14.5,padding:'11px 14px'}}/>
{entwurf&&entwurf.datum&&<>
Uhrzeit am {fmtISO(entwurf.datum)}{slots===null&&' · wird geprüft …'}
{Array.isArray(slots)&&slots.length===0&&

An diesem Tag haben wir geschlossen.

}
{(slots||[]).map(s=>{const on=entwurf.uhrzeit===s.zeit&&s.frei; return ;})}
}
}
; } function Step3({daten,setDaten}){ const [err,setErr]=useState({}); const set=(k,v)=>setDaten({...daten,[k]:v}); const notiz=(daten.notiz||'').trim(); const alleAn=KANAELE.every(([k])=>daten[k]); window.__validate3=()=>{ const e={}; if(!daten.name)e.name='Bitte gib deinen Namen an.'; if(!daten.email||!/.+@.+\..+/.test(daten.email))e.email='Bitte gib eine gültige E-Mail-Adresse an.'; if(!daten.tel)e.tel='Für die Terminbestätigung brauchen wir deine Nummer.'; if(!daten.ds)e.ds='Bitte bestätige, dass du die Datenschutzerklärung gelesen hast.'; /* Gesundheitsangaben sind Art.-9-Daten: dafür reicht der Vertrag nicht, es braucht eine ausdrückliche Einwilligung. Nur abfragen, wenn die Notiz überhaupt ausgefüllt ist – sonst ist es unnötige Reibung. */ if(notiz&&!daten.gesund)e.gesund='Deine Notiz kann Gesundheitsangaben enthalten – dafür brauchen wir deine ausdrückliche Einwilligung.'; setErr(e);return Object.keys(e).length===0; }; /* Pflichtfelder werden mit * markiert – das ist die gewohnte Konvention, die Legende steht am Ende des Schritts. */ const F=(k,label,type,pflicht)=>
set(k,e.target.value)} style={{width:'100%',background:'var(--paper-2)',border:'1px solid '+(err[k]?'#a33':'var(--line)'),outline:'none',padding:'14px 18px',fontFamily:'Jost,sans-serif',fontSize:15,color:'var(--ink)'}}/> {err[k]&&
{err[k]}
}
; const CB=(k,children)=>; return
{F('name','Name',null,true)}{F('tel','Telefon / WhatsApp','tel',true)}
{F('email','E-Mail','email',true)}
{notiz&&
{CB('gesund',<>{TXT_GESUND})} {err.gesund&&
{err.gesund}
}
}
{F('code','Gutscheincode (optional)')} {/* Terminerinnerung ist Vertragsnebenleistung, keine Werbung – hier wird nur der Kanal gewählt, keine Einwilligung eingeholt. */}
Terminerinnerung

Wir erinnern dich 24 Stunden vor dem Termin. Wähle, wie es dir am liebsten ist.

{[['E-Mail','email'],['SMS','sms'],['WhatsApp','wa']].map(([l,v])=>)}
{/* Werbe-Einwilligungen: getrennt pro Kanal, keine vorausgewählt, und die Buchung funktioniert ohne jede davon (kein Kopplungsverbot- Verstoß nach Art. 7 Abs. 4 DSGVO). */}
Bleib in Kontakt

Als Dankeschön bekommst du 10 % auf deine übernächste Behandlung und einen Gutschein zum Geburtstag. Wir melden uns höchstens zweimal im Monat.

{KANAELE.map(([k,label,desc])=>)}

Freiwillig: Dein Termin kommt auch ohne zustande. Du kannst jede Einwilligung jederzeit und kostenfrei widerrufen – per Abmeldelink, mit „STOPP" als Antwort oder formlos an info@lavie-wirdschoener.de.

{CB('ds',<>{TXT_DS} Meine Daten werden zur Durchführung des Termins verarbeitet (Art. 6 Abs. 1 lit. b DSGVO) – Details in der Datenschutzerklärung.)} {err.ds&&
{err.ds}
} {/* Pflichthinweis aus § 7 Abs. 3 Nr. 3 UWG – muss schon bei der Erhebung der Adresse erfolgen, nicht erst in der ersten Werbemail. */}

Nach deinem Besuch schicken wir dir gelegentlich Hinweise zu vergleichbaren Behandlungen an deine E-Mail-Adresse. Du kannst dem jederzeit widersprechen, ohne dass dafür andere als die Übermittlungskosten nach Basistarifen entstehen – in jeder Nachricht per Link oder formlos an uns.

* Pflichtfeld

; } /* Die Klauseln direkt im Funnel lesbar zu machen ist nicht nur bequemer – es ist die Einbeziehung nach § 305 Abs. 2 BGB: zumutbare Kenntnisnahme VOR Vertragsschluss. Ein Link, der aus dem Funnel herausfuehrt, erfuellt das schlechter (und kostet auf dem Handy den Buchungsstand). Auszug – die vollstaendigen Fassungen liegen auf agb.html / widerruf.html. */ const RECHTSTEXT={ storno:{t:'Buchungs- und Stornobedingungen',datei:'agb.html',abs:[ ['Anzahlung',['Bei jeder Online-Buchung erheben wir eine Anzahlung von 25 €. Wir reservieren dafür die vollständige Behandlungszeit exklusiv für dich.','Die Anzahlung wird vollständig auf den Preis der Behandlung angerechnet. Der Restbetrag ist nach der Behandlung im Studio zu zahlen.','Die Zahlung läuft über unseren Zahlungsdienstleister Whop. Kartendaten gibst du ausschließlich dort ein; wir erhalten und speichern sie nicht.']], ['Absage und Umbuchung',['Du kannst deinen Termin bis 24 Stunden vor Behandlungsbeginn kostenfrei absagen oder verschieben. Eine geleistete Anzahlung erstatten wir in diesem Fall vollständig.','Für die Absage genügt eine Nachricht per E-Mail, Telefon oder WhatsApp. Maßgeblich ist der Zeitpunkt des Zugangs bei uns.']], ['Ausfallregelung',['Sagst du einen anzahlungspflichtigen Termin später als 24 Stunden vorher ab oder nimmst ihn ohne Absage nicht wahr, behalten wir die Anzahlung von 25 € als pauschalierten Schadensersatz für die reservierte und nicht anderweitig vergebene Behandlungszeit ein.','Dir bleibt ausdrücklich der Nachweis vorbehalten, dass uns kein Schaden oder ein wesentlich geringerer Schaden entstanden ist. In diesem Fall erstatten wir die Anzahlung ganz oder anteilig.','Können wir den frei gewordenen Termin kurzfristig anderweitig vergeben, entsteht uns kein Schaden. Wir erstatten die Anzahlung dann vollständig.','Bei Terminen ohne Anzahlung – etwa telefonisch oder im Studio vereinbart – erheben wir keine Ausfallpauschale.','Bei Verhinderung aus wichtigem Grund, etwa Krankheit, finden wir eine einvernehmliche Lösung. Sprich uns einfach an.']], ['Verspätung',['Erscheinst du später als vereinbart, verkürzt sich die Behandlungszeit entsprechend, damit nachfolgende Termine eingehalten werden können. Der vereinbarte Preis bleibt unverändert.']], ['Angaben zu deiner Gesundheit',['Bitte teile uns vor der Behandlung alles mit, was für die Durchführung wichtig ist – insbesondere Allergien, Unverträglichkeiten, Hauterkrankungen, Medikamente oder eine Schwangerschaft.']]]}, widerruf:{t:'Widerruf und Stornierung',datei:'widerruf.html',abs:[ ['Kein Widerrufsrecht bei Terminbuchungen',['Ein Termin ist eine Dienstleistung zu einem bestimmten Zeitpunkt – dafür sieht das Gesetz kein Widerrufsrecht vor (§ 312g Abs. 2 Nr. 9 BGB).']], ['Was stattdessen gilt',['Bis 24 Stunden vorher kannst du kostenfrei absagen oder verschieben, die Anzahlung bekommst du vollständig zurück. Danach behalten wir sie als pauschalierten Schadensersatz ein; der Nachweis eines geringeren Schadens bleibt dir vorbehalten.']]]} }; function RechtModal({thema,onClose}){ window.useScrollLock(true); useEffect(()=>{ const f=e=>{if(e.key==='Escape')onClose()}; window.addEventListener('keydown',f); return()=>window.removeEventListener('keydown',f); },[onClose]); const d=RECHTSTEXT[thema]; /* Portal an document.body ist hier Pflicht, nicht Geschmack: Der Schritt- Container laeuft mit `animation:mg-rise` auf transform und wird dadurch zum Containing Block fuer position:fixed. Innerhalb davon klebte das Overlay am Container statt am Bildschirm – der Schliessen-Knopf landete ausserhalb des sichtbaren Bereichs. */ return ReactDOM.createPortal(
{/* Der Rahmen ist hoehenbegrenzt, gescrollt wird NUR die Textspalte – sonst haengt auf kleinen Displays der Schliessen-Knopf ausserhalb. */}
e.stopPropagation()} role="dialog" aria-modal="true" aria-label={d.t} style={{background:'#fff',border:'1px solid var(--line)',width:'100%',maxWidth:640,maxHeight:'min(86vh,860px)',display:'flex',flexDirection:'column'}}>
Rechtliches

{d.t}

{d.abs.map(([h,ps],i)=>

{h}

{ps.map((p,j)=>

{p}

)}
)}
Vollständige Fassung
, document.body); } function Step4({sel,addons,staff,tag,slot,daten,setDaten,persons,total,onDone,weitere,anfrageTag}){ const [modal,setModal]=useState(''); const [err,setErr]=useState(''); const anz=anzPflicht(total*persons); /* Serientermine: der Kopf plus jeder Folgetermin. Die Anzahlung addiert sich, weil jeder dieser Tage geblockt wird. */ const alleTermine=1+(weitere?weitere.length:0); const anzGesamt=alleTermine*ANZ_BETRAG; /* Die Folgetermine haben eigene Preise (sie dürfen andere Behandlungen sein). */ const serieSumme=(weitere||[]).reduce((s,w)=>s+(w.summe||0),0); const code=codeNorm(daten.code); const pay=()=>{ if(!daten.storno){setErr('Bitte bestätige die Buchungs- und Stornobedingungen.');return} setErr('');onDone(); }; window.__pay=pay; const row=(l,r,mute)=>
{l}{r}
; return
Zusammenfassung
{row(sel.name+' ('+sel.dur+')',sel.plabel||sel.preis+' €')} {ADDONS.filter(([n])=>addons.includes(n)).map(([n,p])=>
{row('+ '+n,p+' €',true)}
)} {persons>1&&row('Personen',persons,true)} {row(fmtISO(tag)+' · '+slot+' Uhr',staff==='Egal'?'nächste freie Mitarbeiterin':staff,true)} {(weitere||[]).map((w,i)=>
{row((i===0?'Weitere Termine: ':'')+fmtISO(w.datum)+' · '+w.uhrzeit+' Uhr · '+w.behandlung,(w.summe||0)+' €',true)}
)} {code&&row('Gutschein '+code+' · −10 %','−'+eurF(total*persons-rabattWert(total*persons,code))+' €',true)}
Gesamt{alleTermine>1?' · alle '+alleTermine+' Termine':''} {(code?rabattWert(total*persons,code):total*persons)+serieSumme} €
{alleTermine>1&&

Jede Behandlung wird beim jeweiligen Termin vor Ort bezahlt – abzüglich der bereits geleisteten Anzahlung.

}
{anz&&
Anzahlung {anzGesamt} €{alleTermine>1?" · "+alleTermine+" Termine":""}
{code&&
Gutschein {code} −10 % für deine erste Behandlung: {eurF(total*persons)} € → {eurF(rabattWert(total*persons,code))} €
}

Mit der Anzahlung reservieren wir die volle Behandlungszeit exklusiv für dich.{alleTermine>1?' Weil wir alle '+alleTermine+' Tage für dich blocken, fassen wir die Anzahlung zusammen: '+alleTermine+' × '+ANZ_BETRAG+' €.':''} Die {anzGesamt} € werden vollständig auf den Behandlungspreis angerechnet{alleTermine>1?'':' – offen bleiben '+eurF(rabattWert(total*persons,code)-ANZ_BETRAG)+' € vor Ort'}.

{/* Bewusst kein Kartenfeld auf dieser Seite: Kartendaten werden erst im gehosteten Whop-Checkout eingegeben und berühren La Vie nie. */}

Im nächsten Schritt öffnet sich die gesicherte Zahlungsseite unseres Zahlungsdienstleisters Whop. Deine Kartendaten werden dort eingegeben – wir sehen und speichern sie nicht.

} {/* Einbeziehung nach § 305 Abs. 2 BGB: die Regel steht im Klartext hier, nicht nur als Link. Der Gegenbeweisvorbehalt (§ 309 Nr. 5 lit. b BGB) und die Erstattung bei Neuvergabe sind Wirksamkeitsvoraussetzung. */}
Wenn etwas dazwischenkommt
{(anz?[['Bis 24 Stunden vorher','Absage kostenfrei, Anzahlung wird vollständig erstattet'], ['Später als 24 Stunden oder ohne Absage',ANZ_BETRAG+' € werden als pauschalierter Schadensersatz einbehalten'], ['Termin wird neu vergeben','Du bekommst die Anzahlung vollständig zurück']] :[['Bis 24 Stunden vorher','Absage kostenfrei – kurze Nachricht genügt'], ['Später als 24 Stunden oder ohne Absage','Keine Gebühr – sag uns bitte trotzdem kurz Bescheid']] ).map(([l,r])=>
{l}{r}
)}

{anz?'Dir bleibt der Nachweis vorbehalten, dass uns kein oder ein wesentlich geringerer Schaden entstanden ist. ':'Die reservierte Zeit gehört dir – eine rechtzeitige Absage hilft uns, sie jemand anderem anzubieten. '}Ausführlich in den .

{err&&
{err}
}
{/* Der Hinweis auf ein 14-tägiges Widerrufsrecht ist am 26.08.2026 auf ausdrückliche Ansage der Inhaberin entfallen ("Das darf nirgendswo auftauchen"). Er stand ohnehin im Widerspruch zur kommunizierten Regelung: Es gilt die 24-Stunden-Frist, danach wird die Anzahlung einbehalten — beides steht direkt darüber und ist zustimmungspflichtig. */}

* Pflichtfeld

{modal&&setModal('')}/>}
; } function Aside({sel,addons,persons,total,staff,tag,slot,step,next,can,label,code,weitere}){ const alleTermine=1+(weitere?weitere.length:0); const anzGesamt=alleTermine*ANZ_BETRAG; const serieSumme=(weitere||[]).reduce((s,w)=>s+(w.summe||0),0); if(!sel)return
Deine Auswahl

Wähle links eine Behandlung – wir zeigen dir hier laufend deine Zusammenfassung.

; return
Deine Auswahl
{sel.name}
{sel.kat} · {sel.dur}
Behandlung{sel.plabel||sel.preis+' €'}
{ADDONS.filter(([n])=>addons.includes(n)).map(([n,p])=>
{n}+{p} €
)} {persons>1&&
Personen× {persons}
} {staff&&
Bei{staff}
} {tag&&slot&&
Termin{fmtISOS(tag)}, {slot}
} {(weitere||[]).map((w,i)=>
{i===0?'Weitere':''} {fmtISOS(w.datum)}, {w.uhrzeit}{w.behandlung}
)} {code&&
Gutschein {code}−{eurF(total*persons-rabattWert(total*persons,code))} €
}
Gesamt{alleTermine>1?' · '+alleTermine+' Termine':''}{code?{total*persons+serieSumme} €{eurF(rabattWert(total*persons,code)+serieSumme)} €:(total*persons+serieSumme)+' €'}
{code&&

10-%-Willkommensgutschein angewendet – gilt für deine erste Behandlung, wird bei der Buchung geprüft.

} {anzPflicht(total*persons)&&

Davon {anzGesamt} € Anzahlung bei der Buchung – wird angerechnet. {alleTermine>1&&' ('+alleTermine+' × '+ANZ_BETRAG+' €, weil wir alle Tage für dich blocken.)'}

} {step<3&&

Noch unverbindlich – du bestätigst erst am Ende.

}
; } /* Gemeinsame Huelle beider Wartescreens: links das Motiv, rechts der Text. Die Seite dahinter wird festgehalten, damit man nicht ins Leere scrollt. */ function LoaderShell({img,zoom,children}){ window.useScrollLock(true); return
{children}
; } const Punkte=()=>
{[0,1,2].map(n=>)}
; const Zitat=({z,delay})=>!z?null:
„{z.t}"
{z.a&&
{z.a}
}
; function Loader({phase,sel,tag,slot,zitat}){ const g=phase==='grats'; return {!g?

Einen Moment bitte – wir prüfen, ob {sel.name} am {fmtISO(tag)} um {slot} Uhr noch frei ist.

Unsere Termine sind sehr gefragt – danke für deine Geduld.

:
Verfügbar

Dein Wunschtermin
ist frei.

{fmtISO(tag)}, {slot} Uhr — wir halten ihn kurz für dich reserviert.

} ; } /* Wartescreen nach dem Absenden der Buchung. Zwei Zustaende: erst das Eintragen, dann eine kurze Bestaetigung, bevor die Bestaetigungsseite uebernimmt. Bewusst ruhig gehalten – kein Konfetti, kein Haken-Icon. */ function BuchungsLoader({phase,sel,tag,slot,anz,name,zitat}){ const g=phase==='gebucht'; return {!g?

Einen Moment – wir tragen deinen Termin ein{anz?' und bestätigen deine Anzahlung':''}.

Bitte schließe dieses Fenster nicht.

:
Gebucht

Dein Termin steht{name?', '+name:''}.

{fmtISO(tag)}, {slot} Uhr — wir freuen uns auf dich.

} ; } function Done({sel,tag,slot,staff,daten,total,persons}){ const ics='data:text/calendar;charset=utf-8,'+encodeURIComponent('BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nSUMMARY:'+sel.name+' – La Vie Wildeshausen\nLOCATION:Burgstraße 7, 27793 Wildeshausen\nDESCRIPTION:Termin um '+slot+' Uhr\nEND:VEVENT\nEND:VCALENDAR'); return
Bestätigt

Wir freuen uns auf dich{daten.name?', '+daten.name.split(' ')[0]:''}.

{[['Behandlung',sel.name],['Termin',fmtISO(tag)+', '+slot+' Uhr'],['Bei',staff==='Egal'?'nächste freie Mitarbeiterin':staff],[persons>1?'Personen':'Gesamt',persons>1?persons:total+' €']].map(([l,v])=>
{l}{v}
)}

Du erhältst gleich eine Bestätigung per E-Mail. Wir erinnern dich 24 Stunden vorher{daten.erinnerung&&daten.erinnerung!=='email'?' per '+(daten.erinnerung==='sms'?'SMS':'WhatsApp'):''}.

{(daten.m_email||daten.m_wa)&&

Für {daten.m_email&&daten.m_wa?'Newsletter und WhatsApp':daten.m_email?'den Newsletter':'WhatsApp'} liegt noch eine Bestätigung von dir an – wir schicken dir gleich den Link. Erst danach hörst du von uns.

}
; } /* Einwilligungsnachweis: WER hat WANN WOFÜR in WELCHER Textfassung zugestimmt. Ohne diesen Datensatz ist jede Einwilligung im Streitfall wertlos – die Beweislast liegt beim Studio (Art. 7 Abs. 1 DSGVO). Die IP-Adresse gehört dazu, lässt sich aber nur serverseitig sauber erfassen: Der Endpunkt muss sie beim Empfang selbst an den Datensatz hängen. */ function consentRecord(daten,ctx){ const ts=new Date().toISOString(); const e=(zweck,erteilt,text)=>({zweck,erteilt:!!erteilt,text,ts}); return { version:CONSENT_VERSION, ts, quelle:'buchungsfunnel', url:location.href, person:{name:daten.name||'',email:daten.email||'',tel:daten.tel||''}, eintraege:[ e('datenschutz_kenntnisnahme',daten.ds,TXT_DS), e('stornobedingungen',daten.storno,TXT_STORNO(!!ctx.anzahlung)), e('gesundheitsdaten',daten.gesund,TXT_GESUND), ...KANAELE.map(([k])=>e('werbung_'+k.slice(2),daten[k],TXT_WERBUNG(k))), e('erinnerungskanal',true,'Terminerinnerung 24 h vorher per '+(daten.erinnerung||'email')) ], /* Vor der Bestätigung darf über diese Kanäle nichts Werbliches raus. */ bestaetigung:{email:daten.m_email?'ausstehend':'entfällt',whatsapp:daten.m_wa?'ausstehend':'entfällt'}, buchung:ctx }; } function consentSenden(rec){ const key='lavie-consent-queue'; const q=JSON.parse(localStorage.getItem(key)||'[]'); q.push(rec);localStorage.setItem(key,JSON.stringify(q)); const api=window.LAVIE_API; if(!api){console.info('[La Vie] Kein Backend gesetzt – Einwilligung wartet lokal in der Warteschlange.');return Promise.resolve(null)} /* Gibt die Server-Antwort zurück ({ok,kundin,termin,kid}) – die Termin-UUID braucht der Anzahlungs-Schritt (Whop). Fehler ⇒ null, der Datensatz bleibt in der Warteschlange. */ return fetch(api+'/consent',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(rec)}) .then(r=>{if(!r.ok)throw new Error('HTTP '+r.status);return r.json()}) .then(ant=>{ const rest=JSON.parse(localStorage.getItem(key)||'[]').filter(x=>x.ts!==rec.ts); localStorage.setItem(key,JSON.stringify(rest)); return ant;}) .catch(err=>{console.warn('[La Vie] Einwilligung nicht übertragen, bleibt in der Warteschlange:',err.message);return null}); } /* Anzahlung über Whop – bewusst "optional redirect": Erst wenn der Server die Buchung angenommen hat UND /api/anzahlung eine Checkout-URL liefert (d.h. der Whop-Zugang ist hinterlegt), wird umgeleitet. In jedem anderen Fall (503 = noch nicht konfiguriert, Netzfehler) läuft die Buchung wie bisher ohne Zahlung weiter – der Termin ist dann trotzdem angefragt. */ function anzahlungStarten(consentAntwort,ctx){ const api=window.LAVIE_API; if(!api)return; /* Nimmt Promise ODER bereits aufgelöste Antwort — der Aufrufer wartet die Serverantwort inzwischen selbst ab, um Anfrage-Tage und Serien zu erkennen, und reicht dann das fertige Objekt herein. */ Promise.resolve(consentAntwort).then(ant=>{ if(!ant||!ant.termin)return null; return fetch(api+'/anzahlung',{method:'POST',headers:{'Content-Type':'application/json'}, body:JSON.stringify({termin:ant.termin,email:ctx.email||'',behandlung:ctx.behandlung,datum:ctx.datum,uhrzeit:ctx.uhrzeit})}) .then(r=>r.ok?r.json():null).catch(()=>null); }).then(a=>{if(a&&a.url)location.href=a.url}).catch(()=>{}); } /* Rückkehr vom Whop-Checkout (?anzahlung=erfolgt|abgebrochen): Der Funnel- Zustand ist nach dem Redirect weg — der Termin ist aber längst angefragt (er entsteht VOR der Zahlung). Also keine leere Buchungsmaske zeigen, sondern eine ehrliche Bestätigung. */ function AnzahlungRueckkehr({status}){ const ok=status==='erfolgt'; return
{ok?'Anzahlung erhalten':'Zahlung abgebrochen'}

{ok?'Danke – dein Termin ist eingetragen.':'Dein Termin ist trotzdem eingetragen.'}

{ok ?'Wir haben deine Anzahlung über 25 € erhalten – sie wird vollständig auf den Behandlungspreis angerechnet. Du bekommst in Kürze eine Bestätigung per E-Mail.' :'Die Zahlung wurde nicht abgeschlossen. Dein Termin ist aber eingetragen – wir melden uns bei dir wegen der Anzahlung, oder du rufst uns kurz an: 04431 7209569.'}

Zur Startseite
; } function MgBuchung(){ const anzStatus=new URLSearchParams(location.search).get('anzahlung'); const [step,setStep]=useState(0); const [sel,setSel]=useState(null); const [addons,setAddons]=useState([]); const [persons,setPersons]=useState(1); const [staff,setStaff]=useState(''); const [tag,setTag]=useState(''); const [slot,setSlot]=useState(''); const [daten,setDaten]=useState(GUTSCHEIN_CODE?{code:GUTSCHEIN_CODE}:{}); const [phase,setPhase]=useState(''); const [buchPhase,setBuchPhase]=useState(''); const [zitat,setZitat]=useState(null); const [fin,setFin]=useState(false); /* Verfügbarkeit kommt seit 26.08.2026 fertig vom Server (db/013, /api/frei): das Viertelstunden-Raster des Tages inklusive Puffer, Sperrzeiten und Öffnungszeiten. null = lädt gerade. freiV erzwingt einen Neuabruf (z. B. nachdem der Server eine Buchung als 'belegt' abgewiesen hat). Vorher rechnete das Frontend die Kapazität selbst nach — dieselbe Regel an zwei Orten zu pflegen war auf Dauer nicht haltbar. */ const [frei,setFrei]=useState(null); const [freiV,setFreiV]=useState(0); const [belegtHinweis,setBelegtHinweis]=useState(''); /* Monatskalender über den ganzen Buchungshorizont. */ const [monat,setMonat]=useState(()=>{const d=new Date();return new Date(d.getFullYear(),d.getMonth(),1)}); const [tage,setTage]=useState(null); const [horizontBis,setHorizontBis]=useState(''); /* Weitere Termine im Voraus (Serie). */ const [weitere,setWeitere]=useState([]); const addSum=ADDONS.filter(([n])=>addons.includes(n)).reduce((s,[,p])=>s+p,0); const total=(sel?sel.preis:0)+addSum; /* Behandlungsdauer + Zusatzzeit der gewählten Add-ons. Geht an /api/frei und in die Buchung — sonst blockte eine 90-Min-Behandlung mit Wimpernfärben nur 90 statt 105 Minuten, und der Folgetermin läge zu früh (Ansage Svetlana, 26.08.2026). Der Erstbesuchs-Zuschlag von 30 Minuten kommt zusätzlich vom Server. */ const addonMin=ADDONS.filter(([n])=>addons.includes(n)).reduce((s,a)=>s+(a[4]||0),0); const behMin=sel?(()=>{const m=(String(sel.dur||'').match(/\d+/g)||[]).map(Number);return m.length?Math.max(...m):60})():60; const dauerMin=behMin+addonMin; /* Monatsübersicht: welche Tage sind zu, welche auf Anfrage, welche voll. */ useEffect(()=>{ const api=window.LAVIE_API; if(!api){setTage([]);return} let aktiv=true; const von=new Date(monat.getFullYear(),monat.getMonth(),1); const bis=new Date(monat.getFullYear(),monat.getMonth()+1,0); fetch(api+'/tage?von='+isoVon(von)+'&bis='+isoVon(bis)+(staff?'&mit='+encodeURIComponent(staff):'')) .then(r=>r.ok?r.json():null) .then(d=>{if(!aktiv)return; setTage(d&&Array.isArray(d.tage)?d.tage:[]); if(d&&d.horizont_bis)setHorizontBis(d.horizont_bis)}) .catch(()=>{if(aktiv)setTage([])}); return()=>{aktiv=false}; },[monat,staff]); /* Slots des gewählten Tages — die Dauer der Behandlung geht mit, damit gar nicht erst Zeiten angeboten werden, die nicht mehr in den Tag passen. */ useEffect(()=>{ if(!tag){setFrei(null);return} let aktiv=true;setFrei(null); const api=window.LAVIE_API; if(!api){setFrei({ok:true,slots:[]});return} const q='?datum='+tag+'&minuten='+dauerMin+'&personen='+persons +(staff?'&mit='+encodeURIComponent(staff):''); fetch(api+'/frei'+q) .then(r=>r.ok?r.json():null) /* Abruf gescheitert → leeres Raster statt falscher Zusagen; der Server-Wächter in lavie_ingest fängt eine Kollision ohnehin hart ab. */ .then(d=>{if(aktiv)setFrei(d&&d.ok?d:{ok:true,slots:[]})}) .catch(()=>{if(aktiv)setFrei({ok:true,slots:[]})}); return()=>{aktiv=false}; },[tag,freiV,dauerMin,persons,staff]); const slotFrei=z=>{ if(!frei||!Array.isArray(frei.slots))return false; const s=frei.slots.find(x=>x.zeit===z); return !!(s&&s.frei); }; /* Wird die gewählte Zeit durch einen Wechsel von Kraft, Personenzahl oder Behandlung unmöglich, löst sich die Auswahl von selbst. */ useEffect(()=>{if(slot&&frei&&Array.isArray(frei.slots)&&!slotFrei(slot))setSlot('')},[frei]); /* Tageswechsel verwirft die Uhrzeit — sonst bliebe eine Zeit stehen, die es am neuen Tag vielleicht gar nicht gibt. */ useEffect(()=>{setSlot('')},[tag]); const anfrageTag=!!(frei&&frei.anfrage); const can=step===0?!!sel:step===1?!!(staff&&tag&&slot&&frei&&slotFrei(slot)):true; /* Beschriftung des Haupt-Buttons. Sie muss die Wahrheit sagen: an einem Anfrage-Tag wird NICHTS abgebucht, bei einer Serie ist der Betrag addiert. Ein Button "25 € anzahlen & buchen", der in Wahrheit nur eine Anfrage stellt, wäre ein Versprechen, das die Seite nicht hält. */ const anzGesamt=(1+weitere.length)*ANZ_BETRAG; const ctaLabel=step===0?'Weiter zum Termin' :step===1?'Verfügbarkeit prüfen' :step===2?'Weiter zur Bestätigung' :anfrageTag?'Termin unverbindlich anfragen' :anzPflicht(total*persons)?anzGesamt+' € anzahlen & buchen' :'Verbindlich buchen'; /* Nach jedem Schrittwechsel an den Anfang. Wichtig: Das darf NICHT synchron im Klick-Handler passieren. Der Ladebildschirm sperrt das Scrollen und stellt beim Entsperren die alte Position wieder her (useScrollLock in mg-ui.jsx) – ein sofortiges scrollTo wuerde davon ueberschrieben, und man landete wieder unten. Als Effekt laeuft es garantiert nach dem Aufraeumen der Sperre. */ useEffect(()=>{ const id=requestAnimationFrame(()=>window.scrollTo({top:0,behavior:'smooth'})); return()=>cancelAnimationFrame(id); },[step,fin]); const next=()=>{ if(step===0){setStep(1);return} if(step===1){ /* Beim Pruefen darf auch die behandlungsbezogene Zeile drankommen. */ setZitat(waehle([{t:sel.quote},...ZITATE])); setPhase('check');setTimeout(()=>setPhase('grats'),5000);setTimeout(()=>{setPhase('');setStep(2)},8000);return} if(step===2){if(window.__validate3&&window.__validate3())setStep(3);return} if(step===3){window.__pay&&window.__pay()} }; if(anzStatus)return
; if(fin)return
; return
Online-Buchung

Dein Termin bei La Vie

In vier Schritten gebucht – rund um die Uhr, mit sofortiger Bestätigung.

{step===0&&} {step===1&&{setSlot(s);if(belegtHinweis)setBelegtHinweis('')}} frei={frei} freiLaedt={!!tag&&frei===null} belegtHinweis={belegtHinweis} monat={monat} setMonat={setMonat} tage={tage} tageLaedt={tage===null} horizontBis={horizontBis} weitere={weitere} setWeitere={setWeitere} sel={sel} dauerMin={dauerMin}/>} {step===2&&} {step===3&&{ const antwort=consentSenden(consentRecord(daten,{behandlung:sel.name,datum:tag,uhrzeit:slot,mitarbeiterin:staff,personen:persons, summe:rabattWert(total*persons,codeNorm(daten.code)),summe_vor_rabatt:total*persons,gutschein:codeNorm(daten.code)||undefined, /* Behandlungsdauer für die Kalender-Blockung; bei Erstbesuch legt der Server automatisch 30 Beratungs-Minuten drauf. */ minuten:dauerMin, /* Weitere Termine im Voraus. Der Server legt sie als Serie an und addiert die Anzahlung — die Tage werden ja alle geblockt. */ weitere:weitere.length?weitere:undefined, anzahlung:anzPflicht(total*persons)?ANZ_BETRAG:0})); /* Drei Wege in die Zahlung, und der Server entscheidet welcher: - Anfrage-Tag (Mo/Sa): gar keiner. Erst nach der Bestätigung. - Serie: /zahlung?t= mit der ADDIERTEN Summe. - Einzeltermin: der feste 25-€-Plan wie bisher. */ if(anzPflicht(total*persons)){ Promise.resolve(antwort).then(ant=>{ if(!ant||ant.ok===false)return; if(ant.anfrage)return; if(ant.zahl_token){location.href='/zahlung?t='+ant.zahl_token;return} anzahlungStarten(ant,{email:daten.email,behandlung:sel.name,datum:tag,uhrzeit:slot}); }).catch(()=>{}); } /* Erst der Wartescreen, dann die Bestaetigungsseite. Hier bewusst nur die Zitate der Kundin, keine Kategoriezeile. NEU: Die Serverantwort wird abgewartet — weist der Wächter die Zeit als 'belegt' ab (Rennen zweier Buchungen), geht es zurück zur Zeitwahl statt in eine falsche Bestätigung. Antwort null (offline, Warteschlange) läuft wie bisher weiter. */ setZitat(waehle(ZITATE)); setBuchPhase('senden'); Promise.all([Promise.resolve(antwort).catch(()=>null),new Promise(r=>setTimeout(r,2300))]).then(([ant])=>{ if(ant&&ant.ok===false&&ant.fehler==='belegt'){ setBuchPhase(''); setBelegtHinweis('Diese Zeit wurde gerade eben anderweitig vergeben – bitte wähle einen anderen Slot. Es wurde noch nichts gebucht und nichts bezahlt.'); setSlot('');setFreiV(v=>v+1);setStep(1); return; } setBuchPhase('gebucht'); setTimeout(()=>{setBuchPhase('');setFin(true)},1800); }); }}/>}
{step>0?:}
{sel&&step<2&&
{sel.name}
{sel.dur} · {total*persons} €
} {phase&&} {buchPhase&&}
; } window.MgBuchung=MgBuchung;