From 4055d37adf20681a9740db458ab8d99d70524d29 Mon Sep 17 00:00:00 2001
From: Ihor_Zhekov <ihor@profice.ai>
Date: Wed, 11 Feb 2026 09:29:23 +0100
Subject: [PATCH] redisgn

---
 Profice WebSite/index.html               | 447 +++++---------
 Profice WebSite/scripts/demo-chat.js     | 140 +++++
 Profice WebSite/scripts/script.js        |  32 +
 Profice WebSite/scripts/tech-onepager.js |   9 +-
 Profice WebSite/style/design.css         | 735 +++++++++++++++++++++++
 5 files changed, 1078 insertions(+), 285 deletions(-)
 create mode 100644 Profice WebSite/scripts/demo-chat.js

diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html
index 2d3402d..ceb3933 100644
--- a/Profice WebSite/index.html	
+++ b/Profice WebSite/index.html	
@@ -85,13 +85,7 @@
         </div>
     </header>
 
-    <!-- Slide Menu -->
-    <nav class="slide-menu" id="slideMenu">
-        <a href="index.html" class="active">Startseite</a>
-        <a href="sites/offers.html">Kontakt & Anfrage</a> 
-        <a href="sites/leads.html">Leads Dashboard</a>
-    </nav>
-
+    
     <div class="overlay" id="overlay"></div>
 
     <!-- Hero Section -->
@@ -100,13 +94,13 @@
             <div class="hero-left">
                 <div class="hero-text">
                     <h1 class="hero-headline">
-                        Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.
+                        Ihr Telefon klingelt. Keiner geht ran. Das kostet Sie Aufträge.
                     </h1>
                     <p class="hero-subline">
                         KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
                     </p>
                     <p class="hero-proof">
-                        Für Unternehmen, die wachsen wollen ohne mehr Personal einzustellen.
+                        Für Unternehmen, die wachsen wollen - ohne mehr Personal einzustellen.
                     </p>
                     <div class="hero-buttons">
                         <button class="cta-btn primary" id="kiPhoneBtn">Mit KI sprechen</button>
@@ -170,218 +164,45 @@
         </div>
     </section>
 
-    <!-- Systeme Section -->
-    <section class="systeme-section" id="systeme">
+    <!-- KI Demo Widgets Section -->
+    <section class="ki-demo-section" id="demo-section">
         <div class="container">
-            <h2 class="section-headline">Keine Beratung. Wir bauen funktionierende Systeme.</h2>
+            <span class="section-label">LIVE DEMO</span>
+            <h2 class="demo-section-title">Testen Sie es selbst. Jetzt.</h2>
+            <p class="demo-section-subtitle">Kein Mockup. Das ist das System, das bei unseren Kunden läuft.</p>
             
-            <div class="systeme-grid">
-                <!-- KI Telefonassistent -->
-                <div class="system-card" data-system="phone">
-                    <div class="system-visual">
-                        <div class="phone-system phone-workflow">
-                            <!-- SVG for connections -->
-                            <svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
-                                <!-- Background dashed connection paths -->
-                                <g class="workflow-bg-paths">
-                                    <!-- Path from Phone to KI Processor -->
-                                    <path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from KI Processor to CRM -->
-                                    <path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from CRM to Team -->
-                                    <path d="M 210 60 L 250 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                </g>
-                            </svg>
-                            
-                            <!-- Node elements positioned over SVG -->
-                            <div class="workflow-nodes">
-                                <div class="wf-node wf-node-1" title="Telefon">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#d63384" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
-                                </div>
-                                <div class="wf-node wf-node-2" title="KI Verarbeitung">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
-                                </div>
-                                <div class="wf-node wf-node-3" title="CRM">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
-                                </div>
-                                <div class="wf-node wf-node-4" title="Team">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <h3>KI Telefonassistent</h3>
-                    <div class="system-details">
-                        <div class="what-it-does">
-                            <h4>Was es tut:</h4>
-                            <ul>
-                                <li>Annahme eingehender Anrufe</li>
-                                <li>Verständnis der Kundenanfrage</li>
-                                <li>Weiterleitung an richtige Abteilung</li>
-                                <li>Dokumentation im CRM</li>
-                            </ul>
-                        </div>
-                        <div class="result">
-                            <h4>Ergebnis:</h4>
-                            <ul>
-                                <li>-52% unnötige Anrufe</li>
-                                <li>24/7 Erreichbarkeit</li>
-                                <li>Qualifiziertere Weiterleitungen</li>
-                            </ul>
-                        </div>
+            <div class="demo-widgets-grid">
+                <!-- KI Telefon Widget -->
+                <div class="demo-widget phone-demo">
+                    <div class="demo-icon-circle">
+                        <span>📞</span>
                     </div>
+                    <h3>KI-Telefonassistent</h3>
+                    <p>Rufen Sie jetzt an und erleben Sie, wie unsere KI Ihr Anliegen aufnimmt und verarbeitet.</p>
+                    <button class="demo-btn" id="demoPhoneBtn">Jetzt anrufen</button>
+                    <span class="demo-note">Kostenlos · Keine Wartezeit · 24/7</span>
                 </div>
 
