/* Sprechprobe — Ergänzungen zum Design aus „export 2" (Case Live, Feedback v2).
   Nur, was das Design nicht hat: Kopfzeile ohne App-Shell, Einstellungen vor dem Start,
   Testeransicht, Markierungen und Notizen. */
[hidden] { display: none !important; }   /* das Design setzt display auf .btn, .cc-exhibit … */
svg.i, .sp-top svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.cc-avatar-ph svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-top { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: #fff; }
.sp-brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.sp-brand span { font-weight: 500; color: var(--muted); }
.sp-top nav a { margin-left: 18px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.sp-top nav a:hover { color: var(--brand-deep); }
.cc-live { height: calc(100vh - 56px); }
.sp-head-rechts { display: flex; align-items: center; gap: 12px; }

/* Einstellungen vor dem Start, mitten auf der Bühne */
.sp-setup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, calc(100% - 40px));
  max-height: calc(100% - 32px); overflow: auto; box-sizing: border-box;
  background: #fff; color: var(--ink); padding: 16px 18px; display: grid; gap: 12px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sp-setup.tile { height: auto; min-height: 0; align-content: start; }
.sp-setup > * { margin: 0; }
.cc-live:not([data-zustand="bereit"]) .sp-setup { display: none; }
.sp-feld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; font-size: 13px; min-width: 0; }
.sp-feld > span, .sp-feld legend { font-weight: 600; color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0; margin: 0 0 2px; }
.sp-feld .input, .sp-feld .select { margin: 0; }
.sp-personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-radio { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.sp-radio:has(input:checked) { border-color: var(--brand); background: #f3fcf7; }
.sp-radio input { margin: 2px 0 0; }
.sp-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.sp-check input { margin: 3px 0 0; }
.cc-live[data-zustand="bereit"] .cc-avatar-ph { visibility: hidden; }
.sp-hinweis { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
kbd { font-family: "JetBrains Mono", monospace; font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 4px; background: #fff; color: var(--ink-2); }
.cc-self.is-speaking { box-shadow: 0 0 0 3px var(--brand); }

/* Exhibit: Legende und Original */
.sp-legende { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; }
.sp-original { margin-top: 12px; font-size: 12px; color: var(--muted); }
.sp-original img { max-width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }
.cc-chart .b em { white-space: nowrap; }

/* Testeransicht — links über dem Bild der Interviewer:in. Bis 22.10. lag sie rechts mit z-index 5 genau dort, wo das
   Exhibit erscheint, und verdeckte es (Lauf 2026-10-22-093200, Markierung 6: „Hier wurde das exhibit nicht eingeblendet“). */
.sp-tester { position: absolute; left: 0; top: 0; bottom: 0; width: min(440px, 100%); z-index: 5; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 8px 0 30px rgba(0,0,0,.12); display: flex; flex-direction: column; padding: 14px; gap: 8px; }
/* Das Exhibit liegt immer obenauf — auch bei schmalem Fenster, wo es über der Bühne schwebt. */
.cc-exhibit { z-index: 6; }
@media (min-width: 1201px) { .cc-exhibit { position: relative; } }
.sp-tester-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.sp-zeile { font-size: 13.5px; font-weight: 600; }
.sp-mini { font-size: 12px; color: var(--muted); font-weight: 400; }
.sp-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-erkennung { min-height: 18px; font-size: 12.5px; color: var(--brand-deep); font-style: italic; }
.sp-verlauf { flex: 1; overflow: auto; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 10px; align-content: start; }
.sp-b p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; }
.sp-b.is-kandidat { padding-left: 10px; border-left: 3px solid var(--line); }
.sp-b.is-iv { padding-left: 10px; border-left: 3px solid var(--brand); }
.sp-t { font-size: 11.5px; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.sp-system { color: #2c4a7a; }
.sp-system::before { content: "System · "; font-size: 11px; color: var(--muted); }
.sp-werkzeuge { margin: 4px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.sp-werkzeuge li.is-system { color: #8a4b00; }
.sp-werkzeuge li.is-fehler { color: #b42318; }
.sp-werkzeuge code { font-family: "JetBrains Mono", monospace; font-size: 11px; }
.sp-mark { font-size: 12px; color: #8a4b00; font-weight: 600; }
.sp-eingriff, .sp-still { font-size: 12px; color: #8a4b00; }

/* Nach dem Gespräch */
.sp-nachher { max-width: 860px; }
.sp-markfeld { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 10px 0; display: grid; gap: 6px; }
.sp-kontext { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.sp-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
textarea.input { width: 100%; box-sizing: border-box; font-family: inherit; }

.sp-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 14px;
  border-radius: 8px; font-size: 13px; z-index: 20; }
@media (max-width: 760px) { .cc-dock-bar { flex-wrap: wrap; } .sp-setup { position: static; transform: none; width: auto; margin: 12px; } }
.sp-b.is-verworfen { opacity: .55; }

/* Feedback, Gutachten, Läufe, Befunde */
.sp-schmal { max-width: 980px; }
.sp-part-body { padding-top: 4px; }
.sp-krit-details summary { cursor: pointer; list-style: none; }
.sp-beleg { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 8px 0; padding-left: 10px; border-left: 2px solid var(--line); }
.sp-befund { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; display: grid; gap: 8px; }
.sp-befund h3 { margin: 0; font-size: 16px; }
.sp-befund-zeile p { margin: 4px 0 12px; font-size: 14px; line-height: 1.55; }
.sp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; line-height: 1.55; }
.sp-dl dt { color: var(--muted); font-weight: 600; }
.sp-dl dd { margin: 0; }
.sp-tabelle-wrap { overflow-x: auto; }
.sp-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sp-tabelle th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sp-tabelle td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sp-pruef { background: var(--bg-soft); }
/* Coach-Urteil (feedback.html)  [entschieden 25.10.] */
.sp-urteil-teil { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sp-urteil-kopf { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.sp-urteil-moment { margin-top: 10px; }
.sp-urteil-krit { width: auto; min-width: 104px; margin-left: 10px; }
.sp-urteil-fragen { display: grid; gap: 14px; margin: 16px 0; }
.sp-warnung { border: 1px solid var(--line); border-left: 3px solid #d97706; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }