/* wwd-bewegung.css: Knopf «Bewegung anhalten» (gehört zu js/wwd-bewegung.js, WinWebDesign)
   Nimmt Farbe und Schrift der Umgebung an (currentColor), passt so auf helle und dunkle Flächen.
   Tappfläche mindestens 44 × 44 px. Fokusrahmen: die Regel der Seite gewinnt, sonst der Rückfall unten. */
.wwd-bewegung-knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; min-width: 44px; margin-top: 1.2rem;
  padding: .45rem 1.05rem .45rem .85rem;
  border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; font-size: .88rem; line-height: 1.2; letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .wwd-bewegung-knopf { border-color: color-mix(in srgb, currentColor 48%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); }
  .wwd-bewegung-knopf:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
}
.wwd-bewegung-knopf svg { width: 14px; height: 14px; flex: 0 0 auto; fill: currentColor; }
.wwd-bewegung-knopf .wb-play { display: none; }
.wwd-bewegung-knopf[aria-pressed="true"] .wb-pause { display: none; }
.wwd-bewegung-knopf[aria-pressed="true"] .wb-play { display: inline; }
:where(.wwd-bewegung-knopf):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.wwd-bewegung-knopf:focus-visible { border-radius: 999px; }   /* Form bleibt, auch wenn die Seite Fokus-Ecken setzt */
@media print { .wwd-bewegung-knopf { display: none; } }