/* =================================================================== gos:theme v1.0 — Hell-Variante fuer globaloilshock.com (13.09.2026) Architektur (siehe Systementwurf): - Rein additiv. Keine bestehende Seite wird umgeschrieben. - Uebersteuerung per Spezifitaet: :root[data-theme="light"] (0,2,0) schlaegt das inline gesetzte :root (0,1,0) jeder Seite, unabhaengig von der Ladereihenfolge. - Standard bleibt Dunkel. Ohne data-theme sieht die Seite aus wie bisher, auch wenn das Betriebssystem hell eingestellt ist. Der System-Zustand kommt erst mit dem Umschalter in der Kopfzeile. - Rueckzug: die eine -Zeile je Seite entfernen. Kontrast (gerechnet gegen #f7f5f2 bzw. #ffffff): Text #14202e 15,1:1 · Sekundaer #5a6673 5,4:1 · Gedaempft #616c7a 4,9:1 Akzent-Text #b45309 4,6:1 · Akzent-Flaeche #c2660a 3,7:1 Erfolg #047857 5,0:1 · Gefahr #b91c1c 6,0:1 =================================================================== */ :root[data-theme="light"] { color-scheme: light; /* --- Grundtokens der Lexikon-, Laender- und Builder-Seiten --- */ --bg: #f7f5f2; --ink: #14202e; --muted: #5a6673; --dim: #616c7a; --line: #d7d1c9; --card: #ffffff; --card-solid: #ffffff; --accent: #a8500a; --accent-2: #b91c1c; --accent-hover: #92400e; --accent-orange: #c2660a; --acc: #a8500a; --amber: #a8500a; --amber-2: #c2660a; --txt: #14202e; /* --- Tokens der neueren Bloecke (shared.css, unified-header) --- */ --color-bg: #f7f5f2; --color-surface: #f2efea; --color-card: #ffffff; --color-active: #e9e5df; --color-text-1: #14202e; --color-text-2: #5a6673; --color-text-3: #616c7a; --color-primary: #c2660a; --color-success: #047857; --color-danger: #b91c1c; --color-info: #1d4ed8; --bg-2: #f2efea; --bg-3: #e9e5df; /* --- Kopfzeile (unified-header) --- */ --uh-bg-scrolled: rgba(247, 245, 242, .92); --uh-bg-mobile-menu: rgba(255, 255, 255, .98); --uh-border: rgba(20, 32, 46, .12); --uh-text: #14202e; --uh-text-dim: #5a6673; --uh-primary: #a8500a; --uh-primary-shadow: rgba(180, 83, 9, .28); --uh-shadow: 0 10px 34px rgba(20, 32, 46, .18); /* --- Tiefenebene (depth-system) --- */ --surface-0: #f7f5f2; --surface-1: #f2efea; --surface-2: #ffffff; --surface-3: #f4f1ec; --surface-4: #e9e5df; --border-low: rgba(20, 32, 46, .08); --border-mid: rgba(20, 32, 46, .14); --border-high: rgba(20, 32, 46, .22); --depth-shadow-sm: 0 2px 6px rgba(20, 32, 46, .10); --depth-shadow-md: 0 6px 18px rgba(20, 32, 46, .12); --depth-shadow-lg: 0 14px 36px rgba(20, 32, 46, .16); /* --- Abschnitte, Anzeiger und Handy-Leisten --- */ --section-bg-default: #f7f5f2; --section-bg-alt: #f2efea; --section-bg-highlight: #ffffff; --section-bg-action: #ffffff; --section-divider: rgba(20, 32, 46, .06); --indicator-bg: rgba(255, 255, 255, .92); --indicator-active-color: #a8500a; --indicator-inactive-color: #5a6673; --indicator-border: rgba(20, 32, 46, .12); --indicator-highlight: rgba(255, 255, 255, .9); --indicator-shadow: 0 8px 32px rgba(20, 32, 46, .14), 0 1px 0 rgba(255, 255, 255, .9) inset; --text-primary: #14202e; --text-secondary: #5a6673; --text: #14202e; --acc-warm: #92400e; --acc-hot: #c2660a; --ok: #047857; --m-glass-bg: rgba(255, 255, 255, .88); --m-shadow-card: 0 4px 16px rgba(20, 32, 46, .12), 0 1px 3px rgba(20, 32, 46, .08); /* --- Tokens, die sonst still dunkel blieben (Stufe C) --- */ --text-dim: #5a6673; --text-tertiary: #616c7a; --color-text: #14202e; --color-warning: #a8500a; --amber-soft: rgba(180, 83, 9, .10); --amber-light: #92400e; --danger: #b91c1c; --cat-tint: rgba(180, 83, 9, .10); --card2: #ffffff; /* --- Schatten und Aufheller: im Hellmodus ersetzt, nicht invertiert --- */ --shadow-1: 0 1px 2px rgba(20, 32, 46, .06); --shadow-2: 0 10px 30px -18px rgba(20, 32, 46, .35); } /* Grundflaechen, falls eine Seite den Hintergrund nicht ueber --bg zieht */ :root[data-theme="light"] body { background: #f7f5f2; color: #14202e; } /* ------------------------------------------------------------------- Literale aus den Seiten-Inline-Styles, die im Hellmodus unsichtbar oder falsch waeren. Reihenfolge: Text, dann Flaechen, dann Raender. Jede Regel traegt [data-theme="light"] und wirkt nur dort. ------------------------------------------------------------------- */ /* Fliesstext, der dunkel auf hell braucht (war #d4dae6) */ :root[data-theme="light"] .article-wrap p, :root[data-theme="light"] .article-wrap ul, :root[data-theme="light"] .article-wrap ol, :root[data-theme="light"] .article-wrap li, :root[data-theme="light"] .price-table tbody td, :root[data-theme="light"] .data-table tbody td, :root[data-theme="light"] .persona-calc, :root[data-theme="light"] details.country-faq .faq-body, :root[data-theme="light"] .faq-body, :root[data-theme="light"] .season-bar .bar-pct, :root[data-theme="light"] .scenario-card p, :root[data-theme="light"] .region-list li, :root[data-theme="light"] .lb-sub, :root[data-theme="light"] .sources-list li { color: #2b3746; } /* Hervorhebungen, die vorher weiss waren und auf Papier verschwinden */ :root[data-theme="light"] .article-wrap h2, :root[data-theme="light"] .article-wrap h3, :root[data-theme="light"] .article-wrap h4, :root[data-theme="light"] .article-wrap p strong, :root[data-theme="light"] .article-wrap li strong, :root[data-theme="light"] .keyfacts li strong, :root[data-theme="light"] .persona-card h3, :root[data-theme="light"] .persona-calc .val, :root[data-theme="light"] .price-table thead th, :root[data-theme="light"] .data-table thead th { color: #14202e; } /* Fusszeile (war #b4c2d9) */ :root[data-theme="light"] footer.site-footer, :root[data-theme="light"] footer.site-footer .footer-col p, :root[data-theme="light"] footer.site-footer .footer-col a, :root[data-theme="light"] footer.site-footer .footer-bottom { color: #5a6673; } :root[data-theme="light"] footer.site-footer { background: #f2efea; border-top: 1px solid #d7d1c9; } :root[data-theme="light"] footer.site-footer a:hover { color: #a8500a; } /* Weisse Schrift auf farbiger Flaeche bleibt weiss, aber nur dort */ :root[data-theme="light"] .btn-primary, :root[data-theme="light"] .cta-button { color: #ffffff; background: linear-gradient(180deg, #a2520a, #8a4508); } /* Hervorgehobene Tabellenzeile: helle Flaeche, also dunkle Schrift */ :root[data-theme="light"] .price-table tbody tr.highlight td, :root[data-theme="light"] .price-table tbody tr.highlight td strong { color: #14202e; } /* Karten und Bloecke: der Aufheller rgba(255,255,255,.04) wird zu Papierweiss */ :root[data-theme="light"] .keyfacts, :root[data-theme="light"] .sources-block, :root[data-theme="light"] .related-card, :root[data-theme="light"] .rel-card, :root[data-theme="light"] .lb-card, :root[data-theme="light"] .scenario-card, :root[data-theme="light"] .persona-card { background: #ffffff; border-color: #d7d1c9; } /* Abschnittsflaechen, die vorher fast schwarz waren */ :root[data-theme="light"] .page-section--alt { background: #f2efea; } :root[data-theme="light"] .page-section--default { background: transparent; } /* Kopfzeile */ :root[data-theme="light"] .unified-header, :root[data-theme="light"] header.site-header { background: rgba(247, 245, 242, .92); border-bottom: 1px solid #d7d1c9; } /* Links im Fliesstext */ :root[data-theme="light"] .article-wrap a { color: #a8500a; } :root[data-theme="light"] .article-wrap a:hover { color: #92400e; } /* Fokus bleibt in beiden Modi sichtbar */ :root[data-theme="light"] :focus-visible { outline: 2px solid #b45309; outline-offset: 2px; } /* Lagebild: Kurve und Status im Hellmodus */ /* Das Lagebild ist ein Abschnitt im Rumpf und wird hell. Die Marktkarte .lb-mini sitzt dagegen im Helden und bleibt dunkel, sie wird weiter unten unter header.hero gesetzt. */ :root[data-theme="light"] .lagebild { --lb-ink: #14202e; --lb-ink2: #5a6673; --lb-ink3: #616c7a; --lb-line: #d7d1c9; --lb-line2: #c9c2b8; --lb-primary: #c2660a; --lb-amber: #a2520a; } :root[data-theme="light"] .lagebild .lb-card { background: #ffffff; border-color: #d7d1c9; box-shadow: 0 10px 30px -22px rgba(20,32,46,.5); } :root[data-theme="light"] .lagebild .st-crit { color: #b91c1c; background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.35); } :root[data-theme="light"] .lagebild .st-warn { color: #92400e; background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.35); } :root[data-theme="light"] .lagebild .st-ok { color: #047857; background: rgba(4,120,87,.08); border-color: rgba(4,120,87,.32); } :root[data-theme="light"] .lagebild .lb-ev .src { color: #5a6673; } :root[data-theme="light"] .lagebild .lb-delta { color: #b91c1c; } /* ------------------------------------------------------------------- Kopfzeile, Seitenschiene und Aufklapper. Diese Bausteine bringen eigene dunkle Literale mit, die keine Tokens lesen. ------------------------------------------------------------------- */ /* Kopfzeile: beide Zustaende, ruhend und gescrollt */ :root[data-theme="light"] .uh-nav, :root[data-theme="light"] .uh-nav.is-scrolled { background: linear-gradient(180deg, rgba(247, 245, 242, .96) 0%, rgba(247, 245, 242, .90) 100%); border-bottom: 1px solid #d7d1c9; box-shadow: 0 1px 0 rgba(20, 32, 46, .04); } :root[data-theme="light"] .uh-nav::after { background: linear-gradient(90deg, transparent 0%, rgba(180, 83, 9, 0) 25%, rgba(180, 83, 9, .28) 50%, rgba(180, 83, 9, 0) 75%, transparent 100%); } :root[data-theme="light"] .uh-links a:hover, :root[data-theme="light"] .uh-links a:focus-visible { background: rgba(20, 32, 46, .06); color: #92400e; } :root[data-theme="light"] .uh-pill { background: rgba(20, 32, 46, .04); } :root[data-theme="light"] .uh-pill:hover, :root[data-theme="light"] .uh-pill[aria-expanded="true"] { background: rgba(20, 32, 46, .07); border-color: rgba(180, 83, 9, .40); } :root[data-theme="light"] .uh-sub a:hover, :root[data-theme="light"] .uh-sub a:focus-visible, :root[data-theme="light"] .uh-sub-cat-toggle:hover, :root[data-theme="light"] .uh-dd-menu button:hover, :root[data-theme="light"] .uh-dd-menu a:hover { background: rgba(180, 83, 9, .10); color: #92400e; } :root[data-theme="light"] .uh-sub-country:hover { background: rgba(20, 32, 46, .04); } :root[data-theme="light"] .uh-dd-flag { background: rgba(20, 32, 46, .06); } :root[data-theme="light"] .uh-backdrop { background: rgba(20, 32, 46, .28); } :root[data-theme="light"] .uh-brent-pill { background: rgba(180, 83, 9, .07); border-color: rgba(180, 83, 9, .28); } :root[data-theme="light"] .uh-brent-value { color: #92400e; } @media (max-width: 900px) { :root[data-theme="light"] .uh-links { background: rgba(255, 255, 255, .98); border: 1px solid #d7d1c9; } :root[data-theme="light"] .uh-sub { background: rgba(20, 32, 46, .03) !important; } } /* Seitenschiene "Dein Plan" */ :root[data-theme="light"] .gos-rail { background: linear-gradient(180deg, #ffffff 0%, #f7f5f2 100%); border-color: #d7d1c9; box-shadow: 0 14px 36px -22px rgba(20, 32, 46, .45); color: #14202e; } :root[data-theme="light"] .gos-rail-header { color: #92400e; } :root[data-theme="light"] .gos-rail-close { color: #5a6673; } :root[data-theme="light"] .gos-rail-close:hover, :root[data-theme="light"] .gos-rail-close:focus-visible { background: rgba(20, 32, 46, .06); color: #14202e; } :root[data-theme="light"] .gos-rail-row { color: #5a6673; } :root[data-theme="light"] .gos-rail-row.is-clickable, :root[data-theme="light"] .gos-rail-row.is-done { color: #2b3746; } :root[data-theme="light"] .gos-rail-row.is-clickable:hover { background: rgba(180, 83, 9, .10); color: #14202e; } :root[data-theme="light"] .gos-rail-row-icon { color: #6f7886; } :root[data-theme="light"] .gos-rail-row.is-done .gos-rail-row-icon { color: #047857; } :root[data-theme="light"] .gos-rail-recalc, :root[data-theme="light"] .gos-rail-primary { color: #a8500a !important; border-top-color: rgba(20, 32, 46, .08); } :root[data-theme="light"] .gos-rail-recalc .gos-rail-row-icon, :root[data-theme="light"] .gos-rail-primary .gos-rail-row-icon { color: #a8500a !important; } :root[data-theme="light"] .gos-rail-recalc:hover, :root[data-theme="light"] .gos-rail-primary:hover { background: rgba(180, 83, 9, .12) !important; color: #92400e !important; } /* Ausklappbare Fragen (depth-system) */ :root[data-theme="light"] details.faq, :root[data-theme="light"] details.faq-item, :root[data-theme="light"] .faq details { background: #ffffff; border-color: #d7d1c9; } :root[data-theme="light"] details.faq[open], :root[data-theme="light"] details.faq-item[open], :root[data-theme="light"] .faq details[open] { background: #ffffff; border-color: #c9c2b8; } /* ------------------------------------------------------------------- Handy: Abschnittsanzeiger, untere Leiste, Wegbalken und Anstupser. Diese Bausteine liegen ueber dem Inhalt und waren im Hellmodus die einzigen dunklen Flaechen auf dem Bildschirm. ------------------------------------------------------------------- */ /* Abschnittsanzeiger (02 Wirkung, 03 Haushalt, ...) */ :root[data-theme="light"] .section-indicator, :root[data-theme="light"] .section-indicator::before { background: rgba(255, 255, 255, .94); border-color: #d7d1c9; } :root[data-theme="light"] .section-indicator { box-shadow: 0 -6px 24px -14px rgba(20, 32, 46, .35); } :root[data-theme="light"] .indicator-item:hover { background: rgba(20, 32, 46, .05); color: #2b3746; } :root[data-theme="light"] .indicator-item.is-active { background: rgba(180, 83, 9, .10); color: #92400e; } :root[data-theme="light"] .quickjump-trigger { background: rgba(20, 32, 46, .04); border-color: rgba(20, 32, 46, .12); } :root[data-theme="light"] .quickjump-trigger:hover { background: rgba(20, 32, 46, .07); border-color: rgba(180, 83, 9, .35); } :root[data-theme="light"] .quickjump-menu a:hover { background: rgba(180, 83, 9, .09); color: #92400e; } :root[data-theme="light"] .section-sources { background: rgba(20, 32, 46, .03); border-left-color: rgba(180, 83, 9, .45); } /* Untere Leiste (Start, Tipps, Berechnen, Lexikon, Laender) */ :root[data-theme="light"] .m-bottom-nav { background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(247, 245, 242, .98) 100%); border-top: 1px solid #d7d1c9; box-shadow: 0 -6px 24px -16px rgba(20, 32, 46, .40); } :root[data-theme="light"] .m-bottom-nav-item { color: #5a6673; } :root[data-theme="light"] .m-bottom-nav-item.is-active, :root[data-theme="light"] .m-bottom-nav-item.is-cta.is-active { color: #92400e; } :root[data-theme="light"] .m-bottom-nav-item.is-cta { color: #14202e; } /* Wegbalken oben */ :root[data-theme="light"] .gos-journey-bar { background: rgba(20, 32, 46, .08); } :root[data-theme="light"] .gos-journey-meta { background: rgba(247, 245, 242, .94); border-top-color: #d7d1c9; border-bottom-color: #d7d1c9; color: #5a6673; } :root[data-theme="light"] .gos-journey-meta-label b { color: #14202e; } :root[data-theme="light"] .gos-journey-meta-label .gos-journey-step-name { color: #92400e; } :root[data-theme="light"] .gos-journey-dot { background: rgba(20, 32, 46, .20); } :root[data-theme="light"] .gos-journey-dot.is-active { background: #b45309; } :root[data-theme="light"] .gos-journey-dot.is-done { background: #047857; } /* Anstupser unten rechts */ :root[data-theme="light"] .gos-nudge { background: linear-gradient(180deg, #ffffff 0%, #f7f5f2 100%); border-color: rgba(180, 83, 9, .32); box-shadow: 0 16px 40px -20px rgba(20, 32, 46, .45); color: #14202e; } :root[data-theme="light"] .gos-nudge-text { color: #2b3746; } :root[data-theme="light"] .gos-nudge-icon { background: rgba(180, 83, 9, .10); border-color: rgba(180, 83, 9, .28); color: #92400e; } :root[data-theme="light"] .gos-nudge-x { color: #5a6673; } :root[data-theme="light"] .gos-nudge-x:hover, :root[data-theme="light"] .gos-nudge-x:focus-visible { background: rgba(20, 32, 46, .07); color: #14202e; } :root[data-theme="light"] .gos-nudge-toast { background: #ffffff; border-color: #d7d1c9; color: #14202e; } /* Einwilligungsbanner */ :root[data-theme="light"] .gos-consent { background: rgba(255, 255, 255, .96); border-color: #d7d1c9; box-shadow: 0 -10px 40px -22px rgba(20, 32, 46, .5); } :root[data-theme="light"] .gos-consent-title { color: #14202e; } :root[data-theme="light"] .gos-consent-text { color: #2b3746; } :root[data-theme="light"] .gos-consent-text a { color: #a8500a; } :root[data-theme="light"] .gos-consent-btn { color: #14202e; border-color: #cfc8bf; background: #ffffff; } :root[data-theme="light"] .gos-consent-btn:hover { background: #f2efea; border-color: #b9b1a6; } :root[data-theme="light"] .gos-consent-btn.is-primary { background: #a2520a; color: #ffffff; border-color: #8a4508; } /* Einwilligungsfenster */ :root[data-theme="light"] .gos-consent-modal-card { background: #ffffff; border-color: #d7d1c9; color: #14202e; } :root[data-theme="light"] .gos-consent-modal { background: rgba(20, 32, 46, .45); } /* ------------------------------------------------------------------- Zweite Familie (Tipps) und die gemeinsamen Bausteine, die das erweiterte Kontrast-Tor in den verlinkten Stylesheets gefunden hat. ------------------------------------------------------------------- */ /* Tipp-Seiten: SEO-Kasten und Bildunterschriften */ :root[data-theme="light"] .tip-seo-mini { background:rgba(20,32,46,.03);border-color:#e2ddd5;color:#2b3746; } :root[data-theme="light"] .tip-seo-mini h4 { color:#92400e; } :root[data-theme="light"] .tip-seo-mini .tip-seo-kw { border-top-color:rgba(20,32,46,.12); } :root[data-theme="light"] .tip-seo-mini .tip-seo-kw span { background:rgba(180,83,9,.10);color:#92400e; } :root[data-theme="light"] .visiwave-caption { color:#5a6673; } :root[data-theme="light"] .product-item .p-stars { color:#a8500a; } /* Waehrungs- und Sprachwahl (shared.css) */ :root[data-theme="light"] .cur-btn, :root[data-theme="light"] .lang-btn { background:rgba(20,32,46,.04);color:#2b3746;border-color:rgba(20,32,46,.14); } :root[data-theme="light"] .cur-btn:hover, :root[data-theme="light"] .lang-btn:hover { color:#14202e;border-color:rgba(180,83,9,.55); } :root[data-theme="light"] .cur-item { color:#2b3746; } :root[data-theme="light"] .cur-item .cur-item-code { color:#5a6673; } :root[data-theme="light"] .cur-item .cur-item-sym { background:rgba(20,32,46,.05);border-color:rgba(20,32,46,.12); } :root[data-theme="light"] .cur-item:hover, :root[data-theme="light"] .cur-item.is-active { color:#92400e; } :root[data-theme="light"] .cur-detected { color:#5a6673;border-bottom-color:rgba(20,32,46,.10); } :root[data-theme="light"] .cur-btn .cur-sym, :root[data-theme="light"] .cur-detected strong, :root[data-theme="light"] .cur-btn.is-diff .cur-code::after { color:#a8500a; } /* Rechtliches: Vertrauensleiste und Inhaltsverzeichnis */ :root[data-theme="light"] .legal-trust-label { color:#5a6673; } :root[data-theme="light"] .legal-trust-value { color:#14202e; } :root[data-theme="light"] .legal-trust-item i[data-lucide], :root[data-theme="light"] .legal-trust-item svg, :root[data-theme="light"] .legal-toc-title i[data-lucide] { color:#a8500a; } :root[data-theme="light"] .legal-toc { background:#ffffff;border-color:#d7d1c9; } :root[data-theme="light"] .legal-toc-title, :root[data-theme="light"] .legal-toc-details > summary { color:#14202e; } :root[data-theme="light"] .legal-toc-list a { color:#2b3746; } :root[data-theme="light"] .legal-toc-list a:hover { background:rgba(180,83,9,.09);color:#92400e; } /* Lexikon-Kurzinfo (Tooltip-Karte) */ :root[data-theme="light"] .gos-lex-card { background:#ffffff;color:#14202e;border:1px solid #d7d1c9; } :root[data-theme="light"] .gos-lex-card h3 { color:#14202e; } :root[data-theme="light"] .gos-lex-def { color:#2b3746; } :root[data-theme="light"] .gos-lex-close { color:#5a6673; } :root[data-theme="light"] .gos-lex-close:hover { color:#14202e; } /* Newsletter-Karte */ :root[data-theme="light"] .gos-nl-card { background:#ffffff;border-color:#d7d1c9; } :root[data-theme="light"] .gos-nl-card-title { color:#14202e; } :root[data-theme="light"] .gos-nl-card-sub, :root[data-theme="light"] .gos-nl-snapshot-optin, :root[data-theme="light"] .gos-nl-opt-label { color:#2b3746; } :root[data-theme="light"] .gos-nl-card-eyebrow { color:#92400e; } :root[data-theme="light"] .gos-nl-thresh-hint, :root[data-theme="light"] .gos-nl-brent-hint, :root[data-theme="light"] .gos-nl-privacy, :root[data-theme="light"] .gos-nl-opt-label-small { color:#5a6673; } :root[data-theme="light"] .gos-nl-thresh-pill { background:rgba(20,32,46,.03);color:#2b3746;border-color:rgba(180,83,9,.30); } :root[data-theme="light"] .gos-nl-thresh-pill-sub, :root[data-theme="light"] .gos-nl-thresh-pill.is-active .gos-nl-thresh-pill-sub, :root[data-theme="light"] .gos-nl-thresh-pill.is-default .gos-nl-thresh-pill-sub { color:#5a6673; } :root[data-theme="light"] .gos-nl-thresh-pill.is-active { background:rgba(180,83,9,.14);color:#92400e;border-color:rgba(180,83,9,.70); } :root[data-theme="light"] .gos-nl-input { background:#ffffff;border-color:#cfc8bf;color:#14202e; } :root[data-theme="light"] .gos-nl-input::placeholder { color:#5a6673; } :root[data-theme="light"] .gos-nl-submit.is-outline { border-color:#a8500a;color:#a8500a; } :root[data-theme="light"] .gos-nl-status.is-ok { background:rgba(4,120,87,.10);border-left-color:#047857;color:#065f46; } :root[data-theme="light"] .gos-nl-status.is-error { background:rgba(185,28,28,.08);border-left-color:#b91c1c;color:#991b1b; } /* Schwebende Hinweise: Vorschau, Saisonhinweis, Einwilligung */ :root[data-theme="light"] .hero-preview { background:#ffffff;border-color:#d7d1c9; } :root[data-theme="light"] .hero-preview:hover, :root[data-theme="light"] .hero-preview:focus-visible { background:#f7f5f2;border-color:rgba(180,83,9,.40); } :root[data-theme="light"] .hero-preview-lead, :root[data-theme="light"] .hero-preview-cta { color:#5a6673; } :root[data-theme="light"] .hero-preview-val { color:#14202e; } :root[data-theme="light"] .hero-preview-amount, :root[data-theme="light"] .hero-preview-ico, :root[data-theme="light"] .season-prompt-ico { color:#a8500a; } :root[data-theme="light"] .faq-inline-cta { background:rgba(180,83,9,.08);border-color:rgba(180,83,9,.30);color:#92400e; } :root[data-theme="light"] .season-prompt-card { background:linear-gradient(135deg, rgba(180,83,9,.10), rgba(180,83,9,.05));border-color:rgba(180,83,9,.30); } :root[data-theme="light"] .season-prompt-title { color:#14202e; } :root[data-theme="light"] .season-prompt-sub { color:#2b3746; } :root[data-theme="light"] .season-prompt-close { color:#5a6673; } :root[data-theme="light"] .season-prompt-close:hover { color:#14202e; } :root[data-theme="light"] .gos-consent-reopen { color:#a8500a; } :root[data-theme="light"] .gos-consent-text a:hover { color:#92400e; } :root[data-theme="light"] .gos-rail-row.is-clickable:focus-visible { background:rgba(180,83,9,.14);color:#14202e; } :root[data-theme="light"] .uh-sub a[data-read="1"] .uh-sub-term-check, :root[data-theme="light"] .uh-sub a[data-read="1"]::after { color:#047857; } :root[data-theme="light"] .gos-rail-recalc:hover .gos-rail-row-icon, :root[data-theme="light"] .gos-rail-primary:hover .gos-rail-row-icon { color: #92400e !important; } /* Tipp-Seiten: Handlungsblock und Volllisten-Uebersicht */ :root[data-theme="light"] .tip-action-block { background: linear-gradient(180deg, rgba(4,120,87,.06) 0%, rgba(180,83,9,.05) 100%); border-color: #ddd7ce; } :root[data-theme="light"] .tip-action-block .tab-step strong { color: #065f46; } :root[data-theme="light"] .tip-action-block .tab-step p { color: #2b3746; } :root[data-theme="light"] .tip-action-block .tab-link { background: #ffffff; border-color: #d7d1c9; } :root[data-theme="light"] .tip-action-block .tab-link:hover { background: rgba(180,83,9,.06); border-color: rgba(180,83,9,.40); } :root[data-theme="light"] .tip-action-block .tab-link span { color: #5a6673; } :root[data-theme="light"] .all-tips-col h3.all-tips-cat { color: #92400e; } :root[data-theme="light"] .all-tips-list a { color: #2b3746; } :root[data-theme="light"] .all-tips-list a:hover { background: rgba(180,83,9,.09); border-left-color: #a8500a; color: #14202e; } /* Lesezeit (wird vom Skript eingespielt) */ :root[data-theme="light"] .reading-time { color: #5a6673; } :root[data-theme="light"] .reading-time svg { color: #a8500a; } /* Sprungmarke fuer die Tastatur: weiss auf dunklerem Orange (5,4:1) */ :root[data-theme="light"] .skip-link { background: #a2520a; color: #ffffff; } /* ------------------------------------------------------------------- Dritte Familie (Laender). Diese Seiten bringen viele eigene Bausteine mit: Tiefenkarten, Preistabellen, Profil-Pillen, Foerder-Rechner. Alle Werte vom Kontrast-Tor bestaetigt. ------------------------------------------------------------------- */ /* Laender-Familie: Ueberschriften und Werte, vorher weiss */ :root[data-theme="light"] .deepdive-title, :root[data-theme="light"] .deepdive-card-title, :root[data-theme="light"] .price-table td.bundesland, :root[data-theme="light"] .price-table td.label, :root[data-theme="light"] .price-table td.comp, :root[data-theme="light"] .price-table td.tipo, :root[data-theme="light"] .price-table td.zone, :root[data-theme="light"] .price-table td.size, :root[data-theme="light"] .stack-pill .pill-name, :root[data-theme="light"] .profile-pill .profile-pac, :root[data-theme="light"] .state-table td.state, :root[data-theme="light"] .data-table th, :root[data-theme="light"] .co2-calc-title, :root[data-theme="light"] .author-box .author-name { color: #14202e; } /* Laender-Familie: Fliesstext, vorher helles Grau */ :root[data-theme="light"] .hope-pivot-bridge .hope-pivot-msg, :root[data-theme="light"] .deepdive-lead, :root[data-theme="light"] .deepdive-card, :root[data-theme="light"] .deepdive-card-desc, :root[data-theme="light"] .step-pill.is-estimate .step-amount, :root[data-theme="light"] .reading-time strong, :root[data-theme="light"] .author-box .author-bio, :root[data-theme="light"] .future-self-anchor .lead, :root[data-theme="light"] .future-self-anchor li, :root[data-theme="light"] .future-self-ps, :root[data-theme="light"] .pdf-promise-card strong, :root[data-theme="light"] .state-table tbody td, :root[data-theme="light"] .co2-result-table tbody td, :root[data-theme="light"] .co2-row-mid, :root[data-theme="light"] .co2-card-val { color: #2b3746; } /* Laender-Familie: Gedaempftes */ :root[data-theme="light"] .author-box h4, :root[data-theme="light"] .author-box .author-meta, :root[data-theme="light"] .cta-reassurance, :root[data-theme="light"] .pdf-promise-card p { color: #5a6673; } /* Laender-Familie: Akzente */ :root[data-theme="light"] .hope-pivot-bridge .hope-pivot-tag, :root[data-theme="light"] .deepdive-card-ico, :root[data-theme="light"] .deepdive-card-cta, :root[data-theme="light"] .deepdive-card:hover .deepdive-card-cta { color: #92400e; } /* Laender-Familie: Zusagen und Haken in Gruen */ :root[data-theme="light"] .cat-badge, :root[data-theme="light"] .trust-chip, :root[data-theme="light"] .pdf-promise-card .pdf-icon, :root[data-theme="light"] .mod-yes, :root[data-theme="light"] .gcw-crumb.is-done .gcw-crumb-num, :root[data-theme="light"] .gcw-crumb-result.is-active, :root[data-theme="light"] .gcw-yes, :root[data-theme="light"] .gcw-result-box--foerder .gcw-result-val { color: #047857; } /* Laender-Familie: Absagen und Fehler in Rot */ :root[data-theme="light"] .mod-no, :root[data-theme="light"] .gcw-result-error { color: #b91c1c; } /* Laender-Familie: Profil-Pillen, dunklere Varianten */ :root[data-theme="light"] .profile-pill.profile-bleu .profile-name { color: #1d4ed8; } :root[data-theme="light"] .profile-pill.profile-jaune .profile-name { color: #854d0e; } :root[data-theme="light"] .profile-pill.profile-violet .profile-name { color: #6d28d9; } :root[data-theme="light"] .profile-pill.profile-rose .profile-name { color: #be185d; } /* Affiliate-Block aus dem anderen Lauf */ :root[data-theme="light"] .gos-aff-cta { background: #a2520a; color: #ffffff; border-color: #8a4508; } :root[data-theme="light"] .gos-aff-lead { color: #5a6673; } /* Affiliate-Karte v1.1 (Bild-Element): Hellmodus nachgezogen. Die Monogramm-Farbe regelt weiter unten der 5.-Welle-Nachtrag (#a2520a). Hier nur Flaeche und Rahmen, die v1.1 neu gesetzt hat: sonst steht eine weisse Platte in einer weissen Karte und der Rahmen ist unsichtbar. */ :root[data-theme="light"] .gos-aff-card .gos-aff-logo { border-color: #d7d1c9; } :root[data-theme="light"] .gos-aff-card .gos-aff-logo--placeholder { background: radial-gradient(120% 120% at 30% 20%, rgba(162,82,10,0.10), transparent 60%), #f6f3ee; border-color: rgba(162,82,10,0.28); } /* Knoepfe mit eigenem Verlauf: dunkler Verlauf, weisse Schrift (>=4,6:1) */ :root[data-theme="light"] .cta-bridge a, :root[data-theme="light"] .cta-bridge .cta, :root[data-theme="light"] a.cta-primary, :root[data-theme="light"] .js-open-wizard.cta { background: linear-gradient(135deg, #a2520a, #b45309) !important; color: #ffffff !important; } :root[data-theme="light"] .gos-aff-cta { background: #a2520a !important; color: #ffffff !important; } /* ------------------------------------------------------------------- Vierte Welle: Rechner, Methodik, Rechtstexte. ------------------------------------------------------------------- */ /* Rechner-, Methodik- und Rechtsseiten */ :root[data-theme="light"] .solar-spotlight-card h3, :root[data-theme="light"] .calc-bridge-headline, :root[data-theme="light"] .live-brent-anchor, :root[data-theme="light"] .meth-subnav a, :root[data-theme="light"] .meth-choke-points p { color: #14202e; } :root[data-theme="light"] .solar-spotlight-card p, :root[data-theme="light"] .calc-bridge-sub, :root[data-theme="light"] .native-list a { color: #2b3746; } :root[data-theme="light"] .live-brent-label, :root[data-theme="light"] .live-brent-suffix, :root[data-theme="light"] .live-brent-meta { color: #5a6673; } :root[data-theme="light"] .live-brent-value, :root[data-theme="light"] .disclosure-section .disclosure-card h3, :root[data-theme="light"] .meth-subnav a:hover, :root[data-theme="light"] .meth-subnav a:focus-visible, :root[data-theme="light"] .meth-subnav a.is-active, :root[data-theme="light"] .meth-crosslink a, :root[data-theme="light"] .meth-crosslink a:hover, :root[data-theme="light"] .meth-choke-points a { color: #a8500a; } :root[data-theme="light"] .methodik-page .freq-pill { color: #047857; } :root[data-theme="light"] .methodik-page .rc-pct-loss { color: #b91c1c; } /* Ergebnisseite des Rechners */ :root[data-theme="light"] .res-hero-big { color: #a8500a; } /* Windows-Hochkontrast: eigene Flaechen und Schatten zuruecknehmen */ @media (forced-colors: active) { :root[data-theme="light"] .keyfacts, :root[data-theme="light"] .lb-card, :root[data-theme="light"] .rel-card { background: Canvas; color: CanvasText; border-color: CanvasText; } } /* Vom Kontrast-Tor gefundene Alt-Literale der Lexikon-Familie */ :root[data-theme="light"] .cta-bridge h2, :root[data-theme="light"] .cta-bridge h3, :root[data-theme="light"] .author-name, :root[data-theme="light"] .related-card-title, :root[data-theme="light"] .scenario-card h4, :root[data-theme="light"] .price-table td.state, :root[data-theme="light"] .price-table td.year { color: #14202e; } :root[data-theme="light"] .strategy-list li::before { color: #ffffff; background: #b45309; } :root[data-theme="light"] .author-pic { color: #ffffff; background: #b45309; } :root[data-theme="light"] footer.site-footer .footer-col h4 { color: #14202e; } :root[data-theme="light"] footer.site-footer .footer-col a:hover { color: #92400e; } /* Nachtrag 5. Welle: live gemessene Reste */ :root[data-theme="light"] .uh-dd-flag { color: #8a4508; } :root[data-theme="light"] .gos-aff-logo--placeholder { color: #a2520a; } /* Nachtrag Tipps-Familie: live gemessen am 13.09. */ :root[data-theme="light"] .hero-kicker { color: #8a4508; } :root[data-theme="light"] a.cta-btn, :root[data-theme="light"] a.cta-btn span { background-image: linear-gradient(135deg, #a2520a, #8a4508); color: #ffffff; } :root[data-theme="light"] a.cta-btn span { background-image: none; } /* ===== Startseiten: Hell-Variante ==================================== */ /* Der Held bleibt dunkel, dahinter liegt das Tankerbild. Zurueckgeholt werden nur die Farben, die der Hell-Modus dort hineintraegt. */ /* Der Held traegt einen radialen Verlauf, dessen aeusserster Halt var(--bg) ist. Im Hellmodus wurde daraus #f7f5f2, und der untere Drittel des Helden lief schmutzig graubeige aus, bevor der helle Abschnitt begann. Joerg hat das am 13.09. beanstandet: der Held soll bis zur naechsten Sektion dunkel bleiben. Der aeussere Halt steht darum fest auf dem dunklen Grund #0c1320, so endet der Held mit einer sauberen Kante. */ :root[data-theme="light"] header.hero { background: radial-gradient(ellipse 80% 50% at 50% 40%, #3a2a0a 0%, #161226 55%, #0c1320 100%) !important; } :root[data-theme="light"] header.hero .hero-kicker { color: #f59e0b; } :root[data-theme="light"] header.hero .headline, :root[data-theme="light"] header.hero .headline .line { color: #f8fafc; } :root[data-theme="light"] header.hero .sub { color: rgba(232,237,244,.92); } :root[data-theme="light"] header.hero .h2-status, :root[data-theme="light"] header.hero .h2-status span, :root[data-theme="light"] .gos-hero2 .h2-status .sep, :root[data-theme="light"] .gos-hero2 .h2-status span { color: #c3cddb; } :root[data-theme="light"] header.hero .trust-item, :root[data-theme="light"] header.hero .trust-item span { color: rgba(232,237,244,.92); } :root[data-theme="light"] header.hero .scroll-cue span { color: rgba(232,237,244,.86); } :root[data-theme="light"] .gos-hero2 .h2-anchor .src { color: #c3cddb; } :root[data-theme="light"] header.hero .h2-chip small { color: #c3cddb; } :root[data-theme="light"] header.hero .h2-ghost { color: #fbbf24; } /* Marktkarte im Helden bleibt ebenfalls dunkel */ :root[data-theme="light"] header.hero .lb-mini { background: #151f30 !important; border-color: rgba(255,255,255,.12) !important; --lb-ink: #f8fafc; --lb-ink2: #b6c2d3; --lb-ink3: #9aa6b8; --lb-line: rgba(255,255,255,.12); } :root[data-theme="light"] header.hero .lb-mini .m-delta { color: #fca5a5; } :root[data-theme="light"] header.hero .lb-mini .m-chip.st-crit { color: #fca5a5 !important; background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.35) !important; } :root[data-theme="light"] header.hero .lb-mini .m-chip.st-warn { color: #fbbf24 !important; background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.35) !important; } :root[data-theme="light"] header.hero .lb-mini .m-chip.st-ok { color: #6ee7b7 !important; background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.32) !important; } /* Lagebild im Rumpf */ :root[data-theme="light"] .lb-ev { background: #ffffff; border-color: #d7d1c9; } :root[data-theme="light"] .lb-ev time { color: #8a4508; } :root[data-theme="light"] .lb-ev h4 { color: #14202e; } :root[data-theme="light"] .lb-ev p { color: #2b3746; } :root[data-theme="light"] .lb-ev .src { color: #5a6673; } :root[data-theme="light"] .lb-tip { background: #f2efea; border-color: #d7d1c9; color: #2b3746; } :root[data-theme="light"] .lb-more { color: #8a4508; } :root[data-theme="light"] .lagebild .lb-ranges button { color: #8a4508; } :root[data-theme="light"] .lb-legrow, :root[data-theme="light"] .lb-stamp { color: #5a6673; } /* Nachrichten-Teaser */ :root[data-theme="light"] .news-teaser-wrap { background-image: none; background: #f2efea; border-color: #d7d1c9; } :root[data-theme="light"] body.home-page .news-teaser-section .news-teaser-title, :root[data-theme="light"] .news-teaser-title span { color: #14202e !important; } :root[data-theme="light"] .news-teaser-link, :root[data-theme="light"] .news-teaser-link span { color: #8a4508 !important; } :root[data-theme="light"] .news-ticker-badge, :root[data-theme="light"] .news-ticker-badge span { color: #b91c1c; } /* Anleitungsblock: dunkle Glasflaeche wird hell */ :root[data-theme="light"] .howto { background: #ffffff; border-color: #d7d1c9; } :root[data-theme="light"] .ht-txt { color: #8a4508; } :root[data-theme="light"] .ht-step-t { color: #14202e; } :root[data-theme="light"] .ht-step-b { color: #2b3746; } :root[data-theme="light"] .howto-note { color: #047857; } :root[data-theme="light"] .howto-followup { background: #f2efea; border-color: #d7d1c9; } :root[data-theme="light"] .hf-t { color: #14202e; } :root[data-theme="light"] .hf-b { color: #2b3746; } :root[data-theme="light"] .hf-link, :root[data-theme="light"] .hf-link span { color: #8a4508; } /* Symbolflaeche der Kategoriekarten */ :root[data-theme="light"] .cat-ico { background: rgba(168,80,10,.10); border-color: rgba(138,69,8,.35); color: #8a4508; } /* home-sections.css setzt diese Texte spaeter, daher mit Vorrang. */ :root[data-theme="light"] body.home-page .page-section .section-sub, :root[data-theme="light"] body.home-page .page-section .section-lead, :root[data-theme="light"] body.home-page .section-sub { color: #2b3746 !important; } :root[data-theme="light"] body.home-page .cta-bridge p, :root[data-theme="light"] body.home-page .faq-cta p, :root[data-theme="light"] body.home-page .seo-cta p { color: #2b3746 !important; } :root[data-theme="light"] body.home-page .cta-bridge h3, :root[data-theme="light"] body.home-page .faq-cta h3, :root[data-theme="light"] body.home-page .seo-cta h3 { color: #14202e !important; } /* Laenderkarten tragen ihre Farben im style-Attribut, deshalb Vorrang. */ :root[data-theme="light"] body.home-page .country-card [style*="#9aa6bd"], :root[data-theme="light"] body.home-page .country-card [style*="#94a3b8"] { color: #5a6673 !important; } :root[data-theme="light"] body.home-page .country-card [style*="#f59e0b"] { color: #8a4508 !important; } :root[data-theme="light"] body.home-page .section [style*="#f59e0b"], :root[data-theme="light"] body.home-page .page-section a[style*="#f59e0b"] { color: #8a4508 !important; } :root[data-theme="light"] body.home-page .nav-submenu { background: #ffffff; border-color: #d7d1c9; } :root[data-theme="light"] body.home-page .nav-submenu a { color: #14202e; } /* ------------------------------------------------------------------- Nachtrag Startseiten, live gemessen am 13.09. ------------------------------------------------------------------- */ /* Bandfarben der Abschnitte: im Dunkeln Bernstein-Hauch, hier ein warmer Ton auf dem hellen Grund. Das ist die sichtbare Trennung der Sektionen, die Joerg angefragt hatte. */ :root[data-theme="light"] body.home-page { --home-surface-0: transparent; --home-surface-1: rgba(162, 82, 10, 0.035); --home-surface-2: rgba(162, 82, 10, 0.075); --color-text-muted: #5a6673; --red: #b91c1c; } /* Der Absatz unter der Laenderueberschrift teilt sich die Regel mit .section-sub und .section-lead, stand aber nicht in der Uebersteuerung. */ :root[data-theme="light"] body.home-page .page-section #countryHubTitle + p { color: #2b3746 !important; } /* Laenderliste: der Ruhezustand ist schon dunkel, nur der Zeigerzustand stand noch auf dem Signalorange aus der dunklen Fassung. */ :root[data-theme="light"] .seo-country-grid li a:hover { color: #8a4508; } /* Nachrichtenstreifen wird vom Skript eingespielt, darum im Quelltext der Seite nur als Vorlage sichtbar. */ :root[data-theme="light"] .news-item-time { color: #5a6673; } :root[data-theme="light"] .news-item-cat { color: #8a4508; } /* Zustaende der Zeitspannen-Knoepfe und des Mehr-Verweises im Lagebild. Der Ruhezustand stand schon hell, die Seite setzt Zeiger- und Gedrueckt-Zustand aber spezifischer. */ :root[data-theme="light"] .lagebild .lb-ranges button[aria-pressed="true"] { color: #8a4508; background: rgba(162,82,10,.12); border-color: rgba(162,82,10,.5); box-shadow: none; } :root[data-theme="light"] .lagebild .lb-ranges button:hover { color: #7a3d07; border-color: rgba(162,82,10,.45); } :root[data-theme="light"] .lagebild .lb-more { color: #8a4508; } :root[data-theme="light"] .lagebild .lb-more:hover { color: #14202e; } /* ------------------------------------------------------------------- Knopfschrift: weiss statt fast schwarz Die Hell-Palette faerbt die Bernstein-Tokens dunkel, damit Schrift auf hellem Grund 4,5:1 erreicht. Die Knoepfe lesen dieselben Tokens als FLAECHE. Ihre mitgelieferte fast schwarze Schrift fiel damit auf 3,4 bis 3,7:1. Sie bekommen darum weisse Schrift wie alle anderen Knoepfe der Hell-Variante: auf #a8500a sind das 5,5:1, auf dem hellsten Halt des Verlaufs #ad5708 noch 5,07:1. Das hellere #c2660a der Palette waere mit 4,04:1 zu schwach, darum steht hier ein eigener Halt. Die ausgelieferte unified-header.css setzt uebrigens #0b0705, obwohl die Entwicklerfassung #fff sagt. Die beiden Dateien sind auseinander gelaufen, das gehoert getrennt nachgezogen. Live gemessen am 13.09. ------------------------------------------------------------------- */ :root[data-theme="light"] .uh-cta, :root[data-theme="light"] .uh-cta span, :root[data-theme="light"] .uh-mobile-cta a, :root[data-theme="light"] .uh-mobile-cta a span, :root[data-theme="light"] .btn:not(.btn-secondary):not(.btn-ghost), :root[data-theme="light"] .btn:not(.btn-secondary):not(.btn-ghost) span, :root[data-theme="light"] .nav-cta, :root[data-theme="light"] .cta, :root[data-theme="light"] .cta span, :root[data-theme="light"] .hero-sticky-cta, :root[data-theme="light"] .hero-sticky-cta span, :root[data-theme="light"] .calc-sticky-cta-btn, :root[data-theme="light"] .gcw-trigger-cta, :root[data-theme="light"] .gcw-next, :root[data-theme="light"] .gcw-pill.is-active, :root[data-theme="light"] .methodik-page .meth-section-cta .btn-primary, :root[data-theme="light"] .cta-btn, :root[data-theme="light"] .cta-btn span, :root[data-theme="light"] .lex-mid-cta-btn, :root[data-theme="light"] .howto-step-num, :root[data-theme="light"] .howto-steps li::before { /* Die Flaeche steht hier ausdruecklich, obwohl die Tokens denselben Bernstein liefern. So ist im Quelltext nachrechenbar, worauf die weisse Schrift steht, und das Tor muss nicht raten. Das !important ist noetig, nicht bequem: die Startseite setzt .btn { color: #0c1320 !important }, und im Lexikon ist die Regel fuer Verweise im Fliesstext (.article-wrap a) spezifischer als diese hier. Ohne !important stand im Lexikon Bernstein auf Bernstein, also 1,0:1: der Knopf war unlesbar. */ background-image: linear-gradient(135deg, #a8500a, #ad5708) !important; color: #ffffff !important; } /* =================================================================== Dunkle Flaechen und Dunkelmodus-Schatten, 13.09.2026 Joerg: "im hellen Modus sind bei einigen Seiten die Schattierungen noch nicht richtig, die verwendeten Bilder sehen nicht gut aus." Zwei Ursachen, beide hier behoben. Erstens: Bausteine, deren Flaeche als Literal in einem Verlauf steht (rgba(12,19,32,.92) und Verwandte). Ich hatte ihre Schrift auf dunkles Blau gestellt, die Flaeche aber dunkel gelassen. Ergebnis: dunkle Schrift auf dunkler Karte. Das Tor sah es nicht, weil es Regeln an ihrer color-Angabe prueft; Stufe E sucht solche Flaechen jetzt eigenstaendig. Zweitens: Schatten aus dem Dunkelmodus. Schwarz mit 30 bis 55 Prozent liegt auf dunklem Grund unsichtbar, auf hellem Grund wirkt es wie ein Schmutzrand. Sie werden hier auf das dunkle Blau der Palette umgestellt und deutlich leiser. =================================================================== */ /* Tiefenkarten der Laenderseiten. Vorher rgba(12,19,32,.92). */ :root[data-theme="light"] .deepdive-card { background-image: none !important; background-color: #ffffff !important; border-color: #d7d1c9 !important; box-shadow: 0 1px 2px rgba(20, 32, 46, .04), 0 6px 18px rgba(20, 32, 46, .07) !important; } :root[data-theme="light"] .deepdive-card:hover { background-color: #fffdf8 !important; border-color: #c9c2b8 !important; box-shadow: 0 2px 6px rgba(20, 32, 46, .06), 0 12px 28px rgba(20, 32, 46, .10) !important; } /* Klebeleiste der Foerder-Rechner. Sichtbar nur am Handy, dort stand sie dunkel unter der Seite und trug dunkle Schrift. */ :root[data-theme="light"] .calc-sticky-cta { background-image: none !important; background-color: rgba(255, 255, 255, .97) !important; border-top: 1px solid #d7d1c9 !important; box-shadow: 0 -6px 22px rgba(20, 32, 46, .10) !important; } /* Schliesskreuz im Lexikon-Fenster: der dunkle Hover stammt aus einer @media(prefers-color-scheme:dark)-Regel und schlaegt sonst durch, wenn das System dunkel steht und der Leser hell gewaehlt hat. */ :root[data-theme="light"] .gos-lex-close:hover { background: #f2efea !important; color: #14202e !important; } /* Schatten: leiser und im Blau der Palette statt in Schwarz. */ :root[data-theme="light"] .gos-scroll-top { box-shadow: 0 6px 18px rgba(20, 32, 46, .16) !important; } :root[data-theme="light"] .gos-journey-bar { box-shadow: 0 -2px 10px rgba(20, 32, 46, .08) !important; } :root[data-theme="light"] .gos-journey-meta { box-shadow: 0 -2px 10px rgba(20, 32, 46, .06) !important; } :root[data-theme="light"] .cat-ico { box-shadow: 0 2px 8px rgba(20, 32, 46, .10) !important; } :root[data-theme="light"] .section-indicator, :root[data-theme="light"] .gos-nl-card, :root[data-theme="light"] .gos-meth-reminder { box-shadow: 0 6px 20px rgba(20, 32, 46, .08) !important; } /* Bilder: die Platte unter jedem Bild war #0a0f1a. Bei Fotos sieht man sie nicht, weil das Foto sie deckt; an jeder Kante und bei jedem Ladevorgang blitzt sie aber dunkel auf. Im Hellmodus traegt sie den hellen Alt-Ton. */ :root[data-theme="light"] .visiwave-img { background: #f2efea !important; box-shadow: 0 6px 20px rgba(20, 32, 46, .10) !important; } /* Diagramme sind die Ausnahme: sie sind mit dunklem Grund gerendert. Statt sie als schwarzen Block in die helle Seite zu setzen, bekommen sie einen bewussten Rahmen, also eine dunkle Tafel mit Rand, Radius und Abstand. Damit liest sich das Bild als Abbildung, nicht als Loch. */ :root[data-theme="light"] picture.visiwave-img[data-vw-key^="chart-"] { background: #0a0f1a !important; padding: 14px !important; border: 1px solid #cfc8be !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(20, 32, 46, .10) !important; } :root[data-theme="light"] picture.visiwave-img[data-vw-key^="chart-"] img { display: block; border-radius: 10px; } @media (max-width: 640px) { :root[data-theme="light"] picture.visiwave-img[data-vw-key^="chart-"] { padding: 8px !important; border-radius: 12px !important; } } /* =================================================================== Der kleine Rechner (.gcw-) im Hellmodus, 13.09.2026 Er oeffnet sich als Fenster ueber der Seite und war der schwerste Fall: seine Schale traegt einen dunklen Verlauf als Literal, waehrend Schrift und Werte aus den Tokens kommen, die im Hellmodus dunkel sind. Ergebnis war dunkle Schrift auf dunkler Schale, praktisch unlesbar. Alle Flaechen darin sind als rgba(255,255,255,0.0x) gebaut, die auf hellem Grund verschwinden; sie bekommen darum eigene helle Werte statt Weiss auf Weiss. Der Schleier hinter dem Fenster bleibt dunkel: er trennt das Fenster von der Seite, das ist seine Aufgabe. =================================================================== */ :root[data-theme="light"] .gcw-shell { background: linear-gradient(180deg, #ffffff 0%, #fbf9f6 100%) !important; border: 1px solid #d7d1c9 !important; box-shadow: 0 24px 60px rgba(20, 32, 46, .18) !important; } :root[data-theme="light"] .gcw-head, :root[data-theme="light"] .gcw-foot { background: #f7f5f2 !important; border-color: #d7d1c9 !important; } :root[data-theme="light"] .gcw-title { color: #14202e; } :root[data-theme="light"] .gcw-step-sub, :root[data-theme="light"] .gcw-fld-hint, :root[data-theme="light"] .gcw-crumb-sep, :root[data-theme="light"] .gcw-trigger-meta, :root[data-theme="light"] .gcw-result-eyebrow, :root[data-theme="light"] .gcw-result-sub, :root[data-theme="light"] .gcw-result-table th, :root[data-theme="light"] .gcw-result-box h4, :root[data-theme="light"] .gcw-result-box small, :root[data-theme="light"] .gcw-roi-grid strong { color: #5a6673 !important; } :root[data-theme="light"] .gcw-close, :root[data-theme="light"] .gcw-back, :root[data-theme="light"] .gcw-restart, :root[data-theme="light"] .gcw-pill { background: #ffffff !important; border-color: #d7d1c9 !important; color: #14202e !important; } :root[data-theme="light"] .gcw-close:hover, :root[data-theme="light"] .gcw-close:focus-visible, :root[data-theme="light"] .gcw-pill:hover, :root[data-theme="light"] .gcw-back:hover:not(:disabled), :root[data-theme="light"] .gcw-restart:hover { background: rgba(162, 82, 10, .10) !important; border-color: rgba(162, 82, 10, .38) !important; color: #8a4508 !important; } :root[data-theme="light"] .gcw-crumb { color: #5a6673; } :root[data-theme="light"] .gcw-crumb-num { background: #eae5dd; color: inherit; } :root[data-theme="light"] .gcw-crumb.is-done { color: #14202e; } :root[data-theme="light"] .gcw-crumb.is-done .gcw-crumb-num { background: rgba(4, 120, 87, .10); color: #04613f; } :root[data-theme="light"] .gcw-crumb:hover:not(.is-locked):not(.is-active) { background: rgba(162, 82, 10, .08); color: #14202e; } :root[data-theme="light"] .gcw-crumb-result.is-active { color: #04613f; background: rgba(4, 120, 87, .08); border-color: rgba(4, 120, 87, .32); } :root[data-theme="light"] .gcw-crumb-result.is-active .gcw-crumb-num { background: #047857; color: #ffffff; } /* Flaechen im Rumpf: vorher Weiss mit 2 bis 4 Prozent, auf hellem Grund unsichtbar. */ :root[data-theme="light"] .gcw-result-box, :root[data-theme="light"] .gcw-result-roi, :root[data-theme="light"] .gcw-result-alt, :root[data-theme="light"] .gcw-result-crosssell, :root[data-theme="light"] .gcw-roi-grid > div, :root[data-theme="light"] .gcw-result-sensitivity .gcw-brent-out { background: #ffffff !important; border-color: #d7d1c9 !important; } :root[data-theme="light"] .gcw-result-box .gcw-result-val { color: #14202e; } :root[data-theme="light"] .gcw-result-box--foerder { background: rgba(4, 120, 87, .08) !important; border-color: rgba(4, 120, 87, .30) !important; } :root[data-theme="light"] .gcw-result-box--eigen { background: rgba(162, 82, 10, .08) !important; border-color: rgba(162, 82, 10, .30) !important; } :root[data-theme="light"] .gcw-result-box--eigen .gcw-result-val, :root[data-theme="light"] .gcw-fld-val, :root[data-theme="light"] .gcw-fld-hint strong, :root[data-theme="light"] .gcw-emphasis, :root[data-theme="light"] .gcw-result-bignum, :root[data-theme="light"] .gcw-result-sensitivity h3, :root[data-theme="light"] .gcw-trigger-card h3, :root[data-theme="light"] .gcw-step-icon, :root[data-theme="light"] .gcw-result-content a { color: #8a4508; } :root[data-theme="light"] .gcw-yes, :root[data-theme="light"] .gcw-result-box--foerder .gcw-result-val { color: #047857; } :root[data-theme="light"] .gcw-no { color: #5a6673; } :root[data-theme="light"] .gcw-result-error { color: #b91c1c; } :root[data-theme="light"] .gcw-roi-note { background: rgba(4, 120, 87, .08); border-left-color: #047857; } :root[data-theme="light"] .gcw-result-alt { border-left-color: rgba(4, 120, 87, .5) !important; } /* Schieberegler: Bahn hell, Griff mit hellem Ring statt dunklem. */ :root[data-theme="light"] .gcw-field input[type="range"], :root[data-theme="light"] .gcw-result-sensitivity input[type="range"] { background: #e3ded6 !important; } :root[data-theme="light"] .gcw-field input[type="range"]::-webkit-slider-thumb, :root[data-theme="light"] .gcw-result-sensitivity input[type="range"]::-webkit-slider-thumb { background: #a8500a; border-color: #ffffff; box-shadow: 0 2px 8px rgba(20, 32, 46, .22); } :root[data-theme="light"] .gcw-field input[type="range"]::-moz-range-thumb { background: #a8500a; border-color: #ffffff; box-shadow: 0 2px 8px rgba(20, 32, 46, .22); } /* Baender der Startseite (Schritt 2 des Aufraeumens, 13.09.2026). Die Dunkel-Werte stehen in assets/gos-grid.css, die Hell-Werte hier. Ruhig traegt das Lagebild, warm den Rechner, die Linie trennt zwei Wegweiser voneinander. */ :root[data-theme="light"] body.home-page { --band-ruhig: rgba(162, 82, 10, .035); --band-warm: rgba(162, 82, 10, .085); --band-linie: #e6e0d7; } /* gos:hom-light v1 (17.09.2026) — Hell-Tokens der Heizoelpreis-Karte. Spiegel des Blocks in heating-oil-map.css (gleiche Werte), damit das Kontrast-Tor sie sieht. Bei Farbaenderung BEIDE Stellen ziehen. */ :root[data-theme="light"] .gos-hom { --hom-s0: #e99762; --hom-s1: #d8783c; --hom-s2: #bd5b22; --hom-s3: #974316; --hom-s4: #682c0c; --hom-i0: #2b1407; --hom-i1: #2b1407; --hom-i2: #ffffff; --hom-i3: #ffffff; --hom-i4: #ffffff; --hom-nodata: #eae5dd; --hom-nodata-ink: #77808c; --hom-own-ink: #8a6420; --hom-surface: #ffffff; --hom-line: #d7d1c9; --hom-ink: #14202e; --hom-muted: #5a6673; }