ixed files and buttons

2026-01-28 16:04:48 +01:00
commit fe8881617d
71 changed files with 5658 additions and 0 deletions
--- a/WebSite/images/additional/cursor.png
+++ b/WebSite/images/additional/cursor.png
--- a/WebSite/images/additional/spidy.png
+++ b/WebSite/images/additional/spidy.png
--- a/WebSite/images/icons/iconography-01.jpg
+++ b/WebSite/images/icons/iconography-01.jpg
--- a/WebSite/images/icons/iconography-01.png
+++ b/WebSite/images/icons/iconography-01.png
--- a/WebSite/images/icons/iconography-02.jpg
+++ b/WebSite/images/icons/iconography-02.jpg
--- a/WebSite/images/icons/iconography-02.png
+++ b/WebSite/images/icons/iconography-02.png
--- a/WebSite/images/icons/iconography-03.jpg
+++ b/WebSite/images/icons/iconography-03.jpg
--- a/WebSite/images/icons/iconography-03.png
+++ b/WebSite/images/icons/iconography-03.png
--- a/WebSite/images/icons/iconography-04
+++ b/WebSite/images/icons/iconography-04
--- a/WebSite/images/icons/iconography-04
+++ b/WebSite/images/icons/iconography-04
--- a/WebSite/images/icons/iconography-05.jpg
+++ b/WebSite/images/icons/iconography-05.jpg
--- a/WebSite/images/icons/iconography-05.png
+++ b/WebSite/images/icons/iconography-05.png
--- a/WebSite/images/icons/iconography-06.jpg
+++ b/WebSite/images/icons/iconography-06.jpg
--- a/WebSite/images/icons/iconography-06.png
+++ b/WebSite/images/icons/iconography-06.png
--- a/WebSite/images/icons/iconography-07
+++ b/WebSite/images/icons/iconography-07
--- a/WebSite/images/icons/iconography-07.jpg
+++ b/WebSite/images/icons/iconography-07.jpg
--- a/WebSite/images/icons/iconography-07.png
+++ b/WebSite/images/icons/iconography-07.png
--- a/WebSite/images/icons/iconography-08.jpg
+++ b/WebSite/images/icons/iconography-08.jpg
--- a/WebSite/images/icons/iconography-08.png
+++ b/WebSite/images/icons/iconography-08.png
--- a/WebSite/images/icons/iconography-09.jpg
+++ b/WebSite/images/icons/iconography-09.jpg
--- a/WebSite/images/icons/iconography-09.png
+++ b/WebSite/images/icons/iconography-09.png
--- a/WebSite/images/icons/iconography-10.jpg
+++ b/WebSite/images/icons/iconography-10.jpg
--- a/WebSite/images/icons/iconography-10.png
+++ b/WebSite/images/icons/iconography-10.png
--- a/WebSite/images/logo/Appicon
+++ b/WebSite/images/logo/Appicon
--- a/WebSite/images/logo/LOGO
+++ b/WebSite/images/logo/LOGO
--- a/WebSite/images/logo/Logo-01-complete.PNG
+++ b/WebSite/images/logo/Logo-01-complete.PNG
--- a/WebSite/images/logo/Logo-01.jpg
+++ b/WebSite/images/logo/Logo-01.jpg
--- a/WebSite/images/logo/Logo-01.png
+++ b/WebSite/images/logo/Logo-01.png
--- a/WebSite/images/logo/Logo-02.jpg
+++ b/WebSite/images/logo/Logo-02.jpg
--- a/WebSite/images/logo/Logo-02.png
+++ b/WebSite/images/logo/Logo-02.png
--- a/WebSite/images/logo/Logo-03.jpg
+++ b/WebSite/images/logo/Logo-03.jpg
--- a/WebSite/images/logo/Logo-03.png
+++ b/WebSite/images/logo/Logo-03.png
--- a/WebSite/images/logo/Logo-04.jpg
+++ b/WebSite/images/logo/Logo-04.jpg
--- a/WebSite/images/logo/Logo-04.png
+++ b/WebSite/images/logo/Logo-04.png
--- a/WebSite/images/logo/Logo-05.jpg
+++ b/WebSite/images/logo/Logo-05.jpg
--- a/WebSite/images/logo/Logo-05.png
+++ b/WebSite/images/logo/Logo-05.png
--- a/WebSite/images/logo/Logo-06.jpg
+++ b/WebSite/images/logo/Logo-06.jpg
--- a/WebSite/images/logo/Logo-07.jpg
+++ b/WebSite/images/logo/Logo-07.jpg
--- a/WebSite/images/logo/Logo-07.png
+++ b/WebSite/images/logo/Logo-07.png
--- a/WebSite/images/logo/Logo-08.jpg
+++ b/WebSite/images/logo/Logo-08.jpg
--- a/WebSite/images/logo/Logo-08.png
+++ b/WebSite/images/logo/Logo-08.png
--- a/WebSite/images/logo/Logo-09.jpg
+++ b/WebSite/images/logo/Logo-09.jpg
--- a/WebSite/images/logo/Logo-09.png
+++ b/WebSite/images/logo/Logo-09.png
--- a/WebSite/images/logo/Logo-10.jpg
+++ b/WebSite/images/logo/Logo-10.jpg
--- a/WebSite/images/logo/Logo-10.png
+++ b/WebSite/images/logo/Logo-10.png
--- a/WebSite/index.html
+++ b/WebSite/index.html
@@ -0,0 +1,188 @@
+<!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>
+    <link rel="stylesheet" href="style/design.css">
+    <link rel="stylesheet" href="style/cursor.css">
+</head>
+<body>
+    <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="#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>
+        </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>
+    
+
+    <nav class="slide-menu" id="slideMenu">
+        <a href="index.html" class="active">Startseite</a>
+        <a href="sites/offers.html">Kontakt & Anfrage</a> 
+        <a href="sites/leads.html">Leads Dashboard</a>
+    </nav>
+
+    <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>
+                    </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>
+            </div>
+        </section>
+
+        <section id="services" class="services-section">
+            <h2 class="section-title">Unsere Expertise</h2>
+            <div class="services-grid">
+                
+                <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>
+                    </ul>
+                </div>
+                <div class="info-image-placeholder">
+                     <span>[Bild: Team bei der Arbeit]</span>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <script src="scripts/script.js"></script>
+    <script src="scripts/login-test.js"></script>
+    <script src="scripts/cursor.js"></script>
+    <script src="scripts/scroll-header.js"></script>
+</body>
+</html>
--- a/WebSite/scripts/cursor.js
+++ b/WebSite/scripts/cursor.js
@@ -0,0 +1,208 @@
+// cursor.js
+
+document.addEventListener("DOMContentLoaded", function () {
+    // 1. Проверка на мобильные (там курсор не нужен)
+    if (window.matchMedia("(pointer: coarse)").matches) return;
+
+    // --- SETTINGS ---
+    const CONFIG = {
+        tentacleCount: 10,
+        triggerDist: 20,
+        maxLength: 450,
+        connectionDist: 150,
+        thickness: 1,
+        color: "rgba(20, 20, 20, 1)", 
+        prediction: 3.5
+    };
+
+
+    const toggleBtn = document.getElementById('cursorToggle');
+    const body = document.body;
+    
+    let isCursorDisabled = localStorage.getItem('venomCursorDisabled') === 'true';
+
+    function updateCursorState() {
+        if (isCursorDisabled) {
+            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/cursor.png' : 'images/additional/cursor.png';
+                    icon.src = imagePath;
+                }
+            }
+        } else {
+            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/spidy.png' : 'images/additional/spidy.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();
+});
--- a/WebSite/scripts/details.js
+++ b/WebSite/scripts/details.js
@@ -0,0 +1,124 @@
+// details.js
+
+document.addEventListener("DOMContentLoaded", function() {
+    const serviceDetails = {
+        'seo-optimierung': {
+            title: 'SEO Optimierung',
+            icon: '🔍',
+            description: 'Verbessern Sie Ihre Sichtbarkeit in Suchmaschinen und erreichen Sie mehr Kunden online.',
+            fullDescription: 'Unsere SEO-Optimierungsdienste helfen Ihnen, in Suchmaschinen besser gefunden zu werden. Wir analysieren Ihre Website, identifizieren Optimierungspotenziale und implementieren bewährte Strategien, um Ihr Ranking zu verbessern und mehr qualifizierte Besucher anzuziehen.',
+            features: [
+                'Keyword-Analyse und -Recherche',
+                'On-Page Optimierung',
+                'Technische SEO-Audits',
+                'Content-Strategie',
+                'Link-Building',
+                'Performance-Tracking'
+            ],
+            benefits: [
+                'Höhere Sichtbarkeit in Suchmaschinen',
+                'Mehr qualifizierte Besucher',
+                'Verbesserte Conversion-Raten',
+                'Langfristiger ROI'
+            ]
+        },
+        'cloud-migration': {
+            title: 'Cloud Migration',
+            icon: '☁️',
+            description: 'Modernisieren Sie Ihre IT-Infrastruktur mit sicheren und skalierbaren Cloud-Lösungen.',
+            fullDescription: 'Wir begleiten Sie bei der Migration Ihrer IT-Systeme in die Cloud. Von der Analyse Ihrer bestehenden Infrastruktur bis zur vollständigen Implementierung sorgen wir für einen reibungslosen Übergang mit minimalem Geschäftsausfall.',
+            features: [
+                'Infrastruktur-Analyse',
+                'Migrationsplanung',
+                'Datenübertragung',
+                'Sicherheit & Compliance',
+                'Performance-Optimierung',
+                'Schulung & Support'
+            ],
+            benefits: [
+                'Kosteneinsparungen',
+                'Bessere Skalierbarkeit',
+                'Erhöhte Sicherheit',
+                'Flexiblere Arbeitsweise'
+            ]
+        },
+        'datenanalyse': {
+            title: 'Datenanalyse',
+            icon: '📊',
+            description: 'Gewinnen Sie wertvolle Einblicke aus Ihren Daten mit unseren Analyse-Lösungen.',
+            fullDescription: 'Wir helfen Ihnen, Ihre Daten in wertvolle Erkenntnisse umzuwandeln. Mit modernen Analyse-Tools und -Methoden identifizieren wir Trends, Muster und Chancen, die Ihre Geschäftsentscheidungen verbessern.',
+            features: [
+                'Datenerfassung & -bereinigung',
+                'Statistische Analyse',
+                'Visualisierung & Dashboards',
+                'Predictive Analytics',
+                'Berichterstellung',
+                'Consulting'
+            ],
+            benefits: [
+                'Bessere Entscheidungen',
+                'Prozessoptimierung',
+                'Kostensenkungen',
+                'Wettbewerbsvorteile'
+            ]
+        }
+    };
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const serviceId = urlParams.get('service');
+    const detailsContainer = document.getElementById('service-details');
+
+    if (serviceId && serviceDetails[serviceId]) {
+        const service = serviceDetails[serviceId];
+        
+        detailsContainer.innerHTML = `
+            <div class="service-header">
+                <div class="service-icon-large">${service.icon}</div>
+                <h1 class="service-title-large">${service.title}</h1>
+                <p class="service-description-large">${service.description}</p>
+            </div>
+            
+            <div class="service-content">
+                <section class="service-section">
+                    <h2 class="section-title">Beschreibung</h2>
+                    <p class="section-text">${service.fullDescription}</p>
+                </section>
+                
+                <section class="service-section">
+                    <h2 class="section-title">Unsere Leistungen</h2>
+                    <ul class="feature-list">
+                        ${service.features.map(feature => `<li>${feature}</li>`).join('')}
+                    </ul>
+                </section>
+                
+                <section class="service-section">
+                    <h2 class="section-title">Ihre Vorteile</h2>
+                    <ul class="benefit-list">
+                        ${service.benefits.map(benefit => `<li>${benefit}</li>`).join('')}
+                    </ul>
+                </section>
+                
+                <section class="service-section">
+                    <h2 class="section-title">Interesse?</h2>
+                    <p class="section-text">Kontaktieren Sie uns für eine persönliche Beratung und ein maßgeschneidertes Angebot.</p>
+                    <div class="cta-buttons">
+                        <a href="offers.html" class="cta-btn primary">Kontakt aufnehmen</a>
+                        <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
+                    </div>
+                </section>
+            </div>
+        `;
+        
+        // Update page title
+        document.title = `Profice - ${service.title}`;
+    } else {
+        // Fallback if no service specified
+        detailsContainer.innerHTML = `
+            <div class="error-message">
+                <h2>Service nicht gefunden</h2>
+                <p>Der angeforderte Service konnte nicht gefunden werden.</p>
+                <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
+            </div>
+        `;
+    }
+});
--- a/WebSite/scripts/lead-details.js
+++ b/WebSite/scripts/lead-details.js
@@ -0,0 +1,203 @@
+// lead-details.js
+
+document.addEventListener("DOMContentLoaded", function() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const leadId = urlParams.get('id');
+    const detailsContainer = document.getElementById('leadDetailsContent');
+
+    function getLeads() {
+        const storedLeads = localStorage.getItem('myLeads');
+        if (storedLeads) {
+            return JSON.parse(storedLeads);
+        } else {
+            return []; 
+        }
+    }
+
+    function getStatusClass(status) {
+        const statusClasses = {
+            'neu': 'status-new',
+            'in-bearbeitung': 'status-in-progress',
+            'abgeschlossen': 'status-completed',
+            'storniert': 'status-cancelled'
+        };
+        return statusClasses[status] || 'status-new';
+    }
+
+    function formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('de-DE', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    if (leadId && detailsContainer) {
+        const leadsData = getLeads();
+        const lead = leadsData.find(l => l.id == leadId);
+
+        if (lead) {
+            detailsContainer.innerHTML = `
+                <div class="lead-details-card">
+                    <!-- Status Section -->
+                    <div class="detail-section">
+                        <h2 class="section-title">Status</h2>
+                        <div class="status-container">
+                            <span class="status-badge ${getStatusClass(lead.status)}">${lead.statusText}</span>
+                            <p class="status-info">Letzte Aktualisierung: ${formatDate(lead.datum)}</p>
+                        </div>
+                    </div>
+
+                    <!-- Contact Information -->
+                    <div class="detail-section">
+                        <h2 class="section-title">Kontaktinformationen</h2>
+                        <div class="info-grid">
+                            <div class="info-item">
+                                <div class="info-label">Name</div>
+                                <div class="info-value">${lead.name || 'Nicht angegeben'}</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="info-label">Organisation</div>
+                                <div class="info-value">${lead.organisation || 'Nicht angegeben'}</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="info-label">Kontakt</div>
+                                <div class="info-value">${lead.contact || 'Nicht angegeben'}</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="info-label">Budget</div>
+                                <div class="info-value">${lead.budget || 'Nicht angegeben'}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Service Information -->
+                    <div class="detail-section">
+                        <h2 class="section-title">Dienstleistung</h2>
+                        <div class="service-info">
+                            <div class="service-icon">${getServiceIcon(lead.dienstleistung)}</div>
+                            <div class="service-details">
+                                <h3 class="service-title">${lead.dienstleistung}</h3>
+                                <p class="service-description">${getServiceDescription(lead.dienstleistung)}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Project Description -->
+                    ${lead.description ? `
+                    <div class="detail-section">
+                        <h2 class="section-title">Projektbeschreibung</h2>
+                        <div class="description-box">
+                            <p class="description-text">${lead.description}</p>
+                        </div>
+                    </div>
+                    ` : ''}
+
+                    <!-- Timeline -->
+                    <div class="detail-section">
+                        <h2 class="section-title">Zeitstrahl</h2>
+                        <div class="timeline">
+                            <div class="timeline-item active">
+                                <div class="timeline-dot"></div>
+                                <div class="timeline-content">
+                                    <h4>Anfrage erhalten</h4>
+                                    <p>${formatDate(lead.datum)}</p>
+                                </div>
+                            </div>
+                            <div class="timeline-item ${lead.status !== 'neu' ? 'active' : ''}">
+                                <div class="timeline-dot"></div>
+                                <div class="timeline-content">
+                                    <h4>In Bearbeitung</h4>
+                                    <p>${lead.status !== 'neu' ? 'Anfrage wird bearbeitet' : 'Ausstehend'}</p>
+                                </div>
+                            </div>
+                            <div class="timeline-item ${lead.status === 'abgeschlossen' ? 'active' : ''}">
+                                <div class="timeline-dot"></div>
+                                <div class="timeline-content">
+                                    <h4>Abgeschlossen</h4>
+                                    <p>${lead.status === 'abgeschlossen' ? 'Projekt erfolgreich abgeschlossen' : 'Ausstehend'}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="detail-section">
+                        <h2 class="section-title">Aktionen</h2>
+                        <div class="action-buttons">
+                            <button class="action-btn primary" onclick="window.print()">
+                                🖨️ Details drucken
+                            </button>
+                            <button class="action-btn secondary" onclick="shareLead()">
+                                📤 Teilen
+                            </button>
+                            <button class="action-btn secondary" onclick="exportLead()">
+                                📄 Exportieren
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            // Update page title
+            document.title = `Profice - Anfrage von ${lead.name || 'Unbekannt'}`;
+        } else {
+            detailsContainer.innerHTML = `
+                <div class="error-message">
+                    <h2>Anfrage nicht gefunden</h2>
+                    <p>Die angeforderte Anfrage konnte nicht gefunden werden.</p>
+                    <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
+                </div>
+            `;
+        }
+    } else {
+        detailsContainer.innerHTML = `
+            <div class="error-message">
+                <h2>Keine Anfrage-ID angegeben</h2>
+                <p>Bitte navigieren Sie über das Leads Dashboard zu den Details.</p>
+                <a href="leads.html" class="cta-btn secondary">Zum Dashboard</a>
+            </div>
+        `;
+    }
+});
+
+function getServiceIcon(service) {
+    const icons = {
+        'Website': '🌐',
+        'KI Integration': '🤖',
+        'Automatisation': '⚙️',
+        'Unabhängige Wahl': '🎯'
+    };
+    return icons[service] || '📋';
+}
+
+function getServiceDescription(service) {
+    const descriptions = {
+        'Website': 'Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.',
+        'KI Integration': 'Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.',
+        'Automatisation': 'Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.',
+        'Unabhängige Wahl': 'Maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen.'
+    };
+    return descriptions[service] || 'Individuelle Dienstleistung.';
+}
+
+function shareLead() {
+    if (navigator.share) {
+        navigator.share({
+            title: document.title,
+            text: 'Details meiner Projektanfrage bei Profice',
+            url: window.location.href
+        });
+    } else {
+        // Fallback for browsers that don't support Web Share API
+        navigator.clipboard.writeText(window.location.href);
+        alert('Link wurde in die Zwischenablage kopiert!');
+    }
+}
+
+function exportLead() {
+    window.print();
+}
--- a/WebSite/scripts/leads.js
+++ b/WebSite/scripts/leads.js
@@ -0,0 +1,75 @@
+// 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);
--- a/WebSite/scripts/login-test.js
+++ b/WebSite/scripts/login-test.js
@@ -0,0 +1,47 @@
+// Simple test script for login button
+console.log('Login test script loaded');
+
+// Clear any existing session that might cause redirect issues
+localStorage.removeItem('userSession');
+sessionStorage.removeItem('userSession');
+console.log('Cleared any existing session data');
+
+// Wait for DOM
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('DOM loaded in test script');
+    
+    // Find login button
+    const loginBtn = document.getElementById('loginBtn');
+    console.log('Login button found:', !!loginBtn);
+    
+    if (loginBtn) {
+        console.log('Login button element:', loginBtn);
+        
+        // Determine correct path based on current location
+        const currentPath = window.location.pathname;
+        console.log('Current path:', currentPath);
+        
+        let loginPath;
+        if (currentPath.includes('/sites/')) {
+            // Already in sites folder, use relative path
+            loginPath = 'login.html';
+        } else {
+            // In root folder, use sites/ prefix
+            loginPath = 'sites/login.html';
+        }
+        
+        console.log('Login path will be:', loginPath);
+        
+        // Direct onclick
+        loginBtn.onclick = function(e) {
+            e.preventDefault();
+            console.log('ONCLICK: Login button clicked!');
+            console.log('Navigating to:', loginPath);
+            window.location.href = loginPath;
+        };
+        
+        console.log('Click handler attached');
+    } else {
+        console.error('Login button NOT FOUND');
+    }
+});
--- a/WebSite/scripts/login.js
+++ b/WebSite/scripts/login.js
@@ -0,0 +1,193 @@
+// 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', 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();
+            
+            // Simulate login process (for demo purposes)
+            setTimeout(() => {
+                // Store session (for demo purposes)
+                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);
+                
+                setLoadingState(false);
+            }, 1500);
+        });
+    }
+
+    // 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;
+}
--- a/WebSite/scripts/register.js
+++ b/WebSite/scripts/register.js
@@ -0,0 +1,255 @@
+// 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', function(e) {
+            e.preventDefault();
+            
+            // Get form data
+            const formData = {
+                firstName: document.getElementById('firstName').value,
+                lastName: 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();
+            
+            // Simulate registration (for demo purposes)
+            setTimeout(() => {
+                // Store user data (for demo purposes)
+                const userData = {
+                    firstName: formData.firstName,
+                    lastName: formData.lastName,
+                    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 zum Login weitergeleitet...');
+                
+                // Redirect to login page after delay
+                setTimeout(() => {
+                    window.location.href = 'login.html';
+                }, 3000);
+                
+                setLoadingState(false);
+            }, 2000);
+        });
+    }
+
+    // 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');
+        }
+    }
+}
--- a/WebSite/scripts/script.js
+++ b/WebSite/scripts/script.js
@@ -0,0 +1,170 @@
+// script.js
+
+console.log('Script.js loaded successfully');
+
+// Separate function for login button click (defined outside DOMContentLoaded)
+function handleLoginClick(e) {
+    e.preventDefault();
+    console.log('Login button clicked!');
+    console.log('Current path:', window.location.pathname);
+    console.log('Current href:', window.location.href);
+    
+    // Force navigation to login page
+    console.log('Force navigating to login page');
+    window.location.href = 'sites/login.html';
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    console.log('DOM fully loaded');
+    
+    // ==========================================
+    // 1. MENU TOGGLE LOGIC
+    // ==========================================
+    const menuToggle = document.getElementById('menuToggle');
+    const slideMenu = document.getElementById('slideMenu');
+    const overlay = document.getElementById('overlay');
+    const loginBtn = document.getElementById('loginBtn');
+
+    console.log('Elements found:', {
+        menuToggle: !!menuToggle,
+        slideMenu: !!slideMenu,
+        overlay: !!overlay,
+        loginBtn: !!loginBtn
+    });
+
+    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);
+        console.log('Menu toggle functionality initialized');
+    }
+
+    // Login button functionality
+    if (loginBtn) {
+        console.log('Login button found:', loginBtn);
+        
+        // Determine correct path based on current location
+        const currentPath = window.location.pathname;
+        
+        let loginPath;
+        if (currentPath.includes('/sites/')) {
+            // Already in sites folder
+            if (currentPath.includes('login.html')) {
+                loginPath = 'register.html';
+            } else if (currentPath.includes('register.html')) {
+                loginPath = 'login.html';
+            } else {
+                loginPath = 'login.html';
+            }
+        } else {
+            // In root folder
+            loginPath = 'sites/login.html';
+        }
+        
+        console.log('Login path will be:', loginPath);
+        
+        // Direct onclick
+        loginBtn.onclick = function(e) {
+            e.preventDefault();
+            console.log('Login button clicked!');
+            console.log('Navigating to:', loginPath);
+            window.location.href = loginPath;
+        };
+        
+        console.log('Login button event listener attached');
+    } else {
+        console.error('Login button not found in DOM');
+    }
+
+    // ==========================================
+    // 2. FORM SUBMISSION LOGIC
+    // ==========================================
+    const contactForm = document.getElementById('contactForm');
+    const successMessage = document.getElementById('successMessage');
+
+    if (contactForm) {
+        contactForm.addEventListener('submit', async function(e) {
+            e.preventDefault();
+
+            const nameInput = document.getElementById('name');
+            const orgInput = document.getElementById('organisation');
+            const contactInput = document.getElementById('contact');
+            const serviceSelect = document.getElementById('service');
+            const budgetInput = document.getElementById('budget');
+            const descInput = document.getElementById('description');
+
+            const selectedServiceText = serviceSelect ? serviceSelect.options[serviceSelect.selectedIndex].text : 'Dienstleistung';
+
+            const formData = {
+                name: nameInput ? nameInput.value : '',
+                organisation: orgInput ? orgInput.value : '',
+                contact: contactInput ? contactInput.value : '',
+                service: serviceSelect ? serviceSelect.value : '',
+                budget: budgetInput ? budgetInput.value : '',
+                description: descInput ? descInput.value : '',
+                timestamp: new Date().toISOString()
+            };
+          
+            // --- LOCALSTORAGE ---
+            try {
+                const localLead = {
+                    id: Date.now(),
+                    datum: new Date().toLocaleDateString('de-DE'),
+                    dienstleistung: selectedServiceText,
+                    status: 'open',
+                    statusText: 'Offen',
+                    description: formData.description
+                };
+
+                let existingLeads = JSON.parse(localStorage.getItem('myLeads')) || [];
+                existingLeads.unshift(localLead);
+                localStorage.setItem('myLeads', JSON.stringify(existingLeads));
+            } catch (err) {
+                console.error('Ошибка сохранения в LocalStorage:', err);
+            }
+            // false if test, true if production
+            const USE_PRODUCTION = true;
+            const WEBHOOK_TEST = 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8207-1e335e64518f';
+            const WEBHOOK_PROD = 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f';
+            const N8N_WEBHOOK_URL = USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST;
+
+            let iframe = document.getElementById('hidden-iframe');
+            if (!iframe) {
+                iframe = document.createElement('iframe');
+                iframe.id = 'hidden-iframe';
+                iframe.name = 'hidden-iframe';
+                iframe.style.display = 'none';
+                document.body.appendChild(iframe);
+            }
+
+            const tempForm = document.createElement('form');
+            tempForm.method = 'POST';
+            tempForm.action = N8N_WEBHOOK_URL;
+            tempForm.target = 'hidden-iframe';
+
+            for (const [key, value] of Object.entries(formData)) {
+                const input = document.createElement('input');
+                input.type = 'hidden';
+                input.name = key;
+                input.value = value;
+                tempForm.appendChild(input);
+            }
+
+            document.body.appendChild(tempForm);
+            tempForm.submit();
+            document.body.removeChild(tempForm);
+
+            contactForm.style.display = 'none';
+            if (successMessage) {
+                successMessage.classList.add('show');
+            }
+            
+            console.log('Form submitted successfully');
+        });
+    }
+});
--- a/WebSite/scripts/scroll-header.js
+++ b/WebSite/scripts/scroll-header.js
@@ -0,0 +1,83 @@
+// scroll-header.js
+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
+    const scrollThreshold = 50;
+    let isScrolled = false;
+    let isTransitioning = false;
+    let lastScrollY = 0;
+    let scrollDirection = 'down';
+    
+    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);
+        }
+    }
+    
+    function handleScroll() {
+        const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
+        
+        // Detect scroll direction
+        if (currentScrollY > lastScrollY) {
+            scrollDirection = 'down';
+        } else if (currentScrollY < lastScrollY) {
+            scrollDirection = '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);
+        }
+        
+        lastScrollY = currentScrollY;
+    }
+    
+    // Use requestAnimationFrame for smooth scroll handling
+    let ticking = false;
+    function requestTick() {
+        if (!ticking) {
+            requestAnimationFrame(handleScroll);
+            ticking = true;
+            setTimeout(() => { ticking = false; }, 16); // ~60fps
+        }
+    }
+    
+    // Optimized scroll event listener
+    window.addEventListener('scroll', requestTick, { passive: true, capture: false });
+    
+    // Initial check
+    handleScroll();
+});
--- a/WebSite/sites/automatisation.html
+++ b/WebSite/sites/automatisation.html
@@ -0,0 +1,213 @@
+<!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>
+    <link rel="stylesheet" href="../style/design.css">
+    <link rel="stylesheet" href="../style/service.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="Menu">
+                    <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">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-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>
+
+    <!-- Slide Menu -->
+    <nav class="slide-menu" id="slideMenu">
+        <a href="../index.html">Startseite</a>
+        <a href="offers.html" class="active">Kontakt & Anfrage</a>
+        <a href="leads.html">Leads Dashboard</a>
+    </nav>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="service-container">
+            <!-- Service Header -->
+            <div class="service-header">
+                <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>
+                <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.
+                </p>
+            </section>
+
+            <!-- Service Features -->
+            <section class="service-section">
+                <h2 class="section-title">Was wir automatisieren können</h2>
+                <div class="features-grid">
+                    <div class="feature-item">
+                        <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>
+                        <h3>Datenverarbeitung</h3>
+                        <p>Automatische Datenmigration und -bereinigung</p>
+                    </div>
+                    <div class="feature-item">
+                        <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>
+                        <h3>Workflow-Integration</h3>
+                        <p>Verbindung verschiedener Systeme für nahtlose Prozesse</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">📊</div>
+                        <h3>Monitoring</h3>
+                        <p>Automatische Systemüberwachung und Alarmierung</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">🎯</div>
+                        <h3>Task-Management</h3>
+                        <p>Intelligente Aufgabenverteilung und -verfolgung</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Process -->
+            <section class="service-section">
+                <h2 class="section-title">Unser Automatisierungsprozess</h2>
+                <div class="process-timeline">
+                    <div class="process-item">
+                        <div class="process-number">1</div>
+                        <div class="process-content">
+                            <h3>Prozessanalyse</h3>
+                            <p>Identifizierung von Automatisierungspotenzialen</p>
+                        </div>
+                    </div>
+                    <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>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">3</div>
+                        <div class="process-content">
+                            <h3>Implementierung</h3>
+                            <p>Setup und Konfiguration der Automatisierungstools</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">4</div>
+                        <div class="process-content">
+                            <h3>Testing</h3>
+                            <p>Gewissenhafte Tests vor der Live-Schaltung</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">5</div>
+                        <div class="process-content">
+                            <h3>Monitoring</h3>
+                            <p>Laufende Überwachung und Optimierung</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Technologies -->
+            <section class="section">
+                <h2 class="section-title">Automatisierungstechnologien</h2>
+                <div class="tech-grid">
+                    <div class="tech-item">Zapier</div>
+                </div>
+            </section>
+
+            <!-- Benefits -->
+            <section class="service-section">
+                <h2 class="section-title">Ihre Vorteile</h2>
+                <div class="benefits-grid">
+                    <div class="benefit-item">
+                        <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>
+                    <p>Reduzierung menschlicher Fehler und konsistente Ergebnisse</p>
+                    </div>
+                    <div class="benefit-item">
+                        <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>
+                        <h3>Skalierbarkeit</div>
+                        <p>Einfache Handhabung wachsender Geschäftsanforderungen</p>
+                    </div>
+                    <div class="benefit-item">
+                        <div class="benefit-icon">😊</div>
+                        <h3>Mitarbeiterzufriedenheit</h3>
+                        <p>Fokus auf kreative und strategische Aufgaben</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- CTA Section -->
+            <section class="service-section">
+                <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>
+                    <a href="offers.html" class="cta-btn secondary">Mehr erfahren</a>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <script src="../scripts/script.js"></script>
+    <script src="../scripts/cursor.js"></script>
+    <script src="../scripts/scroll-header.js"></script>
+</body>
+</html>
--- a/WebSite/sites/details.html
+++ b/WebSite/sites/details.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profice - Service Details</title>
+    <link rel="stylesheet" href="../style/design.css">
+    <link rel="stylesheet" href="../style/details.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="Menu">
+                    <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">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-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>
+
+    <!-- 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">
+        <div class="form-container">
+            <div id="service-details">
+                <!-- Service details will be loaded here by JavaScript -->
+            </div>
+            <div class="back-button-container">
+                <a href="leads.html" class="cta-btn secondary">← Zurück zum Dashboard</a>
+            </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/details.js"></script>
+</body>
+</html>
--- a/WebSite/sites/ki-integration.html
+++ b/WebSite/sites/ki-integration.html
@@ -0,0 +1,217 @@
+<!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>
+    <link rel="stylesheet" href="../style/design.css">
+    <link rel="stylesheet" href="../style/service.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="Menu">
+                    <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">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-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>
+
+    <!-- Slide Menu -->
+    <nav class="slide-menu" id="slideMenu">
+        <a href="../index.html">Startseite</a>
+        <a href="offers.html" class="active">Kontakt & Anfrage</a>
+        <a href="leads.html">Leads Dashboard</a>
+    </nav>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="service-container">
+            <!-- Service Header -->
+            <div class="service-header">
+                <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>
+            </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.
+                </p>
+            </section>
+
+            <!-- Service Features -->
+            <section class="service-section">
+                <h2 class="section-title">Was wir bieten</h2>
+                <div class="features-grid">
+                    <div class="feature-item">
+                        <div class="feature-icon">📊</div>
+                        <h3>Datenanalyse</h3>
+                        <p>Intelligente Auswertung Ihrer Geschäftsdaten für bessere Entscheidungen</p>
+                    </div>
+                    <div class="feature-item">
+                        <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>
+                        <h3>Prozessautomatisierung</h3>
+                        <p>Automatisierung wiederkehrender Aufgaben zur Effizienzsteigerung</p>
+                    </div>
+                    <div class="feature-item">
+                        <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>
+                        <h3>Vorhersagemodelle</h3>
+                        <p>Prognosen für Trends und Geschäftsentwicklungen</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">🎯</div>
+                        <h3>Personalisierung</h3>
+                        <p>Individuelle KI-Lösungen für Ihre spezifischen Bedürfnisse</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Process -->
+            <section class="service-section">
+                <h2 class="section-title">Unser KI-Integrationsprozess</h2>
+                <div class="process-timeline">
+                    <div class="process-item">
+                        <div class="process-number">1</div>
+                        <div class="process-content">
+                            <h3>Analyse & Potenzial</h3>
+                            <p>Identifizierung von KI-Einsatzmöglichkeiten in Ihrem Unternehmen</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">2</div>
+                        <div class="process-content">
+                            <h3>Datenstrategie</h3>
+                            <p>Planung der Datenerfassung und -verarbeitung</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">3</div>
+                        <div class="process-content">
+                            <h3>Modellentwicklung</h3>
+                            <p>Training oder Auswahl passender KI-Modelle</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">4</div>
+                        <div class="process-content">
+                            <h3>Integration</h3>
+                            <p>Nahtlose Anbindung an Ihre bestehenden Systeme</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">5</div>
+                        <div class="process-content">
+                            <h3>Optimierung</h3>
+                            <p>Kontinuierliche Verbesserung der KI-Modelle</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Technologies -->
+            <section class="service-section">
+                <h2 class="section-title">KI-Technologien</h2>
+                <div class="tech-grid">
+                    <div class="tech-item">TensorFlow</div>
+                    <div class="tech-item">PyTorch</div>
+                    <div class="tech-item">Scikit-learn</div>
+                    <div class="tech-item">OpenAI API</div>
+                    <div class="tech-item">Google Cloud AI</div>
+                    <div class="tech-item">Azure ML</div>
+                    <div class="tech-item">AWS SageMaker</div>
+                    <div class="tech-item">Hugging Face</div>
+                    <div class="tech-item">LangChain</div>
+                    <div class="tech-item">Dialogflow</div>
+                </div>
+            </section>
+
+            <!-- Use Cases -->
+            <section class="service-section">
+                <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>
+                    </div>
+                    <div class="use-case-item">
+                        <h3>Vertrieb</h3>
+                        <p>Predictive Lead Scoring und Verkaufsoptimierung</p>
+                    </div>
+                    <div class="use-case-item">
+                        <h3>Marketing</h3>
+                        <p>Personalisierte Kampagnen und Content-Optimierung</p>
+                    </div>
+                    <div class="use-case-item">
+                        <h3>Finanzen</h3>
+                        <p>Betrugsprüfung und Risikoanalyse</p>
+                    </div>
+                    <div class="use-case-item">
+                        <h3>Produktion</h3>
+                        <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>
+                <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>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <script src="../scripts/script.js"></script>
+    <script src="../scripts/cursor.js"></script>
+    <script src="../scripts/scroll-header.js"></script>
+</body>
+</html>
--- a/WebSite/sites/lead-details.html
+++ b/WebSite/sites/lead-details.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profice - Anfrage Details</title>
+    <link rel="stylesheet" href="../style/design.css">
+    <link rel="stylesheet" href="../style/lead-details.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="Menu">
+                    <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">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-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>
+
+    <!-- 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" class="active">Leads Dashboard</a>
+    </nav>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="lead-details-container">
+            <!-- Lead Header -->
+            <div class="lead-header">
+                <div class="lead-icon">📋</div>
+                <h1 class="lead-title">Anfrage Details</h1>
+                <p class="lead-subtitle">Alle Informationen zu Ihrer Projektanfrage</p>
+            </div>
+
+            <!-- Lead Details Content -->
+            <div id="leadDetailsContent">
+                <!-- Lead details will be loaded here by JavaScript -->
+            </div>
+
+            <!-- Navigation Buttons -->
+            <div class="navigation-buttons">
+                <a href="leads.html" class="cta-btn secondary">← Zurück zum Dashboard</a>
+                <a href="offers.html" class="cta-btn primary">Neue Anfrage</a>
+            </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/lead-details.js"></script>
+</body>
+</html>
--- a/WebSite/sites/leads.html
+++ b/WebSite/sites/leads.html
@@ -0,0 +1,117 @@
+<!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>
+    <link rel="stylesheet" href="../style/design.css">
+    <link rel="stylesheet" href="../style/leads.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="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" class="active">Leads Dashboard</a>
+    </nav>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content leads-content">
+        <!-- Leads Widget -->
+        <div class="dashboard-container">
+            <h2 class="dashboard-title">Meine Anfragen</h2>
+            <p class="dashboard-subtitle">Übersicht Ihrer aktuellen Projektanfragen</p>
+            
+            <div class="leads-table-wrapper">
+                <table class="leads-table" id="leadsTable">
+                    <thead>
+                        <tr>
+                            <th>Datum</th>
+                            <th>Dienstleistung</th>
+                            <th>Status</th>
+                            <th>Aktion</th>
+                        </tr>
+                    </thead>
+                    <tbody id="leadsTableBody">
+                        <!-- Populated by leads.js -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Other Offers Section -->
+        <div class="dashboard-container offers-section">
+            <h2 class="dashboard-title">Andere Angebote von uns</h2>
+            <p class="dashboard-subtitle">Entdecken Sie weitere Dienstleistungen</p>
+            
+            <div class="offers-grid">
+                <div class="offer-card">
+                    <div class="offer-icon">🔍</div>
+                    <h3 class="offer-title">SEO Optimierung</h3>
+                    <p class="offer-description">Verbessern Sie Ihre Sichtbarkeit in Suchmaschinen und erreichen Sie mehr Kunden online.</p>
+                    <a href="details.html?service=seo-optimierung" class="offer-btn">Details ansehen</a>
+                </div>
+                
+                <div class="offer-card">
+                    <div class="offer-icon">☁️</div>
+                    <h3 class="offer-title">Cloud Migration</h3>
+                    <p class="offer-description">Modernisieren Sie Ihre IT-Infrastruktur mit sicheren und skalierbaren Cloud-Lösungen.</p>
+                    <a href="details.html?service=cloud-migration" class="offer-btn">Details ansehen</a>
+                </div>
+                
+                <div class="offer-card">
+                    <div class="offer-icon">📊</div>
+                    <h3 class="offer-title">Datenanalyse</h3>
+                    <p class="offer-description">Gewinnen Sie wertvolle Einblicke aus Ihren Daten mit unseren Analyse-Lösungen.</p>
+                    <a href="details.html?service=datenanalyse" class="offer-btn">Details ansehen</a>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="../scripts/leads.js"></script>
+    <script src="../scripts/cursor.js"></script>
+    <script src="../scripts/scroll-header.js"></script>
+</body>
+</html>
--- a/WebSite/sites/login.html
+++ b/WebSite/sites/login.html
@@ -0,0 +1,138 @@
+<!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>
--- a/WebSite/sites/offers.html
+++ b/WebSite/sites/offers.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profice</title>
+    <link rel="stylesheet" href="../style/design.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="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" class="active">Kontakt & Anfrage</a>
+        <a href="leads.html">Leads Dashboard</a>
+    </nav>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="form-container">
+            <h2 class="form-title">Kontaktieren Sie uns</h2>
+            
+            <form id="contactForm">
+                <div class="form-group">
+                    <label for="name">Name *</label>
+                    <input type="text" id="name" name="name" required placeholder="Ihr vollständiger Name">
+                </div>
+
+                <div class="form-group">
+                    <label for="organisation">Organisation</label>
+                    <input type="text" id="organisation" name="organisation" placeholder="Firmenname (optional)">
+                </div>
+
+                <div class="form-group">
+                    <label for="contact">E-Mail oder Telefonnummer *</label>
+                    <input type="text" id="contact" name="contact" required placeholder="email@beispiel.de oder +49 123 456789">
+                </div>
+
+                <div class="form-group">
+                    <label for="service">Gewünschte Dienstleistung *</label>
+                    <select id="service" name="service" required>
+                        <option value="" disabled selected>Bitte wählen...</option>
+                        <option value="website">Website</option>
+                        <option value="ki-integration">KI Integration</option>
+                        <option value="automatisation">Automatisation</option>
+                        <option value="unabhaengige-wahl">Unabhängige Wahl</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="budget">Budget (€)</label>
+                    <input type="text" id="budget" name="budget" placeholder="z.B. 5000 - 10000">
+                </div>
+
+                <div class="form-group">
+                    <label for="description">Beschreibung *</label>
+                    <textarea id="description" name="description" required placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."></textarea>
+                </div>
+
+                <button type="submit" class="submit-btn">Anfrage senden</button>
+            </form>
+
+            <div class="success-message" id="successMessage">
+                <h3>Vielen Dank!</h3>
+                <p>Ihre Anfrage wurde erfolgreich gesendet. Wir melden uns bald bei Ihnen.</p>
+            </div>
+        </div>
+    </main>
+
+    <script src="../scripts/script.js"></script>
+    <script src="../scripts/cursor.js"></script>
+    <script src="../scripts/scroll-header.js"></script>
+</body>
+</html>
--- a/WebSite/sites/register.html
+++ b/WebSite/sites/register.html
@@ -0,0 +1,174 @@
+<!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>
--- a/WebSite/sites/website.html
+++ b/WebSite/sites/website.html
@@ -0,0 +1,191 @@
+<!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>
+    <link rel="stylesheet" href="../style/design.css">
+    <link rel="stylesheet" href="../style/service.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="Menu">
+                    <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">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-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>
+
+    <!-- Slide Menu -->
+    <nav class="slide-menu" id="slideMenu">
+        <a href="../index.html">Startseite</a>
+        <a href="offers.html" class="active">Kontakt & Anfrage</a>
+        <a href="leads.html">Leads Dashboard</a>
+    </nav>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="service-container">
+            <!-- Service Header -->
+            <div class="service-header">
+                <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>
+            </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.
+                </p>
+            </section>
+
+            <!-- Service Features -->
+            <section class="service-section">
+                <h2 class="section-title">Was wir bieten</h2>
+                <div class="features-grid">
+                    <div class="feature-item">
+                        <div class="feature-icon">🎨</div>
+                        <h3>Responsive Design</h3>
+                        <p>Perfekte Darstellung auf allen Geräten - von Desktop bis Mobile</p>
+                    </div>
+                    <div class="feature-item">
+                        <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>
+                        <h3>SEO-Freundlich</h3>
+                        <p>Technische Grundlagen für gute Suchmaschinenplatzierungen</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">🔧</div>
+                        <h3>CMS-Integration</h3>
+                        <p>Einfache Content-Verwaltung für Ihre Mitarbeiter</p>
+                    </div>
+                    <div class="feature-item">
+                        <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>
+                        <h3>Analytics & Tracking</h3>
+                        <p>Detaillierte Auswertung Ihrer Website-Performance</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Process -->
+            <section class="service-section">
+                <h2 class="section-title">Unser Prozess</h2>
+                <div class="process-timeline">
+                    <div class="process-item">
+                        <div class="process-number">1</div>
+                        <div class="process-content">
+                            <h3>Analyse & Konzeption</h3>
+                            <p>Wir verstehen Ihre Ziele und entwickeln eine passende Strategie</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">2</div>
+                        <div class="process-content">
+                            <h3>Design & Prototyping</h3>
+                            <p>Visuelle Konzepte und interaktive Prototypen</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">3</div>
+                        <div class="process-content">
+                            <h3>Entwicklung</h3>
+                            <p>Saubere, performante Code-Implementierung</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">4</div>
+                        <div class="process-content">
+                            <h3>Testing & Launch</h3>
+                            <p>Gewissenhafte Tests und erfolgreicher Start</p>
+                        </div>
+                    </div>
+                    <div class="process-item">
+                        <div class="process-number">5</div>
+                        <div class="process-content">
+                            <h3>Support & Wartung</h3>
+                            <p>Laufende Optimierung und technische Unterstützung</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Technologies -->
+            <section class="service-section">
+                <h2 class="section-title">Technologien</h2>
+                <div class="tech-grid">
+                    <div class="tech-item">HTML5</div>
+                    <div class="tech-item">CSS3</div>
+                    <div class="tech-item">JavaScript</div>
+                    <div class="tech-item">React</div>
+                    <div class="tech-item">Vue.js</div>
+                    <div class="item">Angular</div>
+                    <div class="tech-item">Node.js</div>
+                    <div class="tech-item">PHP</div>
+                    <div class="tech-item">WordPress</div>
+                    <div class="tech-item">Shopify</div>
+                    <div class="tech-item">WooCommerce</div>
+                </div>
+            </section>
+
+            <!-- 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>
+                <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>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <script src="../scripts/script.js"></script>
+    <script src="../scripts/cursor.js"></script>
+    <script src="../scripts/scroll-header.js"></script>
+</body>
+</html>
--- a/WebSite/style/cursor.css
+++ b/WebSite/style/cursor.css
@@ -0,0 +1,79 @@
+/* cursor.css */
+
+body,
+html,
+a,
+button,
+input,
+textarea,
+select,
+.menu-toggle,
+label {
+    cursor: none !important;
+}
+
+#venom-cursor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+    mix-blend-mode: normal;
+}
+
+@media (pointer: coarse) {
+    body, html, a, button, input, textarea, select {
+        cursor: auto !important;
+    }
+
+    #venom-cursor {
+        display: none;
+    }
+}
+
+body.system-cursor,
+body.system-cursor * {
+    cursor: auto !important; 
+}
+
+body.system-cursor #venom-cursor {
+    display: none !important;
+    opacity: 0;
+    pointer-events: none;
+}
+
+#cursorToggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 2px solid var(--primary-dark);
+    color: var(--primary-dark);
+    width: 45px;
+    height: 45px;
+    border-radius: 12px;
+    cursor: none;
+    transition: all 0.3s ease;
+    font-size: 20px;
+}
+
+#cursorToggle:hover {
+    background: var(--primary-dark);
+    color: var(--primary-light);
+}
+
+body.system-cursor #cursorToggle {
+    opacity: 1;
+}
+
+.top-banner.dark-theme #cursorToggle {
+    border-color: var(--primary-light);
+    color: var(--primary-light);
+}
+
+.top-banner.dark-theme #cursorToggle:hover {
+    background: var(--primary-light);
+    color: var(--primary-dark);
+}
--- a/WebSite/style/design.css
+++ b/WebSite/style/design.css
--- a/WebSite/style/details.css
+++ b/WebSite/style/details.css
@@ -0,0 +1,151 @@
+/* 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;
+    }
+}
--- a/WebSite/style/lead-details.css
+++ b/WebSite/style/lead-details.css
@@ -0,0 +1,408 @@
+/* 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;
+    }
+}
--- a/WebSite/style/leads.css
+++ b/WebSite/style/leads.css
@@ -0,0 +1,219 @@
+/* Leads Dashboard Styles */
+
+.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 */
+.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 Badges */
+.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 Button */
+.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 */
+.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);
+}
+
+/* Active menu link */
+.slide-menu a.active {
+    background: var(--primary-light);
+    border-left-color: var(--accent-teal);
+    color: var(--accent-teal);
+}
+
+/* Empty state */
+.empty-state {
+    text-align: center;
+    padding: 40px;
+    color: var(--primary-mid);
+}
+
+.empty-state p {
+    font-size: 16px;
+}
+
+/* Responsive */
+@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;
+    }
+}
--- a/WebSite/style/login.css
+++ b/WebSite/style/login.css
@@ -0,0 +1,547 @@
+/* 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;
+    }
+}
--- a/WebSite/style/service.css
+++ b/WebSite/style/service.css
@@ -0,0 +1,339 @@
+/* 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;
+    }
+}