/*
  workspace-bento-transkription-angaben.css — Gestaltung für Teilnehmer-Karten, Angaben/Anhänge während der Aufnahme, Wartezustand,
  einklappbare Liste, Score-Ring und das Fenster „Protokoll neu erstellen" (Bereich „Transkription", Menü-Modus)

  Kurzbeschreibung (für Laien): Ralph, 07.11.2026 — die Transkription soll sich bedienen wie im AIOS. Hier stehen nur Maße und
  Farben (alles aus der Marke): die Teilnehmer als kleine Karten mit Abteilung und ✕, das Angaben-Feld und die Anhänge unter der
  blauen Aufnahme-Karte, die Welle im Wartezustand, der Kopf „Meine Besprechungen" der zuklappbar ist (Computer: schmale Leiste,
  Handy unter 1000 px: Formular/Aufnahme/Protokoll stehen oben, die Liste klappt darunter auf), der Score als Ring in der Liste und
  das Fenster „Neu erstellen". Die Logik liegt in workspace-bento-transkription-angaben.js und workspace-bento-transkription.js.
*/

/* ── Teilnehmer als Karten ── */
.btr-tn-eingabe { position: relative; }
.btr-tn-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-top: 8px; min-width: 0; }
.btr-tn-liste:empty { display: none; }
.btr-tn-karte { position: relative; min-width: 0; padding: 8px 30px 8px 12px; border-radius: var(--marke-r-m); background: var(--wb-weich, var(--bs-weich)); font: 400 13px/1.3 var(--marke-schrift); color: var(--wb-text, var(--bs-text)); }
.btr-tn-karte b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btr-tn-karte small { display: block; margin-top: 1px; font-size: 12px; color: var(--wb-leise, var(--bs-leise)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btr-tn-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--marke-r-s, 6px); background: transparent; color: var(--wb-leise, var(--bs-leise)); font-size: 12px; line-height: 1; cursor: pointer; }
.btr-tn-x:hover { color: var(--marke-gefahr); background: color-mix(in srgb, var(--marke-gefahr) 10%, transparent); }
.btr-tn-x:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; }

/* ── Angaben + Anhänge unter der blauen Karte (Aufnahme läuft) ── */
.btr-n-angaben-hinweis { display: none; margin: 0; font-size: 13px; line-height: 1.5; color: var(--wb-leise, var(--bs-leise)); }
.btr-n-frist { margin: 0; font-size: 12px; color: var(--wb-leise, var(--bs-leise)); }
.btr-n-anh:empty { display: none; }
.btr-n-anh h3 { margin: 0 0 8px; font: 600 15px/1.3 var(--marke-schrift); color: var(--wb-text, var(--bs-text)); }
.btr-anh-hinweis { margin: 6px 0 0; font-size: 12px; color: var(--wb-leise, var(--bs-leise)); }
.btr-zieh { outline: 2px dashed var(--marke-nav-blau); outline-offset: 4px; border-radius: var(--marke-r-m); }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-angaben,
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-anh { display: flex; padding: 16px; border-radius: var(--marke-r-m); border: 1px solid var(--marke-linie); background: var(--wb-karte, transparent); grid-row: auto; }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-angaben { grid-column: 1; }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-anh { grid-column: 2; }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-anh:empty { display: none; }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an .btr-n-angaben > .btr-n-titel { display: block; }
#bsBereich[data-bereich="transkription"] .btr-n-m.btr-n-lage-an .btr-n-angaben-hinweis { display: block; }
@media (max-width: 1000px) {
  #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an { grid-template-columns: minmax(0, 1fr); }
  #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-angaben,
  #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-anh { grid-column: 1; }
}

/* ── Wartezustand „Protokoll wird erstellt" ── */
.btr-warten { max-width: 560px; margin: 0 auto; padding: 28px 8px 8px; text-align: center; color: var(--wb-leise, var(--bs-leise)); font-size: 13px; line-height: 1.6; }
.btr-warten h3 { margin: 0 0 4px; font: 600 15px/1.3 var(--marke-schrift); color: var(--wb-text, var(--bs-text)); }
.btr-warten p { margin: 0; }
.btr-welle { display: flex; gap: 4px; justify-content: center; align-items: center; height: 34px; margin-bottom: 12px; }
.btr-welle i { width: 5px; height: 8px; border-radius: 3px; background: var(--marke-nav-blau); opacity: .4; animation: btrWelle 1.1s ease-in-out infinite; }
.btr-welle i:nth-child(2) { animation-delay: .1s; }
.btr-welle i:nth-child(3) { animation-delay: .2s; }
.btr-welle i:nth-child(4) { animation-delay: .3s; }
.btr-welle i:nth-child(5) { animation-delay: .4s; }
@keyframes btrWelle { 0%, 100% { height: 8px; opacity: .4; } 50% { height: 32px; opacity: 1; } }
.btr-wartekarte { margin: 18px 0 14px; padding: 12px 16px; text-align: left; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); background: var(--wb-weich, var(--bs-weich)); font-size: 13px; line-height: 1.5; }
.btr-wartekarte dt { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wb-leise, var(--bs-leise)); }
.btr-wartekarte dt:first-child { margin-top: 0; }
.btr-wartekarte dd { margin: 0; color: var(--wb-text, var(--bs-text)); white-space: pre-wrap; overflow-wrap: anywhere; }
.btr-leise { color: var(--wb-leise, var(--bs-leise)); font-size: 12px; }

/* ── Liste: Kopf „Meine Besprechungen N", einklappbar ── */
.btr-lkopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.btr-lkopf h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; font: 600 11px/1.3 var(--marke-schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--wb-leise, var(--bs-leise)); }
.btr-zu { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--marke-r-s, 6px); background: transparent; color: var(--wb-leise, var(--bs-leise)); cursor: pointer; }
.btr-zu { margin-left: auto; flex: none; }
.btr-zu:hover { background: var(--wb-weich, var(--bs-weich)); color: var(--wb-text, var(--bs-text)); }
.btr-zu:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; }
.btr-zu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Zugeklappt (Ralph 08.11.2026): es gibt genau EINEN Knopf, den kleinen Pfeil im Kopf der Liste. Zugeklappt bleibt er an exakt derselben Stelle (oben rechts)
   und dreht nur die Richtung (› wird ‹); Überschrift und Liste sind weg, die Arbeitsfläche hat die volle Breite. */
.btr-wss.btr-liste-zu { position: relative; }
:root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.btr-liste-zu > .wss-spalte, .btr-wss.btr-liste-zu .wss-spalte { position: absolute; right: 0; top: 0; z-index: 6; width: auto; height: auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.btr-wss.btr-liste-zu .wss-spalte > :not(.btr-lkopf) { display: none; }
.btr-wss.btr-liste-zu .btr-lkopf { padding: 0; border: 0; background: none; }
.btr-wss.btr-liste-zu .btr-lkopf > :not(.btr-zu) { display: none; }
.btr-wss.btr-liste-zu .btr-zu svg { transform: rotate(180deg); }
@media (min-width: 1001px) {
  :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei.btr-liste-zu { grid-template-columns: minmax(0, 1fr); }
}
/* Die senkrechte Trennlinie gibt es nur bei aufgeklappter Liste; der Knopf sitzt oben, die Kopfzeile des Protokolls weicht ihm aus */
:root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei.btr-liste-zu > .wss-detail { border-right: 0; border-left: 0; padding-right: 0; }
.btr-wss.btr-liste-zu .wss-detail .btr-p-kopf, .btr-wss.btr-liste-zu .wss-detail .btr-n-kopf { padding-right: 40px; }
@media (max-width: 1000px) {
  /* Handy: Formular, Aufnahme-Karte und Protokoll oben, darunter die Kopfzeile, die die Liste aufklappt */
  :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--marke-sp-3); }   /* oben das Protokoll/Formular (scrollt für sich), unten die Kopfzeile bzw. die aufgeklappte Liste */
  :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei > .wss-detail { order: 1; border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; min-height: 0; overflow-y: auto; }
  :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei > .wss-spalte { order: 2; }
  :root.wb-menue-modus #bsBereich .btr-wss .wss-liste { max-height: 36vh; }
  .btr-lkopf { padding: 10px 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); cursor: pointer; }
  .btr-zu svg { transform: rotate(90deg); }
  .btr-liste-zu .btr-zu svg { transform: rotate(-90deg); }
  :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei.btr-liste-zu { grid-template-rows: minmax(0, 1fr); row-gap: 0; }
}

/* ── Score als Ring in der Liste (statt Mikrofon-Symbol) ── */
.wss-sym.btr-score { position: relative; background: none; color: var(--wb-text, var(--bs-text)); }
.btr-score svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.btr-score circle { fill: none; stroke-width: 3; }
.btr-score .spur { stroke: var(--marke-linie); }
.btr-score .wert { stroke-linecap: round; stroke: var(--marke-ok); }
.btr-score-warn .wert { stroke: var(--marke-warn); }
.btr-score-gefahr .wert { stroke: var(--marke-gefahr); }
.btr-score b { position: relative; font: 700 11px/1 var(--marke-schrift); font-variant-numeric: tabular-nums; }

/* ── Fenster „Protokoll neu erstellen" ── */
.btr-neu-dlg .a4h-btn--primary { background: var(--marke-nav-blau); border-color: var(--marke-nav-blau); color: #fff; }   /* blauer Hauptknopf wie „Aufnahme starten“ */
.btr-neu-dlg .a4h-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--marke-nav-blau) 86%, #000); }
.btr-neu-dlg .a4h-modal-body { display: flex; flex-direction: column; gap: 8px; }
.btr-neu-satz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--marke-text-2); }
.btr-neu-label { font-size: 12px; font-weight: 600; }
.btr-neu-feld { width: 100%; min-height: 76px; resize: vertical; box-sizing: border-box; font: 400 13px/1.45 var(--marke-schrift); }
.btr-neu-kopf { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--marke-text-2); }
.btr-neu-hw { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px 6px 10px; border-radius: var(--marke-r-s, 6px); background: color-mix(in srgb, currentColor 6%, transparent); font-size: 13px; line-height: 1.4; }
.btr-neu-hw span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.btr-neu-x { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--marke-r-s, 6px); background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.btr-neu-x:hover { opacity: 1; color: var(--marke-gefahr); }
@media (prefers-reduced-motion: reduce) { .btr-welle i { animation: none; height: 20px; opacity: .8; } }

/* Schmale Bildschirme: Mikrofon-Auswahl bekommt eine eigene Zeile, Test und Start stehen darunter (sonst blieb vom Feld nur ein „S" übrig) */
@media (max-width: 600px) {
  #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-mik-m { flex-wrap: wrap; }
  #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-mik-m select { flex: 1 1 100%; }
  #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-mik-m .btr-n-test { flex: 1 1 0; width: auto; }
  #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-mik-m .btr-n-start { flex: 1 1 0; margin-left: 0; }
}

/* Während der Aufnahme (Ralph 07.11.2026): Angaben-Karte über die ganze Breite, Anhänge nur noch als kleiner Knopf „+ Anhang" darunter */
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an { grid-template-columns: minmax(0, 1fr); }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-angaben { grid-column: 1; }
#bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m.btr-n-lage-an > .btr-n-anh { grid-column: 1; display: block; margin-top: -6px; padding: 0; border: 0; background: transparent; }
#bsBereich[data-bereich="transkription"] .btr-n-m.btr-n-lage-an .btr-n-anh h3,
#bsBereich[data-bereich="transkription"] .btr-n-m.btr-n-lage-an .btr-n-anh .bs-hinweis,
#bsBereich[data-bereich="transkription"] .btr-n-m.btr-n-lage-an .btr-n-anh .btr-anh-hinweis { display: none; }
#bsBereich[data-bereich="transkription"] .btr-n-m.btr-n-lage-an .btr-n-anh [data-anh-neu] { height: 32px; padding: 0 12px; font-size: 0; }
#bsBereich[data-bereich="transkription"] .btr-n-m.btr-n-lage-an .btr-n-anh [data-anh-neu]::after { content: "+ Anhang"; font: 600 13px var(--marke-schrift); }
#bsBereich[data-bereich="transkription"] .btr-n-titelzeile .btr-n-titelfeld { flex: 1 1 0; min-width: 0; }
#bsBereich[data-bereich="transkription"] .btr-n-titelzeile .btr-n-titelfeld .btr-n-eingabe { width: 100%; box-sizing: border-box; }
/* Wartezustand kompakter wie im Kunden-AIOS (Ralph 07.11.2026) */
.btr-warten { padding-top: 48px; }
.btr-warten .btr-wartekarte { max-width: 520px; margin: 16px auto 12px; padding: 12px 14px; }
.btr-warten .btr-wartekarte dd { margin-bottom: 2px; }
/* Wartezustand „Protokoll wird erstellt": Block senkrecht etwas mittig, mehr Luft zwischen den Teilen, Knöpfe zentriert darunter (Ralph 08.11.2026) */
.btr-warten { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46vh; padding-top: 24px; }
.btr-warten .btr-welle { margin-bottom: 26px; }
.btr-warten h3 { margin-bottom: 10px; }
.btr-warten .btr-wartekarte { width: 100%; box-sizing: border-box; margin: 24px auto 20px; }
.btr-warten .btr-leise { margin-top: 6px; }
.btr-warten > p:not(.btr-leise) { max-width: 440px; }
#bsBereich[data-bereich="transkription"] .bs-d-aktion.btr-warte-akt, .btr-wss .wss-detail .bs-d-aktion.btr-warte-akt { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 8px; }
/* Mitschrift ansehen: Kopfzeile mit Zurück, darunter ein Lesefeld, nur dieses scrollt (Ralph 08.11.2026) */
.btr-ms { display: flex; flex-direction: column; gap: var(--marke-sp-3, 12px); min-height: 0; height: 100%; }
.btr-ms-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.btr-ms-kopf .bs-d-titel { margin: 0; flex: 1 1 auto; min-width: 0; }
.btr-ms-laden { border: 0; background: none; padding: 4px 6px; font: 500 12px var(--marke-schrift); color: var(--wb-leise, var(--bs-leise)); text-decoration: underline; cursor: pointer; }
.btr-ms-laden:hover:not(:disabled) { color: var(--wb-text, var(--bs-text)); }
.btr-ms-laden:disabled { opacity: .5; cursor: default; }
.btr-ms-text { flex: 1 1 auto; min-height: 220px; max-height: 72vh; overflow: auto; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); background: var(--wb-karte, var(--marke-flaeche)); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.65 var(--marke-schrift); color: var(--wb-text, var(--bs-text)); }
.btr-ms-text:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; }
@media (max-width: 700px) { .btr-ms-kopf .bs-d-titel { flex-basis: 100%; order: 3; } .btr-ms-text { padding: 12px; font-size: 13.5px; } }