securedataroom-pro / security.html
playa555x's picture
Was ist mit den ganzen nebenseiten ?
23c9760 verified
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sicherheit - SecureDataroom Pro</title>
<meta name="description" content="Erfahren Sie mehr über die Sicherheitsmaßnahmen und Zertifizierungen von SecureDataroom Pro.">
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
secondary: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
}
}
}
}
}
</script>
</head>
<body class="bg-white text-primary-900 antialiased">
<dataroom-navbar></dataroom-navbar>
<!-- Hero Section -->
<section class="relative overflow-hidden bg-gradient-to-br from-primary-50 to-secondary-50 py-20 lg:py-32">
<div class="absolute inset-0 bg-grid-primary-100/50" aria-hidden="true"></div>
<div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-primary-900 mb-6">
<span class="bg-gradient-to-r from-secondary-500 to-secondary-700 bg-clip-text text-transparent">Sicherheit</span> hat Priorität
</h1>
<p class="text-lg md:text-xl text-primary-600 mb-8 max-w-3xl mx-auto">
Bank-Level Sicherheit nach deutschen und europäischen Standards – Ihre Daten sind bei uns in sicheren Händen.
</p>
</div>
</div>
</section>
<!-- Security Features -->
<section class="py-20 bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary-900 mb-6">
Sicherheitsmaßnahmen
</h2>
<p class="text-lg text-primary-600 max-w-3xl mx-auto">
Vom physischen Zugang bis zur Datenverschlüsselung – mehrere Sicherheitsebenen schützen Ihre vertraulichen Informationen.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<dataroom-feature-card
icon="shield"
title="ISO 27001 Zertifizierung"
description="Unser Information Security Management System (ISMS) ist nach ISO 27001:2013 zertifiziert und wird jährlich auditiert."
badge="ZERTIFIZIERT"
></dataroom-feature-card>
<dataroom-feature-card
icon="flag"
title="DSGVO Konformität"
description="100% konform mit der EU-Datenschutzgrundverordnung (GDPR). Alle Daten verbleiben in der EU."
badge="EU-COMPLIANT"
></dataroom-feature-card>
<dataroom-feature-card
icon="award"
title="C5 Zertifizierung"
description="Erfüllt die Cloud Computing Compliance Controls Catalog (C5)-Anforderungen des BSI."
badge="BSI"
></dataroom-feature-card>
<dataroom-feature-card
icon="lock"
title="256-Bit AES Verschlüsselung"
description="Militärische Verschlüsselung für Daten im Ruhezustand und TLS 1.3 für Daten während der Übertragung."
badge="BANK-LEVEL"
></dataroom-feature-card>
<dataroom-feature-card
icon="key"
title="Zwei-Faktor-Authentifizierung"
description="FIDO2/WebAuthn-Standard mit Unterstützung für Hardware-Keys, biometrische Verfahren und TOTP-Apps."
badge="FIDO2"
></dataroom-feature-card>
<dataroom-feature-card
icon="eye-off"
title="Dynamische Wasserzeichen"
description="Benutzerspezifische sichtbare und unsichtbare Wasserzeichen mit IP-Adresse, Zeitstempel und User-ID."
badge="DRM"
></dataroom-feature-card>
</div>
</div>
</section>
<!-- Infrastructure -->
<section class="py-20 bg-primary-50">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-primary-900 mb-6">
Infrastruktur & Rechenzentren
</h2>
<p class="text-lg text-primary-600 mb-6">
Unsere Infrastruktur basiert auf modernsten, redundaten Systemen in deutschen Rechenzentren mit 99.9% Uptime-Garantie.
</p>
<div class="space-y-4">
<div class="flex items-center gap-3">
<i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
<span class="text-primary-700">Georedundante Backups in 3 separaten Zonen</span>
</div>
<div class="flex items-center gap-3">
<i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
<span class="text-primary-700">24/7 Überwachung und Incident Response</span>
</div>
<div class="flex items-center gap-3">
<i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
<span class="text-primary-700">Physische Sicherheit nach ISO 27001</span>
</div>
<div class="flex items-center gap-3">
<i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
<span class="text-primary-700">DDoS-Schutz und Web Application Firewall</span>
</div>
<div class="flex items-center gap-3">
<i data-feather="check-circle" class="h-5 w-5 text-green-500"></i>
<span class="text-primary-700">Zertifizierte Löschung nach BSI-Standards</span>
</div>
</div>
</div>
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-secondary-400/20 to-secondary-600/20 rounded-3xl blur-2xl"></div>
<div class="relative rounded-2xl bg-white/80 backdrop-blur-sm shadow-2xl ring-1 ring-white/50 p-8">
<img src="http://static.photos/technology/640x360/1" alt="Rechenzentrum" class="rounded-lg w-full mb-6">
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-2xl font-bold text-secondary-600">99.9%</div>
<div class="text-xs text-primary-600">Uptime</div>
</div>
<div>
<div class="text-2xl font-bold text-secondary-600">24/7</div>
<div class="text-xs text-primary-600">Monitoring</div>
</div>
<div>
<div class="text-2xl font-bold text-secondary-600">ISO</div>
<div class="text-xs text-primary-600">Zertifiziert</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Audit & Compliance -->
<section class="py-20 bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary-900 mb-6">
Audit & Compliance
</h2>
<p class="text-lg text-primary-600 max-w-3xl mx-auto">
Umfassende Audit-Trails und Compliance-Reports für Ihre Due Diligence und Regulatorien.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="rounded-lg bg-white p-6 shadow-lg ring-1 ring-primary-200">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200 mb-4">
<i data-feather="file-text" class="h-6 w-6 text-secondary-600"></i>
</div>
<h3 class="text-xl font-bold text-primary-900 mb-3">Audit Trails</h3>
<p class="text-primary-600 mb-4">Jede Aktion wird protokolliert mit Timestamp, IP-Adresse, User-Agent und Geo-Daten.</p>
<ul class="space-y-2 text-sm text-primary-600">
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Unveränderbare Logs</li>
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> PDF & Excel Export</li>
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Echtzeit-Alarme</li>
</ul>
</div>
<div class="rounded-lg bg-white p-6 shadow-lg ring-1 ring-primary-200">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200 mb-4">
<i data-feather="shield-check" class="h-6 w-6 text-secondary-600"></i>
</div>
<h3 class="text-xl font-bold text-primary-900 mb-3">Compliance Reports</h3>
<p class="text-primary-600 mb-4">Automatisierte Reports für DSGVO, ISO 27001 und andere regulatorische Anforderungen.</p>
<ul class="space-y-2 text-sm text-primary-600">
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Vordefinierte Templates</li>
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Custom Reports</li>
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Automatisierte Versand</li>
</ul>
</div>
<div class="rounded-lg bg-white p-6 shadow-lg ring-1 ring-primary-200">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200 mb-4">
<i data-feather="activity" class="h-6 w-6 text-secondary-600"></i>
</div>
<h3 class="text-xl font-bold text-primary-900 mb-3">Benutzerverwaltung</h3>
<p class="text-primary-600 mb-4">Granulare Berechtigungen und rollenbasierte Zugriffskontrolle für maximale Sicherheit.</p>
<ul class="space-y-2 text-sm text-primary-600">
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> RBAC System</li>
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> Zeitbasierte Rechte</li>
<li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-green-500"></i> IP-Restriktionen</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-secondary-600 to-secondary-700">
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
Sicherheit live erleben?
</h2>
<p class="text-xl text-secondary-100 mb-8">
Vereinbaren Sie eine persönliche Demo und sehen Sie unsere Sicherheitsfunktionen in Aktion.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="contact.html" class="group relative inline-flex items-center justify-center rounded-lg bg-white px-8 py-3 text-secondary-600 font-semibold shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:text-secondary-700 focus:outline-none focus:ring-4 focus:ring-white/30">
<span class="relative z-10">Demo anfordern</span>
<i data-feather="arrow-right" class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"></i>
</a>
<button class="inline-flex items-center justify-center rounded-lg bg-secondary-800 px-8 py-3 font-semibold text-white shadow-lg ring-1 ring-white/20 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:bg-secondary-900 focus:outline-none focus:ring-4 focus:ring-white/20">
<i data-feather="download" class="mr-2 h-5 w-5"></i>
Security Whitepaper
</button>
</div>
</div>
</section>
<dataroom-footer></dataroom-footer>
<script src="components/navbar.js"></script>
<script src="components/feature-card.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html>