1879 lines
68 KiB
HTML
1879 lines
68 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BreakPilot Comply — DSGVO-Compliance. KI-gestuetzt. Auf Ihrer Hardware.</title>
|
|
<meta name="description" content="Der selbst gehostete Compliance Hub fuer DSGVO, AI Act und NIS2. Automatisierte Dokumentation. Volle Datensouveraenitaet. Made in Germany.">
|
|
<style>
|
|
/* ══════════════════════════════════════════════
|
|
RESET & BASE
|
|
══════════════════════════════════════════════ */
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace;
|
|
--max-w: 1200px;
|
|
--nav-h: 72px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 14px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
}
|
|
|
|
/* ── Light Theme ── */
|
|
[data-theme="light"] {
|
|
--primary: #7c3aed;
|
|
--primary-light: #8b5cf6;
|
|
--primary-dark: #6d28d9;
|
|
--accent: #4f46e5;
|
|
--success: #059669;
|
|
--success-light: #d1fae5;
|
|
--warning: #f59e0b;
|
|
|
|
--bg: #faf9ff;
|
|
--bg-alt: #f3f0ff;
|
|
--bg-dark: #0c0a1d;
|
|
--surface: #ffffff;
|
|
--surface-hover: #f5f3ff;
|
|
--surface-glass: rgba(255, 255, 255, 0.7);
|
|
--border: #e5e1f5;
|
|
--border-subtle: #f0ecff;
|
|
|
|
--text: #1e1b4b;
|
|
--text-secondary: #4c4578;
|
|
--text-muted: #8b83b3;
|
|
--text-on-primary: #ffffff;
|
|
--text-on-dark: #e8e5ff;
|
|
|
|
--shadow-sm: 0 1px 3px rgba(124, 58, 237, 0.06);
|
|
--shadow-md: 0 4px 16px rgba(124, 58, 237, 0.08);
|
|
--shadow-lg: 0 12px 40px rgba(124, 58, 237, 0.12);
|
|
--shadow-xl: 0 20px 60px rgba(124, 58, 237, 0.16);
|
|
|
|
--gradient-hero: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
|
|
--gradient-cta: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
|
|
--gradient-card: linear-gradient(135deg, rgba(124, 58, 237, 0.03) 0%, rgba(79, 70, 229, 0.03) 100%);
|
|
}
|
|
|
|
/* ── Dark Theme ── */
|
|
[data-theme="dark"] {
|
|
--primary: #a78bfa;
|
|
--primary-light: #c4b5fd;
|
|
--primary-dark: #8b5cf6;
|
|
--accent: #818cf8;
|
|
--success: #34d399;
|
|
--success-light: rgba(52, 211, 153, 0.15);
|
|
--warning: #fbbf24;
|
|
|
|
--bg: #0c0a1d;
|
|
--bg-alt: #110e26;
|
|
--bg-dark: #0c0a1d;
|
|
--surface: rgba(255, 255, 255, 0.04);
|
|
--surface-hover: rgba(255, 255, 255, 0.08);
|
|
--surface-glass: rgba(17, 14, 38, 0.8);
|
|
--border: rgba(167, 139, 250, 0.12);
|
|
--border-subtle: rgba(167, 139, 250, 0.06);
|
|
|
|
--text: #e8e5ff;
|
|
--text-secondary: #b8b0d8;
|
|
--text-muted: #7a6fa8;
|
|
--text-on-primary: #ffffff;
|
|
--text-on-dark: #e8e5ff;
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
|
|
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
|
|
|
|
--gradient-hero: linear-gradient(135deg, #4c1d95 0%, #312e81 50%, #1e1b4b 100%);
|
|
--gradient-cta: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
|
|
--gradient-card: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(129, 140, 248, 0.06) 100%);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
TYPOGRAPHY
|
|
══════════════════════════════════════════════ */
|
|
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: background 0.4s, color 0.4s;
|
|
}
|
|
|
|
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
|
|
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; }
|
|
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
|
|
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
|
|
|
|
p { color: var(--text-secondary); }
|
|
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
|
|
a:hover { color: var(--primary-dark); }
|
|
|
|
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
|
|
|
|
/* ══════════════════════════════════════════════
|
|
NAVIGATION
|
|
══════════════════════════════════════════════ */
|
|
.nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--nav-h);
|
|
z-index: 1000;
|
|
background: var(--surface-glass);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background 0.4s, border-color 0.4s, box-shadow 0.3s;
|
|
}
|
|
|
|
.nav.scrolled { box-shadow: var(--shadow-md); }
|
|
|
|
.nav-inner {
|
|
max-width: var(--max-w);
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.nav-brand-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background: var(--gradient-cta);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-brand-icon svg { width: 20px; height: 20px; }
|
|
|
|
.nav-badge {
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
background: var(--gradient-cta);
|
|
color: white;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 99px;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
padding: 0.5rem 0.85rem;
|
|
font-size: 0.88rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
border-radius: var(--radius-sm);
|
|
transition: color 0.2s, background 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--text);
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.nav-cta {
|
|
background: var(--gradient-cta) !important;
|
|
color: white !important;
|
|
padding: 0.5rem 1.2rem !important;
|
|
border-radius: 99px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 0.85rem !important;
|
|
transition: opacity 0.2s, transform 0.2s !important;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
background: var(--gradient-cta) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
|
|
|
|
/* Theme toggle */
|
|
.theme-toggle {
|
|
background: var(--surface-hover);
|
|
border: 1px solid var(--border);
|
|
border-radius: 99px;
|
|
width: 44px;
|
|
height: 26px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 3px;
|
|
transition: background 0.3s;
|
|
position: relative;
|
|
}
|
|
|
|
.theme-toggle .knob {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
transition: transform 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-toggle .knob svg { width: 12px; height: 12px; fill: white; }
|
|
[data-theme="light"] .theme-toggle .knob { transform: translateX(0); }
|
|
[data-theme="dark"] .theme-toggle .knob { transform: translateX(18px); }
|
|
.theme-toggle .icon-moon,
|
|
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
|
|
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
|
|
|
|
/* Mobile menu */
|
|
.hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
}
|
|
|
|
.hamburger span {
|
|
width: 22px;
|
|
height: 2px;
|
|
background: var(--text);
|
|
border-radius: 2px;
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
}
|
|
|
|
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
|
|
.hamburger.active span:nth-child(2) { opacity: 0; }
|
|
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
|
|
|
|
@media (max-width: 768px) {
|
|
.hamburger { display: flex; }
|
|
|
|
.nav-links {
|
|
position: fixed;
|
|
top: var(--nav-h);
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--surface-glass);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
}
|
|
|
|
.nav-links.open {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.nav-links a {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
HERO
|
|
══════════════════════════════════════════════ */
|
|
.hero {
|
|
padding: calc(var(--nav-h) + 4rem) 1.5rem 4rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--gradient-hero);
|
|
opacity: 0.04;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-inner {
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 99px;
|
|
padding: 0.35rem 1rem 0.35rem 0.5rem;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hero-label-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.6; transform: scale(1.2); }
|
|
}
|
|
|
|
.hero h1 {
|
|
margin-bottom: 1.25rem;
|
|
background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
|
max-width: 640px;
|
|
margin: 0 auto 2rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 2rem;
|
|
border-radius: 99px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--gradient-cta);
|
|
color: white;
|
|
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 24px rgba(124, 58, 237, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--surface-hover);
|
|
transform: translateY(-2px);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn svg { width: 18px; height: 18px; }
|
|
|
|
/* Trust bar */
|
|
.trust-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
padding: 1.5rem 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.trust-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.trust-item .num {
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Hero SVG graphic */
|
|
.hero-visual {
|
|
margin: 2rem auto 0;
|
|
max-width: 480px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.hero-visual svg { width: 100%; height: auto; }
|
|
|
|
/* ══════════════════════════════════════════════
|
|
SECTIONS (common)
|
|
══════════════════════════════════════════════ */
|
|
section {
|
|
padding: 5rem 1.5rem;
|
|
}
|
|
|
|
.section-label {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--primary);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-desc {
|
|
max-width: 600px;
|
|
margin: 0 auto 3rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.text-center { text-align: center; }
|
|
|
|
/* Scroll animations */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
TRUST BADGES (Section 3)
|
|
══════════════════════════════════════════════ */
|
|
.badges {
|
|
background: var(--bg-alt);
|
|
padding: 3rem 1.5rem;
|
|
border-top: 1px solid var(--border-subtle);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.badges-inner {
|
|
max-width: var(--max-w);
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.badges-label {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badges-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.badge-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 99px;
|
|
padding: 0.5rem 1.25rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.badge-item svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }
|
|
|
|
/* ══════════════════════════════════════════════
|
|
PROBLEM → SOLUTION (Section 4)
|
|
══════════════════════════════════════════════ */
|
|
.problems-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto 3rem;
|
|
}
|
|
|
|
.problem-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 1.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.problem-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: var(--radius-md);
|
|
background: rgba(239, 68, 68, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
|
|
.problem-icon svg { width: 24px; height: 24px; color: #ef4444; }
|
|
|
|
.problem-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
|
|
.problem-card p { font-size: 0.9rem; }
|
|
|
|
.solution-arrow {
|
|
text-align: center;
|
|
margin: 2rem 0;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.solution-arrow svg { width: 40px; height: 40px; }
|
|
|
|
.solution-banner {
|
|
text-align: center;
|
|
background: var(--gradient-cta);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: var(--radius-lg);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
FEATURES (Section 5)
|
|
══════════════════════════════════════════════ */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
|
gap: 1.25rem;
|
|
max-width: var(--max-w);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--surface);
|
|
background-image: var(--gradient-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(79, 70, 229, 0.1));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
[data-theme="dark"] .feature-icon {
|
|
background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(129, 140, 248, 0.15));
|
|
}
|
|
|
|
.feature-icon svg { width: 24px; height: 24px; color: var(--primary); }
|
|
.feature-card h3 { margin-bottom: 0.5rem; }
|
|
.feature-card p { font-size: 0.92rem; line-height: 1.6; }
|
|
|
|
/* ══════════════════════════════════════════════
|
|
HOW IT WORKS (Section 6)
|
|
══════════════════════════════════════════════ */
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
max-width: 950px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.steps::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 36px;
|
|
left: calc(16.67% + 24px);
|
|
right: calc(16.67% + 24px);
|
|
height: 2px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.step {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.step-num {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--gradient-cta);
|
|
color: white;
|
|
font-weight: 800;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.25rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.step h3 { margin-bottom: 0.5rem; }
|
|
.step p { font-size: 0.9rem; }
|
|
|
|
@media (max-width: 768px) {
|
|
.steps { grid-template-columns: 1fr; gap: 2.5rem; }
|
|
.steps::before { display: none; }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
SCOPE ENGINE (Section 7)
|
|
══════════════════════════════════════════════ */
|
|
.levels-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.25rem;
|
|
max-width: var(--max-w);
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
.level-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 1.75rem;
|
|
text-align: center;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
}
|
|
|
|
.level-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.level-badge {
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 99px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.level-card:nth-child(1) .level-badge { background: #dbeafe; color: #1d4ed8; }
|
|
.level-card:nth-child(2) .level-badge { background: #d1fae5; color: #047857; }
|
|
.level-card:nth-child(3) .level-badge { background: #fef3c7; color: #b45309; }
|
|
.level-card:nth-child(4) .level-badge { background: #ede9fe; color: #6d28d9; }
|
|
|
|
[data-theme="dark"] .level-card:nth-child(1) .level-badge { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
|
|
[data-theme="dark"] .level-card:nth-child(2) .level-badge { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
|
|
[data-theme="dark"] .level-card:nth-child(3) .level-badge { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
|
|
[data-theme="dark"] .level-card:nth-child(4) .level-badge { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
|
|
|
|
.level-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
|
|
.level-card p { font-size: 0.85rem; margin-bottom: 1rem; }
|
|
|
|
.level-docs {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.level-docs-label { font-size: 0.8rem; color: var(--text-muted); }
|
|
|
|
.scope-note {
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.levels-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.levels-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
COMPARISON TABLE (Section 8)
|
|
══════════════════════════════════════════════ */
|
|
.comparison {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.comparison table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.comparison th, .comparison td {
|
|
padding: 1rem 1.25rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.comparison th {
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
background: var(--bg-alt);
|
|
}
|
|
|
|
.comparison th:nth-child(2) {
|
|
color: var(--primary);
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(79, 70, 229, 0.06));
|
|
}
|
|
|
|
.comparison td:nth-child(2) {
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.comparison td:nth-child(2) .check { color: var(--success); }
|
|
|
|
.comparison tr:last-child td { border-bottom: none; }
|
|
|
|
/* ══════════════════════════════════════════════
|
|
PRICING (Section 9)
|
|
══════════════════════════════════════════════ */
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
max-width: var(--max-w);
|
|
margin: 0 auto 2rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 2.5rem 2rem;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.pricing-card.popular {
|
|
border-color: var(--primary);
|
|
box-shadow: var(--shadow-lg);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.pricing-card.popular:hover { transform: scale(1.02) translateY(-4px); }
|
|
|
|
.popular-badge {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--gradient-cta);
|
|
color: white;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 0.3rem 1rem;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.pricing-name {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.pricing-price {
|
|
font-size: 2.8rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.pricing-price .currency { font-size: 1.4rem; vertical-align: super; }
|
|
.pricing-price .period { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
|
|
|
|
.pricing-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.pricing-features li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.6rem;
|
|
padding: 0.4rem 0;
|
|
font-size: 0.88rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.pricing-features li svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--success);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.pricing-card .btn { width: 100%; justify-content: center; }
|
|
|
|
.pricing-note {
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
|
|
.pricing-card.popular { transform: none; }
|
|
.pricing-card.popular:hover { transform: translateY(-4px); }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
FAQ (Section 10)
|
|
══════════════════════════════════════════════ */
|
|
.faq-list {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.faq-item {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 0.75rem;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.faq-item summary {
|
|
padding: 1.25rem 1.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
list-style: none;
|
|
color: var(--text);
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.faq-item summary:hover { background: var(--surface-hover); }
|
|
.faq-item summary::-webkit-details-marker { display: none; }
|
|
|
|
.faq-item summary::after {
|
|
content: '';
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b83b3' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
flex-shrink: 0;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.faq-item[open] summary::after { transform: rotate(180deg); }
|
|
|
|
.faq-answer {
|
|
padding: 0 1.5rem 1.25rem;
|
|
font-size: 0.92rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
CTA BANNER (Section 11)
|
|
══════════════════════════════════════════════ */
|
|
.cta-banner {
|
|
background: var(--gradient-hero);
|
|
padding: 5rem 1.5rem;
|
|
text-align: center;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-banner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
|
|
}
|
|
|
|
.cta-banner h2 {
|
|
position: relative;
|
|
color: white;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cta-banner p {
|
|
position: relative;
|
|
color: rgba(255,255,255,0.85);
|
|
font-size: 1.1rem;
|
|
margin-bottom: 2rem;
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.cta-banner .btn-primary {
|
|
background: white;
|
|
color: var(--primary-dark);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.cta-banner .btn-primary:hover {
|
|
background: #f5f3ff;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.cta-contact {
|
|
position: relative;
|
|
margin-top: 1.5rem;
|
|
font-size: 0.9rem;
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.cta-contact a { color: rgba(255,255,255,0.9); text-decoration: underline; }
|
|
|
|
/* ══════════════════════════════════════════════
|
|
FOOTER (Section 12)
|
|
══════════════════════════════════════════════ */
|
|
.footer {
|
|
background: var(--bg-alt);
|
|
border-top: 1px solid var(--border);
|
|
padding: 4rem 1.5rem 2rem;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 3rem;
|
|
max-width: var(--max-w);
|
|
margin: 0 auto 3rem;
|
|
}
|
|
|
|
.footer-brand p {
|
|
font-size: 0.88rem;
|
|
margin-top: 0.75rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.footer-col h4 {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.footer-col ul { list-style: none; }
|
|
|
|
.footer-col li { margin-bottom: 0.5rem; }
|
|
|
|
.footer-col a {
|
|
font-size: 0.88rem;
|
|
color: var(--text-secondary);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer-col a:hover { color: var(--primary); }
|
|
|
|
.footer-bottom {
|
|
max-width: var(--max-w);
|
|
margin: 0 auto;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.footer-germany {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.footer-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════
|
|
RESPONSIVE
|
|
══════════════════════════════════════════════ */
|
|
@media (max-width: 768px) {
|
|
section { padding: 3.5rem 1rem; }
|
|
.hero { padding: calc(var(--nav-h) + 2.5rem) 1rem 3rem; }
|
|
.trust-bar { gap: 1.25rem; }
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-actions { flex-direction: column; align-items: center; }
|
|
.btn { width: 100%; justify-content: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
NAVIGATION
|
|
════════════════════════════════════════════ -->
|
|
<nav class="nav" id="nav">
|
|
<div class="nav-inner">
|
|
<a href="#" class="nav-brand">
|
|
<span class="nav-brand-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
|
</svg>
|
|
</span>
|
|
BreakPilot
|
|
<span class="nav-badge">Comply</span>
|
|
</a>
|
|
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#how-it-works">So funktioniert's</a></li>
|
|
<li><a href="#pricing">Preise</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href="#contact" class="nav-cta">Demo buchen</a></li>
|
|
</ul>
|
|
|
|
<div class="nav-right">
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Theme umschalten">
|
|
<span class="knob">
|
|
<svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
<svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</span>
|
|
</button>
|
|
<button class="hamburger" id="hamburger" aria-label="Menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
HERO
|
|
════════════════════════════════════════════ -->
|
|
<section class="hero" id="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-label">
|
|
<span class="hero-label-dot"></span>
|
|
Jetzt auch als EU-Cloud-Loesung verfuegbar
|
|
</div>
|
|
|
|
<h1>DSGVO-Compliance.<br>KI-gestuetzt.<br>Auf Ihrer Hardware.</h1>
|
|
|
|
<p class="hero-sub">
|
|
Der selbst gehostete Compliance Hub fuer DSGVO, AI Act und NIS2.
|
|
Automatisierte Dokumentation. Volle Datensouveraenitaet. Made in Germany.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a href="#contact" class="btn btn-primary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
Kostenlose Demo buchen
|
|
</a>
|
|
<a href="#features" class="btn btn-secondary">
|
|
Plattform entdecken
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hero visual: Shield + network nodes -->
|
|
<div class="hero-visual">
|
|
<svg viewBox="0 0 480 280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background circles -->
|
|
<circle cx="240" cy="140" r="120" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 4" opacity="0.5"/>
|
|
<circle cx="240" cy="140" r="80" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 4" opacity="0.3"/>
|
|
|
|
<!-- Network lines -->
|
|
<line x1="240" y1="140" x2="120" y2="80" stroke="var(--primary)" stroke-width="1" opacity="0.3"/>
|
|
<line x1="240" y1="140" x2="360" y2="80" stroke="var(--primary)" stroke-width="1" opacity="0.3"/>
|
|
<line x1="240" y1="140" x2="120" y2="200" stroke="var(--primary)" stroke-width="1" opacity="0.3"/>
|
|
<line x1="240" y1="140" x2="360" y2="200" stroke="var(--primary)" stroke-width="1" opacity="0.3"/>
|
|
<line x1="240" y1="140" x2="80" y2="140" stroke="var(--primary)" stroke-width="1" opacity="0.3"/>
|
|
<line x1="240" y1="140" x2="400" y2="140" stroke="var(--primary)" stroke-width="1" opacity="0.3"/>
|
|
|
|
<!-- Nodes -->
|
|
<circle cx="120" cy="80" r="8" fill="var(--primary)" opacity="0.6"/>
|
|
<circle cx="360" cy="80" r="8" fill="var(--accent)" opacity="0.6"/>
|
|
<circle cx="120" cy="200" r="8" fill="var(--accent)" opacity="0.6"/>
|
|
<circle cx="360" cy="200" r="8" fill="var(--primary)" opacity="0.6"/>
|
|
<circle cx="80" cy="140" r="6" fill="var(--primary)" opacity="0.4"/>
|
|
<circle cx="400" cy="140" r="6" fill="var(--accent)" opacity="0.4"/>
|
|
|
|
<!-- Shield (center) -->
|
|
<path d="M240 90 L280 108 L280 150 C280 178 240 198 240 198 C240 198 200 178 200 150 L200 108 Z"
|
|
fill="url(#shieldGrad)" stroke="var(--primary)" stroke-width="2"/>
|
|
<!-- Checkmark in shield -->
|
|
<path d="M222 142 L234 154 L258 130" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<!-- Small floating dots -->
|
|
<circle cx="160" cy="60" r="3" fill="var(--primary)" opacity="0.3">
|
|
<animate attributeName="cy" values="60;55;60" dur="3s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="320" cy="220" r="3" fill="var(--accent)" opacity="0.3">
|
|
<animate attributeName="cy" values="220;215;220" dur="4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="380" cy="120" r="3" fill="var(--primary)" opacity="0.25">
|
|
<animate attributeName="cy" values="120;115;120" dur="3.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<defs>
|
|
<linearGradient id="shieldGrad" x1="200" y1="90" x2="280" y2="198" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#7c3aed"/>
|
|
<stop offset="1" stop-color="#4f46e5"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="trust-bar">
|
|
<div class="trust-item"><span class="num">19</span> EU-Verordnungen</div>
|
|
<div class="trust-item"><span class="num">558</span> Anforderungen</div>
|
|
<div class="trust-item"><span class="num">100%</span> Self-Hosted</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
TRUST BADGES
|
|
════════════════════════════════════════════ -->
|
|
<div class="badges reveal">
|
|
<div class="badges-inner">
|
|
<p class="badges-label">Entwickelt fuer den deutschen Mittelstand</p>
|
|
<div class="badges-row">
|
|
<div class="badge-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
DSGVO-konform
|
|
</div>
|
|
<div class="badge-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
AI Act Ready
|
|
</div>
|
|
<div class="badge-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
NIS2 Compliant
|
|
</div>
|
|
<div class="badge-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
ISO 27001 vorbereitet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
PROBLEM → SOLUTION
|
|
════════════════════════════════════════════ -->
|
|
<section id="problem" class="reveal">
|
|
<div class="container text-center">
|
|
<span class="section-label">Das Problem</span>
|
|
<h2 class="section-title">Compliance ist teuer, komplex und unsicher</h2>
|
|
<p class="section-desc">Drei Herausforderungen, mit denen jedes Unternehmen kaempft.</p>
|
|
</div>
|
|
|
|
<div class="problems-grid container">
|
|
<div class="problem-card reveal">
|
|
<div class="problem-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
<h3>Compliance-Berater kosten 200-500 EUR/h</h3>
|
|
<p>Externe Beratung frisst Budgets — besonders fuer den Mittelstand kaum tragbar.</p>
|
|
</div>
|
|
<div class="problem-card reveal">
|
|
<div class="problem-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
|
|
</div>
|
|
<h3>Cloud-Loesungen senden Ihre Daten an Dritte</h3>
|
|
<p>SaaS-Anbieter verarbeiten sensible Compliance-Daten auf fremden Servern — ein Widerspruch.</p>
|
|
</div>
|
|
<div class="problem-card reveal">
|
|
<div class="problem-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
</div>
|
|
<h3>Manuelle Dokumentation dauert Monate</h3>
|
|
<p>VVT, TOM, DSFA — jedes Dokument einzeln erstellen kostet hunderte Arbeitsstunden.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solution-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
|
|
</div>
|
|
|
|
<div class="solution-banner">
|
|
BreakPilot Comply loest alle drei Probleme — automatisiert, selbst gehostet, bezahlbar.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
FEATURES
|
|
════════════════════════════════════════════ -->
|
|
<section id="features" class="reveal">
|
|
<div class="container text-center">
|
|
<span class="section-label">Features</span>
|
|
<h2 class="section-title">Alles, was Sie fuer Compliance brauchen</h2>
|
|
<p class="section-desc">Sechs leistungsstarke Module in einer Plattform — vollstaendig automatisiert.</p>
|
|
</div>
|
|
|
|
<div class="features-grid container">
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
|
</div>
|
|
<h3>Automatische Scope-Analyse</h3>
|
|
<p>In 10 Minuten wissen Sie, welche Compliance-Tiefe Sie brauchen (L1-L4). 40+ Fragen, algorithmisch ausgewertet.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
|
</div>
|
|
<h3>KI-Dokumentengenerator</h3>
|
|
<p>VVT, TOM, DSFA, Loeschkonzept — strukturiert und rechtskonform generiert. Auf Knopfdruck, nicht in Monaten.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 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>
|
|
<h3>19 EU-Verordnungen</h3>
|
|
<p>DSGVO, AI Act, NIS2, CRA, TTDSG und 14 weitere — alles in einer Plattform abgedeckt und vernetzt.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
|
|
</div>
|
|
<h3>100% Self-Hosted</h3>
|
|
<p>Laeuft auf Ihrer Hardware. Keine Cloud, keine Daten-Transfers, volle Kontrolle. Oder waehlen Sie unsere EU-Cloud.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
|
<h3>Compliance Advisor (RAG)</h3>
|
|
<p>KI-Assistent mit 2.274 Rechtstexten aus EUR-Lex und BSI. Stellen Sie Fragen — erhalten Sie fundierte Antworten.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
|
</div>
|
|
<h3>Audit-Ready</h3>
|
|
<p>Von ISO 27001 bis TISAX — fertige Pruefungs-Checklisten und Nachweisdokumentation fuer jeden Auditor.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
HOW IT WORKS
|
|
════════════════════════════════════════════ -->
|
|
<section id="how-it-works" class="reveal" style="background: var(--bg-alt);">
|
|
<div class="container text-center">
|
|
<span class="section-label">So funktioniert's</span>
|
|
<h2 class="section-title">In drei Schritten zur Compliance</h2>
|
|
<p class="section-desc">Keine monatelangen Beratungsprojekte. Kein IT-Studium noetig.</p>
|
|
</div>
|
|
|
|
<div class="steps container">
|
|
<div class="step reveal">
|
|
<div class="step-num">1</div>
|
|
<h3>Hardware aufstellen</h3>
|
|
<p>Mac Mini oder Mac Studio. Strom, Netzwerk, fertig. Alternativ: Unsere EU-Cloud nutzen.</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="step-num">2</div>
|
|
<h3>Scope-Analyse durchfuehren</h3>
|
|
<p>40+ Fragen beantworten. Die Engine bestimmt automatisch Ihre Compliance-Tiefe (L1-L4).</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="step-num">3</div>
|
|
<h3>Dokumente generieren</h3>
|
|
<p>Die KI erstellt VVT, TOM, DSFA und alle weiteren Pflichtdokumente — rechtskonform und strukturiert.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
SCOPE ENGINE
|
|
════════════════════════════════════════════ -->
|
|
<section id="scope" class="reveal">
|
|
<div class="container text-center">
|
|
<span class="section-label">Scope Engine</span>
|
|
<h2 class="section-title">Die richtige Compliance-Tiefe fuer Ihr Unternehmen</h2>
|
|
<p class="section-desc">Vier Level — automatisch bestimmt. Kein Overkill, keine Luecken.</p>
|
|
</div>
|
|
|
|
<div class="levels-grid container">
|
|
<div class="level-card reveal">
|
|
<span class="level-badge">L1</span>
|
|
<h3>Lean Startup</h3>
|
|
<p>Basisschutz fuer Einzelunternehmer und Freiberufler</p>
|
|
<div class="level-docs">3</div>
|
|
<div class="level-docs-label">Dokumente</div>
|
|
</div>
|
|
<div class="level-card reveal">
|
|
<span class="level-badge">L2</span>
|
|
<h3>KMU Standard</h3>
|
|
<p>Standard-Compliance fuer kleine und mittlere Unternehmen</p>
|
|
<div class="level-docs">7</div>
|
|
<div class="level-docs-label">Dokumente</div>
|
|
</div>
|
|
<div class="level-card reveal">
|
|
<span class="level-badge">L3</span>
|
|
<h3>Erweitert</h3>
|
|
<p>Fuer Unternehmen mit sensiblen Daten oder regulierten Branchen</p>
|
|
<div class="level-docs">10</div>
|
|
<div class="level-docs-label">Dokumente</div>
|
|
</div>
|
|
<div class="level-card reveal">
|
|
<span class="level-badge">L4</span>
|
|
<h3>Zertifizierungsbereit</h3>
|
|
<p>ISO 27001, TISAX, SOC 2 — volle Zertifizierungsvorbereitung</p>
|
|
<div class="level-docs">14</div>
|
|
<div class="level-docs-label">Dokumente</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="scope-note container">Unsere Scope-Engine bestimmt automatisch die richtige Tiefe fuer Ihr Unternehmen.</p>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
COMPARISON
|
|
════════════════════════════════════════════ -->
|
|
<section id="comparison" class="reveal" style="background: var(--bg-alt);">
|
|
<div class="container text-center">
|
|
<span class="section-label">Vergleich</span>
|
|
<h2 class="section-title">Self-Hosted vs. Cloud-Anbieter</h2>
|
|
<p class="section-desc">Warum BreakPilot Comply die bessere Wahl ist.</p>
|
|
</div>
|
|
|
|
<div class="comparison container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>BreakPilot Comply</th>
|
|
<th>Cloud-Anbieter</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Datenspeicherort</td>
|
|
<td><span class="check">✓</span> Ihre Hardware / EU-Cloud</td>
|
|
<td>Rechenzentrum des Anbieters</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Datensouveraenitaet</td>
|
|
<td><span class="check">✓</span> 100%</td>
|
|
<td>Abhaengig vom Anbieter</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Vendor Lock-in</td>
|
|
<td><span class="check">✓</span> Keines</td>
|
|
<td>Hoch</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Offline-Faehigkeit</td>
|
|
<td><span class="check">✓</span> Ja (Self-Hosted)</td>
|
|
<td>Nein</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Monatliche Kosten</td>
|
|
<td><span class="check">✓</span> Festpreis</td>
|
|
<td>Skaliert mit Nutzung</td>
|
|
</tr>
|
|
<tr>
|
|
<td>KI-Verarbeitung</td>
|
|
<td><span class="check">✓</span> Lokal auf Ihrer Hardware</td>
|
|
<td>Drittanbieter-Server</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
PRICING
|
|
════════════════════════════════════════════ -->
|
|
<section id="pricing" class="reveal">
|
|
<div class="container text-center">
|
|
<span class="section-label">Preise</span>
|
|
<h2 class="section-title">Transparente Preise. Keine Ueberraschungen.</h2>
|
|
<p class="section-desc">Waehlen Sie den Plan, der zu Ihrem Unternehmen passt.</p>
|
|
</div>
|
|
|
|
<div class="pricing-grid container">
|
|
<!-- Starter -->
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-name">Starter</div>
|
|
<div class="pricing-price">
|
|
<span class="currency">EUR </span>149<span class="period">/Monat</span>
|
|
</div>
|
|
<div class="pricing-desc">Bis 25 Mitarbeiter</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Kern-DSGVO (VVT, TOM, DSE)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
KI-Dokumentengenerator
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Scope-Analyse (L1-L2)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
E-Mail-Support
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Quartals-Updates
|
|
</li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-secondary">Plan waehlen</a>
|
|
</div>
|
|
|
|
<!-- Professional -->
|
|
<div class="pricing-card popular reveal">
|
|
<div class="popular-badge">Beliebteste Wahl</div>
|
|
<div class="pricing-name">Professional</div>
|
|
<div class="pricing-price">
|
|
<span class="currency">EUR </span>399<span class="period">/Monat</span>
|
|
</div>
|
|
<div class="pricing-desc">Bis 100 Mitarbeiter</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Alles aus Starter
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
ISO 27001 + NIS2 Module
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Compliance Advisor (RAG)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Vendor-Compliance
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Priority-Support (24h)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Monatliche Updates
|
|
</li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-primary">Plan waehlen</a>
|
|
</div>
|
|
|
|
<!-- Enterprise -->
|
|
<div class="pricing-card reveal">
|
|
<div class="pricing-name">Enterprise</div>
|
|
<div class="pricing-price" style="font-size: 1.8rem;">Individuell</div>
|
|
<div class="pricing-desc">Ab 100 Mitarbeiter</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Alles aus Professional
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Externer DSB (8h/Monat)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Multi-Standort
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Custom AI-Training
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Persoenlicher Ansprechpartner
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
SLA-Garantie
|
|
</li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-secondary">Kontakt aufnehmen</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="pricing-note container">Alle Preise zzgl. MwSt. | Jahreszahlung | Hardware nicht enthalten | EU-Cloud-Hosting optional</p>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
FAQ
|
|
════════════════════════════════════════════ -->
|
|
<section id="faq" class="reveal" style="background: var(--bg-alt);">
|
|
<div class="container text-center">
|
|
<span class="section-label">FAQ</span>
|
|
<h2 class="section-title">Haeufig gestellte Fragen</h2>
|
|
<p class="section-desc">Antworten auf die wichtigsten Fragen rund um BreakPilot Comply.</p>
|
|
</div>
|
|
|
|
<div class="faq-list container">
|
|
<details class="faq-item">
|
|
<summary>Brauchen wir einen externen Datenschutzbeauftragten?</summary>
|
|
<div class="faq-answer">
|
|
Ab 20 Mitarbeitern, die regelmaessig personenbezogene Daten verarbeiten, ist ein DSB Pflicht (§38 BDSG). BreakPilot Comply ersetzt keinen DSB, unterstuetzt ihn aber massiv bei der Dokumentation. Im Enterprise-Tarif bieten wir einen externen DSB als Service an.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Welche Hardware wird benoetigt?</summary>
|
|
<div class="faq-answer">
|
|
Fuer Self-Hosting empfehlen wir einen Mac Mini M4 Pro (ab 24 GB RAM) oder Mac Studio. Die Software laeuft vollstaendig lokal in Docker-Containern. Alternativ koennen Sie unsere EU-Cloud-Loesung nutzen — gehostet in deutschen Rechenzentren.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Wie lange dauert die Einrichtung?</summary>
|
|
<div class="faq-answer">
|
|
Self-Hosted: Etwa 2-3 Stunden fuer Installation und Erstkonfiguration. Die Scope-Analyse dauert ca. 10 Minuten, die erste Dokumenten-Generation wenige Minuten. EU-Cloud: Sofort einsatzbereit nach Registrierung.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Wo werden unsere Daten gespeichert?</summary>
|
|
<div class="faq-answer">
|
|
Bei Self-Hosting: Ausschliesslich auf Ihrer eigenen Hardware. Kein Byte verlaesst Ihr Netzwerk. Bei EU-Cloud: In zertifizierten deutschen Rechenzentren (ISO 27001), betrieben von einem deutschen Hosting-Partner.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Welche EU-Verordnungen werden abgedeckt?</summary>
|
|
<div class="faq-answer">
|
|
Aktuell 19 Verordnungen mit insgesamt 558 Anforderungen: DSGVO, BDSG, AI Act, NIS2, CRA (Cyber Resilience Act), TTDSG, ePrivacy, Digital Services Act, Digital Markets Act, Data Act, Data Governance Act und weitere branchenspezifische Regelwerke.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Kann die Software getestet werden?</summary>
|
|
<div class="faq-answer">
|
|
Ja. Wir bieten eine kostenlose Demo an, in der Sie alle Features live erleben koennen. Buchen Sie einfach einen Termin ueber den Button oben. Fuer Self-Hosting bieten wir zusaetzlich eine 14-taegige Testphase.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Was kostet Non-Compliance?</summary>
|
|
<div class="faq-answer">
|
|
DSGVO-Verstoesse koennen bis zu 20 Mio. EUR oder 4% des weltweiten Jahresumsatzes kosten (Art. 83 DSGVO). NIS2 sieht Bussgelder bis 10 Mio. EUR vor. Der AI Act droht mit bis zu 35 Mio. EUR. Compliance ist keine Option — sie ist Pflicht.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Wie unterscheidet sich Self-Hosting von der EU-Cloud?</summary>
|
|
<div class="faq-answer">
|
|
Self-Hosting: Maximale Kontrolle, Daten bleiben auf Ihrer Hardware, offline-faehig. EU-Cloud: Kein Hardware-Aufwand, automatische Updates, gehostet in Deutschland. Beide Varianten sind DSGVO-konform — waehlen Sie was zu Ihrem Unternehmen passt.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Gibt es Schulungen fuer unser Team?</summary>
|
|
<div class="faq-answer">
|
|
Im Professional-Tarif ist ein Onboarding-Workshop enthalten. Im Enterprise-Tarif bieten wir individuelle Schulungen, Train-the-Trainer-Programme und regelmaessige Compliance-Briefings. Die Software ist intuitiv — die meisten Teams arbeiten nach 30 Minuten produktiv.
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary>Wie werden Updates eingespielt?</summary>
|
|
<div class="faq-answer">
|
|
Self-Hosted: Updates werden als Docker-Images bereitgestellt — ein Befehl genuegt. Je nach Tarif quartalsweise oder monatlich. EU-Cloud: Updates werden automatisch eingespielt, ohne Ausfallzeit. Sie werden vorab informiert.
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
CTA BANNER
|
|
════════════════════════════════════════════ -->
|
|
<section class="cta-banner" id="contact">
|
|
<h2>Bereit fuer DSGVO-Compliance<br>ohne Kompromisse?</h2>
|
|
<p>Starten Sie jetzt mit BreakPilot Comply — selbst gehostet oder in unserer EU-Cloud.</p>
|
|
<a href="mailto:info@breakpilot.de?subject=Demo-Anfrage%20BreakPilot%20Comply" class="btn btn-primary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
Kostenlose Demo buchen
|
|
</a>
|
|
<div class="cta-contact">
|
|
Oder rufen Sie uns an: <a href="tel:+4900000000">+49 (0) 000 000 000</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
FOOTER
|
|
════════════════════════════════════════════ -->
|
|
<footer class="footer">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="#" class="nav-brand" style="margin-bottom: 0.5rem; display: inline-flex;">
|
|
<span class="nav-brand-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</span>
|
|
BreakPilot <span class="nav-badge">Comply</span>
|
|
</a>
|
|
<p>KI-gestuetzte Compliance-Automatisierung fuer den deutschen Mittelstand. Self-Hosted oder EU-Cloud. Made in Germany.</p>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h4>Produkt</h4>
|
|
<ul>
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#scope">Scope Engine</a></li>
|
|
<li><a href="#pricing">Preise</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h4>Unternehmen</h4>
|
|
<ul>
|
|
<li><a href="mailto:info@breakpilot.de">Kontakt</a></li>
|
|
<li><a href="#contact">Demo buchen</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h4>Rechtliches</h4>
|
|
<ul>
|
|
<li><a href="impressum.html">Impressum</a></li>
|
|
<li><a href="datenschutz.html">Datenschutz</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<span>© 2025 BreakPilot. Alle Rechte vorbehalten.</span>
|
|
<div class="footer-germany">
|
|
<svg width="18" height="12" viewBox="0 0 18 12" style="border-radius: 2px; overflow: hidden;">
|
|
<rect width="18" height="4" fill="#000"/>
|
|
<rect y="4" width="18" height="4" fill="#DD0000"/>
|
|
<rect y="8" width="18" height="4" fill="#FFCC00"/>
|
|
</svg>
|
|
Made in Germany
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ════════════════════════════════════════════
|
|
JAVASCRIPT
|
|
════════════════════════════════════════════ -->
|
|
<script>
|
|
// Theme toggle
|
|
(function() {
|
|
var toggle = document.getElementById('themeToggle');
|
|
var html = document.documentElement;
|
|
var stored = localStorage.getItem('bp-comply-theme');
|
|
|
|
if (stored) {
|
|
html.setAttribute('data-theme', stored);
|
|
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
html.setAttribute('data-theme', 'dark');
|
|
}
|
|
|
|
toggle.addEventListener('click', function() {
|
|
var current = html.getAttribute('data-theme');
|
|
var next = current === 'dark' ? 'light' : 'dark';
|
|
html.setAttribute('data-theme', next);
|
|
localStorage.setItem('bp-comply-theme', next);
|
|
});
|
|
})();
|
|
|
|
// Nav scroll effect
|
|
(function() {
|
|
var nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 20) {
|
|
nav.classList.add('scrolled');
|
|
} else {
|
|
nav.classList.remove('scrolled');
|
|
}
|
|
});
|
|
})();
|
|
|
|
// Mobile hamburger
|
|
(function() {
|
|
var hamburger = document.getElementById('hamburger');
|
|
var navLinks = document.getElementById('navLinks');
|
|
|
|
hamburger.addEventListener('click', function() {
|
|
hamburger.classList.toggle('active');
|
|
navLinks.classList.toggle('open');
|
|
});
|
|
|
|
// Close menu on link click
|
|
navLinks.querySelectorAll('a').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
hamburger.classList.remove('active');
|
|
navLinks.classList.remove('open');
|
|
});
|
|
});
|
|
})();
|
|
|
|
// Scroll reveal animations
|
|
(function() {
|
|
var reveals = document.querySelectorAll('.reveal');
|
|
var observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -40px 0px'
|
|
});
|
|
|
|
reveals.forEach(function(el) { observer.observe(el); });
|
|
})();
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
var target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
e.preventDefault();
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|