/* Thema „Bahnsteig“ – Leitsystem der Bahn: weiße, deckende Tafeln, Signalrot, harte Kanten,
   klare Groteskschrift wie auf Bahnsteiganzeigen. Funktion vor Stimmung. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  --ink: #111214; --ink-2: #4a4e55; --ink-3: #8a8f97;
  --panel: #ffffff; --panel-solid: #ffffff;
  --line: #e1e3e6; --line-2: #c9ccd1;
  --amber: #e2002a; --amber-2: #b4001f;
  --wb: #1e9e4a; --oebb: #e2002a;
  --radius: 3px; --gutter: 18px;
  --font: 'Inter', system-ui, sans-serif; --serif: 'Inter', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pf-tunnel: rgba(226, 0, 42, 0.07); --pf-station: rgba(17, 18, 20, 0.25); --pf-terrain-top: #9aa3ad; --pf-terrain-bot: #e7eaee;
  --pf-ground: rgba(17, 18, 20, 0.35); --pf-route: #e2002a; --pf-cursor: #111214;
  color-scheme: light;
}
html, body { background: #e9ebee; }
.vignette { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.18)); }
.panel { background: #fff; border: 0; border-radius: 3px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.18); }
.hud-tl { border-top: 5px solid var(--amber); padding-top: 10px; }
.hud-clock { color: #111214; font-family: var(--font); font-weight: 800; letter-spacing: -0.03em; text-shadow: none; }
.hud-clock small { color: var(--ink-3); opacity: 1; }
.hud-row, .hud-counts { color: var(--ink-2); }
.hud-tc { background: #111214; color: #fff; font-family: var(--font); font-weight: 700; letter-spacing: 0.08em; }
.hud-tc span:first-child { color: #fff; background: var(--amber); padding: 2px 8px; margin: -2px 0 -2px -8px; }
.hud-sep { background: rgba(255, 255, 255, 0.35); }
.hud-tl .hud-sep { background: var(--line-2); }
.tb { border-radius: 2px; color: var(--ink-2); }
.tb span { font-family: var(--font); font-weight: 600; font-size: 10px; }
.tb:hover { background: #f1f2f4; color: #111; }
.tb[aria-pressed='true'] { background: var(--amber); color: #fff; }
.toolbar { padding: 4px; }
.trainlist { padding: 0 0 6px; }
.tl-head { background: #111214; color: #fff; padding: 10px 12px; font-family: var(--font); font-weight: 700; letter-spacing: 0.1em; border: 0; }
.tl-head span:last-child { color: #fff; background: var(--amber); padding: 0 7px; border-radius: 2px; }
#tlItems li { border-radius: 0; border-bottom: 1px solid var(--line); }
#tlItems li:hover, #tlItems li.sel { background: #fff4f5; }
#tlItems li.sel { box-shadow: inset 4px 0 0 var(--amber); }
#tlItems .n { font-weight: 800; font-size: 14px; }
#tlItems .x.late { color: var(--amber); font-weight: 700; }
#tlItems .grp { background: #f3f4f6; color: var(--ink-2); font-weight: 600; }
.legend, .traincard { border-top: 5px solid #111214; }
.tc-name { font-family: var(--font); font-weight: 900; letter-spacing: -0.02em; }
.tc-badge.gps { background: var(--wb); color: #fff; border: 0; }
.tc-badge.tt { background: #111214; color: #fff; border: 0; }
.tc-grid b.late { color: var(--amber); font-weight: 700; }
.tc-grid b.ontime { color: var(--wb); }
.tc-cams button { border-radius: 2px; background: #f4f5f7; border-color: #e1e3e6; }
.tc-cams button:hover { background: #e9ebee; color: #111; }
.tc-cams button[aria-pressed='true'] { background: var(--amber); color: #fff; border-color: var(--amber); }
.cambar button { border-radius: 2px; }
.cambar button:hover { background: #f1f2f4; color: #111; }
.cambar button.on { background: #111214; color: #fff; }
.cb-compass .ring { fill: #fff; stroke: #c9ccd1; }
.cb-compass .n, .cb-compass .nl { fill: var(--amber); }
.cb-mode { color: var(--amber); font-weight: 700; }
.profile { border-radius: 3px; }
.pf-ticker { background: #111214; color: #fff; border: 0; font-family: var(--font); font-weight: 600; }
.pf-ticker b { color: #fff; background: var(--amber); padding: 0 6px; }
/* Beschriftungen wie Ortstafeln */
.lbl .t { background: #fff; border: 0; border-radius: 2px; color: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); backdrop-filter: none; }
.lbl::after { background: linear-gradient(#111, transparent); }
.lbl.place .t { font-family: var(--font); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); background: none; box-shadow: none; }
.lbl.station .t { background: #003c7e; color: #fff; font-family: var(--font); font-weight: 700; }
.lbl.station .t::before { border-color: #fff; background: #fff; }
.lbl.struct .t { background: #fff; color: #333; }
.lbl.struct .t em { color: var(--amber); }
.lbl.train .t { color: #111; }
.lbl.train .t small { color: #666; }
.lbl.train.sel .t { background: var(--amber); color: #fff; }
.lbl.peak .t::before { color: #fff; }
/* Geschichte */
.card { background: #fff; border: 0; border-left: 6px solid var(--amber); border-radius: 3px; backdrop-filter: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.card h2 { font-family: var(--font); font-weight: 900; letter-spacing: -0.03em; color: #111; }
.card p { color: #2c2f34; }
.card p.note { color: var(--amber); }
.kicker span { background: var(--amber); color: #fff; border: 0; border-radius: 2px; }
.chips span { background: #f1f2f4; border: 0; color: #333; border-radius: 2px; }
.hero h1 { font-family: var(--font); font-weight: 900; letter-spacing: -0.06em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); }
.hero h1 span { font-style: normal; color: #fff; background: var(--amber); padding: 0 0.12em; text-shadow: none; }
.eyebrow { color: #fff; font-family: var(--font); font-weight: 700; }
.lead { color: #fff; }
.stats { background: #fff; border: 0; border-radius: 3px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.stats div { border-color: var(--line); }
.stats b { color: #111; font-family: var(--font); font-weight: 800; }
.btn-live { background: var(--amber); color: #fff; border: 0; border-radius: 3px; font-family: var(--font); font-weight: 700; }
.btn-live:hover { background: #111214; color: #fff; }
.src { background: #f6f7f8; border-color: var(--line); }
#loader { background: #fff; }
.loader-title { font-family: var(--font); font-weight: 900; color: #111; }
.loader-bar { background: #eee; }
.help { background: rgba(0, 0, 0, 0.35); }
.help kbd { background: #f4f5f7; }
.credits { color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 2px #000; }