initial commit

2026-01-28 14:02:01 +01:00
commit 8ad8129a9d
71 changed files with 5601 additions and 0 deletions
--- a/images/additional/cursor.png
+++ b/images/additional/cursor.png
--- a/images/additional/spidy.png
+++ b/images/additional/spidy.png
--- a/images/icons/iconography-01.jpg
+++ b/images/icons/iconography-01.jpg
--- a/images/icons/iconography-01.png
+++ b/images/icons/iconography-01.png
--- a/images/icons/iconography-02.jpg
+++ b/images/icons/iconography-02.jpg
--- a/images/icons/iconography-02.png
+++ b/images/icons/iconography-02.png
--- a/images/icons/iconography-03.jpg
+++ b/images/icons/iconography-03.jpg
--- a/images/icons/iconography-03.png
+++ b/images/icons/iconography-03.png
--- a/images/icons/iconography-04
+++ b/images/icons/iconography-04
--- a/images/icons/iconography-04
+++ b/images/icons/iconography-04
--- a/images/icons/iconography-05.jpg
+++ b/images/icons/iconography-05.jpg
--- a/images/icons/iconography-05.png
+++ b/images/icons/iconography-05.png
--- a/images/icons/iconography-06.jpg
+++ b/images/icons/iconography-06.jpg
--- a/images/icons/iconography-06.png
+++ b/images/icons/iconography-06.png
--- a/images/icons/iconography-07
+++ b/images/icons/iconography-07
--- a/images/icons/iconography-07.jpg
+++ b/images/icons/iconography-07.jpg
--- a/images/icons/iconography-07.png
+++ b/images/icons/iconography-07.png
--- a/images/icons/iconography-08.jpg
+++ b/images/icons/iconography-08.jpg
--- a/images/icons/iconography-08.png
+++ b/images/icons/iconography-08.png
--- a/images/icons/iconography-09.jpg
+++ b/images/icons/iconography-09.jpg
--- a/images/icons/iconography-09.png
+++ b/images/icons/iconography-09.png
--- a/images/icons/iconography-10.jpg
+++ b/images/icons/iconography-10.jpg
--- a/images/icons/iconography-10.png
+++ b/images/icons/iconography-10.png
--- a/images/logo/Appicon
+++ b/images/logo/Appicon
--- a/images/logo/LOGO
+++ b/images/logo/LOGO
--- a/images/logo/Logo-01-complete.PNG
+++ b/images/logo/Logo-01-complete.PNG
--- a/images/logo/Logo-01.jpg
+++ b/images/logo/Logo-01.jpg
--- a/images/logo/Logo-01.png
+++ b/images/logo/Logo-01.png
--- a/images/logo/Logo-02.jpg
+++ b/images/logo/Logo-02.jpg
--- a/images/logo/Logo-02.png
+++ b/images/logo/Logo-02.png
--- a/images/logo/Logo-03.jpg
+++ b/images/logo/Logo-03.jpg
--- a/images/logo/Logo-03.png
+++ b/images/logo/Logo-03.png
--- a/images/logo/Logo-04.jpg
+++ b/images/logo/Logo-04.jpg
--- a/images/logo/Logo-04.png
+++ b/images/logo/Logo-04.png
--- a/images/logo/Logo-05.jpg
+++ b/images/logo/Logo-05.jpg
--- a/images/logo/Logo-05.png
+++ b/images/logo/Logo-05.png
--- a/images/logo/Logo-06.jpg
+++ b/images/logo/Logo-06.jpg
--- a/images/logo/Logo-06.png
+++ b/images/logo/Logo-06.png
--- a/images/logo/Logo-07.jpg
+++ b/images/logo/Logo-07.jpg
--- a/images/logo/Logo-07.png
+++ b/images/logo/Logo-07.png
--- a/images/logo/Logo-08.jpg
+++ b/images/logo/Logo-08.jpg
--- a/images/logo/Logo-08.png
+++ b/images/logo/Logo-08.png
--- a/images/logo/Logo-09.jpg
+++ b/images/logo/Logo-09.jpg
--- a/images/logo/Logo-09.png
+++ b/images/logo/Logo-09.png
--- a/images/logo/Logo-10.jpg
+++ b/images/logo/Logo-10.jpg
--- a/images/logo/Logo-10.png
+++ b/images/logo/Logo-10.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,187 @@
 <!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="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="#hero-section" class="nav-link">Home</a>
                <a href="#enterprise" class="nav-link">Enterprise</a>
                <a href="#pricing" class="nav-link">Pricing</a>
                <a href="#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>
    <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">Enterprise Solutions</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>Enterprise-grade Sicherheit 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>Enterprise</h3>
                    <div class="price">Individuell</div>
                    <p>Für große Unternehmen</p>
                    <ul>
                        <li>Volle Enterprise-Lö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/cursor.js"></script>
    <script src="scripts/scroll-header.js"></script>
 </body>
 </html>
