:root{--bg:#0d1013;--panel:#161b21;--panel2:#1d242c;--line:#262f38;
  --txt:#e8edf1;--dim:#8b98a4;--dimmer:#5c6975;
  --free:#3aa66b;--busy:#d99a2b;--mine:#2fa8cf;--danger:#e0484d;--r:10px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:#0a0c0e;color:var(--txt);font-family:'Barlow',system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px 12px 40px;gap:16px}
.frame{width:100%;max-width:392px;background:var(--bg);border:1px solid var(--line);border-radius:26px;
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  height:min(820px,calc(100vh - 150px));min-height:640px}
.status{display:flex;justify-content:space-between;padding:9px 18px 4px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dimmer)}
#app{flex:1;display:flex;flex-direction:column;overflow:hidden}
header{padding:6px 16px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.evbtn{cursor:pointer}
.ev{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:600;letter-spacing:.3px}
.evsub{font-size:12.5px;color:var(--dim);margin-top:1px}
.rolechip{margin-left:auto;font-size:11px;padding:4px 9px;border-radius:20px;background:#2b2410;color:#dfb35c;font-weight:500;white-space:nowrap}
.rolechip.pilot{background:#123643;color:#7fd4ec}
.banner{display:none;padding:7px 16px;font-size:12.5px;font-weight:500;align-items:center;gap:7px}
.banner.on{display:flex}
.banner.warn{background:#3a2f14;color:#e8bf6a;border-bottom:1px solid #4d3f1c}
.banner.stop{background:#3d1a1c;color:#f2a2a5;border-bottom:1px solid #57262a}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
main{flex:1;overflow-y:auto;overscroll-behavior:contain}
.pad{padding:16px 16px 28px}

.auth{padding:26px 22px 34px;display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mark{width:40px;height:40px;border-radius:11px;background:#123643;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
h1{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:600;margin:0 0 6px;letter-spacing:.3px}
.lead{font-size:14px;color:var(--dim);line-height:1.55;margin:0 0 24px}
label{display:block;font-size:12px;color:var(--dim);margin:14px 0 5px}
input[type=text],input[type=email],input[type=password]{width:100%;padding:12px 13px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--txt);font-family:'Barlow',sans-serif;font-size:15px}
input:focus{outline:none;border-color:#2f7c99}
.err{font-size:12px;color:#f0a1a4;margin-top:5px;display:block}
.hint{font-size:12px;color:var(--dimmer);margin-top:5px;display:block}
.roles{display:flex;gap:9px;margin-top:6px}
.roleopt{flex:1;padding:12px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer}
.roleopt.sel{border-color:#2f7c99;background:#12262e}
.roleopt .rt{font-size:14px;font-weight:500}
.roleopt .rd{font-size:11.5px;color:var(--dim);margin-top:2px;line-height:1.4}
.spacer{min-height:16px}

.mapwrap{background:#11161b;border-bottom:1px solid var(--line)}
svg.map{display:block;width:100%;height:auto}
.corr{cursor:pointer}
.clabel{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;fill:#e2e9ef;pointer-events:none;letter-spacing:.5px}
.cmeta{font-family:'JetBrains Mono',monospace;font-size:8.5px;fill:#93a1ad;pointer-events:none}
.zlabel{font-family:'Barlow Condensed',sans-serif;font-size:10px;fill:#6d7a86;pointer-events:none;letter-spacing:.6px}
.ini{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:600;pointer-events:none;text-anchor:middle}
.stopov{pointer-events:none}
.stoptitle{font-family:'Barlow Condensed',sans-serif;font-weight:600;fill:#ffd9db;text-anchor:middle;letter-spacing:1.4px}
.stopsub{font-family:'Barlow',sans-serif;fill:#f0b7ba;text-anchor:middle}
.pulse{animation:pl 1.5s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.9}50%{opacity:.28}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.8}}

.h{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--dimmer);margin:0 0 8px;font-weight:600}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;margin-bottom:9px}
.card.tap{cursor:pointer}
.row{display:flex;align-items:center;gap:11px}
.tag{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;padding:3px 7px;border-radius:5px;background:var(--panel2);color:var(--dim)}
.tag.mine{background:#123643;color:#7fd4ec}
.name{font-size:14.5px;font-weight:500}
.sub{font-size:12px;color:var(--dim);margin-top:2px}
.pill{margin-left:auto;font-size:11.5px;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap}
.p-air{background:#123643;color:#6cc9e6}
.p-ground{background:#22282f;color:#8b98a4}
.p-ready{background:#2b2410;color:#dfb35c}
.p-full{background:#2b2410;color:#dfb35c}
.p-free{background:#15301f;color:#6fc494}
.chev{margin-left:auto;color:var(--dimmer);flex:none}
.av{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;border:1.5px solid #2f7c99;background:#12262e}
.avi{display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9px;color:#8fdcf2}
.blkline{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #1f272f;font-size:12.5px}
.blkline:first-of-type{border-top:0}
.balt{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);min-width:66px}
.who{color:var(--txt)}
.free-t{color:#6fc494}

.scrim{position:absolute;inset:0;background:rgba(4,6,8,.66);opacity:0;pointer-events:none;transition:opacity .18s;z-index:4}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;transform:translateY(102%);transition:transform .24s cubic-bezier(.3,.8,.3,1);
  padding:8px 16px 18px;z-index:5;max-height:82%;overflow-y:auto}
.sheet.on{transform:translateY(0)}
.grab{width:34px;height:4px;border-radius:3px;background:#3a444e;margin:0 auto 12px}
.blk{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--panel2)}
.blk.free{cursor:pointer}
.bar{width:4px;align-self:stretch;border-radius:3px;flex:none}
.alt{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;min-width:78px}
.bstat{font-size:12.5px;color:var(--dim)}

button{font-family:'Barlow',sans-serif;font-size:14.5px;font-weight:500;width:100%;padding:13px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;margin-top:10px}
button:active{transform:scale(.99)}
button.go{background:#17607c;border-color:#1e7a9c;color:#e6f6fc}
button.out{background:#3a2224;border-color:#5a3033;color:#f0b7ba}
button.stopall{background:#5c1e22;border-color:#7d2b30;color:#ffd9db;font-weight:600}
button.ghost{background:transparent}
button.sm{width:auto;flex:1;padding:9px 10px;font-size:13px;margin:0}
button[disabled]{opacity:.4;cursor:default}
.btnrow{display:flex;gap:8px;margin-top:12px}
.timer{font-family:'JetBrains Mono',monospace;font-size:13px;color:#7fd4ec;margin-left:auto}

nav{display:flex;border-top:1px solid var(--line);background:#0f1317}
nav div{flex:1;padding:11px 4px 14px;text-align:center;cursor:pointer;font-size:11.5px;color:var(--dimmer)}
nav div.on{color:var(--mine)}
nav svg{display:block;margin:0 auto 3px}

.up{border:1px dashed #33404b;border-radius:var(--r);padding:20px 14px;text-align:center;color:var(--dim);font-size:13px;background:#12171c;cursor:pointer}
.note{font-size:11.5px;color:var(--dimmer);line-height:1.5;margin-top:14px}
.codebox{background:#12262e;border:1px solid #1e5e77;border-radius:12px;padding:18px;text-align:center}
.codebox .c{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:600;color:#8fdcf2;letter-spacing:5px}
.codebox .l{font-size:12px;color:#7ba7b8;margin-top:6px}

.edbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.count{font-family:'JetBrains Mono',monospace;color:#7fd4ec;margin-left:auto}
svg.editor{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;background:#0f1317}
.mini{display:flex;gap:8px;align-items:center}
.mini input{width:70px;padding:8px 9px;font-size:14px}

/* desktop */
.desk{width:100%;max-width:1240px;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;min-height:min(860px,calc(100vh - 150px))}
.dtop{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);background:#0f1317}
.dtop .ev{font-size:22px}
.dstat{display:flex;gap:22px;margin-left:auto;align-items:center}
.dstat .k{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:600}
.dstat .kl{font-size:11px;color:var(--dimmer);letter-spacing:.6px}
.dbody{flex:1;display:flex;min-height:0}
.drail{width:172px;border-right:1px solid var(--line);padding:14px 10px;flex:none;background:#0f1317}
.drail div{padding:10px 12px;border-radius:var(--r);font-size:14px;color:var(--dim);cursor:pointer;margin-bottom:4px}
.drail div.on{background:#12262e;color:#8fdcf2}
.dmain{flex:1;display:flex;min-width:0}
.dmapcol{flex:1;padding:18px;min-width:0;overflow-y:auto}
.daside{width:352px;border-left:1px solid var(--line);padding:18px;overflow-y:auto;flex:none}
.dmapwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#11161b}
.dscroll{overflow-y:auto;padding:18px;flex:1}
.landbar{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid #57262a;border-radius:12px;background:#201416}
.landbar .lt{font-size:13.5px;color:#f0b7ba;line-height:1.45}
.landbar button{width:auto;flex:none;margin:0;padding:12px 18px}

.modal{position:fixed;inset:0;background:rgba(4,6,8,.78);display:none;align-items:center;justify-content:center;z-index:99;padding:20px}
.modal.on{display:flex}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;width:100%;max-width:430px}
.mbox h2{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:600;margin:0 0 8px}
.mbox p{font-size:14px;color:var(--dim);line-height:1.55;margin:0 0 6px}
.mrow{display:flex;gap:10px;margin-top:18px}
.mrow button{margin:0}
.chk{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);cursor:pointer;font-size:13.5px;line-height:1.45}
.chk .box{width:19px;height:19px;border-radius:5px;border:1.5px solid #6b7883;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.chk.on .box{background:#a33236;border-color:#c04146}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:#1e2a31;border:1px solid #2f7c99;
  color:#cfe9f3;font-size:13px;padding:11px 15px;border-radius:var(--r);z-index:120;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.demo{width:100%;max-width:1240px}
.demo p{font-size:11.5px;color:#6d7a86;margin:0 0 8px;text-align:center}
.demo .row2{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.demo button{margin:0;width:auto;flex:1;min-width:130px;font-size:12.5px;padding:10px 8px;background:#14191e;border-color:#252e36;color:#96a3af}


/* Echtes Gerät: kein Mockup-Rahmen, volle Höhe */
@media (max-width:760px){
  body{padding:0;gap:0}
  .frame{max-width:none;height:100dvh;min-height:0;border:0;border-radius:0}
  .status{display:none}
  .modal{padding:14px}
}
@supports not (height: 100dvh){
  @media (max-width:760px){ .frame{height:100vh} }
}

/* Anmeldebildschirme: Knöpfe bleiben immer erreichbar */
.auth-mode #app{overflow:auto}
.authbar{
  position:sticky;bottom:0;margin-top:auto;padding:14px 0 max(10px,env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);
}
.authbar button:first-child{margin-top:0}

/* Desktop: Anmeldebildschirme wachsen mit, die Seite scrollt normal */
@media (min-width:761px){
  .frame.auth-mode{height:auto;min-height:0;max-height:none}
  .auth-mode #app{overflow:visible}
  .auth-mode .auth{overflow:visible}
}