/* Gestaltung angelehnt an das Asset-Manager-Konzept (dunkle Kopfleiste, Petrol-Akzent, dichte Tabellen) */
:root {
    --top: #1c2430;
    --top-2: #2a3442;
    --navy: #3b4f6b;
    --petrol: #0f7c72;
    --petrol-dark: #0a5f57;
    --petrol-light: #e3f2f0;
    --bg: #ffffff;
    --bg-soft: #f4f5f7;
    --line: #e2e5ea;
    --text: #20262e;
    --muted: #7a8494;
    --warn: #e2533a;
    --ok: #2e8b57;
    --amber: #d9a400;
    --kpi-h: 64px;
    --top-h: 44px;
}

html, body { height: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif; font-size: 13px;
}
a { color: var(--petrol); }

/* ---------- Kopfleiste ---------- */
.topbar {
    height: var(--top-h); background: var(--top); color: #fff; display: flex; align-items: center;
    gap: 12px; padding: 0 16px; position: sticky; top: 0; z-index: 1000;
}
.topbar .brand { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
.grid-icon { display: grid; grid-template-columns: 6px 6px; gap: 2px; }
.grid-icon i { width: 6px; height: 6px; background: #fff; display: block; }
.crumb-sep { color: #8b95a5; }
.crumb { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.topnav { margin-left: 24px; display: flex; gap: 2px; }
.topnav a { color: #c9d0da; text-decoration: none; padding: 12px 14px; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; }
.topnav a:hover { color: #fff; }
.topnav a.active { color: #fff; box-shadow: inset 0 -3px 0 var(--petrol); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar .user { color: #c9d0da; }
.btn-link-top { background: none; border: 0; color: #c9d0da; font-size: 11px; letter-spacing: .06em; padding: 0; }
.btn-link-top:hover { color: #fff; }

/* ---------- Seitenkopf + Aktionsleiste ---------- */
.page-head { display: flex; align-items: flex-end; gap: 24px; padding: 14px 20px 10px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-weight: 300; font-size: 30px; margin: 0; line-height: 1.1; }
.page-head .sub { color: var(--muted); font-size: 12px; }
.actionbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.act { background: none; border: 0; color: var(--text); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; text-decoration: none; }
.act:hover { color: var(--petrol); }
.act-primary { background: var(--petrol); color: #fff; padding: 6px 16px; }
.act-primary:hover { background: var(--petrol-dark); color: #fff; }
.label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- Formulare ---------- */
.f-input, .f-select {
    border: 0; border-bottom: 1px solid #c4cad3; background: transparent; padding: 3px 2px; font-size: 13px; color: var(--text);
    border-radius: 0; outline: none; min-width: 0;
}
.f-input:focus, .f-select:focus { border-bottom-color: var(--petrol); }
textarea.f-input { border: 1px solid #c4cad3; width: 100%; padding: 6px; }

/* ---------- Kennzahlen-Leiste unten ---------- */
.kpibar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--kpi-h); display: flex; background: #e9ebee; z-index: 900; }
.kpi { flex: 1; padding: 8px 18px; text-align: center; border-right: 1px solid #d8dce2; }
.kpi .k-label { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kpi .k-value { font-size: 24px; font-weight: 300; line-height: 1.2; white-space: nowrap; }
.kpi.accent { background: var(--petrol); color: #fff; flex: 1.4; text-align: right; }
.kpi.accent .k-label { color: #cfe9e5; }
.kpi.dark { background: var(--petrol-dark); color: #fff; flex: 1.4; text-align: right; }
.kpi.dark .k-label { color: #cfe9e5; }
body.has-kpi main { padding-bottom: calc(var(--kpi-h) + 8px); }

/* ---------- Karte ---------- */
.map-layout { display: flex; height: calc(100vh - var(--top-h) - var(--kpi-h)); }
.map-side { width: 400px; flex: none; overflow-y: auto; border-right: 1px solid var(--line); background: #fff; }
.map-side .page-head { padding: 14px 16px 10px; }
.map-side .page-head h1 { font-size: 26px; }
#map { flex: 1; background: #eef0f2; }
.route-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.route-form .full { grid-column: 1 / -1; }
.route-form label { display: flex; flex-direction: column; gap: 2px; }
.waypoints { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.wp { display: flex; gap: 10px; align-items: center; padding: 3px 0; }
.wp .dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--petrol); flex: none; }
.wp .dot.mid { border-color: var(--amber); }
.wp .dot.end { border-color: var(--warn); }
.status-line { padding: 10px 16px; color: var(--muted); }
.status-line.err { color: var(--warn); }

.part-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px 4px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.part-head b { font-weight: 600; }
.leg { display: grid; grid-template-columns: 52px 1fr; gap: 0 10px; padding: 7px 16px; border-bottom: 1px solid #f0f1f3; }
.leg .t { font-variant-numeric: tabular-nums; color: var(--text); }
.leg .t small { display: block; color: var(--muted); }
.leg .what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.leg .what .stops { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.stay { padding: 8px 16px; background: #fff8e1; border-bottom: 1px solid var(--line); color: #7a5b00; }

.badge-m { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; color: #fff; border-radius: 2px; margin-right: 6px; white-space: nowrap; }
.m-zug { background: #b4232c; } .m-ubahn { background: #1d5fa8; } .m-tram { background: #c25700; }
.m-bus { background: #6b2a8a; } .m-faehre { background: #0b86a6; } .m-sonst { background: #555; }
.m-fuss { background: #8a929e; }

.cluster-icon { background: rgba(15, 124, 114, .82); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15, 124, 114, .5); }
.wp-icon { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid var(--petrol); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.wp-icon.mid { border-color: var(--amber); } .wp-icon.end { border-color: var(--warn); }
.map-legend { background: rgba(255,255,255,.95); padding: 6px 10px; font-size: 11.5px; line-height: 1.7; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.map-legend i { display: inline-block; width: 18px; height: 4px; vertical-align: middle; margin-right: 6px; }

/* ---------- Liste (Master-Detail) ---------- */
.md-layout { display: flex; align-items: flex-start; }
.md-list { flex: 1; min-width: 0; }
.md-detail { width: 460px; flex: none; border-left: 1px solid var(--line); position: sticky; top: var(--top-h); max-height: calc(100vh - var(--top-h) - var(--kpi-h)); overflow-y: auto; background: #fff; }
.grid-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.grid-table thead { position: sticky; top: var(--top-h); z-index: 10; background: #fff; }
.grid-table th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 8px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #fff; }
.grid-table th a { color: inherit; text-decoration: none; }
.grid-table th a:hover { color: var(--petrol); }
.grid-table th .sort { color: var(--petrol); }
.grid-table tr.filter-row th { padding: 2px 8px 6px; }
.grid-table tr.filter-row .f-input, .grid-table tr.filter-row .f-select { width: 100%; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.grid-table td { padding: 5px 8px; border-bottom: 1px solid #f0f1f3; overflow-wrap: anywhere; vertical-align: top; }
.grid-table tbody tr:nth-child(even) td { background: #fafbfc; }
.grid-table tbody tr:hover td { background: var(--petrol-light); cursor: pointer; }
.grid-table tbody tr.selected td { background: var(--navy); color: #fff; }
.grid-table tbody tr.selected td a { color: #fff; }
.grid-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid-table .muted { color: var(--muted); }
.grid-table tr.selected .muted { color: #c9d3e0; }
.star { color: #c4cad3; font-size: 14px; } .star.on { color: var(--amber); }
.st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.st-offen { background: #c4cad3; } .st-geprueft { background: var(--ok); } .st-problematisch { background: var(--warn); }

.pager { display: flex; align-items: center; gap: 10px; padding: 10px 8px; color: var(--muted); }
.pager a, .pager span.cur { padding: 2px 8px; text-decoration: none; }
.pager span.cur { background: var(--navy); color: #fff; }

.detail-head { padding: 16px 18px 6px; }
.detail-head h2 { font-weight: 300; font-size: 26px; margin: 0; overflow-wrap: anywhere; }
.detail-head .sub { color: var(--muted); }
.tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.tabs a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--petrol); }
.detail-body { padding: 12px 18px 18px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 3px 10px; margin-bottom: 14px; }
.kv dt { font-weight: 400; color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.section-title { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--navy); font-weight: 700; margin: 14px 0 6px; }
.note { border-left: 3px solid var(--petrol); background: var(--bg-soft); padding: 6px 10px; margin-bottom: 8px; overflow-wrap: anywhere; }
.note .txt { white-space: pre-wrap; }
.note .meta { font-size: 11px; color: var(--muted); white-space: normal; display: flex; gap: 8px; align-items: center; }
.note .meta form { display: inline; }
.bar { height: 10px; background: var(--petrol); display: inline-block; vertical-align: middle; }
.mini-map { height: 180px; margin-bottom: 12px; border: 1px solid var(--line); }
.flash { padding: 8px 18px; background: var(--petrol-light); color: var(--petrol-dark); }
.flash.err { background: #fdecea; color: #a33; }

/* ---------- Anmeldung ---------- */
.login-wrap { min-height: calc(100vh - var(--top-h)); display: flex; align-items: center; justify-content: center; background: var(--bg-soft); }
.login-box { background: #fff; width: 360px; padding: 28px 30px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.login-box h1 { font-weight: 300; font-size: 30px; margin: 0 0 18px; }
.login-box label { display: block; margin-bottom: 14px; }
.login-box .f-input { width: 100%; }

/* Schmale Fenster: Details unter der Liste statt daneben */
@media (max-width: 1150px) {
    .md-layout { flex-direction: column; }
    .md-detail { width: 100%; position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line); }
    .map-side { width: 330px; }
}