From 256e823c4faaca20ba1aaf87450795cd48dc49f1 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sun, 20 Sep 2026 04:44:09 +0200
Subject: [PATCH] fix: Erntepost-Eingabefeld war auf 34 px zusammengedrueckt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Regression aus dem vorigen Commit (Turnstile per Prop statt process.env):
sobald das CAPTCHA auf der Newsletter-Anmeldung tatsaechlich rendert, sprengt
es die Eingabezeile.

Das Formular war "flex flex-col sm:flex-row gap-3 max-w-lg" ohne flex-wrap,
und das Widget lag als dritter Eintrag in derselben Zeile. Ab 640 px teilten
sich damit Eingabefeld, Knopf und ein rund 300 px breites CAPTCHA eine Zeile
von 512 px. Auf wabenhain.com bei 1440 px nachgemessen: Eingabefeld 34x71,
Knopf 174x71, CAPTCHA 300x71.

Solange kein Sitekey ankam, fiel das nicht auf — das Widget erschien nie, die
Zeile hatte nur zwei Eintraege. Der Fehler lag also schon laenger im Markup
und wurde erst sichtbar, als das CAPTCHA wie vorgesehen erschien.

Jetzt bilden Eingabefeld und Knopf eine eigene Zeile, das CAPTCHA steht
darunter. Die Firmenanfrage ist nicht betroffen, sie stapelt ueber space-y-5.

Dazu zwei Einstellungen am Widget selbst, die von Anfang an gefehlt haben:

- language: Turnstile folgte der BROWSER-Sprache statt der Seitensprache. Auf
  der deutschen Seite stand englisch "Verify you are human".
- theme: "light": Turnstile folgte dem Farbschema des Betriebssystems. Wer es
  auf "dunkel" stehen hat, bekam einen schwarzen Kasten mitten in einen
  Abschnitt, den diese Seite ausschliesslich in Creme und Waldgruen zeichnet.
  Die Seite hat keinen Dunkelmodus, "auto" ist hier also immer falsch.

Beides betrifft alle Formulare, nicht nur den Newsletter.

tsc: 0 Fehler. vitest: 359/359 gruen. eslint: 0 Warnungen. next build: gruen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/newsletter-signup.tsx | 16 +++++++++++-----
 src/components/turnstile-widget.tsx  | 13 +++++++++++--
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/newsletter-signup.tsx b/src/components/newsletter-signup.tsx
index 407543b..325eeba 100644
--- a/src/components/newsletter-signup.tsx
+++ b/src/components/newsletter-signup.tsx
@@ -63,10 +63,15 @@ export function NewsletterSignup({ turnstileSiteKey }: { turnstileSiteKey?: stri
           {status === "success" ? (
             <p className="mt-8 text-forest">{t.home.newsletter.successMessage}</p>
           ) : (
-            <form
-              onSubmit={handleSubmit}
-              className="mt-8 flex flex-col sm:flex-row gap-3 max-w-lg mx-auto"
-            >
+            <form onSubmit={handleSubmit} className="mt-8 max-w-lg mx-auto">
+              {/* Eingabefeld und Knopf bilden die Zeile, das CAPTCHA steht
+                  darunter. Frueher lagen alle drei in derselben Flex-Zeile
+                  ohne flex-wrap: sobald das Widget tatsaechlich rendert,
+                  belegte es rund 300 px der 512 px breiten Zeile und drueckte
+                  das Eingabefeld auf 34 px zusammen. Solange kein Sitekey
+                  gesetzt war, fiel das nicht auf, weil das Widget gar nicht
+                  erst erschien. */}
+              <div className="flex flex-col sm:flex-row gap-3">
               <input
                 type="email"
                 required
@@ -78,8 +83,9 @@ export function NewsletterSignup({ turnstileSiteKey }: { turnstileSiteKey?: stri
               <Button type="submit" disabled={status === "loading"} className="flex-shrink-0 whitespace-nowrap">
                 {status === "loading" ? t.home.newsletter.subscribing : t.home.newsletter.subscribe}
               </Button>
+              </div>
               {turnstileSiteKey ? (
-                <div className="w-full flex justify-center">
+                <div className="mt-3 flex justify-center">
                   <TurnstileWidget siteKey={turnstileSiteKey} onVerify={setTurnstileToken} />
                 </div>
               ) : null}
diff --git a/src/components/turnstile-widget.tsx b/src/components/turnstile-widget.tsx
index e3ff055..16c2d14 100644
--- a/src/components/turnstile-widget.tsx
+++ b/src/components/turnstile-widget.tsx
@@ -110,7 +110,7 @@ interface TurnstileWidgetProps {
  * Wiederholung unten.
  */
 export function TurnstileWidget({ siteKey, onVerify }: TurnstileWidgetProps) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const containerRef = useRef<HTMLDivElement>(null);
   const widgetIdRef = useRef<string | null>(null);
   const onVerifyRef = useRef(onVerify);
@@ -138,6 +138,15 @@ export function TurnstileWidget({ siteKey, onVerify }: TurnstileWidgetProps) {
         setFailed(false);
         widgetIdRef.current = turnstile.render(containerRef.current, {
           sitekey: siteKey,
+          // Ohne diese beiden Angaben richtet sich Turnstile nach dem BROWSER
+          // des Besuchers statt nach der Seite: die Beschriftung folgte der
+          // Browsersprache (englisches "Verify you are human" auf einer
+          // deutschen Seite) und die Farbgebung dem Farbschema des
+          // Betriebssystems. Wer sein System auf "dunkel" stehen hat, bekam
+          // deshalb einen schwarzen Kasten mitten in einen Abschnitt, den
+          // diese Seite ausschliesslich in Creme und Waldgruen zeichnet.
+          language: locale,
+          theme: "light",
           callback: (token: string) => onVerifyRef.current(token),
           // Ein abgelaufenes oder fehlgeschlagenes Token muss das Formular
           // erfahren, sonst schickt es ein laengst ungueltiges mit.
@@ -164,7 +173,7 @@ export function TurnstileWidget({ siteKey, onVerify }: TurnstileWidgetProps) {
         console.warn("[turnstile] Widget konnte nicht entfernt werden:", error);
       }
     };
-  }, [siteKey, attempt]);
+  }, [siteKey, attempt, locale]);
 
   // "max-w-full overflow-x-auto" ist kein Schoenheitsmittel, sondern eine
   // Zusicherung: Cloudflare liefert einen iframe mit FESTER Breite (rund