mobile optimisation

Profice WebSite/index.html

@@ -57,15 +57,15 @@
     
         
     <!-- Preload critical resources -->
-    <link rel="preload" href="style/design.css?v=20260304" as="style">
+    <link rel="preload" href="style/design.css?v=20260320" as="style">
-    <link rel="preload" href="style/tech-onepager.css?v=20260304" as="style">
+    <link rel="preload" href="style/tech-onepager.css?v=20260320" as="style">
-    <link rel="preload" href="style/cursor.css?v=20260304" as="style">
+    <link rel="preload" href="style/cursor.css?v=20260320" as="style">
     
     <!-- Stylesheets -->
-    <link rel="stylesheet" href="style/fonts.css?v=20260304">
+    <link rel="stylesheet" href="style/fonts.css?v=20260320">
-    <link rel="stylesheet" href="style/design.css?v=20260304">
+    <link rel="stylesheet" href="style/design.css?v=20260320">
-    <link rel="stylesheet" href="style/tech-onepager.css?v=20260304">
+    <link rel="stylesheet" href="style/tech-onepager.css?v=20260320">
-    <link rel="stylesheet" href="style/cursor.css?v=20260304">
+    <link rel="stylesheet" href="style/cursor.css?v=20260320">
     
     <!-- DNS prefetch for external resources -->
     <link rel="dns-prefetch" href="//www.googletagmanager.com">
@@ -111,9 +111,24 @@
             <button id="cursorToggle"  >
                 <img src="images/icons/spider.png?v=20260303" alt="Spider" class="cursor-icon" style="width: 46px; height: 46px;">
             </button>
+            <button class="hamburger-btn" id="hamburgerBtn" aria-label="Menü öffnen">
+                <span></span><span></span><span></span>
+            </button>
         </div>
     </header>
 
+    <!-- Mobile Nav Overlay -->
+    <div class="mobile-nav-overlay" id="mobileNavOverlay">
+        <nav class="mobile-nav-menu">
+            <a href="#hero" class="mobile-nav-link">Start</a>
+            <a href="#problems" class="mobile-nav-link">Systeme</a>
+            <a href="#fit" class="mobile-nav-link">Für wen?</a>
+            <a href="#process" class="mobile-nav-link">Prozess</a>
+            <a href="#demo-section" class="mobile-nav-link">Kontakt</a>
+            <a href="sites/feed.html" class="mobile-nav-link">Google Feed</a>
+        </nav>
+    </div>
+
     
     <div class="overlay" id="overlay"></div>
 
@@ -555,13 +570,13 @@
     </footer>
 
     <!-- Optimized script loading -->
-    <script src="scripts/hex-background.js?v=20260304" defer></script>
+    <script src="scripts/hex-background.js?v=20260320" defer></script>
-    <script src="scripts/script.js?v=20260304" defer></script>
+    <script src="scripts/script.js?v=20260320" defer></script>
-    <script src="scripts/tech-onepager.js?v=20260304" defer></script>
+    <script src="scripts/tech-onepager.js?v=20260320" defer></script>
-    <script src="scripts/cursor.js?v=20260304" defer></script>
+    <script src="scripts/cursor.js?v=20260320" defer></script>
-    <script src="scripts/scroll-header.min.js?v=20260304" defer></script>
+    <script src="scripts/scroll-header.min.js?v=20260320" defer></script>
-    <script src="scripts/chat.js?v=20260304" defer></script>
+    <script src="scripts/chat.js?v=20260320" defer></script>
-    <script src="scripts/demo-chat.js?v=20260304" defer></script>
+    <script src="scripts/demo-chat.js?v=20260320" defer></script>
 
 </body>
 </html>

Profice WebSite/scripts/hex-background.js

@@ -103,6 +103,9 @@
 
     // Initialize
     function init() {
+        // Skip animation on mobile/touch devices for performance
+        if (window.innerWidth <= 768 || ('ontouchstart' in window)) return;
+
         canvas = document.getElementById('hexCanvas');
         if (!canvas) return;
 

Profice WebSite/scripts/script.js

@@ -6,7 +6,51 @@
  */
 
 document.addEventListener("DOMContentLoaded", function() {
-    
+
+    // ==========================================
+    // MOBILE HAMBURGER MENU
+    // ==========================================
+
+    function initHamburgerMenu() {
+        const hamburgerBtn = document.getElementById('hamburgerBtn');
+        const mobileNavOverlay = document.getElementById('mobileNavOverlay');
+        if (!hamburgerBtn || !mobileNavOverlay) return;
+
+        function openNav() {
+            mobileNavOverlay.style.display = 'flex';
+            requestAnimationFrame(() => {
+                mobileNavOverlay.classList.add('open');
+            });
+            hamburgerBtn.classList.add('open');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeNav() {
+            mobileNavOverlay.classList.remove('open');
+            hamburgerBtn.classList.remove('open');
+            document.body.style.overflow = '';
+            setTimeout(() => {
+                if (!mobileNavOverlay.classList.contains('open')) {
+                    mobileNavOverlay.style.display = 'none';
+                }
+            }, 300);
+        }
+
+        hamburgerBtn.addEventListener('click', () => {
+            if (mobileNavOverlay.classList.contains('open')) {
+                closeNav();
+            } else {
+                openNav();
+            }
+        });
+
+        mobileNavOverlay.querySelectorAll('.mobile-nav-link').forEach(link => {
+            link.addEventListener('click', closeNav);
+        });
+    }
+
+    initHamburgerMenu();
+
     // ==========================================
     // SOUND VISUALIZATION ANIMATION
     // ==========================================

Profice WebSite/style/design.css

@@ -1134,49 +1134,127 @@ body {
     }
 }
 
+/* Hamburger Button */
+.hamburger-btn {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 40px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.hamburger-btn span {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background: var(--primary-light);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    transform-origin: left center;
+}
+
+.hamburger-btn.open span:nth-child(1) {
+    transform: rotate(45deg) translate(1px, -1px);
+}
+.hamburger-btn.open span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+}
+.hamburger-btn.open span:nth-child(3) {
+    transform: rotate(-45deg) translate(1px, 1px);
+}
+
+/* Mobile Nav Overlay */
+.mobile-nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(90, 82, 82, 0.97);
+    z-index: 1002;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.mobile-nav-overlay.open {
+    opacity: 1;
+}
+
+.mobile-nav-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+.mobile-nav-link {
+    color: var(--primary-light);
+    text-decoration: none;
+    font-size: 1.6rem;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.mobile-nav-link:hover {
+    color: var(--accent-teal);
+}
+
 /* Navigation responsive */
 @media (max-width: 768px) {
     .main-nav {
         display: none;
     }
-    
+
+    .hamburger-btn {
+        display: flex;
+    }
+
+    #cursorToggle {
+        display: none;
+    }
+
     .top-banner {
         justify-content: space-between;
         height: 70px;
         padding: 5px 15px;
     }
-    
+
     .top-banner.scrolled {
         height: 60px;
         padding: 5px 12px;
     }
-    
+
     .banner-left {
         flex: 1;
         gap: 10px;
     }
-    
+
     .logo {
         height: 40px;
     }
-    
+
     .top-banner.scrolled .logo {
         height: 32px;
     }
-    
+
-    .top-banner.scrolled #cursorToggle {
-        width: 32px;
-        height: 32px;
-    }
-    
-    .cursor-icon {
-        width: 32px;
-        height: 32px;
-    }
-    
     .opening-hours {
         display: none;
     }
+
+    .container {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -1184,28 +1262,18 @@ body {
         height: 60px;
         padding: 5px 10px;
     }
-    
+
     .top-banner.scrolled {
         height: 55px;
     }
-    
+
     .logo {
         height: 35px;
     }
-    
+
     .top-banner.scrolled .logo {
         height: 28px;
     }
-    
-    #cursorToggle {
-        width: 34px;
-        height: 34px;
-    }
-    
-    .cursor-icon {
-        width: 26px;
-        height: 26px;
-    }
 }
 
 /* Footer Banner Styles */
@@ -2068,10 +2136,17 @@ body {
 }
 
 @media (max-width: 768px) {
+    .problems-section,
+    .fit-section,
+    .pricing-section {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
     .problems-grid {
         grid-template-columns: 1fr;
     }
-    
+
     .problems-headline {
         font-size: 1.8rem;
     }

Profice WebSite/style/tech-onepager.css

@@ -2495,30 +2495,36 @@
         padding: 90px 15px 30px;
         min-height: auto;
     }
-    
+
     .hero-headline {
         font-size: 1.6rem;
         line-height: 1.3;
         margin-bottom: 16px;
     }
-    
+
     .hero-subline {
+        display: block;
         font-size: 0.95rem;
         padding: 12px 14px;
         margin-bottom: 12px;
+        width: 100%;
+        box-sizing: border-box;
     }
-    
+
     .hero-proof {
+        display: block;
         font-size: 0.9rem;
         padding: 10px 14px;
         margin-bottom: 20px;
+        width: 100%;
+        box-sizing: border-box;
     }
-    
+
     .hero-buttons {
         justify-content: center;
         gap: 12px;
     }
-    
+
     .cta-btn {
         padding: 12px 20px;
         font-size: 0.95rem;