From ca30fde467002351a86c4916f3e840aed53e8a62 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 17 May 2026 19:56:39 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Turnstile=20explizit=20rendern=20bei=20M?=
 =?UTF-8?q?odal-=C3=96ffnung,=20autocomplete-Attribute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/+page.svelte | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 9252a50..efc7083 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -44,20 +44,38 @@
 	let formDone    = $state(false);
 	let formError   = $state('');
 
+	let turnstileToken = $state('');
+
 	function openModal(plan = '') {
 		modalPlan = plan;
 		formDone = false;
 		formError = '';
+		turnstileToken = '';
 		showModal = true;
+		setTimeout(() => {
+			const ts = (window as any).turnstile;
+			if (!ts) return;
+			const el = document.querySelector('.cf-turnstile');
+			if (el && !el.hasChildNodes()) {
+				ts.render(el, {
+					sitekey: PUBLIC_TURNSTILE_SITE_KEY,
+					theme: 'light',
+					callback: (t: string) => { turnstileToken = t; }
+				});
+			}
+		}, 80);
 	}
 
-	function closeModal() { showModal = false; }
+	function closeModal() {
+		showModal = false;
+		(window as any).turnstile?.remove('.cf-turnstile');
+	}
 
 	async function submitForm() {
 		if (!formName.trim() || !formEmail.trim()) { formError = 'Bitte Name und E-Mail ausfüllen.'; return; }
 		formSending = true; formError = '';
 		try {
-			const token = (window as any).turnstile?.getResponse() ?? '';
+			const token = turnstileToken;
 			const res = await fetch('/api/contact', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
@@ -426,28 +444,28 @@
 				<div class="modal-row">
 					<div class="modal-field">
 						<label for="m-name">Name *</label>
-						<input id="m-name" type="text" placeholder="Max Mustermann" bind:value={formName} />
+						<input id="m-name" type="text" autocomplete="name" placeholder="Max Mustermann" bind:value={formName} />
 					</div>
 					<div class="modal-field">
 						<label for="m-company">Firma</label>
-						<input id="m-company" type="text" placeholder="Muster Prüfdienste GmbH" bind:value={formCompany} />
+						<input id="m-company" type="text" autocomplete="organization" placeholder="Muster Prüfdienste GmbH" bind:value={formCompany} />
 					</div>
 				</div>
 				<div class="modal-row">
 					<div class="modal-field">
 						<label for="m-email">E-Mail *</label>
-						<input id="m-email" type="email" placeholder="max@beispiel.de" bind:value={formEmail} />
+						<input id="m-email" type="email" autocomplete="email" placeholder="max@beispiel.de" bind:value={formEmail} />
 					</div>
 					<div class="modal-field">
 						<label for="m-phone">Telefon</label>
-						<input id="m-phone" type="tel" placeholder="+49 123 456789" bind:value={formPhone} />
+						<input id="m-phone" type="tel" autocomplete="tel" placeholder="+49 123 456789" bind:value={formPhone} />
 					</div>
 				</div>
 				<div class="modal-field">
 					<label for="m-msg">Nachricht (optional)</label>
 					<textarea id="m-msg" rows="3" placeholder="Wie viele Kunden betreuen Sie? Welche Branche?" bind:value={formMsg}></textarea>
 				</div>
-				<div class="cf-turnstile" data-sitekey={PUBLIC_TURNSTILE_SITE_KEY} data-theme="light"></div>
+				<div class="cf-turnstile"></div>
 				{#if formError}<p class="modal-error">{formError}</p>{/if}
 				<button type="submit" class="btn-primary" disabled={formSending}>
 					{formSending ? 'Wird gesendet…' : 'Anfrage senden'}