/* ---------- Kreuzworträtsel ---------- */
.sp-kw { --kc: 40px; --gw: 460px; --side: 300px; width: 100%; display: grid; grid-template-columns: auto var(--side); gap: 24px; justify-content: center; align-items: start; }
.sp-kw.is-narrow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sp-kw-load { margin: 0; padding: 40px 10px; text-align: center; color: var(--sp-muted); font-weight: 650; }
.sp-kw-main { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.sp-kw-info { margin: 0; font-size: .9rem; color: var(--sp-muted); text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.sp-kw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: .8rem; color: #fff;
	background: linear-gradient(135deg, #f59e0b, #db2777); box-shadow: 0 6px 14px -8px #db2777; }
.sp-kw-badge-f { background: linear-gradient(135deg, #7c3aed, #6366f1); box-shadow: 0 6px 14px -8px #7c3aed; }

/* Aktive Frage */
.sp-kw-cur { width: max(var(--gw), min(100%, 320px)); max-width: 100%; display: flex; align-items: stretch; gap: 6px; padding: 6px; border-radius: 18px; color: #fff;
	background: linear-gradient(120deg, #7c3aed, #9333ea 55%, #c026d3); box-shadow: 0 14px 28px -18px #6d28d9; }
.sp-kw-cur.is-v { background: linear-gradient(120deg, #6d28d9, #4f46e5 55%, #2563eb); }
.sp-kw-cur-body { flex: 1; min-width: 0; min-height: 3.6em; display: grid; align-content: center; gap: 2px; padding: 4px 6px; }
.sp-kw-cur-tag { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.sp-kw-cur-txt { font-size: 1.16rem; font-weight: 800; line-height: 1.25; }
.sp-kw-nav { flex: none; width: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; font: 900 1.6rem/1 var(--sp-font); cursor: pointer; transition: background .15s, transform .1s; }
.sp-kw-nav:hover { background: rgba(255, 255, 255, .28); }
.sp-kw-nav:active { transform: scale(.94); }
.sp-kw-nav:focus-visible { outline: 3px solid #fde68a; outline-offset: 1px; }

/* Gitter */
.sp-kw-grid { display: grid; grid-template-columns: repeat(var(--cols, 11), var(--kc)); grid-auto-rows: var(--kc); gap: 2px; padding: 7px; border-radius: 16px; outline: none; touch-action: manipulation;
	background: linear-gradient(150deg, #2e1065, #4c1d95 55%, #6d28d9); box-shadow: 0 22px 44px -22px #4c1d95, inset 0 1px 0 rgba(255, 255, 255, .2); }
.sp-kw-grid:focus-visible { box-shadow: 0 0 0 4px #c4b5fd, 0 22px 44px -22px #4c1d95; }
.sp-kw-cell { position: relative; display: grid; place-items: center; border-radius: calc(var(--kc) * .16); background: #fff; cursor: pointer; color: #1e1b4b;
	font: 800 calc(var(--kc) * .56)/1 var(--sp-font); transition: background .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.sp-kw-cell.is-block { background: rgba(255, 255, 255, .05); cursor: default; border-radius: calc(var(--kc) * .12); }
.sp-kw-cell small { position: absolute; left: calc(var(--kc) * .07); top: calc(var(--kc) * .04); font: 800 max(9px, calc(var(--kc) * .25))/1 var(--sp-font); color: #6d28d9; }
.sp-kw-l { padding-top: calc(var(--kc) * .1); }
.sp-kw-cell.is-word { background: #ede9fe; }
.sp-kw-cell.is-sel { background: #fde68a; box-shadow: inset 0 0 0 calc(max(2px, var(--kc) * .07)) #f59e0b; }
.sp-kw-cell.is-rev { color: #2563eb; }
.sp-kw-cell.is-rev::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: calc(var(--kc) * .16); height: calc(var(--kc) * .16); border-radius: 50%; background: #60a5fa; }
.sp-kw-cell.is-bad { color: #dc2626; background: #fee2e2; }
.sp-kw-cell.is-bad.is-word { background: #fecaca; }
.sp-kw-cell.is-bad.is-sel { background: #fecaca; box-shadow: inset 0 0 0 calc(max(2px, var(--kc) * .07)) #ef4444; }
.sp-kw-cell.is-done { background: linear-gradient(160deg, #ecfdf5, #d1fae5); color: #065f46; cursor: default; }
.sp-kw-cell.is-done small { color: #047857; }
.sp-kw-cell.is-flash { animation: spKwFlash .7s ease var(--fd, 0ms) both; }
@keyframes spKwFlash { 0% { transform: scale(1); } 40% { transform: scale(1.14); background: #bbf7d0; box-shadow: 0 0 14px 2px rgba(34, 197, 94, .7); } 100% { transform: scale(1); } }
.sp-kw-shake { animation: spShake .45s ease; }

/* Bildschirmtastatur */
.sp-kw-kbd { width: min(100%, 560px); display: grid; gap: 6px; padding: 8px; border-radius: 16px; background: linear-gradient(160deg, #ede9fe, #f5f3ff); border: 1px solid #ddd6fe; touch-action: manipulation; }
.sp-kw-krow { display: flex; gap: 5px; justify-content: center; }
.sp-kw-key { flex: 1 1 0; max-width: 52px; min-width: 0; height: 46px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; color: #1e1b4b; font: 800 1.12rem/1 var(--sp-font);
	background: #fff; box-shadow: 0 2px 0 #c4b5fd, 0 6px 12px -8px rgba(76, 29, 149, .5); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.sp-kw-key-w { flex: 1.5 1 0; max-width: 76px; color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 2px 0 #5b21b6; font-size: 1.25rem; }
.sp-kw-key.is-press { transform: translateY(2px); box-shadow: 0 0 0 #c4b5fd; filter: brightness(.93); }

/* Hilfen */
.sp-kw-tools { width: max(var(--gw), min(100%, 320px)); max-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-kw-tool { padding: 0 8px; }
.sp-kw-tool:nth-child(1) svg { color: #2563eb; }
.sp-kw-tool:nth-child(2) svg { color: #db2777; }
.sp-kw-tool:nth-child(3) svg { color: #059669; }

/* Fragenlisten */
.sp-kw-side { position: relative; display: grid; gap: 14px; align-content: start; overflow: auto; overscroll-behavior: contain; padding: 2px 6px 6px 2px; scrollbar-width: thin; }
.sp-kw.is-narrow .sp-kw-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; max-height: none; padding: 0; }
.sp-kw-col { background: #fff; border: 1px solid var(--sp-line); border-radius: 16px; padding: 10px 8px 8px; }
.sp-kw-col-a { border-top: 4px solid #7c3aed; }
.sp-kw-col-d { border-top: 4px solid #2563eb; }
.sp-kw-h { margin: 0 0 6px 6px; font-size: .82rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; color: #6d28d9; }
.sp-kw-col-d .sp-kw-h { color: #1d4ed8; }
.sp-kw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sp-kw-list li { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-size: .92rem; line-height: 1.3; color: var(--sp-ink-2); transition: background .12s; }
.sp-kw-list li:hover { background: #f5f3ff; }
.sp-kw-list li b { flex: none; min-width: 1.6em; text-align: right; color: #7c3aed; font-weight: 850; }
.sp-kw-col-d .sp-kw-list li b { color: #2563eb; }
.sp-kw-list li .sp-kw-q { flex: 1; }
.sp-kw-list li em { flex: none; font-style: normal; font-size: .8rem; color: var(--sp-muted); }
.sp-kw-list li.is-full { color: #94a3b8; }
.sp-kw-list li.is-full .sp-kw-q { text-decoration: line-through; text-decoration-color: rgba(148, 163, 184, .7); }
.sp-kw-list li.is-cross { background: #f8fafc; }
.sp-kw-list li.is-on { background: #ede9fe; color: #1e1b4b; box-shadow: inset 3px 0 0 #7c3aed; }
.sp-kw-col-d .sp-kw-list li.is-on { background: #dbeafe; box-shadow: inset 3px 0 0 #2563eb; }
.sp-kw-list li.is-on .sp-kw-q { text-decoration: none; }

.sp-shell:fullscreen .sp-kw-cur-txt { font-size: 1.35rem; }
@media (max-width: 640px) {
	.sp-kw-cur-txt { font-size: 1.04rem; }
	.sp-kw-nav { width: 34px; }
	.sp-kw-tool span { font-size: .84rem; }
	.sp-kw-tool { gap: 5px; padding: 0 4px; }
	.sp-kw-key { height: 44px; font-size: 1.05rem; border-radius: 8px; }
	.sp-kw-krow { gap: 4px; }
	.sp-kw-kbd { padding: 6px 4px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .sp-kw-cell.is-flash, .sp-kw-shake { animation: none; } }