/* Design-Tokens 1:1 aus docs/prototyp.html. Skins: indigo (Standard), gold, f4p. Hell/Dunkel über data-theme. */
:root{
  --bg-d:#0b0d17; --surface-d:#131627; --card-d:#1b1f36; --muted-d:#9aa0bd; --acc-d:#818cf8; --accd-d:#6366f1;
  --bg-l:#f3f4fa; --surface-l:#ffffff; --card-l:#ffffff; --muted-l:#5d6385; --acc-l:#4f46e5; --accd-l:#4338ca;
  --f-d:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --f-b:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --bg:var(--bg-d); --surface:var(--surface-d); --card:var(--card-d); --muted:var(--muted-d);
  --accent:var(--acc-d); --accent-deep:var(--accd-d); --on-accent:#ffffff;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.18); --fg:#eef0fa;
  --go:#34c38f; --wait:#f2c230; --stop:#ef5a43; --shadow:rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-skin="gold"]{
  --bg-d:#0d0c0a; --surface-d:#171512; --card-d:#221f19; --muted-d:#a9a293; --acc-d:#dba934; --accd-d:#b07e1e;
  --bg-l:#f7f5f0; --surface-l:#ffffff; --card-l:#ffffff; --muted-l:#6b6456; --acc-l:#8a5f0f; --accd-l:#a8771a;
}
:root[data-skin="f4p"]{
  --bg-d:#050b16; --surface-d:#0b1628; --card-d:#122240; --muted-d:#8fa3bf; --acc-d:#34c6f4; --accd-d:#0e6fae;
  --bg-l:#f2f6fb; --surface-l:#ffffff; --card-l:#ffffff; --muted-l:#50627d; --acc-l:#043970; --accd-l:#043970;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:var(--bg-l); --surface:var(--surface-l); --card:var(--card-l); --muted:var(--muted-l);
  --accent:var(--acc-l); --accent-deep:var(--accd-l);
  --line:rgba(20,24,60,.10); --line-strong:rgba(20,24,60,.22); --fg:#14172b;
  --go:#1f9d6e; --wait:#c99a06; --stop:#d6402b; --shadow:rgba(20,24,60,.18); color-scheme:light; } }
:root[data-theme="light"]{
  --bg:var(--bg-l); --surface:var(--surface-l); --card:var(--card-l); --muted:var(--muted-l);
  --accent:var(--acc-l); --accent-deep:var(--accd-l);
  --line:rgba(20,24,60,.10); --line-strong:rgba(20,24,60,.22); --fg:#14172b;
  --go:#1f9d6e; --wait:#c99a06; --stop:#d6402b; --shadow:rgba(20,24,60,.18); color-scheme:light; }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-b);font-size:14px;line-height:1.5}
::selection{background:var(--accent);color:var(--on-accent)}
button{font:inherit;color:inherit}
h1{font-family:var(--f-d);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.15;margin:0;text-wrap:balance}

/* Verbindungsanzeige: grün = verbunden, gelb = verbinde neu */
.conn{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.conn::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wait)}
.conn[data-state="on"]::before{background:var(--go)}