fix: "Passwort vergessen" schob sich ueber das CAPTCHA

Im Anmeldeformular standen CAPTCHA, Absenden-Knopf und der
"Passwort vergessen"-Link in EINER Flex-Zeile ohne Umbruch:

    <div className="flex items-center justify-between gap-4">

Das Turnstile-Widget ist ein iframe mit FESTER Breite von rund 300 px und
schrumpft nicht mit. Die Zeile steht zudem in einer der beiden Spalten
der Kontoseite, hat also nur die halbe Breite zur Verfuegung. Der Platz
reichte daher nie — die Elemente schoben sich uebereinander, und zwar
nicht nur auf schmalen Bildschirmen.

Jetzt steht das Widget auf einer eigenen Zeile, Knopf und Link darunter
in einer Zeile mit "flex-wrap". Das Registrierungsformular daneben hat es
schon immer so gemacht; die beiden sind damit endlich gleich aufgebaut.

Damit das an keiner Stelle wiederkommen kann, traegt das Widget selbst
jetzt "w-fit max-w-full overflow-x-auto". Das ist kein Schoenheitsmittel,
sondern eine Zusicherung: der iframe bleibt in jedem Fall innerhalb
seines Kastens. Ist der zu schmal, laesst sich der Inhalt seitlich
schieben, statt das Layout zu zerlegen — unabhaengig davon, wie eine
kuenftige Seite ihn einbettet.

Die uebrigen sieben Einbindungen (Registrierung, Passwort vergessen,
Passwort zuruecksetzen, Zwei-Faktor-Code, Produktseite, Firmenanfrage,
Newsletter, Checkout) habe ich geprueft: dort steht das Widget bereits
auf einer eigenen Zeile.

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

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/app/konto/page.tsx

@@ -47,10 +47,17 @@ export default async function KontoPage(props: PageProps<"/konto">) {
               <h2 className="text-lg text-forest">{t.account.login}</h2>
               <Field name="email" label={t.account.emailLabel} type="email" required autoComplete="email" />
               <PasswordField name="password" label={t.account.passwordLabel} required autoComplete="current-password" />
-              <div className="flex items-center justify-between gap-4">
+              {/* Das Turnstile-Widget ist ein iframe mit FESTER Breite (rund
+                  300 px) und kann nicht mitschrumpfen. In einer Zeile mit
+                  Knopf und Link — noch dazu in einer der beiden Spalten
+                  dieser Seite — reichte der Platz nie: die Elemente schoben
+                  sich uebereinander. Deshalb steht es auf einer eigenen
+                  Zeile, und Knopf und Link duerfen darunter umbrechen. Das
+                  Registrierungsformular daneben macht es schon immer so. */}
               {process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ? (
                 <TurnstileField siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
               ) : null}
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
                 <Button type="submit">{t.account.login}</Button>
                 <Link href="/konto/passwort-vergessen" className="text-xs text-ink/65 hover:text-forest underline">
                   {t.account.forgotPassword}

src/components/turnstile-widget.tsx

@@ -166,8 +166,17 @@ export function TurnstileWidget({ siteKey, onVerify }: TurnstileWidgetProps) {
     };
   }, [siteKey, attempt]);
 
+  // "max-w-full overflow-x-auto" ist kein Schoenheitsmittel, sondern eine
+  // Zusicherung: Cloudflare liefert einen iframe mit FESTER Breite (rund
+  // 300 px), der nicht mitschrumpft. Steht er in einem schmaleren Kasten,
+  // ragt er heraus und schiebt sich ueber das, was daneben liegt — auf der
+  // Kontoseite traf das den "Passwort vergessen"-Link. Mit diesen Klassen
+  // bleibt er in jedem Fall innerhalb seines Kastens; ist der zu schmal,
+  // laesst sich der Inhalt seitlich schieben, statt das Layout zu zerlegen.
+  // "w-fit" verhindert zugleich, dass der Kasten in einer Flex-Zeile mehr
+  // Platz beansprucht als der iframe braucht.
   return (
-    <div>
+    <div className="w-fit max-w-full overflow-x-auto">
       <div ref={containerRef} />
       {failed ? (
         <p className="text-sm text-red-700">