/* Kopie aus Bibliothek vorlage/module/farbwelt-wahl/farbwelt-wahl.css, Stand 02.11.2026 (unverändert bis auf diese Zeile) */
/* farbwelt-wahl – Plättchen-Raster: links die helle, rechts die dunkle Hälfte jedes Paars; gewählt = Rahmen in Akzentfarbe + Häkchen */
@layer module {
  .farbwelt-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3); }
  @media (min-width: 768px) { .farbwelt-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .farbwelt-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .farbwelt-plaettchen {
    display: grid; align-content: start; justify-items: start; gap: var(--a2);
    min-block-size: var(--tipp); padding: var(--a2) var(--a2) var(--a3);
    border: 2px solid var(--trenner); border-radius: var(--r-innen);
    background: var(--hg-karte); color: var(--text); text-align: start;
    transition: border-color var(--dauer) var(--kurve);
  }
  .farbwelt-plaettchen[aria-pressed="true"] { border-color: var(--akzent); }
  .farbwelt-plaettchen:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

  .farbwelt-vorschau {
    display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; block-size: 56px;
    border-radius: max(4px, calc(var(--r-innen) - var(--a2))); overflow: hidden; border: 1px solid var(--trenner);
  }
  .farbwelt-vorschau > span { display: grid; place-items: center; background: var(--v-hg, var(--fuellung)); }
  .farbwelt-vorschau > span::after { content: ""; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--v-akzent, var(--text-3)); }

  .farbwelt-name { font-size: var(--fs-klein); font-weight: 600; }
  .farbwelt-plaettchen[aria-pressed="true"] .farbwelt-name::after { content: " ✓" / ""; color: var(--akzent-text); }
  .farbwelt-kategorie {
    padding: 2px var(--a2); border-radius: 999px;
    font-size: var(--fs-fussnote); background: var(--akzent-weich); color: var(--text);
  }
}