.pause-seite { padding-block: var(--section-y-eng); display: grid; gap: var(--gap-3); justify-content: start; }
.pause-feld {
  display: grid;
  grid-template-columns: repeat(4, 72px);
  gap: 10px;
}
@media (max-width: 420px) {
  .pause-feld { grid-template-columns: repeat(3, 1fr); }
}
.pause-karte {
  width: 72px; height: 72px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--flaeche); display: grid; place-items: center; font: inherit;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.pause-karte[aria-pressed="true"] { background: var(--hellcyan); }
.pause-karte[data-matched="true"] { background: var(--canvas-3); box-shadow: none; cursor: default; }
.pause-karte .form { width: 34px; height: 34px; visibility: hidden; }
.pause-karte[aria-pressed="true"] .form, .pause-karte[data-matched="true"] .form { visibility: visible; }

.form--kreis { border-radius: 50%; background: var(--cta); }
.form--quadrat { background: var(--teal); }
.form--diamant { background: var(--accent); transform: rotate(45deg); }
.form--dreieck { width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 30px solid var(--ink); background: none; }
.form--ring { border-radius: 50%; border: 8px solid var(--muted); background: none; }
.form--pille { border-radius: 999px; background: var(--ink-2); height: 20px; margin-top: 7px; }

@media (prefers-reduced-motion: reduce) { .pause-karte { transition: none; } }