-                <!-- KI Chat -->
-                <div class="system-card" data-system="chat">
-                    <div class="system-visual">
-                        <div class="chat-system chat-workflow">
-                            <!-- SVG for connections -->
-                            <svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
-                                <!-- Background dashed connection paths -->
-                                <g class="workflow-bg-paths">
-                                    <!-- Path from Website to KI Processor -->
-                                    <path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from KI Processor to Category -->
-                                    <path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from Category to Human -->
-                                    <path d="M 210 60 L 250 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                </g>
-                            </svg>
-                            
-                            <!-- Node elements positioned over SVG -->
-                            <div class="workflow-nodes">
-                                <div class="wf-node wf-node-1" title="Website">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#20c997" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
-                                </div>
-                                <div class="wf-node wf-node-2" title="KI Verarbeitung">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
-                                </div>
-                                <div class="wf-node wf-node-3" title="Kategorisierung">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
-                                </div>
-                                <div class="wf-node wf-node-4" title="Mitarbeiter">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-                                </div>
+                <!-- KI Chat Widget -->
+                <div class="demo-widget chat-demo">
+                    <div class="demo-icon-circle chat-icon">
+                        <span>💬</span>
+                    </div>
+                    <h3>KI-Chat</h3>
+                    <p>Stellen Sie eine Frage – die KI antwortet sofort und qualifiziert Ihr Anliegen.</p>
+                    <div class="chat-preview">
+                        <div class="chat-header">
+                            <span class="online-dot"></span>
+                            Profice KI · Online
+                        </div>
+                        <div class="chat-messages">
+                            <div class="chat-bubble">
+                                <span>Hallo! Ich bin der Profice KI-Assistent. Stellen Sie mir eine Frage – ich zeige Ihnen, wie das System funktioniert.</span>
                             </div>
                         </div>
-                    </div>
-                    <h3>KI Chat</h3>
-                    <div class="system-details">
-                        <div class="what-it-does">
-                            <h4>Was es tut:</h4>
-                            <ul>
-                                <li>Website-Besucher verstehen</li>
-                                <li>Kategorisierung der Anfragen</li>
-                                <li>Strukturierte Datenerfassung</li>
-                                <li>Übergabe an menschliche Mitarbeiter</li>
-                            </ul>
-                        </div>
-                        <div class="result">
-                            <h4>Ergebnis:</h4>
-                            <ul>
-                                <li>+38% Konversionsrate</li>
-                                <li>0 Wartezeit</li>
-                                <li>Strukturierte Leads</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Interne KI -->
-                <div class="system-card" data-system="internal">
-                    <div class="system-visual">
-                        <div class="internal-system internal-workflow">
-                            <!-- SVG for connections and animated glow -->
-                            <svg class="internal-workflow-svg" viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet">
-                                <defs>
-                                    <!-- Glow filter for the green light effect -->
-                                    <filter id="internalGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                        <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
-                                        <feMerge>
-                                            <feMergeNode in="coloredBlur"/>
-                                            <feMergeNode in="SourceGraphic"/>
-                                        </feMerge>
-                                    </filter>
-                                </defs>
-                                
-                                <!-- Background dashed connection paths -->
-                                <g class="internal-bg-paths">
-                                    <!-- Path from Search to split point -->
-                                    <path id="int-path1-bg" d="M 55 60 L 95 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from split to Document (top) -->
-                                    <path id="int-path2a-bg" d="M 95 60 L 115 60 L 115 30 L 135 30" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from split to Message (bottom) -->
-                                    <path id="int-path2b-bg" d="M 95 60 L 115 60 L 115 90 L 135 90" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from Document to merge point -->
-                                    <path id="int-path3a-bg" d="M 175 30 L 195 30 L 195 60 L 205 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from Message to merge point -->
-                                    <path id="int-path3b-bg" d="M 175 90 L 195 90 L 195 60 L 205 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from merge to KI Processor -->
-                                    <path id="int-path4-bg" d="M 205 60 L 215 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                    <!-- Path from KI Processor to Lightbulb -->
-                                    <path id="int-path5-bg" d="M 255 60 L 275 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
-                                </g>
-                                
-                                <!-- Animated green glow paths -->
-                                <g class="internal-glow-paths">
-                                    <path id="int-path1" d="M 55 60 L 95 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                    <path id="int-path2a" d="M 95 60 L 115 60 L 115 30 L 135 30" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                    <path id="int-path2b" d="M 95 60 L 115 60 L 115 90 L 135 90" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                    <path id="int-path3a" d="M 175 30 L 195 30 L 195 60 L 205 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                    <path id="int-path3b" d="M 175 90 L 195 90 L 195 60 L 205 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                    <path id="int-path4" d="M 205 60 L 215 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                    <path id="int-path5" d="M 255 60 L 275 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
-                                </g>
-                                
-                                <!-- Node border rectangles for glow animation -->
-                                <g class="internal-node-borders">
-                                    <rect id="int-node1-border" x="15" y="40" width="40" height="40" rx="8" class="int-node-border"/>
-                                    <rect id="int-node2-border" x="135" y="10" width="40" height="40" rx="8" class="int-node-border"/>
-                                    <rect id="int-node3-border" x="135" y="70" width="40" height="40" rx="8" class="int-node-border"/>
-                                    <rect id="int-node4-border" x="215" y="40" width="40" height="40" rx="8" class="int-node-border"/>
-                                    <rect id="int-node5-border" x="275" y="40" width="40" height="40" rx="8" class="int-node-border"/>
-                                </g>
-                            </svg>
-                            
-                            <!-- Node elements positioned over SVG -->
-                            <div class="internal-nodes">
-                                <div class="int-node int-node-1" title="Suchanfrage">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-                                </div>
-                                <div class="int-node int-node-2" title="Dokumente">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
-                                </div>
-                                <div class="int-node int-node-3" title="Nachrichten">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                                </div>
-                                <div class="int-node int-node-4" title="KI Verarbeitung">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
-                                </div>
-                                <div class="int-node int-node-5" title="Antwort">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="#ffc107" stroke-width="2"><path d="M9 18h6M10 22h4M12 2v1M4.22 4.22l.71.71M1 12h1M4.22 19.78l.71-.71M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></svg>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <h3>Interne KI</h3>
-                    <div class="system-details">
-                        <div class="what-it-does">
-                            <h4>Was es tut:</h4>
-                            <ul>
-                                <li>Interne Dokumente analysieren</li>
-                                <li>Mitarbeiterfragen beantworten</li>
-                                <li>Wissen zentralisieren</li>
-                                <li>Training neuer Mitarbeiter</li>
-                            </ul>
-                        </div>
-                        <div class="result">
-                            <h4>Ergebnis:</h4>
-                            <ul>
-                                <li>-67% Suchzeit</li>
-                                <li>100% Wissensverfügbarkeit</li>
-                                <li>Schnellere Einarbeitung</li>
-                            </ul>
+                        <div class="chat-input-area">
+                            <input type="text" class="chat-input-field" placeholder="Ihre Nachricht...">
+                            <button class="chat-send-btn">Senden</button>
                         </div>
                     </div>
                 </div>
@@ -389,50 +210,105 @@
         </div>
     </section>
 
-    <!-- Nicht für jeden Section -->
-    <section class="qualification-section" id="qualification">
+    <!-- Was wir lösen Section -->
+    <section class="problems-section" id="problems">
         <div class="container">
-            <div class="qualification-grid">
-                <div class="qual-left">
-                    <h3>Nicht geeignet wenn...</h3>
-                    <ul class="qual-list negative">
-                        <li class="qual-item">
-                            <div class="qual-icon chaos">📋</div>
-                            <span>Nur eine "schöne Website" gewollt</span>
+            <span class="section-label">WAS WIR LÖSEN</span>
+            <h2 class="problems-headline">Drei Probleme, die Unternehmen täglich Geld kosten.</h2>
+            
+            <div class="problems-grid">
+                <!-- Problem 1 -->
+                <div class="problem-card">
+                    <span class="problem-number">01</span>
+                    <h3>Verpasste Anrufe = verlorene Aufträge</h3>
+                    <p>Ihre Mitarbeiter sind im Einsatz, in Meetings oder im Feierabend. Jeder Anruf, der ins Leere läuft, ist ein potenzieller Kunde, der woanders kauft.</p>
+                </div>
+                
+                <div class="solution-card">
+                    <span class="solution-label">— KI Telefonassistent</span>
+                    <h3>Jeder Anruf wird angenommen</h3>
+                    <p>Versteht das Anliegen, erfasst Kontaktdaten, vereinbart Rückrufe und dokumentiert alles im CRM. Rund um die Uhr.</p>
+                    <div class="solution-badge">24/7 erreichbar · 0 verpasste Anrufe</div>
+                </div>
+                
+                <!-- Problem 2 -->
+                <div class="problem-card">
+                    <span class="problem-number">02</span>
+                    <h3>Anfragen bleiben stunden- oder tagelang liegen</h3>
+                    <p>Kontaktformulare, E-Mails, Chat-Nachrichten – alles landet in einem Postfach und wird irgendwann manuell bearbeitet. Bis dahin hat der Interessent woanders gekauft.</p>
+                </div>
+                
+                <div class="solution-card">
+                    <span class="solution-label">— KI Chat · Automatisierung</span>
+                    <h3>Sofortige Reaktion auf jede Anfrage</h3>
+                    <p>Chatbot qualifiziert Besucher in Echtzeit. Automatische Follow-up-Mails innerhalb von 5 Minuten. Integration in Ihr CRM.</p>
+                    <div class="solution-badge">5 Min. Reaktionszeit statt 48 Stunden</div>
+                </div>
+                
+                <!-- Problem 3 -->
+                <div class="problem-card">
+                    <span class="problem-number">03</span>
+                    <h3>Wissen steckt in Köpfen, nicht im System</h3>
+                    <p>Wenn ein Mitarbeiter krank wird oder kündigt, geht Wissen verloren. Neue Mitarbeiter brauchen Monate, bis sie produktiv sind.</p>
+                </div>
+                
+                <div class="solution-card">
+                    <span class="solution-label">— Interne Wissens-KI</span>
+                    <h3>Firmenwissen auf Knopfdruck</h3>
+                    <p>KI-System, das auf Ihre Dokumente, SOPs und Handbücher zugreift. Mitarbeiter fragen per Chat und bekommen sofort die richtige Antwort.</p>
+                    <div class="solution-badge">Onboarding in Tagen statt Monaten</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Passt das für Sie Section -->
+    <section class="fit-section" id="fit">
+        <div class="container">
+            <span class="section-label">PASST DAS FÜR SIE?</span>
+            <h2 class="fit-headline">Ehrliche Einschätzung.</h2>
+            
+            <div class="fit-grid">
+                <div class="fit-card negative">
+                    <h3 class="fit-card-title negative-title">Wahrscheinlich nicht passend, wenn ...</h3>
+                    <ul class="fit-list">
+                        <li class="fit-item negative-item">
+                            <span class="fit-icon negative-icon">✕</span>
+                            <span>Weniger als 20 Kundenanfragen pro Woche</span>
                         </li>
