/*
 * Kuono Webapp · Komponentenbibliothek
 *
 * Ausschliesslich Tokens aus 00-tokens.css. Kein Hex-Wert, keine Grösse und
 * kein Radius, der dort nicht steht. Die Klassen tragen durchgängig das
 * Präfix `ku-`, damit sie sich von den älteren Klassen unterscheiden lassen,
 * solange beide nebeneinander leben.
 */

/* ------------------------------------------------------------------ *
 * Bewegung
 * ------------------------------------------------------------------ */

@keyframes ku-skeleton {
  0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .5; }
}

@keyframes ku-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ *
 * 07 · Buttons — vier Varianten, sechs Zustände
 * ------------------------------------------------------------------ */

/*
 * Die Knopfklassen des Bestands -- `.button`, `.button--primary`,
 * `.button--danger`, `.button--small`, `.icon-button` -- stehen an rund 190
 * Stellen im Bestand und tragen dort noch die gerundete, fette Gestalt aus
 * `07-kuono-redesign.css`.
 *
 * Sie sind unten kein zweiter Knopf, sondern ein zweiter Name fuer denselben:
 * Die Bestandsklassen haengen an den Regeln des Designsystems mit dran. Eine
 * Definition, kein Auseinanderdriften -- und keine 190 Aenderungen im Markup,
 * bei denen jede einzelne ein eigenes Risiko waere. Wandert eine Ansicht auf
 * die `Button`-Komponente um, aendert sich am Aussehen nichts.
 *
 * `:not(.button--primary):not(.button--danger)` haelt die beiden Varianten aus
 * der sekundaeren Gestalt heraus, unabhaengig davon, in welcher Reihenfolge
 * die Regeln hier stehen.
 */
.ku-btn,
.button,
.icon-button {
  /*
   * Zwei Eigenschaften des Bestands muessen ausdruecklich zurueckgenommen
   * werden: der eingelegte Ring (`box-shadow`) und die feste Mindesthoehe.
   * Ohne das behielte ein kleiner Knopf die 44 px des grossen, und um jeden
   * Knopf laege weiterhin die zweite Kante.
   */
  box-shadow: none;
  min-height: 0;
  font: inherit;
  font-family: var(--ku-font);
  font-size: var(--ku-fs-ui);
  line-height: var(--ku-lh-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--ku-r-1);
  border: var(--ku-bw) solid transparent;
  background: transparent;
  color: var(--ku-text);
  cursor: pointer;
  transition: background var(--ku-t-color), border-color var(--ku-t-color), color var(--ku-t-color);
}

.ku-btn:disabled,
.button:disabled,
.icon-button:disabled { cursor: not-allowed; }
.ku-btn[aria-busy='true'],
.button[aria-busy='true'] { cursor: progress; }

/* Primär — genau eine pro sichtbarem Screen. */
.ku-btn--primary,
.button--primary {
  font-weight: 500;
  background: var(--ku-action);
  border-color: var(--ku-action);
  color: var(--ku-bg);
}
.ku-btn--primary:hover:not(:disabled),
.button--primary:hover:not(:disabled) { background: var(--ku-action-hover); border-color: var(--ku-action-hover); }
.ku-btn--primary:active:not(:disabled),
.button--primary:active:not(:disabled) { background: var(--ku-action-active); border-color: var(--ku-action-active); }
.ku-btn--primary:disabled,
.button--primary:disabled { background: var(--ku-accent-soft); border-color: var(--ku-accent-soft); color: var(--ku-text-subtle); }

/* Sekundär — gleichrangige Wege. */
.ku-btn--secondary,
.button:not(.button--primary):not(.button--danger),
.icon-button {
  font-weight: var(--ku-fw-ui);
  background: transparent;
  border-color: var(--ku-border);
  color: var(--ku-text);
}
.ku-btn--secondary:hover:not(:disabled),
.button:not(.button--primary):not(.button--danger):hover:not(:disabled),
.icon-button:hover:not(:disabled) { background: var(--ku-hover-soft); border-color: var(--ku-border-strong); }
.ku-btn--secondary:active:not(:disabled),
.button:not(.button--primary):not(.button--danger):active:not(:disabled) { background: var(--ku-line-soft); border-color: var(--ku-border-strong); }
.ku-btn--secondary:disabled,
.button:not(.button--primary):not(.button--danger):disabled,
.icon-button:disabled { border-color: var(--ku-line); color: var(--ku-text-disabled); }

/* Unauffällig — «Später», «Zurücksetzen». Kein Ladezustand. */
.ku-btn--quiet {
  font-weight: var(--ku-fw-ui);
  padding: 11px 14px;
  background: transparent;
  border-color: transparent;
  color: var(--ku-text-muted);
}
.ku-btn--quiet:hover:not(:disabled) { background: var(--ku-hover-soft); color: var(--ku-text); }
.ku-btn--quiet:active:not(:disabled) { background: var(--ku-line-soft); color: var(--ku-text); }
.ku-btn--quiet:disabled { color: var(--ku-text-disabled); }

/* Gefahr — abgesetzt, nie neben der Primäraktion. */
.ku-btn--danger,
.button--danger {
  font-weight: 500;
  background: var(--ku-bad);
  border-color: var(--ku-bad);
  color: var(--ku-bg);
}
.ku-btn--danger:hover:not(:disabled),
.button--danger:hover:not(:disabled) { background: var(--ku-bad-hover); border-color: var(--ku-bad-hover); }
.ku-btn--danger:active:not(:disabled),
.button--danger:active:not(:disabled) { background: var(--ku-bad-active); border-color: var(--ku-bad-active); }
.ku-btn--danger:disabled,
.button--danger:disabled { background: var(--ku-bad-border); border-color: var(--ku-bad-border); color: var(--ku-text-subtle); }

/* Gefahr als Rahmenvariante, für abgesetzte Nebenwege im Dialog. */
.ku-btn--danger-outline {
  font-weight: var(--ku-fw-ui);
  background: transparent;
  border-color: var(--ku-bad-border);
  color: var(--ku-bad);
}
.ku-btn--danger-outline:hover:not(:disabled) { background: var(--ku-bad-bg); border-color: var(--ku-bad); }
.ku-btn--danger-outline:disabled { border-color: var(--ku-line); color: var(--ku-text-disabled); }

/* Grössen. Gross nur für die Primäraktion einer Erfassung, klein nur in
   Zeilen und Toolbars. */
.ku-btn--lg { font-size: 15px; padding: 14px 24px; }
.ku-btn--sm,
.button--small { font-size: 13px; padding: 8px 14px; }
.ku-btn--block { width: 100%; }

/* Symbolknopf. Trägt immer aria-label, das svg immer aria-hidden. */
.ku-btn--icon,
.icon-button { width: var(--ku-h-btn); height: var(--ku-h-btn); padding: 0; }
.ku-btn--icon.ku-btn--sm { width: var(--ku-h-btn-sm); height: var(--ku-h-btn-sm); }
.ku-btn--icon.ku-btn--lg { width: var(--ku-h-btn-lg); height: var(--ku-h-btn-lg); }
.ku-btn--bare { border-color: transparent; color: var(--ku-text-muted); }
.ku-btn--bare:hover:not(:disabled) { background: var(--ku-bg); border-color: var(--ku-border); color: var(--ku-text); }

.ku-btn__spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border: 2px solid var(--ku-line);
  border-top-color: var(--ku-accent);
  border-radius: var(--ku-r-full);
  animation: ku-spin 700ms linear infinite;
}
/* Auf gefüllten Knöpfen nimmt der Kreis die Textfarbe. Eine feste weisse
   Spur wäre im dunklen Design unsichtbar, weil die Fläche dort hell ist. */
.ku-btn--primary .ku-btn__spinner,
.ku-btn--danger .ku-btn__spinner {
  border-color: currentColor;
  border-top-color: transparent;
}

