Spaces:
Running
Running
Download index.html from aidn/agent-steering: direct link, hf CLI and curl.
- Browser
- Download file 184 kB
-
https://huggingface.co/spaces/aidn/agent-steering/resolve/main/index.html
- Command line
-
hf download hf://spaces/aidn/agent-steering/index.html
-
curl -L -o index.html https://huggingface.co/spaces/aidn/agent-steering/resolve/main/index.html
184 kB
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agentic AI & Multi-Agent Systems – Kontrollraum | valantic</title> | |
| <style> | |
| :root{ | |
| --va-red:#ee3524; | |
| --va-orange:#ff7a3d; | |
| --va-ink:#16181d; | |
| --va-grey:#5c6167; | |
| --va-bg:#ffffff; | |
| --va-soft:#f6f5f3; | |
| --va-line:#e6e4e0; | |
| --bg-blue:#1450b4; | |
| --ml-cyan:#43c9ed; | |
| --ml-blue:#0194e2; | |
| --ok:#5dd39e; | |
| --warn:#ffb84d; | |
| --radius:18px; | |
| --grad:linear-gradient(120deg,var(--va-red) 0%,var(--va-orange) 100%); | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| html{scroll-behavior:smooth} | |
| body{ | |
| font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; | |
| color:var(--va-ink); | |
| background:var(--va-bg); | |
| line-height:1.55; | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| ::selection{background:var(--va-red);color:#fff} | |
| /* ---------- Header ---------- */ | |
| header{ | |
| position:sticky;top:0;z-index:50; | |
| background:rgba(255,255,255,.92); | |
| backdrop-filter:blur(10px); | |
| border-bottom:1px solid var(--va-line); | |
| } | |
| .nav{ | |
| max-width:1240px;margin:0 auto;padding:0 24px; | |
| display:flex;align-items:center;justify-content:space-between;height:68px; | |
| } | |
| .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;color:var(--va-ink)} | |
| .logo .dot{width:14px;height:14px;border-radius:50%;background:var(--grad);display:inline-block} | |
| .nav-links{display:flex;gap:28px;align-items:center} | |
| .nav-links a{color:var(--va-ink);text-decoration:none;font-weight:600;font-size:.92rem;position:relative} | |
| .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--va-red);transition:width .25s} | |
| .nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%} | |
| .btn{ | |
| display:inline-block;background:var(--va-red);color:#fff;border:none;cursor:pointer; | |
| padding:12px 26px;border-radius:999px;font-weight:700;font-size:.95rem;font-family:inherit; | |
| text-decoration:none;transition:transform .15s,background .2s,box-shadow .2s; | |
| } | |
| .btn:hover{background:#d42a1a;transform:translateY(-1px);box-shadow:0 8px 20px rgba(238,53,36,.28)} | |
| .btn.ghost{background:transparent;color:var(--va-ink);border:2px solid var(--va-ink)} | |
| .btn.ghost:hover{background:var(--va-ink);color:#fff;box-shadow:none} | |
| .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} | |
| a:focus-visible,button:focus-visible{outline:3px solid var(--va-orange);outline-offset:3px;border-radius:6px} | |
| /* ---------- Hero ---------- */ | |
| .hero{position:relative;overflow:hidden;padding:96px 24px 290px} | |
| .hero-inner{max-width:1240px;margin:0 auto;position:relative;z-index:2} | |
| .eyebrow{ | |
| display:inline-flex;align-items:center;gap:8px; | |
| font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--va-red);margin-bottom:18px; | |
| } | |
| .eyebrow::before{content:"";width:26px;height:2px;background:var(--va-red)} | |
| h1{ | |
| font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;line-height:1.03;letter-spacing:-.03em;max-width:30ch; | |
| } | |
| h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} | |
| .hero p{max-width:60ch;margin:26px 0 34px;font-size:1.12rem;color:var(--va-grey)} | |
| .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} | |
| .guilloche{position:absolute;top:-9%;right:-6%;height:106%;width:auto;pointer-events:none;z-index:1} | |
| .guilloche svg{height:100%;width:auto;display:block} | |
| @media(max-width:980px){.guilloche{opacity:.3}} | |
| @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}} | |
| @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} | |
| /* ---------- Sections ---------- */ | |
| section{padding:88px 24px} | |
| .wrap{max-width:1240px;margin:0 auto} | |
| h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px} | |
| .lead{color:var(--va-grey);font-size:1.08rem;max-width:64ch} | |
| .soft{background:var(--va-soft)} | |
| /* ---------- Szenario / Agent-Karten ---------- */ | |
| .scenario-strip{ | |
| display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:36px 0 8px; | |
| background:#fff;border:1px solid var(--va-line);border-radius:var(--radius);padding:20px 26px; | |
| } | |
| .scenario-strip .ship{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-weight:600;font-size:.92rem;background:var(--va-ink);color:#fff;padding:8px 16px;border-radius:999px} | |
| .scenario-strip .fact{font-size:.92rem;color:var(--va-grey);display:flex;align-items:center;gap:8px} | |
| .scenario-strip .fact b{color:var(--va-ink)} | |
| .scenario-strip .sep{width:5px;height:5px;border-radius:50%;background:var(--va-line)} | |
| .agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:26px} | |
| .agent{ | |
| background:#fff;border:1px solid var(--va-line);border-radius:var(--radius);padding:24px;position:relative; | |
| transition:border-color .25s, box-shadow .25s; | |
| } | |
| .agent .avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:14px;color:#fff} | |
| .agent h3{font-size:1.05rem;font-weight:800;margin-bottom:4px} | |
| .agent .role{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--va-grey);margin-bottom:10px} | |
| .agent p{font-size:.9rem;color:var(--va-grey)} | |
| .agent .tools{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap} | |
| .agent .tools code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.7rem;background:var(--va-soft);border:1px solid var(--va-line);border-radius:6px;padding:3px 8px} | |
| .agent.a-orch .avatar{background:var(--grad)} | |
| .agent.a-anwalt .avatar{background:var(--va-ink)} | |
| .agent.a-scout .avatar{background:var(--ml-blue)} | |
| .agent.a-macher .avatar{background:var(--va-orange)} | |
| .agent.live{border-color:var(--va-orange);box-shadow:0 0 0 3px rgba(255,122,61,.18)} | |
| /* ---------- Kontrollraum ---------- */ | |
| .control-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px} | |
| .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px} | |
| .act-chip{ | |
| font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; | |
| padding:8px 16px;border-radius:999px;border:1.5px solid var(--va-line);color:var(--va-grey); | |
| background:#fff;transition:all .3s;display:flex;align-items:center;gap:7px; | |
| } | |
| .act-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--va-line);transition:background .3s} | |
| .act-chip.active{border-color:var(--va-red);color:var(--va-ink);background:#fff5f2} | |
| .act-chip.active::before{background:var(--va-red);animation:blink 1s ease-in-out infinite} | |
| .act-chip.done{border-color:var(--ok);color:var(--va-ink)} | |
| .act-chip.done::before{background:var(--ok);animation:none} | |
| .act-chip.gate.active{border-color:var(--warn);background:#fff9ee} | |
| .act-chip.gate.active::before{background:var(--warn)} | |
| @keyframes blink{50%{opacity:.35}} | |
| .control-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:start} | |
| @media(max-width:980px){.control-grid{grid-template-columns:1fr}} | |
| .panel{ | |
| background:#fff;border:1px solid var(--va-line);border-radius:var(--radius);overflow:hidden; | |
| transition:box-shadow .3s,border-color .3s; | |
| } | |
| .panel.spot{border-color:var(--va-orange);box-shadow:0 10px 34px rgba(255,122,61,.16)} | |
| .panel-head{ | |
| display:flex;align-items:center;justify-content:space-between;gap:12px; | |
| padding:16px 22px;border-bottom:1px solid var(--va-line);background:#fbfaf9; | |
| } | |
| .panel-head .p-title{display:flex;align-items:center;gap:12px;font-weight:800;font-size:.98rem} | |
| .panel-head .p-sub{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--va-grey)} | |
| .logo-badge{display:flex;align-items:center;height:24px} | |
| .logo-badge svg{height:22px;width:auto;display:block} | |
| .logo-badge img{height:20px;width:auto;display:block} | |
| .wordmark-fallback{ | |
| font-weight:800;font-size:.92rem;letter-spacing:-.01em;color:var(--bg-blue); | |
| display:flex;align-items:center;gap:5px; | |
| } | |
| .wordmark-fallback::before{content:"//";font-weight:800;color:var(--bg-blue);opacity:.55} | |
| .tool-card .wordmark-fallback{color:#fff;font-size:1.5rem;letter-spacing:-.02em} | |
| .tool-card .wordmark-fallback::before{color:#fff;opacity:.6} | |
| .absprung-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1.5px dashed var(--va-line);border-radius:16px;padding:18px 20px;max-width:640px;margin-top:26px} | |
| .absprung-icon{font-size:1.5rem;line-height:1;color:var(--va-red)} | |
| .absprung-card p{margin-top:4px;font-size:.92rem;color:var(--va-grey)} | |
| .prompt-experiment{margin-top:26px} | |
| /* Supply Chain Monitor Board */ | |
| .board{background:var(--va-ink);color:#e8ebf0;border-radius:18px;overflow:hidden;margin:28px 0 8px;box-shadow:0 25px 60px rgba(22,24,29,.18)} | |
| .board-head{display:flex;align-items:center;gap:7px;padding:13px 20px;border-bottom:1px solid #2a2e38;font-size:.76rem;color:#9aa1ad} | |
| .b-dot{width:10px;height:10px;border-radius:50%;background:#3a3f4b} | |
| .b-dot:first-child{background:#ee3524} | |
| .b-dot:nth-child(2){background:#ffb84d} | |
| .b-dot:nth-child(3){background:#5dd39e} | |
| .b-title{margin-left:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} | |
| .b-time{margin-left:auto;font-family:Consolas,monospace} | |
| .board-row{display:grid;grid-template-columns:70px 1fr max-content;gap:6px 16px;padding:13px 20px;border-bottom:1px solid #22262f;align-items:center} | |
| .board-row .sid{font-family:Consolas,monospace;font-size:.82rem;color:#8a919e} | |
| .sdesc{display:flex;flex-direction:column;gap:2px;font-size:.88rem} | |
| .sdesc b{color:#fff;font-weight:700} | |
| .sdesc>span{color:#9aa1ad;font-size:.78rem} | |
| .s-chip{font-size:.68rem;font-weight:700;border-radius:999px;padding:4px 11px;letter-spacing:.04em;white-space:nowrap} | |
| .s-chip.ok{background:rgba(93,211,158,.12);color:#5dd39e;border:1px solid rgba(93,211,158,.3)} | |
| .s-chip.warn{background:rgba(255,184,77,.14);color:#ffb84d;border:1px solid rgba(255,184,77,.45)} | |
| .board-row.hot{background:rgba(255,184,77,.06);border-left:3px solid #ffb84d;padding-left:17px} | |
| .hot-facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px} | |
| .hot-facts .hf{font-size:.74rem;color:#c8cdd6} | |
| .hot-facts .hf b{color:#ffb84d} | |
| .board-prompt{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#101218;font-family:Consolas,monospace;font-size:.85rem;color:#e8ebf0} | |
| .bp-caret{color:#5dd39e;font-weight:800} | |
| .bp-cursor{width:8px;height:16px;background:#5dd39e;animation:blink 1.1s steps(2) infinite} | |
| @keyframes blink{50%{opacity:0}} | |
| /* Backend-Systemkarte: Runtime, Extension, Observe & Control */ | |
| .be-system{ | |
| margin:36px 0 8px;background:#fff;border:1px solid var(--va-line);border-radius:22px;overflow:hidden; | |
| box-shadow:0 18px 50px rgba(22,24,29,.08); | |
| } | |
| .be-system-head{ | |
| display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:24px 28px 20px; | |
| border-bottom:1px solid var(--va-line);background:linear-gradient(135deg,#fff 0%,#faf9f7 100%); | |
| } | |
| .be-system-kicker{display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--va-red);margin-bottom:5px} | |
| .be-system-head h3{font-size:1.2rem;line-height:1.25;margin:0;max-width:760px} | |
| .be-run-badge{flex:0 0 auto;font:600 .74rem/1.2 'SFMono-Regular',Consolas,monospace;color:#cfd4de;background:var(--va-ink);border-radius:999px;padding:8px 12px} | |
| .be-lane{display:grid;grid-template-columns:175px minmax(0,1fr);border-bottom:1px solid var(--va-line)} | |
| .be-lane:last-child{border-bottom:0} | |
| .be-lane-label{padding:22px 20px 22px 28px;background:#fbfaf9;border-right:1px solid var(--va-line)} | |
| .be-lane-label .lane-num{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 7px;border-radius:999px;background:var(--grad);color:#fff;font-size:.68rem;font-weight:900;margin-bottom:9px} | |
| .be-lane-label strong{display:block;font-size:.9rem} | |
| .be-lane-label small{display:block;color:var(--va-grey);font-size:.7rem;margin-top:3px;line-height:1.35} | |
| .be-runtime{position:relative;background:var(--va-ink);padding:24px 26px;overflow:hidden} | |
| .be-runtime::before{content:"";position:absolute;left:7%;right:7%;top:50%;height:2px;background:linear-gradient(90deg,rgba(255,122,61,.2),var(--va-orange),rgba(255,122,61,.2));transform:translateY(-50%)} | |
| .be-runtime::after{content:"";position:absolute;top:calc(50% - 5px);left:8%;width:10px;height:10px;border-radius:50%;background:var(--va-orange);box-shadow:0 0 16px rgba(255,122,61,.9);animation:bePulse 5s linear infinite} | |
| @keyframes bePulse{0%{left:8%}100%{left:90%}} | |
| .be-runtime-flow{position:relative;z-index:1;display:grid;grid-template-columns:minmax(120px,.75fr) 22px minmax(170px,1fr) 22px minmax(230px,1.35fr) 22px minmax(190px,1fr);gap:8px;align-items:center} | |
| .be-arrow{color:#ff8d61;text-align:center;font-size:1.2rem;font-weight:900} | |
| .be-node{background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 15px;min-width:0;box-shadow:0 8px 26px rgba(0,0,0,.18)} | |
| .be-node .node-tag{display:block;font-size:.61rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--va-grey);margin-bottom:4px} | |
| .be-node strong{display:block;font-size:.9rem;line-height:1.25} | |
| .be-node small{display:block;font-size:.7rem;color:var(--va-grey);margin-top:4px;line-height:1.35} | |
| .be-node code{display:inline-block;margin-top:7px;font:600 .68rem/1.2 'SFMono-Regular',Consolas,monospace;color:#1450b4;background:#eaf4ff;border-radius:6px;padding:4px 7px} | |
| .be-node.critical{border-color:#ff9e8d;background:#fff8f6} | |
| .be-node.critical strong{font-family:'SFMono-Regular',Consolas,monospace;font-size:.78rem;color:var(--va-red);overflow-wrap:anywhere} | |
| .be-agent-cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:#20242d;border:1px solid #353a45;border-radius:14px;padding:10px} | |
| .be-agent-mini{background:#fff;border-radius:10px;padding:10px 8px;text-align:center;min-width:0} | |
| .be-agent-mini b{display:block;font-size:.8rem} | |
| .be-agent-mini span{display:block;margin-top:3px;color:var(--va-grey);font:500 .62rem/1.25 'SFMono-Regular',Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} | |
| .be-agent-mini.hot{outline:2px solid var(--va-orange);outline-offset:-2px;background:#fff6f2} | |
| .be-extension{padding:20px 26px;background:linear-gradient(90deg,#fff8f4 0%,#fff 70%)} | |
| .be-extension-grid{display:grid;grid-template-columns:minmax(215px,1.2fr) repeat(3,minmax(145px,1fr));gap:10px;align-items:stretch} | |
| .be-ext-intro{padding:10px 12px} | |
| .be-ext-intro strong{display:block;font-size:.9rem;line-height:1.3} | |
| .be-ext-intro p{font-size:.74rem;color:var(--va-grey);margin-top:5px;line-height:1.45} | |
| .be-hook{background:#fff;border:1px solid var(--va-line);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;justify-content:center;gap:4px} | |
| .be-hook code{font:700 .67rem/1.2 'SFMono-Regular',Consolas,monospace;color:var(--va-red)} | |
| .be-hook span{font-size:.76rem;font-weight:700;line-height:1.3} | |
| .be-hook.hot{border-color:#f4b6aa;background:#fff5f2} | |
| .be-destinations{padding:22px 26px;background:#fff} | |
| .be-dest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} | |
| .be-dest{position:relative;border:1px solid var(--va-line);border-radius:15px;padding:17px 17px 15px;min-height:150px;background:#fbfaf9;overflow:hidden} | |
| .be-dest::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)} | |
| .be-dest.mlflow::after{background:linear-gradient(90deg,#0194e2,#43c9ed)} | |
| .be-dest.bg::after{background:linear-gradient(90deg,#1450b4,#4f83dd)} | |
| .be-dest.gate::after{background:var(--grad)} | |
| .be-dest.decision::after{background:linear-gradient(90deg,#8a56d6,#c58cff)} | |
| .be-dest-num{position:absolute;top:12px;right:13px;font-size:.64rem;font-weight:900;color:var(--va-grey);background:#fff;border:1px solid var(--va-line);border-radius:999px;padding:3px 7px} | |
| .be-dest .dest-tag{display:block;font-size:.63rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--va-grey);margin-bottom:5px} | |
| .be-dest h4{font-size:1rem;margin:0 0 7px} | |
| .be-dest p{font-size:.77rem;color:var(--va-grey);line-height:1.5;margin:0 0 10px;max-width:40ch} | |
| .be-dest code{font:600 .67rem/1.3 'SFMono-Regular',Consolas,monospace;color:var(--va-ink);background:#fff;border:1px solid var(--va-line);border-radius:7px;padding:5px 7px;overflow-wrap:anywhere} | |
| .be-decision-chips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 10px} | |
| .be-decision-chips span{font-size:.67rem;font-weight:800;border-radius:999px;padding:5px 9px} | |
| .be-decision-chips .approve{color:#277a56;background:#effaf4;border:1px solid #bfe9d4} | |
| .be-decision-chips .reject{color:#a52a1e;background:#fff5f2;border:1px solid #ffd3ca} | |
| .be-return{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:13px;font-size:.72rem;color:var(--va-grey);font-weight:650} | |
| .be-return::before{content:"↶";font-size:1.05rem;color:var(--va-red)} | |
| .be-code-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px} | |
| @media(max-width:820px){.be-code-grid{grid-template-columns:1fr}} | |
| .be-code{background:var(--va-ink);border-radius:14px;overflow:hidden} | |
| .be-code .hd{padding:11px 16px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9aa1ad;border-bottom:1px solid #2a2e38} | |
| .be-code pre{padding:16px;font:400 .8rem/1.6 'SFMono-Regular',Consolas,monospace;color:#e8ebf0;overflow-x:auto;margin:0} | |
| .be-code .cap{padding:11px 16px;font-size:.78rem;color:#9aa1ad;border-top:1px solid #2a2e38} | |
| .be-code .c-dim{color:#8a919e} | |
| .be-code .c-model{color:#7ee0ff} | |
| .be-code .c-gate{color:#ff9b72} | |
| .be-code .c-ok{color:#5dd39e} | |
| @media(max-width:1080px){ | |
| .be-lane{grid-template-columns:145px minmax(0,1fr)} | |
| .be-runtime-flow{grid-template-columns:1fr 18px 1fr 18px 1.25fr;} | |
| .be-runtime-flow>.be-arrow:nth-of-type(3),.be-runtime-flow>.be-node.critical{display:none} | |
| .be-extension-grid{grid-template-columns:1fr 1fr 1fr}.be-ext-intro{grid-column:1/-1;padding:0 2px 7px} | |
| } | |
| @media(max-width:760px){ | |
| .be-system-head{padding:20px}.be-run-badge{display:none} | |
| .be-lane{grid-template-columns:1fr}.be-lane-label{padding:14px 18px;border-right:0;border-bottom:1px solid var(--va-line);display:flex;align-items:center;gap:10px}.be-lane-label .lane-num{margin:0}.be-lane-label small{margin:0 0 0 auto;text-align:right} | |
| .be-runtime{padding:18px}.be-runtime::before,.be-runtime::after{display:none} | |
| .be-runtime-flow{grid-template-columns:1fr;gap:8px}.be-arrow{transform:rotate(90deg)} | |
| .be-runtime-flow>.be-arrow:nth-of-type(3),.be-runtime-flow>.be-node.critical{display:block} | |
| .be-agent-cluster{grid-template-columns:1fr 1fr 1fr} | |
| .be-extension{padding:18px}.be-extension-grid{grid-template-columns:1fr}.be-ext-intro{grid-column:auto} | |
| .be-destinations{padding:18px}.be-dest-grid{grid-template-columns:1fr} | |
| } | |
| /* MLflow-Trace */ | |
| .trace{padding:14px 10px 18px;min-height:340px} | |
| .trace-empty{color:var(--va-grey);font-style:italic;font-size:.9rem;padding:22px} | |
| .span-row{ | |
| display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px; | |
| font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.8rem; | |
| animation:rowIn .35s ease both; | |
| } | |
| @keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} | |
| .span-row:hover{background:var(--va-soft)} | |
| .span-row .tree{color:#c6c1bb;flex-shrink:0} | |
| .span-row .s-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} | |
| .span-row .s-kind{ | |
| font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px;flex-shrink:0; | |
| background:var(--va-soft);border:1px solid var(--va-line);color:var(--va-grey);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; | |
| } | |
| .span-row .s-kind.k-agent{background:#fff5f2;border-color:#ffd3ca;color:var(--va-red)} | |
| .span-row .s-kind.k-llm{background:#eef7fd;border-color:#c8e7f8;color:var(--ml-blue)} | |
| .span-row .s-kind.k-tool{background:#fff8ec;border-color:#ffe3b0;color:#b7791f} | |
| .span-row .s-kind.k-hitl{background:#f3eefc;border-color:#ddccf5;color:#8a56d6} | |
| .span-row .s-meta{margin-left:auto;color:var(--va-grey);flex-shrink:0;font-size:.72rem} | |
| .span-row .s-state{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--va-line)} | |
| .span-row.running .s-state{background:var(--va-orange);animation:blink 1s infinite} | |
| .span-row.ok .s-state{background:var(--ok)} | |
| .span-row.flagged{background:#fff5f2} | |
| .span-row.flagged .s-state{background:var(--va-red)} | |
| .span-row.assessment{background:#f3eefc;border:1px dashed #ddccf5} | |
| .span-row.assessment .s-state{background:#8a56d6} | |
| .metrics{display:flex;gap:10px;flex-wrap:wrap;padding:0 22px 20px} | |
| .metric{ | |
| background:var(--va-soft);border:1px solid var(--va-line);border-radius:12px;padding:10px 16px;min-width:104px; | |
| } | |
| .metric .m-label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--va-grey)} | |
| .metric .m-val{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-weight:600;font-size:1.05rem;margin-top:2px} | |
| .metric .m-val.hot{color:var(--va-red)} | |
| /* Blue-Guardrails-Panel */ | |
| .bg-body{padding:22px;min-height:150px} | |
| .bg-waiting{color:var(--va-grey);font-style:italic;font-size:.9rem} | |
| .bg-answer{font-size:1.02rem;line-height:1.7} | |
| .bg-answer .speaker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--va-grey);margin-bottom:10px} | |
| .claim{ | |
| padding:0 2px;border-radius:4px 4px 0 0;transition:background .4s,border-color .4s; | |
| border-bottom:3px solid transparent; | |
| } | |
| .claim.flag{background:rgba(238,53,36,.10);border-bottom-color:var(--va-red)} | |
| .claim.flag::after{content:"⚑";font-size:.75em;color:var(--va-red);margin-left:4px} | |
| .bg-verdict{ | |
| display:none;margin-top:18px;border-left:4px solid var(--va-red);background:#fff5f2; | |
| padding:16px 20px;border-radius:0 12px 12px 0;font-size:.92rem; | |
| animation:rowIn .4s ease both; | |
| } | |
| .bg-verdict.show{display:block} | |
| .bg-verdict .v-label{ | |
| display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; | |
| background:var(--va-red);color:#fff;padding:4px 12px;border-radius:999px;margin-bottom:10px; | |
| } | |
| .bg-verdict .src{display:block;margin-top:10px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.74rem;color:var(--va-grey)} | |
| /* HITL-Panel */ | |
| .hitl-body{padding:22px} | |
| .hitl-waiting{color:var(--va-grey);font-style:italic;font-size:.9rem} | |
| .approval{display:none;animation:rowIn .4s ease both} | |
| .approval.show{display:block} | |
| .approval .req{ | |
| background:var(--va-ink);color:#fff;border-radius:14px;padding:20px 22px; | |
| } | |
| .approval .req .r-tool{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.86rem;color:var(--va-orange);font-weight:600} | |
| .approval .req .r-amount{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;margin:8px 0 4px} | |
| .approval .req .r-line{font-size:.88rem;color:#c9ccd2} | |
| .approval .req .r-flag{ | |
| display:inline-flex;align-items:center;gap:7px;margin-top:14px; | |
| background:rgba(238,53,36,.18);border:1px solid rgba(238,53,36,.5);color:#ffb3aa; | |
| font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px; | |
| } | |
| .approval .decide{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap} | |
| .btn.approve{background:var(--ok);color:var(--va-ink)} | |
| .btn.approve:hover{background:#46bb87;box-shadow:0 8px 20px rgba(93,211,158,.3)} | |
| .btn.reject{background:var(--va-red)} | |
| .decision-note{display:none;margin-top:16px;font-size:.9rem;border-radius:12px;padding:14px 18px} | |
| .decision-note.show{display:block;animation:rowIn .4s ease both} | |
| .decision-note.rejected{background:#fff5f2;border:1px solid #ffd3ca} | |
| .decision-note.approved{background:#effaf4;border:1px solid #bfe9d4} | |
| /* Konsole */ | |
| .console{ | |
| margin-top:4px;margin-bottom:22px;background:var(--va-bg);color:var(--va-ink);border-radius:var(--radius);padding:18px 20px; | |
| font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.82rem;line-height:1.75; | |
| height:210px;overflow-y:auto;border:1px solid var(--va-line); | |
| } | |
| .console .t{color:var(--va-grey)} | |
| .console .a{color:var(--va-orange);font-weight:500} | |
| .console .ok{color:var(--ok)} | |
| .console .p{color:#7c3aed;font-weight:500} | |
| .console .warn{color:#e08a00;font-weight:500} | |
| .console .err{color:var(--va-red);font-weight:600} | |
| .console .bgc{color:var(--bg-blue);font-weight:500} | |
| .console-empty{color:var(--va-grey);font-style:italic} | |
| /* ---------- Szenario-Picker & Steuerung ---------- */ | |
| .scen-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:28px 0 18px} | |
| .scen{ | |
| background:#fff;border:1.5px solid var(--va-line);border-radius:var(--radius);padding:20px 22px; | |
| cursor:pointer;font-family:inherit;text-align:left;transition:border-color .2s, box-shadow .2s, transform .15s; | |
| } | |
| .scen:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,24,29,.08);border-color:var(--va-orange)} | |
| .scen.active{border-color:var(--va-red);box-shadow:0 0 0 3px rgba(238,53,36,.14)} | |
| .scen .s-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; | |
| padding:4px 10px;border-radius:999px;background:var(--va-soft);border:1px solid var(--va-line);color:var(--va-grey);margin-bottom:10px} | |
| .scen.active .s-tag{background:#fff5f2;border-color:#ffd3ca;color:var(--va-red)} | |
| .scen h3{font-size:1.06rem;font-weight:800;margin-bottom:4px} | |
| .scen p{font-size:.86rem;color:var(--va-grey)} | |
| .runbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px} | |
| .btn.small{padding:10px 20px;font-size:.88rem} | |
| .kbd-hint{margin-left:auto;font-size:.76rem;color:var(--va-grey)} | |
| .kbd-hint kbd{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.72rem;background:var(--va-soft); | |
| border:1px solid var(--va-line);border-bottom-width:2px;border-radius:6px;padding:2px 7px} | |
| .director{ | |
| display:flex;gap:14px;align-items:baseline;background:var(--va-soft);color:var(--va-ink); | |
| border:1px solid var(--va-line);border-radius:14px;padding:14px 20px;margin-bottom:22px; | |
| } | |
| .director .d-step{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.74rem;font-weight:600; | |
| color:var(--va-red);white-space:nowrap;letter-spacing:.04em} | |
| .director .d-note{font-size:.96rem;font-weight:600;color:var(--va-ink)} | |
| /* ---------- Span-Inspector ---------- */ | |
| .span-row.clickable{cursor:pointer} | |
| .span-row.sel{outline:2px solid var(--va-orange);outline-offset:-2px;background:#fff8f4} | |
| .inspector{display:none;border-top:1px solid var(--va-line);background:#fbfaf9;padding:16px 22px 20px} | |
| .inspector.show{display:block;animation:rowIn .3s ease both} | |
| .insp-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} | |
| .insp-head .i-title{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.82rem;font-weight:600} | |
| .insp-head .i-kind{font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px; | |
| background:var(--va-soft);border:1px solid var(--va-line);color:var(--va-grey)} | |
| .insp-head .i-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:1rem;color:var(--va-grey); | |
| width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center} | |
| .insp-head .i-close:hover{background:var(--va-line);color:var(--va-ink)} | |
| .insp-sec{margin-bottom:10px} | |
| .insp-h{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--va-grey);margin-bottom:5px} | |
| .insp-v{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.76rem;line-height:1.6;color:var(--va-ink); | |
| background:#fff;border:1px solid var(--va-line);border-radius:10px;padding:12px 14px;white-space:pre-wrap;margin:0} | |
| /* ---------- Verified-Varianten ---------- */ | |
| .bg-verdict.good{border-left-color:var(--ok);background:#effaf4} | |
| .bg-verdict.good .v-label{background:var(--ok);color:var(--va-ink)} | |
| .approval .req .r-flag.good{background:rgba(93,211,158,.16);border-color:rgba(93,211,158,.55);color:#a5e8c8} | |
| /* ---------- MAS-Sterngraph ---------- */ | |
| .masgraph{background:#fff;border:1px solid var(--va-line);border-radius:var(--radius);padding:16px 20px 8px;margin-bottom:22px} | |
| .masgraph .mg-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--va-grey)} | |
| .masgraph svg{width:100%;height:auto;display:block;max-height:240px;margin:0 auto} | |
| .gedge{stroke:#d8d3cd;stroke-width:2;transition:stroke .3s,stroke-width .3s} | |
| .gedge.hot{stroke:var(--va-red);stroke-width:3.5} | |
| .gdotg{opacity:0;transition:opacity .25s} | |
| .gdotg.on{opacity:1} | |
| .gdot{fill:var(--va-red)} | |
| .gnode .ring{fill:none;stroke:var(--va-orange);stroke-width:3;stroke-dasharray:10 12;opacity:0;transform-box:fill-box;transform-origin:center} | |
| .gnode.working .ring{opacity:1;animation:gspin 1.6s linear infinite} | |
| @keyframes gspin{to{transform:rotate(360deg)}} | |
| .gnode.working .body{filter:drop-shadow(0 0 10px rgba(255,122,61,.55))} | |
| .gicon{fill:#fff;font-size:21px;font-weight:700} | |
| .glabel{fill:var(--va-ink);font-size:13px;font-weight:700} | |
| .gbadge{opacity:0;transition:opacity .3s} | |
| .gnode.done .b-done{opacity:1} | |
| .gnode.flagged .b-flag{opacity:1} | |
| .gnode.flagged .body{stroke:var(--va-red);stroke-width:3} | |
| /* ---------- Takeaway ---------- */ | |
| .takeaway{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px} | |
| .take{ | |
| background:#fff;border:1px solid var(--va-line);border-radius:var(--radius);padding:28px; | |
| } | |
| .take .t-act{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--va-red);margin-bottom:10px} | |
| .take h3{font-size:1.15rem;font-weight:800;margin-bottom:8px} | |
| .take p{color:var(--va-grey);font-size:.94rem} | |
| .take .who{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--va-grey)} | |
| .punchline{ | |
| margin-top:26px;text-align:center;font-size:1.15rem;font-weight:700; | |
| background:#fff;border:1px dashed var(--va-line);border-radius:var(--radius);padding:22px 26px; | |
| } | |
| .punchline .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} | |
| /* ---------- Tool-Karten ---------- */ | |
| .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} | |
| .tool-card{border-radius:var(--radius);padding:32px;color:#fff;position:relative;overflow:hidden} | |
| .tool-card.ml{background:var(--va-ink)} | |
| .tool-card.bgc{background:var(--bg-blue)} | |
| .tool-card .tool-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:14px} | |
| .tool-card .tool-logo{height:30px;margin-bottom:14px;display:flex;align-items:center} | |
| .tool-card .tool-logo svg{height:28px;width:auto} | |
| .tool-card .tool-logo img{height:24px;width:auto;filter:brightness(0) invert(1)} | |
| .tool-card .tool-sub{font-size:.95rem;opacity:.85;margin-bottom:18px} | |
| .tool-card ul{list-style:none;margin:0;padding:0} | |
| .tool-card li{padding:10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:.92rem;display:flex;gap:10px} | |
| .tool-card li::before{content:"";width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px} | |
| .tool-card.ml li::before{background:var(--va-orange)} | |
| .tool-card.bgc li::before{background:#8fc1ff} | |
| .tool-card .tool-ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.12);width:220px;height:220px;right:-70px;top:-70px} | |
| .tool-card .act-ref{ | |
| display:inline-block;margin-top:16px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; | |
| border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 14px; | |
| } | |
| @media(max-width:860px){.tool-grid{grid-template-columns:1fr}} | |
| /* ---------- CTA + Footer ---------- */ | |
| .cta{background:var(--grad);color:#fff;border-radius:26px;padding:64px 48px;position:relative;overflow:hidden} | |
| .cta h2{color:#fff;max-width:22ch} | |
| .cta p{color:rgba(255,255,255,.9);max-width:56ch;margin:14px 0 30px} | |
| .cta .btn{background:#fff;color:var(--va-red)} | |
| .cta .btn:hover{background:var(--va-ink);color:#fff} | |
| .cta .ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.35)} | |
| .r1{width:300px;height:300px;right:-70px;bottom:-120px} | |
| .r2{width:180px;height:180px;right:140px;top:-70px} | |
| footer{padding:44px 24px;border-top:1px solid var(--va-line)} | |
| footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--va-grey);font-size:.88rem} | |
| @media(max-width:860px){ | |
| .nav-links{display:none} | |
| .cta{padding:44px 28px} | |
| } | |
| /* ---------- Workshop V2 additions ---------- */ | |
| .mode-switch{display:flex;align-items:center;gap:4px;background:var(--va-soft);border:1px solid var(--va-line);padding:4px;border-radius:999px} | |
| .mode-btn{border:0;background:transparent;color:var(--va-grey);font:700 .78rem/1 Inter,ui-sans-serif,system-ui,sans-serif;padding:9px 13px;border-radius:999px;cursor:pointer;white-space:nowrap} | |
| .mode-btn.active{background:#fff;color:var(--va-ink);box-shadow:0 2px 10px rgba(22,24,29,.10)} | |
| .nav-actions{display:flex;align-items:center;gap:10px} | |
| .icon-btn{border:1px solid var(--va-line);background:#fff;color:var(--va-ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1rem;display:grid;place-items:center} | |
| .icon-btn:hover{border-color:var(--va-orange);background:#fff8f4} | |
| .hero-proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} | |
| .proof-chip{font-size:.76rem;font-weight:700;color:var(--va-grey);background:#fff;border:1px solid var(--va-line);padding:8px 12px;border-radius:999px;box-shadow:0 5px 18px rgba(22,24,29,.05)} | |
| .proof-chip strong{color:var(--va-ink)} | |
| .scenario-kicker{display:inline-flex;gap:8px;align-items:center;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--va-grey);margin-bottom:6px} | |
| .scenario-kicker::before{content:'?';width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--va-ink);color:#fff;font-size:.72rem} | |
| .scen .spoiler-note{display:block;margin-top:12px;font-size:.72rem;font-weight:700;color:var(--va-grey)} | |
| .scen.completed::after{content:'✓ absolviert';display:inline-flex;margin-top:12px;color:#277a56;background:#effaf4;border:1px solid #bfe9d4;border-radius:999px;padding:3px 9px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em} | |
| .progress-shell{height:6px;background:var(--va-soft);border-radius:999px;overflow:hidden;margin:-10px 0 22px;border:1px solid var(--va-line)} | |
| .progress-bar{height:100%;width:0;background:var(--grad);transition:width .35s ease} | |
| .challenge-panel{display:none;border-color:#d8c8f0;background:linear-gradient(135deg,#fff 0%,#faf7ff 100%)} | |
| .challenge-panel.show{display:block;animation:rowIn .35s ease both} | |
| .challenge-body{padding:22px} | |
| .challenge-question{font-size:1.06rem;font-weight:800;line-height:1.35;margin-bottom:8px} | |
| .challenge-context{font-size:.88rem;color:var(--va-grey);margin-bottom:16px} | |
| .vote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} | |
| .vote-btn{border:1.5px solid var(--va-line);background:#fff;border-radius:12px;padding:12px 10px;font:700 .82rem/1.25 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--va-ink);cursor:pointer} | |
| .vote-btn:hover{border-color:var(--va-orange);background:#fff8f4;transform:translateY(-1px)} | |
| .vote-result{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;background:#f3eefc;border:1px solid #ddccf5;font-size:.86rem} | |
| .vote-result.show{display:block} | |
| @media(max-width:680px){.vote-grid{grid-template-columns:1fr}} | |
| .evidence-wrap{background:#11141a;color:#fff;border-radius:var(--radius);padding:22px;margin:0 0 22px;position:relative;overflow:hidden} | |
| .evidence-wrap::after{content:'';position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-90px;top:-130px} | |
| .evidence-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;position:relative;z-index:1} | |
| .evidence-head h3{font-size:1.05rem;margin:2px 0 0} | |
| .evidence-head p{color:#9fa5af;font-size:.8rem;margin-top:4px} | |
| .evidence-status{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:1px solid #3a3f49;border-radius:999px;padding:6px 10px;color:#b9bec7;white-space:nowrap} | |
| .evidence-status.pending{color:var(--warn);border-color:rgba(255,184,77,.5);background:rgba(255,184,77,.08)} | |
| .evidence-status.good{color:#8ce2b9;border-color:rgba(93,211,158,.5);background:rgba(93,211,158,.08)} | |
| .evidence-status.bad{color:#ff9b90;border-color:rgba(238,53,36,.55);background:rgba(238,53,36,.10)} | |
| .evidence-chain{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;z-index:1} | |
| .evidence-chain::before{content:'';position:absolute;left:9%;right:9%;top:28px;height:2px;background:#303541;z-index:-1} | |
| .ev-node{min-width:0} | |
| .ev-dot{width:15px;height:15px;border-radius:50%;background:#4b515d;border:4px solid #1a1e26;margin:20px auto 12px;box-shadow:0 0 0 2px #4b515d} | |
| .ev-node.good .ev-dot{background:var(--ok);box-shadow:0 0 0 2px var(--ok)} | |
| .ev-node.bad .ev-dot{background:var(--va-red);box-shadow:0 0 0 2px var(--va-red)} | |
| .ev-node.derived .ev-dot{background:var(--warn);box-shadow:0 0 0 2px var(--warn)} | |
| .ev-card{background:#191d25;border:1px solid #303541;border-radius:12px;padding:12px;min-height:96px} | |
| .ev-label{font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#858c98;margin-bottom:5px} | |
| .ev-value{font-size:.82rem;font-weight:650;line-height:1.35;word-break:break-word} | |
| .ev-node.bad .ev-card{border-color:rgba(238,53,36,.7);background:rgba(238,53,36,.08)} | |
| .ev-node.good .ev-card{border-color:rgba(93,211,158,.45)} | |
| .blast-radius{display:none;margin-top:16px;border-left:3px solid var(--va-red);background:rgba(238,53,36,.10);border-radius:0 10px 10px 0;padding:12px 15px;font-size:.84rem;position:relative;z-index:1} | |
| .blast-radius.show{display:block;animation:rowIn .3s ease both} | |
| @media(max-width:900px){.evidence-chain{grid-template-columns:1fr}.evidence-chain::before{display:none}.ev-dot{margin:4px 0 8px}} | |
| .gate-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0} | |
| .gate-meta-box{background:#f8f7f5;border:1px solid var(--va-line);border-radius:10px;padding:10px 12px} | |
| .gate-meta-box span{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--va-grey)} | |
| .gate-meta-box b{font-size:.84rem} | |
| .gate-checks{display:grid;gap:7px;margin:14px 0} | |
| .gate-check{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;padding:8px 10px;border:1px solid var(--va-line);border-radius:9px;background:#fff} | |
| .gate-check::before{content:'•';font-weight:900;color:var(--va-grey)} | |
| .gate-check.good::before{content:'✓';color:#277a56} | |
| .gate-check.bad::before{content:'✕';color:var(--va-red)} | |
| .gate-check.warn::before{content:'!';color:#a66700} | |
| .gate-reason{margin:14px 0} | |
| .gate-reason label{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--va-grey);margin-bottom:6px} | |
| .gate-reason select{width:100%;border:1.5px solid var(--va-line);border-radius:10px;padding:11px 12px;background:#fff;color:var(--va-ink);font:600 .86rem Inter,ui-sans-serif,system-ui,sans-serif} | |
| .gate-reason select:focus{outline:3px solid rgba(255,122,61,.25);border-color:var(--va-orange)} | |
| .second-approval{display:none;margin-top:16px;border:1px solid #ddccf5;background:#f8f4ff;border-radius:12px;padding:15px} | |
| .second-approval.show{display:block;animation:rowIn .3s ease both} | |
| .second-approval h4{font-size:.9rem;margin-bottom:5px} | |
| .second-approval p{font-size:.8rem;color:var(--va-grey);margin-bottom:12px} | |
| .second-actions{display:flex;gap:8px;flex-wrap:wrap} | |
| .micro-btn{border:1px solid var(--va-line);background:#fff;border-radius:999px;padding:8px 13px;font:700 .76rem Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer} | |
| .micro-btn.primary{background:#8a56d6;color:#fff;border-color:#8a56d6} | |
| .hitl-explainer{font-size:.74rem;color:var(--va-grey);margin-top:8px;line-height:1.45} | |
| .hitl-explainer b{color:var(--va-ink)} | |
| .decision-summary{display:none;margin-top:22px;background:#fff;border:1px solid var(--va-line);border-radius:var(--radius);padding:22px} | |
| .decision-summary.show{display:block;animation:rowIn .35s ease both} | |
| .summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px} | |
| .summary-item{background:var(--va-soft);border:1px solid var(--va-line);border-radius:12px;padding:13px} | |
| .summary-item span{display:block;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--va-grey);margin-bottom:4px} | |
| .summary-item b{font-size:.88rem} | |
| .summary-change{margin-top:13px;font-size:.86rem;font-weight:700} | |
| @media(max-width:700px){.summary-grid{grid-template-columns:1fr}} | |
| .compare-ready{display:none;margin-top:18px;border:1px dashed var(--va-orange);background:#fff8f4;border-radius:14px;padding:15px 18px;align-items:center;justify-content:space-between;gap:16px} | |
| .compare-ready.show{display:flex} | |
| .compare-ready p{font-size:.86rem;color:var(--va-grey)} | |
| .compare-ready strong{display:block;color:var(--va-ink);font-size:.94rem} | |
| .modal{position:fixed;inset:0;z-index:200;background:rgba(13,15,19,.76);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px} | |
| .modal.show{display:flex} | |
| .modal-card{width:min(1040px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:modalIn .25s ease both} | |
| @keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} | |
| .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 28px;border-bottom:1px solid var(--va-line);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);z-index:2} | |
| .modal-head h2{font-size:1.55rem;margin:0} | |
| .modal-head p{font-size:.86rem;color:var(--va-grey);margin-top:5px} | |
| .modal-close{border:0;background:var(--va-soft);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem} | |
| .modal-body{padding:26px 28px 30px} | |
| .compare-grid{display:grid;grid-template-columns:170px 1fr 1fr;border:1px solid var(--va-line);border-radius:16px;overflow:hidden} | |
| .compare-cell{padding:14px 16px;border-right:1px solid var(--va-line);border-bottom:1px solid var(--va-line);font-size:.86rem} | |
| .compare-cell:nth-child(3n){border-right:0} | |
| .compare-cell:nth-last-child(-n+3){border-bottom:0} | |
| .compare-head{font-weight:800;background:var(--va-soft)} | |
| .compare-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--va-grey);background:#fbfaf9} | |
| .cell-bad{background:#fff5f2;color:#a52a1e;font-weight:700} | |
| .cell-good{background:#effaf4;color:#256c4c;font-weight:700} | |
| .compare-punch{margin-top:20px;text-align:center;background:var(--va-ink);color:#fff;border-radius:14px;padding:20px;font-size:1.05rem;font-weight:750} | |
| @media(max-width:760px){.compare-grid{grid-template-columns:120px 1fr 1fr}.compare-cell{padding:11px 10px;font-size:.75rem}} | |
| .shadow-timeline{display:grid;gap:0;margin-top:8px} | |
| .shadow-line{display:grid;grid-template-columns:92px 22px 1fr;gap:10px;align-items:start;opacity:.28;transform:translateY(5px);transition:.3s;padding:8px 0} | |
| .shadow-line.on{opacity:1;transform:none} | |
| .shadow-time{font-family:'SFMono-Regular',Consolas,monospace;font-size:.74rem;color:var(--va-grey)} | |
| .shadow-dot{width:11px;height:11px;border-radius:50%;margin-top:3px;background:var(--va-line);box-shadow:0 0 0 5px var(--va-soft)} | |
| .shadow-line.danger .shadow-dot{background:var(--va-red)} | |
| .shadow-line strong{font-size:.88rem;display:block} | |
| .shadow-line p{font-size:.8rem;color:var(--va-grey)} | |
| .shadow-conclusion{display:none;margin-top:18px;background:#fff5f2;border:1px solid #ffd3ca;border-radius:12px;padding:18px;font-weight:800;text-align:center} | |
| .shadow-conclusion.show{display:block;animation:rowIn .3s ease both} | |
| .ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px} | |
| .ops-kpi{background:#fff;border:1px solid var(--va-line);border-radius:16px;padding:20px} | |
| .ops-kpi .k-label{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--va-grey)} | |
| .ops-kpi .k-value{font-size:1.85rem;font-weight:900;letter-spacing:-.03em;margin:5px 0} | |
| .ops-kpi .k-sub{font-size:.78rem;color:var(--va-grey)} | |
| .ops-panels{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:18px} | |
| .ops-panel{background:#fff;border:1px solid var(--va-line);border-radius:18px;padding:22px} | |
| .ops-panel h3{font-size:1rem;margin-bottom:4px} | |
| .ops-panel>p{font-size:.82rem;color:var(--va-grey);margin-bottom:18px} | |
| .bar-row{display:grid;grid-template-columns:84px 1fr 70px;gap:10px;align-items:center;margin:12px 0;font-size:.78rem} | |
| .bar-track{height:11px;border-radius:999px;background:var(--va-soft);overflow:hidden;border:1px solid var(--va-line)} | |
| .bar-fill{height:100%;background:var(--grad);border-radius:999px;transition:width .45s ease} | |
| .prompt-switch{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px} | |
| .prompt-btn{border:1px solid var(--va-line);background:#fff;border-radius:999px;padding:8px 12px;font:700 .75rem Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer} | |
| .prompt-btn.active{background:var(--va-ink);color:#fff;border-color:var(--va-ink)} | |
| .prompt-code{font-family:'SFMono-Regular',Consolas,monospace;background:#11141a;color:#e5e7eb;border-radius:12px;padding:14px;font-size:.76rem;line-height:1.55;min-height:78px} | |
| .demo-badge{display:inline-flex;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#7d5a00;background:#fff7df;border:1px solid #f1d585;padding:4px 8px;border-radius:999px;margin-left:8px} | |
| @media(max-width:900px){.ops-grid{grid-template-columns:repeat(2,1fr)}.ops-panels{grid-template-columns:1fr}} | |
| @media(max-width:560px){.ops-grid{grid-template-columns:1fr}} | |
| .arch-switch{display:flex;gap:6px;background:var(--va-soft);border:1px solid var(--va-line);padding:5px;border-radius:999px;width:max-content;margin:28px 0 20px} | |
| .arch-btn{border:0;background:transparent;padding:10px 16px;border-radius:999px;font:800 .8rem Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;color:var(--va-grey)} | |
| .arch-btn.active{background:#fff;color:var(--va-ink);box-shadow:0 3px 12px rgba(22,24,29,.09)} | |
| .arch-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:stretch} | |
| .arch-layer{position:relative;background:#fff;border:1px solid var(--va-line);border-radius:15px;padding:18px 14px;min-height:132px} | |
| .arch-layer:not(:last-child)::after{content:'→';position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--va-orange);font-weight:900;z-index:2} | |
| .arch-num{font-size:.62rem;font-weight:900;color:var(--va-red);letter-spacing:.1em;text-transform:uppercase} | |
| .arch-layer h3{font-size:.9rem;margin:7px 0 5px} | |
| .arch-layer p{font-size:.76rem;color:var(--va-grey);line-height:1.4} | |
| @media(max-width:960px){.arch-flow{grid-template-columns:repeat(2,1fr)}.arch-layer:not(:last-child)::after{display:none}} | |
| @media(max-width:560px){.arch-flow{grid-template-columns:1fr}} | |
| .debrief{background:var(--va-ink);color:#fff;border-radius:26px;padding:48px;position:relative;overflow:hidden} | |
| .debrief h2{color:#fff;max-width:24ch} | |
| .debrief p{color:#cfd2d8;max-width:65ch;margin:12px 0 24px} | |
| .debrief-actions{display:flex;gap:12px;flex-wrap:wrap} | |
| .debrief .btn.ghost{border-color:#fff;color:#fff} | |
| .debrief .btn.ghost:hover{background:#fff;color:var(--va-ink)} | |
| .presenter-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:120;display:none;align-items:center;gap:8px;background:rgba(13,15,19,.94);color:#fff;border:1px solid #343842;border-radius:999px;padding:8px 12px;box-shadow:0 15px 40px rgba(0,0,0,.32);backdrop-filter:blur(10px)} | |
| .presenter-dock span{font-size:.72rem;color:#bfc4cc;white-space:nowrap} | |
| .presenter-dock kbd{font-family:'SFMono-Regular',Consolas,monospace;background:#242832;color:#fff;border:1px solid #454b58;border-bottom-width:2px;border-radius:5px;padding:2px 6px} | |
| body.presenter .presenter-dock{display:flex} | |
| body.presenter header{position:fixed;left:0;right:0;background:rgba(255,255,255,.96)} | |
| body.presenter .hero,body.presenter #szenario,body.presenter #governance,body.presenter #tooling,body.presenter #operations,body.presenter #architecture,body.presenter #debrief,body.presenter footer{display:none} | |
| body.presenter #kontrollraum{padding:92px 24px 90px;min-height:100vh;background:linear-gradient(180deg,#faf9f7,#fff)} | |
| body.presenter #kontrollraum>.wrap{max-width:1500px} | |
| body.presenter .control-head .lead{max-width:90ch} | |
| body.presenter .nav-links{display:none} | |
| body.presenter .scenario-kicker{display:none} | |
| body.presenter .scen p{display:none} | |
| body.presenter .scen{padding:14px 18px} | |
| body.presenter .scen-cards{margin:20px 0 14px} | |
| body.presenter .masgraph{display:none} | |
| body.presenter .console{height:160px} | |
| body.presenter .control-grid{grid-template-columns:1.12fr .88fr} | |
| body.presenter .evidence-wrap{margin-top:4px} | |
| body.presenter section{padding-left:20px;padding-right:20px} | |
| @media(max-width:980px){body.presenter .control-grid{grid-template-columns:1fr}.presenter-dock{display:none!important}} | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="nav"> | |
| <a class="logo" href="#top" aria-label="valantic Workshop Start"><span class="dot"></span>valantic</a> | |
| <nav class="nav-links" aria-label="Hauptnavigation"> | |
| <a href="#kontrollraum">Challenge</a> | |
| <a href="#governance">Governance</a> | |
| <a href="#backend">Das Backend</a> | |
| </nav> | |
| <div class="nav-actions"> | |
| <button class="icon-btn" id="btnFullscreen" type="button" title="Vollbild (F)" aria-label="Vollbild umschalten">⛶</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ============ HERO ============ --> | |
| <div class="hero" id="top"> | |
| <div class="guilloche" aria-hidden="true"><svg version="1.1" id="ra_Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| viewBox="0 0 1015.91 1154.31" style="enable-background:new 0 0 1015.91 1154.31;" xml:space="preserve"> | |
| <style type="text/css"> | |
| .ra-st0{fill:none;stroke:url(#ra_SVGID_1_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st1{fill:none;stroke:url(#SVGID_00000142142591299790932440000002287491425110096285_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st2{fill:none;stroke:url(#SVGID_00000172414463701848126540000003766462567495455621_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st3{fill:none;stroke:url(#SVGID_00000084507054242604071520000002160600252724263866_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st4{fill:none;stroke:url(#SVGID_00000119803713253540853390000010664205954994398125_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st5{fill:none;stroke:url(#SVGID_00000139270958567500503410000005820876628396875190_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st6{fill:none;stroke:url(#SVGID_00000089534903601207312080000006675121441742045832_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st7{fill:none;stroke:url(#SVGID_00000071537082731411561640000005568083369689046431_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st8{fill:none;stroke:url(#SVGID_00000096052308020267900520000005386503995005218964_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st9{fill:none;stroke:url(#SVGID_00000165942802711063141310000013453129710679441292_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st10{fill:none;stroke:url(#SVGID_00000176032235542848278670000012557210038518482568_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st11{fill:none;stroke:url(#SVGID_00000052811861863130520260000015161493005657654425_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st12{fill:none;stroke:url(#SVGID_00000075884257084114265630000017084496230127927734_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st13{fill:none;stroke:url(#SVGID_00000134961675076408325220000003059394094189361839_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st14{fill:none;stroke:url(#SVGID_00000031207767490091895000000015912946789767940259_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st15{fill:none;stroke:url(#SVGID_00000007421302237862478150000016109084786955319228_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st16{fill:none;stroke:url(#SVGID_00000123426605996680305250000001907882392095785660_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st17{fill:none;stroke:url(#SVGID_00000176747969772817670220000009948489060548469410_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st18{fill:none;stroke:url(#SVGID_00000074444372458754677130000014533442730615467185_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st19{fill:none;stroke:url(#SVGID_00000088843143087546485040000004614680397656556427_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st20{fill:none;stroke:url(#SVGID_00000076597596864275737080000002402547898512456082_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st21{fill:none;stroke:url(#SVGID_00000165193004241523371440000014661323272956444597_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st22{fill:none;stroke:url(#SVGID_00000111911775243729251460000017087853917492115381_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st23{fill:none;stroke:url(#SVGID_00000133531525923889922650000018285509231178879625_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st24{fill:none;stroke:url(#SVGID_00000054985348626231909910000012049733784573361050_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st25{fill:none;stroke:url(#SVGID_00000046336154608096269350000000831447421707665284_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st26{fill:none;stroke:url(#SVGID_00000063597539671358575190000013445426191089188542_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st27{fill:none;stroke:url(#SVGID_00000021090832283748075220000018151987304010652830_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st28{fill:none;stroke:url(#SVGID_00000179642356579824298580000016710522888585986731_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st29{fill:none;stroke:url(#SVGID_00000173867312828297404880000009292119755830002061_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st30{fill:none;stroke:url(#SVGID_00000036930614585684296090000001839078816540316073_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st31{fill:none;stroke:url(#SVGID_00000121259835824024837350000014054661393414717885_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st32{fill:none;stroke:url(#SVGID_00000106140412696895540020000015772378984103883165_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st33{fill:none;stroke:url(#SVGID_00000063632151701892636680000015940296586004829060_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st34{fill:none;stroke:url(#SVGID_00000091011693702227172550000004692470519603098784_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st35{fill:none;stroke:url(#SVGID_00000005263051685902898510000012727808128612525978_);stroke-width:0.5;stroke-miterlimit:10;} | |
| .ra-st36{fill:none;stroke:url(#SVGID_00000139272830211786252640000011324599389258218943_);stroke-width:0.5;stroke-miterlimit:10;} | |
| </style> | |
| <g> | |
| <linearGradient id="ra_SVGID_1_" gradientUnits="userSpaceOnUse" x1="143.0553" y1="842.3489" x2="725.2906" y2="260.1136"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path class="ra-st0" d="M1015.41,662.5c0-132.49-107.4-239.89-239.89-239.89c-1.63,0-3.25,0.03-4.88,0.06l0.01-0.01 | |
| c-70.56,1.43-105.55-26.03-114.04-122.34l-0.01,0.01C641.99,132.32,501,0.5,329.19,0.5C147.66,0.5,0.5,147.66,0.5,329.19 | |
| c0,171.66,131.6,312.56,299.41,327.38l-0.02,0c138.77,12.41,149.61,136.67,97.36,192.87l0.06-0.02 | |
| c-30.09,32.33-48.53,75.66-48.53,123.31c0,100,81.07,181.07,181.07,181.07c82.71,0,152.42-55.48,174.07-131.23l0.01,0.01 | |
| c22.39-78.22,35.65-98.34,136.44-129.08C941.36,865.21,1015.41,772.51,1015.41,662.5z"/> | |
| <linearGradient id="ra_SVGID_00000145757638360350449000000012344583583942108584_" gradientUnits="userSpaceOnUse" x1="151.3636" y1="837.7526" x2="717.9369" y2="271.1793"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000145757638360350449000000012344583583942108584_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M1000.4,662.89c0-128.92-104.51-233.43-233.43-233.43c-1.59,0-3.17,0.03-4.75,0.06l0.01-0.01 | |
| c-68.66,1.4-102.71-25.33-110.97-119.05l-0.01,0.01C637.03,146.98,499.83,18.71,332.65,18.71c-176.65,0-319.85,143.2-319.85,319.85 | |
| c0,167.04,128.06,304.15,291.36,318.57l-0.02,0c135.03,12.08,145.58,132.99,94.74,187.68l0.06-0.02 | |
| c-29.28,31.46-47.22,73.62-47.22,119.99c0,97.31,78.89,176.2,176.2,176.2c80.48,0,148.31-53.98,169.38-127.7l0.01,0.01 | |
| c21.78-76.12,34.35-96.81,132.77-125.6C928.02,859.03,1000.4,769.94,1000.4,662.89z"/> | |
| <linearGradient id="ra_SVGID_00000061432705127320322190000016233885177483657895_" gradientUnits="userSpaceOnUse" x1="159.8322" y1="833.3164" x2="710.7434" y2="282.4052"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000061432705127320322190000016233885177483657895_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M985.39,663.29c0-125.35-101.62-226.97-226.97-226.97c-1.54,0-3.08,0.03-4.61,0.06l0.01-0.01c-66.76,1.36-99.87-24.63-107.9-115.75 | |
| l-0.01,0.01C632.07,161.65,498.67,36.93,336.11,36.93c-171.76,0-311,139.24-311,311c0,162.42,124.52,295.74,283.3,309.76l-0.01,0 | |
| c131.3,11.75,141.55,129.31,92.12,182.49l0.06-0.02c-28.47,30.59-45.91,71.58-45.91,116.67c0,94.62,76.7,171.32,171.32,171.32 | |
| c78.26,0,144.21-52.49,164.7-124.17l0.01,0.01c21.18-74.01,33.4-94.13,129.09-122.13C915.01,854,985.39,767.38,985.39,663.29z"/> | |
| <linearGradient id="ra_SVGID_00000028316015669443070210000017904465128278529417_" gradientUnits="userSpaceOnUse" x1="168.3007" y1="828.8803" x2="703.5499" y2="293.6311"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000028316015669443070210000017904465128278529417_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M970.38,663.69c0-121.79-98.73-220.52-220.52-220.52c-1.5,0-2.99,0.03-4.48,0.06l0.01-0.01c-64.86,1.32-97.03-23.93-104.83-112.46 | |
| l-0.01,0.01C627.11,176.32,497.5,55.14,339.57,55.14c-166.87,0-302.15,135.28-302.15,302.15c0,157.8,120.97,287.32,275.24,300.94 | |
| l-0.01,0c127.56,11.41,137.53,125.63,89.5,177.3l0.06-0.02c-27.66,29.72-44.61,69.55-44.61,113.35 | |
| c0,91.93,74.52,166.45,166.45,166.45c76.03,0,140.11-51,160.01-120.64l0.01,0.01c20.58-71.91,32.45-91.46,125.42-118.66 | |
| C902,848.97,970.38,764.81,970.38,663.69z"/> | |
| <linearGradient id="ra_SVGID_00000003084537269727728690000010648363473727599020_" gradientUnits="userSpaceOnUse" x1="176.7692" y1="824.4442" x2="696.3563" y2="304.8571"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000003084537269727728690000010648363473727599020_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M955.36,664.08c0-118.22-95.84-214.06-214.06-214.06c-1.46,0-2.9,0.03-4.35,0.06l0.01-0.01C674,451.34,642.77,426.84,635.2,340.9 | |
| l-0.01,0.01C622.15,190.98,496.33,73.36,343.03,73.36c-161.99,0-293.3,131.32-293.3,293.3c0,153.18,117.43,278.91,267.18,292.13 | |
| l-0.01,0c123.83,11.08,133.5,121.95,86.88,172.11l0.06-0.02c-26.85,28.85-43.3,67.51-43.3,110.03 | |
| c0,89.23,72.34,161.57,161.57,161.57c73.8,0,136.01-49.5,155.33-117.1l0.01,0.01c19.98-69.8,31.5-88.78,121.75-115.18 | |
| C888.99,843.94,955.36,762.24,955.36,664.08z"/> | |
| <linearGradient id="ra_SVGID_00000085944049775264677090000007024695274978332829_" gradientUnits="userSpaceOnUse" x1="185.2378" y1="820.0081" x2="689.1628" y2="316.083"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000085944049775264677090000007024695274978332829_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M940.35,664.48c0-114.66-92.95-207.6-207.6-207.6c-1.41,0-2.82,0.03-4.22,0.05l0.01-0.01c-61.06,1.24-91.35-22.52-98.69-105.87 | |
| l-0.01,0.01C617.19,205.65,495.17,91.57,346.49,91.57c-157.1,0-284.46,127.36-284.46,284.46c0,148.56,113.89,270.5,259.12,283.32 | |
| l-0.01,0c120.09,10.74,129.47,118.28,84.26,166.92l0.05-0.02c-26.04,27.98-41.99,65.47-41.99,106.71 | |
| c0,86.54,70.16,156.7,156.7,156.7c71.58,0,131.9-48.01,150.64-113.57l0.01,0.01c19.37-67.7,30.55-86.1,118.08-111.71 | |
| C875.98,838.91,940.35,759.68,940.35,664.48z"/> | |
| <linearGradient id="ra_SVGID_00000109002978051059902110000008391542871374381218_" gradientUnits="userSpaceOnUse" x1="193.7063" y1="815.5719" x2="681.9693" y2="327.309"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000109002978051059902110000008391542871374381218_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M925.34,664.87c0-111.09-90.06-201.15-201.15-201.15c-1.37,0-2.73,0.02-4.09,0.05l0.01-0.01c-59.16,1.2-88.5-21.82-95.62-102.58 | |
| l-0.01,0.01C612.23,220.32,494,109.79,349.95,109.79c-152.21,0-275.61,123.39-275.61,275.61c0,143.94,110.35,262.09,251.06,274.51 | |
| l-0.01,0c116.36,10.41,125.45,114.6,81.64,161.73l0.05-0.02c-25.23,27.11-40.69,63.44-40.69,103.39 | |
| c0,83.85,67.98,151.83,151.83,151.83c69.35,0,127.8-46.52,145.96-110.04l0.01,0.01c18.77-65.59,29.6-83.42,114.4-108.23 | |
| C862.97,833.88,925.34,757.11,925.34,664.87z"/> | |
| <linearGradient id="ra_SVGID_00000039097019272119751300000005416153496452877984_" gradientUnits="userSpaceOnUse" x1="202.1749" y1="811.1358" x2="674.7758" y2="338.5349"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000039097019272119751300000005416153496452877984_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M910.33,665.27c0-107.52-87.17-194.69-194.69-194.69c-1.32,0-2.64,0.02-3.96,0.05l0.01-0.01c-57.26,1.16-85.66-21.12-92.55-99.29 | |
| l-0.01,0.01C607.27,234.98,492.84,128,353.4,128C206.08,128,86.64,247.43,86.64,394.76c0,139.32,106.81,253.67,243,265.7l-0.01,0 | |
| C442.25,670.54,451.05,771.38,408.65,817l0.05-0.02c-24.42,26.24-39.38,61.4-39.38,100.07c0,81.16,65.79,146.95,146.95,146.95 | |
| c67.13,0,123.7-45.02,141.27-106.51l0.01,0.01c18.17-63.49,28.65-80.74,110.73-104.76C849.96,828.85,910.33,754.55,910.33,665.27z" | |
| /> | |
| <linearGradient id="ra_SVGID_00000127038177680903284640000000911973832290428043_" gradientUnits="userSpaceOnUse" x1="210.6434" y1="806.6996" x2="667.5822" y2="349.7608"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000127038177680903284640000000911973832290428043_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M895.32,665.66c0-103.96-84.27-188.23-188.23-188.23c-1.28,0-2.55,0.02-3.83,0.05l0.01-0.01c-55.37,1.13-82.82-20.42-89.48-96 | |
| l-0.01,0.01c-11.47-131.83-122.1-235.27-256.91-235.27c-142.44,0-257.92,115.47-257.92,257.92c0,134.7,103.26,245.26,234.94,256.89 | |
| l-0.01,0c108.89,9.74,117.39,107.24,76.4,151.34l0.05-0.02c-23.61,25.37-38.08,59.36-38.08,96.75 | |
| c0,78.47,63.61,142.08,142.08,142.08c64.9,0,119.6-43.53,136.59-102.98l0.01,0.01c17.57-61.38,27.7-78.07,107.06-101.28 | |
| C836.95,823.82,895.32,751.98,895.32,665.66z"/> | |
| <linearGradient id="ra_SVGID_00000062155762603173654000000001763613622194474935_" gradientUnits="userSpaceOnUse" x1="219.1119" y1="802.2635" x2="660.3887" y2="360.9868"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000062155762603173654000000001763613622194474935_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M880.31,666.06c0-100.39-81.38-181.78-181.78-181.78c-1.24,0-2.47,0.02-3.7,0.05l0.01-0.01c-53.47,1.09-79.98-19.72-86.41-92.7 | |
| l-0.01,0.01c-11.08-127.31-117.92-227.2-248.1-227.2c-137.56,0-249.07,111.51-249.07,249.07c0,130.08,99.72,236.85,226.88,248.07 | |
| l-0.01,0c105.15,9.41,113.37,103.56,73.78,146.15l0.05-0.01c-22.8,24.5-36.77,57.33-36.77,93.44 | |
| c0,75.78,61.43,137.21,137.21,137.21c62.67,0,115.49-42.04,131.9-99.44l0.01,0.01c16.96-59.27,26.75-75.39,103.39-97.81 | |
| C823.94,818.79,880.31,749.42,880.31,666.06z"/> | |
| <linearGradient id="ra_SVGID_00000111158598925915387220000012537262673596177325_" gradientUnits="userSpaceOnUse" x1="227.5805" y1="797.8274" x2="653.1952" y2="372.2127"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000111158598925915387220000012537262673596177325_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M865.29,666.46c0-96.83-78.49-175.32-175.32-175.32c-1.19,0-2.38,0.02-3.56,0.05l0.01-0.01c-51.57,1.05-77.14-19.02-83.34-89.41 | |
| l0,0.01c-10.68-122.79-113.73-219.13-239.29-219.13c-132.67,0-240.22,107.55-240.22,240.22c0,125.46,96.18,228.43,218.82,239.26 | |
| l-0.01,0c101.42,9.07,109.34,99.88,71.16,140.96l0.05-0.01c-21.99,23.63-35.46,55.29-35.46,90.12 | |
| c0,73.08,59.25,132.33,132.33,132.33c60.45,0,111.39-40.54,127.21-95.91l0.01,0.01c16.36-57.17,25.8-72.71,99.71-94.34 | |
| C810.93,813.76,865.29,746.85,865.29,666.46z"/> | |
| <linearGradient id="ra_SVGID_00000102523611750734042960000007012550289764372878_" gradientUnits="userSpaceOnUse" x1="236.049" y1="793.3913" x2="646.0016" y2="383.4386"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000102523611750734042960000007012550289764372878_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M850.28,666.85c0-93.26-75.6-168.86-168.86-168.86c-1.15,0-2.29,0.02-3.43,0.04l0.01-0.01c-49.67,1.01-74.3-18.32-80.27-86.12 | |
| l0,0.01c-10.29-118.27-109.54-211.06-230.48-211.06c-127.78,0-231.37,103.59-231.37,231.37c0,120.84,92.64,220.02,210.76,230.45 | |
| l-0.01,0c97.68,8.74,105.31,96.2,68.54,135.77l0.04-0.01c-21.18,22.76-34.16,53.26-34.16,86.8c0,70.39,57.07,127.46,127.46,127.46 | |
| c58.22,0,107.29-39.05,122.53-92.38l0.01,0.01c15.76-55.06,24.85-70.03,96.04-90.86C797.92,808.73,850.28,744.29,850.28,666.85z"/> | |
| <linearGradient id="ra_SVGID_00000026138686542910323200000003604756649674786954_" gradientUnits="userSpaceOnUse" x1="244.5175" y1="788.9551" x2="638.8081" y2="394.6646"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000026138686542910323200000003604756649674786954_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M835.27,667.25c0-89.69-72.71-162.41-162.41-162.41c-1.1,0-2.2,0.02-3.3,0.04l0.01-0.01c-47.77,0.97-71.46-17.62-77.2-82.82l0,0.01 | |
| c-9.9-113.74-105.35-202.99-221.66-202.99c-122.9,0-222.53,99.63-222.53,222.53c0,116.22,89.09,211.61,202.71,221.64l-0.01,0 | |
| c93.95,8.4,101.28,92.53,65.91,130.58l0.04-0.01c-20.37,21.89-32.85,51.22-32.85,83.48c0,67.7,54.88,122.58,122.58,122.58 | |
| c55.99,0,103.19-37.56,117.84-88.85l0.01,0.01c15.16-52.96,23.9-67.35,92.37-87.39C784.91,803.7,835.27,741.72,835.27,667.25z"/> | |
| <linearGradient id="ra_SVGID_00000107582944224002929850000010649840557422807735_" gradientUnits="userSpaceOnUse" x1="252.9861" y1="784.519" x2="631.6146" y2="405.8905"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000107582944224002929850000010649840557422807735_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M820.26,667.64c0-86.13-69.82-155.95-155.95-155.95c-1.06,0-2.12,0.02-3.17,0.04l0.01-0.01c-45.87,0.93-68.62-16.92-74.14-79.53 | |
| l0,0.01c-9.5-109.22-101.16-194.92-212.85-194.92c-118.01,0-213.68,95.67-213.68,213.68c0,111.6,85.55,203.19,194.65,212.83 | |
| l-0.01,0c90.21,8.07,97.26,88.85,63.29,125.39l0.04-0.01c-19.56,21.02-31.55,49.18-31.55,80.16c0,65.01,52.7,117.71,117.71,117.71 | |
| c53.77,0,99.08-36.06,113.16-85.31l0.01,0.01c14.55-50.85,22.95-64.68,88.7-83.91C771.91,798.67,820.26,739.16,820.26,667.64z"/> | |
| <linearGradient id="ra_SVGID_00000116942031674688685430000015311832253081244087_" gradientUnits="userSpaceOnUse" x1="261.4546" y1="780.0829" x2="624.4211" y2="417.1164"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000116942031674688685430000015311832253081244087_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M805.25,668.04c0-82.56-66.93-149.49-149.49-149.49c-1.02,0-2.03,0.02-3.04,0.04l0.01-0.01c-43.97,0.89-65.78-16.22-71.07-76.24 | |
| l0,0.01c-9.11-104.7-96.97-186.85-204.04-186.85c-113.13,0-204.83,91.71-204.83,204.83c0,106.98,82.01,194.78,186.59,204.01 | |
| l-0.01,0c86.48,7.74,93.23,85.17,60.67,120.19l0.04-0.01c-18.75,20.15-30.24,47.15-30.24,76.84c0,62.32,50.52,112.84,112.84,112.84 | |
| c51.54,0,94.98-34.57,108.47-81.78l0.01,0.01c13.95-48.75,22-62,85.02-80.44C758.9,793.65,805.25,736.59,805.25,668.04z"/> | |
| <linearGradient id="ra_SVGID_00000021842147238462800100000009909350549018920578_" gradientUnits="userSpaceOnUse" x1="269.9232" y1="775.6468" x2="617.2275" y2="428.3424"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000021842147238462800100000009909350549018920578_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M790.24,668.43c0-79-64.04-143.03-143.03-143.03c-0.97,0-1.94,0.02-2.91,0.04l0.01-0.01c-42.07,0.86-62.93-15.52-68-72.94l0,0.01 | |
| c-8.72-100.18-92.79-178.78-195.22-178.78c-108.24,0-195.99,87.75-195.99,195.98c0,102.35,78.47,186.37,178.53,195.2l-0.01,0 | |
| c82.74,7.4,89.2,81.49,58.05,115l0.04-0.01c-17.94,19.28-28.93,45.11-28.93,73.52c0,59.63,48.34,107.96,107.96,107.96 | |
| c49.32,0,90.88-33.08,103.79-78.25l0.01,0.01c13.35-46.64,21.05-59.32,81.35-76.96C745.89,788.62,790.24,734.03,790.24,668.43z"/> | |
| <linearGradient id="ra_SVGID_00000179605042256492105660000014021970506488689305_" gradientUnits="userSpaceOnUse" x1="278.3917" y1="771.2106" x2="610.034" y2="439.5683"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000179605042256492105660000014021970506488689305_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M775.23,668.83c0-75.43-61.15-136.58-136.58-136.58c-0.93,0-1.85,0.02-2.78,0.04l0.01-0.01c-40.17,0.82-60.09-14.82-64.93-69.65 | |
| l0,0.01c-8.32-95.66-88.6-170.71-186.41-170.71c-103.35,0-187.14,83.78-187.14,187.14c0,97.73,74.93,177.95,170.47,186.39l-0.01,0 | |
| c79,7.07,85.18,77.81,55.43,109.81l0.04-0.01c-17.13,18.41-27.63,43.07-27.63,70.2c0,56.93,46.16,103.09,103.09,103.09 | |
| c47.09,0,86.78-31.59,99.1-74.72l0.01,0.01c12.75-44.54,20.1-56.64,77.68-73.49C732.88,783.59,775.23,731.46,775.23,668.83z"/> | |
| <linearGradient id="ra_SVGID_00000048490709008607710870000002015007346662250376_" gradientUnits="userSpaceOnUse" x1="286.8602" y1="766.7745" x2="602.8405" y2="450.7942"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000048490709008607710870000002015007346662250376_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M760.21,669.23c0-71.86-58.26-130.12-130.12-130.12c-0.88,0-1.77,0.02-2.65,0.03l0.01-0.01c-38.27,0.78-57.25-14.12-61.86-66.36 | |
| l0,0.01c-7.93-91.13-84.41-162.63-177.6-162.63c-98.47,0-178.29,79.82-178.29,178.29c0,93.11,71.38,169.54,162.41,177.58l-0.01,0 | |
| c75.27,6.73,81.15,74.13,52.81,104.62l0.03-0.01c-16.32,17.54-26.32,41.04-26.32,66.88c0,54.24,43.97,98.22,98.22,98.22 | |
| c44.86,0,82.67-30.09,94.42-71.18l0.01,0.01c12.14-42.43,19.15-53.97,74.01-70.02C719.87,778.56,760.21,728.9,760.21,669.23z"/> | |
| <linearGradient id="ra_SVGID_00000089565886825311731570000006079022053063413138_" gradientUnits="userSpaceOnUse" x1="295.3288" y1="762.3384" x2="595.647" y2="462.0202"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000089565886825311731570000006079022053063413138_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M745.2,669.62c0-68.3-55.37-123.66-123.66-123.66c-0.84,0-1.68,0.02-2.51,0.03l0.01-0.01c-36.37,0.74-54.41-13.42-58.79-63.07l0,0 | |
| c-7.54-86.61-80.22-154.56-168.79-154.56c-93.58,0-169.44,75.86-169.44,169.44c0,88.49,67.84,161.13,154.35,168.77l-0.01,0 | |
| c71.53,6.4,77.12,70.45,50.19,99.43l0.03-0.01c-15.51,16.67-25.02,39-25.02,63.57c0,51.55,41.79,93.34,93.34,93.34 | |
| c42.64,0,78.57-28.6,89.73-67.65l0.01,0.01c11.54-40.33,18.2-51.29,70.33-66.54C706.86,773.53,745.2,726.33,745.2,669.62z"/> | |
| <linearGradient id="ra_SVGID_00000069374842514660254890000016487672898935520951_" gradientUnits="userSpaceOnUse" x1="303.7973" y1="757.9022" x2="588.4534" y2="473.2461"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000069374842514660254890000016487672898935520951_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M730.19,670.02c0-64.73-52.48-117.21-117.21-117.21c-0.8,0-1.59,0.01-2.38,0.03l0-0.01c-34.47,0.7-51.57-12.72-55.72-59.77l0,0 | |
| c-7.14-82.09-76.03-146.49-159.97-146.49c-88.69,0-160.6,71.9-160.6,160.6c0,83.87,64.3,152.72,146.29,159.96l-0.01,0 | |
| c67.8,6.07,73.1,66.78,47.57,94.24l0.03-0.01c-14.7,15.8-23.71,36.96-23.71,60.25c0,48.86,39.61,88.47,88.47,88.47 | |
| c40.41,0,74.47-27.11,85.05-64.12l0.01,0.01c10.94-38.22,17.25-48.61,66.66-63.07C693.85,768.5,730.19,723.77,730.19,670.02z"/> | |
| <linearGradient id="ra_SVGID_00000132089093481292412140000014186964041855713183_" gradientUnits="userSpaceOnUse" x1="312.2658" y1="753.4661" x2="581.2599" y2="484.472"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000132089093481292412140000014186964041855713183_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M715.18,670.41c0-61.17-49.58-110.75-110.75-110.75c-0.75,0-1.5,0.01-2.25,0.03l0-0.01c-32.58,0.66-48.73-12.02-52.65-56.48l0,0 | |
| c-6.75-77.57-71.84-138.42-151.16-138.42c-83.81,0-151.75,67.94-151.75,151.75c0,79.25,60.76,144.3,138.23,151.14l-0.01,0 | |
| c64.06,5.73,69.07,63.1,44.95,89.05l0.03-0.01c-13.89,14.93-22.4,34.93-22.4,56.93c0,46.17,37.43,83.6,83.6,83.6 | |
| c38.19,0,70.37-25.61,80.36-60.59l0.01,0c10.34-36.11,16.3-45.93,62.99-59.59C680.84,763.47,715.18,721.2,715.18,670.41z"/> | |
| <linearGradient id="ra_SVGID_00000075848003696730722900000003671276471424402084_" gradientUnits="userSpaceOnUse" x1="320.7344" y1="749.03" x2="574.0664" y2="495.698"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000075848003696730722900000003671276471424402084_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M700.17,670.81c0-57.6-46.69-104.29-104.29-104.29c-0.71,0-1.41,0.01-2.12,0.03l0-0.01c-30.68,0.62-45.89-11.32-49.58-53.19l0,0 | |
| C537.82,440.31,476.52,383,401.83,383c-78.92,0-142.9,63.98-142.9,142.9c0,74.63,57.21,135.89,130.17,142.33l-0.01,0 | |
| c60.33,5.4,65.04,59.42,42.33,83.85l0.03-0.01c-13.08,14.06-21.1,32.89-21.1,53.61c0,43.48,35.24,78.72,78.72,78.72 | |
| c35.96,0,66.26-24.12,75.68-57.05l0.01,0c9.73-34.01,15.35-43.25,59.32-56.12C667.83,758.44,700.17,718.63,700.17,670.81z"/> | |
| <linearGradient id="ra_SVGID_00000158748613629249400130000014163277939755342491_" gradientUnits="userSpaceOnUse" x1="329.2029" y1="744.5939" x2="566.8729" y2="506.9239"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000158748613629249400130000014163277939755342491_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M685.16,671.2c0-54.03-43.8-97.84-97.84-97.84c-0.67,0-1.33,0.01-1.99,0.03l0-0.01c-28.78,0.59-43.05-10.62-46.51-49.89l0,0 | |
| c-5.96-68.52-63.47-122.28-133.53-122.28c-74.04,0-134.05,60.02-134.05,134.05c0,70.01,53.67,127.48,122.11,133.52l-0.01,0 | |
| c56.59,5.06,61.02,55.74,39.71,78.66l0.03-0.01c-12.27,13.19-19.79,30.86-19.79,50.29c0,40.78,33.06,73.85,73.85,73.85 | |
| c33.73,0,62.16-22.63,70.99-53.52l0.01,0c9.13-31.9,14.4-40.58,55.65-52.64C654.82,753.41,685.16,716.07,685.16,671.2z"/> | |
| <linearGradient id="ra_SVGID_00000118370044577134590170000004851519291725186731_" gradientUnits="userSpaceOnUse" x1="337.6714" y1="740.1577" x2="559.6793" y2="518.1498"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000118370044577134590170000004851519291725186731_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M670.15,671.6c0-50.47-40.91-91.38-91.38-91.38c-0.62,0-1.24,0.01-1.86,0.02l0-0.01c-26.88,0.55-40.21-9.91-43.44-46.6l0,0 | |
| c-5.57-64-59.28-114.21-124.72-114.21c-69.15,0-125.21,56.06-125.21,125.21c0,65.39,50.13,119.06,114.05,124.71l-0.01,0 | |
| c52.86,4.73,56.99,52.06,37.09,73.47l0.02-0.01c-11.46,12.32-18.48,28.82-18.48,46.97c0,38.09,30.88,68.97,68.97,68.97 | |
| c31.51,0,58.06-21.13,66.31-49.99l0,0c8.53-29.8,13.45-37.9,51.97-49.17C641.81,748.38,670.15,713.5,670.15,671.6z"/> | |
| <linearGradient id="ra_SVGID_00000019679092481676565150000007133297630979270030_" gradientUnits="userSpaceOnUse" x1="346.14" y1="735.7216" x2="552.4858" y2="529.3758"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000019679092481676565150000007133297630979270030_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M655.13,671.99c0-46.9-38.02-84.92-84.92-84.92c-0.58,0-1.15,0.01-1.73,0.02l0,0c-24.98,0.51-37.37-9.21-40.37-43.31l0,0 | |
| c-5.18-59.48-55.09-106.14-115.91-106.14c-64.26,0-116.36,52.1-116.36,116.36c0,60.77,46.59,110.65,106,115.9l-0.01,0 | |
| c49.12,4.39,52.96,48.38,34.47,68.28l0.02-0.01c-10.65,11.45-17.18,26.78-17.18,43.65c0,35.4,28.7,64.1,64.1,64.1 | |
| c29.28,0,53.96-19.64,61.62-46.46l0,0c7.93-27.69,12.5-35.22,48.3-45.7C628.8,743.35,655.13,710.94,655.13,671.99z"/> | |
| <linearGradient id="ra_SVGID_00000026855199582626512670000012992483789023534210_" gradientUnits="userSpaceOnUse" x1="354.6085" y1="731.2855" x2="545.2923" y2="540.6017"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000026855199582626512670000012992483789023534210_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M640.12,672.39c0-43.34-35.13-78.47-78.47-78.47c-0.53,0-1.06,0.01-1.6,0.02l0,0c-23.08,0.47-34.52-8.51-37.3-40.02l0,0 | |
| c-4.78-54.96-50.9-98.07-107.1-98.07c-59.38,0-107.51,48.14-107.51,107.51c0,56.15,43.05,102.24,97.94,107.08l-0.01,0 | |
| c45.39,4.06,48.94,44.7,31.85,63.09l0.02-0.01c-9.84,10.58-15.87,24.75-15.87,40.33c0,32.71,26.52,59.23,59.23,59.23 | |
| c27.05,0,49.85-18.15,56.94-42.93l0,0c7.32-25.59,11.55-32.54,44.63-42.22C615.79,738.32,640.12,708.37,640.12,672.39z"/> | |
| <linearGradient id="ra_SVGID_00000164490305495449653170000003391496116443561859_" gradientUnits="userSpaceOnUse" x1="363.0771" y1="726.8494" x2="538.0988" y2="551.8276"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000164490305495449653170000003391496116443561859_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M625.11,672.79c0-39.77-32.24-72.01-72.01-72.01c-0.49,0-0.98,0.01-1.46,0.02l0,0c-21.18,0.43-31.68-7.81-34.23-36.72l0,0 | |
| c-4.39-50.43-46.71-90-98.28-90c-54.49,0-98.67,44.17-98.67,98.67c0,51.53,39.5,93.82,89.88,98.27l0,0 | |
| c41.65,3.73,44.91,41.03,29.23,57.9l0.02-0.01c-9.03,9.7-14.57,22.71-14.57,37.01c0,30.02,24.33,54.35,54.35,54.35 | |
| c24.83,0,45.75-16.65,52.25-39.39l0,0c6.72-23.48,10.6-29.86,40.96-38.75C602.78,733.29,625.11,705.81,625.11,672.79z"/> | |
| <linearGradient id="ra_SVGID_00000087404421993517108920000012667466629040241328_" gradientUnits="userSpaceOnUse" x1="371.5456" y1="722.4132" x2="530.9052" y2="563.0536"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000087404421993517108920000012667466629040241328_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M610.1,673.18c0-36.2-29.35-65.55-65.55-65.55c-0.45,0-0.89,0.01-1.33,0.02l0,0c-19.28,0.39-28.84-7.11-31.16-33.43l0,0 | |
| c-4-45.91-42.52-81.93-89.47-81.93c-49.61,0-89.82,40.21-89.82,89.82c0,46.91,35.96,85.41,81.82,89.46l0,0 | |
| c37.92,3.39,40.88,37.35,26.61,52.71l0.02-0.01c-8.22,8.83-13.26,20.67-13.26,33.69c0,27.33,22.15,49.48,49.48,49.48 | |
| c22.6,0,41.65-15.16,47.57-35.86l0,0c6.12-21.38,9.65-27.19,37.28-35.27C589.77,728.26,610.1,703.24,610.1,673.18z"/> | |
| <linearGradient id="ra_SVGID_00000008136382858291810950000010627878348338216111_" gradientUnits="userSpaceOnUse" x1="380.0141" y1="717.9771" x2="523.7117" y2="574.2795"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000008136382858291810950000010627878348338216111_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M595.09,673.58c0-32.64-26.46-59.1-59.1-59.1c-0.4,0-0.8,0.01-1.2,0.02l0,0c-17.38,0.35-26-6.41-28.09-30.14l0,0 | |
| c-3.6-41.39-38.33-73.86-80.66-73.86c-44.72,0-80.97,36.25-80.97,80.97c0,42.29,32.42,77,73.76,80.65l0,0 | |
| c34.18,3.06,36.85,33.67,23.98,47.51l0.02,0c-7.41,7.96-11.95,18.64-11.95,30.38c0,24.64,19.97,44.61,44.61,44.61 | |
| c20.38,0,37.55-13.67,42.88-32.33l0,0c5.51-19.27,8.7-24.51,33.61-31.8C576.76,723.23,595.09,700.68,595.09,673.58z"/> | |
| <linearGradient id="ra_SVGID_00000067922028694317241600000005797188900731651505_" gradientUnits="userSpaceOnUse" x1="388.4827" y1="713.541" x2="516.5182" y2="585.5054"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000067922028694317241600000005797188900731651505_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M580.08,673.97c0-29.07-23.57-52.64-52.64-52.64c-0.36,0-0.71,0.01-1.07,0.01l0,0c-15.48,0.31-23.16-5.71-25.02-26.84l0,0 | |
| c-3.21-36.87-34.15-65.79-71.84-65.79c-39.83,0-72.12,32.29-72.12,72.12c0,37.67,28.88,68.59,65.7,71.84l0,0 | |
| c30.45,2.72,32.83,29.99,21.36,42.32l0.01,0c-6.6,7.09-10.65,16.6-10.65,27.06c0,21.94,17.79,39.73,39.73,39.73 | |
| c18.15,0,33.44-12.17,38.2-28.8l0,0c4.91-17.16,7.75-21.83,29.94-28.32C563.75,718.2,580.08,698.11,580.08,673.97z"/> | |
| <linearGradient id="ra_SVGID_00000045609058216339506430000012063345979143175070_" gradientUnits="userSpaceOnUse" x1="396.9512" y1="709.1049" x2="509.3247" y2="596.7314"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000045609058216339506430000012063345979143175070_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M565.06,674.37c0-25.51-20.68-46.18-46.18-46.18c-0.31,0-0.63,0.01-0.94,0.01l0,0c-13.58,0.28-20.32-5.01-21.95-23.55l0,0 | |
| c-2.81-32.34-29.96-57.72-63.03-57.72c-34.95,0-63.28,28.33-63.28,63.28c0,33.05,25.34,60.17,57.64,63.02l0,0 | |
| c26.71,2.39,28.8,26.31,18.74,37.13l0.01,0c-5.79,6.22-9.34,14.56-9.34,23.74c0,19.25,15.61,34.86,34.86,34.86 | |
| c15.92,0,29.34-10.68,33.51-25.26l0,0c4.31-15.06,6.8-19.15,26.27-24.85C550.75,713.17,565.06,695.55,565.06,674.37z"/> | |
| <linearGradient id="ra_SVGID_00000016047759804837202140000004478661751077077632_" gradientUnits="userSpaceOnUse" x1="405.4197" y1="704.6687" x2="502.1311" y2="607.9573"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000016047759804837202140000004478661751077077632_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M550.05,674.77c0-21.94-17.79-39.72-39.72-39.72c-0.27,0-0.54,0-0.81,0.01l0,0c-11.68,0.24-17.48-4.31-18.88-20.26l0,0 | |
| c-2.42-27.82-25.77-49.65-54.22-49.65c-30.06,0-54.43,24.37-54.43,54.43c0,28.43,21.79,51.76,49.58,54.21l0,0 | |
| c22.98,2.06,24.77,22.63,16.12,31.94l0.01,0c-4.98,5.35-8.04,12.53-8.04,20.42c0,16.56,13.42,29.98,29.98,29.98 | |
| c13.7,0,25.24-9.19,28.82-21.73l0,0c3.71-12.95,5.85-16.48,22.59-21.38C537.74,708.14,550.05,692.98,550.05,674.77z"/> | |
| <linearGradient id="ra_SVGID_00000102509003032866990560000016029949015107284134_" gradientUnits="userSpaceOnUse" x1="413.8883" y1="700.2326" x2="494.9376" y2="619.1832"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000102509003032866990560000016029949015107284134_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M535.04,675.16c0-18.37-14.89-33.27-33.27-33.27c-0.23,0-0.45,0-0.68,0.01l0,0c-9.79,0.2-14.64-3.61-15.82-16.97l0,0 | |
| c-2.03-23.3-21.58-41.58-45.41-41.58c-25.17,0-45.58,20.41-45.58,45.58c0,23.81,18.25,43.35,41.52,45.4l0,0 | |
| c19.24,1.72,20.75,18.95,13.5,26.75l0.01,0c-4.17,4.48-6.73,10.49-6.73,17.1c0,13.87,11.24,25.11,25.11,25.11 | |
| c11.47,0,21.14-7.69,24.14-18.2l0,0c3.1-10.85,4.9-13.8,18.92-17.9C524.73,703.11,535.04,690.42,535.04,675.16z"/> | |
| <linearGradient id="ra_SVGID_00000123440146241312600200000014379678772465937536_" gradientUnits="userSpaceOnUse" x1="422.3568" y1="695.7964" x2="487.7441" y2="630.4092"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000123440146241312600200000014379678772465937536_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M520.03,675.56c0-14.81-12-26.81-26.81-26.81c-0.18,0-0.36,0-0.55,0.01l0,0c-7.89,0.16-11.8-2.91-12.75-13.67l0,0 | |
| c-1.63-18.78-17.39-33.51-36.59-33.51c-20.29,0-36.74,16.45-36.74,36.74c0,19.19,14.71,34.93,33.46,36.59l0,0 | |
| c15.51,1.39,16.72,15.27,10.88,21.56l0.01,0c-3.36,3.61-5.42,8.46-5.42,13.78c0,11.18,9.06,20.24,20.24,20.24 | |
| c9.24,0,17.03-6.2,19.45-14.67l0,0c2.5-8.74,3.95-11.12,15.25-14.43C511.72,698.08,520.03,687.85,520.03,675.56z"/> | |
| <linearGradient id="ra_SVGID_00000050657604850975540130000001927875022329200548_" gradientUnits="userSpaceOnUse" x1="430.8253" y1="691.3604" x2="480.5506" y2="641.6351"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000050657604850975540130000001927875022329200548_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M505.02,675.95c0-11.24-9.11-20.35-20.35-20.35c-0.14,0-0.28,0-0.41,0.01l0,0c-5.99,0.12-8.96-2.21-9.68-10.38l0,0 | |
| c-1.24-14.26-13.2-25.44-27.78-25.44c-15.4,0-27.89,12.49-27.89,27.89c0,14.57,11.17,26.52,25.4,27.78l0,0 | |
| c11.77,1.05,12.69,11.6,8.26,16.37l0.01,0c-2.55,2.74-4.12,6.42-4.12,10.46c0,8.48,6.88,15.36,15.36,15.36 | |
| c7.02,0,12.93-4.71,14.77-11.13l0,0c1.9-6.64,3-8.44,11.58-10.95C498.71,693.05,505.02,685.29,505.02,675.95z"/> | |
| <linearGradient id="ra_SVGID_00000119100770200898875320000014647967057311054990_" gradientUnits="userSpaceOnUse" x1="439.2939" y1="686.9242" x2="473.357" y2="652.8611"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000119100770200898875320000014647967057311054990_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M490.01,676.35c0-7.68-6.22-13.9-13.9-13.9c-0.09,0-0.19,0-0.28,0l0,0c-4.09,0.08-6.11-1.51-6.61-7.09l0,0 | |
| c-0.85-9.73-9.01-17.37-18.97-17.37c-10.52,0-19.04,8.53-19.04,19.04c0,9.94,7.62,18.11,17.35,18.97l0,0 | |
| c8.04,0.72,8.67,7.92,5.64,11.17l0,0c-1.74,1.87-2.81,4.38-2.81,7.14c0,5.79,4.7,10.49,10.49,10.49c4.79,0,8.83-3.21,10.08-7.6l0,0 | |
| c1.3-4.53,2.05-5.76,7.9-7.48C485.7,688.02,490.01,682.72,490.01,676.35z"/> | |
| <linearGradient id="ra_SVGID_00000076603802330992093800000008949718252113745326_" gradientUnits="userSpaceOnUse" x1="447.7674" y1="682.493" x2="466.1685" y2="664.092"> | |
| <stop offset="0" style="stop-color:#FF4B4B"/> | |
| <stop offset="1" style="stop-color:#FF744F"/> | |
| </linearGradient> | |
| <path style="fill:none;stroke:url(#ra_SVGID_00000076603802330992093800000008949718252113745326_);stroke-width:0.5;stroke-miterlimit:10;" d=" | |
| M475,676.74c0-4.11-3.33-7.44-7.44-7.44c-0.05,0-0.1,0-0.15,0l0,0c-2.19,0.04-3.27-0.81-3.54-3.79l0,0 | |
| c-0.45-5.21-4.83-9.3-10.16-9.3c-5.63,0-10.19,4.56-10.19,10.19c0,5.32,4.08,9.69,9.29,10.15l0,0c4.3,0.39,4.64,4.24,3.02,5.98l0,0 | |
| c-0.93,1-1.51,2.35-1.51,3.82c0,3.1,2.51,5.62,5.62,5.62c2.57,0,4.73-1.72,5.4-4.07l0,0c0.69-2.43,1.11-3.05,4.23-4 | |
| C472.7,683.03,475,680.16,475,676.74z"/> | |
| </g> | |
| <g> | |
| </g> | |
| <g> | |
| </g> | |
| <g> | |
| </g> | |
| <g> | |
| </g> | |
| <g> | |
| </g> | |
| <g> | |
| </g> | |
| </svg></div> | |
| <div class="hero-inner"> | |
| <span class="eyebrow">Agent-Steering · Hands-on Webinar</span> | |
| <h1>Vier Agenten. Eine Lieferung.<br><span class="accent">Und du hast die Kontrolle.</span></h1> | |
| <p>Du übernimmst den Kontrollraum eines Multi-Agent-Systems für eine temperaturkritische Pharma-Sendung. Entscheide zunächst selbst – und prüfe danach, ob Traces, Evidenz und Guardrails deine Einschätzung bestätigen. <strong>Beobachten. Erkennen. Eingreifen.</strong></p> | |
| <div class="hero-ctas"> | |
| <button class="btn" id="btnStartChallenge" type="button">Supply-Chain-Szenarien starten</button> | |
| </div> | |
| <div class="hero-proof" aria-label="Eigenschaften der Demo"> | |
| <span class="proof-chip"><strong>3</strong> interaktive Runs</span> | |
| <span class="proof-chip"><strong>Claim-level</strong> Evidence Chain</span> | |
| <span class="proof-chip"><strong>Human Gate</strong> mit Vier-Augen-Prinzip</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============ SZENARIO ============ --> | |
| <section id="szenario" class="soft"> | |
| <div class="wrap"> | |
| <span class="eyebrow">Das Szenario</span> | |
| <h2>Sendung #4711: Insulin nach Singapur.<br>Die Lage entscheidet sich erst im Run.</h2> | |
| <p class="lead">Du bist Supply-Chain-Manager im Pharma-Logistik-Team. Dein Monitoring-Board zeigt die aktiven Sendungen – und eine davon verlangt gleich deine Entscheidung. Du tippst die Frage, die dein Multi-Agent-System in Gang setzt:</p> | |
| <div class="board" role="img" aria-label="Fiktives Supply-Chain-Monitoring-Board: vier Sendungen, Sendung 4711 (Insulin) ist als prüfungsbedürftig hervorgehoben"> | |
| <div class="board-head"> | |
| <span class="b-dot"></span><span class="b-dot"></span><span class="b-dot"></span> | |
| <span class="b-title">Supply Chain Monitor · Live</span> | |
| <span class="b-time">09:41</span> | |
| </div> | |
| <div class="board-row"> | |
| <span class="sid">#4709</span> | |
| <span class="sdesc"><b>Verpackungsmaterial</b><span>Rotterdam → Wien</span></span> | |
| <span class="s-chip ok">planmäßig</span> | |
| </div> | |
| <div class="board-row hot"> | |
| <span class="sid">#4711</span> | |
| <span class="sdesc"><b>Insulin · 2 400 Einheiten</b><span>Hamburg → Singapur</span> | |
| <span class="hot-facts"> | |
| <span class="hf">Kühlkette: <b>2–8 °C aktiv</b></span> | |
| <span class="hf">Warenwert: <b>240 000 €</b></span> | |
| <span class="hf" id="stripWeather"><b>Wetterlage:</b> je nach Szenario</span> | |
| </span> | |
| </span> | |
| <span class="s-chip warn">⚠ Prüfung empfohlen</span> | |
| </div> | |
| <div class="board-row"> | |
| <span class="sid">#4713</span> | |
| <span class="sdesc"><b>Tabletten</b><span>Basel → Tokio</span></span> | |
| <span class="s-chip ok">planmäßig</span> | |
| </div> | |
| <div class="board-row"> | |
| <span class="sid">#4714</span> | |
| <span class="sdesc"><b>Impfstoff (2–8 °C)</b><span>Frankfurt → Chicago</span></span> | |
| <span class="s-chip ok">Kühlkette stabil</span> | |
| </div> | |
| <div class="board-prompt"><span class="bp-caret">›</span> prüfe #4711 – besteht Handlungsbedarf?<span class="bp-cursor"></span></div> | |
| </div> | |
| <p class="lead" style="margin-top:36px">Vier spezialisierte Agenten gehen an die Arbeit:</p> | |
| <div class="agents"> | |
| <div class="agent a-orch" id="ag-orch"> | |
| <div class="avatar">◎</div> | |
| <div class="role">Orchestrator</div> | |
| <h3>Der Dirigent</h3> | |
| <p>Zerlegt die Anfrage, delegiert an die Spezialisten und führt die Ergebnisse zur Entscheidung zusammen.</p> | |
| <div class="tools"><code>delegate()</code><code>synthesize()</code></div> | |
| </div> | |
| <div class="agent a-anwalt" id="ag-anwalt"> | |
| <div class="avatar">§</div> | |
| <div class="role">Agent 1 · Dokumente</div> | |
| <h3>Der Anwalt</h3> | |
| <p>Untersucht Lieferverträge und Incoterms: Welche Bedingungen gelten für diese Sendung wirklich?</p> | |
| <div class="tools"><code>read_contract()</code></div> | |
| </div> | |
| <div class="agent a-scout" id="ag-scout"> | |
| <div class="avatar">☂</div> | |
| <div class="role">Agent 2 · Live-Daten</div> | |
| <h3>Der Scout</h3> | |
| <p>Prüft Wetterdaten und operative Terminal-Signale getrennt – inklusive Quelle und Aktualität.</p> | |
| <div class="tools"><code>get_weather()</code><code>terminal_feed()</code></div> | |
| </div> | |
| <div class="agent a-macher" id="ag-macher"> | |
| <div class="avatar">⚡</div> | |
| <div class="role">Agent 3 · Aktion</div> | |
| <h3>Der Macher</h3> | |
| <p>Leitet Eskalationen und Folgehandlungen ein – Umbuchung, Kundeninfo, Versicherungsmeldung.</p> | |
| <div class="tools"><code>rebook_air_freight()</code><code>notify_customer()</code></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ KONTROLLRAUM ============ --> | |
| <section id="kontrollraum"> | |
| <div class="wrap"> | |
| <div class="control-head"> | |
| <div> | |
| <span class="eyebrow">Live-Showcase</span> | |
| <h2>Der Kontrollraum</h2> | |
| <p class="lead">Drei Szenarien, ein System. Steuere den Run Schritt für Schritt - jeder Span im Trace ist anklickbar und zeigt Input und Output. Links MLflow, rechts Blue Guardrails, und am Ende entscheidest: <em>du</em>.</p> | |
| <div class="acts" aria-label="Ablauf der Demo"> | |
| <span class="act-chip" id="chip1">Akt 1 · Beobachten</span> | |
| <span class="act-chip" id="chip2">Akt 2 · Erkennen</span> | |
| <span class="act-chip gate" id="chip3">Akt 3 · Eingreifen</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scenario-kicker">Spoilerfreie Auswahl – die Auflösung folgt erst nach deiner Einschätzung</div> | |
| <div class="scen-cards" role="group" aria-label="Szenario wählen"> | |
| <button class="scen" data-scen="routine" aria-pressed="false"> | |
| <span class="s-tag">Szenario A · Einstieg</span> | |
| <h3>Routineprüfung</h3> | |
| <p>Eine reguläre Statusprüfung. Lerne Trace, Kosten und Approval-Mechanik ohne Zeitdruck kennen.</p> | |
| <span class="spoiler-note">Auflösung nach dem Run</span> | |
| </button> | |
| <button class="scen" data-scen="hallu" aria-pressed="false"> | |
| <span class="s-tag">Szenario B · Challenge</span> | |
| <h3>Unklare Vertragslage</h3> | |
| <p>Eine plausible Empfehlung, echte Hitze und ein teurer Tool-Call. Reicht die Begründung?</p> | |
| <span class="spoiler-note">Auflösung nach deiner Erstentscheidung</span> | |
| </button> | |
| <button class="scen" data-scen="eskalation" aria-pressed="false"> | |
| <span class="s-tag">Szenario C · Challenge</span> | |
| <h3>Kritischer Terminal-Alarm</h3> | |
| <p>Wieder steht eine 18 000-€-Aktion im Raum. Diesmal zählt jedes Glied der Evidenzkette.</p> | |
| <span class="spoiler-note">Auflösung nach deiner Erstentscheidung</span> | |
| </button> | |
| </div> | |
| <div class="runbar"> | |
| <button class="btn small" id="btnStep" disabled>Schritt →</button> | |
| <button class="btn ghost small" id="btnAuto" disabled>▶ Auto abspielen</button> | |
| <button class="btn ghost small" id="btnReset" disabled>↺ Zurücksetzen</button> | |
| <button class="btn ghost small" id="btnCompare" disabled>⇄ B vs. C vergleichen</button> | |
| <span class="kbd-hint"><kbd>Leertaste</kbd> Schritt · <kbd>A</kbd> Auto · <kbd>1–3</kbd> Szenario</span> | |
| </div> | |
| <div class="director" aria-live="polite"> | |
| <span class="d-step" id="dStep">–</span> | |
| <span class="d-note" id="dNote">Wähle ein Szenario.</span> | |
| </div> | |
| <div class="progress-shell" aria-label="Run-Fortschritt"><div class="progress-bar" id="progressBar"></div></div> | |
| <div class="console" id="console" aria-live="polite"> | |
| <span class="console-empty">– Konsole bereit. Szenario wählen, dann „Schritt →" oder „Auto abspielen". –</span> | |
| </div> | |
| <div class="masgraph"> | |
| <span class="mg-eyebrow">Live-Topologie · Hub & Spoke</span> | |
| <svg viewBox="0 0 820 282" role="img" aria-label="Sterngraph: Orchestrator in der Mitte, Anwalt, Scout und Macher als Satelliten. Aktive Verbindungen leuchten während des Runs."> | |
| <defs> | |
| <linearGradient id="ggrad" x1="0" y1="0" x2="1" y2="1"> | |
| <stop offset="0" stop-color="#ee3524"/><stop offset="1" stop-color="#ff7a3d"/> | |
| </linearGradient> | |
| </defs> | |
| <line class="gedge" id="edge-anwalt" x1="410" y1="130" x2="150" y2="130"/> | |
| <line class="gedge" id="edge-scout" x1="410" y1="130" x2="655" y2="56"/> | |
| <line class="gedge" id="edge-macher" x1="410" y1="130" x2="655" y2="204"/> | |
| <g class="gdotg" id="dotg-anwalt"><circle class="gdot" r="5"><animateMotion dur="1.1s" repeatCount="indefinite" path="M410,130 L150,130"/></circle></g> | |
| <g class="gdotg" id="dotg-scout"><circle class="gdot" r="5"><animateMotion dur="1.1s" repeatCount="indefinite" path="M410,130 L655,56"/></circle></g> | |
| <g class="gdotg" id="dotg-macher"><circle class="gdot" r="5"><animateMotion dur="1.1s" repeatCount="indefinite" path="M410,130 L655,204"/></circle></g> | |
| <g class="gnode" id="gn-orch" transform="translate(410,130)"> | |
| <circle class="ring" r="43"/> | |
| <circle class="body" r="34" fill="url(#ggrad)"/> | |
| <text class="gicon" y="8" text-anchor="middle">◎</text> | |
| <text class="glabel" y="61" text-anchor="middle">Orchestrator</text> | |
| <g class="gbadge b-done" transform="translate(25,-27)"><circle r="10" fill="#5dd39e"/><path d="M-4.5 0.5l3 3 5.5-6.5" stroke="#16181d" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g> | |
| <g class="gbadge b-flag" transform="translate(25,-27)"><circle r="10" fill="#ee3524"/><text y="4" text-anchor="middle" fill="#fff" font-size="11" font-weight="800">⚑</text></g> | |
| </g> | |
| <g class="gnode" id="gn-anwalt" transform="translate(150,130)"> | |
| <circle class="ring" r="40"/> | |
| <circle class="body" r="31" fill="#16181d"/> | |
| <text class="gicon" y="8" text-anchor="middle">§</text> | |
| <text class="glabel" y="58" text-anchor="middle">Anwalt · Dokumente</text> | |
| <g class="gbadge b-done" transform="translate(23,-25)"><circle r="10" fill="#5dd39e"/><path d="M-4.5 0.5l3 3 5.5-6.5" stroke="#16181d" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g> | |
| <g class="gbadge b-flag" transform="translate(23,-25)"><circle r="10" fill="#ee3524"/><text y="4" text-anchor="middle" fill="#fff" font-size="11" font-weight="800">⚑</text></g> | |
| </g> | |
| <g class="gnode" id="gn-scout" transform="translate(655,56)"> | |
| <circle class="ring" r="40"/> | |
| <circle class="body" r="31" fill="#0194e2"/> | |
| <text class="gicon" y="8" text-anchor="middle">☂</text> | |
| <text class="glabel" y="58" text-anchor="middle">Scout · Live-Daten</text> | |
| <g class="gbadge b-done" transform="translate(23,-25)"><circle r="10" fill="#5dd39e"/><path d="M-4.5 0.5l3 3 5.5-6.5" stroke="#16181d" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g> | |
| <g class="gbadge b-flag" transform="translate(23,-25)"><circle r="10" fill="#ee3524"/><text y="4" text-anchor="middle" fill="#fff" font-size="11" font-weight="800">⚑</text></g> | |
| </g> | |
| <g class="gnode" id="gn-macher" transform="translate(655,204)"> | |
| <circle class="ring" r="40"/> | |
| <circle class="body" r="31" fill="#7c3aed"/> | |
| <text class="gicon" y="8" text-anchor="middle">⚡</text> | |
| <text class="glabel" y="58" text-anchor="middle">Macher · Aktion</text> | |
| <g class="gbadge b-done" transform="translate(23,-25)"><circle r="10" fill="#5dd39e"/><path d="M-4.5 0.5l3 3 5.5-6.5" stroke="#16181d" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g> | |
| <g class="gbadge b-flag" transform="translate(23,-25)"><circle r="10" fill="#ee3524"/><text y="4" text-anchor="middle" fill="#fff" font-size="11" font-weight="800">⚑</text></g> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="evidence-wrap" id="evidenceWrap" aria-live="polite"> | |
| <div class="evidence-head"> | |
| <div> | |
| <span class="mg-eyebrow">Evidence Chain</span> | |
| <h3>Wie wird aus einer Quelle eine echte Aktion?</h3> | |
| <p>Die Kette bleibt neutral, bis der Claim gegen die Quelle geprüft wurde.</p> | |
| </div> | |
| <span class="evidence-status" id="evidenceStatus">Wartet auf Run</span> | |
| </div> | |
| <div class="evidence-chain"> | |
| <div class="ev-node" id="ev-source"><div class="ev-dot"></div><div class="ev-card"><div class="ev-label">1 · Quelle</div><div class="ev-value" id="evSource">–</div></div></div> | |
| <div class="ev-node" id="ev-claim"><div class="ev-dot"></div><div class="ev-card"><div class="ev-label">2 · Claim</div><div class="ev-value" id="evClaim">–</div></div></div> | |
| <div class="ev-node" id="ev-signal"><div class="ev-dot"></div><div class="ev-card"><div class="ev-label">3 · Live-Signal</div><div class="ev-value" id="evSignal">–</div></div></div> | |
| <div class="ev-node" id="ev-reason"><div class="ev-dot"></div><div class="ev-card"><div class="ev-label">4 · Ableitung</div><div class="ev-value" id="evReason">–</div></div></div> | |
| <div class="ev-node" id="ev-action"><div class="ev-dot"></div><div class="ev-card"><div class="ev-label">5 · Aktion</div><div class="ev-value" id="evAction">–</div></div></div> | |
| </div> | |
| <div class="blast-radius" id="blastRadius"></div> | |
| </div> | |
| <div class="control-grid"> | |
| <!-- MLflow-Panel --> | |
| <div class="panel" id="panelML"> | |
| <div class="panel-head"> | |
| <div class="p-title"> | |
| <span class="logo-badge" aria-label="MLflow"> | |
| <svg viewBox="0 0 109 40" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"> | |
| <path d="M0 31.0316V15.5024H3.54258V17.4699C4.43636 15.8756 6.38278 15.045 8.13589 15.045C10.178 15.045 11.9636 15.9713 12.7943 17.7895C14.0096 15.7474 15.8278 15.045 17.8373 15.045C20.6469 15.045 23.3263 16.8325 23.3263 20.9493V31.0316H19.7531V21.5541C19.7531 19.7359 18.8268 18.3636 16.7522 18.3636C14.8057 18.3636 13.5292 19.8947 13.5292 21.8086V31.0297H9.89282V21.5541C9.89282 19.7684 8.99522 18.3732 6.88995 18.3732C4.91292 18.3732 3.66699 19.8412 3.66699 21.8182V31.0392Z" fill="#333333"/> | |
| <path d="M27.8546 31.0316V7.92917H31.5579V31.0316Z" fill="#333333"/> | |
| <path d="M30.0708 39.4871C30.9033 39.7187 31.6517 39.8699 33.2402 39.8699C36.1933 39.8699 39.6765 38.2048 40.5933 33.5311L44.3789 14.7923H50.0076L50.6947 11.6746H45.0086L45.7741 7.95023C46.3598 5.05837 47.9598 3.59234 50.5282 3.59234C51.1962 3.59234 51.0086 3.64975 51.6038 3.76267L52.4268 0.570327C51.6344 0.333006 50.9244 0.191379 49.378 0.191379C47.7454 0.166831 46.1514 0.688934 44.8497 1.67463C43.4086 2.78851 42.4574 4.42487 42.023 6.53779L40.9569 11.6746H35.9234L35.5119 14.7943H40.3349L36.8593 32.1206C36.4765 34.0861 35.3588 36.4364 32.1512 36.4364C31.4239 36.4364 31.688 36.3809 31.0297 36.2737Z" fill="#0194E2"/> | |
| <path d="M53.3416 30.9053H49.6402L54.7139 7.59616H58.4153Z" fill="#0194E2"/> | |
| <path d="M71.8067 16.4766C68.5762 14.2161 64.1778 14.6606 61.4649 17.5216C58.7519 20.3826 58.5416 24.7984 60.9703 27.9043L63.3952 26.1244C62.1915 24.6312 61.9471 22.5815 62.7658 20.8471C63.5845 19.1127 65.3224 17.9987 67.2402 17.979V19.8737Z" fill="#43C9ED"/> | |
| <path d="M62.6179 29.4717C65.8484 31.7322 70.2468 31.2877 72.9597 28.4267C75.6727 25.5657 75.883 21.1499 73.4543 18.044L71.0294 19.8239C72.2331 21.3171 72.4775 23.3668 71.6588 25.1012C70.8401 26.8356 69.1022 27.9496 67.1844 27.9693V26.0746Z" fill="#0194E2"/> | |
| <path d="M78.0919 15.4928H82.1359L82.9588 26.1053L88.7177 15.4928L92.5569 15.5483L94.0651 26.1053L99.1387 15.4928L102.84 15.5483L95.1617 31.0412H91.4603L89.6765 19.9349L83.7818 31.0412H79.9426Z" fill="#0194E2"/> | |
| <path d="M105.072 15.7684H104.306V15.5024H106.151V15.7741H105.386V18.0172H105.072Z" fill="#0194E2"/> | |
| <path d="M106.614 15.5024H106.997L107.479 16.8421C107.541 17.0143 107.598 17.1904 107.657 17.3665H107.675C107.734 17.1904 107.788 17.0143 107.847 16.8421L108.325 15.5024H108.708V18.0172H108.41V16.6297C108.41 16.4096 108.434 16.1072 108.45 15.8832H108.434L108.243 16.4574L107.768 17.7608H107.56L107.079 16.4593L106.888 15.8852H106.873C106.89 16.1091 106.915 16.4115 106.915 16.6316V18.0191H106.624Z" fill="#0194E2"/> | |
| </svg> | |
| </span> | |
| <span>Tracing & Observability</span> | |
| </div> | |
| <span class="p-sub">Akt 1 · Beobachten</span> | |
| </div> | |
| <div class="trace" id="trace" aria-live="polite"> | |
| <div class="trace-empty" id="traceEmpty">Noch kein Run. Jeder Agenten-Schritt erscheint hier als Span – anklickbar für Input & Output.</div> | |
| </div> | |
| <div class="inspector" id="inspector"> | |
| <div class="insp-head"> | |
| <span class="i-title" id="inspTitle"></span> | |
| <span class="i-kind" id="inspKind"></span> | |
| <button class="i-close" id="inspClose" aria-label="Details schließen">✕</button> | |
| </div> | |
| <div id="inspBody"></div> | |
| </div> | |
| <div class="metrics"> | |
| <div class="metric"><div class="m-label">Spans</div><div class="m-val" id="mSpans">0</div></div> | |
| <div class="metric"><div class="m-label">Tokens</div><div class="m-val" id="mTokens">0</div></div> | |
| <div class="metric"><div class="m-label">Kosten</div><div class="m-val" id="mCost">0,000 €</div></div> | |
| <div class="metric"><div class="m-label">Flags</div><div class="m-val" id="mFlags">0</div></div> | |
| </div> | |
| </div> | |
| <!-- Rechte Spalte --> | |
| <div style="display:flex;flex-direction:column;gap:22px"> | |
| <!-- Blue-Guardrails-Panel --> | |
| <div class="panel" id="panelBG"> | |
| <div class="panel-head"> | |
| <div class="p-title"> | |
| <span class="logo-badge" aria-label="Blue Guardrails"> | |
| <span class="wordmark-fallback">Blue Guardrails</span> | |
| </span> | |
| <span>Halluzinations-Detektion</span> | |
| </div> | |
| <span class="p-sub">Akt 2 · Erkennen</span> | |
| </div> | |
| <div class="bg-body"> | |
| <div class="bg-waiting" id="bgWaiting">Wartet auf Traces … Jede Agenten-Antwort wird claim-für-claim gegen den Input-Kontext (den Vertrag) geprüft.</div> | |
| <div class="bg-answer" id="bgAnswer" style="display:none"></div> | |
| <div class="bg-verdict" id="bgVerdict" role="status"> | |
| <span class="v-label" id="vLabel"></span> | |
| <div id="vText"></div> | |
| <span class="src" id="vSrc"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HITL-Panel --> | |
| <div class="panel" id="panelHITL"> | |
| <div class="panel-head"> | |
| <div class="p-title"> | |
| <span class="logo-badge" aria-hidden="true" style="font-size:1.15rem">✋</span> | |
| <span>Human-in-the-Loop Gate</span> | |
| </div> | |
| <span class="p-sub">Akt 3 · Eingreifen</span> | |
| </div> | |
| <div class="hitl-body"> | |
| <div class="hitl-waiting" id="hitlWaiting">Kein Freigabe-Antrag. Monitoring ist <b>on the loop</b>; vor kritischen Aktionen wird der Mensch <b>in the loop</b> geholt.</div> | |
| <div class="approval" id="approval"> | |
| <div class="req"> | |
| <div class="r-tool" id="gTool"></div> | |
| <div class="r-amount" id="gAmount"></div> | |
| <div class="r-line" id="gLine"></div> | |
| <span class="r-flag" id="gBadge"></span> | |
| </div> | |
| <div class="gate-meta"> | |
| <div class="gate-meta-box"><span>Deine Rolle</span><b id="gRole">Supply Chain Manager</b></div> | |
| <div class="gate-meta-box"><span>Persönliches Limit</span><b id="gLimit">10 000 €</b></div> | |
| </div> | |
| <div class="gate-checks" id="gateChecks"></div> | |
| <div class="gate-reason"> | |
| <label for="decisionReason">Entscheidungsgrund auswählen</label> | |
| <select id="decisionReason"> | |
| <option value="">Bitte auswählen …</option> | |
| <option value="evidence_sufficient">Evidenz ausreichend</option> | |
| <option value="evidence_incomplete">Evidenz unvollständig</option> | |
| <option value="source_unreliable">Quelle nicht belastbar</option> | |
| <option value="action_disproportionate">Aktion unverhältnismäßig</option> | |
| <option value="manual_review">Manuelle Prüfung erforderlich</option> | |
| </select> | |
| </div> | |
| <div class="decide"> | |
| <button class="btn reject" id="btnReject" disabled>✕ Ablehnen</button> | |
| <button class="btn approve" id="btnApprove" disabled>✓ Freigeben</button> | |
| </div> | |
| <div class="second-approval" id="secondApproval"> | |
| <h4>Vier-Augen-Prinzip: zweite Freigabe erforderlich</h4> | |
| <p>Der Betrag liegt über dem persönlichen Limit. Die Ausführung bleibt blockiert, bis ein Supply Chain Director bestätigt.</p> | |
| <div class="second-actions"> | |
| <button class="micro-btn" id="btnDirectorReject" type="button">Zweite Freigabe verweigern</button> | |
| <button class="micro-btn primary" id="btnDirectorApprove" type="button">Director bestätigt</button> | |
| </div> | |
| </div> | |
| <div class="decision-note rejected" id="noteReject"></div> | |
| <div class="decision-note approved" id="noteApprove"></div> | |
| <div class="hitl-explainer"><b>On the loop:</b> laufend beobachten. <b>In the loop:</b> vor der Aktion aktiv entscheiden.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="decision-summary" id="decisionSummary"> | |
| <span class="eyebrow">Dein Entscheidungsprofil</span> | |
| <h3 id="summaryTitle">Run abgeschlossen</h3> | |
| <div class="summary-grid"> | |
| <div class="summary-item"><span>Finale Entscheidung</span><b id="summaryDecision">–</b></div> | |
| <div class="summary-item"><span>Begründung</span><b id="summaryReason">–</b></div> | |
| </div> | |
| <div class="summary-change" id="summaryChange"></div> | |
| </div> | |
| <div class="compare-ready" id="compareReady"> | |
| <div><strong>Beide 18 000-€-Runs absolviert.</strong><p>Jetzt wird sichtbar, warum nicht die Aktion, sondern ihre Evidenzlage entscheidet.</p></div> | |
| <button class="btn small" id="btnCompareReady" type="button">Direktvergleich öffnen</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ BACKEND (echtes System) ============ --> | |
| <section id="backend" class="soft"> | |
| <div class="wrap"> | |
| <span class="eyebrow">Das echte System dahinter · Hands-on</span> | |
| <h2>Vier Agenten. Ein Trace-Baum.</h2> | |
| <p class="lead">Oben im Kontrollraum klickst du durch die Choreografie – hier steht das echte System dahinter: Im Live-Pfad für Szenario B orchestriert pi die Agenten, OpenTelemetry zeichnet jeden Schritt auf, Blue Guardrails prüft kritische Claims und Mailentwürfe gegen die Quellen, das Gate hält Aktionen an – und MLflow macht den gesamten Ablauf sichtbar.</p> | |
| <div class="be-system" aria-label="Technische Systemarchitektur vom Request bis zur menschlichen Gate-Entscheidung"> | |
| <div class="be-system-head"> | |
| <div> | |
| <span class="be-system-kicker">Ein Request · drei Ebenen</span> | |
| <h3>Der Run läuft in pi. Die Extension beobachtet alles – und hält nur dort an, wo es kritisch wird.</h3> | |
| </div> | |
| <span class="be-run-badge">run-b-4711 · live trace</span> | |
| </div> | |
| <div class="be-lane"> | |
| <div class="be-lane-label"> | |
| <span class="lane-num">01</span> | |
| <strong>Runtime</strong> | |
| <small>pi.dev · ein Prozess</small> | |
| </div> | |
| <div class="be-runtime"> | |
| <div class="be-runtime-flow"> | |
| <div class="be-node"> | |
| <span class="node-tag">Anfrage</span> | |
| <strong>Szenario B</strong> | |
| <small>„Lieferung retten“</small> | |
| </div> | |
| <div class="be-arrow">→</div> | |
| <div class="be-node"> | |
| <span class="node-tag">Orchestrator</span> | |
| <strong>pi-Hauptsession</strong> | |
| <code>delegate</code> | |
| </div> | |
| <div class="be-arrow">→</div> | |
| <div class="be-agent-cluster" aria-label="Subagenten"> | |
| <div class="be-agent-mini"><b>anwalt</b><span>read_contract</span></div> | |
| <div class="be-agent-mini"><b>scout</b><span>get_weather</span></div> | |
| <div class="be-agent-mini hot"><b>macher</b><span>rebook_air_freight</span></div> | |
| </div> | |
| <div class="be-arrow">→</div> | |
| <div class="be-node critical"> | |
| <span class="node-tag">Kritischer Tool-Call</span> | |
| <strong>rebook_air_freight</strong> | |
| <small>18 000 € · approval_required</small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="be-lane"> | |
| <div class="be-lane-label"> | |
| <span class="lane-num">02</span> | |
| <strong>Extension</strong> | |
| <small>supply-chain.ts</small> | |
| </div> | |
| <div class="be-extension"> | |
| <div class="be-extension-grid"> | |
| <div class="be-ext-intro"> | |
| <strong>Die Extension sitzt quer über dem gesamten Run.</strong> | |
| <p>Sie ist kein weiterer Agent, sondern registriert Lifecycle-Hooks im selben Prozess.</p> | |
| </div> | |
| <div class="be-hook"><code>session / agent</code><span>OpenTelemetry-Spans erzeugen</span></div> | |
| <div class="be-hook"><code>llm / tool</code><span>Modell, Token und Latenz erfassen</span></div> | |
| <div class="be-hook hot"><code>tool_call</code><span>Blue-Guardrails-Check + Gate-Stopp</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="be-lane"> | |
| <div class="be-lane-label"> | |
| <span class="lane-num">03–06</span> | |
| <strong>Observe & Control</strong> | |
| <small>parallel zum Run</small> | |
| </div> | |
| <div class="be-destinations"> | |
| <div class="be-dest-grid"> | |
| <div class="be-dest mlflow"> | |
| <span class="be-dest-num">03</span> | |
| <span class="dest-tag">Observability</span> | |
| <h4>MLflow bekommt den Trace-Baum</h4> | |
| <p>OTLP bedeutet OpenTelemetry Protocol: ein offenes Trace-Format. Die Spans werden direkt an den nativen MLflow-Ingest geschickt – ohne separaten Collector.</p> | |
| <code>OTLP → /v1/traces</code> | |
| </div> | |
| <div class="be-dest bg"> | |
| <span class="be-dest-num">04</span> | |
| <span class="dest-tag">Issue Detection</span> | |
| <h4>Blue Guardrails prüft separat per REST</h4> | |
| <p>BG erhält nicht den OTLP-Trace: Bei Umbuchungen geht die Begründung, bei Kundeninfos der echte Mailentwurf plus Basis zusammen mit Vertrag, Wetter-, Warnungs- und Terminalkontext an die Issue Detection.</p> | |
| <code>POST /v1/evaluate</code> | |
| </div> | |
| <div class="be-dest gate"> | |
| <span class="be-dest-num">05</span> | |
| <span class="dest-tag">Live-Kontrolle</span> | |
| <h4>Gate-UI auf :8765</h4> | |
| <p>Label, Erklärung sowie Evaluation-/Conversation-ID kommen mit dem blockierten Tool-Call zum FastAPI-Gate. Die Conversation bleibt mit <code>store=true</code> im BG-Dashboard sichtbar.</p> | |
| <code>POST :8765/api/requests</code> | |
| </div> | |
| <div class="be-dest decision"> | |
| <span class="be-dest-num">06</span> | |
| <span class="dest-tag">Human Gate</span> | |
| <h4>Die Antwort löst den blockierten Run</h4> | |
| <div class="be-decision-chips"><span class="approve">✓ genehmigen</span><span class="reject">✕ ablehnen</span></div> | |
| <p>Die Entscheidung geht an den wartenden <code>tool_call</code> zurück. Danach läuft das Tool – oder der Agent plant neu. Gleichzeitig landet <code>human_gate_decision</code> als Assessment im Trace.</p> | |
| </div> | |
| </div> | |
| <div class="be-return">BG-Verdict + Freigabe oder Ablehnung zurück in denselben Run · Audit-Trail über run_id, evaluation_id und conversation_id</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="be-code-grid"> | |
| <div class="be-code"> | |
| <div class="hd">Ein Agent = eine Datei</div> | |
| <pre><span class="c-dim">---</span> | |
| name: anwalt | |
| tools: read_contract | |
| model: deepseek/deepseek-v4-flash | |
| <span class="c-dim">---</span> | |
| Du bist der Anwalt … | |
| <span class="c-gate">Nenne IMMER den einschlägigen Paragraphen | |
| und den konkreten Grenzwert.</span></pre> | |
| <div class="cap">Prompt-Version ist Deploy-Artefakt: v12 fabriziert, v13 korrigiert – dieselbe Rolle, eine Zeile Unterschied.</div> | |
| </div> | |
| <div class="be-code"> | |
| <div class="hd">Ein Run = ein Baum · MLflow Trace (Szenario B, echt)</div> | |
| <pre>orchestrator.run <span class="c-dim">run-b-… · Szenario B</span> | |
| ├─ anwalt.run <span class="c-model">deepseek-v4-flash</span> | |
| │ ├─ read_contract <span class="c-dim">contract_4711.pdf</span> | |
| │ └─ llm.request <span class="c-dim">1 842 tok</span> | |
| ├─ macher.run <span class="c-model">deepseek-v4-flash</span> | |
| │ └─ rebook_air_freight <span class="c-gate">⏸ GATE · 18 000 €</span> | |
| └─ assessment <span class="c-ok">human_gate_decision = rejected</span></pre> | |
| <div class="cap">Subagenten-Sessions erzeugen eigene Teilbäume – korreliert über die run_id.</div> | |
| </div> | |
| </div> | |
| <div class="punchline">Ein Run hat zwei sichtbare Seiten: <span class="accent">oben handelt das Agentensystem, darunter beobachten und kontrollieren Extension, MLflow und Human Gate</span> – verbunden über dieselbe run_id.</div> | |
| </div> | |
| </section> | |
| <!-- ============ GOVERNANCE ============ --> | |
| <section id="governance" class="soft"> | |
| <div class="wrap"> | |
| <span class="eyebrow">Warum das Governance ist</span> | |
| <h2>Drei Akte, drei Fähigkeiten – Grundlage für einen kontrollierbaren Produktivbetrieb.</h2> | |
| <p class="lead">Autonomie ohne Aufsicht ist keine Effizienz, sondern ein Risiko mit guter Laune. Der Showcase zeigt eine zentrale Governance-Kette für agentische Systeme – ergänzt um Rollen, Limits, Datenqualität, Security und Betriebsprozesse:</p> | |
| <div class="takeaway"> | |
| <div class="take"> | |
| <div class="t-act">Akt 1 · Beobachten</div> | |
| <h3>Jeder Schritt ein Span</h3> | |
| <p>Ohne Tracing ist ein Multi-Agent-System eine Blackbox aus LLM-Calls. Verschachtelte Traces zeigen, wer wann was mit welchen Argumenten getan hat – inklusive Tokens, Kosten und Latenz pro Agent.</p> | |
| <div class="who">Werkzeug: MLflow Tracing (OpenTelemetry)</div> | |
| </div> | |
| <div class="take"> | |
| <div class="t-act">Akt 2 · Erkennen</div> | |
| <h3>Claims gegen den Kontext</h3> | |
| <p>Der Anwalt-Agent klingt überzeugend – und zitiert eine Klausel, die es nicht gibt. Vor der kritischen Aktion prüft ein separater REST-Call den Claim beziehungsweise Mailentwurf gegen Vertrag und Live-Lage und markiert genau den erfundenen Satz. Ohne Prüfung potenziert sich der Fehler: falsche Schlussfolgerung → falscher Tool-Call.</p> | |
| <div class="who">Werkzeug: Blue Guardrails Issue Detection · POST /v1/evaluate</div> | |
| </div> | |
| <div class="take"> | |
| <div class="t-act">Akt 3 · Eingreifen</div> | |
| <h3>Das Gate vor der Aktion</h3> | |
| <p>Detektion allein blockt nicht. Kritische Tools pausieren den Run und verlangen menschliche Freigabe. Die Entscheidung landet als Assessment am Trace – und macht den Eingriff auditierbar.</p> | |
| <div class="who">Werkzeug: Approval-pflichtige Tool-Calls + MLflow Feedback</div> | |
| </div> | |
| </div> | |
| <div class="punchline">Detektion allein blockt nicht – erst <span class="accent">Beobachten + Erkennen + Eingreifen</span> macht Agenten beherrschbar.</div> | |
| </div> | |
| </section> | |
| <!-- ============ TOOLING ============ --> | |
| <section id="tooling"> | |
| <div class="wrap"> | |
| <span class="eyebrow">Das Tooling dahinter</span> | |
| <h2>Ein Run. Zwei Kontrollpfade.</h2> | |
| <p class="lead">Die Agenten laufen in pi.dev. OpenTelemetry sendet den Trace-Baum per OTLP an MLflow; parallel prüft ein separater REST-Call den kritischen Claim oder Mailentwurf mit Quellenkontext bei Blue Guardrails. Beide Befunde treffen im Human-Gate zusammen.</p> | |
| <div class="tool-grid"> | |
| <div class="tool-card ml"> | |
| <div class="tool-ring" aria-hidden="true"></div> | |
| <div class="tool-eyebrow">Observability-Backend · Open Source</div> | |
| <div class="tool-logo" aria-label="MLflow"> | |
| <svg viewBox="0 0 109 40" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"> | |
| <path d="M0 31.0316V15.5024H3.54258V17.4699C4.43636 15.8756 6.38278 15.045 8.13589 15.045C10.178 15.045 11.9636 15.9713 12.7943 17.7895C14.0096 15.7474 15.8278 15.045 17.8373 15.045C20.6469 15.045 23.3263 16.8325 23.3263 20.9493V31.0316H19.7531V21.5541C19.7531 19.7359 18.8268 18.3636 16.7522 18.3636C14.8057 18.3636 13.5292 19.8947 13.5292 21.8086V31.0297H9.89282V21.5541C9.89282 19.7684 8.99522 18.3732 6.88995 18.3732C4.91292 18.3732 3.66699 19.8412 3.66699 21.8182V31.0392Z" fill="#ffffff"/> | |
| <path d="M27.8546 31.0316V7.92917H31.5579V31.0316Z" fill="#ffffff"/> | |
| <path d="M30.0708 39.4871C30.9033 39.7187 31.6517 39.8699 33.2402 39.8699C36.1933 39.8699 39.6765 38.2048 40.5933 33.5311L44.3789 14.7923H50.0076L50.6947 11.6746H45.0086L45.7741 7.95023C46.3598 5.05837 47.9598 3.59234 50.5282 3.59234C51.1962 3.59234 51.0086 3.64975 51.6038 3.76267L52.4268 0.570327C51.6344 0.333006 50.9244 0.191379 49.378 0.191379C47.7454 0.166831 46.1514 0.688934 44.8497 1.67463C43.4086 2.78851 42.4574 4.42487 42.023 6.53779L40.9569 11.6746H35.9234L35.5119 14.7943H40.3349L36.8593 32.1206C36.4765 34.0861 35.3588 36.4364 32.1512 36.4364C31.4239 36.4364 31.688 36.3809 31.0297 36.2737Z" fill="#0194E2"/> | |
| <path d="M53.3416 30.9053H49.6402L54.7139 7.59616H58.4153Z" fill="#0194E2"/> | |
| <path d="M71.8067 16.4766C68.5762 14.2161 64.1778 14.6606 61.4649 17.5216C58.7519 20.3826 58.5416 24.7984 60.9703 27.9043L63.3952 26.1244C62.1915 24.6312 61.9471 22.5815 62.7658 20.8471C63.5845 19.1127 65.3224 17.9987 67.2402 17.979V19.8737Z" fill="#43C9ED"/> | |
| <path d="M62.6179 29.4717C65.8484 31.7322 70.2468 31.2877 72.9597 28.4267C75.6727 25.5657 75.883 21.1499 73.4543 18.044L71.0294 19.8239C72.2331 21.3171 72.4775 23.3668 71.6588 25.1012C70.8401 26.8356 69.1022 27.9496 67.1844 27.9693V26.0746Z" fill="#0194E2"/> | |
| <path d="M78.0919 15.4928H82.1359L82.9588 26.1053L88.7177 15.4928L92.5569 15.5483L94.0651 26.1053L99.1387 15.4928L102.84 15.5483L95.1617 31.0412H91.4603L89.6765 19.9349L83.7818 31.0412H79.9426Z" fill="#0194E2"/> | |
| <path d="M105.072 15.7684H104.306V15.5024H106.151V15.7741H105.386V18.0172H105.072Z" fill="#0194E2"/> | |
| <path d="M106.614 15.5024H106.997L107.479 16.8421C107.541 17.0143 107.598 17.1904 107.657 17.3665H107.675C107.734 17.1904 107.788 17.0143 107.847 16.8421L108.325 15.5024H108.708V18.0172H108.41V16.6297C108.41 16.4096 108.434 16.1072 108.45 15.8832H108.434L108.243 16.4574L107.768 17.7608H107.56L107.079 16.4593L106.888 15.8852H106.873C106.89 16.1091 106.915 16.4115 106.915 16.6316V18.0191H106.624Z" fill="#0194E2"/> | |
| </svg> | |
| </div> | |
| <div class="tool-sub">Das Gedächtnis des Systems: jeder Run vollständig nachvollziehbar.</div> | |
| <ul> | |
| <li>Verschachtelte Traces über Orchestrator, Subagenten und Domain-Tools</li> | |
| <li>Modell-, Token- und Laufzeitinformationen pro Span</li> | |
| <li>Inputs und Outputs für Agenten- und Tool-Schritte nachvollziehbar</li> | |
| <li>Feedback/Assessments: menschliche Entscheidungen landen am Trace</li> | |
| </ul> | |
| <span class="act-ref">Trägt Akt 1 + Akt 3</span> | |
| </div> | |
| <div class="tool-card bgc"> | |
| <div class="tool-ring" aria-hidden="true"></div> | |
| <div class="tool-eyebrow">Halluzinations-Spezialist · AI made in EU</div> | |
| <div class="tool-logo" aria-label="Blue Guardrails"> | |
| <span class="wordmark-fallback">Blue Guardrails</span> | |
| </div> | |
| <div class="tool-sub">Der Faktenprüfer: kritische Claims und Mailentwürfe gegen den vollständigen Quellenkontext.</div> | |
| <ul> | |
| <li>Claim-level Detektion: markiert den erfundenen Satz, nicht nur die Antwort</li> | |
| <li>Labels & Erklärungen: z. B. <code>fabrication</code> oder <code>context_misattribution</code></li> | |
| <li>Separater REST-Call an <code>/v1/evaluate</code> – kein OTLP-Trace-Fan-out</li> | |
| <li>PlaceboBench: Fabrikation ist der häufigste Fehlertyp (34 %, n = 433, 12 LLMs)</li> | |
| </ul> | |
| <span class="act-ref">Trägt Akt 2</span> | |
| </div> | |
| </div> | |
| <div class="ops-panel prompt-experiment"> | |
| <span class="eyebrow" style="margin-bottom:8px">Prompt-Experiment</span> | |
| <h3>Warum halluziniert Szenario B?</h3> | |
| <p>Der Unterschied zwischen Halluzination und belastbarer Antwort liegt oft in einer einzigen Prompt-Zeile. Szenario B läuft mit v12, Szenario C mit v13.</p> | |
| <div class="prompt-switch"> | |
| <button class="prompt-btn active" data-prompt="v12" type="button">v12 · riskant</button> | |
| <button class="prompt-btn" data-prompt="v13" type="button">v13 · evidenzgebunden</button> | |
| </div> | |
| <div class="prompt-code" id="promptCode">Nenne IMMER den einschlägigen Paragraphen und den konkreten Grenzwert.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ OPERATIONS ============ --> | |
| <!-- ============ DEBRIEF ============ --> | |
| <section id="debrief"> | |
| <div class="wrap"> | |
| <div class="debrief"> | |
| <span class="eyebrow" style="color:#ff9b72">Workshop-Debrief</span> | |
| <h2>Nicht das Selbstbewusstsein des Agenten entscheidet. Die Evidenz entscheidet.</h2> | |
| <p>Tracing macht Handlungen sichtbar. Guardrails prüfen Claims. Policies und menschliche Freigaben verhindern, dass ein erkannter Fehler trotzdem zur echten Aktion wird.</p> | |
| <div class="debrief-actions"> | |
| <button class="btn" id="btnRestartAll" type="button">Challenge neu starten</button> | |
| <button class="btn ghost" id="btnDebriefCompare" type="button">18 000-€-Fälle vergleichen</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="wrap"> | |
| <span>© 2026 valantic · Agentic AI & Multi-Agent Systems</span> | |
| <span>Agent-Steering · Hands-on Webinar</span> | |
| </div> | |
| </footer> | |
| <div class="presenter-dock" aria-hidden="true"><span><kbd>1–3</kbd> Szenario</span><span><kbd>Space</kbd> Schritt</span><span><kbd>A</kbd> Auto</span><span><kbd>C</kbd> Vergleich</span><span><kbd>F</kbd> Vollbild</span><span><kbd>P</kbd> Modus</span></div> | |
| <!-- Vergleichs-Modal --> | |
| <div class="modal" id="compareModal" role="dialog" aria-modal="true" aria-labelledby="compareTitle"> | |
| <div class="modal-card"> | |
| <div class="modal-head"><div><h2 id="compareTitle">Gleiche Aktion. Gleicher Betrag. Andere Evidenz.</h2><p>Der direkte Vergleich der beiden Challenge-Runs.</p></div><button class="modal-close" data-close="compareModal" aria-label="Vergleich schließen">✕</button></div> | |
| <div class="modal-body"> | |
| <div class="compare-grid"> | |
| <div class="compare-cell compare-head"></div><div class="compare-cell compare-head">Szenario B</div><div class="compare-cell compare-head">Szenario C</div> | |
| <div class="compare-cell compare-label">Aktion</div><div class="compare-cell">Luftfracht buchen</div><div class="compare-cell">Luftfracht buchen</div> | |
| <div class="compare-cell compare-label">Kosten</div><div class="compare-cell">18 000 €</div><div class="compare-cell">18 000 €</div> | |
| <div class="compare-cell compare-label">Vertragsbasis</div><div class="compare-cell cell-bad">Erfundener §7 Abs. 3</div><div class="compare-cell cell-good">Belegter §5 Abs. 3</div> | |
| <div class="compare-cell compare-label">Live-Signal</div><div class="compare-cell">38,4 °C Hitzewarnung</div><div class="compare-cell">6 h Kühlunterbrechung</div> | |
| <div class="compare-cell compare-label">Guardrail</div><div class="compare-cell cell-bad">Fabrikation</div><div class="compare-cell cell-good">Verified</div> | |
| <div class="compare-cell compare-label">Informierte Entscheidung</div><div class="compare-cell cell-bad">Ablehnen / prüfen</div><div class="compare-cell cell-good">Freigeben</div> | |
| </div> | |
| <div class="compare-punch">Nicht die Höhe der Ausgabe entscheidet. Nicht die Sicherheit des Agenten. <span style="color:#ff9670">Die Evidenzlage entscheidet.</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shadow-Run-Modal --> | |
| <div class="modal" id="shadowModal" role="dialog" aria-modal="true" aria-labelledby="shadowTitle"> | |
| <div class="modal-card" style="max-width:720px"> | |
| <div class="modal-head"><div><h2 id="shadowTitle">Was wäre ohne Gate passiert?</h2><p>Shadow-Simulation des Halluzinationsfalls.</p></div><button class="modal-close" data-close="shadowModal" aria-label="Shadow Run schließen">✕</button></div> | |
| <div class="modal-body"> | |
| <div class="shadow-timeline" id="shadowTimeline"> | |
| <div class="shadow-line"><span class="shadow-time">12:04:08</span><span class="shadow-dot"></span><div><strong>Tool-Call wird ausgelöst</strong><p>rebook_air_freight(#4711)</p></div></div> | |
| <div class="shadow-line danger"><span class="shadow-time">12:04:09</span><span class="shadow-dot"></span><div><strong>18 000 € werden verbindlich gebucht</strong><p>Aktion erfolgreich ausgeführt.</p></div></div> | |
| <div class="shadow-line"><span class="shadow-time">12:04:11</span><span class="shadow-dot"></span><div><strong>Guardrail-Ergebnis trifft ein</strong><p>Fabrikation in §7 Abs. 3 erkannt.</p></div></div> | |
| <div class="shadow-line danger"><span class="shadow-time">12:04:11</span><span class="shadow-dot"></span><div><strong>Zu spät zum Blockieren</strong><p>Der Fehler ist sichtbar – aber die Aktion bereits abgeschlossen.</p></div></div> | |
| </div> | |
| <div class="shadow-conclusion" id="shadowConclusion">Detektiert heißt nicht verhindert.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| (function(){ | |
| const $ = id => document.getElementById(id); | |
| const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| const wait = ms => new Promise(r => setTimeout(r, reduced ? 40 : ms)); | |
| /* ===================================================== | |
| VERTRAG (konsistent über alle Szenarien) | |
| §5 (1) Aktive Kühlung 2–8 °C (2) Monitoring (3) Alternativbeförderung bei >4 h Unterbrechung | |
| §7 (1) Haftung CIP (2) Verzögerungen – KEIN Abs. 3, KEINE 25-°C-Klausel | |
| ===================================================== */ | |
| const CONTRACT_EXCERPT = | |
| '§5 Kühlkette\n' + | |
| '(1) Der Frachtführer stellt während des gesamten Transports eine aktive Kühlung von 2–8 °C sicher.\n' + | |
| '(2) Temperatur wird lückenlos aufgezeichnet (Data-Logger, 5-min-Intervall).\n' + | |
| '(3) Bei absehbarer Unterbrechung der aktiven Kühlung von mehr als 4 Stunden ist auf schnellstmögliche Alternativbeförderung umzustellen. Mehrkosten trägt der Frachtführer, sofern die Störung in seinem Verantwortungsbereich liegt.\n\n' + | |
| '§7 Haftung\n' + | |
| '(1) Es gelten die Incoterms 2020, Klausel CIP Singapur.\n' + | |
| '(2) Für Verzögerungen ohne Temperaturabweichung ist die Haftung auf die Fracht begrenzt.'; | |
| /* ===================================================== | |
| SZENARIEN – deklarative Drehbücher | |
| Action-Typen: log, act, agent, span, finish, tokens, | |
| bgAnswer, verdict, flags, gate | |
| ===================================================== */ | |
| const SCENARIOS = { | |
| routine: { | |
| title: 'Der Routinefall', | |
| revealTitle: 'Auflösung: Routinefall', | |
| weather: 'Wetterlage: unauffällig, 27 °C', | |
| intro: 'Warm-up: ein sauberer Durchlauf. Ziel – Traces lesen, Quellen prüfen und das Freigabeprinzip kennenlernen.', | |
| steps: [ | |
| { note:'Der Supply-Chain-Manager stellt eine Routineanfrage.', actions:[ | |
| {type:'act',n:1,mode:'active'}, | |
| {type:'log',html:'user_request: „Prüfe Sendung #4711 – Status & Handlungsbedarf?"'} | |
| ]}, | |
| { note:'Der Orchestrator zerlegt die Anfrage und delegiert an Anwalt und Scout.', actions:[ | |
| {type:'agent',id:'ag-orch'}, | |
| {type:'span',key:'orch',depth:0,name:'orchestrator.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Input',v:'„Prüfe Sendung #4711 – Status & Handlungsbedarf?"'},{h:'Plan',v:'1) Vertrag prüfen\n2) Wetter und Terminalstatus prüfen\n3) Folgehandlung ableiten'}]}, | |
| {type:'log',html:'<span class="a">orchestrator</span> → plan: anwalt + scout parallel, danach macher'} | |
| ]}, | |
| { note:'Der Anwalt liest den Vertrag. Der Tool-Output ist die belastbare Quelle.', actions:[ | |
| {type:'agent',id:'ag-anwalt'}, | |
| {type:'span',key:'anwalt',depth:1,name:'anwalt.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Auftrag',v:'Welche Bedingungen gelten für Temperatur, Monitoring und Haftung?'}]}, | |
| {type:'span',key:'t_contract',depth:2,name:'read_contract("contract_4711.pdf")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Input',v:'{ "file": "contract_4711.pdf", "sections": ["Kühlkette","Haftung"] }'},{h:'Output (Auszug)',v:CONTRACT_EXCERPT}]}, | |
| {type:'log',html:'<span class="a">anwalt</span> → read_contract("contract_4711.pdf")'} | |
| ]}, | |
| { note:'Das Modell fasst die belegten Vertragsbedingungen zusammen.', actions:[ | |
| {type:'finish',key:'t_contract',meta:'412 ms'}, | |
| {type:'span',key:'llm1',depth:2,name:'llm.request',kind:'k-llm',kindLabel:'LLM',detail:[{h:'System',v:'Antworte ausschließlich auf Basis des bereitgestellten Vertragstexts.'},{h:'Output',v:'Aktive Kühlung 2–8 °C nach §5 Abs. 1; Monitoring nach §5 Abs. 2; Incoterms CIP nach §7 Abs. 1.'},{h:'Usage',v:'1 512 tokens · 0,009 €'}]}, | |
| {type:'finish',key:'llm1',meta:'1 512 tok'}, | |
| {type:'tokens',tokens:1512,cost:0.009}, | |
| {type:'finish',key:'anwalt',meta:'1,9 s'}, | |
| {type:'bgAnswer',speaker:'Antwort · Der Anwalt',parts:[{t:'Für #4711 gilt aktive Kühlung bei 2–8 °C nach §5 Abs. 1, '},{t:'mit lückenlosem Temperatur-Monitoring nach §5 Abs. 2.',claimKey:'c1'},{t:' Die Haftung folgt Incoterms CIP (§7 Abs. 1).'}]} | |
| ]}, | |
| { note:'Der Scout hält Wetter und operative Terminaldaten als getrennte Quellen fest.', actions:[ | |
| {type:'agent',id:'ag-scout'}, | |
| {type:'span',key:'scout',depth:1,name:'scout.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Auftrag',v:'Wetter und Terminalstatus für Singapur prüfen.'}]}, | |
| {type:'span',key:'t_weather',depth:2,name:'get_weather("Singapore")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output',v:'{ "temp_c": 27.3, "warning": null, "source": "Open-Meteo", "observed_at": "12:00Z" }'}]}, | |
| {type:'span',key:'t_terminal',depth:2,name:'terminal_feed("SGSIN")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output',v:'{ "status": "normal", "source": "Singapore Terminal Feed", "observed_at": "12:02Z" }'}]}, | |
| {type:'finish',key:'t_weather',meta:'238 ms'}, | |
| {type:'finish',key:'t_terminal',meta:'181 ms'}, | |
| {type:'tokens',tokens:890,cost:0.005}, | |
| {type:'finish',key:'scout',meta:'1,2 s'}, | |
| {type:'log',html:'<span class="a">scout</span> ✓ 27,3 °C · Terminalbetrieb normal',cls:'ok'}, | |
| {type:'act',n:1,mode:'done'}, | |
| {type:'evidence',status:'pending',source:'contract_4711.pdf · §5 / §7',claim:'2–8 °C, Monitoring und CIP',signal:'27,3 °C · Terminal normal',reason:'Kein akuter Handlungsbedarf',action:'Status-Mail an Kunden'} | |
| ]}, | |
| { note:'Blue Guardrails prüft die Claims gegen den Vertrag – alles ist gedeckt.', actions:[ | |
| {type:'act',n:2,mode:'active'}, | |
| {type:'log',html:'<span class="bgc">blue guardrails</span> ← prüfe Claims gegen input_context …'}, | |
| {type:'verdict',good:true,label:'✓ Verified',text:'Alle Claims sind durch contract_4711.pdf gedeckt. Keine Auffälligkeiten.',src:'source: contract_4711.pdf · issues: 0'}, | |
| {type:'evidence',status:'good',source:'§5 Abs. 1–2 · §7 Abs. 1',claim:'Claims wörtlich / semantisch gedeckt',signal:'Aktuelle Daten · 2 Quellen',reason:'Routinekommunikation plausibel',action:'Status-Mail · approval-pflichtig'}, | |
| {type:'act',n:2,mode:'done'} | |
| ]}, | |
| { note:'Außenkommunikation ist freigabepflichtig. Der Run pausiert vor dem Tool-Call.', actions:[ | |
| {type:'act',n:3,mode:'active'}, | |
| {type:'agent',id:'ag-macher'}, | |
| {type:'span',key:'macher',depth:1,name:'macher.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Empfehlung',v:'Status-Mail an Kunden senden.'}]}, | |
| {type:'gate',tool:'notify_customer(shipment="#4711")',amount:'Status-Mail an Kunden',line:'Entwurf: „Ihre Sendung #4711 ist planmäßig unterwegs. Kühlkette stabil bei 2–8 °C."',badge:{good:true,text:'✓ Claims belegt · Policy-Gate für Außenkommunikation'},role:'Supply Chain Manager',limit:'10 000 €',twoPerson:false,checks:[{state:'good',text:'Vertragsclaims belegt'},{state:'good',text:'Daten aktuell und quellengetrennt'},{state:'good',text:'Aktion reversibel: Entwurf vor Versand'},{state:'good',text:'Keine finanzielle Verpflichtung'}],approveNote:'<strong>Freigegeben.</strong> Die Status-Mail wird gesendet; Entscheidung und Begründung landen als Assessment am Trace.',rejectNote:'<strong>Abgelehnt.</strong> Die Nachricht bleibt im Entwurf; auch das Nein wird auditierbar dokumentiert.',approve:[{note:'Die Freigabe wird ausgeführt und am Trace dokumentiert.',actions:[{type:'finishGate',meta:'freigegeben'},{type:'log',html:'<span class="p">human</span> ✓ FREIGEGEBEN – notify_customer wird ausgeführt',cls:'p'},{type:'span',key:'t_mail',depth:2,name:'notify_customer → sent',kind:'k-tool',kindLabel:'TOOL',done:'0,6 s',detail:[{h:'Output',v:'{ "channel": "email", "status": "sent" }'}]},{type:'span',key:'ass',depth:1,name:'assessment: human_feedback = approved',kind:'k-hitl',kindLabel:'FEEDBACK',done:'am Trace',rowCls:'assessment',detail:[{h:'Assessment',v:'Menschliche Freigabe inkl. Begründung aus Kontrollraum-UI'}]},{type:'finish',key:'macher',meta:'abgeschlossen'}]}],reject:[{note:'Die Ablehnung stoppt die Kommunikation und bleibt nachvollziehbar.',actions:[{type:'finishGate',meta:'abgelehnt',cls:'flagged'},{type:'log',html:'<span class="p">human</span> ✕ ABGELEHNT – keine Kundeninfo',cls:'p'},{type:'span',key:'ass',depth:1,name:'assessment: human_feedback = rejected',kind:'k-hitl',kindLabel:'FEEDBACK',done:'am Trace',rowCls:'assessment',detail:[{h:'Assessment',v:'Ablehnung inkl. Begründung aus Kontrollraum-UI'}]},{type:'finish',key:'macher',meta:'gestoppt',cls:'flagged'}]}]} | |
| ]} | |
| ], | |
| outro:'Routinefall abgeschlossen: Beobachtbarkeit, Prüfung und Freigabe greifen ohne Reibungsverlust ineinander.' | |
| }, | |
| hallu: { | |
| title: 'Unklare Vertragslage', | |
| revealTitle: 'Auflösung: Die Halluzination', | |
| weather: 'Wetterlage: Hitzewelle, 38 °C', | |
| intro: 'Challenge B: Eine plausible Vertragsbegründung trifft auf echte Hitze. Die Auflösung bleibt bis nach deiner ersten Einschätzung verborgen.', | |
| steps: [ | |
| { note:'Gleiche Sendung, aber Singapur meldet eine Hitzewelle.', actions:[{type:'act',n:1,mode:'active'},{type:'log',html:'user_request: „Prüfe #4711 – besteht wegen der Hitze Handlungsbedarf?"'}]}, | |
| { note:'Der Orchestrator delegiert an Vertrag, Live-Daten und Aktion.', actions:[{type:'agent',id:'ag-orch'},{type:'span',key:'orch',depth:0,name:'orchestrator.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Plan',v:'anwalt + scout parallel → macher → policy gate'}]},{type:'log',html:'<span class="a">orchestrator</span> → anwalt + scout parallel, danach macher'}]}, | |
| { note:'Der Anwalt liest §5 und §7. Der Originaltext ist im Tool-Span sichtbar.', actions:[{type:'agent',id:'ag-anwalt'},{type:'span',key:'anwalt',depth:1,name:'anwalt.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Auftrag',v:'Temperaturauflagen beim Hafenumschlag prüfen.'}]},{type:'span',key:'t_contract',depth:2,name:'read_contract("contract_4711.pdf")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output (Originalquelle)',v:CONTRACT_EXCERPT}]},{type:'log',html:'<span class="a">anwalt</span> → read_contract("contract_4711.pdf")'}]}, | |
| { note:'Ein zu stark auf Konkretheit getrimmter Prompt erzeugt eine selbstsichere Klausel.', actions:[{type:'finish',key:'t_contract',meta:'412 ms'},{type:'span',key:'llm1',depth:2,name:'llm.request (kleines Modell)',kind:'k-llm',kindLabel:'LLM',detail:[{h:'System',v:'Nenne IMMER den einschlägigen Paragraphen und den konkreten Grenzwert.'},{h:'Output',v:'Laut §7 Abs. 3 gilt eine Obergrenze von 25 °C Außentemperatur beim Hafenumschlag; oberhalb muss der Spediteur eine Umbuchung anbieten.'},{h:'Usage',v:'1 842 tokens · 0,011 €'}]},{type:'finish',key:'llm1',meta:'1 842 tok'},{type:'tokens',tokens:1842,cost:0.011},{type:'finish',key:'anwalt',meta:'2,1 s'},{type:'bgAnswer',speaker:'Antwort · Der Anwalt',parts:[{t:'Der Rahmenvertrag regelt aktive Kühlung bei 2–8 °C. '},{t:'Laut §7 Abs. 3 gilt zudem eine Obergrenze von 25 °C beim Hafenumschlag; oberhalb muss der Spediteur eine Umbuchung anbieten.',claimKey:'c1'},{t:' Die Haftung folgt Incoterms CIP.'}]},{type:'log',html:'<span class="a">anwalt</span> ✓ Antwort mit §7 Abs. 3 und 25-°C-Grenze'}]}, | |
| { note:'Der Scout bestätigt echte Hitze. Wetter und Terminalstatus bleiben getrennte Quellen.', actions:[{type:'agent',id:'ag-scout'},{type:'span',key:'scout',depth:1,name:'scout.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Auftrag',v:'Wetter und operative Lage Singapur prüfen.'}]},{type:'span',key:'t_weather',depth:2,name:'get_weather("Singapore")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output',v:'{ "temp_c": 38.4, "warning": "heat_level_2", "source": "Open-Meteo", "observed_at": "12:00Z" }'}]},{type:'span',key:'t_terminal',depth:2,name:'terminal_feed("SGSIN")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output',v:'{ "status": "delays_expected", "source": "Singapore Terminal Feed", "observed_at": "12:02Z" }'}]},{type:'finish',key:'t_weather',meta:'238 ms'},{type:'finish',key:'t_terminal',meta:'192 ms'},{type:'tokens',tokens:1204,cost:0.007},{type:'finish',key:'scout',meta:'1,4 s'},{type:'log',html:'<span class="a">scout</span> ✓ 38,4 °C · Hitzewarnung · Verzögerungen erwartet',cls:'warn'}]}, | |
| { note:'Der Macher leitet daraus eine 18 000-€-Umbuchung ab. Noch ist kein Guardrail-Urteil sichtbar.', actions:[{type:'agent',id:'ag-macher'},{type:'span',key:'macher',depth:1,name:'macher.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Ableitung',v:'38,4 °C > behauptete 25-°C-Grenze → Luftfracht buchen.'},{h:'Vorgeschlagene Aktion',v:'rebook_air_freight(#4711) · 18 000 €'}]},{type:'log',html:'<span class="a">macher</span> → Empfehlung: rebook_air_freight(#4711) · 18 000 €'},{type:'act',n:1,mode:'done'},{type:'evidence',status:'pending',source:'contract_4711.pdf · §7 Haftung',claim:'„§7 Abs. 3 · 25-°C-Grenze"',signal:'38,4 °C · Terminal-Verzögerung',reason:'38,4 > 25 → Umbuchungspflicht',action:'Luftfracht · 18 000 €'}]}, | |
| { note:'Jetzt erst startet Akt 2: Der Claim wird gegen den Originalvertrag geprüft.', actions:[{type:'act',n:2,mode:'active'},{type:'log',html:'<span class="bgc">blue guardrails</span> ← prüfe Claims gegen input_context …'}]}, | |
| { note:'Reveal: §7 Abs. 3 existiert nicht. Ein unbelegter Claim hat die gesamte Kaskade kontaminiert.', actions:[{type:'flagClaim',claimKey:'c1'},{type:'verdict',good:false,label:'⚑ Fabrikation',text:'<strong>Nicht durch den Kontext gedeckt:</strong> §7 enthält keinen Abs. 3 und keine 25-°C-Klausel. Die Umbuchungspflicht ist erfunden.',src:'source: contract_4711.pdf · label: fabrication'},{type:'flags',n:1},{type:'finish',key:'anwalt',meta:'⚑ 1 claim',cls:'flagged'},{type:'evidence',status:'bad',source:'§7 enthält nur Abs. 1–2',claim:'Erfundener §7 Abs. 3',signal:'Echte Hitze, aber keine Vertragsgrenze',reason:'Fehler wird weitervererbt',action:'18 000-€-Tool-Call basiert auf Fabrikation',blast:'1 unbelegter Claim → 2 abhängige Schlussfolgerungen → 1 kostenpflichtige Tool-Aktion'},{type:'log',html:'<span class="bgc">blue guardrails</span> ⚑ FABRIKATION: §7 Abs. 3 / 25 °C nicht im Vertrag',cls:'err'},{type:'act',n:2,mode:'done'}]}, | |
| { note:'Das Gate stoppt die Aktion. Begründung, Limits und Vier-Augen-Prinzip werden sichtbar.', actions:[{type:'act',n:3,mode:'active'},{type:'gate',tool:'rebook_air_freight(shipment="#4711")',amount:'18 000 €',line:'Begründung: Überschreitung der angeblichen vertraglichen 25-°C-Grenze (§7 Abs. 3) bei 38,4 °C.',badge:{good:false,text:'⚑ Begründung stützt sich auf eine Fabrikation'},role:'Supply Chain Manager',limit:'10 000 €',twoPerson:true,checks:[{state:'bad',text:'Vertragsclaim nicht belegt'},{state:'good',text:'Wetter- und Terminaldaten aktuell'},{state:'warn',text:'Buchung nur eingeschränkt stornierbar'},{state:'warn',text:'18 000 € über persönlichem Limit'},{state:'warn',text:'Standardroute bleibt grundsätzlich möglich'}],approveNote:'<strong>Freigegeben.</strong> Nach zweiter Freigabe werden 18 000 € auf Basis einer erfundenen Klausel gebucht.',rejectNote:'<strong>Abgelehnt.</strong> Die Kaskade stoppt; der Orchestrator prüft den Vertrag mit evidenzgebundenem Prompt erneut.',approve:[{note:'Beide Freigaben liegen vor – die fehlerhafte Aktion wird trotzdem ausgeführt.',actions:[{type:'finishGate',meta:'2/2 freigegeben'},{type:'log',html:'<span class="p">human</span> ✓ ZWEIFACH FREIGEGEBEN – rebook_air_freight wird ausgeführt',cls:'p'},{type:'span',key:'t_rebook',depth:2,name:'rebook_air_freight → executed (18 000 €)',kind:'k-tool',kindLabel:'TOOL',done:'1,1 s',detail:[{h:'Output',v:'{ "cost_eur": 18000, "status": "booked", "basis": "fabricated clause" }'}]},{type:'span',key:'ass',depth:1,name:'assessment: approved despite fabrication',kind:'k-hitl',kindLabel:'FEEDBACK',done:'am Trace',rowCls:'assessment',detail:[{h:'Assessment',v:'Zwei Freigaben inkl. ausgewählter Begründung'}]},{type:'finish',key:'macher',meta:'abgeschlossen'}]}],reject:[{note:'Die Ablehnung stoppt die Kaskade und löst eine evidenzgebundene Neubewertung aus.',actions:[{type:'finishGate',meta:'abgelehnt',cls:'flagged'},{type:'log',html:'<span class="p">human</span> ✕ ABGELEHNT – geflaggte Vertragsbasis',cls:'p'},{type:'span',key:'ass',depth:1,name:'assessment: rejected (fabricated clause)',kind:'k-hitl',kindLabel:'FEEDBACK',done:'am Trace',rowCls:'assessment',detail:[{h:'Assessment',v:'Ablehnung inkl. ausgewählter Begründung'}]},{type:'span',key:'recheck',depth:1,name:'orchestrator → re-check with grounded prompt',kind:'k-agent',kindLabel:'AGENT',done:'geplant',detail:[{h:'Plan',v:'„Zitiere nur wörtlich belegbare Klauseln mit Fundstelle."'}]},{type:'finish',key:'macher',meta:'gestoppt',cls:'flagged'},{type:'shadowOffer'}]}]}]} | |
| ], | |
| outro:'Auflösung: Der Agent war überzeugend, die Quelle aber nicht. Detektion allein hätte die Buchung nicht verhindert – das Gate schon.' | |
| }, | |
| eskalation: { | |
| title: 'Kritischer Terminal-Alarm', | |
| revealTitle: 'Auflösung: Echte Eskalation', | |
| weather: 'Wetterlage: Extremhitze 41 °C, Kühlstrom gestört', | |
| intro: 'Challenge C: Wieder steht eine 18 000-€-Umbuchung im Raum. Diesmal muss die Evidenzkette den Ernstfall tragen.', | |
| steps: [ | |
| { note:'Der Run startet mit einem Alarm aus dem Terminal-Monitoring.', actions:[{type:'act',n:1,mode:'active'},{type:'log',html:'user_request: „Alarm für #4711 prüfen – Terminal meldet Kühlstörung."'}]}, | |
| { note:'Der Orchestrator priorisiert zunächst die Verifikation der Live-Lage.', actions:[{type:'agent',id:'ag-orch'},{type:'span',key:'orch',depth:0,name:'orchestrator.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Plan',v:'1) Live-Lage verifizieren\n2) Kühlunterbrechungs-Klausel suchen\n3) Aktion ableiten'}]},{type:'log',html:'<span class="a">orchestrator</span> → scout zuerst, dann anwalt, dann macher'}]}, | |
| { note:'Zwei Quellen bestätigen Extremhitze und sechs Stunden Kühlstromausfall.', actions:[{type:'agent',id:'ag-scout'},{type:'span',key:'scout',depth:1,name:'scout.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Auftrag',v:'Wetter und Terminalstörung getrennt verifizieren.'}]},{type:'span',key:'t_weather',depth:2,name:'get_weather("Singapore")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output',v:'{ "temp_c": 41.2, "warning": "heat_level_3", "source": "Open-Meteo", "observed_at": "12:00Z" }'}]},{type:'span',key:'t_terminal',depth:2,name:'terminal_feed("SGSIN")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Output',v:'{ "status": "reefer_power_outage", "outage_estimate_h": 6, "source": "Singapore Terminal Feed", "observed_at": "12:02Z" }'}]},{type:'finish',key:'t_weather',meta:'305 ms'},{type:'finish',key:'t_terminal',meta:'221 ms'},{type:'tokens',tokens:1105,cost:0.006},{type:'finish',key:'scout',meta:'1,3 s'},{type:'log',html:'<span class="a">scout</span> ✓ 41,2 °C · Reefer-Landstrom ca. 6 h unterbrochen',cls:'warn'}]}, | |
| { note:'Der Anwalt sucht gezielt nach einer Klausel für Kühlunterbrechungen.', actions:[{type:'agent',id:'ag-anwalt'},{type:'span',key:'anwalt',depth:1,name:'anwalt.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Auftrag',v:'Klausel für Unterbrechung aktiver Kühlung finden.'}]},{type:'span',key:'t_contract',depth:2,name:'read_contract("contract_4711.pdf")',kind:'k-tool',kindLabel:'TOOL',detail:[{h:'Input',v:'{ "query": "Unterbrechung Kühlung" }'},{h:'Output (Originalquelle)',v:CONTRACT_EXCERPT}]},{type:'finish',key:'t_contract',meta:'398 ms'},{type:'log',html:'<span class="a">anwalt</span> → §5 Abs. 3 gefunden'}]}, | |
| { note:'Der evidenzgebundene Prompt zitiert §5 Abs. 3 wörtlich.', actions:[{type:'span',key:'llm1',depth:2,name:'llm.request',kind:'k-llm',kindLabel:'LLM',detail:[{h:'System',v:'Zitiere nur wörtlich belegbare Klauseln mit Fundstelle.'},{h:'Output',v:'§5 Abs. 3: Bei absehbarer Unterbrechung der aktiven Kühlung von mehr als 4 Stunden ist auf schnellstmögliche Alternativbeförderung umzustellen.'},{h:'Usage',v:'1 688 tokens · 0,010 €'}]},{type:'finish',key:'llm1',meta:'1 688 tok'},{type:'tokens',tokens:1688,cost:0.010},{type:'finish',key:'anwalt',meta:'2,0 s'},{type:'bgAnswer',speaker:'Antwort · Der Anwalt',parts:[{t:'Einschlägig ist §5 Abs. 3: '},{t:'Bei absehbarer Unterbrechung der aktiven Kühlung von mehr als 4 Stunden ist auf schnellstmögliche Alternativbeförderung umzustellen.',claimKey:'c1'},{t:' Die prognostizierten 6 Stunden überschreiten diese Schwelle.'}]},{type:'log',html:'<span class="a">anwalt</span> ✓ §5 Abs. 3 wörtlich zitiert'}]}, | |
| { note:'Der Macher empfiehlt dieselbe 18 000-€-Aktion wie in Szenario B – noch ohne Guardrail-Urteil.', actions:[{type:'agent',id:'ag-macher'},{type:'span',key:'macher',depth:1,name:'macher.run',kind:'k-agent',kindLabel:'AGENT',detail:[{h:'Ableitung',v:'6 h Kühlunterbrechung > 4-h-Schwelle aus §5 Abs. 3.'},{h:'Vorgeschlagene Aktion',v:'rebook_air_freight(#4711) · 18 000 € · Warenwert 240 000 €'}]},{type:'log',html:'<span class="a">macher</span> → Empfehlung: rebook_air_freight(#4711) · 18 000 €'},{type:'act',n:1,mode:'done'},{type:'evidence',status:'pending',source:'contract_4711.pdf · §5 Kühlkette',claim:'§5 Abs. 3 · Schwelle > 4 h',signal:'41,2 °C · 6 h Stromausfall',reason:'6 h > 4 h → Alternativbeförderung',action:'Luftfracht · 18 000 €'}]}, | |
| { note:'Akt 2 prüft die Vertragsaussage und die Schwelle gegen den Input-Kontext.', actions:[{type:'act',n:2,mode:'active'},{type:'log',html:'<span class="bgc">blue guardrails</span> ← prüfe Claims gegen input_context …'}]}, | |
| { note:'Reveal: Klausel und Schwelle sind belegt. Die Evidenzkette hält.', actions:[{type:'verdict',good:true,label:'✓ Verified',text:'§5 Abs. 3 ist korrekt zitiert; die 4-h-Schwelle steht im Vertrag. Die 6-h-Prognose stammt aus dem aktuellen Terminal-Feed.',src:'sources: contract_4711.pdf + Singapore Terminal Feed · issues: 0'},{type:'evidence',status:'good',source:'§5 Abs. 3 · Originalvertrag',claim:'> 4 h Kühlunterbrechung',signal:'6 h · aktueller Terminal-Feed',reason:'Schwelle nachweislich überschritten',action:'18 000 € schützen 240 000 € Warenwert'},{type:'log',html:'<span class="bgc">blue guardrails</span> ✓ 0 Issues – Claims und Fundstelle belegt',cls:'ok'},{type:'act',n:2,mode:'done'}]}, | |
| { note:'Das Gate bleibt trotzdem Pflicht: verifizierte Evidenz ersetzt keine Rollen- und Budgetkontrolle.', actions:[{type:'act',n:3,mode:'active'},{type:'gate',tool:'rebook_air_freight(shipment="#4711")',amount:'18 000 €',line:'Begründung: §5 Abs. 3 greift – prognostizierte Kühlunterbrechung 6 h > 4-h-Schwelle. Warenwert: 240 000 €.',badge:{good:true,text:'✓ Vertragsclaim und Live-Signal belegt'},role:'Supply Chain Manager',limit:'10 000 €',twoPerson:true,checks:[{state:'good',text:'§5 Abs. 3 im Vertrag belegt'},{state:'good',text:'Terminal-Feed aktuell und separat attribuiert'},{state:'warn',text:'Buchung nur eingeschränkt stornierbar'},{state:'warn',text:'18 000 € über persönlichem Limit'},{state:'good',text:'Schaden-Nutzen-Verhältnis: 18 000 € vs. 240 000 €'}],approveNote:'<strong>Freigegeben – und gut begründet.</strong> Nach zweiter Freigabe schützt die Umbuchung 240 000 € Warenwert auf verifizierter Basis.',rejectNote:'<strong>Abgelehnt.</strong> Die Evidenz ist belastbar; deshalb eskaliert der Orchestrator an das Bereitschaftsteam.',approve:[{note:'Beide Freigaben liegen vor. Die Umbuchung wird auf belegter Grundlage ausgeführt.',actions:[{type:'finishGate',meta:'2/2 freigegeben'},{type:'log',html:'<span class="p">human</span> ✓ ZWEIFACH FREIGEGEBEN – rebook_air_freight wird ausgeführt',cls:'p'},{type:'span',key:'t_rebook',depth:2,name:'rebook_air_freight → executed (18 000 €)',kind:'k-tool',kindLabel:'TOOL',done:'1,1 s',detail:[{h:'Output',v:'{ "cost_eur": 18000, "status": "booked", "basis": "§5 Abs. 3" }'}]},{type:'span',key:'t_mail',depth:2,name:'notify_customer → sent',kind:'k-tool',kindLabel:'TOOL',done:'0,5 s',detail:[{h:'Output',v:'{ "template": "escalation_rebooking", "status": "sent" }'}]},{type:'span',key:'ass',depth:1,name:'assessment: approved (verified basis)',kind:'k-hitl',kindLabel:'FEEDBACK',done:'am Trace',rowCls:'assessment',detail:[{h:'Assessment',v:'Zwei Freigaben inkl. ausgewählter Begründung'}]},{type:'finish',key:'macher',meta:'abgeschlossen'}]}],reject:[{note:'Das Nein wird dokumentiert und löst eine menschliche Eskalationskette aus.',actions:[{type:'finishGate',meta:'abgelehnt',cls:'flagged'},{type:'log',html:'<span class="p">human</span> ✕ ABGELEHNT – Bereitschaftsteam übernimmt',cls:'p'},{type:'span',key:'ass',depth:1,name:'assessment: rejected',kind:'k-hitl',kindLabel:'FEEDBACK',done:'am Trace',rowCls:'assessment',detail:[{h:'Assessment',v:'Ablehnung inkl. ausgewählter Begründung'}]},{type:'span',key:'escal',depth:1,name:'orchestrator → on-call escalation',kind:'k-agent',kindLabel:'AGENT',done:'benachrichtigt',detail:[{h:'Aktion',v:'Supply-Chain-Bereitschaft · SLA 30 min'}]},{type:'finish',key:'macher',meta:'gestoppt',cls:'flagged'}]}]}]} | |
| ], | |
| outro:'Auflösung: gleiche Aktion und gleicher Betrag wie zuvor – aber eine belastbare Evidence Chain. Governance prüft nicht nur das Ergebnis, sondern seine Grundlage.' | |
| } | |
| }; | |
| /* ===================================================== | |
| ENGINE | |
| ===================================================== */ | |
| const state = { | |
| scenario:null, stepIdx:0, playing:false, busy:false, | |
| awaitingGate:false, awaitingVote:false, finished:false, | |
| spans:0, tokens:0, cost:0, flags:0, | |
| spanEls:{}, gateData:null, autoTimer:null, | |
| preVote:null, finalDecision:null, decisionReason:'', firstApproval:false, | |
| completed:new Set(), results:{}, mode:'challenge' | |
| }; | |
| const REASON_LABELS = { | |
| evidence_sufficient:'Evidenz ausreichend', | |
| evidence_incomplete:'Evidenz unvollständig', | |
| source_unreliable:'Quelle nicht belastbar', | |
| action_disproportionate:'Aktion unverhältnismäßig', | |
| manual_review:'Manuelle Prüfung erforderlich', | |
| second_approval_denied:'Zweite Freigabe verweigert' | |
| }; | |
| const NEUTRAL_TITLES = { | |
| routine:'Routineprüfung', | |
| hallu:'Unklare Vertragslage', | |
| eskalation:'Kritischer Terminal-Alarm' | |
| }; | |
| /* ---------- Konsole ---------- */ | |
| function log(html, cls){ | |
| const c = $('console'); | |
| const empty = c.querySelector('.console-empty'); | |
| if(empty) empty.remove(); | |
| const t = new Date().toLocaleTimeString('de-DE'); | |
| const line = document.createElement('div'); | |
| line.innerHTML = '<span class="t">'+t+'</span> ' + (cls ? '<span class="'+cls+'">'+html+'</span>' : html); | |
| c.appendChild(line); | |
| c.scrollTop = c.scrollHeight; | |
| } | |
| /* ---------- Metriken ---------- */ | |
| function renderMetrics(){ | |
| $('mSpans').textContent = state.spans; | |
| $('mTokens').textContent = state.tokens.toLocaleString('de-DE'); | |
| $('mCost').textContent = state.cost.toLocaleString('de-DE',{minimumFractionDigits:3,maximumFractionDigits:3}) + ' €'; | |
| $('mFlags').textContent = state.flags; | |
| $('mFlags').classList.toggle('hot', state.flags > 0); | |
| } | |
| /* ---------- Trace & Inspector ---------- */ | |
| function addSpan(o){ | |
| const empty = $('traceEmpty'); | |
| if(empty) empty.remove(); | |
| state.spans++; | |
| const row = document.createElement('div'); | |
| row.className = 'span-row ' + (o.done ? 'ok' : 'running') + (o.rowCls ? ' '+o.rowCls : ''); | |
| row.innerHTML = | |
| '<span class="tree">' + ' '.repeat(o.depth*2) + (o.depth ? '└─' : '') + '</span>' + | |
| '<span class="s-state"></span>' + | |
| '<span class="s-name">' + o.name + '</span>' + | |
| '<span class="s-kind ' + (o.kind||'') + '">' + o.kindLabel + '</span>' + | |
| '<span class="s-meta">' + (o.done || o.meta || '…') + '</span>'; | |
| if(o.detail){ | |
| row.classList.add('clickable'); | |
| row.tabIndex = 0; | |
| row.setAttribute('role','button'); | |
| row.setAttribute('aria-label','Span-Details: '+o.name); | |
| const open = () => showInspector(o.name, o.kindLabel, o.detail, row); | |
| row.addEventListener('click', open); | |
| row.addEventListener('keydown', e => { if(e.key==='Enter'||e.key===' '){ e.preventDefault(); open(); }}); | |
| } | |
| $('trace').appendChild(row); | |
| state.spanEls[o.key] = row; | |
| if(GRAPH_KEYS.includes(o.key)) gWork(o.key, true); | |
| renderMetrics(); | |
| return row; | |
| } | |
| function finishSpan(key, meta, cls){ | |
| if(GRAPH_KEYS.includes(key)) gDone(key, cls === 'flagged'); | |
| const row = state.spanEls[key]; | |
| if(!row) return; | |
| row.classList.remove('running','ok','flagged'); | |
| row.classList.add(cls || 'ok'); | |
| if(meta) row.querySelector('.s-meta').textContent = meta; | |
| } | |
| function showInspector(name, kind, detail, row){ | |
| document.querySelectorAll('.span-row.sel').forEach(r => r.classList.remove('sel')); | |
| row.classList.add('sel'); | |
| $('inspTitle').textContent = name; | |
| $('inspKind').textContent = kind; | |
| $('inspBody').innerHTML = detail.map(d => '<div class="insp-sec"><div class="insp-h">'+d.h+'</div><pre class="insp-v"></pre></div>').join(''); | |
| $('inspBody').querySelectorAll('.insp-v').forEach((pre,i) => pre.textContent = detail[i].v); | |
| $('inspector').classList.add('show'); | |
| } | |
| $('inspClose').addEventListener('click', () => { | |
| $('inspector').classList.remove('show'); | |
| document.querySelectorAll('.span-row.sel').forEach(r => r.classList.remove('sel')); | |
| }); | |
| /* ---------- Agenten-Topologie ---------- */ | |
| function spotlightAgent(id){ | |
| ['ag-orch','ag-anwalt','ag-scout','ag-macher'].forEach(a => $(a).classList.toggle('live', a===id)); | |
| } | |
| const GRAPH_KEYS = ['orch','anwalt','scout','macher']; | |
| const AGENT_TO_KEY = {'ag-orch':'orch','ag-anwalt':'anwalt','ag-scout':'scout','ag-macher':'macher'}; | |
| function gWork(k, on){ const n=$('gn-'+k); if(n) n.classList.toggle('working',on); } | |
| function gEdge(k, on){ | |
| const e=$('edge-'+k), d=$('dotg-'+k); | |
| if(e) e.classList.toggle('hot',on); | |
| if(d) d.classList.toggle('on',on && !reduced); | |
| } | |
| function gDone(k, flagged){ | |
| const n=$('gn-'+k); if(!n) return; | |
| n.classList.remove('working'); | |
| n.classList.add(flagged ? 'flagged' : 'done'); | |
| gEdge(k,false); | |
| } | |
| function gReset(){ | |
| GRAPH_KEYS.forEach(k => { | |
| const n=$('gn-'+k); | |
| if(n) n.classList.remove('working','done','flagged'); | |
| gEdge(k,false); | |
| }); | |
| } | |
| /* ---------- Panels ---------- */ | |
| function setAct(n, mode){ | |
| const chip=$('chip'+n); | |
| chip.classList.remove('active','done'); | |
| if(mode) chip.classList.add(mode); | |
| const panels={1:'panelML',2:'panelBG',3:'panelHITL'}; | |
| Object.entries(panels).forEach(([k,p]) => $(p).classList.toggle('spot',+k===n && mode==='active')); | |
| } | |
| function renderBgAnswer(speaker, parts){ | |
| $('bgWaiting').style.display='none'; | |
| const box=$('bgAnswer'); | |
| box.style.display='block'; | |
| box.innerHTML='<span class="speaker"></span>'; | |
| box.querySelector('.speaker').textContent=speaker; | |
| parts.forEach(p => { | |
| const el=document.createElement('span'); | |
| if(p.claimKey){ el.className='claim'; el.id='claim-'+p.claimKey; } | |
| el.textContent=p.t; | |
| box.appendChild(el); | |
| }); | |
| } | |
| function renderVerdict(v){ | |
| const box=$('bgVerdict'); | |
| box.classList.remove('good'); | |
| if(v.good) box.classList.add('good'); | |
| $('vLabel').textContent=v.label; | |
| $('vText').innerHTML=v.text; | |
| $('vSrc').textContent=v.src; | |
| box.classList.add('show'); | |
| } | |
| function resetEvidence(){ | |
| $('evidenceStatus').className='evidence-status'; | |
| $('evidenceStatus').textContent='Wartet auf Run'; | |
| [['evSource','–'],['evClaim','–'],['evSignal','–'],['evReason','–'],['evAction','–']].forEach(([id,val]) => $(id).textContent=val); | |
| ['source','claim','signal','reason','action'].forEach(k => $('ev-'+k).classList.remove('good','bad','derived')); | |
| $('blastRadius').classList.remove('show'); | |
| $('blastRadius').textContent=''; | |
| } | |
| function renderEvidence(e){ | |
| const status=$('evidenceStatus'); | |
| status.className='evidence-status '+e.status; | |
| status.textContent=e.status==='good' ? 'Evidence verified' : e.status==='bad' ? 'Chain compromised' : 'Prüfung ausstehend'; | |
| $('evSource').textContent=e.source; | |
| $('evClaim').textContent=e.claim; | |
| $('evSignal').textContent=e.signal; | |
| $('evReason').textContent=e.reason; | |
| $('evAction').textContent=e.action; | |
| const nodes={source:$('ev-source'),claim:$('ev-claim'),signal:$('ev-signal'),reason:$('ev-reason'),action:$('ev-action')}; | |
| Object.values(nodes).forEach(n => n.classList.remove('good','bad','derived')); | |
| if(e.status==='good') Object.values(nodes).forEach(n => n.classList.add('good')); | |
| if(e.status==='pending'){ | |
| nodes.source.classList.add('good'); | |
| nodes.signal.classList.add('good'); | |
| nodes.claim.classList.add('derived'); | |
| nodes.reason.classList.add('derived'); | |
| nodes.action.classList.add('derived'); | |
| } | |
| if(e.status==='bad'){ | |
| nodes.source.classList.add('good'); | |
| nodes.signal.classList.add('good'); | |
| nodes.claim.classList.add('bad'); | |
| nodes.reason.classList.add('bad'); | |
| nodes.action.classList.add('bad'); | |
| } | |
| const blast=$('blastRadius'); | |
| if(e.blast){ blast.textContent=e.blast; blast.classList.add('show'); } | |
| else { blast.classList.remove('show'); blast.textContent=''; } | |
| } | |
| function renderGate(g){ | |
| state.gateData=g; | |
| state.awaitingGate=true; | |
| state.playing=false; | |
| state.firstApproval=false; | |
| clearTimeout(state.autoTimer); | |
| $('hitlWaiting').style.display='none'; | |
| $('gTool').textContent=g.tool; | |
| $('gAmount').textContent=g.amount; | |
| $('gLine').innerHTML=g.line; | |
| $('gRole').textContent=g.role || 'Supply Chain Manager'; | |
| $('gLimit').textContent=g.limit || '10 000 €'; | |
| const badge=$('gBadge'); | |
| badge.innerHTML=g.badge.text; | |
| badge.classList.toggle('good',!!g.badge.good); | |
| $('gateChecks').innerHTML=(g.checks||[]).map(c => '<div class="gate-check '+c.state+'">'+c.text+'</div>').join(''); | |
| $('noteApprove').innerHTML=g.approveNote; | |
| $('noteReject').innerHTML=g.rejectNote; | |
| $('noteApprove').classList.remove('show'); | |
| $('noteReject').classList.remove('show'); | |
| $('secondApproval').classList.remove('show'); | |
| $('decisionReason').value=''; | |
| $('decisionReason').disabled=false; | |
| $('btnApprove').disabled=true; | |
| $('btnReject').disabled=true; | |
| $('approval').classList.add('show'); | |
| $('panelHITL').classList.add('spot'); | |
| addSpan({key:'gate',depth:2,name:g.tool.split('(')[0]+' – APPROVAL REQUIRED',kind:'k-hitl',kindLabel:'GATE',meta:'pausiert',detail:[{h:'Policy',v:g.twoPerson ? 'approval_required + four_eyes' : 'approval_required'},{h:'Antrag',v:g.tool+'\n'+g.amount},{h:'Rolle / Limit',v:(g.role||'Supply Chain Manager')+' · '+(g.limit||'10 000 €')},{h:'Status',v:'Run pausiert – wartet auf begründete menschliche Entscheidung'}]}); | |
| log('<span class="p">gate</span> ⏸ Tool-Call blockiert – Entscheidung und Begründung erforderlich','p'); | |
| setDirector('⏸ Human Gate: Grund auswählen und entscheiden.'); | |
| updateButtons(); | |
| } | |
| function offerShadowRun(){ | |
| const box=$('noteReject'); | |
| if(box.querySelector('[data-shadow]')) return; | |
| const btn=document.createElement('button'); | |
| btn.type='button'; | |
| btn.className='btn ghost small'; | |
| btn.dataset.shadow='true'; | |
| btn.style.marginTop='12px'; | |
| btn.textContent='Was wäre ohne Gate passiert?'; | |
| btn.addEventListener('click',openShadowRun); | |
| box.appendChild(document.createElement('br')); | |
| box.appendChild(btn); | |
| } | |
| /* ---------- Action-Interpreter ---------- */ | |
| async function exec(a){ | |
| switch(a.type){ | |
| case 'log': log(a.html,a.cls); break; | |
| case 'act': setAct(a.n,a.mode); break; | |
| case 'agent': { | |
| spotlightAgent(a.id); | |
| const k=AGENT_TO_KEY[a.id]; | |
| if(k){ gWork('orch',true); if(k!=='orch'){ gWork(k,true); gEdge(k,true); } } | |
| break; | |
| } | |
| case 'span': addSpan(a); break; | |
| case 'finish': finishSpan(a.key,a.meta,a.cls); break; | |
| case 'finishGate': finishSpan('gate',a.meta,a.cls); break; | |
| case 'tokens': state.tokens+=a.tokens; state.cost+=a.cost; renderMetrics(); break; | |
| case 'flags': state.flags=a.n; renderMetrics(); break; | |
| case 'bgAnswer': renderBgAnswer(a.speaker,a.parts); break; | |
| case 'flagClaim': { const c=$('claim-'+a.claimKey); if(c) c.classList.add('flag'); break; } | |
| case 'verdict': renderVerdict(a); break; | |
| case 'evidence': renderEvidence(a); break; | |
| case 'gate': renderGate(a); break; | |
| case 'shadowOffer': offerShadowRun(); break; | |
| } | |
| } | |
| async function playStep(step){ | |
| state.busy=true; | |
| setDirector(step.note); | |
| for(const a of step.actions){ | |
| await exec(a); | |
| if(!state.awaitingGate && !state.awaitingVote) await wait(150); | |
| } | |
| state.busy=false; | |
| } | |
| /* ---------- Steuerung ---------- */ | |
| function setDirector(text){ | |
| const sc=SCENARIOS[state.scenario]; | |
| const total=sc ? sc.steps.length : 0; | |
| $('dStep').textContent=state.finished ? 'Ende' : (state.scenario ? 'Schritt '+Math.min(state.stepIdx,total)+'/'+total : '–'); | |
| $('dNote').textContent=text; | |
| const progress=state.scenario ? Math.min(100,(state.stepIdx/Math.max(1,total))*100) : 0; | |
| $('progressBar').style.width=progress+'%'; | |
| } | |
| function compareAvailable(){ return state.completed.has('hallu') && state.completed.has('eskalation'); } | |
| function updateButtons(){ | |
| const waiting=state.awaitingGate || state.awaitingVote; | |
| const canStep=state.scenario && !state.busy && !waiting && !state.finished && state.stepIdx<SCENARIOS[state.scenario].steps.length; | |
| $('btnStep').disabled=!canStep; | |
| $('btnAuto').disabled=!state.scenario || state.finished || waiting; | |
| $('btnAuto').textContent=state.playing ? '⏸ Pause' : '▶ Auto abspielen'; | |
| $('btnReset').disabled=!state.scenario; | |
| $('btnCompare').disabled=!compareAvailable(); | |
| $('compareReady').classList.toggle('show',compareAvailable()); | |
| } | |
| async function stepOnce(){ | |
| const sc=SCENARIOS[state.scenario]; | |
| if(!sc || state.busy || state.awaitingGate || state.awaitingVote || state.stepIdx>=sc.steps.length) return; | |
| const step=sc.steps[state.stepIdx]; | |
| state.stepIdx++; | |
| updateButtons(); | |
| await playStep(step); | |
| if(!state.awaitingGate && !state.awaitingVote && state.stepIdx>=sc.steps.length && !state.gateData) finishRun(); | |
| updateButtons(); | |
| } | |
| function autoLoop(){ | |
| if(!state.playing) return; | |
| if(state.awaitingGate || state.awaitingVote || state.finished){ state.playing=false; updateButtons(); return; } | |
| stepOnce().then(() => { | |
| if(state.playing && !state.awaitingGate && !state.awaitingVote && !state.finished) state.autoTimer=setTimeout(autoLoop,reduced?180:1250); | |
| else updateButtons(); | |
| }); | |
| } | |
| function toggleAuto(){ | |
| if(!state.scenario || state.finished || state.awaitingGate || state.awaitingVote) return; | |
| state.playing=!state.playing; | |
| updateButtons(); | |
| if(state.playing) autoLoop(); else clearTimeout(state.autoTimer); | |
| } | |
| function selectedReason(){ return $('decisionReason').value; } | |
| async function decide(approved){ | |
| if(!state.awaitingGate || !state.gateData || !selectedReason()) return; | |
| state.decisionReason=selectedReason(); | |
| if(approved && state.gateData.twoPerson){ | |
| state.firstApproval=true; | |
| $('btnApprove').disabled=true; | |
| $('btnReject').disabled=true; | |
| $('decisionReason').disabled=true; | |
| $('secondApproval').classList.add('show'); | |
| finishSpan('gate','1/2 freigegeben'); | |
| log('<span class="p">human</span> ✓ erste Freigabe erteilt · Grund: '+REASON_LABELS[state.decisionReason],'p'); | |
| setDirector('⏸ Erste Freigabe liegt vor. Supply Chain Director muss bestätigen.'); | |
| return; | |
| } | |
| await finalizeDecision(approved); | |
| } | |
| async function directorDecision(approved){ | |
| if(!state.awaitingGate || !state.firstApproval) return; | |
| if(!approved) state.decisionReason='second_approval_denied'; | |
| log('<span class="p">director</span> '+(approved?'✓ zweite Freigabe erteilt':'✕ zweite Freigabe verweigert'),'p'); | |
| await finalizeDecision(approved); | |
| } | |
| async function finalizeDecision(approved){ | |
| if(!state.awaitingGate || !state.gateData) return; | |
| state.awaitingGate=false; | |
| state.finalDecision=approved ? 'approve' : 'reject'; | |
| $('btnApprove').disabled=true; | |
| $('btnReject').disabled=true; | |
| $('decisionReason').disabled=true; | |
| $('secondApproval').classList.remove('show'); | |
| $(approved ? 'noteApprove' : 'noteReject').classList.add('show'); | |
| log('<span class="p">assessment</span> rationale = '+(REASON_LABELS[state.decisionReason]||state.decisionReason),'p'); | |
| const branch=state.gateData[approved ? 'approve' : 'reject']; | |
| for(const step of branch){ await playStep(step); await wait(550); } | |
| finishRun(); | |
| } | |
| function renderDecisionSummary(){ | |
| const decision=state.finalDecision==='approve' ? 'Freigegeben' : state.finalDecision==='reject' ? 'Abgelehnt' : '–'; | |
| const reason=REASON_LABELS[state.decisionReason] || '–'; | |
| $('summaryTitle').textContent=SCENARIOS[state.scenario].revealTitle; | |
| $('summaryDecision').textContent=decision; | |
| $('summaryReason').textContent=reason; | |
| $('summaryChange').textContent=''; | |
| $('decisionSummary').classList.add('show'); | |
| } | |
| function finishRun(){ | |
| if(state.finished) return; | |
| state.finished=true; | |
| state.playing=false; | |
| clearTimeout(state.autoTimer); | |
| finishSpan('orch',(10+Math.round(state.tokens/400))+',8 s · '+state.tokens.toLocaleString('de-DE')+' tok'); | |
| setAct(3,'done'); | |
| ['panelML','panelBG','panelHITL'].forEach(p => $(p).classList.remove('spot')); | |
| spotlightAgent(null); | |
| const sc=SCENARIOS[state.scenario]; | |
| state.completed.add(state.scenario); | |
| state.results[state.scenario]={vote:state.preVote,decision:state.finalDecision,reason:state.decisionReason,flags:state.flags}; | |
| const card=document.querySelector('.scen[data-scen="'+state.scenario+'"]'); | |
| if(card){ card.classList.add('completed'); card.querySelector('h3').textContent=sc.revealTitle; const note=card.querySelector('.spoiler-note'); if(note) note.textContent='Auflösung sichtbar'; } | |
| log('run beendet · '+state.tokens.toLocaleString('de-DE')+' Tokens · '+state.cost.toLocaleString('de-DE',{minimumFractionDigits:3})+' € · '+state.flags+' Flag(s) · menschliche Entscheidung dokumentiert'); | |
| setDirector(sc.outro); | |
| renderDecisionSummary(); | |
| updateButtons(); | |
| } | |
| /* ---------- Reset & Szenariowahl ---------- */ | |
| function resetStage(){ | |
| clearTimeout(state.autoTimer); | |
| Object.assign(state,{stepIdx:0,playing:false,busy:false,awaitingGate:false,awaitingVote:false,finished:false,spans:0,tokens:0,cost:0,flags:0,spanEls:{},gateData:null,preVote:null,finalDecision:null,decisionReason:'',firstApproval:false}); | |
| renderMetrics(); | |
| $('trace').innerHTML='<div class="trace-empty" id="traceEmpty">Noch kein Run. Jeder Agenten-Schritt erscheint hier als Span – anklickbar für Input & Output.</div>'; | |
| $('inspector').classList.remove('show'); | |
| [1,2,3].forEach(n => $('chip'+n).classList.remove('active','done')); | |
| ['panelML','panelBG','panelHITL'].forEach(p => $(p).classList.remove('spot')); | |
| $('bgWaiting').style.display=''; | |
| $('bgAnswer').style.display='none'; | |
| $('bgAnswer').innerHTML=''; | |
| $('bgVerdict').classList.remove('show','good'); | |
| $('hitlWaiting').style.display=''; | |
| $('approval').classList.remove('show'); | |
| $('noteApprove').classList.remove('show'); | |
| $('noteReject').classList.remove('show'); | |
| $('secondApproval').classList.remove('show'); | |
| $('decisionReason').disabled=false; | |
| $('decisionReason').value=''; | |
| $('decisionSummary').classList.remove('show'); | |
| spotlightAgent(null); | |
| gReset(); | |
| resetEvidence(); | |
| $('console').innerHTML='<span class="console-empty">– Konsole bereit. –</span>'; | |
| $('progressBar').style.width='0%'; | |
| updateButtons(); | |
| } | |
| function selectScenario(key,scroll=false){ | |
| if(!SCENARIOS[key]) return; | |
| state.scenario=key; | |
| resetStage(); | |
| document.querySelectorAll('.scen').forEach(b => { | |
| const on=b.dataset.scen===key; | |
| b.classList.toggle('active',on); | |
| b.setAttribute('aria-pressed',on); | |
| }); | |
| const sc=SCENARIOS[key]; | |
| $('stripWeather').innerHTML='<b>'+sc.weather.split(':')[0]+':</b>'+sc.weather.split(':').slice(1).join(':'); | |
| setDirector(sc.intro); | |
| log('szenario geladen: „'+sc.title+'" · '+sc.steps.length+' Schritte.'); | |
| updateButtons(); | |
| if(scroll) $('kontrollraum').scrollIntoView({behavior:reduced?'auto':'smooth',block:'start'}); | |
| } | |
| function clearAllProgress(){ | |
| state.completed.clear(); | |
| state.results={}; | |
| document.querySelectorAll('.scen').forEach(b => { | |
| const key=b.dataset.scen; | |
| b.classList.remove('completed'); | |
| b.querySelector('h3').textContent=NEUTRAL_TITLES[key]; | |
| const note=b.querySelector('.spoiler-note'); | |
| if(note) note.textContent=key==='routine'?'Auflösung nach dem Run':'Auflösung nach deiner Erstentscheidung'; | |
| }); | |
| selectScenario('hallu',true); | |
| } | |
| /* ---------- Modus, Vollbild, Modals ---------- */ | |
| function setMode(mode,scroll=true){ | |
| state.mode=mode; | |
| document.body.classList.toggle('presenter',mode==='presenter'); | |
| const mc=$('modeChallenge'),mp=$('modePresenter'); | |
| if(mc) mc.classList.toggle('active',mode==='challenge'); | |
| if(mp) mp.classList.toggle('active',mode==='presenter'); | |
| try{ | |
| const url=new URL(window.location.href); | |
| if(mode==='presenter') url.searchParams.set('mode','presenter'); else url.searchParams.delete('mode'); | |
| history.replaceState(null,'',url); | |
| }catch(_){ /* data/file preview contexts may have an opaque origin */ } | |
| if(mode==='presenter' && !state.scenario) selectScenario('hallu',false); | |
| if(scroll) (mode==='presenter' ? $('kontrollraum') : $('top')).scrollIntoView({behavior:reduced?'auto':'smooth',block:'start'}); | |
| } | |
| async function toggleFullscreen(){ | |
| try{ | |
| if(!document.fullscreenElement) await document.documentElement.requestFullscreen(); | |
| else await document.exitFullscreen(); | |
| }catch(err){ log('Vollbild konnte vom Browser nicht aktiviert werden.','warn'); } | |
| } | |
| function openModal(id){ $(id).classList.add('show'); document.body.style.overflow='hidden'; } | |
| function closeModal(id){ $(id).classList.remove('show'); if(!document.querySelector('.modal.show')) document.body.style.overflow=''; } | |
| function openCompare(){ openModal('compareModal'); } | |
| function openShadowRun(){ | |
| openModal('shadowModal'); | |
| const lines=[...document.querySelectorAll('#shadowTimeline .shadow-line')]; | |
| lines.forEach(l => l.classList.remove('on')); | |
| $('shadowConclusion').classList.remove('show'); | |
| lines.forEach((line,i) => setTimeout(() => line.classList.add('on'),reduced?20:i*650)); | |
| setTimeout(() => $('shadowConclusion').classList.add('show'),reduced?80:lines.length*650+120); | |
| } | |
| /* ---------- Operations & Architektur ---------- */ | |
| const PROMPTS={ | |
| v12:'Nenne IMMER den einschlägigen Paragraphen und den konkreten Grenzwert.', | |
| v13:'Zitiere nur wörtlich belegbare Klauseln mit Fundstelle. Kennzeichne fehlende Evidenz ausdrücklich.' | |
| }; | |
| /* ---------- Events ---------- */ | |
| document.querySelectorAll('.scen').forEach(b => b.addEventListener('click',() => selectScenario(b.dataset.scen,false))); | |
| $('btnStep').addEventListener('click',stepOnce); | |
| $('btnAuto').addEventListener('click',toggleAuto); | |
| $('btnReset').addEventListener('click',() => selectScenario(state.scenario,false)); | |
| $('btnApprove').addEventListener('click',() => decide(true)); | |
| $('btnReject').addEventListener('click',() => decide(false)); | |
| $('btnDirectorApprove').addEventListener('click',() => directorDecision(true)); | |
| $('btnDirectorReject').addEventListener('click',() => directorDecision(false)); | |
| $('decisionReason').addEventListener('change',() => { | |
| const enabled=state.awaitingGate && !!selectedReason() && !state.firstApproval; | |
| $('btnApprove').disabled=!enabled; | |
| $('btnReject').disabled=!enabled; | |
| }); | |
| $('btnCompare').addEventListener('click',openCompare); | |
| $('btnCompareReady').addEventListener('click',openCompare); | |
| $('btnDebriefCompare').addEventListener('click',openCompare); | |
| $('btnFullscreen').addEventListener('click',toggleFullscreen); | |
| $('btnStartChallenge').addEventListener('click',() => { setMode('challenge',false); selectScenario('hallu',true); }); | |
| $('btnRestartAll').addEventListener('click',clearAllProgress); | |
| document.querySelectorAll('[data-close]').forEach(b => b.addEventListener('click',() => closeModal(b.dataset.close))); | |
| document.querySelectorAll('.modal').forEach(m => m.addEventListener('click',e => { if(e.target===m) closeModal(m.id); })); | |
| document.querySelectorAll('.prompt-btn').forEach(b => b.addEventListener('click',() => { | |
| document.querySelectorAll('.prompt-btn').forEach(x => x.classList.toggle('active',x===b)); | |
| $('promptCode').textContent=PROMPTS[b.dataset.prompt]; | |
| })); | |
| document.addEventListener('keydown',e => { | |
| if(e.key==='Escape'){ | |
| document.querySelectorAll('.modal.show').forEach(m => closeModal(m.id)); | |
| return; | |
| } | |
| if(['BUTTON','A','INPUT','TEXTAREA','SELECT'].includes(e.target.tagName) || e.target.closest('.span-row')) return; | |
| const k=e.key.toLowerCase(); | |
| if(k==='p'){ setMode(state.mode==='presenter'?'challenge':'presenter'); return; } | |
| if(k==='f'){ toggleFullscreen(); return; } | |
| if(k==='c' && compareAvailable()){ openCompare(); return; } | |
| if(['1','2','3'].includes(e.key)){ selectScenario({1:'routine',2:'hallu',3:'eskalation'}[e.key],false); return; } | |
| if(!state.scenario) return; | |
| if(e.key===' ' || e.key==='ArrowRight'){ e.preventDefault(); stepOnce(); } | |
| if(k==='a') toggleAuto(); | |
| if(k==='r') selectScenario(state.scenario,false); | |
| }); | |
| resetEvidence(); | |
| const initialMode=new URL(window.location.href).searchParams.get('mode')==='presenter' ? 'presenter' : 'challenge'; | |
| setMode(initialMode,false); | |
| setDirector('Wähle ein Szenario – danach steuerst du den Run Schritt für Schritt oder per Auto-Play.'); | |
| updateButtons(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |