/* ============================================================================ heldin-ui.css — Geteiltes Stylesheet für Theme- (hell/dunkel) und Sprach-Umschaltung (DE/EN) über alle Seiten der heldin-resilience-lab-Website. ---------------------------------------------------------------------------- Stand: 9. Juni 2026 Geladen von: index · plattform · impact · threat-news/* · beide CVs · beide Knowledge Graphs (dort nur Theme). THEME-KONZEPT (wichtig): Dark-first bleibt Default (Brand). Das Light-Theme greift über html[data-theme="light"] und arbeitet mit zwei Hebeln: 1) MARKEN-TOKENS DREHEN: --midnight/--deep-indigo/--indigo (Flächen) und --lavender (Text) werden im Light-Theme auf Hell-auf-Dunkel-Werte umdefiniert. Da ALLE Seiten konsequent diese Tokens nutzen (Hintergründe = --midnight/--deep-indigo, Text = --lavender bzw. rgba(var(--text-rgb),…)), kippt damit praktisch die gesamte Seite automatisch — ohne dass jede Karte/Sektion einzeln benannt werden muss. 2) RGBA-TRIPEL DREHEN: die in den Seiten auf rgba(var(--*-rgb),…) umgestellten Opazitäts-Töne (Text, Ränder, Overlays) kippen mit. Anschließend werden nur die WENIGEN doppelt belegten Stellen zurückgesetzt: · Button-Text auf Crimson (muss hell bleiben), · die helle Sektion S8 (.light-section) bleibt hell. Dark-Werte stehen als Kommentar zur Orientierung in den Seiten selbst. Dieses Stylesheet wird als LETZTES im eingebunden → gewinnt bei gleicher Spezifität. ============================================================================ */ /* ── RGB-Tripel: Default (Dark) ────────────────────────────────────────────── Füttern die rgba(var(--*-rgb), )-Aufrufe in den Seiten. */ :root { --text-rgb: 237,232,245; /* Lavender-Text/-Ränder auf Dunkel */ --surface-rgb: 15,8,38; /* dunkle, transluzente Flächen/Overlays */ --indigo-rgb: 45,27,105; /* Indigo-Tints */ --teal-rgb: 126,200,200; /* Teal als rgba */ --gold-rgb: 255,215,0; /* Gold als rgba */ /* ── Gemeinsame Marken-Tokens · EINE Quelle für ALLE heldin.eu-Seiten ── Wird NACH den Inline-Styles jeder Seite geladen und überschreibt damit abweichende Inline-:root-Werte → einheitliche Farben/Abstände/Breite („aus einem Guss"). Das Light-Theme weiter unten dreht Flächen & Farben. */ --midnight: #0F0826; --deep-indigo: #1A0F3C; --deep: #1A0F3C; /* Alias, von CV-Seiten genutzt */ --indigo: #2D1B69; --lavender: #EDE8F5; --gold: #FFD700; --teal: #7EC8C8; --crimson: #B91E32; /* einheitliches, kontraststarkes Crimson (WCAG-AA auch auf Hell) */ --radius: 10px; --pad-x: clamp(24px, 6vw, 80px); --pad-y: clamp(56px, 8vw, 104px); --content-max: min(1500px, 94vw); } /* ── i18n: jeweils inaktive Sprache ausblenden ─────────────────────────────── (Auch inline im jeder Seite dupliziert → kein Doppeltext-Flash.) */ html[lang="de"] .i18n-en { display: none; } html[lang="en"] .i18n-de { display: none; } /* ════════════════════════════════════════════════════════════════════════════ TOGGLE-UI (wird per heldin-ui.js automatisch in die Nav injiziert). Nutzt selbst nur Tokens/rgba-Tripel → funktioniert in beiden Themes. ════════════════════════════════════════════════════════════════════════════ */ .hui-group { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .hui-lang { display: inline-flex; align-items: stretch; border: .5px solid rgba(var(--text-rgb), .28); border-radius: 4px; overflow: hidden; } .hui-lang button { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: rgba(var(--text-rgb), .62); border: 0; padding: 5px 9px; cursor: pointer; line-height: 1; transition: background .18s ease, color .18s ease; } .hui-lang button + button { border-left: .5px solid rgba(var(--text-rgb), .22); } .hui-lang button:hover { color: rgba(var(--text-rgb), .92); } .hui-lang button[aria-pressed="true"] { background: var(--teal); color: var(--midnight); } .hui-theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; background: transparent; color: rgba(var(--text-rgb), .72); border: .5px solid rgba(var(--text-rgb), .28); border-radius: 4px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .hui-theme:hover { color: var(--teal); border-color: rgba(var(--teal-rgb), .6); } .hui-theme svg { width: 15px; height: 15px; display: block; } /* Nur das passende Icon zeigen: Dark → Sonne (Klick = hell), Light → Mond */ .hui-theme .i-moon { display: none; } .hui-theme .i-sun { display: block; } html[data-theme="light"] .hui-theme .i-sun { display: none; } html[data-theme="light"] .hui-theme .i-moon { display: block; } @media (max-width: 420px) { .hui-group { gap: 7px; } .hui-lang button { padding: 5px 7px; } } /* Schmale Screens: Marke + Umschalter + CTA + Hamburger würden die Nav-Bar überfüllen. Der Crimson-CTA ist im aufklappbaren Mobile-Menü enthalten → in der Top-Bar ausblenden, damit die Umschalter sauber Platz haben. */ @media (max-width: 600px) { nav .nav-cta { display: none; } } /* ════════════════════════════════════════════════════════════════════════════ LIGHT-THEME ════════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* (1) Marken-Tokens drehen — Flächen werden hell, Text wird dunkel. --midnight/--deep/--deep-indigo/--indigo decken alle Token-Namen ab, die in den verschiedenen Seiten für Flächen verwendet werden. */ --midnight: #EDE8F5; /* Seiten-/Karten-Grund (Lavender, nie #fff) */ --deep: #E3DCF2; /* CV nutzt --deep */ --deep-indigo: #E3DCF2; /* alternierende Sektionen / Karten in Dark-Design */ --indigo: #D6CEEC; /* Tints/Texturen */ --lavender: #160C2E; /* war heller Text → jetzt dunkle „Tinte" */ --teal: #1F6B6B; /* dunkleres Teal für Kontrast auf Hell */ --gold: #8A6D00; /* dunkleres Gold für Kontrast */ --gold-dim: #8A6D00; /* (2) RGB-Tripel drehen */ --text-rgb: 22,12,46; /* dunkler Text/Ränder */ --surface-rgb: 237,232,245; /* zuvor dunkle Overlays → hell */ --indigo-rgb: 205,197,230; --teal-rgb: 31,107,107; --gold-rgb: 138,109,0; } /* Karten minimal vom Seitengrund abheben (sanftes Off-White) */ html[data-theme="light"] .card, html[data-theme="light"] .news-card, html[data-theme="light"] .research-tile { background: #FAF8FE; } /* (Fixup A) Button-Text auf Crimson MUSS hell bleiben (Crimson bleibt dunkelrot). */ html[data-theme="light"] .btn-crimson, html[data-theme="light"] .nav-cta { color: #EDE8F5; } /* (Fixup B) S8 — die helle Sektion bleibt hell (kein Invertieren). Da --lavender/--midnight gedreht sind, hier die konkreten Werte zurücksetzen. */ html[data-theme="light"] .light-section { background: #E3DCF2; color: #160C2E; } html[data-theme="light"] .light-section h2 { color: #160C2E; } html[data-theme="light"] .light-section p { color: rgba(15,8,38,.74); } html[data-theme="light"] .light-section .overline { color: #5a4b8a; } /* (Fixup C) Binär-Textur dezent halten (dunkles Indigo auf Hell wäre zu laut) */ html[data-theme="light"] .texture { color: #CFC7E6; opacity: .55; } /* (Fixup D) Sanfter Schatten statt hartem Schwarz auf hellen „Papier"-Flächen */ html[data-theme="light"] .cv { box-shadow: 0 16px 48px rgba(45,27,105,.16), 0 4px 14px rgba(45,27,105,.10); } /* ============================================================================ Pitch-/Erklärvideo-Embed (sprachabhängiges