:root{--bg:#0b0f17;--panel:#141b2b;--panel2:#18213a;--line:#232d45;--txt:#dce3f1;--mut:#7d89a6;--acc:#4fc3f7;--ok:#2fd27a;--warn:#f5a142;--bad:#ff5a6a;--mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --trk:#5d6a86;--set:#2fd27a;--shunt:#e8edf7;--setting:#f5c542;--occ:#ff4d5e;--gfm:#b36bff}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font:14px/1.45 "Segoe UI",Inter,system-ui,-apple-system,sans-serif}
body{background:radial-gradient(1100px 600px at 10% -10%,#17305a55,transparent),radial-gradient(900px 500px at 110% 110%,#2fd27a1c,transparent),var(--bg);display:flex;flex-direction:column;height:100vh}
a{color:var(--acc)}
.mut{color:var(--mut)}.small{font-size:12px}
.bar{display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--line);background:#0d1320cc;min-height:56px}
.logo{font-size:19px;font-weight:700;display:flex;align-items:center;color:var(--txt);text-decoration:none}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);margin-right:10px}
.world{color:var(--mut);font-family:var(--mono);font-size:12px}
.tabs{display:flex;gap:2px;margin-left:10px}
.tabs a{color:var(--mut);text-decoration:none;padding:7px 12px;border-radius:8px;font-weight:600;font-size:13px}
.tabs a:hover{color:var(--txt);background:#ffffff08}
.tabs a.on{color:var(--txt);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
.grow{flex:1}
.me{font-size:13px}.me b{color:var(--acc)}
.btn{display:inline-block;text-align:center;text-decoration:none;background:var(--acc);color:#04121c;border:0;border-radius:8px;padding:9px 16px;font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer}
.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{border-color:#3a4765;filter:none}
.btn.red{background:transparent;color:#ffb3bb;border:1px solid #ff5a6a55}
.btn.big{padding:12px 22px;font-size:14px;width:100%}.btn.small{padding:5px 10px;font-size:12px}
.lnk{background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;font-size:12px;padding:0}
input{background:#0b1019;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:10px 11px;font:inherit;outline:none;width:100%}
input:focus{border-color:var(--acc)}
input[type=checkbox]{width:auto;accent-color:var(--acc);margin:3px 0 0}
.fld{display:flex;flex-direction:column;gap:5px;color:var(--mut);font-size:12px;margin-bottom:12px}
.ck{display:flex;gap:9px;align-items:flex-start;font-size:13px;margin:4px 0 14px;cursor:pointer}
.err{background:#3a1820;border:1px solid #ff5a6a66;color:#ffc2c9;padding:9px 12px;border-radius:8px;margin-bottom:12px}
.seg{display:flex;gap:4px;background:#0b1019;border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:16px}
.seg button{flex:1;background:none;border:0;color:var(--mut);padding:8px 12px;border-radius:7px;font:600 13px inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line)}
code{font-family:var(--mono);font-size:12px;word-break:break-all;background:#0b1019;border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* ---------- Startseite */
.landing{flex:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,420px);gap:56px;align-items:center;max-width:1120px;width:100%;margin:0 auto;padding:48px 24px}
.kicker{color:var(--ok);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:1.6px;margin-bottom:14px}
.hero h1{font-size:46px;line-height:1.08;margin:0 0 18px;letter-spacing:-.5px}
.lead{font-size:16px;color:#b7c1d8;max-width:560px;margin:0 0 26px}
.feat{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}
.feat li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 14px;background:#141b2b99;border:1px solid var(--line);border-radius:10px}
.feat b{color:var(--acc)}.feat span{color:var(--mut)}
.plat{color:var(--mut);font-size:12px;font-family:var(--mono)}
.card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 30px 80px #0007}
.card h2{margin:0 0 4px;font-size:21px}
.card p{margin:0 0 16px}
.closed{text-align:center;padding:6px 4px}
.closed .lock{font-size:30px;margin-bottom:6px}
.closed p{color:#b7c1d8;margin:0 0 12px}

/* ---------- Portal */
.portal{flex:1;min-height:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0}
.netz{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;padding:16px}
.page{overflow:auto;padding:28px 24px 60px;max-width:1120px;width:100%;margin:0 auto}
.pagehead h1{margin:0 0 6px;font-size:26px}
.pagehead p{margin:0 0 22px;max-width:720px}
.side{display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0}
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.box h3,.sect{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--mut)}
.sect{margin:28px 0 10px}
.box p{margin:10px 0 8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}.kv span{color:var(--mut)}.kv b{font-weight:600;font-family:var(--mono);font-size:12px;text-align:right}
.stlist,.maplist{display:flex;flex-direction:column;gap:6px}
.st{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:8px 10px;border-radius:8px;background:#0f1522;border:1px solid var(--line);cursor:pointer;color:var(--txt);text-align:left;font-family:inherit;width:100%}
.st:hover{border-color:var(--acc)}
.st b{font-weight:600}.st .c{font:11px var(--mono);color:var(--mut);margin-right:6px}
.st .who{font-size:12px;color:var(--mut);white-space:nowrap}.st .who.busy{color:#f5c542}.st .who.mine{color:var(--ok)}
.map{padding:8px 10px;border-radius:8px;background:#0f1522;border:1px solid var(--line);cursor:pointer}
.map.on{border-color:var(--acc)}
.map h4{margin:0;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.map .v{font-family:var(--mono);font-size:11px;color:var(--mut)}
.map .tag{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--mut);font-weight:500}
.map .tag.play{border-color:#2fd27a66;color:var(--ok)}

.mapcol{display:flex;flex-direction:column;min-height:0;min-width:0;gap:10px}
.maphead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.maphead h2{margin:0;font-size:18px}
.maphead .seg{margin:0;flex:0 1 auto;overflow-x:auto;max-width:100%}
.zoom{display:flex;gap:4px;margin-left:auto}
.mapwrap{position:relative;flex:1;min-height:320px;background:#080c14;border:1px solid var(--line);border-radius:12px;overflow:hidden}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map.drag{cursor:grabbing}
.live{position:absolute;top:10px;right:12px;font-size:11px;font-family:var(--mono);color:var(--ok);background:#0b1019cc;border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.live.off{color:var(--bad)}
.take{position:absolute;left:12px;bottom:12px;box-shadow:0 8px 24px #0009}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--mut)}
.lg{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--trk)}
.lg.set{background:var(--set)}.lg.shunt{background:var(--shunt)}.lg.setting{background:var(--setting)}.lg.occ{background:var(--occ)}.lg.gfm{background:var(--gfm)}
.trains{max-height:180px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.trains table{width:100%;border-collapse:collapse;font-size:12px}
.trains th,.trains td{padding:5px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.trains th{color:var(--mut);font-weight:500;position:sticky;top:0;background:var(--panel)}
.dl0{color:var(--ok)}.dl1{color:var(--warn)}.dl2{color:var(--bad)}

/* SVG */
.zone{fill:#121a2b;stroke:#1d2740}
.zlabel{fill:#3c4865;font-size:calc(var(--u,1) * 11px);font-family:var(--mono)}
.plat{fill:#1b2540;stroke:#2a3658}
.plabel{fill:#56627f;font-size:calc(var(--u,1) * 10px)}
.trk{stroke:var(--trk);stroke-width:3px;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.trk.siding,.trk.approach,.trk.exitTrack{stroke:#4a5672}
.trk.s2{stroke:var(--set)}.trk.s1{stroke:var(--setting)}.trk.s3{stroke:#8892a8}.trk.sh{stroke:var(--shunt)}
.trk.occ{stroke:var(--occ)}.trk.gfm{stroke:var(--gfm)}
.sig{stroke:#0b0f17;stroke-width:1px;vector-effect:non-scaling-stroke}
.sig.hp0{fill:#ff4d5e}.sig.ks1{fill:#2fd27a}.sig.ks2{fill:#f5c542}.sig.sh1,.sig.zs1{fill:#e8edf7}.sig.off{fill:#3a445e}
.sw{fill:#9aa5bf}.sw.fault{fill:var(--gfm)}
.tnum{font-family:var(--mono);font-weight:700;font-size:calc(var(--u,1) * 12px);fill:#fff;paint-order:stroke;stroke:#080c14;stroke-width:3px;vector-effect:non-scaling-stroke}
.tlbl{fill:#ff4d5e}
.stname{fill:#8a96b3;font-weight:600;font-size:calc(var(--u,1) * 14px)}
.node{fill:#18213a;stroke:#4fc3f7;stroke-width:2px;vector-effect:non-scaling-stroke}.node.portal{stroke:#56627f;fill:#0f1522}
.node.busy{stroke:#f5c542}.node.mine{stroke:var(--ok)}
.pick{cursor:pointer}
.pick:hover .node{fill:#24335a;stroke-width:3px}
.pick .hit{fill:transparent}
.nlabel{fill:#c9d2e6;font-size:calc(var(--u,1) * 13px)}
.nstaff{fill:#f5c542;font-size:calc(var(--u,1) * 11px)}
.line{stroke:#3a4765;stroke-width:4px;fill:none;vector-effect:non-scaling-stroke}.line.busy{stroke:#ff4d5e}

/* ---------- Downloads */
.best{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.dlcard{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.dlcard.rec{border-color:#4fc3f777;background:linear-gradient(180deg,#17304f66,var(--panel))}
.dlcard .os{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.dlcard .os svg{width:26px;height:26px;fill:var(--txt)}
.dlcard .badge{margin-left:auto;font:600 10px var(--mono);color:var(--acc);border:1px solid #4fc3f755;border-radius:999px;padding:2px 8px;text-transform:uppercase;letter-spacing:.6px}
.dlcard .hint{color:var(--mut);font-size:12px;min-height:18px}
.dlcard .none{color:var(--mut);font-size:13px;padding:10px 0}
.dlcard .opts{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.notes{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;background:#0f1522;white-space:pre-wrap;font-size:13px}
.dllist{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dlrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.dlrow:last-child{border-bottom:0}
.dlrow .n{font-weight:600}.dlrow .f{font:11px var(--mono);color:var(--mut);word-break:break-all}
.dlrow .sha{font:10px var(--mono);color:#56627f;word-break:break-all}
.dlrow .sz{font:12px var(--mono);color:var(--mut);white-space:nowrap}
.empty{padding:20px;color:var(--mut);text-align:center}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:28px}
.steps>div{background:#141b2b99;border:1px solid var(--line);border-radius:12px;padding:16px;position:relative}
.steps .num{position:absolute;top:12px;right:16px;font:700 28px var(--mono);color:#2a3550}
.steps h4{padding-right:30px}
.steps h4{margin:0 0 6px;font-size:15px}
.steps p{margin:0;color:#b7c1d8;font-size:13px}

/* ---------- Konten */
.admgrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
#v-admin{max-width:1280px}
.pwrow{display:flex;gap:6px}.pwrow input{font-family:var(--mono)}.pwrow .btn{white-space:nowrap}
.cred{margin-top:14px;border:1px solid #2fd27a55;background:#10261c;border-radius:10px;padding:12px}
.cred h4{margin:0 0 6px;color:var(--ok);font-size:13px}
.cred pre{margin:0 0 10px;white-space:pre-wrap;font:12px/1.5 var(--mono);color:var(--txt)}
.cnt{font-family:var(--mono);color:var(--acc);margin-left:6px}
.tblwrap{overflow-x:auto}
.users{width:100%;border-collapse:collapse;font-size:13px}
.users th{color:var(--mut);font-weight:500;font-size:12px;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.users td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.users tr:last-child td{border-bottom:0}
.users .role{font:600 10px var(--mono);text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:1px 7px;color:var(--mut)}
.users .role.admin{color:var(--acc);border-color:#4fc3f755}
.users .on{color:var(--ok)}.users .locked{color:var(--bad)}
.users .acts{display:flex;gap:4px;justify-content:flex-end;flex-wrap:nowrap}
.users th,.users td.mut{white-space:nowrap}
.users .note{color:var(--mut);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.users .you{font-size:11px;color:var(--mut)}

/* ---------- Dialog */
.dlg{position:fixed;inset:0;background:#05080dcc;display:grid;place-items:center;padding:16px;z-index:50;backdrop-filter:blur(3px)}
.dlgbox{position:relative;width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 30px 80px #000a}
.dlgbox .x{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--mut);font-size:16px;cursor:pointer;padding:6px}
.dlgbox .code{font:600 11px var(--mono);color:var(--acc);letter-spacing:.8px}
.dlgbox h2{margin:2px 0 10px;font-size:22px}
.ststat{font-size:13px;margin-bottom:6px}.ststat .busy{color:#f5c542}.ststat .free{color:var(--ok)}
.stmeta{color:var(--mut);font-size:12px;margin-bottom:14px;display:flex;flex-direction:column;gap:2px}
.ck.opt{background:#0f1522;border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.dlgact{display:flex;flex-direction:column;gap:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nohint{margin-top:12px;font-size:12px;color:#ffd9a8;background:#33240f;border:1px solid #f5a14255;border-radius:8px;padding:9px 11px}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 16px;z-index:60;box-shadow:0 10px 30px #0009;font-size:13px}
.toast.bad{border-color:#ff5a6a88}
.fatal{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--mut);text-align:center;padding:20px}

@media (max-width:960px){
  body{height:auto;min-height:100vh}
  .landing{grid-template-columns:1fr;gap:28px;padding:20px 16px}
  .landing .card{order:-1}
  .feat{display:none}
  .hero h1{font-size:34px}
  .feat li{grid-template-columns:1fr;gap:2px}
  .netz{grid-template-columns:1fr;padding:12px}
  .mapwrap{min-height:60vh}
  .mapcol{order:-1}
  .maphead .zoom{margin-left:0}
  .bar{flex-wrap:wrap;padding:10px 16px;gap:8px 14px}
  .tabs{order:5;width:100%;margin:0;overflow-x:auto}
  .world{display:none}
  .admgrid{grid-template-columns:1fr}
  .page{padding:20px 16px 48px}
  .dlrow{grid-template-columns:1fr;gap:6px}
}
.users .btn{white-space:nowrap}

/* ---------- Netzkarte: Netzatlas (Europa → Land → Region → Stellwerk, Ruhrgebiet spielbar) */
.atlas{position:absolute;inset:0;display:flex;flex-direction:column;
  --na-land:#111a2a;--na-edge:#24314b;--na-rail:#1c2639;--na-trk:#4d5a78;--na-route:#4fc3f7;--na-x:#ff7a6b;--na-play:#2fd27a;--na-busy:#f5c542;--na-chip:#18213a}
.na-loading{margin:auto;color:var(--mut);font-size:13px}
.na-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 10px;border-bottom:1px solid var(--line);background:#0d1320ee}
.na-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-weight:600;font-size:14px;min-width:0;flex:1 1 240px}
.na-crumbs button{all:unset;cursor:pointer;padding:3px 7px;border-radius:6px;color:var(--mut)}
.na-crumbs button:hover{color:var(--txt);background:var(--na-chip)}
.na-crumbs button[aria-current]{color:var(--txt)}
.na-crumbs span{color:var(--mut);opacity:.6}
.na-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.na-btn{font:600 12px inherit;font-family:inherit;color:var(--txt);background:var(--na-chip);border:1px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.na-btn:hover:not(:disabled){border-color:var(--acc)}
.na-btn:disabled{opacity:.35;cursor:default}
.na-btn.on{border-color:var(--acc);color:var(--acc)}
.na-btn.wide{width:100%;margin-top:6px;padding:8px}
.na-seg{display:inline-flex;gap:0}.na-seg .na-btn:first-child{border-radius:7px 0 0 7px}.na-seg .na-btn:last-child{border-radius:0 7px 7px 0;border-left:0}
.na-search{position:relative}
.na-search input{padding:6px 10px;width:210px;max-width:52vw;font-size:13px}
.na-results{position:absolute;right:0;top:calc(100% + 4px);width:300px;max-width:86vw;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px #000a;max-height:60vh;overflow:auto;z-index:20}
.na-results button{all:unset;display:flex;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:7px 10px;cursor:pointer;font-size:13px}
.na-results button:hover,.na-results button.act{background:var(--na-chip)}
.na-results small{color:var(--mut);font-size:11px;text-align:right}
.na-results .none{padding:8px 10px;color:var(--mut);font-size:13px}
.na-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}
.na-mapwrap{position:relative;min-width:0;min-height:0;overflow:hidden}
.na-map{width:100%;height:100%;display:block;touch-action:none;cursor:grab;--k:1}
.na-map.drag{cursor:grabbing}
.na-land path{fill:var(--na-land);stroke:var(--na-edge);stroke-width:.8;vector-effect:non-scaling-stroke}
.na-rail path{fill:none;stroke:var(--na-rail);stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.na-net path{stroke-linejoin:round;fill:none;stroke:var(--na-trk);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;transition:opacity .25s,stroke .25s}
.na-net path.pl{stroke:#2fd27a99;stroke-width:1.5}
.na-net path.x{stroke:var(--na-x);stroke-width:1.2;stroke-dasharray:3 2;opacity:.6}
.na-net path.dim{opacity:.16}
.na-net path.on{stroke:var(--na-route);stroke-width:2.1}
.na-net path.x.on{stroke:var(--na-x);stroke-width:1.8}
.na-map.tcmode .na-net path.on{stroke:#3a4a6a;stroke-width:1.4}
.na-stns circle{r:calc(var(--k) * var(--sr,1.6px));fill:#dce3f1;stroke:#0b0f17;stroke-width:.8;vector-effect:non-scaling-stroke;cursor:pointer;transition:opacity .25s}
.na-stns circle.tc{fill:var(--na-play)}
.na-stns.dim circle{opacity:.18}
.na-stns.on circle{r:calc(var(--k) * var(--sr,1.6px) * 1.6);stroke:var(--na-route);stroke-width:1.3}
.na-map.tcmode .na-stns.on circle{opacity:.55}
.na-stns circle:hover{fill:var(--na-route)}
.na-rlabels text,.na-slabels text{font-weight:600;paint-order:stroke;stroke:#0b0f17;stroke-width:calc(var(--k) * 3px);stroke-linejoin:round;fill:var(--txt);cursor:pointer}
.na-rlabels text{font-size:calc(var(--k) * 13px);text-anchor:middle}
.na-rlabels text.u{font-size:calc(var(--k) * 17px);text-transform:uppercase;letter-spacing:.08em;fill:#b9c4dc}
.na-rlabels text:hover{fill:var(--na-route)}
.na-slabels text{font-size:calc(var(--k) * 11.5px);font-weight:500}
.na-slabels text.far{fill:var(--mut);font-weight:400}
.na-slabels text.sel{fill:var(--na-route);font-weight:700;font-size:calc(var(--k) * 13px)}
.na-sel path{fill:none;stroke:var(--na-route);stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.na-sel path.x{stroke:var(--na-x)}
.na-sel circle{r:calc(var(--k) * 7px);fill:none;stroke:var(--na-route);stroke-width:2.4;vector-effect:non-scaling-stroke}
/* Spielbar-Markierung */
.na-pin{cursor:pointer}
.na-pin .core{r:calc(var(--k) * 6px);fill:var(--na-play);stroke:#0b0f17;stroke-width:calc(var(--k) * 2px)}
.na-pin .pulse{r:calc(var(--k) * 6px);fill:none;stroke:var(--na-play);stroke-width:calc(var(--k) * 2px);transform-box:fill-box;transform-origin:center;animation:naPulse 2.2s ease-out infinite}
@keyframes naPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.na-pin .lbl{font-weight:700;font-size:calc(var(--k) * 13px);fill:var(--na-play);paint-order:stroke;stroke:#0b0f17;stroke-width:calc(var(--k) * 3.5px);stroke-linejoin:round;text-anchor:middle;transform:translateY(calc(var(--k) * 22px))}
.na-pin .lbl.big{font-size:calc(var(--k) * 15px)}
.na-pin .lbl.side{text-anchor:end;transform:translate(calc(var(--k) * -14px),calc(var(--k) * 4.5px))}
.na-pin:hover .lbl{fill:#fff}
/* TrainControll-Ebene */
.na-tcl path{fill:none;stroke:#7fe0ab;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.9}
.na-tcl path.busy{stroke:var(--occ);stroke-width:4}
.tcn{cursor:default}
.tcn[data-pick]{cursor:pointer}
.tcn .dot{r:calc(var(--k) * 4px);fill:#dce3f1;stroke:#0b0f17;stroke-width:calc(var(--k) * 1.5px)}
.tcn.main .dot{r:calc(var(--k) * 8px);fill:var(--acc);stroke:#0b0f17;stroke-width:calc(var(--k) * 2.5px)}
.tcn.main .halo{r:calc(var(--k) * 15px);fill:#4fc3f71f;stroke:#4fc3f766;stroke-width:calc(var(--k) * 1px)}
.tcn.main.busy .dot{fill:var(--na-busy)}.tcn.main.busy .halo{fill:#f5c5421f;stroke:#f5c54266}
.tcn.main.mine .dot{fill:var(--na-play)}.tcn.main.mine .halo{fill:#2fd27a24;stroke:#2fd27a88}
.tcn.portal .dot{r:calc(var(--k) * 4.5px);fill:#0b0f17;stroke:#7d89a6;stroke-width:calc(var(--k) * 1.6px)}
.tcn[data-pick]:hover .dot{fill:#fff}
.tcn[data-pick]:focus-visible{outline:none}.tcn[data-pick]:focus-visible .halo{stroke:#fff}
.tcn text{text-anchor:middle;paint-order:stroke;stroke:#0b0f17;stroke-linejoin:round;pointer-events:none}
.tcn .tname{font-weight:700;font-size:calc(var(--k) * 14px);fill:#fff;stroke-width:calc(var(--k) * 4px)}
.tcn .ln{transform:translateY(calc(var(--k) * -30px))}.tcn .tstat.ln{transform:translateY(calc(var(--k) * -16px))}
.tcn .ls{transform:translateY(calc(var(--k) * 28px))}.tcn .tstat.ls{transform:translateY(calc(var(--k) * 42px))}
.tcn .lw{text-anchor:end;transform:translate(calc(var(--k) * -17px),calc(var(--k) * -2px))}.tcn .tstat.lw{transform:translate(calc(var(--k) * -17px),calc(var(--k) * 12px))}
.tcn .le{text-anchor:start;transform:translate(calc(var(--k) * 17px),calc(var(--k) * -2px))}.tcn .tstat.le{transform:translate(calc(var(--k) * 17px),calc(var(--k) * 12px))}
.tcn .tname.sm{font-weight:600;font-size:calc(var(--k) * 11px);fill:#b9c4dc;stroke-width:calc(var(--k) * 3px);transform:translateY(calc(var(--k) * -9px))}
.tcn .tname.pt{font-weight:500;font-size:calc(var(--k) * 11px);fill:var(--mut);stroke-width:calc(var(--k) * 3px);transform:translateY(calc(var(--k) * -10px))}
.tcn .tstat{font-family:var(--mono);font-size:calc(var(--k) * 10.5px);fill:var(--acc);stroke-width:calc(var(--k) * 3px)}
.tcn.busy .tstat{fill:var(--na-busy)}.tcn.mine .tstat{fill:var(--na-play)}
/* Gleisbild (Schema) */
.na-schema line{stroke:var(--na-trk);stroke-width:2;vector-effect:non-scaling-stroke}
.na-schema line.u{stroke:var(--na-route);stroke-width:2.4}
.na-schema line.o{stroke-dasharray:6 4}
.na-schema line.hl{stroke:var(--na-x);stroke-width:3.2}
.na-schema g.n{cursor:pointer}
.na-schema g.n rect{fill:var(--na-land);stroke:var(--txt);stroke-width:1.1;vector-effect:non-scaling-stroke}
.na-schema g.n.own rect{fill:#1a2440;stroke:var(--na-route);stroke-width:1.6}
.na-schema g.n.tc rect{stroke:var(--na-play);stroke-width:2.2}
.na-schema g.n.foreign rect{stroke-dasharray:4 3;fill:#0b0f17;stroke:var(--mut)}
.na-schema g.n.portal rect{fill:var(--na-x);stroke:none}
.na-schema g.n.portal text{fill:#fff}
.na-schema g.n.sel rect{stroke:var(--na-x);stroke-width:3}
.na-schema g.n:hover rect{stroke:#fff;stroke-width:2.2}
.na-schema text{font-size:12px;font-weight:600;fill:var(--txt);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.na-schema g.foreign text{fill:var(--mut)}
/* Bedienelemente auf der Karte */
.na-zoom{position:absolute;right:10px;top:40px;display:flex;flex-direction:column;gap:4px}
.na-zoom .na-btn{width:32px;height:32px;padding:0;font-size:17px;line-height:1}
.na-legend{position:absolute;left:10px;bottom:10px;background:#0d1320e6;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:11.5px;color:var(--mut);display:grid;gap:3px;max-width:calc(100% - 70px)}
.na-legend div{display:flex;align-items:center;gap:8px}
.na-legend b{display:inline-block;width:20px;height:0;border-top:3px solid var(--na-route);flex:none}
.na-legend b.x{border-top:2px dashed var(--na-x)}
.na-legend b.t{border-top:2px solid var(--na-trk)}
.na-legend b.g{border-top:1px solid #3a4763}
.na-legend b.d{border-top:2px dashed var(--na-trk)}
.na-legend b.p{height:9px;border:0;background:var(--na-x);border-radius:3px}
.na-legend b.tc{border-top-color:#7fe0ab}.na-legend b.occ{border-top:4px solid var(--occ)}
.na-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--acc);border:2px solid #0b0f17;box-shadow:0 0 0 3px #4fc3f733;margin:0 4px 0 3px;flex:none}
.na-legend i.busy{background:var(--na-busy);box-shadow:0 0 0 3px #f5c54233}.na-legend i.mine,.na-legend i.pl{background:var(--na-play);box-shadow:0 0 0 3px #2fd27a33}
.na-hint{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:11.5px;color:var(--mut);background:#0d1320e6;border:1px solid var(--line);padding:3px 10px;border-radius:999px;white-space:nowrap;pointer-events:none}
.mapcol:has(.live.atl) .trains{max-height:118px}
.live.atl{top:auto;bottom:10px;right:310px}
/* Info-Spalte */
.na-panel{background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:14px 14px 22px;min-width:0}
.na-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.na-panel h1{font-size:22px;line-height:1.1;margin:4px 0 10px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.na-panel h2{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:18px 0 8px;color:var(--mut)}
.na-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);border:1px solid #2fd27a66;background:#2fd27a14;border-radius:999px;padding:1px 8px;vertical-align:middle}
.na-stats{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 4px}
.na-stats div{display:flex;flex-direction:column}
.na-stats b{font:500 19px var(--mono)}
.na-stats span{font-size:11.5px;color:var(--mut)}
.na-cta{all:unset;box-sizing:border-box;display:grid;gap:2px;width:100%;margin:12px 0 4px;padding:12px 14px;border-radius:11px;cursor:pointer;background:linear-gradient(135deg,#2fd27a1f,#4fc3f714);border:1px solid #2fd27a55}
.na-cta:hover{border-color:var(--ok)}
.na-cta b{font-size:18px}.na-cta span:not(.na-tag){color:var(--mut);font-size:12px}.na-cta .na-tag{justify-self:start}
.na-cta i{font-style:normal;color:var(--ok);font-weight:600;font-size:12.5px;margin-top:4px}
.na-list{display:flex;flex-direction:column}
.na-list button{all:unset;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 8px;margin:0 -8px;border-radius:6px;cursor:pointer;font-size:13px}
.na-list button:hover{background:var(--na-chip)}
.na-list small{font:11px var(--mono);color:var(--mut);white-space:nowrap}
.na-list .nm{min-width:0}.na-list .tag-x{color:var(--na-x)}.na-list .pl{color:var(--ok);font-weight:600}
.na-chips{display:flex;flex-wrap:wrap;gap:6px}
.na-chip{all:unset;font-size:12px;background:var(--na-chip);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.na-chip:hover{border-color:var(--acc)}
.na-chip.static{cursor:default}.na-chip.static:hover{border-color:var(--line)}
.na-note{font-size:12.5px;color:var(--mut);margin:8px 0}
.na-soon{border-left:3px solid var(--line);padding-left:10px}
.na-lnk{all:unset;color:var(--ok);cursor:pointer;font-weight:600}
.na-mono{font:12px var(--mono);color:var(--mut);margin-top:14px}
.na-foot{margin-top:24px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--mut)}
.na-tclist{display:flex;flex-direction:column;gap:6px}
.na-tclist button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;font-size:13px;padding:8px 10px;border-radius:8px;background:#0f1522;border:1px solid var(--line);cursor:pointer}
.na-tclist button:hover{border-color:var(--ok)}
.na-tclist .c{font:11px var(--mono);color:var(--mut);margin-right:6px}
.na-tclist .who,.na-take .who{font-size:12px;color:var(--mut);white-space:nowrap}
.na-tclist .who.busy,.na-take .who.busy{color:var(--na-busy)}.na-tclist .who.mine,.na-take .who.mine{color:var(--ok)}
.na-take{margin:14px 0 4px;padding:12px;border-radius:11px;border:1px solid #2fd27a55;background:#2fd27a0f;display:grid;gap:4px}
.na-take b{font-size:16px}
.na-big{font:700 13px inherit;font-family:inherit;margin-top:8px;padding:10px;border:0;border-radius:8px;background:var(--ok);color:#04150b;cursor:pointer}
.na-big:hover{filter:brightness(1.1)}
@media (max-width:1100px){.na-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 38%}.na-panel{border-left:0;border-top:1px solid var(--line)}.live.atl{display:none}}
@media (max-width:960px){.mapwrap:has(.atlas:not([hidden])){min-height:calc(100svh - 40px)}}
@media (max-width:620px){.na-search{flex:1 1 100%}.na-search input{width:100%;max-width:none}.na-hint,.na-legend{display:none}.na-zoom{top:10px}.na-bar{padding:8px}}
@media (prefers-reduced-motion:reduce){.na-pin .pulse{animation:none}}

/* =====================================================================
   BAHN-DESIGN · Portal im Stil eines Betriebs-/Managementsystems
   ===================================================================== */
:root{--bg:#e4e7ea;--panel:#fff;--panel2:#f5f6f7;--line:#b4b9c0;--line2:#d7dbe0;--txt:#141820;--mut:#5f6570;--acc:#1455c0;
  --ok:#2f7d2a;--warn:#c45f00;--bad:#c50014;--red:#ec0016;--red-d:#b8000f;--ink:#282d37;--ink2:#3c414b;--ink3:#5b616c;
  --sans:"Segoe UI","Helvetica Neue",Arial,"Liberation Sans",sans-serif}
*{border-radius:0!important}
html,body{font:14px/1.45 var(--sans);background:var(--bg);color:var(--txt)}
body{background:var(--bg)}
a{color:var(--acc)}
.bar{background:var(--ink);border-top:4px solid var(--red);border-bottom:0;min-height:52px;padding:0 20px;color:#fff;gap:0}
.logo{color:#fff;font-size:18px;font-weight:700;padding-right:18px;margin-right:14px;border-right:1px solid #4a505b;height:52px}
.dot{width:13px;height:13px;background:var(--red);box-shadow:none;margin-right:10px}
.world{color:#b9bec6}
.tabs{margin-left:16px;gap:0;align-self:stretch}
.tabs a{color:#d3d6db;padding:0 16px;display:flex;align-items:center;font-weight:600;border-bottom:4px solid transparent;border-top:4px solid transparent}
.tabs a:hover{color:#fff;background:#343944}
.tabs a.on{color:#fff;background:#343944;box-shadow:none;border-bottom-color:var(--red)}
.me{color:#d3d6db;margin-right:12px}.me b{color:#fff}
.btn{background:var(--red);color:#fff;border:1px solid var(--red-d);font-weight:600}
.btn:hover{filter:none;background:var(--red-d)}
.btn:disabled{background:#c9cdd2;border-color:#b4b9c0;color:#6c727c}
.btn.ghost{background:#fff;color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{background:#eef0f2;border-color:var(--ink3)}
.bar .btn.ghost{background:transparent;color:#fff;border-color:#7a808a}
.bar .btn.ghost:hover{background:var(--red);border-color:var(--red)}
.btn.red{background:#fff;color:var(--bad);border:1px solid #d99aa1}
.btn.red:hover{background:#fff1f2}
.lnk{color:var(--acc)}
input{background:#fff;border:1px solid var(--line);color:var(--txt)}
input:focus{border-color:var(--acc);outline:2px solid #1455c033;outline-offset:0}
input[type=checkbox]{accent-color:var(--red)}
.fld{color:var(--ink);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px}
.fld input{text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}
.err{background:#fff1f2;border:1px solid #e6a1a8;border-left:4px solid var(--bad);color:#7a000b}
.seg{background:var(--panel2);border:1px solid var(--line);padding:0;gap:0}
.seg button{color:var(--mut);border-right:1px solid var(--line2);padding:8px 12px}
.seg button:last-child{border-right:0}
.seg button.on{background:#fff;color:var(--txt);box-shadow:inset 0 -3px 0 var(--red)}
code{background:var(--panel2);border:1px solid var(--line2)}

/* Startseite */
.landing{gap:40px}
.kicker{color:var(--red);font-family:var(--sans);font-weight:700}
.hero h1{font-size:40px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.lead{color:#3c414b}
.feat li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red)}
.feat b{color:var(--ink)}
.plat{color:var(--mut)}
.card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--red);box-shadow:0 1px 0 #0000000d}
.card h2{font-weight:700}
.closed p{color:#3c414b}

/* Portal */
.netz{gap:8px;padding:8px}
.box{background:#fff;border:1px solid var(--line);padding:0}
.box>*:not(h3){margin-left:12px;margin-right:12px}
.box>*:last-child{margin-bottom:12px}
.box h3{background:#e6e9ec;color:var(--ink);font-weight:700;padding:6px 12px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.box p{color:var(--mut)}
.kv span{color:var(--mut)}
.st{background:#fff;border:1px solid var(--line2);border-left:4px solid var(--ok)}
.st:hover{border-color:var(--ink3);border-left-color:var(--ok);background:#f2f6fd}
.st.busy{border-left-color:#f0a500}
.st .c{color:var(--red);font-weight:700}
.st .who{color:var(--ok)}.st .who.busy{color:#8a5a00}.st .who.mine{color:var(--acc);font-weight:600}
.map{background:#fff;border:1px solid var(--line2)}
.map.on{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
.map .v{color:var(--mut)}
.map .tag{border-color:var(--line)}
.map .tag.play{border-color:#7fbf7a;color:var(--ok)}
.maphead h2{font-weight:700;color:var(--ink)}
.mapwrap{background:#0b0d11;border:1px solid #000}
.live{background:#14171d;border:1px solid #3a3f49;color:#3ddc4a}
.live.off{color:#ff5a6a}
.legend{color:var(--mut)}
.trains{background:#fff;border:1px solid var(--line)}
.trains th{background:#e6e9ec;color:var(--ink);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.4px;border-bottom:1px solid var(--line)}
.trains td{border-bottom:1px solid #e3e6e9}
.trains tr:nth-child(even) td{background:#f7f8f9}
.pagehead h1{font-weight:700;color:var(--ink);border-bottom:3px solid var(--red);display:inline-block;padding-bottom:4px}
.dlcard{background:#fff;border:1px solid var(--line)}
.dlcard.rec{border-color:var(--line);border-top:5px solid var(--red);background:#fff}
.dlcard .os svg{fill:var(--ink)}
.dlcard .badge{color:#fff;background:var(--red);border:0}
.notes{background:#fff;border:1px solid var(--line);border-left:4px solid var(--acc)}
.dllist{background:#fff;border:1px solid var(--line)}
.dlrow{border-bottom:1px solid #e3e6e9}
.dlrow:nth-child(even){background:#f7f8f9}
.dlrow .sha{color:#8a9099}
.steps>div{background:#fff;border:1px solid var(--line)}
.steps .num{color:#fff;background:var(--ink);font-size:16px;width:30px;height:30px;display:grid;place-items:center;top:0;right:0}
.steps p{color:#3c414b}
.cred{background:#eef7ed;border:1px solid #9fcc9a;border-left:4px solid var(--ok)}
.cnt{color:var(--red)}
.users th{background:#e6e9ec;color:var(--ink);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.4px;border-bottom:1px solid var(--line)}
.users td{border-bottom:1px solid #e3e6e9}
.users tr:nth-child(even) td{background:#f7f8f9}
.users .role.admin{color:#fff;background:var(--ink);border-color:var(--ink)}
.users .on{color:var(--ok)}.users .locked{color:var(--bad)}
.dlg{background:#141820aa;backdrop-filter:none}
.dlgbox{background:#fff;border:1px solid var(--ink3);border-top:5px solid var(--red);box-shadow:0 10px 30px #0005}
.dlgbox .code{color:var(--red);font-weight:700}
.dlgbox h2{font-weight:700;color:var(--ink)}
.ststat .busy{color:#8a5a00}.ststat .free{color:var(--ok)}
.ck.opt{background:var(--panel2);border:1px solid var(--line2)}
.nohint{background:#fff6c2;border:1px solid #e0b400;color:#141820}
.crewinfo{font-size:12px;color:var(--mut);margin:-2px 0 10px}
.toast{background:var(--ink);color:#fff;border:0;border-left:5px solid var(--acc)}
.toast.bad{border-left-color:var(--red)}
.fatal{background:var(--bg)}
@media (max-width:960px){.bar{padding:8px 16px}.logo{height:auto;border:0}.tabs a{padding:8px 12px}}
/* Netzatlas: Kartenfläche bleibt ein dunkler Leitstand-Monitor, die Infospalte ist eine helle Maske */
.mapwrap{--txt:#dce3f1;--mut:#8d97ad;--line:#2f3a52;--panel:#141b2b;--panel2:#18213a;--acc:#4fc3f7;color:var(--txt)}
.mapwrap .na-panel{--txt:#141820;--mut:#5f6570;--line:#b4b9c0;--panel:#fff;--panel2:#f5f6f7;--acc:#1455c0;color:var(--txt);border-left:1px solid #000}
.mapwrap .na-panel .na-tclist button{background:#fff;border-color:#d7dbe0}
.mapwrap .na-panel .na-tclist button:hover{background:#f2f6fd;border-color:var(--ink3)}
.na-bar{background:#14171d;border-bottom:1px solid #3a3f49}
.na-btn{background:#1d2129;border-color:#4a505b}
.na-hint,.na-legend{background:#14171de6;border-color:#3a3f49}