/* ============================================================================ LOOOM — Atmosphäre-Themes (Token-Overrides) Steuert die "Härte" der Optik über die Basis-Palette. Alle Komponenten lesen var(--ink) / var(--charcoal-*) / var(--cream) / var(--gray-*) / var(--accent-soft), daher genügt es, diese wenigen Basis-Tokens je Theme neu zu setzen — der Rest (semantische fg/bg, Karten, Borders) folgt automatisch. data-theme="hard" → Original-Optik (reines #0C0C10, höchster Kontrast) data-theme="soft" → Soft-Dark: wärmeres, angehobenes Tinten-Schwarz, mehr Luft data-theme="light" → Paper-Light: warmes Off-White, Indigo als Akzent ============================================================================ */ /* Laufzeit-Umschalten: CSS-Custom-Properties interpolieren NICHT — laufende color/background/filter-Transitions (auch die vorbestehenden auf .footer__col a, .loc, .team__card …) würden die Werte sonst beim Theme-Wechsel einfrieren. Daher während des Wechsels ALLE Transitions hart abschalten (js setzt kurz .theme-switching auf , entfernt es nach einem Doppel-rAF). */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } /* ======================================================================= SOFT DARK — die empfohlene 2026-Richtung Schwarz wird zu einem warmen, leicht violetten Tinten-Ton angehoben; Trennlinien werden heller → weniger harte Kanten, mehr Atmung. ======================================================================= */ [data-theme="soft"] { --ink: #17151E; --charcoal-900: #1F1D29; --charcoal-800: #282634; --charcoal-700: #353241; /* Borders/Divider: spürbar weicher */ --charcoal-600: #3C3949; --charcoal-500: #4E4B5D; /* Hairlines heller → sanftere Trennung */ --gray-500: #8C8997; --gray-400: #ADABB8; /* Cream bleibt der warme Off-White-Text — auf dem angehobenen Grund ergibt das einen weicheren Kontrast als auf reinem Schwarz. */ } [data-theme="soft"] .site-bg { background: radial-gradient(1100px 760px at 82% -8%, rgba(82,75,198,0.30), transparent 62%), radial-gradient(820px 580px at -5% 102%, rgba(58,51,168,0.16), transparent 58%), var(--ink); } [data-theme="soft"] .site-bg::after { opacity: 0.06; } /* ======================================================================= PAPER LIGHT — der warme Off-White-Modus aus dem Brand-Set (#F4F2EB) Volle Token-Umkehr. Indigo-Bänder (CTA), Foto-Kacheln und die Ökosystem-Platte bleiben bewusst dunkel als "spatial" Anker. ======================================================================= */ [data-theme="light"] { --ink: #F4F2EB; /* Paper als Seitengrund */ --charcoal-900: #FFFFFF; /* Karten heben sich als Weiß vom Paper ab */ --charcoal-800: #EDEBE2; /* leichte graue Chips / Input-Flächen */ --charcoal-700: #DEDBCF; /* Trennlinien / Divider */ --charcoal-600: #DAD7CB; /* Karten-Borders */ --charcoal-500: #CFCCBF; /* Hairlines */ --gray-500: #6E6B74; /* Captions (fg3) */ --gray-400: #54525B; /* Sekundärtext (fg2) */ --gray-300: #46444C; /* Nav-/Footer-Links Default */ --cream: #18171E; /* wird zum Primärtext (fg1) + Headlines */ --accent-soft: #4A43C0; /* statt heller Lavendel: lesbares Indigo */ --surface-card: #FFFFFF; --border-light: #D2CFC2; } /* helle Glas-Nav */ [data-theme="light"] .nav.is-stuck { background: rgba(244,242,235,0.82); border-bottom-color: var(--charcoal-700); } /* Cream-Wortmarke (PNG) → schwarze Silhouette auf hellem Grund */ [data-theme="light"] .nav__logo, [data-theme="light"] .footer__logo { filter: brightness(0); } /* heller Ambient-Hintergrund statt Indigo-auf-Schwarz */ [data-theme="light"] .site-bg { background: radial-gradient(1100px 760px at 82% -8%, rgba(82,75,198,0.10), transparent 60%), radial-gradient(820px 580px at -5% 102%, rgba(58,51,168,0.06), transparent 58%), var(--ink); } [data-theme="light"] .site-bg::after { opacity: 0.05; mix-blend-mode: multiply; } [data-theme="light"] .phero__bg::after { mix-blend-mode: multiply; opacity: 0.05; } /* Ökosystem-Platte bleibt dunkles "Blueprint"-Panel — schützt das Diagramm und setzt einen bewussten spatialen Akzent im hellen Layout. */ [data-theme="light"] .plate { background: radial-gradient(120% 130% at 50% -10%, rgba(82,75,198,0.28) 0%, transparent 55%), #15131C; border-color: rgba(255,255,255,0.12); } /* Indigo-Voice-Akzente brauchen auf Weiß etwas mehr Tiefe */ [data-theme="light"] .voice-line .accent, [data-theme="light"] .accent { color: var(--accent-soft); } /* Text auf bewusst dunkel gehaltenen Flächen bleibt hell: das Indigo-CTA-Band und die dunklen Foto-Kachel-Tags. */ [data-theme="light"] .cta h2 { color: #fff; } [data-theme="light"] .loc__tag { color: #fff; } [data-theme="light"] .loc--soon .loc__tag { color: #B7B6E0; border-color: var(--indigo-400); }