/* CiSmart Aurora · bundle.css
   GENERIERT via scripts/build.py aus web/cismart-components.css, cismart-ui.css, cismart-brand.css.
   Tokens kommen aus tokens.json (tokens.css der Seite). Hier nur, was tokens.json nicht abbilden kann. */

:root{
  --cs-font-display:   "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --cs-font-body:      "Manrope", ui-sans-serif, system-ui, sans-serif;
  --cs-font-mono:      "JetBrains Mono", ui-monospace, monospace;
}
/* ── Theme „paper“: Klasse auf die Sektion legen, alle Komponenten folgen. ── */
.cs-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-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);
}

/* ════ cismart-components.css ════ */
/* ═══════════════════════════════════════════════════════════════
   CiSmart · Components (Aurora System)
   Wiederverwendbare Klassen. BEM-Light: .cs-block, .cs-block__el,
   .cs-block--modifier. Jede Komponente nutzt NUR Tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--cs-bg);
  color:var(--cs-text-high);
  font-family:var(--cs-font-body);
  font-size:var(--cs-text-body);
  line-height:var(--cs-leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* ── Layout ───────────────────────────────────────────────────── */
.cs-container{
  max-width:var(--cs-container);
  margin-inline:auto;
  padding-inline:var(--cs-container-pad);
}
.cs-section{ padding-block:var(--cs-space-9); position:relative; }
.cs-section--tight{ padding-block:var(--cs-space-8); }
.cs-section--hairline-top{ border-top:1px solid var(--cs-hairline); }

/* Sektionskopf: Mono-Nummer + Headline + optionales Tag rechts */
.cs-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--cs-space-6); margin-bottom:var(--cs-space-7);
}
.cs-section-head__num{
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption);
  letter-spacing:var(--cs-tracking-mono); text-transform:uppercase;
  color:var(--cs-text-low); display:block; margin-bottom:var(--cs-space-3);
}
.cs-section-head__tag{
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption);
  letter-spacing:var(--cs-tracking-mono); text-transform:uppercase;
  color:var(--cs-text-low); white-space:nowrap; padding-bottom:6px;
}

/* ── Typography ───────────────────────────────────────────────── */
.cs-d1{ font-family:var(--cs-font-display); font-weight:300; font-size:var(--cs-text-d1); line-height:var(--cs-leading-tight); letter-spacing:var(--cs-tracking-tight); text-wrap:balance; }
.cs-h1{ font-family:var(--cs-font-display); font-weight:400; font-size:var(--cs-text-h1); line-height:var(--cs-leading-tight); letter-spacing:var(--cs-tracking-tight); text-wrap:balance; }
.cs-h2{ font-family:var(--cs-font-display); font-weight:400; font-size:var(--cs-text-h2); line-height:var(--cs-leading-snug); letter-spacing:-.02em; }
.cs-h3{ font-family:var(--cs-font-display); font-weight:500; font-size:var(--cs-text-h3); letter-spacing:-.01em; }
.cs-lead{ font-size:var(--cs-text-lead); font-weight:300; color:var(--cs-text-mid); line-height:var(--cs-leading-body); text-wrap:pretty; }
.cs-body{ color:var(--cs-text-mid); }
.cs-small{ font-size:var(--cs-text-small); color:var(--cs-text-mid); }
.cs-eyebrow{
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption);
  letter-spacing:var(--cs-tracking-mono); text-transform:uppercase;
  color:var(--cs-text-low);
}
.cs-accent{ color:var(--cs-accent-line); }
.cs-accent-violet{ color:var(--cs-color-violet-soft); }
em.cs-italic{ font-style:italic; font-weight:inherit; }

/* Gradient-Text: max. 1× pro Seite einsetzen */
.cs-gradient-text{
  background:linear-gradient(110deg, var(--cs-color-teal) 0%, var(--cs-color-violet) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.cs-btn{
  position:relative; z-index:0;
  font-family:var(--cs-font-display); font-weight:500; font-size:15px;
  padding:14px 26px; border-radius:var(--cs-radius-pill);
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; border:none; white-space:nowrap;
  transition:box-shadow var(--cs-dur-micro) var(--cs-ease),
             transform var(--cs-dur-micro) var(--cs-ease);
}
/* zweite, flächige transparente Border um jeden Button —
   breiter flacher Halo in der Button-Farbe (kein Verlauf, kein Schein) */
.cs-btn::before{
  content:""; position:absolute; inset:-7px; z-index:-1;
  border-radius:var(--cs-radius-pill);
  background:rgba(255,255,255,.08);
  transition:background var(--cs-dur-micro) var(--cs-ease);
}
.cs-btn--primary::before{ background:rgba(0,252,202,.16); }
.cs-btn--primary:hover::before{ background:rgba(0,252,202,.26); }
.cs-btn--ghost::before{ background:rgba(255,255,255,.07); }
/* Ghost-Hover: Halo + Border wechseln in die Akzentfarbe */
.cs-btn--ghost:hover::before{ background:rgba(0,252,202,.18); }
.cs-btn:hover{ transform:translateY(-1px); }
:is(.cs-theme-paper, [data-theme="paper"]) .cs-btn::before{ background:rgba(16,16,25,.07); }
:is(.cs-theme-paper, [data-theme="paper"]) .cs-btn--primary::before{ background:rgba(0,163,130,.18); }
:is(.cs-theme-paper, [data-theme="paper"]) .cs-btn--dark::before{ background:rgba(16,16,25,.10); }
.cs-btn--primary{
  background:var(--cs-accent-cta); color:#06120F;
}
.cs-btn--primary:hover{ box-shadow:0 0 28px var(--cs-glow-teal); }
.cs-btn--ghost{
  background:rgba(255,255,255,.04); color:var(--cs-text-high);
  border:1px solid var(--cs-hairline-2);
  transition:border-color var(--cs-dur-micro) var(--cs-ease),
             transform var(--cs-dur-micro) var(--cs-ease);
}
.cs-btn--ghost:hover{ border-color:var(--cs-color-teal); color:var(--cs-accent-line); }
.cs-btn--dark{ background:var(--cs-ink-900); color:var(--cs-color-teal); }

/* ── Chips ────────────────────────────────────────────────────── */
.cs-chip{
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption);
  letter-spacing:.06em; padding:8px 14px;
  border-radius:var(--cs-radius-pill);
  border:1px solid var(--cs-hairline); background:var(--cs-glass);
  color:var(--cs-text-mid); display:inline-flex; align-items:center; gap:8px;
}
.cs-chip__dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--cs-accent-cta); box-shadow:0 0 8px var(--cs-glow-teal);
}

/* ── Eyebrow-Pill (elegant, ohne Verlauf, optional mit Icon) ─── */
.cs-eyebrow-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:var(--cs-radius-pill);
  border:1px solid var(--cs-hairline-2); background:var(--cs-glass);
  backdrop-filter:blur(8px) saturate(1.2); box-shadow:var(--cs-inset-glass);
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption);
  letter-spacing:.16em; text-transform:uppercase; color:var(--cs-text-mid);
}
/* Tint folgt der Textfarbe: über Farbe/Bild immer --dark (weißer Text) oder --light (dunkler Text) */
.cs-eyebrow-pill--dark{ background:rgba(10,10,20,.55); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.92);
  backdrop-filter:blur(8px) brightness(.55) saturate(1.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.cs-eyebrow-pill--light{ background:rgba(255,255,255,.74); border-color:rgba(255,255,255,.85); color:rgba(16,16,25,.86);
  backdrop-filter:blur(8px) brightness(1.55) saturate(.9); box-shadow:inset 0 1px 0 #fff; }
.cs-eyebrow-pill--light svg{ color:var(--cs-color-teal-deep); filter:none; }
.cs-eyebrow-pill svg{
  width:13px; height:13px; flex:0 0 auto;
  color:var(--cs-accent-line); filter:drop-shadow(0 0 6px var(--cs-glow-teal));
}

/* ── Logo-Badges (KI-/Netzwerk-Referenzen, überlappend) ───────
   Platzhalter-Glyphen — in der Umsetzung durch offizielle
   Brand-SVGs (ChatGPT, Gemini, LinkedIn, Meta …) ersetzen.        */
.cs-logo-row{ display:inline-flex; align-items:center; }
.cs-logo-row > * + *{ margin-left:-9px; }
.cs-logo-badge{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px); box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
  font-family:var(--cs-font-display); font-size:13px; font-weight:600;
  color:var(--cs-text-high);
}
.cs-logo-badge svg{ width:14px; height:14px; color:var(--cs-accent-line); }
:is(.cs-theme-paper, [data-theme="paper"]) .cs-logo-badge{ background:#FFF; border-color:var(--cs-hairline); }

/* ── Sterne-Bewertung ─────────────────────────────────── */
.cs-stars{ display:inline-flex; gap:3px; color:#FFC34D; }
.cs-stars svg{ width:14px; height:14px; fill:currentColor; }

/* ── Thin-Line-Circles (technischer Hintergrund-Dekor) ─────── */
.cs-bg-circles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cs-bg-circles i{ position:absolute; border-radius:50%; border:1px solid var(--cs-hairline-2); }

/* ── Dot-Grid-Dekor & Partikel-Canvas ─────────────────────── */
.cs-bg-dots{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--cs-text-low) 1px, transparent 1.5px);
  background-size:18px 18px; opacity:.25;
  -webkit-mask-image:radial-gradient(ellipse at var(--dots-pos, 80% 10%), #000 15%, transparent 70%);
  mask-image:radial-gradient(ellipse at var(--dots-pos, 80% 10%), #000 15%, transparent 70%);
}

/* ── Linien-Dekor (auslaufende Hairlines) ───────────────────
   Position über --lines-pos pro Einsatz steuerbar.             */
.cs-bg-lines{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--cs-hairline-2) 1px, transparent 1px);
  background-size:100% 52px; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse at var(--lines-pos, 15% 20%), #000 10%, transparent 62%);
  mask-image:radial-gradient(ellipse at var(--lines-pos, 15% 20%), #000 10%, transparent 62%);
}

/* ── Aurora-Blob (einzelner weicher Farbfleck als Akzent) ──── */
.cs-bg-blob{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(110px); mix-blend-mode:screen;
}
.cs-bg-blob--violet{ background:radial-gradient(circle, rgba(124,92,255,.34), transparent 62%); }
.cs-bg-blob--teal{ background:radial-gradient(circle, rgba(0,252,202,.20), transparent 62%); }

/* Sektionen mit überstehendem Dekor beschneiden */
.cs-section--clip{ overflow:hidden; }
.cs-particles{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5; }

/* ── Hover-Verhalten für Flächen-Komponenten ───────────────── */
.cs-hoverable{
  transition:transform var(--cs-dur-micro) var(--cs-ease),
             border-color var(--cs-dur-micro) var(--cs-ease),
             box-shadow var(--cs-dur-micro) var(--cs-ease);
}
.cs-hoverable:hover{
  transform:translateY(-3px);
  border-color:rgba(79,227,197,.32);
  box-shadow:0 0 28px var(--cs-glow-teal), var(--cs-shadow-card);
}

/* ── Cards (Frosted Glass) ────────────────────────────────────── */
.cs-card{
  position:relative; border-radius:var(--cs-radius-lg); overflow:hidden;
  background:var(--cs-glass); border:1px solid var(--cs-hairline);
  backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:var(--cs-shadow-card), var(--cs-inset-glass);
  padding:var(--cs-space-6);
  transition:border-color var(--cs-dur-micro) var(--cs-ease),
             box-shadow var(--cs-dur-micro) var(--cs-ease);
}
.cs-card--glow-violet::before,
.cs-card--glow-teal::before{
  content:""; position:absolute; top:-40%; right:-10%;
  width:60%; height:80%; border-radius:50%;
  background:radial-gradient(circle, var(--cs-glow-violet), transparent 65%);
  pointer-events:none; filter:blur(10px);
}
.cs-card--glow-teal::before{
  background:radial-gradient(circle, var(--cs-glow-teal), transparent 65%);
}
.cs-card--interactive:hover{
  border-color:rgba(79,227,197,.35);
  box-shadow:0 0 32px var(--cs-glow-teal), var(--cs-shadow-card);
}
/* Cards mit violetter Aura glühen im Hover violett */
.cs-card--interactive.cs-card--glow-violet:hover{
  border-color:rgba(155,130,255,.4);
  box-shadow:0 0 32px var(--cs-glow-violet), var(--cs-shadow-card);
}
.cs-card > *{ position:relative; }

/* ── Icon Tile (Glass Tile + Mono-Color Line Icon) ───────────── */
.cs-icx{
  width:72px; height:72px; border-radius:20px;
  position:relative; display:grid; place-items:center;
  color:var(--cs-accent-line);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--cs-inset-glass),
             inset 0 -16px 26px -20px var(--cs-glow-teal),
             0 14px 30px -16px rgba(0,0,0,.55);
}
.cs-icx::after{
  content:""; position:absolute; left:20%; right:20%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,252,202,.6), transparent);
}
.cs-icx svg{ width:40px; height:40px; filter:drop-shadow(0 0 9px var(--cs-glow-teal)); }
.cs-icx--sm{ width:52px; height:52px; border-radius:14px; }
.cs-icx--sm svg{ width:28px; height:28px; }
:is(.cs-theme-paper, [data-theme="paper"]) .cs-icx{
  background:#FFF; border-color:var(--cs-hairline);
  box-shadow:0 14px 30px -14px rgba(16,16,40,.18),
             inset 0 -16px 26px -20px var(--cs-glow-teal);
}

/* ── Hintergrund-Dekor (rein CSS, kein JS nötig) ─────────────── */
.cs-bg-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--cs-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--cs-hairline) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 60% 40%, #000 25%, transparent 80%);
}
.cs-bg-aurora{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  mix-blend-mode:screen; opacity:.55;
}
.cs-bg-aurora i{ position:absolute; border-radius:50%; filter:blur(95px); }
.cs-bg-aurora i:nth-child(1){ width:58%; height:70%; left:-12%; top:4%;  background:radial-gradient(circle, var(--cs-color-violet), transparent 60%); }
.cs-bg-aurora i:nth-child(2){ width:52%; height:64%; right:-8%; top:-6%; background:radial-gradient(circle, var(--cs-color-teal), transparent 60%); opacity:.7; }
@media (prefers-reduced-motion:no-preference){
  .cs-bg-aurora i:nth-child(1){ animation:cs-aurora 19s var(--cs-ease) infinite alternate; }
  .cs-bg-aurora i:nth-child(2){ animation:cs-aurora 24s var(--cs-ease) infinite alternate-reverse; }
}
@keyframes cs-aurora{
  from{ transform:translate(0,0) scale(1); }
  to{   transform:translate(10%,8%) scale(1.25); }
}

/* ── Scroll-Reveal (Hook für GSAP; CSS-Fallback via IO) ────────
   Versteckt wird nur, wenn JS aktiv ist (body.js-reveal) —
   ohne JS / ohne IntersectionObserver bleibt alles sichtbar.      */
