/* DE: „Wortspeicher zu Themen" (ADR 0085): ein aufgeloester Wort-Satz in Wortart-Spalten. Ein Themen-Filter
   (Chips), dann pro Wortart eine Spalte mit Wortkarten (Bild/Artikel bzw. Klassen-Badge/Lemma/Bedeutung/Audio).
   Sichtbarer Fokus, kein Farb-nur-Zustand (der aktive Chip traegt Text-/Rahmen-Cue + aria-current), ruhiger
   Hover, prefers-reduced-motion respektiert (WCAG 2.2 AA). Gebaerdensprache: eine flache Karten-Grid statt Spalten.
   EN: „Word store by theme" (ADR 0085): a resolved word-set in part-of-speech columns. A theme filter (chips),
   then one column per part of speech with word cards (picture/article or class badge/lemma/meaning/audio).
   Visible focus, no colour-only state (the active chip carries a text/border cue + aria-current), calm hover,
   prefers-reduced-motion respected (WCAG 2.2 AA). Sign language: one flat card grid instead of columns. */

.wortspeicher{margin-block-start:var(--sp-lg)}
.wortspeicher__head{margin-block-end:var(--sp-md)}
.wortspeicher__count{color:var(--text-muted);font-size:var(--step-0);margin-block-start:var(--sp-xs)}
.wortspeicher__share{margin-block-start:var(--sp-2xs)}
.wortspeicher__share-link{color:var(--link);font-size:var(--step--1);font-weight:600}
.wortspeicher__share-link:hover{text-decoration:underline}

/* Theme picker — a wrap of chips; the active one is not colour-only (font-weight + inset ring + aria-current). */
.wortspeicher__themes,.wortspeicher__phenomena{display:flex;flex-wrap:wrap;gap:var(--sp-xs);margin-block-end:var(--sp-lg)}
/* FRESCH-Strategie-Pills leicht abgesetzt vom Rechtschreib-Phänomen (Wiedererkennung; der Text trägt die Bedeutung). */
.wortspeicher__theme--strategy{border-style:dashed}
.wortspeicher__theme{display:inline-block;padding:var(--sp-2xs) var(--sp-sm);border:1px solid var(--border);
  border-radius:var(--radius-pill,999px);background:var(--surface);color:var(--link);
  text-decoration:none;font-size:var(--step--1)}
.wortspeicher__theme:hover{background:var(--surface-2)}
.wortspeicher__theme:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wortspeicher__theme.is-active{background:var(--surface-2);color:var(--text);font-weight:700;
  border-color:var(--text)}

/* The columns sit side by side, each independently tall (a long Nomen column must NOT push the others down
   into a second grid row — that left a big gap). A flex row keeps their heights independent; if too many
   columns for the width, the row scrolls horizontally rather than wrapping mid-set. On a narrow screen they
   wrap to full width and stack, one part of speech under the next. */
.wortspeicher__columns{display:flex;gap:var(--sp-lg);align-items:flex-start;overflow-x:auto;
  padding-block-end:var(--sp-sm)}
.wortspeicher__column{flex:1 0 13rem;min-inline-size:13rem}
@media (max-width:40rem){
  .wortspeicher__columns{flex-wrap:wrap;overflow-x:visible}
  .wortspeicher__column{flex-basis:100%}
}
.wortspeicher__column-title{font-size:var(--step-1);margin-block-end:var(--sp-sm);
  padding-block-end:var(--sp-2xs);border-block-end:2px solid var(--border)}

.wortspeicher__grid{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-sm)}
/* The sign-language flat set is a responsive grid, not a single stack. */
.wortspeicher__grid--flat{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:var(--sp-md)}

/* One word card. */
.wortspeicher-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);overflow:hidden}
.wortspeicher-card__link{display:flex;align-items:center;gap:var(--sp-sm);padding:var(--sp-sm);
  text-decoration:none;color:var(--text);transition:box-shadow .15s ease}
.wortspeicher-card__link:hover{background:var(--surface-2)}
.wortspeicher-card__link:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.wortspeicher-card__thumb{flex:0 0 auto}
.wortspeicher-card__thumb img{inline-size:3.25rem;block-size:3.25rem;object-fit:contain;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:2px}
.wortspeicher-card__lemma{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  text-wrap:balance}
.wortspeicher-card__article{color:var(--text-muted);font-weight:400}
.wortspeicher-card__gloss{margin:0;padding:0 var(--sp-sm) var(--sp-xs);color:var(--text-muted);
  font-size:var(--step--1)}
.wortspeicher-card__audio{inline-size:calc(100% - 2*var(--sp-sm));margin:0 var(--sp-sm) var(--sp-sm);
  block-size:2rem}
