body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 22px; background: var(--surface-page); color: var(--ink); -webkit-font-smoothing: antialiased; }
.lz-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-4); }
.lz-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }

/* Button */
.lz-btn { font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; border-radius: var(--radius-md); padding: 9px 16px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: box-shadow .12s; }
.lz-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lz-btn--klein { font-size: 13px; padding: 6px 11px; }
.lz-btn--primaer { background: var(--lapis); color: var(--on-lapis); }
.lz-btn--primaer:not(:disabled):hover { background: var(--lapis-strong); }
.lz-btn--sekundaer { background: var(--surface-card); color: var(--ink); border-color: var(--line-strong); }
.lz-btn--sekundaer:not(:disabled):hover { background: var(--surface-sunken); }
.lz-btn--ruhig { background: transparent; color: var(--lapis); }
.lz-btn--ruhig:not(:disabled):hover { background: var(--lapis-soft); }
.lz-btn--aufnahme, .lz-btn--gefahr { background: var(--record); color: var(--on-record); }
.lz-btn--aufnahme:not(:disabled):hover, .lz-btn--gefahr:not(:disabled):hover { background: var(--record-strong); }
.lz-btn:disabled { cursor: not-allowed; background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); }

/* Logo */
.lz-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.lz-logo__kachel { display: inline-flex; align-items: center; justify-content: center; background: var(--lapis); color: var(--on-lapis); border-radius: var(--radius-lg); font-weight: 800; flex: none; }
.lz-logo__punkt { color: var(--lapis); }

/* Pills & Marken */
.lz-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; font-weight: 700; border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; }
.lz-pill--laeuft { background: var(--record-soft); color: var(--record-strong); }
.lz-pill--laeuft::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--record); }
.lz-pill--beendet { background: var(--lapis-soft); color: var(--lapis-strong); }
.lz-pill--leer { background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); }
.lz-vis { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 2px 8px; border: 1px solid; }
.lz-vis--sichtbar { background: var(--vis-sichtbar-soft); color: var(--vis-sichtbar); border-color: var(--vis-sichtbar-line); }
.lz-vis--redigiert { background: var(--vis-redigiert-soft); color: var(--vis-redigiert); border-color: var(--vis-redigiert-line); }
.lz-vis--privat { background: var(--vis-privat-soft); color: var(--vis-privat); border-color: var(--vis-privat-line); }
.lz-vis svg { width: 11px; height: 11px; }
.lz-gate { display: inline-flex; align-items: stretch; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); overflow: hidden; }
.lz-gate > span { padding: 2px 8px; }
.lz-gate__art { background: var(--surface-sunken); color: var(--ink-muted); }
.lz-gate__rolle { color: var(--ink); }
.lz-gate--inhaber { border-color: var(--lapis-line); }
.lz-gate--inhaber .lz-gate__rolle { background: var(--lapis-soft); color: var(--lapis-strong); }

/* Avatar */
.lz-avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--on-person); flex: none; box-shadow: 0 0 0 2px var(--surface-card); }
.lz-avatar--1 { background: var(--person-1); } .lz-avatar--2 { background: var(--person-2); } .lz-avatar--3 { background: var(--person-3); } .lz-avatar--4 { background: var(--person-4); }
.lz-avatar--unbekannt { background: var(--person-unbekannt); font-family: var(--font-mono); }
.lz-avatar--klein { width: 24px; height: 24px; font-size: 10px; }

/* Karte */
.lz-karte { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px var(--space-5); }
.lz-karte__kopf { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.lz-karte__nr { font-family: var(--font-mono); font-size: 13px; color: var(--lapis); font-weight: 700; }
.lz-karte__titel { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.lz-karte__aktion { margin-left: auto; }

/* Transkript-Beitrag */
.lz-turn { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); }
.lz-turn:last-child { border-bottom: none; }
.lz-turn__zeit { font-family: var(--font-mono); font-size: 12px; line-height: 22px; color: var(--ink-muted); }
.lz-turn__kopf { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }
.lz-turn__sprecher { font-size: 13px; font-weight: 700; }
.lz-turn__roh { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.lz-turn__kopf .lz-vis { margin-left: auto; }
.lz-turn__text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.lz-turn--redigiert .lz-turn__text { color: var(--vis-redigiert); text-decoration: line-through; }
.lz-turn--privat { background: var(--vis-privat-soft); }
.lz-turn--privat .lz-turn__text { color: var(--ink-muted); }

/* Aufnahme-Leiste */
.lz-rec { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); }
.lz-rec__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); flex: none; }
.lz-rec--laeuft .lz-rec__punkt { background: var(--record); box-shadow: 0 0 0 4px var(--record-soft); }
.lz-rec__zeit { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; }
.lz-rec__info { font-size: 13px; color: var(--ink-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kopierfeld */
.lz-kopier { display: flex; flex-direction: column; gap: 6px; }
.lz-kopier__label { font-size: 13px; font-weight: 600; }
.lz-kopier__zeile { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; }
.lz-kopier__wert { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; padding: 8px 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.lz-kopier__knopf { font: inherit; font-size: 13px; font-weight: 600; border: none; border-left: 1px solid var(--line-strong); background: var(--surface-card); color: var(--lapis); padding: 0 14px; cursor: pointer; }
.lz-kopier__knopf:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.lz-kopier__hinweis { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }

/* Freigabe */
.lz-freigabe { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-8); max-width: 380px; text-align: center; }
.lz-freigabe__titel { font-size: 18px; line-height: 24px; font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.lz-freigabe__text { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0 0 var(--space-5); }
.lz-freigabe .lz-btn { width: 100%; justify-content: center; }

/* Zustimmung */
.lz-consent { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; border-radius: var(--radius-pill); padding: 2px 8px; border: 1px solid; white-space: nowrap; }
.lz-consent svg { width: 12px; height: 12px; flex: none; }
.lz-consent--ok { background: var(--vis-sichtbar-soft); color: var(--vis-sichtbar); border-color: var(--vis-sichtbar-line); }
.lz-consent--offen { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line-strong); border-style: dashed; }
/* #92 Consent T2 (AC-A6): die Beleg-Zeit im --ok-Badge ist ein Button, sieht aber wie Inline-Text aus
   (kein Button-Chrome). Klick springt zur Beleg-Zeile im Transkript-Overlay (transkript-overlay.js). */
.lz-consent-beleg { font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lz-consent-beleg:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* #92 Consent T2 (AC-A4): ConsentBadge im Roster liegt auf eigener Zeile (volle Grid-Breite), damit
   die .proben-zeile bei ~320px nicht ueberlaeuft. */
.ts-af-consent-zelle { grid-column: 1 / -1; justify-self: start; }

/* #92 Consent T2 (AC-A5): kompakte Teilnehmerliste (Sitzungs-Seite) -- Name + ConsentBadge je Person,
   flex-wrap, damit Name+Badge bei schmalen Viewports umbrechen. Reine Tokens (light+dark). */
.tn-liste__label { font-size: 13px; color: var(--ink-muted); }
.tn-liste { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tn-liste__zeile { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tn-liste__name { font-size: 13px; font-weight: 600; color: var(--ink); }