/* Lehrzeug Knobeln und Rätseln (Lehrzeug 1.9.2) */
.kn-quick { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c-gelb) 14%, var(--surface)); }
.kn-quick-t { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); } .kn-quick-t b { color: var(--ink); }
.kn-k-logik { --kc: #2E6FE0; } .kn-k-mathe { --kc: #0E9C86; } .kn-k-zahlen { --kc: #7457D1; } .kn-k-wort { --kc: #D9573F; }
.kn-k-geschichte { --kc: #B7791F; } .kn-k-situation { --kc: #34406B; } .kn-k-denk { --kc: #138A5C; } .kn-k-alle { --kc: var(--teal); }
.kn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kn-chip { padding: 6px 12px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--kc) 45%, var(--line-2)); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.kn-chip[aria-pressed="true"] { background: var(--kc); border-color: var(--kc); color: #fff; }
.kn-lv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kn-lvb { display: grid; gap: 1px; justify-items: center; padding: 6px 4px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: #C98500; font: inherit; font-size: 13px; cursor: pointer; }
.kn-lvb span { color: var(--ink-2); font-size: 11.5px; }
.kn-lvb[aria-pressed="true"] { border-color: #C98500; background: color-mix(in srgb, var(--c-gelb) 14%, var(--surface)); }
.kn-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow: auto; }
.kn-list li { display: flex; gap: 4px; align-items: center; }
.kn-li { flex: 1; min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1.5px solid transparent; border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.kn-li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-li small { color: #C98500; font-size: 11px; }
.kn-li.is-on { border-color: var(--teal); background: var(--teal-soft); }
.kn-li.is-seen b { color: var(--ink-3); }
.kn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kc); }
.kn-none { font-size: 13.5px; color: var(--ink-3); padding: 6px; }
.kn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.kn-safe { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 13px; color: var(--ink-3); } .kn-safe .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--teal-ink); }
/* Bühne */
.kn-stage { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 460px; padding: 28px 30px 24px; border-radius: 18px; color: #fff; background: radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .18), transparent 45%), linear-gradient(150deg, var(--kc), color-mix(in srgb, var(--kc) 55%, #0B1530)); outline: none; overflow: auto; }
.kn-stage:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.kn-stage.is-full { border-radius: 0; padding: 5vh 7vw; justify-content: center; font-size: 1.5vw; }
.kn-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kn-badge { padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.kn-stars { color: #FFD45C; letter-spacing: 2px; font-size: 17px; }
.kn-timer { margin-left: auto; padding: 4px 12px; border-radius: 99px; background: rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.kn-title { margin: 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; }
.kn-q { margin: 0; font-size: clamp(18px, 1.75vw, 26px); line-height: 1.5; }
.kn-stage.is-full .kn-title { font-size: 3.2vw; } .kn-stage.is-full .kn-q { font-size: 2.3vw; }
.kn-ask { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .15); font-size: 15px; }
.kn-ask .i { width: 20px; height: 20px; flex: none; }
.kn-tips { display: grid; gap: 8px; }
.kn-tip { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 212, 92, .2); font-size: clamp(15px, 1.4vw, 21px); line-height: 1.45; }
.kn-tip .i { width: 22px; height: 22px; flex: none; color: #FFD45C; margin-top: 2px; }
.kn-sol { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: #0B1B3F; display: grid; gap: 8px; }
.kn-sol p { margin: 0; line-height: 1.5; }
.kn-l { font-size: clamp(16px, 1.55vw, 23px); }
.kn-e { font-size: clamp(14.5px, 1.25vw, 19px); color: #2B3A55; }
.kn-n { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: #5B3E06; background: #FFF3D6; padding: 8px 10px; border-radius: 10px; }
.kn-n .i { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.kn-h { font-size: 12.5px; color: #5B6372; }
.kn-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.kn-b { background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; }
.kn-b:hover { background: rgba(255, 255, 255, .28); }
.kn-b:disabled { opacity: .45; }
.kn-print { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 14px 0 6px; }
.kn-print .field { margin: 0; min-width: 160px; }
/* Rätselblatt */
.kn-sheet { padding: 12mm 14mm 16mm; font-family: var(--font); color: #071B4A; background: #fff; font-size: 10.5pt; line-height: 1.45; }
.kn-sheet h1 { margin: 0 0 1mm; font-size: 18pt; }
.kn-sub { margin: 0 0 5mm; color: #4A5468; }
.kn-pr, .kn-pl { margin: 0 0 5mm; }
.kn-pr h2, .kn-pl h2 { display: flex; align-items: baseline; gap: 2.4mm; margin: 0 0 1.4mm; font-size: 11.5pt; }
.kn-pr h2 span, .kn-pl h2 span { display: inline-grid; place-items: center; width: 6mm; height: 6mm; border-radius: 50%; background: #071B4A; color: #fff; font-size: 9pt; }
.kn-pr h2 small { color: #C98500; font-weight: 500; }
.kn-pr p, .kn-pl p { margin: 0 0 1.4mm; }
.kn-lines { display: grid; gap: 0; }
.kn-lines i { display: block; height: 8mm; border-bottom: .25mm solid #9AA5B8; }