@import url("./tokens.css");

/* --- Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  /* Ruhige Tiefe statt Partikel: ein einziger, statischer Verlauf. */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(59,130,246,.16), transparent 62%),
    radial-gradient(820px 520px at 8% 8%, rgba(94,214,255,.09), transparent 58%);
}
:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }

/* --- Kopfzeile ----------------------------------------------------------- */


.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b {
  font-size: var(--step-2); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
}
.brand .v {
  font: 600 var(--step--1)/1 var(--font-mono);
  color: var(--accent-ice); background: var(--accent-ice-dim);
  border: 1px solid var(--border-active); border-radius: 999px; padding: 3px 8px;
}
.brand small {
  display: block; color: var(--text-muted); font-size: var(--step--1);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}


.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.dot.warn { background: var(--warning); } .dot.bad { background: var(--danger); }

/* --- Rahmen -------------------------------------------------------------- */


.eyebrow {
  font-size: var(--step--1); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ice); font-weight: 600;
}
h1 { font-size: var(--step-4); line-height: 1.12; margin: 10px 0 8px; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: var(--step-2); margin: 0; letter-spacing: -.005em; }
.lede { max-width: 74ch; color: var(--text-secondary); max-width: 68ch; margin: 0; }

/* --- Fortschritt --------------------------------------------------------- */
.progress-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin: 26px 0 10px; flex-wrap: wrap;
}
.bar {
  height: 8px; border-radius: 999px; background: var(--bg-inset);
  border: 1px solid var(--border-soft); overflow: hidden; flex: 1 1 260px;
}
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-ice));
  transition: width var(--motion-slow) var(--ease);
}
.bar-label { font: 600 var(--step-0)/1 var(--font-mono); color: var(--text-primary); white-space: nowrap; }

/* --- Gruppen-Reiter ------------------------------------------------------ */
.groups { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 26px; }
.gtab {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--bg-panel);
  border-radius: var(--radius-md); padding: 11px 15px;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.gtab:hover { background: var(--bg-hover); }
.gtab[aria-selected="true"] {
  border-color: var(--border-active); background: var(--bg-elevated);
  box-shadow: var(--glow-ice);
}
.gtab .gcode {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: var(--radius-sm); font: 700 var(--step--1)/1 var(--font-mono);
  background: var(--accent-blue-dim); color: var(--accent-ice);
  border: 1px solid var(--border-mid);
}
.gtab .gt { font-weight: 600; }
.gtab .gs { display: block; font-size: var(--step--1); color: var(--text-muted); }
.gcount {
  font: 600 var(--step--1)/1 var(--font-mono); padding: 4px 8px; border-radius: 999px;
  background: var(--bg-inset); border: 1px solid var(--border-soft); color: var(--text-secondary);
}
.gcount.done { background: var(--success-dim); border-color: rgba(52,211,153,.4); color: var(--success); }
.gcount.open { background: var(--warning-dim); border-color: rgba(245,165,36,.4); color: var(--warning); }

/* --- Entscheidungskarte -------------------------------------------------- */
.dec {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-panel); box-shadow: var(--shadow-panel);
  margin-bottom: 16px; overflow: hidden;
  transition: border-color var(--motion-normal) var(--ease);
}
.dec[data-state="DECIDED"]  { border-left: 3px solid var(--success); }
.dec[data-state="DEFERRED"] { border-left: 3px solid var(--warning); }
.dec[data-state="OPEN"]     { border-left: 3px solid var(--border-mid); }
.dec.blocking[data-state="OPEN"] { border-left-color: var(--danger); }

.dec-head {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
  cursor: pointer; user-select: none;
}
.dec-head:hover { background: var(--bg-hover); }
.dec-title { flex: 1 1 auto; min-width: 0; }
.dec-title h3 { margin: 0 0 3px; font-size: var(--step-1); font-weight: 600; }
.dec-title p  { margin: 0; color: var(--text-secondary); font-size: var(--step-0); }
.dec-key { font: 500 var(--step--1)/1 var(--font-mono); color: var(--text-muted); margin-top: 6px; display: block; }

/* Status immer: Farbe + Icon + Text (§24 Barrierefreiheit) */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--step--1); font-weight: 600; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-inset);
  color: var(--text-secondary);
}
.badge.ok   { color: var(--success); background: var(--success-dim); border-color: rgba(52,211,153,.4); }
.badge.wait { color: var(--warning); background: var(--warning-dim); border-color: rgba(245,165,36,.4); }
.badge.stop { color: var(--danger);  background: var(--danger-dim);  border-color: rgba(240,97,109,.4); }
.badge svg { width: 13px; height: 13px; flex: none; }

.dec-body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border-soft); }
.dec.open .dec-body { display: block; }

.block {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--bg-inset); border: 1px solid var(--border-soft);
}
.block .bl {
  font-size: var(--step--1); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
  margin-bottom: 6px; display: block;
}
.block p { margin: 0; color: var(--text-secondary); }
.block.rec { background: var(--accent-blue-dim); border-color: rgba(59,130,246,.34); }
.block.rec .bl { color: var(--accent-ice); }
.block.rec p { color: var(--text-primary); }
.block.warn { background: var(--warning-dim); border-color: rgba(245,165,36,.34); }
.block.warn .bl { color: var(--warning); }

/* --- Eingaben ------------------------------------------------------------ */
.opts { display: grid; gap: 9px; margin-top: 16px; }
.opt {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 13px 15px; background: var(--bg-inset);
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.opt:hover { background: var(--bg-hover); }
.opt.sel { border-color: var(--border-active); background: var(--accent-ice-dim); }
.opt input { margin: 3px 0 0; accent-color: var(--accent-ice); }
.opt .ol { font-weight: 600; }
.opt .oh { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: 2px; }
.opt .prop {
  margin-left: auto; font-size: var(--step--1); color: var(--accent-ice);
  border: 1px solid var(--border-active); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

.fields { display: grid; gap: 13px; margin-top: 16px; }
.field label {
  display: block; font-size: var(--step--1); font-weight: 600;
  color: var(--text-secondary); margin-bottom: 5px;
}
.field input[type="text"], .field input[type="number"], .field input[type="date"],
.field input[type="month"], .field textarea, .field select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid); background: var(--bg-inset);
  color: var(--text-primary); font: inherit;
  transition: border-color var(--motion-fast) var(--ease);
}
.field textarea { min-height: 88px; resize: vertical; font-family: var(--font-mono); font-size: var(--step--1); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--border-active); outline: none; }
.field.inline-bool { display: flex; align-items: center; gap: 10px; }
.field.inline-bool label { margin: 0; }
.field.inline-bool input { accent-color: var(--accent-ice); width: 17px; height: 17px; }
.hint { font-size: var(--step--1); color: var(--text-muted); margin-top: 4px; }

/* --- Aktionen ------------------------------------------------------------ */
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.period-switch { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 20px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.period-switch span { color:var(--text-muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.period-switch select { min-width:180px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); padding:9px 34px 9px 11px; font:inherit; font-weight:700; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 600;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-active); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-blue), var(--accent-deep));
  border-color: transparent; color: #fff;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border-color: var(--border-soft); color: var(--text-secondary); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.saved { font-size: var(--step--1); color: var(--success); opacity: 0; transition: opacity var(--motion-normal) var(--ease); }
.saved.show { opacity: 1; }

/* --- Abschlussleiste ----------------------------------------------------- */
.finish {
  position: sticky; bottom: 0; margin-top: 32px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(16,29,48,.96), rgba(8,17,32,.98));
  backdrop-filter: blur(16px); box-shadow: var(--shadow-overlay);
  padding: 20px 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.finish .ft { flex: 1 1 320px; min-width: 0; }
.finish h2 { font-size: var(--step-1); margin-bottom: 4px; }
.finish p { margin: 0; color: var(--text-secondary); font-size: var(--step-0); }
.locked-list { margin: 8px 0 0; padding-left: 18px; color: var(--text-muted); font-size: var(--step--1); }

.empty { color: var(--text-muted); padding: 40px 0; text-align: center; }

@media (max-width: 760px) {
  .hd-in, .wrap, 
  h1 { font-size: var(--step-3); }
  .groups { display: grid; grid-template-columns: 1fr 1fr; }
}

/* --- Login-Gate ----------------------------------------------------------- */
.gate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--bg-scrim); backdrop-filter: blur(10px); padding: 24px;
}
.gate[hidden] { display: none; }
.gate-card {
  width: min(400px, 100%);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-panel));
  box-shadow: var(--shadow-overlay); padding: 28px;
}
.gate-card .eyebrow { margin-bottom: 4px; }
.gate-card h2 { font-size: var(--step-2); margin: 0 0 6px; }
.gate-card p.sub { margin: 0 0 20px; color: var(--text-secondary); font-size: var(--step-0); }
.gate-card .field { margin-bottom: 13px; }
.gate-card input {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid); background: var(--bg-inset);
  color: var(--text-primary); font: inherit;
}
.gate-card input:focus { border-color: var(--border-active); outline: none; }
.gate-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.gate-err {
  color: var(--danger); font-size: var(--step--1); min-height: 1.3em;
  margin-top: 10px; display: block;
}
.who {
  display: flex; align-items: center; gap: 9px; font-size: var(--step--1);
  color: var(--text-secondary);
}
.who button {
  background: none; border: 0; color: var(--text-muted); cursor: pointer;
  font-size: var(--step--1); text-decoration: underline; padding: 0;
}
.who button:hover { color: var(--accent-ice); }

/* --- Ansichtswechsel ------------------------------------------------------ */
.view[hidden] { display: none; }
.topnav { display: flex; gap: 6px; margin-left: 18px; }
.topnav button {
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 7px 13px; color: var(--text-secondary); cursor: pointer; font-weight: 600;
  font-size: var(--step--1);
}
.topnav button:hover { background: var(--bg-hover); color: var(--text-primary); }
.topnav button[aria-current="true"] {
  background: var(--bg-elevated); border-color: var(--border-active); color: var(--text-primary);
}

