/* ============================================================
   PlaCeMS · static/ki-check/ki-check.css · v1.2a · 20.10.2026
   v1.1: Die Seite sitzt im Artikel-Rahmen des Templates (.pc-article,
   wie „Über uns“) – Hintergrundfläche, Breite und Kopfbild kommen von
   dort. Hier nur noch das, was der KI-Check selbst braucht.
   ============================================================ */
.kic-page {
    --kic-accent: #3b82f6;
    --kic-ok: #22c55e;
    --kic-warn: #f59e0b;
    --kic-fail: #ef4444;
    --kic-info: #94a3b8;
    --kic-surface: rgba(127, 127, 127, .08);
    --kic-border: rgba(127, 127, 127, .25);
    --kic-surface: rgba(127, 127, 127, .10);
}
.kic-lead { font-size: 1.08rem; line-height: 1.6; margin: 0 0 24px; }

.kic-form { display: flex; gap: 10px; flex-wrap: wrap; }
.kic-form input {
    flex: 1 1 260px; min-width: 0; padding: 14px 16px; font-size: 1rem;
    border: 1px solid var(--kic-border); border-radius: 10px;
    background: var(--kic-surface); color: inherit;
}
.kic-form input:focus { outline: 2px solid var(--kic-accent); outline-offset: 1px; }
.kic-btn, .kic-form button {
    display: inline-block; padding: 13px 22px; font-size: 1rem; font-weight: 600;
    border: 0; border-radius: 10px; background: var(--kic-accent); color: #fff;
    cursor: pointer; text-decoration: none; text-align: center;
}
.kic-btn:hover, .kic-form button:hover { filter: brightness(1.08); }
/* v1.1a: Der Artikel-Rahmen färbt Links (a) in der Akzentfarbe – beim
   Button-Link wäre die Schrift dann blau auf blau. Höhere Spezifität. */
.kic-page a.kic-btn, .kic-page a.kic-btn:link, .kic-page a.kic-btn:visited,
.kic-page a.kic-btn:hover, .kic-page a.kic-btn:focus { color: #fff; text-decoration: none; }
.kic-page .kic-btn--ghost, .kic-page a.kic-btn--ghost { color: inherit; }
.kic-btn:disabled, .kic-form button:disabled { opacity: .55; cursor: wait; }
.kic-btn--ghost { background: transparent; color: inherit; border: 1px solid var(--kic-border); }
.kic-note { font-size: .88rem; opacity: .85; margin: 8px 0 0; }

.kic-status { margin: 18px 0 0; min-height: 1.4em; }
.kic-status--busy::before {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid var(--kic-border); border-top-color: var(--kic-accent); border-radius: 50%;
    animation: kic-spin .8s linear infinite;
}
.kic-status--error { color: var(--kic-fail); }
@keyframes kic-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kic-status--busy::before { animation: none; } }

.kic-result { margin-top: 24px; }
.kic-score {
    display: flex; align-items: center; gap: 20px; padding: 20px 22px;
    border-radius: 14px; background: var(--kic-surface); border: 2px solid var(--kic-border);
}
.kic-score--green  { border-color: var(--kic-ok); }
.kic-score--yellow { border-color: var(--kic-warn); }
.kic-score--red    { border-color: var(--kic-fail); }
.kic-score-num { font-size: 3.2rem; font-weight: 800; line-height: 1; min-width: 2.2ch; text-align: center; }
.kic-score--green  .kic-score-num { color: var(--kic-ok); }
.kic-score--yellow .kic-score-num { color: var(--kic-warn); }
.kic-score--red    .kic-score-num { color: var(--kic-fail); }
.kic-score { flex-wrap: wrap; }
.kic-score-meta { flex: 1 1 180px; }
.kic-score--blocked { border-color: var(--kic-warn); }
.kic-score--blocked .kic-score-num { color: var(--kic-warn); }
.kic-score-label { font-size: .85rem; opacity: .8; }

/* KI-Tür: eigene Plakette, nicht Teil der Punktzahl */
.kic-door { padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--kic-border); text-align: center; min-width: 120px; }
.kic-door--yes { border: 2px solid var(--kic-ok); }
.kic-door-label { font-size: .8rem; opacity: .8; }
.kic-door-val { font-weight: 700; font-size: 1.05rem; }
.kic-door--yes .kic-door-val { color: var(--kic-ok); }
.kic-door-hint { font-size: .72rem; opacity: .7; }
.kic-verdict-note { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--kic-accent); background: var(--kic-surface); border-radius: 0 10px 10px 0; line-height: 1.55; }
.kic-score-grade { font-size: 1.2rem; font-weight: 700; }
.kic-score-host  { font-size: .9rem; opacity: .85; word-break: break-all; }

.kic-checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.kic-check { padding: 14px 16px; border-radius: 12px; background: var(--kic-surface); border: 1px solid var(--kic-border); }
.kic-check-top { display: flex; align-items: center; gap: 10px; }
.kic-check-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; background: var(--kic-info); }
.kic-check--ok   .kic-check-dot { background: var(--kic-ok); }
.kic-check--warn .kic-check-dot { background: var(--kic-warn); }
.kic-check--fail .kic-check-dot { background: var(--kic-fail); }
.kic-check-title { font-weight: 700; flex: 1; }
.kic-check-pts { font-variant-numeric: tabular-nums; opacity: .75; }
.kic-check-detail, .kic-check-meaning, .kic-check-fix { margin: 6px 0 0 22px; line-height: 1.5; font-size: .95rem; }
.kic-check-detail { opacity: .9; word-break: break-word; }

.kic-cta, .kic-report { margin-top: 22px; padding: 20px 22px; border-radius: 14px; background: var(--kic-surface); border: 1px solid var(--kic-border); }
.kic-cta h2, .kic-report h2 { margin: 0 0 6px; font-size: 1.3rem; }
.kic-cta p, .kic-report p { margin: 0 0 14px; }
.kic-report-form { display: grid; gap: 12px; }
.kic-report-form input[type=email] {
    padding: 12px 14px; font-size: 1rem; border: 1px solid var(--kic-border); border-radius: 10px;
    background: var(--kic-surface); color: inherit;
}
.kic-consent { font-size: .9rem; line-height: 1.5; }
.kic-report-out { margin: 0; min-height: 1.2em; }
.kic-done input, .kic-done .kic-consent { opacity: .5; }

.kic-donate { margin-top: 16px; padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--kic-accent); }
.kic-donate h3 { margin: 0 0 6px; font-size: 1.1rem; }
.kic-donate p { margin: 0 0 12px; }
.kic-donate-row { display: flex; gap: 10px; flex-wrap: wrap; }

.kic-info { margin-top: 36px; }

/* v1.2 · Live-Prüfungen */
.kic-live { margin-top: 22px; padding: 20px 22px; border-radius: 14px; background: var(--kic-surface); border: 2px solid var(--kic-accent); }
.kic-live h2 { margin: 0 0 6px; font-size: 1.3rem; }
.kic-live > p { margin: 0 0 14px; }
.kic-live-row { display: flex; gap: 10px; flex-wrap: wrap; }
.kic-live .kic-live-note { font-size: .85rem; opacity: .8; margin: 8px 0 0; }
.kic-live-out > * { margin-top: 18px; }
.kic-door-live h3, .kic-ask h3 { margin: 0 0 10px; font-size: 1.1rem; }
.kic-chat { display: grid; gap: 10px; }
.kic-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--kic-border); line-height: 1.5; }
.kic-msg--ai   { justify-self: start; background: rgba(59, 130, 246, .14); border-bottom-left-radius: 4px; }
.kic-msg--site { justify-self: end; background: var(--kic-surface); border-bottom-right-radius: 4px; }
.kic-msg-who { font-size: .75rem; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.kic-msg-text { word-break: break-word; }
.kic-msg-tech { font-size: .72rem; opacity: .65; margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.kic-door-langnote { font-size: .82rem; opacity: .75; line-height: 1.5; margin: 10px 0 0; }
.kic-verdict-note--ok { border-left-color: var(--kic-ok); }
.kic-ask-found { font-weight: 700; margin: 12px 0 0; }
.kic-ask-found--yes { color: var(--kic-ok); }
.kic-ask-found--no  { color: var(--kic-warn); }
.kic-ask-label { font-size: .85rem; font-weight: 700; margin-top: 12px; opacity: .85; }
.kic-sources { margin: 4px 0 0; padding-left: 20px; line-height: 1.6; font-size: .92rem; word-break: break-word; }
.kic-ask-queries { font-size: .82rem; opacity: .75; margin: 8px 0 0; }
.kic-list { columns: 2 260px; padding-left: 20px; line-height: 1.8; }
.kic-honest, .kic-privacy { font-size: .92rem; opacity: .9; line-height: 1.6; }

@media (max-width: 560px) {
    .kic-score { flex-direction: column; text-align: center; }
    .kic-form button { width: 100%; }
}