:root{
  --drk-red:#e2001a; --drk-red-dark:#a5000f; --ink:#1b1f23; --paper:#fff; --line:#e2e5e8;
  --muted:#6b7580; --fresh:#2e8b57; --warn:#e8a33d; --stale:#c0392b;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);}
#app{display:flex;flex-direction:column;height:100dvh;}

/* ---------- Login / Gates ---------- */
.gate{position:fixed;inset:0;background:linear-gradient(160deg,#fff 0%,#f4f5f7 100%);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;}
.login-box{background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:26px;width:100%;max-width:360px;}
.login-logo{font-size:40px;text-align:center;}
.login-box h1{text-align:center;font-size:20px;margin:6px 0 16px;}
.login-box h2{font-size:18px;margin:0 0 10px;}
.login-tabs{display:flex;background:#f0f1f3;border-radius:10px;padding:3px;margin-bottom:16px;}
.login-tabs button{flex:1;border:none;background:transparent;padding:9px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);}
.login-tabs button.active{background:#fff;color:var(--drk-red);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.login-box label{font-size:11.5px;font-weight:700;color:var(--muted);display:block;margin:10px 0 4px;}
.login-box input, .login-box select{width:100%;padding:11px;border-radius:10px;border:1px solid var(--line);font-size:15px;}
.login-error{color:var(--stale);font-size:13px;font-weight:600;margin-top:10px;min-height:18px;text-align:center;}
.consent-text{font-size:13.5px;line-height:1.55;color:#3a3f45;}

/* ---------- Topbar ---------- */
#topbar{background:var(--drk-red);color:#fff;padding:9px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:20;flex-wrap:wrap;}
#topbar .title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;}
.role-badge{background:rgba(255,255,255,.22);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:800;letter-spacing:.04em;}
.conn-dot{width:9px;height:9px;border-radius:50%;background:#7dd87d;flex-shrink:0;}
.conn-dot.offline{background:#f3c14b;}
.spacer{flex:1;}
#w3w-search{border:none;border-radius:8px;padding:7px 10px;font-size:13px;width:190px;}
.btn-top{width:auto;background:rgba(255,255,255,.2);color:#fff;border:none;padding:7px 10px;margin:0;font-size:12px;}

/* ---------- Layout ---------- */
#main{flex:1;display:flex;min-height:0;position:relative;}
/* eigene Stapel-Ebene für die Karte: verhindert, dass Leaflets interne
   z-index-Werte (bis 700) über Sidebar/Modal/EK-Leiste zu liegen kommen */
#map{flex:1;min-width:0;position:relative;z-index:1;}
#sidebar{width:300px;background:var(--paper);border-left:1px solid var(--line);overflow-y:auto;flex-shrink:0;position:relative;z-index:5;}
@media (max-width:780px){
  #sidebar{position:absolute;right:0;top:0;bottom:0;width:min(85vw,320px);transform:translateX(100%);transition:transform .2s;box-shadow:-4px 0 12px rgba(0,0,0,.15);z-index:19;}
  #sidebar.open{transform:translateX(0);}
}
.panel{padding:13px 14px;border-bottom:1px solid var(--line);}
.panel h3{margin:0 0 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;display:flex;align-items:center;justify-content:space-between;}
.hint{font-size:11px;color:var(--muted);margin:0 0 8px;}
.einsatz-info{font-size:12.5px;line-height:1.5;margin-bottom:8px;}
.einsatz-info code{background:#f4f5f7;border-radius:5px;padding:1px 6px;font-weight:700;}

/* ---------- Buttons ---------- */
.btn{display:block;width:100%;padding:11px 12px;margin-bottom:7px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;text-align:left;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--drk-red);color:#fff;border-color:var(--drk-red);}
.btn-outline{background:#fff;border-color:var(--drk-red);color:var(--drk-red);}
.btn-danger{background:#fff;border-color:var(--stale);color:var(--stale);}
.btn-sm{padding:6px 10px;font-size:11.5px;margin:0;width:auto;}
.btn-row{display:flex;gap:8px;margin-bottom:8px;}
.btn-row .btn{margin:0;flex:1;text-align:center;}
select.full, input.full{width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--line);font-size:13.5px;margin-bottom:7px;background:#fff;}

/* ---------- Trupps ---------- */
.trupp-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;}
.trupp-row:hover{background:#f5f6f7;}
.trupp-row.emergency{background:#ffe9e6;border:1px solid var(--stale);}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block;}
.trupp-name{font-weight:700;font-size:13px;}
.trupp-meta{font-size:11px;color:var(--muted);}
.chip{font-size:9.5px;font-weight:700;color:#fff;border-radius:5px;padding:1px 5px;margin-left:4px;}
.trupp-actions{display:flex;gap:4px;}

/* ---------- Log ---------- */
#log-list{max-height:220px;overflow-y:auto;}
.log-item{padding:7px 0;border-bottom:1px solid var(--line);font-size:12px;}
.log-item.notfall{color:var(--stale);font-weight:700;}
.log-time{color:var(--muted);font-size:10.5px;}

/* ---------- EK-Leiste ---------- */
#ekbar{position:absolute;right:12px;top:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:6;width:236px;overflow-y:auto;}
#ekbar .btn{margin:0;}
.card{background:#fff;border-radius:11px;padding:10px 11px;box-shadow:0 3px 10px rgba(0,0,0,.13);}
.card:empty{display:none;}
.mini-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:6px;}
.status-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px;}
.pill{padding:6px 10px;border-radius:20px;border:1px solid var(--line);font-size:11px;font-weight:700;cursor:pointer;background:#fff;}
.pill.active{color:#fff;}
.pill[data-s="ready"].active{background:var(--fresh);border-color:var(--fresh);}
.pill[data-s="busy"].active{background:var(--drk-red);border-color:var(--drk-red);}
.pill[data-s="pause"].active{background:var(--warn);border-color:var(--warn);}
.pill[data-s="off"].active{background:var(--muted);border-color:var(--muted);}
.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.quickgrid button{padding:9px 6px;font-size:11.5px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer;}
.btn-emergency{background:var(--stale);color:#fff;border:none;font-size:14.5px;font-weight:800;padding:14px;border-radius:11px;cursor:pointer;box-shadow:0 3px 10px rgba(192,57,43,.35);}
.autoping-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.autoping-row select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:11.5px;}
.checkline{display:flex;align-items:center;gap:7px;font-size:11.5px;cursor:pointer;}
.status-line{background:#fff;border-radius:10px;padding:9px 11px;font-size:12px;box-shadow:0 3px 10px rgba(0,0,0,.12);}
.status-good{color:var(--fresh);font-weight:700;}
.status-bad{color:var(--stale);font-weight:700;}
.switch{position:relative;width:34px;height:19px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:#ccc;border-radius:20px;cursor:pointer;transition:.2s;}
.slider:before{content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;}
input:checked + .slider{background:var(--fresh);}
input:checked + .slider:before{transform:translateX(15px);}
@media (max-width:780px){
  #ekbar{top:auto;bottom:10px;left:10px;right:10px;width:auto;max-height:52dvh;}
}
.order-banner{background:#fff4e0;border:1px solid var(--warn);border-radius:10px;padding:9px 10px;font-size:12px;margin-bottom:6px;}

/* ---------- Info-Card / Modal ---------- */
.float-card{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:14px;max-width:320px;z-index:7;max-height:60dvh;overflow-y:auto;}
.w3w-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:700;color:var(--drk-red);letter-spacing:.3px;word-break:break-all;}
.w3w-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}
.close-x{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--muted);font-size:14px;border:none;background:none;}
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;}
#modal-overlay.show{display:flex;}
#modal-box{background:#fff;border-radius:14px;padding:20px;width:100%;max-width:340px;max-height:85dvh;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.3);}
#modal-box h3{margin:0 0 12px;font-size:15px;}
#modal-box label{font-size:11.5px;color:var(--muted);font-weight:700;display:block;margin-bottom:3px;}
#modal-box input, #modal-box select{width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--line);margin-bottom:10px;font-size:14px;}
#modal-box .btn-row{margin-top:4px;}
.checklist label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;margin-bottom:6px;cursor:pointer;}
.group-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:14px;font-size:11px;font-weight:700;color:#fff;margin:2px 4px 2px 0;}

/* ---------- Legende / Suche / Sonstiges ---------- */
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:5px;}
.legend-swatch{width:13px;height:13px;border-radius:3px;flex-shrink:0;display:inline-block;}
.mobile-toggle{display:none;position:absolute;top:10px;right:10px;z-index:8;background:#fff;border-radius:9px;padding:8px 11px;box-shadow:0 3px 10px rgba(0,0,0,.18);border:none;font-weight:800;font-size:14px;cursor:pointer;}
@media (max-width:780px){ .mobile-toggle{display:block;} }
#poi-search-results .btn{margin-bottom:4px;}

/* ---------- Zeichnen-Leiste ---------- */
#draw-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:9;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.25);padding:9px 12px;display:flex;align-items:center;gap:9px;}
#draw-bar span{font-size:12px;font-weight:700;color:var(--muted);min-width:64px;}
#draw-bar button{border:none;border-radius:8px;padding:9px 13px;font-weight:700;font-size:13px;cursor:pointer;}
#draw-undo{background:#f0f1f3;}
#draw-finish{background:var(--fresh);color:#fff;}
#draw-finish:disabled{background:#b9d6c6;cursor:not-allowed;}
#draw-cancel{background:#f0f1f3;color:var(--stale);}