:root {
  --ink: #14213d; --muted: #5b6478; --line: #d7dce5; --bg: #f4f6fa; --card: #ffffff;
  --brand: #14213d; --accent: #f59e0b;
  --ok: #15803d; --okbg: #dcf5e3; --warn: #b45309; --warnbg: #fdebd0; --bad: #b91c1c; --badbg: #fde2e2;
  --info: #1d4ed8; --infobg: #dbe7ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px;
  background: var(--brand); color: #fff; }
.brand { font-weight: 700; font-size: 17px; white-space: nowrap; }
.brand span { color: var(--accent); }
.freshness { order: 3; flex: 1 1 100%; text-align: center; font-size: 13px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); white-space: nowrap; }
.freshness.stale { background: var(--bad); color: #fff; font-weight: 700; }
.freshness.warn { background: var(--warn); color: #fff; font-weight: 700; }
.freshness.paused { opacity: .75; }
.topbar .link { margin-left: auto; }
.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 6px; }

.tabs { display: flex; gap: 4px; padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; }
.tabs a.active { background: var(--brand); color: #fff; }

.banner { margin: 10px 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.banner.warn { background: var(--warnbg); color: var(--warn); }
.view { padding: 12px; max-width: 900px; margin: 0 auto; }
.muted { color: var(--muted); }
.center { text-align: center; }
h2 { font-size: 18px; margin: 18px 4px 8px; }
h3 { font-size: 16px; margin: 16px 0 6px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; font-size: 14px; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 8px 0;
  color: inherit; text-decoration: none; }
.card.first { border: 2px solid var(--ink); }
.card .row { display: flex; align-items: center; gap: 8px; }
.card .title { font-weight: 700; font-size: 16px; margin: 4px 0 2px; }
.card .where { color: var(--muted); font-size: 14px; }
.prio { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--line); }
.prio.P1 { background: var(--bad); color: #fff; } .prio.P2 { background: var(--warn); color: #fff; }
.tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--infobg); color: var(--info); }
.tag.ex { background: var(--warnbg); color: var(--warn); }
.tag.esc { background: var(--badbg); color: var(--bad); }
.time { margin-left: auto; font-weight: 800; font-size: 14px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.time.ok { background: var(--okbg); color: var(--ok); } .time.soon { background: var(--warnbg); color: var(--warn); } .time.late { background: var(--badbg); color: var(--bad); }

.detail section { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.detail h1 { font-size: 20px; margin: 6px 0; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { border-top: 1px solid var(--line); padding: 6px 4px; vertical-align: top; }
.kv td:first-child { color: var(--muted); width: 40%; }
.events { list-style: none; padding: 0; margin: 0; }
.events li { border-left: 3px solid var(--line); padding: 4px 0 8px 10px; font-size: 14px; }
.events li b { display: block; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { border: 0; border-radius: 12px; padding: 14px 12px; font-weight: 700; cursor: pointer; min-height: 48px; }
.btn.primary { background: var(--ink); color: #fff; } .btn.good { background: var(--ok); color: #fff; }
.btn.bad { background: #fff; color: var(--bad); border: 2px solid var(--bad); } .btn.plain { background: #fff; border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: default; }
.full { grid-column: 1 / -1; }
.form { display: grid; gap: 8px; margin-top: 10px; }
.form label { font-size: 14px; color: var(--muted); }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-height: 46px; }
textarea { min-height: 84px; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline input[type=checkbox] { width: auto; min-height: 0; }

table.data { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
table.data th, table.data td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { background: var(--bg); font-size: 13px; color: var(--muted); }
.scroll { overflow-x: auto; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.kpi b { display: block; font-size: 22px; } .kpi span { color: var(--muted); font-size: 13px; }
.kpi.alert b { color: var(--bad); }

.login { max-width: 420px; margin: 40px auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center; }
.login .btn { width: 100%; margin-top: 14px; }
.error { color: var(--bad); font-weight: 600; margin-top: 12px; }
.toast { position: fixed; left: 12px; right: 12px; bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff;
  font-weight: 600; text-align: center; z-index: 10; }
.toast.err { background: var(--bad); }

@media (min-width: 720px) {
  .view { padding: 18px; }
  .freshness { order: 0; flex: 0 1 auto; margin-left: auto; }
  .topbar .link { margin-left: 0; }
  .actions { grid-template-columns: repeat(4, 1fr); }
}

.small { font-size: 13px; font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.inbox { margin-bottom: 18px; }
.queue-toggle { width: 100%; text-align: left; background: #fff; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px;
  font-weight: 700; color: var(--muted); cursor: pointer; min-height: 48px; margin-top: 6px; }
.card.queued { opacity: .8; }
tr.inactive td { color: var(--muted); text-decoration: line-through; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid2 label { display: grid; gap: 4px; }

.push-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; font-size: 14px; }
.push-bar span { flex: 1 1 220px; }
.push-bar.on { border-color: var(--ok); }

.spark { color: var(--info); display: block; }
.delta { font-size: 12px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.delta.good { color: var(--ok); } .delta.bad { color: var(--bad); }
.kpi .delta, .kpi .small { display: block; margin: 2px 0 0; }
.ws-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ws { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ws-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 16px; }
.ws-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin: 4px 0; }
.ws-nums .bad b, .ws-nums .bad { color: var(--bad); }
table.trend td { vertical-align: middle; }
@media (min-width: 720px) { .ws-grid { grid-template-columns: 1fr 1fr; } }

.profile { text-align: left; }
.profile h2 { text-align: center; }
.chosen { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-weight: 600; }

/* ---------- Karten (Shopfloor) ---------- */
.prio-P1 { --prio: var(--bad); } .prio-P2 { --prio: #d97706; } .prio-P3 { --prio: #2563eb; } .prio-P4, .prio-none { --prio: #94a3b8; }
.badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--prio); }
.badge.big { font-size: 13px; }
.tcard { display: block; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--prio); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0; color: inherit; text-decoration: none; }
.tcard.queued { opacity: .8; }
.tc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tc-time { font-weight: 800; font-size: 14px; white-space: nowrap; }
.tc-time.late, .tk-time.late { color: var(--bad); } .tc-time.soon, .tk-time.soon { color: var(--warn); } .tc-time.ok, .tk-time.ok { color: var(--ok); }
.tc-title { font-size: 17px; font-weight: 700; margin: 3px 0 2px; line-height: 1.25; }
.tc-sub { color: var(--muted); font-size: 14px; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tgroup { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--prio); border-radius: 12px; margin: 8px 0; }
.tg-head { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 12px; text-align: left; cursor: pointer; min-height: 56px; }
.tg-count { font-size: 22px; font-weight: 800; color: var(--prio); min-width: 40px; }
.tg-text { flex: 1; display: grid; } .tg-text b { font-size: 16px; text-transform: capitalize; }
.tg-caret { color: var(--muted); font-size: 18px; }
.tg-items { padding: 0 8px 4px; } .tg-items .tcard { border-left-width: 1px; }

.tk { padding-bottom: 96px; }
.tk .back { display: inline-block; margin: 2px 0 8px; }
.tk-head { background: #fff; border: 1px solid var(--line); border-left: 8px solid var(--prio); border-radius: 14px; padding: 14px; }
.tk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-time { font-weight: 800; font-size: 18px; white-space: nowrap; }
.tk-title { font-size: 22px; line-height: 1.25; margin: 6px 0 8px; }
.loc { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 15px; }
.tk-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 10px 0; }
.kpi-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.kpi-tile b { display: block; font-size: 28px; line-height: 1.1; } .kpi-tile b small { font-size: 16px; }
.kpi-tile span { color: var(--muted); font-size: 13px; }
.tk-steps { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; }
.tk-sec-head { display: flex; justify-content: space-between; align-items: baseline; } .tk-sec-head h3 { margin: 0 0 6px; }
ol.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.step { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; min-height: 56px; cursor: pointer; font-size: 15px; line-height: 1.35; color: inherit; }
.step .box { flex: 0 0 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; background: #fff; }
.step.next { border-color: var(--ink); background: #fff; } .step.next .box { border-color: var(--ink); }
.step.done { opacity: .6; } .step.done .txt { text-decoration: line-through; } .step.done .box { background: var(--ok); border-color: var(--ok); color: #fff; }
.step:disabled { cursor: default; }
.tk-more { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0; }
.tk-more summary { font-weight: 700; cursor: pointer; min-height: 32px; }
ul.numbers { padding-left: 18px; } ul.numbers li { margin: 4px 0; }
.tk-closed { background: var(--okbg); color: var(--ok); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line); max-width: 900px; margin: 0 auto; }
.actionbar .btn { min-height: 56px; } .actionbar .grow { flex: 1; }
.sheet { position: fixed; inset: 0; z-index: 9; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { background: #fff; width: 100%; max-width: 640px; border-radius: 18px 18px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.sheet-card h3 { margin: 0; }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rchip { min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-weight: 700; font-size: 15px; cursor: pointer; padding: 8px; }
.rchip:active { background: var(--ink); color: #fff; }

/* ---------- Cockpits (FC view, AM view, Filter) ---------- */
.cockpit-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.cockpit-bar label { margin: 0; display: inline; } .cockpit-bar select { width: auto; min-height: 40px; margin: 0; }
.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ht { display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 12px; padding: 10px 12px; color: inherit; text-decoration: none; }
.ht b { font-size: 30px; line-height: 1.1; } .ht-label { font-weight: 700; font-size: 13px; } .ht-sub { color: var(--muted); font-size: 12px; }
.ht.good { border-left-color: var(--ok); } .ht.good b { color: var(--ok); }
.ht.warn { border-left-color: var(--accent); background: var(--warnbg); } .ht.warn b { color: var(--warn); }
.ht.bad { border-left-color: var(--bad); background: var(--badbg); } .ht.bad b { color: var(--bad); }
.all-good { background: var(--okbg); color: var(--ok); border-radius: 12px; padding: 12px; font-weight: 600; }
.att-list { display: grid; gap: 8px; }
.att { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "where go" "pills go" "meta go"; gap: 4px 10px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 12px; padding: 10px 12px; color: inherit; text-decoration: none; min-height: 56px; }
.att.bad { border-left-color: var(--bad); }
.att-where { grid-area: where; display: flex; gap: 8px; align-items: baseline; font-size: 16px; } .att-where b { font-size: 18px; }
.att-pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: 6px; } .att-meta { grid-area: meta; } .att-go { grid-area: go; font-size: 26px; color: var(--muted); }
.pill { border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.pill.bad { background: var(--badbg); color: var(--bad); } .pill.warn { background: var(--warnbg); color: var(--warn); }
.hours { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 6px; }
.hours svg text { font-size: 9px; fill: var(--muted); }
.b-new { fill: var(--info); } .b-closed { fill: var(--ok); }
.legend { color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .lg.new { background: var(--info); } .lg.closed { background: var(--ok); margin-left: 6px; }
.cell { white-space: nowrap; display: inline-block; min-width: 2.4em; border-radius: 6px; padding: 2px 6px; text-align: right; }
.cell.good { background: var(--okbg); color: var(--ok); } .cell.warn { background: var(--warnbg); color: var(--warn); } .cell.bad { background: var(--badbg); color: var(--bad); font-weight: 700; }
.matrix td { vertical-align: middle; }
.linkish { background: none; border: 0; padding: 0; color: var(--info); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.tb { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--ok); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.tb.bad { border-top-color: var(--bad); } .tb.idle { border-top-color: var(--line); }
.tb-head { display: flex; justify-content: space-between; color: inherit; text-decoration: none; font-size: 16px; } .tb-go { color: var(--muted); font-size: 22px; line-height: 1; }
.tb-nums { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; } .tb-nums .bad { color: var(--bad); }
.tb-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.tb-work a { display: block; background: var(--bg); border-radius: 8px; padding: 6px 8px; color: inherit; text-decoration: none; }
.rec { display: flex; flex-wrap: wrap; gap: 8px; }
.rec .rchip { min-height: 40px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; color: inherit; text-decoration: none; font-weight: 500; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.filters select, .filters input { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: #fff; font: inherit; }
.filters input { flex: 1 1 200px; }
.fchip { min-height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: #fff; font-weight: 700; cursor: pointer; }
.fchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.active-filters .tag { cursor: pointer; border: 0; }
.cockpit-bar .stale-txt { color: var(--bad); font-weight: 700; }
.hours-svg { width: 100%; max-width: 640px; height: auto; max-height: 140px; display: block; }

/* Entwickler-Bereich */
.dev-pre { background: #f2f4f3; border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; font: 13px/1.5 ui-monospace, Menlo, monospace; white-space: pre; }
.dev-list { margin: 0 4px; padding-left: 18px; display: grid; gap: 4px; }
.dev-new { border: 2px solid var(--ok); border-radius: 12px; padding: 12px; margin: 8px 0; display: grid; gap: 8px; }
.dev-key { word-break: break-all; font: 14px ui-monospace, Menlo, monospace; user-select: all; }

.tk-hint { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--info); background: var(--infobg); color: var(--ink); font-size: 14px; border-radius: 4px; }
.banner.info { background: var(--infobg); color: var(--info); }
.change-banner { display: block; text-decoration: none; margin: 0 0 8px; }
.change-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.change-list li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.change-list h3 { margin: 4px 0; font-size: 16px; }
.change-list p { margin: 4px 0; }
.change-list .is-hidden { opacity: .55; }
.fn { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.fn-row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; }
.fn-label { font-weight: 600; font-size: 14px; } .fn-label small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.fn-bar { display: flex; height: 26px; min-width: 0; border-radius: 4px; overflow: hidden; }
.fn-seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; }
.fn-ink { background: var(--ink); } .fn-human { background: var(--info); } .fn-good { background: var(--ok); } .fn-warn { background: var(--accent); color: var(--ink); }
.fn-bad { background: var(--bad); } .fn-bad2 { background: var(--warn); } .fn-plan { background: var(--muted); } .fn-open { background: var(--line); color: var(--ink); }
.fn-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.fn-keys .k { background: none; color: var(--muted); } .fn-keys .k::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.fn-keys .fn-good::before { background: var(--ok); } .fn-keys .fn-warn::before { background: var(--accent); } .fn-keys .fn-bad::before { background: var(--bad); }
.fn-keys .fn-plan::before { background: var(--muted); } .fn-keys .fn-bad2::before { background: var(--warn); } .fn-keys .fn-open::before { background: var(--line); }
@media (max-width: 560px) { .fn-row { grid-template-columns: 1fr; } }
.tag.ho { background: var(--infobg); color: var(--info); }
.handover-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--infobg); color: var(--ink); border-left: 4px solid var(--info); }
.handover-box p { margin: 4px 0 0; }
.shift-kpis { margin: 10px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) { .shift-kpis { grid-template-columns: repeat(2, 1fr); } }
.ho-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.ho-list li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.ho-row { display: flex; gap: 10px; align-items: flex-start; }
.ho-row input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ho-row span { display: grid; gap: 2px; }
.ho-note, #sh-note { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
#sh-note { margin: 4px 0 10px; }
/* Floor-Modus: Handschuhe, Licht, Bewegung. Groessere Ziele (>= 56 px), groessere Schrift, mehr Kontrast, weniger Nebeninfo. */
.floor-toggle { font-size: 14px; }
.topbar .floor-toggle + .link { margin-left: 0; }
/* Kopfzeile bleibt einzeilig, auch im Floor-Modus mit Sprache, Floor und Abmelden (390 px) */
.topbar .link { font-size: 15px; padding: 6px 4px; white-space: nowrap; }
html.floor { --muted: #3b4458; --line: #b9c1cf; }
html.floor body { font-size: 18px; }
html.floor .btn { min-height: 56px; font-size: 18px; border-radius: 14px; }
html.floor .tabs a { padding: 14px 16px; font-size: 17px; }
html.floor .tcard { padding: 14px 16px; border-left-width: 10px; }
html.floor .tc-title { font-size: 20px; }
html.floor .tc-sub { font-size: 16px; }
html.floor .tc-top .badge, html.floor .tc-time { font-size: 15px; }
html.floor .tk-title { font-size: 26px; }
html.floor .tk-hint { font-size: 16px; }
html.floor .kpi-tile b { font-size: 36px; }
html.floor .kpi-tile span { font-size: 15px; }
html.floor .ho-row input { width: 30px; height: 30px; }
html.floor input, html.floor select, html.floor textarea { font-size: 18px; min-height: 48px; }
html.floor .freshness { font-size: 15px; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ds-swatch { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.ds-swatch span { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); }
.ds-swatch code { font-size: 12px; } .ds-swatch small { color: var(--muted); font-size: 11px; }
.ds-type { display: grid; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ds-cards { display: grid; gap: 8px; }
.ds-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topbar-like { background: var(--brand); color: #fff; padding: 10px; border-radius: 12px; }
.ds-fresh { order: 0; flex: 0 0 auto; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.subnav a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; background: var(--card); }
.subnav a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fd-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0 12px; font-size: 14px; }
.fd-filters label { display: flex; gap: 6px; align-items: center; }
.fd-check { display: flex; gap: 6px; align-items: center; }
.fd-list { display: grid; gap: 8px; }
.fd { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.fd.back { border-color: var(--bad); }
.fd > summary { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px 12px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.fd > summary::-webkit-details-marker { display: none; }
.fd-title { min-width: 0; overflow-wrap: anywhere; }
.fd-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fd-kind.fa { background: var(--warnbg); color: var(--warn); } .fd-kind.nd { background: var(--badbg); color: var(--bad); }
.fd-kind.ex { background: var(--line); color: var(--ink); } .fd-kind.rp { background: var(--infobg); color: var(--info); }
.fd-num { white-space: nowrap; }
.fd-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line); white-space: nowrap; }
.fd-status.st-new { background: var(--infobg); color: var(--info); } .fd-status.st-fixed { background: var(--okbg); color: var(--ok); }
.fd-status.st-planned, .fd-status.st-investigating { background: var(--warnbg); color: var(--warn); }
.fd.back .fd-status { background: var(--bad); color: #fff; }
.fd-body { padding: 0 12px 12px; display: grid; gap: 8px; }
.fd-comments { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.fd-form label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.fd-form input, .fd-form textarea, .fd-form select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.fd-publish { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }
@media (max-width: 640px) { .fd > summary { grid-template-columns: 1fr auto; } .fd-title { grid-column: 1 / -1; order: -1; } }
.outcome { margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 4px; }
.outcome p { margin: 0; } .outcome .good { color: var(--ok); font-weight: 700; } .outcome .bad { color: var(--bad); font-weight: 700; }
.ad-kpis { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .ad-kpis { grid-template-columns: repeat(2, 1fr); } }
.ad-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 110px; align-items: end; }
.ad-day { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; min-width: 0; }
.ad-day small { font-size: 10px; color: var(--muted); }
.ad-stack { display: flex; flex-direction: column; min-height: 2px; border-radius: 3px; overflow: hidden; background: var(--line); }
.ad-out { background: var(--muted); } .ad-app { background: var(--ok); }
.fn-keys .ad-k-app::before { background: var(--ok); } .fn-keys .ad-k-out::before { background: var(--muted); }
.intro .sheet-card h3 { margin: 4px 0; }
.intro .sheet-card p { margin: 6px 0 12px; line-height: 1.45; }
.intro-nav { display: flex; gap: 8px; justify-content: space-between; margin-top: 8px; }
.intro-nav .btn { flex: 1; }
.fd-check input, .fd-publish input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; }
.fd-check { white-space: nowrap; }

/* ---------- Board (#/board): Look der Lager-Fehlerbehandlung im Web, TV-Modus mit html.tv ---------- */
.view.wide { max-width: 1600px; }
html.tv .topbar, html.tv #tabs, html.tv .banner { display: none !important; }
html.tv .view { padding: 0; max-width: none; }
.board { --b-bg: #f3f4f6; --b-card: #ffffff; --b-line: #e5e7eb; --b-ink: #1e2021; --b-muted: #6b7280; --b-soft: #f9fafb;
  --b-crit: #dc2626; --b-critbg: #fde8e8; --b-urgent: #d97706; --b-urgentbg: #fdf0dc; --b-soon: #ca8a04; --b-soonbg: #fdf6d8;
  --b-ok: #16a34a; --b-okbg: #e3f5e8; --b-overbg: #fbd5d5;
  background: var(--b-bg); color: var(--b-ink); font-family: Roboto, "Helvetica Neue", Arial, sans-serif; border-radius: 12px;
  padding: 0 0 16px; font-size: 15px; }
@media (prefers-color-scheme: dark) { .board:not(.light) { --b-bg: #111315; --b-card: #1b1e21; --b-line: #2c3136; --b-ink: #eceef0;
  --b-muted: #9aa1a9; --b-soft: #202428; --b-critbg: #3b1717; --b-urgentbg: #3a2a10; --b-soonbg: #352e0d; --b-okbg: #14301d; --b-overbg: #4a1a1a;
  --b-crit: #f87171; --b-urgent: #fbbf24; --b-soon: #facc15; --b-ok: #4ade80; } }
.board.dark { --b-bg: #111315; --b-card: #1b1e21; --b-line: #2c3136; --b-ink: #eceef0;
  --b-muted: #9aa1a9; --b-soft: #202428; --b-critbg: #3b1717; --b-urgentbg: #3a2a10; --b-soonbg: #352e0d; --b-okbg: #14301d; --b-overbg: #4a1a1a;
  --b-crit: #f87171; --b-urgent: #fbbf24; --b-soon: #facc15; --b-ok: #4ade80; }
html.tv body { background: #111315; }
html.tv .board { border-radius: 0; min-height: 100vh; font-size: clamp(15px, 1.05vw, 22px); }
.b-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; background: var(--b-card);
  border-bottom: 1px solid var(--b-line); border-radius: 12px 12px 0 0; }
html.tv .b-head { border-radius: 0; }
.b-head h1 { margin: 0 auto 0 0; font-size: 1.7em; font-weight: 700; }
.b-logo { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 8px; background: var(--b-critbg);
  color: var(--b-crit); font-weight: 900; }
.b-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--b-line); border-radius: 999px;
  background: var(--b-soft); color: var(--b-muted); font-size: .9em; }
.b-pill b { color: var(--b-ink); }
.b-pill select { width: auto; min-height: 0; padding: 0 4px; border: 0; background: transparent; color: var(--b-ink); font-weight: 700; }
.b-pill.live { background: var(--b-okbg); color: var(--b-ok); border-color: transparent; font-weight: 700; }
.b-pill.live .b-dot { background: var(--b-ok); }
.b-pill.late { background: var(--b-urgentbg); color: var(--b-urgent); border-color: transparent; font-weight: 700; }
.b-pill.late .b-dot { background: var(--b-urgent); }
.b-btn { cursor: pointer; font: inherit; font-size: .9em; }
.b-icon { width: 2.2em; height: 2.2em; border: 1px solid var(--b-line); border-radius: 8px; background: var(--b-soft); color: var(--b-ink);
  cursor: pointer; font-size: 1em; }
.b-clock { font-size: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }
.b-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 16px; }
.b-tile { background: var(--b-card); border: 1px solid var(--b-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.b-tile-top { display: flex; align-items: center; gap: 8px; color: var(--b-muted); font-size: .95em; }
.b-tile-top b { font-size: 2.6em; line-height: 1; color: var(--b-ink); font-weight: 700; }
.b-tile .b-dot { display: none; }
.b-tile.crit .b-tile-top b, .b-tile.crit .b-dot { color: var(--b-crit); } .b-tile.urgent .b-tile-top b, .b-tile.urgent .b-dot { color: var(--b-urgent); }
.b-tile.soon .b-dot { color: var(--b-soon); } .b-tile.solved .b-dot { color: var(--b-ok); }
.b-tile.crit .b-dot, .b-tile.urgent .b-dot, .b-tile.soon .b-dot, .b-tile.solved .b-dot { display: inline-block; }
.b-tile.solved .b-tile-top span:last-child { color: var(--b-ok); font-weight: 600; }
.b-hint { margin-left: auto; font-size: .85em; }
.b-sub { margin-top: 6px; color: var(--b-ok); font-size: .8em; font-weight: 600; }
.b-bar { display: flex; gap: 3px; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--b-line); overflow: hidden; }
.b-bar i { display: block; height: 100%; border-radius: 2px; } .b-bar .crit { background: var(--b-crit); }
.b-bar .urgent { background: var(--b-urgent); } .b-bar .soon { background: var(--b-soon); }
.b-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 16px 12px; padding: 4px; border-radius: 10px; background: var(--b-line); }
.b-tabs button { border: 0; border-radius: 8px; padding: 6px 12px; background: transparent; color: var(--b-muted); font: inherit; font-size: .9em;
  font-weight: 600; cursor: pointer; }
.b-tabs button.on { background: var(--b-card); color: var(--b-ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.b-tabs button span { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--b-soft);
  font-size: .8em; text-align: center; }
.b-table { margin: 0 16px; background: var(--b-card); border: 1px solid var(--b-line); border-radius: 12px; overflow-x: auto; }
.b-table table { width: 100%; border-collapse: collapse; }
.b-table th { padding: 12px 14px; text-align: left; color: var(--b-muted); font-size: .72em; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border-bottom: 1px solid var(--b-line); white-space: nowrap; }
.b-table td { padding: 10px 14px; border-bottom: 1px solid var(--b-line); vertical-align: middle; }
.b-table tr:last-child td { border-bottom: 0; }
.b-table tr.click { cursor: pointer; } .b-table tr.click:hover td { background: var(--b-soft); }
.b-due { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-weight: 700; font-size: 1.05em;
  font-variant-numeric: tabular-nums; background: var(--b-soft); color: var(--b-muted); white-space: nowrap; }
.b-due.over { background: var(--b-overbg); color: var(--b-crit); } .b-due.crit { background: var(--b-critbg); color: var(--b-crit); }
.b-due.urgent { background: var(--b-urgentbg); color: var(--b-urgent); } .b-due.soon { background: var(--b-soonbg); color: var(--b-soon); }
.b-rel { font-weight: 700; color: var(--b-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-rel.over, .b-rel.crit { color: var(--b-crit); } .b-rel.urgent { color: var(--b-urgent); } .b-rel.soon { color: var(--b-soon); }
.b-muted { color: var(--b-muted); font-size: .85em; }
.b-headline { color: var(--b-muted); font-size: .85em; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-code { display: inline-block; padding: 2px 8px; border: 1px solid var(--b-line); border-radius: 6px; background: var(--b-soft);
  font-weight: 700; font-size: .9em; letter-spacing: .04em; }
.b-code.p1 { background: var(--b-critbg); color: var(--b-crit); border-color: transparent; }
.b-esc { padding: 1px 6px; border-radius: 6px; background: var(--b-critbg); color: var(--b-crit); font-size: .75em; font-weight: 700; }
.b-owner { color: var(--b-ok); font-weight: 700; white-space: nowrap; }
.b-free { display: inline-block; width: 1.6em; height: 1.6em; border: 1px dashed var(--b-line); border-radius: 50%; }
.b-empty, .b-more { margin: 0; padding: 18px; text-align: center; color: var(--b-muted); }
@media (max-width: 700px) { .b-headline { max-width: 24ch; } .b-head h1 { font-size: 1.3em; } .b-clock { font-size: 1.2em; } }

/* ---------- Dev-Cockpit (#/dev/cockpit): Leitstand, dunkel als Standard, hell per Schalter ---------- */
.cp { --c-bg: #0b0f14; --c-panel: #121821; --c-panel2: #18202b; --c-line: #233041; --c-ink: #e7edf5; --c-muted: #8a97a8; --c-dim: #5d6a7b;
  --c-ok: #34d399; --c-okbg: rgba(52,211,153,.14); --c-warn: #fbbf24; --c-warnbg: rgba(251,191,36,.14); --c-bad: #f87171; --c-badbg: rgba(248,113,113,.15);
  --c-info: #60a5fa; --c-infobg: rgba(96,165,250,.14); --c-accent: #7dd3fc; --c-glow: rgba(125,211,252,.35);
  --c-done: #34d399; --c-fa: #f87171; --c-nd: #a78bfa; --c-exp: #64748b; --c-open: #fbbf24; --c-touch: #60a5fa;
  background: radial-gradient(1200px 500px at 15% -10%, rgba(56,189,248,.10), transparent 60%), var(--c-bg);
  color: var(--c-ink); border-radius: 14px; padding: 0 14px 18px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px;
  font-variant-numeric: tabular-nums; }
.cp.light { --c-bg: #eef2f7; --c-panel: #ffffff; --c-panel2: #f6f8fb; --c-line: #dde3ec; --c-ink: #14213d; --c-muted: #5b6478; --c-dim: #8a93a6;
  --c-ok: #15803d; --c-okbg: #dcf5e3; --c-warn: #b45309; --c-warnbg: #fdebd0; --c-bad: #b91c1c; --c-badbg: #fde2e2;
  --c-info: #1d4ed8; --c-infobg: #dbe7ff; --c-accent: #0369a1; --c-glow: rgba(3,105,161,.25);
  --c-done: #16a34a; --c-fa: #dc2626; --c-nd: #7c3aed; --c-exp: #94a3b8; --c-open: #d97706; --c-touch: #2563eb;
  background: var(--c-bg); }
html.tv .cp { border-radius: 0; min-height: 100vh; font-size: clamp(14px, .95vw, 20px); padding-top: 4px; }
.cp .subnav { margin: 0; padding: 12px 0 0; }
.cp .subnav a { color: var(--c-muted); background: var(--c-panel); border-color: var(--c-line); }
.cp .subnav a.active { color: var(--c-bg); background: var(--c-accent); border-color: var(--c-accent); }
.cp a { color: inherit; }
.cp-dim { color: var(--c-dim); }
.cp-sub { color: var(--c-muted); font-size: .86em; }
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 0 10px; }
.cp-logo { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; font-weight: 900;
  color: var(--c-accent); background: var(--c-infobg); box-shadow: 0 0 22px var(--c-glow); }
.cp-title { margin-right: auto; }
.cp-title h1 { margin: 0; font-size: 1.6em; letter-spacing: .01em; }
.cp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-line);
  background: var(--c-panel); color: var(--c-ink); font-size: .92em; white-space: nowrap; }
.cp-pill select { background: transparent; color: inherit; border: 0; font-weight: 700; }
.cp-pill select option { color: #14213d; }
.cp-pill.ok { color: var(--c-ok); border-color: var(--c-ok); background: var(--c-okbg); }
.cp-pill.warn { color: var(--c-warn); border-color: var(--c-warn); background: var(--c-warnbg); }
.cp-pill.bad { color: var(--c-bad); border-color: var(--c-bad); background: var(--c-badbg); }
.cp-btn, .cp-icon { cursor: pointer; }
.cp-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-ink); }
.cp-clock { font-weight: 700; font-size: 1.15em; min-width: 6ch; text-align: right; }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: cp-ping 2s infinite; }
@keyframes cp-ping { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.cp-panel { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.cp-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.cp-panel-h h2 { margin: 0; font-size: .82em; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); }
.cp-panel-h .cp-dim { font-size: .86em; margin-left: auto; }
.cp-legend + .cp-panel-h { margin-top: 18px; }

/* Pipeline-Puls */
.cp-flow { display: flex; align-items: stretch; overflow-x: auto; padding: 6px 2px 4px; }
.cp-node { flex: 1 0 118px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 4px 2px; }
.cp-orb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c-dim); margin-bottom: 6px;
  background: var(--c-panel2); }
.cp-orb span { width: 16px; height: 16px; border-radius: 50%; background: var(--c-dim); }
.cp-node.ok .cp-orb { border-color: var(--c-ok); box-shadow: 0 0 18px rgba(52,211,153,.35); } .cp-node.ok .cp-orb span { background: var(--c-ok); animation: cp-breathe 3s ease-in-out infinite; }
.cp-node.warn .cp-orb { border-color: var(--c-warn); box-shadow: 0 0 18px rgba(251,191,36,.35); } .cp-node.warn .cp-orb span { background: var(--c-warn); }
.cp-node.bad .cp-orb { border-color: var(--c-bad); box-shadow: 0 0 22px rgba(248,113,113,.5); } .cp-node.bad .cp-orb span { background: var(--c-bad); animation: cp-blink 1s steps(2) infinite; }
@keyframes cp-breathe { 50% { transform: scale(.7); opacity: .7; } }
@keyframes cp-blink { 50% { opacity: .25; } }
.cp-node-l { font-weight: 800; font-size: 1.02em; }
.cp-node-s { color: var(--c-muted); font-size: .8em; }
.cp-node-m { font-weight: 600; font-size: .9em; margin-top: 4px; }
.cp-node.bad .cp-node-m { color: var(--c-bad); }
.cp-node-a { color: var(--c-dim); font-size: .8em; }
.cp-link { flex: 0 1 60px; min-width: 26px; position: relative; height: 2px; margin-top: 27px; background: var(--c-line); overflow: hidden; }
.cp-link i { position: absolute; top: -2px; left: -10%; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent); animation: cp-flow 2.4s linear infinite; }
.cp-link i:nth-child(2) { animation-delay: .8s; } .cp-link i:nth-child(3) { animation-delay: 1.6s; }
.cp-link.slow i { animation-duration: 6s; opacity: .5; }
.cp-link.stop { background: repeating-linear-gradient(90deg, var(--c-bad) 0 6px, transparent 6px 10px); }
.cp-link.stop i { display: none; }
@keyframes cp-flow { from { left: -10%; } to { left: 105%; } }

/* Kennzahlen */
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.cp-kpi { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-kpi.alert { border-color: var(--c-bad); box-shadow: inset 0 0 0 1px var(--c-bad); }
.cp-kpi-l { color: var(--c-muted); font-size: .78em; text-transform: uppercase; letter-spacing: .08em; }
.cp-kpi-v { font-size: 2em; font-weight: 800; line-height: 1.1; }
.cp-kpi-v small { font-size: .45em; font-weight: 600; color: var(--c-muted); margin-left: 3px; }
.cp-kpi.alert .cp-kpi-v { color: var(--c-bad); }
.cp-kpi-f { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .78em; color: var(--c-dim); margin-top: auto; }
.cp-delta.good { color: var(--c-ok); } .cp-delta.bad { color: var(--c-bad); }
.cp-spark { width: 100%; height: 30px; }
.cp-spark .line { fill: none; stroke: var(--c-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cp-spark .area { fill: var(--c-infobg); }

/* Raster */
.cp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.cp-grid-b { margin-top: 12px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 980px) { .cp-grid, .cp-grid-b { grid-template-columns: minmax(0, 1fr); } }
.cp-scroll { overflow-x: auto; }

/* Detektor-Board */
.cp-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.cp-filters button { border: 1px solid var(--c-line); background: var(--c-panel2); color: var(--c-muted); border-radius: 999px; padding: 3px 10px; font-size: .82em; cursor: pointer; }
.cp-filters button span { color: var(--c-dim); margin-left: 3px; }
.cp-filters button.on { color: var(--c-ink); border-color: var(--c-accent); background: var(--c-infobg); }
.cp-filters button:disabled { opacity: .4; cursor: default; }
.cp-table { width: 100%; border-collapse: collapse; }
.cp-table th { text-align: left; font-size: .74em; text-transform: uppercase; letter-spacing: .07em; color: var(--c-dim); font-weight: 600; padding: 4px 6px 6px; white-space: nowrap; }
.cp-table td { border-top: 1px solid var(--c-line); padding: 6px; vertical-align: middle; white-space: nowrap; }
.cp-table .n { text-align: right; }
.cp-table tbody tr { cursor: pointer; }
.cp-table tbody tr:hover td { background: var(--c-panel2); }
.cp-type { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
.cp-bars { width: 120px; height: 24px; display: block; }
.cp-bars rect { fill: var(--c-accent); } .cp-bars rect.zero { fill: var(--c-line); height: 1px; y: 23px; }
.cp-meter { display: inline-block; vertical-align: middle; width: 70px; height: 6px; border-radius: 3px; background: var(--c-line); overflow: hidden; margin-right: 6px; }
.cp-meter i { display: block; height: 100%; background: var(--c-ok); }
.cp-meter.warn i { background: var(--c-warn); } .cp-meter.bad i { background: var(--c-bad); }
.cp-meter-n { font-size: .9em; }
.cp-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cp-badge.ok { color: var(--c-ok); background: var(--c-okbg); } .cp-badge.warn { color: var(--c-warn); background: var(--c-warnbg); }
.cp-badge.bad { color: var(--c-bad); background: var(--c-badbg); }
.cp-legend { color: var(--c-dim); font-size: .8em; margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* Live-Ticker */
.cp-ticker ul { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
html.tv .cp-ticker ul { max-height: 62vh; }
.cp-ticker li { display: grid; grid-template-columns: 26px 44px minmax(0, 1fr); gap: 6px; align-items: start; padding: 7px 4px; border-top: 1px solid var(--c-line); cursor: pointer; }
.cp-ticker li:hover { background: var(--c-panel2); }
.cp-ticker li.fresh { animation: cp-in .7s ease-out, cp-glow 2.5s ease-out; }
@keyframes cp-in { from { transform: translateY(-8px); opacity: 0; } }
@keyframes cp-glow { from { background: var(--c-infobg); } }
.cp-tk-i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: .9em; background: var(--c-panel2); color: var(--c-muted); }
.cp-tk-i.ok { color: var(--c-ok); background: var(--c-okbg); } .cp-tk-i.warn { color: var(--c-warn); background: var(--c-warnbg); }
.cp-tk-i.bad { color: var(--c-bad); background: var(--c-badbg); } .cp-tk-i.info { color: var(--c-info); background: var(--c-infobg); }
.cp-tk-t { color: var(--c-dim); font-size: .85em; padding-top: 3px; }
.cp-tk-b { min-width: 0; line-height: 1.35; }
.cp-tk-x { display: block; color: var(--c-muted); font-size: .84em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-note { margin-left: 6px; color: var(--c-accent); font-size: .86em; }
.cp-who { margin-left: 6px; font-size: .84em; font-weight: 700; color: var(--c-ok); }
.cp-prio { font-size: .72em; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: var(--c-line); }
.cp-prio.P1 { background: var(--c-bad); color: #fff; } .cp-prio.P2 { background: var(--c-warn); color: #111; }
.cp-live { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ok); font-size: .82em; margin-left: auto; }

/* Sync-Streifen und Trichter */
.cp-strip { width: 100%; min-width: 560px; height: 54px; display: block; }
.cp-strip .bg { fill: var(--c-panel2); }
.cp-strip rect.ok { fill: var(--c-dim); } .cp-strip rect.chg { fill: var(--c-ok); } .cp-strip rect.err { fill: var(--c-bad); }
.cp-strip text { fill: var(--c-dim); font-size: 11px; text-anchor: middle; }
.cp-strip text:first-of-type { text-anchor: start; } .cp-strip text:last-of-type { text-anchor: end; }
.cp-err { color: var(--c-bad); font-weight: 700; }
.cp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c-dim); }
.cp-sw.chg, .cp-sw.done { background: var(--c-done); } .cp-sw.err, .cp-sw.fa { background: var(--c-fa); } .cp-sw.nd { background: var(--c-nd); }
.cp-sw.exp { background: var(--c-exp); } .cp-sw.open { background: var(--c-open); }
.cp-funnel { display: flex; flex-direction: column; gap: 8px; }
.cp-fn-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: .9em; }
.cp-fn-row > span { color: var(--c-muted); }
.cp-fn-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--c-panel2); }
.cp-fn-bar i { display: grid; place-items: center; min-width: 0; font-style: normal; font-size: .78em; font-weight: 800; color: #0b0f14; }
.cp-fn-bar i span { overflow: hidden; }
.cp-fn-bar .all { background: var(--c-accent); } .cp-fn-bar .touch { background: var(--c-touch); } .cp-fn-bar .rest { background: transparent; }
.cp-fn-bar .done { background: var(--c-done); } .cp-fn-bar .fa { background: var(--c-fa); } .cp-fn-bar .nd { background: var(--c-nd); }
.cp-fn-bar .exp { background: var(--c-exp); } .cp-fn-bar .open { background: var(--c-open); }

/* Baustellen */
.cp-issues ul { list-style: none; margin: 0; padding: 0; }
.cp-issues li { padding: 8px 10px 8px 12px; border-left: 3px solid var(--c-dim); background: var(--c-panel2); border-radius: 0 8px 8px 0; margin-bottom: 6px; font-size: .92em; }
.cp-issues li.bad { border-color: var(--c-bad); } .cp-issues li.warn { border-color: var(--c-warn); } .cp-issues li.ok { border-color: var(--c-ok); }
.cp-issues a { text-decoration: none; display: block; }
.cp-issues .cp-dim { display: block; font-size: .86em; }

@media (max-width: 700px) {
  .cp-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 6px; overflow: visible; }
  .cp-link { display: none; }
  .cp-fn-row { grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 6px; }
  .cp-title h1 { font-size: 1.35em; }
}
@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::before, .cp *::after { animation: none !important; }
}

/* ---------- Kartenlayout: Faelle als Tabelle, Hinweiszeile, "x von 14", Ursachen ---------- */
.kpi-tile b small { color: var(--muted); font-weight: 600; }
.kpi-of { display: flex; gap: 2px; justify-content: center; margin: 6px auto 4px; max-width: 170px; }
.kpi-of i { flex: 1; height: 8px; border-radius: 2px; background: var(--line); }
.kpi-of i.on { background: var(--warn); }
.tk-cases { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0; }
.tk-cases .tk-sec-head h3 { margin: 0; }
ul.cases { list-style: none; margin: 0; padding: 0; }
ul.cases li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
ul.cases li:first-child { border-top: 0; }
ul.cases .c-t { font-weight: 800; }
ul.cases .c-w { font-weight: 600; }
ul.cases .c-codes { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
ul.cases .c-codes small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--muted); font-size: 12px; }
.tk-note { display: flex; gap: 8px; margin: 10px 2px 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.tk-note span { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--infobg); color: var(--info); font-weight: 800; font-size: 13px; }
.sheet-label { margin: 10px 2px 6px; font-weight: 700; font-size: 14px; }
.chip-grid.causes .rchip { min-height: 46px; font-weight: 600; }
.chip-grid.causes .rchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Schluessel-Uebergabe (#/dev) */
.handover { background: var(--warnbg); border: 1px solid var(--warn); border-radius: 14px; padding: 4px 14px 12px; margin: 12px 0; }
.handover-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.handover-row > div:first-child { flex: 1 1 200px; }
.handover-key { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; }
.handover-key code { word-break: break-all; }