/* BEZ – Lernspiele (Spiel-Baustein zu assets/js/lernspiele.js). Alle Klassen mit Präfix ls-.
   Nur Design-Tokens aus base.css (Nachtblau/Gold/Elfenbein). Mobil zuerst ab 360 px, Antippflächen mind. 48 px.
   Der Host kann --ls-oben / --ls-unten setzen (z. B. env(safe-area-inset-top) im Vollbild) und --ls-breite (Inhaltsbreite). */

/* ------------------------------------------------------------------ Grundgerüst */
.ls-spiel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--c-papier);
  color: var(--c-text);
  font-family: var(--f-text);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.ls-spiel [hidden] { display: none !important; }
:where(.ls-spiel) :where(button) { font: inherit; color: inherit; margin: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ls-spiel :focus-visible { outline: 2px solid var(--c-lapis); outline-offset: 3px; }
/* Frage/Titel bekommen den Fokus nur für Screenreader und Tastatur-Reihenfolge, ohne Rahmen */
.ls-spiel [tabindex="-1"]:focus, .ls-spiel [tabindex="-1"]:focus-visible { outline: none; }
.ls-spiel h2 { margin: 0; letter-spacing: -.01em; }
.ls-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ls-ico { flex: none; display: block; }

/* ------------------------------------------------------------------ Kopf: Abbrechen, Titel, Fortschritt */
.ls-kopf {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: calc(10px + var(--ls-oben, 0px)) 16px 10px;
  background: var(--c-papier);
  border-bottom: 1px solid var(--c-linie);
}
.ls-zu {
  width: 48px; height: 48px; display: grid; place-items: center; 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);
}
.ls-zu:hover { background: var(--c-nebel); color: var(--c-nacht); }
.ls-zu:active { transform: scale(.94); }
.ls-zu .ls-ico { width: 22px; height: 22px; }
.ls-kopf-mitte { min-width: 0; display: grid; gap: 7px; }
.ls-kopf-titel { margin: 0; display: flex; align-items: baseline; gap: .45rem; min-width: 0; font-size: .88rem; line-height: 1.25; white-space: nowrap; }
.ls-kopf-spiel { flex: none; font-weight: 800; color: var(--c-nacht); }
.ls-kopf-thema { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--c-text-2); font-weight: 600; }
.ls-kopf-thema::before { content: '·'; margin-right: .45rem; color: var(--c-gold); font-weight: 800; }
.ls-balken { position: relative; height: 10px; border-radius: 999px; background: var(--c-nebel); box-shadow: inset 0 0 0 1px var(--c-linie); overflow: hidden; }
.ls-balken-fuell {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--ls-anteil, 0) * 100%); min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-lapis), var(--c-tinte));
  transition: width .55s var(--e-out), background-color var(--d-mittel);
}
.ls-spiel[data-spiel="blitz"] .ls-balken-fuell { transition: width .2s linear; }
.ls-kopf-zahl { margin: 0; min-width: 3.2rem; text-align: right; font-weight: 800; font-size: .95rem; color: var(--c-tinte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-knapp .ls-balken-fuell { background: var(--c-granat); }
.ls-knapp .ls-kopf-zahl { color: var(--c-granat); }

/* ------------------------------------------------------------------ Bühne, Frage, Motiv */
.ls-buehne {
  flex: 1;
  width: min(100% - 32px, var(--ls-breite, 680px));
  margin: 0 auto;
  padding: 20px 0 28px;
  display: flex; flex-direction: column;
}
.ls-runde { display: flex; flex-direction: column; gap: 18px; animation: ls-rein .4s var(--e-out) both; }
.ls-frage { display: grid; gap: 14px; outline: none; }
.ls-aufgabe { margin: 0; text-align: center; font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--c-text-2); text-wrap: balance; }

.ls-motiv {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 6px;
  min-height: 176px; padding: 26px 18px 22px;
  border: 1px solid var(--c-linie); border-radius: var(--r-l);
  background: var(--c-weiss); box-shadow: var(--sh-1);
  text-align: center;
}
/* feine Gold-Raute wie bei den Zugangskarten des Schülerbereichs */
.ls-motiv::before {
  content: ''; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; translate: -50% 0; rotate: 45deg;
  background: var(--c-weiss); border: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent);
  box-shadow: inset 0 0 0 2.5px var(--c-weiss), inset 0 0 0 4px var(--c-gold);
}
.ls-motiv-text { min-height: 0; padding: 24px 18px 20px; }
.ls-emoji {
  display: block;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: clamp(4.2rem, 20vw, 5.6rem); line-height: 1.15; font-style: normal; font-weight: 400;
}
.ls-emoji-klein { font-size: 2.1rem; }
.ls-emoji-m { font-size: clamp(2.2rem, 10vw, 2.9rem); }
.ls-motiv-de { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--c-text-2); }
.ls-motiv-de-gross { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.15; color: var(--c-nacht); }
.ls-motiv-klein { margin: 0; font-size: .92rem; font-weight: 600; color: var(--c-text-2); }
.ls-motiv-satz { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 5.6vw, 1.75rem); line-height: 1.25; color: var(--c-nacht); text-wrap: balance; }
.ls-ziel-gross { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.1rem, 10vw, 2.9rem); line-height: 1.12; color: var(--c-nacht); overflow-wrap: anywhere; }

