/* Auswahlseite der Minigames. Grammatik und Tokens aus kasse-grammatik.css; Regeln wie .ws__* im Musterblatt. */
[hidden] { display: none !important; }
#selection { max-width: 1120px; margin: 0 auto; }
.ws__kopf { display: flex; align-items: center; gap: var(--sp-3); padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-4) var(--sp-4); }
.ws__signet { width: 40px; height: 40px; color: var(--kasse-zeichen); flex: none; }
.ws__marke { display: grid; gap: var(--sp-2); min-width: 0; }
.ws__wort { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; }
h1.faehnchen { margin: 0; }
.ws__ton { margin-left: auto; flex: none; }
#sound[data-sound="on"] .ton-aus, #sound[data-sound="off"] .ton-an { display: none; }
.ws__kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border: 1px solid var(--kasse-border); margin: 0 var(--sp-4); }
.ws__kachel { display: grid; align-content: start; gap: var(--sp-2); padding: var(--d-pad); background: var(--kasse-surface-2); border: 0; border-left: 1px solid var(--kasse-gray-700); border-top: 1px solid var(--kasse-gray-700); color: inherit; text-align: left; font: inherit; }
.ws__kachel:hover { background-image: linear-gradient(var(--kasse-hover), var(--kasse-hover)); }
.ws__titel { margin: 0; font-size: var(--fs-md); font-weight: 500; letter-spacing: var(--tracking-display); }
.ws__kachel p { margin: 0; color: var(--kasse-gray-300); font-size: var(--fs-sm); line-height: var(--lh-body); }
.ws__zeile { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--kasse-gray-300); }
.ws__zeile b { color: var(--kasse-gray-100); font-weight: 600; }
.ws__fuss { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom)); color: var(--kasse-gray-300); font-size: var(--fs-xs); }
.ws__fuss a { color: var(--kasse-gray-300); text-underline-offset: 3px; }
#player { position: fixed; inset: 0; background: var(--kasse-black); }
#player iframe { display: block; border: 0; width: 100%; height: 100dvh; }
#hinweis { position: fixed; z-index: 10; inset: auto var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); }
body[data-active] #selection { display: none; }
@media (min-width: 900px) { .ws__kacheln { grid-template-columns: repeat(4, 1fr); } }
.ws__zeile > span:last-child { white-space: nowrap; text-align: right; }
/* Textseiten (Datenschutz): eine Lesespalte in derselben Grammatik. */
.ws__text { max-width: 68ch; margin: 0 auto; padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom)); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--kasse-gray-300); }
.ws__text h1 { margin: var(--sp-4) 0 var(--sp-6); }
.ws__text h2 { margin: var(--sp-8) 0 var(--sp-2); font-size: var(--fs-md); font-weight: 500; letter-spacing: var(--tracking-display); color: var(--kasse-gray-100); }
.ws__text p { margin: 0 0 var(--sp-3); }
.ws__text a { color: var(--kasse-gray-100); text-underline-offset: 3px; }
.ws__stand { margin-top: var(--sp-8); font-size: var(--fs-xs); }
/* Feedback (Beta): Käfer im Kopf der Auswahl; im Spiel öffnen die Knöpfe der Hülle (Pause, Ergebnis) denselben Dialog. */
#kaefer:not([hidden]) + #sound { margin-left: 0; }
.ws__dialog { width: min(480px, calc(100vw - 2 * var(--sp-4))); max-height: calc(100dvh - 2 * var(--sp-4)); margin: auto; padding: 0; border: 0; background: transparent; color: var(--kasse-gray-100); overflow: auto; }
.ws__dialog::backdrop { background: var(--kasse-scrim); }
.ws__form { gap: var(--sp-4); }
.ws__form h2.faehnchen { margin: 0; }
.ws__form .msg-info a { color: var(--kasse-gray-100); text-underline-offset: 3px; }
.ws__feld { display: grid; gap: var(--sp-2); color: var(--kasse-gray-300); }
.ws__feld textarea, .ws__feld input { box-sizing: border-box; width: 100%; padding: var(--sp-3); border: 1px solid var(--kasse-gray-500); background: var(--kasse-black); color: var(--kasse-gray-100); font: inherit; font-size: 16px; line-height: var(--lh-body); }
.ws__feld textarea { resize: vertical; min-height: 120px; }
.ws__feld textarea:focus-visible, .ws__feld input:focus-visible { outline: 2px solid var(--kasse-interaktion); outline-offset: 2px; }
.ws__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ws__knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ws__knoepfe .act { flex: 1 1 140px; }
#rm-status[data-fehler] { color: var(--kasse-signal); }