--- a/scripts/cursor.js
+++ b/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/scripts/details.js
+++ b/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/scripts/lead-details.js
+++ b/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/scripts/leads.js
+++ b/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/scripts/login.js
+++ b/scripts/login.js
@@ -0,0 +1,207 @@
 // login.js
 document.addEventListener("DOMContentLoaded", function() {
    console.log('Login page loaded');
    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');
    console.log('Elements found:', {
        loginForm: !!loginForm,
        loginBtn: !!loginBtn,
        successMessage: !!successMessage,
        errorMessage: !!errorMessage,
        registerBtn: !!registerBtn
    });
    // Register button functionality
    if (registerBtn) {
        registerBtn.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('Register button clicked on login page');
            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();
            console.log('Login form submitted');
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;
            console.log('Login data:', { email, password: '[hidden]', remember });
            // 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
 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, redirect to dashboard
                console.log('User already logged in, redirecting...');
                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/scripts/register.js
+++ b/scripts/register.js
@@ -0,0 +1,268 @@
 // register.js
 document.addEventListener("DOMContentLoaded", function() {
    console.log('Register page loaded');
    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');
    console.log('Elements found:', {
        registerForm: !!registerForm,
        registerBtn: !!registerBtn,
        passwordInput: !!passwordInput,
        confirmPasswordInput: !!confirmPasswordInput,
        passwordStrength: !!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();
            console.log('Register form submitted');
            // 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()
            };
            console.log('Registration data:', { ...formData, password: '[hidden]', confirmPassword: '[hidden]' });
            // 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)
 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, redirect to dashboard
                console.log('User already logged in, redirecting...');
                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/scripts/script.js
+++ b/scripts/script.js
@@ -0,0 +1,134 @@
 // script.js
 // ==========================================
 // 1. MENU TOGGLE LOGIC
 // ==========================================
 const menuToggle = document.getElementById('menuToggle');
 const slideMenu = document.getElementById('slideMenu');
 const overlay = document.getElementById('overlay');
 const loginBtn = document.getElementById('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);
 }
 // Login button functionality
 if (loginBtn) {
    console.log('Login button found:', loginBtn);
    loginBtn.addEventListener('click', function(e) {
        e.preventDefault();
        console.log('Login button clicked!');
        console.log('Current path:', window.location.pathname);
        // Check if we're already on the login page
        if (window.location.pathname.includes('login.html')) {
            // If on login page, go to register page
            console.log('Navigating to register page');
            window.location.href = 'register.html';
        } else if (window.location.pathname.includes('register.html')) {
            // If on register page, go to login page
            console.log('Navigating to login page from register');
            window.location.href = 'login.html';
        } else {
            // If on any other page, go to login page
            console.log('Navigating to login page from other');
            window.location.href = 'sites/login.html';
        }
    });
 } 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/scripts/scroll-header.js
+++ b/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/sites/automatisation.html
+++ b/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/sites/details.html
+++ b/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/sites/ki-integration.html
+++ b/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/sites/lead-details.html
+++ b/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/sites/leads.html
+++ b/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="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 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/sites/login.html
+++ b/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 - Login</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="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="registerBtn" class="login-btn register" aria-label="Register" title="Register">
                <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>
                Register
            </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">Loggen Sie sich ein, 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/sites/offers.html
+++ b/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="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="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/sites/register.html
+++ b/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>Register - 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="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 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/sites/website.html
+++ b/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/style/cursor.css
+++ b/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/style/design.css
+++ b/style/design.css
--- a/style/details.css
+++ b/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/style/lead-details.css
+++ b/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/style/leads.css
+++ b/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/style/login.css
+++ b/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/style/service.css
+++ b/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;
    }
 }