/* Anhören (nur Russisch, nur mit russischer Stimme) */
.ls-hoeren {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 48px; padding: .55rem 1.1rem; margin-top: 6px;
  border: 1px solid var(--c-linie-2); border-radius: 999px; background: var(--c-weiss); color: var(--c-lapis);
  font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: background-color var(--d-schnell), border-color var(--d-schnell);
}
.ls-hoeren:hover { background: var(--c-himmel); border-color: var(--c-lapis); }
.ls-hoeren .ls-ico { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ Knöpfe */
.ls-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.4rem;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.1; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: transform var(--d-schnell) var(--e-out), background-color var(--d-schnell), box-shadow var(--d-mittel) var(--e-out), color var(--d-schnell);
}
.ls-knopf:active { transform: scale(.97); }
.ls-knopf .ls-ico { width: 1.15em; height: 1.15em; }
.ls-knopf-primaer { background: var(--c-tinte); color: var(--c-weiss); }
.ls-knopf-zweit { background: var(--c-weiss); color: var(--c-tinte); border-color: var(--c-linie-2); }
.ls-knopf-gruen { background: var(--c-gruen); color: var(--c-weiss); }
.ls-knopf-leise { min-height: 48px; padding: .6rem 1rem; background: transparent; color: var(--c-lapis); }
.ls-knopf-gross { min-height: 56px; padding: 1rem 1.6rem; font-size: 1.05rem; }
.ls-knopf[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (hover: hover) {
  .ls-knopf-primaer:hover { background: var(--c-nacht); box-shadow: var(--sh-2); }
  .ls-knopf-zweit:hover { background: var(--c-nebel); color: var(--c-nacht); }
  .ls-knopf-gruen:hover { box-shadow: var(--sh-2); background: color-mix(in srgb, var(--c-gruen) 88%, var(--c-nacht)); }
  .ls-knopf-leise:hover { background: var(--c-nebel); }
}

/* ------------------------------------------------------------------ Antwort-Kacheln (Quiz, Lücke, Buchstaben-Jagd) */
.ls-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ls-option {
  position: relative;
  display: grid; place-items: center;
  min-height: 68px; padding: 12px 14px;
  border: 1.5px solid var(--c-linie-2); border-radius: var(--r-m);
  background: var(--c-weiss); color: var(--c-nacht);
  box-shadow: 0 2px 0 var(--c-linie), var(--sh-1);
  font-weight: 700; font-size: 1.2rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color var(--d-schnell), background-color var(--d-schnell), color var(--d-schnell), transform var(--d-schnell) var(--e-out), box-shadow var(--d-mittel) var(--e-out), opacity var(--d-mittel);
}
.ls-option:not([aria-disabled="true"]):active { transform: translateY(1px) scale(.985); }
.ls-option[aria-disabled="true"] { cursor: default; }
@media (hover: hover) {
  .ls-option:not([aria-disabled="true"]):hover { border-color: var(--c-lapis); transform: translateY(-2px); box-shadow: 0 2px 0 var(--c-linie), var(--sh-2); }
}
.ls-option.ls-ok, .ls-option.ls-zeige { border-color: var(--c-gruen); background: var(--c-gruen-hell); color: var(--c-gruen); }
.ls-option.ls-ok { animation: ls-huepf .55s var(--e-out); }
.ls-option.ls-nein { border-color: var(--c-granat); background: var(--c-granat-hell); color: var(--c-granat); animation: ls-wackel .38s var(--e-inout); }
.ls-option.ls-aus { opacity: .48; }
.ls-marke {
  position: absolute; top: -9px; right: -9px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--c-weiss); box-shadow: 0 0 0 3px var(--c-papier);
  animation: ls-plopp .35s var(--e-out) both;
}
.ls-marke .ls-ico { width: 15px; height: 15px; }
.ls-marke-ok { background: var(--c-gruen); }
.ls-marke-nein { background: var(--c-granat); }

