/* Soverra — Color tokens
   Calm-but-fresh palette: warm paper neutrals, a modern Azur blue primary, a Mint secondary
   accent for guided moments, a restrained "verified" green, plus pending-amber and
   rejected-red status hues. Built in oklch for perceptually even scales. */

:root {
  /* ---- Warm neutral scale (the paper + ink spine of the system) ---- */
  --neutral-0:   oklch(1     0      0);        /* pure white — top surface        */
  --neutral-25:  oklch(0.992 0.003 90);        /* faint warm paper                */
  --neutral-50:  oklch(0.978 0.004 88);        /* canvas / app background         */
  --neutral-100: oklch(0.958 0.005 86);        /* sunken surface, table zebra     */
  --neutral-150: oklch(0.935 0.006 84);        /* hairline fill                   */
  --neutral-200: oklch(0.908 0.007 82);        /* default border                  */
  --neutral-300: oklch(0.845 0.009 80);        /* strong border / divider         */
  --neutral-400: oklch(0.715 0.010 78);        /* disabled text, placeholder      */
  --neutral-500: oklch(0.585 0.011 74);        /* tertiary text, icons            */
  --neutral-600: oklch(0.488 0.012 70);        /* secondary text                  */
  --neutral-700: oklch(0.388 0.013 64);        /* body-strong                     */
  --neutral-800: oklch(0.298 0.013 58);        /* headings                        */
  --neutral-900: oklch(0.228 0.013 56);        /* primary ink                     */
  --neutral-950: oklch(0.175 0.012 54);        /* deepest ink, app rail           */

  /* ---- Brand: modern Azur blue (hue ~244) ---- */
  --brand-50:  oklch(0.967 0.026 240);
  --brand-100: oklch(0.930 0.052 241);
  --brand-200: oklch(0.872 0.092 242);
  --brand-300: oklch(0.790 0.124 243);
  --brand-400: oklch(0.692 0.152 244);
  --brand-500: oklch(0.610 0.162 244);
  --brand-600: oklch(0.545 0.165 245);   /* primary action                       */
  --brand-700: oklch(0.470 0.150 247);   /* hover / pressed                      */
  --brand-800: oklch(0.398 0.122 249);
  --brand-900: oklch(0.322 0.090 251);

  /* ---- Secondary accent: Mint (hue ~168) — used only in guided moments ---- */
  --mint-50:  oklch(0.962 0.030 168);
  --mint-100: oklch(0.918 0.054 168);
  --mint-200: oklch(0.858 0.078 168);
  --mint-500: oklch(0.700 0.118 168);
  --mint-600: oklch(0.620 0.112 169);
  --mint-700: oklch(0.500 0.094 170);

  /* ---- Verified green (hue ~158) ---- */
  --green-50:  oklch(0.962 0.028 158);
  --green-100: oklch(0.915 0.050 158);
  --green-500: oklch(0.625 0.118 158);
  --green-600: oklch(0.545 0.115 158);
  --green-700: oklch(0.455 0.098 158);

  /* ---- Pending amber (hue ~75) ---- */
  --amber-50:  oklch(0.968 0.030 82);
  --amber-100: oklch(0.930 0.058 80);
  --amber-500: oklch(0.790 0.130 75);
  --amber-600: oklch(0.700 0.135 68);
  --amber-700: oklch(0.560 0.110 60);

  /* ---- Rejected red (hue ~27) ---- */
  --red-50:  oklch(0.958 0.022 27);
  --red-100: oklch(0.915 0.042 27);
  --red-500: oklch(0.605 0.182 27);
  --red-600: oklch(0.535 0.190 27);
  --red-700: oklch(0.455 0.165 27);

  /* ---- Shadow ink (warm, used in elevation.css) ---- */
  --shadow-color: 270 6% 14%;

  /* =========================================================
     Semantic aliases — reference these in components, not the raw scale
     ========================================================= */

  /* Surfaces */
  --canvas:           var(--neutral-50);
  --surface:          var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-raised:   var(--neutral-0);
  --surface-hover:    var(--neutral-100);
  --surface-active:   var(--neutral-150);
  --surface-inverse:  var(--neutral-950);

  /* Text */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-disabled:   var(--neutral-400);
  --text-on-brand:   var(--neutral-0);
  --text-on-inverse: var(--neutral-100);
  --text-link:       var(--brand-700);

  /* Borders */
  --border-subtle:   var(--neutral-150);
  --border-default:  var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --border-inverse:  oklch(1 0 0 / 0.12);

  /* Brand / accent (Azur) */
  --accent:          var(--brand-600);
  --accent-hover:    var(--brand-700);
  --accent-active:   var(--brand-800);
  --accent-soft:     var(--brand-50);
  --accent-soft-hover: var(--brand-100);
  --accent-border:   var(--brand-200);
  --accent-text:     var(--brand-700);

  /* Secondary accent (Mint) — fresh highlight for guided/active moments only.
     Use sparingly: next-step indicators, completeness progress, "in Arbeit" emphasis.
     Not a status color (that's the closed StatusPill set) and never a second primary. */
  --accent-2:        var(--mint-600);
  --accent-2-hover:  var(--mint-700);
  --accent-2-soft:   var(--mint-50);
  --accent-2-border: var(--mint-200);
  --accent-2-text:   var(--mint-700);
  --accent-2-solid:  var(--mint-500);

  /* Focus */
  --focus-ring:      var(--brand-400);
  --focus-ring-soft: oklch(0.692 0.152 244 / 0.32);

  /* Status — verified */
  --status-verified-fg:     var(--green-700);
  --status-verified-bg:     var(--green-50);
  --status-verified-border: var(--green-100);
  --status-verified-solid:  var(--green-600);

  /* Status — pending / in review */
  --status-pending-fg:     var(--amber-700);
  --status-pending-bg:     var(--amber-50);
  --status-pending-border: var(--amber-100);
  --status-pending-solid:  var(--amber-500);

  /* Status — needs action (brand-toned) */
  --status-action-fg:     var(--brand-700);
  --status-action-bg:     var(--brand-50);
  --status-action-border: var(--brand-100);
  --status-action-solid:  var(--brand-600);

  /* Status — rejected / flagged */
  --status-rejected-fg:     var(--red-700);
  --status-rejected-bg:     var(--red-50);
  --status-rejected-border: var(--red-100);
  --status-rejected-solid:  var(--red-600);

  /* Status — neutral / draft */
  --status-neutral-fg:     var(--neutral-600);
  --status-neutral-bg:     var(--neutral-100);
  --status-neutral-border: var(--neutral-200);
}
/* Soverra — Typography tokens */