/* Umschaltgruppe. */
.ku-toggle-group {
  display: inline-flex;
  /*
   * In einem Raster streckt sich auch ein Element mit `inline-flex` auf die
   * ganze Spalte. In der Katalogspalte hiess das: ein Knopf, daneben ein
   * leeres Feld im selben Rahmen, das nach einem zweiten, namenlosen Katalog
   * aussah. Die Gruppe ist so breit wie ihre Knoepfe.
   */
  justify-self: start;
  align-self: start;
  border: var(--ku-bw) solid var(--ku-border);
  border-radius: var(--ku-r-1);
  overflow: hidden;
}
.ku-toggle-group > button {
  font: inherit;
  font-family: var(--ku-font);
  font-size: 13px;
  font-weight: var(--ku-fw-ui);
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--ku-text-muted);
  cursor: pointer;
  transition: background var(--ku-t-color), color var(--ku-t-color);
}
.ku-toggle-group > button + button { border-left: var(--ku-bw) solid var(--ku-line); }
.ku-toggle-group > button:hover:not([aria-pressed='true']) { background: var(--ku-hover-soft); color: var(--ku-text); }
.ku-toggle-group > button[aria-pressed='true'] {
  font-weight: 500;
  background: var(--ku-action);
  color: var(--ku-bg);
  border-left-color: var(--ku-action);
}

/* ------------------------------------------------------------------ *
 * 08 · Felder — Label oben, Fehlerplatz dauerhaft reserviert
 * ------------------------------------------------------------------ */

.ku-field { display: block; }

.ku-field__label {
  display: block;
  font-size: var(--ku-fs-label);
  line-height: var(--ku-lh-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ku-text-muted);
  margin-bottom: 8px;
}
.ku-field--disabled .ku-field__label { color: var(--ku-text-disabled); }

.ku-field__label--pflicht::after {
  content: '*';
  margin-left: 3px;
  color: var(--ku-text-subtle);
}

/* Der Platz für Hilfe- oder Fehlertext steht immer, auch wenn er leer ist.
   Sonst springt das Layout, sobald ein Pflichtfeldfehler erscheint. */
.ku-field__note {
  min-height: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
  margin-top: 6px;
}
.ku-field__note svg { flex: none; }

.ku-input,
.ku-select,
.ku-textarea,
.input,
.textarea {
  font: inherit;
  font-family: var(--ku-font);
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-body);
  width: 100%;
  padding: 0 12px;
  border: var(--ku-bw) solid var(--ku-border);
  border-radius: var(--ku-r-1);
  background: var(--ku-bg);
  color: var(--ku-text);
  transition: border-color var(--ku-t-color), background var(--ku-t-color);
}
.ku-input,
.ku-select, input.input, select.input { height: var(--ku-h-field); min-height: var(--ku-h-field); }
.ku-textarea, .textarea, textarea.input { min-height: 92px; padding: 10px 12px; resize: vertical; line-height: var(--ku-lh-body); }
input.input--compact, select.input--compact { width: auto; min-width: 84px; height: 34px; min-height: 34px; padding: 0 8px; font-size: var(--ku-fs-meta); }
:where(.ku-input, .ku-textarea, .input, .textarea)::placeholder { color: var(--ku-text-subtle); }

.ku-input:hover:not(:disabled),
.ku-select:hover:not(:disabled),
.ku-textarea:hover:not(:disabled),
.input:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: var(--ku-border-strong); }

.ku-input:focus,
.ku-select:focus,
.ku-textarea:focus, .input:focus, .textarea:focus { border-color: var(--ku-accent); box-shadow: none; }

.ku-input[aria-invalid='true'],
.ku-select[aria-invalid='true'],
.ku-textarea[aria-invalid='true'],
.input--invalid, .input--invalid:focus, .input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--ku-bad); background: var(--ku-bad-bg); }

.ku-input:disabled,
.ku-select:disabled,
.ku-textarea:disabled, .input:disabled, .textarea:disabled {
  border-color: var(--ku-line);
  background: var(--ku-bg-subtle);
  color: var(--ku-text-subtle);
  cursor: not-allowed;
}

/* Auswahl mit eigenem Chevron. */
.ku-select-wrap { position: relative; }
.ku-select { padding-right: 38px; appearance: none; }
.ku-select-wrap__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ku-accent);
  display: flex;
}

/* Betragsfeld: Währungspräfix als Block, Betrag rechtsbündig. */
.ku-amount {
  display: flex;
  align-items: center;
  height: var(--ku-h-field);
  border: var(--ku-bw) solid var(--ku-border);
  border-radius: var(--ku-r-1);
  overflow: hidden;
  background: var(--ku-bg);
  transition: border-color var(--ku-t-color);
}
.ku-amount:hover { border-color: var(--ku-border-strong); }
.ku-amount:focus-within { border-color: var(--ku-accent); }
.ku-amount--invalid { border-color: var(--ku-bad); }
.ku-amount--invalid .ku-amount__input { background: var(--ku-bad-bg); }
.ku-amount__prefix {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: var(--ku-fw-body);
  color: var(--ku-text-muted);
  background: var(--ku-bg-subtle);
  border-right: var(--ku-bw) solid var(--ku-line);
}
.ku-amount__input {
  font: inherit;
  font-family: var(--ku-font);
  font-size: var(--ku-fs-cell);
  font-weight: var(--ku-fw-cell);
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: none;
  outline-offset: -2px;
  text-align: right;
  background: var(--ku-bg);
  color: var(--ku-text);
}
.ku-amount__input:disabled { background: var(--ku-bg-subtle); color: var(--ku-text-subtle); }

/* Feld mit angehängtem Knopf (Datum) und Feld mit führendem Symbol (Suche). */
.ku-input-group {
  display: flex;
  align-items: center;
  height: var(--ku-h-field);
  border: var(--ku-bw) solid var(--ku-border);
  border-radius: var(--ku-r-1);
  background: var(--ku-bg);
  transition: border-color var(--ku-t-color);
}
.ku-input-group:hover { border-color: var(--ku-border-strong); }
/*
 * Der Fokusring gehoert um das Feld, nicht um das Eingabeelement darin.
 *
 * Das Eingabeelement hat keinen eigenen Rahmen; sein Ring lag deshalb als
 * schwarzer Kasten quer ueber dem Rahmen der Gruppe -- am staerksten in der
 * Strg+K-Suche, die sich beim Oeffnen selbst den Fokus nimmt. Der Ring liegt
 * jetzt aussen um die Gruppe, dort, wo das Feld fuer das Auge aufhoert.
 */
.ku-input-group:focus-within {
  border-color: var(--ku-accent);
  outline: var(--ku-focus);
  outline-offset: var(--ku-focus-offset);
  border-radius: 0;
}
.ku-input-group__input:focus-visible { outline: none; }
.ku-input-group__icon { display: flex; padding-left: 12px; color: var(--ku-text-muted); }
.ku-input-group__input {
  font: inherit;
  font-family: var(--ku-font);
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-body);
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: none;
  outline-offset: -2px;
  background: transparent;
  color: var(--ku-text);
}
.ku-input-group__button {
  font: inherit;
  width: 42px;
  height: 100%;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-left: var(--ku-bw) solid var(--ku-line);
  color: var(--ku-accent);
  cursor: pointer;
}
.ku-input-group__button:hover { background: var(--ku-hover-soft); }

/* Auswahl, Schalter. */
.ku-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-body);
  cursor: pointer;
}
.ku-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ku-action); }
.ku-check--disabled { color: var(--ku-text-disabled); cursor: not-allowed; }
.ku-check__hint { font-size: var(--ku-fs-meta); color: var(--ku-text-subtle); }
.ku-check--disabled .ku-check__hint { color: inherit; }

.ku-switch {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  flex: none;
  padding: 3px;
  border: none;
  border-radius: var(--ku-r-full);
  background: var(--ku-accent-soft);
  cursor: pointer;
  transition: background var(--ku-t-color);
}
.ku-switch[aria-checked='true'],
.ku-switch[data-checked='true'] { background: var(--ku-action); }
.ku-switch__knob {
  width: 18px;
  height: 18px;
  border-radius: var(--ku-r-full);
  background: var(--ku-bg);
  transition: margin var(--ku-t-color);
}
.ku-switch[aria-checked='true'] .ku-switch__knob,
.ku-switch[data-checked='true'] .ku-switch__knob { margin-left: auto; }
.ku-switch:disabled { cursor: not-allowed; opacity: .6; }

.ku-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-body);
}

/* Formularlayout: Erklärung links (200 px), Felder rechts, zwei pro Zeile. */
.ku-form-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--ku-sp-4);
  padding-bottom: 20px;
  border-bottom: var(--ku-bw) solid var(--ku-line-soft);
}
/*
 * Ein Abschnitt, der auf einen anderen folgt, braucht Luft zur Linie darueber.
 *
 * Die Abschnitte trugen nur unten Polsterung und eine Kante. Der naechste
 * begann deshalb unmittelbar an dieser Kante -- «Ergebnis» klebte an der
 * Trennlinie des Abschnitts darueber. Der erste Abschnitt bleibt ohne, sonst
 * ruckte der Seitenanfang nach unten.
 */
.ku-form-section + .ku-form-section { padding-top: 20px; }
.ku-form-section__title { margin: 0; font-size: 15px; line-height: var(--ku-lh-row); font-weight: 500; }
.ku-form-section__lead {
  margin: 4px 0 0;
  font-size: var(--ku-fs-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
}
/*
 * Dasselbe Feldraster gilt ausserhalb eines Abschnitts, etwa im Seitenblatt.
 * Der zweite Selektor traegt deshalb einen eigenen Namen und keine
 * BEM-Kindschaft: Wer ihn benutzt, hat keinen Abschnittskopf daneben.
 */
.ku-form-section__fields,
.ku-feldraster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ku-sp-3); align-items: start; }
.ku-form-section__fields > .ku-field--wide,
.ku-feldraster > .ku-field--wide { grid-column: span 2; }

/* Selten Benötigtes. Enthält der Bereich Werte, öffnet er automatisch. */
.ku-disclosure__summary {
  font: inherit;
  font-family: var(--ku-font);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-ui);
  padding: 14px 0;
  background: transparent;
  border: none;
  border-top: var(--ku-bw) solid var(--ku-line);
  border-bottom: var(--ku-bw) solid var(--ku-line);
  color: var(--ku-text);
  cursor: pointer;
}
.ku-disclosure__summary svg { transition: transform var(--ku-t-expand); }
.ku-disclosure__summary[aria-expanded='true'] svg { transform: rotate(180deg); }
.ku-disclosure__count { margin-left: auto; font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
.ku-disclosure__body { padding: 20px 0 0; }

/* Wizardschritte: höchstens fünf, erledigt / aktiv / offen. */
.ku-wizard { display: flex; align-items: center; }
.ku-wizard__step { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.ku-wizard__step:first-child { padding-left: 0; }
.ku-wizard__step:last-child { padding-right: 0; }
.ku-wizard__line { flex: 1; height: 1px; background: var(--ku-line); }
.ku-wizard__line--done { background: var(--ku-edge); }
.ku-wizard__marker {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--ku-r-full);
  font-size: var(--ku-fs-meta);
  border: var(--ku-bw) solid var(--ku-border);
  color: var(--ku-text-subtle);
}
.ku-wizard__step--done .ku-wizard__marker { background: var(--ku-action); border-color: var(--ku-action); color: var(--ku-bg); }
.ku-wizard__step--current .ku-wizard__marker { border: 2px solid var(--ku-edge); color: var(--ku-text); font-weight: 500; }
.ku-wizard__label { font-size: 13px; font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
.ku-wizard__step--done .ku-wizard__label { font-weight: var(--ku-fw-ui); color: var(--ku-text); }
.ku-wizard__step--current .ku-wizard__label { font-weight: 500; color: var(--ku-text); }

/* ------------------------------------------------------------------ *
 * 09 · Tabelle, Filter, Sammelaktionen, Paginierung
 * ------------------------------------------------------------------ */

.ku-table { width: 100%; border-collapse: collapse; font-size: var(--ku-fs-ui); }

.ku-table th {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: var(--ku-bw) solid var(--ku-edge);
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: var(--ku-ls-label);
  text-transform: uppercase;
  color: var(--ku-text-subtle);
  white-space: nowrap;
}
.ku-table th:first-child,
.ku-table td:first-child { padding-left: 12px; }
.ku-table th:last-child,
.ku-table td:last-child { padding-right: 12px; }

.ku-table__sort {
  font: inherit;
  font-family: var(--ku-font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ku-table th[aria-sort] { font-weight: 500; color: var(--ku-text); }

.ku-table td {
  padding: var(--ku-table-cell-y) var(--ku-table-cell-x) var(--ku-table-cell-y) 0;
  border-bottom: var(--ku-bw) solid var(--ku-line);
  font-weight: var(--ku-fw-body);
  vertical-align: top;
}
.ku-table tbody tr:last-child td { border-bottom: none; }
.ku-table tbody tr:hover td { background: var(--ku-hover-soft); }
.ku-table tbody tr[aria-selected='true'] td { background: var(--ku-selected); }

/* Zebra erst ab 25 Zeilen — darunter tragen die Zeilenlinien die Ordnung. */
.ku-table--zebra tbody tr:nth-child(even) td { background: var(--ku-bg-subtle); }
.ku-table--zebra tbody tr:nth-child(even):hover td { background: var(--ku-hover-soft); }

.ku-table__num { text-align: right; font-size: var(--ku-fs-cell); font-weight: var(--ku-fw-cell); white-space: nowrap; }
.ku-table__id { font-weight: var(--ku-fw-ui); white-space: nowrap; }
/*
 * Die zweite Zeile einer Zelle steht unter der ersten, nicht daneben.
 *
 * Ohne `display: block` hing es am Element: Der `DataTable` setzt ein `div`
 * und bekam den Umbruch geschenkt, der Mahnlauf ein `span` -- dort klebten
 * Nummer und Betreff aneinander («RE-2023-1036Kuechensanierung Uster»), und
 * ebenso Datum und Verzug («12.01.2024970 Tage»). Eine Klasse muss dasselbe
 * tun, egal an welchem Element sie haengt.
 */
.ku-table__sub {
  display: block;
  font-size: var(--ku-fs-meta);
  color: var(--ku-text-subtle);
}
.ku-table__muted { color: var(--ku-text-muted); }
.ku-table__late { color: var(--ku-bad); }
.ku-table__check { width: 44px; }
.ku-table__check input { width: 17px; height: 17px; accent-color: var(--ku-action); }
.ku-table__menu-cell { width: 52px; text-align: right; }

.ku-table tfoot td {
  padding: 14px 14px 14px 0;
  border-top: var(--ku-bw) solid var(--ku-edge);
  border-bottom: none;
  font-size: 13px;
  font-weight: var(--ku-fw-ui);
  background: none;
}
.ku-table tfoot .ku-table__num { font-size: 17px; font-weight: var(--ku-fw-ui); }

.ku-table-wrap { overflow-x: auto; }

/*
 * Die Kante unter der Filterleiste ist die Oberkante der Tabelle.
 *
 * Beides sass im Raster der Seite und bekam dessen Abstand dazwischen: Die
 * Linie stand oben, die Kopfzeile 24 px darunter, und dazwischen ein weisser
 * Streifen, der die beiden auseinanderriss. Die Kopfzeile gehoert an die
 * Linie, also wird der Abstand genau an dieser Naht wieder herausgerechnet --
 * und nur dort, damit das Raster der uebrigen Seite unberuehrt bleibt.
 */
.ku-filterbar + .ku-table-wrap,
.ku-filterbar + .ku-table,
.ku-filterbar + .ku-liste__stand + .ku-table-wrap { margin-top: calc(-1 * var(--ku-sp-4)); }
/* Der Leerzustand bringt seine eigene Oberkante mit; zwei waeren eine zu viel. */
.ku-filterbar + .ku-emptystate { margin-top: calc(-1 * var(--ku-sp-4)); border-top: none; }

/* Filterleiste. Der Trefferstand steht als Satz darüber, nicht in einer Fläche. */
.ku-filterbar {
  display: flex;
  align-items: flex-end;
  gap: var(--ku-sp-3);
  padding-bottom: 18px;
  border-bottom: var(--ku-bw) solid var(--ku-edge);
  flex-wrap: wrap;
}
/*
 * Die Suche ueber der Tabelle. Eine Breite fuer die ganze App.
 *
 * Sie war schmaler als das, was drinsteht: «Nummer, Kunde, Projekt oder
 * Betreff» stand schon als Platzhalter am Rand an. Wer eine Projektnummer
 * eingibt, soll sie auch ganz sehen.
 */
.ku-filterbar__search { flex: 1 1 var(--ku-suche-w); min-width: 240px; max-width: var(--ku-suche-w); }
.ku-filterbar__select { width: 180px; }
.ku-filterbar__count {
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  padding: 1px 7px;
  border-radius: var(--ku-r-1);
  background: var(--ku-action);
  color: var(--ku-bg);
}
.ku-filterbar .ku-btn { height: var(--ku-h-field); }

/* Sammelaktionsleiste. Gefahraktion rechts abgesetzt. */
.ku-bulkbar {
  display: flex;
  align-items: center;
  gap: var(--ku-sp-3);
  padding: 12px;
  border-bottom: var(--ku-bw) solid var(--ku-line);
  background: var(--ku-bg-subtle);
  flex-wrap: wrap;
}
.ku-bulkbar__count { font-size: 13px; font-weight: 500; }
.ku-bulkbar__sum { font-size: 13px; font-weight: var(--ku-fw-body); color: var(--ku-text-muted); }
.ku-bulkbar__divider { width: 1px; height: 16px; background: var(--ku-accent-soft); }
.ku-bulkbar__spacer { flex: 1; }

/* Paginierung. 15, 50, 100 Zeilen; Standard 15. Kein unendliches Nachladen. */
.ku-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  padding: 18px 12px 0;
  flex-wrap: wrap;
}
.ku-pagination__meta {
  display: flex;
  align-items: center;
  gap: var(--ku-sp-3);
  font-size: 13px;
  font-weight: var(--ku-fw-body);
  color: var(--ku-text-muted);
}
.ku-pagination__pages { display: flex; align-items: center; gap: 6px; }
.ku-pagination__page {
  font: inherit;
  font-family: var(--ku-font);
  /*
   * Quadratisch, solange die Zahl hineinpasst -- und breiter, sobald nicht.
   * Mit fester Breite lief die Zahl ab der dritten Stelle aus dem Knopf
   * heraus; bei 246 Seiten stand sie halb daneben.
   */
  min-width: var(--ku-h-btn-sm);
  height: var(--ku-h-btn-sm);
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--ku-r-1);
  background: transparent;
  border: var(--ku-bw) solid var(--ku-border);
  color: var(--ku-text);
  cursor: pointer;
}
.ku-pagination__page:hover { background: var(--ku-hover-soft); }
.ku-pagination__page[aria-current='page'] { background: var(--ku-action); border-color: var(--ku-action); color: var(--ku-bg); }
.ku-pagination__gap { padding: 0 4px; color: var(--ku-text-subtle); }

/* Zeilenmenü. Enthält nur Aktionen, die auch im Detail erreichbar sind. */
.ku-menu {
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  min-width: 268px;
  background: var(--ku-bg);
  border: var(--ku-bw) solid var(--ku-border);
  border-radius: var(--ku-r-1);
  box-shadow: var(--ku-shadow-menu);
  padding: 6px 0;
}
.ku-menu__item {
  font: inherit;
  font-family: var(--ku-font);
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-body);
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--ku-text);
  cursor: pointer;
}
.ku-menu__item:hover:not(:disabled), .ku-menu__item:focus-visible { background: var(--ku-hover-soft); }
.ku-menu__item:disabled { color: var(--ku-text-disabled); cursor: not-allowed; }
.ku-menu__item--danger { color: var(--ku-bad); }
.ku-menu__separator { height: 1px; background: var(--ku-line); margin: 6px 0; }
/* Der Kopf nennt, worauf die Eintraege wirken. Er ist kein Eintrag. */
.ku-menu__kopf {
  padding: 8px 12px;
  border-bottom: var(--ku-bw) solid var(--ku-line);
  margin-bottom: 4px;
  font-size: var(--ku-fs-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
  max-width: 280px;
}

/* ------------------------------------------------------------------ *
 * 10 · Seitenkopf, Reiter, Kennzahlenband
 * ------------------------------------------------------------------ */

/*
 * Der Seitenkopf sitzt enger als zuvor: Der Bereichsname, der Titel und der
 * erklaerende Satz gehoeren zusammen, und darunter folgen unmittelbar die
 * Reiter. Vorher standen 24 px darueber und 18 px darunter, dazu der eigene
 * Abstand der Reiterzeile — zusammen fast 60 px, in denen nichts stand.
 */
.ku-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ku-sp-4);
  padding: var(--ku-sp-2) 0;
  flex-wrap: wrap;
}
/*
 * Der Kopf bringt seinen Abstand nach unten selbst mit: die 14 px unter der
 * Reiterzeile, sonst die 10 px unter dem Titelblock. Steht er in einem
 * Seitenraster, kaeme dessen Zeilenabstand noch einmal dazu -- der Block
 * zieht ihn deshalb wieder ab. Ohne Raster ist die Variable nicht gesetzt und
 * es wird nichts abgezogen. So endet der Kopf ueberall auf derselben Hoehe,
 * gleich ob die Seite ein Raster benutzt oder nicht.
 */
