/* =========================================================
   Kontrast Checker – Styles (Basis: assets/css/tool-ui.css)
   ========================================================= */
.kc .tu-card__head { flex-wrap: wrap; }
.kc-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; }
.kc-color { display: grid; gap: 8px; min-width: 0; }
.kc-colorrow { display: flex; gap: 10px; }
.kc-native { flex: 0 0 52px; height: 48px; padding: 3px; border-radius: 12px; border: 1.5px solid rgba(15,19,48,.12); background: #fff; cursor: pointer; }
.kc-input { flex: 1; min-width: 0; font-size: 16px; }
.kc-input.is-err { border-color: var(--err); }
.kc-msg { font-size: 12.5px; color: var(--muted); }
.kc-msg:empty { display: none; }
.kc-alpha { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kc-alpha output { color: var(--ink); }
.kc-alpha input { width: 100%; accent-color: var(--blue); }
.kc-swap { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 30px; border-radius: 50%; color: var(--muted); background: rgba(15,19,48,.05); transition: transform .3s var(--ease), color .2s; }
.kc-swap:hover { color: var(--ink); transform: rotate(180deg); }
.kc-swap .i { width: 18px; height: 18px; }
.kc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,19,48,.07); }
.kc-presets span { margin-right: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kc-presets button { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(15,19,48,.05); }
.kc-presets button:hover { color: var(--ink); }

/* Vorschau */
.kc-preview { display: grid; gap: 12px; padding: 26px 28px; border-radius: 16px; color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 1px rgba(15,19,48,.08); transition: background .2s, color .2s; }
.kc-p-big { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.kc-p-text { font-size: 16px; line-height: 1.6; }
.kc-p-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kc-p-small { font-size: 13px; line-height: 1.5; }
.kc-p-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.kc-p-btn { padding: 9px 18px; border-radius: 10px; font-weight: 700; color: var(--bg); background: var(--fg); }
.kc-p-outline { padding: 8px 16px; border-radius: 10px; font-weight: 600; border: 2px solid var(--fg); }
.kc-p-ui .i { width: 24px; height: 24px; color: var(--fg); }

/* Ergebnis */
.kc-ratio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; --c: var(--ok); }
.kc-ratio[data-level="warn"] { --c: #c26a12; } .kc-ratio[data-level="err"] { --c: var(--err); }
.kc-ratio b { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; }
.kc-ratio b small { font-size: 22px; font-weight: 700; }
.kc-ratio > span { font-size: 15px; font-weight: 700; color: var(--c); }
.kc-levels { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kc-levels li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(209,52,56,.06); }
.kc-levels li[data-pass="true"] { background: rgba(34,192,140,.08); }
.kc-badge { flex: 0 0 60px; padding: 3px 0; border-radius: 7px; text-align: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--err); }
.kc-levels li[data-pass="true"] .kc-badge { background: var(--ok); }
.kc-lv { display: grid; min-width: 0; }
.kc-lv strong { font-size: 13.5px; color: var(--ink); }
.kc-lv small { font-size: 11.5px; color: var(--muted); }
.kc-suggest { margin-top: 14px; }
.kc-shead { font-size: 13px; color: var(--text); }
.kc-allgood { font-size: 13.5px; font-weight: 600; color: #0f7a52; }
.kc-sbtns { display: grid; gap: 8px; margin-top: 8px; }
.kc-sbtn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; text-align: left; background: #fff; border: 1px solid rgba(15,19,48,.1); transition: border-color .2s; }
.kc-sbtn:hover { border-color: var(--blue); }
.kc-sbtn i { flex: 0 0 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(15,19,48,.15); }
.kc-sbtn span { display: grid; font-size: 12px; color: var(--muted); }
.kc-sbtn b { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }

/* APCA */
.kc-beta { margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: #3b5bdb; background: rgba(91,140,255,.12); }
.kc-lc { display: grid; gap: 2px; margin-bottom: 8px; }
.kc-lc b { font-size: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.kc-lc span { font-size: 13.5px; color: var(--text); }

/* Farbsehschwächen */
.kc-cvd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kc-cvdbox { margin: 0; display: grid; gap: 8px; align-content: start; }
.kc-cvd + .tu-hint { margin-top: 14px; }
.kc-cvdprev { display: grid; place-items: center; gap: 2px; padding: 16px 8px; border-radius: 12px; color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 1px rgba(15,19,48,.08); }
.kc-cvdprev b { font-size: 28px; }
.kc-cvdprev span { font-size: 13px; }
.kc-cvdbox figcaption { display: grid; gap: 2px; }
.kc-cvdbox strong { font-size: 13px; color: var(--ink); }
.kc-cvdbox small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.kc-cvdratio { justify-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #8f1d20; background: rgba(209,52,56,.08); font-variant-numeric: tabular-nums; }
.kc-cvdratio[data-pass="true"] { color: #0b5e3f; background: rgba(34,192,140,.12); }

@media (max-width: 760px) {
  .kc-pair { grid-template-columns: minmax(0, 1fr); }
  .kc-swap { margin: 0 auto; transform: rotate(90deg); }
  .kc-swap:hover { transform: rotate(270deg); }
  .kc-cvd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-preview { padding: 20px; }
}