@media (prefers-reduced-motion:no-preference){
  body.js-reveal [data-reveal]{ opacity:0; transform:translateY(24px);
    transition:opacity var(--cs-dur-reveal) var(--cs-ease),
               transform var(--cs-dur-reveal) var(--cs-ease); }
  body.js-reveal [data-reveal].is-visible{ opacity:1; transform:none; }
}

/* ── Responsive Basics ───────────────────────────────────────── */
@media (max-width:1024px){
  :root{ --cs-container-pad:24px; --cs-space-9:72px; }
}
@media (max-width:768px){
  :root{ --cs-space-9:56px; --cs-space-7:36px; }
  .cs-section-head{ flex-direction:column; align-items:flex-start; gap:var(--cs-space-3); }
  .cs-section-head__tag{ display:none; }
}


/* ════ cismart-ui.css ════ */
/* ═══════════════════════════════════════════════════════════════
   CiSmart · UI Components (Aurora System) — Extension Pack
   Forms, controls, data display. Token-only, BEM-light, semantic.
   Loads AFTER cismart-tokens.css + cismart-components.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Aurora Outer-Glow — Utilities & Effekte
   Mehrlagiger Teal×Violett-Halo um Felder, Buttons, Kacheln.
   .cs-aura      → ruhiger Dauer-Schein
   .cs-aura--strong → kräftiger (Hero, Featured)
   .cs-aura--hover  → Schein nur im Hover
   .cs-aura-ring → animierter, rotierender Conic-Ring hinter dem Element
   ═══════════════════════════════════════════════════════════════ */
.cs-aura{ box-shadow:var(--cs-aura-soft); }
.cs-aura--strong{ box-shadow:var(--cs-aura-strong); }
.cs-aura--hover{ transition:box-shadow var(--cs-dur-micro) var(--cs-ease); }
.cs-aura--hover:hover{ box-shadow:var(--cs-aura-soft); }
.cs-aura--focusable:focus-within{ box-shadow:var(--cs-aura-focus); }

/* Conic „Aurora“-Ring hinter beliebigem Element.
   Es rotiert NUR der Verlaufswinkel (--cs-ring-a), nie die Box —
   das Licht wandert an der Kante entlang, der Rahmen steht.           */
@property --cs-ring-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.cs-aura-ring{ position:relative; z-index:0; }
.cs-aura-ring::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  padding:2px;
  background:conic-gradient(from var(--cs-ring-a),
    var(--cs-color-teal), var(--cs-color-violet) 28%, rgba(124,92,255,.35) 50%,
    var(--cs-color-teal) 72%, var(--cs-color-violet) 88%, var(--cs-color-teal));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:drop-shadow(0 0 12px var(--cs-glow-teal)) drop-shadow(0 0 18px var(--cs-glow-violet));
}
.cs-aura-ring::after{
  content:""; position:absolute; inset:-10px; z-index:-2; border-radius:inherit;
  background:conic-gradient(from var(--cs-ring-a),
    rgba(0,252,202,.55), rgba(124,92,255,.15) 30%, rgba(0,252,202,.55) 72%, rgba(124,92,255,.15) 90%, rgba(0,252,202,.55));
  filter:blur(22px); opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  .cs-aura-ring--spin::before,
  .cs-aura-ring--spin::after{ animation:cs-aura-spin 6s linear infinite; }
}
@keyframes cs-aura-spin{ to{ --cs-ring-a:360deg; } }
/* Button: der Button-eigene ::before-Halo weicht dem Ring (auch im Hover) */
.cs-btn.cs-aura-ring::before,
.cs-btn.cs-aura-ring:hover::before{
  inset:-3px; padding:2px;
  background:conic-gradient(from var(--cs-ring-a),
    var(--cs-color-teal), var(--cs-color-violet) 28%, rgba(124,92,255,.35) 50%,
    var(--cs-color-teal) 72%, var(--cs-color-violet) 88%, var(--cs-color-teal));
}

/* Aurora-Verlaufsfläche als Hintergrund-Glow IN einem Feld (z. B. Hero-Input).
   Auf ein position:relative Element legen.                             */
.cs-aura-bg{ position:relative; overflow:hidden; }
.cs-aura-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; mix-blend-mode:screen;
  background:
    radial-gradient(420px 200px at 12% 120%, var(--cs-glow-teal), transparent 62%),
    radial-gradient(420px 220px at 100% -30%, var(--cs-glow-violet), transparent 62%);
}
.cs-aura-bg > *{ position:relative; z-index:1; }

/* ── Forms · Field shell ──────────────────────────────────────── */
.cs-field{ display:flex; flex-direction:column; gap:var(--cs-space-2); }
.cs-label{
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption);
  letter-spacing:var(--cs-tracking-mono); text-transform:uppercase;
  color:var(--cs-text-mid);
}
.cs-label__opt{ color:var(--cs-text-low); text-transform:none; letter-spacing:0; }
.cs-help{ font-size:13px; color:var(--cs-text-low); }
.cs-help--error{ color:#FF8294; }

/* ── Inputs · text / textarea / select ────────────────────────── */
.cs-input,
.cs-textarea,
.cs-select{
  width:100%; font-family:var(--cs-font-body); font-size:15px;
  color:var(--cs-text-high);
  background:var(--cs-glass); border:1px solid var(--cs-hairline-2);
  border-radius:var(--cs-radius-md); padding:13px 16px;
  transition:border-color var(--cs-dur-micro) var(--cs-ease),
             box-shadow var(--cs-dur-micro) var(--cs-ease),
             background var(--cs-dur-micro) var(--cs-ease);
}
.cs-input::placeholder,
.cs-textarea::placeholder{ color:var(--cs-text-low); }
.cs-input:hover,
.cs-textarea:hover,
.cs-select:hover{ border-color:rgba(255,255,255,.26); }
.cs-input:focus,
.cs-textarea:focus,
.cs-select:focus{
  outline:none; border-color:var(--cs-color-teal);
  background:var(--cs-glass-2);
  box-shadow:0 0 0 3px rgba(0,252,202,.16), 0 0 22px -6px var(--cs-glow-teal);
}
.cs-textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.cs-input:disabled,
.cs-textarea:disabled,
.cs-select:disabled{ opacity:.45; cursor:not-allowed; }

/* error state */
.cs-field--error .cs-input,
.cs-field--error .cs-textarea,
.cs-field--error .cs-select,
.cs-input--error{
  border-color:rgba(255,99,120,.6);
  box-shadow:0 0 0 3px rgba(255,99,120,.14);
}

/* Select: custom chevron, no native arrow */
.cs-select{
  appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cs-text-mid) 50%),
    linear-gradient(135deg, var(--cs-text-mid) 50%, transparent 50%);
  background-position:calc(100% - 20px) 53%, calc(100% - 15px) 53%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* Input with leading icon */
.cs-input-group{ position:relative; display:flex; align-items:center; }
.cs-input-group .cs-input{ padding-left:44px; }
.cs-input-group__icon{
  position:absolute; left:15px; width:18px; height:18px; pointer-events:none;
  color:var(--cs-text-low);
}
.cs-input-group:focus-within .cs-input-group__icon{ color:var(--cs-accent-line); }

