/* O2-Koffer – Praxisspiel. Baut auf /style.css (pf-tool-main, pf-tool-frame) auf, Farben wie die O2-Tools. */

.kit-tool {
  --kit-purple: #3b22a3;
  --kit-ink: #1b2030;
  --kit-muted: #5b6273;
  --kit-line: #e6e8ee;
  --kit-soft: #f3f4f7;
  --kit-green: #2f8f3a;
  --kit-green-soft: #e8f5e9;
  --kit-red: #b42318;
  --kit-red-soft: #fdf1f0;
  --kit-yellow: #f4c542;
  --kit-yellow-soft: #fdf6dc;
}
.pf-tool-frame.kit-tool { max-width: 1180px; padding: 22px 26px 28px; color: var(--kit-ink); line-height: 1.5; }

.kit-eyebrow { margin: 0 0 4px; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kit-muted); }
.kit-head h1 { margin: 0 0 10px; color: var(--kit-purple); }
.kit-intro { max-width: 75ch; margin: 0 0 10px; font-size: 1.05rem; }
.kit-disclaimer { max-width: 75ch; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--kit-yellow-soft); border: 1px solid #f0dc95; font-size: .93rem; }
.kit-muted { color: var(--kit-muted); margin: 0; }
.kit-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0; }

.kit-btn { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--kit-purple); background: #fff; color: var(--kit-purple); cursor: pointer; }
.kit-btn:hover { background: rgba(59, 34, 163, .08); }
.kit-btn--primary { background: var(--kit-purple); color: #fff; }
.kit-btn--primary:hover { background: #2a1878; }
.kit-link { color: var(--kit-purple); font-weight: 600; }

.kit-situation { padding: 12px 14px; border-radius: 12px; background: rgba(59, 34, 163, .07); margin: 0 0 10px; }
.kit-situation b, .kit-task b { display: block; margin-bottom: 2px; }
.kit-situation p, .kit-task p { margin: 0; }
.kit-task { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--kit-line); margin: 0 0 10px; }
.kit-meta { display: flex; gap: 16px; font-size: .9rem; color: var(--kit-muted); margin: 0 0 8px; font-variant-numeric: tabular-nums; }

.kit-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 0 10px; }
.kit-top .kit-situation { margin: 0; }
.kit-top .kit-meta { flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 0; }
.kit-stage { position: relative; border-radius: 14px; overflow: hidden; background: #fbfaf7; border: 1px solid var(--kit-line); margin: 0 0 10px; }
.kit-svg { display: block; width: 100%; height: auto; user-select: none; }
.kit-hot { cursor: pointer; outline: none; }
.kit-hot:hover, .kit-hot:focus-visible { filter: drop-shadow(0 0 5px #ffd23f) drop-shadow(0 0 2px #ffd23f); }

.kit-msg { padding: 10px 12px; border-radius: 10px; margin: 0 0 10px; border-left: 4px solid; font-size: .95rem; }
.kit-msg.is-ok { background: var(--kit-green-soft); border-color: var(--kit-green); }
.kit-msg.is-info { background: var(--kit-soft); border-color: var(--kit-purple); }
.kit-msg.is-bad { background: var(--kit-red-soft); border-color: var(--kit-red); }

.kit-log summary { cursor: pointer; font-weight: 700; margin: 6px 0; }
.kit-log ol { margin: 0; padding-left: 1.2rem; font-size: .9rem; color: var(--kit-muted); display: grid; gap: 2px; }

.kit-menu { position: absolute; z-index: 5; min-width: 220px; max-width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); padding: 10px; display: grid; gap: 6px; }
.kit-menu b { font-size: .9rem; color: var(--kit-muted); padding: 0 4px 2px; }
.kit-menu__btn { font: inherit; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--kit-line); background: var(--kit-soft); color: var(--kit-ink); cursor: pointer; }
.kit-menu__btn:hover, .kit-menu__btn:focus-visible { border-color: var(--kit-purple); background: rgba(59, 34, 163, .08); outline: none; }
.kit-menu__btn.is-current { border-color: var(--kit-purple); font-weight: 700; }
.kit-menu__cancel { font: inherit; font-size: .85rem; border: 0; background: none; color: var(--kit-muted); cursor: pointer; padding: 4px; }

.kit-overlay { position: absolute; inset: 0; z-index: 6; background: rgba(27, 32, 48, .35); display: grid; place-items: center; padding: 12px; }
.kit-dialog { background: #fff; border-radius: 14px; padding: 16px 18px; max-width: 420px; display: grid; gap: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.kit-dialog h3 { margin: 0; }
.kit-dialog p { margin: 0 0 6px; }

.kit-done { max-width: 760px; }
.kit-done h2 { color: var(--kit-green); margin: 0 0 6px; }
.kit-done ol { padding-left: 1.2rem; display: grid; gap: 4px; }
.kit-summary { margin: 14px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--kit-line); }
.kit-summary h3 { margin: 0 0 6px; }
.kit-summary h4 { margin: 10px 0 4px; }
.kit-errors, .kit-goods { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.kit-errors li.is-major { color: var(--kit-red); }
.kit-goods li { color: var(--kit-green); }
.kit-good { color: var(--kit-green); font-weight: 700; }

@media (max-width: 900px) {
  .kit-top { grid-template-columns: 1fr; }
  .kit-top .kit-meta { justify-content: flex-start; }
  .pf-tool-frame.kit-tool { padding: 14px 12px 20px; }
}
.kit-stage--done { margin: 0 0 14px; pointer-events: none; }
.kit-done { max-width: 900px; }