optimierte texte

src/App.tsx

@@ -4,6 +4,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@/components/ThemeProvider";
+import { AnalyticsProvider } from "@/components/AnalyticsProvider";
 import Index from "./pages/Index";
 import ContactPage from "./pages/Contact";
 import AGBPage from "./pages/AGB";
@@ -20,6 +21,7 @@ const App = () => (
         <Toaster />
         <Sonner />
         <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+          <AnalyticsProvider>
           <Routes>
             <Route path="/" element={<Index />} />
             <Route path="/kontakt" element={<ContactPage />} />
@@ -29,6 +31,7 @@ const App = () => (
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
           </Routes>
+          </AnalyticsProvider>
         </BrowserRouter>
       </TooltipProvider>
     </QueryClientProvider>

src/components/AnalyticsProvider.tsx

@@ -0,0 +1,45 @@
+import { useEffect, type ReactNode } from "react";
+import { useLocation } from "react-router-dom";
+import { initAnalytics, trackCtaClick, trackPageView } from "@/lib/analytics";
+
+type AnalyticsProviderProps = {
+  children: ReactNode;
+};
+
+/**
+ * SPA-Seitenaufrufe + Klicks auf Elemente mit
+ * data-analytics-cta und data-analytics-location.
+ */
+export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
+  const location = useLocation();
+
+  useEffect(() => {
+    initAnalytics();
+  }, []);
+
+  useEffect(() => {
+    const path = location.pathname + location.search + location.hash;
+    trackPageView(path);
+  }, [location]);
+
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const el = target.closest("[data-analytics-cta]");
+      if (!el || !(el instanceof HTMLElement)) return;
+
+      const buttonText = el.dataset.analyticsCta ?? "";
+      const clickLocation = el.dataset.analyticsLocation ?? "unknown";
+      if (!buttonText) return;
+
+      trackCtaClick(buttonText, clickLocation);
+    };
+
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, []);
+
+  return <>{children}</>;
+}

src/components/Contact.tsx

