feat: simplify copy for small business owners and fix react-icons properties

src/components/About.astro

@@ -13,15 +13,15 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
       
       <!-- Text/Profile Column -->
       <div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out">
-        <h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Unternehmensprofil</h2>
+        <h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Über uns</h2>
         <h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white mb-6">
-          Wir machen Webdesign einfach und bezahlbar für Kleinbetriebe.
+          Wir machen Webseiten einfach und bezahlbar für Betriebe wie Ihren.
         </h3>
         <p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-6 font-light">
-          N&D i-t SOLUTIONS wurde gegründet, um kleinen Unternehmen, Handwerkern und Dienstleistern eine professionelle Online-Präsenz zu ermöglichen. Wir bieten erstklassige Websites ohne die unerschwinglichen Kosten großer Agenturen.
+          Wir haben N&D gegründet, um kleinen Unternehmen, Geschäften und Handwerkern zu helfen. Viele haben keine Lust auf komplizierte Technik oder extrem teure Agenturen. Bei uns bekommen Sie eine moderne Webseite – ganz ohne Kopfschmerzen.
         </p>
         <p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-8 font-light">
-          Unser Fokus liegt auf schnellen Ladezeiten, optimaler Bedienung auf dem Smartphone (Mobile First) und lokaler Auffindbarkeit bei Google.
+          Wir sorgen dafür, dass Ihre Seite auf dem Handy richtig gut aussieht und schnell lädt. Und vor allem: dass Ihre Kunden Sie bei Google auch wirklich finden.
         </p>
 
         <!-- Fun facts -->
@@ -48,12 +48,12 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
         <div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-150 p-8 rounded-3xl bg-white/30 dark:bg-brand-primary/40 border border-white/20 dark:border-white/5 backdrop-blur-md shadow-lg hover:shadow-xl transition-shadow duration-300">
           <div class="flex items-start gap-4">
             <div class="p-3 rounded-2xl bg-brand-cyan/10 text-brand-cyan">
-              <FaRocket class="w-6 h-6" />
+              <FaRocket className="w-6 h-6" />
             </div>
             <div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unsere Mission</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unser Ziel</h4>
               <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
-                Wir verhelfen lokalen Betrieben zu einer erstklassigen Online-Präsenz, die neue Kunden anzieht und Ihre Marke perfekt widerspiegelt.
+                Wir bringen Ihren Betrieb ins Internet – so schick und professionell, dass Kunden Sie gerne besuchen und direkt anrufen.
               </p>
             </div>
           </div>
@@ -63,12 +63,12 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
         <div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-300 p-8 rounded-3xl bg-white/30 dark:bg-brand-primary/40 border border-white/20 dark:border-white/5 backdrop-blur-md shadow-lg hover:shadow-xl transition-shadow duration-300">
           <div class="flex items-start gap-4">
             <div class="p-3 rounded-2xl bg-brand-magenta/10 text-brand-magenta">
-              <FaEye class="w-6 h-6" />
+              <FaEye className="w-6 h-6" />
             </div>
             <div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unsere Vision</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Gleiche Chancen für alle</h4>
               <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
-                Eine digitale Landschaft, in der auch kleine Händler und lokale Handwerker die gleichen digitalen Chancen haben wie Großkonzerne.
+                Egal ob Dönerladen, Friseursalon oder Handwerker: Jeder verdient eine Webseite, die neue Kunden bringt.
               </p>
             </div>
           </div>
@@ -78,12 +78,12 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
         <div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-450 p-8 rounded-3xl bg-white/30 dark:bg-brand-primary/40 border border-white/20 dark:border-white/5 backdrop-blur-md shadow-lg hover:shadow-xl transition-shadow duration-300">
           <div class="flex items-start gap-4">
             <div class="p-3 rounded-2xl bg-brand-cyan/10 text-brand-cyan">
-              <FaHandshake class="w-6 h-6" />
+              <FaHandshake className="w-6 h-6" />
             </div>
             <div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unser Versprechen</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Ehrliches Versprechen</h4>
               <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
-                Keine versteckten monatlichen Gebühren oder Bindungen. Ihre Website gehört zu 100% Ihnen – mit ehrlichem Support auf Augenhöhe.
+                Kein Kleingedrucktes, keine versteckten Kosten. Wir sprechen auf Augenhöhe mit Ihnen – ganz ohne Fachbegriffe.
               </p>
             </div>
           </div>

