Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redisgn

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-02-11 09:29:23 +01:00
parent 6fb4f97742
commit 4055d37adf
5 changed files with 1078 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

447
Profice WebSite/index.html
View File

@@ -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>