2

2026-02-06 13:15:10 +01:00
parent aa30e33805
commit 73968dfbd6
11 changed files with 354 additions and 260 deletions
--- a/WebSite/index.html
+++ b/WebSite/index.html
@@ -33,12 +33,8 @@
    <link rel="dns-prefetch" href="//www.google-analytics.com">
 </head>
 <body>
-    <!-- Tech Background -->
-    <div class="tech-background">
-        <div class="grid-overlay"></div>
-        <div class="dot-pattern"></div>
-        <div class="gradient-overlay"></div>
-    </div>
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>

    <!-- Top Banner -->
    <header class="top-banner dark-theme">
@@ -520,111 +516,12 @@
        </div>
    </footer>

-    <!-- Debug Section (remove for production) -->
-    <div id="debug-panel" style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.9); color: white; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; z-index: 9999; max-width: 300px; display: none;">
-        <h4 style="margin: 0 0 10px 0;">Debug Panel</h4>
-        <button onclick="testPHP()" style="background: #007bff; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test PHP</button>
-        <button onclick="testForm()" style="background: #28a745; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test Form</button>
-        <button onclick="toggleDebug()" style="background: #dc3545; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Hide</button>
-        <div id="debug-output" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></div>
-    </div>
-
-    <!-- Debug Toggle Button -->
-    <button id="debug-toggle" onclick="toggleDebug()" style="position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white; border: none; padding: 10px; border-radius: 50%; cursor: pointer; z-index: 9998; width: 40px; height: 40px; font-weight: bold;">?</button>
-
    <!-- Optimized script loading -->
+    <script src="scripts/hex-background.js" defer></script>
    <script src="scripts/script.js" defer></script>
    <script src="scripts/tech-onepager.js" defer></script>
    <script src="scripts/cursor.js" defer></script>
    <script src="scripts/scroll-header.min.js" defer></script>
    <script src="scripts/chat.js" defer></script>
-
-    <!-- Debug Script -->
-    <script>
-        function toggleDebug() {
-            const panel = document.getElementById('debug-panel');
-            const toggle = document.getElementById('debug-toggle');
-            if (panel.style.display === 'none') {
-                panel.style.display = 'block';
-                toggle.style.display = 'none';
-            } else {
-                panel.style.display = 'none';
-                toggle.style.display = 'block';
-            }
-        }
-
-        function logDebug(message, isError = false) {
-            const output = document.getElementById('debug-output');
-            const timestamp = new Date().toLocaleTimeString();
-            const color = isError ? '#ff6b6b' : '#51cf66';
-            output.innerHTML += `<div style="color: ${color};">[${timestamp}] ${message}</div>`;
-            output.scrollTop = output.scrollHeight;
-        }
-
-        async function testPHP() {
-            logDebug('Testing PHP & Webhook...');
-            try {
-                const response = await fetch('/scripts/add/test.php');
-                if (response.ok) {
-                    const result = await response.json();
-                    logDebug(`PHP: ${result.tests?.php?.version || 'OK'}`);
-                    logDebug(`cURL: ${result.tests?.curl?.status || 'unknown'}`);
-                    if (result.tests?.webhook) {
-                        const wh = result.tests.webhook;
-                        if (wh.status === 'ok') {
-                            logDebug(`✓ Webhook: HTTP ${wh.http_code}`);
-                        } else {
-                            logDebug(`✗ Webhook: ${wh.error || 'HTTP ' + wh.http_code}`, true);
-                        }
-                    }
-                } else {
-                    logDebug(`✗ PHP Error: HTTP ${response.status}`, true);
-                }
-            } catch (error) {
-                logDebug(`✗ PHP Failed: ${error.message}`, true);
-            }
-        }
-
-        async function testForm() {
-            logDebug('Testing contact form...');
-            try {
-                const response = await fetch('/scripts/add/send.php', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        type: 'contact',
-                        name: 'Debug Test',
-                        contact: 'test@example.com',
-                        service: 'website',
-                        description: 'Debug test submission'
-                    })
-                });
-
-                if (response.ok) {
-                    const result = await response.json();
-                    if (result.success) {
-                        logDebug('✓ Form submission successful');
-                        logDebug(`Webhook: ${result.data?.webhook_result?.success ? 'OK' : 'Failed'}`);
-                    } else {
-                        logDebug(`✗ Form failed: ${result.message}`, true);
-                    }
-                } else {
-                    logDebug(`✗ Form Error: HTTP ${response.status}`, true);
-                }
-            } catch (error) {
-                logDebug(`✗ Form Failed: ${error.message}`, true);
-            }
-        }
-
-        // Auto-test on load
-        window.addEventListener('load', () => {
-            setTimeout(() => {
-                logDebug('Debug panel ready - Click ? button to show');
-                testPHP();
-            }, 1000);
-        });
-    </script>
 </body>
 </html>
--- a/WebSite/scripts/add/send.php
+++ b/WebSite/scripts/add/send.php
@@ -53,6 +53,11 @@ define('WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8
 define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f');
 define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST);

+// KI Chat Webhook
+define('KI_CHAT_WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/8a25bce2-ff83-4676-a3a2-a0e1174fcffe');
+define('KI_CHAT_WEBHOOK_PROD', 'https://n8n.profice.de/webhook/8a25bce2-ff83-4676-a3a2-a0e1174fcffe');
+define('KI_CHAT_WEBHOOK_URL', USE_PRODUCTION ? KI_CHAT_WEBHOOK_PROD : KI_CHAT_WEBHOOK_TEST);
+
 // Google Analytics
 define('GA_MEASUREMENT_ID', 'G-XXXXXXXXXX'); // Replace with your actual ID
 define('GA_API_SECRET', ''); // For server-side tracking
--- a/WebSite/scripts/hex-background.js
+++ b/WebSite/scripts/hex-background.js
@@ -0,0 +1,277 @@
+/**
+ * Hexagonal Magnetism Background
+ * Rigid hexagon grid with mouse-based magnetism effect
+ * Hexagons move as whole units - no vertex deformation
+ */
+
+(function() {
+    'use strict';
+
+    // Configuration
+    const CONFIG = {
+        hexSize: 30,
+        lineWidth: 1,
+        maxLineWidth: 2.5,
+        baseOpacity: 0.2,
+        maxOpacity: 0.7,
+        magnetRadius: 180,
+        maxDisplacement: 12,
+        returnSpeed: 0.1,
+        // Colors (teal to orange gradient based on proximity)
+        tealR: 38, tealG: 166, tealB: 154,
+        orangeR: 245, orangeG: 124, orangeB: 0
+    };
+
+    // State
+    let canvas, ctx;
+    let hexagons = [];
+    let mouse = { x: -1000, y: -1000 };
+    let animationId;
+    let isInitialized = false;
+
+    // Hexagon class - rigid shape, no vertex warping
+    class Hexagon {
+        constructor(originX, originY, size) {
+            this.originX = originX;
+            this.originY = originY;
+            this.currentX = originX;
+            this.currentY = originY;
+            this.size = size;
+            this.opacity = CONFIG.baseOpacity;
+            this.lineWidth = CONFIG.lineWidth;
+            this.colorInfluence = 0;
+        }
+
+        // Calculate vertices relative to current center position
+        getVertices() {
+            const vertices = [];
+            for (let i = 0; i < 6; i++) {
+                // Pointy-top hexagon: first vertex at top
+                const angle = (Math.PI / 3) * i - Math.PI / 2;
+                vertices.push({
+                    x: this.currentX + this.size * Math.cos(angle),
+                    y: this.currentY + this.size * Math.sin(angle)
+                });
+            }
+            return vertices;
+        }
+
+        update(mouseX, mouseY) {
+            const dx = mouseX - this.originX;
+            const dy = mouseY - this.originY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance < CONFIG.magnetRadius && distance > 0) {
+                // Calculate influence (stronger when closer)
+                const influence = 1 - (distance / CONFIG.magnetRadius);
+                const easedInfluence = easeOutCubic(influence);
+
+                // Calculate displacement toward mouse (limited)
+                const angle = Math.atan2(dy, dx);
+                const displacement = CONFIG.maxDisplacement * easedInfluence;
+
+                // Target position (pulled toward mouse)
+                const targetX = this.originX + Math.cos(angle) * displacement;
+                const targetY = this.originY + Math.sin(angle) * displacement;
+
+                // Smooth interpolation to target
+                this.currentX += (targetX - this.currentX) * 0.15;
+                this.currentY += (targetY - this.currentY) * 0.15;
+
+                // Update visual properties
+                this.opacity = CONFIG.baseOpacity + (CONFIG.maxOpacity - CONFIG.baseOpacity) * easedInfluence;
+                this.lineWidth = CONFIG.lineWidth + (CONFIG.maxLineWidth - CONFIG.lineWidth) * easedInfluence;
+                this.colorInfluence = easedInfluence;
+            } else {
+                // Return to origin with spring effect
+                this.currentX += (this.originX - this.currentX) * CONFIG.returnSpeed;
+                this.currentY += (this.originY - this.currentY) * CONFIG.returnSpeed;
+
+                // Fade back to default
+                this.opacity += (CONFIG.baseOpacity - this.opacity) * CONFIG.returnSpeed;
+                this.lineWidth += (CONFIG.lineWidth - this.lineWidth) * CONFIG.returnSpeed;
+                this.colorInfluence += (0 - this.colorInfluence) * CONFIG.returnSpeed;
+            }
+        }
+
+        draw(ctx) {
+            const vertices = this.getVertices();
+
+            ctx.beginPath();
+            ctx.moveTo(vertices[0].x, vertices[0].y);
+            for (let i = 1; i < vertices.length; i++) {
+                ctx.lineTo(vertices[i].x, vertices[i].y);
+            }
+            ctx.closePath();
+
+            // Interpolate color: base gray -> teal -> orange
+            if (this.colorInfluence > 0.01) {
+                let r, g, b;
+                if (this.colorInfluence < 0.5) {
+                    // Gray to teal
+                    const t = this.colorInfluence * 2;
+                    r = Math.round(119 + (CONFIG.tealR - 119) * t);
+                    g = Math.round(119 + (CONFIG.tealG - 119) * t);
+                    b = Math.round(100 + (CONFIG.tealB - 100) * t);
+                } else {
+                    // Teal to orange
+                    const t = (this.colorInfluence - 0.5) * 2;
+                    r = Math.round(CONFIG.tealR + (CONFIG.orangeR - CONFIG.tealR) * t);
+                    g = Math.round(CONFIG.tealG + (CONFIG.orangeG - CONFIG.tealG) * t);
+                    b = Math.round(CONFIG.tealB + (CONFIG.orangeB - CONFIG.tealB) * t);
+                }
+                ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity})`;
+            } else {
+                ctx.strokeStyle = `rgba(119, 119, 100, ${this.opacity})`;
+            }
+
+            ctx.lineWidth = this.lineWidth;
+            ctx.stroke();
+        }
+    }
+
+    // Easing function for smooth animations
+    function easeOutCubic(t) {
+        return 1 - Math.pow(1 - t, 3);
+    }
+
+    // Initialize canvas
+    function init() {
+        canvas = document.getElementById('hexCanvas');
+        if (!canvas) {
+            console.warn('hexCanvas element not found');
+            return;
+        }
+
+        ctx = canvas.getContext('2d');
+        resize();
+        generateHexagons();
+
+        // Event listeners
+        window.addEventListener('resize', debounce(handleResize, 150));
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseleave', handleMouseLeave);
+
+        isInitialized = true;
+        animate();
+    }
+
+    // Generate hexagon grid with proper pointy-top tessellation
+    function generateHexagons() {
+        hexagons = [];
+
+        // Pointy-top hexagon math:
+        // horizontal spacing = size * sqrt(3)
+        // vertical spacing = size * 1.5
+        // every odd row offset by horizontal_spacing / 2
+        const horizSpacing = CONFIG.hexSize * Math.sqrt(3);
+        const vertSpacing = CONFIG.hexSize * 1.5;
+
+        const cols = Math.ceil(window.innerWidth / horizSpacing) + 3;
+        const rows = Math.ceil(window.innerHeight / vertSpacing) + 3;
+
+        for (let row = -1; row < rows; row++) {
+            for (let col = -1; col < cols; col++) {
+                // Offset every odd row by half horizontal spacing
+                const xOffset = (row % 2 === 1) ? horizSpacing / 2 : 0;
+                const x = col * horizSpacing + xOffset;
+                const y = row * vertSpacing;
+
+                hexagons.push(new Hexagon(x, y, CONFIG.hexSize));
+            }
+        }
+    }
+
+    // Resize handler
+    function handleResize() {
+        resize();
+        generateHexagons();
+    }
+
+    function resize() {
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = window.innerWidth * dpr;
+        canvas.height = window.innerHeight * dpr;
+        canvas.style.width = window.innerWidth + 'px';
+        canvas.style.height = window.innerHeight + 'px';
+        ctx.scale(dpr, dpr);
+    }
+
+    // Mouse handlers
+    function handleMouseMove(e) {
+        mouse.x = e.clientX;
+        mouse.y = e.clientY;
+    }
+
+    function handleMouseLeave() {
+        mouse.x = -1000;
+        mouse.y = -1000;
+    }
+
+    // Animation loop
+    function animate() {
+        if (!isInitialized) return;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        const updateRadius = CONFIG.magnetRadius + CONFIG.hexSize * 2;
+
+        for (let i = 0; i < hexagons.length; i++) {
+            const hex = hexagons[i];
+
+            // Check if hexagon needs updating (near mouse or returning to origin)
+            const dx = mouse.x - hex.originX;
+            const dy = mouse.y - hex.originY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const isReturning = Math.abs(hex.currentX - hex.originX) > 0.1 || 
+                               Math.abs(hex.currentY - hex.originY) > 0.1;
+
+            if (distance < updateRadius || isReturning) {
+                hex.update(mouse.x, mouse.y);
+            }
+
+            hex.draw(ctx);
+        }
+
+        animationId = requestAnimationFrame(animate);
+    }
+
+    // Debounce utility
+    function debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    // Cleanup
+    function destroy() {
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+        }
+        window.removeEventListener('resize', handleResize);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseleave', handleMouseLeave);
+        isInitialized = false;
+    }
+
+    // Initialize on DOM ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    // Expose for potential external control
+    window.HexBackground = {
+        init,
+        destroy,
+        config: CONFIG
+    };
+
+})();
--- a/WebSite/sites/automatisation.html
+++ b/WebSite/sites/automatisation.html
@@ -22,6 +22,9 @@
    <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>
+
    <!-- Top Banner -->
    <header class="top-banner dark-theme">
        <div class="top-banner-left">
@@ -288,9 +291,8 @@
        </div>
    </footer>

-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/cursor.js"></script>
    <!-- Optimized script loading -->
+    <script src="../scripts/hex-background.js" defer></script>
    <script src="../scripts/script.js" defer></script>
    <script src="../scripts/cursor.js" defer></script>
    <script src="../scripts/scroll-header.min.js" defer></script>
--- a/WebSite/sites/ki-integration.html
+++ b/WebSite/sites/ki-integration.html
@@ -22,6 +22,9 @@
    <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>
+
    <!-- Top Banner -->
    <header class="top-banner dark-theme">
        <div class="top-banner-left">
@@ -300,9 +303,8 @@
        </div>
    </footer>

-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/cursor.js"></script>
    <!-- Optimized script loading -->
+    <script src="../scripts/hex-background.js" defer></script>
    <script src="../scripts/script.js" defer></script>
    <script src="../scripts/cursor.js" defer></script>
    <script src="../scripts/scroll-header.min.js" defer></script>
--- a/WebSite/sites/leads.html
+++ b/WebSite/sites/leads.html
@@ -23,6 +23,9 @@
    <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>
+
    <!-- Top Banner -->
    <header class="top-banner dark-theme">
        <div class="top-banner-left">
@@ -194,6 +197,7 @@
    </footer>

    <!-- Optimized script loading -->
+    <script src="../scripts/hex-background.js" defer></script>
    <script src="../scripts/script.js" defer></script>
    <script src="../scripts/leads.min.js" defer></script>
    <script src="../scripts/cursor.js" defer></script>
--- a/WebSite/sites/offers.html
+++ b/WebSite/sites/offers.html
@@ -22,6 +22,9 @@
    <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>
+
    <!-- Top Banner -->
    <header class="top-banner dark-theme">
        <div class="top-banner-left">
@@ -191,6 +194,7 @@
    </footer>

    <!-- Optimized script loading -->
+    <script src="../scripts/hex-background.js" defer></script>
    <script src="../scripts/script.js" defer></script>
    <script src="../scripts/cursor.js" defer></script>
    <script src="../scripts/scroll-header.min.js" defer></script>
--- a/WebSite/sites/website.html
+++ b/WebSite/sites/website.html
@@ -22,6 +22,9 @@
    <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>
+
    <!-- Top Banner -->
    <header class="top-banner dark-theme">
        <div class="top-banner-left">
@@ -274,9 +277,8 @@
        </div>
    </footer>

-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/cursor.js"></script>
    <!-- Optimized script loading -->
+    <script src="../scripts/hex-background.js" defer></script>
    <script src="../scripts/script.js" defer></script>
    <script src="../scripts/cursor.js" defer></script>
    <script src="../scripts/scroll-header.min.js" defer></script>
--- a/WebSite/style/design.css
+++ b/WebSite/style/design.css
@@ -20,9 +20,20 @@ body {
    min-height: 100vh;
 }

+/* Hexagonal Canvas Background */
+#hexCanvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    pointer-events: none;
+}
+
 /* Top Banner - Ultra Smooth Performance */
 .top-banner {
-    background-color: var(--primary-light);
+    background-color: rgba(235, 235, 222, 0.85);
    color: var(--primary-dark);
    padding: 5px 40px;
    height: 90px;
@@ -36,6 +47,8 @@ body {
    z-index: 1001;
    border-bottom: 3px solid var(--accent-orange);
    overflow: hidden;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
    
    /* Ultra-smooth transitions with hardware acceleration */
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
@@ -69,37 +82,6 @@ body {
    transition-duration: 0.2s;
 }

-/* Light blink effect for top banner */
-.top-banner::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 2px;
-    background: var(--accent-orange);
-    animation: lightBlink 3s ease-in-out infinite;
-    z-index: 1;
-    pointer-events: none;
-}
-
-@keyframes lightBlink {
-    0% {
-        left: -100%;
-        opacity: 0;
-    }
-    10% {
-        opacity: 1;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        left: 100%;
-        opacity: 0;
-    }
-}
-
 .top-banner-left {
    display: flex;
    align-items: center;
@@ -1160,7 +1142,7 @@ body {

 /* Footer Banner Styles */
 .footer-banner {
-    background: #2a2a2a !important;
+    background: rgba(42, 42, 42, 0.85) !important;
    color: var(--primary-light) !important;
    padding: 60px 0 30px;
    margin: 80px 0 0 0;
@@ -1168,22 +1150,8 @@ body {
    width: 100%;
    position: relative;
    overflow: hidden;
-}
-
-.footer-banner::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
-    animation: shimmer 3s infinite;
-}
-
-@keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }

 .footer-container {
--- a/WebSite/style/tech-onepager.css
+++ b/WebSite/style/tech-onepager.css
@@ -3,52 +3,15 @@
 * System being built aesthetic - not marketing campaign
 */

-/* ===== TECH BACKGROUND ===== */
+/* ===== TECH BACKGROUND (disabled - replaced by hexCanvas) ===== */
 .tech-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    overflow: hidden;
-}
-
-.grid-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: 
-        linear-gradient(rgba(79, 71, 71, 0.12) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
-    background-size: 50px 50px;
-    pointer-events: none;
-}
-
-.dot-pattern {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: radial-gradient(circle, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
-    background-size: 20px 20px;
-    pointer-events: none;
+    display: none;
 }

+.grid-overlay,
+.dot-pattern,
 .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, 
-        rgba(235, 235, 222, 0.8) 0%, 
-        rgba(235, 235, 222, 0.6) 50%, 
-        rgba(235, 235, 222, 0.4) 100%);
-    pointer-events: none;
+    display: none;
 }

 /* ===== HERO SECTION ===== */
@@ -71,6 +34,7 @@

 .hero-left {
    max-width: 600px;
+    width: 100%;
 }

 .hero-headline {
@@ -85,18 +49,32 @@
 .hero-subline {
    font-size: 1.25rem;
    line-height: 1.6;
-    color: var(--primary-mid);
+    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 400;
+    background: rgba(102, 187, 106, 0.35);
+    padding: 16px 20px;
+    padding-left: 20px;
+    border-left: 3px solid var(--accent-teal);
+    background: rgba(102, 187, 106, 0.35);
+    border-radius: 0 8px 8px 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: inline-block;
 }

 .hero-proof {
    font-size: 1.1rem;
-    color: var(--accent-teal);
+    color: var(--primary-dark);
    font-weight: 500;
    margin-bottom: 40px;
-    padding-left: 20px;
+    padding: 12px 20px;
    border-left: 3px solid var(--accent-teal);
+    background: rgba(102, 187, 106, 0.35);
+    border-radius: 0 8px 8px 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: inline-block;
 }

 .hero-buttons {
@@ -379,8 +357,7 @@
 /* ===== SYSTEME SECTION ===== */
 .systeme-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
 }

 .container {
@@ -1247,8 +1224,7 @@
 /* ===== QUALIFICATION SECTION ===== */
 .qualification-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
+    background: transparent;
 }

 .qualification-grid {
@@ -1406,26 +1382,11 @@
 /* ===== PROCESS SECTION ===== */
 .process-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
    position: relative;
    overflow: hidden;
 }

-.process-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, 
-        transparent 0%, 
-        rgba(38, 166, 154, 0.05) 50%, 
-        transparent 100%);
-    pointer-events: none;
-}
-
 .process-line {
    display: flex;
    align-items: center;
@@ -1624,24 +1585,11 @@
 /* ===== ERGEBNISSE SECTION ===== */
 .results-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(15px);
+    background: transparent;
    position: relative;
    overflow: hidden;
 }

-.results-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle at 30% 50%, rgba(38, 166, 154, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 70% 50%, rgba(102, 187, 106, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-}
-
 .results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1760,26 +1708,11 @@
 /* ===== INTERACTION SECTION ===== */
 .interaction-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
    position: relative;
    overflow: hidden;
 }

-.interaction-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, 
-        transparent 30%, 
-        rgba(38, 166, 154, 0.05) 50%, 
-        transparent 70%);
-    pointer-events: none;
-}
-
 .interaction-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));