src/components/Contact.astro

@@ -10,14 +10,14 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
     
     <!-- Close Button -->
     <button id="close-contact-modal" class="absolute top-6 right-6 p-2 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-500 dark:text-gray-400 hover:text-brand-primary dark:hover:text-white transition-all focus:outline-none" aria-label="Modal schließen">
-      <FaTimes class="w-5 h-5" />
+      <FaTimes className="w-5 h-5" />
     </button>
 
     <!-- Header -->
     <div class="mb-8">
-      <h3 class="text-3xl font-bold text-brand-primary dark:text-white mb-2">Projekt anfragen</h3>
+      <h3 class="text-3xl font-bold text-brand-primary dark:text-white mb-2">Kontakt aufnehmen</h3>
       <p class="text-gray-500 dark:text-gray-400 text-sm">
-        Erzählen Sie uns von Ihrem Vorhaben. Wir melden uns innerhalb von 24 Stunden.
+        Schreiben Sie uns einfach eine kurze Nachricht. Wir melden uns innerhalb von 24 Stunden bei Ihnen.
       </p>
     </div>
 
@@ -26,16 +26,16 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
       
       <!-- Name Field -->
       <div>
-        <label for="name" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Name *</label>
+        <label for="name" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Ihr Name *</label>
         <div class="relative">
           <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400">
-            <FaUser class="w-4 h-4" />
+            <FaUser className="w-4 h-4" />
           </span>
           <input 
             type="text" 
             id="name" 
             name="name" 
-            placeholder="Ihr vollständiger Name"
+            placeholder="Ihr Name"
             class="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white"
             required
           />
@@ -45,16 +45,16 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
 
       <!-- Firma Field -->
       <div>
-        <label for="company" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Firma / Organisation</label>
+        <label for="company" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Ihr Laden / Ihr Betrieb</label>
         <div class="relative">
           <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400">
-            <FaBuilding class="w-4 h-4" />
+            <FaBuilding className="w-4 h-4" />
           </span>
           <input 
             type="text" 
             id="company" 
             name="company" 
-            placeholder="Name Ihres Unternehmens"
+            placeholder="z.B. Dönereck"
             class="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white"
           />
         </div>
@@ -62,10 +62,10 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
 
       <!-- Email Field -->
       <div>
-        <label for="email" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">E-Mail-Adresse *</label>
+        <label for="email" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Ihre E-Mail-Adresse *</label>
         <div class="relative">
           <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400">
-            <FaEnvelope class="w-4 h-4" />
+            <FaEnvelope className="w-4 h-4" />
           </span>
           <input 
             type="email" 
@@ -86,7 +86,7 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
           id="message" 
           name="message" 
           rows="4"
-          placeholder="Beschreiben Sie kurz Ihr Projekt..."
+          placeholder="Schreiben Sie kurz, was Sie brauchen (z.B. 'Ich brauche eine neue Webseite für meine Pizzeria...')"
           class="w-full p-4 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white resize-none"
           required
         ></textarea>
@@ -103,7 +103,7 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
           required
         />
         <label for="privacy" class="text-xs text-gray-500 dark:text-gray-400 leading-normal">
-          Ich stimme der Verarbeitung meiner Daten gemäß der <a href="/privacy" target="_blank" class="text-brand-cyan hover:underline">Datenschutzerklärung</a> zu. *
+          Ich bin mit der <a href="/privacy" target="_blank" class="text-brand-cyan hover:underline">Datenschutzerklärung</a> einverstanden. *
         </label>
       </div>
       <p id="privacy-error" class="error-msg text-xs text-red-500 hidden">Sie müssen der Datenschutzerklärung zustimmen.</p>
@@ -114,8 +114,8 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
         id="submit-btn" 
         class="w-full py-4 mt-2 inline-flex items-center justify-center gap-2 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-xl shadow-lg transition-all duration-300 hover:scale-[1.02] focus:outline-none hover:shadow-[0_0_20px_rgba(0,229,255,0.4)] relative overflow-hidden group active:scale-95"
       >
-        <span id="btn-text">Anfrage senden</span>
+        <span id="btn-text">Nachricht senden</span>
-        <span id="btn-loader" class="hidden"><FaSpinner class="w-5 h-5 animate-spin" /></span>
+        <span id="btn-loader" class="hidden"><FaSpinner className="w-5 h-5 animate-spin" /></span>
       </button>
 
     </form>