/* --- Kennzahlenreihe ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 22px 0; }
.stat {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--bg-panel); padding: 15px 17px; box-shadow: var(--shadow-panel);
}
.stat .sl {
  font-size: var(--step--1); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.stat .sv { font-size: var(--step-3); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat .sd { font-size: var(--step--1); color: var(--text-secondary); margin-top: 2px; }
.stat.good .sv { color: var(--success); }
.stat.warn .sv { color: var(--warning); }
.stat.bad  .sv { color: var(--danger); }

/* --- Fortschrittsblock ---------------------------------------------------- */
.panel {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-panel); box-shadow: var(--shadow-panel);
  padding: 20px 22px; margin-bottom: 18px;
}
.panel > h2 { font-size: var(--step-1); margin-bottom: 4px; }
.panel > .ph { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.panel .sub { color: var(--text-secondary); font-size: var(--step-0); margin: 0; }
.comp { display: grid; gap: 8px; margin-top: 12px; }
.comp-row { display: grid; grid-template-columns: 1fr auto 90px; gap: 12px; align-items: center; }
.comp-row .cl { font-size: var(--step-0); }
.comp-row .cn { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-secondary); }
.comp-bar { height: 5px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.comp-bar > i { display: block; height: 100%; background: var(--accent-ice); transition: width var(--motion-slow) var(--ease); }

/* --- Gate-Bedingungen ----------------------------------------------------- */
.cond { display: grid; gap: 7px; margin-top: 12px; }
.cond-row { display: flex; gap: 10px; align-items: flex-start; font-size: var(--step-0); }
.cond-row .ci { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.cond-row.ok .ci { color: var(--success); }
.cond-row.no .ci { color: var(--danger); }
.cond-row .cd { color: var(--text-muted); font-size: var(--step--1); }

/* --- Tabelle -------------------------------------------------------------- */
.tscroll { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.grid { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
table.grid th {
  text-align: left; font-size: var(--step--1); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--border-mid); white-space: nowrap;
}
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.grid tbody tr:hover { background: var(--bg-hover); }
table.grid td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid td.mono { font-family: var(--font-mono); font-size: var(--step--1); }

/* Herkunft: sichtbar, aber nicht dominant */
.src {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border-soft); background: var(--bg-inset); color: var(--text-muted);
}
.src.imported { border-color: rgba(167,139,250,.34); color: var(--violet); background: rgba(167,139,250,.10); }
.src.billie { border-color: rgba(94,214,255,.34); color: var(--accent-ice); background: var(--accent-ice-dim); }
.lock { color: var(--text-muted); font-size: var(--step--1); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 4px; }
.chip {
  border: 1px solid var(--border-soft); background: var(--bg-inset); color: var(--text-secondary);
  border-radius: 999px; padding: 5px 12px; font-size: var(--step--1); cursor: pointer; font-weight: 600;
}
.chip:hover { background: var(--bg-hover); }
.chip[aria-pressed="true"] { border-color: var(--border-active); color: var(--text-primary); background: var(--accent-ice-dim); }

/* --- Dropzone ------------------------------------------------------------- */
.drop {
  border: 1.5px dashed var(--border-mid); border-radius: var(--radius-lg);
  background: var(--bg-inset); padding: 34px 22px; text-align: center;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
  cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--border-active); background: var(--bg-hover); }
.drop .dt { font-size: var(--step-1); font-weight: 600; }
.drop .ds { color: var(--text-muted); font-size: var(--step--1); margin-top: 4px; }
.result { margin-top: 16px; display: grid; gap: 6px; }
.result .rl { display: flex; gap: 10px; align-items: baseline; font-size: var(--step-0); }
.result .rn { font-family: var(--font-mono); font-weight: 600; min-width: 3ch; text-align: right; }
.result .rl.ok .rn { color: var(--success); }
.result .rl.dup .rn { color: var(--text-muted); }
.result .rl.rev .rn { color: var(--warning); }

/* Belegkorb: was aufgenommen, aber noch nicht gelesen ist. Bis zur
   Auswertung hat ein Beleg keine Periode und steht in keiner Monatsliste —
   ohne diesen Kasten wirkt der Upload wie verschluckt. */
.korb {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border-active); background: var(--bg-hover);
  display: grid; gap: 10px; justify-items: start;
}
.korb-t { font-size: var(--step-0); }
.korb-log { display: grid; gap: 4px; width: 100%; }
.korb-log .rl {
  font-size: var(--step--1); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.korb-log .rl.err { color: var(--danger, var(--warning)); }

/* Der Weg eines Belegs in vier Zeilen. Eine leere Station bleibt sichtbar —
   „nichts steht an" und „ist automatisch durchgelaufen" sehen sonst gleich aus. */
.korb-stand { margin-top: 14px; display: grid; gap: 5px; }
.korb-stand .rl {
  display: flex; gap: 10px; align-items: baseline; font-size: var(--step-0);
}
.korb-stand .rn {
  font-family: var(--font-mono); font-weight: 600;
  min-width: 4ch; text-align: right;
}
.korb-stand .rl.leer { color: var(--text-muted); }
.korb-stand .rl.leer .rn { font-weight: 400; }
.korb-stand .kname { color: var(--text-muted); font-size: var(--step--1); }
.korb-stand .sub { margin-top: 6px; }
.korb-nach { border-style: dashed; }
.result .rl.err .rn { color: var(--danger); }

.findlist { display: grid; gap: 8px; margin-top: 12px; }
.find {
  border-left: 3px solid var(--danger); background: var(--danger-dim);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: var(--step-0);
}
.find code { font-size: var(--step--1); color: var(--text-muted); }

/* ============================================================================
   PRÜFANSICHT
   Links das Original, rechts die Struktur. Der Wahrheitsgrad jedes Feldes
   trägt eine eigene Marke — Farbe steht nie allein, es gibt immer Text dazu.
   ========================================================================== */
.clickable { cursor: pointer; }
.clickable:hover td { background: var(--bg-hover); }
.clickable:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.go {
  font-size: var(--step--1); color: var(--text-muted);
  letter-spacing: .04em; white-space: nowrap;
}
.clickable:hover .go { color: var(--accent-ice); }
.cnt-bad {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--danger-dim);
  color: var(--danger); border: 1px solid rgba(240,97,109,.34);
  font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums;
}

.review {
  position: fixed; inset: 0; z-index: 40; overflow: auto;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  animation: rvIn var(--motion-normal) var(--ease);
}
@keyframes rvIn { from { opacity: 0; transform: translateY(8px); } }

.rv-h {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem var(--rand); border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel); position: sticky; top: 0; z-index: 3;
}
.rv-t { flex: 1; min-width: 0; }
.rv-t h2 { font-size: var(--step-2); margin: 0; }
.rv-t .sub { margin: .15rem 0 0; font-size: var(--step--1); color: var(--text-secondary); }
.rv-s { flex-shrink: 0; }

/* Durchlauf: blättern ohne zurück zur Liste */
.rv-nav { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.rv-nav .btn { min-width: 2.4rem; font-size: 1.15rem; line-height: 1; padding-inline: .6rem; }
.rv-pos { font-variant-numeric: tabular-nums; color: var(--text-secondary);
  font-size: var(--step--1); min-width: 4.5rem; text-align: center; }
.rv-meldung { margin: .75rem var(--rand) 0; padding: .55rem .85rem; border-radius: 8px;
  border: 1px solid var(--border-soft); background: var(--bg-panel);
  color: var(--text-secondary); font-size: var(--step--1); }
.chips-start { margin-left: auto; }
.sammel-gruppe { margin-top: 1.1rem; }
.sammel-gruppe h4 { margin: 0 0 .4rem; font-size: var(--step-0); }
.sammel-gruppe .sub { margin: 0 0 .5rem; }
.sammel-gruppe .korb-log { margin-top: .5rem; }
.rv-meldung.err { color: var(--danger); border-color: rgba(240,97,109,.34); }
.rv-erledigen { flex-shrink: 0; }
.rv-doppel { color: var(--text-primary, inherit); border-color: var(--border-active); }
.rv-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
tr.zuletzt td { background: var(--bg-hover); }

.chip-state {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  font-size: var(--step--1); letter-spacing: .05em; text-transform: uppercase;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border-soft);
}
.chip-state svg { width: 13px; height: 13px; }
.chip-state.locked { color: var(--text-muted); }
.chip-state.done  { color: var(--success); background: var(--success-dim); border-color: rgba(52,211,153,.3); }
.chip-state.ready { color: var(--accent-ice); background: var(--accent-ice-dim); border-color: rgba(94,214,255,.3); }
.chip-state.warn  { color: var(--warning); background: var(--warning-dim); border-color: rgba(245,165,36,.3); }

.rv-findings { padding: 1rem var(--rand) 0; }
.findings { display: flex; flex-direction: column; gap: .5rem; }
.f-clear {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  color: var(--success); font-size: var(--step-0);
}
.f-clear svg { width: 15px; height: 15px; }
.finding {
  border: 1px solid var(--border-soft); border-left-width: 3px;
  border-radius: var(--radius-md); padding: .7rem .9rem;
  background: var(--bg-panel);
}
.finding.blocking { border-left-color: var(--danger); background: var(--danger-dim); }
.finding.warn     { border-left-color: var(--warning); background: var(--warning-dim); }
.finding.info     { border-left-color: var(--accent-ice); }
.f-h { display: flex; align-items: center; gap: .6rem; }
.f-sev {
  font-size: .68rem; font-weight: 700; letter-spacing: var(--tracking-label);
}
.finding.blocking .f-sev { color: var(--danger); }
.finding.warn .f-sev { color: var(--warning); }
.finding.info .f-sev { color: var(--accent-ice); }
.f-code { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); }
.f-d { margin: .3rem 0 .5rem; font-size: var(--step-0); color: var(--text-primary); }
.f-a { display: flex; gap: .5rem; }

.rv-grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 32vw, 620px);
  gap: 1.5rem; padding: 1rem var(--rand) 2rem; align-items: start;
}
.doc {
  position: sticky; top: 5.5rem; height: calc(100vh - 8rem);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-inset); overflow: hidden;
}
.doc-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.doc-ext {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: .5rem; padding: 2.5rem; text-align: center;
}
.doc-ext h3 { margin: 0; font-size: var(--step-2); }
.doc-ext .sub { max-width: 42ch; margin: 0 auto; color: var(--text-secondary); }
.doc-ext .mono { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--step--1); }

.rv-data { display: flex; flex-direction: column; gap: 1rem; }
.card {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-panel); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-panel);
}
.card h3 {
  margin: 0 0 .9rem; font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.card-a {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border-soft);
}
.hint {
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: .1rem .35rem;
}

/* --- Felder mit Wahrheitsgrad --------------------------------------------- */
.fields { display: flex; flex-direction: column; }
.fr {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: .5rem .75rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--border-soft);
}
.fr:last-child { border-bottom: 0; }
.fr.unbestaetigt { background: linear-gradient(90deg, var(--warning-dim), transparent 45%); }
.fl { font-size: var(--step--1); color: var(--text-muted); }
.fv { font-size: var(--step-1); color: var(--text-primary); overflow-wrap: anywhere; }
.fv.r { text-align: right; font-variant-numeric: tabular-nums; }
.fe {
  grid-column: 1 / -1; margin: .15rem 0 0;
  font-size: var(--step--1); color: var(--text-muted); font-style: italic;
  overflow-wrap: anywhere;
}

.lv {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .45rem; border-radius: var(--radius-sm);
  font-size: .66rem; font-weight: 600; letter-spacing: .07em;
  border: 1px solid var(--border-soft); background: var(--bg-elevated);
  color: var(--text-muted); white-space: nowrap;
}
.lv small { font-family: var(--font-mono); font-weight: 500; opacity: .75; }
.lvd { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.lv-decided   { color: var(--success);    background: var(--success-dim);    border-color: rgba(52,211,153,.32); }
.lv-validated { color: var(--accent-ice); background: var(--accent-ice-dim); border-color: rgba(94,214,255,.32); }
.lv-extracted { color: var(--accent-ice); }
.lv-suggested { color: var(--warning);    background: var(--warning-dim);    border-color: rgba(245,165,36,.3); }
.lv-external  { color: var(--text-muted); }
.lv-none      { color: var(--danger);     background: var(--danger-dim);     border-color: rgba(240,97,109,.3); }

/* --- Kontierung ----------------------------------------------------------- */
.acct {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border-soft);
}
.acct:last-child { border-bottom: 0; }
.acct-l { min-width: 0; }
.acct-l .k { display: block; font-size: var(--step--1); color: var(--text-muted); }
.acct-l .t { display: block; font-size: var(--step-0); color: var(--text-primary); }
.acct-r { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.acct-chip {
  padding: .25rem .55rem; border-radius: var(--radius-sm);
  background: var(--accent-ice-dim); border: 1px solid rgba(94,214,255,.3);
  color: var(--accent-ice); font-size: var(--step--1);
}
.acct-chip b { font-family: var(--font-mono); }
.acct-none { font-size: var(--step--1); color: var(--warning); }

/* --- Kontodialog ---------------------------------------------------------- */
.dlg-back {
  position: fixed; inset: 0; z-index: 60; background: var(--bg-scrim);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  backdrop-filter: blur(3px);
}
.dlg {
  width: min(640px, 100%); max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  padding: 1.25rem;
}
.dlg h3 { margin: 0 0 .2rem; font-size: var(--step-2); }
.dlg .sub { margin: 0 0 .9rem; font-size: var(--step--1); color: var(--text-secondary); }
.search {
  width: 100%; padding: .6rem .75rem; margin-bottom: .75rem;
  background: var(--bg-inset); border: 1px solid var(--border-mid);
  border-radius: var(--radius-md); color: var(--text-primary);
  font: inherit; font-size: var(--step-0);
}
.search:focus { outline: none; border-color: var(--border-active); box-shadow: var(--glow-ice); }
.acct-list { overflow: auto; display: flex; flex-direction: column; gap: .3rem; }
.acct-opt {
  text-align: left; width: 100%; padding: .6rem .7rem; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid transparent;
  border-radius: var(--radius-md); color: var(--text-primary); font: inherit;
}
.acct-opt:hover, .acct-opt:focus-visible {
  border-color: var(--border-active); background: var(--bg-hover); outline: none;
}
.ao-h { display: flex; align-items: baseline; gap: .6rem; }
.ao-h b { font-family: var(--font-mono); color: var(--accent-ice); }
.ao-d { margin: .2rem 0 0; font-size: var(--step--1); color: var(--text-muted); }
.ao-r { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.rule {
  font-size: .64rem; letter-spacing: .05em; padding: .1rem .35rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  color: var(--text-muted); font-family: var(--font-mono);
}
.dlg-f { display: flex; justify-content: flex-end; margin-top: .9rem; }

/* --- Abschluss ------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.steps li {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--step-0); color: var(--text-muted);
}
.steps li svg { width: 14px; height: 14px; flex-shrink: 0; }
.steps li.done { color: var(--success); }
.ok-line { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--success); }
.ok-line svg { width: 15px; height: 15px; }
.err {
  margin: .75rem 0 0; padding: .6rem .75rem; border-radius: var(--radius-md);
  background: var(--danger-dim); border: 1px solid rgba(240,97,109,.32);
  color: var(--danger); font-size: var(--step--1);
}
.btn.small { padding: .3rem .6rem; font-size: var(--step--1); }

@media (max-width: 1100px) {
  .rv-grid { grid-template-columns: 1fr; }
  .doc { position: static; height: 60vh; }
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.card-h h3 { margin: 0; }
.lv-default { color: var(--text-muted); border-style: dashed; }
.doc { position: sticky; }
.doc-open {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
  padding: .35rem .7rem; border-radius: var(--radius-sm);
  background: var(--bg-panel); border: 1px solid var(--border-mid);
  color: var(--text-secondary); font-size: var(--step--1); text-decoration: none;
}
.doc-open:hover { border-color: var(--border-active); color: var(--accent-ice); }

/* ============================================================================
   NAVIGATION (§12) — sechs Gruppen, gruppiert beschriftet
   ========================================================================== */
/* Eigene Zeile: sechs Gruppen passen nicht neben Marke und Benutzer, ohne
   dass eines davon umbricht. */
.mainnav {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) 12px;
  display: flex; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap;
  overflow-x: auto; scrollbar-width: thin;
}
.navg { display: flex; flex-direction: column; gap: .25rem; }
.navg-l {
  font-size: .6rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); padding-left: .35rem;
}
.navg-p { display: flex; gap: .15rem; }
.navb {
  padding: .3rem .55rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--text-secondary); font: inherit;
  font-size: var(--step--1); cursor: pointer; white-space: nowrap;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.navb:hover { color: var(--text-primary); background: var(--bg-hover); }
.navb[aria-current="true"] {
  color: var(--accent-ice); background: var(--accent-ice-dim);
  border-color: rgba(94,214,255,.28);
}
.navb.off { color: var(--text-muted); opacity: .45; cursor: not-allowed; }
.navb.off::after { content: " ·"; }
.navb:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }

/* ============================================================================
   NEXT BEST ACTION (§19) — wenige Punkte, nach Dringlichkeit
   ========================================================================== */
.nba { list-style: none; margin: 0; padding: 0; max-width: 78rem; display: flex; flex-direction: column; gap: .5rem; }
.nba-i {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .85rem 1rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-mid);
}
.nba-i.r1 { border-left-color: var(--danger); }
.nba-i.r2 { border-left-color: var(--warning); }
.nba-i.r3 { border-left-color: var(--accent-ice); }
.nba-t { min-width: 0; }
.nba-when {
  display: block; font-size: .62rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .15rem;
}
.nba-i.r1 .nba-when { color: var(--danger); }
.nba-i.r2 .nba-when { color: var(--warning); }
.nba-t h3 { margin: 0; font-size: var(--step-1); font-weight: 600; }
.nba-t .sub { margin: .15rem 0 0; font-size: var(--step--1); color: var(--text-secondary); }

/* ============================================================================
   RADAR (§15)
   ========================================================================== */
.radar-head { text-align: right; }
.radar-big {
  font-size: var(--step-4); font-weight: 600; line-height: 1;
  color: var(--accent-ice); font-variant-numeric: tabular-nums;
}
.radar-head .sub { margin: .2rem 0 0; font-size: var(--step--1); color: var(--text-muted); }
/* Zwei Spalten nur, wenn das Panel breit genug ist. In der Dashboardspalte
   steht das Radar über der Liste — sonst wird die Liste zur Wortsäule. */
.radar {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem; align-items: center; margin-top: .5rem;
}
@container panel (min-width: 720px) {
  .radar { grid-template-columns: clamp(280px, 34%, 420px) minmax(0, 1fr); gap: 1.75rem; }
}
.panel { container-type: inline-size; container-name: panel; }
.radar-svg { width: 100%; height: auto; }
.radar-ring { fill: none; stroke: var(--border-soft); stroke-width: 1; }
.radar-spoke { stroke: var(--border-soft); stroke-width: 1; }
.radar-gap { stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .8; }
.radar-area {
  fill: var(--accent-ice-dim); stroke: var(--accent-ice); stroke-width: 1.5;
  stroke-linejoin: round;
}
.radar-dot { fill: var(--accent-ice); }
.radar-label {
  fill: var(--text-secondary); font-size: 10px; font-family: var(--font-ui);
  letter-spacing: .04em;
}
.radar-value {
  fill: var(--accent-ice); font-size: 10px; font-family: var(--font-mono);
}
.radar-value.none { fill: var(--warning); font-size: 8.5px; }

/* Auf breiten Schirmen darf die Liste nicht auseinanderlaufen — Label links,
   Wert rechts, dazwischen zwei Handbreit Nichts liest sich schlecht. */
.radar-list {
  list-style: none; margin: 0; padding: 0; max-width: 62rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.radar-btn {
  width: 100%; text-align: left; padding: .5rem .7rem; cursor: pointer; font: inherit;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--text-primary);
}
.radar-btn:hover:not(:disabled), .radar-btn:focus-visible {
  background: var(--bg-hover); border-color: var(--border-mid); outline: none;
}
.radar-btn:disabled { cursor: default; }
.ri-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ri-v { white-space: nowrap; }
.ri-c, .ri-w { overflow-wrap: anywhere; }
.ri-l { font-size: var(--step-0); font-weight: 500; }
.ri-v {
  font-family: var(--font-mono); font-size: var(--step-0); color: var(--accent-ice);
  font-variant-numeric: tabular-nums;
}
.radar-item.unmessbar .ri-v { color: var(--warning); }
.ri-c { margin: .1rem 0 0; font-size: var(--step--1); color: var(--text-muted); }
.ri-w { margin: .25rem 0 0; font-size: var(--step--1); color: var(--warning); }

@media (max-width: 900px) {
  .radar { grid-template-columns: 1fr; }
  .nba-i { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* --- Dublettenvergleich --------------------------------------------------- */
.dlg.wide { width: min(880px, 100%); }
.dup-body { overflow: auto; }
.dup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dup {
  padding: .8rem .9rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: var(--bg-elevated);
}
.dup.verdacht { border-color: rgba(240,97,109,.4); background: var(--danger-dim); }
.dup.behalten { border-color: rgba(52,211,153,.32); background: var(--success-dim); }
.dup-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.dup-r {
  font-size: .64rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.dup.verdacht .dup-r { color: var(--danger); }
.dup.behalten .dup-r { color: var(--success); }
.dup-id { font-size: var(--step--1); color: var(--text-muted); }
.dup-l { margin: 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: .2rem .6rem; }
.dup-l dt { font-size: var(--step--1); color: var(--text-muted); }
.dup-l dd { margin: 0; font-size: var(--step--1); color: var(--text-primary); overflow-wrap: anywhere; }
.dup-link {
  display: inline-block; margin-top: .6rem; font-size: var(--step--1);
  color: var(--accent-ice); text-decoration: none;
}
.dup-link:hover { text-decoration: underline; }
.dup-note {
  margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: var(--bg-inset);
}
.dup-note.stark { border-color: rgba(52,211,153,.3); }
.dup-note.schwach { border-color: rgba(245,165,36,.3); }
.dup-note-l {
  display: block; font-size: .64rem; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: .3rem;
}
.dup-note.stark .dup-note-l { color: var(--success); }
.dup-note.schwach .dup-note-l { color: var(--warning); }
.dup-note p { margin: 0; font-size: var(--step-0); }
.dup-note .sub { margin-top: .35rem; font-size: var(--step--1); color: var(--text-muted); }
.dlg-f { gap: .6rem; }
@media (max-width: 700px) { .dup-pair { grid-template-columns: 1fr; } }

/* --- Kontovorschlag ------------------------------------------------------- */
.vorschlag {
  margin-top: .75rem; padding: .7rem .85rem; border-radius: var(--radius-md);
  background: var(--accent-ice-dim); border: 1px solid rgba(94,214,255,.26);
}
.vs-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vs-l {
  font-size: .64rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ice);
}
.vs-w { margin: .4rem 0 0; font-size: var(--step--1); color: var(--text-secondary); }
.vs-a { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }

/* --- Kontospalte ---------------------------------------------------------- */
.konto { max-width: 15rem; }
.kchip {
  display: inline-block; padding: .08rem .35rem; border-radius: var(--radius-sm);
  background: var(--accent-ice-dim); border: 1px solid rgba(94,214,255,.24);
  color: var(--accent-ice); font-family: var(--font-mono); font-size: var(--step--1);
}
.kchip-s {
  padding: .05rem .3rem; border-radius: var(--radius-sm);
  background: var(--accent-ice-dim); color: var(--accent-ice);
  font-family: var(--font-mono); font-size: var(--step--1);
}
.kname {
  display: block; font-size: var(--step--1); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem;
}
.kleer { color: var(--text-muted); }
.koffen { color: var(--warning); font-size: var(--step--1); }

/* --- Befundkarten --------------------------------------------------------- */
.bef-list { display: flex; flex-direction: column; gap: .7rem; }
.bef {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--bg-elevated); padding: .9rem 1rem;
}
.bef-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bef-who h3 { margin: 0; font-size: var(--step-1); font-weight: 600; }
.bef-m {
  margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem;
  font-size: var(--step--1); color: var(--text-muted); align-items: center;
}
.bef-f {
  display: flex; align-items: baseline; gap: .6rem; margin-top: .6rem;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-mid); background: var(--bg-inset);
}
.bef-f.blocking { border-left-color: var(--danger); }
.bef-f.warn { border-left-color: var(--warning); }
.bef-f p { margin: 0; font-size: var(--step-0); color: var(--text-primary); }
.bef-f .f-sev { flex-shrink: 0; }
.bef-a { margin-top: .7rem; }
.btn.danger {
  background: var(--danger-dim); border-color: rgba(240,97,109,.4); color: var(--danger);
}
.btn.danger:hover:not(:disabled) { background: rgba(240,97,109,.2); }
.dup-lern {
  margin: .6rem 0 0; font-size: var(--step--1); color: var(--text-muted);
  font-style: italic;
}

/* ============================================================================
   ERWEITERT — Datenfluss, Schutz, Wissen, Anleitung
   ========================================================================== */
.tabs { display: flex; gap: .3rem; margin: 1.25rem 0 1.5rem; flex-wrap: wrap; }
.tab {
  padding: .45rem .9rem; border-radius: var(--radius-md); font: inherit;
  font-size: var(--step-0); cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  color: var(--text-secondary);
}
.tab:hover { color: var(--text-primary); border-color: var(--border-mid); }
.tab.on {
  background: var(--accent-ice-dim); border-color: rgba(94,214,255,.34);
  color: var(--accent-ice);
}

/* Datenfluss */
.fluss { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.fs {
  padding: .85rem 1rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-ice);
}
.fs-h { display: flex; align-items: center; gap: .8rem; }
.fs-n {
  width: 1.7rem; height: 1.7rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent-ice-dim); color: var(--accent-ice);
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600;
}
.fs-h h3 { margin: 0; font-size: var(--step-1); }
.fs-ort { font-size: var(--step--1); color: var(--text-muted); }
.fs-was { margin: .5rem 0 0; font-size: var(--step-0); }
.fs-raus {
  margin: .4rem 0 0; font-size: var(--step--1); padding: .3rem .6rem;
  border-radius: var(--radius-sm); display: inline-block;
}
.fs-raus.bleibt { background: var(--success-dim); color: var(--success); }
.fs-raus.geht { background: var(--warning-dim); color: var(--warning); }
.fs-schutz { margin: .4rem 0 0; font-size: var(--step--1); color: var(--text-muted); }
.fs-zweck { max-width: 22rem; font-size: var(--step--1); color: var(--text-secondary); }

/* Schutz */
.bfd {
  padding: .85rem 1rem; border-radius: var(--radius-md); margin-bottom: .6rem;
  border: 1px solid var(--border-soft); background: var(--bg-elevated);
  border-left: 3px solid var(--border-mid);
}
.bfd.ok { border-left-color: var(--success); background: var(--success-dim); }
.bfd.warnung { border-left-color: var(--warning); background: var(--warning-dim); }
.bfd.kritisch { border-left-color: var(--danger); background: var(--danger-dim); }
.bfd-h { display: flex; align-items: center; gap: .6rem; }
.bfd-h h3 { margin: 0; font-size: var(--step-1); }
.bfd-m svg { width: 16px; height: 16px; display: block; }
.bfd.ok .bfd-m { color: var(--success); }
.bfd.warnung .bfd-m { color: var(--warning); }
.bfd.kritisch .bfd-m { color: var(--danger); }
.bfd p { margin: .4rem 0 0; font-size: var(--step-0); color: var(--text-secondary); }

/* Wissen */
.chip.on { background: var(--accent-ice-dim); color: var(--accent-ice); border-color: rgba(94,214,255,.3); }
.chip.off { opacity: .38; }
.warn-line { color: var(--warning); }
.thema { border-bottom: 1px solid var(--border-soft); padding: .2rem 0; }
.thema:last-child { border-bottom: 0; }
.thema summary {
  cursor: pointer; padding: .65rem .2rem; display: flex;
  align-items: baseline; justify-content: space-between; gap: 1rem;
  list-style: none;
}
.thema summary::-webkit-details-marker { display: none; }
.thema summary::before {
  content: "▸"; color: var(--text-muted); margin-right: .5rem;
  transition: transform var(--motion-fast) var(--ease); display: inline-block;
}
.thema[open] summary::before { transform: rotate(90deg); }
.th-t { font-size: var(--step-1); font-weight: 600; flex: 1; }
.th-s { font-size: var(--step--1); color: var(--text-muted); font-family: var(--font-mono); }
.th-b { padding: .3rem 0 .9rem 1.3rem; }
.th-lv {
  display: inline-block; font-size: .62rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ice); margin-bottom: .3rem;
}
.th-x p { margin: 0 0 .6rem; font-size: var(--step-0); line-height: 1.62; max-width: 68ch; }
.th-x p:last-child { margin-bottom: 0; }
.th-locked, .th-pruefen, .th-k {
  margin: .3rem 0 .8rem 1.3rem; font-size: var(--step--1);
}
.th-locked { color: var(--text-muted); font-style: italic; }
.th-pruefen {
  color: var(--warning); padding: .5rem .7rem; border-radius: var(--radius-sm);
  background: var(--warning-dim); max-width: 68ch;
}
.th-k { color: var(--success); }

/* Anleitung */
.howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ht {
  padding: .8rem 1rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.ht-h { display: flex; align-items: center; gap: .8rem; }
.ht-n {
  width: 1.6rem; height: 1.6rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--bg-inset); border: 1px solid var(--border-mid);
  color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--step--1);
}
.ht-h h3 { margin: 0; font-size: var(--step-1); }
.ht-wo { font-size: var(--step--1); color: var(--accent-ice); font-family: var(--font-mono); }
.ht p { margin: .45rem 0 0; font-size: var(--step-0); color: var(--text-secondary); max-width: 76ch; }
.nie { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.nie li { font-size: var(--step-0); color: var(--text-secondary); }
.nie b { color: var(--text-primary); }

/* ============================================================================
   FORTSCHRITT UND NEBENAUFGABEN
   ========================================================================== */
.lvl { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.lvl-n {
  font-size: .64rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-ice);
}
.lvl h3 { margin: .1rem 0 0; font-size: var(--step-3); font-weight: 600; }
.lvl-p { text-align: right; }
.lvl-p b {
  display: block; font-size: var(--step-3); color: var(--accent-ice);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.lvl-p span { font-size: var(--step--1); color: var(--text-muted); }
.quests { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; }
.quest {
  padding: .85rem 1rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
}
.quest:hover { border-color: var(--border-mid); }
.q-h { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; width: 100%; }
.q-h h3 { margin: 0; font-size: var(--step-1); }
.q-m { display: flex; align-items: baseline; gap: .5rem; flex-shrink: 0; }
.q-p {
  color: var(--success); font-family: var(--font-mono); font-size: var(--step--1);
  font-weight: 600;
}
.q-m span:last-child { font-size: var(--step--1); color: var(--text-muted); }
.quest .sub { margin: 0; font-size: var(--step--1); color: var(--text-secondary); flex: 1; }

/* ============================================================================
   GERÜST — feste Seitenleiste, Kopfzeile, Arbeitsfläche
   ========================================================================== */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
body.schmal .app { grid-template-columns: 62px minmax(0, 1fr); }
.main { min-width: 0; display: flex; flex-direction: column; }
.wrap {
  flex: 1; min-width: 0; padding: 0 var(--rand) 3rem;
  display: flex; flex-direction: column;
}

/* --- Seitenleiste --------------------------------------------------------- */
.sb {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, #0a1220 0%, #070e1a 100%);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; padding: 1rem .75rem 1rem;
}
.sb-brand { position: relative; padding: .3rem .5rem 1.1rem; }
.sb-logo { display: flex; align-items: baseline; gap: .4rem; }
.sb-logo b { font-size: 1.25rem; font-weight: 700; letter-spacing: .14em; }
.sb-logo .v {
  font-size: .6rem; padding: .1rem .35rem; border-radius: 999px;
  background: var(--accent-ice-dim); color: var(--accent-ice);
  border: 1px solid rgba(94,214,255,.34);
}
.sb-brand small {
  display: block; margin-top: .2rem; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.sb-collapse {
  position: absolute; top: .1rem; right: .2rem; width: 22px; height: 22px;
  border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  border: 1px solid var(--border-soft); color: var(--text-muted); font: inherit;
  line-height: 1;
}
.sb-collapse:hover { color: var(--accent-ice); border-color: var(--border-active); }
body.schmal .sb-brand small, body.schmal .sb-logo .v,
body.schmal .sb-l, body.schmal .sb-g, body.schmal .sb-deck,
body.schmal .sb-c { display: none; }
body.schmal .sb-logo b { font-size: .8rem; letter-spacing: .04em; }
body.schmal .sb-i { justify-content: center; }

.sb-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sb-g {
  margin: .9rem 0 .25rem; padding: 0 .55rem; font-size: .56rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.sb-i {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .55rem; border-radius: var(--radius-md); font: inherit;
  font-size: var(--step-0); background: transparent; border: 1px solid transparent;
  color: var(--text-secondary); cursor: pointer; text-align: left;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.sb-i:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.sb-i[aria-current="true"] {
  background: var(--accent-ice-dim); color: var(--accent-ice);
  border-color: rgba(94,214,255,.26);
}
.sb-i:disabled { opacity: .34; cursor: not-allowed; }
.sb-i:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.nvi { width: 17px; height: 17px; flex-shrink: 0; }
.nvi.klein { width: 13px; height: 13px; }
.sb-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-c { color: var(--text-muted); font-size: .8rem; }
.sb-b {
  min-width: 1.35rem; padding: .05rem .35rem; border-radius: 999px;
  background: var(--danger-dim); color: var(--danger); font-size: .68rem;
  font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(240,97,109,.3);
}
.sb-deck {
  margin-top: 1rem; padding: .7rem .65rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: var(--bg-inset);
}
.sb-deck-t {
  margin: 0 0 .45rem; font-size: .56rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.sb-deck-a {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
  font-size: var(--step--1); color: var(--text-secondary);
}
.btn.breit { width: 100%; justify-content: center; }

/* --- Kopfzeile ------------------------------------------------------------ */
.hd {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem var(--rand) 1rem; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(16,29,48,.5), transparent);
}
.hd-greet { flex: 1; min-width: 0; }
.hd-greet h1 { margin: 0; font-size: var(--step-3); font-weight: 600; }
.hd-greet .sub { margin: .1rem 0 0; font-size: var(--step--1); color: var(--text-secondary); }
.hd-date {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto;
  gap: 0 .6rem; align-items: center; text-align: center; flex-shrink: 0;
  padding: 0 1.5rem; border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}
.hd-wd {
  grid-column: 1 / -1; font-size: .56rem; letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.hd-d {
  grid-row: 2 / 4; font-size: 2.1rem; font-weight: 600; line-height: .95;
  color: var(--accent-ice); font-variant-numeric: tabular-nums;
}
.hd-m { font-size: var(--step--1); color: var(--text-secondary); text-align: left; }
.hd-t {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--text-muted); text-align: left; font-variant-numeric: tabular-nums;
}
.hd-sys {
  display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
  padding: .5rem .9rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: var(--bg-panel);
}
.hd-sys.ok { border-color: rgba(52,211,153,.28); }
.hd-sys.warn { border-color: rgba(245,165,36,.28); }
.hd-sys.bad { border-color: rgba(240,97,109,.32); }
.hd-sys-l {
  display: block; font-size: .56rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.hd-sys-v { font-size: var(--step-0); color: var(--text-primary); }
.hd-tools { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.hd-tool {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-md); background: var(--bg-panel);
  border: 1px solid var(--border-soft); color: var(--text-secondary);
}
.hd-tool:hover { color: var(--accent-ice); border-color: var(--border-active); }
.hd-tool svg { width: 16px; height: 16px; }
.hd-user {
  display: flex; align-items: center; gap: .55rem; cursor: pointer; font: inherit;
  padding: .3rem .7rem .3rem .35rem; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  color: var(--text-primary); text-align: left;
}
.hd-user:hover { border-color: var(--border-active); }
.hd-av {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent-blue-dim); color: var(--accent-ice);
  font-size: var(--step--1); font-weight: 600;
}
.hd-user b { display: block; font-size: var(--step--1); font-weight: 500; }
.hd-user span:last-child { font-size: .62rem; color: var(--text-muted); }

/* --- KPI-Streifen --------------------------------------------------------- */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .75rem; margin: 1.4rem 0 1rem;
}
.kpi {
  display: flex; gap: .8rem; padding: .9rem 1rem; align-items: flex-start;
  border-radius: var(--radius-lg); background: var(--bg-panel);
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-panel);
}
.kpi.warn { border-color: rgba(245,165,36,.26); }
.kpi.bad { border-color: rgba(240,97,109,.26); }
.kpi.ok { border-color: rgba(52,211,153,.26); }
.kpi-i {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-md);
  display: grid; place-items: center;
}
.kpi-i svg { width: 18px; height: 18px; }
.kpi-i.ice { background: var(--accent-ice-dim); color: var(--accent-ice); }
.kpi-i.blue { background: var(--accent-blue-dim); color: #7aa7f8; }
.kpi-i.amber { background: var(--warning-dim); color: var(--warning); }
.kpi-i.violet { background: rgba(167,139,250,.14); color: var(--violet); }
.kpi-i.green { background: var(--success-dim); color: var(--success); }
.kpi-t { min-width: 0; flex: 1; }
.kpi-l {
  display: block; font-size: .58rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.kpi-v {
  display: block; margin-top: .15rem; font-size: var(--step-3); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi.warn .kpi-v { color: var(--warning); }
.kpi.bad .kpi-v { color: var(--danger); }
.kpi.ok .kpi-v { color: var(--success); }
.kpi-s { display: block; margin-top: .25rem; font-size: var(--step--1); color: var(--text-muted); }
.kpi-s.ok { color: var(--success); }
.kpi-s.bad { color: var(--danger); }
.kpi-bar {
  height: 3px; margin-top: .4rem; border-radius: 999px; background: var(--bg-inset);
  overflow: hidden;
}
.kpi-bar i { display: block; height: 100%; background: var(--accent-ice); }
.kpi-bar i.unsicher {
  background: repeating-linear-gradient(90deg, var(--warning) 0 6px, transparent 6px 11px);
}

/* --- Raster --------------------------------------------------------------- */
.grid-3 {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.35fr) minmax(300px, .9fr);
  gap: .9rem; align-items: start;
}
.sp { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
@media (max-width: 1500px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: 1fr; } }

/* --- Boss Battle ---------------------------------------------------------- */
.boss {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(59,130,246,.16), transparent 60%),
    var(--bg-panel);
}
.boss-p { text-align: right; }
.boss-n {
  font-size: var(--step-4); font-weight: 600; color: var(--accent-ice);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.boss-bar {
  height: 6px; border-radius: 999px; background: var(--bg-inset);
  overflow: hidden; margin: .2rem 0 1rem;
}
.boss-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-ice));
  transition: width var(--motion-slow) var(--ease);
}
.boss-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.boss-s {
  display: grid; grid-template-columns: 18px 1fr auto auto; gap: .7rem;
  align-items: center; padding: .55rem .4rem;
  border-bottom: 1px solid var(--border-soft);
}
.boss-s:last-child { border-bottom: 0; }
.boss-s.klick { cursor: pointer; border-radius: var(--radius-sm); }
.boss-s.klick:hover { background: var(--bg-hover); }
.boss-s.klick:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.boss-m { color: var(--text-muted); display: grid; place-items: center; }
.boss-m svg { width: 15px; height: 15px; }
.boss-s.done .boss-m { color: var(--success); }
.boss-s.bad .boss-m { color: var(--danger); }
.boss-t { font-size: var(--step-0); min-width: 0; }
.boss-c {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.boss-q {
  font-family: var(--font-mono); font-size: var(--step--1); min-width: 3.6rem;
  text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.boss-s.done .boss-q { color: var(--success); }
.boss-s.bad .boss-q { color: var(--danger); }
.boss-f {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border-soft);
}
.boss-f .sub { margin: 0; font-size: var(--step--1); color: var(--text-muted); flex: 1; }

/* --- Aktionen und Konten -------------------------------------------------- */
.akt { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .7rem; }
.akt-i {
  display: flex; align-items: center; gap: .7rem; width: 100%; cursor: pointer;
  padding: .6rem .75rem; border-radius: var(--radius-md); font: inherit;
  text-align: left; background: var(--bg-elevated);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--border-mid);
  color: var(--text-primary);
}
.akt-i:hover { border-color: var(--border-active); background: var(--bg-hover); }
.akt-i.r1 { border-left-color: var(--danger); }
.akt-i.r2 { border-left-color: var(--warning); }
.akt-i.r3 { border-left-color: var(--accent-ice); }
.akt-t { flex: 1; min-width: 0; }
.akt-t b { display: block; font-size: var(--step-0); font-weight: 600; }
.akt-t span { display: block; font-size: var(--step--1); color: var(--text-muted); }
.akt-c { color: var(--text-muted); font-size: 1.1rem; }
.kto { display: flex; flex-direction: column; }
.kto-i {
  display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0;
  border-bottom: 1px solid var(--border-soft); font-size: var(--step-0);
}
.kto-i:last-child { border-bottom: 0; }
.kto-i.gesamt { margin-top: .3rem; border-top: 1px solid var(--border-mid); padding-top: .6rem; }
.kto-i.gesamt .kto-v { color: var(--accent-ice); font-weight: 600; }
.kto-l { color: var(--text-secondary); min-width: 0; }
.kto-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kto-v.neg { color: var(--danger); }
.schmal-panel .sub { font-size: var(--step--1); }

/* --- Schnellzugriff und Entscheidungen ------------------------------------ */
.schnell {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .8rem 1rem; border-radius: var(--radius-lg);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
}
.schnell-l {
  font-size: .58rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin-right: .6rem;
}
.schnell-b {
  display: flex; align-items: center; gap: .45rem; cursor: pointer; font: inherit;
  font-size: var(--step-0); padding: .45rem .8rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  color: var(--text-secondary);
}
.schnell-b:hover { color: var(--accent-ice); border-color: var(--border-active); }
.schnell-b svg { width: 15px; height: 15px; }

.ents {
  margin-top: .9rem; padding: 1rem 1.15rem; border-radius: var(--radius-lg);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
}
.ents-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ents-h h2 { margin: 0; font-size: var(--step-2); }
.ents-h .sub { margin: .2rem 0 0; font-size: var(--step--1); color: var(--text-secondary); max-width: 80ch; }
.ents-l {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .5rem; margin-top: .9rem;
}
.ents-i {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; font: inherit;
  padding: .55rem .7rem; border-radius: var(--radius-md); text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  color: var(--text-primary);
}
.ents-i:hover { border-color: var(--border-active); }
.ents-n {
  width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent-blue-dim);
  color: var(--accent-ice); font-size: var(--step--1); font-family: var(--font-mono);
}
.ents-i b { display: block; font-size: var(--step--1); font-weight: 600; }
.ents-i span:last-child { display: block; font-size: .62rem; color: var(--text-muted); }

/* --- Overlay (Deck) ------------------------------------------------------- */
.ovl {
  position: fixed; top: 1rem; right: 1rem; bottom: 1rem; width: min(340px, calc(100vw - 2rem));
  z-index: 50; display: flex; flex-direction: column; padding: 1.1rem;
  border-radius: var(--radius-lg); background: var(--bg-panel);
  border: 1px solid var(--border-mid); box-shadow: var(--shadow-overlay);
  transform: translateX(16px); opacity: 0;
  transition: transform var(--motion-normal) var(--ease), opacity var(--motion-normal) var(--ease);
}
.ovl.auf { transform: none; opacity: 1; }
.ovl-h { display: flex; align-items: center; justify-content: space-between; }
.ovl-h h2 { margin: 0; font-size: var(--step-2); }
.ovl-x {
  width: 26px; height: 26px; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
}
.ovl-x:hover { color: var(--danger); border-color: rgba(240,97,109,.4); }
.ovl-s { margin: .4rem 0 .9rem; font-size: var(--step--1); color: var(--text-secondary); }
.ovl-f { display: flex; gap: .5rem; margin-top: .9rem; }
.ovl-f .btn { flex: 1; justify-content: center; }
.deck-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.deck-g {
  margin: .7rem 0 .2rem; font-size: .56rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.deck-i {
  display: flex; align-items: center; gap: .6rem; padding: .42rem .3rem;
  cursor: pointer; border-radius: var(--radius-sm);
}
.deck-i:hover { background: var(--bg-hover); }
.deck-i.off { opacity: .4; cursor: not-allowed; }
.deck-i input { position: absolute; opacity: 0; pointer-events: none; }
.deck-l { flex: 1; font-size: var(--step-0); }
.deck-sw {
  width: 30px; height: 17px; border-radius: 999px; flex-shrink: 0; position: relative;
  background: var(--bg-inset); border: 1px solid var(--border-mid);
  transition: background var(--motion-fast) var(--ease);
}
.deck-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 999px; background: var(--text-muted);
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.deck-i input:checked + .deck-l + .deck-sw {
  background: var(--accent-ice-dim); border-color: rgba(94,214,255,.44);
}
.deck-i input:checked + .deck-l + .deck-sw::after {
  transform: translateX(13px); background: var(--accent-ice);
}
.deck-i input:focus-visible + .deck-l + .deck-sw { outline: 2px solid var(--accent-blue); }

/* --- Bank, Lieferanten, Reifegrad ---------------------------------------- */
.erw { font-size: var(--step--1); padding: .12rem .4rem; border-radius: var(--radius-sm); }
.erw.bad { background: var(--danger-dim); color: var(--danger); }
.erw.ok { background: var(--success-dim); color: var(--success); }
.erw.warn { background: var(--warning-dim); color: var(--warning); }
.erw.mute { color: var(--text-muted); }
.zweck { max-width: 26rem; font-size: var(--step--1); color: var(--text-muted);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.neg { color: var(--danger); }
.chip.bad { background: var(--danger-dim); color: var(--danger); border-color: rgba(240,97,109,.3); }
.lf { display: flex; gap: .7rem; flex-wrap: wrap; }
.lf-i {
  padding: .6rem .8rem; border-radius: var(--radius-md); background: var(--bg-inset);
  border: 1px solid var(--border-soft); min-width: 12rem;
}
.lf-i.ziel { border-color: rgba(52,211,153,.34); background: var(--success-dim); }
.lf-i b { display: block; font-size: var(--step-0); }
.lf-i span { display: block; font-size: var(--step--1); color: var(--text-muted); }
.lf-z { color: var(--success) !important; }

.stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; }
.stufe {
  padding: .7rem .8rem; border-radius: var(--radius-md); background: var(--bg-inset);
  border: 1px solid var(--border-soft); opacity: .55;
}
.stufe.erreicht { opacity: 1; border-color: rgba(94,214,255,.3); background: var(--accent-ice-dim); }
.stufe-n {
  display: inline-block; font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--accent-ice); margin-bottom: .2rem;
}
.stufe b { display: block; font-size: var(--step-0); }
.stufe .sub { margin: .2rem 0 0; font-size: var(--step--1); color: var(--text-muted); }
.rf-h { text-align: right; }
.rf-s { display: block; font-size: var(--step-1); color: var(--accent-ice); font-weight: 600; }
.rf-q { font-size: var(--step--1); color: var(--text-muted); font-family: var(--font-mono); }
.rf-d { margin: 0 0 .8rem; font-size: var(--step-0); color: var(--text-secondary); }
.rf-z { display: flex; gap: 2rem; padding: .7rem 0; border-top: 1px solid var(--border-soft); }
.rf-z b {
  display: block; font-size: var(--step-2); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rf-z span { font-size: var(--step--1); color: var(--text-muted); }
.rf-n { padding-top: .7rem; border-top: 1px solid var(--border-soft); }
.rf-n-l {
  font-size: .6rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.rf-n ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: var(--step--1); color: var(--text-secondary); }
.rf-warn {
  margin: .6rem 0 0; padding: .5rem .7rem; border-radius: var(--radius-sm);
  background: var(--warning-dim); color: var(--warning); font-size: var(--step--1);
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sb { position: static; height: auto; }
  .hd { flex-wrap: wrap; }
  .hd-date { order: 3; }
}
.fehl-s { text-align: right; }
.fehl-s b {
  display: block; font-size: var(--step-2); color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.fehl-s span { font-size: var(--step--1); color: var(--text-muted); }
.fehl-l { display: flex; flex-direction: column; margin-bottom: .7rem; }
.fehl-i {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--border-soft);
}
.fehl-i:last-child { border-bottom: 0; }
.fehl-i b { display: block; font-size: var(--step-0); font-weight: 500; }
.fehl-i span { display: block; font-size: var(--step--1); color: var(--text-muted); }
.fehl-v {
  font-family: var(--font-mono); color: var(--danger); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   SCHULUNG — eine Aufgabe je Bildschirm
   ========================================================================== */
.note { display: flex; align-items: center; gap: .7rem; }
.note-n {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: var(--step-3); font-weight: 700;
  background: var(--accent-ice-dim); color: var(--accent-ice);
  border: 1px solid rgba(94,214,255,.32);
}
.note.gross .note-n { width: 3.2rem; height: 3.2rem; font-size: var(--step-4); }
.note b { display: block; font-size: var(--step-1); }
.note span:last-child { display: block; font-size: var(--step--1); color: var(--text-muted); }

.klausur {
  max-width: 62rem; margin: 1.5rem auto; padding: 2rem 2.25rem;
  border-radius: var(--radius-lg); background: var(--bg-panel);
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-panel);
}
.kl-h { display: flex; justify-content: space-between; align-items: baseline; }
.kl-n {
  font-size: .6rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.kl-p { font-size: var(--step--1); color: var(--accent-ice); font-family: var(--font-mono); }
.klausur .bar { margin: .5rem 0 1.6rem; }
.kl-f { margin: 0 0 .5rem; font-size: var(--step-3); font-weight: 600; line-height: 1.35; }
.kl-hi { margin: 0 0 1.4rem; font-size: var(--step-0); color: var(--text-muted); font-style: italic; }
.kl-e { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.6rem; }
.kl-o {
  text-align: left; padding: .85rem 1.1rem; cursor: pointer; font: inherit;
  font-size: var(--step-1); border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  color: var(--text-primary);
}
.kl-o:hover { border-color: var(--border-mid); background: var(--bg-hover); }
.kl-o.an {
  border-color: var(--border-active); background: var(--accent-ice-dim);
  color: var(--accent-ice);
}
.kl-o:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.kl-z { display: flex; align-items: center; gap: .6rem; }
.kl-i {
  flex: 1; max-width: 16rem; padding: .8rem 1rem; font: inherit;
  font-size: var(--step-3); font-family: var(--font-mono);
  background: var(--bg-inset); border: 1px solid var(--border-mid);
  border-radius: var(--radius-md); color: var(--text-primary);
}
.kl-i:focus { outline: none; border-color: var(--border-active); box-shadow: var(--glow-ice); }
.kl-u { font-size: var(--step-2); color: var(--text-muted); }
.kl-t {
  padding: .8rem 1rem; font: inherit; font-size: var(--step-1); resize: vertical;
  background: var(--bg-inset); border: 1px solid var(--border-mid);
  border-radius: var(--radius-md); color: var(--text-primary); line-height: 1.6;
}
.kl-t:focus { outline: none; border-color: var(--border-active); box-shadow: var(--glow-ice); }
.kl-a { display: flex; align-items: center; gap: .6rem; }
.btn.klein { font-size: var(--step--1); opacity: .7; margin-left: auto; }

.erg { border-bottom: 1px solid var(--border-soft); }
.erg summary {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .2rem;
  cursor: pointer; list-style: none;
}
.erg summary::-webkit-details-marker { display: none; }
.erg-m { flex-shrink: 0; display: grid; place-items: center; }
.erg-m svg { width: 15px; height: 15px; }
.erg.ok .erg-m { color: var(--success); }
.erg.halb .erg-m { color: var(--warning); }
.erg.bad .erg-m { color: var(--danger); }
.erg-f { flex: 1; font-size: var(--step-0); min-width: 0; }
.erg-p { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); }
.erg-d, .erg-h { margin: .2rem 0 0 1.9rem; font-size: var(--step--1); }
.erg-d { color: var(--text-muted); }
.erg-h { color: var(--text-secondary); }
.erg-e {
  margin: .6rem 0 .9rem 1.9rem; padding: .7rem .9rem; border-radius: var(--radius-md);
  background: var(--bg-inset); border-left: 3px solid var(--accent-ice);
}
.erg-e p { margin: 0 0 .5rem; font-size: var(--step-0); line-height: 1.6; max-width: 74ch; }
.erg-e p:last-child { margin-bottom: 0; }

.ha {
  padding: .9rem 1.1rem; margin-bottom: .6rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-ice);
}
.ha.spaet { border-left-color: var(--warning); }
.ha-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ha-h h3 { margin: 0; font-size: var(--step-1); }
.ha-f { font-size: var(--step--1); color: var(--text-muted); flex-shrink: 0; }
.ha.spaet .ha-f { color: var(--warning); }
.ha p { margin: .4rem 0 .7rem; font-size: var(--step-0); color: var(--text-secondary); max-width: 76ch; }
.verlauf { display: flex; flex-wrap: wrap; gap: .5rem; }
.vl-i {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .7rem;
  border-radius: var(--radius-md); background: var(--bg-inset);
  border: 1px solid var(--border-soft);
}
.vl-n {
  font-size: var(--step-1); font-weight: 700; color: var(--accent-ice);
  font-family: var(--font-mono);
}
.vl-d, .vl-p { font-size: var(--step--1); color: var(--text-muted); }


/* ============================================================================
   BILLIE v2 — Visual Polish 2026-08
   80 % Finance-Arbeitsplatz, 20 % taktische Tiefe. Keine dekorative Bewegung.
   ========================================================================== */
