.container {
    padding-top: 10px;
}
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --premium-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --premium-plus-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

    --bg-primary:   #fafbff;
    --bg-secondary: #f7f9fc;
    --bg-tertiary:  #ffffff;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted:   #718096;
    --border-light: #e2e8f0;
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.1);
    --radius-lg:    0.75rem;
    --radius-xl:    1rem;
    --space-lg:     1.5rem;
    --space-xl:     2rem;
}

body.night-mode {
    --bg-primary:   #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary:  #374151;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted:   #cbd5e1;
    --border-light: #4a5568;
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.3);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.4);
    background: #1e293b;
    color: #e2e8f0;
    position: relative;
}

/* Hintergrund-Glow Effekt */
body.night-mode::before {
    content: '';
    position: fixed;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(59,130,246,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(139,92,246,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(99,102,241,0.05) 0%, transparent 40%);
    animation: nightGlow 25s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes nightGlow {
    0%, 100% { transform: translate(0,0) rotate(0deg); opacity: 0.6; }
    50%      { transform: translate(-3%,3%) rotate(5deg); opacity: 0.8; }
}

/* === Gemeinsame Regeln für fast alle dunklen Modal-Karten & Container === */
body.night-mode .modal-content,
body.night-mode .modal-header + div,
body.night-mode [class*="Modal"] > div:not(.modal-header):not(.modal-footer),
body.night-mode .pricing-card,
body.night-mode .file-item,
body.night-mode #manageShareLinksList > div,
body.night-mode #createShareLinkModal div[style*="background"],
body.night-mode #displayShareLinkModal div[style*="background"],
body.night-mode #fileManagementList,
body.night-mode #filesList > div,
body.night-mode div[style*="background: white"],
body.night-mode div[style*="background:#ffffff"],
body.night-mode div[style*="background: #f8fafc"],
body.night-mode div[style*="background:#f8fafc"] {
    background: var(--bg-secondary) !important;
    color:      var(--text-primary)   !important;
    border-color: var(--border-light) !important;
}

/* Wichtige Texte / Überschriften */
body.night-mode .modal-title,
body.night-mode .modal-content h1,h2,h3,h4,h5,
body.night-mode .modal-content strong,
body.night-mode .legend-item,
body.night-mode .center-slogan,
body.night-mode .logo {
    color: var(--text-primary) !important;
}

/* Normaler / grauer Text, Hinweise, Platzhalter */
body.night-mode p,
body.night-mode label,
body.night-mode span:not(.cell-lock):not(.premium-feature-section *):not(.close-btn),
body.night-mode small,
body.night-mode .text-muted,
body.night-mode [style*="color: #64748b"],
body.night-mode [style*="color:#64748b"] {
    color: var(--text-secondary) !important;
}

/* Formularfelder */
body.night-mode input,
body.night-mode textarea,
body.night-mode select,
body.night-mode .form-input {
    background: var(--bg-secondary)     !important;
    color:      var(--text-primary)     !important;
    border-color: var(--border-light)   !important;
}
body.night-mode ::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Schließen-Button (X) */
body.night-mode .close-btn {
    color: #cbd5e1 !important;
}
body.night-mode .close-btn:hover {
    color: #f7fafc !important;
}

/* Premium-/Gradient-Elemente */
body.night-mode .premium-feature-section,
body.night-mode [style*="linear-gradient(135deg, #a8edea"] {
    background: var(--primary-gradient) !important;
    color: white !important;
}

body.night-mode .download-status.premium-plus {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Listen */
body.night-mode .modal-content li,
body.night-mode .modal-content ul,
body.night-mode .modal-content ol {
    color: var(--text-secondary) !important;
}

/* ================================================
   Spezielle Korrekturen für Preis-/Dauer-Texte im Night-Mode
   ================================================ */

/* Häufige Klassen/Namen für Dauer-Badges & Texte */
body.night-mode .download-status,
body.night-mode .pricing-duration,
body.night-mode .pricing-price,
body.night-mode [class*="duration"],
body.night-mode [class*="price"],
body.night-mode #priceModal strong,
body.night-mode #priceModal span,
body.night-mode #priceModal div:not([style*="background"]) strong,
body.night-mode .free-duration,
body.night-mode .premium-7-duration,
body.night-mode .premium-duration,
body.night-mode .premium-plus-duration,
body.night-mode .duration-text,
body.night-mode .plan-duration {
    color: var(--text-primary) !important;     /* → hell ≈ #f7fafc */
    font-weight: 600 !important;               /* etwas besser lesbar */
}

/* Falls es noch immer zu dunkel ist – sehr aggressive Variante */
body.night-mode #priceModal .pricing-features strong,
body.night-mode #priceModal strong,
body.night-mode #priceModal .pricing-card strong,
body.night-mode #priceModal [style*="color: #1e293b"],
body.night-mode #priceModal [style*="color:#0f172a"],
body.night-mode #priceModal [style*="color: #0f172a"] strong {
    color: #f7fafc !important;                 /* fast weiß */
}

/* Gradient- oder Premium-Plus Badge Text – meist schon hell, aber sicherheitshalber */
body.night-mode .premium-plus,
body.night-mode .premium-feature-section strong,
body.night-mode .download-status.premium-plus {
    color: #ffffff !important;                 /* rein weiß für maximale Lesbarkeit */
}

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        /* Animation for expiring cells */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.6;
            }
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background: #bae6fd;
            color: #1e293b;
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
            width: 100%;
            transition: background 0.5s ease, color 0.5s ease;
        }
        
        /* Abend-Modus (18:00 - 22:00) */
        body.evening-mode {
            background: #7dd3fc;
            color: #1e293b;
        }
        
        /* Nacht-Modus (22:00 - 6:00) */
        body.night-mode {
            background: #1e293b;
            color: #e2e8f0;
            position: relative;
        }
        
        /* Dunkles Licht in der Tiefe hinter dem Grid */
        body.night-mode::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: 
                radial-gradient(ellipse at 30% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 60%, rgba(139, 92, 246, 0.06) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 40%);
            animation: nightGlow 25s ease-in-out infinite;
            z-index: -1;
            pointer-events: none;
        }
        
        @keyframes nightGlow {
            0%, 100% { 
                transform: translate(0, 0) rotate(0deg);
                opacity: 0.6;
            }
            50% { 
                transform: translate(-3%, 3%) rotate(5deg);
                opacity: 0.8;
            }
        }
        
       
        
        /* Header, Legend, Grid-Switcher dürfen NICHT über Tooltips liegen */
        body.night-mode .header,
        body.night-mode .grid-switcher,
        body.night-mode .legend,
        body.night-mode .footer-buttons {
            position: relative;
            z-index: auto; /* Kein fester z-index - ermöglicht Tooltip-Sichtbarkeit */
        }
        
        /* Anpassungen für Nacht-Modus - Header, Footer, etc. */
        body.night-mode .header,
        body.night-mode .legend,
        body.night-mode .grid-switcher {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.3);
            backdrop-filter: blur(10px);
        }

        /* Legend - Persönliche Zelle */
.legend-item[data-filter="personal"] .legend-color {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
    border: 2px solid #b45309;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

body.night-mode .legend-item[data-filter="personal"] .legend-color {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%);
    border-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}
        
        /* Footer-Buttons Container mit gleichmäßiger Beleuchtung */
        body.night-mode .footer-buttons {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.3);
            backdrop-filter: blur(10px);
            /* Gleichmäßige Beleuchtung von allen Seiten - wie Grid-Zellen */
            box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.08), 
                        inset 0 -1px 3px rgba(255, 255, 255, 0.08),
                        inset 1px 0 3px rgba(255, 255, 255, 0.08),
                        inset -1px 0 3px rgba(255, 255, 255, 0.08),
                        0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* Tsicco Logo im Nacht-Modus - nicht zu hell */
        body.night-mode .logo {
            color: #cbd5e1;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        /* Center Slogan im Nacht-Modus heller machen */
        body.night-mode .center-slogan {
            color: #cbd5e1;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        /* Legende "Unbesetzte Zelle" (Frei) im Nacht-Modus - noch dunkler */
        body.night-mode .legend-item:first-child .legend-color {
            background: rgba(51, 65, 85, 0.6) !important;
            border-color: rgba(100, 116, 139, 0.4);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* Legende "GRATIS" bleibt HELLBLAU - NICHT ändern im Nacht-Modus */
        /* (Kein CSS Override für :nth-child(2) - behält original hellblaues Inline-Style) */
        
        /* Legende-Texte im Nacht-Modus heller machen */
        body.night-mode .legend-item {
            color: #cbd5e1;
        }
        
        /* Quick-Info Buttons im Nacht-Modus wie Grid-Umschalter */
        body.night-mode .quick-info {
            background: rgba(51, 65, 85, 0.6);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        body.night-mode .quick-info:hover {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.6);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(59, 130, 246, 0.3);
        }
        
        /* Mini-Buttons (FAQ, Features, Hilfe, Meine Zellen) im Nacht-Modus wie Grid-Umschalter */
        body.night-mode .mini-btn {
            background: rgba(51, 65, 85, 0.6);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        body.night-mode .mini-btn:hover {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.6);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(59, 130, 246, 0.3);
        }
        
        body.night-mode .mini-btn.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #5568d3;
            color: white;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(102, 126, 234, 0.5);
        }
        
        body.night-mode .mini-btn.primary:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 6px 16px rgba(102, 126, 234, 0.6);
        }
        
        /* Global Search im Nacht-Modus */
        body.night-mode #globalCellSearch {
            background: rgba(51, 65, 85, 0.6);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
        }
        
        body.night-mode #globalCellSearch::placeholder {
            color: #cbd5e1;
        }
        
        body.night-mode #globalCellSearch:focus {
            background: rgba(51, 65, 85, 0.8);
            border-color: #667eea !important;
        }
        
        body.night-mode #globalSearchResults {
    background: #1e293b !important;
    border-color: #475569 !important;
}

body.night-mode #globalSearchResults > div:first-child {
    color: #818cf8 !important;
}
        
        body.night-mode #clearGlobalSearchBtn {
            color: #cbd5e1;
        }
        
      body.night-mode #clearGlobalSearchBtn:hover {
    color: #e2e8f0;
}

/* QR Code Container im Night Mode */
body.night-mode #qrCodeContainer {
    background: #1e293b !important;
    border-color: #475569 !important;
}

body.night-mode #qrCodeContainer > div:first-child {
    color: #818cf8 !important;
}


/* Global Search Results - Einzelne Items im Night Mode */
body.night-mode #globalSearchResultsList > div {
    background: #334155 !important;
    border-color: #475569 !important;
}

body.night-mode #globalSearchResultsList > div:hover {
    background: #475569 !important;
    border-color: #667eea !important;
}

/* Zellnummer */
body.night-mode #globalSearchResultsList > div > div > div:first-child > div:first-child {
    color: #818cf8 !important;
}

/* Dateiname */
body.night-mode #globalSearchResultsList > div > div > div:first-child > div:nth-child(2) {
    color: #e2e8f0 !important;
}

/* Match-Label und Dateityp */
body.night-mode #globalSearchResultsList > div > div > div:last-child,
body.night-mode #globalSearchResultsList > div > div > div:last-child > div {
    color: #cbd5e1 !important;
}

/* "Keine Ergebnisse" Text */
body.night-mode #globalSearchResultsList > div[style*="color: #94a3b8"] {
    color: #cbd5e1 !important;
}


        
        /* Willkommen-Box im Nacht-Modus dunkler machen */
        body.night-mode #guestHint {
            background: rgba(30, 41, 59, 0.8) !important;
            border-color: rgba(100, 116, 139, 0.6) !important;
            color: #cbd5e1 !important;
        }
        
        body.night-mode #guestHint strong {
            color: #e2e8f0;
        }
        
        /* Upload-Modal: NUR Texte im Nacht-Modus dunkler machen (Hintergrund bleibt) */
        body.night-mode #uploadModal .modal-title {
            color: #1e293b;
        }
        
        body.night-mode #uploadModal .upload-info p {
            color: #1e293b;
        }
        
        body.night-mode #uploadModal .file-upload-area p {
            color: #1e293b;
        }
        
        body.night-mode #uploadModal .file-upload-area strong {
            color: #0f172a;
        }
        
        body.night-mode #uploadModal .form-label {
            color: #1e293b;
        }
        
        body.night-mode #uploadModal .password-requirements {
            color: #1e293b;
        }
        
        body.night-mode #uploadModal .password-strength span {
            color: #1e293b;
        }
        
        body.night-mode #uploadModal p {
            color: #334155;
        }
        
        body.night-mode #selectedFilesContainer {
    color: #e2e8f0 !important;
}

body.night-mode #selectedFilesContainer span {
    color: #e2e8f0 !important;
}

/* Dateiliste Container dunkler Hintergrund */
body.night-mode #filesList {
    background: #1e293b !important;
    border-color: #475569 !important;
}

/* Einzelne Datei-Items: Dunkler Hintergrund, helle Texte */
body.night-mode #filesList > div {
    background: #334155 !important;
}

body.night-mode #filesList > div span {
    color: #f1f5f9 !important;
}

/* Dateiname heller */
body.night-mode #filesList > div span[style*="flex: 1"] {
    color: #f1f5f9 !important;
}

/* Dateigröße heller */
body.night-mode #filesList > div span[style*="text-muted"] {
    color: #cbd5e1 !important;
}

/* Löschen-Button */
body.night-mode #filesList button {
    color: #f87171 !important;
}

        
        body.night-mode #filesCount {
            color: #1e293b;
        }
        
        body.night-mode #totalSize {
            color: #475569;
        }
        
        body.night-mode #filesList {
            color: #1e293b;
        }
        
        body.night-mode #progressSection p {
            color: #1e293b;
        }
        
        body.night-mode #progressSection strong {
            color: #0f172a;
        }
        
        /* Verlängerungsmodal Texte im Nacht-Modus dunkler */
        body.night-mode .modal-content p {
            color: #1e293b;
        }
        
        
        body.night-mode #uploadModal .password-requirements,
body.night-mode .password-requirements {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

body.night-mode #uploadModal input::placeholder,
body.night-mode #uploadModal textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}
body.night-mode #uploadModal .password-strength span,
body.night-mode .password-strength span {
    color: var(--text-primary) !important;
}

/* Night Mode: Dateien verwalten Modal - Container dunkel */
body.night-mode #fileManagementList {
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

/* Night Mode: Buttons in Dateiliste - gut sichtbar */
body.night-mode .file-item .btn {
    background: #475569 !important;
    color: #f7fafc !important;
    border: 1px solid #64748b !important;
}

body.night-mode .file-item .btn:hover {
    background: #5b6777 !important;
}

body.night-mode .file-item .btn-secondary {
    background: #374151 !important;
    color: #f7fafc !important;
}

body.night-mode .file-item .btn-secondary:hover {
    background: #475569 !important;
}

/* Night Mode: "Link teilen" Button (Premium+ Gradient) */
body.night-mode .file-item .btn[style*="linear-gradient"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* Night Mode: Verschlüsselt Badge */
body.night-mode .file-item span[style*="#a8edea"] {
    background: #667eea !important;
    color: #ffffff !important;
}
        
       /* ========== HILFE MODAL - NACHTMODUS ========== */
body.night-mode #hilfeModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #hilfeModal h4 {
    color: #f1f5f9 !important;
    border-bottom-color: #475569 !important;
}

/* Schnellstart Boxen */
body.night-mode #hilfeModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #f8fafc"] p {
    color: #cbd5e1 !important;
}

/* Grid-Navigation Karten */
body.night-mode #hilfeModal div[style*="background: #f8fafc"][style*="border-left"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #f8fafc"] strong {
    color: #e2e8f0 !important;
}

/* Star-Zellen Bereich */
body.night-mode #hilfeModal div[style*="background: #fdf2f8"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #fdf2f8"] strong {
    color: #f9a8d4 !important;
}

body.night-mode #hilfeModal div[style*="background: #fdf2f8"] p,
body.night-mode #hilfeModal div[style*="background: #fdf2f8"] li {
    color: #cbd5e1 !important;
}

/* Team-Zellen Bereich */
body.night-mode #hilfeModal div[style*="background: #fef2f2"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #fef2f2"] strong {
    color: #f87171 !important;
}

/* Premium+ Bereich */
body.night-mode #hilfeModal div[style*="background: #f5f3ff"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #f5f3ff"] strong {
    color: #c4b5fd !important;
}

/* Teilen Bereich */
body.night-mode #hilfeModal div[style*="background: #f0fdf4"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #f0fdf4"] strong {
    color: #4ade80 !important;
}

/* Sicherheit Bereich */
body.night-mode #hilfeModal div[style*="background: #eef2ff"] {
    background: #2d3748 !important;
}

body.night-mode #hilfeModal div[style*="background: #eef2ff"] strong {
    color: #a5b4fc !important;
}

/* Tipp-Box */
body.night-mode #hilfeModal div[style*="background: #dbeafe"] {
    background: #1e3a5f !important;
    border-left-color: #3b82f6 !important;
}

body.night-mode #hilfeModal div[style*="background: #dbeafe"] p {
    color: #bfdbfe !important;
}
        
        /* ========== FAQ MODAL - NACHTMODUS ========== */
body.night-mode #faqModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #faqModal h4 {
    color: #f1f5f9 !important;
    border-bottom-color: #475569 !important;
}

/* Star-Zellen Bereich */
body.night-mode #faqModal div[style*="background: #fdf2f8"] {
    background: #2d3748 !important;
    border-left-color: #ec4899 !important;
}

body.night-mode #faqModal div[style*="background: #fdf2f8"] h5 {
    color: #f9a8d4 !important;
}

body.night-mode #faqModal div[style*="background: #fdf2f8"] p {
    color: #cbd5e1 !important;
}

/* Team-Zellen Bereich */
body.night-mode #faqModal div[style*="background: #fef2f2"] {
    background: #2d3748 !important;
    border-left-color: #ef4444 !important;
}

body.night-mode #faqModal div[style*="background: #fef2f2"] h5 {
    color: #f87171 !important;
}

/* Exklusive Zelle */
body.night-mode #faqModal div[style*="background: #fef3c7"] {
    background: #2d3748 !important;
    border-left-color: #f59e0b !important;
}

body.night-mode #faqModal div[style*="background: #fef3c7"] h5 {
    color: #fbbf24 !important;
}

/* Premium+ Bereich */
body.night-mode #faqModal div[style*="background: #f5f3ff"] {
    background: #2d3748 !important;
    border-left-color: #8b5cf6 !important;
}

body.night-mode #faqModal div[style*="background: #f5f3ff"] h5 {
    color: #c4b5fd !important;
}

/* Teilen Bereich */
body.night-mode #faqModal div[style*="background: #f0fdf4"] {
    background: #2d3748 !important;
    border-left-color: #25D366 !important;
}

body.night-mode #faqModal div[style*="background: #f0fdf4"] h5 {
    color: #4ade80 !important;
}

/* Sicherheit Bereich */
body.night-mode #faqModal div[style*="background: #eef2ff"] {
    background: #2d3748 !important;
    border-left-color: #667eea !important;
}

body.night-mode #faqModal div[style*="background: #eef2ff"] h5 {
    color: #a5b4fc !important;
}

/* Preis-Übersicht Cards */
body.night-mode #faqModal div[style*="background: #f0fdf4"]:not(.faq-item) {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
}

body.night-mode #faqModal div[style*="background: #e0f2fe"] {
    background: #1e3a5f !important;
}

body.night-mode #faqModal div[style*="background: #fef9c3"] {
    background: #4a3e1a !important;
}

body.night-mode #faqModal div[style*="background: #dcfce7"] {
    background: #1e3a1e !important;
}

body.night-mode #faqModal div[style*="background: #fee2e2"] {
    background: #4a1a1a !important;
}

body.night-mode #faqModal div[style*="background: #fff3cd"] {
    background: #4a3e1a !important;
}

/* Abschluss-Gradient */
body.night-mode #faqModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #4a1d6d 100%) !important;
}
        
        /* ========== AGB MODAL - NACHTMODUS ========== */
body.night-mode #agbModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #agbModal h4 {
    color: #f1f5f9 !important;
}

body.night-mode #agbModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #agbModal div[style*="background: white"] p,
body.night-mode #agbModal div[style*="background: white"] li,
body.night-mode #agbModal div[style*="background: white"] span {
    color: #cbd5e1 !important;
}

body.night-mode #agbModal div[style*="background: white"] strong {
    color: #e2e8f0 !important;
}

/* Star-Zellen Kasten */
body.night-mode #agbModal div[style*="background: #fdf2f8"] {
    background: #2d3748 !important;
    border-color: #9d174d !important;
}

body.night-mode #agbModal div[style*="background: #fdf2f8"] h4 {
    color: #f9a8d4 !important;
}

/* Team-Zellen Kasten */
body.night-mode #agbModal div[style*="background: #fef2f2"] {
    background: #2d3748 !important;
    border-color: #991b1b !important;
}

body.night-mode #agbModal div[style*="background: #fef2f2"] h4 {
    color: #f87171 !important;
}