.ku-pagehead-block { display: block; margin-bottom: calc(-1 * var(--ku-seiten-gap, 0px)); }

/*
 * Der Kopf ist auf jeder Seite gleich hoch. Sonst haengt die Hoehe daran, ob
 * der erklaerende Satz keine, eine oder zwei Zeilen braucht -- und die
 * Reiterzeile darunter sprang beim Seitenwechsel um bis zu 38 px.
 *
 * Reserviert sind: Versalzeile (16) mit ihrem Abstand (4), Titel (28) und
 * zwei Zeilen Satz (2 + 2 x 17). Eine Seite ohne Satz haelt die Luecke frei;
 * das ist der Preis dafuer, dass die Reiter stehen bleiben. Der Satz wird
 * nicht abgeschnitten: Braucht er in einem schmalen Fenster eine dritte
 * Zeile, waechst der Kopf mit, statt Text zu verschlucken.
 */
.ku-pagehead__text { min-height: 84px; }
/* Die Reiter der Unterbereiche, direkt unter dem Titel. */
.ku-pagehead__reiter { padding-bottom: var(--ku-sp-3); }
.ku-pagehead__eyebrow {
  font-size: var(--ku-fs-label);
  line-height: var(--ku-lh-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ku-text-subtle);
  margin-bottom: 4px;
}
.ku-pagehead__title {
  margin: 0;
  font-size: var(--ku-fs-page);
  line-height: var(--ku-lh-page);
  font-weight: var(--ku-fw-page);
  letter-spacing: var(--ku-ls-page);
}
.ku-pagehead__title--sect {
  font-size: var(--ku-fs-sect);
  line-height: var(--ku-lh-sect);
  font-weight: var(--ku-fw-sect);
  letter-spacing: var(--ku-ls-sect);
}
.ku-pagehead__lead {
  margin: 2px 0 0;
  font-size: 13px;
  /* Feste Zeilenhoehe, weil die Hoehe des Kopfes daraus gerechnet ist. */
  line-height: 17px;
  font-weight: var(--ku-fw-body);
  color: var(--ku-text-subtle);
  max-width: var(--ku-read-w);
}
.ku-pagehead__actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
/*
 * Ein Feld in der Aktionszone kommt ohne den reservierten Platz fuer
 * Fehlertext aus -- dort wird nichts gespeichert und nichts geprueft. Mit ihm
 * ist das Feld 92 px hoch, der Titelblock nur 84; die Zeile richtet an der
 * Unterkante aus und schob den Titel um die Differenz nach unten. Genau
 * darum lag der Kopf der Auswertung 8 px tiefer als der jeder anderen Seite.
 */
.ku-pagehead__actions .ku-field__note { display: none; }
.ku-pagehead__actions .ku-field__label { margin-bottom: 4px; }

/*
 * Kopf eines Abschnitts im Inhalt: Titel links, Stand rechts -- «CHF · Januar
 * bis September», «184.00 h · vier Personen».
 */
.ku-blockkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  flex-wrap: wrap;
}
.ku-blockmeta {
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
}

