/* ===================================================================== Dark Mode für die Marketing-Seite. Aktiv über , gesetzt durch das No-Flash-Script im Layout. Der localStorage-Schlüssel "pm-theme" ist mit Kundencenter & Admin geteilt – die Hell/Dunkel-Einstellung gilt seitenübergreifend. Das Marketing-Design ist vollständig über CSS-Variablen gesteuert; hier wird die Palette für Dunkel neu definiert, plus wenige gezielte Overrides für fest verdrahtete helle Flächen. ===================================================================== */ html.dark { /* Flächen – warmes Fast-Schwarz, passend zur Marke */ --cream: #15120E; --cream-2: #221D16; --sand: #1A150F; --paper: #1D1812; --paper-warm: #261F18; /* Text */ --ink: #F2ECE2; --ink-2: #C4B8A7; --ink-3: #8F8475; /* Linien / Rahmen */ --line: #342E25; --line-2: #423A30; /* Orange (leicht aufgehellt, damit es auf Dunkel trägt) */ --orange: #D87A4E; --orange-deep: #E89063; /* Hover/Links: heller als --orange */ --orange-soft: #B9805A; --orange-tint: #2C211A; --orange-tint2: #382A20; /* Akzente */ --teal: #213840; --teal-soft: #6E9098; --ok: #57B377; --pine: #7FB89A; --pine-tint: #1C2A23; /* Schatten – auf Dunkel mit Schwarz statt Braun, sonst unsichtbar */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 6px -2px rgba(0,0,0,.5), 0 10px 24px -16px rgba(0,0,0,.6); --shadow-lg: 0 4px 10px -4px rgba(0,0,0,.5), 0 22px 48px -28px rgba(0,0,0,.7); } /* Footer nutzt im Hellmodus --ink als dunkle Fläche; da --ink im Dunkel- modus hell wird, den Footer explizit dunkel halten. */ html.dark footer.site { background: #100D0A; } /* Vereinzelte fest verdrahtete weiße Flächen abdunkeln. */ html.dark .dc-form { background: var(--paper); } html.dark .dc-form input { color: var(--ink); } html.dark .dc-form input::placeholder { color: var(--ink-3); } html.dark .speech { background: var(--paper); } html.dark .cc-login-input { background: var(--paper); color: var(--ink); } html.dark .cc-login-input::placeholder { color: var(--ink-3); } /* Info-/Warn-/Erfolgs-Boxen (Anleitungen, Kontaktformular). */ html.dark .callout.note { background: #15252B; border-color: #294049; } html.dark .callout.note svg { color: var(--teal-soft); } html.dark .callout.warn { background: #2C2114; border-color: #4A381F; } html.dark .callout.warn svg { color: var(--orange-deep); } html.dark .form-ok { background: #15281F; border-color: #2C5640; color: #7FCB9F; } /* ===================================================================== Theme-Umschalter (Sonne/Mond) – Basis-Styles, gelten in beiden Modi. ===================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border: 1.5px solid var(--line-2); border-radius: var(--pill); background: transparent; color: var(--ink-2); transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--orange-deep); border-color: var(--orange-soft); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ic-sun { display: none; } html.dark .theme-toggle .ic-moon { display: none; } html.dark .theme-toggle .ic-sun { display: block; } /* Sanfter Übergang beim Umschalten (nicht beim ersten Laden, da .dark bereits vor dem Rendern gesetzt ist). */ body, .topbar, header.site, footer.site, .svc, .pcard, .tariff, .callout, .btn-ghost, .hero-card { transition: background-color .25s ease, border-color .25s ease, color .2s ease; }