:root {
  --bg: #0c0d11;
  --panel: #14151b;
  --text: #e8e9ee;
  --muted: #8b8e9a;
  --border: #262833;
  --accent: #6ea8ff;
  --bad: #ff4d4d;
  --good: #3ddc84;
  --warn: #ffb74d;
}
body[data-theme="day"] {
  --bg: #ece9e1;
  --panel: #f7f5ef;
  --text: #1c1d22;
  --muted: #666a75;
  --border: #d6d2c6;
  --accent: #1f5fd1;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  transition: background .3s, color .3s;
}
a { color: var(--accent); }

.top {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 14px 20px 6px;
}
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
h1 { font-size: 1.25rem; margin: 0; letter-spacing: .01em; }
.muted { color: var(--muted); font-size: .85rem; }
.badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.badge-live { color: var(--good); }
.badge-demo { color: var(--warn); }
.badge-off  { color: var(--bad); }
.badge-wait { color: var(--muted); }
.controls { display: flex; gap: 18px; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: .9rem; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px; font-size: .85rem;
}
.chip b {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px;
  border-radius: 6px; color: #fff; font-size: .8rem;
}
.chip.bad { border-color: var(--bad); }
.chip.warn { border-color: var(--warn); }
.chip.warn::after { content: "Verspätungen"; color: var(--warn); font-weight: 700; font-size: .72rem; }
.chip.bad::after { content: "Störung"; color: var(--bad); font-weight: 700; font-size: .72rem; }

.wall { padding: 0 12px; }
.scroll {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
  -webkit-overflow-scrolling: touch;
}
#mapHost { min-width: 1300px; }
#mapHost svg { display: block; width: 100%; height: auto; }
.hint { color: var(--muted); font-size: .82rem; margin: 8px 8px 0; max-width: 90ch; }

.disruptions { padding: 10px 20px 0; display: grid; gap: 8px; }
.alert {
  border: 1px solid var(--bad); border-left-width: 5px; border-radius: 10px; padding: 8px 12px; background: var(--panel);
}
.alert.minor { border-color: var(--border); border-left-color: var(--warn); }
.minor-box { border: 1px solid var(--border); border-left: 5px solid var(--warn); border-radius: 10px; background: var(--panel); padding: 6px 12px; }
.minor-box summary { cursor: pointer; font-size: .88rem; color: var(--muted); }
.minor-box .alert { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 6px 0; margin-top: 6px; }
.alert h3 { margin: 0 0 2px; font-size: .95rem; }
.alert p { margin: 0; color: var(--muted); font-size: .85rem; }

.tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 280px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 11px; font-size: .85rem; box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.tip h4 { margin: 0 0 4px; font-size: .95rem; }
.tip .row { display: flex; justify-content: space-between; gap: 16px; }
.tip .line { margin: 6px 0 2px; }
.tip .line b { display: inline-block; min-width: 28px; text-align: center; padding: 1px 6px; border-radius: 5px; color: #fff; font-size: .78rem; }

footer { padding: 18px 20px 30px; color: var(--muted); font-size: .8rem; }

/* SVG */
svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.trk { stroke-linecap: round; fill: none; }
body[data-theme="night"] .trk { stroke-opacity: .55; }
body[data-theme="night"] .decor { opacity: .4; }
body[data-theme="day"] .decor { opacity: .85; }
.decor-dot { fill: #f4f4f7; stroke-width: 2; }
.cap-outer, .cap-inner { fill: none; stroke-linecap: round; }
body[data-theme="night"] .cap-outer { stroke: #050506; }
body[data-theme="night"] .cap-inner { stroke: #cfd0d9; }
body[data-theme="day"] .cap-outer { stroke: #2a2c34; }
body[data-theme="day"] .cap-inner { stroke: #fff; }
.st { stroke: #0b0b0e; stroke-width: 2; }
body[data-theme="night"] .st { fill: #d5d6de; stroke: #050506; }
body[data-theme="day"] .st { fill: #fff; stroke: #2a2c34; }
.stopname { font-size: 10.4px; paint-order: stroke; stroke-width: 2.6px; stroke-linejoin: round; }
.stopname.major { font-weight: 650; }
body[data-theme="night"] .stopname { fill: #b9bccb; stroke: #14151b; }
body[data-theme="day"] .stopname { fill: #22242b; stroke: #f7f5ef; }
.leader { stroke-width: 0.9; }
body[data-theme="night"] .leader { stroke: #7d8094; }
body[data-theme="day"] .leader { stroke: #5a5d68; }
.hit { fill: transparent; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }