/* Seite /soundeffekte (06.11.2026): Karten mit Tönen zum Anhören. Nutzt die Farben aus style.css. */
.ton-hinweis { margin-top: 1.25rem; color: var(--text-gedaempft); max-width: 46rem; }
.ton-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.ton-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-sm); padding: 1.1rem 1.1rem 1.2rem; }
.ton-karte h3 { margin: 0 0 .8rem; font-size: 1.1rem; font-stretch: var(--breit); }
.ton-karte h3 span { color: var(--text-gedaempft); font-weight: 400; font-stretch: var(--schmal); }
.ton-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.ton { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .4rem .85rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ton:hover { border-color: var(--farbe-marke); }
.ton:focus-visible { outline: 2px solid var(--farbe-marke); outline-offset: 2px; }
.ton-play { font-size: .7rem; color: var(--farbe-marke); }
.ton.laeuft { background: var(--farbe-marke); border-color: var(--farbe-marke); color: var(--weiss); }
.ton.laeuft .ton-play { color: var(--weiss); }
@media (prefers-reduced-motion: reduce) { .ton { transition: none; } }