/* ==========================================================================
   KI-Check (seit 02.10.2026, Gestaltung «Glanz» seit 02.11.2026).
   Glaskarte in den Farben des Rahmens: hell im hellen, tief im dunklen Design.
   Vorher ein dunkles Terminal mit Ampelknöpfen und Orange; das passt nicht mehr.
   Logik: assets/ki-check.js. Endpunkt: /api/ki-sichtbarkeit (site/_worker.js).
   ========================================================================== */
.kc{--kc-bg:var(--bg2,#fff);--kc-bar:transparent;--kc-line:var(--line,rgba(11,12,16,.08));
    --kc-ink:var(--ink,#0B0C10);--kc-mut:var(--mut,#4B4F5C);--kc-soft:var(--soft,#6E7380);--kc-feld:var(--bg3,#F3F4F7);--kc-rand:var(--line2,rgba(11,12,16,.14));
    --kc-gut:#16A34A;--kc-warn:#B45309;--kc-or:var(--accent-ink,#2350D9);
    position:relative;background:var(--kc-bg);border:1px solid var(--kc-line);border-radius:var(--rund,20px);overflow:hidden;isolation:isolate;
    color:var(--kc-ink);font-family:var(--sans);letter-spacing:-.006em;box-shadow:var(--schatten-gross)}
[data-theme="dark"] .kc{--kc-bg:#0F1220;--kc-gut:#34D399;--kc-warn:#FBBF24}
/* Farbschleier oben rechts, wie im Kopfteil der Startseite. Nur Dekor. */
.kc::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:-1;
    background:radial-gradient(70% 60% at 100% 0%,rgba(59,108,246,.16),transparent 62%),
               radial-gradient(50% 50% at 75% 0%,rgba(139,92,246,.12),transparent 60%),
               radial-gradient(40% 40% at 100% 30%,rgba(249,115,98,.10),transparent 60%)}
.kc-bar{position:relative;display:flex;align-items:center;gap:10px;background:var(--kc-bar);padding:14px 20px 0}
.kc-bar b{display:none}
.kc-bar span{font-size:12px;font-weight:500;color:var(--kc-soft);display:inline-flex;align-items:center;gap:8px}
.kc-bar span::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
    background:radial-gradient(circle at 35% 30%,#fff 0 8%,transparent 30%),radial-gradient(circle at 50% 60%,#8B5CF6,#25085f 75%)}
.kc-bar em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--kc-soft)}
.kc-body{position:relative;padding:clamp(18px,2.4vw,28px) clamp(20px,2.6vw,30px) clamp(20px,2.6vw,30px)}

.kc .kc-kicker{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:12px;font-weight:500;
    letter-spacing:.06em;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(22,163,74,.45)}55%{box-shadow:0 0 0 6px rgba(22,163,74,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:var(--kc-soft);opacity:1}
.kc input:focus{outline:none;border-color:var(--accent,#3B6CF6);box-shadow:0 0 0 4px rgba(59,108,246,.18)}
.kc input[aria-invalid="true"]{border-color:#E5534B}
.kc-knopf{height:52px;border-radius:999px;border:0;background:var(--ink,#0B0C10);color:var(--bg,#fff);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(--verlauf,#3B6CF6);color:#fff}
.kc-knopf:active{transform:scale(.985)}
.kc-knopf:focus-visible{outline:2px solid var(--accent,#3B6CF6);outline-offset:3px}
.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,.12);color:#C2362E;
    font-size:14px;line-height:1.45;max-width:none}

/* ---------- Lauf ---------- */
.kc .kc-frage{font-size:13.5px;font-weight:500;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(59,108,246,.2);border-top-color:var(--accent,#3B6CF6);
    flex:none;animation:kc-dreh .85s linear infinite}
@keyframes kc-dreh{to{transform:rotate(360deg)}}
.kc-balken{height:4px;border-radius:99px;background:var(--kc-feld);overflow:hidden}
.kc-balken i{display:block;height:100%;width:0;border-radius:inherit;background:var(--verlauf,#3B6CF6);
    transition:width .6s linear}
.kc .kc-uhr{font-size:12px;font-variant-numeric:tabular-nums;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:var(--kc-soft)}
.kc-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.kc-zahlen div{border:1px solid var(--kc-line);border-radius:14px;padding:10px 12px;background:var(--kc-feld)}
.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 var(--kc-rand);padding:1px 0 1px 12px}
.kc .kc-antworten h3{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--kc-soft);margin:0 0 4px;font-weight:500;line-height:1.4}
.kc .kc-antworten p{font-size:14px;line-height:1.5;color:var(--kc-mut);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:var(--kc-soft)}
.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:999px;background:var(--ink,#0B0C10);color:var(--bg,#fff);text-decoration:none;font-weight:600;font-size:15px;
    transition:background-color .2s}
.kc-weiter:hover,.kc-weiter:focus-visible{background:var(--verlauf,#3B6CF6);color:#fff}
.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}
}