-                        <li class="qual-item">
-                            <div class="qual-icon chaos">📋</div>
-                            <span>Keine digitalen Prozesse vorhanden</span>
+                        <li class="fit-item negative-item">
+                            <span class="fit-icon negative-icon">✕</span>
+                            <span>Einmaliges Projekt gesucht, kein laufender Service</span>
                         </li>
-                        <li class="qual-item">
-                            <div class="qual-icon chaos">📋</div>
-                            <span>Technik-Aversion im Team</span>
+                        <li class="fit-item negative-item">
+                            <span class="fit-icon negative-icon">✕</span>
+                            <span>Team nutzt grundsätzlich keine digitalen Tools</span>
                         </li>
-                        <li class="qual-item">
-                            <div class="qual-icon chaos">📋</div>
-                            <span>Keine Notwendigkeit zur Skalierung</span>
+                        <li class="fit-item negative-item">
+                            <span class="fit-icon negative-icon">✕</span>
+                            <span>Nur eine neue Website benötigt</span>
                         </li>
                     </ul>
                 </div>
                 
-                <div class="qual-right">
-                    <h3>Sehr sinnvoll wenn...</h3>
-                    <ul class="qual-list positive">
-                        <li class="qual-item">
-                            <div class="qual-icon check">✓</div>
-                            <span>Hoher Anrufaufkommen</span>
+                <div class="fit-card positive">
+                    <h3 class="fit-card-title positive-title">Sehr gut passend, wenn ...</h3>
+                    <ul class="fit-list">
+                        <li class="fit-item positive-item">
+                            <span class="fit-icon positive-icon">✓</span>
+                            <span>Regelmäßig Anrufe und Anfragen verpasst werden</span>
                         </li>
-                        <li class="qual-item">
-                            <div class="qual-icon check">✓</div>
-                            <span>Überlasteter Support</span>
+                        <li class="fit-item positive-item">
+                            <span class="fit-icon positive-icon">✓</span>
+                            <span>Support-Team an der Belastungsgrenze arbeitet</span>
                         </li>
-                        <li class="qual-item">
-                            <div class="qual-icon check">✓</div>
-                            <span>Wachsendes Unternehmen</span>
+                        <li class="fit-item positive-item">
+                            <span class="fit-icon positive-icon">✓</span>
+                            <span>Mindestens 5 Mitarbeiter und ein CRM vorhanden</span>
                         </li>
-                        <li class="qual-item">
-                            <div class="qual-icon check">✓</div>
-                            <span>Prozessoptimierung gewünscht</span>
+                        <li class="fit-item positive-item">
+                            <span class="fit-icon positive-icon">✓</span>
+                            <span>Wachstum gewünscht ohne proportional mehr Personal</span>
                         </li>
                     </ul>
                 </div>
@@ -440,6 +316,49 @@
         </div>
     </section>
 
+    <!-- Investition Section -->
+    <section class="pricing-section" id="pricing">
+        <div class="container">
+            <span class="section-label">INVESTITION</span>
+            <h2 class="pricing-headline">Klare Preise. Keine Überraschungen.</h2>
+            
+            <div class="pricing-box">
+                <div class="pricing-cards">
+                    <div class="pricing-card">
+                        <div class="pricing-amount">
+                            <span class="pricing-prefix">ab</span>
+                            <span class="pricing-value">3.000 €</span>
+                        </div>
+                        <div class="pricing-label">Einmalig Setup</div>
+                        <div class="pricing-detail">je nach Umfang & Integrationen</div>
+                    </div>
+                    
+                    <div class="pricing-card">
+                        <div class="pricing-amount">
+                            <span class="pricing-prefix">ab</span>
+                            <span class="pricing-value">990 €</span>
+                            <span class="pricing-suffix">/Monat</span>
+                        </div>
+                        <div class="pricing-label">Laufender Betrieb</div>
+                        <div class="pricing-detail">inkl. Monitoring, Support & Optimierung</div>
+                    </div>
+                </div>
+                
+                <p class="pricing-note">Der genaue Preis hängt davon ab, welche Module Sie brauchen und welche Systeme angebunden werden. In einem 15-Minuten-Gespräch können wir das klären.</p>
+                
+                <div class="pricing-cta">
+                    <a href="sites/offers.html" class="pricing-btn">Unverbindlich anfragen</a>
+                </div>
+                
+                <div class="pricing-benefits">
+                    <span class="pricing-benefit"><span class="benefit-check"></span>✓</span> Keine Mindestlaufzeit über 3 Monate</span>
+                    <span class="pricing-benefit"><span class="benefit-check">✓</span> Danach monatlich kündbar</span>
+                    <span class="pricing-benefit"><span class="benefit-check">✓</span> Keine versteckten Kosten</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- 3 Schritte Section -->
     <section class="process-section" id="process">
         <div class="container">
