:root { color-scheme: light; --rand: #d8dde3; --akzent: #0b5fff; --grau: #5f6b7a; --ok: #1a7f37; --warn: #b45309; --krit: #b91c1c; --info: #2563eb; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1b1f24; background: #f6f7f9; }
header { background: #fff; border-bottom: 1px solid var(--rand); padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
h1 { margin: 0; font-size: 20px; } h1 small { color: var(--grau); font-weight: normal; font-size: 13px; margin-left: 8px; }
h2 { font-size: 16px; margin: 0 0 10px; }
main { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: grid; gap: 16px; }
section { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 14px 16px; }
.toolbar, .zeile { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
label { display: inline-flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--grau); }
label input, label select { font: inherit; color: #1b1f24; }
input, select, button { padding: 5px 8px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; font: inherit; }
button { cursor: pointer; background: #eef2f7; } button[type=submit], button.primaer { background: var(--akzent); color: #fff; border-color: var(--akzent); }
button:disabled { opacity: .5; cursor: wait; }
.hinweis { color: var(--grau); margin: 8px 0 0; min-height: 1.2em; }
.fehler { color: var(--krit); }
table { border-collapse: collapse; width: 100%; margin-top: 10px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: 12px; color: var(--grau); font-weight: 600; }
tr.entfaellt td { color: var(--krit); text-decoration: line-through; }
td.spaet { color: var(--warn); font-weight: 600; } td.frueh { color: var(--ok); }
td.gleiswechsel { color: var(--warn); font-weight: 600; }
.kopf { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.kopf span b { color: var(--grau); font-weight: 500; margin-right: 4px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #e5e7eb; }
.badge.ok { background: #dcfce7; color: var(--ok); } .badge.gleiswechsel, .badge.verspaetet, .badge.info { background: #dbeafe; color: var(--info); }
.badge.anschluss_gefaehrdet, .badge.anschluss_gebrochen, .badge.warnung, .badge.geplant { background: #fef3c7; color: var(--warn); }
.badge.ausgefallen, .badge.kritisch, .badge.fehlgeschlagen, .badge.nicht_zuordenbar { background: #fee2e2; color: var(--krit); }
.badge.gesendet { background: #dcfce7; color: var(--ok); } .badge.verworfen { background: #e5e7eb; color: var(--grau); }
.karte { border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.karte h3 { margin: 0 0 6px; font-size: 14px; }
.abschnitte { margin: 10px 0; padding-left: 20px; } .abschnitte li { margin: 3px 0; } .abschnitte button { padding: 1px 6px; margin-left: 6px; }
.ereignis { margin: 6px 0 0 0; padding: 6px 8px; background: #f6f7f9; border-radius: 6px; }
.ereignis .text { margin: 2px 0; } .ereignis .meta { font-size: 12px; color: var(--grau); }
.sendungen { margin: 4px 0 0 12px; font-size: 12px; } .sendungen li { margin: 2px 0; }
h2 small.hinweis { font-size: 12px; font-weight: normal; margin-left: 8px; }
.verbindung h3 { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .verbindung h3 small { color: var(--grau); font-weight: normal; } .verbindung h3 button { margin-left: auto; }
.legs { list-style: none; margin: 4px 0 0; padding: 0; } .leg { padding: 4px 0 4px 12px; border-left: 3px solid var(--rand); margin: 2px 0; }
.leg.fahrt { border-left-color: var(--akzent); } .leg.umstieg, .leg.fussweg { color: var(--grau); font-size: 12px; }
.spaet { color: var(--warn); font-weight: 600; } .gleiswechsel { color: var(--warn); font-weight: 600; }
code { font-size: 12px; background: #eef2f7; padding: 1px 4px; border-radius: 4px; }
@media (max-width: 700px) { main { padding: 10px; } th:nth-child(1), td:nth-child(1) { display: none; } }