:root {
  /* Families */
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  800;

  /* Type scale — size / line-height pairs.
     Base body is 15px for calm, document-like density. */
  --text-2xs:  11px;   --leading-2xs:  15px;
  --text-xs:   12px;   --leading-xs:   16px;
  --text-sm:   13px;   --leading-sm:   18px;
  --text-base: 15px;   --leading-base: 22px;
  --text-md:   17px;   --leading-md:   26px;
  --text-lg:   20px;   --leading-lg:   28px;
  --text-xl:   24px;   --leading-xl:   31px;
  --text-2xl:  30px;   --leading-2xl:  37px;
  --text-3xl:  38px;   --leading-3xl:  44px;
  --text-4xl:  48px;   --leading-4xl:  53px;
  --text-5xl:  60px;   --leading-5xl:  64px;
  --text-6xl:  76px;   --leading-6xl:  80px;

  /* Tracking */
  --tracking-tighter: -0.03em;   /* large display                     */
  --tracking-tight:   -0.015em;  /* headings                          */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.08em;    /* uppercase eyebrows / overlines    */

  /* Semantic roles */
  --font-display:  var(--weight-display) var(--text-5xl)/var(--leading-5xl) var(--font-sans);
  --font-h1:       var(--weight-bold) var(--text-3xl)/var(--leading-3xl) var(--font-sans);
  --font-h2:       var(--weight-bold) var(--text-2xl)/var(--leading-2xl) var(--font-sans);
  --font-h3:       var(--weight-semibold) var(--text-xl)/var(--leading-xl) var(--font-sans);
  --font-h4:       var(--weight-semibold) var(--text-lg)/var(--leading-lg) var(--font-sans);
  --font-body-lg:  var(--weight-regular) var(--text-md)/var(--leading-md) var(--font-sans);
  --font-body:     var(--weight-regular) var(--text-base)/var(--leading-base) var(--font-sans);
  --font-body-sm:  var(--weight-regular) var(--text-sm)/var(--leading-sm) var(--font-sans);
  --font-label:    var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-sans);
  --font-caption:  var(--weight-regular) var(--text-xs)/var(--leading-xs) var(--font-sans);
  --font-mono-sm:  var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-mono);
}
/* Soverra — Spacing & layout tokens. 4px base grid. */

:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout rhythm */
  --gutter:        var(--space-6);   /* default content padding          */
  --gutter-tight:  var(--space-4);
  --section-y:     var(--space-20);  /* marketing section vertical rhythm */
  --content-max:   1200px;           /* marketing content width           */
  --prose-max:     680px;            /* readable prose measure            */
  --rail-width:    260px;            /* workspace left rail               */
  --panel-width:   400px;            /* workspace right detail panel      */

  /* Control heights (keep inputs + buttons aligned) */
  --control-h-sm:  32px;
  --control-h-md:  40px;
  --control-h-lg:  48px;
}
/* Soverra — Elevation: radii, borders, shadows.
   Shape language is "mixed": soft cards, crisp inputs, full pills.
   Shadows are calm and low-contrast — they suggest layering, never drama. */

:root {
  /* Radii */
  --radius-xs:   4px;    /* tags, small chips                 */
  --radius-sm:   6px;    /* inputs, buttons (sm)              */
  --radius-md:   8px;    /* buttons, selects, menu items      */
  --radius-lg:   12px;   /* cards, panels                     */
  --radius-xl:   16px;   /* large surfaces, dialogs           */
  --radius-2xl:  20px;   /* hero / feature cards              */
  --radius-3xl:  28px;
  --radius-full: 999px;  /* pills, avatars, switches          */

  /* Border widths */
  --border-hairline: 1px;
  --border-medium:   1.5px;
  --border-thick:    2px;

  /* Shadows — warm ink (--shadow-color set in colors.css) */
  --shadow-xs:  0 1px 1px  hsl(var(--shadow-color) / 0.05);
  --shadow-sm:  0 1px 2px  hsl(var(--shadow-color) / 0.06),
                0 1px 1px  hsl(var(--shadow-color) / 0.04);
  --shadow-md:  0 2px 4px  hsl(var(--shadow-color) / 0.05),
                0 6px 16px -4px hsl(var(--shadow-color) / 0.10);
  --shadow-lg:  0 4px 8px  hsl(var(--shadow-color) / 0.05),
                0 16px 32px -8px hsl(var(--shadow-color) / 0.14);
  --shadow-xl:  0 8px 16px hsl(var(--shadow-color) / 0.06),
                0 28px 56px -12px hsl(var(--shadow-color) / 0.20);

  /* Inner shadow for sunken / pressed surfaces */
  --shadow-inner: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);

  /* Focus ring — paired with a 1px white gap for crispness */
  --ring-focus:  0 0 0 3px var(--focus-ring-soft);
  --ring-offset: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring-soft);
}
/* Soverra — Motion tokens.
   Calm and precise: short durations, no bounce, gentle deceleration.
   Movement is small (2–8px) and always paired with opacity. */

:root {
  /* Durations */
  --dur-instant: 80ms /* @kind other */;
  --dur-fast: 140ms /* @kind other */;
  --dur-base: 220ms /* @kind other */;
  --dur-slow: 340ms /* @kind other */;
  --dur-slower: 520ms /* @kind other */;

  /* Easing — default UI / entrances / exits / between-states */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */

  /* Composed transitions */
  --transition-colors: color var(--dur-fast) var(--ease-standard),
                       background-color var(--dur-fast) var(--ease-standard),
                       border-color var(--dur-fast) var(--ease-standard);
  --transition-base:   all var(--dur-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms /* @kind other */;
    --dur-fast: 0ms /* @kind other */;
    --dur-base: 0ms /* @kind other */;
    --dur-slow: 0ms /* @kind other */;
    --dur-slower: 0ms /* @kind other */;
  }
}
/* Soverra — base reset + element defaults.
   Light-touch: normalizes the box model and sets brand typography on the document.
   Components style themselves; this just makes raw HTML look on-brand. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--font-body);
  color: var(--text-primary);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font: var(--font-h1); letter-spacing: var(--tracking-tight); }
h2 { font: var(--font-h2); letter-spacing: var(--tracking-tight); }
h3 { font: var(--font-h3); }
h4 { font: var(--font-h4); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

hr {
  border: none;
  border-top: var(--border-hairline) solid var(--border-default);
  margin: var(--space-6) 0;
}

/* Utility: monospaced reference label (case IDs, document refs) */
.kw-ref {
  font: var(--font-mono-sm);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* Utility: uppercase eyebrow / overline */
.kw-eyebrow {
  font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* =====================================================================
   Soverra – App-Shell & Komponenten (Twig-Anwendung)
   Layout: globaler Header oben, darunter helle Rail + Content.
   ===================================================================== */

.kw-app { display: flex; flex-direction: column; height: 100vh; background: var(--canvas); }

/* ---- Globaler Header ---- */
.kw-header { display: flex; align-items: center; gap: var(--space-4); height: 60px; flex: none; padding: 0 var(--space-5); background: var(--surface); border-bottom: var(--border-hairline) solid var(--border-default); z-index: 5; }
.kw-header__brand { display: flex; align-items: center; gap: var(--space-2-5); width: var(--rail-width); flex: none; }
.kw-header__brand img { display: block; height: 30px; width: auto; border-radius: 8px; }
.kw-header__brandname { font: var(--weight-bold) 19px var(--font-sans); letter-spacing: -0.02em; color: var(--text-primary); }
.kw-search { position: relative; flex: 1; max-width: 420px; }
.kw-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-tertiary); }
.kw-search input { width: 100%; height: var(--control-h-sm); padding: 0 var(--space-3) 0 34px; border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); background: var(--neutral-25); color: var(--text-primary); font: var(--font-body-sm); }
.kw-search input:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--ring-focus); background: var(--surface); }
.kw-header__grow { flex: 1; }
.kw-header__tools { display: flex; align-items: center; gap: var(--space-1); }
.kw-iconbtn { width: 36px; height: 36px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: var(--border-hairline) solid transparent; color: var(--text-tertiary); cursor: pointer; transition: var(--transition-colors); position: relative; }
.kw-iconbtn:hover { background: var(--surface-hover); color: var(--text-secondary); }
.kw-iconbtn svg { width: 18px; height: 18px; }
.kw-iconbtn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--amber-500); border: 1.5px solid var(--surface); }
.kw-header__div { width: 1px; height: 26px; background: var(--border-default); margin: 0 var(--space-2); }
.kw-header__user { display: flex; align-items: center; gap: var(--space-2-5); text-decoration: none; color: inherit; border-radius: 10px; padding: 4px 6px; transition: background .12s; }
.kw-header__user:hover { background: hsl(var(--shadow-color) / 0.05); }
.kw-header__user .name { font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans); color: var(--text-primary); }
.kw-header__user .org { font: var(--font-caption); color: var(--text-tertiary); }
.kw-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-800); font: var(--weight-semibold) 12px/1 var(--font-sans); border: 1px solid hsl(var(--shadow-color) / 0.06); }

