/* CiSmart Aurora — generated from tokens.json */
:root, [data-theme="dark"] {
  --cs-color-teal: #00fcca; /* Signal. NUR CTAs (Primary-Button), Ci-Punkt, Leuchtpunkte, Status-Positiv. Nie als Text auf Paper (1,3:1). Text darauf: cs-on-teal. */
  --cs-color-teal-soft: #4fe3c5; /* Entsättigtes Teal für Linien, Icons und Text-Akzente auf Dunkel (12,3:1 auf cs-ink-950). Auf Paper nicht verwenden. */
  --cs-color-teal-deep: #00a382; /* Teal auf hellen Flächen (Akzentlinie, Icons in cs-theme-paper). 3,1:1 auf cs-paper: nur für Icons, Linien und Text ab 24px, nicht für Fließtext. */
  --cs-color-violet: #7c5cff; /* Tiefe. Verläufe, Glows, sekundäre Flächen-Akzente. Als Text nur ab 24px (4,5:1 auf cs-ink-950). */
  --cs-color-violet-soft: #9b82ff; /* Sekundäre Text-Akzente und Info-Status auf Dunkel (6,6:1 auf cs-ink-950). */
  --cs-color-violet-deep: #5a3bd9; /* Dunkles Violett für Verlaufsenden und gedrückte Zustände. */
  --cs-ink-1000: #06060c; /* Tiefste Fläche: Sidebars, Footer-Grund. */
  --cs-ink-950: #0a0a14; /* Standard-Seitenhintergrund (Dark). Nie #000 verwenden. */
  --cs-ink-900: #101019; /* Angehobene Fläche (cs-bg-raised), Dark-Button, Panels. */
  --cs-ink-800: #1b1b27; /* Tooltips, Avatar-Fallback, Ink-Kreis. */
  --cs-ink-700: #272736; /* Tracks von Switch, Slider, Progress und Ring; Avatar-Grund. */
  --cs-ink-500: #535568; /* Inaktive Status-Punkte, Verlaufsbeginn der Ci-Tile. */
  --cs-ink-300: #a2a4b6; /* Hellster Neutralton der Ink-Skala; nur Dekor, kein Text-Token (Text ist Weiß mit Opazität). */
  --cs-paper: #fbfbfd; /* Heller Sektions-Hintergrund (cs-theme-paper). */
  --cs-paper-2: #f1f1f6; /* Zweite helle Fläche, z. B. abgesetzte Bänder in hellen Sektionen. */
  --cs-bg: var(--cs-ink-950); /* Semantischer Seiten-/Sektionsgrund. Komponenten nutzen nur diesen, nie direkt Ink oder Paper. */
  --cs-bg-raised: var(--cs-ink-900); /* Angehobene Flächen über cs-bg. */
  --cs-text-high: rgba(255,255,255,.92); /* Headlines und betonter Text auf cs-bg und cs-bg-raised (16:1 in beiden Themes). */
  --cs-text-mid: rgba(255,255,255,.64); /* Fließtext, Lead, Labels auf cs-bg und cs-bg-raised (8,2:1 Dark, 5,6:1 Paper). */
  --cs-text-low: rgba(255,255,255,.40); /* Mono-Eyebrows, Meta, Placeholder auf cs-bg. Achtung: 3,8:1 (Dark) bzw. 2,8:1 (Paper), unter AA für kleinen Text. Wert aus der Quelle übernommen; nicht für inhaltstragenden Text verwenden. */
  --cs-hairline: rgba(255,255,255,.08); /* Standard-Border von Cards, Sektionen, Tabellen. */
  --cs-hairline-2: rgba(255,255,255,.15); /* Kräftigere Hairline: Inputs, Ghost-Button, Orbit-Bahn, Kontur-Kreise. */
  --cs-glass: rgba(255,255,255,.04); /* Frosted-Glass-Füllung von Cards, Chips, Inputs. */
  --cs-glass-2: rgba(255,255,255,.07); /* Stärkere Glass-Füllung: Input-Fokus, Tabellenkopf, Alerts, Neutral-Badge. */
  --cs-accent-line: var(--cs-color-teal-soft); /* Linien, Icons und Text-Akzente. Folgt dem Theme automatisch (Teal Soft auf Dunkel, Teal Deep auf Paper). */
  --cs-accent-cta: var(--cs-color-teal); /* Füllung von Primary-Button, aktiven Tabs, Checkbox/Switch an, Solid-Badge. Text darauf: cs-on-teal. */
  --cs-glow-teal: rgba(0,252,202,.28); /* Quellfarbe für Teal-Glows (radial-gradient, box-shadow, drop-shadow). Nie als Fläche. */
  --cs-glow-violet: rgba(124,92,255,.28); /* Quellfarbe für violette Glows und Aura-Cards. */
  --cs-on-teal: #06120f; /* Ergänzung: Text/Häkchen auf cs-color-teal (14,3:1). Im Komponenten-CSS als Literal #06120F hinterlegt. */
  --cs-status-warn: #ffc34d; /* Ergänzung: Warn-Badge, Warn-Alert-Icon, Sterne-Bewertung (12,4:1 auf cs-ink-950). Im CSS als Literal hinterlegt; sparsam. */
  --cs-status-danger: #ff8294; /* Ergänzung: Danger-Badge, Fehlertext, Danger-Alert (8,3:1 auf cs-ink-950). Immer mit Icon oder Wort, nie Farbe allein. */
  --cs-shadow-card: 0 24px 60px -24px rgba(0,0,0,.5); /* Cards und Tiles. */
  --cs-shadow-cta: 0 14px 36px -10px rgba(0,252,202,.28); /* Schwebender Primary-CTA. */
  --cs-inset-glass: inset 0 1px 0 rgba(255,255,255,.08); /* Lichtkante oben an Glass-Flächen, mit cs-shadow-card kombinieren. */
  --cs-shadow-text: 0 2px 4px rgba(6,6,12,.35), 0 14px 36px rgba(6,6,12,.6); /* Schlagschatten für weißen Text auf Kreisen und Bildern (Hero-Komposition, Figure-Captions). */
  --cs-aura-soft: 0 0 0 1px rgba(0,252,202,.20), 0 0 22px -4px rgba(0,252,202,.45), 0 0 46px -6px rgba(124,92,255,.40); /* Aurora-Halo, ruhiger Dauer-Schein (.cs-aura, .cs-aura--hover). */
  --cs-aura-strong: 0 0 0 1px rgba(0,252,202,.30), 0 0 26px -2px rgba(0,252,202,.55), 0 0 60px -4px rgba(124,92,255,.55), 0 0 110px -10px rgba(124,92,255,.40); /* Aurora-Halo kräftig: Hero-Felder, Featured-Elemente (.cs-aura--strong). Max. einmal pro Blickfeld. */
  --cs-aura-focus: 0 0 0 3px rgba(0,252,202,.18), 0 0 30px -6px rgba(0,252,202,.55), 0 0 60px -8px rgba(124,92,255,.45); /* Fokus-Halo um ganze Formular-Blöcke (.cs-aura--focusable:focus-within). */
}
[data-theme="paper"] {
  --cs-bg: var(--cs-paper);
  --cs-bg-raised: #ffffff;
  --cs-text-high: rgba(16,16,25,.94);
  --cs-text-mid: rgba(16,16,25,.64);
  --cs-text-low: rgba(16,16,25,.42);
  --cs-hairline: rgba(16,16,25,.10);
  --cs-hairline-2: rgba(16,16,25,.18);
  --cs-glass: rgba(16,16,25,.03);
  --cs-glass-2: rgba(255,255,255,.65);
  --cs-accent-line: var(--cs-color-teal-deep);
  --cs-accent-cta: var(--cs-color-teal);
  --cs-glow-teal: rgba(0,184,143,.16);
  --cs-glow-violet: rgba(124,92,255,.18);
  --cs-shadow-card: 0 24px 60px -28px rgba(16,16,40,.18);
}
:root {
  --cs-space-1: 4px; /* Kleinster Abstand, Stat-Gaps. */
  --cs-space-2: 8px; /* Label zu Input, Icon zu Text. */
  --cs-space-3: 12px; /* Abstand Sektionsnummer zu Headline. */
  --cs-space-4: 16px; /* Grid-Gap tight, Abstände in Copy-Stacks. */
  --cs-space-5: 24px; /* Standard-Grid-Gap, Figure-Caption-Inset. */
  --cs-space-6: 32px; /* Card-Padding, Gap Sektionskopf. */
  --cs-space-7: 48px; /* Abstand Sektionskopf zu Inhalt (Mobile 36px). */
  --cs-space-8: 64px; /* Section--tight Padding, Stage-Padding. */
  --cs-space-9: 96px; /* Standard-Sektionspadding (Tablet 72px, Mobile 56px). */
  --cs-space-10: 128px; /* Größter Abstand für Hero-Luft. */
  --cs-radius-sm: 8px; /* Badges, Tooltips, Pager-Buttons. */
  --cs-radius-md: 14px; /* Inputs, Alerts, Tabellen, Figures, Glass-Flächen. */
  --cs-radius-lg: 22px; /* Cards, große Figures, Editorial-Bilder. */
  --cs-radius-xl: 30px; /* Hero-Stage (.cs-stage). */
  --cs-radius-pill: 999px; /* Buttons, Chips, Tabs, Eyebrow-Pills, Switch, Progress. */
  --cs-text-d1: clamp(44px, 5.6vw, 80px); /* Hero-Headline (.cs-d1). */
  --cs-text-h1: clamp(34px, 3.4vw, 48px); /* Sektions-Headline (.cs-h1). */
  --cs-text-h2: clamp(24px, 2.2vw, 30px); /* Card-/Sub-Headline (.cs-h2). */
  --cs-text-h3: 20px; /* Kleinere Überschrift (.cs-h3). */
  --cs-text-lead: 18px; /* Lead-Text (.cs-lead). */
  --cs-text-body: 16px; /* Fließtext (body). */
  --cs-text-small: 14px; /* Kleintext (.cs-small). */
  --cs-text-caption: 11px; /* Mono-Labels, Eyebrows, Chips. */
  --cs-leading-tight: 1.04; /* D1 und H1. */
  --cs-leading-snug: 1.25; /* H2. */
  --cs-leading-body: 1.6; /* Fließtext und Lead. */
  --cs-tracking-tight: -.03em; /* Display-Headlines D1/H1. */
  --cs-tracking-mono: .18em; /* Mono-Labels in Uppercase. */
  --cs-container: 1200px; /* Maximale Inhaltsbreite (.cs-container). */
  --cs-container-pad: 32px; /* Seitlicher Container-Innenabstand (ab 1024px abwärts 24px). */
  --cs-dur-micro: 240ms; /* Hover, Fokus, Toggle. */
  --cs-dur-reveal: 700ms; /* Scroll-Reveal (Y +24px, Opacity), später GSAP ScrollTrigger. */
  --cs-dur-scene: 1400ms; /* Szenenwechsel, Bild-Zoom im Hover. */
  --cs-ease: cubic-bezier(.22, 1, .36, 1); /* Einzige Easing-Kurve des Systems, für alle Transitions und Reveals. */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-d1: 300 80px/1.04 var(--font-display); /* Hero-Headline, Klasse .cs-d1. Fluid: clamp(44px, 5.6vw, 80px) über cs-text-d1. */
  --text-h1: 400 48px/1.04 var(--font-display); /* Sektions-Headline, Klasse .cs-h1. Fluid: clamp(34px, 3.4vw, 48px). */
  --text-h2: 400 30px/1.25 var(--font-display); /* Card- und Sub-Headline, Klasse .cs-h2. Fluid: clamp(24px, 2.2vw, 30px). */
  --text-h3: 500 20px/1.4 var(--font-display); /* Kleinere Überschrift, Klasse .cs-h3. */
  --text-lead: 300 18px/1.6 var(--font-body); /* Einleitender Lauftext unter Headlines, Klasse .cs-lead, Farbe cs-text-mid. */
  --text-body: 400 16px/1.6 var(--font-body); /* Standard-Fließtext, Klasse .cs-body, Farbe cs-text-mid. */
  --text-small: 400 14px/1.6 var(--font-body); /* Card-Texte, Hinweise, Klasse .cs-small. */
  --text-eyebrow: 400 11px/1.4 var(--font-mono); /* Mono-Labels, Sektionsnummern, Eyebrows; immer uppercase. Klasse .cs-eyebrow, Farbe cs-text-low. */
}
.d1 {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.18em;
}