/* ── Checkbox & Radio (custom, native input hidden) ───────────── */
.cs-choice{
  display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  font-size:15px; color:var(--cs-text-high); user-select:none;
}
.cs-choice input{ position:absolute; opacity:0; width:0; height:0; }
.cs-choice__box{
  width:20px; height:20px; flex:0 0 auto; position:relative;
  border:1.5px solid var(--cs-hairline-2); background:var(--cs-glass);
  transition:border-color var(--cs-dur-micro) var(--cs-ease),
             background var(--cs-dur-micro) var(--cs-ease),
             box-shadow var(--cs-dur-micro) var(--cs-ease);
}
.cs-choice__box--check{ border-radius:6px; }
.cs-choice__box--radio{ border-radius:50%; }
.cs-choice:hover .cs-choice__box{ border-color:var(--cs-color-teal-soft); }
.cs-choice__box::after{
  content:""; position:absolute; opacity:0;
  transition:opacity var(--cs-dur-micro) var(--cs-ease), transform var(--cs-dur-micro) var(--cs-ease);
}
/* checkbox tick */
.cs-choice__box--check::after{
  left:6px; top:2px; width:5px; height:10px; transform:rotate(45deg) scale(.6);
  border:solid #06120F; border-width:0 2px 2px 0;
}
/* radio dot */
.cs-choice__box--radio::after{
  inset:4px; border-radius:50%; background:#06120F; transform:scale(.4);
}
.cs-choice input:checked + .cs-choice__box{
  background:var(--cs-accent-cta); border-color:var(--cs-color-teal);
  box-shadow:0 0 14px var(--cs-glow-teal);
}
.cs-choice input:checked + .cs-choice__box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.cs-choice__box--radio + .cs-choice__box{} /* noop */
.cs-choice input:checked + .cs-choice__box--radio::after{ transform:scale(1); }
.cs-choice input:focus-visible + .cs-choice__box{ box-shadow:0 0 0 3px rgba(0,252,202,.22); }
.cs-choice input:disabled + .cs-choice__box{ opacity:.4; }
.cs-choice:has(input:disabled){ cursor:not-allowed; color:var(--cs-text-low); }

/* ── Switch ───────────────────────────────────────────────────── */
.cs-switch{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; user-select:none; font-size:15px; color:var(--cs-text-high); }
.cs-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cs-switch__track{
  width:46px; height:26px; flex:0 0 auto; border-radius:var(--cs-radius-pill);
  background:var(--cs-ink-700); border:1px solid var(--cs-hairline-2);
  position:relative; transition:background var(--cs-dur-micro) var(--cs-ease),
             box-shadow var(--cs-dur-micro) var(--cs-ease), border-color var(--cs-dur-micro) var(--cs-ease);
}
.cs-switch__track::after{
  content:""; position:absolute; left:3px; top:2px; width:20px; height:20px;
  border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:transform var(--cs-dur-micro) var(--cs-ease);
}
.cs-switch input:checked + .cs-switch__track{
  background:var(--cs-accent-cta); border-color:var(--cs-color-teal);
  box-shadow:0 0 16px var(--cs-glow-teal);
}
.cs-switch input:checked + .cs-switch__track::after{ transform:translateX(20px); }
.cs-switch input:focus-visible + .cs-switch__track{ box-shadow:0 0 0 3px rgba(0,252,202,.22); }
.cs-switch input:disabled + .cs-switch__track{ opacity:.4; }

/* ── Slider (native range, restyled) ──────────────────────────── */
.cs-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--cs-radius-pill); background:var(--cs-ink-700); outline:none; cursor:pointer; }
.cs-slider::-webkit-slider-runnable-track{ height:6px; border-radius:var(--cs-radius-pill); }
.cs-slider::-moz-range-track{ height:6px; border-radius:var(--cs-radius-pill); background:var(--cs-ink-700); }
.cs-slider::-moz-range-progress{ height:6px; border-radius:var(--cs-radius-pill); background:linear-gradient(90deg, var(--cs-color-teal), var(--cs-color-violet)); }
.cs-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-7px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  border:3px solid var(--cs-color-teal); box-shadow:0 0 14px var(--cs-glow-teal); cursor:grab;
}
.cs-slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:3px solid var(--cs-color-teal); box-shadow:0 0 14px var(--cs-glow-teal); cursor:grab;
}
.cs-slider:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(0,252,202,.22); }
/* Gradient fill for webkit via background trick (set --val 0–100 inline) */
.cs-slider--fill{
  background:linear-gradient(90deg, var(--cs-color-teal), var(--cs-color-violet)) 0/var(--val,50%) 100% no-repeat,
             var(--cs-ink-700);
}

/* ── Badge (status indicator — distinct from Chip) ────────────── */
.cs-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--cs-font-display); font-weight:500; font-size:12px;
  line-height:1; padding:5px 10px; border-radius:var(--cs-radius-sm);
  border:1px solid transparent;
}
.cs-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.cs-badge--teal{    color:var(--cs-color-teal-soft); background:rgba(0,252,202,.10);  border-color:rgba(0,252,202,.32); }
.cs-badge--violet{  color:var(--cs-color-violet-soft);background:rgba(124,92,255,.12); border-color:rgba(124,92,255,.34); }
.cs-badge--neutral{ color:var(--cs-text-mid);        background:var(--cs-glass-2);    border-color:var(--cs-hairline-2); }
.cs-badge--warn{    color:#FFC34D;                    background:rgba(255,195,77,.10); border-color:rgba(255,195,77,.32); }
.cs-badge--danger{  color:#FF8294;                    background:rgba(255,99,120,.10); border-color:rgba(255,99,120,.32); }
.cs-badge--solid{   color:#06120F; background:var(--cs-accent-cta); border-color:transparent; box-shadow:0 0 14px var(--cs-glow-teal); }
/* Count / notification badge */
.cs-badge--count{ min-width:20px; height:20px; padding:0 6px; border-radius:var(--cs-radius-pill); justify-content:center; font-size:11px; }

/* ── Avatar ───────────────────────────────────────────────────── */
.cs-avatar{
  position:relative; display:inline-grid; place-items:center; flex:0 0 auto;
  width:44px; height:44px; border-radius:50%; overflow:visible;
  background:var(--cs-ink-700); border:1px solid var(--cs-hairline-2);
  font-family:var(--cs-font-display); font-weight:600; font-size:15px; color:var(--cs-text-high);
}
.cs-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.cs-avatar--sm{ width:32px; height:32px; font-size:12px; }
.cs-avatar--lg{ width:64px; height:64px; font-size:22px; }
.cs-avatar--xl{ width:96px; height:96px; font-size:30px; }
.cs-avatar--2xl{ width:160px; height:160px; font-size:44px; font-weight:300; }
.cs-avatar--ring{ box-shadow:0 0 0 2px var(--cs-bg), 0 0 0 3.5px var(--cs-color-teal), 0 0 16px var(--cs-glow-teal); }
.cs-avatar__status{
  position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--cs-bg); background:var(--cs-ink-500);
}
.cs-avatar__status--online{ background:var(--cs-color-teal); box-shadow:0 0 8px var(--cs-glow-teal); }
.cs-avatar__status--away{ background:#FFC34D; }
.cs-avatar-group{ display:inline-flex; }
.cs-avatar-group > .cs-avatar + .cs-avatar{ margin-left:-12px; }
.cs-avatar-group > .cs-avatar{ box-shadow:0 0 0 2px var(--cs-bg); }
.cs-avatar--more{ background:var(--cs-ink-800); color:var(--cs-text-mid); font-size:12px; }

/* User row (avatar + name + meta) */
.cs-user{ display:inline-flex; align-items:center; gap:12px; }
.cs-user__name{ font-family:var(--cs-font-display); font-weight:500; font-size:15px; color:var(--cs-text-high); }
.cs-user__meta{ font-size:13px; color:var(--cs-text-low); }

/* ── Charts ───────────────────────────────────────────────────── */
/* Shared gradient defined inline in <svg><defs>; class adds glow */
.cs-chart{ width:100%; }
.cs-chart svg{ width:100%; height:auto; overflow:visible; }
.cs-chart__line{ fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--cs-glow-teal)) drop-shadow(0 0 14px var(--cs-glow-violet)); }
.cs-chart__area{ opacity:.18; }
.cs-chart__dot{ fill:var(--cs-color-violet-soft); }
/* Bars */
.cs-bars{ display:flex; align-items:flex-end; gap:10px; height:160px; }
.cs-bars__bar{
  flex:1; border-radius:6px 6px 0 0; min-height:6px;
  background:linear-gradient(180deg, var(--cs-color-teal), var(--cs-color-violet));
  box-shadow:0 0 16px -4px var(--cs-glow-teal);
  position:relative;
}
.cs-bars__bar--muted{ background:var(--cs-ink-700); box-shadow:none; }
.cs-bars__label{ position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-family:var(--cs-font-mono); font-size:10px; color:var(--cs-text-low); }
/* Progress ring (set --p 0–100, --size) */
.cs-ring{ --p:70; --size:120px; width:var(--size); height:var(--size); position:relative; display:grid; place-items:center; }
.cs-ring__bg{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--cs-color-teal) 0, var(--cs-color-violet) calc(var(--p)*1%), var(--cs-ink-700) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  filter:drop-shadow(0 0 10px var(--cs-glow-teal));
}
.cs-ring__val{ font-family:var(--cs-font-display); font-weight:400; font-size:26px; color:var(--cs-text-high); }
.cs-ring__val small{ font-size:13px; color:var(--cs-text-low); }
/* Sparkline-friendly stat tile */
.cs-stat{ display:flex; flex-direction:column; gap:4px; }
.cs-stat__num{ font-family:var(--cs-font-display); font-weight:300; font-size:40px; letter-spacing:-.03em; line-height:1; }
.cs-stat__num em{ font-style:normal; font-size:18px; color:var(--cs-color-teal-soft); }
.cs-stat__label{ font-family:var(--cs-font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cs-text-low); }