/* Inhaltsverzeichnis */
body.night-mode #agbModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #agbModal div[style*="background: #f8fafc"] h5 {
    color: #e2e8f0 !important;
}

body.night-mode #agbModal span[style*="background: #e2e8f0"] {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
}

/* Stand & Kontakt */
body.night-mode #agbModal div[style*="background: #f8fafc"]:last-of-type {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #agbModal div[style*="background: #f8fafc"]:last-of-type span {
    color: #cbd5e1 !important;
}

body.night-mode #agbModal div[style*="background: #f8fafc"]:last-of-type span[style*="font-weight: 600"] {
    color: #e2e8f0 !important;
}
        
        /* ========== IMPRESSUM MODAL - NACHTMODUS ========== */
body.night-mode #impressumModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #impressumModal h4,
body.night-mode #impressumModal h5 {
    color: #f1f5f9 !important;
}

/* Header bleibt dunkel */
body.night-mode #impressumModal div[style*="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%)"] {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%) !important;
}

/* Weiße Karten dunkel machen */
body.night-mode #impressumModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #impressumModal div[style*="background: white"] p,
body.night-mode #impressumModal div[style*="background: white"] span,
body.night-mode #impressumModal div[style*="background: white"] strong {
    color: #e2e8f0 !important;
}

body.night-mode #impressumModal div[style*="background: white"] a {
    color: #93c5fd !important;
}

/* Rechtliches Kasten */
body.night-mode #impressumModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #impressumModal div[style*="background: #f8fafc"] h5 {
    color: #f1f5f9 !important;
}

body.night-mode #impressumModal div[style*="background: #f8fafc"] p {
    color: #cbd5e1 !important;
}

body.night-mode #impressumModal div[style*="background: #f8fafc"] span {
    color: #94a3b8 !important;
}

/* Streitschlichtung Kasten */
body.night-mode #impressumModal div[style*="background: #fef3c7"] {
    background: #422006 !important;
    border-color: #854d0e !important;
}

body.night-mode #impressumModal div[style*="background: #fef3c7"] p,
body.night-mode #impressumModal div[style*="background: #fef3c7"] span {
    color: #fde047 !important;
}

body.night-mode #impressumModal div[style*="background: #fef3c7"] a {
    color: #fbbf24 !important;
}

/* Quellenangaben */
body.night-mode #impressumModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #impressumModal div[style*="background: #f1f5f9"] p {
    color: #cbd5e1 !important;
}

/* Social Media Icons */
body.night-mode #impressumModal a[style*="background: #3b82f6"] {
    background: #1e3a8a !important;
}
/* Header im Nachtmodus */
body.night-mode #impressumModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] {
    background: linear-gradient(135deg, #192134 0%, #1e233b 100%) !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

body.night-mode #impressumModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] h4 {
    color: white !important;
}

body.night-mode #impressumModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] p {
    color: #bfdbfe !important;
}
        
        /* ========== DATENSCHUTZ MODAL - NACHTMODUS ========== */
body.night-mode #datenschutzModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #datenschutzModal h4 {
    color: #f1f5f9 !important;
}

body.night-mode #datenschutzModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #datenschutzModal div[style*="background: white"] p,
body.night-mode #datenschutzModal div[style*="background: white"] li,
body.night-mode #datenschutzModal div[style*="background: white"] span {
    color: #cbd5e1 !important;
}

body.night-mode #datenschutzModal div[style*="background: white"] strong {
    color: #e2e8f0 !important;
}

body.night-mode #datenschutzModal a {
    color: #93c5fd !important;
}

/* Datensicherheit Kasten (blau im Tag) */
body.night-mode #datenschutzModal div[style*="background: #e0f2fe"] {
    background: #0c4a6e !important;
    border-color: #0284c7 !important;
}

body.night-mode #datenschutzModal div[style*="background: #e0f2fe"] h4,
body.night-mode #datenschutzModal div[style*="background: #e0f2fe"] p,
body.night-mode #datenschutzModal div[style*="background: #e0f2fe"] li {
    color: #bae6fd !important;
}

/* Zahlungsdaten Kasten (Stripe) */
body.night-mode #datenschutzModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #datenschutzModal div[style*="background: #f1f5f9"] h4 {
    color: #f1f5f9 !important;
}

body.night-mode #datenschutzModal div[style*="background: #f1f5f9"] p,
body.night-mode #datenschutzModal div[style*="background: #f1f5f9"] li {
    color: #cbd5e1 !important;
}

/* Zusammenfassung Kasten */
body.night-mode #datenschutzModal div[style*="background: #f0f9ff"] {
    background: #1e3a5f !important;
    border-color: #0369a1 !important;
}

body.night-mode #datenschutzModal div[style*="background: #f0f9ff"] p {
    color: #7dd3fc !important;
}

/* Inhaltsverzeichnis */
body.night-mode #datenschutzModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #datenschutzModal div[style*="background: #f8fafc"] h5 {
    color: #e2e8f0 !important;
}

body.night-mode #datenschutzModal span[style*="background: #e2e8f0"] {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
}

/* Stand Kasten */
body.night-mode #datenschutzModal div[style*="background: #f8fafc"]:last-of-type {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #datenschutzModal div[style*="background: #f8fafc"]:last-of-type p {
    color: #cbd5e1 !important;
}
        
        /* ========== KONTAKT MODAL - NACHTMODUS ========== */
body.night-mode #kontaktModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #kontaktModal h4,
body.night-mode #kontaktModal h5 {
    color: #f1f5f9 !important;
}

/* Header bleibt hellblau im Nachtmodus? Ja, soll so bleiben wie im Tag */
body.night-mode #kontaktModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    border-color: #3b82f6 !important;
}

body.night-mode #kontaktModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] h4 {
    color: white !important;
}

body.night-mode #kontaktModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] p {
    color: #bfdbfe !important;
}

/* Weiße Karten dunkel machen */
body.night-mode #kontaktModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #kontaktModal div[style*="background: white"] h5 {
    color: #f1f5f9 !important;
}

body.night-mode #kontaktModal div[style*="background: white"] p,
body.night-mode #kontaktModal div[style*="background: white"] span,
body.night-mode #kontaktModal div[style*="background: white"] a {
    color: #cbd5e1 !important;
}

body.night-mode #kontaktModal div[style*="background: white"] a[href^="mailto"] {
    color: #93c5fd !important;
}

body.night-mode #kontaktModal div[style*="background: white"] a[href^="tel"] {
    color: #93c5fd !important;
}

/* FAQ-Bereich */
body.night-mode #kontaktModal div[style*="background: #f0f9ff"] {
    background: #1e3a5f !important;
    border-color: #0369a1 !important;
}

body.night-mode #kontaktModal div[style*="background: #f0f9ff"] h5,
body.night-mode #kontaktModal div[style*="background: #f0f9ff"] p {
    color: #bae6fd !important;
}

body.night-mode #kontaktModal div[style*="background: #f0f9ff"] button {
    background: #0369a1 !important;
    color: white !important;
}

/* Hinweisbox */
body.night-mode #kontaktModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #kontaktModal div[style*="background: #f1f5f9"] p {
    color: #cbd5e1 !important;
}

/* Social Media Icons */
body.night-mode #kontaktModal a[style*="background: #3b82f6"] {
    background: #1e3a8a !important;
}
        
        /* Mobile: Suchfunktion breiter machen */
        @media (max-width: 768px) {
            .global-search-wrapper {
                padding: 0 0.25rem !important;
            }
            
            #globalCellSearch {
                font-size: 0.8rem !important;
                padding: 0.75rem 2.25rem 0.75rem 0.5rem !important;
            }
            
            #globalSearchResults {
                padding: 0.75rem !important;
            }
        }
        
        /* Nur leere Zellen im Nacht-Modus dunkler machen */
        body.night-mode .cell:not(.free):not(.premium-7):not(.premium):not(.premium-plus) {
            background: rgba(51, 65, 85, 0.6);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
            /* Gleichmäßige Beleuchtung von allen Seiten - wie Grid-Umschalter */
            box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.08), 
                        inset 0 -1px 3px rgba(255, 255, 255, 0.08),
                        inset 1px 0 3px rgba(255, 255, 255, 0.08),
                        inset -1px 0 3px rgba(255, 255, 255, 0.08),
                        0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* Tier-Farben bleiben im Nacht-Modus erhalten, mit gleichmäßiger Beleuchtung */
        body.night-mode .cell.premium-7 {
            background: linear-gradient(145deg, #155e75 0%, #0e7490 50%, #0891b2 100%);
            border-color: #083344;
            color: #a5f3fc;
            box-shadow: 
                0 2px 8px rgba(6, 182, 212, 0.2),
                0 4px 16px rgba(6, 182, 212, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.1),
                inset 0 -2px 4px rgba(6, 182, 212, 0.15);
        }
        
        body.night-mode .cell.premium-7:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(6, 182, 212, 0.3),
                0 8px 24px rgba(6, 182, 212, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.15),
                inset 0 -2px 4px rgba(6, 182, 212, 0.2);
        }
        
        body.night-mode .cell.premium {
            background: linear-gradient(145deg, #a16207 0%, #ca8a04 50%, #eab308 100%);
            border-color: #713f12;
            color: #fef9c3;
            box-shadow: 
                0 2px 8px rgba(234, 179, 8, 0.2),
                0 4px 16px rgba(234, 179, 8, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.1),
                inset 0 -2px 4px rgba(234, 179, 8, 0.15);
        }
        
        body.night-mode .cell.premium:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(234, 179, 8, 0.3),
                0 8px 24px rgba(234, 179, 8, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.15),
                inset 0 -2px 4px rgba(234, 179, 8, 0.2);
        }
        
        body.night-mode .cell.premium-plus {
            background: linear-gradient(145deg, #4d7c0f 0%, #65a30d 50%, #84cc16 100%);
            border-color: #365314;
            color: #d9f99d;
            box-shadow: 
                0 2px 8px rgba(132, 204, 22, 0.2),
                0 4px 16px rgba(132, 204, 22, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.1),
                inset 0 -2px 4px rgba(132, 204, 22, 0.15);
        }
        
        body.night-mode .cell.premium-plus:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(132, 204, 22, 0.3),
                0 8px 24px rgba(132, 204, 22, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.15),
                inset 0 -2px 4px rgba(132, 204, 22, 0.2);
        }
        
        
        
        

        
        /* Header - Gleiche Farbe wie Willkommensbereich */
        .header {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border: 1px solid #3b82f6;
            border-radius: 0.5rem;
            padding: 1.5rem 2rem;
            margin: 0 auto 0.5rem auto;
            text-align: center;
            position: relative;
            max-width: 640px;
            overflow: hidden;
            color: #374151;
            transition: all 0.3s ease;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8rem;
        }

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 1.5rem;
            font-weight: 600;
            color: #2365cf;
        }
        
        .logo-text {
        color: #1e40af !important;
    }

    body.night-mode .logo-text {
        color: #aaacfd !important;
    }

        .logo-icon {
            width: 1.4rem;
            height: 1.4rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
        }

        .tagline {
            margin: 0.3rem 0 0 0;
            font-size: 0.9rem;
            color: #391da8;
            font-weight: 500;
        }

        .header-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
        
        /* Theme Toggle - Rechts unten im Header */
        .theme-toggle-corner {
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 1px solid #94a3b8;
            padding: 0.35rem;
            border-radius: 50%;
            width: 1.75rem;
            height: 1.75rem;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        
        .theme-toggle-corner:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* Nacht-Modus Styling für Theme-Toggle Corner */
        body.night-mode .theme-toggle-corner {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.4);
        }
        
        body.night-mode .theme-toggle-corner:hover {
            background: rgba(51, 65, 85, 0.9);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 6px 16px rgba(59, 130, 246, 0.3);
        }
        
        /* Language Toggle - Links neben Theme Toggle */
        .language-toggle-corner {
            position: absolute;
            bottom: 0.5rem;
            right: 2.5rem;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 1px solid #94a3b8;
            padding: 0.35rem;
            border-radius: 50%;
            width: 1.75rem;
            height: 1.75rem;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        
        .language-toggle-corner:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* Nacht-Modus Styling für Language-Toggle Corner */
        body.night-mode .language-toggle-corner {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.4);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.4);
        }
        
        body.night-mode .language-toggle-corner:hover {
            background: rgba(51, 65, 85, 0.9);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 6px 16px rgba(59, 130, 246, 0.3);
        }

        .header-bottom {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .header-info-buttons {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 0.8rem;
        }

        .header-center-logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .center-slogan {
            font-size: 0.95rem;
            font-weight: 600;
            color: #1e40af;
            letter-spacing: 0.5px;
            text-align: center;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .quick-info {
            background: rgba(102, 126, 234, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.2);
            padding: 0.3rem 0.8rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            color: #4f46e5;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .quick-info:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
        }
        
        .quick-info:active {
            transform: translateY(0);
        }

        .info-badges {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
        }

        .mini-btn {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 1px solid #94a3b8;
            padding: 0.4rem 0.8rem;
            border-radius: 1.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: #374151;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            text-decoration: none;
        }

        .mini-btn:hover {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .mini-btn.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }

        .mini-btn.primary:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }

        /* Button - Kompakter */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 1.5rem;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: #374151;
            border: 1px solid #cbd5e0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
            transform: translateY(-1px);
        }

        /* Grid Switcher */
        .grid-switcher {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin: 0 auto 0.3rem auto;
            max-width: 640px;
        }
        /* Weniger Abstand zwischen Grid-Umschalter und Grid */
@media (max-width: 768px) {
    .grid-switcher {
        margin-bottom: 0rem;
    }
    
    .grid-container {
        margin-top: 0rem;
    }
}

        .grid-btn {
            width: 2.5rem;
            height: 2.5rem;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 1px solid #94a3b8;
            border-radius: 0.75rem;
            font-weight: 700;
            font-size: 1rem;
            color: #374151;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .grid-btn:hover {
            transform: translateY(-2px);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 4px 8px rgba(102, 126, 234, 0.3);
        }
        
        .grid-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #5568d3;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        /* Nacht-Modus: Grid-Switcher wie Zellen stylen */
        body.night-mode .grid-btn {
            background: rgba(51, 65, 85, 0.6);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        body.night-mode .grid-btn:hover {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.6);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(59, 130, 246, 0.3);
        }
        
        body.night-mode .grid-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #5568d3;
            color: white;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .grid-btn:hover {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .grid-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .grid-btn.active:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }

        /* Legend - angepasst an Grid */
        .legend {
            display: flex;
            justify-content: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin: 0 auto 0.3rem auto;
            max-width: 640px;
            margin-bottom: 15px !important;
        }
        /* Mehr Abstand zwischen Legend und Buttons auf Handy */
@media (max-width: 768px) {
    .legend {
        margin-top: 1rem;
    }
    
    }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            cursor: pointer;
            padding: 0.3rem 0.6rem;
            border-radius: 0.75rem;
            transition: all 0.2s ease;
            user-select: none;
            background: rgba(226, 232, 240, 0.4);
            border: 1px solid rgba(148, 163, 184, 0.3);
        }
        
        .legend-item:hover {
            background: rgba(102, 126, 234, 0.15);
            border-color: rgba(102, 126, 234, 0.4);
            transform: translateY(-1px);
        }
        
        .legend-item.filter-active {
            background: rgba(102, 126, 234, 0.25);
            border: 2px solid rgba(102, 126, 234, 0.6);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }
        
        /* Nacht-Modus für Legend-Items */
        body.night-mode .legend-item {
            background: rgba(51, 65, 85, 0.5);
            border-color: rgba(100, 116, 139, 0.4);
        }
        
        body.night-mode .legend-item:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.5);
        }
        
        body.night-mode .legend-item.filter-active {
            background: rgba(102, 126, 234, 0.35);
            border-color: rgba(102, 126, 234, 0.7);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .legend-color {
            width: 18px;
            height: 18px;
            border-radius: 0.3rem;
            border: 1px solid rgba(0, 0, 0, 0.15);
            box-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        /* Day mode - Light background for elements between header and grid */
        .grid-switcher,
        .legend {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border-radius: 0.375rem;
            padding: 0.5rem;
            border: 1px solid #3b82f6;
            backdrop-filter: blur(5px);

        }
        
        /* Cell search container in day mode */
        .cell-search-container {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border: 1px solid #3b82f6;
            border-radius: 0.375rem;
            backdrop-filter: blur(5px);
            padding: 0.5rem;
            padding-top: 2px;
            padding-bottom: 2px;
        }
        
        /* Guest hint box in day mode */
        #guestHint {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
            border: 1px solid #3b82f6 !important;
            border-radius: 0.375rem !important;
            backdrop-filter: blur(5px);
        }
        
        /* Cell Search Container */
        .cell-search-container {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin: 0 auto 0.5rem auto;
            max-width: 640px;
            align-items: center;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        #cellSearch {
            padding: 0.4rem 0.7rem;
            border: 1px solid #3b82f6;
            border-radius: 1.5rem;
            font-size: 0.85rem;
            font-weight: 500;
            color: #374151;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            transition: all 0.3s ease;
            width: 200px;
            text-align: center;
        }

        #cellSearch:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            background: white;
        }

        .search-btn {
            padding: 0.4rem 0.9rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 1.5rem;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .search-btn:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        /* Night mode styles for search */
        body.night-mode .cell-search-container {
            background: rgba(51, 65, 85, 0.8);
            border-radius: 0.375rem;
            padding: 0.5rem;
            border: 1px solid rgba(100, 116, 139, 0.3);
            backdrop-filter: blur(10px);
        }

        body.night-mode #cellSearch {
            background: rgba(51, 65, 85, 0.6);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e2e8f0;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        body.night-mode #cellSearch:focus {
            background: rgba(51, 65, 85, 0.8);
            border-color: rgba(100, 116, 139, 0.6);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(59, 130, 246, 0.3);
        }

        body.night-mode .search-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #5568d3;
            color: white;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(102, 126, 234, 0.5);
        }

        body.night-mode .search-btn:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 6px 16px rgba(102, 126, 234, 0.6);
        }

        /* Grid Container - OPTIMIERT: Sehr kompakt zum Header */
        .grid-container {
            background: transparent;
            border-radius: 0;
            padding: 0.5rem 0.5rem 1rem 0.5rem ;
            margin-top: 0 !important;;
            box-shadow: none;
            margin-bottom: 0.8rem;
            width: 100%;
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
            overflow: visible; /* WICHTIG: Überlauf erlauben für Tooltips */
            box-sizing: border-box;
            position: relative; /* Für korrekte Positionierung */
            z-index: 100; /* Höher als Legende und Grid-Switcher */
        }

        /* Grid */
        .grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 3px;
            max-width: 640px;
            margin: 0 auto;
            width: 100%;
            max-width: 100%;
            overflow: visible; /* WICHTIG: Überlauf erlauben */
            box-sizing: border-box;
        }

        .cell {
            aspect-ratio: 1;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 1px solid #94a3b8; /* Dunkler Rahmen für bessere Sichtbarkeit */
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            color: #374151;
            min-height: 48px;
            flex-direction: column;
            gap: 0.2rem;
            /* Verstärkter 3D-Effekt */
            box-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.12),
                0 1px 2px rgba(0, 0, 0, 0.08),
                inset 0 1px 1px rgba(255, 255, 255, 0.5),
                inset 0 -1px 1px rgba(0, 0, 0, 0.05);
        }

        
 

        .cell::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, transparent 50%, rgba(243,244,246,0.3) 100%);
            border-radius: var(--radius-lg);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .cell:hover {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .cell:hover::before {
            opacity: 1;
        }

        /* Free = Kostenlos aber BESETZT  */
        .cell.free {
            background: linear-gradient(145deg, #f4daf3 0%, #f8cfeb 50%, #fcb4ee 100%) !important;
            color: #0c4a6e !important;
            border: 1px solid #ef78d9 !important;
            
        }

        /* Nachtmodus - dunkleres Pink/Lila */
body.night-mode .cell.free {
    background: linear-gradient(145deg, #30021f 0%, #6a0745 50%, #30021f 100%) !important;
    border: 1px solid #ef78d9 !important;
    color: #fbcfe8 !important;
    box-shadow: 0 0 5px rgba(239, 120, 217, 0.2);
}
        .cell.free:hover {
            background: linear-gradient(145deg, #f4daf3 0%, #f8cfeb 50%, #fca9ec 100%) !important;
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(14, 165, 233, 0.25),
                0 8px 24px rgba(14, 165, 233, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.7),
                inset 0 -2px 4px rgba(14, 165, 233, 0.1) !important;
            border-color: #f734b6 !important;
        }

        /* Hover-Effekt im Nachtmodus */
body.night-mode .cell.free:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(239, 120, 217, 0.3), inset 0 2px 0 rgba(255,255,255,0.1);
}

        /* Premium 7 Tage - Sanftes Cyan */
        .cell.premium-7 {
            background: linear-gradient(145deg, #a5f3fc 0%, #67e8f9 50%, #22d3ee 100%);
            color: #0e7490;
            border-color: #06b6d4;
            /* Sanfter 3D-Effekt mit Volume */
            box-shadow: 
                0 2px 8px rgba(6, 182, 212, 0.15),
                0 4px 16px rgba(6, 182, 212, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.5),
                inset 0 -2px 4px rgba(6, 182, 212, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* Nachtmodus - Premium-7 Zelle */
body.night-mode .cell.premium-7 {
    
    border-color: #77cafb !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3) !important;
}

        .cell.premium-7:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(6, 182, 212, 0.25),
                0 8px 24px rgba(6, 182, 212, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.6),
                inset 0 -2px 4px rgba(6, 182, 212, 0.1) !important;
            border-color: #0891b2 !important;
        }

        /* Premium 14 Tage - Sanftes Gelb */
        .cell.premium {
            background: linear-gradient(145deg, #fef9c3 0%, #fef08a 50%, #fde047 100%);
            color: #854d0e;
            border-color: #eab308;
            /* Sanfter 3D-Effekt mit Volume */
            box-shadow: 
                0 2px 8px rgba(234, 179, 8, 0.15),
                0 4px 16px rgba(234, 179, 8, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.6),
                inset 0 -2px 4px rgba(234, 179, 8, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Nachtmodus - Premium Zelle */
body.night-mode .cell.premium {
    
    border-color: #fbe87e !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3) !important;
}

        .cell.premium:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(234, 179, 8, 0.25),
                0 8px 24px rgba(234, 179, 8, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.7),
                inset 0 -2px 4px rgba(234, 179, 8, 0.1) !important;
            border-color: #ca8a04 !important;
        }

        /* Premium+ 28 Tage - Sanftes Grün */
        .cell.premium-plus {
            background: linear-gradient(145deg, #d9f99d 0%, #bef264 50%, #a3e635 100%);
            color: #3f6212;
            border-color: #84cc16;
            /* Sanfter 3D-Effekt mit Volume */
            box-shadow: 
                0 2px 8px rgba(132, 204, 22, 0.15),
                0 4px 16px rgba(132, 204, 22, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.6),
                inset 0 -2px 4px rgba(132, 204, 22, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

         /* Nachtmodus - Premium-plus Zelle */
body.night-mode .cell.premium-plus {
    
    border-color: #aefba9 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3) !important;
}


        .cell.premium-plus:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 4px 12px rgba(132, 204, 22, 0.25),
                0 8px 24px rgba(132, 204, 22, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.7),
                inset 0 -2px 4px rgba(132, 204, 22, 0.1) !important;
            border-color: #65a30d !important;
        }

        /* ========== PERSÖNLICHE ZELLE - GOLD PREMIUM ========== */
.cell.personal {
    background: linear-gradient(135deg, #f4fac8 0%, #ebfc6a 50%, #f0e005 100%) !important;
    border: 1px solid #7a7202 !important;
    cursor: default !important;
    pointer-events: auto;
    position: relative;
    
}

.cell.personal.owner {
    cursor: pointer !important;
    pointer-events: auto;
}

.cell.personal::before {
    content: '💎';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    z-index: 2;
}

.cell.personal .cell-number {
    margin-top: 0.5rem;
}

.cell.personal:hover {
    transform: translateY(-10px) scale(1.05);
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%) !important;
   
}


.cell.personal:hover::before {
    opacity: 0 !important;
    display: none !important;
}

.cell.personal.owner:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

.cell.personal .tooltip {
    background: linear-gradient(135deg, #b45309, #92400e);
    color: #fef3c7;
}

.cell.personal .cell-lock {
    color: #b45309;
}

@keyframes personalGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.5); }
}

/* Nachtmodus - Persönliche Zelle */
body.night-mode .cell.personal {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3) !important;
}

body.night-mode .cell.personal .tooltip {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}

body.night-mode .cell.personal .cell-lock {
    color: #fbbf24;
}




/* ========== ZELLENTYP-AUSWAHL MODAL ========== */
.cell-type-option {
    border: 2px solid var(--border-light);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg-secondary);
}

.cell-type-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.cell-type-option.personal {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.5) 0%, rgba(252, 211, 77, 0.2) 100%);
}

.cell-type-option.personal:hover {
    border-color: #b45309;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.8) 0%, rgba(252, 211, 77, 0.4) 100%);
}

.cell-type-option.standard {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.5) 0%, rgba(191, 219, 254, 0.2) 100%);
}

.cell-type-option.standard:hover {
    border-color: #1d4ed8;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.8) 0%, rgba(191, 219, 254, 0.4) 100%);
}

.cell-type-icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.cell-type-info {
    flex: 1;
}

.cell-type-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cell-type-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.cell-type-info ul li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.cell-type-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    display: inline-block;
}

