/* ════════════════════════════════════════════════════════════════
   Streckenspiegel — Stellwerk-Optik
   ════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --chrome-bg:   #d6d2e8;   /* Lavendel-Fensterchrome   */
  --chrome-dark: #b8b2d4;
  --chrome-line: #8f88b0;
  --panel-bg:    #000000;   /* Spiegelfläche            */
  --track-free:  #b8b8c8;   /* freies Gleis             */
  --track-route: #00d020;   /* eingestellte Fahrstraße  */
  --track-done:  #4a4a55;   /* zurückgelegt             */
  --track-occ:   #ff2020;   /* besetzt / Zugposition    */
  --label-white: #e8e8f0;
  --label-red:   #ff4040;
  --num-blue:    #2244ee;
  --num-bg:      #1a2acc;
  --hl-yellow:   #ffd000;
  --hl-magenta:  #ff40ff;
}

html, body { height: 100%; }

body {
  font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
  font-size: 12px;
  background: #6e6a80;
  padding: 10px;
  height: 100vh;
  overflow: hidden;
}

/* ─── Fenster ─────────────────────────────────────────────────── */

.app-window {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--chrome-bg);
  border: 2px solid #f4f2fc;
  border-right-color: #5a5478;
  border-bottom-color: #5a5478;
  box-shadow: 4px 6px 18px rgba(0,0,0,0.45);
}

.titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, #2a2a8a, #6868c0);
  color: #fff;
  padding: 3px 6px;
  font-size: 11px;
  user-select: none;
}
.titlebar-icon { font-size: 12px; }
.titlebar-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.titlebar-buttons span {
  display: inline-block; width: 16px; height: 14px; margin-left: 2px;
  background: var(--chrome-bg); color: #000; text-align: center;
  font-size: 10px; line-height: 14px;
  border: 1px solid #fff; border-right-color: #555; border-bottom-color: #555;
}