@@ -126,7 +126,7 @@ import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } fro
 <div id="success-modal" class="fixed inset-0 z-[120] hidden items-center justify-center p-4 bg-brand-primary/95 backdrop-blur-lg transition-all duration-300">
   <div class="max-w-md w-full bg-white dark:bg-brand-primary border border-gray-200 dark:border-white/10 p-8 rounded-3xl shadow-2xl text-center transform scale-95 opacity-0 transition-all duration-300 ease-out" id="success-box">
     <div class="text-brand-cyan mb-6 flex justify-center">
-      <FaCheckCircle class="w-16 h-16 animate-bounce" />
+      <FaCheckCircle className="w-16 h-16 animate-bounce" />
     </div>
     <h3 class="text-3xl font-bold text-brand-primary dark:text-white mb-4">Nachricht gesendet!</h3>
     <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-8">

src/components/HeroAndLiquidGlass.astro

@@ -31,23 +31,23 @@ const heroTemplates = [
       <div class="lg:col-span-7 space-y-8">
         
         <h1 class="text-4xl sm:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] transition-colors duration-300">
-          Ihre Premium-Website. <br/>
+          Ihre eigene Webseite. <br/>
           <span class="text-sky-600 dark:text-sky-400">
-            Im WaaS-Abonnement.
+            Fix und fertig gemacht.
           </span>
         </h1>
         
         <p class="text-slate-600 dark:text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed transition-colors duration-300">
-          Wir hosten, sichern und pflegen Ihren Internetauftritt auf deutschen Servern. Im monatlichen Sorgenfrei-Paket ist alles inklusive: tägliche Backups, DSGVO-Updates, SSL-Verschlüsselung und auf Wunsch die Erstellung Ihrer Website.
+          Wir bauen, pflegen und sichern Ihren Internetauftritt. Sie müssen sich um absolut nichts kümmern. Für einen fairen monatlichen Festpreis ist alles drin: Gestaltung, Technik, Schutz vor Abmahnungen und schnelle Hilfe bei Änderungen.
         </p>
         
         <div class="flex flex-wrap gap-4 pt-2">
           <a href="#contact" class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 font-bold text-xs uppercase tracking-wider rounded transition-all duration-300 shadow-[0_4px_20px_rgba(2,132,199,0.2)] dark:shadow-[0_0_20px_rgba(56,189,248,0.2)]">
-            Erstgespräch buchen
+            Kostenloses Gespräch buchen
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
           </a>
           <a href="/templates" class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-white hover:bg-slate-50 dark:bg-slate-900/60 dark:hover:bg-slate-800 border border-slate-200 dark:border-white/10 text-slate-700 dark:text-white font-bold text-xs uppercase tracking-wider rounded transition-all duration-300 shadow-sm backdrop-blur-md">
-            Templates ansehen
+            Beispiele ansehen
           </a>
         </div>
       </div>
@@ -173,10 +173,10 @@ const heroTemplates = [
     <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16 items-start reveal">
       <div class="lg:col-span-8">
         <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase transition-colors duration-300">
-          Ihr digitaler Mitarbeiter für Neukunden.
+          Ihr neuer Helfer im Internet.
         </h2>
         <p class="text-slate-600 dark:text-zinc-400 text-sm mt-4 leading-relaxed max-w-2xl transition-colors duration-300">
-          Eine gute Website ist kein Statussymbol, sondern Werkzeug. Wir programmieren Ihren Web-Auftritt so, dass er vollautomatisch Anfragen von echten Kunden aus Ihrer Region generiert.
+          Eine Webseite soll Ihnen Arbeit abnehmen und neue Kunden bringen. Wir bauen Ihre Seite genau so, dass Menschen aus Ihrer Region Sie ganz einfach anrufen oder eine Nachricht schreiben können.
         </p>
       </div>
       
@@ -184,15 +184,15 @@ const heroTemplates = [
       <div class="lg:col-span-4 bg-white/50 border border-white dark:bg-transparent dark:border-white/5 p-6 rounded-2xl shadow-sm space-y-4 transition-colors duration-300">
         <div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
           <svg class="w-4 h-4 text-emerald-500 dark:text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-          <span>Keine Baukästen</span>
+          <span>Echte Handarbeit (keine Baukästen)</span>
         </div>
         <div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
           <svg class="w-4 h-4 text-emerald-500 dark:text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-          <span>100% DSGVO-sicher</span>
+          <span>100% Sicher vor Abmahnungen</span>
         </div>
         <div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
           <svg class="w-4 h-4 text-emerald-500 dark:text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-          <span>Feste Monats-Pauschale</span>
+          <span>Fester, fairer Monatspreis</span>
         </div>
       </div>
     </div>
@@ -209,14 +209,14 @@ const heroTemplates = [
           <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
             <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
           </div>
-          <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Website-as-a-Service (WaaS)</h3>
+          <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Rundum-Sorglos-Webseite</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-sm leading-relaxed transition-colors duration-300">
-            Wir erstellen Ihre neue, verkaufsstarke Premium-Website komplett schlüsselfertig. Keine hohen Einmalkosten. Für eine faire monatliche Pauschale erhalten Sie Design, Programmierung, Hosting, SSL-Verschlüsselung sowie tägliche Datensicherungen und Updates.
+            Wir bauen Ihre neue, verkaufsstarke Webseite fix und fertig auf. Keine teuren Einmalkosten für die Erstellung. Für eine faire monatliche Pauschale übernehmen wir das Design, die Programmierung, den Server, Sicherheits-Updates und tägliche Backups.
           </p>
         </div>
         <div class="flex justify-between items-center mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
-          <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">All-Inclusive ab 49€ / Monat</span>
+          <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Alles inklusive ab 49€ / Monat</span>
-          <span class="text-xs font-bold text-sky-600 dark:text-sky-400">Festpreisgarantie</span>
+          <span class="text-xs font-bold text-sky-600 dark:text-sky-400">Keine versteckten Kosten</span>
         </div>
       </div>
 
@@ -229,12 +229,12 @@ const heroTemplates = [
           <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
             <svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
           </div>
-          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokales SEO</h3>
+          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Bei Google glänzen</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Wir optimieren Ihre Präsenz gezielt für Ihre Region. Kunden finden Sie direkt bei der Google-Suche vor Ort.
+            Wir sorgen dafür, dass Kunden aus Ihrer Stadt Sie sofort finden, wenn sie bei Google nach Ihren Angeboten suchen.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Lokale Dominanz</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Kunden aus der Region</span>
       </div>
 
       <!-- Card 3: DSGVO-Sicherheit (Schmal: col-span-1) -->
@@ -246,12 +246,12 @@ const heroTemplates = [
           <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
             <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
           </div>
-          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">100% DSGVO-sicher</h3>
+          <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">100% Rechtssicher</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
-            Absolute Rechtssicherheit durch <i>Zero Third-Party Requests</i>. Alle Assets werden lokal geladen. Keine US-Serverabfragen, keine Abmahnfallen.
+            Wir bauen Ihre Seite so, dass alles rechtlich wasserdicht ist. Keine Spionage, keine fremden Cookies, kein Ärger.
           </p>
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Zero Third-Party</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Abmahnsicher</span>
       </div>
 
       <!-- Card 4: ROI-Rechner (Breit: col-span-2) -->
@@ -260,25 +260,25 @@ const heroTemplates = [
         <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
         
         <div>
-          <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-4 uppercase tracking-tight">WaaS ROI-Rechner</h3>
+          <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-4 uppercase tracking-tight">Einfacher Spar-Rechner</h3>
           <p class="text-slate-600 dark:text-zinc-400 text-xs mb-6 leading-relaxed">
-            Rechnen Sie aus, wie viel Geld und wertvolle Zeit Sie im Vergleich zu traditionellen Einmalkäufen sparen.
+            Sehen Sie selbst, wie viel Zeit und Geld Sie sparen, wenn wir die Arbeit für Sie übernehmen.
           </p>
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
             <div class="space-y-4">
               <div>
-                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-cost">Aktuelle Web-Kosten (Jahr in €):</label>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-cost">Bisherige Webseiten-Kosten (pro Jahr in €):</label>
                 <input type="number" id="roi-cost" value="600" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
               </div>
               <div>
-                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-hours">Eigenleistung Wartung (Std/Monat):</label>
+                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-hours">Eigene Arbeitszeit an der Seite (Stunden pro Monat):</label>
                 <input type="number" id="roi-hours" value="4" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
               </div>
             </div>
             <div class="bg-sky-500/5 border border-sky-500/10 dark:border-sky-500/5 p-6 rounded-xl flex flex-col justify-center">
-              <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Ersparnis mit N&D WaaS:</span>
+              <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Ihre Geld-Ersparnis:</span>
               <p class="text-3xl font-extrabold text-sky-600 dark:text-sky-400 mt-2" id="roi-result">0 € / Jahr</p>
-              <p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium" id="roi-time">0 Stunden Lebenszeit zurück</p>
+              <p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium" id="roi-time">0 Stunden gerettete Freizeit im Jahr</p>
             </div>
           </div>
         </div>

src/components/OnboardingWizard.astro

@@ -9,10 +9,10 @@
 
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
     <div class="text-center mb-12">
-      <span class="text-xs uppercase tracking-widest text-sky-600 dark:text-sky-400 font-bold">Website Konfigurator</span>
+      <span class="text-xs uppercase tracking-widest text-sky-600 dark:text-sky-400 font-bold">Webseiten-Planer</span>
-      <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white mt-2 uppercase tracking-tight">Onboarding-Wizard</h2>
+      <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white mt-2 uppercase tracking-tight">Ihr Wunsch-Konzept</h2>
       <p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-3">
-        Konfigurieren Sie Ihr Wunschprojekt in unter 2 Minuten. Kostenlos und unverbindlich.
+        Planen Sie Ihre neue Webseite in unter 2 Minuten. Kostenlos und unverbindlich.
       </p>
     </div>
 
@@ -287,18 +287,18 @@
           <div class="wizard-step space-y-6 hidden" data-step="4">
             <div>
               <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 4: Kontaktdaten</h3>
-              <p class="text-slate-500 dark:text-zinc-400 text-xs">Teilen Sie uns mit, wie wir Ihr Konzept zustellen können.</p>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Wohin dürfen wir Ihren kostenlosen Entwurf senden?</p>
             </div>
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
-                <label for="wizard-name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name *</label>
+                <label for="wizard-name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Ihr Name *</label>
                 <input type="text" id="wizard-name" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Name" />
-                <p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte füllen Sie das Feld aus.</p>
+                <p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte tragen Sie Ihren Namen ein.</p>
               </div>
               <div>
-                <label for="wizard-company" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Firma / Organisation</label>
+                <label for="wizard-company" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name Ihres Ladens / Betriebes</label>
-                <input type="text" id="wizard-company" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Unternehmen" />
+                <input type="text" id="wizard-company" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="z.B. Dönereck" />
               </div>
               <div class="sm:col-span-2">
                 <label for="wizard-email" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">E-Mail-Adresse *</label>
@@ -309,12 +309,12 @@
               <!-- GDPR Consent -->
               <div class="sm:col-span-2 space-y-3 pt-2">
                 <p class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
-                  🛡️ Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden.
+                  🛡️ Keine lästigen Werbeanrufe. Kein Spam. Nur Ihr fertiger Entwurf innerhalb von 24 Stunden.
                 </p>
                 <label class="flex items-start gap-2 cursor-pointer">
                   <input type="checkbox" id="wizard-privacy" required class="mt-0.5 w-4 h-4 rounded text-sky-600 focus:ring-sky-500" />
                   <span class="text-[10px] text-slate-500 dark:text-zinc-400 leading-normal">
-                    Ich stimme der verschlüsselten Datenverarbeitung laut <a href="/privacy" class="text-sky-600 dark:text-sky-400 hover:underline">Datenschutzerklärung</a> zu. *
+                    Ich bin mit der <a href="/privacy" class="text-sky-600 dark:text-sky-400 hover:underline">Datenschutzerklärung</a> einverstanden. *
                   </span>
                 </label>
                 <p class="wizard-error text-[10px] text-red-500 hidden">Zustimmung erforderlich.</p>
@@ -325,8 +325,8 @@
           <!-- STEP 5: Zusammenfassung & Absenden -->
           <div class="wizard-step space-y-6 hidden" data-step="5">
             <div>
-              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 5: Zusammenfassung</h3>
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 5: Prüfen & Absenden</h3>
-              <p class="text-slate-500 dark:text-zinc-400 text-xs">Prüfen Sie Ihre Angaben, bevor wir Ihr Projekt generieren.</p>
+              <p class="text-slate-500 dark:text-zinc-400 text-xs">Schauen Sie noch einmal kurz drüber. Wenn alles stimmt, schicken Sie es ab.</p>
             </div>
 
             <div class="bg-slate-100/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 rounded-xl p-4 space-y-3">
@@ -335,21 +335,21 @@
                 <span class="font-bold text-slate-900 dark:text-white" id="summary-industry">-</span>
               </div>
               <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
-                <span class="text-slate-500">Farben (Primär / Sekundär):</span>
+                <span class="text-slate-500">Gewählte Farben:</span>
                 <span class="font-bold text-slate-900 dark:text-white" id="summary-colors">-</span>
               </div>
               <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
-                <span class="text-slate-500">Layout & Stil:</span>
+                <span class="text-slate-500">Aussehen & Aufbau:</span>
                 <span class="font-bold text-slate-900 dark:text-white text-right" id="summary-layout">-</span>
               </div>
               <div class="flex justify-between text-xs pt-1">
-                <span class="text-slate-500">Name / E-Mail:</span>
+                <span class="text-slate-500">Name & E-Mail:</span>
                 <span class="font-bold text-slate-900 dark:text-white" id="summary-contact">-</span>
               </div>
             </div>
 
             <p class="text-[10px] text-slate-500 dark:text-zinc-500 leading-normal text-center">
-              Nach Absenden wird Ihr Anforderungsprofil als strukturierte JSON-Payload an unsere Pipeline übermittelt.
+              Sobald Sie auf 'Absenden' klicken, machen wir uns an die Arbeit und erstellen Ihren persönlichen Entwurf.
             </p>
           </div>
 

src/components/Services.astro

@@ -9,12 +9,12 @@
 
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
     <div class="text-center max-w-3xl mx-auto mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Unsere Leistungen</h2>
+      <h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Was wir für Sie tun</h2>
       <h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white">
-        Maßgeschneiderte Lösungen für digitale Exzellenz
+        Alles, was Sie für Ihren Erfolg im Internet brauchen
       </h3>
       <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
-        Wir begleiten Ihren Betrieb Schritt für Schritt zur perfekten Website für mehr Kunden und Anfragen.
+        Wir machen es Ihnen einfach. Vom ersten Entwurf bis zur fertigen Seite, die Ihnen neue Kunden bringt.
       </p>
     </div>
 
@@ -33,9 +33,9 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
                 </svg>
               </div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Firmenwebseiten</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Digitale Visitenkarte</h4>
               <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                Individuelle Homepages als digitale Visitenkarte für Ihr Unternehmen, optimiert für alle mobilen Endgeräte.
+                Eine schicke Homepage, auf der alles Wichtige steht: Ihre Öffnungszeiten, Telefonnummer und Ihr Angebot. Läuft perfekt auf Handys.
               </p>
             </div>
             <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -45,16 +45,16 @@
           <!-- Back -->
           <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-brand-primary text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
             <div>
-              <h4 class="text-xl font-bold mb-4">Firmenwebseiten</h4>
+              <h4 class="text-xl font-bold mb-4">Digitale Visitenkarte</h4>
               <ul class="space-y-2 text-sm text-gray-200">
-                <li class="flex items-center gap-2">✓ Responsive Webdesign (Mobile First)</li>
+                <li class="flex items-center gap-2">✓ Sieht super aus auf jedem Handy</li>
-                <li class="flex items-center gap-2">✓ Extrem schnelle Ladezeiten</li>
+                <li class="flex items-center gap-2">✓ Lädt blitzschnell ohne Warten</li>
-                <li class="flex items-center gap-2">✓ DSGVO-konform (Cookie-Consent etc.)</li>
+                <li class="flex items-center gap-2">✓ Sicher vor Abmahnungen (DSGVO)</li>
-                <li class="flex items-center gap-2">✓ Modernste Web-Tech (Astro & Tailwind)</li>
+                <li class="flex items-center gap-2">✓ Moderne und sichere Technik</li>
               </ul>
             </div>
             <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
-              Beratung anfordern
+              Kostenlose Beratung anfordern
             </a>
           </div>
         </div>
@@ -72,9 +72,9 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 7.827 5.176-3.243.681.381 2.29z"></path>
                 </svg>
               </div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Landingpages</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Kunden-Gewinnung</h4>
               <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                Zielgerichtete Webseiten für Google- oder Social-Media-Kampagnen zur effektiven Neukundengewinnung.
+                Eine spezielle Seite, die nur ein Ziel hat: Dass neue Kunden Sie anrufen, Ihnen schreiben oder direkt vorbeikommen.
               </p>
             </div>
             <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -84,16 +84,16 @@
           <!-- Back -->
           <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-purple-900 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
             <div>
-              <h4 class="text-xl font-bold mb-4">Landingpages</h4>
+              <h4 class="text-xl font-bold mb-4">Kunden-Gewinnung</h4>
               <ul class="space-y-2 text-sm text-gray-200">
-                <li class="flex items-center gap-2">✓ Conversion-Rate Optimierung (CRO)</li>
+                <li class="flex items-center gap-2">✓ Leicht verständlich für Besucher</li>
-                <li class="flex items-center gap-2">✓ Klare Handlungsaufforderungen (CTA)</li>
+                <li class="flex items-center gap-2">✓ Telefonnummer direkt im Blick</li>
-                <li class="flex items-center gap-2">✓ A/B Testings & Web-Analysen</li>
+                <li class="flex items-center gap-2">✓ Zeigt Ihnen, wer Ihre Seite besucht</li>
-                <li class="flex items-center gap-2">✓ Schnelles Laden für geringe Absprünge</li>
+                <li class="flex items-center gap-2">✓ Kunden springen nicht frustriert ab</li>
               </ul>
             </div>
             <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
-              Projekt anfragen
+              Gespräch vereinbaren
             </a>
           </div>
         </div>
@@ -111,9 +111,9 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
                 </svg>
               </div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Onlineshops</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Internet-Verkauf</h4>
               <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                Einfache, performante E-Commerce-Lösungen für Händler, um Produkte online erfolgreich zu vermarkten.
+                Verkaufen Sie Ihre Produkte, Speisen oder Gutscheine direkt online. Kinderleicht für Ihre Kunden zu bedienen.
               </p>
             </div>
             <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -123,16 +123,16 @@
           <!-- Back -->
           <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/90 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
             <div>
-              <h4 class="text-xl font-bold mb-4">Onlineshops</h4>
+              <h4 class="text-xl font-bold mb-4">Internet-Verkauf</h4>
               <ul class="space-y-2 text-sm text-gray-200">
-                <li class="flex items-center gap-2">✓ Einfache Produkt- & Bestellpflege</li>
+                <li class="flex items-center gap-2">✓ Produkte & Speisen leicht ändern</li>
-                <li class="flex items-center gap-2">✓ PayPal, Stripe & Klarna Integration</li>
+                <li class="flex items-center gap-2">✓ Bezahlung per PayPal oder Karte</li>
-                <li class="flex items-center gap-2">✓ Skalierbare E-Commerce-Systeme</li>
+                <li class="flex items-center gap-2">✓ Wächst mit Ihrem Laden mit</li>
-                <li class="flex items-center gap-2">✓ Optimierter Checkout-Prozess</li>
+                <li class="flex items-center gap-2">✓ Kinderleichte Bestellung</li>
               </ul>
             </div>
             <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
-              Sicherheit prüfen
+              Shop anfragen
             </a>
           </div>
         </div>
@@ -150,9 +150,9 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.31-.374.711-.6 1.154-.63M11.42 15.17a3 3 0 11-4.088-4.088M12.73 8.21l-.504-.504a1.5 1.5 0 112.122-2.122l.504.504m-2.122 2.122A2.99 2.99 0 0012 8.25m0 0a3.01 3.01 0 01-1.127-.224l-3.23-3.23a1.5 1.5 0 10-2.122 2.122l3.23 3.23C8.63 10.3 8.6 10.65 8.77 11"></path>
                 </svg>
               </div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Wartung & Support</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Technik & Pflege</h4>
               <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                Wir kümmern uns um Updates, Backups, Sicherheit und inhaltliche Anpassungen Ihrer Website.
+                Sie wollen ein neues Bild zeigen oder die Öffnungszeiten ändern? Schreiben Sie uns einfach. Wir machen das für Sie.
               </p>
             </div>
             <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -162,16 +162,16 @@
           <!-- Back -->
           <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-primary/95 to-purple-950 text-white border border-brand-cyan/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
             <div>
-              <h4 class="text-xl font-bold mb-4">Wartung & Support</h4>
+              <h4 class="text-xl font-bold mb-4">Technik & Pflege</h4>
               <ul class="space-y-2 text-sm text-gray-200">
-                <li class="flex items-center gap-2">✓ Regelmäßige System- & Plugin-Updates</li>
+                <li class="flex items-center gap-2">✓ Wir machen alle wichtigen Updates</li>
-                <li class="flex items-center gap-2">✓ Tägliche Sicherheits-Backups</li>
+                <li class="flex items-center gap-2">✓ Tägliche automatische Datensicherung</li>
-                <li class="flex items-center gap-2">✓ Schutz vor Spam & Hackerangriffen</li>
+                <li class="flex items-center gap-2">✓ Schutz vor Internet-Angriffen</li>
-                <li class="flex items-center gap-2">✓ Schnelle inhaltliche Änderungen</li>
+                <li class="flex items-center gap-2">✓ Schnelle Änderungen per WhatsApp/E-Mail</li>
               </ul>
             </div>
             <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
-              Support anfragen
+              Hilfe anfordern
             </a>
           </div>
         </div>
@@ -190,9 +190,9 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path>
                 </svg>
               </div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Lokale SEO & Google</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Bei Google gefunden werden</h4>
               <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                Verbessern Sie Ihre Sichtbarkeit bei lokalen Google-Suchanfragen für mehr Anfragen aus Ihrer Region.
+                Wenn jemand in Ihrer Stadt nach Ihren Angeboten sucht, sorgen wir dafür, dass Sie ganz oben stehen.
               </p>
             </div>
             <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -202,16 +202,16 @@
           <!-- Back -->
           <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-purple-950 text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
             <div>
-              <h4 class="text-xl font-bold mb-4">Lokale SEO</h4>
+              <h4 class="text-xl font-bold mb-4">Bei Google gefunden werden</h4>
               <ul class="space-y-2 text-sm text-gray-200">
-                <li class="flex items-center gap-2">✓ Google My Business Optimierung</li>
+                <li class="flex items-center gap-2">✓ Google Maps Eintrag perfekt gepflegt</li>
-                <li class="flex items-center gap-2">✓ Keyword-Recherche für Ihre Nische</li>
+                <li class="flex items-center gap-2">✓ Gefunden bei den richtigen Suchwörtern</li>
-                <li class="flex items-center gap-2">✓ OnPage & OffPage Optimierung</li>
+                <li class="flex items-center gap-2">✓ Ihre Seite wird für Google optimiert</li>
-                <li class="flex items-center gap-2">✓ Ladezeiten-Optimierung (Web Vitals)</li>
+                <li class="flex items-center gap-2">✓ Schnelles Laden bringt bessere Plätze</li>
               </ul>
             </div>
             <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
-              Termin buchen
+              Kostenloses Gespräch vereinbaren
             </a>
           </div>
         </div>
@@ -229,9 +229,9 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.076-3.077a2.25 2.25 0 00-3.182-3.182L13.1 7.27a15.996 15.996 0 00-4.648 4.764m3.122 3.122l-1.22 4.88m0 0a3 3 0 00-5.78 1.128c0 .285.023.57.067.85"></path>
                 </svg>
               </div>
-              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">UI/UX Webdesign</h4>
+              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Schönes Aussehen</h4>
               <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                Individuelle Design-Entwürfe, die auf Ihre Markenidentität abgestimmt sind und Besucher begeistern.
+                Wir gestalten Ihre Webseite so, dass sie modern, einladend und genau passend zu Ihrem Geschäft aussieht.
               </p>
             </div>
             <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -241,16 +241,16 @@
           <!-- Back -->
           <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/80 to-brand-primary text-white border border-brand-magenta/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
             <div>
-              <h4 class="text-xl font-bold mb-4">Webdesign</h4>
+              <h4 class="text-xl font-bold mb-4">Schönes Aussehen</h4>
               <ul class="space-y-2 text-sm text-gray-200">
-                <li class="flex items-center gap-2">✓ Einzigartige, moderne Designs</li>
+                <li class="flex items-center gap-2">✓ Kein langweiliges Standard-Design</li>
-                <li class="flex items-center gap-2">✓ Abgestimmtes Farb- & Schriftkonzept</li>
+                <li class="flex items-center gap-2">✓ Schöne Farben passend zu Ihrem Logo</li>
-                <li class="flex items-center gap-2">✓ Intuitive Benutzerführung (UI/UX)</li>
+                <li class="flex items-center gap-2">✓ Kunden finden sofort, was sie suchen</li>
-                <li class="flex items-center gap-2">✓ Erstellung von Figma-Prototypen</li>
+                <li class="flex items-center gap-2">✓ Sie sehen das Design vor dem Start</li>
               </ul>
             </div>
             <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
-              Potenziale besprechen
+              Design besprechen
             </a>
           </div>
         </div>