:root{
  --bg:#0a0d12; --bg2:#12171f; --bg3:#1a212b; --line:#28303b; --line2:#333d4a;
  --txt:#e6edf3; --txt2:#9aa7b4; --txt3:#6b7684;
  --acc:#3b82f6; --acc2:#2563eb; --cyan:#22d3ee;
  --ok:#22c55e; --okbg:#0f2a1a; --warn:#f59e0b; --warnbg:#2a2110; --err:#ef4444; --errbg:#2a1414;
  --stop:#64748b; --stopbg:#1a2029;
  --radius:10px; --shadow:0 20px 60px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#eef1f6; --bg2:#ffffff; --bg3:#f1f4f8; --line:#e2e7ee; --line2:#d5dbe4;
  --txt:#111827; --txt2:#4b5563; --txt3:#8a94a2;
  --okbg:#e7f7ec; --warnbg:#fdf3e0; --errbg:#fdeaea; --stopbg:#eef1f5;
  --shadow:0 20px 60px rgba(20,30,50,.15);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{overflow-x:hidden}
body{background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--acc);text-decoration:none}
.hidden{display:none!important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.muted{color:var(--txt3)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;vertical-align:middle}
button{font-family:inherit}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--txt);padding:8px 13px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:.12s}
.btn:hover{border-color:var(--txt3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:15px;height:15px}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:var(--acc2)}
.btn.dgr{background:var(--errbg);border-color:var(--err);color:var(--err)}
.btn.sm{padding:5px 9px;font-size:12px}
.btn.full{width:100%;padding:12px}
.ico{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);
  display:grid;place-items:center;cursor:pointer;color:var(--txt2)}
.ico:hover{color:var(--txt)}
.ico svg{width:15px;height:15px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid transparent}
.pill.run{background:var(--okbg);color:var(--ok);border-color:rgba(34,197,94,.25)}
.pill.stop{background:var(--stopbg);color:var(--stop);border-color:var(--line2)}
.pill.err{background:var(--errbg);color:var(--err);border-color:rgba(239,68,68,.25)}
.pill.warn{background:var(--warnbg);color:var(--warn);border-color:rgba(245,158,11,.25)}

/* ---------- app shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:230px;flex:0 0 230px;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 16px}
.brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#22d3ee);
  display:grid;place-items:center;color:#fff;font-weight:800}
.brand b{font-size:15px}.brand span{display:block;font-size:11px;color:var(--txt3);font-weight:500}
.navsec{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--txt3);padding:14px 12px 5px;
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;border-radius:7px}
.navsec:first-of-type{padding-top:4px}
.navsec:hover{color:var(--txt2)}
.navsec span{flex:1}
/* The chevron points down when open and right when closed — direction carries
   the state, so it reads correctly without relying on colour. */
.navsec .navchev{width:12px;height:12px;flex:0 0 12px;opacity:.65;transition:transform .15s ease}
.navsec.closed .navchev{transform:rotate(-90deg)}
.navgrp.hid{display:none}
.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--txt2);cursor:pointer;font-weight:500;transition:.12s}
.nav:hover{background:var(--bg3);color:var(--txt)}
.nav.active{background:linear-gradient(90deg,rgba(59,130,246,.16),transparent);color:var(--txt);box-shadow:inset 2px 0 0 var(--acc)}
.nav svg{width:17px;height:17px;flex:0 0 17px}
.nav .badge{margin-left:auto;font-size:11px;background:var(--bg3);color:var(--txt2);padding:1px 7px;border-radius:20px;font-weight:600}
.nav.active .badge{background:var(--acc);color:#fff}
.side .sp{flex:1}
.side .foot{border-top:1px solid var(--line);padding-top:10px;font-size:12px;color:var(--txt3);display:flex;align-items:center;gap:9px}
.side .foot .ava{width:26px;height:26px;border-radius:50%;background:var(--bg3);display:grid;place-items:center;color:var(--txt);font-weight:700;font-size:12px}
.side .foot svg{cursor:pointer;width:16px;height:16px}
/* Portal-Version: dezent ueber der Fusszeile bzw. unter der Login-Karte */
.version{font-size:11px;color:var(--txt3);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.side .version{padding:0 2px 8px}
.authversion{text-align:center;margin-top:10px;min-height:14px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{min-height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:12px 26px;background:var(--bg)}
.top h1{font-size:17px;margin:0;font-weight:650}
.top .grow{flex:1}
.content{flex:1;overflow:auto;padding:24px 26px}

/* ---------- stats + table ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.stat .k{font-size:12px;color:var(--txt3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:26px;font-weight:750;margin-top:6px;letter-spacing:-.5px}
.stat .v small{font-size:13px;color:var(--txt3);font-weight:600}
.stat .d{font-size:12px;color:var(--txt3);margin-top:2px}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel .ph{display:flex;align-items:center;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line)}
.panel .ph h2{font-size:14px;margin:0;font-weight:650}
.panel .ph .grow{flex:1}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:10px 17px;color:var(--txt3);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:12px 17px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr.clk{cursor:pointer;transition:.1s}
tbody tr.clk:hover{background:var(--bg3)}
.iname{display:flex;align-items:center;gap:11px}
.iname .av{width:30px;height:30px;border-radius:7px;background:var(--bg3);display:grid;place-items:center;font-weight:750;color:var(--txt2);flex:0 0 30px;text-transform:uppercase}
.iname b{font-weight:650}
.iname .mac{font-size:11.5px;color:var(--txt3);font-family:ui-monospace,monospace}
.url{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--acc)}
.rowact{display:flex;gap:6px;justify-content:flex-end}
.rowact .ico{width:28px;height:28px}.rowact .ico svg{width:14px;height:14px}
.empty{text-align:center;padding:50px 20px;color:var(--txt3)}

/* ---------- instance overview redesign ---------- */
.stat{position:relative;overflow:hidden}
.stat .spark{position:absolute;right:12px;bottom:11px;opacity:.5}
.lbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{background:var(--bg2);border:1px solid var(--line);color:var(--txt2);border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.1s}
.chip:hover{border-color:var(--line2)}
.chip .n{background:var(--bg3);color:var(--txt2);border-radius:12px;padding:0 7px;font-size:11px;font-weight:700}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chip.on .n{background:rgba(255,255,255,.22);color:#fff}
.lbar .rt{margin-left:auto;display:flex;gap:10px;align-items:center}
.lsearch{position:relative}
.lsearch input{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:8px 12px 8px 33px;color:var(--txt);font-size:13px;width:210px;outline:none}
.lsearch input:focus{border-color:var(--acc)}
.lsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--txt3);fill:none;stroke-width:2}
.dseg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.dseg button{border:0;background:transparent;color:var(--txt2);padding:5px 11px;border-radius:6px;font-weight:600;font-size:12px;cursor:pointer}
.dseg button.on{background:var(--bg3);color:var(--txt)}
/* redesigned list — scoped to .lst so other tables stay unchanged */
.lst .row.s-run td:first-child{border-left:3px solid var(--ok)}
.lst .row.s-stop td:first-child{border-left:3px solid var(--stop)}
.lst .row.s-error td:first-child{border-left:3px solid var(--err)}
.lst .row.s-expired td:first-child{border-left:3px solid var(--warn)}
.lst .row td:first-child{border-left:3px solid transparent}
.lst .av{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:linear-gradient(150deg,var(--bg3),var(--bg2));border:1px solid var(--line2);position:relative;font-size:14px}
.lst .av .ring{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--bg2)}
.lst .nm b{font-size:14px;font-weight:700;display:block;line-height:1.25}
.lst .nm .url{font-size:12px;color:var(--acc);font-family:ui-monospace,monospace}
.lst .nm .meta{font-size:11px;color:var(--txt3);font-family:ui-monospace,monospace;margin-top:1px}
.lst .protos{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.pb{font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:3px 7px;border-radius:6px;background:var(--bg3);color:var(--txt3);border:1px solid var(--line)}
.pb.on{background:rgba(34,211,238,.12);color:var(--cyan);border-color:rgba(34,211,238,.3)}
.fwb{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--acc);background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.28);padding:3px 7px;border-radius:6px}
.fwb svg{width:11px;height:11px}
.ocell{display:inline-flex;align-items:center;gap:7px;font-size:12.5px}
.ocell .ava{width:22px;height:22px;border-radius:50%;background:var(--bg3);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--txt2);text-transform:uppercase}
.netchip{font-size:11.5px;color:var(--txt2);background:var(--bg3);border:1px solid var(--line);border-radius:7px;padding:3px 8px;font-family:ui-monospace,monospace}
.res{font-size:12.5px;color:var(--txt2);white-space:nowrap}.res b{color:var(--txt);font-weight:650}
.lst .acts{display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:.12s}
.lst .row:hover .acts{opacity:1}
.lst .acts .ico{width:30px;height:30px}.lst .acts .ico svg{width:15px;height:15px}
.ico.dgr:hover{color:var(--err);border-color:var(--err)}
@media(hover:none){.lst .acts{opacity:1}}
.lst.dense .row td{padding:7px 14px}
.lst.dense .av{width:30px;height:30px;flex-basis:30px;border-radius:8px;font-size:12px}
.lst.dense .nm .meta{display:none}

/* ---------- modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(4,7,12,.6);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;padding:60px 20px;z-index:50;overflow:auto}
.scrim.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);width:560px;max-width:100%;overflow:hidden}
.modal .mh{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal .mh svg{width:20px;height:20px;flex:0 0 20px}
.modal .mh h3{margin:0;font-size:16px;font-weight:700}
.modal .mh .x{margin-left:auto;cursor:pointer;color:var(--txt3);font-size:18px}
.modal .mb{padding:20px 22px;display:flex;flex-direction:column;gap:16px;max-height:66vh;overflow:auto}
.modal .mf{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--txt2);margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--txt3);margin-top:5px}
.inp{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:9px 12px;color:var(--txt);font-size:13.5px;outline:none}
.inp:focus{border-color:var(--acc)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.igrp{display:flex}.igrp .inp{border-radius:8px 0 0 8px;border-right:0}
.igrp .suf{display:flex;align-items:center;padding:0 12px;background:var(--bg3);border:1px solid var(--line2);border-radius:0 8px 8px 0;color:var(--txt3);font-family:ui-monospace,monospace;font-size:12.5px}
.proto{display:flex;flex-direction:column;gap:8px}
.protorow{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:9px 11px}
.protorow .pl{display:flex;align-items:center;gap:10px;flex:1}
.protorow .pico{width:34px;height:26px;flex:0 0 34px;border-radius:6px;background:var(--bg3);display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.3px}
.protorow .pl b{font-size:13px}.protorow .pl span{display:block;font-size:11px;color:var(--txt3)}
.seg{display:flex;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:3px;gap:3px}
.seg.sm{padding:2px;flex:0 0 210px}
.seg .opt{flex:1;text-align:center;padding:7px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--txt2);cursor:pointer}
.seg.sm .opt{padding:5px 8px;font-size:11.5px}
.seg .opt.on{background:var(--acc);color:#fff}

/* ---------- detail ---------- */
.dhead{display:flex;align-items:center;gap:16px;margin:6px 0 20px}
.dhead .big{width:52px;height:52px;border-radius:12px;background:var(--bg3);display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--txt2);text-transform:uppercase}
.dhead h1{margin:0;font-size:21px}
.dhead .m{color:var(--txt3);font-size:12.5px;font-family:ui-monospace,monospace}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:17px}
.card h4{margin:0 0 14px;font-size:13px;font-weight:650}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .kk{color:var(--txt3)}
.kv .vv{font-weight:600;font-family:ui-monospace,monospace;font-size:12.5px}
.danger{border-color:rgba(239,68,68,.3)}
.danger h4{color:var(--err)}
.drow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}.drow .grow{flex:1}
.drow b{font-size:13px}.drow p{margin:2px 0 0;font-size:12px;color:var(--txt3)}
/* detail: tabs + quick facts */
.dhead .big{position:relative}
.dhead .big .ring{position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;border-radius:50%;border:3px solid var(--bg)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 18px;overflow-x:auto}
.tab{padding:10px 15px;font-weight:650;font-size:13px;color:var(--txt2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tabpane{display:none}.tabpane.on{display:block}
.qfact{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.qfact:last-child{border-bottom:0}
.qfact .qi{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--bg3);display:grid;place-items:center;color:var(--cyan)}
.qfact .qi svg{width:16px;height:16px}
/* icons inside card headers (e.g. the firewall shield) must not blow up */
.card h4 svg,.card h3 svg{width:16px;height:16px;flex:0 0 16px}

/* ---------- in-app guide (Anleitung) ---------- */
.guide{display:flex;gap:26px;align-items:flex-start}
.gtoc{flex:0 0 226px;position:sticky;top:16px}
.gtoc h3{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3);margin:0 0 10px}
.gtoc a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--txt2);font-size:13px;cursor:pointer;font-weight:550}
.gtoc a .gi{width:26px;height:26px;flex:0 0 26px;border-radius:7px;background:var(--bg3);display:grid;place-items:center;color:var(--cyan)}
.gtoc a .gi svg{width:14px;height:14px}
.gtoc a:hover{background:var(--bg3);color:var(--txt)}
.gtoc a.on{background:var(--bg3);color:var(--txt);box-shadow:inset 2px 0 0 var(--acc)}
.gart{flex:1;min-width:0;max-width:800px}
.gsec{display:none}.gsec.on{display:block}
.gart h1{font-size:24px;margin:0 0 4px;letter-spacing:-.3px}
.glead{color:var(--txt2);font-size:15px;margin:0 0 22px}
.gart h2{font-size:18px;margin:26px 0 8px;display:flex;align-items:center;gap:10px}
.gart h2 .gn{width:27px;height:27px;flex:0 0 27px;border-radius:8px;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.gart h3{font-size:15px;margin:18px 0 6px}
.gart p{margin:8px 0;line-height:1.62}
.gart .mono{background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.gsteps{counter-reset:s;margin:10px 0;padding:0;list-style:none}
.gsteps li{counter-increment:s;position:relative;padding:8px 0 8px 40px;border-bottom:1px dashed var(--line)}
.gsteps li:last-child{border-bottom:0}
.gsteps li::before{content:counter(s);position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:50%;background:var(--bg3);border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--txt2)}
.gtip,.gwarn{display:flex;gap:11px;border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13.5px}
.gtip{background:var(--okbg);border:1px solid rgba(34,197,94,.25)}
.gwarn{background:var(--warnbg);border:1px solid rgba(245,158,11,.25)}
.gtip .gic{color:var(--ok);flex:0 0 18px}.gwarn .gic{color:var(--warn);flex:0 0 18px}
.gtip .gic svg,.gwarn .gic svg{width:18px;height:18px}
table.gtab{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px}
table.gtab th,table.gtab td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.gtab th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt3)}
@media(max-width:820px){.guide{flex-direction:column}.gtoc{position:static;flex-basis:auto;width:100%}}

/* ---------- project function bundling ---------- */
.pfrt{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt3);font-weight:700;margin:12px 2px 8px}
.pfcard{background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:11px;margin-bottom:9px}
.pfhead{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pfhead .ci{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg3);color:var(--acc);flex:0 0 28px}.pfhead .ci svg{width:15px;height:15px}
.pfhead b{font-size:12.5px}.pfhead .wt{font-size:11px;color:var(--txt3)}
.pfhead .bg{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.pfhead .bg.ok{background:var(--okbg);color:var(--ok)}.pfhead .bg.warn{background:var(--warnbg);color:var(--warn)}
.pfhead .grow,.pfbulk .grow{flex:1}
.pftgts{display:flex;gap:6px}
.pftchip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;border:1px solid var(--line2);color:var(--txt3);cursor:pointer;display:inline-flex;align-items:center;gap:5px;user-select:none;transition:.12s}
.pftchip svg{width:13px;height:13px}
.pftchip:hover{border-color:var(--txt3)}
.pftchip.on.pc{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.pftchip.on.touch{background:color-mix(in srgb,var(--cyan) 15%,transparent);color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}
.pftchip.inhoff{opacity:.4;text-decoration:line-through}
.ltree .lnode{display:flex;align-items:center;gap:6px}
/* project visu settings */
.vgrid{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}
@media(max-width:820px){.vgrid{grid-template-columns:1fr}}
.vgrid .fl{font-size:11px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin:0 0 8px}
.presetgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
.pcard{border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;position:relative;transition:.12s}
.pcard:hover{border-color:var(--line2)}
.pcard.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.pcard .pcsw{display:flex;gap:5px;margin-bottom:7px}.pcard .pcsw i{width:20px;height:20px;border-radius:6px;border:1px solid rgba(128,128,128,.25)}
.pcard .pcn{font-size:12px;font-weight:700}
.pcard .chk{position:absolute;top:8px;right:8px;width:17px;height:17px;border-radius:50%;background:var(--acc);color:#fff;display:none;place-items:center}.pcard.on .chk{display:grid}.pcard .chk svg{width:11px;height:11px}
.vopts{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.vchk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt2)}
.seg2{display:inline-flex;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:3px;gap:2px}
.seg2 button{border:0;background:transparent;color:var(--txt2);padding:6px 12px;border-radius:7px;font-weight:650;font-size:12.5px;cursor:pointer}
.seg2 button.on{background:var(--acc);color:#fff}
.seg2.pur button.on{background:var(--purple,#a78bfa)}
.phone{border:1px solid var(--line2);border-radius:22px;padding:9px;background:var(--bg3)}
.phone .pscr{border-radius:14px;padding:11px;min-height:150px}
.phone .ptop{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:9px;opacity:.9}
.phone .ptiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone .twid{padding:10px;display:flex;flex-direction:column;gap:7px;min-height:66px}
.phone .twid .ic{width:24px;height:24px}.phone .twid .ic svg{width:24px;height:24px}
.phone .twid .lb{font-size:10px;font-weight:600}.phone .twid .st{margin-top:auto;font-size:9px;opacity:.7}
.seg2 button.pur,.btn.pur{background:linear-gradient(180deg,var(--purple,#a78bfa),#7c5cf0);color:#fff;border-color:transparent}
/* symbol library */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.stile{position:relative;border:1px solid var(--line);border-radius:11px;padding:11px;display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--bg2)}
.stile .sart{width:44px;height:44px;display:grid;place-items:center;color:var(--purple,#a78bfa)}
.stile .sart svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stile .snm{font-size:11px;font-weight:600;text-align:center;line-height:1.2;word-break:break-word}
.ssrc{position:absolute;top:6px;left:6px;font-size:8.5px;font-weight:800;letter-spacing:.3px;padding:2px 6px;border-radius:5px}
.ssrc.ki{background:color-mix(in srgb,var(--purple,#a78bfa) 18%,transparent);color:var(--purple,#a78bfa)}
.ssrc.up{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.stile .sdel{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--txt3);cursor:pointer}
.stile .sdel:hover{color:var(--err)}.stile .sdel svg{width:13px;height:13px}
.kiprev{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line2);border-radius:11px;padding:14px;margin-top:14px;min-height:74px}
.kiprev .kipv{width:52px;height:52px;display:grid;place-items:center;border-radius:11px;background:var(--bg3);color:var(--purple,#a78bfa);flex:0 0 52px}
.kiprev .kipv svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spin{width:22px;height:22px;border:2px solid var(--line2);border-top-color:var(--purple,#a78bfa);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* per-type symbol assignment */
.symassign{display:flex;flex-direction:column;gap:6px}
.tsrow{display:flex;align-items:center;gap:9px}
.tsrow .ci{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;color:var(--txt2)}
.tsrow .ci svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tsrow .tsl{flex:0 0 90px;font-size:12.5px;font-weight:600}
.tsrow select{flex:1;max-width:260px}
.tsprev{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:8px;background:var(--bg3);color:var(--purple,#a78bfa)}
.tsprev svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tsprev.muted{color:var(--txt3)}
.pfbulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:11px}
.pfnotgt{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;color:var(--warn)}.pfnotgt svg{width:14px;height:14px}
.ltree{border:1px solid var(--line);border-radius:9px;padding:6px 4px;background:var(--bg)}
.lnode{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;font-size:12.5px}
.lnode:hover{background:var(--bg3)}
.lnode .li{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;color:var(--acc)}.lnode .li svg{width:15px;height:15px}
.lnode b{font-weight:650}
.lnode .lt{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--txt3);font-weight:700}
.lnode .lg{margin-left:auto;font-family:ui-monospace,monospace;font-size:11px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent);padding:1px 8px;border-radius:20px}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.permnote{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);padding:3px 9px;border-radius:20px}
.permnote svg{width:13px;height:13px}
.depsum{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0}
.dchip{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--bg3);color:var(--txt2)}
.dchip.green{background:var(--okbg);color:var(--ok)}
.dchip.blue{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
.dchip.cyan{background:color-mix(in srgb,var(--cyan) 15%,transparent);color:var(--cyan)}
.dchip.amber{background:var(--warnbg);color:var(--warn)}
.dchip.gray{background:var(--bg3);color:var(--txt3)}
/* Abgleich Knexo ⇄ Ziel. The four states carry a colour AND a written label —
   colour alone would not survive a colourblind reader or a printed screenshot. */
.cmpbox{margin-top:4px}
.cmplist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.cmprow{background:var(--bg2);padding:9px 12px}
.cmphead{display:flex;align-items:center;gap:8px;font-size:13px}
.cmpsum{font-size:11.5px;color:var(--txt3);margin:2px 0 0 16px}
.cmpw{font-size:12px;color:var(--txt2);margin:4px 0 0 16px;display:flex;align-items:center;gap:7px}
.cdot{width:8px;height:8px;border-radius:2px;flex:0 0 8px;background:var(--txt3)}
.cmpst{font-size:11px;font-weight:700}
.cdot.c-new,.cmpst.c-new{background:var(--ok)}.cmpst.c-new{background:none;color:var(--ok)}
.cdot.c-chg,.cmpst.c-chg{background:var(--warn)}.cmpst.c-chg{background:none;color:var(--warn)}
.cdot.c-dev,.cmpst.c-dev{background:var(--cyan)}.cmpst.c-dev{background:none;color:var(--cyan)}
.cdot.c-eq{background:var(--txt3)}.cmpst.c-eq{color:var(--txt3)}
.cmprow.c-chg{border-left:3px solid var(--warn)}
.cmprow.c-new{border-left:3px solid var(--ok)}
.cmprow.c-dev{border-left:3px solid var(--cyan)}
.cmprow.c-eq{border-left:3px solid transparent}
.cmpsel{width:15px;height:15px;accent-color:var(--acc);cursor:pointer;flex:0 0 15px}
/* Placeholder keeps rows aligned where no checkbox is offered. */
.cmpnosel{width:15px;flex:0 0 15px;display:inline-block}
.cmpact{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.depopts{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--txt2)}
.depopts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.depopts input{width:15px;height:15px;accent-color:var(--acc)}
.deplog{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:12.5px;display:flex;flex-direction:column;gap:5px}
.pfroles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px}
.pfrole{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:5px 8px;min-height:40px;cursor:pointer}
.pfrole.empty{border-style:dashed;color:var(--txt3)}.pfrole.empty:hover{border-color:var(--acc);color:var(--acc)}
.pfrole .col{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pfrole .rl{font-size:9px;text-transform:uppercase;color:var(--txt3);font-weight:700}
.pfrole .rg{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--cyan);font-weight:600}
.pfrole .x{margin-left:auto;color:var(--txt3);cursor:pointer;font-size:13px;font-weight:700}.pfrole .x:hover{color:var(--err)}
.pfpool{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:10px}
.pfga{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line2);border-radius:8px;margin:4px 4px 0 0;cursor:pointer;font-size:11.5px}
.pfga:hover{border-color:var(--line2)}
.pfga.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset;background:color-mix(in srgb,var(--acc) 8%,transparent)}
.pfga .g{font-family:ui-monospace,monospace;color:var(--cyan);font-weight:600}
.dptsug{display:inline-flex;align-items:center;gap:5px;background:var(--warnbg);color:var(--amber);border:1px solid rgba(255,176,32,.3);border-radius:7px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;font-family:ui-monospace,monospace}
.dptsug:hover{border-color:var(--amber)}
.dptsug.mismatch{background:var(--errbg);color:var(--err);border-color:rgba(239,68,68,.3)}
.dptsug.mismatch:hover{border-color:var(--err)}
.qfact .ql{font-size:11.5px;color:var(--txt3)}.qfact .qv{font-weight:700;font-size:14px}

/* ---------- login ---------- */
.loginwrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background-image:radial-gradient(1200px 500px at 15% -10%,rgba(59,130,246,.12),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(34,211,238,.08),transparent 55%)}
.shell{width:940px;max-width:100%;display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.brandpane{padding:38px 34px;background:linear-gradient(160deg,#0d1420,#0a0f18);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
:root[data-theme="light"] .brandpane{background:linear-gradient(160deg,#f7f9fc,#eef2f8)}
.lead{font-size:22px;font-weight:750;line-height:1.3;letter-spacing:-.4px}
.lead .hl{background:linear-gradient(90deg,#3b82f6,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.feat{display:flex;flex-direction:column;gap:14px}
.fitem{display:flex;gap:12px;align-items:flex-start}
.fitem .fi{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--bg3);display:grid;place-items:center;color:var(--cyan)}
.fitem .fi svg{width:16px;height:16px}
.fitem b{font-size:13px;font-weight:650}.fitem p{margin:2px 0 0;font-size:12px;color:var(--txt3)}
.authpane{padding:38px 40px;display:flex;flex-direction:column;justify-content:center;min-height:520px}
.authpane h2{margin:0 0 5px;font-size:20px;font-weight:750}
.authpane .sub{color:var(--txt3);font-size:13px;margin-bottom:22px}
.field.big{margin-bottom:16px}
.ibox{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:11px 13px}
.ibox:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.ibox svg{width:16px;height:16px;color:var(--txt3);flex:0 0 16px}
.ibox input{border:0;background:transparent;color:var(--txt);outline:none;width:100%;font-size:14px}
.divider{display:flex;align-items:center;gap:12px;color:var(--txt3);font-size:11.5px;margin:16px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.otp{display:flex;gap:9px;justify-content:center;margin:6px 0 18px}
.otp input{width:46px;height:56px;text-align:center;font-size:22px;font-weight:700;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:var(--txt);outline:none}
.otp input:focus{border-color:var(--acc)}
.note{display:flex;align-items:center;gap:9px;font-size:12px;padding:10px 12px;border-radius:9px;margin-top:12px}
.note svg{width:16px;height:16px;flex:0 0 16px}
.note.warn{background:var(--warnbg);color:var(--warn);border:1px solid rgba(245,158,11,.25)}
.note.err{background:var(--errbg);color:var(--err);border:1px solid rgba(239,68,68,.25)}
.note.ok{background:var(--okbg);color:var(--ok);border:1px solid rgba(34,197,94,.25)}
.note.ro{background:var(--bg3);color:var(--txt2);border:1px solid var(--line2)}
.note.ro b{color:var(--txt)}
.qrbox{background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:14px;text-align:center;margin-bottom:14px}
.qrbox .qrimg{display:block;margin:0 auto 12px;border-radius:8px;background:#fff;padding:8px}
.qrbox .secret{font-family:ui-monospace,monospace;font-size:14px;letter-spacing:1px;color:var(--txt);word-break:break-all}
.steps{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:12px;color:var(--txt3)}
.steps .s{display:flex;align-items:center;gap:7px}
.steps .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--bg3);color:var(--txt3);border:1px solid var(--line2)}
.steps .s.on .n{background:var(--acc);color:#fff;border-color:var(--acc)}
.steps .bar{flex:1;height:1px;background:var(--line2)}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--txt3);font-size:12.5px;cursor:pointer;margin-top:16px}
.backlink:hover{color:var(--txt)}
.backlink svg{width:14px;height:14px;flex:0 0 14px}
.bcodes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
.bcode{background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:9px 8px;text-align:center;font-family:ui-monospace,monospace;font-size:14px;letter-spacing:1px;color:var(--txt);user-select:all}
.brow{display:flex;gap:8px}
.themebtn{position:fixed;top:16px;right:16px;cursor:pointer;color:var(--txt3);width:18px;height:18px;z-index:5}
/* im Portal gibt es den Theme-Toggle in der Sidebar-Fußzeile → fixen ausblenden (überlappt sonst "Neue Instanz") */
body:has(.app) .themebtn{display:none}

/* ---------- responsive ---------- */
.hamb{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);
  place-items:center;cursor:pointer;color:var(--txt2);flex:0 0 38px}
.hamb svg{width:18px;height:18px}
.sidebackdrop{display:none;position:fixed;inset:0;background:rgba(4,7,12,.55);z-index:55}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Info & Lizenzen ---------- */
.about{display:flex;flex-direction:column;gap:14px;max-width:1000px}
.about .card{padding:0}
.about .card h4{margin:0;padding:15px 17px 0;font-size:14px;display:flex;align-items:center;gap:9px}
.about .card h4 .cnt{font-size:11px;font-weight:600;color:var(--txt3);background:var(--bg3);
  border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums}
/* Karten-Untertitel bekommen den Karten-Innenrand … */
.about .card p.sub{margin:5px 17px 0;font-size:12.5px}
/* … der Kopf hat seinen eigenen Rand, hier waere er doppelt (Spezifitaet muss
   die Regel darueber schlagen, sonst rutscht die Zeile ein). */
.about .card.abouthead p.sub{margin-left:0;margin-right:0}
.about .card .tscroll{margin-top:11px}
.about .card > .note{margin:0 17px 15px}
.abouthead{display:flex;align-items:flex-start;gap:15px;padding:19px!important}
.abouthead .logo{width:46px;height:46px;border-radius:12px;flex:0 0 46px;
  background:linear-gradient(135deg,#3b82f6,#22d3ee);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:22px}
.abouthead h3{margin:0 0 3px;font-size:19px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.abouthead .ver{font-size:12px;font-weight:600;color:var(--txt3);font-variant-numeric:tabular-nums}
.abouthead p{margin:0;font-size:13px}
.abouthead p.sub{margin-top:4px;font-size:12px}
.about > .note{background:var(--bg2);border:1px solid var(--line);color:var(--txt2);
  display:block;line-height:1.6;padding:13px 15px;margin:0;font-size:12.5px}
.abouttbl td{padding:9px 17px;vertical-align:top}
.abouttbl td:first-child{font-size:12.5px}
.abouttbl td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;color:var(--txt3);white-space:nowrap}
.abouttbl td.muted{font-size:12.5px}
.abouttbl a{color:var(--acc);text-decoration:none}
.abouttbl a:hover{text-decoration:underline}
.lic{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
  padding:2px 8px;border-radius:5px;background:var(--bg3);color:var(--txt2)}
/* Urheberrecht + Marken: Fliesstext statt Tabelle, daher eigener Innenrand */
.about .cardbody{padding:11px 17px 16px;display:flex;flex-direction:column;gap:9px}
.about .cardbody p{margin:0;font-size:12.5px;line-height:1.65;max-width:72ch}
.abouthead .copy{margin-top:5px;font-size:12.5px;font-weight:600;color:var(--txt2)}
.copyline{font-size:13px!important;font-weight:600;color:var(--txt)}
ul.marks{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px}
ul.marks li{font-size:12.5px;color:var(--txt2);line-height:1.55}
/* Aussagenliste: je Punkt eine Kernaussage fett voran, danach die Begruendung */
ul.facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
ul.facts li{font-size:12.5px;color:var(--txt2);line-height:1.6;padding-left:19px;position:relative;max-width:72ch}
ul.facts li::before{content:"";position:absolute;left:4px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--acc)}
ul.facts li b{color:var(--txt)}
/* Urheberrecht in der Seitenleiste: anklickbar, fuehrt zur Info-Seite */
.side .version.copy{cursor:pointer;padding-top:0;font-size:10.5px}
.side .version.copy:hover{color:var(--txt2)}

@media(max-width:900px){
  .side{position:fixed;top:0;left:0;transform:translateX(-100%);transition:transform .2s ease;z-index:60;box-shadow:var(--shadow)}
  .side.open{transform:none}
  .sidebackdrop.show{display:block}
  .hamb{display:grid}
  .stats{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .brandpane{display:none}
  .shell{grid-template-columns:1fr}
  .top{padding:12px 16px}
  .content{padding:16px}
  .authpane{padding:30px 22px;min-height:auto}
  .loginwrap{padding:16px}
  .dhead{flex-wrap:wrap}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:12px 13px}
  .stat .v{font-size:22px}
  .top h1{font-size:16px}
  .top .btn.pri{padding:8px 11px}
  thead th.col-proto,tbody td.col-proto,thead th.col-created,tbody td.col-created{display:none}
  tbody td{padding:10px 12px}
  thead th{padding:9px 12px}
  .modal .mb{padding:16px 16px}
  .otp{gap:6px}
  .otp input{width:40px;height:50px;font-size:19px}
  .row2{grid-template-columns:1fr}
}

/* instance logs */
.logbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.inp.sm{width:auto;padding:5px 8px;font-size:12.5px}
.lchk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt2);cursor:pointer;user-select:none}
.logbox{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;color:var(--txt2);
  max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* monitoring dashboard */
.mongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:2px 0 14px}
.mcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.mcard.gring{display:flex;align-items:center;gap:14px}
.ring .rgv{fill:var(--txt);font-weight:700;font-size:17px}
.ring .rgl{fill:var(--txt3);font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.gmeta .gt{font-weight:600;font-size:13px}
.gmeta .gs{color:var(--txt3);font-size:11.5px;margin-top:3px}
.mct{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--txt3);margin-bottom:6px}
.lcwrap{position:relative}
.lc{display:block;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.lcgrid{position:absolute;right:6px;top:0;height:90px;display:flex;flex-direction:column;justify-content:space-between;
  font-size:9.5px;color:var(--txt3);pointer-events:none;text-align:right}
.lccur{position:absolute;left:2px;top:2px;font-size:15px;font-weight:700}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.ministat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px}
.ministat .msk{font-size:11px;color:var(--txt3);font-weight:600}
.ministat .msv{font-size:19px;font-weight:700;margin:3px 0 7px}
.ministat .msv small{font-size:12px;color:var(--txt3);font-weight:500}
.ubar{height:6px;border-radius:6px;background:var(--bg3);overflow:hidden}
.ubar>div{height:100%;border-radius:6px;transition:width .4s}
.cpucell{display:flex;align-items:center;gap:9px}
.spark{display:block}

/* automatic backups */
.bkform{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}

/* alert badge */
.badge.alert{background:var(--err)!important;color:#fff!important}

/* editions drag-reorder */
.edrow{display:flex;gap:8px;margin-bottom:6px;align-items:center}
.edrow .drag{cursor:grab;color:var(--txt3);padding:0 2px;font-size:16px;line-height:1;user-select:none}
.edrow.dragging{opacity:.45}

/* reworked login: single centered card */
.authcard{width:390px;max-width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:18px;
  padding:34px 32px 24px;box-shadow:var(--shadow)}
.acbrand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
.acbrand b{line-height:1.1}
.authcard .authpane{padding:0;min-height:auto;display:block}
.trustline{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--txt3);text-align:center;flex-wrap:wrap}
.trustline svg{width:13px;height:13px;color:var(--ok);flex:0 0 auto}
@media(max-width:480px){.authcard{padding:26px 20px 20px}}

/* app tiles */
.applist{display:flex;flex-direction:column;gap:10px;margin:2px 0 6px}
.apptile{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;transition:.12s}
.apptile:hover{border-color:var(--line2)}
.apptile.installed{border-color:rgba(34,197,94,.3)}
.apptile.blocked{opacity:.7}
.appicon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:linear-gradient(135deg,#3b82f6,#22d3ee);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.apptile.blocked .appicon{background:linear-gradient(135deg,#64748b,#94a3b8)}
.appmeta{flex:1;min-width:0}
.apptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apptop b{font-size:14px}
.appver{font-size:11px;color:var(--txt3)}
.apppill{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.apppill.installed{background:var(--okbg);color:var(--ok)}
.apppill.avail{background:var(--bg3);color:var(--txt3)}
.apppill.blocked{background:var(--errbg);color:var(--err)}
.appmeta p{margin:3px 0 0;font-size:12px;color:var(--txt3);line-height:1.4}
.appact{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
/* store lock box */
.storelock{display:flex;align-items:center;gap:13px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:12px}
.storelock.on{border-color:rgba(239,68,68,.35);background:var(--errbg)}
.storelock .slk{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--bg3);display:grid;place-items:center;color:var(--txt3)}
.storelock.on .slk{color:var(--err)}
.storelock .slk svg{width:16px;height:16px}
.storelock b{font-size:13px}.storelock p{margin:2px 0 0;font-size:11.5px;color:var(--txt3)}
/* toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 42px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--line2);border-radius:24px;transition:.15s}
.switch .track::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+.track{background:var(--err)}
.switch input:checked+.track::before{transform:translateX(18px)}
@media(max-width:560px){.apptile{flex-wrap:wrap}.appact{width:100%;justify-content:flex-start}}

/* role permission matrix */
.permgrid{display:grid;grid-template-columns:1fr;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.permrow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt2);cursor:pointer}
.permrow input{flex:0 0 auto}

/* ---------- labs: topology canvas ---------- */
.labcv{position:relative;height:calc(100vh - 190px);min-height:420px;overflow:hidden;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/26px 26px,var(--bg)}
.labcv .wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.labcv .wires path{fill:none;stroke-width:2}
.labcv .wires path.tp{stroke:var(--acc2,#22d3ee)}
.labcv .wires path.ip{stroke:var(--acc);stroke-dasharray:6 4}
.labcv .wires text{fill:var(--txt3);font:10.5px ui-monospace,monospace;stroke:none}
.lnode{position:absolute;width:128px;transform:translate(-50%,-50%);user-select:none;text-align:center;cursor:grab}
.lnode.ro{cursor:default}
.lnode .lbox{width:62px;height:62px;margin:0 auto;border-radius:14px;background:var(--card);border:1px solid var(--line2,var(--line));display:grid;place-items:center;color:var(--txt2);position:relative}
.lnode .lbox svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.lnode .lst{position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg);background:var(--stop)}
.lnode.run .lbox{border-color:var(--ok);color:var(--ok)}
.lnode.run .lst{background:var(--ok)}
.lnode.err .lbox{border-color:var(--err);color:var(--err)}.lnode.err .lst{background:var(--err)}
.lnode.sel .lbox{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.lnode .lnm{margin-top:6px;font-size:12px;font-weight:700;line-height:1.25}
.lnode .lde{font-size:10.5px;color:var(--txt3);font-family:ui-monospace,monospace}
.lnode .ltag{position:absolute;left:-6px;top:-6px;font-size:9px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 4px;color:var(--txt3)}
.labempty{position:absolute;inset:0;display:grid;place-items:center;color:var(--txt3);font-size:13px;text-align:center;padding:20px}
.memrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}

/* ---------- labs: EVE-NG style workspace (palette | canvas | inspector) ---------- */
.labwork{display:grid;grid-template-columns:222px 1fr 288px;gap:12px;align-items:start}
@media(max-width:1180px){.labwork{grid-template-columns:1fr}.labpal,.labinsp{max-height:none}}
.labpal,.labinsp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;max-height:calc(100vh - 190px);overflow:auto}
.labpal .psec{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);font-weight:700;padding:10px 2px 6px}
.pitem{display:flex;align-items:center;gap:9px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;margin-bottom:5px;cursor:grab;background:var(--bg);font-size:12.3px;font-weight:600}
.pitem:hover{border-color:var(--acc)}
.pitem.dis{cursor:default;opacity:.55}
.pitem .pi{width:25px;height:25px;flex:0 0 25px;border-radius:7px;display:grid;place-items:center;background:var(--acc);color:#fff}
.pitem .pi svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pitem small{display:block;font-size:9.8px;color:var(--txt3);font-weight:400}
.labinsp h4{margin:0 0 2px;font-size:13.5px}
.labinsp .isub{font-size:11.5px;color:var(--txt3);margin-bottom:10px}
.labmenu{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:5px;min-width:190px;display:none}
.labmenu.show{display:block}
.labmenu .mi{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:12.3px;cursor:pointer;color:var(--txt2)}
.labmenu .mi:hover{background:var(--bg);color:var(--txt)}
.labmenu .mi svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.labmenu .mi.dgr:hover{color:var(--err)}
.labmenu .msep{height:1px;background:var(--line);margin:4px 2px}
.labterm{position:fixed;right:22px;bottom:22px;width:420px;max-width:calc(100vw - 44px);z-index:50;background:#05070a;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45);display:none;overflow:hidden}
.labterm.big{width:760px}
.labterm.show{display:block}
.labterm .th{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--card);border-bottom:1px solid var(--line);font-size:12px;font-weight:700}
.labterm .th .x{margin-left:auto;cursor:pointer;color:var(--txt3)}
/* the log pane stays small by default and is user-resizable (drag the corner);
   .big widens the whole window, .labterm.min collapses it to its title bar */
.labterm pre{margin:0;padding:10px 12px;height:150px;min-height:60px;max-height:60vh;overflow:auto;resize:vertical;
  font-family:ui-monospace,monospace;font-size:11px;line-height:1.45;color:#dbe4ee;white-space:pre-wrap;word-break:break-word}
.labterm.min pre{display:none}
.labterm .th .tb{cursor:pointer;color:var(--txt3);font-size:13px;line-height:1}
.labterm .th .tb:hover{color:var(--txt)}

/* ---------- labs: virtual KNX devices ---------- */
.lnode.dev .lbox{border-radius:12px}
.lnode.dev.on .lbox{border-color:var(--warn);color:var(--warn);box-shadow:0 0 18px rgba(245,158,11,.35)}
.devch{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:12.3px}
.devch .cn{font-weight:600;min-width:58px}
.devch .cg{font-family:ui-monospace,monospace;font-size:11px;color:var(--txt3);flex:1}
.bulb{width:16px;height:16px;border-radius:50%;background:var(--bg);border:1px solid var(--line2,var(--line));flex:0 0 16px}
.bulb.on{background:radial-gradient(circle at 40% 35%,#fff3c4,#ffb020);border-color:var(--warn);box-shadow:0 0 10px rgba(255,176,32,.6)}
.gafield{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.gafield input{width:100%}

/* ---------- labs: product catalogue ---------- */
.pitem .pimg{width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:var(--bg);border:1px solid var(--line);object-fit:contain;padding:2px}
.prodhead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.prodhead img{width:110px;height:76px;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px}
.prodhead b{font-size:13.5px;display:block}
.prodhead .pv{font-size:11.5px;color:var(--txt3)}
.funclist{margin:6px 0 0;padding-left:16px;font-size:12px;color:var(--txt2);line-height:1.55}
.funclist li{margin-bottom:2px}
.simnote{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:8px 10px;font-size:11.8px;color:var(--txt2);margin-top:8px}

/* ---------- labs: undocked / fullscreen workspace ----------
   The lab detaches from the portal shell and takes the whole screen: sidebar, topbar
   and page padding step aside, the canvas grows into the freed space. */
body.labfull .side,
body.labfull .top,
body.labfull .backlink,
body.labfull .dhead { display:none !important }
body.labfull .main,
body.labfull .content { padding:0 !important; margin:0 !important; max-width:none !important }
body.labfull .app { display:block }
body.labfull .labwork{grid-template-columns:222px 1fr 288px;gap:0;height:100vh}
body.labfull .labpal,
body.labfull .labinsp{max-height:100vh;height:100vh;border-radius:0;border-top:0;border-bottom:0}
body.labfull .labcv{height:100vh;border-radius:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.labfullbtn{position:fixed;right:16px;top:14px;z-index:70}
body.labfull .labfullbtn{top:12px}

/* ---------- labs: bus view (a TP line is a rail, devices hang off it) ---------- */
.labviews{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-right:6px}
.labviews div{padding:5px 10px;font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;background:var(--card)}
.labviews div.on{background:var(--acc);color:#fff}
.labsearch{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px;margin-bottom:8px;outline:none}
.labsearch:focus{border-color:var(--acc)}
.psec{cursor:pointer;user-select:none}
.psec.closed + .pgroup{display:none}
.lane{position:relative;margin-bottom:18px;padding:12px 16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.lanehead{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:13px}
.lanehead .seg2{font-size:10.5px;color:var(--txt3);font-family:ui-monospace,monospace}
.rail{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--acc),rgba(59,130,246,.2));margin:40px 4px 0}
.rail.solo{background:linear-gradient(90deg,var(--stop),transparent)}
.devs{display:flex;gap:14px;padding:0 4px;margin-top:-84px;flex-wrap:wrap}
.bnode{width:128px;position:relative;cursor:pointer}
.bnode .stem{position:absolute;left:50%;top:-28px;width:2px;height:28px;background:var(--line)}
.bnode.run .stem{background:var(--ok);opacity:.6}
.bnode .card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px;text-align:center;position:relative}
.bnode:hover .card{border-color:var(--acc)}
.bnode.sel .card{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.bnode.run .card{border-color:var(--ok)}
.bnode .st{position:absolute;right:8px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--stop)}
.bnode.run .st{background:var(--ok);box-shadow:0 0 8px rgba(34,197,94,.6)}
.bnode .ic{width:34px;height:34px;margin:2px auto 6px;border-radius:9px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--txt2)}
.bnode .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.bnode.run .ic{color:var(--ok)}
.bnode.inst .ic{background:linear-gradient(140deg,#3b82f6,#22d3ee);color:#fff;border:0}
.bnode .nm{font-size:11.8px;font-weight:700;line-height:1.25}
.bnode .ia{font-size:10px;color:var(--txt3);font-family:ui-monospace,monospace}
.bnode .live{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:7px;min-height:13px}
.lbulb{width:11px;height:11px;border-radius:50%;background:var(--card);border:1px solid var(--line)}
.lbulb.on{background:radial-gradient(circle at 40% 35%,#fff3c4,#ffb020);border-color:var(--warn);box-shadow:0 0 8px rgba(255,176,32,.55)}
.lbar{width:34px;height:6px;border-radius:3px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.lbar i{display:block;height:100%;background:var(--acc)}
/* inspector tabs */
.itabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0 10px}
.itab{padding:6px 9px;font-size:12px;font-weight:600;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent}
.itab.on{color:var(--txt);border-bottom-color:var(--acc)}
.ipane{display:none}.ipane.on{display:block}
/* bus monitor strip */
.busmon{height:180px;background:#05070a;border:1px solid var(--line);border-radius:12px;margin-top:12px;display:none;flex-direction:column;overflow:hidden}
.busmon.show{display:flex}
.busmon .bh{display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--card);border-bottom:1px solid var(--line);font-size:12px;font-weight:700}
.busmon .bb{flex:1;overflow:auto;padding:6px 10px;font-family:ui-monospace,monospace;font-size:11.3px;color:#dbe4ee}
.tgrow{display:grid;grid-template-columns:64px 62px 62px 84px 1fr;gap:8px;padding:2px 4px;border-radius:4px}
.tgrow:hover{background:rgba(255,255,255,.06)}
.tgrow .tt{color:#6b7684}.tgrow .ts{color:#a78bfa}.tgrow .td{color:#22d3ee}.tgrow .tk{color:#f59e0b}
.busmon input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:3px 8px;font-size:11.5px;font-family:ui-monospace,monospace;outline:none;width:120px}

/* ---------- labs: icon sizing (this SPA sizes svg per context — an icon without a
   rule grows to its container, which is how a 16px glyph filled the whole screen) --- */
.lanehead svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8}
.busmon .bh svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.8}
.labviews svg,.labpal svg,.labinsp svg{width:15px;height:15px;flex:0 0 15px}
/* safety net: no icon inside the lab may ever exceed its line height */
.labwork svg{max-width:24px;max-height:24px}
.labwork .bnode .ic svg{max-width:19px;max-height:19px}
.lanehead{flex-wrap:wrap}
.lanehead b{white-space:nowrap}

/* the inspector must never scroll sideways — a channel row with many controls wraps */
.labinsp{overflow-x:hidden}
.devch{flex-wrap:wrap;row-gap:4px}
.devch .cg{min-width:0;overflow:hidden;text-overflow:ellipsis}
.devch input[type=number],.devch input[type=range]{max-width:76px}
.ipane{max-width:100%}

/* ---------- labs: device view (ETS-like editor) ---------- */
.devview{display:flex;gap:0;height:calc(100vh - 210px);min-height:460px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.dvtree{width:230px;flex:0 0 230px;border-right:1px solid var(--line);overflow:auto;padding:8px;background:var(--bg)}
.dvsec{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);font-weight:700;padding:9px 6px 4px}
.dvnode{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:7px;font-size:12.2px;cursor:pointer;color:var(--txt2)}
.dvnode:hover{background:var(--card);color:var(--txt)}
.dvnode.on{background:rgba(59,130,246,.14);color:var(--txt);font-weight:600}
.dvnode .ia{margin-left:auto;font-size:10px;color:var(--txt3);font-family:ui-monospace,monospace}
.dvdot{width:7px;height:7px;border-radius:50%;background:var(--stop);flex:0 0 7px}
.dvdot.run{background:var(--ok)}
.dvmain{flex:1;min-width:0;display:flex;flex-direction:column}
.dvhead{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.dvhead img{width:60px;height:44px;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px}
.dvhead h3{margin:0;font-size:14px}
.dvhead .m{font-size:11.3px;color:var(--txt3)}
.dvtabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line)}
.dvtab{padding:8px 11px;font-size:12.4px;font-weight:600;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent}
.dvtab.on{color:var(--txt);border-bottom-color:var(--acc)}
.dvtab .b{margin-left:5px;font-size:10px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:0 5px;color:var(--txt3)}
.dvbody{flex:1;min-height:0;display:flex}
.dvblocks{width:230px;flex:0 0 230px;border-right:1px solid var(--line);overflow:auto;padding:8px;background:var(--bg)}
.dvblk{padding:6px 8px;border-radius:7px;font-size:12.1px;color:var(--txt2);cursor:pointer;display:flex;gap:6px;align-items:center}
.dvblk:hover{background:var(--card);color:var(--txt)}
.dvblk.on{background:rgba(59,130,246,.14);color:var(--txt);font-weight:600}
.dvblk .n{margin-left:auto;font-size:10px;color:var(--txt3)}
.dvpane{flex:1;overflow:auto;padding:14px 16px}
.prow{display:grid;grid-template-columns:1fr 210px 96px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.prow .pl{font-size:12.7px}
.prow .pl small{display:block;color:var(--txt3);font-size:10.6px}
.tagx{font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px;white-space:nowrap;display:inline-block}
.tagx.on{background:var(--okbg);color:var(--ok)}
.tagx.doc{background:var(--bg);color:var(--txt3);border:1px solid var(--line)}
.gacell{font-family:ui-monospace,monospace;font-size:11.6px;width:96px;text-align:center}
.dvlegend{font-size:11px;color:var(--txt3);margin-bottom:12px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}

/* Knoten-Wahl und Knoten-Seite (Nachtrag knexo_knoten_auswahl_v1) */
.knoten{display:grid;gap:6px}
.kw{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.kw.an{border-color:var(--acc);box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.kw.still{opacity:.55;cursor:not-allowed}
.kw .rad{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2)}
.kw.an .rad{border-color:var(--acc);background:radial-gradient(var(--acc) 45%,transparent 50%)}
.kw .name{font-weight:600}
.kw .unter{font-size:11.5px;color:var(--txt3)}
.kw .last{font-size:11px;text-align:right;white-space:nowrap}
.pille{display:inline-block;font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid;margin-left:6px;vertical-align:1px}
.pille.oeff{color:var(--acc);border-color:var(--acc)}
.pille.lan{color:var(--warn);border-color:var(--warn)}
.pille.weg{color:var(--err);border-color:var(--err)}
.balken{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden;margin-top:4px;min-width:80px}
.balken i{display:block;height:100%;background:var(--acc)}
.seg .opt.zu{opacity:.4;cursor:not-allowed}
.hint.warn{color:var(--warn)}
.hint.fehlt{color:var(--err)}
.note.info{background:var(--bg3);border-color:var(--line2)}
/* Betriebsart plattform: Kopf und Fuss kommen aus dem gemeinsamen Rahmen (29-plattform.js).
   Spalte statt fester Hoehen; eigene Marke, Person und Abmelden stehen dort schon. */
.im-rahmen body{display:flex;flex-direction:column;min-height:100vh}
.im-rahmen #root{flex:1 1 auto;min-height:0}
.im-rahmen .app{min-height:0;height:100%}
.im-rahmen .side{height:auto;position:static}
.im-rahmen .side .brand,.im-rahmen .side .foot,.im-rahmen .side .version,.im-rahmen .themebtn{display:none}
/* Besitzer (31-besitz.js): Auswahl der Firma im Dialog, gewaehlte Zeilen, Art-Marke */
.fwahlen{display:grid;gap:6px}
.fwahlen .fwahl{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.fwahlen .fwahl.an{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 25%,transparent)}
.fwahlen .fwahl .mono{display:block;font-size:11px}
.artmarke{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--bg3);color:var(--txt2)}
tr.gewaehlt td{background:color-mix(in srgb,var(--acc) 8%,transparent)}