/* ---- Shell-Body: Rail + Main ---- */
.kw-shell-body { display: flex; flex: 1; min-height: 0; }

/* ---- Helle Rail ---- */
.kw-rail { width: var(--rail-width); flex: none; display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); border-right: var(--border-hairline) solid var(--border-default); background: var(--neutral-25); overflow-y: auto; }
.kw-nav { display: flex; flex-direction: column; gap: var(--space-0-5); }
.kw-nav__label { font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-2-5) var(--space-2-5) var(--space-1-5); }
.kw-nav__item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font: var(--weight-medium) var(--text-base)/1 var(--font-sans); transition: var(--transition-colors); }
.kw-nav__item svg { width: 18px; height: 18px; flex: none; color: var(--text-tertiary); }
.kw-nav__item:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.kw-nav__item.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-semibold); }
.kw-nav__item.is-active svg { color: var(--accent); }
.kw-nav__count { margin-left: auto; font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); padding: 2px 7px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-tertiary); }
.kw-nav__item.is-active .kw-nav__count { background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent-border); }
.kw-rail__spacer { flex: 1; }
.kw-rail__card { padding: var(--space-3-5, 14px); border-radius: var(--radius-lg); background: var(--surface); border: var(--border-hairline) solid var(--border-default); }
.kw-rail__card .t { font: var(--weight-semibold) var(--text-sm) var(--font-sans); color: var(--text-primary); margin-bottom: 3px; }
.kw-rail__card .d { font: var(--font-caption); color: var(--text-secondary); margin-bottom: var(--space-2-5); }

/* ---- Main / Content ---- */
.kw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.kw-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-8); border-bottom: var(--border-hairline) solid var(--border-subtle); background: var(--surface); }
.kw-topbar__actions { display: flex; gap: var(--space-2); flex: none; padding-top: var(--space-1); }
.kw-topbar .sub { color: var(--text-secondary); font: var(--font-body-sm); margin-top: var(--space-1); }
.kw-content { padding: var(--space-8); max-width: 1080px; width: 100%; }

/* ---- Auth (Login) ---- */
.kw-app--auth { display: flex; align-items: center; justify-content: center; background: var(--canvas); min-height: 100vh; }
.kw-auth { width: 100%; max-width: 400px; padding: var(--space-6); }
.kw-auth__brand { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.kw-auth__brand img { height: 40px; }

/* ---- Card ---- */
.kw-card { background: var(--surface); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); margin-bottom: var(--space-5); }
.kw-card__title { font: var(--font-h4); margin-bottom: var(--space-4); }
.kw-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }

/* ---- Buttons ---- */
.kw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h-md); padding: 0 var(--space-4); border-radius: var(--radius-md); border: var(--border-hairline) solid transparent; font: var(--weight-semibold) var(--text-base)/1 var(--font-sans); letter-spacing: 0.005em; cursor: pointer; text-decoration: none; transition: var(--transition-colors); white-space: nowrap; }
.kw-btn:hover { text-decoration: none; }
.kw-btn svg { width: 17px; height: 17px; }
.kw-btn--primary { background: var(--accent); color: var(--text-on-brand); box-shadow: var(--shadow-xs); }
.kw-btn--primary:hover { background: var(--accent-hover); }
.kw-btn--primary:active { background: var(--accent-active); }
.kw-btn--secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.kw-btn--secondary:hover { background: var(--surface-hover); border-color: var(--neutral-400); }
.kw-btn--ghost { background: transparent; color: var(--text-secondary); }
.kw-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.kw-btn--soft { background: var(--accent-soft); color: var(--accent-text); }
.kw-btn--soft:hover { background: var(--accent-soft-hover); }
.kw-btn--danger { background: var(--red-600); color: var(--neutral-0); box-shadow: var(--shadow-xs); }
.kw-btn--danger:hover { background: var(--red-700); }
.kw-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); }
.kw-btn--sm svg { width: 15px; height: 15px; }
.kw-btn--block { width: 100%; }

/* ---- Forms ---- */
.kw-form label { display: block; font: var(--font-label); color: var(--text-secondary); margin-bottom: var(--space-1); }
.kw-form input[type=text], .kw-form input[type=email], .kw-form input[type=password],
.kw-form input[type=number], .kw-form input[type=date], .kw-form input[type=tel],
.kw-form input[type=url],
.kw-form select, .kw-form textarea {
  width: 100%; height: var(--control-h-md); padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); transition: var(--transition-colors); }
.kw-form textarea { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); }
.kw-form input:focus, .kw-form select:focus, .kw-form textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--ring-focus); }
.kw-form > div { margin-bottom: var(--space-5); }
.kw-form input[type=checkbox], .kw-form input[type=radio] { width: 16px; height: 16px; accent-color: var(--brand-600); margin-right: var(--space-2); vertical-align: -2px; }
.kw-form fieldset { border: none; padding: 0; margin: 0 0 var(--space-5); }
.kw-form fieldset legend { font: var(--font-label); color: var(--text-secondary); margin-bottom: var(--space-2); padding: 0; }
.kw-form fieldset label { display: inline-flex; align-items: center; font: var(--font-body); color: var(--text-primary); margin: 0 var(--space-5) var(--space-2) 0; }
.kw-form ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); color: var(--status-rejected-fg); font: var(--font-body-sm); list-style: none; }

/* ---- Table ---- */
.kw-table { width: 100%; border-collapse: collapse; }
.kw-table th { text-align: left; font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-3); border-bottom: var(--border-hairline) solid var(--border-default); }
.kw-table td { padding: var(--space-3); border-bottom: var(--border-hairline) solid var(--border-subtle); font: var(--font-body); vertical-align: middle; }
.kw-table tr:last-child td { border-bottom: none; }
.kw-table tbody tr:hover td { background: var(--neutral-25); }
.kw-actions { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }

/* ---- Status pill ---- */
.kw-pill { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 22px; padding: 0 var(--space-2-5); border-radius: var(--radius-full); font: var(--weight-medium) var(--text-xs)/1 var(--font-sans); border: var(--border-hairline) solid transparent; }
.kw-pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.kw-pill--verified { color: var(--status-verified-fg); background: var(--status-verified-bg); border-color: var(--status-verified-border); }
.kw-pill--pending  { color: var(--status-pending-fg);  background: var(--status-pending-bg);  border-color: var(--status-pending-border); }
.kw-pill--action   { color: var(--status-action-fg);   background: var(--status-action-bg);   border-color: var(--status-action-border); }
.kw-pill--rejected { color: var(--status-rejected-fg); background: var(--status-rejected-bg); border-color: var(--status-rejected-border); }
.kw-pill--neutral  { color: var(--status-neutral-fg);  background: var(--status-neutral-bg);  border-color: var(--status-neutral-border); }

/* ---- Flash ---- */
.kw-flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font: var(--font-body-sm); border: var(--border-hairline) solid transparent; }
.kw-flash--success { background: var(--status-verified-bg); color: var(--status-verified-fg); border-color: var(--status-verified-border); }
.kw-flash--warning { background: var(--status-pending-bg);  color: var(--status-pending-fg);  border-color: var(--status-pending-border); }
.kw-flash--error   { background: var(--status-rejected-bg); color: var(--status-rejected-fg); border-color: var(--status-rejected-border); }

/* ---- Helpers ---- */
.kw-muted { color: var(--text-secondary); }
.kw-eyebrow { font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-1); }
.kw-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.kw-divider { border: none; border-top: var(--border-hairline) solid var(--border-subtle); margin: var(--space-5) 0; }
.kw-empty { color: var(--text-secondary); font: var(--font-body); padding: var(--space-2) 0; }
.kw-ref { font: var(--font-mono-sm); color: var(--text-secondary); }

/* ---- Benutzerverwaltung (Tabelle, Badges, Tabs) ---- */
.kw-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2-5); border-radius: var(--radius-full); font: var(--weight-medium) var(--text-xs)/1 var(--font-sans); }
.kw-badge--admin { background: var(--accent); color: var(--text-on-brand); }
.kw-badge--soft { background: var(--accent-soft); color: var(--accent-text); }
.kw-badge--muted { background: var(--surface-sunken); color: var(--text-tertiary); }

.kw-usercell { display: flex; align-items: center; gap: var(--space-3); }
.kw-usercell .nm { font: var(--weight-semibold) var(--text-base)/1.3 var(--font-sans); color: var(--text-primary); }
.kw-usercell .em { font: var(--font-mono-sm); color: var(--text-tertiary); }
.kw-avatarwrap { position: relative; display: inline-flex; flex: none; }
.kw-presence { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); }
.kw-presence--on { background: var(--green-500); }
.kw-presence--off { background: var(--neutral-400); }

.kw-filterbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: var(--border-hairline) solid var(--border-default); margin-bottom: var(--space-2); flex-wrap: wrap; }
.kw-tabs { display: flex; align-items: center; gap: var(--space-5); }
.kw-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0 var(--space-3); color: var(--text-secondary); text-decoration: none; font: var(--font-label); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kw-tab:hover { color: var(--text-primary); text-decoration: none; }
.kw-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }
.kw-tab__count { font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); padding: 2px 7px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-tertiary); }
.kw-tab.is-active .kw-tab__count { background: var(--accent-soft); color: var(--accent-text); }
.kw-searchmini { position: relative; padding-bottom: var(--space-2); }
.kw-searchmini svg { position: absolute; left: 10px; top: calc(50% - var(--space-1)); transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-tertiary); }
.kw-searchmini input { height: var(--control-h-sm); width: 240px; padding: 0 var(--space-3) 0 32px; border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); font: var(--font-body-sm); }
.kw-searchmini input:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--ring-focus); }

.kw-table tr.is-inactive td { opacity: 0.55; }
.kw-footnote { display: flex; align-items: center; gap: var(--space-2); color: var(--text-tertiary); font: var(--font-caption); margin-top: var(--space-4); }
.kw-footnote svg { width: 14px; height: 14px; flex: none; }

/* ---- Benutzer-Einzelansicht (Profil) ---- */
.kw-field { margin-bottom: var(--space-5); }
.kw-fieldlabel { display: block; font: var(--font-label); color: var(--text-secondary); margin-bottom: var(--space-1); }

.kw-checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2-5) var(--space-5); }
.kw-check { display: flex; align-items: center; gap: var(--space-2); font: var(--font-body); color: var(--text-primary); cursor: pointer; }

.kw-switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--border-subtle); }
.kw-switchrow:last-child { border-bottom: none; }
.kw-switchrow .t { font: var(--font-label); color: var(--text-primary); }
.kw-switchrow .d { font: var(--font-caption); color: var(--text-tertiary); margin-top: 2px; max-width: 52ch; }

.kw-switch { position: relative; display: inline-flex; width: 40px; height: 22px; flex: none; }
.kw-switch input[type="checkbox"] { position: absolute; inset: 0; width: 40px; height: 22px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.kw-switch .slider { width: 40px; height: 22px; border-radius: var(--radius-full); background: var(--neutral-300); box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .18); transition: var(--transition-colors); }
.kw-switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform var(--dur-fast) var(--ease-standard); }
.kw-switch input[type="checkbox"]:checked + .slider { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kw-switch input[type="checkbox"]:checked + .slider::after { transform: translateX(18px); }
.kw-switch input[type="checkbox"]:focus-visible + .slider { box-shadow: var(--ring-focus); }

.kw-profilehead { display: flex; align-items: center; gap: var(--space-4); }
.kw-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.kw-profilehead .nm { font: var(--font-h3); }
.kw-profilehead .em { font: var(--font-mono-sm); color: var(--text-tertiary); margin-top: 2px; }
.kw-profilehead .meta { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

.kw-section-hint { font: var(--font-caption); color: var(--text-tertiary); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.kw-rolepick { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.kw-rolepick select { height: var(--control-h-sm); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); padding: 0 var(--space-3); background: var(--surface); color: var(--text-primary); font: var(--font-body-sm); }

/* ---- Dokumentanforderungs-Matrix ---- */
.kw-matrix th.c, .kw-matrix td.c { text-align: center; width: 1%; white-space: nowrap; }
.kw-matrix th.c { font-size: var(--text-2xs); }
.kw-matrix td:first-child { font: var(--weight-medium) var(--text-base) var(--font-sans); }
.kw-matrix input[type="checkbox"] { margin: 0; width: 17px; height: 17px; accent-color: var(--brand-600); }

/* ---- Dokumentanforderungen: gruppiert nach Beteiligtenrolle ---- */
.kw-reqgroup { border-top: var(--border-hairline) solid var(--border-subtle); padding: var(--space-3) 0; }
.kw-reqgroup:first-of-type { border-top: none; padding-top: 0; }
.kw-reqgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.kw-reqgroup > summary::-webkit-details-marker { display: none; }
.kw-reqgroup > summary::before { content: "\25B8"; color: var(--text-tertiary); font-size: 11px; transition: transform var(--dur-fast) var(--ease-standard); }
.kw-reqgroup[open] > summary::before { transform: rotate(90deg); }
.kw-reqgroup > summary .t { font: var(--font-label); color: var(--text-primary); }
.kw-reqgroup__grid { margin: var(--space-3) 0 var(--space-1); padding-left: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2-5) var(--space-5); }

/* ---- Kundentyp: Anforderungs-Matrix (Vorlage customer-type) ---- */
.kw-basics { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (max-width: 720px) { .kw-basics { grid-template-columns: 1fr; } }

.kw-matrixcard { overflow: hidden; padding: 0; }
.kw-matrixcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: var(--border-hairline) solid var(--border-subtle); }
.kw-countpill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--accent-soft); border: var(--border-hairline) solid var(--accent-border); color: var(--accent-text); font: var(--weight-semibold) var(--text-sm) var(--font-sans); }
.kw-matrixscroll { overflow-x: auto; }

