[V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" import { submitContactForm } from "@/app/actions" export function ContactForm() { const [isSubmitting, setIsSubmitting] = useState(false) const [privacyConsent, setPrivacyConsent] = useState(false) const { toast } = useToast() async function handleSubmit(event: React.FormEvent) { event.preventDefault() if (!privacyConsent) { toast({ title: "Datenschutz erforderlich", description: "Bitte akzeptieren Sie die Datenschutzerklärung.", variant: "destructive", }) return } setIsSubmitting(true) const formData = new FormData(event.currentTarget) try { const result = await submitContactForm(formData) if (result.success) { toast({ title: "Erfolgreich gesendet!", description: "Vielen Dank für Ihre Nachricht. Wir melden uns bald bei Ihnen.", }) // Reset form event.currentTarget.reset() setPrivacyConsent(false) } else { toast({ title: "Fehler", description: result.error || "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.", variant: "destructive", }) } } catch (error) { toast({ title: "Fehler", description: "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return ( Ihre Kontaktdaten Bitte füllen Sie alle Pflichtfelder (*) aus

Name *

Firma (optional)

Adresse *

Handynummer *

E-Mail-Adresse *

Ihre Nachricht *

</div>

<div className="flex items-start gap-3 pt-2">
            <Checkbox
              id="privacy"
              checked={privacyConsent}
              onCheckedChange={(checked) => setPrivacyConsent(checked as boolean)}
              className="mt-1"
            />
            <Label htmlFor="privacy" className="text-sm leading-relaxed cursor-pointer font-normal">
              Ich stimme der Verarbeitung meiner Daten gemäß der{" "}
              <a href="/datenschutz" className="text-primary underline hover:no-underline">
                Datenschutzerklärung
              </a>{" "}
              zu. *
            </Label>
          </div>

<Button
            type="submit"
            disabled={isSubmitting || !privacyConsent}
            className="w-full h-12 text-base font-semibold bg-accent hover:bg-accent/90 text-accent-foreground"
          >
            {isSubmitting ? "Wird gesendet..." : "Absenden"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]jpg:file="public/modern-house-with-solar-panels-on-roof--sunny-day-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-house-with-solar-panels-on-roof--sunny-day--txhxRYIEiz5UvlOUEBMfRLm0WOvpuS.jpg" isMerged="true"
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Updated theme for solar panel landing page - warm cream background, DVAG gold primary, orange accent */
:root {
  --background: oklch(0.97 0.01 85);
  --foreground: oklch(0.25 0.01 85);
  --card: oklch(0.99 0.005 85);
  --card-foreground: oklch(0.25 0.01 85);
  --popover: oklch(0.99 0.005 85);
  --popover-foreground: oklch(0.25 0.01 85);
  --primary: oklch(0.62 0.16 70);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.92 0.01 85);
  --secondary-foreground: oklch(0.25 0.01 85);
  --muted: oklch(0.94 0.01 85);
  --muted-foreground: oklch(0.5 0.01 85);
  --accent: oklch(0.65 0.15 65);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.88 0.01 85);
  --input: oklch(0.95 0.01 85);
  --ring: oklch(0.62 0.16 70);
  --chart-1: oklch(0.62 0.16 70);
  --chart-2: oklch(0.65 0.15 65);
  --chart-3: oklch(0.5 0.15 200);
  --chart-4: oklch(0.7 0.15 150);
  --chart-5: oklch(0.6 0.2 320);
  --radius: 0.75rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]png:file="public/dvag-logo-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/b21458a6-56b4-4c3e-a154-2aff4fc4ba7f-ZuQ6DluYEni2rrpbc4G4N0AASJRVas.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/impressum/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function ImpressumPage() {
  return (
    <main className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
        <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-4 flex items-center justify-between">
          <a href="/" className="flex items-center gap-3">
            <img
              src="/dvag-logo-new.png"
              alt="DVAG - Deutsche Vermögensberatung"
              className="h-24 w-auto mix-blend-multiply"
            />
          </a>
          <a
            href="/"
            className="px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
          >
            Zurück
          </a>
        </div>
      </header>

<div className="max-w-4xl mx-auto px-4 md:px-8 lg:px-12 py-12">
        <h1 className="text-4xl md:text-5xl font-bold mb-8">Impressum</h1>

<div className="prose prose-lg max-w-none space-y-8">
          <section>
            <h2 className="text-2xl font-semibold mb-4">Geschäftsstelle für Allfinanz Aktiengesellschaft DVAG</h2>
            <p>
              Jasmin Grimm
              <br />
              Butterbergstrasse 12
              <br />
              66557 Illingen
            </p>
            <p>
              Telefon: +49 172 1343760
              <br />
              Mobil: +49 172 1343760
              <br />
              E-Mail: Jasmin.Grimm@allfinanz.ag
            </p>
            <p>
              Aktuelle Infos finden Sie auf meiner Website:{" "}
              <a href="https://www.allfinanz.ag/Jasmin.Grimm" className="text-primary hover:underline">
                www.allfinanz.ag/Jasmin.Grimm
              </a>
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Bürozeiten</h3>
            <p>
              Für ein persönliches Gespräch stehe ich Ihnen gerne zur Verfügung. Vereinbaren Sie einfach einen Termin
              mit mir!
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Versicherungsbereich</h3>
            <p>
              Im Versicherungsbereich als gebundener Vermittler gemäß § 34d Abs. 7 GewO auf Provisionsbasis
              ausschließlich vermittelnd und beratend tätig für die Generali Deutschland Lebensversicherung, Generali
              Deutschland Versicherung, Generali Deutschland Krankenversicherung, Generali Pensionskasse, ADVOCARD
              Rechtsschutzversicherung. Darüber hinaus können in Einzelfällen geldwerte Vorteile in Form von
              Sachleistungen anfallen (z.B. Schulungen sowie Einladungen für die Teilnahme an kulturellen und
              gesellschaftlichen Veranstaltungen, Informationsmaterial, Aufmerksamkeiten).
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Schlichtungsstellen</h3>
            <p>
              Verein Versicherungsombudsmann e.V.
              <br />
              Postfach 080632, 10006 Berlin
            </p>
            <p>
              Ombudsmann Private Kranken- und Pflegeversicherung
              <br />
              Postfach 060222, 10052 Berlin
            </p>
            <p>
              <a href="https://www.versicherungsombudsmann.de" className="text-primary hover:underline">
                www.versicherungsombudsmann.de
              </a>
              ,{" "}
              <a href="https://www.pkv-ombudsmann.de" className="text-primary hover:underline">
                www.pkv-ombudsmann.de
              </a>
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Investmentbereich</h3>
            <p>
              Im Investmentbereich als Finanzanlagenvermittler gemäß § 34f Abs. 1 Nr. 1 GewO nicht unabhängig
              vermittelnd tätig für: DWS Investment GmbH, DWS Investment S.A., Generali Investments Deutschland, Allianz
              Global Investors, Allianz Global Investors Luxembourg, SEB Investment, DWS Grundbesitz GmbH.
            </p>
            <p>
              Die Anlageberatung und Anlagevermittlung zu Investmentfonds erfolgen in deutscher und - soweit mit dem
              Vermögensberater individuell vereinbart - in englischer Sprache. Detaillierte Informationen zu diesen
              Produkten können den Fondsunterlagen (z.B. Prospekt und wesentliche Anlegerinformationen) entnommen
              werden, die kostenlos in deutscher Sprache vom Vermögensberater oder auf der Webseite{" "}
              <a href="https://www.dvag-produktinformationen.de" className="text-primary hover:underline">
                www.dvag-produktinformationen.de
              </a>{" "}
              bereitgestellt werden. Die Kommunikation zwischen Vermögensberater und Kunde erfolgt ausschließlich
              persönlich, postalisch, per E-Mail, Telefon, Video und/ oder Fax.
            </p>
            <p>
              Nach erbrachter Anlageberatung zu Investmentfonds erhalten die Kunden vom Vermögensberater eine Erklärung
              zur Geeignetheit der empfohlenen Produkte und sonstigen Empfehlungen.
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Erlaubnis- und Aufsichtsbehörden</h3>
            <p>
              Erlaubnis- und Aufsichtsbehörde gemäß § 34f GewO:
              <br />
              Landkreis Neunkirchen, Wilhelm-Heinrich-Str. 36, 66564 Ottweiler
            </p>
            <p>
              Erlaubnis- und Aufsichtsbehörde gemäß § 34c GewO:
              <br />
              Landkreis Neunkirchen, Wilhelm-Heinrich-Str. 36, 66564 Ottweiler
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Immobiliarverbraucherdarlehensbereich</h3>
            <p>
              Im Immobiliarverbraucherdarlehensbereich als Immobiliardarlehensvermittler gemäß § 34i Abs. 1 GewO
              vermittelnd tätig für Deutsche Bank AG, Deutsche Bausparkasse Badenia AG, Commerzbank AG, HypoVereinsbank,
              Santander Consumer Bank AG.
            </p>
            <p>
              Erlaubnis- und Aufsichtsbehörde gemäß § 34i GewO:
              <br />
              Landkreis Neunkirchen, Wilhelm-Heinrich-Str. 36, 66564 Ottweiler
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Registerstelle</h3>
            <p>
              Gemeinsame Registerstelle für § 34d GewO, § 34f GewO und § 34i GewO:
              <br />
              Deutsche Industrie- und Handelskammer (DIHK)
              <br />
              Breite Straße 29, 10178 Berlin
              <br />
              Telefon 0180 600585-0 (20 Cent/Anruf)
              <br />
              <a href="https://www.vermittlerregister.info" className="text-primary hover:underline">
                www.vermittlerregister.info
              </a>
            </p>
            <p>
              Registernummer nach § 34d GewO: D-JT0C-JWLB0-04
              <br />
              Registernummer nach § 34f GewO: D-F-170-IBPL-78
              <br />
              Registernummer nach § 34i GewO: D-W-170-UYPH-33
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Haftungshinweis</h3>
            <p>
              Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für
              den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.
            </p>
            <p>
              Die Vermögensberater nehmen keine Kundengelder entgegen. Zahlungen erfolgen direkt von den Kunden an die
              jeweiligen Produktpartner.
            </p>
          </section>

<section>
            <h3 className="text-xl font-semibold mb-3">Datenschutz</h3>
            <p>
              Informationen zur Verarbeitung Ihrer personenbezogenen Daten finden Sie unter{" "}
              <a href="https://www.datenschutz.dvag" className="text-primary hover:underline">
                www.datenschutz.dvag
              </a>
            </p>
          </section>
        </div>
      </div>

<footer className="border-t bg-card mt-12">
        <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} DVAG - Deutsche Vermögensberatung
            </div>
            <div className="flex items-center gap-4">
              <a
                href="/impressum"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors shadow-md"
              >
                Impressum
              </a>
              <a
                href="/datenschutz"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors shadow-md"
              >
                Datenschutz
              </a>
            </div>
          </div>
        </div>
      </footer>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/datenschutz/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function DatenschutzPage() {
  return (
    <main className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
        <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-4 flex items-center justify-between">
          <a href="/" className="flex items-center gap-3">
            <img
              src="/dvag-logo-new.png"
              alt="DVAG - Deutsche Vermögensberatung"
              className="h-24 w-auto mix-blend-multiply"
            />
          </a>
          <a
            href="/"
            className="px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
          >
            Zurück
          </a>
        </div>
      </header>

{/* Content */}
      <div className="max-w-4xl mx-auto px-4 md:px-8 lg:px-12 py-12">
        <h1 className="text-4xl md:text-5xl font-bold mb-8">Datenschutzhinweise</h1>

<div className="prose prose-lg max-w-none space-y-8">
          <div className="bg-card p-6 rounded-lg border">
            <h2 className="text-2xl font-bold mb-4">
              DATENSCHUTZHINWEISE DER ALLFINANZ DEUTSCHE VERMÖGENSBERATUNG AKTIENGESELLSCHAFT
            </h2>
            <p className="text-muted-foreground">
              Informationen zur Verarbeitung Ihrer Daten durch die Allfinanz und durch Vermögensberater
            </p>
          </div>

<section className="space-y-4">
            <p className="leading-relaxed">
              Wenn es um Ihre Finanzen geht, dann ist die Deutsche Vermögensberatung Unternehmensgruppe mit ihren mehr
              als 17.000 bundesweit tätigen Vermögensberatern Ihr zuverlässiger Partner für auf Sie zugeschnittene
              Konzepte zur Vermögenssicherung und -mehrung.
            </p>
            <p className="leading-relaxed">
              Unsere Vermögensberater sind selbständige Berater, die als eigenständige Unternehmer in unseren
              mehrgliedrigen Vertrieb eingebunden sind. Ihnen stehen immer mehrere Berater einer Vertriebsdirektion zur
              Seite und begleiten Sie, bei der Erreichung Ihrer Ziele.
            </p>
            <p className="leading-relaxed">
              Im Folgenden informieren wir Sie darüber, wie wir und die Sie betreuenden Vermögensberater Ihre Daten
              verarbeiten um Sie bestmöglich beraten und unterstützen zu können.
            </p>
          </section>

<section className="space-y-6">
            <h2 className="text-3xl font-bold">1. ALLGEMEINE ANGABEN ZUM VERANTWORTLICHEN</h2>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">
                1.1. Name und Kontaktdaten des für die Verarbeitung Verantwortlichen
              </h3>
              <div className="bg-card p-4 rounded-lg border space-y-2">
                <p className="font-medium">Allfinanz Deutsche Vermögensberatung Aktiengesellschaft</p>
                <p>Wilhelm-Leuschner-Straße 24</p>
                <p>60329 Frankfurt am Main</p>
                <p>Telefon: 069/2384-0</p>
                <p>E-Mail: info@dvag.com</p>
              </div>
              <p className="leading-relaxed">
                Darüber hinaus sind auch die Sie betreuenden Vermögensberater verantwortlich, sofern diese
                personenbezogene Daten zu eigenen Zwecken verarbeiten (z.B. zur Erfüllung von gesetzlichen
                Aufbewahrungsfristen).
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">1.2. Kontaktdaten des Datenschutzbeauftragten</h3>
              <div className="bg-card p-4 rounded-lg border space-y-2">
                <p className="font-medium">Allfinanz Deutsche Vermögensberatung Aktiengesellschaft</p>
                <p>- Datenschutzbeauftragter -</p>
                <p>Wilhelm-Leuschner-Straße 24</p>
                <p>60329 Frankfurt am Main</p>
                <p>E-Mail: datenschutz@dvag.com</p>
              </div>
            </div>
          </section>

<section className="space-y-6">
            <h2 className="text-3xl font-bold">2. INFORMATIONEN ZUR DATENVERARBEITUNG</h2>

<p className="leading-relaxed">
              Als Kunde haben Sie die Wahl, sich für eine individuelle und umfassende Allfinanz-Beratung oder direkt für
              ein einzelnes Produkt bei einem unserer Produktpartner zu entscheiden.
            </p>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">
                2.1. Verarbeitung Ihrer Daten bei der Erstellung einer persönlichen Finanz-Analyse
              </h3>
              <p className="leading-relaxed">
                Entscheiden Sie sich für eine Allfinanz-Beratung, erfasst Ihr Vermögensberater zunächst Ihre finanzielle
                Ist-Situation und Ihre persönlichen Wünsche und Ziele im Rahmen unserer Finanz-Analyse. Neben Ihren
                Stamm- und Kontaktdaten, erhebt Ihr Vermögensberater auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1
                lit. a DSGVO) insbesondere folgende Angaben:
              </p>
              <ul className="list-disc list-inside space-y-2 ml-4">
                <li>Wünsche und Ziele</li>
                <li>Einkommen und Ausgaben</li>
                <li>beruflichen Situation</li>
                <li>bestehenden Vermögensanlagen und Versicherungen</li>
                <li>Wohn- und Familienverhältnissen</li>
                <li>bestehende Rentenansprüche und Altersvorsorge</li>
                <li>laufende Finanzierungen</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">
                2.2. Verarbeitung Ihrer Daten bei der Vermittlung von Versicherungs- und Finanzprodukten und der
                Vertragsbetreuung
              </h3>
              <p className="leading-relaxed">
                Fragen Sie ein konkretes Produkt bei einem Vermögensberater an oder entscheiden sich im Zuge einer
                Allfinanz-Beratung für ein von Ihrem Vermögensberater angebotenes Produkt, verarbeiten wir Ihre Daten
                zum Zwecke der Erstellung eines Angebots bzw. eines Produktantrages. Hierfür benötigen wir weitere,
                produktspezifische Angaben. Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b
                DSGVO.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">2.7. Verarbeitung Ihrer Daten zum Zwecke der Werbung</h3>
              <p className="leading-relaxed">
                Sofern Sie Ihre Einwilligung erteilt haben, verarbeiten wir und der Sie betreuende Vermögensberater Ihre
                Daten auch zum Zwecke der Werbung.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">2.10. Dauer, für die personenbezogene Daten gespeichert werden</h3>
              <p className="leading-relaxed">
                Personenbezogene Daten werden nur solange gespeichert, wie es zur Erfüllung der jeweiligen Zwecke oder
                zur Erfüllung unserer vertraglichen oder gesetzlichen Pflichten erforderlich ist. Wir unterliegen
                verschiedenen Aufbewahrungs- und Dokumentationspflichten. Diese ergeben sich z.B. aus dem
                Handelsgesetzbuch, der Abgabenordnung, dem Geldwäschegesetz und der Verordnung über die
                Finanzanlagenvermittlung sowie der Versicherungsvermittlungsverordnung. Die dort vorgegebenen Fristen
                betragen bis zu zehn Jahre.
              </p>
            </div>
          </section>

<section className="space-y-6">
            <h2 className="text-3xl font-bold">3. IHRE RECHTE</h2>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">
                3.1. Betroffenenrechte, insbesondere auf Auskunft, Löschung und Beschwerde
              </h3>
              <p className="leading-relaxed">Sie haben das Recht</p>
              <ul className="list-disc list-inside space-y-2 ml-4">
                <li>auf Auskunft nach Art. 15 DSGVO,</li>
                <li>auf Berichtigung nach Art. 16 DSGVO,</li>
                <li>auf Löschung nach Art. 17 DSGVO,</li>
                <li>auf Einschränkung der Verarbeitung nach Art. 18 DSGVO</li>
                <li>auf Datenübertragung nach Art. 20 DSGVO.</li>
              </ul>
              <p className="leading-relaxed">
                Für die Rechte auf Auskunft und auf Löschung gelten die Einschränkungen der §§ 34 und 35 BDSG. Darüber
                hinaus haben Sie ein Beschwerderecht nach Art. 77 DSGVO bei einer Datenschutzaufsichtsbehörde gem. § 19
                BDSG.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">3.2. Widerrufsrecht bei Einwilligung</h3>
              <p className="leading-relaxed">
                Verarbeiten wir Ihre Daten auf Grundlage Ihrer Einwilligung, können Sie diese jederzeit mit Wirkung für
                die Zukunft widerrufen. Der Widerruf kann gegenüber Ihrem Vermögensberater oder der Allfinanz Deutsche
                Vermögensberatung Aktiengesellschaft erfolgen. Im Falle eines Widerrufs, werden wir solche Daten, die
                wir auf Grundlage Ihrer Einwilligung verarbeiten löschen.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">3.3. Widerspruchsrecht nach Art. 21 DSGVO</h3>
              <p className="leading-relaxed">
                Verarbeiten wir Ihre Daten auf Grundlage von berechtigten Interessen (Art. 6 Abs. 1 lit. f DSGVO), haben
                Sie das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die
                Verarbeitung Ihrer personenbezogenen Daten Widerspruch einzulegen.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-2xl font-semibold">3.5. Wahrnehmung Ihrer Rechte</h3>
              <p className="leading-relaxed">
                Die vorstehend genannten Rechte, können Sie gegenüber Ihrem Vermögensberater oder der Deutsche
                Vermögensberatung AG wahrnehmen. Dies kann schriftlich an die unter Ziffer 1.2 genannte Adresse oder per
                E-Mail an datenschutz@dvag.com erfolgen.
              </p>
            </div>
          </section>

<div className="mt-12 pt-8 border-t text-sm text-muted-foreground">
            <p>Stand: 09/2021</p>
            <p>DS-005</p>
          </div>
        </div>
      </div>

{/* Footer */}
      <footer className="border-t bg-card mt-12">
        <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} DVAG - Deutsche Vermögensberatung
            </div>
            <div className="flex items-center gap-4">
              <a
                href="/impressum"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors shadow-md"
              >
                Impressum
              </a>
              <a
                href="/datenschutz"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors shadow-md"
              >
                Datenschutz
              </a>
            </div>
          </div>
        </div>
      </footer>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { ContactForm } from "@/components/contact-form"

