/* Event Recap — minimale Token-Anpassung an Bulma 1.x Nur Brand-Inputs setzen, alles andere leitet Bulma automatisch ab. */ :root { /* === DEFAULTS — Kunden-Anpassungen über Theme-Dropdown + Custom CSS im Admin === */ /* Primary = neutrale Default-Rolle (Buttons, Tags, Hero) — leitet sich vom Scheme ab */ --bulma-primary-h: 220; --bulma-primary-s: 12%; --bulma-primary-l: 78%; /* Link = Markenakzent (Teal) — Eyebrows, aktive States, Inline-Links, AI-Badge */ --bulma-link-h: 175; --bulma-link-s: 70%; --bulma-link-l: 45%; /* Akzent als fertige Color-Tokens — vermeidet hsl(...) Wiederholung */ --accent: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)); --accent-tint-12: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 0.12); --accent-tint-18: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 0.18); --accent-tint-25: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 0.25); /* Schema (Hintergrund-Hue + Sättigung) — komplett neutral, kein Farbstich */ --bulma-scheme-h: 0; --bulma-scheme-s: 0%; } /* === Theme: Light / Dark / Auto === Steuerung über data-theme auf : → auto (folgt System via prefers-color-scheme) → erzwingt Light → erzwingt Dark → folgt System (explizit) Bulma 1.x liefert Light-Tokens als Default. Dark-Werte werden hier in einem benannten Custom-Property-Set definiert und je nach Modus auf die Standard-Tokens gespiegelt. */ /* Dark-Token-Werte (zentral, einmal definiert) */ :root { --theme-dark-scheme-main-l: 6%; --theme-dark-scheme-main-bis-l: 9%; --theme-dark-scheme-main-ter-l: 12%; --theme-dark-background-l: 12%; --theme-dark-background-hover-l: 14%; --theme-dark-background-active-l: 16%; --theme-dark-text-l: 78%; --theme-dark-text-strong-l: 96%; --theme-dark-text-weak-l: 56%; --theme-dark-text-invert-l: 8%; --theme-dark-border-l: 28%; --theme-dark-border-weak-l: 20%; --theme-dark-border-hover-l: 42%; --theme-dark-light-l: 14%; --theme-dark-light-invert-l: 96%; --theme-dark-dark-l: 90%; --theme-dark-dark-invert-l: 8%; } /* (1) data-theme="dark" → erzwingt Dark */ html[data-theme="dark"] { --bulma-scheme-main-l: var(--theme-dark-scheme-main-l); --bulma-scheme-main-bis-l: var(--theme-dark-scheme-main-bis-l); --bulma-scheme-main-ter-l: var(--theme-dark-scheme-main-ter-l); --bulma-background-l: var(--theme-dark-background-l); --bulma-background-hover-l: var(--theme-dark-background-hover-l); --bulma-background-active-l: var(--theme-dark-background-active-l); --bulma-text-l: var(--theme-dark-text-l); --bulma-text-strong-l: var(--theme-dark-text-strong-l); --bulma-text-weak-l: var(--theme-dark-text-weak-l); --bulma-text-invert-l: var(--theme-dark-text-invert-l); --bulma-border-l: var(--theme-dark-border-l); --bulma-border-weak-l: var(--theme-dark-border-weak-l); --bulma-border-hover-l: var(--theme-dark-border-hover-l); --bulma-light-l: var(--theme-dark-light-l); --bulma-light-invert-l: var(--theme-dark-light-invert-l); --bulma-dark-l: var(--theme-dark-dark-l); --bulma-dark-invert-l: var(--theme-dark-dark-invert-l); } /* (2) data-theme="auto" oder kein Attribut → folgt System */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]), html[data-theme="auto"] { --bulma-scheme-main-l: var(--theme-dark-scheme-main-l); --bulma-scheme-main-bis-l: var(--theme-dark-scheme-main-bis-l); --bulma-scheme-main-ter-l: var(--theme-dark-scheme-main-ter-l); --bulma-background-l: var(--theme-dark-background-l); --bulma-background-hover-l: var(--theme-dark-background-hover-l); --bulma-background-active-l: var(--theme-dark-background-active-l); --bulma-text-l: var(--theme-dark-text-l); --bulma-text-strong-l: var(--theme-dark-text-strong-l); --bulma-text-weak-l: var(--theme-dark-text-weak-l); --bulma-text-invert-l: var(--theme-dark-text-invert-l); --bulma-border-l: var(--theme-dark-border-l); --bulma-border-weak-l: var(--theme-dark-border-weak-l); --bulma-border-hover-l: var(--theme-dark-border-hover-l); --bulma-light-l: var(--theme-dark-light-l); --bulma-light-invert-l: var(--theme-dark-light-invert-l); --bulma-dark-l: var(--theme-dark-dark-l); --bulma-dark-invert-l: var(--theme-dark-dark-invert-l); } } /* (3) data-theme="light" → tut nichts (Bulma-Defaults bleiben) */ /* (4) data-theme="brand" → Dark-Niveau + Brand-Tönung Hue/Sättigung kann pro Seite per inline style überschrieben werden: */ html[data-theme="brand"] { --bulma-scheme-h: 180; --bulma-scheme-s: 30%; /* Text bleibt neutral — Scheme-Hue wird für Body-Text auf 0 gesetzt */ --bulma-body-color: hsl(var(--bulma-scheme-h), 0%, var(--bulma-text-l)); --bulma-scheme-main-l: var(--theme-dark-scheme-main-l); --bulma-scheme-main-bis-l: var(--theme-dark-scheme-main-bis-l); --bulma-scheme-main-ter-l: var(--theme-dark-scheme-main-ter-l); --bulma-background-l: var(--theme-dark-background-l); --bulma-background-hover-l: var(--theme-dark-background-hover-l); --bulma-background-active-l: var(--theme-dark-background-active-l); --bulma-text-l: var(--theme-dark-text-l); --bulma-text-strong-l: var(--theme-dark-text-strong-l); --bulma-text-weak-l: var(--theme-dark-text-weak-l); --bulma-text-invert-l: var(--theme-dark-text-invert-l); --bulma-border-l: var(--theme-dark-border-l); --bulma-border-weak-l: var(--theme-dark-border-weak-l); --bulma-border-hover-l: var(--theme-dark-border-hover-l); --bulma-light-l: var(--theme-dark-light-l); --bulma-light-invert-l: var(--theme-dark-light-invert-l); --bulma-dark-l: var(--theme-dark-dark-l); --bulma-dark-invert-l: var(--theme-dark-dark-invert-l); } /* Body-Farben dynamisch aus den (jetzt mode-abhängigen) Tokens berechnen */ :root { --bulma-body-background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l)); --bulma-body-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l)); } /* Body / html: harte Basis */ html, body { background-color: var(--bulma-body-background-color); color: var(--bulma-body-color); } /* Cards & Boxes: sichtbarer Rahmen aus Link/Brand abgeleitet (Bulma-Default-Shadow verschwindet sonst) */ .card, .box { border: 1px solid var(--accent-tint-25); box-shadow: none; } /* Navbar-Active: Markenakzent als Underline */ .navbar-item.is-active, a.navbar-item.is-active { background-color: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .navbar-item:hover { background-color: transparent; color: var(--accent); } /* Hero: dunkler Scheme statt knallig is-primary */ .hero.is-primary { background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l)); color: var(--bulma-text-strong); } .hero.is-primary .title, .hero.is-primary .subtitle { color: var(--bulma-text-strong); } .hero.is-primary .subtitle { color: var(--bulma-text); } /* === Mini-Helpers === */ /* Display-Schrift für Headlines */ .title, h1.title, h2.title, h3.title, .is-display { font-family: var(--bulma-family-secondary); letter-spacing: -0.02em; } /* Eyebrow-Label — Markenakzent */ .eyebrow { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--bulma-family-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .eyebrow__icon { width: 1em; height: 1em; } /* AI-Badge — Markenakzent */ .ai-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--accent-tint-12); border: 1px solid var(--accent-tint-25); color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--bulma-family-secondary); } /* AI-Badge auf farbigen Notifications: an Container-Text-Color anpassen */ .notification .ai-badge { background: color-mix(in srgb, currentColor 12%, transparent); border-color: color-mix(in srgb, currentColor 30%, transparent); color: currentColor; } .ai-badge__icon { width: 1rem; height: 1rem; font-size: 1rem; line-height: 1; } /* Speaker-Avatar (Monogramm) */ .avatar-mono { width: 48px; height: 48px; border-radius: 50%; background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l)); border: 1px solid hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l)); display: flex; align-items: center; justify-content: center; font-family: var(--bulma-family-secondary); font-weight: 600; font-size: 14px; color: var(--accent); flex-shrink: 0; } .avatar-mono.is-large { width: 72px; height: 72px; font-size: 20px; } /* Speaker-Avatar (Foto) */ .avatar-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .avatar-img.is-large { width: 72px; height: 72px; }