:root {
  --bg: #1d1f1a; --panel: #262922; --panel2: #2f332a; --line: #3d4236; --text: #dfe3d2; --dim: #9aa08a;
  --amber: #f0b429; --accent: #7f9a52; --red: #c8463c; --ok: #6fd36f;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.35 "Segoe UI", system-ui, sans-serif; display: flex; flex-direction: column; }
#top { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: 2px; color: var(--amber); font-size: 15px; white-space: nowrap; }
.brand span { display: block; font-weight: 400; letter-spacing: 0.5px; color: var(--dim); font-size: 11px; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.search input { width: 100%; }
#qres { position: absolute; z-index: 2000; top: 100%; left: 0; right: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 0 0 6px 6px; display: none; }
#qres div { padding: 6px 10px; cursor: pointer; border-top: 1px solid var(--line); }
#qres div:hover, #qres div.sel { background: #3a4030; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; }
.seg button.on { background: var(--accent); color: #111; }
.time { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.time b { color: var(--amber); font-family: Consolas, monospace; min-width: 60px; }
.coord { font-family: Consolas, monospace; color: var(--dim); min-width: 220px; }
.logout { color: var(--dim); }
main { flex: 1; display: flex; min-height: 0; }
#map { flex: 1; background: #3b3f36; }
#side { width: 410px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 4px 12px 12px; }
section { border-bottom: 1px solid var(--line); padding: 8px 0 10px; }
h2 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin: 4px 0 8px; font-weight: 600; }
h2 small { text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; margin-left: 6px; }
label { display: block; color: var(--dim); font-size: 12px; margin: 6px 0; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 3px; }
input, select, textarea, button, .btn { font: inherit; color: var(--text); background: #171915; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; }
textarea { resize: vertical; }
input[type=range] { padding: 0; accent-color: var(--amber); }
button, .btn { background: var(--panel2); cursor: pointer; display: inline-block; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary { background: #9a7614; border-color: #b8901c; color: #111; font-weight: 600; }
button.danger { background: #5a231e; border-color: #7a2f28; }
button.on { background: var(--accent); color: #111; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; padding: 4px 8px 8px; }
legend { color: var(--dim); font-size: 12px; padding: 0 4px; }
.hint { color: var(--dim); font-size: 12px; }
.msg { min-height: 18px; font-size: 12px; color: var(--ok); }
.msg.err { color: #ff7b6b; }
#badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; letter-spacing: 0; }
#badge.active { background: #2f5a2f; color: #b7f0b7; }
#badge.dirty { background: #5a4a1a; color: #f0d890; }
#palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
#palette button { padding: 6px 2px; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#palette button .sym { font-weight: 700; font-size: 13px; color: var(--amber); }
#palette button.on .sym { color: #111; }
#tlist div, #mlist div { padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; margin: 4px 0; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
#tlist div:hover, #mlist div:hover { border-color: var(--accent); }
#tlist div.sel { background: #3a4030; border-color: var(--amber); }
#tlist small, #mlist small { color: var(--dim); }
#mlist .act { color: var(--ok); }
#mlist button { padding: 1px 6px; font-size: 11px; }
details summary { cursor: pointer; color: var(--dim); margin-top: 6px; }
/* Kartenmarker */
.tgt { position: relative; }
.tgt .c { width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 22, 18, 0.85); border: 2px solid var(--amber);
          color: var(--amber); font: 700 11px/26px Consolas, monospace; text-align: center; position: absolute; left: 0; top: 0; }
.tgt.sel .c { background: var(--amber); color: #111; border-color: #fff; }
.tgt.heli .c { border-style: dashed; }
.tgt .arr { position: absolute; left: 0; top: 0; width: 30px; height: 30px; }
.tgt .lbl { position: absolute; left: 34px; top: 6px; white-space: nowrap; color: #fff; font: 600 11px "Segoe UI", sans-serif;
            text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.wp { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid #111; }
.leaflet-container { font: inherit; background: #3b3f36; }
.leaflet-container.placing { cursor: crosshair; }
/* Anmeldung */
body.login { align-items: center; justify-content: center; }
.loginbox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 26px 30px; width: 340px; }
.loginbox .brand { margin-bottom: 16px; }
.loginbox button { width: 100%; margin-top: 8px; }
.warn { color: #ff9b8b; }
code { color: var(--amber); }
@media (max-width: 900px) { main { flex-direction: column; } #side { width: auto; max-height: 50vh; } }
label.btn { display: inline-block; margin: 0; color: var(--text); font-size: 14px; }
label.btn input[type=file] { display: none; }