feat: add prefers-reduced-motion

assets/sass/anchorlink.scss

@@ -57,6 +57,10 @@
     background-color 0.3s ease,
     opacity 0.3s ease;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &:hover,
   &:focus {
     background-color: var(--bg-neutral);
@@ -89,6 +93,10 @@
   margin: 1rem;
   text-wrap: balance;
   z-index: 22;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 .a-snackbar--show {

assets/sass/button.scss

@@ -36,6 +36,10 @@ button {
     display: block;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &__internal {
     border: none;
   }

assets/sass/contentNavigation.scss

@@ -153,6 +153,10 @@
       display: none;
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     &--open {
       transform: translateY(0);
     }
@@ -183,6 +187,10 @@
 
       * {
         transition: opacity 0.3s ease-in-out;
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 

assets/sass/dropdown.scss

@@ -47,6 +47,10 @@
       & > :not(.a-icon) {
         text-decoration: underline;
       }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
@@ -87,6 +91,10 @@
         background 0.2s,
         color 0.2s;
 
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       &:hover,
       &:focus {
         color: var(--link-hovered);
@@ -112,6 +120,10 @@
 
   .o-dropdown__icon .a-icon {
     transition: transform 0.2s;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &__menu {
@@ -132,6 +144,10 @@
     max-height: 20rem;
     overflow-y: auto;
 
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+
     &--above {
       bottom: anchor(top);
       animation-name: dropdown-open-above;

assets/sass/expander.scss

@@ -15,6 +15,10 @@
     padding: 0.6rem;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &:hover,
   &:focus {
     .o-expander__title-text {
@@ -38,6 +42,10 @@
     @media print {
       display: none;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &-title {

assets/sass/header.scss

@@ -78,6 +78,10 @@
   @media print {
     display: none;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 #overlay.overlay--show {

assets/sass/interactiveMap.scss

@@ -34,6 +34,10 @@
       fill: var(--link-default) !important;
       transition: all 0.2s ease;
       cursor: pointer;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover path,
@@ -48,6 +52,10 @@
       fill: var(--bg-neutral) !important;
       transition: all 0.2s ease;
       cursor: not-allowed;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
@@ -73,6 +81,10 @@
     }
 
     @include focus-indicator(0.2rem);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &__legend {

assets/sass/navigation.scss

@@ -178,6 +178,10 @@ menu > li > menu {
     transform: translateX(100%);
     transition: transform 0.3s ease-in-out;
 
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     > menu {
       margin-top: 4rem;
       padding-bottom: 1rem;
@@ -248,6 +252,10 @@ menu > li > menu {
   height: fit-content;
   line-height: normal;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &:hover {
     color: var(--link-hovered);
   }

assets/sass/search.scss

@@ -115,6 +115,10 @@ pagefind-modal-trigger {
   transition:
     background 0.2s,
     color 0.2s !important;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 :is(

assets/sass/styles.scss

@@ -4,6 +4,12 @@ html {
   scroll-behavior: smooth;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
 body {
   color: var(--color-body);
   background-color: var(--bg-neutral);
@@ -67,6 +73,10 @@ a,
 
   @include focus-indicator(0.2rem);
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   @media print {
     text-decoration: none;
     color: var(--bs-body-color);

assets/sass/teamMember.scss

@@ -18,6 +18,10 @@
   border-radius: var(--border-radius-m);
   transition: transform 0.2s ease;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &__image {
     width: 8rem;
     height: 8rem;

assets/sass/teaser.scss

@@ -80,6 +80,10 @@
     transition:
       background 0.2s,
       color 0.2s;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }