online v1

Profice WebSite/index.html

@@ -29,9 +29,6 @@
     <link rel="apple-touch-icon" sizes="57x57" href="images/logo/Appicon 1024X1024-01.png">
     <link rel="shortcut icon" href="images/logo/Appicon 1024X1024-01.png">
     
-    <!-- Preconnect to external domains -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://www.googletagmanager.com">
         
     <!-- Preload critical resources -->
     <link rel="preload" href="style/design.css" as="style">
@@ -39,6 +36,7 @@
     <link rel="preload" href="style/cursor.css" as="style">
     
     <!-- Stylesheets -->
+    <link rel="stylesheet" href="style/fonts.css">
     <link rel="stylesheet" href="style/design.css">
     <link rel="stylesheet" href="style/tech-onepager.css">
     <link rel="stylesheet" href="style/cursor.css">
@@ -74,7 +72,7 @@
         
         <div class="top-banner-right">
             <button id="cursorToggle"  >
-                <img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
+                <img src="images/icons/spider.png?v=20260303" alt="Spider" class="cursor-icon" style="width: 46px; height: 46px;">
             </button>
         </div>
     </header>
@@ -113,7 +111,7 @@
                     <!-- Central KI Node -->
                     <div class="node central-node" data-node="ki-assistent" data-tooltip="Der zentrale KI-Assistent verarbeitet alle Anfragen und koordiniert die Kommunikation zwischen den verschiedenen Systemen. Er ist das Herzstück Ihrer digitalen Mitarbeiter.">
                         <div class="node-content">
-                            <div class="node-icon">🤖</div>
+                            <img src="images/icons/KI.png" alt="KI" class="node-icon" style="width: 56px; height: 56px;">
                             <div class="node-label">KI ASSISTENT</div>
                         </div>
                     </div>
@@ -121,35 +119,35 @@
                     <!-- Connected Nodes in circular pattern -->
                     <div class="node phone-node" data-node="telefon" data-tooltip="Automatisierte Telefonannahme mit KI-Spracherkennung. Der KI-Assistent nimmt Anrufe entgegen, versteht Kundenanfragen und leitet sie an die richtige Abteilung weiter.">
                         <div class="node-content">
-                            <div class="node-icon">📞</div>
+                            <img src="images/icons/phone_icon.png" alt="Phone" class="node-icon" style="width: 56px; height: 56px;">
                             <div class="node-label">Telefon</div>
                         </div>
                     </div>
                     
                     <div class="node chat-node" data-node="chat" data-tooltip="Intelligenter Website-Chat der nächsten Generation. Versteht natürliche Sprache, kategorisiert Anfragen und strukturiert Daten für die Übergabe an menschliche Mitarbeiter.">
                         <div class="node-content">
-                            <div class="node-icon">💬</div>
+                            <img src="images/icons/chat.png" alt="Chat" class="node-icon" style="width: 56px; height: 56px;">
                             <div class="node-label">Website Chat</div>
                         </div>
                     </div>
                     
                     <div class="node crm-node" data-node="crm" data-tooltip="Nahtlose CRM-Integration. Alle Kundendaten und Interaktionen werden automatisch erfasst und in Ihrem CRM-System synchronisiert für eine 360°-Kundensicht.">
                         <div class="node-content">
-                            <div class="node-icon">📊</div>
+                            <img src="images/icons/CRM.png" alt="CRM" class="node-icon" style="width: 56px; height: 56px;">
                             <div class="node-label">CRM</div>
                         </div>
                     </div>
                     
                     <div class="node ticket-node" data-node="tickets" data-tooltip="Automatisiertes Ticketsystem. KI erstellt, kategorisiert und priorisiert Support-Tickets und sorgt für eine schnelle und effiziente Bearbeitung aller Anfragen.">
                         <div class="node-content">
-                            <div class="node-icon">🎫</div>
+                            <img src="images/icons/ticket.png" alt="Ticket" class="node-icon" style="width: 56px; height: 56px;">
                             <div class="node-label">Ticketsystem</div>
                         </div>
                     </div>
                     
                     <div class="node team-node" data-node="team" data-tooltip="Intelligente Team-Koordination. Der KI-Assistent verteilt Aufgaben an die richtigen Teammitglieder und sorgt für optimale Auslastung und schnelle Reaktionszeiten.">
                         <div class="node-content">
-                            <div class="node-icon">👥</div>
+                            <img src="images/icons/team.png" alt="Team" class="node-icon" style="width: 56px; height: 56px;">
                             <div class="node-label">Team</div>
                         </div>
                     </div>
@@ -169,7 +167,7 @@
                 <!-- KI Telefon Widget -->
                 <div class="demo-widget phone-demo">
                     <div class="demo-icon-circle">
