good

package-lock.json

@@ -39,6 +39,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",
@@ -48,6 +49,7 @@
         "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",
@@ -136,6 +138,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -3050,8 +3053,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -3199,6 +3201,7 @@
       "integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3214,6 +3217,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
       "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3225,6 +3229,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3290,6 +3295,7 @@
       "integrity": "sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.38.0",
         "@typescript-eslint/types": "8.38.0",
@@ -3652,6 +3658,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3769,6 +3776,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/appwrite": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/appwrite/-/appwrite-22.0.0.tgz",
+      "integrity": "sha512-iFlfshYttuQheIyar6m789+Z/gvfKWQxWQCDhHzH9cEkFkn+laJZV8nMvGRH+1rTYNfAcFuycWKBGZiEDFxXug==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "bignumber.js": "9.0.0",
+        "json-bigint": "1.0.0"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -3885,6 +3902,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/bignumber.js": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
+      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3940,6 +3966,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -4417,6 +4444,7 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -4513,8 +4541,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
@@ -4572,7 +4599,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -4761,6 +4789,7 @@
       "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5688,6 +5717,7 @@
       "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "abab": "^2.0.6",
         "acorn": "^8.8.1",
@@ -5741,6 +5771,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -6343,7 +6382,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -6590,6 +6628,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/ogl": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
+      "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
+      "license": "Unlicense"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -6785,6 +6829,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6925,7 +6970,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -6941,7 +6985,6 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6952,7 +6995,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -6965,8 +7007,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
@@ -7040,6 +7081,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7066,6 +7108,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -7079,6 +7122,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.61.1.tgz",
       "integrity": "sha512-2vbXUFDYgqEgM2RcXcAT2PwDW/80QARi+PKmHy5q2KhuKvOlG8iIYgf7eIlIANR5trW9fJbP4r5aub3a4egsew==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -7804,6 +7848,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -7870,7 +7915,8 @@
       "version": "0.182.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
       "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
@@ -7933,6 +7979,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8055,6 +8102,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8255,6 +8303,7 @@
       "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

package.json

@@ -44,6 +44,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",
@@ -53,6 +54,7 @@
     "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",

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();

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>

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>

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>
+  );
+}

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>

src/components/Header.tsx

@@ -41,7 +41,7 @@ const Header = () => {
             <Link to="/kontakt">
               <NavbarButton
                 as="span"
-                variant="primary"
+                variant="dark"
               >
                 Kontakt
               </NavbarButton>
@@ -84,7 +84,7 @@ const Header = () => {
               <Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
                 <NavbarButton
                   as="span"
-                  variant="primary"
+                  variant="dark"
                   className="block w-full text-center"
                 >
                   Kontakt

src/components/Hero.tsx

@@ -1,7 +1,8 @@
 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>
@@ -14,10 +15,28 @@ const SPARKLE_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 (
     <>
-      {text.split("").map((char, i) => (
+      {chars.map((char, i) => (
-        <span key={i} className="btn-letter">
+        <span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
           {char}
         </span>
       ))}
@@ -30,6 +49,31 @@ 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 = () => {
@@ -62,7 +106,7 @@ const Hero = () => {
         <Silk
           speed={3}
           scale={0.5}
-          color="#373737"
+          color="#6a6a6a"
           noiseIntensity={4
           }
           rotation={0}
@@ -88,11 +132,11 @@ const Hero = () => {
           </p>
 
           {/* CTA Buttons */}
-          <div className="flex flex-row flex-nowrap items-center gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
+          <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">
+            <div className="btn-wrapper shrink-0 w-full sm:w-auto">
               <button
                 type="button"
-                className="btn btn-primary"
+                className="btn btn-primary w-full sm:w-auto justify-center"
                 onClick={() => navigate("/kontakt")}
                 aria-label="Kostenlose Potenzialanalyse sichern"
               >
@@ -110,23 +154,28 @@ const Hero = () => {
                 </div>
               </button>
             </div>
-            <div className="btn-wrapper">
+            <div className="btn-wrapper w-full sm:w-auto">
               <button
+                ref={secondBtnRef}
                 type="button"
-                className="btn"
+                className="btn w-full sm:w-auto justify-center"
-                onClick={() => navigate("/kontakt")}
+                onClick={() => {
-                aria-label="System-Demo anfordern"
+                  const el = document.getElementById("projects");
+                  if (el) el.scrollIntoView({ behavior: "smooth" });
+                  else navigate("/#projects");
+                }}
+                aria-label="Projekte ansehen"
               >
                 {SPARKLE_SVG}
                 <div className="txt-wrapper">
                   <span className="txt-width-helper" aria-hidden="true">
-                    <DemoButtonLetters text="System-Demo anfordern" />
+                    <DemoButtonLetters text="Projekte ansehen" />
                   </span>
                   <div className="txt-1">
-                    <DemoButtonLetters text="System-Demo anfordern" />
+                    <DemoButtonLetters text="Projekte ansehen" />
                   </div>
                   <div className="txt-2">
-                    <DemoButtonLetters text="Wird angefordert..." />
+                    <DemoButtonLetters text="Wird geladen..." />
                   </div>
                 </div>
               </button>
@@ -145,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' }}>
@@ -153,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' }}>

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;
+}

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>
+  );
+}

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">
+    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
-      <div className="container mx-auto px-6">
+      <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" />

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>

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",
+    title: "Email Sorter",
-    description: "Webentwicklung / UI Design / Custom Code",
+    description: "E-Mails automatisch sortieren",
-    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
+    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` }}
             >

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">
+    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
-      <div className="container mx-auto px-6">
+      <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">

src/components/Values.tsx

@@ -35,8 +35,17 @@ const Values = () => {
   ];
 
   return (
-    <section id="features" className="py-24 md:py-32 bg-background relative">
+    <section id="features" className="py-24 md:py-32 bg-background relative overflow-hidden">
-      <div className="container mx-auto px-6">
+      {/* 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>

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>
+  );
+};

src/components/ui/resizable-navbar.tsx

@@ -296,7 +296,7 @@ export const NavbarButton = ({
     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: "bg-black text-white 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: "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]",
   };

src/index.css

@@ -154,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;
@@ -370,7 +401,7 @@
     flex-shrink: 0;
     overflow: hidden;
     min-width: 0;
-    padding-right: 2px;
+    padding-right: 6px;
   }
 
   .txt-width-helper {
@@ -385,6 +416,10 @@
     animation: none;
   }
 
+  .btn-letter-space {
+    min-width: 0.25em;
+  }
+
   .txt-1,
   .txt-2 {
     position: absolute;
@@ -595,6 +630,19 @@
     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;
@@ -685,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: 

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 };

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;

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
+    try {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+      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>