design

app/blog/[slug]/page.tsx

@@ -69,9 +69,9 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
       <main id="post-content">
         <Section number="01" title="Inhalt">
           <div className="prose prose-slate max-w-none">
-            <div className="flex flex-wrap items-center gap-4 text-sm text-slate-400 mb-12 font-mono uppercase tracking-widest">
+            <div className="flex flex-wrap items-center gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em]">
               <time dateTime={post.date}>{formattedDate}</time>
-              <span>•</span>
+              <span className="text-slate-200">•</span>
               <span>{readingTime} min read</span>
             </div>
 

app/blog/page.tsx

@@ -85,7 +85,7 @@ export default function BlogPage() {
 
           {/* Posts area */}
           <div className="md:col-span-8">
-            <div id="posts-container" className="divide-y divide-slate-50">
+            <div id="posts-container" className="flex flex-col gap-8">
               {filteredPosts.length === 0 ? (
                 <div className="empty-state">
                   <p>No posts found matching your criteria.</p>

app/contact/page.tsx

@@ -22,7 +22,7 @@ export default function ContactPage() {
                 className="group block space-y-2"
               >
                 <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">Email</span>
-                <p className="text-3xl md:text-5xl font-bold text-slate-900 border-b-4 border-slate-100 group-hover:border-slate-900 transition-all pb-4">
+                <p className="text-3xl md:text-6xl font-bold text-slate-900 border-b border-slate-100 group-hover:border-slate-900 transition-all duration-500 pb-6 tracking-tighter">
                   marc@mintel.me
                 </p>
               </a>
@@ -30,8 +30,8 @@ export default function ContactPage() {
           </Reveal>
 
           <Reveal delay={0.6}>
-            <div className="p-12 border-2 border-slate-900 bg-slate-50 relative overflow-hidden">
-              <div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">!</div>
+            <div className="p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white relative overflow-hidden hover:border-slate-400 transition-all duration-500">
+              <div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">!</div>
               <div className="relative z-10 space-y-8">
                 <h2 className="text-2xl font-bold text-slate-900">Was ich von Ihnen brauche:</h2>
                 <ul className="space-y-6 text-xl md:text-2xl text-slate-600 font-serif italic">

app/page.tsx

@@ -1,87 +1,113 @@
 import * as React from 'react';
-import Link from 'next/link';
-import { ArrowRight, Zap, Shield } from 'lucide-react';
+import { Zap, Shield, MousePointer2, Sparkles } from 'lucide-react';
 import { Reveal } from '../src/components/Reveal';
 import { Section } from '../src/components/Section';
+import { HeroItem, FeatureCard, ComparisonRow, ServiceCard } from '../src/components/Landing';
 
 export default function LandingPage() {
   return (
-    <div className="flex flex-col gap-48 pt-12 md:pt-24 pb-24 md:pb-48 overflow-hidden">
+    <div className="flex flex-col bg-white overflow-hidden">
+      {/* Global Background Pattern */}
+      <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.02]" style={{
+        backgroundImage: 'radial-gradient(circle at 2px 2px, #0f172a 1px, transparent 0)',
+        backgroundSize: '40px 40px'
+      }} />
+
       {/* Hero Section - High Impact */}
-      <section className="narrow-container relative">
-        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">00</div>
-        <div className="space-y-16 relative">
-          <Reveal>
-            <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
-              Digitale Systeme <br />
-              <span className="text-slate-200">ohne Overhead.</span>
-            </h1>
-          </Reveal>
-          <div className="space-y-32">
-            <div className="space-y-16 max-w-4xl">
-              {[
-                { title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
-                { title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
-                { title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
-              ].map((item, i) => (
-                <Reveal key={i} delay={0.2 * (i + 1)}>
-                  <div className="group flex gap-8 md:gap-12">
-                    <span className="text-sm font-mono text-slate-200 group-hover:text-slate-900 transition-colors pt-2">0{i+1}</span>
-                    <div className="space-y-3">
-                      <p className="text-3xl md:text-5xl font-bold text-slate-900 tracking-tight">{item.title}</p>
-                      <p className="text-xl md:text-2xl text-slate-400 font-serif italic leading-tight">{item.desc}</p>
-                    </div>
-                  </div>
-                </Reveal>
-              ))}
-            </div>
-            
-            <Reveal delay={0.8}>
-              <div className="border-l-4 border-slate-900 pl-12 py-4">
-                <p className="text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-none">
-                  Kein Zirkus. <br />
-                  <span className="text-slate-200">Nur Ergebnisse.</span>
-                </p>
+      <section className="relative pt-12 md:pt-24 pb-24 md:pb-32">
+        <div className="narrow-container relative">
+          {/* Background Illustration/Pattern */}
+          <div className="absolute -left-24 -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50 pointer-events-none">
+            00
+          </div>
+          
+          {/* Floating Elements */}
+          <div className="absolute right-0 top-0 w-64 h-64 bg-slate-50 rounded-full blur-[80px] -z-10 opacity-60 animate-pulse"></div>
+          
+          <div className="space-y-16 md:space-y-20 relative">
+            <Reveal>
+              <div className="space-y-4">
+                <div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em] mb-4">
+                  <span className="w-6 h-px bg-slate-200"></span>
+                  Digital Architect & Developer
+                </div>
+                <h1 className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
+                  Digitale Systeme <br />
+                  <span className="text-slate-200">ohne Overhead.</span>
+                </h1>
               </div>
             </Reveal>
+            
+            <div className="space-y-12 md:space-y-16">
+              <div className="grid grid-cols-1 gap-4 md:gap-6 max-w-4xl">
+                {[
+                  { title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
+                  { title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
+                  { title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
+                ].map((item, i) => (
+                  <HeroItem
+                    key={i}
+                    number={`0${i + 1}`}
+                    title={item.title}
+                    description={item.desc}
+                    delay={0.1 * (i + 1)}
+                  />
+                ))}
+              </div>
+              
+              <Reveal delay={0.5}>
+                <div className="relative group inline-block">
+                  <div className="absolute -inset-4 bg-slate-50 rounded-2xl scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-500 -z-10"></div>
+                  <div className="border-l-4 border-slate-900 pl-6 md:pl-8 py-2">
+                    <p className="text-3xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
+                      Kein Zirkus. <br />
+                      <span className="text-slate-200">Nur Ergebnisse.</span>
+                    </p>
+                  </div>
+                </div>
+              </Reveal>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Was ich mache - Designed Grid */}
-      <Section number="01" title="Das Versprechen" numberPosition="right">
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
-          <div className="md:col-span-5 space-y-8">
+      <Section number="01" title="Das Versprechen" numberPosition="right" variant="gray" borderTop>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-start">
+          <div className="md:col-span-5">
             <Reveal>
-              <p className="text-4xl font-bold text-slate-900 leading-[1.1]">
-                Direkt. <br />
-                Sauber. <br />
-                Ohne Zirkus.
-              </p>
+              <div className="space-y-6">
+                <div className="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-6 rotate-3 hover:rotate-0 transition-transform duration-500">
+                  <Sparkles className="w-6 h-6" />
+                </div>
+                <h2 className="text-3xl md:text-5xl font-bold text-slate-900 leading-[1.1] tracking-tight">
+                  Direkt. <br />
+                  Sauber. <br />
+                  Ohne Zirkus.
+                </h2>
+              </div>
             </Reveal>
           </div>
           <div className="md:col-span-7">
-            <div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
+            <div className="space-y-10">
               <Reveal delay={0.2}>
-                <p>
+                <p className="font-serif text-xl md:text-2xl leading-relaxed text-slate-700 italic">
                   Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
                 </p>
               </Reveal>
-              <div className="mt-12 grid grid-cols-1 gap-8 not-prose">
-                <Reveal delay={0.4}>
-                  <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
-                    <Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
-                    <h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3>
-                    <p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
-                  </div>
-                </Reveal>
-                <Reveal delay={0.6}>
-                  <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
-                    <Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
-                    <h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3>
-                    <p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p>
-                  </div>
-                </Reveal>
+              <div className="grid grid-cols-1 gap-6">
+                <FeatureCard
+                  icon={Zap}
+                  title="Websites & Tools"
+                  description="Alles, was Ihr Unternehmen digital voranbringt."
+                  delay={0.3}
+                />
+                <FeatureCard
+                  icon={Shield}
+                  title="Kein Overhead"
+                  description="Sie erklären, ich baue. Es funktioniert einfach."
+                  delay={0.4}
+                />
               </div>
             </div>
           </div>
@@ -89,65 +115,54 @@ export default function LandingPage() {
       </Section>
 
       {/* Comparison - Visual Path */}
-      <Section number="02" title="Der Unterschied">
-        <div className="space-y-32">
-          {/* Row 1 */}
-          <Reveal>
-            <div className="flex flex-col md:flex-row gap-12 items-center">
-              <div className="flex-1 p-10 bg-slate-50 text-slate-400">
-                <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
-                <p className="text-xl font-serif italic line-through decoration-slate-300">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
-              </div>
-              <div className="shrink-0">
-                <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
-              </div>
-              <div className="flex-1 p-10 border-2 border-slate-900">
-                <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
-                <p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
-              </div>
-            </div>
-          </Reveal>
+      <Section number="02" title="Der Unterschied" borderTop>
+        <div className="space-y-16 md:space-y-24 relative">
+          {/* Connecting line */}
+          <div className="absolute left-1/2 top-0 bottom-0 w-px bg-slate-100 -translate-x-1/2 -z-10 hidden md:block"></div>
+          
+          <ComparisonRow
+            negativeLabel="Agentur"
+            negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
+            positiveLabel="Ich"
+            positiveText={<>Ich baue zuerst. <br />Dann reden wir.</>}
+            delay={0.1}
+          />
 
-          {/* Row 2 */}
-          <Reveal delay={0.2}>
-            <div className="flex flex-col md:flex-row-reverse gap-12 items-center">
-              <div className="flex-1 p-10 bg-slate-50 text-slate-400">
-                <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
-                <p className="text-xl font-serif italic">
-                  <span className="line-through decoration-slate-300">"Das dauert nur kurz"</span> <br />
-                  → Überraschung auf der Rechnung.
-                </p>
-              </div>
-              <div className="shrink-0">
-                <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
-              </div>
-              <div className="flex-1 p-10 border-2 border-slate-900">
-                <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
-                <p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
-              </div>
-            </div>
-          </Reveal>
+          <ComparisonRow
+            negativeLabel="Agentur"
+            negativeText={<>
+              <span className="line-through decoration-slate-200">"Das dauert nur kurz"</span> <br />
+              → Überraschung auf der Rechnung.
+            </>}
+            positiveLabel="Ich"
+            positiveText={<>Fixpreise. <br />Immer.</>}
+            reverse
+            delay={0.2}
+          />
         </div>
       </Section>
 
       {/* Für wen - Designed Box */}
-      <Section number="03" title="Zielgruppe" numberPosition="right">
+      <Section number="03" title="Zielgruppe" numberPosition="right" variant="gray" borderTop>
         <Reveal>
-          <div className="relative p-12 md:p-24 border border-slate-100">
-            <div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
-            <p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
+          <div className="relative p-8 md:p-16 border border-slate-100 rounded-3xl bg-white overflow-hidden group">
+            {/* Decorative elements */}
+            <div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -mr-32 -mt-32 rounded-full -z-10 group-hover:scale-110 transition-transform duration-1000"></div>
+            
+            <div className="absolute top-0 left-10 w-px h-16 bg-slate-100 -translate-y-8"></div>
+            <h2 className="text-3xl md:text-6xl font-bold text-slate-900 leading-[1.1] mb-12 tracking-tighter">
               Für Unternehmen, die <br />
-              <span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
+              <span className="text-slate-100">Ergebnisse</span> wollen.
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
               {[
                 'Keine Lust auf Agentur-Zirkus',
                 'Kein CMS selbst pflegen',
                 'Keine Tickets schreiben',
                 'Keinen eigenen Entwickler',
               ].map((item, i) => (
-                <div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600">
-                  <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
+                <div key={i} className="flex items-center gap-4 text-lg md:text-xl font-serif text-slate-600 italic group/item">
+                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full shrink-0 group-hover/item:scale-150 transition-transform duration-300"></div>
                   <span>{item}</span>
                 </div>
               ))}
@@ -157,40 +172,53 @@ export default function LandingPage() {
       </Section>
 
       {/* Leistungen - Visual Cards */}
-      <Section number="04" title="Leistungen">
-        <div className="grid grid-cols-1 gap-32">
-          <Reveal>
-            <div className="group relative">
-              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3>
-              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
-                Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
-              </p>
-              <Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
-                Preise ansehen
-                <div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
-              </Link>
-            </div>
-          </Reveal>
+      <Section number="04" title="Leistungen" borderTop>
+        <div className="grid grid-cols-1 gap-8 md:gap-12">
+          <ServiceCard
+            title="Websites"
+            description="Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance."
+            linkHref="/websites"
+            linkLabel="Preise ansehen"
+            delay={0.1}
+          />
 
-          <Reveal delay={0.2}>
-            <div className="group relative">
-              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
-              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
-                Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
-              </p>
-            </div>
-          </Reveal>
+          <ServiceCard
+            title="Systeme"
+            description="Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik."
+            delay={0.2}
+          />
 
-          <Reveal delay={0.4}>
-            <div className="group relative">
-              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
-              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
-                Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
-              </p>
-            </div>
-          </Reveal>
+          <ServiceCard
+            title="Tools"
+            description="Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung."
+            delay={0.3}
+          />
         </div>
       </Section>
+
+      {/* Final CTA - New Section */}
+      <Section number="05" title="Kontakt" numberPosition="right" variant="gray" borderTop>
+        <Reveal>
+          <div className="text-center space-y-10">
+            <h2 className="text-4xl md:text-8xl font-bold text-slate-900 tracking-tighter">
+              Bereit für <br />
+              <span className="text-slate-200">echten Fortschritt?</span>
+            </h2>
+            <div className="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8">
+              <a 
+                href="mailto:hello@mintel.me" 
+                className="px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-lg hover:bg-slate-800 transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl shadow-slate-200"
+              >
+                Projekt anfragen
+              </a>
+              <div className="flex items-center gap-3 text-slate-400 font-serif italic text-lg">
+                <MousePointer2 className="w-5 h-5 animate-bounce" />
+                <span>Kein Zirkus, versprochen.</span>
+              </div>
+            </div>
+          </div>
+        </Reveal>
+      </Section>
     </div>
   );
 }

app/websites/page.tsx

@@ -18,12 +18,12 @@ export default function WebsitesPage() {
       <Section number="01" title="Die Basis">
         <div className="space-y-20">
           <Reveal>
-            <div className="border-l-4 border-slate-900 pl-12 py-4">
+            <div className="border-l-4 border-slate-900 pl-12 py-6">
               <div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
                 <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
                 <div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
               </div>
-              <p className="text-3xl font-bold text-slate-900 leading-tight tracking-tight">
+              <p className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tighter">
                 Die Grundlage für jede Website.
               </p>
             </div>
@@ -60,13 +60,13 @@ export default function WebsitesPage() {
         <div className="space-y-32">
           {/* Seite */}
           <Reveal>
-            <div className="relative group">
-              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
-              <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
-                <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Seite</h3>
-                <div className="text-4xl font-bold text-slate-900 tracking-tighter">800 €</div>
+            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
+              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">S</div>
+              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
+                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Seite</h3>
+                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">800 €</div>
               </div>
-              <p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl">
+              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
                 Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
               </p>
             </div>
@@ -74,18 +74,18 @@ export default function WebsitesPage() {
 
           {/* Feature */}
           <Reveal delay={0.2}>
-            <div className="relative group">
-              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">F</div>
-              <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
-                <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Feature</h3>
-                <div className="text-4xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
+            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
+              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">F</div>
+              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
+                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Feature</h3>
+                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
               </div>
-              <p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
+              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
                 Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
               </p>
               <div className="flex flex-wrap gap-x-8 gap-y-4">
                 {['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
-                  <span key={tag} className="text-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
+                  <span key={tag} className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-300 hover:text-slate-900 transition-colors cursor-default">{tag}</span>
                 ))}
               </div>
             </div>
@@ -93,16 +93,16 @@ export default function WebsitesPage() {
 
           {/* Funktion */}
           <Reveal delay={0.4}>
-            <div className="relative group">
-              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">L</div>
-              <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
-                <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
-                <div className="text-4xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
+            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
+              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">L</div>
+              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
+                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
+                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
               </div>
-              <p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
+              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
                 Funktionen liefern Logik und Interaktion.
               </p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-6 text-sm font-bold uppercase tracking-[0.2em] text-slate-400">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-6 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
                 <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Kontaktformular</div>
                 <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Suche & Filter</div>
                 <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> PDF-Export</div>
@@ -118,8 +118,8 @@ export default function WebsitesPage() {
       {/* 5. Betrieb - Designed Box */}
       <Section number="03" title="Betrieb" numberPosition="right">
         <Reveal width="100%">
-          <div className="bg-slate-50 border-2 border-slate-900 p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24">
-            <div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">B</div>
+          <div className="bg-white border border-slate-200 rounded-[3rem] p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24 hover:border-slate-400 transition-all duration-500">
+            <div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">B</div>
             <div className="flex items-baseline gap-6">
               <div className="text-7xl md:text-9xl font-bold tracking-tighter text-slate-900">120 €</div>
               <div className="text-slate-400 font-serif italic text-2xl">/ Monat</div>