From c35d41187467277edb738094ffe6584aa9f94874 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 6 May 2026 11:37:35 +0200
Subject: [PATCH] style: radically simplify layouts to be extremely modern and
 minimalist

---
 apps/web/app/(site)/about/page.tsx    | 349 ++++++++-------------
 apps/web/app/(site)/page.tsx          | 356 ++++++++--------------
 apps/web/app/(site)/websites/page.tsx | 417 +++++++++-----------------
 3 files changed, 388 insertions(+), 734 deletions(-)

diff --git a/apps/web/app/(site)/about/page.tsx b/apps/web/app/(site)/about/page.tsx
index b292c62..b5b8adb 100644
--- a/apps/web/app/(site)/about/page.tsx
+++ b/apps/web/app/(site)/about/page.tsx
@@ -1,215 +1,147 @@
 "use client";
 
-import Image from "next/image";
-import { Section } from "@/src/components/Section";
 import { Reveal } from "@/src/components/Reveal";
-import {
-  ExperienceIllustration,
-  ResponsibilityIllustration,
-  ResultIllustration,
-  ContactIllustration,
-  HeroLines,
-  ParticleNetwork,
-  GridLines,
-} from "@/src/components/Landing";
+import { Section } from "@/src/components/Section";
 import { Signature } from "@/src/components/Signature";
-import { Check } from "lucide-react";
 import {
   H1,
   H3,
-  H4,
   LeadText,
   BodyText,
   Label,
   MonoLabel,
 } from "@/src/components/Typography";
-import { Card, Container } from "@/src/components/Layout";
 import { Button } from "@/src/components/Button";
-import { IconList, IconListItem } from "@/src/components/IconList";
-import {
-  GradientMesh,
-  CodeSnippet,
-  AbstractCircuit,
-} from "@/src/components/Effects";
-
-import { Marker } from "@/src/components/Marker";
 
 export default function AboutPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
       {/* Hero Section */}
-      <section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50">
-        <Container variant="narrow" className="relative z-10">
-          <div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
+      <section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
+          <div className="flex flex-col items-center text-center space-y-12">
             <Reveal width="fit-content">
-              <div className="relative">
-                <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
-                  <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
-                    <img
-                      src="/marc-mintel.png"
-                      alt="Marc Mintel"
-                      className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0 w-full h-full"
-                    />
-                  </div>
-                </div>
+              <div className="w-40 h-40 md:w-56 md:h-56 rounded-full overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
+                <img
+                  src="/marc-mintel.png"
+                  alt="Marc Mintel"
+                  className="object-cover w-full h-full"
+                />
               </div>
             </Reveal>
 
-            <div className="space-y-3 md:space-y-6 max-w-3xl">
+            <div className="space-y-6 max-w-4xl">
               <Reveal delay={0.1}>
-                <div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
-                  <div className="h-px w-6 md:w-8 bg-slate-900"></div>
-                  <MonoLabel className="text-slate-900 text-[10px] md:text-sm">
-                    Webentwickler
-                  </MonoLabel>
-                  <div className="h-px w-6 md:w-8 bg-slate-900"></div>
-                </div>
+                <MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
+                  WEBENTWICKLER
+                </MonoLabel>
               </Reveal>
               <Reveal delay={0.2}>
-                <H1 className="text-4xl md:text-8xl leading-none tracking-tighter">
+                <H1 className="text-6xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                   Über <span className="text-slate-400">mich.</span>
                 </H1>
               </Reveal>
               <Reveal delay={0.3}>
-                <p className="text-slate-400 font-medium max-w-xl mx-auto text-sm md:text-xl">
+                <p className="text-slate-500 max-w-2xl mx-auto text-xl md:text-3xl leading-snug">
                   15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
                   ersparen.
                 </p>
               </Reveal>
             </div>
           </div>
-        </Container>
-
-        {/* Connector to first section */}
-        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-12 md:h-16 bg-gradient-to-b from-transparent to-slate-200" />
+        </div>
       </section>
 
       {/* Section 01: Story */}
-      <Section
-        number="01"
-        title="Erfahrung"
-        borderTop
-        illustration={<ExperienceIllustration className="w-24 h-24" />}
-      >
-        <div className="space-y-8 md:space-y-12">
+      <Section number="01" title="Erfahrung" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
               Aus der Praxis. <br />
               <span className="text-slate-400">Für die Praxis.</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
             <Reveal delay={0.1}>
-              <div className="space-y-6 md:space-y-8">
-                <LeadText className="text-xl md:text-2xl text-slate-400">
-                  Ich habe in Agenturen, Konzernen und Startups gearbeitet.
-                  Dabei habe ich oft gesehen, woran Projekte scheitern: zu viele
-                  Leute, zu viel Blabla, keine klaren Verantwortlichkeiten.{" "}
-                  <span className="text-slate-900">
-                    <Marker delay={0.2}>Das mache ich anders.</Marker>
-                  </span>
-                </LeadText>
-                <IconList className="space-y-4">
-                  {[
-                    "Kein Fachchinesisch, sondern klare Kommunikation",
-                    "Fokus auf Ergebnisse statt auf endlose Meetings",
-                    "Eine Person, die Ihr Projekt von A bis Z kennt",
-                  ].map((item, i) => (
-                    <IconListItem key={i} bullet>
-                      <BodyText className="text-lg">{item}</BodyText>
-                    </IconListItem>
-                  ))}
-                </IconList>
-              </div>
+              <LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
+                Ich habe in Agenturen, Konzernen und Startups gearbeitet. Dabei
+                habe ich gesehen, woran Projekte scheitern: zu viele Leute, zu
+                viel Blabla.
+              </LeadText>
             </Reveal>
             <Reveal delay={0.2}>