.kw-cmatrix { border-collapse: collapse; width: 100%; min-width: 760px; }
.kw-cmatrix th, .kw-cmatrix td { border-bottom: var(--border-hairline) solid var(--border-subtle); }
.kw-cmatrix th.c, .kw-cmatrix td.c { border-left: var(--border-hairline) solid var(--border-subtle); text-align: center; padding: 0; }
.kw-cmatrix thead th.c { padding: var(--space-3) var(--space-2); vertical-align: bottom; }
.kw-cmatrix .doccol { position: sticky; left: 0; text-align: left; padding: 0 var(--space-4); background: var(--surface); z-index: 1; }
.kw-cmatrix thead th { position: sticky; top: 0; background: var(--neutral-25); z-index: 2; }
.kw-cmatrix thead th.doccol { z-index: 3; background: var(--neutral-25); font: var(--weight-semibold) var(--text-2xs) var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary); vertical-align: bottom; padding-bottom: var(--space-3); }
.kw-cmatrix tbody td.doccol { font: var(--weight-medium) var(--text-base) var(--font-sans); height: 52px; }
.kw-cmatrix tbody tr:nth-child(even) td { background: var(--neutral-25); }

.kw-pcol { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.kw-pcol__label { font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans); color: var(--text-primary); }
.kw-pcol__toggle { border: none; background: transparent; cursor: pointer; font: var(--font-mono-sm); font-size: 11px; color: var(--accent-text); padding: 2px 6px; border-radius: var(--radius-sm); }
.kw-pcol__toggle:hover { background: var(--surface-hover); }

.kw-cell { display: flex; align-items: center; justify-content: center; height: 52px; cursor: pointer; transition: var(--transition-colors); position: relative; }
.kw-cell:hover { background: var(--surface-hover); }
.kw-cell:has(input:checked) { background: var(--accent-soft); }
.kw-cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.kw-cellbox { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-colors); }
.kw-cell input:checked + .kw-cellbox { background: var(--accent); border-color: var(--accent); }
.kw-cellbox::after { content: ""; width: 10px; height: 5px; border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff; transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.kw-cell input:checked + .kw-cellbox::after { opacity: 1; }

.kw-actionbar { position: sticky; bottom: 0; margin: var(--space-6) calc(-1 * var(--space-8)) calc(-1 * var(--space-8)); padding: var(--space-3) var(--space-8); background: var(--surface); border-top: var(--border-hairline) solid var(--border-default); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* ---- Matrix: Zeilen straffen (Override) ---- */
.kw-cmatrix tbody td { padding-top: 0; padding-bottom: 0; }
.kw-cmatrix tbody td.doccol { height: 40px; line-height: 1.2; }
.kw-cmatrix .kw-cell { height: 40px; }
.kw-cmatrix .kw-cell input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kw-cellbox { width: 18px; height: 18px; }
.kw-cellbox::after { width: 9px; height: 4px; border-left-width: 2px; border-bottom-width: 2px; }

/* ---- Matrix-Fix: .kw-form label-Default überschreiben (höhere Spezifität) ---- */
.kw-cmatrix td.c .kw-cell { display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; line-height: 1; }
.kw-cmatrix td.c { padding: 0; height: 40px; }
.kw-cmatrix td.doccol { height: 40px; }
.kw-cmatrix tbody td { padding-top: 0; padding-bottom: 0; }

/* ---- Matrix: erklärender Hinweis je Rolle im Spaltenkopf ---- */
.kw-pcol__hint { font: var(--weight-regular) 10.5px/1.25 var(--font-sans); color: var(--text-tertiary); max-width: 150px; }

/* ---- Aktionsleiste: linker Bereich (Zähler + dezenter Löschen-Link) ---- */
.kw-actionbar__left { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.kw-linkdanger { background: none; border: none; padding: 0; cursor: pointer; color: var(--status-rejected-fg); font: var(--font-body-sm); }
.kw-linkdanger:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Bestätigungs-Dialog (Tippen zum Bestätigen) ---- */
.kw-dialog { border: none; border-radius: var(--radius-lg); padding: var(--space-6); max-width: 440px; width: calc(100% - 2 * var(--space-6)); box-shadow: var(--shadow-xl); color: var(--text-primary); background: var(--surface); }
.kw-dialog::backdrop { background: hsl(var(--shadow-color) / 0.32); }
.kw-dialog h3 { font: var(--font-h4); margin-bottom: var(--space-2); }
.kw-dialog p { font: var(--font-body-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.kw-dialog input[type="text"] { width: 100%; height: var(--control-h-md); padding: 0 var(--space-3); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.kw-dialog input[type="text"]:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--ring-focus); }
.kw-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.kw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Aktionsleiste über die sticky Tabellenzellen heben ---- */
.kw-actionbar { z-index: 50; }
.kw-cmatrix thead th { z-index: 4; }
.kw-cmatrix thead th.doccol { z-index: 5; }
.kw-cmatrix .doccol { z-index: 1; }

/* ---- Kundenportal (öffentlich, white-label) ---- */
.kw-portal { background: var(--canvas); min-height: 100vh; }
.kw-portalbar { background: var(--surface); border-bottom: var(--border-hairline) solid var(--border-default); padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.kw-portalbar__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); color: var(--text-tertiary); font: var(--font-body-sm); }
.kw-portalbar__meta .kw-help { display: inline-flex; align-items: center; gap: 5px; }
.kw-portalbar__meta svg { width: 16px; height: 16px; }
.kw-portalbar__brand { font: var(--weight-bold) var(--text-md) var(--font-sans); color: var(--accent); letter-spacing: var(--tracking-tight); }
.kw-portalmain { max-width: 640px; margin: var(--space-8) auto; padding: 0 var(--space-5); }

/* Fallansicht: Nächster-Schritt-Banner */
.kw-nextstep { display: flex; align-items: center; gap: var(--space-4); background: var(--accent-soft); border: var(--border-hairline) solid var(--accent-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.kw-nextstep__icon { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.kw-nextstep__icon svg { width: 24px; height: 24px; }
.kw-nextstep__body { flex: 1; min-width: 0; }
.kw-nextstep__title { font: var(--weight-semibold) 1.05rem/1.3 var(--font-sans); color: var(--text-primary); margin: 2px 0; }
.kw-nextstep__desc { font: var(--font-body-sm); color: var(--text-secondary); }
.kw-nextstep__action { flex: none; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kw-tabbar { border-bottom: var(--border-hairline) solid var(--border-default); margin-bottom: var(--space-5); }
.kw-twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.kw-stack { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 720px) { .kw-nextstep { flex-wrap: wrap; } .kw-nextstep__action { width: 100%; } }

/* Fallansicht: Tabs als Buttons (Reset), Stepper, Fortschritt, Checkliste */
button.kw-tab { background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font: var(--font-label); }
button.kw-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

.kw-stepper { display: flex; align-items: flex-start; margin-bottom: var(--space-5); }
.kw-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 var(--space-1); }
.kw-step__dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-default); background: var(--surface); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); position: relative; z-index: 1; }
.kw-step__line { position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--border-default); z-index: 0; }
.kw-step:last-child .kw-step__line { display: none; }
.kw-step__title { font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-sans); margin-top: var(--space-2); color: var(--text-secondary); }
.kw-step__sub { font: var(--font-caption); color: var(--text-tertiary); }
.kw-step.is-done .kw-step__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.kw-step.is-done .kw-step__line { background: var(--accent); }
.kw-step.is-active .kw-step__dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kw-step.is-active .kw-step__title { color: var(--text-primary); }
@media (max-width: 760px) { .kw-step__title, .kw-step__sub { display: none; } }

.kw-progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.kw-progress__bar { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width .3s ease; }

.kw-checkitem { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--border-subtle); }
.kw-checkitem__ic { width: 28px; height: 28px; flex: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--text-tertiary); }
.kw-checkitem__ic svg { width: 16px; height: 16px; }
.kw-checkitem__bd { flex: 1; min-width: 0; }
.kw-checkitem__t { font: var(--weight-semibold) var(--text-sm) var(--font-sans); color: var(--text-primary); }
.kw-checkitem__d { font: var(--font-caption); color: var(--text-tertiary); }

