/* KI-Check im Hero der Landingpage (ki-check.js).
   Nutzt die Formularbausteine aus ki-sichtbarkeit.css (lp-field, lp-row,
   lp-check, cta-button, lp-small) und deren Farben. Linksbündig im sonst
   zentrierten Hero, damit Formulare und Ergebnisse gut lesbar bleiben. */

.kc { width: 100%; max-width: 640px; margin: 0 auto var(--space-6); text-align: left; scroll-margin-top: var(--space-24); }

.kc-start,
.kc-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    padding: var(--space-6);
}
.kc-start__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kc-start .lp-check { margin: var(--space-1) 0 var(--space-2); }
.kc-start .cta-button,
.kc-card > .cta-button,
.kc-offer .cta-button { display: block; width: 100%; text-align: center; margin-top: var(--space-3); font-size: var(--text-md); }
.kc-start .cta-button:disabled { opacity: .7; cursor: wait; }

.kc-status { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-body); }
.kc-status:empty { display: none; }
.kc-status[data-state="error"] { color: var(--lp-bad); }
.kc-status:focus { outline: none; }

.kc-title { font-size: var(--text-xl); line-height: 1.25; margin-bottom: var(--space-3); text-wrap: balance; }
.kc-title:focus { outline: none; }
.kc-kicker { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-1); }
.kc-intro { color: var(--text-body); margin-bottom: var(--space-6); }
.kc-hint { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.kc-question { color: var(--text-strong); font-style: italic; margin-bottom: var(--space-4); }

.kc-card select { width: 100%; font: inherit; padding: 12px 14px; background: var(--c-navy-900); color: var(--text-strong); border: 1px solid rgba(159, 179, 217, .45); border-radius: 10px; }
.kc-card textarea { resize: vertical; }
.kc-competitors { border: 0; padding: 0; margin: var(--space-2) 0 var(--space-2); min-width: 0; display: grid; gap: var(--space-2); }
.kc-competitors legend { color: var(--text-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.kc-competitors input { width: 100%; font: inherit; padding: 10px 14px; background: var(--c-navy-900); color: var(--text-strong); border: 1px solid rgba(159, 179, 217, .45); border-radius: 10px; }

.kc-link { background: none; border: 0; padding: 0; margin-top: var(--space-4); color: var(--c-blue-300); font: inherit; font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }

/* Fortschritt */
.kc-progress { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.kc-progress__row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: rgba(7, 20, 38, .45); border-radius: 10px; }
.kc-progress__name { font-weight: var(--weight-bold); color: var(--text-strong); }
.kc-progress__state { font-size: var(--text-sm); color: var(--text-muted); }
.kc-progress__row:not([data-state]) .kc-progress__state::before {
    content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%;
    background: var(--c-gold-500); vertical-align: middle; animation: kc-puls 1s ease-in-out infinite alternate;
}
.kc-progress__row[data-state="done"] .kc-progress__state { color: var(--lp-good); }
.kc-progress__row[data-state="failed"] .kc-progress__state { color: var(--lp-bad); }
@keyframes kc-puls { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kc-progress__row .kc-progress__state::before { animation: none; } }

/* Ergebnis */
.kc-models { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kc-model { padding: var(--space-4); border-radius: 12px; display: grid; gap: 4px; background: rgba(7, 20, 38, .45); border: 1px solid var(--lp-line); }
.kc-model__name { font-weight: var(--weight-bold); color: var(--text-strong); }
.kc-model[data-state="no"] { background: var(--lp-bad-soft); border-color: rgba(255, 155, 145, .4); }
.kc-model[data-state="no"] .kc-model__verdict { color: var(--lp-bad); }
.kc-model[data-state="yes"] { background: var(--lp-good-soft); border-color: rgba(111, 214, 162, .4); }
.kc-model[data-state="yes"] .kc-model__verdict { color: var(--lp-good); }
.kc-model[data-state="none"] .kc-model__verdict { color: var(--text-muted); }

.kc-block { margin-bottom: var(--space-6); }
.kc-block h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.kc-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kc-chips li { padding: 6px 12px; border-radius: 999px; background: var(--c-navy-900); border: 1px solid var(--lp-line); color: var(--text-strong); font-size: var(--text-sm); }
.kc-list { margin: 0; padding-left: 1.2em; color: var(--text-body); }

.kc-quote { margin: 0; padding: var(--space-4); border-left: 3px solid var(--c-gold-500); background: rgba(7, 20, 38, .45); border-radius: 0 10px 10px 0; color: var(--text-body); font-size: var(--text-sm); line-height: 1.6; }
.kc-quote mark { background: rgba(255, 201, 71, .22); color: var(--text-strong); padding: 0 2px; border-radius: 3px; }
.kc-quote footer { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

.kc-sources { color: var(--text-body); margin-bottom: var(--space-6); }
.kc-sources strong { color: var(--text-strong); }
.kc-offer { padding: var(--space-6); border-radius: 14px; background: var(--lp-warn-soft); border: 1px solid rgba(255, 201, 71, .35); margin-bottom: var(--space-3); }
.kc-offer h3 { font-size: var(--text-lg); line-height: 1.3; margin-bottom: var(--space-2); text-wrap: balance; }
.kc-offer > p { color: var(--text-body); }
/* Häkchen wie in der Preisbox der Landingpage (.lp-price li) */
.kc-offer__list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-2); color: var(--text-strong); }
.kc-offer__list li { position: relative; padding-left: 28px; }
.kc-offer__list li::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--lp-warn-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffc947' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.kc-offer > .kc-offer__proof { font-size: var(--text-sm); }
.kc-offer > .kc-offer__terms { margin-top: var(--space-2); font-size: var(--text-sm); text-align: center; color: var(--text-body); }
.kc-offer > .kc-offer__guarantee { margin: var(--space-4) 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--lp-line); font-size: var(--text-sm); line-height: 1.55; color: var(--text-strong); }

/* Tipps-Angebot im Ergebnis */
.kc-tips { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--lp-line); }
.kc-tips .kc-link { margin-top: var(--space-2); }
.kc-competitors .kc-link { margin-top: 0; justify-self: start; }
.kc-competitors [hidden] { display: none; }

@media (max-width: 600px) {
    /* Der Start-Button muss auf dem Telefon im ersten Bildschirm stehen. */
    .av-hero .lp-hero .lp-lead { margin-bottom: var(--space-6); }
    .kc-start, .kc-card { padding: var(--space-6) var(--space-4); }
    .kc-start__fields, .kc-card .lp-row { grid-template-columns: 1fr; }
    .kc-title { font-size: var(--text-lg); }
}