/**
 * File: TC-Hugsweier/css/datenschutz.css
 * Path: /css/datenschutz.css
 * 
 * Purpose:
 * - Datenschutz-spezifische Styles (ergänzt style.css)
 * - Info-Boxen in verschiedenen Farben
 * - Rechte-Grid für Nutzerrechte
 * - Cookie-Hinweise Styles
 * 
 * Dependencies:
 * - css/style.css (muss zuerst geladen werden!)
 * - Bootstrap 5.3.2
 * - FontAwesome 6.5.1
 * 
 * Sections:
 * 1. Section Überschriften
 * 2. Info-Boxen (Blau, Grün, Gelb)
 * 3. Rechte-Grid (Auskunft, Berichtigung, etc.)
 * 4. Listen-Formatierung
 * 5. Kontakt-Box
 * 6. Responsive Design
 * 7. Print Styles
 * 
 * Colors:
 * - Info-Box: #007bff / #e3f2fd (Blau)
 * - Success-Box: #28a745 / #d4edda (Grün)
 * - Warning-Box: #ffc107 / #fff3cd (Gelb)
 * 
 * Created: 2026-02-02
 * Author: TC Hugsweier Webteam
 * Version: 1.0.0
 */

/* ========================================
   1. SECTION ÜBERSCHRIFTEN
======================================== */

/**
 * Datenschutz Section - Hauptabschnitte
 */
.datenschutz-section {
    margin-bottom: 3rem;
}

/**
 * H2 Überschrift - Nummerierte Hauptabschnitte
 * - Blau gefärbt
 * - Untere Trennlinie
 */
.datenschutz-section h2 {
    color: #007bff;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e3f2fd;
}

/**
 * H3 Überschrift - Unterabschnitte
 * - Dunkelblau
 */
.datenschutz-section h3 {
    color: #0056b3;
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/**
 * H4 Überschrift - Kleinste Ebene
 */
.datenschutz-section h4 {
    color: #007bff;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* ========================================
   2. INFO-BOXEN
======================================== */

/**
 * Standard Info-Box - Blau
 * - Für allgemeine Hinweise
 * - Hellblauer Hintergrund
 */
.datenschutz-info-box {
    background: #e3f2fd;
    border-left: 4px solid #007bff;
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 1.5rem;
}

.datenschutz-info-box i {
    color: #007bff;
    margin-right: 0.5rem;
}

/**
 * Success-Box - Grün
 * - Für erforderliche Cookies
 * - Grüner Gradient Hintergrund
 */
.cookies-success-box {
    background: linear-gradient(135deg, #d4edda, #e8f5e9);
    border-left: 4px solid #28a745;
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 1.5rem;
}

.cookies-success-box ul {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/**
 * Warning-Box - Gelb
 * - Für wichtige Hinweise
 * - Gelber Gradient Hintergrund
 */
.datenschutz-warning {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    border-left: 4px solid #ffc107;
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-top: 1.5rem;
}

/* ========================================
   3. RECHTE-GRID
======================================== */

/**
 * Rechte Grid - Container für Nutzerrechte
 */
.datenschutz-rechte-grid {
    margin-top: 1.5rem;
}

/**
 * Einzelnes Recht - Grid-Item
 * - Icon + Überschrift + Beschreibung
 */
.datenschutz-recht-item {
    margin-bottom: 1.5rem;
}

/**
 * Recht Überschrift
 * - Mit Icon links
 * - Blau gefärbt
 */
.datenschutz-recht-item h4 {
    color: #0056b3;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.datenschutz-recht-item i {
    color: #007bff;
    font-size: 1.2rem;
}

/**
 * Recht Beschreibung
 * - Grau gefärbt
 * - Kleinere Schrift
 */
.datenschutz-recht-item p {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ========================================
   4. LISTEN-FORMATIERUNG
======================================== */

/**
 * Datenschutz Liste
 * - Für Aufzählungen
 * - Eingerückt
 */
.datenschutz-list {
    padding-left: 1.5rem;
}

.datenschutz-list li {
    margin-bottom: 0.75rem;
    color: #495057;
}

/**
 * Hervorgehobene Begriffe in Listen
 */
.datenschutz-list li strong {
    color: #0056b3;
}

/* ========================================
   5. KONTAKT-BOX
======================================== */

/**
 * Kontakt-Box - Hervorgehobener Kontakt-Bereich
 * - Heller Hintergrund
 * - Rahmen
 */
.datenschutz-contact-box {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid #e9ecef;
}

.datenschutz-contact-box h3 {
    color: #007bff;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.datenschutz-contact-box p {
    margin-bottom: 0.5rem;
}

.datenschutz-contact-box i {
    color: #007bff;
    margin-right: 0.5rem;
}

/* ========================================
   6. RESPONSIVE DESIGN
======================================== */

/**
 * Mobile Anpassungen
 * - Kleinere Überschriften
 * - Kompaktere Abstände
 */
@media (max-width: 768px) {
    .datenschutz-section h2 {
        font-size: 1.5rem;
    }
    
    .datenschutz-section h3 {
        font-size: 1.2rem;
    }
    
    .datenschutz-recht-item {
        margin-bottom: 1rem;
    }
}

/* ========================================
   7. PRINT STYLES
======================================== */

/**
 * Druck-Optimierung
 * - Alle Boxen in Schwarzweiß
 * - Rahmen statt farbige Hintergründe
 */
@media print {
    .datenschutz-info-box,
    .cookies-success-box,
    .datenschutz-warning,
    .datenschutz-contact-box {
        background: white !important;
        border: 1px solid #333 !important;
    }
}