/* ✦ AI-unreviewed signal: never colour-only — it carries the „KI · ungeprüft" text. */
.wortspeicher-card__ai{display:inline-flex;align-items:center;gap:.25em;margin:0 var(--sp-sm) var(--sp-xs);
  color:var(--text-muted);font-size:var(--step--2)}

/* Bilingual switch (S4): a no-JS select+submit row. */
.wortspeicher__l2-switch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-sm);
  margin-block-end:var(--sp-lg)}
.wortspeicher__l2-switch label{font-weight:600}
.wortspeicher__l2-switch select{padding:var(--sp-2xs) var(--sp-xs);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.wortspeicher__l2-switch select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* The second-language line on a card: a quiet second row in its own script/direction; an honest gap otherwise. */
.wortspeicher-card__l2{margin:0 var(--sp-sm) var(--sp-xs);color:var(--text-muted);font-size:var(--step--1);
  padding-inline-start:var(--sp-xs);border-inline-start:2px solid var(--border)}
.wortspeicher-card__l2-gap{opacity:.7}

.wortspeicher__color-toggle{margin-block-end:var(--sp-md)}
.wortspeicher__color-toggle a{color:var(--link);font-size:var(--step--1)}

/* S8 — opt-in part-of-speech colour code. Colours the column TITLE only (text + its underline); the title TEXT
   always names the part of speech, so nothing hangs on colour (WCAG). Traditional German primary-school
   convention: Nomen blau · Verben rot · Adjektive grün. The three values are TOKENS in tokens.css, which is
   where their light/dark variants live — they used to be written out four times each here, which is how they
   stayed outside the contrast guard. CSP-safe: a class, never an inline style. */
.pos-color-traditional-noun{color:var(--pos-traditional-noun);border-block-end-color:var(--pos-traditional-noun)}
.pos-color-traditional-verb{color:var(--pos-traditional-verb);border-block-end-color:var(--pos-traditional-verb)}
.pos-color-traditional-adjective{color:var(--pos-traditional-adjective);
  border-block-end-color:var(--pos-traditional-adjective)}

.wortspeicher__empty{margin-block-start:var(--sp-lg);color:var(--text-muted);font-size:var(--step-1)}

@media (prefers-reduced-motion:reduce){
  .wortspeicher-card__link{transition:none}
}

/* DE: Der Startzustand und die eingeklappten Filter (Design-Prüfung 2026-08-20). Vorher standen 69 Filter-Chips
       VOR dem Inhalt — auf dem Handy erschien das erste Wort erst nach zwei Bildschirmhöhen, und an der Wand
       nahm die Filterwolke die halbe Fläche. Jetzt: entweder die Frage (groß, wenige Ziele) oder die Wörter,
       mit dem aktiven Filter als schmale Zeile darüber.
   EN: The start state and the folded filters (design review 2026-08-20). 69 filter chips used to sit BEFORE the
       content — on a phone the first word appeared two screens down, and on the wall the chip cloud took half
       the surface. Now: either the question (large, few targets) or the words, with the active filter as a thin
       line above them. */
.wortspeicher__start{margin:var(--sp-lg) 0}
.wortspeicher__start-title{font-size:var(--step-2);margin:0 0 var(--sp-md)}
/* Große Ziele: das hier wird an der Wand angetippt und aus der letzten Reihe gelesen. */
.wortspeicher__start-themes{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.wortspeicher__theme--start{font-size:var(--step-0);padding:var(--sp-sm) var(--sp-lg)}
.wortspeicher__start-all{margin-top:var(--sp-lg)}

.wortspeicher__active{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-sm);margin:0 0 var(--sp-sm)}
.wortspeicher__active-label{color:var(--text-muted);font-size:var(--step--1)}
.wortspeicher__active-chip{display:inline-block;padding:var(--sp-2xs) var(--sp-sm);border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);text-decoration:none;
  font-size:var(--step--1);font-weight:600}
.wortspeicher__active-chip:hover{background:var(--surface)}
.wortspeicher__active-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.wortspeicher__filters{margin:0 0 var(--sp-md)}
.wortspeicher__filters-summary{cursor:pointer;color:var(--link);font-size:var(--step--1);padding:var(--sp-2xs) 0}
.wortspeicher__filters-summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Jede Gruppe sagt, WONACH sie filtert — vorher begannen beide nur mit „Alle" und waren nicht zu unterscheiden. */
.wortspeicher__filter-title{font-size:var(--step--1);color:var(--text-muted);margin:var(--sp-sm) 0 var(--sp-2xs);
  font-weight:700}