/*
  workspace-bento-kachelwunsch.css — Aussehen von „Mit Worten anpassen" (workspace-bento-kachelwunsch.js) auf der Bento-Startseite.

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026. Wirkung der Schalter an der Kachel (Merkmale data-kw-…): überfällige
  Zeilen rot hinterlegt, Listen gekürzt, Unterzeile/Datum ausgeblendet, Zahl größer/kleiner oder als Strich-Balken.
  Dazu das Fenster (Dialog-Baustein: Abdunklung, Karte ohne Rahmen, Knöpfe rechts) mit Beispiel-Pillen und Verlauf.
  Farben nur aus der Marke (über die Bento-Variablen --wb-…); Kachel-Farben bleiben beim Pinsel.
*/

/* ── Wirkung an der Kachel ── */
.wb-k .kw-aus { display: none !important; }
.wb-k[data-kw-unterzeile="aus"] .wk-inhalt > .wk-s,
.wb-k[data-kw-unterzeile="aus"] .zk-reihe > .wk-s,
.wb-k[data-kw-unterzeile="aus"] .wk-unten,
.wb-k[data-kw-unterzeile="aus"] .wbg-lage { display: none; }
.wb-k[data-kw-datum="aus"] .wk-zeile > small,
.wb-k[data-kw-datum="aus"] .zk-zeile > small { display: none; }
.wb-k[data-kw-zahlgroesse="gross"] .wk-z:not(.wk-wort) { font-size: clamp(28px, 20cqi, 48px); }
.wb-k[data-kw-zahlgroesse="klein"] .wk-z:not(.wk-wort) { font-size: clamp(15px, 10cqi, 20px); }
.wb-k[data-kw-hervorheben="ueberfaellig"] .zk-zeile:has(.zk-rot) {
  background: color-mix(in srgb, var(--wb-rot) 12%, transparent); border-radius: var(--marke-r-s); }
.wb-k[data-kw-hervorheben="ueberfaellig"] .zk-zeile:has(.zk-rot) .zk-t,
.wb-k[data-kw-hervorheben="ueberfaellig"] .zk-zeile .zk-rot { color: var(--wb-rot); font-weight: 700; }
.wb-k[data-kw-hervorheben="ueberfaellig"] b.zk-rot { color: var(--wb-rot); }
.wb-k.kraeftig[data-kw-hervorheben="ueberfaellig"] .zk-zeile:has(.zk-rot) { background: var(--wb-auf-farbe-linie); }

/* Zahl als Balken: ein Strich je Eintrag (bis 20), überfällige rot, die Zahl klein daneben */
.wb-k .kw-als-balken { display: none !important; }
.wb-k[data-kw-anzahl] .zk-liste + .wk-s, .wb-k[data-kw-filter] .zk-liste + .wk-s { display: none; }   /* „+ n weitere" stimmt nach dem Kürzen nicht mehr */
.kw-balken { display: flex; align-items: center; gap: 8px; margin-top: auto; min-width: 0; }
.kw-striche { display: flex; gap: 3px; flex: 1; min-width: 64px; height: 20px; }
.zk-reihe .kw-balken { flex: 1 1 140px; margin-top: 0; max-width: 360px; }
.kw-striche i { flex: 1; max-width: 14px; border-radius: 4px; background: var(--wb-akzent); }
.kw-striche i.rot { background: var(--wb-rot); }
.kw-striche i.leer { background: var(--wb-linie); max-width: none; }
.kw-balken b { font-size: 14px; font-weight: 800; color: var(--wb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-k.kraeftig .kw-striche i, .wb-k.blau .kw-striche i { background: var(--wb-auf-farbe); }
.wb-k.kraeftig .kw-balken b, .wb-k.blau .kw-balken b { color: var(--wb-auf-farbe); }

/* ── Menüeintrag ── */
.wb-kontext [data-kachelwunsch] small { color: var(--wb-leise); }

/* ── Fenster (Dialog-Baustein marke/bausteine/43-dialog.html) ── */
.kw-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: var(--marke-abdunklung); }
.kw-dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; display: grid; gap: 16px; padding: 24px;
  border: 0; border-radius: var(--marke-r-l); background: var(--marke-flaeche); color: var(--marke-text); box-shadow: var(--marke-schatten); font-family: var(--marke-schrift); }
.kw-dialog .a4h-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kw-titel { margin: 0; font-size: 20px; font-weight: 700; color: var(--marke-text); }
.kw-unter { margin-top: 4px; font-size: 13px; color: var(--marke-text-2); }
.kw-zu { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--marke-r-pill); background: transparent; color: var(--marke-text-2); cursor: pointer; }
.kw-zu:hover { background: var(--marke-flaeche-2); color: var(--marke-text); }
.kw-zu svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.kw-body { display: grid; gap: 12px; font-size: 14px; color: var(--marke-text-2); }
.kw-form { display: flex; gap: 8px; align-items: flex-end; }
.kw-l { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; font: 600 12px var(--marke-schrift); color: var(--marke-text-2); }
.kw-form .kw-feld { flex: 1; min-width: 0; }
.kw-form .wb-knopf { height: 40px; flex: none; }
.kw-bsps { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-bsp { border: 0; background: var(--marke-flaeche-2); color: var(--marke-text-2); border-radius: var(--marke-r-pill); padding: 4px 12px; font: 500 12px var(--marke-schrift); cursor: pointer; }
.kw-bsp:hover { color: var(--marke-text); background: color-mix(in srgb, var(--marke-text) 10%, var(--marke-flaeche)); }
.kw-meldung { margin: 0; font-size: 13px; color: var(--marke-ok); }
.kw-meldung.fehler { color: var(--marke-gefahr); }
.kw-hinweis { margin: 0; font-size: 12px; color: var(--marke-text-3); }
.kw-verlauf { display: grid; gap: 4px; }
.kw-v-kopf { font-size: 13px; font-weight: 700; color: var(--marke-text); margin-bottom: 4px; }
.kw-v-kopf small { font-weight: 500; color: var(--marke-text-3); margin-left: 4px; }
.kw-fassung { display: grid; gap: 2px; text-align: left; border: 0; border-radius: var(--marke-r-m); background: transparent; padding: 8px 12px; cursor: pointer; font-family: var(--marke-schrift); min-width: 0; }
.kw-fassung:hover:not(:disabled) { background: var(--marke-flaeche-2); }
.kw-fassung.aktuell { background: var(--marke-flaeche-2); cursor: default; }
.kw-f-a { font-size: 13px; font-weight: 600; color: var(--marke-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-fassung small { font-size: 12px; color: var(--marke-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-dialog .a4h-modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.kw-lade { display: grid; place-items: center; min-height: 120px; }

@media (max-width: 520px) {
  .kw-dialog { padding: 16px; }
  .kw-form { flex-direction: column; align-items: stretch; }
  .kw-form .kw-feld { flex: none; }
}