.ls-optionen-bild .ls-option { min-height: 100px; }
.ls-option-bild { display: grid; justify-items: center; gap: 2px; }
.ls-option-de { font-size: 1.02rem; line-height: 1.25; }

.ls-optionen-buchstaben { display: flex; flex-wrap: wrap; justify-content: center; }
.ls-optionen-buchstaben .ls-option { flex: 0 0 calc((100% - 24px) / 3); min-height: 76px; padding: 10px 6px; }
.ls-bst { display: inline-flex; align-items: baseline; justify-content: center; gap: .3rem; }
.ls-bst-gross { font-family: var(--f-display); font-weight: 600; font-size: 2rem; line-height: 1; }
.ls-bst-klein { font-weight: 700; font-size: 1.35rem; line-height: 1; opacity: .72; }

/* ------------------------------------------------------------------ Rückmeldeleiste */
.ls-rueck {
  position: sticky; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px;
  padding: 14px 16px calc(14px + var(--ls-unten, 0px));
  border-top: 1px solid var(--c-linie);
  box-shadow: 0 -14px 34px -22px color-mix(in srgb, var(--c-nacht) 45%, transparent);
  animation: ls-hoch .35s var(--e-out);
}
.ls-rueck-ok { background: var(--c-gruen-hell); }
.ls-rueck-nein { background: var(--c-granat-hell); }
.ls-rueck-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--c-weiss); }
.ls-rueck-ok .ls-rueck-symbol { background: var(--c-gruen); }
.ls-rueck-nein .ls-rueck-symbol { background: var(--c-granat); }
.ls-rueck-text { min-width: 0; }
.ls-rueck-titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; }
.ls-rueck-ok .ls-rueck-titel { color: var(--c-gruen); }
.ls-rueck-nein .ls-rueck-titel { color: var(--c-granat); }
.ls-rueck-loesung { margin: 3px 0 0; color: var(--c-text); font-size: .98rem; line-height: 1.35; }
.ls-rueck-hinweis { font-weight: 700; color: var(--c-text-2); }
.ls-rueck-aktionen { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 8px; }
.ls-rueck-aktionen .ls-knopf { flex: 1; }
.ls-rueck-aktionen .ls-hoeren { flex: none; margin: 0; }
.ls-paar { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; }
.ls-paar-ziel { font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; color: var(--c-nacht); }
.ls-paar-de { color: var(--c-text-2); font-weight: 600; }
.ls-paar-bsp { font-family: var(--f-display); font-weight: 600; color: var(--c-nacht); }
.ls-paar-aussprache { flex-basis: 100%; font-size: .9rem; color: var(--c-text-2); }
.ls-option-text.ls-lang { font-size: 1rem; line-height: 1.25; }

