/* KIO Büro: Copiki variant of the mib design system (formats/html.md), values from the approved
   mockup docs/2026-10-19-kio-bedien-ui-mockups/uebersicht-v2.html. Tokens first, then components. */

:root {
  /* Brand */
  --color-primary: #C0143C;          /* Energy Red: CTAs, links, // kicker */
  --color-primary-hover: #960F2F;
  --color-primary-faint: #FCEEF1;
  --color-row-hover: #FBF3F5;
  --color-orange: #EF8200;
  --color-cyan: #00677F;

  /* Surfaces and lines */
  --surface: #FFFFFF;
  --surface-cloud: #F2F2F3;          /* Cloud Grey: table head, avatar */
  --surface-faint: #FAFAFA;          /* dialog summary column */
  --dim-modal: rgba(19, 19, 19, .32); /* backdrop behind a dialog (above the Akte's own dim) */
  --shadow-dialog: 0 8px 24px rgba(0, 0, 0, .12);
  --border-subtle: #DDDDE0;
  --border-row: #EEEEF0;

  /* Text */
  --text-strong: #131313;            /* headings, figures */
  --text-cell: #2E2E31;              /* table cells */
  --text-body: #616265;              /* body, labels */
  --text-muted: #8E8F92;             /* secondary lines, placeholders */

  /* Chips (pill badges) */
  --chip-bg: #F2F2F3;        --chip-text: #2E2E31;        --chip-border: #DDDDE0;
  --chip-red-bg: #F9E7EC;    --chip-red-text: #C0143C;    --chip-red-border: #E6A1B1;
  --chip-orange-bg: #FDEBD6; --chip-orange-text: #9A5200; --chip-orange-border: #F5C48A;
  --chip-cyan-bg: #E0EFF2;   --chip-cyan-text: #00677F;   --chip-cyan-border: #9CC5CF;

  /* Notices */
  --warn-bg: #FEF4E6;  --warn-border: #F5C48A;  --warn-text: #9A5200;
  --error-bg: #FCEEF1; --error-border: #E6A1B1; --error-text: #960F2F;

  /* Hexagon cluster */
  --hex-grey: #DFE0E1;

  /* Shape, focus, motion, type */
  --radius-sm: 4px;      /* controls */
  --radius-md: 6px;      /* cards, tiles */
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-focus: 0 0 0 3px rgba(192, 20, 60, 0.5);
  --dur-fast: 150ms;
  --font-ui: "Open Sans", "Segoe UI", Calibri, Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; }
}

/* ---- Base ---- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

.kb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.kb-muted { color: var(--text-muted); font-size: 11px; }
.kb-loading { color: var(--text-muted); }

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

.kb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface); position: relative; overflow: hidden;
}
.kb-logo { height: 26px; display: block; }
.kb-hex { position: absolute; right: 180px; top: -8px; width: 86px; height: 60px; }
.kb-hex-grey { fill: var(--hex-grey); }
.kb-hex-red { fill: var(--color-primary); }
.kb-hex-orange { fill: var(--color-orange); }
.kb-nav { display: flex; gap: 22px; font-weight: 700; font-size: 13px; color: var(--text-body); }
.kb-nav span { padding: 6px 0; }
.kb-nav .active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.kb-user { font-size: 12px; color: var(--text-body); display: flex; align-items: center; gap: 8px; position: relative; }
.kb-user:has(#kb-user-name:empty) { visibility: hidden; } /* not signed in yet */
.kb-user i {
  width: 24px; height: 24px; border-radius: 50%; display: inline-block;
  background: var(--surface-cloud); border: 1px solid var(--border-subtle);
}

/* ---- Banners ---- */

#kb-banner:empty { display: none; }
#kb-banner { padding: 12px 24px 0; }

.kb-error {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--error-bg); border: 1px solid var(--error-border); border-radius: var(--radius-md);
  color: var(--error-text); padding: 10px 14px;
}
.kb-error-msg { flex: 1; margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }

.kb-hints {
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-md);
  color: var(--warn-text); padding: 8px 12px; margin: 0 0 14px;
}
.kb-hints summary { font-weight: 700; cursor: pointer; }
.kb-hints ul { margin: 6px 0 2px; padding-left: 18px; }
.kb-hints li { overflow-wrap: anywhere; }

/* ---- Page body ---- */

.kb-body { padding: 18px 24px 20px; background: var(--surface); }

