Fix: Remove inline styles from Open Graph and Twitter image meta tags and simplify JSON-LD navigation data.

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

@@ -209,7 +209,7 @@ export default function KLZCablesCaseStudy() {
                             transition={{ type: "spring", stiffness: 200, damping: 20 }}
                         >
                             <IframeSection
-                                src="/showcase/klz-cables/index.html"
+                                src="/showcase/klz-cables.com/index.html"
                                 height="850px"
                                 desktopWidth={1920}
                                 allowScroll
@@ -252,7 +252,7 @@ export default function KLZCablesCaseStudy() {
                         >
                             <div className="relative w-full overflow-visible">
                                 <IframeSection
-                                    src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html"
+                                    src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
                                     height="1000px"
                                     desktopWidth={1920}
                                     allowScroll
@@ -290,7 +290,7 @@ export default function KLZCablesCaseStudy() {
                                 className="relative h-[650px] w-full overflow-visible group"
                             >
                                 <IframeSection
-                                    src="/showcase/klz-cables/power-cables.html"
+                                    src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
                                     height="100%"
                                     desktopWidth={1920}
                                     allowScroll
@@ -321,9 +321,50 @@ export default function KLZCablesCaseStudy() {
                 </div>
             </Section>
 
-            {/* --- SECTION 04: TEAM & TRUST --- */}
+            {/* --- SECTION 04: CONTENT ENGINE --- */}
             <Section
                 number="04"
+                title="Content Strategy"
+                variant="white"
+                borderBottom
+                containerVariant="wide"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+                    <div className="lg:col-span-4 space-y-10 order-2 lg:order-1">
+                        <Reveal direction="left" blur>
+                            <div className="space-y-6">
+                                <Label className="text-slate-400">Knowledge Transfer</Label>
+                                <H3 className="text-4xl md:text-6xl tracking-tighter">Insights & News.</H3>
+                                <BodyText className="text-xl text-slate-500 font-serif italic">
+                                    Die News-Engine dient als technischer Hub für Industrie-Standards. Durch die Implementierung eines performanten Blog-Systems wird Fachwissen direkt an die Zielgruppe kommuniziert.
+                                </BodyText>
+                            </div>
+                        </Reveal>
+                    </div>
+                    <div className="lg:col-span-8 order-1 lg:order-2">
+                        <Reveal width="100%" direction="right" scale={0.98} blur>
+                            <motion.div
+                                whileHover={{ scale: 1.01 }}
+                                transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                                className="relative h-[700px] w-full"
+                            >
+                                <IframeSection
+                                    src="/showcase/klz-cables.com/blog.html"
+                                    height="100%"
+                                    desktopWidth={1600}
+                                    allowScroll
+                                    browserFrame
+                                    className="h-full w-full no-scrollbar"
+                                />
+                            </motion.div>
+                        </Reveal>
+                    </div>
+                </div>
+            </Section>
+
+            {/* --- SECTION 05: TEAM & TRUST --- */}
+            <Section
+                number="05"
                 title="Ergebnis"
                 borderBottom
                 containerVariant="wide"
@@ -340,7 +381,7 @@ export default function KLZCablesCaseStudy() {
                         <div className="relative group w-full text-left">
                             <div className="relative block w-full overflow-visible">
                                 <IframeSection
-                                    src="/showcase/klz-cables/team.html"
+                                    src="/showcase/klz-cables.com/team.html"
                                     height="1100px"
                                     desktopWidth={1440}
                                     allowScroll
@@ -353,6 +394,46 @@ export default function KLZCablesCaseStudy() {
                 </div>
             </Section>
 
+            {/* --- SECTION 06: CONVERSION --- */}
+            <Section
+                number="06"
+                title="Lead Engineering"
+                variant="white"
+                containerVariant="wide"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+                    <div className="lg:col-span-7">
+                        <Reveal direction="left" scale={0.98} blur>
+                            <motion.div
+                                whileHover={{ scale: 1.01 }}
+                                transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                                className="relative h-[800px] w-full"
+                            >
+                                <IframeSection
+                                    src="/showcase/klz-cables.com/contact.html"
+                                    height="100%"
+                                    desktopWidth={1200}
+                                    allowScroll
+                                    browserFrame
+                                    className="h-full w-full no-scrollbar"
+                                />
+                            </motion.div>
+                        </Reveal>
+                    </div>
+                    <div className="lg:col-span-5 space-y-10">
+                        <Reveal direction="right" blur>
+                            <div className="space-y-6">
+                                <Label className="text-slate-400">Conversion Layer</Label>
+                                <H3 className="text-4xl md:text-6xl tracking-tighter">Direkter Draht.</H3>
+                                <BodyText className="text-xl text-slate-500 font-serif italic">
+                                    Das Kontakt-System wurde auf maximale Reduktion getrimmt. Keine unnötigen Hürden, sondern ein direkter Kommunikations-Kanal zwischen technischem Bedarf und individueller Beratung.
+                                </BodyText>
+                            </div>
+                        </Reveal>
+                    </div>
+                </div>
+            </Section>
+
             {/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
             <section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
                 <BackgroundGrid />

scripts/clone-page.ts

@@ -116,24 +116,45 @@ async function run() {
     });
 
     try {
-        console.log('🌐 Loading page...');
+        console.log('🌐 Loading page (Waiting for Network Idle)...');
-        await page.goto(targetUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
+        await page.goto(targetUrl, { waitUntil: 'networkidle', timeout: 90000 });
 
-        console.log('� Expanding Viewport to "Giant Mode" to force-trigger lazy loaders...');
+        console.log('🌊 Executing "Scroll Wave" to trigger all lazy loaders naturally...');
-        // Measure content height and resize viewport to display EVERYTHING at once
+        await page.evaluate(async () => {
+            await new Promise((resolve) => {
+                let totalHeight = 0;
+                const distance = 400;
+                const timer = setInterval(() => {
+                    const scrollHeight = document.body.scrollHeight;
+                    window.scrollBy(0, distance);
+                    totalHeight += distance;
+
+                    if (totalHeight >= scrollHeight) {
+                        clearInterval(timer);
+                        window.scrollTo(0, 0); // Reset to top
+                        resolve(true);
+                    }
+                }, 100);
+            });
+        });
+
+        console.log('📐 Expanding Viewport to "Giant Mode" for final asset capture...');
         const fullHeight = await page.evaluate(() => document.body.scrollHeight);
-        await page.setViewportSize({ width: 1920, height: fullHeight + 2000 });
+        await page.setViewportSize({ width: 1920, height: fullHeight + 1000 });
 
-        // Wait a moment for IntersectionObservers to fire
+        // Final settlement wait
-        await page.waitForTimeout(2000);
+        await page.waitForTimeout(3000);
 
-        console.log('💧 Hydrating attributes and cleaning DOM...');
+        console.log('💧 Final DOM Hydration & Sanitization...');
         await page.evaluate(() => {
-            // A. Deterministic Attribute Hydration
+            // A. Deterministic Attribute Hydration (Generic)
             // Scours every element for attributes that look like asset URLs and promotes them
             const assetPattern = /\.(jpg|jpeg|png|gif|svg|webp|mp4|webm|woff2?|ttf|otf)/i;
 
             document.querySelectorAll('*').forEach(el => {
+                // 0. Skip Meta/Head/Script/Style/SVG tags for attribute promotion
+                if (['META', 'LINK', 'HEAD', 'SCRIPT', 'STYLE', 'SVG', 'PATH'].includes(el.tagName)) return;
+
                 // 1. Force Visibility (Anti-Flicker)
                 const style = window.getComputedStyle(el);
                 if (style.opacity === '0' || style.visibility === 'hidden') {
@@ -160,7 +181,6 @@ async function run() {
                         }
 
                         // Background Image Promotion
-                        // Common patterns: data-bg, data-image-src, style="...url(...)..."
                         if (val.match(/^(https?:\/\/|\/\/|\/)/) && !name.includes('href')) {
                             const bg = el.style.backgroundImage;
                             if (!bg || bg === 'none') {
@@ -170,11 +190,21 @@ async function run() {
                     }
                 }
             });
+
+            // B. Ensure basic structural elements are visible post-scroll
+            const body = document.body;
+            if (body) {
+                body.style.setProperty('opacity', '1', 'important');
+                body.style.setProperty('visibility', 'visible', 'important');
+            }
         });
 
         console.log('⏳ Waiting for network idle...');
         await page.waitForLoadState('networkidle');
 
+        // 1.5 FINAL SETTLEMENT: Let any scroll-triggered JS finish
+        await page.waitForTimeout(1000);
+
         // 2. Static Snapshot
         let content = await page.content();
 
@@ -284,7 +314,7 @@ async function run() {
         if (headEnd > -1) {
             const stabilityCss = `
             <style>
-                /* INDUSTRIAL CLONE STABILIZATION */
+                /* UNIVERSAL CLONE STABILIZATION */
                 * { 
                     transition: none !important; 
                     animation: none !important; 
@@ -296,6 +326,7 @@ async function run() {
                     transform: none !important; 
                     clip-path: none !important;
                 }
+                
                 img, video, iframe { 
                     max-width: 100%; 
                     display: block;