/* ------------------------------------------------------------------ Karteikarten */
.ls-karte { position: relative; display: block; width: 100%; min-height: 300px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; text-align: center; }
.ls-karte:focus-visible { outline-offset: 6px; border-radius: var(--r-xl); }
.ls-karte-innen { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--e-out); }
.ls-karte.ls-offen .ls-karte-innen { transform: rotateY(180deg); }
.ls-karte-seite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 22px 44px;
  border: 1px solid var(--c-linie); border-radius: var(--r-xl);
  background: var(--c-weiss); box-shadow: var(--sh-2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ls-karte-hinten {
  transform: rotateY(180deg);
  padding-bottom: 26px;
  border-color: transparent;
  background: radial-gradient(120% 95% at 88% 0%, var(--c-tinte) 0%, var(--c-nacht) 72%);
  color: var(--c-text-hell);
}
.ls-karte-hinten::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent); border-radius: calc(var(--r-xl) - 8px);
}
.ls-karte-de { font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--c-text-2); }
.ls-karte-de-gross { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.15; color: var(--c-nacht); }
.ls-karte-hinten .ls-karte-de { color: var(--c-text-hell-2); }
.ls-karte-ziel { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.3rem, 11vw, 3.2rem); line-height: 1.1; color: var(--c-weiss); overflow-wrap: anywhere; }
.ls-karte-hinweis { max-width: 32ch; font-size: .92rem; line-height: 1.4; color: var(--c-text-hell-2); }
.ls-karte-bst { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .15rem .5rem; margin-top: 6px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent); }
.ls-karte-bst-zeichen { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; color: color-mix(in srgb, var(--c-gold) 55%, var(--c-weiss)); }
.ls-karte-tipp { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--c-text-2); }
.ls-karte.ls-ok { animation: ls-huepf .45s var(--e-out); }
.ls-karte.ls-weg { animation: ls-weg .32s var(--e-inout) forwards; }
.ls-karte-extra { display: flex; justify-content: center; margin-top: -6px; }
.ls-karte-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-karte-aktionen > :first-child:not([hidden]) { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ Memory */
.ls-memory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ls-mkarte { position: relative; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.ls-mkarte:focus-visible { outline-offset: 4px; border-radius: var(--r-m); }
.ls-mkarte-innen { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s var(--e-out); }
.ls-mkarte.ls-offen .ls-mkarte-innen { transform: rotateY(180deg); }
.ls-mkarte-seite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; border-radius: var(--r-m);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ls-mkarte-rueck {
  background-color: var(--c-tinte);
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-gold) 18%, transparent) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-gold) 18%, transparent) 0 1px, transparent 1px 12px);
  color: color-mix(in srgb, var(--c-gold) 62%, var(--c-weiss));
  box-shadow: inset 0 0 0 5px var(--c-tinte), inset 0 0 0 6px color-mix(in srgb, var(--c-gold) 55%, transparent), var(--sh-1);
  transition: box-shadow var(--d-mittel) var(--e-out);
}
.ls-mkarte-rueck .ls-ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--c-tinte); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-gold) 45%, transparent); }
@media (hover: hover) { .ls-mkarte:not(.ls-offen):hover .ls-mkarte-rueck { box-shadow: inset 0 0 0 5px var(--c-tinte), inset 0 0 0 6px var(--c-gold), var(--sh-2); } }
.ls-mkarte-vorn {
  transform: rotateY(180deg);
  border: 1.5px solid var(--c-linie-2); background: var(--c-weiss); box-shadow: var(--sh-1);
  text-align: center;
  transition: background-color var(--d-schnell), border-color var(--d-schnell);
}
.ls-mkarte-ziel { font-weight: 800; font-size: clamp(1rem, 4.6vw, 1.25rem); line-height: 1.15; color: var(--c-nacht); overflow-wrap: anywhere; }
.ls-mkarte-ziel.ls-lang { font-size: clamp(.82rem, 3.6vw, 1rem); }
.ls-mkarte-de { font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--c-gruen); opacity: 0; }
.ls-mkarte-de-gross { font-size: clamp(.95rem, 4.2vw, 1.1rem); color: var(--c-text-2); opacity: 1; }
.ls-mkarte.ls-nein .ls-mkarte-vorn { border-color: var(--c-granat); background: var(--c-granat-hell); }
.ls-mkarte.ls-gefunden { cursor: default; }
.ls-mkarte.ls-gefunden .ls-mkarte-vorn { border-color: var(--c-gruen); background: var(--c-gruen-hell); }
.ls-mkarte.ls-gefunden .ls-mkarte-ziel, .ls-mkarte.ls-gefunden .ls-mkarte-de-gross { color: var(--c-gruen); }
.ls-mkarte.ls-gefunden .ls-mkarte-de { opacity: 1; }
.ls-mkarte.ls-ok { animation: ls-huepf .55s var(--e-out); }