-              <Card
-                variant="gray"
-                hover={false}
-                padding="normal"
-                className="group"
-              >
-                <H4 className="text-xl mb-6">
-                  Meine Philosophie: Direkte Zusammenarbeit ohne
-                  Reibungsverluste.
-                </H4>
-                <div className="flex flex-wrap gap-3">
-                  {["Unkompliziert", "Persönlich", "Verlässlich"].map(
-                    (tag, i) => (
-                      <span
-                        key={i}
-                        className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm"
-                      >
-                        <Label className="text-slate-900">{tag}</Label>
-                      </span>
-                    ),
-                  )}
+              <div className="space-y-12">
+                <BodyText className="text-slate-500 text-lg md:text-xl">
+                  Das mache ich anders. Keine Hierarchien, kein Fachchinesisch,
+                  sondern klare Kommunikation. Fokus auf Ergebnisse statt auf
+                  endlose Meetings.
+                </BodyText>
+                <div className="space-y-6 border-l border-slate-100 pl-8">
+                  <div>
+                    <Label className="text-slate-900 text-lg">Direkt</Label>
+                    <BodyText className="text-slate-500">
+                      Sie sprechen immer mit mir.
+                    </BodyText>
+                  </div>
+                  <div>
+                    <Label className="text-slate-900 text-lg">
+                      Unkompliziert
+                    </Label>
+                    <BodyText className="text-slate-500">
+                      Wir beschränken uns auf das Wesentliche.
+                    </BodyText>
+                  </div>
                 </div>
-              </Card>
+              </div>
             </Reveal>
           </div>
         </div>
       </Section>
 
-      {/* Section 02: Arbeitsweise – HOW I work */}
-      <Section
-        number="02"
-        title="Ablauf"
-        variant="gray"
-        borderTop
-        illustration={<ResponsibilityIllustration className="w-24 h-24" />}
-        effects={<GradientMesh variant="subtle" className="opacity-60" />}
-      >
-        <div className="space-y-12">
+      {/* Section 02: Ablauf */}
+      <Section number="02" title="Ablauf" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              So einfach läuft ein Projekt <br />
-              <span className="text-slate-400">bei mir ab.</span>
+            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
+              So einfach läuft <br />
+              <span className="text-slate-400">ein Projekt ab.</span>
             </H3>
           </Reveal>
 
-          {/* Timeline Steps */}
-          <div className="space-y-1 relative">
-            {/* Connecting line */}
-            <div className="absolute left-[15px] top-8 bottom-8 w-px bg-slate-200 hidden md:block" />
-
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
             {[
               {
                 step: "01",
                 title: "Kurzes Gespräch",
-                desc: "Sie beschreiben, was Sie brauchen. Kein stundenlanger Workshop, nur die Fakten.",
+                desc: "Kein Workshop, nur die Fakten.",
               },
               {
                 step: "02",
                 title: "Klares Angebot",
-                desc: "Sie erhalten einen Fixpreis. Ohne Sternchen, ohne Nachforderungen.",
+                desc: "Fixpreis ohne Sternchen.",
               },
               {
                 step: "03",
-                title: "Schnelle Umsetzung",
-                desc: "Ich baue Ihre Website. Sie müssen sich um nichts kümmern.",
+                title: "Umsetzung",
+                desc: "Ich baue, Sie entspannen.",
               },
               {
                 step: "04",
-                title: "Go-Live & Sorglos-Paket",
-                desc: "Die Seite geht online und ich übernehme ab sofort die Wartung und alle Änderungen für Sie.",
+                title: "Go-Live & Support",
+                desc: "Ich übernehme die Wartung.",
               },
             ].map((item, i) => (
-              <Reveal key={i} delay={0.1 + i * 0.1}>
-                <div className="flex gap-4 md:gap-6 py-2 md:py-6 group">
-                  <div className="relative z-10 shrink-0">
-                    <div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
-                      <span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
-                        {item.step}
-                      </span>
-                    </div>
-                  </div>
-                  <div className="space-y-1 md:space-y-2 pt-1">
-                    <H4 className="text-base md:text-xl font-bold">
+              <Reveal key={i} delay={0.1 * i}>
+                <div className="space-y-6 pt-6 border-t border-slate-900">
+                  <Label className="text-slate-400 font-mono text-sm">
+                    {item.step}
+                  </Label>
+                  <div className="space-y-2">
+                    <Label className="text-slate-900 text-xl">
                       {item.title}
-                    </H4>
-                    <BodyText className="text-slate-500 text-sm md:text-base">
+                    </Label>
+                    <BodyText className="text-slate-500 text-lg">
                       {item.desc}
                     </BodyText>
                   </div>
@@ -220,110 +152,65 @@ export default function AboutPage() {
         </div>
       </Section>
 
-      {/* Section 03: Garantie – The Pledge */}
+      {/* Section 03: Garantie */}
       <Section number="03" title="Garantie" borderTop>
-        <div className="relative">
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <div className="max-w-4xl text-left space-y-12 md:space-y-16 py-8 md:py-16">
-              <H3 className="text-3xl md:text-6xl leading-tight">
-                Ich stehe für <br />
-                <span className="text-slate-400">meine Arbeit gerade.</span>
-              </H3>
-
-              <div className="prose prose-lg md:prose-2xl text-slate-500 leading-relaxed">
-                <p>
-                  Keine Hierarchien. Keine Ausreden. Wenn etwas nicht passt,
-                  liegt die Verantwortung allein bei mir.
-                </p>
-                <p>
-                  Sie beauftragen mich, damit Sie{" "}
-                  <span className="text-slate-900 font-medium relative inline-block">
-                    Ruhe
-                    <svg
-                      className="absolute -bottom-2 left-0 w-full h-3 text-blue-500/30"
-                      viewBox="0 0 100 10"
-                      preserveAspectRatio="none"
-                    >
-                      <path
-                        d="M0 5 Q 50 10 100 5"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        fill="none"
-                      />
-                    </svg>
-                  </span>{" "}
-                  haben. Und genau das bekommen Sie.
-                </p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl text-left">
-                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
-                  <h4 className="font-bold text-slate-900 mb-2">
-                    Fixpreis-Garantie
-                  </h4>
-                  <p className="text-slate-500 text-sm">
-                    Keine versteckten Kosten. Der vereinbarte Preis ist final.
-                  </p>
-                </div>
-                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
-                  <h4 className="font-bold text-slate-900 mb-2">
-                    Zufriedenheitsgarantie
-                  </h4>
-                  <p className="text-slate-500 text-sm">
-                    Wir gehen erst live, wenn Sie zu 100% zufrieden sind.
-                  </p>
-                </div>
-              </div>
-
-              <div className="pt-8 md:pt-12 flex flex-col items-start">
-                <div className="w-64 md:w-80">
-                  <Signature delay={0.5} />
-                </div>
-              </div>
-            </div>
+            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
+              Ich stehe für <br />
+              <span className="text-slate-400">meine Arbeit gerade.</span>
+            </H3>
           </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-end">
+            <Reveal delay={0.1}>
+              <div className="space-y-8">
+                <LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
+                  Wenn etwas nicht passt, liegt die Verantwortung allein bei
+                  mir.
+                </LeadText>
+                <BodyText className="text-slate-500 text-lg md:text-xl">
+                  Sie beauftragen mich, damit Sie Ruhe haben. Fixpreis bedeutet
+                  Fixpreis. Wir gehen erst live, wenn Sie zu 100% zufrieden
+                  sind.
+                </BodyText>
+              </div>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <div className="pb-8">
+                <Signature />
+              </div>
+            </Reveal>
+          </div>
         </div>
       </Section>
 
       {/* Section 04: CTA */}
-      <Section
-        number="04"
-        title="Kontakt"
-        variant="gray"
-        borderTop
-        illustration={<ContactIllustration className="w-24 h-24" />}
-        effects={<GradientMesh variant="metallic" className="opacity-60" />}
-      >
-        <div className="space-y-10 md:space-y-12">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              Bereit, Ihre Website <br />
-              <span className="text-slate-400">abzuhaken?</span>
-            </H3>
-          </Reveal>
+      <Section number="04" title="Kontakt" borderTop>
+        <div className="py-12 md:py-24">
+          <div className="space-y-16 md:space-y-24">
+            <Reveal>
+              <H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
+                Bereit, das Thema <br />
+                <span className="text-slate-400">abzuhaken?</span>
+              </H3>
+            </Reveal>
 
-          <Card
-            variant="glass"
-            hover={false}
-            padding="normal"
-            techBorder
-            className="rounded-3xl shadow-xl relative overflow-hidden group"
-          >
-            <div className="relative z-10 space-y-6 md:space-y-8">
-              <LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
-                Lassen Sie uns das Thema Website ein für alle Mal{" "}
-                <span className="text-slate-900">
-                  sinnvoll <Marker delay={0.3}>lösen.</Marker>
-                </span>
-              </LeadText>
-
-              <div className="pt-2 md:pt-4">
-                <Button href="/contact" className="w-full md:w-auto">
+            <Reveal delay={0.2}>
+              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
+                <LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
+                  Lassen Sie uns das Thema Website ein für alle Mal sinnvoll
+                  lösen.
+                </LeadText>
+                <Button
+                  href="/contact"
+                  className="w-full md:w-auto px-12 py-6 text-xl"
+                >
                   Kostenlos anfragen
                 </Button>
               </div>
-            </div>
-          </Card>
+            </Reveal>
+          </div>
         </div>
       </Section>
     </div>
diff --git a/apps/web/app/(site)/page.tsx b/apps/web/app/(site)/page.tsx
index 7671ffc..483cc69 100644
--- a/apps/web/app/(site)/page.tsx
+++ b/apps/web/app/(site)/page.tsx
@@ -1,94 +1,56 @@
 "use client";
 
-import {
-  ComparisonRow,
-  ConceptCode,
-  ConceptCommunication,
-  ConceptPrice,
-  ConceptPrototyping,
-  ConceptWebsite,
-} from "@/src/components/Landing";
 import { Reveal } from "@/src/components/Reveal";
 import { Section } from "@/src/components/Section";
-import {
-  H1,
-  H3,
-  LeadText,
-  BodyText,
-  MonoLabel,
-  Label,
-} from "@/src/components/Typography";
-import { Card, Container } from "@/src/components/Layout";
+import { H1, H3, LeadText, BodyText, Label } from "@/src/components/Typography";
 import { Button } from "@/src/components/Button";
-import { GradientMesh, CodeSnippet } from "@/src/components/Effects";
-import { IconList, IconListItem } from "@/src/components/IconList";
 import { HeroSection } from "@/src/components/HeroSection";
-import { GlitchText } from "@/src/components/GlitchText";
-import { Marker } from "@/src/components/Marker";
-import { PenCircle } from "@/src/components/PenCircle";
 import { Availability } from "@/src/components/Availability";
 
 export default function LandingPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      {/* Dark Hero */}
       <HeroSection />
 
-      {/* Rest of page on white */}
-
-      {/* Section 02: Was Sie bekommen */}
-      <Section
-        number="02"
-        title="Ihr Vorteil"
-        borderTop
-        effects={<GradientMesh variant="metallic" className="opacity-70" />}
-      >
-        <div className="space-y-10 md:space-y-16 relative">
+      {/* Section 02: Ihr Vorteil */}
+      <Section number="02" title="Ihr Vorteil" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="max-w-3xl">
-              Sie kümmern sich um Ihr Geschäft. <br />
-              <Marker delay={0.3}>Ich um Ihre Website.</Marker>
+            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
+              Sie kümmern sich um Ihr Geschäft.{" "}
+              <span className="text-slate-400">Ich um Ihre Website.</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 relative z-10">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
             {[
               {
-                icon: <ConceptCommunication className="w-8 h-8" />,
                 title: "Ein Ansprechpartner",
-                text: "Sie sprechen direkt mit dem, der Ihre Website baut. Keine Agentur, keine Umwege, kein Stille-Post-Effekt.",
+                text: "Direkte Kommunikation. Keine Agentur, keine Projektmanager, kein Stille-Post-Effekt.",
               },
               {
-                icon: <ConceptPrototyping className="w-8 h-8" />,
-                title: "Schnell sichtbare Ergebnisse",
-                text: "Kein monatelanges Warten. Sie sehen erste Entwürfe innerhalb weniger Tage — nicht erst nach Wochen.",
+                title: "Fixpreis",
+                text: "Keine versteckten Kosten, keine Stundenzettel. Sie wissen exakt, was es kostet.",
               },
               {
-                icon: <ConceptPrice className="w-8 h-8" />,
-                title: "Fixpreis ohne Überraschungen",
-                text: "Sie wissen vorher, was es kostet. Kein Stundenzettel, keine Nachforderungen, keine bösen Überraschungen.",
+                title: "Schnelle Ergebnisse",
+                text: "Kein monatelanges Warten. Erste Entwürfe innerhalb weniger Tage.",
               },
               {
-                icon: <ConceptCode className="w-8 h-8" />,
                 title: "Null Arbeit für Sie",
-                text: "Keine Einarbeitung in ein CMS, keine Schulungen. Änderungen? Sagen Sie Bescheid — ich erledige das.",
+                text: "Keine CMS-Einarbeitung. Änderungen oder Updates? Eine kurze E-Mail genügt.",
               },
             ].map((item, i) => (
-              <Reveal key={i} delay={0.1 + i * 0.1}>
-                <Card
-                  variant="glass"
-                  padding="normal"
-                  techBorder
-                  className="group"
-                >
-                  <div className="space-y-4 relative z-10">
-                    <div className="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
-                      {item.icon}
-                    </div>
-                    <Label className="text-slate-900">{item.title}</Label>
-                    <BodyText className="text-slate-500">{item.text}</BodyText>
-                  </div>
-                </Card>
+              <Reveal key={i} delay={0.1 * i}>
+                <div className="space-y-4">
+                  <div className="h-px w-full bg-slate-100 mb-6" />
+                  <Label className="text-slate-900 text-lg md:text-xl font-medium tracking-tight">
+                    {item.title}
+                  </Label>
+                  <BodyText className="text-slate-500 text-base md:text-lg">
+                    {item.text}
+                  </BodyText>
+                </div>
               </Reveal>
             ))}
           </div>
@@ -96,195 +58,142 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 03: Der Unterschied */}
-      <Section number="03" title="Der Unterschied" variant="white" borderTop>
-        <div className="space-y-10 md:space-y-16 relative">
+      <Section number="03" title="Der Unterschied" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="max-w-3xl">
-              Warum nicht einfach <br />
-              eine <Marker delay={0.4}>Agentur?</Marker>
+            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
+              Warum nicht einfach{" "}
+              <span className="text-slate-400">eine Agentur?</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 gap-8 relative z-20">
-            <ComparisonRow
-              negativeLabel="Agentur"
-              negativeText="Projektmanager, Designer, Entwickler — Sie erklären Ihr Anliegen drei Mal."
-              positiveLabel="Bei mir"
-              positiveText={
-                <>
-                  <PenCircle delay={0.5}>Ein</PenCircle> Ansprechpartner für
-                  alles. Von der ersten Idee bis zur fertigen Website.
-                </>
-              }
-              delay={0.1}
-            />
-            <ComparisonRow
-              negativeLabel="Agentur"
-              negativeText="Stundenabrechnungen, Nachträge, unklare Endkosten."
-              positiveLabel="Bei mir"
-              positiveText={
-                <>
-                  <PenCircle delay={0.5}>Fixpreis.</PenCircle> Sie wissen vorher
-                  exakt, was es kostet. Punkt.
-                </>
-              }
-              reverse
-              delay={0.2}
-            />
-            <ComparisonRow
-              negativeLabel="Baukasten"
-              negativeText="Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt."
-              positiveLabel="Bei mir"
-              positiveText={
-                <>
-                  Ich baue, Sie lehnen sich zurück. Brauchen Sie eine Änderung?{" "}
-                  <PenCircle delay={0.5}>Kurze Nachricht</PenCircle> genügt.
-                </>
-              }
-              delay={0.3}
-            />
+          <div className="space-y-12 md:space-y-0">
+            {[
+              {
+                label: "Agentur",
+                text: "Projektmanager, Designer, Entwickler — Sie erklären alles drei Mal. Stundenabrechnungen, unklare Endkosten.",
+              },
+              {
+                label: "Baukasten (Wix, etc.)",
+                text: "Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt, wenn etwas nicht funktioniert.",
+              },
+              {
+                label: "Bei mir",
+                text: "Ein Ansprechpartner. Fixpreis. Ich baue, Sie lehnen sich zurück. Sie brauchen eine Änderung? Kurze Nachricht genügt.",
+                highlight: true,
+              },
+            ].map((item, i) => (
+              <Reveal key={i} delay={0.1 * i}>
+                <div
+                  className={`grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-8 py-8 md:py-16 border-t ${item.highlight ? "border-slate-900" : "border-slate-100"}`}
+                >
+                  <div className="md:col-span-1">
+                    <Label
+                      className={`text-lg md:text-xl ${item.highlight ? "text-slate-900 font-bold" : "text-slate-400"}`}
+                    >
+                      {item.label}
+                    </Label>
+                  </div>
+                  <div className="md:col-span-3">
+                    <LeadText
+                      className={`text-xl md:text-3xl leading-snug ${item.highlight ? "text-slate-900" : "text-slate-500"}`}
+                    >
+                      {item.text}
+                    </LeadText>
+                  </div>
+                </div>
+              </Reveal>
+            ))}
           </div>
         </div>
       </Section>
 
-      {/* Section 04: Für wen */}
+      {/* Section 04: Zielgruppe */}
       <Section number="04" title="Für wen" borderTop>
-        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-10 relative z-10">
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <Card variant="glass" padding="normal" techBorder className="group">
-              <div className="space-y-4 md:space-y-6 relative overflow-hidden">
-                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
-                  <ConceptPrice className="w-6 h-6 md:w-8 md:h-8" />
-                </div>
-                <H3 className="text-xl md:text-3xl">
-                  Unternehmer & <br />
-                  Geschäftsführer
+            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
+              Fokus auf das <span className="text-slate-400">Wesentliche.</span>
+            </H3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
+            <Reveal>
+              <div className="space-y-8">
+                <H3 className="text-2xl md:text-4xl">
+                  Unternehmer & Geschäftsführer
                 </H3>
-                <LeadText className="text-slate-400 text-base md:text-lg">
+                <LeadText className="text-slate-500">
                   Sie brauchen eine professionelle Website, die Ihr Unternehmen
                   repräsentiert — ohne sich selbst mit Technik beschäftigen zu
                   müssen. Ich übernehme alles.
                 </LeadText>
               </div>
-              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
-                <Label className="group-hover:text-slate-900 transition-colors">
-                  Perfekt für Sie
-                </Label>
-              </div>
-            </Card>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <Card variant="glass" padding="normal" techBorder className="group">
-              <div className="space-y-6 relative overflow-hidden">
-                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
-                  <ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
-                </div>
-                <H3 className="text-xl md:text-3xl">
-                  Selbstständige & <br />
-                  kleine Teams
+            </Reveal>
+            <Reveal delay={0.2}>
+              <div className="space-y-8">
+                <H3 className="text-2xl md:text-4xl">
+                  Selbstständige & kleine Teams
                 </H3>
-                <LeadText className="text-slate-400 text-base md:text-lg">
+                <LeadText className="text-slate-500">
                   Sie wollen online sichtbar sein, aber keine Zeit in eine
-                  Website stecken. Ich liefere Ihnen eine fertige Lösung — Sie
-                  konzentrieren sich auf Ihre Kunden.
+                  Website stecken. Ich liefere eine fertige Lösung, damit Sie
+                  sich auf Ihre Kunden konzentrieren können.
                 </LeadText>
               </div>
-              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
-                <Label className="group-hover:text-slate-900 transition-colors">
-                  Perfekt für Sie
-                </Label>
-              </div>
-            </Card>
-          </Reveal>
+            </Reveal>
+          </div>
         </div>
       </Section>
 
       {/* Section 05: Leistungen */}
-      <Section number="05" title="Leistungen" variant="gray" borderTop>
-        <div className="space-y-0 relative z-20">
+      <Section number="05" title="Leistungen" borderTop>
+        <div className="space-y-0">
           {[
             {
-              num: "01",
-              binary: "00000001",
               title: "Websites",
-              text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Von der Firmenwebsite bis zur Landingpage.",
-              tags: ["Firmenwebsite", "Landingpage", "Responsive", "SEO"],
+              text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Ohne Overhead.",
               href: "/websites",
             },
             {
-              num: "02",
-              binary: "00000010",
               title: "Sorglos-Paket",
-              text: "Änderungen, Wartung, Sicherheit, Updates — alles inklusive. Sie sagen Bescheid, ich erledige das. Ein Jahr, ein Paket, null Aufwand.",
-              tags: ["Wartung", "Änderungen", "Sicherheit", "Updates"],
+              text: "Änderungen, Wartung, Sicherheit — alles inklusive. Sie sagen Bescheid, ich erledige das.",
               href: "/contact",
             },
             {
-              num: "03",
-              binary: "00000011",
               title: "Web-Anwendungen",
-              text: "Wenn eine einfache Website nicht reicht: Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
-              tags: ["Portale", "Dashboards", "Automatisierung", "Tools"],
+              text: "Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
               href: "/contact",
             },
           ].map((service, i) => (
-            <Reveal key={i} delay={0.1 + i * 0.15}>
-              <div className="group py-8 md:py-12 lg:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
-                <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-10 lg:gap-16">
-                  {/* Number + Binary */}
-                  <div className="shrink-0 flex md:block items-baseline gap-4">
-                    <span className="text-4xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
-                      {service.num}
-                    </span>
-                    <span
-                      className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700 leading-none"
-                      aria-hidden="true"
-                    >
-                      {service.binary}
-                    </span>
-                  </div>
-
-                  {/* Content */}
-                  <div className="flex-1 space-y-4 md:space-y-6">
-                    <H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
-                      <GlitchText
-                        trigger="inView"
-                        delay={0.2 + i * 0.15}
-                        duration={0.6}
-                      >
-                        {service.title}
-                      </GlitchText>
+            <Reveal key={i} delay={0.1 * i}>
+              <a href={service.href} className="group block">
+                <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 py-12 md:py-20 border-b border-slate-100 transition-colors hover:border-slate-300">
+                  <div className="space-y-4 max-w-2xl">
+                    <H3 className="text-3xl md:text-5xl group-hover:translate-x-2 transition-transform duration-500">
+                      {service.title}
                     </H3>
-                    <BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
+                    <LeadText className="text-slate-400 group-hover:text-slate-600 transition-colors">
                       {service.text}
-                    </BodyText>
-                    {/* Tags */}
-                    <div className="flex flex-wrap gap-2">
-                      {service.tags.map((tag, j) => (
-                        <span
-                          key={j}
-                          className="px-3 py-1 text-[8px] md:text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
+                    </LeadText>
                   </div>
-
-                  {/* Arrow */}
-                  <div className="md:self-center shrink-0 pt-4 md:pt-0">
-                    <Button
-                      href={service.href}
-                      variant="ghost"
-                      size="normal"
-                      showArrow
-                      className="w-full md:w-auto"
+                  <div className="text-slate-300 group-hover:text-slate-900 transition-colors pb-1">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
                     >
-                      Details
-                    </Button>
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                      <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
                   </div>
                 </div>
-              </div>
+              </a>
             </Reveal>
           ))}
         </div>
@@ -292,40 +201,39 @@ export default function LandingPage() {
 
       {/* Section 06: Contact */}
       <Section number="06" title="Kontakt" borderTop>
-        <div className="relative py-4 md:py-12" id="contact">
+        <div className="relative py-12 md:py-32" id="contact">
           <Reveal>
-            <div className="space-y-8 md:space-y-12 lg:space-y-16">
-              <H1 className="text-4xl md:text-6xl lg:text-8xl">
+            <div className="space-y-12 md:space-y-24">
+              <H1 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                 Klingt gut? <br />
                 <span className="text-slate-400">Lassen Sie uns reden.</span>
               </H1>
 
-              <div className="flex flex-col md:flex-row gap-6 md:gap-10 lg:gap-16 items-start relative z-10">
-                <div className="space-y-4 md:space-y-8 flex-1">
-                  <LeadText className="text-lg md:text-3xl text-slate-400">
-                    Beschreiben Sie kurz, was Sie brauchen. Ich melde mich{" "}
-                    <span className="text-slate-900 border-b-2 border-slate-900/10">
-                      <Marker>innerhalb von 24 Stunden</Marker>
-                    </span>{" "}
-                    mit einem konkreten Vorschlag.
+              <div className="flex flex-col md:flex-row gap-12 md:gap-24 items-start">
+                <div className="space-y-8 flex-1">
+                  <LeadText className="text-2xl md:text-4xl text-slate-500 leading-snug">
+                    Beschreiben Sie kurz, was Sie brauchen. Ich melde mich
+                    innerhalb von 24 Stunden mit einem konkreten Vorschlag.
                   </LeadText>
-                  <div className="pt-2 md:pt-4">
+                  <div className="pt-4">
                     <Button
                       href="/contact"
                       size="large"
-                      className="w-full md:w-auto"
+                      className="text-lg px-8 py-4"
                     >
                       Kostenlos anfragen
                     </Button>
                   </div>
                 </div>
 
-                <div className="w-full md:w-72 space-y-4 md:space-y-6 p-6 glass rounded-2xl border border-slate-100">
+                <div className="w-full md:w-80 space-y-4 pt-4 md:pt-0">
                   <div className="flex items-center gap-3">
-                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <Label className="text-slate-900">Verfügbarkeit</Label>
+                    <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
+                    <Label className="text-slate-900 text-sm">
+                      Verfügbarkeit
+                    </Label>
                   </div>
-                  <BodyText className="text-sm md:text-base leading-snug">
+                  <BodyText className="text-slate-500">
                     Aktuell nehme ich Projekte für{" "}
                     <span className="font-bold text-slate-900">
                       <Availability />
diff --git a/apps/web/app/(site)/websites/page.tsx b/apps/web/app/(site)/websites/page.tsx
index 5eed8e8..aad6340 100644
--- a/apps/web/app/(site)/websites/page.tsx
+++ b/apps/web/app/(site)/websites/page.tsx
@@ -3,54 +3,35 @@
 import { Reveal } from "@/src/components/Reveal";
 import { Section } from "@/src/components/Section";
 import {
-  SpeedPerformance,
-  SolidFoundation,
-  LayerSeparation,
-  TaskDone,
-} from "@/src/components/Landing";
-import {
+  H1,
   H3,
   LeadText,
   BodyText,
   Label,
   MonoLabel,
 } from "@/src/components/Typography";
-import { Card } from "@/src/components/Layout";
 import { Button } from "@/src/components/Button";
-import { IconList, IconListItem } from "@/src/components/IconList";
-import {
-  GradientMesh,
-  CodeSnippet,
-  AbstractCircuit,
-  CMSVisualizer,
-  ArchitectureVisualizer,
-  ResultVisualizer,
-} from "@/src/components/Effects";
 import { Marker } from "@/src/components/Marker";
 
 export default function WebsitesPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      <AbstractCircuit />
-
       <Section className="pt-24 pb-12 md:pt-40 md:pb-24">
-        <div className="space-y-12 md:space-y-24">
-          <div className="space-y-6 md:space-y-10 max-w-5xl">
+        <div className="space-y-16 md:space-y-32">
+          <div className="space-y-10 max-w-4xl">
             <Reveal>
-              <div className="space-y-4">
-                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
+              <div className="space-y-6">
+                <MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
                   PROFESSIONELLE WEBSITES
                 </MonoLabel>
-                <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
+                <H1 className="text-5xl md:text-8xl lg:text-9xl leading-[0.9] tracking-tighter">
                   Ihre Website. <br />
-                  <span className="text-slate-400">
-                    <Marker>Komplett sorgenfrei.</Marker>
-                  </span>
-                </H3>
+                  <span className="text-slate-400">Komplett sorgenfrei.</span>
+                </H1>
               </div>
             </Reveal>
             <Reveal delay={0.2}>
-              <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
+              <LeadText className="text-xl md:text-3xl text-slate-500 leading-snug">
                 Kein WordPress-Chaos. Kein Baukasten-Frust. Ich baue Ihnen eine
                 maßgeschneiderte Website, mit der Sie{" "}
                 <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
@@ -61,312 +42,190 @@ export default function WebsitesPage() {
             </Reveal>
           </div>
 
-          <div className="space-y-12">
-            {/* Keeping the ArchitectureVisualizer for visual impact, but context is different */}
-            <Reveal delay={0.3} direction="up">
-              <ArchitectureVisualizer />
-            </Reveal>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Reveal delay={0.3}>
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12 py-12 md:py-20 border-y border-slate-100">
               {[
                 {
                   label: "Kein CMS-Zwang",
-                  sub: "Einfachheit",
-                  desc: "Sie müssen kein System lernen. Ich übernehme alle Updates.",
+                  desc: "Sie müssen kein System lernen. Ich übernehme alles.",
                 },
                 {
                   label: "Fixpreis",
-                  sub: "Planbarkeit",
                   desc: "Klare Kosten von Anfang an. Keine versteckten Gebühren.",
                 },
                 {
                   label: "Pfeilschnell",
-                  sub: "Performance",
-                  desc: "Keine langen Ladezeiten. Ihre Kunden bleiben auf der Seite.",
+                  desc: "Keine langen Ladezeiten. Kunden bleiben auf der Seite.",
                 },
                 {
                   label: "Sorglos",
-                  sub: "Betreuung",
                   desc: "Hosting, Sicherheit, Backups? Darum kümmere ich mich.",
                 },
               ].map((item, i) => (
-                <Reveal key={i} delay={0.4 + i * 0.1}>
-                  <div className="space-y-2 p-6 rounded-2xl border border-slate-50 bg-white shadow-sm hover:border-slate-200 transition-all group">
-                    <Label className="text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-widest text-[10px]">
-                      {item.label}
-                    </Label>
-                    <BodyText className="text-xs text-slate-400">
-                      {item.desc}
-                    </BodyText>
-                  </div>
-                </Reveal>
+                <div key={i} className="space-y-4">
+                  <Label className="text-slate-900 text-lg">{item.label}</Label>
+                  <BodyText className="text-slate-500">{item.desc}</BodyText>
+                </div>
               ))}
             </div>
-          </div>
+          </Reveal>
         </div>
       </Section>
 
       {/* 02: Performance */}
-      <Section
-        number="02"
-        title="Schnelligkeit"
-        borderTop
-        variant="gray"
-        illustration={<SpeedPerformance className="w-24 h-24" />}
-        effects={<GradientMesh variant="metallic" className="opacity-60" />}
-      >
-        <div className="space-y-8 md:space-y-12">
+      <Section number="02" title="Schnelligkeit" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
               Niemand wartet gerne. <br />
               <span className="text-slate-400">
-                Ihre Kunden <Marker delay={0.3}>erst recht nicht.</Marker>
+                Ihre Kunden erst recht nicht.
               </span>
             </H3>
           </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
-            <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
-              <Reveal delay={0.2}>
-                <LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
-                  Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
-                  sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
-                  Websites sind auf maximale Geschwindigkeit optimiert.
-                </LeadText>
-              </Reveal>
-              <Reveal delay={0.4}>
-                <IconList className="space-y-2 md:space-y-4">
-                  {[
-                    "Sofortiger Seitenaufbau ohne Verzögerung",
-                    "Automatische Bild-Optimierung für Smartphones",
-                    "Bessere Google-Platzierung (SEO) durch Top-Speed",
-                    "Höhere Zufriedenheit bei Ihren Besuchern",
-                  ].map((item, i) => (
-                    <IconListItem key={i} bullet>
-                      <LeadText className="text-base md:text-xl">
-                        {item}
-                      </LeadText>
-                    </IconListItem>
-                  ))}
-                </IconList>
-              </Reveal>
-            </div>
-            <div className="md:col-span-5">
-              <Reveal delay={0.6}>
-                <Card
-                  variant="glass"
-                  padding="normal"
-                  techBorder
-                  className="text-center group py-10 md:py-12"
-                >
-                  <div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
-                    100%
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
+            <Reveal delay={0.2}>
+              <LeadText className="text-xl md:text-2xl text-slate-500">
+                Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
+                sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
+                Websites sind auf maximale Geschwindigkeit optimiert.
+              </LeadText>
+            </Reveal>
+            <Reveal delay={0.3}>
+              <div className="space-y-8 border-l border-slate-100 pl-8 md:pl-12">
+                {[
+                  "Sofortiger Seitenaufbau ohne Verzögerung",
+                  "Automatische Bild-Optimierung für Smartphones",
+                  "Bessere Google-Platzierung (SEO) durch Top-Speed",
+                ].map((item, i) => (
+                  <div key={i} className="space-y-2">
+                    <Label className="text-slate-900">0{i + 1}</Label>
+                    <BodyText className="text-slate-500 text-lg">
+                      {item}
+                    </BodyText>
                   </div>
-                  <Label className="mt-4">Fokus auf das Wesentliche</Label>
-                  <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
-                    SCHNELL · SICHER · ZUVERLÄSSIG
-                  </span>
-                </Card>
-              </Reveal>
-            </div>
+                ))}
+              </div>
+            </Reveal>
           </div>
         </div>
       </Section>
 
       {/* 03: Code-Qualität */}
-      <Section
-        number="03"
-        title="Qualität"
-        borderTop
-        illustration={<SolidFoundation className="w-24 h-24" />}
-      >
-        <div className="space-y-8 md:space-y-12">
+      <Section number="03" title="Qualität" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
               Handarbeit statt <br />
               <span className="text-slate-400">Fertigbausatz.</span>
             </H3>
           </Reveal>
-          <Reveal delay={0.2}>
-            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
-              Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
-              Themes, die ständig aktualisiert werden müssen.
-            </LeadText>
-          </Reveal>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <Reveal delay={0.4}>
-              <CodeSnippet variant="git" />
-            </Reveal>
-            <Reveal delay={0.5}>
-              <div className="space-y-4 md:space-y-6">
-                <Card variant="glass" padding="normal" className="group">
-                  <div className="space-y-2">
-                    <Label className="text-slate-900">
-                      Saubere Programmierung
-                    </Label>
-                    <BodyText>
-                      Ihre Website wird von Grund auf solide entwickelt. Kein
-                      unnötiger Ballast, der die Seite verlangsamt oder
-                      angreifbar macht.
-                    </BodyText>
-                  </div>
-                </Card>
-                <Card variant="glass" padding="normal" className="group">
-                  <div className="space-y-2">
-                    <Label className="text-slate-900">Zukunftssicher</Label>
-                    <BodyText>
-                      Moderne Technologien garantieren, dass Ihre Website auch
-                      in ein paar Jahren noch perfekt und fehlerfrei läuft.
-                    </BodyText>
-                  </div>
-                </Card>
-              </div>
-            </Reveal>
-          </div>
-        </div>
-      </Section>
-
-      {/* 04: Content-System -> Sorglos Paket */}
-      <Section
-        number="04"
-        title="Das Sorglos-Paket"
-        borderTop
-        variant="gray"
-        illustration={<LayerSeparation className="w-24 h-24" />}
-        effects={<GradientMesh variant="subtle" className="opacity-60" />}
-      >
-        <div className="space-y-12 md:space-y-20">
-          <div className="space-y-6 md:space-y-10 max-w-5xl">
-            <Reveal>
-              <div className="space-y-4">
-                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
-                  NULL AUFWAND FÜR SIE
-                </MonoLabel>
-                <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
-                  Sie haben Besseres <br />
-                  <span className="text-slate-400 italic font-serif">
-                    zu tun.
-                  </span>
-                </H3>
-              </div>
-            </Reveal>
 
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
             <Reveal delay={0.2}>
-              <div className="space-y-6">
-                <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
-                  Bilder tauschen, Texte anpassen, Sicherheitsupdates
-                  einspielen? Darum kümmern Sie sich nie wieder. Das{" "}
-                  <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
-                    erledige ich.
-                  </span>
-                </LeadText>
+              <LeadText className="text-xl md:text-2xl text-slate-500">
+                Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
+                Themes, die ständig aktualisiert werden müssen.
+              </LeadText>
+            </Reveal>
+            <Reveal delay={0.3}>
+              <div className="space-y-12">
+                <div>
+                  <Label className="text-slate-900 text-xl mb-4 block">
+                    Saubere Programmierung
+                  </Label>
+                  <BodyText className="text-slate-500 text-lg">
+                    Ihre Website wird von Grund auf solide entwickelt. Kein
+                    unnötiger Ballast, der die Seite verlangsamt oder angreifbar
+                    macht.
+                  </BodyText>
+                </div>
+                <div>
+                  <Label className="text-slate-900 text-xl mb-4 block">
+                    Zukunftssicher
+                  </Label>
+                  <BodyText className="text-slate-500 text-lg">
+                    Moderne Technologien garantieren, dass Ihre Website auch in
+                    ein paar Jahren noch perfekt und fehlerfrei läuft.
+                  </BodyText>
+                </div>
               </div>
             </Reveal>
           </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
-            <div className="lg:col-span-8 relative">
-              <Reveal delay={0.4} direction="up">
-                <CMSVisualizer className="w-full mx-auto" />
-              </Reveal>
-            </div>
-
-            <div className="lg:col-span-4 space-y-8">
-              <Reveal delay={0.5}>
-                <div className="space-y-4">
-                  <BodyText className="text-slate-500 leading-relaxed">
-                    Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
-                    Sie eine Änderung brauchen, schreiben Sie mir einfach eine
-                    kurze Nachricht. Kein kompliziertes
-                    Content-Management-System (CMS), keine Schulungen.
-                  </BodyText>
-
-                  <div className="flex flex-wrap gap-3">
-                    {["Änderungen inklusive", "Technik-Wartung", "Hosting"].map(
-                      (tag, i) => (
-                        <div
-                          key={i}
-                          className="px-3 py-1 bg-white border border-slate-100 rounded-full text-[10px] font-mono text-slate-400"
-                        >
-                          {tag}
-                        </div>
-                      ),
-                    )}
-                  </div>
-                </div>
-              </Reveal>
-
-              <Reveal delay={0.6}>
-                <div className="p-6 bg-slate-900 rounded-2xl shadow-xl text-[10px] font-mono text-white/50 space-y-3">
-                  <div className="flex justify-between items-center text-white/90">
-                    <span>SERVICE_LEVEL</span>
-                    <span className="text-green-500 font-bold">ACTIVE</span>
-                  </div>
-                  <p className="leading-tight">
-                    Schicken Sie einfach eine E-Mail mit den neuen Texten oder
-                    Bildern.
-                  </p>
-                  <div className="pt-2 border-t border-white/10 flex items-center justify-between">
-                    <span>STRESS</span>
-                    <span className="text-white">0%</span>
-                  </div>
-                </div>
-              </Reveal>
-            </div>
-          </div>
-
-          <Reveal delay={0.7}>
-            <div className="p-px w-full bg-gradient-to-r from-transparent via-slate-100 to-transparent" />
-          </Reveal>
         </div>
       </Section>
 
-      {/* 05: Was Sie bekommen */}
-      <Section
-        number="05"
-        title="Ergebnis"
-        borderTop
-        illustration={<TaskDone className="w-24 h-24" />}
-      >
-        <div className="space-y-12 md:space-y-24">
-          <div className="max-w-4xl space-y-6">
+      {/* 04: Sorglos Paket */}
+      <Section number="04" title="Sorglos-Paket" borderTop>
+        <div className="space-y-16 md:space-y-32">
+          <Reveal>
+            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
+              Das Prinzip: <br />
+              <span className="text-slate-400">Null Aufwand.</span>
+            </H3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-start">
+            <Reveal delay={0.2}>
+              <LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
+                Sie haben Besseres zu tun, als Bilder zu tauschen oder Updates
+                zu installieren.
+              </LeadText>
+            </Reveal>
+
+            <Reveal delay={0.3}>
+              <div className="space-y-8">
+                <BodyText className="text-slate-500 text-lg md:text-xl leading-relaxed">
+                  Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
+                  Sie eine Änderung brauchen, schreiben Sie mir einfach eine
+                  E-Mail. Kein kompliziertes System, keine Schulungen. Ich setze
+                  es für Sie um.
+                </BodyText>
+                <div className="pt-8 border-t border-slate-100 flex gap-8">
+                  <div>
+                    <Label className="text-slate-900">Inklusive</Label>
+                    <BodyText className="text-slate-500 mt-2">
+                      Änderungen & Wartung
+                    </BodyText>
+                  </div>
+                  <div>
+                    <Label className="text-slate-900">Ihr Stresslevel</Label>
+                    <BodyText className="text-slate-500 mt-2">0%</BodyText>
+                  </div>
+                </div>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </Section>
+
+      {/* 05: CTA */}
+      <Section number="05" title="Ergebnis" borderTop>
+        <div className="py-12 md:py-24">
+          <div className="space-y-16 md:space-y-24">
             <Reveal>
-              <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
+              <H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                 Ihre fertige <br />
                 <span className="text-slate-400">Website.</span>
               </H3>
             </Reveal>
+
             <Reveal delay={0.2}>
-              <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
-                Professionell, schnell und wartungsfrei. Sie bekommen eine
-                schlüsselfertige Lösung, die Ihr Unternehmen optimal
-                präsentiert.
-              </LeadText>
+              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
+                <LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
+                  Professionell, schnell und wartungsfrei. Schlüsselfertig für
+                  Ihr Unternehmen.
+                </LeadText>
+                <Button
+                  href="/contact"
+                  className="w-full md:w-auto px-12 py-6 text-xl"
+                >
+                  Projekt starten
+                </Button>
+              </div>
             </Reveal>
           </div>
-
-          <Reveal delay={0.3} direction="up">
-            <ResultVisualizer />
-          </Reveal>
-
-          <Reveal delay={0.5}>
-            <div className="pt-10 md:pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
-              <div className="space-y-3">
-                <MonoLabel className="text-blue-500">
-                  BEREIT FÜR DEN NÄCHSTEN SCHRITT?
-                </MonoLabel>
-                <div className="text-xl md:text-3xl font-bold tracking-tight text-slate-900">
-                  Lassen Sie uns über Ihr Projekt sprechen.
-                </div>
-              </div>
-              <Button
-                href="/contact"
-                className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
-              >
-                Kostenlos anfragen
-              </Button>
-            </div>
-          </Reveal>
         </div>
       </Section>
     </div>