/* Single light look by choice: brand clip that must look identical for every viewer. */
:root{
  --pg:#F2F6F9; --ink:#22292F; --muted:#66747F; --line:#DCE4EA; --praxis:#3D5F7A;
  --navy:#22384B; --canvas:#F6F9FB;
  --red:#C2434F; --orange:#C27A2C; --green:#3E9364; --teal:#2E8A87;
  --f-display:'Manrope','DM Sans',system-ui,sans-serif;
  --f-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--pg);color:var(--ink)}
body{font-family:var(--f-ui)}
.page{max-width:820px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}
h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(26px,5vw,36px);letter-spacing:-.04em;line-height:1.1}
h1 b{color:var(--praxis);font-weight:800}
.sub{margin:4px 0 0;color:var(--muted);font-size:16px}
#viewport{position:relative;width:100%;aspect-ratio:5/4;border-radius:clamp(12px,2.4vw,24px);overflow:hidden;box-shadow:0 18px 50px rgba(34,56,75,.12),0 0 0 1px var(--line)}
#stage{position:absolute;left:0;top:0;width:1000px;height:800px;transform-origin:0 0;background:var(--canvas);overflow:hidden}
.ctrl{display:flex;align-items:center;gap:12px}
.ctrl button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--praxis);display:grid;place-items:center;cursor:pointer;flex:none}
.ctrl input{flex:1;accent-color:var(--praxis);min-width:0}
.ctrl span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;min-width:44px;text-align:right}

