/* DE: Das Paare-Spiel (#1077). Die Karten sind Knöpfe — groß genug für Kinderhände und für grobe Motorik
       (WCAG 2.2 AA: Zielgröße), kein Drag-and-drop. Verdeckt wird erst, wenn JavaScript da ist
       (`.memory-board--playing`): ohne JS liegen die Karten offen und das Brett bleibt eine brauchbare
       Zuordnungsübung statt einer Reihe leerer Kacheln.
       Der Gefunden-Zustand ist NICHT nur Farbe — der Rahmen wird dicker und der Status-Text sagt es an. */
/* Feste Zeilenhöhe, und jede Karte füllt ihre Zelle: verdeckte Karten müssen ALLE GLEICH aussehen. Sonst
   verrät die Kartengröße den Inhalt — `visibility: hidden` verbirgt den Text, reserviert aber seinen Platz, und
   eine lange Bedeutung zog ihre Karte in die Höhe. Beide Karten eines Paares waren so an der Form zu erkennen
   und das Spiel löste sich durchs Hinsehen. */
.memory-board { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-auto-rows: 10rem; }
.memory-cell { min-width: 0; }

.memory-card { width: 100%; height: 100%; overflow: hidden; display: grid; gap: .4rem; place-items: center;
  padding: var(--sp-sm); border: 2px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: inherit; cursor: pointer; font: inherit; text-align: center; }
.memory-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.memory-card__image { max-width: 100%; height: auto; max-height: 6rem; object-fit: contain; }
/* Der aufgedeckte Text bleibt IN der Karte — er darf sie nicht wachsen lassen (siehe oben) und wird bei
   Bedarf scrollbar, statt abgeschnitten zu werden: ein halbes Wort wäre eine unlösbare Aufgabe. */
.memory-card__text { font-size: var(--step-0); overflow-wrap: anywhere; max-height: 100%; overflow-y: auto; }

/* Erst mit JavaScript verdeckt: der Inhalt bleibt im DOM (Screenreader-Nutzung folgt dem sichtbaren Zustand
   über aria-pressed), ist aber optisch verborgen, bis die Karte aufgedeckt wird. */
.memory-board--playing .memory-card > * { visibility: hidden; }
.memory-board--playing .memory-card--open > *,
.memory-board--playing .memory-card--found > * { visibility: visible; }
.memory-board--playing .memory-card { background: var(--accent-surface); }
.memory-board--playing .memory-card--open { background: var(--surface); }

.memory-card--found { border-width: 4px; border-color: var(--accent); cursor: default; }
.memory-status { font-weight: 600; min-height: 1.5em; }
.memory-empty, .memory-intro { color: var(--text-muted); max-width: 60ch; }
/* Der Satz und „Andere Wörter" stehen in einer Zeile, brechen aber auf schmalen Schirmen umeinander. */
.memory-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-sm); max-width: none; }
.memory-intro p { margin: 0; }

/* DE: Die Einstellungen (Owner 2026-08-20). Sie liegen in einer Klappe, damit das Brett sofort dasteht — wie
       beim Wortspeicher, damit beide Flächen gleich zu bedienen sind. Die Kästchen sind großzügig gesetzt: das
       hier bedient auch mal ein Kind am Smartboard.
   EN: The settings (owner 2026-08-20). They live in a fold so the board is there at once — like the Wortspeicher,
       so both surfaces work the same way. The checkboxes are generously spaced: a child at the smartboard may
       well be the one operating this. */
.memory-settings{margin:0 0 var(--sp-md)}
.memory-settings__summary{cursor:pointer;color:var(--link);font-size:var(--step--1);padding:var(--sp-2xs) 0}
.memory-settings__summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.memory-settings__form{display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:flex-end;
  padding:var(--sp-sm) 0}
.memory-settings__group{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-sm);
  align-items:center}
.memory-settings__group legend{font-weight:700;font-size:var(--step--1);margin-bottom:var(--sp-2xs)}
.memory-settings__option{display:inline-flex;align-items:center;gap:.35rem}
.memory-settings__note{flex-basis:100%;margin:var(--sp-2xs) 0 0;color:var(--text-muted);font-size:var(--step--1)}

/* Die Tonkarte: der Abspieler darf die Karte nicht sprengen (alle Karten müssen gleich groß bleiben). */
.memory-card__audio{max-width:100%;height:2rem}