/* Leitstellen-Oberfläche: dunkel und entsättigt, damit Einsätze und Fahrzeuge
   die einzigen kräftigen Farben auf dem Schirm sind (docs/07 Abschnitt 2). */

:root {
  --bg: #0d1117;
  --panel: #151a21;
  --panel-2: #1b2029;
  --line: #262d38;
  --text: #e8eaed;
  --muted: #8d939c;
  --accent: #f4c542;
  --fire: #e23b34;
  --ok: #3ddc84;
  --blue: #2f7de1;
  --radius: 8px;
  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px;
  overflow: hidden;
}

.boot { display: grid; place-content: center; height: 100dvh; gap: .5rem; text-align: center; }
.boot-title { font-size: 2rem; font-weight: 800; letter-spacing: .1em; }
.boot-title span { color: var(--accent); }
.boot-sub { color: var(--muted); }

/* ── Grundraster ─────────────────────────────────────────────────────────── */

.shell {
  display: grid; height: 100dvh;
  grid-template-columns: 320px 1fr 340px;
  grid-template-rows: 52px 1fr 132px;
  grid-template-areas: "top top top" "left map right" "foot foot foot";
}

.topbar {
  grid-area: top; display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; letter-spacing: .08em; }
.brand span { color: var(--accent); }
.spacer { flex: 1; }

.clock { display: flex; align-items: baseline; gap: .5rem; font-family: var(--mono); }
.clock-day { color: var(--muted); font-size: .8rem; }
.clock-time { font-size: 1.1rem; font-weight: 600; }

.stat { display: flex; flex-direction: column; line-height: 1.2; }
.stat-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-family: var(--mono); font-weight: 600; }

