Wasserzähler QR-Code System + Serienbrief + Admin Import

- Wasserzähler-Stammdaten Import (Drag & Drop Excel/CSV)
- QR-Code Druckseite mit Browser-Vorschau
- QR-Code Excel Download (ExcelJS, eingebettete QR-PNGs)
- Serienbrief wie Vorlage wasserablesung.pdf
  - HTML-Vorschau (max 20) + PDF Download (PDFKit, 1000+ skalierbar)
  - Antwortkarte mit QR-Code, Briefmarke, Zählerdaten
- Bürgerseite: nur Kundennr./Zählernr./Stand (Datenschutz)
- Kundennummer + letzter_stand + letzte_ablesung zum Schema
- Bürgermeister: Patrick Krutzler
- CAPTCHA verify API Route

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

src/app/admin/login/page.tsx

@@ -1,22 +1,92 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import Script from 'next/script';
 import { createClient } from '@/lib/supabase/client';
 import Header from '@/components/Header';
 
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (container: string | HTMLElement, options: {
+        sitekey: string;
+        callback: (token: string) => void;
+        'expired-callback': () => void;
+        'error-callback': () => void;
+        theme?: 'light' | 'dark' | 'auto';
+        language?: string;
+      }) => string;
+      reset: (widgetId: string) => void;
+    };
+  }
+}
+
 export default function AdminLoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const [captchaToken, setCaptchaToken] = useState('');
+  const [turnstileReady, setTurnstileReady] = useState(false);
+  const turnstileWidgetId = useRef<string | null>(null);
+  const turnstileContainerRef = useRef<HTMLDivElement>(null);
+
+  const renderTurnstile = useCallback(() => {
+    if (window.turnstile && turnstileContainerRef.current && !turnstileWidgetId.current) {
+      turnstileWidgetId.current = window.turnstile.render(turnstileContainerRef.current, {
+        sitekey: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || '',
+        callback: (token: string) => setCaptchaToken(token),
+        'expired-callback': () => setCaptchaToken(''),
+        'error-callback': () => setCaptchaToken(''),
+        theme: 'light',
+        language: 'de',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (turnstileReady) {
+      const timer = setTimeout(renderTurnstile, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [turnstileReady, renderTurnstile]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+
+    if (!captchaToken) {
+      setError('Bitte bestätigen Sie das CAPTCHA.');
+      return;
+    }
+
     setLoading(true);
 
+    // CAPTCHA serverseitig verifizieren
+    try {
+      const verifyRes = await fetch('/api/verify-captcha', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ captchaToken }),
+      });
+
+      if (!verifyRes.ok) {
+        setError('CAPTCHA-Verifizierung fehlgeschlagen. Bitte versuchen Sie es erneut.');
+        setCaptchaToken('');
+        if (turnstileWidgetId.current && window.turnstile) {
+          window.turnstile.reset(turnstileWidgetId.current);
+        }
+        setLoading(false);
+        return;
+      }
+    } catch {
+      setError('Verbindungsfehler. Bitte versuchen Sie es erneut.');
+      setLoading(false);
+      return;
+    }
+
     const supabase = createClient();
     const { error: authError } = await supabase.auth.signInWithPassword({
       email,
@@ -25,6 +95,10 @@ export default function AdminLoginPage() {
 
     if (authError) {
       setError('Ungültige Anmeldedaten. Bitte versuchen Sie es erneut.');
+      setCaptchaToken('');
+      if (turnstileWidgetId.current && window.turnstile) {
+        window.turnstile.reset(turnstileWidgetId.current);
+      }
       setLoading(false);
       return;
     }
@@ -34,6 +108,11 @@ export default function AdminLoginPage() {
 
   return (
     <div className="min-h-screen flex flex-col bg-bg">
+      <Script
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+        strategy="afterInteractive"
+        onReady={() => setTurnstileReady(true)}
+      />
       <Header back={{ href: '/', label: 'Zurück' }} />
       <main className="flex-1 flex items-center justify-center px-4 py-12">
         <div className="bg-white rounded-2xl border border-border shadow-sm p-8 max-w-sm w-full animate-slide-up">
@@ -77,6 +156,9 @@ export default function AdminLoginPage() {
               />
             </div>
 
+            {/* Turnstile CAPTCHA */}
+            <div ref={turnstileContainerRef} className="flex justify-center" />
+
             {error && (
               <div className="p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
                 {error}
@@ -85,7 +167,7 @@ export default function AdminLoginPage() {
 
             <button
               type="submit"
-              disabled={loading}
+              disabled={loading || !captchaToken}
               className="w-full bg-primary text-white py-3.5 rounded-xl font-semibold hover:bg-primary-light active:scale-[0.98] transition-all disabled:opacity-50"
             >
               {loading ? (