/* FOKUS Karte — dunkles, dichtes UI. Ein Akzent (Bernstein), sonst Neutraltöne.
   Uniformität: ALLE Bedienelemente 34 px hoch, 13 px Schrift, 8 px Radius, 8 px Abstand. */

:root {
  --bg: #0e0f11;
  --panel: #15171a;
  --panel-2: #1b1e22;
  --panel-3: #23272c;
  --line: #2a2f35;
  --line-soft: #1f2328;
  --txt: #e6e8ea;
  --txt-dim: #aab1b9;
  --muted: #7f8792;
  --accent: #d9901f;
  --accent-soft: rgba(217, 144, 31, 0.14);
  --danger: #cf5350;
  --ok: #4f9d6b;

  --h: 34px;
  --r: 8px;
  --fs: 13px;
  --fs-sm: 11px;
  --gap: 8px;
  --header: 52px;
  --side: 328px;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f343a; border-radius: 6px; border: 2px solid var(--panel); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Grundgerüst ---------- */

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
}

.hidden { display: none !important; }

/* ---------- Kopfzeile ---------- */

header#top {
  /* Eigener Stapelkontext, sonst legen sich Leaflets Ebenen (z-index 400+)
     über die aufgeklappte Bildschirmtastatur. */
  position: relative;
  z-index: 700;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  grid-template-rows: var(--header) auto;
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 10px;
  min-width: 0;
  height: var(--header);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-right: 2px;
  white-space: nowrap;
}
.brand b { color: var(--accent); }
.brand span { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.grow { flex: 1 1 auto; min-width: 0; }

.ctl {
  height: var(--h);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--txt);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.ctl:hover:not(:disabled) { background: var(--panel-3); border-color: #353b42; }
.ctl:active:not(:disabled) { transform: scale(0.98); }
.ctl:disabled { opacity: .45; cursor: not-allowed; }
.ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

select.ctl { -webkit-appearance: none; appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ctl.primary { background: var(--accent); border-color: var(--accent); color: #17130a; font-weight: 650; }
.ctl.primary:hover:not(:disabled) { background: #e9a033; border-color: #e9a033; }
.ctl.danger { color: var(--danger); border-color: #40302f; background: #1d1516; }
.ctl.danger:hover:not(:disabled) { background: #2a1b1c; border-color: #5a3a39; }

.icon-btn { width: var(--h); padding: 0; justify-content: center; flex: 0 0 auto; }

.search-wrap { position: relative; flex: 1 1 200px; min-width: 110px; max-width: 420px; }
.search-wrap input {
  width: 100%;
  height: var(--h);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0 58px 0 10px;
}
.search-wrap input::placeholder { color: var(--muted); }
.search-wrap input:focus { outline: none; border-color: var(--accent); background: #191c20; }
.search-wrap .clear {
  position: absolute; right: 32px; top: 4px;
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); line-height: 1;
}
.search-wrap .clear:hover { background: var(--panel-3); color: var(--txt); }

/* Knopf für die kyrillische Bildschirmtastatur — sitzt fest rechts im Feld,
   der Leeren-Knopf rückt davor. */
.kyr-btn {
  position: absolute; right: 4px; top: 4px;
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.kyr-btn:hover { background: var(--panel-3); color: var(--txt); }
.kyr-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.kyr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.kyrpad {
  position: absolute; z-index: 20;
  top: calc(100% + 6px); left: 0;
  width: min(480px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  display: grid; gap: 5px;
}
.kp-row { display: flex; gap: 4px; }
.kp-key {
  flex: 1 1 0; min-width: 0;
  height: 40px; padding: 0 2px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-3); color: var(--txt);
  display: grid; align-content: center; justify-items: center; gap: 2px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .1s var(--ease);
}
.kp-key:hover { background: #2b3037; border-color: #3d444c; }
.kp-key:active { transform: scale(.96); }
.kp-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kp-key .k { font-size: 14px; font-weight: 650; line-height: 1; }
/* Die lateinische Entsprechung ist der eigentliche Nutzen: Buchstabe vom
   Ortsschild suchen, ohne Kyrillisch zu können. */
.kp-key .l { font-size: 9px; line-height: 1; color: var(--muted); font-family: var(--mono); }
.kp-act .kp-key .k { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; }
.kp-wide { flex: 2.6 1 0; }

.me {
  display: flex; align-items: center; gap: 7px;
  height: var(--h); padding: 0 10px 0 4px;
  border-radius: var(--r); border: 1px solid var(--line-soft);
  background: var(--panel-2); color: var(--txt-dim);
  max-width: 190px; flex: 0 0 auto;
}
.me img { width: 24px; height: 24px; border-radius: 50%; display: block; background: var(--panel-3); }
.me .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .adm { font-size: var(--fs-sm); color: var(--accent); font-weight: 700; letter-spacing: .06em; }

/* Filterleiste */
.filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--txt-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip .n { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.chip:hover { border-color: #3a4048; color: var(--txt); }
.chip[aria-pressed="true"] { background: var(--panel-3); color: var(--txt); border-color: #3d444c; }
.chip[aria-pressed="true"] .n { color: var(--txt-dim); }
.chip.sep { pointer-events: none; padding: 0; width: 1px; height: 18px; background: var(--line); border: 0; border-radius: 0; }

/* ---------- Hauptbereich ---------- */

main {
  position: relative;
  display: grid;
  grid-template-columns: var(--side) 1fr;
  min-height: 0;
}

/* Seitenliste */
aside#list {
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  min-width: 0;
}

.list-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted); font-size: var(--fs-sm);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.list-head .cnt { font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }

.list-body { overflow-y: auto; overflow-x: hidden; }

.row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 2px solid transparent;
  transition: background .14s var(--ease);
}
.row:hover { background: var(--panel-2); }
.row[aria-current="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.row.off { opacity: .5; }

.row .num {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  letter-spacing: -0.03em;
}
.row .tx { min-width: 0; }
.row .t {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .s {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}
.row .s .k { font-family: var(--sans); }

.empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--muted);
}
.empty .h { color: var(--txt-dim); font-weight: 600; margin-bottom: 6px; }
.empty .frame {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border: 1px dashed #343a41; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--mono); color: #3f464e; font-size: 17px;
}

.skel { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 42px 1fr; gap: 10px; }
.skel i { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, #1d2126 25%, #262b31 37%, #1d2126 63%); background-size: 400% 100%; animation: sh 1.3s ease infinite; }
.skel i + i { margin-top: 6px; width: 62%; }
@keyframes sh { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* Karte */
#mapwrap { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #0b0c0e; }
#map.picking { cursor: crosshair; }
#map.picking .leaflet-grab { cursor: crosshair; }
#map.measuring { cursor: crosshair; }
#map.measuring .leaflet-grab { cursor: crosshair; }

.map-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 620;
  display: flex; align-items: center; gap: 10px;
  height: var(--h); padding: 0 6px 0 12px;
  border-radius: var(--r);
  background: rgba(21, 23, 26, .94);
  border: 1px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  white-space: nowrap;
  max-width: calc(100% - 24px);
}
.map-hint b { color: var(--accent); }

.map-tools {
  position: absolute; right: 10px; top: 10px; z-index: 600;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.toggle {
  height: 28px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(21,23,26,.92); color: var(--txt-dim);
  font-size: var(--fs-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.toggle[aria-pressed="true"] { color: var(--txt); border-color: #3d444c; background: rgba(35,39,44,.95); }
.toggle .box { width: 9px; height: 9px; border-radius: 2px; border: 1px solid #4a525b; }
.toggle[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); }

.coord-read {
  position: absolute; left: 10px; bottom: 10px; z-index: 600;
  font-family: var(--mono); font-size: var(--fs-sm);
  color: var(--txt-dim);
  background: rgba(14,15,17,.86);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 4px 8px;
  pointer-events: none;
}

#drawer-btn { position: absolute; left: 10px; top: 10px; z-index: 600; display: none; }

/* Kalibrier-Modus (?kalib=1) */
.calib {
  position: absolute; left: 10px; bottom: 44px; z-index: 640;
  width: 268px;
  background: rgba(21,23,26,.96);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.calib .ch { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.calib .cg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.calib .cg label:last-child { grid-column: span 2; }
.calib label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.calib input {
  height: 28px; width: 100%;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 0 8px; font-family: var(--mono);
}
.calib input:focus { outline: none; border-color: var(--accent); }
.calib .cr { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); margin: 8px 0; line-height: 1.5; word-break: break-all; }
.calib .cb { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.calib .cb .ctl { height: 28px; justify-content: center; font-size: var(--fs-sm); }

/* Marker-Icons */
.mk { background: none !important; border: 0 !important; }
.mk .b {
  width: 100%; height: 100%;
  border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #16130c;
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .14s var(--ease);
}
.mk .b.small { border-radius: 50%; font-size: 13px; }
.mk:hover .b { transform: scale(1.12); }
.mk.sel .b { outline: 2px solid #fff; outline-offset: 2px; }
.mk.off .b { filter: grayscale(1) brightness(.62); }
.mk .lbl {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 3px);
  font-size: 10px; font-weight: 700;
  color: #dfe3e7;
  background: rgba(10,11,13,.82);
  padding: 1px 5px; border-radius: 4px;
  white-space: nowrap; pointer-events: none;
  max-width: 128px; overflow: hidden; text-overflow: ellipsis;
}
.mk.ghost .b { opacity: .78; border-style: dashed; }

/* ---------- Ortsnamen ----------
   Eigene Ebene unter den Markern. Die Kacheln sind unbeschriftet, deshalb muss
   der Text auf Schnee, Feld und Wald gleich gut liegen: heller Text, dunkler
   Rand. Ausdünnung und Grösse steuert `data-stufe` / `--ort-fs` vom Skript. */

.leaflet-pane[data-stufe] { --ort-fs: 11px; }

.ort-wrap { width: 0 !important; height: 0 !important; overflow: visible; background: none; border: 0; }

.ort {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  /* column-reverse: die kyrillische Schreibweise steht OBEN — so wie sie im Spiel
     auf den Ortsschildern steht, die lateinische darunter als Lesehilfe. */
  display: flex; flex-direction: column-reverse; align-items: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-family: var(--sans);
  font-size: var(--ort-fs);
  line-height: 1;
  color: #eef1f4;
  /* Auf fast weissem Schnee trägt der Schatten allein nicht — deshalb ein
     geschlossener dunkler Rand aus vier Richtungen plus weicher Kern. */
  text-shadow:
    0 0 4px rgba(8, 9, 11, .98),
    0 0 2px rgba(8, 9, 11, .95),
    -1px -1px 1px rgba(8, 9, 11, .9),
    1px -1px 1px rgba(8, 9, 11, .9),
    -1px 1px 1px rgba(8, 9, 11, .9),
    1px 1px 1px rgba(8, 9, 11, .9);
  transition: opacity .18s var(--ease), font-size .18s var(--ease);
}

.ort.r1 {
  font-size: calc(var(--ort-fs) * 1.2);
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.ort.r2 { font-weight: 600; letter-spacing: .02em; }
.ort.r3 { font-size: calc(var(--ort-fs) * .88); font-weight: 500; color: #cdd4db; }

/* Militär und Flugplätze heben sich leicht ab — warmer Sandton, nicht schreiend. */
.ort.t-militaer, .ort.t-flugplatz { color: #e6c48b; letter-spacing: .06em; }
.ort.t-gewaesser, .ort.t-insel { color: #b8cbd9; font-style: italic; }

/* Beide Schreibweisen gleich gross — die kyrillische ist die, die im Spiel auf
   dem Schild steht, die darf nicht kleiner sein als die Lesehilfe darunter. */
.ort .n2 {
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  opacity: 1;
  margin-bottom: 1px;
}

/* Ausdünnen nach Zoomstufe: draussen nur die grossen Städte. */
.leaflet-pane[data-stufe="1"] .ort.r2,
.leaflet-pane[data-stufe="1"] .ort.r3,
.leaflet-pane[data-stufe="2"] .ort.r3 { display: none; }

/* Bei Kleinkram und ganz herausgezoomt reicht EINE Schreibweise — zwei
   Zeilen pro Punkt wären dort nur noch Textbrei. */
.ort.r3 .n2,
.leaflet-pane[data-stufe="1"] .ort .n2 { display: none; }

/* Ortstreffer in der Liste */
.sub-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--muted); font-size: var(--fs-sm);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.sub-head .cnt { font-family: var(--mono); letter-spacing: 0; }

.row.ort-row .num { display: grid; place-items: center; }
.row.ort-row .kyr-alt { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); }
.ort-pin {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--muted);
  display: block;
}
.row.ort-row:hover .ort-pin { border-color: var(--txt-dim); }

/* „1,2 km nordöstlich von Kabanino“ — im Panel und im Formular */
.ortref {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm);
  color: var(--txt-dim);
  margin: -4px 0 12px;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.ortref .ic {
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--muted);
  flex: 0 0 auto;
}

/* ---------- Detail / Formular-Panel ---------- */

#panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 392px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 700;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  box-shadow: -18px 0 42px rgba(0,0,0,.42);
}
#panel.open { transform: none; }

.p-head {
  display: flex; align-items: center; gap: var(--gap);
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.p-head .no {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  flex: 0 0 auto;
}
.p-head .meta { min-width: 0; flex: 1 1 auto; }
.p-head .meta .kd { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-head .meta .by { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p-body { overflow-y: auto; padding: 14px; }

.fld { display: grid; gap: 6px; margin-bottom: 12px; }
.fld > label {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.fld .help { font-size: var(--fs-sm); color: var(--muted); }
.fld input, .fld select, .fld textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 10px;
  height: var(--h);
}
.fld textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent); background: #191c20; }
.fld input:read-only, .fld textarea:read-only { color: var(--txt-dim); background: #141619; }
.fld select { -webkit-appearance: none; appearance: none; }
.fld .err { font-size: var(--fs-sm); color: var(--danger); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.two .fld { margin-bottom: 0; }

.coords {
  display: flex; align-items: center; gap: var(--gap);
  margin-bottom: 12px;
}
.coords .val {
  flex: 1 1 auto;
  height: var(--h);
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.coords .val small { color: var(--muted); font-weight: 500; margin-left: 8px; font-size: var(--fs-sm); letter-spacing: 0; }

.sect {
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}

/* Fotos */
.drop {
  border: 1px dashed #343a41;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.drop.hot { border-color: var(--accent); background: var(--accent-soft); color: var(--txt); }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.shot { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-soft); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.shot .x {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border: 0; border-radius: 5px;
  background: rgba(10,11,13,.78); color: #e6e8ea; font-size: 12px; line-height: 1;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .14s var(--ease);
}
.shot:hover .x { opacity: 1; }
.shot .x:hover { background: var(--danger); color: #fff; }
.shot .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; padding: 2px 5px;
  background: linear-gradient(transparent, rgba(8,9,10,.9));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.prog { height: 4px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin-top: 8px; }
.prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s linear; }

.p-foot {
  display: flex; gap: var(--gap); padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.p-foot .ctl { flex: 1 1 auto; justify-content: center; }
.p-foot .ctl.icon-btn { flex: 0 0 auto; }

.saved { font-size: var(--fs-sm); color: var(--ok); min-height: 16px; }

.bignum {
  display: grid; place-items: center;
  gap: 4px;
  padding: 22px 0 6px;
}
.bignum .n { font-family: var(--mono); font-size: 54px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--accent); }
.bignum .c { color: var(--muted); font-size: var(--fs-sm); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }

/* ---------- Lightbox ---------- */

#lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8, 9, 10, .93);
  display: grid; grid-template-rows: auto 1fr auto;
}
#lightbox .lb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 10px; }
#lightbox .lb-mid { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 10px; }
#lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
#lightbox .lb-bot { display: flex; align-items: center; justify-content: center; gap: var(--gap); padding: 10px; }
#lightbox .cnt { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
#lightbox .cap { color: var(--txt-dim); font-size: var(--fs-sm); text-align: center; }

/* ---------- Anmeldung / Ladeschirm ---------- */

#gate {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--bg);
  display: grid; place-items: center;
  padding: 24px;
}
#gate .box { width: min(420px, 100%); }
#gate .eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
#gate h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin: 10px 0 8px; }
#gate p { color: var(--muted); margin: 0 0 18px; max-width: 46ch; }
#gate .ctl { width: 100%; justify-content: center; }
#gate .dots { display: inline-flex; gap: 4px; }
#gate .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: bl 1.05s ease-in-out infinite; }
#gate .dots i:nth-child(2) { animation-delay: .15s; }
#gate .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bl { 0%, 80%, 100% { opacity: .22 } 40% { opacity: 1 } }
#gate .detail { margin-top: 14px; font-size: var(--fs-sm); color: var(--danger); white-space: pre-wrap; }

/* ---------- Toasts ---------- */

#toasts {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 1600;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  width: min(520px, calc(100% - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  width: 100%;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r);
  background: #1c2025;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  animation: up .24s var(--ease);
}
.toast .tag { width: 3px; align-self: stretch; border-radius: 2px; background: var(--muted); flex: 0 0 auto; }
.toast.ok .tag { background: var(--ok); }
.toast.err .tag { background: var(--danger); }
.toast .msg { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.toast .x { border: 0; background: transparent; color: var(--muted); padding: 0 2px; line-height: 1; }
.toast .x:hover { color: var(--txt); }
@keyframes up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---------- Leaflet-Anpassungen ---------- */

.leaflet-container { background: #0b0c0e; font-family: var(--sans); outline: none; }
.leaflet-control-zoom a {
  background: rgba(21,23,26,.94) !important;
  color: var(--txt) !important;
  border-color: var(--line) !important;
  width: 28px !important; height: 28px !important; line-height: 26px !important;
  font-size: 16px !important;
}
.leaflet-control-zoom a:hover { background: var(--panel-3) !important; }
.leaflet-control-zoom { border: 1px solid var(--line) !important; border-radius: 7px !important; overflow: hidden; }
.leaflet-bar { box-shadow: none !important; }
.leaflet-control-attribution { display: none; }

/* ---------- Spielobjekt-Ebenen, Messen, Kontextmenü ---------- *
   Alles hier hält sich an die Masse der Kartensteuerung: 28 px Höhe,
   11 px Schrift, 999px-Radius bei den Knöpfen, 8 px bei den Flächen. */

.objekt-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Aufklappliste unter „Ebenen“ */
.drop-menu {
  width: 246px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(21,23,26,.97);
  box-shadow: 0 16px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  animation: up .18s var(--ease);
}
.drop-menu.hidden { display: none; }
.dm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 28px; padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.dm-body { max-height: min(52vh, 420px); overflow: auto; padding: 4px; }
.dm-foot {
  border-top: 1px solid var(--line);
  padding: 6px 10px;
  font-size: 10px; line-height: 1.45; color: var(--muted);
}
.dm-foot:empty { display: none; }

.mini {
  height: 20px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--txt-dim);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mini:hover { background: var(--panel-3); color: var(--txt); }

.eb-row {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 6px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--txt-dim);
  font-size: var(--fs-sm); font-weight: 600;
  text-align: left;
}
.eb-row:hover { background: var(--panel-2); color: var(--txt); }
.eb-row[aria-pressed="true"] { color: var(--txt); }
.eb-row .box { width: 9px; height: 9px; border-radius: 2px; border: 1px solid #4a525b; flex: 0 0 auto; }
.eb-row[aria-pressed="true"] .box { background: currentColor; border-color: currentColor; }
.eb-row .ic { width: 14px; text-align: center; font-size: 11px; flex: 0 0 auto; filter: saturate(.9); }
.eb-row .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-dim); }
.eb-row[aria-pressed="true"] .nm { color: var(--txt); }
.eb-row .n { font-family: var(--mono); font-size: 10px; color: var(--muted); flex: 0 0 auto; }

/* Tooltip am Zeiger */
.obj-tip {
  position: absolute; z-index: 660;
  max-width: 260px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(14,15,17,.96);
  font-size: var(--fs-sm); line-height: 1.4;
  color: var(--txt);
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.obj-tip .i { display: block; color: var(--muted); }
.obj-tip.hidden { display: none; }

/* Kleines Infofenster nach dem Anklicken eines Spielobjekts */
.obj-pop {
  position: absolute; z-index: 665;
  width: 236px;
  transform: translate(-50%, calc(-100% - 12px));
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(21,23,26,.98);
  box-shadow: 0 16px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 9px 10px 10px;
  animation: up .16s var(--ease);
}
.obj-pop.hidden { display: none; }
.obj-pop.unten { transform: translate(-50%, 12px); }
.obj-pop .t { font-weight: 650; font-size: var(--fs); line-height: 1.3; padding-right: 18px; }
.obj-pop .k { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--txt-dim); margin-top: 3px; }
.obj-pop .k .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.obj-pop .i { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.obj-pop .c { font-family: var(--mono); font-size: var(--fs-sm); color: var(--txt-dim); margin-top: 6px; }
.obj-pop .ctl { height: 26px; width: 100%; justify-content: center; margin-top: 9px; font-size: var(--fs-sm); }
.obj-pop .x {
  position: absolute; right: 4px; top: 4px;
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); line-height: 1; font-size: 16px;
}
.obj-pop .x:hover { color: var(--txt); background: var(--panel-3); }

/* Messwerkzeug */
.mess-box {
  position: absolute; left: 10px; bottom: 44px; z-index: 640;
  width: 236px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(21,23,26,.96);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.mess-box.hidden { display: none; }
.mb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 28px; padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.mb-body { max-height: 40vh; overflow: auto; padding: 6px 10px 8px; }
.mb-body .hint { font-size: var(--fs-sm); color: var(--muted); }
.mb-seg {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--txt-dim);
  padding: 2px 0;
}
.mb-seg .no { color: var(--muted); }
.mb-seg .pe { color: var(--muted); }
.mb-sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs); font-weight: 700; color: var(--txt);
}
.mb-sum span:first-child { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

.mess-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: #17130a; background: var(--accent);
  padding: 1px 5px; border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Rechtsklick-Menü */
.ctx-menu {
  position: absolute; z-index: 670;
  width: 208px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(21,23,26,.98);
  box-shadow: 0 16px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 4px;
  animation: up .14s var(--ease);
}
.ctx-menu.hidden { display: none; }
.ctx-menu .cx-co {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted);
  padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.ctx-menu button {
  width: 100%; height: 28px; padding: 0 8px;
  display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--txt-dim); font-size: var(--fs-sm); font-weight: 600; text-align: left;
}
.ctx-menu button:hover { background: var(--panel-2); color: var(--txt); }

.coord-read .near { color: var(--muted); margin-left: 8px; font-family: var(--sans); }

/* ---------- Schmale Fenster (Handy / Discord-Seitenleiste) ---------- */

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  aside#list {
    position: absolute; inset: 0 auto 0 0;
    width: min(320px, 86%);
    z-index: 650;
    transform: translateX(-102%);
    transition: transform .26s var(--ease);
    box-shadow: 18px 0 42px rgba(0,0,0,.45);
  }
  aside#list.open { transform: none; }
  #drawer-btn { display: inline-flex; }
  #panel { width: min(392px, 100%); }
  .coord-read { display: none; }
  .mess-box { bottom: 10px; }
}

@media (max-width: 560px) {
  :root { --header: 48px; }
  .brand span { display: none; }
  .me .nm, .me .adm { display: none; }
  .me { padding: 0 4px; max-width: none; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .map-hint { font-size: var(--fs-sm); }
  .drop-menu { width: 214px; }
  .mess-box { width: 200px; }

  /* Tastatur auf dem Handy: fest über die volle Breite, damit nichts aus dem
     Bild läuft. Die Tasten schrumpfen in der Breite mit, bleiben aber hoch
     genug für den Daumen. Die Karte darunter verrutscht dabei nicht. */
  .kyrpad {
    position: fixed;
    left: 8px; right: 8px;
    width: auto;
    top: calc(var(--header) + 6px);
    padding: 6px;
  }
  .kp-row { gap: 3px; }
  .kp-key { height: 44px; border-radius: 6px; }
  .kp-key .k { font-size: 13px; }
  .kp-key .l { font-size: 8px; }
}