/* BEZ – Seite /spiele (01.11.2026): Lernspiele für alle, ohne Anmeldung. Lädt nach site.css, mobil.css,
   mobil-seiten.css und lernspiele.css, nur auf dieser Seite. Präfix sp-. Nur Tokens aus base.css/site.css
   (dazu #C8A878 = Gold auf Nachtblau wie in site.css), keine neuen Farben oder Schriften; Gold nur für feine Linien, Zahlen und Sterne. Muster bleibt zart.
   Aufbau: 1. Seitenkopf · 2. Auswahl (Sprache, Stufe, Themen) · 3. Vollbild-Ebene · 4. Handy · 5. Bewegung/Druck */

/* ---------- 1. Seitenkopf: kleine Plaketten unter der Einleitung ---------- */
.sp-vorteile { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sp-vorteile .plakette { padding: .42rem .85rem; font-size: .82rem; }
.sp-vorteile .plakette .ico { width: 15px; height: 15px; }

/* ---------- 2. Auswahl ---------- */
.sp-ohne-js { margin: 0 0 2rem; }
.sp-schritt + .sp-schritt { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.sp-schritt-titel { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.sp-nr {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gold-linie); background: var(--c-weiss); color: var(--c-gold-dunkel); font: 700 .95rem/1 var(--f-text);
}

/* Sprache: zwei Karten, die gewählte in Nachtblau */
.sp-sprachen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.sp-sprache {
  position: relative; overflow: hidden; display: grid; justify-items: start; align-content: start; gap: .35rem;
  min-height: 136px; margin: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.8rem);
  border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-weiss); box-shadow: var(--sh-1);
  color: var(--c-nacht); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--d-mittel), border-color var(--d-mittel), color var(--d-mittel), box-shadow .45s var(--e-out), transform .45s var(--e-out);
}
.sp-sprache:hover { border-color: var(--gold-linie); box-shadow: var(--sh-2); }
.sp-sprache:active { transform: scale(.99); }
.sp-sprache-orn { position: absolute; right: -24px; bottom: -24px; width: 118px; height: 118px; color: var(--c-gold); opacity: .14; pointer-events: none; transition: color var(--d-mittel), opacity var(--d-mittel); }
.sp-sprache-ziel { position: relative; padding-right: 2.2rem; font: 500 clamp(1.45rem, 2.6vw, 2.1rem)/1.12 var(--f-display); overflow-wrap: anywhere; }
.sp-sprache-name { position: relative; font: 800 .74rem/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-dunkel); transition: color var(--d-mittel); }
.sp-sprache-info { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: .5rem; font-size: .88rem; font-weight: 600; color: var(--c-text-2); transition: color var(--d-mittel); }
.sp-haken {
  position: absolute; top: .95rem; right: .95rem; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #C8A878; color: var(--c-nacht); opacity: 0; transform: scale(.6); transition: opacity var(--d-mittel), transform var(--d-mittel) var(--e-out);
}
.sp-haken .ico { width: 16px; height: 16px; }
.sp-sprache[aria-pressed="true"] { background: var(--c-tinte); border-color: var(--c-tinte); color: #fff; box-shadow: var(--sh-2); }
.sp-sprache[aria-pressed="true"] .sp-sprache-name { color: #C8A878; }
.sp-sprache[aria-pressed="true"] .sp-sprache-info { color: var(--c-text-hell-2); }
.sp-sprache[aria-pressed="true"] .sp-sprache-orn { color: #C8A878; opacity: .2; }
.sp-sprache[aria-pressed="true"] .sp-haken { opacity: 1; transform: none; }
.sp-sprache[aria-pressed="true"] .sp-sterne { color: var(--c-text-hell-2); }
.sp-sprache[aria-pressed="true"] .sp-sterne.sp-hat { color: #C8A878; }
.sp-sprache[aria-pressed="true"] .sp-sterne.sp-hat .ico { color: #C8A878; fill: #C8A878; }

/* Sterne (Karten, Kacheln) */
.sp-sterne { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-text-2); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-sterne .ico { width: 15px; height: 15px; }
.sp-sterne.sp-hat { color: var(--c-gold-dunkel); }
.sp-sterne.sp-hat .ico { color: var(--c-gold); fill: var(--c-gold); }

/* Stufe */
.sp-stufen .chip { min-height: 46px; padding-inline: 1.25rem; font-size: .95rem; }

/* Themen-Kacheln */
.sp-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; color: var(--c-text-2); font-weight: 600; }
.sp-stand[hidden] { display: none; }
.sp-nochmal .ico { width: 16px; height: 16px; }
.sp-themen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.2rem); margin: 0; padding: 0; list-style: none; }
.sp-themen > li { min-width: 0; }
.sp-thema {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  width: 100%; height: 100%; margin: 0; padding: 1.15rem 1.15rem .95rem;
  border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-weiss); box-shadow: var(--sh-1);
  color: var(--c-nacht); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .45s var(--e-out), transform .45s var(--e-out), border-color var(--d-mittel);
}
.sp-thema:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--gold-linie); }
.sp-thema:active { transform: scale(.985); }
.sp-thema-emoji {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .6rem; border-radius: 50%;
  border: 1px solid var(--gold-zart); background: var(--c-papier); font-size: 1.75rem; line-height: 1;
}
.sp-thema-emoji:empty { display: none; }
.sp-thema-name { margin-bottom: .1rem; font: 600 1.22rem/1.2 var(--f-display); color: var(--c-nacht); overflow-wrap: anywhere; }
.sp-thema-zielname { font: 600 .98rem/1.3 var(--f-display); color: var(--c-gold-dunkel); overflow-wrap: anywhere; }
.sp-thema-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; width: 100%;
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--c-linie);
  font-size: .82rem; font-weight: 700; color: var(--c-text-2);
}
.sp-thema > :nth-last-child(2) { margin-bottom: .75rem; }
.sp-thema-anzahl.sp-gespielt { color: var(--c-tinte); }

/* ---------- 3. Vollbild-Ebene (Spiele-Liste und Spiel) ---------- */
html.sp-offen, html.sp-offen body { overflow: hidden; }
.sp-ebene {
  position: fixed; inset: 0; z-index: 200; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; background: var(--c-papier); color: var(--c-text);
  --ls-oben: env(safe-area-inset-top, 0px); --ls-unten: env(safe-area-inset-bottom, 0px);
  animation: sp-blende .25s ease both;   /* nur Deckkraft: ein transform hier wäre Bezugsrahmen für position:fixed im Spiel */
}
.sp-ebene[hidden], .sp-auswahl[hidden], .sp-buehne[hidden] { display: none; }
.sp-auswahl { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sp-ebene-kopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--ls-oben)) max(16px, calc((100% - 720px) / 2)) 10px;
  background: var(--c-papier); border-bottom: 1px solid var(--c-linie);
}
.sp-zu {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; margin: 0; padding: 0;
  border: 1px solid var(--c-linie-2); border-radius: 50%; background: var(--c-weiss); color: var(--c-tinte); cursor: pointer;
  transition: background-color var(--d-schnell), color var(--d-schnell), transform var(--d-schnell) var(--e-out);
}
.sp-zu:hover { background: var(--c-nebel); color: var(--c-nacht); }
.sp-zu:active { transform: scale(.94); }
.sp-zu .ico { width: 22px; height: 22px; }
.sp-ebene-pfad { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; color: var(--c-text-2); }
@media (min-width: 720px) {
  .sp-ebene-kopf { gap: 16px; padding-inline: max(20px, calc((100% - var(--ls-breite, 680px)) / 2 - 64px)); }
}
.sp-ebene-inhalt { width: min(100% - 32px, 720px); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 0 calc(2rem + var(--ls-unten)); animation: sp-rein .45s var(--e-out) both; }

.sp-thema-kopf { display: grid; justify-items: center; gap: .3rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); text-align: center; }
.sp-thema-bild {
  display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: .6rem; border-radius: 50%;
  border: 1px solid var(--gold-linie); background: var(--c-weiss); box-shadow: 0 0 0 5px var(--c-papier), 0 0 0 6px var(--gold-zart);
  font-size: 2.6rem; line-height: 1;
}
.sp-thema-bild:empty { display: none; }
.sp-thema-titel { margin: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); overflow-wrap: anywhere; }
.sp-thema-titel:focus { outline: none; }
.sp-thema-ziel { margin: 0; font: 600 1.18rem/1.3 var(--f-display); color: var(--c-gold-dunkel); overflow-wrap: anywhere; }
.sp-thema-ziel[hidden] { display: none; }
.sp-thema-sterne { display: inline-flex; align-items: center; gap: .4rem; margin: .55rem 0 0; padding: .38rem .85rem; border-radius: 999px; background: var(--c-nebel); color: var(--c-text-2); font-size: .85rem; font-weight: 700; }
.sp-thema-sterne .ico { width: 16px; height: 16px; }
.sp-thema-sterne.sp-hat { background: var(--c-gold-hell); color: var(--c-gold-dunkel); }
.sp-thema-sterne.sp-hat .ico { color: var(--c-gold); fill: var(--c-gold); }