body {
  background:
    linear-gradient(rgba(105,220,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,220,255,.014) 1px, transparent 1px),
    var(--billie-bg-deep);
  background-size: 56px 56px;
}
body::before {
  background:
    radial-gradient(980px 560px at 82% -8%, rgba(67,136,255,.15), transparent 64%),
    radial-gradient(680px 460px at 16% 18%, rgba(105,220,255,.07), transparent 66%),
    linear-gradient(180deg, transparent 72%, rgba(3,9,20,.62));
}
.app { transition: grid-template-columns var(--billie-motion-normal) var(--ease); }
.wrap { position: relative; isolation: isolate; }
.wrap::before {
  content: ""; position: absolute; inset: 0 var(--rand) auto; height: 1px;
  background: linear-gradient(90deg, var(--billie-accent-cyan), transparent 28%);
  opacity: .24; pointer-events: none;
}
.hd {
  position: sticky; top: 0; z-index: 20;
  background: rgba(3,9,20,.82); backdrop-filter: blur(18px) saturate(125%);
}
.hd-sys { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.sb {
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(105,220,255,.09)),
    linear-gradient(180deg, #071321 0%, #040c17 100%);
}
.sb-brand::after {
  content: ""; display: block; width: 44px; height: 1px; margin-top: .9rem;
  background: linear-gradient(90deg, var(--billie-accent-cyan), transparent);
  opacity: .58;
}
.sb-i { position: relative; }
.sb-i[aria-current="true"] {
  background: linear-gradient(90deg, rgba(105,220,255,.13), rgba(67,136,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.sb-i[aria-current="true"]::before {
  content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 2px;
  border-radius: 2px; background: var(--billie-accent-cyan);
  box-shadow: 0 0 12px rgba(105,220,255,.38);
}
.panel, .kpi, .stat, .ents, .schnell, .card {
  background: linear-gradient(145deg, rgba(13,29,49,.92), rgba(8,21,36,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.028), 0 14px 34px rgba(0,5,13,.23);
}
.panel { position: relative; }
.panel::after {
  content: ""; position: absolute; top: -1px; right: 18px; width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105,220,255,.44));
  pointer-events: none;
}
.kpis { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
.kpi { min-height: 106px; padding: 1rem 1.05rem; }
.kpi-v { letter-spacing: -.035em; }
.kpi-i { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.grid-3 {
  grid-template-columns: minmax(430px, 1.45fr) minmax(280px, .82fr) minmax(330px, 1fr);
  gap: 1rem;
}
.boss {
  overflow: hidden; isolation: isolate;
  border-color: rgba(105,220,255,.23);
  background:
    radial-gradient(circle at 86% 16%, rgba(105,220,255,.11) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 16%, transparent 0 48px, rgba(105,220,255,.08) 49px 50px, transparent 51px 78px, rgba(67,136,255,.06) 79px 80px, transparent 81px),
    linear-gradient(135deg, rgba(67,136,255,.11), transparent 44%),
    linear-gradient(145deg, rgba(13,29,49,.96), rgba(7,18,31,.98));
}
.boss::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto auto;
  width: 46%; height: 52%; opacity: .28;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(105,220,255,.16) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgba(105,220,255,.13) 50%, transparent 50.5%);
  background-size: 22px 22px;
  mask-image: linear-gradient(135deg, transparent, #000);
}
.boss-kicker, .ovl-kicker {
  margin: 0 0 .75rem; color: var(--billie-accent-cyan);
  font: 600 .58rem/1 var(--font-mono); letter-spacing: .16em;
}
.boss-bar { height: 8px; border: 1px solid rgba(105,220,255,.1); }
.boss-bar i { box-shadow: 0 0 18px rgba(105,220,255,.3); }
.boss-s { min-height: 42px; }
.boss-s.done { background: linear-gradient(90deg, rgba(56,214,160,.05), transparent 62%); }
.boss-s.bad { background: linear-gradient(90deg, rgba(255,104,121,.06), transparent 62%); }
.radar-empty {
  margin: .25rem 0 1rem; padding: .65rem .8rem; border: 1px dashed var(--border-mid);
  border-radius: var(--radius-md); color: var(--warning);
  font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .1em; text-align: center;
}
table.grid thead { position: sticky; top: 0; z-index: 2; }
table.grid th { background: #081523; box-shadow: 0 1px var(--border-mid); }
table.grid tbody tr { transition: background var(--motion-fast) var(--ease); }
table.grid td { height: 43px; }
.bank-filters { margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border-soft); }
.bank-filters .chip { display: inline-flex; align-items: center; gap: .4rem; }
.bank-filters .chip[aria-pressed="true"] {
  color: var(--text-primary); background: var(--accent-ice-dim); border-color: var(--border-active);
  box-shadow: inset 0 0 0 1px rgba(105,220,255,.06);
}
.chip-count {
  min-width: 1.25rem; padding: .05rem .34rem; border-radius: 999px;
  background: rgba(255,255,255,.06); color: currentColor;
  font: 600 .68rem/1.35 var(--font-mono); text-align: center;
}
.table-action {
  white-space: nowrap; cursor: pointer; padding: .25rem .5rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid); background: transparent; color: var(--accent-ice);
  font: 600 .7rem/1.3 var(--font-ui);
}
.table-action:hover { background: var(--accent-ice-dim); border-color: var(--border-active); }
.drop {
  position: relative; overflow: hidden; min-height: 240px; display: grid; place-content: center;
  border-color: rgba(105,220,255,.28);
  background:
    linear-gradient(rgba(105,220,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,220,255,.025) 1px, transparent 1px),
    var(--bg-inset);
  background-size: 28px 28px;
}
.drop-glyph {
  width: 48px; height: 58px; margin: 0 auto 1rem; position: relative;
  border: 1px solid rgba(105,220,255,.55); border-radius: 5px;
  background: linear-gradient(145deg, rgba(105,220,255,.09), transparent);
}
.drop-glyph::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 17px; height: 1px;
  background: var(--accent-ice); box-shadow: 0 8px rgba(105,220,255,.6), 0 16px rgba(105,220,255,.32);
}
.drop-glyph::after {
  content: "+"; position: absolute; right: -11px; bottom: -9px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent-blue);
  color: white; font: 600 1rem/1 var(--font-ui); box-shadow: 0 0 18px rgba(67,136,255,.32);
}
.drop-progress { margin-top: 1.15rem; color: var(--text-muted); font: 500 .58rem/1 var(--font-mono); letter-spacing: .13em; }
.drop.processing::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-ice), transparent);
  box-shadow: 0 0 18px rgba(105,220,255,.55); animation: billieScan 1.45s var(--ease) infinite;
}
.drop.processing .drop-glyph { border-color: var(--accent-ice); box-shadow: var(--glow-ice); }
@keyframes billieScan { from { transform: translateY(0); } to { transform: translateY(238px); } }
.rv-pane { min-width: 0; }
.rv-pane-label {
  margin: 0 0 .45rem; color: var(--accent-ice);
  font: 600 .58rem/1 var(--font-mono); letter-spacing: .16em;
}
.rv-original { position: sticky; top: 5.5rem; }
.rv-original .doc { position: relative; top: auto; height: calc(100vh - 9.5rem); }
.rv-grid { grid-template-columns: minmax(520px, 1.3fr) minmax(410px, .7fr); }
.rv-data .card { margin-bottom: 0; }
.fr.unbestaetigt { box-shadow: inset 2px 0 var(--warning); padding-left: .55rem; }
.ovl {
  width: min(390px, calc(100vw - 2rem));
  background: linear-gradient(155deg, rgba(13,29,49,.98), rgba(5,15,29,.99));
  backdrop-filter: blur(20px); border-color: rgba(105,220,255,.25);
}
.ovl::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 1px;
  background: linear-gradient(transparent, var(--accent-ice), transparent); opacity: .38;
}
.ovl-kicker { margin-bottom: .55rem; }
@media (max-width: 1500px) {
  .kpis { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
  .grid-3 { grid-template-columns: minmax(440px, 1.2fr) minmax(310px, .8fr); }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .app, body.schmal .app { grid-template-columns: 68px minmax(0, 1fr); }
  .sb-brand small, .sb-logo .v, .sb-l, .sb-g, .sb-deck, .sb-c { display: none; }
  .sb-logo b { font-size: .78rem; letter-spacing: .03em; }
  .sb-i { justify-content: center; }
  .sb-collapse { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sb {
    position: sticky; top: 0; z-index: 30; height: auto; padding: .45rem .55rem;
    flex-direction: row; align-items: center; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--border-soft);
  }
  .sb-brand { flex: 0 0 auto; padding: 0 .7rem 0 0; }
  .sb-brand small, .sb-logo .v, .sb-collapse, .sb-g, .sb-deck, .sb-c { display: none; }
  .sb-brand::after { display: none; }
  .sb-logo b { font-size: .78rem; }
  .sb-nav { flex-direction: row; }
  .sb-i { width: auto; min-width: 42px; justify-content: center; }
  .sb-l { display: none; }
  .hd { top: 52px; gap: .75rem; }
  .hd-date { display: none; }
  .hd-greet .sub, .hd-user div { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .rv-original { position: static; }
  .rv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 12px; }
  .hd { padding-inline: 12px; }
  .hd-greet h1 { font-size: var(--step-1); }
  .hd-sys { padding: .4rem .55rem; }
  .hd-tools .hd-tool { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .kpi { min-height: 0; }
  .panel { padding: 16px; }
  .boss-s { grid-template-columns: 18px 1fr auto; }
  .boss-c { display: none; }
  .rv-h { flex-wrap: wrap; }
  .rv-t { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .drop.processing::after { animation: none; top: 50%; }
}

.lock svg { width: 12px; height: 12px; vertical-align: -2px; }
.bank-sync { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem 1.25rem; }
.bank-sync > .ph { grid-column: 1; margin-bottom: 0; }
.bank-sync > .btn { grid-column: 2; grid-row: 1; }
@media (max-width: 620px) {
  .bank-sync { grid-template-columns: 1fr; }
  .bank-sync > .btn { grid-column: 1; grid-row: auto; justify-content: center; }
}

.comp { gap: 0; }
.comp-row {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 34%) 90px;
  min-height: 46px; padding: .55rem 0; border-bottom: 1px solid var(--border-soft);
}
.comp-row:last-child { border-bottom: 0; }
.comp-bar { width: 100%; height: 7px; border: 1px solid rgba(105,220,255,.08); }
.comp-bar > i { background: linear-gradient(90deg, var(--accent-blue), var(--accent-ice)); box-shadow: 0 0 14px rgba(105,220,255,.2); }
@media (max-width: 700px) {
  .comp-row { grid-template-columns: 1fr 70px; }
  .comp-row .comp-bar { grid-column: 1 / -1; grid-row: 2; }
}

.pwa-install { position: relative; }
[data-install-kazu][hidden] { display: none !important; }
.pwa-gate-install { margin-top: 9px !important; }
.pwa-install[data-ready="true"] {
  color: var(--accent-ice); border-color: var(--border-active); background: var(--accent-ice-dim);
}
.pwa-install[data-ready="true"]::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(56,214,160,.5);
}

.pwa-guide {
  position:fixed; z-index:500; inset:0; display:grid; place-items:center; padding:20px;
  background:rgba(4,10,6,.76); backdrop-filter:blur(12px);
}
.pwa-guide-card {
  position:relative; width:min(420px,100%); padding:26px;
  border:1px solid rgba(168,205,126,.24); border-radius:24px;
  background:linear-gradient(155deg,#17261b,#0e1811); box-shadow:0 28px 90px rgba(0,0,0,.48);
  text-align:center;
}
.pwa-guide-card>img { width:92px; height:92px; margin:0 auto 16px; border-radius:23px; box-shadow:0 14px 32px rgba(0,0,0,.34); }
.pwa-guide-card h2 { margin:3px 0 5px; font-size:var(--step-2); }
.pwa-guide-card>.sub { color:var(--text-secondary); }
.pwa-guide-card ol { display:grid; gap:8px; margin:18px 0; padding:0; list-style:none; text-align:left; counter-reset:kazu-pwa; }
.pwa-guide-card li { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border-soft); border-radius:13px; background:var(--bg-inset); counter-increment:kazu-pwa; }
.pwa-guide-card li::before { content:counter(kazu-pwa); display:grid; width:30px; height:30px; place-items:center; border-radius:10px; background:var(--accent-ice-dim); color:var(--accent-ice); font-weight:700; }
.pwa-guide-close { position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--text-muted); font-size:22px; cursor:pointer; }
.pwa-guide-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.pwa-guide-done { width:100%; justify-content:center; }

/* ==========================================================================
   KAZU — ruhiger Tagesmodus, Avatarfarben und appartige Bedienung.
   Die alten Fachansichten verwenden dieselben Tokens und bleiben dadurch
   vollständig nutzbar, ohne den Alltag zu dominieren.
   ========================================================================== */
body {
  background:
    radial-gradient(900px 520px at 75% -12%, rgba(168,205,126,.13), transparent 64%),
    radial-gradient(620px 420px at 4% 28%, rgba(230,189,104,.07), transparent 66%),
    var(--bg-deep);
}
body::before {
  background:
    radial-gradient(720px 440px at 88% 2%, rgba(168,205,126,.1), transparent 68%),
    linear-gradient(180deg, transparent 70%, rgba(7,14,9,.68));
}
.sb {
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(168,205,126,.11)),
    linear-gradient(180deg, #111f16 0%, #0a130d 100%);
}
.sb-avatar {
  width: 38px; height: 38px; border-radius: 13px; object-fit: cover;
  border: 1px solid rgba(168,205,126,.36);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.sb-logo { align-items: center; }
.sb-logo b { color: #eff5e7; letter-spacing: .12em; }
.hd {
  background: rgba(12,21,16,.84);
  border-bottom-color: rgba(205,226,187,.1);
}
.hd-new {
  font-size: 1.4rem; line-height: 1; color: var(--accent-ice);
  background: var(--accent-ice-dim);
}
.hd-kazu { padding: 0; overflow: hidden; }
.hd-kazu img { width: 100%; height: 100%; object-fit: cover; }
.hd-av { object-fit: cover; padding: 0; }
.btn.primary {
  background: linear-gradient(180deg, #789f63, #52784b);
  box-shadow: 0 8px 22px rgba(68,108,61,.23);
}
.wrap { padding-top: 1.2rem; }

.kazu-loading {
  min-height: 50vh; display: grid; place-items: center;
  color: var(--text-muted); font-size: var(--step-0);
}
.kazu-kicker {
  margin: 0 0 .45rem; color: var(--accent-ice);
  font: 650 .64rem/1 var(--font-mono); letter-spacing: .15em;
}
.kazu-hero {
  position: relative; min-height: 370px; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: center; gap: clamp(1rem, 3vw, 3rem); overflow: hidden;
  padding: clamp(1.4rem, 3vw, 3rem); border: 1px solid rgba(168,205,126,.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 76% 30%, rgba(230,189,104,.12), transparent 36%),
    linear-gradient(135deg, rgba(28,47,34,.98), rgba(15,27,19,.98));
  box-shadow: 0 28px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
}
.kazu-hero::before {
  content: ""; position: absolute; inset: auto auto -120px -90px;
  width: 360px; height: 260px; border-radius: 50%;
  background: rgba(168,205,126,.045); filter: blur(6px);
}
.kazu-hero-copy { position: relative; z-index: 2; max-width: 780px; }
.kazu-hero h1 {
  max-width: 650px; margin: 0; font-size: clamp(2.1rem, 4.2vw, 4.6rem);
  line-height: .98; letter-spacing: -.055em;
}
.kazu-hero-text {
  max-width: 610px; margin: 1rem 0 1.5rem; color: var(--text-secondary);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}
.kazu-actions {
  display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: .65rem;
}
.kazu-action {
  min-height: 80px; display: grid; grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto; align-items: center; gap: .08rem .65rem;
  padding: .8rem .9rem; cursor: pointer; text-align: left;
  color: var(--text-primary); border: 1px solid var(--border-soft);
  border-radius: 16px; background: rgba(255,255,255,.035);
  transition: transform var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              background var(--motion-fast) var(--ease);
}
.kazu-action:hover { transform: translateY(-2px); border-color: var(--border-active); background: rgba(168,205,126,.08); }
.kazu-action.primary { background: rgba(168,205,126,.14); border-color: rgba(168,205,126,.34); }
.kazu-action svg { grid-row: 1 / 3; width: 25px; height: 25px; color: var(--accent-ice); }
.kazu-action span { font-weight: 650; font-size: .93rem; }
.kazu-action small { color: var(--text-muted); font-size: .7rem; }
.kazu-visual {
  align-self: stretch; position: relative; min-height: 315px; display: grid;
  place-items: center;
}
.kazu-avatar {
  width: min(100%, 410px); aspect-ratio: 960 / 877; object-fit: contain;
  filter: saturate(.98) contrast(1.01) drop-shadow(0 28px 26px rgba(0,0,0,.28));
  animation: kazu-float 5.4s ease-in-out infinite;
}
@keyframes kazu-float {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-8px) rotate(.35deg); }
}
.kazu-bubble {
  position: absolute; right: 0; bottom: .25rem; max-width: 245px;
  padding: .8rem .95rem; border-radius: 16px 16px 4px 16px;
  color: #1b291b; background: #eff4e7;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.kazu-bubble b, .kazu-bubble span { display: block; }
.kazu-bubble b { margin-bottom: .15rem; }
.kazu-bubble span { color: #53624f; font-size: .76rem; line-height: 1.35; }

.kazu-briefing { margin: 1.1rem 0; }
.kazu-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.kazu-section-head h1, .kazu-section-head h2 { margin: 0; }
.kazu-live {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem;
  border-radius: 99px; border: 1px solid rgba(145,207,136,.24);
  background: var(--success-dim); color: var(--success);
  font: 600 .6rem/1 var(--font-mono); letter-spacing: .08em;
}
.kazu-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.kazu-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
}
.kazu-metric {
  min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: .25rem .8rem; padding: 1rem 1.1rem; border-radius: 18px;
  background: rgba(19,32,25,.88); border: 1px solid var(--border-soft);
}
.kazu-metric-label {
  grid-column: 1 / -1; color: var(--text-muted); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .09em;
}
.kazu-metric-value { font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.kazu-metric-hint { color: var(--text-secondary); font-size: .75rem; text-align: right; }
.kazu-metric.attention { border-color: rgba(230,189,104,.27); }
.kazu-metric.attention .kazu-metric-value { color: var(--warning); }
.kazu-metric.danger { border-color: rgba(255,104,121,.3); }
.kazu-metric.danger .kazu-metric-value { color: var(--danger); }
.kazu-metric.good .kazu-metric-value { color: var(--success); }

.kazu-work-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
  gap: 1rem; align-items: start; margin-bottom: 2rem;
}
.kazu-card {
  padding: 1.15rem; border: 1px solid var(--border-soft); border-radius: 22px;
  background: linear-gradient(145deg, rgba(24,40,30,.94), rgba(16,28,20,.97));
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.kazu-card h2 { font-size: 1.35rem; }
.kazu-side { display: grid; gap: 1rem; }
.kazu-side-copy { margin: .65rem 0 1rem; color: var(--text-secondary); }
.kazu-wide { width: 100%; justify-content: center; }
.kazu-text-button {
  border: 0; background: none; color: var(--accent-ice); cursor: pointer;
  padding: .35rem; font-weight: 650;
}
.kazu-proposal-list, .kazu-history-grid { display: grid; gap: .65rem; }
.kazu-history-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.kazu-proposal {
  width: 100%; padding: .9rem 1rem; border-radius: 16px; cursor: pointer;
  color: var(--text-primary); background: rgba(255,255,255,.026);
  border: 1px solid var(--border-soft); text-align: left;
  transition: border-color var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
}
.kazu-proposal:hover { border-color: var(--border-active); transform: translateX(2px); }
.kazu-proposal-top, .kazu-proposal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
}
.kazu-source {
  display: inline-flex; padding: .25rem .5rem; border-radius: 999px;
  background: var(--accent-ice-dim); color: var(--accent-ice);
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.kazu-source.fumi { background: rgba(238,124,157,.12); color: #f09ab5; }
.kazu-source.sensei { background: rgba(113,174,228,.13); color: #8dc3ef; }
.kazu-proposal-time { color: var(--text-muted); font-size: .69rem; }
.kazu-proposal > b { display: block; margin-top: .65rem; font-size: 1rem; }
.kazu-customer { display: block; color: var(--text-secondary); font-size: .78rem; }
.kazu-proposal p {
  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; margin: .55rem 0 0; color: var(--text-muted);
  font-size: .78rem; line-height: 1.45;
}
.kazu-proposal-foot {
  margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: .69rem;
}
.kazu-proposal-foot span:last-child { color: var(--accent-ice); font-weight: 650; }
.kazu-empty {
  min-height: 210px; display: grid; place-items: center; align-content: center;
  text-align: center; border: 1px dashed var(--border-mid); border-radius: 18px;
}
.kazu-empty-mark, .kazu-success-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  margin-bottom: .6rem; border-radius: 50%; color: var(--success);
  background: var(--success-dim); font-size: 1.35rem;
}
.kazu-empty p { margin: .2rem 0 0; color: var(--text-muted); }
.kazu-connection {
  display: grid; grid-template-columns: 10px auto 1fr; align-items: center;
  gap: .55rem; padding: .6rem 0; border-bottom: 1px solid var(--border-soft);
}
.kazu-connection:last-child { border-bottom: 0; }
.kazu-connection b { font-size: .82rem; }
.kazu-connection span:last-child { color: var(--text-muted); font-size: .7rem; text-align: right; }
.kazu-connect-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.kazu-connect-dot.ready { background: var(--success); box-shadow: 0 0 9px rgba(145,207,136,.45); }
.kazu-history { min-height: 65vh; }
.kazu-empty-page { color: var(--text-muted); padding: 4rem 1rem; text-align: center; }

.kazu-modal-back {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 1rem; background: rgba(5,10,6,.72); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity var(--motion-normal) var(--ease);
}
.kazu-modal-back.open { opacity: 1; }
.kazu-modal {
  width: min(720px, 100%); max-height: min(92vh, 900px); overflow: auto;
  padding: 1.2rem; border-radius: 24px; border: 1px solid rgba(168,205,126,.28);
  background: linear-gradient(150deg, #1b2c20, #101b14);
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  transform: translateY(10px) scale(.985);
  transition: transform var(--motion-normal) var(--ease);
}
.kazu-modal-back.open .kazu-modal { transform: none; }
.kazu-modal-head {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  margin-bottom: 1rem;
}
.kazu-modal-head > div:first-child { flex: 1; min-width: 0; }
.kazu-modal-art {
  width: 88px; height: 76px; object-fit: contain; margin: -.6rem .15rem -.8rem auto;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.22));
}
.kazu-modal-head h2 { font-size: 1.55rem; }
.kazu-close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-soft);
  color: var(--text-secondary); background: rgba(255,255,255,.04); cursor: pointer;
  font-size: 1.3rem;
}
.kazu-modal-intro { margin: -.3rem 0 1rem; color: var(--text-secondary); }
.kazu-field { display: block; margin-bottom: .8rem; }
.kazu-field > span {
  display: block; margin-bottom: .32rem; color: var(--text-secondary);
  font-size: .72rem; font-weight: 650;
}
.kazu-field input, .kazu-field textarea, .kazu-field select {
  width: 100%; padding: .72rem .8rem; border: 1px solid var(--border-mid);
  border-radius: 12px; color: var(--text-primary); background: var(--bg-inset);
  font: inherit;
}
.kazu-field input:focus, .kazu-field textarea:focus, .kazu-field select:focus {
  outline: none; border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(168,205,126,.08);
}
.kazu-positions { display: grid; gap: .55rem; margin: .9rem 0 .6rem; }
.kazu-position {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px 34px;
  align-items: end; gap: .5rem; padding: .65rem; border-radius: 14px;
  background: rgba(255,255,255,.025); border: 1px solid var(--border-soft);
}
.kazu-position .kazu-field { margin: 0; }
.kazu-remove {
  width: 34px; height: 42px; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--text-muted); background: transparent; font-size: 1.2rem;
}
.kazu-remove:hover { color: var(--danger); background: var(--danger-dim); }
.kazu-origin {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .7rem; margin-bottom: 1rem; padding: .75rem; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border-soft);
}
.kazu-origin > span:nth-child(2) { color: var(--text-secondary); font-size: .78rem; }
.kazu-origin-link { color: var(--accent-ice); font-size: .72rem; text-decoration: none; }
.kazu-safety {
  margin: 1rem 0; padding: .75rem .85rem; border-radius: 12px;
  color: var(--text-secondary); background: var(--accent-ice-dim);
  border: 1px solid rgba(168,205,126,.2); font-size: .78rem;
}
.kazu-form-error { min-height: 1.3em; margin: .6rem 0; color: var(--danger); font-size: .8rem; }
.kazu-modal-actions {
  display: flex; justify-content: flex-end; gap: .65rem; margin-top: .7rem;
  padding-top: .9rem; border-top: 1px solid var(--border-soft);
}
.kazu-success {
  min-height: 340px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.kazu-success-art {
  width: min(230px, 65vw); aspect-ratio: 960 / 877; object-fit: contain;
  margin: -1rem 0 -.5rem; filter: drop-shadow(0 18px 20px rgba(0,0,0,.24));
}
.kazu-success h2 { margin: .2rem 0; }
.kazu-success p { max-width: 440px; color: var(--text-secondary); }
.kazu-success .btn { margin-top: 1rem; }

@media (max-width: 1180px) {
  .kazu-hero { grid-template-columns: 1.25fr .75fr; }
  .kazu-actions { grid-template-columns: repeat(2, 1fr); }
  .kazu-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .wrap { padding-top: .8rem; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .sb {
    position: fixed; z-index: 80; top: auto; left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom)); height: 68px;
    padding: 6px; border: 1px solid rgba(205,226,187,.17);
    border-radius: 21px; overflow: hidden;
    background: rgba(14,25,17,.92); backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
  }
  .sb-brand, .sb-g, .sb-deck { display: none; }
  .sb-nav { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; gap: 2px; }
  .sb-i { display: none; }
  .sb-i[data-route="heute"], .sb-i[data-route="entwuerfe"],
  .sb-i[data-route="chat"], .sb-i[data-route="belegkorb"],
  .sb-i[data-route="erweitert"] {
    min-width: 0; display: flex; flex-direction: column; justify-content: center;
    gap: 2px; padding: 5px 2px; border-radius: 15px; font-size: .62rem;
  }
  .sb-i[data-route="erweitert"] .sb-l { font-size: 0; }
  .sb-i[data-route="erweitert"] .sb-l::after { content: "Mehr"; font-size: .62rem; }
  .sb-i .sb-l {
    display: block; width: 100%; overflow: hidden; text-align: center;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .sb-i .nvi { width: 19px; height: 19px; }
  .sb-i .sb-b { position: absolute; top: 3px; right: 9px; }
  .sb-i[aria-current="true"]::before { display: none; }
  .hd { top: 0; padding: .65rem 12px; }
  .hd-sys { display: none; }
  .hd-tools { margin-left: auto; }
  .kazu-hero {
    min-height: 0; grid-template-columns: 1fr; padding: 1.25rem;
    border-radius: 23px;
  }
  .kazu-hero h1 { font-size: clamp(2rem, 9vw, 3.2rem); }
  .kazu-visual { min-height: 260px; order: -1; }
  .kazu-avatar { width: min(74vw, 340px); border-radius: 30px; }
  .kazu-bubble { right: 4%; bottom: 0; }
  .kazu-work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hd-greet h1 { font-size: .95rem; }
  .hd-tools .hd-tool { display: grid; }
  .hd-tools .pwa-install { display: grid; }
  .hd-tool[title="Hilfe und Anleitung"], .hd-tool[title="Einstellungen"] { display: none; }
  .hd-user { padding: .2rem; }
  .hd-user .hd-av { width: 30px; height: 30px; }
  .kazu-hero { padding: .9rem; gap: .35rem; }
  .kazu-hero h1 { font-size: clamp(2rem, 10vw, 2.55rem); }
  .kazu-hero-text { margin: .55rem 0 .8rem; font-size: .9rem; line-height: 1.45; }
  .kazu-visual { min-height: 154px; justify-items: start; }
  .kazu-avatar { width: min(49vw, 184px); border-radius: 23px; }
  .kazu-bubble { right: 0; bottom: 4px; max-width: 168px; padding: .55rem .65rem; font-size: .74rem; }
  .kazu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .kazu-action { min-height: 68px; grid-template-columns: 24px 1fr; padding: .65rem; }
  .kazu-action svg { width: 21px; height: 21px; }
  .kazu-action span { font-size: .82rem; }
  .kazu-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .kazu-metric { grid-template-columns: 1fr; align-items: start; padding: .8rem; }
  .kazu-metric-value { font-size: 1.6rem; }
  .kazu-metric-hint { text-align: left; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kazu-section-head { align-items: center; }
  .kazu-card { padding: .9rem; border-radius: 18px; }
  .kazu-modal-back { padding: 0; place-items: end center; }
  .kazu-modal {
    width: 100%; max-height: 94dvh; border-radius: 24px 24px 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .kazu-position {
    grid-template-columns: minmax(0, 1fr) 72px 34px;
  }
  .kazu-position .wide { grid-column: 1 / -1; }
  .kazu-position .kazu-field:nth-child(3) { grid-column: 1 / 3; }
  .kazu-position .kazu-remove { grid-column: 3; }
  .kazu-origin { grid-template-columns: auto 1fr; }
  .kazu-origin-link { grid-column: 1 / -1; }
  .kazu-modal-actions { position: sticky; bottom: 0; padding: .8rem 0 0; background: #101b14; }
  .kazu-modal-actions .btn { flex: 1; justify-content: center; padding-inline: .7rem; }
  .kazu-modal-art { width: 70px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .kazu-avatar { animation: none; }
}

.kazu-contact-results {
  display: grid; gap: .35rem; margin-top: .35rem;
}
.kazu-contact-option {
  display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center;
  width: 100%; padding: .65rem .75rem; border: 1px solid rgba(192, 218, 176, .16);
  border-radius: 12px; background: rgba(255,255,255,.045); color: var(--ink);
  text-align: left; cursor: pointer;
}
.kazu-contact-option:hover { border-color: var(--lime); background: rgba(176,213,89,.08); }
.kazu-contact-option span { color: var(--muted); font-size: .74rem; }
.kazu-field.is-selected > span::after {
  content: " · ausgewählt"; color: var(--lime); font-weight: 700;
}
.kazu-part-results { display: grid; gap: .32rem; margin-top: .35rem; }
.kazu-part-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem;
  align-items: center; width: 100%; padding: .58rem .68rem;
  border: 1px solid rgba(192, 218, 176, .16); border-radius: 11px;
  background: rgba(255,255,255,.045); color: var(--ink); text-align: left; cursor: pointer;
}
.kazu-part-option:hover { border-color: var(--lime); background: rgba(176,213,89,.08); }
.kazu-part-option > span:first-child { color: var(--lime); font: 600 .68rem var(--mono); }
.kazu-part-option b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kazu-part-price { color: var(--muted); font-size: .75rem; }

/* --- Lieferanten-Stammdaten ------------------------------------------------
   Ein Ort für alles, was ein Lieferant „ist“. Neben jeder Festlegung steht,
   was aus dem Bestand gelernt wurde — man soll sehen, wenn die eigene Angabe
   dem widerspricht, was in SevDesk gebucht ist. */
.fest, .gelernt {
  display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-sm);
  font-size: var(--step--1); white-space: nowrap;
}
.fest {
  background: var(--accent-ice-dim); color: var(--accent-ice);
  border: 1px solid rgba(94,214,255,.3);
}
.gelernt { color: var(--text-secondary); border: 1px dashed var(--border-soft); }
.lf-notiz {
  max-width: 20rem; font-size: var(--step--1); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
tr.weicht-ab td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

.lf-warn {
  padding: .8rem 1rem; margin-bottom: .6rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-mid);
}
.lf-warn.hoch { border-left-color: var(--danger); background: var(--danger-dim); }
.lf-warn.mittel { border-left-color: var(--warning); }
.lf-warn.steuer { border-left-color: var(--violet); }
.lf-warn__h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem;
}
.lf-warn__h b { font-size: var(--step-1); }
.lf-warn__h span { font-size: var(--step--1); color: var(--text-muted); }
.lf-warn p {
  margin: .25rem 0 0; font-size: var(--step-0); color: var(--text-secondary);
  max-width: 84ch;
}

.lf-form { display: flex; flex-direction: column; gap: .9rem; margin: 1rem 0; }
.lf-f { display: block; }
.lf-f__l {
  display: block; margin-bottom: .3rem; font-size: .62rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.lf-f__h {
  display: block; margin-top: .3rem; font-size: var(--step--1);
  color: var(--text-muted);
}
.lf-f select.search, .lf-f textarea.search { margin-bottom: 0; }
.lf-f textarea.search { resize: vertical; line-height: 1.6; }

/* --- Belege im Lieferantendialog ------------------------------------------ */
/* Der Dialogkoerper scrollt, nicht der Dialog: Kopf und Fuss („Speichern")
   bleiben stehen, waehrend man sich die Rechnungen ansieht. */
.dlg-body { overflow: auto; min-height: 0; }
.dlg.lf-dlg { width: min(1140px, 100%); max-height: min(88vh, 900px); }
.dlg-body.zwei {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0 1.4rem; align-items: start;
}
.dlg-body.zwei > .lf-form { margin-top: .4rem; }
.dlg-body.zwei > .lf-b {
  border-top: 0; border-left: 1px solid var(--border-soft);
  padding: .4rem 0 0 1.4rem; margin-top: .4rem;
}
@media (max-width: 900px) {
  .dlg-body.zwei { grid-template-columns: 1fr; }
  .dlg-body.zwei > .lf-b {
    border-left: 0; border-top: 1px solid var(--border-soft);
    padding: .9rem 0 0; margin-top: .4rem;
  }
}

.lf-b { margin-top: .4rem; border-top: 1px solid var(--border-soft); padding-top: .9rem; }
.lf-b__h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.lf-b__h h4 { margin: 0; font-size: var(--step-0); }
.lf-b__saetze { font-size: var(--step--1); color: var(--text-muted); }
.lf-b__leer, .lf-b__fehl {
  margin: .2rem 0; font-size: var(--step--1); color: var(--text-muted);
}
.lf-b__fehl { color: var(--warning); }

.lf-b__i {
  padding: .7rem .8rem; margin-bottom: .5rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.lf-b__z1 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.lf-b__z1 b { font-size: var(--step-0); }
.lf-b__geld { font-family: var(--font-mono); font-size: var(--step-0); }
.lf-b__z2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem;
  margin-top: .3rem; font-size: var(--step--1); color: var(--text-secondary);
}
.lf-b__z2 .kname { display: inline; max-width: none; }
.kchip.warn {
  background: var(--warning-dim); border-color: rgba(245,165,36,.28);
  color: var(--warning);
}

.lf-b__pos { list-style: none; margin: .5rem 0 0; padding: 0; }
.lf-b__pos li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .12rem 0; font-size: var(--step--1);
  color: var(--text-secondary);
}
.lf-b__pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-b__pn { font-family: var(--font-mono); color: var(--text-muted); flex-shrink: 0; }
.lf-b__mehr { color: var(--text-muted); }
.lf-b__txt {
  margin: .45rem 0 0; font-size: var(--step--1); color: var(--text-secondary);
}

.lf-b__a { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.lf-b__pdf { margin-top: .6rem; height: 60vh; min-height: 320px; }
.lf-b__pdf iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); background: #fff; }

/* --- Kontoauswahl ---------------------------------------------------------- */
/* 652 Konten. Ohne Tausenderblöcke und ohne Wechsel im Ton sucht man darin
   von Hand. Die Farbwerte stehen absolut, weil das Aufklappmenü eines
   nativen <select> die Variablen des Dokuments nicht immer erbt. */
.konto-wahl { font-family: var(--font-mono); }
.konto-wahl optgroup {
  font-family: var(--font-ui); font-style: normal; font-weight: 600;
  letter-spacing: .02em;
}
.konto-wahl optgroup.knt-a { background-color: #0d1b2e; color: #9fd8f5; }
.konto-wahl optgroup.knt-b { background-color: #0a1523; color: #cfa8f0; }
.konto-wahl optgroup.knt-a option { background-color: #0b1626; color: #e6eefb; }
.konto-wahl optgroup.knt-b option { background-color: #081120; color: #e6eefb; }
.konto-wahl option { font-family: var(--font-mono); padding: .15rem .2rem; white-space: pre; }
.steuer-wahl optgroup {
  font-family: var(--font-ui); font-style: normal; font-weight: 600;
  background-color: #0d1b2e; color: #9fd8f5;
}
.steuer-wahl option { background-color: #0b1626; color: #e6eefb; }

/* SumUp/PayPal-Autopilot: Zahlen statt Buchhaltungs-Textwand. */
.provider-auto { overflow: hidden; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.provider-status, .provider-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.provider-status { margin:-.15rem 0 1rem; font-size:.76rem; color:var(--text-secondary); }
.provider-live { color:var(--success); font-weight:800; letter-spacing:.02em; }
.provider-rule { padding:.35rem .65rem; border-radius:999px; background:var(--surface-soft); }
.provider-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.provider-metric { min-height:86px; padding:.85rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--border); border-radius:18px; background:var(--surface-soft); }
.provider-metric strong { font-size:1.75rem; letter-spacing:-.05em; }
.provider-metric span { color:var(--text-secondary); font-size:.72rem; line-height:1.25; }
.provider-metric.good strong { color:var(--success); }
.provider-metric.attention strong { color:var(--warning); }
.provider-equation { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:.65rem; padding:1rem; border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface-soft)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); margin:.9rem 0 1rem; }
.provider-equation > div { display:flex; flex-direction:column; min-width:0; }
.provider-equation small { color:var(--text-secondary); font-size:.68rem; }
.provider-equation b { font-size:1.02rem; margin-top:.15rem; }
.provider-equation > span { font-size:1.25rem; color:var(--text-secondary); }
.provider-feedback { color:var(--text-secondary); font-size:.78rem; flex:1; }
.provider-last { margin:.85rem 0 0; color:var(--text-secondary); font-size:.72rem; }
.provider-error { border-color:color-mix(in srgb,var(--danger) 38%,var(--border)); }
@media (max-width: 700px) {
  .provider-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .provider-equation { grid-template-columns:1fr auto 1fr; }
  .provider-equation > div:last-child { grid-column:1 / -1; padding-top:.65rem; border-top:1px solid var(--border); }
  .provider-equation > span:nth-of-type(2) { display:none; }
  .provider-actions .btn { width:100%; justify-content:center; }
}