.text-to-speech-result audio { display: block; width: 100%; margin: 1.5rem auto; }
.text-to-speech-result .workspace-run { display: inline-flex; text-decoration: none; }
.text-to-speech-result details { text-align: left; overflow-wrap: anywhere; }
.text-to-speech-result summary { cursor: pointer; }
.dubbing-audio-vorschau { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #202732, #0d1016 80%); }
.dubbing-audio-vorschau[hidden] { display: none; }
.dubbing-audio-vorschau svg { width: 88%; height: 50%; fill: none; stroke: #9aa7ba; stroke-width: 3; stroke-linecap: round; opacity: .4; }
.dubbing-audio-play { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffffff45; border-radius: 50%; background: #0b0e16b8; color: #fff; font-size: 30px; }
.video-history-gallery-open:hover .dubbing-audio-play { background: #ed2349; border-color: #ff4668; }
[data-dubbing-speaker-voices] { display: grid; gap: 12px; }
.dubbing-speaker-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .dubbing-speaker-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dubbing-speaker-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dubbing-speaker-tabs button { flex: 1 1 130px; min-width: 0; display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid #303645; border-left: 4px solid var(--speaker-color); border-radius: 10px; background: #11151d; color: #e9edf4; cursor: pointer; }
.dubbing-speaker-tabs button[aria-pressed="true"] { border-color: var(--speaker-color); background: #1b202a; box-shadow: 0 0 0 1px var(--speaker-color); }
.dubbing-speaker-tabs b { color: var(--speaker-color); font-size: 12px; }
.dubbing-speaker-tabs [data-dubbing-selected-voice] { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-dubbing-speaker-voices] > .speech-voice-field { margin: 0; padding: 14px; border: 1px solid #303645; border-radius: 12px; }
[data-dubbing-speaker-voices] .speech-voice-card.active { border-color: var(--dubbing-speaker-color); }
.dubbing-voice-markers { position: absolute; right: 5px; bottom: 4px; display: flex; gap: 3px; pointer-events: none; }
.dubbing-voice-markers > span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--speaker-color); color: #090b10; font-size: 9px; font-weight: 800; }
[data-dubbing-voice-markers]:has(> span:nth-child(3)) { display: grid; grid-template-columns: repeat(2, 12px); gap: 2px; }
[data-dubbing-voice-markers]:has(> span:nth-child(3)) > span { width: 12px; height: 12px; font-size: 8px; }
[data-dubbing-speaker-voices] .speech-voice-card:has([data-dubbing-voice-markers] > span:nth-child(3)) .speech-voice-text { padding-right: 30px; }
[data-dubbing-speaker-voices] .speech-voice-card:has([data-dubbing-voice-markers] > span:nth-child(3)) .speech-voice-mark { display: none; }
[data-dubbing-speaker-voices] .speech-voice-text { padding-right: 20px; }
/* Die drei Einstellungen stehen vor der breiten Stimmenauswahl zusammen. */
@media (min-width: 761px) {
  form[data-tool-id="media-dubbing-shared"] .workspace-group-grid:has([data-voice-source]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* MOB19-25 (19.10.2026): Ohne „Stimmquelle" blieb das Raster zweispaltig, die Zielsprache stand trotzdem in Spalte 3 – eine
     unsichtbare dritte Spalte entstand, und Felder über die volle Breite (Stimmen, optionale Angaben) reichten nur über zwei Drittel. */
  /* !important: ai-contentfactory-control-center.css setzt hier repeat(auto-fit, minmax(max(220px, …), 1fr)) !important – bei
     690 px Breite sind das zwei Spalten, auch dann, wenn „Stimmquelle" da ist. */
  form[data-tool-id="media-dubbing-shared"] .workspace-group-grid:is(:has([data-voice-source]), :has(> .workspace-field > [data-config-key="TARGET_LANGUAGE"])) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  form[data-tool-id="media-dubbing-shared"] .workspace-field:has(> [data-voice-source]) { grid-column: 1; order: 1; align-content: start; }
  form[data-tool-id="media-dubbing-shared"] [data-config-field="SPEAKER_COUNT_HINT"] { grid-column: 2; order: 2; align-content: start; }
  form[data-tool-id="media-dubbing-shared"] .workspace-field:has(> [data-config-key="TARGET_LANGUAGE"]) { grid-column: 3; order: 3; align-content: start; }
  form[data-tool-id="media-dubbing-shared"] [data-dubbing-speaker-voices] { grid-column: 1 / -1; order: 4; }
  form[data-tool-id="media-dubbing-shared"] .workspace-group-grid > .workspace-optional-fields { grid-column: 1 / -1; order: 5 !important; }
}
.text-to-speech-result .speech-transcript { white-space: pre-wrap; line-height: 1.6; }
/* Die Felder sind Grids ohne align-content: ein Auswahlfeld ohne Hilfetext
   wurde auf die Zeilenhoehe gestreckt (11.09.2026: "Stimmquelle" 62 px neben
   "Stimme" 51 px). Oben ausrichten, dann sind alle Felder gleich hoch. */
#workspace-body[data-tool="text-to-speech"] .workspace-field,
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-field { align-content: start; }
/* Einwilligung zum Klonen: ein Kaestchen, kein Banner. Die allgemeine Regel
   zieht Felder mit .workspace-check ueber die volle Breite und gibt dem
   Kaestchen die 46 px Mindesthoehe der Eingabefelder. Hier: linke Spalte
   unter "Stimmquelle", so hoch wie die Auswahlfelder daneben. */
#workspace-body[data-tool="text-to-speech"] [data-config-field="SPEECH_CLONING_CONSENT"],
.generic-tool-modal[data-generic-tool-id="text-to-speech"] [data-config-field="SPEECH_CLONING_CONSENT"] { grid-column: 1 / 2; }
#workspace-body[data-tool="text-to-speech"] [data-config-field="SPEECH_CLONING_CONSENT"] .workspace-check,
.generic-tool-modal[data-generic-tool-id="text-to-speech"] [data-config-field="SPEECH_CLONING_CONSENT"] .workspace-check { min-height: 51px; padding: 0 14px; font-size: 13px; font-weight: 500; }
#workspace-body[data-tool="text-to-speech"] [data-config-field="SPEECH_CLONING_CONSENT"] .workspace-check input,
.generic-tool-modal[data-generic-tool-id="text-to-speech"] [data-config-field="SPEECH_CLONING_CONSENT"] .workspace-check input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: #ff304f; }
.speech-text-field { grid-column: 1 / -1; }
/* Kompakter (AL-20260927-45): etwa sechs Zeilen statt 240 px, waechst beim
   Schreiben bis 360 px mit (field-sizing), aufziehen bleibt moeglich. */
.speech-text-field textarea { min-height: 132px; max-height: 360px; field-sizing: content; resize: vertical; }

/* Der Wert bleibt beim Ziehen sichtbar, die Skala zeigt den nutzbaren Bereich.
   Die 0,05er-Schritte lassen sich per Tastatur ebenso exakt einstellen. */
.speech-speed-field { min-width: 0; }
.speech-speed-control { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border: 1px solid #363d50; border-radius: 10px; background: #111621; }
.speech-speed-control input[type="range"] { display: block; width: 100%; min-width: 0; height: 6px; min-height: 0; margin: 0; padding: 0; appearance: none; border: 0; border-radius: 999px; background: linear-gradient(to right,#ff456a var(--speech-speed-progress,50%),#343b4d var(--speech-speed-progress,50%)); cursor: pointer; accent-color: #ff456a; }
.speech-speed-control input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; appearance: none; border: 3px solid #111621; border-radius: 50%; background: #ff5375; box-shadow: 0 0 0 1px #ff8ca4,0 2px 8px #0008; }
.speech-speed-control input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 3px solid #111621; border-radius: 50%; background: #ff5375; box-shadow: 0 0 0 1px #ff8ca4,0 2px 8px #0008; }
.speech-speed-control output { min-width: 48px; color: #fff1f4; font: 700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: right; }
.speech-speed-control input[type="range"]:focus-visible { outline: 2px solid #ff7d99; outline-offset: 5px; }
.speech-speed-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: #8f9bb1; font-size: 10px; line-height: 1.2; }
.speech-speed-scale span:nth-child(2) { color: #c2cad9; text-align: center; }
.speech-speed-scale span:last-child { text-align: right; }

/* Kopfzeile, Raster, Zähler und Eckaktionen verwenden die Videogalerie.
   Nur das Vorschaumotiv und die Audiobedienung sind medienspezifisch. */
.speech-gallery-card { display: grid; place-items: center; }
.speech-gallery-card audio[hidden] { display: none; }
.speech-audio-cover { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, #202732, #0d1016 75%); }
.speech-audio-cover svg { width: 88%; height: 40%; fill: none; stroke: #9aa7ba; stroke-width: 3; stroke-linecap: round; opacity: .32; }
.speech-preview-play { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff45; border-radius: 50%; background: #0b0e16b8; color: #fff; font-size: 30px; cursor: pointer; }
.speech-preview-play:hover,.speech-gallery-card.is-playing .speech-preview-play { background: #ed2349; border-color: #ff4668; }
.speech-gallery-card.is-playing .speech-audio-cover svg { stroke: #ff4168; opacity: .8; }
.speech-gallery-caption { position: absolute; inset: auto 0 0; padding: 30px 18px 14px; background: linear-gradient(transparent,#07090ee8); pointer-events: none; }
.speech-gallery-title { display: block; max-width: 100%; border: 0; padding: 0; background: none; color: #f5f6f8; font: 600 13px/1.4 'Space Grotesk',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; pointer-events: auto; }
.speech-gallery-caption small { color: #a2aabc; font-size: 10px; }
.speech-preview-state { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; color: #d8dde7; font-size: 13px; }
.speech-preview-state > i { font-size: 26px; }
.speech-gallery-card.is-failed { border-color: #822638 !important; }
.speech-gallery-card.is-failed .speech-audio-cover { background: radial-gradient(ellipse at 50% 50%,#27131d,#0d1016 75%); }
.speech-gallery-card.is-failed .speech-audio-cover svg,.speech-gallery-card.is-cancelled .speech-audio-cover svg { visibility: hidden; }
.speech-gallery-card.is-failed .speech-preview-state > i { color: #ff5374; }
.speech-gallery-card [role="alert"] { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; margin: 0; padding: 8px; background: #38111e; color: #ffc4d0; font-size: 11px; }

/* Kartenfläche öffnet Details; Player und Eckaktionen bleiben unabhängig. */
.speech-gallery-card .speech-open-recording{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.speech-gallery-card .speech-preview-play{z-index:3}
.speech-gallery-card .speech-gallery-caption{z-index:2}
.speech-gallery-card .video-history-gallery-delete,.speech-gallery-card .video-history-gallery-download{z-index:4}
.speech-open-hint{display:block;margin-top:6px;color:#c2ccde;font-size:11px}
.speech-open-recording:focus-visible{outline:2px solid #ff3656;outline-offset:-3px;border-radius:12px}
.text-to-speech-result details[open]{margin-top:24px;padding:18px;background:#171a23;border:1px solid #282d3a;border-radius:12px}

/* Aufnahme-Details: kompakter Kopf, eigener Hörbereich, lesbarer Ausgangstext. */
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-dialog{border-radius:18px;overflow:hidden}
.generic-tool-modal .speech-detail.processing-finished{width:100%;max-width:none;margin:0;padding:30px;text-align:left;box-sizing:border-box}
.speech-detail-header{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.speech-detail-icon{display:grid;place-items:center;flex:0 0 56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#45202e,#251923);border:1px solid #663043;color:#ff5273;font-size:30px}
.speech-detail-heading{flex:1;min-width:0}
.speech-detail-eyebrow{display:block;color:#929cad;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.speech-detail .speech-detail-heading h3{margin:0 0 10px;font-size:25px;font-weight:650;line-height:1.25;overflow-wrap:anywhere;color:#f3f5fa}
.speech-detail-meta{display:flex;gap:8px;flex-wrap:wrap}
.speech-detail-meta span{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid #2b303d;border-radius:6px;background:#171b24;font-size:11px;color:#bcc6d7}
.speech-detail .speech-detail-download{display:inline-flex;align-items:center;gap:8px;flex:none;width:auto;min-width:0;margin:0;padding:11px 16px;border-radius:10px;font-size:12px;box-shadow:0 4px 18px #ff30501a}
.speech-detail-player{padding:18px 22px 16px;border:1px solid #303646;border-radius:14px;background:linear-gradient(120deg,#1b202d,#141822);box-shadow:inset 0 1px #ffffff05}
.speech-player-label{display:flex;align-items:center;gap:8px;color:#c8d0df;font-size:11px;font-weight:600;letter-spacing:.02em}
.speech-player-label i{color:#ff5273;font-size:17px}
.speech-detail .speech-detail-player audio{width:100%;max-width:none;height:42px;margin:12px 0 0;color-scheme:dark}
.speech-detail.text-to-speech-result details.speech-detail-text{margin-top:22px;padding:0;border:1px solid #2b303d;border-radius:14px;background:#11151e;overflow:hidden}
.speech-detail-text summary{display:flex;align-items:center;gap:9px;padding:16px 22px;font-size:12px;font-weight:600;color:#dce3ef;border-bottom:1px solid transparent;list-style:none}
.speech-detail-text summary::-webkit-details-marker{display:none}
.speech-detail-text summary:after{content:'⌄';margin-left:auto;color:#8b96a9}
.speech-detail-text[open] summary{border-bottom-color:#292f3b}
.speech-detail-text[open] summary:after{transform:rotate(180deg)}
.speech-detail-text summary i{color:#98a5bd;font-size:18px}
.speech-detail.text-to-speech-result .speech-transcript{margin:0;padding:22px;font-size:14px;line-height:1.85;color:#c7d0df;max-width:none;white-space:pre-wrap}
@media(max-width:650px){.speech-speed-control{min-height:44px;padding:0 10px;gap:10px}.speech-speed-scale{font-size:9px}.generic-tool-modal .speech-detail.processing-finished{padding:18px}.speech-detail-header{flex-wrap:wrap;gap:12px}.speech-detail .speech-detail-download{margin-left:68px}.speech-detail .speech-detail-heading h3{font-size:21px}.speech-detail-player{padding:14px}.speech-detail-text summary{padding:14px}.speech-detail.text-to-speech-result .speech-transcript{padding:16px}}
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-dialog{width:min(960px,calc(100vw - 32px));border-radius:18px!important}

/* Audio-Studio: ruhige Flächen, eigener Player und echte SVG-Symbole. */
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-dialog{width:min(1180px,calc(100vw - 36px));border-radius:18px!important;background:#0d1017}
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-content{padding:0;background:transparent}
.generic-tool-modal .speech-detail.processing-finished{padding:32px;background:radial-gradient(ellipse at top left,#24192355,transparent 60%)}
.speech-detail-header{gap:16px;margin-bottom:26px}
.speech-detail-icon{width:60px;height:60px;flex-basis:60px;color:#ff5576;background:linear-gradient(145deg,#452333,#241a28);box-shadow:inset 0 1px #ffffff0d;border-color:#663246}
.speech-detail-icon svg{display:block;flex:none}
.speech-detail .speech-detail-heading h3{font-size:26px;letter-spacing:-.025em;margin-bottom:8px}
.speech-detail-eyebrow{font-size:9px;letter-spacing:.13em;color:#a39aaa}
.speech-detail-meta span{border:0;background:transparent;padding:0 10px 0 0;font-size:12px;color:#a0a9bb}
.speech-detail .speech-detail-download{border:1px solid #4a3543;background:#261c27;color:#ffbbca;box-shadow:none;padding:10px 14px}
.speech-detail .speech-detail-download:hover{background:#392232;border-color:#9e4360;color:white}
.speech-detail-player{padding:22px 24px 24px;background:linear-gradient(115deg,#1d202f,#151925);border-color:#343747;border-radius:16px;box-shadow:0 12px 28px #0000001a,inset 0 1px #ffffff05}
.speech-player-label{font-size:10px;color:#9da8bd;letter-spacing:.07em;text-transform:uppercase}
.speech-detail .speech-detail-player audio[hidden]{display:none!important}
.speech-studio-controls{display:flex;align-items:center;gap:20px;margin-top:18px}
.speech-studio-controls button{display:grid;place-items:center;flex:none;cursor:pointer}
.speech-studio-controls .speech-studio-play{width:54px;height:54px;border:1px solid #ff5f7e;border-radius:50%;color:white;background:linear-gradient(145deg,#ff4067,#e7194c);box-shadow:0 6px 22px #f4225029}
.speech-studio-play:hover{filter:brightness(1.13)}
.speech-studio-timeline{flex:1;min-width:0}
.speech-studio-times{display:flex;justify-content:space-between;margin-bottom:7px;font:500 11px/1.4 ui-monospace,monospace;color:#8693aa}
.speech-studio-times span:first-child{color:#e2e6ee}
.speech-studio-timeline input{display:block;appearance:none;width:100%;height:5px;min-height:0;padding:0;margin:0;border:0;border-radius:10px;background:linear-gradient(to right,#ff4b72 var(--played,0%),#373c4e var(--played,0%));cursor:pointer;accent-color:#ff4b72}
.speech-studio-timeline input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ff4b7222}
.speech-studio-timeline input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
/* Die Geschwindigkeit ist seit dem 18.09.2026 ein Schieberegler von 0,6 bis
   2,0 statt fuenf fester Stufen - und sie gilt auch fuer die
   heruntergeladene Datei. Der Wert steht daneben, sonst raet man beim
   Ziehen. */
.speech-studio-speed{display:flex;align-items:center;gap:8px;height:32px;padding:0 9px;border:1px solid #363d50;border-radius:7px;background:#1b2130;color:#bdc7d9;font-size:11px;color-scheme:dark}
.speech-studio-speed input[type=range]{width:96px;height:4px;margin:0;appearance:none;border-radius:99px;background:#333b4d;cursor:pointer}
.speech-studio-speed input[type=range]::-webkit-slider-thumb{width:13px;height:13px;appearance:none;border:2px solid #fff;border-radius:50%;background:#ff304f;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.speech-studio-speed input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#ff304f}
.speech-studio-speed b{min-width:44px;color:#e7ecf5;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:620px){.speech-studio-speed input[type=range]{width:64px}}
.speech-studio-controls :focus-visible{outline:2px solid #ff6686;outline-offset:5px}
.speech-detail.text-to-speech-result details.speech-detail-text{margin-top:28px;background:transparent;border:0;border-radius:0}
.speech-detail-text summary{padding:0 0 16px;font-size:12px;letter-spacing:.01em;color:#d5dce9}
.speech-detail-text[open] summary{border-bottom-color:#292e3b}
.speech-detail-text summary svg{color:#8b97ad}
.speech-detail.text-to-speech-result .speech-transcript{padding:20px 0 0;font-size:15px;line-height:1.9;color:#bdc6d7}
@media(max-width:650px){.generic-tool-modal .speech-detail.processing-finished{padding:22px}.speech-detail-header{gap:12px}.speech-detail-icon{width:48px;height:48px;flex-basis:48px}.speech-detail .speech-detail-download{margin-left:60px}.speech-detail-player{padding:18px 16px}.speech-studio-controls{gap:12px}.speech-studio-controls .speech-studio-play{width:44px;height:44px}.speech-detail.text-to-speech-result .speech-transcript{font-size:14px}}

.speech-detail .speech-detail-download{display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;margin-left:0;border-radius:10px}

/* Stimmen-Galerie: 30 Stimmen mit Hörprobe.

   Erste Fassung war zu hoch: vier Zeilen je Karte, dazu ein eigener Bildlauf
   im Formular ("kannst du es kompakter erstellen … die ganze Box gefällt mir
   nicht", 13.09.2026). Jetzt zwei Zeilen je Karte, zehn Stimmen je Seite und
   geblättert statt gescrollt - der Kasten hat keine eigene Bildlaufleiste
   mehr. */
.speech-voice-field{grid-column:1 / -1}
.speech-voice-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.speech-voice-filter-button{padding:5px 11px;border:1px solid #363d50;border-radius:999px;background:#161b27;color:#aab4c7;font-size:11.5px;font-weight:500;cursor:pointer}
.speech-voice-filter-button:hover{border-color:#4a5470;color:#dde3ee}
.speech-voice-filter-button.active{border-color:#ff5f7e;background:#2a1926;color:#ffe5ea}
.speech-voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px}
.speech-voice-card{position:relative;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #2f3546;border-radius:10px;background:#141824;color:#dde3ee;text-align:left;cursor:pointer}
.speech-voice-card:hover{border-color:#4a5470;background:#181d2b}
.speech-voice-card.active{border-color:#ff5f7e;background:linear-gradient(140deg,#221624,#171b28)}
.speech-voice-card[hidden]{display:none}
.speech-voice-play{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid #ffffff26;border-radius:50%;background:#0b0e16;color:#fff;font-size:16px}
.speech-voice-card:hover .speech-voice-play{border-color:#ff5f7e;color:#ffbecb}
.speech-voice-card.is-playing .speech-voice-play{border-color:#ff5f7e;background:linear-gradient(145deg,#ff4067,#e7194c)}
.speech-voice-text{display:grid;gap:1px;min-width:0}
.speech-voice-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Die Beschreibung darf umbrechen statt "männlich · tempera…" abzuschneiden (WL22-41) - wie bisher schon auf dem Telefon. */
.speech-voice-meta{font-size:10px;color:#8f9bb1;line-height:1.25;hyphens:auto;overflow-wrap:break-word}
.speech-voice-mark{position:absolute;top:6px;right:7px;display:none;color:#ff5f7e;font-size:12px}
.speech-voice-card.active .speech-voice-mark{display:block}
.speech-voice-card:focus-visible{outline:2px solid #ff6686;outline-offset:3px}
/* Blätterzeile: nur da, wenn es mehr als eine Seite gibt. */
.speech-voice-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:9px}
.speech-voice-pager[hidden]{display:none}
.speech-voice-pager button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #363d50;border-radius:9px;background:#161b27;color:#c5cddb;font-size:17px;cursor:pointer}
.speech-voice-pager button:hover:not(:disabled){border-color:#ff5f7e;color:#ffbecb}
.speech-voice-pager button:disabled{opacity:.35;cursor:default}
.speech-voice-pager span{min-width:44px;color:#8f9bb1;font-size:11px;text-align:center}
.speech-voice-hint{display:block;margin-top:9px}
.speech-voice-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;margin-top:9px}
.speech-voice-footer .speech-voice-hint,.speech-voice-footer .speech-voice-pager{margin-top:0}
.speech-voice-footer .speech-voice-pager{grid-column:2}
@media(max-width:650px){.speech-voice-footer{grid-template-columns:minmax(0,1fr) auto;gap:10px}.speech-voice-footer .speech-voice-hint{font-size:10px;line-height:1.5}}
.speech-voice-error{margin:8px 0 0;color:#ff9db0;font-size:12px}
.speech-voice-error[hidden]{display:none}
/* Der Abspieler des Browsers taucht nur auf, wenn unsere Wiedergabe gesperrt
   wurde - dann ist er der einzige Weg zur Hörprobe. */
.speech-voice-field audio[controls]{display:block;width:100%;height:34px;margin-top:8px}
@media(max-width:650px){
  .speech-text-field textarea{height:96px;min-height:96px;max-height:96px;resize:none;overflow-y:auto}
  .speech-voice-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%}
  .speech-voice-filter-button{min-width:0;padding:5px 4px;font-size:9px;white-space:nowrap}
  /* Jede Seite zeigt zehn Karten. Feste Zeilen verhindern, dass eine lange
     Charakter-Beschriftung die Navigation und den Hinweis verschiebt. */
  .speech-voice-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:54px}
  .speech-voice-card{height:54px;min-height:0}
  /* Auf dem Telefon ist die Karte halb so breit - dort darf die Zeile
     umbrechen, statt "tief - gleichmaessig" abzuschneiden. */
  .speech-voice-meta{white-space:normal;line-height:1.25}
}

/* Das Produktionsfenster darf an Tablet-Kanten nicht durch seine eigene
   Wunschbreite über den verfügbaren Innenraum hinauswachsen. Der erste
   Formularabschnitt bleibt kurz, damit die Stimmen schneller erreichbar sind. */
@media(max-width:760px){
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-dialog{box-sizing:border-box;max-width:100%}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-content,
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] #workspace-body,
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-group,
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-group-grid,
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-field{min-width:0;max-width:100%}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-intro-card{margin-bottom:7px;padding:9px 10px;gap:9px}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-intro-card p{font-size:9.5px;line-height:1.35}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .speech-text-field textarea{height:112px;min-height:112px;max-height:112px;resize:none;overflow-y:auto}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-actions{grid-template-columns:1fr!important;justify-items:center}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-actions .workspace-run{grid-column:1!important;justify-self:center!important;margin-inline:auto}
}

@media(max-width:650px){
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .speech-text-field textarea{height:96px;min-height:96px;max-height:96px}
}

/* Die Audio-Detailansicht braucht am Desktop einen abgesicherten Rahmen. Im
   Produktionsformular auf Mobil und Tablet würde derselbe Rahmen jedoch die
   darunterliegenden Felder abschneiden. */
@media(max-width:1024px){
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .generic-tool-modal-dialog{height:auto;max-height:none;overflow:visible}
}

/* Blaettern durch die Ergebnisse (CFAI-20260921-014): Pfeil, Fenster, Pfeil
   nebeneinander - dieselbe Anordnung wie im Bildeditor. Die Pfeile selbst
   bringen ihre Gestalt aus ai-contentfactory-result.css (.thumbnail-editor-nav). */
.generic-tool-modal[data-generic-tool-id="text-to-speech"]:has(> [data-speech-nav]){display:flex;align-items:center;justify-content:center;gap:14px}
.generic-tool-modal[data-generic-tool-id="text-to-speech"]:has(> [data-speech-nav]) .generic-tool-modal-dialog{order:1;width:min(1180px,calc(100vw - 160px))}
@media(max-width:900px){
  .generic-tool-modal[data-generic-tool-id="text-to-speech"]:has(> [data-speech-nav]){gap:6px}
  .generic-tool-modal[data-generic-tool-id="text-to-speech"]:has(> [data-speech-nav]) .generic-tool-modal-dialog{width:calc(100vw - 104px)}
}
/* Schmale Karten, z. B. zwei oder drei Spalten auf dem Tablet (CFAI-MOB-20260924-069): Der Play-Knopf
   sitzt mittig und lag damit auf dem Titel. Unter 420 px Kartenbreite steht er rechts neben Titel und
   Dauer, der Text bekommt rechts Platz frei. Das gilt auch für die 340 px breiten Handykarten, wo lange
   Titel ebenfalls unter den Knopf liefen. */
.speech-gallery-card { container-type: inline-size; container-name: sprachkarte; }
@container sprachkarte (max-width: 420px) {
  .speech-preview-play { align-self: end; justify-self: end; width: 40px; height: 40px; margin: 0 14px 36px 0; font-size: 24px; }
  .speech-gallery-card .speech-gallery-caption { padding-right: 64px; }
  /* Einzeilig, sonst schiebt der umbrechende Hinweis den Titel unter den Löschen-Knopf. */
  .speech-open-hint { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* Letzte Cleaning Prüfung: 25.09.2026 */
/* Letztes Cleaning: - */

/* Audio-Tags im Feld "Text zum Vorlesen" (AL-20260927-23): Knopf "Ausdruck
   einfuegen", Zeichenstand ohne Tags, Menue mit der festen Tag-Liste. */
.audio-tags-leiste { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.audio-tags-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid #343a49; border-radius: 9px; background: #181c26; color: #e6e9f1; font: 650 12px/1 'DM Sans', sans-serif; cursor: pointer; }
.audio-tags-knopf:hover, .audio-tags-knopf[aria-expanded="true"] { border-color: #ff315d; color: #fff; }
.audio-tags-knopf i { color: #ff526b; font-size: 15px; }
.audio-tags-stand { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #8c94a6; font-size: 11px; }
.audio-tags-stand .ist-zu-lang { color: #ff8296; font-weight: 700; }
.audio-tags-stand .ist-unbekannt { color: #e8c26a; }
.audio-tags-menue { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: grid; gap: 10px; width: min(520px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto; padding: 12px; border: 1px solid #343a49; border-radius: 12px; background: #11141c; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.audio-tags-gruppe b { display: block; margin-bottom: 6px; color: #8c94a6; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.audio-tags-gruppe div { display: flex; flex-wrap: wrap; gap: 6px; }
.audio-tags-gruppe button { padding: 6px 10px; border: 1px solid #2b303c; border-radius: 999px; background: #171b24; color: #d7dbe5; font: 600 12px/1 'DM Sans', sans-serif; cursor: pointer; }
.audio-tags-gruppe button:hover, .audio-tags-gruppe button:focus-visible { border-color: #ff315d; color: #fff; }
.speech-run-progress{display:block;width:min(180px,70%);height:3px;overflow:hidden;border-radius:999px;background:#292d37}
.speech-run-progress i{display:block;width:36%;height:100%;border-radius:inherit;background:#ff4668;animation:speech-run-progress 1.5s ease-in-out infinite alternate}
@keyframes speech-run-progress{from{transform:translateX(0)}to{transform:translateX(175%)}}

/* Fokus in der Sprachausgabe ist neutral (AL-20261012-21): der rote Ring sah wie eine Fehlermeldung aus. Rot bleibt echten Fehlern vorbehalten. */
:is(#workspace-body[data-tool="text-to-speech"], .generic-tool-modal[data-generic-tool-id="text-to-speech"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus {
  border-color: #8b93a6;
  box-shadow: 0 0 0 3px rgba(139, 147, 166, .22);
}

/* WL-41 (12.10.2026): Produktionsfenster der Sprachausgabe in der Höhe kompakter, damit es bei
   üblicher Fensterhöhe ohne Scrollen passt und „Produktion starten“ ganz sichtbar ist. Nur Abstände
   und die Starthöhe des Textfelds (wächst beim Tippen weiter); nichts entfällt, Schrift bleibt.
   Werte vorher auf Dev im Fenster erprobt: Inhalt 949 → 840 px. */
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-intro-card { padding: 10px 14px !important; margin-bottom: 10px !important; }
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-group > legend { padding-bottom: 8px !important; }
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-group { padding-bottom: 6px !important; }
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-group-grid { padding: 14px 20px !important; row-gap: 12px !important; }
/* MOB18-01 (18.10.2026): am Handy ohne seitlichen Innenabstand, die Felder nutzen die volle Breite
   und stehen bündig mit „Briefing“ und der Trennlinie darüber. Tablet und Desktop unverändert. */
@media (max-width: 650px) {
  .generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-group-grid { padding-left: 0 !important; padding-right: 0 !important; }
}
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .speech-text-field textarea { min-height: 104px !important; height: 104px; }
.generic-tool-modal[data-generic-tool-id="text-to-speech"] .workspace-actions { padding-top: 10px !important; padding-bottom: 10px !important; }