/* KI-Rahmen, kompakte Fassung des KI-Reglers für die Startseite (2026-10-16). JS: js/ki-rahmen.js.
   Fläche Navy: steht direkt unter dem Systemplan #system und setzt dessen Farbe fort (Yusuf 16.10.). */
section.kra { padding: 0 0 clamp(56px, 7vw, 96px); background: #0b1c3d; color: #fff; }
.kra-box { max-width: 860px; }
body.is-home section.kra h2, section.kra h2 { color: #fff; font-size: clamp(24px, 20px + 1vw, 34px); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 24px; }
.kra-card { border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 22px 24px 20px; background: rgba(255,255,255,.04); }
.kra-top { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.kra-count { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kra-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.kra-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #2b8aff; border-radius: 4px; transition: transform .35s ease; }
.kra-back, .kra-again { min-height: 44px; padding: 0 6px; border: 0; background: none; color: #7cc6ff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.kra-back[hidden] { display: none; }
.kra-area { margin: 10px 0 14px; font-size: 20px; color: #fff; outline: none; }
.kra-btns { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; overflow: hidden; }
.kra-btns button { min-height: 48px; padding: 0 10px; border: 0; border-left: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.kra-btns button:first-child { border-left: 0; }
.kra-btns button[aria-pressed="true"] { background: #fff; color: #0b1c3d; }
.kra-btns button:focus-visible { outline: 2px solid #7cc6ff; outline-offset: -3px; }
.kra-btns button:disabled { color: rgba(255,255,255,.35); cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.05) 6px 12px); }
@media (hover: hover) { .kra-btns button:not(:disabled):not([aria-pressed="true"]):hover { background: rgba(255,255,255,.08); } .kra-back:hover, .kra-again:hover { text-decoration: underline; } }
.kra-hint { margin: 12px 0 0; min-height: 3em; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); }
.kra-warn { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #f5c26b; }
.kra-warn[hidden], .kra-step[hidden], .kra-end[hidden] { display: none; }
.kra-done { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #fff; outline: none; }
.kra-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kra-chips li { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.09); font-size: 14px; color: #fff; }
.kra-chips b { font-weight: 600; }
.kra-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.kra-cta .btn { min-height: 48px; display: inline-flex; align-items: center; }
.kra-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.kra-in { animation: kra-in .35s ease both; }
@keyframes kra-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kra-in { animation: none; } .kra-bar i { transition: none; } }
@media (max-width: 760px) { section.kra { padding-bottom: 56px; } }
@media (max-width: 600px) {
  .kra-card { padding: 16px 16px 14px; }
  .kra-btns { grid-template-columns: 1fr 1fr; }
  .kra-btns button:nth-child(3) { border-left: 0; }
  .kra-btns button:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.22); }
  .kra-hint { min-height: 4.5em; }
}