-                        <span>📞</span>
+                        <img src="images/icons/phone_icon.png" alt="Phone" style="width: 56px; height: 56px;">
                     </div>
                     <h3>KI-Telefonassistent</h3>
                     <p>Rufen Sie jetzt an und erleben Sie, wie unsere KI Ihr Anliegen aufnimmt und verarbeitet.</p>
@@ -192,7 +190,7 @@
                 <!-- KI Chat Widget -->
                 <div class="demo-widget chat-demo">
                     <div class="demo-icon-circle chat-icon">
-                        <span>💬</span>
+                        <img src="images/icons/chat.png" alt="Chat" style="width: 56px; height: 56px;">
                     </div>
                     <h3>KI-Chat</h3>
                     <p>Stellen Sie eine Frage – die KI antwortet sofort und qualifiziert Ihr Anliegen.</p>
@@ -492,11 +490,11 @@
                     <h4 class="footer-title">Kontakt</h4>
                     <div class="footer-contact">
                         <div class="contact-item">
-                            <span class="contact-icon">📞</span>
+                            <img src="images/icons/phone_white.png" alt="Phone" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span>+49 123 456789</span>
                         </div>
                         <div class="contact-item">
-                            <span class="contact-icon">✉️</span>
+                            <img src="images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
                             <span>info@profice.de</span>
                         </div>
                     </div>
@@ -534,7 +532,6 @@
     <script src="scripts/scroll-header.min.js" defer></script>
     <script src="scripts/chat.js?v=2" defer></script>
     <script src="scripts/demo-chat.js?v=2" defer></script>
-    <script src="scripts/console-image.js" defer></script>
 
 </body>
 </html>

Profice WebSite/scripts/console-image.js

@@ -1,3 +0,0 @@
-(function() {
-    // Empty script
-})();

Profice WebSite/scripts/cursor.js

@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", function () {
                         // 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';
+                        const imagePath = isInSitesFolder ? '../images/icons/spider.png' : 'images/icons/spider.png';
                         newIcon.src = imagePath;
                         
                         icon.parentNode.replaceChild(newIcon, icon);
@@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
                         // Update existing img
                         const currentPath = window.location.pathname;
                         const isInSitesFolder = currentPath.includes('/sites/');
-                        const imagePath = isInSitesFolder ? '../images/additional/spidy.png' : 'images/additional/spidy.png';
+                        const imagePath = isInSitesFolder ? '../images/icons/spider.png' : 'images/icons/spider.png';
                         icon.src = imagePath;
                     }
                 }

Profice WebSite/scripts/tech-onepager.js

@@ -650,5 +650,5 @@ document.addEventListener('DOMContentLoaded', function() {
     window.addEventListener('scroll', requestTick, { passive: true });
     
     // ===== INITIALIZATION COMPLETE =====
-    console.log('Tech-Onepager initialized successfully');
+    //console.log('Tech-Onepager initialized successfully');
 });

Profice WebSite/style/design.css

@@ -59,7 +59,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 body {
@@ -403,8 +403,8 @@ body {
 }
 
 .cursor-icon {
-    width: 60px;
-    height: 60px;
+    width: 56px;
+    height: 56px;
     object-fit: contain;
     transition: opacity 0.3s ease;
     opacity: 1 !important;
@@ -990,7 +990,6 @@ body {
 
 .pricing-card ul {
     list-style: none;
-    text-align: left;
 }
 
 .pricing-card li {
@@ -1101,8 +1100,8 @@ body {
     }
     
     .cursor-icon {
-        width: 28px;
-        height: 28px;
+        width: 26px;
+        height: 26px;
     }
 }
 

Profice WebSite/style/fonts.css

@@ -0,0 +1,17 @@
+/* Local Montserrat Font Declaration */
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/montserrat-regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-bold.ttf') format('truetype');
+}

Profice WebSite/style/tech-onepager.css

@@ -43,7 +43,7 @@
     line-height: 1.2;
     color: var(--primary-dark);
     margin-bottom: 24px;
-    font-family: 'Segoe UI', system-ui, sans-serif;
+    font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
 }
 
 .hero-subline {
@@ -157,15 +157,18 @@
     position: absolute;
     background: rgba(255, 255, 255, 0.95);
     border: 2px solid var(--primary-mid);
-    border-radius: 12px;
-    padding: 16px;
-    min-width: 120px;
+    border-radius: 8px;
+    padding: 4px;
+    min-width: 40px;
+    width: 40px;
+    height: 120px;
     text-align: center;
     backdrop-filter: blur(15px);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     cursor: pointer;
     z-index: 3;
     box-shadow: 0 4px 20px rgba(79, 71, 71, 0.1);
+    overflow: visible;
 }
 
 .node:hover {