/* versKI.css — Designsystem: warmes Papierweiß, Bordeaux, IBM Plex */
:root {
  /* Flächen — warmes Papierweiß */
  --paper:   oklch(0.971 0.006 80);
  --paper-2: oklch(0.955 0.008 78);
  --surface: oklch(0.992 0.004 86);
  --surface-2: oklch(0.978 0.006 82);
  --inset:   oklch(0.948 0.009 78);

  /* Tinte */
  --ink:   oklch(0.255 0.012 60);
  --ink-2: oklch(0.46 0.012 62);
  --ink-3: oklch(0.62 0.012 65);
  --ink-4: oklch(0.74 0.010 70);

  /* Linien */
  --line:   oklch(0.90 0.008 75);
  --line-2: oklch(0.84 0.010 72);
  --line-3: oklch(0.78 0.012 70);

  /* Dunkelblau (Primär) — Variablenname --wine ist historisch (ehem. Bordeaux) */
  --wine:    oklch(0.39 0.085 250);
  --wine-2:  oklch(0.33 0.078 250);
  --wine-3:  oklch(0.46 0.088 250);
  --wine-tint: oklch(0.94 0.025 250);
  --wine-tint-2: oklch(0.90 0.038 250);

  /* Statusfarben */
  --gruen:   oklch(0.50 0.095 150);  --gruen-tint:   oklch(0.93 0.040 150);  --gruen-tint-2: oklch(0.88 0.055 150);
  --bernstein: oklch(0.58 0.105 71); --bernstein-tint: oklch(0.93 0.050 78); --bernstein-tint-2: oklch(0.88 0.070 78);
  --rot:     oklch(0.52 0.165 27);   --rot-tint:     oklch(0.93 0.045 25);   --rot-tint-2:   oklch(0.89 0.060 25);
  --blau:    oklch(0.51 0.095 248);  --blau-tint:    oklch(0.93 0.035 248);  --blau-tint-2:  oklch(0.89 0.050 248);
  --violett: oklch(0.49 0.105 300);  --violett-tint: oklch(0.93 0.038 300);  --violett-tint-2: oklch(0.89 0.052 300);
  --neutral: oklch(0.46 0.012 62);   --neutral-tint: oklch(0.93 0.006 75);   --neutral-tint-2: oklch(0.88 0.008 72);

  --r-sm: 4px; --r: 6px; --r-md: 8px; --r-lg: 11px;
  --shadow: 0 1px 2px oklch(0.4 0.02 60 / 0.06), 0 1px 3px oklch(0.4 0.02 60 / 0.05);
  --shadow-md: 0 2px 6px oklch(0.4 0.02 60 / 0.08), 0 4px 16px oklch(0.4 0.02 60 / 0.07);
  --shadow-lg: 0 8px 30px oklch(0.35 0.02 60 / 0.16);

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --nav-w: 220px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.serif { font-family: var(--serif); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--wine-tint-2); }
.tnum { font-variant-numeric: tabular-nums; }

/* density */
body.dense { font-size: 13.5px; }

/* ----------------------------------------------------------- Scrollbar -- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 8px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* --------------------------------------------------------------- Pills -- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 100px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1;
}
.pill--md { padding: 4px 10px; font-size: 12px; }
.pill--sm { padding: 3px 8px; font-size: 11px; }
.pill--gruen    { background: var(--gruen-tint);    color: var(--gruen);     border-color: var(--gruen-tint-2); }
.pill--bernstein{ background: var(--bernstein-tint);color: oklch(0.44 0.10 65); border-color: var(--bernstein-tint-2); }
.pill--rot      { background: var(--rot-tint);      color: var(--rot);       border-color: var(--rot-tint-2); }
.pill--blau     { background: var(--blau-tint);     color: var(--blau);      border-color: var(--blau-tint-2); }
.pill--violett  { background: var(--violett-tint);  color: var(--violett);   border-color: var(--violett-tint-2); }
.pill--neutral  { background: var(--neutral-tint);  color: var(--neutral);   border-color: var(--neutral-tint-2); }
.pill--solid.pill--gruen    { background: var(--gruen);    color: #fff; border-color: transparent; }
.pill--solid.pill--bernstein{ background: var(--bernstein);color: #fff; border-color: transparent; }
.pill--solid.pill--rot      { background: var(--rot);      color: #fff; border-color: transparent; }
.pill--solid.pill--blau     { background: var(--blau);     color: #fff; border-color: transparent; }
.pill--solid.pill--neutral  { background: var(--neutral);  color: #fff; border-color: transparent; }

/* ------------------------------------------------------------- Buttons -- */
.btn { white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-weight: 500;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
.btn--md { padding: 8px 13px; font-size: 13px; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--full { width: 100%; }
.btn:hover { background: var(--surface-2); border-color: var(--line-3); }
.btn--primary { background: var(--wine); color: #fff; border-color: var(--wine); font-weight: 600; }
.btn--primary:hover { background: var(--wine-2); border-color: var(--wine-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--inset); color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--wine); color: var(--wine); font-weight: 600; }
.btn--outline:hover { background: var(--wine-tint); }
.btn--danger { background: transparent; border-color: var(--rot-tint-2); color: var(--rot); }
.btn--danger:hover { background: var(--rot-tint); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); border: 1px solid transparent; background: transparent;
  color: var(--ink-2); transition: background .12s, color .12s, border-color .12s;
}
.iconbtn--md { width: 32px; height: 32px; }
.iconbtn--sm { width: 27px; height: 27px; }
.iconbtn:hover { background: var(--inset); color: var(--ink); }
.iconbtn.is-active { background: var(--wine-tint); color: var(--wine); }

/* ----------------------------------------------------------- Quellentag */
.srctag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 8px 3px 7px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); line-height: 1.2;
}
.srctag .mono { font-size: 11px; font-weight: 500; }
.srctag.is-clickable { cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.srctag.is-clickable:hover { background: var(--inset); border-color: var(--line-3); color: var(--ink); }
.srctag--para  { color: var(--wine); border-color: var(--wine-tint-2); background: var(--wine-tint); }
.srctag--para:hover  { background: var(--wine-tint-2); }
.srctag--case  { color: oklch(0.42 0.07 285); border-color: var(--violett-tint-2); background: var(--violett-tint); }
.srctag--clause{ color: var(--ink-2); }
.srctag--policy{ color: oklch(0.40 0.085 250); border-color: oklch(0.90 0.038 250); background: oklch(0.94 0.025 250); }
.srctag--policy:hover{ background: oklch(0.90 0.038 250); }

/* -------------------------------------------------------------- Fristen */
.frist { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.frist--md { font-size: 12.5px; }
.frist--sm { font-size: 11.5px; }
.frist--rot { color: var(--rot); }
.frist--bernstein { color: oklch(0.46 0.10 65); }
.frist--neutral { color: var(--ink-3); font-weight: 500; }

/* -------------------------------------------------------------- Avatar -- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; background: var(--wine-tint-2); color: var(--wine-2);
  font-weight: 600; font-family: var(--sans); flex-shrink: 0; letter-spacing: .02em;
}

/* ---------------------------------------------------------------- Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.card--pad { padding: 18px 20px; }

.sechead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sechead__l { display: flex; align-items: center; gap: 10px; }
.sechead__ic { color: var(--wine); display: flex; }
.sechead__t { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.sechead__s { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.sechead__r { display: flex; align-items: center; gap: 8px; }

/* labels / micro */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kicker { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
hr.div { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

/* =========================================================== App-Shell == */
.app { display: grid; grid-template-columns: var(--nav-w) 1fr; height: 100vh; overflow: hidden; }

/* Seitennavigation */
.nav { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.nav__brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.nav__mark { width: 30px; height: 30px; border-radius: 7px; background: var(--wine); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 17px; flex-shrink: 0; }
.nav__name { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.nav__sub { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }
.nav__sec { padding: 14px 12px 4px 16px; }
.nav__seclabel { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.nav__items { display: flex; flex-direction: column; gap: 1px; padding: 4px 10px; }
.navitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; border: none; background: transparent; text-align: left; width: 100%; transition: background .1s, color .1s; }
.navitem:hover { background: var(--inset); color: var(--ink); }
.navitem span:not(.navitem__badge) { white-space: nowrap; }
.navitem.is-active { background: var(--wine-tint); color: var(--wine); font-weight: 600; }
.navitem.is-active svg { color: var(--wine); }
.navitem__badge { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--inset); color: var(--ink-3); padding: 1px 7px; border-radius: 100px; }
.navitem.is-active .navitem__badge { background: var(--wine); color: #fff; }
.navitem__badge.is-warn { background: var(--bernstein-tint-2); color: oklch(0.42 0.10 65); }
.nav__foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); position: relative; }
.lastcase { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; margin-bottom: 8px;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r); transition: background .12s, border-color .12s; }
.lastcase:hover { background: var(--inset); border-color: var(--line-3); }
.lastcase.is-active { background: var(--wine-tint); border-color: var(--wine-tint-2); }
.lastcase__ic { width: 28px; height: 28px; border-radius: 7px; background: var(--inset); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lastcase.is-active .lastcase__ic { background: var(--wine-tint-2); color: var(--wine); }
.lastcase__b { flex: 1; min-width: 0; }
.lastcase__l { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.lastcase__nr { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lastcase__frist { color: var(--bernstein); display: flex; flex-shrink: 0; }
.roleswitch { display: flex; gap: 3px; background: var(--inset); padding: 3px; border-radius: var(--r); }
.roleswitch button { flex: 1; padding: 6px; font-size: 11.5px; font-weight: 600; border: none; background: transparent; color: var(--ink-3); border-radius: var(--r-sm); }
.roleswitch button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.userrow { display: flex; align-items: center; gap: 9px; padding: 8px; width: 100%; border: 1px solid transparent; background: transparent; border-radius: var(--r); transition: background .12s, border-color .12s; }
.userrow:hover, .userrow.is-open { background: var(--inset); }
.userrow__n { font-size: 12.5px; font-weight: 600; }
.userrow__r { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu { position: absolute; left: 12px; right: 12px; bottom: 64px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; animation: pop .14s ease; }
.usermenu__acct { padding: 9px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.usermenu__item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 10px; border-radius: var(--r); font-size: 13px; color: var(--ink-2); font-family: inherit; }
.usermenu__item:hover { background: var(--inset); color: var(--ink); }
.usermenu__demo { border-top: 1px solid var(--line); margin-top: 4px; padding: 9px 6px 4px; }
.usermenu__demolabel { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); margin: 0 4px 6px; }

/* Main column */
.main { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: oklch(0.971 0.006 80 / 0.88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding: 0 28px; height: 56px; display: flex; align-items: center; gap: 16px; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs__sep { color: var(--ink-4); }
.searchbox { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 7px 11px; width: 280px; color: var(--ink-3); }
.searchbox input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; color: var(--ink); width: 100%; }
.topbar__actions { display: flex; align-items: center; gap: 4px; }

.page { padding: 24px 28px 60px; flex: 1; }
.page--wide { max-width: 1280px; }
.page--full { max-width: none; }
.pagehead { margin-bottom: 20px; }
.pagehead h1 { font-size: 24px; white-space: nowrap; }
.pagehead__sub { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; }

/* ----------------------------------------------------------- Fristbanner */
.fristbanner { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: var(--r-md);
  background: var(--bernstein-tint); border: 1px solid var(--bernstein-tint-2); margin-bottom: 18px; }
.fristbanner.is-rot { background: var(--rot-tint); border-color: var(--rot-tint-2); }
.fristbanner__ic { color: oklch(0.46 0.10 65); display: flex; }
.fristbanner.is-rot .fristbanner__ic { color: var(--rot); }
.fristbanner__t { font-weight: 600; font-size: 13.5px; }
.fristbanner__d { font-size: 12.5px; color: var(--ink-2); }

/* ============================================================= Tabellen = */
.tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); padding: 11px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; }
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .1s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.is-urgent { box-shadow: inset 3px 0 0 var(--rot); }
.tbl tbody tr.is-warn { box-shadow: inset 3px 0 0 var(--bernstein); }
.cell-nr { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cell-strong { font-weight: 600; }
.cell-sub { font-size: 11.5px; color: var(--ink-3); }
.avstack { display: inline-flex; }
.avstack .avatar { margin-left: -7px; border: 2px solid var(--surface); }
.avstack .avatar:first-child { margin-left: 0; }

/* Votum-Zelle in der Queue */
.votcell { display: flex; align-items: center; gap: 9px; }
.votcell__avs { display: inline-flex; }
.votav { position: relative; width: 27px; height: 27px; border-radius: 100px; margin-left: -7px; border: 2px solid var(--surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; background: var(--inset); color: var(--ink-2); }
.votav:first-child { margin-left: 0; }
.votav.is-angenommen { background: var(--gruen-tint); color: var(--gruen); }
.votav.is-abgelehnt { background: var(--rot-tint); color: var(--rot); }
.votav__dot { position: absolute; bottom: -3px; right: -3px; width: 13px; height: 13px; border-radius: 100px; background: var(--ink-4); color: #fff; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--surface); }
.votav.is-angenommen .votav__dot { background: var(--gruen); }
.votav.is-abgelehnt .votav__dot { background: var(--rot); }
.votcell__n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.votcell__n.is-done { color: var(--gruen); }
.votcell__n.is-no { color: var(--rot); }

/* filter bar */
.filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chipfilter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.chipfilter:hover { border-color: var(--line-3); }
.chipfilter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chipfilter__count { font-size: 11px; opacity: .7; }

/* utility */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Embed-Modus (Leinwand-Artboards) */
body.embed .nav { display: none; }
body.embed .topbar { display: none; }
body.embed .app { grid-template-columns: 1fr; }
body.embed .casehd { top: 0; }
body.embed .main { height: 100vh; }

/* ----------------------------------------------------------- Login ----- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--paper-2); padding: 24px; }
.login__card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; box-shadow: 0 10px 40px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 14px; }
.login__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.login__h { font-size: 20px; font-weight: 600; margin: 6px 0 0; }
.login__sub { font-size: 13.5px; color: var(--ink-3); margin: -8px 0 6px; }
.login__lbl { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.login__in { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); outline: none; }
.login__in:focus { border-color: var(--ink-3); }
.login__err { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: oklch(0.5 0.17 25); background: oklch(0.95 0.04 25); border-radius: 8px; padding: 8px 11px; }
.login .btn { margin-top: 4px; }