/* ============================================================================
   DIGITAL BATTLEFIELD — Taktisches Operations-Center
   Design: Feldausrüstungs-Optik (mattes Oliv-Drab / Coyote-Khaki, kein Glühen).
   Farbsehschwäche-sicher: Unterscheidung IMMER über Form, Rahmenstil,
   Helligkeit, Textur und Textlabel — niemals über Farbton allein.
   Responsive für Handy · Tablet · Laptop · 21:9.
   ============================================================================ */

:root {
  /* Flächen — mattes Oliv-Drab / Feld-Gunmetal (matt, kein Glühen) */
  --bg:        #14160e;
  --panel:     #1a1d13;
  --panel-2:   #22261a;
  --panel-3:   #2b3022;
  --panel-hi:  #353b29;

  /* Linien */
  --line:      #3a3f2a;
  --line-2:    #4a4f3550;
  --line-hi:   #565c3d;

  /* Text — warmes Khaki-Weiß */
  --ink:       #e2e1d2;
  --ink-dim:   #a9a78d;
  --ink-faint: #74755c;

  /* UI-Akzent: mattes Coyote/Khaki (Feldausrüstung) — bewusst KEINE Symbolikfarbe */
  --accent:     #a89368;
  --accent-hi:  #c6b489;
  --accent-dim: #6e6243;

  /* Zugehörigkeit (APP-6-Logik; Form/Rahmen primär, Farbe sekundär & matt) */
  --eigen:     #5d88bf;  /* freund — blau   */
  --feind:     #c45f54;  /* feind  — rot    */
  --neutral:   #7d9a55;  /* neutral— grün   */
  --unbekannt: #cda94e;  /* unbek. — gelb   */

  --warn:      #c98a3a;
  --ok:        #7d9a55;

  /* Typografie */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-disp: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", var(--font-sans);

  --rad: 2px;
  --gap: 14px;
  --rail-w: 64px;
  --head-h: 52px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* feines, dezentes Gitter im Hintergrund (neutral) */
  background-image:
    linear-gradient(rgba(168,147,104,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,147,104,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  overflow: hidden;
}

/* ── Klassifizierungsbänder (matte Stencil-Markierung) ──────────────────── */
.classbar {
  position: fixed; left: 0; right: 0; z-index: 60;
  height: 20px; line-height: 19px;
  background: var(--panel-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-align: center; text-transform: uppercase;
  border-block: 1px solid var(--line-hi);
  user-select: none;
}
.classbar--top { top: 0; }
.classbar--bottom { bottom: 0; }
#app { position: fixed; top: 20px; bottom: 20px; left: 0; right: 0; }

/* ── Buttons / Eingaben ─────────────────────────────────────────────────── */
button, .btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-hi);
  border-radius: var(--rad); padding: 7px 12px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
button:hover, .btn:hover { background: var(--panel-hi); border-color: var(--accent-dim); }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.btn--primary { background: var(--accent); color: #14160a; border-color: var(--accent-hi); font-weight: 700; }
.btn--primary:hover { background: var(--accent-hi); color: #14160a; }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--danger { border-color: var(--feind); color: #e3a99c; }
.btn--danger:hover { background: #3a201c; }
.btn--sm { padding: 4px 8px; font-size: 11px; }
button:disabled { opacity: .45; cursor: not-allowed; }

input, select, textarea {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-hi);
  border-radius: var(--rad); padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
label { display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 4px; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

/* ── Eyebrow / Datenlabels ──────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.mono { font-family: var(--font-mono); }
.dim { color: var(--ink-dim); }
.amber { color: var(--accent); }

/* ── App-Layout: Rail + Header + Main ───────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--head-h) 1fr; height: 100%; }

.rail {
  grid-row: 1 / 3; background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px;
}
.rail__brand {
  width: 40px; height: 40px; margin-bottom: 8px; color: var(--accent);
  display: grid; place-items: center;
}
.rail__brand svg { width: 30px; height: 30px; }
.navitem {
  width: 52px; height: 50px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-faint); background: transparent; border: 1px solid transparent;
  border-radius: var(--rad); cursor: pointer; text-decoration: none;
}
.navitem svg { width: 20px; height: 20px; }
.navitem span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .04em;
  text-transform: uppercase; }
.navitem:hover { color: var(--ink); background: var(--panel-2); }
.navitem.active { color: var(--accent); border-color: var(--line-hi);
  background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.rail__spacer { flex: 1; }

.topbar {
  grid-column: 2; background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
}
.topbar__title { font-family: var(--font-disp); font-weight: 700;
  font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.topbar__sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  letter-spacing: .08em; }
.topbar__spacer { flex: 1; }
.dtg { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--accent); text-align: right; white-space: nowrap; }
.dtg small { display: block; color: var(--ink-faint); font-size: 9px; letter-spacing: .14em; }
.usertag { display: flex; align-items: center; gap: 8px; padding-left: 14px;
  border-left: 1px solid var(--line); }
.usertag__cs { font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em; }
.usertag__role { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); }

.main { grid-column: 2; overflow: auto; position: relative; }
.main--flush { overflow: hidden; } /* für die Vollbild-Karte */

/* ── Panels / Karten ────────────────────────────────────────────────────── */
.wrap { padding: var(--gap); max-width: 1500px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad); }
.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.panel__head h2 { margin: 0; font-family: var(--font-disp); font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.panel__head .eyebrow { margin-left: auto; }
.panel__body { padding: 12px; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 720px)  { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* Kennzahl-Kachel */
.stat { padding: 14px; border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--panel); }
.stat__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); }
.stat__v { font-family: var(--font-disp); font-size: 34px; font-weight: 700;
  letter-spacing: .02em; color: var(--accent); margin-top: 4px; }
.stat__v.ink { color: var(--ink); }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
table.tac { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
table.tac th { text-align: left; padding: 8px 10px; color: var(--ink-faint);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); font-weight: 600; }
table.tac td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
table.tac tr:hover td { background: var(--panel-2); }
table.tac tr.clickable { cursor: pointer; }

/* ── Tags / Badges (Form + Rahmen + Text, nicht nur Farbe) ──────────────── */
.tag { display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--rad);
  border: 1px solid var(--line-hi); color: var(--ink-dim); white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; display: inline-block; }

/* Status — über Rahmenstil + Helligkeit + Text unterscheidbar */
.tag--planung    { border-style: dashed; color: var(--ink-dim); }
.tag--aktiv      { border-color: var(--accent); color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-dim); }
.tag--abgeschlossen { border-style: solid; color: var(--ink-faint); opacity: .8; }
.tag--abgebrochen   { border-style: dotted; color: var(--feind); }

/* Dringlichkeit */
.prec { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; padding: 1px 6px; border: 1px solid currentColor; border-radius: var(--rad); }
.prec--routine   { color: var(--ink-faint); }
.prec--priorität { color: var(--warn); border-style: dashed; }
.prec--blitz     { color: var(--feind); border-width: 1.5px; font-weight: 800; }

/* ── Login / Zugangskontrolle ───────────────────────────────────────────── */
.gate { height: 100%; display: grid; place-items: center; padding: 24px; }
.gate__card { width: min(420px, 94vw); background: var(--panel);
  border: 1px solid var(--line-hi); border-radius: var(--rad); overflow: hidden; }
.gate__bar { background: var(--accent-dim); color: #14160a; text-align: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; padding: 4px; text-transform: uppercase; }
.gate__body { padding: 26px 24px; }
.gate__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.gate__logo svg { width: 38px; height: 38px; color: var(--accent); }
.gate__logo h1 { margin: 0; font-family: var(--font-disp); font-size: 26px;
  letter-spacing: .18em; text-transform: uppercase; }
.gate__tagline { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
.gate__or { text-align: center; font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-faint); letter-spacing: .2em; margin: 16px 0;
  display: flex; align-items: center; gap: 10px; }
.gate__or::before, .gate__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gate__err { font-family: var(--font-mono); font-size: 12px; color: #e6a596;
  border: 1px solid var(--feind); border-radius: var(--rad);
  padding: 8px 10px; margin-bottom: 14px; background: #2a1814; }
.gate__seed { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); line-height: 1.7; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 30px; right: 16px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { font-family: var(--font-mono); font-size: 12px; padding: 9px 12px;
  background: var(--panel-3); border: 1px solid var(--line-hi); border-left-width: 3px;
  border-radius: var(--rad); animation: slidein .18s ease; }
.toast--ok   { border-left-color: var(--ok); }
.toast--err  { border-left-color: var(--feind); }
.toast--info { border-left-color: var(--accent); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; z-index: 70; background: rgba(8,9,5,.72);
  display: grid; place-items: center; padding: 24px; }
.modal { width: min(620px, 96vw); max-height: 88vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--rad); }
.modal__head { display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.modal__head h3 { margin: 0; font-family: var(--font-disp); font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; }
.modal__head button { margin-left: auto; }
.modal__body { padding: 16px; }
.modal__foot { padding: 12px 16px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; background: var(--panel-2); }

/* ── Diverses ───────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 50px 20px; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 12px; }
.hr { height: 1px; background: var(--line); border: 0; margin: 14px 0; }
.scroll-y { overflow-y: auto; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-hi); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================================
   Erweiterte Komponenten — Operationsdetail, Lagekarte, Aufklärungsnetz
   ============================================================================ */

/* ── Untertabs (Operationsdetail) ───────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  background: var(--panel); padding: 0 12px; overflow-x: auto; }
.tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); background: transparent;
  border: 1px solid transparent; border-bottom: none; padding: 9px 14px;
  cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  border-radius: var(--rad) var(--rad) 0 0; }
.tab svg { width: 15px; height: 15px; }
.tab:hover { color: var(--ink); background: var(--panel-2); }
.tab.active { color: var(--accent); background: var(--panel-2);
  border-color: var(--line); box-shadow: inset 0 2px 0 var(--accent); }

/* ── Werkzeugleiste (Karteneditor) ──────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad);
  flex-wrap: wrap; }
.tool { width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
  border-radius: var(--rad); cursor: pointer; padding: 0; position: relative; }
.tool svg { width: 18px; height: 18px; }
.tool:hover { color: var(--ink); border-color: var(--line-hi); background: var(--panel-hi); }
.tool.active { color: #14160a; background: var(--accent); border-color: var(--accent-hi); }
.toolsep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.toollabel { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); padding: 0 4px; }

/* ── Segmentierte Auswahl (Form-/Helligkeitscodierung sichtbar) ─────────── */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-hi);
  border-radius: var(--rad); overflow: hidden; }
.seg button { border: none; border-right: 1px solid var(--line); border-radius: 0;
  background: var(--bg); padding: 6px 10px; display: flex; align-items: center; gap: 6px; }
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--panel-hi); color: var(--accent-hi);
  box-shadow: inset 0 -2px 0 var(--accent); }
