/* ==========================================================================
   KI-Check im Hero der Startseite (seit 02.10.2026).
   Gleiche Familie wie das Terminal-Fenster: dunkel in beiden Designs, damit
   das Werkzeug neben der grossen Überschrift als Gerät erkennbar ist.
   Logik: assets/ki-check.js. Endpunkt: /api/ki-sichtbarkeit (site/_worker.js).
   ========================================================================== */
.kc{--kc-bg:var(--term,#0E0E10);--kc-bar:var(--term2,#161619);--kc-line:var(--term-line,#232327);
    --kc-ink:#F2F2F0;--kc-mut:#B4B4BC;--kc-soft:#8C8C96;--kc-feld:#17171B;--kc-rand:#2E2E36;
    --kc-gut:#3EBE7E;--kc-warn:#E5A445;--kc-or:#F1A05C;
    position:relative;background:var(--kc-bg);border:1px solid var(--kc-line);border-radius:18px;overflow:hidden;
    color:var(--kc-ink);font-family:var(--sans);letter-spacing:-.006em;
    box-shadow:0 34px 90px -28px rgba(var(--shadow,0,0,0),.5)}
/* Ein warmer Schein oben rechts, aus der Akzentfarbe. Nur Dekor. */
.kc::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:radial-gradient(90% 55% at 100% 0%,rgba(229,105,16,.18),transparent 62%)}
.kc-bar{position:relative;display:flex;align-items:center;gap:8px;background:var(--kc-bar);padding:11px 16px;
    border-bottom:1px solid var(--kc-line)}