/* Reiter im Inhalt, aktiv über inset-Schatten statt Rahmen. */
.ku-subtabs {
  display: flex;
  align-items: stretch;
  gap: 26px;
  border-bottom: var(--ku-bw) solid var(--ku-line);
  overflow-x: auto;
}
.ku-subtabs__tab {
  font: inherit;
  font-family: var(--ku-font);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 2px 12px;
  font-size: 15px;
  font-weight: var(--ku-fw-body);
  color: var(--ku-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.ku-subtabs__tab:hover { color: var(--ku-text); }
.ku-subtabs__tab[aria-current='page'] {
  font-weight: 500;
  color: var(--ku-text);
  box-shadow: inset 0 -2px 0 var(--ku-edge);
}
.ku-subtabs__badge { font-weight: var(--ku-fw-body); color: var(--ku-text-subtle); }
.ku-subtabs__badge--bad { color: var(--ku-bad); }
.ku-subtabs__badge--warn { color: var(--ku-warn-text); }
.ku-subtabs__tab--empty { color: var(--ku-text-disabled); }

/* Kennzahlenband: 3 bis 5 Spalten, Oberkante 1 px, Trennlinien dazwischen. */
.ku-metricband {
  display: grid;
  border-top: var(--ku-bw) solid var(--ku-edge);
}
.ku-metricband--3 { grid-template-columns: repeat(3, 1fr); }
.ku-metricband--4 { grid-template-columns: repeat(4, 1fr); }
.ku-metricband--5 { grid-template-columns: repeat(5, 1fr); }
.ku-metric {
  font: inherit;
  font-family: var(--ku-font);
  text-align: left;
  padding: 22px 28px;
  background: none;
  border: none;
  border-right: var(--ku-bw) solid var(--ku-line);
  color: inherit;
}
/* Die Aussenkanten des Bandes tragen keine Polsterung: Die erste Kennzahl
   beginnt am Seitenrand, die letzte endet dort. */
.ku-metric:first-child { padding-left: 0; }
.ku-metric:last-child { padding-right: 0; border-right: none; }
.ku-metric--clickable { cursor: pointer; }
.ku-metric--clickable:hover { background: var(--ku-hover-soft); }
/* Der gesetzte Filter: eine ruhige Flaeche, kein zweiter Farbton. */
.ku-metric--aktiv { background: var(--ku-selected); }
/* Die Statuskante liegt oben und als inset-Schatten, damit sie die 1-px-Kante
   des Bandes überdeckt statt die Spaltenbreite zu verändern. */
.ku-metric--ok { box-shadow: inset 0 var(--ku-bw-status) 0 var(--ku-ok); }
.ku-metric--warn { box-shadow: inset 0 var(--ku-bw-status) 0 var(--ku-warn); }
.ku-metric--bad { box-shadow: inset 0 var(--ku-bw-status) 0 var(--ku-bad); }
.ku-metric__label {
  display: block;
  margin-bottom: var(--ku-sp-3);
  font-size: var(--ku-fs-label);
  line-height: var(--ku-lh-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: var(--ku-ls-label);
  text-transform: uppercase;
  color: var(--ku-text-subtle);
}
.ku-metric--ok .ku-metric__label { color: var(--ku-ok); }
.ku-metric--warn .ku-metric__label { color: var(--ku-warn-text); }
.ku-metric--bad .ku-metric__label { color: var(--ku-bad); }
.ku-metric__value {
  display: block;
  font-size: var(--ku-fs-metric);
  line-height: 1;
  font-weight: var(--ku-fw-metric);
  letter-spacing: var(--ku-ls-metric);
}
/* Ein farbiger Wert braucht mehr Fleisch, sonst bricht er auf hellem Grund weg. */
.ku-metric--ok .ku-metric__value { font-weight: 300; color: var(--ku-ok); }
.ku-metric--warn .ku-metric__value { font-weight: 300; color: var(--ku-warn-text); }
.ku-metric--bad .ku-metric__value { font-weight: 300; color: var(--ku-bad); }
.ku-metric__hint { display: block; margin-top: 10px; font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }

/* Aufgabenzeile: Raster 20 / 1fr / 150 / 190. */
.ku-taskrow {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 150px 190px;
  align-items: center;
  gap: var(--ku-sp-3);
  padding: 14px 0;
  border-bottom: var(--ku-bw) solid var(--ku-line);
  text-align: left;
}
.ku-taskrow__title { font-size: var(--ku-fs-ui); font-weight: var(--ku-fw-ui); }
.ku-taskrow__reason { font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
.ku-taskrow__amount { text-align: right; font-size: var(--ku-fs-cell); font-weight: var(--ku-fw-cell); }
.ku-taskrow__action { display: flex; justify-content: flex-end; }

/* Einklappspur: Spalte auf 44 px, senkrechte Beschriftung bleibt. */
.ku-rail { width: var(--ku-rail-w); border-right: var(--ku-bw) solid var(--ku-line); display: flex; flex-direction: column; align-items: center; }
.ku-rail__toggle {
  font: inherit;
  font-family: var(--ku-font);
  width: var(--ku-rail-w);
  height: var(--ku-h-btn);
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--ku-text-muted);
  cursor: pointer;
}
.ku-rail__toggle:hover { background: var(--ku-hover-soft); color: var(--ku-text); }
.ku-rail__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: var(--ku-sp-2);
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: var(--ku-ls-label);
  text-transform: uppercase;
  color: var(--ku-text-subtle);
}

/* ------------------------------------------------------------------ *
 * 11 · Dialog, Seitenpanel, Karte
 * ------------------------------------------------------------------ */

.ku-scrim {
  position: fixed;
  inset: 0;
  background: var(--ku-scrim);
  display: grid;
  place-items: center;
  padding: var(--ku-sp-4);
  z-index: 900;
}
.ku-scrim--right { place-items: stretch end; padding: 0; }

/*
 * 800 px als kleinste Dialogbreite, so im Chat festgelegt. Der Entwurf nennt
 * in Abschnitt 11 zwar 480 px fuer den Bestaetigungsdialog -- die Absprache
 * geht vor, und die schmale Fassung liess in jedem Dialog mit mehr als einem
 * Satz die Zeilen umbrechen, wo nichts umbrechen musste.
 */
.ku-dialog {
  width: 800px;
  max-width: 100%;
  max-height: calc(100dvh - 2 * var(--ku-sp-4));
  overflow: auto;
  background: var(--ku-bg);
  border: var(--ku-bw) solid var(--ku-border);
  border-radius: var(--ku-r-0);
  box-shadow: var(--ku-shadow-dialog);
}
/* Kurzes Formular, etwas breiter als der Grundfall. */
.ku-dialog--wide { width: 900px; }
/*
 * Tabellenbreite. Eine Tabelle mit Bezeichnung, Berechnung, Anteil, Betrag und
 * Frist braucht ihre Spalten nebeneinander; in 480 px legten sich die
 * Beschriftungen übereinander und die rechte Spalte lag ausserhalb.
 */
.ku-dialog--tabelle { width: 1240px; }
.ku-dialog__head { padding: var(--ku-sp-4) var(--ku-sp-4) 0; }
.ku-dialog__title { margin: 0 0 8px; font-size: 20px; font-weight: var(--ku-fw-sect); letter-spacing: var(--ku-ls-sect); }
.ku-dialog__text { margin: 0; font-size: var(--ku-fs-ui); font-weight: var(--ku-fw-body); color: var(--ku-text-body); }
/*
 * Meldungen im Dialog stehen nicht Kante an Kante mit dem, was sie
 * kommentieren. Ohne diesen Abstand klebte im Teilrechnungsdialog der Hinweis
 * unmittelbar an der Tabelle und am Knopf darunter -- er las sich wie ein
 * Teil davon statt wie eine Aussage darueber.
 */
.ku-dialog__body { padding: 20px var(--ku-sp-4) 0; }

.ku-dialog__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--ku-sp-4);
  margin-top: 20px;
  border-top: var(--ku-bw) solid var(--ku-line);
  flex-wrap: wrap;
}
.ku-dialog__spacer { flex: 1; }

/*
 * Reihe gleichrangiger Handlungen innerhalb eines Formularabschnitts.
 *
 * Nicht zu verwechseln mit ku-pagehead__actions: Dort steht die eine
 * Primaeraktion der Seite. Hier stehen Wege, die einander ebenbuertig sind --
 * etwa «Aus Kontakten waehlen» neben «Neuen Kontakt erstellen». Deshalb traegt
 * keiner davon die gefuellte Form.
 */
.ku-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ku-sp-2);
  margin-top: var(--ku-sp-3);
}

/*
 * Wertepaare: Beschriftung links, Wert rechts, dazwischen eine Haarlinie.
 *
 * Fuer kurze Zusammenfassungen im Seitenfluss, etwa den zugewiesenen Kunden
 * eines Projekts. Bewusst keine Karte: Ordnung entsteht aus der Spaltenkante
 * und der Linie, nicht aus einer Flaeche.
 */
