/*
  workspace-bento-transkription-neu.css — Gestaltung der neuen Protokoll-Anzeige (Beta) in der Transkription

  Kurzbeschreibung (für Laien): Maßnahmen als Tabelle mit Haken, kleine Vorschlag-Pillen (ein Klick übernimmt den Vorschlag),
  Herausforderungen mit farbigem Stand, Kernpunkte, Inhalt nach Thema und die Ansicht „Das Protokoll wartet“. Farbige Flächen
  laufen leicht ins Weiße aus (Ralph, 07.11.2026), keine farbigen Seitenstreifen. Markup: workspace-bento-transkription-neu.js.
*/
.btr-p { --btr-ok: var(--marke-ok); --btr-warn: var(--marke-warn); --btr-gefahr: var(--marke-gefahr); --btr-blau: var(--marke-nav-blau); }

/* Chips und Pillen: getönte Fläche, läuft nach rechts unten ins Weiße aus */
.btr-nu-chip, .btr-nu-vor, .btr-nu-pruef {
  --c: color-mix(in srgb, var(--marke-nav-blau) 16%, var(--wb-verlauf-ziel, #fff));
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 10px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--c) 30%, color-mix(in srgb, var(--c) 66%, var(--wb-verlauf-ziel, #fff)));
  color: var(--wb-text); font: 600 11.5px/1.3 var(--marke-schrift); white-space: nowrap;
}
.btr-nu-chip.ok { --c: color-mix(in srgb, var(--marke-ok) 26%, var(--wb-verlauf-ziel, #fff)); }
.btr-nu-chip.warn, .btr-nu-pruef { --c: color-mix(in srgb, var(--marke-warn) 28%, var(--wb-verlauf-ziel, #fff)); }
.btr-nu-chip.gefahr { --c: color-mix(in srgb, var(--marke-gefahr) 24%, var(--wb-verlauf-ziel, #fff)); }
.btr-nu-pruef { margin-left: 6px; }
button.btr-nu-vor { cursor: pointer; --c: color-mix(in srgb, var(--marke-nav-blau) 22%, var(--wb-verlauf-ziel, #fff)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-nav-blau) 38%, transparent); }
button.btr-nu-vor:hover { box-shadow: inset 0 0 0 1px var(--marke-nav-blau); }
button.btr-nu-vor:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; }
button.btr-nu-vor:disabled { opacity: .55; cursor: default; }
.btr-nu-vor.ruhig { cursor: default; }
.btr-nu-grund { font-size: 12px; color: var(--wb-leise); }
.btr-nu-legende { margin: 0 0 8px; font-size: 12px; color: var(--wb-leise); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Maßnahmen: Haken | Aufgabe | Verantwortlich | Termin */
.btr-nu-az { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(130px, 210px) 100px; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--wb-linie); }
.btr-nu-az:first-child { border-top: 0; }
.btr-nu-az.btr-p-kopfz { padding: 9px 14px; }
.btr-nu-hk { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btr-nu-hk input { width: 16px; height: 16px; margin: 0; accent-color: var(--marke-nav-blau); cursor: pointer; }
.btr-nu-hk input:disabled { cursor: default; opacity: .5; }
.btr-nu-az.fertig .btr-p-t > span:first-child { color: var(--wb-leise); }
.btr-p-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--wb-leise); }
.btr-nu-t-r { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.btr-nu-az .btr-p-w, .btr-nu-az .btr-p-d { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.btr-nu-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; }
.btr-nu-fuss-t { font-size: 12px; color: var(--wb-leise); }
.btr-nu-ueb { min-height: 32px; padding: 6px 16px; border: 0; cursor: pointer; font: 700 13px var(--marke-schrift); }
.btr-nu-ueb:disabled { opacity: .5; cursor: default; }

/* Herausforderungen */
.btr-nu-stapel { display: flex; gap: 2px; height: 8px; margin: 2px 0 10px; border-radius: 999px; overflow: hidden; background: var(--wb-linie); }
.btr-nu-stapel i { display: block; }
.btr-nu-stapel i.ok { background: linear-gradient(135deg, var(--marke-ok) 30%, color-mix(in srgb, var(--marke-ok) 66%, var(--wb-verlauf-ziel, #fff))); }
.btr-nu-stapel i.warn { background: linear-gradient(135deg, var(--marke-warn) 30%, color-mix(in srgb, var(--marke-warn) 66%, var(--wb-verlauf-ziel, #fff))); }
.btr-nu-stapel i.gefahr { background: linear-gradient(135deg, var(--marke-gefahr) 30%, color-mix(in srgb, var(--marke-gefahr) 66%, var(--wb-verlauf-ziel, #fff))); }
.btr-nu-hliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.btr-nu-hliste li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.btr-nu-hliste .btr-nu-chip { flex: none; min-width: 96px; justify-content: center; }
.btr-nu-ht { min-width: 0; overflow-wrap: anywhere; }
.btr-nu-ht small { display: block; font-size: 12px; color: var(--wb-leise); }

/* Hinweis, Inhalt, Kernpunkte */
.btr-nu-hinweis { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--wb-linie); background: var(--wb-weich); font-size: 13px; color: var(--wb-leise); }
.btr-nu-inhalt { display: flex; flex-direction: column; gap: 14px; }   /* einspaltig wie im Kunden-AIOS, „Quelle“ rechts */
.btr-nu-inhalt b { display: block; margin-bottom: 4px; font-size: 14px; }
.btr-nu-inhalt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.btr-nu-inhalt li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-left: 14px; position: relative; font-size: 14px; }
.btr-nu-inhalt li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--wb-leise); }
.btr-nu-kern { display: flex; flex-direction: column; gap: 10px; }
.btr-nu-kern b { font-size: 14px; }
.btr-nu-kern p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }
.btr-nu-ant { display: block; margin-top: 2px; font-size: 12.5px; color: var(--wb-leise); }
.btr-p-liste li.geklaert::before { background: var(--marke-ok); }
.btr-p-li-t b { font-weight: 700; }

/* KI neu bewerten */
.btr-nu-bewfuss { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 12.5px; color: var(--wb-leise); }
.btr-nu-bewfuss .hervor { background: var(--marke-nav-blau); border-color: var(--marke-nav-blau); color: #fff; }

/* Das Protokoll wartet */
.btr-nu-wartet { max-width: 620px; margin: 0 auto; padding: 24px 4px 16px; display: flex; flex-direction: column; gap: 14px; color: var(--wb-text); }
.btr-nu-w-titel { margin: 0; font-size: 20px; font-weight: 700; }
.btr-nu-w-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wb-leise); }
.btr-nu-w-karte { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--wb-linie); background: var(--wb-weich); }
.btr-nu-feld > span i { font-style: normal; font-weight: 400; color: var(--wb-leise); }
.btr-nu-feld.fehlt > span { color: var(--marke-gefahr); }
.btr-nu-feld.fehlt .btr-n-eingabe { box-shadow: inset 0 0 0 1px var(--marke-gefahr); }
.btr-nu-w-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.btr-nu-w-klein { margin: 0; font-size: 12px; color: var(--wb-leise); }
.btr-nu-lauf { padding-top: 48px; }

@media (max-width: 700px) {
  .btr-nu-az { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; }
  .btr-nu-az.btr-p-kopfz { display: none; }
  .btr-nu-az .btr-p-w, .btr-nu-az .btr-p-d { grid-column: 2; }
  .btr-nu-az .btr-p-w::before, .btr-nu-az .btr-p-d::before { content: attr(data-l) ": "; font-weight: 400; color: var(--wb-leise); margin-right: 4px; }
  .btr-nu-az .btr-p-w:empty, .btr-nu-az .btr-p-d:empty { display: none; }
  .btr-nu-az .btr-p-t { grid-column: 2; }
  .btr-nu-hk { align-self: start; padding-top: 2px; }
  .btr-nu-hliste li { flex-direction: column; gap: 2px; }
  .btr-nu-hliste .btr-nu-chip { min-width: 0; }
}

/* Direkt im Text änderbar (Protokoll, Beta): Felder sehen aus wie Text, zeigen beim Darüberfahren/Anklicken, dass sie änderbar sind */
.btr-ed { display: inline; padding: 1px 3px; margin: 0 -3px; border-radius: var(--marke-r-s, 6px); outline: none; cursor: text; overflow-wrap: anywhere; transition: background .12s; }
.btr-ed:hover { background: var(--wb-weich, var(--bs-weich)); }
.btr-ed:focus { background: var(--wb-karte, var(--marke-flaeche)); box-shadow: inset 0 0 0 1px var(--marke-nav-blau), 0 0 0 3px color-mix(in srgb, var(--marke-nav-blau) 16%, transparent); }
.btr-ed:empty::before { content: attr(data-ph); color: var(--wb-leise, var(--bs-leise)); }
.btr-ed-block { display: block; min-height: 3em; white-space: pre-wrap; }
.btr-nu-weg { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--marke-r-s, 6px); background: none; color: var(--wb-leise, var(--bs-leise)); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
li:hover > .btr-p-li-r .btr-nu-weg, .btr-nu-az:hover .btr-nu-weg, .btr-nu-weg:focus-visible { opacity: 1; }
.btr-nu-weg:hover { background: var(--wb-weich, var(--bs-weich)); color: var(--marke-gefahr); }
@media (hover: none) { .btr-nu-weg { opacity: .7; } }
.btr-nu-plus { margin: 8px 8px 0 0; padding: 5px 12px; border: 1px dashed var(--marke-linie); border-radius: var(--marke-r-pill, 999px); background: none; color: var(--wb-leise, var(--bs-leise)); font: 600 12px var(--marke-schrift); cursor: pointer; }
.btr-nu-plus:hover { color: var(--marke-nav-blau); border-color: var(--marke-nav-blau); }
.btr-nu-pluszeile { display: flex; flex-wrap: wrap; }

/* Score-Karte mit Herausforderungen (eine Karte wie im Kunden-AIOS) */
.btr-p-bew-r { flex: 1 1 auto; gap: 6px; }
.btr-nu-bewz { font-size: 13px; color: var(--wb-leise); }
.btr-nu-bewz b { color: var(--wb-text); }
.btr-p-bew-r .btr-nu-stapel { margin: 0; }
.btr-nu-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--wb-leise); }
.btr-nu-leg i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; }
.btr-nu-leg i.ok { background: var(--marke-ok); } .btr-nu-leg i.warn { background: var(--marke-warn); } .btr-nu-leg i.gefahr { background: var(--marke-gefahr); }
.btr-nu-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.btr-nu-pille { padding: 1px 9px; border-radius: 999px; font: 600 11.5px var(--marke-schrift); }
.btr-nu-pille.gefahr { background: color-mix(in srgb, var(--marke-gefahr) 10%, transparent); color: var(--marke-gefahr); }
.btr-nu-pille.warn { background: color-mix(in srgb, var(--marke-warn) 14%, transparent); color: color-mix(in srgb, var(--marke-warn) 80%, var(--wb-text)); }

/* Übernahme: „In den Plan“ als Hauptweg, „in meine Liste“ als zweite Wahl */
.btr-nu-fuss.bs-d-aktion { position: static; padding: 0; background: none; border: 0; }
.btr-nu-zweit { padding: 6px 12px; border-radius: var(--marke-r-s, 8px); border: 1px solid var(--wb-linie); background: none; color: var(--wb-text); font: 600 12px var(--marke-schrift); cursor: pointer; }
.btr-nu-zweit:hover:not(:disabled) { background: var(--wb-weich); }
.btr-nu-zweit:disabled { opacity: .5; cursor: default; }
/* Teilnehmer änderbar, Funktion darunter */
.btr-nu-stift { margin-left: 6px; padding: 0 4px; border: 0; background: none; color: var(--wb-leise); font-size: 12px; cursor: pointer; }
.btr-nu-stift:hover { color: var(--marke-nav-blau); }
.btr-p-tnp { display: flex; flex-direction: column; min-width: 0; }
.btr-p-tnp small { color: var(--wb-leise); font-size: 11.5px; }
.btr-p-tnp small:empty { display: none; }