/* Lehrzeug KI-Assistent (Vorschau) – werkzeugeigenes Design. Gemeinsames Design: /kern/kern.css */
.ki-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; border-radius: 99px; background: var(--lila-soft); color: var(--lila-ink); font-weight: 700; font-size: 13.5px; }
.ki-badge .i { width: 16px; height: 16px; }
.ki-step { margin: 0 0 20px; }
.ki-step-t { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 12px; }
.ki-step-t span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy, #071B4A); color: #fff; font-size: 14px; flex: none; }
:root[data-theme="dark"] .ki-step-t span { background: var(--teal); color: var(--on-teal); }
.ki-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ki-type { position: relative; }
.ki-type input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ki-type-in { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 14px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; transition: border-color .15s, transform .12s, background-color .15s; }
.ki-type-in:hover { border-color: var(--teal); transform: translateY(-1px); }
.ki-type input:checked + .ki-type-in { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.ki-type input:focus-visible + .ki-type-in { outline: 3px solid var(--focus); outline-offset: 2px; }
.ki-type-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--lila-soft); color: var(--lila-ink); margin-bottom: 4px; }
.ki-type.is-top .ki-type-ico { background: var(--teal); color: var(--on-teal); }
.ki-type-ico .i { width: 20px; height: 20px; }
.ki-type-in b { font-size: 15px; }
.ki-type-in small { color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.ki-type-in em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--yellow-soft); color: var(--yellow-ink); }
.ki-grid .lz-side { gap: 12px; }
.ki-out { display: grid; gap: 14px; align-content: start; }
.ki-soon { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--lila-soft), var(--teal-soft)); }
.ki-soon-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); color: var(--lila-ink); flex: none; box-shadow: var(--shadow-1); }
.ki-soon-ico .i { width: 24px; height: 24px; }
.ki-soon p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.ki-prompt { font-family: var(--mono); font-size: 13px; line-height: 1.5; min-height: 260px; background: var(--surface-2); }
.ki-prompt[readonly] { cursor: text; }
.ki-privacy { align-items: center; }
.ki-privacy .i { width: 18px; height: 18px; flex: none; }
.ki-next p { margin: 0 0 6px; font-size: 14px; }
@media (max-width: 900px) { .ki-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }