/*
  workspace-ki-kachel.css — Aussehen der KI-Kachel „aus eigenen Worten" (workspace-ki-kachel.js) auf der Bento-Startseite.

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026. Eingabefeld für den Wunsch, Vorschau mit „Übernehmen", und die
  fertige Kachel: Kennzahl oben, darunter Liste, Tabelle mit Spaltenköpfen, Balken (Wert über dem Balken), Säulen,
  Linie oder Kreis; Mail-Liste (Datum · Absender · Betreff) mit Filterzeile. Farben nur aus der Marke (über die Bento-Variablen --wb-…), Formen aus der Leiter.
*/

.wkk { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; font-family: var(--marke-schrift); }
.wkk-titel[data-wkk-ziel] { cursor: pointer; }

/* Kopf: Titel links, Kennzahl rechts oben */
.wkk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wkk-kopf .wkk-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkk-kpi { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.wkk-kpi b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--wb-text); font-variant-numeric: tabular-nums; }
.wkk-kpi small { font-size: 11px; color: var(--wb-leise); }
.wkk-gross { margin-top: auto; }

/* Eingabe */
.wkk-form { display: flex; flex-direction: column; gap: 8px; }
.wkk-form.klein { flex-direction: row; align-items: flex-end; margin-top: auto; }
.wkk-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--wb-leise); }
.wkk-l-klein { flex: 1; }
.wkk-form.klein .wkk-feld { flex: 1; min-width: 0; }
.wkk-feld { resize: none; }   /* Form: graues rundes Feld aus dem Bento-Baukasten (.wb-feld) */
.wb-k.kraeftig .wkk-feld, .wb-k.blau .wkk-feld, .wb-k.dunkel .wkk-feld { background: rgba(255, 255, 255, .16); }
.wkk-zeile-knopf { display: flex; gap: 8px; justify-content: flex-end; }
.wkk-zeile-knopf.vorschau { margin-top: auto; }
.wkk-knopf { flex: none; }   /* Form: Bento-Baukasten (.wb-knopf / .wb-knopf-leise, klein) */
.wkk-beispiele { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; }
.wkk-bsp { border: 0; background: var(--wb-weich); color: var(--wb-leise); border-radius: var(--marke-r-pill);
  padding: 6px 10px; font: 600 11px var(--marke-schrift); cursor: pointer; transition: background .2s, color .2s; }
.wkk-bsp:hover { color: var(--wb-text); background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)); }
.wkk-hinweis { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--wb-leise);
  background: var(--wb-weich); border-radius: var(--wb-r-k, 14px); padding: 10px 12px; }
.wkk-hinweis.fehler span { color: var(--wb-text); }

/* Liste und Tabelle */
.wkk-zeile.rot small, .wkk-zeile.rot span { color: var(--wb-rot); }
.wkk-tab-rahmen { min-height: 0; overflow: hidden; }
.wkk-tab { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.wkk-tab th { text-align: left; font-size: 11px; font-weight: 700; color: var(--wb-leise); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--wb-linie); }
.wkk-tab td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--wb-linie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wb-text); }
.wkk-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.wkk-tab tr.rot td { color: var(--wb-rot); }

/* Balken waagerecht: Name und Wert über dem Balken */
.wkk-balken { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.wkk-b-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.wkk-b-kopf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wb-text); }
.wkk-b-kopf b { font-variant-numeric: tabular-nums; color: var(--wb-text); }
.wkk-b-spur { height: 8px; border-radius: var(--marke-r-pill); background: var(--wb-weich); margin-top: 4px; overflow: hidden; }
.wkk-b-spur i { display: block; height: 100%; border-radius: inherit; background: var(--kachel-balken, var(--wb-akzent)); }

/* Verlauf: Säulen / Linie mit Werten darüber */
.wkk-verlauf { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wkk-saeulen { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 40px; }
.wkk-s { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.wkk-s small { font-size: 11px; color: var(--wb-leise); white-space: nowrap; font-variant-numeric: tabular-nums; min-height: 14px; }
.wkk-s i { display: block; width: 100%; max-width: 28px; border-radius: 6px 6px 0 0; background: var(--kachel-balken, var(--wb-akzent)); }
.wkk-achse { display: flex; gap: 4px; margin-top: 4px; }
.wkk-achse span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--wb-leise); white-space: nowrap; overflow: visible; }
.wkk-werte { display: flex; gap: 4px; }
.wkk-werte span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--wb-leise); white-space: nowrap; min-height: 14px; font-variant-numeric: tabular-nums; }
.wkk-verlauf.linie svg { flex: 1; width: 100%; min-height: 40px; }
.wkk-verlauf.linie polyline { stroke: var(--kachel-balken, var(--wb-akzent)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

/* Kreis mit Legende (Wert und Anteil) */
.wkk-kreis { flex: 1; display: flex; align-items: center; gap: 16px; min-height: 0; }
.wkk-kreis svg { width: 96px; height: 96px; flex: none; transform: rotate(0deg); }
.wkk-legende { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; font-size: 12px; }
.wkk-legende div { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center; }
.wkk-legende i { width: 10px; height: 10px; border-radius: 999px; }
.wkk-legende span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wb-text); }
.wkk-legende b { font-variant-numeric: tabular-nums; color: var(--wb-text); }
.wkk-legende small { color: var(--wb-leise); font-size: 11px; min-width: 34px; text-align: right; }

/* Mails (25.10.2026): Filterzeile klein unter dem Kopf, Spalten Datum · Absender · Betreff, Liste scrollt (.bl-scroll) */
.wkk-filter { font-size: 11px; line-height: 1.4; color: var(--wb-leise); overflow: hidden; margin-top: -4px; flex: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.wkk-mz { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; align-items: baseline; font-size: 12px; padding: 6px 4px;
  border-bottom: 1px solid var(--wb-linie); border-radius: 6px; color: var(--wb-text); cursor: pointer; transition: background .2s; }
.wkk-mz span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkk-mz span:first-child { color: var(--wb-leise); font-variant-numeric: tabular-nums; font-size: 11px; }
.wkk-mz.neu span:nth-child(2), .wkk-mz.neu span:nth-child(3) { font-weight: 700; }
.wkk-mz:not(.wkk-mz-kopf):hover, .wkk-mz:not(.wkk-mz-kopf):focus-visible { background: var(--wb-weich); outline: none; }
.wkk-mz-kopf { font-size: 11px; font-weight: 700; color: var(--wb-leise); cursor: default; padding-top: 0; padding-bottom: 4px; }
.wkk-mz-kopf span:first-child { font-size: 11px; }
.wkk-mails { display: flex; flex-direction: column; }
.wkk-mehr { border: 0; background: none; color: var(--wb-leise); font: 600 11px var(--marke-schrift); padding: 8px 4px; text-align: left; cursor: pointer; transition: color .2s; }
.wkk-mehr:hover { color: var(--wb-text); }