/* ---- card chrome ---- */
.bar{position:absolute;left:0;top:0;right:0;height:112px;background:var(--navy);display:flex;align-items:center;padding:0 40px}
.logo{position:relative;width:64px;height:64px;border-radius:16px;background:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:42px;color:var(--praxis);line-height:1;padding-bottom:8px}
.logo i{position:absolute;right:12px;bottom:13px;width:9px;height:9px;border-radius:50%;background:#4F84AE}
.tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:14px}
.tab{position:relative;width:64px;height:64px;border-radius:16px;display:grid;place-items:center}
.tab svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab.on{background:#fff}.tab.on svg{stroke:var(--navy)}
.badge{position:absolute;right:2px;top:2px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font:700 15px/26px var(--f-ui);text-align:center;box-shadow:0 0 0 3px var(--navy)}
.body{position:absolute;inset:0;background-image:radial-gradient(#D6E0E8 1.4px,transparent 1.6px);background-size:28px 28px;background-position:14px 14px}
#layer{position:absolute;left:0;right:0;top:56px;bottom:56px}

/* ---- caption: one short line naming the current step ---- */
.cap{position:absolute;left:40px;top:22px;height:40px}
.cap span{position:absolute;left:0;top:0;white-space:nowrap;font:700 27px/40px var(--f-display);letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:12px}
.cap span::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--praxis);box-shadow:0 0 0 5px #DCE8F1}

/* ---- cards (graphic style of the reference: labelled header strip, coloured border, ports, wires) ---- */
.card{position:absolute;border-radius:20px;border:2.5px solid var(--b);background:#F9FBFC;box-shadow:0 12px 34px rgba(34,41,47,.08)}
.card>.h{display:flex;align-items:center;justify-content:space-between;background:var(--hb);color:var(--lc);font:700 18px/1 var(--f-ui);letter-spacing:.08em;padding:14px 22px 12px;border-radius:17px 17px 0 0;transition:none}
.card>.c{padding:22px 26px 26px}
.k-a{--b:#9CBCD4;--hb:#E1ECF4;--lc:#3D5F7A;--pc:#3D5F7A}
.k-n{--b:#DCE4EA;--hb:#EDF1F4;--lc:#6B7A87;--pc:#7C8A96}
.k-r{--b:#E5A3AA;--hb:#FBECEE;--lc:#C2434F;--pc:#C2434F}
.k-g{--b:#9FD0B3;--hb:#E8F4ED;--lc:#2F7A50;--pc:#3E9364}
.k-t{--b:#94CDCA;--hb:#E3F3F2;--lc:#2E8A87;--pc:#2E8A87}
.port{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 4px #F9FBFC;z-index:3}
.port.l{left:-12.5px}.port.r{right:-12.5px}
svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.wire{fill:none;stroke-width:5;stroke-linecap:round}
.pulse{fill:none;stroke:#4FCB86;stroke-width:7;stroke-linecap:round}
.av{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#DCE8F1;color:var(--praxis);font:700 17px/1 var(--f-ui)}
.av.j{background:#E3F3F2;color:var(--teal)} .av.l{background:#F3ECDF;color:#9A6A12}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;background:var(--praxis);color:#fff;font:600 20px/1 var(--f-ui);padding:13px 20px}
.field{display:flex;align-items:center;min-height:50px;border:2px solid var(--line);border-radius:12px;background:#fff;padding:0 14px;font-size:22px}
.caret{display:inline-block;width:2px;height:26px;background:var(--praxis);margin-left:2px}
.lbl{font:600 15px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.lbl:first-child{margin-top:0}

/* ---- cursor ---- */
#cursor{position:absolute;left:0;top:0;z-index:20;pointer-events:none}
#cursor svg{width:34px;height:34px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.22));transform-origin:4px 3px}
#rip{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:3px solid #4F84AE}
.msgs{position:absolute;left:24px;right:24px;top:70px;bottom:96px;display:flex;flex-direction:column;gap:16px}
.q{align-self:flex-end;max-width:80%;background:var(--praxis);color:#fff;font-size:21px;line-height:1.35;padding:14px 18px;border-radius:18px 18px 4px 18px}
.dots{display:flex;gap:7px;padding:16px 18px;background:#fff;border:1.5px solid var(--line);border-radius:18px 18px 18px 4px;align-self:flex-start}
.dots i{width:10px;height:10px;border-radius:50%;background:#9CBCD4}
.a{position:relative;align-self:flex-start;max-width:96%;background:#fff;border:1.5px solid var(--line);font-size:21px;line-height:1.6;padding:14px 18px;border-radius:18px 18px 18px 4px}
mark{color:inherit;padding:2px 4px;border-radius:6px;background:linear-gradient(#CDEBE9,#CDEBE9) no-repeat 0 0/0% 100%}
.ref{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:6px;border-radius:8px;background:var(--teal);color:#fff;font:700 16px/1 var(--f-ui);vertical-align:2px}
.inp{position:absolute;left:24px;right:24px;bottom:24px;display:flex;gap:12px;align-items:center}
.inp .field{flex:1;position:relative;font-size:20px;white-space:nowrap;overflow:hidden}
.ph{position:absolute;left:16px;color:#9AA7B2}
.send{width:50px;height:50px;border-radius:12px;background:var(--praxis);display:grid;place-items:center;flex:none}
.send svg{width:24px;height:24px;fill:#fff}
.doc{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600}
.doc svg{flex:none;width:28px;height:28px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round}
.pg{font-size:16px;color:var(--muted);margin:6px 0 16px}
.ln{height:11px;border-radius:6px;background:#E6ECF0;margin:11px 0}
.hl{font-size:18px;font-weight:600;padding:7px 10px;margin:10px -10px;border-radius:8px;background:linear-gradient(#CDEBE9,#CDEBE9) no-repeat 0 0/0% 100%}
/* Früher style-Attribute im HTML: hier im CSS, damit die CSP ohne 'unsafe-inline' auskommt */
#chat{left:40px;top:90px;width:540px;height:520px}
#src{left:640px;top:180px;width:320px}
.ln.w92{width:92%}.ln.w84{width:84%}.ln.w70{width:70%}.ln.w56{width:56%}

@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-latin-variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/dm-sans-latin-variable.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
.page{max-width:none;padding:0;gap:0}.page>div:first-child,.ctrl{display:none}#viewport{width:100%;border-radius:0;box-shadow:none}html,body{height:100%;overflow:hidden}