/* === GCBoK Dark-Theme === */ /* Aktiviert durch: Setzt die semantischen CSS-Variablen aus main.css :root um. Alle Komponenten, die var(--text-strong), var(--c-paper) etc. nutzen, flippen automatisch. */ :root[data-theme="dark"] { /* Hintergrund */ --c-paper: #0F172A; /* slate-900 als Haupthintergrund */ --c-slate-50: #1E293B; /* slate-800 */ --c-slate-100: #1E293B; --c-slate-200: #334155; --c-line: rgba(255, 255, 255, 0.10); /* Text */ --text-strong: #F1F5F9; /* slate-100 */ --text-body: #CBD5E1; /* slate-300 */ --text-muted: #94A3B8; /* slate-400 */ /* Links */ --link-color: #FDBA74; /* amber-soft */ --link-hover: #FFFFFF; --link-deco: var(--c-amber); /* Code / Tables */ --code-bg: rgba(255, 255, 255, 0.08); --code-fg: #E2E8F0; --table-row: rgba(255, 255, 255, 0.04); --border-soft: rgba(255, 255, 255, 0.10); } /* Body-Background */ :root[data-theme="dark"] body { background: #0F172A; color: var(--text-body); } /* Headlines */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--text-strong); } /* Strong / Em */ :root[data-theme="dark"] strong { color: var(--text-strong); } :root[data-theme="dark"] em { color: var(--c-amber-soft); } /* Links */ :root[data-theme="dark"] a { color: var(--link-color); } :root[data-theme="dark"] a:hover { color: var(--link-hover); } /* Blockquotes */ :root[data-theme="dark"] blockquote { border-color: var(--c-amber); border-left-color: var(--c-amber); background: rgba(232, 99, 42, 0.08); color: var(--c-amber-soft); } /* Code inline */ :root[data-theme="dark"] code { background: var(--code-bg); color: var(--code-fg); } /* Pre / code blocks */ :root[data-theme="dark"] pre { background: rgba(255, 255, 255, 0.06); color: var(--code-fg); } /* Tables (gc-table.css override) */ :root[data-theme="dark"] .table--gc { --gc-border-soft: rgba(255, 255, 255, 0.10); --gc-green-soft: rgba(10, 127, 92, 0.2); --gc-green-deep: #6EE7B7; --gc-slate-100: rgba(30, 41, 59, 0.5); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } :root[data-theme="dark"] .table--gc thead th { background: rgba(10, 127, 92, 0.2); color: #6EE7B7; border-bottom-color: #6EE7B7; } :root[data-theme="dark"] .table--gc tbody tr:hover { background: rgba(255, 255, 255, 0.04); } :root[data-theme="dark"] .table--gc td { color: var(--text-body); } /* Skip-link */ :root[data-theme="dark"] .skip-link { background: #1E293B; color: #F1F5F9; } /* Site-Footer (ist bereits dark-surface — bleibt unverändert) */ :root[data-theme="dark"] .site-footer { background: #0B1120; } /* Section backgrounds */ :root[data-theme="dark"] .section { background: transparent; } :root[data-theme="dark"] .section--ink { background: #0B1120; } /* Banner — Dark-Mode (überschreibt gc-banner.css prefers-color-scheme) */ :root[data-theme="dark"] .gc-banner { background: #0F172A !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] .gc-banner__title { color: #F1F5F9 !important; } :root[data-theme="dark"] .gc-banner__subtitle { color: #94A3B8 !important; } :root[data-theme="dark"] .gc-banner__eyebrow { color: #94A3B8 !important; } :root[data-theme="dark"] .gc-banner__quad { color: #E2E8F0 !important; } :root[data-theme="dark"] .gc-banner__quad--green { border-bottom-color: rgba(10, 127, 92, 0.25) !important; } :root[data-theme="dark"] .gc-banner__quad--amber { border-bottom-color: rgba(217, 119, 6, 0.25) !important; } :root[data-theme="dark"] .gc-banner__quad--blue { border-bottom-color: rgba(37, 99, 235, 0.25) !important; } :root[data-theme="dark"] .gc-banner__quad--gray { border-bottom-color: rgba(107, 112, 128, 0.25) !important; } /* Header — Dark-Mode: dunkler Hintergrund wie Footer, Glow-Linie bleibt */ :root[data-theme="dark"] header.site-header.site-header--gcbok { background: linear-gradient(180deg, #0B1120 0%, #0F172A 100%) !important; border-bottom: none !important; /* Glow-Abschluss-Linie: grüner Schein, etwas staerker im Dark */ box-shadow: inset 0 -2px 0 rgba(10,127,92,0.25), 0 2px 16px rgba(0,0,0,0.4) !important; } :root[data-theme="dark"] header.site-header--gcbok .site-header__row--brand { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] header.site-header--gcbok .site-header__row--nav { border-top-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] header.site-header--gcbok .nav-gcbok__link { color: #E2E8F0 !important; } :root[data-theme="dark"] header.site-header--gcbok .nav-gcbok__link:hover, :root[data-theme="dark"] header.site-header--gcbok .nav-gcbok__link:focus { background: rgba(10, 127, 92, 0.2) !important; color: #6EE7B7 !important; } :root[data-theme="dark"] header.site-header--gcbok .brand__name { color: #F1F5F9 !important; } :root[data-theme="dark"] header.site-header--gcbok .brand__suffix { color: #94A3B8 !important; } /* Mermaid-Diagramme im Dark-Mode */ :root[data-theme="dark"] .mermaid { background: rgba(255, 255, 255, 0.02); border-radius: var(--radius); }