.kb-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary);
}
.kb-h1 { font-size: 20px; font-weight: 800; color: var(--text-strong); margin: 2px 0 14px; letter-spacing: -.01em; line-height: 1.3; }
.kb-h1 small { font-size: 12px; font-weight: 400; color: var(--text-body); margin-left: 10px; letter-spacing: 0; }

/* ---- KPI tiles ---- */

.kb-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.kb-kpi-tile { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; }
.kb-kpi-tile b { display: block; font-size: 20px; font-weight: 800; color: var(--text-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kb-kpi-tile span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--text-body); }

/* ---- Filter row ---- */

.kb-filter { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.kb-spacer { flex: 1; }
.kb-input {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 10px;
  font-size: 12px; color: var(--text-cell); background: var(--surface); min-width: 220px;
  transition: border-color var(--dur-fast);
}
.kb-input::placeholder { color: var(--text-muted); }
.kb-input:hover { border-color: var(--text-muted); }
.kb-input:focus-visible { border-color: var(--color-primary); }

/* ---- Buttons ---- */

.kb-btn {
  display: inline-block; padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--color-primary);
  font-weight: 700; font-size: 12px; line-height: 1.45; background: var(--color-primary); color: var(--surface);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.kb-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.kb-btn.ghost { background: var(--surface); color: var(--color-primary); border-color: var(--color-primary); }
.kb-btn.ghost:hover { background: var(--color-primary-faint); color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.kb-btn.grey { background: var(--surface); color: var(--text-body); border-color: var(--border-subtle); }
.kb-btn.grey:hover { color: var(--text-cell); border-color: var(--text-body); }
.kb-btn.sm { padding: 4px 9px; font-size: 11px; }
.kb-btn:disabled, .kb-btn:disabled:hover {
  cursor: not-allowed; background: var(--surface); color: var(--text-muted); border-color: var(--border-subtle);
}

/* Customer name: a button that reads as a link */
.kb-cust {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  color: var(--color-primary); font-weight: 700;
  transition: color var(--dur-fast);
}
.kb-cust:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Table ---- */

.kb-table-wrap { overflow-x: auto; }
.kb-table { width: 100%; border-collapse: collapse; }
.kb-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-body);
  font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--border-subtle); background: var(--surface-cloud);
  white-space: nowrap;
}
.kb-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-row); vertical-align: middle; color: var(--text-cell); }
.kb-table td.num, .kb-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.kb-table td b { color: var(--text-strong); font-weight: 700; }
.kb-table tr[data-search]:hover td { background: var(--color-row-hover); }
.kb-table td.kb-actions { white-space: nowrap; text-align: right; }
.kb-table td.kb-empty { color: var(--text-body); text-align: center; padding: 22px 10px; }

.kb-warn { color: var(--warn-text); font-size: 11px; font-weight: 600; }

/* ---- Chips ---- */

.kb-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border);
  margin: 1px 4px 1px 0; white-space: nowrap;
}
.kb-chip.red { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: var(--chip-red-border); }
.kb-chip.orange { background: var(--chip-orange-bg); color: var(--chip-orange-text); border-color: var(--chip-orange-border); }
.kb-chip.cyan { background: var(--chip-cyan-bg); color: var(--chip-cyan-text); border-color: var(--chip-cyan-border); }
.kb-chip.grey { color: var(--text-body); }

/* ---- Akte side panel (mockup uebersicht-v2.html, variant 2) ---- */