/* ── Kundenportal-Redesign ────────────────────────────────── */
.kw-hero { background: var(--accent-soft); border: var(--border-hairline) solid var(--accent-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7); margin-bottom: var(--space-4); }
.kw-hero h1 { font: var(--font-h2); margin: var(--space-1) 0 var(--space-2); }
.kw-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); color: var(--text-secondary); font: var(--font-body-sm); }
.kw-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.kw-hero__meta svg { width: 16px; height: 16px; }

.kw-portalback { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font: var(--font-body-sm); margin-bottom: var(--space-3); }
.kw-portalback:hover { color: var(--text-primary); }
.kw-portalback svg { width: 16px; height: 16px; }

.kw-stephead { background: var(--surface); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.kw-stephead h1 { font: var(--font-h3); margin: var(--space-1) 0 var(--space-2); }
.kw-stephead p { color: var(--text-secondary); font: var(--font-body-sm); margin: 0; max-width: 60ch; }

.kw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.kw-tile { display: flex; flex-direction: column; background: var(--surface); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.kw-tile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.kw-tile__ic { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.kw-tile__ic svg { width: 20px; height: 20px; }
.kw-tile__count { font: var(--weight-semibold) var(--text-xs) var(--font-sans); padding: 3px 9px; border-radius: var(--radius-full); background: var(--status-pending-bg); color: var(--status-pending-fg); }
.kw-tile__count.is-done { background: var(--status-verified-bg); color: var(--status-verified-fg); }
.kw-tile__title { font: var(--font-h4); margin: 0 0 2px; }
.kw-tile__sub { color: var(--text-secondary); font: var(--font-body-sm); margin: 0 0 var(--space-3); }
.kw-tile__link { margin-top: auto; color: var(--accent); font: var(--weight-semibold) var(--text-sm) var(--font-sans); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.kw-tile__link:hover { gap: 10px; }

.kw-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-sm) var(--font-sans); }
.kw-person { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md); }
.kw-person__bd { flex: 1; min-width: 0; }
.kw-person__name { font: var(--weight-semibold) var(--text-base) var(--font-sans); margin-bottom: 6px; }

.kw-dropzone { border: 2px dashed var(--border-default); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; color: var(--text-secondary); font: var(--font-body-sm); }
.kw-dropzone svg { width: 22px; height: 22px; display: block; margin: 0 auto var(--space-2); color: var(--text-tertiary); }

.kw-docrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.kw-docrow.is-done { background: var(--status-verified-bg); border-color: var(--status-verified-border); }
.kw-docrow__ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; }
.kw-docrow.is-done .kw-docrow__ic { background: var(--status-verified-solid, #58a65c); color: #fff; }
.kw-docrow__bd { flex: 1; min-width: 0; }
.kw-docrow__t { font: var(--weight-semibold) var(--text-sm) var(--font-sans); }
.kw-docrow__d { font: var(--font-caption); color: var(--text-tertiary); }

.kw-portalnav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }

.kw-fstatus { font: var(--font-caption); display: inline-flex; align-items: center; gap: 4px; }
.kw-fstatus--ok { color: var(--status-verified-fg); }
.kw-fstatus--req { color: var(--status-pending-fg); }
.kw-fstatus--opt { color: var(--text-tertiary); }
.kw-fhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
/* Durchsuchbares Auswahlfeld (Combobox) */
.kw-combobox { position: relative; }
.kw-combobox__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow: auto; background: var(--surface); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: 4px; }
.kw-combobox__opt { padding: 8px 10px; border-radius: var(--radius-xs); cursor: pointer; font: var(--font-body-sm); }
.kw-combobox__opt:hover { background: var(--surface-hover); }
.kw-combobox__empty { padding: 8px 10px; color: var(--text-tertiary); font: var(--font-body-sm); }

/* Geführte Rollen-Fragen (Portal) */
.kw-rfrage { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: var(--border-hairline) solid var(--border-subtle); }
.kw-rfrage:first-of-type { border-top: none; padding-top: var(--space-2); }
.kw-rfrage__no { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-sunken); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-xs) var(--font-sans); }
.kw-rfrage__bd { flex: 1; min-width: 0; }
.kw-rfrage__q { font: var(--weight-semibold) var(--text-base) var(--font-sans); margin-bottom: 2px; }
.kw-rfrage__hint { font: var(--font-body-sm); color: var(--text-secondary); margin-bottom: var(--space-3); max-width: 62ch; }
.kw-segment { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kw-seg { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); background: var(--surface); user-select: none; }
.kw-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kw-seg__ic { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; line-height: 0; position: relative; top: 1px; }
.kw-seg__ic svg { width: 15px; height: 15px; display: block; vertical-align: middle; }
.kw-seg__ic--check { display: none; }
.kw-seg:hover { border-color: var(--border-strong); }
.kw-seg:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.kw-seg:has(input:checked) .kw-seg__ic--check { display: inline-flex; }
.kw-seg:focus-within { box-shadow: var(--ring-focus); }
/* --- Branding (Logos + Portal-Footer) --- */
.kw-header__orglogo { max-height: 26px; max-width: 120px; object-fit: contain; margin-right: var(--space-3); }
.kw-portalbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.kw-portalbar__logo { max-height: 30px; max-width: 150px; object-fit: contain; }
.kw-portalfooter { max-width: 720px; margin: var(--space-6) auto var(--space-8); padding: 0 var(--space-4); color: var(--text-secondary); font: var(--font-caption); text-align: center; }
.kw-portalfooter__impressum { white-space: normal; line-height: 1.5; }
.kw-portalfooter__links { margin-top: var(--space-2); text-align: center; }
.kw-portalfooter__links a { color: var(--text-secondary); text-decoration: underline; }