.ku-wertepaare { display: grid; margin: 0; }
.ku-wertepaare > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--ku-sp-3);
  padding: var(--ku-sp-2) 0;
  border-bottom: var(--ku-bw) solid var(--ku-line-soft);
}
.ku-wertepaare > div:last-child { border-bottom: 0; }
.ku-wertepaare dt {
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
}
.ku-wertepaare dd {
  margin: 0;
  font-size: var(--ku-fs-ui);
  line-height: var(--ku-lh-ui);
  font-weight: var(--ku-fw-ui);
  color: var(--ku-text);
}

/*
 * Der Systemdialog (ConfirmationHost) benutzt bewusst das native
 * <dialog>-Element: showModal() bringt Fokusfalle, Escape und Inertsetzung des
 * Hintergrunds mit, ohne dass wir sie nachbauen. Deshalb braucht er zwei
 * Dinge, die der div-basierte Dialog nicht braucht.
 */
dialog.ku-dialog--nativ {
  margin: auto;                 /* das native Element zentriert sich sonst nicht */
  padding: 0;                   /* Kopf, Rumpf und Fuss bringen ihre Abstaende mit */
  color: var(--ku-text);
}
dialog.ku-dialog--nativ::backdrop {
  /* ::backdrop erbt nicht zuverlaessig, deshalb steht der Wert hier direkt. */
  background: rgba(34, 37, 42, .34);
}
dialog.ku-dialog--nativ .ku-dialog__foot { padding-bottom: var(--ku-sp-4); }

.ku-panel {
  width: 420px;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ku-bg);
  border-left: var(--ku-bw) solid var(--ku-border);
  box-shadow: var(--ku-shadow-panel);
}
.ku-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  padding: 20px 20px 16px;
  border-bottom: var(--ku-bw) solid var(--ku-line);
}
.ku-panel__eyebrow {
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: var(--ku-ls-label);
  text-transform: uppercase;
  color: var(--ku-text-subtle);
}
.ku-panel__title { margin: 6px 0 0; font-size: 19px; font-weight: var(--ku-fw-sect); letter-spacing: var(--ku-ls-sect); }
.ku-panel__body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
.ku-panel__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: var(--ku-bw) solid var(--ku-line);
}

/* Karte — nur wo etwas wirklich abgesetzt gehört. */
.ku-card { border: var(--ku-bw) solid var(--ku-line); padding: 20px; }
.ku-card--subtle { background: var(--ku-bg-subtle); }
.ku-card__eyebrow {
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: var(--ku-ls-label);
  text-transform: uppercase;
  color: var(--ku-text-subtle);
}
.ku-card__title { font-size: 17px; font-weight: var(--ku-fw-ui); margin: 8px 0 6px; }
.ku-card__text { margin: 0; font-size: 13px; font-weight: var(--ku-fw-body); color: var(--ku-text-body); }

/* Gefahrenzone — immer die letzte Karte einer Seite. */
.ku-dangerzone { border: var(--ku-bw) solid var(--ku-bad-border); background: var(--ku-bad-bg); padding: 20px; }
.ku-dangerzone__eyebrow {
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  letter-spacing: var(--ku-ls-label);
  text-transform: uppercase;
  color: var(--ku-bad);
}
.ku-dangerzone__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ku-sp-4);
  padding: 16px 0;
  border-top: var(--ku-bw) solid var(--ku-bad-border);
}
.ku-dangerzone__item:first-of-type { border-top: none; }
.ku-dangerzone__title { font-size: 17px; font-weight: var(--ku-fw-ui); }
.ku-dangerzone__text { margin: 6px 0 0; font-size: 13px; font-weight: var(--ku-fw-body); color: var(--ku-text-body); max-width: 60ch; }

/* ------------------------------------------------------------------ *
 * 12 · Meldungen, Chips, Fortschritt
 * ------------------------------------------------------------------ */

/* Alle Benachrichtigungen liegen im zentralen Popup-Stapel. */
.ku-toast-region {
  position: fixed;
  right: var(--ku-sp-4);
  bottom: var(--ku-sp-4);
  z-index: 1000;
  display: grid;
  gap: var(--ku-sp-2);
  justify-items: end;
  width: 380px;
  max-width: calc(100vw - 2 * var(--ku-sp-4));
}
.ku-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: var(--ku-bw) solid var(--ku-line);
  border-left: var(--ku-bw-status) solid var(--ku-accent);
  background: var(--ku-bg);
  color: var(--ku-text);
  box-shadow: var(--ku-shadow-toast);
  animation: ku-toast-in var(--ku-t-toast);
}
.ku-toast--ok { border-left-color: var(--ku-ok); }
.ku-toast--warn { border-left-color: var(--ku-warn); }
.ku-toast--bad { border-left-color: var(--ku-bad); }
.ku-toast__icon { display: flex; margin-top: 1px; color: var(--ku-accent); }
.ku-toast--ok .ku-toast__icon { color: var(--ku-ok); }
.ku-toast--warn .ku-toast__icon { color: var(--ku-warn); }
.ku-toast--bad .ku-toast__icon { color: var(--ku-bad); }
@keyframes ku-toast-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Erste Zeile: was geschehen ist, mit Zahl und Gegenstand. */
.ku-toast__text {
  font-size: var(--ku-fs-ui);
  line-height: var(--ku-lh-ui);
  font-weight: var(--ku-fw-ui);
}
/* Zweite Zeile, nur wenn noetig: warum, oder was jetzt gilt. */
.ku-toast__grund {
  margin-top: 2px;
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
}
/* Der Balken zeigt die verbleibende Zeit; bei Fokus im Inneren haelt er an. */
.ku-toast__frist {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--ku-accent);
  animation: ku-toast-frist linear forwards;
}
@keyframes ku-toast-frist {
  from { width: 100%; }
  to { width: 0; }
}
.ku-toast--haelt .ku-toast__frist { animation-play-state: paused; }
.ku-toast__mehr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  width: 100%;
  padding: 10px 16px;
  border: var(--ku-bw) solid var(--ku-line);
  background: var(--ku-bg-subtle);
  font-size: var(--ku-fs-meta);
  color: var(--ku-text-subtle);
}
.ku-toast__undo {
  font: inherit;
  font-family: var(--ku-font);
  font-size: 13px;
  font-weight: var(--ku-fw-ui);
  padding: 0;
  background: none;
  border: none;
  color: var(--ku-text);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Statuschip. Nie nur Farbe: immer Punkt oder Symbol plus Wort. */
.ku-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: var(--ku-fw-ui);
  padding: 5px 11px;
  border-radius: var(--ku-r-1);
  border: var(--ku-bw) solid var(--ku-line);
  color: var(--ku-text-muted);
  white-space: nowrap;
}
.ku-chip--accent { border-color: var(--ku-accent-border); color: var(--ku-accent); }
.ku-chip--ok { border-color: var(--ku-ok-border); color: var(--ku-ok); }
.ku-chip--warn { border-color: var(--ku-warn-border); color: var(--ku-warn-text); }
.ku-chip--bad { border-color: var(--ku-bad-border); color: var(--ku-bad); }
.ku-chip--cancelled { color: var(--ku-text-subtle); text-decoration: line-through; }

.ku-badge {
  font-size: var(--ku-fs-label);
  font-weight: var(--ku-fw-label);
  padding: 2px 8px;
  border-radius: var(--ku-r-1);
  background: var(--ku-action);
  color: var(--ku-bg);
  white-space: nowrap;
}
/* --ku-bg ist im hellen Design weiss und im dunklen fast schwarz — genau
   die Gegenfarbe, die --ku-bad in beiden Designs braucht. */
.ku-badge--bad { background: var(--ku-bad); color: var(--ku-bg); }
.ku-badge--outline { background: transparent; border: var(--ku-bw) solid var(--ku-border); color: var(--ku-text-body); }