@@ -524,39 +443,6 @@
         </div>
     </section>
 
-    <!-- Interaction Section -->
-    <section class="interaction-section" id="interaction">
-        <div class="container">
-            <h2 class="section-headline">Sprich nicht mit uns. Sprich mit unserem System.</h2>
-            
-            <div class="interaction-cards">
-                <div class="interaction-card" id="phoneInteraction">
-                    <div class="card-visual">
-                        <div class="microphone">
-                            <div class="mic-icon">🎤</div>
-                            <div class="pulse-ring"></div>
-                        </div>
-                    </div>
-                    <h3>KI Telefon</h3>
-                    <p>Teste unseren KI-Telefonassistenten jetzt</p>
-                    <button class="interaction-btn primary">Jetzt anrufen</button>
-                </div>
-                
-                <div class="interaction-card" id="chatInteraction">
-                    <h3>KI Chat</h3>
-                    <p>Starte eine Konversation mit unserer KI</p>
-                    <div class="card-visual">
-                        <div class="chat-window">
-                            <div class="chat-header">KI Support</div>
-                            <div class="chat-messages">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
     <!-- Footer Banner -->
     <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
         <style>
@@ -639,6 +525,7 @@
     <script src="scripts/cursor.js" defer></script>
     <script src="scripts/scroll-header.min.js" defer></script>
     <script src="scripts/chat.js" defer></script>
+    <script src="scripts/demo-chat.js" defer></script>
     <script src="scripts/console-image.js" defer></script>
 
 </body>
diff --git a/Profice WebSite/scripts/demo-chat.js b/Profice WebSite/scripts/demo-chat.js
new file mode 100644
index 0000000..8a635ee
--- /dev/null
+++ b/Profice WebSite/scripts/demo-chat.js	
@@ -0,0 +1,140 @@
+/**
+ * Demo Chat Widget - Functional Chat Interface for KI Demo Section
+ * Connects to N8N webhook via send.php
+ */
+
+class DemoChat {
+    constructor() {
+        this.sessionId = this.generateSessionId();
+        this.isTyping = false;
+        this.messages = [];
+        this.chatMessages = null;
+        this.chatInput = null;
+        this.sendBtn = null;
+        
+        this.init();
+    }
+    
+    init() {
+        // Wait for DOM to be ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.setup());
+        } else {
+            this.setup();
+        }
+    }
+    
+    setup() {
+        // Get demo chat elements
+        this.chatMessages = document.querySelector('.chat-demo .chat-messages');
+        this.chatInput = document.querySelector('.chat-demo .chat-input-field');
+        this.sendBtn = document.querySelector('.chat-demo .chat-send-btn');
+        
+        if (!this.chatMessages || !this.chatInput || !this.sendBtn) {
+            console.warn('Demo chat elements not found');
+            return;
+        }
+        
+        this.bindEvents();
+    }
+    
+    generateSessionId() {
+        return 'demo_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+    
+    bindEvents() {
+        // Send on button click
+        this.sendBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.sendMessage();
+        });
+        
+        // Send on Enter key
+        this.chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+    }
+    
+    addMessageToUI(sender, text) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `chat-bubble ${sender === 'user' ? 'user-bubble' : ''}`;
+        messageDiv.innerHTML = `<span>${this.escapeHtml(text)}</span>`;
+        this.chatMessages.appendChild(messageDiv);
+        this.scrollToBottom();
+    }
+    
+    async sendMessage() {
+        const message = this.chatInput?.value?.trim();
+        
+        if (!message || this.isTyping) return;
+        
+        // Add user message to UI
+        this.addMessageToUI('user', message);
+        this.chatInput.value = '';
+        
+        // Show typing indicator
+        this.showTypingIndicator();
+        this.isTyping = true;
+        
+        try {
+            const response = await fetch('/scripts/add/send.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    type: 'chat',
+                    message: message,
+                    session_id: this.sessionId
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (data.success && data.data && data.data.ai_response) {
+                this.addMessageToUI('ki', data.data.ai_response);
+            } else {
+                this.addMessageToUI('ki', 'Entschuldigung, es gab ein Problem. Bitte versuchen Sie es später erneut.');
+            }
+        } catch (error) {
+            console.error('Demo chat error:', error);
+            this.addMessageToUI('ki', 'Verbindung zum Server fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.');
+        } finally {
+            this.hideTypingIndicator();
+            this.isTyping = false;
+        }
+    }
+    
+    showTypingIndicator() {
+        if (!this.chatMessages.querySelector('.typing-indicator')) {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'chat-bubble typing-indicator';
+            typingDiv.innerHTML = '<span>...</span>';
+            this.chatMessages.appendChild(typingDiv);
+            this.scrollToBottom();
+        }
+    }
+    
+    hideTypingIndicator() {
+        const typingIndicator = this.chatMessages.querySelector('.typing-indicator');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+    
+    scrollToBottom() {
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Initialize demo chat
+window.demoChat = new DemoChat();
diff --git a/Profice WebSite/scripts/script.js b/Profice WebSite/scripts/script.js
index 0e27958..c2f113e 100644
--- a/Profice WebSite/scripts/script.js	
+++ b/Profice WebSite/scripts/script.js	
@@ -41,6 +41,38 @@ document.addEventListener("DOMContentLoaded", function() {
     
     initSmoothScrolling();
     
+    // ==========================================
+    // 1.5. BUTTON NAVIGATION TO DEMO SECTION
+    // ==========================================
+    
+    function initButtonNavigation() {
+        const kiPhoneBtn = document.getElementById('kiPhoneBtn');
+        const chatBtn = document.getElementById('chatBtn');
+        const demoSection = document.getElementById('demo-section');
+        
+        if (demoSection) {
+            const scrollToDemo = () => {
+                const header = document.querySelector('.top-banner');
+                const headerHeight = header ? header.offsetHeight : 90;
+                
+                window.scrollTo({
+                    top: demoSection.offsetTop - headerHeight - 20,
+                    behavior: 'smooth'
+                });
+            };
+            
+            if (kiPhoneBtn) {
+                kiPhoneBtn.addEventListener('click', scrollToDemo);
+            }
+            
+            if (chatBtn) {
+                chatBtn.addEventListener('click', scrollToDemo);
+            }
+        }
+    }
+    
+    initButtonNavigation();
+    
     // ==========================================
     // 2. MENU TOGGLE
     // ==========================================
diff --git a/Profice WebSite/scripts/tech-onepager.js b/Profice WebSite/scripts/tech-onepager.js
index 150f607..5879f5c 100644
--- a/Profice WebSite/scripts/tech-onepager.js	
+++ b/Profice WebSite/scripts/tech-onepager.js	
@@ -409,8 +409,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     }, 200);
                 }, 100);
                 
-                // Show feedback
-                showInteractionFeedback('KI Telefon wird verbunden...');
+                // Show feedback - removed
             });
         }
     }
