2156 lines
73 KiB
Plaintext
2156 lines
73 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Profice - Kein Anruf geht mehr verloren. KI-Telefonassistenten, Chatbots und interne KI-Systeme für Unternehmen.">
|
||
<meta name="keywords" content="KI Telefonassistent, Chatbot, digitale Mitarbeiter, Automatisierung, KI Systeme">
|
||
<meta name="author" content="Profice">
|
||
<meta property="og:title" content="Profice - Digitale Mitarbeiter für Ihr Unternehmen">
|
||
<meta property="og:description" content="KI-Systeme die Ihre Anfragen automatisch bearbeiten. Testen Sie es sofort.">
|
||
<meta property="og:type" content="website">
|
||
<meta name="robots" content="index, follow">
|
||
<title>Profice - Digitale Mitarbeiter</title>
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Raleway:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ═══════════════════════════════════════
|
||
PROFICE CI – DESIGN TOKENS
|
||
═══════════════════════════════════════ */
|
||
:root {
|
||
/* Primary Colors */
|
||
--charcoal-brown: #4F4747;
|
||
--soft-ivory: #EBEBDE;
|
||
--slate-olive: #777764;
|
||
|
||
/* Secondary / Accent Colors */
|
||
--amber-flame: #F57C00;
|
||
--digital-teal: #26A69A;
|
||
--growth-green: #66BB6A;
|
||
|
||
/* Derived Colors */
|
||
--bg-page: #f4f4ec;
|
||
--bg-card: #ffffff;
|
||
--bg-card-hover: #fafaf5;
|
||
--bg-header: var(--charcoal-brown);
|
||
--border-card: rgba(79, 71, 71, 0.1);
|
||
--border-subtle: rgba(79, 71, 71, 0.06);
|
||
--text-dark: #2d2828;
|
||
--text-body: var(--charcoal-brown);
|
||
--text-muted: var(--slate-olive);
|
||
--text-light: var(--soft-ivory);
|
||
--teal-soft: rgba(38, 166, 154, 0.08);
|
||
--teal-border: rgba(38, 166, 154, 0.2);
|
||
--teal-glow: rgba(38, 166, 154, 0.12);
|
||
--amber-soft: rgba(245, 124, 0, 0.08);
|
||
--amber-border: rgba(245, 124, 0, 0.2);
|
||
|
||
/* Typography */
|
||
--font-primary: 'Montserrat', sans-serif;
|
||
--font-secondary: 'Raleway', sans-serif;
|
||
|
||
/* Layout */
|
||
--max-width: 1140px;
|
||
--section-gap: 120px;
|
||
--radius: 16px;
|
||
--radius-sm: 10px;
|
||
--radius-node: 14px;
|
||
|
||
/* Shadows */
|
||
--shadow-card: 0 2px 20px rgba(79, 71, 71, 0.06);
|
||
--shadow-card-hover: 0 8px 32px rgba(79, 71, 71, 0.1);
|
||
--shadow-node: 0 4px 24px rgba(79, 71, 71, 0.08);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
RESET & BASE
|
||
═══════════════════════════════════════ */
|
||
*, *::before, *::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-primary);
|
||
background: var(--bg-page);
|
||
color: var(--text-body);
|
||
line-height: 1.65;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.container {
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
HEXAGONAL BACKGROUND
|
||
═══════════════════════════════════════ */
|
||
#hexCanvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
opacity: 0.35;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
HEADER
|
||
═══════════════════════════════════════ */
|
||
.site-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: var(--bg-header);
|
||
border-bottom: 3px solid var(--amber-flame);
|
||
}
|
||
|
||
.header-inner {
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 12px 32px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.menu-toggle {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: 1.5px solid rgba(235, 235, 222, 0.3);
|
||
background: transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
transition: border-color 0.25s;
|
||
}
|
||
|
||
.menu-toggle:hover {
|
||
border-color: rgba(235, 235, 222, 0.6);
|
||
}
|
||
|
||
.menu-toggle span {
|
||
width: 16px;
|
||
height: 1.5px;
|
||
background: var(--soft-ivory);
|
||
border-radius: 1px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.logo-link {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo-img {
|
||
height: 28px;
|
||
width: auto;
|
||
}
|
||
|
||
/* Placeholder text logo matching the CI */
|
||
.logo-text {
|
||
font-family: var(--font-primary);
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
color: var(--soft-ivory);
|
||
letter-spacing: 3px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.logo-text .fp-mono {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1.5px solid rgba(235, 235, 222, 0.5);
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
margin-right: 10px;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.header-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 9px 22px;
|
||
background: var(--digital-teal);
|
||
color: #ffffff;
|
||
font-family: var(--font-primary);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
border: none;
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.header-cta:hover {
|
||
background: #1e9488;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 16px rgba(38, 166, 154, 0.25);
|
||
}
|
||
|
||
/* Slide Menu */
|
||
.slide-menu {
|
||
position: fixed;
|
||
top: 0;
|
||
left: -300px;
|
||
width: 280px;
|
||
height: 100vh;
|
||
background: var(--charcoal-brown);
|
||
z-index: 200;
|
||
transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||
padding: 80px 32px 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.slide-menu.open {
|
||
left: 0;
|
||
}
|
||
|
||
.slide-menu a {
|
||
color: var(--soft-ivory);
|
||
font-family: var(--font-secondary);
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
padding: 12px 16px;
|
||
border-radius: var(--radius-sm);
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.slide-menu a:hover,
|
||
.slide-menu a.active {
|
||
background: rgba(235, 235, 222, 0.08);
|
||
}
|
||
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(45, 40, 40, 0.5);
|
||
z-index: 150;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.35s;
|
||
}
|
||
|
||
.overlay.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
HERO SECTION
|
||
═══════════════════════════════════════ */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 100px 0 60px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-content {
|
||
animation: heroFadeUp 0.8s ease-out;
|
||
}
|
||
|
||
@keyframes heroFadeUp {
|
||
from { opacity: 0; transform: translateY(24px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: var(--font-primary);
|
||
font-size: clamp(32px, 4.5vw, 48px);
|
||
font-weight: 700;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.5px;
|
||
color: var(--text-dark);
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.hero-sub {
|
||
background: linear-gradient(135deg, rgba(38, 166, 154, 0.1), rgba(102, 187, 106, 0.08));
|
||
border-left: 3px solid var(--digital-teal);
|
||
padding: 16px 20px;
|
||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||
font-family: var(--font-secondary);
|
||
font-size: 16px;
|
||
color: var(--text-body);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.hero-proof {
|
||
background: linear-gradient(135deg, rgba(38, 166, 154, 0.06), rgba(102, 187, 106, 0.04));
|
||
border-left: 3px solid var(--growth-green);
|
||
padding: 14px 20px;
|
||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 14px;
|
||
margin-bottom: 32px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-teal {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 28px;
|
||
background: var(--digital-teal);
|
||
color: #ffffff;
|
||
font-family: var(--font-primary);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border: none;
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-teal:hover {
|
||
background: #1e9488;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(38, 166, 154, 0.3);
|
||
}
|
||
|
||
.btn-outline {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 28px;
|
||
background: var(--bg-card);
|
||
color: var(--text-body);
|
||
font-family: var(--font-primary);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
border-color: var(--digital-teal);
|
||
color: var(--digital-teal);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.hero-trust {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.hero-trust .sep {
|
||
width: 1px;
|
||
height: 14px;
|
||
background: rgba(119, 119, 100, 0.3);
|
||
}
|
||
|
||
/* ─── Node Graphic ─── */
|
||
.hero-visual {
|
||
position: relative;
|
||
animation: heroFadeUp 0.8s ease-out 0.15s both;
|
||
}
|
||
|
||
.system-graphic {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 1.1;
|
||
}
|
||
|
||
.node {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 18px 22px;
|
||
background: var(--bg-card);
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: var(--radius-node);
|
||
box-shadow: var(--shadow-node);
|
||
cursor: default;
|
||
transition: all 0.3s ease;
|
||
z-index: 2;
|
||
}
|
||
|
||
.node:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-card-hover);
|
||
border-color: var(--digital-teal);
|
||
}
|
||
|
||
.node-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.node-label {
|
||
font-family: var(--font-primary);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-body);
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
/* Central KI Node */
|
||
.central-node {
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: var(--digital-teal);
|
||
border-color: var(--digital-teal);
|
||
padding: 22px 28px;
|
||
z-index: 3;
|
||
}
|
||
|
||
.central-node:hover {
|
||
transform: translate(-50%, -53%);
|
||
}
|
||
|
||
.central-node .node-label {
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.central-node .node-icon {
|
||
font-size: 26px;
|
||
}
|
||
|
||
/* Node Positions */
|
||
.phone-node { left: 52%; top: 2%; }
|
||
.chat-node { right: 2%; top: 12%; }
|
||
.crm-node { right: 2%; top: 50%; }
|
||
.ticket-node { left: 38%; bottom: 2%; }
|
||
.team-node { left: 8%; top: 42%; }
|
||
|
||
/* Connection Lines */
|
||
.connections {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.connection-line {
|
||
stroke: var(--digital-teal);
|
||
stroke-width: 1.5;
|
||
stroke-dasharray: 6 4;
|
||
fill: none;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
SECTION COMMON STYLES
|
||
═══════════════════════════════════════ */
|
||
section {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.section-label {
|
||
font-family: var(--font-secondary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--digital-teal);
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-headline {
|
||
font-family: var(--font-primary);
|
||
font-size: clamp(26px, 3.2vw, 38px);
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
letter-spacing: -0.3px;
|
||
line-height: 1.2;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-sub {
|
||
font-family: var(--font-secondary);
|
||
font-size: 15px;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
max-width: 520px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
LIVE DEMO SECTION
|
||
═══════════════════════════════════════ */
|
||
.demo-section {
|
||
padding: var(--section-gap) 0;
|
||
}
|
||
|
||
.demo-header {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.demo-header .section-headline {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.demo-header .section-sub {
|
||
margin: 0 auto;
|
||
max-width: 460px;
|
||
}
|
||
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.demo-card {
|
||
background: var(--bg-card);
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: var(--radius);
|
||
padding: 36px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-card);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.demo-card:hover {
|
||
box-shadow: var(--shadow-card-hover);
|
||
border-color: var(--teal-border);
|
||
}
|
||
|
||
.demo-icon-wrap {
|
||
width: 64px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 18px;
|
||
font-size: 28px;
|
||
margin-bottom: 20px;
|
||
background: var(--teal-soft);
|
||
border: 1px solid var(--teal-border);
|
||
}
|
||
|
||
.demo-card h3 {
|
||
font-family: var(--font-primary);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.demo-card > p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 24px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.demo-note {
|
||
font-family: var(--font-secondary);
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 14px;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
/* Chat Widget */
|
||
.chat-widget {
|
||
width: 100%;
|
||
background: var(--bg-page);
|
||
border: 1px solid var(--border-card);
|
||
border-radius: var(--radius-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chat-widget-header {
|
||
padding: 10px 16px;
|
||
background: var(--charcoal-brown);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--soft-ivory);
|
||
}
|
||
|
||
.status-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
background: var(--growth-green);
|
||
border-radius: 50%;
|
||
animation: dotPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes dotPulse {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.5; transform: scale(0.85); }
|
||
}
|
||
|
||
.chat-messages {
|
||
padding: 16px;
|
||
min-height: 140px;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.chat-msg {
|
||
max-width: 85%;
|
||
padding: 10px 14px;
|
||
border-radius: 12px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
animation: msgIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes msgIn {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.chat-msg.bot {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-card);
|
||
color: var(--text-body);
|
||
align-self: flex-start;
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
|
||
.chat-msg.user {
|
||
background: var(--teal-soft);
|
||
border: 1px solid var(--teal-border);
|
||
color: var(--text-body);
|
||
align-self: flex-end;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
|
||
.chat-input-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
border-top: 1px solid var(--border-card);
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
.chat-input-row input {
|
||
flex: 1;
|
||
background: var(--bg-page);
|
||
border: 1px solid var(--border-card);
|
||
border-radius: var(--radius-sm);
|
||
padding: 10px 14px;
|
||
color: var(--text-body);
|
||
font-family: var(--font-secondary);
|
||
font-size: 13px;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.chat-input-row input:focus {
|
||
border-color: var(--digital-teal);
|
||
}
|
||
|
||
.chat-input-row input::placeholder {
|
||
color: var(--slate-olive);
|
||
}
|
||
|
||
.chat-send-btn {
|
||
padding: 10px 18px;
|
||
background: var(--digital-teal);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
font-family: var(--font-primary);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.chat-send-btn:hover {
|
||
background: #1e9488;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
SYSTEME / PROBLEMS SECTION
|
||
═══════════════════════════════════════ */
|
||
.systeme-section {
|
||
padding: 0 0 var(--section-gap);
|
||
}
|
||
|
||
.systeme-header {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.system-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.system-card {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
background: var(--bg-card);
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-card);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.system-card:hover {
|
||
box-shadow: var(--shadow-card-hover);
|
||
border-color: var(--teal-border);
|
||
}
|
||
|
||
.card-problem {
|
||
padding: 36px;
|
||
border-right: 1px solid var(--border-card);
|
||
}
|
||
|
||
.card-number {
|
||
font-family: var(--font-secondary);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
letter-spacing: 1px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.card-problem h3 {
|
||
font-family: var(--font-primary);
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
margin-bottom: 10px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.card-problem p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.card-solution {
|
||
padding: 36px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.solution-tag {
|
||
font-family: var(--font-secondary);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--digital-teal);
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.card-solution h4 {
|
||
font-family: var(--font-primary);
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.card-solution p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.65;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.solution-metric {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 14px;
|
||
background: var(--teal-soft);
|
||
border: 1px solid var(--teal-border);
|
||
border-radius: var(--radius-sm);
|
||
font-family: var(--font-primary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--digital-teal);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
PROCESS / TIMELINE
|
||
═══════════════════════════════════════ */
|
||
.process-section {
|
||
padding: 0 0 var(--section-gap);
|
||
}
|
||
|
||
.process-header {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 44px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 14px;
|
||
top: 8px;
|
||
bottom: 8px;
|
||
width: 2px;
|
||
background: linear-gradient(to bottom, var(--digital-teal), var(--border-card), var(--border-card));
|
||
border-radius: 1px;
|
||
}
|
||
|
||
.tl-item {
|
||
position: relative;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.tl-item:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.tl-dot {
|
||
position: absolute;
|
||
left: -38px;
|
||
top: 5px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--bg-page);
|
||
border: 2.5px solid var(--border-card);
|
||
z-index: 2;
|
||
}
|
||
|
||
.tl-item:first-child .tl-dot {
|
||
border-color: var(--digital-teal);
|
||
background: var(--digital-teal);
|
||
box-shadow: 0 0 0 4px var(--teal-soft);
|
||
}
|
||
|
||
.tl-time {
|
||
font-family: var(--font-secondary);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--digital-teal);
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tl-title {
|
||
font-family: var(--font-primary);
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tl-desc {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
QUALIFICATION
|
||
═══════════════════════════════════════ */
|
||
.qual-section {
|
||
padding: 0 0 var(--section-gap);
|
||
}
|
||
|
||
.qual-header {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.qual-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.qual-card {
|
||
background: var(--bg-card);
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: var(--radius);
|
||
padding: 36px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.qual-card h3 {
|
||
font-family: var(--font-primary);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.qual-card.negative h3 {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.qual-card.positive h3 {
|
||
color: var(--digital-teal);
|
||
}
|
||
|
||
.qual-list {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.qual-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--text-body);
|
||
}
|
||
|
||
.q-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.qual-card.negative .q-icon {
|
||
background: rgba(245, 124, 0, 0.08);
|
||
color: var(--amber-flame);
|
||
border: 1px solid var(--amber-border);
|
||
}
|
||
|
||
.qual-card.positive .q-icon {
|
||
background: var(--teal-soft);
|
||
color: var(--digital-teal);
|
||
border: 1px solid var(--teal-border);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
PRICING
|
||
═══════════════════════════════════════ */
|
||
.pricing-section {
|
||
padding: 0 0 var(--section-gap);
|
||
}
|
||
|
||
.pricing-header {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.pricing-box {
|
||
background: var(--bg-card);
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: var(--radius);
|
||
padding: 48px;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-card);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pricing-box::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--digital-teal), var(--growth-green));
|
||
}
|
||
|
||
.pricing-numbers {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 60px;
|
||
margin-bottom: 28px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.price-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.price-amount {
|
||
font-family: var(--font-primary);
|
||
font-size: 34px;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
letter-spacing: -1px;
|
||
}
|
||
|
||
.price-amount .from {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.price-label {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-body);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.price-detail {
|
||
font-family: var(--font-secondary);
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.pricing-note {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.65;
|
||
max-width: 520px;
|
||
margin: 0 auto 28px;
|
||
}
|
||
|
||
.pricing-extras {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 28px;
|
||
flex-wrap: wrap;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.pricing-extra {
|
||
font-family: var(--font-secondary);
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.pricing-extra .check {
|
||
color: var(--digital-teal);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
CASE STUDY
|
||
═══════════════════════════════════════ */
|
||
.case-section {
|
||
padding: 0 0 var(--section-gap);
|
||
}
|
||
|
||
.case-header {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.case-card {
|
||
background: var(--bg-card);
|
||
border: 1.5px solid var(--border-card);
|
||
border-radius: var(--radius);
|
||
padding: 48px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: center;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.case-content h3 {
|
||
font-family: var(--font-primary);
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--text-dark);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.case-content p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.65;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.case-stats {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.case-stat {
|
||
background: var(--bg-page);
|
||
border: 1px solid var(--border-card);
|
||
border-radius: var(--radius-sm);
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.case-stat-value {
|
||
font-family: var(--font-primary);
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
color: var(--digital-teal);
|
||
}
|
||
|
||
.case-stat-label {
|
||
font-family: var(--font-secondary);
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
FAQ
|
||
═══════════════════════════════════════ */
|
||
.faq-section {
|
||
padding: 0 0 var(--section-gap);
|
||
}
|
||
|
||
.faq-header {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.faq-list {
|
||
max-width: 720px;
|
||
}
|
||
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--border-card);
|
||
}
|
||
|
||
.faq-question {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 0;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-dark);
|
||
font-family: var(--font-primary);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.faq-question:hover {
|
||
color: var(--digital-teal);
|
||
}
|
||
|
||
.faq-toggle {
|
||
font-size: 18px;
|
||
color: var(--text-muted);
|
||
transition: transform 0.3s ease;
|
||
flex-shrink: 0;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.faq-item.open .faq-toggle {
|
||
transform: rotate(45deg);
|
||
color: var(--digital-teal);
|
||
}
|
||
|
||
.faq-answer {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.35s ease;
|
||
}
|
||
|
||
.faq-item.open .faq-answer {
|
||
max-height: 200px;
|
||
}
|
||
|
||
.faq-answer p {
|
||
padding-bottom: 20px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
FINAL CTA
|
||
═══════════════════════════════════════ */
|
||
.final-cta {
|
||
padding: 0 0 80px;
|
||
}
|
||
|
||
.final-cta-box {
|
||
background: var(--charcoal-brown);
|
||
border-radius: var(--radius);
|
||
padding: 64px 48px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.final-cta-box::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--amber-flame), var(--digital-teal));
|
||
}
|
||
|
||
.final-cta-box h2 {
|
||
font-family: var(--font-primary);
|
||
font-size: clamp(24px, 3vw, 34px);
|
||
font-weight: 700;
|
||
color: var(--soft-ivory);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.final-cta-box p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 15px;
|
||
color: rgba(235, 235, 222, 0.7);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.final-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-teal-light {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 28px;
|
||
background: var(--digital-teal);
|
||
color: #ffffff;
|
||
font-family: var(--font-primary);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border: none;
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
transition: all 0.25s;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-teal-light:hover {
|
||
background: #2eb8ab;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-outline-light {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 28px;
|
||
background: transparent;
|
||
color: var(--soft-ivory);
|
||
font-family: var(--font-primary);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border: 1.5px solid rgba(235, 235, 222, 0.25);
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
transition: all 0.25s;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-outline-light:hover {
|
||
border-color: rgba(235, 235, 222, 0.5);
|
||
background: rgba(235, 235, 222, 0.05);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
FOOTER
|
||
═══════════════════════════════════════ */
|
||
.site-footer {
|
||
background: var(--charcoal-brown);
|
||
color: var(--soft-ivory);
|
||
}
|
||
|
||
.footer-main {
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 48px 32px;
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
|
||
.footer-brand p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 13px;
|
||
color: rgba(235, 235, 222, 0.6);
|
||
line-height: 1.6;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.footer-col h4 {
|
||
font-family: var(--font-primary);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--soft-ivory);
|
||
margin-bottom: 16px;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.footer-col a {
|
||
display: block;
|
||
font-family: var(--font-secondary);
|
||
font-size: 13px;
|
||
color: rgba(235, 235, 222, 0.6);
|
||
padding: 4px 0;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.footer-col a:hover {
|
||
color: var(--soft-ivory);
|
||
}
|
||
|
||
.footer-contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 13px;
|
||
color: rgba(235, 235, 222, 0.6);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.footer-bottom {
|
||
border-top: 1px solid rgba(235, 235, 222, 0.1);
|
||
padding: 20px 32px;
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.footer-bottom p {
|
||
font-family: var(--font-secondary);
|
||
font-size: 12px;
|
||
color: rgba(235, 235, 222, 0.4);
|
||
}
|
||
|
||
.footer-bottom-links {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.footer-bottom-links a {
|
||
font-family: var(--font-secondary);
|
||
font-size: 12px;
|
||
color: rgba(235, 235, 222, 0.4);
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.footer-bottom-links a:hover {
|
||
color: var(--soft-ivory);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
RESPONSIVE
|
||
═══════════════════════════════════════ */
|
||
@media (max-width: 900px) {
|
||
:root {
|
||
--section-gap: 80px;
|
||
}
|
||
|
||
.hero-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
}
|
||
|
||
.hero {
|
||
padding-top: 90px;
|
||
min-height: auto;
|
||
}
|
||
|
||
.system-graphic {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.demo-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.system-card {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.card-problem {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border-card);
|
||
}
|
||
|
||
.qual-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.case-card {
|
||
grid-template-columns: 1fr;
|
||
gap: 32px;
|
||
padding: 32px;
|
||
}
|
||
|
||
.pricing-box {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.pricing-numbers {
|
||
gap: 32px;
|
||
}
|
||
|
||
.footer-main {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
|
||
.hero-buttons {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn-teal, .btn-outline {
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.final-cta-box {
|
||
padding: 48px 24px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.footer-main {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 20px;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
SCROLL REVEAL
|
||
═══════════════════════════════════════ */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.reveal.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Hexagonal Background -->
|
||
<canvas id="hexCanvas"></canvas>
|
||
|
||
<!-- ══════════ HEADER ══════════ -->
|
||
<header class="site-header">
|
||
<div class="header-inner">
|
||
<div class="header-left">
|
||
<button class="menu-toggle" id="menuToggle">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
<a href="index.html" class="logo-link">
|
||
<span class="logo-text"><span class="fp-mono">FP</span>PROFICE</span>
|
||
</a>
|
||
</div>
|
||
<a href="#demo" class="header-cta">Demo buchen →</a>
|
||
</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>
|
||
</nav>
|
||
<div class="overlay" id="overlay"></div>
|
||
|
||
<!-- ══════════ HERO ══════════ -->
|
||
<section class="hero" id="hero">
|
||
<div class="container">
|
||
<div class="hero-grid">
|
||
<div class="hero-content">
|
||
<h1>Ihr Telefon klingelt. Keiner geht ran. Das kostet Sie Aufträge.</h1>
|
||
<div class="hero-sub">
|
||
KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
|
||
</div>
|
||
<div class="hero-proof">
|
||
Für Unternehmen, die wachsen wollen – ohne mehr Personal einzustellen.
|
||
</div>
|
||
<div class="hero-buttons">
|
||
<a href="tel:+49123456789" class="btn-teal">📞 Mit KI sprechen</a>
|
||
<a href="#demo" class="btn-outline">💬 Im Chat starten</a>
|
||
</div>
|
||
<div class="hero-trust">
|
||
<span>Im Einsatz bei lkw-teile24.de</span>
|
||
<span class="sep"></span>
|
||
<span>EU-Server · DSGVO-konform</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-visual">
|
||
<div class="system-graphic" id="systemGraphic">
|
||
<svg class="connections" viewBox="0 0 500 450">
|
||
<!-- Connection lines from center to nodes -->
|
||
<line class="connection-line" x1="250" y1="225" x2="290" y2="45" />
|
||
<line class="connection-line" x1="250" y1="225" x2="440" y2="80" />
|
||
<line class="connection-line" x1="250" y1="225" x2="440" y2="240" />
|
||
<line class="connection-line" x1="250" y1="225" x2="230" y2="400" />
|
||
<line class="connection-line" x1="250" y1="225" x2="60" y2="220" />
|
||
</svg>
|
||
|
||
<div class="node central-node">
|
||
<div class="node-icon">🤖</div>
|
||
<div class="node-label">KI ASSISTENT</div>
|
||
</div>
|
||
|
||
<div class="node phone-node">
|
||
<div class="node-icon">📞</div>
|
||
<div class="node-label">Telefon</div>
|
||
</div>
|
||
|
||
<div class="node chat-node">
|
||
<div class="node-icon">💬</div>
|
||
<div class="node-label">Website Chat</div>
|
||
</div>
|
||
|
||
<div class="node crm-node">
|
||
<div class="node-icon">📊</div>
|
||
<div class="node-label">CRM</div>
|
||
</div>
|
||
|
||
<div class="node ticket-node">
|
||
<div class="node-icon">🎫</div>
|
||
<div class="node-label">Ticketsystem</div>
|
||
</div>
|
||
|
||
<div class="node team-node">
|
||
<div class="node-icon">👥</div>
|
||
<div class="node-label">Team</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ LIVE DEMO ══════════ -->
|
||
<section class="demo-section" id="demo">
|
||
<div class="container">
|
||
<div class="demo-header reveal">
|
||
<p class="section-label">Live Demo</p>
|
||
<h2 class="section-headline">Testen Sie es selbst. Jetzt.</h2>
|
||
<p class="section-sub">Kein Mockup. Das ist das System, das bei unseren Kunden läuft.</p>
|
||
</div>
|
||
|
||
<div class="demo-grid">
|
||
<div class="demo-card reveal">
|
||
<div class="demo-icon-wrap">📞</div>
|
||
<h3>KI-Telefonassistent</h3>
|
||
<p>Rufen Sie jetzt an und erleben Sie, wie unsere KI Ihr Anliegen aufnimmt und verarbeitet.</p>
|
||
<a href="tel:+49123456789" class="btn-teal">Jetzt anrufen</a>
|
||
<span class="demo-note">Kostenlos · Keine Wartezeit · 24/7</span>
|
||
</div>
|
||
|
||
<div class="demo-card reveal">
|
||
<div class="demo-icon-wrap">💬</div>
|
||
<h3>KI-Chat</h3>
|
||
<p>Stellen Sie eine Frage – die KI antwortet sofort und qualifiziert Ihr Anliegen.</p>
|
||
<div class="chat-widget">
|
||
<div class="chat-widget-header">
|
||
<span class="status-dot"></span>
|
||
Profice KI · Online
|
||
</div>
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="chat-msg bot">Hallo! Ich bin der Profice KI-Assistent. Stellen Sie mir eine Frage – ich zeige Ihnen, wie das System funktioniert.</div>
|
||
</div>
|
||
<div class="chat-input-row">
|
||
<input type="text" id="chatInput" placeholder="Ihre Nachricht..." maxlength="300">
|
||
<button class="chat-send-btn" id="chatSendBtn">Senden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ 3 PROBLEMS / SYSTEME ══════════ -->
|
||
<section class="systeme-section" id="systeme">
|
||
<div class="container">
|
||
<div class="systeme-header reveal">
|
||
<p class="section-label">Was wir lösen</p>
|
||
<h2 class="section-headline">Drei Probleme, die Unternehmen täglich Geld kosten.</h2>
|
||
</div>
|
||
|
||
<div class="system-cards">
|
||
<div class="system-card reveal">
|
||
<div class="card-problem">
|
||
<div class="card-number">01</div>
|
||
<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="card-solution">
|
||
<div class="solution-tag">→ KI Telefonassistent</div>
|
||
<h4>Jeder Anruf wird angenommen</h4>
|
||
<p>Versteht das Anliegen, erfasst Kontaktdaten, vereinbart Rückrufe und dokumentiert alles im CRM. Rund um die Uhr.</p>
|
||
<div class="solution-metric">24/7 erreichbar · 0 verpasste Anrufe</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-card reveal">
|
||
<div class="card-problem">
|
||
<div class="card-number">02</div>
|
||
<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="card-solution">
|
||
<div class="solution-tag">→ KI Chat + Automatisierung</div>
|
||
<h4>Sofortige Reaktion auf jede Anfrage</h4>
|
||
<p>Chatbot qualifiziert Besucher in Echtzeit. Automatische Follow-up-Mails innerhalb von 5 Minuten. Integration in Ihr CRM.</p>
|
||
<div class="solution-metric">5 Min. Reaktionszeit statt 48 Stunden</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-card reveal">
|
||
<div class="card-problem">
|
||
<div class="card-number">03</div>
|
||
<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="card-solution">
|
||
<div class="solution-tag">→ Interne Wissens-KI</div>
|
||
<h4>Firmenwissen auf Knopfdruck</h4>
|
||
<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-metric">Onboarding in Tagen statt Monaten</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ TIMELINE / PROCESS ══════════ -->
|
||
<section class="process-section" id="process">
|
||
<div class="container">
|
||
<div class="process-header reveal">
|
||
<p class="section-label">So läuft es ab</p>
|
||
<h2 class="section-headline">Von der Anfrage zum laufenden System.</h2>
|
||
</div>
|
||
|
||
<div class="timeline reveal">
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-time">Tag 1</div>
|
||
<div class="tl-title">30-Minuten-Gespräch</div>
|
||
<div class="tl-desc">Wir verstehen Ihre Prozesse und identifizieren, wo Automatisierung den größten Hebel hat.</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-time">Woche 1–2</div>
|
||
<div class="tl-title">System wird konfiguriert</div>
|
||
<div class="tl-desc">Wir bauen Ihr System, trainieren die KI auf Ihre Branche und verbinden es mit Ihren bestehenden Tools.</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-time">Tag 14</div>
|
||
<div class="tl-title">Go-Live</div>
|
||
<div class="tl-desc">Ab jetzt nimmt die KI Ihre Anrufe an und bearbeitet Anfragen. Sie sehen alles in einem Dashboard.</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-time">Monat 1</div>
|
||
<div class="tl-title">Erstes Review</div>
|
||
<div class="tl-desc">Gemeinsame Auswertung: Wie viele Leads gewonnen? Was wird optimiert?</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-time">Laufend</div>
|
||
<div class="tl-title">Optimierung & Betrieb</div>
|
||
<div class="tl-desc">Wir überwachen, optimieren und erweitern. Sie konzentrieren sich auf Ihr Geschäft.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ QUALIFICATION ══════════ -->
|
||
<section class="qual-section" id="qualification">
|
||
<div class="container">
|
||
<div class="qual-header reveal">
|
||
<p class="section-label">Passt das für Sie?</p>
|
||
<h2 class="section-headline">Ehrliche Einschätzung.</h2>
|
||
</div>
|
||
|
||
<div class="qual-grid">
|
||
<div class="qual-card negative reveal">
|
||
<h3>Wahrscheinlich nicht passend, wenn …</h3>
|
||
<ul class="qual-list">
|
||
<li><span class="q-icon">✕</span> Weniger als 20 Kundenanfragen pro Woche</li>
|
||
<li><span class="q-icon">✕</span> Einmaliges Projekt gesucht, kein laufender Service</li>
|
||
<li><span class="q-icon">✕</span> Team nutzt grundsätzlich keine digitalen Tools</li>
|
||
<li><span class="q-icon">✕</span> Nur eine neue Website benötigt</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="qual-card positive reveal">
|
||
<h3>Sehr gut passend, wenn …</h3>
|
||
<ul class="qual-list">
|
||
<li><span class="q-icon">✓</span> Regelmäßig Anrufe und Anfragen verpasst werden</li>
|
||
<li><span class="q-icon">✓</span> Support-Team an der Belastungsgrenze arbeitet</li>
|
||
<li><span class="q-icon">✓</span> Mindestens 5 Mitarbeiter und ein CRM vorhanden</li>
|
||
<li><span class="q-icon">✓</span> Wachstum gewünscht ohne proportional mehr Personal</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ PRICING ══════════ -->
|
||
<section class="pricing-section" id="pricing">
|
||
<div class="container">
|
||
<div class="pricing-header reveal">
|
||
<p class="section-label">Investition</p>
|
||
<h2 class="section-headline">Klare Preise. Keine Überraschungen.</h2>
|
||
</div>
|
||
|
||
<div class="pricing-box reveal">
|
||
<div class="pricing-numbers">
|
||
<div class="price-item">
|
||
<div class="price-amount"><span class="from">ab </span>3.000 €</div>
|
||
<div class="price-label">Einmalig Setup</div>
|
||
<div class="price-detail">je nach Umfang & Integrationen</div>
|
||
</div>
|
||
<div class="price-item">
|
||
<div class="price-amount"><span class="from">ab </span>990 €<span class="from">/Monat</span></div>
|
||
<div class="price-label">Laufender Betrieb</div>
|
||
<div class="price-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>
|
||
<a href="#contact" class="btn-teal">Unverbindlich anfragen</a>
|
||
<div class="pricing-extras">
|
||
<span class="pricing-extra"><span class="check">✓</span> Keine Mindestlaufzeit über 3 Monate</span>
|
||
<span class="pricing-extra"><span class="check">✓</span> Danach monatlich kündbar</span>
|
||
<span class="pricing-extra"><span class="check">✓</span> Keine versteckten Kosten</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ CASE STUDY ══════════ -->
|
||
<section class="case-section" id="referenz">
|
||
<div class="container">
|
||
<div class="case-header reveal">
|
||
<p class="section-label">Referenz</p>
|
||
<h2 class="section-headline">Im eigenen Einsatz getestet.</h2>
|
||
</div>
|
||
|
||
<div class="case-card reveal">
|
||
<div class="case-content">
|
||
<p class="section-label">Live seit 2025</p>
|
||
<h3>lkw-teile24.de</h3>
|
||
<p>Online-Shop für LKW-Ersatzteile mit über 15.000 Artikeln. Wir setzen unsere eigenen Systeme im Tagesgeschäft ein – bei echtem Kundenvolumen und echten Prozessen.</p>
|
||
<p>Der KI-Assistent beantwortet Produktfragen, qualifiziert Anfragen und leitet komplexe Fälle an das Team weiter.</p>
|
||
</div>
|
||
<div class="case-stats">
|
||
<div class="case-stat">
|
||
<div class="case-stat-value">15.000+</div>
|
||
<div class="case-stat-label">Artikel im System</div>
|
||
</div>
|
||
<div class="case-stat">
|
||
<div class="case-stat-value">24/7</div>
|
||
<div class="case-stat-label">Erreichbarkeit</div>
|
||
</div>
|
||
<div class="case-stat">
|
||
<div class="case-stat-value"><30s</div>
|
||
<div class="case-stat-label">Antwortzeit</div>
|
||
</div>
|
||
<div class="case-stat">
|
||
<div class="case-stat-value">EU</div>
|
||
<div class="case-stat-label">Server-Standort</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ FAQ ══════════ -->
|
||
<section class="faq-section" id="faq">
|
||
<div class="container">
|
||
<div class="faq-header reveal">
|
||
<p class="section-label">Häufige Fragen</p>
|
||
<h2 class="section-headline">Was Sie wissen müssen.</h2>
|
||
</div>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
Funktioniert das mit unserem bestehenden System?
|
||
<span class="faq-toggle">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Ja. Wir integrieren in alle gängigen CRMs, Shopsysteme und Telefonanlagen – darunter HubSpot, Pipedrive, JTL, Shopware, Sipgate und viele mehr. Im Erstgespräch klären wir die Kompatibilität.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
Wie lange dauert die Einrichtung?
|
||
<span class="faq-toggle">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>In der Regel 2 Wochen bis zum Go-Live. Das umfasst Analyse, Konfiguration, Integration und Test.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
Was passiert, wenn die KI etwas nicht beantworten kann?
|
||
<span class="faq-toggle">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Sie leitet an einen menschlichen Mitarbeiter weiter – mit allen bereits erfassten Informationen. Der Mitarbeiter sieht sofort, worum es geht.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
Sind meine Daten sicher?
|
||
<span class="faq-toggle">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Alle Systeme laufen auf EU-Servern. Vollständig DSGVO-konform. Wir arbeiten mit deutschen Hosting-Anbietern.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
Kann ich jederzeit kündigen?
|
||
<span class="faq-toggle">+</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Nach einer initialen Phase von 3 Monaten ist der Service monatlich kündbar. Keine langfristigen Verträge.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ FINAL CTA ══════════ -->
|
||
<section class="final-cta" id="contact">
|
||
<div class="container">
|
||
<div class="final-cta-box reveal">
|
||
<h2>Bereit, kein Geschäft mehr zu verpassen?</h2>
|
||
<p>Testen Sie unser System selbst oder sprechen Sie in 15 Minuten mit uns.</p>
|
||
<div class="final-buttons">
|
||
<a href="tel:+49123456789" class="btn-teal-light">📞 KI jetzt anrufen</a>
|
||
<a href="mailto:info@profice.de?subject=Demo-Anfrage" class="btn-outline-light">Demo buchen →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ FOOTER ══════════ -->
|
||
<footer class="site-footer">
|
||
<div class="footer-main">
|
||
<div class="footer-brand">
|
||
<span class="logo-text" style="font-size:16px;"><span class="fp-mono" style="width:24px;height:24px;font-size:11px;">FP</span>PROFICE</span>
|
||
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h4>Services</h4>
|
||
<a href="#systeme">KI Systeme</a>
|
||
<a href="#demo">Demo</a>
|
||
<a href="sites/offers.html">Kontakt</a>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h4>Rechtliches</h4>
|
||
<a href="/datenschutz">Datenschutz</a>
|
||
<a href="/impressum">Impressum</a>
|
||
<a href="/agb">AGB</a>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h4>Kontakt</h4>
|
||
<div class="footer-contact-item">📞 +49 123 456789</div>
|
||
<div class="footer-contact-item">✉️ info@profice.de</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© 2026 Profice GmbH. Alle Rechte vorbehalten.</p>
|
||
<div class="footer-bottom-links">
|
||
<a href="/datenschutz">Datenschutz</a>
|
||
<a href="/impressum">Impressum</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ══════════ JAVASCRIPT ══════════ -->
|
||
<script>
|
||
// ─── Hexagonal Background Canvas ───
|
||
(function() {
|
||
const canvas = document.getElementById('hexCanvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
function resize() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
draw();
|
||
}
|
||
|
||
function draw() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
const size = 40;
|
||
const h = size * Math.sqrt(3);
|
||
const cols = Math.ceil(canvas.width / (size * 1.5)) + 2;
|
||
const rows = Math.ceil(canvas.height / h) + 2;
|
||
|
||
ctx.strokeStyle = 'rgba(79, 71, 71, 0.07)';
|
||
ctx.lineWidth = 0.8;
|
||
|
||
for (let row = 0; row < rows; row++) {
|
||
for (let col = 0; col < cols; col++) {
|
||
const x = col * size * 1.5;
|
||
const y = row * h + (col % 2 === 1 ? h / 2 : 0);
|
||
drawHex(x, y, size);
|
||
}
|
||
}
|
||
|
||
// Decorative colored hexagons in top-left
|
||
const decorHexes = [
|
||
{ x: 60, y: 40, color: 'rgba(245, 124, 0, 0.12)' },
|
||
{ x: 20, y: 75, color: 'rgba(38, 166, 154, 0.1)' },
|
||
{ x: 100, y: 75, color: 'rgba(38, 166, 154, 0.08)' },
|
||
{ x: 60, y: 110, color: 'rgba(102, 187, 106, 0.1)' },
|
||
{ x: 140, y: 40, color: 'rgba(38, 166, 154, 0.06)' },
|
||
{ x: 140, y: 110, color: 'rgba(245, 124, 0, 0.06)' },
|
||
];
|
||
|
||
decorHexes.forEach(dh => {
|
||
ctx.fillStyle = dh.color;
|
||
ctx.beginPath();
|
||
for (let i = 0; i < 6; i++) {
|
||
const angle = (Math.PI / 3) * i - Math.PI / 6;
|
||
const hx = dh.x + (size - 2) * Math.cos(angle);
|
||
const hy = dh.y + (size - 2) * Math.sin(angle);
|
||
if (i === 0) ctx.moveTo(hx, hy);
|
||
else ctx.lineTo(hx, hy);
|
||
}
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
ctx.strokeStyle = 'rgba(79, 71, 71, 0.1)';
|
||
ctx.stroke();
|
||
});
|
||
}
|
||
|
||
function drawHex(x, y, size) {
|
||
ctx.beginPath();
|
||
for (let i = 0; i < 6; i++) {
|
||
const angle = (Math.PI / 3) * i - Math.PI / 6;
|
||
const hx = x + size * Math.cos(angle);
|
||
const hy = y + size * Math.sin(angle);
|
||
if (i === 0) ctx.moveTo(hx, hy);
|
||
else ctx.lineTo(hx, hy);
|
||
}
|
||
ctx.closePath();
|
||
ctx.stroke();
|
||
}
|
||
|
||
window.addEventListener('resize', resize);
|
||
resize();
|
||
})();
|
||
|
||
// ─── Scroll Reveal ───
|
||
const reveals = document.querySelectorAll('.reveal');
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) entry.target.classList.add('visible');
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||
reveals.forEach(el => observer.observe(el));
|
||
|
||
// ─── Menu Toggle ───
|
||
const menuToggle = document.getElementById('menuToggle');
|
||
const slideMenu = document.getElementById('slideMenu');
|
||
const overlay = document.getElementById('overlay');
|
||
|
||
menuToggle.addEventListener('click', () => {
|
||
slideMenu.classList.toggle('open');
|
||
overlay.classList.toggle('active');
|
||
});
|
||
|
||
overlay.addEventListener('click', () => {
|
||
slideMenu.classList.remove('open');
|
||
overlay.classList.remove('active');
|
||
});
|
||
|
||
// ─── FAQ ───
|
||
document.querySelectorAll('.faq-question').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const item = btn.parentElement;
|
||
const wasOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
|
||
if (!wasOpen) item.classList.add('open');
|
||
});
|
||
});
|
||
|
||
// ─── Chat Demo ───
|
||
const chatInput = document.getElementById('chatInput');
|
||
const chatSendBtn = document.getElementById('chatSendBtn');
|
||
const chatMessages = document.getElementById('chatMessages');
|
||
|
||
const responses = [
|
||
"Danke für Ihre Nachricht! In einem echten Setup würde ich jetzt Ihr Anliegen kategorisieren und an den richtigen Ansprechpartner weiterleiten.",
|
||
"Ich habe Ihre Anfrage erfasst. Normalerweise würde ich jetzt prüfen, ob ich direkt antworten kann oder einen Rückruf vereinbaren soll.",
|
||
"Verstanden. Im Echtbetrieb würde jetzt automatisch ein Eintrag in Ihrem CRM angelegt und das Team benachrichtigt.",
|
||
"Gute Frage! Bei unseren Kunden beantworte ich solche Anfragen direkt aus der Wissensdatenbank – in unter 30 Sekunden.",
|
||
"Ich leite das weiter. Im echten System würde jetzt ein Ticket erstellt und der passende Mitarbeiter benachrichtigt."
|
||
];
|
||
let rIdx = 0;
|
||
|
||
function sendMsg() {
|
||
const text = chatInput.value.trim();
|
||
if (!text) return;
|
||
const uMsg = document.createElement('div');
|
||
uMsg.className = 'chat-msg user';
|
||
uMsg.textContent = text;
|
||
chatMessages.appendChild(uMsg);
|
||
chatInput.value = '';
|
||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||
|
||
setTimeout(() => {
|
||
const bMsg = document.createElement('div');
|
||
bMsg.className = 'chat-msg bot';
|
||
bMsg.textContent = responses[rIdx % responses.length];
|
||
chatMessages.appendChild(bMsg);
|
||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||
rIdx++;
|
||
}, 700);
|
||
}
|
||
|
||
chatSendBtn.addEventListener('click', sendMsg);
|
||
chatInput.addEventListener('keydown', e => { if (e.key === 'Enter') sendMsg(); });
|
||
|
||
// ─── Smooth Scroll ───
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(a.getAttribute('href'));
|
||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |