diff --git a/.env.example b/.env.example
index d8f292f7..db14d044 100644
--- a/.env.example
+++ b/.env.example
@@ -4,3 +4,12 @@ WORDPRESS_HOSTNAME="wordpress.com"
 # If using the revalidate plugin
 # You can generate by running `openssl rand -base64 32` in the terminal
 WORDPRESS_WEBHOOK_SECRET="your-secret-key-here"
+
+# Terminannahme (server-only, niemals im Browser verwenden)
+APPOINTMENT_API_TOKEN="your-appointment-api-token"
+APPOINTMENT_SMTP_HOST="smtp.example.de"
+APPOINTMENT_SMTP_USER="termin@example.de"
+APPOINTMENT_SMTP_PASSWORD="your-smtp-password"
+
+# Öffentliche kanonische URL
+NEXT_PUBLIC_SITE_URL="https://www.fahrschule-bz-ucar.de"
diff --git a/app/api/appointments/route.ts b/app/api/appointments/route.ts
new file mode 100644
index 00000000..66eb6c89
--- /dev/null
+++ b/app/api/appointments/route.ts
@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+
+const requiredFields = ["name", "email", "phone", "license", "date"] as const;
+
+export async function POST(request: Request) {
+  const payload = (await request.json().catch(() => null)) as Record<string, unknown> | null;
+  if (!payload || requiredFields.some((field) => typeof payload[field] !== "string" || !payload[field])) {
+    return NextResponse.json({ message: "Bitte fülle alle Pflichtfelder aus." }, { status: 400 });
+  }
+
+  // TODO: WordPress REST endpoint, SMTP and calendar credentials belong in server-only env vars.
+  // Example boundary: POST `${WORDPRESS_URL}/wp-json/bz-ucar/v1/appointments`.
+  if (!process.env.WORDPRESS_URL || !process.env.APPOINTMENT_API_TOKEN) {
+    return NextResponse.json(
+      { message: "Die Terminannahme ist noch nicht konfiguriert. Bitte ruf uns direkt an: 030 123 45 67." },
+      { status: 503 },
+    );
+  }
+
+  // TODO: Send the validated payload to WordPress, notify via SMTP and persist admin tracking ID.
+  return NextResponse.json({ message: "Anfrage erfolgreich übermittelt." }, { status: 202 });
+}
diff --git a/app/datenschutz/page.tsx b/app/datenschutz/page.tsx
new file mode 100644
index 00000000..d8d606cc
--- /dev/null
+++ b/app/datenschutz/page.tsx
@@ -0,0 +1,3 @@
+export default function Datenschutz() {
+  return <main className="mx-auto max-w-3xl px-6 py-20"><h1 className="text-4xl font-black">Datenschutzerklärung</h1><div className="prose mt-8"><p>Hier informieren wir dich darüber, welche personenbezogenen Daten bei einer Terminanfrage verarbeitet werden.</p><p><strong>Platzhalter für die finale Datenschutzerklärung:</strong> Bitte vor dem Livegang durch eine rechtlich geprüfte Fassung und die tatsächlichen WordPress-, SMTP- und Kalenderanbieter ersetzen.</p></div></main>;
+}
diff --git a/app/globals.css b/app/globals.css
index e1dc4f9b..696baf1c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -176,3 +176,159 @@
         @apply bg-background text-foreground;
     }
 }
