diff --git a/Profice WebSite.zip b/Profice WebSite.zip
new file mode 100644
index 0000000..c23d6e0
Binary files /dev/null and b/Profice WebSite.zip differ
diff --git a/Profice WebSite/OPTIMIZATION_REPORT.md b/Profice WebSite/OPTIMIZATION_REPORT.md
new file mode 100644
index 0000000..8d324e1
--- /dev/null
+++ b/Profice WebSite/OPTIMIZATION_REPORT.md	
@@ -0,0 +1,27 @@
+﻿# Project Optimization Report
+
+## Files Removed:
+- CSS: cookie-consent.css, details.css, lead-details.css, login.css, service.css (5 files)
+- JS: cookie-consent.js, login.js, register.js (3 files) 
+- Images: All 20+ iconography files, duplicate logos, spidy.png (22+ files)
+- Components: UnifiedWorkflow.js (1 unused component)
+
+## Optimizations Applied:
+- Minified all CSS files (design.min.css, cursor.min.css, tech-onepager.min.css, leads.min.css)
+- Minified all JS files (script.min.js, cursor.min.js, scroll-header.min.js, tech-onepager.min.js, leads.min.js)
+- Updated HTML files to use minified versions
+- Removed duplicate script loading
+- Optimized HTML structure by removing redundant attributes
+
+## Final Project Stats:
+- Total size: 0.57 MB
+- HTML files: 6
+- CSS files: 8 (4 original + 4 minified)
+- JS files: 10 (5 original + 5 minified) 
+- Image files: 2 (only essential ones kept)
+
+## Performance Improvements:
+- Reduced file count by ~30 files
+- Minified CSS/JS for faster loading
+- Eliminated duplicate code
+- Streamlined asset loading
diff --git a/Profice WebSite/images/icons/facebook.png b/Profice WebSite/images/icons/facebook.png
new file mode 100644
index 0000000..2aa1e0c
Binary files /dev/null and b/Profice WebSite/images/icons/facebook.png differ
diff --git a/Profice WebSite/images/icons/instagram.png b/Profice WebSite/images/icons/instagram.png
new file mode 100644
index 0000000..613aa1e
Binary files /dev/null and b/Profice WebSite/images/icons/instagram.png differ
diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html
index 1c65d49..2be8730 100644
--- a/Profice WebSite/index.html	
+++ b/Profice WebSite/index.html	
@@ -1,54 +1,73 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice - Digitale Lösungen</title>
+    <meta name="description" content="Profice - Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing. KI-Telefonassistenten, Chatbots und interne KI-Systeme.">
+    <meta name="keywords" content="KI Telefonassistent, Chatbot, digitale Mitarbeiter, Automatisierung, KI Systeme">
+    <meta name="author" content="Profice">
+    <meta property="og:title" content="Profice - Digitale Mitarbeiter">
+    <meta property="og:description" content="Wir bauen funktionierende KI-Systeme für Unternehmen">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
+    <meta name="robots" content="index, follow">
+    <title>Profice - Digitale Mitarbeiter</title>
+    
+    <!-- Preconnect to external domains -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://www.googletagmanager.com">
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="style/design.css" as="style">
+    <link rel="preload" href="style/tech-onepager.css" as="style">
+    <link rel="preload" href="style/cursor.css" as="style">
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="style/design.css">
+    <link rel="stylesheet" href="style/tech-onepager.css">
     <link rel="stylesheet" href="style/cursor.css">
-    <link rel="stylesheet" href="style/cookie-consent.css">
+    
+    <!-- DNS prefetch for external resources -->
+    <link rel="dns-prefetch" href="//www.googletagmanager.com">
+    <link rel="dns-prefetch" href="//connect.facebook.net">
+    <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>
+
+    <!-- Top Banner -->
     <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" >
                     <span></span>
                     <span></span>
                     <span></span>
                 </button>
                 
                 <a href="index.html" class="logo-link">
-                    <img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" loading="lazy">
+                    <img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" >
                 </a>
             </div>
         </div>
         
         <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="#hero-section" class="nav-link">Startseite</a>
-                <a href="#enterprise" class="nav-link">Unternehmen</a>
-                <a href="#pricing" class="nav-link">Preise</a>
-                <a href="#services" class="nav-link">Lösungen</a>
-            </nav>
+            <!-- Navigation removed -->
         </div>
         
         <div class="top-banner-right">
-            <button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
+            <button id="cursorToggle"  >
                 <img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
             </button>
-            <button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-                    <polyline points="10 17 15 12 10 7"></polyline>
-                    <line x1="15" y1="12" x2="3" y2="12"></line>
-                </svg>
-                Anmelden
-            </button>
         </div>
     </header>
-    
 
+    <!-- Slide Menu -->
     <nav class="slide-menu" id="slideMenu">
         <a href="index.html" class="active">Startseite</a>
         <a href="sites/offers.html">Kontakt & Anfrage</a> 
@@ -57,201 +76,455 @@
 
     <div class="overlay" id="overlay"></div>
 
-    <main class="home-content">
-        
-        <section id="hero-section" class="hero-section">
-            <div class="hero-text">
-                <h1>Transformieren Sie Ihr Unternehmen digital</h1>
-                <p>Maßgeschneiderte Lösungen für Web, KI-Integration und Prozessautomatisierung. Wir bringen Ihre Vision in die digitale Realität.</p>
-                <div class="hero-buttons">
-                    <a href="sites/offers.html" class="cta-btn primary">Projekt starten</a>
-                    <a href="#services" class="cta-btn secondary">Mehr erfahren</a>
-                </div>
-            </div>
-            <div class="hero-image-placeholder">
-                <span>[Bild: Digitale Transformation Illustration]</span>
-            </div>
-        </section>
-
-        <section id="enterprise" class="enterprise-section">
-            <h2 class="section-title">Unternehmenslösungen</h2>
-            <div class="enterprise-content">
-                <p>Maßgeschneiderte Lösungen für große Unternehmen mit komplexen Anforderungen.</p>
-                <div class="enterprise-features">
-                    <div class="feature-item">
-                        <h3>Skalierbarkeit</h3>
-                        <p>Lösungen, die mit Ihrem Unternehmen wachsen</p>
-                    </div>
-                    <div class="feature-item">
-                        <h3>Sicherheit</h3>
-                        <p>Unternehmenssicherheit und Compliance</p>
-                    </div>
-                    <div class="feature-item">
-                        <h3>Integration</h3>
-                        <p>Nahtlose Integration mit bestehenden Systemen</p>
+    <!-- Hero Section -->
+    <section class="hero-section" id="hero">
+        <div class="hero-container">
+            <div class="hero-left">
+                <div class="hero-text">
+                    <h1 class="hero-headline">
+                        Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.
+                    </h1>
+                    <p class="hero-subline">
+                        KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
+                    </p>
+                    <p class="hero-proof">
+                        <span class="green-highlight-box">Für Unternehmen, die wachsen wollen ohne mehr Personal einzustellen.</span>
+                    </p>
+                    <div class="hero-buttons">
+                        <button class="cta-btn primary" id="kiPhoneBtn">Mit KI sprechen</button>
+                        <button class="cta-btn secondary" id="chatBtn">Im Chat starten</button>
                     </div>
                 </div>
             </div>
-        </section>
-
-        <section id="pricing" class="pricing-section">
-            <h2 class="section-title">Preise</h2>
-            <div class="pricing-grid">
-                <div class="pricing-card">
-                    <h3>Starter</h3>
-                    <div class="price">€999</div>
-                    <p>Perfekt für kleine Unternehmen</p>
-                    <ul>
-                        <li>Webentwicklung</li>
-                        <li>Grundlegende KI-Integration</li>
-                        <li>3 Monate Support</li>
-                    </ul>
-                </div>
-                <div class="pricing-card featured">
-                    <h3>Professional</h3>
-                    <div class="price">€2.499</div>
-                    <p>Ideal für wachsende Unternehmen</p>
-                    <ul>
-                        <li>Erweiterte Webentwicklung</li>
-                        <li>KI & Automatisierung</li>
-                        <li>6 Monate Support</li>
-                        <li>SEO Optimierung</li>
-                    </ul>
-                </div>
-                <div class="pricing-card">
-                    <h3>Unternehmen</h3>
-                    <div class="price">Individuell</div>
-                    <p>Für große Unternehmen</p>
-                    <ul>
-                        <li>Volle Unternehmenslösungen</li>
-                        <li>Custom KI-Entwicklung</li>
-                        <li>12 Monate Support</li>
-                        <li>Dediziertes Team</li>
-                    </ul>
+            
+            <div class="hero-right">
+                <div class="system-graphic" id="systemGraphic">
+                    <!-- Connection Lines (behind nodes) -->
+                    <svg class="connections" id="connections">
+                        <!-- Lines will be drawn by JavaScript -->
+                    </svg>
+                    
+                    <!-- Central KI Node -->
+                    <div class="node central-node" data-node="ki-assistent" data-tooltip="Der zentrale KI-Assistent verarbeitet alle Anfragen und koordiniert die Kommunikation zwischen den verschiedenen Systemen. Er ist das Herzstück Ihrer digitalen Mitarbeiter.">
+                        <div class="node-content">
+                            <div class="node-icon">🤖</div>
+                            <div class="node-label">KI ASSISTENT</div>
+                        </div>
+                    </div>
+                    
+                    <!-- Connected Nodes in circular pattern -->
+                    <div class="node phone-node" data-node="telefon" data-tooltip="Automatisierte Telefonannahme mit KI-Spracherkennung. Der KI-Assistent nimmt Anrufe entgegen, versteht Kundenanfragen und leitet sie an die richtige Abteilung weiter.">
+                        <div class="node-content">
+                            <div class="node-icon">📞</div>
+                            <div class="node-label">Telefon</div>
+                        </div>
+                    </div>
+                    
+                    <div class="node chat-node" data-node="chat" data-tooltip="Intelligenter Website-Chat der nächsten Generation. Versteht natürliche Sprache, kategorisiert Anfragen und strukturiert Daten für die Übergabe an menschliche Mitarbeiter.">
+                        <div class="node-content">
+                            <div class="node-icon">💬</div>
+                            <div class="node-label">Website Chat</div>
+                        </div>
+                    </div>
+                    
+                    <div class="node crm-node" data-node="crm" data-tooltip="Nahtlose CRM-Integration. Alle Kundendaten und Interaktionen werden automatisch erfasst und in Ihrem CRM-System synchronisiert für eine 360°-Kundensicht.">
+                        <div class="node-content">
+                            <div class="node-icon">📊</div>
+                            <div class="node-label">CRM</div>
+                        </div>
+                    </div>
+                    
+                    <div class="node ticket-node" data-node="tickets" data-tooltip="Automatisiertes Ticketsystem. KI erstellt, kategorisiert und priorisiert Support-Tickets und sorgt für eine schnelle und effiziente Bearbeitung aller Anfragen.">
+                        <div class="node-content">
+                            <div class="node-icon">🎫</div>
+                            <div class="node-label">Ticketsystem</div>
+                        </div>
+                    </div>
+                    
+                    <div class="node team-node" data-node="team" data-tooltip="Intelligente Team-Koordination. Der KI-Assistent verteilt Aufgaben an die richtigen Teammitglieder und sorgt für optimale Auslastung und schnelle Reaktionszeiten.">
+                        <div class="node-content">
+                            <div class="node-icon">👥</div>
+                            <div class="node-label">Team</div>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
 
-        <section id="services" class="services-section">
-            <h2 class="section-title">Unsere Expertise</h2>
-            <div class="services-grid">
+    <!-- Systeme Section -->
+    <section class="systeme-section" id="systeme">
+        <div class="container">
+            <h2 class="section-headline">Keine Beratung. Wir bauen funktionierende Systeme.</h2>
+            
+            <div class="systeme-grid">
+                <!-- KI Telefonassistent -->
+                <div class="system-card" data-system="phone">
+                    <div class="system-visual">
+                        <div class="phone-system">
+                            <div class="phone-icon">📞</div>
+                            <div class="waveform">
+                                <div class="waveform-bar"></div>
+                                <div class="waveform-bar"></div>
+                                <div class="waveform-bar"></div>
+                                <div class="waveform-bar"></div>
+                                <div class="waveform-bar"></div>
+                                <div class="waveform-bar"></div>
+                                <div class="waveform-bar"></div>
+                            </div>
+                            <div class="ki-processor">🤖</div>
+                            <div class="crm-output">📊</div>
+                        </div>
+                    </div>
+                    <h3>KI Telefonassistent</h3>
+                    <div class="system-details">
+                        <div class="what-it-does">
+                            <h4>Was es tut:</h4>
+                            <ul>
+                                <li>Annahme eingehender Anrufe</li>
+                                <li>Verständnis der Kundenanfrage</li>
+                                <li>Weiterleitung an richtige Abteilung</li>
+                                <li>Dokumentation im CRM</li>
+                            </ul>
+                        </div>
+                        <div class="result">
+                            <h4>Ergebnis:</h4>
+                            <ul>
+                                <li>-52% unnötige Anrufe</li>
+                                <li>24/7 Erreichbarkeit</li>
+                                <li>Qualifiziertere Weiterleitungen</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- KI Chat -->
+                <div class="system-card" data-system="chat">
+                    <div class="system-visual">
+                        <div class="chat-system">
+                            <div class="website-input">🌐</div>
+                            <div class="flow-arrow">→</div>
+                            <div class="ki-processor">🤖</div>
+                            <div class="flow-arrow">→</div>
+                            <div class="category-output">📋</div>
+                            <div class="flow-arrow">→</div>
+                            <div class="human-output">👤</div>
+                        </div>
+                    </div>
+                    <h3>KI Chat</h3>
+                    <div class="system-details">
+                        <div class="what-it-does">
+                            <h4>Was es tut:</h4>
+                            <ul>
+                                <li>Website-Besucher verstehen</li>
+                                <li>Kategorisierung der Anfragen</li>
+                                <li>Strukturierte Datenerfassung</li>
+                                <li>Übergabe an menschliche Mitarbeiter</li>
+                            </ul>
+                        </div>
+                        <div class="result">
+                            <h4>Ergebnis:</h4>
+                            <ul>
+                                <li>+38% Konversionsrate</li>
+                                <li>0 Wartezeit</li>
+                                <li>Strukturierte Leads</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Interne KI -->
+                <div class="system-card" data-system="internal">
+                    <div class="system-visual">
+                        <div class="internal-system">
+                            <div class="search-input">🔍</div>
+                            <div class="flow-arrow">→</div>
+                            <div class="documents-cloud">💬</div>
+                            <div class="flow-arrow">→</div>
+                            <div class="ki-processor">🤖</div>
+                            <div class="flow-arrow">→</div>
+                            <div class="answer-output">💡</div>
+                        </div>
+                    </div>
+                    <h3>Interne KI</h3>
+                    <div class="system-details">
+                        <div class="what-it-does">
+                            <h4>Was es tut:</h4>
+                            <ul>
+                                <li>Interne Dokumente analysieren</li>
+                                <li>Mitarbeiterfragen beantworten</li>
+                                <li>Wissen zentralisieren</li>
+                                <li>Training neuer Mitarbeiter</li>
+                            </ul>
+                        </div>
+                        <div class="result">
+                            <h4>Ergebnis:</h4>
+                            <ul>
+                                <li>-67% Suchzeit</li>
+                                <li>100% Wissensverfügbarkeit</li>
+                                <li>Schnellere Einarbeitung</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Nicht für jeden Section -->
+    <section class="qualification-section" id="qualification">
+        <div class="container">
+            <div class="qualification-grid">
+                <div class="qual-left">
+                    <h3>Nicht geeignet wenn...</h3>
+                    <ul class="qual-list negative">
+                        <li class="qual-item">
+                            <div class="qual-icon chaos">📋</div>
+                            <span>Nur eine "schöne Website" gewollt</span>
+                        </li>
+                        <li class="qual-item">
+                            <div class="qual-icon chaos">📋</div>
+                            <span>Keine digitalen Prozesse vorhanden</span>
+                        </li>
+                        <li class="qual-item">
+                            <div class="qual-icon chaos">📋</div>
+                            <span>Technik-Aversion im Team</span>
+                        </li>
+                        <li class="qual-item">
+                            <div class="qual-icon chaos">📋</div>
+                            <span>Keine Notwendigkeit zur Skalierung</span>
+                        </li>
+                    </ul>
+                </div>
                 
-                <div class="service-card">
-                    <div class="service-icon">
-                        🌐
-                    </div>
-                    <h3>Webentwicklung</h3>
-                    <p>Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.</p>
-                </div>
-
-                <div class="service-card">
-                    <div class="service-icon">
-                        🤖
-                    </div>
-                    <h3>KI Integration</h3>
-                    <p>Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.</p>
-                </div>
-
-                <div class="service-card">
-                    <div class="service-icon">
-                        ⚙️
-                    </div>
-                    <h3>Automatisierung</h3>
-                    <p>Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.</p>
-                </div>
-            </div>
-        </section>
-
-        <section class="info-section">
-            <div class="info-container">
-                <div class="info-content">
-                    <h2>Warum Profice?</h2>
-                    <p>Wir verbinden technologische Exzellenz mit tiefgreifendem Geschäftsverständnis. Unser Ziel ist nicht nur die Lieferung von Software, sondern die Schaffung von echtem Mehrwert für Ihr Unternehmen.</p>
-                    <ul class="info-list">
-                        <li>Individuelle Beratung</li>
-                        <li>Transparente Prozesse</li>
-                        <li>Zukunftssichere Technologien</li>
+                <div class="qual-right">
+                    <h3>Sehr sinnvoll wenn...</h3>
+                    <ul class="qual-list positive">
+                        <li class="qual-item">
+                            <div class="qual-icon check">✓</div>
+                            <span>Hoher Anrufaufkommen</span>
+                        </li>
+                        <li class="qual-item">
+                            <div class="qual-icon check">✓</div>
+                            <span>Überlasteter Support</span>
+                        </li>
+                        <li class="qual-item">
+                            <div class="qual-icon check">✓</div>
+                            <span>Wachsendes Unternehmen</span>
+                        </li>
+                        <li class="qual-item">
+                            <div class="qual-icon check">✓</div>
+                            <span>Prozessoptimierung gewünscht</span>
+                        </li>
                     </ul>
                 </div>
-                <div class="info-image-placeholder">
-                     <span>[Bild: Team bei der Arbeit]</span>
-                </div>
-            </div>
-        </section>
-
-    </main>
-
-    <!-- Cookie Consent Banner -->
-    <div id="cookieBanner" class="cookie-banner" role="dialog" aria-labelledby="cookieTitle" aria-describedby="cookieDescription">
-        <div class="cookie-banner-content">
-            <div class="cookie-text">
-                <h3 id="cookieTitle">Cookie-Einstellungen</h3>
-                <p id="cookieDescription">
-                    Wir verwenden Cookies, um Ihre Erfahrung zu verbessern und unsere Website zu analysieren. 
-                    Durch die Nutzung unserer Website stimmen Sie unserem <a href="#privacy">Datenschutz</a> zu.
-                </p>
-            </div>
-            <div class="cookie-buttons">
-                <button id="cookieAcceptAll" class="cookie-btn cookie-btn-primary">Alle akzeptieren</button>
-                <button id="cookieRejectAll" class="cookie-btn cookie-btn-secondary">Alle ablehnen</button>
-                <button id="cookieSettings" class="cookie-btn cookie-btn-settings">Einstellungen</button>
             </div>
         </div>
-    </div>
+    </section>
 
-    <!-- Cookie Settings Modal -->
-    <div id="cookieModal" class="cookie-modal" role="dialog" aria-labelledby="cookieModalTitle" aria-modal="true">
-        <div class="cookie-modal-content">
-            <div class="cookie-modal-header">
-                <h2 id="cookieModalTitle">Cookie-Einstellungen</h2>
-                <button id="cookieModalClose" class="cookie-modal-close" aria-label="Schließen">&times;</button>
-            </div>
+    <!-- 3 Schritte Section -->
+    <section class="process-section" id="process">
+        <div class="container">
+            <h2 class="section-headline">In 3 Schritten zum digitalen Mitarbeiter.</h2>
             
-            <div class="cookie-option">
-                <div class="cookie-option-header">
-                    <h3 class="cookie-option-title">Notwendige Cookies</h3>
-                    <div id="cookie-toggle-necessary" class="cookie-toggle active disabled" role="switch" aria-checked="true" aria-disabled="true">
-                        <div class="cookie-toggle-slider"></div>
-                    </div>
+            <div class="process-line" id="processLine">
+                <div class="process-step active" data-step="1">
+                    <div class="step-circle">1</div>
+                    <div class="step-label">Analyse</div>
                 </div>
-                <p class="cookie-option-description">
-                    Diese Cookies sind für die Funktionsweise der Website unerlässlich und können nicht in Ihren Browsern deaktiviert werden.
-                </p>
-            </div>
-            
-            <div class="cookie-option">
-                <div class="cookie-option-header">
-                    <h3 class="cookie-option-title">Analyse-Cookies</h3>
-                    <div id="cookie-toggle-analytics" class="cookie-toggle" role="switch" aria-checked="false">
-                        <div class="cookie-toggle-slider"></div>
-                    </div>
+                <div class="process-connector" id="connector1"></div>
+                <div class="process-step" data-step="2">
+                    <div class="step-circle">2</div>
+                    <div class="step-label">Bau</div>
                 </div>
-                <p class="cookie-option-description">
-                    Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren, indem sie Informationen anonym sammeln und melden.
-                </p>
-            </div>
-            
-            <div class="cookie-option">
-                <div class="cookie-option-header">
-                    <h3 class="cookie-option-title">Marketing-Cookies</h3>
-                    <div id="cookie-toggle-marketing" class="cookie-toggle" role="switch" aria-checked="false">
-                        <div class="cookie-toggle-slider"></div>
-                    </div>
+                <div class="process-connector" id="connector2"></div>
+                <div class="process-step" data-step="3">
+                    <div class="step-circle">3</div>
+                    <div class="step-label">Betrieb</div>
                 </div>
-                <p class="cookie-option-description">
-                    Diese Cookies werden verwendet, um Besucher über Websites hinweg zu verfolgen, um relevante Anzeigen zu zeigen.
-                </p>
             </div>
             
-            <div class="cookie-modal-footer">
-                <button id="cookieSavePreferences" class="cookie-btn cookie-btn-primary">Einstellungen speichern</button>
+            <div class="process-details">
+                <div class="step-detail" data-step-detail="1">
+                    <h3>1. Analyse</h3>
+                    <p>Wir verstehen eure aktuellen Prozesse, identifizieren Automatisierungspotenziale und definieren klare Ziele.</p>
+                </div>
+                <div class="step-detail" data-step-detail="2">
+                    <h3>2. Bau</h3>
+                    <p>Entwicklung der KI-Systeme, Integration in bestehende Tools und umfangreiche Tests.</p>
+                </div>
+                <div class="step-detail" data-step-detail="3">
+                    <h3>3. Betrieb</h3>
+                    <p>Go-live, Monitoring, kontinuierliche Optimierung und Schulung eures Teams.</p>
+                </div>
             </div>
         </div>
-    </div>
+    </section>
 
+    <!-- Ergebnisse Section -->
+    <section class="results-section" id="results">
+        <div class="container">
+            <h2 class="section-headline">Messbare Ergebnisse</h2>
+            
+            <div class="results-grid">
+                <div class="data-card glass-morphism">
+                    <div class="card-metric">-52%</div>
+                    <div class="card-label">Unnötige Anrufe</div>
+                    <div class="card-detail">Durch KI-Vorfilterung</div>
+                </div>
+                
+                <div class="data-card glass-morphism">
+                    <div class="card-metric">24/7</div>
+                    <div class="card-label">Automatisierte Antworten</div>
+                    <div class="card-detail">Ohne Ausfallzeiten</div>
+                </div>
+                
+                <div class="data-card glass-morphism">
+                    <div class="card-metric">+38%</div>
+                    <div class="card-label">Konversionsrate</div>
+                    <div class="card-detail">Durch sofortige Reaktion</div>
+                </div>
+                
+                <div class="data-card glass-morphism">
+                    <div class="card-metric">-67%</div>
+                    <div class="card-label">Suchzeit intern</div>
+                    <div class="card-detail">Durch Wissens-KI</div>
+                </div>
+                
+                <div class="data-card glass-morphism">
+                    <div class="card-metric">0</div>
+                    <div class="card-label">Wartezeit</div>
+                    <div class="card-detail">Sofortige Verfügbarkeit</div>
+                </div>
+                
+                <div class="data-card glass-morphism">
+                    <div class="card-metric">100%</div>
+                    <div class="card-label">Wissensverfügbarkeit</div>
+                    <div class="card-detail">Im gesamten Team</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Interaction Section -->
+    <section class="interaction-section" id="interaction">
+        <div class="container">
+            <h2 class="section-headline">Sprich nicht mit uns. Sprich mit unserem System.</h2>
+            
+            <div class="interaction-cards">
+                <div class="interaction-card" id="phoneInteraction">
+                    <div class="card-visual">
+                        <div class="microphone">
+                            <div class="mic-icon">🎤</div>
+                            <div class="pulse-ring"></div>
+                        </div>
+                    </div>
+                    <h3>KI Telefon</h3>
+                    <p>Teste unseren KI-Telefonassistenten jetzt</p>
+                    <button class="interaction-btn primary">Jetzt anrufen</button>
+                </div>
+                
+                <div class="interaction-card" id="chatInteraction">
+                    <h3>KI Chat</h3>
+                    <p>Starte eine Konversation mit unserer KI</p>
+                    <div class="card-visual">
+                        <div class="chat-window">
+                            <div class="chat-header">KI Support</div>
+                            <div class="chat-messages">
+                            </div>
+                            <div class="chat-input-container">
+                                <input type="text" class="chat-input" placeholder="Ihre Nachricht..." maxlength="500">
+                                <button class="chat-send" type="button">
+                                    <img src="images/icons/iconography-02.png" alt="Senden">
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="#systeme" class="footer-link">KI Systeme</a>
+                        <a href="#interaction" class="footer-link">Demo</a>
+                        <a href="sites/offers.html" class="footer-link">Kontakt</a>
+                        <a href="sites/leads.html" class="footer-link">Dashboard</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="#" class="footer-link">Datenschutzerklärung</a>
+                        <a href="#" class="footer-link">Impressum</a>
+                        <a href="#" class="footer-link">AGB</a>
+                        <a href="#" class="footer-link">Cookie-Richtlinie</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>
+                            <span>+49 123 456789</span>
+                        </div>
+                        <div class="contact-item">
+                            <span class="contact-icon">✉️</span>
+                            <span>info@profice.de</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">
+                                <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">
+                                <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>
+                    <div class="footer-bottom-links">
+                        <a href="#" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="#" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Optimized script loading -->
     <script src="scripts/script.js" defer></script>
-    <script src="scripts/cookie-consent.js" defer></script>
+    <script src="scripts/tech-onepager.js" defer></script>
     <script src="scripts/cursor.js" defer></script>
     <script src="scripts/scroll-header.js" defer></script>
+    <script src="scripts/chat.js" defer></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Profice WebSite/scripts/add/send.php b/Profice WebSite/scripts/add/send.php
index 8a4d7cb..963edbc 100644
--- a/Profice WebSite/scripts/add/send.php	
+++ b/Profice WebSite/scripts/add/send.php	
@@ -48,8 +48,8 @@ define('USE_PRODUCTION', false); // Use test webhook for debugging
 define('DEBUG_MODE', true); // Enable debug 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_TEST', 'https://n8n.profice.de/webhook-test/8658d57e-2348-4046-90a5-7551708f8d50');
+define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/8658d57e-2348-4046-90a5-7551708f8d50');
 define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST);
 
 // Google Analytics
@@ -492,30 +492,6 @@ function handleContactForm($data) {
     }
 }
 
