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

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">✓ Extrem schnelle Ladezeiten</li>
-                <li class="flex items-center gap-2">✓ DSGVO-konform (Cookie-Consent etc.)</li>
-                <li class="flex items-center gap-2">✓ Modernste Web-Tech (Astro & Tailwind)</li>
+                <li class="flex items-center gap-2">✓ Sieht super aus auf jedem Handy</li>
+                <li class="flex items-center gap-2">✓ Lädt blitzschnell ohne Warten</li>
+                <li class="flex items-center gap-2">✓ Sicher vor Abmahnungen (DSGVO)</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">✓ Klare Handlungsaufforderungen (CTA)</li>
-                <li class="flex items-center gap-2">✓ A/B Testings & Web-Analysen</li>
-                <li class="flex items-center gap-2">✓ Schnelles Laden für geringe Absprünge</li>
+                <li class="flex items-center gap-2">✓ Leicht verständlich für Besucher</li>
+                <li class="flex items-center gap-2">✓ Telefonnummer direkt im Blick</li>
+                <li class="flex items-center gap-2">✓ Zeigt Ihnen, wer Ihre Seite besucht</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">✓ PayPal, Stripe & Klarna Integration</li>
-                <li class="flex items-center gap-2">✓ Skalierbare E-Commerce-Systeme</li>
-                <li class="flex items-center gap-2">✓ Optimierter Checkout-Prozess</li>
+                <li class="flex items-center gap-2">✓ Produkte & Speisen leicht ändern</li>
+                <li class="flex items-center gap-2">✓ Bezahlung per PayPal oder Karte</li>
+                <li class="flex items-center gap-2">✓ Wächst mit Ihrem Laden mit</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">✓ Tägliche Sicherheits-Backups</li>
-                <li class="flex items-center gap-2">✓ Schutz vor Spam & Hackerangriffen</li>
-                <li class="flex items-center gap-2">✓ Schnelle inhaltliche Änderungen</li>
+                <li class="flex items-center gap-2">✓ Wir machen alle wichtigen Updates</li>
+                <li class="flex items-center gap-2">✓ Tägliche automatische Datensicherung</li>
+                <li class="flex items-center gap-2">✓ Schutz vor Internet-Angriffen</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">✓ Keyword-Recherche für Ihre Nische</li>
-                <li class="flex items-center gap-2">✓ OnPage & OffPage Optimierung</li>
-                <li class="flex items-center gap-2">✓ Ladezeiten-Optimierung (Web Vitals)</li>
+                <li class="flex items-center gap-2">✓ Google Maps Eintrag perfekt gepflegt</li>
+                <li class="flex items-center gap-2">✓ Gefunden bei den richtigen Suchwörtern</li>
+                <li class="flex items-center gap-2">✓ Ihre Seite wird für Google optimiert</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">✓ Abgestimmtes Farb- & Schriftkonzept</li>
-                <li class="flex items-center gap-2">✓ Intuitive Benutzerführung (UI/UX)</li>
-                <li class="flex items-center gap-2">✓ Erstellung von Figma-Prototypen</li>
+                <li class="flex items-center gap-2">✓ Kein langweiliges Standard-Design</li>
+                <li class="flex items-center gap-2">✓ Schöne Farben passend zu Ihrem Logo</li>
+                <li class="flex items-center gap-2">✓ Kunden finden sofort, was sie suchen</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>