/* workspace-bento-transkription.css — Zusatz-Gestaltung des Bereichs „Transkription" in der Bento-Ansicht (Logik: workspace-bento-transkription.js). Kurzbeschreibung (für Laien): Ralph, 24.10.2026 (BENTO-REGELN). Der Bereich nutzt die gemeinsame Vorlage (workspace-bento-seite.css) mit eigenem Inhalt: ein Raster wie auf der Bento-Startseite (Reihen 168 px, 16 px Luft, Ecken 22 px), vorne eine kleine Filter-Kachel „Alle | Fertig | In Arbeit", je Besprechung eine Kachel mit Farbkante links nach Stand (fertig grün, in Verarbeitung blau, unterbrochen gelb, fehlgeschlagen rot), am Ende die gestrichelte „+"-Kachel für eine neue Aufnahme. Keine Kennzahl-Leiste, keine Werkzeug-Leiste. Nie seitlich scrollen. „Neue Aufnahme" groß: kein weißes Blatt, sondern Kacheln auf dem grauen Grund (wie die Einstellungen) — blaue Kopfkarte, Angaben, Pflicht-Hinweis (roter Rand links wie a4h-pflicht, wird bei fehlendem Haken rot hinterlegt), Aufnahme mit Mikrofon-Pillen, Pegel in Aufnahme-Rot (still: Warnfarbe), Uhr in gleich breiten Ziffern, Datei hochladen. Farben nur aus der Marke; dunkel über dieselben Werte. Greift nur in #bsBereich[data-bereich="transkription"]. */ #bsBereich[data-bereich="transkription"] { --btr-fertig: var(--marke-ok); --btr-arbeit: var(--marke-nav-blau); --btr-offen: var(--marke-warn); --btr-fehler: var(--marke-gefahr); } /* Keine Kennzahl-Leiste, keine Werkzeug-Leiste der Vorlage */ :root.bs-offen #bsBereich[data-bereich="transkription"] { grid-template-rows: minmax(0, 1fr); } #bsBereich[data-bereich="transkription"] .bs-kopf, #bsBereich[data-bereich="transkription"] .bs-werkzeug, #bsBereich[data-bereich="transkription"] .bs-pillen { display: none; } #bsBereich[data-bereich="transkription"] .bs-liste { overflow-y: auto; overflow-x: hidden; } /* Raster wie die Startseite (workspace-bento.css .wb-raster); Platz über der ersten Reihe fürs Anheben (Regel 9) */ #bsBereich[data-bereich="transkription"] .btr-kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 16px; } /* Hover-Luft kommt aus der Liste der Vorlage */ /* Filter-Kachel (1×1) */ #bsBereich[data-bereich="transkription"] .btr-s { display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 16px 18px; background: var(--bs-karte); border-radius: var(--bs-r); box-shadow: var(--wb-rand, var(--wbs-schatten)); } #bsBereich[data-bereich="transkription"] .btr-s-titel { font-size: 12px; font-weight: 500; color: var(--bs-leise); } /* Pillen nebeneinander wie die Umschalter-Kacheln der Vorlage (.bs-sk-werte), keine senkrechte Liste (Abnahme 24.10.2026) */ #bsBereich[data-bereich="transkription"] .btr-um { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 0; background: none; } #bsBereich[data-bereich="transkription"] .btr-um button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--bs-weich); border-radius: var(--marke-r-pill); padding: 7px 12px; font: 600 12px var(--marke-schrift); color: var(--bs-leise); cursor: pointer; min-width: 0; max-width: 100%; white-space: nowrap; } #bsBereich[data-bereich="transkription"] .btr-um button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="transkription"] .btr-um button i { font-style: normal; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; } #bsBereich[data-bereich="transkription"] .btr-um button:hover { background: var(--marke-feld); color: var(--bs-text); } #bsBereich[data-bereich="transkription"] .btr-um button.an { background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="transkription"] .btr-um button:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; } /* Besprechungs-Kachel */ #bsBereich[data-bereich="transkription"] .btr-k { --btr-kante: var(--bs-linie); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; height: 100%; box-sizing: border-box; padding: 18px 20px 16px; overflow: hidden; border: 0; border-radius: var(--bs-r); text-align: left; cursor: pointer; background: var(--bs-karte); color: var(--bs-text); font-family: var(--marke-schrift); box-shadow: var(--wb-rand, var(--wbs-schatten)); transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="transkription"] .btr-done { --btr-kante: var(--btr-fertig); } #bsBereich[data-bereich="transkription"] .btr-processing { --btr-kante: var(--btr-arbeit); } #bsBereich[data-bereich="transkription"] .btr-recording { --btr-kante: var(--btr-offen); } #bsBereich[data-bereich="transkription"] .btr-failed { --btr-kante: var(--btr-fehler); } #bsBereich[data-bereich="transkription"] .btr-k:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="transkription"] .btr-k:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="transkription"] .btr-k.an { box-shadow: 0 0 0 2px var(--bs-dunkel); } #bsBereich[data-bereich="transkription"] .btr-k-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-k-datum { flex: none; font-size: 12px; font-weight: 500; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="transkription"] .btr-k-titel { font-size: 15px; font-weight: 700; line-height: 1.3; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #bsBereich[data-bereich="transkription"] .btr-k-meta { font-size: 12px; color: var(--bs-leise); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="transkription"] .btr-k-fuss { margin-top: auto; min-height: 18px; display: flex; align-items: center; } #bsBereich[data-bereich="transkription"] .btr-aufg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bs-leise); white-space: nowrap; } #bsBereich[data-bereich="transkription"] .btr-aufg.hat { color: var(--bs-text); } #bsBereich[data-bereich="transkription"] .btr-aufg .a4h-spin, #bsBereich[data-bereich="transkription"] .btr-aufg .bs-punkt { width: 12px; height: 12px; } #bsBereich[data-bereich="transkription"] .btr-leer { cursor: default; justify-content: center; align-items: center; text-align: center; font-size: 13px; color: var(--bs-leise); } #bsBereich[data-bereich="transkription"] .btr-leer:hover { transform: none; box-shadow: var(--wb-rand, var(--wbs-schatten)); } /* Stand-Etikett (Grundform aus der Vorlage .bs-etikett; Gelb fehlt dort) */ #bsBereich[data-bereich="transkription"] .btr-st { height: 22px; padding: 0 8px; font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 26px; } #bsBereich[data-bereich="transkription"] .btr-d-zeile .btr-st { display: inline-flex; } #bsBereich[data-bereich="transkription"] .btr-st.ton-gelb { background: color-mix(in srgb, var(--btr-offen) 16%, var(--bs-karte)); color: color-mix(in srgb, var(--btr-offen) 70%, var(--bs-text)); } #bsBereich[data-bereich="transkription"] .btr-st .a4h-spin, #bsBereich[data-bereich="transkription"] .btr-st .bs-punkt { width: 11px; height: 11px; } /* „+"-Kachel wie auf Home (gestrichelt, durchsichtig) */ #bsBereich[data-bereich="transkription"] .btr-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 100%; box-sizing: border-box; padding: 12px; border: 2px dashed var(--marke-linie-stark); border-radius: var(--bs-r); background: transparent; color: var(--bs-leise); font: 600 13px var(--marke-schrift); text-align: center; cursor: pointer; transition: background .2s, color .2s; } #bsBereich[data-bereich="transkription"] .btr-plus:hover { background: var(--bs-karte); color: var(--bs-text); } #bsBereich[data-bereich="transkription"] .btr-plus:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="transkription"] .btr-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } #bsBereich[data-bereich="transkription"] .btr-plus small { font-size: 11px; font-weight: 500; } /* ── Detail groß ── */ #bsBereich[data-bereich="transkription"] .btr-d-zeile { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; } #bsBereich[data-bereich="transkription"] .btr-d-zeile .btr-st { height: 24px; padding: 0 10px; font-size: 12px; } #bsBereich[data-bereich="transkription"] .bs-d-meta th { width: 132px; } #bsBereich[data-bereich="transkription"] .bs-detail > * { max-width: 860px; } #bsBereich[data-bereich="transkription"] .bs-detail > .bs-d-aktion, #bsBereich[data-bereich="transkription"] .bs-detail > .bs-zurueck { max-width: none; } #bsBereich[data-bereich="transkription"] .btr-teil { padding: 14px 0 4px; border-top: 1px solid var(--bs-linie); } #bsBereich[data-bereich="transkription"] .btr-teil h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; } #bsBereich[data-bereich="transkription"] .btr-text { margin: 0 0 8px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } #bsBereich[data-bereich="transkription"] .btr-liste { margin: 0 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.5; } #bsBereich[data-bereich="transkription"] .btr-liste li { margin-bottom: 4px; overflow-wrap: anywhere; } #bsBereich[data-bereich="transkription"] .btr-aufgaben { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; } #bsBereich[data-bereich="transkription"] .btr-aufgaben li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--bs-r-k); background: var(--bs-weich); } #bsBereich[data-bereich="transkription"] .btr-aufgaben b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } #bsBereich[data-bereich="transkription"] .btr-aufgaben span { font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="transkription"] .btr-arbeit { display: flex; gap: 10px; align-items: flex-start; } #bsBereich[data-bereich="transkription"] .bs-meldung .bs-box { margin: 12px 0; } #bsBereich[data-bereich="transkription"] .btr-luecke { flex: 1; } #bsBereich[data-bereich="transkription"] .btr-gefahr { color: var(--marke-gefahr); } /* Laufende Aufnahme als Kachel im Raster (rote Kante, pulsierender Punkt) */ #bsBereich[data-bereich="transkription"] .btr-laeuft { --btr-kante: var(--marke-aufnahme); } #bsBereich[data-bereich="transkription"] .btr-plus-laeuft { border-color: color-mix(in srgb, var(--marke-aufnahme) 55%, transparent); color: var(--bs-text); } /* ── „Neue Aufnahme" groß: Kacheln auf dem grauen Grund ── */ #bsBereich[data-bereich="transkription"][data-ansicht="raster"].bs-detail-auf .bs-detail[data-bs-neu] { background: transparent; box-shadow: none; padding: 10px 2px 20px; } #bsBereich[data-bereich="transkription"] .bs-detail > .btr-n { max-width: none; } #bsBereich[data-bereich="transkription"] .bs-detail[data-bs-neu] > .bs-zurueck { align-self: flex-start; margin-bottom: 12px; } .btr-n { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); gap: 16px; padding-top: 4px; } .btr-n-kopf { grid-column: span 2; min-height: 0; } .btr-n-k { grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; padding: 20px 22px; border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wb-rand, var(--wbs-schatten)); font-family: var(--marke-schrift); transition: box-shadow .25s; } .btr-n-k:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)), var(--wb-rand, var(--wbs-schatten)); } .btr-n-angaben { grid-column: span 4; } .btr-n-titel { margin: 0; font: 600 15px/1.3 var(--marke-schrift); color: var(--bs-text); } .btr-n-satz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bs-leise); } .btr-n-satz strong { color: var(--bs-text); font-weight: 600; } .btr-n-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .btr-n-feld > span, .btr-n-tn > label { font-size: 12px; font-weight: 500; color: var(--bs-leise); } /* Teilnehmer: Auswahl beim Tippen aus der Benutzerverwaltung, Abteilung rechts (wie im AIOS, Ralph 07.11.2026) */ .btr-n-tn { position: relative; } .btr-n-vorschlag { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30; display: flex; flex-direction: column; padding: 6px; background: var(--bs-flaeche, var(--marke-flaeche)); border: 1px solid var(--marke-linie); border-radius: var(--bs-r-k); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); max-height: 280px; overflow-y: auto; } .btr-n-vorschlag[hidden] { display: none; } .btr-n-vs-z { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--bs-text); font: 400 14px var(--marke-schrift); text-align: left; cursor: pointer; } .btr-n-vs-z small { font-size: 12px; color: var(--bs-leise); white-space: nowrap; } .btr-n-vs-z:hover, .btr-n-vs-z.an { background: var(--bs-weich); } .btr-n-eingabe { width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text); font: 400 13px var(--marke-schrift); box-sizing: border-box; outline: 0; } .btr-n-eingabe:focus { box-shadow: none; outline: none; } .btr-n-eingabe:disabled { opacity: .7; } .btr-n-notiz { height: auto; min-height: 64px; padding: 10px 16px; border-radius: var(--bs-r-k); resize: vertical; line-height: 1.5; } .btr-n-msg { font-size: 12px; line-height: 1.45; color: var(--bs-leise); } .btr-n-msg:empty { display: none; } .btr-n-msg.fehler { color: var(--marke-gefahr); } .btr-n-msg.warn { color: color-mix(in srgb, var(--marke-warn) 80%, var(--bs-text)); } .btr-n-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; } .btr-n-k .bs-knopf { display: inline-flex; align-items: center; gap: 8px; } .btr-n-k .bs-knopf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* Pflicht-Hinweis § 201 StGB — immer gut sichtbar (Form a4h-pflicht: roter Rand links) */ .btr-n-pflicht { box-shadow: var(--wb-rand, var(--wbs-schatten)); } .btr-n-pflicht:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)), var(--wb-rand, var(--wbs-schatten)); } .btr-n-pflicht.fehlt { background: color-mix(in srgb, var(--marke-gefahr) 8%, var(--bs-karte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent); } .btr-n-haken { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 10px 12px; border-radius: var(--bs-r-k); background: var(--bs-weich); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--bs-text); cursor: pointer; } .btr-n-haken input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--marke-nav-blau); cursor: pointer; } .btr-n-haken input:disabled { cursor: default; } .btr-n-pflicht.fehlt .btr-n-haken { box-shadow: 0 0 0 2px var(--marke-gefahr); } /* Aufnahme: Punkt, Uhr, Mikrofon-Pillen, Pegel */ .btr-n-zeile { display: flex; align-items: center; gap: 10px; min-width: 0; } .btr-n-zeile .btr-n-titel { margin-right: auto; } .btr-n-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bs-leise); white-space: nowrap; } .btr-n-rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--marke-linie-stark); flex: none; } .btr-n-auf.nimmt .btr-n-rec, .btr-st .btr-n-rec, .btr-plus-laeuft .btr-n-rec { color: var(--marke-aufnahme); } .btr-n-auf.nimmt .btr-n-rec i, .btr-st .btr-n-rec i, .btr-plus-laeuft .btr-n-rec i { background: var(--marke-aufnahme); animation: btrPuls 1.6s infinite; } .btr-n-auf.nimmt.pause .btr-n-rec { color: var(--bs-leise); } .btr-n-auf.nimmt.pause .btr-n-rec i { background: var(--marke-linie-stark); animation: none; } .btr-plus-laeuft .btr-n-rec i { width: 14px; height: 14px; } @keyframes btrPuls { 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; } } .btr-n-uhr { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--bs-text); } .btr-n-rec[hidden], .btr-n-uhr[hidden] { display: none; } /* Ruhezustand ohne „Bereit 0:00“ (Ralph 07.11.2026) */ .btr-n-mik { margin: -2px 0 0 -4px; } .btr-n-mik .wb-pille { max-width: 100%; } .btr-n-mik .wb-pille span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .btr-n-mik .wb-pille svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .btr-n-mik .wb-pille:disabled { opacity: .55; cursor: default; } .btr-n-pegel { display: flex; align-items: center; gap: 3px; height: 44px; padding: 0 2px; overflow: hidden; } .btr-n-pegel i { flex: 1 1 0; min-width: 2px; height: 8%; border-radius: 2px; background: var(--marke-linie-stark); transition: height .08s linear; } .btr-n-auf.nimmt .btr-n-pegel i { background: var(--marke-aufnahme); } .btr-n-auf.nimmt .btr-n-pegel.still i { background: var(--marke-warn); } .btr-n-auf.nimmt.pause .btr-n-pegel i { background: var(--marke-linie-stark); } .btr-n-stopp { background: var(--marke-aufnahme); } .btr-n-stopp:hover { background: color-mix(in srgb, var(--marke-aufnahme) 86%, #000); } /* Ladekreis allein in der Kachel (30 px), Text darunter; der Rest der Kachel tritt zurück */ .btr-n-lade { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: inherit; background: var(--bs-karte); color: var(--marke-ladekreis); font-size: 13px; font-weight: 500; z-index: 1; } .btr-n-lade span { color: var(--bs-leise); } /* Breiten wie die Startseite: 6 Spalten; schmaler weniger, damit Titel lesbar bleiben */ @media (max-width: 900px) { #bsBereich[data-bereich="transkription"] .btr-kacheln { gap: 12px; } .btr-n { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .btr-n-kopf, .btr-n-angaben, .btr-n-pflicht, .btr-n-auf { grid-column: 1 / -1; } } /* Handy (< 700 px): eine Spalte, flachere Reihen wie auf Home */ @media (max-width: 699px) { #bsBereich[data-bereich="transkription"] .btr-kacheln { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; } #bsBereich[data-bereich="transkription"] .btr-k { height: 132px; padding: 14px 16px 14px 18px; } #bsBereich[data-bereich="transkription"] .btr-s { padding: 12px 14px; } #bsBereich[data-bereich="transkription"] .btr-um button { padding: 6px 10px; } #bsBereich[data-bereich="transkription"] .btr-plus { min-height: 96px; } #bsBereich[data-bereich="transkription"] .bs-d-meta th { width: 110px; } #bsBereich[data-bereich="transkription"] .btr-luecke { display: none; } .btr-n { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .btr-n-k { padding: 16px; border-radius: var(--bs-r-k); } .btr-n-pflicht { padding-left: 20px; } .btr-n-fuss .bs-knopf { flex: 1 1 auto; justify-content: center; } } @media (prefers-reduced-motion: reduce) { #bsBereich[data-bereich="transkription"] .btr-k { transition: none; } #bsBereich[data-bereich="transkription"] .btr-k:hover { transform: none; } .btr-n-rec i, .btr-st .btr-n-rec i { animation: none !important; } .btr-n-pegel i { transition: none; } } /* ── Besprechung groß: zwei Spalten (Inhalt | Effizienz), Aufgabenverteilung mit Kürzel-Kreis ── */ #bsBereich[data-bereich="transkription"] .bs-detail > .btr-zwei { max-width: none; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 28px; align-items: start; } #bsBereich[data-bereich="transkription"] .btr-links { min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-links > .btr-teil:first-child { border-top: 0; padding-top: 4px; } #bsBereich[data-bereich="transkription"] .btr-eff-karte { padding: 18px 20px; border-radius: var(--bs-r-k); background: var(--bs-weich); } #bsBereich[data-bereich="transkription"] .btr-eff-karte h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; } #bsBereich[data-bereich="transkription"] .btr-eff-karte h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 700; } #bsBereich[data-bereich="transkription"] .btr-aufgaben li { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; } #bsBereich[data-bereich="transkription"] .btr-a-text { flex: 1; min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-a-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } #bsBereich[data-bereich="transkription"] .btr-aufgaben .btr-wer { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bs-text); } #bsBereich[data-bereich="transkription"] .btr-av { width: 26px; height: 26px; border-radius: 999px; color: #fff; font: 700 10.5px var(--marke-schrift); font-style: normal; display: inline-flex; align-items: center; justify-content: center; flex: none; } #bsBereich[data-bereich="transkription"] .btr-aufgaben .btr-bis { font-size: 13px; font-weight: 600; color: var(--bs-leise); font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="transkription"] .btr-aufgaben .btr-bis.rot { color: var(--marke-gefahr); } #bsBereich[data-bereich="transkription"] .btr-ring { position: relative; width: 96px; height: 96px; margin: 0 0 12px; } #bsBereich[data-bereich="transkription"] .btr-ring svg { display: block; } #bsBereich[data-bereich="transkription"] .btr-ring circle { fill: none; stroke-width: 7; } #bsBereich[data-bereich="transkription"] .btr-ring .spur { stroke: var(--bs-linie); } #bsBereich[data-bereich="transkription"] .btr-ring .wert { stroke-linecap: round; stroke: var(--btr-ton); } #bsBereich[data-bereich="transkription"] .btr-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: var(--btr-ton); } #bsBereich[data-bereich="transkription"] .btr-ring-ok { --btr-ton: var(--marke-ok); } #bsBereich[data-bereich="transkription"] .btr-ring-warn { --btr-ton: var(--marke-warn); } #bsBereich[data-bereich="transkription"] .btr-ring-gefahr { --btr-ton: var(--marke-gefahr); } #bsBereich[data-bereich="transkription"] .btr-teilwerte { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; } #bsBereich[data-bereich="transkription"] .btr-teilwerte .k { display: flex; justify-content: space-between; font-size: 13px; } #bsBereich[data-bereich="transkription"] .btr-teilwerte .k i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-leise); } #bsBereich[data-bereich="transkription"] .btr-teilwerte .bal { display: block; height: 6px; margin: 4px 0; border-radius: 999px; background: var(--bs-linie); overflow: hidden; } #bsBereich[data-bereich="transkription"] .btr-teilwerte .bal span { display: block; height: 100%; border-radius: 999px; background: var(--marke-nav-blau); } #bsBereich[data-bereich="transkription"] .btr-teilwerte .t { display: block; font-size: 12px; line-height: 1.4; color: var(--bs-leise); } #bsBereich[data-bereich="transkription"] .btr-folge { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; } #bsBereich[data-bereich="transkription"] .btr-folge span { color: var(--bs-leise); } @media (max-width: 960px) { #bsBereich[data-bereich="transkription"] .bs-detail > .btr-zwei { grid-template-columns: minmax(0, 1fr); } #bsBereich[data-bereich="transkription"] .btr-aufgaben li { flex-direction: column; align-items: flex-start; } #bsBereich[data-bereich="transkription"] .btr-a-rechts { align-items: flex-start; } } #bsBereich[data-bereich="transkription"] .btr-eff-karte .btr-text { margin-bottom: 14px; } /* Live-Aufgaben während der Aufnahme (Bento-Kachel + Bereich „Neue Aufnahme"; Markup aus besprechung-aufnahme.js#aufgabenHtml). Farben aus currentColor, damit es auf hellen und kräftigen Kacheln gleich lesbar bleibt. */ .a4h-live:empty { display: none; } .a4h-live { border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 9px; padding: 8px 12px; max-height: 180px; overflow-y: auto; } .a4h-live-kopf { font-size: 12px; font-weight: 600; opacity: .75; margin-bottom: 4px; } .a4h-live-kopf span { font-weight: 400; } .a4h-live-liste { list-style: none; margin: 0; padding: 0; } .a4h-live-liste li { font-size: 13px; line-height: 1.45; padding: 4px 0; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .a4h-live-liste li:first-child { border-top: 0; } .a4h-live-wer { display: block; font-size: 12px; opacity: .7; } /* ── Menü-Modus (Beta, 02.11.2026): Liste links, Protokoll/„Neue Aufnahme“ rechts (Grundstil: workspace-bento-schlicht.css) ── */ :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .bs-liste-karte { height: 100%; } :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .bs-liste { margin: 0; padding: 0; height: 100%; overflow: visible; } .btr-wss .wss-suche svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btr-wss .wss-suche input::-webkit-search-cancel-button { display: none; } .btr-wss .wss-neu { white-space: nowrap; } .btr-wss .wss-neu.laeuft { background: var(--marke-aufnahme); } .btr-wss .wss-spalte { min-height: 0; } .btr-wss .wss-liste { flex: 1 1 auto; } .btr-pillenreihe { display: flex; flex-wrap: wrap; gap: 4px; } .btr-pillenreihe button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); color: var(--wb-leise); font: 600 12px var(--marke-schrift); cursor: pointer; } .btr-pillenreihe button i { font-style: normal; font-variant-numeric: tabular-nums; opacity: .8; } .btr-pillenreihe button:hover { color: var(--wb-text); } .btr-pillenreihe button.an { background: linear-gradient(135deg, var(--wbm-f, var(--marke-nav-blau)) 30%, color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 66%, var(--wb-verlauf-ziel, #fff))); color: #fff; } .btr-wss .wss-zeile .btr-st { flex: none; } .btr-wss .wss-detail { padding-top: 0; } .btr-wss .wss-detail .bs-d-aktion { position: static; margin: 12px 0 0; padding: 0; background: none; border-top: 0; } /* „Neue Aufnahme“ schlicht: keine Kacheln, ein Abschnitt unter dem anderen; Pflicht-Hinweis bleibt mit rotem Rand deutlich */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n { display: flex; flex-direction: column; gap: var(--marke-sp-4); padding-top: 0; max-width: 640px; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-k { grid-column: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; gap: var(--marke-sp-2); } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-k:hover { box-shadow: none; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-pflicht { padding: 12px 14px; border-radius: var(--marke-r-m); box-shadow: none; background: var(--wb-weich); } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-pflicht:hover { box-shadow: none; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-pflicht.fehlt { background: color-mix(in srgb, var(--marke-gefahr) 8%, var(--wb-weich)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent); } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-haken { margin-top: 4px; background: var(--wb-karte, transparent); } :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-kopf.bs-kopfkarte { display: block; padding: 0; background: none; color: var(--wb-text); box-shadow: none; min-height: 0; } :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-kopf h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--wb-text); } :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-kopf p { margin: 0; font-size: 13px; color: var(--wb-leise); } .btr-wss.wss-zwei { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); } .btr-wss .wss-suche { flex: 1 1 120px; min-width: 0; } .btr-wss .wss-neu { flex: none; } :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-kopf.bs-kopfkarte { flex: none; height: auto; } @media (max-width: 900px) { .btr-wss.wss-zwei { grid-template-columns: 1fr; } } /* ── Menü-Modus: „Neue Besprechung“ direkt rechts, wenn nichts gewählt ist (Ralph 07.11.2026, Vorbild AIOS) ── Kompakt in zwei Spalten, damit es bei 1440×900 ohne Bildlauf passt. Einwilligungs-Feld (§ 201 StGB) gelb hervorgehoben. */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px 24px; align-items: start; max-width: none; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-kopf { grid-column: 1 / -1; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-angaben { grid-column: 1; grid-row: 2 / span 3; } .btr-n-m .btr-n-notiz { min-height: 56px; } .btr-n-m select.btr-n-eingabe { appearance: auto; padding: 0 12px; } .btr-n-m .btr-n-mik-m { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btr-n-m .btr-n-mik-m select { flex: 1 1 180px; min-width: 0; width: auto; } .btr-n-m .btr-n-pegel { height: 24px; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-pflicht { background: var(--wb-weich); box-shadow: none; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-pflicht.fehlt { background: color-mix(in srgb, var(--marke-gefahr) 10%, var(--wb-weich)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 40%, transparent); } .btr-n-m .btr-n-pflicht .btr-n-haken { margin-top: 0; background: transparent; padding: 0; } @media (max-width: 900px) { #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m { grid-template-columns: minmax(0, 1fr); } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-angaben, #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-auf, #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-pflicht, #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-datei { grid-column: 1; grid-row: auto; } } /* Zusatz (07.11.2026): „Klären" an offenen Punkten, Rechtsklick-/Langdruck-Menü an der Liste (kein Layout, nur Marken-Werte) */ #bsBereich[data-bereich="transkription"] .btr-klaer { margin-left: 6px; padding: 1px 9px; font: inherit; font-size: 12px; line-height: 1.6; cursor: pointer; color: inherit; background: transparent; border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-pill, 999px); vertical-align: baseline; } #bsBereich[data-bereich="transkription"] .btr-klaer:hover { border-color: currentColor; } #bsBereich[data-bereich="transkription"] .btr-klaer:focus-visible, .btr-ctx button:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; } .btr-ctx { position: fixed; z-index: 10050; min-width: 168px; padding: 4px; display: flex; flex-direction: column; background: var(--marke-flaeche, #fff); color: var(--marke-schrift); border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-m, 10px); box-shadow: 0 8px 28px rgba(0, 0, 0, .22); } .btr-ctx button { text-align: left; padding: 9px 12px; font: inherit; font-size: 14px; color: inherit; background: transparent; border: 0; border-radius: 6px; cursor: pointer; } .btr-ctx button:hover, .btr-ctx button:focus { background: rgba(127, 127, 127, .16); } .btr-ctx button.gefahr { color: var(--marke-gefahr); } /* Handy: Liste und Protokoll untereinander (die Zwei-Spalten-Regel der Menü-Liste griff hier auch unter 900 px und quetschte das Protokoll) */ @media (max-width: 900px) { :root.wb-menue-modus #bsBereich .btr-wss.wss-zwei { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } :root.wb-menue-modus #bsBereich .btr-wss .wss-liste { max-height: 30vh; } } /* Anhänge und „Protokoll bearbeiten" (Zusatz 07.11.2026) — nur Marken-Werte, kein Seitenlayout */ #bsBereich[data-bereich="transkription"] .btr-anh { list-style: none; margin: 0 0 8px; padding: 0; } #bsBereich[data-bereich="transkription"] .btr-anh li { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-anh-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; font: inherit; font-size: 14px; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; text-align: left; } #bsBereich[data-bereich="transkription"] .btr-anh-gr { font-size: 12px; color: var(--marke-schrift); opacity: .65; white-space: nowrap; } #bsBereich[data-bereich="transkription"] .btr-anh-weg { flex: 0 0 auto; width: 28px; height: 28px; font-size: 18px; line-height: 1; color: var(--marke-gefahr); background: none; border: 0; border-radius: 6px; cursor: pointer; } #bsBereich[data-bereich="transkription"] .btr-anh-weg:hover, #bsBereich[data-bereich="transkription"] .btr-anh-weg:focus-visible { background: rgba(127, 127, 127, .16); } #bsBereich[data-bereich="transkription"] .btr-anh-neu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #bsBereich[data-bereich="transkription"] .btr-anh-msg { font-size: 13px; } #bsBereich[data-bereich="transkription"] .btr-anh-msg.rot { color: var(--marke-gefahr); } #bsBereich[data-bereich="transkription"] .btr-edit-in { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--marke-schrift); background: var(--marke-feld, transparent); border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-m, 10px); } #bsBereich[data-bereich="transkription"] .btr-edit-sum { resize: vertical; min-height: 90px; } #bsBereich[data-bereich="transkription"] .btr-edit-z, #bsBereich[data-bereich="transkription"] .btr-edit-mas { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } #bsBereich[data-bereich="transkription"] .btr-edit-mas .btr-edit-in:first-child { flex: 3 1 0; min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-edit-mas .btr-edit-in:not(:first-child) { flex: 1 1 0; min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-edit-plus { margin-top: 2px; } @media (max-width: 600px) { #bsBereich[data-bereich="transkription"] .btr-edit-mas { flex-wrap: wrap; } #bsBereich[data-bereich="transkription"] .btr-edit-mas .btr-edit-in { flex: 1 1 100% !important; } } /* Teilnehmer-Vorschläge und Wörterbuch-Knopf im Formular, Übersetzungs-Box (Zusatz 07.11.2026) */ #bsBereich[data-bereich="transkription"] .btr-uebers { padding: 12px 14px; border: 1px solid var(--marke-linie-stark); border-radius: var(--marke-r-m, 10px); } #bsBereich[data-bereich="transkription"] .btr-uebers h4 { margin: 10px 0 4px; font-size: 14px; } /* Formular „Neue Besprechung“ (Menü-Modus) einheitlich (Ralph 07.11.2026: „sieht nicht gut aus“): eine Feldform für Eingabe, Auswahl und Text, Einwilligung ohne Kasten im Kasten, Pegel nur während der Aufnahme, Mikrofon-Suche als kleiner Symbolknopf, Wörterbuch als Textlink */ #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-eingabe { height: 40px; padding: 0 12px; border: 1px solid var(--marke-linie); border-radius: var(--bs-r-k); background: var(--bs-weich); box-shadow: none; outline: none; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-notiz { height: auto; min-height: 72px; padding: 9px 12px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-eingabe:focus { border-color: var(--marke-text-3, var(--marke-linie)); box-shadow: none; outline: none; } /* Fokus-Ring nach innen: außen schnitt der Kartenrand ihn links ab (Ralph 07.11.2026) */ #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-feld { gap: 5px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-angaben { gap: 12px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-pflicht { padding: 14px 18px 14px 22px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-pflicht .btr-n-haken { margin: 0; padding: 0; background: transparent; box-shadow: none; align-items: center; font-weight: 500; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf:not(.nimmt) .btr-n-pegel { display: none; } /* Mikrofon testen: der Knopf selbst wird zum Pegel (blaue Balken), Klick beendet den Test (Ralph 07.11.2026) */ #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-test { flex: none; width: 150px; height: 40px; padding: 0 14px; white-space: nowrap; justify-content: center; border-radius: var(--bs-r-k); } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-test[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--marke-text-3, var(--marke-linie)); } /* Welle im Test-Knopf: gemeinsamer Baustein (a4h-pegelwelle.js/.css), hier nur der Platz in den 40-px-Knopf */ .btr-n-testpegel { display: block; width: 100px; height: 28px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-mik-m { flex-wrap: nowrap; } #bsBereich[data-bereich="transkription"] .btr-n-m [data-n="mikNeu"] { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 17px; border-radius: var(--bs-r-k); } /* Mikrofon-Auswahl schmaler links, „Aufnahme starten“ blau daneben in gleicher Höhe (Ralph 07.11.2026) */ #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-mik-m select { flex: 0 1 240px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-start { flex: none; height: 40px; margin-left: auto; background: var(--bs-dunkel, var(--marke-grafit)); color: #fff; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-start:hover { background: color-mix(in srgb, var(--bs-dunkel, var(--marke-grafit)) 86%, #fff); } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-start:disabled { opacity: .55; } /* „Neue Besprechung“ als EINE ruhige Spalte von oben nach unten (Ralph 07.11.2026: „zu unstrukturiert, zu wild durcheinander“): Angaben → Einwilligung → Aufnahme → oder Datei. Titel und Teilnehmer nebeneinander, alles in einer Flucht. */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: 0; gap: 14px; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-angaben, #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-pflicht, #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-auf, #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-k { padding: 0; box-shadow: none; background: transparent; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-k:hover { box-shadow: none; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-angaben > .btr-n-titel { display: none; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-notiz { min-height: 56px; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n-m .btr-n-pflicht { padding: 12px 16px; border-radius: var(--bs-r-k); } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf { position: relative; padding-top: 18px; border-top: 0; gap: 10px; } /* Trennlinie über „Aufnahme“: volle Breite, bündig mit den Feldern (Ralph 08.11.2026; vorher mittig auslaufend) */ #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--marke-linie); } /* Titelzeile: Titel nimmt den Rest, „Art der Besprechung" klein rechts daneben; Teilnehmer volle Breite (Ralph 07.11.2026) */ #bsBereich[data-bereich="transkription"] .btr-n-titelzeile { display: flex; align-items: flex-end; gap: 10px; min-width: 0; } #bsBereich[data-bereich="transkription"] .btr-n-titelzeile .btr-n-titelfeld { flex: 1 1 auto; } #bsBereich[data-bereich="transkription"] .btr-n-titelzeile .btr-n-artfeld { flex: 0 0 236px; /* längster Eintrag „Info- oder Schulungstermin“ passt ganz hinein (Ralph 07.11.2026) */ } #bsBereich[data-bereich="transkription"] .btr-n-artfeld select.btr-n-eingabe { height: 40px; font: 400 13px var(--marke-schrift); color: var(--bs-text); padding: 0 12px; /* gleiche Schrift wie die Felder links (Ralph 07.11.2026) */ } @media (max-width: 599px) { #bsBereich[data-bereich="transkription"] .btr-n-titelzeile { flex-direction: column; align-items: stretch; } #bsBereich[data-bereich="transkription"] .btr-n-titelzeile .btr-n-artfeld { flex: none; } } /* Die Liste hat „Neue Besprechung" als ersten Eintrag; das schwebende „+" unten entfällt (nur diese Seite) */ :root.wb-menue-modus #bsBereich[data-bereich="transkription"] .btr-wss .wss-neu { display: none; } #bsBereich[data-bereich="transkription"] .btr-zeile-neu .wss-sym svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Bereich „Aufnahme" füllt den Rest der Spalte; Überschrift + Mikrofonzeile stehen mittig zwischen Trennlinie und Unterkante (Ralph 07.11.2026) */ #bsBereich[data-bereich="transkription"] .wss-detail > :has(> .btr-n-m:not(.btr-n-lage-an)) { flex: 1 0 auto; display: flex; flex-direction: column; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m:not(.btr-n-lage-an) { flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; } /* Spalte statt Raster: nur „Aufnahme" wächst, egal welche Teile sichtbar sind */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m:not(.btr-n-lage-an) .btr-n-auf:not(.nimmt) { flex: 1 0 auto; justify-content: center; padding: 18px 0; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m:not(.btr-n-lage-an) .btr-n-auf:not(.nimmt) > .btr-n-fuss { margin-top: 0; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m:not(.btr-n-lage-an) .btr-n-auf:not(.nimmt) > :empty { display: none; } /* Einwilligung: Paragraf daneben, Zeile etwas höher und mittig (Ralph 07.11.2026) */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m .btr-n-pflicht { align-items: center; text-align: center; padding-top: 4px; padding-bottom: 4px; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m .btr-n-pflicht .btr-n-haken { justify-content: center; } .btr-n-para { color: var(--bs-leise); white-space: nowrap; } /* Block „Aufnahme“ in „Neue Besprechung“ als eine Spalte (Ralph 08.11.2026: „sieht zusammengewürfelt aus“): Überschrift → Einwilligung → EINE Zeile Mikrofon | Test | Start (40 px) → ein leiser Hinweis-Absatz. Alles bündig mit den Feldern; Start bleibt blau in der Mikrofon-Zeile (Ralph 07.11.2026). */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m:not(.btr-n-lage-an) .btr-n-auf:not(.nimmt) { flex: 0 0 auto; justify-content: flex-start; padding: 20px 0 0; gap: 12px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m { gap: 8px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m select { flex: 1 1 0; min-width: 0; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m .btr-n-auf .btr-n-pflicht { display: block; padding: 0; margin: 0; background: transparent; box-shadow: none; text-align: left; align-items: stretch; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m .btr-n-auf .btr-n-pflicht.fehlt { background: transparent; box-shadow: none; } #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m .btr-n-auf .btr-n-pflicht .btr-n-haken { justify-content: flex-start; align-items: flex-start; border-radius: var(--marke-r-s, 6px); padding: 4px 10px; box-shadow: inset 0 0 0 2px transparent; } /* Rahmen ist immer da (nur unsichtbar): der rote Rahmen ändert weder Höhe noch Breite */ #bsBereich[data-bereich="transkription"] .wss-detail .btr-n.btr-n-m .btr-n-auf .btr-n-pflicht.fehlt .btr-n-haken { box-shadow: inset 0 0 0 2px var(--marke-gefahr); } /* Rahmen nach innen: schneidet nichts ab, verändert die Höhe nicht (Ralph 08.11.2026) */ #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m select { text-overflow: ellipsis; padding-right: 22px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m .btr-n-test { width: 118px; padding: 0 8px; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-start { flex: none; height: 40px; margin: 0; padding: 0 12px; gap: 6px; white-space: nowrap; border-radius: var(--bs-r-k); background: var(--bs-dunkel, var(--marke-grafit)); color: #fff; } @media (max-width: 600px) { #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m { flex-wrap: wrap; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m select { flex: 1 1 100%; } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m .btr-n-test, #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-mik-m .btr-n-start { flex: 1 1 0; width: auto; min-width: 0; } } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-frist { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--bs-leise); } #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-auf .btr-n-frist b { font-weight: 600; color: var(--bs-leise); } /* Hinweistext nur für Screenreader (der rote Rahmen zeigt den Fehler) */ .btr-n-msg.btr-n-nursr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .btr-n-pflicht.fehlt .btr-n-haken { box-shadow: inset 0 0 0 2px var(--marke-gefahr); } /* Pflichtfelder (Titel, Teilnehmer, Worum geht es?): kleines graues Sternchen; leer beim Start = roter Rahmen nach innen, ohne Text und ohne Höhenänderung (Ralph 08.11.2026) */ .btr-n-stern { font-style: normal; font-weight: 600; margin-left: 2px; color: var(--bs-leise, var(--wb-leise)); } .btr-n-eingabe.fehlt, #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-eingabe.fehlt, #bsBereich[data-bereich="transkription"] .btr-n-m .btr-n-eingabe.fehlt:focus { border-color: var(--marke-gefahr); box-shadow: none; } /* ── Liste über den Baustein BentoSpalte (Ralph 08.11.2026): „Neue Besprechung“ ist das ＋ unten, Filter stehen oben in der Mitte ── */ .btr-wss .btr-bsp { flex: 1 1 auto; min-height: 0; border-left: 0; width: 100%; } @media (min-width: 1001px) { :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei { grid-template-columns: minmax(0, 1fr) var(--wbm-liste); grid-template-rows: auto minmax(0, 1fr); row-gap: 0; } :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei > .btr-pillenreihe { grid-column: 1; grid-row: 1; padding: 0 0 12px; } :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei > .wss-detail { grid-column: 1; grid-row: 2; } :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei > .wss-spalte { grid-column: 2; grid-row: 1 / span 2; } /* Raster wie die anderen Seiten (Ralph 08.11.2026): Trennlinie am Spaltenanfang (x = 1196) statt am Ende der Mitte, Spalte bis zum unteren Rand, ＋ ganz unten */ :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei:not(.btr-liste-zu) > .wss-detail { border-right: 0; padding-right: 0; } :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei:not(.btr-liste-zu) > .wss-spalte { padding-bottom: 0; border-left: 1px solid var(--wb-linie); } :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei:not(.btr-liste-zu) > .wss-spalte > .btr-lkopf { padding: 0 16px; } } @media (max-width: 1000px) { :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei { grid-template-rows: auto minmax(0, 1fr) auto; } :root.wb-menue-modus #bsBereich[data-bereich] .btr-wss.wss-zwei > .btr-pillenreihe { order: 0; } .btr-wss .btr-bsp { max-height: 36vh; height: auto; } }