@@ -23,22 +23,26 @@ const Contact = () => {
               <div className="mb-12">
                 <div className="label-tag mb-4">Kontakt</div>
                 <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
-                  Bereit für Ihr<br />
-                  nächstes Projekt?
+                  Der nächste Schritt<br />
+                  <span className="text-muted-foreground">ist ein Gespräch</span>
                 </h2>
                 <p className="text-muted-foreground text-lg max-w-xl">
-                  Lassen Sie uns gemeinsam Ihre digitale Vision verwirklichen.
-                  Buchen Sie jetzt ein kostenloses Erstgespräch.
+                  In 15 Minuten klären wir, ob und wie WEBklar Ihr Unternehmen digital
+                  voranbringt – kostenlos und ohne Verpflichtung.
                 </p>
               </div>
 
               <div className="flex flex-col sm:flex-row gap-4 mb-16">
-                <Link to="/kontakt">
+                <Link
+                  to="/kontakt"
+                  data-analytics-cta="Potenzialanalyse starten"
+                  data-analytics-location="contact_section"
+                >
                   <Button
                     size="lg"
                     className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
                   >
-                    Termin buchen
+                    Potenzialanalyse starten
                     <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                   </Button>
                 </Link>

src/components/DifferentiationSection.tsx

@@ -23,7 +23,7 @@ const DifferentiationSection = () => {
                 Alles aus einer Hand
               </h3>
               <p className="text-muted-foreground text-sm">
-                Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur.
+                Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.
               </p>
             </div>
             
@@ -35,7 +35,7 @@ const DifferentiationSection = () => {
                 Systeme statt Inseln
               </h3>
               <p className="text-muted-foreground text-sm">
-                Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem.
+                CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.
               </p>
             </div>
             
@@ -47,17 +47,21 @@ const DifferentiationSection = () => {
                 Langfristige Partnerschaft
               </h3>
               <p className="text-muted-foreground text-sm">
-                Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum.
+                Nach dem Go-live bleiben wir dran: Optimierung, wenn Ihr Team und Umsatz wachsen.
               </p>
             </div>
           </div>
           
-          <Link to="/kontakt">
+          <Link
+            to="/kontakt"
+            data-analytics-cta="Potenzialanalyse starten"
+            data-analytics-location="differentiation_section"
+          >
             <Button
               size="lg"
               className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
             >
-              Kostenlose Potenzialanalyse sichern
+              Potenzialanalyse starten
               <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
             </Button>
           </Link>

src/components/Footer.tsx

@@ -1,87 +1,82 @@
-import React from 'react';
-import Logo from '@/components/Logo';
-
-const DevStudio: React.FC = () => {
-  return (
-    <p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
-      WEBklar
-    </p>
-  );
-};
+import React from "react";
+import { Link } from "react-router-dom";
+import Logo from "@/components/Logo";
 
 const Footer: React.FC = () => {
   return (
     <div className="relative w-full overflow-hidden border-t border-white/[0.1] bg-black px-8 py-20 dark:border-white/[0.1] dark:bg-black">
-      <div className="mx-auto flex max-w-7xl flex-col items-start justify-between text-sm text-neutral-500 sm:flex-row md:px-8">
+      <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-12 text-sm text-neutral-500 sm:flex-row md:px-8">
         <div>
           <div className="mr-0 mb-4 md:mr-4 md:flex">
-            <a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
+            <Link
+              to="/"
+              className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white"
+            >
               <Logo width={30} height={30} />
               <span className="font-medium text-white">WEBklar</span>
-            </a>
+            </Link>
           </div>
-          <div className="mt-2 ml-2">© copyright WEBklar 2024. All rights reserved.</div>
+          <p className="mt-2 ml-2 max-w-xs leading-relaxed">
+            Webagentur für KMU – Website, Prozesse und Automatisierung aus einer Hand.
+          </p>
+          <div className="mt-4 ml-2">© {new Date().getFullYear()} WEBklar. Alle Rechte vorbehalten.</div>
         </div>
-        <div className="mt-10 grid grid-cols-2 items-start gap-10 sm:mt-0 md:mt-0 lg:grid-cols-4">
-          <div className="flex w-full flex-col justify-center space-y-4">
-            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Pages</p>
-            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">All Products</a>
+        <div className="grid grid-cols-2 items-start gap-10 sm:grid-cols-3 lg:gap-16">
+          <div className="flex flex-col space-y-4">
+            <p className="font-bold text-neutral-300">Seiten</p>
+            <ul className="list-none space-y-3 text-neutral-400">
+              <li>
+                <Link to="/" className="hover:text-neutral-200 transition-colors">
+                  Startseite
+                </Link>
               </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Studio</a>
+              <li>
+                <Link to="/ueber-uns" className="hover:text-neutral-200 transition-colors">
+                  Über uns
+                </Link>
               </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Clients</a>
+              <li>
+                <a href="/#services" className="hover:text-neutral-200 transition-colors">
+                  Leistungen
+                </a>
               </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Pricing</a>
-              </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Blog</a>
+              <li>
+                <Link to="/kontakt" className="hover:text-neutral-200 transition-colors">
+                  Kontakt
+                </Link>
               </li>
             </ul>
           </div>
-          <div className="flex flex-col justify-center space-y-4">
-            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Socials</p>
-            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Facebook</a>
+          <div className="flex flex-col space-y-4">
+            <p className="font-bold text-neutral-300">Kontakt</p>
+            <ul className="list-none space-y-3 text-neutral-400">
+              <li>
+                <a
+                  href="mailto:support@webklar.com"
+                  className="hover:text-neutral-200 transition-colors"
+                >
+                  support@webklar.com
+                </a>
               </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Instagram</a>
-              </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Twitter</a>
-              </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">LinkedIn</a>
+              <li>
+                <a href="tel:+491704969375" className="hover:text-neutral-200 transition-colors">
+                  0170 4969375
+                </a>
               </li>
             </ul>
           </div>
-          <div className="flex flex-col justify-center space-y-4">
-            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Legal</p>
-            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/agb">AGBs</a>
+          <div className="flex flex-col space-y-4">
+            <p className="font-bold text-neutral-300">Rechtliches</p>
+            <ul className="list-none space-y-3 text-neutral-400">
+              <li>
+                <Link to="/agb" className="hover:text-neutral-200 transition-colors">
+                  AGB
+                </Link>
               </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/impressum">Impressum</a>
-              </li>
-            </ul>
-          </div>
-          <div className="flex flex-col justify-center space-y-4">
-            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Register</p>
-            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Sign Up</a>
-              </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Login</a>
-              </li>
-              <li className="list-none">
-                <a className="hover:text-neutral-300 transition-colors" href="/products">Forgot Password</a>
+              <li>
+                <Link to="/impressum" className="hover:text-neutral-200 transition-colors">
+                  Impressum
+                </Link>
               </li>
             </ul>
           </div>
@@ -94,5 +89,4 @@ const Footer: React.FC = () => {
   );
 };
 
-export { DevStudio, Footer };
 export default Footer;

src/components/Header.tsx

@@ -40,7 +40,11 @@ const Header = () => {
           <NavItems items={navItems} />
           <div className="navbar-actions flex items-center gap-4">
             <ThemeToggle />
-            <Link to="/kontakt">
+            <Link
+              to="/kontakt"
+              data-analytics-cta="Kontakt"
+              data-analytics-location="header_desktop"
+            >
               <NavbarButton
                 as="span"
                 variant="dark"
@@ -99,7 +103,12 @@ const Header = () => {
               )
             )}
             <div className="flex w-full flex-col gap-4">
-              <Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
+              <Link
+                to="/kontakt"
+                data-analytics-cta="Kontakt"
+                data-analytics-location="header_mobile"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
                 <NavbarButton
                   as="span"
                   variant="dark"

src/components/Hero.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { useTheme } from "next-themes";
 import Silk from "@/components/Silk";
 import CountUp from "@/components/CountUp";
+import { trackCtaClick } from "@/lib/analytics";
 
 const SPARKLE_SVG = (
   <svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
@@ -16,24 +17,7 @@ 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 (
     <>
       {chars.map((char, i) => (
@@ -53,30 +37,6 @@ const Hero = () => {
   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 = () => {
       const now = new Date();
@@ -129,7 +89,7 @@ const Hero = () => {
         <div className="max-w-6xl">
           {/* Label */}
           <div className="label-tag mb-8 animate-fade-in" style={{ animationDelay: '0.1s' }}>
-            Webentwicklung & Design
+            Digitalisierung für KMU
           </div>
 
           {/* Main Heading - Large Uppercase */}
@@ -140,7 +100,7 @@ const Hero = () => {
 
           {/* Subheadline */}
           <p className="text-xl md:text-2xl text-foreground/90 max-w-3xl mb-6 font-medium animate-fade-in" style={{ animationDelay: '0.3s' }}>
-            Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen.
+            Website, Automatisierung und vernetzte Prozesse – aus einer Hand. So wächst Ihr Unternehmen, ohne dass Ihr Team mehr Aufwand im Alltag hat.
           </p>
 
           {/* CTA Buttons */}
@@ -149,7 +109,10 @@ const Hero = () => {
               <button
                 type="button"
                 className="btn btn-primary w-full sm:w-auto justify-center"
-                onClick={() => navigate("/kontakt")}
+                onClick={() => {
+                  trackCtaClick("Kostenlose Potenzialanalyse sichern", "hero");
+                  navigate("/kontakt");
+                }}
                 aria-label="Kostenlose Potenzialanalyse sichern"
               >
                 <ArrowRight className="btn-icon" size={24} strokeWidth={2} aria-hidden />

src/components/ProblemSection.tsx

@@ -19,19 +19,19 @@ const ProblemSection = () => {
   const problems = [
     {
       icon: Calendar,
-      text: "Termine werden manuell koordiniert.",
+      text: "Termine und Rückrufe laufen über Zettel, Excel und fünf Kalender-Apps.",
     },
     {
       icon: MessageSquareOff,
-      text: "Kundenanfragen gehen unter.",
+      text: "Anfragen aus E-Mail, Formular und Telefon – niemand sieht das Gesamtbild.",
     },
     {
       icon: TrendingDown,
-      text: "Marketing bringt keine planbaren Ergebnisse.",
+      text: "Marketing kostet Zeit, aber Sie wissen nicht, was wirklich Kunden bringt.",
     },
     {
       icon: Folders,
-      text: "Wichtige Informationen liegen verteilt in verschiedenen Tools.",
+      text: "Kundendaten, Angebote und Projekte liegen in getrennten Tools ohne Verbindung.",
     },
   ];
 
@@ -87,10 +87,10 @@ const ProblemSection = () => {
         <div className="mb-16 md:mb-20 max-w-4xl">
           <div className="label-tag mb-4">Das Problem</div>
           <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
-            Ihr Unternehmen sollte kein zweiter Vollzeitjob sein.
+            Wachstum darf nicht mehr Chaos bedeuten.
           </h2>
           <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
-            Zu viele Firmen verlieren täglich Umsatz durch ineffiziente Prozesse, doppelte Dateneingaben und fehlende Automationen.
+            Viele KMU verlieren jeden Tag Umsatz – nicht wegen fehlender Ideen, sondern weil Prozesse, Tools und Website nicht zusammenspielen.
           </p>
         </div>
 
@@ -114,10 +114,10 @@ const ProblemSection = () => {
         {/* Closing Statement */}
         <div className="max-w-3xl">
           <p className="text-lg text-muted-foreground mb-4">
-            Das kostet nicht nur Zeit – es verhindert Wachstum.
+            Das kostet Zeit, Nerven – und Chancen, die Ihre Konkurrenz mit Systemen abholen.
           </p>
           <p className="text-xl md:text-2xl text-foreground font-display font-medium">
-            Wer heute nicht digital strukturiert ist, wird morgen abgehängt.
+            Ohne eine durchdachte digitale Basis bleibt Wachstum manuelle Mehrarbeit.
           </p>
         </div>
       </div>

src/components/Process.tsx

@@ -6,23 +6,23 @@ const Process = () => {
   const steps = [
     {
       number: 1,
-      title: "Erstgespräch",
-      description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
+      title: "Potenzialanalyse",
+      description: "15 Minuten, unverbindlich: Wir verstehen Ziele, Engpässe und Tools – und nennen die größten Hebel.",
     },
     {
       number: 2,
       title: "Konzept & Design",
-      description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
+      description: "Sie erhalten einen klaren Plan: Struktur, Design und Integrationen – abgestimmt auf Ihr Team.",
     },
     {
       number: 3,
-      title: "Entwicklung",
-      description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
+      title: "Umsetzung",
+      description: "Website, Automationen und Anbindungen – in Etappen, mit Zwischenständen, die Sie testen können.",
     },
     {
       number: 4,
-      title: "Launch & Support",
-      description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
+      title: "Launch & Betreuung",
+      description: "Go-live mit Tests und Übergabe. Danach Updates, wenn sich Ihr Unternehmen weiterentwickelt.",
     },
   ];
 
@@ -58,6 +58,9 @@ const Process = () => {
         {/* Section Header */}
         <div className="mb-4">
           <div className="label-tag mb-4">So arbeiten wir</div>
+          <p className="text-muted-foreground max-w-2xl mb-8 leading-relaxed">
+            Transparent in vier Schritten – ohne Überraschungen bei Scope oder Kosten.
+          </p>
         </div>
 
         <div className="max-w-4xl">

src/components/ProjectShowcase.tsx

@@ -13,31 +13,31 @@ type Project = {
 const projects: Project[] = [
   {
     title: "Email Sorter",
-    description: "E-Mails automatisch sortieren",
+    description: "Automatisierung · E-Mail-Workflows für Teams",
     image: "/project%20pics/emailsorter.png",
     url: "https://emailsorter.webklar.com/",
   },
   {
     title: "Neutral",
-    description: "Webentwicklung / Custom Code",
+    description: "Website · Markenauftritt & Custom Development",
     image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
     url: "#",
   },
   {
     title: "Verbatim Labs",
-    description: "Webentwicklung / UI Design / Custom Code",
+    description: "Website · UI/UX & individuelle Entwicklung",
     image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
     url: "#",
   },
   {
     title: "JMK Engineers",
-    description: "Webentwicklung / UI Design / Custom Code",
+    description: "Website · Technische Präsentation & Lead-Generierung",
     image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
     url: "#",
   },
   {
     title: "GOODZ Club",
-    description: "Webentwicklung / Custom Code / Lokalisierung",
+    description: "Website · Mehrsprachig & skalierbare Plattform",
     image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
     url: "#",
   },

src/components/Services.tsx

@@ -4,26 +4,26 @@ const Services = () => {
   const services = [
     {
       icon: Lightbulb,
-      title: "Strategieberatung",
-      description: "Wir analysieren Ihre Ziele und erstellen ein maßgeschneidertes Konzept für Ihren digitalen Erfolg.",
+      title: "Potenzialanalyse",
+      description: "Wo hakt es heute? Wir priorisieren Hebel mit dem größten Effekt – bevor etwas gebaut wird.",
       number: "01",
     },
     {
       icon: Palette,
       title: "UX/UI Design",
-      description: "Modernes, benutzerfreundliches Design, das Ihre Marke perfekt repräsentiert.",
+      description: "Klare Oberflächen, die Vertrauen schaffen und Besucher gezielt zur Anfrage führen.",
       number: "02",
     },
     {
       icon: Code,
       title: "Entwicklung",
-      description: "Professionelle Webentwicklung mit modernsten Technologien. Schnell, sicher und skalierbar.",
+      description: "Schnelle, sichere Websites und Integrationen – technisch sauber und erweiterbar.",
       number: "03",
     },
     {
       icon: Search,
-      title: "SEO & Support",
-      description: "Suchmaschinenoptimierung und kontinuierlicher Support für langfristigen Erfolg.",
+      title: "SEO & Betreuung",
+      description: "Sichtbar bei Google, stabil im Betrieb – mit Updates, wenn Ihr Unternehmen wächst.",
       number: "04",
     },
   ];
@@ -33,7 +33,10 @@ const Services = () => {
       <div className="container mx-auto px-6">
         {/* Section Header */}
         <div className="mb-4">
-          <div className="label-tag mb-4">Was wir tun</div>
+          <div className="label-tag mb-4">Leistungen</div>
+          <p className="text-muted-foreground max-w-2xl mb-8 leading-relaxed">
+            Von der ersten Analyse bis zum laufenden System – ein Team, ein Ansprechpartner, keine Tool-Inseln.
+          </p>
         </div>
 
         <div className="grid md:grid-cols-2 gap-px bg-border rounded-lg overflow-hidden">

src/components/SolutionSection.tsx

@@ -19,9 +19,9 @@ const SolutionSection = () => {
   const isLight = mounted && resolvedTheme === "light";
 
   const benefits = [
-    "Alle Prozesse greifen ineinander.",
-    "Informationen fließen automatisch.",
-    "Aufgaben erledigen sich im Hintergrund.",
+    "Website, CRM und Abläufe sprechen miteinander – keine doppelte Pflege.",
+    "Anfragen landen automatisch beim richtigen Ansprechpartner.",
+    "Wiederkehrende Aufgaben laufen im Hintergrund, Ihr Team arbeitet am Kunden.",
   ];
 
   return (
@@ -78,11 +78,11 @@ const SolutionSection = () => {
             <div className="label-tag mb-4">Die Lösung</div>
             
             <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
-              Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren.
+              Ein System für Website, Prozesse und Wachstum.
             </h2>
             
             <p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
-              Statt isolierter Einzellösungen entwickeln wir eine zentrale digitale Infrastruktur für Ihre gesamte Firma.
+              WEBklar verbindet Ihre digitale Präsenz mit Automatisierung und den Tools, die Sie ohnehin nutzen – planbar, wartbar und auf Ihr Unternehmen zugeschnitten.
             </p>
             
             <div className="space-y-4 mb-10">
@@ -94,12 +94,16 @@ const SolutionSection = () => {
               ))}
             </div>
 
-            <Link to="/kontakt">
+            <Link
+              to="/kontakt"
+              data-analytics-cta="Potenzialanalyse starten"
+              data-analytics-location="solution_section"
+            >
               <Button
                 size="lg"
                 className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
               >
-                Jetzt Potenzialanalyse sichern
+                Potenzialanalyse starten
                 <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
               </Button>
             </Link>
@@ -111,10 +115,10 @@ const SolutionSection = () => {
               <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">
-                  Sie erhalten Kontrolle, Transparenz und die Freiheit, sich auf das zu konzentrieren, was wirklich zählt:
+                  Sie sehen, was läuft – und was Umsatz bringt. Mehr Zeit für Kunden statt für Tool-Pflege:
                 </h3>
                 <div className="text-4xl md:text-5xl font-display font-medium text-primary uppercase tracking-tight">
-                  Wachstum.
+                  Kontrolle.
                 </div>
               </div>
             </div>

src/components/Values.tsx

@@ -6,33 +6,33 @@ const Values = () => {
   const features = [
     {
       icon: Users,
-      title: "Digitale Kundenplattform",
-      description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.",
+      title: "Zentrale Kundenübersicht",
+      description: "Kontakte, Anfragen und Projekte an einem Ort – für Sales und Geschäftsführung.",
     },
     {
       icon: Cog,
-      title: "Automatisierte Prozesse",
-      description: "Reduzieren Sie manuelle Arbeit drastisch.",
+      title: "Automatisierte Abläufe",
+      description: "Weniger Copy-Paste: Follow-ups, Benachrichtigungen und Übergaben laufen von selbst.",
     },
     {
       icon: MessageSquare,
-      title: "Intelligente Kundenkommunikation",
-      description: "Keine Anfrage geht mehr verloren.",
+      title: "Keine Anfrage verloren",
+      description: "Jeder Kanal landet im System – mit Status, Zuständigkeit und Historie.",
     },
     {
       icon: Target,
-      title: "Planbare Neukundengewinnung",
-      description: "Strukturierte Funnels statt Zufall.",
+      title: "Planbare Neukunden",
+      description: "Website und Prozesse ziehen an einer Schnur – Sie sehen, was funktioniert.",
     },
     {
       icon: BarChart3,
-      title: "Echtzeit-Analytics",
-      description: "Treffen Sie Entscheidungen auf Basis klarer Daten.",
+      title: "Klare Kennzahlen",
+      description: "Übersicht über Anfragen, Pipeline und Engpässe – ohne Excel-Chaos.",
     },
     {
       icon: Layers,
-      title: "Skalierbare Infrastruktur",
-      description: "Ihr System wächst mit Ihrem Unternehmen.",
+      title: "Mitwachsende Technik",
+      description: "Architektur und Hosting, die mit Umsatz und Team skalieren – nicht dagegen.",
     },
   ];
 
@@ -55,8 +55,11 @@ const Values = () => {
         <div className="mb-16 md:mb-24 max-w-3xl">
           <div className="label-tag mb-4">Was Sie bekommen</div>
           <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
-            Alles, was Ihr Unternehmen braucht. In einem System.
+            Was sich für Sie im Alltag ändert.
           </h2>
+          <p className="text-muted-foreground text-lg leading-relaxed max-w-2xl">
+            Kein weiteres Tool zum Mitpflegen – sondern ein Setup, das Ihre Arbeit spürbar entlastet.
+          </p>
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">

src/hooks/use-page-meta.ts

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+
+const SITE_NAME = "WEBklar";
+const DEFAULT_TITLE = `${SITE_NAME} – Webagentur für KMU`;
+const DEFAULT_DESCRIPTION =
+  "WEBklar digitalisiert KMU: Website, Prozesse und Systeme aus einer Hand. Kostenlose Potenzialanalyse – Antwort innerhalb von 24 Stunden.";
+
+function setMetaTag(
+  attribute: "name" | "property",
+  key: string,
+  content: string
+): void {
+  let el = document.querySelector(`meta[${attribute}="${key}"]`);
+  if (!el) {
+    el = document.createElement("meta");
+    el.setAttribute(attribute, key);
+    document.head.appendChild(el);
+  }
+  el.setAttribute("content", content);
+}
+
+/**
+ * Setzt document.title und Meta-Beschreibung für SPA-Routen.
+ */
+export function usePageMeta(title: string, description?: string): void {
+  useEffect(() => {
+    const fullTitle = title.includes(SITE_NAME) ? title : `${title} | ${SITE_NAME}`;
+    document.title = fullTitle;
+
+    const desc = description ?? DEFAULT_DESCRIPTION;
+    setMetaTag("name", "description", desc);
+    setMetaTag("property", "og:title", fullTitle);
+    setMetaTag("property", "og:description", desc);
+    setMetaTag("name", "twitter:title", fullTitle);
+    setMetaTag("name", "twitter:description", desc);
+
+    return () => {
+      document.title = DEFAULT_TITLE;
+      setMetaTag("name", "description", DEFAULT_DESCRIPTION);
+      setMetaTag("property", "og:title", DEFAULT_TITLE);
+      setMetaTag("property", "og:description", DEFAULT_DESCRIPTION);
+      setMetaTag("name", "twitter:title", DEFAULT_TITLE);
+      setMetaTag("name", "twitter:description", DEFAULT_DESCRIPTION);
+    };
+  }, [title, description]);
+}

src/lib/analytics.ts

@@ -0,0 +1,88 @@
+/**
+ * GA4-Tracking für WEBklar (Marketing-Site).
+ * Aktiv nur wenn VITE_GA4_MEASUREMENT_ID gesetzt ist.
+ */
+
+declare global {
+  interface Window {
+    dataLayer?: unknown[];
+    gtag?: (...args: unknown[]) => void;
+  }
+}
+
+const MEASUREMENT_ID = import.meta.env.VITE_GA4_MEASUREMENT_ID?.trim();
+
+let initialized = false;
+
+function isEnabled(): boolean {
+  return Boolean(MEASUREMENT_ID) && typeof window !== "undefined";
+}
+
+function gtag(...args: unknown[]): void {
+  if (!isEnabled() || typeof window.gtag !== "function") return;
+  window.gtag(...args);
+}
+
+/** Lädt gtag.js einmal; Consent standardmäßig verweigert (EU), bis CMP anbindet. */
+export function initAnalytics(): void {
+  if (!isEnabled() || initialized) return;
+  initialized = true;
+
+  window.dataLayer = window.dataLayer ?? [];
+  window.gtag = function gtagShim(...args: unknown[]) {
+    window.dataLayer?.push(args);
+  };
+
+  gtag("consent", "default", {
+    analytics_storage: "denied",
+    ad_storage: "denied",
+    wait_for_update: 500,
+  });
+
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${MEASUREMENT_ID}`;
+  document.head.appendChild(script);
+
+  gtag("js", new Date());
+  gtag("config", MEASUREMENT_ID!, {
+    send_page_view: false,
+    anonymize_ip: true,
+  });
+}
+
+/** Nach Cookie-Einwilligung aufrufen (z. B. CMP). */
+export function grantAnalyticsConsent(): void {
+  gtag("consent", "update", {
+    analytics_storage: "granted",
+    ad_storage: "denied",
+  });
+}
+
+export function trackPageView(pagePath: string, pageTitle?: string): void {
+  if (!isEnabled()) return;
+  gtag("event", "page_view", {
+    page_path: pagePath,
+    page_title: pageTitle ?? document.title,
+    page_location: window.location.href,
+  });
+}
+
+export function trackEvent(
+  eventName: string,
+  params?: Record<string, string | number | boolean>
+): void {
+  if (!isEnabled()) return;
+  gtag("event", eventName, params ?? {});
+}
+
+export function trackCtaClick(buttonText: string, location: string): void {
+  trackEvent("cta_clicked", {
+    button_text: buttonText,
+    location,
+  });
+}
+
+export function trackFormSubmitted(formType: string): void {
+  trackEvent("form_submitted", { form_type: formType });
+}

src/pages/About.tsx

@@ -3,8 +3,14 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import CountUp from "@/components/CountUp";
 import BorderGlow from "@/components/BorderGlow";
+import { usePageMeta } from "@/hooks/use-page-meta";
 
 const About = () => {
+  usePageMeta(
+    "Über uns",
+    "WEBklar hilft KMU beim digitalen Wachstum: Systeme statt Chaos, ein Partner für Website, Prozesse und Automatisierung."
+  );
+
   return (
     <div className="min-h-screen bg-background">
       {/* Header */}
@@ -33,36 +39,38 @@ const About = () => {
       <main className="pt-32 pb-24">
         <div className="container mx-auto px-6">
           <div className="max-w-4xl mx-auto text-center">
-            <div className="label-tag mb-4">Die Realität</div>
+            <div className="label-tag mb-4">Über WEBklar</div>
 
             <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
-              Mehr Arbeit darf nicht die einzige Antwort auf Wachstum sein.
+              Digitalisierung, die im Alltag spürbar wird.
             </h1>
 
             <div className="space-y-8 text-lg md:text-xl text-muted-foreground leading-relaxed">
               <p>
-                Neue Kunden sollten Ihr Unternehmen nicht ins Chaos stürzen.
+                WEBklar ist die Webagentur für Unternehmen, die wachsen wollen – ohne
+                dass Geschäftsführung und Team unter Tool-Chaos und manuellen Abläufen leiden.
               </p>
 
               <p>
-                Wenn mehr Umsatz automatisch mehr Stress bedeutet, liegt das
-                Problem nicht an Ihrem Markt –{" "}
+                Wir verbinden{" "}
                 <span className="text-foreground font-medium">
-                  sondern an fehlenden Systemen.
-                </span>
+                  Website, Prozesse und Automatisierung
+                </span>{" "}
+                zu einem System. Kein isoliertes Redesign, kein weiteres Plugin – sondern
+                eine Lösung, die Anfragen, Daten und Abläufe zusammenführt.
               </p>
 
               <div className="pt-8 border-t border-border">
                 <p className="text-2xl md:text-3xl text-foreground font-display font-medium uppercase tracking-tight">
-                  Erfolgreiche Unternehmen skalieren Prozesse.
+                  Unser Anspruch: weniger Reibung.
                 </p>
                 <p className="text-2xl md:text-3xl text-muted-foreground font-display font-medium uppercase tracking-tight mt-2">
-                  Nicht Arbeitsstunden.
+                  Mehr planbares Wachstum.
                 </p>
               </div>
 
               <p className="text-foreground font-medium pt-4">
-                Genau dort setzen wir an.
+                Starten Sie mit einer kostenlosen Potenzialanalyse – wir zeigen Ihnen die nächsten Schritte.
               </p>
             </div>
 
@@ -75,7 +83,7 @@ const About = () => {
               </Link>
               <Link to="/kontakt">
                 <Button className="btn-minimal rounded-full">
-                  Kontakt
+                  Potenzialanalyse starten
                 </Button>
               </Link>
             </div>
@@ -111,7 +119,7 @@ const About = () => {
                       Alles aus einer Hand
                     </h3>
                     <p className="text-muted-foreground text-sm">
-                      Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur.
+                      Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.
                     </p>
                   </div>
                 </BorderGlow>
@@ -134,7 +142,7 @@ const About = () => {
                       Systeme statt Inseln
                     </h3>
                     <p className="text-muted-foreground text-sm">
-                      Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem.
+                      CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.
                     </p>
                   </div>
                 </BorderGlow>
@@ -157,7 +165,7 @@ const About = () => {
                       Langfristige Partnerschaft
                     </h3>
                     <p className="text-muted-foreground text-sm">
-                      Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum.
+                      Nach dem Go-live bleiben wir dran: Optimierung, wenn Ihr Team und Umsatz wachsen.
                     </p>
                   </div>
                 </BorderGlow>
@@ -168,7 +176,7 @@ const About = () => {
                   size="lg"
                   className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
                 >
-                  Kostenlose Potenzialanalyse sichern
+                  Potenzialanalyse starten
                   <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                 </Button>
               </Link>

src/pages/Contact.tsx

@@ -7,8 +7,15 @@ import { Label } from "@/components/ui/label";
 import { ArrowLeft, Send } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { createContactDocument } from "@/lib/appwrite";
+import { trackFormSubmitted } from "@/lib/analytics";
+import { usePageMeta } from "@/hooks/use-page-meta";
 
 const Contact = () => {
+  usePageMeta(
+    "Kontakt & Potenzialanalyse",
+    "Beschreiben Sie Ihr Projekt – WEBklar meldet sich innerhalb von 24 Stunden mit den nächsten Schritten. Unverbindlich und kostenlos."
+  );
+
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
@@ -32,6 +39,7 @@ const Contact = () => {
     setIsSubmitting(true);
     try {
       await createContactDocument(formData);
+      trackFormSubmitted("contact");
       toast({
         title: "Nachricht gesendet!",
         description: "Wir melden uns innerhalb von 24 Stunden bei Ihnen.",
@@ -81,13 +89,14 @@ const Contact = () => {
             <div className="mb-12">
               <div className="label-tag mb-4">Kontakt</div>
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
-                Lassen Sie uns
+                Kostenlose
                 <br />
-                <span className="text-muted-foreground">sprechen</span>
+                <span className="text-muted-foreground">Potenzialanalyse</span>
               </h1>
               <p className="text-muted-foreground text-lg">
-                Erzählen Sie uns von Ihrem Projekt. Wir melden uns innerhalb von
-                24 Stunden bei Ihnen.
+                Kurz Ihr Ziel beschreiben – wir prüfen, wo Website, Automatisierung
+                oder Vernetzung den größten Hebel haben. Antwort innerhalb von 24 Stunden,
+                unverbindlich.
               </p>
             </div>
 
@@ -152,7 +161,7 @@ const Contact = () => {
                   value={formData.message}
                   onChange={handleChange}
                   className="bg-card border-border focus:border-foreground transition-colors min-h-[180px] resize-none"
-                  placeholder="Erzählen Sie uns von Ihrem Projekt..."
+                    placeholder="z. B. neue Website, CRM-Anbindung, weniger manuelle Abläufe …"
                 />
               </div>
 

src/pages/Index.tsx

@@ -9,8 +9,14 @@ import ProjectShowcase from "@/components/ProjectShowcase";
 import Process from "@/components/Process";
 import Contact from "@/components/Contact";
 import Footer from "@/components/Footer";
+import { usePageMeta } from "@/hooks/use-page-meta";
 
 const Index = () => {
+  usePageMeta(
+    "WEBklar – Webagentur für KMU",
+    "WEBklar digitalisiert KMU: Website, Prozesse und Systeme aus einer Hand. Kostenlose Potenzialanalyse – Antwort innerhalb von 24 Stunden."
+  );
+
   return (
     <div className="min-h-screen bg-background">
       <Header />

src/vite-env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_APPWRITE_ENDPOINT: string;
   readonly VITE_APPWRITE_DATABASE_ID?: string;
   readonly VITE_APPWRITE_CONTACT_COLLECTION_ID?: string;
+  readonly VITE_GA4_MEASUREMENT_ID?: string;
 }
 
 interface ImportMeta {