/* --- Kundentyp: abgesetzte Ausweisprüfungs-Zeile in der Anforderungs-Matrix --- */
.kw-doctrigger { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-6); margin-top: var(--space-2); border-top: var(--border-hairline) solid var(--border-default); background: var(--surface-sunken); }
.kw-doctrigger .t { font: var(--weight-semibold) var(--text-base)/1.3 var(--font-sans); display: flex; align-items: center; }
.kw-doctrigger .d { font: var(--font-body-sm); color: var(--text-secondary); margin-top: 2px; }
.kw-doctrigger .kw-switch { flex: 0 0 auto; margin-top: 2px; }

/* --- Zwei-Faktor-Authentifizierung (Profil) --- */
.kw-2fa { max-width: 680px; }
.kw-2fa-card { background: var(--surface); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.kw-2fa-head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: var(--border-hairline) solid var(--border-default); }
.kw-2fa-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.kw-2fa-ic svg { width: 22px; height: 22px; }
.kw-2fa-head__bd { flex: 1 1 auto; }
.kw-2fa-title { font: var(--weight-bold) var(--text-lg)/1.2 var(--font-sans); margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kw-2fa-sub { font: var(--font-body-sm); color: var(--text-secondary); margin: var(--space-1) 0 0; }
.kw-2fa-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); font: var(--font-caption); white-space: nowrap; }
.kw-2fa-meta svg { width: 15px; height: 15px; }
.kw-2fa-body { padding: var(--space-5) var(--space-6); }

.kw-2fa-steps { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.kw-2fa-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: var(--space-4); }
.kw-2fa-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: calc(-1 * var(--space-5)); width: 2px; background: var(--border-default); }
.kw-2fa-no { z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--text-on-brand); display: flex; align-items: center; justify-content: center; font: var(--weight-bold) var(--text-sm) var(--font-sans); }
.kw-2fa-step__h { font: var(--weight-semibold) var(--text-md)/1.2 var(--font-sans); }
.kw-2fa-step__d { font: var(--font-body-sm); color: var(--text-secondary); margin: var(--space-1) 0 var(--space-3); }

.kw-applist { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kw-apppill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: var(--border-hairline) solid var(--border-default); border-radius: 999px; font: var(--font-body-sm); }
.kw-apppill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2-solid); }

.kw-2fa-scan { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.kw-2fa-qr { padding: var(--space-3); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); background: #fff; line-height: 0; }
.kw-2fa-qr img { width: 220px; height: 220px; display: block; }
.kw-2fa-manual { flex: 1 1 240px; min-width: 240px; }
.kw-2fa-manual__label { font: var(--font-label); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin-bottom: var(--space-2); }
.kw-2fa-manual__row { display: flex; align-items: stretch; border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.kw-2fa-key { flex: 1 1 auto; padding: var(--space-3); font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: 1px; line-height: 1.5; word-break: break-word; }
.kw-2fa-copy { flex: 0 0 auto; border: none; border-left: var(--border-hairline) solid var(--border-default); background: var(--surface); color: var(--text-secondary); padding: 0 var(--space-4); cursor: pointer; }
.kw-2fa-copy:hover { background: var(--surface-hover); color: var(--text-primary); }
.kw-2fa-copy svg { width: 18px; height: 18px; }
.kw-2fa-manual__hint { font: var(--font-caption); color: var(--text-tertiary); margin-top: var(--space-2); }

.kw-otp { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.kw-otp__box { width: 52px; height: 60px; text-align: center; font: var(--weight-semibold) var(--text-xl) var(--font-sans); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); }
.kw-otp__box:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--ring-focus); }
.kw-2fa-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* --- Standorte-Seite --- */
.kw-search--inline { flex: 0 0 auto; }
.kw-avatar--sm { width: 28px; height: 28px; background: var(--surface-sunken); color: var(--text-secondary); }
.kw-dashcard-link { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-semibold) var(--font-body-sm); color: var(--accent-text); text-decoration: none; }
.kw-dashcard-link:hover { text-decoration: underline; }

