/* ============================================================================
* chazon · shared design vocabulary
* --------------------------------------------------------------------------
* Wird von beiden Sites geladen via
*
* Aufgabe: visuell-strukturelles Vokabular, das beide Pole verbindet ohne
* ihre Identität zu zerstören.
* /elements/ · das ÄUSSERE · gold-warm · wissenschaftlich-engraving
* /energies/ · das INNERE · aubergine-cool · illuminiertes-Manuskript
*
* Was wir SHARED machen:
* - Color-Bridge-Tokens (gold-warm ↔ aubergine-cool)
* - Cross-Site Navigation-Bar (component)
* - Plate-Numerals / Gilt-Rule (Brand-Konstanten)
* - Element-Icon-Sizes (5 Element-Glyphen erscheinen in beiden Sites)
*
* Was wir NICHT shared machen:
* - Typografie-Scale (jede Site hat ihre eigene Hierarchie)
* - Section-Layout (jede Site hat eigene Phase-Strukturen)
* - Module-Styles (Atlas/Coach/Tracker bleiben site-spezifisch)
*
* Version: 1.0 · created 2026-05-18
* ============================================================================ */
:root {
/* ---------- Cross-Site Color Bridge ---------- */
/* /elements/ identity */
--chx-elem-gold: #c9a44a;
--chx-elem-gold-light: #f5deb3;
--chx-elem-gold-soft: rgba(201, 164, 74, 0.42);
--chx-elem-warm-bg: #2a1f10;
/* /energies/ identity */
--chx-ener-aubergine: #2a1530;
--chx-ener-rosegold: #f5d0c5;
--chx-ener-magenta: #c4a8da;
--chx-ener-cyan: #a8d6e2;
/* Bridge — used in cross-site nav-bar to "carry" the other side's hue */
--chx-bridge-gradient: linear-gradient(135deg, var(--chx-elem-gold) 0%, var(--chx-ener-rosegold) 60%, var(--chx-ener-magenta) 100%);
/* Shared brand constants */
--chx-rule-hairline: 0.5px;
--chx-ease-organic: cubic-bezier(0.4, 0.0, 0.2, 1);
/* Cross-pole geometry & polarity tokens (v1.6+) ------------------------
* --chx-sigil-size : enforces identical codex-sigil size on both sites
* so the two halves of the medaillon are pixel-pari. Overridable per
* breakpoint via the same custom-property.
*
* --chx-finale-accent : the pol-coloured accent used in the
* chx-cross-pole-finale section (hairlines, em-text, incipit, caption).
* Default = gold (elements pole). Each site overrides on its own root:
* elements/energies/spiegel — see corresponding override blocks.
* This is THE knob that makes the medaillon-flip feel polar.
* --------------------------------------------------------------------- */
--chx-sigil-size: 72px;
--chx-finale-accent: var(--chx-elem-gold);
--chx-finale-accent-light: var(--chx-elem-gold-light);
--chx-finale-accent-soft: var(--chx-elem-gold-soft);
/* Type-Smoothing tokens (Sprint-2 · Track B6) ──────────────────────────
* Konsistente Lese-Rhythmen über alle Sites. Module dürfen
* lokal überschreiben, sollten aber bevorzugt diese Tokens konsumieren.
* --------------------------------------------------------------------- */
--chx-lh-serif: 1.55; /* Cormorant body, ed. essay */
--chx-lh-sans: 1.55; /* Manrope body (war 1.6 lokal · enger für Brand) */
--chx-lh-mono: 1.4; /* JetBrains Mono · code/labels */
--chx-lh-tight: 1.08; /* Display headings */
--chx-lh-headline: 1.18; /* Sub-headings */
--chx-tracking-display: -0.012em; /* h1/h2 */
--chx-tracking-body: -0.003em; /* p */
--chx-tracking-mono: 0.04em; /* mono caps */
--chx-tracking-eyebrow: 0.22em; /* uppercase eyebrows */
/* Glass-Optics-Tokens (v18.76 · 2026-05-22) ─────────────────────────────
* Konsistente Glasmorphismus-Bühne über alle UI-Elemente. Quelle: Chat-
* Panel-Look. Anwendung über `.chx-glass` utility-class oder via direkten
* Token-Konsum (`background: var(--chx-glass-bg)` etc.).
* --------------------------------------------------------------------- */
--chx-glass-bg: linear-gradient(180deg,
color-mix(in oklab, #1c1320 88%, #14101d) 0%,
color-mix(in oklab, #14101d 95%, var(--chx-finale-accent, #c9a44a)) 100%);
--chx-glass-bg-light: linear-gradient(180deg,
color-mix(in oklab, #1c1320 78%, transparent) 0%,
color-mix(in oklab, #14101d 88%, transparent) 100%);
--chx-glass-border: 1px solid color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 24%, transparent);
--chx-glass-border-strong: 1px solid color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 40%, transparent);
--chx-glass-blur: blur(22px) saturate(140%);
--chx-glass-blur-light: blur(14px) saturate(130%);
--chx-glass-shadow:
0 24px 60px -18px rgba(0,0,0,.65),
0 0 0 1px color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 12%, transparent) inset,
0 -1px 0 color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 18%, transparent) inset;
--chx-glass-shadow-light:
0 12px 32px -10px rgba(0,0,0,.5),
0 0 0 1px color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 10%, transparent) inset;
--chx-glass-radius: 14px;
}
/* ============================================================================
* Glass utility · `.chx-glass` (Sprint-2+ · Track B-Polish)
* Apply auf jedes Container-Element für instant Glas-Look.
* Variants: `.chx-glass--light` (weniger blur, weniger shadow),
* `.chx-glass--strong` (stronger border).
* ============================================================================ */
.chx-glass {
background: var(--chx-glass-bg);
border: var(--chx-glass-border);
backdrop-filter: var(--chx-glass-blur);
-webkit-backdrop-filter: var(--chx-glass-blur);
box-shadow: var(--chx-glass-shadow);
border-radius: var(--chx-glass-radius);
}
.chx-glass--light {
background: var(--chx-glass-bg-light);
backdrop-filter: var(--chx-glass-blur-light);
-webkit-backdrop-filter: var(--chx-glass-blur-light);
box-shadow: var(--chx-glass-shadow-light);
}
.chx-glass--strong {
border: var(--chx-glass-border-strong);
}
/* ============================================================================
* chx-icon · CSS-Sprite-Utility · ui-sheet-nav.webp (4×3 = 12 Icons)
* Sprite-Layout · gold-hairline UI-Icons (transparent BG):
* row 0: menu · close · search · arrow
* row 1: mic · headphones · play · pause
* row 2: heart · bookmark · share · settings
*
* Usage:
*
*
* Default-Size 22px · scaliert mit font-size · vererbt currentColor (filter).
* ============================================================================ */
.chx-icon {
display: inline-block;
width: 1.3em;
height: 1.3em;
background-image: url('/shared/assets/v4/icons/ui-sheet-nav.webp?v=v10');
background-size: 400% 300%;
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: middle;
flex-shrink: 0;
}
.chx-icon[data-icon="menu"] { background-position: 0% 0%; }
.chx-icon[data-icon="close"] { background-position: 33.33% 0%; }
.chx-icon[data-icon="search"] { background-position: 66.66% 0%; }
.chx-icon[data-icon="arrow"] { background-position: 100% 0%; }
.chx-icon[data-icon="mic"] { background-position: 0% 50%; }
.chx-icon[data-icon="headphones"] { background-position: 33.33% 50%; }
.chx-icon[data-icon="play"] { background-position: 66.66% 50%; }
.chx-icon[data-icon="pause"] { background-position: 100% 50%; }
.chx-icon[data-icon="heart"] { background-position: 0% 100%; }
.chx-icon[data-icon="bookmark"] { background-position: 33.33% 100%; }
.chx-icon[data-icon="share"] { background-position: 66.66% 100%; }
.chx-icon[data-icon="settings"] { background-position: 100% 100%; }
.chx-icon--lg { width: 1.8em; height: 1.8em; }
.chx-icon--sm { width: 1em; height: 1em; }
/* ============================================================================
* Avatar-Frame-Ornaments (frame-ornaments-strip.webp · 4 corners pro Charakter)
* Apply via data-character attribute auf any container with `.chx-frame-ornament`.
* Sheet-Layout: 4×1 strip · seherin · mendelejew · curie · paracelsus
* ============================================================================ */
.chx-frame-ornament {
position: relative;
isolation: isolate;
}
.chx-frame-ornament::before,
.chx-frame-ornament::after {
content: '';
position: absolute;
width: 28px; height: 28px;
background-image: url('/shared/assets/v4/icons/frame-ornaments-strip.webp?v=v10');
background-size: 400% 100%;
background-repeat: no-repeat;
opacity: .72;
pointer-events: none;
z-index: 2;
transition: opacity .35s ease, transform .35s ease;
}
.chx-frame-ornament::before { top: -6px; left: -6px; }
.chx-frame-ornament::after { bottom: -6px; right: -6px; transform: rotate(180deg); }
.chx-frame-ornament:hover::before,
.chx-frame-ornament:hover::after { opacity: 1; }
/* Pro Character: bg-x position im 4-strip */
.chx-frame-ornament[data-character="seherin"]::before,
.chx-frame-ornament[data-character="seherin"]::after { background-position: 0% 50%; }
.chx-frame-ornament[data-character="mendelejew"]::before,
.chx-frame-ornament[data-character="mendelejew"]::after { background-position: 33.33% 50%; }
.chx-frame-ornament[data-character="curie"]::before,
.chx-frame-ornament[data-character="curie"]::after { background-position: 66.66% 50%; }
.chx-frame-ornament[data-character="paracelsus"]::before,
.chx-frame-ornament[data-character="paracelsus"]::after { background-position: 100% 50%; }
/* ============================================================================
* Z-LAYER SYSTEM · chazon v28 · 2026-05-22
* Single source of truth für stacking-order. Neue Layer → hier eintragen,
* nicht Magic Numbers im Component-CSS. Bestand-Module migrieren schrittweise.
*
* Tiers (von hinten nach vorne):
* -1 backplane (aurora, bg-canvas)
* 1-5 base content, dekorative section-overlays
* 70-100 in-section sticky / dropdowns
* 110-130 page-level sticky/floating (nav, FAB, werkzeuge)
* 500 page header (hauptseite)
* 1000-2500 modals & overlays (modal, game, mega-menu, onboard)
* 3000-3100 CHAT — über allen normalen Modals, unter System-Tier
* 9500-99999 SYSTEM — cost-modal, memory, cursor, splash. Niemals überlagern.
* ============================================================================ */
:root {
/* backplane */
--z-back: -1;
/* base content */
--z-base: 1;
--z-content: 2;
--z-decor: 5;
/* in-section */
--z-sticky-low: 70;
--z-sticky-mid: 100;
/* page-level */
--z-nav: 110;
--z-floating: 130;
/* header */
--z-header: 500;
/* modals & overlays */
--z-modal: 1000;
--z-modal-high: 2000;
--z-mega-menu: 2100;
--z-onboard: 2500;
/* chat — über allen Modals, unter System-Tier */
--z-chat-pill: 3000;
--z-chat-panel: 3100;
/* system-tier */
--z-sys-cost-modal: 9500;
--z-sys-memory: 9990;
--z-sys-cursor: 9999;
--z-sys-splash: 99999;
}
/* Pol-override: when shared.css is loaded inside an aubergine-cool theme
(energies + spiegel), the finale accent flips from gold to rosegold so
the cross-pole-finale wirklich als Pol-Wechsel auftritt.
Trigger: (energies) or [data-theme="spiegel"] */
:root[data-theme="aubergine"],
[data-theme="aubergine"] {
--chx-finale-accent: var(--chx-ener-rosegold);
--chx-finale-accent-light: #ffe4d9;
--chx-finale-accent-soft: rgba(245, 208, 197, 0.42);
}
[data-theme="spiegel"] {
/* Spiegel-hub: stays gold-warm — the central axis itself is the warm pole */
--chx-finale-accent: var(--chx-elem-gold);
}
/* ============================================================================
* Scroll-Reveal-Stagger (Sprint-1 · Track B1) · chx-reveal-stagger.js
* ---------------------------------------------------------------------------
* Opt-in: Container bekommt `.chx-stagger`. Beim Eintritt in den Viewport
* staffeln Kinder kaskadiert ein. JS setzt `data-revealed="true"` und
* pro Kind `--stagger-i`. CSS animiert.
*
* Default-Delay 70 ms zwischen Kindern, Animation 600 ms. Reduced-Motion
* kürzt auf instant (kein Stagger, kein Transform).
*
* Tokenized:
* --chx-stagger-step : 70ms (zwischen Kindern)
* --chx-stagger-dur : 600ms (Animation pro Kind)
* --chx-stagger-y : 16px (vertikaler Offset)
* ============================================================================ */
.chx-stagger {
--chx-stagger-step: 70ms;
--chx-stagger-dur: 600ms;
--chx-stagger-y: 16px;
}
.chx-stagger > * {
opacity: 0;
transform: translateY(var(--chx-stagger-y));
transition:
opacity var(--chx-stagger-dur) var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
transform var(--chx-stagger-dur) var(--chx-ease-organic, cubic-bezier(.4,0,.2,1));
transition-delay: calc(var(--stagger-i, 0) * var(--chx-stagger-step));
will-change: opacity, transform;
}
.chx-stagger[data-revealed="true"] > * {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.chx-stagger > * {
transition: none;
transform: none;
opacity: 1;
}
}
/* ============================================================================
* Micro-Elevation (Sprint-1 · Track B2) · Cards & Hover-Lift
* ---------------------------------------------------------------------------
* Opt-in via `.chx-lift` ODER automatisch auf prominente Card-Klassen, die
* bislang KEINE eigene Hover-Shadow-Logik haben. Cards mit existierendem
* :hover-Stack (z.B. .cx-card) bleiben unangetastet — :where()-Selektor mit
* specificity 0 verliert gegen die spezifischeren bestehenden Regeln.
*
* Tokens (existieren in :root):
* --chx-elev-1/2/3/4 · cascade-shadows
* --chx-elev-glow · finale-accent-Schein, per Theme überschrieben
* ============================================================================ */
:where(.chx-lift, .lab-plate, .sp-pole, .portal, .chx-mirror) {
box-shadow: var(--chx-elev-1, 0 1px 2px rgba(0,0,0,.25));
transition:
transform .28s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
box-shadow .32s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
border-color .25s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1));
will-change: transform, box-shadow;
}
:where(.chx-lift, .lab-plate, .sp-pole, .portal, .chx-mirror):hover {
transform: translateY(-3px);
box-shadow:
var(--chx-elev-3, 0 12px 28px rgba(0,0,0,.4)),
var(--chx-elev-glow, 0 0 24px rgba(201,164,74,.28));
}
:where(.chx-lift, .lab-plate, .sp-pole, .portal, .chx-mirror):focus-visible {
outline: 2px solid var(--chx-finale-accent, var(--chx-elem-gold, #c9a44a));
outline-offset: 3px;
box-shadow:
var(--chx-elev-2, 0 4px 12px rgba(0,0,0,.35)),
var(--chx-elev-glow, 0 0 24px rgba(201,164,74,.28));
}
:where(.chx-lift, .lab-plate, .sp-pole, .portal, .chx-mirror):active {
transform: translateY(-1px);
box-shadow: var(--chx-elev-2, 0 4px 12px rgba(0,0,0,.35));
}
@media (prefers-reduced-motion: reduce) {
:where(.chx-lift, .lab-plate, .sp-pole, .portal, .chx-mirror) {
transition: none;
}
:where(.chx-lift, .lab-plate, .sp-pole, .portal, .chx-mirror):hover {
transform: none;
}
}
/* ============================================================================
* Mirror-Rail (Sprint-1 · Track A2) · Cross-Site Edge-Tab
* ---------------------------------------------------------------------------
* Floatender Tab am Bildschirmrand · peekt heraus, expandiert bei Hover,
* führt zur Schwester-Hälfte des chazon-Pols.
*
* JS-Anker: /shared/chx-mirror-rail.js
* ============================================================================ */
.chx-mirror-rail {
--chx-mr-glow: #f5d0c5;
position: fixed;
top: 38vh;
z-index: var(--z-nav, 110);
display: flex;
align-items: center;
gap: .55rem;
padding: .42rem .65rem;
text-decoration: none;
color: var(--text-bright, #faf2e8);
font-family: 'Manrope', system-ui, sans-serif;
background: linear-gradient(180deg,
color-mix(in oklab, var(--base-elevated, #1c1320) 92%, var(--base-deep, #14101d)),
color-mix(in oklab, var(--base-deep, #14101d) 96%, var(--chx-mr-glow)));
border: 1px solid color-mix(in oklab, var(--chx-mr-glow) 36%, transparent);
backdrop-filter: blur(14px) saturate(135%);
-webkit-backdrop-filter: blur(14px) saturate(135%);
box-shadow:
0 12px 30px -10px rgba(0,0,0,.55),
0 0 22px color-mix(in oklab, var(--chx-mr-glow) 22%, transparent);
transition:
transform .35s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
box-shadow .35s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
background .35s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1));
will-change: transform;
}
.chx-mirror-rail--right {
right: 0;
border-radius: 14px 0 0 14px;
border-right: none;
transform: translateX(calc(100% - 58px));
}
.chx-mirror-rail--left {
left: 0;
border-radius: 0 14px 14px 0;
border-left: none;
transform: translateX(calc(-100% + 58px));
}
.chx-mirror-rail:hover,
.chx-mirror-rail:focus-visible {
transform: translateX(0);
box-shadow:
0 20px 44px -12px rgba(0,0,0,.7),
0 0 36px color-mix(in oklab, var(--chx-mr-glow) 40%, transparent);
}
.chx-mirror-rail:focus-visible {
outline: 2px solid var(--chx-mr-glow);
outline-offset: 3px;
}
.chx-mirror-rail .chx-mr-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid color-mix(in oklab, var(--chx-mr-glow) 50%, transparent);
box-shadow: 0 0 14px color-mix(in oklab, var(--chx-mr-glow) 32%, transparent);
}
.chx-mirror-rail .chx-mr-avatar img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.chx-mirror-rail .chx-mr-text {
display: flex;
flex-direction: column;
gap: .05rem;
text-align: left;
white-space: nowrap;
}
.chx-mirror-rail .chx-mr-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-mr-glow) 88%, white);
line-height: 1;
}
.chx-mirror-rail .chx-mr-sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: .82rem;
line-height: 1.1;
color: var(--text-warm, #ead7c8);
}
.chx-mirror-rail .chx-mr-arrow {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
line-height: 1;
color: color-mix(in oklab, var(--chx-mr-glow) 80%, white);
flex-shrink: 0;
}
/* Mobile: rail nach unten zum Sticky-Bottom, schlanker */
@media (max-width: 720px) {
.chx-mirror-rail {
top: auto;
bottom: 4.8rem; /* über chat-pill */
padding: .35rem .55rem;
}
.chx-mirror-rail--right { transform: translateX(calc(100% - 52px)); }
.chx-mirror-rail--left { transform: translateX(calc(-100% + 52px)); }
.chx-mirror-rail .chx-mr-avatar { width: 32px; height: 32px; }
.chx-mirror-rail .chx-mr-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.chx-mirror-rail {
transition: none;
/* Permanent halb-sichtbar, kein peek-Animation */
}
}
/* ============================================================================
* Passport-Trail (Sprint-1 · Track A4) · Lock-Screen-Pille unten links
* ---------------------------------------------------------------------------
* Sammelt aus ChxPassport + ChxMemory + ChxCodexLibrary und zeigt den
* bisherigen Pfad: Pole · Phasen · Elemente · Folios. Slide-in nach 1.8 s.
*
* JS: /shared/chx-passport-trail.js · Click öffnet Memory-Panel.
* ============================================================================ */
.chx-passport-trail {
--pt-glow: var(--chx-finale-accent, #c9a44a);
position: fixed;
left: 1.1rem;
bottom: 1.1rem;
z-index: var(--z-floating, 130);
display: flex;
flex-direction: column;
gap: .15rem;
padding: .55rem .9rem;
text-decoration: none;
font-family: 'Manrope', sans-serif;
color: var(--text-bright, #faf2e8);
background: linear-gradient(180deg,
color-mix(in oklab, var(--base-elevated, #1c1320) 88%, transparent),
color-mix(in oklab, var(--base-deep, #14101d) 96%, transparent));
border: 1px solid color-mix(in oklab, var(--pt-glow) 28%, transparent);
border-radius: 12px;
backdrop-filter: blur(14px) saturate(125%);
-webkit-backdrop-filter: blur(14px) saturate(125%);
box-shadow:
0 10px 28px -8px rgba(0,0,0,.6),
0 0 18px color-mix(in oklab, var(--pt-glow) 18%, transparent);
cursor: pointer;
font: inherit;
text-align: left;
opacity: 0;
transform: translateY(14px);
transition:
opacity .55s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
transform .55s var(--chx-ease-organic, cubic-bezier(.4,0,.2,1)),
box-shadow .25s ease,
border-color .25s ease;
}
.chx-passport-trail[data-visible="true"] {
opacity: 1;
transform: translateY(0);
}
.chx-passport-trail:hover {
border-color: color-mix(in oklab, var(--pt-glow) 55%, transparent);
box-shadow:
0 16px 36px -10px rgba(0,0,0,.7),
0 0 30px color-mix(in oklab, var(--pt-glow) 32%, transparent);
}
.chx-passport-trail:focus-visible {
outline: 2px solid var(--pt-glow);
outline-offset: 3px;
}
.chx-pt-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .56rem;
letter-spacing: .22em;
text-transform: uppercase;
color: color-mix(in oklab, var(--pt-glow) 75%, white);
opacity: .82;
}
.chx-pt-line {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 .35rem;
font-size: .8rem;
line-height: 1.2;
}
.chx-pt-stat {
display: inline-flex;
align-items: baseline;
gap: .25rem;
}
.chx-pt-glyph {
color: color-mix(in oklab, var(--pt-glow) 90%, white);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: .92rem;
line-height: 1;
}
.chx-pt-n {
font-weight: 600;
color: var(--text-bright, #faf2e8);
}
.chx-pt-label {
color: var(--text-warm, #ead7c8);
opacity: .85;
}
.chx-pt-sep {
color: color-mix(in oklab, var(--text-faded, #a89aa0) 80%, transparent);
}
/* Mobile · etwas schmaler, über chat-pill */
@media (max-width: 720px) {
.chx-passport-trail {
left: .65rem;
bottom: 4.8rem;
padding: .42rem .65rem;
max-width: calc(100vw - 6rem);
}
.chx-pt-line { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
.chx-passport-trail {
transition: opacity .2s;
transform: none;
}
}
/* ============================================================================
* m-help · Cognitive-Load-Helper (shared) · Phase 2 (2026-05-22)
* ---------------------------------------------------------------------------
* Inline-expandable explainer that lives next to complex modules. Reader can
* open it without leaving the page; closed it occupies ~one line.
*
* Usage:
*
* Was sehe ich hier?
* Die Spirale zeigt vMeme-Stufen nach Spiral Dynamics …
*
*
* Token-driven (uses --chx-glass-tint / --text-faded / --chx-rule-hairline).
* Works in both element-gold and energies-aubergine themes.
* ============================================================================ */
details.m-help {
display: block;
margin: 1rem 0 1.4rem;
padding: .15rem 1rem .25rem;
/* v18.76 · Glass-Optics statt nur Hairlines */
background: var(--chx-glass-bg-light);
border: 1px solid color-mix(in oklab, var(--text-faded, #a89aa0) 28%, transparent);
border-radius: var(--chx-glass-radius, 14px);
backdrop-filter: var(--chx-glass-blur-light);
-webkit-backdrop-filter: var(--chx-glass-blur-light);
box-shadow: var(--chx-glass-shadow-light);
font-family: 'Manrope', system-ui, sans-serif;
transition: border-color .3s ease, box-shadow .3s ease;
}
details.m-help[open] {
border-color: color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 32%, transparent);
}
details.m-help > summary {
list-style: none;
cursor: pointer;
padding: .55rem .15rem .55rem .15rem;
font-size: .76rem;
letter-spacing: var(--chx-tracking-eyebrow, .12em);
text-transform: uppercase;
color: color-mix(in oklab, var(--text-faded, #a89aa0) 80%, var(--text-bright, #faf2e8));
line-height: var(--chx-lh-mono, 1.4);
display: flex;
align-items: center;
gap: .6rem;
transition: color .2s ease;
user-select: none;
}
details.m-help > summary::-webkit-details-marker { display: none; }
details.m-help > summary::marker { content: ''; }
details.m-help > summary::before {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
border: 0.5px solid color-mix(in oklab,
var(--chx-finale-accent, var(--chx-elem-gold, #c9a44a)) 55%, transparent);
color: var(--chx-finale-accent, var(--chx-elem-gold, #c9a44a));
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: .95rem;
line-height: 1;
flex-shrink: 0;
transition: transform .25s var(--chx-ease-organic, ease), border-color .2s ease;
}
details.m-help[open] > summary::before {
content: '−';
transform: rotate(180deg);
border-color: var(--chx-finale-accent, var(--chx-elem-gold, #c9a44a));
}
details.m-help > summary:hover {
color: var(--text-bright, #faf2e8);
}
details.m-help > summary:focus-visible {
outline: 2px solid var(--chx-finale-accent, var(--chx-elem-gold, #c9a44a));
outline-offset: 3px;
border-radius: 4px;
}
/* Content block · serif-italic for editorial feel */
details.m-help > :not(summary) {
margin: 0;
padding: .15rem .15rem 1rem 1.65rem; /* indent past the + glyph */
font-family: 'Cormorant Garamond', 'Frank Ruhl Libre', serif;
font-style: italic;
font-size: .98rem;
line-height: var(--chx-lh-serif, 1.55);
letter-spacing: var(--chx-tracking-body, -0.003em);
color: var(--text-warm, #ead7c8);
max-width: 60ch;
}
details.m-help > :not(summary):first-of-type {
padding-top: .35rem;
}
/* Reduced motion · drop the rotation */
@media (prefers-reduced-motion: reduce) {
details.m-help > summary::before { transition: none; }
}
/* Responsive sigil sizing — single source of truth so both sites
shrink/grow in lock-step. */
@media (max-width: 820px) { :root { --chx-sigil-size: 60px; } }
@media (max-width: 620px) { :root { --chx-sigil-size: 52px; } }
@media (max-width: 480px) { :root { --chx-sigil-size: 44px; } }
@media (max-width: 380px) { :root { --chx-sigil-size: 40px; } }
/* ============================================================================
* v1.50 · Figma-Foundation · Design-System Token Scales
* --------------------------------------------------------------------------
* Type · Spacing · Radii · Elevation · Glass-Blur · Motion · Focus-Ring
* Ergänzt das v1.45-Motion-Layer um Foundation-Tokens. Module-Sites + Hauptseite
* referenzieren ausschließlich diese Variablen — keine hardcoded px mehr.
* Erfolg = ein Designer könnte den Code in Figma 1:1 nachzeichnen.
* ============================================================================ */
:root {
/* Type-Scale · clamp-fluid, 8pt-anchored, Cormorant-tuned */
--chx-font-display: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
--chx-font-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
--chx-font-h2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
--chx-font-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
--chx-font-body: 1rem;
--chx-font-meta: 0.875rem;
--chx-font-caption: 0.75rem;
--chx-leading-tight: 1.15;
--chx-leading-body: 1.55;
--chx-leading-loose: 1.75;
--chx-tracking-tight: -0.01em;
--chx-tracking-normal: 0;
--chx-tracking-wide: 0.02em;
--chx-tracking-display: 0.04em;
/* Spacing-Scale · 8pt-Grid mit half-step Inset */
--chx-space-0: 0;
--chx-space-1: 0.25rem; /* 4 */
--chx-space-2: 0.5rem; /* 8 */
--chx-space-3: 0.75rem; /* 12 */
--chx-space-4: 1rem; /* 16 */
--chx-space-5: 1.5rem; /* 24 */
--chx-space-6: 2rem; /* 32 */
--chx-space-7: 3rem; /* 48 */
--chx-space-8: 4rem; /* 64 */
--chx-space-9: 6rem; /* 96 */
/* Radii */
--chx-radius-xs: 4px;
--chx-radius-sm: 8px;
--chx-radius-md: 12px;
--chx-radius-lg: 18px;
--chx-radius-xl: 24px;
--chx-radius-pill: 999px;
/* Elevation · aubergine-grounded shadows (nicht pures Schwarz) */
--chx-elev-shadow-color: 20, 8, 24; /* deep aubergine, alpha-applied below */
--chx-elev-1: 0 1px 2px rgba(var(--chx-elev-shadow-color), 0.28), 0 1px 1px rgba(var(--chx-elev-shadow-color), 0.18);
--chx-elev-2: 0 4px 12px rgba(var(--chx-elev-shadow-color), 0.35), 0 1px 2px rgba(var(--chx-elev-shadow-color), 0.20);
--chx-elev-3: 0 12px 28px rgba(var(--chx-elev-shadow-color), 0.42), 0 4px 8px rgba(var(--chx-elev-shadow-color), 0.22);
--chx-elev-4: 0 24px 56px rgba(var(--chx-elev-shadow-color), 0.50), 0 8px 16px rgba(var(--chx-elev-shadow-color), 0.28);
--chx-elev-glow: 0 0 24px color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 28%, transparent);
/* Glass-Blur Skala (ergänzt v1.45 --chx-glass-blur, das bleibt context-default) */
--chx-glass-blur-tight: 10px;
--chx-glass-blur-soft: 16px;
--chx-glass-blur-heavy: 24px;
/* Motion-Easings (ergänzt --chx-ease-organic von Z.44) */
--chx-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--chx-ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
--chx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--chx-dur-instant: 80ms;
--chx-dur-fast: 140ms;
--chx-dur-base: 220ms;
--chx-dur-slow: 420ms;
--chx-dur-glacial: 800ms;
/* Focus-Ring · zentralisiert, context-tinted via --chx-finale-accent */
--chx-focus-ring:
0 0 0 2px rgba(20, 8, 24, 0.92),
0 0 0 4px var(--chx-finale-accent, #c9a44a),
0 0 12px color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 50%, transparent);
}
/* High-contrast preference · stärkerer Focus-Ring + Elevation */
@media (prefers-contrast: more) {
:root {
--chx-focus-ring:
0 0 0 2px #000,
0 0 0 5px var(--chx-finale-accent, #c9a44a);
--chx-glass-tint: rgba(20, 8, 24, 0.85);
}
}
/* ============================================================================
* CROSS-SITE NAV-BAR · "⇌ Schwesterseite"
*
* Erscheint diskret in der topbar beider Sites. Trägt den Hue der ANDEREN
* Seite als Akzent — auf /energies/ leuchtet sie gold (elements-Identität),
* auf /elements/ leuchtet sie aubergine-rosegold (energies-Identität).
*
* Markup-Pattern (kopierbar in beide Sites):
*
*
* ⇌
*
* Elements
* der äußere Kosmos
*
*
*
*
* ⇌
*
* Energies
* der innere Kosmos
*
*
* ============================================================================ */
.chx-sister-link {
--chx-link-hue: var(--chx-elem-gold);
--chx-link-hue-soft: rgba(201, 164, 74, 0.18);
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.42rem 0.85rem 0.42rem 0.7rem;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.02) 0%,
var(--chx-link-hue-soft) 100%);
border: 0.5px solid color-mix(in oklab, var(--chx-link-hue) 38%, transparent);
border-radius: 999px;
color: inherit;
text-decoration: none;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
line-height: 1;
transition: all 0.32s var(--chx-ease-organic);
position: relative;
}
.chx-sister-link:hover {
border-color: var(--chx-link-hue);
box-shadow:
0 0 0 1px color-mix(in oklab, var(--chx-link-hue) 22%, transparent) inset,
0 8px 24px color-mix(in oklab, var(--chx-link-hue) 22%, transparent),
0 0 18px color-mix(in oklab, var(--chx-link-hue) 32%, transparent);
transform: translateY(-1px);
}
/* Hue Variants */
.chx-sister-link--to-elements {
--chx-link-hue: var(--chx-elem-gold);
--chx-link-hue-soft: rgba(201, 164, 74, 0.16);
}
.chx-sister-link--to-energies {
--chx-link-hue: var(--chx-ener-rosegold);
--chx-link-hue-soft: rgba(245, 208, 197, 0.16);
}
/* Axis variant — leads to /spiegel/, the medaillon's hinge. Slightly more
restrained than the pole-variants, with a vertical gold hairline on the
leading edge (signals "axis, not pole"). Replaces ⇌ with ✦ rubric mark. */
.chx-sister-link--to-spiegel {
--chx-link-hue: var(--chx-elem-gold);
--chx-link-hue-soft: transparent;
background: transparent;
border-color: transparent;
padding-left: 1rem;
position: relative;
isolation: isolate;
}
.chx-sister-link--to-spiegel::before {
content: '';
position: absolute;
left: 0.45rem;
top: 30%;
bottom: 30%;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
var(--chx-elem-gold) 22%,
var(--chx-elem-gold-light) 50%,
var(--chx-elem-gold) 78%,
transparent 100%);
opacity: 0.7;
z-index: -1;
}
.chx-sister-link--to-spiegel:hover {
border-color: color-mix(in oklab, var(--chx-elem-gold) 35%, transparent);
background: color-mix(in oklab, var(--chx-elem-gold) 6%, transparent);
box-shadow:
0 0 18px color-mix(in oklab, var(--chx-elem-gold) 25%, transparent);
}
.chx-sister-link--to-spiegel .chx-sister-arrow {
font-family: 'Cormorant Garamond', 'Frank Ruhl Libre', serif;
font-style: normal;
font-size: 0.95rem;
animation: chx-spiegel-rubric-breath 4.4s ease-in-out infinite;
}
@keyframes chx-spiegel-rubric-breath {
0%, 100% { opacity: 0.82; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.chx-sister-arrow {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 1rem;
line-height: 1;
color: var(--chx-link-hue);
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--chx-link-hue) 50%, transparent));
}
.chx-sister-label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.chx-sister-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.005em;
line-height: 1;
}
.chx-sister-sub {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 0.6rem;
letter-spacing: 0.12em;
text-transform: lowercase;
opacity: 0.7;
line-height: 1;
}
/* Mobile */
@media (max-width: 640px) {
.chx-sister-link {
padding: 0.35rem 0.55rem 0.35rem 0.5rem;
gap: 0.42rem;
}
.chx-sister-sub { display: none; }
.chx-sister-name { font-size: 0.84rem; }
.chx-sister-arrow { font-size: 0.9rem; }
}
/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
.chx-sister-link { transition: none; }
.chx-sister-link:hover { transform: none; }
}
/* ============================================================================
* SPIEGEL-VERWEIS · diskrete Inline-Pille im Body von Sektionen
*
* Beide Sites haben "mirror-path" → führt zur Pendant-Phase der anderen
* Site. Statt freitext-Link bekommen sie ab v1.0 ein konsistentes Pill-Design.
*
* Markup-Pattern:
*
* ⇌
*
* Spiegel zu Energies
* Phase X · Window of Tolerance
*
*
* ============================================================================ */
.chx-mirror {
--chx-mirror-hue: var(--chx-elem-gold);
display: inline-flex;
align-items: stretch;
gap: 0.6rem;
padding: 0.6rem 0.95rem 0.6rem 0.7rem;
background: color-mix(in oklab, var(--chx-mirror-hue) 6%, transparent);
border: 0.5px solid color-mix(in oklab, var(--chx-mirror-hue) 28%, transparent);
border-left: 2px solid var(--chx-mirror-hue);
border-radius: 6px;
color: inherit;
text-decoration: none;
transition: all 0.32s var(--chx-ease-organic);
margin: 1rem 0;
}
.chx-mirror:hover {
background: color-mix(in oklab, var(--chx-mirror-hue) 14%, transparent);
border-color: var(--chx-mirror-hue);
transform: translateX(2px);
box-shadow: 0 0 14px color-mix(in oklab, var(--chx-mirror-hue) 22%, transparent);
}
.chx-mirror--to-elements { --chx-mirror-hue: var(--chx-elem-gold); }
.chx-mirror--to-energies { --chx-mirror-hue: var(--chx-ener-rosegold); }
.chx-mirror-sigil {
font-family: 'JetBrains Mono', monospace;
font-size: 1.1rem;
line-height: 1.3;
color: var(--chx-mirror-hue);
align-self: center;
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--chx-mirror-hue) 50%, transparent));
}
/* When the sigil is a pendant-image (v18.10+), drop the text styling
and render at mirror-pill scale. The hue glow stays as a drop-shadow
on the image itself so the pendant inherits the cross-pole tinting. */
.chx-mirror-sigil.chx-pendant {
width: 36px;
height: 36px;
font-size: 0; /* hide any fallback text */
line-height: 0;
align-self: center;
flex-shrink: 0;
filter: drop-shadow(0 0 6px color-mix(in oklab, var(--chx-mirror-hue) 35%, transparent));
transition: transform 0.5s var(--chx-ease-organic), filter 0.5s var(--chx-ease-organic);
}
.chx-mirror:hover .chx-mirror-sigil.chx-pendant {
transform: scale(1.08) rotate(-2deg);
filter: drop-shadow(0 0 12px color-mix(in oklab, var(--chx-mirror-hue) 55%, transparent));
}
.chx-mirror-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.chx-mirror-source {
font-family: 'JetBrains Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-mirror-hue) 70%, currentColor);
opacity: 0.8;
}
.chx-mirror-target {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.02rem;
line-height: 1.3;
}
.chx-mirror-target em {
font-style: italic;
color: var(--chx-mirror-hue);
}
@media (max-width: 640px) {
.chx-mirror { padding: 0.55rem 0.7rem 0.55rem 0.6rem; gap: 0.5rem; }
.chx-mirror-target { font-size: 0.95rem; }
.chx-mirror-source { font-size: 0.6rem; letter-spacing: 0.1em; }
}
/* ============================================================================
* CROSS-POLE ASSETS · 38 watercolor sigils, pendants, cartouches, transitions
*
* Output of Sheet-1..5 pipeline (see docs/gpt-image-2-cross-pole.md).
* Files live under /shared/assets/cross-pole/ — referenced from both sites
* via absolute path /shared/assets/cross-pole/... (deploy.sh mirrors structure).
* ============================================================================ */
/* ---------- SHEET 1 · Sigils (5×2 → 10 glyphs) ---------- */
.chx-sigil {
display: inline-block;
width: 1em;
height: 1em;
background: no-repeat center / contain;
vertical-align: middle;
}
.chx-sigil-exchange.chx-sigil--warm { background-image: url(/shared/assets/cross-pole/sigils/sigil-exchange-warm.webp); }
.chx-sigil-exchange.chx-sigil--cool { background-image: url(/shared/assets/cross-pole/sigils/sigil-exchange-cool.webp); }
.chx-sigil-sun.chx-sigil--warm { background-image: url(/shared/assets/cross-pole/sigils/sigil-sun-warm.webp); }
.chx-sigil-sun.chx-sigil--cool { background-image: url(/shared/assets/cross-pole/sigils/sigil-sun-cool.webp); }
.chx-sigil-moon.chx-sigil--warm { background-image: url(/shared/assets/cross-pole/sigils/sigil-moon-warm.webp); }
.chx-sigil-moon.chx-sigil--cool { background-image: url(/shared/assets/cross-pole/sigils/sigil-moon-cool.webp); }
.chx-sigil-vesica.chx-sigil--warm { background-image: url(/shared/assets/cross-pole/sigils/sigil-vesica-warm.webp); }
.chx-sigil-vesica.chx-sigil--cool { background-image: url(/shared/assets/cross-pole/sigils/sigil-vesica-cool.webp); }
.chx-sigil-spiral.chx-sigil--warm { background-image: url(/shared/assets/cross-pole/sigils/sigil-spiral-warm.webp); }
.chx-sigil-spiral.chx-sigil--cool { background-image: url(/shared/assets/cross-pole/sigils/sigil-spiral-cool.webp); }
/* ---------- SHEET 2 · Cartouches (1×2 → 2 wappen) ----------
* Use as ornate facing-page link to the other pole.
* Markup: …
* ----------------------------------------------------------- */
/* ============================================================================
* CHX-LANG-TOGGLE · DE/EN switch · illuminated-rubric pattern
*
* Nicht eine pill. Eine miniatur-skripturale Markierung.
* Statt background-fill auf dem aktiven button (zu derb) gibt es:
* – ein ✦-Rubrum-Zeichen ÜBER dem aktiven button (slides bei wechsel)
* – einen gold-leaf underline-strich UNTER dem aktiven button
* – horizontale gold-hairline-rules ober- und unterhalb des containers
* mit subtilem light-sweep (analog zu codex-rule)
* – gold-dot-separator zwischen DE und EN (column-divider stil)
*
* Beide Sites laden chazon-shared.css → identische Optik.
* Trigger-Logik unterscheidet sich (elements: client-rerender,
* energies: redirect zu /en/ ↔ /), aber DOM-API ist gleich:
* …
* ============================================================================ */
.chx-lang-toggle {
--chx-lt-gold: var(--chx-elem-gold);
--chx-lt-gold-light: var(--chx-elem-gold-light);
--chx-lt-ink: color-mix(in oklab, var(--chx-lt-gold-light) 60%, currentColor);
--chx-lt-ink-dim: color-mix(in oklab, var(--chx-lt-gold-light) 22%, currentColor);
position: relative;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 0.85rem 0.7rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
line-height: 1;
background: transparent;
isolation: isolate;
}
/* top + bottom hairline rules (illuminated manuscript marginalia) */
.chx-lang-toggle::before,
.chx-lang-toggle::after {
content: '';
position: absolute;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--chx-lt-gold) 22%,
var(--chx-lt-gold-light) 50%,
var(--chx-lt-gold) 78%,
transparent 100%);
opacity: 0.55;
pointer-events: none;
}
.chx-lang-toggle::before { top: 0; }
.chx-lang-toggle::after { bottom: 0; }
/* light-sweep on hairlines — subtle, slow, lives independently per rule */
.chx-lang-toggle::before { overflow: hidden; }
@keyframes chx-lt-hairline-sweep {
0%, 80% { opacity: 0.55; }
90% { opacity: 0.95; }
100% { opacity: 0.55; }
}
.chx-lang-toggle:hover::before,
.chx-lang-toggle:hover::after { animation: chx-lt-hairline-sweep 2.4s ease-in-out infinite; }
/* Rubric ✦ that floats above the active button */
.chx-lang-rubric {
position: absolute;
top: -7px;
left: 0.85rem; /* = container left-padding (aligns to first btn) */
width: 2.2rem; /* = button width */
text-align: center;
font-family: 'Cormorant Garamond', 'Frank Ruhl Libre', serif;
font-style: normal;
font-size: 0.78rem;
color: var(--chx-lt-gold);
letter-spacing: 0;
pointer-events: none;
filter: drop-shadow(0 0 5px color-mix(in oklab, var(--chx-lt-gold) 70%, transparent));
transition: transform 0.55s cubic-bezier(0.45, 0.0, 0.15, 1);
animation: chx-lt-rubric-breath 4.4s ease-in-out infinite;
z-index: 2;
}
@keyframes chx-lt-rubric-breath {
0%, 100% { opacity: 0.82; }
50% { opacity: 1; }
}
/* Slide rubric over EN when EN is active.
Math: btn_width(2.2) + gap(0.6) + sep_width(0.4) + gap(0.6) = 3.8rem
Three selector flavours so this works with:
· build-time data-active attribute (server-side, e.g. /energies/en/)
· client-side .is-active class (energies-v2 binding API)
· client-side .active class (elements.js setLang setzt diese) */
.chx-lang-toggle[data-active="en"] .chx-lang-rubric,
.chx-lang-toggle:has(.chx-lang-btn[data-lang="en"].is-active) .chx-lang-rubric,
.chx-lang-toggle:has(.chx-lang-btn[data-lang="en"].active) .chx-lang-rubric {
transform: translateX(3.8rem);
}
/* Buttons */
.chx-lang-btn {
position: relative;
width: 2.2rem;
padding: 0 0;
background: transparent;
border: 0;
font: inherit;
letter-spacing: inherit;
text-align: center;
color: var(--chx-lt-ink-dim);
cursor: pointer;
transition: color 0.4s var(--chx-ease-organic), text-shadow 0.4s var(--chx-ease-organic);
z-index: 1;
}
/* gold-leaf underline (drawn-in via scale-x) */
.chx-lang-btn::after {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 64%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--chx-lt-gold) 24%,
var(--chx-lt-gold-light) 50%,
var(--chx-lt-gold) 76%,
transparent 100%);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.55s cubic-bezier(0.45, 0, 0.15, 1);
filter: drop-shadow(0 0 3px color-mix(in oklab, var(--chx-lt-gold) 75%, transparent));
}
/* Active button — set via [data-active] on container OR .is-active / .active class on button */
.chx-lang-toggle[data-active="de"] .chx-lang-btn[data-lang="de"],
.chx-lang-toggle[data-active="en"] .chx-lang-btn[data-lang="en"],
.chx-lang-btn.is-active,
.chx-lang-btn.active {
color: var(--chx-lt-gold-light);
text-shadow: 0 0 6px color-mix(in oklab, var(--chx-lt-gold) 38%, transparent);
}
.chx-lang-toggle[data-active="de"] .chx-lang-btn[data-lang="de"]::after,
.chx-lang-toggle[data-active="en"] .chx-lang-btn[data-lang="en"]::after,
.chx-lang-btn.is-active::after,
.chx-lang-btn.active::after {
transform: translateX(-50%) scaleX(1);
}
.chx-lang-btn:hover:not(.is-active):not(.active) {
color: var(--chx-lt-ink);
}
.chx-lang-btn:hover:not(.is-active):not(.active)::after {
transform: translateX(-50%) scaleX(0.35);
}
.chx-lang-btn:focus-visible {
outline: none;
color: var(--chx-lt-gold-light);
}
.chx-lang-btn:focus-visible::after {
transform: translateX(-50%) scaleX(0.85);
}
/* Gold-dot column separator (like manuscript column divider) */
.chx-lang-sep {
width: 0.4rem;
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-style: normal;
color: var(--chx-lt-gold);
opacity: 0.55;
pointer-events: none;
user-select: none;
line-height: 1;
}
/* Mobile responsive — same shape, slightly tighter */
@media (max-width: 560px) {
.chx-lang-toggle {
padding: 0.85rem 0.7rem 0.6rem;
gap: 0.5rem;
font-size: 0.62rem;
letter-spacing: 0.28em;
}
.chx-lang-btn { width: 2rem; }
.chx-lang-rubric { width: 2rem; left: 0.7rem; font-size: 0.7rem; }
.chx-lang-toggle[data-active="en"] .chx-lang-rubric { transform: translateX(3.3rem); }
}
.chx-cartouche {
display: block;
width: 100%;
max-width: 480px;
aspect-ratio: 5 / 4;
background: no-repeat center / contain;
text-decoration: none;
transition: transform 0.6s var(--chx-ease-organic), filter 0.6s var(--chx-ease-organic);
}
.chx-cartouche:hover { transform: scale(1.025); filter: brightness(1.08) saturate(1.1); }
.chx-cartouche-to-energies { background-image: url(/shared/assets/cross-pole/cartouches/cartouche-to-energies.webp); }
.chx-cartouche-to-elements { background-image: url(/shared/assets/cross-pole/cartouches/cartouche-to-elements.webp); }
/* ============================================================================
* CROSS-POLE-FINALE · Cartouche-Schlusspunkt am Ende beider Sites
*
* "Facing-page-illumination" im illuminierten-Manuskript-Sinn: nach der
* letzten Phase / dem letzten Phenomenon kommt das ornate Wappen mit
* Übergang zur Schwester-Site. Großer visueller Schlussakzent.
* ============================================================================ */
.chx-cross-pole-finale {
margin: 4rem auto 3rem;
padding: 2rem 1rem 1rem;
max-width: 720px;
text-align: center;
position: relative;
}
.chx-cross-pole-finale::before,
.chx-cross-pole-finale::after {
content: '';
display: block;
width: 80px;
height: 1px;
margin: 0 auto 1.4rem;
background: linear-gradient(90deg,
transparent 0%,
var(--chx-finale-accent) 28%,
var(--chx-finale-accent-light) 50%,
var(--chx-finale-accent) 72%,
transparent 100%);
opacity: 0.6;
}
.chx-cross-pole-finale::after { margin: 1.6rem auto 0; }
/* v18.42 · Phase XXI Chazon-Sigil im Finale (Auge in Geometrie) */
.chx-finale-sigil {
display: block;
width: clamp(140px, 22vw, 220px);
height: auto;
margin: 1.8rem auto 1.2rem;
filter: drop-shadow(0 0 40px color-mix(in oklab, var(--chx-finale-accent, var(--chx-elem-gold)) 35%, transparent));
transition: transform 0.6s var(--chx-ease-organic), filter 0.6s var(--chx-ease-organic);
}
.chx-finale-sigil:hover {
transform: rotate(2deg) scale(1.03);
filter: drop-shadow(0 0 60px color-mix(in oklab, var(--chx-finale-accent, var(--chx-elem-gold)) 55%, transparent));
}
.chx-cross-pole-finale-incipit {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-finale-accent) 70%, currentColor);
opacity: 0.78;
margin-bottom: 0.6rem;
}
.chx-cross-pole-finale-title {
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.4rem, 2.4vw, 1.95rem);
line-height: 1.2;
color: inherit;
margin: 0 0 0.4rem;
}
.chx-cross-pole-finale-title em {
font-style: italic;
color: var(--chx-finale-accent);
}
.chx-cross-pole-finale-sub {
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
font-style: italic;
color: color-mix(in oklab, currentColor 70%, transparent);
margin: 0 0 1.6rem;
}
.chx-cross-pole-finale .chx-cartouche {
margin: 0 auto;
max-width: 520px;
}
.chx-cross-pole-finale-caption {
display: block;
margin-top: 1rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in oklab, currentColor 55%, transparent);
}
.chx-cross-pole-finale-caption em {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.86rem;
letter-spacing: 0;
text-transform: none;
color: var(--chx-finale-accent);
margin: 0 0.3rem;
}
/* ============================================================================
* CHX-ANCHOR-RAIL · Vertikale Phasen-/Sektionen-Navigation rechts (v1.8)
*
* Rechts-fixierte Anker-Leiste analog zu illuminated-manuscript marginalia.
* 5 States: default · prev-next · current · dist-2 · hover-rail (alle exp).
* Aktueller Dot ist groß + leuchtet + zeigt Label. Prev/next medium. Andere
* klein. Bei hover über die Rail: alle Labels sichtbar + vertikale Goldader
* als Manuskript-Randlinierung erscheint.
*
* Pattern designed for both /elements/ (rainbow chromatic) and /energies/
* (phase-hue + gold-leaf). Site overridet --rail-ink wenn nötig.
* ============================================================================ */
.chx-rail {
--rail-x: 1.75rem;
--rail-gap: 0.55rem;
--rail-w-label: 13rem;
--rail-fade-ms: 360ms;
--rail-ease: cubic-bezier(.22, .61, .36, 1);
--rail-ink: var(--chx-elem-gold, #c9a44a);
--rail-ink-light: var(--chx-elem-gold-light, #f5deb3);
--rail-ink-dim: color-mix(in oklab, var(--rail-ink) 35%, transparent);
position: fixed;
top: 50%;
right: var(--rail-x);
transform: translateY(-50%);
z-index: 80;
opacity: 0;
pointer-events: none;
transition: opacity var(--rail-fade-ms) var(--rail-ease);
}
.chx-rail.is-visible {
opacity: 1;
pointer-events: auto;
}
.chx-rail.is-idle:not(:hover) {
opacity: 0.55;
}
.chx-rail__track {
list-style: none;
margin: 0;
padding: 0 0 0 12px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--rail-gap);
position: relative;
}
/* Vertical gold hairline · Manuskript-Randlinierung. Permanent (subtle by
default, brighter on hover). Acts as visual rail-spine. */
.chx-rail__track::before {
content: '';
position: absolute;
right: 8px;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
var(--rail-ink) 18%,
var(--rail-ink-light) 50%,
var(--rail-ink) 82%,
transparent 100%);
opacity: 0.32;
transition: opacity var(--rail-fade-ms) var(--rail-ease);
pointer-events: none;
}
.chx-rail:hover .chx-rail__track::before {
opacity: 0.78;
}
.chx-rail__item {
/* FIXED-HEIGHT compact-column. Label is position:absolute so it doesn't
push siblings around — items stay uniform regardless of label state. */
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.chx-rail__dot {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
}
/* v1.50 · a11y · 44×44 unsichtbare Touch-Hitbox um den Glyph.
Outer .chx-rail__item bleibt visuell kompakt (16×16). */
.chx-rail__dot::before {
content: "";
position: absolute;
inset: -14px;
border-radius: var(--chx-radius-pill);
/* Pointer-events captures, kein visueller Effekt */
}
.chx-rail__dot:focus-visible {
outline: none;
}
.chx-rail__dot:focus-visible::before {
box-shadow: var(--chx-focus-ring);
}
.chx-rail__glyph {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rail-ink);
opacity: 0.62;
flex-shrink: 0;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--rail-ink) 35%, transparent);
transition:
width 0.32s var(--rail-ease),
height 0.32s var(--rail-ease),
opacity 0.32s var(--rail-ease),
transform 0.32s var(--rail-ease),
box-shadow 0.32s var(--rail-ease),
background 0.32s var(--rail-ease);
}
.chx-rail__label {
/* Float left of the dot, OUTSIDE layout flow — does not inflate item height.
v18.45: kompakter — padding/font reduziert, weniger Luft. */
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(8px);
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
padding: 0.2rem 0.55rem 0.22rem;
background: color-mix(in oklab, var(--chx-ener-aubergine, #0d0613) 92%, transparent);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border: 0.5px solid color-mix(in oklab, var(--rail-ink) 32%, transparent);
border-radius: 3px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.72rem;
letter-spacing: 0.03em;
white-space: nowrap;
color: color-mix(in oklab, var(--rail-ink-light) 92%, currentColor);
opacity: 0;
transition:
opacity var(--rail-fade-ms) var(--rail-ease),
transform var(--rail-fade-ms) var(--rail-ease);
pointer-events: none;
}
.chx-rail__num {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in oklab, var(--rail-ink) 55%, transparent);
}
/* v1.13 · Sphere prefix in current/hover label · Test-user breadcrumb */
.chx-rail__sphere {
display: block;
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 0.5rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: color-mix(in oklab, var(--rail-ink) 65%, transparent);
opacity: 0.78;
margin-bottom: 2px;
}
/* Label-Layout: sphere stack ↑, num + name inline-baseline */
.chx-rail__label {
flex-direction: column;
align-items: flex-start;
}
.chx-rail__label .chx-rail__num {
margin-bottom: 1px;
}
.chx-rail__label .chx-rail__name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.78rem;
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
}
/* States — driven by data-state attribute */
.chx-rail__item[data-state="prev-next"] .chx-rail__glyph {
width: 9px; height: 9px; opacity: 0.85;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--rail-ink) 50%, transparent),
0 0 6px color-mix(in oklab, var(--rail-ink) 40%, transparent);
}
.chx-rail__item[data-state="dist-2"] .chx-rail__glyph {
width: 7px; height: 7px; opacity: 0.7;
}
.chx-rail__item[data-state="current"] .chx-rail__glyph {
width: 14px; height: 14px; opacity: 1;
background: var(--rail-ink-light);
box-shadow:
0 0 0 2.5px var(--rail-ink),
0 0 18px color-mix(in oklab, var(--rail-ink) 85%, transparent),
0 0 34px color-mix(in oklab, var(--rail-ink) 45%, transparent);
animation: chx-rail-pulse 4.4s ease-in-out infinite;
}
/* Cleanup 2026-05-23: current-Label NICHT automatisch sichtbar machen.
* War: floating Card "Sphäre A · III · 3/20 · Titel" rechts oben, parallel
* zu .chx-module-nav-current (Topbar) → doppelte Phasen-Anzeige.
* Single source of truth für "wo bin ich gerade": .chx-module-nav-current.
* Hover/focus-Tooltip auf individual items bleibt für Desktop-Discovery. */
.chx-rail__item[data-state="current"] .chx-rail__label {
opacity: 0;
transform: translateY(-50%) translateX(8px);
pointer-events: none;
}
@keyframes chx-rail-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
/* v18.45 · Rail-Hover bringt nur dots-glow, KEINE labels mehr en-masse.
User-Feedback: "alle moveovers poppen aufeinmal auf, bitte nur das wo
man tatsächlich mit der maus drauf ist".
Vorher zeigte .chx-rail:hover ALLE Labels → unübersichtlich.
Jetzt: nur Glow auf dots beim rail-hover. Labels NUR auf individual
item-hover/focus. */
.chx-rail:hover .chx-rail__glyph {
opacity: 0.92;
}
.chx-rail:hover .chx-rail__item[data-state="default"] .chx-rail__glyph,
.chx-rail:hover .chx-rail__item[data-state="dist-2"] .chx-rail__glyph {
width: 7px; height: 7px;
}
/* Individual-dot hover: einzelnes label slidet rein. */
.chx-rail__item:hover .chx-rail__label,
.chx-rail__item:focus-within .chx-rail__label {
opacity: 1;
transform: translateY(-50%) translateX(0);
z-index: 5;
}
/* Kompakt-Label: kein sphere-prefix im hover-tooltip, nur num + name. */
.chx-rail__item:not([data-state="current"]):hover .chx-rail__sphere,
.chx-rail__item:not([data-state="current"]):focus-within .chx-rail__sphere {
display: none;
}
.chx-rail__item:hover .chx-rail__glyph {
width: 10px; height: 10px;
opacity: 1;
transform: scale(1.05);
box-shadow:
0 0 0 1.5px var(--rail-ink),
0 0 12px var(--rail-ink);
}
/* Focus ring für keyboard-Nutzer */
.chx-rail__dot:focus-visible {
outline: none;
}
.chx-rail__dot:focus-visible .chx-rail__glyph {
box-shadow:
0 0 0 2px var(--rail-ink-light),
0 0 0 4px color-mix(in oklab, var(--rail-ink) 65%, transparent);
}
/* Individual dot hover */
.chx-rail__dot:hover .chx-rail__glyph {
width: 9px; height: 9px;
opacity: 1;
transform: scale(1.1);
box-shadow: 0 0 10px var(--rail-ink);
}
.chx-rail__dot:hover .chx-rail__label {
color: var(--rail-ink-light);
}
/* Per-item phase-hue support (energies: each phase has own hue, pulls in via --section-hue) */
.chx-rail__item[style*="--section-hue"] .chx-rail__glyph {
background: var(--section-hue, var(--rail-ink));
}
.chx-rail__item[style*="--section-hue"][data-state="current"] .chx-rail__glyph {
background: var(--section-hue, var(--rail-ink-light));
box-shadow:
0 0 0 2px color-mix(in oklab, var(--section-hue, var(--rail-ink)) 55%, transparent),
0 0 14px color-mix(in oklab, var(--section-hue, var(--rail-ink)) 80%, transparent),
0 0 28px color-mix(in oklab, var(--section-hue, var(--rail-ink)) 35%, transparent);
}
/* Mobile <920px: rotate 90° → bottom rail */
@media (max-width: 920px) {
.chx-rail {
top: auto;
right: 50%;
bottom: 14px;
transform: translateX(50%);
--rail-w-label: auto;
}
.chx-rail__track {
flex-direction: row;
align-items: center;
padding: 8px 12px;
gap: 0.42rem;
background: color-mix(in oklab, var(--chx-ener-aubergine, #0d0613) 78%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 999px;
border: 0.5px solid color-mix(in oklab, var(--rail-ink) 22%, transparent);
}
.chx-rail__track::before { display: none; }
/* On mobile, only show current + 2 each side */
.chx-rail__item[data-state="default"] { display: none; }
.chx-rail__item[data-state="dist-2"] { display: flex; }
.chx-rail__label { display: none; }
.chx-rail:hover .chx-rail__label { display: none; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.chx-rail,
.chx-rail__item,
.chx-rail__glyph,
.chx-rail__label,
.chx-rail__track::before { transition: none !important; }
.chx-rail__item[data-state="current"] .chx-rail__glyph { animation: none; }
}
/* ============================================================================
* MODULE-NAV · Sticky-top action bar (slides down on scroll)
*
* 1:1 mirror of elements .module-nav so beide Sites identische sticky-nav
* UI haben. Wird sichtbar wenn body.module-scrolled (oder topbar-collapsed)
* gesetzt ist — i.e. nach scroll past hero.
*
* Auf elements wird body.module-scrolled von elements.js gesetzt.
* Auf energies wird body.topbar-collapsed von v2.js gesetzt — selector
* unten greift beide.
* ============================================================================ */
.module-nav,
.chx-module-nav {
position: fixed;
top: -56px;
left: 0;
right: 0;
height: 48px;
background: rgba(10, 10, 15, 0.92);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-bottom: 1px solid color-mix(in oklab, var(--chx-elem-gold) 18%, transparent);
z-index: 110;
transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.module-scrolled .module-nav,
body.module-scrolled .chx-module-nav,
body.topbar-collapsed .chx-module-nav {
top: 0;
}
.module-nav-inner,
.chx-module-nav-inner {
max-width: 1400px;
margin: 0 auto;
height: 100%;
padding: 0 1.2rem;
display: flex;
align-items: center;
gap: 1.1rem;
}
.module-nav-sigil,
.chx-module-nav-sigil {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--chx-elem-gold);
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--chx-elem-gold) 45%, transparent));
transition: filter 0.6s var(--chx-ease-organic), transform 0.4s var(--chx-ease-organic);
}
.module-nav-sigil svg,
.chx-module-nav-sigil svg {
display: block;
overflow: visible;
}
.module-nav:hover .module-nav-sigil,
.chx-module-nav:hover .chx-module-nav-sigil {
filter: drop-shadow(0 0 7px color-mix(in oklab, var(--chx-elem-gold) 70%, transparent));
transform: rotate(-3deg);
}
.module-nav-current,
.chx-module-nav-current {
flex: 1;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--chx-elem-gold-light);
line-height: 1;
display: flex;
align-items: baseline;
gap: 0.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.module-nav-current .mnc-num,
.chx-module-nav-current .mnc-num {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 0.55rem;
letter-spacing: 0.25em;
color: color-mix(in oklab, var(--chx-elem-gold) 65%, transparent);
text-transform: uppercase;
}
.module-nav-actions,
.chx-module-nav-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}
@media (max-width: 720px) {
.module-nav, .chx-module-nav { height: 44px; }
.module-nav-inner, .chx-module-nav-inner { padding: 0 0.85rem; gap: 0.55rem; }
.module-nav-current, .chx-module-nav-current { font-size: 0.85rem; }
.module-nav-current .mnc-num, .chx-module-nav-current .mnc-num { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.module-nav, .chx-module-nav { transition: none; }
}
/* ============================================================================
* MODULE-NAV-BTN · Shared style für action-buttons in topbars
*
* Mirrors elements .module-nav-btn so beide Sites identische action-button-
* UI haben (1:1 alignment per User-Request). Wird auf energies-topbar
* verwendet für ✦ AI-trigger, kann auf elements unverändert weiter dual-
* coded laufen.
* ============================================================================ */
.module-nav-btn {
background: transparent;
border: 1px solid color-mix(in oklab, var(--chx-elem-gold) 22%, transparent);
color: color-mix(in oklab, var(--chx-elem-gold-light) 60%, currentColor);
width: 32px; height: 32px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.1em;
transition: all 0.18s var(--chx-ease-organic);
}
.module-nav-btn:hover {
background: color-mix(in oklab, var(--chx-elem-gold) 8%, transparent);
color: var(--chx-elem-gold-light);
border-color: var(--chx-elem-gold);
}
.module-nav-btn kbd {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
background: transparent;
}
.module-nav-btn.ai-prominent {
color: var(--chx-elem-gold);
position: relative;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
}
.module-nav-btn.ai-prominent::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 1px solid var(--chx-elem-gold);
opacity: 0;
animation: ai-pulse 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes ai-pulse {
0%, 100% { opacity: 0; transform: scale(0.9); }
35% { opacity: 0.55; transform: scale(1); }
60% { opacity: 0; transform: scale(1.25); }
}
.module-nav-btn.ai-prominent:hover {
background: color-mix(in oklab, var(--chx-elem-gold) 14%, transparent);
color: var(--chx-elem-gold-light);
}
@media (prefers-reduced-motion: reduce) {
.module-nav-btn.ai-prominent::after { animation: none; }
}
/* ============================================================================
* CHX-PASSPORT · Cross-Site visit-tracker badge + Shalem-Mode
*
* Tier-1 #5 aus SOTA-Roadmap. Same-origin localStorage shared zwischen
* /elements/ + /energies/ + /spiegel/. Wer beide Pole besucht hat,
* triggert auf /spiegel/ den "Shalem-Mode" — eine bonus-section mit
* 5 Element-Phase-Brücken + 21. Phase teaser ("Chazon · the seeing of
* seeing"). Wie test-user gefordert: Cross-Pole-Spiegelung wird sichtbar.
*
* localStorage key: chazon_passport_v1 = { elements, energies, spiegel,
* firstVisit, lastVisit }
* ============================================================================ */
/* Badge — small JetBrains-mono pill, gold-tint default, aurora when complete */
.chx-passport-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.32rem 0.85rem 0.36rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold) 65%, currentColor);
background: color-mix(in oklab, var(--chx-elem-gold) 4%, transparent);
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 25%, transparent);
border-radius: 999px;
text-decoration: none;
line-height: 1;
position: relative;
transition: all 0.4s var(--chx-ease-organic);
}
.chx-passport-badge:hover {
border-color: color-mix(in oklab, var(--chx-elem-gold) 55%, transparent);
background: color-mix(in oklab, var(--chx-elem-gold) 8%, transparent);
}
.chx-passport-badge__stars {
letter-spacing: 0.05em;
font-size: 0.7rem;
color: var(--chx-elem-gold);
text-shadow: 0 0 6px color-mix(in oklab, var(--chx-elem-gold) 60%, transparent);
}
.chx-passport-badge__count {
opacity: 0.78;
}
.chx-passport-badge[data-complete="true"] {
background: linear-gradient(135deg,
color-mix(in oklab, var(--chx-elem-gold) 22%, transparent) 0%,
color-mix(in oklab, var(--chx-ener-rosegold) 14%, transparent) 100%);
border-color: var(--chx-elem-gold);
color: var(--chx-elem-gold-light);
animation: chx-passport-aurora 6s ease-in-out infinite;
}
.chx-passport-badge[data-complete="true"] .chx-passport-badge__count {
opacity: 1;
}
@keyframes chx-passport-aurora {
0%, 100% {
box-shadow:
0 0 0 0 transparent,
0 0 14px color-mix(in oklab, var(--chx-elem-gold) 20%, transparent);
}
50% {
box-shadow:
0 0 0 1px color-mix(in oklab, var(--chx-elem-gold) 40%, transparent),
0 0 22px color-mix(in oklab, var(--chx-elem-gold) 45%, transparent),
0 0 38px color-mix(in oklab, var(--chx-ener-rosegold) 22%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.chx-passport-badge[data-complete="true"] { animation: none; }
}
/* SHALEM-MODE · bonus-section on /spiegel/ when both poles visited */
.chx-shalem-mode {
display: none;
margin: 4rem auto 3rem;
max-width: 760px;
padding: 2.8rem 2rem 2.2rem;
position: relative;
background:
radial-gradient(ellipse at top, color-mix(in oklab, var(--chx-elem-gold) 10%, transparent) 0%, transparent 60%),
radial-gradient(ellipse at bottom, color-mix(in oklab, var(--chx-ener-rosegold) 8%, transparent) 0%, transparent 60%),
rgba(7, 5, 11, 0.78);
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 38%, transparent);
border-radius: 8px;
box-shadow:
0 0 60px color-mix(in oklab, var(--chx-elem-gold) 18%, transparent),
0 0 0 1px color-mix(in oklab, var(--chx-elem-gold) 18%, transparent) inset;
text-align: center;
color: color-mix(in oklab, var(--chx-elem-gold-light) 85%, white);
animation: chx-shalem-mode-bloom 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.chx-shalem-mode[data-active="true"] { display: block; }
@keyframes chx-shalem-mode-bloom {
from { opacity: 0; transform: translateY(20px) scale(0.97); filter: blur(6px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.chx-shalem-mode::before,
.chx-shalem-mode::after {
content: '';
position: absolute;
left: 14%; right: 14%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--chx-elem-gold) 22%,
var(--chx-elem-gold-light) 50%,
var(--chx-elem-gold) 78%,
transparent 100%);
opacity: 0.6;
}
.chx-shalem-mode::before { top: 8px; }
.chx-shalem-mode::after { bottom: 8px; }
.chx-shalem-mode__incipit {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--chx-elem-gold);
margin-bottom: 0.7rem;
}
.chx-shalem-mode__title {
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.6rem, 3vw, 2.3rem);
line-height: 1.15;
margin: 0 0 0.7rem;
color: color-mix(in oklab, var(--chx-elem-gold-light) 95%, white);
}
.chx-shalem-mode__title em {
font-style: italic;
color: var(--chx-elem-gold);
}
.chx-shalem-mode__sub {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-style: italic;
line-height: 1.5;
color: color-mix(in oklab, var(--chx-elem-gold-light) 75%, currentColor);
margin: 0 0 1.8rem;
}
.chx-shalem-mode__pairs {
list-style: none;
margin: 0 auto 1.8rem;
padding: 0;
text-align: left;
max-width: 580px;
}
.chx-shalem-mode__pairs li {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.7rem;
align-items: baseline;
padding: 0.55rem 0.4rem;
border-bottom: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 12%, transparent);
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
line-height: 1.3;
}
.chx-shalem-mode__pairs li:last-child { border-bottom: 0; }
.chx-shalem-mode__pairs .csp-out {
text-align: right;
color: color-mix(in oklab, var(--chx-elem-gold) 85%, white);
font-style: italic;
}
.chx-shalem-mode__pairs .csp-arrow {
font-family: 'JetBrains Mono', monospace;
font-size: 0.92rem;
color: var(--chx-elem-gold);
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--chx-elem-gold) 60%, transparent));
}
.chx-shalem-mode__pairs .csp-in {
text-align: left;
color: color-mix(in oklab, var(--chx-ener-rosegold) 85%, white);
font-style: italic;
}
.chx-shalem-mode__tease {
margin: 1.4rem auto 0;
padding-top: 1.4rem;
border-top: 0.5px dashed color-mix(in oklab, var(--chx-elem-gold) 30%, transparent);
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
font-style: italic;
line-height: 1.5;
color: color-mix(in oklab, var(--chx-elem-gold-light) 65%, currentColor);
max-width: 520px;
}
.chx-shalem-mode__tease em {
font-style: italic;
color: var(--chx-elem-gold);
}
.chx-shalem-mode__tease strong {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-style: italic;
color: var(--chx-elem-gold-light);
letter-spacing: 0.01em;
}
@media (max-width: 560px) {
.chx-shalem-mode { padding: 2rem 1.2rem; }
.chx-shalem-mode__pairs li { grid-template-columns: 1fr; gap: 0.2rem; text-align: center; }
.chx-shalem-mode__pairs .csp-out,
.chx-shalem-mode__pairs .csp-in,
.chx-shalem-mode__pairs .csp-arrow { text-align: center; }
}
/* ============================================================================
* CHX-PHASE-REVEAL · Scroll-driven 3-step inszenierung pro Phase
*
* Tier-1 #2 aus SOTA-Roadmap (höchster Wow/Effort-Ratio):
* (a) Watermark phase-num als 18rem cormorant-italic background-mark
* fadet ein + slidet nach oben
* (b) section-title fadet ein in 0.3s delay (post-watermark)
* (c) section-lede + phenom-body settled in stagger
*
* Trigger: html.chx-reveal-active class wird von JS gesetzt — enables
* "hidden until revealed" state. Ohne JS = alles default sichtbar (safe).
* Section gets is-revealed via IntersectionObserver. One-time only.
*
* Reduced-motion: alles instant, kein stagger.
* ============================================================================ */
/* Watermark · large phase-num behind content
* v18.42 · zwei modes:
* - text (default fallback) : .chx-phase-watermark__text shown
* - image (when asset loads) : .chx-phase-watermark__img shown,
* .has-image hides the text
*/
.chx-phase-watermark {
position: absolute;
top: 3rem;
right: clamp(0.5rem, 4vw, 4rem);
width: clamp(120px, 18vw, 280px);
height: auto;
opacity: 0;
transform: translateY(40px) scale(0.96);
transition:
opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
user-select: none;
z-index: 0;
}
.chx-phase-watermark__text {
display: block;
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(6rem, 16vw, 18rem);
line-height: 0.85;
letter-spacing: -0.04em;
color: color-mix(in oklab, var(--chx-elem-gold) 12%, transparent);
text-shadow:
0 0 40px color-mix(in oklab, var(--chx-elem-gold) 18%, transparent),
0 0 90px color-mix(in oklab, var(--chx-elem-gold) 8%, transparent);
}
.chx-phase-watermark__img {
display: none;
width: 100%;
height: auto;
opacity: 0.85;
filter: drop-shadow(0 0 32px color-mix(in oklab, var(--hue, var(--chx-elem-gold)) 25%, transparent));
}
.chx-phase-watermark.has-image .chx-phase-watermark__text { display: none; }
.chx-phase-watermark.has-image .chx-phase-watermark__img { display: block; }
.section.is-revealed .chx-phase-watermark,
.tlw-section.is-revealed .chx-phase-watermark {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 0.1s;
}
/* Per-phase-hue tint when section has --hue inline-style */
.section[data-hue] .chx-phase-watermark__text {
color: color-mix(in oklab, var(--hue, var(--chx-elem-gold)) 12%, transparent);
text-shadow:
0 0 40px color-mix(in oklab, var(--hue, var(--chx-elem-gold)) 22%, transparent),
0 0 90px color-mix(in oklab, var(--hue, var(--chx-elem-gold)) 10%, transparent);
}
/* v18.45 · GLOBAL FIX · Content-Sichtbarkeit ist nicht mehr verhandelbar.
*
* Vorgeschichte: opacity:0-Gating hat Content auf vielen Sections versteckt
* wenn IntersectionObserver nicht zuverlässig triggerte (Sektionen zu groß,
* threshold nie erreicht, JS-crash etc).
*
* Neue Strategie: Content ist IMMER opacity:1. Reveal-Animation nur noch
* über `transform: translateY(22px) → 0` als "Slide-in". Wenn IO triggert →
* .is-revealed → snap to translateY(0). Wenn IO NICHT triggert → kein Hide,
* Content steht halt 22px tiefer (kaum sichtbar) bis zur 1.5s-CSS-failsafe
* animation, die translateY(0) erzwingt.
*
* Ergebnis: Content kann NIE mehr unsichtbar bleiben. */
@keyframes chx-failsafe-translate {
to { transform: translateY(0); }
}
@keyframes chx-failsafe-translate-x {
to { transform: translateX(0); }
}
html.chx-reveal-active .section[data-num] .section-title,
html.chx-reveal-active .section[data-num] .section-lede,
html.chx-reveal-active .section[data-num] .phenom > p {
/* opacity intentionally NOT set — content stays visible always */
transform: translateY(22px);
animation: chx-failsafe-translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s forwards;
}
html.chx-reveal-active .section[data-num] .section-title {
transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: 0.32s;
}
html.chx-reveal-active .section[data-num] .section-lede {
transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: 0.52s;
}
html.chx-reveal-active .section[data-num] .phenom > p {
transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: 0.72s;
}
.section[data-num].is-revealed .section-title,
.section[data-num].is-revealed .section-lede,
.section[data-num].is-revealed .phenom > p {
transform: translateY(0);
animation: none;
}
/* Layers stagger (3 cards) — same pattern: never hide via opacity */
html.chx-reveal-active .section[data-num] .layer {
transform: translateY(16px);
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: chx-failsafe-translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.7s forwards;
}
.section[data-num].is-revealed .layer:nth-of-type(1) { transform: translateY(0); transition-delay: 0.92s; animation: none; }
.section[data-num].is-revealed .layer:nth-of-type(2) { transform: translateY(0); transition-delay: 1.04s; animation: none; }
.section[data-num].is-revealed .layer:nth-of-type(3) { transform: translateY(0); transition-delay: 1.16s; animation: none; }
/* Section-num eyebrow — X-axis slide, never hide */
html.chx-reveal-active .section[data-num] .section-num {
transform: translateX(-10px);
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: 0.18s;
animation: chx-failsafe-translate-x 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.3s forwards;
}
.section[data-num].is-revealed .section-num {
transform: translateX(0);
animation: none;
}
/* Mobile: smaller watermark, less invasive */
@media (max-width: 760px) {
.chx-phase-watermark {
font-size: clamp(5rem, 22vw, 9rem);
top: 1.5rem;
right: 1rem;
}
}
/* Reduced motion: instant snap */
@media (prefers-reduced-motion: reduce) {
.chx-phase-watermark,
html.chx-reveal-active .section[data-num] .section-title,
html.chx-reveal-active .section[data-num] .section-lede,
html.chx-reveal-active .section[data-num] .phenom > p,
html.chx-reveal-active .section[data-num] .layer,
html.chx-reveal-active .section[data-num] .section-num {
transition-duration: 0.01s !important;
transition-delay: 0s !important;
}
}
/* ============================================================================
* CHX-ONBOARD · 3-Step Onboarding-Overlay (first visit, dismissable)
*
* Test-user-finding: "Was ist das hier in 30 Sekunden?" fehlt.
* Lösung: Illuminated-manuscript 3-card-overlay beim first visit. Skip-
* Button + localStorage flag (chazon_onboard_v1). ESC + backdrop-click +
* CTA dismissen. Wird via inline-script per Site initialisiert.
* ============================================================================ */
.chx-onboard {
position: fixed;
inset: 0;
z-index: 2500; /* v27.1 · z-stack-disambig: war 200 = identisch mit cmdp-backdrop, Onboard kann jetzt darüber */
opacity: 0;
pointer-events: none;
transition: opacity 0.55s var(--chx-ease-organic);
}
.chx-onboard.is-visible {
opacity: 1;
pointer-events: auto;
}
.chx-onboard__backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, color-mix(in oklab, var(--chx-ener-aubergine, #07070f) 70%, transparent), color-mix(in oklab, var(--chx-ener-aubergine, #07070f) 95%, transparent)),
rgba(7, 5, 11, 0.88);
backdrop-filter: blur(18px) saturate(1.1);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
cursor: pointer;
}
.chx-onboard__sheet {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateY(20px);
width: min(92vw, 760px);
max-height: 86vh;
padding: 2.4rem 2rem 1.8rem;
background:
radial-gradient(ellipse at top, color-mix(in oklab, var(--chx-elem-gold) 6%, transparent), transparent 60%),
color-mix(in oklab, var(--chx-ener-aubergine, #0d0613) 96%, transparent);
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 28%, transparent);
border-radius: 8px;
box-shadow:
0 30px 80px rgba(0,0,0,0.6),
0 0 60px color-mix(in oklab, var(--chx-elem-gold) 15%, transparent),
0 0 0 1px color-mix(in oklab, var(--chx-elem-gold) 12%, transparent) inset;
color: color-mix(in oklab, var(--chx-elem-gold-light) 85%, white);
overflow: hidden;
transition: transform 0.55s var(--chx-ease-organic);
}
.chx-onboard.is-visible .chx-onboard__sheet {
transform: translate(-50%, -50%) translateY(0);
}
/* Hairline rules top + bottom · illuminated manuscript marginalia */
.chx-onboard__sheet::before,
.chx-onboard__sheet::after {
content: '';
position: absolute;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--chx-elem-gold) 22%,
var(--chx-elem-gold-light) 50%,
var(--chx-elem-gold) 78%,
transparent 100%);
opacity: 0.6;
}
.chx-onboard__sheet::before { top: 6px; }
.chx-onboard__sheet::after { bottom: 6px; }
.chx-onboard__incipit {
display: block;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold) 70%, currentColor);
opacity: 0.85;
margin-bottom: 0.8rem;
}
.chx-onboard__title {
text-align: center;
font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.15;
color: color-mix(in oklab, var(--chx-elem-gold-light) 95%, white);
margin: 0 0 1.8rem;
}
.chx-onboard__title em {
font-style: italic;
color: var(--chx-elem-gold);
}
.chx-onboard__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.9rem;
}
.chx-onboard__step {
position: relative;
padding: 1.2rem 0.85rem 1rem;
background: color-mix(in oklab, var(--chx-elem-gold) 4%, transparent);
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 22%, transparent);
border-radius: 6px;
text-align: center;
transition: all 0.32s var(--chx-ease-organic);
overflow: hidden;
}
/* v18.45 · v4 watercolor backdrop per onboarding-step
tarot-card aesthetic: faded watercolor scene behind text */
.chx-onboard__step::before {
content: '';
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
opacity: 0.18;
transition: opacity 0.45s var(--chx-ease-organic);
pointer-events: none;
mix-blend-mode: lighten;
filter: saturate(0.85);
}
.chx-onboard__step:nth-of-type(1)::before { background-image: url('/shared/assets/v4/cards/onboard-inventory.webp'); }
.chx-onboard__step:nth-of-type(2)::before { background-image: url('/shared/assets/v4/cards/onboard-spiral.webp'); }
.chx-onboard__step:nth-of-type(3)::before { background-image: url('/shared/assets/v4/cards/onboard-celestial.webp'); }
.chx-onboard__step:hover::before { opacity: 0.35; }
.chx-onboard__step > * { position: relative; z-index: 1; }
.chx-onboard__step:hover {
border-color: color-mix(in oklab, var(--chx-elem-gold) 55%, transparent);
background: color-mix(in oklab, var(--chx-elem-gold) 8%, transparent);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.chx-onboard__num {
display: inline-block;
width: 32px; height: 32px; line-height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--chx-elem-gold-light), var(--chx-elem-gold));
color: var(--chx-ener-aubergine, #07070f);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.05rem;
margin-bottom: 0.7rem;
box-shadow: 0 0 12px color-mix(in oklab, var(--chx-elem-gold) 50%, transparent);
}
.chx-onboard__step h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.18rem;
color: color-mix(in oklab, var(--chx-elem-gold-light) 95%, white);
margin: 0 0 0.4rem;
}
.chx-onboard__step h3 em {
font-style: italic;
color: var(--chx-elem-gold);
}
.chx-onboard__step p {
font-family: 'Cormorant Garamond', serif;
font-size: 0.92rem;
line-height: 1.45;
color: color-mix(in oklab, var(--chx-elem-gold-light) 75%, currentColor);
margin: 0 0 0.7rem;
}
.chx-onboard__step a {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chx-elem-gold);
text-decoration: none;
border-bottom: 0.5px dotted color-mix(in oklab, var(--chx-elem-gold) 50%, transparent);
}
.chx-onboard__step a:hover {
color: var(--chx-elem-gold-light);
border-bottom-color: var(--chx-elem-gold-light);
}
.chx-onboard__cta,
.chx-onboard__skip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.65rem 1.4rem;
margin: 1.6rem 0.45rem 0;
background: transparent;
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 38%, transparent);
border-radius: 999px;
color: color-mix(in oklab, var(--chx-elem-gold-light) 90%, white);
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.32s var(--chx-ease-organic);
}
.chx-onboard__cta {
background: linear-gradient(135deg,
color-mix(in oklab, var(--chx-elem-gold) 20%, transparent),
color-mix(in oklab, var(--chx-elem-gold) 8%, transparent));
border-color: var(--chx-elem-gold);
color: var(--chx-elem-gold-light);
}
.chx-onboard__cta:hover,
.chx-onboard__skip:hover {
background: color-mix(in oklab, var(--chx-elem-gold) 15%, transparent);
border-color: var(--chx-elem-gold-light);
transform: translateY(-1px);
}
.chx-onboard__footer {
text-align: center;
margin-top: 1.4rem;
}
.chx-onboard__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px; height: 32px;
background: transparent;
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 30%, transparent);
border-radius: 50%;
color: color-mix(in oklab, var(--chx-elem-gold) 70%, currentColor);
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: all 0.25s var(--chx-ease-organic);
}
.chx-onboard__close:hover {
border-color: var(--chx-elem-gold);
color: var(--chx-elem-gold-light);
transform: rotate(90deg);
}
/* Mobile: stack steps vertically */
@media (max-width: 720px) {
.chx-onboard__sheet {
padding: 1.8rem 1.2rem 1.2rem;
width: 94vw;
max-height: 92vh;
overflow-y: auto;
}
.chx-onboard__title { font-size: 1.4rem; margin-bottom: 1.2rem; }
.chx-onboard__steps { grid-template-columns: 1fr; gap: 0.7rem; }
.chx-onboard__step { padding: 0.95rem 0.85rem; }
.chx-onboard__num { width: 28px; height: 28px; line-height: 28px; font-size: 0.95rem; }
.chx-onboard__step h3 { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
.chx-onboard, .chx-onboard__sheet { transition: opacity 0.01s, transform 0.01s; }
.chx-onboard__close:hover { transform: none; }
}
/* ============================================================================
* CHX-START-HERE · "Start hier · 5 Schritte" curated tour pill
*
* Test-user-finding: bei 20 Phasen / 118 Elementen will der user keine
* Vollkontakt — er will eine 5-Min-Tour. Pill mit dropdown-Anchorliste.
* Wird per Site mit eigenen 5 curated anchors gefüllt.
* ============================================================================ */
.chx-start-here {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 1rem 0.55rem 0.7rem;
background:
linear-gradient(135deg,
color-mix(in oklab, var(--chx-elem-gold) 14%, transparent),
color-mix(in oklab, var(--chx-elem-gold) 4%, transparent));
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 42%, transparent);
border-radius: 999px;
color: color-mix(in oklab, var(--chx-elem-gold-light) 90%, white);
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.32s var(--chx-ease-organic);
position: relative;
}
.chx-start-here::before {
content: '✦';
font-family: 'Cormorant Garamond', serif;
font-size: 0.92rem;
color: var(--chx-elem-gold);
filter: drop-shadow(0 0 4px var(--chx-elem-gold));
}
.chx-start-here:hover {
background: color-mix(in oklab, var(--chx-elem-gold) 18%, transparent);
border-color: var(--chx-elem-gold);
transform: translateY(-1px);
box-shadow: 0 8px 22px color-mix(in oklab, var(--chx-elem-gold) 22%, transparent);
}
.chx-start-here[aria-expanded="true"] {
border-color: var(--chx-elem-gold);
color: var(--chx-elem-gold-light);
}
.chx-start-here-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 320px;
padding: 0.6rem;
background:
radial-gradient(ellipse at top, color-mix(in oklab, var(--chx-elem-gold) 5%, transparent), transparent 60%),
color-mix(in oklab, var(--chx-ener-aubergine, #0d0613) 96%, transparent);
border: 0.5px solid color-mix(in oklab, var(--chx-elem-gold) 30%, transparent);
border-radius: 6px;
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
box-shadow: 0 18px 44px rgba(0,0,0,0.4);
list-style: none;
margin: 0;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: all 0.32s var(--chx-ease-organic);
z-index: 70;
}
.chx-start-here[aria-expanded="true"] + .chx-start-here-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.chx-start-here-menu li {
margin: 0;
}
.chx-start-here-menu a {
display: flex;
align-items: baseline;
gap: 0.7rem;
padding: 0.6rem 0.7rem;
text-decoration: none;
color: color-mix(in oklab, var(--chx-elem-gold-light) 85%, white);
border-radius: 4px;
transition: background 0.18s, color 0.18s;
}
.chx-start-here-menu a:hover {
background: color-mix(in oklab, var(--chx-elem-gold) 10%, transparent);
color: var(--chx-elem-gold-light);
}
.chx-start-here-menu .csh-num {
font-family: 'JetBrains Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chx-elem-gold);
min-width: 1.4rem;
}
.chx-start-here-menu .csh-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.98rem;
flex: 1;
}
.chx-start-here-menu .csh-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 0.56rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold) 60%, currentColor);
opacity: 0.72;
}
@media (max-width: 560px) {
.chx-start-here-menu { min-width: 280px; left: 0; right: auto; }
}
/* ============================================================================
* CHX-AI-FAB · Floating AI-Call-to-Action Button (shared across sites)
*
* Identische Optik auf beiden Sites: pill-shape mit avatar/sigil + label +
* gold-accent backdrop-blur. Energies: triggert Seherin-panel.
* Elements: triggert tutor-drawer.
*
* Auf mobile <760px: shrinkt zu icon-only circle bottom-right (Avatar
* bleibt sichtbar, label hidden) — analog zu seer-fab v18.20 collapsed.
* ============================================================================ */
.chx-ai-fab {
position: fixed;
bottom: 22px;
right: 22px;
z-index: 130;
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background:
linear-gradient(135deg,
color-mix(in oklab, var(--chx-elem-gold) 18%, transparent) 0%,
color-mix(in oklab, var(--chx-elem-gold) 6%, transparent) 100%),
rgba(7, 7, 15, 0.86);
border: 1px solid color-mix(in oklab, var(--chx-elem-gold) 42%, transparent);
border-radius: 999px;
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
color: color-mix(in oklab, var(--chx-elem-gold-light) 92%, white);
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
box-shadow:
0 12px 32px rgba(0,0,0,0.5),
0 0 24px color-mix(in oklab, var(--chx-elem-gold) 15%, transparent);
transition:
all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
padding 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
overflow: hidden;
}
.chx-ai-fab:hover {
border-color: var(--chx-elem-gold);
transform: translateY(-2px);
box-shadow:
0 16px 42px rgba(0,0,0,0.55),
0 0 36px color-mix(in oklab, var(--chx-elem-gold) 32%, transparent);
}
.chx-ai-fab__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1.5px solid color-mix(in oklab, var(--chx-elem-gold) 55%, transparent);
background: color-mix(in oklab, var(--chx-elem-gold) 25%, transparent);
}
.chx-ai-fab__sigil {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--chx-elem-gold-light), var(--chx-elem-gold));
color: var(--chx-ener-aubergine, #07070f);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.2rem;
font-weight: 600;
flex-shrink: 0;
}
.chx-ai-fab__label {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
line-height: 1.2;
white-space: nowrap;
max-width: 200px;
opacity: 1;
transition: max-width 0.4s, opacity 0.3s;
}
.chx-ai-fab__label-main {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.92rem;
letter-spacing: 0;
text-transform: none;
color: color-mix(in oklab, var(--chx-elem-gold-light) 95%, white);
}
.chx-ai-fab__label-sub {
font-size: 0.54rem;
letter-spacing: 0.22em;
opacity: 0.72;
}
.chx-ai-fab__pulse {
position: absolute;
left: 6px; top: 50%;
width: 42px; height: 42px;
margin-top: -21px;
border-radius: 50%;
border: 1.5px solid color-mix(in oklab, var(--chx-elem-gold) 50%, transparent);
animation: chx-ai-fab-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes chx-ai-fab-pulse {
0% { transform: scale(0.85); opacity: 0.65; }
100% { transform: scale(1.65); opacity: 0; }
}
/* Collapsed state — triggered by body class (e.g. topbar-collapsed in energies,
or module-scrolled in elements). Shrinks to icon-only. */
body.topbar-collapsed .chx-ai-fab,
body.module-scrolled .chx-ai-fab.is-collapsed {
padding: 0.4rem;
gap: 0;
}
body.topbar-collapsed .chx-ai-fab .chx-ai-fab__label,
body.module-scrolled .chx-ai-fab.is-collapsed .chx-ai-fab__label {
max-width: 0;
opacity: 0;
}
body.topbar-collapsed .chx-ai-fab .chx-ai-fab__avatar,
body.topbar-collapsed .chx-ai-fab .chx-ai-fab__sigil {
width: 34px; height: 34px;
}
body.topbar-collapsed .chx-ai-fab .chx-ai-fab__pulse {
width: 38px; height: 38px;
margin-top: -19px;
}
/* Mobile <760px: smaller, leave room for rail bottom-pill */
@media (max-width: 760px) {
.chx-ai-fab {
bottom: 70px; /* leave room for the bottom-rail-pill */
right: 14px;
padding: 0.4rem;
gap: 0;
}
.chx-ai-fab__label { display: none; }
.chx-ai-fab__avatar,
.chx-ai-fab__sigil { width: 36px; height: 36px; }
.chx-ai-fab__pulse { width: 40px; height: 40px; left: 5px; margin-top: -20px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.chx-ai-fab,
.chx-ai-fab__label,
.chx-ai-fab__pulse { transition: none; animation: none; }
}
/* ============================================================================
* CHX-FOOT · Symmetrischer 3-col Footer für beide Sites
*
* Audit Finding (Cross-Pole #7): elements hatte 4-Zeilen-Mini-Footer,
* energies einen 3-col-Apparat. Asymmetrisch.
*
* Lösung: shared component .chx-foot mit drei Spalten — Mission/Quellen/
* Stack — die beide Sites mit ihren site-specific Inhalten füllen. Optik
* identisch; Inhalt natürlich verschieden (außen Mendelejew/Wu-Xing,
* innen Beck/Cowen/HeartMath). Foot-bottom enthält den Spiegel-Link.
* ============================================================================ */
.chx-foot {
padding-block: 5rem 3rem;
border-top: 1px solid color-mix(in oklab, var(--chx-elem-gold) 12%, transparent);
margin-top: 6rem;
position: relative;
}
.chx-foot::before {
/* hairline rule analog zur cartouche-finale: signalisiert "Schluss-Kapitel" */
content: '';
position: absolute;
top: -1px;
left: 50%;
width: 240px;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg,
transparent 0%,
var(--chx-finale-accent) 22%,
var(--chx-finale-accent-light) 50%,
var(--chx-finale-accent) 78%,
transparent 100%);
opacity: 0.7;
}
.chx-foot-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (min-width: 720px) {
.chx-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.chx-foot h3 {
font: 500 0.74rem/1 'JetBrains Mono', monospace;
color: color-mix(in oklab, var(--chx-finale-accent) 60%, currentColor);
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 0 0 1rem;
opacity: 0.78;
}
.chx-foot-mission {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.12rem;
line-height: 1.45;
color: inherit;
max-width: 42ch;
margin: 0;
}
.chx-foot-mission em {
font-style: italic;
color: var(--chx-finale-accent);
}
.chx-foot-byline {
display: block;
margin-top: 1.4rem;
font: 500 0.7rem/1 'JetBrains Mono', monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in oklab, currentColor 55%, transparent);
opacity: 0.78;
}
.chx-foot ul {
list-style: none;
padding: 0;
margin: 0;
}
.chx-foot li {
margin-bottom: 0.42rem;
font-family: 'Cormorant Garamond', serif;
font-size: 0.94rem;
line-height: 1.4;
color: color-mix(in oklab, currentColor 78%, transparent);
}
.chx-foot li em {
font-style: italic;
color: var(--chx-finale-accent);
margin-right: 0.18rem;
}
.chx-foot li .chx-foot-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.08em;
color: color-mix(in oklab, currentColor 50%, transparent);
margin-left: 0.32rem;
}
.chx-foot a {
color: inherit;
text-decoration: none;
border-bottom: 0.5px dotted color-mix(in oklab, currentColor 35%, transparent);
transition: color 0.25s var(--chx-ease-organic), border-color 0.25s var(--chx-ease-organic);
}
.chx-foot a:hover {
color: var(--chx-finale-accent);
border-bottom-color: var(--chx-finale-accent);
}
.chx-foot-bottom {
max-width: 1100px;
margin: 3.5rem auto 0;
padding: 1.6rem 1.5rem 0;
border-top: 1px solid color-mix(in oklab, var(--chx-elem-gold) 10%, transparent);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem 1.4rem;
font: 500 0.72rem/1.4 'JetBrains Mono', monospace;
letter-spacing: 0.06em;
color: color-mix(in oklab, currentColor 55%, transparent);
}
.chx-foot-bottom em {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.88rem;
letter-spacing: 0;
text-transform: none;
color: var(--chx-finale-accent);
}
@media (max-width: 720px) {
.chx-foot { padding-block: 3.5rem 2rem; margin-top: 4rem; }
.chx-foot-bottom { flex-direction: column; align-items: flex-start; margin-top: 2.5rem; }
}
@media (max-width: 560px) {
.chx-cross-pole-finale { margin: 3rem auto 2rem; padding: 1.4rem 0.8rem 0.6rem; }
.chx-cross-pole-finale-title { font-size: 1.3rem; }
.chx-cross-pole-finale .chx-cartouche { max-width: 340px; }
}
/* ---------- SHEET 3 · Pendants (4×5 → 20 phase-bridges) ----------
* Inline-badge neighbour for .chx-mirror pillen.
* Markup:
* ----------------------------------------------------------------- */
.chx-pendant {
display: inline-block;
width: 48px;
height: 48px;
flex-shrink: 0;
background: no-repeat center / contain;
vertical-align: middle;
}
.chx-pendant-i-ii { background-image: url(/shared/assets/cross-pole/pendants/pendant-i-ii.webp); }
.chx-pendant-ii-iii { background-image: url(/shared/assets/cross-pole/pendants/pendant-ii-iii.webp); }
.chx-pendant-iii-iv { background-image: url(/shared/assets/cross-pole/pendants/pendant-iii-iv.webp); }
.chx-pendant-iv-v { background-image: url(/shared/assets/cross-pole/pendants/pendant-iv-v.webp); }
.chx-pendant-v-vi { background-image: url(/shared/assets/cross-pole/pendants/pendant-v-vi.webp); }
.chx-pendant-vi-vii { background-image: url(/shared/assets/cross-pole/pendants/pendant-vi-vii.webp); }
.chx-pendant-vii-viii { background-image: url(/shared/assets/cross-pole/pendants/pendant-vii-viii.webp); }
.chx-pendant-viii-ix { background-image: url(/shared/assets/cross-pole/pendants/pendant-viii-ix.webp); }
.chx-pendant-ix-x { background-image: url(/shared/assets/cross-pole/pendants/pendant-ix-x.webp); }
.chx-pendant-x-xi { background-image: url(/shared/assets/cross-pole/pendants/pendant-x-xi.webp); }
.chx-pendant-xi-xii { background-image: url(/shared/assets/cross-pole/pendants/pendant-xi-xii.webp); }
.chx-pendant-xii-xiii { background-image: url(/shared/assets/cross-pole/pendants/pendant-xii-xiii.webp); }
.chx-pendant-xiii-xiv { background-image: url(/shared/assets/cross-pole/pendants/pendant-xiii-xiv.webp); }
.chx-pendant-xiv-xv { background-image: url(/shared/assets/cross-pole/pendants/pendant-xiv-xv.webp); }
.chx-pendant-xv-xvi { background-image: url(/shared/assets/cross-pole/pendants/pendant-xv-xvi.webp); }
.chx-pendant-xvi-xvii { background-image: url(/shared/assets/cross-pole/pendants/pendant-xvi-xvii.webp); }
.chx-pendant-xvii-xviii { background-image: url(/shared/assets/cross-pole/pendants/pendant-xvii-xviii.webp); }
.chx-pendant-xviii-xix { background-image: url(/shared/assets/cross-pole/pendants/pendant-xviii-xix.webp); }
.chx-pendant-xix-xx { background-image: url(/shared/assets/cross-pole/pendants/pendant-xix-xx.webp); }
.chx-pendant-xx { background-image: url(/shared/assets/cross-pole/pendants/pendant-xx.webp); }
@media (max-width: 640px) {
.chx-pendant { width: 36px; height: 36px; }
}
/* ---------- SHEET 4 · Element-Transitions (5×1) ----------
* Hero-backplate behind phase headings on both sites.
* Markup: …
* --------------------------------------------------------- */
.chx-transition {
position: absolute;
inset: 0;
background: no-repeat center / cover;
opacity: 0.35;
pointer-events: none;
mix-blend-mode: screen;
}
/* Hero-backdrop variant — sits behind a phase's hero/header zone only.
Sub-class: limits height to top ~60vh, much lower opacity so it never
competes with reading content. Fades to transparent at the bottom. */
.chx-transition.chx-transition--hero-backdrop {
top: 0;
bottom: auto;
height: 62vh;
max-height: 720px;
opacity: 0.16;
-webkit-mask-image: linear-gradient(180deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.85) 55%,
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.85) 55%,
rgba(0,0,0,0) 100%);
z-index: 0;
}
/* Make sure children of section render above the backdrop */
.section > .chx-transition.chx-transition--hero-backdrop + * {
position: relative;
z-index: 1;
}
.section > .wrap,
.section > .wrap-narrow {
position: relative;
z-index: 1;
}
.chx-transition-fire { background-image: url(/shared/assets/cross-pole/transitions/transition-fire.webp); }
.chx-transition-water { background-image: url(/shared/assets/cross-pole/transitions/transition-water.webp); }
.chx-transition-air { background-image: url(/shared/assets/cross-pole/transitions/transition-air.webp); }
.chx-transition-earth { background-image: url(/shared/assets/cross-pole/transitions/transition-earth.webp); }
.chx-transition-source { background-image: url(/shared/assets/cross-pole/transitions/transition-source.webp); }
/* ---------- SHEET 5 · Spiegel-Hero (single 16:9) ----------
* Fullscreen parallax background for the future /spiegel/ hub.
* Markup:
* ---------------------------------------------------------- */
.chx-spiegel-hero-bg {
position: absolute;
inset: 0;
background: url(/shared/assets/cross-pole/spiegel-hero/spiegel-hero.webp) no-repeat center / cover;
opacity: 0.55;
pointer-events: none;
}
/* ============================================================================
* v1.10 · MOBILE-PASS · Polish für <760px viewports
*
* Sicherstellt dass alle shared-components auf mobile zusammenwirken:
* rail (bottom-pill), ai-fab (icon-only), lang-toggle, sister-link.
* ============================================================================ */
@media (max-width: 760px) {
/* Rail bottom-pill — refine spacing so it doesn't collide with ai-fab */
.chx-rail {
bottom: 14px;
/* center horizontally but offset right so ai-fab + rail can coexist */
right: 50%;
transform: translateX(50%);
}
.chx-rail__track {
/* Compact bottom-pill with backdrop-blur */
padding: 6px 10px;
}
/* Sister-link in topbar: icon-only on phone */
.chx-sister-link--compact .chx-sister-name { display: none; }
.chx-sister-link.chx-sister-link--compact { padding: 0.4rem 0.55rem; }
/* Lang-toggle compact on mobile */
.chx-lang-toggle {
padding: 0.7rem 0.55rem 0.5rem;
font-size: 0.6rem;
letter-spacing: 0.24em;
}
.chx-lang-btn { width: 1.8rem; }
.chx-lang-toggle[data-active="en"] .chx-lang-rubric { transform: translateX(2.9rem); }
}
/* Very small phones <480px */
@media (max-width: 480px) {
.chx-rail {
bottom: 10px;
}
.chx-rail__track {
gap: 0.35rem;
padding: 5px 8px;
}
.chx-rail__glyph { width: 5px !important; height: 5px !important; }
.chx-rail__item[data-state="current"] .chx-rail__glyph { width: 9px !important; height: 9px !important; }
.chx-rail__item[data-state="prev-next"] .chx-rail__glyph { width: 7px !important; height: 7px !important; }
.chx-ai-fab {
bottom: 64px; /* above rail */
right: 12px;
}
}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
.chx-rail,
.chx-ai-fab,
.chx-lang-toggle,
.chx-sister-link { transition-duration: 0.01s !important; }
}
/* ============================================================
* v18.45 · CROSS-POLE TYPOGRAPHY POLISH (shared)
* ----------------------------------------------------------------
* Vellum-Manuskript-Schriftsatz für die Komponenten, die auf BEIDEN
* Polen gerendert werden (energies + elements). Spiegelt die
* Disziplin aus energies-v2.css line 6037+ auf cross-pole-DOM.
*
* · chx-mirror-target: pretty wrap (kurz · keine hyphens)
* · chx-cross-pole-finale-*: balanced + sane reading widths
* · chx-shalem-mode-*: zentriert + pretty wrap
* · chx-onboard__step p: centered + hyphens für 3-col-grid
* ============================================================ */
.chx-mirror-target {
text-wrap: pretty;
}
.chx-cross-pole-finale-title {
text-wrap: balance;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.chx-cross-pole-finale-sub {
max-width: 48ch;
margin-left: auto;
margin-right: auto;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
.chx-shalem-mode__title {
text-wrap: balance;
max-width: 26ch;
margin-left: auto;
margin-right: auto;
}
.chx-shalem-mode__sub,
.chx-shalem-mode__tease {
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
}
.chx-onboard__title {
text-wrap: balance;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.chx-onboard__step h3 {
text-wrap: balance;
}
.chx-onboard__step p {
text-align: center;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
@media (max-width: 760px) {
/* On mobile the cross-pole-finale-title gets a touch more breath */
.chx-cross-pole-finale-title { max-width: 92vw; }
.chx-cross-pole-finale-sub { max-width: 92vw; }
.chx-onboard__title { max-width: 92vw; }
}
/* ============================================================
* END · v18.45 CROSS-POLE TYPOGRAPHY POLISH
* ============================================================ */
/* ============================================================================
* v25 · CHX-AI-STREAM-FRAME · Peak-Streaming-UI-Pattern
*
* Shared component für AI-Streaming-Output (Tutor · Seherin ·
* Granularität · Reaction Lab · Emotion-Cartography).
*
* Drei Hochpunkte (Audit 2026-05-19):
* · Acc-P0 → aria-live + aria-busy
* · Peak-#1 → Tool-Call Glasspane (default kollabiert)
* · Peak-#3 → Skeleton-first Structured Streaming
*
* Token-Klasse-Prefix: .chx-ai-*
* ============================================================================ */
.chx-ai-frame {
display: flex;
flex-direction: column;
gap: 1rem;
font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
color: var(--chx-elem-text, #ead7c8);
}
/* ---------- Slots (Skeleton-first) ---------- */
.chx-ai-slots { display: flex; flex-direction: column; gap: 1.1rem; }
.chx-ai-slot { position: relative; min-height: 1.4em; }
.chx-ai-slot-label {
display: block;
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 75%, transparent);
margin-bottom: 0.4rem;
opacity: 0.85;
}
.chx-ai-slot-content {
display: block;
font-size: 1.02rem;
line-height: 1.65;
color: var(--chx-elem-text, #ead7c8);
white-space: pre-wrap;
}
.chx-ai-slot[data-filled="true"] .chx-ai-slot-content {
animation: chx-ai-slot-in 0.4s cubic-bezier(.2,.7,.2,1);
}
@keyframes chx-ai-slot-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.chx-ai-slot-skeleton { display: flex; flex-direction: column; gap: var(--chx-space-2); }
.chx-ai-slot[data-filled="true"] .chx-ai-slot-skeleton { display: none; }
.chx-ai-skel-line {
display: block;
height: 0.85em;
width: var(--w, 75%);
border-radius: var(--chx-radius-xs);
background:
linear-gradient(
90deg,
color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 8%, transparent) 0%,
color-mix(in oklab, var(--chx-finale-accent-light, #f5deb3) 28%, transparent) 50%,
color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 8%, transparent) 100%
);
background-size: 200% 100%;
animation: chx-ai-shimmer 1.6s var(--chx-ease-out-quint) infinite;
/* sanfter Phosphor-Breath als Sekundär-Layer, Opacity-Atmen */
position: relative;
box-shadow: inset 0 0 0 0.5px color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 16%, transparent);
}
@keyframes chx-ai-shimmer {
0% { background-position: 100% 0; opacity: 0.7; }
50% { opacity: 1; }
100% { background-position: -100% 0; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
.chx-ai-skel-line {
animation: none;
background: color-mix(in oklab, var(--chx-finale-accent, #c9a44a) 14%, transparent);
opacity: 0.6;
}
}
/* ---------- Tool-Call Glasspane (Peak-Pattern #1) ---------- */
.chx-ai-toolpane {
margin-top: 0.4rem;
background: linear-gradient(180deg, rgba(20, 14, 28, 0.45), rgba(10, 7, 16, 0.65));
border: 1px solid color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 16%, transparent);
border-radius: 8px;
backdrop-filter: blur(8px) saturate(1.1);
-webkit-backdrop-filter: blur(8px) saturate(1.1);
overflow: hidden;
transition: border-color 0.4s, background 0.4s;
}
.chx-ai-toolpane:hover {
border-color: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 32%, transparent);
}
.chx-ai-toolpane-summary {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 0.9rem;
cursor: pointer;
list-style: none;
user-select: none;
font-family: 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 78%, transparent);
}
.chx-ai-toolpane-summary::-webkit-details-marker { display: none; }
.chx-ai-toolpane-summary::marker { display: none; }
.chx-ai-toolpane-icon {
display: inline-block;
font-size: 0.75rem;
transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.chx-ai-toolpane[open] .chx-ai-toolpane-icon { transform: rotate(180deg); }
.chx-ai-toolpane-label { flex: 1; }
.chx-ai-toolpane-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4em;
height: 1.4em;
padding: 0 0.35em;
border: 1px solid color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 28%, transparent);
border-radius: 999px;
font-size: 0.62rem;
letter-spacing: 0;
color: var(--chx-elem-gold, #c9a44a);
}
.chx-ai-toolpane-list {
list-style: none;
margin: 0; padding: 0 0.9rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
border-top: 1px solid color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 12%, transparent);
}
.chx-ai-toolpane-item {
padding: 0.6rem 0;
border-bottom: 1px solid color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 8%, transparent);
}
.chx-ai-toolpane-item:last-child { border-bottom: none; padding-bottom: 0; }
.chx-ai-toolpane-item-head {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
}
.chx-ai-toolpane-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.chx-ai-toolpane-item[data-status="running"] .chx-ai-toolpane-dot {
background: var(--chx-elem-gold, #c9a44a);
animation: chx-ai-pulse 1.2s ease-in-out infinite;
}
.chx-ai-toolpane-item[data-status="done"] .chx-ai-toolpane-dot { background: #88c977; }
.chx-ai-toolpane-item[data-status="error"] .chx-ai-toolpane-dot { background: #d36b6b; }
.chx-ai-toolpane-item[data-status="queued"] .chx-ai-toolpane-dot {
background: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 35%, transparent);
}
@keyframes chx-ai-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.25); }
}
.chx-ai-toolpane-name {
flex: 1;
color: var(--chx-elem-text-bright, #faf2e8);
font-weight: 500;
letter-spacing: 0.04em;
}
.chx-ai-toolpane-item-status {
font-size: 0.56rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 65%, transparent);
}
.chx-ai-toolpane-args,
.chx-ai-toolpane-result {
margin: 0.4rem 0 0 1.2rem;
padding: 0.5rem 0.7rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
line-height: 1.5;
color: color-mix(in oklab, var(--chx-elem-text, #ead7c8) 85%, transparent);
background: rgba(0, 0, 0, 0.32);
border-left: 2px solid color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 28%, transparent);
border-radius: 0 4px 4px 0;
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
.chx-ai-toolpane-result {
border-left-color: #88c977;
color: var(--chx-elem-text-bright, #faf2e8);
}
/* ---------- Status-Footer (live-region) ---------- */
.chx-ai-status {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 55%, transparent);
min-height: 0.85em;
transition: opacity 0.3s;
}
.chx-ai-frame[data-state="error"] .chx-ai-status { color: #d36b6b; }
/* ---------- Reduced-Motion · component-level ---------- */
@media (prefers-reduced-motion: reduce) {
.chx-ai-skel-line {
animation: none !important;
background: color-mix(in oklab, var(--chx-elem-gold, #c9a44a) 16%, transparent) !important;
}
.chx-ai-slot[data-filled="true"] .chx-ai-slot-content { animation: none !important; }
.chx-ai-toolpane-icon { transition: none !important; }
.chx-ai-toolpane-item[data-status="running"] .chx-ai-toolpane-dot { animation: none !important; }
}
/* ---------- Mobile-First ---------- */
@media (max-width: 600px) {
.chx-ai-toolpane-summary { font-size: 0.58rem; }
.chx-ai-toolpane-args,
.chx-ai-toolpane-result {
margin-left: 0.6rem;
font-size: 0.65rem;
}
}
/* ============================================================================
* v25 · CHX-M-HELP · "Was sehe ich hier?" Cognitive-Load-Helper
*
* Acc-Audit P2 #12: komplexe Visualisierungen (Plutchik-Wheel, Orch-OR-Geometrie,
* Dark-Matter-Karte, Quark-Layer) brauchen für Erst-Besucher einen TL;DR-Lead.
*
* Pattern: Was sehe ich hier?
* 3-Satz-Erklärung