/* Lehrzeug Spielekiste – werkzeugeigenes Design. Gemeinsames Design: /kern/kern.css */
.sp-filter { margin-bottom: 22px; }
.sp-fbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-fbar .panel-title { margin: 0; }
.sp-frow { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; margin-bottom: 10px; }
.sp-fgroup .field-label { display: block; margin-bottom: 6px; }
.sp-fgroup select { min-width: 160px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sp-chip .i { width: 16px; height: 16px; }
.sp-chip:hover { border-color: var(--rosa); }
.sp-chip[aria-pressed="true"] { border-color: var(--rosa-ink); background: var(--rosa-soft); color: var(--rosa-ink); }
.sp-arts { margin: 0 0 14px; }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sp-none { color: var(--ink-3); padding: 20px; }
.sp-card { width: 100%; height: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.sp-card:hover { transform: translateY(-2px); border-color: var(--rosa); box-shadow: var(--shadow-1); }
.sp-cico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--rosa-soft); color: var(--rosa-ink); }
.sp-cico .i { width: 24px; height: 24px; }
.a-bewegung .sp-cico { background: var(--orange-soft); color: var(--orange-ink); } .a-ruhig .sp-cico { background: var(--blue-soft); color: var(--blue-ink); } .a-wort .sp-cico { background: var(--lila-soft); color: var(--lila-ink); }
.a-team .sp-cico { background: var(--teal-soft); color: var(--teal-ink); } .a-rollen .sp-cico { background: #1E2A4A; color: #FFD166; } .a-kennen .sp-cico { background: var(--yellow-soft); color: var(--yellow-ink); }
.sp-ct { display: grid; gap: 3px; min-width: 0; }
.sp-ct b { font-size: 15.5px; line-height: 1.25; } .sp-ct small { font-size: 13px; color: var(--ink-2); line-height: 1.4; } .sp-ct em { font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* Spielleitung */
.sp-play { margin-bottom: 22px; scroll-margin-top: 80px; }
.sp-phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sp-phead .panel-title { margin: 0; }
.sp-pmeta { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.sp-pact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-sess { padding: 6px 12px; border-radius: 99px; background: var(--sunken); font-weight: 700; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-sess.is-over { background: var(--coral-soft); color: var(--coral-ink); }
.sp-show { display: grid; gap: 10px; }
.sp-stage { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; border-radius: 16px; background: linear-gradient(140deg, #FFF6FA 0%, #F1F6FF 100%); color: #071B4A; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -26px rgba(7, 27, 74, .6); }
.sp-ctrl { display: flex; align-items: center; gap: 8px; }
.sp-dots { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; justify-content: center; }
.sp-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: var(--line-2); cursor: pointer; }
.sp-dots button[aria-current="true"] { background: var(--rosa); transform: scale(1.3); }
.sp-show.is-full, .sp-show.is-pseudo { background: #0B1B3F; padding: 2vh 2vw; align-content: center; justify-items: center; }
.sp-show.is-pseudo { position: fixed; inset: 0; z-index: 2000; }
.sp-show.is-full .sp-stage, .sp-show.is-pseudo .sp-stage { width: min(96vw, calc(92vh * 16 / 9)); border-radius: 0; }
.sp-show.is-full .sp-ctrl, .sp-show.is-pseudo .sp-ctrl { width: min(96vw, calc(92vh * 16 / 9)); opacity: .3; }
.sp-show.is-full .sp-ctrl:hover, .sp-show.is-pseudo .sp-ctrl:hover { opacity: 1; }
.sp-note { margin-top: 8px; }
.sp-gset { margin-top: 12px; }
.sp-gset summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--ink-2); }
.sp-gset summary .i { width: 18px; height: 18px; }
.sp-gsrow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 14px; margin-top: 10px; align-items: end; }
.sp-gsrow label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sp-gsrow .check { grid-column: 1 / -1; }
@media (max-width: 640px) { .sp-gsrow { grid-template-columns: minmax(0, 1fr); } }

/* Folie */
.sp-sl { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 1.6cqw; padding: 3.6cqw 4.6cqw 3cqw; animation: spIn .3s ease-out; }
.sp-sl:not(.has-w) { grid-template-rows: auto minmax(0, 1fr) auto; align-content: start; }
@keyframes spIn { from { opacity: 0; transform: translateY(1cqw); } to { opacity: 1; transform: none; } }
.sp-sh { display: flex; align-items: center; gap: 1.6cqw; }
.sp-sn { flex: none; padding: .5cqw 1.2cqw; border-radius: 99px; background: #E5487A; color: #fff; font-weight: 800; font-size: 1.4cqw; }
.a-bewegung .sp-sn { background: #F08A24; } .a-ruhig .sp-sn { background: #2E7CF6; } .a-wort .sp-sn { background: #8B5CF6; } .a-team .sp-sn { background: #12A383; } .a-rollen .sp-sn { background: #1E2A4A; } .a-kennen .sp-sn { background: #C99200; }
.sp-sl h2 { margin: 0; font-size: 3.8cqw; line-height: 1.1; letter-spacing: -.02em; }
.sp-tx { font-size: 2.35cqw; line-height: 1.4; max-width: 84cqw; }
.sp-tx p { margin: 0 0 1.1cqw; }
.has-w .sp-tx { font-size: 1.9cqw; }
.sp-btn { display: inline-flex; align-items: center; gap: .8cqw; padding: 1cqw 1.8cqw; border-radius: 1.4cqw; border: 0; background: #071B4A; color: #fff; font: inherit; font-weight: 800; font-size: max(13px, 1.6cqw); cursor: pointer; }
.sp-btn .i { width: max(16px, 2cqw); height: max(16px, 2cqw); }
.sp-btn:hover { background: #12306B; }
.sp-ghost { background: transparent; color: #071B4A; box-shadow: inset 0 0 0 .2cqw #071B4A; }
.sp-ghost:hover { background: rgba(7, 27, 74, .06); }
.sp-red { background: #D2465A; } .sp-red:hover { background: #B4233A; }
.sp-grow { display: flex; flex-wrap: wrap; align-items: center; gap: 1cqw; }
.sp-timer { display: flex; align-items: center; gap: 1.6cqw; }
.sp-timer b { font-size: 4.2cqw; font-variant-numeric: tabular-nums; min-width: 12cqw; }
.sp-tbar { flex: 1; height: 1.4cqw; border-radius: 99px; background: rgba(7, 27, 74, .1); overflow: hidden; }
.sp-tbar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #12A383, #F5C400); transition: width .9s linear; }
.sp-timer.is-low b { color: #D2465A; } .sp-timer.is-done b { color: #D2465A; animation: spPulse 1s ease-in-out 3; }
@keyframes spPulse { 50% { transform: scale(1.12); } }
.sp-prompt { display: grid; gap: 2cqw; align-content: center; justify-items: start; }
.sp-pv { margin: 0; padding: 2cqw 2.6cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 1cqw 3cqw -1.6cqw rgba(7, 27, 74, .4); font-size: 3.4cqw; font-weight: 800; line-height: 1.2; }
.sp-prompt.is-big .sp-pv { font-size: 4.2cqw; }
.sp-loop { display: flex; align-items: center; gap: 2cqw; }
.sp-round { font-size: 2cqw; font-weight: 700; }
.sp-mond { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2cqw; align-items: center; }
.sp-n { display: grid; gap: .5cqw; font-size: 1.4cqw; font-weight: 700; color: #3D4B66; }
.sp-n input { width: 10cqw; font: inherit; font-size: 3cqw; font-weight: 800; padding: .5cqw 1cqw; border-radius: 1cqw; border: .2cqw solid #9AA6B8; color: #071B4A; }
.sp-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1cqw; }
.sp-roles li { padding: .8cqw 1.4cqw; border-radius: 1.2cqw; background: #fff; font-size: 1.8cqw; box-shadow: 0 0 0 .15cqw #DCE3EC; }
.sp-roles .r-w { background: #1E2A4A; color: #FFD166; box-shadow: none; }
/* Galgenmännchen */
.sp-galgen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 3cqw; align-items: center; min-height: 0; }
.sp-gl-l { display: grid; justify-items: center; }
.sp-gsvg { width: 100%; max-height: 28cqw; }
.sp-gmiss { margin: .4cqw 0 0; font-size: 1.5cqw; font-weight: 700; color: #5B6372; }
.sp-gword { display: flex; flex-wrap: wrap; gap: .8cqw; margin-bottom: 1.6cqw; }
.sp-gl { display: grid; place-items: end center; width: 4.2cqw; height: 5.4cqw; border-bottom: .5cqw solid #071B4A; font-size: 3.6cqw; font-weight: 800; }
.sp-gl.is-dash { border-color: transparent; }
.sp-gres { margin: 0 0 1.2cqw; font-size: 2.2cqw; font-weight: 800; } .sp-gres.is-won { color: #0B7A62; } .sp-gres.is-lost { color: #B4233A; }
.sp-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .6cqw; margin-bottom: 1.4cqw; }
.sp-key { height: 4.2cqw; border-radius: .9cqw; border: 0; background: #fff; box-shadow: 0 0 0 .15cqw #C9D2DE; color: #071B4A; font: inherit; font-weight: 800; font-size: 1.9cqw; cursor: pointer; }
.sp-key:hover:not(:disabled) { background: #EAF1FF; }
.sp-key.is-ok { background: #12A383; color: #fff; box-shadow: none; } .sp-key.is-no { background: #F3D3D8; color: #B4233A; box-shadow: none; }
.sp-key:disabled { cursor: default; } .sp-key:disabled:not(.is-ok):not(.is-no) { opacity: .4; }
.sp-gdiff { font-size: 1.4cqw; font-weight: 700; color: #5B6372; text-transform: uppercase; letter-spacing: .06em; }
/* Stadt, Land, Fluss */
.sp-slf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6cqw 3cqw; align-items: center; }
.sp-sl-b { grid-row: span 2; display: grid; place-items: center; width: 17cqw; height: 17cqw; border-radius: 3cqw; background: #8B5CF6; color: #fff; font-size: 11cqw; font-weight: 800; box-shadow: 0 1.4cqw 3cqw -1.4cqw rgba(91, 50, 200, .7); }
.sp-sl-b.is-set { animation: spPop .4s ease-out; }
@keyframes spPop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.sp-sl-c { display: flex; flex-wrap: wrap; gap: 1cqw; }
.sp-sl-c span { padding: .8cqw 1.4cqw; border-radius: 1.2cqw; background: #fff; box-shadow: 0 0 0 .15cqw #DCE3EC; font-size: 2cqw; font-weight: 700; }
/* Zählen */
.sp-count { display: grid; justify-items: center; gap: 1.2cqw; }
.sp-cn { font-size: 14cqw; font-weight: 800; line-height: 1; color: #2E7CF6; font-variant-numeric: tabular-nums; }
.sp-cn.is-shake { animation: spShake .4s; color: #D2465A; }
@keyframes spShake { 20%, 60% { transform: translateX(-1.4cqw); } 40%, 80% { transform: translateX(1.4cqw); } }
.sp-cbest { margin: 0; font-size: 1.8cqw; color: #3D4B66; }
/* Erklären */
.sp-erkl { display: grid; gap: 1.4cqw; justify-items: start; }
.sp-ek-m { padding: .6cqw 1.6cqw; border-radius: 99px; background: #F08A24; color: #fff; font-weight: 800; font-size: 2cqw; text-transform: uppercase; letter-spacing: .06em; }
.sp-ek-t { font-size: 6cqw; font-weight: 800; line-height: 1.05; }
.sp-ek-t.is-hidden { font-size: 2.4cqw; color: #9AA6B8; font-weight: 700; }
.sp-score { display: flex; gap: 1.4cqw; }
.sp-tm { padding: 1cqw 2cqw; border-radius: 1.4cqw; border: 0; color: #fff; font: inherit; font-weight: 800; font-size: 1.8cqw; cursor: pointer; }
.sp-tm b { margin-left: .8cqw; font-size: 2.4cqw; } .sp-tm.a { background: #2E7CF6; } .sp-tm.b { background: #E5487A; }
@media (prefers-reduced-motion: reduce) { .sp-sl, .sp-sl-b.is-set, .sp-cn.is-shake, .sp-timer.is-done b { animation: none; } }

/* Druck: Rollenkarten und Spielblatt */
.sp-printpage { padding: 10mm 10mm 12mm; font-family: var(--font); color: #071B4A; background: #fff; }
.sp-printpage h1 { margin: 0 0 1mm; font-size: 14pt; }
.sp-pnote { margin: 0 0 4mm; font-size: 9pt; color: #5B6372; }
.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.sp-rc { display: grid; justify-items: center; align-content: center; gap: 2mm; height: 62mm; padding: 4mm; border: .3mm dashed #9AA6B8; text-align: center; break-inside: avoid; }
.sp-rci { display: grid; place-items: center; width: 18mm; height: 18mm; border-radius: 50%; background: #EEF2F6; color: #071B4A; }
.sp-rci .i { width: 10mm; height: 10mm; }
.sp-rc b { font-size: 15pt; } .sp-rc small { font-size: 8.5pt; line-height: 1.35; color: #3D4B66; } .sp-rc em { font-style: normal; font-size: 7pt; color: #9AA6B8; letter-spacing: .06em; text-transform: uppercase; }
.sp-rc.r-w .sp-rci { background: #1E2A4A; color: #FFD166; } .sp-rc.r-s .sp-rci { background: #EDE7FF; color: #5B32C8; } .sp-rc.r-h .sp-rci { background: #E3F6F1; color: #0B7A62; }
.sp-slt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-slt th { font-size: 9pt; text-align: left; padding: 1.5mm; border: .3mm solid #071B4A; background: #EEF2F6; }
.sp-slt td { height: 14mm; border: .3mm solid #9AA6B8; }
.sp-slt .c-b { width: 16mm; } .sp-slt .c-p { width: 18mm; }