/* Sektion ki: KI-Agenten & Kernflow OS.
   Ein Partikelfeld (2D-Canvas) formt das Kernflow-K, entfaltet sich zum Netzwerk um den Kern, daneben spielt ein Beispiel-Vormittag ab.
   Modi (setzt home-ki.js an #ki): ohne Klasse = statischer Fluss (kein JS / kein GSAP / reduzierte Bewegung),
   .is-pin = Desktop gepinnt, .is-scroll = Mobil mit kurzer Sticky-Bühne. */

.kx{
  position:relative;z-index:1;color:var(--ink);
  --px:max(28px,calc((100vw - 1240px)/2));
  --hs:clamp(48px,6.6vw,112px);
  padding-block:clamp(80px,10vw,140px);
}
.kx__pin{position:relative;z-index:1;width:min(1180px,100% - 48px);margin-inline:auto;display:grid;gap:clamp(28px,4vw,48px)}
.kx__scene{position:relative}
.kx__stage{position:relative;display:grid;gap:clamp(20px,3vw,36px)}
.kx__cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.kx__kbox{display:none}
.kx__intro{position:relative;z-index:2;display:grid;gap:22px;justify-items:start}
.kx__tag i{background:var(--c-sys);box-shadow:0 0 12px var(--c-sys)}
.kx-h{margin:0;font-weight:500;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.kx-h span{display:block}
.kx-h em,.kx__cap h3 em,.kx-feed__title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;padding-right:.04em}
.kx-h em{background:linear-gradient(100deg,#E7D9FF 0%,#B27CFF 55%,#8E7DFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kx__lede{margin:0;max-width:40ch;color:var(--ink-2);font-size:clamp(16px,1.25vw,18px);line-height:1.55}
.kx__netbox{position:relative;height:clamp(380px,62vh,620px)}
.kx__cap{position:relative;z-index:2;display:grid;gap:12px;max-width:420px}
.kx__cap h3{margin:0;font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.kx__cap p{margin:0;color:var(--muted);font-size:14.5px;max-width:38ch}

/* Netzwerk-Knoten: echtes HTML über dem Canvas */
.kx-nodes{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kx-node{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 12px;border-radius:999px;font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;background:rgba(12,12,18,.62);border:1px solid color-mix(in srgb,var(--nc) 38%,rgba(255,255,255,.08));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px -16px var(--nc);transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.kx-node i{width:7px;height:7px;border-radius:50%;background:var(--nc);box-shadow:0 0 10px var(--nc);flex:0 0 auto;transition:transform .5s var(--ease)}
.kx-node--core{height:40px;padding:0 18px 0 14px;font-size:14.5px;background:rgba(20,14,34,.7);border-color:rgba(178,124,255,.5)}
.kx-node--core i{width:9px;height:9px;border-radius:3px;background:linear-gradient(180deg,#D7BDFF,var(--c-sys))}
.kx-node.is-hot{border-color:var(--nc);background:color-mix(in srgb,var(--nc) 20%,rgba(12,12,18,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 34px -4px var(--nc)}
.kx-node.is-hot i{transform:scale(1.5)}
.kx.is-js .kx-nodes{position:absolute;inset:0;display:block;pointer-events:none}
.kx.is-js .kx-node{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}

/* Glas-Panel: Beispiel-Vormittag + Funktionen */
.kx__panel{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,2.4vw,32px);padding:clamp(20px,2vw,26px);border-radius:26px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(26,20,40,.58),rgba(12,12,18,.7));-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(178,124,255,.05),0 60px 120px -60px rgba(0,0,0,.95),0 0 120px -60px rgba(178,124,255,.45)}
.kx__panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 40% at 80% 0%,rgba(178,124,255,.16),transparent 70%)}
.kx-feed{position:relative;display:grid;gap:clamp(10px,1.5vh,14px);align-content:start}
.kx-feed__head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kx-feed__sys{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.kx-feed__sys i{width:7px;height:7px;border-radius:50%;background:var(--c-sys);box-shadow:0 0 10px var(--c-sys)}
.kx-feed__badge{padding:4px 8px;border-radius:999px;border:1px dashed rgba(178,124,255,.45);color:#CDB3FF;font-size:10px}
.kx-feed__clock{margin-left:auto;font-size:13px;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.kx-feed__title{margin:0;font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.025em}
.kx-evs{list-style:none;margin:0;padding:0;display:grid;gap:6px;position:relative}
.kx-ev{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:clamp(8px,1.15vh,11px) 12px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:14px;overflow:hidden;transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s,background .6s}
.kx-ev::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--ec);opacity:0;transition:opacity .6s}
.kx-ev i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.02em;color:#fff;font-style:normal;background:var(--ec);box-shadow:0 0 18px -6px var(--ec)}
.kx-ev b{display:block;font-weight:500;line-height:1.3}
.kx-ev small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx-ev time{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* waiting slots: faint dashed outlines, the event slides in when it happens */
.kx.is-anim .kx-ev:not(.is-on){background:transparent;border-style:dashed;border-color:rgba(255,255,255,.1)}
.kx.is-anim .kx-ev>*{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.kx.is-anim .kx-ev:not(.is-on)>*{opacity:0;transform:translateY(8px)}
.kx.is-anim .kx-ev.is-on>div{transition-delay:.06s}
.kx.is-anim .kx-ev.is-on>time{transition-delay:.12s}
.kx-ev.is-now{background:color-mix(in srgb,var(--ec) 9%,rgba(255,255,255,.03));border-color:color-mix(in srgb,var(--ec) 40%,transparent)}
.kx-ev.is-now::before{opacity:1}
.kx-ev.is-now time{color:var(--ink)}

.kx-fx{position:relative;display:grid;gap:14px;align-content:start}
.kx-fx__title{margin:0;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kx-fx__list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.kx-fx__list li{display:grid;gap:3px;padding:11px 0;border-bottom:1px solid var(--line)}
.kx-fx__list b{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.kx-fx__list span{color:var(--muted);font-size:13px;line-height:1.4}
.kx-fx__more{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}
.kx-fx__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:4px}
.kx-fx__note{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.03em;color:var(--muted)}
.kx-fx .btn{height:46px}

@media (max-width:860px){
  .kx__panel{grid-template-columns:1fr}
}

/* ---------- Desktop: gepinnte Bühne ---------- */
.kx.is-pin{padding:0}
.kx.is-pin .kx__pin{display:block;width:auto;height:100vh;min-height:640px;overflow:hidden}
.kx.is-pin .kx__scene,.kx.is-pin .kx__stage{position:absolute;inset:0;display:block}
.kx.is-pin .kx__kbox{display:block;position:absolute;left:50%;top:50%;height:min(52vh,34vw);aspect-ratio:.8;transform:translate(-50%,-50%)}
.kx.is-pin .kx__intro{position:absolute;inset:0;display:block;pointer-events:none}
.kx.is-pin .kx__intro>*{position:absolute;pointer-events:auto;text-shadow:0 6px 40px rgba(10,10,14,.9)}
.kx.is-pin .kx__tag{left:var(--px);top:calc(14vh - 6px)}
.kx.is-pin .kx-h{position:static;font-size:var(--hs);line-height:.95;text-shadow:none}
.kx.is-pin .kx-h span{position:absolute;white-space:nowrap;text-shadow:0 6px 40px rgba(10,10,14,.9)}
.kx.is-pin .kx-h__a{left:var(--px);top:calc(14vh + 26px)}
.kx.is-pin .kx-h__b{right:var(--px);bottom:11vh;text-align:right}
.kx.is-pin .kx-h__b em{text-shadow:none}
.kx.is-pin .kx__lede{left:var(--px);top:calc(14vh + 54px + var(--hs));width:min(34ch,30vw);font-size:clamp(15px,1.15vw,17px)}
.kx.is-pin .kx__netbox{position:absolute;inset:14vh 9vw 13vh;height:auto}
.kx.is-pin .kx__cap{position:absolute;left:var(--px);bottom:8vh;width:min(360px,28vw);opacity:0}
.kx.is-pin .kx__panel{position:absolute;right:var(--px);top:calc(50% + 28px);width:min(540px,max(41vw,460px));margin:0;opacity:0;grid-template-columns:1fr;gap:18px}
.kx.is-pin .kx-fx{padding-top:16px;border-top:1px solid var(--line);gap:12px}
.kx.is-pin .kx-fx__list{grid-template-columns:1fr 1fr;column-gap:22px;border-top:0}
.kx.is-pin .kx-fx__list li{padding:8px 0}
@media (max-height:780px){
  .kx.is-pin .kx-ev small,.kx.is-pin .kx-fx__list span,.kx.is-pin .kx-fx__more{display:none}
  .kx.is-pin .kx__panel{gap:12px;padding:16px 18px}
  .kx.is-pin .kx-feed{gap:9px}
  .kx.is-pin .kx-feed__title{font-size:18px}
  .kx.is-pin .kx-ev{padding:6px 10px}
  .kx.is-pin .kx-ev b{font-size:13.5px}
  .kx.is-pin .kx-fx{padding-top:10px;gap:8px}
  .kx.is-pin .kx-fx__list li{padding:5px 0}
  .kx.is-pin .kx-fx__list b{font-size:13.5px}
  .kx.is-pin .kx-fx .btn{height:42px}
}

/* ---------- Mobil: kurze Sticky-Bühne, Panel schiebt sich darüber ---------- */
.kx.is-scroll{padding:0 0 clamp(64px,14vw,96px)}
.kx.is-scroll .kx__pin{display:block;width:100%}
.kx.is-scroll .kx__scene{height:240svh}
.kx.is-scroll .kx__stage{position:sticky;top:0;display:block;height:100svh;overflow:hidden}
.kx.is-scroll .kx__kbox{display:block;position:absolute;left:50%;top:46%;height:min(38svh,74vw);aspect-ratio:.8;transform:translate(-50%,-50%)}
.kx.is-scroll .kx__intro{position:absolute;inset:0;display:block;pointer-events:none}
.kx.is-scroll .kx__intro>*{position:absolute;text-shadow:0 4px 30px rgba(10,10,14,.95)}
.kx.is-scroll .kx__tag{left:20px;top:calc(11svh - 4px)}
.kx.is-scroll .kx-h{position:static;font-size:clamp(36px,10.6vw,52px);line-height:.98}
.kx.is-scroll .kx-h span{position:absolute;max-width:calc(100% - 40px);text-shadow:0 4px 30px rgba(10,10,14,.95)}
.kx.is-scroll .kx-h__a{left:20px;top:calc(11svh + 24px)}
.kx.is-scroll .kx-h__b{right:20px;bottom:calc(6svh + 104px);text-align:right}
.kx.is-scroll .kx-h__b em{text-shadow:none}
.kx.is-scroll .kx__lede{left:20px;right:20px;bottom:6svh;font-size:15px}
.kx.is-scroll .kx-ev small{white-space:normal}
.kx.is-scroll .kx__netbox{position:absolute;inset:15svh 10px 12svh;height:auto}
.kx.is-scroll .kx__cap{display:none}
.kx.is-scroll .kx-node{height:30px;font-size:12.5px;padding:0 11px 0 10px;gap:7px}
.kx.is-scroll .kx-node--core{height:34px;font-size:13px}
.kx.is-scroll .kx__panel{width:calc(100% - 32px);margin:-46svh auto 0;padding:18px}

/* ---------- Eigener Tiefen-Hintergrund ----------
   Solange #ki aktiv ist (body.in-kx, setzt home-ki.js), blendet der globale Nebel/Hügel-Hintergrund aus.
   Statt dessen: Sternenfeld in drei Tiefen + langsam ziehende Nebelschlieren (2D-Canvas), klebt hinter der Bühne. */
.bgfx{transition:opacity 1.1s var(--ease)}
body.in-kx .bgfx{opacity:0}
.kx-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.kx-sky__view{position:sticky;top:0;width:100%;height:100vh;height:100lvh;overflow:hidden;opacity:0}
.kx-sky__neb,.kx-sky__stars{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- Statischer Fluss (reduzierte Bewegung, ohne GSAP) ---------- */
.kx:not(.is-pin):not(.is-scroll) .kx-h__b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .kx-ev,.kx-node,.kx-node i{transition:none}
}