/* Willkommen (web/seiten/willkommen.js) — 01.10.2026 neu: Sprungleiste, drei Schritte, Karten je Bereich, Spiele aus
   lib/verfuegbarkeit.js, Plus-Auswahl. Nur eigene Pixelkunst (img/item), keine Spiel-Fotos. Raster immer mit minmax(0, …),
   Karten oben ausgerichtet (UI-Fehler 22/23/27). */

/* ── Himmel: das Zeichen schwebt ─────────────────────────────────────────────────────────────────────────────── */
.wk-held-bild { display: grid; place-items: center; }
.wk-held-logo { inline-size: 192px; block-size: 192px; image-rendering: pixelated; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); animation: wk-schweben 4s ease-in-out infinite; }
@keyframes wk-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .wk-held-logo { animation: none; } }
@media (max-width: 700px) { .wk-held-logo { inline-size: 128px; block-size: 128px; } }

/* ── Sprungleiste ────────────────────────────────────────────────────────────────────────────────────────────── */
.wk-sprung { background: rgb(12 12 16 / .92); border-block: 2px solid #000; box-shadow: inset 0 2px 0 rgb(255 255 255 / .06); }
.wk-sprung ul { list-style: none; margin: 0 auto; padding-block: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wk-sprung a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; color: var(--mc-weiss); text-decoration: none;
  font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten);
  background: linear-gradient(#3a3a3a, #262626); border: 2px solid #000; box-shadow: inset 2px 2px 0 rgb(255 255 255 / .14), inset -2px -2px 0 rgb(0 0 0 / .4); }
.wk-sprung a img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; flex: none; }
.wk-sprung a:hover, .wk-sprung a:focus-visible { background: linear-gradient(#4a4a4a, #303030); outline: 2px solid var(--knopf-hover, #fff); outline-offset: 0; }
@media (max-width: 520px) {
  .wk-sprung ul { gap: 6px; }
  .wk-sprung a { padding: 4px 8px 4px 6px; font-size: 18px; }
  .wk-sprung a img { inline-size: 24px; block-size: 24px; }
}

/* ── Schritte ────────────────────────────────────────────────────────────────────────────────────────────────── */
.wk-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wk-knoepfe .mc-knopf { margin: 0; }
@media (max-width: 800px) { .wk-knoepfe { justify-content: flex-start; } }
/* 07.10.2026 unter „Wink herunterladen": was ausgeliefert wird (seiten/modseite.js holenZeile) */
#schritte .mf-dl-info { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 800px) { #schritte .mf-dl-info { text-align: start; } }

.wk-tasten { display: grid; gap: 14px; justify-items: center; text-align: center; margin-block-start: 36px; padding: 20px 16px;
  background: rgb(0 0 0 / .4); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06); }
.wk-tasten-titel { margin: 0; font: 400 24px/30px var(--mc-schrift); color: var(--mc-weiss); text-shadow: 2px 2px 0 var(--mc-schatten); }
.wk-tasten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; }
.wk-tasten li { display: grid; justify-items: center; gap: 8px; min-inline-size: 72px; color: #d4d8e0; }
.wk-tasten .leise { margin: 0; }

.wk-taste { display: inline-grid; place-items: center; min-inline-size: 28px; block-size: 28px; padding: 0 6px; vertical-align: middle;
  font: 400 20px/1 var(--mc-schrift); color: #fff; background: #6f6f6f; border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #aaa, inset -2px -4px 0 #3c3c3c; text-shadow: 2px 2px 0 #3c3c3c; }
.wk-taste.gross { min-inline-size: 56px; block-size: 56px; font-size: 30px; box-shadow: inset 4px 4px 0 #aaa, inset -4px -6px 0 #3c3c3c; }

.wk-empfehlung { margin-block: 18px; padding: 14px 16px; }   /* „Wer hat dir … gezeigt?" (lib/empfehlung.js) */

/* ── Karten (ScamRadar, Cosmetics, Community) ────────────────────────────────────────────────────────────────── */
.wk-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: stretch; }
.wk-karte { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; padding: 16px;
  background: rgb(21 21 21 / .92); border: 2px solid #000; box-shadow: inset 2px 2px 0 rgb(255 255 255 / .08), 4px 4px 0 rgb(0 0 0 / .55); }
.wk-karte-kopf { display: flex; align-items: center; gap: 12px; }
.wk-karte-kopf .mc-slot { flex: none; }
.wk-karte h3 { margin: 0; font: 400 22px/26px var(--mc-schrift); color: var(--mc-weiss); text-shadow: 2px 2px 0 var(--mc-schatten); overflow-wrap: anywhere; }
.wk-karte p { margin: 0; line-height: 1.5; color: #d4d8e0; }
.wk-karte > .mc-knopf { margin-block-start: auto; align-self: flex-start; }
.wk-wo { margin-block-start: auto !important; display: flex; gap: 8px; align-items: flex-start; padding-block-start: 10px; color: var(--mc-gelb) !important; border-block-start: 1px dashed rgb(255 255 255 / .14); }
.wk-wo > img { flex: none; inline-size: 24px; block-size: 24px; image-rendering: pixelated; }
.wk-wo b { color: var(--mc-gold); }
.wk-wo a { color: var(--mc-aqua); }
.wk-wo code, .wk-spiel code { font-family: var(--mc-schrift); font-size: 18px; color: var(--mc-aqua); background: rgb(0 0 0 / .5); padding: 0 4px; }

/* ── Spielen ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.wk-gruppe + .wk-gruppe { margin-block-start: 28px; }
.wk-gruppe h3 { margin: 0 0 4px; font: 400 24px/30px var(--mc-schrift); color: var(--mc-gold); text-shadow: 2px 2px 0 #3f2a00; }
.wk-gruppe > .leise { margin: 0 0 12px; }
.wk-spiele { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.wk-spiel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; block-size: 100%; box-sizing: border-box; padding: 10px 12px;
  color: var(--mc-weiss); text-decoration: none; background: linear-gradient(#2b2b2b, #1b1b1b); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgb(255 255 255 / .12), inset -2px -2px 0 rgb(0 0 0 / .4), 3px 3px 0 rgb(0 0 0 / .5); transition: transform .12s ease; }
.wk-spiel:hover, .wk-spiel:focus-visible { transform: translateY(-2px); outline: 2px solid var(--knopf-hover, #fff); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .wk-spiel { transition: none; } .wk-spiel:hover { transform: none; } }
.wk-spiel-text { display: grid; gap: 4px; min-inline-size: 0; }
.wk-spiel-text b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); overflow-wrap: anywhere; }
.wk-spiel-text small { font-size: .9rem; line-height: 1.4; color: var(--mc-grau); }
.wk-neu { display: inline-block; padding: 0 5px; font: 400 16px/20px var(--mc-schrift); color: #1b1300; background: var(--mc-gelb); border: 2px solid #000; text-shadow: none; vertical-align: middle; }
.wk-event { background: linear-gradient(#4a3608, #2a1d03); box-shadow: inset 2px 2px 0 rgb(255 220 120 / .25), inset -2px -2px 0 rgb(0 0 0 / .4), 3px 3px 0 rgb(0 0 0 / .5); }
.wk-event .wk-spiel-text small { color: #ffe6a0; }
.wk-titelspiele { display: flex; gap: 12px; align-items: center; margin: 24px 0 0; color: #d4d8e0; line-height: 1.5; }
.wk-titelspiele > img { flex: none; }
.wk-titelspiele b { color: var(--mc-weiss); }

/* ── Plus: Farben der Plus-Seite (Türkis → Nachtblau → Violett) ──────────────────────────────────────────────── */
.wk-plus { background: linear-gradient(160deg, rgb(10 48 64 / .92), rgb(14 18 46 / .94) 55%, rgb(52 20 78 / .92)), url("img/tex/stein.png") 0 0 / 64px 64px; }
.wk-plus-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.wk-plus-liste a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; block-size: 100%; box-sizing: border-box; padding: 12px;
  color: var(--mc-weiss); text-decoration: none; background: rgb(8 12 30 / .7); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(63 208 200 / .35), 3px 3px 0 rgb(0 0 0 / .5); }
.wk-plus-liste a:hover, .wk-plus-liste a:focus-visible { box-shadow: inset 0 0 0 2px #3fd0c8, 3px 3px 0 rgb(0 0 0 / .5); outline: none; }
.wk-plus-liste a > span:last-child { display: grid; gap: 4px; min-inline-size: 0; }
.wk-plus-liste b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 rgb(0 0 0 / .6); overflow-wrap: anywhere; }
.wk-plus-liste small { font-size: .9rem; line-height: 1.4; color: #c9d6ff; }

/* Schritte: Zeilen nicht strecken — sonst rutscht der Titel eines kürzeren Schritts nach unten (01.10.2026, Foto 1380 px) */
#schritte .fortschritt { align-content: start; }
.wk-spiel small code { white-space: nowrap; }
/* Discord-Zeichen im Slot (Community-Karte) — Blurple wie der Streifen, kein fremdes Bild */
.wk-discord { display: grid; place-items: center; inline-size: 48px; block-size: 48px; color: #5865f2; }
.wk-discord svg { inline-size: 36px; block-size: 36px; }