.seg .frameglyph { width: 14px; height: 14px; }

/* ── Schlüssel/Wert (OPORD, Eigenschaften) ──────────────────────────────── */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 1px;
  background: var(--line-2); border: 1px solid var(--line); border-radius: var(--rad);
  overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; }
.kv__k { background: var(--panel-2); padding: 8px 11px; color: var(--ink-faint);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.kv__v { background: var(--panel); padding: 8px 11px; color: var(--ink); white-space: pre-wrap; }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; } }

/* ── OPORD-Block ────────────────────────────────────────────────────────── */
.opord__sec { margin-bottom: 14px; }
.opord__h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.opord__b { font-family: var(--font-mono); font-size: 13px; line-height: 1.65;
  color: var(--ink); white-space: pre-wrap; }
.opord__b.empty-inline { color: var(--ink-faint); font-style: italic; }

/* ── Klassifizierungs-Abzeichen ─────────────────────────────────────────── */
.classbadge { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px;
  border-radius: var(--rad); border: 1px solid currentColor; white-space: nowrap; }
.classbadge--öffentlich   { color: var(--ink-faint); border-style: solid; }
.classbadge--intern       { color: var(--neutral); border-style: solid; }
.classbadge--vertraulich  { color: var(--warn); border-style: dashed;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(217,139,58,.08) 4px, rgba(217,139,58,.08) 8px); }

