/* ========================================================= 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: #0a0a0a; --dm-bg-2: #111111; --dm-surface: #141414; --dm-surface-2: #1a1a1a; --dm-surface-3: #242424; --dm-card: #171717; --dm-card-soft: #1f1f1f; --dm-border: rgba(255,255,255,.08); --dm-border-strong: rgba(255,255,255,.14); --dm-text: #fafafa; --dm-text-2: #e5e5e5; --dm-muted: #a3a3a3; --dm-muted-2: #737373; --dm-orange: #f97316; --dm-orange-2: #fb923c; --dm-orange-soft: rgba(249,115,22,.14); --dm-blue-soft: rgba(59,130,246,.14); --dm-shadow: 0 18px 48px rgba(0,0,0,.45); /* 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%), , linear-gradient(180deg, var(--dm-bg) 0%, #111111 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: #0d0d0d !important; border-right: 1px solid rgba(148, 163, 184, 0.14) !important; } body.darkmode .app-mobilebar, html[data-theme="dark"] .app-mobilebar { background: rgba(24, 24, 27, 0.94) !important; /* zinc-900 */ border-bottom: 1px solid rgba(255,255,255,.06) !important; color: var(--dm-text) !important; backdrop-filter: blur(14px); } 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(9, 9, 11, 0.74) !important; } body.darkmode .app-footer, html[data-theme="dark"] .app-footer { background: rgba(15, 15, 15, 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: #141414 !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 .response-submit, body.darkmode .filter-chip.is-active, body.darkmode .preset-btn.is-active, html[data-theme="dark"] .btn-primary, 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, #0d0d0d, #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: #0a0a0a; } 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:#171717"], body.darkmode [style*="color: #171717"], body.darkmode [style*="color:#1a1a1a"], body.darkmode [style*="color: #1a1a1a"], html[data-theme="dark"] [style*="color:#171717"], html[data-theme="dark"] [style*="color: #171717"], html[data-theme="dark"] [style*="color:#1a1a1a"], html[data-theme="dark"] [style*="color: #1a1a1a"] { color: var(--dm-text) !important; } /* ========================= DASHBOARD SWITCH + HINT ========================= */ body.darkmode .dashboard-view-switch-row, body.darkmode .security-hint { background: #171717; border-color: rgba(148,163,184,0.18); color: #cbd5f5; } /* ========================= ACCORDION ========================= */ body.darkmode .detail-accordion-summary { background: linear-gradient(180deg, #171717 0%, #0a0a0a 100%); color: #e5e7eb; } body.darkmode .detail-accordion-body { background: #0a0a0a; border-top-color: rgba(148,163,184,0.18); } /* ========================= TIMELINE BOX ========================= */ body.darkmode .detail-timeline-content { background: #0a0a0a; border-color: rgba(148,163,184,0.18); color: #e5e7eb; } /* ========================= FAQ ========================= */ body.darkmode .faq-answer { background: #0a0a0a; border-top-color: rgba(148,163,184,0.12); color: #e5e7eb; } /* ========================= USE POINT (STEP BOXEN) ========================= */ body.darkmode .use-point { background: #171717; 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: #0a0a0a !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%), linear-gradient(180deg, #0a0a0a 0%, #111111 55%, #0a0a0a 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; } body { margin: 0; font-family: Inter, Arial, sans-serif; background: #f8fafc; color: #171717; } .wrap { max-width: 1280px; margin: 0 auto; padding: 32px 20px 60px; } .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .topbar-main { width: 100%; min-width: 0; } .topbar h1, .topbar-heading-inline h1 { margin: 0; font-size: 32px; } .topbar-heading-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .subtitle { margin: 8px 0 0; color: #64748b; font-size: 15px; } .topbar-plan-note { margin-top: 10px; font-size: 14px; color: #64748b; } .notice { border-radius: 14px; padding: 14px 16px; margin: 0 0 16px 0; font-size: 14px; line-height: 1.5; border: 1px solid transparent; } .notice-warning { background: #fff7ed; border-color: #fed7aa; color: #9a3412; } .card, .stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 22px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); } .card h2 { font-size: 22px; line-height: 1.2; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .text-link { color: #f97316; text-decoration: none; font-weight: 700; } .text-link:hover { text-decoration: underline; } .empty-state { color: #64748b; padding: 8px 0; } /* Welcome */ .user-welcome { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; margin-bottom: 20px; border-radius: 16px; } .user-welcome-left h2 { margin: 0 0 6px; font-size: 22px; color: #171717; } .user-welcome-sub { margin: 0; color: #64748b; font-size: 14px; line-height: 1.6; } .user-welcome-right { display: flex; align-items: center; flex-shrink: 0; } .user-welcome a { color: #f97316; text-decoration: none; font-weight: 500; } .user-welcome a:hover { text-decoration: underline; } .user-status-badge { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .user-status-trial { background: #fef3c7; color: #92400e; } .user-status-paid { background: #dcfce7; color: #166534; } .user-status-inactive { background: #e5e7eb; color: #374151; } .user-status-suspended { background: #fee2e2; color: #991b1b; } .user-status-cancelled { background: #f3f4f6; color: #6b7280; } /* Inline Status */ .status-inline { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; border: 1px solid transparent; } .status-inline-free { background: #fff7ed; color: #c2410c; border-color: #fdba74; } .status-inline-paid { background: #ecfdf5; color: #047857; border-color: #86efac; } .status-inline-inactive, .status-inline-cancelled, .status-inline-suspended { background: #f8fafc; color: #475569; border-color: #cbd5e1; } /* Free usage */ .dashboard-free-usage-card { margin-top: 14px; width: 100%; max-width: none; box-sizing: border-box; display: block; } .dashboard-free-usage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .dashboard-free-usage-title { font-size: 16px; font-weight: 800; color: #171717; line-height: 1.2; } .dashboard-free-usage-subtitle { margin-top: 4px; font-size: 14px; color: #64748b; } .dashboard-free-usage-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 13px; font-weight: 700; white-space: nowrap; } .dashboard-free-usage-progress { width: 100%; height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin-bottom: 14px; } .dashboard-free-usage-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f97316 0%, #fb923c 100%); } .dashboard-free-usage-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dashboard-free-usage-stat { padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f8fafc; text-align: center; } .dashboard-free-usage-stat-value { font-size: 22px; font-weight: 800; color: #171717; line-height: 1; margin-bottom: 6px; } .dashboard-free-usage-stat-label { font-size: 13px; color: #64748b; } /* Security alert */ .security-alert { margin-top: 18px; margin-bottom: 20px; border: 1px solid rgba(249, 115, 22, 0.28); background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%); border-radius: 14px; padding: 18px; } .security-alert-content { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .security-alert-left { display: flex; align-items: center; gap: 14px; } .security-alert-icon { width: 42px; height: 42px; border-radius: 12px; background: #ffedd5; color: #c2410c; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .security-alert-icon svg { width: 20px; height: 20px; stroke: currentColor; } .security-alert-title { font-size: 16px; font-weight: 700; color: #9a3412; margin-bottom: 4px; } .security-alert-text p { margin: 0; color: #7c2d12; font-size: 14px; } .security-alert-action { display: flex; align-items: center; gap: 10px; } /* Buttons */ .btn-ghost { background: transparent; border: 1px solid #e5e7eb; color: #475569; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .btn-ghost:hover { background: #f1f5f9; border-color: #cbd5e1; color: #171717; } .btn-ghost:active { transform: translateY(1px); } .btn-ghost-danger { border-color: #fed7d7; color: #b91c1c; } .btn-ghost-danger:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; } /* Sections */ .dashboard-section { margin-bottom: 24px; } .dashboard-section-primary { margin-bottom: 20px; } .dashboard-section-secondary { margin-bottom: 20px; } .dashboard-section-tertiary { margin-bottom: 24px; } /* Hero KPIs */ .hero-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } .hero-kpi { display: block; text-decoration: none; color: inherit; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); border: 1px solid #e2e8f0; border-radius: 20px; padding: 18px 18px 16px; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; text-align: center; } .hero-kpi:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; } .dashboard-section-primary .hero-kpi { min-height: 154px; } .hero-kpi-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #fff; border-color: transparent; } .hero-kpi-primary .hero-kpi-label, .hero-kpi-primary .hero-kpi-sub, .hero-kpi-primary .hero-kpi-value { color: #fff; } .hero-kpi-label { display: block; font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 12px; } .hero-kpi-value { display: block; font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: #171717; } .hero-kpi-sub { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; color: #64748b; } .hero-kpi-link { text-decoration: none; color: inherit; display: block; } .hero-kpi-link:hover .hero-kpi { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); cursor: pointer; } .hero-kpis-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 0; } .hero-kpi-secondary { box-shadow: none; background: #ffffff; border-color: #e2e8f0; } .hero-kpi-secondary .hero-kpi-value { font-size: 30px; } .hero-kpi-secondary .hero-kpi-sub { font-size: 12px; } /* Dashboard grids */ .dashboard-grid { display: grid; gap: 18px; margin-bottom: 24px; } .dashboard-grid-top { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); } .dashboard-grid-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 0; } /* Summary */ .dashboard-summary-card { padding: 28px; } .summary-shell { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .dashboard-donut { width: 180px; height: 180px; border-radius: 50%; position: relative; flex: 0 0 auto; } .dashboard-donut::after { content: ""; position: absolute; inset: 18px; background: #fff; border-radius: 50%; } .dashboard-donut-center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dashboard-donut-total { font-size: 32px; font-weight: 800; color: #171717; line-height: 1; } .dashboard-donut-label { margin-top: 6px; font-size: 13px; color: #64748b; } .summary-side { flex: 1; min-width: 280px; } .summary-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .summary-kpi { text-decoration: none; color: inherit; display: block; border: 1px solid #e2e8f0; border-radius: 18px; padding: 18px 18px 16px; background: #ffffff; transition: transform 0.15s ease, box-shadow 0.15s ease; text-align: center; } .summary-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10); } .summary-kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .summary-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .summary-dot-planned { background: #f97316; } .summary-dot-sent { background: #2563eb; } .summary-dot-done { background: #10b981; } .summary-label { font-size: 15px; font-weight: 700; color: #475569; } .summary-value { font-size: 56px; line-height: 1; font-weight: 800; color: #171717; letter-spacing: -0.03em; } .summary-total-row { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid #e2e8f0; } .summary-total-row.compact { margin-top: 16px; padding-top: 14px; } .summary-total-label { font-size: 15px; font-weight: 700; color: #64748b; } .summary-total-value { font-size: 28px; line-height: 1; font-weight: 800; color: #171717; } .summary-bar { margin-top: 16px; width: 100%; height: 12px; background: #e2e8f0; border-radius: 999px; overflow: hidden; display: flex; } .summary-bar-part { height: 100%; display: block; } .summary-bar-planned { background: #f97316; } .summary-bar-sent { background: #2563eb; } .summary-bar-done { background: #10b981; } /* Mini metrics */ .mini-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .mini-metric { border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; background: #f8fafc; text-align: center; } .mini-metric-label { display: block; font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 10px; } .mini-metric-value { display: block; font-size: 28px; line-height: 1; font-weight: 800; color: #171717; } .insight-list { display: flex; flex-direction: column; gap: 12px; } .insight-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e2e8f0; padding-top: 12px; color: #475569; font-size: 14px; } .insight-row:first-child { border-top: 0; padding-top: 0; } .insight-row strong { color: #171717; font-size: 15px; } /* Stacks */ .stack-list { display: flex; flex-direction: column; gap: 12px; } .stack-list.tight { gap: 10px; } .stack-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; background: #fff; } .stack-row.compact { padding: 12px 14px; } .stack-row-main { min-width: 0; flex: 1; } .stack-title { font-size: 15px; font-weight: 800; color: #171717; line-height: 1.35; overflow-wrap: anywhere; } .stack-subtitle { margin-top: 4px; font-size: 13px; color: #64748b; line-height: 1.45; overflow-wrap: anywhere; } .stack-row-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .stack-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 800; white-space: nowrap; } .stack-pill.soft { background: #f8fafc; color: #475569; } .stack-pill-planned { background: rgba(249, 115, 22, 0.12); color: #c2410c; border: 1px solid rgba(249, 115, 22, 0.22); } .stack-row-link { text-decoration: none; color: inherit; } .stack-row-link:hover { background: #f8fafc; } .stack-row-vertical { flex-direction: column; align-items: flex-start; gap: 6px; } .stack-row-vertical .stack-row-stats { display: flex; flex-wrap: wrap; gap: 6px; } .dashboard-section-secondary .stack-row { background: #fcfdff; } /* Bars */ .channel-list { display: flex; flex-direction: column; gap: 16px; } .channel-row-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 8px; font-size: 14px; color: #475569; } .channel-row-top strong { color: #171717; font-size: 15px; } .channel-bar { width: 100%; height: 12px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } .channel-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f97316 0%, #fb923c 100%); } .channel-bar.success span { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); } .channel-bar.warning span { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); } .channel-bar.danger span { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); } /* Timeline */ .timeline { display: flex; flex-direction: column; gap: 12px; } .timeline-item { display: flex; gap: 12px; text-decoration: none; color: inherit; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; transition: background 0.15s ease, transform 0.15s ease; } .timeline-item:hover { background: #f8fafc; transform: translateY(-1px); } .timeline-dot { width: 12px; height: 12px; border-radius: 999px; margin-top: 5px; flex: 0 0 auto; } .timeline-dot.created { background: #f97316; } .timeline-dot.sent { background: #2563eb; } .timeline-dot.done { background: #10b981; } .timeline-body { min-width: 0; flex: 1; } .timeline-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .timeline-top strong { font-size: 15px; line-height: 1.4; color: #171717; } .timeline-sub { margin-top: 4px; color: #64748b; font-size: 13px; line-height: 1.45; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #e2e8f0; color: #171717; } .badge-green { background: rgba(5, 150, 105, 0.12); color: #065f46; } .badge-blue { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; } .badge-orange { background: rgba(245, 158, 11, 0.14); color: #92400e; } .badge-plain { background: #f1f5f9; color: #475569; font-size: 12px; } /* Follow-up list */ .followup-list { display: flex; flex-direction: column; gap: 14px; } .followup-list .followup-item { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03); } .followup-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; } .followup-item-link { text-decoration: none; color: inherit; transition: background 0.15s ease, transform 0.15s ease; } .followup-item-link:hover { background: #f8fafc; transform: translateY(-1px); } .followup-main { min-width: 0; flex: 1; } .followup-mobile-head { margin-bottom: 12px; } .followup-contact-name { font-size: 16px; font-weight: 800; color: #171717; line-height: 1.3; } .followup-contact-company { font-size: 13px; line-height: 1.35; color: #64748b; margin-top: 2px; } .followup-contact-mail { margin-top: 3px; font-size: 13px; color: #64748b; line-height: 1.4; word-break: break-word; } .followup-contact-mail.with-icon { display: flex; align-items: center; gap: 6px; min-width: 0; } .followup-contact-mail.with-icon .icon { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; flex: 0 0 auto; } .followup-contact-mail.with-icon span:last-child { min-width: 0; overflow-wrap: anywhere; } .followup-title { font-size: 16px; font-weight: 700; margin-top: 10px; margin-bottom: 10px; color: #171717; } .followup-due { font-size: 14px; color: #64748b; line-height: 1.4; } .followup-side { flex-shrink: 0; align-self: flex-start; } .dot { opacity: 0.5; } /* Muted / subtle cards */ .card-muted { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border-color: #e2e8f0; } .card-subtle { background: #fcfdff; border-color: #e7edf5; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); padding: 18px; } .card-subtle h2 { font-size: 18px; } .dashboard-section-tertiary .card-head h2 { font-size: 20px; } .dashboard-section-tertiary .summary-total-value { font-size: 22px; } .dashboard-section-tertiary .stack-title { font-size: 14px; } .dashboard-section-tertiary .stack-subtitle, .dashboard-section-tertiary .channel-row-top, .dashboard-section-tertiary .timeline-sub { font-size: 13px; } /* Responsive */ @media (max-width: 1180px) { .dashboard-grid-top, .dashboard-grid-mid, .dashboard-grid-bottom { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid-insights { grid-template-columns: 1fr; } .hero-kpis-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .summary-kpis { grid-template-columns: 1fr; } .summary-value { font-size: 46px; } } @media (max-width: 768px) { .wrap { padding: 24px 16px 48px; } .user-welcome { flex-direction: column; align-items: flex-start; } .user-welcome-right { width: 100%; } .summary-shell { flex-direction: column; align-items: flex-start; } .dashboard-donut { width: 150px; height: 150px; } .mini-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline-top { flex-direction: column; align-items: flex-start; } .dashboard-section-primary .hero-kpi { min-height: auto; } .hero-kpis-secondary { grid-template-columns: 1fr; } } @media (max-width: 720px) { .dashboard-free-usage-head { flex-direction: column; } .dashboard-free-usage-stats { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hero-kpi { padding: 12px; } .hero-kpi-label { font-size: 12px; } .hero-kpi-value { font-size: 20px; } .hero-kpi-sub { font-size: 11px; line-height: 1.3; } .followup-item { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; } .followup-side { width: 100%; } .followup-side .badge { width: fit-content; } .followup-contact-name { font-size: 16px; } .followup-contact-mail { font-size: 13px; } .followup-title { font-size: 15px; margin-bottom: 8px; } .followup-due { font-size: 13px; } .stack-row, .stack-row.compact { flex-direction: column; align-items: flex-start; } .stack-row-stats { width: 100%; justify-content: flex-start; } .security-alert-content { flex-direction: column; align-items: flex-start; } .security-alert-action { width: 100%; } .security-alert-action .btn { width: 100%; text-align: center; } } @media (max-width: 600px) { .summary-kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; } .mini-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; } .mini-metric { padding: 12px; } .mini-metric-label { font-size: 12px; } .mini-metric-value { font-size: 18px; } .stack-list.tight { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stack-list.tight .stack-row { padding: 10px; } .stack-list.tight .stack-title { font-size: 13px; } .stack-list.tight .stack-pill { font-size: 13px; padding: 4px 8px; } .card-subtle { padding: 16px; } .hero-kpi-secondary .hero-kpi-value { font-size: 24px; } .dashboard-grid-insights { grid-template-columns: 1fr; } } .security-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; } .security-hint a { color: #f97316; font-weight: 600; text-decoration: none; } .security-hint a:hover { text-decoration: underline; } .security-hint-close { background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 14px; } .security-hint-close:hover { color: #171717; } .topbar-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .topbar-heading-block { flex: 1 1 520px; min-width: 0; } .view-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); flex-shrink: 0; } .view-toggle-label { font-size: 13px; font-weight: 600; color: #64748b; transition: color 0.2s ease; user-select: none; } .view-toggle-label.active { color: #171717; } .view-toggle-switch { position: relative; width: 54px; height: 30px; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background 0.2s ease; padding: 0; appearance: none; -webkit-appearance: none; } .view-toggle-switch:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } .view-toggle-slider { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18); transition: transform 0.22s ease; } body.view-focus .view-toggle-switch { background: #f97316; } body.view-focus .view-toggle-slider { transform: translateX(24px); } body.view-focus .focus-hide { display: none !important; } body.view-focus .hero-kpis { margin-bottom: 0; } body.view-focus .dashboard-grid-bottom { grid-template-columns: 1.25fr 0.95fr; } body.view-focus .card h2 { scroll-margin-top: 100px; } body.view-focus .topbar { margin-bottom: 18px; } body.view-focus .focus-hide-soft { display: none !important; } @media (max-width: 900px) { .topbar-head-row { align-items: stretch; } .view-toggle { width: 100%; justify-content: center; } body.view-focus .dashboard-grid-bottom { grid-template-columns: 1fr; } } @media (max-width: 640px) { .view-toggle { padding: 8px 10px; gap: 8px; } .view-toggle-label { font-size: 12px; } .view-toggle-switch { width: 50px; height: 28px; } .view-toggle-slider { width: 22px; height: 22px; } body.view-focus .view-toggle-slider { transform: translateX(22px); } } body.view-focus .hero-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.view-focus .hero-kpi { width: 100%; min-width: 0; } .hero-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hero-kpi { width: 100%; min-width: 0; } @media (max-width: 900px) { .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .hero-kpis { grid-template-columns: 1fr; } } .topbar-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .topbar-heading-block { flex: 1 1 520px; min-width: 0; } .view-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); flex-shrink: 0; } .view-toggle-label { font-size: 13px; font-weight: 600; color: #64748b; transition: color 0.2s ease; user-select: none; } .view-toggle-label.active { color: #171717; } .view-toggle-switch { position: relative; width: 54px; height: 30px; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background 0.2s ease; padding: 0; appearance: none; -webkit-appearance: none; } .view-toggle-switch:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } .view-toggle-slider { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18); transition: transform 0.22s ease; } body.view-focus .view-toggle-switch { background: #f97316; } body.view-focus .view-toggle-slider { transform: translateX(24px); } body.view-focus .focus-hide { display: none !important; } body.view-focus .focus-hide-soft { display: none !important; } body.view-focus .topbar { margin-bottom: 18px; } body.view-focus .dashboard-grid-bottom { grid-template-columns: 1.25fr 0.95fr; } body.view-focus .card h2 { scroll-margin-top: 100px; } /* STANDARD: Desktop 3 / Tablet 2 / Mobil 2 */ .hero-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hero-kpi { width: 100%; min-width: 0; } @media (max-width: 900px) { .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar-head-row { align-items: stretch; } .view-toggle { width: 100%; justify-content: center; } body.view-focus .dashboard-grid-bottom { grid-template-columns: 1fr; } } /* MOBIL BLEIBT 2 SPALTEN */ @media (max-width: 640px) { .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hero-kpi { padding: 12px; } .hero-kpi-label { font-size: 12px; } .hero-kpi-value { font-size: 34px; } .hero-kpi-sub { font-size: 11px; line-height: 1.3; } .view-toggle { padding: 8px 10px; gap: 8px; } .view-toggle-label { font-size: 12px; } .view-toggle-switch { width: 50px; height: 28px; } .view-toggle-slider { width: 22px; height: 22px; } body.view-focus .view-toggle-slider { transform: translateX(22px); } } /* FOKUS: immer 2 Spalten */ body.view-focus .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 0; } @media (max-width: 640px) { body.view-focus .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } .view-focus .focus-hide { display: none !important; } @media (max-width: 640px) { .av-header { align-items: stretch; } .av-back-link { width: 100%; } .av-status-grid { grid-template-columns: 1fr; } .av-contract-box { height: 380px; padding: 18px; } .av-header h1 { font-size: 28px; } } .notice-upgrade { padding: 20px 22px; border-radius: 18px; } .notice-upgrade-content { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .notice-upgrade-text { min-width: 0; line-height: 1.5; } .notice-upgrade-actions { display: flex; align-items: center; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; text-decoration: none; font-weight: 600; transition: 0.2s ease; } .btn-primary { background: #f97316; color: #ffffff; border: 1px solid #f97316; } .btn-primary:hover { background: #ea580c; border-color: #ea580c; } @media (max-width: 768px) { .notice-upgrade-content { flex-direction: column; align-items: flex-start; } .notice-upgrade-actions { width: 100%; } .notice-upgrade-actions .btn { width: 100%; } } .dashboard-user-meta { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; } .dashboard-user-meta-line { font-size: 14px; color: #64748b; font-weight: 500; } /* STATUS BADGE */ .dashboard-user-status { margin-top: 10px; } .status-badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } /* Varianten */ .status-badge-free { background: #f1f5f9; color: #475569; } .status-badge-paid { background: #dcfce7; color: #166534; } .status-badge-inactive { background: #fef3c7; color: #92400e; } .status-badge-suspended { background: #fee2e2; color: #991b1b; } .status-badge-cancelled { background: #e5e7eb; color: #374151; } .dashboard-user-company { margin-top: 6px; font-size: 14px; line-height: 1.4; color: #64748b; font-weight: 500; } .dashboard-page-head { margin-bottom: 18px; } .dashboard-page-title { margin: 0 0 6px; font-size: 40px; line-height: 1.05; color: #171717; } .dashboard-page-subtitle { margin: 0; font-size: 16px; line-height: 1.5; color: #64748b; } .dashboard-hero-card { margin-bottom: 22px; padding: 24px 26px; border: 1px solid #e5e7eb; border-radius: 22px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05); } .dashboard-hero-card-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .dashboard-hero-card-copy { flex: 1; min-width: 0; } .dashboard-hero-card-title { margin: 0 0 10px; font-size: 32px; line-height: 1.15; color: #171717; } .dashboard-hero-card-text { font-size: 16px; line-height: 1.65; color: #475569; } .dashboard-hero-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; } .dashboard-hero-toggle { padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; } @media (max-width: 900px) { .dashboard-page-title { font-size: 32px; } .dashboard-hero-card-title { font-size: 26px; } .dashboard-hero-card-main { flex-direction: column; align-items: stretch; } .dashboard-hero-card-side { align-items: flex-start; } } /* HERO */ .dashboard-hero-card { margin-bottom: 20px; padding: 24px 26px; border: 1px solid #e5e7eb; border-radius: 22px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05); } .dashboard-hero-card-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .dashboard-hero-card-copy { flex: 1; } .dashboard-hero-card-title { margin: 0 0 10px; font-size: 32px; color: #171717; } @media (max-width: 900px) { .dashboard-hero-card-title { font-size: 26px; line-height: 1.2; } } .dashboard-hero-company { font-size: 14px; font-weight: 600; color: #f97316; margin-bottom: 8px; } .dashboard-hero-card-text { font-size: 16px; line-height: 1.6; color: #475569; } .dashboard-hero-card-side { display: flex; align-items: flex-start; } /* FREE CARD */ .dashboard-free-usage-card-top { margin-top: 18px; } /* TOGGLE ROW */ .dashboard-view-switch-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 10px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e7eb; } .dashboard-view-switch { display: flex; align-items: center; gap: 10px; } .dashboard-view-switch-label { font-size: 14px; font-weight: 600; color: #64748b; } .dashboard-view-switch-label.active { color: #171717; } .dashboard-view-switch-hint { font-size: 13px; color: #94a3b8; } /* MOBILE */ @media (max-width: 900px) { .dashboard-hero-card-main { flex-direction: column; align-items: stretch; } .dashboard-view-switch-row { flex-direction: column; align-items: flex-start; gap: 8px; } } .dashboard-section-primary .hero-kpi { min-height: 154px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .status-inline-cancelled, .status-inline-expired { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; } .dashboard-free-usage-progress { width: 100%; height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .dashboard-free-usage-progress-bar { height: 100%; border-radius: 999px; transition: width 0.25s ease, background 0.25s ease; } .dashboard-free-usage-progress-bar.is-low { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); } .dashboard-free-usage-progress-bar.is-mid { background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%); } .dashboard-free-usage-progress-bar.is-high { background: linear-gradient(90deg, #f97316 0%, #ef4444 100%); } .dashboard-grid-performance { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 24px; } .card-performance-main { min-height: 100%; } .performance-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .performance-kpi { padding: 24px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; } .performance-kpi-success { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); border-color: #bbf7d0; } .performance-kpi-label { display: block; font-size: 14px; font-weight: 600; color: #64748b; margin-bottom: 10px; } .performance-kpi-value { display: block; font-size: 42px; line-height: 1; font-weight: 800; color: #171717; margin-bottom: 10px; } .performance-kpi-sub { display: block; font-size: 14px; color: #64748b; line-height: 1.45; } .result-reasons { display: grid; gap: 14px; } .result-reason-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e2e8f0; } .result-reason-row:last-child { border-bottom: none; } .result-reason-row span { color: #303030; font-size: 15px; } .result-reason-row strong { font-size: 18px; color: #171717; } @media (max-width: 1024px) { .dashboard-grid-performance { grid-template-columns: 1fr; } .performance-top { grid-template-columns: 1fr; } } .result-groups { display: grid; gap: 16px; } .result-group { border: 1px solid #e2e8f0; border-radius: 18px; padding: 18px 18px 14px; background: #fff; } .result-group-positive { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); border-color: #bbf7d0; } .result-group-negative { background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%); border-color: #fecaca; } .result-group-neutral { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border-color: #e2e8f0; } .result-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .result-group-head strong { font-size: 16px; color: #171717; } .result-group-total { margin-left: auto; font-size: 20px; font-weight: 800; color: #171717; } .result-group-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; } .result-group-dot-positive { background: #22c55e; } .result-group-dot-negative { background: #ef4444; } .result-group-dot-neutral { background: #cbd5e1; } .result-group-items { display: grid; gap: 10px; } .result-group-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; } .result-group-item:first-child { border-top: none; padding-top: 0; } .result-group-item span { color: #475569; font-size: 14px; } .result-group-item strong { color: #171717; font-size: 16px; font-weight: 700; } .performance-bars { display: grid; gap: 18px; } .performance-bar-row { display: grid; gap: 8px; } .performance-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .performance-bar-head span { font-size: 15px; font-weight: 700; color: #171717; } .performance-bar-head strong { font-size: 18px; font-weight: 800; color: #171717; } .performance-bar-track { height: 12px; background: #e2e8f0; border-radius: 999px; overflow: hidden; } .performance-bar-fill { display: block; height: 100%; border-radius: 999px; } .performance-bar-fill-orange { background: #f97316; } .performance-bar-fill-navy { background: #171717; } .performance-bar-fill-green { background: #22c55e; } .performance-bar-fill-red { background: #ef4444; } .performance-bar-fill-gray { background: #94a3b8; } .performance-bar-sub { font-size: 13px; color: #64748b; line-height: 1.45; } .onboarding-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .onboarding-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .onboarding-modal-card { position: relative; z-index: 2; width: 100%; max-width: 620px; background: #ffffff; border-radius: 22px; padding: 28px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24); border: 1px solid #e5e7eb; } .onboarding-badge { display: inline-block; background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; margin-bottom: 14px; } .onboarding-modal-card h2 { margin: 0 0 12px 0; font-size: 30px; line-height: 1.15; color: #171717; } .onboarding-modal-card p { margin: 0 0 16px 0; color: #475569; line-height: 1.65; margin-top: 20px; } .onboarding-example { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; margin: 18px 0; color: #171717; line-height: 1.8; font-size: 15px; } .onboarding-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .onboarding-checkbox { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: #64748b; font-size: 14px; } .onboarding-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 999px; background: #f1f5f9; color: #171717; font-size: 22px; cursor: pointer; } .onboarding-close:hover { background: #e2e8f0; } @media (max-width: 640px) { .onboarding-modal-card { padding: 22px; border-radius: 18px; } .onboarding-modal-card h2 { font-size: 24px; } .onboarding-actions { flex-direction: column; } .onboarding-actions .btn { width: 100%; justify-content: center; } } @media (max-width: 768px) { .onboarding-modal { align-items: flex-start; padding-top: 20px; } .onboarding-modal-card { max-height: 85vh; border-radius: 16px; } } body.view-focus .hero-kpis { grid-template-columns: repeat(3, 1fr); } body.view-focus .hero-kpi { padding: 16px 14px; } body.view-focus .hero-kpi-sub { display: none; } body.view-focus .hero-kpi-value { font-size: 34px; } body.view-focus .hero-kpi-label { font-size: 13px; } body.view-focus .hero-kpi:nth-child(n+4) { display: none !important; } body.view-focus .dashboard-grid-bottom { grid-template-columns: 1fr; } body.view-focus .dashboard-grid-bottom > .card:nth-child(2) { display: none !important; } @media (max-width: 900px) { .dashboard-page-head { display: none !important; } } @media (max-width: 900px) { .dashboard-page-head { display: none !important; } .dashboard-hero-card-title { display: none !important; } } /* Fokus: Card kompakter */ body.view-focus .dashboard-hero-card { padding: 18px 20px; } body.view-focus .dashboard-hero-card-title { margin: 0; } @media (max-width: 900px) { .dashboard-page-head { display: none !important; } .dashboard-hero-card-title { display: none !important; } } body.view-focus .dashboard-hero-card { padding: 18px 20px; } body.view-focus .dashboard-hero-card-title { margin: 0; } /* Mobile: Seitentitel und Greeting im Dashboard weg, weil Greeting im Mobile-Header steht */ @media (max-width: 900px) { .dashboard-page-head { display: none !important; } .dashboard-hero-card-title { display: none !important; } } @media (max-width: 900px) { body.view-focus .dashboard-hero-card { display: none !important; } } @media (max-width: 900px) { .dashboard-hero-card { display: none !important; } } .dashboard-mobile-meta { display: none; } @media (max-width: 900px) { .dashboard-mobile-meta { display: block; font-size: 13px; color: #64748b; font-weight: 600; margin-bottom: 10px; padding: 0 2px; } } .dashboard-mobile-meta { display: none; } @media (max-width: 900px) { .dashboard-hero-card { display: none !important; } .dashboard-mobile-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 2px; min-width: 0; } .dashboard-mobile-meta-company { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f97316; font-size: 13px; font-weight: 800; } .dashboard-mobile-meta-chip { flex-shrink: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #ecfdf5; color: #047857; border: 1px solid #86efac; } } .dashboard-mobile-meta-card { display: none; } @media (max-width: 900px) { .dashboard-hero-card { display: none !important; } .dashboard-mobile-meta-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 8px 20px rgba(15,23,42,.04); } .dashboard-mobile-meta-company { min-width: 0; color: #f97316; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-mobile-meta-chip { flex-shrink: 0; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; } } .dashboard-mobile-meta-link { color: #f97316; font-weight: 700; text-decoration: none; opacity: .85; } .dashboard-mobile-meta-link:hover { opacity: 1; text-decoration: underline; } /* Fokus Desktop: Greeting links / Firma + Status rechts */ @media (min-width: 901px) { body.view-focus .dashboard-hero-card-text, body.view-focus .dashboard-free-usage-card, body.view-focus .dashboard-view-switch-hint { display: none !important; } body.view-focus .dashboard-hero-card { padding: 18px 20px; } /* gesamte Zeile */ body.view-focus .dashboard-hero-card-main { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; flex-wrap: nowrap !important; } /* LEFT: Greeting + Firma */ body.view-focus .dashboard-hero-card-copy { display: flex !important; align-items: center !important; gap: 18px !important; flex: 1 !important; min-width: 0 !important; } body.view-focus .dashboard-hero-card-title { margin: 0 !important; font-size: 26px; white-space: nowrap; } /* Firma bleibt sichtbar */ body.view-focus .dashboard-hero-company { display: block !important; margin: 0 !important; font-size: 14px; font-weight: 800; color: #f97316; white-space: nowrap; } /* RIGHT: Status */ body.view-focus .dashboard-hero-card-side { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } } body.view-focus .dashboard-hero-card-copy { display: flex !important; align-items: center !important; gap: 16px !important; flex: 1 !important; } /* 🔥 Firma nach rechts drücken */ body.view-focus .dashboard-hero-company { margin-left: auto !important; } .status-inline-expired, .dashboard-mobile-meta-chip.status-inline-expired { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .dashboard-trial-info { width: 100%; box-sizing: border-box; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 14px; line-height: 1.55; } .dashboard-trial-info strong { color: #c2410c; font-weight: 700; } .view-focus .dashboard-trial-info { display: none !important; } @media (max-width: 900px) { .dashboard-hero-card:has(.dashboard-trial-info) { display: block !important; padding: 0; margin-bottom: 12px; background: transparent; border: 0; box-shadow: none; } .dashboard-hero-card:has(.dashboard-trial-info) .dashboard-hero-card-main, .dashboard-hero-card:has(.dashboard-trial-info) .dashboard-free-usage-card { display: none !important; } .dashboard-trial-info { margin-top: 0; margin-bottom: 12px; } } @media (max-width: 900px) { .dashboard-mobile-meta-chip.status-inline-free, .dashboard-mobile-meta-chip.status-inline-expired { background: #fff7ed; color: #c2410c; border-color: #fdba74; } } @media (max-width: 900px) { .dashboard-hero-card:has(.dashboard-trial-info) { display: block !important; padding: 16px !important; margin-bottom: 14px !important; border-radius: 16px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 8px 20px rgba(15,23,42,.04) !important; } .dashboard-hero-card:has(.dashboard-trial-info) .dashboard-hero-card-main { display: none !important; } .dashboard-hero-card:has(.dashboard-trial-info) .dashboard-free-usage-card { display: block !important; margin-top: 0 !important; } .dashboard-trial-info { display: block !important; margin: 0 0 14px 0 !important; } } .dashboard-free-limit-actions { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .dashboard-free-limit-text { color: #64748b; font-size: 14px; line-height: 1.5; } .status-inline-limit { background: #fff7ed; color: #c2410c; } @media (max-width: 900px) { body:not(.view-focus) .dashboard-hero-card:has(.dashboard-free-usage-card) { display: block !important; padding: 16px !important; margin-bottom: 14px !important; border-radius: 16px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 8px 20px rgba(15,23,42,.04) !important; } body:not(.view-focus) .dashboard-hero-card:has(.dashboard-free-usage-card) .dashboard-hero-card-main { display: none !important; } body:not(.view-focus) .dashboard-hero-card:has(.dashboard-free-usage-card) .dashboard-free-usage-card { display: block !important; margin-top: 0 !important; } } .onboarding-alt{ margin:18px 0 0; padding:12px 14px; border-radius:12px; background:#f8fafc; border:1px solid #e2e8f0; font-size:14px; line-height:1.5; color:#475569; } .onboarding-alt a{ display:inline-block; margin-top:6px; font-weight:600; color:#f97316; text-decoration:none; } .onboarding-alt a:hover{ text-decoration:underline; } .onboarding-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; } .onboarding-link-card{ padding:14px; border-radius:14px; background:rgba(249,115,22,.06); border:1px solid rgba(249,115,22,.18); } .onboarding-link-title{ font-size:14px; font-weight:700; margin-bottom:6px; color:#171717; } .onboarding-link-text{ font-size:13px; line-height:1.45; color:#64748b; margin-bottom:10px; } .onboarding-link-card a{ color:#f97316; font-weight:700; text-decoration:none; } .onboarding-link-card a:hover{ text-decoration:underline; } @media (max-width:640px){ .onboarding-links{ grid-template-columns:1fr; } } @media (max-width: 640px){ .onboarding-modal{ position: fixed; inset: 0; z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; } .onboarding-modal-card{ max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; } } .onboarding-area { position: relative; margin: 0 0 24px; padding: 28px; border-radius: 28px; background: radial-gradient(circle at 0% 0%, rgba(249,115,22,.12), transparent 34%), radial-gradient(circle at 100% 0%, rgba(37,99,235,.10), transparent 38%), #ffffff; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 18px 45px rgba(15,23,42,.08); } .onboarding-area h2 { margin: 10px 0 12px; font-size: 26px; line-height: 1.2; } .onboarding-area p { max-width: 760px; margin: 0 0 12px; color: #475569; line-height: 1.6; } .onboarding-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(15,23,42,.06); color: #171717; font-size: 22px; cursor: pointer; } .onboarding-close:hover { background: rgba(15,23,42,.10); } .onboarding-badge { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 13px; font-weight: 800; } .onboarding-example { display: grid; gap: 8px; max-width: 520px; margin: 18px 0; padding: 16px; border-radius: 18px; background: #f8fafc; border: 1px solid rgba(15,23,42,.08); } .onboarding-tips { display: grid; gap: 8px; margin: 18px 0; } .onboarding-tips div { padding: 10px 12px; border-radius: 14px; background: #f8fafc; border: 1px solid rgba(15,23,42,.06); color: #303030; } .onboarding-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; } .onboarding-link-card { padding: 16px; border-radius: 18px; background: #ffffff; border: 1px solid rgba(15,23,42,.08); } .onboarding-link-title { font-weight: 900; color: #171717; margin-bottom: 6px; } .onboarding-link-text { color: #64748b; font-size: 14px; margin-bottom: 10px; } .onboarding-link-card a { font-weight: 800; color: #2563eb; text-decoration: none; } .onboarding-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .onboarding-checkbox { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #64748b; font-size: 14px; } @media (max-width: 760px) { .onboarding-area { padding: 22px; border-radius: 22px; } .onboarding-area h2 { font-size: 22px; padding-right: 32px; } .onboarding-links { grid-template-columns: 1fr; } .onboarding-actions { flex-direction: column; } .onboarding-actions .btn { width: 100%; justify-content: center; } } .onboarding-link-card a{ color:#f97316 !important; } .onboarding-link-card a:hover{ color:#ea580c !important; } .onboarding-area { position: relative; margin: 0 0 22px; padding: 22px 24px 24px; border-radius: 22px; background: linear-gradient(135deg, rgba(255,247,237,.95) 0%, #ffffff 52%, #f8fafc 100%); border: 1px solid rgba(249,115,22,.28); box-shadow: 0 10px 28px rgba(15,23,42,.06); overflow: hidden; } .onboarding-area::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #f97316 0%, #fb923c 100%); } .onboarding-area h2 { max-width: 760px; margin: 8px 0 10px; font-size: 24px; line-height: 1.2; } .onboarding-area p { max-width: 760px; margin: 0 0 10px; color: #475569; line-height: 1.55; } .onboarding-badge { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; } .onboarding-example { max-width: 520px; background: #ffffff; border: 1px solid rgba(249,115,22,.20); box-shadow: 0 8px 18px rgba(15,23,42,.04); } .onboarding-link-card { background: rgba(255,255,255,.78); border: 1px solid rgba(249,115,22,.16); } .onboarding-close { background: #fff7ed; color: #c2410c; } .onboarding-close:hover { background: #ffedd5; } @media (max-width: 760px) { .onboarding-area { padding: 20px; border-radius: 18px; } .onboarding-area h2 { font-size: 21px; padding-right: 32px; } } /* Free-Limit Card im Darkmode fix */ body.darkmode .dashboard-free-usage-card, html[data-theme="dark"] .dashboard-free-usage-card{ background: linear-gradient(180deg, #1a1a1a 0%, #171717 100%) !important; border: 1px solid rgba(148,163,184,.22) !important; box-shadow: 0 18px 48px rgba(0,0,0,.32) !important; color: #f8fafc !important; } body.darkmode .dashboard-free-limit-text, html[data-theme="dark"] .dashboard-free-limit-text{ color: #cbd5e1 !important; } body.darkmode .dashboard-free-usage-subtitle, html[data-theme="dark"] .dashboard-free-usage-subtitle{ color: #a8b4c7 !important; } body.darkmode .dashboard-free-usage-progress, html[data-theme="dark"] .dashboard-free-usage-progress{ background: rgba(148,163,184,.20) !important; } body.darkmode .dashboard-free-usage-pill, html[data-theme="dark"] .dashboard-free-usage-pill, body.darkmode .status-inline-limit, html[data-theme="dark"] .status-inline-limit{ background: rgba(249,115,22,.14) !important; color: #fdba74 !important; border: 1px solid rgba(249,115,22,.32) !important; } /* Mobil sauberer */ @media (max-width: 900px){ body.darkmode .dashboard-hero-card:has(.dashboard-free-usage-card), html[data-theme="dark"] .dashboard-hero-card:has(.dashboard-free-usage-card){ background: #0d0d0d !important; border-color: rgba(148,163,184,.22) !important; box-shadow: none !important; } body.darkmode .dashboard-free-usage-card, html[data-theme="dark"] .dashboard-free-usage-card{ padding: 16px !important; border-radius: 16px !important; } body.darkmode .dashboard-free-limit-actions, html[data-theme="dark"] .dashboard-free-limit-actions{ flex-direction: column !important; align-items: stretch !important; } body.darkmode .dashboard-free-limit-actions .btn, html[data-theme="dark"] .dashboard-free-limit-actions .btn{ width: 100% !important; justify-content: center !important; } } /* ========================================================= ONBOARDING AREA - DARKMODE FIX (DESKTOP + MOBIL) ========================================================= */ body.darkmode #onboardingArea, html[data-theme="dark"] #onboardingArea{ background: radial-gradient( circle at top right, rgba(249,115,22,.14), transparent 35% ), linear-gradient( 180deg, #1a1a1a 0%, #171717 100% ) !important; color:#f8fafc !important; border:1px solid rgba(148,163,184,.22) !important; box-shadow: 0 24px 60px rgba(0,0,0,.38) !important; } /* Headlines */ body.darkmode #onboardingArea h2, html[data-theme="dark"] #onboardingArea h2{ color:#f8fafc !important; } /* Standardtexte */ body.darkmode #onboardingArea p, body.darkmode #onboardingArea div, html[data-theme="dark"] #onboardingArea p, html[data-theme="dark"] #onboardingArea div{ color:#cbd5e1 !important; } /* Badge */ body.darkmode #onboardingArea .onboarding-badge, html[data-theme="dark"] #onboardingArea .onboarding-badge{ background:rgba(249,115,22,.14) !important; border:1px solid rgba(249,115,22,.30) !important; color:#fdba74 !important; } /* Beispielbox */ body.darkmode #onboardingArea .onboarding-example, html[data-theme="dark"] #onboardingArea .onboarding-example{ background:#141414 !important; border:1px solid rgba(148,163,184,.22) !important; color:#e5e7eb !important; } /* Tipps */ body.darkmode #onboardingArea .onboarding-tips, html[data-theme="dark"] #onboardingArea .onboarding-tips{ background:#141414 !important; border:1px solid rgba(148,163,184,.22) !important; color:#cbd5e1 !important; } body.darkmode #onboardingArea .onboarding-tips strong, html[data-theme="dark"] #onboardingArea .onboarding-tips strong{ color:#fb923c !important; font-weight:700 !important; } /* Link Karten */ body.darkmode #onboardingArea .onboarding-link-card, html[data-theme="dark"] #onboardingArea .onboarding-link-card{ background:#141414 !important; border:1px solid rgba(148,163,184,.22) !important; } body.darkmode #onboardingArea .onboarding-link-title, html[data-theme="dark"] #onboardingArea .onboarding-link-title{ color:#f8fafc !important; } body.darkmode #onboardingArea .onboarding-link-text, html[data-theme="dark"] #onboardingArea .onboarding-link-text{ color:#cbd5e1 !important; } body.darkmode #onboardingArea .onboarding-link-card a, html[data-theme="dark"] #onboardingArea .onboarding-link-card a{ color:#fb923c !important; } /* Schließen Button */ body.darkmode #onboardingArea .onboarding-close, html[data-theme="dark"] #onboardingArea .onboarding-close{ background:#242424 !important; border:1px solid rgba(148,163,184,.24) !important; color:#f8fafc !important; } body.darkmode #onboardingArea .onboarding-close:hover, html[data-theme="dark"] #onboardingArea .onboarding-close:hover{ background:#303030 !important; } body.darkmode #onboardingArea .onboarding-tips, body.darkmode #onboardingArea .onboarding-tips div, html[data-theme="dark"] #onboardingArea .onboarding-tips, html[data-theme="dark"] #onboardingArea .onboarding-tips div{ background:#171717 !important; color:#cbd5e1 !important; } body.darkmode #onboardingArea .onboarding-tips strong, html[data-theme="dark"] #onboardingArea .onboarding-tips strong{ color:#f97316 !important; } body.darkmode #onboardingArea .onboarding-tips div + div, html[data-theme="dark"] #onboardingArea .onboarding-tips div + div{ border-top:1px solid rgba(148,163,184,.18) !important; } /* Dashboard Zusammenfassung */ body.darkmode .dashboard-summary-text-card, html[data-theme="dark"] .dashboard-summary-text-card{ border:1px solid rgba(255,255,255,.08) !important; box-shadow:none !important; } body.darkmode .dashboard-summary-text-title, html[data-theme="dark"] .dashboard-summary-text-title{ color:#f8fafc !important; } body.darkmode .dashboard-summary-text-content, html[data-theme="dark"] .dashboard-summary-text-content{ color:#cbd5e1 !important; } body.darkmode .dashboard-summary-text-icon, html[data-theme="dark"] .dashboard-summary-text-icon{ background:rgba(249,115,22,.12) !important; color:#f97316 !important; } /* Free Kontingent Box im Dashboard */ body.darkmode .dashboard-free-usage-card, html[data-theme="dark"] .dashboard-free-usage-card{ background: radial-gradient(circle at top right, rgba(249,115,22,.10), transparent 32%), linear-gradient(180deg, #1a1a1a 0%, #171717 100%) !important; border:1px solid rgba(148,163,184,.18) !important; border-radius:16px !important; box-shadow: 0 16px 38px rgba(0,0,0,.26) !important; padding:18px !important; } body.darkmode .dashboard-free-usage-title, html[data-theme="dark"] .dashboard-free-usage-title{ color:#f8fafc !important; } body.darkmode .dashboard-free-usage-subtitle, html[data-theme="dark"] .dashboard-free-usage-subtitle{ color:#cbd5e1 !important; } body.darkmode .dashboard-free-usage-progress, html[data-theme="dark"] .dashboard-free-usage-progress{ background:rgba(148,163,184,.22) !important; } body.darkmode .dashboard-free-usage-progress-bar, html[data-theme="dark"] .dashboard-free-usage-progress-bar{ background:linear-gradient(90deg, #10b981 0%, #34d399 100%) !important; } /* Mobile Darkmode: Free-Kontingent nicht als Kasten im Kasten */ @media (max-width: 900px){ body.darkmode .dashboard-hero-card:has(.dashboard-free-usage-card), html[data-theme="dark"] .dashboard-hero-card:has(.dashboard-free-usage-card){ background:#171717 !important; border:1px solid rgba(148,163,184,.22) !important; border-radius:18px !important; padding:16px !important; box-shadow:none !important; } body.darkmode .dashboard-hero-card:has(.dashboard-free-usage-card) .dashboard-free-usage-card, html[data-theme="dark"] .dashboard-hero-card:has(.dashboard-free-usage-card) .dashboard-free-usage-card{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; } } /* Darkmode: Free-Kontingent nicht als Kasten im Kasten */ body.darkmode .dashboard-hero-card:has(.dashboard-free-usage-card), html[data-theme="dark"] .dashboard-hero-card:has(.dashboard-free-usage-card){ background:#0d0d0d !important; border:1px solid rgba(148,163,184,.18) !important; box-shadow:none !important; } body.darkmode .dashboard-hero-card:has(.dashboard-free-usage-card) .dashboard-free-usage-card, html[data-theme="dark"] .dashboard-hero-card:has(.dashboard-free-usage-card) .dashboard-free-usage-card{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; } /* ========================= PASSKEY DEVICE ROW FIX ========================= */ body.darkmode .passkey-device-row, html[data-theme="dark"] .passkey-device-row{ background:#171717 !important; border:1px solid rgba(148,163,184,.22) !important; box-shadow:none !important; } body.darkmode .passkey-device-info strong, html[data-theme="dark"] .passkey-device-info strong{ color:#f8fafc !important; } body.darkmode .passkey-device-info span, html[data-theme="dark"] .passkey-device-info span{ color:#cbd5e1 !important; } body.darkmode .passkey-device-icon, html[data-theme="dark"] .passkey-device-icon{ background:rgba(249,115,22,.16) !important; color:#fdba74 !important; } body.darkmode .passkey-delete-btn, html[data-theme="dark"] .passkey-delete-btn{ background:rgba(239,68,68,.16) !important; color:#fecaca !important; } body.darkmode .dashboard-donut-total, html[data-theme="dark"] .dashboard-donut-total { color: #fff !important; } body.darkmode .result-group-item span, html[data-theme="dark"] .result-group-item span { color: #cbd5e1 !important; } body.darkmode .performance-bar-sub, html[data-theme="dark"] .performance-bar-sub { color: #cbd5e1 !important; } /* Helle Sekundärtexte im Darkmode */ body.darkmode .channel-row-top, body.darkmode .summary-label, body.darkmode .dashboard-hero-card-text, body.darkmode .detail-timeline-meta, body.darkmode .plan-feature, html[data-theme="dark"] .channel-row-top, html[data-theme="dark"] .summary-label, html[data-theme="dark"] .dashboard-hero-card-text, html[data-theme="dark"] .detail-timeline-meta, html[data-theme="dark"] .plan-feature { color: #cbd5e1 !important; } body.darkmode .summary-total-label, body.darkmode .hero-kpi-label, body.darkmode .hero-kpi-sub, body.darkmode .detail-overview-group-title, body.darkmode .detail-variant-subtitle, body.darkmode .detail-timeline-time, body.darkmode .team-visual-subtitle, html[data-theme="dark"] .summary-total-label, html[data-theme="dark"] .hero-kpi-label, html[data-theme="dark"] .hero-kpi-sub, html[data-theme="dark"] .detail-overview-group-title, html[data-theme="dark"] .detail-variant-subtitle, html[data-theme="dark"] .detail-timeline-time, html[data-theme="dark"] .team-visual-subtitle { color: #94a3b8 !important; } body.darkmode .detail-timeline-title, html[data-theme="dark"] .detail-timeline-title { color: #f8fafc !important; } body.darkmode .filter-description, body.darkmode .cell-company, html[data-theme="dark"] .filter-description, html[data-theme="dark"] .cell-company { color: #94a3b8 !important; } /* ================================== DARKMODE SIDEBAR ================================== */ body.darkmode .app-sidebar, html[data-theme="dark"] .app-sidebar { border-right: 1px solid rgba(255,255,255,.06) !important; box-shadow: 10px 0 30px rgba(0,0,0,.25); } /* Navigation */ body.darkmode .app-nav-link, html[data-theme="dark"] .app-nav-link { color: rgba(255,255,255,.72) !important; border: 1px solid transparent; } body.darkmode .app-nav-link:hover, html[data-theme="dark"] .app-nav-link:hover { background: rgba(255,255,255,.05) !important; color: #ffffff !important; border-color: rgba(255,255,255,.05); } /* Aktiver Punkt */ body.darkmode .app-nav-link.is-active, html[data-theme="dark"] .app-nav-link.is-active { background: rgba(249,115,22,.12) !important; color: #ffffff !important; border: 1px solid rgba(249,115,22,.22) !important; box-shadow: 0 8px 24px rgba(249,115,22,.10); } /* Divider */ body.darkmode .app-sidebar-bottom, body.darkmode .app-nav-divider, html[data-theme="dark"] .app-sidebar-bottom, html[data-theme="dark"] .app-nav-divider { border-color: rgba(255,255,255,.06) !important; } /* Logout */ body.darkmode .app-nav-link-logout, html[data-theme="dark"] .app-nav-link-logout { color: rgba(255,255,255,.55) !important; } body.darkmode .app-nav-link-logout:hover, html[data-theme="dark"] .app-nav-link-logout:hover { color: #ffffff !important; } body.darkmode .app-logo img, html[data-theme="dark"] .app-logo img { content: url('/img/followupp-logo-on-dark.png'); } /* ===================================== ATTACHMENT DROPZONE DARKMODE ===================================== */ body.darkmode .attachment-dropzone, html[data-theme="dark"] .attachment-dropzone { background: #171717 !important; border: 2px dashed rgba(148,163,184,.25) !important; color: #f8fafc !important; box-shadow: none !important; } body.darkmode .attachment-dropzone:hover, html[data-theme="dark"] .attachment-dropzone:hover { background: linear-gradient( 180deg, rgba(249,115,22,.08) 0%, #171717 100% ) !important; border-color: rgba(249,115,22,.45) !important; } body.darkmode .attachment-dropzone-icon, html[data-theme="dark"] .attachment-dropzone-icon { background: rgba(249,115,22,.12) !important; color: #fb923c !important; } body.darkmode .attachment-dropzone-icon svg, html[data-theme="dark"] .attachment-dropzone-icon svg { stroke: currentColor !important; } body.darkmode .attachment-dropzone-title, html[data-theme="dark"] .attachment-dropzone-title { color: #f8fafc !important; } body.darkmode .attachment-dropzone-sub, html[data-theme="dark"] .attachment-dropzone-sub { color: #94a3b8 !important; } /* Dateienliste */ body.darkmode .attachment-feedback, html[data-theme="dark"] .attachment-feedback { background: #171717 !important; border: 1px solid rgba(148,163,184,.18) !important; } body.darkmode .attachment-feedback-title, html[data-theme="dark"] .attachment-feedback-title { color: #f8fafc !important; } body.darkmode .attachment-item, html[data-theme="dark"] .attachment-item { background: #141414 !important; border: 1px solid rgba(148,163,184,.18) !important; } body.darkmode .attachment-name, html[data-theme="dark"] .attachment-name { color: #f8fafc !important; } body.darkmode .attachment-size, html[data-theme="dark"] .attachment-size { color: #94a3b8 !important; } body.darkmode .attachment-remove-btn, html[data-theme="dark"] .attachment-remove-btn { background: rgba(239,68,68,.12) !important; color: #fecaca !important; border: 1px solid rgba(239,68,68,.20) !important; } body.darkmode .attachment-remove-btn:hover, html[data-theme="dark"] .attachment-remove-btn:hover { background: rgba(239,68,68,.22) !important; } /* ========================================================= FOLLOWUPS MOBILE SWIPE CARDS - DARKMODE FIX ========================================================= */ @media (max-width: 768px) { body.darkmode .wrap > .card, html[data-theme="dark"] .wrap > .card { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.darkmode .responsive-followups-table tr.followup-row-link, html[data-theme="dark"] .responsive-followups-table tr.followup-row-link { background: transparent !important; border-color: var(--dm-border) !important; box-shadow: 0 14px 34px rgba(0,0,0,.38) !important; } body.darkmode .mobile-swipe-content, html[data-theme="dark"] .mobile-swipe-content { background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } body.darkmode .followup-main-cell .cell-title, body.darkmode .mobile-swipe-content .cell-title, body.darkmode .mobile-swipe-content .mobile-subject-line, html[data-theme="dark"] .followup-main-cell .cell-title, html[data-theme="dark"] .mobile-swipe-content .cell-title, html[data-theme="dark"] .mobile-swipe-content .mobile-subject-line { color: var(--dm-text) !important; } body.darkmode .mobile-swipe-content .cell-company, body.darkmode .mobile-swipe-content .cell-sub, body.darkmode .mobile-swipe-content .with-icon, body.darkmode .mobile-swipe-content .with-icon .icon, html[data-theme="dark"] .mobile-swipe-content .cell-company, html[data-theme="dark"] .mobile-swipe-content .cell-sub, html[data-theme="dark"] .mobile-swipe-content .with-icon, html[data-theme="dark"] .mobile-swipe-content .with-icon .icon { color: var(--dm-muted) !important; } body.darkmode .mobile-followup-chevron, html[data-theme="dark"] .mobile-followup-chevron { color: rgba(255,255,255,.38) !important; } body.darkmode .responsive-followups-table tr.followup-row-link:active .mobile-swipe-content, html[data-theme="dark"] .responsive-followups-table tr.followup-row-link:active .mobile-swipe-content { background: #202020 !important; } body.darkmode .mobile-meta-planned, html[data-theme="dark"] .mobile-meta-planned { background: rgba(249,115,22,.14) !important; border-color: rgba(249,115,22,.32) !important; color: #fdba74 !important; } body.darkmode .mobile-meta-sent, html[data-theme="dark"] .mobile-meta-sent { background: rgba(59,130,246,.14) !important; border-color: rgba(59,130,246,.32) !important; color: #93c5fd !important; } body.darkmode .mobile-meta-done, body.darkmode .mobile-meta-done-success, html[data-theme="dark"] .mobile-meta-done, html[data-theme="dark"] .mobile-meta-done-success { background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.32) !important; color: #86efac !important; } body.darkmode .mobile-meta-done-danger, html[data-theme="dark"] .mobile-meta-done-danger { background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.32) !important; color: #fca5a5 !important; } body.darkmode .mobile-meta-done-warning, html[data-theme="dark"] .mobile-meta-done-warning { background: rgba(249,115,22,.14) !important; border-color: rgba(249,115,22,.32) !important; color: #fdba74 !important; } } body.darkmode .apple-relay-warning-card, html[data-theme="dark"] .apple-relay-warning-card { background: radial-gradient(circle at top right, rgba(249,115,22,.12), transparent 34%), linear-gradient(180deg, #1a1a1a 0%, #171717 100%) !important; border-color: rgba(249,115,22,.28) !important; box-shadow: 0 18px 45px rgba(0,0,0,.30) !important; color: #f8fafc !important; } body.darkmode .apple-relay-warning-icon, html[data-theme="dark"] .apple-relay-warning-icon { background: rgba(249,115,22,.14) !important; color: #fdba74 !important; } body.darkmode .apple-relay-warning-eyebrow, html[data-theme="dark"] .apple-relay-warning-eyebrow { color: #fdba74 !important; } body.darkmode .apple-relay-warning-card h2, html[data-theme="dark"] .apple-relay-warning-card h2 { color: #f8fafc !important; } body.darkmode .apple-relay-warning-card p, html[data-theme="dark"] .apple-relay-warning-card p { color: #cbd5e1 !important; } body.darkmode .apple-relay-warning-why, html[data-theme="dark"] .apple-relay-warning-why { color: #fed7aa !important; } body.darkmode .apple-relay-warning-actions span, html[data-theme="dark"] .apple-relay-warning-actions span { color: #94a3b8 !important; } /* ========================================================= ACCOUNT APP DOWNLOAD PAGE - DARKMODE FIX ========================================================= */ body.darkmode .app-download-page, html[data-theme="dark"] .app-download-page { color: var(--dm-text) !important; } body.darkmode .app-download-page .topbar h1, html[data-theme="dark"] .app-download-page .topbar h1, body.darkmode .app-download-copy h2, html[data-theme="dark"] .app-download-copy h2, body.darkmode .app-download-benefit h3, html[data-theme="dark"] .app-download-benefit h3 { color: var(--dm-text) !important; } body.darkmode .app-download-copy p, html[data-theme="dark"] .app-download-copy p, body.darkmode .app-download-benefit p, html[data-theme="dark"] .app-download-benefit p { color: #cbd5e1 !important; } body.darkmode .app-download-hero, html[data-theme="dark"] .app-download-hero { background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.13), transparent 34%), linear-gradient(180deg, #1a1a1a 0%, #171717 100%) !important; border-color: rgba(148, 163, 184, 0.18) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important; color: var(--dm-text) !important; } body.darkmode .app-download-benefit, html[data-theme="dark"] .app-download-benefit { background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%) !important; border-color: rgba(148, 163, 184, 0.18) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26) !important; color: var(--dm-text) !important; } body.darkmode .app-download-benefit-icon, html[data-theme="dark"] .app-download-benefit-icon { background: rgba(249, 115, 22, 0.14) !important; color: #fdba74 !important; } body.darkmode .app-download-mockup img, html[data-theme="dark"] .app-download-mockup img { filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.46)) !important; } body.darkmode .app-download-badges a, html[data-theme="dark"] .app-download-badges a { opacity: 0.96; } body.darkmode .app-download-badges a:hover, html[data-theme="dark"] .app-download-badges a:hover { opacity: 1; } body.darkmode .app-download-copy .account-mini-badge.green, html[data-theme="dark"] .app-download-copy .account-mini-badge.green { background: rgba(16, 185, 129, 0.14) !important; border-color: rgba(16, 185, 129, 0.30) !important; color: #86efac !important; } /* ========================================================= ACCOUNT OVERVIEW ICONS - DARKMODE FIX ========================================================= */ /* Integrationen */ body.darkmode .account-card.account-card-api .account-card-icon, html[data-theme="dark"] .account-card.account-card-api .account-card-icon { background: rgba(14, 165, 233, 0.14) !important; color: #7dd3fc !important; border-color: rgba(14, 165, 233, 0.30) !important; } /* App */ body.darkmode .account-card.account-card-app .account-card-icon, html[data-theme="dark"] .account-card.account-card-app .account-card-icon { background: rgba(249, 115, 22, 0.14) !important; color: #fdba74 !important; border-color: rgba(249, 115, 22, 0.30) !important; } /* optional: App-Store-Badges im Darkmode etwas sauberer */ body.darkmode .account-card-app .account-app-store-badges img, html[data-theme="dark"] .account-card-app .account-app-store-badges img { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.32)) !important; } /* falls Icons innen noch zu dunkel wirken */ body.darkmode .account-card.account-card-api .account-card-icon svg, body.darkmode .account-card.account-card-app .account-card-icon svg, html[data-theme="dark"] .account-card.account-card-api .account-card-icon svg, html[data-theme="dark"] .account-card.account-card-app .account-card-icon svg { color: inherit !important; }