.cell-type-option.personal .cell-type-price {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.cell-type-option.standard .cell-type-price {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

/* Nachtmodus - Zellentyp Modal */
body.night-mode .cell-type-option {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

body.night-mode .cell-type-option.personal {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.3) 0%, rgba(180, 83, 9, 0.2) 100%);
    border-color: #b45309;
}

body.night-mode .cell-type-option.personal:hover {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.5) 0%, rgba(180, 83, 9, 0.3) 100%);
    border-color: #f59e0b;
}

body.night-mode .cell-type-option.standard {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(29, 78, 216, 0.2) 100%);
    border-color: #3b82f6;
}

body.night-mode .cell-type-option.standard:hover {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.5) 0%, rgba(29, 78, 216, 0.3) 100%);
    border-color: #60a5fa;
}

body.night-mode .cell-type-info h3 {
    color: var(--text-primary);
}

body.night-mode .cell-type-info ul li {
    color: var(--text-secondary);
}

body.night-mode .cell-type-price {
    background: var(--bg-tertiary);
}

/* Mobile Anpassung */
@media (max-width: 480px) {
    .cell-type-option {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .cell-type-icon {
        font-size: 2rem;
    }
    
    .cell-type-info ul {
        text-align: left;
    }
}

        /* LOCKOUT STATE - Gesperrte Zellen */
        .cell.locked {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            filter: grayscale(50%) !important;
            pointer-events: auto !important; /* Erlaubt Klicks für Fehlermeldung */
        }

        .cell.locked:hover {
            transform: none !important;
            box-shadow: none !important;
            background: inherit !important;
        }

        .cell.locked .tooltip {
            background: #ef4444 !important;
            color: white !important;
            border-color: #ef4444 !important;
        }

        .cell.locked.top-row .tooltip::after {
            border-top-color: #ef4444 !important;
        }

        .cell.locked:not(.top-row) .tooltip::after {
            border-top-color: #ef4444 !important;
        }

        /* SEARCH HIGHLIGHT - Hervorhebung für gefundene Zellen */
        .cell.search-highlight {
            animation: searchPulse 2s ease-in-out;
            border: 3px solid #667eea !important;
            box-shadow: 
                0 0 20px rgba(102, 126, 234, 0.6),
                0 0 40px rgba(102, 126, 234, 0.4),
                0 0 60px rgba(102, 126, 234, 0.2) !important;
            transform: scale(1.05) !important;
            z-index: 1000 !important;
        }

        @keyframes searchPulse {
            0%, 100% {
                box-shadow: 
                    0 0 20px rgba(102, 126, 234, 0.6),
                    0 0 40px rgba(102, 126, 234, 0.4),
                    0 0 60px rgba(102, 126, 234, 0.2);
            }
            50% {
                box-shadow: 
                    0 0 30px rgba(102, 126, 234, 0.8),
                    0 0 60px rgba(102, 126, 234, 0.6),
                    0 0 90px rgba(102, 126, 234, 0.4);
            }
        }

        /* Night mode search highlight */
        body.night-mode .cell.search-highlight {
            border-color: #60a5fa !important;
            box-shadow: 
                0 0 25px rgba(96, 165, 250, 0.7),
                0 0 50px rgba(96, 165, 250, 0.5),
                0 0 75px rgba(96, 165, 250, 0.3) !important;
        }

        /* TOOLTIP - DYNAMIC POSITIONING FIX */
        .tooltip {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            color: black;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            border: 1px solid #e2e8f0;
            font-size: 0.8rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 10000; /* SEHR HOHER Z-INDEX - über allem */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            max-width: 200px;
        }

        /* Standard-Position: oberhalb der Zelle */
        .tooltip {
            bottom: 120%;
        }

        .tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: white;
        }

        /* FIXED: Top-row tooltips - zeige sie WEIT OBERHALB des Grids */
        .cell.top-row .tooltip {
            bottom: 150%; /* NOCH höher über der Zelle */
            z-index: 10001; /* HÖCHSTER Z-Index für oberste Reihe */
            background: #4f46e5; /* Andere Farbe für bessere Sichtbarkeit */
            color: white;
            border-color: #4f46e5;
        }

        .cell.top-row .tooltip::after {
            border-top-color: #4f46e5; /* Passender Pfeil */
        }

        .cell:hover .tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Modal Styles - fest zentriert */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(12px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            overflow-x: hidden;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: var(--bg-tertiary);
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            max-width: 480px;
            width: 85%;
            max-height: 85vh;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--border-light);
            box-sizing: border-box;
            margin: 0 auto;
        }

        .modal-content.large {
            max-width: 90vw;
            max-height: 85vh;
            width: 900px;
            display: flex;
            flex-direction: column;
        }

        .modal-content.small {
            max-width: 400px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.2rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid var(--border-light);
        }

        .modal-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-muted);
            padding: 0.5rem;
        }

        .close-btn:hover {
            color: var(--text-primary);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            align-items: start;
            margin: auto 0;
            flex: 1;
            align-content: center;
        }
        
        /* Mobile Anpassung - alle Modals fest zentriert */
        @media (max-width: 767px) {
            body {
                overflow-x: hidden !important;
            }
            
            .modal {
                padding: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                left: 0 !important;
                right: 0 !important;
                top: 0 !important;
                bottom: 0 !important;
                overflow-x: hidden !important;
                display: none;
                justify-content: center !important;
                align-items: center !important;
                position: fixed !important;
            }
            
            .modal.active {
                display: flex !important;
            }
            
            .modal-content,
            .modal-content.small,
            .modal-content.large {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                transform: none !important;
                width: 92% !important;
                max-width: 92% !important;
                min-width: auto !important;
                max-height: 85vh;
                margin: 0 auto !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
            }
            
            .modal-content.large {
                max-height: 90vh;
                overflow-y: auto;
                padding: 1rem;
            }
            
            .pricing-grid {
                display: flex;
                flex-direction: column;
                gap: 0.8rem;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            
            .pricing-card {
                width: 100% !important;
                max-width: none !important;
                min-width: 0;
                padding: 1.2rem;
                margin: 0;
                box-sizing: border-box;
                flex: none;
            }
            
            .pricing-title {
                font-size: 1.4rem;
                margin-bottom: 0.5rem;
            }
            
            .pricing-price {
                font-size: 2rem;
                margin-bottom: 1rem;
            }
            
            .pricing-features {
                font-size: 0.9rem;
                margin-bottom: 1rem;
            }
            
            .btn {
                width: 100%;
                padding: 0.8rem;
                font-size: 1rem;
            }
            
            /* Grid auf Mobile fest zentrieren */
            .grid-container {
                width: 100% !important;
                max-width: 100% !important;
                padding: 1.5rem 0.3rem 1rem 0.3rem !important; /* Weitere 20px näher auf Mobile */
                overflow: visible !important;
                box-sizing: border-box !important;
            }
            
            .grid {
                width: 100% !important;
                max-width: 100% !important;
                overflow: visible !important;
            }
            
            /* Mobile search container */
            .cell-search-container {
                flex-direction: column;
                gap: 0.8rem;
                padding: 1rem;
                margin: 0 auto 1rem auto;
            }
            
            #cellSearch {
                width: 100%;
                max-width: 280px;
                font-size: 1rem;
                padding: 0.7rem 1rem;
            }
            
            .search-btn {
                width: 100%;
                max-width: 280px;
                padding: 0.7rem 1rem;
                font-size: 1rem;
            }
        }

        .pricing-card {
            background: var(--bg-secondary);
            border: 2px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: 0.6rem;
            text-align: center;
            transition: all 0.3s;
            min-height: 260px;
            max-width: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .pricing-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .pricing-card.featured {
            border-color: rgba(102, 126, 234, 0.5);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        }

        .pricing-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.3rem;
        }

        .pricing-duration {
            color: var(--text-muted);
            margin-bottom: 0.6rem;
            font-size: 0.9rem;
        }

        .pricing-price {
            font-size: 1.6rem;
            font-weight: 700;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.6rem;
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 0.8rem;
            font-size: 0.85rem;
        }

        .pricing-features li {
            padding: 0.15rem 0;
            color: var(--text-secondary);
        }

        .pricing-features li::before {
            content: '✓';
            color: #48bb78;
            margin-right: 0.5rem;
            font-weight: 600;
        }

        /* Download Modal Styles */
        .download-info {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .download-cell-number {
            font-size: 2rem;
            font-weight: 700;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }

        .download-status {
            padding: 0.5rem 1rem;
            border-radius: 1rem;
            font-weight: 500;
            margin-bottom: 1rem;
            display: inline-block;
        }

        /* Night Mode: "GRATIS" Badge im Download-Modal - dunkler/besser sichtbar (Türkis/Blau) */
body.night-mode .download-status.free {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

        .download-status.free {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            color: #1e40af;
        }

        .download-status.premium-7 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .download-status.premium {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }

        .download-status.premium-plus {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #374151;
        }

        .password-section {
            margin: 1.5rem 0;
        }

        .password-input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-lg);
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .password-input:focus {
            outline: none;
            border-color: rgba(102, 126, 234, 0.5);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .download-actions {
            display: flex;
            gap: 0.8rem;
            justify-content: center;
        }

        /* Upload Modal Styles */
        .upload-info {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .upload-cell-number {
            font-size: 2rem;
            font-weight: 700;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }

        .file-upload-area {
            border: 2px dashed var(--border-light);
            border-radius: var(--radius-lg);
            padding: 2rem;
            text-align: center;
            margin: 1rem 0;
            transition: border-color 0.3s;
            cursor: pointer;
        }

        .file-upload-area:hover {
            border-color: rgba(102, 126, 234, 0.5);
            background: rgba(102, 126, 234, 0.05);
        }

        .file-upload-area.dragover {
            border-color: rgba(102, 126, 234, 0.8);
            background: rgba(102, 126, 234, 0.1);
        }

        .upload-icon {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        .file-input {
            display: none;
        }

        .password-requirements {
            background: #f8fafc;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            padding: 0.8rem;
            margin: 0.5rem 0;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .password-strength {
            margin-top: 0.5rem;
        }

        .strength-meter {
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }

        .strength-fill {
            height: 100%;
            transition: all 0.3s;
            border-radius: 3px;
        }

        .strength-weak { background: #ef4444; width: 25%; }
        .strength-fair { background: #f59e0b; width: 50%; }
        .strength-good { background: #10b981; width: 75%; }
        .strength-strong { background: #059669; width: 100%; }

        .progress-section {
            margin: 1.5rem 0;
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 0.5rem;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #34d399);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }

        .progress-text {
            text-align: center;
            font-weight: 600;
            color: var(--text-primary);
        }

        .upload-actions {
            display: flex;
            gap: 0.8rem;
            justify-content: center;
        }

        .selected-file {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 0.5rem;
            margin-top: 1rem;
        }

        /* Auth Tabs */
        .auth-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--border-light);
        }

        .auth-tab {
            flex: 1;
            padding: 0.75rem 1rem;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            bottom: -2px;
        }

        .auth-tab:hover {
            color: var(--text-primary);
            background: rgba(102, 126, 234, 0.05);
        }

        .auth-tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
        }

        .auth-tab-content {
            display: none;
        }

        .auth-tab-content.active {
            display: block;
        }

        /* Form Styles */
        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--border-light);
            border-radius: 0.5rem;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s;
            background: var(--bg-tertiary);
            box-sizing: border-box;
        }

        .form-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 0.8rem;
            margin-top: 1.5rem;
            flex-direction: column;
        }

        .auth-info {
            border-top: 1px solid var(--border-light);
            padding-top: 1rem;
            text-align: center;
        }

        /* Toast */
        .toast {
            position: fixed;
            top: 1rem;
            right: 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-light);
            border-left: 4px solid #48bb78;
            border-radius: var(--radius-lg);
            padding: 1rem;
            box-shadow: var(--shadow-lg);
            z-index: 1100;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        }

        .toast.show {
            transform: translateX(0);
        }

        /* ========== NUR FÜR HANDY (max-width: 768px) ========== */
@media (max-width: 768px) {
    /* Verhindert horizontales Scrollen */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    }
    @media (max-width: 768px) {
    .container {
        margin-top: 10px !important;
    }
    /* Alle Container auf 100% Breite setzen */
    .container, 
    .grid-container, 
    .grid, 
    .header, 
    .footer, 
    .legend, 
    .grid-switcher {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Verhindert, dass Inhalte überlaufen */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Korrigiert die Container-Paddings */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        
    }
/* 🔥 NEU: 50px Abstand von oben für das Grid */
    .grid-container {
        margin-top: 20px !important;
    }


/* Desktop: wieder auf 640px begrenzen */

.container {
    max-width: 640px;
    margin-top: 10px !important;
    padding: 0.7rem;
}

.grid-container {
    max-width: 640px;
    margin: 0 auto;
   
}            
            .header {
                padding: 0.8rem;
                margin-bottom: 1rem;
                max-width: 320px;
            }
            
            .header-top {
                flex-direction: column;
                gap: 0.5rem;
                margin-bottom: 0.5rem;
                text-align: center;
            }
            
            .header-actions {
                justify-content: center;
            }
            
            .header-bottom {
                gap: 0.3rem;
            }
            
            .logo {
                font-size: 1.2rem;
            }
            
            .logo-icon {
                width: 1.2rem;
                height: 1.2rem;
                font-size: 0.7rem;
            }
            
            .tagline {
                font-size: 0.9rem;
            }
            
            .quick-info, .mini-btn {
                font-size: 0.7rem;
                padding: 0.2rem 0.5rem;
            }
            
            .grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 3px;
                max-width: 320px;
            }
            
            .cell {
                min-height: 40px;
                font-size: 0.75rem;
                font-weight: 600;
            }
            
            .legend {
                gap: 0.6rem;
                max-width: 320px;
            }
            
            .info-badges {
                gap: 0.4rem;
            }
            
            .info-badge {
                font-size: 0.75rem;
                padding: 0.3rem 0.6rem;
            }
        }

        @media (max-width: 480px) {
            .grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 3px;
                max-width: 300px;
            }
            
            .cell {
                min-height: 35px;
                font-size: 0.9rem;
            }
        }

        /* Footer Buttons - gleicher Style wie Header Buttons (ohne Schatten) */
        .footer-buttons {
            display: flex;
            justify-content: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin: 1rem auto 0 auto;
            max-width: 640px;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border: 1px solid #3b82f6;
            border-radius: 0.75rem;
            box-shadow: 
                0 2px 6px rgba(59, 130, 246, 0.15),
                0 1px 3px rgba(59, 130, 246, 0.1),
                inset 0 1px 1px rgba(255, 255, 255, 0.5);
        }

        .footer-btn {
            background: rgba(102, 126, 234, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.2);
            padding: 0.3rem 0.8rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            color: #4f46e5;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }

        .footer-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
        }
        
        /* Footer-Buttons im Nacht-Modus */
        body.night-mode .footer-btn {
            color: #cbd5e1;
        }
        
        body.night-mode .footer-btn:hover {
            color: #f1f5f9;
            background: rgba(102, 126, 234, 0.25);
            border-color: rgba(102, 126, 234, 0.5);
        }
        
        /* Toast-Text im Nacht-Modus dunkler machen */
        body.night-mode .toast {
            color: #1e293b;
        }
        
        /* Preis-Modal Texte im Nacht-Modus dunkler machen */
        body.night-mode .pricing-card {
            color: #1e293b;
        }
        
        

        /* Night Mode: "Meine Zellen" Modal - Subscription Items lesbar machen */
body.night-mode .subscription-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

body.night-mode .subscription-cell-number {
    color: var(--text-primary) !important;
}

body.night-mode .subscription-details,
body.night-mode .subscription-details div,
body.night-mode .subscription-details span {
    color: var(--text-primary) !important;
}

body.night-mode .subscription-info {
    color: var(--text-primary) !important;
}

/* Night Mode: Files-List Container in Meine Zellen */
body.night-mode .files-list,
body.night-mode #subscriptionContent .files-list {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

/* Night Mode: Premium+ Badge in Meine Zellen - dunkler/besser sichtbar (Türkis/Blau) */
body.night-mode .subscription-tier.premium-plus {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
body.night-mode .subscription-tier.personal {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%);
    color: #fef3c7;
    border-color: #fbbf24;
}

        .footer-btn:active {
            transform: translateY(0);
        }

        /* Night Mode: E-Mail-Bestätigungs-Banner dunkel machen */

body.night-mode #emailVerificationHint {

background: linear-gradient(135deg, #374151 0%, #475569 100%) !important;

border: 1px solid #64748b !important;

color: #f7fafc !important;

}

body.night-mode #emailVerificationHint strong {

color: #ffffff !important;

}

body.night-mode #emailVerificationHint .mini-btn {

background: #1e293b !important;

color: #f7fafc !important;

border: 1px solid #475569 !important;

}

body.night-mode #emailVerificationHint .mini-btn:hover {

background: #334155 !important;

color: #ffffff !important;

}

/* ========== FEATURES MODAL - NACHTMODUS ========== */
body.night-mode #featuresModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #featuresModal h4 {
    color: #f1f5f9 !important;
}

body.night-mode #featuresModal h4[style*="color: #667eea"] {
    color: #a5b4fc !important;
}

body.night-mode #featuresModal h4[style*="color: #ec4899"] {
    color: #f9a8d4 !important;
}

body.night-mode #featuresModal h4[style*="color: #ef4444"] {
    color: #f87171 !important;
}

body.night-mode #featuresModal h4[style*="color: #f59e0b"] {
    color: #fbbf24 !important;
}

body.night-mode #featuresModal h4[style*="color: #8b5cf6"] {
    color: #c4b5fd !important;
}

body.night-mode #featuresModal h4[style*="color: #22c55e"] {
    color: #4ade80 !important;
}

body.night-mode #featuresModal h4[style*="color: #0ea5e9"] {
    color: #7dd3fc !important;
}

body.night-mode #featuresModal h4[style*="color: #f97316"] {
    color: #fdba74 !important;
}

/* Feature-Boxen */
body.night-mode #featuresModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #featuresModal div[style*="background: #f8fafc"] ul,
body.night-mode #featuresModal div[style*="background: #f8fafc"] li {
    color: #cbd5e1 !important;
}

/* Star-Zellen Box */
body.night-mode #featuresModal div[style*="background: #fdf2f8"] {
    background: #2d3748 !important;
    border-color: #9d174d !important;
}

/* Team-Zellen Box */
body.night-mode #featuresModal div[style*="background: #fef2f2"] {
    background: #2d3748 !important;
    border-color: #991b1b !important;
}

/* Exklusive Zelle Box */
body.night-mode #featuresModal div[style*="background: #fef3c7"] {
    background: #2d3748 !important;
    border-color: #b45309 !important;
}

/* Premium+ Box */
body.night-mode #featuresModal div[style*="background: #f5f3ff"] {
    background: #2d3748 !important;
    border-color: #6d28d9 !important;
}

/* Teilen Box */
body.night-mode #featuresModal div[style*="background: #f0fdf4"] {
    background: #2d3748 !important;
    border-color: #166534 !important;
}

/* Dateiverwaltung Box */
body.night-mode #featuresModal div[style*="background: #e0f2fe"] {
    background: #2d3748 !important;
    border-color: #0369a1 !important;
}

/* Benutzerfreundlich Box */
body.night-mode #featuresModal div[style*="background: #fff7ed"] {
    background: #2d3748 !important;
    border-color: #c2410c !important;
}

/* Tarifübersicht Cards */
body.night-mode #featuresModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
}

body.night-mode #featuresModal div[style*="background: #f1f5f9"] strong {
    color: #f1f5f9 !important;
}

/* Alle Textfarben in Boxen anpassen */
body.night-mode #featuresModal li,
body.night-mode #featuresModal p {
    color: #cbd5e1 !important;
}

body.night-mode #featuresModal strong {
    color: #e2e8f0 !important;
}

/* Abschluss-Gradient */
body.night-mode #featuresModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #4a1d6d 100%) !important;
}

/* Kleine Kästchen im Nachtmodus */
body.night-mode #featuresModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}
/* Feature-Karten gleichmäßig gestalten */
#featuresModal .feature-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
}

#featuresModal .feature-card ul {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Für mobile Ansicht umschalten auf 2 Spalten */
@media (max-width: 768px) {
    #featuresModal div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    #featuresModal div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #featuresModal div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

        /* FAQ Modal - Komplett für Night Mode angepasst */
        body.night-mode #faqModal .modal-content {
            background: #1e293b !important;
            color: #e2e8f0 !important;
        }
        
        /* Alle Überschriften hell machen */
        body.night-mode #faqModal h3,
        body.night-mode #faqModal h4,
        body.night-mode #faqModal h5 {
            color: #f1f5f9 !important;
        }
        
        /* Alle Texte und Paragraphen hell machen */
        body.night-mode #faqModal p,
        body.night-mode #faqModal strong,
        body.night-mode #faqModal li {
            color: #e2e8f0 !important;
        }
        
        /* FAQ-Boxen: Hintergrund dunkel, Borders hell */
        body.night-mode #faqModal div[style*="background: #f8fafc"],
        body.night-mode #faqModal div[style*="background: #f0fdf4"],
        body.night-mode #faqModal div[style*="background: #fef2f2"],
        body.night-mode #faqModal div[style*="background: #fefce8"],
        body.night-mode #faqModal div[style*="background: #f5f3ff"],
        body.night-mode #faqModal div[style*="background: #f0f9ff"] {
            background: #334155 !important;
            border-left-color: #64748b !important;
        }
        
        /* Antworten in FAQ-Boxen noch heller machen */
        body.night-mode #faqModal div[style*="background:"] p,
        body.night-mode #faqModal div[style*="background:"] strong {
            color: #f1f5f9 !important;
        }
        
        /* Kategorie-Überschriften (h4) mit Farben */
        body.night-mode #faqModal h4[style*="color: #667eea"] {
            color: #818cf8 !important;
        }
        body.night-mode #faqModal h4[style*="color: #059669"] {
            color: #34d399 !important;
        }
        body.night-mode #faqModal h4[style*="color: #dc2626"] {
            color: #f87171 !important;
        }
        body.night-mode #faqModal h4[style*="color: #7c2d12"] {
            color: #fbbf24 !important;
        }
        body.night-mode #faqModal h4[style*="color: #7c3aed"] {
            color: #a78bfa !important;
        }
        body.night-mode #faqModal h4[style*="color: #0284c7"] {
            color: #38bdf8 !important;
        }
        
        /* Border-Bottom für h4 */
        body.night-mode #faqModal h4[style*="border-bottom"] {
            border-bottom-color: #475569 !important;
        }
        
        /* Gradient-Box am Ende */
        body.night-mode #faqModal div[style*="background: linear-gradient"] {
            background: linear-gradient(135deg, #4338ca 0%, #581c87 100%) !important;
        }
        
        /* Buttons in der Gradient-Box */
        body.night-mode #faqModal div[style*="background: linear-gradient"] button {
            background: #f1f5f9 !important;
            color: #4338ca !important;
        }
        
        body.night-mode #faqModal div[style*="background: linear-gradient"] button:hover {
            background: #e2e8f0 !important;
        }
        
        /* Tipp am Ende */
        body.night-mode #faqModal div[style*="background: linear-gradient"] + div p {
            color: #94a3b8 !important;
        }

/* Hilfe Modal - TIPP Box im Night Mode */
body.night-mode #hilfeModal div[style*="background: #e0f2fe"] {
    background: #3f4f66 !important;
    border-left-color: #38bdf8 !important;
}

body.night-mode #hilfeModal div[style*="background: #e0f2fe"] p {
    color: #f1f5f9 !important;
}

body.night-mode #hilfeModal div[style*="background: #e0f2fe"] strong {
    color: #f1f5f9 !important;
}

/* Auth Modal - Tabs im Night Mode */
body.night-mode .auth-tab {
    color: #94a3b8 !important;
}

body.night-mode .auth-tab:hover {
    color: #e2e8f0 !important;
    background: rgba(102, 126, 234, 0.15) !important;
}

body.night-mode .auth-tab.active {
    color: #818cf8 !important;
    border-bottom-color: #818cf8 !important;
}

body.night-mode .auth-tabs {
    border-bottom-color: #475569 !important;
}

/* Auth Modal - Placeholder heller machen */
body.night-mode #authModal .form-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

body.night-mode #authModal input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}


/* Preis-Modal Buttons mit Grid-Farben */
#priceModal #freeTierButton {
    background: linear-gradient(145deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%) !important;
    color: #0c4a6e !important;
    border: 1px solid #0ea5e9 !important;
    font-weight: 600;
}

#priceModal #freeTierButton:hover {
    background: linear-gradient(145deg, #bae6fd 0%, #7dd3fc 50%, #38bdf8 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

#priceModal .pricing-card:nth-child(2) .btn {
    background: linear-gradient(145deg, #a5f3fc 0%, #67e8f9 50%, #22d3ee 100%) !important;
    color: #0e7490 !important;
    border: 1px solid #06b6d4 !important;
    font-weight: 600;
}

#priceModal .pricing-card:nth-child(2) .btn:hover {
    background: linear-gradient(145deg, #67e8f9 0%, #22d3ee 50%, #06b6d4 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

#priceModal .pricing-card:nth-child(3) .btn {
    background: linear-gradient(145deg, #fef9c3 0%, #fef08a 50%, #fde047 100%) !important;
    color: #854d0e !important;
    border: 1px solid #eab308 !important;
    font-weight: 600;
}

#priceModal .pricing-card:nth-child(3) .btn:hover {
    background: linear-gradient(145deg, #fef08a 0%, #fde047 50%, #facc15 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
}

#priceModal .pricing-card:nth-child(4) .btn {
    background: linear-gradient(145deg, #d9f99d 0%, #bef264 50%, #a3e635 100%) !important;
    color: #3f6212 !important;
    border: 1px solid #84cc16 !important;
    font-weight: 600;
}

#priceModal .pricing-card:nth-child(4) .btn:hover {
    background: linear-gradient(145deg, #bef264 0%, #a3e635 50%, #84cc16 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(132, 204, 22, 0.3);
}

/* Night Mode Anpassungen */
body.night-mode #priceModal #freeTierButton {
    background: linear-gradient(145deg, #bac6ea 0%, #0e7490 50%, #c8eafb 100%) !important;
    color: #a5f3fc !important;
}

body.night-mode #priceModal .pricing-card:nth-child(2) .btn {
    background: linear-gradient(145deg, #155e75 0%, #0e7490 50%, #0891b2 100%) !important;
    color: #a5f3fc !important;
}

body.night-mode #priceModal .pricing-card:nth-child(3) .btn {
    background: linear-gradient(145deg, #a16207 0%, #ca8a04 50%, #eab308 100%) !important;
    color: #fef9c3 !important;
}

body.night-mode #priceModal .pricing-card:nth-child(4) .btn {
    background: linear-gradient(145deg, #4d7c0f 0%, #65a30d 50%, #84cc16 100%) !important;
    color: #ecfccb !important;
}

        /* Footer */
        .footer {
            text-align: center;
            padding: 1rem 0;
            color: var(--text-muted);
            font-size: 0.8rem;
            border-top: 1px solid var(--border-light);
            margin-top: 1rem;
        }
        
        /* Subscription Management Styles */
        .subscription-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
        }
        
        .subscription-item {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            gap: 1rem;
        }
        
        @media (max-width: 768px) {
            .subscription-item {
                padding: 1rem;
            }
         

            
            .subscription-cell-number {
                font-size: 1.2rem !important;
            }
            
            .subscription-details {
                font-size: 0.8rem !important;
            }
        }
        
        .subscription-item:hover {
            border-color: #667eea;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        }
        
        .subscription-item.expiring {
            border-color: #ef4444;
            background: #fef2f2;
        }
        
        .subscription-info {
            flex: 1;
        }
        
        .subscription-cell-number {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 0.5rem;
        }
        
        .subscription-details {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        
        .subscription-tier {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .subscription-tier.free {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }
        
        .subscription-tier.premium-7 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        
        .subscription-tier.premium {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }
        
        .subscription-tier.premium-plus {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
        }
        .subscription-tier.personal {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
    color: #78350f;
    border: 1px solid #b45309;
}
        
        .subscription-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .subscription-actions .btn {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }
        
        /* Mobile Optimierung für Buttons */
        @media (max-width: 768px) {
            .subscription-item {
                flex-direction: column;
                align-items: stretch;
            }
            
            .subscription-actions {
                width: 100%;
                flex-direction: column;
                margin-top: 1rem;
                gap: 0.5rem;
            }
            
            .subscription-actions .btn {
                width: 100%;
                padding: 0.7rem 1rem;
                font-size: 0.9rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        
        @media (max-width: 480px) {
            .subscription-actions .btn {
                padding: 0.6rem 1rem;
                font-size: 0.85rem;
            }
            
            .subscription-actions {
                gap: 0.4rem;
            }
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }
        
        .btn-danger:hover {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        }
        
        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #ccc;
        }
        
        .time-remaining {
            font-weight: 600;
            color: #059669;
        }
        
        .time-remaining.warning {
            color: #ef4444;
        }
        
        .no-subscriptions {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }
        
        .no-subscriptions-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        /* Mobile: Dateien verwalten Modal - Buttons untereinander stapeln */
@media (max-width: 768px) {
    #fileManagementList .file-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    #fileManagementList .file-item > div:first-child {
        width: 100% !important;
    }

    #fileManagementList .file-item .btn {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
    }

    #fileManagementList .file-item .file-checkbox {
        align-self: flex-start !important;
    }

    /* Owner Actions auch untereinander */
    #fileManagementOwnerActions {
        flex-direction: column !important;
    }

    #fileManagementOwnerActions .btn {
        width: 100% !important;
    }
}

/* ========== LOADING SPINNER ========== */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(4px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .loading-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(102, 126, 234, 0.2);
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        .loading-text {
            margin-top: 1.5rem;
            color: white;
            font-size: 1.1rem;
            font-weight: 500;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Copy Button Animation */
        .btn.copied {
            background: #10b981 !important;
            transform: scale(0.95);
        }
        
        .btn.copied::after {
            content: ' ✓';
        }

        /* ========== TESTIMONIALS SECTION ========== */
        .testimonials-section {
            max-width: 640px;
            margin: 4rem auto 3rem;
            padding: 0 0.5rem;
        }
        
        .testimonials-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        
        .testimonials-header h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        
        .testimonials-header p {
            font-size: 1.0rem;
            color: var(--text-muted);
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .testimonial-card {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.9rem;  /* Reduziert von 2rem auf 1.5rem */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
        
        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
        }
        
        .testimonial-stars {
            font-size: 0.9rem;
            margin-bottom: 1rem;
            color: #fbbf24;
        }
        
        .testimonial-text {
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .testimonial-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 1.0rem;
        }
        
        .testimonial-info {
            flex: 1;
        }
        
        .testimonial-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
             font-size: 0.9rem;
        }
        
        .testimonial-role {
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        
        .trust-badges {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            flex-wrap: wrap;
            margin-top: 3rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
        }
        
        .trust-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
        
        .trust-badge-icon {
            font-size: 1.5rem;
        }
        
        .trust-badge-text {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-align: center;
        }
        
        .trust-badge-subtext {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        
        /* Night Mode */
        body.night-mode .testimonial-card {
            background: #1e293b;
            border-color: #334155;
        }
        
        body.night-mode .testimonial-text {
            color: #cbd5e1;
        }
        
        body.night-mode .testimonial-name {
            color: #f1f5f9;
        }
        
        body.night-mode .testimonial-role {
            color: #cbd5e1 !important;
        }
        
        body.night-mode .trust-badges {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        body.night-mode .trust-badge-text {
            color: #e2e8f0;
        }
        
        body.night-mode .trust-badge-subtext {
            color: #cbd5e1 !important;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .testimonials-header h2 {
                font-size: 1.5rem;
            }
            
            .testimonials-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .trust-badges {
                gap: 2rem;
            }
        }

        /* ========== ZURÜCK NACH OBEN BUTTON ========== */
.back-to-top {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.back-to-top:active {
    transform: translateY(-2px);
}

/* Night Mode */
body.night-mode .back-to-top {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.night-mode .back-to-top:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

/* Mobile - NUR EIN MAL */
@media (max-width: 768px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
        font-size: 1.2rem;
    }
}


/* ========== ONBOARDING TOUR ========== */
.tour-button {
    position: fixed;
    bottom: 80px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.tour-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.tour-button:active {
    transform: translateY(-2px);
}

body.night-mode .tour-button {
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}

body.night-mode .tour-button:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.7);
}
/* Tour Overlay */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    display: none;
}

.tour-overlay.active {
    display: block;
}

/* Tour Highlight */
.tour-highlight {
    position: relative;
    z-index: 9999 !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.6), 0 0 0 9999px rgba(0, 0, 0, 0.7) !important;
    border-radius: 8px;
}

/* Tour Tooltip */
.tour-tooltip {
    position: absolute;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    width: 400px;
    animation: tourFadeIn 0.3s ease;
}

body.night-mode .tour-tooltip {
    background: #2d3748;
    color: #f7fafc;
}

@keyframes tourFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tour-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tour-tooltip-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.night-mode .tour-tooltip-title {
    color: #f7fafc;
}

.tour-tooltip-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #718096;
    transition: color 0.2s;
}

.tour-tooltip-close:hover {
    color: #e53e3e;
}

body.night-mode .tour-tooltip-close {
    color: #cbd5e1;
}

.tour-tooltip-content {
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1rem;
}

body.night-mode .tour-tooltip-content {
    color: #e2e8f0;
}

.tour-tooltip-progress {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 1rem;
    text-align: center;
}

body.night-mode .tour-tooltip-progress {
    color: #cbd5e1;
}

.tour-tooltip-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.tour-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    font-weight: 500;
}

.tour-btn-back {
    background: #e2e8f0;
    color: #2d3748;
}

.tour-btn-back:hover {
    background: #cbd5e1;
}

body.night-mode .tour-btn-back {
    background: #4a5568;
    color: #f7fafc;
}

body.night-mode .tour-btn-back:hover {
    background: #718096;
}

.tour-btn-next {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    flex: 1;
}

.tour-btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.tour-btn-skip {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.tour-btn-skip:hover {
    background: rgba(102, 126, 234, 0.15);
    color: #5568d3;
    border-color: rgba(102, 126, 234, 0.3);
}

body.night-mode .tour-btn-skip {
    background: rgba(102, 126, 234, 0.15);
    color: #9fb3f5;
    border-color: rgba(102, 126, 234, 0.25);
}

body.night-mode .tour-btn-skip:hover {
    background: rgba(102, 126, 234, 0.2);
    color: #bac9f7;
    border-color: rgba(102, 126, 234, 0.35);
}

/* Tour Arrow Pointer */
.tour-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.tour-tooltip.arrow-top::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent white transparent;
}

body.night-mode .tour-tooltip.arrow-top::before {
    border-color: transparent transparent #2d3748 transparent;
}

.tour-tooltip.arrow-bottom::before {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: white transparent transparent transparent;
}

body.night-mode .tour-tooltip.arrow-bottom::before {
    border-color: #2d3748 transparent transparent transparent;
}

.tour-tooltip.arrow-left::before {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

body.night-mode .tour-tooltip.arrow-left::before {
    border-color: transparent #2d3748 transparent transparent;
}

.tour-tooltip.arrow-right::before {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

body.night-mode .tour-tooltip.arrow-right::before {
    border-color: transparent transparent transparent #2d3748;
}

/* Mobile Anpassungen für Tour */
@media (max-width: 768px) {
    .tour-button {
        left: 15px;
        bottom: 30px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .tour-tooltip {
        position: fixed !important;
        width: 90vw !important;
        max-width: 90vw !important;
        padding: 1.2rem;
        left: 5vw !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: auto !important;
        bottom: auto !important;
    }

    .tour-tooltip::before {
        display: none !important;
    }

    .tour-tooltip-title {
        font-size: 1rem;
    }

    .tour-tooltip-content {
        font-size: 0.95rem;
    }

    .tour-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Tablet Anpassungen */
@media (min-width: 769px) and (max-width: 1024px) {
    .tour-tooltip {
        width: 85vw !important;
        max-width: 450px !important;
    }
}

/* Mobile: File Action Buttons vertikal stapeln */

@media (max-width: 768px) {

/* Container für die Button-Gruppe innerhalb eines file-items */

.file-item .file-actions {

display: flex !important;

flex-direction: column !important;

gap: 0.4rem !important;

align-items: stretch !important;

width: 100% !important;

}

/* Buttons volle Breite auf mobil */

.file-item .file-actions button {

width: 100% !important;

text-align: center !important;

}

/* Falls die Buttons direkt im file-item ohne eigenen Container sind */

.file-item {

flex-direction: column !important;

align-items: flex-start !important;

}

}


/* Mobile: File Item Layout vertikal */
@media (max-width: 768px) {
    .file-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Button-Container auf vertikal setzen und volle Breite */
    .file-actions-container {
        flex-direction: column !important;
        width: calc(100% + 1rem) !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        gap: 0.5rem !important;
        padding: 0 0.5rem !important;
    }
    
   /* Buttons volle Breite */
    .file-actions-container button,
    .file-actions-container a.btn {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* File Management Modal - Buttons vertikal stapeln */
    #fileManagementList .file-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    
    #fileManagementList .file-item > div:first-child {
        width: 100% !important;
    }
    
    #fileManagementList .file-item .btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
        justify-content: center !important;
    }
}

/* User Menu Dropdown */
.user-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    z-index: 1000;
    animation: slideDown 0.2s ease;
}


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-menu-email {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    word-break: break-word;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: left;
}

.user-menu-email::before {
    content: '📧 ';
    margin-right: 0.5rem;
}

.user-menu-logout {
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 0 0 1rem 1rem;
    text-align: left;
}


.user-menu-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.intro-text {
  max-width: 700px;
  margin: 16px auto 5px auto;
  text-align: center;
  font-size: 1rem;
  opacity: 0.9;
}
#toastContainer {
    Position: fixiert !important;
    top: 20px !important;
    right: 20px !important;
    z-Index: 99999 !important;
}

 /* ============================================
   ZULETZT GETEILT - KORRIGIERTES LAYOUT
   ============================================ */

/* Basis-Styling */
.last-shared-info {
    font-size: 0.85rem !important;
    color: #059669 !important;
    margin-top: 0.25rem !important;
}

/* PC (ab 769px): Vertikales Layout */
@media (min-width: 769px) {
    .subscription-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .subscription-info {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .subscription-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    
    .last-shared-info {
        white-space: nowrap !important;
        overflow: visible !important;
    }
}

/* Mobile (bis 768px): Mit Umbruch */
@media (max-width: 768px) {
    .last-shared-info {
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* Night Mode */
body.night-mode .last-shared-info {
    color: #34d399 !important;
}
 
/* Night Mode */
body.night-mode .tagline {
    color: #e6e6fa !important;
}

/* Download Stats Info - Responsive */
.download-stats-info {
    font-size: 0.85r em;
    color: #7c3aed;
    margin-top: 0.25rem;
}

@media (min-width: 769px) {
    .download-stats-info {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .download-stats-info {
        white-space: normal;
        word-break: break-word;
    }
}

body.night-mode .download-stats-info {
    color: #a78bfa;
}
/* Download Details Modal - Night Mode */
body.night-mode #downloadDetailsModal .modal-content {
    background: #1e293b;
    border-color: #475569;
}

body.night-mode #downloadDetailsModal .modal-title {
    color: #f1f5f9;
}

body.night-mode #downloadDetailsCellNumber {
    color: #818cf8 !important;
}

body.night-mode #downloadDetailsList > div {
    background: #334155 !important;
    color: #f1f5f9;
}

body.night-mode #downloadDetailsList div[style*="background: #f0f9ff"] {
    background: #334155 !important;
    color: #f1f5f9;
}

body.night-mode #downloadDetailsList div[style*="background: #f8fafc"] {
    background: #475569 !important;
    border-color: #64748b !important;
    color: #f1f5f9;
}

body.night-mode #downloadDetailsList div[style*="color: #64748b"] {
    color: #94a3b8 !important;
}
/* Download Details - Badges Night Mode */
body.night-mode #downloadDetailsList span[style*="background: #dbeafe"] {
    background: #3730a3 !important;
    color: #c7d2fe !important;
}

body.night-mode #downloadDetailsList span[style*="background: #dcfce7"] {
    background: #166534 !important;
    color: #bbf7d0 !important;
}
/* Angemeldet als - Tag Mode */
#loggedInAsInfo {
    padding: 0.3rem 0.8rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #ddd6fe 100%);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: #4338ca;
    border: 1px solid #9fb0c7;
}

/* Angemeldet als - Night Mode */
body.night-mode #loggedInAsInfo {
    background: #1e293b;
    border: 1px solid #64748b;
    color: #f1f5f9;
}

body.night-mode #loggedInAsInfo strong {
    color: #e2e8f0;
}
/* Passwort vergessen Hinweis - Tag Mode */
#forgotPasswordHint {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 0.75rem;
    border: 1px solid #f59e0b;
    text-align: center;
}

#forgotPasswordHint .forgot-title {
    margin: 0 0 0.75rem 0;
    color: #92400e;
    font-weight: 500;
}

#forgotPasswordHint .forgot-text {
    margin: 0 0 1rem 0;
    color: #a16207;
    font-size: 0.9rem;
}

#forgotPasswordHint .forgot-btn {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

/* Passwort vergessen Hinweis - Night Mode */
body.night-mode #forgotPasswordHint {
    background: #1e293b;
    border: 1px solid #475569;
}

body.night-mode #forgotPasswordHint .forgot-title {
    color: #f1f5f9;
}

body.night-mode #forgotPasswordHint .forgot-text {
    color: #cbd5e1;
}

body.night-mode #forgotPasswordHint .forgot-btn {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
}

/* Bezahlte Zelle - Blinkende Animation */
@keyframes cell-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(102, 126, 234, 0.4);
        transform: scale(1.05);
    }
}

.cell-highlight-paid {
    animation: cell-pulse 1s ease-in-out infinite;
    z-index: 10;
    position: relative;
}

.cell-highlight-paid::after {
    content: '✨ NEU';
    position: absolute;
    top: -10px;
    right: -10px;
    background: #667eea;
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}
/* Premium Badge im Nachtmodus */
body.night-mode .premium-badge {
    background: #1e1b4b !important;
    color: #c4b5fd !important;
    border: 1px solid #5b21b6;
}

/* Premium Feature Section im Nachtmodus */
body.night-mode .premium-feature-section {
    background: linear-gradient(135deg, #1e293b 0%, #312e81 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

body.night-mode .premium-feature-section strong {
    color: #e2e8f0 !important;
}

body.night-mode .premium-feature-section span,
body.night-mode .premium-feature-section label span {
    color: #cbd5e1 !important;
}

body.night-mode .premium-feature-section p {
    color: #94a3b8 !important;
}
.secure-info-box {
    max-width: 640px;
                    margin: 0.5rem auto;
                    padding: 0.5rem 0.5rem;
                    background: rgba(30, 41, 59, 0.7);
                    border: 1px solid rgba(85, 80, 118, 0.8);
                    border-radius: 0.75rem;
                    text-align: center;
                    color: #1e293b;
                    font-size: 0.9rem;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}

.secure-info-text {
    font-size: 0.95rem;
    color: rgba(221, 216, 249, 0.8);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}


/* Optional: leichte Betonung */
.secure-info-box strong {
    font-weight: 600;
}
/* =========================
   TAGMODUS – Secure Info Box
   ========================= */

body:not(.night-mode) .secure-info-box {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #3b82f6;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

body:not(.night-mode) .secure-info-text {
    color: #1e3a8a;
}



body:not(.night-mode) .secure-info-box strong {
    color: #1e3a8a;
}
/* =========================
   Modal Grundstruktur
   ========================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.intro-modal {
    max-width: 520px;
    width: 92%;
    padding: 1.8rem;
    border-radius: 1rem;

    background: var(--bg-tertiary);
    color: var(--text-primary);

    box-shadow: var(--shadow-xl);
    position: relative;
}

.intro-modal h2 {
    margin-bottom: 0.8rem;
}

.intro-modal p {
    margin-bottom: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.intro-modal ul {
    margin: 0.8rem 0 1rem 1.2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.intro-highlight {
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

/* Start Button */
.intro-start-btn {
    margin-top: 1rem;
    width: 100%;
    padding: 0.7rem;
    border-radius: 1.5rem;
    border: none;
    cursor: pointer;

    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #0f172a;
    font-weight: 600;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
}
/* =========================
   Intro Actions (Buttons)
   ========================= */

.intro-actions {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 1rem auto 1rem auto;
    max-width: 640px;
    width: 100%;
}
@media (max-width: 480px) {
    .intro-actions {
        margin: 0.1rem auto 0.1rem auto;
    }
}
@media (min-width: 768px) {
    .intro-actions {
        max-width: 640px;
        width: 100%;
    }
    
    .intro-action-btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }
}

.intro-action-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    
    /* Tagmodus: Hellblau wie Header */
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #3b82f6;
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
}

.intro-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    
    /* Hover: Etwas dunkler hellblau */
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e40af;
    border-color: #2563eb;
}

/* Zweiter Button – gleicher Stil */
.intro-action-btn.secondary {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.intro-action-btn.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e40af;
    border-color: #2563eb;
}

/* Nachtmodus */
body.night-mode .intro-action-btn,
body.night-mode .intro-action-btn.secondary {
    background: rgba(51, 65, 85, 0.6);
    border: 1px solid #0284c7;
    color: #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.night-mode .intro-action-btn:hover,
body.night-mode .intro-action-btn.secondary:hover {
    background: #041a3d;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Mobile */
@media (max-width: 480px) {
    .intro-action-btn {
        width: 100%;
        max-width: 320px;
    }
}
/* Night Mode: Billing Info Modal */
body.night-mode #billingInfoModal .modal-content {
    background: var(--bg-tertiary) !important;
}

body.night-mode #billingInfoModal input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

body.night-mode #billingInfoModal label,
body.night-mode #billingInfoModal p {
    color: var(--text-primary) !important;
}

body.night-mode #billingPrivateBtn,
body.night-mode #billingBusinessBtn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

body.night-mode #billingPrivateBtn div,
body.night-mode #billingBusinessBtn div {
    color: var(--text-primary) !important;
}

/* =========================
   Use-Cases Modal
   ========================= */

.usecases-modal {
    max-width: 560px;
    width: 92%;
    padding: 1.8rem;
    border-radius: 1rem;

    background: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
    position: relative;
}

.usecases-modal h2 {
    margin-bottom: 0.4rem;
}

.usecases-intro {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
}

/* Einzelne Use-Cases */
.usecase-box {
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.8rem;

    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.usecase-box h3 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.usecase-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

/* Footer Button */
.usecases-close-btn {
    margin-top: 1rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 1.5rem;
    border: none;
    cursor: pointer;

    font-weight: 600;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #0f172a;
}
.download-status.personal {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
    color: #78350f;
    border: 1px solid #b45309;
}


  .tsicco-review {font-family: system-ui, sans-serif; line-height: 1.6; max-width: 800px; margin: auto; padding: 1rem;}
  .tsicco-review h2 {margin-top: 2rem; margin-bottom: 1rem; color: #0b4a77;}
  .tsicco-review h3 {margin-top: 1.5rem; color: #0a558c;}
  .tsicco-review ul, .tsicco-review ol {margin-left: 1.2rem;}
  .comparison {background: #f3f9ff; padding: .75rem; border-left: 4px solid #0b4a77; margin: 1rem 0;}
  table {width: 100%; border-collapse: collapse; margin: 1rem 0;}
  th, td {padding: .5rem .75rem; text-align: left; border: 1px solid #ddd;}
  th {background: #f3f9ff;}
  .grey {background:#e0e0e0;}
  .blue {background:#d0e3f3;}
  .cyan {background:#c1e7e6;}
  .yellow {background:#f9e4c5;}
  .green {background:#d4edc9;}
  .gold {background:#ffe28a;}
  blockquote {font-size: 1.1rem; font-style: italic; margin: 1rem 0; padding: 1rem; background: #f3f9ff; border-left: 5px solid #0b4a77;}

/* ---------- NACHTMODUS ---------- */
[data-theme="dark"] .tsicco-review,
body.night-mode .tsicco-review      
{
  background: #374151 !important;
  color: #e0e0e0 !important;
}

/* Überschriften */
[data-theme="dark"] .tsicco-review h2,
[data-theme="dark"] .tsicco-review h3,
body.night-mode .tsicco-review h2,
body.night-mode .tsicco-review h3
{
  color: #6ab7ff !important;
}

/* Absätze & Listen */
[data-theme="dark"] .tsicco-review p,
[data-theme="dark"] .tsicco-review li,
body.night-mode .tsicco-review p,
body.night-mode .tsicco-review li
{
  color: #e0e0e0 !important;
}

/* Vergleichs-Box */
[data-theme="dark"] .comparison,
body.night-mode .comparison
{
  background: #374151 !important;
  border-left-color: #6ab7ff !important;
  color: #e0e0e0 !important;
}



/* Tabellen */
[data-theme="dark"] .tsicco-review table,
body.night-mode .tsicco-review table
{
  background: #374151 !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}
[data-theme="dark"] .tsicco-review th,
body.night-mode .tsicco-review th
{
  background: #374151 !important;
  color: #bb86fc !important;
}
[data-theme="dark"] .tsicco-review td,
body.night-mode .tsicco-review td
{
  background: #374151 !important;
  color: #e0e0e0 !important;
}

/* Farbcodierung (nur Hintergrund, Text bleibt hell) */
[data-theme="dark"] .grey  { background: #303030 !important; color:#e0e0e0 !important;}
[data-theme="dark"] .blue  { background: #0d3a5c !important; color:#e0e0e0 !important;}
[data-theme="dark"] .cyan  { background: #004d4d !important; color:#e0e0e0 !important;}
[data-theme="dark"] .yellow{ background: #4a3c1a !important; color:#e0e0e0 !important;}
[data-theme="dark"] .green { background: #1e3a1e !important; color:#e0e0e0 !important;}
[data-theme="dark"] .gold  { background: #5c4a00 !important; color:#e0e0e0 !important;}

/* Block-Zitat */
[data-theme="dark"] blockquote,
body.night-mode blockquote
{
  background: #374151 !important;
  border-left-color: #6ab7ff !important;
  color: #e0e0e0 !important;
}
/* Nachtmodus: weiße Texte auf dunklem Grund */
[data-theme="dark"] .comparison,
[data-theme="dark"] .use-cases,
[data-theme="dark"] blockquote {
    background: #374151 !important;
    color: #e0e0e0 !important;
}

/* Einzelne weiße Textblöcke, die du genannt hast */
[data-theme="dark"] .comparison p,
[data-theme="dark"] .use-cases td,
[data-theme="dark"] .use-cases th,
[data-theme="dark"] blockquote {
    color: #e0e0e0 !important;
}

/* Tabellen-Kopf optional absetzen */
[data-theme="dark"] .use-cases th {
    background: #374151 !important;
}
/* Fallback für alle Tabellen & Zitate im Dark-Modus */
[data-theme="dark"] table,
[data-theme="dark"] blockquote {
    background: #374151 !important;
    color: #e0e0e0 !important;
}

/* === TABELLE: kompletter Hintergrund + weiße Ränder === */
[data-theme="dark"] .tsicco-review table,
[data-theme="dark"] .tsicco-review table * {   /* Stern = TD, TH, TBODY, THEAD, TR, ... */
    background: #374151 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;   /* optional: dunkle Gitter-Linien */
}
/* 1. comparison-Box selbst */
[data-theme="dark"] .comparison,
body.night-mode .comparison {
    background: #374151 !important;
    color: #e0e0e0 !important;
}

/* 2. der konkrete <p>-Tag darin */
[data-theme="dark"] .comparison p,
body.night-mode .comparison p {
    background: transparent !important;   /* löscht evtl. weißes Inline-Style */
    color: #e0e0e0 !important;
}

/* ========== RESPONSIVE TABELLEN FÜR MOBILE ========== */
@media (max-width: 768px) {
    /* Scrollbare Tabellen-Container */
    .tsicco-review table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }
    
    .tsicco-review th,
    .tsicco-review td {
        padding: 0.4rem 0.5rem;
        white-space: nowrap;
    }
    
    /* Use-Cases Tabelle als Karten */
    table.use-cases {
        display: block;
    }
    
    table.use-cases thead {
        display: none;
    }
    
    table.use-cases tbody,
    table.use-cases tr,
    table.use-cases td {
        display: block;
        width: 100%;
    }
    
    table.use-cases tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.5rem;
        background: #f8fafc;
    }
    
    table.use-cases td {
        border: none;
        padding: 0.3rem 0.5rem;
        text-align: left;
    }
    
    table.use-cases td:first-child {
        font-weight: bold;
        color: #0a558c;
        font-size: 1rem;
        border-bottom: 1px solid #e2e8f0;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Noch kleinere Bildschirme */
@media (max-width: 480px) {
    .tsicco-review table {
        font-size: 0.75rem;
    }
    
    .tsicco-review th,
    .tsicco-review td {
        padding: 0.3rem 0.4rem;
    }
}

/* Nachtmodus für mobile Tabellen-Karten */
body.night-mode table.use-cases tr {
    background: #374151;
    border-color: #333;
}

body.night-mode table.use-cases td:first-child {
    color: #6ab7ff;
    border-bottom-color: #333;
}
/* ========== ÜBER TSICCO MODAL - NACHTMODUS ========== */
body.night-mode #aboutModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #aboutModal h4,
body.night-mode #aboutModal h5 {
    color: #f1f5f9 !important;
}

/* Header bleibt lila Gradient */
body.night-mode #aboutModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] {
    background: linear-gradient(135deg, #4338ca 0%, #581c87 100%) !important;
}

body.night-mode #aboutModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] h4,
body.night-mode #aboutModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] p {
    color: white !important;
}

/* Weiße Karten dunkel machen */
body.night-mode #aboutModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #aboutModal div[style*="background: white"] h5,
body.night-mode #aboutModal div[style*="background: white"] p,
body.night-mode #aboutModal div[style*="background: white"] span,
body.night-mode #aboutModal div[style*="background: white"] strong {
    color: #e2e8f0 !important;
}

/* Geschichte-Box */
body.night-mode #aboutModal div[style*="background: #f0f9ff"] {
    background: #1e3a5f !important;
    border-color: #0369a1 !important;
}

body.night-mode #aboutModal div[style*="background: #f0f9ff"] h5,
body.night-mode #aboutModal div[style*="background: #f0f9ff"] p,
body.night-mode #aboutModal div[style*="background: #f0f9ff"] div {
    color: #bae6fd !important;
}

body.night-mode #aboutModal div[style*="background: #f0f9ff"] div[style*="font-weight: 700"] {
    color: #7dd3fc !important;
}

/* Warum-Box */
body.night-mode #aboutModal div[style*="background: #fef3c7"] {
    background: #422006 !important;
    border-color: #854d0e !important;
}

body.night-mode #aboutModal div[style*="background: #fef3c7"] h5,
body.night-mode #aboutModal div[style*="background: #fef3c7"] p {
    color: #fde047 !important;
}

body.night-mode #aboutModal div[style*="background: #fef3c7"] div[style*="background: rgba(255,255,255,0.5)"] {
    background: #713f12 !important;
}

/* Versprechen-Boxen */
body.night-mode #aboutModal div[style*="background: #f0fdf4"] {
    background: #1e3a1e !important;
    border-color: #166534 !important;
}

body.night-mode #aboutModal div[style*="background: #f0fdf4"] strong,
body.night-mode #aboutModal div[style*="background: #f0fdf4"] p {
    color: #bbf7d0 !important;
}

/* Technologie-Box */
body.night-mode #aboutModal div[style*="background: #e0f2fe"] {
    background: #0c4a6e !important;
    border-color: #0284c7 !important;
}

body.night-mode #aboutModal div[style*="background: #e0f2fe"] h5,
body.night-mode #aboutModal div[style*="background: #e0f2fe"] li,
body.night-mode #aboutModal div[style*="background: #e0f2fe"] strong {
    color: #bae6fd !important;
}

/* Nächstes-Box */
body.night-mode #aboutModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #aboutModal div[style*="background: #f1f5f9"] h5 {
    color: #f1f5f9 !important;
}

body.night-mode #aboutModal div[style*="background: #f1f5f9"] div[style*="background: white"] {
    background: #374151 !important;
}

body.night-mode #aboutModal div[style*="background: #f1f5f9"] span[style*="color: #475569"] {
    color: #cbd5e1 !important;
}

/* Danke-Box */
body.night-mode #aboutModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #aboutModal div[style*="background: #f8fafc"] p {
    color: #cbd5e1 !important;
}

/* Night Mode: Selbstzerstörung Section */
body.night-mode .self-destruct-section {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

body.night-mode .self-destruct-section strong {
    color: #fca5a5 !important;
}

body.night-mode .self-destruct-section span,
body.night-mode .self-destruct-section p {
    color: #fecaca !important;
}

/* Night Mode: Selbstzerstörung Tipp */
body.night-mode .self-destruct-tip {
    background: #495463 !important;
    color: #93c5fd !important;
}
/* Night Mode: Download-Benachrichtigung Section */
body.night-mode .notify-download-section {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

body.night-mode .notify-download-section strong {
    color: #93c5fd !important;
}

body.night-mode .notify-download-section span,
body.night-mode .notify-download-section p {
    color: #bfdbfe !important;
}

body.night-mode .notify-download-section input[type="email"] {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #e2e8f0 !important;
}
/* Night Mode: Selbstzerstörung Warnung im Download-Modal */
body.night-mode #selfDestructWarning {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%) !important;
    border-color: #ef4444 !important;
}

body.night-mode #selfDestructWarning strong {
    color: #fca5a5 !important;
}

body.night-mode #selfDestructWarning p {
    color: #fecaca !important;
}
/* ========== PREISÜBERSICHT MODAL (KOMPAKT) ========== */
.pricing-overview-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.pricing-overview-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem;
    position: relative;
    transition: all 0.2s ease;
}

.pricing-overview-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* Farbige linke Border für jeden Tier */
.pricing-overview-card.free-card {
    border-left: 4px solid #3b82f6;
}

.pricing-overview-card.premium7-card {
    border-left: 4px solid #06b6d4;
}

.pricing-overview-card.premium14-card {
    border-left: 4px solid #eab308;
}

.pricing-overview-card.premiumplus-card {
    border-left: 4px solid #84cc16;
}

.pricing-overview-card.year-card {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.03) 100%);
}