/* ── Image components ─────────────────────────────────────────── */
.cs-figure{ position:relative; margin:0; overflow:hidden; border-radius:var(--cs-radius-md); border:1px solid var(--cs-hairline); background:#0C0C16; color:#fff; }
.cs-figure--lg{ border-radius:var(--cs-radius-lg); }
.cs-figure img,
.cs-figure image-slot{ display:block; width:100%; height:100%; object-fit:cover; }
.cs-ratio-16x9{ aspect-ratio:16/9; }
.cs-ratio-4x3{ aspect-ratio:4/3; }
.cs-ratio-1x1{ aspect-ratio:1/1; }
.cs-ratio-3x4{ aspect-ratio:3/4; }
.cs-figure--zoom img{ transition:transform var(--cs-dur-scene) var(--cs-ease); }
.cs-figure--zoom:hover img{ transform:scale(1.05); }
/* Veil: kräftiger Mehrstufen-Verlauf — Text hält auf jedem Motiv AA-Kontrast */
.cs-figure__veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,20,.06) 0%, rgba(10,10,20,.28) 40%, rgba(10,10,20,.78) 72%, rgba(8,8,16,.96) 100%); }
.cs-figure__veil--side{ background:linear-gradient(90deg, rgba(10,10,20,.94) 0%, rgba(10,10,20,.66) 44%, rgba(10,10,20,.06) 74%); }
.cs-figure__veil--full{ background:rgba(10,10,20,.58); }
/* Aurora-Tint über dem Motiv (violett, screen) */
.cs-figure__tint{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(60% 55% at 88% 86%, var(--cs-glow-violet), transparent 64%); }
.cs-figure__cap{ position:absolute; left:var(--cs-space-5); right:var(--cs-space-5); bottom:var(--cs-space-5); z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-shadow:var(--cs-shadow-text); }
.cs-figure__cap .cs-eyebrow{ color:var(--cs-color-teal-soft); }
.cs-figure__cap .cs-h3,
.cs-figure__cap .cs-h2{ color:#fff; text-wrap:balance; }
.cs-figure__cap p{ color:rgba(255,255,255,.82); font-size:var(--cs-text-small); max-width:46ch; }
.cs-figure__cap .cs-chip{ background:rgba(10,10,20,.55); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.88); text-shadow:none; }
.cs-figure__meta{ width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:var(--cs-space-4);
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }
/* Editorial: Text links in der Fläche, seitlicher Veil, große Headline */
.cs-figure--editorial{ border-radius:var(--cs-radius-lg); min-height:340px; }
.cs-figure--editorial > img{ position:absolute; inset:0; }
.cs-figure--editorial .cs-figure__cap{ top:0; bottom:0; left:var(--cs-space-7); right:42%; justify-content:center; gap:14px; }
.cs-figure--editorial .cs-figure__cap .cs-h2{ font-weight:300; font-size:clamp(26px,3vw,40px); line-height:1.05; letter-spacing:-.025em; }
/* Orbit-Bogen über dem Bild (nutzt .cs-orbit__rot/__arc/__dot aus cismart-brand.css) */
.cs-figure__orbit{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }
figcaption.cs-figcaption{ margin-top:var(--cs-space-3); font-size:13px; color:var(--cs-text-low); }
@media (max-width:640px){ .cs-figure--editorial .cs-figure__cap{ left:var(--cs-space-5); right:var(--cs-space-5); } }

/* ── Grid utilities ───────────────────────────────────────────── */
.cs-grid{ display:grid; gap:var(--cs-space-5); }
.cs-grid--2{ grid-template-columns:repeat(2,1fr); }
.cs-grid--3{ grid-template-columns:repeat(3,1fr); }
.cs-grid--4{ grid-template-columns:repeat(4,1fr); }
.cs-grid--auto{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }
.cs-grid--tight{ gap:var(--cs-space-4); }
@media (max-width:900px){
  .cs-grid--3,.cs-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cs-grid--2,.cs-grid--3,.cs-grid--4{ grid-template-columns:1fr; }
}

/* ── Table ────────────────────────────────────────────────────── */
.cs-table-wrap{ border:1px solid var(--cs-hairline); border-radius:var(--cs-radius-md); overflow:hidden; }
.cs-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cs-table thead th{
  text-align:left; font-family:var(--cs-font-mono); font-size:11px;
  letter-spacing:var(--cs-tracking-mono); text-transform:uppercase; color:var(--cs-text-low);
  padding:14px 18px; background:var(--cs-glass-2); border-bottom:1px solid var(--cs-hairline);
}
.cs-table tbody td{ padding:15px 18px; color:var(--cs-text-mid); border-bottom:1px solid var(--cs-hairline); }
.cs-table tbody tr:last-child td{ border-bottom:none; }
.cs-table tbody tr{ transition:background var(--cs-dur-micro) var(--cs-ease); }
.cs-table tbody tr:hover{ background:var(--cs-glass); }
.cs-table td strong{ color:var(--cs-text-high); font-weight:500; }
.cs-table--right td:last-child,
.cs-table--right th:last-child{ text-align:right; }

/* ── Alert / Banner (icon + tint, no left-border trope) ───────── */
.cs-alert{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px; border-radius:var(--cs-radius-md);
  border:1px solid var(--cs-hairline-2); background:var(--cs-glass-2);
  font-size:14px; color:var(--cs-text-mid);
}
.cs-alert__icon{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; }
.cs-alert__title{ font-family:var(--cs-font-display); font-weight:500; color:var(--cs-text-high); margin-bottom:2px; }
.cs-alert--info{ border-color:rgba(124,92,255,.34); }
.cs-alert--info .cs-alert__icon{ color:var(--cs-color-violet-soft); }
.cs-alert--success{ border-color:rgba(0,252,202,.32); }
.cs-alert--success .cs-alert__icon{ color:var(--cs-color-teal); }
.cs-alert--warn{ border-color:rgba(255,195,77,.32); }
.cs-alert--warn .cs-alert__icon{ color:#FFC34D; }
.cs-alert--danger{ border-color:rgba(255,99,120,.34); }
.cs-alert--danger .cs-alert__icon{ color:#FF8294; }

/* ── Tabs (radio-driven, pure CSS) ────────────────────────────── */
.cs-tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:var(--cs-radius-pill);
  background:var(--cs-glass); border:1px solid var(--cs-hairline); }
.cs-tabs__btn{
  font-family:var(--cs-font-display); font-weight:500; font-size:14px;
  padding:9px 18px; border-radius:var(--cs-radius-pill); cursor:pointer;
  color:var(--cs-text-mid); border:none; background:transparent;
  transition:color var(--cs-dur-micro) var(--cs-ease), background var(--cs-dur-micro) var(--cs-ease);
}
.cs-tabs__btn:hover{ color:var(--cs-text-high); }
.cs-tabs__btn[aria-selected="true"],
.cs-tabs__btn.is-active{ background:var(--cs-accent-cta); color:#06120F; box-shadow:0 0 16px var(--cs-glow-teal); }

/* ── Accordion (details/summary) ──────────────────────────────── */
.cs-acc{ border:1px solid var(--cs-hairline); border-radius:var(--cs-radius-md); overflow:hidden; }
.cs-acc__item{ border-bottom:1px solid var(--cs-hairline); }
.cs-acc__item:last-child{ border-bottom:none; }
.cs-acc__item summary{
  list-style:none; cursor:pointer; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--cs-font-display); font-weight:500; font-size:16px; color:var(--cs-text-high);
}
.cs-acc__item summary::-webkit-details-marker{ display:none; }
.cs-acc__item summary::after{
  content:""; width:11px; height:11px; flex:0 0 auto;
  border-right:1.5px solid var(--cs-text-mid); border-bottom:1.5px solid var(--cs-text-mid);
  transform:rotate(45deg); transition:transform var(--cs-dur-micro) var(--cs-ease);
}
.cs-acc__item[open] summary::after{ transform:rotate(-135deg); }
.cs-acc__body{ padding:0 20px 20px; color:var(--cs-text-mid); font-size:14px; line-height:1.6; }

/* ── Progress bar ─────────────────────────────────────────────── */
.cs-progress{ width:100%; height:8px; border-radius:var(--cs-radius-pill); background:var(--cs-ink-700); overflow:hidden; }
.cs-progress__fill{ height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--cs-color-teal), var(--cs-color-violet));
  box-shadow:0 0 14px var(--cs-glow-teal); }

/* ── Tooltip (CSS hover) ──────────────────────────────────────── */
.cs-tip{ position:relative; display:inline-flex; }
.cs-tip__bubble{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  white-space:nowrap; padding:8px 12px; border-radius:var(--cs-radius-sm);
  background:var(--cs-ink-800); border:1px solid var(--cs-hairline-2);
  color:var(--cs-text-high); font-size:12px; box-shadow:var(--cs-shadow-card);
  opacity:0; pointer-events:none; transition:opacity var(--cs-dur-micro) var(--cs-ease), transform var(--cs-dur-micro) var(--cs-ease);
}
.cs-tip__bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--cs-ink-800); }
.cs-tip:hover .cs-tip__bubble{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Breadcrumb & Pagination ──────────────────────────────────── */
.cs-crumbs{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cs-text-low); }
.cs-crumbs a{ color:var(--cs-text-mid); }
.cs-crumbs a:hover{ color:var(--cs-accent-line); }
.cs-crumbs__sep{ color:var(--cs-text-low); }
.cs-crumbs__cur{ color:var(--cs-text-high); }
.cs-pager{ display:inline-flex; gap:6px; }
.cs-pager__page{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border-radius:var(--cs-radius-sm); border:1px solid var(--cs-hairline);
  background:var(--cs-glass); color:var(--cs-text-mid); font-family:var(--cs-font-mono); font-size:13px;
  transition:border-color var(--cs-dur-micro) var(--cs-ease), color var(--cs-dur-micro) var(--cs-ease);
}
.cs-pager__page:hover{ border-color:var(--cs-color-teal-soft); color:var(--cs-text-high); }
.cs-pager__page.is-active{ background:var(--cs-accent-cta); color:#06120F; border-color:transparent; box-shadow:0 0 14px var(--cs-glow-teal); }


/* ════ cismart-brand.css ════ */
/* ═══════════════════════════════════════════════════════════════
   CiSmart · Brand Graphics (Aurora System)
   Ci-Punkt · Orbit-System · Objekte (Kreis, Kontur, Liquid Glass) ·
   Hero-Komposition. Lädt NACH cismart-ui.css.
   Verlaufs-Strokes brauchen das Sprite (#cs-grad-aurora, #cs-ci) im <body>.
   ═══════════════════════════════════════════════════════════════ */

/* ── Ci-Punkt · der Punkt ────────────────────────────────────────
   Das „i“ in CiSmart. Kleinstes Markenzeichen: Teal, rund, leuchtend.
   Regel: ein Punkt pro Blickfeld — Signal, kein Muster.              */
.cs-ci-dot{ --size:10px; display:inline-block; width:var(--size); height:var(--size); border-radius:50%; flex:0 0 auto;
  background:var(--cs-color-teal); box-shadow:0 0 calc(var(--size)*1.2) var(--cs-glow-teal); vertical-align:middle; position:relative; }
.cs-ci-dot--violet{ background:var(--cs-color-violet-soft); box-shadow:0 0 calc(var(--size)*1.2) var(--cs-glow-violet); }
.cs-ci-dot--white{ background:var(--cs-text-high); box-shadow:none; }
.cs-ci-dot--sm{ --size:6px; } .cs-ci-dot--lg{ --size:16px; } .cs-ci-dot--xl{ --size:28px; }
/* Satzzeichen: ersetzt den Punkt am Ende einer Headline (Größe folgt der Schrift) */
.cs-ci-dot--end{ --size:.2em; margin-left:.1em; vertical-align:baseline; box-shadow:0 0 .4em var(--cs-glow-teal); }
/* Live-Status: Ping-Ring */
.cs-ci-dot--pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--cs-color-teal); opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .cs-ci-dot--pulse::after{ animation:cs-ci-ping 2.2s var(--cs-ease) infinite; }
  .cs-ci-dot--blink{ animation:cs-ci-blink 1.1s steps(1) infinite; }
}
@keyframes cs-ci-ping{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(3.2); opacity:0; } }
@keyframes cs-ci-blink{ 50%{ opacity:.15; } }
/* Liste mit Ci-Punkt als Bullet */
.cs-list-ci{ display:flex; flex-direction:column; gap:10px; }
.cs-list-ci li{ position:relative; padding-left:22px; color:var(--cs-text-mid); }
.cs-list-ci li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%;
  background:var(--cs-color-teal); box-shadow:0 0 8px var(--cs-glow-teal); }
