/* 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: 100vh; 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: 100vh;
  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;
}

.conn { font-size: .75rem; }
.conn.on { color: var(--ok); }
.conn.off { color: var(--fire); }

/* ── 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; }

/* 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; }

.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 {
  display: flex; align-items: center; 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; }
/* Dieselben Farben wie auf der Karte (js/map.js BRANCH_COLORS) - eine Legende,
   die eine andere Farbe zeigt als die Karte, ist schlimmer als keine. */
.legend-swatch.fire { background: #e23b34; }
.legend-swatch.ems { background: #ff7a70; }
.legend-swatch.police { background: #3ddc84; }
.legend-swatch.thw { background: #2f7de1; }
.legend-swatch.hiorg { background: #f2f4f7; }
.legend-swatch.katschutz { background: #f08a24; }

/* ── 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;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  width: min(560px, 92vw); max-height: 84vh; 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); }

.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; }
.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); }

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

.cover { display: grid; place-content: center; min-height: 100vh; padding: 2rem 1rem;
         overflow: auto; }
.cover-card { background: var(--panel); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 1.6rem; width: 360px; }
.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; 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; }

/* 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; }
.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: 60vh; overflow-y: auto; padding-right: .4rem; }
.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; }