:root{
  --bg:#1c1f1a; --panel:#242821; --line:#3c4238; --text:#e8e6df;
  --muted:#9aa08f; --accent:#c9a227; --accent-dark:#8f7118;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}
#map{position:absolute;inset:0}

#panel{position:absolute;top:0;right:0;z-index:1000;width:310px;max-width:88vw;height:100%;
  overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);
  padding:16px 16px 40px;transition:transform .2s ease}
#panel.hidden{transform:translateX(100%)}
#panel h1{margin:0 0 12px;font-size:16px;letter-spacing:.02em}
#panel h2{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

.stats{font-size:13px;color:var(--muted)}
.stats b{color:var(--text);font-weight:600}
.stats table{width:100%;border-collapse:collapse;margin-top:6px}
.stats td{padding:2px 0}
.stats td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}

.tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tools button{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--line);
  border-radius:7px;background:#2c3128;color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.tools button:hover{border-color:var(--muted)}
.tools button.active{background:var(--accent);color:#20240f;border-color:var(--accent);font-weight:600}
.tools .sym{width:16px;text-align:center;flex:none}

.row{display:flex;gap:6px;margin-top:10px}
.row button{flex:1;padding:9px;border:1px solid var(--line);border-radius:7px;background:#2c3128;
  color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.row button.primary{background:var(--accent);border-color:var(--accent);color:#20240f;font-weight:600}
.row button:hover{filter:brightness(1.1)}
.hint{color:var(--muted);font-size:12px;margin:9px 0 0}

#panel-toggle{position:absolute;top:10px;right:10px;z-index:1001;width:38px;height:38px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);
  font-size:17px;line-height:1;cursor:pointer;display:block;
  box-shadow:0 1px 5px rgba(0,0,0,.4);transition:right .2s ease}
#panel-toggle:hover{border-color:var(--muted)}
/* Bei offener Seitenleiste ruecht der Knopf davor, statt darauf zu liegen. */
@media (min-width:761px){
  body.panel-offen #panel-toggle{right:326px}
}

.marker-pin{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5);font-size:13px}
.marker-pin span{transform:rotate(45deg)}
.area-label{background:none;border:none;color:#fff;font-weight:600;font-size:13px;white-space:nowrap;
  text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;pointer-events:none;text-align:center}

.leaflet-popup-content{margin:10px 12px;font:13px/1.4 system-ui,sans-serif}
.leaflet-popup-content b{display:block;margin-bottom:3px}
.leaflet-popup-content .pdel{color:#b03030;cursor:pointer;text-decoration:underline;font-size:12px}
.leaflet-control-attribution{font-size:10px}

@media (max-width:760px){
  #panel{width:100%;max-width:none;height:auto;max-height:70%;top:auto;bottom:0;border-left:none;
    border-top:1px solid var(--line);border-radius:14px 14px 0 0}
  #panel.hidden{transform:translateY(100%)}
  .tools{grid-template-columns:1fr 1fr 1fr}
}

.ptab{width:100%;border-collapse:collapse;margin-top:5px;font-size:12px}
.ptab td{padding:1px 0;color:#555}
.ptab td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:baseline}

/* ---------- Anmeldung ---------- */
#login{position:fixed;inset:0;z-index:3000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:20px}
#login[hidden]{display:none}
#login form{width:100%;max-width:340px}
#login h1{margin:0 0 6px;font-size:19px}
#login .sub{margin:0 0 22px;color:var(--muted);font-size:13px}
#login label{display:block;margin:12px 0 5px;font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
#login input{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;background:#1a1e17;color:var(--text);font:inherit;font-size:16px}
#login input:focus{outline:none;border-color:var(--accent)}
#login button{width:100%;margin-top:20px;padding:12px;border:none;border-radius:8px;
  background:var(--accent);color:#20240f;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
#login button:disabled{opacity:.6;cursor:default}
#login .fehler{margin:14px 0 0;padding:9px 11px;border-radius:7px;font-size:13px;
  background:#4a1f1f;border:1px solid #7d3232;color:#ffc9c9}
#login .hinweis{margin:22px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}

/* ---------- Standortknopf ---------- */
#ortung{position:absolute;left:10px;bottom:34px;z-index:1000;width:40px;height:40px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--text);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,.4)}
#ortung.aktiv{color:#54a8ff;border-color:#54a8ff}
#ortung[hidden]{display:none}

/* ---------- Wer ist im Revier ---------- */
.leute .person{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;
  border-bottom:1px solid var(--line)}
.leute .person:last-child{border-bottom:none}
.leute .person:hover .nm{color:var(--accent)}
.leute .punkt{width:10px;height:10px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.leute .nm{flex:1;font-size:13px}
.leute .zeit{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.leute-label{font-size:11px;font-weight:600;color:#fff;text-align:center;
  text-shadow:0 0 3px #000,0 0 5px #000;white-space:nowrap}
#konto{border-top:1px solid var(--line)}
#konto .hint{margin-top:8px}

/* ---------- Standorthinweis ---------- */
#standort-info{margin:0 0 10px;padding:8px 10px;border-radius:7px;
  border-left:3px solid var(--muted);background:#2a2f26;line-height:1.45}
#standort-info.drin{border-left-color:#4caf50}
#standort-info.fern{border-left-color:#d98a2b;color:#e8d5b0}
#ortung.fern{color:#d98a2b;border-color:#d98a2b}
#login .hinweis b{color:var(--text)}