/* Statuspunkt. Elf Rechnungsstatus mit eigener Punktform. */
.ku-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ku-dot { width: 7px; height: 7px; flex: none; border-radius: var(--ku-r-full); background: currentColor; }
.ku-dot--ring { background: transparent; border: var(--ku-bw) solid currentColor; }
/* Halb gefüllt: die rechte Hälfte bleibt offen. */
.ku-dot--half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); border: var(--ku-bw) solid currentColor; }
.ku-dot--dim { color: var(--ku-neutral-dot); }
.ku-status--neutral { color: var(--ku-text-muted); }
.ku-status--accent { color: var(--ku-accent); }
.ku-status--ok { color: var(--ku-ok); }
.ku-status--warn { color: var(--ku-warn-text); }
.ku-status--warn .ku-dot { color: var(--ku-warn); }
.ku-status--bad { color: var(--ku-bad); }
.ku-status--cancelled { color: var(--ku-text-subtle); text-decoration: line-through; }

/* Fortschritt. */
.ku-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: var(--ku-fw-body);
}
.ku-progress__meta { color: var(--ku-text-subtle); }
.ku-progress__track { height: 3px; background: var(--ku-line-soft); }
.ku-progress__bar { height: 3px; background: var(--ku-accent); }
.ku-progress__steps { display: flex; gap: 4px; }
.ku-progress__step { flex: 1; height: 3px; background: var(--ku-line-soft); }
.ku-progress__step--done { background: var(--ku-warn); }
.ku-spinner {
  width: 15px;
  height: 15px;
  flex: none;
  display: inline-block;
  border: 2px solid var(--ku-line);
  border-top-color: var(--ku-accent);
  border-radius: var(--ku-r-full);
  animation: ku-spin 700ms linear infinite;
}

/* ------------------------------------------------------------------ *
 * 13 · Laden, Leere, Fehler
 * ------------------------------------------------------------------ */

/* Formtreu: gleiche Spaltenbreiten und Zeilenhöhen wie die echte Tabelle. */
.ku-skeleton__row {
  display: flex;
  gap: var(--ku-sp-3);
  align-items: center;
  height: var(--ku-h-row);
  padding: 0 12px;
  border-bottom: var(--ku-bw) solid var(--ku-line);
}
.ku-skeleton__bar {
  height: 12px;
  background: var(--ku-line-soft);
  animation: ku-skeleton var(--ku-t-skeleton) infinite;
}

.ku-emptystate { padding: 28px 0; border-top: var(--ku-bw) solid var(--ku-edge); border-bottom: var(--ku-bw) solid var(--ku-line); }
.ku-emptystate__title { margin: 0 0 8px; font-size: 20px; font-weight: var(--ku-fw-body); letter-spacing: var(--ku-ls-sect); }
.ku-emptystate__text { margin: 0 0 18px; font-size: var(--ku-fs-ui); font-weight: var(--ku-fw-body); color: var(--ku-text-body); max-width: 46ch; }
.ku-emptystate__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Leer wegen Filter: nennt den Filter, keine Kante, kein Titel im Seitenrang. */
.ku-emptystate--filter { padding: 20px 0; border-top: none; border-bottom: none; }
.ku-emptystate--filter .ku-emptystate__text { margin-bottom: 12px; }

/* ------------------------------------------------------------------ *
 * 14 · Upload und Dateiliste
 * ------------------------------------------------------------------ */

.ku-dropzone {
  border: var(--ku-bw) dashed var(--ku-border);
  padding: 32px 24px;
  text-align: center;
  background: var(--ku-bg-subtle);
}
.ku-dropzone--over { border-style: solid; border-color: var(--ku-accent); background: var(--ku-selected); }
.ku-dropzone__title { font-size: var(--ku-fs-cell); font-weight: var(--ku-fw-ui); margin-bottom: 6px; }
.ku-dropzone__text { margin: 0 0 16px; font-size: 13px; font-weight: var(--ku-fw-body); color: var(--ku-text-body); }

.ku-filerow {
  display: flex;
  align-items: center;
  gap: var(--ku-sp-3);
  padding: 14px 0;
  border-bottom: var(--ku-bw) solid var(--ku-line);
}
.ku-filerow:first-child { border-top: var(--ku-bw) solid var(--ku-edge); }
.ku-filerow__icon { flex: none; display: flex; color: var(--ku-text-muted); }
.ku-filerow--error .ku-filerow__icon { color: var(--ku-bad); }
.ku-filerow__body { flex: 1; min-width: 0; }
.ku-filerow__name { font-size: var(--ku-fs-ui); font-weight: var(--ku-fw-ui); overflow-wrap: anywhere; }
.ku-filerow__meta { font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
/* ------------------------------------------------------------------ *
 * Diagramme, Altersgliederung, Verlauf
 * ------------------------------------------------------------------ */

.ku-chart { display: grid; gap: var(--ku-sp-3); }
.ku-chart__plot { display: flex; align-items: flex-end; gap: var(--ku-sp-2); height: 180px; border-bottom: var(--ku-bw) solid var(--ku-line); }
.ku-chart__group { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.ku-chart__bar { width: 100%; max-width: 22px; background: var(--ku-accent); }
.ku-chart__bar--second { background: var(--ku-accent-soft); }
/* Der laufende Monat ist noch nicht vollständig — Deckkraft 45 % sagt das. */
.ku-chart__group--running .ku-chart__bar { opacity: .45; }
.ku-chart__labels { display: flex; gap: var(--ku-sp-2); }
.ku-chart__label { flex: 1; min-width: 0; text-align: center; font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
.ku-chart__legend { display: flex; gap: var(--ku-sp-4); font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
.ku-chart__key { display: inline-flex; align-items: center; gap: 7px; }
.ku-chart__swatch { width: 10px; height: 10px; background: var(--ku-accent); }
.ku-chart__swatch--second { background: var(--ku-accent-soft); }

.ku-timeline { list-style: none; margin: 0; padding: 0; }
.ku-timeline__item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--ku-sp-3); align-items: baseline; padding: 12px 0; border-top: var(--ku-bw) solid var(--ku-line); }
.ku-timeline__item:first-child { border-top: none; }
.ku-timeline__marker { display: flex; align-items: center; height: var(--ku-lh-body); }
.ku-timeline__title { font-size: var(--ku-fs-ui); font-weight: var(--ku-fw-ui); }
.ku-timeline__meta { font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-meta); color: var(--ku-text-subtle); }
.ku-timeline__amount { text-align: right; font-size: var(--ku-fs-cell); font-weight: var(--ku-fw-cell); }

/* ------------------------------------------------------------------ *
 * Raster und Hilfsklassen
 * ------------------------------------------------------------------ */

/* Seitenraster. Mobil bleibt eine Spalte, immer — nie zweispaltige Formulare. */
.ku-page { max-width: var(--ku-page-w); margin: 0 auto; padding: 0 var(--ku-page-pad) 80px; background: var(--ku-bg); }
.ku-stack { display: grid; gap: var(--ku-sp-4); }
.ku-stack--tight { gap: var(--ku-sp-2); }
.ku-stack--wide { gap: var(--ku-sp-6); }
.ku-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ku-sp-6); align-items: start; }
.ku-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ku-sp-4); align-items: start; }
/* Etwas, das seine Breite braucht — Zahlteil, breite Tabelle — scrollt in
   seinem eigenen Kasten, statt die Seite waagrecht zu schieben. */
.ku-scroll-x { overflow-x: auto; }

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

/* ------------------------------------------------------------------ *
 * Mobil · eigenständig, nicht geschrumpft
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  /* Rand 20 px statt 56 px: mobil ist Fläche knapp und der Inhalt einspaltig. */
  .ku-page { padding: 0 20px 80px; }
  /*
   * Mobil faellt die reservierte Hoehe weg: Auf schmalem Schirm braucht
   * derselbe Satz drei bis vier Zeilen, die Reserve traefe ohnehin nicht zu,
   * und leerer Platz waere hier am teuersten.
   */
  .ku-pagehead__text { min-height: 0; }
  .ku-grid-2,
  .ku-grid-3 { grid-template-columns: 1fr; gap: var(--ku-sp-4); }
  .ku-form-section { grid-template-columns: 1fr; gap: var(--ku-sp-3); }
  .ku-form-section__fields,
  .ku-feldraster { grid-template-columns: 1fr; }
  .ku-form-section__fields > .ku-field--wide,
  .ku-feldraster > .ku-field--wide { grid-column: auto; }
  .ku-metricband { grid-template-columns: 1fr 1fr; }
  .ku-metric { padding-left: 16px; padding-right: 16px; border-top: var(--ku-bw) solid var(--ku-line); }
  .ku-metric:first-child { padding-left: 16px; }
  .ku-taskrow { grid-template-columns: 20px minmax(0, 1fr); row-gap: var(--ku-sp-2); }
  .ku-taskrow__amount { grid-column: 2; text-align: left; }
  .ku-taskrow__action { grid-column: 2; justify-content: flex-start; }
  .ku-input, .ku-select, .ku-amount, .ku-input-group, input.input, select.input { height: var(--ku-h-field-m); min-height: var(--ku-h-field-m); }
  .ku-btn { min-height: 48px; }
  .ku-dialog, .ku-panel { width: 100%; height: 100%; max-height: none; border: none; }
  .ku-scrim, .ku-scrim--right { padding: 0; place-items: stretch; }
}