.pricing-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pricing-overview-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.pricing-overview-price {
    font-weight: 700;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-overview-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pricing-overview-details span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pricing-overview-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pricing-overview-badge.year {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.pricing-overview-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.pricing-overview-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pricing-overview-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.pricing-overview-buttons .btn {
    flex: 1;
    max-width: 160px;
}

/* Night Mode für Preisübersicht */
body.night-mode .pricing-overview-card {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

body.night-mode .pricing-overview-card:hover {
    border-color: #818cf8;
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.2);
}

body.night-mode .pricing-overview-card.year-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
}

body.night-mode .pricing-overview-name {
    color: var(--text-primary);
}

body.night-mode .pricing-overview-details {
    color: var(--text-secondary);
}

body.night-mode .pricing-overview-info {
    color: var(--text-secondary);
}

/* ========== PREISE-BUTTON IM HEADER ========== */
.pricing-header-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    
}

.pricing-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.pricing-header-btn:active {
    transform: translateY(0);
}

body.night-mode .pricing-header-btn {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}
 
/* ========== KLICKBARE PREISKARTEN ========== */
.pricing-overview-card {
    cursor: pointer;
}

.pricing-overview-card::after {
    content: 'Mehr erfahren →';
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #667eea;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pricing-overview-card:hover::after {
    opacity: 1;
}

/* ========== TIER DETAIL MODAL ========== */
.tier-detail-header {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.tier-detail-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.tier-detail-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.tier-detail-tagline {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.tier-detail-price-box {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.tier-detail-price {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tier-detail-duration {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.tier-detail-section {
    margin-bottom: 1.25rem;
}

.tier-detail-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tier-detail-features {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tier-detail-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.tier-detail-feature-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tier-detail-feature-text {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.tier-detail-feature-text strong {
    display: block;
    margin-bottom: 0.1rem;
}

.tier-detail-feature-text span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.tier-detail-ideal {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(56, 161, 105, 0.1) 100%);
    border-left: 3px solid #48bb78;
    border-radius: 0 8px 8px 0;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.tier-detail-ideal-title {
    font-weight: 600;
    color: #2f855a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tier-detail-ideal-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tier-detail-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.tier-detail-footer .btn {
    flex: 1;
}

/* Night Mode für Detail Modal */
body.night-mode .tier-detail-price-box {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

body.night-mode .tier-detail-feature {
    background: var(--bg-secondary);
}

body.night-mode .tier-detail-ideal {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.15) 0%, rgba(56, 161, 105, 0.15) 100%);
}

body.night-mode .tier-detail-ideal-title {
    color: #68d391;
}

/* Farbige Akzente für jeden Tier */
.tier-detail-modal.free .tier-detail-icon { color: #3b82f6; }
.tier-detail-modal.premium7 .tier-detail-icon { color: #06b6d4; }
.tier-detail-modal.premium14 .tier-detail-icon { color: #eab308; }
.tier-detail-modal.premiumplus .tier-detail-icon { color: #84cc16; }
.tier-detail-modal.year .tier-detail-icon { color: #f59e0b; }

/* ========== WARUM TSICCO MODAL ========== */
.warum-tsicco-modal {
    max-width: 680px;
}

.warum-hero {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.warum-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.warum-hero-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.warum-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.warum-stat {
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}

.warum-stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.warum-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.warum-section {
    margin-bottom: 1.5rem;
}

.warum-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.warum-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.warum-step {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border-left: 3px solid #667eea;
}

.warum-step-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.warum-step-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.warum-step-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.warum-personas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.warum-persona {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.warum-persona:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.warum-persona-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.warum-persona-icon {
    font-size: 1.5rem;
}

.warum-persona-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.warum-persona-problem {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid #ef4444;
}

.warum-persona-solution {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-left: 0.75rem;
    border-left: 2px solid #22c55e;
    line-height: 1.5;
}

.warum-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.warum-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-radius: 8px;
}

.warum-benefit-icon {
    color: #22c55e;
    font-size: 1rem;
    flex-shrink: 0;
}

.warum-benefit-text {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.warum-comparison {
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
}

.warum-comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-light);
}

.warum-comparison-row:last-child {
    border-bottom: none;
}

.warum-comparison-cell {
    padding: 0.75rem;
    font-size: 0.85rem;
    text-align: center;
}

.warum-comparison-header {
    font-weight: 600;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.warum-comparison-feature {
    text-align: left;
    color: var(--text-secondary);
}

.warum-cta {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    margin-top: 1.5rem;
}

.warum-cta-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.warum-cta-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.warum-cta-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Night Mode */
body.night-mode .warum-hero {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

body.night-mode .warum-persona-problem {
    border-left-color: #f87171;
}

body.night-mode .warum-persona-solution {
    border-left-color: #4ade80;
}

body.night-mode .warum-benefit {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .warum-stats {
        grid-template-columns: 1fr;
    }
    
    .warum-benefits {
        grid-template-columns: 1fr;
    }
    
    .warum-comparison-row {
        grid-template-columns: 1fr;
    }
    
    .warum-comparison-cell {
        text-align: left;
        border-bottom: 1px solid var(--border-light);
    }
}

/* ========== Z-INDEX FIX FÜR ALLE MODALS ========== */
.modal,
#warumTsiccoModal,
#pricingOverviewModal,
#tierDetailModal {
    z-index: 10000 !important;
}

.modal.active,
#warumTsiccoModal.active,
#pricingOverviewModal.active,
#tierDetailModal.active {
    z-index: 10000 !important;
}

.modal .modal-content,
#warumTsiccoModal .modal-content,
#pricingOverviewModal .modal-content,
#tierDetailModal .modal-content {
    z-index: 10001 !important;
}

/* Intro-Actions Buttons unter den Modals */
.intro-actions {
    z-index: 100;
    position: relative;
}

/* Header unter den Modals */
.header,
.container,
.grid-container {
    z-index: auto;
}

/* ========== NACHTMODUS Z-INDEX FIX ========== */
body.night-mode .modal.active {
    z-index: 99999 !important;
    position: fixed !important;
}

body.night-mode .modal.active .modal-content {
    z-index: 100000 !important;
    position: relative !important;
}

body.night-mode .intro-actions {
    position: relative;
    z-index: 100 !important;
}

body.night-mode #warumTsiccoModal.active,
body.night-mode #pricingOverviewModal.active,
body.night-mode #tierDetailModal.active {
    z-index: 99999 !important;
}

/* Alle Container unter dem Modal */
body.night-mode .container {
    position: relative;
    z-index: auto;
}

body.night-mode .header {
    z-index: 1000;
}

/* Modal Overlay muss über allem sein */
body.night-mode .modal {
    background: rgba(0, 0, 0, 0.8) !important;
}
/* ========== FIX: INTRO-ACTIONS UNTER MODALS ========== */
.intro-actions {
    position: relative;
    z-index: 500 !important;
}

body.night-mode .intro-actions {
    position: relative;
    z-index: 500 !important;
}

/* Alle Modals über den Buttons */
#warumTsiccoModal,
#pricingOverviewModal,
#tierDetailModal,
#tsiccoIntroModal,
#useCasesModal {
    z-index: 9999 !important;
}

#warumTsiccoModal.active,
#pricingOverviewModal.active,
#tierDetailModal.active {
    z-index: 9999 !important;
    display: flex !important;
}

/* Modal-Content über allem */
#warumTsiccoModal .modal-content,
#pricingOverviewModal .modal-content,
#tierDetailModal .modal-content {
    z-index: 10000 !important;
}

/* Container soll nicht über Modal sein */
body.night-mode .container {
    position: relative;
    z-index: auto;
}

/* Header unter Modal */
body.night-mode .header {
    z-index: 900;
}
/* ========== AGGRESSIVER FIX FÜR NACHTMODUS ========== */

/* Intro-Actions Buttons UNTER alles zwingen */
body.night-mode .intro-actions {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate;
}

body.night-mode .intro-action-btn {
    position: relative !important;
    z-index: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Warum Tsicco Modal ÜBER alles zwingen */
#warumTsiccoModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.85) !important;
}

#warumTsiccoModal .modal-content,
#warumTsiccoModal .warum-tsicco-modal {
    position: relative !important;
    z-index: 1000000 !important;
}

/* Gleiche Fixes für andere Modals */
#pricingOverviewModal,
#tierDetailModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
}

#pricingOverviewModal .modal-content,
#tierDetailModal .modal-content {
    position: relative !important;
    z-index: 1000000 !important;
}

/* Alternative: Modals erzwingen über alle Stacking Contexts */
body.night-mode .modal,
body.night-mode .modal-overlay,
body.night-mode #warumTsiccoModal,
body.night-mode #pricingOverviewModal,
body.night-mode #tierDetailModal {
    isolation: isolate;
    z-index: 100000 !important;
}


    /* Link-Verwaltung Responsive Buttons */
    @media (max-width: 768px) {
        .link-desktop-buttons {
            display: none !important;
        }
        .link-mobile-buttons {
            display: flex !important;
        }
    }
    @media (min-width: 769px) {
        .link-desktop-buttons {
            display: flex !important;
        }
        .link-mobile-buttons {
            display: none !important;
        }
    }

    /* Nachtmodus für PC-Hinweis */
    body.night-mode .pc-hint {
        background: #2d3748 !important;
        border-left: 4px solid #f59e0b !important;
        color: #e2e8f0 !important;
    }
    
    body.night-mode .pc-hint strong {
        color: #fbbf24 !important;
    }
    
    /* Meine Zellen Modal für Handy optimieren */
    @media (max-width: 768px) {
        #subscriptionModal .modal-content {
            max-width: 95% !important;
            width: 95% !important;
            padding: 1rem !important;
            margin: 0 auto !important;
        }
        
        #subscriptionModal .subscription-item {
            padding: 1rem !important;
            margin: 0 0 0.75rem 0 !important;
        }
        
        #subscriptionModal .subscription-actions {
            flex-direction: column !important;
            gap: 0.5rem !important;
        }
        
        #subscriptionModal .subscription-actions .btn {
            width: 100% !important;
            margin: 0 !important;
        }
    }

   /* NUR FÜR HANDY: Preise Button wie "Was ist Tsicco?" */
@media (max-width: 768px) {
    .intro-action-btn {
        padding: 0.4rem 0.6rem !important;  /* Weniger Padding */
        font-size: 0.8rem !important;
    }
    
    .header-center-logo .intro-action-btn {
        margin: 0 !important;
        max-width: 110px !important;  /* 50px schmaler als vorher */
    }
}
        
        .pricing-header-btn.mobile-compact span {
            font-size: 0.8rem !important;
        }
        
        /* Damit die anderen Buttons nicht verschoben werden */
        .header-actions {
            gap: 0.3rem !important;
        }
        
        .mini-btn {
            padding: 0.25rem 0.5rem !important;
            font-size: 0.7rem !important;
        }
    

    /* NUR FÜR PC: Abstand zwischen Buttons */
    @media (min-width: 769px) {
        .header-actions {
            gap: 0.8rem !important;  /* Mehr Abstand zwischen den Buttons */
        }
        
        /* Preis Button etwas schmaler */
        .intro-action-btn {
            padding-left: 0.8rem !important;
            padding-right: 0.8rem !important;
            white-space: nowrap !important;
        }
    }
    
    /* Handy bleibt wie bisher */
    @media (max-width: 768px) {
        .header-actions {
            gap: 0.3rem !important;  /* Enger für Handy */
        }
    }

    /* Nachtmodus für Trust Badges */
    body.night-mode .trust-badges-header div span:last-child {
        color: #a5b4fc !important;
    }
@media (min-width: 769px) {
        .pc-header-center {
            display: flex !important;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 20px;
        }
        
        .header {
            position: relative !important;
        }
    }

    /* NUR FÜR PC */
@media (min-width: 769px) {
    .header-top {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: start !important;
    }
    
    .pc-premium-stats {
        display: flex !important;
    }
}

/* Handy: Bild und Premium ausblenden */
@media (max-width: 768px) {
    .header-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
   
    
    
}
/* NUR FÜR PC */
@media (min-width: 769px) {
    .header-top {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
    }
    .pc-premium-stats {
        display: flex !important;
    }
}

/* Handy: Alles ausblenden was stört */
@media (max-width: 768px) {
    .pc-premium-stats {
        display: none !important;
    }
 }
@media (max-width: 768px) {
    .logo-text {
        font-size: 22px !important;
    }
 }

/* 🔥 NACHTMODUS */
body.night-mode .pc-premium-stats div:first-child {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%) !important;
    border: 1px solid #fbbf24 !important;
}
body.night-mode .pc-premium-stats span:last-child {
    color: #fbbf24 !important;
}
body.night-mode .pc-premium-stats div:last-child {
    color: #fef3c7 !important;
}

/* Angemeldet als im Nachtmodus */
body.night-mode #loggedInAsInfo span {
    color: #94a3b8 !important;
}
body.night-mode #loggedInAsInfo strong {
    color: #818cf8 !important;
}

/* NUR FÜR PC: Linke Spalte breiter machen */
@media (min-width: 769px) {
    .header-top > div:first-child {
        min-width: 120px !important;  /* Mehr Platz für Slogan */
        max-width: 160px !important;  /* Aber nicht zu breit */
    }
    
    .tagline {
        white-space: nowrap !important;  /* Jetzt passt es */
        overflow: visible !important;
    }
}

/* Handy: Alles bleibt gleich */
@media (max-width: 768px) {
    .header-top > div:first-child {
        min-width: auto !important;
        max-width: 100% !important;
    }
    
    .tagline {
        white-space: normal !important;  /* Darf umbrechen */
    }
}
/* NUR FÜR PC */
@media (min-width: 769px) {
    .pc-cell-stats {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .pc-cell-stats {
        display: none !important;
    }
}

/* Nachtmodus */
body.night-mode .pc-cell-stats div:first-child {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%) !important;
}
body.night-mode .pc-cell-stats span {
    color: #fbbf24 !important;
}
body.night-mode .pc-cell-stats div:last-child {
    color: #fef3c7 !important;
}
/* Tooltip Styling (optional) */
.pc-cell-stats div[title] {
    position: relative;
}

/* Nachtmodus für Tooltip */
body.night-mode .pc-cell-stats div[title] {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%) !important;
}
body.night-mode .pc-cell-stats span {
    color: #fbbf24 !important;
}
/* NUR FÜR PC: Anmelden Button vergrößern */
@media (min-width: 769px) {
    #authButton,
    .mini-btn.primary {
        min-width: 110px !important;  /* 10px breiter */
        padding: 0.4rem 1.2rem !important;  /* 5px höher */
        font-size: 0.8rem !important;
    }
    
    /* Meine Zellen und Abmelden ebenfalls anpassen */
    #myCellsBtn,
    #logoutBtn {
        min-width: 110px !important;
        padding: 0.4rem 1.2rem !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    #myCellsBtn,
    #logoutBtn,
    #authButton {
        min-width: 80px !important;
        padding: 0.4rem 1.2rem !important;
        font-size: 0.8rem !important;
    }
}
@media (max-width: 768px){
    #logoutBtn {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
/* NUR FÜR HANDY: Logo zentrieren */
@media (max-width: 768px) {
    .header-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .logo {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Damit der Slogan auch zentriert ist */
    .tagline {
        text-align: center !important;
    }
    
    /* Badges zentrieren */
    .trust-badges-header {
        justify-content: center !important;
    }
}

/* NUR FÜR HANDY: Logo sichtbar machen */
@media (max-width: 768px) {
    /* Logo-Container */
    .logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Logo-Bild */
    .logo img {
        max-width: 50px !important;  /* Nicht zu groß */
        height: auto !important;
        display: block !important;
    }
    
    
    
    /* Falls das Logo in einem Container ist */
    .header-top > div:first-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ========== RESPONSIVE LOGO FÜR HANDY ========== */
@media (max-width: 768px) {
    .logo::before {
        width: 40px;
        height: 40px;
    }
    
    
    
    /* Optional: Logo-Text anpassen */
    .logo-text {
        font-size: 1.0rem;
    }
}

/* Für sehr kleine Handys */
@media (max-width: 480px) {
    .logo::before {
        width: 30px;
        height: 30px;
    }
}
 
/* ========== TEAM-ZELLE - VIOLETT ========== */

/* Tag-Modus */
.cell.team-cell {
    background: linear-gradient(145deg, #e9d5ff 0%, #d8b4fe 50%, #c084fc 100%) !important;
    border: 1px solid #9333ea !important;
    color: #581c87 !important;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.2), 0 4px 16px rgba(147, 51, 234, 0.1) !important;
    position: relative;
}

/* Team-Icon Positionierung */
.cell.team-cell .cell-team-icon {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    z-index: 2;
}

/* Hover-Effekt Tag */
.cell.team-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3), 0 8px 24px rgba(147, 51, 234, 0.2) !important;
}

/* Nacht-Modus */
body.night-mode .cell.team-cell {
    background: linear-gradient(145deg, #581c87 0%, #6b21a8 50%, #7e22ce 100%) !important;
    border: 1px solid #c48df9 !important;
    color: #f3e8ff !important;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2), 0 4px 16px rgba(168, 85, 247, 0.1) !important;
}

/* Hover-Effekt Nacht */
body.night-mode .cell.team-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3), 0 8px 24px rgba(168, 85, 247, 0.2) !important;
}

/* Schloss-Symbol in Team-Zellen */
.cell.team-cell .cell-lock {
    color: #581c87 !important;
}

body.night-mode .cell.team-cell .cell-lock {
    color: #f3e8ff !important;
}

/* Tooltip für Team-Zellen */
.cell.team-cell .tooltip {
    background: #9333ea !important;
    color: white !important;
    border-color: #9333ea !important;
}

.cell.team-cell .tooltip::after {
    border-top-color: #9333ea !important;
}

body.night-mode .cell.team-cell .tooltip {
    background: #a855f7 !important;
    border-color: #a855f7 !important;
}

body.night-mode .cell.team-cell .tooltip::after {
    border-top-color: #a855f7 !important;
}

/* Top-Reihe Tooltip Fix */
.cell.team-cell.top-row .tooltip {
    background: #7e22ce !important;
    border-color: #7e22ce !important;
}

.cell.team-cell.top-row .tooltip::after {
    border-top-color: #7e22ce !important;
}

body.night-mode .cell.team-cell.top-row .tooltip {
    background: #9333ea !important;
    border-color: #9333ea !important;
}

body.night-mode .cell.team-cell.top-row .tooltip::after {
    border-top-color: #9333ea !important;
}

/* ========== TEAM-ZELLE ATMENDER EFFEKT ========== */
.cell.team-cell.highlight {
    animation: teamBreathe 1.5s ease-in-out infinite;
    z-index: 10;
    position: relative;
}

@keyframes teamBreathe {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px #9333ea, 0 0 20px #9333ea;
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 20px #a855f7, 0 0 40px #a855f7, 0 0 60px #9333ea;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px #9333ea, 0 0 20px #9333ea;
    }
}

/* Nacht-Modus */
body.night-mode .cell.team-cell.highlight {
    animation: teamBreatheNight 1.5s ease-in-out infinite;
}

@keyframes teamBreatheNight {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px #a855f7, 0 0 20px #a855f7;
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 20px #c084fc, 0 0 40px #c084fc, 0 0 60px #a855f7;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px #a855f7, 0 0 20px #a855f7;
    }
}

/* Damit die Zelle nicht andere Zellen überdeckt */
.cell.team-cell.highlight {
    z-index: 100;
}

/* ========== TEAM-VERWALTUNG MODAL ========== */
.team-management-modal {
    max-width: 550px;
}

.team-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-light);
}

.team-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s;
}

.team-member-item:last-child {
    border-bottom: none;
}

.team-member-item:hover {
    background: rgba(102, 126, 234, 0.05);
}

.team-member-info {
    flex: 1;
}

.team-member-email {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
    word-break: break-all;
}

.team-member-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.team-member-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

.team-invite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.team-invite-email {
    font-weight: 500;
    color: #854d0e;
    font-size: 0.9rem;
}

.team-invite-date {
    font-size: 0.7rem;
    color: #a16207;
    margin-top: 0.25rem;
}

.team-invite-status {
    background: #fde047;
    color: #854d0e;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

.team-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.team-empty-state-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Nacht-Modus Anpassungen */
body.night-mode .team-member-item:hover {
    background: rgba(102, 126, 234, 0.15);
}

body.night-mode .team-member-badge {
    background: #78350f;
    color: #fef3c7;
}

body.night-mode .team-invite-item {
    background: #422006;
    border-color: #854d0e;
}

body.night-mode .team-invite-email {
    color: #fde047;
}

body.night-mode .team-invite-date {
    color: #fbbf24;
}

body.night-mode .team-invite-status {
    background: #854d0e;
    color: #fef3c7;
}

/* Hinweis-Box im Team-Management Modal */
.team-hint-box {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fef3c7;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #92400e;
}

/* Nacht-Modus */
body.night-mode .team-hint-box {
    background: #2d3748 !important;
    color: #fbbf24 !important;
    border: 1px solid #f59e0b;
}

/* ========== BESITZER-BADGE IM NACHTMODUS ========== */
body.night-mode .subscription-cell-number span[style*="background: #fef3c7"] {
    background: #78350f !important;  /* Dunkles Braun */
    color: #fef3c7 !important;       /* Helles Gelb für Text */
    border: 1px solid #fbbf24 !important;
}

/* Alternativ: Falls das Badge über eine Klasse gestylt wird */
body.night-mode .subscription-tier.personal {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%);
    color: #fef3c7;
    border-color: #fbbf24;
}

/* Für den Fall, dass es ein eigenes Element ist */
body.night-mode .owner-badge,
body.night-mode [class*="owner"],
body.night-mode [class*="Besitzer"] {
    background: #78350f !important;
    color: #fef3c7 !important;
    border: 1px solid #fbbf24 !important;
}

/* Falls das Badge inline-styles hat, müssen wir mit !important überschreiben */
body.night-mode span[style*="background: #fef3c7"] {
    background: #78350f !important;
    color: #fef3c7 !important;
}

/* ========== DATEI-LISTE IM NACHTMODUS ========== */

/* Für Dateien mit geradem Index (weißer Hintergrund) */
body.night-mode #fileManagementList .file-item[style*="background: #ffffff"],
body.night-mode #fileManagementList .file-item[style*="background:#ffffff"],
body.night-mode #fileManagementList .file-item[style*="background: white"] {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* Für Dateien mit ungeradem Index (hellgrauer Hintergrund) */
body.night-mode #fileManagementList .file-item[style*="background: #f9fafb"],
body.night-mode #fileManagementList .file-item[style*="background:#f9fafb"] {
    background: #374151 !important;
    color: #e2e8f0 !important;
}

/* Textfarben für beide */
body.night-mode #fileManagementList .file-item div,
body.night-mode #fileManagementList .file-item span {
    color: #e2e8f0 !important;
}

/* Dateigröße etwas heller */
body.night-mode #fileManagementList .file-item span[style*="color: #64748b"] {
    color: #cbd5e1 !important;
}

/* Buttons in der Dateiliste */
body.night-mode #fileManagementList .file-item .btn {
    background: #475569 !important;
    color: #f7fafc !important;
    border: 1px solid #64748b !important;
}

body.night-mode #fileManagementList .file-item .btn:hover {
    background: #5b6777 !important;
}
/* ========== UPLOAD-BUTTON IM NACHTMODUS ========== */

/* Der Container um den Button */
body.night-mode #fileManagementList > div:first-child {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

/* Der Button selbst */
body.night-mode #fileManagementList .btn-primary,
body.night-mode #fileManagementList button[style*="linear-gradient(135deg, #3b82f6"],
body.night-mode #fileManagementList button[style*="background: linear-gradient(135deg, #3b82f6"] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: white !important;
    border: 1px solid #3b82f6 !important;
}

/* Hover-Effekt */
body.night-mode #fileManagementList .btn-primary:hover,
body.night-mode #fileManagementList button[style*="linear-gradient(135deg, #3b82f6"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Falls der Container eine eigene Klasse hat */
body.night-mode .upload-button-container {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}
/* Nacht-Modus für Tresor-Bereich */
body.night-mode .team-section[style*="border: 2px solid #9333ea"] {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(147, 51, 234, 0.25)) !important;
}
/* Hinweise im Nachtmodus */
body.night-mode div[style*="background: #fef3c7"] {
    background: #2d3748 !important;
    border-left-color: #f59e0b !important;
}

body.night-mode div[style*="background: #fef3c7"] strong,
body.night-mode div[style*="background: #fef3c7"] p,
body.night-mode div[style*="background: #fef3c7"] div {
    color: #fbbf24 !important;
}

body.night-mode div[style*="background: #fef3c7"] div[style*="background: rgba(255,255,255,0.5)"] {
    background: #374151 !important;
}

/* Owner-Hinweis im Nachtmodus */
body.night-mode .owner-hint,
body.night-mode div[style*="background: #e0f2fe"] {
    background: #2d3748 !important;
    color: #93c5fd !important;
}
@keyframes giftPulse {
    0%, 100% {
        transform: scale(1);
        background: #fbbf24;
    }
    50% {
        transform: scale(1.05);
        background: #f59e0b;
    }
}
@keyframes giftBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.cell-gift-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    z-index: 2;
    
    }
/* ========== TEAM-ICON IM GRID (NACHTMODUS) ========== */
body.night-mode .cell-team-icon {
    filter: brightness(1.5);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

body.night-mode .cell.team-cell .cell-lock {
    color: #f3e8ff !important;
}
/* ========== GESCHENK-BADGE MIT KLASSE ========== */
.gift-badge {
    background: #f59e0b !important;
    color: #000000 !important;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.5rem;
    animation: giftPulse 2s infinite;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

body.night-mode .gift-badge {
    background: #b45309 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes giftPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
/* ========== "VON DIR" BADGE IM NACHTMODUS ========== */
body.night-mode #fileManagementList span[style*="background: #dbeafe"] {
    background: #1e3a8a !important;  /* Dunkles Blau */
    color: #bfdbfe !important;       /* Helles Blau für Text */
    border: 1px solid #3b82f6 !important;
}

body.night-mode #fileManagementList span[style*="color: #1e40af"] {
    color: #93c5fd !important;  /* Helles Blau für Text */
}

/* Alternative: Falls über Klasse */
body.night-mode .file-owner-badge {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
    border: 1px solid #3b82f6 !important;
}

/* ========== RABATT-HINWEIS IM NACHTMODUS ========== */
body.night-mode .discount-hint {
    background: #2d3748 !important;
    border-left-color: #f59e0b !important;
}

body.night-mode .discount-text {
    color: #fbbf24 !important;
}

body.night-mode .discount-text strong {
    color: #f59e0b !important;
}

/* ========== SPECIAL PRICE BADGE IM NACHTMODUS ========== */
body.night-mode #specialPriceBadge {
    background: linear-gradient(135deg, #2d3748, #1e293b) !important;
    border-color: #ec4899 !important;
}

body.night-mode #specialPriceBadge span {
    color: #fbcfe8 !important;
}


/* ========== STAR-ZELLE ========== */
.cell.special-cell {
    background: linear-gradient(145deg, #fafad2 0%, #fab739 50%, #fcfc03 100%) !important;
    border: 1px solid #ec4899 !important;
    color: #831843 !important;
    position: relative;
}

/* Star-Zellen im Nachtmodus - weiße Border */
body.night-mode .cell.special-cell,
body.night-mode .cell.star {
    border: 1px solid  #e5e7eb !important;
}

.cell-special-icon {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 12px;
    z-index: 2;
    color: #ff6a00;  /* Dunkelgelb/Gold */
    
}


/* Nacht-Modus */
body.night-mode .cell.special-cell .cell-special-icon {
    color: #FFA500 !important; /* Orange für Nachtmodus */
    
}


/* ========== STAR-ZELLEN INFO MIT KLASSE ========== */
.star-info-box {
    background: #fef3c7;
    border-left: 4px solid #ec4899;
    padding: 0.75rem;
    border-radius: 0.375rem;
}

body.night-mode .star-info-box {
    background: #2d3748 !important;
    border-left-color: #ec4899 !important;
}

body.night-mode .star-info-box p,
body.night-mode .star-info-box strong,
body.night-mode .star-info-box span {
    color: #fbbf24 !important;
}

body.night-mode .star-info-box p strong {
    color: #f59e0b !important;
}
/* ========== STAR BILLING HEADER IM NACHTMODUS ========== */
body.night-mode #starBillingHeader {
    background: linear-gradient(135deg, #2d3748, #1e293b) !important;
    border-color: #ec4899 !important;
}

body.night-mode #starBillingHeader div,
body.night-mode #starBillingHeader strong,
body.night-mode #starBillingHeader span {
    color: #fbcfe8 !important;
}

body.night-mode #starBillingHeader strong {
    color: #f9a8d4 !important;
}
/* ⭐ Star-Zelle Status */
.download-status.star {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Star-Zelle Card */
.pricing-overview-card.star-card {
    border-left: 4px solid #ec4899;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(219, 39, 119, 0.02));
}

.pricing-overview-card.star-card:hover {
    border-color: #ec4899;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

/* Team-Zelle Cards */
.pricing-overview-card.team-card {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.02));
}

.pricing-overview-card.team-card:hover {
    border-color: #ef4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Nachtmodus Anpassungen */
body.night-mode .pricing-overview-card.star-card {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(219, 39, 119, 0.1));
}

body.night-mode .pricing-overview-card.team-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
}
/* Exklusive Zelle Card */
.pricing-overview-card.year-card {
    border-left: 4px solid #f59e0b;  /* Gold-Orange */
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);  /* Helles Gold-Gelb */
}

.pricing-overview-card.year-card:hover {
    border-color: #d97706;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

/* Badge für Exklusive Zelle */
.pricing-overview-card.year-card .pricing-overview-badge.year {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

/* Nachtmodus für Exklusive Zelle */
body.night-mode .pricing-overview-card.year-card {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%);
    border-left: 4px solid #fbbf24;
}

body.night-mode .pricing-overview-card.year-card:hover {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    border-color: #f59e0b;
}
/* ========== WAS IST TSICCO? MODAL - NACHTMODUS ========== */
body.night-mode #tsiccoIntroModal .modal-content {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Überschriften */
body.night-mode #tsiccoIntroModal h2 {
    color: #818cf8 !important;
}

body.night-mode #tsiccoIntroModal h3 {
    color: #f1f5f9 !important;
}

/* Willkommens-Box (blau im Tagmodus) */
body.night-mode #tsiccoIntroModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    border-color: #3b82f6 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] p {
    color: #f1f5f9 !important;
}

/* Problem-Boxen */
body.night-mode #tsiccoIntroModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-left-color: #ef4444 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f8fafc"] strong {
    color: #f1f5f9 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f8fafc"] p {
    color: #cbd5e1 !important;
}

/* Lösungs-Boxen */
body.night-mode #tsiccoIntroModal div[style*="background: #f0fdf4"] {
    background: #1e3a1e !important;
    border-color: #166534 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f0fdf4"] strong,
body.night-mode #tsiccoIntroModal div[style*="background: #f0fdf4"] p {
    color: #bbf7d0 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f0f9ff"] {
    background: #0c4a6e !important;
    border-color: #0369a1 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f0f9ff"] strong,
body.night-mode #tsiccoIntroModal div[style*="background: #f0f9ff"] p {
    color: #bae6fd !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #fef3c7"] {
    background: #78350f !important;
    border-color: #b45309 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #fef3c7"] strong,
body.night-mode #tsiccoIntroModal div[style*="background: #fef3c7"] p {
    color: #fde047 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f5f3ff"] {
    background: #4c1d95 !important;
    border-color: #6d28d9 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f5f3ff"] strong,
body.night-mode #tsiccoIntroModal div[style*="background: #f5f3ff"] p {
    color: #ddd6fe !important;
}

/* Für wen ist Tsicco? Sektion */
body.night-mode #tsiccoIntroModal div[style*="background: #f1f5f9"] {
    background: #2d3748 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f1f5f9"] h3 {
    color: #f1f5f9 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f1f5f9"] ul {
    color: #cbd5e1 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f1f5f9"] li {
    color: #cbd5e1 !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: #f1f5f9"] strong {
    color: #818cf8 !important;
}

/* So einfach funktioniert's - Gradient Box */
body.night-mode #tsiccoIntroModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] {
    background: linear-gradient(135deg, #4338ca 0%, #581c87 100%) !important;
}

body.night-mode #tsiccoIntroModal div[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] * {
    color: white !important;
}

/* Abschlusstext */
body.night-mode #tsiccoIntroModal p[style*="color: #475569"] {
    color: #cbd5e1 !important;
}

body.night-mode #tsiccoIntroModal p[style*="color: #475569"] strong {
    color: #f1f5f9 !important;
}

/* Close Button */
body.night-mode #tsiccoIntroModal .close-btn {
    color: #cbd5e1 !important;
}

body.night-mode #tsiccoIntroModal .close-btn:hover {
    color: #f1f5f9 !important;
}

/* Scrollbar im Nachtmodus */
body.night-mode #tsiccoIntroModal .modal-content::-webkit-scrollbar {
    width: 8px;
}

body.night-mode #tsiccoIntroModal .modal-content::-webkit-scrollbar-track {
    background: #2d3748;
}

body.night-mode #tsiccoIntroModal .modal-content::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}

body.night-mode #tsiccoIntroModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #718096;
}
/* ========== FREE TRIAL MODAL - NACHTMODUS ========== */
body.night-mode #freeTrialModal .modal-content {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Hintergrund der Vorteils-Box */
body.night-mode #freeTrialModal div[style*="background: #f0fdf4"] {
    background: #0f2e1a !important;
}

body.night-mode #freeTrialModal div[style*="background: #f0fdf4"] span[style*="background: #10b981"] {
    background: #059669 !important;
}

body.night-mode #freeTrialModal div[style*="background: #f0fdf4"] span,
body.night-mode #freeTrialModal div[style*="background: #f0fdf4"] strong,
body.night-mode #freeTrialModal div[style*="background: #f0fdf4"] span:not([style*="background"]) {
    color: #e2e8f0 !important;
}

/* Jedes einzelne Listenelement */
body.night-mode #freeTrialModal div[style*="display: flex; align-items: center; gap: 0.75rem;"] {
    color: #e2e8f0 !important;
}

body.night-mode #freeTrialModal div[style*="display: flex; align-items: center; gap: 0.75rem;"] span {
    color: #e2e8f0 !important;
}

body.night-mode #freeTrialModal div[style*="display: flex; align-items: center; gap: 0.75rem;"] strong {
    color: #f1f5f9 !important;
}

/* Hinweis-Box (Sicherheit) */
body.night-mode #freeTrialModal div[style*="background: #fef3c7"] {
    background: #422006 !important;
    border-left-color: #f59e0b !important;
}

body.night-mode #freeTrialModal div[style*="background: #fef3c7"] strong,
body.night-mode #freeTrialModal div[style*="background: #fef3c7"] p,
body.night-mode #freeTrialModal div[style*="background: #fef3c7"] div {
    color: #fde047 !important;
}

/* Info-Box (Server) */
body.night-mode #freeTrialModal div[style*="background: #e0f2fe"] {
    background: #0c4a6e !important;
}

body.night-mode #freeTrialModal div[style*="background: #e0f2fe"] p,
body.night-mode #freeTrialModal div[style*="background: #e0f2fe"] strong {
    color: #bae6fd !important;
}

/* Footer Text */
body.night-mode #freeTrialModal p[style*="color: var(--text-muted)"] {
    color: #94a3b8 !important;
}

/* Close Button */
body.night-mode #freeTrialModal .close-btn {
    color: #cbd5e1 !important;
}

body.night-mode #freeTrialModal .close-btn:hover {
    color: #f1f5f9 !important;
}
/* Responsive Stats Grid */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stats-grid > div {
        padding: 0.75rem !important;
    }
    
    .stats-grid div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }
}
/* Hero im Nachtmodus */
body.night-mode #warumTsiccoModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    border-color: #3b82f6 !important;
}

body.night-mode #warumTsiccoModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] h2 {
    color: white !important;
}

body.night-mode #warumTsiccoModal div[style*="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"] p {
    color: #bfdbfe !important;
}

body.night-mode #warumTsiccoModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #warumTsiccoModal div[style*="background: white"] div[style*="color: #1e293b"] {
    color: #e2e8f0 !important;
}

body.night-mode #warumTsiccoModal div[style*="background: white"] div[style*="color: #64748b"] {
    color: #cbd5e1 !important;
}
/* ========== MEDIA QUERIES FÜR ALLE MODALS ========== */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
    
    /* === ALLGEMEINE MODAL-ANPASSUNGEN === */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        padding: 1rem !important;
        margin: 0 auto !important;
    }
    
    .modal-title {
        font-size: 1.2rem !important;
    }
    
    /* === FEATURES MODAL === */
    #featuresModal div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    #featuresModal div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* === FAQ MODAL === */
    #faqModal .faq-item {
        padding: 0.875rem !important;
    }
    
    #faqModal div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* === HILFE MODAL === */
    #hilfeModal div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
        grid-template-columns: 1fr 1fr !important;
    }
    
    #hilfeModal div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* === AGB MODAL === */
    #agbModal div[style*="display: flex; gap: 2rem; flex-wrap: wrap;"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }
    
    #agbModal div[style*="display: flex; flex-wrap: wrap; gap: 0.5rem;"] span {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    
    /* Besondere Nummern als Chips */
    #agbModal div[id="agb8"] ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25rem 0.5rem !important;
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 2.5rem !important;
    }
    
    #agbModal div[id="agb8"] ul li {
        display: inline-block !important;
        background: rgba(236, 72, 153, 0.1) !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 20px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        margin: 0 !important;
        border: 1px solid rgba(236, 72, 153, 0.3) !important;
    }
    
    /* === DATENSCHUTZ MODAL === */
    #datenschutzModal div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    #datenschutzModal div[style*="display: flex; flex-wrap: wrap; gap: 0.5rem;"] span {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    
    /* === IMPRESSUM MODAL === */
    #impressumModal div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    #impressumModal div[style*="display: flex; gap: 1.5rem;"] {
        gap: 1rem !important;
    }
    
    /* === KONTAKT MODAL - Adresse & Erreichbarkeit untereinander === */
    #kontaktModal div[style*="grid-template-columns: 1fr 1fr"][style*="margin-bottom: 1.5rem;"] {
        grid-template-columns: 1fr !important;
    }
    
    #kontaktModal div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #kontaktModal div[style*="display: flex; gap: 1rem; justify-content: center;"] {
        gap: 0.75rem !important;
    }
    
    #kontaktModal a[style*="width: 44px; height: 44px;"] {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }
    
    /* === ÜBER TSICCO MODAL - Das bin ich & Standort untereinander === */
    #aboutModal div[style*="grid-template-columns: 1fr 1fr"][style*="margin-bottom: 1.5rem;"] {
        grid-template-columns: 1fr !important;
    }
    
    #aboutModal div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #aboutModal div[style*="display: flex; gap: 1rem;"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #aboutModal div[style*="min-width: 60px"] {
        min-width: auto !important;
        font-size: 0.9rem !important;
    }
    
    /* === BUTTONS IN MODALS === */
    .modal .btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .modal .btn-primary, 
    .modal .btn-secondary {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
    
    .modal div[style*="display: flex; gap: 1rem;"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* === KARTEN IN MODALS === */
    .modal div[style*="border-radius: 12px; padding: 1.25rem;"] {
        padding: 1rem !important;
    }
    
    .modal div[style*="border-radius: 16px; padding: 1.5rem;"] {
        padding: 1.25rem !important;
    }
    
    /* === SCHRIFTGRÖSSEN === */
    .modal h4 {
        font-size: 1.1rem !important;
    }
    
    .modal h5 {
        font-size: 1rem !important;
    }
    
    .modal p, .modal li {
        font-size: 0.85rem !important;
    }
    
    /* === AVATAR IN ÜBER TSICCO === */
    #aboutModal img[style*="width: 100px; height: 100px;"] {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Handy (max-width: 480px) */
@media (max-width: 480px) {
    
    /* === FEATURES MODAL - 1 SPALTE === */
    #featuresModal div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #featuresModal div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* === FAQ MODAL - 1 SPALTE === */
    #faqModal div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* === HILFE MODAL - 1 SPALTE === */
    #hilfeModal div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* === AGB MODAL - Kleinere Chips === */
    #agbModal div[id="agb8"] ul li {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    /* === KLEINERE SCHRIFTEN === */
    .modal-content {
        padding: 0.75rem !important;
    }
    
    .modal h4 {
        font-size: 1rem !important;
    }
    
    .modal p, .modal li {
        font-size: 0.8rem !important;
    }
    
    /* === NOCH KLEINERE ABSTÄNDE === */
    .modal div[style*="padding: 1.25rem;"] {
        padding: 0.875rem !important;
    }
    
    .modal div[style*="padding: 1.5rem;"] {
        padding: 1rem !important;
    }
    
    /* === AVATAR NOCH KLEINER === */
    #aboutModal img[style*="width: 100px; height: 100px;"] {
        width: 70px !important;
        height: 70px !important;
    }
    
    /* === INHALTSVERZEICHNIS CHIPS === */
    #agbModal span[style*="padding: 0.25rem 0.75rem;"],
    #datenschutzModal span[style*="padding: 0.25rem 0.75rem;"] {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
}
/* === SPEZIFISCHE ANPASSUNGEN FÜR KONTAKT, AGB UND ÜBER TSICCO === */
@media (max-width: 768px) {
    
    /* 1. KONTAKT MODAL: Adresse und Erreichbarkeit untereinander */
    #kontaktModal div[style*="grid-template-columns: 1fr 1fr"][style*="margin-bottom: 1.5rem;"] {
        grid-template-columns: 1fr !important;
    }
    
    /* 2. AGB MODAL: Besondere Nummern auf mehrere Zeilen verteilen */
    #agbModal div[id="agb8"] ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25rem 0.5rem !important;
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 2.5rem !important;
    }
    
    #agbModal div[id="agb8"] ul li {
        display: inline-block !important;
        background: rgba(236, 72, 153, 0.1) !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 20px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        margin: 0 !important;
        border: 1px solid rgba(236, 72, 153, 0.3) !important;
    }
    
    /* 3. ÜBER TSICCO: Das bin ich und Standort untereinander */
    #aboutModal div[style*="grid-template-columns: 1fr 1fr"][style*="margin-bottom: 1.5rem;"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Zusätzlich: Abstände anpassen */
    #aboutModal div[style*="grid-template-columns: 1fr 1fr"] > div {
        margin-bottom: 0 !important;
    }
}