.kb-dim { position: fixed; inset: 0; background: rgba(46, 46, 49, .18); z-index: 10; }
.kb-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 56%; min-width: 520px; z-index: 11;
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border-subtle); box-shadow: -8px 0 24px rgba(0, 0, 0, .14);
}
.kb-panel-scroll { flex: 1; overflow-y: auto; padding: 18px 22px 12px; position: relative; }
.kb-close {
  position: absolute; right: 16px; top: 10px; width: 28px; height: 28px; line-height: 1;
  background: none; border: 0; font-size: 22px; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.kb-close:hover { color: var(--text-strong); }
.kb-h2 { font-size: 17px; font-weight: 800; color: var(--text-strong); margin: 2px 0 0; }
.kb-meta { margin: 2px 0 12px; color: var(--text-body); font-size: 12px; }
.kb-meta b { color: var(--text-cell); }
.kb-kpi.three { grid-template-columns: repeat(3, 1fr); }
.kb-findings { list-style: none; margin: 0 0 12px; padding: 0; }
.kb-findings li { padding: 6px 10px; margin-bottom: 4px; border-radius: var(--radius-sm); font-size: 12px; overflow-wrap: anywhere; }
.kb-findings li.hint { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); }
.kb-findings li.blocking { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); font-weight: 600; }
.kb-sec { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.kb-sec h3 { margin: 0; font-size: 12px; font-weight: 800; color: var(--text-strong); text-transform: uppercase; letter-spacing: .08em; }
.kb-table.compact td, .kb-table.compact th { padding: 6px 8px; }
.kb-notreg { margin: 6px 0 0; }
.kb-reason { margin-top: 3px; max-width: 28ch; white-space: normal; text-align: right; font-size: 11px; font-weight: 400; color: var(--text-body); }
.kb-hintrow td { padding-top: 0; }
.kb-invhints { white-space: pre-line; font-size: 11px; color: var(--warn-text); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 5px 8px; overflow-wrap: anywhere; }
.kb-nextprev { display: flex; justify-content: space-between; padding: 10px 22px; border-top: 1px solid var(--border-subtle); font-size: 12px; }

@media (max-width: 760px) {
  .kb-panel { width: 100%; min-width: 0; }
}

/* ---- Dialogs (mockup formulare.html); #kb-dialog stacks above the Akte (dim 10, panel 11) ---- */

.kb-modal {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.kb-modal-dim { position: fixed; inset: 0; background: var(--dim-modal); }
.kb-dlg {
  position: relative; width: 100%; max-width: 980px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}
.kb-dlg:focus { outline: none; }
.kb-dlg-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--border-subtle);
}
.kb-dlg-title { font-size: 17px; font-weight: 800; color: var(--text-strong); margin: 0; }
.kb-dlg-x {
  width: 28px; height: 28px; line-height: 1; flex: none;
  background: none; border: 0; font-size: 22px; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.kb-dlg-x:hover { color: var(--text-strong); }
.kb-dlg-x:disabled { cursor: not-allowed; }
.kb-dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kb-dlg-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border-subtle); background: var(--surface);
}
.kb-dlg-foot .kb-btn { padding: 8px 14px; font-size: 12.5px; }
.kb-dlg-pad { margin: 18px 22px; }

/* Notes inside dialogs: info (cyan), warn (orange), err (red) */
.kb-note {
  border-left: 3px solid var(--border-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 10px; margin-top: 8px; font-size: 12px; overflow-wrap: anywhere;
}
.kb-note.info { border-left-color: var(--color-cyan); background: var(--chip-cyan-bg); color: var(--chip-cyan-text); }
.kb-note.warn { border-left-color: var(--color-orange); background: var(--chip-orange-bg); color: var(--warn-text); }
.kb-note.err { border-left-color: var(--color-primary); background: var(--chip-red-bg); color: var(--chip-red-text); }
.kb-note ul { margin: 0; padding-left: 16px; }

/* Form parts */
.kb-lbl {
  display: block; margin: 14px 0 6px; padding: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-body);
}
.kb-req { color: var(--color-primary); }
.kb-field {
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color var(--dur-fast);
}
.kb-field:hover { border-color: var(--text-muted); }
.kb-field:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.kb-field.bad { border-color: var(--color-primary); }
.kb-field.ro { background: var(--surface-cloud); }
.kb-field input {
  flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent;
  font-size: 13px; color: var(--text-cell);
}
.kb-field input:focus-visible { box-shadow: none; }
.kb-field input::placeholder { color: var(--text-muted); }
.kb-field.ro input { color: var(--text-body); }
.kb-field select {
  flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent;
  font-size: 13px; color: var(--text-cell);
}
.kb-field select:focus-visible { box-shadow: none; }
.kb-opt-gap { margin-bottom: 8px; }
.kb-st-title { margin: 6px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.kb-field .hint { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.kb-fielderr { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--error-text); }
.kb-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kb-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kb-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.kb-fs > legend { float: left; width: 100%; } /* a floated legend takes part in normal flow and margins */
.kb-fs > legend + * { clear: both; }
.kb-opt { display: flex; flex-wrap: wrap; gap: 14px; }
.kb-opt label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-cell); cursor: pointer; }
.kb-dlg input[type="radio"], .kb-dlg input[type="checkbox"] { accent-color: var(--color-primary); margin: 0; }
.kb-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; cursor: pointer; }
.kb-check input { margin-top: 2px; flex: none; }

/* ---- Dialog "Lizenz buchen" ---- */

