/* lern.ict.schule – gemeinsames Stylesheet (Startseite + Spiel-Kern + Spiele) */
:root {
  --navy: #1f2a44;
  --blau: #284de6;
  --blau-hell: #e7edff;
  --mathe: #284de6;
  --mathe-ton: #e3eaff;
  --mathe-tief: #1a35b0;
  --deutsch: #e8562a;
  --deutsch-ton: #ffe6dc;
  --deutsch-tief: #b33b14;
  --logik: #7b4fd6;
  --logik-ton: #efe7ff;
  --logik-tief: #5a33b0;
  /* Medien / Informatik / KI = offizielle ICT.Schule-Bereichsfarben (MV, ID, KI) */
  --medien: #3a8a6d; --medien-ton: #dcf1e8; --medien-tief: #276650;
  --informatik: #5b5bc0; --informatik-ton: #e5e5f8; --informatik-tief: #40409a;
  --ki: #9a5ec0; --ki-ton: #f2e7f9; --ki-tief: #73408f;
  --gelb: #ffc93c;
  --gelb-ton: #fff3cf;
  --gruen: #1f9d5f;
  --gruen-ton: #dcf5e7;
  --rot: #d9435a;
  --rot-ton: #ffe3e7;
  --violett: #7b5ce0;
  --text: #1f2a44;
  --text-2: #56627a;
  --flaeche: #ffffff;
  --grund: #f4f6fd;
  --linie: #dfe5f3;
  --radius: 22px;
  --schatten: 0 6px 0 #1f2a4414, 0 14px 30px #1f2a4412;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--grund);
  font-size: 19px; line-height: 1.45; min-height: 100vh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--gelb); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 20; background: #ffffffe8; backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 900; font-size: 21px; letter-spacing: -.3px; border-radius: 14px; }
.marke img { width: 38px; height: 38px; border-radius: 11px; background: var(--navy); padding: 4px; }
.marke .punkt { color: var(--blau); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pille { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 999px; background: var(--gelb-ton); color: #7a5400; font-weight: 900; font-size: 18px; border: 0; }
.pille.knopf { background: var(--blau-hell); color: var(--blau); min-width: 46px; justify-content: center; padding: 0 12px; font-size: 20px; }
.pille.knopf[aria-pressed="false"] { background: #eef0f5; color: #8792a8; }
.pille .zahl { min-width: 1.2ch; text-align: right; }
.pille.huepf { animation: huepf .5s ease; }

/* ── Startseite ───────────────────────────────────────────────────── */
main { max-width: 1120px; margin: 0 auto; padding: 22px 16px 40px; }
.held { position: relative; overflow: hidden; border-radius: 30px; background: linear-gradient(135deg, #284de6 0%, #4f6cf0 55%, #7b5ce0 100%); color: #fff; padding: 28px 26px 30px; margin-bottom: 22px; box-shadow: var(--schatten); }
.held h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -.8px; font-weight: 900; max-width: 20ch; }
.held p { margin: 0; font-size: clamp(17px, 2.4vw, 21px); opacity: .95; max-width: 34ch; font-weight: 700; }
.held .deko { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; font-size: clamp(44px, 9vw, 86px); filter: drop-shadow(0 6px 0 #0002); pointer-events: none; }
.held .deko span { display: inline-block; animation: schweben 4s ease-in-out infinite; }
.held .deko span:nth-child(2) { animation-delay: -1.3s; }
.held .deko span:nth-child(3) { animation-delay: -2.6s; }
@media (max-width: 640px) { .held { padding: 20px 20px 22px; border-radius: 24px; } .held .deko { display: none; } }
@media (max-width: 520px) {
  .filter { padding: 16px 14px 6px; }
  .chip.fach { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 8px 6px; min-height: 76px; font-size: 17px; }
  .chip.fach .sym { font-size: 26px; }
  .chip.klasse { width: 58px; min-height: 58px; }
  .zyklus-trenner { display: none; }
}

.filter { background: var(--flaeche); border-radius: 26px; padding: 18px 18px 8px; box-shadow: var(--schatten); margin-bottom: 26px; }
.f-gruppe { margin-bottom: 14px; }
.f-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 900; color: var(--navy); }
.f-titel .nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 56px; min-width: 56px; padding: 0 18px; border-radius: 18px; border: 3px solid var(--linie); background: #fff; font-weight: 900; font-size: 19px; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s ease, background .15s, border-color .15s; }
.chip:hover { transform: translateY(-2px); border-color: #c5cfea; }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.klasse { width: 64px; padding: 0; flex-direction: column; gap: 0; line-height: 1; }
.chip.klasse small { font-size: 11px; font-weight: 800; opacity: .7; margin-top: 3px; }
.chip.alle { padding: 0 16px; }
.chip.fach { min-height: 64px; padding: 0 22px; font-size: 21px; }
.chip.fach .sym { font-size: 26px; }
.chip.fach.mathe[aria-pressed="true"] { background: var(--mathe); border-color: var(--mathe); }
.chip.fach.deutsch[aria-pressed="true"] { background: var(--deutsch); border-color: var(--deutsch); }
.chip.fach.logik[aria-pressed="true"] { background: var(--logik); border-color: var(--logik); }
.chip.fach.medien[aria-pressed="true"] { background: var(--medien); border-color: var(--medien); }
.chip.fach.informatik[aria-pressed="true"] { background: var(--informatik); border-color: var(--informatik); }
.chip.fach.ki[aria-pressed="true"] { background: var(--ki); border-color: var(--ki); }
.chip.thema { min-height: 48px; font-size: 17px; border-radius: 999px; }
.zyklus-trenner { align-self: center; width: 2px; height: 34px; background: var(--linie); margin: 0 2px; border-radius: 2px; }

.ergebnis-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 14px; }
.ergebnis-kopf h2 { margin: 0; font-size: 24px; font-weight: 900; }
.ergebnis-kopf .anz { color: var(--text-2); font-weight: 800; font-size: 16px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
@media (max-width: 520px) { .raster { grid-template-columns: 1fr 1fr; gap: 12px; } }
.karte { position: relative; display: flex; flex-direction: column; text-align: left; border: 0; padding: 0; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; min-height: 100%; }
.karte:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 10px 0 #1f2a4414, 0 20px 36px #1f2a441a; }
.karte:active { transform: translateY(1px); }
.karte .k-bild { display: grid; place-items: center; height: 118px; font-size: 64px; background: var(--mathe-ton); position: relative; }
.karte.deutsch .k-bild { background: var(--deutsch-ton); }
.karte.logik .k-bild { background: var(--logik-ton); }
.karte.medien .k-bild { background: var(--medien-ton); }
.karte.informatik .k-bild { background: var(--informatik-ton); }
.karte.ki .k-bild { background: var(--ki-ton); }
.karte .k-bild::after { content: ""; position: absolute; inset: auto -20% -48px -20%; height: 70px; background: #ffffff55; border-radius: 50%; }
.karte .k-text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.karte .k-titel { font-size: 20px; font-weight: 900; line-height: 1.15; color: var(--navy); }
.karte .k-kurz { font-size: 15.5px; color: var(--text-2); font-weight: 700; line-height: 1.35; }
.karte .k-tags { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; font-weight: 900; padding: 4px 10px; border-radius: 999px; background: var(--mathe-ton); color: var(--mathe-tief); }
.karte.deutsch .tag { background: var(--deutsch-ton); color: var(--deutsch-tief); }
.karte.logik .tag { background: var(--logik-ton); color: var(--logik-tief); }
.karte.medien .tag { background: var(--medien-ton); color: var(--medien-tief); }
.karte.informatik .tag { background: var(--informatik-ton); color: var(--informatik-tief); }
.karte.ki .tag { background: var(--ki-ton); color: var(--ki-tief); }
.karte .tag.klassen { background: #eef0f6; color: var(--text-2); }
@media (max-width: 520px) {
  .karte .k-bild { height: 92px; font-size: 50px; }
  .karte .k-titel { font-size: 17px; }
  .karte .k-kurz { display: none; }
  .karte .k-text { padding: 10px 12px 12px; }
  .tag { font-size: 12px; padding: 3px 8px; }
}
.leer { text-align: center; padding: 40px 16px; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }
.leer .gross { font-size: 54px; }
.leer button { margin-top: 12px; }

.fuss { max-width: 1120px; margin: 0 auto; padding: 18px 16px 34px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 15px; font-weight: 700; }
.fuss a { color: var(--blau); font-weight: 900; text-decoration: none; }
.fuss .schloss { display: inline-flex; align-items: center; gap: 8px; }

/* ── Spielansicht ─────────────────────────────────────────────────── */
.spiel-ansicht { max-width: 860px; margin: 0 auto; padding: 16px 16px 40px; }
.spiel-leiste { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zurueck { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 54px; min-width: 54px; padding: 0 18px; border-radius: 18px; border: 3px solid var(--linie); background: #fff; font-weight: 900; font-size: 18px; }
.zurueck:hover { border-color: #c5cfea; }
.spiel-name { font-size: clamp(20px, 3.4vw, 26px); font-weight: 900; margin: 0; line-height: 1.15; display: flex; align-items: center; gap: 10px; }
.spiel-name .sym { font-size: 1.3em; }
.spiel-feld { position: relative; background: var(--flaeche); border-radius: 30px; box-shadow: var(--schatten); padding: 18px 18px 88px; min-height: 480px; overflow: hidden; }
.spiel-feld.mathe { border-top: 8px solid var(--mathe); }
.spiel-feld.deutsch { border-top: 8px solid var(--deutsch); }
.spiel-feld.logik { border-top: 8px solid var(--logik); }
.spiel-feld.medien { border-top: 8px solid var(--medien); }
.spiel-feld.informatik { border-top: 8px solid var(--informatik); }
.spiel-feld.ki { border-top: 8px solid var(--ki); }
@media (max-width: 520px) { .zurueck .txt { display: none; } .spiel-feld { padding: 14px 12px 84px; border-radius: 24px; } }

/* ── Kern: Fortschritt, Bühne, Rückmeldung ───────────────────────── */
.lk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lk-punkte { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.lk-punkt { width: 18px; height: 18px; border-radius: 50%; background: #e6eaf4; transition: transform .2s, background .2s; }
.lk-punkt.jetzt { background: #fff; box-shadow: inset 0 0 0 4px var(--blau); transform: scale(1.15); }
.lk-punkt.stern { background: var(--gelb); box-shadow: inset 0 0 0 3px #e9a800; }
.lk-punkt.ok { background: var(--gruen-ton); box-shadow: inset 0 0 0 3px var(--gruen); }
.lk-sterne { font-weight: 900; font-size: 20px; background: var(--gelb-ton); color: #7a5400; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
/* Fläche (sichtbarer Bereich) + Inhalt (Aufgabe). Der Kern verkleinert den Inhalt per «scale», falls er nicht passt. */
.lk-buehne { position: relative; display: flex; flex-direction: column; justify-content: center; }
.lk-inhalt { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; transform-origin: top center; }
.lk-inhalt.rein { animation: rein .35s ease; }
.lk-titel { font-size: clamp(22px, 3.6vw, 30px); font-weight: 900; text-align: center; line-height: 1.2; color: var(--navy); }
.lk-hinweis { margin: 0; color: var(--text-2); font-weight: 800; font-size: 16px; text-align: center; }
.lk-fehler { color: var(--rot); font-weight: 900; }
.lk-auswahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; width: 100%; max-width: 640px; }
.lk-auswahl.zahlen { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .lk-auswahl.zahlen { grid-template-columns: repeat(2, 1fr); } }
.lk-wahl { min-height: 84px; border-radius: 22px; border: 0; background: var(--blau-hell); color: var(--navy); font-size: clamp(30px, 5vw, 40px); font-weight: 900; box-shadow: 0 6px 0 #c3cff3; transition: transform .1s, box-shadow .1s, opacity .25s, background .2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; }
.lk-wahl:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 #c3cff3; }
.lk-wahl:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #c3cff3; }
.lk-wahl.ok { background: var(--gruen); color: #fff; box-shadow: 0 6px 0 #137345; animation: pop .4s ease; }
.lk-wahl.weg { opacity: .28; cursor: default; filter: grayscale(1); }
.lk-wahl.breit { grid-column: 1 / -1; font-size: 24px; min-height: 64px; }
.lk-auswahl.fertig .lk-wahl:not(.ok) { opacity: .25; }
.wackeln { animation: wackeln .45s ease; }

.lk-blase { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 30px) scale(.9); opacity: 0; pointer-events: none; padding: 12px 22px; border-radius: 999px; font-weight: 900; font-size: 22px; background: var(--navy); color: #fff; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); z-index: 5; box-shadow: 0 10px 24px #1f2a4433; }
.lk-blase.sichtbar { opacity: 1; transform: translate(-50%, 0) scale(1); }
.lk-blase.gut { background: var(--gruen); }
.lk-blase.falsch { background: #fff; color: var(--navy); box-shadow: 0 0 0 3px var(--gelb), 0 10px 24px #1f2a4422; }
.lk-blase.hilfe { background: var(--violett); }
@media (max-width: 480px) { .lk-blase { font-size: 17px; white-space: normal; text-align: center; width: max-content; } }
/* Im Spiel: Rückmeldung oben über der Fortschrittsleiste (nie über den Antwort-Knöpfen) */
body.im-spiel .lk-blase { top: 6px; bottom: auto; transform: translate(-50%, -16px) scale(.9); padding: 8px 20px; font-size: 20px; }
body.im-spiel .lk-blase.sichtbar { transform: translate(-50%, 0) scale(1); }

.lk-vorlesen { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--gelb); font-size: 26px; box-shadow: 0 5px 0 #e0a400; flex-shrink: 0; }
.lk-vorlesen:active { transform: translateY(4px); box-shadow: 0 1px 0 #e0a400; }

/* Ziffernblock */
.lk-zahlfeld { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.lk-eingabe { display: inline-grid; place-items: center; min-width: 2.6ch; padding: 0 .3ch; height: 1.5em; border-radius: 18px; background: var(--gelb-ton); box-shadow: inset 0 0 0 4px var(--gelb); color: var(--navy); font-weight: 900; }
.lk-eingabe.leer { color: #c49a2a; }
.lk-eingabe.ok { background: var(--gruen-ton); box-shadow: inset 0 0 0 4px var(--gruen); color: var(--gruen); }
.lk-eingabe.loesung { background: #efeaff; box-shadow: inset 0 0 0 4px var(--violett); color: var(--violett); }
.lk-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 360px; }
.lk-taste { height: 72px; border-radius: 20px; border: 0; background: #eef1f8; font-size: 32px; font-weight: 900; color: var(--navy); box-shadow: 0 5px 0 #d3d9e8; }
.lk-taste:active { transform: translateY(4px); box-shadow: 0 1px 0 #d3d9e8; }
.lk-taste.ok-taste { background: var(--gruen); color: #fff; box-shadow: 0 5px 0 #137345; }
.lk-taste.weg-taste { background: #ffe9d6; color: #a44c00; box-shadow: 0 5px 0 #f2c79f; font-size: 26px; }
.lk-taste.breit { grid-column: 1 / -1; height: 56px; font-size: 20px; }
@media (max-width: 480px) { .lk-taste { height: 62px; } }

/* Schluss */
.lk-schluss { text-align: center; padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lk-schluss-symbol { font-size: 84px; animation: pop .6s ease; }
.lk-schluss-titel { margin: 0; font-size: clamp(28px, 5vw, 40px); font-weight: 900; }
.lk-schluss-sterne { font-size: clamp(28px, 5.4vw, 40px); letter-spacing: 2px; }
.lk-schluss-sterne .an { color: var(--gelb); text-shadow: 0 3px 0 #e0a400; display: inline-block; animation: pop .5s ease both; }
.lk-schluss-sterne .aus { color: #e3e7f0; }
.lk-schluss-text { margin: 0; font-weight: 800; color: var(--text-2); }
.lk-schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }
.lk-gross-knopf { min-height: 64px; padding: 0 26px; border-radius: 20px; border: 3px solid var(--linie); background: #fff; font-weight: 900; font-size: 20px; }
.lk-gross-knopf.primaer { background: var(--blau); border-color: var(--blau); color: #fff; box-shadow: 0 6px 0 #1a35b0; }
.lk-gross-knopf.primaer:active { transform: translateY(5px); box-shadow: 0 1px 0 #1a35b0; }
.lk-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.lk-konfetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fallen 2s linear forwards; }

/* ── Mathe ────────────────────────────────────────────────────────── */
.m-zaehlfeld { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 420px; padding: 18px; background: var(--mathe-ton); border-radius: 26px; }
.m-ding { font-size: clamp(40px, 8vw, 56px); line-height: 1; animation: pop .35s ease both; width: 1.15em; text-align: center; }
.m-umbruch { flex-basis: 100%; height: 0; }
.m-rechnung { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3em; font-size: clamp(44px, 9vw, 76px); font-weight: 900; color: var(--navy); margin: 14px 0 4px; font-variant-numeric: tabular-nums; }
.m-rechnung .op { color: var(--blau); }
.m-loch { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.3em; border-radius: 18px; background: var(--gelb-ton); box-shadow: inset 0 0 0 4px var(--gelb); color: #c49a2a; padding: 0 .2em; }
.m-loch.ok { background: var(--gruen-ton); box-shadow: inset 0 0 0 4px var(--gruen); color: var(--gruen); animation: pop .4s ease; }
.m-vergleich { gap: .5em; }
.m-reihen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 460px; }
.m-reihen .lk-wahl { font-size: 30px; min-height: 72px; }
.m-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m-platz { display: inline-grid; place-items: center; min-width: 76px; height: 62px; padding: 0 8px; border-radius: 16px; border: 3px dashed #c9d2ea; font-size: 26px; font-weight: 900; color: var(--navy); background: #fafbff; }
.m-platz.voll { border-style: solid; border-color: var(--gruen); background: var(--gruen-ton); animation: pop .3s ease; }
.lk-wahl.gesetzt { visibility: hidden; }
.m-ordnen { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lk-auswahl.zeichen { grid-template-columns: repeat(3, 1fr); max-width: 420px; }
.lk-auswahl.zeichen .lk-wahl { font-size: 54px; }

/* ── Deutsch ──────────────────────────────────────────────────────── */
.d-bild { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 26px; background: var(--deutsch-ton); border-radius: 28px; flex-wrap: wrap; }
.d-emoji { font-size: clamp(84px, 16vw, 120px); line-height: 1.05; animation: pop .4s ease; }
.d-emoji.klein { font-size: 52px; animation: none; }
.d-wort { font-size: clamp(30px, 6vw, 46px); font-weight: 900; color: var(--navy); }
.d-wort.gross { font-size: clamp(36px, 8vw, 60px); }
.d-bild.nur-wort { padding: 26px 34px; }
.d-unter { font-size: 16px; font-weight: 800; color: var(--text-2); }
.lk-wahl .d-unter { font-size: 17px; }
.lk-wahl.ok .d-unter { color: #fff; }
.lk-auswahl.buchstaben { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .lk-auswahl.buchstaben { grid-template-columns: repeat(2, 1fr); } }
.lk-auswahl.buchstaben .lk-wahl, .lk-auswahl.d-salat .lk-wahl { background: var(--deutsch-ton); box-shadow: 0 6px 0 #f5bea8; }
.lk-auswahl.buchstaben .lk-wahl.ok { background: var(--gruen); box-shadow: 0 6px 0 #137345; }
.lk-auswahl.bilder { grid-template-columns: repeat(3, 1fr); }
.lk-auswahl.bilder .lk-wahl { min-height: 130px; }
.lk-auswahl.silben { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .lk-auswahl.silben { grid-template-columns: repeat(2, 1fr); } }
.d-klatsch { font-size: 22px; letter-spacing: -4px; line-height: 1.2; }
.lk-auswahl.silben .lk-wahl .d-unter { font-size: 30px; color: var(--navy); }
.lk-auswahl.silben .lk-wahl.ok .d-unter { color: #fff; }
.d-silbe { padding: 0 2px; border-radius: 8px; }
.d-silbe.s0 { color: var(--deutsch); }
.d-silbe.s1 { color: var(--blau); }
.d-silbe.s2 { color: var(--gruen); }
.d-strich { color: #b9c0d0; }
.d-slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.d-slot { display: inline-grid; place-items: center; width: 58px; height: 68px; border-radius: 14px; border: 3px dashed #f0b9a3; font-size: 38px; font-weight: 900; color: var(--navy); background: #fffaf7; }
.d-slot.voll { border-style: solid; border-color: var(--gruen); background: var(--gruen-ton); animation: pop .3s ease; }
.d-salat { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); max-width: 560px; }
.d-kachel { min-height: 76px; font-size: 38px; }
.d-kachel.tipp { animation: tipp 1s ease infinite; }
@media (max-width: 480px) { .d-slot { width: 44px; height: 56px; font-size: 30px; } }
.d-satz { margin: 0; font-size: clamp(26px, 4.6vw, 38px); font-weight: 900; text-align: center; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.d-luecke { display: inline-block; min-width: 4ch; padding: 0 10px; border-radius: 12px; background: var(--gelb-ton); box-shadow: inset 0 -4px 0 var(--gelb); color: #c49a2a; }
.d-luecke.ok { background: var(--gruen-ton); box-shadow: inset 0 -4px 0 var(--gruen); color: var(--gruen); }
.lk-auswahl.woerter { grid-template-columns: 1fr 1fr; max-width: 520px; }
.lk-auswahl.wortarten { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .lk-auswahl.wortarten { grid-template-columns: 1fr; } }
.lk-auswahl.wortarten .lk-wahl { font-size: 26px; min-height: 96px; }
.lk-wahl.wa-n { background: #e3eaff; box-shadow: 0 6px 0 #c3cff3; }
.lk-wahl.wa-v { background: #ffe6dc; box-shadow: 0 6px 0 #f5bea8; }
.lk-wahl.wa-a { background: #dcf5e7; box-shadow: 0 6px 0 #b0e2c6; }
.lk-wahl.wa-n.ok, .lk-wahl.wa-v.ok, .lk-wahl.wa-a.ok { background: var(--gruen); box-shadow: 0 6px 0 #137345; }

/* ── Animationen ──────────────────────────────────────────────────── */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes schweben { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes huepf { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
@keyframes tipp { 0%, 100% { box-shadow: 0 6px 0 #f5bea8, 0 0 0 0 #ffc93c; } 50% { box-shadow: 0 6px 0 #f5bea8, 0 0 0 8px #ffc93c88; } }
@keyframes fallen { to { transform: translateY(620px) rotate(540deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ══ Logik & Gehirntraining ═════════════════════════════════════════ */
/* Fach-Knöpfe: auf dem Handy 2×2 statt einer gequetschten Reihe (4 Fächer inkl. «Alles») */
@media (max-width: 520px) {
  .chips.faecher { display: grid; grid-template-columns: 1fr 1fr; }
  .chips.faecher .chip.fach { flex-direction: row; gap: 8px; min-height: 60px; padding: 0 10px; font-size: 18px; }
  .chips.faecher .chip.fach .sym { font-size: 24px; }
}

/* Simon */
.s-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.s-status { margin: 0; min-height: 1.4em; font-size: clamp(20px, 3.4vw, 26px); font-weight: 900; text-align: center; color: var(--navy); }
.s-brett { position: relative; width: min(86vw, 460px, 62vh); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 12px; background: var(--navy); border-radius: 50%; box-shadow: 0 10px 0 #0f1629, 0 18px 36px #1f2a4433; }
@media (max-width: 480px) { .s-brett { width: min(92vw, 62vh); gap: 9px; padding: 9px; } }
.s-feld { position: relative; border: 0; padding: 0; display: grid; place-items: center; transition: filter .12s ease, transform .12s ease, box-shadow .12s ease; filter: brightness(.78) saturate(.85); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.s-ol { border-radius: 100% 14px 14px 14px; }
.s-or { border-radius: 14px 100% 14px 14px; }
.s-ul { border-radius: 14px 14px 14px 100%; }
.s-ur { border-radius: 14px 14px 100% 14px; }
.s-gruen { background: #1fa855; }
.s-rot { background: #e0393f; }
.s-gelb { background: #f5b800; }
.s-blau { background: #2a62e6; }
.s-symbol { font-size: clamp(30px, 8vw, 50px); color: #ffffffd9; text-shadow: 0 2px 0 #0003; line-height: 1; pointer-events: none; }
.s-gelb .s-symbol { color: #6b4b00cc; text-shadow: 0 1px 0 #fff6; }
.s-ol .s-symbol { transform: translate(-12%, -12%); }
.s-or .s-symbol { transform: translate(12%, -12%); }
.s-ul .s-symbol { transform: translate(-12%, 12%); }
.s-ur .s-symbol { transform: translate(12%, 12%); }
.s-feld:not(:disabled):hover { filter: brightness(.9) saturate(.95); }
.s-feld:not(:disabled):active { filter: brightness(1.15); transform: scale(.98); }
.s-feld.an { filter: brightness(1.32) saturate(1.15); box-shadow: 0 0 0 4px #fff, 0 0 34px 10px #ffffffaa; z-index: 1; }
.s-feld.an .s-symbol { color: #fff; transform: scale(1.18); }
.s-gelb.an .s-symbol { color: #4a3300; }
.s-feld.zeige { outline: 6px dashed #fff; outline-offset: -14px; }
.s-feld:disabled { cursor: default; }
.s-brett.gesperrt .s-feld:not(.an) { filter: brightness(.7) saturate(.8); }
.s-feld:focus-visible { outline: 5px solid var(--gelb); outline-offset: -10px; }
.s-mitte { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px var(--navy), inset 0 -6px 0 #e6eaf4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; }
.s-zahl { font-size: clamp(28px, 7vw, 46px); font-weight: 900; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.s-mitte-text { font-size: clamp(12px, 2.4vw, 15px); font-weight: 800; color: var(--text-2); }
.s-start { border: 0; border-radius: 999px; background: var(--gruen); color: #fff; font-weight: 900; font-size: clamp(17px, 3.6vw, 22px); padding: 12px 18px; box-shadow: 0 5px 0 #137345; }
.s-start:active { transform: translateY(4px); box-shadow: 0 1px 0 #137345; }
.s-start[hidden], .s-zahl[hidden] { display: none; }
.s-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.s-pille { font-weight: 900; font-size: 17px; padding: 8px 14px; border-radius: 999px; background: var(--logik-ton); color: var(--logik-tief); }
.s-pille.rekord { background: var(--gelb-ton); color: #7a5400; }
.s-hilfe { margin: 0; max-width: 46ch; text-align: center; color: var(--text-2); font-weight: 800; font-size: 16px; }
.s-ende { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 440px); background: #fff; border-radius: 28px; padding: 22px 20px; text-align: center; box-shadow: 0 0 0 4px var(--logik-ton), 0 24px 60px #1f2a4440; z-index: 6; animation: pop .35s ease; }
.s-ende[hidden] { display: none; }
.s-ende-symbol { font-size: 64px; line-height: 1.1; }
.s-ende-titel { margin: 4px 0; font-size: clamp(22px, 4.4vw, 30px); font-weight: 900; }
.s-ende-text { margin: 0; font-weight: 800; color: var(--text-2); }
.s-ende .lk-schluss-knoepfe { margin-top: 16px; }

/* Memory */
.mem-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mem-kopf { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mem-raster { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.mem-raster.p6 { grid-template-columns: repeat(4, 1fr); max-width: 480px; }
.mem-raster.p10 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 480px) { .mem-raster.p6 { grid-template-columns: repeat(3, 1fr); } .mem-raster.p10 { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.mem-karte { position: relative; aspect-ratio: 3 / 4; border: 0; border-radius: 18px; padding: 0; background: var(--logik); box-shadow: 0 5px 0 var(--logik-tief); overflow: hidden; transition: transform .15s ease, background .2s; }
.mem-karte:active { transform: translateY(3px); }
.mem-hinten, .mem-vorne { position: absolute; inset: 0; display: grid; place-items: center; }
.mem-hinten { font-size: clamp(26px, 6vw, 38px); font-weight: 900; color: #ffffffb3; background-image: radial-gradient(#ffffff26 2px, transparent 2.5px); background-size: 14px 14px; }
.mem-vorne { font-size: clamp(34px, 8vw, 54px); background: #fff; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.3, 1.6, .5, 1); }
.mem-karte.offen { box-shadow: 0 5px 0 #d6cdf0, inset 0 0 0 4px var(--logik); }
.mem-karte.offen .mem-vorne { opacity: 1; transform: none; }
.mem-karte.weg { box-shadow: inset 0 0 0 4px var(--gruen); cursor: default; }
.mem-karte.weg .mem-vorne { opacity: 1; transform: none; background: var(--gruen-ton); }

/* Muster / Zahlenfolgen */
.lg-folge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--logik-ton); border-radius: 24px; max-width: 100%; }
.lg-glied { display: inline-grid; place-items: center; min-width: 1.4em; font-size: clamp(34px, 7vw, 52px); line-height: 1.15; animation: pop .35s ease both; }
.lg-folge.zahlen .lg-glied { font-size: clamp(26px, 5.4vw, 40px); font-weight: 900; color: var(--navy); background: #fff; border-radius: 14px; padding: 4px 12px; }
.lg-folge.zahlen .lk-eingabe { font-size: clamp(26px, 5.4vw, 40px); }
.lg-loch { width: 1.4em; height: 1.4em; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 4px var(--gelb); color: #c49a2a; font-weight: 900; font-size: clamp(28px, 6vw, 44px); animation: none; }
.lg-loch.ok { box-shadow: inset 0 0 0 4px var(--gruen); background: var(--gruen-ton); animation: pop .4s ease; }
.lk-auswahl.lg-optionen { grid-template-columns: repeat(3, 1fr); max-width: 480px; }
.lk-auswahl.lg-optionen .lk-wahl { font-size: clamp(40px, 8vw, 56px); min-height: 100px; background: var(--logik-ton); box-shadow: 0 6px 0 #d3c4f5; }
.lk-auswahl.lg-optionen .lk-wahl.ok { background: var(--gruen); box-shadow: 0 6px 0 #137345; }

/* ══ Medien · Informatik · KI ═══════════════════════════════════════ */
.spiel-raster { display: block; font-size: 13px; font-weight: 800; color: var(--text-2); margin-top: 2px; letter-spacing: .2px; }
/* Quiz */
.q-karte { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-radius: 24px; background: #f3f5fb; max-width: 640px; width: 100%; }
.spiel-feld.medien .q-karte { background: var(--medien-ton); }
.spiel-feld.informatik .q-karte { background: var(--informatik-ton); }
.spiel-feld.ki .q-karte { background: var(--ki-ton); }
.q-bild { font-size: clamp(54px, 11vw, 76px); line-height: 1; }
.q-karte .q-text { font-size: clamp(19px, 3.2vw, 24px); font-weight: 800; line-height: 1.35; flex: 1 1 220px; color: var(--navy); }
.q-karte.chat { flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; }
.q-avatar { font-size: 46px; line-height: 1; flex-shrink: 0; }
.q-blase { position: relative; background: #fff; border-radius: 20px 20px 20px 6px; padding: 12px 16px; box-shadow: 0 3px 0 #1f2a4412; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.q-wer { font-size: 13px; font-weight: 900; color: var(--ki-tief); text-transform: uppercase; letter-spacing: .5px; }
.q-blase .q-text { font-size: clamp(19px, 3.2vw, 24px); font-weight: 800; line-height: 1.35; }
.lk-auswahl.q-kat { grid-template-columns: repeat(2, 1fr); }
.lk-auswahl.q-kat.n3 { grid-template-columns: repeat(3, 1fr); }
.lk-auswahl.q-kat.n4 { grid-template-columns: repeat(4, 1fr); }
.lk-auswahl.q-kat.n5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) { .lk-auswahl.q-kat.n4, .lk-auswahl.q-kat.n5 { grid-template-columns: repeat(2, 1fr); } .lk-auswahl.q-kat.n3 { grid-template-columns: 1fr; } }
.lk-auswahl.q-kat .lk-wahl { font-size: 19px; min-height: 92px; }
.q-sym { font-size: 32px; line-height: 1; }
.q-lab { font-size: 17px; font-weight: 900; line-height: 1.2; text-align: center; }
.lk-auswahl.q-text-antw { grid-template-columns: 1fr; max-width: 640px; gap: 10px; }
.lk-auswahl.q-text-antw.zwei { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .lk-auswahl.q-text-antw.zwei { grid-template-columns: 1fr; } }
.lk-auswahl.q-text-antw .lk-wahl { font-size: clamp(17px, 2.8vw, 20px); min-height: 64px; text-align: left; align-items: flex-start; justify-content: center; padding: 12px 18px; line-height: 1.3; overflow-wrap: anywhere; }
.lk-auswahl.q-text-antw.zwei .lk-wahl { text-align: center; align-items: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(18px, 3vw, 22px); }
.lk-auswahl.q-gross { grid-template-columns: repeat(4, 1fr); }
.lk-auswahl.q-gross .lk-wahl { font-size: clamp(44px, 9vw, 60px); min-height: 104px; }
@media (max-width: 420px) { .lk-auswahl.q-gross { grid-template-columns: repeat(2, 1fr); } }
.q-erklaerung { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; width: 100%; max-width: 640px; padding: 14px 16px; border-radius: 20px; background: var(--gruen-ton); box-shadow: inset 0 0 0 3px #9fdcbc; animation: rein .3s ease; }
.q-erklaerung[hidden] { display: none; }
.q-e-sym { font-size: 28px; }
.q-e-text { flex: 1 1 260px; font-weight: 800; font-size: 17px; line-height: 1.4; color: #134a31; }
.q-weiter { min-height: 54px; margin-left: auto; }
/* Ablauf */
.a-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 680px; }
@media (max-width: 560px) { .a-reihe { grid-template-columns: repeat(2, 1fr); } }
.a-platz { position: relative; min-height: 96px; border-radius: 18px; border: 3px dashed #c9d2ea; background: #fafbff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; }
.a-platz.voll { border-style: solid; border-color: var(--gruen); background: var(--gruen-ton); animation: pop .3s ease; }
.a-nr { position: absolute; top: 6px; left: 10px; font-weight: 900; color: #9aa6c0; font-size: 15px; }
.a-sym { font-size: 34px; line-height: 1; }
.a-txt { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--navy); }
.lk-auswahl.a-karten { grid-template-columns: repeat(4, 1fr); max-width: 680px; }
@media (max-width: 560px) { .lk-auswahl.a-karten { grid-template-columns: repeat(2, 1fr); } }
.lk-auswahl.a-karten .lk-wahl { min-height: 104px; font-size: 16px; padding: 10px 8px; }
/* Roboter */
.r-gitter { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(100%, calc(var(--n) * 70px)); padding: 8px; background: var(--informatik-ton); border-radius: 18px; }
.r-zelle { aspect-ratio: 1; border-radius: 12px; border: 0; background: #fff; display: grid; place-items: center; font-size: clamp(24px, 6vw, 38px); line-height: 1; padding: 0; box-shadow: inset 0 -3px 0 #d9dcf2; }
button.r-zelle:hover { background: #f5f5ff; }
.r-zelle.start { background: #fff8db; }
.r-zelle.spur { background: #d9f3e6; }
.r-zelle.wand { background: #e9e4dc; }
.r-zelle.ziel { background: #fff3cf; }
.r-zelle.geschafft { background: var(--gruen); animation: pop .4s ease; }
.r-programm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 3px var(--informatik-ton); min-height: 64px; max-width: 100%; }
.r-programm.eingabe { width: min(100%, 560px); justify-content: flex-start; }
.r-bef { font-size: 30px; line-height: 1; }
.r-leer { color: #9aa6c0; font-weight: 800; }
.r-schleife { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 12px; background: #fff3cf; box-shadow: inset 0 0 0 3px var(--gelb); }
.r-wdh { font-weight: 900; font-size: 22px; color: #7a5400; padding: 0 4px; }
.r-tasten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: min(100%, 560px); }
.r-tasten .lk-taste { height: 64px; font-size: 28px; }
.r-tasten .r-los { font-size: 20px; }
@media (max-width: 480px) { .r-tasten { grid-template-columns: repeat(4, 1fr); } .r-tasten .weg-taste, .r-tasten .r-los { grid-column: span 2; } }
/* Geheimschrift */
.g-schluessel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.g-paar { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: 6px 8px; border-radius: 12px; background: var(--informatik-ton); font-weight: 900; }
.g-paar b { font-size: 24px; line-height: 1.1; color: var(--informatik-tief); }
.g-paar span { font-size: 18px; color: var(--navy); }
.g-code { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(30px, 7vw, 46px); font-weight: 900; letter-spacing: 6px; padding: 10px 20px; border-radius: 18px; background: #1f2a44; color: #ffd76a; }
.g-code.sym span { display: inline-grid; place-items: center; min-width: 1.2em; letter-spacing: 0; }
.g-code.klar { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 3px var(--informatik-ton); }
.g-alphabet { display: flex; flex-direction: column; gap: 2px; max-width: 100%; overflow-x: auto; padding: 6px; border-radius: 12px; background: var(--informatik-ton); }
.g-zeile { display: flex; gap: 2px; }
.g-zeile span { display: inline-grid; place-items: center; width: 22px; height: 24px; font: 800 14px ui-monospace, Menlo, monospace; background: #fff; border-radius: 5px; }
.g-zeile.unten span { background: #fff3cf; color: #7a5400; }
.lk-auswahl.g-antw { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.lk-auswahl.g-antw .lk-wahl { font-size: clamp(22px, 4.4vw, 30px); font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 2px; }
/* Parität */
.p-gitter { background: var(--informatik-ton); width: min(100%, calc(var(--n) * 62px)); }
.p-kart { background: #fff; box-shadow: inset 0 0 0 2px #c9cce8; }
.p-kart.schwarz { background: var(--navy); box-shadow: none; }
.p-kart.pruef { outline: 3px dashed #b9a8e8; outline-offset: -5px; }
.p-kart.hinweis { box-shadow: 0 0 0 4px var(--gelb); }
.p-kart.gefunden { box-shadow: 0 0 0 5px var(--gruen); animation: pop .4s ease; }
.spiel-name { flex-wrap: wrap; row-gap: 0; }
.spiel-name .spiel-raster { flex-basis: 100%; }
.q-blase .q-text { flex: none; }
.q-karte.chat .lk-vorlesen { align-self: center; }
@media (max-width: 520px) {
  .q-karte { padding: 12px 14px; gap: 10px; }
  .q-karte.chat { gap: 8px; }
  .q-avatar { font-size: 32px; }
  .q-karte .lk-vorlesen { width: 46px; height: 46px; font-size: 21px; }
  .q-bild { font-size: 48px; }
}

/* ══ SPIELANSICHT OHNE SCROLLEN ═════════════════════════════════════
   Im Spiel ist die Seite genau so hoch wie der sichtbare Bereich (dvh: Handy-Browserleisten zählen nicht mit).
   Kopf + Zurück-Leiste + Fortschritt sind fix, der Rest gehört dem Spielfeld. Was dort nicht hineinpasst,
   verkleinert der Kern (einpassen). Grosse Elemente richten sich zusätzlich nach der Feldhöhe (cqh). */
body.im-spiel { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.im-spiel .kopf { position: static; flex: none; }
body.im-spiel .fuss { display: none; }
body.im-spiel #ansicht { flex: 1; min-height: 0; }
body.im-spiel .spiel-ansicht { height: 100%; display: flex; flex-direction: column; padding: 10px 16px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
body.im-spiel .spiel-leiste { flex: none; margin-bottom: 10px; }
body.im-spiel .spiel-feld { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 14px; }
body.im-spiel .lk-kopf { flex: none; margin-bottom: 8px; }
body.im-spiel .lk-buehne { flex: 1; min-height: 0; overflow: hidden; container-type: size; }
body.im-spiel .lk-buehne.skaliert { justify-content: flex-start; }
body.im-spiel .lk-inhalt { flex: none; gap: clamp(8px, 2.6cqh, 18px); padding: 2px; }
@media (max-width: 520px) { body.im-spiel .spiel-ansicht { padding: 8px 10px 10px; } body.im-spiel .spiel-feld { padding: 10px 10px 12px; } }

/* Niedrige Fenster (Handy quer, kleine Laptops): Kopf und Leiste kompakter */
@media (max-height: 560px) {
  body.im-spiel .kopf-innen { padding: 4px 12px; }
  body.im-spiel .marke { font-size: 17px; }
  body.im-spiel .marke img { width: 30px; height: 30px; padding: 3px; border-radius: 9px; }
  body.im-spiel .pille { height: 34px; font-size: 15px; padding: 0 10px; }
  body.im-spiel .pille.knopf { min-width: 34px; font-size: 16px; }
  body.im-spiel .spiel-ansicht { padding-top: 6px; }
  body.im-spiel .spiel-leiste { margin-bottom: 6px; gap: 8px; }
  body.im-spiel .zurueck { height: 38px; min-width: 38px; padding: 0 12px; font-size: 15px; border-width: 2px; border-radius: 13px; }
  body.im-spiel .spiel-name { font-size: 17px; }
  body.im-spiel .spiel-raster { display: none; }
  body.im-spiel .spiel-feld { padding: 6px 12px 8px; border-radius: 18px; border-top-width: 5px; }
  body.im-spiel .lk-kopf { margin-bottom: 4px; }
  body.im-spiel .lk-punkt { width: 13px; height: 13px; }
  body.im-spiel .lk-sterne { font-size: 15px; padding: 3px 10px; }
}

/* Grössen, die mit der Feldhöhe mitgehen (statt fester Pixel) */
body.im-spiel .lk-titel { font-size: clamp(18px, min(5.4vw, 6cqh), 30px); }
body.im-spiel .lk-wahl { min-height: clamp(46px, 15cqh, 84px); font-size: clamp(20px, min(5vw, 8cqh), 40px); }
body.im-spiel .lk-taste { height: clamp(40px, 12cqh, 72px); font-size: clamp(20px, 6cqh, 32px); }
body.im-spiel .m-rechnung { font-size: clamp(30px, min(9vw, 14cqh), 76px); margin: 0; }
body.im-spiel .d-emoji { font-size: clamp(54px, min(16vw, 20cqh), 120px); }
body.im-spiel .m-ding { font-size: clamp(28px, min(8vw, 9cqh), 56px); }
body.im-spiel .q-bild { font-size: clamp(38px, min(11vw, 13cqh), 76px); }
body.im-spiel .lk-schluss-symbol { font-size: clamp(44px, 16cqh, 84px); }
body.im-spiel .lk-auswahl.q-kat .lk-wahl { min-height: clamp(52px, 17cqh, 92px); }
body.im-spiel .lk-auswahl.lg-optionen .lk-wahl { min-height: clamp(56px, 18cqh, 100px); }
body.im-spiel .lk-auswahl.bilder .lk-wahl { min-height: clamp(70px, 22cqh, 130px); }

/* Querformat / flaches Feld: Frage links, Antworten rechts – statt alles untereinander zu quetschen */
@container (min-aspect-ratio: 13/10) and (max-height: 470px) {
  .lk-inhalt:not(.eigen) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; align-items: center; justify-items: center; column-gap: 18px; row-gap: 8px; }
  .lk-inhalt:not(.eigen) > * { grid-column: 1; max-width: 100%; }
  .lk-inhalt:not(.eigen) > .lk-titel, .lk-inhalt:not(.eigen) > .lk-schluss { grid-column: 1 / -1; }
  .lk-inhalt:not(.eigen) > :is(.lk-auswahl, .lk-zahlfeld, .r-tasten, .m-reihen) { grid-column: 2; grid-row: 2 / span 6; width: 100%; }
  .lk-inhalt:not(.eigen) > .q-erklaerung { grid-column: 1; }
  .lk-inhalt:not(.eigen) > .r-gitter { grid-column: 1; grid-row: 2 / span 6; width: min(46cqw, calc(100cqh - 34px)); min-width: 0; }
  .lk-inhalt:not(.eigen) > .r-programm.eingabe { grid-column: 2; grid-row: 2; width: 100%; }
  .lk-inhalt:not(.eigen) > .r-tasten { grid-row: 3 / span 5; }
  .lk-inhalt:not(.eigen) > .p-gitter { grid-row: 2 / span 6; width: min(46cqw, calc(100cqh - 34px)); }
  .lk-hinweis { font-size: 14px; }
  .lk-auswahl { gap: 8px; }
  .lk-block { gap: 8px; }
  .lk-zahlfeld { gap: 0; }
}

/* Simon: Brett richtet sich nach Höhe UND Breite des Feldes */
body.im-spiel .s-brett { width: min(100cqw, calc(100cqh - 120px), 560px); min-width: 180px; }
body.im-spiel .s-wrap { gap: clamp(6px, 2cqh, 14px); }
@container (min-aspect-ratio: 5/4) and (max-height: 520px) {
  .s-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brett status" "brett info" "brett hilfe"; align-items: center; justify-items: center; column-gap: 20px; }
  .s-wrap .s-brett { grid-area: brett; width: min(60cqw, calc(100cqh - 6px)); }
  .s-wrap .s-status { grid-area: status; align-self: end; }
  .s-wrap .s-info { grid-area: info; }
  .s-wrap .s-hilfe { grid-area: hilfe; align-self: start; font-size: 14px; }
}

/* Memory: Kartengrösse rechnet das Spiel selbst aus (--kb), Emoji skaliert mit */
body.im-spiel .mem-raster { width: auto; max-width: none; justify-content: center; gap: 8px; }
body.im-spiel .mem-wrap { gap: 10px; }
body.im-spiel .mem-karte { border-radius: calc(var(--kb, 80px) * .16); box-shadow: 0 4px 0 var(--logik-tief); }
body.im-spiel .mem-vorne { font-size: calc(var(--kb, 80px) * .55); }
body.im-spiel .mem-hinten { font-size: calc(var(--kb, 80px) * .38); background-size: calc(var(--kb, 80px) * .16) calc(var(--kb, 80px) * .16); }
body.im-spiel .mem-kopf .s-pille { font-size: 15px; padding: 5px 12px; }

/* Raster-Spiele (Roboter, Parität): Gitter passt in Breite und Höhe */
body.im-spiel .r-gitter { width: min(100%, calc(var(--n) * 70px), calc(100cqh - 150px)); min-width: 170px; }
body.im-spiel .p-gitter { width: min(100%, calc(var(--n) * 62px), calc(100cqh - 70px)); }
body.im-spiel .r-zelle { font-size: clamp(18px, 5cqh, 38px); }
/* Geheimschrift in niedrigen Feldern: kompaktere Code-Tabelle, damit nicht stark verkleinert werden muss */
@container (max-height: 470px) {
  .g-schluessel { gap: 4px; }
  .g-paar { min-width: 34px; padding: 2px 5px; border-radius: 9px; flex-direction: row; gap: 4px; }
  .g-paar b { font-size: 18px; }
  .g-paar span { font-size: 15px; }
  .g-code { font-size: 28px; padding: 4px 12px; letter-spacing: 3px; }
  .g-zeile span { width: 17px; height: 19px; font-size: 12px; }
  .q-karte { padding: 8px 12px; }
  .q-karte .q-text, .q-blase .q-text { font-size: 18px; }
}
/* Querformat: Erklärung als Leiste über dem unteren Feldrand (die Frage ist beantwortet) – statt alles zu verkleinern */
@container (min-aspect-ratio: 13/10) and (max-height: 470px) {
  .lk-inhalt:not(.eigen) > .q-erklaerung { position: absolute; left: 6px; right: 6px; bottom: 6px; width: auto; max-width: none; z-index: 4; padding: 8px 12px; gap: 6px 12px; box-shadow: inset 0 0 0 3px #9fdcbc, 0 8px 24px #1f2a4433; }
  .q-erklaerung .q-e-text { font-size: 15px; }
  .q-erklaerung .q-weiter { min-height: 44px; }
}