/* Divider: Hairline · Punkt · Hairline (optional mit Mono-Label) */
.cs-divider-ci{ display:flex; align-items:center; gap:14px; width:100%; color:var(--cs-text-low);
  font-family:var(--cs-font-mono); font-size:var(--cs-text-caption); letter-spacing:var(--cs-tracking-mono); text-transform:uppercase; }
.cs-divider-ci::before, .cs-divider-ci::after{ content:""; flex:1; height:1px; background:var(--cs-hairline-2); }

/* ── Ci-Punkt · die Marke (SVG-Symbol #cs-ci) ──────────────────
   <span class="cs-ci-mark"><svg><use href="#cs-ci"></use></svg></span>
   C + Fuß = currentColor · Punkt = --ci-dot                          */
.cs-ci-mark{ --size:48px; --ci-dot:var(--cs-color-teal); width:var(--size); height:var(--size); display:inline-block; flex:0 0 auto; color:var(--cs-text-high); }
.cs-ci-mark svg{ width:100%; height:100%; display:block; overflow:visible; }
.cs-ci-mark--glow svg{ filter:drop-shadow(0 0 10px var(--cs-glow-teal)); }
.cs-ci-mark--mono{ --ci-dot:currentColor; }
.cs-ci-mark--violet{ --ci-dot:var(--cs-color-violet-soft); }
.cs-ci-mark--teal{ color:var(--cs-color-teal); --ci-dot:#fff; }
/* Wasserzeichen in Cards / Sektionen (Container braucht position + overflow:hidden) */
.cs-ci-mark--watermark{ position:absolute; right:-8%; bottom:-18%; --size:min(62%, 420px); color:rgba(255,255,255,.035); --ci-dot:rgba(0,252,202,.28); pointer-events:none; }
/* Glyph-Tile (App-Icon / Favicon-Look) */
.cs-ci-tile{ --tile:72px; width:var(--tile); height:var(--tile); border-radius:calc(var(--tile)*.26); position:relative; display:inline-block; flex:0 0 auto;
  background:radial-gradient(circle at 28% 18%, var(--cs-ink-500), var(--cs-ink-800) 72%); border:1px solid var(--cs-hairline-2);
  box-shadow:var(--cs-shadow-card), var(--cs-inset-glass); }
.cs-ci-tile .cs-ci-mark{ --size:calc(var(--tile)*.54); position:absolute; left:50%; top:50%; translate:-50% -50%; }
.cs-ci-tile--round{ border-radius:50%; border:calc(var(--tile)*.045) solid var(--cs-color-teal); box-shadow:0 0 24px -6px var(--cs-glow-teal), var(--cs-shadow-card); }
.cs-ci-tile--teal{ background:var(--cs-color-teal); border-color:transparent; }
.cs-ci-tile--teal .cs-ci-mark{ color:#06120F; --ci-dot:#fff; }

/* ── Orbit-System ────────────────────────────────────────────────
   Satellit (Punkt) auf Hairline-Bahn, leuchtende Spur (Arc), offener Ring.
   Wrapper um Avatar / Icon / Bild:
   <span class="cs-orbit" style="--rot:-35deg;--arc:118;">
     <svg class="cs-orbit__svg" viewBox="0 0 100 100">
       <circle class="cs-orbit__ring" cx="50" cy="50" r="48"/>
       <g class="cs-orbit__rot"><circle class="cs-orbit__arc" cx="50" cy="50" r="48"/><circle class="cs-orbit__dot" cx="98" cy="50" r="2.8"/></g>
     </svg>
     …Inhalt…
   </span>
   --arc = Spurlänge in SVG-Einheiten (Umfang r48 ≈ 302) · --rot = Startwinkel */
.cs-orbit{ position:relative; display:inline-grid; place-items:center; --orbit-inset:-12%; --rot:-35deg; --arc:118;
  --orbit-color:var(--cs-color-teal-soft); --orbit-dot:var(--cs-color-violet); --orbit-glow:var(--cs-glow-teal); }
.cs-orbit > :not(.cs-orbit__svg){ position:relative; z-index:1; }
.cs-orbit__svg{ position:absolute; inset:var(--orbit-inset); overflow:visible; pointer-events:none; z-index:0; }
.cs-orbit__ring{ fill:none; stroke:var(--cs-hairline-2); stroke-width:.5; }
.cs-orbit__ring--dashed{ stroke:rgba(255,255,255,.22); stroke-width:1; stroke-dasharray:3 7; stroke-linecap:round; }
.cs-orbit__rot{ transform-box:view-box; transform-origin:50% 50%; transform:rotate(var(--rot)); }
.cs-orbit__arc{ fill:none; stroke:var(--orbit-color); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:var(--arc) 1000;
  filter:drop-shadow(0 0 6px var(--orbit-glow)); }
.cs-orbit__dot{ fill:var(--orbit-dot); }
.cs-orbit--violet{ --orbit-color:var(--cs-color-violet-soft); --orbit-dot:var(--cs-color-teal); --orbit-glow:var(--cs-glow-violet); }
.cs-orbit--gradient .cs-orbit__arc{ stroke:url(#cs-grad-aurora); stroke-width:2.2; }
.cs-orbit--full{ --arc:1000; }
/* C-Form: Öffnung rechts, Punkt im Spalt = der Ci-Punkt als Orbit */
.cs-orbit--ci{ --arc:243; --rot:36deg; }
.cs-orbit--ci .cs-orbit__arc{ stroke:var(--cs-text-high); stroke-width:3; filter:none; }
.cs-orbit--ci .cs-orbit__dot{ fill:var(--cs-color-teal); r:4.2px; filter:drop-shadow(0 0 5px var(--cs-glow-teal)); }
/* Aura: weicher violetter Schein hinter dem Inhalt */
.cs-orbit--aura::before{ content:""; position:absolute; inset:-14%; border-radius:50%; z-index:0;
  background:radial-gradient(circle, var(--cs-glow-violet) 30%, transparent 70%); }
@media (prefers-reduced-motion:no-preference){ .cs-orbit--spin .cs-orbit__rot{ animation:cs-orbit-spin 18s linear infinite; } }
@keyframes cs-orbit-spin{ to{ rotate:360deg; } }
/* Dekor-Orbit in Sektionsgröße (hinter Medien, nach links überstehend) */
.cs-orbit-deco{ position:absolute; width:min(560px,80vw); aspect-ratio:1; pointer-events:none; overflow:visible; z-index:0; }

/* ── Objekte · Kreise, Konturen, Liquid Glass ───────────────────
   Der flächige Kreis ist der Ci-Punkt in groß. Konturen sind seine
   technische Ableitung. Liquid Glass ist das Material darüber —
   milchig, lichtbrechend, nie farbig.                                 */
.cs-orb{ --size:200px; width:var(--size); height:var(--size); border-radius:50%; flex:0 0 auto; position:relative; display:block; }
.cs-orb--teal{ background:var(--cs-color-teal); box-shadow:0 34px 90px -34px var(--cs-glow-teal); }
.cs-orb--violet{ background:var(--cs-color-violet); box-shadow:0 34px 90px -34px var(--cs-glow-violet); }
.cs-orb--ink{ background:var(--cs-ink-800); border:1px solid var(--cs-hairline-2); }
.cs-orb--aurora{ background:linear-gradient(135deg, var(--cs-color-teal), var(--cs-color-violet)); }
.cs-orb--radiant{ background:radial-gradient(circle at 35% 30%, #5FFFE0, var(--cs-color-teal) 45%, #00B894 100%); box-shadow:0 34px 90px -34px var(--cs-glow-teal); }
/* Kontur-Kreise */
.cs-orb--ring{ background:transparent; border:1px solid var(--cs-hairline-2); }
.cs-orb--ring-teal{ background:transparent; border:1.5px solid var(--cs-color-teal);
  box-shadow:0 0 28px -8px var(--cs-glow-teal), inset 0 0 28px -12px var(--cs-glow-teal); }
.cs-orb--ring-violet{ background:transparent; border:1.5px solid var(--cs-color-violet-soft);
  box-shadow:0 0 28px -8px var(--cs-glow-violet), inset 0 0 28px -12px var(--cs-glow-violet); }
.cs-orb--ring-dashed{ background:transparent; border:1px dashed rgba(255,255,255,.32); }
.cs-orb--ring-gradient{ background:linear-gradient(135deg, var(--cs-color-teal), var(--cs-color-violet));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
/* Satellit (Ci-Punkt) auf der Kreislinie — Winkel via --angle */
.cs-orb__sat{ position:absolute; inset:0; rotate:var(--angle, 0deg); pointer-events:none; }
.cs-orb__sat::after{ content:""; position:absolute; right:0; top:50%; translate:50% -50%; width:var(--dot, 10px); height:var(--dot, 10px); border-radius:50%;
  background:var(--sat, var(--cs-color-teal)); box-shadow:0 0 12px var(--cs-glow-teal); }
.cs-orb__sat--violet{ --sat:var(--cs-color-violet-soft); }
.cs-orb__sat--violet::after{ box-shadow:0 0 12px var(--cs-glow-violet); }
/* Liquid Glass — eine Linse: zeigt, was dahinter liegt, nur minimal weichgezeichnet.
   Blur-Stufen: (glass) = --glass-clear 3px · --glass-frost 14px (nur Dekor im Hintergrund)
   Tints: --glass-dark (unter weißem Text) · --glass-light (unter dunklem Text) — je 5px     */
.cs-orb--glass{
  background:
    radial-gradient(60% 42% at 30% 20%, rgba(255,255,255,.30), transparent 62%),
    radial-gradient(70% 50% at 70% 96%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 50%, rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(3px) saturate(1.25) brightness(1.04);
  backdrop-filter:blur(3px) saturate(1.25) brightness(1.04);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -26px 44px -26px rgba(255,255,255,.22),
    inset -22px 0 44px -32px rgba(0,252,202,.26),
    inset 22px 0 44px -32px rgba(124,92,255,.24),
    0 44px 90px -34px rgba(0,0,0,.6);
}
.cs-orb--glass::before{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 62%, rgba(255,255,255,.05) 76%, rgba(255,255,255,.20) 100%); }
.cs-orb--glass::after{ content:""; position:absolute; left:18%; top:9%; width:38%; height:22%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, rgba(255,255,255,.58), transparent 72%); filter:blur(3px); }
.cs-orb--glass-clear{ -webkit-backdrop-filter:blur(3px) saturate(1.25) brightness(1.04); backdrop-filter:blur(3px) saturate(1.25) brightness(1.04); }
.cs-orb--glass-frost{ -webkit-backdrop-filter:blur(14px) saturate(1.35) brightness(1.06); backdrop-filter:blur(14px) saturate(1.35) brightness(1.06);
  background:radial-gradient(60% 42% at 30% 20%, rgba(255,255,255,.40), transparent 62%), radial-gradient(70% 50% at 70% 96%, rgba(255,255,255,.14), transparent 62%), linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 50%, rgba(255,255,255,.08)); }
.cs-orb--glass-dark{ -webkit-backdrop-filter:blur(5px) brightness(.55) saturate(1.2); backdrop-filter:blur(5px) brightness(.55) saturate(1.2);
  background:radial-gradient(60% 42% at 30% 20%, rgba(255,255,255,.22), transparent 62%), linear-gradient(145deg, rgba(10,10,20,.42), rgba(10,10,20,.28)); border-color:rgba(255,255,255,.28); }
.cs-orb--glass-light{ -webkit-backdrop-filter:blur(5px) brightness(1.6) saturate(.9); backdrop-filter:blur(5px) brightness(1.6) saturate(.9);
  background:radial-gradient(60% 42% at 30% 20%, rgba(255,255,255,.75), transparent 62%), linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.42)); border-color:rgba(255,255,255,.85); }
:is(.cs-theme-paper, [data-theme="paper"]) .cs-orb--glass{ border-color:rgba(16,16,25,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 44px 90px -34px rgba(16,16,40,.25); }
/* Glass-Fläche in beliebiger Form (Pills, Cards, Bars). Tint folgt der Textfarbe:
   weißer Text → --dark (verdunkelt den Hintergrund) · dunkler Text → --light (hellt auf) */
.cs-glass{ position:relative; border-radius:var(--cs-radius-md);
  background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 24px 50px -24px rgba(0,0,0,.5); }
.cs-glass--dark{ color:rgba(255,255,255,.92); background:linear-gradient(145deg, rgba(10,10,20,.52), rgba(10,10,20,.36)); border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px) brightness(.55) saturate(1.2); backdrop-filter:blur(8px) brightness(.55) saturate(1.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -24px rgba(0,0,0,.5); }
.cs-glass--light{ color:rgba(16,16,25,.88); background:linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.52)); border-color:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px) brightness(1.55) saturate(.9); backdrop-filter:blur(8px) brightness(1.55) saturate(.9); box-shadow:inset 0 1px 0 #fff, 0 24px 50px -24px rgba(16,16,40,.3); }
.cs-glass--clear{ -webkit-backdrop-filter:blur(3px) saturate(1.2); backdrop-filter:blur(3px) saturate(1.2); }
.cs-glass--pill{ border-radius:var(--cs-radius-pill); }
/* Schweben */
@media (prefers-reduced-motion:no-preference){
  .cs-orb--float{ animation:cs-orb-float 9s ease-in-out infinite alternate; }
  .cs-orb--float-rev{ animation:cs-orb-float 12s ease-in-out infinite alternate-reverse; }
}
@keyframes cs-orb-float{ from{ transform:translate(0,0); } to{ transform:translate(-14px,18px); } }

/* ── Hero-Komposition · Kreis + Liquid Glass + Headline ─────────
   Must-have der Marke. Schichten (z): Backdrop 0 · Kontur-Ring 0 ·
   Teal-Kreis 1 · Copy 2 · Glass-Kugel 3 (verwäscht Text darunter).   */
.cs-stage{ position:relative; isolation:isolate; overflow:hidden; min-height:540px; border-radius:var(--cs-radius-xl); --stage-shift:18%;
  background:var(--cs-ink-950); border:1px solid var(--cs-hairline); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; padding:var(--cs-space-8) var(--cs-space-7); }
.cs-stage__obj{ position:absolute; z-index:1; }
.cs-stage__obj--behind{ z-index:0; }
.cs-stage__obj--front{ z-index:3; }
.cs-stage__copy{ position:relative; z-index:2; justify-self:start; margin-left:var(--stage-shift); width:min(600px, calc(100% - var(--stage-shift)));
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--cs-space-4); }
.cs-stage__copy .cs-eyebrow-pill{ white-space:nowrap; }
.cs-stage__copy .cs-d1{ color:#fff; font-weight:400; font-size:clamp(44px, 7vw, 84px); text-shadow:var(--cs-shadow-text); }
.cs-stage__copy .cs-lead{ color:rgba(255,255,255,.86); text-shadow:var(--cs-shadow-text); }
.cs-text-shadow{ text-shadow:var(--cs-shadow-text); }
@media (max-width:760px){ .cs-stage{ min-height:460px; padding:var(--cs-space-7) var(--cs-space-5); --stage-shift:0%; } }