/* ------------------------------------------------------------------ Wort bauen */
.ls-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ls-slot {
  min-width: 48px; height: 56px; padding: 0 10px;
  display: grid; place-items: center;
  border: 2px dashed var(--c-linie-2); border-radius: var(--r-s); background: transparent;
  font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--c-nacht);
  cursor: pointer;
}
.ls-slot.ls-voll { border-style: solid; border-color: var(--c-tinte); background: var(--c-weiss); box-shadow: 0 3px 0 var(--c-linie-2); }
.ls-slot[aria-disabled="true"] { cursor: default; }
.ls-slot.ls-ok { border-color: var(--c-gruen); background: var(--c-gruen-hell); color: var(--c-gruen); box-shadow: none; animation: ls-huepf .55s var(--e-out) var(--ls-verz, 0ms) both; }
.ls-slot.ls-passt { border-color: var(--c-gruen); color: var(--c-gruen); box-shadow: none; }
.ls-slot.ls-nein { border-color: var(--c-granat); background: var(--c-granat-hell); color: var(--c-granat); box-shadow: none; }
.ls-kacheln { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 16px 12px; border-radius: var(--r-l); background: var(--c-nebel); }
.ls-kachel {
  min-width: 56px; height: 56px; padding: 0 12px;
  border: 1px solid var(--c-linie-2); border-radius: var(--r-m);
  background: var(--c-weiss); box-shadow: 0 3px 0 var(--c-linie-2);
  font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--c-nacht);
  cursor: pointer;
  transition: transform var(--d-schnell) var(--e-out), box-shadow var(--d-schnell), background-color var(--d-schnell), color var(--d-schnell);
}
.ls-kachel:not([aria-disabled="true"]):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-linie-2); }
@media (hover: hover) { .ls-kachel:not([aria-disabled="true"]):hover { transform: translateY(-2px); border-color: var(--c-lapis); } }
.ls-kachel[aria-disabled="true"] { cursor: default; }
.ls-kachel.ls-benutzt { color: transparent; background: transparent; box-shadow: none; border-style: dashed; }
.ls-werkzeug { display: flex; justify-content: center; margin-top: -6px; }
.ls-loesung-zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: -6px 0 0; }
.ls-loesung-label { margin-right: 4px; font-size: .88rem; font-weight: 800; color: var(--c-gruen); }
.ls-loesung-teil {
  min-width: 36px; height: 40px; padding: 0 8px; display: grid; place-items: center;
  border: 1px solid var(--c-gruen); border-radius: var(--r-s); background: var(--c-gruen-hell);
  color: var(--c-gruen); font-weight: 800; font-size: 1.15rem;
}
.ls-loesung-text { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; color: var(--c-gruen); }

/* ------------------------------------------------------------------ Satz-Puzzle */
.ls-satzzeile {
  min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 8px;
  padding: 12px; border: 2px dashed var(--c-linie-2); border-radius: var(--r-l); background: var(--c-weiss);
}
.ls-satzzeile-leer { width: 100%; text-align: center; color: var(--c-text-2); font-weight: 600; font-size: .95rem; }
.ls-satzzeile.ls-ok { border-style: solid; border-color: var(--c-gruen); background: var(--c-gruen-hell); animation: ls-huepf .55s var(--e-out); }
.ls-satzzeile.ls-nein { border-style: solid; border-color: var(--c-granat); background: var(--c-granat-hell); }
.ls-woerter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ls-wort {
  min-height: 50px; padding: 0 16px;
  border: 1px solid var(--c-linie-2); border-radius: 999px;
  background: var(--c-weiss); box-shadow: 0 3px 0 var(--c-linie-2);
  font-weight: 700; font-size: 1.15rem; color: var(--c-nacht);
  cursor: pointer;
  transition: transform var(--d-schnell) var(--e-out), box-shadow var(--d-schnell);
}
.ls-wort:not([aria-disabled="true"]):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-linie-2); }
@media (hover: hover) { .ls-wort:not([aria-disabled="true"]):hover { transform: translateY(-2px); border-color: var(--c-lapis); } }
.ls-wort[aria-disabled="true"] { cursor: default; }
.ls-wort.ls-benutzt { color: transparent; background: var(--c-nebel); box-shadow: none; border-style: dashed; }
.ls-wort-gelegt { background: var(--c-himmel); border-color: transparent; box-shadow: none; }
.ls-satzzeile.ls-ok .ls-wort-gelegt { background: var(--c-weiss); color: var(--c-gruen); }
.ls-satzzeile.ls-nein .ls-wort-gelegt { background: var(--c-weiss); color: var(--c-granat); }