/* ── Funkverkehr-Feed (SITREP) ──────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed__item { border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--rad); background: var(--panel); padding: 9px 11px; }
.feed__item[data-kind="CONTACT"]  { border-left-color: var(--feind); }
.feed__item[data-kind="MEDEVAC"]  { border-left-color: var(--feind); }
.feed__item[data-kind="FRAGO"]    { border-left-color: var(--accent); }
.feed__item[data-kind="INTEL"]    { border-left-color: var(--eigen); }
.feed__item[data-kind="SITREP"]   { border-left-color: var(--line-hi); }
.feed__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  font-family: var(--font-mono); font-size: 11px; }
.feed__kind { font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.feed__dtg { color: var(--accent); }
.feed__cs { color: var(--ink-faint); margin-left: auto; }
.feed__body { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; color: var(--ink); }

/* ── Lagekarte ──────────────────────────────────────────────────────────── */
.maplayout { display: grid; grid-template-columns: 1fr 252px; gap: var(--gap);
  height: 100%; padding: var(--gap); }
.mapmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mapstage { flex: 1; position: relative; overflow: hidden; min-height: 0;
  border: 1px solid var(--line-hi); border-radius: var(--rad); background: #101109;
  cursor: grab; }
.mapstage.panning { cursor: grabbing; }
.mapstage.placing { cursor: crosshair; }
.mapvp { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.mapsvg { display: block; }
.mapside { display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; }
.maphint { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: .04em; padding: 5px 2px; line-height: 1.5; }
.legend { display: flex; flex-direction: column; gap: 7px; }
.legend__row { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-dim); }
.legend__row svg { width: 26px; height: 26px; flex: none; }
.mk-label { font-family: var(--font-mono); font-size: 10px; fill: var(--ink);
  paint-order: stroke; stroke: #101109; stroke-width: 3px; stroke-linejoin: round; }
.mk-hit { cursor: pointer; }
.mk-hit.sel .mk-ring { opacity: 1; }
.mk-ring { opacity: 0; }
.zoomctl { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column;
  gap: 4px; z-index: 5; }
.zoomctl button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  font-size: 16px; background: var(--panel); }
.gridcoord { position: absolute; left: 8px; bottom: 8px; font-family: var(--font-mono);
  font-size: 10px; color: var(--accent); background: rgba(10,11,7,.7); padding: 2px 6px;
  border: 1px solid var(--line); border-radius: var(--rad); pointer-events: none; }

/* ── Aufklärungs-Beziehungsnetz ─────────────────────────────────────────── */
.graphwrap { display: grid; grid-template-columns: 1fr 240px; gap: var(--gap);
  height: 100%; padding: var(--gap); }
.graphstage { position: relative; overflow: hidden; border: 1px solid var(--line-hi);
  border-radius: var(--rad); background:
    radial-gradient(circle at 50% 40%, #1c2014 0%, #101109 100%); cursor: grab; }
.graphstage svg { display: block; width: 100%; height: 100%; }
.gnode-box { cursor: pointer; }
.gnode-box rect { fill: var(--panel-2); stroke: var(--line-hi); stroke-width: 1.5; }
.gnode-box.sel rect { stroke: var(--accent); stroke-width: 2; }
.gnode-box text { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); }
.gnode-box .gtype { font-size: 9px; fill: var(--ink-faint); letter-spacing: .1em;
  text-transform: uppercase; }
.glink { stroke: var(--line-hi); stroke-width: 1.5; }
.glink-lbl { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-dim);
  paint-order: stroke; stroke: #101109; stroke-width: 3px; }

/* ── Personal-Karten ────────────────────────────────────────────────────── */
.ava { width: 38px; height: 38px; border-radius: var(--rad); flex: none;
  display: grid; place-items: center; background: var(--panel-3);
  border: 1px solid var(--line-hi); font-family: var(--font-disp); font-weight: 700;
  font-size: 15px; letter-spacing: .04em; color: var(--accent); }

/* ── Rollen-Badge (Rahmenstil je Stufe, nicht nur Farbe) ────────────────── */
.rolebadge { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line-hi);
  border-radius: var(--rad); color: var(--ink-dim); white-space: nowrap; }
