good

new version
light
2026-02-03 19:22:05 +01:00 · 2026-02-02 21:42:41 +01:00 · 2026-02-02 16:17:08 +01:00 · 2026-02-02 15:16:36 +01:00 · 2026-02-02 12:11:43 +01:00 · 2026-02-02 10:41:41 +01:00
32 changed files with 4885 additions and 537 deletions
--- a/index.html
+++ b/index.html
@@ -1,21 +1,20 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
  <head>
    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- TODO: Set the document title to the name of your application -->
-    <title>Lovable App</title>
-    <meta name="description" content="Lovable Generated Project" />
-    <meta name="author" content="Lovable" />
+    <title>WEBklar</title>
+    <meta name="description" content="WEBklar – Ihre Webagentur" />
+    <meta name="author" content="WEBklar" />

-    <!-- TODO: Update og:title to match your application name -->
-    <meta property="og:title" content="Lovable App" />
-    <meta property="og:description" content="Lovable Generated Project" />
+    <meta property="og:title" content="WEBklar" />
+    <meta property="og:description" content="WEBklar – Ihre Webagentur" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@Lovable" />
+    <meta name="twitter:site" content="@WEBklar" />
    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
  </head>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -41,7 +41,10 @@
    "@radix-ui/react-toggle": "^1.1.9",
    "@radix-ui/react-toggle-group": "^1.1.10",
    "@radix-ui/react-tooltip": "^1.2.7",
+    "@react-three/fiber": "^8.18.0",
+    "@tabler/icons-react": "^3.36.1",
    "@tanstack/react-query": "^5.83.0",
+    "appwrite": "^22.0.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
@@ -49,7 +52,9 @@
    "embla-carousel-react": "^8.6.0",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.462.0",
+    "motion": "^12.29.2",
    "next-themes": "^0.3.0",
+    "ogl": "^1.0.11",
    "react": "^18.3.1",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
@@ -60,18 +65,19 @@
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.182.0",
    "vaul": "^0.9.9",
    "zod": "^3.25.76"
  },
  "devDependencies": {
    "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
    "@testing-library/jest-dom": "^6.6.0",
    "@testing-library/react": "^16.0.0",
-    "@tailwindcss/typography": "^0.5.16",
    "@types/node": "^22.16.5",
    "@types/react": "^18.3.23",
    "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.32.0",
    "eslint-plugin-react-hooks": "^5.2.0",
--- a/public/backgroud_effect.png
+++ b/public/backgroud_effect.png
--- a/public/backgroud_effect1.png
+++ b/public/backgroud_effect1.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF"/>
+  <ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)"/>
+  <circle cx="356" cy="172" r="18" fill="#FFFFFF"/>
+  <g transform="translate(256 256) rotate(-28)">
+    <path d="M 0,-170 C 22,-105 60,-72 120,-56 C 60,-40 22,-8 0,64 C -22,-8 -60,-40 -120,-56 C -60,-72 -22,-105 0,-170 Z" fill="#FFFFFF"/>
+  </g>
+</svg>
--- a/pics/emailsorter.png
+++ b/pics/emailsorter.png
--- a/scripts/create-appwrite-collection.mjs
+++ b/scripts/create-appwrite-collection.mjs
@@ -0,0 +1,64 @@
+/**
+ * Script zum Erstellen der Appwrite-Collection für Kontaktformulare.
+ * Einmalig ausführen mit: node scripts/create-appwrite-collection.mjs
+ *
+ * Benötigt: API-Key aus Appwrite Console (Settings > API Keys)
+ * Umgebungsvariable: APPWRITE_API_KEY=your-secret-key
+ */
+
+import { Client, Databases, Permission, Role } from "appwrite";
+
+const ENDPOINT = "https://appwrite.webklar.com/v1";
+const PROJECT_ID = "696b82270034001dab69";
+const DATABASE_ID = "698124a20035e8f6dc42";
+const COLLECTION_ID = "contact_submissions";
+
+const apiKey = process.env.APPWRITE_API_KEY;
+if (!apiKey) {
+  console.error(
+    "Fehler: APPWRITE_API_KEY Umgebungsvariable fehlt.\n" +
+      "Beispiel: $env:APPWRITE_API_KEY='your-key'; node scripts/create-appwrite-collection.mjs"
+  );
+  process.exit(1);
+}
+
+const client = new Client().setEndpoint(ENDPOINT).setProject(PROJECT_ID).setKey(apiKey);
+const databases = new Databases(client);
+
+async function createCollection() {
+  try {
+    // 1. Collection erstellen
+    // Permission: "any" darf Dokumente erstellen (für öffentliches Kontaktformular)
+    await databases.createCollection(
+      DATABASE_ID,
+      COLLECTION_ID,
+      "Kontaktanfragen",
+      [Permission.create(Role.any())],
+      true
+    );
+    console.log("✓ Collection erstellt:", COLLECTION_ID);
+
+    // 2. Attribute hinzufügen (Appwrite erfordert kleine Wartezeit zwischen den Schritten)
+    const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+
+    await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "name", 256, true);
+    await delay(500);
+    await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "email", 512, true);
+    await delay(500);
+    await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "company", 256, false);
+    await delay(500);
+    await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "message", 4096, true);
+
+    console.log("✓ Attribute erstellt: name, email, company, message");
+    console.log("\nCollection ist bereit. Kontaktformular kann jetzt genutzt werden.");
+  } catch (err) {
+    if (err.code === 409) {
+      console.log("Collection existiert bereits:", COLLECTION_ID);
+    } else {
+      console.error("Fehler:", err.message || err);
+      process.exit(1);
+    }
+  }
+}
+
+createCollection();
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import ContactPage from "./pages/Contact";
+import AGBPage from "./pages/AGB";
 import NotFound from "./pages/NotFound";

 const queryClient = new QueryClient();
@@ -18,6 +19,7 @@ const App = () => (
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="/kontakt" element={<ContactPage />} />
+          <Route path="/agb" element={<AGBPage />} />
          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
          <Route path="*" element={<NotFound />} />
        </Routes>
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -36,13 +36,13 @@ const Contact = () => {
          {/* Contact Info */}
          <div className="divider mb-12" />
          <div className="flex flex-col sm:flex-row gap-8 text-muted-foreground">
-            <a href="mailto:hello@webklar.de" className="flex items-center gap-3 hover:text-foreground transition-colors group">
+            <a href="mailto:support@webklar.com" className="flex items-center gap-3 hover:text-foreground transition-colors group">
              <Mail className="w-5 h-5" />
-              <span>hello@webklar.de</span>
+              <span>support@webklar.com</span>
            </a>
-            <a href="tel:+4912345678" className="flex items-center gap-3 hover:text-foreground transition-colors group">
+            <a href="tel:+491704969375" className="flex items-center gap-3 hover:text-foreground transition-colors group">
              <Phone className="w-5 h-5" />
-              <span>+49 123 456 78</span>
+              <span>0170 4969375</span>
            </a>
          </div>
        </div>
--- a/src/components/CountUp.tsx
+++ b/src/components/CountUp.tsx
@@ -0,0 +1,128 @@
+import { useInView, useMotionValue, useSpring } from "motion/react";
+import { useCallback, useEffect, useRef } from "react";
+
+interface CountUpProps {
+  to: number;
+  from?: number;
+  direction?: "up" | "down";
+  delay?: number;
+  duration?: number;
+  className?: string;
+  startWhen?: boolean;
+  separator?: string;
+  suffix?: string;
+  prefix?: string;
+  padMinLength?: number;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+export default function CountUp({
+  to,
+  from = 0,
+  direction = "up",
+  delay = 0,
+  duration = 2,
+  className = "",
+  startWhen = true,
+  separator = "",
+  suffix = "",
+  prefix = "",
+  padMinLength,
+  onStart,
+  onEnd,
+}: CountUpProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const motionValue = useMotionValue(direction === "down" ? to : from);
+
+  const damping = 20 + 40 * (1 / duration);
+  const stiffness = 100 * (1 / duration);
+
+  const springValue = useSpring(motionValue, {
+    damping,
+    stiffness,
+  });
+
+  const isInView = useInView(containerRef, { once: true, margin: "0px" });
+
+  const getDecimalPlaces = (num: number) => {
+    const str = num.toString();
+    if (str.includes(".")) {
+      const decimals = str.split(".")[1];
+      if (decimals && parseInt(decimals, 10) !== 0) {
+        return decimals.length;
+      }
+    }
+    return 0;
+  };
+
+  const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to));
+
+  const formatValue = useCallback(
+    (latest: number) => {
+      if (padMinLength != null) {
+        const n = Math.round(latest);
+        return n.toString().padStart(padMinLength, "0");
+      }
+      const hasDecimals = maxDecimals > 0;
+      const options: Intl.NumberFormatOptions = {
+        useGrouping: !!separator,
+        minimumFractionDigits: hasDecimals ? maxDecimals : 0,
+        maximumFractionDigits: hasDecimals ? maxDecimals : 0,
+      };
+      let formattedNumber = Intl.NumberFormat("de-DE", options).format(latest);
+      if (separator) {
+        formattedNumber = formattedNumber.replace(/\s/g, separator);
+      }
+      return formattedNumber;
+    },
+    [maxDecimals, separator, padMinLength]
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.textContent = formatValue(direction === "down" ? to : from);
+    }
+  }, [from, to, direction, formatValue]);
+
+  useEffect(() => {
+    if (isInView && startWhen) {
+      if (typeof onStart === "function") onStart();
+
+      const timeoutId = setTimeout(() => {
+        motionValue.set(direction === "down" ? from : to);
+      }, delay * 1000);
+
+      const durationTimeoutId = setTimeout(
+        () => {
+          if (typeof onEnd === "function") onEnd();
+        },
+        delay * 1000 + duration * 1000
+      );
+
+      return () => {
+        clearTimeout(timeoutId);
+        clearTimeout(durationTimeoutId);
+      };
+    }
+  }, [isInView, startWhen, motionValue, direction, from, to, delay, onStart, onEnd, duration]);
+
+  useEffect(() => {
+    const unsubscribe = springValue.on("change", (latest) => {
+      if (ref.current) {
+        ref.current.textContent = formatValue(latest);
+      }
+    });
+
+    return () => unsubscribe();
+  }, [springValue, formatValue]);
+
+  return (
+    <span ref={containerRef} className={className}>
+      {prefix && <span>{prefix}</span>}
+      <span ref={ref} />
+      {suffix && <span>{suffix}</span>}
+    </span>
+  );
+}
--- a/src/components/DifferentiationSection.tsx
+++ b/src/components/DifferentiationSection.tsx
@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
+import CountUp from "@/components/CountUp";

 const DifferentiationSection = () => {
  return (
@@ -15,7 +16,9 @@ const DifferentiationSection = () => {
          
          <div className="grid md:grid-cols-3 gap-8 mb-12">
            <div className="p-6 border border-border rounded-lg bg-background">
-              <div className="text-4xl font-display font-medium text-foreground mb-2">01</div>
+              <div className="text-4xl font-display font-medium text-foreground mb-2">
+                <CountUp from={0} to={1} duration={1} padMinLength={2} startWhen={true} />
+              </div>
              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                Alles aus einer Hand
              </h3>
@@ -25,7 +28,9 @@ const DifferentiationSection = () => {
            </div>
            
            <div className="p-6 border border-border rounded-lg bg-background">
-              <div className="text-4xl font-display font-medium text-foreground mb-2">02</div>
+              <div className="text-4xl font-display font-medium text-foreground mb-2">
+                <CountUp from={0} to={2} duration={1} padMinLength={2} startWhen={true} />
+              </div>
              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                Systeme statt Inseln
              </h3>
@@ -35,7 +40,9 @@ const DifferentiationSection = () => {
            </div>
            
            <div className="p-6 border border-border rounded-lg bg-background">
-              <div className="text-4xl font-display font-medium text-foreground mb-2">03</div>
+              <div className="text-4xl font-display font-medium text-foreground mb-2">
+                <CountUp from={0} to={3} duration={1} padMinLength={2} startWhen={true} />
+              </div>
              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
                Langfristige Partnerschaft
              </h3>
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,105 +1,98 @@
-const Footer = () => {
-  const currentYear = new Date().getFullYear();
-
-  const links = {
-    services: [
-      { label: "Strategieberatung", href: "#services" },
-      { label: "UX/UI Design", href: "#services" },
-      { label: "Entwicklung", href: "#services" },
-      { label: "SEO & Support", href: "#services" },
-    ],
-    company: [
-      { label: "Über uns", href: "#about" },
-      { label: "Projekte", href: "#projects" },
-      { label: "Ablauf", href: "#process" },
-      { label: "Kontakt", href: "#contact" },
-    ],
-    legal: [
-      { label: "Impressum", href: "/impressum" },
-      { label: "Datenschutz", href: "/datenschutz" },
-      { label: "AGB", href: "/agb" },
-    ],
-  };
+import React from 'react';
+import Logo from '@/components/Logo';

+const DevStudio: React.FC = () => {
  return (
-    <footer className="bg-secondary/20 border-t border-border relative">
-      <div className="container mx-auto px-6 py-16">
-        <div className="grid md:grid-cols-4 gap-12 mb-16">
-          {/* Logo & Description */}
-          <div className="md:col-span-1">
-            <span className="text-xl font-display font-medium text-foreground tracking-tight mb-6 block">
-              webklar
-            </span>
-            <p className="text-muted-foreground text-sm leading-relaxed">
-              Maßgeschneiderte Weblösungen für Ihr Unternehmen. Sicher, zuverlässig und modern.
+    <p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
+      WEBklar
    </p>
-          </div>
-
-          {/* Services */}
-          <div>
-            <h4 className="label-tag mb-6">Leistungen</h4>
-            <ul className="space-y-3">
-              {links.services.map((link) => (
-                <li key={link.label}>
-                  <a
-                    href={link.href}
-                    className="text-muted-foreground hover:text-foreground transition-colors text-sm"
-                  >
-                    {link.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Company */}
-          <div>
-            <h4 className="label-tag mb-6">Unternehmen</h4>
-            <ul className="space-y-3">
-              {links.company.map((link) => (
-                <li key={link.label}>
-                  <a
-                    href={link.href}
-                    className="text-muted-foreground hover:text-foreground transition-colors text-sm"
-                  >
-                    {link.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Legal */}
-          <div>
-            <h4 className="label-tag mb-6">Rechtliches</h4>
-            <ul className="space-y-3">
-              {links.legal.map((link) => (
-                <li key={link.label}>
-                  <a
-                    href={link.href}
-                    className="text-muted-foreground hover:text-foreground transition-colors text-sm"
-                  >
-                    {link.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="divider mb-8" />
-        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-muted-foreground text-sm">
-            © {currentYear} webklar. Alle Rechte vorbehalten.
-          </p>
-          <div className="text-muted-foreground text-sm">
-            Made in Germany
-          </div>
-        </div>
-      </div>
-    </footer>
  );
 };

+const Footer: React.FC = () => {
+  return (
+    <div className="relative w-full overflow-hidden border-t border-white/[0.1] bg-black px-8 py-20 dark:border-white/[0.1] dark:bg-black">
+      <div className="mx-auto flex max-w-7xl flex-col items-start justify-between text-sm text-neutral-500 sm:flex-row md:px-8">
+        <div>
+          <div className="mr-0 mb-4 md:mr-4 md:flex">
+            <a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
+              <Logo width={30} height={30} />
+              <span className="font-medium text-white">WEBklar</span>
+            </a>
+          </div>
+          <div className="mt-2 ml-2">© copyright WEBklar 2024. All rights reserved.</div>
+        </div>
+        <div className="mt-10 grid grid-cols-2 items-start gap-10 sm:mt-0 md:mt-0 lg:grid-cols-4">
+          <div className="flex w-full flex-col justify-center space-y-4">
+            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Pages</p>
+            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">All Products</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Studio</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Clients</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Pricing</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Blog</a>
+              </li>
+            </ul>
+          </div>
+          <div className="flex flex-col justify-center space-y-4">
+            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Socials</p>
+            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Facebook</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Instagram</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Twitter</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">LinkedIn</a>
+              </li>
+            </ul>
+          </div>
+          <div className="flex flex-col justify-center space-y-4">
+            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Legal</p>
+            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/agb">AGBs</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/impressum">Impressum</a>
+              </li>
+            </ul>
+          </div>
+          <div className="flex flex-col justify-center space-y-4">
+            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Register</p>
+            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Sign Up</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Login</a>
+              </li>
+              <li className="list-none">
+                <a className="hover:text-neutral-300 transition-colors" href="/products">Forgot Password</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
+        WEBklar
+      </p>
+    </div>
+  );
+};
+
+export { DevStudio, Footer };
 export default Footer;
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,104 +1,100 @@
-import { useState, useEffect } from "react";
+"use client";
+
 import { Link } from "react-router-dom";
-import { Menu, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import {
+  Navbar,
+  NavBody,
+  NavItems,
+  MobileNav,
+  NavbarLogo,
+  NavbarButton,
+  MobileNavHeader,
+  MobileNavToggle,
+  MobileNavMenu,
+} from "@/components/ui/resizable-navbar";
+import Logo from "@/components/Logo";

 const Header = () => {
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 20);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  const navLinks = [
-    { href: "#about", label: "Über uns" },
-    { href: "#services", label: "Leistungen" },
-    { href: "#projects", label: "Projekte" },
-    { href: "#process", label: "Ablauf" },
+  const navItems = [
+    { name: "Über uns", link: "#about" },
+    { name: "Leistungen", link: "#services" },
+    { name: "Projekte", link: "#projects" },
+    { name: "Ablauf", link: "#process" },
  ];

+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
  return (
-    <header
-      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
-        isScrolled
-          ? "glass-nav py-4"
-          : "bg-transparent py-6"
-      }`}
-    >
-      <div className="container mx-auto px-6">
-        <div className="flex items-center justify-between">
-          {/* Logo */}
-          <a href="#" className="flex items-center gap-2 group">
-            <span className="text-xl font-display font-medium text-foreground tracking-tight">Webklar</span>
-          </a>
-
+    <div className="relative w-full">
+      <Navbar>
        {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center gap-10">
-            {navLinks.map((link) => (
-              <a
-                key={link.href}
-                href={link.href}
-                className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-sm font-medium uppercase tracking-wider"
-              >
-                {link.label}
-              </a>
-            ))}
-          </nav>
-
-          {/* CTA Button */}
-          <div className="hidden md:block">
+        <NavBody>
+          <NavbarLogo href="#">
+            <Logo width={30} height={30} />
+            <span className="font-display text-lg font-medium tracking-tight">
+              Webklar
+            </span>
+          </NavbarLogo>
+          <NavItems items={navItems} />
+          <div className="navbar-actions flex items-center gap-4">
            <Link to="/kontakt">
-              <Button 
-                className="btn-minimal rounded-full px-6 py-5 text-sm font-medium"
+              <NavbarButton
+                as="span"
+                variant="dark"
              >
                Kontakt
-              </Button>
+              </NavbarButton>
            </Link>
          </div>
+        </NavBody>

-          {/* Mobile Menu Button */}
-          <button
-            className="md:hidden p-2 text-foreground hover:text-muted-foreground transition-colors"
+        {/* Mobile Navigation */}
+        <MobileNav>
+          <MobileNavHeader>
+            <NavbarLogo href="#">
+              <Logo width={30} height={30} />
+              <span className="font-display text-lg font-medium tracking-tight">
+                Webklar
+              </span>
+            </NavbarLogo>
+            <MobileNavToggle
+              isOpen={isMobileMenuOpen}
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            aria-label="Toggle menu"
-          >
-            {isMobileMenuOpen ? (
-              <X className="w-6 h-6" />
-            ) : (
-              <Menu className="w-6 h-6" />
-            )}
-          </button>
-        </div>
+            />
+          </MobileNavHeader>

-        {/* Mobile Menu */}
-        {isMobileMenuOpen && (
-          <div className="md:hidden absolute top-full left-0 right-0 bg-background/98 backdrop-blur-xl border-b border-border p-6 animate-fade-in">
-            <nav className="flex flex-col gap-6">
-              {navLinks.map((link) => (
-                <a
-                  key={link.href}
-                  href={link.href}
-                  className="text-foreground hover:text-muted-foreground transition-colors text-lg font-medium uppercase tracking-wider"
-                  onClick={() => setIsMobileMenuOpen(false)}
+          <MobileNavMenu
+            isOpen={isMobileMenuOpen}
+            onClose={() => setIsMobileMenuOpen(false)}
          >
-                  {link.label}
+            {navItems.map((item, idx) => (
+              <a
+                key={`mobile-link-${idx}`}
+                href={item.link}
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="relative text-neutral-600 dark:text-neutral-300"
+              >
+                <span className="block font-medium uppercase tracking-wider">
+                  {item.name}
+                </span>
              </a>
            ))}
+            <div className="flex w-full flex-col gap-4">
              <Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
-                <Button className="btn-minimal rounded-full mt-4 py-5 text-sm font-medium w-full">
+                <NavbarButton
+                  as="span"
+                  variant="dark"
+                  className="block w-full text-center"
+                >
                  Kontakt
-                </Button>
+                </NavbarButton>
              </Link>
-            </nav>
            </div>
-        )}
+          </MobileNavMenu>
+        </MobileNav>
+      </Navbar>
    </div>
-    </header>
  );
 };

--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,12 +1,79 @@
-import { Link } from "react-router-dom";
-import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
 import { ArrowRight } from "lucide-react";
-import { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
+import Silk from "@/components/Silk";
+import CountUp from "@/components/CountUp";
+
+const SPARKLE_SVG = (
+  <svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+    />
+  </svg>
+);
+
+function DemoButtonLetters({ text }: { text: string }) {
+  // #region agent log
+  const chars = text.split("");
+  const spaceIndex = chars.findIndex((c) => c === " ");
+  const lastIndex = chars.length - 1;
+  const lastChar = chars[lastIndex];
+  fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      location: "Hero.tsx:DemoButtonLetters",
+      message: "Letter split for button text",
+      data: { text, len: chars.length, spaceIndex, spaceChar: spaceIndex >= 0 ? chars[spaceIndex] : null, lastIndex, lastChar },
+      timestamp: Date.now(),
+      sessionId: "debug-session",
+      hypothesisId: "A,C",
+    }),
+  }).catch(() => {});
+  // #endregion
+  return (
+    <>
+      {chars.map((char, i) => (
+        <span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
+          {char}
+        </span>
+      ))}
+    </>
+  );
+}

 const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026

 const Hero = () => {
+  const navigate = useNavigate();
  const [companyAge, setCompanyAge] = useState("");
+  const secondBtnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const el = secondBtnRef.current;
+    if (!el) return;
+    const firstTxtWrapper = el.querySelector(".txt-wrapper");
+    const letters = firstTxtWrapper ? firstTxtWrapper.querySelectorAll(".btn-letter") : [];
+    const spaceIdx = 8;
+    const lastIdx = 16;
+    const wSpace = letters[spaceIdx]?.getBoundingClientRect?.()?.width ?? -1;
+    const wLast = letters[lastIdx]?.getBoundingClientRect?.()?.width ?? -1;
+    fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        location: "Hero.tsx:useEffect:measure",
+        message: "Measured btn-letter widths (space + last)",
+        data: { letterCount: letters.length, wSpace, wLast, spaceIdx, lastIdx },
+        timestamp: Date.now(),
+        sessionId: "debug-session",
+        runId: "post-fix",
+        hypothesisId: "B,D,E",
+      }),
+    }).catch(() => {});
+  }, []);

  useEffect(() => {
    const calculateAge = () => {
@@ -16,28 +83,35 @@ const Hero = () => {
      const totalSeconds = Math.floor(diff / 1000);
      const days = Math.floor(totalSeconds / (60 * 60 * 24));
      const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
-      const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
-      const seconds = totalSeconds % 60;
      
      const years = Math.floor(days / 365);
      const remainingDays = days % 365;
      
      if (years > 0) {
-        setCompanyAge(`${years}J ${remainingDays}T ${hours}h ${minutes}m ${seconds}s`);
+        setCompanyAge(`${years}J ${remainingDays}T ${hours}h`);
      } else {
-        setCompanyAge(`${days}T ${hours}h ${minutes}m ${seconds}s`);
+        setCompanyAge(`${days}T ${hours}h`);
      }
    };

    calculateAge();
-    const interval = setInterval(calculateAge, 1000); // Update every second
+    const interval = setInterval(calculateAge, 60 * 60 * 1000); // Update every hour (only days/hours shown)
    return () => clearInterval(interval);
  }, []);

  return (
-    <section className="relative min-h-screen flex flex-col justify-center bg-background overflow-hidden pt-20">
-      {/* Subtle grid lines */}
-      <div className="absolute inset-0 grid-lines opacity-30" />
+    <section className="relative min-h-screen flex flex-col justify-center overflow-hidden pt-20">
+      {/* Silk animated background */}
+      <div className="absolute inset-0 z-0 w-full h-full">
+        <Silk
+          speed={3}
+          scale={0.5}
+          color="#6a6a6a"
+          noiseIntensity={4
+          }
+          rotation={0}
+        />
+      </div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="max-w-6xl">
@@ -57,29 +131,55 @@ const Hero = () => {
            Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen.
          </p>

-          {/* Kurztext */}
-          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mb-8 animate-fade-in" style={{ animationDelay: '0.4s' }}>
-            Die meisten Unternehmen arbeiten mit zu vielen Tools, manuellen Prozessen und ineffizienten Abläufen. Wir ersetzen Chaos durch Struktur und bauen Ihnen eine digitale Infrastruktur, die Zeit spart, Fehler reduziert und Wachstum planbar macht.
-          </p>
-
          {/* CTA Buttons */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
-            <Link to="/kontakt">
-              <Button
-                size="lg"
-                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
+          <div className="flex flex-col sm:flex-row flex-nowrap items-stretch sm:items-center gap-3 sm:gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
+            <div className="btn-wrapper shrink-0 w-full sm:w-auto">
+              <button
+                type="button"
+                className="btn btn-primary w-full sm:w-auto justify-center"
+                onClick={() => navigate("/kontakt")}
+                aria-label="Kostenlose Potenzialanalyse sichern"
              >
-                Kostenlose Potenzialanalyse sichern
-                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
-              </Button>
-            </Link>
-            <Button
-              size="lg"
-              variant="outline"
-              className="btn-outline rounded-full px-8 py-6 text-base font-medium"
+                <ArrowRight className="btn-icon" size={24} strokeWidth={2} aria-hidden />
+                <div className="txt-wrapper">
+                  <span className="txt-width-helper" aria-hidden="true">
+                    <DemoButtonLetters text="Kostenlose Potenzialanalyse sichern" />
+                  </span>
+                  <div className="txt-1">
+                    <DemoButtonLetters text="Kostenlose Potenzialanalyse sichern" />
+                  </div>
+                  <div className="txt-2">
+                    <DemoButtonLetters text="Wird weitergeleitet..." />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div className="btn-wrapper w-full sm:w-auto">
+              <button
+                ref={secondBtnRef}
+                type="button"
+                className="btn w-full sm:w-auto justify-center"
+                onClick={() => {
+                  const el = document.getElementById("projects");
+                  if (el) el.scrollIntoView({ behavior: "smooth" });
+                  else navigate("/#projects");
+                }}
+                aria-label="Projekte ansehen"
              >
-              System-Demo anfordern
-            </Button>
+                {SPARKLE_SVG}
+                <div className="txt-wrapper">
+                  <span className="txt-width-helper" aria-hidden="true">
+                    <DemoButtonLetters text="Projekte ansehen" />
+                  </span>
+                  <div className="txt-1">
+                    <DemoButtonLetters text="Projekte ansehen" />
+                  </div>
+                  <div className="txt-2">
+                    <DemoButtonLetters text="Wird geladen..." />
+                  </div>
+                </div>
+              </button>
+            </div>
          </div>

          {/* Trust Line */}
@@ -94,7 +194,17 @@ const Hero = () => {
        <div className="divider mb-12" />
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
          <div className="animate-fade-in" style={{ animationDelay: '0.6s' }}>
-            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">10+</div>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">
+              <CountUp
+                from={0}
+                to={10}
+                direction="up"
+                duration={1.2}
+                className="count-up-text"
+                startWhen={true}
+                suffix="+"
+              />
+            </div>
            <div className="label-tag">Projekte</div>
          </div>
          <div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
@@ -102,7 +212,17 @@ const Hero = () => {
            <div className="label-tag">Am Markt</div>
          </div>
          <div className="animate-fade-in" style={{ animationDelay: '0.8s' }}>
-            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">99,9%</div>
+            <div className="stat-number text-4xl md:text-5xl text-foreground mb-2">
+              <CountUp
+                from={0}
+                to={99.9}
+                direction="up"
+                duration={1.5}
+                className="count-up-text"
+                startWhen={true}
+                suffix="%"
+              />
+            </div>
            <div className="label-tag">Systemverfügbarkeit</div>
          </div>
          <div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>
--- a/src/components/LightRays.css
+++ b/src/components/LightRays.css
@@ -0,0 +1,16 @@
+.light-rays-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  pointer-events: none;
+  z-index: 3;
+  overflow: hidden;
+}
+
+.light-rays-fallback {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
--- a/src/components/LightRays.tsx
+++ b/src/components/LightRays.tsx
@@ -0,0 +1,486 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+// @ts-expect-error ogl has no type definitions
+import { Renderer, Program, Triangle, Mesh } from "ogl";
+import "./LightRays.css";
+
+const DEFAULT_COLOR = "#ffffff";
+
+const hexToRgb = (hex: string): [number, number, number] => {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return m
+    ? [
+        parseInt(m[1], 16) / 255,
+        parseInt(m[2], 16) / 255,
+        parseInt(m[3], 16) / 255,
+      ]
+    : [1, 1, 1];
+};
+
+type RaysOrigin =
+  | "top-left"
+  | "top-right"
+  | "top-center"
+  | "left"
+  | "right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+const getAnchorAndDir = (
+  origin: RaysOrigin,
+  w: number,
+  h: number
+): { anchor: [number, number]; dir: [number, number] } => {
+  const outside = 0.2;
+  switch (origin) {
+    case "top-left":
+      return { anchor: [0, -outside * h], dir: [0, 1] };
+    case "top-right":
+      return { anchor: [w, -outside * h], dir: [0, 1] };
+    case "left":
+      return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] };
+    case "right":
+      return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] };
+    case "bottom-left":
+      return { anchor: [0, (1 + outside) * h], dir: [0, -1] };
+    case "bottom-center":
+      return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] };
+    case "bottom-right":
+      return { anchor: [w, (1 + outside) * h], dir: [0, -1] };
+    default:
+      return { anchor: [0.5 * w, -outside * h], dir: [0, 1] };
+  }
+};
+
+export interface LightRaysProps {
+  raysOrigin?: RaysOrigin;
+  raysColor?: string;
+  raysSpeed?: number;
+  lightSpread?: number;
+  rayLength?: number;
+  pulsating?: boolean;
+  fadeDistance?: number;
+  saturation?: number;
+  followMouse?: boolean;
+  mouseInfluence?: number;
+  noiseAmount?: number;
+  distortion?: number;
+  className?: string;
+}
+
+export default function LightRays({
+  raysOrigin = "top-center",
+  raysColor = DEFAULT_COLOR,
+  raysSpeed = 1,
+  lightSpread = 1,
+  rayLength = 2,
+  pulsating = false,
+  fadeDistance = 1.0,
+  saturation = 1.0,
+  followMouse = true,
+  mouseInfluence = 0.1,
+  noiseAmount = 0.0,
+  distortion = 0.0,
+  className = "",
+}: LightRaysProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const uniformsRef = useRef<Record<string, { value: unknown }> | null>(null);
+  const rendererRef = useRef<InstanceType<typeof Renderer> | null>(null);
+  const mouseRef = useRef({ x: 0.5, y: 0.5 });
+  const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
+  const animationIdRef = useRef<number | null>(null);
+  const meshRef = useRef<InstanceType<typeof Mesh> | null>(null);
+  const cleanupFunctionRef = useRef<(() => void) | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [useFallback, setUseFallback] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.1 }
+    );
+
+    observerRef.current.observe(containerRef.current);
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible || !containerRef.current) return;
+
+    setUseFallback(false);
+    if (cleanupFunctionRef.current) {
+      cleanupFunctionRef.current();
+      cleanupFunctionRef.current = null;
+    }
+
+    const initializeWebGL = async () => {
+      if (!containerRef.current) return;
+
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      if (!containerRef.current) return;
+
+      const isMobile =
+        typeof window !== "undefined" &&
+        (window.innerWidth <= 768 || "ontouchstart" in window);
+      const dpr = isMobile ? 1 : Math.min(window.devicePixelRatio, 2);
+
+      try {
+        const renderer = new Renderer({
+          dpr,
+          alpha: true,
+        });
+        rendererRef.current = renderer;
+
+        const gl = renderer.gl;
+        gl.canvas.style.width = "100%";
+        gl.canvas.style.height = "100%";
+
+        while (containerRef.current.firstChild) {
+          containerRef.current.removeChild(containerRef.current.firstChild);
+        }
+        containerRef.current.appendChild(gl.canvas);
+
+        const vert = `
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = position * 0.5 + 0.5;
+  gl_Position = vec4(position, 0.0, 1.0);
+}`;
+
+        const frag = `precision mediump float;
+
+uniform float iTime;
+uniform vec2  iResolution;
+
+uniform vec2  rayPos;
+uniform vec2  rayDir;
+uniform vec3  raysColor;
+uniform float raysSpeed;
+uniform float lightSpread;
+uniform float rayLength;
+uniform float pulsating;
+uniform float fadeDistance;
+uniform float saturation;
+uniform vec2  mousePos;
+uniform float mouseInfluence;
+uniform float noiseAmount;
+uniform float distortion;
+
+varying vec2 vUv;
+
+float noise(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+}
+
+float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
+                  float seedA, float seedB, float speed) {
+  vec2 sourceToCoord = coord - raySource;
+  vec2 dirNorm = normalize(sourceToCoord);
+  float cosAngle = dot(dirNorm, rayRefDirection);
+
+  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
+  
+  float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
+
+  float distance = length(sourceToCoord);
+  float maxDistance = iResolution.x * rayLength;
+  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
+  
+  float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
+  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
+
+  float baseStrength = clamp(
+    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
+    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
+    0.0, 1.0
+  );
+
+  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
+  
+  vec2 finalRayDir = rayDir;
+  if (mouseInfluence > 0.0) {
+    vec2 mouseScreenPos = mousePos * iResolution.xy;
+    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
+    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
+  }
+
+  vec4 rays1 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,
+                           1.5 * raysSpeed);
+  vec4 rays2 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,
+                           1.1 * raysSpeed);
+
+  fragColor = rays1 * 0.5 + rays2 * 0.4;
+
+  if (noiseAmount > 0.0) {
+    float n = noise(coord * 0.01 + iTime * 0.1);
+    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
+  }
+
+  float brightness = 1.0 - (coord.y / iResolution.y);
+  fragColor.x *= 0.1 + brightness * 0.8;
+  fragColor.y *= 0.3 + brightness * 0.6;
+  fragColor.z *= 0.5 + brightness * 0.5;
+
+  if (saturation != 1.0) {
+    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
+    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
+  }
+
+  fragColor.rgb *= raysColor;
+}
+
+void main() {
+  vec4 color;
+  mainImage(color, gl_FragCoord.xy);
+  gl_FragColor  = color;
+}`;
+
+        const uniforms = {
+        iTime: { value: 0 },
+        iResolution: { value: [1, 1] as [number, number] },
+
+        rayPos: { value: [0, 0] as [number, number] },
+        rayDir: { value: [0, 1] as [number, number] },
+
+        raysColor: { value: hexToRgb(raysColor) },
+        raysSpeed: { value: raysSpeed },
+        lightSpread: { value: lightSpread },
+        rayLength: { value: rayLength },
+        pulsating: { value: pulsating ? 1.0 : 0.0 },
+        fadeDistance: { value: fadeDistance },
+        saturation: { value: saturation },
+        mousePos: { value: [0.5, 0.5] as [number, number] },
+        mouseInfluence: { value: mouseInfluence },
+        noiseAmount: { value: noiseAmount },
+        distortion: { value: distortion },
+      };
+      uniformsRef.current = uniforms as Record<string, { value: unknown }>;
+
+        const geometry = new Triangle(gl);
+        const program = new Program(gl, {
+          vertex: vert,
+          fragment: frag,
+          uniforms,
+        });
+        const mesh = new Mesh(gl, { geometry, program });
+        meshRef.current = mesh;
+
+        const updatePlacement = () => {
+          if (!containerRef.current || !renderer) return;
+
+          renderer.dpr = isMobile ? 1 : Math.min(window.devicePixelRatio, 2);
+
+        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
+        renderer.setSize(wCSS, hCSS);
+
+        const dpr = renderer.dpr;
+        const w = wCSS * dpr;
+        const h = hCSS * dpr;
+
+        uniforms.iResolution.value = [w, h];
+
+        const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h);
+          uniforms.rayPos.value = anchor;
+          uniforms.rayDir.value = dir;
+        };
+
+        const loop = (t: number) => {
+        if (!rendererRef.current || !uniformsRef.current || !meshRef.current) {
+          return;
+        }
+
+        const uniforms = uniformsRef.current as typeof uniforms;
+        uniforms.iTime.value = t * 0.001;
+
+        if (followMouse && mouseInfluence > 0.0) {
+          const smoothing = 0.92;
+
+          smoothMouseRef.current.x =
+            smoothMouseRef.current.x * smoothing +
+            mouseRef.current.x * (1 - smoothing);
+          smoothMouseRef.current.y =
+            smoothMouseRef.current.y * smoothing +
+            mouseRef.current.y * (1 - smoothing);
+
+          uniforms.mousePos.value = [
+            smoothMouseRef.current.x,
+            smoothMouseRef.current.y,
+          ];
+        }
+
+          try {
+            renderer.render({ scene: mesh });
+            animationIdRef.current = requestAnimationFrame(loop);
+          } catch (error) {
+            console.warn("WebGL rendering error:", error);
+            return;
+          }
+        };
+
+        window.addEventListener("resize", updatePlacement);
+        const resizeObserver =
+          typeof ResizeObserver !== "undefined" &&
+          new ResizeObserver(() => updatePlacement());
+        if (resizeObserver && containerRef.current) {
+          resizeObserver.observe(containerRef.current);
+        }
+        updatePlacement();
+        animationIdRef.current = requestAnimationFrame(loop);
+
+        cleanupFunctionRef.current = () => {
+          if (resizeObserver && containerRef.current) {
+            resizeObserver.unobserve(containerRef.current);
+          }
+          if (animationIdRef.current) {
+          cancelAnimationFrame(animationIdRef.current);
+          animationIdRef.current = null;
+        }
+
+        window.removeEventListener("resize", updatePlacement);
+
+        if (renderer) {
+          try {
+            const canvas = renderer.gl.canvas;
+            const loseContextExt =
+              renderer.gl.getExtension("WEBGL_lose_context");
+            if (loseContextExt) {
+              loseContextExt.loseContext();
+            }
+
+            if (canvas && canvas.parentNode) {
+              canvas.parentNode.removeChild(canvas);
+            }
+          } catch (error) {
+            console.warn("Error during WebGL cleanup:", error);
+          }
+        }
+
+          rendererRef.current = null;
+          uniformsRef.current = null;
+          meshRef.current = null;
+        };
+      } catch (error) {
+        console.warn("LightRays WebGL init failed (e.g. on mobile):", error);
+        setUseFallback(true);
+      }
+    };
+
+    initializeWebGL();
+
+    return () => {
+      if (cleanupFunctionRef.current) {
+        cleanupFunctionRef.current();
+        cleanupFunctionRef.current = null;
+      }
+    };
+  }, [
+    isVisible,
+    raysOrigin,
+    raysColor,
+    raysSpeed,
+    lightSpread,
+    rayLength,
+    pulsating,
+    fadeDistance,
+    saturation,
+    followMouse,
+    mouseInfluence,
+    noiseAmount,
+    distortion,
+  ]);
+
+  useEffect(() => {
+    if (!uniformsRef.current || !containerRef.current || !rendererRef.current)
+      return;
+
+    const u = uniformsRef.current as Record<string, { value: unknown }>;
+    const renderer = rendererRef.current;
+
+    u.raysColor.value = hexToRgb(raysColor);
+    u.raysSpeed.value = raysSpeed;
+    u.lightSpread.value = lightSpread;
+    u.rayLength.value = rayLength;
+    u.pulsating.value = pulsating ? 1.0 : 0.0;
+    u.fadeDistance.value = fadeDistance;
+    u.saturation.value = saturation;
+    u.mouseInfluence.value = mouseInfluence;
+    u.noiseAmount.value = noiseAmount;
+    u.distortion.value = distortion;
+
+    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
+    const dpr = renderer.dpr;
+    const { anchor, dir } = getAnchorAndDir(
+      raysOrigin,
+      wCSS * dpr,
+      hCSS * dpr
+    );
+    u.rayPos.value = anchor;
+    u.rayDir.value = dir;
+  }, [
+    raysColor,
+    raysSpeed,
+    lightSpread,
+    raysOrigin,
+    rayLength,
+    pulsating,
+    fadeDistance,
+    saturation,
+    mouseInfluence,
+    noiseAmount,
+    distortion,
+  ]);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current || !rendererRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      mouseRef.current = { x, y };
+    };
+
+    if (followMouse) {
+      window.addEventListener("mousemove", handleMouseMove);
+      return () => window.removeEventListener("mousemove", handleMouseMove);
+    }
+  }, [followMouse]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`light-rays-container ${className}`.trim()}
+    >
+      {useFallback && (
+        <div
+          className="light-rays-fallback"
+          style={{
+            background: `linear-gradient(to bottom, ${raysColor}50 0%, ${raysColor}20 25%, ${raysColor}08 50%, transparent 85%)`,
+          }}
+          aria-hidden
+        />
+      )}
+    </div>
+  );
+}
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -0,0 +1,39 @@
+interface LogoProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+const Logo = ({ className, width = 30, height = 30 }: LogoProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 512 512"
+    className={className}
+    aria-hidden
+  >
+    {/* rounded square background */}
+    <rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF" />
+    {/* tilted oval */}
+    <ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)" />
+    {/* small dot */}
+    <circle cx="356" cy="172" r="18" fill="#FFFFFF" />
+    {/* enlarged sparkle star */}
+    <g transform="translate(256 256) rotate(-28)">
+      <path
+        d="
+          M 0,-170
+          C 22,-105 60,-72 120,-56
+          C 60,-40 22,-8 0,64
+          C -22,-8 -60,-40 -120,-56
+          C -60,-72 -22,-105 0,-170
+          Z
+        "
+        fill="#FFFFFF"
+      />
+    </g>
+  </svg>
+);
+
+export default Logo;
--- a/src/components/ProblemSection.tsx
+++ b/src/components/ProblemSection.tsx
@@ -1,4 +1,6 @@
 import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
+import { LampTop } from "@/components/ui/lamp";
+import LightRays from "@/components/LightRays";

 const ProblemSection = () => {
  const problems = [
@@ -21,8 +23,25 @@ const ProblemSection = () => {
  ];

  return (
-    <section className="py-24 md:py-32 bg-background relative">
-      <div className="container mx-auto px-6">
+    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
+      <div className="absolute inset-0 w-full overflow-hidden z-0">
+        <LightRays
+          raysOrigin="top-center"
+          raysColor="#ef4444"
+          raysSpeed={1}
+          lightSpread={0.5}
+          rayLength={3}
+          followMouse={false}
+          mouseInfluence={0}
+          noiseAmount={0}
+          distortion={0}
+          pulsating
+          fadeDistance={2}
+          saturation={2}
+        />
+      </div>
+      <LampTop />
+      <div className="container mx-auto px-6 relative z-10">
        {/* Section Header */}
        <div className="mb-16 md:mb-20 max-w-4xl">
          <div className="label-tag mb-4">Das Problem</div>
@@ -39,7 +58,7 @@ const ProblemSection = () => {
          {problems.map((problem, index) => (
            <div
              key={index}
-              className="flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
+              className="problem-section-tint flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
            >
              <div className="w-10 h-10 rounded-full border border-destructive/30 bg-destructive/10 flex items-center justify-center flex-shrink-0">
                <problem.icon className="w-5 h-5 text-destructive" />
--- a/src/components/Process.tsx
+++ b/src/components/Process.tsx
@@ -1,22 +1,24 @@
+import CountUp from "@/components/CountUp";
+
 const Process = () => {
  const steps = [
    {
-      number: "01",
+      number: 1,
      title: "Erstgespräch",
      description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
    },
    {
-      number: "02",
+      number: 2,
      title: "Konzept & Design",
      description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
    },
    {
-      number: "03",
+      number: 3,
      title: "Entwicklung",
      description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
    },
    {
-      number: "04",
+      number: 4,
      title: "Launch & Support",
      description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
    },
@@ -45,13 +47,22 @@ const Process = () => {
              {/* Number */}
              <div className="hidden md:block">
                <span className="stat-number text-6xl text-border group-hover:text-muted-foreground/30 transition-colors">
-                  {step.number}
+                  <CountUp
+                    from={0}
+                    to={step.number}
+                    direction="up"
+                    duration={1}
+                    padMinLength={2}
+                    startWhen={true}
+                  />
                </span>
              </div>

              {/* Content */}
              <div className="flex-1">
-                <span className="md:hidden label-tag mb-2 block">{step.number}</span>
+                <span className="md:hidden label-tag mb-2 block">
+                  <CountUp from={0} to={step.number} duration={1} padMinLength={2} startWhen={true} />
+                </span>
                <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
                  {step.title}
                </h3>
--- a/src/components/ProjectShowcase.tsx
+++ b/src/components/ProjectShowcase.tsx
@@ -1,30 +1,42 @@
 import { ArrowUpRight } from "lucide-react";

-const projects = [
+type Project = {
+  title: string;
+  description: string;
+  image: string;
+  url: string;
+};
+
+const projects: Project[] = [
  {
-    title: "Triple AI",
-    description: "Webentwicklung / UI Design / Custom Code",
-    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
+    title: "Email Sorter",
+    description: "E-Mails automatisch sortieren",
+    image: "/project%20pics/emailsorter.png",
+    url: "https://emailsorter.webklar.com/",
  },
  {
    title: "Neutral",
    description: "Webentwicklung / Custom Code",
    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
+    url: "#",
  },
  {
    title: "Verbatim Labs",
    description: "Webentwicklung / UI Design / Custom Code",
    image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
+    url: "#",
  },
  {
    title: "JMK Engineers",
    description: "Webentwicklung / UI Design / Custom Code",
    image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
+    url: "#",
  },
  {
    title: "GOODZ Club",
    description: "Webentwicklung / Custom Code / Lokalisierung",
    image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
+    url: "#",
  },
 ];

@@ -45,7 +57,9 @@ const ProjectShowcase = () => {
          {projects.map((project, index) => (
            <a
              key={project.title}
-              href="#"
+              href={project.url}
+              target={project.url.startsWith("http") ? "_blank" : undefined}
+              rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
              className="group block project-card rounded-lg p-6 md:p-8"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
--- a/src/components/Silk.tsx
+++ b/src/components/Silk.tsx
@@ -0,0 +1,158 @@
+/* eslint-disable react/no-unknown-property */
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { forwardRef, useRef, useMemo, useLayoutEffect } from "react";
+import { Color, type Mesh, type ShaderMaterial } from "three";
+
+const hexToNormalizedRGB = (hex: string): [number, number, number] => {
+  hex = hex.replace("#", "");
+  return [
+    parseInt(hex.slice(0, 2), 16) / 255,
+    parseInt(hex.slice(2, 4), 16) / 255,
+    parseInt(hex.slice(4, 6), 16) / 255,
+  ];
+};
+
+const vertexShader = `
+varying vec2 vUv;
+varying vec3 vPosition;
+
+void main() {
+  vPosition = position;
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+const fragmentShader = `
+varying vec2 vUv;
+varying vec3 vPosition;
+
+uniform float uTime;
+uniform vec3  uColor;
+uniform float uSpeed;
+uniform float uScale;
+uniform float uRotation;
+uniform float uNoiseIntensity;
+
+const float e = 2.71828182845904523536;
+
+float noise(vec2 texCoord) {
+  float G = e;
+  vec2  r = (G * sin(G * texCoord));
+  return fract(r.x * r.y * (1.0 + texCoord.x));
+}
+
+vec2 rotateUvs(vec2 uv, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  mat2  rot = mat2(c, -s, s, c);
+  return rot * uv;
+}
+
+void main() {
+  float rnd        = noise(gl_FragCoord.xy);
+  vec2  uv         = rotateUvs(vUv * uScale, uRotation);
+  vec2  tex        = uv * uScale;
+  float tOffset    = uSpeed * uTime;
+
+  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);
+
+  float pattern = 0.6 +
+                  0.4 * sin(5.0 * (tex.x + tex.y +
+                                   cos(3.0 * tex.x + 5.0 * tex.y) +
+                                   0.02 * tOffset) +
+                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));
+
+  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;
+  col.a = 1.0;
+  gl_FragColor = col;
+}
+`;
+
+type SilkPlaneProps = {
+  uniforms: {
+    uSpeed: { value: number };
+    uScale: { value: number };
+    uNoiseIntensity: { value: number };
+    uColor: { value: Color };
+    uRotation: { value: number };
+    uTime: { value: number };
+  };
+};
+
+const SilkPlane = forwardRef<Mesh, SilkPlaneProps>(function SilkPlane(
+  { uniforms },
+  ref
+) {
+  const { viewport } = useThree();
+
+  useLayoutEffect(() => {
+    if (ref && typeof ref !== "function" && ref.current) {
+      ref.current.scale.set(viewport.width, viewport.height, 1);
+    }
+  }, [ref, viewport]);
+
+  useFrame((_, delta) => {
+    if (ref && typeof ref !== "function" && ref.current) {
+      const mat = ref.current.material as ShaderMaterial & {
+        uniforms: { uTime: { value: number } };
+      };
+      if (mat.uniforms?.uTime) mat.uniforms.uTime.value += 0.1 * delta;
+    }
+  });
+
+  return (
+    <mesh ref={ref}>
+      <planeGeometry args={[1, 1, 1, 1]} />
+      <shaderMaterial
+        uniforms={uniforms}
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+      />
+    </mesh>
+  );
+});
+SilkPlane.displayName = "SilkPlane";
+
+type SilkProps = {
+  speed?: number;
+  scale?: number;
+  color?: string;
+  noiseIntensity?: number;
+  rotation?: number;
+};
+
+const Silk = ({
+  speed = 5,
+  scale = 1,
+  color = "#7B7481",
+  noiseIntensity = 1.5,
+  rotation = 0,
+}: SilkProps) => {
+  const meshRef = useRef<Mesh>(null);
+
+  const uniforms = useMemo(
+    () => ({
+      uSpeed: { value: speed },
+      uScale: { value: scale },
+      uNoiseIntensity: { value: noiseIntensity },
+      uColor: { value: new Color(...hexToNormalizedRGB(color)) },
+      uRotation: { value: rotation },
+      uTime: { value: 0 },
+    }),
+    [speed, scale, noiseIntensity, color, rotation]
+  );
+
+  return (
+    <Canvas
+      dpr={[1, 2]}
+      frameloop="always"
+      style={{ width: "100%", height: "100%" }}
+      camera={{ position: [0, 0, 5], fov: 75 }}
+    >
+      <SilkPlane ref={meshRef} uniforms={uniforms} />
+    </Canvas>
+  );
+};
+
+export default Silk;
--- a/src/components/SolutionSection.tsx
+++ b/src/components/SolutionSection.tsx
@@ -1,6 +1,8 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, CheckCircle2 } from "lucide-react";
+import { LampTop } from "@/components/ui/lamp";
+import LightRays from "@/components/LightRays";

 const SolutionSection = () => {
  const benefits = [
@@ -10,8 +12,25 @@ const SolutionSection = () => {
  ];

  return (
-    <section className="py-24 md:py-32 bg-background relative">
-      <div className="container mx-auto px-6">
+    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
+      <div className="absolute inset-0 w-full overflow-hidden z-0">
+        <LightRays
+          raysOrigin="top-center"
+          raysColor="#22d3ee"
+          raysSpeed={1}
+          lightSpread={0.5}
+          rayLength={3}
+          followMouse={false}
+          mouseInfluence={0}
+          noiseAmount={0}
+          distortion={0}
+          pulsating
+          fadeDistance={2}
+          saturation={2}
+        />
+      </div>
+      <LampTop lineClassName="bg-cyan-400" />
+      <div className="container mx-auto px-6 relative z-10">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Left Content */}
          <div>
@@ -47,7 +66,7 @@ const SolutionSection = () => {

          {/* Right Content - Visual Element */}
          <div className="relative">
-            <div className="aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
+            <div className="solution-section-tint aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
              <div className="space-y-6">
                <div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
                <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">
--- a/src/components/Values.tsx
+++ b/src/components/Values.tsx
@@ -35,8 +35,17 @@ const Values = () => {
  ];

  return (
-    <section id="features" className="py-24 md:py-32 bg-background relative">
-      <div className="container mx-auto px-6">
+    <section id="features" className="py-24 md:py-32 bg-background relative overflow-hidden">
+      {/* Hintergrundbild: kleiner, leicht transparent */}
+      <div
+        className="absolute inset-0 bg-right bg-no-repeat opacity-[0.3]"
+        style={{
+          backgroundImage: "url(/backgroud_effect.png)",
+          backgroundSize: "45%",
+        }}
+        aria-hidden
+      />
+      <div className="container mx-auto px-6 relative z-10">
        {/* Section Header */}
        <div className="mb-16 md:mb-24 max-w-3xl">
          <div className="label-tag mb-4">Was Sie bekommen</div>
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
  variants: {
    variant: {
-      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      default: "btn-primary-style rounded-full bg-[hsl(198,93%,42%)] text-white hover:bg-[hsl(198,93%,48%)] border border-white/20",
      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
--- a/src/components/ui/lamp.tsx
+++ b/src/components/ui/lamp.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+const S = 2.5;
+
+export const LampTop = ({
+  className,
+  lineClassName = "bg-red-500",
+  children,
+}: {
+  className?: string;
+  lineClassName?: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "absolute top-0 left-0 right-0 w-full min-h-0 pointer-events-none z-50 flex items-start justify-center",
+        className
+      )}
+    >
+      <motion.div
+        initial={{ width: `${15 * S}rem` }}
+        whileInView={{ width: `${30 * S}rem` }}
+        transition={{
+          delay: 0.3,
+          duration: 0.8,
+          ease: "easeInOut",
+        }}
+        className={cn("absolute top-0 left-1/2 -translate-x-1/2 h-0.5", lineClassName)}
+        style={{ width: `${30 * S}rem` }}
+      />
+      {children}
+    </div>
+  );
+};
--- a/src/components/ui/resizable-navbar.tsx
+++ b/src/components/ui/resizable-navbar.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { IconMenu2, IconX } from "@tabler/icons-react";
+import {
+  motion,
+  AnimatePresence,
+  useScroll,
+  useMotionValueEvent,
+} from "motion/react";
+import React, { useRef, useState } from "react";
+
+interface NavbarProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Navbar = ({ children, className }: NavbarProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollY } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+  const [visible, setVisible] = useState(false);
+
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    if (latest > 100) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      className={cn("fixed inset-x-0 top-0 z-40 w-full", className)}
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, { visible } as { visible: boolean })
+          : child
+      )}
+    </motion.div>
+  );
+};
+
+interface NavBodyProps {
+  children: React.ReactNode;
+  className?: string;
+  visible?: boolean;
+}
+
+export const NavBody = ({ children, className, visible }: NavBodyProps) => {
+  return (
+    <motion.div
+      animate={{
+        backdropFilter: visible ? "blur(10px)" : "none",
+        boxShadow: visible
+          ? "0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset"
+          : "none",
+        width: visible ? "40%" : "100%",
+        y: visible ? 20 : 0,
+      }}
+      transition={{
+        type: "spring",
+        stiffness: 200,
+        damping: 50,
+      }}
+      style={{
+        minWidth: "800px",
+      }}
+      className={cn(
+        "relative z-[60] mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full bg-transparent px-4 py-2 lg:flex",
+        "text-white [&_a]:text-white [&_a:hover]:text-white/90 [&_.navbar-actions_a]:!text-black",
+        visible && "bg-black/90",
+        className
+      )}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface NavItem {
+  name: string;
+  link: string;
+}
+
+interface NavItemsProps {
+  items: NavItem[];
+  className?: string;
+  onItemClick?: () => void;
+}
+
+export const NavItems = ({
+  items,
+  className,
+  onItemClick,
+}: NavItemsProps) => {
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  return (
+    <motion.div
+      onMouseLeave={() => setHovered(null)}
+      className={cn(
+        "absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2",
+        className
+      )}
+    >
+      {items.map((item, idx) => (
+        <a
+          onMouseEnter={() => setHovered(idx)}
+          onClick={onItemClick}
+          className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300"
+          key={`link-${idx}`}
+          href={item.link}
+        >
+          {hovered === idx && (
+            <motion.div
+              layoutId="hovered"
+              className="absolute inset-0 h-full w-full rounded-full bg-white/10"
+            />
+          )}
+          <span className="relative z-20">{item.name}</span>
+        </a>
+      ))}
+    </motion.div>
+  );
+};
+
+interface MobileNavProps {
+  children: React.ReactNode;
+  className?: string;
+  visible?: boolean;
+}
+
+export const MobileNav = ({
+  children,
+  className,
+  visible,
+}: MobileNavProps) => {
+  return (
+    <motion.div
+      animate={{
+        backdropFilter: visible ? "blur(10px)" : "none",
+        boxShadow: visible
+          ? "0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset"
+          : "none",
+        width: visible ? "90%" : "100%",
+        paddingRight: visible ? "12px" : "0px",
+        paddingLeft: visible ? "12px" : "0px",
+        borderRadius: visible ? "4px" : "2rem",
+        y: visible ? 20 : 0,
+      }}
+      transition={{
+        type: "spring",
+        stiffness: 200,
+        damping: 50,
+      }}
+      className={cn(
+        "relative z-50 mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between bg-transparent px-0 py-2 lg:hidden",
+        "[&>div:first-child]:text-white [&>div:first-child_a]:text-white [&>div:first-child_svg]:text-white",
+        visible && "bg-black/90",
+        className
+      )}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface MobileNavHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const MobileNavHeader = ({
+  children,
+  className,
+}: MobileNavHeaderProps) => {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-row items-center justify-between",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface MobileNavMenuProps {
+  children: React.ReactNode;
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const MobileNavMenu = ({
+  children,
+  className,
+  isOpen,
+}: MobileNavMenuProps) => {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className={cn(
+            "absolute inset-x-0 top-16 z-50 flex w-full flex-col items-start justify-start gap-4 rounded-lg bg-white px-4 py-8 shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset] dark:bg-neutral-950",
+            className
+          )}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+interface MobileNavToggleProps {
+  isOpen: boolean;
+  onClick: () => void;
+}
+
+export const MobileNavToggle = ({ isOpen, onClick }: MobileNavToggleProps) => {
+  return isOpen ? (
+    <IconX
+      className="h-6 w-6 cursor-pointer text-black dark:text-white"
+      onClick={onClick}
+    />
+  ) : (
+    <IconMenu2
+      className="h-6 w-6 cursor-pointer text-black dark:text-white"
+      onClick={onClick}
+    />
+  );
+};
+
+interface NavbarLogoProps {
+  href?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const NavbarLogo = ({
+  href = "#",
+  logoSrc,
+  logoAlt = "Logo",
+  children,
+  className,
+}: NavbarLogoProps) => {
+  return (
+    <a
+      href={href}
+      className={cn(
+        "relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-black dark:text-white",
+        className
+      )}
+    >
+      {logoSrc ? (
+        <img src={logoSrc} alt={logoAlt} width={30} height={30} />
+      ) : null}
+      {children}
+    </a>
+  );
+};
+
+interface NavbarButtonProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  as?: "a" | "button";
+  children: React.ReactNode;
+  className?: string;
+  variant?: "primary" | "secondary" | "dark" | "gradient";
+}
+
+export const NavbarButton = ({
+  href,
+  as: Tag = "a",
+  children,
+  className,
+  variant = "primary",
+  ...props
+}: NavbarButtonProps) => {
+  const baseStyles =
+    "px-4 py-2 rounded-full text-sm font-bold relative cursor-pointer transition duration-200 inline-block text-center";
+
+  const variantStyles = {
+    primary:
+      "bg-[hsl(198,93%,42%)] text-white border border-white/20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),inset_0_2px_2px_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)] hover:border-white/40 hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),inset_0_2px_2px_rgba(255,255,255,0.25),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)]",
+    secondary: "bg-transparent shadow-none dark:text-white",
+    dark: "btn !text-white",
+    gradient:
+      "bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]",
+  };
+
+  const componentProps =
+    Tag === "a"
+      ? { href: href ?? undefined, ...props }
+      : { ...props };
+
+  return (
+    <Tag
+      className={cn(baseStyles, variantStyles[variant], className)}
+      {...(componentProps as React.ComponentProps<typeof Tag>)}
+    >
+      {children}
+    </Tag>
+  );
+};
--- a/src/index.css
+++ b/src/index.css
@@ -1,23 +1,21 @@
+/* Fonts first – @import must be at the very top */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
@tailwind base;
@tailwind components;
@tailwind utilities;

 /* webklar Design System - Muradov Inspired Minimal Dark Theme */

-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
-
@layer base {
  :root {
    /* Ultra Minimal Deep Black Theme - Muradov Inspired */
-    --background: 0 0% 3%;
+    --background: 0 0% 0%;
    --foreground: 0 0% 92%;

    --card: 0 0% 6%;
@@ -156,6 +154,37 @@
 }

@layer components {
+  /* Gemeinsamer Hintergrund für Problem- und Lösungs-Sektion */
+  .section-problem-solution {
+    background-color: hsl(var(--background));
+  }
+
+  /* Leichter roter Tint auf Inhaltsblöcken der Problem-Sektion */
+  .problem-section-tint {
+    position: relative;
+  }
+  .problem-section-tint::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: rgb(239 68 68 / 0.06);
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  /* Leichter blauer Tint auf dem Ergebnis-Block der Lösungs-Sektion */
+  .solution-section-tint {
+    position: relative;
+  }
+  .solution-section-tint::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: rgb(34 211 238 / 0.06);
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
  /* Minimal glass nav */
  .glass-nav {
    @apply backdrop-blur-xl border-b;
@@ -241,6 +270,461 @@
    background: hsl(0 0% 10%);
  }

+  /* Custom CTA button (System-Demo) */
+  .btn-wrapper {
+    position: relative;
+    display: inline-block;
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  .btn {
+    --border-radius: 24px;
+    --padding: 4px;
+    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    --button-color: #101010;
+    --highlight-color-hue: 210deg;
+
+    outline: none;
+    user-select: none;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5em 1.1em;
+    font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
+    font-size: 1em;
+    font-weight: 400;
+    background-color: var(--button-color);
+    overflow: hidden;
+    box-shadow:
+      inset 0px 1px 1px rgba(255, 255, 255, 0.2),
+      inset 0px 2px 2px rgba(255, 255, 255, 0.15),
+      inset 0px 4px 4px rgba(255, 255, 255, 0.1),
+      inset 0px 8px 8px rgba(255, 255, 255, 0.05),
+      inset 0px 16px 16px rgba(255, 255, 255, 0.05),
+      0px -1px 1px rgba(0, 0, 0, 0.02),
+      0px -2px 2px rgba(0, 0, 0, 0.03),
+      0px -4px 4px rgba(0, 0, 0, 0.05),
+      0px -8px 8px rgba(0, 0, 0, 0.06),
+      0px -16px 16px rgba(0, 0, 0, 0.08);
+    border: solid 1px rgba(255, 255, 255, 0.13);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
+    position: relative;
+  }
+
+  .btn::before {
+    content: "";
+    position: absolute;
+    top: calc(0px - var(--padding));
+    left: calc(0px - var(--padding));
+    width: calc(100% + var(--padding) * 2);
+    height: calc(100% + var(--padding) * 2);
+    border-radius: calc(var(--border-radius) + var(--padding));
+    pointer-events: none;
+    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.4));
+    z-index: -1;
+    transition: box-shadow var(--transition), filter var(--transition);
+    box-shadow:
+      0 -8px 8px -6px transparent inset,
+      0 -16px 16px -8px transparent inset,
+      1px 1px 1px rgba(255, 255, 255, 0.13),
+      2px 2px 2px rgba(255, 255, 255, 0.07),
+      -1px -1px 1px rgba(0, 0, 0, 0.13),
+      -2px -2px 2px rgba(0, 0, 0, 0.07);
+  }
+
+  .btn::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    pointer-events: none;
+    background-image: linear-gradient(
+      0deg,
+      #fff,
+      hsl(var(--highlight-color-hue), 100%, 70%),
+      hsla(var(--highlight-color-hue), 100%, 70%, 0.5),
+      8%,
+      transparent
+    );
+    background-position: 0 0;
+    opacity: 0;
+    transition: opacity var(--transition), filter var(--transition);
+  }
+
+  .btn-letter {
+    position: relative;
+    display: inline-block;
+    color: rgba(255, 255, 255, 0.33);
+    animation: letter-anim 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    transition: color var(--transition), text-shadow var(--transition), opacity var(--transition), transform var(--transition);
+  }
+
+  @keyframes letter-anim {
+    50% {
+      text-shadow: 0 0 3px rgba(255, 255, 255, 0.53);
+      color: #fff;
+    }
+  }
+
+  .btn-svg {
+    flex-shrink: 0;
+    height: 24px;
+    width: 24px;
+    fill: #e8e8e8;
+    animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation-delay: 0.5s;
+    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
+    transition: fill var(--transition), filter var(--transition), opacity var(--transition);
+  }
+
+  @keyframes flicker {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  .txt-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    min-width: 0;
+    padding-right: 6px;
+  }
+
+  .txt-width-helper {
+    visibility: hidden;
+    white-space: nowrap;
+    font: inherit;
+    word-spacing: -1em;
+    pointer-events: none;
+  }
+
+  .txt-width-helper .btn-letter {
+    animation: none;
+  }
+
+  .btn-letter-space {
+    min-width: 0.25em;
+  }
+
+  .txt-1,
+  .txt-2 {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    word-spacing: -1em;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .txt-1 {
+    animation: appear-anim 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .txt-2 {
+    opacity: 0;
+  }
+
+  @keyframes appear-anim {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .btn:focus .txt-1 {
+    animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    animation-delay: 0.8s;
+  }
+
+  .btn:focus .txt-2 {
+    animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
+    animation-delay: 0.8s;
+  }
+
+  @keyframes opacity-anim {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .btn:focus .btn-letter {
+    animation: focused-letter-anim 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards, letter-anim 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    animation-delay: 0s, 1s;
+  }
+
+  @keyframes focused-letter-anim {
+    0%,
+    100% {
+      transform: scale(1);
+      filter: blur(0px);
+    }
+    50% {
+      transform: scale(1.08);
+      filter: blur(2px) brightness(150%)
+        drop-shadow(0 0 8px hsl(var(--highlight-color-hue), 100%, 70%));
+    }
+  }
+
+  .btn:focus .btn-svg {
+    animation-duration: 1.2s;
+    animation-delay: 0.2s;
+  }
+
+  .btn:focus::before {
+    box-shadow:
+      0 -8px 12px -6px rgba(255, 255, 255, 0.2) inset,
+      0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.2) inset,
+      1px 1px 1px rgba(255, 255, 255, 0.2),
+      2px 2px 2px rgba(255, 255, 255, 0.07),
+      -1px -1px 1px rgba(0, 0, 0, 0.13),
+      -2px -2px 2px rgba(0, 0, 0, 0.07);
+  }
+
+  .btn:focus::after {
+    opacity: 0.6;
+    mask-image: linear-gradient(0deg, #fff, transparent);
+    filter: brightness(100%);
+  }
+
+  .btn-letter:nth-child(1),
+  .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; }
+  .btn-letter:nth-child(2),
+  .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; }
+  .btn-letter:nth-child(3),
+  .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; }
+  .btn-letter:nth-child(4),
+  .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; }
+  .btn-letter:nth-child(5),
+  .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; }
+  .btn-letter:nth-child(6),
+  .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; }
+  .btn-letter:nth-child(7),
+  .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; }
+  .btn-letter:nth-child(8),
+  .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; }
+  .btn-letter:nth-child(9),
+  .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; }
+  .btn-letter:nth-child(10),
+  .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; }
+  .btn-letter:nth-child(11),
+  .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; }
+  .btn-letter:nth-child(12),
+  .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; }
+  .btn-letter:nth-child(13),
+  .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; }
+  .btn-letter:nth-child(14),
+  .btn:focus .btn-letter:nth-child(14) { animation-delay: 1.04s; }
+  .btn-letter:nth-child(15),
+  .btn:focus .btn-letter:nth-child(15) { animation-delay: 1.12s; }
+  .btn-letter:nth-child(16),
+  .btn:focus .btn-letter:nth-child(16) { animation-delay: 1.2s; }
+  .btn-letter:nth-child(17),
+  .btn:focus .btn-letter:nth-child(17) { animation-delay: 1.28s; }
+  .btn-letter:nth-child(18),
+  .btn:focus .btn-letter:nth-child(18) { animation-delay: 1.36s; }
+  .btn-letter:nth-child(19),
+  .btn:focus .btn-letter:nth-child(19) { animation-delay: 1.44s; }
+  .btn-letter:nth-child(20),
+  .btn:focus .btn-letter:nth-child(20) { animation-delay: 1.52s; }
+  .btn-letter:nth-child(21),
+  .btn:focus .btn-letter:nth-child(21) { animation-delay: 1.6s; }
+  .btn-letter:nth-child(22),
+  .btn:focus .btn-letter:nth-child(22) { animation-delay: 1.68s; }
+  .btn-letter:nth-child(23),
+  .btn:focus .btn-letter:nth-child(23) { animation-delay: 1.76s; }
+  .btn-letter:nth-child(24),
+  .btn:focus .btn-letter:nth-child(24) { animation-delay: 1.84s; }
+  .btn-letter:nth-child(25),
+  .btn:focus .btn-letter:nth-child(25) { animation-delay: 1.92s; }
+  .btn-letter:nth-child(26),
+  .btn:focus .btn-letter:nth-child(26) { animation-delay: 2s; }
+  .btn-letter:nth-child(27),
+  .btn:focus .btn-letter:nth-child(27) { animation-delay: 2.08s; }
+  .btn-letter:nth-child(28),
+  .btn:focus .btn-letter:nth-child(28) { animation-delay: 2.16s; }
+  .btn-letter:nth-child(29),
+  .btn:focus .btn-letter:nth-child(29) { animation-delay: 2.24s; }
+  .btn-letter:nth-child(30),
+  .btn:focus .btn-letter:nth-child(30) { animation-delay: 2.32s; }
+  .btn-letter:nth-child(31),
+  .btn:focus .btn-letter:nth-child(31) { animation-delay: 2.4s; }
+  .btn-letter:nth-child(32),
+  .btn:focus .btn-letter:nth-child(32) { animation-delay: 2.48s; }
+  .btn-letter:nth-child(33),
+  .btn:focus .btn-letter:nth-child(33) { animation-delay: 2.56s; }
+  .btn-letter:nth-child(34),
+  .btn:focus .btn-letter:nth-child(34) { animation-delay: 2.64s; }
+  .btn-letter:nth-child(35),
+  .btn:focus .btn-letter:nth-child(35) { animation-delay: 2.72s; }
+
+  .btn:active {
+    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
+    background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
+  }
+
+  .btn:active::before {
+    box-shadow:
+      0 -8px 12px -6px rgba(255, 255, 255, 0.67) inset,
+      0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
+      1px 1px 1px rgba(255, 255, 255, 0.27),
+      2px 2px 2px rgba(255, 255, 255, 0.13),
+      -1px -1px 1px rgba(0, 0, 0, 0.13),
+      -2px -2px 2px rgba(0, 0, 0, 0.07);
+  }
+
+  .btn:active::after {
+    opacity: 1;
+    mask-image: linear-gradient(0deg, #fff, transparent);
+    filter: brightness(200%);
+  }
+
+  .btn:active .btn-letter {
+    text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 0.9);
+    animation: none;
+  }
+
+  .btn:hover {
+    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4);
+  }
+
+  .btn:hover::before {
+    box-shadow:
+      0 -8px 8px -6px rgba(255, 255, 255, 0.67) inset,
+      0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.3) inset,
+      1px 1px 1px rgba(255, 255, 255, 0.13),
+      2px 2px 2px rgba(255, 255, 255, 0.07),
+      -1px -1px 1px rgba(0, 0, 0, 0.13),
+      -2px -2px 2px rgba(0, 0, 0, 0.07);
+  }
+
+  .btn:hover::after {
+    opacity: 1;
+    mask-image: linear-gradient(0deg, #fff, transparent);
+  }
+
+  .btn:hover .btn-svg {
+    fill: #fff;
+    filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
+      drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
+    animation: none;
+  }
+
+  @media (max-width: 639px) {
+    .btn {
+      font-size: 0.9rem;
+      padding: 0.5em 0.9em;
+      gap: 0.4rem;
+    }
+    .btn-svg,
+    .btn-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  /* Shared primary button look – for all blue/primary buttons */
+  .btn-primary-style {
+    padding: 0.5em 1.1em;
+    border-radius: 24px;
+    box-shadow:
+      inset 0px 1px 1px rgba(255, 255, 255, 0.25),
+      inset 0px 2px 2px rgba(255, 255, 255, 0.2),
+      0px 2px 4px rgba(0, 0, 0, 0.2),
+      0px 4px 8px rgba(0, 0, 0, 0.15);
+    transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+      border 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .btn-primary-style:hover {
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow:
+      inset 0px 1px 1px rgba(255, 255, 255, 0.3),
+      inset 0px 2px 2px rgba(255, 255, 255, 0.25),
+      0px 2px 4px rgba(0, 0, 0, 0.2),
+      0px 4px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  /* Primary (blue) variant – same structure, blue color */
+  .btn-primary {
+    --button-color: hsl(198, 93%, 42%);
+    --highlight-color-hue: 198deg;
+    box-shadow:
+      inset 0px 1px 1px rgba(255, 255, 255, 0.25),
+      inset 0px 2px 2px rgba(255, 255, 255, 0.2),
+      0px 2px 4px rgba(0, 0, 0, 0.2),
+      0px 4px 8px rgba(0, 0, 0, 0.15);
+    border: solid 1px rgba(255, 255, 255, 0.2);
+  }
+
+  .btn-primary::before {
+    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
+  }
+
+  .btn-primary .btn-letter {
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  @keyframes letter-anim-primary {
+    0%, 100% {
+      text-shadow: none;
+      color: rgba(255, 255, 255, 0.75);
+    }
+    50% {
+      text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.4);
+      color: #fff;
+    }
+  }
+
+  .btn-primary .btn-letter {
+    animation: letter-anim-primary 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  /* Arrow icon (stroke-based) – same size and animation as .btn-svg */
+  .btn-icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    color: #e8e8e8;
+    animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation-delay: 0.5s;
+    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
+    transition: color var(--transition), filter var(--transition), opacity var(--transition);
+  }
+
+  .btn:hover .btn-icon {
+    color: #fff;
+    filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
+      drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
+    animation: none;
+  }
+
+  .btn:focus .btn-icon {
+    animation-duration: 1.2s;
+    animation-delay: 0.2s;
+  }
+
  /* Stats number */
  .stat-number {
    font-family: 'Space Grotesk', system-ui, sans-serif;
@@ -249,6 +733,23 @@
    line-height: 1;
  }

+  /* Count-up with gradient */
+  .count-up-text {
+    background: linear-gradient(135deg, hsl(0 0% 92%) 0%, hsl(0 0% 70%) 50%, hsl(0 0% 92%) 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .dark .count-up-text {
+    background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(0 0% 75%) 50%, hsl(0 0% 98%) 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
  /* Grid line decoration */
  .grid-lines {
    background-image: 
--- a/src/lib/appwrite.ts
+++ b/src/lib/appwrite.ts
@@ -0,0 +1,14 @@
+import { Client, Databases } from "appwrite";
+
+const APPWRITE_ENDPOINT = "https://appwrite.webklar.com/v1";
+const APPWRITE_PROJECT = "696b82270034001dab69";
+const DATABASE_ID = "698124a20035e8f6dc42";
+export const CONTACTS_COLLECTION_ID = "contact_submissions";
+
+const client = new Client()
+  .setEndpoint(APPWRITE_ENDPOINT)
+  .setProject(APPWRITE_PROJECT);
+
+export const databases = new Databases(client);
+
+export { DATABASE_ID };
--- a/src/pages/AGB.tsx
+++ b/src/pages/AGB.tsx
@@ -0,0 +1,292 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, FileText } from "lucide-react";
+
+const contractDivider = (
+  <div className="my-8 border-t border-border" aria-hidden />
+);
+
+const AGB = () => {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
+        <div className="container mx-auto px-6">
+          <div className="flex items-center justify-between">
+            <Link to="/" className="flex items-center gap-2 group">
+              <span className="text-xl font-display font-medium text-foreground tracking-tight">
+                Webklar
+              </span>
+            </Link>
+            <Link to="/">
+              <Button
+                variant="ghost"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Zurück
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="pt-32 pb-24">
+        <div className="container mx-auto px-6">
+          <div className="max-w-3xl mx-auto">
+            {/* Page Header */}
+            <div className="mb-12">
+              <div className="label-tag mb-4 flex items-center gap-2">
+                <FileText className="w-4 h-4" />
+                Vertrag
+              </div>
+              <h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
+                Kaufvertrag – WEBklar
+              </h1>
+              <p className="text-muted-foreground text-lg mb-8">
+                (Modularer Projektvertrag)
+              </p>
+              <div className="text-muted-foreground space-y-1">
+                <p><strong className="text-foreground">zwischen</strong></p>
+                <p>WEBklar<br /><span className="text-sm">(im Folgenden „Anbieter“)</span></p>
+                <p className="pt-2"><strong className="text-foreground">und</strong></p>
+                <p>Kunde laut Angebot<br /><span className="text-sm">(im Folgenden „Kunde“)</span></p>
+              </div>
+            </div>
+
+            {/* Contract Content */}
+            <article className="space-y-8 text-foreground">
+              {/* 1. Vertragsgegenstand */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  1. Vertragsgegenstand
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Gegenstand dieses Vertrages ist die Erbringung der im Angebot definierten Leistungen.</li>
+                  <li>Der Vertrag besteht aus diesem Grundvertrag sowie den ausgewählten Leistungsmodulen.</li>
+                  <li>Maßgeblich ist das jeweils angenommene Angebot von WEBklar.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 2. Leistungsart */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  2. Leistungsart
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Sämtliche Leistungen von WEBklar stellen Dienst- und Entwicklungsleistungen dar.</li>
+                  <li>Ein bestimmter wirtschaftlicher, technischer oder rechtlicher Erfolg wird nicht geschuldet.</li>
+                  <li>WEBklar erbringt keinen laufenden Betrieb, sofern dieser nicht explizit vereinbart wurde.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 3. Leistungsmodul A – Webseite */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
+                  3. Leistungsmodul A – Webseite (einmalig)
+                </h2>
+                <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>WEBklar erstellt eine individuelle Webseite gemäß Angebot.</li>
+                  <li>Die Umsetzung erfolgt nach den vom Kunden gelieferten Inhalten und Vorgaben.</li>
+                  <li>Zusätzliche Leistungen wie Domain, Hosting, Wartung oder SEO sind nicht Bestandteil, sofern sie nicht gesondert beauftragt wurden.</li>
+                  <li>Der Kunde ist nicht berechtigt, Änderungen am Quellcode selbst vorzunehmen.</li>
+                  <li>Änderungen erfolgen ausschließlich durch WEBklar gegen gesonderte Vergütung.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 4. Leistungsmodul B – Automatisierung / Virtualisierung */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
+                  4. Leistungsmodul B – Automatisierung / Virtualisierung (einmalig)
+                </h2>
+                <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>WEBklar entwickelt individuelle Automatisierungen, Apps oder Virtualisierungssysteme.</li>
+                  <li>Die Leistung stellt eine reine Entwicklungsleistung dar.</li>
+                  <li>Optional kann eine Beratungsleistung Bestandteil des Projektes sein.</li>
+                  <li>Ein laufender Betrieb, Monitoring oder Wartung ist nicht geschuldet, außer dies wurde explizit vereinbart.</li>
+                  <li>Der Kunde entscheidet über Inhalte, Daten und Prozesse und trägt dafür die rechtliche Verantwortung.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 5. Leistungsmodul C – Hosting */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
+                  5. Leistungsmodul C – Hosting (jährlich)
+                </h2>
+                <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>WEBklar stellt optional Hosting-Leistungen zur Verfügung.</li>
+                  <li>Hostingverträge haben eine jährliche Laufzeit und verlängern sich automatisch, sofern nicht fristgerecht gekündigt wird.</li>
+                  <li>WEBklar ist berechtigt, externe Anbieter (z. B. Rechenzentren) einzusetzen.</li>
+                  <li>WEBklar übernimmt keine Haftung für Ausfälle externer Anbieter.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 6. Quellcode und Eigentum */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  6. Quellcode und Eigentum
+                </h2>
+                <div className="space-y-4 text-muted-foreground">
+                  <div>
+                    <h3 className="text-foreground font-medium mb-2">6.1 Webseite</h3>
+                    <ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
+                      <li>Der Kunde erhält ein einfaches, zeitlich unbegrenztes Nutzungsrecht an der fertigen Webseite.</li>
+                      <li>Der Quellcode der Webseite wird nur auf ausdrückliche Anfrage und nach Vereinbarung herausgegeben.</li>
+                      <li>Ohne Vereinbarung verbleibt der Quellcode bei WEBklar und wird archiviert.</li>
+                    </ol>
+                  </div>
+                  <div>
+                    <h3 className="text-foreground font-medium mb-2">6.2 Apps, Automatisierungen und Backend</h3>
+                    <ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
+                      <li>Der Quellcode von Apps, Automatisierungen und Backend-Systemen verbleibt vollständig bei WEBklar.</li>
+                      <li>Eine Herausgabe erfolgt ausschließlich nach gesonderter schriftlicher Vereinbarung.</li>
+                      <li>Der Kunde erhält lediglich Zugriff auf die Bedienoberfläche bzw. das Frontend.</li>
+                    </ol>
+                  </div>
+                </div>
+              </section>
+              {contractDivider}
+
+              {/* 7. Mitwirkungspflichten */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  7. Mitwirkungspflichten des Kunden
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Der Kunde stellt alle benötigten Inhalte, Daten und Freigaben rechtzeitig bereit.</li>
+                  <li>Verzögerungen durch fehlende Mitwirkung gehen nicht zu Lasten von WEBklar.</li>
+                  <li>WEBklar ist nicht verpflichtet, rechtliche Prüfungen der Inhalte vorzunehmen.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 8. Abnahme */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  8. Abnahme
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Nach Fertigstellung wird dem Kunden die Leistung zur Abnahme bereitgestellt.</li>
+                  <li>Erfolgt innerhalb von 14 Tagen keine Rückmeldung, gilt die Leistung als abgenommen.</li>
+                  <li>Nach Abnahme sind nur noch kostenpflichtige Änderungen möglich.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 9. Vergütung und Zahlung */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  9. Vergütung und Zahlung
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Die Vergütung ergibt sich aus dem Angebot.</li>
+                  <li>Projektleistungen sind nach Vereinbarung fällig.</li>
+                  <li>Hosting-Leistungen sind jährlich im Voraus zu zahlen.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 10. Zahlungsverzug */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  10. Zahlungsverzug
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Bei Zahlungsverzug erfolgen bis zu zwei Mahnungen.</li>
+                  <li>Danach ist WEBklar berechtigt:
+                    <ul className="list-disc list-inside mt-2 space-y-1 pl-2">
+                      <li>Leistungen zu sperren</li>
+                      <li>Verzugszinsen zu berechnen</li>
+                      <li>den Vertrag außerordentlich zu kündigen</li>
+                    </ul>
+                  </li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 11. Haftung */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  11. Haftung
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>WEBklar haftet nur bei Vorsatz und grober Fahrlässigkeit.</li>
+                  <li>Keine Haftung für:
+                    <ul className="list-disc list-inside mt-2 space-y-1 pl-2">
+                      <li>Umsatzausfälle</li>
+                      <li>Datenverlust</li>
+                      <li>Systemausfälle</li>
+                      <li>externe Dienste</li>
+                    </ul>
+                  </li>
+                  <li>Die Haftung ist der Höhe nach auf den Auftragswert begrenzt.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 12. Kündigung */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  12. Kündigung
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Laufzeitverträge (z. B. Hosting, Wartung) können zum Ende der jeweiligen Laufzeit gekündigt werden.</li>
+                  <li>Das Recht zur außerordentlichen Kündigung bleibt unberührt.</li>
+                </ol>
+              </section>
+              {contractDivider}
+
+              {/* 13. Referenzen */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  13. Referenzen
+                </h2>
+                <p className="text-muted-foreground leading-relaxed">
+                  WEBklar darf das Projekt nur nach ausdrücklicher Zustimmung des Kunden als Referenz verwenden.
+                </p>
+              </section>
+              {contractDivider}
+
+              {/* 14. Schlussbestimmungen */}
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
+                  14. Schlussbestimmungen
+                </h2>
+                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
+                  <li>Es gilt deutsches Recht.</li>
+                  <li>Gerichtsstand ist der Sitz von WEBklar, soweit zulässig.</li>
+                  <li>Sollten einzelne Bestimmungen unwirksam sein, bleibt der Vertrag im Übrigen wirksam.</li>
+                </ol>
+              </section>
+            </article>
+
+            {/* Back / Contact */}
+            <div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
+              <Link to="/">
+                <Button variant="outline" className="rounded-full">
+                  Zur Startseite
+                </Button>
+              </Link>
+              <Link to="/kontakt">
+                <Button className="btn-minimal rounded-full">
+                  Kontakt
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default AGB;
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -6,6 +6,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { ArrowLeft, Send } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
+import { ID, databases, DATABASE_ID, CONTACTS_COLLECTION_ID } from "@/lib/appwrite";

 const Contact = () => {
  const { toast } = useToast();
@@ -30,8 +31,22 @@ const Contact = () => {
    e.preventDefault();
    setIsSubmitting(true);

-    // Simulate form submission
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    try {
+      const doc: Record<string, string> = {
+        name: formData.name.trim(),
+        email: formData.email.trim(),
+        message: formData.message.trim(),
+      };
+      if (formData.company.trim()) {
+        doc.company = formData.company.trim();
+      }
+
+      await databases.createDocument(
+        DATABASE_ID,
+        CONTACTS_COLLECTION_ID,
+        ID.unique(),
+        doc
+      );

      toast({
        title: "Nachricht gesendet!",
@@ -39,7 +54,16 @@ const Contact = () => {
      });

      setFormData({ name: "", email: "", company: "", message: "" });
+    } catch (err) {
+      console.error("Fehler beim Senden:", err);
+      toast({
+        title: "Fehler",
+        description: "Die Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt per E-Mail.",
+        variant: "destructive",
+      });
+    } finally {
      setIsSubmitting(false);
+    }
  };

  return (
@@ -171,19 +195,19 @@ const Contact = () => {
                <div>
                  <div className="label-tag mb-2">E-Mail</div>
                  <a
-                    href="mailto:hello@webklar.de"
+                    href="mailto:support@webklar.com"
                    className="text-foreground hover:text-muted-foreground transition-colors"
                  >
-                    hello@webklar.de
+                    support@webklar.com
                  </a>
                </div>
                <div>
                  <div className="label-tag mb-2">Telefon</div>
                  <a
-                    href="tel:+4912345678"
+                    href="tel:+491704969375"
                    className="text-foreground hover:text-muted-foreground transition-colors"
                  >
-                    +49 123 456 78
+                    0170 4969375
                  </a>
                </div>
              </div>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
+import react from "@vitejs/plugin-react";
 import path from "path";
 import { componentTagger } from "lovable-tagger";
Author	SHA1	Message	Date
Kenso Grimm	346ec484fa	good	2026-02-03 19:22:05 +01:00
Basilosaurusrex	217bbdc6a7	new version	2026-02-02 21:42:41 +01:00
Basilosaurusrex	7e8d40878b	light	2026-02-02 16:17:08 +01:00
Basilosaurusrex	2dc5401179	imeges	2026-02-02 15:16:36 +01:00
Basilosaurusrex	3b9e35a447	Values-Section: Hintergrundbild backgroud_effect.png (groß, transparent)	2026-02-02 12:11:43 +01:00
Basilosaurusrex	a95932cd79	CountUp-Effekt für Zahlen, Navbar-Button wie Hero-Button (dark)	2026-02-02 10:41:41 +01:00
Basilosaurusrex	01102ef3f7	Custom CTA-Buttons: Sparkle/Demo-Button, blauer Primary-Button mit Text-Animation, einheitlicher Stil für alle blauen Buttons	2026-02-02 09:29:37 +01:00
Kenso Grimm	22d641e4e5	Neues WEBklar-Logo, Favicon und Tab-Titel	2026-02-02 00:08:51 +01:00
Kenso Grimm	1d4584e5d9	fixes	2026-02-01 22:34:47 +01:00
Kenso Grimm	6228945065	Added Silk component for animated background in Hero section	2026-02-01 16:59:54 +01:00