feat: ElevenLabs Audio-Dialog für Expertenblick (Netzer/Delling TTS)

2026-04-05 23:05:53 +02:00
parent 07e0705380
commit 32de9cd5fd
4 changed files with 352 additions and 34 deletions
@@ -323,6 +323,96 @@
  margin-bottom: 20px;
 }

+/* Toggle-Zeile mit Play-Button */
+.insightToggleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.insightToggleRow .insightToggle {
+  flex: 1;
+}
+
+/* Audio-Play-Button */
+.audioBtn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 9px 12px;
+  background: linear-gradient(135deg, rgba(75,183,248,0.12) 0%, rgba(75,183,248,0.05) 100%);
+  border: 1px solid rgba(75,183,248,0.3);
+  border-radius: 12px;
+  color: var(--cyan);
+  font-size: 12px;
+  font-weight: 700;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  cursor: pointer;
+  transition: all 0.18s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.audioBtn:hover:not(:disabled) {
+  background: linear-gradient(135deg, rgba(75,183,248,0.2) 0%, rgba(75,183,248,0.08) 100%);
+  border-color: rgba(75,183,248,0.5);
+}
+
+.audioBtn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Dialog-Format: Delling / Netzer */
+.dialogLine {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  margin-bottom: 6px;
+  animation: insightFadeIn 0.2s ease;
+}
+
+.dialogLine:last-child {
+  margin-bottom: 0;
+}
+
+.speakerDelling {
+  background: rgba(148, 163, 184, 0.06);
+  border-left: 2px solid rgba(148,163,184,0.4);
+  align-items: flex-start;
+}
+
+.speakerNetzer {
+  background: rgba(254, 174, 50, 0.06);
+  border-left: 2px solid rgba(254,174,50,0.5);
+  align-items: flex-start;
+}
+
+.dialogSpeaker {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 2px;
+}
+
+.speakerDelling .dialogSpeaker {
+  color: rgba(148,163,184,0.8);
+}
+
+.speakerNetzer .dialogSpeaker {
+  color: var(--gold);
+}
+
+.dialogText {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-primary);
+  font-style: italic;
+}
+
 .insightToggle {
  width: 100%;
  display: flex;