#knb-dash{
  --bg:#F1F1F1; --surface:#FFFFFF; --ink:#18222C; --muted:#5C6B7A;
  --hairline:#D8DEE6; --hairline-soft:#E7EBF0;
  --sev-1:#65C97A; --sev-2:#EAC645; --sev-3:#D8833B; --sev-4:#CB433C;
  --action:#1E5C97; --action-soft:#E3EDF6;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Consolas","Liberation Mono",monospace;
  --sans:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:6px;
  --shadow:0 1px 2px rgba(24,34,44,.06),0 4px 14px rgba(24,34,44,.05);
}
#knb-dash, #knb-dash *{box-sizing:border-box;margin:0;padding:0}
#knb-dash{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){#knb-dash *,#knb-dash *::before,#knb-dash *::after{animation:none!important;transition:none!important}}
#knb-dash{color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
#knb-dash a{color:var(--action)}
#knb-dash button{font:inherit;cursor:pointer}
#knb-dash :focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:3px}



/* ---------- Header ---------- */


/* Signature: Lageskala ribbon */
#knb-dash .lageskala{display:flex;height:10px;border-radius:5px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(24,34,44,.08)}
#knb-dash .lageskala div{transition:flex-grow .45s ease}
#knb-dash .skala-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
#knb-dash .skala-legend span{display:flex;align-items:center;gap:6px}
#knb-dash .skala-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---------- Filter ---------- */
#knb-dash .filterbar{position:sticky;top:var(--knb-sticky-top,0px);z-index:30;background:var(--bg);padding:14px 0 12px;border-bottom:1px solid var(--hairline);margin-bottom:24px}
#knb-dash .filter-rows{display:flex;flex-direction:column;gap:10px}
#knb-dash .frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#knb-dash .flabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:108px}
#knb-dash .chip{border:1px solid var(--hairline);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 13px;font-size:13px;line-height:1.2;transition:background .15s,border-color .15s}
#knb-dash .chip:hover{border-color:var(--action)}
#knb-dash .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
#knb-dash .chip.sev{background:var(--c);border-color:transparent;font-weight:600}
#knb-dash .chip.sev[aria-pressed="true"]{box-shadow:inset 0 0 0 2px rgba(24,34,44,.8)}
#knb-dash .chips-dimmed .chip.sev[aria-pressed="false"]{opacity:.4}
#knb-dash .chip.kat{display:inline-flex;align-items:center;gap:7px}
#knb-dash .chip.kat i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px rgba(24,34,44,.18)}
#knb-dash .chip.kat[aria-pressed="true"]{background:var(--c);border-color:transparent}
#knb-dash .chip.kat[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
#knb-dash .daterange{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
#knb-dash .daterange input{font:inherit;font-family:var(--mono);font-size:12.5px;border:1px solid var(--hairline);border-radius:var(--radius);padding:4px 7px;background:var(--surface);color:var(--ink)}
#knb-dash .reset{margin-left:auto;border:none;background:none;color:var(--action);font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:4px}
#knb-dash .reset[hidden]{display:none}
#knb-dash .activecount{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- KPI ---------- */
#knb-dash .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
#knb-dash .kpi{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px 14px;position:relative;overflow:hidden}
#knb-dash .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--hairline))}
#knb-dash .kpi .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#knb-dash .kpi .value{font-family:var(--mono);font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
#knb-dash .kpi .hint{font-size:12px;color:var(--muted);margin-top:3px}

/* ---------- Cards / Charts ---------- */
#knb-dash .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
#knb-dash .card{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
#knb-dash .card.full{grid-column:1/-1}
#knb-dash .card h2{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
#knb-dash .card .desc{font-size:12.5px;color:var(--muted);margin-top:2px;margin-bottom:12px}
#knb-dash svg{display:block;width:100%;height:auto}
#knb-dash svg text{font-family:var(--mono);fill:var(--muted)}
#knb-dash .bar-click{cursor:pointer}
#knb-dash .bar-click:hover rect.main{filter:brightness(.92)}
#knb-dash .axis line{stroke:var(--hairline-soft)}
#knb-dash .empty{padding:30px 0;text-align:center;color:var(--muted);font-size:13.5px}

/* Tooltip */
#knb-tip{position:fixed;z-index:99;pointer-events:none;background:#18222C;color:#fff;font-family:ui-monospace,"SF Mono","Cascadia Mono","Consolas","Liberation Mono",monospace;font-size:11.5px;line-height:1.5;padding:7px 10px;border-radius:5px;max-width:280px;opacity:0;transition:opacity .12s}
#knb-tip b{color:#fff;font-weight:600}
#knb-tip .trow{display:flex;gap:8px;justify-content:space-between}

/* ---------- Table ---------- */
#knb-dash .tablecard{padding:0;overflow:hidden}
#knb-dash .tablecard .thead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;padding:18px 20px 10px}
#knb-dash table{width:100%;border-collapse:collapse;font-size:13.5px}
#knb-dash th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:500;padding:8px 12px;border-bottom:1px solid var(--hairline)}
#knb-dash td{padding:9px 12px;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
#knb-dash tbody tr:hover{background:#F4F7FA}
#knb-dash td.date{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
#knb-dash td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
#knb-dash .sevdot{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#knb-dash .sevdot i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
#knb-dash .more{display:block;width:100%;border:none;background:none;color:var(--action);padding:13px;font-size:13px}
#knb-dash .more:hover{background:var(--action-soft)}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  #knb-dash .kpis{grid-template-columns:repeat(2,1fr)}
  #knb-dash .grid{grid-template-columns:1fr}
  #knb-dash .flabel{min-width:100%;margin-bottom:-2px}
  #knb-dash .reset{margin-left:0}
}
@media (max-width:560px){
  #knb-dash .kpis{grid-template-columns:1fr 1fr;gap:10px}
  #knb-dash .kpi{padding:12px 14px 11px}
  #knb-dash .hide-m{display:none}
  #knb-dash td,#knb-dash th{padding:8px}
}
#knb-dash td a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline)}
#knb-dash td a:hover{color:var(--action);border-color:var(--action)}
#knb-dash .lageskala-wrap{margin-bottom:18px}
#knb-dash .knb-grid-bottom{margin-top:14px}

/* Breakout: Dashboard bricht aus schmalen Theme-Containern aus */
#knb-dash.knb-breakout{
  width:var(--knb-vw,100vw);
  max-width:none;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  padding:24px 24px 32px;
  background:var(--bg);
}
#knb-dash.knb-breakout > *{
  max-width:var(--knb-maxw,1180px);
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:560px){
  #knb-dash.knb-breakout{padding-left:14px;padding-right:14px}
}