/* TriARge - Lagebild Einsatzleitung.
 * Bewusst nüchtern gehalten: helle Oberfläche, dünne Trennlinien, dichte
 * Tabellen, Zahlen in Tabellenziffern. Farbe wird nur dort eingesetzt, wo sie
 * Bedeutung trägt (Sichtungskategorien, Gefahrenstufen, Status).
 */

:root {
  --tinte: #16191d;
  --tinte-2: #4a5058;
  --tinte-3: #767d85;
  --linie: #d3d7dc;
  --linie-2: #e6e9ec;
  --flaeche: #ffffff;
  --flaeche-2: #f5f6f8;
  --flaeche-3: #eceef1;
  --akzent: #12395f;
  --akzent-hell: #e7edf4;

  --sk1: #d1232a;
  --sk2: #e39400;
  --sk3: #177d3c;
  --sk4: #1f5fa8;
  --tot: #22262b;
  --ung: #8b9199;

  --warn: #b0262c;
  --warn-2: #c07a10;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* Die Seite selbst scrollt nie - gescrollt wird nur innerhalb der Panels.
 * Auf iPadOS verhindert das zusätzlich das Mitziehen der ganzen Seite. */
html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--schrift);
  font-size: 12px;
  line-height: 1.4;
  color: var(--tinte);
  background: var(--flaeche-2);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select { font-family: inherit; font-size: 12px; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
input, select, textarea { touch-action: manipulation; }
/* Innenliegende Scrollbereiche: weiches Scrollen, kein Durchziehen zur Seite. */
.rail-inhalt, .dock-inhalt, .funk, .proto, .blk.wachsend {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
h2, h3, h4 { margin: 0; font-weight: 600; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hinweis { color: var(--tinte-3); font-size: 11px; }
.hinweis.pad { padding: 8px 10px; display: block; }
.krit { color: var(--warn); font-weight: 600; }


/* -------------------------------------------------------------- Grundraster */

/* Die Breite der beiden Seitenleisten steckt in Custom Properties, damit sie
 * per Ziehgriff verstellt und eingeklappt werden kann, ohne dass die Regel
 * selbst überschrieben wird - sonst griffen die Regeln für kleine Fenster nicht
 * mehr. */
#app {
  display: grid;
  height: 100vh;
  height: 100dvh;   /* iPadOS: berücksichtigt ein- und ausfahrende Leisten */
  grid-template-columns: var(--rail-l, 274px) 5px minmax(0, 1fr) 5px var(--rail-r, 330px);
  grid-template-rows: 30px minmax(0, 1fr) var(--dock-h, 208px);
  background: var(--linie);
  gap: 1px;
}
.topbar  { grid-column: 1 / 6; grid-row: 1; }
.rail-l  { grid-column: 1; grid-row: 2 / 4; }
#griff-l { grid-column: 2; grid-row: 2 / 4; }
.mapwrap { grid-column: 3; grid-row: 2; }
.dock    { grid-column: 3; grid-row: 3; }
#griff-r { grid-column: 4; grid-row: 2 / 4; }
.rail-r  { grid-column: 5; grid-row: 2 / 4; }

.griff { background: var(--flaeche-2); cursor: col-resize; position: relative; touch-action: none; }
.griff::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%;
  height: 28px; margin-top: -14px; background: var(--linie);
}
.griff:hover, .griff.aktiv { background: var(--akzent); }
.griff:hover::after, .griff.aktiv::after { background: rgba(255, 255, 255, .75); }
.rail.zu + .griff, .griff.gesperrt { cursor: default; background: var(--flaeche-2); }
.rail.zu + .griff::after { display: none; }

/* ----------------------------------------------------------------- Kopf */

.topbar {
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: var(--flaeche); overflow-x: auto; overflow-y: hidden; min-width: 0;
}
.topbar > * { flex: 0 0 auto; }
.tb-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.tb-sel, .tb-btn {
  background: var(--flaeche); border: 1px solid var(--linie); padding: 2px 6px; height: 21px;
}
.tb-sel { max-width: 210px; }
.tb-btn:hover { background: var(--flaeche-3); }
.tb-btn.an { background: var(--sk1); border-color: var(--sk1); color: #fff; }
.tb-sep { width: 1px; height: 16px; background: var(--linie); }
.tb-spacer { flex: 1; }
.tb-uhr { display: flex; align-items: baseline; gap: 8px; }
.tb-uhr b { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.tb-uhr i { font-style: normal; color: var(--tinte-3); font-size: 11px; }
.tb-uhr i span { font-family: var(--mono); }

.zaehler { display: flex; gap: 3px; }
.zaehler .z {
  min-width: 22px; text-align: center; color: #fff; font-weight: 700;
  padding: 1px 4px; font-variant-numeric: tabular-nums;
}
.z-SK1 { background: var(--sk1); } .z-SK2 { background: var(--sk2); }
.z-SK3 { background: var(--sk3); } .z-SK4 { background: var(--sk4); }
.z-TOT { background: var(--tot); } .z-UNG { background: var(--ung); }

.pill {
  border: 1px solid var(--linie); padding: 1px 6px; color: var(--tinte-2);
  background: var(--flaeche-2); font-size: 11px;
}
.pill.ok { border-color: #a9cdb4; background: #eef6f0; color: #1a6b38; }
.pill.warn { border-color: #e3c48f; background: #fdf6ea; color: #8a5b09; }

/* --------------------------------------------------------------- Kennzahlen */

.kennzahlen { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.kennzahlen .k { color: var(--tinte-3); }
.kennzahlen .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right;
}
.kennzahlen .v.warn { color: var(--warn-2); font-weight: 600; }
.kennzahlen .v.krit { color: var(--warn); font-weight: 600; }
.quelle { margin: 8px 0 0; border-top: 1px solid var(--linie-2); padding-top: 5px; }

/* -------------------------------------------------------------- Seitenleisten */

.rail {
  background: var(--flaeche); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.rail-kopf {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
}
.rail-titel {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-r .rail-titel { margin-right: auto; }
.rail-l .rail-titel { margin-left: 0; }
.rail-btn {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-2);
}
.rail-btn:hover { background: var(--flaeche-3); color: var(--tinte); }
.rail-inhalt {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}

/* Eingeklappt: nur noch ein schmaler Streifen mit senkrechter Beschriftung. */
.rail.zu .rail-inhalt { display: none; }
.rail.zu .rail-kopf {
  flex-direction: column; align-items: center; justify-content: flex-start;
  height: 100%; gap: 10px; padding: 5px 2px; border-bottom: 0;
  border-right: 1px solid var(--linie);
}
.rail-r.zu .rail-kopf { border-right: 0; border-left: 1px solid var(--linie); }
.rail.zu .rail-titel { writing-mode: vertical-rl; margin: 0; max-height: calc(100% - 32px); }
/* Schaltfläche in beiden Leisten oben: links steht sie im Quelltext vorn,
 * rechts hinten - deshalb dort die umgekehrte Richtung. */
.rail-r.zu .rail-kopf { flex-direction: column-reverse; justify-content: flex-end; }
.blk { border-bottom: 1px solid var(--linie); padding: 7px 9px 9px; }
.blk.wachsend { flex: 1 1 auto; min-height: 140px; overflow-y: auto; }
.blk h2 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinte-2); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; min-height: 17px;
}
.blk h2:hover { color: var(--tinte); }
/* Aufklapp-Pfeil vor jeder Abschnittsüberschrift. */
.blk-pfeil {
  flex: 0 0 auto; width: 0; height: 0; margin-right: 1px;
  border-left: 4px solid var(--tinte-3);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transform: rotate(90deg); transition: transform .12s;
}
.blk.zu .blk-pfeil { transform: rotate(0deg); }
.blk.zu > :not(h2) { display: none; }
.blk.zu { padding-bottom: 6px; }
.blk.wachsend.zu { flex: 0 0 auto; min-height: 0; overflow: visible; }
.blk h2 .anz {
  font-family: var(--mono); background: var(--flaeche-3); padding: 0 4px; letter-spacing: 0;
}
.blk h4 { font-size: 11px; margin: 9px 0 4px; color: var(--tinte-2); }
.mini {
  margin-left: auto; border: 1px solid var(--linie); background: var(--flaeche);
  width: 17px; height: 17px; line-height: 1; padding: 0;
}
.mini:hover { background: var(--flaeche-3); }

.zeile { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.lbl { color: var(--tinte-3); min-width: 74px; }
.num { width: 44px; border: 1px solid var(--linie); padding: 1px 4px; }
input[type="range"] { flex: 1; min-width: 90px; }
.sel-klein, .such {
  border: 1px solid var(--linie); background: var(--flaeche); padding: 2px 4px; flex: 1; min-width: 0;
}
.such { width: 100%; margin-bottom: 5px; }
.btn-klein {
  border: 1px solid var(--linie); background: var(--flaeche); padding: 1px 7px;
}
.btn-klein:hover { background: var(--flaeche-3); }
.btn-klein.gefahr { color: var(--warn); border-color: #e0b2b4; }
.rail-asr-link { display: block; margin: 8px 9px 2px; text-align: center; text-decoration: none; }
.datei { display: inline-block; }

.lage { display: grid; grid-template-columns: 84px 1fr; gap: 2px 8px; }
.lage .k { color: var(--tinte-3); }

.check { display: flex; align-items: center; gap: 5px; padding: 1px 0; cursor: pointer; }
.check input { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.chip {
  border: 1px solid var(--linie); background: var(--flaeche); padding: 1px 5px; font-size: 11px;
  border-left-width: 3px;
}
.chip.c-SK1 { border-left-color: var(--sk1); } .chip.c-SK2 { border-left-color: var(--sk2); }
.chip.c-SK3 { border-left-color: var(--sk3); } .chip.c-SK4 { border-left-color: var(--sk4); }
.chip.c-TOT { border-left-color: var(--tot); } .chip.c-UNG { border-left-color: var(--ung); }
.chip.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* ------------------------------------------------------------------- Listen */

.liste { display: flex; flex-direction: column; }
.gruppe {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinte-3); margin: 6px 0 2px;
}
.zl {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 6px;
  text-align: left; border: 0; border-bottom: 1px solid var(--linie-2);
  background: transparent; padding: 3px 2px; width: 100%;
}
.zl:hover { background: var(--akzent-hell); }
.zl b { font-family: var(--mono); font-size: 10px; color: var(--tinte-2); }
.zl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl .kap, .zl .st { font-size: 10px; color: var(--tinte-3); font-family: var(--mono); }
.zl.mittel { grid-template-columns: 24px 1fr; grid-template-areas: "k n" "k s"; }
.zl.mittel b { grid-area: k; }
.zl.mittel span:nth-of-type(1) { grid-area: n; }
.zl.mittel .st { grid-area: s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl.mittel.frei b { color: var(--sk3); }
.zl.mittel.gebunden b { color: var(--warn-2); }
.zl.art-einsatz { border-left: 3px solid var(--sk1); padding-left: 5px; }
.zl.art-med { border-left: 3px solid var(--sk3); padding-left: 5px; }
.zl.art-transport { border-left: 3px solid var(--sk4); padding-left: 5px; }
.zl.art-betreuung { border-left: 3px solid #a07c22; padding-left: 5px; }
.zl.art-fuehrung { border-left: 3px solid var(--tinte); padding-left: 5px; }
.zl.art-sonstig { border-left: 3px solid var(--ung); padding-left: 5px; }

/* -------------------------------------------------------------------- Karte */

.mapwrap { position: relative; background: #fff; overflow: hidden; }
#map { position: absolute; inset: 0; background: #fbfbfc; }
.mapwrap.misst #map { cursor: crosshair; }

.map-werkzeuge {
  position: absolute; top: 8px; left: 8px; z-index: 620;
  display: flex; gap: 3px; background: rgba(255,255,255,.94);
  border: 1px solid var(--linie); padding: 3px;
}
.wz { border: 1px solid var(--linie); background: var(--flaeche); padding: 2px 8px; }
.wz:hover { background: var(--flaeche-3); }
.wz.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.map-zeit {
  position: absolute; bottom: 8px; left: 8px; z-index: 620;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.94); border: 1px solid var(--linie); padding: 3px 5px;
}
.zt { border: 1px solid var(--linie); background: var(--flaeche); padding: 2px 7px; }
.zt:hover { background: var(--flaeche-3); }
.zt.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.zt-tempo { display: flex; gap: 2px; }
.zt-info { font-family: var(--mono); color: var(--tinte-2); padding-left: 4px; }

.map-legende {
  position: absolute; top: 8px; right: 44px; z-index: 620;
  background: rgba(255,255,255,.94); border: 1px solid var(--linie);
  width: max-content; max-width: 390px;
}
.lg-schalter {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 2px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinte-2);
}
.lg-schalter::before {
  content: ""; display: inline-block; vertical-align: 1px; margin-right: 5px;
  width: 0; height: 0; border-left: 4px solid var(--tinte-3);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transform: rotate(90deg);
}
.map-legende.zu .lg-schalter::before { transform: rotate(0deg); }
.lg-schalter:hover { color: var(--tinte); background: var(--flaeche-3); }
.lg-inhalt { padding: 0 6px 4px; }
.map-legende.zu .lg-inhalt { display: none; }
.lg-zeile { display: flex; flex-wrap: wrap; gap: 3px 9px; }
.lg-zeile + .lg-zeile { margin-top: 3px; border-top: 1px solid var(--linie-2); padding-top: 3px; }
.lg { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--tinte-2); }
.lg .bx { width: 15px; height: 10px; border: 1.4px solid #3b4148; background: #fff; }
.lg .bx.u-rtw, .lg .bx.u-nef { border-color: var(--sk1); }
.lg .bx.u-trupp { border-color: var(--sk3); }
.lg .bx.u-rth, .lg .bx.u-polizei { border-color: var(--sk4); background: #eaf0f8; }
.lg .bx.u-loesch { border-color: var(--sk1); background: #fdeeee; }
.lg .flut { width: 15px; height: 10px; border: 1.4px solid #1f6fa8; background: rgba(47,142,196,.24); }
.lg .rt { width: 12px; height: 10px; background: var(--warn); }
.lg .sp { width: 9px; height: 9px; background: var(--warn); transform: rotate(45deg); }

.map-status {
  position: absolute; bottom: 8px; right: 8px; z-index: 620;
  background: rgba(255,255,255,.94); border: 1px solid var(--linie);
  padding: 2px 6px; font-family: var(--mono); font-size: 10px; color: var(--tinte-2);
}

/* Leaflet-Anpassungen */
.leaflet-container { font-family: var(--schrift); font-size: 11px; background: #fbfbfc; }
.leaflet-div-icon { background: none; border: none; }
.leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.85) !important; }
.leaflet-bar a { border-radius: 0 !important; color: var(--tinte) !important; }
.leaflet-control-scale-line { border-color: var(--tinte-2); color: var(--tinte-2); background: rgba(255,255,255,.8); }
.leaflet-tooltip {
  border-radius: 0; border: 1px solid var(--linie); box-shadow: none;
  font-size: 11px; padding: 3px 6px; color: var(--tinte);
}
.raster-zelle { cursor: pointer; }
.raster-label {
  font-family: var(--mono); font-size: 9px; color: #6b737b; letter-spacing: .04em;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.abschnitt-label { white-space: nowrap; text-align: center; }
.abschnitt-label b {
  display: inline-block; background: rgba(255,255,255,.92); border: 1px solid var(--tinte-2);
  padding: 0 4px; font-size: 10px; letter-spacing: .05em; color: var(--tinte);
}
.abschnitt-label.ist-hq b { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.abschnitt-label i {
  display: block; font-style: normal; font-size: 8px; color: var(--tinte-2);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff; letter-spacing: .06em; text-transform: uppercase;
}
.poi-label {
  white-space: nowrap; font-size: 9px; color: #5a6068;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}
.kreis-label {
  white-space: nowrap; font-size: 9px; font-family: var(--mono); color: var(--warn);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.mess-label {
  white-space: nowrap; color: var(--akzent); background: rgba(255,255,255,.92);
  border: 1px solid var(--akzent); padding: 1px 4px; font-size: 10px; font-family: var(--mono);
}
.tt-zelle { font-family: var(--mono); }
.zoom-weit .abschnitt-label i { display: none; }

/* ------------------------------------------------------------------ Symbole */

/* Wichtig: an den Symbolen selbst weder `position` noch `transform` setzen.
 * Leaflet positioniert jedes Symbol über `position: absolute` und eine
 * transform-Verschiebung; wird eines von beiden überschrieben, wandern die
 * Symbole beim Zoomen aus ihrer Lage. Drehungen und Zusatzelemente gehören
 * deshalb in innere Elemente bzw. in Pseudoelemente. */
/* Der Symbolkasten bleibt in fester Größe stehen (daran hängt der Anker),
 * skaliert wird nur der Körper darin - aus seiner Mitte, damit das Symbol
 * über seiner Koordinate stehen bleibt. Der Maßstab kommt je Rang aus
 * --s1 … --s4, die map.js beim Zoomen setzt. */
.mk {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1; letter-spacing: .02em;
}
.mk.r1 { --s: var(--s1, 1); }
.mk.r2 { --s: var(--s2, 1); }
.mk.r3 { --s: var(--s3, 1); }
.mk.r4 { --s: var(--s4, 1); }
.mk-korper {
  display: flex; align-items: center; justify-content: center; position: relative;
  font-style: normal; transform: scale(var(--s, 1)); transform-origin: 50% 50%;
}
.mk-text { display: none; }

/* Beschriftung erscheint gestaffelt nach Rang: t0 gar keine, t4 alles. */
#karte.t1 .r1 .mk-text, #karte.t1 .r1.beschriftung { display: block; }
#karte.t2 :is(.r1, .r2) .mk-text, #karte.t2 :is(.r1, .r2).beschriftung { display: block; }
#karte.t3 :is(.r1, .r2, .r3) .mk-text, #karte.t3 :is(.r1, .r2, .r3).beschriftung { display: block; }
#karte.t4 .mk-text, #karte.t4 .beschriftung { display: block; }
.beschriftung { display: none; }

.mk-pat .mk-korper {
  width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10px;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums;
}
.mk-pat.kat-SK1 .mk-korper { background: var(--sk1); }
.mk-pat.kat-SK2 .mk-korper { background: var(--sk2); }
.mk-pat.kat-SK3 .mk-korper { background: var(--sk3); }
.mk-pat.kat-SK4 .mk-korper { background: var(--sk4); }
.mk-pat.kat-TOT .mk-korper { background: var(--tot); }
.mk-pat.kat-UNG .mk-korper { background: var(--ung); border-style: dashed; }
.mk-pat.ausgewaehlt .mk-korper { box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 0 3px var(--akzent); }
.mk-pat.bewegt .mk-korper { border-color: #ffd75e; }
.mk-pat.kritisch .mk-korper::after {
  content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--sk1);
  border-radius: 50%; animation: puls 1.6s ease-out infinite;
}
@keyframes puls {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

.mk-unit .mk-korper {
  width: 26px; height: 16px; font-size: 9px; background: #fff;
  border: 1.5px solid var(--u-farbe, #3b4148); color: var(--u-farbe, #22262b);
}
.mk-unit.u-trupp { --u-farbe: #10552a; }
.mk-unit.u-rtw   { --u-farbe: #97181e; }
.mk-unit.u-nef, .mk-unit.u-arzt { --u-farbe: #97181e; }
.mk-unit.u-nef .mk-korper, .mk-unit.u-arzt .mk-korper { background: #fdeeee; }
.mk-unit.u-rth   { --u-farbe: #16406f; }
.mk-unit.u-rth .mk-korper { background: #eaf0f8; }
.mk-unit.u-loesch{ --u-farbe: var(--sk1); }
.mk-unit.u-loesch .mk-korper { background: #fdeeee; }
.mk-unit.u-polizei { --u-farbe: #16406f; }
.mk-unit.u-polizei .mk-korper { background: #eaf0f8; }
.mk-unit.u-fuehrung { --u-farbe: var(--tinte); }
.mk-unit.u-fuehrung .mk-korper { background: var(--tinte); color: #fff; }
.mk-unit.u-drohne { --u-farbe: var(--tinte-2); }
.mk-unit.u-drohne .mk-korper { border-style: dashed; }
.mk-unit.beladen .mk-korper { box-shadow: 0 0 0 2px rgba(209,35,42,.3); }
.mk-unit.faehrt .mk-korper::before {
  content: ""; position: absolute; left: -5px; top: 5px;
  width: 4px; height: 4px; background: currentColor; animation: blink 1s steps(2) infinite;
}
.mk-unit.ausgewaehlt .mk-korper { box-shadow: 0 0 0 2px var(--akzent); }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }

.mk-haz .mk-korper {
  height: 16px; font-size: 8px; letter-spacing: .06em; padding: 0 4px;
  background: #fff; border: 1.5px solid var(--h-farbe, var(--warn-2)); color: #7a4c05;
}
.mk-haz { --h-farbe: var(--warn-2); }
.mk-haz.haz-3 { --h-farbe: var(--warn); }
.mk-haz.haz-3 .mk-korper { color: #fff; background: var(--warn); }
.mk-haz.haz-1 { --h-farbe: var(--tinte-3); }
.mk-haz.haz-1 .mk-korper { color: var(--tinte-2); }
.mk-sperre .mk-korper {
  width: 10px; height: 10px; background: var(--warn); transform: rotate(45deg) scale(var(--s, 1));
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}

/* Ohne Beschriftung wird aus jedem Kasten ein farbiger Punkt: die Kategorie
 * trägt dann allein die Farbe. Patienten sind ohnehin schon Punkte. */
#karte.t0 .mk-unit .mk-korper,
#karte.t1 .mk-unit .mk-korper,
#karte.t2 .r3.mk-unit .mk-korper, #karte.t2 .r4.mk-unit .mk-korper,
#karte.t3 .r4.mk-unit .mk-korper {
  width: 13px; height: 13px; padding: 0; background: var(--u-farbe); border-color: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
#karte.t0 .mk-haz .mk-korper,
#karte.t1 .r2.mk-haz .mk-korper, #karte.t1 .r3.mk-haz .mk-korper,
#karte.t2 .r3.mk-haz .mk-korper {
  width: 13px; height: 13px; padding: 0; background: var(--h-farbe); border-color: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: rotate(45deg) scale(var(--s, 1));
}

/* ---------------------------------------------------------------- Inspektor */

.insp-leer { color: var(--tinte-2); }
.insp-leer p { margin: 0 0 8px; }
.insp-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.insp-kopf h3 { font-size: 13px; }
.kat-tag {
  border: 1px solid var(--linie); padding: 0 5px; font-size: 10px; color: var(--tinte-2);
  background: var(--flaeche-2); white-space: nowrap;
}
.kat-tag.k-SK1 { background: var(--sk1); border-color: var(--sk1); color: #fff; }
.kat-tag.k-SK2 { background: var(--sk2); border-color: var(--sk2); color: #fff; }
.kat-tag.k-SK3 { background: var(--sk3); border-color: var(--sk3); color: #fff; }
.kat-tag.k-SK4 { background: var(--sk4); border-color: var(--sk4); color: #fff; }
.kat-tag.k-TOT { background: var(--tot); border-color: var(--tot); color: #fff; }
.kat-tag.k-UNG { background: var(--ung); border-color: var(--ung); color: #fff; }
.kat-tag.s-3 { background: var(--warn); border-color: var(--warn); color: #fff; }
.kat-tag.s-2 { background: #fdf3e3; border-color: #e0bd82; color: #7a4c05; }

.katzeile { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
.katb {
  border: 1px solid var(--linie); background: var(--flaeche); padding: 2px 5px;
  font-size: 10px; border-left-width: 3px;
}
.katb.b-SK1 { border-left-color: var(--sk1); }
.katb.b-SK2 { border-left-color: var(--sk2); }
.katb.b-SK3 { border-left-color: var(--sk3); }
.katb.b-SK4 { border-left-color: var(--sk4); }
.katb.b-TOT { border-left-color: var(--tot); }
.katb.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.dg { display: grid; grid-template-columns: 108px 1fr; gap: 2px 8px; }
.dg .k { color: var(--tinte-3); }
.dg .v { word-break: break-word; }
.dg .v.mono { font-family: var(--mono); font-size: 11px; }

.insp-akt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 0 2px; }
.fliess { margin: 7px 0 0; color: var(--tinte-2); }

.proto { max-height: 200px; overflow-y: auto; border-top: 1px solid var(--linie-2); }
.pe { border-bottom: 1px solid var(--linie-2); padding: 3px 0; }
.pe-m { color: var(--tinte-3); font-size: 10px; font-family: var(--mono); }

.minitab { display: flex; flex-direction: column; }
.mz {
  display: flex; align-items: center; gap: 6px; text-align: left; width: 100%;
  border: 0; border-bottom: 1px solid var(--linie-2); background: transparent; padding: 2px 0;
}
.mz:hover { background: var(--akzent-hell); }
.mz b { font-family: var(--mono); font-size: 10px; }
.mz span { color: var(--tinte-2); }

.pkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 4px; vertical-align: -1px;
}
.pkt.k-SK1 { background: var(--sk1); } .pkt.k-SK2 { background: var(--sk2); }
.pkt.k-SK3 { background: var(--sk3); } .pkt.k-SK4 { background: var(--sk4); }
.pkt.k-TOT { background: var(--tot); } .pkt.k-UNG { background: var(--ung); }

/* ---------------------------------------------------------------- Warnungen */

.warnungen .warn {
  border: 1px solid var(--linie); border-left-width: 3px; padding: 4px 6px; margin-bottom: 4px;
  background: var(--flaeche-2);
}
.warn.s-3 { border-left-color: var(--warn); }
.warn.s-2 { border-left-color: var(--warn-2); }
.warn.s-1 { border-left-color: var(--tinte-3); }
.warn-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.warn-kopf span { color: var(--tinte-3); font-size: 10px; }
.warn-txt { color: var(--tinte-2); margin: 2px 0 4px; }
.warn-akt { display: flex; gap: 4px; }

/* -------------------------------------------------------------------- Funk */

.funk { max-height: var(--funk-h, 280px); overflow-y: auto; }
/* Ziehsteg unter einem Panel - zieht dessen Höhe auf. */
.hoehen-griff {
  height: 7px; margin-top: 4px; background: var(--flaeche-2); cursor: row-resize;
  position: relative; touch-action: none; border: 1px solid var(--linie-2);
}
.hoehen-griff::after {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%;
  width: 30px; margin-left: -15px; background: var(--linie);
}
.hoehen-griff:hover, .hoehen-griff.aktiv { background: var(--akzent); border-color: var(--akzent); }
.hoehen-griff:hover::after, .hoehen-griff.aktiv::after { background: rgba(255,255,255,.75); }
@media (pointer: coarse) { .hoehen-griff { height: 11px; } }
.fk { border-bottom: 1px solid var(--linie-2); padding: 3px 0; }
.fk-m { display: flex; gap: 6px; align-items: baseline; color: var(--tinte-3); font-size: 10px; }
.fk-m b { color: var(--tinte-2); font-weight: 600; }
.fk-m .refs { margin-left: auto; display: flex; gap: 2px; }
.refb {
  border: 1px solid var(--linie); background: var(--flaeche); font-family: var(--mono);
  font-size: 10px; padding: 0 3px;
}
.refb:hover { background: var(--akzent-hell); }

/* -------------------------------------------------------------------- Dock */

.dock { background: var(--flaeche); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dock-griff {
  flex: 0 0 auto; height: 5px; background: var(--flaeche-2); cursor: row-resize;
  position: relative; touch-action: none;
}
.dock-griff::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; left: 50%;
  width: 34px; margin-left: -17px; background: var(--linie);
}
.dock-griff:hover, .dock-griff.aktiv { background: var(--akzent); }
.dock-griff:hover::after, .dock-griff.aktiv::after { background: rgba(255,255,255,.75); }
.dock.zu .dock-griff { display: none; }
.btn-klein.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
/* Die Reiterleiste darf das Raster nicht auseinanderdrücken: bei zu wenig
   Platz scrollt sie selbst, statt die Seite breiter zu machen. */
.dock-tabs {
  display: flex; align-items: center; gap: 2px; padding: 3px 6px;
  border-bottom: 1px solid var(--linie); background: var(--flaeche-2);
  flex: 0 0 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.dtab {
  border: 1px solid transparent; background: transparent; padding: 2px 9px; color: var(--tinte-2);
  flex: 0 0 auto; white-space: nowrap;
}
.dock-tabs .btn-klein { flex: 0 0 auto; white-space: nowrap; }
.dtab:hover { background: var(--flaeche-3); }
.dtab.aktiv {
  background: var(--flaeche); border-color: var(--linie); border-bottom-color: var(--flaeche);
  color: var(--tinte); font-weight: 600;
}
.dock-spacer { flex: 1; }
.dock-inhalt { flex: 1; overflow: auto; min-height: 0; }
.dock.zu .dock-inhalt { display: none; }

.tab { width: 100%; border-collapse: collapse; }
.tab th {
  position: sticky; top: 0; z-index: 2; text-align: left; font-weight: 600;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  padding: 3px 7px; white-space: nowrap; color: var(--tinte-2); font-size: 11px;
}
.tab th.sortbar { cursor: pointer; }
.tab th.sortbar:hover { background: var(--flaeche-3); }
.tab th.s-an { color: var(--akzent); }
.tab td { padding: 2px 7px; border-bottom: 1px solid var(--linie-2); white-space: nowrap; }
.tab td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tab th.num { text-align: right; }
.tab td.mono { font-family: var(--mono); }
/* Rasterfeld eines bereits abtransportierten Patienten: letzter bekannter Stand. */
.tab td.verlassen { color: var(--tinte-3); font-style: italic; }
.tab td.lang { white-space: normal; min-width: 220px; color: var(--tinte-2); }
.tab td.lang i { font-style: normal; color: var(--sk3); }
.tab tbody tr { cursor: pointer; }
.tab tbody tr:hover { background: var(--akzent-hell); }
.tab tbody tr.an { background: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent); }

.stufe { border: 1px solid var(--linie); padding: 0 4px; font-size: 10px; }
.stufe.s-3 { background: var(--warn); border-color: var(--warn); color: #fff; }
.stufe.s-2 { background: #fdf3e3; border-color: #e0bd82; color: #7a4c05; }
.stufe.s-1 { background: var(--flaeche-2); color: var(--tinte-2); }

.dock-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dock-zwei > div { border-right: 1px solid var(--linie); min-width: 0; }
.dock-zwei > div:last-child { border-right: 0; }
.dock-zwei h4 { padding: 5px 7px 3px; color: var(--tinte-2); font-size: 11px; }

.lagemeldung { padding: 6px 8px; }
.lm-akt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lagemeldung pre {
  margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.45;
  white-space: pre-wrap; color: var(--tinte); border: 1px solid var(--linie-2);
  background: var(--flaeche-2); padding: 8px 10px;
}

/* ------------------------------------------------------------- Kleine Fenster */

@media (max-width: 1400px) {
  .map-legende { max-width: 300px; }
}
@media (max-height: 840px) {
  .proto { max-height: 150px; }
}

/* --------------------------------------------------------------- Tablet
 * Auf einem iPad bleibt das Spaltenlayout erhalten - gescrollt wird nur in den
 * Panels, nie die Seite. Die Leisten starten dort eingeklappt (siehe ui.js),
 * damit die Karte die volle Breite bekommt. */
@media (max-width: 1200px) {
  .map-legende { top: 6px; right: 40px; max-width: 260px; }
  .map-werkzeuge, .map-zeit { padding: 2px; }
  .blk { padding: 6px 8px 8px; }
}

/* Fingerbedienung: größere Trefferflächen, ohne das Layout zu verändern. */
@media (pointer: coarse) {
  .wz, .zt, .tb-btn, .btn-klein, .dtab { min-height: 30px; padding-left: 11px; padding-right: 11px; }
  .rail-btn { width: 28px; height: 28px; }
  .mini { width: 26px; height: 26px; }
  .rail-kopf { padding: 5px 6px; }
  .blk h2 { min-height: 26px; }
  .check { padding: 4px 0; }
  .check input { width: 17px; height: 17px; }
  .chip, .katb { min-height: 26px; padding: 3px 8px; }
  .num, .sel-klein, .such { min-height: 26px; }
  .tab td { padding: 6px 7px; }
  .tab th { padding: 6px 7px; }
  .zl { padding: 6px 2px; }
  .mz { padding: 5px 0; }
  .refb { min-width: 26px; min-height: 22px; }
  .griff { width: 100%; }
  .dock-griff { height: 9px; }
  .lg-schalter { padding: 5px 8px; }
  /* Die Ziehstege liegen in eigenen Rasterspalten - auf Touch breiter. */
  #app { grid-template-columns: var(--rail-l, 274px) 10px minmax(0, 1fr) 10px var(--rail-r, 330px); }

  /* Kartensymbole sind 14–26 px groß und damit als Fingerziel zu klein. Die
   * Trefferfläche wächst über ein unsichtbares Feld im inneren Element - am
   * Symbol selbst dürfen weder `position` noch `transform` gesetzt werden
   * (siehe Hinweis bei .mk), und seine Größe bleibt unverändert. */
  .mk > .mk-korper::after { content: ""; position: absolute; inset: -9px; }
  .mk-pat.kritisch > .mk-korper::after { inset: -5px; }
  .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 32px; font-size: 18px; }
}

/* ------------------------------------------------- Telefon / sehr schmal
 * Erst hier stehen die Bereiche untereinander; dann darf die Seite scrollen.
 * Leitgedanke: die Karte bekommt so viel Höhe wie möglich, der Rahmen darum
 * so wenig wie nötig - und nichts läuft unerreichbar aus dem Bild. Was auf
 * dem Telefon nichts nützt (Koordinatenanzeige, Legende, Ziehgriffe), bleibt
 * weg. */
@media (max-width: 620px) {
  html, body { height: auto; overflow: auto; }
  body { -webkit-text-size-adjust: 100%; }
  /* Die Karte bekommt keine feste Höhe, sondern den Rest des Bildschirms:
   * so kostet eine zweizeilige Kopfleiste oder ein aufgezogener unterer
   * Bereich nur genau so viel Karte, wie er wirklich braucht. */
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(220px, 1fr) auto auto auto;
    height: auto;
    min-height: 100vh;
    /* dvh: die Höhe wackelt nicht mit ein- und ausfahrender Adressleiste */
    min-height: 100dvh;
  }
  .topbar { grid-column: 1; grid-row: 1; flex-wrap: wrap; height: auto; padding: 4px 8px; gap: 5px; }
  .mapwrap { grid-column: 1; grid-row: 2; }
  /* Höhe kommt wie am Rechner aus --dock-h - sonst greifen Ziehsteg,
   * Einklappen und „volle Höhe“ auf dem Telefon ins Leere. */
  .dock { grid-column: 1; grid-row: 3; height: var(--dock-h, 208px); max-height: 70dvh; }
  .dock.zu { height: auto; max-height: none; }
  .rail-l { grid-column: 1; grid-row: 4; }
  .rail-r { grid-column: 1; grid-row: 5; }
  .griff { display: none; }
  .rail { max-height: 62vh; max-height: 62dvh; }
  .rail.zu { max-height: none; }
  .rail.zu .rail-kopf, .rail-r.zu .rail-kopf {
    flex-direction: row; height: auto; border: 0; border-bottom: 1px solid var(--linie);
    padding: 5px 6px; gap: 6px; justify-content: flex-start;
  }
  .rail.zu .rail-titel { writing-mode: horizontal-tb; max-height: none; }
  .map-legende { display: none; }

  /* Kopfzeile: der Einsatzname steht schon in der Auswahlliste daneben. */
  .tb-titel, .tb-sep { display: none; }
  /* Beide Auswahllisten teilen sich die erste Zeile. */
  .tb-sel { flex: 1 1 calc(50% - 5px); max-width: none; min-width: 0; }
  .tb-spacer { display: none; }

  /* Kartenaufsätze: Breite nach Inhalt, aber nie bis unter die
     Zoomschaltflächen in der Ecke. */
  .map-werkzeuge {
    top: 6px; left: 6px; width: max-content; max-width: calc(100% - 54px);
    flex-wrap: wrap; gap: 2px; padding: 2px;
  }
  .wz { padding: 4px 7px; font-size: 10px; }
  .map-zeit { bottom: 6px; left: 6px; gap: 3px; padding: 2px 4px; }
  .zt { padding: 4px 7px; font-size: 10px; }
  .zt-info { display: none; }          /* Einsatzzeit steht in der Kopfzeile */
  .map-status { display: none; }       /* Koordinate unterm Finger bringt nichts */
  .leaflet-control-attribution { font-size: 8px; }

  /* Reiter des unteren Bereichs seitlich schiebbar statt gedrängt. */
  .dock-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dock-tabs::-webkit-scrollbar { display: none; }
  .dock-tabs .dtab { flex: 0 0 auto; }
  .dock-inhalt { -webkit-overflow-scrolling: touch; }
  /* Die Tabellen sind breiter als das Telefon und werden seitlich geschoben -
     enger gesetzt braucht es dafür deutlich weniger Wege. */
  .tab th, .tab td { padding-left: 5px; padding-right: 5px; }
  .tab td.lang { min-width: 150px; }
  .dock-zwei { grid-template-columns: minmax(0, 1fr); }
  .dock-zwei > div { border-right: 0; border-bottom: 1px solid var(--linie); }
}

/* Gesperrte Bedienelemente deutlich als gesperrt zeigen. */
input:disabled, button:disabled { opacity: .45; cursor: default; }
input[type="range"]:disabled { filter: grayscale(1); }