/*
 * Vorgangsfenster (Form C).
 *
 * 380 px unten rechts, immer ueber den Kurzmeldungen. Helle Flaeche mit
 * Statuskante links -- wie jeder andere Baustein und wie die Kurzmeldung.
 * Es blockiert nichts: keine Ganzflaechen-Ueberlagerung, kein gesperrter
 * Bildschirm.
 */
.ku-vorgangsfenster {
  position: fixed;
  right: var(--ku-sp-4);
  bottom: calc(var(--ku-sp-4) + 96px);
  z-index: 1001;
  display: grid;
  gap: var(--ku-sp-2);
  width: 380px;
  max-width: calc(100vw - 2 * var(--ku-sp-4));
}
.ku-vorgang__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ku-sp-3);
  width: 100%;
  padding: 10px 16px;
  border: var(--ku-bw) solid var(--ku-line);
  background: var(--ku-bg-subtle);
  font: inherit;
  font-family: var(--ku-font);
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-ui);
  color: var(--ku-text);
  cursor: pointer;
}
.ku-vorgang__pfeil { display: flex; transition: transform var(--ku-t-schnell, 120ms); }
.ku-vorgang__pfeil--offen { transform: rotate(180deg); }
.ku-vorgang {
  display: grid;
  gap: var(--ku-sp-2);
  padding: 14px 16px;
  border: var(--ku-bw) solid var(--ku-line);
  border-left: var(--ku-bw-status) solid var(--ku-accent);
  background: var(--ku-bg);
  box-shadow: var(--ku-shadow-toast);
}
.ku-vorgang--ok { border-left-color: var(--ku-ok); }
.ku-vorgang--warn { border-left-color: var(--ku-warn); }
.ku-vorgang--bad { border-left-color: var(--ku-bad); }
.ku-vorgang__zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
.ku-vorgang__symbol { display: flex; margin-top: 1px; color: var(--ku-accent); }
.ku-vorgang--ok .ku-vorgang__symbol { color: var(--ku-ok); }
.ku-vorgang--warn .ku-vorgang__symbol { color: var(--ku-warn); }
.ku-vorgang--bad .ku-vorgang__symbol { color: var(--ku-bad); }
/* Der Ring dreht sich nur, solange etwas laeuft. */
.ku-vorgang__ring {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ku-accent-soft);
  border-top-color: var(--ku-accent);
  border-radius: var(--ku-r-full);
}
.ku-vorgang__ring--dreht { animation: ku-vorgang-dreht 900ms linear infinite; }
@keyframes ku-vorgang-dreht { to { transform: rotate(360deg); } }
.ku-vorgang__titel { font-size: var(--ku-fs-ui); font-weight: var(--ku-fw-ui); }
.ku-vorgang__unter,
.ku-vorgang__restzeit,
.ku-vorgang__ergebnis {
  margin: 0;
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
}
.ku-vorgang__stand {
  font-size: var(--ku-fs-ui);
  font-weight: var(--ku-fw-row);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ku-vorgang__schliessen {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ku-text-subtle);
  cursor: pointer;
}
/* Ein Balken steht nie allein: die Zahl daneben ist Pflicht. */
.ku-vorgang__balken { height: 3px; background: var(--ku-line); }
.ku-vorgang__balken span {
  display: block;
  height: 100%;
  background: var(--ku-accent);
  transition: width var(--ku-t-schnell, 120ms) linear;
}
.ku-vorgang__zaehler {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ku-fs-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-body);
  font-variant-numeric: tabular-nums;
}
/* Jedes betroffene Element einzeln, nicht summiert. */
.ku-vorgang__liste {
  display: grid;
  gap: var(--ku-sp-1);
  margin: 0;
  padding-top: var(--ku-sp-2);
  border-top: var(--ku-bw) solid var(--ku-line);
  list-style: none;
}
.ku-vorgang__liste li { display: grid; gap: 1px; }
.ku-vorgang__gegenstand { font-size: var(--ku-fs-meta); font-weight: var(--ku-fw-ui); }
.ku-vorgang__grund {
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
}
.ku-vorgang__wege { display: flex; flex-wrap: wrap; gap: var(--ku-sp-2); }

/* Mobil: volle Breite minus 20 px, ueber der Fussnavigation. */
@media (max-width: 767px) {
  .ku-vorgangsfenster,
  .ku-toast-region {
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }
  .ku-vorgangsfenster { bottom: calc(var(--ku-h-tabbar) + 96px); }
  .ku-toast-region { bottom: calc(var(--ku-h-tabbar) + 10px); }
}

/* ------------------------------------------------------------------ *
 * Vorgangsknopf in der Kopfzeile und Vorgangsprotokoll
 * ------------------------------------------------------------------ */
.ku-header__vorgaenge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: var(--ku-bw) solid var(--ku-line);
  border-radius: var(--ku-r-full);
  background: transparent;
  color: var(--ku-text);
  font-size: var(--ku-fs-ui);
  line-height: var(--ku-lh-ui);
  font-weight: var(--ku-fw-ui);
  cursor: pointer;
}
.ku-header__vorgaenge:hover { border-color: var(--ku-edge); }

/* «Alle ansehen» am Fuss des Vorgangsfensters. */
.ku-vorgang__mehr {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-top: var(--ku-bw) solid var(--ku-line);
  background: transparent;
  color: var(--ku-text-muted);
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  text-align: left;
  cursor: pointer;
}
.ku-vorgang__mehr:hover { color: var(--ku-text); }

.ku-protokoll { margin: 0; padding: 0; list-style: none; }
.ku-protokoll__zeile {
  padding: var(--ku-sp-3) 0;
  border-bottom: var(--ku-bw) solid var(--ku-line);
}
.ku-protokoll__zeile:last-child { border-bottom: 0; }
.ku-protokoll__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ku-sp-2); }
.ku-protokoll__titel { font-size: var(--ku-fs-row); line-height: var(--ku-lh-row); font-weight: 500; }
.ku-protokoll__zustand {
  flex: none;
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  color: var(--ku-text-subtle);
}
.ku-protokoll__zustand--ok { color: var(--ku-ok); }
.ku-protokoll__zustand--warn { color: var(--ku-warn); }
.ku-protokoll__zustand--bad { color: var(--ku-bad); }
.ku-protokoll__meta {
  margin-top: 2px;
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
  color: var(--ku-text-subtle);
  font-variant-numeric: tabular-nums;
}
.ku-protokoll__bericht { margin: var(--ku-sp-1) 0 0; font-size: var(--ku-fs-body); line-height: var(--ku-lh-body); }
/* Jedes betroffene Element einzeln: Eine Zahl allein nennt keine Datei. */
.ku-protokoll__hinweise {
  margin: var(--ku-sp-1) 0 0;
  padding-left: 18px;
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  color: var(--ku-text-muted);
}

/* Hinweise und Fehler gehören auch in älteren Masken zum gemeinsamen Feldstil. */
.field-note, .field-feedback-slot {
  font-size: var(--ku-fs-meta);
  line-height: var(--ku-lh-meta);
  font-weight: var(--ku-fw-meta);
}

.field-feedback-slot { min-height: 18px; }

.ku-toast { padding-right: 44px; }
.ku-toast__close { position: absolute; top: 6px; right: 4px; min-width: 32px; min-height: 32px; }
.ku-toast__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ku-toast-region { pointer-events: none; max-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.ku-toast-region > * { pointer-events: auto; }
.ku-toast__grund { overflow-wrap: anywhere; max-height: 35dvh; overflow-y: auto; }

@media (max-width: 767px) {
  .ku-toast__close { min-width: 44px; min-height: 44px; top: 0; right: 0; }
  .ku-toast { padding-right: 48px; }
}