.kc-bar b{width:11px;height:11px;border-radius:50%;display:inline-block}
.kc-bar b:nth-child(1){background:#FF5F57}.kc-bar b:nth-child(2){background:#FEBC2E}.kc-bar b:nth-child(3){background:#28C840}
.kc-bar span{font-family:var(--mono);font-size:11px;color:#8A8A93;margin-left:8px}
.kc-bar em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;color:#8A8A93}
.kc-body{position:relative;padding:clamp(20px,2.6vw,30px)}

.kc .kc-kicker{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-family:var(--mono);font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--kc-or);max-width:none;line-height:1.4}
.kc-dot{width:7px;height:7px;border-radius:50%;background:var(--kc-gut);flex:none;animation:kc-puls 2.4s infinite}
@keyframes kc-puls{0%,100%{box-shadow:0 0 0 0 rgba(62,190,126,.5)}55%{box-shadow:0 0 0 6px rgba(62,190,126,0)}}
.kc .kc-titel{font-size:clamp(23px,2.4vw,30px);line-height:1.12;letter-spacing:-.028em;font-weight:600;
    color:var(--kc-ink);margin:0 0 10px}
.kc .kc-text{font-size:15px;line-height:1.55;color:var(--kc-mut);margin:0 0 20px;max-width:46ch}
.kc-felder{display:grid;gap:10px}
.kc input{width:100%;height:50px;border-radius:12px;border:1px solid var(--kc-rand);background:var(--kc-feld);
    color:var(--kc-ink);font:inherit;font-size:16px;padding:0 16px;margin:0;
    transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.kc input::placeholder{color:#74747E;opacity:1}
.kc input:focus{outline:none;border-color:var(--kc-or);box-shadow:0 0 0 3px rgba(229,105,16,.25)}
.kc input[aria-invalid="true"]{border-color:#E5534B}
.kc-knopf{height:52px;border-radius:12px;border:0;background:#F2F2F0;color:#0E0E10;font:inherit;font-size:16px;
    font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
    transition:background-color .2s,transform .15s}
.kc-knopf:hover,.kc-knopf:focus-visible{background:var(--kc-or)}
.kc-knopf:active{transform:scale(.985)}
.kc-knopf:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kc-knopf i{font-style:normal;transition:transform .3s cubic-bezier(.22,.7,.24,1)}
.kc-knopf:hover i{transform:translateX(4px)}
.kc-knopf[disabled]{opacity:.55;cursor:progress}
.kc .kc-klein{font-size:12.5px;line-height:1.5;color:var(--kc-soft);margin:12px 0 0;max-width:none}
.kc .kc-klein a{color:var(--kc-mut);text-decoration:underline;text-underline-offset:2px}
.kc .kc-meldung{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:rgba(229,83,75,.13);color:#FFB8B2;
    font-size:14px;line-height:1.45;max-width:none}

/* ---------- Lauf ---------- */
.kc .kc-frage{font-family:var(--mono);font-size:13px;color:var(--kc-or);margin:0 0 18px;line-height:1.5;max-width:none;
    overflow-wrap:anywhere}
.kc-schritte{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.kc-schritte li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.35;color:var(--kc-mut);margin:0}
.kc-schritte li.spaeter{opacity:.4;transition:opacity .5s}
.kc-schritte li.spaeter.an{opacity:1}
.kc-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(241,160,92,.22);border-top-color:var(--kc-or);
    flex:none;animation:kc-dreh .85s linear infinite}
@keyframes kc-dreh{to{transform:rotate(360deg)}}
.kc-balken{height:4px;border-radius:99px;background:#202027;overflow:hidden}
.kc-balken i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#E56910,#F1A05C);
    transition:width .6s linear}
.kc .kc-uhr{font-family:var(--mono);font-size:12px;color:var(--kc-soft);margin:10px 0 0;text-align:right;max-width:none}

/* ---------- Ergebnis ---------- */
.kc-erg:focus{outline:none}
.kc-erg-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}
.kc .kc-erg-kopf p{margin:0;font-size:14px;line-height:1.4;color:var(--kc-mut);max-width:none;overflow-wrap:anywhere}
.kc-erg-kopf b{color:var(--kc-ink);font-weight:600}
.kc-neu{flex:none;background:none;border:1px solid var(--kc-rand);color:var(--kc-mut);border-radius:99px;font:inherit;
    font-size:12.5px;padding:0 14px;height:34px;cursor:pointer;transition:color .2s,border-color .2s}
.kc-neu:hover,.kc-neu:focus-visible{color:var(--kc-ink);border-color:#55555F}
.kc-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.kc-zahlen div{border:1px solid #26262D;border-radius:12px;padding:10px 12px;background:#131317}
.kc-zahlen dt{font-size:11.5px;line-height:1.3;color:var(--kc-soft)}
.kc-zahlen dd{margin:5px 0 0;font-size:22px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--kc-ink)}
.kc-zahlen dd small{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--kc-soft);margin-top:3px;
    overflow-wrap:anywhere}
.kc-zahlen .gut dd{color:var(--kc-gut)}
.kc-zahlen .warn dd{color:var(--kc-warn)}
.kc-antworten{display:grid;gap:12px;margin:0 0 14px}
.kc-antworten article{border-left:2px solid #34343D;padding:1px 0 1px 12px}
.kc .kc-antworten h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:#8A8A93;margin:0 0 4px;font-weight:500;line-height:1.4}
.kc .kc-antworten p{font-size:14px;line-height:1.5;color:#D2D2D8;margin:0;max-width:none;overflow-wrap:anywhere}
.kc-hinweise{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px}
.kc-hinweise li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--kc-mut);margin:0}
.kc-hinweise li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:#6E6E78}
.kc-hinweise li.gut::before{background:var(--kc-gut)}
.kc-hinweise li.warn::before{background:var(--kc-warn)}
.kc-weiter{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 18px;
    border-radius:12px;background:#F2F2F0;color:#0E0E10;text-decoration:none;font-weight:600;font-size:15px;
    transition:background-color .2s}
.kc-weiter:hover,.kc-weiter:focus-visible{background:var(--kc-or)}
.kc-weiter i{font-style:normal;transition:transform .3s cubic-bezier(.22,.7,.24,1)}
.kc-weiter:hover i{transform:translateX(4px)}

@media (max-width:420px){
  .kc-zahlen{grid-template-columns:1fr 1fr}
  .kc-zahlen div:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .kc-dot,.kc-spin{animation:none}
  .kc-balken i,.kc-knopf i,.kc-weiter i{transition:none}
}