/* ========================================================= FollowUpp Dark Mode - central override layer Lade diese Datei NACH allen anderen CSS-Dateien. Aktivierung: oder ========================================================= */ :root { color-scheme: light; } html[data-theme="dark"], html[data-theme="dark"] body, body.darkmode { color-scheme: dark; } /* ========================= Design Tokens ========================= */ html[data-theme="dark"], body.darkmode { --dm-bg: #020617; --dm-bg-2: #060b16; --dm-surface-3: #162238; --dm-card: #111827; --dm-card-soft: #0f172a; --dm-border: rgba(148, 163, 184, 0.22); --dm-border-strong: rgba(148, 163, 184, 0.34); --dm-text: #f8fafc; --dm-text-2: #e5e7eb; --dm-muted: #a8b4c7; --dm-muted-2: #7f8da3; --dm-orange: #f97316; --dm-orange-2: #fb923c; --dm-orange-soft: rgba(249, 115, 22, 0.14); --dm-blue-soft: rgba(59, 130, 246, 0.14); --dm-green-soft: rgba(16, 185, 129, 0.14); --dm-red-soft: rgba(239, 68, 68, 0.14); --dm-yellow-soft: rgba(245, 158, 11, 0.16); --dm-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); /* vorhandene Projekt-Variablen direkt umbiegen */ --bg: var(--dm-bg); --card: var(--dm-card); --text: var(--dm-text); --muted: var(--dm-muted); --border: var(--dm-border); --fu-bg-soft: var(--dm-card-soft); --fu-card: var(--dm-card); --fu-card-2: var(--dm-surface-2); --fu-border: var(--dm-border); --fu-border-strong: var(--dm-border-strong); --fu-text: var(--dm-text); --fu-muted: var(--dm-muted); --fu-muted-2: var(--dm-muted-2); --fu-orange-soft: var(--dm-orange-soft); } /* ========================= Page / Shell ========================= */ body.darkmode, html[data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.08), transparent 30%), radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%), linear-gradient(180deg, var(--dm-bg) 0%, #07101f 100%) !important; color: var(--dm-text) !important; } body.darkmode .app-layout, html[data-theme="dark"] .app-layout, body.darkmode .app-main, html[data-theme="dark"] .app-main, body.darkmode .app-content, html[data-theme="dark"] .app-content { background: transparent !important; color: var(--dm-text) !important; } body.darkmode .app-sidebar, html[data-theme="dark"] .app-sidebar { background: #050b18 !important; border-right: 1px solid rgba(148, 163, 184, 0.14) !important; } body.darkmode .app-mobilebar, html[data-theme="dark"] .app-mobilebar { background: rgba(2, 6, 23, 0.90) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.darkmode .app-menu-toggle, html[data-theme="dark"] .app-menu-toggle, body.darkmode .app-mobile-focus-item, html[data-theme="dark"] .app-mobile-focus-item, body.darkmode .app-mobile-avatar, html[data-theme="dark"] .app-mobile-avatar { background: var(--dm-surface-2) !important; border-color: var(--dm-border-strong) !important; color: var(--dm-text) !important; } body.darkmode .app-overlay, html[data-theme="dark"] .app-overlay { background: rgba(2, 6, 23, 0.74) !important; } body.darkmode .app-footer, html[data-theme="dark"] .app-footer { background: rgba(2, 6, 23, 0.84) !important; border-top-color: var(--dm-border) !important; color: var(--dm-muted) !important; } body.darkmode .footer-right a, html[data-theme="dark"] .footer-right a { color: var(--dm-muted) !important; } body.darkmode .footer-right a:hover, html[data-theme="dark"] .footer-right a:hover { color: var(--dm-text) !important; } /* Dark toggle im Sidebar-Menü */ body.darkmode .app-theme-toggle, html[data-theme="dark"] .app-theme-toggle, .app-theme-toggle { width: 100%; border: 0; font: inherit; cursor: pointer; text-align: left; } body.darkmode .app-theme-toggle, html[data-theme="dark"] .app-theme-toggle { background: transparent !important; color: rgba(255, 255, 255, 0.86) !important; } /* ========================= Global Typography ========================= */ body.darkmode h1, body.darkmode h2, body.darkmode h3, body.darkmode h4, body.darkmode h5, body.darkmode h6, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, body.darkmode .page-head h1, body.darkmode .topbar h1, body.darkmode .section-title, body.darkmode .section-head h2, body.darkmode .card h2, body.darkmode .detail-title, body.darkmode .detail-card-head h2, body.darkmode .detail-accordion-title, body.darkmode .detail-variant-title, body.darkmode .response-card h2, body.darkmode .response-card h3, body.darkmode .static-page-header h1, body.darkmode .static-card h2, body.darkmode .plan-title, body.darkmode .team-visual-title, body.darkmode .account-plan-title, body.darkmode .account-plan-heading, body.darkmode .hero-copy h1, body.darkmode .step-card h3, body.darkmode .usecase-card h3, body.darkmode .benefit-item strong, body.darkmode .faq-question span:first-child { color: var(--dm-text) !important; } body.darkmode p, body.darkmode .subtitle, body.darkmode .page-info, body.darkmode .empty-state, body.darkmode .cell-sub, body.darkmode .contact-muted, body.darkmode .detail-subtitle, body.darkmode .detail-section-intro, body.darkmode .detail-section-intro-small, body.darkmode .detail-accordion-meta, body.darkmode .detail-overview-label, body.darkmode .detail-panel-label, body.darkmode .detail-meta-label, body.darkmode .detail-reply-source, body.darkmode .fu-section-subtitle, body.darkmode .fu-form-help, body.darkmode .response-card p, body.darkmode .response-field small, body.darkmode .response-meta, body.darkmode .response-mini-box span, body.darkmode .static-page-header p, body.darkmode .static-card p, body.darkmode .static-card li, body.darkmode .info-item .label, body.darkmode .meta-label, body.darkmode .detail-label, body.darkmode .plan-desc, body.darkmode .plan-seats, body.darkmode .plan-price-note, body.darkmode .enterprise-note, body.darkmode .billing-info-text, body.darkmode .account-plan-section-subtitle, body.darkmode .account-plan-summary-label, body.darkmode .account-plan-paid-until, body.darkmode .account-soft-note, body.darkmode .dashboard-free-usage-subtitle, body.darkmode .hero-text, body.darkmode .step-card p, body.darkmode .usecase-card p, body.darkmode .benefit-item p, body.darkmode .alias-note, body.darkmode .alias-row span, body.darkmode .timeline-sub, body.darkmode .stack-subtitle, body.darkmode .followup-due, body.darkmode .followup-contact-company, body.darkmode .followup-contact-mail, body.darkmode .member-mail, html[data-theme="dark"] p, html[data-theme="dark"] .subtitle, html[data-theme="dark"] .page-info, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .cell-sub { color: var(--dm-muted) !important; } body.darkmode a, html[data-theme="dark"] a { color: inherit; } body.darkmode .text-link, body.darkmode .text-action-link, body.darkmode .detail-inline-link, body.darkmode .static-card a, body.darkmode .fu-form-help a, body.darkmode .page-inline-action a, html[data-theme="dark"] .text-link, html[data-theme="dark"] .text-action-link, html[data-theme="dark"] .detail-inline-link, html[data-theme="dark"] .static-card a, html[data-theme="dark"] .fu-form-help a { color: var(--dm-orange-2) !important; } /* ========================= Cards / Panels / Hero Blocks ========================= */ body.darkmode .card, body.darkmode .hero-card, body.darkmode .outlook-hero, body.darkmode .detail-card, body.darkmode .detail-hero-main, body.darkmode .detail-accordion, body.darkmode .detail-variant-card, body.darkmode .variant-card, body.darkmode .text-card, body.darkmode .detail-textbox, body.darkmode .detail-overview-group, body.darkmode .detail-panel, body.darkmode .detail-meta-item, body.darkmode .detail-reply-form, body.darkmode .detail-reply-item, body.darkmode .detail-reply-box, body.darkmode .followup-create-card, body.darkmode .followup-edit-card, body.darkmode .followup-create-hero, body.darkmode .followup-edit-hero, body.darkmode .response-card, body.darkmode .response-mini-box, body.darkmode .static-card, body.darkmode .info-item, body.darkmode .plan-card, body.darkmode .enterprise-card, body.darkmode .team-visual-card, body.darkmode .team-stat-box, body.darkmode .account-plan-card, body.darkmode .account-plan-info-box, body.darkmode .account-plan-usage, body.darkmode .account-plan-usage-card, body.darkmode .account-plan-summary-item, body.darkmode .account-plan-stat, body.darkmode .account-plan-stat-box, body.darkmode .account-plan-highlight, body.darkmode .account-plan-benefit, body.darkmode .account-billing-box, body.darkmode .user-welcome, body.darkmode .dashboard-free-usage-card, body.darkmode .dashboard-free-usage-stat, body.darkmode .dashboard-summary-card, body.darkmode .summary-kpi, body.darkmode .mini-metric, body.darkmode .stack-row, body.darkmode .timeline-item, body.darkmode .followup-item, body.darkmode .hero-kpi, body.darkmode .hero-kpi-secondary, body.darkmode .hero-stat, body.darkmode .step-card, body.darkmode .usecase-card, body.darkmode .benefit-item, body.darkmode .alias-accordion, body.darkmode .alias-accordion-body, body.darkmode .alias-group, body.darkmode .faq-item, body.darkmode .faq-question, body.darkmode .box, body.darkmode .fact, body.darkmode .contact-link, body.darkmode .kpi-card, body.darkmode .detail-item, body.darkmode .notes-box, body.darkmode .member-card, body.darkmode .empty-state, body.darkmode .twofa-secret, body.darkmode .twofa-uri, body.darkmode .twofa-section, body.darkmode .twofa-qr-box, body.darkmode .audio-preview-wrap, body.darkmode .saving-box, html[data-theme="dark"] .card, html[data-theme="dark"] .hero-card, html[data-theme="dark"] .outlook-hero, html[data-theme="dark"] .detail-card, html[data-theme="dark"] .detail-hero-main, html[data-theme="dark"] .detail-accordion, html[data-theme="dark"] .detail-variant-card, html[data-theme="dark"] .variant-card, html[data-theme="dark"] .text-card, html[data-theme="dark"] .detail-textbox, html[data-theme="dark"] .detail-overview-group, html[data-theme="dark"] .detail-panel, html[data-theme="dark"] .detail-meta-item, html[data-theme="dark"] .response-card, html[data-theme="dark"] .static-card, html[data-theme="dark"] .plan-card, html[data-theme="dark"] .account-plan-card, html[data-theme="dark"] .hero-kpi, html[data-theme="dark"] .step-card, html[data-theme="dark"] .usecase-card, html[data-theme="dark"] .benefit-item { background: linear-gradient(180deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; box-shadow: var(--dm-shadow) !important; } /* hellweiße Karten aus Tabellen/Mobile gezielt dunkeln */ body.darkmode .responsive-followups-table tr.followup-row-link, body.darkmode .followups-table tbody tr, body.darkmode .contact-followups-card .icon-btn, html[data-theme="dark"] .responsive-followups-table tr.followup-row-link { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Hero- und Marketing-Gradienten nicht weiß auslaufen lassen */ body.darkmode .hero-card, body.darkmode .outlook-hero, body.darkmode .followup-create-hero, body.darkmode .followup-edit-hero, body.darkmode .detail-hero-main, body.darkmode .response-hero-note, body.darkmode .security-alert, body.darkmode .detail-result-note-top, body.darkmode .note, html[data-theme="dark"] .hero-card, html[data-theme="dark"] .outlook-hero { background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.14), transparent 32%), linear-gradient(180deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%) !important; border-color: var(--dm-border) !important; } body.darkmode .hero-kpi-primary, html[data-theme="dark"] .hero-kpi-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #ffffff !important; border-color: transparent !important; } body.darkmode .hero-kpi-primary *, html[data-theme="dark"] .hero-kpi-primary * { color: #ffffff !important; } /* ========================= Tables ========================= */ body.darkmode table, body.darkmode .followups-table, body.darkmode .alias-table, html[data-theme="dark"] table, html[data-theme="dark"] .followups-table { background: transparent !important; color: var(--dm-text-2) !important; } body.darkmode th, body.darkmode .followups-table th, body.darkmode .alias-table th, html[data-theme="dark"] th, html[data-theme="dark"] .followups-table th { background: transparent !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; } body.darkmode td, body.darkmode .followups-table td, body.darkmode .alias-table td, html[data-theme="dark"] td, html[data-theme="dark"] .followups-table td { color: var(--dm-text-2) !important; border-color: var(--dm-border) !important; } body.darkmode .followups-table tbody tr:hover, body.darkmode .responsive-table tbody tr:hover, body.darkmode .stack-row-link:hover, body.darkmode .timeline-item:hover, body.darkmode .followup-item-link:hover, html[data-theme="dark"] .followups-table tbody tr:hover { background: rgba(148, 163, 184, 0.08) !important; } body.darkmode .alias-row:nth-child(even), body.darkmode .alias-table tr:nth-child(even), html[data-theme="dark"] .alias-row:nth-child(even), html[data-theme="dark"] .alias-table tr:nth-child(even) { background: rgba(148, 163, 184, 0.05) !important; } /* ========================= Forms / Inputs ========================= */ body.darkmode input, body.darkmode textarea, body.darkmode select, body.darkmode .form-input, body.darkmode .input, body.darkmode .search-input, body.darkmode .fu-form-input, body.darkmode .fu-form-textarea, body.darkmode .response-input, body.darkmode .response-textarea, body.darkmode .form-field input, body.darkmode .form-field select, body.darkmode .form-field textarea, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-input, html[data-theme="dark"] .input, html[data-theme="dark"] .search-input, html[data-theme="dark"] .fu-form-input, html[data-theme="dark"] .fu-form-textarea, html[data-theme="dark"] .response-input, html[data-theme="dark"] .response-textarea { background: #0b1220 !important; color: var(--dm-text) !important; border-color: var(--dm-border-strong) !important; box-shadow: none !important; } body.darkmode input::placeholder, body.darkmode textarea::placeholder, body.darkmode .form-input::placeholder, body.darkmode .input::placeholder, body.darkmode .search-input::placeholder, body.darkmode .fu-form-input::placeholder, body.darkmode .fu-form-textarea::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-muted-2) !important; } body.darkmode input:focus, body.darkmode textarea:focus, body.darkmode select:focus, body.darkmode .form-input:focus, body.darkmode .input:focus, body.darkmode .search-input:focus, body.darkmode .fu-form-input:focus, body.darkmode .fu-form-textarea:focus, body.darkmode .response-input:focus, body.darkmode .response-textarea:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: rgba(249, 115, 22, 0.72) !important; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16) !important; } body.darkmode label, body.darkmode .form-label, body.darkmode .form-row label, body.darkmode .fu-form-label, body.darkmode .response-field label, body.darkmode .form-field label, html[data-theme="dark"] label { color: var(--dm-text-2) !important; } body.darkmode .contact-suggestions, html[data-theme="dark"] .contact-suggestions { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } body.darkmode .contact-suggestion-item, html[data-theme="dark"] .contact-suggestion-item { background: transparent !important; color: var(--dm-text) !important; } body.darkmode .contact-suggestion-item:hover, html[data-theme="dark"] .contact-suggestion-item:hover { background: rgba(148, 163, 184, 0.08) !important; } /* ========================= Buttons / Actions ========================= */ body.darkmode .btn-secondary, body.darkmode .logout-link, body.darkmode .filter-chip, body.darkmode .btn-ghost, body.darkmode .preset-btn, body.darkmode .action-btn, body.darkmode .icon-btn, body.darkmode .faq-icon, body.darkmode .app-mobile-focus-item, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .logout-link, html[data-theme="dark"] .filter-chip, html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .preset-btn, html[data-theme="dark"] .action-btn, html[data-theme="dark"] .icon-btn, html[data-theme="dark"] .faq-icon { background: var(--dm-surface-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border-strong) !important; } body.darkmode .btn-secondary:hover, body.darkmode .logout-link:hover, body.darkmode .filter-chip:hover, body.darkmode .btn-ghost:hover, body.darkmode .preset-btn:hover, body.darkmode .icon-btn:hover, html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .logout-link:hover, html[data-theme="dark"] .filter-chip:hover, html[data-theme="dark"] .btn-ghost:hover, html[data-theme="dark"] .preset-btn:hover, html[data-theme="dark"] .icon-btn:hover { background: #1e2c46 !important; border-color: rgba(148, 163, 184, 0.48) !important; color: var(--dm-text) !important; } body.darkmode .btn-primary, body.darkmode .app-create-btn, body.darkmode .response-submit, body.darkmode .filter-chip.is-active, body.darkmode .preset-btn.is-active, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .app-create-btn, html[data-theme="dark"] .response-submit, html[data-theme="dark"] .filter-chip.is-active, html[data-theme="dark"] .preset-btn.is-active { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; border-color: #f97316 !important; color: #ffffff !important; box-shadow: 0 14px 30px rgba(249, 115, 22, 0.20) !important; } body.darkmode .btn-danger, body.darkmode .btn.btn-danger, body.darkmode .btn-delete, body.darkmode .action-link-danger, html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .btn.btn-danger, html[data-theme="dark"] .btn-delete { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.32) !important; color: #fca5a5 !important; } /* ========================= Badges / Status / Notices ========================= */ body.darkmode .notice, body.darkmode .form-alert, body.darkmode .status-badge, body.darkmode .badge, body.darkmode .status-inline, body.darkmode .detail-status, body.darkmode .detail-status-meta, body.darkmode .fu-status-badge, body.darkmode .fu-meta-pill, body.darkmode .stack-pill, body.darkmode .user-status-badge, html[data-theme="dark"] .notice, html[data-theme="dark"] .form-alert, html[data-theme="dark"] .status-badge, html[data-theme="dark"] .badge, html[data-theme="dark"] .status-inline, html[data-theme="dark"] .detail-status, html[data-theme="dark"] .detail-status-meta, html[data-theme="dark"] .fu-status-badge, html[data-theme="dark"] .fu-meta-pill, html[data-theme="dark"] .stack-pill, html[data-theme="dark"] .user-status-badge { background: rgba(148, 163, 184, 0.12) !important; border-color: var(--dm-border) !important; color: var(--dm-text-2) !important; } body.darkmode .notice-success, body.darkmode .form-alert.success, body.darkmode .badge-green, body.darkmode .status-free, body.darkmode .status-paid, body.darkmode .status-inline-paid, body.darkmode .detail-status-success, body.darkmode .detail-status-done, body.darkmode .fu-status-badge.is-done, body.darkmode .user-status-paid, body.darkmode .btn-done, html[data-theme="dark"] .notice-success, html[data-theme="dark"] .badge-green, html[data-theme="dark"] .btn-done { background: var(--dm-green-soft) !important; border-color: rgba(16, 185, 129, 0.28) !important; color: #86efac !important; } body.darkmode .notice-warning, body.darkmode .badge-orange, body.darkmode .status-cancelled, body.darkmode .status-inline-free, body.darkmode .detail-status-warning, body.darkmode .detail-status-planned, body.darkmode .fu-status-badge.is-planned, body.darkmode .user-status-trial, body.darkmode .dashboard-free-usage-pill, body.darkmode .account-plan-usage-badge, body.darkmode .stack-pill-planned, html[data-theme="dark"] .notice-warning, html[data-theme="dark"] .badge-orange { background: var(--dm-orange-soft) !important; border-color: rgba(249, 115, 22, 0.30) !important; color: #fdba74 !important; } body.darkmode .notice-error, body.darkmode .form-alert.error, body.darkmode .badge-red, body.darkmode .status-suspended, body.darkmode .detail-status-danger, body.darkmode .btn-ghost-danger, html[data-theme="dark"] .form-alert.error, html[data-theme="dark"] .badge-red { background: var(--dm-red-soft) !important; border-color: rgba(239, 68, 68, 0.30) !important; color: #fca5a5 !important; } body.darkmode .badge-blue, body.darkmode .detail-status-sent, body.darkmode .fu-status-badge.is-sent, body.darkmode .stack-pill:not(.stack-pill-planned):not(.soft), html[data-theme="dark"] .badge-blue { background: var(--dm-blue-soft) !important; border-color: rgba(59, 130, 246, 0.30) !important; color: #93c5fd !important; } /* ========================= Dashboard specific ========================= */ body.darkmode .dashboard-hero-card, html[data-theme="dark"] .dashboard-hero-card { background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.18), transparent 30%), linear-gradient(180deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%) !important; border-color: var(--dm-border) !important; } body.darkmode .dashboard-hero-card-title, body.darkmode .dashboard-free-usage-title, body.darkmode .dashboard-free-usage-stat-value, body.darkmode .hero-kpi-value, body.darkmode .summary-value, body.darkmode .summary-total-value, body.darkmode .mini-metric-value, body.darkmode .stack-title, body.darkmode .timeline-top strong, body.darkmode .followup-title, body.darkmode .followup-contact-name, html[data-theme="dark"] .hero-kpi-value { color: var(--dm-text) !important; } body.darkmode .summary-bar, body.darkmode .channel-bar, body.darkmode .dashboard-free-usage-progress, body.darkmode .account-plan-progress, html[data-theme="dark"] .summary-bar, html[data-theme="dark"] .channel-bar { background: rgba(148, 163, 184, 0.18) !important; } body.darkmode .dashboard-donut::after, html[data-theme="dark"] .dashboard-donut::after { background: var(--dm-surface) !important; } /* ========================= Contact / Follow-up details ========================= */ body.darkmode .contact-name, body.darkmode .contact-company, body.darkmode .detail-value, body.darkmode .detail-overview-value, body.darkmode .detail-panel-value, body.darkmode .detail-meta-value, body.darkmode .text-card pre, body.darkmode .variant-card pre, body.darkmode .detail-textbox pre, body.darkmode .detail-variant-card pre, body.darkmode .kpi-value, body.darkmode .cell-title, body.darkmode .mobile-subject-line, body.darkmode .member-name, body.darkmode .info-item strong, html[data-theme="dark"] .contact-name, html[data-theme="dark"] .detail-value, html[data-theme="dark"] .cell-title { color: var(--dm-text) !important; } body.darkmode .kpi-late, html[data-theme="dark"] .kpi-late { background: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.28) !important; } body.darkmode .kpi-blue, html[data-theme="dark"] .kpi-blue { background: rgba(59, 130, 246, 0.10) !important; border-color: rgba(59, 130, 246, 0.28) !important; } body.darkmode .kpi-done, html[data-theme="dark"] .kpi-done { background: rgba(16, 185, 129, 0.10) !important; border-color: rgba(16, 185, 129, 0.28) !important; } /* ========================= Billing / Account / Team ========================= */ body.darkmode .plan-price, body.darkmode .plan-per-user, body.darkmode .team-stat-value, body.darkmode .account-plan-stat-value, body.darkmode .account-plan-section-title, body.darkmode .account-plan-usage-title, body.darkmode .account-plan-highlight-title, body.darkmode .account-plan-benefit-title, body.darkmode .account-billing-box-title, html[data-theme="dark"] .plan-price { color: var(--dm-text) !important; } body.darkmode .team-seat.is-free, body.darkmode .badge-secondary, html[data-theme="dark"] .team-seat.is-free { background: rgba(148, 163, 184, 0.12) !important; border-color: var(--dm-border) !important; } body.darkmode .team-seat.is-owner, html[data-theme="dark"] .team-seat.is-owner { background: var(--dm-orange-soft) !important; border-color: rgba(249, 115, 22, 0.42) !important; } body.darkmode .team-seat.is-active, html[data-theme="dark"] .team-seat.is-active { background: var(--dm-blue-soft) !important; border-color: rgba(59, 130, 246, 0.42) !important; } body.darkmode .team-seat.is-invited, html[data-theme="dark"] .team-seat.is-invited { background: var(--dm-yellow-soft) !important; border-color: rgba(245, 158, 11, 0.42) !important; } /* ========================= Marketing / static / auth-ish pages ========================= */ body.darkmode .hero, html[data-theme="dark"] .hero { background: linear-gradient(135deg, #050b18, #111c31) !important; color: #ffffff !important; } body.darkmode .box-head, body.darkmode .alias-group h3, html[data-theme="dark"] .box-head, html[data-theme="dark"] .alias-group h3 { background: var(--dm-surface-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.darkmode code, body.darkmode .alias-list code, body.darkmode .alias-table code, body.darkmode .alias-row code, html[data-theme="dark"] code { background: rgba(148, 163, 184, 0.14) !important; color: var(--dm-text) !important; } /* Auth Card nur, falls Darkmode dort aktiv ist */ body.darkmode .auth-card, html[data-theme="dark"] .auth-card { background: rgba(15, 23, 42, 0.90) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } body.darkmode .auth-card h2, body.darkmode .auth-card .subtitle, html[data-theme="dark"] .auth-card h2, html[data-theme="dark"] .auth-card .subtitle { color: var(--dm-text) !important; } /* ========================= Images / screenshot cards ========================= */ body.darkmode .hero-screenshot img, body.darkmode .faq-screenshot img, html[data-theme="dark"] .hero-screenshot img, html[data-theme="dark"] .faq-screenshot img { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } /* ========================= SVG / Icons ========================= */ body.darkmode svg, html[data-theme="dark"] svg { color: inherit; } body.darkmode .contact-link-with-icon svg, body.darkmode .contact-main-cell .cell-sub svg, body.darkmode .security-alert-icon svg, html[data-theme="dark"] .contact-link-with-icon svg, html[data-theme="dark"] .contact-main-cell .cell-sub svg { color: var(--dm-muted) !important; } /* ========================= Scrollbars ========================= */ body.darkmode *::-webkit-scrollbar, html[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; } body.darkmode *::-webkit-scrollbar-track, html[data-theme="dark"] *::-webkit-scrollbar-track { background: #020617; } body.darkmode *::-webkit-scrollbar-thumb, html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.32); border-radius: 999px; } body.darkmode *::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.48); } /* ========================= Mobile cleanup ========================= */ @media (max-width: 768px) { body.darkmode .responsive-followups-table tr.followup-row-link, html[data-theme="dark"] .responsive-followups-table tr.followup-row-link { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } body.darkmode .app-mobile-page-title, body.darkmode .app-mobile-greeting, body.darkmode .greeting-line-1, body.darkmode .greeting-line-2, html[data-theme="dark"] .app-mobile-page-title, html[data-theme="dark"] .app-mobile-greeting, html[data-theme="dark"] .greeting-line-1, html[data-theme="dark"] .greeting-line-2 { color: var(--dm-text) !important; } } /* ========================= Final safety net Fängt die häufigsten hellen Elemente ab, ohne Orange/Statusfarben platt zu machen. ========================= */ body.darkmode [style*="background:#fff"], body.darkmode [style*="background: #fff"], body.darkmode [style*="background:#ffffff"], body.darkmode [style*="background: #ffffff"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"] { background: var(--dm-surface-2) !important; } body.darkmode [style*="color:#0f172a"], body.darkmode [style*="color: #0f172a"], body.darkmode [style*="color:#111827"], body.darkmode [style*="color: #111827"], html[data-theme="dark"] [style*="color:#0f172a"], html[data-theme="dark"] [style*="color: #0f172a"], html[data-theme="dark"] [style*="color:#111827"], html[data-theme="dark"] [style*="color: #111827"] { color: var(--dm-text) !important; } /* ========================= DASHBOARD SWITCH + HINT ========================= */ body.darkmode .dashboard-view-switch-row, body.darkmode .security-hint { background: #0f172a; border-color: rgba(148,163,184,0.18); color: #cbd5f5; } /* ========================= ACCORDION ========================= */ body.darkmode .detail-accordion-summary { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); color: #e5e7eb; } body.darkmode .detail-accordion-body { background: #020617; border-top-color: rgba(148,163,184,0.18); } /* ========================= TIMELINE BOX ========================= */ body.darkmode .detail-timeline-content { background: #020617; border-color: rgba(148,163,184,0.18); color: #e5e7eb; } /* ========================= FAQ ========================= */ body.darkmode .faq-answer { background: #020617; border-top-color: rgba(148,163,184,0.12); color: #e5e7eb; } /* ========================= USE POINT (STEP BOXEN) ========================= */ body.darkmode .use-point { background: #0f172a; border-color: rgba(148,163,184,0.18); color: #e5e7eb; } /* ========================= FIX: Hintergrund bei langen Seiten konstant halten ========================= */ body.darkmode, html[data-theme="dark"] body { background: #020617 !important; color: var(--dm-text) !important; } body.darkmode::before, html[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.08), transparent 30%), radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%), linear-gradient(180deg, #020617 0%, #07101f 55%, #020617 100%); } body.darkmode .app-layout, html[data-theme="dark"] .app-layout { background: transparent !important; min-height: 100vh; } body.darkmode .app-main, html[data-theme="dark"] .app-main, body.darkmode .app-content, html[data-theme="dark"] .app-content { background: transparent !important; } /* ========================= Follow-up Create/Edit Fix ========================= */ body.darkmode .form-hint-audio, html[data-theme="dark"] .form-hint-audio { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(249, 115, 22, 0.28) !important; color: #fdba74 !important; } body.darkmode .fu-form-actions, html[data-theme="dark"] .fu-form-actions { background: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; } /* ========================= Recording State ========================= */ body.darkmode .recording-state, html[data-theme="dark"] .recording-state { background: var(--dm-surface-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text-2) !important; } /* ========================= Topbar Subtitle (viel heller) ========================= */ body.darkmode .topbar-subtitle, html[data-theme="dark"] .topbar-subtitle { color: var(--dm-text) !important; } /* ========================= SUCCESS / ALERT BOX (dein grünes Element) ========================= */ body.darkmode .alert-success, html[data-theme="dark"] .alert-success { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.28) !important; color: #86efac !important; } /* ========================= REPORT TOGGLE BUTTON (orange hell) ========================= */ body.darkmode .report-toggle-btn.is-open, html[data-theme="dark"] .report-toggle-btn.is-open { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(249, 115, 22, 0.35) !important; color: #fdba74 !important; } /* ========================= GENERIC BORDER-TOP SECTIONS ========================= */ body.darkmode [style*="border-top"], html[data-theme="dark"] [style*="border-top"] { border-top-color: var(--dm-border) !important; } /* ========================= TEAM REPORT BOX ========================= */ body.darkmode #team-report-box, html[data-theme="dark"] #team-report-box { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } /* ========================= Meta Content Text ========================= */ body.darkmode .meta > div:not(.meta-label), html[data-theme="dark"] .meta > div:not(.meta-label) { color: var(--dm-text-2) !important; } /* ========================= Quick Card ========================= */ body.darkmode .quick-card, html[data-theme="dark"] .quick-card { background: linear-gradient(180deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } /* ========================= Contact Card ========================= */ body.darkmode .contact-card, html[data-theme="dark"] .contact-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } /* ========================= Meta Box ========================= */ body.darkmode .meta-box, html[data-theme="dark"] .meta-box { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text-2) !important; } /* ========================= Meta Box Text (strong + links) ========================= */ body.darkmode .meta-box strong, body.darkmode .meta-box a, html[data-theme="dark"] .meta-box strong, html[data-theme="dark"] .meta-box a { color: var(--dm-text) !important; } /* ========================= Dashboard Switch Active Label ========================= */ body.darkmode .dashboard-view-switch-label.active, html[data-theme="dark"] .dashboard-view-switch-label.active { color: var(--dm-text) !important; } /* ========================= Result Groups (Wrapper) ========================= */ body.darkmode .result-group, html[data-theme="dark"] .result-group { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ========================= POSITIVE (grün) ========================= */ body.darkmode .result-group-positive, html[data-theme="dark"] .result-group-positive { background: linear-gradient( 180deg, rgba(16, 185, 129, 0.12) 0%, var(--dm-surface) 100% ) !important; border-color: rgba(16, 185, 129, 0.28) !important; } /* ========================= NEGATIVE (rot) ========================= */ body.darkmode .result-group-negative, html[data-theme="dark"] .result-group-negative { background: linear-gradient( 180deg, rgba(239, 68, 68, 0.12) 0%, var(--dm-surface) 100% ) !important; border-color: rgba(239, 68, 68, 0.28) !important; } /* ========================= NEUTRAL (grau) ========================= */ body.darkmode .result-group-neutral, html[data-theme="dark"] .result-group-neutral { background: linear-gradient( 180deg, rgba(148, 163, 184, 0.10) 0%, var(--dm-surface) 100% ) !important; border-color: var(--dm-border) !important; } /* ========================= Result / Performance / Channel Text ========================= */ body.darkmode .result-group-head strong, body.darkmode .result-group-total, body.darkmode .result-group-item strong, body.darkmode .performance-bar-head span, body.darkmode .performance-bar-head strong, body.darkmode .channel-row-top strong, html[data-theme="dark"] .result-group-head strong, html[data-theme="dark"] .result-group-total, html[data-theme="dark"] .result-group-item strong, html[data-theme="dark"] .performance-bar-head span, html[data-theme="dark"] .performance-bar-head strong, html[data-theme="dark"] .channel-row-top strong { color: var(--dm-text) !important; } /* ========================= Insight Row Text ========================= */ body.darkmode .insight-row strong, html[data-theme="dark"] .insight-row strong { color: var(--dm-text) !important; } /* ========================= Performance Bar Fill ========================= */ body.darkmode .performance-bar-fill-navy, html[data-theme="dark"] .performance-bar-fill-navy { background: #3b82f6 !important; /* sauberes SaaS-Blue */ } /* ========================= Mobile Meta Card ========================= */ @media (max-width: 900px) { body.darkmode .dashboard-mobile-meta-card, html[data-theme="dark"] .dashboard-mobile-meta-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } } /* ========================= Mobile Avatar / Initialen ========================= */ body.darkmode .app-mobile-avatar, html[data-theme="dark"] .app-mobile-avatar { background: #f97316 !important; color: #ffffff !important; border-color: #f97316 !important; } /* ========================= Account Card ========================= */ body.darkmode .account-card, html[data-theme="dark"] .account-card { background: linear-gradient(180deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } body.darkmode .account-card:hover, html[data-theme="dark"] .account-card:hover { background: linear-gradient( 180deg, rgba(249,115,22,0.10) 0%, var(--dm-surface) 100% ) !important; border-color: rgba(249,115,22,0.45) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.45) !important; } /* ========================= Danger Card ========================= */ body.darkmode .danger-card, html[data-theme="dark"] .danger-card { background: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #fecaca !important; } /* ========================= Guide Card ========================= */ body.darkmode .app-guide-card, html[data-theme="dark"] .app-guide-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } /* ========================= Privacy / Datenschutz & KI ========================= */ body.darkmode .privacy-card, html[data-theme="dark"] .privacy-card { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } body.darkmode .privacy-card-inner, html[data-theme="dark"] .privacy-card-inner { background: transparent !important; color: var(--dm-text) !important; } body.darkmode .privacy-card h2, body.darkmode .privacy-card h3, html[data-theme="dark"] .privacy-card h2, html[data-theme="dark"] .privacy-card h3 { color: var(--dm-text) !important; } body.darkmode .privacy-text, body.darkmode .privacy-page > p, html[data-theme="dark"] .privacy-text, html[data-theme="dark"] .privacy-page > p { color: var(--dm-muted) !important; } body.darkmode .privacy-highlight, html[data-theme="dark"] .privacy-highlight { background: rgba(249, 115, 22, 0.12) !important; border: 1px solid rgba(249, 115, 22, 0.28) !important; color: #fdba74 !important; } body.darkmode .privacy-info-box, html[data-theme="dark"] .privacy-info-box { background: var(--dm-surface-2) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; } body.darkmode .av-meta, html[data-theme="dark"] .av-meta { border-color: var(--dm-border) !important; } body.darkmode .av-meta-label, html[data-theme="dark"] .av-meta-label { color: var(--dm-muted) !important; } body.darkmode .av-meta-value, html[data-theme="dark"] .av-meta-value { color: var(--dm-text-2) !important; } body.darkmode .av-status.ok, html[data-theme="dark"] .av-status.ok { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.28) !important; color: #86efac !important; } body.darkmode .av-status.warn, html[data-theme="dark"] .av-status.warn { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(249, 115, 22, 0.28) !important; color: #fdba74 !important; } /* ========================= App Guide / PWA Anleitung ========================= */ body.darkmode .app-guide-wrap > p, html[data-theme="dark"] .app-guide-wrap > p { color: var(--dm-muted) !important; } body.darkmode .app-guide-card, body.darkmode .app-guide-full, html[data-theme="dark"] .app-guide-card, html[data-theme="dark"] .app-guide-full { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text) !important; } body.darkmode .app-guide-card h2, body.darkmode .app-guide-full h2, html[data-theme="dark"] .app-guide-card h2, html[data-theme="dark"] .app-guide-full h2 { color: var(--dm-text) !important; } body.darkmode .app-guide-card p, body.darkmode .app-guide-full p, body.darkmode .app-guide-step-content span, html[data-theme="dark"] .app-guide-card p, html[data-theme="dark"] .app-guide-full p, html[data-theme="dark"] .app-guide-step-content span { color: var(--dm-muted) !important; } body.darkmode .app-guide-step, html[data-theme="dark"] .app-guide-step { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } body.darkmode .app-guide-step-content strong, html[data-theme="dark"] .app-guide-step-content strong { color: var(--dm-text) !important; } body.darkmode .app-guide-step-number, html[data-theme="dark"] .app-guide-step-number { background: var(--dm-orange-soft) !important; color: #fdba74 !important; border: 1px solid rgba(249,115,22,0.28) !important; } body.darkmode .app-guide-tip, html[data-theme="dark"] .app-guide-tip { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.28) !important; color: #bbf7d0 !important; } body.darkmode .app-guide-note, html[data-theme="dark"] .app-guide-note { background: rgba(249,115,22,0.12) !important; border-color: rgba(249,115,22,0.28) !important; color: #fed7aa !important; } body.darkmode .status-inline-expired, body.darkmode .dashboard-mobile-meta-chip.status-inline-expired { background: rgba(249, 115, 22, 0.14); color: #fdba74; border-color: rgba(249, 115, 22, 0.35); } /* ========================= Dashboard Status: Abgelaufen wie Account-Badge ========================= */ body.darkmode .dashboard-hero-card .status-inline.status-inline-expired, html[data-theme="dark"] .dashboard-hero-card .status-inline.status-inline-expired { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; background: rgba(249, 115, 22, 0.14) !important; border: 1px solid rgba(249, 115, 22, 0.35) !important; color: #fdba74 !important; box-shadow: none !important; }