/* ------------------------------------------------------------------ Lückentext und Buchstaben-Jagd */
.ls-lueckensatz { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.55; color: var(--c-nacht); text-wrap: balance; }
.ls-luecke {
  position: relative;   /* hält den versteckten Text „Lücke“ (ls-sr) in der Lücke */
  display: inline-block; min-width: 3.2em; height: 1.25em; margin: 0 .12em; vertical-align: -.22em;
  border-bottom: 3px solid var(--c-gold); border-radius: 6px 6px 2px 2px; background: var(--c-gold-hell);
}
.ls-luecke-bst { min-width: 1.3em; }
.ls-luecke.ls-ok, .ls-luecke.ls-korrigiert {
  min-width: 0; height: auto; margin: 0; padding: 0 .12em; vertical-align: baseline;
  background: var(--c-gruen-hell); border-bottom-color: var(--c-gruen); color: var(--c-gruen);
}
.ls-luecke.ls-ok { animation: ls-huepf .55s var(--e-out); }
.ls-luecke.ls-korrigiert { border-bottom-style: dashed; }
.ls-jagd-wort { margin: 4px 0 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.25; color: var(--c-nacht); letter-spacing: .02em; }
.ls-laut { margin: 0; display: grid; justify-items: center; gap: 6px; color: var(--c-gold-dunkel); }
.ls-laut-text { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 12vw, 3.4rem); line-height: 1.1; color: var(--c-nacht); }
.ls-laut-beschreibung { max-width: 26ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 5.6vw, 1.7rem); line-height: 1.3; color: var(--c-nacht); text-wrap: balance; }
.ls-aussprache { max-width: 30ch; }
.ls-tipp { margin: 4px 0 0; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--c-gold-hell); color: var(--c-gold-dunkel); font-size: .88rem; font-weight: 700; line-height: 1.3; }
.ls-tipp .ls-ico { flex: none; }

