Design-Verbesserungen: Copy, Layout, Karte & Social-Proof

- Hero: Sub-Headline und CTA-Text niedrigschwelliger formuliert
- Services: Konkretere, ergebnisorientierte Beschreibungen
- Neue About-Section mit persönlichem Pull-Quote
- Neue Process-Section als 4-Spalten-Grid (statt Services-Klon)
- Packages: Feature-Listen, Profi-Paket hervorgehoben, neue Texte
- Contact: Infos links, interaktive mapcn-Karte rechts (Crimmitschau)
- Karte rot eingefärbt via sepia/hue-rotate CSS-Filter
- Nav um "Ablauf"-Link ergänzt, fehlende IDs gesetzt
- Kleinere Copy-Fixes (Opacity, leerer Span, Region konkretisiert)

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/landing/packages-section.tsx

@@ -1,18 +1,51 @@
+import { Check } from "lucide-react";
+
 const packages = [
   {
     name: "Basis",
     price: "799 EUR",
     detail: "Eine starke Seite für ein klares Angebot.",
+    highlighted: false,
+    features: [
+      "One-Page-Website",
+      "Mobil optimiert",
+      "Kontaktformular",
+      "DSGVO & Impressum",
+      "Hosting für 1 Jahr",
+    ],
   },
   {
     name: "Profi",
     price: "1.499 EUR",
     detail: "Mehrere Seiten für Betriebe mit mehr zu zeigen.",
+    highlighted: true,
+      features: [
+        "Alles aus Basis",
+      "Bis zu 5 Unterseiten",
+      "Individuelles Design",
+      "SEO-Grundoptimierung",
+      "Google Maps Einbindung",
+      "Kontaktformular",
+      "DSGVO & Impressum",
+      "Hosting für 1 Jahr",
+    ],
   },
   {
     name: "Maßarbeit",
     price: "2.499 EUR+",
-    detail: "Eigene Struktur, selbst pflegbar, für besondere Anforderungen.",
+    detail: "Ihr Betrieb, Ihre Regeln. Inhalte selbst ändern, Seiten ergänzen, wachsen.",
+    highlighted: false,
+      features: [
+        "Alles aus Profi",
+      "Unbegrenzte Seiten",
+      "Inhalte selbst pflegbar (CMS)",
+      "Individuelles Design & Struktur",
+      "SEO-Optimierung",
+      "Blog oder News-Bereich",
+      "Erweiterte Funktionen",
+      "DSGVO & Impressum",
+      "Hosting für 1 Jahr",
+    ],
   },
 ];
 
@@ -25,29 +58,47 @@ const PackagesSection = () => {
       <div className="grid gap-8 lg:grid-cols-[0.45fr_0.55fr]">
         <div>
           <p className="text-sm uppercase tracking-[0.3em] text-primary">
-            Pakete (04)
+            Pakete (05)
           </p>
           <h2 className="mt-8 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
-            Kosten ohne Nebel
+            Festpreis. Punkt.
           </h2>
         </div>
         <div className="grid gap-4">
           {packages.map((item) => (
             <article
               key={item.name}
-              className="grid gap-4 border border-border p-5 sm:grid-cols-[0.5fr_0.5fr] sm:p-6"
+              className={`grid gap-6 border p-5 sm:grid-cols-[0.5fr_0.5fr] sm:p-6 ${item.highlighted ? "border-primary bg-primary/6" : "border-border"}`}
             >
               <div>
-                <p className="text-sm uppercase tracking-[0.24em] text-primary">
-                  {item.name}
-                </p>
+                <div className="flex items-center gap-3">
+                  <p className="text-sm uppercase tracking-[0.24em] text-primary">
+                    {item.name}
+                  </p>
+                  {item.highlighted ? (
+                    <span className="bg-primary px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.2em] text-primary-foreground">
+                      Beliebteste Wahl
+                    </span>
+                  ) : null}
+                </div>
                 <p className="mt-4 text-4xl font-black uppercase">
                   {item.price}
                 </p>
+                <p className="mt-3 text-lg leading-7 text-muted-foreground">
+                  {item.detail}
+                </p>
               </div>
-              <p className="self-end text-lg leading-7 text-muted-foreground">
-                {item.detail}
-              </p>
+              <ul className="flex flex-col gap-2.5 self-center">
+                {item.features.map((feature) => (
+                  <li
+                    key={feature}
+                    className="flex items-center gap-3 text-sm text-foreground/85"
+                  >
+                    <Check className="size-4 shrink-0 text-primary" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
             </article>
           ))}
         </div>