/*
  workspace-bento-innenbentos.css — Gestaltung der Bentos, in denen man direkt arbeitet: „Transkription" (aufnehmen)
  und „Notizen" (schreiben) — Logik: workspace-bento-transkription-bento.js, workspace-bento-notizen-bento.js.

  Kurzbeschreibung (für Laien): Ralph, 25.10.2026 — „Was ein Bento anbietet, passiert direkt im Bento." Kein neuer Look:
  Knöpfe sind die Bento-Knöpfe (zk-knopf, Hauptknopf dunkel, auf farbigen Bentos weiße Pille mit dunkler Schrift),
  Listen die Bento-Zeilen (zk-zeile mit Hover), Felder wie das Eingabefeld der Chat-Kachel, Ladekreis 30 px zentriert,
  Pegel in Aufnahme-Rot (kein Signal: Warnfarbe), Stopp in Aufnahme-Rot wie im Bereich „Neue Aufnahme".
  Nie seitlich scrollen: lange Inhalte scrollen im Bento nach unten.
*/
.ib-host { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.ib { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; font: 400 13px/1.4 var(--marke-schrift); color: var(--wb-text); }
.ib > div { min-height: 0; }
.ib .zk-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
.ib .zk-knopf svg, .ib .a4h-icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ib-leise { color: var(--wb-leise); font-size: 12px; }
.ib-eine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-luecke { flex: 1; }
.ib-mitte { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; }
.ib-mitte .a4h-spin, .ib-lade .a4h-spin { color: var(--marke-ladekreis); }
.ib-msg { font-size: 12px; color: var(--wb-leise); min-height: 0; }
.ib-msg:empty { display: none; }
.ib-msg.rot { color: var(--wb-rot); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .ib-msg.rot { color: var(--wb-text); font-weight: 600; }
.ib-kopfzeile, .ib-fuss, .ib-zeile { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.ib-fuss { flex-wrap: wrap; justify-content: flex-end; }
.ib-unter { font-size: 12px; font-weight: 600; color: var(--wb-leise); flex: none; }
.ib-liste { flex: 1 1 auto; }
.ib-liste .ib-leise { padding: 6px 8px; }
.ib-liste small { display: inline-flex; align-items: center; gap: 4px; }
.ib-neu .zk-t { font-weight: 700; }
/* Titel im Kopf: einziger Weg in den vollen Bereich */
.wb-k:is([data-id="seite-transkription"], [data-id="notizen"], [data-id="seite-p-notizen"]) .wk-titel { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.wb-k:is([data-id="seite-transkription"], [data-id="notizen"], [data-id="seite-p-notizen"]) .wk-titel:hover { text-decoration-color: currentColor; }

/* ── Felder (wie die Eingabe der Chat-Kachel) ── */
.ib-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; flex: none; }
.ib-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ib-feld > span { font-size: 12px; font-weight: 600; color: var(--wb-leise); }
.ib-feld input, .ib-titel-feld { height: 32px; border: 0; outline: 0; border-radius: var(--marke-r-m); background: var(--wb-feld, var(--wb-weich)); color: var(--wb-text);
  font: 400 13px var(--marke-schrift); padding: 0 12px; min-width: 0; box-sizing: border-box; transition: box-shadow .15s; }
.ib-feld input::placeholder { color: var(--wb-leise); }
.ib-feld input:hover, .ib-titel-feld:hover { box-shadow: 0 0 0 1px var(--wb-linie); }
.ib-feld input:focus-visible, .ib-titel-feld:focus-visible, .ib-editor:focus-visible { box-shadow: 0 0 0 2px var(--marke-akzent); }

/* ── Transkription: Start ── */
.ib-start { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ib-mit[data-gr="s"] .ib-start { justify-content: center; }
.ib .zk-knopf.ib-gross { height: auto; min-height: 44px; width: 100%; padding: 8px 16px; font-size: 13px; white-space: normal; line-height: 1.25; text-align: center; }
.ib .zk-knopf.ib-gross svg { width: 18px; height: 18px; }
.ib-mit[data-gr="s"] .zk-knopf.ib-gross { flex-direction: column; gap: 6px; min-height: 72px; border-radius: var(--marke-r-l); }
/* Pflicht-Haken (§ 201 StGB) — wie im Bereich „Neue Aufnahme", kompakt */
.ib-form { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ib-haken { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--marke-r-m); background: var(--wb-weich); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent);
  font-size: 12px; line-height: 1.4; cursor: pointer; flex: none; transition: background .15s; }
.ib-haken:hover { background: color-mix(in srgb, var(--wb-text) 9%, var(--wb-karte)); }
.ib-haken input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--marke-nav-blau); cursor: pointer; }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .ib-haken { background: #fff; color: var(--marke-grafit); }
/* Aufnahme läuft */
.ib-auf { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; justify-content: center; }
.ib-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--marke-aufnahme); white-space: nowrap; }
.ib-rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--marke-aufnahme); flex: none; animation: ibPuls 1.6s infinite; }
.ib-auf.pause .ib-rec { color: var(--wb-leise); }
.ib-auf.pause .ib-rec i { background: var(--marke-linie-stark); animation: none; }
@keyframes ibPuls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marke-aufnahme) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ib-rec i { animation: none; } }
.ib-uhr { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ib-mit[data-gr="s"] .ib-uhr { font-size: 15px; }
.ib-pegel { display: flex; align-items: center; justify-content: center; gap: 3px; height: 28px; flex: none; overflow: hidden; }
.ib-pegel span { flex: 0 0 4px; height: 4px; border-radius: 2px; background: var(--marke-aufnahme); transition: height 80ms linear; }
.ib-pegel.still span { background: var(--marke-warn); }
.ib-auf.pause .ib-pegel span { background: var(--marke-linie-stark); }
.ib .zk-knopf.ib-stopp, .wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .ib .zk-knopf.ib-stopp { background: var(--marke-aufnahme); color: #fff; }
.ib .zk-knopf.ib-stopp:hover { background: color-mix(in srgb, var(--marke-aufnahme) 86%, #000); }
.ib-mit[data-gr="s"] .ib-fuss .ib-stopp { flex: 1; }
/* Protokoll wird erstellt */
.ib-lade { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 0; }
.ib-lade > span { font-weight: 600; }
.ib-lade > small { color: var(--wb-leise); font-size: 12px; }
.ib-lade.klein { flex: none; padding: 12px 0; }
/* Protokoll lesen */
.ib-lesen { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ib-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.ib-lt { font-size: 14px; font-weight: 700; }
.ib-teil { display: flex; flex-direction: column; gap: 4px; }
.ib-teil > b { font-size: 12px; font-weight: 700; }
.ib-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-punkte { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }

/* ── Notizen ── */
.ib-schreiben { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1 1 auto; }
.ib-editor { flex: 1 1 auto; min-height: 44px; overflow-y: auto; overflow-x: hidden; outline: 0; border-radius: var(--marke-r-l); background: var(--wb-feld, var(--wb-weich));
  padding: 8px 12px; font: 400 13px/1.45 var(--marke-schrift); color: var(--wb-text); overflow-wrap: anywhere; cursor: text; transition: box-shadow .15s; }
.ib-editor:hover { box-shadow: 0 0 0 1px var(--wb-linie); }
.ib-editor p, .ib-editor div { margin: 0; }
.ib-editor:is(:empty, .leer)::before { content: attr(data-platzhalter); color: var(--wb-leise); pointer-events: none; }
.ib-editor:not([contenteditable]) { cursor: default; }
.ib-titel-feld { flex: none; font-weight: 700; }
.ib-titel-feld[readonly] { background: none; padding: 0; }
.ib-stand { white-space: nowrap; }
.ib-status { font-size: 12px; color: var(--wb-leise); display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ib .a4h-icon-btn { width: 30px; height: 30px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); color: var(--wb-text); display: inline-grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: background .15s; }
.ib .a4h-icon-btn:hover { background: color-mix(in srgb, var(--wb-text) 10%, var(--wb-karte)); }
.ib .a4h-icon-btn.recording { background: var(--marke-aufnahme); color: #fff; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .ib .a4h-icon-btn:not(.recording) { background: #fff; color: var(--marke-grafit); }
.ib-pegel.klein { display: none; height: 24px; flex: none; width: 46px; gap: 2px; }
.ib-pegel.klein.an { display: inline-flex; }
.ib-proxy { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; overflow: hidden; }
.ib-kontext .ib-gefahr { color: var(--marke-gefahr); }
/* Breit (eine Reihe): Schreibfeld links, Liste rechts */
.ib-notiz[data-gr="m"][data-phase="neu"] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.ib-notiz:not([data-gr="s"]) .ib-start { flex: none; }   /* ab breit trägt der Anfang nur noch die Meldung – das ＋ sitzt seit 28.10.2026 im Kopf; die Liste bekommt die Höhe */
.ib-notiz[data-gr="m"] .ib-liste { margin: 0; }
.ib-notiz[data-gr="m"] .ib-liste .zk-zeile:first-child { border-top: 0; }
.ib-notiz[data-phase="lesen"] { overflow: hidden; }
.ib-notiz[data-gr="l"][data-phase="neu"] .ib-schreiben { flex: 0 1 46%; }
/* Farbige Bentos: Schrift hell, nur der Punkt bleibt Aufnahme-Rot */
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .ib-rec { color: var(--wb-text); }
/* Bento „Wissen" (workspace-bento-wissen-bento.js, Ralph 26.10.2026 – wie AIOS bento-wissen-upload.css): Ablegen per Ziehen,
   Fortschritt unten. Das ＋ „Wissen hinzufügen" steht seit 28.10.2026 oben rechts im Kopf (workspace-bento.css .wb-kopfplus). */
.ibw-liste { flex: 1 1 0; }
.wb-k.ibw-ziel { box-shadow: 0 0 0 2px var(--wb-akzent); }
.ibw-ablage { position: absolute; inset: 6px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none;
  border: 2px dashed var(--wb-akzent); border-radius: var(--marke-r-l); background: color-mix(in srgb, var(--wb-akzent) 10%, var(--wb-karte)); color: var(--wb-akzent); font-weight: 700; font-size: 14px; }
.ibw-ablage svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ibw-status { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 5px; padding: 7px 10px; cursor: pointer;
  border-radius: var(--marke-r-m); background: var(--wb-karte); color: var(--wb-text); box-shadow: 0 6px 20px color-mix(in srgb, var(--wb-text) 16%, transparent); font-size: 12px; font-weight: 600; line-height: 1.35; }
.ibw-status > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ibw-status.rot { color: var(--wb-rot); }
.ibw-balken { display: block; height: 4px; border-radius: 4px; background: var(--wb-weich); overflow: hidden; }
.ibw-balken > b { display: block; height: 100%; min-width: 8%; border-radius: 4px; background: var(--wb-akzent); transition: width .3s; }

/* ── Home-Bentos mit Kennzahl + Diagramm (Ralph 27.10.2026: „mehr Fleisch") ── Kontakte, Wissen, Planer, Transkription,
   Team-Chat, Kalender (Logik je in der eigenen Datei). Kein neuer Look: Säulen sind die Bento-Säulen (zk-saeulen aus
   workspace-bento-kacheln.css, Wert über jeder Säule), Zahlen zk-gross wie Zeiterfassung/Aufgaben. Nur Marken-Variablen. */
.hk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; flex: none; }
.hk-kopf > .wk-l, .hk-kopf > .wk-kopf { min-width: 0; }
.hk-reihe { display: flex; align-items: baseline; gap: 8px; flex: none; min-width: 0; }
.hk-reihe .wk-s { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-reihe .zk-gross { flex: none; }
/* kompakte Säulen für 1×1 und 2×1 */
.zk-saeulen.hk-mini { min-height: 40px; max-height: 120px; gap: 4px; padding-top: 14px; }
.zk-saeulen.hk-mini .zk-sb { max-width: 22px; }
.zk-saeulen.hk-mini .zk-sl { font-size: 10px; }
.zk-saeulen.hk-mini .zk-sw { font-size: 10px; }
.hk-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; flex: 1; min-height: 0; }
.hk-zwei > div { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 6px; }
.hk-unter { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--wb-leise); flex: none; display: flex; justify-content: space-between; gap: 8px; }
.hk-unter small { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Aufteilung als ein Balken mit Legende (Status, Dateiart) */
.hk-anteil { display: flex; height: 8px; border-radius: var(--marke-r-pill); overflow: hidden; background: var(--wb-weich); flex: none; gap: 2px; }
.hk-anteil i { display: block; height: 100%; min-width: 4px; }
.hk-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--wb-leise); flex: none; min-width: 0; }
.hk-legende span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hk-legende b { color: var(--wb-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hk-legende i, .hk-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.hk-f1 { background: var(--wb-akzent); } .hk-f2 { background: var(--marke-logo-tuerkis); } .hk-f3 { background: var(--marke-lila); }
.hk-f4 { background: var(--marke-warn); } .hk-f5 { background: var(--marke-ok); } .hk-f0 { background: var(--marke-text-3); }
/* Dateiart als kleines Etikett (PDF, XLSX, …) */
.hk-typ { flex: none; min-width: 38px; padding: 2px 6px; box-sizing: border-box; border-radius: var(--marke-r-s); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-align: center;
  color: var(--hk-t, var(--wb-leise)); background: color-mix(in srgb, var(--hk-t, var(--wb-leise)) 13%, transparent); }
.hk-typ.pdf { --hk-t: var(--marke-gefahr); } .hk-typ.xls { --hk-t: var(--marke-ok); } .hk-typ.doc { --hk-t: var(--wb-akzent); }
.hk-typ.ppt { --hk-t: var(--marke-warn); } .hk-typ.web { --hk-t: var(--marke-logo-tuerkis); } .hk-typ.txt { --hk-t: var(--marke-lila); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .hk-typ { --hk-t: var(--wb-text); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) :is(.hk-f1, .hk-f2, .hk-f3, .hk-f4, .hk-f5, .hk-f0) { background: var(--wb-text); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .hk-anteil i:nth-child(2n) { opacity: .55; }
/* Wochenstreifen (Kalender): je Tag Wochentag, Datum, Zahl der Termine als Punkte */
.hk-woche { display: grid; grid-template-columns: repeat(var(--hk-tage, 5), minmax(0, 1fr)); gap: 6px; flex: none; }
.hk-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 7px; border-radius: var(--marke-r-m); background: var(--wb-weich); min-width: 0;
  border: 0; font: inherit; color: var(--wb-text); }
.hk-tag small { font-size: 11px; color: var(--wb-leise); }
.hk-tag b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hk-tag .hk-pkte { display: flex; gap: 3px; height: 6px; align-items: center; }
.hk-tag .hk-pkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--wb-akzent); }
.hk-tag .hk-pkte em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--wb-akzent); line-height: 1; }
.hk-tag.heute { background: var(--wb-akzent); color: var(--wb-auf-farbe, var(--marke-auf-akzent)); }
.hk-tag.heute small { color: inherit; opacity: .8; }
.hk-tag.heute .hk-pkte i { background: currentColor; } .hk-tag.heute .hk-pkte em { color: inherit; }
.hk-tag.vorbei { opacity: .55; }
.hk-woche.klein { gap: 3px; } .hk-woche.klein .hk-tag { padding: 4px 1px 5px; } .hk-woche.klein .hk-tag b { font-size: 13px; }
/* Team-Chat: Raum mit letzter Nachricht (Absender, Text, Zeit) */
.hk-raum { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hk-raum .hk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.hk-raum .hk-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-raum .hk-txt span { font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-raum.neu .hk-txt b, .hk-raum.neu .hk-txt span { color: var(--wb-text); }
.hk-raum.neu .hk-txt b { font-weight: 800; }
.hk-raum .hk-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hk-raum .hk-rechts small { font-size: 11px; color: var(--wb-leise); }
.hk-kuerzel { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
  background: var(--wb-akzent-zart); color: var(--wb-akzent); }
.wb-k:is(.kraeftig, .blau, .dunkel, [data-flaeche="farbig"]) .hk-kuerzel { background: var(--wb-weich); color: var(--wb-text); }
/* Team-Chat: Raum im Bento (Verlauf + Antworten) */
.hk-verlauf { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.hk-n { max-width: 86%; align-self: flex-start; padding: 6px 10px; border-radius: var(--marke-r-l); background: var(--wb-weich); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.hk-n.eigen { align-self: flex-end; background: var(--wb-blase-du, var(--wb-akzent-zart)); }
.hk-n small { display: block; font-size: 11px; color: var(--wb-leise); margin-bottom: 1px; }
.hk-n.geloescht { font-style: italic; color: var(--wb-leise); }
.hk-eingabe { display: flex; gap: 6px; align-items: center; flex: none; }
.hk-eingabe input { flex: 1; min-width: 0; }
.hk-zwei.hk-fest { flex: none; }
.hk-fest .zk-saeulen, .zk-saeulen.hk-fest { flex: none; height: 96px; max-height: none; }
/* Kennzahl-Zusatz („keine neuen in 30 Tagen“) bricht um statt mit „…“ abzuschneiden */
.hk-reihe { flex-wrap: wrap; row-gap: 0; }
.hk-reihe .wk-s { white-space: normal; overflow: visible; text-overflow: clip; }