.rolebadge--rekrut     { border-style: dotted; }
.rolebadge--operator   { border-style: solid; }
.rolebadge--zugfuehrer { border-style: dashed; color: var(--ink); }
.rolebadge--kommandant { border-style: double; color: var(--accent); }
.rolebadge--admin      { border-color: var(--accent); color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-dim); }

/* ── Hilfsklassen ───────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted-card { border: 1px dashed var(--line); border-radius: var(--rad); padding: 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  padding: 3px 8px; border: 1px solid var(--line-hi); border-radius: var(--rad);
  color: var(--ink-dim); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .formgrid { grid-template-columns: 1fr; } }
.formgrid .full { grid-column: 1 / -1; }

/* ============================================================================
   Live-Standorte (Blue-Force-Tracking) — Steuerelemente & Listen
   ============================================================================ */
.mapctl-top { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 5; }
.mapbtn { width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--rad);
  color: var(--ink-dim); cursor: pointer; }
.mapbtn:hover { color: var(--ink); border-color: var(--accent-dim); }
.mapbtn.active { color: #14160a; background: var(--accent); border-color: var(--accent-hi); }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint);
  border: 1px solid var(--line-hi); }
.live-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(125,154,85,.18);
  animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 5px rgba(125,154,85,.05); } }

.liverow { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--rad); background: var(--panel-2);
  cursor: pointer; }
.liverow:hover { border-color: var(--line-hi); background: var(--panel-3); }
.freshdot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1.5px solid var(--eigen); }
.freshdot--fresh  { background: var(--eigen); }
.freshdot--recent { background: transparent; }
.freshdot--stale  { background: transparent; border-style: dashed; opacity: .7; }
.live-label { fill: var(--ink); }

/* ============================================================================
   RESPONSIVE — Handy · Tablet · Laptop · Ultrawide (21:9)
   ============================================================================ */

/* Inhalts-Spalten zentrieren (verhindert Überdehnung auf breiten Schirmen) */
.wrap { margin-inline: auto; }

/* ── Ultrawide / 21:9 (≥ 1800px): breitere Seitenpanels, Inhalt zentriert ── */
@media (min-width: 1800px) {
  .wrap { max-width: 1760px; }
  .maplayout { grid-template-columns: 1fr 320px; }
  .graphwrap { grid-template-columns: 1fr 300px; }
  .split { grid-template-columns: 1fr 420px; }
}
@media (min-width: 2500px) {
  .wrap { max-width: 2100px; }
}

/* ── Tablet quer / kleiner Laptop (≤ 1100px): kompaktere Seitenspalten ── */
@media (max-width: 1100px) {
  .maplayout { grid-template-columns: 1fr 224px; }
  .graphwrap { grid-template-columns: 1fr 210px; }
}

/* ── Tablet hoch (≤ 860px): Karten-/Graph-Seitenpanel unter die Karte ── */
@media (max-width: 860px) {
  .main--flush { overflow: auto; }
  .maplayout, .graphwrap {
    display: flex; flex-direction: column; height: auto; min-height: 100%;
  }
  .mapstage { height: 58vh; min-height: 320px; flex: none; }
  .graphstage { height: 56vh; min-height: 320px; }
  .mapside { overflow: visible; }
  .toollabel { display: none; }              /* Werkzeugleisten-Beschriftungen sparen Platz */
}

/* ── Handy (≤ 640px): Rail → untere Tableiste, kompakter Header ── */
@media (max-width: 640px) {
  :root { --head-h: 46px; }
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--head-h) 1fr auto;
  }
  .topbar { grid-column: 1; grid-row: 1; gap: 10px; padding: 0 10px; }
  .topbar__title { font-size: 15px; letter-spacing: .04em; }
  .topbar__sub { display: none; }
  .dtg small { display: none; }
  .dtg { font-size: 10px; }
  .usertag__role { display: none; }

  .main { grid-column: 1; grid-row: 2; }

  .rail {
    grid-column: 1; grid-row: 3;
    flex-direction: row; justify-content: space-around; align-items: stretch;
    border-right: none; border-top: 1px solid var(--line);
    padding: 4px 2px; gap: 2px;
  }
  .rail__brand, .rail__spacer { display: none; }
  .navitem { width: auto; flex: 1; height: 44px; }
  .navitem span { font-size: 8px; }
  .navitem.active { box-shadow: inset 0 2px 0 var(--accent); }

  .wrap { padding: 10px; }
  .toolbar-row { gap: 6px; }

  /* Tabellen horizontal scrollbar machen statt zu quetschen */
  section.panel { overflow-x: auto; }
  table.tac { min-width: 540px; }

  /* Untertabs (Operationsdetail) scrollbar */
  .tabs { padding: 0 6px; }

  /* Karten-/Graph-Höhe auf kleinen Schirmen */
  .mapstage { height: 52vh; min-height: 280px; }
  .graphstage { height: 50vh; min-height: 280px; }

  /* Segmentierte Auswahl darf umbrechen */
  .seg { flex-wrap: wrap; }

  /* Modal nimmt mehr Breite/Höhe */
  .modal { width: 96vw; max-height: 92vh; }
  .modal-bg { padding: 10px; }
}

/* ── Sehr schmal (≤ 380px): noch kompakter ── */
@media (max-width: 380px) {
  .topbar__title { font-size: 14px; }
  .navitem span { display: none; }     /* nur Icons in der Tableiste */
  .navitem { height: 40px; }
}

/* Touch-Geräte: größere Trefferflächen */
@media (pointer: coarse) {
  .btn--sm, button.btn--sm { padding: 8px 11px; }
  .tool { width: 38px; height: 38px; }
  .navitem { min-height: 44px; }
}

/* ── Mess-Werkzeug & Spuren ─────────────────────────────────────────────── */
.measure-label { fill: var(--accent-hi); font-size: 11px; }
.measure-total { fill: var(--accent-hi); font-size: 12px; font-weight: 700; }
.mapbtn--trail.active { color: #14160a; background: var(--eigen); border-color: var(--eigen); }

/* ── Pairing / Konto-Abschnitte ─────────────────────────────────────────── */
.subhead { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); }
.paircode { font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  letter-spacing: .26em; text-align: center; color: var(--accent-hi);
  background: var(--panel-3); border: 1px solid var(--line-hi); border-radius: var(--rad);
  padding: 12px; user-select: all; }
details.adv summary { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-dim); cursor: pointer; padding: 4px 0; }
details.adv summary:hover { color: var(--ink); }

/* ── Karten-Attribution (Anbieter-Lizenz) ───────────────────────────────── */
.mapattr { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 4;
  font-family: var(--font-sans); font-size: 9.5px; color: var(--ink-dim);
  background: rgba(15,17,9,.72); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 2px 8px; max-width: 70%; text-align: center; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }