/* DE: A–Z-Wortindex (B5a): Buchstaben-Navigation + alphabetische Wortliste (mehrspaltig). Sichtbarer Fokus,
   aktiver Buchstabe nicht nur über Farbe markiert (WCAG 2.2 AA).
   EN: A–Z word index (B5a): letter navigation + alphabetical word list (multi-column). Visible focus, the active
   letter is not marked by colour alone (WCAG 2.2 AA). */

.word-index{margin-block-start:var(--sp-lg)}
.word-index__head{margin-block-end:var(--sp-md)}

.word-index__az{display:flex;flex-wrap:wrap;gap:.3rem;margin-block-end:var(--sp-lg)}
.word-index__letter{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.2rem;
  padding:.3rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;
  color:var(--link);font-weight:600;font-variant-numeric:tabular-nums}
.word-index__letter:hover{background:var(--surface-2)}
.word-index__letter:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.word-index__letter--active{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}

.word-index__bucket-heading{font-size:var(--step-2);margin-block:0 var(--sp-sm)}
.word-index__list{list-style:none;padding:0;margin:0;
  columns:14rem;column-gap:var(--sp-xl);line-height:1.9}
.word-index__list li{break-inside:avoid}
.word-index__list a{text-decoration:none;color:var(--text)}
.word-index__list a:hover{color:var(--brand-strong);text-decoration:underline}

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

/* Umschalter Wörter ⇄ Wortformen — nicht color-only (aktiver Tab trägt aria-current + fetten, invertierten Zustand). */
.word-index__modes{display:flex;gap:.4rem;margin-block-start:var(--sp-sm)}
.word-index__mode{text-decoration:none;color:var(--link);font-weight:600;padding:.25rem .7rem;
  border:1px solid var(--border);border-radius:var(--radius-pill)}
.word-index__mode:hover{background:var(--surface-2)}
.word-index__mode:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.word-index__mode--active{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}

/* Formen-Modus: „<Form> — Form von <Grundwort>" — die Herkunftszeile gedämpft, damit die Form führt. */
.word-index__form-of{color:var(--text-muted);font-size:var(--step--1)}
.word-index__form-of::before{content:"— ";color:var(--text-muted)}