+
+html {
+    scroll-behavior: smooth;
+}
+
+.form-field {
+    width: 100%;
+    border: 1px solid #d8e2dd;
+    border-radius: 0.85rem;
+    background: #fbfcfa;
+    padding: 0.8rem 0.95rem;
+    color: #09090b;
+    outline: none;
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.form-field:focus {
+    border-color: #09090b;
+    box-shadow: 0 0 0 3px rgb(29 95 87 / 12%);
+}
+
+.modern-site {
+    font-family: var(--font-sans), "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+
+.modern-site h1,
+.modern-site h2,
+.modern-site h3 {
+    text-wrap: balance;
+}
+
+.course-card {
+    min-height: 26rem;
+    transition: transform 180ms ease, box-shadow 180ms ease;
+}
+
+.course-card:hover {
+    transform: translateY(-0.35rem);
+    box-shadow: 0 1.5rem 3rem rgb(16 35 43 / 12%);
+}
+
+.course-card-lime {
+    background: #ef233c;
+    color: #09090b;
+}
+
+.course-card-coral {
+    background: #d90429;
+    color: #fff;
+}
+
+.course-card-blue {
+    background: #f4f4f5;
+    color: #09090b;
+}
+
+.scene-city {
+    background:
+        linear-gradient(90deg, transparent 0 3%, #27272a 3% 10%, transparent 10% 12%, #27272a 12% 20%, transparent 20% 23%, #27272a 23% 31%, transparent 31% 34%, #27272a 34% 44%, transparent 44% 47%, #27272a 47% 57%, transparent 57% 60%, #27272a 60% 69%, transparent 69% 73%, #27272a 73% 84%, transparent 84% 87%, #27272a 87% 96%, transparent 96%);
+    clip-path: polygon(0 40%, 3% 40%, 3% 8%, 10% 8%, 10% 34%, 12% 34%, 12% 14%, 20% 14%, 20% 44%, 23% 44%, 23% 23%, 31% 23%, 31% 38%, 34% 38%, 34% 5%, 44% 5%, 44% 35%, 47% 35%, 47% 17%, 57% 17%, 57% 45%, 60% 45%, 60% 10%, 69% 10%, 69% 38%, 73% 38%, 73% 19%, 84% 19%, 84% 43%, 87% 43%, 87% 7%, 96% 7%, 96% 38%, 100% 38%, 100% 100%, 0 100%);
+}
+
+.scene-cloud {
+    position: absolute;
+    height: 3rem;
+    width: 9rem;
+    border-radius: 999px;
+    background: rgb(255 255 255 / 10%);
+    filter: blur(1px);
+}
+
+.scene-cloud::before,
+.scene-cloud::after {
+    position: absolute;
+    bottom: 0;
+    content: "";
+    border-radius: 999px;
+    background: inherit;
+}
+
+.scene-cloud::before {
+    left: 1.5rem;
+    height: 4rem;
+    width: 4rem;
+}
+
+.scene-cloud::after {
+    right: 1.3rem;
+    height: 3.5rem;
+    width: 3.5rem;
+}
+
+.scene-cloud-one {
+    left: 18%;
+    top: 22%;
+    animation: cloud-drift 18s ease-in-out infinite alternate;
+}
+
+.scene-cloud-two {
+    right: 12%;
+    top: 36%;
+    transform: scale(.65);
+    animation: cloud-drift 23s ease-in-out -5s infinite alternate-reverse;
+}
+
+.scene-bus {
+    animation: bus-arrival 12s ease-in-out infinite;
+}
+
+.scene-person {
+    animation: passenger-exit 12s ease-in-out infinite;
+}
+
+.scene-car {
+    animation: training-car-exit 12s ease-in-out infinite;
+}
+
+.hero-reference-video {
+    filter: saturate(.9) contrast(1.05);
+}
+
+.hero-video-overlay {
+    background: linear-gradient(135deg, rgb(13 39 48 / 30%), rgb(8 26 32 / 62%));
+}
+
+@keyframes bus-arrival {
+    0%, 8% { transform: translateX(0); }
+    25%, 58% { transform: translateX(190%); }
+    70%, 100% { transform: translateX(480%); }
+}
+
+@keyframes passenger-exit {
+    0%, 24% { opacity: 0; transform: translateY(1rem); }
+    34%, 55% { opacity: 1; transform: translateY(0); }
+    65%, 100% { opacity: 0; transform: translate(4rem, 0); }
+}
+
+@keyframes training-car-exit {
+    0%, 48% { transform: translateX(0); }
+    62%, 100% { transform: translateX(300%); }
+}
+
+@keyframes cloud-drift {
+    from { transform: translateX(-1rem); }
+    to { transform: translateX(2rem); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    .scene-bus, .scene-person, .scene-car, .scene-cloud-one, .scene-cloud-two {
+        animation: none;
+    }
+    .scene-bus { transform: translateX(190%); }
+    .scene-person { opacity: 1; }
+    .scene-car { transform: translateX(80%); }
+}
diff --git a/app/impressum/page.tsx b/app/impressum/page.tsx
new file mode 100644
index 00000000..193392e9
--- /dev/null
+++ b/app/impressum/page.tsx
@@ -0,0 +1,3 @@
+export default function Impressum() {
+  return <main className="mx-auto max-w-3xl px-6 py-20"><h1 className="text-4xl font-black">Impressum</h1><div className="prose mt-8"><p><strong>Fahrschule Bz Ucar</strong><br />Musterstraße 12<br />12345 Berlin</p><p>Vertreten durch: [Name der verantwortlichen Person]</p><p>Telefon: [Telefonnummer]<br />E-Mail: [E-Mail-Adresse]</p><p><strong>Hinweis:</strong> Diese Platzhalter müssen vor dem produktiven Start mit den vollständigen Anbieterangaben ergänzt werden.</p></div></main>;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 2fc94497..b445a8c0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,9 +17,11 @@ const font = FontSans({
 });
 
 export const metadata: Metadata = {
-  title: "WordPress & Next.js Starter by 9d8",
-  description:
-    "A starter template for Next.js with WordPress as a headless CMS.",
+  title: {
+    default: "Fahrschule Bz Ucar | Sicher ans Ziel",
+    template: "%s | Fahrschule Bz Ucar",
+  },
+  description: siteConfig.site_description,
   metadataBase: new URL(siteConfig.site_domain),
   alternates: {
     canonical: "/",
@@ -32,7 +34,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="de" suppressHydrationWarning>
       <head />
       <body className={cn("min-h-screen font-sans antialiased", font.variable)}>
         <ThemeProvider
diff --git a/app/not-found.tsx b/app/not-found.tsx
index d4522f63..1b0bf7da 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -8,12 +8,12 @@ export default function NotFound() {
     <Section>
       <Container>
         <div className="flex flex-col items-center justify-center min-h-[50vh] text-center">
-          <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
+          <h1 className="text-4xl font-bold mb-4">404 – Seite nicht gefunden</h1>
           <p className="mb-8">
-            Sorry, the page you are looking for does not exist.
+            Die gesuchte Seite existiert leider nicht.
           </p>
           <Button asChild className="not-prose mt-6">
-            <Link href="/">Return Home</Link>
+            <Link href="/">Zur Startseite</Link>
           </Button>
         </div>
       </Container>
diff --git a/app/page.tsx b/app/page.tsx
index c6290b24..43d58ba5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,146 +1,83 @@
-// Craft Imports
-import { Section, Container, Prose } from "@/components/craft";
-
-// Next.js Imports
 import Link from "next/link";
+import { ArrowDownRight, ArrowRight, Check, MessageCircle } from "lucide-react";
+import { BookingForm } from "@/components/home/booking-form";
+import { HeroScene } from "@/components/home/hero-scene";
+
+const courses = [
+  { number: "01", title: "Klasse B", description: "Dein Weg zum Pkw-F&uuml;hrerschein. Klar strukturiert, flexibel geplant und mit modernen Ausbildungsfahrzeugen.", tone: "lime" },
+  { number: "02", title: "Klasse A", description: "Mehr Freiheit auf zwei R&auml;dern. Sicher trainieren, selbstbewusst starten und jede Kurve genie&szlig;en.", tone: "coral" },
+  { number: "03", title: "Klasse BE", description: "Mehr M&ouml;glichkeiten im Alltag und Beruf. Anh&auml;nger fahren lernen, ohne Stress und mit System.", tone: "blue" },
+];
 
-// Icons
-import { File, Pen, Tag, Diamond, User, Folder } from "lucide-react";
-import { WordPressIcon } from "@/components/icons/wordpress";
-import { NextJsIcon } from "@/components/icons/nextjs";
+const benefits = [
+  { title: "Pers&ouml;nliche Begleitung", text: "Wir kennen deinen Namen, deinen Fortschritt und dein Ziel." },
+  { title: "Dein Rhythmus", text: "Theorie und Fahrstunden passen in deinen Alltag." },
+  { title: "Sicher lernen", text: "Ruhige Erkl&auml;rungen, moderne Fahrzeuge und klare Schritte." },
+];
 
-// This page is using the craft.tsx component and design system
 export default function Home() {
   return (
-    <Section>
-      <Container>
-        <ToDelete />
-      </Container>
-    </Section>
-  );
-}
+    <main className="modern-site overflow-hidden bg-[#fafafa] text-[#09090b]">
+      <section className="relative bg-[#09090b] text-white">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_10%_15%,rgba(239,35,60,.13),transparent_28%),radial-gradient(circle_at_90%_80%,rgba(255,255,255,.08),transparent_25%)]" />
+        <div className="relative mx-auto max-w-7xl px-6 pb-20 pt-8 lg:px-8 lg:pb-28 lg:pt-12">
+          <div className="mb-16 flex items-center justify-between border-b border-white/10 pb-5">
+            <Link href="/" className="flex items-center gap-3">
+              <span className="text-sm font-extrabold tracking-[.08em]">Fahrschule Bz Ucar<span className="text-[#ef233c]">.</span></span>
+            </Link>
+            <div className="hidden items-center gap-8 text-xs font-bold text-white/65 md:flex">
+              <Link href="#fuehrerscheine" className="transition hover:text-[#ef233c]">F&uuml;hrerscheine</Link>
+              <Link href="#vorteile" className="transition hover:text-[#ef233c]">Informationen</Link>
+              <Link href="#termin" className="transition hover:text-[#ef233c]">Kontakt</Link>
+            </div>
+            <Link href="#termin" className="rounded-full border border-[#ef233c]/50 px-4 py-2 text-xs font-bold text-[#ef233c] transition hover:bg-[#ef233c] hover:text-white">Anfrage senden</Link>
+          </div>
+          <div className="grid gap-12 lg:grid-cols-[.8fr_1.2fr] lg:items-end">
+            <div className="max-w-xl">
+              <p className="mb-6 flex items-center gap-3 text-[10px] font-black uppercase tracking-[.28em] text-[#ef233c]"><span className="h-2 w-2 rounded-full bg-[#d90429]" /> Fahrschule in Berlin</p>
+              <h1 className="text-6xl font-black leading-[.9] tracking-[-.08em] sm:text-8xl">Fahr los.<br /><span className="text-[#ef233c]">Wachs &uuml;ber dich hinaus.</span></h1>
+              <p className="mt-8 max-w-md text-lg leading-relaxed text-white/65">Dein F&uuml;hrerschein ist mehr als ein St&uuml;ck Papier. Er ist der Moment, in dem du selbst entscheidest, wohin es geht.</p>
+              <div className="mt-9 flex flex-wrap items-center gap-5">
+                <Link href="#termin" className="group inline-flex items-center gap-3 rounded-full bg-[#d90429] px-6 py-4 text-sm font-bold text-white transition hover:bg-[#ef233c]">Probestunde buchen <ArrowRight size={17} className="transition group-hover:translate-x-1" /></Link>
+                <span className="text-xs font-medium text-white/50">4.9 aus 180+ Bewertungen</span>
+              </div>
+            </div>
+            <div className="relative">
+              <HeroScene />
+              <div className="absolute -bottom-5 -left-3 hidden rounded-2xl bg-[#ef233c] px-4 py-3 text-white shadow-xl sm:block"><span className="block text-[10px] font-black uppercase tracking-[.16em]">N&auml;chster Schritt</span><span className="mt-1 flex items-center gap-2 text-sm font-bold">Kontakt <ArrowDownRight size={15} /></span></div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-// This is just some example TSX
-const ToDelete = () => {
-  return (
-    <main className="space-y-6">
-      <Prose>
-        <h1>Headless WordPress built with the Next.js</h1>
+      <section className="border-b border-[#e4e4e7] bg-[#ef233c] px-6 py-5 lg:px-8">
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 text-xs font-black uppercase tracking-[.14em] text-white">
+          <span>12+ Jahre Erfahrung</span><span className="hidden h-1 w-1 rounded-full bg-white sm:block" /><span>Flexible Fahrstunden</span><span className="hidden h-1 w-1 rounded-full bg-white sm:block" /><span>Moderne Fahrzeuge</span><span className="hidden h-1 w-1 rounded-full bg-white sm:block" /><span>Berlin &amp; Umgebung</span>
+        </div>
+      </section>
 
-        <p>
-          This is <a href="https://github.com/9d8dev/next-wp">next-wp</a>,
-          created as a way to build WordPress sites with Next.js at rapid speed.
-          This starter is designed with{" "}
-          <a href="https://ui.shadcn.com">shadcn/ui</a>,{" "}
-          <a href="https://craft-ds.com">craft-ds</a>, and Tailwind CSS. Use{" "}
-          <a href="https://components.work">brijr/components</a> to build your
-          site with prebuilt components. The data fetching and typesafety is
-          handled in <code>lib/wordpress.ts</code> and{" "}
-          <code>lib/wordpress.d.ts</code>.
-        </p>
-      </Prose>
+      <section id="fuehrerscheine" className="px-6 py-24 lg:px-8 lg:py-32">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-14 grid gap-6 lg:grid-cols-[1fr_.65fr] lg:items-end"><div><p className="mb-4 text-[10px] font-black uppercase tracking-[.28em] text-[#d90429]">Dein Weg</p><h2 className="max-w-2xl text-5xl font-black leading-[.95] tracking-[-.07em] sm:text-7xl">Welcher F&uuml;hrerschein<br />passt zu dir?</h2></div><p className="max-w-sm text-sm leading-relaxed text-[#52525b]">Wir finden gemeinsam die passende Ausbildung f&uuml;r deine Ziele und deinen Alltag.</p></div>
+          <div className="grid gap-4 md:grid-cols-3">{courses.map((course) => <article key={course.number} className={`course-card course-card-${course.tone} group relative overflow-hidden rounded-[1.75rem] p-7 sm:p-9`}><div className="flex items-start justify-between"><span className="text-sm font-black opacity-50">{course.number}</span><ArrowRight size={20} className="transition group-hover:translate-x-1" /></div><div className="mt-24"><h3 className="text-3xl font-black tracking-[-.05em]">{course.title}</h3><p className="mt-4 max-w-xs text-sm leading-relaxed opacity-75">{course.description}</p><Link href="#termin" className="mt-7 inline-flex items-center gap-2 text-xs font-black uppercase tracking-[.12em] underline decoration-2 underline-offset-4">Kontakt</Link></div></article>)}</div>
+        </div>
+      </section>
 
-      <div className="flex justify-between items-center gap-4">
-        {/* Vercel Clone Starter */}
-        <div className="flex items-center gap-3">
-          <a
-            className="h-auto block"
-            href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2F9d8dev%2Fnext-wp&env=WORDPRESS_URL,WORDPRESS_HOSTNAME&envDescription=Add%20WordPress%20URL%20with%20Rest%20API%20enabled%20(ie.%20https%3A%2F%2Fwp.example.com)%20abd%20the%20hostname%20for%20Image%20rendering%20in%20Next%20JS%20(ie.%20wp.example.com)&project-name=next-wp&repository-name=next-wp&demo-title=Next%20JS%20and%20WordPress%20Starter&demo-url=https%3A%2F%2Fwp.9d8.dev"
-          >
-            {/* eslint-disable-next-line */}
-            <img
-              className="not-prose my-4"
-              src="https://vercel.com/button"
-              alt="Deploy with Vercel"
-              width={105}
-              height={32.62}
-            />
-          </a>
-          <p className="text-sm! sr-only sm:not-sr-only text-muted-foreground">
-            Deploy with Vercel in seconds.
-          </p>
+      <section id="vorteile" className="bg-[#111113] px-6 py-24 text-white lg:px-8 lg:py-32">
+        <div className="mx-auto grid max-w-7xl gap-16 lg:grid-cols-[.75fr_1.25fr] lg:items-start">
+          <div><p className="mb-4 text-[10px] font-black uppercase tracking-[.28em] text-[#ef233c]">Warum Fahrschule Bz Ucar?</p><h2 className="text-5xl font-black leading-[.95] tracking-[-.07em] sm:text-7xl">Nicht nur<br /><span className="text-[#d90429]">bestehen.</span><br />Verstehen.</h2><p className="mt-7 max-w-sm text-sm leading-relaxed text-white/60">Eine gute Fahrschule bringt dir nicht nur bei, wie du die Pr&uuml;fung bestehst. Sie gibt dir Sicherheit f&uuml;r alle Wege danach.</p></div>
+          <div className="grid gap-0">{benefits.map(({ title, text }, index) => <div key={title} className="grid grid-cols-[3rem_1fr] gap-5 border-t border-white/15 py-7"><span className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-[#ef233c] text-sm font-black">0{index + 1}</span><div><h3 className="text-xl font-bold">{title}</h3><p className="mt-2 max-w-md text-sm leading-relaxed text-white/55">{text}</p></div></div>)}</div>
         </div>
+      </section>
 
-        <div className="flex gap-2 items-center">
-          <WordPressIcon className="text-foreground" width={32} height={32} />
-          <NextJsIcon className="text-foreground" width={32} height={32} />
+      <section id="termin" className="px-6 py-24 lg:px-8 lg:py-32">
+        <div className="mx-auto grid max-w-7xl gap-14 lg:grid-cols-[.75fr_1.25fr] lg:items-start">
+          <div><p className="mb-4 text-[10px] font-black uppercase tracking-[.28em] text-[#d90429]">Dein erster Schritt</p><h2 className="text-5xl font-black leading-[.95] tracking-[-.07em] sm:text-7xl">Lust auf<br /><span className="text-[#d90429]">F&uuml;hrerschein?</span></h2><p className="mt-7 max-w-sm text-sm leading-relaxed text-[#52525b]">Vereinbare jetzt deine kostenlose Probestunde. Ganz unverbindlich - wir freuen uns auf dich!</p><div className="mt-8 space-y-3 text-sm text-[#3f3f46]"><p className="flex items-center gap-3"><Check size={16} className="text-[#d90429]" /> Pers&ouml;nliche Beratung inklusive</p><p className="flex items-center gap-3"><Check size={16} className="text-[#d90429]" /> Antwort innerhalb von 24 Stunden</p><p className="flex items-center gap-3"><Check size={16} className="text-[#d90429]" /> Keine versteckten Kosten</p></div></div>
+          <div className="rounded-[2rem] bg-white p-6 shadow-[0_20px_80px_rgba(16,35,43,.08)] sm:p-10"><BookingForm /></div>
         </div>
-      </div>
+      </section>
 
-      <div className="grid md:grid-cols-3 gap-4 mt-6">
-        <Link
-          className="border h-48 bg-accent/50 rounded-lg p-4 flex flex-col justify-between hover:scale-[1.02] transition-all"
-          href="/posts"
-        >
-          <Pen size={32} />
-          <span>
-            Posts{" "}
-            <span className="block text-sm text-muted-foreground">
-              All posts from your WordPress
-            </span>
-          </span>
-        </Link>
-        <Link
-          className="border h-48 bg-accent/50 rounded-lg p-4 flex flex-col justify-between hover:scale-[1.02] transition-all"
-          href="/pages"
-        >
-          <File size={32} />
-          <span>
-            Pages{" "}
-            <span className="block text-sm text-muted-foreground">
-              Custom pages from your WordPress
-            </span>
-          </span>
-        </Link>
-        <Link
-          className="border h-48 bg-accent/50 rounded-lg p-4 flex flex-col justify-between hover:scale-[1.02] transition-all"
-          href="/posts/authors"
-        >
-          <User size={32} />
-          <span>
-            Authors{" "}
-            <span className="block text-sm text-muted-foreground">
-              List of the authors from your WordPress
-            </span>
-          </span>
-        </Link>
-        <Link
-          className="border h-48 bg-accent/50 rounded-lg p-4 flex flex-col justify-between hover:scale-[1.02] transition-all"
-          href="/posts/tags"
-        >
-          <Tag size={32} />
-          <span>
-            Tags{" "}
-            <span className="block text-sm text-muted-foreground">
-              Content by tags from your WordPress
-            </span>
-          </span>
-        </Link>
-        <Link
-          className="border h-48 bg-accent/50 rounded-lg p-4 flex flex-col justify-between hover:scale-[1.02] transition-all"
-          href="/posts/categories"
-        >
-          <Diamond size={32} />
-          <span>
-            Categories{" "}
-            <span className="block text-sm text-muted-foreground">
-              Categories from your WordPress
-            </span>
-          </span>
-        </Link>
-        <a
-          className="border h-48 bg-accent/50 rounded-lg p-4 flex flex-col justify-between hover:scale-[1.02] transition-all"
-          href="https://github.com/9d8dev/next-wp/blob/main/README.md"
-        >
-          <Folder size={32} />
-          <span>
-            Documentation{" "}
-            <span className="block text-sm text-muted-foreground">
-              How to use `next-wp`
-            </span>
-          </span>
-        </a>
-      </div>
+      <section className="bg-[#d90429] px-6 py-16 text-white lg:px-8"><div className="mx-auto flex max-w-7xl flex-col justify-between gap-8 sm:flex-row sm:items-center"><div><p className="text-[10px] font-black uppercase tracking-[.24em] text-white/70">Du hast noch Fragen?</p><h2 className="mt-3 text-3xl font-black tracking-[-.05em] sm:text-4xl">Schreib uns. Wir sind da.</h2></div><Link href="#termin" className="inline-flex items-center gap-3 self-start rounded-full bg-[#09090b] px-6 py-4 text-sm font-bold transition hover:bg-[#27272a]">Kontakt aufnehmen <MessageCircle size={17} /></Link></div></section>
     </main>
   );
-};
+}
diff --git a/components/home/booking-form.tsx b/components/home/booking-form.tsx
new file mode 100644
index 00000000..8415dc94
--- /dev/null
+++ b/components/home/booking-form.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+
+type FormState = "idle" | "sending" | "success" | "error";
+
+const initialForm = { name: "", email: "", phone: "", license: "B", date: "", message: "" };
+
+export function BookingForm() {
+  const [form, setForm] = useState(initialForm);
+  const [state, setState] = useState<FormState>("idle");
+  const [error, setError] = useState("");
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setState("sending");
+    setError("");
+
+    try {
+      const response = await fetch("/api/appointments", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      const result = (await response.json()) as { message?: string };
+      if (!response.ok) throw new Error(result.message ?? "Bitte prüfe deine Angaben.");
+      setState("success");
+      setForm(initialForm);
+    } catch (submissionError) {
+      setState("error");
+      setError(submissionError instanceof Error ? submissionError.message : "Die Anfrage konnte nicht gesendet werden.");
+    }
+  }
+
+  function updateField(field: keyof typeof initialForm, value: string) {
+    setForm((current) => ({ ...current, [field]: value }));
+  }
+
+  if (state === "success") {
+    return (
+      <div className="flex min-h-80 flex-col items-center justify-center rounded-3xl bg-[#e8f4ee] p-8 text-center">
+        <span className="mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-[#1f8a63] text-2xl text-white">✓</span>
+        <h3 className="text-2xl font-bold text-[#10232b]">Danke für deine Anfrage!</h3>
+        <p className="mt-3 max-w-sm text-[#47616a]">Wir melden uns schnellstmöglich persönlich bei dir, um deinen Termin zu bestätigen.</p>
+        <button className="mt-6 text-sm font-bold text-[#1f6b58] underline underline-offset-4" onClick={() => setState("idle")}>Weitere Anfrage senden</button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="grid gap-4">
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="grid gap-2 text-sm font-semibold text-[#29444d]">Vor- und Nachname *
+          <input required value={form.name} onChange={(event) => updateField("name", event.target.value)} placeholder="z. B. Elif Yılmaz" className="form-field" />
+        </label>
+        <label className="grid gap-2 text-sm font-semibold text-[#29444d]">E-Mail-Adresse *
+          <input required type="email" value={form.email} onChange={(event) => updateField("email", event.target.value)} placeholder="du@beispiel.de" className="form-field" />
+        </label>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="grid gap-2 text-sm font-semibold text-[#29444d]">Telefonnummer *
+          <input required type="tel" value={form.phone} onChange={(event) => updateField("phone", event.target.value)} placeholder="+49 170 1234567" className="form-field" />
+        </label>
+        <label className="grid gap-2 text-sm font-semibold text-[#29444d]">Führerscheinklasse
+          <select value={form.license} onChange={(event) => updateField("license", event.target.value)} className="form-field">
+            <option value="B">Klasse B (Pkw)</option><option value="A">Klasse A (Motorrad)</option><option value="BE">Klasse BE (Anhänger)</option>
+          </select>
+        </label>
+      </div>
+      <label className="grid gap-2 text-sm font-semibold text-[#29444d]">Wunschtermin für die Probestunde *
+        <input required type="date" value={form.date} onChange={(event) => updateField("date", event.target.value)} min={new Date().toISOString().split("T")[0]} className="form-field" />
+      </label>
+      <label className="grid gap-2 text-sm font-semibold text-[#29444d]">Nachricht (optional)
+        <textarea value={form.message} onChange={(event) => updateField("message", event.target.value)} placeholder="Was möchtest du uns noch mitteilen?" rows={3} className="form-field resize-none" />
+      </label>
+      {state === "error" && <p role="alert" className="rounded-xl bg-[#fff0ed] px-4 py-3 text-sm text-[#a53b2d]">{error}</p>}
+      <button disabled={state === "sending"} className="mt-2 rounded-full bg-[#d90429] px-6 py-3.5 text-sm font-bold text-white transition hover:bg-[#ef233c] disabled:cursor-wait disabled:opacity-60" type="submit">
+        {state === "sending" ? "Wird gesendet …" : "Probestunde anfragen"}
+      </button>
+      <p className="text-xs leading-relaxed text-[#6a7c80]">Mit dem Absenden stimmst du der Verarbeitung deiner Daten zur Terminvereinbarung zu. Es erfolgt noch keine verbindliche Buchung.</p>
+    </form>
+  );
+}
diff --git a/components/home/hero-scene.tsx b/components/home/hero-scene.tsx
new file mode 100644
index 00000000..3a3d351a
--- /dev/null
+++ b/components/home/hero-scene.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowUpRight, Car, MapPin, ShieldCheck } from "lucide-react";
+
+export function HeroScene() {
+  const [videoFailed, setVideoFailed] = useState(false);
+
+  return (
+    <div className="hero-scene relative isolate min-h-[430px] overflow-hidden rounded-[2.25rem] bg-[#09090b] shadow-2xl shadow-[#09090b]/20 sm:min-h-[540px]">
+      <video
+        className={`hero-reference-video absolute inset-0 z-0 h-full w-full object-cover ${videoFailed ? "hidden" : ""}`}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        onError={() => setVideoFailed(true)}
+        aria-label="Fahrschulbus kommt an, ein Fahrgast entdeckt die Fahrschule und ein Ausbildungsfahrzeug fährt los"
+      >
+        <source src="/banner-animasyon.mp4" type="video/mp4" />
+      </video>
+      <div className={`absolute inset-0 bg-[radial-gradient(circle_at_68%_15%,rgba(242,184,75,.3),transparent_25%),linear-gradient(135deg,#18181b_0%,#09090b_64%,#000000_100%)] ${videoFailed ? "" : "hero-video-overlay"}`} />
+      <div className="absolute -right-20 -top-28 h-80 w-80 rounded-full border border-[#ffffff]/20 sm:h-[30rem] sm:w-[30rem]" />
+      <div className="absolute -right-8 -top-16 h-64 w-64 rounded-full border border-[#ffffff]/10 sm:h-96 sm:w-96" />
+      <div className="absolute bottom-0 left-0 right-0 h-[38%] bg-[#111113]" />
+      <div className="absolute bottom-[30%] left-0 right-0 h-px bg-white/10" />
+      <div className="absolute bottom-[17%] left-0 right-0 h-px bg-[#ffffff]/60" />
+      <div className="absolute bottom-0 left-1/2 h-20 w-[130%] -translate-x-1/2 rounded-[50%] border-t border-white/10 bg-black" />
+      <div className="scene-city absolute bottom-[29%] left-0 right-0 h-28 opacity-70 sm:h-40" />
+
+      <div className="scene-route absolute bottom-[34%] left-[23%] z-10 text-[#ffffff]">
+        <span className="absolute -left-2 -top-2 h-5 w-5 rounded-full border border-[#ffffff]/60" />
+        <span className="absolute left-1 top-1 h-2 w-2 rounded-full bg-[#ffffff]" />
+        <svg className="h-24 w-28 overflow-visible" viewBox="0 0 120 100" fill="none" aria-hidden="true">
+          <path d="M5 78C30 78 22 24 56 24C82 24 68 78 115 78" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 5" />
+          <path d="m108 70 8 8-8 8" stroke="currentColor" strokeWidth="1.5" />
+        </svg>
+      </div>
+
+      <div className={`scene-bus hero-procedural-fallback absolute bottom-[33%] left-[-38%] z-20 w-48 sm:w-60 ${videoFailed ? "" : "hidden"}`}>
+        <svg viewBox="0 0 240 92" className="drop-shadow-2xl" aria-label="Ankommender Fahrschulbus">
+          <rect x="4" y="8" width="232" height="70" rx="17" fill="#ffffff" />
+          <rect x="15" y="19" width="192" height="31" rx="8" fill="#18181b" />
+          <path d="M26 24h32v21H26zM64 24h32v21H64zM102 24h32v21h-32zM140 24h32v21h-32z" fill="#f4f4f5" opacity=".85" />
+          <path d="M181 24h18v21h-18z" fill="#f4f4f5" opacity=".5" />
+          <text x="18" y="67" fill="#09090b" fontSize="10" fontWeight="800" letterSpacing="2">Fahrschule Bz Ucar</text>
+          <circle cx="45" cy="82" r="10" fill="#000000" stroke="#ffffff" strokeWidth="4" />
+          <circle cx="194" cy="82" r="10" fill="#000000" stroke="#ffffff" strokeWidth="4" />
+        </svg>
+      </div>
+
+      <div className={`scene-person hero-procedural-fallback absolute bottom-[31%] left-[43%] z-20 opacity-0 ${videoFailed ? "" : "hidden"}`}>
+        <div className="mx-auto h-7 w-7 rounded-full bg-[#f4c2a1]" />
+        <div className="h-14 w-10 rounded-t-full bg-[#ffffff]" />
+        <div className="mx-auto flex w-12 justify-between">
+          <span className="h-11 w-2.5 rounded-full bg-[#09090b]" /><span className="h-11 w-2.5 rounded-full bg-[#09090b]" />
+        </div>
+      </div>
+
+      <div className={`scene-building hero-procedural-fallback absolute bottom-[29%] right-[8%] z-10 w-36 sm:w-48 ${videoFailed ? "" : "hidden"}`}>
+        <div className="relative rounded-t-[1.1rem] bg-[#ffffff] p-3 text-[#09090b] shadow-2xl">
+          <div className="mb-2 flex items-center gap-2 text-[9px] font-black tracking-[0.18em]"><span className="h-2 w-2 rounded-full bg-[#d90429]" /> FAHRSCHULE</div>
+          <div className="rounded-lg bg-white px-2 py-3 text-center text-lg font-black tracking-tight sm:text-2xl">Fahrschule Bz Ucar</div>
+          <div className="mt-3 grid h-10 grid-cols-3 gap-1 rounded bg-[#27272a] p-1"><i /><i /><i /></div>
+        </div>
+      </div>
+
+      <div className={`scene-car hero-procedural-fallback absolute bottom-[10%] left-[-35%] z-20 w-52 sm:w-64 ${videoFailed ? "" : "hidden"}`}>
+        <svg viewBox="0 0 260 100" className="drop-shadow-2xl" aria-label="Ausbildungsfahrzeug">
+          <path d="M23 68h214c8 0 13-7 10-14l-10-22c-3-6-9-9-16-9h-84l-27-17H78c-8 0-14 5-18 12L46 32 22 42c-9 4-8 26 1 26Z" fill="#d90429" />
+          <path d="m78 21 25 16h94l-8-12c-2-3-6-4-10-4H78Z" fill="#f4f4f5" />
+          <path d="M45 48h165" stroke="#f87171" strokeWidth="3" />
+          <circle cx="65" cy="76" r="14" fill="#000000" stroke="#d90429" strokeWidth="6" /><circle cx="204" cy="76" r="14" fill="#000000" stroke="#d90429" strokeWidth="6" />
+          <text x="125" y="63" fill="#fff" fontSize="10" fontWeight="800" textAnchor="middle">Fahrschule Bz Ucar</text>
+        </svg>
+      </div>
+
+      <div className="absolute left-6 top-6 z-30 max-w-[17rem] text-white drop-shadow-lg sm:left-8 sm:top-8">
+        <p className="mb-3 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.22em] text-[#ffffff]">
+          <span className="h-2 w-2 rounded-full bg-[#ffffff]" />
+          Deine Reise beginnt
+        </p>
+        <p className="text-base font-medium leading-relaxed text-white/80">
+          Vom ersten Einsteigen bis zur sicheren Fahrt.
+        </p>
+      </div>
+      <div className="absolute bottom-5 left-6 z-30 flex items-center gap-3 text-xs text-white/80 drop-shadow-lg sm:bottom-7 sm:left-8">
+        <span className="rounded-full bg-white/10 px-3 py-1.5 backdrop-blur-sm">Fahrschule Bz Ucar</span>
+        <span className="flex items-center gap-1.5"><ArrowUpRight size={13} className="text-[#ffffff]" /> Deine Route</span>
+      </div>
+
+      <div className="absolute right-5 top-5 z-30 hidden flex-col gap-2 text-right text-xs text-white/70 sm:flex">
+        <span className="inline-flex items-center justify-end gap-2"><ShieldCheck size={14} className="text-[#ffffff]" /> Fahrschule Bz Ucar</span>
+        <span className="inline-flex items-center justify-end gap-2"><MapPin size={14} className="text-[#ffffff]" /> Informationen</span>
+        <span className="inline-flex items-center justify-end gap-2"><Car size={14} className="text-[#ffffff]" /> Anfrage</span>
+      </div>
+    </div>
+  );
+}
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index f90ce12e..bca2269b 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -1,43 +1,33 @@
 import { Section, Container } from "@/components/craft";
-import { ThemeToggle } from "@/components/theme/theme-toggle";
 import { mainMenu, contentMenu } from "@/menu.config";
 import { siteConfig } from "@/site.config";
-import Logo from "@/public/logo.svg";
-import Image from "next/image";
 import Link from "next/link";
 
 export function Footer() {
   return (
-    <footer>
+    <footer className="bg-[#10232b]">
       <Section>
         <Container className="grid md:grid-cols-[1.5fr_0.5fr_0.5fr] gap-12">
           <div className="flex flex-col gap-6 not-prose">
-            <Link href="/">
-              <h3 className="sr-only">{siteConfig.site_name}</h3>
-              <Image
-                src={Logo}
-                alt="Logo"
-                className="dark:invert"
-                width={42}
-                height={26.44}
-              />
+            <Link href="/" className="text-lg font-bold text-white">
+              {siteConfig.site_name}
             </Link>
-            <p>{siteConfig.site_description}</p>
+            <p className="max-w-sm text-slate-300">{siteConfig.site_description}</p>
           </div>
           <div className="flex flex-col gap-2 text-sm">
-            <h5 className="font-medium text-base">Website</h5>
+            <h5 className="text-base font-medium text-white">Navigation</h5>
             {Object.entries(mainMenu).map(([key, href]) => (
               <Link
                 className="hover:underline underline-offset-4"
                 key={href}
                 href={href}
               >
-                {key.charAt(0).toUpperCase() + key.slice(1)}
+                {key}
               </Link>
             ))}
           </div>
           <div className="flex flex-col gap-2 text-sm">
-            <h5 className="font-medium text-base">Blog</h5>
+            <h5 className="text-base font-medium text-white">Rechtliches</h5>
             {Object.entries(contentMenu).map(([key, href]) => (
               <Link
                 className="hover:underline underline-offset-4"
@@ -49,11 +39,9 @@ export function Footer() {
             ))}
           </div>
         </Container>
-        <Container className="border-t not-prose flex flex-col md:flex-row md:gap-2 gap-6 justify-between md:items-center">
-          <ThemeToggle />
-          <p className="text-muted-foreground">
-            &copy; <a href="https://9d8.dev">9d8</a>. All rights reserved.
-            2025-present.
+        <Container className="not-prose flex flex-col justify-between gap-6 border-t border-slate-700 md:flex-row md:items-center md:gap-2">
+          <p className="text-slate-400">
+            &copy; {new Date().getFullYear()} {siteConfig.site_name}. Alle Rechte vorbehalten.
           </p>
         </Container>
       </Section>
diff --git a/components/layout/nav.tsx b/components/layout/nav.tsx
index c2aa0d8c..6026df42 100644
--- a/components/layout/nav.tsx
+++ b/components/layout/nav.tsx
@@ -3,8 +3,6 @@ import { MobileNav } from "@/components/nav/mobile-nav";
 import { mainMenu } from "@/menu.config";
 import { siteConfig } from "@/site.config";
 import { cn } from "@/lib/utils";
-import Logo from "@/public/logo.svg";
-import Image from "next/image";
 import Link from "next/link";
 
 interface NavProps {
@@ -27,15 +25,7 @@ export function Nav({ className, children, id }: NavProps) {
           className="hover:opacity-75 transition-all flex gap-4 items-center"
           href="/"
         >
-          <Image
-            src={Logo}
-            alt="Logo"
-            loading="eager"
-            className="dark:invert"
-            width={42}
-            height={26.44}
-          />
-          <h2 className="text-sm">{siteConfig.site_name}</h2>
+          <h2 className="text-sm font-bold tracking-tight">{siteConfig.site_name}</h2>
         </Link>
         {children}
         <div className="flex items-center gap-2">
@@ -43,13 +33,13 @@ export function Nav({ className, children, id }: NavProps) {
             {Object.entries(mainMenu).map(([key, href]) => (
               <Button key={href} asChild variant="ghost" size="sm">
                 <Link href={href}>
-                  {key.charAt(0).toUpperCase() + key.slice(1)}
+                  {key}
                 </Link>
               </Button>
             ))}
           </div>
-          <Button asChild className="hidden sm:flex">
-            <Link href="https://github.com/9d8dev/next-wp">Get Started</Link>
+          <Button asChild className="hidden bg-[#d90429] text-white hover:bg-[#ef233c] sm:flex">
+            <Link href="/#termin">Probestunde buchen</Link>
           </Button>
           <MobileNav />
         </div>
diff --git a/components/nav/mobile-nav.tsx b/components/nav/mobile-nav.tsx
index 0450abb2..cf7a50a6 100644
--- a/components/nav/mobile-nav.tsx
+++ b/components/nav/mobile-nav.tsx
@@ -53,18 +53,18 @@ export function MobileNav() {
         </SheetHeader>
         <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
           <div className="flex flex-col space-y-3">
-            <h3 className="text-small mt-6">Menu</h3>
+            <h3 className="text-small mt-6">Navigation</h3>
             <Separator />
             {Object.entries(mainMenu).map(([key, href]) => (
               <MobileLink key={key} href={href} onOpenChange={setOpen}>
-                {key.charAt(0).toUpperCase() + key.slice(1)}
+                {key}
               </MobileLink>
             ))}
-            <h3 className="text-small pt-6">Blog Menu</h3>
+            <h3 className="text-small pt-6">Rechtliches</h3>
             <Separator />
             {Object.entries(contentMenu).map(([key, href]) => (
               <MobileLink key={key} href={href} onOpenChange={setOpen}>
-                {key.charAt(0).toUpperCase() + key.slice(1)}
+                {key}
               </MobileLink>
             ))}
           </div>
diff --git a/menu.config.ts b/menu.config.ts
index 55c36124..4a6e95c6 100644
--- a/menu.config.ts
+++ b/menu.config.ts
@@ -1,12 +1,12 @@
 // Define the menu items
 export const mainMenu = {
-  home: "/",
-  about: "https://github.com/9d8dev/next-wp",
-  blog: "/posts",
+  Startseite: "/",
+  "Führerscheine": "#fuehrerscheine",
+  "Über uns": "#ueber-uns",
+  Kontakt: "#kontakt",
 };
 
 export const contentMenu = {
-  categories: "/posts/categories",
-  tags: "/posts/tags",
-  authors: "/posts/authors",
+  Impressum: "/impressum",
+  Datenschutz: "/datenschutz",
 };
diff --git a/public/banner-animasyon.mp4 b/public/banner-animasyon.mp4
new file mode 100644
index 00000000..e69ec5be
Binary files /dev/null and b/public/banner-animasyon.mp4 differ
diff --git a/site.config.ts b/site.config.ts
index 40d044b5..e71535a7 100644
--- a/site.config.ts
+++ b/site.config.ts
@@ -5,7 +5,8 @@ type SiteConfig = {
 };
 
 export const siteConfig: SiteConfig = {
-  site_name: "next-wp",
-  site_description: "Starter template for Headless WordPress with Next.js",
-  site_domain: "https://next-wp.com",
+  site_name: "Fahrschule Bz Ucar",
+  site_description:
+    "Dein Weg zum Führerschein in Berlin - persönlich, sicher und mit Freude am Fahren.",
+  site_domain: process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000",
 };