From 6141442f1cdf0ecfd4f54abf6beaa160ea1a3c4b Mon Sep 17 00:00:00 2001
From: Ihor_Zhekov <ihor@profice.ai>
Date: Mon, 23 Mar 2026 09:23:44 +0100
Subject: [PATCH] offers deploy and redisign

---
 Profice WebSite/index.html                 |   2 +-
 Profice WebSite/scripts/add/send.php       |   2 +-
 Profice WebSite/scripts/feed-calculator.js |   5 +-
 Profice WebSite/scripts/script.js          |  10 +-
 Profice WebSite/sites/automatisation.html  |  15 +-
 Profice WebSite/sites/feed.html            |   7 -
 Profice WebSite/sites/ki-integration.html  |  15 +-
 Profice WebSite/sites/leads.html           |  15 +-
 Profice WebSite/sites/offers.html          | 208 +++++++++++++++------
 Profice WebSite/sites/website.html         |  15 +-
 Profice WebSite/style/design.css           |   6 +-
 Profice WebSite/style/feed.css             |   2 +-
 12 files changed, 181 insertions(+), 121 deletions(-)

diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html
index c5892a5..201058e 100644
--- a/Profice WebSite/index.html	
+++ b/Profice WebSite/index.html	
@@ -141,7 +141,7 @@
                         Ihr Telefon klingelt. Keiner geht ran. Das kostet Sie Aufträge.
                     </h1>
                     <p class="hero-subline">
-                        KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
+                        KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in Ihre bestehenden Tools.
                     </p>
                     <p class="hero-proof">
                         Für Unternehmen, die wachsen wollen - ohne mehr Personal einzustellen.
diff --git a/Profice WebSite/scripts/add/send.php b/Profice WebSite/scripts/add/send.php
index 77c5554..157d479 100644
--- a/Profice WebSite/scripts/add/send.php	
+++ b/Profice WebSite/scripts/add/send.php	
@@ -50,7 +50,7 @@ define('DEBUG_MODE', true); // Enable debug temporarily to see errors
 
 // N8N Webhooks
 define('WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8207-1e335e64518f');
-define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f');
+define('WEBHOOK_PROD', 'https://n8n.support-space.de/webhook/bb086ec3-42a5-4f5a-bbab-eddba0db55cc');
 define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST);
 
 // KI Chat Webhook
diff --git a/Profice WebSite/scripts/feed-calculator.js b/Profice WebSite/scripts/feed-calculator.js
index 84633a0..2ff638b 100644
--- a/Profice WebSite/scripts/feed-calculator.js	
+++ b/Profice WebSite/scripts/feed-calculator.js	
@@ -11,11 +11,13 @@
         return (n >= 0 ? '+' : '') + n.toLocaleString('de-DE', { maximumFractionDigits: 0 }) + ' %';
     }
 
+    var WASTE = 0.20; // Anteil Budget-Fresser — fixed at 20%
+
     function calc() {
         var B = +document.getElementById('sl-budget').value;
         var U = +document.getElementById('sl-umsatz').value;
         var m = +document.getElementById('sl-marge').value / 100;
-        var w = +document.getElementById('sl-waste').value / 100;
+        var w = WASTE;
 
         var P_alt = U * m - B;
         var roas_core = U / (B * (1 - w));
@@ -71,7 +73,6 @@
         syncFromSlider('sl-budget', 'num-budget', 'lbl-budget', '€');
         syncFromSlider('sl-umsatz', 'num-umsatz', 'lbl-umsatz', '€');
         syncFromSlider('sl-marge',  'num-marge',  'lbl-marge',  '%');
-        syncFromSlider('sl-waste',  'num-waste',  'lbl-waste',  '%');
 
         calc();
     }
diff --git a/Profice WebSite/scripts/script.js b/Profice WebSite/scripts/script.js
index 776de49..b595ebd 100644
--- a/Profice WebSite/scripts/script.js	
+++ b/Profice WebSite/scripts/script.js	
@@ -97,7 +97,7 @@ document.addEventListener("DOMContentLoaded", function() {
     initSoundVisualization();
     
     // Use absolute path from site root
-    const API_ENDPOINT = '/scripts/add/send.php';
+    const API_ENDPOINT = window.WEBHOOK_URL || '/scripts/add/send.php';
     const isLocalFile = window.location.protocol === 'file:';
     
     // ==========================================
@@ -180,7 +180,7 @@ document.addEventListener("DOMContentLoaded", function() {
                     e.preventDefault();
                     
                     // Show desktop fallback message
-                    const phoneNumber = '+493021927825';
+                    const phoneNumber = '+49000000000';
                     const message = `Bald verfügbar`;
                     
                     // Create a custom modal instead of alert
@@ -311,10 +311,8 @@ document.addEventListener("DOMContentLoaded", function() {
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify(formData)
                     });
-                    const result = await response.json();
-                    
-                    if (!result.success) {
-                        alert('Fehler beim Senden: ' + (result.message || 'Unbekannter Fehler'));
+                    if (!response.ok) {
+                        alert('Fehler beim Senden. Bitte versuchen Sie es erneut.');
                         return;
                     }
                 } catch (error) {
diff --git a/Profice WebSite/sites/automatisation.html b/Profice WebSite/sites/automatisation.html
index 912ede3..f1ec1bd 100644
--- a/Profice WebSite/sites/automatisation.html	
+++ b/Profice WebSite/sites/automatisation.html	
@@ -305,26 +305,17 @@
                     <h4 class="footer-title">Kontakt</h4>
                     <div class="footer-contact">
                         <div class="contact-item">
-                            <span class="contact-icon">✉️</span>
+                            <img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span><a href="mailto:info@profice.de">info@profice.de</a></span>
                         </div>
                     </div>
                     <div class="social-media">
                         <div class="social-icons">
                             <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
-                                </svg>
-                            </a>
-                            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                                </svg>
+                                <img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
                             </a>
                             <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                                </svg>
+                                <img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
                             </a>
                         </div>
                     </div>
diff --git a/Profice WebSite/sites/feed.html b/Profice WebSite/sites/feed.html
index 7f3e8b2..8a816c3 100644
--- a/Profice WebSite/sites/feed.html	
+++ b/Profice WebSite/sites/feed.html	
@@ -369,13 +369,6 @@
                     </div>
                 </div>
 
-                <div class="calc-field">
-                    <label>Anteil Budget-Fresser <span id="lbl-waste">20 %</span></label>
-                    <div class="calc-slider-row">
-                        <input type="range" id="sl-waste" min="5" max="50" step="1" value="20">
-                        <input type="number" class="calc-num-input" id="num-waste" min="5" max="50" step="1" value="20">
-                    </div>
-                </div>
             </div>
 
             <!-- Outputs -->
diff --git a/Profice WebSite/sites/ki-integration.html b/Profice WebSite/sites/ki-integration.html
index ec04b28..c92e0e6 100644
--- a/Profice WebSite/sites/ki-integration.html	
+++ b/Profice WebSite/sites/ki-integration.html	
@@ -317,26 +317,17 @@
                     <h4 class="footer-title">Kontakt</h4>
                     <div class="footer-contact">
                         <div class="contact-item">
-                            <span class="contact-icon">✉️</span>
+                            <img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span><a href="mailto:info@profice.de">info@profice.de</a></span>
                         </div>
                     </div>
                     <div class="social-media">
                         <div class="social-icons">
                             <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
-                                </svg>
-                            </a>
-                            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                                </svg>
+                                <img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
                             </a>
                             <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                                </svg>
+                                <img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
                             </a>
                         </div>
                     </div>
diff --git a/Profice WebSite/sites/leads.html b/Profice WebSite/sites/leads.html
index dae9f07..a4a0867 100644
--- a/Profice WebSite/sites/leads.html	
+++ b/Profice WebSite/sites/leads.html	
@@ -210,26 +210,17 @@
                     <h4 class="footer-title">Kontakt</h4>
                     <div class="footer-contact">
                         <div class="contact-item">
-                            <span class="contact-icon">✉️</span>
+                            <img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span><a href="mailto:info@profice.de">info@profice.de</a></span>
                         </div>
                     </div>
                     <div class="social-media">
                         <div class="social-icons">
                             <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
-                                </svg>
-                            </a>
-                            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                                </svg>
+                                <img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
                             </a>
                             <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                                </svg>
+                                <img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
                             </a>
                         </div>
                     </div>
diff --git a/Profice WebSite/sites/offers.html b/Profice WebSite/sites/offers.html
index e37ce41..5b45dd9 100644
--- a/Profice WebSite/sites/offers.html	
+++ b/Profice WebSite/sites/offers.html	
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="de">
 <head>
     <!-- Cookiebot -->
@@ -29,15 +29,15 @@
 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Kontaktieren Sie Profice für Ihre digitale Transformation. Webentwicklung, KI-Integration und Automatisierungslösungen.">
+    <meta name="description" content="Kontaktieren Sie Profice für Ihre digitale Transformation. Webentwicklung, KI-Integration und Automatisierungslösungen.">
     <meta name="keywords" content="Kontakt, Anfrage, Webentwicklung, KI, Automatisierung, Profice">
     <meta name="author" content="Profice">
     <meta property="og:title" content="Kontakt & Anfrage - Profice">
-    <meta property="og:description" content="Kontaktieren Sie uns für Ihre digitale Transformation">
+    <meta property="og:description" content="Kontaktieren Sie uns für Ihre digitale Transformation">
     <meta property="og:type" content="website">
     <meta name="robots" content="index, follow">
     <title>Kontakt & Anfrage - Profice</title>
-    
+
     <!-- Favicon with multiple sizes for better visibility -->
     <link rel="icon" type="image/png" sizes="32x32" href="../images/logo/Appicon 1024X1024-01.png">
     <link rel="icon" type="image/png" sizes="16x16" href="../images/logo/Appicon 1024X1024-01.png">
@@ -53,15 +53,100 @@
     <link rel="apple-touch-icon" sizes="60x60" href="../images/logo/Appicon 1024X1024-01.png">
     <link rel="apple-touch-icon" sizes="57x57" href="../images/logo/Appicon 1024X1024-01.png">
     <link rel="shortcut icon" href="../images/logo/Appicon 1024X1024-01.png">
-    
+
     <!-- Preload critical resources -->
     <link rel="preload" href="../style/design.css?v=20260304" as="style">
     <link rel="preload" href="../style/cursor.css?v=20260304" as="style">
     <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
-    
+
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../style/design.css?v=20260304">
     <link rel="stylesheet" href="../style/cursor.css?v=20260304">
+
+    <style>
+        .offers-main {
+            max-width: 860px;
+            margin: 0 auto;
+            padding: 130px 24px 60px;
+        }
+
+        .offers-header {
+            text-align: center;
+            margin-bottom: 48px;
+        }
+
+        .offers-label {
+            display: inline-block;
+            color: var(--accent-orange);
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 2.5px;
+            text-transform: uppercase;
+            margin-bottom: 14px;
+        }
+
+        .offers-title {
+            font-size: 40px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 14px;
+            line-height: 1.2;
+        }
+
+        .offers-subtitle {
+            font-size: 17px;
+            color: var(--primary-mid);
+            max-width: 580px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        .form-card {
+            background: rgba(255, 255, 255, 0.92);
+            border-radius: 24px;
+            padding: 48px;
+            box-shadow: 0 15px 60px rgba(79, 71, 71, 0.12);
+            border: 1px solid rgba(79, 71, 71, 0.06);
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+        }
+
+        .form-card .form-group textarea {
+            min-height: 140px;
+        }
+
+        .contact-strip {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            margin-bottom: 40px;
+            flex-wrap: wrap;
+        }
+
+        .contact-strip-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--primary-mid);
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .contact-strip-item svg {
+            color: var(--accent-teal);
+            flex-shrink: 0;
+        }
+
+        @media (max-width: 640px) {
+            .offers-title { font-size: 28px; }
+            .form-card { padding: 28px 20px; }
+            .form-row { grid-template-columns: 1fr; gap: 0; }
+        }
+    </style>
 </head>
 <body>
     <!-- Google Tag Manager (noscript) -->
@@ -76,7 +161,7 @@
     <header class="top-banner dark-theme">
         <div class="top-banner-left">
             <div class="banner-left">
-                <button class="menu-toggle" id="menuToggle" aria-label="Menü">
+                <button class="menu-toggle" id="menuToggle" aria-label="Menü">
                     <span></span>
                     <span></span>
                     <span></span>
@@ -119,42 +204,71 @@
     <div class="overlay" id="overlay"></div>
 
     <!-- Main Content -->
-    <main class="main-content">
-        <div class="form-container">
-            <h2 class="form-title">Kontaktieren Sie uns</h2>
-            
+    <main class="offers-main">
+
+        <!-- Page Header -->
+        <div class="offers-header">
+            <span class="offers-label">Kontakt</span>
+            <h1 class="offers-title">Lassen Sie uns zusammenarbeiten</h1>
+            <p class="offers-subtitle">Schildern Sie uns Ihr Projekt — wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
+        </div>
+
+        <!-- Contact Strip -->
+        <div class="contact-strip">
+            <div class="contact-strip-item">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="3"/><polyline points="2,4 12,13 22,4"/></svg>
+                <a href="mailto:info@profice.de" style="color: inherit; text-decoration: none;">info@profice.de</a>
+            </div>
+            <div class="contact-strip-item">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.54a16 16 0 0 0 5.55 5.55l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+                <span>+49 000 0000000</span>
+            </div>
+            <div class="contact-strip-item">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                <span>Antwort innerhalb 24h</span>
+            </div>
+        </div>
+
+        <!-- Form Card -->
+        <div class="form-card">
             <form id="contactForm">
-                <div class="form-group">
-                    <label for="name">Name *</label>
-                    <input type="text" id="name" name="name" required placeholder="Ihr vollständiger Name">
-                </div>
-
-                <div class="form-group">
-                    <label for="organisation">Organisation</label>
-                    <input type="text" id="organisation" name="organisation" placeholder="Firmenname (optional)">
+                <!-- Name + Organisation -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="name">Name *</label>
+                        <input type="text" id="name" name="name" required placeholder="Ihr vollständiger Name">
+                    </div>
+                    <div class="form-group">
+                        <label for="organisation">Organisation</label>
+                        <input type="text" id="organisation" name="organisation" placeholder="Firmenname (optional)">
+                    </div>
                 </div>
 
+                <!-- Contact -->
                 <div class="form-group">
                     <label for="contact">E-Mail oder Telefonnummer *</label>
-                    <input type="text" id="contact" name="contact" required placeholder="email@beispiel.de oder +493021927825">
+                    <input type="text" id="contact" name="contact" required placeholder="email@beispiel.de oder +49 000 0000000">
                 </div>
 
-                <div class="form-group">
-                    <label for="service">Gewünschte Dienstleistung *</label>
-                    <select id="service" name="service" required>
-                        <option value="" disabled selected>Bitte wählen...</option>
-                        <option value="website">Website</option>
-                        <option value="ki-integration">KI Integration</option>
-                        <option value="automatisation">Automatisation</option>
-                        <option value="unabhaengige-wahl">Unabhängige Wahl</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="budget">Budget (€)</label>
-                    <input type="text" id="budget" name="budget" placeholder="z.B. 5000 - 10000">
+                <!-- Service + Budget -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="service">Gewünschte Dienstleistung *</label>
+                        <select id="service" name="service" required>
+                            <option value="" disabled selected>Bitte wählen...</option>
+                            <option value="website">Website</option>
+                            <option value="ki-integration">KI Integration</option>
+                            <option value="automatisation">Automatisation</option>
+                            <option value="unabhaengige-wahl">Unabhängige Wahl</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="budget">Budget (€)</label>
+                        <input type="text" id="budget" name="budget" placeholder="z.B. 5.000 – 10.000 €">
+                    </div>
                 </div>
 
+                <!-- Description -->
                 <div class="form-group">
                     <label for="description">Beschreibung *</label>
                     <textarea id="description" name="description" required placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."></textarea>
@@ -183,7 +297,7 @@
                         <p>Intelligente Prozesse für nachhaltiges Wachstum</p>
                     </div>
                 </div>
-                
+
                 <!-- Quick Links Section -->
                 <div class="footer-section">
                     <h4 class="footer-title">Services</h4>
@@ -192,7 +306,7 @@
                         <a href="../index.html#interaction" class="footer-link">Demo</a>
                     </nav>
                 </div>
-                
+
                 <!-- Legal Section -->
                 <div class="footer-section">
                     <h4 class="footer-title">Rechtliches</h4>
@@ -201,38 +315,29 @@
                         <a href="impressum.html" class="footer-link">Impressum</a>
                     </nav>
                 </div>
-                
+
                 <!-- Contact Section -->
                 <div class="footer-section">
                     <h4 class="footer-title">Kontakt</h4>
                     <div class="footer-contact">
                         <div class="contact-item">
-                            <span class="contact-icon">✉️</span>
+                            <img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span><a href="mailto:info@profice.de">info@profice.de</a></span>
                         </div>
                     </div>
                     <div class="social-media">
                         <div class="social-icons">
                             <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
-                                </svg>
-                            </a>
-                            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                                </svg>
+                                <img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
                             </a>
                             <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                                </svg>
+                                <img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
                             </a>
                         </div>
                     </div>
                 </div>
             </div>
-            
+
             <div class="footer-bottom">
                 <div class="footer-bottom-content">
                     <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
@@ -252,7 +357,6 @@
     <script src="../scripts/cursor.js?v=20260304" defer></script>
     <script src="../scripts/scroll-header.min.js?v=20260304" defer></script>
     <script src="../scripts/console-image.js?v=20260304" defer></script>
-    
+
 </body>
 </html>
-
diff --git a/Profice WebSite/sites/website.html b/Profice WebSite/sites/website.html
index 70f6833..7a394bd 100644
--- a/Profice WebSite/sites/website.html	
+++ b/Profice WebSite/sites/website.html	
@@ -291,26 +291,17 @@
                     <h4 class="footer-title">Kontakt</h4>
                     <div class="footer-contact">
                         <div class="contact-item">
-                            <span class="contact-icon">✉️</span>
+                            <img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span><a href="mailto:info@profice.de">info@profice.de</a></span>
                         </div>
                     </div>
                     <div class="social-media">
                         <div class="social-icons">
                             <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
-                                </svg>
-                            </a>
-                            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="social-link linkedin">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                                </svg>
+                                <img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
                             </a>
                             <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                                </svg>
+                                <img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
                             </a>
                         </div>
                     </div>
diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css
index 1ab9eb5..ab65e36 100644
--- a/Profice WebSite/style/design.css	
+++ b/Profice WebSite/style/design.css	
@@ -1455,9 +1455,9 @@ body {
     border-color: transparent;
 }
 
-.social-link.linkedin:hover {
-    background: #0077B5;
-    border-color: transparent;
+.social-link.facebook {
+    background: #1877F2;
+    border-color: #1877F2;
 }
 
 .social-link img {
diff --git a/Profice WebSite/style/feed.css b/Profice WebSite/style/feed.css
index c006581..cc87e41 100644
--- a/Profice WebSite/style/feed.css	
+++ b/Profice WebSite/style/feed.css	
@@ -402,7 +402,7 @@
     padding: 28px 28px 24px;
 }
 .calc-out-card.highlight {
-    background: rgba(90,158,150,0.07);
+    background: rgba(255,255,255,0.92);
     border: 2px solid var(--accent-teal);
 }
 .calc-out-label {