/* KI im Eventmanagement DE/EN, Abschnitt 02: Anwendungswelten als Datenfluss-Buehne (Martin 22.10.2026).
   Markup und Ablauf: fp_ki_worlds() in funktionen/_tpl/ki-blocks.php. Aufbau wie die Modul-Buehne der
   Event-App (event-app-mods.css): links Navigation, rechts dunkle Buehne mit Erklaerkarte.
   Phasen (data-kwx-phase): 0 Frage tippt, 1 Punkt zu AirLST, 2 Weg aktiv, 3 Punkt zum Ergebnis und Karte da,
   4 Zeilen abgehakt und Status freigegeben. Ohne Skript und bei reduzierter Bewegung gilt Phase 4. */

.kwx { display: grid; gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 1024px) { .kwx { grid-template-columns: minmax(280px, 4fr) 8fr; align-items: stretch; } }

/* ---- Navigation ---- */
.kwx-nav { display: flex; flex-direction: column; padding: 22px 14px 14px; border: 1px solid var(--fp-line); border-radius: 28px; background: #fff; }
.kwx .kwx-grp { display: flex; align-items: baseline; gap: 10px; margin: 6px 12px 10px; font-family: var(--font-micro); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.kwx .kwx-grp + ul + .kwx-grp, .kwx ul + .kwx-grp { margin-top: 22px; }
.kwx-grp b { color: var(--fp-accent); font-weight: 700; }
.kwx-grp.is-std b { color: #0E7B4F; }
.kwx-grp em { font-style: normal; letter-spacing: 0; text-transform: none; font-family: var(--font-sans); font-size: 13px; color: var(--fp-faint); }
.kwx-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kwx-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 8px; border: 0; border-radius: 14px; background: none; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--fp-ink); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.kwx-item:hover { background: var(--fp-soft); }
.kwx-item:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 2px; }
.kwx-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; transition: background .25s, box-shadow .25s; }
.kwx-ic .illuicon { width: 34px; height: 34px; display: block; }
.kwx-item.is-on { background: var(--fp-accent-soft); color: var(--fp-accent); }
.kwx-item.is-on .kwx-ic { background: #fff; box-shadow: 0 6px 16px -8px rgba(117, 49, 174, .45); }
.kwx-bar { position: absolute; left: 66px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(117, 49, 174, .14); opacity: 0; overflow: hidden; }
.kwx-bar::after { content: ""; position: absolute; inset: 0; background: var(--fp-accent); transform: scaleX(0); transform-origin: left; }
.kwx-item.is-on .kwx-bar { opacity: 1; }
.kwx-item.is-on:not(.is-run) .kwx-bar::after { transform: scaleX(1); }
.kwx-item.is-run .kwx-bar::after { animation: kwxBar 9.5s linear forwards; }
@keyframes kwxBar { to { transform: scaleX(1); } }

/* CTA unten in der Navigationskarte (wie .eax-price der Event-App) */
.kwx-cta { margin: auto 0 0; padding: 20px 18px 18px; border-radius: 18px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgba(167, 139, 250, .32) 0%, rgba(167, 139, 250, 0) 55%), linear-gradient(150deg, #2E1065 0%, #1A0F33 100%); box-shadow: 0 18px 36px -22px rgba(46, 16, 101, .8); }
.kwx-navlist + .kwx-cta { margin-top: 24px; }
@media (min-width: 1024px) { .kwx-navlist + .kwx-cta { margin-top: auto; } .kwx-navlist { margin-bottom: 24px; } }
.kwx-cta-h { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.kwx .kwx-cta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 18px; border-radius: 12px; background: #fff; color: #2E1065; font-weight: 600; font-size: 15px; text-decoration: none; }
.kwx .kwx-cta-btn:hover { background: #EDE7FB; }
.kwx .kwx-cta-fine { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* ---- Buehne ---- */
.kwx-stage { position: relative; isolation: isolate; display: grid; gap: 22px; min-height: 600px; padding: 64px 24px 28px; border-radius: 32px; overflow: hidden; color: #fff;
  background: radial-gradient(55% 60% at 30% 45%, rgba(167, 139, 250, .34) 0%, rgba(167, 139, 250, 0) 62%), linear-gradient(130deg, #2E1065 0%, #4C1D95 46%, #140A2A 100%); }
.kwx-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 80% at 35% 45%, #000 0%, transparent 85%); mask-image: radial-gradient(80% 80% at 35% 45%, #000 0%, transparent 85%); }
.kwx-live { position: absolute; right: 22px; top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-family: var(--font-micro); font-size: 11px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kwx-live i { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); }

[data-kwx-view]:not(.is-on) { display: none; }

/* Datenfluss: Frage -> AirLST -> Ergebnis, untereinander */
.kwx-flow { display: grid; justify-items: start; width: 100%; max-width: 460px; }
.kwx-ask { width: 100%; padding: 14px 16px 16px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .96); color: #1B1530; box-shadow: 0 18px 40px -18px rgba(8, 3, 25, .7); }
.kwx-ask-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #6B6880; }
.kwx-clients { display: inline-flex; }
.kwx-clients img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #EDE7F7; }
.kwx-clients img + img { margin-left: -6px; }
.kwx-q { margin: 0; min-height: 3.1em; font-size: 15px; line-height: 1.5; color: #1B1530; }
.kwx[data-kwx-phase="0"] .kwx-q.is-on::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--fp-accent); animation: kwxCaret .8s steps(1) infinite; }
@keyframes kwxCaret { 50% { opacity: 0; } }

.kwx-line { position: relative; width: 2px; height: 38px; margin-left: 34px; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .12)); }
.kwx-line i { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #C4B5FD; box-shadow: 0 0 0 4px rgba(196, 181, 253, .25), 0 0 14px rgba(196, 181, 253, .9); opacity: 0; }
.kwx[data-kwx-phase="1"] .kwx-line:nth-of-type(2) i,
.kwx[data-kwx-phase="3"] .kwx-line:nth-of-type(4) i { animation: kwxDot .8s ease-in forwards; }
@keyframes kwxDot { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }

.kwx-hubrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kwx-mods { display: flex; gap: 6px; }
.kwx-mods i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); opacity: .55; transition: opacity .35s, background .35s, box-shadow .35s, transform .35s; }
.kwx-mods i .illuicon { width: 22px; height: 22px; display: block; filter: grayscale(.4); }
.kwx-mods i.is-on { opacity: 1; background: #fff; box-shadow: 0 0 0 4px rgba(196, 181, 253, .28), 0 8px 18px -8px rgba(8, 3, 25, .6); transform: translateY(-2px); }
.kwx-mods i.is-on .illuicon { filter: none; }
.kwx[data-kwx-phase="0"] .kwx-mods i.is-on, .kwx[data-kwx-phase="1"] .kwx-mods i.is-on { background: rgba(255, 255, 255, .12); box-shadow: none; transform: none; opacity: .55; }
.kwx-hub { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .4s, box-shadow .4s; }
.kwx-mark { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; }
.kwx-mark::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #C4B5FD; opacity: 0; }
.kwx-hub-txt { display: grid; gap: 2px; }
.kwx-hub-txt b { font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em; }
.kwx-hub-txt em { font-style: normal; font-family: var(--font-micro); font-size: 11.5px; letter-spacing: .06em; color: #DDD3FB; }
.kwx[data-kwx-phase="2"] .kwx-hub, .kwx[data-kwx-phase="3"] .kwx-hub, .kwx[data-kwx-phase="4"] .kwx-hub { background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 6px rgba(196, 181, 253, .12); }
.kwx[data-kwx-phase="2"] .kwx-mark::after { animation: kwxRing 1s ease-out; }
@keyframes kwxRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

.kwx-res { width: 100%; padding: 14px 16px 14px; border-radius: 18px; background: #fff; color: #1B1530; box-shadow: 0 18px 40px -18px rgba(8, 3, 25, .7); transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1); }
.kwx[data-kwx-phase="0"] .kwx-res, .kwx[data-kwx-phase="1"] .kwx-res, .kwx[data-kwx-phase="2"] .kwx-res { opacity: .18; transform: translateY(8px) scale(.98); }
.kwx-res-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kwx-res-head b { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; }
.kwx-res-ic .illuicon { width: 30px; height: 30px; display: block; }
.kwx-res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kwx-res li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4A4560; }
.kwx-res li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #F1ECFA; color: var(--fp-accent); transition: background .3s, color .3s; }
.kwx[data-kwx-phase="4"] .kwx-res li svg { background: #DCF5E8; color: #0E7B4F; }
.kwx[data-kwx-phase="4"] .kwx-res li:nth-child(2) svg { transition-delay: .15s; }
.kwx[data-kwx-phase="4"] .kwx-res li:nth-child(3) svg { transition-delay: .3s; }
.kwx-st { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #E7E2F0; font-size: 12.5px; font-weight: 600; }
.kwx-st span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; }
.kwx-st-draft { background: #FFF4DB; color: #8A5A00; }
.kwx-st-done { background: #DCF5E8; color: #0E7B4F; }
.kwx[data-kwx-phase="4"] .kwx-st-draft, .kwx:not([data-kwx-phase="4"]) .kwx-st-done { display: none !important; }

/* Erklaerkarte */
.kwx-notes { position: relative; z-index: 2; }
.kwx-note { padding: 20px 22px 22px; border-radius: 22px; background: #fff; color: var(--fp-ink); box-shadow: 0 24px 50px -24px rgba(8, 3, 25, .8); }
.kwx-note h3 { margin: 12px 0 8px; font-size: 19px; line-height: 1.25; }
.kwx-note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fp-muted); }
.kwx-note .kwx-how { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--fp-line); font-size: 13.5px; }
.kwx-note .kwx-how b { color: var(--fp-ink); }
.kwx-note.is-on { animation: kwxIn .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes kwxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Ab 1200 px: Datenfluss links, Erklaerkarte rechts unten auf der Buehne */
@media (min-width: 1200px) {
  .kwx-stage { display: block; padding: 70px 40px 40px; min-height: 640px; }
  .kwx-notes { position: absolute; right: 28px; bottom: 28px; width: 300px; }
}

/* Handy: Navigation als wischbare Leiste */
@media (max-width: 1023px) {
  /* Navigation wird zur Leiste ueber der Buehne, der CTA rutscht unter die Buehne */
  .kwx-nav { display: contents; }
  .kwx-navlist { order: 1; display: flex; gap: 8px; padding: 10px; border: 1px solid var(--fp-line); border-radius: 20px; background: #fff; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kwx-navlist::-webkit-scrollbar { display: none; }
  .kwx-stage { order: 2; }
  .kwx-cta { order: 3; margin: 0; }
  .kwx-grp { display: none !important; }
  .kwx-nav ul { display: flex; gap: 8px; }
  .kwx-item { width: max-content; max-width: 240px; white-space: nowrap; font-size: 14px; padding: 6px 12px 6px 6px; scroll-snap-align: start; }
  .kwx-item .kwx-nm { overflow: hidden; text-overflow: ellipsis; }
  .kwx-ic { width: 38px; height: 38px; }
  .kwx-ic .illuicon { width: 28px; height: 28px; }
  .kwx-bar { left: 50px; }
  .kwx-stage { min-height: 0; padding: 58px 16px 18px; border-radius: 24px; }
  .kwx-flow { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kwx *, .kwx *::before, .kwx *::after { animation: none !important; transition: none !important; }
}

[data-theme="dark"] .kwx-nav, [data-theme="dark"] .kwx-navlist { background: #1B1D24; border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .kwx-item.is-on .kwx-ic { background: #2A2D36; }
[data-theme="dark"] .kwx-note { background: #1B1D24; }