/* ════════════════════════════════════════════════════════════════
   style.css — Contentflow
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg:           #f0f2f5;
  --surface:      #ffffff;
  --border:       #e2e4e9;
  --text:         #1a1d23;
  --text-muted:   #6b7280;
  --nav-bg:       #1e2129;
  --nav-text:     #f0f1f3;
  --nav-muted:    #9ca3af;
  --blue:         #3b82f6;
  --blue-light:   #eff6ff;
  --green:        #10b981;
  --green-light:  #ecfdf5;
  --orange:       #f59e0b;
  --orange-light: #fffbeb;
  --purple:       #8b5cf6;
  --purple-light: #f5f3ff;
  --red:          #b91c1c;
  --red-light:    #fee2e2;
  --teal:         #0891b2;
  --teal-light:   #ecfeff;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --transition:   0.18s ease;
  --text-micro:   12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-md:      20px;
  --text-lg:      26px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e4e9; border-radius: 3px; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 20px; right: 20px;
  padding: 9px 16px; border-radius: 8px;
  background: #1e2129; color: #f0f1f3;
  font-size: var(--text-sm); font-weight: 500;
  opacity: 0; transform: translateY(6px);
  transition: all 0.2s; z-index: 9999; pointer-events: none;
}
.toast.show    { opacity: 1; transform: translateY(0); }
.toast.success { background: #065f46; }
.toast.error   { background: #991b1b; }

/* ════════════════════════════════════════════════════════════════
   LOGIN (login.html – eigenständige Seite, nutzt diese Styles nicht)
   Die folgenden Klassen sind nur noch als Referenz erhalten.
   ════════════════════════════════════════════════════════════════ */
.login-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; overflow: hidden;
}
.login-header {
  background: var(--nav-bg); padding: 40px 40px 32px; text-align: center;
}
.app-logo {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.app-logo svg { color: var(--nav-text); opacity: 0.9; }
.app-name {
  font-family: 'DM Serif Display', serif;
  font-size: 32px; color: var(--nav-text);
  letter-spacing: -0.5px; margin-bottom: 6px;
}
.app-tagline { font-size: 13px; color: var(--nav-muted); font-weight: 300; }
.login-body { padding: 36px 40px 40px; }
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 7px;
}
.form-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--bg); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12); background: #fff;
}
.form-input::placeholder { color: #b0b6c1; }
.login-error {
  display: none; background: var(--red-light);
  border: 1px solid #fca5a5; color: var(--red);
  font-size: 13px; padding: 10px 14px;
  border-radius: var(--radius-sm); margin-bottom: 18px;
}
.login-error.visible { display: block; }
.btn-login {
  width: 100%; padding: 13px;
  background: var(--nav-bg); color: var(--nav-text);
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.02em;
  transition: background var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login:hover    { background: #2d3340; }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-login .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite; display: none;
}
.btn-login.loading .spinner   { display: block; }
.btn-login.loading .btn-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   APP SHELL – SIDEBAR + TOOL-BEREICH
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar (#verwaltung) ── */
#verwaltung {
  width: 220px; min-width: 220px;
  background: #1e2129;
  display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  flex-shrink: 0;
  transition: width 0.25s ease, min-width 0.25s ease;
}
#verwaltung.collapsed { width: 44px; min-width: 44px; overflow-y: hidden; }

/* Header-Zeile der Sidebar */
.cf-vw-header {
  padding: 18px 14px 14px;
  border-bottom: 1px solid #2d3340;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cf-vw-brand {
  font-family: 'DM Serif Display', serif;
  font-size: 17px; color: #f0f1f3;
  letter-spacing: -0.2px; white-space: nowrap; overflow: hidden;
}
#verwaltung.collapsed .cf-vw-brand { display: none; }
.cf-vw-collapse-btn {
  background: none; border: none; color: #6b7280; cursor: pointer;
  padding: 4px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.cf-vw-collapse-btn:hover { background: #2d3340; color: #f0f1f3; }
.cf-vw-collapse-btn svg { transition: transform 0.25s; }
#verwaltung.collapsed .cf-vw-collapse-btn svg { transform: rotate(180deg); }
#verwaltung.collapsed .cf-vw-header { justify-content: center; }

/* Nav-Items */
.cf-vw-nav {
  flex: 1; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.cf-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px;
  color: #9ca3af; text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap; overflow: hidden;
}
.cf-nav-item:hover  { background: #2d3340; color: #f0f1f3; }
.cf-nav-item.active { background: #2d3340; color: #f0f1f3; border-left: 3px solid #3b82f6; padding-left: 7px; }
.cf-nav-item svg    { flex-shrink: 0; }
.cf-nav-label       { overflow: hidden; }
#verwaltung.collapsed .cf-nav-label { display: none; }
#verwaltung.collapsed .cf-nav-item  { justify-content: center; padding: 9px; }
#verwaltung.collapsed .cf-nav-item.active { padding-left: 9px; border-left: none; border-right: 3px solid #3b82f6; }

/* Footer mit API-Keys, User + Logout */
.cf-vw-footer {
  padding: 8px 8px 12px;
  border-top: 1px solid #2d3340;
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.cf-vw-keys {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px;
  background: none; border: none; cursor: pointer; width: 100%; text-align: left;
  color: #9ca3af; font-size: 14px; font-weight: 500; font-family: inherit;
  white-space: nowrap; overflow: hidden;
  transition: background 0.15s, color 0.15s;
}
.cf-vw-keys:hover { background: #2d3340; color: #f0f1f3; }
.cf-vw-keys svg { flex-shrink: 0; }
.cf-vw-footer-row { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.cf-vw-user {
  flex: 1; font-size: 12px; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#verwaltung.collapsed .cf-vw-user { display: none; }
.cf-vw-logout {
  background: none; border: none; color: #6b7280; cursor: pointer;
  padding: 4px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.cf-vw-logout:hover { color: #f87171; background: rgba(248,113,113,0.1); }
#verwaltung.collapsed .cf-vw-keys { justify-content: center; padding: 9px; }
#verwaltung.collapsed .cf-vw-footer-row { justify-content: center; }

/* ── Tool-Bereich (rechts) ── */
#tool-bereich {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}

/* ── Toolbar ── */
.app-toolbar {
  height: 48px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; gap: 8px;
  flex-shrink: 0;
}
.toolbar-title { font-size: var(--text-base); font-weight: 600; color: var(--text); flex: 1; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: none; font-family: inherit; font-size: var(--text-sm);
  font-weight: 600; cursor: pointer; transition: all var(--transition);
  background: var(--nav-bg); color: var(--nav-text); white-space: nowrap;
}
.btn-primary:hover { background: #2d3340; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-family: inherit; font-size: var(--text-sm);
  font-weight: 500; cursor: pointer; transition: all var(--transition);
  background: none; color: var(--text-muted); white-space: nowrap;
}
.btn-secondary:hover { border-color: #9ca3af; color: var(--text); }

/* ── Formular (generisch) ── */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field label {
  font-size: var(--text-micro); font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.field input, .field textarea, .field select {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: var(--text-sm); font-family: inherit;
  color: var(--text); background: var(--surface); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.field textarea { resize: vertical; min-height: 70px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--text-md); font-weight: 700; color: var(--text); }
.btn-modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: var(--radius-sm); transition: all var(--transition);
  display: flex; align-items: center;
}
.btn-modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body   { padding: 20px 24px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px 20px; border-top: 1px solid var(--border);
}

/* Loading Spinner */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite; display: none;
}
.loading .spinner   { display: inline-block; }
.loading .btn-label { display: none; }

/* ════════════════════════════════════════════════════════════════
   INDEX: THEMENBLOCK-ÜBERSICHT
   ════════════════════════════════════════════════════════════════ */
.wochen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; max-width: 1200px;
}
.woche-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: 20px; cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  position: relative; overflow: hidden;
}
.woche-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.woche-card.status-planning::before { background: var(--orange); }
.woche-card.status-active::before   { background: var(--green); }
.woche-card.status-done::before     { background: var(--text-muted); }
.woche-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.woche-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.woche-date { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.woche-status-badge {
  font-size: var(--text-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 3px 8px; border-radius: 20px;
}
.woche-status-badge.planning { background: var(--orange-light); color: #d97706; }
.woche-status-badge.active   { background: var(--green-light);  color: #059669; }
.woche-status-badge.done     { background: #f3f4f6; color: var(--text-muted); }
.woche-topic   { font-size: var(--text-base); font-weight: 600; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woche-podcast { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woche-stats   { display: flex; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.woche-stat    { display: flex; align-items: center; gap: 4px; font-size: var(--text-micro); color: var(--text-muted); }
.woche-card-new {
  background: #f9fafb; border: 2px dashed var(--border);
  border-radius: var(--radius-md); padding: 20px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 140px;
  color: var(--text-muted); font-size: var(--text-sm);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.woche-card-new:hover { border-color: #9ca3af; background: #f3f4f6; color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   EINSTELLUNGEN
   ════════════════════════════════════════════════════════════════ */

/* ── Haupt-Wrapper ── */
.einst-root {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Channel-Tab-Leiste ── */
.channel-bar {
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  padding: 0 20px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; overflow-x: auto; height: 52px;
}
.channel-bar::-webkit-scrollbar { height: 0; }

.channel-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: none; font-family: inherit;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.channel-tab:hover  { border-color: #9ca3af; color: var(--text); background: var(--bg); }
.channel-tab.active { border-color: var(--blue); color: var(--blue); background: var(--blue-light); font-weight: 600; }
.channel-tab .tab-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #d1d5db; flex-shrink: 0; transition: background var(--transition);
}
.channel-tab.active-channel .tab-dot { background: var(--green); }

/* ── Kanal-Config Panel (aufklappbar) ── */
.kanal-config-panel {
  background: #f9fafb;
  border-bottom: 1.5px solid var(--border);
  overflow: hidden; flex-shrink: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: 0; opacity: 0;
}
.kanal-config-panel.open { max-height: 160px; opacity: 1; }

.kanal-config-inner {
  display: flex; align-items: stretch; gap: 20px;
  padding: 14px 20px;
}

/* Linke Spalte: Ton oben, Zeichen + Toggle unten */
.kanal-config-left {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 260px;
}
.kanal-config-left-bottom {
  display: flex; align-items: flex-end; gap: 12px;
}

/* Rechte Spalte: Format-Beschreibung */
.kanal-config-right {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.kanal-config-right textarea {
  flex: 1;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: var(--text-sm); font-family: inherit;
  color: var(--text); background: var(--surface); outline: none;
  resize: none; line-height: 1.5;
  transition: border-color var(--transition);
}
.kanal-config-right textarea:focus { border-color: var(--blue); }

.kanal-config-field { display: flex; flex-direction: column; gap: 4px; }
.kanal-config-field label,
.kanal-config-right > label {
  font-size: var(--text-micro); font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.kanal-config-field input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: var(--text-sm); font-family: inherit;
  color: var(--text); background: var(--surface); outline: none;
  transition: border-color var(--transition);
}
.kanal-config-field input:focus { border-color: var(--blue); }

.kanal-config-toggle {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 7px; flex-shrink: 0;
}

/* ── WhatsApp-Gruppen Panel ── */
.whatsapp-groups-panel {
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  padding: 14px 20px;
  flex-shrink: 0;
}
.whatsapp-groups-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.whatsapp-groups-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--text);
}
.whatsapp-groups-subtitle {
  font-size: var(--text-micro); color: var(--text-muted); margin-top: 2px;
}
.whatsapp-groups-subtitle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px; background: #f3f4f6; padding: 1px 4px; border-radius: 4px;
}
.whatsapp-groups-list {
  display: flex; flex-direction: column; gap: 8px;
}
.whatsapp-groups-empty {
  font-size: var(--text-sm); color: var(--text-muted);
  padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: #f9fafb;
}
.whatsapp-group-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #f9fafb;
}
.whatsapp-group-main {
  display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr);
  gap: 8px; flex: 1;
}
.whatsapp-group-row input,
.whatsapp-group-row select {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 9px; font-size: var(--text-sm); font-family: inherit;
  color: var(--text); background: var(--surface); outline: none;
}
.whatsapp-group-row input:focus,
.whatsapp-group-row select:focus { border-color: var(--blue); }
.whatsapp-group-row select { width: 160px; }

/* ── Toggle Switch ── */
.toggle {
  position: relative; width: 36px; height: 20px;
  display: inline-block; cursor: pointer; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #d1d5db; border-radius: 20px;
  transition: background var(--transition);
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 3px; top: 3px;
  background: var(--surface); border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ── T-Layout ── */
.t-layout {
  flex: 1; display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
}

/* Linke Spalte: Prompt-Liste */
.prompt-sidebar {
  border-right: 1.5px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
}
.prompt-sidebar-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.prompt-sidebar-title {
  font-size: var(--text-micro); font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.btn-new-prompt {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: none;
  color: var(--text-muted); cursor: pointer;
  transition: all var(--transition);
}
.btn-new-prompt:hover    { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.btn-new-prompt:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.prompt-list {
  flex: 1; overflow-y: auto; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.prompt-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; border: 1.5px solid transparent;
  transition: all var(--transition);
}
.prompt-list-item:hover  { background: var(--bg); }
.prompt-list-item.active { background: var(--blue-light); border-color: #bfdbfe; }
.prompt-list-item-name {
  flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--text);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prompt-list-item.active .prompt-list-item-name { color: var(--blue); }
.default-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
}
.prompt-list-empty {
  padding: 24px 12px; text-align: center;
  font-size: var(--text-sm); color: var(--text-muted); font-style: italic;
}

/* Rechte Spalte: Prompt-Editor */
.prompt-editor-area {
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
.editor-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--border); display: flex; align-items: center; justify-content: center;
}
.prompt-editor-content {
  flex: 1; overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Prompt-Textarea — eigene Klasse, nicht von .field textarea beeinflusst */
.prompt-template-textarea {
  width: 100%; min-height: 340px !important;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; font-family: 'DM Sans', monospace;
  font-size: var(--text-sm); color: var(--text);
  resize: vertical; outline: none; line-height: 1.7;
  transition: border-color var(--transition);
  background: var(--surface);
}
.prompt-template-textarea:focus { border-color: var(--blue); }

/* Platzhalter-Leiste */
.platzhalter-bar {
  background: var(--blue-light); border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm); padding: 8px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}
.platzhalter-bar-label {
  font-size: var(--text-micro); font-weight: 600; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.platzhalter-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.platzhalter-chip {
  background: var(--surface); border: 1px solid #93c5fd;
  color: var(--blue); font-size: var(--text-micro); font-weight: 600;
  font-family: monospace; padding: 2px 8px; border-radius: 4px;
  cursor: pointer; transition: all var(--transition);
}
.platzhalter-chip:hover { background: var(--blue); color: var(--surface); }

/* Editor Footer */
.editor-footer {
  padding: 12px 24px; border-top: 1.5px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

/* Danger-Icon-Button */
.btn-icon-danger {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: none;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.btn-icon-danger:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

/* ════════════════════════════════════════════════════════════════
   REAKTIONEN: WHATSAPP GRUPPENSTREAM
   ════════════════════════════════════════════════════════════════ */
.reactions-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reactions-hero {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}
.reactions-kicker {
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.reactions-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.3px;
}
.reactions-hero p {
  margin-top: 4px;
  max-width: 680px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.reactions-hero-stat {
  min-width: 104px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--green-light);
  color: #047857;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}
.reaction-filters {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
}
.reaction-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}
.reaction-filter {
  border: 1.5px solid var(--border);
  background: none;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.reaction-filter:hover { border-color: #9ca3af; color: var(--text); background: var(--bg); }
.reaction-filter.active { border-color: var(--green); color: #047857; background: var(--green-light); }
.reaction-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reaction-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.reaction-card-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.reaction-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-light);
  color: #047857;
  font-size: var(--text-micro);
  font-weight: 700;
  margin-bottom: 8px;
}
.reaction-card h2 {
  font-size: var(--text-md);
  line-height: 1.25;
  color: var(--text);
}
.reaction-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.reaction-status {
  padding: 1px 6px;
  border-radius: 999px;
  background: #f3f4f6;
  font-weight: 700;
}
.reaction-summary {
  padding: 16px 18px;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}
.reaction-card-actions {
  padding: 0 18px 16px;
  display: flex;
  justify-content: flex-end;
}
.reaction-raw {
  display: none;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: #f9fafb;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 360px;
  overflow-y: auto;
}
.reaction-raw.open { display: block; }
.reaction-empty,
.reaction-loading,
.reaction-error {
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 36px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.reaction-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.reaction-empty strong { color: var(--text); font-size: var(--text-base); }
.reaction-empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 4px;
}
.reaction-error { color: var(--red); border-color: #fecaca; background: var(--red-light); }

.wa-workbench {
  display: grid;
  grid-template-columns: 260px minmax(340px, 0.95fr) minmax(420px, 1.25fr);
  gap: 16px;
  align-items: start;
}
.wa-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}
.wa-panel-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.wa-panel-header h2 {
  font-size: var(--text-md);
  color: var(--text);
  line-height: 1.25;
}
.wa-control-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-control-block label {
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.reaction-filter-group.stacked {
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}
.reaction-filter-group.stacked .reaction-filter {
  width: 100%;
  text-align: left;
  border-radius: var(--radius-sm);
}
.wa-control-block input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-family: inherit;
  font-size: var(--text-sm);
  outline: none;
  color: var(--text);
  background: var(--surface);
}
.wa-control-block input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.wa-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wa-keyword {
  border: 1px solid var(--border);
  background: #f9fafb;
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: var(--text-micro);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.wa-keyword:hover,
.wa-keyword.active {
  border-color: var(--green);
  color: #047857;
  background: var(--green-light);
}
.wa-keyword span {
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 3px;
}
.wa-keyword-empty {
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.wa-stats {
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.wa-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: var(--radius-sm);
}
.wa-stats strong { font-size: var(--text-md); color: var(--text); }
.wa-stats span { font-size: var(--text-micro); color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.wa-insight-list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-insight-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: #f9fafb;
}
.wa-insight-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.wa-insight-card p {
  font-size: var(--text-micro);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.wa-insight-card ul {
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-micro);
  color: var(--text);
  line-height: 1.5;
}
.wa-insight-muted { font-size: var(--text-micro); color: var(--text-muted); }
.wa-people-list { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-people-list span {
  font-size: var(--text-micro);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface);
}
.wa-people-list b { color: var(--green); }
.wa-summary-block {
  border-top: 1px solid var(--border);
  padding: 14px;
}
.wa-summary-title {
  font-size: var(--text-micro);
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.reaction-stream.compact { gap: 8px; }
.reaction-stream.compact .reaction-card-header { padding: 12px; }
.reaction-stream.compact .reaction-summary { padding: 12px; max-height: 180px; overflow-y: auto; }
.reaction-stream.compact .reaction-card-actions { padding: 0 12px 12px; }
.wa-message-hint {
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  background: #f9fafb;
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: 600;
}
.wa-message-list {
  max-height: calc(100vh - 230px);
  overflow-y: auto;
}
.wa-message-row {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
}
.wa-message-row:last-child { border-bottom: none; }
.wa-message-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wa-message-meta strong {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-message-meta span {
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.wa-message-text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}
.wa-message-empty,
.wa-message-more {
  padding: 16px 18px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  background: #f9fafb;
}

/* ════════════════════════════════════════════════════════════════
   PROMPT-OPTIMIERUNG (3-stufiger HITL-Workflow)
   ════════════════════════════════════════════════════════════════ */

.btn-ai-optimize {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: none; font-family: inherit; font-size: var(--text-sm);
  font-weight: 600; cursor: pointer; transition: all var(--transition);
  background: var(--purple); color: white;
}
.btn-ai-optimize:hover    { background: #7c3aed; }
.btn-ai-optimize:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stage Progress Dots */
.stage-progress { display: flex; align-items: center; }
.stage-dot-num {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; transition: all var(--transition);
}
.stage-dot-num.current { border-color: var(--orange); background: var(--orange); color: white; }
.stage-dot-num.done    { border-color: var(--green);  background: var(--green);  color: white; }
.stage-connector       { width: 28px; height: 2px; background: var(--border); flex-shrink: 0; transition: background var(--transition); }
.stage-connector.done  { background: var(--green); }
.review-stage-label    { margin-left: 12px; font-size: var(--text-sm); font-weight: 600; color: var(--orange); }

/* Review explanation */
.review-explanation-box {
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: var(--text-sm); color: var(--text); line-height: 1.6;
}

/* Approve button */
.btn-approve-stage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: none; font-family: inherit; font-size: var(--text-sm);
  font-weight: 600; cursor: pointer; transition: all var(--transition);
  background: var(--green); color: white;
}
.btn-approve-stage:hover    { background: #059669; }
.btn-approve-stage:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal footer for opt modal */
.opt-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--border);
}

/* Status badge in prompt list */
.prompt-status-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 8px; flex-shrink: 0; line-height: 16px;
}
.prompt-status-badge.draft  { background: #f3f4f6; color: var(--text-muted); }
.prompt-status-badge.review { background: var(--orange-light); color: #d97706; }

/* ════════════════════════════════════════════════════════════════
   PROMPT-EDITOR 3-TAB-STRUKTUR
   ════════════════════════════════════════════════════════════════ */

/* Tab-Leiste im Editor */
.prompt-tab-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 16px 0;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.prompt-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1.5px solid transparent; border-bottom: none;
  background: none; font-family: inherit;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
  position: relative; bottom: -1.5px;
}
.prompt-tab:hover  { color: var(--text); background: var(--bg); }
.prompt-tab.active {
  color: var(--blue); font-weight: 600;
  background: var(--bg);
  border-color: var(--border);
  border-bottom-color: var(--bg);
}

/* Tab-Inhalt */
.prompt-tab-content {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg);
}

/* ── TAB 1: Wizard-Split (Fragen links | Preview rechts) ── */
.wizard-split {
  display: grid;
  grid-template-columns: 360px 1fr;
  flex: 1; overflow: hidden;
}
.wizard-left {
  display: flex; flex-direction: column;
  border-right: 1.5px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.wizard-qa-list {
  flex: 1; overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.wizard-qa-empty {
  padding: 20px 8px; text-align: center;
  font-size: var(--text-sm); color: var(--text-muted); font-style: italic;
}
.wizard-qa-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.wizard-qa-meta {
  font-size: var(--text-micro); font-weight: 600;
  color: var(--text-muted); line-height: 1.4;
}
.wizard-qa-answer-row {
  display: flex; align-items: flex-start; gap: 6px;
}
.wizard-qa-answer {
  flex: 1; font-size: var(--text-sm); color: var(--text); line-height: 1.5;
}
.wizard-qa-reopen {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: none; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); margin-top: 1px;
}
.wizard-qa-reopen:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* Aktuelle Frage-Box */
.wizard-question-box {
  padding: 14px 14px 14px;
  border-top: 1.5px solid var(--border);
  background: #fafbff;
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
}
.wizard-question-label {
  font-size: var(--text-micro); font-weight: 700;
  color: var(--blue); text-transform: uppercase; letter-spacing: 0.06em;
}
.wizard-question-text {
  font-size: var(--text-sm); font-weight: 600; color: var(--text); line-height: 1.5;
}
.wizard-answer-textarea {
  width: 100%; min-height: 64px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: var(--text-sm); font-family: inherit;
  color: var(--text); background: var(--surface); resize: vertical;
  outline: none; transition: border-color var(--transition); line-height: 1.5;
}
.wizard-answer-textarea:focus { border-color: var(--blue); }

/* Preview rechts */
.wizard-right {
  display: flex; flex-direction: column; gap: 0;
  padding: 20px; overflow-y: auto;
}
.wizard-preview-label {
  font-size: var(--text-micro); font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 10px;
}
.wizard-preview-text {
  font-size: var(--text-sm); color: var(--text-muted);
  line-height: 1.7; white-space: pre-wrap;
  font-style: italic;
}

/* ── TAB 2: Optimizer-Split (alt | neu) ── */
.optimize-area {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
}

/* Stage-Status-Leiste */
.opt-stage-bar {
  height: 48px; padding: 0 20px;
  background: var(--surface); border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; flex-shrink: 0;
}

/* Zweispaltig */
.optimize-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  flex: 1; overflow: hidden; border-bottom: 1.5px solid var(--border);
}
.optimize-col {
  display: flex; flex-direction: column; overflow: hidden;
}
.optimize-col:first-child { border-right: 1.5px solid var(--border); }
.optimize-col-header {
  padding: 8px 14px;
  font-size: var(--text-micro); font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}
.optimize-col:first-child .optimize-col-header { color: var(--text-muted); }
.optimize-col:last-child  .optimize-col-header { color: var(--blue); }
.optimize-textarea {
  flex: 1; width: 100%; resize: none; border: none; outline: none;
  padding: 14px; font-family: 'DM Sans', monospace;
  font-size: 13px; line-height: 1.7; color: var(--text);
  background: var(--surface); overflow-y: auto;
}
.optimize-col:first-child .optimize-textarea {
  background: #fafafa; color: var(--text-muted);
}

/* Unterer Bereich: Erklärung + Feedback + Buttons */
.opt-bottom {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 20px 14px;
  background: var(--surface); flex-shrink: 0;
  max-height: 220px; overflow-y: auto;
}
.opt-actions {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}

/* ── WhatsApp KI-Themen + Analyse-Befehl ─────────────────────── */
.wa-analyze-cmd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #f9fafb;
}
.wa-cmd-label {
  font-size: var(--text-micro);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.wa-cmd-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
}
.wa-cmd-line:hover { border-color: #9ca3af; }
.wa-cmd-line code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-micro);
  white-space: nowrap;
  overflow-x: auto;
}
.wa-cmd-line i { flex-shrink: 0; color: var(--text-muted); }

.wa-topics-stamp {
  font-size: var(--text-micro);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.wa-topic-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: #f9fafb;
}
.wa-topic-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.wa-topic-head i { color: var(--green); flex-shrink: 0; }
.wa-topic-head h3 {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.wa-topic-desc {
  font-size: var(--text-micro);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.wa-topic-toggle { font-size: var(--text-micro); }
.wa-topic-belege {
  display: none;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  max-height: 320px;
  overflow-y: auto;
}
.wa-topic-belege.open { display: block; }
.wa-topic-belege .wa-message-row { padding: 10px 2px; }

/* Beleg-Hervorhebung in der Originalnachrichten-Liste (Panel 3) */
.wa-message-list { position: relative; }
.wa-message-row { transition: background 0.15s ease, opacity 0.15s ease; }
.wa-message-row.beleg-active {
  background: var(--green-light);
  box-shadow: inset 3px 0 0 var(--green);
}
.wa-message-row.beleg-dim { opacity: 0.38; }
.wa-message-row.beleg-dim:hover { opacity: 0.7; }

/* Themen-Zuordnung pro Nachricht (Chips in der Meta-Spalte) */
.wa-msg-topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.wa-msg-topic {
  max-width: 100%;
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.wa-msg-topic:hover { border-color: var(--green); color: var(--text); }
.wa-msg-topic.active {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--text);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   Reaktions-Workbench (reaktionen.html) – Schritt A
   ════════════════════════════════════════════════════════════ */
.wb-topbar { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.wb-group-select { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-group-btn {
  font-size: 14px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.wb-group-btn:hover { border-color: var(--green); color: var(--text); }
.wb-group-btn.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.wb-group-count {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,0.08); color: inherit;
}
.wb-group-btn.active .wb-group-count { background: rgba(255,255,255,0.25); }
#wb-search {
  font-size: var(--text-sm); padding: 7px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); min-width: 220px; background: var(--surface); color: var(--text);
}

.wa-workbench.wb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa-workbench.wb-grid .wa-panel { display: flex; flex-direction: column; max-height: calc(100vh - 168px); }
.wb-scroll { overflow-y: auto; flex: 1; }
.wb-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wb-hint { font-size: var(--text-micro); color: var(--text-muted); white-space: nowrap; }
.wb-no-start {
  display: inline-block; background: var(--red); color: #fff;
  font-weight: 800; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}

/* Tabs (mittlere Spalte) */
.wb-tabs { display: flex; gap: 4px; margin-top: 8px; }
.wb-tab {
  font-size: var(--text-micro); padding: 5px 10px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--border); border-bottom: none; background: #f3f4f6; color: var(--text-muted); cursor: pointer;
}
.wb-tab.active { background: var(--surface); color: var(--text); font-weight: 700; }

/* Gruppen-Farben */
.grp-1 { --gc:#f59e0b; --gcl:#fef3c7; }
.grp-2 { --gc:#3b82f6; --gcl:#dbeafe; }
.grp-3 { --gc:#16a34a; --gcl:#dcfce7; }
.grp-4 { --gc:#db2777; --gcl:#fce7f3; }
.grp-5 { --gc:#9ca3af; --gcl:#f3f4f6; }   /* Papierkorb = neutral grau */

/* Posts (linke Spalte) */
.wb-post { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; position: relative; display: flex; gap: 12px; align-items: flex-start; }
.wb-post-main { flex: 1; min-width: 0; }
.wb-post.pre-start { opacity: 0.5; }
.wb-post.is-trash .wb-post-text { text-decoration: line-through; color: var(--text-muted); }
.wb-post.is-start { outline: 3px solid var(--green); outline-offset: -2px; opacity: 1; }
.wb-start-flag {
  display: flex; align-items: center; gap: 6px; padding: 12px 14px 4px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.wb-start-flag.set { color: var(--green); }
.wb-post.grp-1, .wb-post.grp-2, .wb-post.grp-3, .wb-post.grp-4, .wb-post.grp-5 {
  background: var(--gcl); box-shadow: inset 4px 0 0 var(--gc); opacity: 1;
}
.wb-post.flash { animation: wbflash 1.2s ease; }
@keyframes wbflash { 0%,100% { background: transparent; } 30% { background: #fff7cc; } }
.wb-post-head { display: flex; align-items: center; gap: 8px; }
.wb-post-head strong { font-size: var(--text-sm); color: var(--text); }
.wb-post-date { font-size: 11px; color: var(--text-muted); }
.wb-post-text { font-size: var(--text-sm); color: var(--text); line-height: 1.5; margin: 4px 0 7px; white-space: pre-wrap; }
.wb-start-line {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green); text-align: center; padding: 6px 0 2px; border-top: 2px dashed var(--green);
  margin-top: 2px;
}
/* Markier-Block rechts im Post: 1–4 als 2×2, Papierkorb (5) über beide Spalten */
.wb-mark-grid { display: grid; grid-template-columns: repeat(3, 30px); gap: 5px; flex-shrink: 0; }
.wb-digit {
  width: 30px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.wb-digit:hover { border-color: var(--text); color: var(--text); }
.wb-digit.active { background: var(--text); border-color: var(--text); color: #fff; }
.wb-trash.active { background: #6b7280; border-color: #6b7280; color: #fff; }
.wb-flag:hover { border-color: var(--green); color: var(--green); }
.wb-flag.active { background: var(--green); border-color: var(--green); color: #fff; }

/* „Mehr laden" am Listenende */
.wb-load-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px; border: none; border-top: 1px solid var(--border);
  background: #f9fafb; color: var(--text-muted); font-size: var(--text-micro); font-weight: 600; cursor: pointer;
}
.wb-load-more:hover { color: var(--text); background: #f3f4f6; }

/* Legende mit Gruppennamen (mittlere Spalte) */
.wb-legend { padding: 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.wb-legend-all { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.wb-legend-all .wb-grp-chip { flex: 1; justify-content: space-between; }
.wb-legend-del {
  flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  border-radius: var(--radius-sm); padding: 4px 6px; cursor: pointer; line-height: 0;
}
.wb-legend-del:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.wb-legend-del:disabled { opacity: 0.35; cursor: default; }
.wb-legend-row { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); padding: 2px; }
.wb-legend-row.active { background: var(--gcl); outline: 1px solid var(--gc); }
.wb-legend-badge {
  width: 24px; height: 24px; border-radius: 6px; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--gc); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.wb-legend-name {
  flex: 1; min-width: 0; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.wb-legend-fixed { flex: 1; font-size: 13px; color: var(--text-muted); font-style: italic; }
.wb-legend-count {
  min-width: 24px; text-align: center; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 11px; font-weight: 700; padding: 3px 6px; cursor: pointer;
}

/* Gruppen-Chips + Liste (mittlere Spalte) */
.wb-grp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-bottom: 1px solid var(--border); }
.wb-grp-chip {
  font-size: var(--text-micro); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.wb-grp-chip.grp-1, .wb-grp-chip.grp-2, .wb-grp-chip.grp-3, .wb-grp-chip.grp-4, .wb-grp-chip.grp-5 { background: var(--gcl); }
.wb-grp-chip span { font-weight: 700; opacity: 0.7; }
.wb-grp-chip.active { outline: 2px solid var(--text); outline-offset: 1px; }
.wb-grp-item { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; box-shadow: inset 4px 0 0 var(--gc); }
.wb-grp-item-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.wb-grp-item-head strong { font-size: 13px; }
.wb-grp-badge {
  width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.wb-grp-badge.grp-1, .wb-grp-badge.grp-2, .wb-grp-badge.grp-3, .wb-grp-badge.grp-4, .wb-grp-badge.grp-5 { background: var(--gc); }
.wb-grp-item-text { font-size: 13px; color: var(--text); line-height: 1.45; white-space: pre-wrap; }
.wb-mini-btn { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; line-height: 0; }
.wb-mini-btn:hover { color: var(--text); }
.wb-grp-item-head .wb-mini-btn:nth-last-child(1) { margin-left: 0; }
.wb-grp-item-head .wb-post-date { margin-left: auto; }

/* Platzhalter */
.wb-placeholder {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 40px 22px; color: var(--text-muted);
}
.wb-placeholder strong { color: var(--text); font-size: var(--text-sm); }
.wb-placeholder span { font-size: var(--text-micro); line-height: 1.5; max-width: 280px; }
.wb-placeholder.small { padding: 24px 18px; }

/* Schritt B: Antwort-Spalte */
.wb-answer { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.wb-answer-grouphead { display: flex; align-items: center; gap: 8px; }
.wb-answer-grouphead strong { font-size: var(--text-sm); color: var(--text); }
.wb-answer-grouphead .wb-hint { margin-left: auto; }
.wb-ans-label { font-size: var(--text-micro); font-weight: 600; color: var(--text-muted); }
.wb-ans-hint {
  width: 100%; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.wb-ans-gen { width: 100%; justify-content: center; }
.wb-ans-text {
  width: 100%; min-height: 200px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5;
  padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); white-space: pre-wrap;
}
.wb-ans-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-ans-actions .btn-secondary { flex: 1; justify-content: center; min-width: 90px; }
.wb-ans-status { font-size: var(--text-micro); min-height: 16px; color: var(--text-muted); }
.wb-ans-status.busy { color: var(--blue); }
.wb-ans-status.ok   { color: #047857; }
.wb-ans-status.err  { color: var(--red); }

/* ════════════════════════════════════════════════════════════════
   Reaktions-Workbench: größere Schrift (nur diese Seite).
   Lesetext ~18px, Meta/Buttons ~16px, Panel-Headings ~20px.
   wb-*/reactions-* Klassen existieren ausschließlich in reaktionen.html.
   ════════════════════════════════════════════════════════════════ */
/* Panel-Köpfe */
.reactions-page .reactions-kicker { font-size: 14px; }
.reactions-page .wa-panel-header h2 { font-size: 20px; }
.reactions-page .wb-tab { font-size: 16px; }
.reactions-page .wb-hint { font-size: 16px; }

/* Spalte 1: Originalnachrichten */
.reactions-page .wb-post-head strong { font-size: 18px; }
.reactions-page .wb-post-date { font-size: 15px; }
.reactions-page .wb-post-text { font-size: 18px; }
.reactions-page .wb-digit { font-size: 16px; }
.reactions-page .wb-start-flag { font-size: 13px; }
.reactions-page .wb-load-more { font-size: 16px; }

/* Spalte 2: Gruppieren */
.reactions-page .wb-grp-chip { font-size: 15px; }
.reactions-page .wb-legend-badge { font-size: 16px; }
.reactions-page .wb-legend-name { font-size: 18px; }
.reactions-page .wb-legend-fixed { font-size: 18px; }
.reactions-page .wb-legend-count { font-size: 15px; }
.reactions-page .wb-grp-item-head strong { font-size: 18px; }
.reactions-page .wb-grp-item-text { font-size: 18px; }
.reactions-page .wb-grp-badge { font-size: 15px; }

/* Spalte 3: Antwort */
.reactions-page .wb-answer-grouphead strong { font-size: 18px; }
.reactions-page .wb-ans-label { font-size: 16px; }
.reactions-page .wb-ans-hint { font-size: 18px; }
.reactions-page .wb-ans-text { font-size: 18px; }
.reactions-page .wb-ans-actions .btn-secondary { font-size: 16px; }
.reactions-page .wb-ans-gen { font-size: 16px; }
.reactions-page .wb-ans-status { font-size: 16px; }

/* Platzhalter in leeren Spalten */
.reactions-page .wb-placeholder strong { font-size: 18px; }
.reactions-page .wb-placeholder span { font-size: 15px; }