/* Steuersoft Tools — Dark-Mode v15 (konsistenter) * Wird über data-theme="dark" auf aktiv. * Überschreibt die typischen --bg / --surface / --border / --text-Variablen * der Tool-CSS-Bases und einige Fallbacks für ältere Tools ohne CSS-Variablen. */ :root[data-theme="dark"]{ --bg: #1a1a1c; --surface: #242428; --border: #38383d; --text: #e6e6e0; --text-muted: #9a9a92; --text-dim: #6a6a64; --accent: #4d8cd0; --accent-dark: #2d5d96; --accent-glow: rgba(77,140,208,0.15); --ok: #4ad97e; --ok-bg: #1a3a26; --warn: #d9b34a; --warn-bg: #3a3220; --err: #e07a7a; --err-bg: #3a2424; color-scheme: dark; } /* Body + Body-Background-Fallback */ :root[data-theme="dark"] body{ background: var(--bg); color: var(--text); } :root[data-theme="dark"] body[style*="background"]:not([style*="background:none"]){ background-color: var(--bg) !important; } /* Header keine Eingrau-Verwaschung */ :root[data-theme="dark"] header{ background: var(--accent-dark); } /* Surface-Karten */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .box, :root[data-theme="dark"] .tool-card{ background: var(--surface); border-color: var(--border); color: var(--text); } :root[data-theme="dark"] .tool-card:hover{ border-color: var(--accent); background: #2a2a30; } /* Inputs */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea{ background: #1f1f23; border-color: var(--border); color: var(--text); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } :root[data-theme="dark"] input[readonly]{ background: #2c2c30; color: var(--text-muted); } /* Tabellen */ :root[data-theme="dark"] table{ color: var(--text); } :root[data-theme="dark"] th{ background: #2a2a30; color: var(--text-muted); border-color: var(--border); } :root[data-theme="dark"] td{ border-bottom-color: #2d2d32; } :root[data-theme="dark"] tr.tot td{ background: #2a2a30; } /* Result-Panels (oft dunkelblau in Light-Mode → bleiben akzentbasiert) */ :root[data-theme="dark"] .result-panel, :root[data-theme="dark"] .metric, :root[data-theme="dark"] .summary, :root[data-theme="dark"] .bigout, :root[data-theme="dark"] .bigfactor{ background: #1a3550; color: var(--text); } /* Buttons */ :root[data-theme="dark"] button, :root[data-theme="dark"] .btn{ background: var(--accent-dark); color: #fff; border-color: var(--accent); } :root[data-theme="dark"] .btn-sec, :root[data-theme="dark"] button.btn-sec{ background: var(--surface); color: var(--accent); border-color: var(--border); } :root[data-theme="dark"] .btn-mini{ background: var(--surface); border-color: var(--border); color: var(--accent); } /* Status-Block-Farben */ :root[data-theme="dark"] .ok-bg, :root[data-theme="dark"] .step.done, :root[data-theme="dark"] .detected{ background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); } :root[data-theme="dark"] .warn-block, :root[data-theme="dark"] .step.warn{ background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); } :root[data-theme="dark"] .step.err, :root[data-theme="dark"] .error, :root[data-theme="dark"] .err-bg{ background: var(--err-bg); border-left-color: var(--err); color: var(--err); } /* Links innerhalb Karten */ :root[data-theme="dark"] a{ color: var(--accent); } :root[data-theme="dark"] a:hover{ color: #6aa0db; } /* Theme-Toggle in Header */ :root[data-theme="dark"] #theme-toggle.in-header{ background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.3); } /* Stepper / View-Tabs (Bescheid-Checker) */ :root[data-theme="dark"] .view-tab{ color: var(--text-muted); } :root[data-theme="dark"] .view-tab.active{ color: var(--accent); background: var(--surface); border-color: var(--border); border-bottom-color: var(--surface); } :root[data-theme="dark"] .mand-header{ background: linear-gradient(90deg, var(--accent-glow), transparent); color: var(--accent); } :root[data-theme="dark"] .mand-akte{ background: var(--surface); border-color: var(--border); color: var(--text); } :root[data-theme="dark"] .mand-akte:hover{ background: #2a2a30; } :root[data-theme="dark"] .mand-akte.active{ background: var(--accent-glow); } /* Akten-Bar */ :root[data-theme="dark"] .akten-bar{ background: var(--surface); border-color: var(--border); } /* Code/pre */ :root[data-theme="dark"] code, :root[data-theme="dark"] pre{ background: #1f1f23; border-color: var(--border); color: var(--text); } /* Toast */ :root[data-theme="dark"] #_toast, :root[data-theme="dark"] #_sts_kb_toast{ background: var(--accent-dark); } /* Print-Modus immer mit hellem Hintergrund */ @media print{ :root[data-theme="dark"]{ --bg: #fff !important; --surface: #fff !important; --border: #ccc !important; --text: #000 !important; --text-muted: #555 !important; color-scheme: light !important; } :root[data-theme="dark"] body{ background: #fff !important; color: #000 !important; } :root[data-theme="dark"] header{ background: #fff !important; color: #000 !important; } }