feat: Add Academy, Whistleblower, Incidents SDK modules, pitch-deck, blog and CI/CD config
Some checks failed
ci/woodpecker/push/integration Pipeline failed
ci/woodpecker/push/main Pipeline failed
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
Some checks failed
ci/woodpecker/push/integration Pipeline failed
ci/woodpecker/push/main Pipeline failed
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
- Academy, Whistleblower, Incidents frontend pages with API proxies and types - Vendor compliance API proxy route - Go backend handlers and models for all new SDK modules - Investor pitch-deck app with interactive slides - Blog section with DSGVO, AI Act, NIS2, glossary articles - MkDocs documentation site - CI/CD pipelines (Woodpecker, GitHub Actions), security scanning config - Planning and implementation documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
BreakPilot Dev
741
website/app/blog/ai-act-ueberblick/page.tsx
Normal file
741
website/app/blog/ai-act-ueberblick/page.tsx
Normal file
@@ -0,0 +1,741 @@
|
||||
import { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'EU AI Act Ueberblick - Was Unternehmen wissen muessen | BreakPilot Comply',
|
||||
description: 'Der EU AI Act reguliert KI-Systeme nach Risikostufen. Erfahren Sie, welche Pflichten fuer Ihr Unternehmen gelten.',
|
||||
}
|
||||
|
||||
export default function AIActUeberblickPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<section className="pt-12 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
EU AI Act - Verordnung (EU) 2024/1689
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
|
||||
EU AI Act: Der umfassende Ueberblick fuer Unternehmen
|
||||
</h1>
|
||||
<p className="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">
|
||||
Die weltweit erste umfassende KI-Regulierung ist in Kraft. Erfahren Sie, welche Pflichten fuer Ihr Unternehmen gelten und wie Sie sich vorbereiten koennen.
|
||||
</p>
|
||||
<div className="mt-6 flex items-center justify-center gap-4 text-sm text-slate-500">
|
||||
<span>Aktualisiert: Februar 2025</span>
|
||||
<span className="w-1 h-1 bg-slate-300 rounded-full" />
|
||||
<span>Lesezeit: ca. 12 Minuten</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Article Content */}
|
||||
<article className="py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
|
||||
{/* Table of Contents */}
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 mb-12">
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4">Inhaltsverzeichnis</h2>
|
||||
<nav className="space-y-2 text-sm">
|
||||
<a href="#was-ist-der-ai-act" className="block text-primary-600 hover:text-primary-700 transition-colors">1. Was ist der EU AI Act?</a>
|
||||
<a href="#risikokategorien" className="block text-primary-600 hover:text-primary-700 transition-colors">2. Die vier Risikokategorien</a>
|
||||
<a href="#zeitplan" className="block text-primary-600 hover:text-primary-700 transition-colors">3. Zeitplan der Anwendung</a>
|
||||
<a href="#pflichten-anbieter" className="block text-primary-600 hover:text-primary-700 transition-colors">4. Pflichten fuer Anbieter von Hochrisiko-KI</a>
|
||||
<a href="#pflichten-nutzer" className="block text-primary-600 hover:text-primary-700 transition-colors">5. Pflichten fuer Nutzer von KI-Systemen</a>
|
||||
<a href="#strafen" className="block text-primary-600 hover:text-primary-700 transition-colors">6. Strafen bei Verstoss</a>
|
||||
<a href="#checkliste" className="block text-primary-600 hover:text-primary-700 transition-colors">7. Checkliste: Ist Ihr Unternehmen betroffen?</a>
|
||||
<a href="#breakpilot-comply" className="block text-primary-600 hover:text-primary-700 transition-colors">8. Wie BreakPilot Comply hilft</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Section 1: Was ist der EU AI Act? */}
|
||||
<section id="was-ist-der-ai-act">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
1. Was ist der EU AI Act?
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Der EU AI Act (Verordnung (EU) 2024/1689) ist die weltweit erste umfassende Regulierung fuer Kuenstliche Intelligenz. Am 1. August 2024 ist die Verordnung offiziell in Kraft getreten und wird stufenweise bis 2027 vollstaendig anwendbar. Ziel der Verordnung ist es, einen einheitlichen Rechtsrahmen fuer die Entwicklung, den Vertrieb und den Einsatz von KI-Systemen innerhalb der Europaeischen Union zu schaffen.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Der regulatorische Ansatz folgt dem Prinzip der Risikobasierung: Je hoeher das Risiko eines KI-Systems fuer Grundrechte, Sicherheit oder demokratische Prozesse, desto strenger sind die Anforderungen. Damit unterscheidet sich der EU AI Act grundlegend von sektoralen Regulierungsansaetzen und schafft stattdessen einen horizontalen, technologieneutralen Rahmen, der fuer alle Branchen gilt.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Fuer Unternehmen bedeutet dies: Wer KI-Systeme entwickelt, vertreibt oder einsetzt, muss pruefen, in welche Risikokategorie die eigenen Systeme fallen, und die entsprechenden Pflichten erfuellen. Die Verordnung gilt nicht nur fuer europaeische Unternehmen, sondern fuer jeden Anbieter, dessen KI-Systeme auf dem EU-Markt eingesetzt werden -- unabhaengig vom Firmensitz.
|
||||
</p>
|
||||
|
||||
<div className="bg-primary-50 border border-primary-200 rounded-xl p-6 my-8">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-semibold text-primary-900 mb-1">Gut zu wissen</p>
|
||||
<p className="text-primary-800 text-sm">
|
||||
Der EU AI Act definiert ein "KI-System" als ein maschinengestuetztes System, das mit unterschiedlichem Grad an Autonomie operiert, sich nach der Bereitstellung anpassen kann und aus den erhaltenen Eingaben Ergebnisse wie Vorhersagen, Inhalte, Empfehlungen oder Entscheidungen ableitet, die physische oder virtuelle Umgebungen beeinflussen koennen. Diese Definition ist bewusst breit gefasst und umfasst sowohl klassisches Machine Learning als auch generative KI und Large Language Models.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Die vier Risikokategorien */}
|
||||
<section id="risikokategorien">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
2. Die vier Risikokategorien
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Das Herzstrueck des EU AI Act ist das vierstufige Risikoklassifizierungssystem. Jedes KI-System wird anhand seines Anwendungszwecks und der potenziellen Auswirkungen einer der vier Kategorien zugeordnet. Die Einstufung bestimmt, welche regulatorischen Anforderungen erfuellt werden muessen.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mt-6">
|
||||
{/* Unakzeptables Risiko */}
|
||||
<div className="border-l-4 border-red-500 bg-red-50 rounded-r-xl p-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-red-100 text-red-700 font-bold text-sm">!</span>
|
||||
<h3 className="text-xl font-semibold text-gray-800">Unakzeptables Risiko -- Verboten</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3">
|
||||
KI-Systeme in dieser Kategorie werden als direkte Bedrohung fuer Grundrechte und demokratische Werte angesehen und sind in der EU vollstaendig verboten. Es gibt keinen Compliance-Pfad -- diese Systeme duerfen weder entwickelt noch eingesetzt werden.
|
||||
</p>
|
||||
<div className="mt-3">
|
||||
<p className="text-sm font-medium text-red-800 mb-2">Beispiele verbotener Praktiken:</p>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">✖</span>
|
||||
<span>Social Scoring durch Behoerden (Bewertung des Sozialverhaltens von Buergern)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">✖</span>
|
||||
<span>Biometrische Echtzeit-Fernidentifikation im oeffentlichen Raum (mit engen Ausnahmen fuer Strafverfolgung)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">✖</span>
|
||||
<span>Emotionserkennung am Arbeitsplatz und in Bildungseinrichtungen</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">✖</span>
|
||||
<span>Manipulative KI-Techniken, die Schwaechen von Personen ausnutzen (Alter, Behinderung, wirtschaftliche Lage)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">✖</span>
|
||||
<span>Ungezielte Gesichtsbild-Datenbanken durch Scraping von Internet- oder Ueberwachungsmaterial</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hochrisiko */}
|
||||
<div className="border-l-4 border-orange-500 bg-orange-50 rounded-r-xl p-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-orange-100 text-orange-700 font-bold text-sm">H</span>
|
||||
<h3 className="text-xl font-semibold text-gray-800">Hochrisiko -- Strenge Auflagen</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3">
|
||||
Hochrisiko-KI-Systeme sind erlaubt, unterliegen aber umfangreichen regulatorischen Anforderungen. Diese Kategorie ist fuer die meisten Unternehmen die relevanteste, da sie zahlreiche gaengige Anwendungsgebiete umfasst. Hochrisiko-Systeme sind in Anhang III der Verordnung aufgelistet und betreffen unter anderem:
|
||||
</p>
|
||||
<div className="mt-3 grid sm:grid-cols-2 gap-3">
|
||||
<div className="bg-white rounded-lg p-3 border border-orange-200">
|
||||
<p className="text-sm font-medium text-gray-900">Bildung & Ausbildung</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Zugang zu Bildungseinrichtungen, Pruefungsbewertung, Leistungsbeurteilung</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3 border border-orange-200">
|
||||
<p className="text-sm font-medium text-gray-900">Personalwesen</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Bewerberauswahl, Leistungsbewertung, Befoerderungsentscheidungen</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3 border border-orange-200">
|
||||
<p className="text-sm font-medium text-gray-900">Kritische Infrastruktur</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Steuerung von Wasser, Gas, Strom, Verkehr</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3 border border-orange-200">
|
||||
<p className="text-sm font-medium text-gray-900">Kreditwuerdigkeit & Versicherung</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Bonitaetsbewertung, Risikoeinstufung bei Lebens- und Krankenversicherung</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3 border border-orange-200">
|
||||
<p className="text-sm font-medium text-gray-900">Strafverfolgung</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Risikobewertung, Luegenerkennung, Beweismittelbewertung</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3 border border-orange-200">
|
||||
<p className="text-sm font-medium text-gray-900">Migration & Grenzschutz</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Asylantragsbewertung, Risikoeinstufung bei der Einreise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Begrenztes Risiko */}
|
||||
<div className="border-l-4 border-yellow-500 bg-yellow-50 rounded-r-xl p-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-yellow-100 text-yellow-700 font-bold text-sm">B</span>
|
||||
<h3 className="text-xl font-semibold text-gray-800">Begrenztes Risiko -- Transparenzpflichten</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3">
|
||||
Fuer KI-Systeme mit begrenztem Risiko gelten primaer Transparenz- und Kennzeichnungspflichten. Nutzer muessen informiert werden, dass sie mit einem KI-System interagieren oder dass Inhalte KI-generiert sind. Diese Anforderungen sind deutlich weniger umfangreich als bei Hochrisiko-Systemen.
|
||||
</p>
|
||||
<div className="mt-3">
|
||||
<p className="text-sm font-medium text-yellow-800 mb-2">Beispiele:</p>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-yellow-600 mt-1">▶</span>
|
||||
<span>Chatbots und virtuelle Assistenten (Nutzer muss wissen, dass er mit einer KI interagiert)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-yellow-600 mt-1">▶</span>
|
||||
<span>Deepfakes und KI-generierte Bild-/Video-/Audioinhalte (muessen als kuenstlich erzeugt gekennzeichnet werden)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-yellow-600 mt-1">▶</span>
|
||||
<span>KI-generierte Texte, die zu Fragen des oeffentlichen Interesses veroeffentlicht werden</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-yellow-600 mt-1">▶</span>
|
||||
<span>Emotionserkennungssysteme (ausserhalb verbotener Kontexte) mit Informationspflicht</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Minimales Risiko */}
|
||||
<div className="border-l-4 border-green-500 bg-green-50 rounded-r-xl p-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-700 font-bold text-sm">M</span>
|
||||
<h3 className="text-xl font-semibold text-gray-800">Minimales Risiko -- Keine besonderen Pflichten</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3">
|
||||
Die ueberwiegende Mehrheit der KI-Systeme faellt in diese Kategorie. Fuer sie gelten keine spezifischen regulatorischen Anforderungen aus dem AI Act. Die Kommission ermutigt Anbieter jedoch, freiwillige Verhaltenskodizes zu uebernehmen.
|
||||
</p>
|
||||
<div className="mt-3">
|
||||
<p className="text-sm font-medium text-green-800 mb-2">Beispiele:</p>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✔</span>
|
||||
<span>Spam-Filter und E-Mail-Sortierung</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✔</span>
|
||||
<span>Autokorrektur und Rechtschreibpruefung</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✔</span>
|
||||
<span>KI-gestuetzte Empfehlungssysteme fuer Musik oder Filme</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✔</span>
|
||||
<span>KI-optimierte Lagerverwaltung und Bestandsplanung</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✔</span>
|
||||
<span>Suchmaschinen-Ranking und Content-Optimierung</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Zeitplan */}
|
||||
<section id="zeitplan">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
3. Zeitplan der Anwendung
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Der EU AI Act tritt nicht auf einen Schlag in vollem Umfang in Kraft, sondern wird in mehreren Stufen anwendbar. Dieser gestaffelte Ansatz gibt Unternehmen Zeit, sich auf die neuen Anforderungen vorzubereiten. Die folgende Zeitleiste zeigt die wesentlichen Meilensteine:
|
||||
</p>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="relative mt-8 ml-4">
|
||||
{/* Vertical Line */}
|
||||
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary-400 via-primary-500 to-primary-600" />
|
||||
|
||||
{/* Aug 2024 */}
|
||||
<div className="relative flex items-start gap-6 pb-10">
|
||||
<div className="flex-shrink-0 w-9 h-9 bg-primary-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-5 flex-1 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2.5 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded-full">Bereits in Kraft</span>
|
||||
<span className="text-sm font-semibold text-slate-900">1. August 2024</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-1">Inkrafttreten der Verordnung</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Der EU AI Act wurde im Amtsblatt der EU veroeffentlicht und ist formell in Kraft getreten. Ab diesem Datum beginnen die Uebergangsfristen zu laufen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feb 2025 */}
|
||||
<div className="relative flex items-start gap-6 pb-10">
|
||||
<div className="flex-shrink-0 w-9 h-9 bg-red-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="bg-white border border-red-200 rounded-xl p-5 flex-1 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2.5 py-0.5 bg-red-100 text-red-700 text-xs font-medium rounded-full">Jetzt anwendbar</span>
|
||||
<span className="text-sm font-semibold text-slate-900">2. Februar 2025</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-1">Verbotene KI-Praktiken</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Die Verbote fuer KI-Systeme mit unakzeptablem Risiko werden durchsetzbar. Unternehmen, die Social Scoring, manipulative KI oder verbotene biometrische Systeme einsetzen, muessen diese sofort einstellen. Verstoesse koennen ab diesem Zeitpunkt sanktioniert werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Aug 2025 */}
|
||||
<div className="relative flex items-start gap-6 pb-10">
|
||||
<div className="flex-shrink-0 w-9 h-9 bg-accent-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="bg-white border border-accent-200 rounded-xl p-5 flex-1 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2.5 py-0.5 bg-accent-100 text-accent-700 text-xs font-medium rounded-full">Kommend</span>
|
||||
<span className="text-sm font-semibold text-slate-900">2. August 2025</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-1">GPAI-Modelle & Governance</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Pflichten fuer Anbieter von General Purpose AI (GPAI) Modellen werden anwendbar. Dies betrifft insbesondere Anbieter grosser Sprachmodelle (wie GPT, Claude, Gemini). Transparenzpflichten, Urheberrechtsschutz und Dokumentationsanforderungen greifen. Das EU AI Office und nationale Aufsichtsbehoerden nehmen ihre Arbeit auf.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Aug 2026 */}
|
||||
<div className="relative flex items-start gap-6 pb-10">
|
||||
<div className="flex-shrink-0 w-9 h-9 bg-orange-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="bg-white border border-orange-200 rounded-xl p-5 flex-1 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2.5 py-0.5 bg-orange-100 text-orange-700 text-xs font-medium rounded-full">Wichtiger Meilenstein</span>
|
||||
<span className="text-sm font-semibold text-slate-900">2. August 2026</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-1">Hochrisiko-KI-Systeme (Anhang III)</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Der Grossteil der Verordnung wird anwendbar. Alle Pflichten fuer Hochrisiko-KI-Systeme nach Anhang III greifen vollstaendig: Risikomanagementsysteme, Datenqualitaet, technische Dokumentation, Transparenz, menschliche Aufsicht und Genauigkeitsanforderungen muessen implementiert sein. Dies ist der Stichtag, auf den sich die meisten Unternehmen vorbereiten muessen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Aug 2027 */}
|
||||
<div className="relative flex items-start gap-6">
|
||||
<div className="flex-shrink-0 w-9 h-9 bg-slate-400 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-5 flex-1 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2.5 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full">Letzte Phase</span>
|
||||
<span className="text-sm font-semibold text-slate-900">2. August 2027</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-1">Vollstaendige Anwendung</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Auch Hochrisiko-KI-Systeme nach Anhang I (die unter bestehende EU-Produktsicherheitsvorschriften fallen, z.B. Medizinprodukte, Maschinen, Spielzeug) muessen die Anforderungen vollstaendig erfuellen. Die gesamte Verordnung ist nun ohne Ausnahme anwendbar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 4: Pflichten fuer Anbieter */}
|
||||
<section id="pflichten-anbieter">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
4. Pflichten fuer Anbieter von Hochrisiko-KI
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Anbieter (Provider) sind Unternehmen oder Personen, die ein KI-System entwickeln oder entwickeln lassen und es unter eigenem Namen auf den Markt bringen. Die Anforderungen an Anbieter von Hochrisiko-KI sind die umfangreichsten im gesamten Regulierungsrahmen. Artikel 8 bis 15 der Verordnung definieren sechs Kernpflichten:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6 mt-6">
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
|
||||
<span className="text-primary-600 mr-2">4.1</span>
|
||||
Risikomanagementsystem (Art. 9)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Anbieter muessen ein kontinuierliches Risikomanagementsystem einrichten, das den gesamten Lebenszyklus des KI-Systems abdeckt. Dieses System muss bekannte und vorhersehbare Risiken identifizieren und analysieren, Risiken bewerten, die bei bestimmungsgemaeSSem Gebrauch sowie bei vernuenftigerweise vorhersehbarer Fehlanwendung auftreten koennen, und geeignete Risikominderungsmassnahmen umsetzen. Das Risikomanagement ist kein einmaliger Akt, sondern ein iterativer Prozess, der regelmaessig aktualisiert werden muss.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
|
||||
<span className="text-primary-600 mr-2">4.2</span>
|
||||
Daten-Governance (Art. 10)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Trainings-, Validierungs- und Testdaten muessen strengen Qualitaetsanforderungen genuegen. Datensaetze muessen relevant, repraesentativ, fehlerfrei und vollstaendig sein. Anbieter muessen Verzerrungen (Bias) in den Daten erkennen und beheben. Besondere Sorgfaltspflichten gelten beim Umgang mit besonderen Kategorien personenbezogener Daten (Art. 9 DSGVO). Die Datensaetze muessen dokumentiert und nachvollziehbar sein.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
|
||||
<span className="text-primary-600 mr-2">4.3</span>
|
||||
Technische Dokumentation (Art. 11)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Vor dem Inverkehrbringen muss eine umfassende technische Dokumentation erstellt werden. Diese umfasst eine allgemeine Beschreibung des KI-Systems, detaillierte Informationen zur Entwicklung (einschliesslich Trainingsmethoden und verwendeter Daten), die Architektur des Systems, die Konformitaetsbewertung und Gebrauchsanweisungen. Die Dokumentation muss regelmaessig aktualisiert und auf Anfrage den Aufsichtsbehoerden vorgelegt werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
|
||||
<span className="text-primary-600 mr-2">4.4</span>
|
||||
Transparenz und Bereitstellung von Informationen (Art. 13)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Hochrisiko-KI-Systeme muessen so konzipiert sein, dass ihr Betrieb hinreichend transparent ist. Nutzer (Deployer) muessen die Ergebnisse des Systems interpretieren und angemessen nutzen koennen. Gebrauchsanweisungen muessen Informationen ueber Leistungsmerkmale, Einschraenkungen, Risiken und Kontrollmassnahmen enthalten. Ein automatisches Protokollierungssystem (Logging) muss implementiert sein.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
|
||||
<span className="text-primary-600 mr-2">4.5</span>
|
||||
Menschliche Aufsicht (Art. 14)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
KI-Systeme muessen so gestaltet sein, dass sie waehrend der Nutzung von natuerlichen Personen wirksam ueberwacht werden koennen. Dies bedeutet: Personen, die die Aufsicht ueben, muessen die Faehigkeiten und Grenzen des Systems verstehen, Anzeichen von Anomalien erkennen koennen und in der Lage sein, das System jederzeit zu stoppen oder zu uebersteuern. Das "Human-in-the-Loop"-Prinzip ist ein zentrales Element des EU AI Act.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
|
||||
<span className="text-primary-600 mr-2">4.6</span>
|
||||
Genauigkeit, Robustheit und Cybersicherheit (Art. 15)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Hochrisiko-KI-Systeme muessen ein angemessenes Niveau an Genauigkeit, Robustheit und Cybersicherheit erreichen. Die Leistungswerte muessen in der technischen Dokumentation angegeben werden. Systeme muessen widerstandsfaehig gegen Fehler, Manipulationsversuche (Adversarial Attacks) und Datenvergiftung (Data Poisoning) sein. Regelmaessige Tests und Validierungen sind erforderlich, um die Zuverlaessigkeit sicherzustellen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 5: Pflichten fuer Nutzer */}
|
||||
<section id="pflichten-nutzer">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
5. Pflichten fuer Nutzer (Deployer) von KI-Systemen
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Auch Unternehmen, die KI-Systeme nicht selbst entwickeln, sondern von Drittanbietern beziehen und in ihren Geschaeftsprozessen einsetzen, haben Pflichten unter dem EU AI Act. Der Verordnungstext verwendet hierfuer den Begriff "Deployer" (Betreiber/Nutzer). Die folgenden Pflichten sind besonders relevant:
|
||||
</p>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-6 mt-6 space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary-700 font-bold text-sm">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Bestimmungsgemaeasser Einsatz</h3>
|
||||
<p className="text-gray-600 text-sm">Hochrisiko-KI-Systeme duerfen nur gemaess der vom Anbieter bereitgestellten Gebrauchsanweisung eingesetzt werden. Eine Verwendung ausserhalb des vorgesehenen Zwecks kann den Deployer selbst zum Anbieter machen -- mit allen damit verbundenen Pflichten.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary-700 font-bold text-sm">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Menschliche Aufsicht gewaehrleisten</h3>
|
||||
<p className="text-gray-600 text-sm">Deployer muessen sicherstellen, dass die Personen, die fuer die menschliche Aufsicht zustaendig sind, ausreichend geschult und kompetent sind. Diese Personen muessen die Autoritaet und die Moeglichkeit haben, Ergebnisse des KI-Systems zu uebersteuern oder das System abzuschalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary-700 font-bold text-sm">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Eingabedatenqualitaet</h3>
|
||||
<p className="text-gray-600 text-sm">Soweit der Deployer Kontrolle ueber die Eingabedaten hat, muss er sicherstellen, dass diese dem Verwendungszweck des Systems angemessen und repraesentativ sind.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary-700 font-bold text-sm">4</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Monitoring und Meldepflichten</h3>
|
||||
<p className="text-gray-600 text-sm">Deployer muessen den Betrieb des KI-Systems ueberwachen und den Anbieter sowie die zustaendige Behoerde informieren, wenn sie Grund zur Annahme haben, dass das System ein Risiko darstellt. Schwerwiegende Vorfaelle muessen gemeldet werden.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary-700 font-bold text-sm">5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Datenschutz-Folgenabschaetzung (DSFA)</h3>
|
||||
<p className="text-gray-600 text-sm">Wenn der Einsatz eines Hochrisiko-KI-Systems die Verarbeitung personenbezogener Daten umfasst, muessen Deployer vor dem Einsatz eine Datenschutz-Folgenabschaetzung gemaess Art. 35 DSGVO durchfuehren. Das Ergebnis der vom Anbieter bereitgestellten Grundrechte-Folgenabschaetzung ist hierbei zu beruecksichtigen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary-700 font-bold text-sm">6</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Aufbewahrung automatisch erzeugter Protokolle</h3>
|
||||
<p className="text-gray-600 text-sm">Die vom KI-System automatisch erzeugten Protokolle muessen mindestens sechs Monate lang aufbewahrt werden, sofern nicht in anderen Rechtsvorschriften laengere Aufbewahrungsfristen vorgesehen sind.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 6: Strafen */}
|
||||
<section id="strafen">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
6. Strafen bei Verstoss
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Der EU AI Act sieht ein dreistufiges Bussgeld-System vor, das sich an der Schwere des Verstosses orientiert. Aehnlich wie bei der DSGVO sind die Hoechstbetraege abschreckend hoch und richten sich nach dem weltweiten Jahresumsatz des Unternehmens. Fuer KMU und Start-ups gelten mildere Obergrenzen.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mt-6">
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-xl font-semibold text-gray-800">Verbotene KI-Praktiken</h3>
|
||||
<span className="px-3 py-1 bg-red-100 text-red-700 text-sm font-bold rounded-full">Hoechststufe</span>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="text-center p-4 bg-white rounded-lg">
|
||||
<p className="text-3xl font-bold text-red-600">35 Mio. EUR</p>
|
||||
<p className="text-sm text-gray-500 mt-1">oder</p>
|
||||
<p className="text-xl font-bold text-red-600">7 % des Jahresumsatzes</p>
|
||||
<p className="text-xs text-gray-400 mt-1">(der hoehere Betrag gilt)</p>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Gilt fuer den Einsatz verbotener KI-Praktiken (Art. 5) und Verstoesse gegen die Anforderungen an Daten fuer das Training von KI-Systemen bei Minderjaerigen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-xl font-semibold text-gray-800">Verstoesse gegen Kernpflichten</h3>
|
||||
<span className="px-3 py-1 bg-orange-100 text-orange-700 text-sm font-bold rounded-full">Mittelstufe</span>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="text-center p-4 bg-white rounded-lg">
|
||||
<p className="text-3xl font-bold text-orange-600">15 Mio. EUR</p>
|
||||
<p className="text-sm text-gray-500 mt-1">oder</p>
|
||||
<p className="text-xl font-bold text-orange-600">3 % des Jahresumsatzes</p>
|
||||
<p className="text-xs text-gray-400 mt-1">(der hoehere Betrag gilt)</p>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Gilt fuer Verstoesse gegen die Pflichten fuer Anbieter und Deployer von Hochrisiko-KI-Systemen, einschliesslich Risikomanagement, Daten-Governance, Transparenz und menschliche Aufsicht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-xl font-semibold text-gray-800">Falsche Angaben gegenueber Behoerden</h3>
|
||||
<span className="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm font-bold rounded-full">Grundstufe</span>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="text-center p-4 bg-white rounded-lg">
|
||||
<p className="text-3xl font-bold text-yellow-600">7,5 Mio. EUR</p>
|
||||
<p className="text-sm text-gray-500 mt-1">oder</p>
|
||||
<p className="text-xl font-bold text-yellow-600">1 % des Jahresumsatzes</p>
|
||||
<p className="text-xs text-gray-400 mt-1">(der hoehere Betrag gilt)</p>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Gilt fuer die Bereitstellung unrichtiger, unvollstaendiger oder irrefuehrender Informationen an Aufsichtsbehoerden oder benannte Stellen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary-50 border border-primary-200 rounded-xl p-6 my-8">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-semibold text-primary-900 mb-1">KMU-Erleichterungen</p>
|
||||
<p className="text-primary-800 text-sm">
|
||||
Fuer kleine und mittlere Unternehmen (KMU) sowie Start-ups gelten verhaeltnismaessig niedrigere Bussgeld-Obergrenzen. Zudem sollen die Aufsichtsbehoerden bei der Festsetzung von Bussgeldern die wirtschaftliche Leistungsfaehigkeit des Unternehmens beruecksichtigen. Die Verordnung sieht auch "Regulatory Sandboxes" vor -- kontrollierte Testumgebungen, in denen KMU und Start-ups innovative KI-Systeme unter Aufsicht entwickeln und testen koennen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 7: Checkliste */}
|
||||
<section id="checkliste">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
7. Checkliste: Ist Ihr Unternehmen betroffen?
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Die folgenden fuenf Fragen helfen Ihnen, eine erste Einschaetzung vorzunehmen, ob und in welchem Umfang Ihr Unternehmen von den Pflichten des EU AI Act betroffen ist. Je mehr Fragen Sie mit "Ja" beantworten, desto dringender sollten Sie sich mit der Regulierung befassen.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mt-6">
|
||||
<div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white">
|
||||
<svg className="w-4 h-4 text-primary-600 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 1: Setzen Sie KI-Systeme ein?</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Nutzt Ihr Unternehmen Software, die auf Machine Learning, Deep Learning, Natural Language Processing oder anderen KI-Techniken basiert? Dies schliesst auch eingekaufte SaaS-Loesungen, eingebettete KI-Funktionen in bestehender Software und den Einsatz von APIs grosser KI-Anbieter (z.B. OpenAI, Google, Anthropic) ein.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 2: Treffen KI-Systeme Entscheidungen ueber Personen?</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Werden KI-Systeme eingesetzt, um Entscheidungen zu treffen oder vorzubereiten, die natuerliche Personen betreffen? Dazu gehoeren Bewerberauswahl, Leistungsbewertung, Kreditwuerdigkeitspruefung, Versicherungseinstufung, Zugang zu Bildung, Sozialleistungen oder oeffentlichen Diensten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 3: Entwickeln oder vertreiben Sie KI-Systeme?</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Sind Sie Anbieter (Provider) eines KI-Systems, das in der EU auf den Markt gebracht oder in Betrieb genommen wird? Auch das Rebranding oder wesentliche Veraendern eines bestehenden KI-Systems kann Sie zum Anbieter im Sinne der Verordnung machen. Pruefen Sie, ob Sie als Provider, Deployer, Importeur oder Haendler einzustufen sind.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 4: Nutzen Sie KI in einem regulierten Sektor?</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Ist Ihr Unternehmen in einem der in Anhang III genannten Bereiche taetig? Dazu gehoeren unter anderem: Bildung, Personalwesen, kritische Infrastruktur, Finanzdienstleistungen, Gesundheitswesen, Strafverfolgung, Migration und Justiz. In diesen Sektoren ist die Wahrscheinlichkeit hoch, dass Ihre KI-Systeme als Hochrisiko eingestuft werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 5: Haben Sie bereits ein KI-Inventar?</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Wissen Sie, welche KI-Systeme in Ihrem Unternehmen im Einsatz sind, wer sie anbietet, welche Daten sie verarbeiten und welche Entscheidungen sie beeinflussen? Ein vollstaendiges KI-Portfolio ist der erste Schritt zur Compliance. Ohne Ueberblick ueber die eigene KI-Landschaft ist eine Risikobewertung unmoeglich.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-xl p-6 mt-8">
|
||||
<p className="text-sm text-gray-600">
|
||||
<span className="font-semibold text-gray-900">Auswertung: </span>
|
||||
Wenn Sie mindestens eine der obigen Fragen mit "Ja" beantwortet haben, sind Sie mit hoher Wahrscheinlichkeit vom EU AI Act betroffen. Bei zwei oder mehr Ja-Antworten empfehlen wir eine detaillierte Analyse Ihrer KI-Systeme und eine formelle Risikoeinstufung. Je frueher Sie beginnen, desto mehr Zeit bleibt fuer die Umsetzung der erforderlichen Massnahmen vor den jeweiligen Stichtagen.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 8: BreakPilot Comply */}
|
||||
<section id="breakpilot-comply">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
8. Wie BreakPilot Comply hilft
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
BreakPilot Comply unterstuetzt Unternehmen dabei, die Anforderungen des EU AI Act strukturiert und effizient umzusetzen. Unsere Plattform wurde speziell fuer die Herausforderungen der KI-Regulierung entwickelt und bietet zwei Kernmodule:
|
||||
</p>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-6">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-xl p-6 border border-primary-200">
|
||||
<div className="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">AI Portfolio</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Erfassen Sie alle KI-Systeme Ihres Unternehmens in einem zentralen Verzeichnis. Klassifizieren Sie jedes System nach Risikokategorie, dokumentieren Sie Anbieter, Verwendungszweck, verarbeitete Daten und verantwortliche Personen. Das AI Portfolio schafft die Transparenz, die fuer eine fundierte Compliance-Bewertung notwendig ist.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-accent-50 to-accent-100 rounded-xl p-6 border border-accent-200">
|
||||
<div className="w-12 h-12 bg-accent-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">UCCA Assessment</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Fuehren Sie fuer jedes KI-System eine strukturierte Anwendungsfall-Konformitaetsbewertung (Use Case Conformity Assessment) durch. Unser gefuehrter Prozess leitet Sie durch die Risikoeinstufung, identifiziert relevante Pflichten und generiert die erforderliche Dokumentation -- von der technischen Beschreibung bis zum Risikomanagementplan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="mt-16 mb-8 bg-gradient-to-br from-primary-600 to-primary-700 rounded-2xl p-8 text-center text-white">
|
||||
<h2 className="text-2xl font-bold mb-3">Bereit fuer den EU AI Act?</h2>
|
||||
<p className="text-primary-100 mb-6 max-w-lg mx-auto">
|
||||
Starten Sie jetzt mit der Bestandsaufnahme Ihrer KI-Systeme und stellen Sie rechtzeitig Compliance sicher.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="inline-flex items-center justify-center px-6 py-3 bg-white text-primary-700 rounded-xl font-medium hover:bg-primary-50 transition-colors"
|
||||
>
|
||||
Beratungsgespraech vereinbaren
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center justify-center px-6 py-3 border border-white/30 text-white rounded-xl font-medium hover:bg-white/10 transition-colors"
|
||||
>
|
||||
Weitere Artikel lesen
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<div className="mt-8 p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<p className="text-xs text-slate-500">
|
||||
<span className="font-semibold">Hinweis:</span> Dieser Artikel dient ausschliesslich zu Informationszwecken und stellt keine Rechtsberatung dar. Die Inhalte wurden mit Sorgfalt recherchiert, koennen jedoch aufgrund der sich entwickelnden Regulierungslandschaft und nationaler Umsetzungsgesetze Aenderungen unterliegen. Fuer verbindliche Auskuenfte wenden Sie sich bitte an einen spezialisierten Rechtsberater. Stand: Februar 2025.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
725
website/app/blog/dsgvo-vvt-erstellen/page.tsx
Normal file
725
website/app/blog/dsgvo-vvt-erstellen/page.tsx
Normal file
@@ -0,0 +1,725 @@
|
||||
import { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'VVT erstellen - Schritt-fuer-Schritt Anleitung | BreakPilot Comply',
|
||||
description: 'Lernen Sie, wie Sie ein DSGVO-konformes Verzeichnis von Verarbeitungstaetigkeiten (VVT) nach Art. 30 erstellen.',
|
||||
openGraph: {
|
||||
title: 'VVT erstellen - Schritt-fuer-Schritt Anleitung',
|
||||
description: 'Lernen Sie, wie Sie ein DSGVO-konformes Verzeichnis von Verarbeitungstaetigkeiten (VVT) nach Art. 30 erstellen.',
|
||||
type: 'article',
|
||||
locale: 'de_DE',
|
||||
},
|
||||
}
|
||||
|
||||
export default function VVTErstellenPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-sky-50 via-white to-fuchsia-50 border-b border-gray-100">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-sky-100 text-sky-700">
|
||||
DSGVO-Leitfaden
|
||||
</span>
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-600">
|
||||
Art. 30 DSGVO
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-6">
|
||||
Verzeichnis von Verarbeitungstaetigkeiten (VVT) erstellen
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 leading-relaxed max-w-3xl">
|
||||
Eine umfassende Schritt-fuer-Schritt Anleitung zur Erstellung eines
|
||||
DSGVO-konformen VVT nach Art. 30 – mit Vorlagen, Praxistipps und
|
||||
haeufigen Fehlern, die Sie vermeiden sollten.
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-8 text-sm text-gray-500">
|
||||
<span>Aktualisiert: Februar 2026</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-300" />
|
||||
<span>Lesezeit: ca. 12 Minuten</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table of Contents */}
|
||||
<nav className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-b border-gray-100">
|
||||
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Inhalt</h2>
|
||||
<ol className="grid sm:grid-cols-2 gap-2 text-gray-700">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">1.</span>
|
||||
<a href="#was-ist-vvt" className="hover:text-sky-600 transition-colors">Was ist ein VVT?</a>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">2.</span>
|
||||
<a href="#wer-muss-vvt-fuehren" className="hover:text-sky-600 transition-colors">Wer muss ein VVT fuehren?</a>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">3.</span>
|
||||
<a href="#pflichtinhalte" className="hover:text-sky-600 transition-colors">Was muss im VVT stehen?</a>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">4.</span>
|
||||
<a href="#schritt-fuer-schritt" className="hover:text-sky-600 transition-colors">Schritt-fuer-Schritt Anleitung</a>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">5.</span>
|
||||
<a href="#haeufige-fehler" className="hover:text-sky-600 transition-colors">Haeufige Fehler vermeiden</a>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">6.</span>
|
||||
<a href="#vvt-vorlage" className="hover:text-sky-600 transition-colors">VVT-Vorlage mit Beispieleintraegen</a>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-500 font-semibold">7.</span>
|
||||
<a href="#automatisierung" className="hover:text-sky-600 transition-colors">Automatisierung mit BreakPilot Comply</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{/* Article Content */}
|
||||
<article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
|
||||
{/* Section 1: Was ist ein VVT? */}
|
||||
<section id="was-ist-vvt">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
1. Was ist ein Verzeichnis von Verarbeitungstaetigkeiten?
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Das Verzeichnis von Verarbeitungstaetigkeiten (VVT) ist ein zentrales Dokumentationsinstrument der
|
||||
Datenschutz-Grundverordnung (DSGVO). Es erfasst systematisch alle Prozesse innerhalb einer Organisation,
|
||||
bei denen personenbezogene Daten verarbeitet werden. Das VVT bildet damit das Rueckgrat Ihres
|
||||
Datenschutzmanagements und dient als Nachweis gegenueber Aufsichtsbehoerden, dass Sie Ihre
|
||||
Rechenschaftspflicht nach Art. 5 Abs. 2 DSGVO ernst nehmen.
|
||||
</p>
|
||||
|
||||
{/* Legal Reference Box */}
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-800 mb-1">Rechtsgrundlage: Art. 30 DSGVO</h4>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
«Jeder Verantwortliche und gegebenenfalls sein Vertreter fuehren ein Verzeichnis aller
|
||||
Verarbeitungstaetigkeiten, die ihrer Zustaendigkeit unterliegen.» – Art. 30 Abs. 1 Satz 1 DSGVO.
|
||||
Das VVT muss schriftlich gefuehrt werden, wobei ein elektronisches Format zulaessig ist (Art. 30 Abs. 3).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Konkret bedeutet das: Jedes Mal, wenn Ihre Organisation personenbezogene Daten erhebt, speichert,
|
||||
uebertraegt, aendert oder loescht, stellt dies eine Verarbeitungstaetigkeit dar, die im VVT
|
||||
dokumentiert werden muss. Typische Beispiele sind die Lohn- und Gehaltsabrechnung, das
|
||||
Bewerbermanagement, der Betrieb einer Website mit Kontaktformular oder die Nutzung von
|
||||
Cloud-Diensten zur E-Mail-Kommunikation.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Das VVT ist kein einmaliges Projekt, sondern ein lebendes Dokument: Es muss fortlaufend aktualisiert
|
||||
werden, wenn neue Verarbeitungen hinzukommen, bestehende sich aendern oder Verarbeitungen eingestellt
|
||||
werden. Aufsichtsbehoerden koennen das VVT jederzeit anfordern – eine fehlende oder unvollstaendige
|
||||
Dokumentation kann Bussgelder nach Art. 83 Abs. 4 lit. a DSGVO nach sich ziehen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Wer muss ein VVT fuehren? */}
|
||||
<section id="wer-muss-vvt-fuehren">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
2. Wer muss ein VVT fuehren?
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Die kurze Antwort: Nahezu jede Organisation. Art. 30 Abs. 5 DSGVO sieht zwar eine Ausnahme fuer
|
||||
Unternehmen mit weniger als 250 Mitarbeitern vor, doch diese Ausnahme greift nur, wenn die
|
||||
Verarbeitung nicht regelmaessig erfolgt, keine Risiken fuer Betroffene birgt und keine besonderen
|
||||
Datenkategorien (Art. 9) betrifft. In der Praxis erfuellt kaum ein Unternehmen alle drei Bedingungen
|
||||
gleichzeitig – bereits eine regelmaessige Kundendatenbank oder Lohnbuchhaltung macht das VVT zur Pflicht.
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-8 mb-3">
|
||||
Pflichten fuer Verantwortliche (Art. 30 Abs. 1)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Als Verantwortlicher – also die natuerliche oder juristische Person, die ueber Zwecke und Mittel der
|
||||
Verarbeitung entscheidet – muessen Sie ein umfassendes VVT fuehren. Dies betrifft jedes Unternehmen,
|
||||
jeden Verein, jede Behoerde und jede Bildungseinrichtung, die personenbezogene Daten verarbeitet.
|
||||
Das VVT des Verantwortlichen umfasst die meisten Pflichtangaben und bildet die Grundlage fuer
|
||||
alle weiteren Datenschutzmassnahmen wie die Datenschutz-Folgenabschaetzung (DSFA) oder die
|
||||
Beantwortung von Betroffenenanfragen.
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-8 mb-3">
|
||||
Pflichten fuer Auftragsverarbeiter (Art. 30 Abs. 2)
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Auch Auftragsverarbeiter – also Dienstleister, die personenbezogene Daten im Auftrag des
|
||||
Verantwortlichen verarbeiten – muessen ein eigenes VVT fuehren. Typische Beispiele sind
|
||||
Cloud-Anbieter, IT-Dienstleister, Lohnbueros oder Hosting-Provider. Das VVT des
|
||||
Auftragsverarbeiters ist weniger umfangreich, muss aber dennoch Kategorien der Verarbeitungen,
|
||||
Angaben zu Drittlandsuebermittlungen und die technisch-organisatorischen Massnahmen (TOMs) enthalten.
|
||||
</p>
|
||||
|
||||
{/* Tip Box */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-5 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-sky-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className="font-semibold text-sky-800 mb-1">Praxistipp</h4>
|
||||
<p className="text-sky-700 text-sm leading-relaxed">
|
||||
Auch wenn Sie glauben, unter die Ausnahme des Art. 30 Abs. 5 zu fallen: Fuehren Sie trotzdem
|
||||
ein VVT. Ohne Verzeichnis koennen Sie die Rechenschaftspflicht nach Art. 5 Abs. 2 DSGVO
|
||||
kaum erfuellen. Im Ernstfall muss Ihre Organisation nachweisen, dass die Ausnahme greift –
|
||||
und genau das erfordert eine Dokumentation, die dem VVT stark aehnelt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mt-8 mb-3">
|
||||
Sonderfall: Bildungseinrichtungen und Schulen
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Schulen und Bildungseinrichtungen verarbeiten regelmaessig besonders schuetzenswerte Daten von
|
||||
Minderjaehrigen. Hier gelten erhoehte Anforderungen: Noten, Fehlzeiten, Foerdermassnahmen und
|
||||
gesundheitliche Einschraenkungen gehoeren zu den Kategorien, die besonderer Sorgfalt beduerfen.
|
||||
Das VVT muss hier besonders detailliert die Rechtsgrundlagen (haeufig Art. 6 Abs. 1 lit. e DSGVO
|
||||
in Verbindung mit den jeweiligen Landesschulgesetzen) und die Loeschfristen dokumentieren.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Was muss im VVT stehen? */}
|
||||
<section id="pflichtinhalte">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
3. Was muss im VVT stehen? – Pflichtinhalte nach Art. 30 Abs. 1
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Art. 30 Abs. 1 DSGVO definiert einen Mindestkatalog an Angaben, die jede Verarbeitungstaetigkeit
|
||||
im VVT enthalten muss. Die folgende Tabelle zeigt alle Pflichtfelder mit Erlaeuterungen und
|
||||
konkreten Beispielen aus der Praxis.
|
||||
</p>
|
||||
|
||||
<div className="overflow-x-auto mb-6">
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-900 text-white">
|
||||
<th className="text-left px-4 py-3 font-semibold rounded-tl-lg">Pflichtfeld</th>
|
||||
<th className="text-left px-4 py-3 font-semibold">Rechtsgrundlage</th>
|
||||
<th className="text-left px-4 py-3 font-semibold rounded-tr-lg">Beispiel</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Name und Kontaktdaten des Verantwortlichen</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. a</td>
|
||||
<td className="px-4 py-3 text-gray-600">Musterfirma GmbH, Musterstr. 1, 10115 Berlin</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Name des Datenschutzbeauftragten</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. a</td>
|
||||
<td className="px-4 py-3 text-gray-600">Dr. Maria Muster, dsb@musterfirma.de</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Zwecke der Verarbeitung</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. b</td>
|
||||
<td className="px-4 py-3 text-gray-600">Durchfuehrung des Beschaeftigungsverhaeltnisses</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Kategorien betroffener Personen</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. c</td>
|
||||
<td className="px-4 py-3 text-gray-600">Beschaeftigte, Bewerber, Kunden</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Kategorien personenbezogener Daten</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. c</td>
|
||||
<td className="px-4 py-3 text-gray-600">Stammdaten, Kontaktdaten, Bankverbindung</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Kategorien von Empfaengern</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. d</td>
|
||||
<td className="px-4 py-3 text-gray-600">Finanzbehorden, Sozialversicherungstraeger, Steuerberater</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Uebermittlungen in Drittlaender</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. e</td>
|
||||
<td className="px-4 py-3 text-gray-600">USA (Standardvertragsklauseln), kein Transfer</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium text-gray-800">Loeschfristen</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. f</td>
|
||||
<td className="px-4 py-3 text-gray-600">3 Jahre nach Ende des Beschaeftigungsverhaeltnisses</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium text-gray-800 rounded-bl-lg">Technisch-organisatorische Massnahmen (TOMs)</td>
|
||||
<td className="px-4 py-3 text-gray-600">Art. 30 Abs. 1 lit. g</td>
|
||||
<td className="px-4 py-3 text-gray-600 rounded-br-lg">Verschluesselung, Zugriffskontrolle, Backups</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Legal Reference Box */}
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-800 mb-1">Hinweis: Empfohlene Zusatzangaben</h4>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
Ueber die Pflichtfelder hinaus empfehlen Aufsichtsbehoerden wie die DSK (Datenschutzkonferenz),
|
||||
weitere Felder aufzunehmen: die Rechtsgrundlage der Verarbeitung (Art. 6 Abs. 1 DSGVO),
|
||||
die verantwortliche Fachabteilung, das Datum der letzten Aktualisierung sowie einen
|
||||
Verweis auf eine durchgefuehrte Datenschutz-Folgenabschaetzung (DSFA), falls erforderlich.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 4: Schritt-fuer-Schritt */}
|
||||
<section id="schritt-fuer-schritt">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
4. VVT erstellen – Schritt-fuer-Schritt Anleitung
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-6">
|
||||
Die Erstellung eines VVT wirkt auf den ersten Blick komplex, laesst sich aber in fuenf
|
||||
ueberschaubare Schritte gliedern. Gehen Sie methodisch vor und beziehen Sie alle Fachabteilungen
|
||||
Ihrer Organisation ein.
|
||||
</p>
|
||||
|
||||
{/* Step 1 */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex-shrink-0 w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
1
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">Bestandsaufnahme aller Verarbeitungen</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-3">
|
||||
Erfassen Sie zunaechst alle Prozesse in Ihrer Organisation, bei denen personenbezogene
|
||||
Daten verarbeitet werden. Fuehren Sie Interviews mit den Leitern aller Fachabteilungen:
|
||||
Personalwesen, Vertrieb, Marketing, IT, Finanzbuchhaltung, Kundenservice und Geschaeftsfuehrung.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<span className="font-medium text-gray-800">Praxistipp:</span> Starten Sie mit einer einfachen
|
||||
Frage an jede Abteilung: «Welche personenbezogenen Daten verarbeiten Sie im Tagesgeschaeft und
|
||||
welche Software-Systeme nutzen Sie dafuer?» Erstellen Sie daraus eine Rohliste aller
|
||||
Verarbeitungstaetigkeiten. Vergessen Sie nicht die weniger offensichtlichen Prozesse wie
|
||||
Videoüberwachung, Zugangskontrollsysteme oder die Nutzung von Messenger-Diensten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex-shrink-0 w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
2
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">Verarbeitungen strukturiert dokumentieren</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-3">
|
||||
Ueberfuehren Sie die Rohliste in ein strukturiertes Format. Fuer jede Verarbeitungstaetigkeit
|
||||
erfassen Sie alle Pflichtangaben nach Art. 30 Abs. 1 (siehe Tabelle oben). Verwenden Sie eine
|
||||
einheitliche Vorlage, damit alle Eintraege konsistent und vergleichbar sind.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<span className="font-medium text-gray-800">Praxistipp:</span> Gruppieren Sie die Verarbeitungen
|
||||
nach Fachabteilungen oder Geschaeftsprozessen. Typische Gruppierungen sind: Personalverwaltung,
|
||||
Kundenbeziehungsmanagement, Marketingmassnahmen, IT-Betrieb, Finanzen/Buchhaltung und
|
||||
Kommunikation. Innerhalb jeder Gruppe benennen Sie die konkreten Einzelverarbeitungen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex-shrink-0 w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
3
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">Rechtsgrundlagen und Loeschfristen festlegen</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-3">
|
||||
Bestimmen Sie fuer jede Verarbeitungstaetigkeit die passende Rechtsgrundlage nach Art. 6 Abs. 1
|
||||
DSGVO. Die gaengigsten sind: Einwilligung (lit. a), Vertragserfullung (lit. b), rechtliche
|
||||
Verpflichtung (lit. c) und berechtigtes Interesse (lit. f). Dokumentieren Sie fuer jede Rechtsgrundlage
|
||||
eine konkrete Begruendung.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Legen Sie anschliessend die Loeschfristen fest. Diese ergeben sich aus gesetzlichen
|
||||
Aufbewahrungspflichten (z.B. 6 Jahre fuer Geschaeftsbriefe nach HGB, 10 Jahre fuer Buchungsbelege
|
||||
nach AO) und dem Grundsatz der Speicherbegrenzung (Art. 5 Abs. 1 lit. e DSGVO). Wo keine
|
||||
gesetzliche Aufbewahrungspflicht besteht, sollten Daten nach Zweckerfullung zeitnah geloescht werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 4 */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex-shrink-0 w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
4
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">Technisch-organisatorische Massnahmen (TOMs) zuordnen</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-3">
|
||||
Ordnen Sie jeder Verarbeitungstaetigkeit die relevanten Schutzmassnahmen zu. Die TOMs muessen
|
||||
dem Stand der Technik entsprechen und ein dem Risiko angemessenes Schutzniveau gewaehrleisten
|
||||
(Art. 32 DSGVO). Unterscheiden Sie zwischen technischen Massnahmen (Verschluesselung,
|
||||
Pseudonymisierung, Firewalls, Zugriffskontrollen) und organisatorischen Massnahmen
|
||||
(Schulungen, Vertraulichkeitsvereinbarungen, Vier-Augen-Prinzip, Berechtigungskonzepte).
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<span className="font-medium text-gray-800">Praxistipp:</span> Erstellen Sie ein zentrales
|
||||
TOM-Dokument, auf das Sie im VVT referenzieren koennen. So vermeiden Sie Redundanzen und
|
||||
stellen sicher, dass Aenderungen an den TOMs automatisch fuer alle betroffenen
|
||||
Verarbeitungstaetigkeiten gelten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 5 */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-6 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex-shrink-0 w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
5
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">Regelmaessige Ueberpruefung und Aktualisierung</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-3">
|
||||
Ein VVT ist nur nuetzlich, wenn es aktuell ist. Definieren Sie einen festen Review-Zyklus –
|
||||
mindestens jaehrlich, idealerweise quartalsweise. Legen Sie ausserdem fest, bei welchen Ereignissen
|
||||
eine sofortige Aktualisierung erfolgen muss: Einfuehrung neuer Software, Wechsel von Dienstleistern,
|
||||
organisatorische Umstrukturierungen oder Aenderungen gesetzlicher Rahmenbedingungen.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<span className="font-medium text-gray-800">Praxistipp:</span> Benennen Sie fuer jede
|
||||
Verarbeitungstaetigkeit einen fachlichen Verantwortlichen, der Aenderungen meldet. Verknuepfen
|
||||
Sie das VVT-Review mit bestehenden Prozessen wie dem Aenderungsmanagement (Change Management)
|
||||
oder dem jaehrlichen Audit-Zyklus Ihrer Organisation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 5: Haeufige Fehler */}
|
||||
<section id="haeufige-fehler">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
5. Haeufige Fehler beim VVT – und wie Sie sie vermeiden
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-6">
|
||||
Aus unserer Erfahrung in der Beratung von Schulen und Bildungseinrichtungen sehen wir immer
|
||||
wieder dieselben Stolperfallen. Vermeiden Sie diese vier haeufigen Fehler von Anfang an.
|
||||
</p>
|
||||
|
||||
{/* Mistake 1 */}
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-5 mb-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-amber-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className="font-semibold text-amber-800 mb-1">Fehler 1: VVT nur einmal erstellen und nie aktualisieren</h4>
|
||||
<p className="text-amber-700 text-sm leading-relaxed">
|
||||
Viele Organisationen erstellen ein VVT im Rahmen eines Projekts und legen es dann ab. Doch
|
||||
ein veraltetes VVT ist fast so schlecht wie gar keines – es taeuscht Compliance vor, die nicht
|
||||
existiert. Neue Tools, Dienstleister oder Prozesse werden nicht erfasst, und im Ernstfall
|
||||
stimmt die Dokumentation nicht mit der Realitaet ueberein. Richten Sie automatische
|
||||
Erinnerungen ein und machen Sie das VVT-Review zum festen Bestandteil Ihres Datenschutzkalenders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mistake 2 */}
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-5 mb-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-amber-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className="font-semibold text-amber-800 mb-1">Fehler 2: Zu grobe Granularitaet der Verarbeitungen</h4>
|
||||
<p className="text-amber-700 text-sm leading-relaxed">
|
||||
Ein Eintrag wie «Personalwesen» ist viel zu allgemein. Unterschiedliche Verarbeitungstaetigkeiten
|
||||
innerhalb einer Abteilung haben oft unterschiedliche Rechtsgrundlagen, Loeschfristen und
|
||||
Empfaengerkreise. Trennen Sie zum Beispiel: Bewerbermanagement (Rechtsgrundlage: Art. 6 Abs. 1 lit. b,
|
||||
Loeschfrist: 6 Monate), Lohnabrechnung (Rechtsgrundlage: Art. 6 Abs. 1 lit. c, Loeschfrist: 10 Jahre)
|
||||
und Zeiterfassung (Rechtsgrundlage: Art. 6 Abs. 1 lit. b, Loeschfrist: 2 Jahre).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mistake 3 */}
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-5 mb-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-amber-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className="font-semibold text-amber-800 mb-1">Fehler 3: Drittlandsuebermittlungen uebersehen</h4>
|
||||
<p className="text-amber-700 text-sm leading-relaxed">
|
||||
Cloud-Dienste wie Google Workspace, Microsoft 365 oder Zoom uebermitteln Daten in Drittlaender
|
||||
(insbesondere die USA). Diese Uebermittlungen muessen im VVT dokumentiert und mit geeigneten
|
||||
Garantien abgesichert werden – etwa durch Standardvertragsklauseln (SCCs) oder einen
|
||||
Angemessenheitsbeschluss. Pruefen Sie fuer jeden eingesetzten Dienstleister, wo die Daten
|
||||
tatsaechlich gespeichert und verarbeitet werden, und halten Sie die Ergebnisse im VVT fest.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mistake 4 */}
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-5 mb-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-amber-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className="font-semibold text-amber-800 mb-1">Fehler 4: Fehlende Einbindung der Fachabteilungen</h4>
|
||||
<p className="text-amber-700 text-sm leading-relaxed">
|
||||
Das VVT darf kein reines Datenschutz-Projekt sein. Wenn nur der DSB oder die IT-Abteilung
|
||||
das Verzeichnis pflegt, werden zwangslaeufig Verarbeitungen uebersehen. Jede Fachabteilung
|
||||
kennt ihre eigenen Prozesse am besten und muss aktiv in die Erstellung und Pflege eingebunden
|
||||
werden. Benennen Sie Datenschutzkoordinatoren in jeder Abteilung, die als Ansprechpartner
|
||||
fuer VVT-relevante Aenderungen dienen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 6: VVT-Vorlage */}
|
||||
<section id="vvt-vorlage">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
6. VVT-Vorlage mit Beispieleintraegen
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-6">
|
||||
Die folgende Tabelle zeigt drei beispielhafte Eintraege, wie sie in einem VVT einer
|
||||
Bildungseinrichtung aussehen koennten. Nutzen Sie dieses Format als Ausgangspunkt fuer
|
||||
Ihr eigenes Verzeichnis.
|
||||
</p>
|
||||
|
||||
<div className="overflow-x-auto mb-6">
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-900 text-white">
|
||||
<th className="text-left px-3 py-3 font-semibold rounded-tl-lg whitespace-nowrap">Feld</th>
|
||||
<th className="text-left px-3 py-3 font-semibold whitespace-nowrap">Schueleranmeldung</th>
|
||||
<th className="text-left px-3 py-3 font-semibold whitespace-nowrap">Lohn- und Gehaltsabrechnung</th>
|
||||
<th className="text-left px-3 py-3 font-semibold rounded-tr-lg whitespace-nowrap">Website-Betrieb</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Bezeichnung</td>
|
||||
<td className="px-3 py-3 text-gray-600">Anmeldung und Verwaltung von Schuelerdaten</td>
|
||||
<td className="px-3 py-3 text-gray-600">Abrechnung und Auszahlung von Gehaeltern</td>
|
||||
<td className="px-3 py-3 text-gray-600">Betrieb der oeffentlichen Website</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Verantwortlicher</td>
|
||||
<td className="px-3 py-3 text-gray-600">Musterschule, Schulstr. 5, 30159 Hannover</td>
|
||||
<td className="px-3 py-3 text-gray-600">Musterschule, Schulstr. 5, 30159 Hannover</td>
|
||||
<td className="px-3 py-3 text-gray-600">Musterschule, Schulstr. 5, 30159 Hannover</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Zweck</td>
|
||||
<td className="px-3 py-3 text-gray-600">Erfuellung der Schulpflicht, Verwaltung des Schulverhaeltnisses</td>
|
||||
<td className="px-3 py-3 text-gray-600">Durchfuehrung der Beschaeftigungsverhaeltnisse</td>
|
||||
<td className="px-3 py-3 text-gray-600">Oeffentlichkeitsarbeit, Information der Schulgemeinschaft</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Rechtsgrundlage</td>
|
||||
<td className="px-3 py-3 text-gray-600">Art. 6 Abs. 1 lit. e DSGVO i.V.m. NSchG</td>
|
||||
<td className="px-3 py-3 text-gray-600">Art. 6 Abs. 1 lit. b, c DSGVO i.V.m. EntgFG, SGB IV</td>
|
||||
<td className="px-3 py-3 text-gray-600">Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse)</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Betroffene</td>
|
||||
<td className="px-3 py-3 text-gray-600">Schueler, Erziehungsberechtigte</td>
|
||||
<td className="px-3 py-3 text-gray-600">Lehrkraefte, Verwaltungspersonal</td>
|
||||
<td className="px-3 py-3 text-gray-600">Website-Besucher</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Datenkategorien</td>
|
||||
<td className="px-3 py-3 text-gray-600">Name, Geburtsdatum, Adresse, Noten, Fehlzeiten</td>
|
||||
<td className="px-3 py-3 text-gray-600">Stammdaten, Bankverbindung, Steuer-ID, SV-Nummer</td>
|
||||
<td className="px-3 py-3 text-gray-600">IP-Adresse, Browser-Typ, Zugriffszeitpunkte</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Empfaenger</td>
|
||||
<td className="px-3 py-3 text-gray-600">Schulbehoerde, aufnehmende Schule bei Wechsel</td>
|
||||
<td className="px-3 py-3 text-gray-600">Finanzamt, Krankenkasse, Rentenversicherung</td>
|
||||
<td className="px-3 py-3 text-gray-600">Hosting-Anbieter (AV-Vertrag)</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 bg-gray-50">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Drittlandtransfer</td>
|
||||
<td className="px-3 py-3 text-gray-600">Nein</td>
|
||||
<td className="px-3 py-3 text-gray-600">Nein</td>
|
||||
<td className="px-3 py-3 text-gray-600">Nein (EU-Hosting)</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap">Loeschfrist</td>
|
||||
<td className="px-3 py-3 text-gray-600">5 Jahre nach Verlassen der Schule</td>
|
||||
<td className="px-3 py-3 text-gray-600">10 Jahre (Aufbewahrungspflicht AO)</td>
|
||||
<td className="px-3 py-3 text-gray-600">7 Tage (Serverlogfiles)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-3 py-3 font-medium text-gray-800 whitespace-nowrap rounded-bl-lg">TOMs</td>
|
||||
<td className="px-3 py-3 text-gray-600">Rollenbasierte Zugriffskontrolle, verschluesselte Datenbank, Backup</td>
|
||||
<td className="px-3 py-3 text-gray-600">Verschluesselung, Zugriffsbeschraenkung auf HR, Vier-Augen-Prinzip</td>
|
||||
<td className="px-3 py-3 text-gray-600 rounded-br-lg">TLS-Verschluesselung, automatische Log-Rotation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Tip Box */}
|
||||
<div className="bg-sky-50 border-l-4 border-sky-500 rounded-r-xl p-5 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-sky-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className="font-semibold text-sky-800 mb-1">Tabellenformat vs. Einzeldokumente</h4>
|
||||
<p className="text-sky-700 text-sm leading-relaxed">
|
||||
Fuer kleine Organisationen mit weniger als 20 Verarbeitungen reicht eine Tabellenkalkulation
|
||||
(z.B. LibreOffice Calc) oft aus. Ab einer gewissen Groesse empfiehlt sich jedoch eine
|
||||
spezialisierte Software, die Zusammenhaenge zwischen Verarbeitungen, TOMs und Auftragsverarbeitern
|
||||
automatisch verknuepft und Aenderungen versioniert.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 7: Automatisierung */}
|
||||
<section id="automatisierung">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
|
||||
7. VVT automatisiert verwalten mit BreakPilot Comply
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Die manuelle Pflege eines VVT in Tabellenkalkulationen wird mit wachsender Organisationsgroesse
|
||||
schnell unuebersichtlich und fehleranfaellig. BreakPilot Comply bietet eine digitale Loesung, die
|
||||
speziell fuer Bildungseinrichtungen und KMU im DACH-Raum entwickelt wurde.
|
||||
</p>
|
||||
|
||||
<div className="bg-gradient-to-br from-sky-50 to-fuchsia-50 border border-sky-200 rounded-2xl p-8 mb-6">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-4">
|
||||
So unterstuetzt BreakPilot Comply Ihr VVT
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-sky-500 text-white rounded-full flex items-center justify-center text-sm font-bold mt-0.5">
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-800">Vorgefertigte Vorlagen fuer Bildungseinrichtungen:</span>
|
||||
<span className="text-gray-600"> Starten Sie mit branchenspezifischen Vorlagen, die typische Verarbeitungen
|
||||
wie Schueleranmeldung, Notenverwaltung, Lernplattformen und Kommunikationssysteme bereits enthalten.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-sky-500 text-white rounded-full flex items-center justify-center text-sm font-bold mt-0.5">
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-800">Automatische Verknuepfung mit TOM und DSFA:</span>
|
||||
<span className="text-gray-600"> Technisch-organisatorische Massnahmen und Datenschutz-Folgenabschaetzungen
|
||||
werden direkt mit den relevanten VVT-Eintraegen verknuepft – Aenderungen propagieren automatisch.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-sky-500 text-white rounded-full flex items-center justify-center text-sm font-bold mt-0.5">
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-800">Loeschfristen-Management:</span>
|
||||
<span className="text-gray-600"> Automatische Erinnerungen, wenn Loeschfristen ablaufen. Sie behalten
|
||||
den Ueberblick ueber alle Aufbewahrungsfristen und koennen die Loeschung dokumentiert nachweisen.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-sky-500 text-white rounded-full flex items-center justify-center text-sm font-bold mt-0.5">
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-800">Audit-Trail und Versionierung:</span>
|
||||
<span className="text-gray-600"> Jede Aenderung am VVT wird mit Zeitstempel und Bearbeiter protokolliert.
|
||||
Bei einer Pruefung durch die Aufsichtsbehoerde koennen Sie jederzeit nachweisen, wann welche
|
||||
Anpassung vorgenommen wurde.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-sky-500 text-white rounded-full flex items-center justify-center text-sm font-bold mt-0.5">
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-800">DSGVO-konformes Hosting in Deutschland:</span>
|
||||
<span className="text-gray-600"> Alle Daten werden ausschliesslich auf Servern in Deutschland
|
||||
verarbeitet und gespeichert. Kein Drittlandtransfer, keine US-Cloud-Abhaengigkeit.</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="mt-8 flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
||||
<a
|
||||
href="/kontakt"
|
||||
className="inline-flex items-center px-6 py-3 bg-sky-500 hover:bg-sky-600 text-white font-semibold rounded-xl transition-colors shadow-lg shadow-sky-500/25"
|
||||
>
|
||||
Kostenlose Demo vereinbaren
|
||||
<svg className="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-sm text-gray-500">Unverbindlich – kein Vertrag erforderlich</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Conclusion */}
|
||||
<section className="mt-16 pt-8 border-t border-gray-200">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">Fazit</h2>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Das Verzeichnis von Verarbeitungstaetigkeiten ist weit mehr als eine laestige Pflichtaufgabe –
|
||||
es ist das Fundament Ihres gesamten Datenschutzmanagements. Ein sorgfaeltig gepflegtes VVT
|
||||
verschafft Ihnen Transparenz ueber alle Datenverarbeitungen in Ihrer Organisation, erleichtert
|
||||
die Beantwortung von Betroffenenanfragen und schafft Vertrauen bei Aufsichtsbehoerden.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Beginnen Sie mit der Bestandsaufnahme, dokumentieren Sie systematisch und etablieren Sie
|
||||
einen festen Aktualisierungsrhythmus. Mit den richtigen Werkzeugen und Prozessen wird das
|
||||
VVT vom buerokratischen Aufwand zum echten Mehrwert fuer Ihre Organisation.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Legal Disclaimer */}
|
||||
<div className="mt-12 bg-gray-50 border border-gray-200 rounded-xl p-6">
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
<span className="font-semibold">Hinweis:</span> Dieser Artikel dient der allgemeinen Information und
|
||||
stellt keine Rechtsberatung dar. Die Inhalte wurden mit groesster Sorgfalt erstellt, ersetzen
|
||||
jedoch nicht die individuelle Beratung durch einen Datenschutzbeauftragten oder Rechtsanwalt.
|
||||
Fuer die Richtigkeit, Vollstaendigkeit und Aktualitaet wird keine Gewaehr uebernommen.
|
||||
Stand: Februar 2026.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
396
website/app/blog/glossar/page.tsx
Normal file
396
website/app/blog/glossar/page.tsx
Normal file
@@ -0,0 +1,396 @@
|
||||
import { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Compliance-Glossar | BreakPilot Comply',
|
||||
description: 'Die wichtigsten Begriffe aus DSGVO, AI Act, NIS2 und IT-Compliance verstaendlich erklaert.',
|
||||
}
|
||||
|
||||
const letters = ['A', 'B', 'C', 'D', 'E', 'G', 'H', 'I', 'L', 'N', 'P', 'R', 'T', 'V'] as const
|
||||
|
||||
interface GlossaryTerm {
|
||||
term: string
|
||||
definition: string
|
||||
reference?: string
|
||||
}
|
||||
|
||||
interface GlossarySection {
|
||||
letter: string
|
||||
terms: GlossaryTerm[]
|
||||
}
|
||||
|
||||
const glossary: GlossarySection[] = [
|
||||
{
|
||||
letter: 'A',
|
||||
terms: [
|
||||
{
|
||||
term: 'Auftragsverarbeitung (AVV)',
|
||||
definition:
|
||||
'Die Verarbeitung personenbezogener Daten durch einen Dienstleister (Auftragsverarbeiter) im Auftrag des Verantwortlichen. Zwischen beiden Parteien muss ein Auftragsverarbeitungsvertrag (AVV) geschlossen werden, der die Pflichten des Auftragsverarbeiters verbindlich regelt. Der Verantwortliche bleibt datenschutzrechtlich fuer die Verarbeitung verantwortlich.',
|
||||
reference: 'Art. 28 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'Aufsichtsbehoerde',
|
||||
definition:
|
||||
'Unabhaengige staatliche Stelle, die fuer die Ueberwachung der Einhaltung datenschutzrechtlicher Vorschriften zustaendig ist. In Deutschland gibt es auf Landesebene Datenschutzbehoerden (z.B. BayLDA, LDI NRW) sowie den Bundesbeauftragten fuer den Datenschutz und die Informationsfreiheit (BfDI) auf Bundesebene. Die Aufsichtsbehoerden koennen Verwarnungen aussprechen, Anweisungen erteilen und Bussgelder verhaengen.',
|
||||
reference: 'Art. 51-59 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'Angemessenheitsbeschluss',
|
||||
definition:
|
||||
'Eine Entscheidung der Europaeischen Kommission, dass ein Drittland (ein Land ausserhalb des EWR) ein angemessenes Datenschutzniveau bietet. Liegt ein solcher Beschluss vor, koennen personenbezogene Daten ohne zusaetzliche Schutzgarantien in dieses Land uebermittelt werden. Bekannte Beispiele sind der EU-US Data Privacy Framework und Beschluesse fuer Laender wie Japan, die Schweiz oder das Vereinigte Koenigreich.',
|
||||
reference: 'Art. 45 DSGVO',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'B',
|
||||
terms: [
|
||||
{
|
||||
term: 'Betroffenenrechte',
|
||||
definition:
|
||||
'Die in der DSGVO verankerten Rechte natuerlicher Personen, deren personenbezogene Daten verarbeitet werden. Dazu gehoeren das Recht auf Auskunft, Berichtigung, Loeschung (Recht auf Vergessenwerden), Einschraenkung der Verarbeitung, Datenportabilitaet und Widerspruch. Verantwortliche muessen diese Rechte innerhalb eines Monats nach Eingang des Antrags erfuellen.',
|
||||
reference: 'Art. 12-23 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'BSI (Bundesamt fuer Sicherheit in der Informationstechnik)',
|
||||
definition:
|
||||
'Die zentrale deutsche Bundesbehoerde fuer Cybersicherheit. Das BSI entwickelt Sicherheitsstandards (z.B. IT-Grundschutz), gibt Empfehlungen heraus und ist im Rahmen der NIS2-Umsetzung die zustaendige Behoerde fuer die Aufsicht ueber Betreiber kritischer Infrastrukturen und wesentliche Einrichtungen in Deutschland. Es nimmt auch Meldungen ueber Sicherheitsvorfaelle entgegen.',
|
||||
reference: 'BSIG (BSI-Gesetz)',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'C',
|
||||
terms: [
|
||||
{
|
||||
term: 'Compliance',
|
||||
definition:
|
||||
'Die Gesamtheit aller Massnahmen eines Unternehmens zur Einhaltung geltender Gesetze, Verordnungen, Richtlinien und interner Vorgaben. Im Datenschutz- und IT-Sicherheitskontext umfasst Compliance insbesondere die Einhaltung der DSGVO, des AI Acts, der NIS2-Richtlinie sowie branchenspezifischer Regulierungen. Compliance erfordert sowohl technische als auch organisatorische Massnahmen.',
|
||||
},
|
||||
{
|
||||
term: 'Cookie-Consent',
|
||||
definition:
|
||||
'Die informierte Einwilligung des Nutzers in das Setzen von Cookies und aehnlichen Tracking-Technologien auf dessen Endgeraet. Technisch notwendige Cookies benoetigen keine Einwilligung, waehrend fuer Marketing-, Analyse- und Tracking-Cookies eine vorherige, aktive Zustimmung erforderlich ist. Die Einwilligung muss freiwillig, spezifisch, informiert und eindeutig sein.',
|
||||
reference: 'Art. 5 Abs. 3 ePrivacy-Richtlinie, TTDSG (DE)',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'D',
|
||||
terms: [
|
||||
{
|
||||
term: 'DSFA (Datenschutz-Folgenabschaetzung)',
|
||||
definition:
|
||||
'Eine strukturierte Risikoanalyse, die durchgefuehrt werden muss, wenn eine geplante Datenverarbeitung voraussichtlich ein hohes Risiko fuer die Rechte und Freiheiten natuerlicher Personen mit sich bringt. Die DSFA beschreibt die Verarbeitungsvorgaenge, bewertet die Notwendigkeit und Verhaeltnismaessigkeit und identifiziert Massnahmen zur Risikominderung. Sie ist vor Beginn der Verarbeitung durchzufuehren.',
|
||||
reference: 'Art. 35 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'DSB (Datenschutzbeauftragter)',
|
||||
definition:
|
||||
'Eine Person, die ein Unternehmen oder eine oeffentliche Stelle in Fragen des Datenschutzes beratet und die Einhaltung der DSGVO ueberwacht. In Deutschland ist ein DSB zu benennen, wenn mindestens 20 Personen staendig mit der automatisierten Verarbeitung personenbezogener Daten beschaeftigt sind, oder wenn die Kerntaetigkeit des Unternehmens in der umfangreichen Verarbeitung besonderer Datenkategorien besteht.',
|
||||
reference: 'Art. 37-39 DSGVO, Paragraph 38 BDSG',
|
||||
},
|
||||
{
|
||||
term: 'DSGVO (Datenschutz-Grundverordnung)',
|
||||
definition:
|
||||
'Die seit Mai 2018 geltende europaeische Verordnung (EU 2016/679) zum Schutz natuerlicher Personen bei der Verarbeitung personenbezogener Daten. Die DSGVO harmonisiert das Datenschutzrecht in der EU und gilt unmittelbar in allen Mitgliedstaaten. Sie regelt unter anderem die Grundsaetze der Verarbeitung, Betroffenenrechte, Pflichten der Verantwortlichen und Bussgelder bei Verstoessen.',
|
||||
reference: 'Verordnung (EU) 2016/679',
|
||||
},
|
||||
{
|
||||
term: 'Datenpanne',
|
||||
definition:
|
||||
'Eine Verletzung des Schutzes personenbezogener Daten, die zur unbeabsichtigten oder unrechtmaessigen Vernichtung, zum Verlust, zur Veraenderung oder zur unbefugten Offenlegung bzw. zum unbefugten Zugang zu personenbezogenen Daten fuehrt. Datenpannen muessen innerhalb von 72 Stunden an die zustaendige Aufsichtsbehoerde gemeldet werden, sofern ein Risiko fuer die Rechte und Freiheiten der betroffenen Personen besteht.',
|
||||
reference: 'Art. 33-34 DSGVO',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'E',
|
||||
terms: [
|
||||
{
|
||||
term: 'Einwilligung',
|
||||
definition:
|
||||
'Eine der Rechtsgrundlagen fuer die Verarbeitung personenbezogener Daten. Die Einwilligung muss freiwillig, fuer den bestimmten Fall, informiert und in Form einer eindeutigen bestaetigen Handlung erteilt werden. Sie kann jederzeit widerrufen werden, wobei die Rechtmaessigkeit der bis zum Widerruf erfolgten Verarbeitung unberuehrt bleibt. Fuer besondere Datenkategorien ist eine ausdrueckliche Einwilligung erforderlich.',
|
||||
reference: 'Art. 6 Abs. 1 lit. a, Art. 7 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'Empfaenger',
|
||||
definition:
|
||||
'Jede natuerliche oder juristische Person, Behoerde, Einrichtung oder andere Stelle, der personenbezogene Daten offengelegt werden. Dazu zaehlen auch Auftragsverarbeiter. Behoerden, die im Rahmen eines bestimmten Untersuchungsauftrags Daten erhalten, gelten nicht als Empfaenger. Die Information ueber Empfaenger gehoert zu den Pflichtangaben in der Datenschutzerklaerung.',
|
||||
reference: 'Art. 4 Nr. 9 DSGVO',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'G',
|
||||
terms: [
|
||||
{
|
||||
term: 'GPAI (General Purpose AI)',
|
||||
definition:
|
||||
'KI-Systeme fuer allgemeine Zwecke, die ein breites Spektrum an Aufgaben erfuellen koennen, fuer die sie nicht speziell entwickelt wurden. Der EU AI Act sieht spezielle Vorschriften fuer GPAI-Modelle vor, darunter Transparenzpflichten (z.B. Dokumentation der Trainingsdaten), Urheberrechtskonformitaet und bei systemischen Risiken erweiterte Pflichten wie Red-Teaming und Modellbewertungen. Prominente Beispiele sind GPT-4, Claude oder Gemini.',
|
||||
reference: 'AI Act Kapitel V, Art. 52a-52c',
|
||||
},
|
||||
{
|
||||
term: 'Grundsaetze der Verarbeitung',
|
||||
definition:
|
||||
'Die in Art. 5 DSGVO definierten fundamentalen Prinzipien fuer die Verarbeitung personenbezogener Daten: Rechtmaessigkeit, Verarbeitung nach Treu und Glauben, Transparenz, Zweckbindung, Datenminimierung, Richtigkeit, Speicherbegrenzung, Integritaet und Vertraulichkeit sowie Rechenschaftspflicht. Jede Verarbeitung muss diesen Grundsaetzen genuegen.',
|
||||
reference: 'Art. 5 DSGVO',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'H',
|
||||
terms: [
|
||||
{
|
||||
term: 'Hochrisiko-KI',
|
||||
definition:
|
||||
'KI-Systeme, die im Rahmen des EU AI Acts als hochriskant eingestuft werden, weil sie erhebliche Auswirkungen auf Grundrechte haben koennen. Dazu gehoeren KI-Systeme im Bildungsbereich (z.B. Pruefungsbewertung, Zugang zu Bildungseinrichtungen), in der Personalverwaltung, bei der Kreditwuerdigkeitspruefung und in der Strafverfolgung. Fuer Hochrisiko-KI gelten strenge Anforderungen an Risikomanagement, Datenqualitaet, Transparenz und menschliche Aufsicht.',
|
||||
reference: 'AI Act Anhang III, Art. 6-15',
|
||||
},
|
||||
{
|
||||
term: 'Hinweisgeberschutzgesetz (HinSchG)',
|
||||
definition:
|
||||
'Das deutsche Gesetz zur Umsetzung der EU-Whistleblower-Richtlinie (2019/1937). Es schuetzt Personen, die Verstoesse gegen bestimmte Rechtsvorschriften melden, vor Repressalien. Unternehmen mit 50 oder mehr Beschaeftigten muessen interne Meldekanale einrichten, ueber die Hinweisgeber Missstaende vertraulich melden koennen. Im Compliance-Kontext ist das HinSchG wichtig, weil Datenschutzverstoesse und IT-Sicherheitsvorfaelle zu den meldewuerdigen Verstoessen zaehlen.',
|
||||
reference: 'HinSchG (Hinweisgeberschutzgesetz), EU-RL 2019/1937',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'I',
|
||||
terms: [
|
||||
{
|
||||
term: 'ISMS (Information Security Management System)',
|
||||
definition:
|
||||
'Ein systematischer Ansatz zum Management von Informationssicherheit in einer Organisation. Ein ISMS umfasst Richtlinien, Prozesse, Verfahren und Technologien zur Identifizierung, Bewertung und Behandlung von Informationssicherheitsrisiken. Der international anerkannte Standard hierfuer ist ISO/IEC 27001. Im Kontext der NIS2-Richtlinie bildet ein ISMS haeufig die Grundlage fuer die Erfuellung der Cybersicherheitsanforderungen.',
|
||||
reference: 'ISO/IEC 27001, NIS2 Art. 21',
|
||||
},
|
||||
{
|
||||
term: 'Incident (Sicherheitsvorfall)',
|
||||
definition:
|
||||
'Ein Ereignis, das die Vertraulichkeit, Integritaet oder Verfuegbarkeit von Informationssystemen oder Daten beeintraechtigt oder beeintraechtigen kann. Im Rahmen der NIS2-Richtlinie muessen erhebliche Sicherheitsvorfaelle innerhalb von 24 Stunden (Fruehwarnung), 72 Stunden (detaillierte Meldung) und einem Monat (Abschlussbericht) an die zustaendige Behoerde gemeldet werden.',
|
||||
reference: 'NIS2 Art. 23, Art. 33 DSGVO (Datenpannen)',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'L',
|
||||
terms: [
|
||||
{
|
||||
term: 'Loeschkonzept',
|
||||
definition:
|
||||
'Ein dokumentiertes Verfahren, das festlegt, wann und wie personenbezogene Daten geloescht oder anonymisiert werden. Das Loeschkonzept orientiert sich am Grundsatz der Speicherbegrenzung und definiert fuer jede Datenkategorie konkrete Aufbewahrungsfristen und Loeschroutinen. Es beruecksichtigt dabei auch gesetzliche Aufbewahrungspflichten (z.B. handels- und steuerrechtliche Fristen).',
|
||||
reference: 'Art. 5 Abs. 1 lit. e, Art. 17 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'Loeschfrist',
|
||||
definition:
|
||||
'Der definierte Zeitraum, nach dem personenbezogene Daten geloescht oder anonymisiert werden muessen, sobald der Verarbeitungszweck entfallen ist und keine gesetzlichen Aufbewahrungspflichten entgegenstehen. Typische Loeschfristen sind z.B. 3 Jahre fuer Vertragsdaten nach Vertragsende, 6 Jahre fuer Handelsbriefe oder 10 Jahre fuer Buchungsbelege.',
|
||||
reference: 'Art. 5 Abs. 1 lit. e DSGVO, Paragraph 257 HGB, Paragraph 147 AO',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'N',
|
||||
terms: [
|
||||
{
|
||||
term: 'NIS2 (Network and Information Security Directive 2)',
|
||||
definition:
|
||||
'Die EU-Richtlinie 2022/2555 ueber Massnahmen fuer ein hohes gemeinsames Cybersicherheitsniveau in der Union. NIS2 erweitert den Anwendungsbereich der urspruenglichen NIS-Richtlinie erheblich und erfasst nun 18 Sektoren. Sie definiert Mindestanforderungen an das Cybersicherheits-Risikomanagement, Meldepflichten fuer Vorfaelle und Sanktionen. Die nationale Umsetzung erfolgt in Deutschland durch das NIS2UmsuCG.',
|
||||
reference: 'EU-Richtlinie 2022/2555',
|
||||
},
|
||||
{
|
||||
term: 'Notfallplan (Incident Response Plan)',
|
||||
definition:
|
||||
'Ein dokumentierter Plan, der die Vorgehensweise bei Sicherheitsvorfaellen oder IT-Notfaellen beschreibt. Er umfasst Erkennungsmechanismen, Eskalationswege, Kommunikationsplaene, Eindaemmungsmassnahmen und Wiederherstellungsverfahren. Im Rahmen von NIS2 und DSGVO ist ein funktionierender Notfallplan essenziell, um Meldepflichten einzuhalten und Schaeden zu minimieren.',
|
||||
reference: 'NIS2 Art. 21 Abs. 2 lit. b und c',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'P',
|
||||
terms: [
|
||||
{
|
||||
term: 'Privacy by Design',
|
||||
definition:
|
||||
'Der Grundsatz, dass der Schutz personenbezogener Daten bereits bei der Konzeption und Entwicklung von Systemen, Produkten und Dienstleistungen beruecksichtigt werden muss. Datenschutzfreundliche Voreinstellungen (Privacy by Default) gehoeren ebenfalls dazu. In der Praxis bedeutet dies, dass z.B. bei der Softwareentwicklung nur die fuer den jeweiligen Zweck erforderlichen Daten erhoben und verarbeitet werden.',
|
||||
reference: 'Art. 25 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'PII (Personally Identifiable Information)',
|
||||
definition:
|
||||
'Ein vorwiegend im angloamerikanischen Raum verwendeter Begriff fuer Informationen, die eine natuerliche Person direkt oder indirekt identifizieren koennen. Beispiele sind Name, E-Mail-Adresse, Sozialversicherungsnummer, IP-Adresse oder biometrische Daten. Im EU-Kontext entspricht der Begriff weitgehend den personenbezogenen Daten im Sinne der DSGVO.',
|
||||
reference: 'Vgl. Art. 4 Nr. 1 DSGVO (personenbezogene Daten)',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'R',
|
||||
terms: [
|
||||
{
|
||||
term: 'Risikobewertung',
|
||||
definition:
|
||||
'Die systematische Identifizierung, Analyse und Bewertung von Risiken fuer die Sicherheit personenbezogener Daten bzw. von Informationssystemen. Im Datenschutzkontext ist die Risikobewertung Grundlage fuer die Auswahl angemessener technischer und organisatorischer Massnahmen. Im NIS2-Kontext bildet sie den Ausgangspunkt fuer das gesamte Cybersicherheits-Risikomanagement.',
|
||||
reference: 'Art. 32 DSGVO, NIS2 Art. 21 Abs. 2 lit. a',
|
||||
},
|
||||
{
|
||||
term: 'Rechenschaftspflicht (Accountability)',
|
||||
definition:
|
||||
'Die Pflicht des Verantwortlichen, die Einhaltung aller Datenschutzgrundsaetze nicht nur sicherzustellen, sondern auch nachweisen zu koennen. Dies erfordert eine umfassende Dokumentation aller Verarbeitungstaetigkeiten, Sicherheitsmassnahmen, Einwilligungen und Datenschutz-Folgenabschaetzungen. Die Rechenschaftspflicht kehrt die Beweislast um: Der Verantwortliche muss belegen, dass er datenschutzkonform handelt.',
|
||||
reference: 'Art. 5 Abs. 2 DSGVO',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'T',
|
||||
terms: [
|
||||
{
|
||||
term: 'TOM (Technische und Organisatorische Massnahmen)',
|
||||
definition:
|
||||
'Massnahmen, die Verantwortliche und Auftragsverarbeiter ergreifen muessen, um ein dem Risiko angemessenes Schutzniveau fuer personenbezogene Daten zu gewaehrleisten. Technische Massnahmen umfassen z.B. Verschluesselung, Zugriffskontrollen, Firewalls und Pseudonymisierung. Organisatorische Massnahmen beinhalten z.B. Schulungen, Richtlinien, Zugangsberechtigungskonzepte und regelmaessige Audits. Die TOM muessen dokumentiert und regelmaessig ueberprueft werden.',
|
||||
reference: 'Art. 32 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'Transparenzpflicht',
|
||||
definition:
|
||||
'Die Verpflichtung des Verantwortlichen, betroffene Personen in praeziser, transparenter, verstaendlicher und leicht zugaenglicher Form ueber die Verarbeitung ihrer personenbezogenen Daten zu informieren. Im KI-Kontext verlangt der AI Act zusaetzliche Transparenz: Nutzer muessen informiert werden, wenn sie mit einem KI-System interagieren, und bei Hochrisiko-KI-Systemen muessen ausfuehrliche Informationen zur Funktionsweise bereitgestellt werden.',
|
||||
reference: 'Art. 12-14 DSGVO, AI Act Art. 52',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'V',
|
||||
terms: [
|
||||
{
|
||||
term: 'VVT (Verarbeitungsverzeichnis / Verzeichnis von Verarbeitungstaetigkeiten)',
|
||||
definition:
|
||||
'Ein zentrales Dokumentationsinstrument der DSGVO, in dem alle Verarbeitungstaetigkeiten des Verantwortlichen systematisch erfasst werden. Das VVT muss unter anderem die Zwecke der Verarbeitung, die Kategorien betroffener Personen und personenbezogener Daten, Empfaenger, Uebermittlungen in Drittlaender, vorgesehene Loeschfristen und technisch-organisatorische Massnahmen dokumentieren. Es muss der Aufsichtsbehoerde auf Anfrage vorgelegt werden koennen.',
|
||||
reference: 'Art. 30 DSGVO',
|
||||
},
|
||||
{
|
||||
term: 'Verantwortlicher',
|
||||
definition:
|
||||
'Die natuerliche oder juristische Person, Behoerde, Einrichtung oder andere Stelle, die allein oder gemeinsam mit anderen ueber die Zwecke und Mittel der Verarbeitung personenbezogener Daten entscheidet. Der Verantwortliche traegt die Hauptverantwortung fuer die Einhaltung der DSGVO und muss dies gegenueber der Aufsichtsbehoerde nachweisen koennen. Bei gemeinsamer Verantwortlichkeit muss eine Vereinbarung ueber die jeweiligen Pflichten getroffen werden.',
|
||||
reference: 'Art. 4 Nr. 7, Art. 26 DSGVO',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default function GlossarPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero */}
|
||||
<section className="pt-12 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-accent-100 text-accent-700 rounded-full text-sm font-medium mb-6">
|
||||
DSGVO · AI Act · NIS2
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
|
||||
Compliance-Glossar
|
||||
</h1>
|
||||
<p className="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">
|
||||
Die wichtigsten Begriffe aus Datenschutz, KI-Regulierung, Cybersicherheit und IT-Compliance – verstaendlich erklaert.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Alphabet Navigation */}
|
||||
<section className="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-100 sticky top-16 bg-white/90 backdrop-blur-md z-40">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<nav className="flex flex-wrap justify-center gap-2">
|
||||
{letters.map((letter) => (
|
||||
<a
|
||||
key={letter}
|
||||
href={`#letter-${letter}`}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg text-sm font-bold text-primary-600 hover:bg-primary-50 hover:text-primary-800 transition-all"
|
||||
>
|
||||
{letter}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Glossary Content */}
|
||||
<article className="py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="space-y-12">
|
||||
{glossary.map((section) => (
|
||||
<section key={section.letter} id={`letter-${section.letter}`}>
|
||||
{/* Letter Header */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-2xl flex items-center justify-center">
|
||||
<span className="text-2xl font-bold text-white">{section.letter}</span>
|
||||
</div>
|
||||
<div className="flex-1 h-px bg-slate-200" />
|
||||
</div>
|
||||
|
||||
{/* Terms */}
|
||||
<div className="space-y-4">
|
||||
{section.terms.map((entry) => (
|
||||
<div
|
||||
key={entry.term}
|
||||
className="bg-slate-50 rounded-xl p-6 border border-slate-100 hover:border-primary-200 hover:shadow-sm transition-all"
|
||||
>
|
||||
<h3 className="text-lg font-bold text-slate-900 mb-2">
|
||||
{entry.term}
|
||||
</h3>
|
||||
<p className="text-slate-600 leading-relaxed text-sm">
|
||||
{entry.definition}
|
||||
</p>
|
||||
{entry.reference && (
|
||||
<p className="mt-3 text-xs italic text-slate-400">
|
||||
Rechtsgrundlage: {entry.reference}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 to-accent-50">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||
Compliance strukturiert umsetzen
|
||||
</h2>
|
||||
<p className="text-slate-600 mb-8 max-w-xl mx-auto">
|
||||
BreakPilot Comply hilft Ihnen, die Anforderungen aus DSGVO, AI Act und NIS2 mit strukturierten Workflows und automatisierter Dokumentation umzusetzen.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/blog/nis2-checkliste"
|
||||
className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-primary-600 text-white font-medium hover:bg-primary-700 transition-all"
|
||||
>
|
||||
NIS2-Checkliste lesen
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-white text-slate-700 font-medium hover:bg-slate-100 transition-all border border-slate-200"
|
||||
>
|
||||
Alle Artikel
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Back to Blog */}
|
||||
<section className="py-8 px-4 sm:px-6 lg:px-8 border-t border-slate-100">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<Link href="/blog" className="inline-flex items-center gap-2 text-primary-600 hover:text-primary-800 transition-colors text-sm font-medium">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Zurueck zum Blog
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
73
website/app/blog/layout.tsx
Normal file
73
website/app/blog/layout.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import Link from 'next/link'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Ressourcen-Hub | BreakPilot Comply',
|
||||
description:
|
||||
'Praxisleitfaeden, Checklisten und Glossar zu DSGVO, AI Act und NIS2 — fuer Unternehmen, die Compliance ernst nehmen.',
|
||||
openGraph: {
|
||||
title: 'Compliance Ressourcen-Hub | BreakPilot Comply',
|
||||
description:
|
||||
'Praxisleitfaeden, Checklisten und Glossar zu DSGVO, AI Act und NIS2.',
|
||||
locale: 'de_DE',
|
||||
type: 'website',
|
||||
},
|
||||
}
|
||||
|
||||
export default function BlogLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Blog Header */}
|
||||
<header className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo + Subtitle */}
|
||||
<Link href="/" className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">B</span>
|
||||
</div>
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<span className="font-semibold text-xl text-slate-900">
|
||||
BreakPilot Comply
|
||||
</span>
|
||||
<span className="hidden sm:inline text-sm text-slate-400 font-medium">
|
||||
Ressourcen-Hub
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Back to Home */}
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center space-x-1.5 text-sm text-slate-500 hover:text-primary-600 transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
<span>Zur Startseite</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
552
website/app/blog/nis2-checkliste/page.tsx
Normal file
552
website/app/blog/nis2-checkliste/page.tsx
Normal file
@@ -0,0 +1,552 @@
|
||||
import { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'NIS2-Richtlinie Checkliste | BreakPilot Comply',
|
||||
description: 'Pruefen Sie mit unserer Checkliste, ob und wie Ihr Unternehmen von der NIS2-Richtlinie betroffen ist.',
|
||||
}
|
||||
|
||||
export default function NIS2ChecklistePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero */}
|
||||
<section className="pt-12 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
|
||||
EU-Richtlinie 2022/2555
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
|
||||
NIS2-Richtlinie Checkliste
|
||||
</h1>
|
||||
<p className="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">
|
||||
Pruefen Sie mit unserer Checkliste, ob und wie Ihr Unternehmen von der NIS2-Richtlinie betroffen ist – und welche Massnahmen Sie umsetzen muessen.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table of Contents */}
|
||||
<section className="py-8 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-2xl p-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4">Inhalt</h2>
|
||||
<nav className="space-y-2 text-sm">
|
||||
<a href="#was-ist-nis2" className="block text-primary-600 hover:text-primary-800 transition-colors">1. Was ist die NIS2-Richtlinie?</a>
|
||||
<a href="#wer-ist-betroffen" className="block text-primary-600 hover:text-primary-800 transition-colors">2. Wer ist betroffen?</a>
|
||||
<a href="#schwellenwerte" className="block text-primary-600 hover:text-primary-800 transition-colors">3. Schwellenwerte</a>
|
||||
<a href="#mindestanforderungen" className="block text-primary-600 hover:text-primary-800 transition-colors">4. Die 10 Mindestanforderungen</a>
|
||||
<a href="#meldepflichten" className="block text-primary-600 hover:text-primary-800 transition-colors">5. Meldepflichten</a>
|
||||
<a href="#strafen" className="block text-primary-600 hover:text-primary-800 transition-colors">6. Strafen und Bussgelder</a>
|
||||
<a href="#checkliste" className="block text-primary-600 hover:text-primary-800 transition-colors">7. Checkliste: In 5 Schritten NIS2-konform</a>
|
||||
<a href="#breakpilot-comply" className="block text-primary-600 hover:text-primary-800 transition-colors">8. BreakPilot Comply und NIS2</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Article Content */}
|
||||
<article className="py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
|
||||
{/* Section 1 */}
|
||||
<section id="was-ist-nis2" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
1. Was ist die NIS2-Richtlinie?
|
||||
</h2>
|
||||
<div className="prose prose-slate max-w-none space-y-4">
|
||||
<p className="text-lg text-slate-600 leading-relaxed">
|
||||
Die <strong className="text-slate-900">NIS2-Richtlinie</strong> (Network and Information Security Directive 2, EU 2022/2555) ist die ueberarbeitete EU-Richtlinie fuer Cybersicherheit. Sie loest die urspruengliche NIS-Richtlinie von 2016 ab und erweitert deren Anwendungsbereich erheblich.
|
||||
</p>
|
||||
<p className="text-lg text-slate-600 leading-relaxed">
|
||||
Ziel der NIS2 ist es, ein einheitlich hohes Cybersicherheitsniveau in allen EU-Mitgliedstaaten sicherzustellen. Die Richtlinie verpflichtet Unternehmen und Einrichtungen in kritischen und wichtigen Sektoren, angemessene Sicherheitsmassnahmen zu ergreifen und Sicherheitsvorfaelle zu melden.
|
||||
</p>
|
||||
<p className="text-lg text-slate-600 leading-relaxed">
|
||||
In Deutschland wird die NIS2-Richtlinie durch das <strong className="text-slate-900">NIS2-Umsetzungs- und Cybersicherheitsstaerkungsgesetz (NIS2UmsuCG)</strong> in nationales Recht umgesetzt. Dieses Gesetz aendert unter anderem das BSI-Gesetz (BSIG) und fuehrt neue Pflichten fuer Unternehmen ein. Die nationale Umsetzung haette bis Oktober 2024 erfolgen sollen; in Deutschland befindet sich das Gesetz Stand 2025 noch im Gesetzgebungsverfahren.
|
||||
</p>
|
||||
<div className="bg-primary-50 border border-primary-200 rounded-xl p-5 mt-6">
|
||||
<p className="text-primary-800 font-medium">
|
||||
Wichtig: Auch wenn das deutsche Umsetzungsgesetz noch nicht in Kraft getreten ist, sollten Unternehmen bereits jetzt mit der Vorbereitung beginnen. Die Anforderungen der EU-Richtlinie sind klar definiert und die Umsetzungsfristen laufen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2 */}
|
||||
<section id="wer-ist-betroffen" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
2. Wer ist betroffen?
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
<p className="text-lg text-slate-600 leading-relaxed">
|
||||
Die NIS2-Richtlinie unterscheidet zwei Kategorien von Einrichtungen, die jeweils unterschiedlichen Pflichten und Sanktionsrahmen unterliegen:
|
||||
</p>
|
||||
|
||||
{/* Wesentliche Einrichtungen */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div className="bg-primary-600 text-white px-6 py-3">
|
||||
<h3 className="text-lg font-semibold">Wesentliche Einrichtungen (Essential Entities)</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-slate-600 mb-4">
|
||||
Unternehmen in Sektoren mit hoher Kritikalitaet nach Anhang I der Richtlinie:
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
{[
|
||||
'Energie (Strom, Gas, Oel, Fernwaerme, Wasserstoff)',
|
||||
'Verkehr (Luft, Schiene, Wasser, Strasse)',
|
||||
'Bankwesen',
|
||||
'Finanzmarktinfrastrukturen',
|
||||
'Gesundheitswesen',
|
||||
'Trinkwasserversorgung',
|
||||
'Abwasserentsorgung',
|
||||
'Digitale Infrastruktur (DNS, TLD, Cloud, RZ)',
|
||||
'ICT-Service-Management (B2B)',
|
||||
'Oeffentliche Verwaltung',
|
||||
'Weltraum',
|
||||
].map((sector) => (
|
||||
<div key={sector} className="flex items-start gap-2">
|
||||
<span className="text-primary-500 mt-1 flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-sm text-slate-700">{sector}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wichtige Einrichtungen */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div className="bg-accent-600 text-white px-6 py-3">
|
||||
<h3 className="text-lg font-semibold">Wichtige Einrichtungen (Important Entities)</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-slate-600 mb-4">
|
||||
Unternehmen in weiteren kritischen Sektoren nach Anhang II:
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
{[
|
||||
'Post- und Kurierdienste',
|
||||
'Abfallwirtschaft',
|
||||
'Chemische Industrie',
|
||||
'Lebensmittelproduktion und -vertrieb',
|
||||
'Verarbeitendes Gewerbe (Medizinprodukte, Elektronik, Maschinenbau, Kfz)',
|
||||
'Digitale Dienste (Marktplaetze, Suchmaschinen, soziale Netzwerke)',
|
||||
'Forschungseinrichtungen',
|
||||
].map((sector) => (
|
||||
<div key={sector} className="flex items-start gap-2">
|
||||
<span className="text-accent-500 mt-1 flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-sm text-slate-700">{sector}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3 */}
|
||||
<section id="schwellenwerte" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
3. Schwellenwerte
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 leading-relaxed mb-6">
|
||||
Ob ein Unternehmen unter die NIS2-Richtlinie faellt, haengt neben der Sektorzugehoerigkeit auch von der Unternehmensgroesse ab. Die Richtlinie nutzt die EU-KMU-Definition:
|
||||
</p>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-100">
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Kategorie</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Mitarbeiter</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Jahresumsatz</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Einstufung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="bg-primary-50">
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200 font-medium">Grossunternehmen</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">≥ 250</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">> 50 Mio. EUR</td>
|
||||
<td className="px-4 py-3 text-sm border border-slate-200">
|
||||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
|
||||
Wesentlich (Anhang I) / Wichtig (Anhang II)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200 font-medium">Mittleres Unternehmen</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">50–249</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">10–50 Mio. EUR</td>
|
||||
<td className="px-4 py-3 text-sm border border-slate-200">
|
||||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-accent-100 text-accent-800">
|
||||
Wichtig (beide Anhaenge)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-slate-50">
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200 font-medium">Kleinunternehmen</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">< 50</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">< 10 Mio. EUR</td>
|
||||
<td className="px-4 py-3 text-sm border border-slate-200">
|
||||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
|
||||
Grundsaetzlich nicht betroffen*
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-3">
|
||||
* Ausnahmen: Bestimmte Einrichtungen wie DNS-Diensteanbieter, TLD-Registrierungsstellen, qualifizierte Vertrauensdiensteanbieter und Betreiber oeffentlicher Kommunikationsnetze fallen unabhaengig von ihrer Groesse unter die NIS2-Richtlinie.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Section 4 */}
|
||||
<section id="mindestanforderungen" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
4. Die 10 Mindestanforderungen
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 leading-relaxed mb-8">
|
||||
Artikel 21 der NIS2-Richtlinie definiert zehn Mindestmassnahmen, die betroffene Einrichtungen umsetzen muessen. Diese bilden das Fundament eines angemessenen Cybersicherheitsniveaus:
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
num: 1,
|
||||
title: 'Risikoanalyse und Sicherheitskonzepte',
|
||||
desc: 'Erstellung und Pflege von Konzepten fuer die Risikoanalyse und Sicherheit von Informationssystemen. Dazu gehoert eine systematische Bewertung von Bedrohungen, Schwachstellen und deren potenziellen Auswirkungen.',
|
||||
},
|
||||
{
|
||||
num: 2,
|
||||
title: 'Bewertung von Sicherheitsvorfaellen (Incident Handling)',
|
||||
desc: 'Etablierung von Prozessen zur Erkennung, Analyse, Eindaemmung und Behebung von Sicherheitsvorfaellen. Dazu gehoert auch ein klar definierter Eskalationsprozess.',
|
||||
},
|
||||
{
|
||||
num: 3,
|
||||
title: 'Business Continuity und Krisenmanagement',
|
||||
desc: 'Sicherstellung der Geschaeftskontinuitaet durch Backup-Management, Disaster Recovery, Notfallplaene und Krisenmanagement-Verfahren.',
|
||||
},
|
||||
{
|
||||
num: 4,
|
||||
title: 'Sicherheit in der Lieferkette',
|
||||
desc: 'Bewertung und Management von Cybersicherheitsrisiken in der gesamten Lieferkette, einschliesslich der Beziehungen zu direkten Lieferanten und Dienstleistern.',
|
||||
},
|
||||
{
|
||||
num: 5,
|
||||
title: 'Sicherheit bei Erwerb, Entwicklung und Wartung von IT-Systemen',
|
||||
desc: 'Integration von Sicherheitsanforderungen in den gesamten Lebenszyklus von Netzwerk- und Informationssystemen, einschliesslich des Umgangs mit Schwachstellen.',
|
||||
},
|
||||
{
|
||||
num: 6,
|
||||
title: 'Management von Schwachstellen (Vulnerability Management)',
|
||||
desc: 'Konzepte und Verfahren zur Bewertung der Wirksamkeit von Risikomanagement-Massnahmen. Regelmaessige Schwachstellen-Scans und Patch-Management gehoeren dazu.',
|
||||
},
|
||||
{
|
||||
num: 7,
|
||||
title: 'Bewertung der Wirksamkeit von Sicherheitsmassnahmen',
|
||||
desc: 'Regelmaessige Ueberpruefung und Bewertung der implementierten Cybersicherheitsmassnahmen, z.B. durch Audits, Penetrationstests oder Tabletop-Uebungen.',
|
||||
},
|
||||
{
|
||||
num: 8,
|
||||
title: 'Kryptographie und Verschluesselung',
|
||||
desc: 'Konzepte und Verfahren fuer den Einsatz von Kryptographie und gegebenenfalls Verschluesselung zum Schutz von Daten bei der Uebertragung und Speicherung.',
|
||||
},
|
||||
{
|
||||
num: 9,
|
||||
title: 'Personalsicherheit und Schulungen',
|
||||
desc: 'Sicherheit des Personals, Zugriffskontrollkonzepte und Management von Anlagenwerten. Dazu gehoeren regelmaessige Cybersicherheitsschulungen fuer alle Mitarbeiter und insbesondere fuer die Geschaeftsleitung.',
|
||||
},
|
||||
{
|
||||
num: 10,
|
||||
title: 'Multi-Faktor-Authentifizierung und Zugangskontrolle',
|
||||
desc: 'Verwendung von Multi-Faktor-Authentifizierung (MFA), gesicherten Kommunikationsloesungen und ggf. gesicherten Notfallkommunikationssystemen.',
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.num} className="flex gap-4 bg-white rounded-xl p-5 border border-slate-200 hover:border-primary-200 hover:shadow-md transition-all">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-sm">
|
||||
{item.num}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-1">{item.title}</h3>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 5 */}
|
||||
<section id="meldepflichten" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
5. Meldepflichten
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 leading-relaxed mb-8">
|
||||
Bei erheblichen Sicherheitsvorfaellen muessen betroffene Einrichtungen einen gestuften Meldeprozess einhalten. Die Meldungen gehen in Deutschland an das BSI (Bundesamt fuer Sicherheit in der Informationstechnik):
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
time: '24 Stunden',
|
||||
title: 'Fruehwarnung',
|
||||
desc: 'Innerhalb von 24 Stunden nach Kenntnisnahme eines erheblichen Sicherheitsvorfalls muss eine Fruehwarnung an die zustaendige Behoerde (BSI) erfolgen. Diese soll angeben, ob der Vorfall vermutlich auf rechtswidriges oder boesartiges Handeln zurueckzufuehren ist und ob grenzueberschreitende Auswirkungen moeglich sind.',
|
||||
color: 'bg-red-50 border-red-200',
|
||||
badge: 'bg-red-100 text-red-800',
|
||||
},
|
||||
{
|
||||
time: '72 Stunden',
|
||||
title: 'Meldung des Vorfalls',
|
||||
desc: 'Innerhalb von 72 Stunden muss eine ausfuehrliche Meldung des Vorfalls erfolgen. Diese aktualisiert die Fruehwarnung und enthaelt eine erste Bewertung des Vorfalls, einschliesslich Schweregrad, Auswirkungen sowie gegebenenfalls Indikatoren fuer eine Kompromittierung (IoCs).',
|
||||
color: 'bg-amber-50 border-amber-200',
|
||||
badge: 'bg-amber-100 text-amber-800',
|
||||
},
|
||||
{
|
||||
time: '1 Monat',
|
||||
title: 'Abschlussbericht',
|
||||
desc: 'Spaetestens einen Monat nach Einreichung der Vorfallsmeldung ist ein Abschlussbericht vorzulegen. Dieser enthaelt eine ausfuehrliche Beschreibung des Vorfalls einschliesslich Schweregrad und Auswirkungen, die Art der Bedrohung, Grundursachen, ergriffene und laufende Abhilfemassnahmen sowie ggf. grenzueberschreitende Auswirkungen.',
|
||||
color: 'bg-green-50 border-green-200',
|
||||
badge: 'bg-green-100 text-green-800',
|
||||
},
|
||||
].map((step) => (
|
||||
<div key={step.time} className={`rounded-xl p-6 border ${step.color}`}>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className={`inline-flex px-3 py-1 rounded-full text-sm font-bold ${step.badge}`}>
|
||||
{step.time}
|
||||
</span>
|
||||
<h3 className="text-lg font-semibold text-slate-900">{step.title}</h3>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{step.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 6 */}
|
||||
<section id="strafen" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
6. Strafen und Bussgelder
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 leading-relaxed mb-8">
|
||||
Die NIS2-Richtlinie sieht empfindliche Sanktionen bei Verstoessen vor. Erstmals werden auch persoenliche Haftungsregelungen fuer die Geschaeftsleitung eingefuehrt:
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="bg-primary-50 rounded-xl p-6 border border-primary-200">
|
||||
<h3 className="text-lg font-bold text-primary-900 mb-3">Wesentliche Einrichtungen</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl font-bold text-primary-700">10 Mio. EUR</span>
|
||||
</div>
|
||||
<p className="text-sm text-primary-800">
|
||||
oder <strong>2% des weltweiten Jahresumsatzes</strong> – je nachdem, welcher Betrag hoeher ist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-accent-50 rounded-xl p-6 border border-accent-200">
|
||||
<h3 className="text-lg font-bold text-accent-900 mb-3">Wichtige Einrichtungen</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl font-bold text-accent-700">7 Mio. EUR</span>
|
||||
</div>
|
||||
<p className="text-sm text-accent-800">
|
||||
oder <strong>1,4% des weltweiten Jahresumsatzes</strong> – je nachdem, welcher Betrag hoeher ist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-5 mt-6">
|
||||
<p className="text-red-800 text-sm font-medium">
|
||||
Neu: Die Geschaeftsleitung kann persoenlich haftbar gemacht werden, wenn sie ihren Aufsichtspflichten nicht nachkommt. Geschaeftsfuehrer und Vorstaende muessen die Cybersicherheitsmassnahmen billigen und deren Umsetzung ueberwachen. Sie sind zudem verpflichtet, an Cybersicherheitsschulungen teilzunehmen.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 7 */}
|
||||
<section id="checkliste" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
7. Checkliste: In 5 Schritten NIS2-konform
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 leading-relaxed mb-8">
|
||||
Nutzen Sie diese Schritt-fuer-Schritt-Anleitung, um Ihre NIS2-Konformitaet systematisch aufzubauen:
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
{/* Step 1 */}
|
||||
<div className="relative">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
1
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-4">Betroffenheit pruefen</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
'Gehoert Ihr Unternehmen zu einem der 18 NIS2-Sektoren (Anhang I oder II)?',
|
||||
'Erfuellen Sie die Schwellenwerte (Mitarbeiterzahl, Umsatz, Bilanzsumme)?',
|
||||
'Fallen Sie unter eine der Sonderregelungen (z.B. DNS, TLD, Vertrauensdienste)?',
|
||||
'Klaeren Sie, ob Sie als wesentliche oder wichtige Einrichtung gelten.',
|
||||
].map((item) => (
|
||||
<label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||||
<input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
|
||||
<span className="text-sm text-slate-700">{item}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="relative">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
2
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-4">Gap-Analyse durchfuehren</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
'Bestandsaufnahme der vorhandenen Sicherheitsmassnahmen machen.',
|
||||
'Abgleich mit den 10 Mindestanforderungen aus Art. 21 NIS2.',
|
||||
'Luecken (Gaps) identifizieren und priorisieren.',
|
||||
'Bestehende Zertifizierungen (ISO 27001, BSI Grundschutz) als Basis nutzen.',
|
||||
].map((item) => (
|
||||
<label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||||
<input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
|
||||
<span className="text-sm text-slate-700">{item}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="relative">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
3
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-4">Governance und Verantwortlichkeiten definieren</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
'Geschaeftsleitung in die Verantwortung nehmen (Billigungspflicht).',
|
||||
'CISO oder IT-Sicherheitsbeauftragten benennen.',
|
||||
'Cybersicherheitsschulungen fuer die Geschaeftsleitung planen.',
|
||||
'Berichtswege und Eskalationspfade festlegen.',
|
||||
'Budget fuer Cybersicherheitsmassnahmen freigeben.',
|
||||
].map((item) => (
|
||||
<label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||||
<input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
|
||||
<span className="text-sm text-slate-700">{item}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 4 */}
|
||||
<div className="relative">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
4
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-4">Technische und organisatorische Massnahmen umsetzen</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
'ISMS (Information Security Management System) aufbauen oder erweitern.',
|
||||
'Incident-Response-Plan erstellen und testen.',
|
||||
'Business-Continuity-Plan und Disaster-Recovery-Konzept implementieren.',
|
||||
'Lieferketten-Risikomanagement etablieren.',
|
||||
'MFA (Multi-Faktor-Authentifizierung) flaechendeckend einfuehren.',
|
||||
'Verschluesselungskonzepte fuer Daten at rest und in transit umsetzen.',
|
||||
'Regelmaessige Schwachstellen-Scans und Penetrationstests einfuehren.',
|
||||
].map((item) => (
|
||||
<label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||||
<input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
|
||||
<span className="text-sm text-slate-700">{item}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 5 */}
|
||||
<div className="relative">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
|
||||
5
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-4">Meldeprozesse und Dokumentation einrichten</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
'Meldeprozess fuer Sicherheitsvorfaelle definieren (24h/72h/1 Monat).',
|
||||
'Kontaktdaten beim BSI hinterlegen (Registrierungspflicht).',
|
||||
'Interne Meldestrukturen und Kommunikationswege festlegen.',
|
||||
'Dokumentation aller Massnahmen sicherstellen (Nachweispflicht).',
|
||||
'Regelmaessige Audits und Reviews planen.',
|
||||
].map((item) => (
|
||||
<label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||||
<input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
|
||||
<span className="text-sm text-slate-700">{item}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 8 */}
|
||||
<section id="breakpilot-comply" className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
8. BreakPilot Comply und NIS2
|
||||
</h2>
|
||||
<div className="bg-gradient-to-br from-primary-50 to-accent-50 rounded-2xl p-8 border border-primary-200">
|
||||
<p className="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
BreakPilot Comply unterstuetzt Sie bei der systematischen Umsetzung der NIS2-Anforderungen. Unsere Plattform bietet Ihnen strukturierte Workflows fuer Risikoanalysen, Massnahmen-Tracking, Incident-Management und die erforderliche Dokumentation – alles an einem Ort.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-primary-600 text-white font-medium hover:bg-primary-700 transition-all"
|
||||
>
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog/glossar"
|
||||
className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-white text-slate-700 font-medium hover:bg-slate-100 transition-all border border-slate-200"
|
||||
>
|
||||
Compliance-Glossar
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Back to Blog */}
|
||||
<section className="py-8 px-4 sm:px-6 lg:px-8 border-t border-slate-100">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<Link href="/blog" className="inline-flex items-center gap-2 text-primary-600 hover:text-primary-800 transition-colors text-sm font-medium">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Zurueck zum Blog
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
268
website/app/blog/page.tsx
Normal file
268
website/app/blog/page.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface Article {
|
||||
slug: string
|
||||
title: string
|
||||
excerpt: string
|
||||
category: Category
|
||||
readingTime: string
|
||||
date: string
|
||||
}
|
||||
|
||||
type Category = 'DSGVO' | 'AI Act' | 'NIS2' | 'Glossar'
|
||||
|
||||
type FilterOption = 'Alle' | Category
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Data
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ARTICLES: Article[] = [
|
||||
{
|
||||
slug: 'dsgvo-vvt-erstellen',
|
||||
title: 'Verzeichnis von Verarbeitungstaetigkeiten (VVT) erstellen',
|
||||
excerpt:
|
||||
'Schritt-fuer-Schritt Anleitung zur Erstellung eines DSGVO-konformen VVT nach Art. 30.',
|
||||
category: 'DSGVO',
|
||||
readingTime: '8 Min.',
|
||||
date: '2026-02-10',
|
||||
},
|
||||
{
|
||||
slug: 'ai-act-ueberblick',
|
||||
title: 'EU AI Act: Was Unternehmen jetzt wissen muessen',
|
||||
excerpt:
|
||||
'Der EU AI Act tritt stufenweise in Kraft. Welche Pflichten gelten fuer Ihr Unternehmen?',
|
||||
category: 'AI Act',
|
||||
readingTime: '10 Min.',
|
||||
date: '2026-02-08',
|
||||
},
|
||||
{
|
||||
slug: 'nis2-checkliste',
|
||||
title: 'NIS2-Richtlinie: Checkliste fuer betroffene Unternehmen',
|
||||
excerpt:
|
||||
'Pruefen Sie mit unserer Checkliste, ob Ihr Unternehmen unter die NIS2-Richtlinie faellt.',
|
||||
category: 'NIS2',
|
||||
readingTime: '6 Min.',
|
||||
date: '2026-02-05',
|
||||
},
|
||||
{
|
||||
slug: 'tom-massnahmen-uebersicht',
|
||||
title: 'Technische und Organisatorische Massnahmen (TOM)',
|
||||
excerpt:
|
||||
'Welche TOMs verlangt die DSGVO? Eine praxisnahe Uebersicht mit Beispielen.',
|
||||
category: 'DSGVO',
|
||||
readingTime: '7 Min.',
|
||||
date: '2026-01-28',
|
||||
},
|
||||
{
|
||||
slug: 'auftragsverarbeitung-avv',
|
||||
title: 'Auftragsverarbeitung und AVV nach Art. 28 DSGVO',
|
||||
excerpt:
|
||||
'Wann brauchen Sie einen AVV? Was muss drin stehen? Praxisleitfaden.',
|
||||
category: 'DSGVO',
|
||||
readingTime: '9 Min.',
|
||||
date: '2026-01-20',
|
||||
},
|
||||
{
|
||||
slug: 'glossar',
|
||||
title: 'Compliance-Glossar: Die wichtigsten Begriffe',
|
||||
excerpt:
|
||||
'Von AVV bis ZAB — alle Compliance-Fachbegriffe verstaendlich erklaert.',
|
||||
category: 'Glossar',
|
||||
readingTime: '15 Min.',
|
||||
date: '2026-02-12',
|
||||
},
|
||||
]
|
||||
|
||||
const FILTER_OPTIONS: FilterOption[] = [
|
||||
'Alle',
|
||||
'DSGVO',
|
||||
'AI Act',
|
||||
'NIS2',
|
||||
'Glossar',
|
||||
]
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const CATEGORY_STYLES: Record<Category, string> = {
|
||||
DSGVO: 'bg-blue-50 text-blue-700 ring-blue-600/10',
|
||||
'AI Act': 'bg-purple-50 text-purple-700 ring-purple-600/10',
|
||||
NIS2: 'bg-orange-50 text-orange-700 ring-orange-600/10',
|
||||
Glossar: 'bg-green-50 text-green-700 ring-green-600/10',
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Components
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function CategoryBadge({ category }: { category: Category }) {
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset ${CATEGORY_STYLES[category]}`}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function ArticleCard({ article }: { article: Article }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/blog/${article.slug}`}
|
||||
className="group flex flex-col bg-white rounded-xl border border-slate-200 overflow-hidden card-hover"
|
||||
>
|
||||
{/* Card Body */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<CategoryBadge category={article.category} />
|
||||
<span className="text-xs text-slate-400">{article.readingTime}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-slate-900 group-hover:text-primary-600 transition-colors leading-snug mb-2">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-slate-500 leading-relaxed">
|
||||
{article.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Footer */}
|
||||
<div className="px-6 pb-5 pt-0 flex items-center justify-between">
|
||||
<time className="text-xs text-slate-400" dateTime={article.date}>
|
||||
{formatDate(article.date)}
|
||||
</time>
|
||||
|
||||
<span className="inline-flex items-center text-sm font-medium text-primary-600 group-hover:translate-x-1 transition-transform">
|
||||
Lesen
|
||||
<svg
|
||||
className="ml-1 w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Page
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function BlogPage() {
|
||||
const [activeFilter, setActiveFilter] = useState<FilterOption>('Alle')
|
||||
|
||||
const filteredArticles =
|
||||
activeFilter === 'Alle'
|
||||
? ARTICLES
|
||||
: ARTICLES.filter((a) => a.category === activeFilter)
|
||||
|
||||
return (
|
||||
<div className="pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Hero */}
|
||||
<section className="pt-16 pb-12 text-center">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
|
||||
Compliance{' '}
|
||||
<span className="gradient-text">Ressourcen-Hub</span>
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl mx-auto text-lg text-slate-500">
|
||||
Praxisleitfaeden, Checklisten und Glossar zu DSGVO, AI Act und NIS2
|
||||
— damit Sie jederzeit compliant bleiben.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Category Filters */}
|
||||
<section className="mb-10">
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
{FILTER_OPTIONS.map((option) => {
|
||||
const isActive = activeFilter === option
|
||||
return (
|
||||
<button
|
||||
key={option}
|
||||
onClick={() => setActiveFilter(option)}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-primary-600 text-white shadow-sm'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
{option}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Articles Grid */}
|
||||
<section>
|
||||
{filteredArticles.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredArticles.map((article) => (
|
||||
<ArticleCard key={article.slug} article={article} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-center text-slate-400 py-16">
|
||||
Keine Artikel in dieser Kategorie.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="mt-20 text-center bg-gradient-to-br from-primary-50 to-accent-50 rounded-2xl py-14 px-6">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">
|
||||
Compliance automatisieren?
|
||||
</h2>
|
||||
<p className="mt-3 text-slate-600 max-w-xl mx-auto">
|
||||
BreakPilot Comply hilft Ihnen, DSGVO, AI Act und NIS2 Anforderungen
|
||||
effizient umzusetzen — mit KI-gestuetzten Tools.
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-6 inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors btn-press"
|
||||
>
|
||||
Kostenlos testen
|
||||
<svg
|
||||
className="ml-2 w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user