new version

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/Hero.tsx

@@ -1,6 +1,6 @@
 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";
 
@@ -15,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) => (
-        <span key={i} className="btn-letter">
+      {chars.map((char, i) => (
+        <span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
           {char}
         </span>
       ))}
@@ -31,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 = () => {
@@ -113,21 +156,26 @@ const Hero = () => {
             </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={() => navigate("/kontakt")}
-                aria-label="System-Demo anfordern"
+                onClick={() => {
+                  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>

src/components/ProblemSection.tsx

@@ -58,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/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` }}
             >

src/components/SolutionSection.tsx

@@ -66,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/index.css

@@ -159,6 +159,32 @@
     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;
@@ -375,7 +401,7 @@
     flex-shrink: 0;
     overflow: hidden;
     min-width: 0;
-    padding-right: 2px;
+    padding-right: 6px;
   }
 
   .txt-width-helper {
@@ -390,6 +416,10 @@
     animation: none;
   }
 
+  .btn-letter-space {
+    min-width: 0.25em;
+  }
+
   .txt-1,
   .txt-2 {
     position: absolute;

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

@@ -171,19 +171,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>