/* ================================================================= Theme: Dunkel + Türkis/Orange (neue Markenidentität) Wird auf allen Seiten via geladen. Überschreibt die hellen Tokens/Flächen aus styles.css. ================================================================= */ [data-theme="dark"] { --color-bg: #0b1417; --color-text: #e8eef0; --color-muted: #94a6a9; --color-border: #21343a; --color-accent: #12222a; --color-white: #0f1f25; /* "Karten"-Oberfläche */ --color-primary: #19b3a3; /* Türkis – Buttons/Akzente */ --color-secondary: #ff8a3d; /* Orange – Glow/Akzent */ --color-secondary-dark: #ff8a3d; --surface-2: #0e1c22; } [data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #f2f6f7; } [data-theme="dark"] h1 em, [data-theme="dark"] h2 em { color: var(--color-secondary); } /* Glow hinter dem Hero (Türkis) */ [data-theme="dark"] .hero { background: radial-gradient(60% 80% at 78% 18%, rgba(25, 179, 163, .16), transparent 60%); } /* Header / Nav */ [data-theme="dark"] .site-header { background: rgba(11, 20, 23, .85); } [data-theme="dark"] .site-header.is-scrolled { background: rgba(9, 16, 19, .97); border-bottom-color: rgba(255, 255, 255, .10); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } [data-theme="dark"] .main-nav a { color: var(--color-text); } [data-theme="dark"] .brand-name { color: #f2f6f7; } [data-theme="dark"] .brand-sub { color: var(--color-muted); } /* Flächen, die im Hellen weiß sind -> dunkle Oberfläche */ [data-theme="dark"] .trust, [data-theme="dark"] .approach, [data-theme="dark"] .faq { background: var(--surface-2); border-block-color: var(--color-border); } [data-theme="dark"] .contact { background: var(--color-bg); } [data-theme="dark"] .trust-card, [data-theme="dark"] .offer-card, [data-theme="dark"] .accordion-item, [data-theme="dark"] .contact-form-wrap, [data-theme="dark"] .problem-list li, [data-theme="dark"] .blog-card { background: var(--color-white); border-color: var(--color-border); } [data-theme="dark"] .offer-featured { background: linear-gradient(180deg, #123038 0%, #0f1f25 100%); } /* Fließtext aufhellen */ [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] .lede, [data-theme="dark"] .section-intro, [data-theme="dark"] .offer-text, [data-theme="dark"] .process-step p, [data-theme="dark"] .approach-intro p, [data-theme="dark"] .contact-copy p, [data-theme="dark"] .accordion-panel p, [data-theme="dark"] .article p, [data-theme="dark"] .article li { color: #c4d0d2; } /* Callout (türkise Kurzfassung) – durchgehend dunkler Text auf Türkis */ [data-theme="dark"] .callout, [data-theme="dark"] .callout p, [data-theme="dark"] .callout li, [data-theme="dark"] .callout strong { color: var(--color-bg); } /* Tief-dunkle Bänder */ [data-theme="dark"] .references, [data-theme="dark"] .funding, [data-theme="dark"] .testimonials { background: #081316; } [data-theme="dark"] .testimonial-card { background: #0f1f25; border-color: var(--color-border); } [data-theme="dark"] .outcome-box { background: #123038; } /* Buttons */ [data-theme="dark"] .btn-primary { color: #04201d; } /* türkiser Button -> dunkler Text */ [data-theme="dark"] .btn-outline { background: var(--color-white); color: #f2f6f7; border-color: var(--color-border); } [data-theme="dark"] .btn-ghost { color: #f2f6f7; border-color: rgba(255,255,255,.25); } [data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--color-secondary); } /* Akzent-Chips / Icons */ [data-theme="dark"] .trust-icon { background: #15303a; color: var(--color-secondary); } [data-theme="dark"] .check { background: #15303a; } [data-theme="dark"] .check::after { border-color: var(--color-secondary); } [data-theme="dark"] .bafa-badge { background: #0f1f25; border-color: var(--color-border); color: #f2f6f7; } /* Formularfelder */ [data-theme="dark"] .field input, [data-theme="dark"] .field textarea { background: #0c1a20; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .field input:focus, [data-theme="dark"] .field textarea:focus { background: #0c1a20; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(255,138,61,.22); } [data-theme="dark"] .field label { color: var(--color-text); } [data-theme="dark"] .form-intro { color: var(--color-muted); } /* Tabelle / Artikel */ [data-theme="dark"] table.compare { background: var(--color-white); } [data-theme="dark"] table.compare tbody tr:nth-child(even) { background: #0d1c22; } [data-theme="dark"] .article-lead { background: #0d1c22; } /* Consent / Footer / Sticky */ [data-theme="dark"] .consent { background: #0f1f25; border-top-color: var(--color-border); } [data-theme="dark"] .consent-text p { color: #c4d0d2; } [data-theme="dark"] .site-footer { background: #081316; } [data-theme="dark"] .sticky-cta { background: rgba(11, 20, 23, .92); border-top-color: var(--color-border); } /* Helle Texte auf dunklen Bändern (sonst dunkel-auf-dunkel) */ [data-theme="dark"] .references h2, [data-theme="dark"] .testimonials h2, [data-theme="dark"] .funding h2 { color: #f2f6f7; } [data-theme="dark"] .references-text, [data-theme="dark"] .testimonials .section-intro, [data-theme="dark"] .funding-text { color: #c4d0d2; } [data-theme="dark"] .testimonial-card blockquote p { color: #e8eef0; } [data-theme="dark"] .author-name { color: #f2f6f7; } [data-theme="dark"] .funding-pill { color: #f2f6f7; background: rgba(255,138,61,.14); border-color: rgba(255,138,61,.32); } [data-theme="dark"] .funding-note { color: #8a9a9d; } [data-theme="dark"] .outcome-box { color: #e8eef0; } /* Footer: helle Texte auf dunklem Grund */ [data-theme="dark"] .site-footer { color: #c4d0d2; } [data-theme="dark"] .footer-name { color: #f2f6f7; } [data-theme="dark"] .footer-line, [data-theme="dark"] .footer-nav a, [data-theme="dark"] .footer-contact, [data-theme="dark"] .footer-contact p, [data-theme="dark"] .footer-contact a, [data-theme="dark"] .footer-bottom, [data-theme="dark"] .footer-copy, [data-theme="dark"] .link-button { color: #c4d0d2; } [data-theme="dark"] .footer-nav a:hover, [data-theme="dark"] .footer-contact a:hover, [data-theme="dark"] .link-button:hover { color: #ffffff; } /* Akzent-Recolors: hartkodiertes Kupfer aus styles.css -> Orange */ [data-theme="dark"] .cursor-ring { border-color: rgba(255, 138, 61, .7); } [data-theme="dark"] .cursor-ring.is-hover { background: rgba(255, 138, 61, .12); border-color: var(--color-secondary); } [data-theme="dark"] .process-steps::after { background: linear-gradient(90deg, var(--color-secondary), #ffb070); } [data-theme="dark"] .btn-glow:hover { box-shadow: 0 0 24px rgba(255, 138, 61, .5); } [data-theme="dark"] .offer-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255, 138, 61, .35); } [data-theme="dark"] .trust-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.45); } [data-theme="dark"] .process-step.is-active .step-num { box-shadow: 0 0 0 6px var(--color-bg), 0 10px 24px rgba(255, 138, 61, .5); }