export default function ContactPage() {
  return (
    <main className="min-h-screen flex items-center justify-center p-4 md:p-8">
      <div className="w-full max-w-6xl grid md:grid-cols-2 gap-8 md:gap-12 items-center">
        <div className="space-y-6">
          <div className="space-y-4">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-balance leading-tight">
              Kontaktieren Sie uns
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground text-pretty leading-relaxed">
              Füllen Sie das Formular aus und wir melden uns schnellstmöglich bei Ihnen. Ihre Daten werden sicher und
              vertraulich behandelt.
            </p>
          </div>

<div className="space-y-4 pt-4">
            <div className="flex items-start gap-3">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold mb-1">Schnelle Antwort</h3>
                <p className="text-sm text-muted-foreground">Wir antworten innerhalb von 2 Werktagen</p>
              </div>
            </div>

<div className="flex items-start gap-3">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                  />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold mb-1">Datenschutz</h3>
                <p className="text-sm text-muted-foreground">Ihre Daten sind bei uns sicher</p>
              </div>
            </div>
          </div>
        </div>

<ContactForm />
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/actions.tsx" isEdit="true" isMerged="true"
"use server"

import { Resend } from "resend"

export async function submitSolarQuote(formData: FormData) {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const phone = formData.get("phone") as string
  const abschlag = formData.get("abschlag") as string
  const consumption = formData.get("consumption") as string
  const heatingCosts = formData.get("heatingCosts") as string
  const fuelPrice = formData.get("fuelPrice") as string
  const address = formData.get("address") as string
  const message = formData.get("message") as string

if (!process.env.RESEND_API_KEY) {
    return {
      success: false,
      error: "E-Mail-Konfiguration fehlt. Bitte RESEND_API_KEY hinzufügen.",
    }
  }

try {
    const resend = new Resend(process.env.RESEND_API_KEY)

const { error } = await resend.emails.send({
      from: "Photovoltaik Anfrage <onboarding@resend.dev>",
      to: "enpal919@outlook.de",
      subject: `Neue Photovoltaik-Anfrage von ${name}`,
      html: `
        <h2>Neue Photovoltaik-Anfrage</h2>
        
        <h3>Kontaktdaten:</h3>
        <ul>
          <li><strong>Name:</strong> ${name}</li>
          <li><strong>E-Mail:</strong> ${email}</li>
          <li><strong>Telefon:</strong> ${phone}</li>
          <li><strong>Adresse:</strong> ${address}</li>
        </ul>
        
        <h3>Energiedaten:</h3>
        <ul>
          <li><strong>Monatliche Stromkosten (Abschlag):</strong> ${abschlag} €</li>
          <li><strong>Jährlicher Stromverbrauch:</strong> ${consumption} kWh</li>
          <li><strong>Monatliche Heizkosten:</strong> ${heatingCosts} €</li>
          ${fuelPrice ? `<li><strong>Preis pro Liter Heizöl/Gas:</strong> ${fuelPrice} €</li>` : ""}
        </ul>
        
        ${message ? `<h3>Zusätzliche Informationen:</h3><p>${message}</p>` : ""}
      `,
    })

if (error) {
      return {
        success: false,
        error: "E-Mail konnte nicht versendet werden. Bitte versuchen Sie es später erneut.",
      }
    }

return { success: true }
  } catch (error) {
    return {
      success: false,
      error: "Ein unerwarteter Fehler ist aufgetreten.",
    }
  }
}

export async function submitContactForm(formData: FormData) {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string

if (!process.env.RESEND_API_KEY) {
    return {
      success: false,
      error: "E-Mail-Konfiguration fehlt.",
    }
  }

try {
    const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
      from: "Kontaktformular <onboarding@resend.dev>",
      to: "enpal919@outlook.de",
      subject: `Neue Kontaktanfrage von ${name}`,
      html: `
        <h2>Neue Kontaktanfrage</h2>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>E-Mail:</strong> ${email}</p>
        <p><strong>Nachricht:</strong></p>
        <p>${message}</p>
      `,
    })

return { success: true }
  } catch (error) {
    return { success: false, error: "Fehler beim Senden." }
  }
}
[V0_FILE]typescript:file="next.config.mjs" isEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'hebbkx1anhila5yf.public.blob.vercel-storage.com',
      },
    ],
  },
  reactStrictMode: true,
}

