/* Datendrehscheibe — Integrations-Hub (Demo, fiktiver Betrieb, Beispieldaten).
   Designgroesse exakt 1280 x 800 CSS-px; index.js skaliert die Buehne (.stage)
   per transform auf den verfuegbaren Platz. Kein Seiten-Scroll.
   Schriften: Inter (Variable, aus ../solaris) + Fragment Mono (aus ../obsidian),
   beide same-origin, keine externen Requests. */

/* ── Schriften ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../solaris/schrift/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../solaris/schrift/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fragment Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../obsidian/schrift/4iCr6K5wfMRRjxp0DA6-2CLnB41HhrUI.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fragment Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../obsidian/schrift/4iCr6K5wfMRRjxp0DA6-2CLnB4NHhg.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Farbwelt ──────────────────────────────────────────────────────────────
   Ein Signal (Limette) fuer "Daten fliessen / alles gut", Bernstein fuer
   "neuer Versuch", Rot fuer "Stoerung". Jedes System hat einen eigenen,
   gleich hellen Pastellton — Pakete tragen die Farbe ihrer Herkunft. */
:root{
  --bg:#06080C;
  --canvas:#090C11;
  --panel:#0B0F15;
  --panel-2:#10151D;
  --panel-3:#151C26;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.22);
  --ink:#EEF2F6;
  --ink-2:#C4CDD8;
  --muted:#8C97A7;
  --lime:#C6F45C;
  --lime-08:rgba(198,244,92,.08);
  --lime-16:rgba(198,244,92,.16);
  --amber:#FFB23F;
  --red:#FF6B6B;
  --c-alt:#E6DAC0;
  --c-hub:#C6F45C;
  --c-shop:#F59AC8;
  --c-lager:#6FCFEE;
  --c-buha:#A2ABFF;
  --c-bank:#5FDEB2;
  --c-crm:#DCCB8F;
  --term:#8DF7AE;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'Fragment Mono',ui-monospace,'Cascadia Mono',Consolas,'SFMono-Regular',monospace;
}
.c-alt{--c:var(--c-alt)} .c-hub{--c:var(--c-hub)} .c-shop{--c:var(--c-shop)}
.c-lager{--c:var(--c-lager)} .c-buha{--c:var(--c-buha)} .c-bank{--c:var(--c-bank)} .c-crm{--c:var(--c-crm)}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{
  font:13px/1.4 var(--sans); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  font-feature-settings:'cv05','cv08','ss03';
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
button:focus-visible,.node:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
svg{display:block}
h1,h2,h3,p,ol,dl,dd{margin:0;padding:0}

/* ── Buehne ─────────────────────────────────────────────────────────────── */
.stage{
  position:absolute; left:0; top:0; width:1280px; height:800px;
  transform-origin:0 0; overflow:hidden;
  display:grid; grid-template-rows:64px minmax(0,1fr);
  background:var(--bg);
}

/* ── Kopfleiste ────────────────────────────────────────────────────────── */
.bar{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:18px;
  padding:0 16px 0 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0C1016 0%,#080B0F 100%);
}
.brand{display:flex;align-items:center;gap:12px;width:268px;flex:none}
.logo{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;color:var(--lime);
  background:radial-gradient(circle at 30% 22%,rgba(198,244,92,.26),rgba(198,244,92,.05) 70%);
  border:1px solid rgba(198,244,92,.28);
  box-shadow:0 0 24px -6px rgba(198,244,92,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.logo svg{width:22px;height:22px}
.brand-tx{min-width:0}
.brand-name{display:block;font-size:15.5px;font-weight:680;letter-spacing:-.015em;line-height:1.15}
.brand-co{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.fict{
  font-size:10px;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:99px;padding:1px 7px;
}

.kpis{display:flex;align-items:stretch;margin:0 auto;height:40px}
.kpi{display:flex;flex-direction:column;justify-content:center;padding:0 18px;border-left:1px solid var(--line);min-width:0}
.kpi:first-child{border-left:0}
.kl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.kv{font-size:19px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.kv small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:3px}
.kpi.k-conn .kv b{font-weight:620;color:var(--lime)}
.kpi.k-conn.warn .kv b{color:var(--amber)}
.kpi.k-err .kv{color:var(--ink)}
.kpi.k-err.on .kv{color:var(--red)}
.kpi.k-save .kv{color:var(--lime)}
.kn{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:1px}

.bar-r{display:flex;align-items:center;gap:10px;flex:none}
.live{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;
  border:1px solid var(--line-2);border-radius:99px;font-size:12px;font-weight:600;color:var(--ink-2);
}
.live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,244,92,.15),0 0 10px var(--lime);animation:blink 2s ease-in-out infinite}
.live time{font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px;
  border-radius:9px;font-size:12.5px;font-weight:620;letter-spacing:-.005em;white-space:nowrap;
  border:1px solid var(--line-2);background:rgba(255,255,255,.035);color:var(--ink);
  transition:background-color .15s,border-color .15s,transform .12s,box-shadow .2s,opacity .2s;
}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn:hover{background:rgba(255,255,255,.07);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.38;cursor:default;transform:none}
.btn.primary{
  background:linear-gradient(180deg,#D3FA74,#B4E445);color:#0D1405;border-color:transparent;
  box-shadow:0 8px 22px -12px rgba(198,244,92,.9),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary:hover{background:linear-gradient(180deg,#DCFC85,#BDEB52)}
.btn.warn{color:#FFD08A;border-color:rgba(255,178,63,.32);background:rgba(255,178,63,.07)}
.btn.warn:hover{background:rgba(255,178,63,.13);border-color:rgba(255,178,63,.5)}
.btn.press{transform:scale(.96)}

/* ── Hauptbereich ──────────────────────────────────────────────────────── */
.main{display:grid;grid-template-columns:minmax(0,1fr) 372px;min-height:0}

/* ── Leinwand ──────────────────────────────────────────────────────────── */
.canvas{
  position:relative; overflow:hidden;
  background-color:var(--canvas);
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.075) 1px,transparent 1.5px);
  background-size:22px 22px; background-position:6px 8px;
}
.canvas::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 380px at 48% 45%,rgba(198,244,92,.055),transparent 70%),
    radial-gradient(1100px 760px at 50% 46%,transparent 45%,rgba(6,8,12,.9) 100%);
}
.cv-head{position:absolute;left:22px;top:18px;right:22px;display:flex;align-items:center;gap:18px;z-index:2;pointer-events:none}
.cv-title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cv-title i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:0;border-top:2px solid var(--lime);border-radius:2px}
.legend .lg-r i{border-top:2px dashed var(--amber)}
.legend .lg-d i{border-top:2px dashed var(--red)}
.cv-meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}

.wires{position:absolute;left:0;top:0;width:908px;height:736px;overflow:visible}
.wire .glow{fill:none;stroke:var(--c);stroke-width:8;stroke-linecap:round;opacity:0}
.wire .base{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-linecap:round;transition:stroke .3s}
.wire .core{fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;opacity:.34}
.wire{transition:opacity .35s}
.wire.sel .core{opacity:.95 !important;stroke-width:2}
.wire.sel .glow{opacity:.16 !important}
.wire.down .core,.wire.wait .core,.wire.retry .core,.wire.down .glow,.wire.wait .glow,.wire.retry .glow{opacity:0 !important}
.wire.down .base{stroke:var(--red);stroke-dasharray:5 7;stroke-width:1.8}
.wire.wait .base,.wire.retry .base{stroke:var(--amber);stroke-dasharray:5 7;stroke-width:1.8}
.wire.retry .base{animation:dash .5s linear infinite}
.wire.fixed .core{stroke:var(--lime);opacity:1 !important;stroke-width:2.4}
.wire.fixed .glow{stroke:var(--lime);opacity:.3 !important}
.port{fill:var(--panel-3);stroke:rgba(255,255,255,.3);stroke-width:1.2}
.port.cport{fill:var(--c);stroke:none}

.pk .tail{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.pk .halo{fill:var(--c);opacity:.2}
.pk .head{fill:#fff;stroke:var(--c);stroke-width:2.2}
.labs{z-index:2;pointer-events:none}
.lab rect{fill:rgba(10,13,18,.95);stroke:var(--c);stroke-width:1}
.lab text{fill:var(--ink);font:600 11px var(--sans);letter-spacing:-.005em}
.pk{transition:opacity .35s}

/* Fokus-Modus der Tour: Nebensaechliches tritt zurueck */
.canvas.focus .node:not(.in-focus){opacity:.3}
.canvas.focus .wire:not(.in-focus){opacity:.22}
.canvas.focus .pk:not(.in-focus){opacity:.18}

/* ── Knoten ────────────────────────────────────────────────────────────── */
.node{
  position:absolute; z-index:1;
  border:1px solid var(--line-2); border-radius:14px;
  background:linear-gradient(180deg,rgba(24,31,42,.94),rgba(13,18,25,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(0,0,0,.85);
  color:var(--ink); cursor:pointer;
  transition:border-color .2s,box-shadow .25s,transform .18s,opacity .35s;
}
.node:hover{border-color:var(--line-3);transform:translateY(-1px)}
.node.press{transform:scale(.97)}
.node.sel{
  border-color:color-mix(in oklab,var(--c) 75%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 4px color-mix(in oklab,var(--c) 16%,transparent),0 18px 44px -16px color-mix(in oklab,var(--c) 45%,transparent);
}
.ic{
  position:relative;flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--c);
  background:color-mix(in oklab,var(--c) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--c) 26%,transparent);
}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .ring{position:absolute;inset:-1px;border-radius:11px;border:1.5px solid var(--c);opacity:0;pointer-events:none}
.sdot{
  position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--lime);border:2px solid #0E131A;
}
[data-state="down"] .sdot{background:var(--red);animation:blink 1s ease-in-out infinite}
[data-state="wait"] .sdot,[data-state="retry"] .sdot{background:var(--amber);animation:blink .8s ease-in-out infinite}

.sysnode{width:248px;height:68px;padding:0 14px 0 13px;display:flex;align-items:center;gap:12px}
.sys-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.sys-tx b{font-size:14px;font-weight:640;letter-spacing:-.01em;line-height:1.2}
.sys-tx small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
[data-state="down"] .sys-tx small{color:var(--red)}
[data-state="wait"] .sys-tx small,[data-state="retry"] .sys-tx small{color:var(--amber)}
.sysnode[data-state="down"]{border-color:rgba(255,107,107,.55)}
.sysnode[data-state="wait"],.sysnode[data-state="retry"]{border-color:rgba(255,178,63,.5)}
.sys-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.dirg{color:var(--muted)}
.dirg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sys-cnt{font-family:var(--mono);font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Altsystem mit Mini-Terminal */
.altnode{width:214px;height:206px;padding:13px 13px 11px;display:flex;flex-direction:column;gap:10px}
.alt-head{display:flex;align-items:center;gap:11px}
.alt-head .sys-tx b{font-size:14.5px}
.term{
  position:relative;display:block;border-radius:9px;padding:8px 10px 9px;overflow:hidden;
  background:#05100A;border:1px solid rgba(141,247,174,.16);
  font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--term);
  text-shadow:0 0 6px rgba(141,247,174,.45);
}
.term::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}
.term-top{display:flex;justify-content:space-between;color:rgba(141,247,174,.55);border-bottom:1px dashed rgba(141,247,174,.2);padding-bottom:4px;margin-bottom:4px;font-size:9.5px;letter-spacing:.04em}
.term-lines{display:block;height:65.2px;overflow:hidden}
.term-l{display:block;white-space:nowrap;overflow:hidden;height:16.3px}
.term-l.new{animation:termIn .5s steps(6) both}
.term-cur{display:inline-block;width:6px;height:11px;background:var(--term);vertical-align:-1px;animation:blink 1s steps(1) infinite}
.alt-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.alt-foot .ok{display:inline-flex;align-items:center;gap:6px}
.alt-foot .ok i{width:6px;height:6px;border-radius:50%;background:var(--lime)}

/* Drehscheibe */
.hub{
  width:180px;height:180px;border-radius:50%;padding:0;border:0;background:none;box-shadow:none;
  display:grid;place-items:center;
}
.hub:hover{transform:none}
.hub:hover .h-disk{stroke:rgba(198,244,92,.6)}
.hub.sel{box-shadow:none}
.hub.sel .h-disk{stroke:var(--lime);stroke-width:1.6}
.hub-svg{position:absolute;inset:0;width:180px;height:180px;overflow:visible}
.h-ticks{fill:none;stroke:rgba(255,255,255,.22);stroke-width:4;stroke-dasharray:1 6.1}
.h-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.h-arc{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round}
.h-arc2{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round;opacity:.4}
.h-disk{fill:url(#hubGrad);stroke:rgba(198,244,92,.3);stroke-width:1;transition:stroke .2s}
.h-pulse{fill:none;stroke:var(--lime);stroke-width:1.5;opacity:0}
.hub-c{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1}
.hub-k{font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--lime)}
.hub-v{margin-top:7px;font-size:32px;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.hub-u{margin-top:5px;font-size:10.5px;color:var(--muted)}
.hub-q{
  position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;font-weight:650;color:#1B1203;background:var(--amber);border-radius:99px;padding:2px 8px;
  opacity:0;transition:opacity .25s;
}
.hub.has-q .hub-q{opacity:1}

/* Kanten-Chip (Stoerung/Wiederholung) */
.echip{
  position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;
  display:none;align-items:center;gap:6px;height:24px;padding:0 9px 0 6px;border-radius:99px;
  font-size:11px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:rgba(10,13,18,.96);border:1px solid var(--line-3);color:var(--ink);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.9);
}
.echip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.echip.on{display:inline-flex}
.echip[data-state="down"]{border-color:rgba(255,107,107,.6);color:#FFB0B0}
.echip[data-state="wait"],.echip[data-state="retry"]{border-color:rgba(255,178,63,.6);color:#FFD08A}
.echip[data-state="fixed"]{border-color:rgba(198,244,92,.6);color:var(--lime)}
.echip[data-state="retry"] svg{animation:spin .8s linear infinite}
.echip .q{font-size:10px;color:var(--muted);font-weight:600}

/* ── Ueberwachungs-Widgets (links) ─────────────────────────────────────── */
.widget{
  position:absolute;left:26px;width:214px;z-index:1;border-radius:12px;padding:10px 12px 11px;
  background:rgba(13,18,25,.62);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.w-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.w-h span{display:inline-flex;align-items:center;gap:6px}
.w-h svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w-h b{font-size:13px;font-weight:650;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
.w-h b small{font-size:10.5px;font-weight:500;color:var(--muted)}
.w-flow{top:62px}
.w-bars{width:188px;height:42px;margin-top:9px}
.w-bars rect{fill:rgba(198,244,92,.28)}
.w-bars rect.now{fill:var(--lime)}
.w-ax{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.w-mon{top:452px}
.w-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.w-mon[data-state="wait"] .w-dot{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blink .9s ease-in-out infinite}
.w-rule{margin-top:8px;font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.w-mail{margin-top:2px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.w-state{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line-2);font-size:11.5px;line-height:1.4;color:var(--lime);min-height:40px}
.w-mon[data-state="wait"] .w-state{color:#FFC978}
.w-mon[data-state="fixed"] .w-state{color:var(--lime)}

/* ── Tour-Leiste ───────────────────────────────────────────────────────── */
.tour{
  position:absolute;z-index:4;left:50%;bottom:20px;width:640px;transform:translateX(-50%);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:14px 14px 16px 16px;border-radius:16px;overflow:hidden;
  background:rgba(14,19,27,.82);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
}
.t-num{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--lime-08);border:1px solid rgba(198,244,92,.25);color:var(--lime);
  font-family:var(--mono);font-size:12px;
}
.t-num b{font-weight:400;font-size:16px;color:var(--lime)}
.t-num span{color:rgba(198,244,92,.55)}
.t-tx{min-width:0}
.t-title{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.012em;line-height:1.25}
.t-sub{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.t-tx.swap{animation:capIn .45s cubic-bezier(.2,.7,.2,1) both}
.t-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.t-dots{display:flex;gap:4px}
.t-dots button{width:16px;height:16px;display:grid;place-items:center;border-radius:50%}
.t-dots button i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .2s,width .2s}
.t-dots button:hover i{background:rgba(255,255,255,.5)}
.t-dots button[aria-current="step"] i{background:var(--lime);width:6px}
.t-btn{
  height:26px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:620;color:var(--ink-2);border:1px solid var(--line-2);background:rgba(255,255,255,.03);
}
.t-btn:hover{color:var(--ink);border-color:var(--line-3)}
.t-btn svg{width:12px;height:12px;fill:currentColor}
.t-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.05)}
.t-prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,rgba(198,244,92,.4),var(--lime));transform-origin:0 50%;transform:scaleX(0)}
.tour[data-mode="hold"] .t-prog i,.tour[data-mode="off"] .t-prog i{background:var(--amber);opacity:.6}
.tour[data-mode="static"] .t-ctl,.tour[data-mode="static"] .t-prog{display:none}
.tour[data-mode="static"] .t-num b{font-size:0}
.t-num svg{width:18px;height:18px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:none}
.tour[data-mode="static"] .t-num svg.t-ok{display:block}
.tour[data-mode="static"].alert .t-num{background:rgba(255,178,63,.08);border-color:rgba(255,178,63,.32)}
.tour[data-mode="static"].alert .t-num svg.t-ok{display:none}
.tour[data-mode="static"].alert .t-num svg.t-al{display:block;stroke:var(--amber)}
.tour[data-mode="static"] .t-num span{display:none}

/* ── Seitenleiste ──────────────────────────────────────────────────────── */
.side{
  position:relative;z-index:2;min-height:0;
  display:grid;grid-template-rows:410px minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-width:0;
  border-left:1px solid var(--line);background:var(--panel);
}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 16px;flex:none}
.sec-h h2{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:680;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sec-top{min-height:0;min-width:0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.sec-top>.view{display:flex;flex-direction:column;min-height:0;height:100%}
.view.in{animation:viewIn .32s cubic-bezier(.2,.7,.2,1) both}
.cnt-chip{font-size:11px;font-weight:600;color:var(--lime);background:var(--lime-08);border:1px solid rgba(198,244,92,.2);border-radius:99px;padding:2px 8px;white-space:nowrap}
.cnt-chip.warn{color:var(--amber);background:rgba(255,178,63,.08);border-color:rgba(255,178,63,.3)}

.rows{display:flex;flex-direction:column;padding:0 8px 8px;gap:2px}
.row{
  display:flex;align-items:center;gap:12px;height:66px;padding:0 10px;border-radius:12px;
  border:1px solid transparent;transition:background-color .15s,border-color .15s;
}
.row:hover{background:rgba(255,255,255,.035);border-color:var(--line)}
.row .ic{width:36px;height:36px;border-radius:10px}
.row .ic svg{width:18px;height:18px}
.row-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-tx b{font-size:13.5px;font-weight:640;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.row-tx b .dirg svg{width:14px;height:14px}
.row-tx small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.row-cnt{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.row-cnt b{color:var(--ink-2);font-weight:400}

.pill{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;white-space:nowrap;
  font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;
  color:var(--lime);background:var(--lime-08);border:1px solid rgba(198,244,92,.22);
}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill[data-state="down"]{color:#FF9C9C;background:rgba(255,107,107,.09);border-color:rgba(255,107,107,.35)}
.pill[data-state="wait"],.pill[data-state="retry"]{color:#FFC978;background:rgba(255,178,63,.09);border-color:rgba(255,178,63,.35)}

/* Details */
.det{padding:12px 16px 16px;gap:10px}
.det>*{flex:none}
.det-top{display:flex;align-items:center;justify-content:space-between;height:26px}
.back{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 5px;border-radius:8px;font-size:12px;font-weight:550;color:var(--muted)}
.back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.det-id{display:flex;align-items:center;gap:12px;height:44px}
.det-id .ic{width:42px;height:42px;border-radius:12px}
.det-id .ic svg{width:21px;height:21px}
.det-id h3{font-size:17px;font-weight:660;letter-spacing:-.018em;line-height:1.2}
.det-id p{font-size:12px;color:var(--muted);margin-top:2px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts>div{background:var(--panel-2);padding:8px 11px 9px;min-width:0}
.facts>.wide{grid-column:1/-1}
.facts dt{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:650}
.facts dd{margin-top:4px;font-size:13.5px;font-weight:620;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.facts dd .dirg{color:var(--c)}
.facts small{display:block;margin-top:2px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wide small{display:inline;margin:0 0 0 2px;font-size:11.5px}
.facts .wide dd{font-size:13.5px}
.map{position:relative;border-radius:12px;padding:9px 11px 6px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.map h4{margin:0 0 5px;display:flex;justify-content:space-between;align-items:baseline;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:650}
.map h4 span{text-transform:none;letter-spacing:0;font-size:11px;font-weight:500;color:var(--muted)}
.map-row{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:center;height:25px}
.map-row code{
  justify-self:start;font-family:var(--mono);font-size:11px;color:var(--c-alt);
  background:rgba(230,218,192,.06);border:1px solid rgba(230,218,192,.14);border-radius:6px;padding:1px 6px;white-space:nowrap
}
.map-row code.tgt{color:var(--c);background:color-mix(in oklab,var(--c) 8%,transparent);border-color:color-mix(in oklab,var(--c) 22%,transparent)}
.map-row .m-a{display:flex;align-items:center;gap:6px;min-width:0}
.map-row .m-a code{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.map-row .m-ln{flex:1;min-width:8px;height:0;border-top:1px dashed color-mix(in oklab,var(--c) 38%,transparent)}
.map-row .ar{color:color-mix(in oklab,var(--c) 70%,var(--muted));justify-self:start;margin-left:-3px}
.map-row .ar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.map-row span.v{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-row span.n{justify-self:end;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.map p{font-size:12px;line-height:1.5;color:var(--ink-2);margin:2px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 5px}
.chips code{font-family:var(--mono);font-size:10.5px;color:var(--c-alt);background:rgba(230,218,192,.06);border:1px solid rgba(230,218,192,.14);border-radius:6px;padding:1px 6px}
.det-act{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.det-act .btn{height:34px}
.det-act.one{grid-template-columns:1fr}

/* Protokoll */
.sec-log{min-height:0;min-width:0;display:flex;flex-direction:column}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 2s ease-in-out infinite}
.seg{display:flex;padding:2px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.seg button{height:24px;padding:0 9px;border-radius:7px;font-size:11.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.08);color:var(--ink)}
.seg .badge{min-width:16px;height:16px;border-radius:99px;padding:0 4px;display:inline-grid;place-items:center;font-size:10px;background:rgba(255,107,107,.18);color:#FFB0B0}
.log{
  list-style:none;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 10px 34px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
  /* weicher Auslauf statt hart abgeschnittener Zeile */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);
}
.log::-webkit-scrollbar{width:6px}
.log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
.le{position:relative;padding:7px 8px 7px 12px;border-radius:9px;transition:opacity .25s,background-color .25s}
.le+.le{margin-top:1px}
.le::before{content:'';position:absolute;left:3px;top:9px;bottom:9px;width:2px;border-radius:2px;background:transparent}
.le-top{display:flex;align-items:center;gap:6px;height:16px}
.le time{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:2px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--c);background:color-mix(in oklab,var(--c) 10%,transparent);border-radius:4px;padding:0 5px;line-height:15px}
.le-top .ar{color:var(--muted);width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.le p{margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.le.k-info p{color:var(--ink-2)}
.le.k-err{background:rgba(255,107,107,.07)}
.le.k-err::before{background:var(--red)}
.le.k-err p{color:#FFC2C2}
.le.k-retry{background:rgba(255,178,63,.06)}
.le.k-retry::before{background:var(--amber)}
.le.k-retry p{color:#FFD9A0}
.le.k-fix{background:rgba(198,244,92,.06)}
.le.k-fix::before{background:var(--lime)}
.le.k-fix p{color:#E2FBAA}
.le.new{animation:leIn .45s cubic-bezier(.2,.7,.2,1) backwards}
/* Auswahl aktiv: fremde Eintraege treten ueber die Farbe zurueck (nicht ueber Deckkraft — bleibt AA-lesbar) */
.log.has-sel .le:not(.rel){background:transparent}
.log.has-sel .le:not(.rel)::before{opacity:.4}
.log.has-sel .le:not(.rel) p{color:var(--muted)}
.log.has-sel .le:not(.rel) .tag{color:var(--muted);background:rgba(255,255,255,.045)}
.log.only-err .le:not(.k-err):not(.k-retry):not(.k-fix){display:none}
.log-empty{display:none;padding:18px 14px;font-size:12px;color:var(--muted);line-height:1.5}
.log.only-err.no-err .log-empty{display:block}

/* ── Tour-Werkzeuge: Zeiger + Spotlight ────────────────────────────────── */
.cursor{position:absolute;left:0;top:0;z-index:20;width:22px;height:26px;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.cursor.on{opacity:1}
.cursor svg{width:22px;height:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.ripple{position:absolute;z-index:19;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid var(--lime);pointer-events:none;opacity:0}
.ripple.go{animation:ripple .55s ease-out both}
.spot{
  position:absolute;z-index:18;left:0;top:0;pointer-events:none;border-radius:14px;opacity:0;
  border:1.5px solid rgba(198,244,92,.85);
  box-shadow:0 0 0 4px rgba(198,244,92,.12),0 0 28px rgba(198,244,92,.28);
  transition:opacity .35s;
}
.spot.on{opacity:1;animation:spotPulse 1.8s ease-in-out infinite}
.spot.round{border-radius:50%}

/* ── Animationen ───────────────────────────────────────────────────────── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes dash{to{stroke-dashoffset:-12}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes leIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes viewIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes termIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ripple{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
@keyframes spotPulse{0%,100%{box-shadow:0 0 0 4px rgba(198,244,92,.12),0 0 28px rgba(198,244,92,.28)}50%{box-shadow:0 0 0 7px rgba(198,244,92,.06),0 0 36px rgba(198,244,92,.38)}}

/* Pause (Host-Befehl oder verstecktes Fenster): alles steht */
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused !important}
/* Reduzierte Bewegung / ?motion=off: statischer Endzustand */
html.reduced *,html.reduced *::before,html.reduced *::after{animation:none !important;transition:none !important}