/* ------------------------------------------------------------------ Blitz-Runde */
.ls-start {
  display: grid; justify-items: center; gap: 12px; margin: auto 0;
  padding: 34px 22px 26px; text-align: center;
  border: 1px solid var(--c-linie); border-radius: var(--r-xl); background: var(--c-weiss); box-shadow: var(--sh-1);
  outline: none; animation: ls-rein .4s var(--e-out) both;
}
.ls-start-symbol {
  width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-nacht); color: color-mix(in srgb, var(--c-gold) 62%, var(--c-weiss));
  box-shadow: 0 0 0 6px var(--c-gold-hell), 0 0 0 7px color-mix(in srgb, var(--c-gold) 40%, transparent);
}
.ls-start-titel { font-family: var(--f-display); font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.1; color: var(--c-nacht); }
.ls-start-text { margin: 0; max-width: 34ch; color: var(--c-text-2); line-height: 1.5; }
.ls-start-tasten { display: none; margin: 0; font-size: .88rem; color: var(--c-text-2); }
.ls-start .ls-knopf { margin-top: 8px; min-width: 220px; }
@media (hover: hover) and (pointer: fine) { .ls-start-tasten { display: block; } }
.ls-blitz { position: relative; display: grid; gap: 14px; }
.ls-blitz-stand {
  justify-self: center; margin: 0;
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1.05rem;
  border-radius: 999px; background: var(--c-gold-hell); color: var(--c-gold-dunkel); font-weight: 800;
}
.ls-blitz-stand .ls-ico { fill: var(--c-gold); stroke: var(--c-gold-dunkel); }
.ls-blitz-zahl { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ls-blitz-karte {
  display: grid; justify-items: center; gap: 4px;
  padding: 24px 18px; text-align: center;
  border: 2px solid var(--c-linie); border-radius: var(--r-xl); background: var(--c-weiss); box-shadow: var(--sh-2);
  transition: border-color var(--d-schnell), background-color var(--d-schnell);
}
.ls-blitz-karte.ls-neu { animation: ls-rein .28s var(--e-out); }
.ls-blitz-karte.ls-ok { border-color: var(--c-gruen); background: var(--c-gruen-hell); animation: ls-huepf .4s var(--e-out); }
.ls-blitz-karte.ls-nein { border-color: var(--c-granat); background: var(--c-granat-hell); animation: ls-wackel .38s var(--e-inout); }
.ls-blitz-ziel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.12; color: var(--c-nacht); overflow-wrap: anywhere; }
.ls-blitz-gleich { margin: 2px 0; display: flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-dunkel); }
.ls-blitz-gleich::before, .ls-blitz-gleich::after { content: ''; width: 22px; height: 1px; background: var(--c-gold); }
.ls-blitz-partner { display: grid; justify-items: center; gap: 2px; }
.ls-blitz-partner .ls-emoji { font-size: clamp(3.4rem, 16vw, 4.4rem); }
.ls-blitz-de { font-weight: 700; font-size: 1.1rem; color: var(--c-text-2); }
.ls-blitz-de-gross { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.1rem); color: var(--c-nacht); }
.ls-blitz-hinweis { min-height: 1.5em; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3rem; text-align: center; font-weight: 600; font-size: .95rem; color: var(--c-text-2); }
.ls-blitz-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-blitz-knopf {
  display: grid; justify-items: center; align-content: center; gap: 4px;
  min-height: 96px; padding: 10px;
  border: 2px solid; border-radius: var(--r-l); background: var(--c-weiss); box-shadow: var(--sh-1);
  font-weight: 800; font-size: 1.05rem; cursor: pointer;
  transition: background-color var(--d-schnell), transform var(--d-schnell) var(--e-out);
}
.ls-blitz-knopf .ls-ico { width: 34px; height: 34px; }
.ls-blitz-knopf:active, .ls-blitz-knopf.ls-gedrueckt { transform: scale(.97); }
.ls-blitz-nein { border-color: color-mix(in srgb, var(--c-granat) 45%, transparent); color: var(--c-granat); }
.ls-blitz-ja { border-color: color-mix(in srgb, var(--c-gruen) 45%, transparent); color: var(--c-gruen); }
.ls-blitz-nein:active, .ls-blitz-nein.ls-gedrueckt { background: var(--c-granat-hell); }
.ls-blitz-ja:active, .ls-blitz-ja.ls-gedrueckt { background: var(--c-gruen-hell); }
@media (hover: hover) { .ls-blitz-nein:hover { background: var(--c-granat-hell); } .ls-blitz-ja:hover { background: var(--c-gruen-hell); } }
.ls-blitz-knopf[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ls-blitz-ende {
  position: absolute; inset: 0; z-index: 2; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: var(--r-xl); background: color-mix(in srgb, var(--c-papier) 86%, transparent);
  font-family: var(--f-display); font-weight: 600; font-size: 2rem; color: var(--c-nacht);
  animation: ls-blende .3s ease both;
}

/* ------------------------------------------------------------------ Ergebnis */
.ls-ergebnis {
  position: relative;
  display: grid; justify-items: center; gap: 10px; margin: auto 0;
  padding: 30px 20px 22px; text-align: center;
  border: 1px solid var(--c-linie); border-radius: var(--r-xl); background: var(--c-weiss); box-shadow: var(--sh-2);
  animation: ls-rein .5s var(--e-out) both;
}
.ls-ergebnis-ueber { margin: 0; display: inline-flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-dunkel); }
.ls-ergebnis-ueber::before, .ls-ergebnis-ueber::after { content: ''; width: 22px; height: 1px; background: var(--c-gold); }
.ls-ergebnis-titel { font-family: var(--f-display); font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; color: var(--c-nacht); outline: none; }
.ls-sterne { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 2px; padding: 16px 26px 10px; border-radius: 999px; background: radial-gradient(closest-side, var(--c-gold-hell), transparent); }
.ls-stern .ls-ico { width: 56px; height: 56px; fill: var(--c-nebel); stroke: var(--c-text-3); }
.ls-stern:nth-child(2) { translate: 0 -10px; }
.ls-stern:nth-child(2) .ls-ico { width: 66px; height: 66px; }
.ls-stern.ls-voll .ls-ico { fill: color-mix(in srgb, var(--c-gold) 82%, var(--c-gold-hell)); stroke: var(--c-gold-dunkel); }
.ls-stern.ls-voll { animation: ls-stern .6s var(--e-out) both; }
.ls-stern.ls-voll:nth-child(1) { animation-delay: .15s; }
.ls-stern.ls-voll:nth-child(2) { animation-delay: .35s; }
.ls-stern.ls-voll:nth-child(3) { animation-delay: .55s; }
.ls-ergebnis-zeile { margin: 0; font-weight: 800; font-size: 1.15rem; line-height: 1.35; color: var(--c-nacht); }
.ls-ergebnis-text { margin: 0; max-width: 34ch; color: var(--c-text-2); line-height: 1.5; }
.ls-ergebnis-zeit { margin: 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 700; color: var(--c-text-2); }
.ls-zusatz { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ls-zusatz:empty { display: none; }
.ls-plakette {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem;
  border-radius: 999px; background: var(--c-gold-hell); color: var(--c-gold-dunkel);
  font-weight: 800; font-size: .88rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 35%, transparent);
  animation: ls-plopp .4s var(--e-out) both;
}
.ls-ueben { width: 100%; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--c-linie); }
.ls-ueben-titel { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2); }
.ls-ueben-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ls-ueben-eintrag { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1rem .45rem; padding: .45rem .9rem; border-radius: 999px; background: var(--c-nebel); }
.ls-ueben-ziel { font-family: var(--f-display); font-weight: 600; color: var(--c-nacht); }
.ls-ueben-de { font-size: .86rem; font-weight: 600; color: var(--c-text-2); }
.ls-ergebnis-aktionen { width: 100%; display: grid; gap: 10px; margin-top: 12px; }

