{% extends "base.html" %}

{% block title %}Datenschutzerklärung - MYP Platform{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Hero Header mit Gradient und Animation -->
    <div class="relative overflow-hidden rounded-3xl mb-12 p-8 md:p-12 bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50 dark:from-slate-900 dark:via-emerald-900/20 dark:to-green-900/20 border border-emerald-200/50 dark:border-emerald-700/30">
        <!-- Animated Background Pattern -->
        <div class="absolute inset-0 opacity-10 dark:opacity-5">
            <div class="absolute top-0 left-0 w-full h-full">
                <svg class="animate-pulse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <defs>
                        <pattern id="privacy-grid" width="8" height="8" patternUnits="userSpaceOnUse">
                            <circle cx="4" cy="4" r="1" fill="currentColor" opacity="0.3"/>
                        </pattern>
                    </defs>
                    <rect width="100" height="100" fill="url(#privacy-grid)" />
                </svg>
            </div>
        </div>
        
        <!-- Content -->
        <div class="relative z-10 text-center">
            <!-- Icon -->
            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-emerald-100 dark:bg-emerald-900/50 mb-6">
                <svg class="w-10 h-10 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
            </div>
            
            <h1 class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight">
                Datenschutzerklärung
            </h1>
            <p class="text-xl text-slate-600 dark:text-slate-300 mb-6 max-w-2xl mx-auto">
                Transparenz über die Verarbeitung Ihrer personenbezogenen Daten
            </p>
            
            <!-- Meta Information -->
            <div class="inline-flex items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
                    <span>Gültig ab 15. Juni 2024</span>
                </div>
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>Lesezeit: ~8 Minuten</span>
                </div>
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
                    <span>DSGVO-konform</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Table of Contents -->
    <div class="mb-12">
        <div class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-6">
            <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4 flex items-center gap-3">
                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
                </svg>
                Inhaltsverzeichnis
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                <a href="#section-1" class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-100/50 dark:hover:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-all duration-200 group">
                    <span class="w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 text-xs font-semibold flex items-center justify-center group-hover:scale-110 transition-transform">1</span>
                    <span class="text-sm">Verantwortliche Stelle</span>
                </a>
                <a href="#section-2" class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-100/50 dark:hover:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-all duration-200 group">
                    <span class="w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 text-xs font-semibold flex items-center justify-center group-hover:scale-110 transition-transform">2</span>
                    <span class="text-sm">Erhobene Daten</span>
                </a>
                <a href="#section-3" class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-100/50 dark:hover:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-all duration-200 group">
                    <span class="w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 text-xs font-semibold flex items-center justify-center group-hover:scale-110 transition-transform">3</span>
                    <span class="text-sm">Verarbeitungszweck</span>
                </a>
                <a href="#section-4" class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-100/50 dark:hover:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-all duration-200 group">
                    <span class="w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 text-xs font-semibold flex items-center justify-center group-hover:scale-110 transition-transform">4</span>
                    <span class="text-sm">Rechtsgrundlage</span>
                </a>
                <a href="#section-5" class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-100/50 dark:hover:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-all duration-200 group">
                    <span class="w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 text-xs font-semibold flex items-center justify-center group-hover:scale-110 transition-transform">5</span>
                    <span class="text-sm">Speicherdauer</span>
                </a>
                <a href="#section-6" class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-100/50 dark:hover:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-all duration-200 group">
                    <span class="w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 text-xs font-semibold flex items-center justify-center group-hover:scale-110 transition-transform">6</span>
                    <span class="text-sm">Ihre Rechte</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Privacy Content -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Sidebar Navigation (hidden on mobile) -->
        <div class="hidden lg:block">
            <div class="sticky top-8">
                <div class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-6">
                    <h3 class="text-sm font-semibold text-slate-900 dark:text-white mb-4 uppercase tracking-wider">Navigation</h3>
                    <nav class="space-y-2">
                        <a href="#section-1" class="block text-sm text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 py-2 border-l-2 border-transparent hover:border-emerald-600 dark:hover:border-emerald-400 pl-3 transition-all duration-200">1. Verantwortliche Stelle</a>
                        <a href="#section-2" class="block text-sm text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 py-2 border-l-2 border-transparent hover:border-emerald-600 dark:hover:border-emerald-400 pl-3 transition-all duration-200">2. Erhobene Daten</a>
                        <a href="#section-3" class="block text-sm text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 py-2 border-l-2 border-transparent hover:border-emerald-600 dark:hover:border-emerald-400 pl-3 transition-all duration-200">3. Verarbeitungszweck</a>
                        <a href="#section-4" class="block text-sm text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 py-2 border-l-2 border-transparent hover:border-emerald-600 dark:hover:border-emerald-400 pl-3 transition-all duration-200">4. Rechtsgrundlage</a>
                        <a href="#section-5" class="block text-sm text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 py-2 border-l-2 border-transparent hover:border-emerald-600 dark:hover:border-emerald-400 pl-3 transition-all duration-200">5. Speicherdauer</a>
                        <a href="#section-6" class="block text-sm text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 py-2 border-l-2 border-transparent hover:border-emerald-600 dark:hover:border-emerald-400 pl-3 transition-all duration-200">6. Ihre Rechte</a>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="lg:col-span-3">
            <div class="space-y-8">
                <!-- Section 1 - Verantwortliche Stelle -->
                <section id="section-1" class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-8 scroll-mt-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
                            <span class="text-emerald-600 dark:text-emerald-400 font-bold">1</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Verantwortliche Stelle</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed mb-4">
                            Verantwortlich für die Datenverarbeitung im Rahmen der MYP-Plattform ist:
                        </p>
                        <div class="bg-slate-50/50 dark:bg-slate-800/50 rounded-lg p-4 border-l-4 border-emerald-500">
                            <p class="text-slate-700 dark:text-slate-300 mb-0">
                                <strong>Mercedes-Benz Group AG</strong><br>
                                Mercedesstraße 120<br>
                                70372 Stuttgart<br>
                                Deutschland
                            </p>
                        </div>
                    </div>
                </section>
                
                <!-- Section 2 - Art der erhobenen Daten -->
                <section id="section-2" class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-8 scroll-mt-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                            <span class="text-blue-600 dark:text-blue-400 font-bold">2</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Art der erhobenen Daten</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed mb-4">
                            Im Rahmen der Nutzung der MYP-Plattform werden folgende personenbezogene Daten erhoben und verarbeitet:
                        </p>
                        <div class="grid gap-3">
                            <div class="flex items-start gap-3 p-4 rounded-lg bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200/50 dark:border-blue-800/50">
                                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                <div>
                                    <span class="font-medium text-slate-700 dark:text-slate-300">Personenstammdaten</span>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">Name, E-Mail-Adresse, Abteilung</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-4 rounded-lg bg-purple-50/50 dark:bg-purple-900/10 border border-purple-200/50 dark:border-purple-800/50">
                                <svg class="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                                </svg>
                                <div>
                                    <span class="font-medium text-slate-700 dark:text-slate-300">Benutzerkonto-Informationen</span>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">Benutzername, verschlüsseltes Passwort</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-4 rounded-lg bg-green-50/50 dark:bg-green-900/10 border border-green-200/50 dark:border-green-800/50">
                                <svg class="w-5 h-5 text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                                </svg>
                                <div>
                                    <span class="font-medium text-slate-700 dark:text-slate-300">Nutzungsdaten</span>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">Druckaufträge, Zeitstempel, verwendete Geräte</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-4 rounded-lg bg-orange-50/50 dark:bg-orange-900/10 border border-orange-200/50 dark:border-orange-800/50">
                                <svg class="w-5 h-5 text-orange-600 dark:text-orange-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                <div>
                                    <span class="font-medium text-slate-700 dark:text-slate-300">Protokolldaten</span>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">IP-Adresse, Zugriffszeiten, Aktivitäten</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-4 rounded-lg bg-indigo-50/50 dark:bg-indigo-900/10 border border-indigo-200/50 dark:border-indigo-800/50">
                                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                                <div>
                                    <span class="font-medium text-slate-700 dark:text-slate-300">Einstellungen</span>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">Präferenzen zur Personalisierung der Plattform</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- Section 3 - Zweck der Datenverarbeitung -->
                <section id="section-3" class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-8 scroll-mt-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
                            <span class="text-purple-600 dark:text-purple-400 font-bold">3</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Zweck der Datenverarbeitung</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed mb-4">Die Verarbeitung der Daten erfolgt zu folgenden Zwecken:</p>
                        <div class="grid gap-3">
                            <div class="flex items-center gap-3 p-3 rounded-lg bg-slate-50/50 dark:bg-slate-800/50">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span class="text-slate-700 dark:text-slate-300">Bereitstellung und Verwaltung der MYP-Plattform</span>
                            </div>
                            <div class="flex items-center gap-3 p-3 rounded-lg bg-slate-50/50 dark:bg-slate-800/50">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span class="text-slate-700 dark:text-slate-300">Authentifizierung und Autorisierung der Nutzer</span>
                            </div>
                            <div class="flex items-center gap-3 p-3 rounded-lg bg-slate-50/50 dark:bg-slate-800/50">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span class="text-slate-700 dark:text-slate-300">Verwaltung und Optimierung von Druckaufträgen</span>
                            </div>
                            <div class="flex items-center gap-3 p-3 rounded-lg bg-slate-50/50 dark:bg-slate-800/50">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span class="text-slate-700 dark:text-slate-300">Ressourcenplanung und -optimierung</span>
                            </div>
                            <div class="flex items-center gap-3 p-3 rounded-lg bg-slate-50/50 dark:bg-slate-800/50">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span class="text-slate-700 dark:text-slate-300">Gewährleistung der Systemsicherheit</span>
                            </div>
                            <div class="flex items-center gap-3 p-3 rounded-lg bg-slate-50/50 dark:bg-slate-800/50">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span class="text-slate-700 dark:text-slate-300">Erstellung anonymisierter Statistiken zur Systemnutzung</span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Section 4 - Rechtsgrundlage -->
                <section id="section-4" class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-8 scroll-mt-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-10 h-10 rounded-full bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center">
                            <span class="text-orange-600 dark:text-orange-400 font-bold">4</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Rechtsgrundlage der Verarbeitung</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed mb-4">Die Datenverarbeitung erfolgt auf Grundlage:</p>
                        <div class="space-y-3">
                            <div class="p-4 rounded-lg bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200/50 dark:border-blue-800/50">
                                <div class="flex items-start gap-3">
                                    <span class="text-blue-600 dark:text-blue-400 font-bold text-sm">Art. 6 Abs. 1 lit. b DSGVO</span>
                                </div>
                                <p class="text-slate-700 dark:text-slate-300 text-sm mt-2">Der Erfüllung des Arbeitsverhältnisses</p>
                            </div>
                            <div class="p-4 rounded-lg bg-green-50/50 dark:bg-green-900/10 border border-green-200/50 dark:border-green-800/50">
                                <div class="flex items-start gap-3">
                                    <span class="text-green-600 dark:text-green-400 font-bold text-sm">Art. 6 Abs. 1 lit. f DSGVO</span>
                                </div>
                                <p class="text-slate-700 dark:text-slate-300 text-sm mt-2">Der Wahrung berechtigter Interessen (effiziente Ressourcenverwaltung, Systemsicherheit)</p>
                            </div>
                            <div class="p-4 rounded-lg bg-purple-50/50 dark:bg-purple-900/10 border border-purple-200/50 dark:border-purple-800/50">
                                <div class="flex items-start gap-3">
                                    <span class="text-purple-600 dark:text-purple-400 font-bold text-sm">Art. 6 Abs. 1 lit. a DSGVO</span>
                                </div>
                                <p class="text-slate-700 dark:text-slate-300 text-sm mt-2">Gegebenenfalls einer Einwilligung für optionale Funktionen</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Section 5 - Speicherdauer -->
                <section id="section-5" class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-8 scroll-mt-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center">
                            <span class="text-indigo-600 dark:text-indigo-400 font-bold">5</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Speicherdauer</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed mb-4">
                            Die personenbezogenen Daten werden nur so lange gespeichert, wie es für die genannten Zwecke erforderlich ist oder gesetzliche Aufbewahrungspflichten bestehen:
                        </p>
                        <div class="grid gap-4">
                            <div class="flex items-center gap-4 p-4 rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/10 dark:to-indigo-900/10 border border-blue-200/50 dark:border-blue-800/50">
                                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-slate-900 dark:text-white">Benutzerkontodaten</h4>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">Für die Dauer der Unternehmenszugehörigkeit</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 p-4 rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10 border border-green-200/50 dark:border-green-800/50">
                                <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-slate-900 dark:text-white">Druckauftragsdaten</h4>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">12 Monate nach Abschluss des Auftrags</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 p-4 rounded-lg bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/10 dark:to-red-900/10 border border-orange-200/50 dark:border-orange-800/50">
                                <div class="w-12 h-12 rounded-full bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-slate-900 dark:text-white">Protokolldaten</h4>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">90 Tage</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Section 6 - Ihre Rechte -->
                <section id="section-6" class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-8 scroll-mt-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
                            <span class="text-emerald-600 dark:text-emerald-400 font-bold">6</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Rechte der betroffenen Personen</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none">
                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed mb-6">
                            Als Nutzer der MYP-Plattform haben Sie folgende Rechte:
                        </p>
                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="p-4 rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-slate-900 dark:text-white text-sm">Recht auf Auskunft</h4>
                                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Art. 15 DSGVO - über die gespeicherten Daten</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-green-600 dark:text-green-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-slate-900 dark:text-white text-sm">Recht auf Berichtigung</h4>
                                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Art. 16 DSGVO - unrichtiger Daten</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-red-600 dark:text-red-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-slate-900 dark:text-white text-sm">Recht auf Löschung</h4>
                                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Art. 17 DSGVO - der Daten</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"/>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-slate-900 dark:text-white text-sm">Recht auf Einschränkung</h4>
                                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Art. 18 DSGVO - der Verarbeitung</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-slate-900 dark:text-white text-sm">Recht auf Datenübertragbarkeit</h4>
                                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Art. 20 DSGVO</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-orange-600 dark:text-orange-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-slate-900 dark:text-white text-sm">Widerspruchsrecht</h4>
                                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Art. 21 DSGVO - gegen die Verarbeitung</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Kompakte weitere Abschnitte -->
                <div class="grid gap-6">
                    <div class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-6">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 rounded-full bg-teal-100 dark:bg-teal-900/50 text-teal-600 dark:text-teal-400 text-sm font-bold flex items-center justify-center">7</span>
                            Datensicherheit
                        </h3>
                        <p class="text-slate-700 dark:text-slate-300 text-sm mb-3">Mercedes-Benz trifft angemessene technische und organisatorische Maßnahmen, um die Sicherheit der personenbezogenen Daten zu gewährleisten:</p>
                        <div class="grid sm:grid-cols-2 gap-2 text-sm text-slate-600 dark:text-slate-400">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span>Verschlüsselung</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span>Zugriffskontrollen</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span>Sicherheitsüberprüfungen</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span>Mitarbeiterschulungen</span>
                            </div>
                        </div>
                    </div>

                    <div class="glass-card bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/50 dark:border-slate-700/50 rounded-2xl p-6">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 text-sm font-bold flex items-center justify-center">8</span>
                            Datenschutzbeauftragter
                        </h3>
                        <p class="text-slate-700 dark:text-slate-300 text-sm mb-3">Bei Fragen zum Datenschutz oder zur Ausübung Ihrer Rechte wenden Sie sich an:</p>
                        <div class="bg-slate-50/50 dark:bg-slate-800/50 rounded-lg p-3 border-l-4 border-blue-500">
                            <p class="text-slate-700 dark:text-slate-300 text-sm mb-0">
                                <strong>Datenschutzbeauftragter</strong><br>
                                Mercedes-Benz Group AG<br>
                                HPC G353<br>
                                70546 Stuttgart<br>
                                <a href="mailto:data.protection@mercedes-benz.com" class="text-blue-600 dark:text-blue-400 hover:underline">data.protection@mercedes-benz.com</a>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Kontakt Section -->
                <div class="glass-card bg-gradient-to-br from-emerald-50 to-green-50 dark:from-emerald-900/20 dark:to-green-900/20 border border-emerald-200/50 dark:border-emerald-700/30 rounded-2xl p-8">
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-emerald-100 dark:bg-emerald-900/50 mb-6">
                            <svg class="w-8 h-8 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-4">Fragen zum Datenschutz?</h3>
                        <p class="text-slate-600 dark:text-slate-400 mb-6">Bei Fragen zur Datenverarbeitung in der MYP-Plattform wenden Sie sich gerne an unser Team.</p>
                        <div class="flex flex-col sm:flex-row gap-4 justify-center">
                            <a href="mailto:till.tomczak@mercedes-benz.com" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                </svg>
                                Till Tomczak
                            </a>
                            <a href="mailto:torben.haack@mercedes-benz.com" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-slate-600 hover:bg-slate-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                </svg>
                                Torben Haack
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-4 justify-end mt-12 pt-8 border-t border-slate-200 dark:border-slate-700">
        <button onclick="window.print()" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg transition-all duration-200">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
            </svg>
            Drucken
        </button>
        <a href="javascript:history.back()" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Zurück
        </a>
    </div>
</div>

<!-- Smooth Scrolling Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
{% endblock %}