/*
  workspace-bento-regeln.css — Aussehen von „Mit Worten anpassen" für Bento-Ansichten (workspace-bento-regeln.js).

  Kurzbeschreibung (für Laien): Ralph, 25.10.2026. Wirkung der Regeln an einer Listenzeile (Merkmale data-regel-farbe,
  data-regel-fett, data-regel-oben — gesetzt über WsBentoRegeln.markieren): zart farbig hinterlegt mit Farbstrich links,
  fett, angeheftet mit kleinem Stecknadel-Strich. Dazu das Fenster (Dialog-Baustein marke/bausteine/43-dialog.html wie bei
  workspace-bento-kachelwunsch.css: Abdunklung, Karte ohne Rahmen, Knöpfe rechts), Vorschlag in Klartext, Rückfrage-Pillen,
  aktive Regeln mit Entfernen. Farben nur aus der Marke.
*/

/* ── Wirkung an der Zeile ── */
[data-regel-farbe] { --wbr-f: var(--marke-text-3); background: color-mix(in srgb, var(--wbr-f) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wbr-f) 40%, transparent); border-radius: var(--marke-r-s); }
[data-regel-farbe="rot"] { --wbr-f: var(--marke-gefahr); }
[data-regel-farbe="gruen"] { --wbr-f: var(--marke-ok); }
[data-regel-farbe="gelb"] { --wbr-f: var(--marke-warn); }
[data-regel-farbe="blau"] { --wbr-f: var(--marke-nav-blau); }
[data-regel-farbe="lila"] { --wbr-f: var(--marke-lila); }
[data-regel-farbe="tuerkis"] { --wbr-f: var(--marke-tuerkis); }
[data-regel-farbe="grau"] { --wbr-f: var(--marke-text-3); }
[data-regel-fett], [data-regel-fett] * { font-weight: 700; }
[data-regel-oben]:not([data-regel-farbe]) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-text-3) 40%, transparent); border-radius: var(--marke-r-s); }

/* ── Fenster ── */
.wbr-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: var(--marke-abdunklung); }
.wbr-dialog { width: min(560px, 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); }
.wbr-dialog .a4h-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wbr-titel { margin: 0; font-size: 20px; font-weight: 700; color: var(--marke-text); }
.wbr-unter { margin-top: 4px; font-size: 13px; color: var(--marke-text-2); }
.wbr-zu, .wbr-weg { 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; }
.wbr-zu:hover, .wbr-weg:hover { background: var(--marke-flaeche-2); color: var(--marke-text); }
.wbr-zu svg, .wbr-weg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.wbr-weg { width: 28px; height: 28px; }
.wbr-weg svg { width: 14px; height: 14px; }
.wbr-body { display: grid; gap: 12px; font-size: 14px; color: var(--marke-text-2); min-width: 0; }
.wbr-form { display: flex; gap: 8px; align-items: flex-end; }
.wbr-l { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; font: 600 12px var(--marke-schrift); color: var(--marke-text-2); }
.wbr-form .wbr-feld { flex: 1; min-width: 0; }
.wbr-form .wb-knopf { height: 40px; flex: none; }
.wbr-pillen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wbr-pille { 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; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbr-pille:hover { color: var(--marke-text); background: color-mix(in srgb, var(--marke-text) 10%, var(--marke-flaeche)); }
.wbr-vorschlag { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--marke-r-m); background: var(--marke-flaeche-2); }
.wbr-vorschlag p { margin: 0; font-size: 13px; color: var(--marke-text); }
.wbr-nein { background: color-mix(in srgb, var(--marke-warn) 10%, var(--marke-flaeche)); }
.wbr-v-kopf { font-size: 13px; font-weight: 700; color: var(--marke-text); }
.wbr-liste { margin: 0; padding-left: 16px; display: grid; gap: 4px; font-size: 13px; color: var(--marke-text); }
.wbr-rueck { display: grid; gap: 8px; font-size: 13px; color: var(--marke-text); }
.wbr-rueck small, .wbr-leise { margin: 0; font-size: 12px; color: var(--marke-text-3); }
.wbr-rueck .wbr-pille { background: var(--marke-flaeche); }
.wbr-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.wbr-meldung { margin: 0; font-size: 13px; color: var(--marke-ok); }
.wbr-meldung.fehler { color: var(--marke-gefahr); }
.wbr-aktiv { display: grid; gap: 4px; }
.wbr-aktiv .wbr-v-kopf { margin-bottom: 4px; }
.wbr-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; border-radius: var(--marke-r-m); font-size: 13px; color: var(--marke-text); min-width: 0; }
.wbr-zeile:hover { background: var(--marke-flaeche-2); }
.wbr-zeile span { min-width: 0; overflow-wrap: anywhere; }
.wbr-dialog .a4h-modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.wbr-lade { display: grid; place-items: center; min-height: 120px; }

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

/* ── Im Bento: Gruppen-Überschrift (Regel „gruppieren nach …") und dezenter Hinweis (Chef offen, x ausgeblendet) ── */
.wbr-gruppe { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 8px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--wb-leise, var(--marke-text-3)); min-width: 0; }
.wbr-gruppe span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbr-gruppe small { flex: none; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.wbr-gruppe:first-child { padding-top: 2px; }
.wbr-hinweis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--wb-leise, var(--marke-text-3)); }
.zk-pf-zwischen .wbr-hinweis { display: inline; flex: 0 1 auto; margin-left: auto; text-align: right; color: var(--wb-leise, var(--marke-text-3)); }