/* The summary stays in view while the form scrolls; the grey column comes from the grid's own background. */
.kb-bk { display: grid; grid-template-columns: minmax(0, 1fr) 330px; background: var(--surface-faint); }
.kb-bk-form { padding: 18px 22px 20px; border-right: 1px solid var(--border-subtle); background: var(--surface); }
.kb-bk-form > .kb-lbl:first-child { margin-top: 0; }
.kb-bk-side { padding: 18px 20px; position: sticky; top: 0; align-self: start; }
.kb-fs { margin-top: 14px; }
.kb-fs > legend.kb-lbl { margin-top: 0; }

.kb-pick {
  margin-top: 6px; max-height: 168px; overflow-y: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.kb-pick-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border-row); color: var(--text-cell); cursor: pointer;
}
.kb-pick-item:hover { background: var(--color-row-hover); }
.kb-pick-item.sel { background: var(--color-primary-faint); }
.kb-pick-item b { color: var(--text-strong); }
.kb-pick-none { margin: 0; padding: 8px 10px; color: var(--text-body); }
.kb-pick-item.disabled { opacity: .55; cursor: not-allowed; }
.kb-pick-item.disabled:hover { background: transparent; }
.kb-pick-hint { margin: 0; padding: 8px 10px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border-subtle); }

.kb-lic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kb-lic-grp {
  grid-column: 1 / -1; padding: 6px 0 0;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
}
.kb-card {
  position: relative; display: block; padding: 9px 30px 9px 11px; cursor: pointer;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast);
}
.kb-card:hover { border-color: var(--text-muted); }
.kb-card.sel { border: 2px solid var(--color-primary); padding: 8px 29px 8px 10px; }
.kb-card.sel::after { content: "✓"; content: "✓" / ""; position: absolute; right: 10px; top: 7px; font-weight: 800; color: var(--color-primary); }
.kb-card:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.kb-card b { display: block; font-size: 13px; color: var(--text-strong); }
.kb-card span { display: block; font-size: 11.5px; color: var(--text-body); }
.kb-card em { display: block; margin-top: 2px; font-style: normal; font-weight: 700; font-size: 12px; color: var(--text-cell); }
.kb-card em.kb-warn { color: var(--warn-text); }
.kb-card.dis { cursor: not-allowed; background: var(--surface-cloud); }
.kb-card.dis b, .kb-card.dis span { color: var(--text-muted); }

.kb-first { margin-top: 14px; }
.kb-errors { margin-top: 14px; font-weight: 600; }
.kb-errors:focus { outline: none; }

.kb-bk-side h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-body);
}
.kb-bk-side table { width: 100%; border-collapse: collapse; }
.kb-bk-side td { padding: 5px 0; border-bottom: 1px solid var(--border-row); font-size: 12.5px; color: var(--text-cell); vertical-align: top; }
.kb-bk-side td.num { padding-left: 10px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-bk-side tr.total td {
  border-bottom: 0; border-top: 2px solid var(--border-subtle); padding-top: 8px;
  font-size: 15px; font-weight: 800; color: var(--text-strong);
}
.kb-bk-side td b { color: var(--text-strong); }
.kb-sum-after { margin-top: 10px; }
.kb-sum-note { margin: 6px 0 0; }
.kb-sum-empty { margin: 0; color: var(--text-body); }
.kb-facts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-body); }
.kb-facts div { position: relative; margin-bottom: 6px; padding-left: 16px; }
.kb-facts div::before { content: "//"; position: absolute; left: 0; font-weight: 700; color: var(--color-primary); }
.kb-facts b { color: var(--text-cell); }

@media (max-width: 760px) {
  .kb-modal { padding: 12px; }
  .kb-dlg { max-height: calc(100vh - 24px); }
  .kb-dlg-head, .kb-dlg-foot { padding-left: 16px; padding-right: 16px; }
  .kb-bk { grid-template-columns: 1fr; }
  .kb-bk-form { padding: 16px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .kb-bk-side { padding: 16px; }
  .kb-lic, .kb-row2, .kb-row3 { grid-template-columns: 1fr; }
}

/* ---- Narrow screens ---- */

@media (max-width: 760px) {
  .kb-top { padding: 10px 16px; }
  .kb-hex, .kb-nav { display: none; }
  .kb-body, #kb-banner { padding-left: 16px; padding-right: 16px; }
  .kb-kpi { grid-template-columns: repeat(2, 1fr); }
  .kb-filter { flex-wrap: wrap; }
  .kb-input { min-width: 0; flex: 1 1 100%; }
}