-function handleLoginForm($data) {
-    $required = ['email', 'password'];
-    foreach ($required as $field) {
-        if (empty($data[$field])) {
-            sendResponse(false, "Pflichtfeld fehlt: {$field}", null, 400);
-        }
-    }
-
-    // Add your login logic here
-    sendResponse(true, 'Login erfolgreich');
-}
-
-function handleRegisterForm($data) {
-    $required = ['name', 'email', 'password'];
-    foreach ($required as $field) {
-        if (empty($data[$field])) {
-            sendResponse(false, "Pflichtfeld fehlt: {$field}", null, 400);
-        }
-    }
-
-    // Add your registration logic here
-    sendResponse(true, 'Registrierung erfolgreich');
-}
-
 function handleLeadForm($data) {
     // Handle lead form submissions
     $leadId = storeLead($data);
@@ -549,6 +525,49 @@ function handleGetTrackingConfig($data) {
     sendResponse(true, 'Tracking-Konfiguration', $config);
 }
 
+function handleChatMessage($data) {
+    $message = sanitizeInput($data['message'] ?? '');
+    $sessionId = sanitizeInput($data['session_id'] ?? uniqid('chat_'));
+    
+    if (empty($message)) {
+        sendResponse(false, 'Nachricht darf nicht leer sein', null, 400);
+    }
+    
+    $chatData = [
+        'type' => 'chat_message',
+        'session_id' => $sessionId,
+        'message' => $message,
+        'timestamp' => date('c'),
+        'source' => 'website_chat',
+        'ip_address' => getClientIP(),
+        'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? ''
+    ];
+    
+    // Send to webhook
+    $webhookResult = sendToWebhook($chatData);
+    
+    $debugData = DEBUG_MODE ? [
+        'session_id' => $sessionId,
+        'webhook_result' => $webhookResult,
+        'webhook_url' => WEBHOOK_URL
+    ] : null;
+    
+    if ($webhookResult['success']) {
+        // Try to parse response from webhook
+        $response = json_decode($webhookResult['response'], true);
+        $aiResponse = $response['message'] ?? 'Vielen Dank für Ihre Nachricht. Ich melde mich so schnell wie möglich bei Ihnen.';
+        
+        sendResponse(true, 'Nachricht gesendet', array_merge($debugData, [
+            'session_id' => $sessionId,
+            'ai_response' => $aiResponse,
+            'timestamp' => date('c')
+        ]));
+    } else {
+        error_log('Chat webhook failed: ' . json_encode($webhookResult));
+        sendResponse(false, 'Chat-Service derzeit nicht verfügbar. Bitte versuchen Sie es später erneut.', $debugData, 503);
+    }
+}
+
 function handleTrackEvent($data) {
     $eventName = $data['event_name'] ?? '';
     $eventData = $data['event_data'] ?? [];
@@ -605,12 +624,6 @@ try {
         case 'contact':
             handleContactForm($data);
             break;
-        case 'login':
-            handleLoginForm($data);
-            break;
-        case 'register':
-            handleRegisterForm($data);
-            break;
         case 'lead':
             handleLeadForm($data);
             break;
@@ -626,6 +639,9 @@ try {
         case 'track_event':
             handleTrackEvent($data);
             break;
+        case 'chat':
+            handleChatMessage($data);
+            break;
         default:
             sendResponse(false, 'Ungültiger Anfragetyp', null, 400);
     }
diff --git a/Profice WebSite/scripts/chat.js b/Profice WebSite/scripts/chat.js
new file mode 100644
index 0000000..4c9dc81
--- /dev/null
+++ b/Profice WebSite/scripts/chat.js	
@@ -0,0 +1,429 @@
+/**
+ * KI Chat Widget - Functional Chat Interface
+ * Integrates with existing chat widget in KI Chat card
+ * Connects to N8N webhook via send.php
+ */
+
+class KIChat {
+    constructor() {
+        this.sessionId = this.generateSessionId();
+        this.isTyping = false;
+        this.messages = [];
+        
+        this.init();
+    }
+    
+    init() {
+        this.bindEvents();
+        this.loadChatHistory();
+        this.setupExistingChat();
+    }
+    
+    generateSessionId() {
+        return 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+    
+    bindEvents() {
+        // Chat button clicks
+        const chatBtn = document.getElementById('chatBtn');
+        const interactionBtn = document.querySelector('#chatInteraction .interaction-btn');
+        
+        if (chatBtn) {
+            chatBtn.addEventListener('click', () => this.scrollToChat());
+        }
+        
+        if (interactionBtn) {
+            interactionBtn.addEventListener('click', () => this.focusInput());
+        }
+        
+        // Send message on Enter in existing chat
+        const existingInput = document.querySelector('#chatInteraction .chat-input');
+        if (existingInput) {
+            existingInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    this.sendMessage();
+                }
+            });
+        }
+        
+        // Send button click
+        const sendBtn = document.querySelector('#chatInteraction .chat-send');
+        if (sendBtn) {
+            sendBtn.addEventListener('click', () => this.sendMessage());
+        }
+    }
+    
+    setupExistingChat() {
+        const chatMessages = document.querySelector('#chatInteraction .chat-messages');
+        const chatInput = document.querySelector('#chatInteraction .chat-input');
+        const sendBtn = document.querySelector('#chatInteraction .chat-send');
+        
+        // Add click event listener to the send button
+        if (sendBtn) {
+            sendBtn.addEventListener('click', () => this.sendMessage());
+        }
+        
+        // Add welcome message
+        if (this.messages.length === 0 && chatMessages) {
+            this.addMessage('ki', 'Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen helfen?');
+        }
+        
+        this.updateChatDisplay();
+    }
+    
+    scrollToChat() {
+        const chatInteraction = document.getElementById('chatInteraction');
+        if (chatInteraction) {
+            chatInteraction.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            setTimeout(() => this.focusInput(), 500);
+        }
+    }
+    
+    focusInput() {
+        const inputField = document.querySelector('#chatInteraction .chat-input');
+        if (inputField) {
+            inputField.focus();
+        }
+    }
+    
+    addMessage(sender, text, timestamp = Date.now()) {
+        this.messages.push({
+            sender: sender,
+            text: text,
+            timestamp: timestamp
+        });
+        
+        // Keep only last 50 messages
+        if (this.messages.length > 50) {
+            this.messages = this.messages.slice(-50);
+        }
+        
+        this.saveChatHistory();
+        this.updateChatDisplay();
+    }
+    
+    updateChatDisplay() {
+        const chatMessages = document.querySelector('#chatInteraction .chat-messages');
+        if (chatMessages) {
+            // Clear existing messages except typing indicator
+            const typingIndicator = chatMessages.querySelector('.typing-indicator');
+            chatMessages.innerHTML = '';
+            
+            // Add all messages
+            this.messages.forEach(msg => {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `chat-message ${msg.sender}`;
+                messageDiv.innerHTML = `
+                    <div class="message-content">${this.escapeHtml(msg.text)}</div>
+                    <div class="message-time">${this.formatTime(msg.timestamp)}</div>
+                `;
+                chatMessages.appendChild(messageDiv);
+            });
+            
+            // Re-add typing indicator if needed
+            if (typingIndicator && this.isTyping) {
+                chatMessages.appendChild(typingIndicator);
+            }
+            
+            this.scrollToBottom();
+        }
+    }
+    
+    async sendMessage() {
+        const inputField = document.querySelector('#chatInteraction .chat-input');
+        const message = inputField?.value?.trim();
+        
+        if (!message || this.isTyping) return;
+        
+        // Add user message
+        this.addMessage('user', message);
+        inputField.value = '';
+        
+        // Show typing indicator
+        this.showTypingIndicator();
+        this.isTyping = true;
+        
+        try {
+            const response = await fetch('scripts/add/send.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    type: 'chat',
+                    message: message,
+                    session_id: this.sessionId
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                this.addMessage('ki', data.data.ai_response, data.data.timestamp);
+            } else {
+                this.addMessage('ki', 'Entschuldigung, es gab ein Problem. Bitte versuchen Sie es später erneut.');
+            }
+        } catch (error) {
+            console.error('Chat error:', error);
+            this.addMessage('ki', 'Verbindung zum Server fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.');
+        } finally {
+            this.hideTypingIndicator();
+            this.isTyping = false;
+        }
+    }
+    
+    showTypingIndicator() {
+        const chatMessages = document.querySelector('#chatInteraction .chat-messages');
+        if (chatMessages && !chatMessages.querySelector('.typing-indicator')) {
+            const typingHTML = `
+                <div class="chat-message ki typing">
+                    <div class="message-content">
+                        <div class="typing-indicator">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            chatMessages.insertAdjacentHTML('beforeend', typingHTML);
+            this.scrollToBottom();
+        }
+    }
+    
+    hideTypingIndicator() {
+        const typingIndicator = document.querySelector('#chatInteraction .typing');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+    
+    scrollToBottom() {
+        const chatMessages = document.querySelector('#chatInteraction .chat-messages');
+        if (chatMessages) {
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+    }
+    
+    saveChatHistory() {
+        try {
+            localStorage.setItem(`ki_chat_${this.sessionId}`, JSON.stringify(this.messages));
+        } catch (e) {
+            console.warn('Could not save chat history:', e);
+        }
+    }
+    
+    loadChatHistory() {
+        try {
+            const saved = localStorage.getItem(`ki_chat_${this.sessionId}`);
+            if (saved) {
+                this.messages = JSON.parse(saved);
+            }
+        } catch (e) {
+            console.warn('Could not load chat history:', e);
+        }
+    }
+    
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString('de-DE', { 
+            hour: '2-digit', 
+            minute: '2-digit' 
+        });
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Initialize chat when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.kiChat = new KIChat();
+});
+
+// Add CSS for enhanced chat functionality
+const chatStyles = `
+#chatInteraction {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+#chatInteraction h3 {
+    margin: 0;
+    font-size: 24px;
+    color: var(--primary-dark);
+    text-align: center;
+}
+
+#chatInteraction p {
+    margin: 0;
+    color: var(--primary-mid);
+    text-align: center;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+#chatInteraction .card-visual {
+    height: 400px;
+}
+
+#chatInteraction .chat-window {
+    width: 100%;
+    height: 400px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(79, 71, 71, 0.1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#chatInteraction .chat-header {
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    color: white;
+    padding: 15px 20px;
+    font-weight: 600;
+    font-size: 16px;
+}
+
+#chatInteraction .chat-messages {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto !important;
+    background: transparent;
+    max-height: 300px !important;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+#chatInteraction .chat-message {
+    display: flex;
+    width: 100%;
+    background: transparent;
+}
+
+#chatInteraction .chat-message.user {
+    justify-content: flex-end;
+}
+
+#chatInteraction .chat-message.ki {
+    justify-content: flex-start;
+}
+
+#chatInteraction .message-content {
+    background: transparent;
+    padding: 12px 16px;
+    border-radius: 16px;
+    box-shadow: none;
+    word-wrap: break-word;
+    line-height: 1.4;
+    max-width: 70%;
+    display: inline-block;
+    text-align: left;
+}
+
+#chatInteraction .chat-message.user .message-content {
+    background: var(--accent-green);
+    color: white;
+}
+
+#chatInteraction .chat-message.ki .message-content {
+    background: var(--accent-green);
+    color: white;
+}
+
+#chatInteraction .message-time {
+    font-size: 10px;
+    color: #666;
+    margin-top: 4px;
+    padding: 0 16px;
+}
+
+#chatInteraction .chat-message.ki .message-time {
+    text-align: left;
+}
+
+#chatInteraction .chat-message.user .message-time {
+    text-align: right;
+}
+
+#chatInteraction .chat-input-container .interaction-btn {
+    flex-shrink: 0;
+    padding: 12px 20px;
+    font-size: 14px;
+}
+
+#chatInteraction .chat-send {
+    background: var(--accent-teal);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    padding: 0;
+    margin-left: 8px;
+    box-shadow: 0 2px 8px rgba(38, 166, 154, 0.3);
+}
+
+#chatInteraction .chat-send:hover {
+    background: #1e8e82;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4);
+}
+
+#chatInteraction .chat-send:active {
+    transform: scale(0.95);
+}
+
+#chatInteraction .chat-send img {
+    width: 22px;
+    height: 22px;
+    filter: brightness(0) invert(1);
+    object-fit: contain;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    #chatInteraction .card-visual {
+        min-height: 350px;
+    }
+    
+    #chatInteraction .chat-messages {
+        min-height: 200px;
+        padding: 15px;
+    }
+    
+    #chatInteraction .chat-input-container {
+        padding: 12px 15px;
+    }
+    
+    #chatInteraction .chat-input {
+        padding: 10px 14px;
+    }
+    
+    #chatInteraction .chat-send {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+}
+`;
+
+// Inject CSS
+const styleSheet = document.createElement('style');
+styleSheet.textContent = chatStyles;
+document.head.appendChild(styleSheet);
diff --git a/Profice WebSite/scripts/cookie-consent.js b/Profice WebSite/scripts/cookie-consent.js
deleted file mode 100644
index 6f7177d..0000000
--- a/Profice WebSite/scripts/cookie-consent.js	
+++ /dev/null
@@ -1,423 +0,0 @@
-/**
- * Cookie Consent Management System
- * All sensitive data (tracking IDs, URLs) are loaded from server-side PHP
- * Includes fallback for local file access (no server)
- * 
- * @version 2.1.0
- */
-document.addEventListener('DOMContentLoaded', function() {
-    
-    // ==========================================
-    // CONFIGURATION
-    // ==========================================
-    
-    const cookieCategories = ['necessary', 'analytics', 'marketing'];
-    const API_ENDPOINT = 'scripts/add/send.php';
-    
-    // Detect if running from file:// protocol (no server)
-    const isLocalFile = window.location.protocol === 'file:';
-    
-    let consentState = {
-        hasConsented: false,
-        preferences: {}
-    };
-    
-    let previousPreferences = {};
-    let trackingScripts = {};
-
-    // ==========================================
-    // DATALAYER INTEGRATION
-    // ==========================================
-    
-    window.dataLayer = window.dataLayer || [];
-    
-    function pushConsentToDataLayer(preferences) {
-        window.dataLayer.push({
-            'event': 'consent_update',
-            'consent': {
-                'analytics_storage': preferences.analytics ? 'granted' : 'denied',
-                'ad_storage': preferences.marketing ? 'granted' : 'denied',
-                'functionality_storage': preferences.necessary ? 'granted' : 'denied',
-                'personalization_storage': preferences.marketing ? 'granted' : 'denied',
-                'security_storage': 'granted'
-            }
-        });
-    }
-    
-    function setDefaultConsent() {
-        window.dataLayer.push({
-            'event': 'consent_default',
-            'consent': {
-                'analytics_storage': 'denied',
-                'ad_storage': 'denied',
-                'functionality_storage': 'granted',
-                'personalization_storage': 'denied',
-                'security_storage': 'granted',
-                'wait_for_update': 500
-            }
-        });
-    }
-
-    // ==========================================
-    // STORAGE (API + LOCALSTORAGE FALLBACK)
-    // ==========================================
-    
-    async function saveConsentToStorage(preferences) {
-        // Always save to localStorage as backup
-        const consentData = {
-            hasConsented: true,
-            preferences: preferences,
-            timestamp: new Date().toISOString()
-        };
-        localStorage.setItem('cookieConsent', JSON.stringify(consentData));
-        
-        // Try API if not local file
-        if (!isLocalFile) {
-            try {
-                const response = await fetch(API_ENDPOINT, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ type: 'cookie_consent', preferences })
-                });
-                const result = await response.json();
-                if (result.success && result.data && result.data.scripts) {
-                    trackingScripts = result.data.scripts;
-                }
-                return result.success;
-            } catch (e) {
-                // API failed, localStorage already saved
-                return false;
-            }
-        }
-        return true;
-    }
-    
-    async function getConsentFromStorage() {
-        // Try localStorage first (faster)
-        const localConsent = localStorage.getItem('cookieConsent');
-        if (localConsent) {
-            try {
-                return JSON.parse(localConsent);
-            } catch (e) {
-                localStorage.removeItem('cookieConsent');
-            }
-        }
-        
-        // Try API if not local file
-        if (!isLocalFile) {
-            try {
-                const response = await fetch(API_ENDPOINT, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ type: 'get_cookie_consent' })
-                });
-                const result = await response.json();
-                if (result.success && result.data) {
-                    if (result.data.scripts) {
-                        trackingScripts = result.data.scripts;
-                    }
-                    // Cache in localStorage
-                    localStorage.setItem('cookieConsent', JSON.stringify(result.data));
-                    return result.data;
-                }
-            } catch (e) {
-                // API unavailable
-            }
-        }
-        
-        return null;
-    }
-
-    // ==========================================
-    // SCRIPT LOADING
-    // ==========================================
-    
-    function loadTrackingScripts() {
-        if (!trackingScripts || Object.keys(trackingScripts).length === 0) return;
-
-        if (trackingScripts.ga && consentState.preferences.analytics) {
-            loadGoogleAnalytics(trackingScripts.ga);
-        }
-        if (trackingScripts.gtm && consentState.preferences.analytics) {
-            loadGTM(trackingScripts.gtm);
-        }
-        if (trackingScripts.fb && consentState.preferences.marketing) {
-            loadFacebookPixel(trackingScripts.fb);
-        }
-        if (trackingScripts.gads && consentState.preferences.marketing) {
-            loadGoogleAds(trackingScripts.gads);
-        }
-        if (trackingScripts.linkedin && consentState.preferences.marketing) {
-            loadLinkedIn(trackingScripts.linkedin);
-        }
-    }
-    
-    function loadScript(src, callback) {
-        const script = document.createElement('script');
-        script.src = src;
-        script.async = true;
-        if (callback) script.onload = callback;
-        document.head.appendChild(script);
-    }
-    
-    function loadGoogleAnalytics(config) {
-        if (!config.src || !config.config || !config.config.id) return;
-        loadScript(config.src, function() {
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            window.gtag = gtag;
-            gtag('js', new Date());
-            gtag('config', config.config.id);
-        });
-    }
-    
-    function loadGTM(config) {
-        if (!config.id) return;
-        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer',config.id);
-    }
-    
-    function loadFacebookPixel(config) {
-        if (!config.id) return;
-        !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-        n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
-        n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
-        t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
-        document,'script','https://connect.facebook.net/en_US/fbevents.js');
-        fbq('init', config.id);
-        fbq('track', 'PageView');
-    }
-    
-    function loadGoogleAds(config) {
-        if (!config.id) return;
-        loadScript('https://www.googletagmanager.com/gtag/js?id=' + config.id, function() {
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', config.id);
-        });
-    }
-    
-    function loadLinkedIn(config) {
-        if (!config.id) return;
-        window._linkedin_partner_id = config.id;
-        window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
-        window._linkedin_data_partner_ids.push(config.id);
-        loadScript('https://snap.licdn.com/li.lms-analytics/insight.min.js');
-    }
-
-    // ==========================================
-    // COOKIE DELETION
-    // ==========================================
-    
-    const cookiePatterns = {
-        analytics: ['_ga', '_gid', '_gat', '__utma', '__utmb', '__utmc', '__utmz'],
-        marketing: ['_fbp', '_fbc', 'fr', '_gcl_au', '_gcl_aw', 'IDE', 'DSID', 'NID']
-    };
-    
-    function deleteCookie(name) {
-        const paths = ['/', window.location.pathname];
-        const domains = ['', window.location.hostname, '.' + window.location.hostname];
-        
-        paths.forEach(path => {
-            domains.forEach(domain => {
-                document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}${domain ? '; domain=' + domain : ''}`;
-            });
-        });
-    }
-    
-    function deleteCookiesForCategory(category) {
-        const patterns = cookiePatterns[category] || [];
-        const allCookies = document.cookie.split(';');
-        
-        allCookies.forEach(cookie => {
-            const cookieName = cookie.split('=')[0].trim();
-            patterns.forEach(pattern => {
-                if (cookieName.startsWith(pattern)) {
-                    deleteCookie(cookieName);
-                }
-            });
-        });
-    }
-    
-    function handlePreferenceChanges(newPreferences) {
-        Object.keys(cookiePatterns).forEach(category => {
-            if (previousPreferences[category] === true && newPreferences[category] === false) {
-                deleteCookiesForCategory(category);
-                window.dataLayer.push({ 'event': 'consent_revoked', 'consent_category': category });
-            }
-        });
-        previousPreferences = { ...newPreferences };
-    }
-
-    // ==========================================
-    // DOM ELEMENTS
-    // ==========================================
-    
-    const cookieBanner = document.getElementById('cookieBanner');
-    const cookieModal = document.getElementById('cookieModal');
-    const acceptAllBtn = document.getElementById('cookieAcceptAll');
-    const rejectAllBtn = document.getElementById('cookieRejectAll');
-    const settingsBtn = document.getElementById('cookieSettings');
-    const modalCloseBtn = document.getElementById('cookieModalClose');
-    const savePreferencesBtn = document.getElementById('cookieSavePreferences');
-
-    // ==========================================
-    // CORE FUNCTIONS
-    // ==========================================
-
-    async function initCookieConsent() {
-        setDefaultConsent();
-        
-        const savedConsent = await getConsentFromStorage();
-        
-        if (savedConsent && savedConsent.hasConsented) {
-            consentState = {
-                hasConsented: true,
-                preferences: savedConsent.preferences || {}
-            };
-            previousPreferences = { ...consentState.preferences };
-            applyConsentPreferences();
-            return;
-        }
-
-        // Show banner after short delay
-        setTimeout(() => {
-            if (cookieBanner) cookieBanner.classList.add('show');
-        }, 500);
-    }
-
-    function applyConsentPreferences() {
-        pushConsentToDataLayer(consentState.preferences);
-        loadTrackingScripts();
-        window.dispatchEvent(new CustomEvent('cookieConsentUpdated', { detail: consentState.preferences }));
-    }
-
-    async function saveConsent(preferences) {
-        handlePreferenceChanges(preferences);
-        await saveConsentToStorage(preferences);
-        
-        consentState = {
-            hasConsented: true,
-            preferences: preferences,
-            timestamp: new Date().toISOString()
-        };
-        
-        applyConsentPreferences();
-    }
-
-    function hideBanner() {
-        if (cookieBanner) cookieBanner.classList.remove('show');
-    }
-
-    function showSettingsModal() {
-        if (cookieModal) {
-            cookieModal.classList.add('show');
-            populateSettingsModal();
-        }
-    }
-
-    function hideSettingsModal() {
-        if (cookieModal) cookieModal.classList.remove('show');
-    }
-
-    function populateSettingsModal() {
-        cookieCategories.forEach(key => {
-            const toggle = document.getElementById(`cookie-toggle-${key}`);
-            if (!toggle) return;
-            
-            const isEnabled = consentState.preferences[key] || false;
-            const isRequired = key === 'necessary';
-            
-            if (isRequired) {
-                toggle.classList.add('active', 'disabled');
-                toggle.setAttribute('aria-checked', 'true');
-                toggle.setAttribute('aria-disabled', 'true');
-            } else {
-                toggle.classList.toggle('active', isEnabled);
-                toggle.setAttribute('aria-checked', isEnabled ? 'true' : 'false');
-                toggle.onclick = () => {
-                    toggle.classList.toggle('active');
-                    toggle.setAttribute('aria-checked', toggle.classList.contains('active') ? 'true' : 'false');
-                };
-            }
-        });
-    }
-
-    function getModalPreferences() {
-        const preferences = {};
-        cookieCategories.forEach(key => {
-            const toggle = document.getElementById(`cookie-toggle-${key}`);
-            preferences[key] = key === 'necessary' ? true : (toggle ? toggle.classList.contains('active') : false);
-        });
-        return preferences;
-    }
-
-    // ==========================================
-    // EVENT LISTENERS
-    // ==========================================
-
-    if (acceptAllBtn) {
-        acceptAllBtn.addEventListener('click', () => {
-            const preferences = {};
-            cookieCategories.forEach(key => preferences[key] = true);
-            saveConsent(preferences);
-            hideBanner();
-        });
-    }
-
-    if (rejectAllBtn) {
-        rejectAllBtn.addEventListener('click', () => {
-            saveConsent({ necessary: true, analytics: false, marketing: false });
-            hideBanner();
-        });
-    }
-
-    if (settingsBtn) {
-        settingsBtn.addEventListener('click', showSettingsModal);
-    }
-
-    if (modalCloseBtn) {
-        modalCloseBtn.addEventListener('click', hideSettingsModal);
-    }
-
-    if (savePreferencesBtn) {
-        savePreferencesBtn.addEventListener('click', () => {
-            saveConsent(getModalPreferences());
-            hideSettingsModal();
-            hideBanner();
-        });
-    }
-
-    if (cookieModal) {
-        cookieModal.addEventListener('click', (e) => {
-            if (e.target === cookieModal) hideSettingsModal();
-        });
-    }
-
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && cookieModal && cookieModal.classList.contains('show')) {
-            hideSettingsModal();
-        }
-    });
-
-    // ==========================================
-    // PUBLIC API
-    // ==========================================
-    
-    window.CookieConsent = {
-        getConsent: () => consentState,
-        hasConsent: (category) => consentState.preferences[category] === true,
-        updateConsent: saveConsent,
-        showSettings: showSettingsModal
-    };
-
-    // ==========================================
-    // INITIALIZE
-    // ==========================================
-    
-    initCookieConsent();
-}); 
diff --git a/Profice WebSite/scripts/cursor-simple.js b/Profice WebSite/scripts/cursor-simple.js
new file mode 100644
index 0000000..6460222
--- /dev/null
+++ b/Profice WebSite/scripts/cursor-simple.js	
@@ -0,0 +1,227 @@
+// Simple cursor.js - Fixed version with better line effects
+document.addEventListener("DOMContentLoaded", function () {
+    // Check if touch device
+    if (window.matchMedia("(pointer: coarse)").matches) return;
+
+    const toggleBtn = document.getElementById('cursorToggle');
+    const body = document.body;
+    
+    // Start with system cursor
+    let isCustomCursor = false;
+    
+    function updateCursorState() {
+        if (isCustomCursor) {
+            body.classList.remove('system-cursor');
+            if (toggleBtn) {
+                toggleBtn.classList.add('active');
+            }
+        } else {
+            body.classList.add('system-cursor');
+            if (toggleBtn) {
+                toggleBtn.classList.remove('active');
+            }
+        }
+    }
+    
+    // Initialize cursor state
+    updateCursorState();
+    
+    // Toggle button click handler
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', () => {
+            isCustomCursor = !isCustomCursor;
+            localStorage.setItem('customCursor', isCustomCursor);
+            updateCursorState();
+        });
+    }
+    
+    // Create canvas for custom cursor
+    const canvas = document.createElement("canvas");
+    canvas.id = "custom-cursor";
+    canvas.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 999999;
+        display: none;
+    `;
+    document.body.appendChild(canvas);
+    
+    const ctx = canvas.getContext("2d");
+    const tentacles = [];
+    const mouse = { x: 0, y: 0 };
+    const oldMouse = { x: 0, y: 0 };
+    
+    // Mouse move handler
+    document.addEventListener("mousemove", (e) => {
+        mouse.x = e.clientX;
+        mouse.y = e.clientY;
+        
+        if (isCustomCursor) {
+            canvas.style.display = 'block';
+        } else {
+            canvas.style.display = 'none';
+        }
+    });
+    
+    // Window resize handler
+    window.addEventListener("resize", () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    });
+    
+    // Tentacle class with better line effects
+    class Tentacle {
+        constructor(x, y, targetX, targetY) {
+            this.startX = x;
+            this.startY = y;
+            this.endX = targetX;
+            this.endY = targetY;
+            this.life = 1.0;
+            this.decay = 0.015;
+            this.growth = 0;
+            this.maxLength = 0;
+        }
+        
+        update() {
+            // Grow the tentacle
+            if (this.growth < 1.0) {
+                this.growth += 0.1;
+            }
+            
+            // Calculate actual end point based on growth
+            const currentEndX = this.startX + (this.endX - this.startX) * this.growth;
+            const currentEndY = this.startY + (this.endY - this.startY) * this.growth;
+            
+            this.currentEndX = currentEndX;
+            this.currentEndY = currentEndY;
+            
+            // Decay over time
+            this.life -= this.decay;
+        }
+        
+        draw(ctx) {
+            if (this.life <= 0) return;
+            
+            const opacity = this.life * this.growth;
+            
+            // Draw main line with gradient effect
+            const gradient = ctx.createLinearGradient(
+                this.startX, this.startY, 
+                this.currentEndX, this.currentEndY
+            );
+            gradient.addColorStop(0, `rgba(20, 20, 20, ${opacity * 0.8})`);
+            gradient.addColorStop(1, `rgba(20, 20, 20, ${opacity * 0.2})`);
+            
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = 3 * opacity * this.growth;
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            ctx.moveTo(this.startX, this.startY);
+            ctx.lineTo(this.currentEndX, this.currentEndY);
+            ctx.stroke();
+            
+            // Draw glowing endpoint
+            const glowSize = 6 * opacity;
+            const glowGradient = ctx.createRadialGradient(
+                this.currentEndX, this.currentEndY, 0,
+                this.currentEndX, this.currentEndY, glowSize
+            );
+            glowGradient.addColorStop(0, `rgba(20, 20, 20, ${opacity})`);
+            glowGradient.addColorStop(1, `rgba(20, 20, 20, 0)`);
+            
+            ctx.fillStyle = glowGradient;
+            ctx.beginPath();
+            ctx.arc(this.currentEndX, this.currentEndY, glowSize, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Draw connection dots along the line
+            const dotCount = 3;
+            for (let i = 1; i <= dotCount; i++) {
+                const t = i / (dotCount + 1);
+                const dotX = this.startX + (this.currentEndX - this.startX) * t;
+                const dotY = this.startY + (this.currentEndY - this.startY) * t;
+                const dotOpacity = opacity * (1 - t) * 0.5;
+                
+                ctx.fillStyle = `rgba(20, 20, 20, ${dotOpacity})`;
+                ctx.beginPath();
+                ctx.arc(dotX, dotY, 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+    }
+    
+    // Animation loop
+    function animate() {
+        if (!isCustomCursor) {
+            requestAnimationFrame(animate);
+            return;
+        }
+        
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Create new tentacles on movement
+        const dx = mouse.x - oldMouse.x;
+        const dy = mouse.y - oldMouse.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance > 3) {
+            // Create multiple tentacles in movement direction
+            const angle = Math.atan2(dy, dx);
+            const spread = 0.3;
+            
+            for (let i = 0; i < 4; i++) {
+                const spreadAngle = angle + (Math.random() - 0.5) * spread;
+                const length = 60 + Math.random() * 80;
+                const targetX = mouse.x + Math.cos(spreadAngle) * length;
+                const targetY = mouse.y + Math.sin(spreadAngle) * length;
+                tentacles.push(new Tentacle(mouse.x, mouse.y, targetX, targetY));
+            }
+            
+            oldMouse.x = mouse.x;
+            oldMouse.y = mouse.y;
+        }
+        
+        // Update and draw tentacles
+        for (let i = tentacles.length - 1; i >= 0; i--) {
+            const tentacle = tentacles[i];
+            tentacle.update();
+            if (tentacle.life <= 0) {
+                tentacles.splice(i, 1);
+            } else {
+                tentacle.draw(ctx);
+            }
+        }
+        
+        // Limit tentacle count
+        if (tentacles.length > 15) {
+            tentacles.splice(0, tentacles.length - 15);
+        }
+        
+        // Draw cursor point with glow
+        const cursorGradient = ctx.createRadialGradient(
+            mouse.x, mouse.y, 0,
+            mouse.x, mouse.y, 8
+        );
+        cursorGradient.addColorStop(0, 'rgba(20, 20, 20, 0.8)');
+        cursorGradient.addColorStop(1, 'rgba(20, 20, 20, 0)');
+        
+        ctx.fillStyle = cursorGradient;
+        ctx.beginPath();
+        ctx.arc(mouse.x, mouse.y, 6, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // Add central bright point
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+        ctx.beginPath();
+        ctx.arc(mouse.x, mouse.y, 2, 0, Math.PI * 2);
+        ctx.fill();
+        
+        requestAnimationFrame(animate);
+    }
+    
+    animate();
+});
diff --git a/Profice WebSite/scripts/cursor.js b/Profice WebSite/scripts/cursor.js
index d51d316..503a321 100644
--- a/Profice WebSite/scripts/cursor.js	
+++ b/Profice WebSite/scripts/cursor.js	
@@ -27,27 +27,57 @@ document.addEventListener("DOMContentLoaded", function () {
             body.classList.add('system-cursor');
             if (toggleBtn) {
                 toggleBtn.classList.remove('active');
-                const icon = toggleBtn.querySelector('.cursor-icon');
+                let icon = toggleBtn.querySelector('.cursor-icon');
                 if (icon) {
-                    // Check if we're on a page in the sites/ folder
-                    const currentPath = window.location.pathname;
-                    const isInSitesFolder = currentPath.includes('/sites/');
-                    const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
-                    icon.src = imagePath;
+                    // Replace img with spidy.png if needed
+                    if (icon.tagName !== 'IMG') {
+                        const newIcon = document.createElement('img');
+                        newIcon.className = 'cursor-icon';
+                        newIcon.alt = 'Spider Cursor';
+                        
+                        // Check if we're on a page in the sites/ folder
+                        const currentPath = window.location.pathname;
+                        const isInSitesFolder = currentPath.includes('/sites/');
+                        const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
+                        newIcon.src = imagePath;
+                        
+                        icon.parentNode.replaceChild(newIcon, icon);
+                    } else {
+                        // Update existing img
+                        const currentPath = window.location.pathname;
+                        const isInSitesFolder = currentPath.includes('/sites/');
+                        const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
+                        icon.src = imagePath;
+                    }
                 }
             }
         } else {
-            // Custom cursor (secondary) - show cursor icon
+            // Custom cursor (secondary) - show standard cursor icon
             body.classList.remove('system-cursor');
             if (toggleBtn) {
                 toggleBtn.classList.add('active');
-                const icon = toggleBtn.querySelector('.cursor-icon');
+                let icon = toggleBtn.querySelector('.cursor-icon');
                 if (icon) {
-                    // Check if we're on a page in the sites/ folder
-                    const currentPath = window.location.pathname;
-                    const isInSitesFolder = currentPath.includes('/sites/');
-                    const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';
-                    icon.src = imagePath;
+                    // Replace img with cursor.png if needed
+                    if (icon.tagName !== 'IMG') {
+                        const newIcon = document.createElement('img');
+                        newIcon.className = 'cursor-icon';
+                        newIcon.alt = 'Custom Cursor';
+                        
+                        // Check if we're on a page in the sites/ folder
+                        const currentPath = window.location.pathname;
+                        const isInSitesFolder = currentPath.includes('/sites/');
+                        const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';
+                        newIcon.src = imagePath;
+                        
+                        icon.parentNode.replaceChild(newIcon, icon);
+                    } else {
+                        // Update existing img
+                        const currentPath = window.location.pathname;
+                        const isInSitesFolder = currentPath.includes('/sites/');
+                        const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';
+                        icon.src = imagePath;
+                    }
                 }
             }
         }
@@ -63,29 +93,40 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
-    const canvas = document.createElement("canvas");
-    canvas.id = "venom-cursor";
-    document.body.appendChild(canvas);
+    function initCursor() {
+        const canvas = document.createElement("canvas");
+        canvas.id = "venom-cursor";
+        document.body.appendChild(canvas);
+        
+        const ctx = canvas.getContext("2d");
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        canvas.width = width;
+        canvas.height = height;
+        
+        const tentacles = [];
+        const mouse = { x: 0, y: 0 };
+        const oldMouse = { x: 0, y: 0 };
+        
+        document.addEventListener("mousemove", (e) => {
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+        });
+        
+        window.addEventListener("resize", () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+        
+        return { canvas, ctx, tentacles, mouse, oldMouse };
+    }
     
-    const ctx = canvas.getContext("2d");
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    canvas.width = width;
-    canvas.height = height;
-    
-    const tentacles = [];
-    const mouse = { x: 0, y: 0 };
-    const oldMouse = { x: 0, y: 0 };
-    
-    document.addEventListener("mousemove", (e) => {
-        mouse.x = e.clientX;
-        mouse.y = e.clientY;
-    });
-    
-    window.addEventListener("resize", () => {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-    });
+    const cursorElements = initCursor();
+    const canvas = cursorElements.canvas;
+    const ctx = cursorElements.ctx;
+    const tentacles = cursorElements.tentacles;
+    const mouse = cursorElements.mouse;
+    const oldMouse = cursorElements.oldMouse;
 
     class Tentacle {
         constructor(mx, my, targetX, targetY) {
@@ -130,7 +171,12 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     function render() {
-        ctx.clearRect(0, 0, width, height);
+        if (isCursorDisabled) {
+            requestAnimationFrame(render);
+            return;
+        }
+        
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
         // 1. Create new tentacles on movement
         const distMoved = Math.hypot(mouse.x - oldMouse.x, mouse.y - oldMouse.y);
diff --git a/Profice WebSite/scripts/cursor.min.js b/Profice WebSite/scripts/cursor.min.js
new file mode 100644
index 0000000..b82cce9
--- /dev/null
+++ b/Profice WebSite/scripts/cursor.min.js	
@@ -0,0 +1 @@
+﻿// cursor.js document.addEventListener("DOMContentLoaded", function (){if (window.matchMedia("(pointer: coarse)").matches) return;// --- SETTINGS --- const CONFIG ={tentacleCount: 8, triggerDist: 10, maxLength: 300, connectionDist: 150, thickness: 1, color: "rgba(20, 20, 20, 1)", prediction: 3.5};const toggleBtn = document.getElementById('cursorToggle');const body = document.body;// Default to system cursor (disabled custom cursor) let isCursorDisabled = localStorage.getItem('venomCursorDisabled') !== 'false';function updateCursorState(){if (isCursorDisabled){// System cursor (default) - show spidy icon body.classList.add('system-cursor');if (toggleBtn){toggleBtn.classList.remove('active');const icon = toggleBtn.querySelector('.cursor-icon');if (icon){// Check if we're on a page in the sites/ folder const currentPath = window.location.pathname;const isInSitesFolder = currentPath.includes('/sites/');const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';icon.src = imagePath;}}}else{// Custom cursor (secondary) - show cursor icon body.classList.remove('system-cursor');if (toggleBtn){toggleBtn.classList.add('active');const icon = toggleBtn.querySelector('.cursor-icon');if (icon){// Check if we're on a page in the sites/ folder const currentPath = window.location.pathname;const isInSitesFolder = currentPath.includes('/sites/');const imagePath = isInSitesFolder ? '../images/additional/cursor.png' : 'images/additional/cursor.png';icon.src = imagePath;}}}}updateCursorState();if (toggleBtn){toggleBtn.addEventListener('click', () =>{isCursorDisabled = !isCursorDisabled;localStorage.setItem('venomCursorDisabled', isCursorDisabled);updateCursorState();});}const canvas = document.createElement("canvas");canvas.id = "venom-cursor";document.body.appendChild(canvas);const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;const tentacles = [];const mouse ={x: 0, y: 0};const oldMouse ={x: 0, y: 0};document.addEventListener("mousemove", (e) =>{mouse.x = e.clientX;mouse.y = e.clientY;});window.addEventListener("resize", () =>{canvas.width = window.innerWidth;canvas.height = window.innerHeight;});class Tentacle{constructor(mx, my, targetX, targetY){this.dead = false;this.anchor ={x: targetX, y: targetY};this.currentDist = 0;// For calculating connection opacity}update(currentMouse){const dx = currentMouse.x - this.anchor.x;const dy = currentMouse.y - this.anchor.y;this.currentDist = Math.sqrt(dx*dx + dy*dy);if (this.currentDist > CONFIG.maxLength){this.dead = true;}}draw(ctx, currentMouse){if (this.dead) return;// Tension (0..1) const tension = Math.min(this.currentDist / CONFIG.maxLength, 1);const dynamicThickness = CONFIG.thickness * (1 - tension * 0.9);// Draw main line (Cursor -> Anchor) ctx.beginPath();ctx.moveTo(currentMouse.x, currentMouse.y);ctx.lineTo(this.anchor.x, this.anchor.y);ctx.lineWidth = Math.max(0.2, dynamicThickness);ctx.strokeStyle = CONFIG.color;ctx.lineCap = "butt";ctx.stroke();// Draw anchor point ctx.beginPath();ctx.arc(this.anchor.x, this.anchor.y, 1.5 * (1 - tension), 0, Math.PI * 2);ctx.fillStyle = CONFIG.color;ctx.fill();}}function render(){ctx.clearRect(0, 0, width, height);// 1. Create new tentacles on movement const distMoved = Math.hypot(mouse.x - oldMouse.x, mouse.y - oldMouse.y);if (distMoved > CONFIG.triggerDist){const vx = mouse.x - oldMouse.x;const vy = mouse.y - oldMouse.y;// "Spread" of shots increased slightly for better geometry const targetX = mouse.x + vx * CONFIG.prediction + (Math.random() - 0.5) * 60;const targetY = mouse.y + vy * CONFIG.prediction + (Math.random() - 0.5) * 60;tentacles.push(new Tentacle(mouse.x, mouse.y, targetX, targetY));oldMouse.x = mouse.x;oldMouse.y = mouse.y;}// Remove old ones (FIFO) if (tentacles.length > CONFIG.tentacleCount){tentacles.shift();}// 2. Draw main tentacles for (let i = tentacles.length - 1;i >= 0;i--){const t = tentacles[i];t.update(mouse);if (t.dead){tentacles.splice(i, 1);}else{t.draw(ctx, mouse);}}// 3. DRAW CONNECTIONS BETWEEN ANCHORS (New logic) // Iterate through all pairs of active tentacles ctx.beginPath();// Begin common path for optimization ctx.lineWidth = 0.5;// Connections are always thin for (let i = 0;i < tentacles.length;i++){for (let j = i + 1;j < tentacles.length;j++){const t1 = tentacles[i];const t2 = tentacles[j];// Calculate distance between ends of two tentacles const dx = t1.anchor.x - t2.anchor.x;const dy = t1.anchor.y - t2.anchor.y;const dist = Math.sqrt(dx*dx + dy*dy);// If they are close to each other â€” connect if (dist < CONFIG.connectionDist){// Opacity depends on how far apart they are // And how much the tentacles themselves are stretched const alpha = (1 - dist / CONFIG.connectionDist) * 0.6;ctx.beginPath();// New path for each to control opacity ctx.strokeStyle = `rgba(20, 20, 20, ${alpha})`;ctx.moveTo(t1.anchor.x, t1.anchor.y);ctx.lineTo(t2.anchor.x, t2.anchor.y);ctx.stroke();}}}// 4. Cursor (Rhombus) ctx.beginPath();ctx.fillStyle = CONFIG.color;ctx.moveTo(mouse.x, mouse.y - 5);ctx.lineTo(mouse.x + 5, mouse.y);ctx.lineTo(mouse.x, mouse.y + 5);ctx.lineTo(mouse.x - 5, mouse.y);ctx.fill();requestAnimationFrame(render);}render();});
\ No newline at end of file
diff --git a/Profice WebSite/scripts/leads.min.js b/Profice WebSite/scripts/leads.min.js
new file mode 100644
index 0000000..7e40a41
--- /dev/null
+++ b/Profice WebSite/scripts/leads.min.js	
@@ -0,0 +1 @@
+﻿// leads.js // ========================================== // 1. MENU TOGGLE // ========================================== const menuToggle = document.getElementById('menuToggle');const slideMenu = document.getElementById('slideMenu');const overlay = document.getElementById('overlay');if (menuToggle && slideMenu && overlay){function toggleMenu(){menuToggle.classList.toggle('active');slideMenu.classList.toggle('active');overlay.classList.toggle('active');}menuToggle.addEventListener('click', toggleMenu);overlay.addEventListener('click', toggleMenu);}// ========================================== // 2. LEADS TABLE LOGIC // ========================================== function getLeads(){const storedLeads = localStorage.getItem('myLeads');if (storedLeads){return JSON.parse(storedLeads);}else{return [];}}function populateLeadsTable(){const tableBody = document.getElementById('leadsTableBody');const leadsData = getLeads();if (!tableBody) return;if (leadsData.length === 0){tableBody.innerHTML = ` <tr> <td colspan="4" class="empty-state"> <p>Keine Anfragen vorhanden</p> </td> </tr> `;return;}tableBody.innerHTML = leadsData.map(lead => ` <tr> <td>${lead.datum}</td> <td>${lead.dienstleistung}</td> <td> <span class="status-badge ${lead.status}">${lead.statusText}</span> </td> <td> <a href="#" class="action-btn" data-id="${lead.id}">Details ansehen</a> </td> </tr> `).join('');document.querySelectorAll('.action-btn').forEach(btn =>{btn.addEventListener('click', function(e){e.preventDefault();const leadId = this.getAttribute('data-id');// Redirect to lead details page window.location.href = `lead-details.html?id=${leadId}`;});});}document.addEventListener('DOMContentLoaded', populateLeadsTable);
\ No newline at end of file
diff --git a/Profice WebSite/scripts/login.js b/Profice WebSite/scripts/login.js
deleted file mode 100644
index 60a5c8e..0000000
--- a/Profice WebSite/scripts/login.js	
+++ /dev/null
@@ -1,217 +0,0 @@
-// login.js
-
-document.addEventListener("DOMContentLoaded", function() {
-    const loginForm = document.getElementById('loginForm');
-    const loginBtn = document.getElementById('loginSubmit');
-    const successMessage = document.getElementById('successMessage');
-    const errorMessage = document.getElementById('errorMessage');
-    const errorText = document.getElementById('errorText');
-    const registerBtn = document.getElementById('registerBtn');
-
-    // Register button functionality
-    if (registerBtn) {
-        registerBtn.addEventListener('click', function(e) {
-            e.preventDefault();
-            window.location.href = 'register.html';
-        });
-    }
-
-    // Check if user is already logged in
-    checkExistingSession();
-
-    // Login form submission
-    if (loginForm) {
-        loginForm.addEventListener('submit', async function(e) {
-            e.preventDefault();
-            
-            const email = document.getElementById('email').value;
-            const password = document.getElementById('password').value;
-            const remember = document.getElementById('remember').checked;
-            
-            // Simple validation
-            if (!email || !password) {
-                showError('Bitte füllen Sie alle Felder aus.');
-                return;
-            }
-            
-            // Email validation
-            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-            if (!emailRegex.test(email)) {
-                showError('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
-                return;
-            }
-            
-            // Show loading state
-            setLoadingState(true);
-            hideMessages();
-            
-            // Send login data to PHP API
-            const loginData = {
-                type: 'login',
-                email: email,
-                password: password,
-                remember: remember
-            };
-            
-            try {
-                const response = await fetch('../scripts/add/send.php', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(loginData)
-                });
-
-                const result = await response.json();
-                
-                if (result.success) {
-                    // Store session (for demo purposes - in real app, this would come from server)
-                    const sessionData = {
-                        user: { email: email },
-                        loginTime: new Date().toISOString(),
-                        remember: remember
-                    };
-                    
-                    if (remember) {
-                        localStorage.setItem('userSession', JSON.stringify(sessionData));
-                    } else {
-                        sessionStorage.setItem('userSession', JSON.stringify(sessionData));
-                    }
-                    
-                    // Show success message
-                    showSuccess('Anmeldung erfolgreich! Sie werden weitergeleitet...');
-                    
-                    // Redirect after delay
-                    setTimeout(() => {
-                        window.location.href = '../index.html';
-                    }, 2000);
-                } else {
-                    showError('Anmeldung fehlgeschlagen: ' + result.message);
-                }
-            } catch (error) {
-                console.error('Login error:', error);
-                showError('Netzwerkfehler bei der Anmeldung. Bitte versuchen Sie es später erneut.');
-            }
-            
-            setLoadingState(false);
-        });
-    }
-
-    // Loading state management
-    function setLoadingState(loading) {
-        if (loginBtn) {
-            const btnText = loginBtn.querySelector('.btn-text');
-            const btnLoading = loginBtn.querySelector('.btn-loading');
-            
-            if (loading) {
-                loginBtn.disabled = true;
-                if (btnText) btnText.style.display = 'none';
-                if (btnLoading) btnLoading.style.display = 'inline-block';
-            } else {
-                loginBtn.disabled = false;
-                if (btnText) btnText.style.display = 'inline-block';
-                if (btnLoading) btnLoading.style.display = 'none';
-            }
-        }
-    }
-
-    // Message display functions
-    function showSuccess(message) {
-        if (successMessage) {
-            const messageElement = successMessage.querySelector('p');
-            if (messageElement) {
-                messageElement.textContent = message;
-            }
-            successMessage.classList.add('show');
-        }
-    }
-
-    function showError(message) {
-        if (errorMessage && errorText) {
-            errorText.textContent = message;
-            errorMessage.classList.add('show');
-            
-            // Hide after 5 seconds
-            setTimeout(() => {
-                errorMessage.classList.remove('show');
-            }, 5000);
-        }
-    }
-
-    function hideMessages() {
-        if (successMessage) successMessage.classList.remove('show');
-        if (errorMessage) errorMessage.classList.remove('show');
-    }
-});
-
-// Check existing session - DISABLED auto-redirect
-function checkExistingSession() {
-    const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
-    
-    if (sessionData) {
-        try {
-            const session = JSON.parse(sessionData);
-            const loginTime = new Date(session.loginTime);
-            const now = new Date();
-            const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
-            
-            // Auto-logout after 24 hours
-            if (sessionAge < 24) {
-                // User is still logged in - just log it, don't redirect
-                console.log('User already logged in');
-                // DISABLED: window.location.href = '../index.html';
-            } else {
-                // Session expired, remove it
-                console.log('Session expired, removing...');
-                localStorage.removeItem('userSession');
-                sessionStorage.removeItem('userSession');
-            }
-        } catch (error) {
-            console.error('Session parsing error:', error);
-            localStorage.removeItem('userSession');
-            sessionStorage.removeItem('userSession');
-        }
-    }
-}
-
-// Logout function (can be called from other pages)
-function logout() {
-    localStorage.removeItem('userSession');
-    sessionStorage.removeItem('userSession');
-    window.location.href = 'sites/login.html';
-}
-
-// Get current user (can be called from other pages)
-function getCurrentUser() {
-    const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
-    
-    if (sessionData) {
-        try {
-            const session = JSON.parse(sessionData);
-            const loginTime = new Date(session.loginTime);
-            const now = new Date();
-            const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
-            
-            if (sessionAge < 24) {
-                return session.user;
-            } else {
-                // Session expired
-                localStorage.removeItem('userSession');
-                sessionStorage.removeItem('userSession');
-                return null;
-            }
-        } catch (error) {
-            console.error('Session parsing error:', error);
-            localStorage.removeItem('userSession');
-            sessionStorage.removeItem('userSession');
-            return null;
-        }
-    }
-    
-    return null;
-}
-
-// Check if user is logged in (can be called from other pages)
-function isLoggedIn() {
-    return getCurrentUser() !== null;
-}
diff --git a/Profice WebSite/scripts/register.js b/Profice WebSite/scripts/register.js
deleted file mode 100644
index 5dda79a..0000000
--- a/Profice WebSite/scripts/register.js	
+++ /dev/null
@@ -1,272 +0,0 @@
-// register.js
-
-document.addEventListener("DOMContentLoaded", function() {
-    const registerForm = document.getElementById('registerForm');
-    const registerBtn = document.getElementById('registerSubmit');
-    const successMessage = document.getElementById('successMessage');
-    const errorMessage = document.getElementById('errorMessage');
-    const errorText = document.getElementById('errorText');
-    const passwordInput = document.getElementById('password');
-    const confirmPasswordInput = document.getElementById('confirmPassword');
-    const passwordStrength = document.getElementById('passwordStrength');
-
-    // Check if user is already logged in
-    checkExistingSession();
-
-    // Password strength checker
-    if (passwordInput && passwordStrength) {
-        passwordInput.addEventListener('input', function() {
-            const password = this.value;
-            const strength = checkPasswordStrength(password);
-            updatePasswordStrength(strength);
-        });
-    }
-
-    // Password confirmation checker
-    if (confirmPasswordInput && passwordInput) {
-        confirmPasswordInput.addEventListener('input', function() {
-            const password = passwordInput.value;
-            const confirmPassword = this.value;
-            
-            if (confirmPassword && password !== confirmPassword) {
-                this.setCustomValidity('Passwörter stimmen nicht überein');
-            } else {
-                this.setCustomValidity('');
-            }
-        });
-    }
-
-    // Registration form submission
-    if (registerForm) {
-        registerForm.addEventListener('submit', async function(e) {
-            e.preventDefault();
-            
-            // Get form data
-            const formData = {
-                type: 'register',
-                name: `${document.getElementById('firstName').value} ${document.getElementById('lastName').value}`,
-                email: document.getElementById('email').value,
-                phone: document.getElementById('phone').value,
-                company: document.getElementById('company').value,
-                password: passwordInput.value,
-                confirmPassword: confirmPasswordInput.value,
-                terms: document.getElementById('terms').checked,
-                newsletter: document.getElementById('newsletter').checked,
-                registrationTime: new Date().toISOString()
-            };
-            
-            // Validation
-            const validation = validateRegistrationForm(formData);
-            if (!validation.valid) {
-                showError(validation.message);
-                return;
-            }
-            
-            // Show loading state
-            setLoadingState(true);
-            hideMessages();
-            
-            // Send registration data to PHP API
-            try {
-                const response = await fetch('../scripts/add/send.php', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData)
-                });
-
-                const result = await response.json();
-                
-                if (result.success) {
-                    // Store user data (for demo purposes)
-                    const userData = {
-                        firstName: document.getElementById('firstName').value,
-                        lastName: document.getElementById('lastName').value,
-                        email: formData.email,
-                        phone: formData.phone,
-                        company: formData.company,
-                        registrationTime: formData.registrationTime,
-                        newsletter: formData.newsletter
-                    };
-                    
-                    // Store in localStorage (for demo purposes)
-                    localStorage.setItem('userData', JSON.stringify(userData));
-                    localStorage.setItem('userRegistered', 'true');
-                    
-                    // Show success message
-                    showSuccess('Registrierung erfolgreich! Sie werden weitergeleitet...');
-                    
-                    // Redirect after delay
-                    setTimeout(() => {
-                        window.location.href = '../index.html';
-                    }, 2000);
-                } else {
-                    showError('Registrierung fehlgeschlagen: ' + result.message);
-                }
-            } catch (error) {
-                console.error('Registration error:', error);
-                showError('Netzwerkfehler bei der Registrierung. Bitte versuchen Sie es später erneut.');
-            }
-            
-            setLoadingState(false);
-        });
-    }
-
-    // Password strength checker function
-    function checkPasswordStrength(password) {
-        let strength = 0;
-        
-        // Length check
-        if (password.length >= 8) strength++;
-        if (password.length >= 12) strength++;
-        
-        // Character variety checks
-        if (/[a-z]/.test(password)) strength++; // lowercase
-        if (/[A-Z]/.test(password)) strength++; // uppercase
-        if (/[0-9]/.test(password)) strength++; // numbers
-        if (/[^a-zA-Z0-9]/.test(password)) strength++; // special characters
-        
-        return strength;
-    }
-
-    // Update password strength indicator
-    function updatePasswordStrength(strength) {
-        const strengthBar = passwordStrength.querySelector('.strength-bar');
-        const strengthText = passwordStrength.querySelector('.strength-text');
-        
-        // Remove all strength classes
-        passwordStrength.classList.remove('strength-weak', 'strength-medium', 'strength-strong');
-        
-        if (strength <= 2) {
-            passwordStrength.classList.add('strength-weak');
-            strengthText.textContent = 'Schwach';
-        } else if (strength <= 4) {
-            passwordStrength.classList.add('strength-medium');
-            strengthText.textContent = 'Mittel';
-        } else {
-            passwordStrength.classList.add('strength-strong');
-            strengthText.textContent = 'Stark';
-        }
-    }
-
-    // Form validation
-    function validateRegistrationForm(data) {
-        // Required fields check
-        if (!data.firstName || !data.lastName || !data.email || !data.password) {
-            return { valid: false, message: 'Bitte füllen Sie alle Pflichtfelder aus.' };
-        }
-        
-        // Name validation
-        if (data.firstName.length < 2 || data.lastName.length < 2) {
-            return { valid: false, message: 'Vorname und Nachname müssen mindestens 2 Zeichen lang sein.' };
-        }
-        
-        // Email validation
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!emailRegex.test(data.email)) {
-            return { valid: false, message: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.' };
-        }
-        
-        // Password validation
-        if (data.password.length < 8) {
-            return { valid: false, message: 'Das Passwort muss mindestens 8 Zeichen lang sein.' };
-        }
-        
-        // Password confirmation
-        if (data.password !== data.confirmPassword) {
-            return { valid: false, message: 'Die Passwörter stimmen nicht überein.' };
-        }
-        
-        // Terms acceptance
-        if (!data.terms) {
-            return { valid: false, message: 'Sie müssen die Nutzungsbedingungen akzeptieren.' };
-        }
-        
-        // Phone validation (if provided)
-        if (data.phone) {
-            const phoneRegex = /^[\d\s\-\+\(\)]+$/;
-            if (!phoneRegex.test(data.phone)) {
-                return { valid: false, message: 'Bitte geben Sie eine gültige Telefonnummer ein.' };
-            }
-        }
-        
-        return { valid: true, message: 'Validierung erfolgreich' };
-    }
-
-    // Loading state management
-    function setLoadingState(loading) {
-        if (registerBtn) {
-            const btnText = registerBtn.querySelector('.btn-text');
-            const btnLoading = registerBtn.querySelector('.btn-loading');
-            
-            if (loading) {
-                registerBtn.disabled = true;
-                if (btnText) btnText.style.display = 'none';
-                if (btnLoading) btnLoading.style.display = 'inline-block';
-            } else {
-                registerBtn.disabled = false;
-                if (btnText) btnText.style.display = 'inline-block';
-                if (btnLoading) btnLoading.style.display = 'none';
-            }
-        }
-    }
-
-    // Message display functions
-    function showSuccess(message) {
-        if (successMessage) {
-            const messageElement = successMessage.querySelector('p');
-            if (messageElement) {
-                messageElement.textContent = message;
-            }
-            successMessage.classList.add('show');
-        }
-    }
-
-    function showError(message) {
-        if (errorMessage && errorText) {
-            errorText.textContent = message;
-            errorMessage.classList.add('show');
-            
-            // Hide after 5 seconds
-            setTimeout(() => {
-                errorMessage.classList.remove('show');
-            }, 5000);
-        }
-    }
-
-    function hideMessages() {
-        if (successMessage) successMessage.classList.remove('show');
-        if (errorMessage) errorMessage.classList.remove('show');
-    }
-});
-
-// Check existing session (same as login.js) - DISABLED auto-redirect
-function checkExistingSession() {
-    const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
-    
-    if (sessionData) {
-        try {
-            const session = JSON.parse(sessionData);
-            const loginTime = new Date(session.loginTime);
-            const now = new Date();
-            const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
-            
-            // Auto-logout after 24 hours
-            if (sessionAge < 24) {
-                // User is still logged in - just log it, don't redirect
-                console.log('User already logged in');
-                // DISABLED: window.location.href = '../index.html';
-            } else {
-                // Session expired, remove it
-                console.log('Session expired, removing...');
-                localStorage.removeItem('userSession');
-                sessionStorage.removeItem('userSession');
-            }
-        } catch (error) {
-            console.error('Session parsing error:', error);
-            localStorage.removeItem('userSession');
-            sessionStorage.removeItem('userSession');
-        }
-    }
-}
diff --git a/Profice WebSite/scripts/script.js b/Profice WebSite/scripts/script.js
index a03fbae..e87dcd5 100644
--- a/Profice WebSite/scripts/script.js	
+++ b/Profice WebSite/scripts/script.js	
@@ -59,23 +59,10 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 
     // ==========================================
-    // 3. LOGIN BUTTON
+    // 3. LOGIN BUTTON (REMOVED)
     // ==========================================
     
-    const loginBtn = document.getElementById('loginBtn');
-    if (loginBtn) {
-        const currentPath = window.location.pathname;
-        let loginPath = 'sites/login.html';
-        
-        if (currentPath.includes('/sites/')) {
-            loginPath = currentPath.includes('login.html') ? 'register.html' : 'login.html';
-        }
-        
-        loginBtn.onclick = (e) => {
-            e.preventDefault();
-            window.location.href = loginPath;
-        };
-    }
+    // Login button functionality has been removed
 
     // ==========================================
     // 4. FORM SUBMISSION
diff --git a/Profice WebSite/scripts/script.min.js b/Profice WebSite/scripts/script.min.js
new file mode 100644
index 0000000..0e5f84b
--- /dev/null
+++ b/Profice WebSite/scripts/script.min.js	
@@ -0,0 +1 @@
+﻿document.addEventListener("DOMContentLoaded", function(){const API_ENDPOINT = 'scripts/add/send.php';const isLocalFile = window.location.protocol === 'file:';// ========================================== // 1. SMOOTH SCROLLING // ========================================== function initSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(link =>{link.addEventListener('click', function(e){const targetId = this.getAttribute('href');if (targetId === '#') return;const targetElement = document.querySelector(targetId);if (targetElement){e.preventDefault();const header = document.querySelector('.top-banner');const headerHeight = header ? header.offsetHeight : 90;window.scrollTo({top: targetElement.offsetTop - headerHeight - 20, behavior: 'smooth'});history.pushState(null, null, targetId);}});});}initSmoothScrolling();// ========================================== // 2. MENU TOGGLE // ========================================== const menuToggle = document.getElementById('menuToggle');const slideMenu = document.getElementById('slideMenu');const overlay = document.getElementById('overlay');if (menuToggle && slideMenu && overlay){const toggleMenu = () =>{menuToggle.classList.toggle('active');slideMenu.classList.toggle('active');overlay.classList.toggle('active');};menuToggle.addEventListener('click', toggleMenu);overlay.addEventListener('click', toggleMenu);}// ========================================== // 3. LOGIN BUTTON (REMOVED) // ========================================== // Login button functionality has been removed // ========================================== // 4. FORM SUBMISSION // ========================================== const contactForm = document.getElementById('contactForm');const successMessage = document.getElementById('successMessage');if (contactForm){contactForm.addEventListener('submit', async function(e){e.preventDefault();const getValue = (id) =>{const el = document.getElementById(id);return el ? el.value : '';};const serviceSelect = document.getElementById('service');const selectedServiceText = serviceSelect ? serviceSelect.options[serviceSelect.selectedIndex].text : 'Dienstleistung';const formData ={type: 'contact', name: getValue('name'), organisation: getValue('organisation'), contact: getValue('contact'), service: getValue('service'), budget: getValue('budget'), description: getValue('description')};// Always store locally for dashboard try{const localLead ={id: Date.now(), datum: new Date().toLocaleDateString('de-DE'), dienstleistung: selectedServiceText, status: 'open', statusText: 'Offen', description: formData.description};const existingLeads = JSON.parse(localStorage.getItem('myLeads') || '[]');existingLeads.unshift(localLead);localStorage.setItem('myLeads', JSON.stringify(existingLeads.slice(0, 100)));}catch (err){}// Send to API if not local file if (!isLocalFile){try{const response = await fetch(API_ENDPOINT,{method: 'POST', 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'));return;}}catch (error){alert('Netzwerkfehler beim Senden des Formulars');return;}}// Show success contactForm.style.display = 'none';if (successMessage) successMessage.classList.add('show');contactForm.reset();});}});
\ No newline at end of file
diff --git a/Profice WebSite/scripts/scroll-header.js b/Profice WebSite/scripts/scroll-header.js
index 7299505..2b52676 100644
--- a/Profice WebSite/scripts/scroll-header.js	
+++ b/Profice WebSite/scripts/scroll-header.js	
@@ -1,83 +1,170 @@
-// scroll-header.js
+/**
+ * Ultra-Smooth Scroll Header - Butter Performance
+ * Uses advanced techniques for maximum smoothness
+ */
+
 document.addEventListener("DOMContentLoaded", function() {
     const topBanner = document.querySelector('.top-banner');
     const slideMenu = document.querySelector('.slide-menu');
     
     if (!topBanner) return;
     
-    // Scroll threshold to trigger the shrink effect
+    // Configuration for ultra-smooth performance
     const scrollThreshold = 50;
+    const rafDelay = 8; // 120fps for ultra-smooth
+    const transitionDuration = 400; // Slightly longer for smoother feel
+    
+    // State tracking with performance optimization
     let isScrolled = false;
-    let isTransitioning = false;
     let lastScrollY = 0;
     let scrollDirection = 'down';
+    let rafId = null;
+    let lastUpdateTime = 0;
+    let scrollVelocity = 0;
+    let lastScrollTime = 0;
     
-    function updateHeaderState(scrolled) {
-        if (isTransitioning) return;
-        
-        if (scrolled && !isScrolled) {
-            isTransitioning = true;
-            topBanner.classList.add('scrolled');
-            isScrolled = true;
-            
-            if (slideMenu) {
-                slideMenu.style.top = '80px';
-            }
-            
-            // Reset transition flag after animation completes
-            setTimeout(() => {
-                isTransitioning = false;
-            }, 250);
-            
-        } else if (!scrolled && isScrolled) {
-            isTransitioning = true;
-            topBanner.classList.remove('scrolled');
-            isScrolled = false;
-            
-            if (slideMenu) {
-                slideMenu.style.top = '110px';
-            }
-            
-            // Reset transition flag after animation completes
-            setTimeout(() => {
-                isTransitioning = false;
-            }, 250);
+    // Calculate scroll velocity for smoother transitions
+    function calculateVelocity(currentScrollY, currentTime) {
+        if (lastScrollTime === 0) {
+            lastScrollTime = currentTime;
+            return 0;
         }
+        
+        const timeDelta = currentTime - lastScrollTime;
+        const scrollDelta = Math.abs(currentScrollY - lastScrollY);
+        const velocity = scrollDelta / timeDelta;
+        
+        lastScrollTime = currentTime;
+        return velocity;
     }
     
-    function handleScroll() {
+    // Ultra-smooth header state update with velocity-based easing
+    function updateHeaderState(scrolled, velocity = 0) {
+        if (scrolled === isScrolled) return;
+        
+        // Add velocity-based class for different transition speeds
+        if (velocity > 5) {
+            topBanner.classList.add('fast-scroll');
+        } else {
+            topBanner.classList.remove('fast-scroll');
+        }
+        
+        // Use requestAnimationFrame for smooth DOM updates
+        requestAnimationFrame(() => {
+            if (scrolled) {
+                topBanner.classList.add('scrolled');
+                if (slideMenu) {
+                    slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+                    slideMenu.style.top = '80px';
+                }
+            } else {
+                topBanner.classList.remove('scrolled');
+                if (slideMenu) {
+                    slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+                    slideMenu.style.top = '110px';
+                }
+            }
+        });
+        
+        isScrolled = scrolled;
+    }
+    
+    // Advanced scroll handler with velocity detection
+    function handleScroll(currentTime) {
+        // Ultra-high frequency throttling
+        if (currentTime - lastUpdateTime < rafDelay) {
+            rafId = requestAnimationFrame(handleScroll);
+            return;
+        }
+        
         const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
+        const velocity = calculateVelocity(currentScrollY, currentTime);
         
-        // Detect scroll direction
-        if (currentScrollY > lastScrollY) {
-            scrollDirection = 'down';
-        } else if (currentScrollY < lastScrollY) {
-            scrollDirection = 'up';
+        // Detect scroll direction with hysteresis for stability
+        const scrollDelta = currentScrollY - lastScrollY;
+        if (Math.abs(scrollDelta) > 1) {
+            scrollDirection = scrollDelta > 0 ? 'down' : 'up';
         }
         
-        // Only update when crossing threshold in the right direction
-        if (scrollDirection === 'down' && currentScrollY > scrollThreshold && !isScrolled) {
-            updateHeaderState(true);
-        } else if (scrollDirection === 'up' && currentScrollY <= scrollThreshold && isScrolled) {
-            updateHeaderState(false);
+        // Apply hysteresis to prevent flickering
+        let shouldScroll;
+        if (scrollDirection === 'down') {
+            shouldScroll = currentScrollY > scrollThreshold + 10;
+        } else {
+            shouldScroll = currentScrollY > scrollThreshold - 10;
         }
         
+        updateHeaderState(shouldScroll, velocity);
+        
         lastScrollY = currentScrollY;
+        lastUpdateTime = currentTime;
+        rafId = null;
     }
     
-    // Use requestAnimationFrame for smooth scroll handling
-    let ticking = false;
-    function requestTick() {
-        if (!ticking) {
-            requestAnimationFrame(handleScroll);
-            ticking = true;
-            setTimeout(() => { ticking = false; }, 16); // ~60fps
+    // Optimized scroll listener with passive event
+    function onScroll() {
+        if (!rafId) {
+            rafId = requestAnimationFrame(handleScroll);
         }
     }
     
-    // Optimized scroll event listener
-    window.addEventListener('scroll', requestTick, { passive: true, capture: false });
+    // Add scroll listener with maximum performance
+    window.addEventListener('scroll', onScroll, { 
+        passive: true,
+        capture: false 
+    });
     
-    // Initial check
-    handleScroll();
+    // Handle resize with debouncing
+    let resizeTimeout;
+    function onResize() {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+            lastScrollY = window.pageYOffset || document.documentElement.scrollTop;
+            updateHeaderState(lastScrollY > scrollThreshold);
+        }, 100);
+    }
+    
+    window.addEventListener('resize', onResize, { passive: true });
+    
+    // Handle visibility change to pause/resume animations
+    function onVisibilityChange() {
+        if (document.hidden) {
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        } else {
+            lastScrollY = window.pageYOffset || document.documentElement.scrollTop;
+            updateHeaderState(lastScrollY > scrollThreshold);
+        }
+    }
+    
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    
+    // Initialize with smooth transition
+    requestAnimationFrame(() => {
+        updateHeaderState(window.pageYOffset > scrollThreshold);
+    });
+    
+    // Add smooth scroll behavior to internal links
+    document.querySelectorAll('a[href^="#"]').forEach(link => {
+        link.addEventListener('click', function(e) {
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                e.preventDefault();
+                
+                // Smooth scroll with header offset
+                const headerHeight = topBanner.offsetHeight;
+                const targetPosition = targetElement.offsetTop - headerHeight - 20;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
 });
diff --git a/Profice WebSite/scripts/scroll-header.min.js b/Profice WebSite/scripts/scroll-header.min.js
new file mode 100644
index 0000000..743ea0c
--- /dev/null
+++ b/Profice WebSite/scripts/scroll-header.min.js	
@@ -0,0 +1 @@
+﻿document.addEventListener("DOMContentLoaded", function(){const topBanner = document.querySelector('.top-banner');const slideMenu = document.querySelector('.slide-menu');if (!topBanner) return;// Configuration for ultra-smooth performance const scrollThreshold = 50;const rafDelay = 8;// 120fps for ultra-smooth const transitionDuration = 400;// Slightly longer for smoother feel // State tracking with performance optimization let isScrolled = false;let lastScrollY = 0;let scrollDirection = 'down';let rafId = null;let lastUpdateTime = 0;let scrollVelocity = 0;let lastScrollTime = 0;// Calculate scroll velocity for smoother transitions function calculateVelocity(currentScrollY, currentTime){if (lastScrollTime === 0){lastScrollTime = currentTime;return 0;}const timeDelta = currentTime - lastScrollTime;const scrollDelta = Math.abs(currentScrollY - lastScrollY);const velocity = scrollDelta / timeDelta;lastScrollTime = currentTime;return velocity;}// Ultra-smooth header state update with velocity-based easing function updateHeaderState(scrolled, velocity = 0){if (scrolled === isScrolled) return;// Add velocity-based class for different transition speeds if (velocity > 5){topBanner.classList.add('fast-scroll');}else{topBanner.classList.remove('fast-scroll');}// Use requestAnimationFrame for smooth DOM updates requestAnimationFrame(() =>{if (scrolled){topBanner.classList.add('scrolled');if (slideMenu){slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';slideMenu.style.top = '80px';}}else{topBanner.classList.remove('scrolled');if (slideMenu){slideMenu.style.transition = 'top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';slideMenu.style.top = '110px';}}});isScrolled = scrolled;}// Advanced scroll handler with velocity detection function handleScroll(currentTime){// Ultra-high frequency throttling if (currentTime - lastUpdateTime < rafDelay){rafId = requestAnimationFrame(handleScroll);return;}const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;const velocity = calculateVelocity(currentScrollY, currentTime);// Detect scroll direction with hysteresis for stability const scrollDelta = currentScrollY - lastScrollY;if (Math.abs(scrollDelta) > 1){scrollDirection = scrollDelta > 0 ? 'down' : 'up';}// Apply hysteresis to prevent flickering let shouldScroll;if (scrollDirection === 'down'){shouldScroll = currentScrollY > scrollThreshold + 10;}else{shouldScroll = currentScrollY > scrollThreshold - 10;}updateHeaderState(shouldScroll, velocity);lastScrollY = currentScrollY;lastUpdateTime = currentTime;rafId = null;}// Optimized scroll listener with passive event function onScroll(){if (!rafId){rafId = requestAnimationFrame(handleScroll);}}// Add scroll listener with maximum performance window.addEventListener('scroll', onScroll,{passive: true, capture: false});// Handle resize with debouncing let resizeTimeout;function onResize(){clearTimeout(resizeTimeout);resizeTimeout = setTimeout(() =>{lastScrollY = window.pageYOffset || document.documentElement.scrollTop;updateHeaderState(lastScrollY > scrollThreshold);}, 100);}window.addEventListener('resize', onResize,{passive: true});// Handle visibility change to pause/resume animations function onVisibilityChange(){if (document.hidden){if (rafId){cancelAnimationFrame(rafId);rafId = null;}}else{lastScrollY = window.pageYOffset || document.documentElement.scrollTop;updateHeaderState(lastScrollY > scrollThreshold);}}document.addEventListener('visibilitychange', onVisibilityChange);// Initialize with smooth transition requestAnimationFrame(() =>{updateHeaderState(window.pageYOffset > scrollThreshold);});// Add smooth scroll behavior to internal links document.querySelectorAll('a[href^="#"]').forEach(link =>{link.addEventListener('click', function(e){const targetId = this.getAttribute('href');if (targetId === '#') return;const targetElement = document.querySelector(targetId);if (targetElement){e.preventDefault();// Smooth scroll with header offset const headerHeight = topBanner.offsetHeight;const targetPosition = targetElement.offsetTop - headerHeight - 20;window.scrollTo({top: targetPosition, behavior: 'smooth'});}});});});
\ No newline at end of file
diff --git a/Profice WebSite/scripts/tech-onepager.js b/Profice WebSite/scripts/tech-onepager.js
new file mode 100644
index 0000000..32ae86a
--- /dev/null
+++ b/Profice WebSite/scripts/tech-onepager.js	
@@ -0,0 +1,595 @@
+/**
+ * Tech-Onepager JavaScript - Interactive Elements and Animations
+ * System being built aesthetic with smooth micro-animations
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // ===== GLOBAL VARIABLES =====
+    let currentTooltip = null;
+    
+    // ===== SYSTEM GRAPHIC ANIMATIONS =====
+    const systemGraphic = document.getElementById('systemGraphic');
+    const connections = document.getElementById('connections');
+    const dataPoints = document.getElementById('dataPoints');
+    
+    if (systemGraphic && connections) {
+        initializeSystemGraphic();
+    }
+    
+    function initializeSystemGraphic() {
+        const nodes = systemGraphic.querySelectorAll('.node');
+        const centralNode = systemGraphic.querySelector('.central-node');
+        
+        // Draw connection lines
+        drawConnections();
+        
+        // Initialize tooltip system
+        initializeTooltips();
+        
+        // Add node interactions
+        nodes.forEach(node => {
+            node.addEventListener('mouseenter', function() {
+                activateConnection(this);
+            });
+            
+            node.addEventListener('mouseleave', function() {
+                deactivateConnections();
+            });
+            
+            // Special handling for central node
+            if (node.classList.contains('central-node')) {
+                node.addEventListener('click', function() {
+                    triggerCentralNode(this);
+                });
+            }
+        });
+        
+        // Scroll-based activation
+        setupScrollActivation();
+    }
+    
+    // ===== TOOLTIP SYSTEM =====
+    function initializeTooltips() {
+        const nodes = systemGraphic.querySelectorAll('.node[data-tooltip]');
+        
+        nodes.forEach(node => {
+            let hoverTimeout;
+            
+            node.addEventListener('mouseenter', function() {
+                const tooltip = this.getAttribute('data-tooltip');
+                if (!tooltip) return;
+                
+                // Clear any existing timeout
+                clearTimeout(hoverTimeout);
+                
+                // Set 1-second delay before showing tooltip
+                hoverTimeout = setTimeout(() => {
+                    showTooltip(this, tooltip);
+                }, 1000);
+            });
+            
+            node.addEventListener('mouseleave', function() {
+                // Clear the timeout if mouse leaves before 1 second
+                clearTimeout(hoverTimeout);
+                
+                // Hide any visible tooltip
+                hideTooltip();
+            });
+        });
+    }
+    
+    function showTooltip(node, text) {
+        // Remove any existing tooltip
+        hideTooltip();
+        
+        // Create tooltip element
+        const tooltip = document.createElement('div');
+        tooltip.className = 'node-tooltip';
+        tooltip.textContent = text;
+        
+        // Position the tooltip
+        const nodeRect = node.getBoundingClientRect();
+        const systemGraphicRect = systemGraphic.getBoundingClientRect();
+        
+        // Calculate position relative to system graphic
+        let left = nodeRect.left - systemGraphicRect.left + (nodeRect.width / 2) - 140; // Center horizontally
+        let top = nodeRect.top - systemGraphicRect.top - 60; // Position above node
+        
+        // Adjust if tooltip goes outside bounds
+        if (left < 10) left = 10;
+        if (left + 280 > systemGraphicRect.width - 10) left = systemGraphicRect.width - 290;
+        if (top < 10) top = nodeRect.top - systemGraphicRect.top + nodeRect.height + 10; // Show below if not enough space above
+        
+        tooltip.style.left = left + 'px';
+        tooltip.style.top = top + 'px';
+        
+        // Add to system graphic
+        systemGraphic.appendChild(tooltip);
+        
+        // Trigger show animation
+        setTimeout(() => {
+            tooltip.classList.add('show');
+        }, 10);
+        
+        currentTooltip = tooltip;
+    }
+    
+    function hideTooltip() {
+        if (currentTooltip) {
+            currentTooltip.classList.remove('show');
+            setTimeout(() => {
+                if (currentTooltip && currentTooltip.parentNode) {
+                    currentTooltip.parentNode.removeChild(currentTooltip);
+                }
+                currentTooltip = null;
+            }, 300);
+        }
+    }
+    
+    // Cleanup function
+    function cleanupTooltips() {
+        hideTooltip();
+    }
+    
+    // Add cleanup on page unload
+    window.addEventListener('beforeunload', cleanupTooltips);
+    
+    function drawConnections() {
+        const centralNode = systemGraphic.querySelector('.central-node');
+        const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)');
+        
+        const centralRect = centralNode.getBoundingClientRect();
+        const graphicRect = systemGraphic.getBoundingClientRect();
+        
+        const centerX = centralRect.left - graphicRect.left + centralRect.width / 2;
+        const centerY = centralRect.top - graphicRect.top + centralRect.height / 2;
+        
+        connections.innerHTML = '';
+        
+        otherNodes.forEach(node => {
+            const nodeRect = node.getBoundingClientRect();
+            const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2;
+            const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2;
+            
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('x1', centerX);
+            line.setAttribute('y1', centerY);
+            line.setAttribute('x2', nodeX);
+            line.setAttribute('y2', nodeY);
+            line.setAttribute('class', 'connection-line');
+            line.setAttribute('data-target', node.dataset.node);
+            
+            connections.appendChild(line);
+        });
+    }
+    
+    
+    function triggerCentralNode(node) {
+        // Add triggered class for growth animation
+        node.classList.add('triggered');
+        
+        // Activate all connections
+        const lines = connections.querySelectorAll('.connection-line');
+        lines.forEach((line, index) => {
+            setTimeout(() => {
+                line.classList.add('active');
+            }, index * 100);
+        });
+        
+        // Remove triggered class after animation
+        setTimeout(() => {
+            node.classList.remove('triggered');
+            
+            // Deactivate connections
+            setTimeout(() => {
+                lines.forEach(line => line.classList.remove('active'));
+            }, 500);
+        }, 2000);
+    }
+    
+    function activateConnection(node) {
+        const targetNode = node.dataset.node;
+        const line = connections.querySelector(`[data-target="${targetNode}"]`);
+        if (line) {
+            line.classList.add('active');
+        }
+    }
+    
+    function deactivateConnections() {
+        const lines = connections.querySelectorAll('.connection-line');
+        lines.forEach(line => line.classList.remove('active'));
+    }
+    
+    function setupScrollActivation() {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const lines = connections.querySelectorAll('.connection-line');
+                    lines.forEach((line, index) => {
+                        setTimeout(() => {
+                            line.classList.add('active');
+                            setTimeout(() => {
+                                line.classList.remove('active');
+                            }, 2000);
+                        }, index * 200);
+                    });
+                }
+            });
+        }, { threshold: 0.5 });
+        
+        observer.observe(systemGraphic);
+    }
+    
+    // ===== PROCESS LINE ANIMATION =====
+    const processLine = document.getElementById('processLine');
+    const processSteps = document.querySelectorAll('.process-step');
+    const processConnectors = document.querySelectorAll('.process-connector');
+    const stepDetails = document.querySelectorAll('.step-detail');
+    
+    if (processLine) {
+        setupProcessAnimation();
+    }
+    
+    function setupProcessAnimation() {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    animateProcessLine();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.3 });
+        
+        observer.observe(processLine);
+    }
+    
+    function animateProcessLine() {
+        // Animate connectors sequentially
+        processConnectors.forEach((connector, index) => {
+            setTimeout(() => {
+                connector.classList.add('active');
+            }, 500 + (index * 500));
+        });
+        
+        // Activate steps sequentially
+        processSteps.forEach((step, index) => {
+            setTimeout(() => {
+                step.classList.add('active');
+                activateStepDetail(index + 1);
+            }, 200 + (index * 500));
+        });
+    }
+    
+    function activateStepDetail(stepNumber) {
+        const detail = document.querySelector(`[data-step-detail="${stepNumber}"]`);
+        if (detail) {
+            setTimeout(() => {
+                detail.classList.add('active');
+            }, 300);
+        }
+    }
+    
+    // Step click interactions
+    processSteps.forEach((step, index) => {
+        step.addEventListener('click', () => {
+            // Reset all steps
+            processSteps.forEach(s => s.classList.remove('active'));
+            processConnectors.forEach(c => c.classList.remove('active'));
+            stepDetails.forEach(d => d.classList.remove('active'));
+            
+            // Activate up to clicked step
+            for (let i = 0; i <= index; i++) {
+                processSteps[i].classList.add('active');
+                activateStepDetail(i + 1);
+                
+                if (i < processConnectors.length) {
+                    processConnectors[i].classList.add('active');
+                }
+            }
+        });
+    });
+    
+    // ===== INTERACTION CARD ANIMATIONS =====
+    const phoneInteraction = document.getElementById('phoneInteraction');
+    const chatInteraction = document.getElementById('chatInteraction');
+    
+    if (phoneInteraction) {
+        setupPhoneInteraction();
+    }
+    
+    if (chatInteraction) {
+        setupChatInteraction();
+    }
+    
+    function setupPhoneInteraction() {
+        const microphone = phoneInteraction.querySelector('.microphone');
+        const pulseRing = phoneInteraction.querySelector('.pulse-ring');
+        const micIcon = phoneInteraction.querySelector('.mic-icon');
+        
+        if (microphone && pulseRing && micIcon) {
+            microphone.addEventListener('mouseenter', () => {
+                pulseRing.style.animation = 'pulse 0.8s infinite';
+                micIcon.style.transform = 'scale(1.1)';
+            });
+            
+            microphone.addEventListener('mouseleave', () => {
+                pulseRing.style.animation = 'pulse 2s infinite';
+                micIcon.style.transform = 'scale(1)';
+            });
+            
+            microphone.addEventListener('click', () => {
+                // Enhanced click animation
+                microphone.style.transform = 'scale(0.9)';
+                micIcon.style.transform = 'scale(0.8)';
+                
+                // Create ripple effect
+                const ripple = document.createElement('div');
+                ripple.style.cssText = `
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 20px;
+                    height: 20px;
+                    background: rgba(255, 255, 255, 0.5);
+                    border-radius: 50%;
+                    animation: rippleEffect 0.6s ease-out;
+                    pointer-events: none;
+                `;
+                microphone.appendChild(ripple);
+                
+                setTimeout(() => {
+                    microphone.style.transform = 'scale(1.15)';
+                    micIcon.style.transform = 'scale(1.1)';
+                    setTimeout(() => {
+                        microphone.style.transform = 'scale(1)';
+                        micIcon.style.transform = 'scale(1)';
+                        ripple.remove();
+                    }, 200);
+                }, 100);
+                
+                // Show feedback
+                showInteractionFeedback('KI Telefon wird verbunden...');
+            });
+        }
+    }
+    
+    function setupChatInteraction() {
+        const chatWindow = chatInteraction.querySelector('.chat-window');
+        const typingIndicator = chatInteraction.querySelector('.typing-indicator');
+        const chatHeader = chatInteraction.querySelector('.chat-header');
+        
+        if (chatWindow && typingIndicator && chatHeader) {
+            chatInteraction.addEventListener('mouseenter', () => {
+                // Enhanced typing animation
+                const spans = typingIndicator.querySelectorAll('span');
+                spans.forEach((span, index) => {
+                    span.style.animation = 'typing 1.2s infinite ease-in-out';
+                    span.style.animationDelay = `${-0.32 + (index * 0.16)}s`;
+                    span.style.background = 'var(--accent-teal)';
+                });
+                
+                // Animate chat window
+                chatWindow.style.transform = 'scale(1.02)';
+                chatHeader.style.background = 'linear-gradient(135deg, var(--accent-green), var(--accent-teal))';
+            });
+            
+            chatInteraction.addEventListener('mouseleave', () => {
+                const spans = typingIndicator.querySelectorAll('span');
+                spans.forEach(span => {
+                    span.style.background = 'var(--primary-mid)';
+                });
+                chatWindow.style.transform = 'scale(1)';
+                chatHeader.style.background = 'linear-gradient(135deg, var(--accent-teal), var(--accent-green))';
+            });
+            
+            const chatBtn = chatInteraction.querySelector('.interaction-btn.secondary');
+            if (chatBtn) {
+                chatBtn.addEventListener('click', () => {
+                    // Enhanced click animation
+                    chatWindow.style.transform = 'scale(0.95)';
+                    setTimeout(() => {
+                        chatWindow.style.transform = 'scale(1.05)';
+                        setTimeout(() => {
+                            chatWindow.style.transform = 'scale(1)';
+                        }, 200);
+                    }, 100);
+                    
+                    showInteractionFeedback('KI Chat wird gestartet...');
+                });
+            }
+        }
+    }
+    
+    function showInteractionFeedback(message) {
+        // Create temporary feedback element
+        const feedback = document.createElement('div');
+        feedback.style.cssText = `
+            position: fixed;
+            top: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--accent-teal);
+            color: white;
+            padding: 16px 24px;
+            border-radius: 8px;
+            font-weight: 600;
+            z-index: 10000;
+            box-shadow: 0 8px 30px rgba(38, 166, 154, 0.4);
+            animation: slideDown 0.3s ease;
+        `;
+        feedback.textContent = message;
+        
+        document.body.appendChild(feedback);
+        
+        setTimeout(() => {
+            feedback.style.animation = 'slideUp 0.3s ease';
+            setTimeout(() => {
+                feedback.remove();
+            }, 300);
+        }, 2000);
+    }
+    
+    // ===== HERO BUTTON INTERACTIONS =====
+    const kiPhoneBtn = document.getElementById('kiPhoneBtn');
+    const chatBtn = document.getElementById('chatBtn');
+    
+    if (kiPhoneBtn) {
+        kiPhoneBtn.addEventListener('click', () => {
+            showInteractionFeedback('KI Telefon wird verbunden...');
+            // Scroll to interaction section
+            document.getElementById('interaction')?.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+            });
+        });
+    }
+    
+    if (chatBtn) {
+        chatBtn.addEventListener('click', () => {
+            showInteractionFeedback('KI Chat wird gestartet...');
+            // Scroll to interaction section
+            document.getElementById('interaction')?.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+            });
+        });
+    }
+    
+    // ===== SYSTEM CARD HOVER EFFECTS =====
+    const systemCards = document.querySelectorAll('.system-card');
+    
+    systemCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            // Add subtle glow effect
+            this.style.boxShadow = '0 25px 50px rgba(38, 166, 154, 0.2)';
+            
+            // Animate internal components
+            const flowItems = this.querySelectorAll('.flow-item, .phone-icon, .ki-processor, .crm-output');
+            flowItems.forEach((item, index) => {
+                setTimeout(() => {
+                    item.style.transform = 'translateY(-2px)';
+                    setTimeout(() => {
+                        item.style.transform = 'translateY(0)';
+                    }, 200);
+                }, index * 100);
+            });
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.boxShadow = '0 12px 30px rgba(79, 71, 71, 0.1)';
+        });
+    });
+    
+    // ===== DATA CARD ANIMATIONS =====
+    const dataCards = document.querySelectorAll('.data-card');
+    
+    const dataCardObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry, index) => {
+            if (entry.isIntersecting) {
+                setTimeout(() => {
+                    entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
+                }, index * 100);
+                dataCardObserver.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.1 });
+    
+    dataCards.forEach(card => {
+        dataCardObserver.observe(card);
+    });
+    
+    // ===== SMOOTH SCROLL FOR INTERNAL LINKS =====
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+    
+    // ===== UTILITY ANIMATIONS =====
+    // Add CSS animations dynamically
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translate(-50%, -20px);
+            }
+            to {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+        }
+        
+        @keyframes slideUp {
+            from {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+            to {
+                opacity: 0;
+                transform: translate(-50%, -20px);
+            }
+        }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        @keyframes rippleEffect {
+            from {
+                width: 20px;
+                height: 20px;
+                opacity: 0.5;
+            }
+            to {
+                width: 100px;
+                height: 100px;
+                opacity: 0;
+            }
+        }
+        
+        @keyframes shimmer {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
+            50% { opacity: 1; }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // ===== PERFORMANCE OPTIMIZATION =====
+    // Throttle scroll events
+    let ticking = false;
+    function requestTick() {
+        if (!ticking) {
+            requestAnimationFrame(updateScrollEffects);
+            ticking = true;
+            setTimeout(() => { ticking = false; }, 16);
+        }
+    }
+    
+    function updateScrollEffects() {
+        // Add scroll-based effects here if needed
+        // Parallax, fade-ins, etc.
+    }
+    
+    window.addEventListener('scroll', requestTick, { passive: true });
+    
+    // ===== INITIALIZATION COMPLETE =====
+    console.log('Tech-Onepager initialized successfully');
+});
diff --git a/Profice WebSite/scripts/tech-onepager.min.js b/Profice WebSite/scripts/tech-onepager.min.js
new file mode 100644
index 0000000..8c6caa5
--- /dev/null
+++ b/Profice WebSite/scripts/tech-onepager.min.js	
@@ -0,0 +1 @@
+﻿document.addEventListener('DOMContentLoaded', function(){// ===== SYSTEM GRAPHIC ANIMATIONS ===== const systemGraphic = document.getElementById('systemGraphic');const connections = document.getElementById('connections');const dataPoints = document.getElementById('dataPoints');if (systemGraphic && connections && dataPoints){initializeSystemGraphic();}function initializeSystemGraphic(){const nodes = systemGraphic.querySelectorAll('.node');const centralNode = systemGraphic.querySelector('.central-node');// Draw connection lines drawConnections();// Create animated data points createDataPoints();// Add node interactions nodes.forEach(node =>{node.addEventListener('mouseenter', function(){activateConnection(this);});node.addEventListener('mouseleave', function(){deactivateConnections();});// Special handling for central node if (node.classList.contains('central-node')){node.addEventListener('click', function(){triggerCentralNode(this);});}});// Scroll-based activation setupScrollActivation();}function drawConnections(){const centralNode = systemGraphic.querySelector('.central-node');const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)');const centralRect = centralNode.getBoundingClientRect();const graphicRect = systemGraphic.getBoundingClientRect();const centerX = centralRect.left - graphicRect.left + centralRect.width / 2;const centerY = centralRect.top - graphicRect.top + centralRect.height / 2;connections.innerHTML = '';otherNodes.forEach(node =>{const nodeRect = node.getBoundingClientRect();const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2;const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2;const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');line.setAttribute('x1', centerX);line.setAttribute('y1', centerY);line.setAttribute('x2', nodeX);line.setAttribute('y2', nodeY);line.setAttribute('class', 'connection-line');line.setAttribute('data-target', node.dataset.node);connections.appendChild(line);});}function createDataPoints(){setInterval(() =>{if (Math.random() > 0.7){const dataPoint = document.createElement('div');dataPoint.className = 'data-point';const startNode = systemGraphic.querySelectorAll('.node:not(.central-node)')[ Math.floor(Math.random() * 5) ];const centralNode = systemGraphic.querySelector('.central-node');const startRect = startNode.getBoundingClientRect();const centralRect = centralNode.getBoundingClientRect();const graphicRect = systemGraphic.getBoundingClientRect();const startX = startRect.left - graphicRect.left + startRect.width / 2;const startY = startRect.top - graphicRect.top + startRect.height / 2;const endX = centralRect.left - graphicRect.left + centralRect.width / 2;const endY = centralRect.top - graphicRect.top + centralRect.height / 2;dataPoint.style.left = startX + 'px';dataPoint.style.top = startY + 'px';dataPoints.appendChild(dataPoint);// Animate along path animateDataPoint(dataPoint, startX, startY, endX, endY);// Remove after animation setTimeout(() =>{dataPoint.remove();}, 3000);}}, 800);}function animateDataPoint(point, startX, startY, endX, endY){const duration = 3000;const startTime = Date.now();function animate(){const elapsed = Date.now() - startTime;const progress = Math.min(elapsed / duration, 1);const easeProgress = 1 - Math.pow(1 - progress, 3);// Ease out cubic const currentX = startX + (endX - startX) * easeProgress;const currentY = startY + (endY - startY) * easeProgress;point.style.left = currentX + 'px';point.style.top = currentY + 'px';if (progress < 1){requestAnimationFrame(animate);}}requestAnimationFrame(animate);}function triggerCentralNode(node){// Add triggered class for growth animation node.classList.add('triggered');// Activate all connections const lines = connections.querySelectorAll('.connection-line');lines.forEach((line, index) =>{setTimeout(() =>{line.classList.add('active');}, index * 100);});// Remove triggered class after animation setTimeout(() =>{node.classList.remove('triggered');// Deactivate connections setTimeout(() =>{lines.forEach(line => line.classList.remove('active'));}, 500);}, 2000);}function activateConnection(node){const targetNode = node.dataset.node;const line = connections.querySelector(`[data-target="${targetNode}"]`);if (line){line.classList.add('active');}}function deactivateConnections(){const lines = connections.querySelectorAll('.connection-line');lines.forEach(line => line.classList.remove('active'));}function setupScrollActivation(){const observer = new IntersectionObserver((entries) =>{entries.forEach(entry =>{if (entry.isIntersecting){const lines = connections.querySelectorAll('.connection-line');lines.forEach((line, index) =>{setTimeout(() =>{line.classList.add('active');setTimeout(() =>{line.classList.remove('active');}, 2000);}, index * 200);});}});},{threshold: 0.5});observer.observe(systemGraphic);}// ===== PROCESS LINE ANIMATION ===== const processLine = document.getElementById('processLine');const processSteps = document.querySelectorAll('.process-step');const processConnectors = document.querySelectorAll('.process-connector');const stepDetails = document.querySelectorAll('.step-detail');if (processLine){setupProcessAnimation();}function setupProcessAnimation(){const observer = new IntersectionObserver((entries) =>{entries.forEach(entry =>{if (entry.isIntersecting){animateProcessLine();observer.unobserve(entry.target);}});},{threshold: 0.3});observer.observe(processLine);}function animateProcessLine(){// Animate connectors sequentially processConnectors.forEach((connector, index) =>{setTimeout(() =>{connector.classList.add('active');}, 500 + (index * 500));});// Activate steps sequentially processSteps.forEach((step, index) =>{setTimeout(() =>{step.classList.add('active');activateStepDetail(index + 1);}, 200 + (index * 500));});}function activateStepDetail(stepNumber){const detail = document.querySelector(`[data-step-detail="${stepNumber}"]`);if (detail){setTimeout(() =>{detail.classList.add('active');}, 300);}}// Step click interactions processSteps.forEach((step, index) =>{step.addEventListener('click', () =>{// Reset all steps processSteps.forEach(s => s.classList.remove('active'));processConnectors.forEach(c => c.classList.remove('active'));stepDetails.forEach(d => d.classList.remove('active'));// Activate up to clicked step for (let i = 0;i <= index;i++){processSteps[i].classList.add('active');activateStepDetail(i + 1);if (i < processConnectors.length){processConnectors[i].classList.add('active');}}});});// ===== INTERACTION CARD ANIMATIONS ===== const phoneInteraction = document.getElementById('phoneInteraction');const chatInteraction = document.getElementById('chatInteraction');if (phoneInteraction){setupPhoneInteraction();}if (chatInteraction){setupChatInteraction();}function setupPhoneInteraction(){const microphone = phoneInteraction.querySelector('.microphone');const pulseRing = phoneInteraction.querySelector('.pulse-ring');if (microphone && pulseRing){microphone.addEventListener('mouseenter', () =>{pulseRing.style.animation = 'pulse 0.8s infinite';});microphone.addEventListener('mouseleave', () =>{pulseRing.style.animation = 'pulse 2s infinite';});microphone.addEventListener('click', () =>{// Simulate phone call initiation microphone.style.transform = 'scale(0.95)';setTimeout(() =>{microphone.style.transform = 'scale(1.1)';setTimeout(() =>{microphone.style.transform = 'scale(1)';}, 200);}, 100);// Show feedback showInteractionFeedback('KI Telefon wird verbunden...');});}}function setupChatInteraction(){const chatWindow = chatInteraction.querySelector('.chat-window');const typingIndicator = chatInteraction.querySelector('.typing-indicator');if (chatWindow && typingIndicator){chatInteraction.addEventListener('mouseenter', () =>{// Start typing animation const spans = typingIndicator.querySelectorAll('span');spans.forEach((span, index) =>{span.style.animation = 'typing 1.4s infinite ease-in-out';span.style.animationDelay = `${-0.32 + (index * 0.16)}s`;});});const chatBtn = chatInteraction.querySelector('.interaction-btn.secondary');if (chatBtn){chatBtn.addEventListener('click', () =>{showInteractionFeedback('KI Chat wird gestartet...');});}}}function showInteractionFeedback(message){// Create temporary feedback element const feedback = document.createElement('div');feedback.style.cssText = ` position: fixed;top: 100px;left: 50%;transform: translateX(-50%);background: var(--accent-teal);color: white;padding: 16px 24px;border-radius: 8px;font-weight: 600;z-index: 10000;box-shadow: 0 8px 30px rgba(38, 166, 154, 0.4);animation: slideDown 0.3s ease;`;feedback.textContent = message;document.body.appendChild(feedback);setTimeout(() =>{feedback.style.animation = 'slideUp 0.3s ease';setTimeout(() =>{feedback.remove();}, 300);}, 2000);}// ===== HERO BUTTON INTERACTIONS ===== const kiPhoneBtn = document.getElementById('kiPhoneBtn');const chatBtn = document.getElementById('chatBtn');if (kiPhoneBtn){kiPhoneBtn.addEventListener('click', () =>{showInteractionFeedback('KI Telefon wird verbunden...');// Scroll to interaction section document.getElementById('interaction')?.scrollIntoView({behavior: 'smooth', block: 'center'});});}if (chatBtn){chatBtn.addEventListener('click', () =>{showInteractionFeedback('KI Chat wird gestartet...');// Scroll to interaction section document.getElementById('interaction')?.scrollIntoView({behavior: 'smooth', block: 'center'});});}// ===== SYSTEM CARD HOVER EFFECTS ===== const systemCards = document.querySelectorAll('.system-card');systemCards.forEach(card =>{card.addEventListener('mouseenter', function(){// Add subtle glow effect this.style.boxShadow = '0 20px 40px rgba(38, 166, 154, 0.15)';});card.addEventListener('mouseleave', function(){this.style.boxShadow = '0 12px 30px rgba(79, 71, 71, 0.1)';});});// ===== DATA CARD ANIMATIONS ===== const dataCards = document.querySelectorAll('.data-card');const dataCardObserver = new IntersectionObserver((entries) =>{entries.forEach((entry, index) =>{if (entry.isIntersecting){setTimeout(() =>{entry.target.style.animation = 'fadeInUp 0.6s ease forwards';}, index * 100);dataCardObserver.unobserve(entry.target);}});},{threshold: 0.1});dataCards.forEach(card =>{dataCardObserver.observe(card);});// ===== SMOOTH SCROLL FOR INTERNAL LINKS ===== document.querySelectorAll('a[href^="#"]').forEach(anchor =>{anchor.addEventListener('click', function (e){e.preventDefault();const target = document.querySelector(this.getAttribute('href'));if (target){target.scrollIntoView({behavior: 'smooth', block: 'start'});}});});// ===== UTILITY ANIMATIONS ===== // Add CSS animations dynamically const style = document.createElement('style');style.textContent = ` @keyframes slideDown{from{opacity: 0;transform: translate(-50%, -20px);}to{opacity: 1;transform: translate(-50%, 0);}}@keyframes slideUp{from{opacity: 1;transform: translate(-50%, 0);}to{opacity: 0;transform: translate(-50%, -20px);}}@keyframes fadeInUp{from{opacity: 0;transform: translateY(30px);}to{opacity: 1;transform: translateY(0);}}`;document.head.appendChild(style);// ===== PERFORMANCE OPTIMIZATION ===== // Throttle scroll events let ticking = false;function requestTick(){if (!ticking){requestAnimationFrame(updateScrollEffects);ticking = true;setTimeout(() =>{ticking = false;}, 16);}}function updateScrollEffects(){// Add scroll-based effects here if needed // Parallax, fade-ins, etc.}window.addEventListener('scroll', requestTick,{passive: true});// ===== INITIALIZATION COMPLETE ===== console.log('Tech-Onepager initialized successfully');});
\ No newline at end of file
diff --git a/Profice WebSite/sites/automatisation.html b/Profice WebSite/sites/automatisation.html
index 9111066..2163eb7 100644
--- a/Profice WebSite/sites/automatisation.html	
+++ b/Profice WebSite/sites/automatisation.html	
@@ -1,11 +1,24 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice - Automatisierung</title>
+    <meta name="description" content="Profice - automatisation Lösungen für digitale Transformation.">
+    <meta name="keywords" content="Profice, automatisation, Webentwicklung, KI, Automatisierung">
+    <meta name="author" content="Profice">
+    <meta property="og:title" content="automatisation - Profice">
+    <meta property="og:description" content="Profice automatisation Lösungen">
+    <meta property="og:type" content="website">
+    <meta name="robots" content="index, follow">
+    <title>automatisation - Profice</title>
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="../style/design.css" as="style">
+    <link rel="preload" href="../style/cursor.css" as="style">
+    <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="../style/design.css">
-    <link rel="stylesheet" href="../style/service.css">
     <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
@@ -23,26 +36,11 @@
                 </a>
             </div>
         </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Home</a>
-                <a href="../index.html#enterprise" class="nav-link">Enterprise</a>
-                <a href="../index.html#pricing" class="nav-link">Pricing</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
+        <div class="top-banner-center"><!-- Navigation removed --></div>
         <div class="top-banner-right">
             <button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
                 <img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
             </button>
-            <button id="loginBtn" class="login-btn" aria-label="Log in" title="Log in">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-                    <polyline points="10 17 15 12 10 7"></polyline>
-                    <line x1="15" y1="12" x2="3" y2="12"></line>
-                </svg>
-                Log in
-            </button>
         </div>
     </header>
 
@@ -61,51 +59,51 @@
         <div class="service-container">
             <!-- Service Header -->
             <div class="service-header">
-                <div class="service-icon">⚙️</div>
+                <div class="service-icon">âš™ï¸</div>
                 <h1 class="service-title">Automatisierung</h1>
                 <p class="service-subtitle">Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen</p>
             </div>
 
             <!-- Service Description -->
             <section class="service-section">
-                <h2 class="section-title">Unsere Automatisierungslösungen</h2>
+                <h2 class="section-title">Unsere AutomatisierungslÃ¶sungen</h2>
                 <p class="section-text">
-                    Wir automatisieren Ihre Geschäftsprozesse, um Effizienz zu steigern und menschliche Fehler zu reduzieren. 
-                    Von einfachen wiederkehrenden Aufgaben bis zu komplexen Workflow-Integrationen - wir finden die optimale Lösung.
+                    Wir automatisieren Ihre GeschÃ¤ftsprozesse, um Effizienz zu steigern und menschliche Fehler zu reduzieren. 
+                    Von einfachen wiederkehrenden Aufgaben bis zu komplexen Workflow-Integrationen - wir finden die optimale LÃ¶sung.
                 </p>
             </section>
 
             <!-- Service Features -->
             <section class="service-section">
-                <h2 class="section-title">Was wir automatisieren können</h2>
+                <h2 class="section-title">Was wir automatisieren kÃ¶nnen</h2>
                 <div class="features-grid">
                     <div class="feature-item">
-                        <div class="feature-icon">📧</div>
+                        <div class="feature-icon">ðŸ“§</div>
                         <h3>E-Mail-Automatisierung</h3>
                         <p>Automatische Antwortverwaltung und E-Mail-Kampagnen</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">📄</div>
+                        <div class="feature-icon">ðŸ“„</div>
                         <h3>Datenverarbeitung</h3>
                         <p>Automatische Datenmigration und -bereinigung</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">📋</div>
+                        <div class="feature-icon">ðŸ“‹</div>
                         <h3>Report-Generierung</h3>
                         <p>Automatische Erstellung von Berichten und Analysen</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🔄</div>
+                        <div class="feature-icon">ðŸ”„</div>
                         <h3>Workflow-Integration</h3>
-                        <p>Verbindung verschiedener Systeme für nahtlose Prozesse</p>
+                        <p>Verbindung verschiedener Systeme fÃ¼r nahtlose Prozesse</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">📊</div>
+                        <div class="feature-icon">ðŸ“Š</div>
                         <h3>Monitoring</h3>
-                        <p>Automatische Systemüberwachung und Alarmierung</p>
+                        <p>Automatische SystemÃ¼berwachung und Alarmierung</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🎯</div>
+                        <div class="feature-icon">ðŸŽ¯</div>
                         <h3>Task-Management</h3>
                         <p>Intelligente Aufgabenverteilung und -verfolgung</p>
                     </div>
@@ -126,8 +124,8 @@
                     <div class="process-item">
                         <div class="process-number">2</div>
                         <div class="process-content">
-                            <h3>Lösungsdesign</h3>
-                            <p>Entwicklung maßgeschneiderter Automatisierungslösungen</p>
+                            <h3>LÃ¶sungsdesign</h3>
+                            <p>Entwicklung maÃŸgeschneiderter AutomatisierungslÃ¶sungen</p>
                         </div>
                     </div>
                     <div class="process-item">
@@ -148,7 +146,7 @@
                         <div class="process-number">5</div>
                         <div class="process-content">
                             <h3>Monitoring</h3>
-                            <p>Laufende Überwachung und Optimierung</p>
+                            <p>Laufende Ãœberwachung und Optimierung</p>
                         </div>
                     </div>
                 </div>
@@ -167,27 +165,27 @@
                 <h2 class="section-title">Ihre Vorteile</h2>
                 <div class="benefits-grid">
                     <div class="benefit-item">
-                        <div class="benefit-icon">⏰️</div>
+                        <div class="benefit-icon">â°ï¸</div>
                         <h3>Zeitersparnis</h3>
                         <p>Bis zu 80% Zeitersparnis bei wiederkehrenden Aufgaben</p>
                     </div>
                     <div class="benefit-item">
-                        <div class="benefit-icon">🎯</div>
-                        <h3>Qualitätssteigerung</h3>
+                        <div class="benefit-icon">ðŸŽ¯</div>
+                        <h3>QualitÃ¤tssteigerung</h3>
                     <p>Reduzierung menschlicher Fehler und konsistente Ergebnisse</p>
                     </div>
                     <div class="benefit-item">
-                        <div class="benefit-icon">💰</div>
+                        <div class="benefit-icon">ðŸ’°</div>
                         <h3>Kostensenkung</h3>
                         <p>Optimierung von Ressourcen und Betriebskosten</p>
                     </div>
                     <div class="benefit-item">
-                        <div class="benefit-icon">📈</div>
+                        <div class="benefit-icon">ðŸ“ˆ</div>
                         <h3>Skalierbarkeit</div>
-                        <p>Einfache Handhabung wachsender Geschäftsanforderungen</p>
+                        <p>Einfache Handhabung wachsender GeschÃ¤ftsanforderungen</p>
                     </div>
                     <div class="benefit-item">
-                        <div class="benefit-icon">😊</div>
+                        <div class="benefit-icon">ðŸ˜Š</div>
                         <h3>Mitarbeiterzufriedenheit</h3>
                         <p>Fokus auf kreative und strategische Aufgaben</p>
                     </div>
@@ -196,7 +194,7 @@
 
             <!-- CTA Section -->
             <section class="service-section">
-                <h2 class="section-title">Bereit für mehr Effizienz?</h2>
+                <h2 class="section-title">Bereit fÃ¼r mehr Effizienz?</h2>
                 <p class="section-text">Lassen Sie uns Ihre Prozesse analysieren und Potenziale identifizieren.</p>
                 <div class="cta-buttons">
                     <a href="offers.html?service=automatisation" class="cta-btn primary">Automatisierungs-Analyse</a>
@@ -206,8 +204,98 @@
         </div>
     </main>
 
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="../index.html#systeme" class="footer-link">KI Systeme</a>
+                        <a href="../index.html#interaction" class="footer-link">Demo</a>
+                        <a href="offers.html" class="footer-link">Kontakt</a>
+                        <a href="leads.html" class="footer-link">Dashboard</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="#" class="footer-link">Datenschutzerklärung</a>
+                        <a href="#" class="footer-link">Impressum</a>
+                        <a href="#" class="footer-link">AGB</a>
+                        <a href="#" class="footer-link">Cookie-Richtlinie</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>
+                            <span>+49 123 456789</span>
+                        </div>
+                        <div class="contact-item">
+                            <span class="contact-icon">✉️</span>
+                            <span>info@profice.de</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>
+                            </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>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <div class="footer-bottom-content">
+                    <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
+                    <div class="footer-bottom-links">
+                        <a href="#" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="#" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
     <script src="../scripts/script.js"></script>
     <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
+    <!-- Optimized script loading -->
+    <script src="../scripts/script.js" defer></script>
+    <script src="../scripts/cursor.js" defer></script>
+    <script src="../scripts/scroll-header.min.js" defer></script>
 </body>
 </html>
+
+
+
diff --git a/Profice WebSite/sites/ki-integration.html b/Profice WebSite/sites/ki-integration.html
index 77f9ba1..89c23b7 100644
--- a/Profice WebSite/sites/ki-integration.html	
+++ b/Profice WebSite/sites/ki-integration.html	
@@ -1,11 +1,24 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice - KI Integration</title>
+    <meta name="description" content="Profice - ki integration Lösungen für digitale Transformation.">
+    <meta name="keywords" content="Profice, ki integration, Webentwicklung, KI, Automatisierung">
+    <meta name="author" content="Profice">
+    <meta property="og:title" content="ki integration - Profice">
+    <meta property="og:description" content="Profice ki integration Lösungen">
+    <meta property="og:type" content="website">
+    <meta name="robots" content="index, follow">
+    <title>ki integration - Profice</title>
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="../style/design.css" as="style">
+    <link rel="preload" href="../style/cursor.css" as="style">
+    <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="../style/design.css">
-    <link rel="stylesheet" href="../style/service.css">
     <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
@@ -23,14 +36,7 @@
                 </a>
             </div>
         </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Home</a>
-                <a href="../index.html#enterprise" class="nav-link">Enterprise</a>
-                <a href="../index.html#pricing" class="nav-link">Pricing</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
+        <div class="top-banner-center"><!-- Navigation removed --></div>
         <div class="top-banner-right">
             <button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
                 <img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
@@ -61,17 +67,17 @@
         <div class="service-container">
             <!-- Service Header -->
             <div class="service-header">
-                <div class="service-icon">🤖</div>
+                <div class="service-icon">ðŸ¤–</div>
                 <h1 class="service-title">KI Integration</h1>
-                <p class="service-subtitle">Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren</p>
+                <p class="service-subtitle">Nutzen Sie die Kraft kÃ¼nstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren</p>
             </div>
 
             <!-- Service Description -->
             <section class="service-section">
                 <h2 class="section-title">Unsere KI-Dienstleistungen</h2>
                 <p class="section-text">
-                    Wir integrieren künstliche Intelligenz in Ihre Geschäftsprozesse, um Effizienz zu steigern und neue Möglichkeiten zu erschließen. 
-                    Von der Datenanalyse über automatisierte Prozesse bis zu intelligenten Chatbots - wir machen KI für Sie nutzbar.
+                    Wir integrieren kÃ¼nstliche Intelligenz in Ihre GeschÃ¤ftsprozesse, um Effizienz zu steigern und neue MÃ¶glichkeiten zu erschlieÃŸen. 
+                    Von der Datenanalyse Ã¼ber automatisierte Prozesse bis zu intelligenten Chatbots - wir machen KI fÃ¼r Sie nutzbar.
                 </p>
             </section>
 
@@ -80,34 +86,34 @@
                 <h2 class="section-title">Was wir bieten</h2>
                 <div class="features-grid">
                     <div class="feature-item">
-                        <div class="feature-icon">📊</div>
+                        <div class="feature-icon">ðŸ“Š</div>
                         <h3>Datenanalyse</h3>
-                        <p>Intelligente Auswertung Ihrer Geschäftsdaten für bessere Entscheidungen</p>
+                        <p>Intelligente Auswertung Ihrer GeschÃ¤ftsdaten fÃ¼r bessere Entscheidungen</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🤖</div>
+                        <div class="feature-icon">ðŸ¤–</div>
                         <h3>Chatbots</h3>
                         <p>24/7 Kundenbetreuung und automatisierte Kommunikation</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">⚙️</div>
+                        <div class="feature-icon">âš™ï¸</div>
                         <h3>Prozessautomatisierung</h3>
                         <p>Automatisierung wiederkehrender Aufgaben zur Effizienzsteigerung</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🔍</div>
+                        <div class="feature-icon">ðŸ”</div>
                         <h3>Bilderkennung</h3>
                         <p>Automatische Analyse von Bildern und Dokumenten</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">📈</div>
+                        <div class="feature-icon">ðŸ“ˆ</div>
                         <h3>Vorhersagemodelle</h3>
-                        <p>Prognosen für Trends und Geschäftsentwicklungen</p>
+                        <p>Prognosen fÃ¼r Trends und GeschÃ¤ftsentwicklungen</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🎯</div>
+                        <div class="feature-icon">ðŸŽ¯</div>
                         <h3>Personalisierung</h3>
-                        <p>Individuelle KI-Lösungen für Ihre spezifischen Bedürfnisse</p>
+                        <p>Individuelle KI-LÃ¶sungen fÃ¼r Ihre spezifischen BedÃ¼rfnisse</p>
                     </div>
                 </div>
             </section>
@@ -120,7 +126,7 @@
                         <div class="process-number">1</div>
                         <div class="process-content">
                             <h3>Analyse & Potenzial</h3>
-                            <p>Identifizierung von KI-Einsatzmöglichkeiten in Ihrem Unternehmen</p>
+                            <p>Identifizierung von KI-EinsatzmÃ¶glichkeiten in Ihrem Unternehmen</p>
                         </div>
                     </div>
                     <div class="process-item">
@@ -173,11 +179,11 @@
 
             <!-- Use Cases -->
             <section class="service-section">
-                <h2 class="section-title">Anwendungsfälle</h2>
+                <h2 class="section-title">AnwendungsfÃ¤lle</h2>
                 <div class="use-cases-grid">
                     <div class="use-case-item">
                         <h3>Kundenservice</h3>
-                        <p>Intelligente Chatbots für 24/7 Unterstützung</p>
+                        <p>Intelligente Chatbots fÃ¼r 24/7 UnterstÃ¼tzung</p>
                     </div>
                     <div class="use-case-item">
                         <h3>Vertrieb</h3>
@@ -189,19 +195,19 @@
                     </div>
                     <div class="use-case-item">
                         <h3>Finanzen</h3>
-                        <p>Betrugsprüfung und Risikoanalyse</p>
+                        <p>BetrugsprÃ¼fung und Risikoanalyse</p>
                     </div>
                     <div class="use-case-item">
                         <h3>Produktion</h3>
-                        <p>Qualitätssicherung und Predictive Maintenance</p>
+                        <p>QualitÃ¤tssicherung und Predictive Maintenance</p>
                     </div>
                 </div>
             </section>
 
             <!-- CTA Section -->
             <section class="service-section">
-                <h2 class="section-title">Bereit für KI in Ihrem Unternehmen?</h2>
-                <p class="section-text">Lassen Sie uns die Potenziale für Ihr Unternehmen analysieren.</p>
+                <h2 class="section-title">Bereit fÃ¼r KI in Ihrem Unternehmen?</h2>
+                <p class="section-text">Lassen Sie uns die Potenziale fÃ¼r Ihr Unternehmen analysieren.</p>
                 <div class="cta-buttons">
                     <a href="offers.html?service=ki-integration" class="cta-btn primary">KI-Analyse anfordern</a>
                     <a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
@@ -210,8 +216,98 @@
         </div>
     </main>
 
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="../index.html#systeme" class="footer-link">KI Systeme</a>
+                        <a href="../index.html#interaction" class="footer-link">Demo</a>
+                        <a href="offers.html" class="footer-link">Kontakt</a>
+                        <a href="leads.html" class="footer-link">Dashboard</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="#" class="footer-link">Datenschutzerklärung</a>
+                        <a href="#" class="footer-link">Impressum</a>
+                        <a href="#" class="footer-link">AGB</a>
+                        <a href="#" class="footer-link">Cookie-Richtlinie</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>
+                            <span>+49 123 456789</span>
+                        </div>
+                        <div class="contact-item">
+                            <span class="contact-icon">✉️</span>
+                            <span>info@profice.de</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>
+                            </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>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <div class="footer-bottom-content">
+                    <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
+                    <div class="footer-bottom-links">
+                        <a href="#" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="#" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
     <script src="../scripts/script.js"></script>
     <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
+    <!-- Optimized script loading -->
+    <script src="../scripts/script.js" defer></script>
+    <script src="../scripts/cursor.js" defer></script>
+    <script src="../scripts/scroll-header.min.js" defer></script>
 </body>
 </html>
+
+
+
diff --git a/Profice WebSite/sites/leads.html b/Profice WebSite/sites/leads.html
index 78cfd8b..baf98f9 100644
--- a/Profice WebSite/sites/leads.html	
+++ b/Profice WebSite/sites/leads.html	
@@ -1,11 +1,25 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice - Leads Dashboard</title>
+    <meta name="description" content="Profice Leads Dashboard - Verwalten Sie Ihre Projektanfragen und digitalen Transformationen.">
+    <meta name="keywords" content="Leads Dashboard, Anfragen, Projektmanagement, Profice">
+    <meta name="author" content="Profice">
+    <meta property="og:title" content="Leads Dashboard - Profice">
+    <meta property="og:description" content="Verwalten Sie Ihre Projektanfragen">
+    <meta property="og:type" content="website">
+    <meta name="robots" content="noindex, nofollow">
+    <title>Leads Dashboard - Profice</title>
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="../style/design.css" as="style">
+    <link rel="preload" href="../style/cursor.css" as="style">
+    <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="../style/design.css">
-    <link rel="stylesheet" href="../style/leads.css">
+    <link rel="stylesheet" href="../style/leads.min.css">
     <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
@@ -13,7 +27,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>
@@ -23,26 +37,11 @@
                 </a>
             </div>
         </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Startseite</a>
-                <a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
-                <a href="../index.html#pricing" class="nav-link">Preise</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
+        <div class="top-banner-center"><!-- Navigation removed --></div>
         <div class="top-banner-right">
             <button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
                 <img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
             </button>
-            <button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-                    <polyline points="10 17 15 12 10 7"></polyline>
-                    <line x1="15" y1="12" x2="3" y2="12"></line>
-                </svg>
-                Anmelden
-            </button>
         </div>
     </header>
 
@@ -61,7 +60,7 @@
         <!-- Leads Widget -->
         <div class="dashboard-container">
             <h2 class="dashboard-title">Meine Anfragen</h2>
-            <p class="dashboard-subtitle">Übersicht Ihrer aktuellen Projektanfragen</p>
+            <p class="dashboard-subtitle">Ãœbersicht Ihrer aktuellen Projektanfragen</p>
             
             <div class="leads-table-wrapper">
                 <table class="leads-table" id="leadsTable">
@@ -74,7 +73,7 @@
                         </tr>
                     </thead>
                     <tbody id="leadsTableBody">
-                        <!-- Populated by leads.js -->
+                        <!-- Populated by leads.min.js -->
                     </tbody>
                 </table>
             </div>
@@ -110,8 +109,95 @@
         </div>
     </main>
 
-    <script src="../scripts/leads.js"></script>
-    <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="../index.html#systeme" class="footer-link">KI Systeme</a>
+                        <a href="../index.html#interaction" class="footer-link">Demo</a>
+                        <a href="offers.html" class="footer-link">Kontakt</a>
+                        <a href="leads.html" class="footer-link">Dashboard</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="#" class="footer-link">Datenschutzerklärung</a>
+                        <a href="#" class="footer-link">Impressum</a>
+                        <a href="#" class="footer-link">AGB</a>
+                        <a href="#" class="footer-link">Cookie-Richtlinie</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>
+                            <span>+49 123 456789</span>
+                        </div>
+                        <div class="contact-item">
+                            <span class="contact-icon">✉️</span>
+                            <span>info@profice.de</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>
+                            </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>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <div class="footer-bottom-content">
+                    <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
+                    <div class="footer-bottom-links">
+                        <a href="#" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="#" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Optimized script loading -->
+    <script src="../scripts/script.js" defer></script>
+    <script src="../scripts/leads.min.js" defer></script>
+    <script src="../scripts/cursor.js" defer></script>
+    <script src="../scripts/scroll-header.min.js" defer></script>
 </body>
 </html>
+
diff --git a/Profice WebSite/sites/login.html b/Profice WebSite/sites/login.html
deleted file mode 100644
index 67c8da8..0000000
--- a/Profice WebSite/sites/login.html	
+++ /dev/null
@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice - Anmeldung</title>
-    <link rel="stylesheet" href="../style/design.css">
-    <link rel="stylesheet" href="../style/login.css">
-    <link rel="stylesheet" href="../style/cursor.css">
-</head>
-<body>
-    <!-- Top Banner -->
-    <header class="top-banner dark-theme">
-        <div class="top-banner-left">
-            <div class="banner-left">
-                <button class="menu-toggle" id="menuToggle" aria-label="Menü">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </button>
-                <a href="../index.html" class="logo-link">
-                    <img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
-                </a>
-            </div>
-        </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Startseite</a>
-                <a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
-                <a href="../index.html#pricing" class="nav-link">Preise</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
-        <div class="top-banner-right">
-            <button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
-                <img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
-            </button>
-            <button id="registerBtn" class="login-btn register" aria-label="Registrieren" title="Registrieren">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                    <circle cx="8.5" cy="7" r="4"></circle>
-                    <line x1="20" y1="8" x2="20" y2="14"></line>
-                    <line x1="23" y1="11" x2="17" y2="11"></line>
-                </svg>
-                Registrieren
-            </button>
-        </div>
-    </header>
-
-    <!-- Slide Menu -->
-    <nav class="slide-menu" id="slideMenu">
-        <a href="../index.html">Startseite</a>
-        <a href="offers.html">Kontakt & Anfrage</a>
-        <a href="leads.html">Leads Dashboard</a>
-    </nav>
-
-    <!-- Overlay -->
-    <div class="overlay" id="overlay"></div>
-
-    <!-- Main Content -->
-    <main class="main-content login-content">
-        <div class="login-container">
-            <div class="login-header">
-                <div class="login-icon">🔐</div>
-                <h1 class="login-title">Willkommen zurück</h1>
-                <p class="login-subtitle">Melden Sie sich an, um auf Ihr Konto zuzugreifen</p>
-            </div>
-
-            <form id="loginForm" class="login-form">
-                <div class="form-group">
-                    <label for="email">E-Mail</label>
-                    <input type="email" id="email" name="email" required placeholder="ihre@email.de">
-                </div>
-
-                <div class="form-group">
-                    <label for="password">Passwort</label>
-                    <input type="password" id="password" name="password" required placeholder="Passwort">
-                </div>
-
-                <div class="form-options">
-                    <label class="checkbox-label">
-                        <input type="checkbox" id="remember" name="remember">
-                        <span class="checkbox-custom"></span>
-                        Angemeldet bleiben
-                    </label>
-                    <a href="#" class="forgot-password">Passwort vergessen?</a>
-                </div>
-
-                <button type="submit" class="login-btn-submit" id="loginSubmit">
-                    <span class="btn-text">Anmelden</span>
-                    <span class="btn-loading" style="display: none;">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
-                            <polyline points="22 6 12 16 2 6"></polyline>
-                        </svg>
-                    </span>
-                </button>
-            </form>
-
-            <div class="login-divider">
-                <span>oder</span>
-            </div>
-
-            <div class="social-login">
-                <button type="button" class="social-btn google-btn">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c-.82 2.33-2.85 4.08-5.92 4.08-.57 0-1.11-.08-1.63-.24V14.6c.52.16 1.06.24 1.63.24 3.07 0 5.52-2.51 5.52-5.52 0-.1 0-.2-.01-.3-.57-2.53-2.11-4.52-4.52-4.52zM12 23c-1.61 0-3.09-.59-4.23-1.57l.01-.02V18.6l-.01.02c1.14-.98 2.62-1.57 4.23-1.57 3.07 0 5.52 2.51 5.52 5.52 0 .1 0 .2-.01.3z"/>
-                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.46l-2.85 2.22c-.81-.62-1.79-1.11-2.85-1.36-.52-.16-1.06-.24-1.63-.24-3.07 0-5.52 2.51-5.52 5.52 0 .1 0 .2.01.3.57 2.53 2.11 4.52 4.52 4.52z"/>
-                    </svg>
-                    Mit Google anmelden
-                </button>
-            </div>
-
-            <div class="login-footer">
-                <p>Noch kein Konto? <a href="register.html">Jetzt registrieren</a></p>
-            </div>
-
-            <div class="success-message" id="successMessage">
-                <div class="success-icon">✅</div>
-                <h3>Erfolgreich angemeldet!</h3>
-                <p>Sie werden weitergeleitet...</p>
-            </div>
-
-            <div class="error-message" id="errorMessage">
-                <div class="error-icon">❌</div>
-                <h3>Anmeldung fehlgeschlagen</h3>
-                <p id="errorText">Bitte überprüfen Sie Ihre Anmeldedaten.</p>
-            </div>
-        </div>
-    </main>
-
-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
-    <script src="../scripts/login.js"></script>
-</body>
-</html>
diff --git a/Profice WebSite/sites/offers.html b/Profice WebSite/sites/offers.html
index 16a42c3..f3669dc 100644
--- a/Profice WebSite/sites/offers.html	
+++ b/Profice WebSite/sites/offers.html	
@@ -1,9 +1,23 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice</title>
+    <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:type" content="website">
+    <meta name="robots" content="index, follow">
+    <title>Kontakt & Anfrage - Profice</title>
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="../style/design.css" as="style">
+    <link rel="preload" href="../style/cursor.css" as="style">
+    <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="../style/design.css">
     <link rel="stylesheet" href="../style/cursor.css">
 </head>
@@ -12,7 +26,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>
@@ -22,26 +36,11 @@
                 </a>
             </div>
         </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Startseite</a>
-                <a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
-                <a href="../index.html#pricing" class="nav-link">Preise</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
+        <div class="top-banner-center"><!-- Navigation removed --></div>
         <div class="top-banner-right">
             <button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
                 <img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
             </button>
-            <button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-                    <polyline points="10 17 15 12 10 7"></polyline>
-                    <line x1="15" y1="12" x2="3" y2="12"></line>
-                </svg>
-                Anmelden
-            </button>
         </div>
     </header>
 
@@ -63,7 +62,7 @@
             <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">
+                    <input type="text" id="name" name="name" required placeholder="Ihr vollstÃ¤ndiger Name">
                 </div>
 
                 <div class="form-group">
@@ -77,18 +76,18 @@
                 </div>
 
                 <div class="form-group">
-                    <label for="service">Gewünschte Dienstleistung *</label>
+                    <label for="service">GewÃ¼nschte Dienstleistung *</label>
                     <select id="service" name="service" required>
-                        <option value="" disabled selected>Bitte wählen...</option>
+                        <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>
+                        <option value="unabhaengige-wahl">UnabhÃ¤ngige Wahl</option>
                     </select>
                 </div>
 
                 <div class="form-group">
-                    <label for="budget">Budget (€)</label>
+                    <label for="budget">Budget (â‚¬)</label>
                     <input type="text" id="budget" name="budget" placeholder="z.B. 5000 - 10000">
                 </div>
 
@@ -107,8 +106,94 @@
         </div>
     </main>
 
-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="../index.html#systeme" class="footer-link">KI Systeme</a>
+                        <a href="../index.html#interaction" class="footer-link">Demo</a>
+                        <a href="offers.html" class="footer-link">Kontakt</a>
+                        <a href="leads.html" class="footer-link">Dashboard</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="#" class="footer-link">Datenschutzerklärung</a>
+                        <a href="#" class="footer-link">Impressum</a>
+                        <a href="#" class="footer-link">AGB</a>
+                        <a href="#" class="footer-link">Cookie-Richtlinie</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>
+                            <span>+49 123 456789</span>
+                        </div>
+                        <div class="contact-item">
+                            <span class="contact-icon">✉️</span>
+                            <span>info@profice.de</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>
+                            </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>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <div class="footer-bottom-content">
+                    <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
+                    <div class="footer-bottom-links">
+                        <a href="#" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="#" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Optimized script loading -->
+    <script src="../scripts/script.js" defer></script>
+    <script src="../scripts/cursor.js" defer></script>
+    <script src="../scripts/scroll-header.min.js" defer></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+
diff --git a/Profice WebSite/sites/register.html b/Profice WebSite/sites/register.html
deleted file mode 100644
index df45d01..0000000
--- a/Profice WebSite/sites/register.html	
+++ /dev/null
@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Registrierung - Profice</title>
-    <link rel="stylesheet" href="../style/design.css">
-    <link rel="stylesheet" href="../style/cursor.css">
-    <link rel="stylesheet" href="../style/login.css">
-</head>
-<body>
-    <!-- Top Banner -->
-    <header class="top-banner dark-theme">
-        <div class="top-banner-left">
-            <div class="banner-left">
-                <button class="menu-toggle" id="menuToggle" aria-label="Menü">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </button>
-                <a href="../index.html" class="logo-link">
-                    <img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
-                </a>
-            </div>
-        </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Startseite</a>
-                <a href="../index.html#enterprise" class="nav-link">Unternehmen</a>
-                <a href="../index.html#pricing" class="nav-link">Preise</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
-        <div class="top-banner-right">
-            <button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
-                <img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
-            </button>
-            <button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-                    <polyline points="10 17 15 12 10 7"></polyline>
-                    <line x1="15" y1="12" x2="3" y2="12"></line>
-                </svg>
-                Anmelden
-            </button>
-        </div>
-    </header>
-
-    <!-- Slide Menu -->
-    <nav class="slide-menu" id="slideMenu">
-        <a href="../index.html">Startseite</a>
-        <a href="offers.html">Kontakt & Anfrage</a>
-        <a href="leads.html">Leads Dashboard</a>
-    </nav>
-
-    <!-- Overlay -->
-    <div class="overlay" id="overlay"></div>
-
-    <!-- Main Content -->
-    <main class="main-content login-content">
-        <div class="login-container">
-            <div class="login-header">
-                <div class="login-icon">👤</div>
-                <h1 class="login-title">Konto erstellen</h1>
-                <p class="login-subtitle">Registrieren Sie sich, um auf alle Funktionen zuzugreifen</p>
-            </div>
-
-            <form id="registerForm" class="login-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="firstName">Vorname *</label>
-                        <input type="text" id="firstName" name="firstName" required placeholder="Max">
-                    </div>
-                    <div class="form-group">
-                        <label for="lastName">Nachname *</label>
-                        <input type="text" id="lastName" name="lastName" required placeholder="Mustermann">
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="email">E-Mail *</label>
-                    <input type="email" id="email" name="email" required placeholder="ihre@email.de">
-                </div>
-
-                <div class="form-group">
-                    <label for="phone">Telefonnummer</label>
-                    <input type="tel" id="phone" name="phone" placeholder="+49 123 456789">
-                </div>
-
-                <div class="form-group">
-                    <label for="company">Unternehmen</label>
-                    <input type="text" id="company" name="company" placeholder="Firmenname (optional)">
-                </div>
-
-                <div class="form-group">
-                    <label for="password">Passwort *</label>
-                    <input type="password" id="password" name="password" required placeholder="Mindestens 8 Zeichen">
-                    <div class="password-strength" id="passwordStrength">
-                        <div class="strength-bar"></div>
-                        <span class="strength-text">Passwortstärke</span>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="confirmPassword">Passwort bestätigen *</label>
-                    <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="Passwort wiederholen">
-                </div>
-
-                <div class="form-options">
-                    <label class="checkbox-label">
-                        <input type="checkbox" id="terms" name="terms" required>
-                        <span class="checkbox-custom"></span>
-                        Ich stimme den <a href="#" class="terms-link">Nutzungsbedingungen</a> und <a href="#" class="terms-link">Datenschutzrichtlinien</a> zu *
-                    </label>
-                </div>
-
-                <div class="form-options">
-                    <label class="checkbox-label">
-                        <input type="checkbox" id="newsletter" name="newsletter">
-                        <span class="checkbox-custom"></span>
-                        Ich möchte den Newsletter erhalten
-                    </label>
-                </div>
-
-                <button type="submit" class="login-btn-submit" id="registerSubmit">
-                    <span class="btn-text">Konto erstellen</span>
-                    <span class="btn-loading" style="display: none;">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
-                            <polyline points="22 6 12 16 2 6"></polyline>
-                        </svg>
-                    </span>
-                </button>
-            </form>
-
-            <div class="login-divider">
-                <span>oder</span>
-            </div>
-
-            <div class="social-login">
-                <button type="button" class="social-btn google-btn">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c-.82 2.33-2.85 4.08-5.92 4.08-.57 0-1.11-.08-1.63-.24V14.6c.52.16 1.06.24 1.63.24 3.07 0 5.52-2.51 5.52-5.52 0-.1 0-.2-.01-.3-.57-2.53-2.11-4.52-4.52-4.52zM12 23c-1.61 0-3.09-.59-4.23-1.57l.01-.02V18.6l-.01.02c1.14-.98 2.62-1.57 4.23-1.57 3.07 0 5.52 2.51 5.52 5.52 0 .1 0 .2-.01.3z"/>
-                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.46l-2.85 2.22c-.81-.62-1.79-1.11-2.85-1.36-.52-.16-1.06-.24-1.63-.24-3.07 0-5.52 2.51-5.52 5.52 0 .1 0 .2.01.3.57 2.53 2.11 4.52 4.52 4.52z"/>
-                    </svg>
-                    Mit Google registrieren
-                </button>
-            </div>
-
-            <div class="login-footer">
-                <p>Bereits ein Konto? <a href="login.html">Jetzt anmelden</a></p>
-            </div>
-
-            <div class="success-message" id="successMessage">
-                <div class="success-icon">✅</div>
-                <h3>Registrierung erfolgreich!</h3>
-                <p>Ihr Konto wurde erstellt. Sie werden weitergeleitet...</p>
-            </div>
-
-            <div class="error-message" id="errorMessage">
-                <div class="error-icon">❌</div>
-                <h3>Registrierung fehlgeschlagen</h3>
-                <p id="errorText">Bitte überprüfen Sie Ihre Eingaben.</p>
-            </div>
-        </div>
-    </main>
-
-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
-    <script src="../scripts/register.js"></script>
-</body>
-</html>
diff --git a/Profice WebSite/sites/website.html b/Profice WebSite/sites/website.html
index 996b65f..d2ed60d 100644
--- a/Profice WebSite/sites/website.html	
+++ b/Profice WebSite/sites/website.html	
@@ -1,11 +1,24 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Profice - Website Entwicklung</title>
+    <meta name="description" content="Profice - website Lösungen für digitale Transformation.">
+    <meta name="keywords" content="Profice, website, Webentwicklung, KI, Automatisierung">
+    <meta name="author" content="Profice">
+    <meta property="og:title" content="website - Profice">
+    <meta property="og:description" content="Profice website Lösungen">
+    <meta property="og:type" content="website">
+    <meta name="robots" content="index, follow">
+    <title>website - Profice</title>
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="../style/design.css" as="style">
+    <link rel="preload" href="../style/cursor.css" as="style">
+    <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="../style/design.css">
-    <link rel="stylesheet" href="../style/service.css">
     <link rel="stylesheet" href="../style/cursor.css">
 </head>
 <body>
@@ -23,14 +36,7 @@
                 </a>
             </div>
         </div>
-        <div class="top-banner-center">
-            <nav class="main-nav">
-                <a href="../index.html#hero-section" class="nav-link">Home</a>
-                <a href="../index.html#enterprise" class="nav-link">Enterprise</a>
-                <a href="../index.html#pricing" class="nav-link">Pricing</a>
-                <a href="../index.html#services" class="nav-link">Lösungen</a>
-            </nav>
-        </div>
+        <div class="top-banner-center"><!-- Navigation removed --></div>
         <div class="top-banner-right">
             <button id="cursorToggle" aria-label="Toggle Cursor" title="Toggle Custom Cursor">
                 <img src="../images/additional/cursor.png" alt="Default Cursor" class="cursor-icon">
@@ -61,17 +67,17 @@
         <div class="service-container">
             <!-- Service Header -->
             <div class="service-header">
-                <div class="service-icon">🌐</div>
+                <div class="service-icon">ðŸŒ</div>
                 <h1 class="service-title">Website Entwicklung</h1>
-                <p class="service-subtitle">Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren</p>
+                <p class="service-subtitle">Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt reprÃ¤sentieren</p>
             </div>
 
             <!-- Service Description -->
             <section class="service-section">
                 <h2 class="section-title">Unsere Webentwicklungsdienstleistungen</h2>
                 <p class="section-text">
-                    Wir entwickeln maßgeschneiderte Websites, die nicht nur gut aussehen, sondern auch Ergebnisse liefern. 
-                    Von der Konzeption über das Design bis zur Implementierung und Wartung begleiten wir Sie durch den gesamten Prozess.
+                    Wir entwickeln maÃŸgeschneiderte Websites, die nicht nur gut aussehen, sondern auch Ergebnisse liefern. 
+                    Von der Konzeption Ã¼ber das Design bis zur Implementierung und Wartung begleiten wir Sie durch den gesamten Prozess.
                 </p>
             </section>
 
@@ -80,32 +86,32 @@
                 <h2 class="section-title">Was wir bieten</h2>
                 <div class="features-grid">
                     <div class="feature-item">
-                        <div class="feature-icon">🎨</div>
+                        <div class="feature-icon">ðŸŽ¨</div>
                         <h3>Responsive Design</h3>
-                        <p>Perfekte Darstellung auf allen Geräten - von Desktop bis Mobile</p>
+                        <p>Perfekte Darstellung auf allen GerÃ¤ten - von Desktop bis Mobile</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">⚡</div>
+                        <div class="feature-icon">âš¡</div>
                         <h3>Performance-Optimierung</h3>
                         <p>Schnelle Ladezeiten und beste Nutzererfahrung</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🔒</div>
+                        <div class="feature-icon">ðŸ”’</div>
                         <h3>SEO-Freundlich</h3>
-                        <p>Technische Grundlagen für gute Suchmaschinenplatzierungen</p>
+                        <p>Technische Grundlagen fÃ¼r gute Suchmaschinenplatzierungen</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🔧</div>
+                        <div class="feature-icon">ðŸ”§</div>
                         <h3>CMS-Integration</h3>
-                        <p>Einfache Content-Verwaltung für Ihre Mitarbeiter</p>
+                        <p>Einfache Content-Verwaltung fÃ¼r Ihre Mitarbeiter</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">🛡️</div>
+                        <div class="feature-icon">ðŸ›¡ï¸</div>
                         <h3>Sicherheit</h3>
                         <p>Schutz vor Bedrohungen und sichere Datenverarbeitung</p>
                     </div>
                     <div class="feature-item">
-                        <div class="feature-icon">📊</div>
+                        <div class="feature-icon">ðŸ“Š</div>
                         <h3>Analytics & Tracking</h3>
                         <p>Detaillierte Auswertung Ihrer Website-Performance</p>
                     </div>
@@ -148,7 +154,7 @@
                         <div class="process-number">5</div>
                         <div class="process-content">
                             <h3>Support & Wartung</h3>
-                            <p>Laufende Optimierung und technische Unterstützung</p>
+                            <p>Laufende Optimierung und technische UnterstÃ¼tzung</p>
                         </div>
                     </div>
                 </div>
@@ -174,8 +180,8 @@
 
             <!-- CTA Section -->
             <section class="service-section">
-                <h2 class="section-title">Bereit für Ihre neue Website?</h2>
-                <p class="section-text">Lassen Sie uns Ihr Projekt an und wir erstellen ein maßgeschneidertes Angebot.</p>
+                <h2 class="section-title">Bereit fÃ¼r Ihre neue Website?</h2>
+                <p class="section-text">Lassen Sie uns Ihr Projekt an und wir erstellen ein maÃŸgeschneidertes Angebot.</p>
                 <div class="cta-buttons">
                     <a href="offers.html?service=website" class="cta-btn primary">Projekt starten</a>
                     <a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
@@ -184,8 +190,98 @@
         </div>
     </main>
 
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="../index.html#systeme" class="footer-link">KI Systeme</a>
+                        <a href="../index.html#interaction" class="footer-link">Demo</a>
+                        <a href="offers.html" class="footer-link">Kontakt</a>
+                        <a href="leads.html" class="footer-link">Dashboard</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="#" class="footer-link">Datenschutzerklärung</a>
+                        <a href="#" class="footer-link">Impressum</a>
+                        <a href="#" class="footer-link">AGB</a>
+                        <a href="#" class="footer-link">Cookie-Richtlinie</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>
+                            <span>+49 123 456789</span>
+                        </div>
+                        <div class="contact-item">
+                            <span class="contact-icon">✉️</span>
+                            <span>info@profice.de</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>
+                            </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>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <div class="footer-bottom-content">
+                    <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
+                    <div class="footer-bottom-links">
+                        <a href="#" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="#" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
     <script src="../scripts/script.js"></script>
     <script src="../scripts/cursor.js"></script>
-    <script src="../scripts/scroll-header.js"></script>
+    <!-- Optimized script loading -->
+    <script src="../scripts/script.js" defer></script>
+    <script src="../scripts/cursor.js" defer></script>
+    <script src="../scripts/scroll-header.min.js" defer></script>
 </body>
 </html>
+
+
+
diff --git a/Profice WebSite/style/cookie-consent.css b/Profice WebSite/style/cookie-consent.css
deleted file mode 100644
index 4cefaca..0000000
--- a/Profice WebSite/style/cookie-consent.css	
+++ /dev/null
@@ -1,307 +0,0 @@
-/* Cookie Consent System - Matches Profice Design System */
-
-/* Cookie Banner */
-.cookie-banner {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--primary-light);
-    border-top: 1px solid var(--primary-mid);
-    padding: 20px 40px;
-    z-index: 10000;
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
-    transform: translateY(100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.cookie-banner.show {
-    transform: translateY(0);
-}
-
-.cookie-banner-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 30px;
-}
-
-.cookie-text {
-    flex: 1;
-    color: var(--primary-dark);
-    font-size: 14px;
-    line-height: 1.5;
-}
-
-.cookie-text h3 {
-    margin: 0 0 8px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--primary-dark);
-}
-
-.cookie-text p {
-    margin: 0;
-    opacity: 0.8;
-}
-
-.cookie-text a {
-    color: var(--accent-teal);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.cookie-text a:hover {
-    text-decoration: underline;
-}
-
-.cookie-buttons {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-}
-
-.cookie-btn {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-decoration: none;
-    display: inline-block;
-}
-
-.cookie-btn-primary {
-    background: var(--primary-dark);
-    color: var(--primary-light);
-}
-
-.cookie-btn-primary:hover {
-    background: var(--primary-mid);
-    transform: translateY(-1px);
-}
-
-.cookie-btn-secondary {
-    background: transparent;
-    color: var(--primary-dark);
-    border: 2px solid var(--primary-mid);
-}
-
-.cookie-btn-secondary:hover {
-    background: var(--primary-mid);
-    color: var(--primary-light);
-}
-
-.cookie-btn-settings {
-    background: transparent;
-    color: var(--accent-teal);
-    border: none;
-    text-decoration: underline;
-    font-size: 14px;
-    padding: 5px 0;
-}
-
-.cookie-btn-settings:hover {
-    color: var(--primary-dark);
-}
-
-/* Cookie Settings Modal */
-.cookie-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 10001;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-}
-
-.cookie-modal.show {
-    opacity: 1;
-    visibility: visible;
-}
-
-.cookie-modal-content {
-    background: var(--primary-light);
-    border-radius: 12px;
-    padding: 30px;
-    max-width: 600px;
-    width: 90%;
-    max-height: 80vh;
-    overflow-y: auto;
-    transform: scale(0.9);
-    transition: transform 0.3s ease;
-}
-
-.cookie-modal.show .cookie-modal-content {
-    transform: scale(1);
-}
-
-.cookie-modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid var(--primary-mid);
-}
-
-.cookie-modal-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--primary-dark);
-    margin: 0;
-}
-
-.cookie-modal-close {
-    background: none;
-    border: none;
-    font-size: 24px;
-    color: var(--primary-mid);
-    cursor: pointer;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-}
-
-.cookie-modal-close:hover {
-    background: var(--primary-mid);
-    color: var(--primary-light);
-}
-
-.cookie-option {
-    margin-bottom: 20px;
-    padding: 15px;
-    border: 1px solid var(--primary-mid);
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.5);
-}
-
-.cookie-option-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-}
-
-.cookie-option-title {
-    font-weight: 600;
-    color: var(--primary-dark);
-    margin: 0;
-}
-
-.cookie-option-description {
-    color: var(--primary-mid);
-    font-size: 14px;
-    line-height: 1.4;
-    margin: 0;
-}
-
-.cookie-toggle {
-    position: relative;
-    width: 50px;
-    height: 26px;
-    background: var(--primary-mid);
-    border-radius: 13px;
-    cursor: pointer;
-    transition: background 0.3s ease;
-}
-
-.cookie-toggle.active {
-    background: var(--accent-teal);
-}
-
-.cookie-toggle-slider {
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border-radius: 50%;
-    transition: transform 0.3s ease;
-}
-
-.cookie-toggle.active .cookie-toggle-slider {
-    transform: translateX(24px);
-}
-
-.cookie-toggle.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.cookie-modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    margin-top: 25px;
-    padding-top: 20px;
-    border-top: 1px solid var(--primary-mid);
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .cookie-banner {
-        padding: 15px 20px;
-    }
-    
-    .cookie-banner-content {
-        flex-direction: column;
-        gap: 20px;
-        text-align: center;
-    }
-    
-    .cookie-buttons {
-        flex-direction: column;
-        width: 100%;
-        gap: 10px;
-    }
-    
-    .cookie-btn {
-        width: 100%;
-        text-align: center;
-    }
-    
-    .cookie-modal-content {
-        padding: 20px;
-        margin: 20px;
-    }
-    
-    .cookie-modal-footer {
-        flex-direction: column;
-    }
-    
-    .cookie-btn {
-        width: 100%;
-    }
-}
-
-@media (max-width: 480px) {
-    .cookie-text h3 {
-        font-size: 14px;
-    }
-    
-    .cookie-text p {
-        font-size: 13px;
-    }
-    
-    .cookie-modal-content {
-        padding: 15px;
-    }
-}
diff --git a/Profice WebSite/style/cursor.css b/Profice WebSite/style/cursor.css
index f757c04..621d741 100644
--- a/Profice WebSite/style/cursor.css	
+++ b/Profice WebSite/style/cursor.css	
@@ -32,9 +32,9 @@ body:not(.system-cursor) label {
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: 9999;
+    z-index: 999999;
     mix-blend-mode: normal;
-    display: none; /* Hidden by default */
+    display: none;
 }
 
 /* Show custom cursor only when not system cursor */
diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css
index 6d689e6..72ab474 100644
--- a/Profice WebSite/style/design.css	
+++ b/Profice WebSite/style/design.css	
@@ -20,7 +20,7 @@ body {
     min-height: 100vh;
 }
 
-/* Top Banner */
+/* Top Banner - Ultra Smooth Performance */
 .top-banner {
     background-color: var(--primary-light);
     color: var(--primary-dark);
@@ -29,50 +29,99 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 1001;
-    border-bottom: 1px solid #4f47471a;
-    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
-                padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    will-change: height, padding;
+    border-bottom: 3px solid var(--accent-orange);
+    overflow: hidden;
+    
+    /* Ultra-smooth transitions with hardware acceleration */
+    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
+                padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    
+    /* Performance optimizations */
+    will-change: height, padding, transform;
     transform: translateZ(0);
     backface-visibility: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     contain: layout style paint;
+    
+    /* Prevent sub-pixel rendering issues */
+    box-shadow: 0 0 0 rgba(0,0,0,0);
+}
+
+/* Scrolled state with smooth transitions */
+.top-banner.scrolled {
+    height: 70px;
+    padding: 5px 30px;
+    background-color: rgba(235, 235, 222, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 2px 20px rgba(79, 71, 71, 0.1);
+}
+
+/* Fast scroll state for velocity-based transitions */
+.top-banner.fast-scroll {
+    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;
     flex: 1;
+    position: relative;
+    z-index: 2;
 }
 
 .top-banner-center {
     display: flex;
     justify-content: center;
     flex: 2;
+    position: relative;
+    z-index: 2;
 }
 
 .top-banner-right {
     display: flex;
     justify-content: flex-end;
     flex: 1;
-}
-
-.top-banner.scrolled {
-    padding: 2px 30px;
-    height: 60px;
-}
-
-.top-banner.scrolled .menu-toggle,
-.top-banner.scrolled #cursorToggle {
-    width: 35px;
-    height: 35px;
-}
-
-.top-banner.scrolled .opening-hours {
-    font-size: 12px;
-    padding: 8px 15px;
+    position: relative;
+    z-index: 2;
 }
 
 .banner-left {
@@ -85,9 +134,62 @@ body {
     margin-right: 15px;
 }
 
-.search-container {
+.logo-link {
+    text-decoration: none;
     display: flex;
     align-items: center;
+    gap: 0;
+    margin-left: 0;
+    margin-right: 15px;
+}
+
+.logo {
+    height: 50px;
+    width: auto;
+    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    will-change: height;
+}
+
+.top-banner.scrolled .logo {
+    height: 40px;
+}
+
+.menu-toggle {
+    background: transparent;
+    border: 2px solid var(--primary-dark);
+    color: var(--primary-dark);
+    width: 45px;
+    height: 45px;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    will-change: width, height;
+}
+
+.top-banner.scrolled .menu-toggle,
+.top-banner.scrolled #cursorToggle {
+    width: 35px;
+    height: 35px;
+}
+
+.opening-hours {
+    font-size: 14px;
+    color: var(--primary-mid);
+    background: rgba(79, 71, 71, 0.08);
+    padding: 10px 20px;
+    border-radius: 25px;
+    transition: font-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
+                padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    will-change: font-size, padding;
+}
+
+.top-banner.scrolled .opening-hours {
+    font-size: 12px;
+    padding: 8px 15px;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 25px;
@@ -656,7 +758,7 @@ body {
 .top-banner.dark-theme {
     background-color: var(--primary-dark);
     color: var(--primary-light);
-    border-bottom: 1px solid rgba(235, 235, 222, 0.1);
+    border-bottom: 3px solid var(--accent-orange);
 }
 
 .top-banner.dark-theme .company-name {
@@ -692,6 +794,21 @@ body {
     transition: padding-top 0.2s ease-out;
 }
 
+/* Green Highlight Box */
+.green-highlight-box {
+    display: inline-block;
+    background: rgba(34, 197, 94, 0.5); /* 50% transparent green */
+    padding: 8px 16px 8px 16px;
+    border-radius: 8px;
+    color: var(--primary-dark);
+    font-weight: 500;
+    backdrop-filter: blur(2px);
+    border: 1px solid rgba(34, 197, 94, 0.3);
+    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
+    margin-right: 80px; /* Move even further to the left */
+    position: relative;
+}
+
 /* Hero Section */
 .hero-section {
     display: flex;
@@ -1039,4 +1156,339 @@ body {
     .opening-hours {
         display: none;
     }
+}
+
+/* Footer Banner Styles */
+.footer-banner {
+    background: #2a2a2a !important;
+    color: var(--primary-light) !important;
+    padding: 60px 0 30px;
+    margin: 80px 0 0 0;
+    border-top: 3px solid var(--accent-orange);
+    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%); }
+}
+
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 40px;
+    position: relative;
+    z-index: 1;
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+    width: 100%;
+    margin-bottom: 40px;
+    align-items: start;
+}
+
+.footer-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.footer-logo {
+    margin-bottom: 15px;
+}
+
+.footer-logo-img {
+    height: 40px;
+    width: auto;
+    filter: brightness(0) invert(1);
+    opacity: 0.9;
+}
+
+.footer-description p {
+    line-height: 1.6;
+    opacity: 0.8;
+    font-size: 14px;
+    margin: 0;
+}
+
+.footer-title {
+    color: var(--accent-orange);
+    font-size: 16px;
+    margin: 0 0 15px 0;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.footer-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.footer-link {
+    color: var(--primary-light);
+    text-decoration: none;
+    font-size: 14px;
+    opacity: 0.7;
+    transition: all 0.3s ease;
+    position: relative;
+    padding-left: 0;
+}
+
+.footer-link:hover {
+    opacity: 1;
+    color: var(--accent-orange);
+    transform: translateX(5px);
+}
+
+.footer-link::before {
+    content: '▸';
+    position: absolute;
+    left: -15px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    color: var(--accent-orange);
+}
+
+.footer-link:hover::before {
+    opacity: 1;
+}
+
+.footer-contact {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    opacity: 0.8;
+}
+
+.contact-icon {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+}
+
+.social-media {
+    margin-top: -10px;
+}
+
+.social-icons {
+    display: flex;
+    gap: 15px;
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-light);
+    text-decoration: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.social-link:hover {
+    background: var(--accent-orange);
+    transform: translateY(-3px) scale(1.1);
+    box-shadow: 0 8px 25px rgba(245, 124, 0, 0.3);
+}
+
+.social-link:hover svg {
+    filter: brightness(0) invert(1);
+}
+
+.social-link.instagram:hover {
+    background: linear-gradient(45deg, #E4405F, #C13584, #833AB4);
+    border-color: transparent;
+}
+
+.social-link.linkedin:hover {
+    background: #0077B5;
+    border-color: transparent;
+}
+
+.social-link img {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+}
+
+.social-link svg {
+    width: 16px;
+    height: 16px;
+    transition: transform 0.3s ease;
+}
+
+.social-link.facebook:hover svg {
+    filter: brightness(0) invert(1);
+}
+
+.social-link.instagram:hover svg {
+    filter: brightness(0) invert(1);
+}
+
+.footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 25px;
+    margin-top: 20px;
+}
+
+.footer-bottom-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer-bottom p {
+    opacity: 0.6;
+    font-size: 13px;
+    margin: 0;
+}
+
+.footer-bottom-links {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.footer-bottom-links .footer-link {
+    font-size: 13px;
+    opacity: 0.6;
+}
+
+.footer-bottom-links .footer-link:hover {
+    opacity: 1;
+}
+
+.separator {
+    opacity: 0.4;
+    font-size: 12px;
+}
+
+/* Footer Responsive Design */
+@media (max-width: 1024px) {
+    .footer-content {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 30px;
+    }
+}
+
+@media (max-width: 768px) {
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    
+    .footer-container {
+        padding: 0 20px;
+    }
+    
+    .footer-banner {
+        padding: 40px 0 25px;
+    }
+    
+    .footer-bottom-content {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+    
+    .social-icons {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .footer-banner {
+        padding: 30px 0 20px;
+        margin-top: 60px;
+    }
+    
+    .footer-content {
+        gap: 25px;
+    }
+    
+    .footer-title {
+        font-size: 15px;
+    }
+    
+    .footer-logo-img {
+        height: 35px;
+    }
+    
+    .social-link {
+        width: 35px;
+        height: 35px;
+    }
+    
+    .social-link svg {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+/* Chat Send Button Styles */
+.chat-send {
+    background: var(--accent-teal);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    padding: 0;
+    margin-left: 10px;
+    box-shadow: 0 2px 8px rgba(38, 166, 154, 0.3);
+}
+
+.chat-send:hover {
+    background: #1e8e82;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4);
+}
+
+.chat-send:active {
+    transform: scale(0.95);
+}
+
+.chat-send img {
+    width: 64px;
+    height: 64px;
+    filter: brightness(0) invert(1);
+    object-fit: contain;
 }
\ No newline at end of file
diff --git a/Profice WebSite/style/details.css b/Profice WebSite/style/details.css
deleted file mode 100644
index 2e13d8c..0000000
--- a/Profice WebSite/style/details.css	
+++ /dev/null
@@ -1,151 +0,0 @@
-/* Details Page Styles */
-
-.service-header {
-    text-align: center;
-    margin-bottom: 40px;
-    padding-bottom: 30px;
-    border-bottom: 2px solid var(--accent-teal);
-}
-
-.service-icon-large {
-    font-size: 64px;
-    margin-bottom: 20px;
-    display: block;
-}
-
-.service-title-large {
-    font-size: 36px;
-    color: var(--primary-dark);
-    margin-bottom: 15px;
-    font-weight: 600;
-}
-
-.service-description-large {
-    font-size: 18px;
-    color: var(--primary-mid);
-    line-height: 1.6;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.service-content {
-    margin-top: 40px;
-}
-
-.service-section {
-    margin-bottom: 40px;
-    padding: 30px;
-    background: var(--primary-light);
-    border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(79, 71, 71, 0.1);
-}
-
-.section-title {
-    font-size: 24px;
-    color: var(--primary-dark);
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-.section-text {
-    font-size: 16px;
-    line-height: 1.6;
-    color: var(--primary-mid);
-    margin-bottom: 20px;
-}
-
-.feature-list,
-.benefit-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.feature-list li,
-.benefit-list li {
-    padding: 12px 0;
-    border-bottom: 1px solid rgba(119, 119, 100, 0.1);
-    color: var(--primary-dark);
-    font-size: 16px;
-    position: relative;
-    padding-left: 30px;
-}
-
-.feature-list li:before,
-.benefit-list li:before {
-    content: "✓";
-    position: absolute;
-    left: 0;
-    color: var(--accent-teal);
-    font-weight: bold;
-    font-size: 18px;
-}
-
-.feature-list li:last-child,
-.benefit-list li:last-child {
-    border-bottom: none;
-}
-
-.cta-buttons {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    margin-top: 30px;
-    flex-wrap: wrap;
-}
-
-.back-button-container {
-    text-align: center;
-    margin-top: 40px;
-    padding-top: 30px;
-    border-top: 1px solid rgba(119, 119, 100, 0.2);
-}
-
-.error-message {
-    text-align: center;
-    padding: 40px;
-}
-
-.error-message h2 {
-    color: var(--primary-dark);
-    margin-bottom: 15px;
-}
-
-.error-message p {
-    color: var(--primary-mid);
-    margin-bottom: 25px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .service-icon-large {
-        font-size: 48px;
-    }
-    
-    .service-title-large {
-        font-size: 28px;
-    }
-    
-    .service-description-large {
-        font-size: 16px;
-    }
-    
-    .service-section {
-        padding: 20px;
-        margin-bottom: 25px;
-    }
-    
-    .section-title {
-        font-size: 20px;
-    }
-    
-    .cta-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .cta-btn {
-        width: 100%;
-        max-width: 300px;
-    }
-}
diff --git a/Profice WebSite/style/lead-details.css b/Profice WebSite/style/lead-details.css
deleted file mode 100644
index 51ee4ae..0000000
--- a/Profice WebSite/style/lead-details.css	
+++ /dev/null
@@ -1,408 +0,0 @@
-/* Lead Details Page Styles */
-
-.lead-details-container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 120px 20px 20px 20px;
-}
-
-.lead-header {
-    text-align: center;
-    margin-bottom: 50px;
-    padding-bottom: 30px;
-    border-bottom: 3px solid var(--accent-teal);
-}
-
-.lead-icon {
-    font-size: 72px;
-    margin-bottom: 20px;
-    display: block;
-}
-
-.lead-title {
-    font-size: 42px;
-    color: var(--primary-dark);
-    margin-bottom: 15px;
-    font-weight: 600;
-}
-
-.lead-subtitle {
-    font-size: 20px;
-    color: var(--primary-mid);
-    line-height: 1.6;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.lead-details-card {
-    background: white;
-    border-radius: 20px;
-    box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
-    overflow: hidden;
-}
-
-.detail-section {
-    padding: 40px;
-    border-bottom: 1px solid rgba(119, 119, 100, 0.1);
-}
-
-.detail-section:last-child {
-    border-bottom: none;
-}
-
-.section-title {
-    font-size: 24px;
-    color: var(--primary-dark);
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-/* Status Styles */
-.status-container {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.status-badge {
-    padding: 8px 16px;
-    border-radius: 20px;
-    font-size: 14px;
-    font-weight: 500;
-    display: inline-block;
-}
-
-.status-new {
-    background: #e3f2fd;
-    color: #1976d2;
-}
-
-.status-in-progress {
-    background: #fff3e0;
-    color: #f57c00;
-}
-
-.status-completed {
-    background: #e8f5e8;
-    color: #2e7d32;
-}
-
-.status-cancelled {
-    background: #ffebee;
-    color: #c62828;
-}
-
-.status-info {
-    color: var(--primary-mid);
-    font-size: 14px;
-}
-
-/* Info Grid */
-.info-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 25px;
-}
-
-.info-item {
-    background: var(--primary-light);
-    padding: 20px;
-    border-radius: 12px;
-    border-left: 4px solid var(--accent-teal);
-}
-
-.info-label {
-    font-size: 14px;
-    color: var(--primary-mid);
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-.info-value {
-    font-size: 18px;
-    color: var(--primary-dark);
-    font-weight: 500;
-}
-
-/* Service Info */
-.service-info {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    background: var(--primary-light);
-    padding: 30px;
-    border-radius: 16px;
-}
-
-.service-icon {
-    font-size: 48px;
-    flex-shrink: 0;
-}
-
-.service-details {
-    flex: 1;
-}
-
-.service-title {
-    font-size: 24px;
-    color: var(--accent-teal);
-    margin-bottom: 10px;
-}
-
-.service-description {
-    color: var(--primary-mid);
-    line-height: 1.5;
-}
-
-/* Description Box */
-.description-box {
-    background: var(--primary-light);
-    padding: 30px;
-    border-radius: 16px;
-    border-left: 4px solid var(--accent-teal);
-}
-
-.description-text {
-    color: var(--primary-dark);
-    line-height: 1.6;
-    font-size: 16px;
-    white-space: pre-wrap;
-}
-
-/* Timeline */
-.timeline {
-    position: relative;
-    padding-left: 30px;
-}
-
-.timeline::before {
-    content: '';
-    position: absolute;
-    left: 15px;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-    background: rgba(119, 119, 100, 0.2);
-}
-
-.timeline-item {
-    position: relative;
-    margin-bottom: 30px;
-    padding-left: 30px;
-}
-
-.timeline-item:last-child {
-    margin-bottom: 0;
-}
-
-.timeline-dot {
-    position: absolute;
-    left: -22px;
-    top: 5px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: rgba(119, 119, 100, 0.3);
-    border: 2px solid white;
-}
-
-.timeline-item.active .timeline-dot {
-    background: var(--accent-teal);
-    box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.2);
-}
-
-.timeline-content h4 {
-    color: var(--primary-dark);
-    margin-bottom: 5px;
-    font-size: 18px;
-}
-
-.timeline-content p {
-    color: var(--primary-mid);
-    font-size: 14px;
-}
-
-/* Action Buttons */
-.action-buttons {
-    display: flex;
-    gap: 15px;
-    flex-wrap: wrap;
-}
-
-.action-btn {
-    padding: 12px 24px;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.action-btn.primary {
-    background: var(--accent-teal);
-    color: white;
-}
-
-.action-btn.primary:hover {
-    background: #1e8e82;
-    transform: translateY(-2px);
-}
-
-.action-btn.secondary {
-    background: var(--primary-light);
-    color: var(--primary-dark);
-    border: 1px solid rgba(119, 119, 100, 0.2);
-}
-
-.action-btn.secondary:hover {
-    background: var(--primary-mid);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Navigation Buttons */
-.navigation-buttons {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    margin-top: 40px;
-    flex-wrap: wrap;
-}
-
-.cta-btn {
-    padding: 16px 32px;
-    border-radius: 30px;
-    font-size: 18px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    display: inline-block;
-}
-
-.cta-btn.primary {
-    background: var(--accent-teal);
-    color: white;
-    border: 2px solid var(--accent-teal);
-}
-
-.cta-btn.primary:hover {
-    background: white;
-    color: var(--accent-teal);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
-}
-
-.cta-btn.secondary {
-    background: transparent;
-    color: var(--primary-dark);
-    border: 2px solid var(--primary-dark);
-}
-
-.cta-btn.secondary:hover {
-    background: var(--primary-dark);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Error Message */
-.error-message {
-    text-align: center;
-    padding: 60px 20px;
-    background: white;
-    border-radius: 20px;
-    box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
-}
-
-.error-message h2 {
-    color: var(--primary-dark);
-    margin-bottom: 15px;
-}
-
-.error-message p {
-    color: var(--primary-mid);
-    margin-bottom: 25px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .lead-details-container {
-        padding: 100px 15px 20px 15px;
-    }
-    
-    .lead-icon {
-        font-size: 56px;
-    }
-    
-    .lead-title {
-        font-size: 32px;
-    }
-    
-    .lead-subtitle {
-        font-size: 18px;
-    }
-    
-    .detail-section {
-        padding: 30px 20px;
-    }
-    
-    .section-title {
-        font-size: 20px;
-    }
-    
-    .info-grid {
-        grid-template-columns: 1fr;
-        gap: 20px;
-    }
-    
-    .service-info {
-        flex-direction: column;
-        text-align: center;
-    }
-    
-    .service-icon {
-        font-size: 64px;
-    }
-    
-    .status-container {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 10px;
-    }
-    
-    .action-buttons,
-    .navigation-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .action-btn,
-    .cta-btn {
-        width: 100%;
-        max-width: 300px;
-    }
-}
-
-/* Print Styles */
-@media print {
-    .top-banner,
-    .slide-menu,
-    .overlay,
-    .navigation-buttons,
-    .action-buttons {
-        display: none !important;
-    }
-    
-    .lead-details-container {
-        padding: 20px;
-    }
-    
-    .lead-details-card {
-        box-shadow: none;
-        border: 1px solid #ddd;
-    }
-}
diff --git a/Profice WebSite/style/leads.min.css b/Profice WebSite/style/leads.min.css
new file mode 100644
index 0000000..caef58e
--- /dev/null
+++ b/Profice WebSite/style/leads.min.css	
@@ -0,0 +1 @@
+﻿.leads-content{max-width:900px}.dashboard-container{background:white;padding:40px;border-radius:24px;box-shadow:0 15px 50px rgba(79,71,71,0.1);margin-bottom:30px}.dashboard-title{color:var(--primary-dark);font-size:28px;margin-bottom:8px;font-weight:600}.dashboard-subtitle{color:var(--primary-mid);font-size:15px;margin-bottom:30px}.leads-table-wrapper{overflow-x:auto;border-radius:16px;border:1px solid rgba(119,119,100,0.15)}.leads-table{width:100%;border-collapse:collapse;min-width:500px}.leads-table thead{background:var(--primary-light)}.leads-table th{padding:16px 20px;text-align:left;font-weight:600;color:var(--primary-dark);font-size:14px;text-transform:uppercase;letter-spacing:0.5px}.leads-table td{padding:18px 20px;border-top:1px solid rgba(119,119,100,0.1);color:var(--primary-dark);font-size:15px}.leads-table tbody tr{transition:background 0.2s ease}.leads-table tbody tr:hover{background:rgba(235,235,222,0.5)}.status-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}.status-badge.completed{background:rgba(102,187,106,0.15);color:var(--accent-green)}.status-badge.in-progress{background:rgba(245,124,0,0.15);color:var(--accent-orange)}.status-badge.open{background:rgba(119,119,100,0.15);color:var(--primary-mid)}.action-btn{padding:8px 16px;background:transparent;border:2px solid var(--accent-teal);color:var(--accent-teal);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block}.action-btn:hover{background:var(--accent-teal);color:white}.offers-section{margin-top:30px}.offers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.offer-card{background:var(--primary-light);border-radius:20px;padding:30px;text-align:center;transition:all 0.3s ease;cursor:pointer}.offer-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(79,71,71,0.15);background:white}.offer-icon{font-size:40px;margin-bottom:16px}.offer-title{color:var(--primary-dark);font-size:20px;font-weight:600;margin-bottom:12px}.offer-description{color:var(--primary-mid);font-size:14px;line-height:1.6;margin-bottom:20px}.offer-btn{display:inline-block;padding:10px 24px;background:var(--accent-teal);color:white;text-decoration:none;border-radius:25px;font-size:14px;font-weight:600;transition:all 0.3s ease}.offer-btn:hover{background:#1e8e82;box-shadow:0 5px 20px rgba(38,166,154,0.3)}.slide-menu a.active{background:var(--primary-light);border-left-color:var(--accent-teal);color:var(--accent-teal)}.empty-state{text-align:center;padding:40px;color:var(--primary-mid)}.empty-state p{font-size:16px}@media (max-width:600px){.dashboard-container{padding:25px}.dashboard-title{font-size:22px}.leads-table th,.leads-table td{padding:12px 14px;font-size:13px}.offer-card{padding:20px}.offers-grid{grid-template-columns:1fr}}
\ No newline at end of file
diff --git a/Profice WebSite/style/login.css b/Profice WebSite/style/login.css
deleted file mode 100644
index f877ec7..0000000
--- a/Profice WebSite/style/login.css	
+++ /dev/null
@@ -1,547 +0,0 @@
-/* Login Page Styles */
-
-.login-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    padding: 120px 20px 20px 20px;
-    background: linear-gradient(135deg, var(--primary-light) 0%, white 100%);
-}
-
-.login-container {
-    width: 100%;
-    max-width: 450px;
-    background: white;
-    border-radius: 24px;
-    box-shadow: 0 20px 60px rgba(79, 71, 71, 0.15);
-    padding: 50px 40px;
-    position: relative;
-    overflow: hidden;
-}
-
-.login-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, var(--accent-teal), var(--accent-green));
-}
-
-.login-header {
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-.login-icon {
-    font-size: 64px;
-    margin-bottom: 20px;
-    display: block;
-}
-
-.login-title {
-    font-size: 32px;
-    color: var(--primary-dark);
-    margin-bottom: 10px;
-    font-weight: 600;
-}
-
-.login-subtitle {
-    color: var(--primary-mid);
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-.login-form {
-    margin-bottom: 30px;
-}
-
-.login-form .form-group {
-    position: relative;
-    margin-bottom: 25px;
-}
-
-.login-form .form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--primary-dark);
-    font-weight: 500;
-    font-size: 14px;
-}
-
-.login-form .form-group input {
-    width: 100%;
-    padding: 14px 45px 14px 18px;
-    border: 2px solid rgba(119, 119, 100, 0.2);
-    border-radius: 12px;
-    font-size: 16px;
-    transition: all 0.3s ease;
-    background: var(--primary-light);
-    color: var(--primary-dark);
-    outline: none;
-}
-
-.login-form .form-group input:focus {
-    border-color: var(--accent-teal);
-    background: white;
-    box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.15);
-}
-
-.input-icon {
-    position: absolute;
-    right: 18px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 20px;
-    color: var(--primary-mid);
-    pointer-events: none;
-}
-
-.password-toggle {
-    position: absolute;
-    right: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--primary-mid);
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-}
-
-.password-toggle:hover {
-    background: rgba(119, 119, 100, 0.1);
-    color: var(--primary-dark);
-}
-
-.form-options {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 30px;
-    font-size: 14px;
-}
-
-.checkbox-label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    color: var(--primary-dark);
-}
-
-.checkbox-label input[type="checkbox"] {
-    display: none;
-}
-
-.checkbox-custom {
-    width: 18px;
-    height: 18px;
-    border: 2px solid rgba(119, 119, 100, 0.3);
-    border-radius: 4px;
-    margin-right: 8px;
-    position: relative;
-    transition: all 0.3s ease;
-}
-
-.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
-    background: var(--accent-teal);
-    border-color: var(--accent-teal);
-}
-
-.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
-    content: '✓';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    font-size: 12px;
-    font-weight: bold;
-}
-
-.forgot-password {
-    color: var(--accent-teal);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-
-.forgot-password:hover {
-    color: var(--primary-dark);
-}
-
-.login-btn-submit {
-    width: 100%;
-    padding: 16px;
-    background: var(--accent-teal);
-    color: white;
-    border: none;
-    border-radius: 12px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}
-
-.login-btn-submit:hover:not(:disabled) {
-    background: #1e8e82;
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
-}
-
-.login-btn-submit:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
-.btn-loading svg {
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-
-.login-divider {
-    text-align: center;
-    margin: 30px 0;
-    position: relative;
-}
-
-.login-divider::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: rgba(119, 119, 100, 0.2);
-}
-
-.login-divider span {
-    background: white;
-    padding: 0 20px;
-    color: var(--primary-mid);
-    font-size: 14px;
-    position: relative;
-}
-
-.social-login {
-    margin-bottom: 30px;
-}
-
-.social-btn {
-    width: 100%;
-    padding: 14px;
-    border: 2px solid rgba(119, 119, 100, 0.2);
-    border-radius: 12px;
-    background: white;
-    color: var(--primary-dark);
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-}
-
-.social-btn:hover {
-    border-color: var(--primary-mid);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(79, 71, 71, 0.1);
-}
-
-.google-btn:hover {
-    border-color: #4285f4;
-    background: #f8f9fa;
-}
-
-.login-footer {
-    text-align: center;
-    font-size: 14px;
-    color: var(--primary-mid);
-}
-
-.login-footer a {
-    color: var(--accent-teal);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-
-.login-footer a:hover {
-    color: var(--primary-dark);
-}
-
-/* Messages */
-.success-message,
-.error-message {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 20px;
-    text-align: center;
-    transform: translateY(-100%);
-    transition: transform 0.3s ease;
-    z-index: 10;
-}
-
-.success-message.show,
-.error-message.show {
-    transform: translateY(0);
-}
-
-.success-message {
-    background: linear-gradient(135deg, #e8f5e8, #d4edda);
-    color: #2e7d32;
-}
-
-.error-message {
-    background: linear-gradient(135deg, #ffebee, #f8d7da);
-    color: #c62828;
-}
-
-.success-icon,
-.error-icon {
-    font-size: 48px;
-    margin-bottom: 10px;
-    display: block;
-}
-
-.success-message h3,
-.error-message h3 {
-    margin-bottom: 5px;
-    font-size: 18px;
-}
-
-.success-message p,
-.error-message p {
-    margin: 0;
-    font-size: 14px;
-}
-
-/* Login Button Styles */
-.login-btn {
-    background: transparent;
-    border: 2px solid var(--primary-dark);
-    color: var(--primary-dark);
-    padding: 8px 16px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-}
-
-.login-btn:hover {
-    background: var(--primary-dark);
-    color: white;
-    transform: translateY(-2px);
-}
-
-.register-btn {
-    background: transparent;
-    border: 2px solid var(--primary-dark);
-    color: var(--primary-dark);
-    padding: 8px 16px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.register-btn:hover {
-    background: var(--primary-dark);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Register Button (White version) */
-.login-btn.register {
-    background: transparent;
-    border: 2px solid white;
-    color: white;
-    padding: 8px 16px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-}
-
-.login-btn.register:hover {
-    background: white;
-    color: var(--primary-dark);
-    transform: translateY(-2px);
-}
-
-/* Ensure login button is white on register page */
-body .login-btn {
-    background: transparent !important;
-    border: 2px solid white !important;
-    color: white !important;
-}
-
-body .login-btn:hover {
-    background: white !important;
-    color: var(--primary-dark) !important;
-}
-
-/* Form Row for Two Columns */
-.form-row {
-    display: flex;
-    gap: 15px;
-    margin-bottom: 24px;
-}
-
-.form-row .form-group {
-    flex: 1;
-    margin-bottom: 0;
-}
-
-/* Password Strength Indicator */
-.password-strength {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.strength-bar {
-    flex: 1;
-    height: 4px;
-    background: #e0e0e0;
-    border-radius: 2px;
-    overflow: hidden;
-}
-
-.strength-bar::before {
-    content: '';
-    display: block;
-    height: 100%;
-    width: 0%;
-    transition: width 0.3s ease, background-color 0.3s ease;
-    background: #f44336;
-}
-
-.strength-text {
-    font-size: 12px;
-    color: var(--primary-mid);
-}
-
-/* Password Strength Levels */
-.strength-weak .strength-bar::before {
-    width: 33%;
-    background: #f44336;
-}
-
-.strength-medium .strength-bar::before {
-    width: 66%;
-    background: #ff9800;
-}
-
-.strength-strong .strength-bar::before {
-    width: 100%;
-    background: #4caf50;
-}
-
-.strength-weak .strength-text {
-    color: #f44336;
-}
-
-.strength-medium .strength-text {
-    color: #ff9800;
-}
-
-.strength-strong .strength-text {
-    color: #4caf50;
-}
-
-/* Terms Links */
-.terms-link {
-    color: var(--accent-teal);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.terms-link:hover {
-    text-decoration: underline;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .login-content {
-        padding: 100px 15px 20px 15px;
-    }
-    
-    .login-container {
-        padding: 40px 30px;
-        margin: 0 10px;
-    }
-    
-    .login-icon {
-        font-size: 56px;
-    }
-    
-    .login-title {
-        font-size: 28px;
-    }
-    
-    .login-subtitle {
-        font-size: 14px;
-    }
-    
-    .form-options {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 15px;
-    }
-    
-    .social-btn {
-        font-size: 14px;
-    }
-}
-
-@media (max-width: 480px) {
-    .login-container {
-        padding: 30px 20px;
-    }
-    
-    .login-title {
-        font-size: 24px;
-    }
-    
-    .login-form .form-group input {
-        font-size: 16px;
-        padding: 12px 40px 12px 15px;
-    }
-    
-    .input-icon,
-    .password-toggle {
-        right: 15px;
-    }
-}
diff --git a/Profice WebSite/style/service.css b/Profice WebSite/style/service.css
deleted file mode 100644
index aafe64e..0000000
--- a/Profice WebSite/style/service.css	
+++ /dev/null
@@ -1,339 +0,0 @@
-/* Service Page Styles */
-
-.service-container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 120px 20px 20px 20px;
-}
-
-.service-header {
-    text-align: center;
-    margin-bottom: 60px;
-    padding-bottom: 40px;
-    border-bottom: 3px solid var(--accent-teal);
-}
-
-.service-icon {
-    font-size: 72px;
-    margin-bottom: 20px;
-    display: block;
-}
-
-.service-title {
-    font-size: 42px;
-    color: var(--primary-dark);
-    margin-bottom: 15px;
-    font-weight: 600;
-}
-
-.service-subtitle {
-    font-size: 20px;
-    color: var(--primary-mid);
-    line-height: 1.6;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.service-section {
-    margin-bottom: 50px;
-    padding: 40px;
-    background: white;
-    border-radius: 20px;
-    box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
-}
-
-.section-title {
-    font-size: 28px;
-    color: var(--primary-dark);
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-.section-text {
-    font-size: 18px;
-    line-height: 1.6;
-    color: var(--primary-mid);
-    margin-bottom: 30px;
-}
-
-/* Features Grid */
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 30px;
-    margin-top: 30px;
-}
-
-.feature-item {
-    background: var(--primary-light);
-    padding: 30px;
-    border-radius: 16px;
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.feature-item:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(79, 71, 71, 0.15);
-}
-
-.feature-icon {
-    font-size: 48px;
-    margin-bottom: 15px;
-    display: block;
-}
-
-.feature-item h3 {
-    color: var(--accent-teal);
-    margin-bottom: 10px;
-    font-size: 20px;
-}
-
-.feature-item p {
-    color: var(--primary-mid);
-    line-height: 1.5;
-}
-
-/* Process Timeline */
-.process-timeline {
-    max-width: 800px;
-    margin: 40px auto 0;
-    position: relative;
-}
-
-.process-item {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 40px;
-    position: relative;
-}
-
-.process-number {
-    width: 50px;
-    height: 50px;
-    background: var(--accent-teal);
-    color: white;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    font-weight: bold;
-    flex-shrink: 0;
-    margin-right: 20px;
-}
-
-.process-content {
-    flex: 1;
-}
-
-.process-content h3 {
-    color: var(--primary-dark);
-    margin-bottom: 8px;
-    font-size: 20px;
-}
-
-.process-content p {
-    color: var(--primary-mid);
-    line-height: 1.5;
-}
-
-/* Tech Grid */
-.tech-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    justify-content: center;
-    margin: 30px 0;
-}
-
-.tech-item {
-    background: var(--primary-dark);
-    color: white;
-    padding: 12px 20px;
-    border-radius: 25px;
-    font-size: 14px;
-    font-weight: 500;
-    transition: transform 0.2s ease;
-}
-
-.tech-item:hover {
-    transform: translateY(-2px);
-    background: var(--accent-teal);
-}
-
-/* Benefits Grid */
-.benefits-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 25px;
-    margin-top: 30px;
-}
-
-.benefit-item {
-    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
-    color: white;
-    padding: 30px;
-    border-radius: 16px;
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.benefit-item:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(38, 166, 154, 0.3);
-}
-
-.benefit-icon {
-    font-size: 48px;
-    margin-bottom: 15px;
-    display: block;
-}
-
-.benefit-item h3 {
-    margin-bottom: 10px;
-    font-size: 20px;
-}
-
-.benefit-item p {
-    line-height: 1.5;
-}
-
-/* Use Cases Grid */
-.use-cases-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 25px;
-    margin-top: 30px;
-}
-
-.use-case-item {
-    background: var(--primary-light);
-    padding: 25px;
-    border-radius: 12px;
-    border-left: 4px solid var(--accent-teal);
-    transition: transform 0.3s ease;
-}
-
-.use-case-item:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(79, 71, 71, 0.1);
-}
-
-.use-case-item h3 {
-    color: var(--accent-teal);
-    margin-bottom: 10px;
-    font-size: 18px;
-}
-
-.use-case-item p {
-    color: var(--primary-mid);
-    line-height: 1.5;
-}
-
-/* CTA Buttons */
-.cta-buttons {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    margin-top: 40px;
-    flex-wrap: wrap;
-}
-
-.cta-btn {
-    padding: 16px 32px;
-    border-radius: 30px;
-    font-size: 18px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    display: inline-block;
-}
-
-.cta-btn.primary {
-    background: var(--accent-teal);
-    color: white;
-    border: 2px solid var(--accent-teal);
-}
-
-.cta-btn.primary:hover {
-    background: white;
-    color: var(--accent-teal);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
-}
-
-.cta-btn.secondary {
-    background: transparent;
-    color: var(--primary-dark);
-    border: 2px solid var(--primary-dark);
-}
-
-.cta-btn.secondary:hover {
-    background: var(--primary-dark);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .service-container {
-        padding: 100px 15px 20px 15px;
-    }
-    
-    .service-icon {
-        font-size: 56px;
-    }
-    
-    .service-title {
-        font-size: 32px;
-    }
-    
-    .service-subtitle {
-        font-size: 18px;
-    }
-    
-    .service-section {
-        padding: 30px 20px;
-        margin-bottom: 30px;
-    }
-    
-    .section-title {
-        font-size: 24px;
-    }
-    
-    .section-text {
-        font-size: 16px;
-    }
-    
-    .features-grid,
-    .benefits-grid,
-    .use-cases-grid {
-        grid-template-columns: 1fr;
-        gap: 20px;
-    }
-    
-    .process-item {
-        flex-direction: column;
-        text-align: center;
-        margin-bottom: 30px;
-    }
-    
-    .process-number {
-        margin: 0 auto 15px;
-    }
-    
-    .process-content {
-        text-align: center;
-    }
-    
-    .cta-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .cta-btn {
-        width: 100%;
-        max-width: 300px;
-    }
-}
diff --git a/Profice WebSite/style/tech-onepager-fixed.css b/Profice WebSite/style/tech-onepager-fixed.css
new file mode 100644
index 0000000..9c0b112
--- /dev/null
+++ b/Profice WebSite/style/tech-onepager-fixed.css	
@@ -0,0 +1,30 @@
+/* Fixed list styling for system cards */
+.what-it-does ul,
+.result ul {
+    list-style: none;
+    padding: 0;
+}
+
+.what-it-does li,
+.result li {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin-bottom: 8px;
+    padding-left: 20px;
+    position: relative;
+}
+
+.what-it-does li::before {
+    content: '→';
+    position: absolute;
+    left: 0;
+    color: var(--primary-mid);
+}
+
+.result li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--accent-green);
+    font-weight: bold;
+}
diff --git a/Profice WebSite/style/tech-onepager.css b/Profice WebSite/style/tech-onepager.css
new file mode 100644
index 0000000..ceb0ca6
--- /dev/null
+++ b/Profice WebSite/style/tech-onepager.css	
@@ -0,0 +1,2321 @@
+/**
+ * Tech-Onepager Styles - High-Conversion, Technology-Focused Design
+ * System being built aesthetic - not marketing campaign
+ */
+
+/* ===== TECH BACKGROUND ===== */
+.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;
+}
+
+.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;
+}
+
+/* ===== HERO SECTION ===== */
+.hero-section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    padding: 120px 40px 60px;
+    position: relative;
+}
+
+.hero-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.hero-left {
+    max-width: 600px;
+}
+
+.hero-headline {
+    font-size: clamp(2.5rem, 5vw, 3.5rem);
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--primary-dark);
+    margin-bottom: 24px;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.hero-subline {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    color: var(--primary-mid);
+    margin-bottom: 20px;
+    font-weight: 400;
+}
+
+.hero-proof {
+    font-size: 1.1rem;
+    color: var(--accent-teal);
+    font-weight: 500;
+    margin-bottom: 40px;
+    padding-left: 20px;
+    border-left: 3px solid var(--accent-teal);
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.cta-btn {
+    padding: 16px 32px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    text-decoration: none;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+}
+
+.cta-btn.primary {
+    background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
+    color: white;
+    box-shadow: 0 4px 20px rgba(102, 187, 106, 0.3);
+}
+
+.cta-btn.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(102, 187, 106, 0.4);
+}
+
+.cta-btn.secondary {
+    background: white;
+    color: var(--primary-dark);
+    border: 2px solid var(--primary-dark);
+}
+
+.cta-btn.secondary:hover {
+    background: var(--primary-dark);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* ===== SYSTEM GRAPHIC ===== */
+.hero-right {
+    position: relative;
+    height: 500px;
+}
+
+.system-graphic {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.connections {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.data-points {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.node {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid var(--primary-mid);
+    border-radius: 12px;
+    padding: 16px;
+    min-width: 120px;
+    text-align: center;
+    backdrop-filter: blur(15px);
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    cursor: pointer;
+    z-index: 3;
+    box-shadow: 0 4px 20px rgba(79, 71, 71, 0.1);
+}
+
+.node:hover {
+    border-color: var(--accent-teal);
+    box-shadow: 0 6px 25px rgba(38, 166, 154, 0.2);
+    background: rgba(255, 255, 255, 0.98);
+}
+
+/* Specific hover effects for outer nodes - updated for circular layout */
+.phone-node:hover {
+    transform: translate(-50%, -50%) scale(1.05);
+}
+
+.chat-node:hover {
+    transform: translate(50%, -50%) scale(1.05);
+}
+
+.crm-node:hover {
+    transform: translate(50%, -50%) scale(1.05);
+}
+
+.ticket-node:hover {
+    transform: translate(-50%, 50%) scale(1.05);
+}
+
+.team-node:hover {
+    transform: translate(-50%, -50%) scale(1.05);
+}
+
+.central-node {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    color: white;
+    border: none;
+    border-radius: 25px;
+    min-width: 140px;
+    max-width: 160px;
+    padding: 10px 20px;
+    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.4);
+    z-index: 4;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.central-node::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transform: rotate(45deg);
+    transition: all 0.6s ease;
+    opacity: 0;
+}
+
+.central-node:hover::before {
+    animation: shimmer 0.6s ease;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
+    50% { opacity: 1; }
+    100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
+}
+
+@keyframes nodePulse {
+    0%, 100% { 
+        transform: scale(1.08); 
+        box-shadow: 0 8px 30px rgba(38, 166, 154, 0.25);
+    }
+    50% { 
+        transform: scale(1.15); 
+        box-shadow: 0 12px 40px rgba(38, 166, 154, 0.4);
+    }
+}
+
+@keyframes centralNodePulse {
+    0%, 100% { 
+        transform: translate(-50%, -50%) scale(1.08); 
+        box-shadow: 0 12px 35px rgba(38, 166, 154, 0.5);
+    }
+    50% { 
+        transform: translate(-50%, -50%) scale(1.15); 
+        box-shadow: 0 16px 45px rgba(38, 166, 154, 0.7);
+    }
+}
+
+.central-node:hover {
+    transform: translate(-50%, -50%);
+    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.4);
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+}
+
+/* Linear workflow layout - evenly spaced nodes */
+.phone-node {
+    top: 15%;
+    left: 20%;
+    transform: translate(-50%, -50%);
+}
+
+.chat-node {
+    top: 15%;
+    right: 20%;
+    transform: translate(50%, -50%);
+}
+
+.crm-node {
+    top: 50%;
+    right: 15%;
+    transform: translate(50%, -50%);
+}
+
+.ticket-node {
+    bottom: 15%;
+    left: 20%;
+    transform: translate(-50%, 50%);
+}
+
+.team-node {
+    top: 50%;
+    left: 15%;
+    transform: translate(-50%, -50%);
+}
+
+.central-node .node-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+
+.central-node .node-icon {
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+.node .node-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.node .node-icon {
+    font-size: 1.5rem;
+}
+
+.node-label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.central-node .node-label {
+    color: white;
+}
+
+.connections {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.connection-line {
+    stroke: var(--accent-green);
+    stroke-width: 2;
+    fill: none;
+    opacity: 0.6;
+    stroke-dasharray: 5, 5; /* Dotted line pattern */
+    stroke-linecap: round;
+}
+
+.connection-line:hover {
+    opacity: 1;
+    stroke-width: 3;
+}
+
+/* ===== SYSTEME SECTION ===== */
+.systeme-section {
+    padding: 100px 40px;
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.section-headline {
+    font-size: 2.5rem;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 60px;
+    color: var(--primary-dark);
+}
+
+.systeme-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 40px;
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+.system-card {
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(79, 71, 71, 0.1);
+    border-radius: 16px;
+    padding: 40px;
+    backdrop-filter: blur(20px);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    max-width: 900px;
+}
+
+.system-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, var(--accent-teal), var(--accent-green));
+}
+
+.system-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(79, 71, 71, 0.1);
+    border-color: var(--accent-teal);
+}
+
+.system-visual {
+    margin-bottom: 30px;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+/* Enhanced Technical Flow Visuals */
+.tech-flow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.2rem;
+    position: relative;
+}
+
+.flow-item {
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px solid rgba(79, 71, 71, 0.2);
+    border-radius: 10px;
+    padding: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.flow-item:hover {
+    border-color: var(--accent-teal);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.15);
+}
+
+.flow-arrow {
+    color: var(--primary-mid);
+    font-weight: bold;
+    font-size: 1.4rem;
+    position: relative;
+    z-index: 1;
+}
+
+.flow-arrow::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--accent-teal), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.tech-flow:hover .flow-arrow::after {
+    opacity: 1;
+    animation: arrowFlow 1.5s ease-in-out infinite;
+}
+
+@keyframes arrowFlow {
+    0% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
+    50% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
+    100% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
+}
+
+/* Electric Workflow Animation */
+.electric-workflow {
+    position: relative;
+    width: 100%;
+    height: 250px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    max-width: 900px;
+}
+
+.workflow-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+/* Background paths (always visible gray dashed lines) */
+.background-paths {
+    position: relative;
+    z-index: 1;
+}
+
+/* Animated paths and borders (green overlay) */
+.animated-paths, .node-borders {
+    position: relative;
+    z-index: 3;
+}
+
+.electric-path {
+    opacity: 0;
+    transition: all 0.3s ease;
+    stroke-dashoffset: 150;
+}
+
+.electric-spark {
+    filter: url(#glow);
+    opacity: 0;
+    transform: translate(0, 0);
+}
+
+.node-border {
+    fill: none;
+    stroke: rgba(79, 71, 71, 0.2);
+    stroke-width: 2;
+    stroke-dasharray: 200;
+    stroke-dashoffset: 200;
+    transition: all 0.3s ease;
+}
+
+.workflow-nodes {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.workflow-nodes .node {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    background: rgba(79, 71, 71, 0.05);
+    border: 1px solid rgba(79, 71, 71, 0.1);
+    border-radius: 8px;
+    padding: 12px 24px;
+    min-width: 50px;
+    transition: all 0.3s ease;
+}
+
+/* Exact coordinate positioning for mathematical alignment */
+.workflow-nodes .node-1 {
+    left: 50px;
+    top: 125px;
+    transform: translate(-50%, -50%);
+}
+
+.workflow-nodes .node-2 {
+    left: 450px;
+    top: 60px;
+    transform: translate(-50%, -50%);
+}
+
+.workflow-nodes .node-3 {
+    left: 450px;
+    top: 190px;
+    transform: translate(-50%, -50%);
+}
+
+.workflow-nodes .node-4 {
+    left: 800px;
+    top: 125px;
+    transform: translate(-50%, -50%);
+}
+
+.workflow-nodes .node-5 {
+    left: 880px;
+    top: 125px;
+    transform: translate(-50%, -50%);
+}
+
+/* Single Unified 12-Second Animation Timeline - Mathematical Precision */
+
+/* Node 1: 0-8% border trace */
+@keyframes node1Glow {
+    0%, 8%, 100% { stroke-dashoffset: 200; stroke: rgba(79, 71, 71, 0.2); filter: none; }
+    4% { stroke-dashoffset: 0; stroke: #00FF00; filter: drop-shadow(0 0 15px #00FF00); }
+    8%, 100% { stroke-dashoffset: 0; stroke: rgba(0, 255, 0, 0.9); filter: drop-shadow(0 0 10px #00FF00); }
+}
+
+/* Path 1: 8-16% from Node 1 to Split Point */
+@keyframes path1Glow {
+    0%, 8%, 100% { opacity: 0; stroke-dashoffset: 150; }
+    8%, 16% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 12px #00FF00); }
+    16%, 100% { opacity: 1; stroke-dashoffset: 0; }
+}
+
+/* Spark 1: 8-16% moves along Path 1 (stroke-dasharray trail) */
+@keyframes spark1Move {
+    0%, 8%, 16%, 100% { opacity: 0; }
+    12% { opacity: 1; transform: translate(125px, 125px); }
+    16% { opacity: 0; transform: translate(200px, 125px); }
+}
+
+/* Nodes 2&3: 16-35% border trace (parallel with paths) */
+@keyframes node2Glow {
+    0%, 16%, 35%, 100% { stroke-dashoffset: 200; stroke: rgba(79, 71, 71, 0.2); filter: none; }
+    25% { stroke-dashoffset: 0; stroke: #00FF00; filter: drop-shadow(0 0 15px #00FF00); }
+    35%, 100% { stroke-dashoffset: 0; stroke: rgba(0, 255, 0, 0.9); filter: drop-shadow(0 0 10px #00FF00); }
+}
+
+@keyframes node3Glow {
+    0%, 16%, 35%, 100% { stroke-dashoffset: 200; stroke: rgba(79, 71, 71, 0.2); filter: none; }
+    25% { stroke-dashoffset: 0; stroke: #00FF00; filter: drop-shadow(0 0 15px #00FF00); }
+    35%, 100% { stroke-dashoffset: 0; stroke: rgba(0, 255, 0, 0.9); filter: drop-shadow(0 0 10px #00FF00); }
+}
+
+/* Paths 2a&2b: 16-35% from Split Point to Nodes 2&3 (parallel with borders) */
+@keyframes path2Glow {
+    0%, 16%, 35%, 100% { opacity: 0; stroke-dashoffset: 265; }
+    16%, 35% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 12px #00FF00); }
+    35%, 100% { opacity: 1; stroke-dashoffset: 0; }
+}
+
+/* Sparks 2a&2b: 16-35% move along Paths 2a&2b (stroke-dasharray trail) */
+@keyframes spark2aMove {
+    0%, 16%, 35%, 100% { opacity: 0; }
+    20% { opacity: 1; transform: translate(200px, 125px); }
+    27% { opacity: 1; transform: translate(325px, 60px); }
+    35% { opacity: 0; transform: translate(450px, 60px); }
+}
+
+@keyframes spark2bMove {
+    0%, 16%, 35%, 100% { opacity: 0; }
+    20% { opacity: 1; transform: translate(200px, 125px); }
+    27% { opacity: 1; transform: translate(325px, 190px); }
+    35% { opacity: 0; transform: translate(450px, 190px); }
+}
+
+/* Paths 3a&3b: 35-50% from Nodes 2&3 to Merge Point */
+@keyframes path3Glow {
+    0%, 35%, 50%, 100% { opacity: 0; stroke-dashoffset: 315; }
+    35%, 50% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 12px #00FF00); }
+    50%, 100% { opacity: 1; stroke-dashoffset: 0; }
+}
+
+/* Sparks 3a&3b: 35-50% move along Paths 3a&3b (stroke-dasharray trail) */
+@keyframes spark3aMove {
+    0%, 35%, 50%, 100% { opacity: 0; }
+    40% { opacity: 1; transform: translate(450px, 60px); }
+    45% { opacity: 1; transform: translate(575px, 60px); }
+    50% { opacity: 0; transform: translate(700px, 125px); }
+}
+
+@keyframes spark3bMove {
+    0%, 35%, 50%, 100% { opacity: 0; }
+    40% { opacity: 1; transform: translate(450px, 190px); }
+    45% { opacity: 1; transform: translate(575px, 190px); }
+    50% { opacity: 0; transform: translate(700px, 125px); }
+}
+
+/* Node 4: 50-65% border trace */
+@keyframes node4Glow {
+    0%, 50%, 65%, 100% { stroke-dashoffset: 200; stroke: rgba(79, 71, 71, 0.2); filter: none; }
+    57% { stroke-dashoffset: 0; stroke: #00FF00; filter: drop-shadow(0 0 15px #00FF00); }
+    65%, 100% { stroke-dashoffset: 0; stroke: rgba(0, 255, 0, 0.9); filter: drop-shadow(0 0 10px #00FF00); }
+}
+
+/* Path 4: 65-75% from Merge Point to Node 4 */
+@keyframes path4Glow {
+    0%, 65%, 75%, 100% { opacity: 0; stroke-dashoffset: 100; }
+    65%, 75% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 12px #00FF00); }
+    75%, 100% { opacity: 1; stroke-dashoffset: 0; }
+}
+
+/* Spark 4: 65-75% moves along Path 4 (stroke-dasharray trail) */
+@keyframes spark4Move {
+    0%, 65%, 75%, 100% { opacity: 0; }
+    70% { opacity: 1; transform: translate(700px, 125px); }
+    75% { opacity: 0; transform: translate(800px, 125px); }
+}
+
+/* Path 5: 75-90% from Node 4 to Node 5 */
+@keyframes path5Glow {
+    0%, 75%, 90%, 100% { opacity: 0; stroke-dashoffset: 80; }
+    75%, 90% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 12px #00FF00); }
+    90%, 100% { opacity: 1; stroke-dashoffset: 0; }
+}
+
+/* Spark 5: 75-90% moves along Path 5 (stroke-dasharray trail) */
+@keyframes spark5Move {
+    0%, 75%, 90%, 100% { opacity: 0; }
+    82% { opacity: 1; transform: translate(800px, 125px); }
+    90% { opacity: 0; transform: translate(880px, 125px); }
+}
+
+/* Node 5: 75-90% border trace */
+@keyframes node5Glow {
+    0%, 75%, 90%, 100% { stroke-dashoffset: 200; stroke: rgba(79, 71, 71, 0.2); filter: none; }
+    82% { stroke-dashoffset: 0; stroke: #00FF00; filter: drop-shadow(0 0 15px #00FF00); }
+    90%, 100% { stroke-dashoffset: 0; stroke: rgba(0, 255, 0, 0.9); filter: drop-shadow(0 0 10px #00FF00); }
+}
+
+/* Apply unified 12-second animations to all elements */
+#node1-border { animation: node1Glow 12s infinite; }
+#path1 { animation: path1Glow 12s infinite; }
+#spark1 { animation: spark1Move 12s infinite; }
+
+#node2-border { animation: node2Glow 12s infinite; }
+#node3-border { animation: node3Glow 12s infinite; }
+#path2a, #path2b { animation: path2Glow 12s infinite; }
+#spark2a { animation: spark2aMove 12s infinite; }
+#spark2b { animation: spark2bMove 12s infinite; }
+
+#path3a, #path3b { animation: path3Glow 12s infinite; }
+#spark3a { animation: spark3aMove 12s infinite; }
+#spark3b { animation: spark3bMove 12s infinite; }
+
+#node4-border { animation: node4Glow 12s infinite; }
+#path4 { animation: path4Glow 12s infinite; }
+#spark4 { animation: spark4Move 12s infinite; }
+
+#node5-border { animation: node5Glow 12s infinite; }
+#path5 { animation: path5Glow 12s infinite; }
+#spark5 { animation: spark5Move 12s infinite; }
+
+/* Node Tooltip Styles */
+.node-tooltip {
+    position: absolute;
+    background: rgba(79, 71, 71, 0.95);
+    color: var(--primary-light);
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 1.4;
+    max-width: 280px;
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 25px rgba(79, 71, 71, 0.3);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.node-tooltip.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.node-tooltip::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid rgba(79, 71, 71, 0.95);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .electric-workflow {
+        height: 220px;
+    }
+    
+    .workflow-nodes .node {
+        font-size: 1.2rem;
+        padding: 8px 16px;
+        min-width: 40px;
+    }
+    
+    .node-tooltip {
+        font-size: 12px;
+        max-width: 220px;
+        padding: 10px 12px;
+    }
+    
+    .workflow-nodes .node-1 { left: 5%; }
+    .workflow-nodes .node-2 { left: 35%; top: 20%; }
+    .workflow-nodes .node-3 { left: 35%; top: 80%; }
+    .workflow-nodes .node-4 { left: 65%; }
+    .workflow-nodes .node-5 { left: 85%; }
+}
+
+/* Phone System Visual */
+.phone-system {
+    position: relative;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.phone-icon {
+    width: 35px;
+    height: 35px;
+    background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1rem;
+    position: relative;
+}
+
+.phone-icon::after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    width: 12px;
+    height: 12px;
+    background: var(--accent-green);
+    border-radius: 50%;
+    /* animation: pulse 2s infinite; */
+}
+
+.waveform {
+    flex: 1;
+    height: 25px;
+    margin: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.waveform-bar {
+    width: 3px;
+    height: 8px;
+    background: var(--accent-teal);
+    margin: 0 2px;
+    border-radius: 2px;
+    animation: wave 1s ease-in-out infinite;
+}
+
+.waveform-bar:nth-child(2) { animation-delay: 0.1s; height: 12px; }
+.waveform-bar:nth-child(3) { animation-delay: 0.2s; height: 16px; }
+.waveform-bar:nth-child(4) { animation-delay: 0.3s; height: 20px; }
+.waveform-bar:nth-child(5) { animation-delay: 0.4s; height: 16px; }
+.waveform-bar:nth-child(6) { animation-delay: 0.5s; height: 12px; }
+.waveform-bar:nth-child(7) { animation-delay: 0.6s; height: 8px; }
+
+@keyframes wave {
+    0%, 100% { transform: scaleY(1); }
+    50% { transform: scaleY(1.5); }
+}
+
+.ki-processor {
+    width: 38px;
+    height: 38px;
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.2rem;
+    position: relative;
+    box-shadow: 0 4px 15px rgba(38, 166, 154, 0.3);
+}
+
+.ki-processor::before {
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    right: -3px;
+    bottom: -3px;
+    border: 2px solid rgba(38, 166, 154, 0.3);
+    border-radius: 17px;
+    /* animation: rotate 3s linear infinite; */
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.crm-output {
+    width: 35px;
+    height: 35px;
+    background: rgba(79, 71, 71, 0.1);
+    border: 2px solid var(--primary-mid);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-dark);
+    font-size: 1rem;
+    position: relative;
+}
+
+.crm-output::after {
+    content: '✓';
+    position: absolute;
+    bottom: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    background: var(--accent-green);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+/* Chat System Visual */
+.chat-system {
+    position: relative;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.website-input {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5rem;
+    position: relative;
+}
+
+.website-input::after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    width: 12px;
+    height: 12px;
+    background: var(--accent-green);
+    border-radius: 50%;
+    /* animation: pulse 2s infinite; */
+}
+
+.category-output {
+    width: 50px;
+    height: 50px;
+    background: rgba(102, 187, 106, 0.15);
+    border: 2px solid var(--accent-green);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent-green);
+    font-size: 1.3rem;
+    position: relative;
+}
+
+.category-output::after {
+    content: '✓';
+    position: absolute;
+    bottom: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    background: var(--accent-green);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.human-output {
+    width: 50px;
+    height: 50px;
+    background: rgba(79, 71, 71, 0.1);
+    border: 2px solid var(--primary-mid);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-dark);
+    font-size: 1.3rem;
+    position: relative;
+}
+
+/* Internal System Visual */
+.internal-system {
+    position: relative;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.search-input {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5rem;
+    position: relative;
+}
+
+.search-input::after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    width: 12px;
+    height: 12px;
+    background: var(--accent-green);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+.documents-cloud {
+    width: 50px;
+    height: 50px;
+    background: rgba(79, 71, 71, 0.1);
+    border: 2px solid var(--primary-mid);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-dark);
+    font-size: 1.3rem;
+    position: relative;
+}
+
+.documents-cloud::before {
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    right: -3px;
+    bottom: -3px;
+    border: 1px dashed rgba(79, 71, 71, 0.3);
+    border-radius: 50%;
+    /* animation: rotate 4s linear infinite; */
+}
+
+.answer-output {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
+    border: 2px solid rgba(255, 193, 7, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 193, 7, 0.8);
+    font-size: 1.3rem;
+    position: relative;
+    box-shadow: 0 0 20px rgba(255, 193, 7, 0.2);
+}
+
+.answer-output::after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    right: -5px;
+    bottom: -5px;
+    background: radial-gradient(circle, rgba(255, 193, 7, 0.3), transparent);
+    border-radius: 50%;
+    /* animation: glow 2s ease-in-out infinite; */
+}
+
+@keyframes glow {
+    0%, 100% { transform: scale(1); opacity: 0.5; }
+    50% { transform: scale(1.2); opacity: 0.8; }
+}
+
+.chat-message {
+    background: transparent;
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    font-size: 0.9rem;
+}
+
+.chat-message.user {
+    background: transparent;
+}
+
+.chat-message.ai {
+    background: transparent;
+}
+
+.chat-label {
+    background: var(--accent-teal);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+    display: inline-block;
+}
+
+.data-card {
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(79, 71, 71, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-top: 10px;
+}
+
+.card-field {
+    font-size: 0.85rem;
+    color: var(--primary-mid);
+    margin-bottom: 4px;
+}
+
+.search-flow {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    max-width: 300px;
+}
+
+.search-field {
+    background: rgba(79, 71, 71, 0.05);
+    border: 1px solid rgba(79, 71, 71, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    width: 100%;
+    text-align: center;
+    font-size: 0.9rem;
+}
+
+.documents {
+    font-size: 1.5rem;
+}
+
+.answer-card {
+    background: rgba(102, 187, 106, 0.1);
+    border: 1px solid var(--accent-green);
+    border-radius: 8px;
+    padding: 12px;
+    width: 100%;
+    text-align: center;
+    font-weight: 600;
+    color: var(--primary-dark);
+}
+
+.system-card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: var(--primary-dark);
+}
+
+.system-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+.what-it-does h4,
+.result h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: var(--primary-dark);
+}
+
+.what-it-does ul,
+.result ul {
+    list-style: none;
+    padding: 0;
+}
+
+.what-it-does li,
+.result li {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin-bottom: 8px;
+    padding-left: 20px;
+    position: relative;
+}
+
+.what-it-does li::before {
+    content: '→';
+    position: absolute;
+    left: 0;
+    color: var(--primary-mid);
+}
+
+.result li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--accent-green);
+    font-weight: bold;
+}
+
+/* ===== QUALIFICATION SECTION ===== */
+.qualification-section {
+    padding: 100px 40px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+.qualification-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.qual-left {
+    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.05));
+    border: 2px solid rgba(244, 67, 54, 0.2);
+    border-radius: 20px;
+    padding: 40px;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(15px);
+    transition: all 0.3s ease;
+}
+
+.qual-left::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, rgba(244, 67, 54, 0.6), rgba(244, 67, 54, 0.2));
+}
+
+.qual-left:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(244, 67, 54, 0.15);
+    border-color: rgba(244, 67, 54, 0.3);
+}
+
+.qual-right {
+    background: linear-gradient(135deg, rgba(102, 187, 106, 0.1), rgba(102, 187, 106, 0.05));
+    border: 2px solid rgba(102, 187, 106, 0.2);
+    border-radius: 20px;
+    padding: 40px;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(15px);
+    transition: all 0.3s ease;
+}
+
+.qual-right::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, rgba(102, 187, 106, 0.6), rgba(102, 187, 106, 0.2));
+}
+
+.qual-right:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(102, 187, 106, 0.15);
+    border-color: rgba(102, 187, 106, 0.3);
+}
+
+.qualification-grid h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 30px;
+    color: var(--primary-dark);
+}
+
+.qual-list {
+    list-style: none;
+    padding: 0;
+}
+
+.qual-item {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.qual-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+    flex-shrink: 0;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.qual-icon.chaos {
+    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
+    border: 2px solid rgba(244, 67, 54, 0.3);
+    position: relative;
+}
+
+.qual-icon.chaos::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    background: rgba(244, 67, 54, 0.1);
+    border-radius: 4px;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.qual-icon.chaos::after {
+    content: '✕';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(244, 67, 54, 0.6);
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+.qual-icon.check {
+    background: linear-gradient(135deg, rgba(102, 187, 106, 0.2), rgba(102, 187, 106, 0.1));
+    border: 2px solid rgba(102, 187, 106, 0.3);
+    color: #4CAF50;
+    font-weight: bold;
+    position: relative;
+}
+
+.qual-icon.check::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 24px;
+    background: rgba(102, 187, 106, 0.1);
+    border-radius: 50%;
+    animation: checkPulse 2s ease-in-out infinite;
+}
+
+@keyframes checkPulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
+    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; }
+}
+
+/* ===== PROCESS SECTION ===== */
+.process-section {
+    padding: 100px 40px;
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+    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;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: 60px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    z-index: 2;
+}
+
+.process-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    position: relative;
+    z-index: 3;
+}
+
+.step-circle {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: white;
+    border: 3px solid var(--primary-mid);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-mid);
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(79, 71, 71, 0.1);
+}
+
+.step-circle::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, var(--accent-teal), var(--accent-green));
+    border-radius: 50%;
+    transition: all 0.4s ease;
+    z-index: -1;
+}
+
+.step-circle.active {
+    background: var(--accent-teal);
+    border-color: var(--accent-teal);
+    color: white;
+    box-shadow: 0 12px 40px rgba(38, 166, 154, 0.4);
+    transform: scale(1.1);
+}
+
+.step-circle.active::before {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.3;
+}
+
+.step-circle:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px rgba(79, 71, 71, 0.15);
+}
+
+.step-circle.active:hover {
+    transform: scale(1.15);
+    box-shadow: 0 15px 45px rgba(38, 166, 154, 0.5);
+}
+
+.step-label {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--primary-dark);
+    transition: all 0.3s ease;
+    opacity: 0.7;
+}
+
+.step-circle.active + .step-label {
+    opacity: 1;
+    color: var(--accent-teal);
+    font-weight: 700;
+}
+
+.process-connector {
+    width: 100px;
+    height: 3px;
+    background: var(--primary-mid);
+    opacity: 0.3;
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.process-connector::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, var(--accent-teal), transparent);
+    transition: all 0.4s ease;
+}
+
+.process-connector.active {
+    background: var(--accent-teal);
+    opacity: 1;
+    height: 4px;
+    box-shadow: 0 0 10px rgba(38, 166, 154, 0.3);
+}
+
+.process-connector.active::before {
+    left: 100%;
+    transition: left 0.8s ease;
+}
+
+.process-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 2;
+}
+
+.step-detail {
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(79, 71, 71, 0.1);
+    border-radius: 20px;
+    padding: 30px;
+    backdrop-filter: blur(20px);
+    opacity: 0.3;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    position: relative;
+    overflow: hidden;
+    transform: translateY(20px);
+}
+
+.step-detail::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent-teal), var(--accent-green));
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s ease;
+}
+
+.step-detail.active {
+    opacity: 1;
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(79, 71, 71, 0.15);
+    border-color: var(--accent-teal);
+}
+
+.step-detail.active::before {
+    transform: scaleX(1);
+}
+
+.step-detail:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 25px 50px rgba(79, 71, 71, 0.2);
+}
+
+.step-detail.active:hover {
+    transform: translateY(-12px);
+    box-shadow: 0 30px 60px rgba(38, 166, 154, 0.25);
+}
+
+.step-detail h3 {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: var(--primary-dark);
+}
+
+.step-detail p {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--primary-mid);
+}
+
+/* ===== ERGEBNISSE SECTION ===== */
+.results-section {
+    padding: 100px 40px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(15px);
+    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));
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 2;
+}
+
+.data-card {
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(25px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    padding: 35px;
+    text-align: center;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(79, 71, 71, 0.1);
+}
+
+.data-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, 
+        transparent, 
+        rgba(255, 255, 255, 0.6), 
+        transparent);
+}
+
+.data-card::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.data-card:hover {
+    transform: translateY(-12px) scale(1.02);
+    box-shadow: 0 25px 60px rgba(79, 71, 71, 0.15);
+    border-color: rgba(38, 166, 154, 0.3);
+    background: rgba(255, 255, 255, 0.35);
+}
+
+.data-card:hover::after {
+    opacity: 1;
+}
+
+.card-metric {
+    font-size: 3.2rem;
+    font-weight: 800;
+    color: var(--accent-teal);
+    margin-bottom: 15px;
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    position: relative;
+    display: inline-block;
+    transition: all 0.3s ease;
+}
+
+.card-metric::before {
+    content: attr(data-metric);
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.data-card:hover .card-metric::before {
+    opacity: 1;
+}
+
+.card-label {
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--primary-dark);
+    margin-bottom: 10px;
+    transition: color 0.3s ease;
+}
+
+.data-card:hover .card-label {
+    color: var(--accent-teal);
+}
+
+.card-detail {
+    font-size: 0.95rem;
+    color: var(--primary-mid);
+    line-height: 1.5;
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+}
+
+.data-card:hover .card-detail {
+    opacity: 1;
+}
+
+/* ===== INTERACTION SECTION ===== */
+.interaction-section {
+    padding: 100px 40px;
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+    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));
+    gap: 40px;
+    max-width: 1000px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 2;
+}
+
+.interaction-card {
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(79, 71, 71, 0.1);
+    border-radius: 24px;
+    padding: 45px;
+    text-align: center;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 8px 32px rgba(79, 71, 71, 0.1);
+}
+
+.interaction-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent-teal), var(--accent-green));
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s ease;
+}
+
+.interaction-card:hover {
+    transform: translateY(-16px) scale(1.02);
+    box-shadow: 0 30px 70px rgba(79, 71, 71, 0.2);
+    border-color: var(--accent-teal);
+    background: rgba(255, 255, 255, 0.95);
+}
+
+.interaction-card:hover::before {
+    transform: scaleX(1);
+}
+
+.card-visual {
+    margin-bottom: 35px;
+    height: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.microphone {
+    position: relative;
+    width: 90px;
+    height: 90px;
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow: 0 8px 30px rgba(38, 166, 154, 0.3);
+    overflow: hidden;
+}
+
+.microphone::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transform: rotate(45deg);
+    transition: all 0.6s ease;
+    opacity: 0;
+}
+
+.microphone:hover {
+    transform: scale(1.15);
+    box-shadow: 0 15px 50px rgba(38, 166, 154, 0.5);
+}
+
+.microphone:hover::before {
+    animation: shimmer 0.6s ease;
+}
+
+.mic-icon {
+    font-size: 2.2rem;
+    color: white;
+    position: relative;
+    z-index: 2;
+    transition: transform 0.3s ease;
+}
+
+.microphone:hover .mic-icon {
+    transform: scale(1.1);
+}
+
+.pulse-ring {
+    position: absolute;
+    top: -15px;
+    left: -15px;
+    right: -15px;
+    bottom: -15px;
+    border: 3px solid var(--accent-teal);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+    opacity: 0;
+}
+
+.microphone:hover .pulse-ring {
+    animation: pulse 1s infinite;
+}
+
+.microphone:active .pulse-ring {
+    animation: pulseRapid 0.5s infinite;
+}
+
+@keyframes pulseRapid {
+    0% { transform: scale(1); opacity: 0.8; }
+    50% { transform: scale(1.2); opacity: 0.4; }
+    100% { transform: scale(1); opacity: 0.8; }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1.3);
+        opacity: 0;
+    }
+}
+
+.chat-window {
+    background: white;
+    border: 2px solid rgba(79, 71, 71, 0.1);
+    border-radius: 16px;
+    width: 320px;
+    height: 400px !important;
+    overflow: hidden;
+    box-shadow: 0 8px 25px rgba(79, 71, 71, 0.1);
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.interaction-card:hover .chat-window {
+    transform: scale(1.05);
+    box-shadow: 0 12px 35px rgba(79, 71, 71, 0.15);
+    border-color: var(--accent-teal);
+}
+
+.chat-header {
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    color: white;
+    padding: 14px 18px;
+    font-weight: 600;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chat-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.8s ease;
+}
+
+.interaction-card:hover .chat-header::before {
+    left: 100%;
+}
+
+.chat-messages {
+    padding: 25px;
+    flex: 1;
+    overflow-y: auto !important;
+    max-height: 300px !important;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background: transparent;
+    min-height: 0;
+}
+
+/* Chat message styling */
+.chat-message {
+    width: 100%;
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+}
+
+.chat-message.user {
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+.chat-message.ki {
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.message-content {
+    background: transparent;
+    padding: 12px 16px;
+    border-radius: 16px;
+    box-shadow: none;
+    max-width: 80%;
+    word-wrap: break-word;
+    line-height: 1.4;
+    display: inline-block;
+    text-align: left;
+}
+
+.chat-message.user .message-content {
+    background: var(--accent-green);
+    color: white;
+}
+
+.chat-message.ki .message-content {
+    background: var(--accent-green);
+    color: white;
+    border-left: none;
+}
+
+.message-time {
+    font-size: 11px;
+    color: var(--primary-mid);
+    margin-top: 4px;
+    opacity: 0.7;
+}
+
+/* Custom scrollbar for chat messages */
+.chat-messages::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: rgba(79, 71, 71, 0.1);
+    border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background: rgba(79, 71, 71, 0.3);
+    border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+    background: rgba(79, 71, 71, 0.5);
+}
+
+/* Chat input container styling */
+.chat-input-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 15px 20px;
+    background: white;
+    border-top: 1px solid rgba(79, 71, 71, 0.1);
+    flex-shrink: 0;
+    min-height: 60px;
+}
+
+.chat-input {
+    flex: 1;
+    border: 1px solid rgba(79, 71, 71, 0.2);
+    border-radius: 25px;
+    padding: 12px 16px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.3s ease;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.chat-input:focus {
+    border-color: var(--accent-teal);
+    background: white;
+}
+
+.chat-input-container .interaction-btn {
+    flex-shrink: 0;
+    padding: 12px 20px;
+    font-size: 14px;
+}
+
+.chat-send {
+    background: var(--accent-teal);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    padding: 0;
+    margin-left: 10px;
+    box-shadow: 0 2px 8px rgba(38, 166, 154, 0.3);
+}
+
+.chat-send:hover {
+    background: #1e8e82;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4);
+}
+
+.chat-send:active {
+    transform: scale(0.95);
+}
+
+.chat-send img {
+    width: 64px;
+    height: 64px;
+    filter: brightness(0) invert(1);
+    object-fit: contain;
+}
+
+.interaction-card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: var(--primary-dark);
+}
+
+.interaction-card p {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--primary-mid);
+    margin-bottom: 24px;
+}
+
+.interaction-btn {
+    padding: 14px 28px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-block;
+}
+
+.interaction-btn.primary {
+    background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
+    color: white;
+    box-shadow: 0 4px 20px rgba(102, 187, 106, 0.3);
+}
+
+.interaction-btn.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(102, 187, 106, 0.4);
+}
+
+.interaction-btn.secondary {
+    background: white;
+    color: var(--primary-dark);
+    border: 2px solid var(--primary-dark);
+}
+
+.interaction-btn.secondary:hover {
+    background: var(--primary-dark);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 1024px) {
+    .hero-container {
+        grid-template-columns: 1fr;
+        gap: 60px;
+        text-align: center;
+    }
+    
+    .hero-right {
+        height: 400px;
+        order: -1;
+    }
+    
+    .system-details {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .qualification-grid {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+    
+    .interaction-cards {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 100px 20px 40px;
+    }
+    
+    .hero-headline {
+        font-size: 2rem;
+    }
+    
+    .hero-buttons {
+        justify-content: center;
+    }
+    
+    .systeme-section,
+    .qualification-section,
+    .process-section,
+    .results-section,
+    .interaction-section {
+        padding: 60px 20px;
+    }
+    
+    .section-headline {
+        font-size: 2rem;
+    }
+    
+    .systeme-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .results-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+    
+    .process-line {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .process-connector {
+        width: 3px;
+        height: 60px;
+    }
+    
+    .hero-container {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        text-align: center;
+    }
+    
+    .hero-right {
+        height: 400px;
+        margin-top: 40px;
+    }
+    
+    .system-graphic {
+        transform: scale(0.9);
+        width: 110%;
+        margin-left: -5%;
+    }
+    
+    .central-node {
+        min-width: 120px;
+        max-width: 140px;
+        padding: 8px 16px;
+        border-radius: 20px;
+    }
+    
+    .central-node .node-icon {
+        font-size: 1rem;
+    }
+    
+    .central-node .node-label {
+        font-size: 0.75rem;
+    }
+    
+    .node {
+        min-width: 90px;
+        padding: 10px;
+        font-size: 0.8rem;
+    }
+    
+    .node-icon {
+        font-size: 1.2rem;
+    }
+    
+    .node-label {
+        font-size: 0.75rem;
+    }
+    
+    /* Compact circular layout for mobile */
+    .phone-node {
+        top: 10%;
+        left: 50%;
+        transform: translateX(-50%) scale(0.9);
+    }
+    
+    .chat-node {
+        top: 30%;
+        right: 10%;
+        transform: scale(0.9);
+    }
+    
+    .crm-node {
+        bottom: 30%;
+        right: 10%;
+        transform: scale(0.9);
+    }
+    
+    .ticket-node {
+        bottom: 10%;
+        left: 50%;
+        transform: translateX(-50%) scale(0.9);
+    }
+    
+    .team-node {
+        top: 30%;
+        left: 10%;
+        transform: scale(0.9);
+    }
+}