/* Für ganz kleine Handys (max-width: 480px) */
@media (max-width: 480px) {
    
    /* Noch kleinere Schrift für die Nummern-Chips */
    #agbModal div[id="agb8"] ul li {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.4rem !important;
    }
}

/* Stile für responsive Design */
    @media (max-width: 768px) {
        .desktop-buttons {
            display: none !important;
        }
        .mobile-buttons {
            display: flex !important;
        }
    }
    @media (min-width: 769px) {
        .desktop-buttons {
            display: flex !important;
        }
        .mobile-buttons {
            display: none !important;
        }
    }
/* ========== E2EE MODAL - NACHTMODUS (KEINE TABELLE) ========== */
body.night-mode #e2eeModal .modal-content {
    background: #1e293b !important;
}

body.night-mode #e2eeModal div[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #e2eeModal div[style*="background: white"] p,
body.night-mode #e2eeModal div[style*="background: white"] h5 {
    color: #e2e8f0 !important;
}

/* Vorteils-Karten */
body.night-mode #e2eeModal div[style*="background: #f0fdf4"] {
    background: #1e3a1e !important;
    border-color: #166534 !important;
}

body.night-mode #e2eeModal div[style*="background: #f0fdf4"] strong,
body.night-mode #e2eeModal div[style*="background: #f0fdf4"] p {
    color: #bbf7d0 !important;
}

/* Tarif-Karten */
body.night-mode #e2eeModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.night-mode #e2eeModal div[style*="background: #f8fafc"] span {
    color: #e2e8f0 !important;
}

/* Star-Zellen Karte */
body.night-mode #e2eeModal div[style*="background: #fdf2f8"] {
    background: #2d3748 !important;
    border-color: #9d174d !important;
}

body.night-mode #e2eeModal div[style*="background: #fdf2f8"] span {
    color: #f9a8d4 !important;
}

/* Team-Zellen Karte */
body.night-mode #e2eeModal div[style*="background: #fef2f2"] {
    background: #2d3748 !important;
    border-color: #991b1b !important;
}

body.night-mode #e2eeModal div[style*="background: #fef2f2"] span {
    color: #f87171 !important;
}

/* Exklusive Zelle Karte */
body.night-mode #e2eeModal div[style*="background: #fef3c7"] {
    background: #422006 !important;
    border-color: #854d0e !important;
}

body.night-mode #e2eeModal div[style*="background: #fef3c7"] span {
    color: #fde047 !important;
}

/* Hinweis-Box */
body.night-mode #e2eeModal div[style*="background: #fef3c7"]:last-of-type {
    background: #422006 !important;
    border-left-color: #f59e0b !important;
}

body.night-mode #e2eeModal div[style*="background: #fef3c7"]:last-of-type p {
    color: #fde047 !important;
}
/* ========== E2EE MODAL - MEDIA QUERIES (TABELLENLOSE VERSION) ========== */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
    
    /* 2-spaltiges Layout auf 1 Spalte reduzieren */
    #e2eeModal div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    /* Abstände reduzieren */
    #e2eeModal .modal-content {
        padding: 1rem !important;
    }
    
    #e2eeModal div[style*="padding: 1.25rem"] {
        padding: 1rem !important;
    }
    
    #e2eeModal div[style*="padding: 1rem 1.5rem 1.5rem"] {
        padding: 0.5rem 1rem 1rem !important;
    }
    
    /* Tarif-Karten: Bei schmalem Bildschirm umbrechen */
    #e2eeModal div[style*="display: flex; justify-content: space-between;"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    #e2eeModal div[style*="display: flex; justify-content: space-between;"] span:first-child {
        width: 100% !important;
        margin-bottom: 0.25rem !important;
    }
    
    #e2eeModal div[style*="display: flex; justify-content: space-between;"] span:last-child {
        width: 100% !important;
        text-align: left !important;
        padding-left: 0.5rem !important;
    }
    
    /* Schriftgrößen anpassen */
    #e2eeModal h4 {
        font-size: 1.2rem !important;
    }
    
    #e2eeModal h5 {
        font-size: 1rem !important;
    }
    
    #e2eeModal p {
        font-size: 0.85rem !important;
    }
    
    /* Buttons untereinander */
    #e2eeModal div[style*="display: flex; gap: 0.75rem;"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #e2eeModal .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Handy (max-width: 480px) */
@media (max-width: 480px) {
    
    /* Noch kleinere Schriften */
    #e2eeModal h4 {
        font-size: 1.1rem !important;
    }
    
    #e2eeModal p {
        font-size: 0.8rem !important;
    }
    
    /* Header-Icon etwas kleiner */
    #e2eeModal div[style*="font-size: 3rem"] {
        font-size: 2.5rem !important;
    }
    
    /* Vorteils-Karten kompakter */
    #e2eeModal div[style*="border-radius: 10px; padding: 1rem"] {
        padding: 0.75rem !important;
    }
    
    #e2eeModal div[style*="font-size: 1.5rem"] {
        font-size: 1.3rem !important;
    }
    
    /* Tarif-Karten noch kompakter */
    #e2eeModal div[style*="padding: 0.6rem 1rem"] {
        padding: 0.5rem 0.75rem !important;
    }
    
    #e2eeModal div[style*="padding: 0.6rem 1rem"] span {
        font-size: 0.8rem !important;
    }
}

/* Sehr kleine Handys (max-width: 360px) */
@media (max-width: 360px) {
    
    #e2eeModal h4 {
        font-size: 1rem !important;
    }
    
    #e2eeModal p,
    #e2eeModal span {
        font-size: 0.7rem !important;
    }
    
    #e2eeModal div[style*="font-size: 3rem"] {
        font-size: 2rem !important;
    }
    
    /* Tarif-Karten: Noch kompakter */
    #e2eeModal div[style*="padding: 0.5rem 0.75rem"] {
        padding: 0.4rem 0.5rem !important;
    }
}
/* ========== DOPPELPASSWORT HINWEIS - NACHTMODUS & MEDIA QUERIES ========== */

/* Tagmodus (bleibt wie gehabt) */
#e2eeModal div[style*="background: #f0f9ff"] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}

/* Nachtmodus */
body.night-mode #e2eeModal div[style*="background: #f0f9ff"] {
    background: #1e3a5f !important;
    border-color: #0369a1 !important;
}

body.night-mode #e2eeModal div[style*="background: #f0f9ff"] strong {
    color: #7dd3fc !important;
}

body.night-mode #e2eeModal div[style*="background: #f0f9ff"] p {
    color: #bae6fd !important;
}

body.night-mode #e2eeModal div[style*="background: #f0f9ff"] span {
    color: #7dd3fc !important;
}

/* Mobile Anpassungen für den Doppelpasswort-Hinweis */
@media (max-width: 768px) {
    #e2eeModal div[style*="background: #f0f9ff"] {
        padding: 0.75rem !important;
    }
    
    #e2eeModal div[style*="background: #f0f9ff"] div {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    #e2eeModal div[style*="background: #f0f9ff"] span[style*="font-size: 1.5rem"] {
        font-size: 1.3rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    #e2eeModal div[style*="background: #f0f9ff"] p {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    #e2eeModal div[style*="background: #f0f9ff"] {
        padding: 0.6rem !important;
    }
    
    #e2eeModal div[style*="background: #f0f9ff"] p {
        font-size: 0.75rem !important;
    }
}
/* ========== BILLING MODAL - TAG-MODUS HERVORHEBUNG ========== */
#billingPrivateBtn,
#billingBusinessBtn {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #e2e8f0 !important;
    background: white !important;
    transition: all 0.2s ease !important;
}

#billingPrivateBtn.selected,
#billingBusinessBtn.selected {
    border-color: #3b82f6 !important;
    border-width: 3px !important;
    background: #eff6ff !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;
    transform: scale(1.03) !important;
}

#billingPrivateBtn.selected div:last-child,
#billingBusinessBtn.selected div:last-child {
    color: #1e293b !important;
    font-weight: 600 !important;
}
/* ========== BILLING MODAL - NACHTMODUS HERVORHEBUNG ========== */

/* Basis-Stile für Nachtmodus */
body.night-mode #billingPrivateBtn,
body.night-mode #billingBusinessBtn {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #4a5568 !important;
    background: #2d3748 !important;
    transition: all 0.2s ease !important;
}

/* Textfarbe im Nachtmodus */
body.night-mode #billingPrivateBtn div:last-child,
body.night-mode #billingBusinessBtn div:last-child {
    color: #f1f5f9 !important;
}

/* Hervorhebung für Privat Button (wenn ausgewählt) */
body.night-mode #billingPrivateBtn.selected,
body.night-mode #billingPrivateBtn[style*="border-color: rgb(59, 130, 246)"] {
    border-color: #60a5fa !important;
    border-width: 3px !important;
    background: #1e3a5f !important;
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.5) !important;
    transform: scale(1.03) !important;
}

body.night-mode #billingPrivateBtn.selected div:last-child,
body.night-mode #billingPrivateBtn[style*="border-color: rgb(59, 130, 246)"] div:last-child {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Hervorhebung für Business Button (wenn ausgewählt) */
body.night-mode #billingBusinessBtn.selected,
body.night-mode #billingBusinessBtn[style*="border-color: rgb(59, 130, 246)"] {
    border-color: #60a5fa !important;
    border-width: 3px !important;
    background: #1e3a5f !important;
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.5) !important;
    transform: scale(1.03) !important;
}

body.night-mode #billingBusinessBtn.selected div:last-child,
body.night-mode #billingBusinessBtn[style*="border-color: rgb(59, 130, 246)"] div:last-child {
    color: #ffffff !important;
    font-weight: 600 !important;
}
/* ========== STAR-ZELLEN MODAL - BASISPREIS CONTAINER ========== */

/* Container im Nachtmodus */
body.night-mode #starDurationModal div[style*="background:linear-gradient(135deg,#fdf2f8,#fce7f3)"] {
    background: linear-gradient(135deg, #2d3748, #1e3a5f) !important;
    border: 1px solid #ec4899 !important;
}

/* Text im Container */
body.night-mode #starDurationModal div[style*="background:linear-gradient(135deg,#fdf2f8,#fce7f3)"] span {
    color: #f9a8d4 !important;
}

/* Falls das span direkt angesprochen werden muss */
body.night-mode #starDurationModal span[style*="color:#9d174d; font-weight:600;"] {
    color: #f9a8d4 !important;
}
/* Zwei Schlösser nebeneinander */
.cell-lock {
    filter: drop-shadow(0 0 2px rgba(102, 126, 234, 0.3));
}

/* Für Handy etwas kleiner */
@media (max-width: 768px) {
    .cell-lock[style*="right: 15px"] {
        right: 15px !important;
        font-size: 14px !important;
    }
    
    .cell-lock[style*="right: 2px"] {
        font-size: 14px !important;
    }
}
/* ========== DSGVO MODAL - NACHTMODUS ========== */
body.night-mode #dsgvoModal > div {
    background: #1e293b !important;
}

body.night-mode #dsgvoModal h3,
body.night-mode #dsgvoModal h4 {
    color: #f1f5f9 !important;
}

body.night-mode #dsgvoModal p,
body.night-mode #dsgvoModal li {
    color: #cbd5e1 !important;
}

body.night-mode #dsgvoModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
}

body.night-mode #dsgvoModal div[style*="background: #f8fafc"] div {
    color: #e2e8f0 !important;
}

body.night-mode #dsgvoModal a {
    color: #93c5fd !important;
}

body.night-mode #dsgvoModal div[style*="border-top"] {
    border-top-color: #475569 !important;
}
/* ========== STAR-ZELLEN INFO BOX - NACHTMODUS ========== */
body.night-mode .info-box {
    background: #1e3a5f !important;
    border-left-color: #ec4899 !important;
}

body.night-mode .info-box span {
    color: #f1f5f9 !important;
}

body.night-mode .info-box span[style*="color: #9d174d"] {
    color: #f9a8d4 !important;
}
/* ========== STAR BESTÄTIGUNGS MODAL - NACHTMODUS ========== */
body.night-mode #starConfirmationModal > div {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.night-mode #starConfirmationModal h3 {
    color: #f1f5f9 !important;
}

body.night-mode #starConfirmationModal p {
    color: #cbd5e1 !important;
}

body.night-mode #starConfirmationModal div[style*="background: #f8fafc"] {
    background: #2d3748 !important;
    border-color: #475569 !important;
}

body.night-mode #starConfirmationModal div[style*="background: #f8fafc"] span {
    color: #e2e8f0 !important;
}

body.night-mode #starConfirmationModal div[style*="background: linear-gradient(135deg, #fdf2f8, #fce7f3)"] {
    background: linear-gradient(135deg, #2d3748, #1e3a5f) !important;
    border-color: #475569 !important;
}

body.night-mode #starConfirmationModal div[style*="background: linear-gradient(135deg, #fdf2f8, #fce7f3)"] span {
    color: #cbd5e1 !important;
}

body.night-mode #starConfirmationModal div[style*="background: linear-gradient(135deg, #fdf2f8, #fce7f3)"] div {
    color: #f9a8d4 !important;
}

body.night-mode #starConfirmationModal button[style*="background: white"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.night-mode #starConfirmationModal button[style*="background: white"]:hover {
    background: #3d4a5c !important;
}
/* Nachtmodus für Test-Hinweis */
body.night-mode #teamPricingModal div[style*="background: #f1f5f9"] {
    background: #212b3b !important;
    border-color: #4a5568 !important;
}

body.night-mode #teamPricingModal div[style*="background: #f1f5f9"] strong {
    color: #f1f5f9 !important;
}

body.night-mode #teamPricingModal div[style*="background: #f1f5f9"] p {
    color: #cbd5e1 !important;
}
/* Geschenk-Zelle Styling */
.cell.gift-cell {
    background: linear-gradient(145deg, #f0f2f5  0%, #fcb1d7 50%, #E4E7EB 100%);
    border: 1px solid #f59e0b !important;
    position: relative;
}
/* Nachtmodus - dunkleres Türkis */
body.night-mode .cell.gift-cell {
    background: linear-gradient(145deg, #0f766e 0%, #0a5c56 50%, #064e48 100%) !important;
    border: 1px solid #14b8a6 !important;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
  }  

.cell.gift-cell::before {
    content: '🎁';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 12px;
    z-index: 2;
}

.legend-item[data-filter="free"] .legend-color {
    background: linear-gradient(145deg, #f4daf3 0%, #f8cfeb 50%, #fcb4ee 100%) !important;
}
/* ========== LEGENDE - NACHTMODUS ========== */

/* Legend-Container */
body.night-mode .legend {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

/* Legend-Items */
body.night-mode .legend-item {
    background: rgba(51, 65, 85, 0.5) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
    color: #e2e8f0 !important;
}

body.night-mode .legend-item:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
}

body.night-mode .legend-item.filter-active {
    background: rgba(102, 126, 234, 0.35) !important;
    border-color: rgba(102, 126, 234, 0.7) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* Legend-Text */
body.night-mode .legend-item span {
    color: #e2e8f0 !important;
}

/* Legend-Farben (die kleinen Quadrate) */
body.night-mode .legend-item[data-filter="all"] .legend-color {
    background: rgba(51, 65, 85, 0.6) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
}

body.night-mode .legend-item[data-filter="free"] .legend-color {
    background: linear-gradient(145deg, #4a1a44 0%, #5e2155 50%, #7a2a6e 100%) !important;
    border-color: #fa8eea !important;
}

body.night-mode .legend-item[data-filter="premium-7"] .legend-color {
    background: linear-gradient(145deg, #155e75 0%, #0e7490 50%, #0891b2 100%) !important;
    border-color: #6ee6fa !important;
}

body.night-mode .legend-item[data-filter="premium"] .legend-color {
    background: linear-gradient(145deg, #a16207 0%, #ca8a04 50%, #eab308 100%) !important;
    border-color: #fcdf83 !important;
}

body.night-mode .legend-item[data-filter="premium-plus"] .legend-color {
    background: linear-gradient(145deg, #4d7c0f 0%, #65a30d 50%, #84cc16 100%) !important;
    border-color: #caf786 !important;
}

body.night-mode .legend-item[data-filter="team-cell"] .legend-color {
    background: linear-gradient(145deg, #581c87 0%, #6b21a8 50%, #7e22ce 100%)  !important;
    border-color: #c289fa !important;
}
/* Team-Icon im Nachtmodus - immer hell */
body.night-mode .cell-team-icon {
    color: #dbc2fc !important;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

body.night-mode .legend-item[data-filter="special-cell"] .legend-color {
    background: linear-gradient(145deg, #fafa7a 0%, #fab739 50%, #fcfc03 100%) !important;
    border-color: #fcec9a !important;
}

body.night-mode .legend-item[data-filter="personal"] .legend-color {
    background: linear-gradient(145deg, #78350f 0%, #b45309 50%, #d97706 100%) !important;
    border-color: #fbbf24 !important;
}

body.night-mode .legend-item[data-filter="hasSecondPassword"] .legend-color {
    background: transparent !important;
    border-color: #fbbf24 !important;
}

body.night-mode .legend-item[data-filter="hasSecondPassword"] .legend-color span {
    color: #fbbf24 !important;
}

/* Geschenk-Zelle Legend */
body.night-mode .legend-item[data-filter="gift-cell"] .legend-color {
    background: linear-gradient(145deg, #0f766e 0%, #0a5c56 50%, #064e48 100%) !important;
    border-color: #8cfaee !important;
}
/* Fix: Back-to-Top Button Overflow verhindern */
.back-to-top {
    right: 20px !important;
    max-width: 50px !important;
    overflow: hidden !important;
}

    /* Für PC */
@media (min-width: 769px) {
    .grid-container {
        max-width: 640px;
        margin: 0 auto;
    }
    
    .grid {
        max-width: 640px;
    }
}
/* ========== KONTAKTFORMULAR NACHTMODUS ========== */
body.night-mode #kontaktModal .modal-content {
    background: var(--bg-primary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

/* Header Box */
body.night-mode #kontaktModal [style*="background: linear-gradient(135deg, #dbeafe"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
    border-color: #3b82f6 !important;
}

body.night-mode #kontaktModal [style*="background: linear-gradient(135deg, #dbeafe"] h4,
body.night-mode #kontaktModal [style*="background: linear-gradient(135deg, #dbeafe"] p {
    color: #bfdbfe !important;
}

/* Kontakt-Karten */
body.night-mode #kontaktModal [style*="background: white"] {
    background: #334155 !important;
    border-color: #475569 !important;
}

body.night-mode #kontaktModal [style*="background: white"] h5 {
    color: #f1f5f9 !important;
}

body.night-mode #kontaktModal [style*="background: white"] p {
    color: #94a3b8 !important;
}

/* Formular Box */
body.night-mode #kontaktModal [style*="background: linear-gradient(135deg, #f0fdf4"] {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
    border-color: #22c55e !important;
}

body.night-mode #kontaktModal [style*="background: linear-gradient(135deg, #f0fdf4"] h4 {
    color: #bbf7d0 !important;
}

/* Formular Labels */
body.night-mode #kontaktModal label {
    color: #e2e8f0 !important;
}

/* Formular Inputs */
body.night-mode #kontaktModal input,
body.night-mode #kontaktModal select,
body.night-mode #kontaktModal textarea {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.night-mode #kontaktModal input::placeholder,
body.night-mode #kontaktModal textarea::placeholder {
    color: #64748b !important;
}

/* Formular Inputs Focus */
body.night-mode #kontaktModal input:focus,
body.night-mode #kontaktModal select:focus,
body.night-mode #kontaktModal textarea:focus {
    border-color: #22c55e !important;
    outline: none;
}

/* Hinweistext */
body.night-mode #kontaktModal [style*="color: #64748b"] {
    color: #94a3b8 !important;
}

body.night-mode div[style*="background: #34efb0"] {
    color: #e6ebe9!important;
    background: #065f46 !important;
    border: 1px solid #14b8a6 !important;
    box-shadow: 0 2px 8px rgba(6,95,70,0.3);
}