.menubar {
  display: flex; gap: 8px;
  padding: 2px 6px;
  border-bottom: 1px solid var(--chrome-line);
  user-select: none;
  position: relative;
  z-index: 60;
}
.menu { position: relative; }
.menu-title { cursor: default; display: inline-block; padding: 1px 7px; }
.menu-title:hover, .menu.open .menu-title { background: #c0baf0; }
.menu-drop {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  background: var(--chrome-bg);
  border: 2px solid #f4f2fc; border-right-color: #5a5478; border-bottom-color: #5a5478;
  box-shadow: 3px 4px 12px rgba(0,0,0,0.4);
  padding: 2px;
}
.menu.open .menu-drop { display: block; }
.menu-drop button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  width: 100%;
  background: none; border: none;
  font-family: inherit; font-size: 11px; color: #111;
  padding: 3px 10px 3px 22px;
  cursor: pointer; text-align: left;
  position: relative;
}
.menu-drop button:hover { background: #2a2a8a; color: #fff; }
.menu-drop button.checked::before { content: '✓'; position: absolute; left: 7px; }
.menu-drop button kbd { font-family: inherit; font-size: 10px; color: #777; }
.menu-drop button:hover kbd { color: #cdd6ff; }
.menu-sep { border-top: 1px solid var(--chrome-line); margin: 3px 4px; }

/* ─── Toolbar ─────────────────────────────────────────────────── */

.toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-bottom: 2px solid var(--chrome-line);
  flex-wrap: wrap;
}

.tb-btn {
  display: flex; flex-direction: column; align-items: center;
  font-size: 14px;
  background: var(--chrome-bg);
  border: 1px solid var(--chrome-bg);
  padding: 2px 6px;
  cursor: pointer;
  color: #222;
}
.tb-btn small { font-size: 9px; }
.tb-btn:hover { border-color: #fff #555 #555 #fff; }
.tb-btn:active { border-color: #555 #fff #fff #555; }

.tb-sep { width: 1px; height: 30px; background: var(--chrome-line); margin: 0 4px; }
.tb-spacer { flex: 1; }
.tb-brand { font-weight: bold; letter-spacing: 1px; color: #3a3460; font-size: 11px; }

.tb-search { display: flex; align-items: center; gap: 5px; }
.tb-search label { font-size: 11px; }
.tb-search input {
  font-family: inherit; font-size: 12px;
  border: 1px solid; border-color: #555 #fff #fff #555;
  background: #fff;
  padding: 2px 5px;
}
.tb-search input[type="text"] { width: 70px; }

.tb-search select {
  font-family: inherit; font-size: 11px;
  border: 1px solid; border-color: #555 #fff #fff #555;
  background: #fff;
  padding: 2px 3px;
  max-width: 230px;
}
#sectPrev, #sectNext { padding: 2px 6px; }

.cat-filters { display: inline-flex; gap: 2px; margin-left: 6px; }
.cat-btn {
  font-family: inherit; font-size: 10px; font-weight: bold;
  padding: 2px 7px;
  background: var(--chrome-bg);
  border: 1px solid; border-color: #fff #555 #555 #fff;
  cursor: pointer;
  color: #777;
}
.cat-btn.active {
  border-color: #555 #fff #fff #555;
  background: #b8b2d4;
  color: #1a1a8a;
}

.tb-go {
  font-family: inherit; font-size: 11px; font-weight: bold;
  background: var(--chrome-dark);
  border: 1px solid; border-color: #fff #555 #555 #fff;
  padding: 3px 10px;
  cursor: pointer;
}
.tb-go:active { border-color: #555 #fff #fff #555; }

.tb-check { display: flex; align-items: center; gap: 3px; font-size: 11px; }

.tb-traffic-status { font-size: 10px; color: #3a3460; min-width: 70px; }
.tb-traffic-status.loading { color: #a05000; }

/* ─── Suchergebnis-Leiste ─────────────────────────────────────── */

.result-strip { border-bottom: 1px solid var(--chrome-line); }
.result-strip:empty { display: none; }
.result-strip .hint { padding: 4px 10px; font-size: 11px; }
.result-strip .hint.error { color: #a00000; font-weight: bold; }

.result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px;
  cursor: pointer;
  border-bottom: 1px dotted var(--chrome-line);
}
.result-item:hover { background: #c0baf0; }
.result-item b { color: #1a1a8a; }
.result-item .ri-route { color: #333; }
.result-item .ri-go { margin-left: auto; font-weight: bold; color: #1a1a8a; }

/* ─── Hauptbereich ────────────────────────────────────────────── */

.main-area {
  flex: 1;
  display: flex;
  min-height: 0;
  gap: 0;
}

.mirror-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-bg);
  border: 2px solid; border-color: #555 #fff #fff #555;
  margin: 4px;
}

.mirror-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 10px;
  background: #000;
  border-bottom: 1px solid #222;
}
.mirror-id { color: var(--hl-yellow); font-weight: bold; font-size: 12px; letter-spacing: 1px; }
.mirror-clock { color: var(--label-white); font-size: 11px; font-family: "Courier New", monospace; }

.zoom-ctl { display: flex; align-items: center; gap: 3px; }
.zoom-ctl button {
  font-family: inherit; font-size: 11px;
  background: #222; color: #ccc;
  border: 1px solid #444;
  padding: 0 7px; height: 17px;
  cursor: pointer;
}
.zoom-ctl button:hover { background: #333; color: #fff; }
.zoom-ctl #zoomLbl { color: #888; font-size: 10px; min-width: 34px; text-align: center; }

/* Replay-Steuerung im Spiegelkopf */
.replay-ctl { display: flex; align-items: center; gap: 4px; }
.replay-ctl .rp-label { color: var(--hl-yellow); font-size: 10px; font-weight: bold; letter-spacing: 1px; }
.replay-ctl button, .replay-ctl select {
  font-family: inherit; font-size: 11px;
  background: #221c00; color: var(--hl-yellow);
  border: 1px solid #665200;
  height: 17px; padding: 0 5px;
  cursor: pointer;
}
.replay-ctl button:hover { background: #3a3000; }
.replay-ctl input[type="range"] { width: 140px; height: 12px; accent-color: #ffd000; }
.mirror-clock.replay { color: var(--hl-yellow); font-weight: bold; }
#monitorExit { display: none; color: var(--hl-yellow); }
body.monitor #monitorExit { display: inline-block; }

.mirror-scroll {
  flex: 1;
  overflow: auto;
  position: relative;
}

.mirror-empty {
  color: #00c020;
  font-size: 13px;
  padding: 30px;
}
.mirror-empty pre { font-family: "Courier New", monospace; line-height: 1.5; }

/* Diagramm, kein Text zum Markieren — verhindert das Selektieren beim Ziehen/Pannen */
#mirrorSvg { display: block; user-select: none; -webkit-user-select: none; }

.mirror-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 3px 10px;
  background: #000;
  border-top: 1px solid #222;
  color: #999;
  font-size: 10px;
}
.legend { display: flex; align-items: center; gap: 4px; }
.lg { display: inline-block; width: 18px; height: 3px; }
.lg-green  { background: var(--track-route); }
.lg-red    { background: var(--track-occ); }
.lg-gray   { background: var(--track-done); }
.lg-cancel { background: repeating-linear-gradient(90deg, var(--label-red) 0 3px, transparent 3px 6px); }
.lg-trainbox {
  display: inline-block;
  background: var(--num-bg);
  color: #fff;
  font-style: normal; font-size: 8px; font-weight: bold;
  padding: 1px 4px;
  border: 1px solid #fff;
  margin-right: 1px;
}
.lgc-fv  { background: #1a2acc; }
.lgc-rv  { background: #00737a; }
.lgc-sb  { background: #1f7d2f; }
.lgc-sev { background: #b35900; }

/* Monitor-Modus: nur der Spiegel, Vollbild */
body.monitor { padding: 0; background: #000; }
body.monitor .app-window { border: none; box-shadow: none; background: #000; }
body.monitor .titlebar, body.monitor .menubar, body.monitor .toolbar,
body.monitor .result-strip, body.monitor .lupe { display: none; }
body.monitor .mirror-wrap { margin: 0; border: none; }

.footer-status { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #ccc; }
.status-dot {
  display: inline-block; width: 9px; height: 9px;
  background: #00d020;
  animation: blink 1.4s infinite;
}
@keyframes blink { 0%,55% { opacity: 1; } 56%,100% { opacity: 0.25; } }

/* ─── SVG-Inhalte ─────────────────────────────────────────────── */

#mirrorSvg text {
  font-family: Verdana, sans-serif;
  fill: var(--label-white);
}

.st-name        { font-size: 11px; fill: var(--label-white); }
.st-name-major  { font-weight: bold; }
.st-underline   { stroke: var(--label-white); stroke-width: 1; }
.st-pass        { font-size: 10px; fill: #9a9ab0; }                /* Durchfahrt ohne Halt */
.st-pass-ul     { stroke: #9a9ab0; stroke-dasharray: 3 2; }
.st-ops         { fill: #c87bff; }                                 /* Üst/Abzw/Bbf — violett wie im Original */
.st-ops-ul      { stroke: #c87bff; stroke-dasharray: none; }
.st-tick-ops    { stroke: #8a55b0; }
/* Zwischenhalte: Label nur bei Hover */
.pass-stn text, .pass-stn line.st-underline { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.pass-stn:hover text, .pass-stn:hover line.st-underline { opacity: 1; }
.st-cancelled   { fill: var(--label-red); text-decoration: line-through; }
.st-time        { font-size: 9px;  fill: #8888a0; }
.st-time-act    { font-size: 9px;  fill: #00d020; }
.st-time-late   { font-size: 9px;  fill: var(--label-red); }
.st-platform    { font-size: 8px;  fill: #c8a000; }
.st-km          { font-size: 8px;  fill: var(--label-red); }

.track-free  { stroke: var(--track-free);  stroke-width: 2; fill: none; }
.track-route { stroke: var(--track-route); stroke-width: 2.5; fill: none; }
.track-done  { stroke: var(--track-done);  stroke-width: 2.5; fill: none; }
.track-occ   { stroke: var(--track-occ);   stroke-width: 3; fill: none;
               animation: occblink 1s steps(1) infinite; }
@keyframes occblink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.35; } }

.st-tick     { stroke: var(--track-free); stroke-width: 2; }
.st-tick-done{ stroke: var(--track-done); }
.st-node     { fill: #000; stroke: var(--track-free); stroke-width: 1.5; }
.st-node-pass{ stroke: var(--track-done); }
.st-node-curr{ fill: var(--track-occ); stroke: var(--track-occ); }

.dir-arrow   { fill: var(--track-route); }
.dir-arrow-done { fill: var(--track-done); }
.trn-dir-arrow  { fill: #e8c44a; opacity: 0.9; }

/* Zugnummern-Schild */
.train-box     { fill: var(--num-bg); stroke: #fff; stroke-width: 0.8; }
.train-num     { font-size: 11px; font-weight: bold; fill: #fff; }
.delay-box     { fill: #fff; }
.delay-num     { font-size: 10px; font-weight: bold; fill: var(--num-bg); }
.delay-num-late{ fill: #cc0000; }

.hoa-text { font-size: 10px; fill: var(--label-red); font-weight: bold; }

/* Fremde Züge auf der Strecke (kleine klickbare Schilder) */
.other-train     { cursor: pointer; }
.other-box       { fill: var(--num-bg); stroke: #aab; stroke-width: 0.6; }
.other-train:hover .other-box { stroke: #fff; stroke-width: 1.2; }
.other-num       { font-size: 9px; font-weight: bold; fill: #fff; pointer-events: none; }
.other-delay-box { fill: #fff; }
.other-delay     { font-size: 8px; font-weight: bold; fill: var(--num-bg); pointer-events: none; }
.other-delay-late{ fill: #cc0000; }
.other-cat       { font-size: 7px; fill: #9ab; pointer-events: none; }

/* Abschnittsansicht (Gleisplan) */
.osm-svc        { stroke: #4a4a58; stroke-width: 1; fill: none; }   /* Abstell-/Rangiergleise */
.osm-platform   { fill: #23232e; stroke: #3a3a48; stroke-width: 0.6; }

/* Blockabschnitte */
.berth-tick     { stroke: #565a72; stroke-width: 1; }
.blk-conflict   { animation: conflictblink 0.45s steps(1) infinite !important; }
@keyframes conflictblink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0.15; } }

/* Gattungsfarben der Zugschilder (FV blau, RV petrol, S-Bahn grün) */
.grp-fv    { fill: #1a2acc; }
.grp-rv    { fill: #00737a; }
.grp-sb    { fill: #1f7d2f; }
.grp-sev   { fill: #b35900; }
.grp-other { fill: #b85c00; }
.cat-badge.grp-fv    { background: #1a2acc; }
.cat-badge.grp-rv    { background: #00737a; }
.cat-badge.grp-sb    { background: #1f7d2f; }
.cat-badge.grp-sev   { background: #b35900; }
.cat-badge.grp-other { background: #b85c00; }

/* Chip-Markierungen: Gleiswechsel, geschätzte Position, Kreuzungs-Gegenzug */
.chip-glw      { font-size: 8px; font-weight: bold; fill: #ffd400; }
.chip-est      { font-size: 9px; fill: #9a9ab0; }
.other-cat-sev { fill: #ff9d3c; font-weight: bold; }
.glw-tag       { color: #ffd400; font-size: 8px; font-weight: bold; border: 1px solid #ffd400; padding: 0 2px; }
.chip-cross .other-box {
  stroke: #ffd400; stroke-width: 1.6;
  animation: conflictblink 0.9s steps(1) infinite;
}

/* Wagenreihung */
.coach-box   { stroke: #888; stroke-width: 0.6; }
.coach-box.coach-2    { fill: #2a4a6a; }
.coach-box.coach-1    { fill: #8a7a00; }
.coach-box.coach-loco { fill: #555; }
.coach-sec   { font-size: 7px; fill: #c8a000; }
.coach-label { font-size: 8px; fill: #777; }

.hoa-small { font-size: 9px; font-weight: normal; }
.sec-track      { stroke: var(--track-free); stroke-width: 1.6; fill: none; }
.sec-track-occ  { stroke: var(--track-occ); stroke-width: 3; fill: none; }
.sec-track-own  { stroke: var(--track-occ); stroke-width: 3.5; fill: none; }
.sec-gl-label   { font-size: 9px; fill: #c8a000; }
.sec-vn         { font-size: 10px; fill: #00d020; }
.sec-vn-box     { fill: none; stroke: #00d020; stroke-width: 1; }
.st-clickable   { cursor: pointer; }
.st-clickable:hover { fill: var(--hl-yellow); }

/* ─── Zuglupe (Seitenpanel) ───────────────────────────────────── */

.lupe {
  width: 290px;
  display: flex;
  flex-direction: column;
  margin: 4px 4px 4px 0;
  border: 2px solid; border-color: #555 #fff #fff #555;
  background: #000;
  min-height: 0;
}

.lupe-title {
  background: linear-gradient(90deg, #2a2a8a, #6868c0);
  color: #fff;
  font-size: 11px; font-weight: bold;
  padding: 3px 8px;
}

.lupe-body { flex: 1; overflow: auto; padding: 8px; color: var(--label-white); }
.lupe-empty { color: #777; padding: 10px 4px; }

.lupe-train { color: var(--hl-yellow); font-size: 15px; font-weight: bold; }
.lupe-trainnr { color: #aaa; font-size: 11px; font-weight: normal; }
/* Auslastungsbalken (Vendo, 1./2. Klasse) */
.ausl-row { display: flex; align-items: center; gap: 6px; font-size: 10px; padding: 1px 2px; }
.ausl-lab { width: 34px; color: #aab; }
.ausl-bar { display: inline-flex; gap: 2px; }
.ausl-seg { width: 12px; height: 8px; background: #2a2a3a; border: 1px solid #444; }
.ausl-seg.s1 { background: #2aa845; border-color: #2aa845; }
.ausl-seg.s2 { background: #9ec02a; border-color: #9ec02a; }
.ausl-seg.s3 { background: #e0902a; border-color: #e0902a; }
.ausl-seg.s4 { background: #d8402a; border-color: #d8402a; }
.ausl-txt { color: #ccd; }
/* Wagenreihung (Wagenstandsband) */
.wr-svg { width: 100%; height: auto; display: block; margin: 2px 0 0; }
.wr-1   { fill: #d8b24a; stroke: #8a6d1e; stroke-width: 0.5; }
.wr-12  { fill: #b9a86a; stroke: #7a6a30; stroke-width: 0.5; }
.wr-2   { fill: #4a6a8a; stroke: #2a4360; stroke-width: 0.5; }
.wr-cab { stroke: #000; stroke-width: 1.2; }
.wr-dining { fill: #c0392b; }
.wr-num  { font-size: 7px; fill: #fff; font-family: "Lucida Console", monospace; }
.wr-sect { font-size: 7px; fill: #9aa3bb; font-family: "Lucida Console", monospace; }
.wr-sect-line { stroke: #33394d; stroke-width: 0.5; }
.wr-legend { font-size: 9px; color: #9aa3bb; margin: 1px 2px 2px; }
.wr-lg { display: inline-block; width: 9px; height: 8px; vertical-align: middle; margin: 0 3px 0 7px; border: 1px solid #222; }
/* Flügelung: Trennstelle + Zugteil-Plaketten im Band */
.wr-split { stroke: #e0a423; stroke-width: 1; stroke-dasharray: 2 1.6; }
.wr-badge { fill: #2a3142; stroke: #5a647e; stroke-width: 0.6; }
.wr-badge-own { fill: #e0a423; stroke: #b3801a; }
.wr-badge-t { font-size: 7px; fill: #cfd6e6; font-family: "Lucida Console", monospace; font-weight: bold; }
.wr-badge-t-own { fill: #1b1b1b; }
/* Zugteil-Liste unter dem Band */
.wr-parts { margin: 1px 2px 2px; font-size: 10px; color: #b6bdce; }
.wr-part { display: flex; align-items: center; gap: 4px; padding: 1px 0; white-space: nowrap; }
.wr-part-own { color: #f0d9a0; }
.wr-pn { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%; background: #2a3142; border: 1px solid #5a647e; font-size: 8px; font-weight: bold; flex: none; }
.wr-pn-own { background: #e0a423; border-color: #b3801a; color: #1b1b1b; }
.wr-pl { color: #cfd6e6; font-weight: bold; }
.wr-part-own .wr-pl { color: #f0d9a0; }
.wr-parr { color: #7a8197; }
.wr-dir  { color: #9ab0cc; font-size: 11px; margin: 0 2px; }
.wr-dir-arr { stroke: #9ab0cc; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wr-dir-lbl { font-size: 7.5px; fill: #7a8a9a; font-family: "Lucida Console", monospace; }
.wr-pown { color: #e0a423; font-weight: bold; margin-left: 2px; }
.wr-part-link { cursor: pointer; }
.wr-part-link:hover { background: #1c2433; }
.wr-popen { color: #7a8197; margin-left: auto; }
.wr-part-link:hover .wr-popen { color: #cfd6e6; }
/* Zugbezogene Meldungen (Vendo) */
.vm-row { font-size: 10px; line-height: 1.3; padding: 1px 2px; display: flex; gap: 5px; align-items: baseline; }
.vm-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; background: #7a8197; }
.vm-hoch .vm-dot { background: #e0a423; }
.vm-hoch .vm-txt { color: #f0d9a0; }
.vm-info .vm-txt { color: #9aa3bb; }
/* Zugmeldungen — zusammengeführte Quellen (RIS / IRIS / bahn.de) */
.msg-row  { font-size: 10px; color: var(--label-white); margin: 2px 0; display: flex; align-items: baseline; gap: 4px; }
.msg-txt  { flex: 1; }
.msg-src  { flex: none; font-size: 9px; color: #5a6475; white-space: nowrap; }
.msg-hoch .msg-txt { color: #f0d9a0; }
.msg-info .msg-txt { color: #9aa3bb; }
.msg-note .msg-txt { color: var(--label-red); }
/* Störungslage auf der Route (RIS + strecken-info) */
.stl-row   { display: flex; align-items: center; gap: 6px; font-size: 10px; padding: 2px 2px; border-bottom: 1px solid #1c1c2a; }
.stl-dot   { width: 7px; height: 7px; border-radius: 50%; background: #666; flex: none; }
.stl-ahead .stl-dot { background: #e0902a; }
.stl-past  { opacity: 0.55; }
.stl-past .stl-dot  { background: #556; }
.stl-cause { color: #e0c060; flex: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-where { color: #9aa3bb; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-src   { color: #6a7488; font-size: 8px; flex: none; }
/* Echte Bauwerke im Abschnitt (OSM): Tunnel hellblau, Brücken orange */
.sec-tunnel     { stroke: #6fb0e0; stroke-width: 3; opacity: 0.7; }
.sec-tunnel-end { stroke: #6fb0e0; stroke-width: 1; opacity: 0.8; }
.sec-tunnel-lbl { fill: #7ab8e8; font-size: 8px; font-family: "Lucida Console", monospace; }
.sec-bridge     { stroke: #e0902a; stroke-width: 1.4; fill: none; }
.sec-bridge-lbl { fill: #d8902a; font-size: 8px; font-family: "Lucida Console", monospace; }
.lupe-route { color: #ccc; font-size: 11px; margin: 3px 0 8px; }

.lupe-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 11px;
  margin-bottom: 10px;
}
.lupe-grid dt { color: #888; }
.lupe-grid dd { color: var(--label-white); }
.lupe-grid dd.ok    { color: #00d020; }
.lupe-grid dd.late  { color: var(--label-red); font-weight: bold; }
.lupe-grid dd.speed { color: var(--hl-magenta); }

.lupe-sect { color: var(--hl-yellow); font-size: 10px; letter-spacing: 1px;
             border-bottom: 1px solid #333; margin: 8px 0 4px; padding-bottom: 2px; }

.lupe-stops { width: 100%; border-collapse: collapse; font-size: 10px; }
.lupe-stops th {
  text-align: left; color: #888; font-weight: normal;
  border-bottom: 1px solid #333; padding: 2px 3px;
}
.lupe-stops td { padding: 2px 3px; border-bottom: 1px dotted #222; white-space: nowrap; }
.lupe-stops td.name { white-space: normal; }
.lupe-stops tr.passed  td { color: #666; }
.lupe-stops tr.current td { color: var(--track-occ); font-weight: bold; }
.lupe-stops tr.cancelled td { color: var(--label-red); text-decoration: line-through; }
.lupe-stops .d-ok   { color: #00d020; }
.lupe-stops .d-late { color: var(--label-red); }

.lupe-stops tr[data-jid] { cursor: pointer; }
.lupe-stops tr[data-jid]:hover td { background: #1a1a3a; }
.cat-badge {
  display: inline-block;
  background: var(--num-bg); color: #fff;
  font-size: 9px; font-weight: bold;
  padding: 0 4px;
  border: 1px solid #667;
}

.lupe-msg { font-size: 10px; color: var(--label-red); margin-top: 6px; line-height: 1.4; }

/* ─── Pünktlichkeitsstatistik (Zuglupe) ───────────────────────── */

.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4px; margin-bottom: 6px; text-align: center;
}
.stat-cell { background: #101020; border: 1px solid #2a2a44; padding: 3px 2px; }
.stat-val  { font-size: 13px; font-weight: bold; color: var(--label-white); }
.stat-val.ok   { color: #00d020; }
.stat-val.late { color: var(--label-red); }
.stat-lbl  { font-size: 8px; color: #888; letter-spacing: 0.4px; }
.stat-note { font-size: 9px; color: #666; margin-bottom: 6px; }

/* ─── Anschlüsse (Zuglupe) ────────────────────────────────────── */

.conn-row td { padding: 2px 3px; }
.conn-risk td { color: var(--label-red); }
.conn-risk .conn-state { font-weight: bold; animation: msgblink 0.9s steps(1) infinite; }
.conn-ok .conn-state   { color: #00d020; }

/* ─── Prognose-Darstellung im Zuglauf ─────────────────────────── */

.lupe-stops .prog-t { color: var(--hl-yellow); font-style: italic; }
.lupe-stops tr.passed .prog-t { color: #666; font-style: normal; }

/* ─── Bestätigte Ist-Meldungen (timeType REAL, sekundengenau) ──── */
.standort { font-size: 11px; line-height: 1.3; }
.cf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.cf-dot.cf-on   { background: #00d020; box-shadow: 0 0 4px #00d020; }
.cf-dot.cf-none { background: #777; }
.lupe-stops .dsec { font-weight: bold; }                    /* sekundengenaue Ist-Verspätung */
.lupe-stops .dsec::after { content: " ✓"; color: #00d020; font-weight: normal; font-size: 8px; }
.lupe-stops tr.confirm-here td.name { color: #00d020; font-weight: bold; }
.cf-here { color: #00d020; font-weight: bold; margin-right: 2px; }

/* Bedarfshalt + Gleiswechsel in der Zuglauf-Tabelle */
.bedarf { font-size: 8px; background: #4a3a1a; color: #e0a423; border: 1px solid #6a5a2a; border-radius: 2px; padding: 0 3px; margin-left: 5px; vertical-align: middle; }
.lupe-stops .glw-tag { font-size: 8px; background: #3a2a1a; color: var(--hl-yellow); border: 1px solid #6a4a2a; border-radius: 2px; padding: 0 2px; margin-left: 3px; }

/* #1 Zugverbund / Flügelung (RIS travelsWith) */
.cpl-row { font-size: 11px; color: #b6bdce; padding: 1px 2px; display: flex; align-items: baseline; gap: 4px; }
.cpl-link { cursor: pointer; }
.cpl-link:hover { background: #1c2433; }
.cpl-lab { color: #cfd6e6; font-weight: bold; }
.cpl-sep { color: #e0a423; margin-left: 4px; }
.cpl-link:hover .wr-popen { color: #cfd6e6; }
.uml-dir { color: #8a93a8; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.uml-conf { color: #8a7a4a; font-size: 9.5px; font-style: italic; }

/* #4 Zugstörungen (RIS) + Ausstattung */
.dz-row { font-size: 10px; color: #b6bdce; padding: 2px 2px 3px; line-height: 1.3; }
.dz-cause { color: #e0a423; font-weight: bold; }
.dz-aff { color: #9aa3bb; font-size: 9px; }
.dz-links { margin-top: 1px; }
.dz-link { color: #6ab0ff; text-decoration: none; font-size: 9px; margin-right: 8px; }
.dz-link:hover { text-decoration: underline; }
.attr-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 1px 2px 3px; }
.attr-chip { font-size: 9px; color: #b6bdce; background: #1c2433; border: 1px solid #33394d; border-radius: 3px; padding: 1px 5px; }

/* ─── Merkliste (Reiterleiste) ────────────────────────────────── */

.tab-strip {
  display: flex; gap: 2px; align-items: flex-end;
  background: var(--chrome-dark);
  padding: 2px 6px 0;
  min-height: 0;
}
.tab-strip:empty { display: none; }
.tab {
  display: flex; align-items: center; gap: 5px;
  background: #c6c2dc; border: 1px solid var(--chrome-line); border-bottom: none;
  padding: 2px 6px 3px 8px;
  font-size: 10px; cursor: pointer; user-select: none;
  max-width: 220px; white-space: nowrap;
}
.tab:hover { background: #dedaf0; }
.tab.active { background: #f0eefc; font-weight: bold; }
.tab .tab-delay {
  font-size: 9px; font-weight: bold; padding: 0 3px;
  background: #1a2acc; color: #fff;
}
.tab .tab-delay.late { background: var(--label-red); }
.tab .tab-close { color: #555; font-weight: bold; padding: 0 2px; }
.tab .tab-close:hover { color: #c00; }

/* ─── Meldungsfenster (Ereignisprotokoll) ─────────────────────── */

.msg-log {
  border-top: 2px solid var(--chrome-line);
  background: #050508;
  font-family: "Lucida Console", Monaco, monospace;
  flex-shrink: 0;
}
.msg-head {
  display: flex; align-items: center; gap: 8px;
  background: #14142a; color: var(--hl-yellow);
  font-size: 9px; letter-spacing: 1px;
  padding: 2px 8px;
}
.msg-spacer { flex: 1; }
.msg-head button {
  background: var(--chrome-bg); border: 1px solid var(--chrome-line);
  font-size: 9px; padding: 0 6px; cursor: pointer;
}
.msg-list { max-height: 92px; overflow-y: auto; padding: 2px 0; }
.msg-row {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 10px; color: #9a9ab0;
  padding: 1px 8px;
}
.msg-row .msg-time { color: #667; flex-shrink: 0; }
.msg-row.warn  { color: var(--hl-yellow); }
.msg-row.alert { color: var(--label-red); }

/* ─── Bildfahrplan (ZWL) ──────────────────────────────────────── */

.zwl-grid      { stroke: #1c1c30; stroke-width: 1; }
.zwl-grid-maj  { stroke: #2c2c48; stroke-width: 1; }
.zwl-st-line   { stroke: #22223a; stroke-width: 1; }
.zwl-time-lbl  { font-size: 9px; fill: #778; font-family: "Lucida Console", monospace; }
.zwl-now       { stroke: var(--track-occ); stroke-width: 1.2; stroke-dasharray: 7 4; }
.zwl-now-lbl   { font-size: 9px; fill: var(--track-occ); font-weight: bold; }
.zwl-plan      { stroke: #555566; stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.zwl-own       { stroke: var(--track-route); stroke-width: 2.4; fill: none; }
.zwl-own-late  { stroke: var(--track-occ); }
.zwl-line      { stroke-width: 1.4; fill: none; cursor: pointer; opacity: 0.85; }
.zwl-line:hover { stroke-width: 2.6; opacity: 1; }
.zwl-line.grp-fv { stroke: #4d6dff; }
.zwl-line.grp-rv { stroke: #00a8b4; }
.zwl-line.grp-sb { stroke: #2fb04a; }
.zwl-lbl  { font-size: 9px; cursor: pointer; }
.zwl-lbl.grp-fv { fill: #7d95ff; }
.zwl-lbl.grp-rv { fill: #2cc8d4; }
.zwl-lbl.grp-sb { fill: #55c870; }

/* ─── Störungsmarker (strecken-info.de) ───────────────────────── */

.si-tri  { fill: var(--hl-yellow); stroke: #806800; stroke-width: 0.8; }
.si-bang { font-size: 8px; font-weight: bold; fill: #000; }
/* Baustellen-Schild: grabender Arbeiter (schwarz auf gelbem Dreieck) */
.si-fig        { fill: #161616; stroke: none; }
.si-fig-stroke { stroke: #161616; stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hoa-small { font-size: 9px; }

/* ─── Störungsmarker (karte.bahn.de / RIS) — orange Raute ─────── */
.ris-dis-diamond { fill: #e06020; stroke: #7a3010; stroke-width: 0.8; }

/* ─── Sitzplan (vehicle-layouts) im Steckbrief ─────────────────── */
.steck-seatmap { margin: 4px 0 2px; }
.seat-map-svg { display: block; background: #12121e; border-radius: 3px; }
.seat-1st { fill: #b8901a; stroke: #5a4400; stroke-width: 0.4; }
.seat-2nd { fill: #1e4090; stroke: #0a1840; stroke-width: 0.4; }
.seat-map-label { font-size: 7px; fill: #334; font-family: inherit; }

/* ─── Gleisbelegungsplan (BFO) ────────────────────────────────── */

.bfo-st-name  { font-size: 12px; fill: var(--hl-yellow); font-weight: bold; letter-spacing: 1px; }
.bfo-gl-label { font-size: 10px; fill: var(--label-white); font-family: "Lucida Console", monospace; }
.bfo-row-line { stroke: #26263e; stroke-width: 1; }
.bfo-bar      { stroke: #000; stroke-width: 0.6; cursor: pointer; opacity: 0.92; }
.bfo-bar:hover { opacity: 1; stroke: #fff; }
.bfo-bar.grp-fv  { fill: #2a48d8; }
.bfo-bar.grp-rv  { fill: #00737a; }
.bfo-bar.grp-sb  { fill: #1f7d2f; }
.bfo-bar.grp-sev { fill: #b35900; }
.bfo-bar-own  { fill: var(--track-occ) !important; stroke: #fff; }
.bfo-conflict { animation: conflictblink 0.45s steps(1) infinite; stroke: var(--track-occ); stroke-width: 1.6; }
.bfo-bar-lbl  { font-size: 9px; fill: #fff; pointer-events: none; font-weight: bold; }
.bfo-now      { stroke: var(--track-occ); stroke-width: 1.2; stroke-dasharray: 6 4; }

/* ─── HAFAS-Radar (Live-Positionen) ───────────────────────────── */

.radar-bg      { fill: #04060a; }
.radar-rail     { stroke: #33415c; stroke-width: 1.1; fill: none; opacity: 0.9; }
.radar-city     { fill: #3a4658; stroke: #566276; stroke-width: 0.6; }
/* Radaransicht: Abschnitts-Bedienelemente ausblenden, nur Gattungsfilter + ORM-Layer zeigen */
body.radarview #sectPrev, body.radarview #sectNext, body.radarview #sectionSel,
body.radarview #spanSel, body.radarview #sectLoad { display: none; }
#ormLayer { display: none; }
body.radarview #ormLayer { display: inline-block; }
.radar-orm { opacity: 0.9; }
.radar-orm-attr { font-size: 8px; fill: #6a7488; font-family: "Lucida Console", monospace; }
.radar-city-lbl { font-size: 8.5px; fill: #5e6a82; font-family: "Lucida Console", monospace; }
.radar-route       { stroke: #2a3a5a; stroke-width: 1.4; fill: none; stroke-dasharray: 4 3; }
.radar-disruption  { stroke: #c05010; stroke-width: 2.5; fill: none; stroke-opacity: 0.75; pointer-events: none; }
.radar-stn     { fill: #1a1a30; stroke: #556; stroke-width: 1; }
.radar-stn-lbl { font-size: 9px; fill: #8890b0; font-family: "Lucida Console", monospace; }
.radar-head    { font-size: 11px; fill: var(--hl-yellow); font-family: "Lucida Console", monospace; letter-spacing: 1px; }
.radar-msg     { font-size: 12px; fill: #778; }
.radar-train   { pointer-events: auto; }
.radar-dot     { stroke: #fff; stroke-width: 0.8; }
.radar-dot-sel { stroke: var(--hl-yellow); stroke-width: 2; }
.radar-dot-ring { fill: none; stroke: var(--hl-yellow); stroke-width: 1.2; opacity: 0.85; }
.radar-dot.grp-fv  { fill: #2a3ad8; }
.radar-dot.grp-rv  { fill: #00a0aa; }
.radar-dot.grp-sb  { fill: #2aa845; }
.radar-chip        { stroke: #000; stroke-width: 0.5; opacity: 0.95; }
.radar-chip.grp-fv { fill: #1a2acc; }
.radar-chip.grp-rv { fill: #00737a; }
.radar-chip.grp-sb { fill: #1f7d2f; }
.radar-chip.radar-late { stroke: var(--label-red); stroke-width: 1.2; }
.radar-chip-txt    { font-size: 9px; fill: #fff; font-weight: bold; pointer-events: none; font-family: "Lucida Console", monospace; }

/* ─── Meldungsfilter ──────────────────────────────────────────── */

.msg-filter { display: inline-flex; gap: 2px; margin-left: 10px; }
.msg-filter button {
  background: #1a1a30; color: #889; border: 1px solid #333;
  font-size: 9px; padding: 0 5px; cursor: pointer;
}
.msg-filter button.active { background: var(--chrome-bg); color: #000; }

/* ─── Ursachencodes (Zuglupe + Zugschild) ─────────────────────── */

.cause-row  { font-size: 10px; color: var(--label-white); margin: 2px 0; }
.cause-code {
  display: inline-block; background: var(--hl-yellow); color: #000;
  font-weight: bold; font-size: 9px; padding: 0 4px; margin-right: 4px;
}
.chip-cause { fill: var(--hl-yellow); font-size: 9px; font-weight: bold; }
.iris-tl-time { flex: none; color: #7a8a9a; font-size: 9px; font-variant-numeric: tabular-nums; }

/* ─── Verspätungsverlauf-Sparkline ─────────────────────────────── */
.delay-chart { display: block; margin: 2px 0 4px; overflow: visible; }
.dl-zero-line { stroke: #3a3a5a; stroke-width: 1; }
.dl-line { stroke: #7a8a9a; stroke-width: 1.2; }
.dl-late-hi { fill: var(--label-red); }
.dl-late    { fill: #d4801a; }
.dl-ok      { fill: var(--track-green); }
.dl-zero    { fill: #4a4a6a; }

/* ─── Flügel-Visualisierung (Trennbahnhof im Gleisplan) ────────── */
.fgl-fork  { stroke: var(--hl-yellow); stroke-width: 1.5; }
.fgl-label { font-size: 8px; fill: var(--hl-yellow); }

/* ─── Historische Ø-Verspätung je Halt (Zuglauf) ──────────────── */

.lupe-stops td.name.hist-mid { text-decoration: underline dotted #b08800; text-underline-offset: 2px; }
.lupe-stops td.name.hist-bad { text-decoration: underline dotted var(--label-red); text-underline-offset: 2px; }

/* ─── ZWL-Störungsbänder ──────────────────────────────────────── */

.zwl-band { fill: rgba(255, 208, 0, 0.13); stroke: rgba(255, 208, 0, 0.45); stroke-width: 0.6; }
.zwl-band-lbl { font-size: 8px; fill: var(--hl-yellow); }

/* ─── Dialoge (Hilfe / Über) ──────────────────────────────────── */

.dlg-back {
  position: fixed; inset: 0;
  background: rgba(15, 15, 35, 0.45);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.dlg {
  width: 470px; max-width: 92vw;
  background: var(--chrome-bg);
  border: 2px solid #f4f2fc; border-right-color: #5a5478; border-bottom-color: #5a5478;
  box-shadow: 6px 8px 22px rgba(0,0,0,0.55);
}
.dlg .titlebar { cursor: default; }
.dlg-close { cursor: pointer; }
.dlg-body { padding: 12px 14px; font-size: 11px; color: #1a1a2a; max-height: 70vh; overflow: auto; }
.key-table { border-collapse: collapse; width: 100%; }
.key-table td { padding: 4px 6px; border-bottom: 1px dotted var(--chrome-line); vertical-align: top; }
.key-table td:first-child { width: 110px; white-space: nowrap; }
.key-table kbd, .dlg-body kbd {
  display: inline-block;
  background: #fff; border: 1px solid #888; border-bottom-width: 2px;
  padding: 0 5px; font-family: inherit; font-size: 10px;
}

/* ─── Störfallübersicht & Zuglaufsteckbrief ───────────────────── */

.dlg-wide { width: 640px; }
.dlg-body.dark { background: #000; color: var(--label-white); }

.stoer-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.stoer-table th {
  text-align: left; color: #888; font-weight: normal;
  border-bottom: 1px solid #333; padding: 3px 4px;
}
.stoer-table td { padding: 3px 4px; border-bottom: 1px dotted #222; vertical-align: top; }
.stoer-table td.name { color: var(--label-white); }
.stoer-cause { color: var(--hl-yellow); font-weight: bold; white-space: nowrap; }
.stoer-cause small { color: #9a9ab0; font-weight: normal; }
.stoer-src { color: #5a6a88; font-size: 9px; white-space: nowrap; }
.stoer-focus-bar { padding: 5px 6px 4px; font-size: 10px; color: #7a8a9a; border-bottom: 1px solid #333; }
.stoer-all-btn { background: none; border: 1px solid #445; color: #8aaacc; font-size: 10px; cursor: pointer; padding: 1px 6px; border-radius: 2px; }
.stoer-all-btn:hover { background: #1a2a3a; color: #aaccee; }
.stoer-detail { padding: 6px 6px 4px; font-size: 10px; color: #9a9ab0; border-top: 1px dotted #333; white-space: pre-wrap; }

.steck-abw { font-size: 10px; color: var(--hl-yellow); margin: 2px 0; }
.steck-glw { color: #ffd400; font-weight: bold; }
.steck-foot { margin-top: 10px; text-align: right; }
.iris-ts    { color: var(--hl-yellow); font-weight: bold; font-size: 11px; }
.iris-cause { color: #7a8a9a; font-size: 9px; }
.iris-ok    { color: #50c878; font-size: 10px; }
.iris-wait  { color: #5a6a7a; font-size: 10px; }

/* IRIS Halt-Nachrichten — Schweregrade */
.iris-cat-gross { color: var(--label-red);  font-weight: bold; }
.iris-cat-stoer { color: #e07830; font-weight: bold; }
.iris-cat-bau   { color: var(--hl-yellow); }
.iris-cat-info  { color: #7090b0; }

/* ─── Abfahrtstafel — Lagebild (lb-*) ───────────────────────────── */

/* Schweregrad-Farben als CSS-Variable (kaskadiert in Zeilen) */
.lb-sev-ok     { --sev: #2ec27e; }
.lb-sev-minor  { --sev: #e0c020; }
.lb-sev-major  { --sev: #e88020; }
.lb-sev-severe { --sev: #e84040; }
.lb-sev-early  { --sev: #4aa8e8; }
.lb-sev-cancel { --sev: #6a6a78; }

.lb-wrap {
  background: #0a0a12; color: #c8c8d8;
  font-family: 'Consolas', 'Courier New', monospace;
  padding-bottom: 24px;
}

/* ── Kopfzeile ───────────────────────────────────────────────────── */
.lb-top {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; background: #06060e;
  border-bottom: 1px solid #15153a;
}
.lb-title { display: flex; flex-direction: column; gap: 1px; }
.lb-name { color: var(--hl-yellow); font-size: 16px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.lb-sub  { font-size: 10px; color: #44445e; letter-spacing: 0.5px; }
.lb-filters { display: flex; gap: 4px; }
.lb-top .lb-seg:first-of-type { margin-left: auto; }
.lb-seg { display: flex; border: 1px solid #20203a; border-radius: 4px; overflow: hidden; }
.lb-tg { background: #0e0e1c; border: none; border-right: 1px solid #20203a; color: #55556e; padding: 4px 10px; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; cursor: pointer; }
.lb-tg:last-child { border-right: none; }
.lb-tg:hover { color: #9a9ab6; background: #15152a; }
.lb-tg-on { background: #1e1e44; color: #cfcfe6; }
.lb-chip {
  background: #10101f; border: 1px solid #20203a; color: #50506a;
  padding: 3px 10px; font-size: 10px; font-weight: bold; letter-spacing: 1px;
  border-radius: 3px; cursor: pointer;
}
.lb-chip:hover { border-color: #34345a; color: #8a8aa6; }
.lb-chip-on { background: #1a1a3e; border-color: #3a3a6a; color: #cfcfe6; }
.lb-clock { color: #34344e; font-size: 12px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }

/* ── Störungsbanner ──────────────────────────────────────────────── */
.lb-disr {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: #251600;
  border-bottom: 1px solid #3a2400; border-left: 3px solid #e88020;
  font-size: 11px; color: #e0b060;
}
.lb-disr-ic { font-size: 13px; }
.lb-disr-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Kennzahlen ──────────────────────────────────────────────────── */
.lb-kpis { display: flex; border-bottom: 1px solid #14142e; }
.lb-kpi {
  flex: 1; text-align: center; padding: 9px 4px;
  border-right: 1px solid #11112a;
}
.lb-kpi:last-child { border-right: none; }
.lb-kpi-val { font-size: 23px; font-weight: bold; color: var(--sev, #e8e8f4); line-height: 1; font-variant-numeric: tabular-nums; }
.lb-kpi-lbl { font-size: 9px; color: #45455e; letter-spacing: 0.5px; margin-top: 4px; text-transform: uppercase; }

/* ── Pünktlichkeits-Verteilung ───────────────────────────────────── */
.lb-dist { padding: 9px 14px; border-bottom: 1px solid #12122a; }
.lb-dist-bar {
  height: 10px; border-radius: 2px; overflow: hidden;
  display: flex; background: #14141e;
}
.lb-dist-seg { height: 100%; background: var(--sev); }
.lb-dist-legend { margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; color: #6a6a82; }
.lb-leg { display: inline-flex; align-items: center; gap: 5px; }
.lb-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--sev); display: inline-block; }

/* ── Verkehrsdichte-Leiste (60 min) ──────────────────────────────── */
.lb-ribbon-wrap { padding: 9px 14px 10px; border-bottom: 2px solid #12122a; }
.lb-ribbon-cap { font-size: 9px; color: #3a3a52; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.lb-ribbon {
  position: relative; height: 42px;
  background: linear-gradient(#0d0d1a, #080810);
  border: 1px solid #16162c; border-radius: 2px; overflow: hidden;
}
.lb-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #17172e; }
.lb-grid-lbl { position: absolute; bottom: 2px; left: 4px; font-size: 9px; color: #3a3a55; white-space: nowrap; }
.lb-now-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hl-yellow); box-shadow: 0 0 6px rgba(255,210,60,0.6); }
.lb-tick {
  position: absolute; top: 7px; bottom: 16px; width: 2px; margin-left: -1px;
  background: var(--sev); opacity: 0.85; border-radius: 1px;
}

/* ── Abfahrtsstrom ───────────────────────────────────────────────── */
.lb-stream { }
.lb-grp-h {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 14px; background: #07070f;
  border-top: 1px solid #14142a; border-bottom: 1px solid #14142a;
  font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: #6a6a88;
}
.lb-grp-n { color: #45455e; background: #12122a; border-radius: 9px; padding: 1px 8px; font-size: 10px; letter-spacing: 0; }

.lb-row {
  display: grid;
  grid-template-columns: 78px 94px 1fr 76px minmax(140px, 250px) 26px;
  align-items: center; column-gap: 10px;
  padding: 6px 14px; min-height: 44px;
  border-bottom: 1px solid #0e0e1a;
  border-left: 3px solid var(--sev, transparent);
  cursor: pointer;
}
.lb-row.lb-sev-minor  { background: rgba(224,192,32,0.035); }
.lb-row.lb-sev-major  { background: rgba(232,128,32,0.06); }
.lb-row.lb-sev-severe { background: rgba(232,64,64,0.07); }
.lb-row.lb-sev-cancel { opacity: 0.5; }
.lb-row:hover { background: #12122288; }

.lb-r-time { line-height: 1.15; }
.lb-r-act { font-size: 17px; font-weight: bold; color: #e8e8f4; font-variant-numeric: tabular-nums; }
.lb-r-sched { font-size: 11px; color: #5a5a72; text-decoration: line-through; }
.lb-r-ctd { font-size: 9px; color: #45455e; }

.lb-r-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lb-badge { font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 3px; white-space: nowrap; letter-spacing: 0.5px; }
.lb-r-zn { font-size: 9px; color: #45455e; }

.lb-r-mid { min-width: 0; }
.lb-r-dest { font-size: 14px; font-weight: bold; color: #d8d8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-r-via { font-size: 10px; color: #5a5a76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lb-strike { text-decoration: line-through; color: #555; }

.lb-r-plat { text-align: center; }
.lb-r-plat-no { font-size: 16px; font-weight: bold; color: #9a9ab2; line-height: 1.1; }
.lb-r-plat-sub { font-size: 8px; color: #45455e; text-transform: uppercase; letter-spacing: 0.5px; }
.lb-plat-chg .lb-r-plat-no { color: #e88020; }
.lb-plat-chg .lb-r-plat-sub { color: #a05818; }

.lb-r-delay { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.lb-delay-chip {
  font-size: 12px; font-weight: bold; color: var(--sev, #888);
  border: 1px solid var(--sev, #333); border-radius: 3px; padding: 1px 6px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lb-reason { font-size: 10px; color: #c89048; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lb-why { background: none; border: none; color: #6a6a90; font-size: 9px; padding: 1px 0; cursor: pointer; font-family: inherit; text-align: left; }
.lb-why:hover { color: #c89048; }

/* Merken-Stern */
.lb-star { background: none; border: none; color: #3a3a52; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; align-self: center; }
.lb-star:hover { color: #8a8aa6; }
.lb-star-on { color: var(--hl-yellow); }

/* Detail-Panel: Verspätungs-Herkunft + Meldungs-Frische */
.lb-detail { background: #0c0c18; border-bottom: 1px solid #14142a; border-left: 3px solid #2a2a4a; padding: 8px 14px 10px; }
.lb-detail-load { font-size: 11px; color: #5a5a74; }
.lb-detail-inner { display: flex; flex-direction: column; gap: 5px; }
.lb-trace-h { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #5a5a78; }
.lb-trace { width: 100%; height: 48px; background: linear-gradient(#0a0a14, #07070f); border: 1px solid #14142a; border-radius: 2px; }
.lb-trace-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #b0b0c8; }
.lb-trace-legend b { color: #e0a040; }
.lb-trace-now { color: #6a6a55; white-space: nowrap; }
.lb-fresh { font-size: 11px; color: #8a8aa4; }
.lb-fresh-ts { color: #e0a040; font-weight: bold; }
.lb-fresh-ok { color: #2ec27e; font-weight: bold; }

/* Kategorie-Badges */
.lb-cat-fern-hoch  { background: #001466; color: #88aaff; }
.lb-cat-fern       { background: #0e0e44; color: #6680dd; }
.lb-cat-regional   { background: #001e0e; color: #44cc77; }
.lb-cat-nahverkehr { background: #001a10; color: #2aaa55; }
.lb-cat-s-bahn     { background: #2e1800; color: #ffaa33; }
.lb-cat-sonstige   { background: #161620; color: #7a7a8a; }

.lb-ausfall {
  display: inline-block; background: #4a0000; color: #ff5555;
  font-size: 8px; font-weight: bold; padding: 1px 4px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle; letter-spacing: 1px;
}
.lb-empty { color: #3a3a52; padding: 26px 14px; font-size: 12px; text-align: center; }

/* ── Tools-Zeile: Suche & Sortierung ─────────────────────────────── */
.lb-tools { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: #07070f; border-bottom: 1px solid #12122a; }
.lb-search {
  flex: 1; max-width: 320px; background: #0e0e1c; border: 1px solid #20203a;
  color: #c8c8d8; font-size: 12px; padding: 4px 9px; border-radius: 4px; font-family: inherit;
}
.lb-search::placeholder { color: #45455e; }
.lb-search:focus { outline: none; border-color: #3a3a6a; background: #12122a; }
.lb-sort-lbl { font-size: 10px; color: #45455e; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.lb-sort { background: #0e0e1c; border: 1px solid #20203a; color: #c8c8d8; font-size: 11px; padding: 3px 6px; border-radius: 4px; font-family: inherit; cursor: pointer; }
.lb-tools-hint { font-size: 10px; color: #6a6a85; }
.lb-tt-wrap { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border: 1px solid #20203a; border-radius: 4px; }
.lb-tt-wrap.lb-tt-active { border-color: var(--hl-yellow); background: #1a1606; }
.lb-tt { background: #0e0e1c; border: 1px solid #20203a; color: #8a8aa6; font-size: 11px; padding: 2px 6px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.lb-tt:hover { color: #cfcfe6; border-color: #3a3a6a; }
.lb-tt-lbl { font-size: 10px; color: #8a8aa4; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.lb-tt-active .lb-tt-lbl { color: var(--hl-yellow); font-weight: bold; }
.lb-tt-reset { color: var(--hl-yellow); border-color: #4a3a10; }
.lb-clock-tt { color: var(--hl-yellow) !important; font-weight: bold; }

/* ── Störungslage (Ursachen-Aggregation) ─────────────────────────── */
.lb-causes { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: #1a1206; border-bottom: 1px solid #2a1c08; }
.lb-causes-h { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #a07028; flex-shrink: 0; }
.lb-causes-list { display: flex; gap: 7px; flex-wrap: wrap; }
.lb-cause { font-size: 10px; color: #d0a458; background: #241806; border: 1px solid #3a2810; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.lb-cause b { color: #f0c070; }
.lb-cause-more { color: #7a5a28; background: transparent; border-color: transparent; }

/* ── Trend-Sparkline ─────────────────────────────────────────────── */
.lb-spark { display: block; width: 78px; height: 13px; margin: 3px auto 0; opacity: 0.9; }

/* ── Attribut-Icons / Richtungsglyph ─────────────────────────────── */
.lb-attr { font-size: 11px; margin-left: 5px; opacity: 0.85; vertical-align: middle; }
.lb-dir { font-size: 9px; margin-right: 5px; vertical-align: middle; }
.lb-dir-dep { color: #4aa8e8; }
.lb-dir-arr { color: #cc7a40; }

/* ── Dichteleiste klickbar + Sprung-Flash ────────────────────────── */
.lb-tick { cursor: pointer; }
.lb-tick:hover { opacity: 1; width: 3px; }
@keyframes lbflash { 0%, 100% { background: transparent; } 30% { background: rgba(255,210,60,0.22); } }
.lb-flash { animation: lbflash 1.3s ease; }

/* ── Bahnsteig-Belegungs-Timeline ────────────────────────────────── */
.lb-platform { padding: 0 0 22px; }
.lb-pt-head { display: flex; align-items: stretch; height: 22px; position: sticky; top: 0; z-index: 5; background: #07070f; border-bottom: 1px solid #16162c; }
.lb-pt-row { display: flex; align-items: stretch; min-height: 28px; border-bottom: 1px solid #0d0d18; }
.lb-pt-row:hover { background: #0d0d18; }
.lb-pt-label { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; color: #8a8aa4; border-right: 1px solid #16162c; background: #08080f; }
.lb-pt-head .lb-pt-label { font-size: 9px; color: #45455e; text-transform: uppercase; letter-spacing: 1px; }
.lb-pt-axis { position: relative; flex: 1; }
.lb-pt-track { position: relative; flex: 1; background-image: repeating-linear-gradient(90deg, #11112180 0, #11112180 1px, transparent 1px, transparent 20%); }
.lb-pt-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: #14142c; }
.lb-pt-grid span { position: absolute; bottom: 3px; left: 4px; font-size: 9px; color: #3a3a55; white-space: nowrap; }
.lb-pt-now { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hl-yellow); box-shadow: 0 0 5px rgba(255,210,60,0.5); }
.lb-pt-chip {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  background: var(--sev); color: #0a0a12; font-size: 10px; font-weight: bold;
  padding: 1px 5px; border-radius: 3px; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.35);
}
.lb-pt-chip:hover { z-index: 10; outline: 1px solid #e8e8f4; }

/* ── Zurück-Button ───────────────────────────────────────────────── */
.lupe-back { padding: 4px 6px; border-bottom: 1px solid #151525; }
.bv-back-btn {
  display: block; width: 100%; text-align: left;
  background: #09091a; border: 1px solid #202030; color: #666;
  font-size: 10px; padding: 4px 8px; cursor: pointer;
}
.bv-back-btn:hover { background: #13132a; color: var(--hl-yellow); border-color: var(--hl-yellow); }
.bv-switch-btn {
  display: block; margin: 6px 0 0; padding: 3px 8px;
  background: #09091a; border: 1px solid #202030; color: #666;
  font-size: 10px; cursor: pointer; width: 100%;
}
.bv-switch-btn:hover { background: #13132a; color: #bbb; }
.bv-switch-sec { border-color: #2a3a2a; color: #5a8a5a; }
.bv-switch-sec:hover { color: #8aba8a; }

/* ─── Abfahrts-/Ankunftsplan Lupe (bd-*) ─────────────────────── */

.bd-tabs { display: flex; gap: 4px; margin: 6px 0 4px; }
.bd-tab {
  background: #1a1a2a; border: 1px solid #334; color: #aaa;
  font-size: 10px; padding: 2px 7px; cursor: pointer; border-radius: 2px;
}
.bd-tab:hover { background: #222240; color: #ddd; }
.bd-tab-active { background: #2a2a50; border-color: var(--hl-yellow); color: var(--hl-yellow); }
.bd-table-wrap { max-height: 340px; overflow-y: auto; }
.bd-table td.bd-time-cell { white-space: nowrap; min-width: 52px; }
.bd-table td.bd-dest { white-space: normal; max-width: 110px; }
.bd-time { font-weight: bold; }
.bd-late { color: var(--label-red); font-size: 9px; margin-left: 3px; }
.bd-badge { font-size: 8px; padding: 1px 3px; border-radius: 2px; margin-right: 2px; }
.bd-cancel { background: var(--label-red); color: #fff; }
.bd-plat-chg { color: var(--hl-yellow); font-weight: bold; }
.bd-via { color: #666; font-size: 9px; margin-top: 1px; }
.bd-canceled td { color: #555; text-decoration: line-through; }
.bd-disr-list { margin: 4px 0 0; padding: 0 0 0 14px; color: #b09050; font-size: 9px; }
.bd-disr-list li { margin-bottom: 3px; }

/* ─── Druckansicht ────────────────────────────────────────────── */

@media print {
  body { padding: 0; background: #fff; overflow: visible; height: auto; }
  .titlebar, .menubar, .toolbar, .tab-strip, .result-strip,
  .lupe, .msg-log, .zoom-ctl, .replay-ctl, .dlg-back, #monitorExit { display: none !important; }
  .app-window { border: none; box-shadow: none; height: auto; }
  .main-area { display: block; }
  .mirror-wrap { margin: 0; border: none; }
  .mirror-scroll { overflow: visible; }
}

/* ─── Responsiv ───────────────────────────────────────────────── */

@media (max-width: 800px) {
  body { overflow: auto; height: auto; }
  .app-window { height: auto; min-height: 100vh; }
  .main-area { flex-direction: column; }
  .mirror-wrap { min-height: 420px; }
  .lupe { width: auto; margin: 0 4px 4px; max-height: 320px; }
}

/* ═══ Tafel: Aktionsmenü (Popup) ═══ */
.lb-row-sel, .lb-pt-chip.lb-row-sel { outline: 1px solid var(--hl-yellow); outline-offset: -1px; background: rgba(255,208,0,0.08) !important; }
.tmenu {
  position: fixed; z-index: 1000; min-width: 188px;
  background: #0d0d1c; border: 1px solid var(--chrome-line);
  border-radius: 5px; box-shadow: 0 6px 22px rgba(0,0,0,0.6);
  padding: 5px; font-size: 12px; color: var(--label-white);
  animation: tmenu-in 0.09s ease-out;
}
@keyframes tmenu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.tmenu-head { display: flex; align-items: center; gap: 6px; padding: 3px 4px 6px; border-bottom: 1px solid #1d1d33; margin-bottom: 4px; }
.tmenu-dest { color: #b9b9cc; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmenu-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: none; color: var(--label-white); cursor: pointer;
  padding: 7px 8px; border-radius: 4px; font-size: 12px;
}
.tmenu-item:hover { background: #1b1b38; }
.tmenu-go { color: var(--hl-yellow); font-weight: bold; }
.tmenu-arr { margin-left: auto; }

/* ═══ Tafel: Zug-Vorschaukarte (rechtes Panel) ═══ */
.lupe-back-row { margin-bottom: 6px; }
.bp-close { background: none; border: none; color: #9a9ab0; cursor: pointer; font-size: 11px; padding: 2px 0; }
.bp-close:hover { color: var(--hl-yellow); }
.bp-card { background: #0c0c1a; border: 1px solid #1d1d33; border-radius: 6px; padding: 9px 10px; }
.bp-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bp-zn { color: #8a8a9e; font-size: 10px; }
.bp-cancel { color: #fff; background: var(--label-red); font-size: 9px; font-weight: bold; padding: 1px 5px; border-radius: 3px; margin-left: auto; }
.bp-dest { font-size: 14px; color: var(--label-white); margin: 7px 0 1px; }
.bp-dest b { color: var(--hl-yellow); }
.bp-via { font-size: 10px; color: #8a8a9e; margin-bottom: 7px; }
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 7px 0; }
.bp-grid > div { display: flex; flex-direction: column; }
.bp-k { font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: 0.5px; }
.bp-v { font-size: 13px; color: var(--label-white); font-variant-numeric: tabular-nums; }
.bp-muted { color: #6a6a7e; }
.bp-reason { font-size: 10px; color: #d0a020; background: rgba(208,144,32,0.08); border-radius: 4px; padding: 4px 6px; margin: 6px 0; }
.bp-trace { margin: 8px 0 6px; min-height: 16px; }
.bp-trace-cap { font-size: 8.5px; color: #777; margin-bottom: 2px; }
.bp-spark { display: block; width: 100%; height: 42px; }
.bp-spark-line { fill: none; stroke: var(--hl-magenta); stroke-width: 1.6; }
.bp-spark-zero { stroke: #333; stroke-width: 1; stroke-dasharray: 3 3; }
.bp-here { fill: var(--hl-yellow); stroke: #000; stroke-width: 0.8; }
.bp-actions { display: flex; gap: 6px; margin-top: 9px; }
.bp-btn { flex: 1; background: #15152c; border: 1px solid #2a2a48; color: var(--label-white); cursor: pointer; padding: 7px 6px; border-radius: 4px; font-size: 11px; }
.bp-btn:hover { background: #1d1d3a; border-color: var(--chrome-line); }
.bp-go { color: var(--hl-yellow); font-weight: bold; border-color: #4a4420; }
.bp-go:hover { border-color: var(--hl-yellow); }

/* ═══ Tafel: Bahnhofs-Dashboard (rechtes Panel, nichts gewählt) ═══ */
.bd-dash-title { color: var(--hl-yellow); font-size: 15px; font-weight: bold; display: flex; align-items: baseline; gap: 7px; }
.bd-dash-sub { color: #777; font-size: 10px; font-weight: normal; }
.bd-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 9px 0; }
.bd-dash-kpi { background: #0c0c1a; border: 1px solid #18182e; border-radius: 5px; padding: 6px 3px; text-align: center; }
.bd-dash-kv { font-size: 18px; font-weight: bold; color: var(--label-white); line-height: 1; font-variant-numeric: tabular-nums; }
.bd-dash-kl { font-size: 8px; color: #888; margin-top: 3px; }
.bd-dash-trend { display: flex; align-items: center; gap: 7px; margin: 4px 0 8px; }
.bd-dash-trend-l { font-size: 9px; color: #888; }
.bd-dash-spark { flex: 1; height: 24px; }
.bd-dash-note { font-size: 10px; color: #d0a020; margin: 2px 0 6px; }
.bd-dash-sect { color: var(--hl-yellow); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; margin: 9px 0 4px; }
.bd-dash-list { display: flex; flex-direction: column; gap: 2px; }
.bd-dash-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 4px; font-size: 11px; }
.bd-dash-row-go { cursor: pointer; }
.bd-dash-row-go:hover { background: #16162e; }
.bd-dash-t { color: #c8c8da; font-variant-numeric: tabular-nums; }
.bd-dash-dest { color: var(--label-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-dash-d { font-weight: bold; font-variant-numeric: tabular-nums; }
.bd-dash-causes { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-dash-cause { font-size: 9.5px; color: #c9b27a; background: rgba(180,144,80,0.1); border-radius: 3px; padding: 2px 6px; }
.bd-dash-cause b { color: #e0c060; }
.bd-dash-hint { font-size: 9px; color: #666; margin-top: 9px; font-style: italic; }