.level { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.xpbar { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.xpfill { height: 100%; background: var(--accent); transition: width .4s ease; }
.xptext { font-size: .66rem; color: var(--muted); font-family: var(--mono); }

.clockselect {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .35rem .5rem; font-size: .8rem;
}

/* Abwesenheit soll wie Abwesenheit aussehen. „kein Kreis" stand in voller
   Textfarbe da und las sich wie ein Wert; die Klasse gab es im Markup an drei
   Stellen, eine Regel dazu nirgends. */
.leise { color: var(--muted); font-size: .85em; }

.conn { font-size: .75rem; }
.conn.on { color: var(--ok); }
.conn.off { color: var(--fire); }
/* Neu verbinden ist kein Fehler, sondern ein Zwischenstand. Rot wäre gelogen. */
.conn.wait { color: var(--accent); }

/* ── Seitenspalten ───────────────────────────────────────────────────────── */

.panel { background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.panel.left { grid-area: left; border-right: 1px solid var(--line); }
.panel.right { grid-area: right; border-left: 1px solid var(--line); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--line);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.panel-body { overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }

.hint { color: var(--muted); font-size: .8rem; padding: .75rem; line-height: 1.5; }

.badge {
  background: var(--panel-2); border-radius: 10px; padding: .1rem .45rem;
  font-family: var(--mono); color: var(--text);
}

/* ── Einsätze ────────────────────────────────────────────────────────────── */

.mission {
  background: var(--panel-2); border-left: 3px solid var(--muted);
  border-radius: var(--radius); padding: .55rem .65rem; cursor: pointer;
}
.mission:hover { background: #222834; }
.mission.sel { outline: 1px solid var(--accent); }
.mission.st-new { border-left-color: var(--fire); }
.mission.st-enroute { border-left-color: var(--accent); }
.mission.st-working { border-left-color: var(--blue); }
.mission-title { font-weight: 600; }
.mission-addr { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.mission-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.mission-outcome { font-size: .75rem; color: var(--accent); margin-top: .35rem; }

/* Der Einsatz des Nachbarn bleibt lesbar — aushelfen darf man —, tritt aber
   zurück. Beim Zeigen und im gewählten Zustand kommt er voll zurück: sonst könnte
   man ihn nicht in Ruhe lesen, bevor man Fahrzeuge schickt. */
.mission.nachbar { opacity: .55; }
.mission.nachbar:hover, .mission.nachbar.sel { opacity: 1; }
/* Der zweite eigene Kreis ist kein fremder: er bekommt Farbe, nicht Blasse. */
.chip.kreis { background: #1b222c; color: #94a3b8; border-color: #2a3444; }
.chip.kreis.meiner { background: #16293d; color: #a8cdf5; border-color: #24405c; }

/* Ein Chip folgt meist direkt auf einen Satz. Ohne eigenen Abstand klebt er am
   letzten Wort und liest sich als "Besatzung 1ab Level 1". */
.chip {
  font-size: .68rem; background: #0f141b; border: 1px solid var(--line);
  border-radius: 10px; padding: .05rem .4rem; color: var(--muted);
  margin-left: .3rem;
  /* inline-flex statt inline: sonst sitzt der Text je nach Länge anders auf der
     Grundlinie, und eine Reihe aus "neu", "alarmiert" und "vor Ort" steht schief. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.15rem; line-height: 1;
}
.chip.time { font-family: var(--mono); }
.chip.lock { color: var(--accent); border-color: #4a3d12; }
.chip.kats { color: #7fd4ff; border-color: #1d3b4d; }
/* Kein Fehler, aber der Grund fuers Stehenbleiben. */
.chip.fehlt { background: #2f2418; color: #d9a05f; border-color: #45341d; }

.progress { height: 4px; background: #0f141b; border-radius: 2px; margin-top: .45rem; overflow: hidden; }
.progress-fill { height: 100%; background: var(--blue); transition: width .5s linear; }

/* ── Wachen und Fahrzeuge ────────────────────────────────────────────────── */

.station { background: var(--panel-2); border-radius: var(--radius); padding: .55rem .65rem; }
.station-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.station-name { font-weight: 600; }
.station-sub { font-size: .72rem; color: var(--muted); margin-bottom: .35rem; }
.station-actions { display: flex; gap: .3rem; margin-top: .45rem; }

.vehicle {
  /* Umbruch erlaubt: mit "es fehlt 2x Rettungssanitaeter" passt eine Zeile in
     dreihundertvierzig Pixel nicht mehr, und abgeschnitten hilft sie niemandem. */
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  padding: .28rem .35rem; border-radius: 5px; cursor: pointer;
}
.vehicle:hover { background: #222834; }
.vehicle.picked { background: #2a3142; outline: 1px solid var(--accent); }
.vehicle-call { font-family: var(--mono); font-size: .82rem; }
.vehicle-type { font-size: .72rem; color: var(--muted); margin-left: auto; }

.fms {
  display: inline-grid; place-content: center;
  width: 19px; height: 19px; border-radius: 4px;
  font-family: var(--mono); font-size: .7rem; font-weight: 700; color: #0d1117;
}
.fms-1 { background: #3ddc84; } .fms-2 { background: #1f9d55; color: #fff; }
.fms-3 { background: #f4c542; } .fms-4 { background: #e23b34; color: #fff; }
.fms-5 { background: #a855f7; color: #fff; } .fms-6 { background: #8d939c; }
.fms-7 { background: #f97316; } .fms-8 { background: #38bdf8; } .fms-9 { background: #e8eaed; }

/* ── Karte ───────────────────────────────────────────────────────────────── */

.mapwrap { grid-area: map; position: relative; }
#map { position: absolute; inset: 0; }

.overlay-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: .5rem .8rem; display: flex; align-items: center; gap: .75rem; z-index: 5;
}

.toast {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: .55rem .9rem; border-radius: var(--radius); z-index: 6; cursor: pointer;
  background: #3a1f1f; border: 1px solid var(--fire); color: #ffd9d7;
}
.toast.ok { background: #143024; border-color: var(--ok); color: #cdf5e0; }

/* Kartenlegende: erklaert die Branchenfarben der Fahrzeugsymbole. Die Farbwerte
   sind identisch mit BRANCH_COLORS in wwwroot/js/map.js - hier nur zusaetzlich
   als Legendenfarbe hinterlegt, nicht neu erfunden. */
.legend {
  position: absolute; left: 12px; bottom: 16px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .74rem; max-width: 170px;
}
.legend-toggle {
  display: block; width: 100%; background: transparent; color: var(--muted);
  border: none; padding: .4rem .6rem; cursor: pointer; font-family: inherit;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; text-align: left;
}
.legend-toggle:hover { color: var(--text); }
.legend-body { padding: 0 .6rem .5rem; display: flex; flex-direction: column; gap: .3rem; }
.legend-row { display: flex; align-items: center; gap: .5rem; color: var(--text); }
.legend-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid #000; }
/* Dieselben Farben wie die Zeichen auf der Karte (content/core/capabilities.json,
   branches[].sign.fill) - eine Legende, die eine andere Farbe zeigt als die
   Karte, ist schlimmer als keine. */
.legend-swatch.fire { background: #e3000f; }
.legend-swatch.police { background: #5fd35f; }
.legend-swatch.thw { background: #1b3fd8; }
.legend-swatch.hiorg { background: #ffffff; }
.legend-swatch.towing { background: #ff9800; }
.legend-swatch.pill { background: #f4c542; border-color: #0d1117; }
/* Häuser beim Räumen und Evakuierte unterwegs (js/map.js, HAUS_FARBEN) - dieselben
   Farben wie auf der Karte. */
.legend-swatch.haus-offen { background: #9aa3ad; }
.legend-swatch.haus-informiert { background: #f4c542; }
.legend-swatch.haus-geraeumt { background: #3fb68b; }
.legend-swatch.evakuiert { background: #7cc4ff; }
.legend-form { width: 10px; text-align: center; flex: none; font-size: .8rem; line-height: 1; color: #fff; }
.legend-form.hazard { color: #e3000f; }

/* ── Sprechblase auf der Karte (js/map.js) ─────────────────────────────── */

.maplibregl-popup.blase .maplibregl-popup-content {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .55rem .45rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  font-family: var(--font); font-size: .8rem; min-width: 210px; max-width: min(320px, 92vw);
}
.maplibregl-popup.blase.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup.blase.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup.blase.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--panel); }
.maplibregl-popup.blase.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup.blase.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup.blase.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--panel); }
.maplibregl-popup.blase.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--panel); }
.maplibregl-popup.blase.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--panel); }
.blase-kopf {
  display: block; width: 100%; background: none; border: none; padding: 0 .2rem;
  color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.blase-kopf:hover { color: var(--accent); }
.blase-ort { color: var(--muted); font-size: .72rem; padding: 0 .2rem; margin-bottom: .1rem; }
.blase-abschnitt {
  color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  margin: .4rem .2rem .15rem;
}
.blase-zeile {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: none; border-radius: 4px; padding: .1rem .2rem;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.blase-zeile:hover { background: var(--panel-2); }
/* Das Zeichen fuellt sein 130er-Quadrat nur zu drei Vierteln - etwas Rand weg. */
.blase-zeile img { width: 40px; height: 40px; margin: -6px -4px; flex: none; }
/* Rufname wird gestaucht, nicht die Zeile gesprengt - ein langer Fahrzeugname
   (z. B. ein Vereinsname beim Bus) bekam sonst ... statt einer Abschneide-Ellipse
   und zog Typ sowie FMS-Kaestchen aus der Blase heraus. */
.blase-ruf { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Typ in einer festen Spalte, ebenfalls mit Ellipse statt Umbruch/Ueberlauf. */
.blase-typ {
  color: var(--muted); font-size: .72rem; white-space: nowrap;
  flex: 0 0 auto; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis;
}
.blase-staerke { font-family: var(--mono, monospace); font-size: .72rem; color: #cfe3ff; white-space: nowrap; flex: none; }
.blase-zeile .fms { flex: none; }
.blase-hinweis { color: var(--muted); padding: .25rem .2rem 0; }

/* ── Funkticker ──────────────────────────────────────────────────────────── */

.ticker {
  grid-area: foot; background: var(--panel); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.ticker-head {
  padding: .35rem .8rem; font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line);
}
.ticker-body { overflow-y: auto; padding: .3rem .8rem; font-family: var(--mono); font-size: .78rem; }
.radio { display: flex; gap: .7rem; padding: .08rem 0; }
.radio-time { color: var(--muted); }
.radio-mission .radio-text { color: var(--fire); }
.radio-complete .radio-text { color: var(--ok); }
.radio-situation .radio-text { color: var(--accent); }
.radio-level .radio-text { color: #c084fc; font-weight: 600; }

/* ── Dialoge ─────────────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 12, .72);
  display: grid; place-items: center; z-index: 50;
}
/* Dialoge, die aus einem anderen heraus aufgehen (Fahrzeug kaufen, Werben,
   Bewerbungen aus dem Wachen-Dialog). Sie stehen weiter unten im Markup, der
   Wachen-Dialog aber noch weiter unten - bei gleicher Ebene lag der neue
   Dialog HINTER dem alten, und man musste erst den Wachen-Dialog schliessen. */
.modal-backdrop.oben { z-index: 60; }
/* Der Lehrgang geht immer aus der Mannschaft heraus auf (beide "oben") - bei
   gleicher Ebene lag er dahinter, unsichtbar offen, und ein Klick auf die
   Mannschaft dahinter schloss sie, statt den Lehrgang zu bedienen. */
.modal-backdrop.ganzoben { z-index: 65; }
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  width: min(560px, 92vw); max-height: 84dvh; display: flex; flex-direction: column;
}
.modal.wide { width: min(880px, 94vw); }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-sub { font-size: .8rem; color: var(--muted); }
.modal-body { overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: .85rem 1rem; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--line); }

/* Anleitung „Großschadenslagen“ (docs/16 Abschnitt 7): Bild, Titel, Text, Fortschritt. */
.tutorial-body { align-items: center; text-align: center; padding: 1rem 1.25rem 1.25rem; }
.tutorial-fortschritt { display: flex; gap: .3rem; }
.tutorial-punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); }
.tutorial-punkt.erledigt { background: var(--muted); }
.tutorial-punkt.an { background: var(--accent); }
.tutorial-bild { width: min(220px, 60%); max-height: 180px; object-fit: contain; margin: .25rem 0; }
.tutorial-schritt-titel { margin: 0; font-size: 1.05rem; }
.tutorial-schritt-text { margin: 0; line-height: 1.6; font-size: .88rem; max-width: 58ch; }
.tutorial-fertig { min-height: 160px; justify-content: center; }

.col-head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: .45rem;
}
.col-head.sub { margin-top: 1rem; }

.req { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; font-size: .85rem; }
.req-mark { width: 1rem; }
.req-label { flex: 1; }
.req-num { font-family: var(--mono); font-size: .8rem; }
.req.ok .req-mark { color: var(--ok); }
.req.miss .req-mark { color: var(--fire); }
.req.optional { color: var(--muted); }
.req.optional.ok { color: var(--text); }
.req-bonus { font-size: .72rem; color: var(--accent); }

.note {
  margin-top: .8rem; padding: .5rem .65rem; background: #221a10;
  border-left: 2px solid var(--accent); border-radius: 4px;
  font-size: .78rem; color: #e8d5a8;
}

.pickrow {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .35rem; border-radius: 5px; cursor: pointer;
}
.pickrow:hover { background: var(--panel-2); }
.pickrow.static { cursor: default; opacity: .75; }

.offer {
  display: flex; align-items: center; gap: .75rem;
  background: var(--panel-2); border-radius: var(--radius); padding: .6rem .7rem;
}
.offer.locked { opacity: .5; }
.offer-main { flex: 1; min-width: 0; }
.offer-name { font-weight: 600; }
.offer-name .short { color: var(--muted); font-family: var(--mono); font-size: .78rem; margin-left: .4rem; }
.offer-meta { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.offer-caps { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.cap {
  font-size: .68rem; background: #0f141b; border: 1px solid var(--line);
  border-radius: 4px; padding: .05rem .35rem; color: #a8b3c2;
}

/* ── Schaltflächen ───────────────────────────────────────────────────────── */

.btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .7rem; cursor: pointer; font-size: .82rem;
  font-family: inherit;
}
.btn:hover:not(:disabled) { background: #29313f; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #1b1300; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #ffd65e; }
.btn.ghost { background: transparent; }
.btn.small { padding: .28rem .55rem; font-size: .76rem; }
.btn.tiny { padding: .22rem .45rem; font-size: .72rem; }

#blazor-error-ui {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: #3a1f1f; color: #ffd9d7; padding: .7rem 1rem;
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b333f; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a4452; }

.maplibregl-ctrl-attrib { background: rgba(13,17,23,.8) !important; }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }

/* Fortschritt im Dispositionsdialog */
.modal-progress { padding: .6rem 1rem 0; }
.modal-progress .progress { height: 6px; }
.modal-progress-text {
  display: flex; justify-content: space-between;
  font-size: .74rem; color: var(--muted); margin-top: .3rem;
  font-family: var(--mono);
}
.modal-progress-text .stalled { color: var(--fire); }

/* „vor Ort"-Vermerk in der Anforderungsliste */
.req-onscene {
  font-family: var(--font); font-size: .68rem; color: var(--ok);
  margin-left: .4rem; white-space: nowrap;
}

/* ── Mannschaft ──────────────────────────────────────────────────────────── */

.crew-bar {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .25rem .45rem; margin: .2rem 0 .35rem;
  font-size: .72rem; border-radius: 4px; cursor: pointer;
  background: #171c24; border: 1px solid #232a34;
}
.crew-bar:hover { border-color: #38414e; }
.crew-count { color: #7fb069; font-weight: 600; }
.crew-count.empty { color: #8d939c; font-weight: 400; }
.crew-count.responding { color: #b8a05a; }
.crew-total { color: #6b7280; margin-left: auto; }

.crew-list {
  margin: 0 0 .4rem; padding: .3rem .45rem;
  background: #12161d; border-radius: 4px; border: 1px solid #1d232c;
}
.crew-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem;
  padding: .18rem 0; font-size: .7rem; line-height: 1.25;
}
.crew-name { color: #e8eaed; }
.crew-state { color: #8d939c; font-variant-numeric: tabular-nums; }
.crew-quals { grid-column: 1 / -1; color: #6b7280; font-size: .64rem; }
.crew-row.state-0 .crew-name { color: #8d939c; }
.crew-row.state-1 .crew-state { color: #b8a05a; }
.crew-row.state-3 .crew-state { color: #e23b34; }

.vehicle.waiting { background: #1d1a12; }
.chip.alarm { background: #3a2f10; color: #d9bf6a; border-color: #4a3c14; }

.pickrow.pending { background: #1d1a12; border-radius: 4px; }
.pickrow .chip.alarm { font-size: .6rem; margin-left: auto; }

/* ── Patienten ───────────────────────────────────────────────────────────── */

.patient {
  padding: .35rem .45rem; margin-bottom: .3rem;
  background: #12161d; border: 1px solid #1d232c; border-radius: 4px;
}
.patient.worse { border-color: #4a2320; }
.patient-head { display: flex; gap: .4rem; align-items: baseline; font-size: .72rem; }
.patient-name { color: #e8eaed; font-weight: 600; }
.patient-state { margin-left: auto; color: #8d939c; }
.patient-target { font-size: .64rem; color: #7fa9c4; margin-top: .2rem; }
.chip.need-na { background: #3a1f24; color: #e08d95; border-color: #4a272c; }
.chip.worse { background: #3a1f1c; color: #e0958d; border-color: #4a2723; }
.chip.better { background: #1c3a26; color: #8de0a8; border-color: #234a2f; }
/* Die laufende Phase über der Anforderung, und was danach kommt. */
.req-phase { font-size: 12px; color: var(--muted, #9aa3ad); margin: 2px 0 6px; }
.req-next { font-size: 11.5px; color: var(--muted, #9aa3ad); margin: 6px 0 2px; line-height: 1.4; }
.patient .progress.tiny { height: 3px; margin-top: .3rem; }

/* ── Kasse (Hauptbuch) ───────────────────────────────────────────────────── */

.ledger { display: flex; flex-direction: column; }
.ledger-row {
  display: grid; grid-template-columns: 3.4rem 1fr 5.5rem 6rem; gap: .5rem;
  align-items: baseline; padding: .32rem .2rem; font-size: .72rem;
  border-bottom: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row.ledger-head {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .4rem;
}
.ledger-time { font-family: var(--mono); color: var(--muted); }
.ledger-label { min-width: 0; }
.ledger-note { display: block; font-size: .64rem; color: var(--muted); }
.ledger-amount, .ledger-balance { font-family: var(--mono); text-align: right; white-space: nowrap; }
.ledger-balance { color: var(--muted); }
.ledger-row.out .ledger-amount { color: #e0958d; }
.ledger-row.in .ledger-amount { color: var(--ok); }

/* ── Hilfsfrist (Paket D1/D2) ────────────────────────────────────────────── */

.hilfsfrist-quoten { display: flex; flex-direction: column; margin-bottom: .6rem; }
.hilfsfrist-quoten-row {
  display: grid; grid-template-columns: 6rem 1fr 1fr; gap: .5rem;
  padding: .32rem .2rem; font-size: .76rem; border-bottom: 1px solid var(--line);
}
.hilfsfrist-quoten-row.hilfsfrist-quoten-head {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .4rem;
}
.hilfsfrist-karte-schalter {
  display: flex; align-items: center; gap: .4rem; font-size: .76rem;
  color: var(--muted); margin-bottom: .5rem; cursor: pointer;
}
.hilfsfrist-hinweise { display: flex; flex-direction: column; gap: .35rem; }
.hilfsfrist-hinweis {
  font-size: .76rem; padding: .4rem .5rem; border-radius: .3rem;
  background: var(--panel-2, rgba(255,255,255,.04)); border: 1px solid var(--line);
}

/* ── Beitritt und Anmeldung (M12b) ────────────────────────────────────────── */

.cover { display: grid; place-content: center; min-height: 100dvh; padding: 2rem 1rem;
         overflow: auto; }
.cover-card { background: var(--panel); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 1.6rem; width: min(360px, 100%); }
.cover-card.wide { width: min(760px, 92vw); }
.cover-card h1 { font-size: 1.1rem; margin: .2rem 0 1rem; }
.cover-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.cover-head .who { margin-left: auto; color: var(--muted); font-size: .8rem; }
.cover-card .brand { font-weight: 800; letter-spacing: .1em; }
.cover-card .brand span { color: var(--accent); }
.cover-card label { display: block; margin: .8rem 0; color: var(--muted); font-size: .8rem; }
.cover-card input { display: block; width: 100%; margin-top: .25rem; padding: .5rem;
                    background: var(--bg); color: var(--text);
                    border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.cover-card .row { display: flex; flex-wrap: wrap; gap: .5rem; }
.cover-card .hint { color: var(--muted); font-size: .78rem; line-height: 1.5; margin-top: 1rem; }
.cover-card .error { color: #e0958d; font-size: .8rem; }
.btn.wide { width: 100%; margin-top: .6rem; }

table.worlds { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.worlds th { text-align: left; color: var(--muted); font-weight: 500;
                  padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
table.worlds td { padding: .5rem; border-bottom: 1px solid #171c24; }
table.worlds .num { text-align: right; font-variant-numeric: tabular-nums; }
table.worlds .free { color: var(--ok); }
table.worlds .none { color: var(--muted); }
tr.regions td { background: var(--bg); }

.region-grid { display: grid; gap: .5rem;
               grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.region { border: 1px solid var(--line); border-radius: 6px; padding: .5rem; }
.region.free { border-color: #2c4a33; }
.region.mine { border-color: #3a6b3f; background: #16211a; }
.region-name { font-size: .85rem; }
.region-code { color: var(--muted); font-family: var(--mono); font-size: .7rem;
               margin-bottom: .4rem; }
.region-holder { color: var(--muted); font-size: .78rem; }
/* Kein Weg hinein, und das soll man sehen. Grau wie alles andere hiesse: der
   Spieler sucht weiter nach einem Knopf, den es nicht gibt. */
.region-warn { color: var(--accent); font-size: .78rem; margin-top: .3rem; }

/* Freigabe fuer die Nachbarschaftshilfe */
.chip.aid { background:#1b2a1c; color:#7fb069; }
.chip.strength { font-family: var(--mono); color: #cbd5e1; }
.offer.locked { opacity: .55; }
.offer-meta.warn { color: #d9bf6a; }
.crew-row button.toggle { margin-left: auto; }
.crew-count.assigned { color: #e0a35c; }
.chip.toggle { background:transparent; border:1px solid var(--line); color:var(--muted);
               cursor:pointer; padding:0 .35rem; line-height:1.4; }
.chip.toggle:hover { border-color:#3c4856; color:var(--text); }
.chip.toggle.on { border-color:#2c4a33; color:#7fb069; }

/* Eigene Partie anlegen (Seite /welten) */
.neue-welt { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.neue-welt .feld { flex: 1 1 12rem; }
.feld {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .45rem .6rem; font: inherit; font-size: .85rem;
}
.feld:focus { outline: 1px solid var(--accent); }
.tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabelle th { text-align: left; color: var(--muted); font-weight: 600;
  padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.tabelle td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.btn.danger { border-color: #7a2520; background: #3a1512; color: #ffb4ad; }
.btn.danger:hover { background: #4d1a16; }
.hint.aid-note { border-left: 2px solid var(--accent); padding-left: .5rem; margin-top: .4rem; }

/* Der Guthabenbetrag ist der Knopf zum Hauptbuch (docs/11 B6). */
.stat.klickbar { background: none; border: 0; padding: 0 .3rem; cursor: pointer;
  font: inherit; color: inherit; }
/* color: inherit ist nicht Kosmetik: ein <button> erbt die Textfarbe NICHT,
   er nimmt buttontext -- also Schwarz auf dunklem Grund. */
.stat.klickbar:hover .stat-value { color: var(--accent); }

/* Lage und Phasen im Einsatzfenster (docs/11 A7, B8, E2, E3) */
.modal-lage { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.chip.pending-recon { background: #2a2f3a; color: var(--muted); }
.chip.lage { background: #2d3a2a; color: #b7e0a8; }
.chip.geld { background: #33301f; color: var(--accent); }
.hint.tiny { font-size: .72rem; margin-top: .2rem; }
.phasen { display: flex; gap: .25rem; }
.phasen .phase { flex: 1; }
.phasen .phase.offen .progress { opacity: .35; }
.phasen .phase.fertig .progress-fill { background: #3ddc84; }
.req.unknown { opacity: .75; font-style: italic; }

/* Alarmierung: Reiter, Wachengruppen, gebundene Fahrzeuge (docs/11 G2, G8, G9) */
.reiter { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .5rem; }
.reiter-knopf {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .25rem .55rem; font: inherit;
  font-size: .76rem; cursor: pointer;
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf.an { background: var(--line); color: var(--text); border-color: var(--accent); }
.reiter-knopf.tiny { font-size: .7rem; padding: .15rem .4rem; }
.sortwahl { display: flex; align-items: center; gap: .3rem; font-size: .72rem;
  color: var(--muted); margin-bottom: .5rem; }
.wachenkopf {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin: .55rem 0 .2rem; border-bottom: 1px solid var(--line);
  padding-bottom: .15rem;
}
.entfernung { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.pickrow.gebunden { opacity: .55; }
.pickrow.gebunden input { cursor: not-allowed; }
.vehicle-wache { color: var(--muted); font-size: .74rem; }

/* Wachen- und Klinikfenster (docs/11 A6, B3) */
.wagenzeile, .crewzeile {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem 0; border-bottom: 1px solid var(--line);
}
.wagenzeile:last-child, .crewzeile:last-child { border-bottom: none; }
.crew-name { flex: 1; }
.crew-state { color: var(--muted); font-size: .76rem; }
.fachliste { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.belegung { display: flex; gap: 1.2rem; margin: .3rem 0; }
.belegung div { display: flex; flex-direction: column; }
.belegung b { font-size: 1.4rem; font-weight: 600; }
.belegung span { color: var(--muted); font-size: .72rem; }
.klinik-fach, .bhp-liste { width: 100%; border-collapse: collapse; font-size: .8rem; }
.klinik-fach th, .bhp-liste th { text-align: left; color: var(--muted); font-weight: 500; font-size: .72rem; padding: .2rem .3rem; }
.klinik-fach td, .bhp-liste td { padding: .25rem .3rem; border-top: 1px solid var(--line); vertical-align: top; }
.klinik-fach tr.voll td { color: #e0958d; }
.bhp-liste tr.patient { border-left: none; }
.bhp-liste tr.patient td:first-child { border-left: 3px solid transparent; }
.bhp-liste tr.patient.sk1 td:first-child { border-left-color: #e0463b; }
.bhp-liste tr.patient.sk2 td:first-child { border-left-color: #e8b923; }
.bhp-liste tr.patient.sk3 td:first-child { border-left-color: #3fae5a; }
.station-head { cursor: pointer; }
.req-hint { display: block; color: var(--muted); font-size: .7rem; line-height: 1.35; }

/* Erste Schritte und Hilfe (docs/13 D1) */
.einstieg {
  background: #121821; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .8rem; font-size: .82rem; line-height: 1.5;
}
.einstieg-kopf {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin-bottom: .45rem;
}
.einstieg ol { margin: 0; padding-left: 1.1rem; }
.einstieg li { margin-bottom: .5rem; }
.einstieg li:last-child { margin-bottom: 0; }
.einstieg b { color: var(--text); }
.einstieg em { color: var(--accent); font-style: normal; }
.einstieg-fuss {
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .74rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.hilfe { max-height: 60dvh; overflow-y: auto; padding: .9rem 1.25rem 1.1rem; }
.hilfe h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); margin: 1rem 0 .3rem;
}
.hilfe h3:first-child { margin-top: 0; }
.hilfe p { margin: 0; line-height: 1.6; font-size: .85rem; max-width: 72ch; }
.hilfe em { color: var(--text); font-style: normal; }
.crew-adresse { display: block; color: var(--muted); font-size: .7rem; }

/* ── Fuhrparkfilter (docs/13 M4) ─────────────────────────────────────────────
   Erscheint erst ab neun Fahrzeugen. Sie klebt oben an der Liste, weil man beim
   Durchscrollen wissen will, wonach man gerade sucht. */
.fuhrparkfilter {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .45rem .5rem .5rem;
  margin: -.25rem -.5rem .35rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.fuhrparkfilter .feld { width: 100%; }
.filterchips { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ── Fahrzeug verkaufen oder umsetzen (docs/13 A4) ───────────────────────────
   Die Rückfrage steht unter der Zeile, nicht in einem Fenster: wer ein Fahrzeug
   außer Dienst stellt, soll dabei sehen, welches. */
.wagenaktion {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .4rem .5rem; margin: 0 0 .35rem 1.6rem;
  border-left: 2px solid var(--line);
  font-size: .8rem; color: var(--muted);
}
.wagenaktion .hint { margin-left: auto; }
.chip.toggle.danger { border-color: #4a2c2c; color: #cf8b84; }
.chip.toggle.danger:hover { border-color: #6a3a35; color: #e0958d; }

/* Kreis abgeben (docs/13 D4) — die Rückfrage steht in der Zeile, damit sichtbar
   bleibt, um welchen Kreis es geht. */
.abgeben-frage {
  display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted); max-width: 32rem;
}

/* ── Rückschau (docs/13 D5) ──────────────────────────────────────────────────
   Buchungen und Einsätze in einem Fenster: die eine Liste erklärt die andere. */
.historie { display: flex; flex-direction: column; font-size: .82rem; }
.historie-row {
  display: grid; grid-template-columns: 6.5rem 1fr 5rem 4rem 8rem;
  gap: .5rem; align-items: baseline;
  padding: .4rem .2rem; border-bottom: 1px solid var(--line);
}
.historie-head { color: var(--muted); font-size: .74rem; text-transform: uppercase;
                 letter-spacing: .04em; border-bottom-color: var(--line); }
.historie-row:last-child { border-bottom: none; }
.h-zeit, .h-dauer, .h-wagen { color: var(--muted); font-variant-numeric: tabular-nums; }
.h-wagen, .h-ertrag { text-align: right; }
.h-titel { display: flex; flex-direction: column; gap: .1rem; }
.h-ort { color: var(--muted); font-size: .76rem; }
.h-ausgang { color: #7fb069; font-size: .76rem; }
.h-ertrag { font-variant-numeric: tabular-nums; }
.h-xp { display: block; color: var(--muted); font-size: .72rem; }

/* Einsatzliste ordnen (docs/13 D3) — klebt oben, weil man beim Scrollen wissen
   will, welchen Ausschnitt man gerade sieht. */
.einsatzfilter {
  position: sticky; top: 0; z-index: 2;
  padding: .45rem .5rem .1rem; margin: -.25rem -.5rem .35rem;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.einsatzfilter .reiter { margin-bottom: .35rem; }
.einsatzfilter .sortwahl { margin-bottom: .35rem; }
.filterzahl { opacity: .55; font-variant-numeric: tabular-nums; margin-left: .15rem; }

/* ── Tarife (docs/13 A3) ─────────────────────────────────────────────────────
   Nebeneinander, damit der Unterschied sichtbar ist statt gelesen werden muss. */
.tarife { display: flex; gap: .7rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.tarif {
  flex: 1 1 14rem; display: flex; flex-direction: column; gap: .45rem;
  padding: .7rem .8rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.tarif.meiner { border-color: var(--accent); }
.tarif-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.tarif-name { font-weight: 650; }
.tarif-preis { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.tarif-liste { margin: 0; padding-left: 1.1rem; font-size: .82rem; color: var(--muted); }
.tarif-liste li { margin: .1rem 0; }
.tarif-stand { color: #7fb069; font-size: .78rem; }
.tarif .btn { align-self: flex-start; margin-top: auto; }

/* Klinikbelegung (docs/13, Einsatzsystem Punkt 5) */
.bettenbalken {
  height: .45rem; background: var(--line); border-radius: 999px;
  overflow: hidden; margin: .1rem 0 .4rem;
}
.bettenfuellung { height: 100%; background: #4e7a3f; transition: width .3s; }
.bettenfuellung.knapp { background: #b08a3a; }
.bettenfuellung.voll { background: #8a3a34; }
.hint.warnend { color: #cf8b84; }

/* ── Kreiswahl in der Kopfzeile ──────────────────────────────────────────────
   Welchen Kreis man führt, muss dastehen: ein Konto darf mehrere betreuen, und
   die Karte sieht in jedem gleich aus. */
.kreiswahl { position: relative; display: flex; align-items: center; }
.kreis-knopf {
  display: flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font: inherit; font-size: .84rem; font-weight: 600;
  padding: .25rem .5rem; cursor: pointer;
}
.kreis-knopf:hover { border-color: var(--accent); }
.kreis-pfeil { color: var(--muted); font-size: .7rem; }
.kreis-name.einzeln { font-size: .84rem; font-weight: 600; padding: .25rem .1rem; }
.kreisliste {
  position: absolute; top: calc(100% + .3rem); left: 0; z-index: 40;
  min-width: 13rem; display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.45);
  overflow: hidden;
}
.kreis-eintrag {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: .82rem;
  padding: .45rem .6rem; cursor: pointer; text-align: left;
}
.kreis-eintrag:last-child { border-bottom: none; }
.kreis-eintrag:hover { background: var(--line); }
.kreis-eintrag.an { color: #7fb069; font-weight: 600; }
.kreis-eintrag-code { color: var(--muted); font-size: .72rem; }

/* Mehrere Kreise je Welt: einer je Zeile.
   Als Chips nebeneinander lag das Abgeben vier Pixel neben dem Weg hinein — und
   das Abgeben ist unwiderruflich. Platz ist hier die halbe Sicherheit. */
.kreisliste { display: flex; flex-direction: column; gap: .35rem; }
.kreiszeile { display: flex; align-items: center; gap: .6rem; }
.kreisname { min-width: 10rem; }

/* Die zerstörende Handlung: nie die nächste am Zeiger, nie die auffälligste.
   Sie sitzt am anderen Ende der Zeile und trägt ihr Wort — ein × heisst überall
   sonst „schliessen", und danach greift niemand vorsichtig. */
.btn.abgeben {
  margin-left: auto; color: var(--muted); background: none; border-color: transparent;
}
.btn.abgeben:hover { color: #e0958d; border-color: #4a2723; }

/* ── Verletzte: Sichtungskategorie, Werte, Entscheidung ─────────────────── */
.chip.sk { font-weight: 700; letter-spacing: .02em; }
.chip.sk1 { background: #5a1a1a; color: #ffb3a8; border-color: #7a2323; }
.chip.sk2 { background: #4a3d10; color: #ffe08a; border-color: #6b5716; }
.chip.sk3 { background: #173d22; color: #9be3ae; border-color: #22552f; }
.patient.sk1 { border-left: 3px solid #e0463b; }
.patient.sk2 { border-left: 3px solid #e8b923; }
.patient.sk3 { border-left: 3px solid #3fae5a; }
/* Sirene im Gebäudefenster und „mit Sirene“ neben dem Alarmknopf. */
.sirene-feld { margin-top: .6rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; }
.sirene-feld .note { margin: .35rem 0 0; }
.modal-foot .checkzeile.inline { margin-right: .5rem; white-space: nowrap; }
/* Verstorbene: grau, ohne Versorgungsbalken. */
.chip.sk.tot { background: #2a2e33; color: #cfd6dd; border-color: #454b52; }
.patient.tot { border-left: 3px solid #6b7580; opacity: .9; }
.patient-werte { display: flex; gap: 6px; font-size: 11.5px; color: var(--muted, #9aa3ad); margin: 3px 0 4px; }
.patient-werte .rechts { margin-left: auto; }
.patient-wahl { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; margin-top: 6px; }
.patient-wahl label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted, #9aa3ad); min-width: 0; }
.patient-wahl select { width: 100%; min-width: 0; font-size: 12px; }
.patient-wahl .hint { grid-column: 1 / -1; }
.hint.warn { color: #e0958d; }

/* ── Funkverkehr zwischen den Leitstellen ─────────────────────────────── */
.ticker-head { display: flex; align-items: center; gap: 12px; }
.funk-senden { display: flex; gap: 6px; flex: 1; max-width: 520px; margin-left: auto; }
.funk-feld { flex: 1; min-width: 0; font-size: 12.5px; padding: 3px 8px; border-radius: 6px;
             border: 1px solid var(--line, #2a3440); background: var(--bg, #0d141d); color: var(--text, #e6edf3); }
.radio-chat .radio-text { color: #7dd3fc; }
.radio-wer { color: #e0e7ef; font-weight: 600; white-space: nowrap; }
.radio-bild { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; align-self: center; }

/* ══════════════════════════════════════════════════════════════════════════
   Neue Oberfläche der Leitstelle (Entwurf „Leitstelle – neue Oberfläche")
   und Lageführung bei Großschadenslagen (docs/14).

   Palette aus dem Entwurf: Grund #0b0f14, Spalten #10161d, Karten #151c24,
   Linien #243140/#2b3a4a, Akzent #f4c542. Schriften aus dem Projekt
   (lage.css): Barlow, Barlow Semi Condensed, IBM Plex Mono.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0b0f14;
  --panel: #10161d;
  --panel-2: #151c24;
  --top: #121920;
  --line: #243140;
  --line-2: #2b3a4a;
  --text: #e6ebf0;
  --muted: #9aa6b2;
  --leise: #7f8c99;
  --font: "Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rot: #e5484d;
  --gelb: #f4c542;
  --blau: #4c9aff;
  --orange: #f97316;
}

html, body { font-size: 14px; }

.shell {
  grid-template-columns: 320px minmax(0, 1fr) 340px;
  grid-template-rows: 56px auto minmax(0, 1fr);
  grid-template-areas: "top top top" "banner banner banner" "left center right";
}

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */

.topbar { background: var(--top); gap: 1rem; padding: 0 1rem; }
.brand { font-family: var(--cond); font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; }
.topbar-trenner { width: 1px; height: 28px; background: var(--line); }
.clock-time { font-size: 1.45rem; }
.clock-ratio {
  font-size: .72rem; color: var(--muted); padding: 1px 6px;
  border: 1px solid var(--line-2); border-radius: 4px; font-family: var(--font);
}
.saison-chip {
  font-size: .72rem; padding: 2px 8px; border-radius: 10px;
  background: var(--accent-weak, #3a2d12); color: var(--accent, #e8b14a);
  border: 1px solid var(--line-2); white-space: nowrap;
}
.weather-chip {
  font-size: .72rem; padding: 2px 8px; border-radius: 10px;
  background: var(--panel-2, #1c2430); color: var(--muted, #9fb0c3);
  border: 1px solid var(--line-2); white-space: nowrap;
}
.stat-label { font-size: .66rem; letter-spacing: .08em; }
.stat-value { font-size: .95rem; }
.stat.klickbar { display: flex; flex-direction: column; align-items: flex-start; }
.level { min-width: 120px; }
.kreis-knopf { background: #19222c; border-color: var(--line-2); height: 34px; }

/* Ein Maß für die Kopfzeile: der Umschalter Normalbetrieb/Großschadenslage ist 38 px
   hoch (30 px Knopf, 3 px Rand, 1 px Linie), und genauso hoch, mit derselben Schrift,
   stehen daneben AAO, Überörtlich, Team-Lagen, Support, „?“, der Ton und die Verbindung.
   Vorher waren sie .btn.tiny: 20 px hoch und in 10-px-Schrift, Knöpfchen neben einem Schalter. */
.topbar { --kopf-hoehe: 38px; --kopf-schrift: .88rem; }
.modus { display: flex; height: var(--kopf-hoehe); padding: 3px; background: #0e141a; border: 1px solid var(--line-2); border-radius: 10px; }
.modus-knopf {
  display: flex; align-items: center; gap: .45rem; height: 30px; padding: 0 .9rem;
  background: transparent; border: none; border-radius: 7px; color: var(--muted);
  font: inherit; font-size: .88rem; cursor: pointer;
}
.modus-knopf:hover { color: var(--text); }
.topbar .btn.tiny, .topbar .conn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: var(--kopf-hoehe); min-width: var(--kopf-hoehe); padding: 0 .85rem;
  font-size: var(--kopf-schrift); line-height: 1; border-radius: 10px;
  border: 1px solid var(--line-2); background: #0e141a; color: var(--muted);
}
.topbar .btn.tiny:hover:not(:disabled) { background: #19222c; color: var(--text); }
.topbar .btn.tiny.gesperrt { opacity: .55; }
.topbar .kopf-hilfe, .topbar .kopf-ton, .topbar .kopf-welten { padding: 0; font-size: 1rem; }
.kopf-welten { text-decoration: none; }
.topbar .conn { cursor: default; }
.topbar .conn.on { color: var(--ok); }
.topbar .conn.off { color: var(--fire); }
.topbar .conn.wait { color: var(--accent); }
.topbar .conn .conn-text { color: var(--muted); }
/* Zweite Hälfte der Knopfbeschriftung: nur im Menü „Mehr" (hier und am Handy). */
.kopf-lang { display: none; }
.modus-knopf.an { background: var(--line); color: var(--text); font-weight: 600; }
.modus-zahl { font-size: .72rem; font-weight: 600; border-radius: 9px; padding: 0 .45rem; }
.modus-zahl.rot { background: #c9353a; color: #fff; }
.modus-zahl.leise { background: #1d2833; color: var(--muted); }

/* „Mehr": Kennzahlen, Erfolge, Verband, Einstellungen und rechtliche Seiten liegen
   nicht mehr offen in der Kopfzeile (Rückmeldung Phillip, 02.10.2026), sondern in
   einem Menü dahinter - am Desktop genauso wie am Handy. Was direkt zum Spielfluss
   gehört (Normalbetrieb/Großschadenslage, AAO, Überörtlich, Dienste) steht weiter
   unmittelbar in der Kopfzeile.
   .kopf-mehr steckt im Markup IN .kopf-kern: am Desktop ist .kopf-kern der
   unsichtbare Rahmen (display: contents, seine Knöpfe stehen in der Kopfzeile) und
   .kopf-mehr das Menü dahinter; am schmalen Gerät ist es umgekehrt (mobil.css) -
   .kopf-kern selbst wird zum Menü, .kopf-mehr darin unsichtbar, damit beider Inhalt
   in einem gemeinsamen Raster steht. */
.topbar { position: relative; }
.kopf-kern { display: contents; }
.kopf-menue-knopf.an { border-color: var(--gelb); color: var(--gelb); }
.menue-hinter { display: none; }
.shell.menue-offen .menue-hinter {
  display: block; position: fixed; inset: 0; z-index: 44; background: rgba(5, 8, 12, .4);
}
.kopf-mehr {
  display: none; flex-direction: column; gap: .35rem;
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 45;
  min-width: 230px; max-width: min(320px, calc(100vw - 1.5rem));
  max-height: min(70dvh, 560px); overflow-y: auto;
  padding: .6rem; background: var(--top); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.shell.menue-offen .kopf-mehr { display: flex; }
.kopf-mehr .btn.tiny, .kopf-mehr .stat.klickbar { width: 100%; justify-content: flex-start; }
.kopf-mehr .stat, .kopf-mehr .level { width: 100%; }
.kopf-mehr .kopf-lang, .kopf-mehr .team-lagen-text, .kopf-menue-knopf .kopf-lang { display: inline; }
.kopf-mehr .kopf-hilfe, .kopf-mehr .kopf-ton, .kopf-mehr .kopf-welten { padding: 0 .85rem; font-size: var(--kopf-schrift); }

/* ── Lagebanner ─────────────────────────────────────────────────────────── */

.gsl-banner {
  grid-area: banner; display: flex; align-items: center; gap: 1.5rem;
  padding: .55rem 1rem; background: #2a1114; border-bottom: 1px solid #5a1d22;
  border-left: 4px solid var(--gsl-farbe, var(--rot));
}
.gsl-titel { display: flex; flex-direction: column; min-width: 0; }
.gsl-marke { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #ff9da1; font-weight: 600; }
.gsl-name { font-family: var(--cond); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.gsl-sub { font-size: .76rem; color: #d7a3a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsl-kennzahlen { display: flex; gap: 1.4rem; margin-left: auto; }
.gsl-kennzahlen > div { display: flex; flex-direction: column; }
.gsl-kennzahlen b { font-family: var(--mono); font-size: 1.1rem; }
.gsl-kennzahlen span { font-size: .7rem; color: #d7a3a6; white-space: nowrap; }
.gsl-kennzahlen .steigt b { color: #ff8a8e; }
.gsl-kennzahlen .steht b { color: #3ddc84; }
.gsl-knoepfe { display: flex; gap: .4rem; align-items: center; }

/* ── Spalten ────────────────────────────────────────────────────────────── */

.panel { background: var(--panel); }
.panel-head {
  text-transform: none; letter-spacing: 0; color: var(--text);
  border-bottom: none; padding: .85rem 1rem .5rem; justify-content: flex-start;
}
.panel-titel { font-family: var(--cond); font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.panel-zahl { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.panel-body { padding: .25rem .6rem .8rem; gap: .45rem; }
.icon-knopf {
  width: 30px; height: 30px; display: grid; place-content: center;
  background: transparent; border: 1px solid var(--line-2); border-radius: 7px;
  color: var(--muted); cursor: pointer; font-size: 1rem;
}
.icon-knopf.an, .icon-knopf:hover { color: var(--text); border-color: var(--gelb); }
.suche { display: flex; gap: .4rem; padding: 0 1rem .5rem; }
.suche .feld { flex: 1; min-width: 0; }
.feld.klein { padding: .25rem .4rem; font-size: .78rem; }
.klein { font-size: .74rem; }
.warnend { color: #cf8b84; }

.filterreihe { display: flex; gap: .35rem; flex-wrap: wrap; padding: 0 1rem .6rem; }
.filterchip {
  height: 26px; padding: 0 .65rem; background: transparent; border: 1px solid var(--line-2);
  border-radius: 13px; color: #c9d2db; font: inherit; font-size: .8rem; cursor: pointer;
}
.filterchip:hover { border-color: #3a4b5d; }
.filterchip.an { background: var(--line); border-color: #3a4b5d; color: var(--text); }
.filterchip.f2 { border-color: #5c4413; color: var(--gelb); }
.filterchip.kreis { border-style: dashed; }

.gruppe {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .4rem .2rem; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.gruppe .spacer { flex: 1; }

/* ── Einsatzkarten ──────────────────────────────────────────────────────── */

.einsatz {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .6rem .75rem; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.einsatz:hover { border-color: #3a4b5d; }
.einsatz.st-new { background: #1a1418; border-color: #4a2328; }
.einsatz.sel { border-color: var(--gelb); background: #19222c; }
.einsatz.gewaehlt { outline: 1px dashed var(--gelb); }
.einsatz.nachbar { opacity: .55; }
.einsatz.nachbar:hover, .einsatz.nachbar.sel { opacity: 1; }
.einsatz-kopf { display: flex; align-items: center; gap: .5rem; }
.einsatz-titel { font-weight: 600; font-size: .95rem; flex: 1; min-width: 0; }
.einsatz-zeit { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.einsatz-zeit.rot { color: #f08f93; }
.einsatz-ort { font-size: .8rem; color: var(--muted); }
.einsatz-chips { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.einsatz-chips .spacer { flex: 1; }
.einsatz .progress { margin-top: 0; }
.einsatz .progress-fill { background: var(--blau); }
.punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.punkt.rot { background: var(--rot); }
.punkt.gelb { background: var(--gelb); }
.punkt.orange { background: var(--orange); }
.punkt.blau { background: var(--blau); }

.chip { margin-left: 0; border-radius: 4px; padding: .1rem .45rem; background: #1d2630; border-color: transparent; color: #c9d2db; font-size: .72rem; }
.chip.neu { background: #2a1c20; color: #f08f93; }
.chip.fehlt { background: #33280c; color: var(--gelb); border-color: transparent; }
.chip.ea { background: color-mix(in srgb, var(--ea-farbe) 18%, transparent); color: var(--ea-farbe); }
.chip.gsl { background: color-mix(in srgb, var(--gsl-farbe) 22%, transparent); color: #fff; }

.lagekarte {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .6rem .75rem; background: #2a1114; border: 1px solid #5a1d22;
  border-left: 4px solid var(--gsl-farbe); border-radius: 10px; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.lagekarte:hover { border-color: #7a2a31; }
.lagekarte-marke { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #ff9da1; }
.lagekarte-titel { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; }
.lagekarte-sub { font-size: .76rem; color: #d7a3a6; }

/* ── Fahrzeugtafel ──────────────────────────────────────────────────────── */

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: 0 1rem .6rem; }
.kpi {
  display: flex; flex-direction: column; align-items: flex-start; padding: .5rem;
  border-radius: 8px; border: 1px solid var(--line-2); background: #19202a;
  color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.kpi b { font-family: var(--mono); font-size: 1.15rem; }
.kpi span { font-size: .72rem; color: var(--muted); }
.kpi.gruen { background: #132019; border-color: #1f3b2b; }
.kpi.gruen b { color: #3ddc84; }
.kpi.rot { background: #221416; border-color: #45252a; }
.kpi.rot b { color: #ff8a8e; }
.kpi.grau b { color: #c9d2db; }
.kpi.an { outline: 1px solid var(--gelb); }

.wache-karte {
  display: flex; flex-direction: column; gap: .45rem; padding: .6rem .7rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.wache-kopf { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; }
.wache-name { font-weight: 600; font-size: .88rem; flex: 1; min-width: 0; }
.wache-kopf:hover .wache-name { color: var(--gelb); }
.wache-info { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.wagen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.wagen {
  position: relative; display: flex; align-items: center; gap: .45rem; min-width: 0;
  padding: .35rem .45rem; background: #19222c; border: 1px solid var(--line);
  border-radius: 7px; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.wagen:hover { border-color: #3a4b5d; }
.wagen.picked { border-color: var(--gelb); background: #2a2a1c; }
.wagen.waiting { background: #1d1a12; border-color: #4a3c14; }
.wagen.extern { border-style: dashed; }
.wagen .fms { flex: none; }
.wagen-text { display: flex; flex-direction: column; min-width: 0; }
.wagen-name { font-family: var(--mono); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wagen-sub { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wagen-ea { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ea-farbe); }

/* ── Mitte: Karte und Dock ──────────────────────────────────────────────── */

.center { grid-area: center; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mapwrap { grid-area: auto; flex: 1; min-height: 0; position: relative; background: #0f1a23; }
.ebenen {
  position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; gap: 3px; padding: 3px;
  background: rgba(16, 22, 29, .92); border: 1px solid var(--line-2); border-radius: 10px;
}
.ebene {
  height: 26px; padding: 0 .6rem; background: transparent; border: none; border-radius: 6px;
  color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer;
}
.ebene.an { background: var(--line); color: var(--text); }
.overlay-hint.zeichnen { border-color: var(--gelb); max-width: min(760px, 80%); }
.legend { background: rgba(16, 22, 29, .94); border-color: var(--line-2); }
.legend-swatch.br { background: var(--gelb); border-radius: 50%; }

.kartenrahmen {
  position: absolute; z-index: 6; border: 1px dashed var(--gelb);
  background: rgba(244, 197, 66, .1); pointer-events: none;
}

.dock {
  height: 150px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--line);
}
.dock-kopf { display: flex; align-items: center; gap: .25rem; padding: .35rem .6rem; border-bottom: 1px solid #1d2833; }
.dock-tab {
  display: flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .75rem;
  background: transparent; border: none; border-radius: 6px; color: var(--muted);
  font: inherit; font-size: .8rem; cursor: pointer;
}
.dock-tab.an { background: var(--line); color: var(--text); font-weight: 600; }
.dock-zahl { font-size: .66rem; color: var(--bg); background: #7cc4ff; border-radius: 8px; padding: 0 .4rem; }
.dock .funk-senden { max-width: 460px; align-items: center; }
.dock .funk-feld { height: 26px; background: var(--bg); border-color: var(--line-2); }
.dock-body { flex: 1; overflow-y: auto; padding: .3rem .8rem; font-family: var(--mono); font-size: .78rem; }
.radio-alarm .radio-text { color: #ffb4a8; }
.radio-status .radio-text { color: #c9d2db; }

/* ── Lagemodus: Führung ─────────────────────────────────────────────────── */

.fuehrung { display: flex; flex-direction: column; gap: .35rem; }
.schritt {
  display: flex; gap: .6rem; padding: .5rem .6rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 9px;
}
.schritt.fertig { border-color: #1f3b2b; background: #111c16; }
.schritt-nr {
  width: 22px; height: 22px; flex: none; display: grid; place-content: center;
  border-radius: 50%; background: var(--line); font-family: var(--mono); font-size: .75rem; font-weight: 600;
}
.schritt.fertig .schritt-nr { background: #1f9d55; color: #fff; }
.schritt-text { flex: 1; min-width: 0; }
.schritt-titel { font-weight: 600; font-size: .85rem; }
.schritt-sub { font-size: .74rem; color: var(--muted); margin-top: 1px; }
.schritt-knoepfe { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }

.neu-zeile {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
  background: #1a1418; border: 1px solid #4a2328; border-radius: 8px;
}
.neu-text { flex: 1; min-width: 0; font-size: .84rem; cursor: pointer; display: flex; flex-direction: column; }

.ea-karte {
  display: flex; flex-direction: column; gap: .3rem; padding: .55rem .65rem;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--ea-farbe);
  border-radius: 9px;
}
.ea-kopf { display: flex; align-items: baseline; gap: .5rem; }
.ea-name { font-family: var(--cond); font-weight: 700; font-size: 1rem; flex: 1; cursor: pointer; color: var(--ea-farbe); }
.ea-info { font-size: .74rem; color: var(--muted); }
.ea-sub { font-size: .76rem; color: #c9d2db; }
.ea-fehlt { font-size: .74rem; color: var(--gelb); }
.ea-knoepfe { display: flex; gap: .3rem; }
.ea-liste { display: flex; flex-direction: column; gap: 2px; margin-top: .2rem; }
.ea-zeile { display: flex; align-items: center; gap: .45rem; padding: .2rem .3rem; border-radius: 5px; font-size: .78rem; cursor: pointer; }
.ea-zeile:hover { background: #19222c; }
.ea-zeile > span:nth-child(2) { flex: 1; min-width: 0; }

/* ── Lagemodus: Räume und Hilfe ─────────────────────────────────────────── */

.raum-karte {
  display: flex; flex-direction: column; gap: .35rem; padding: .6rem .65rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.raum-karte.art1 { border-color: #5a1d22; }
.raum-karte.art2 { border-style: dashed; }
.raum-kopf { display: flex; align-items: center; gap: .45rem; }
.raum-marke {
  font-family: var(--mono); font-size: .66rem; font-weight: 600; padding: .05rem .35rem;
  border-radius: 4px; background: var(--gelb); color: #1a1400;
}
.raum-karte.art1 .raum-marke { background: var(--rot); color: #fff; }
.raum-karte.art2 .raum-marke { background: #7cc4ff; }
.raum-name { font-weight: 600; font-size: .88rem; flex: 1; min-width: 0; cursor: pointer; }
.raum-info { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.raum-sub { font-size: .74rem; color: var(--muted); }
.versorgt { color: #3ddc84; }
.unversorgt { color: var(--gelb); }
.raum-knoepfe { display: flex; gap: .3rem; }

.einheit {
  display: flex; flex-direction: column; gap: .2rem; padding: .45rem .55rem;
  background: #19222c; border: 1px solid var(--line); border-radius: 8px;
}
.einheit-kopf { display: flex; align-items: baseline; gap: .5rem; font-size: .84rem; }
.einheit-kopf b { flex: 1; min-width: 0; }
.einheit-kopf .staerke { font-family: var(--mono); font-size: .72rem; color: #cfe3ff; }
.einheit-sub { font-size: .72rem; color: var(--muted); }
.einheit-knoepfe { display: flex; gap: .3rem; align-items: center; }
.einheit-knoepfe select { flex: 1; min-width: 0; }
.anfahrend {
  display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem;
  border: 1px dashed var(--line-2); border-radius: 7px; font-size: .76rem;
}

.hilfe-zeile {
  display: flex; flex-direction: column; gap: .2rem; padding: .5rem .6rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
}
.hilfe-kopf { display: flex; align-items: baseline; gap: .5rem; }
.hilfe-kopf b { flex: 1; min-width: 0; font-size: .84rem; }
.hilfe-stand { font-size: .72rem; padding: .05rem .4rem; border-radius: 4px; background: #1d2630; color: #c9d2db; white-space: nowrap; }
.hilfe-stand.st1 { background: #33280c; color: var(--gelb); }
.hilfe-stand.st2 { background: #16293d; color: #a8cdf5; }
.hilfe-stand.st3 { background: #132019; color: #3ddc84; }
.hilfe-zeile .btn { align-self: flex-start; }

/* ── Auswahlleiste ──────────────────────────────────────────────────────── */

.auswahlleiste {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; max-width: calc(100% - 28px);
  padding: .45rem .6rem; background: #151d26; border: 1px solid #34465a; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.auswahl-info { display: flex; flex-direction: column; margin-right: .4rem; font-size: .82rem; }
.auswahl-info .leise { font-size: .72rem; }

/* ── Kontextmenü ────────────────────────────────────────────────────────── */

.ctx-hinter { position: fixed; inset: 0; z-index: 70; }
.ctx {
  position: fixed; z-index: 71; width: 280px; max-height: calc(100dvh - 16px); overflow-y: auto;
  background: #151d26; border: 1px solid #34465a; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.ctx-kopf { padding: .6rem .85rem; border-bottom: 1px solid var(--line); }
.ctx-titel { font-size: .86rem; font-weight: 600; }
.ctx-sub { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-top: 1px; }
.ctx-liste { display: flex; flex-direction: column; padding: .3rem; }
.ctx-abschnitt { padding: .4rem .55rem .15rem; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.ctx-eintrag {
  display: flex; align-items: center; gap: .6rem; min-height: 32px; padding: .25rem .6rem;
  background: transparent; border: none; border-radius: 7px; color: var(--text);
  font: inherit; font-size: .84rem; text-align: left; cursor: pointer;
}
.ctx-eintrag:hover:not(:disabled) { background: var(--line); }
.ctx-eintrag.primaer { background: #1f2b38; }
.ctx-eintrag:disabled { color: var(--muted); cursor: default; }
.ctx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctx-hinweis { font-size: .7rem; color: var(--muted); }
.ctx-taste { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.ctx-fuss { padding: .5rem .85rem; border-top: 1px solid var(--line); font-size: .68rem; color: var(--leise); }

/* ── Dialoge der Lageführung ────────────────────────────────────────────── */

.modal { background: #121920; border-color: var(--line-2); }
.modal.breit { width: min(1040px, 96vw); }
.modal-marke {
  display: inline-block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: #ff9da1; border-left: 3px solid var(--gsl-farbe); padding-left: .4rem; margin-bottom: .2rem;
}
.formzeile { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted); }
.formzeile.inline { flex-direction: row; align-items: center; gap: .5rem; }
.checkgitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .8rem; }
.checkzeile { display: flex; align-items: center; gap: .45rem; font-size: .84rem; cursor: pointer; }
.checkzeile.block { align-items: flex-start; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.zielgruppe { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .5rem; }
.zielgruppe-kopf { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .86rem; }
.zielgruppe-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .6rem; margin-top: .25rem; }
/* Zwei Spalten sind schmal: auch der Fahrzeugtyp kürzt mit "…" („GW-Deichverteidigung“
   lief sonst über das Kästchen der Nachbarspalte). Ganz steht er im Tooltip der Zeile. */
.zielgruppe-liste .pickrow > .vehicle-type {
  flex-shrink: 1; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vorschlag {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center;
  padding: .5rem .6rem; margin-bottom: .5rem; background: #1b1a10; border: 1px solid #4a3c14; border-radius: 8px;
}
.vorschlag-kopf { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gelb); }
.vorschlag-text { grid-column: 1; font-size: .8rem; }
.vorschlag .btn { grid-column: 2; grid-row: 1 / span 2; }
.phase-name { font-size: .66rem; color: var(--muted); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phasen .phase.laeuft .phase-name { color: var(--text); font-weight: 600; }

.ueh-leiste { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ueh-reiter { padding: .5rem 1rem 0; margin: 0; }
.ueh-konzept { display: flex; flex-direction: column; gap: .3rem; padding: .6rem 0 .8rem; border-bottom: 1px solid var(--line); }
.ueh-kopf { display: flex; align-items: baseline; gap: .5rem; }
.ueh-kopf b { font-family: var(--mono); color: var(--gelb); }
.ueh-beschreibung { max-width: 80ch; }
.ueh-zuege { display: flex; flex-direction: column; gap: 1px; padding: .1rem 0 .2rem .6rem; border-left: 2px solid var(--line); }
.ueh-zuege .ueh-neu { color: var(--text); }
.ueh-zuege .ueh-neu::before { content: "+ "; color: var(--gelb); }
.ueh-preis { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--mono); font-size: .8rem; }

/* ── TEL-Fenster: Automatik und Zuweisung an die Abschnitte (docs/14) ───── */
.tel-fenster .modal-cols.tel-cols { grid-template-columns: 1.35fr 1fr; max-height: 62dvh; }
.tel-leiste { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.tel-auto-text { color: var(--muted); font-size: 12.5px; max-width: 46ch; }
.tel-auto-text.warnend { color: var(--gelb, #f4c542); }
.auto-schalter { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted);
  font-weight: 600; cursor: pointer; }
.auto-schalter:hover { border-color: #3c4856; color: var(--text); }
.auto-schalter.an { border-color: #2c4a33; color: #8fe0a6; background: #13201a; }
.auto-bahn { width: 30px; height: 16px; border-radius: 999px; background: #2a313c; position: relative;
  transition: background .15s; flex: none; }
.auto-schalter.an .auto-bahn { background: #2f8f55; }
.auto-knopf { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #cfd5dd; transition: left .15s; }
.auto-schalter.an .auto-knopf { left: 16px; background: #fff; }
.tel-abschnitt { border: 1px solid var(--line); border-left: 3px solid var(--ea-farbe, var(--accent));
  border-radius: var(--radius); padding: .5rem .6rem; margin-bottom: .55rem; background: var(--panel); }
.tel-abschnitt-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.tel-einheit { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: .45rem;
  padding: .2rem 0; border-top: 1px dashed #222935; font-size: 13px; }
.tel-einheit:first-of-type { border-top: 0; }
.tel-stand { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head .checkzeile.inline { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── Einsätze, an denen ein Rettungswagen fehlt, blinken ───────────────── */
@keyframes rtw-blinken { 0%, 49% { box-shadow: inset 4px 0 0 #ff3b3b, 0 0 0 1px #ff3b3b66; }
                         50%, 100% { box-shadow: inset 4px 0 0 transparent, 0 0 0 1px transparent; } }
@keyframes rtw-chip { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } }
.einsatz.rtw-fehlt, .neu-zeile.rtw-fehlt { animation: rtw-blinken 1s infinite; }
.chip.rtw { background: #ff3b3b; color: #fff; border-color: transparent; font-weight: 700;
  animation: rtw-chip 1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .einsatz.rtw-fehlt, .neu-zeile.rtw-fehlt { animation: none; box-shadow: inset 4px 0 0 #ff3b3b; }
  .chip.rtw { animation: none; }
}
.neu-text .chip.rtw { align-self: flex-start; display: inline-block; width: auto; margin: 2px 0; }
.tel-br-zeile { border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .55rem;
  margin-bottom: .45rem; background: var(--panel); }
.tel-br-kopf { display: flex; align-items: center; gap: .45rem; }
.tel-br { max-width: 11rem; padding: .1rem .3rem; }

/* ── Ausbauten im Wachenfenster ─────────────────────────────────────────── */
/* Beide Teile scrollen für sich: eine lange Liste (THW: sechzehn Fachgruppen) darf die
   Spalten nicht auf null drücken und nicht unten aus dem Fenster laufen. */
.ausbau-liste { padding: .6rem 1rem 1rem; border-top: 1px solid var(--line);
  flex: 0 1 auto; min-height: 0; max-height: 46dvh; overflow-y: auto; }
.modal-cols:has(+ .ausbau-liste) { min-height: 11rem; flex: 1 1 auto; }
.ausbau-zeile { border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem;
  margin-bottom: .45rem; background: var(--panel); }
.ausbau-zeile.fertig { border-color: #2c4a33; }
.ausbau-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.chip.ok { background: #13201a; color: #8fe0a6; border-color: #2c4a33; }
.chip.lock.klickbar { cursor: pointer; }
.chip.lock.klickbar:hover { filter: brightness(1.2); }

/* ── Mannschaft: Zusammenfassung im Wachenfenster, Liste im eigenen Fenster ── */
/* Vorher stand die volle Namensliste im Wachenfenster und drückte bei vielen
   Mitgliedern die Ausbauten darunter auf eine Zeile zusammen (28.09.2026). */
.mannschaft-kurz {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; padding: .3rem 0;
}
.mitglieder-liste { gap: .5rem; }
.mitglied-zeile {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .65rem;
  background: var(--panel); margin-bottom: .1rem;
}
.mitglied-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.mitglied-zeile .offer-caps { margin-top: 0; margin-bottom: .4rem; }

/* ── AAO ────────────────────────────────────────────────────────────────── */
.btn.gesperrt { opacity: .55; }
.aao-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .35rem 0 .5rem; }
.aao-kopf { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-right: .15rem; }
.aao-fenster { width: min(980px, 96vw); }
.aao-cols { grid-template-columns: 17rem 1fr; min-height: 0; }
.aao-liste { display: flex; flex-direction: column; gap: .35rem; overflow-y: auto; }
.aao-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: .4rem .55rem; cursor: pointer; color: inherit; }
.aao-eintrag.an { border-color: var(--accent, #f5c542); }
.aao-editor { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.aao-zeile { display: flex; align-items: center; gap: .35rem; }
.aao-zeile select { flex: 1; min-width: 0; }
.aao-anzahl { min-width: 1.6rem; text-align: center; font-weight: 700; }
.aao-arten { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 .25rem; }
.aao-treffer { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); max-height: 14rem; overflow-y: auto; }
.aao-treffer-zeile { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; padding: .3rem .5rem; cursor: pointer; }
.aao-treffer-zeile:hover { background: rgba(255, 255, 255, .05); }
.aao-knoepfe { display: flex; gap: .5rem; margin-top: .4rem; }
@media (max-width: 720px) { .aao-cols { grid-template-columns: 1fr; } }
/* Müdigkeit der Mannschaft im Wachenfenster */
.chip.muede { background: #231d10; color: #e8c46a; border-color: #4a3b17; }
.chip.muede.stark { background: #2a1512; color: #f08a6e; border-color: #5a2a20; }
/* Laufbahn je Person (docs/18 Paket E1) */
.chip.rank { background: #1b2a3a; color: #8fc2e8; border-color: #244158; }
.chip.ehrung { background: #2f2618; color: #e8c46a; border-color: #4a3b1c; cursor: default; }
.chronik-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.chronik-liste li { padding: .35rem .5rem; background: #1b222c; border: 1px solid var(--line); border-radius: 4px; font-size: .8rem; }
.aao-taste { display: inline-block; font-size: .68rem; font-weight: 700; padding: 0 .3rem; margin-right: .3rem;
  border: 1px solid currentColor; border-radius: 3px; opacity: .8; }
.aao-kopfzeile { display: grid; grid-template-columns: 1fr 12rem; gap: .6rem; }

/* ── QA 24.09.2026: nichts quetschen, nichts heraus laufen lassen ────────────
   Knöpfe und Chips umbrechen nicht in sich ("Fahrzeug / kaufen"); stattdessen
   brechen ihre Leisten in die nächste Zeile um. Lange Namen kürzen mit "…" und
   stehen vollständig im Titel. */
.btn, .chip { white-space: nowrap; }
.chip { flex-shrink: 0; }
.station-actions, .raum-knoepfe, .aao-leiste, .ausbau-kopf, .ueh-leiste, .sortwahl, .reiter { flex-wrap: wrap; }
.wagenzeile, .crewzeile { flex-wrap: wrap; row-gap: .25rem; }
.wagenzeile > .chip, .crewzeile > .chip { margin-left: 0; }

/* Kopfleiste: nichts bricht um. Wird es eng, fällt zuerst weg, was auch im Titel
   steht — das Wort neben dem Verbindungspunkt, dann der Wochentag. */
.topbar > *, .kopf-mehr > * { flex-shrink: 0; }
.topbar > .spacer, .kopf-mehr > .spacer { flex-shrink: 1; min-width: 0; }
.topbar > .level, .kopf-mehr > .level { flex-shrink: 1; min-width: 70px; }
.clock, .stat-label, .stat-value, .kreis-name, .conn, .modus-knopf { white-space: nowrap; }
.kreis-name { display: block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1440px) {
  .topbar { gap: .6rem; }
  .modus-knopf { padding: 0 .6rem; }
  .conn-text { display: none; }
  .conn-punkt { font-size: .9rem; }
  .topbar .btn.tiny { padding: 0 .7rem; }
  .topbar .conn { padding: 0; }
  .clock-day, .clock-ratio { display: none; }
}
@media (max-width: 1200px) {
  .shell { grid-template-columns: 280px minmax(0, 1fr) 300px; }
  .clock-day, .topbar-trenner, .clock-ratio, .saison-chip, .weather-chip { display: none; }
  .topbar { gap: .5rem; }
  .topbar .btn.tiny { padding: 0 .55rem; }
  .brand { font-size: 1.3rem; }
  .kreis-name { max-width: 8rem; }
  .modus-knopf { font-size: .8rem; padding: 0 .45rem; }
}

/* Wachenkarten zum Einklappen */
.wache-kopf { align-items: center; }
.wache-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klapp {
  flex-shrink: 0; width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 4px; color: var(--muted);
  font-size: .8rem; line-height: 1; cursor: pointer; transition: transform .12s ease;
}
.klapp:hover { color: var(--text); border-color: var(--line-2); }
.klapp.zu { transform: rotate(-90deg); }
.wache-karte.zu { gap: .35rem; padding-top: .45rem; padding-bottom: .45rem; }
.statusleiste { display: flex; flex-wrap: wrap; gap: .25rem; padding-left: 1.8rem; }
.statusleiste .fms { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .72rem; }
.statusleiste .fms.picked { border-color: var(--gelb); }
.klapp-alle { min-width: 1.8rem; }
.reiter-knopf.nachbar { border-style: dashed; }
.link-hinweis { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .5rem 1rem; background: #2a2412; border-bottom: 1px solid #5a4a17; color: #f3e2a6; font-size: .84rem; }
.link-hinweis span { flex: 1 1 24rem; min-width: 0; }
.besatzung-raster { display: grid; grid-template-columns: auto 7rem; gap: .5rem .8rem; align-items: center; }

/* Betreuungsstelle und Behandlungsplatz in der rechten Spalte */
.raum-karte.art3 { border-left-color: #3fb68b; }
.raum-karte.art4 { border-left-color: #ff8fa3; }
.platz-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: .3rem; margin: .35rem 0; }
.platz-zahlen > div { background: #19222c; border: 1px solid var(--line); border-radius: 6px; padding: .25rem .4rem; display: flex; flex-direction: column; }
.platz-zahlen b { font-family: var(--mono); font-size: .95rem; }
.platz-zahlen span { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; }
.raum-sub.warnend, .warnend { color: #e8c46a; }
/* Räumung eines Abschnitts */
.ea-raeumung { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; color: var(--muted); margin: .3rem 0; }
.raeum-balken { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.raeum-balken > div { height: 100%; background: #3fb68b; transition: width .4s ease; }
.reiter-zahl { font-size: .7rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 8px; background: #1d2833; color: var(--muted); }
.wachenkopf.ueberoertlich { color: #9ecbe6; }

/* Funkzeile im Dock: das Eingabefeld gibt nach, nicht der Rand. Bei schmaler
   Karte fällt die Beschriftung weg — das Feld sagt es selbst ("Funkspruch …"). */
.dock-kopf .dock-tab { flex-shrink: 0; white-space: nowrap; }
.funk-senden { min-width: 0; }
.dock-kopf > .spacer { display: none; }
.funk-senden label { white-space: nowrap; }
@media (max-width: 1200px) { .funk-senden label { display: none; } }

/* Fahrzeugzeilen im Einsatzfenster: Rufname und Wache geben nach und kürzen mit
   "…", Entfernung, Stärke und Zustand bleiben ganz ("3,2 / km" war zweizeilig). */
.pickrow > * { flex-shrink: 0; }
.pickrow > .vehicle-call, .pickrow > .vehicle-wache {
  flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pickrow > .vehicle-call { min-width: 4rem; }
.entfernung { white-space: nowrap; }
.wachenkopf { gap: .6rem; }
.wachenkopf > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wachenkopf > .entfernung { flex-shrink: 0; }
.klinik-body { padding-top: .4rem; }
.chip.schule { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* BR-Zeilen im TEL-Fenster: "für Feuerwehr" stand zweizeilig neben langen Namen. */
.tel-br-kopf { flex-wrap: wrap; row-gap: .1rem; }
.tel-br-kopf > b { flex: 1 1 0; min-width: 0; }
.tel-br-kopf > .spacer { display: none; }
.tel-br-kopf > .leise { order: 3; flex-basis: 100%; }

/* ── Geführter Einstieg (Szenario-System, Stufe 1) ───────────────────────
   Die Leiste liegt über der Karte, unter den Ebenen. Worauf der Hinweis zeigt,
   trägt data-anker und bekommt einen pulsierenden Rahmen. */
.szenario-leiste {
  position: absolute; top: 56px; left: 12px; z-index: 6; width: min(380px, calc(100% - 24px));
  background: rgba(16, 22, 29, .96); border: 1px solid var(--gelb); border-radius: var(--radius);
  padding: .55rem .7rem; font-size: .85rem; line-height: 1.45; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.szenario-leiste.still { padding: .35rem .6rem; }
.szenario-leiste.geschafft { border-color: var(--ok); }
.szenario-kopf { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.szenario-marke { font-family: var(--cond); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gelb); }
.szenario-leiste.geschafft .szenario-marke { color: var(--ok); }
.szenario-titel { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szenario-schritt { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.szenario-briefing { margin: .45rem 0 0; color: var(--muted); }
.szenario-hinweis { margin: .45rem 0 0; color: var(--text); }
.szenario-fuss { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.anker-an { outline: 2px solid var(--gelb); outline-offset: 2px; animation: anker-puls 1.6s ease-in-out infinite; }
@keyframes anker-puls {
  0%, 100% { outline-color: var(--gelb); }
  50% { outline-color: rgba(244, 197, 66, .25); }
}
.hilfe-szenario {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem 0; border-top: 1px solid var(--line);
}

/* Einsatzart-Editor (Spielerseite und Backoffice-Vorschau): Beschriftung über dem Feld. */
.ea-feld { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 14rem; margin: .4rem 0; font-size: .78rem; color: var(--muted); }
.ea-feld input, .ea-feld select, .ea-feld textarea, .ea-eingabe {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .45rem .6rem; font: inherit; font-size: .85rem; width: 100%; box-sizing: border-box;
}
.ea-feld input:focus, .ea-feld select:focus, .ea-feld textarea:focus, .ea-eingabe:focus { outline: 1px solid var(--accent); }
.ea-check { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; font-size: .8rem;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }