/* ============================================================
   u flow – KI-Start-Helfer an der Karte (Modul, gehört zu kartehelfer.js)
   Lebt im Karten-Panel (#panel-ki) → immer helle Optik (globale Tokens).
   ============================================================ */
.panel-ki { margin-top: 16px; }

.ki-helfer-auf {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--akzent); background: rgba(176, 125, 86, 0.10); border: 1px solid transparent;
  padding: 9px 14px; border-radius: 10px; transition: filter 0.14s ease, transform 0.12s ease;
}
.ki-helfer-auf:hover { filter: brightness(1.05); }
.ki-helfer-auf:active { transform: scale(0.97); }

.ki-helfer { border: 1px solid var(--karte-rand); border-radius: 14px; background: rgba(120, 104, 84, 0.03); padding: 12px 13px; }
.ki-helfer-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ki-helfer-titel { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--akzent); }
.ki-helfer-werkz { display: inline-flex; gap: 4px; }
.ki-helfer-ico { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--karte-rand); background: none; color: var(--text-mittel); cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ki-helfer-ico:hover { background: rgba(120, 104, 84, 0.08); color: var(--text-stark); }
.ki-helfer-tok { font-size: 11px; color: var(--text-leise); }

.ki-helfer-text {
  width: 100%; border: 1px solid var(--karte-rand); border-radius: 10px; background: #fff;
  font-family: inherit; font-size: 13.5px; line-height: 1.45; color: var(--text-stark); padding: 9px 11px; outline: none; resize: vertical;
}
.ki-helfer-text:focus { border-color: rgba(176, 125, 86, 0.45); }

.ki-helfer-reihe { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ki-helfer-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 999px;
  padding: 7px 13px; border: 1px solid var(--karte-rand); background: none; color: var(--text-mittel);
  transition: color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.ki-helfer-btn:hover { color: var(--text-stark); background: rgba(120, 104, 84, 0.06); }
.ki-helfer-btn.primary { color: #fff; background: var(--akzent); border-color: var(--akzent); }
.ki-helfer-btn.primary:hover { color: #fff; background: #9d6c48; box-shadow: var(--schatten-hover); }
.ki-helfer-btn:disabled { opacity: 0.55; cursor: default; }

.ki-helfer-hinweis { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--text-leise); }
.ki-helfer-hinweis b { color: var(--text-mittel); font-weight: 700; }
.ki-helfer-fehler { margin-top: 8px; border: 1px solid rgba(216, 81, 63, 0.3); background: rgba(216, 81, 63, 0.06); color: #9a3a2c; border-radius: 9px; padding: 8px 10px; font-size: 12px; }
.ki-helfer-summary { font-size: 13px; color: var(--text-mittel); margin-bottom: 8px; }
.ki-helfer-leer { font-size: 12.5px; color: var(--text-leise); font-style: italic; padding: 4px 0; }
.ki-helfer-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-leise); margin: 9px 0 5px; }
.ki-helfer-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 2px; cursor: pointer; font-size: 13px; color: var(--text-stark); }
.ki-helfer-row input { width: 15px; height: 15px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--akzent); cursor: pointer; }
.ki-helfer-row b { font-weight: 600; color: var(--text-mittel); }