/* Feier bei 3 Sternen */
.ls-konfetti { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.ls-konfetti i { position: absolute; top: -18px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: ls-konfetti var(--d, 2.6s) cubic-bezier(.25, .6, .45, 1) var(--v, 0s) forwards; }
.ls-konfetti .ls-k0 { background: var(--c-gold); }
.ls-konfetti .ls-k1 { background: var(--c-lapis); }
.ls-konfetti .ls-k2 { background: var(--c-azur); }
.ls-konfetti .ls-k3 { background: var(--c-gold-hell); box-shadow: inset 0 0 0 1px var(--c-gold); }
.ls-konfetti .ls-k4 { width: 9px; height: 9px; border-radius: 50%; background: var(--c-tinte); }

/* ------------------------------------------------------------------ Rückfrage-Dialog und Hinweis */
.ls-dialog-huelle {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-nacht) 45%, transparent);
  animation: ls-blende .25s ease both;
}
.ls-dialog { width: min(420px, 100%); padding: 28px 22px 20px; border-radius: var(--r-xl); background: var(--c-weiss); box-shadow: var(--sh-3); text-align: center; animation: ls-rein .35s var(--e-out) both; }
.ls-dialog-titel { margin-bottom: 8px !important; font-family: var(--f-display); font-size: 1.7rem; line-height: 1.15; color: var(--c-nacht); }
.ls-dialog-text { margin: 0 0 20px; color: var(--c-text-2); line-height: 1.5; }
.ls-dialog-aktionen { display: grid; gap: 10px; }
.ls-leer { margin: auto; display: grid; justify-items: center; gap: 10px; width: min(100% - 32px, 420px); padding: 40px 0; text-align: center; }
.ls-leer-symbol { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--c-himmel); color: var(--c-tinte); }
.ls-leer-titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; line-height: 1.15; color: var(--c-nacht); }
.ls-leer-text { margin: 0 0 8px; color: var(--c-text-2); line-height: 1.5; }

/* ------------------------------------------------------------------ Bewegung */
@keyframes ls-rein { from { opacity: 0; transform: translateY(10px); } }
@keyframes ls-blende { from { opacity: 0; } }
@keyframes ls-hoch { from { opacity: .3; transform: translateY(100%); } }
@keyframes ls-plopp { from { opacity: 0; transform: scale(.2); } }
@keyframes ls-huepf {
  0% { transform: none; }
  30% { transform: translateY(-8px) scale(1.04); }
  55% { transform: translateY(0) scale(.98); }
  75% { transform: translateY(-2px); }
  100% { transform: none; }
}
@keyframes ls-wackel { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes ls-weg { to { opacity: 0; transform: translateX(-28px) rotate(-2deg); } }
@keyframes ls-stern {
  0% { opacity: 0; transform: scale(.3) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ls-konfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), 105vh) rotate(var(--r, 360deg)); }
}

/* ------------------------------------------------------------------ Größere Bildschirme */
@media (min-width: 520px) {
  .ls-optionen-buchstaben .ls-option { flex-basis: calc((100% - 36px) / 4); }
  .ls-ergebnis-aktionen { grid-template-columns: 1fr 1fr; }
  .ls-dialog-aktionen { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 560px) {
  .ls-memory { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .ls-mkarte { aspect-ratio: 1; }
}
@media (min-width: 720px) {
  .ls-kopf { padding-inline: max(20px, calc((100% - var(--ls-breite, 680px)) / 2 - 64px)); gap: 16px; }
  .ls-buehne { padding: 32px 0 40px; }
  .ls-runde { gap: 22px; }
  .ls-motiv { min-height: 210px; }
  .ls-option { min-height: 76px; font-size: 1.3rem; }
  .ls-karte { min-height: 340px; }
  .ls-rueck { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: max(20px, calc((100% - var(--ls-breite, 680px)) / 2)); }
  .ls-rueck-aktionen { grid-column: auto; margin: 0; }
  .ls-rueck-aktionen .ls-knopf { flex: none; min-width: 150px; }
  .ls-ergebnis { padding: 40px 36px 30px; }
}

/* Weniger Bewegung gewünscht: keine Hüpfer, kein Konfetti, keine Dreh-Animation */
@media (prefers-reduced-motion: reduce) {
  .ls-spiel *, .ls-spiel *::before, .ls-spiel *::after { animation: none !important; transition: none !important; }
  .ls-konfetti { display: none !important; }
}