export default nextConfig
[V0_FILE]json:file=".npmrc" isMerged="true"
shamefully-hoist=true
strict-peer-dependencies=false
auto-install-peers=true
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "packageManager": "pnpm@9.15.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "4.1.0",
    "geist": "^1.3.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "resend": "6.1.2",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "3.25.67",
    "child_process": "1.0.2"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5",
    "postcss": "8.5.6"
  }
}
[V0_FILE]json:file="vercel.json" isMerged="true"
{
  "framework": "nextjs"
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Photovoltaik-Anlage | DVAG & Enpal - Kostenlosen Kostenvoranschlag anfordern",
  description:
    "Holen Sie sich jetzt Ihren kostenlosen Photovoltaik-Kostenvoranschlag von DVAG und Enpal. Senken Sie Ihre Stromkosten um bis zu 70% mit sauberer Solarenergie.",
  generator: "v0.app",
  icons: {
    icon: "/icon.svg",
  },
  openGraph: {
    title: "Photovoltaik-Anlage | DVAG & Enpal",
    description: "Kostenlosen Kostenvoranschlag für Ihre Solaranlage anfordern",
    type: "website",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="de">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { SolarQuoteForm } from "@/components/solar-quote-form"
import { Sun, Zap, TrendingDown, Shield } from "lucide-react"
import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"

export default function Home() {
  const [isScrolled, setIsScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <main className="min-h-screen">
      <header
        className={`sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b transition-all duration-300 ${isScrolled ? "py-2" : "py-4"}`}
      >
        <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3" aria-label="Zur Startseite">
            <Image
              src="/dvag-logo-new.png"
              alt="DVAG - Deutsche Vermögensberatung"
              width={400}
              height={isScrolled ? 128 : 160}
              className={`w-auto mix-blend-multiply transition-all duration-300 ${isScrolled ? "h-32" : "h-40"}`}
              priority
            />
          </Link>
          <a
            href="#kostenvoranschlag"
            className="px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
            aria-label="Zum Formular für Kostenvoranschlag springen"
          >
            Kostenvoranschlag anfordern
          </a>
        </div>
      </header>

<section className="relative py-20 px-4 md:px-8 lg:px-12">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full text-sm font-medium text-primary">
                <Sun className="w-4 h-4" />
                Nachhaltige Energie für Ihr Zuhause
              </div>
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-balance leading-tight">
                Ihre Photovoltaik-Anlage von Enpal
              </h1>
              <p className="text-xl text-muted-foreground text-pretty leading-relaxed">
                Profitieren Sie von sauberer Energie und senken Sie Ihre Stromkosten. Holen Sie sich jetzt Ihren
                kostenlosen Kostenvoranschlag von DVAG und Enpal.
              </p>
              <div className="flex flex-wrap gap-4 pt-4">
                <div className="flex items-center gap-2 text-sm">
                  <div className="w-2 h-2 bg-primary rounded-full" />
                  <span>Kostenlose Beratung</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <div className="w-2 h-2 bg-primary rounded-full" />
                  <span>Unverbindliches Angebot</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <div className="w-2 h-2 bg-primary rounded-full" />
                  <span>Schnelle Rückmeldung</span>
                </div>
              </div>
            </div>
            <div className="relative">
              <div className="aspect-square rounded-2xl bg-gradient-to-br from-primary/20 to-accent/20 p-8 flex items-center justify-center">
                <Image
                  src="/modern-house-with-solar-panels-on-roof--sunny-day-.jpg"
                  alt="Haus mit Photovoltaik-Anlage"
                  width={600}
                  height={600}
                  className="w-full h-full object-cover rounded-xl"
                  priority
                />
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="py-16 px-4 md:px-8 lg:px-12 bg-card">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 text-balance">Warum Photovoltaik?</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="space-y-4">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <TrendingDown className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-semibold">Kosten senken</h3>
              <p className="text-muted-foreground leading-relaxed">
                Reduzieren Sie Ihre Stromrechnung um bis zu 70% und werden Sie unabhängiger von steigenden
                Energiepreisen.
              </p>
            </div>
            <div className="space-y-4">
              <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <Sun className="w-6 h-6 text-accent" />
              </div>
              <h3 className="text-xl font-semibold">Umweltfreundlich</h3>
              <p className="text-muted-foreground leading-relaxed">
                Produzieren Sie saubere Energie und leisten Sie einen wichtigen Beitrag zum Klimaschutz.
              </p>
            </div>
            <div className="space-y-4">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <Zap className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-semibold">Wertsteigerung</h3>
              <p className="text-muted-foreground leading-relaxed">
                Erhöhen Sie den Wert Ihrer Immobilie durch moderne und nachhaltige Energietechnik.
              </p>
            </div>
            <div className="space-y-4">
              <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <Shield className="w-6 h-6 text-accent" />
              </div>
              <h3 className="text-xl font-semibold">Rundum-Service</h3>
              <p className="text-muted-foreground leading-relaxed">
                Von der Planung bis zur Installation - Enpal kümmert sich um alles für Sie.
              </p>
            </div>
          </div>
        </div>
      </section>

<section className="py-20 px-4 md:px-8 lg:px-12" id="kostenvoranschlag">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12 space-y-4">
            <h2 className="text-4xl md:text-5xl font-bold text-balance">
              Jetzt kostenlosen Kostenvoranschlag anfordern
            </h2>
            <p className="text-xl text-muted-foreground text-pretty">
              Füllen Sie das Formular aus und erhalten Sie Ihren individuellen Kostenvoranschlag per E-Mail innerhalb
              von 2 Werktagen.
            </p>
          </div>
          <SolarQuoteForm />
          <div className="mt-8 text-center text-sm text-muted-foreground">
            <p>Eine Kooperation von</p>
            <div className="flex items-center justify-center gap-6 mt-4">
              <span className="text-lg font-semibold text-foreground">DVAG</span>
              <span className="text-muted-foreground">×</span>
              <span className="text-lg font-semibold text-foreground">Enpal</span>
            </div>
          </div>
        </div>
      </section>

<footer className="border-t bg-card">
        <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} DVAG - Deutsche Vermögensberatung
            </div>
            <div className="flex items-center gap-4">
              <a
                href="/impressum"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors shadow-md"
                aria-label="Impressum aufrufen"
              >
                Impressum
              </a>
              <a
                href="/datenschutz"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors shadow-md"
                aria-label="Datenschutzerklärung aufrufen"
              >
                Datenschutz
              </a>
            </div>
          </div>
        </div>
      </footer>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/solar-quote-form.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { submitSolarQuote } from "@/app/actions"
import { Loader2 } from "lucide-react"

export function SolarQuoteForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)
  const [phoneError, setPhoneError] = useState("")
  const [errorMessage, setErrorMessage] = useState("")

function validatePhone(phone: string): boolean {
    const cleanPhone = phone.replace(/[\s\-()]/g, "")
    // Accept international format (+XX...) or local format starting with 0
    // Must have 7-15 digits after country code
    const phoneRegex = /^(\+\d{1,3}|0)\d{6,14}$/
    return phoneRegex.test(cleanPhone)
  }

function handlePhoneBlur(e: React.FocusEvent<HTMLInputElement>) {
    const phone = e.target.value
    if (phone && !validatePhone(phone)) {
      setPhoneError("Bitte geben Sie eine gültige Telefonnummer ein (z.B. +49 123 456789 oder +43 664 1234567)")
    } else {
      setPhoneError("")
    }
  }

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const phone = formData.get("phone") as string

if (!validatePhone(phone)) {
      setPhoneError("Bitte geben Sie eine gültige Telefonnummer ein (z.B. +49 123 456789 oder +43 664 1234567)")
      return
    }

setIsSubmitting(true)
    setErrorMessage("")

const result = await submitSolarQuote(formData)

setIsSubmitting(false)

if (result.success) {
      setIsSuccess(true)
      setPhoneError("")
      ;(e.target as HTMLFormElement).reset()
      setTimeout(() => setIsSuccess(false), 5000)
    } else {
      setErrorMessage(result.error || "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.")
    }
  }

return (
    <div className="bg-card rounded-2xl p-8 md:p-10 shadow-sm border border-border">
      {isSuccess ? (
        <div className="text-center py-12 space-y-4">
          <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto">
            <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h3 className="text-2xl font-bold">Vielen Dank!</h3>
          <p className="text-muted-foreground">
            Ihre Anfrage wurde erfolgreich übermittelt. Sie erhalten Ihren Kostenvoranschlag per E-Mail innerhalb von 2
            Werktagen.
          </p>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="name">Vor- und Nachname *</Label>
              <Input id="name" name="name" placeholder="Max Mustermann" required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">E-Mail-Adresse *</Label>
              <Input id="email" name="email" type="email" placeholder="max@beispiel.de" required />
            </div>
          </div>

<div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="phone">Telefonnummer *</Label>
              <Input
                id="phone"
                name="phone"
                type="tel"
                placeholder="+49 123 456789"
                required
                onBlur={handlePhoneBlur}
                className={phoneError ? "border-red-500 focus-visible:ring-red-500" : ""}
              />
              {phoneError && <p className="text-sm text-red-500">{phoneError}</p>}
            </div>
            <div className="space-y-2">
              <Label htmlFor="abschlag">Abschlag (monatliche Stromkosten) *</Label>
              <Input id="abschlag" name="abschlag" type="number" placeholder="z.B. 120" required />
            </div>
          </div>

<div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="consumption">Jährlicher Stromverbrauch (kWh) *</Label>
              <Input id="consumption" name="consumption" type="number" placeholder="z.B. 4000" required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="heatingCosts">Monatliche Heizkosten *</Label>
              <Input id="heatingCosts" name="heatingCosts" type="number" placeholder="z.B. 150" required />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="fuelPrice">Preis pro Liter Heizöl/Gas (optional)</Label>
            <Input id="fuelPrice" name="fuelPrice" type="number" step="0.01" placeholder="z.B. 1.20" />
          </div>

<div className="space-y-2">
            <Label htmlFor="address">Adresse der Immobilie *</Label>
            <Input id="address" name="address" placeholder="Straße, Hausnummer, PLZ, Ort" required />
          </div>

<div className="space-y-2">
            <Label htmlFor="message">Zusätzliche Informationen (optional)</Label>
            <Textarea id="message" name="message" placeholder="Haben Sie besondere Wünsche oder Fragen?" rows={4} />
          </div>

<div className="flex items-start gap-3 pt-2">
            <Checkbox id="privacy" name="privacy" required className="mt-1" />
            <Label htmlFor="privacy" className="text-sm leading-relaxed cursor-pointer">
              Ich stimme zu, dass meine Daten zur Bearbeitung meiner Anfrage gespeichert und verarbeitet werden. Die
              Einwilligung kann jederzeit widerrufen werden. *
            </Label>
          </div>

<Button type="submit" size="lg" className="w-full text-base" disabled={isSubmitting}>
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Wird gesendet...
              </>
            ) : (
              "Kostenlosen Kostenvoranschlag anfordern"
            )}
          </Button>

{errorMessage && <p className="text-sm text-red-500 text-center">{errorMessage}</p>}

<p className="text-sm text-muted-foreground text-center">Sie erhalten Ihren Kostenvoranschlag per E-Mail</p>

<p className="text-xs text-muted-foreground text-center">* Pflichtfelder</p>
        </form>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sticky-cta.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { ArrowRight } from "lucide-react"

export function StickyCTA() {
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    const toggleVisibility = () => {
      if (window.scrollY > 300) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }

window.addEventListener("scroll", toggleVisibility)
    return () => window.removeEventListener("scroll", toggleVisibility)
  }, [])

const scrollToForm = () => {
    const formSection = document.getElementById("kostenvoranschlag")
    if (formSection) {
      formSection.scrollIntoView({ behavior: "smooth", block: "start" })
    }
  }

return (
    <button
      onClick={scrollToForm}
      className={`fixed bottom-6 right-6 z-40 px-6 py-4 bg-primary text-primary-foreground rounded-full font-semibold shadow-lg hover:bg-primary/90 transition-all duration-300 flex items-center gap-2 ${
        isVisible ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0 pointer-events-none"
      }`}
      aria-label="Zum Kostenvoranschlag-Formular scrollen"
    >
      <span className="hidden sm:inline">Jetzt Kostenvoranschlag anfordern</span>
      <span className="sm:hidden">Kostenvoranschlag</span>
      <ArrowRight className="w-5 h-5" />
    </button>
  )
}</article></body></html>