.sp-spiele-titel { margin: 0 0 .85rem; font: 800 .76rem/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-dunkel); }
.sp-ebene-stand { margin: 0 0 .85rem; padding: .85rem 1rem; border-radius: var(--r-m); background: var(--c-granat-hell); color: var(--c-granat); font-size: .92rem; font-weight: 600; }
.sp-ebene-stand[hidden] { display: none; }
.sp-spiele { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sp-spiel {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 20px; align-items: center; gap: .85rem;
  width: 100%; height: 100%; min-height: 76px; margin: 0; padding: .8rem .9rem .8rem .8rem;
  border: 1px solid var(--c-linie); border-radius: var(--r-m); background: var(--c-weiss); box-shadow: var(--sh-1);
  color: var(--c-nacht); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .4s var(--e-out), transform .4s var(--e-out), border-color var(--d-mittel);
}
.sp-spiel:hover { border-color: var(--gold-linie); box-shadow: var(--sh-2); transform: translateY(-1px); }
.sp-spiel:active { transform: scale(.985); }
.sp-spiel[aria-busy="true"] { opacity: .6; cursor: progress; }
.sp-spiel-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-himmel); color: var(--c-tinte); }
.sp-spiel-symbol .ico { width: 22px; height: 22px; }
.sp-spiel-text { display: grid; gap: .1rem; min-width: 0; }
.sp-spiel-name { font-size: 1.02rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.sp-spiel-kurz { font-size: .86rem; font-weight: 500; line-height: 1.35; color: var(--c-text-2); }
.sp-spiel-sterne { display: inline-flex; align-items: center; gap: 1px; }
.sp-stern { color: var(--c-text-3); }
.sp-stern .ico { display: block; width: 18px; height: 18px; }
.sp-stern.sp-voll { color: var(--c-gold); }
.sp-stern.sp-voll .ico { fill: currentColor; }
.sp-neu-marke {
  display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--gold-linie);
  background: var(--c-gold-hell); color: var(--c-gold-dunkel); font: 800 .7rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase;
}
.sp-spiel-pfeil { width: 20px; height: 20px; color: var(--c-text-3); transition: transform var(--d-mittel) var(--e-out); }
.sp-spiel:hover .sp-spiel-pfeil { transform: translateX(3px); color: var(--c-tinte); }
.sp-ebene-hinweis { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.6rem 0 0; color: var(--c-text-2); font-size: .86rem; text-align: center; }
.sp-ebene-hinweis .ico { flex: none; width: 18px; height: 18px; color: var(--c-gold); }

/* Spiel: eigener Scroll-Bereich mit fester Höhe (Kopf und Rückmeldeleiste des Bausteins kleben darin) */
.sp-buehne { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--c-papier); }

@media (min-width: 720px) {
  .sp-spiele { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}
@media (max-width: 1100px) {
  .sp-themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sp-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4. Handy (≤ 700 px) ---------- */
@media (max-width: 700px) {
  .sp-vorteile { gap: .4rem; margin-top: .9rem; }
  .sp-vorteile .plakette { padding: .32rem .65rem; font-size: .75rem; }
  .sp-vorteile .plakette .ico { width: 13px; height: 13px; }

  .sp-schritt + .sp-schritt { margin-top: 1.75rem; }
  .sp-schritt-titel { gap: .6rem; margin-bottom: .8rem; font-size: 1.25rem; }
  .sp-nr { width: 30px; height: 30px; font-size: .85rem; }

  .sp-sprachen { gap: .6rem; }
  .sp-sprache { min-height: 0; gap: .2rem; padding: .95rem .9rem .9rem; border-radius: 14px; }
  .sp-sprache-orn { width: 84px; height: 84px; right: -20px; bottom: -20px; }
  .sp-sprache-ziel { padding-right: 1.6rem; font-size: 1.28rem; }
  .sp-sprache-name { font-size: .66rem; letter-spacing: .12em; }
  .sp-sprache-info { gap: .2rem .7rem; margin-top: .35rem; font-size: .8rem; }
  .sp-haken { top: .7rem; right: .7rem; width: 22px; height: 22px; }
  .sp-haken .ico { width: 13px; height: 13px; }

  .sp-stufen { gap: .4rem; }
  .sp-stufen .chip { flex: 1 1 0; min-height: 44px; padding-inline: .8rem; font-size: .9rem; }

  .sp-themen { gap: .6rem; }
  .sp-thema { padding: .9rem .85rem .75rem; border-radius: 14px; }
  .sp-thema-emoji { width: 44px; height: 44px; margin-bottom: .45rem; font-size: 1.4rem; }
  .sp-thema-name { font-size: 1.06rem; }
  .sp-thema-zielname { font-size: .84rem; }
  .sp-thema > :nth-last-child(2) { margin-bottom: .6rem; }
  .sp-thema-fuss { padding-top: .6rem; font-size: .74rem; }
  .sp-sterne .ico { width: 13px; height: 13px; }

  .sp-thema-bild { width: 72px; height: 72px; font-size: 2.2rem; }
  .sp-thema-ziel { font-size: 1rem; }
}
@media (max-width: 420px) {
  .sp-spiel { grid-template-columns: 42px minmax(0, 1fr) auto; gap: .7rem; min-height: 72px; padding: .75rem .8rem .75rem .7rem; }
  .sp-spiel-symbol { width: 42px; height: 42px; }
  .sp-spiel-symbol .ico { width: 20px; height: 20px; }
  .sp-spiel-name { font-size: .98rem; }
  .sp-spiel-kurz { font-size: .82rem; }
  .sp-stern .ico { width: 15px; height: 15px; }
  .sp-spiel-pfeil { display: none; }
}

/* ---------- 5. Bewegung und Druck ---------- */
@keyframes sp-blende { from { opacity: 0; } }
@keyframes sp-rein { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .sp-ebene, .sp-ebene-inhalt { animation: none; }
  .sp-sprache, .sp-thema, .sp-spiel, .sp-haken, .sp-spiel-pfeil { transition: none; }
  .sp-thema:hover, .sp-spiel:hover { transform: none; }
}
@media print {
  .sp-ebene, .sp-gast { display: none !important; }
}