/* ============================================================
   c:node Design System v1.4 — Web-Layer
   Quelle: DS-Artifact 3oJayka6NHZwQzoXgkfN3a (tokens.json + README)
   Lädt NACH uc.css, überschreibt den alten Look.
   Regeln: D1 neutrale Apple-Grautöne · D2 getönte Pille / Verlauf nur Hero-CTA
   D7 Zweiklang-Headline, kein Verlauf-Text · D11 Glas schwebt, Inhalt steht
   D12 Ink-Glanz auf Überschriften + Violett-Glanz auf Akzentzeile
   ============================================================ */

:root{
  /* Flächen (D1 neutrale Apple-Grautöne) */
  --canvas:#F5F5F7; --surface:#FFFFFF; --surface-2:#F2F2F7; --surface-3:#E5E5EA;
  --line:#D8D8DD; --line-soft:#E8E8ED;
  /* Text */
  --ink:#1D1D1F; --muted:#6E6E73; --faint:#8E8E93;
  --ink-sheen-start:#1D1D1F; --ink-sheen-end:#48484F;
  /* Violett (handelt) */
  --primary:#7C3AED; --primary-text:#7C3AED; --primary-tint:#F2EEFD; --on-primary:#FFFFFF;
  --accent-sheen-start:#8B5CF6; --accent-sheen-end:#5B21B6;
  --indigo:#6366F1;
  /* Mint = belegt (D5) */
  --mint:#36C399; --mint-text:#12775A; --mint-tint:#E7F6F0;
  /* Signale */
  --amber-text:#B45309; --amber-tint:#FEF3E2; --danger:#DC2626;
  --night:#100C1E;
  /* Verläufe (D8) — zwei, der zweite Stop ist IMMER Indigo */
  --brand-grad:linear-gradient(135deg,#7C3AED,#6366F1);
  --aurora:linear-gradient(105deg,#7C3AED 0%,#6366F1 52%,#36C399 100%);
  /* Glas (D11) */
  --glass-fill:rgba(255,255,255,.72); --glass-fill-strong:rgba(255,255,255,.86);
  --glass-edge:rgba(255,255,255,.9); --blur-glass:24px; --blur-glass-strong:40px; --glass-saturate:180%;
  /* Kanten / Licht */
  --hairline:0.5px; --stroke-1:1px; --icon-stroke:1.6px;
  --text-edge:0 1px 0 rgba(255,255,255,.85);
  /* Schatten (geschichtet, violett getönt) */
  --shadow-sm:0 13px 30px -18px rgba(70,54,140,.26);
  --shadow-md:0 32px 72px -34px rgba(70,54,140,.32);
  --shadow-glass:0 1px 1px rgba(29,29,31,.04),0 8px 24px -12px rgba(70,54,140,.22),0 28px 60px -30px rgba(70,54,140,.3);
  --shadow-edge:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(29,29,31,.06);
  --shadow-cta-gloss:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -8px rgba(124,58,237,.5);
  /* Radien */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  /* Raster 4px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px; --space-20:80px;
  /* Schrift */
  --display:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#161618; --surface:#1F1F21; --surface-2:#2A2A2C; --surface-3:#343436;
  --line:#3A3A3C; --line-soft:#2E2E30;
  --ink:#F5F5F7; --muted:#A1A1A6; --faint:#8E8E93;
  --ink-sheen-start:#FFFFFF; --ink-sheen-end:#C7C7CE;
  --primary-text:#AE85F4; --primary-tint:#2A2340;
  --accent-sheen-start:#D4BEFB; --accent-sheen-end:#9D6CF0;
  --mint-text:#36C399; --mint-tint:#16302A;
  --amber-text:#E0A04A; --amber-tint:#3A2A14; --danger:#F87171;
  --glass-fill:rgba(30,30,32,.66); --glass-fill-strong:rgba(30,30,32,.84); --glass-edge:rgba(255,255,255,.14);
  --text-edge:0 1px 0 rgba(255,255,255,.12);
}}
:root[data-theme="dark"]{
  --canvas:#161618; --surface:#1F1F21; --surface-2:#2A2A2C; --surface-3:#343436;
  --line:#3A3A3C; --line-soft:#2E2E30;
  --ink:#F5F5F7; --muted:#A1A1A6; --faint:#8E8E93;
  --ink-sheen-start:#FFFFFF; --ink-sheen-end:#C7C7CE;
  --primary-text:#AE85F4; --primary-tint:#2A2340;
  --accent-sheen-start:#D4BEFB; --accent-sheen-end:#9D6CF0;
  --mint-text:#36C399; --mint-tint:#16302A;
  --amber-text:#E0A04A; --amber-tint:#3A2A14; --danger:#F87171;
  --glass-fill:rgba(30,30,32,.66); --glass-fill-strong:rgba(30,30,32,.84); --glass-edge:rgba(255,255,255,.14);
  --text-edge:0 1px 0 rgba(255,255,255,.12);
}

/* ---- Canvas + Atmosphäre (zwei Glows, kein Verlauf im Regelsinn) ---- */
.ds-canvas{background:var(--canvas);position:relative;color:var(--ink);font-family:var(--sans)}
.ds-glows{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ds-glows::before,.ds-glows::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.ds-glows::before{width:46vw;height:46vw;top:-14vw;right:-8vw;background:rgba(124,58,237,.06)}
.ds-glows::after{width:40vw;height:40vw;bottom:-12vw;left:-8vw;background:rgba(99,102,241,.05)}

/* ---- Schrift: optische Größe immer an ---- */
.ds-canvas h1,.ds-canvas h2,.ds-canvas h3{font-family:var(--display);font-optical-sizing:auto;text-wrap:balance;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}

/* Zweiklang-Headline */
.hl-zk{margin:0}
.hl-zk .l1,.hl-zk .l2{display:block}
.hl-zk .l1{font-weight:300;font-size:clamp(34px,5.4vw,60px);line-height:1.02;letter-spacing:-.025em;font-variation-settings:"opsz" 96}
.hl-zk .l2{font-weight:600;font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.025em;font-variation-settings:"opsz" 72;margin-top:.08em}

/* D12 Ink-Glanz (auf ink-Überschriften, je Zeile) */
.ink-sheen{color:var(--ink);background:linear-gradient(180deg,var(--ink-sheen-start) 0%,var(--ink-sheen-start) 42%,var(--ink-sheen-end) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;filter:drop-shadow(var(--text-edge))}
/* D12 Violett-Glanz (nur Akzentzeile ab 30px/600) */
.accent-sheen{color:var(--primary-text);background:linear-gradient(180deg,var(--accent-sheen-start) 0%,var(--primary-text) 50%,var(--accent-sheen-end) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;filter:drop-shadow(var(--text-edge))}
@media (forced-colors:active){.ink-sheen{background:none;-webkit-text-fill-color:CanvasText;filter:none}.accent-sheen{background:none;-webkit-text-fill-color:CanvasText;filter:none}}

/* Eyebrow — label in primary-text */
.ds-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-text)}

/* ---- Buttons (D2) ---- */
.ds-btn{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.2;border-radius:var(--radius-pill);
  padding:12px 20px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:filter .18s,background .18s}
/* Primär = getönte Pille */
.ds-btn.tint{background:var(--primary-tint);color:var(--primary-text);border-color:color-mix(in srgb,var(--primary-text) 24%,transparent)}
.ds-btn.tint:hover{filter:brightness(.98)}
/* Sekundär = Glas-Umriss */
.ds-btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
/* Hero-CTA = Markenverlauf (EINMAL pro Seite) */
.ds-btn.cta{background:var(--brand-grad);color:var(--on-primary);box-shadow:var(--shadow-cta-gloss)}
.ds-btn.cta:hover{filter:brightness(1.06)}

/* ---- Glas (D11) ---- */
.glass{background:var(--glass-fill);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));
  border:var(--hairline) solid var(--glass-edge);box-shadow:var(--shadow-edge),var(--shadow-glass)}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--glass-fill-strong);backdrop-filter:none}}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--glass-fill-strong)}}

/* ---- Belege: SourceChip (Mint = belegt), ApprovalCard stehen auf surface ---- */
.src-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--mint-text);background:var(--mint-tint);border:1px solid color-mix(in srgb,var(--mint) 34%,var(--line));
  border-radius:var(--radius-pill);padding:4px 10px}
.src-chip::before{display:none}
.src-chip.open{color:var(--amber-text);background:var(--amber-tint);border-color:color-mix(in srgb,var(--amber-text) 34%,var(--line))}
.src-chip.open::before{background:var(--amber-text)}

/* Hairline-Helper */
@media (min-resolution:2dppx){.hairline{border-width:.5px}}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}