feat: Introduce Marker component and update KLZ Cables case study content, styling, and German localization.

app/case-studies/klz-cables/page.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import React from 'react';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import { Section } from '../../../src/components/Section';
 import { Reveal } from '../../../src/components/Reveal';
-import { H1, H3, LeadText, Label, MonoLabel, BodyText } from '../../../src/components/Typography';
+import { H1, H2, H3, LeadText, Label, MonoLabel, BodyText } from '../../../src/components/Typography';
 import { BackgroundGrid, Container } from '../../../src/components/Layout';
 import { MotionButton } from '../../../src/components/Button';
 import { IframeSection } from '../../../src/components/IframeSection';
-import { HeroArchitecture } from '../../../src/components/Landing/Illustrations/HeroArchitecture';
 import {
     Activity,
     Database,
@@ -16,84 +16,109 @@ import {
     ArrowRight,
     Zap,
     ShieldCheck,
-    ShoppingBag,
     Globe2,
     Settings,
     Search,
-    Monitor
+    Monitor,
+    Cpu,
+    Server,
+    Layers
 } from 'lucide-react';
 
 /**
- * AMBILIGHT GLOW COMPONENT
+ * TECHNICAL MARKER COMPONENT
+ * Implements the "hand-drawn marker" effect from STYLEGUIDE.md
+ * Updated: Only yellow marker as requested.
  */
-const AmbilightGlow: React.FC<{ color?: string; opacity?: string }> = ({
-    color = "rgba(148, 163, 184, 0.15)",
-    opacity = "opacity-40"
-}) => (
-    <div
-        className={`absolute -inset-24 lg:-inset-40 blur-[100px] lg:blur-[160px] pointer-events-none ${opacity} z-0 transition-opacity duration-1000 group-hover:opacity-70`}
-        style={{ background: `radial-gradient(circle, ${color} 0%, transparent 75%)` }}
-    />
-);
+const Marker: React.FC<{ children: React.ReactNode; delay?: number }> = ({
+    children,
+    delay = 0
+}) => {
+    return (
+        <span className="relative inline-block px-1">
+            <motion.span
+                initial={{ scaleX: 0, opacity: 0 }}
+                whileInView={{ scaleX: 1, opacity: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8, delay: delay + 0.3, ease: [0.16, 1, 0.3, 1] }}
+                className="absolute inset-0 z-[-1] -skew-x-6 rotate-[-1deg] translate-y-1 transform-gpu bg-[rgba(255,235,59,0.95)] origin-left"
+                aria-hidden="true"
+            />
+            {children}
+        </span>
+    );
+};
 
 export default function KLZCablesCaseStudy() {
+    const { scrollYProgress } = useScroll();
+    const heroY = useTransform(scrollYProgress, [0, 0.2], [0, -20]);
+    const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
+    const gridRotate = useTransform(scrollYProgress, [0, 1], [0, 2]);
+
     return (
-        <div className="flex flex-col bg-slate-50 relative min-h-screen selection:bg-slate-900 selection:text-white">
-            <BackgroundGrid />
-
-            {/* --- HERO: PURE INDUSTRIAL TYPOGRAPHY --- */}
-            <section className="relative min-h-[90vh] flex items-center pt-32 overflow-hidden border-b border-slate-200 bg-white">
-                {/* TECHNICAL GRID MOTIF */}
-                <div className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_70%_50%,#000_20%,transparent_100%)] pointer-events-none" />
-                <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(15,23,42,0.02)_0%,transparent_50%)] pointer-events-none" />
+        <div className="flex flex-col bg-white relative min-h-screen selection:bg-slate-900 selection:text-white overflow-hidden">
+            <motion.div style={{ opacity: heroOpacity }} className="fixed inset-0 z-0 pointer-events-none">
+                <BackgroundGrid />
+            </motion.div>
 
+            {/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
+            <section className="relative min-h-[40vh] py-20 overflow-hidden border-b border-slate-100 bg-white">
+                <motion.div
+                    style={{ y: heroY, rotate: gridRotate }}
+                    className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
+                />
 
                 <Container variant="narrow" className="relative z-10">
-                    <div className="space-y-20">
-                        <Reveal>
+                    <div className="space-y-12">
+                        <Reveal direction="down" blur>
                             <div className="inline-flex items-center gap-6">
-                                <div className="w-12 h-px bg-slate-900" />
+                                <motion.div
+                                    initial={{ width: 0 }}
+                                    whileInView={{ width: 48 }}
+                                    transition={{ duration: 1, ease: "circOut" }}
+                                    className="h-px bg-slate-900"
+                                />
                                 <div className="space-y-1">
-                                    <MonoLabel className="text-slate-900 tracking-[0.4em]">PROJECT // SYSTEM OPTIMIZATION</MonoLabel>
-                                    <Label className="text-[10px] text-slate-400">HARDENED WORDPRESS // PERFORMANCE STACK</Label>
+                                    <MonoLabel className="text-slate-900 tracking-[0.4em]">SYSTEM-ARCHITEKTUR // 2025</MonoLabel>
+                                    <Label className="text-[10px] text-slate-400 font-mono">HARDENED WORDPRESS // VARNISH STACK</Label>
                                 </div>
                             </div>
                         </Reveal>
 
-                        <div className="space-y-10">
-                            <Reveal delay={0.1}>
-                                <H1 className="text-7xl md:text-[10rem] tracking-tighter leading-[0.8] font-bold">
-                                    KLZ Cables <br />
-                                    <span className="text-slate-200">2025 Case Study.</span>
+                        <div className="space-y-12">
+                            <Reveal delay={0.1} direction="up" scale={0.95} blur>
+                                <H1 className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900">
+                                    KLZ Cables<br />
+                                    <span className="text-slate-100">Case Study.</span>
                                 </H1>
                             </Reveal>
 
-                            <Reveal delay={0.2}>
-                                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-16">
-                                    <LeadText className="text-2xl md:text-5xl leading-tight text-slate-900 font-medium">
-                                        Engineering a <br />
-                                        <span className="text-slate-400">Low-Latency Global System.</span>
+                            <Reveal delay={0.2} direction="right" blur>
+                                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
+                                    <LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium">
+                                        Engineering eines <br />
+                                        <Marker delay={0.2}>B2B Commerce Systems.</Marker>
                                     </LeadText>
-                                    <BodyText className="mt-10 text-xl text-slate-500 max-w-xl leading-relaxed">
-                                        I reconstructed the digital spine for KLZ Cables. For a leader in high-voltage infrastructure, I delivered a high-performance system designed for technical precision rather than simple marketing—a hardened tool for complex cable engineering.
+                                    <BodyText className="mt-6 text-lg md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
+                                        Vom statischen Altsystem zum industriellen Standard. Ich habe das KLZ-System auf das Wesentliche reduziert: Hardened Infrastructure, parametrische Datenpflege und zero maintenance.
                                     </BodyText>
                                 </div>
                             </Reveal>
                         </div>
 
-                        <Reveal delay={0.3}>
-                            <div className="flex flex-wrap gap-12 md:gap-24 pt-16 border-t border-slate-100">
-                                <div className="space-y-3">
-                                    <Label className="text-slate-400">Cache Performance</Label>
+                        <Reveal delay={0.4} direction="up" scale={0.9} blur>
+                            <div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100">
+                                <div className="space-y-2">
+                                    <Label className="text-slate-400">Data Integrity</Label>
                                     <div className="flex items-center gap-3">
-                                        <div className="w-2.5 h-2.5 bg-green-500 rounded-full" />
-                                        <span className="text-2xl font-bold font-mono text-slate-900">&lt; 30ms TTFB</span>
+                                        <div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
+                                        <span className="text-2xl font-bold font-mono text-slate-900 tracking-tight">Relational Data</span>
                                     </div>
                                 </div>
-                                <div className="space-y-3">
-                                    <Label className="text-slate-400">Stack Hardening</Label>
+                                <div className="space-y-2">
+                                    <Label className="text-slate-400">Security Layer</Label>
                                     <div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
-                                        <ShieldCheck className="w-6 h-6 text-green-500" />
+                                        <ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" />
                                         <span>WP + Varnish</span>
                                     </div>
                                 </div>
@@ -103,135 +128,102 @@ export default function KLZCablesCaseStudy() {
                 </Container>
             </section>
 
-            {/* --- SECTION 01: THE ARCHITECTURE --- */}
+            {/* --- SECTION 01: ARCHITECTURE --- */}
             <Section
                 number="01"
-                title="Architecture & Protocol Hardening"
+                title="System-Hardening & Logic"
                 borderBottom
                 containerVariant="normal"
             >
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-24 lg:gap-40 items-start">
-                    <div className="space-y-12">
-                        <Reveal>
-                            <H3 className="text-4xl md:text-5xl">
-                                Headless <br />Orchestration.
-                            </H3>
+                <div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
+                    <div className="md:col-span-12 mb-12">
+                        <Reveal direction="left" blur>
+                            <H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
+                                Architektur- <br />Refactor.
+                            </H2>
                         </Reveal>
-                        <Reveal delay={0.1}>
-                            <div className="space-y-8">
-                                <BodyText className="text-xl leading-relaxed font-serif italic text-slate-500">
-                                    Enterprise B2B systems often suffer from protocol overhead and legacy technical debt.
+                    </div>
+                    <div className="md:col-span-7 space-y-12">
+                        <Reveal delay={0.1} direction="up" blur>
+                            <div className="space-y-10">
+                                <BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500">
+                                    Vom statischen HTML zur zentralen Daten-Instanz.
                                 </BodyText>
-                                <BodyText className="text-lg text-slate-600 leading-relaxed">
-                                    I ruthlessly refactored the KLZ architecture to a decoupled, high-performance stack. By stripping the traditional theme layer, WordPress now functions strictly as a headless JSON provider. A multi-tier **Varnish cache layer** offloads 98% of traffic, while native PHP micro-services handle mission-critical REST logic, ensuring a &lt;30ms time-to-first-byte (TTFB) even under heavy industrial query loads.
+                                <BodyText className="text-xl text-slate-600 leading-relaxed">
+                                    Ich habe die KLZ-Architektur radikal auf einen entkoppelten High-Performance-Stack umgestellt. WordPress fungiert hier nicht als CMS-Baukasten, sondern als <Marker delay={0.3}>Headless JSON-Provider</Marker>. Durch die Implementierung nativer PHP-Microservices und den Verzicht auf volatile Drittanbieter-Plugins wurde ein System geschaffen, das keine technologischen Überraschungen zulässt. <Marker delay={0.5}>Stability by Design.</Marker>
                                 </BodyText>
                             </div>
                         </Reveal>
                     </div>
-                    <div className="space-y-8">
-                        <Reveal delay={0.2}>
-                            <div className="p-10 bg-white rounded-[2rem] border border-slate-200 shadow-sm space-y-12 relative overflow-hidden group hover:border-slate-900 transition-colors duration-700">
-                                <div className="space-y-6 relative z-10">
+                    <div className="md:col-span-5 relative">
+                        <Reveal delay={0.3} direction="right" scale={0.95} blur>
+                            <motion.div
+                                whileHover={{ y: -5, scale: 1.01 }}
+                                transition={{ type: "spring", stiffness: 200, damping: 25 }}
+                                className="p-12 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-12 relative overflow-hidden group shadow-sm text-left"
+                            >
+                                <div className="space-y-8 relative z-10">
                                     <Label className="text-slate-900">System Metriken</Label>
-                                    <div className="space-y-6">
+                                    <div className="space-y-8">
                                         {[
-                                            { label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache' },
-                                            { label: 'Analytics', desc: 'Independent Analytics (Privacy First)' },
-                                            { label: 'Custom Core', desc: 'REST via Native PHP Snippets' }
+                                            { label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache', icon: <Server className="w-5 h-5 text-slate-400" /> },
+                                            { label: 'Analytics', desc: 'Independent (Global Data Compliance)', icon: <Activity className="w-5 h-5 text-slate-400" /> },
+                                            { label: 'Custom Core', desc: 'REST via Native Services', icon: <Cpu className="w-5 h-5 text-slate-400" /> }
                                         ].map((item, i) => (
-                                            <div key={i} className="space-y-2 border-b border-slate-100 pb-4 last:border-0 last:pb-0">
-                                                <MonoLabel className="text-[9px] text-slate-400">{item.label}</MonoLabel>
-                                                <BodyText className="text-sm font-bold text-slate-900">{item.desc}</BodyText>
-                                            </div>
+                                            <motion.div
+                                                key={i}
+                                                initial={{ x: -20, opacity: 0 }}
+                                                whileInView={{ x: 0, opacity: 1 }}
+                                                transition={{ delay: 0.5 + (i * 0.1), duration: 0.5 }}
+                                                className="flex gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
+                                            >
+                                                <div className="shrink-0 mt-1">{item.icon}</div>
+                                                <div className="space-y-1">
+                                                    <MonoLabel className="text-[10px] text-slate-400">{item.label}</MonoLabel>
+                                                    <BodyText className="text-base font-bold text-slate-900">{item.desc}</BodyText>
+                                                </div>
+                                            </motion.div>
                                         ))}
                                     </div>
                                 </div>
-                            </div>
+                            </motion.div>
                         </Reveal>
                     </div>
                 </div>
             </Section>
 
-            {/* --- VISTA 01: CINEMATIC LANDING --- */}
-            <section className="py-24 bg-slate-100 border-y border-slate-200 overflow-hidden relative">
-                <div className="w-full max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-                    <Reveal>
-                        <div className="relative mb-12 px-4 md:px-12 flex justify-between items-end">
-                            <div className="space-y-4">
-                                <Label className="text-slate-500">Architecture Validation</Label>
-                                <H3 className="text-5xl md:text-7xl tracking-tighter">Performance Metrics.</H3>
+            {/* --- SHOWCASE: LANDING --- */}
+            <section className="py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
+                <div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
+                    <Reveal direction="none" blur>
+                        <div className="relative mb-16 flex justify-between items-end">
+                            <div className="space-y-6">
+                                <Label className="text-slate-500">Infrastructure Validation</Label>
+                                <H3 className="text-5xl md:text-8xl tracking-tighter">Global Hub.</H3>
                             </div>
                         </div>
                     </Reveal>
-
-                    <Reveal delay={0.2} width="100%" className="w-full">
-                        <div className="relative group w-full px-4 lg:px-12">
-                            <div className="relative w-full aspect-[16/9] md:aspect-[21/9] lg:aspect-[16/10] overflow-visible">
-                                <IframeSection
-                                    src="/showcase/klz-cables/index.html"
-                                    height="100%"
-                                    desktopWidth={1920}
-                                    allowScroll
-                                    browserFrame
-                                    className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
-                                />
-                            </div>
-                        </div>
+                    <Reveal delay={0.2} width="100%" direction="up" scale={1.05} blur>
+                        <motion.div
+                            whileHover={{ scale: 1.01 }}
+                            transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                        >
+                            <IframeSection
+                                src="/showcase/klz-cables/index.html"
+                                height="850px"
+                                desktopWidth={1920}
+                                allowScroll
+                                browserFrame
+                                className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
+                            />
+                        </motion.div>
                     </Reveal>
                 </div>
             </section>
 
-            {/* --- SECTION 03: CATALOG --- */}
+            {/* --- SECTION 02: TECHNICAL DETAIL --- */}
             <Section
                 number="02"
-                title="Daten-Struktur"
-                borderBottom
-                containerVariant="wide"
-            >
-                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
-                    <div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
-                        <Reveal>
-                            <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
-                                Parametric <br />Commerce Engine.
-                            </H3>
-                        </Reveal>
-                    </div>
-
-                    <div className="lg:col-span-8 relative group">
-                        <Reveal width="100%">
-                            <div className="relative h-[650px] w-full overflow-visible group">
-                                <IframeSection
-                                    src="/showcase/klz-cables/power-cables.html"
-                                    height="100%"
-                                    desktopWidth={1920}
-                                    allowScroll
-                                    browserFrame
-                                    className="h-full w-full transition-all duration-700 no-scrollbar"
-                                />
-                            </div>
-                        </Reveal>
-                    </div>
-
-                    <div className="lg:col-span-4 space-y-10 relative z-10">
-                        <Reveal delay={0.2}>
-                            <div className="space-y-6">
-                                <Label className="text-slate-400">Schema Optimization</Label>
-                                <LeadText className="text-lg">
-                                    I reduced a complex, multi-variable WooCommerce data structure to a parametric interface. Using optimized SQL indices and localized edge caching, engineers can now drill down through 200+ high-voltage variants in real-time, reaching critical technical specifications in under two clicks.
-                                </LeadText>
-                                <div className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm">
-                                    <Zap className="w-6 h-6 text-slate-400 mb-4" />
-                                    <BodyText className="text-sm font-medium">Real-time configuration across 200+ SKU variants.</BodyText>
-                                </div>
-                            </div>
-                        </Reveal>
-                    </div>
-                </div>
-            </Section>
-
-            {/* --- SECTION 04: TECHNICAL DETAIL --- */}
-            <Section
-                number="03"
                 title="Asset Management"
                 variant="white"
                 borderBottom
@@ -239,21 +231,25 @@ export default function KLZCablesCaseStudy() {
             >
                 <div className="grid grid-cols-1 gap-16">
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
-                        <Reveal>
+                        <Reveal direction="left" blur>
                             <div className="space-y-6">
                                 <Label className="text-slate-400">Asset Pipelines</Label>
-                                <H3 className="text-4xl md:text-6xl tracking-tighter">Technical Data Integrity.</H3>
+                                <H3 className="text-4xl md:text-6xl tracking-tighter">Automated Documentation.</H3>
                             </div>
                         </Reveal>
-                        <Reveal delay={0.1}>
+                        <Reveal delay={0.1} direction="right" blur>
                             <BodyText className="text-xl text-slate-500 pb-2 font-serif italic">
-                                For high-voltage N2XS(F)2Y cables, data fidelity is a safety requirement. I engineered an automated asset pipeline that generates and validates technical data-sheets server-side, ensuring perfect parity between the engineering specs and the globally distributed system.
+                                Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine Sicherheitsanforderung. Ich habe eine automatisierte Asset-Pipeline entwickelt, die technische Datenblätter serverseitig generiert und validiert.
                             </BodyText>
                         </Reveal>
                     </div>
 
-                    <Reveal delay={0.2} width="100%">
-                        <div className="relative w-full group">
+                    <Reveal delay={0.2} width="100%" direction="up" scale={0.95} blur>
+                        <motion.div
+                            whileHover={{ scale: 1.01 }}
+                            transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                            className="relative w-full group"
+                        >
                             <div className="relative w-full overflow-visible">
                                 <IframeSection
                                     src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html"
@@ -265,12 +261,67 @@ export default function KLZCablesCaseStudy() {
                                     className="w-full transition-all duration-1000 no-scrollbar"
                                 />
                             </div>
-                        </div>
+                        </motion.div>
                     </Reveal>
                 </div>
             </Section>
 
-            {/* --- SECTION 05: TEAM & TRUST --- */}
+            {/* --- SECTION 03: COMMERCE --- */}
+            <Section
+                number="03"
+                title="Katalog-Architektur"
+                borderBottom
+                containerVariant="wide"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+                    <div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
+                        <Reveal direction="down" blur>
+                            <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
+                                Fokus auf <br /><Marker delay={0.2}>Spezifikationen.</Marker>
+                            </H3>
+                        </Reveal>
+                    </div>
+
+                    <div className="lg:col-span-8 relative group">
+                        <Reveal width="100%" direction="left" scale={0.95} blur>
+                            <motion.div
+                                whileHover={{ scale: 1.01 }}
+                                transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                                className="relative h-[650px] w-full overflow-visible group"
+                            >
+                                <IframeSection
+                                    src="/showcase/klz-cables/power-cables.html"
+                                    height="100%"
+                                    desktopWidth={1920}
+                                    allowScroll
+                                    browserFrame
+                                    className="h-full w-full transition-all duration-700 no-scrollbar"
+                                />
+                            </motion.div>
+                        </Reveal>
+                    </div>
+
+                    <div className="lg:col-span-4 space-y-10 relative z-10">
+                        <Reveal delay={0.2} direction="right" blur>
+                            <div className="space-y-6">
+                                <Label className="text-slate-400">Katalog-Struktur</Label>
+                                <LeadText className="text-lg">
+                                    Der Produktbereich wurde konsequent auf die Bedürfnisse technischer Planer optimiert. Klare Hierarchien und der Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten Zugriff auf Kabel-Parameter und Datenblätter.
+                                </LeadText>
+                                <motion.div
+                                    whileHover={{ x: 10 }}
+                                    className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm"
+                                >
+                                    <Layers className="w-6 h-6 text-slate-400 mb-4" />
+                                    <BodyText className="text-sm font-medium">Strukturierte Aufbereitung technischer Produktdaten.</BodyText>
+                                </motion.div>
+                            </div>
+                        </Reveal>
+                    </div>
+                </div>
+            </Section>
+
+            {/* --- SECTION 04: TEAM & TRUST --- */}
             <Section
                 number="04"
                 title="Ergebnis"
@@ -278,19 +329,19 @@ export default function KLZCablesCaseStudy() {
                 containerVariant="wide"
             >
                 <div className="space-y-16 text-center">
-                    <Reveal>
-                        <H3 className="text-5xl md:text-8xl tracking-tighter">Infrastructural ROI.</H3>
+                    <Reveal direction="up" blur>
+                        <H3 className="text-5xl md:text-8xl tracking-tighter">System-Lifecycle.</H3>
                         <LeadText className="mx-auto max-w-2xl pt-6 text-xl">
-                            By migrating from a bloated legacy monolithic stack to a high-performant industrial platform, I established KLZ Cables as the technical benchmark in the renewable energy sector.
+                            Die Migration von einer statischen Datei-Struktur zu einer zentralisierten Daten-Instanz eliminiert technische Schulden und manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie Architektur, die technische Datentreue über den gesamten Produkt-Lifecycle sicherstellt.
                         </LeadText>
                     </Reveal>
 
-                    <Reveal delay={0.2} width="100%">
-                        <div className="relative group max-w-6xl mx-auto">
+                    <Reveal delay={0.2} width="100%" direction="up" scale={0.9} blur>
+                        <div className="relative group w-full text-left">
                             <div className="relative block w-full overflow-visible">
                                 <IframeSection
                                     src="/showcase/klz-cables/team.html"
-                                    height="850px"
+                                    height="1100px"
                                     desktopWidth={1440}
                                     allowScroll
                                     browserFrame
@@ -302,27 +353,58 @@ export default function KLZCablesCaseStudy() {
                 </div>
             </Section>
 
-            {/* --- FINAL CTA --- */}
-            <section className="py-40 md:py-60 bg-white relative overflow-hidden">
+            {/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
+            <section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
                 <BackgroundGrid />
-                <Container variant="narrow" className="relative z-10 text-center">
-                    <Reveal>
-                        <div className="space-y-16">
-                            <MonoLabel className="text-slate-400">MISSION CRITICAL INFRASTRUCTURE COMPLETED</MonoLabel>
-                            <H3 className="text-6xl md:text-9xl tracking-tighter leading-none font-bold">
-                                Digitale <br />
-                                <span className="text-slate-200">Exzellenz.</span>
-                            </H3>
-                            <div className="pt-12">
-                                <MotionButton href="/contact" variant="outline" className="px-12 py-6 text-xl group border-2">
-                                    System-Analyse anfragen
-                                    <ArrowRight className="inline-block ml-3 w-6 h-6 group-hover:translate-x-3 transition-transform duration-500" />
-                                </MotionButton>
-                            </div>
+                <Container variant="normal" className="relative z-10">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
+                        <div className="space-y-12">
+                            <Reveal direction="left" blur>
+                                <div className="space-y-4">
+                                    <MonoLabel className="text-slate-400 tracking-[0.4em]">CONSULTING // ENGINEERING</MonoLabel>
+                                    <H2 className="text-6xl md:text-8xl tracking-tighter leading-none font-bold">
+                                        Architektur <br />
+                                        <span className="text-slate-100">ohne Altlasten.</span>
+                                    </H2>
+                                </div>
+                            </Reveal>
+                            <Reveal delay={0.2} direction="left" blur>
+                                <BodyText className="text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
+                                    Vom Prototyp zum industriellen Standard. Ich entwickle digitale Infrastrukturen, die technische Freiheit und operative Stabilität garantieren – wartungsfrei und skalierbar.
+                                </BodyText>
+                            </Reveal>
                         </div>
-                    </Reveal>
+
+                        <div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-10 md:p-14 rounded-[3.5rem] space-y-12 relative group shadow-sm">
+                            <Reveal direction="right" blur>
+                                <div className="inline-flex items-center gap-3 px-4 py-2 bg-white rounded-full border border-slate-200 mb-4 font-mono text-[10px] tracking-widest text-slate-500 uppercase">
+                                    <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
+                                    Operational Excellence
+                                </div>
+                                <div className="space-y-10">
+                                    {[
+                                        { title: "Hardened Infrastructure", desc: "Zentralisierte Datenpflege und entkoppelte WordPress-Instanzen." },
+                                        { title: "Automated Data Pipelines", desc: "Validierung technischer Spezifikationen ohne manuelle Eingriffe." },
+                                        { title: "Maintenance-Free Core", desc: "Plugin-freie Logik für deterministische System-Sicherheit." }
+                                    ].map((item, i) => (
+                                        <div key={i} className="space-y-3 group/item">
+                                            <MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">{item.title}</MonoLabel>
+                                            <BodyText className="text-lg font-bold text-slate-900 leading-tight">{item.desc}</BodyText>
+                                        </div>
+                                    ))}
+                                </div>
+                            </Reveal>
+                            <Reveal delay={0.5} direction="up" blur className="pt-6">
+                                <MotionButton href="/contact" variant="outline" className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700">
+                                    System-Analyse anfragen
+                                    <ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
+                                </MotionButton>
+                            </Reveal>
+                        </div>
+                    </div>
                 </Container>
             </section>
         </div>
     );
 }
+

docs/AGBS.md

@@ -0,0 +1,154 @@
+Allgemeine Geschäftsbedingungen (AGB)
+
+1. Geltungsbereich
+
+Diese Allgemeinen Geschäftsbedingungen gelten für alle Verträge zwischen
+Marc Mintel (nachfolgend „Auftragnehmer“)
+und dem jeweiligen Kunden (nachfolgend „Auftraggeber“).
+
+Abweichende oder ergänzende Bedingungen des Auftraggebers werden nicht Vertragsbestandteil, auch wenn ihrer Geltung nicht ausdrücklich widersprochen wird.
+
+⸻
+
+2. Vertragsgegenstand
+
+Der Auftragnehmer erbringt Dienstleistungen im Bereich:
+	•	Webentwicklung
+	•	technische Umsetzung digitaler Systeme
+	•	Funktionen, Schnittstellen und Automatisierungen
+	•	Hosting, Betrieb und Wartung, sofern ausdrücklich vereinbart
+
+Der Auftragnehmer schuldet ausschließlich die vereinbarte technische Leistung, nicht jedoch:
+	•	einen wirtschaftlichen Erfolg
+	•	bestimmte Umsätze, Conversions oder Reichweiten
+	•	Suchmaschinen-Rankings
+	•	rechtliche oder geschäftliche Ergebnisse
+
+⸻
+
+3. Mitwirkungspflichten des Auftraggebers
+
+Der Auftraggeber verpflichtet sich, alle zur Leistungserbringung erforderlichen Inhalte, Informationen, Zugänge und Entscheidungen rechtzeitig, vollständig und korrekt bereitzustellen.
+
+Hierzu zählen insbesondere:
+	•	Texte, Bilder, Videos, Produktdaten
+	•	Freigaben und Feedback
+	•	Zugangsdaten
+	•	rechtlich erforderliche Inhalte (z. B. Impressum, Datenschutzerklärung)
+
+Verzögerungen oder Unterlassungen der Mitwirkung führen zu einer entsprechenden Verschiebung aller Termine.
+Hieraus entstehen keine Schadensersatz- oder Minderungsansprüche.
+
+⸻
+
+4. Ausführungs- und Bearbeitungszeiten
+
+Angegebene Bearbeitungszeiten sind unverbindliche Schätzungen, keine garantierten Fristen.
+
+Fixe Termine oder Deadlines gelten nur, wenn sie ausdrücklich schriftlich als verbindlich vereinbart wurden.
+
+⸻
+
+5. Abnahme
+
+Die Leistung gilt als abgenommen, wenn:
+	•	der Auftraggeber sie produktiv nutzt oder
+	•	innerhalb von 7 Tagen nach Bereitstellung keine wesentlichen Mängel angezeigt werden.
+
+Optische Abweichungen, Geschmacksfragen oder subjektive Einschätzungen stellen keine Mängel dar.
+
+⸻
+
+6. Haftung
+
+Der Auftragnehmer haftet nur für Schäden, die auf vorsätzlicher oder grob fahrlässiger Pflichtverletzung beruhen.
+
+Eine Haftung für:
+	•	entgangenen Gewinn
+	•	Umsatzausfälle
+	•	Datenverlust
+	•	Betriebsunterbrechungen
+	•	mittelbare oder Folgeschäden
+
+ist ausgeschlossen, soweit gesetzlich zulässig.
+
+⸻
+
+7. Verfügbarkeit & Betrieb
+
+Bei vereinbartem Hosting oder Betrieb schuldet der Auftragnehmer keine permanente Verfügbarkeit.
+
+Wartungsarbeiten, Updates, Sicherheitsmaßnahmen oder externe Störungen (z. B. Hoster, Netze, Drittanbieter) können zu zeitweisen Einschränkungen führen und begründen keine Haftungsansprüche.
+
+7a. Betriebs- und Pflegeleistung
+
+Die Betriebs- und Pflegeleistung ist fester Bestandteil der laufenden Leistungen des Auftragnehmers.
+
+Sie umfasst ausschließlich:
+	•	Sicherstellung des technischen Betriebs der Website
+	•	Wartung, Updates und Fehlerbehebung der bestehenden Systeme
+	•	Austausch, Korrektur oder Aktualisierung bereits vorhandener Inhalte
+	•	Pflege bestehender Datensätze ohne Änderung oder Erweiterung der Datenstruktur
+
+Nicht Bestandteil der Betriebs- und Pflegeleistung sind insbesondere:
+	•	regelmäßige oder fortlaufende Erstellung neuer Inhalte
+(z. B. Blogartikel, News, Produkte, Seiten)
+	•	redaktionelle Tätigkeiten oder Content-Produktion
+	•	strategische Inhaltsplanung oder Marketingmaßnahmen
+	•	Aufbau neuer Seiten, Features, Funktionen oder Datenmodelle
+	•	Serien-, Massen- oder Dauerpflege
+(z. B. tägliche oder wiederkehrende Inhaltserstellung)
+
+Die Betriebs- und Pflegeleistung dient ausschließlich der Instandhaltung, Sicherheit und Funktionsfähigkeit der bestehenden Website.
+
+Leistungen, die darüber hinausgehen, gelten als Neuentwicklung oder Inhaltserstellung und sind gesondert zu beauftragen und zu vergüten.
+
+⸻
+
+8. Drittanbieter & externe Systeme
+
+Der Auftragnehmer übernimmt keine Verantwortung für:
+	•	Leistungen, Ausfälle oder Änderungen externer Dienste
+	•	APIs, Schnittstellen oder Plattformen Dritter
+	•	rechtliche oder technische Änderungen fremder Systeme
+
+Eine Funktionsfähigkeit kann nur im Rahmen der jeweils aktuellen externen Schnittstellen gewährleistet werden.
+
+⸻
+
+9. Inhalte & Rechtliches
+
+Der Auftraggeber ist allein verantwortlich für:
+	•	Inhalte der Website
+	•	rechtliche Konformität (DSGVO, Urheberrecht, Wettbewerbsrecht etc.)
+	•	bereitgestellte Daten und Medien
+
+Der Auftragnehmer übernimmt keine rechtliche Prüfung.
+
+⸻
+
+10. Vergütung & Zahlungsverzug
+
+Alle Preise verstehen sich netto zuzüglich gesetzlicher Umsatzsteuer.
+
+Rechnungen sind, sofern nicht anders vereinbart, innerhalb von 7 Tagen fällig.
+
+Bei Zahlungsverzug ist der Auftragnehmer berechtigt:
+	•	Leistungen auszusetzen
+	•	Systeme offline zu nehmen
+	•	laufende Arbeiten zu stoppen
+
+⸻
+
+11. Kündigung laufender Leistungen
+
+Laufende Leistungen (z. B. Hosting & Betrieb) können mit einer Frist von 4 Wochen zum Monatsende gekündigt werden, sofern nichts anderes vereinbart ist.
+
+⸻
+
+12. Schlussbestimmungen
+
+Es gilt das Recht der Bundesrepublik Deutschland.
+Gerichtsstand ist – soweit zulässig – der Sitz des Auftragnehmers.
+
+Sollte eine Bestimmung dieser AGB unwirksam sein, bleibt die Wirksamkeit der übrigen Regelungen unberührt.

src/components/Reveal.tsx

@@ -1,23 +1,29 @@
 'use client';
 
 import React, { useEffect, useRef } from 'react';
-import { motion, useInView, useAnimation, Variant } from 'framer-motion';
+import { motion, useInView, useAnimation, Variants } from 'framer-motion';
 
 interface RevealProps {
   children: React.ReactNode;
   width?: 'fit-content' | '100%';
   delay?: number;
   className?: string;
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  scale?: number;
+  blur?: boolean;
 }
 
-export const Reveal: React.FC<RevealProps> = ({ 
-  children, 
+export const Reveal: React.FC<RevealProps> = ({
+  children,
   width = 'fit-content',
   delay = 0.25,
-  className = ""
+  className = "",
+  direction = 'up',
+  scale = 1,
+  blur = false
 }) => {
   const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
+  const isInView = useInView(ref, { once: true, margin: "-10%" });
   const mainControls = useAnimation();
 
   useEffect(() => {
@@ -26,16 +32,47 @@ export const Reveal: React.FC<RevealProps> = ({
     }
   }, [isInView, mainControls]);
 
+  const getDirectionOffset = () => {
+    switch (direction) {
+      case 'up': return { y: 15 };
+      case 'down': return { y: -15 };
+      case 'left': return { x: 15 };
+      case 'right': return { x: -15 };
+      default: return {};
+    }
+  };
+
+  const variants: Variants = {
+    hidden: {
+      opacity: 0,
+      ...getDirectionOffset(),
+      scale: scale !== 1 ? scale : 1,
+      filter: blur ? "blur(8px)" : "blur(0px)"
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      x: 0,
+      scale: 1,
+      filter: "blur(0px)"
+    },
+  };
+
   return (
     <div ref={ref} style={{ position: "relative", width }} className={className}>
       <motion.div
-        variants={{
-          hidden: { opacity: 0, y: 20 },
-          visible: { opacity: 1, y: 0 },
-        }}
+        variants={variants}
         initial="hidden"
         animate={mainControls}
-        transition={{ duration: 0.5, delay: delay, type: "spring", stiffness: 100, damping: 20 }}
+        transition={{
+          duration: 1.2,
+          delay: delay,
+          type: "spring",
+          stiffness: 40,
+          damping: 20,
+          mass: 1,
+          opacity: { duration: 1, ease: [0.22, 1, 0.36, 1] }
+        }}
       >
         {children}
       </motion.div>

src/components/ShareModal.tsx

@@ -65,7 +65,7 @@ export function ShareModal({ isOpen, onClose, url, qrCodeData }: ShareModalProps
             </button>
           </div>
 
-          {typeof navigator !== 'undefined' && navigator.share && (
+          {typeof navigator !== 'undefined' && !!navigator.share && (
             <button
               onClick={handleNativeShare}
               className="w-full p-6 bg-slate-900 text-white rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-all"