hr-design-system-handlebars 1.11.12 → 1.12.0

package/dist/assets/index.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -25,6 +25,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -35,6 +36,7 @@ html {
      tab-size: 4; /* 3 */
   font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
 }
 
 /*
@@ -421,7 +423,7 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .active\:scale-95 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -431,7 +433,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-link-clusterTeaser, .ds-link-clusterTeaser:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow, .shadow-inner, .shadow-md, .shadow-xl, .before\:shadow-stage::before {
+.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-md, .shadow-xl, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -557,7 +559,8 @@ video {
     .headline-barrier:after {
         border-bottom: 1px solid;
         content: '';
-        padding-top: 0.875rem}
+        padding-top: 0.875rem;
+    }
 @media (min-width: 768px) {
 
   .headline-barrier:before,
@@ -596,7 +599,7 @@ video {
     }
 /* CONTENT NAV ACCENTED GROUP MIXED*/
 .group-accented .autoSuggest .mixed-input {
-        border-color: transparent!important;
+        border-color: transparent !important;
     }
 .group-accented .autoSuggest .mixed-input {
         height: 32px;
@@ -660,9 +663,6 @@ video {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.ds-link {
-  display: block;
-}
 .ds-link:focus {
   --tw-shadow: 0 0 0 0.25rem;
   --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
@@ -679,30 +679,12 @@ video {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.ds-link-clusterTeaser {
-  display: block;
-  --tw-text-opacity: 1;
-  color: rgba(96, 96, 96, var(--tw-text-opacity));
-}
-.ds-link-clusterTeaser:focus {
-  --tw-shadow: 0 0 0 0.25rem;
-  --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-  --tw-shadow-color: var(--color-focus-state);
-  --tw-shadow: var(--tw-shadow-colored);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.ds-link-clusterTeaser:focus:not(:focus-visible) {
+.ds-link.ds-teaser-focus:focus {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.ds-link-inset {
-  display: block;
-}
 .ds-link-inset:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -730,7 +712,7 @@ video {
   content: var(--tw-content);
 }
 .ds-teaser-focus:focus::before,
-    .ds-teaser-focus:focus + .ds-cta span {
+    .ds-teaser-focus:focus + .ds-cta > * {
   --tw-shadow: 0 0 0 0.25rem;
   --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -738,7 +720,7 @@ video {
   --tw-shadow-color: var(--color-focus-state);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.ds-teaser-focus:focus + .ds-cta span {
+.ds-teaser-focus:focus + .ds-cta > * {
   background-color: #ffffff;
   background-color: var(--color-button-inverted);
   color: #006dc1;
@@ -746,13 +728,13 @@ video {
   border-style: none;
 }
 .ds-teaser-focus:focus:not(:focus-visible)::before,
-    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
+    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta > * {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
+.ds-teaser-focus:focus:not(:focus-visible) + .ds-cta > * {
   background-color: transparent;
   color: #ffffff;
   color: var(--color-button-inverted);
@@ -972,6 +954,11 @@ video {
     display: block;
   }
 }
+/* ---------------------------- BUTTON ------------------------------ */
+.ds-button-label + .ds-button-icon,
+.ds-button-icon + .ds-button-label {
+  margin-left: 0.5rem;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -992,6 +979,9 @@ video {
 .invisible {
   visibility: hidden;
 }
+.\!static {
+  position: static !important;
+}
 .static {
   position: static;
 }
@@ -1035,6 +1025,18 @@ video {
 .right-auto {
   right: auto;
 }
+[dir="ltr"] .start-1 {
+  left: 0.25rem;
+}
+[dir="rtl"] .start-1 {
+  right: 0.25rem;
+}
+[dir="ltr"] .start-8 {
+  left: 2rem;
+}
+[dir="rtl"] .start-8 {
+  right: 2rem;
+}
 .top-0 {
   top: 0px;
 }
@@ -1095,8 +1097,11 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.m-1\.5 {
-  margin: 0.375rem;
+.m-2 {
+  margin: 0.5rem;
+}
+.m-4 {
+  margin: 1rem;
 }
 .mx-0 {
   margin-left: 0px;
@@ -1126,10 +1131,6 @@ video {
   margin-left: 1px;
   margin-right: 1px;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1262,6 +1263,12 @@ video {
 .box-border {
   box-sizing: border-box;
 }
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block {
   display: block;
 }
@@ -1601,12 +1608,6 @@ video {
 .justify-around {
   justify-content: space-around;
 }
-.gap-1 {
-  gap: 0.25rem;
-}
-.gap-1\.5 {
-  gap: 0.375rem;
-}
 .gap-5 {
   gap: 1.25rem;
 }
@@ -1689,6 +1690,10 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.hyphens-auto {
+  -webkit-hyphens: auto;
+          hyphens: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1788,17 +1793,11 @@ video {
   --tw-border-opacity: 1;
   border-color: rgba(0, 82, 147, var(--tw-border-opacity));
 }
-.border-button {
-  border-color: #005293;
-  border-color: var(--color-button);
-}
-.border-button-hollow {
-  border-color: #006dc1;
-  border-color: var(--color-button-hollow);
+.border-button-primary {
+  border-color: var(--color-button-primary);
 }
-.border-button-inverted {
-  border-color: #ffffff;
-  border-color: var(--color-button-inverted);
+.border-button-primary--inverted {
+  border-color: var(--color-button-primary-inverted);
 }
 .border-clusterTeaserHeadline {
   border-color: #005293;
@@ -1828,6 +1827,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgba(13, 148, 136, var(--tw-border-opacity));
 }
+.border-transparent {
+  border-color: transparent;
+}
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
@@ -1836,6 +1838,10 @@ video {
   --tw-bg-opacity: 1 !important;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
 }
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
+}
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
@@ -1844,13 +1850,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.bg-button {
-  background-color: #005293;
-  background-color: var(--color-button);
+.bg-button-primary {
+  background-color: var(--color-button-primary);
 }
-.bg-button-inverted {
-  background-color: #ffffff;
-  background-color: var(--color-button-inverted);
+.bg-button-primary--dark {
+  background-color: var(--color-button-primary-dark);
+}
+.bg-button-primary--inverted {
+  background-color: var(--color-button-primary-inverted);
 }
 .bg-current {
   background-color: currentColor;
@@ -1879,18 +1886,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
 }
-.bg-green-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
-}
-.bg-grey-alabaster {
+.bg-gray-alabaster {
   --tw-bg-opacity: 1;
   background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
 }
-.bg-grey-concrete {
+.bg-gray-concrete {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 243, 243, var(--tw-bg-opacity));
 }
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
+}
 .bg-highlight-1 {
   background-color: #eaf3fa;
   background-color: var(--color-highlight-1);
@@ -1955,6 +1962,10 @@ video {
   background-color: #006eb7;
   background-color: var(--color-podcast-text);
 }
+.bg-primary {
+  background-color: #005293;
+  background-color: var(--color-primary-ds);
+}
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -1977,22 +1988,29 @@ video {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 .from-black {
-  --tw-gradient-from: #000000;
-  --tw-gradient-to: rgba(0, 0, 0, 0);
+  --tw-gradient-from: #000000 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgba(0, 0, 0, 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-purple-50 {
-  --tw-gradient-from: #faf5ff;
-  --tw-gradient-to: rgba(250, 245, 255, 0);
+  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgba(250, 245, 255, 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-white {
-  --tw-gradient-from: #ffffff;
-  --tw-gradient-to: rgba(255, 255, 255, 0);
+  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgba(255, 255, 255, 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .to-purple-100 {
-  --tw-gradient-to: #f3e8ff;
+  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
 }
 .fill-blue-congress {
   fill: #005293;
@@ -2003,18 +2021,6 @@ video {
 .fill-blue-midnight {
   fill: #023770;
 }
-.fill-button {
-  fill: #005293;
-  fill: var(--color-button);
-}
-.fill-button-hollow {
-  fill: #006dc1;
-  fill: var(--color-button-hollow);
-}
-.fill-button-inverted {
-  fill: #ffffff;
-  fill: var(--color-button-inverted);
-}
 .fill-content-nav {
   fill: #005293;
   fill: var(--color-content-nav);
@@ -2026,9 +2032,6 @@ video {
   fill: #797979;
   fill: var(--color-eventcalendar-secondary);
 }
-.fill-inherit {
-  fill: inherit;
-}
 .fill-white {
   fill: #ffffff;
 }
@@ -2109,6 +2112,10 @@ video {
   padding-top: 0px;
   padding-bottom: 0px;
 }
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2157,10 +2164,6 @@ video {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.py-px {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2405,6 +2408,10 @@ video {
   color: #ffffff !important;
   color: var(--color-stage-text) !important;
 }
+.\!text-stone-950 {
+  --tw-text-opacity: 1 !important;
+  color: rgba(12, 10, 9, var(--tw-text-opacity)) !important;
+}
 .\!text-white {
   --tw-text-opacity: 1 !important;
   color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
@@ -2429,18 +2436,20 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
 }
-.text-button {
-  color: #005293;
-  color: var(--color-button);
-}
-.text-button-hollow {
-  color: #006dc1;
-  color: var(--color-button-hollow);
-}
 .text-button-inverted {
   color: #ffffff;
   color: var(--color-button-inverted);
 }
+.text-button-primary {
+  color: var(--color-button-primary);
+}
+.text-button-primary--inverted {
+  color: var(--color-button-primary-inverted);
+}
+.text-button-secondary {
+  color: #006dc1;
+  color: var(--color-button-secondary);
+}
 .text-byline {
   color: #606060;
   color: var(--color-byline);
@@ -2461,11 +2470,11 @@ video {
   color: #cc1a14;
   color: var(--color-event-status);
 }
-.text-grey-dark {
+.text-gray-dark {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.text-grey-scorpion {
+.text-gray-scorpion {
   --tw-text-opacity: 1;
   color: rgba(96, 96, 96, var(--tw-text-opacity));
 }
@@ -2571,12 +2580,6 @@ video {
 .opacity-80 {
   opacity: 0.8;
 }
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-}
 .shadow-inner {
   --tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
   --tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
@@ -2679,13 +2682,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1681950034913;
-}
-.line-clamp-4 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
+  counter-reset: cnt1682004237175;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2917,7 +2914,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1681950034913 1;
+  counter-increment: cnt1682004237175 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2933,7 +2930,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1681950034913);
+  content: counter(cnt1682004237175);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3037,6 +3034,8 @@ video {
     --color-button: var(--color-primary-ds);
     --color-button-inverted: #ffffff;
     --color-button-hollow: #006dc1;
+    --color-button-secondary: #006dc1;
+    --color-button-ghost: #006dc1;
     /* Media-Button */
     --color-media-button: #276b9e;
     /* States */
@@ -3102,8 +3101,14 @@ video {
     --color-cluster-teaser-headline: #005293;
     /* Button */
     --color-button: var(--color-primary-ds);
+    --color-button-primary: #006dc1;
+    --color-button-primary-dark: #005293;
+    --color-button-primary-inverted: #ffffff;
+    --color-button-primary-inverted-dark: #eaf3fa;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #006dc1;
+    --color-button-secondary: #006dc1;
+    --color-button-ghost: #006dc1;
     /* Media-Button */
     --color-media-button: #006dc1;
     /* States */
@@ -3164,6 +3169,8 @@ video {
     --color-button: var(--color-primary-ds);
     --color-button-inverted: #ffffff;
     --color-button-hollow: #a00d65;
+    --color-button-secondary: #a00d65;
+    --color-button-ghost: #a00d65;
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -3219,6 +3226,8 @@ video {
     --color-button: var(--color-primary-ds);
     --color-button-inverted: #ffffff;
     --color-button-hollow: #276b9e;
+    --color-button-secondary: #276b9e;
+    --color-button-ghost: #276b9e;
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -3276,6 +3285,8 @@ video {
     --color-button: #006eb7;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #006eb7;
+    --color-button-secondary: #006eb7;
+    --color-button-ghost: #006eb7;
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -3333,6 +3344,8 @@ video {
     --color-button: var(--color-primary-ds);
     --color-button-inverted: #ffffff;
     --color-button-hollow: var(--color-primary-ds);
+    --color-button-secondary: var(--color-primary-ds);
+    --color-button-ghost: var(--color-primary-ds);
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -3388,6 +3401,8 @@ video {
     --color-button: #AB2F2D;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #AB2F2D;
+    --color-button-secondary: #AB2F2D;
+    --color-button-ghost: #AB2F2D;
     /* Media-Button */
     --color-media-button: #AB2F2D;
     /* States */
@@ -3443,6 +3458,8 @@ video {
     --color-button: #007A7C;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #007A7C;
+    --color-button-secondary: #007A7C;
+    --color-button-ghost: #007A7C;
     /* Media-Button */
     --color-media-button: #007A7C;
     /* States */
@@ -3500,6 +3517,8 @@ video {
     --color-button: var(--color-primary-ds);
     --color-button-inverted: #ffffff;
     --color-button-hollow: var(--color-primary-ds);
+    --color-button-secondary: var(--color-primary-ds);
+    --color-button-ghost: var(--color-primary-ds);
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -3557,6 +3576,8 @@ video {
     --color-button: #916B00;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #916B00;
+    --color-button-secondary: #916B00;
+    --color-button-ghost: #916B00;
     /* Media-Button */
     --color-media-button: #916B00;
     /* States */
@@ -3613,6 +3634,8 @@ video {
     --color-button: #8C033D;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #8C033D;
+    --color-button-secondary: #8C033D;
+    --color-button-ghost: #8C033D;
     /* Media-Button */
     --color-media-button: #c95702;
     /* States */
@@ -3671,6 +3694,8 @@ video {
     --color-button: #9b0112;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #9b0112;
+    --color-button-secondary: #9b0112;
+    --color-button-ghost: #9b0112;
     /* Media-Button */
     --color-media-button: var(--color-primary-ds);
     /* States */
@@ -3729,6 +3754,8 @@ video {
     --color-button: #29675d;
     --color-button-inverted: #ffffff;
     --color-button-hollow: #29675d;
+    --color-button-secondary: #29675d;
+    --color-button-ghost: #29675d;
     /* Media-Button */
     --color-media-button: #0F6157;
     /* States */
@@ -3787,6 +3814,8 @@ video {
     --color-button: var(--color-link);
     --color-button-inverted: #ffffff;
     --color-button-hollow: var(--color-link);
+    --color-button-secondary: var(--color-link);
+    --color-button-ghost: var(--color-link);
     /* Media-Button */
     --color-media-button: #000000;
     /* States */
@@ -3865,22 +3894,22 @@ video {
     }
   }
 }
-.placeholder\:text-grey-dark::-webkit-input-placeholder {
+.placeholder\:text-gray-dark::-webkit-input-placeholder {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-grey-dark::-moz-placeholder {
+.placeholder\:text-gray-dark::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-grey-dark::placeholder {
+.placeholder\:text-gray-dark::placeholder {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.backdrop\:bg-grey-scorpion\/90::-webkit-backdrop {
+.backdrop\:bg-gray-scorpion\/90::-webkit-backdrop {
   background-color: rgba(96, 96, 96, 0.9);
 }
-.backdrop\:bg-grey-scorpion\/90::backdrop {
+.backdrop\:bg-gray-scorpion\/90::backdrop {
   background-color: rgba(96, 96, 96, 0.9);
 }
 .first\:border-t:first-child {
@@ -3910,9 +3939,14 @@ video {
 .empty\:hidden:empty {
   display: none;
 }
-.hover\:border-button-hollow:hover {
-  border-color: #006dc1;
-  border-color: var(--color-button-hollow);
+.hover\:border-button-primary:hover {
+  border-color: var(--color-button-primary);
+}
+.hover\:border-button-primary--dark:hover {
+  border-color: var(--color-button-primary-dark);
+}
+.hover\:border-button-primary--inverted-dark:hover {
+  border-color: var(--color-button-primary-inverted-dark);
 }
 .hover\:bg-black:hover {
   --tw-bg-opacity: 1;
@@ -3922,40 +3956,25 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:bg-button:hover {
-  background-color: #005293;
-  background-color: var(--color-button);
+.hover\:bg-button-primary--dark:hover {
+  background-color: var(--color-button-primary-dark);
 }
-.hover\:bg-button-inverted:hover {
-  background-color: #ffffff;
-  background-color: var(--color-button-inverted);
+.hover\:bg-button-primary--inverted:hover {
+  background-color: var(--color-button-primary-inverted);
+}
+.hover\:bg-button-primary--inverted-dark:hover {
+  background-color: var(--color-button-primary-inverted-dark);
 }
 .hover\:bg-slate-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
 }
-.hover\:fill-button-hollow:hover {
-  fill: #006dc1;
-  fill: var(--color-button-hollow);
-}
-.hover\:fill-button-inverted:hover {
-  fill: #ffffff;
-  fill: var(--color-button-inverted);
-}
 .hover\:fill-media-button:hover {
   fill: #276b9e;
   fill: var(--color-media-button);
 }
-.hover\:fill-orange-spicyCarrot:hover {
-  fill: #d34600;
-}
-.hover\:text-button-hollow:hover {
-  color: #006dc1;
-  color: var(--color-button-hollow);
-}
-.hover\:text-button-inverted:hover {
-  color: #ffffff;
-  color: var(--color-button-inverted);
+.hover\:text-button-primary:hover {
+  color: var(--color-button-primary);
 }
 .hover\:text-toplineColor:hover {
   color: #006dc1;
@@ -3985,6 +4004,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.active\:scale-95:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:bg-button-primary--dark:active {
+  background-color: var(--color-button-primary-dark);
+}
+.active\:bg-button-primary--inverted:active {
+  background-color: var(--color-button-primary-inverted);
+}
+.active\:bg-button-primary--inverted-dark:active {
+  background-color: var(--color-button-primary-inverted-dark);
+}
 .active\:font-bold:active {
   font-weight: 700;
 }
@@ -3992,6 +4025,9 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
 }
+.active\:text-button-primary:active {
+  color: var(--color-button-primary);
+}
 .disabled\:hidden:disabled {
   display: none;
 }
@@ -4011,6 +4047,13 @@ video {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.group:hover .group-hover\:fill-media-button {
+  fill: #276b9e;
+  fill: var(--color-media-button);
+}
+.group:hover .group-hover\:fill-orange-spicyCarrot {
+  fill: #d34600;
+}
 .group:hover .group-hover\:text-white {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -4392,19 +4435,17 @@ video {
     grid-column: span 9 / span 9;
   }
 
-  .md\:mx-0 {
-    margin-left: 0px;
-    margin-right: 0px;
+  .md\:m-3 {
+    margin: 0.75rem;
   }
 
-  .md\:mx-3 {
-    margin-left: 0.75rem;
-    margin-right: 0.75rem;
+  .md\:m-4 {
+    margin: 1rem;
   }
 
-  .md\:mx-4 {
-    margin-left: 1rem;
-    margin-right: 1rem;
+  .md\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
   }
 
   .md\:mx-5 {
@@ -4412,16 +4453,6 @@ video {
     margin-right: 1.25rem;
   }
 
-  .md\:my-3 {
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .md\:my-4 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
   .md\:-mt-40 {
     margin-top: -10rem;
   }
@@ -4438,6 +4469,13 @@ video {
     margin-top: 0px;
   }
 
+  .md\:line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+
   .md\:inline-block {
     display: inline-block;
   }
@@ -4596,8 +4634,10 @@ video {
   }
 
   .md\:from-white {
-    --tw-gradient-from: #ffffff;
-    --tw-gradient-to: rgba(255, 255, 255, 0);
+    --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
+    --tw-gradient-from-position:  ;
+    --tw-gradient-to: rgba(255, 255, 255, 0)  var(--tw-gradient-from-position);
+    --tw-gradient-to-position:  ;
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   }
 
@@ -4698,13 +4738,6 @@ video {
   .md\:filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
-
-  .md\:line-clamp-4 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 4;
-  }
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -4865,6 +4898,20 @@ video {
     margin-top: 2.5rem;
   }
 
+  .lg\:line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .lg\:line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -5169,20 +5216,6 @@ video {
     transition-duration: 500ms;
   }
 
-  .lg\:line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-
-  .lg\:line-clamp-5 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 5;
-  }
-
     .lg\:col-main {
         grid-column: main;
     }