/* ── Betreiber-Konsole (interne SaaS-Sicht, dunkel abgesetzt) ───────────── */
body.bk { background: var(--neutral-50, #f5f5f4); }
.bk-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.bk-rail { background: #0f1116; color: #c9ced8; display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; }
.bk-rail__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.bk-rail__brand img, .bk-rail__brand .mk { width: 30px; height: 30px; border-radius: 8px; background: #fff; flex: none; }
.bk-rail__brand .nm { font: 800 17px/1 var(--font-sans); color: #fff; }
.bk-rail__brand .sb { font: 600 10px/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-top: 3px; }
.bk-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.bk-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: #aab2c0; text-decoration: none; font: var(--font-label); }
.bk-nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.bk-nav a:hover { background: #1a1d25; color: #fff; }
.bk-nav a.is-active { background: #1e2740; color: #fff; }
.bk-nav a.is-active svg { color: #5b8cff; opacity: 1; }
.bk-rail__spacer { flex: 1; }
.bk-rail__foot { border-top: 1px solid #232732; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.bk-rail__link { display: inline-flex; align-items: center; gap: 8px; color: #aab2c0; text-decoration: none; font: var(--font-body-sm); }
.bk-rail__link:hover { color: #fff; }
.bk-rail__user { display: flex; align-items: center; gap: 10px; }
.bk-rail__userlink { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; transition: background .12s; }
.bk-rail__userlink:hover { background: rgba(255,255,255,.06); }
.bk-rail__user .av { width: 32px; height: 32px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--font-sans); flex: none; }
.bk-rail__user .nm { color: #fff; font: var(--weight-semibold) var(--text-sm) var(--font-sans); }
.bk-rail__user .rl { color: #6b7280; font: var(--font-caption); }
.bk-rail__user .lo { margin-left: auto; color: #6b7280; }
.bk-rail__user .lo:hover { color: #fff; }
.bk-body { display: flex; flex-direction: column; min-width: 0; }
.bk-top { display: flex; align-items: center; gap: 16px; background: #0f1116; color: #c9ced8; padding: 12px 24px; }
.bk-top__badge { font: 700 11px/1 var(--font-sans); letter-spacing: .08em; color: #d9a441; background: rgba(217,164,65,.12); border: 1px solid rgba(217,164,65,.3); padding: 6px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.bk-top__search { flex: 0 1 460px; position: relative; }
.bk-top__search input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid #232732; background: #181b22; color: #e5e7eb; padding: 0 12px 0 36px; font: var(--font-body-sm); }
.bk-top__search input::placeholder { color: #6b7280; }
.bk-top__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #6b7280; }
.bk-top__grow { flex: 1; }
.bk-top__env { display: inline-flex; align-items: center; gap: 7px; color: #aab2c0; font: var(--font-body-sm); }
.bk-top__env .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
/* Nicht-Produktiv-Umgebungen klar kennzeichnen. */
.bk-top__env--dev { color: #f6b756; }
.bk-top__env--dev .dot { background: #f59e0b; }
.bk-top__env--test { color: #c4a6f0; }
.bk-top__env--test .dot { background: #a855f7; }

/* Impersonation-Banner (Betreiber im Kundenkonto, Lesemodus). */
.kw-impersonate { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    background: #7c2d12; color: #ffedd5; font: var(--font-body-sm); padding: 8px 18px; text-align: center; }
.kw-impersonate__txt { display: inline-flex; align-items: center; gap: 8px; }
.kw-impersonate__txt strong { color: #fff; }
.kw-impersonate__exit { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.kw-impersonate__exit:hover { opacity: .85; }
.kw-btn.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* ── Mein Konto ──────────────────────────────────────────────────────── */
.kw-acc-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(120deg, #1d4ed8, #2563eb 60%, #3b82f6); color: #fff;
    border-radius: 16px; padding: 22px 26px; margin-bottom: 20px; }
.kw-acc-hero__id { display: flex; align-items: center; gap: 16px; }
.kw-avatar--lg { width: 56px; height: 56px; font-size: 20px; background: #dbeafe; color: #1e3a8a; }
.kw-acc-hero__name { font: 800 24px/1.1 var(--font-sans); }
.kw-acc-hero__role { font: var(--weight-medium) var(--text-base) var(--font-sans); color: #dbeafe; margin-top: 3px; }
.kw-acc-hero__meta { font: var(--font-caption); color: #bfdbfe; margin-top: 6px; }
.kw-acc-hero__badge { background: rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: 7px 14px; font: var(--weight-semibold) var(--text-sm) var(--font-sans); white-space: nowrap; }

.kw-acc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .kw-acc-grid { grid-template-columns: 1fr; } }
.kw-acc-col { display: flex; flex-direction: column; gap: 18px; }
.kw-acc-cardhead { margin-bottom: 16px; }
.kw-acc-h2 { font: 700 18px/1.2 var(--font-sans); color: var(--text-primary); }

.kw-acc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .kw-acc-2col { grid-template-columns: 1fr; } }
.kw-acc-field { display: flex; flex-direction: column; gap: 6px; }
.kw-acc-field > span { font: var(--weight-semibold) var(--text-sm) var(--font-sans); color: var(--text-secondary); }
.kw-acc-field input, .kw-acc-field select {
    width: 100%; box-sizing: border-box; padding: 10px 12px; font: var(--font-body) var(--font-sans);
    color: var(--text-primary); background: var(--surface, #fff);
    border: var(--border-hairline) solid var(--border-default); border-radius: 10px; }
.kw-acc-field input:focus, .kw-acc-field select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.kw-acc-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

.kw-acc-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: var(--border-hairline) solid var(--border-subtle); }
.kw-acc-switchrow:first-of-type { border-top: 0; }
.kw-acc-switchrow__t { font: var(--weight-semibold) var(--text-base) var(--font-sans); color: var(--text-primary); }

.kw-acc-secrow { display: flex; align-items: center; gap: 13px; }
.kw-acc-secrow + .kw-acc-secrow, .kw-card .kw-acc-secrow ~ .kw-acc-pw { margin-top: 14px; }
.kw-acc-secrow__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #eef2f7; color: #64748b; flex-shrink: 0; }
.kw-acc-secrow__ic[data-on="1"] { background: #dcfce7; color: #16a34a; }

.kw-acc-pw { margin-top: 16px; }
.kw-acc-pw > summary { list-style: none; cursor: pointer; }
.kw-acc-pw > summary::-webkit-details-marker { display: none; }

.kw-btn--sm { padding: 7px 12px; font: var(--weight-semibold) var(--text-sm) var(--font-sans); }
.kw-avatar--lg { line-height: 1; }
.bk-main { padding: 28px 40px 56px; max-width: 1180px; width: 100%; }
.bk-h1 { font: 800 30px/1.1 var(--font-sans); color: var(--text-primary); }
.bk-sub { color: var(--text-secondary); font: var(--font-body); margin-top: 6px; max-width: 70ch; }
.bk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.bk-kpi { background: var(--surface, #fff); border: var(--border-hairline) solid var(--border-default); border-radius: 14px; padding: 18px 20px; }
.bk-kpi__lbl { display: flex; align-items: center; gap: 9px; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.bk-kpi__lbl svg { width: 16px; height: 16px; padding: 6px; box-sizing: content-box; border-radius: 8px; background: var(--accent-soft, #e8f0ff); color: var(--accent, #2563eb); }
.bk-kpi__val { font: 800 30px/1.1 var(--font-sans); color: var(--text-primary); margin: 12px 0 4px; display: flex; align-items: center; gap: 10px; }
.bk-kpi__sub { font: var(--font-caption); color: var(--text-tertiary); }
.bk-trend { font: 700 12px/1 var(--font-sans); padding: 4px 8px; border-radius: 999px; }
.bk-trend--up { color: var(--status-verified-fg); background: var(--status-verified-bg); }
.bk-trend--down { color: var(--status-rejected-fg); background: var(--status-rejected-bg); }
.bk-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.bk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bk-card { background: var(--surface, #fff); border: var(--border-hairline) solid var(--border-default); border-radius: 14px; padding: 20px 22px; }
.bk-card__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bk-card__t { font: 700 18px/1.2 var(--font-sans); color: var(--text-primary); }
.bk-card__s { font: var(--font-caption); color: var(--text-tertiary); margin-top: 3px; }
.bk-bar { height: 7px; border-radius: 999px; background: var(--surface-sunken, #eee); overflow: hidden; }
.bk-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent, #2563eb); }
.bk-bar--amber > span { background: #e0a23a; }
.bk-distrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 9px 0; }
.bk-distrow + .bk-distrow { border-top: var(--border-hairline) solid var(--border-subtle); }
.bk-spark { width: 100%; height: 180px; }
.bk-feedrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: var(--border-hairline) solid var(--border-subtle); }
.bk-feedrow:first-of-type { border-top: none; }
.bk-feedrow .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-sunken); color: var(--text-secondary); }
.bk-feedrow .gr { flex: 1; }
.bk-attn { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 11px; background: var(--surface-sunken); margin-bottom: 8px; text-decoration: none; }
.bk-attn .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bk-slideover { position: fixed; inset: 0; z-index: 60; display: none; }
.bk-slideover.is-open { display: block; }
.bk-slideover__bg { position: absolute; inset: 0; background: rgba(15,17,22,.45); }
.bk-slideover__panel { position: absolute; top: 0; right: 0; height: 100%; width: 440px; max-width: 92vw; background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.18); padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .bk-kpis, .bk-grid3 { grid-template-columns: repeat(2, 1fr); } .bk-grid2 { grid-template-columns: 1fr; } }