/* Nur durch JS vorbereitete Inhalte blenden ein; ohne JS bleibt alles sichtbar. */
.motion-toggle {
  justify-self: start; width: fit-content; min-height: 2.75rem; padding: .5rem .75rem;
  border: 1px solid currentColor; border-radius: .4375rem; background: transparent;
  color: inherit; font: inherit; font-size: .875rem; cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: var(--green); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) [data-motion='ready'] {
    opacity: 0; transform: translateY(24px);
  }
  .button, .menue-schalter, .motion-toggle {
    transition: transform 160ms ease-out, background-color 160ms ease-out;
  }
  .button:active, .menue-schalter:active, .motion-toggle:active { transform: translateY(1px); }
  .service-nav > a { transition: background-color 180ms ease-out, color 180ms ease-out; }
  .service-nav > a:active { transform: translateY(1px); }
  @media (max-width: 40rem) {
    .menue-aktiv .menue-schalter[aria-expanded='true'] + nav {
      animation: menue-erscheint 180ms ease-out;
    }
  }
}
@keyframes menue-erscheint {
  from { opacity: .55; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
:is(.motion-paused, .motion-away) :is(.biene, .wolke, .blumen, .service-next-arrow) {
  animation-play-state: paused !important;
}
.motion-paused :is(.button, .menue-schalter, .motion-toggle, .service-nav > a) { transition: none; }
.motion-paused .menue-aktiv nav,
.motion-paused .menue-schalter + nav { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .button, .menue-schalter, .motion-toggle, .service-nav > a { transition: none; }
}
@media print {
  [data-motion] { opacity: 1 !important; transform: none !important; }
  .motion-toggle { display: none; }
  .biene, .wolke, .blumen, .service-next-arrow { animation: none !important; }
}