@@ -456,7 +455,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         }, 200);
                     }, 100);
                     
-                    showInteractionFeedback('KI Chat wird gestartet...');
+                    // Show feedback - removed
                 });
             }
         }
@@ -497,7 +496,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     if (kiPhoneBtn) {
         kiPhoneBtn.addEventListener('click', () => {
-            showInteractionFeedback('KI Telefon wird verbunden...');
+            // Show feedback - removed
             // Scroll to interaction section
             document.getElementById('interaction')?.scrollIntoView({ 
                 behavior: 'smooth', 
@@ -508,7 +507,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     if (chatBtn) {
         chatBtn.addEventListener('click', () => {
-            showInteractionFeedback('KI Chat wird gestartet...');
+            // Show feedback - removed
             // Scroll to interaction section
             document.getElementById('interaction')?.scrollIntoView({ 
                 behavior: 'smooth', 
diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css
index c1ebf03..4eec97b 100644
--- a/Profice WebSite/style/design.css	
+++ b/Profice WebSite/style/design.css	
@@ -5,6 +5,9 @@
     --accent-orange: #d4864a;
     --accent-teal: #5a9e96;
     --accent-green: #7fb882;
+    --widget-bg: rgba(255, 255, 255, 0.9);
+    --widget-border: #d4864a;
+    --widget-shadow: 0 4px 20px rgba(90, 82, 82, 0.1);
 }
 
 * {
@@ -1531,4 +1534,736 @@ body {
     height: 64px;
     filter: brightness(0) invert(1);
     object-fit: contain;
+}
+
+/* KI Widgets Section */
+.ki-widgets-section {
+    padding: 80px 0;
+    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(255, 255, 255, 0.5) 100%);
+}
+
+.widgets-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.ki-widget {
+    background: var(--widget-bg);
+    border: 2px solid var(--widget-border);
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: var(--widget-shadow);
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    position: relative;
+    overflow: hidden;
+}
+
+.ki-widget::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--accent-orange), var(--accent-teal));
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.ki-widget:hover::before {
+    transform: scaleX(1);
+}
+
+.ki-widget:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 30px rgba(90, 82, 82, 0.15);
+}
+
+.widget-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.widget-icon {
+    font-size: 2.5rem;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal));
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(212, 134, 74, 0.3);
+}
+
+.widget-header h3 {
+    color: var(--primary-dark);
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.widget-content p {
+    color: var(--primary-mid);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.widget-features {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 25px 0;
+}
+
+.widget-features li {
+    color: var(--primary-dark);
+    font-size: 0.95rem;
+    padding: 8px 0;
+    padding-left: 25px;
+    position: relative;
+}
+
+.widget-features li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--accent-green);
+    font-weight: bold;
+}
+
+.widget-btn {
+    background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal));
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 25px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(212, 134, 74, 0.3);
+    width: 100%;
+}
+
+.widget-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(212, 134, 74, 0.4);
+}
+
+.widget-btn:active {
+    transform: translateY(0);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .ki-widgets-section {
+        padding: 60px 20px;
+    }
+    
+    .widgets-grid {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    
+    .ki-widget {
+        padding: 25px;
+    }
+    
+    .widget-icon {
+        width: 50px;
+        height: 50px;
+        font-size: 2rem;
+    }
+    
+    .widget-header h3 {
+        font-size: 1.3rem;
+    }
+}
+
+/* KI Demo Widgets Section */
+.ki-demo-section {
+    padding: 40px 0 80px 0;
+    margin-top: -40px;
+    position: relative;
+    z-index: 10;
+}
+
+.demo-section-title {
+    text-align: center;
+    font-size: 2.5rem;
+    color: var(--primary-dark);
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.demo-section-subtitle {
+    text-align: center;
+    color: var(--primary-mid);
+    font-size: 1.1rem;
+    margin-bottom: 50px;
+}
+
+.demo-widgets-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.demo-widget {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 4px 20px rgba(90, 82, 82, 0.1);
+    text-align: center;
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-widget h3 {
+    color: var(--primary-dark);
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+}
+
+.demo-widget p {
+    color: var(--primary-mid);
+    font-size: 0.95rem;
+    margin-bottom: 20px;
+}
+
+.demo-icon-circle {
+    width: 80px;
+    height: 80px;
+    background: rgba(127, 184, 130, 0.3);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 20px;
+    font-size: 2rem;
+    box-shadow: 0 4px 15px rgba(127, 184, 130, 0.3);
+}
+
+.demo-btn {
+    background: var(--accent-teal);
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.demo-btn:hover {
+    background: #4a8e86;
+    transform: translateY(-2px);
+}
+
+.chat-preview {
+    background: #f5f5f5;
+    border-radius: 12px;
+    overflow: hidden;
+    text-align: left;
+}
+
+.chat-header {
+    background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
+    color: white;
+    padding: 12px 20px;
+    font-weight: 600;
+}
+
+.chat-bubble {
+    background: var(--accent-teal);
+    color: white;
+    margin: 15px;
+    padding: 12px 16px;
+    border-radius: 12px 12px 12px 4px;
+    display: inline-block;
+    max-width: 80%;
+}
+
+.chat-bubble span {
+    display: block;
+}
+
+.chat-time {
+    font-size: 0.75rem;
+    opacity: 0.7;
+    margin-top: 5px;
+}
+
+.chat-messages {
+    min-height: 120px;
+    padding: 10px 0;
+}
+
+.chat-input-area {
+    display: flex;
+    padding: 12px;
+    background: white;
+    border-top: 1px solid #e0e0e0;
+    gap: 10px;
+}
+
+.chat-input-field {
+    flex: 1;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    padding: 10px 16px;
+    font-size: 0.9rem;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+.chat-input-field:focus {
+    border-color: var(--accent-teal);
+}
+
+.chat-send-btn {
+    background: var(--accent-teal);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chat-send-btn:hover {
+    background: #4a8e86;
+    transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+    .demo-widgets-grid {
+        grid-template-columns: 1fr;
+        gap: 30px;
+        padding: 0 20px;
+    }
+    
+    .demo-widget {
+        padding: 30px;
+    }
+}
+
+.demo-note {
+    display: block;
+    margin-top: 15px;
+    color: var(--primary-mid);
+    font-size: 0.85rem;
+}
+
+.online-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #4ade80;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.chat-icon {
+    background: rgba(167, 139, 250, 0.3);
+}
+
+.chat-preview .chat-bubble {
+    background: #f0f0f0;
+    color: var(--primary-dark);
+    border-radius: 12px;
+    margin: 15px;
+    padding: 15px;
+    text-align: left;
+    max-width: 85%;
+    display: block;
+}
+
+.chat-preview .chat-bubble.user-bubble {
+    background: var(--accent-teal);
+    color: white;
+    margin-left: auto;
+    margin-right: 15px;
+    border-radius: 12px 12px 4px 12px;
+}
+
+/* Problems Section */
+.problems-section {
+    padding: 80px 0;
+    background: transparent;
+}
+
+.section-label {
+    display: block;
+    color: var(--accent-teal);
+    font-size: 0.85rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
+
+.ki-demo-section .section-label {
+    text-align: center;
+}
+
+.problems-headline {
+    font-size: 2.5rem;
+    color: var(--primary-dark);
+    margin-bottom: 50px;
+    font-weight: 700;
+}
+
+.problems-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+.problem-card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    border: 1px solid #e0e0e0;
+}
+
+.problem-number {
+    display: block;
+    color: var(--primary-mid);
+    font-size: 0.85rem;
+    margin-bottom: 15px;
+}
+
+.problem-card h3 {
+    color: var(--primary-dark);
+    font-size: 1.3rem;
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.problem-card p {
+    color: var(--primary-mid);
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.solution-card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    border: 1px solid #e0e0e0;
+}
+
+.solution-label {
+    display: block;
+    color: var(--accent-teal);
+    font-size: 0.85rem;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+
+.solution-card h3 {
+    color: var(--primary-dark);
+    font-size: 1.3rem;
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.solution-card p {
+    color: var(--primary-mid);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.solution-badge {
+    display: inline-block;
+    background: rgba(127, 184, 130, 0.15);
+    color: var(--accent-teal);
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+@media (max-width: 768px) {
+    .problems-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .problems-headline {
+        font-size: 1.8rem;
+    }
+}
+
+/* Fit Section */
+.fit-section {
+    padding: 80px 0;
+    background: transparent;
+}
+
+.fit-headline {
+    font-size: 2.5rem;
+    color: var(--primary-dark);
+    margin-bottom: 50px;
+    font-weight: 700;
+}
+
+.fit-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+.fit-card {
+    border-radius: 16px;
+    padding: 30px;
+    border: 1px solid #e0e0e0;
+}
+
+.fit-card.negative {
+    background: rgba(255, 0, 0, 0.5);
+}
+
+.fit-card.positive {
+    background: rgba(0, 128, 0, 0.5);
+    border-left-color: var(--accent-teal);
+}
+
+.fit-card-title {
+    font-size: 1.1rem;
+    margin-bottom: 25px;
+    font-weight: 600;
+    color: var(--primary-dark);
+    opacity: 1;
+    text-shadow: none;
+}
+
+.negative-title {
+    color: var(--primary-dark);
+}
+
+.positive-title {
+    color: var(--primary-dark);
+}
+
+.fit-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.fit-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: 0.95rem;
+    color: var(--primary-dark);
+    font-weight: 500;
+    opacity: 1;
+    text-shadow: none;
+}
+
+.fit-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.negative-icon {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+    font-weight: bold;
+}
+
+.positive-icon {
+    background: rgba(127, 184, 130, 0.25);
+    color: var(--accent-teal);
+    font-weight: bold;
+}
+
+@media (max-width: 768px) {
+    .fit-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .fit-headline {
+        font-size: 1.8rem;
+    }
+}
+
+/* Pricing Section */
+.pricing-section {
+    padding: 80px 0;
+    background: transparent;
+}
+
+.pricing-headline {
+    font-size: 2.5rem;
+    color: var(--primary-dark);
+    margin-bottom: 20px;
+    font-weight: 700;
+}
+
+.pricing-headline::after {
+    display: none;
+}
+
+.pricing-box {
+    background: white;
+    border-radius: 16px;
+    padding: 50px 60px;
+    border: none;
+    border-top: 3px solid var(--accent-orange);
+    text-align: center;
+    margin-top: 30px;
+}
+
+.pricing-cards {
+    display: flex;
+    justify-content: center;
+    gap: 80px;
+    margin-bottom: 30px;
+    flex-wrap: wrap;
+}
+
+.pricing-section .pricing-card {
+    text-align: center;
+    background: transparent !important;
+    padding: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    min-width: 200px;
+}
+
+.pricing-section .pricing-card:hover {
+    transform: none;
+    box-shadow: none !important;
+}
+
+.pricing-amount {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 5px;
+    margin-bottom: 10px;
+}
+
+.pricing-prefix {
+    font-size: 1rem;
+    color: var(--primary-mid);
+}
+
+.pricing-value {
+    font-size: 3rem;
+    font-weight: 300;
+    color: var(--primary-dark);
+}
+
+.pricing-suffix {
+    font-size: 1rem;
+    color: var(--primary-mid);
+}
+
+.pricing-label {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--primary-dark);
+    margin-bottom: 5px;
+}
+
+.pricing-detail {
+    font-size: 0.85rem;
+    color: var(--primary-mid);
+}
+
+.pricing-note {
+    text-align: center;
+    color: var(--primary-mid);
+    font-size: 0.95rem;
+    max-width: 600px;
+    margin: 0 auto 30px;
+    line-height: 1.6;
+}
+
+.pricing-cta {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.pricing-btn {
+    display: inline-block;
+    background: var(--accent-teal);
+    color: white;
+    padding: 18px 50px;
+    border-radius: 50px;
+    font-size: 1rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.pricing-btn:hover {
+    background: #4a8e86;
+    transform: translateY(-2px);
+}
+
+.pricing-benefits {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    flex-wrap: wrap;
+}
+
+.pricing-benefit {
+    color: var(--primary-mid);
+    font-size: 0.9rem;
+}
+
+.pricing-benefit::before {
+    content: none;
+}
+
+.benefit-check {
+    color: var(--accent-teal);
+    margin-right: 6px;
+}
+
+@media (max-width: 768px) {
+    .pricing-cards {
+        flex-direction: column;
+        gap: 40px;
+        align-items: center;
+    }
+    
+    .pricing-headline {
+        font-size: 1.8rem;
+    }
+    
+    .pricing-benefits {
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+    }
 }
\ No newline at end of file