@prokodo/ui 0.0.49 → 0.0.50

package/dist/ui.css

@@ -1,30 +1,8 @@
-@charset "UTF-8";/* stylelint-disable */
-/**
- * Calculates a rem-based value by a given pixel size.
- */
+@charset "UTF-8";
 /* stylelint-disable */
 /**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
+ * Calculates a rem-based value by a given pixel size.
  */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 /* stylelint-disable */
 /**
  * Applies flex-column and gap.
@@ -147,14 +125,6 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes accordionBorderShift {
-  from {
-    background-position: 0 0, 0% 0;
-  }
-  to {
-    background-position: 0 0, 200% 0;
-  }
-}
 .prokodo-Accordion {
   display: flex;
   flex-direction: column;
@@ -176,29 +146,28 @@
   justify-content: space-between;
   padding: 16px;
   cursor: pointer;
-  background-size: 200% 100%;
-  background-image: linear-gradient(to left, var(--color-primary-500) 25%, var(--color-secondary-500) 50%, var(--color-white) 50%);
-  transition: background-color 0.3s ease;
-  /* Reserve border space (no layout jump) */
+  /* reserve space for a “border” without layout jump */
   border: 2px solid transparent;
   border-radius: 12px;
-  /* Two-background trick: inner fill + border gradient */
+  /* two-background trick: inner fill + border gradient */
   background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white))) padding-box, linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500)) border-box;
-  /* Hide the border layer initially */
+  /* hide the border layer initially */
   background-size: 100% 100%, 0% 100%;
   background-position: 0 0, 0 0;
   background-repeat: no-repeat;
   transition: color 0.3s ease, background-size 0.35s ease;
 }
 .prokodo-Accordion__header:hover, .prokodo-Accordion__header:focus-visible {
-  /* Reveal + animate ONLY the border layer */
+  /* reveal the border layer */
   background-size: 100% 100%, 200% 100%;
+  /* animation name is defined in the EFFECTS sheet */
   animation: accordionBorderShift 2s linear;
+  outline: none;
 }
 .prokodo-Accordion__header--is-expanded {
   position: relative;
   z-index: 2;
-  /* Keep border visible, stop the animation */
+  /* keep border visible and settled */
   background-size: 100% 100%, 100% 100%;
   background-position: 0 0, 100% 0;
   border-radius: 12px 12px 0 0;
@@ -281,33 +250,11 @@
   padding: 8px 16px;
   background-color: var(--color-grey-100);
   border-top: 1px solid var(--color-grey-200);
-}/* stylelint-disable */
-/**
- * Calculates a rem-based value by a given pixel size.
- */
-/* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
 }
+/* stylelint-disable */
 /**
- * Fade in
+ * Calculates a rem-based value by a given pixel size.
  */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 /* stylelint-disable */
 /**
  * Applies flex-column and gap.
@@ -432,78 +379,38 @@
  */
 .prokodo-Headline {
   margin: 0;
-}
-.prokodo-Headline--is-highlighted {
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.prokodo-Headline--primary--highlighted, .prokodo-Headline--secondary--highlighted, .prokodo-Headline--success--highlighted, .prokodo-Headline--warning--highlighted, .prokodo-Headline--error--highlighted {
-  filter: drop-shadow(var(--elevation-1--text));
+  /* Basale Farb-Varianten (ohne Gradients) */
 }
 .prokodo-Headline--inherit {
   color: var(--color-grey-700);
 }
-.prokodo-Headline--inherit--highlighted {
-  background-image: var(--gradient-text-grey);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 .prokodo-Headline--primary {
   color: var(--color-primary-500);
 }
-.prokodo-Headline--primary--highlighted {
-  background-image: var(--gradient-text-primary-secondary);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 .prokodo-Headline--secondary {
   color: var(--color-secondary-500);
 }
-.prokodo-Headline--secondary--highlighted {
-  background-image: var(--gradient-text-primary);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 .prokodo-Headline--success {
   color: var(--color-success);
 }
-.prokodo-Headline--success--highlighted {
-  background-image: var(--gradient-text-success);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 .prokodo-Headline--info {
   color: var(--color-grey-300);
 }
 .prokodo-Headline--warning {
   color: var(--color-warning);
 }
-.prokodo-Headline--warning--highlighted {
-  background-image: var(--gradient-text-warning);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 .prokodo-Headline--error {
   color: var(--color-error);
 }
-.prokodo-Headline--error--highlighted {
-  background-image: var(--gradient-text-error);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 .prokodo-Headline--white {
-  color: #FFFFFF;
+  color: #fff;
 }
 .prokodo-Headline--black {
   color: var(--color-black);
 }
+.prokodo-Headline {
+  /* Größen */
+}
 .prokodo-Headline--xs {
   font-weight: 400;
   font-size: 1rem;
@@ -610,6 +517,9 @@
     font-size: 2.75rem;
   }
 }
+.prokodo-Headline {
+  /* Alignment */
+}
 .prokodo-Headline--center {
   text-align: center;
   justify-content: center;
@@ -622,29 +532,6 @@
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -766,7 +653,10 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-RichText__p {
+.prokodo-RichText__a, .prokodo-RichText a {
+  color: var(--color-primary-500);
+}
+.prokodo-RichText__p, .prokodo-RichText p {
   color: var(--color-grey-500);
   font-weight: 400;
   font-size: 1.125rem;
@@ -779,21 +669,21 @@
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-RichText__p {
+  .prokodo-RichText__p, .prokodo-RichText p {
     font-size: 1rem;
     line-height: 1.45;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-RichText__p {
+  .prokodo-RichText__p, .prokodo-RichText p {
     font-size: 1rem;
     line-height: 1.45;
   }
 }
-html[data-theme=dark] .prokodo-RichText__p {
+html[data-theme=dark] .prokodo-RichText__p, html[data-theme=dark] .prokodo-RichText p {
   color: var(--color-grey-700);
 }
-.prokodo-RichText__pre {
+.prokodo-RichText__pre, .prokodo-RichText pre {
   color: var(--color-grey-500);
   padding: 1rem 0.75rem;
   border: 1px solid var(--color-grey-200);
@@ -812,37 +702,37 @@ html[data-theme=dark] .prokodo-RichText__p {
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-RichText__pre {
+  .prokodo-RichText__pre, .prokodo-RichText pre {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-RichText__pre {
+  .prokodo-RichText__pre, .prokodo-RichText pre {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-RichText__pre {
+html[data-theme=dark] .prokodo-RichText__pre, html[data-theme=dark] .prokodo-RichText pre {
   color: var(--color-grey-300);
   background-color: var(--color-grey-50);
 }
-.prokodo-RichText__ul, .prokodo-RichText__ol {
+.prokodo-RichText__ul, .prokodo-RichText__ol, .prokodo-RichText ul, .prokodo-RichText ol {
   padding: 0;
   list-style-type: none;
   color: var(--color-grey-500);
 }
-.prokodo-RichText__li {
+.prokodo-RichText__li, .prokodo-RichText li {
   display: flex;
   align-items: flex-start;
 }
-.prokodo-RichText__li__icon {
+.prokodo-RichText__li__icon, .prokodo-RichText li__icon {
   min-width: 20px;
   max-width: 20px;
   margin-right: 0.5rem;
   margin-top: 0.25rem;
 }
-.prokodo-RichText__ol__decimal {
+.prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -864,71 +754,48 @@ html[data-theme=dark] .prokodo-RichText__pre {
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-RichText__ol__decimal {
+  .prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-RichText__ol__decimal {
+  .prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
-.prokodo-RichText__ol li {
+.prokodo-RichText__ol li, .prokodo-RichText ol li {
   display: -webkit-box;
 }
-.prokodo-RichText__ol li icon--inherit {
+.prokodo-RichText__ol li icon--inherit, .prokodo-RichText ol li icon--inherit {
   color: var(--color-grey-900);
 }
-.prokodo-RichText__ol li icon--primary {
+.prokodo-RichText__ol li icon--primary, .prokodo-RichText ol li icon--primary {
   color: var(--color-primary-500);
 }
-.prokodo-RichText__ol li icon--secondary {
+.prokodo-RichText__ol li icon--secondary, .prokodo-RichText ol li icon--secondary {
   color: var(--color-secondary-500);
 }
-.prokodo-RichText__ol li icon--info {
+.prokodo-RichText__ol li icon--info, .prokodo-RichText ol li icon--info {
   color: var(--color-grey-500);
 }
-.prokodo-RichText__ol li icon--success {
+.prokodo-RichText__ol li icon--success, .prokodo-RichText ol li icon--success {
   color: var(--color-success);
 }
-.prokodo-RichText__ol li icon--error {
+.prokodo-RichText__ol li icon--error, .prokodo-RichText ol li icon--error {
   color: var(--color-error);
 }
-.prokodo-RichText__ol li icon--warning {
+.prokodo-RichText__ol li icon--warning, .prokodo-RichText ol li icon--warning {
   color: var(--color-warning);
 }
-.prokodo-RichText__ol li icon--white {
+.prokodo-RichText__ol li icon--white, .prokodo-RichText ol li icon--white {
   color: var(--color-white);
 }/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -1086,29 +953,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -1300,29 +1144,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -1641,29 +1462,6 @@ html[data-theme=dark] .prokodo-Button--icon-only {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -1844,29 +1642,6 @@ html[data-theme=dark] .prokodo-Button--icon-only {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -2052,29 +1827,6 @@ html[data-theme=dark] .prokodo-Button--icon-only {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -2241,29 +1993,6 @@ html[data-theme=dark] .prokodo-Button--icon-only {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -2385,220 +2114,23 @@ html[data-theme=dark] .prokodo-Button--icon-only {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.prokodo-Loading {
+.prokodo-Card {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  color: var(--color-white);
+  background-color: var(--color-white);
+  border-radius: 2rem;
 }
-.prokodo-Loading__gradient stop:nth-of-type(1) {
-  stop-color: var(--color-primary-500);
+html[data-theme=dark] .prokodo-Card {
+  background-color: var(--color-grey-200);
 }
-.prokodo-Loading__gradient stop:nth-of-type(2) {
-  stop-color: var(--color-grey-300);
+.prokodo-Card--inherit {
+  background-color: var(--color-grey-100);
 }
-.prokodo-Loading__gradient stop:nth-of-type(3) {
-  stop-color: var(--color-secondary-500);
+.prokodo-Card--white {
+  background-color: var(--color-white);
 }
-.prokodo-Loading__animation {
-  border-radius: 50%;
-  border: 4px solid transparent;
-  border-top: 4px solid url(#loading-gradient);
-  animation: spin 1s linear infinite;
-}
-.prokodo-Loading__animation--size-xs {
-  height: 20px !important;
-  width: 20px !important;
-}
-.prokodo-Loading__animation--size-sm {
-  height: 40px !important;
-  width: 40px !important;
-}
-.prokodo-Loading__animation--size-md {
-  height: 60px !important;
-  width: 60px !important;
-}
-.prokodo-Loading__animation--size-lg {
-  height: 80px !important;
-  width: 80px !important;
-}
-.prokodo-Loading__animation--size-xl {
-  height: 100px !important;
-  width: 100px !important;
-}/* stylelint-disable */
-/**
- * Calculates a rem-based value by a given pixel size.
- */
-/* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
-/**
- * Applies flex-column and gap.
- */
-/*
-    As example (light, primary)
-    See defined modes in designsystem/config/gradients
-*/
-/**
- * Mixin that renders a media query that target screens that are larger than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens that are smaller than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens in between the given range.
- */
-/**
- * Mixin that renders a media query that target screens that have height larger than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens that have height smaller than the
- * given size.
- */
-/* stylelint-disable */
-/* M3/Elevation Light/1 */
-/* M3/Elevation Light/2 */
-/* M3/Elevation/5 */
-/* M3/Elevation/1 Text */
-/* Inner elevations */
-/* stylelint-disable */
-/**
- * Visually hides an element but not removes them for screen readers.
- */
-/**
- * The inverse of the `hidden` helper to reset a previously hidden element to be
- * visible for users.
- */
-/**
- * Creates a selector for :hover effects depending on the current user input
- * device. If the input device is a mouse, this hover effect will appear.
- * Keyboard and touch inputs are ignored.
- *
- * Example usage:
- * .link {
- *   color: blue;
- *
- *   @include when-hovered() {
- *     color: green;
- *   }
- * }
- */
-/**
- * Creates a selector for :active effects depending on the current user input
- * device. The state applies when the input device is a mouse or keyboard. Touch
- * devices will not show a pressed state.
- *
- * Example usage:
- * .link {
- *   box-shadow: none;
- *
- *   @include when-pressed() {
- *     box-shadow: inset 0 2px 4px grey;
- *   }
- * }
- */
-/**
- * Creates a selector for :focus effects depending on the current user input
- * device. When the user navigates using a keyboard, the focus effect defined in
- * here is applied. For other input devices they don't show up.
- *
- * Example usage:
- * .link {
- *   text-decoration: none;
- *
- *   @include when-focused() {
- *     text-decoration: underline;
- *   }
- * }
- */
-/**
- * Creates a selector for :focus-within effects depending on the current user
- * input device. When the user navigates using a keyboard, the focus effect
- * defined in here is applied. For other input devices they don't show up.
- *
- * Example usage:
- * .link {
- *   img {
- *     opacity: 0.75;
- *
- *     @include when-focused-within() {
- *       opacity: 1;
- *     }
- *   }
- * }
- */
-/**
- * Wrapper for media query "prefers-reduced-motion".
- */
-/**
- * This helper hides the outline but still makes it visible for
- * Windows high-contrast users. Use this instead of `outline: 0;`.
- */
-/**
- * This helper hides the outline but still makes it visible for
- * Windows high-contrast users. Use this instead of `outline: 0;`.
- */
-/**
- * Renders an alternative, but application consistent focus-ring.
- */
-/**
- * Specifies the outer layout for all contents across breakpoints. Apply this
- * mixin to the container element, to center the contents on the screen within
- * the layout offsets.
- */
-/**
- * This mixin specifies basic text-styles for components that render a richtext
- * content.
- */
-.prokodo-Card {
-  position: relative;
-  color: var(--color-white);
-  background-color: var(--color-white);
-  border-radius: 2rem;
-}
-html[data-theme=dark] .prokodo-Card {
-  background-color: var(--color-grey-200);
-}
-.prokodo-Card--inherit {
-  background-color: var(--color-grey-100);
-}
-.prokodo-Card--white {
-  background-color: var(--color-white);
-}
-html[data-theme=dark] .prokodo-Card--white {
-  background-color: var(--color-grey-200);
+html[data-theme=dark] .prokodo-Card--white {
+  background-color: var(--color-grey-200);
 }
 .prokodo-Card__skeleton {
   position: absolute;
@@ -2643,6 +2175,9 @@ html[data-theme=dark] .prokodo-Card__background {
   outline-offset: 4px;
   border-radius: 1.5rem;
 }
+.prokodo-Card {
+  /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
+}
 .prokodo-Card__gradiant {
   position: relative;
   border-radius: 2rem;
@@ -2665,29 +2200,6 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Card--has-highlight {
   position: relative;
 }
-.prokodo-Card--has-highlight::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  padding: 2px;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-          mask-composite: exclude;
-  z-index: -1;
-  opacity: 0;
-  animation: fadeInMask 0.5s ease forwards;
-  background: var(--gradient-border-4);
-}
-@keyframes fadeInMask {
-  to {
-    opacity: 1;
-  }
-}
 .prokodo-Card--has-gradiant {
   position: relative;
 }
@@ -2697,17 +2209,18 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Card--has-shadow {
   box-shadow: var(--elevation-1);
 }
-.prokodo-Card--has-animation {
-  animation: fadeInKeyframe ease 1s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
+.prokodo-Card {
+  /* IMPORTANT: no animations in base
+     - remove fadeInAnimation()
+     - remove local @keyframes
+     - keep hooks only; effects sheet will add behavior
+  */
 }
 .prokodo-Card--is-clickable {
   cursor: pointer;
 }
 .prokodo-Card--is-clickable:hover {
   box-shadow: none;
-  opacity: 0.7;
 }
 .prokodo-Card--is-clickable:focus {
   outline: 3px solid #1E90FF;
@@ -2718,29 +2231,6 @@ html[data-theme=dark] .prokodo-Card__background {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -2862,45 +2352,25 @@ html[data-theme=dark] .prokodo-Card__background {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes skeleton-pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes skeleton-wave {
-  0% {
-    left: -100%;
-  }
-  50% {
-    left: 100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
 .prokodo-Skeleton {
   display: inline-block;
   background-color: rgba(var(--color-black), 0.11);
   border-radius: 4px;
   position: relative;
   overflow: hidden;
+  /* shimmer carrier (animation is attached in modifier) */
 }
 .prokodo-Skeleton::after {
   content: "";
   display: block;
   position: absolute;
-  top: 0;
+  inset: 0;
   left: -100%;
-  width: 100%;
-  height: 100%;
   background: linear-gradient(90deg, transparent, rgba(var(--color-white), 0.6), transparent);
 }
+.prokodo-Skeleton {
+  /* variants */
+}
 .prokodo-Skeleton--text {
   height: 1em;
   border-radius: 4px;
@@ -2911,6 +2381,9 @@ html[data-theme=dark] .prokodo-Card__background {
 .prokodo-Skeleton--circular {
   border-radius: 50%;
 }
+.prokodo-Skeleton {
+  /* animation hooks (keyframes live in effects sheet) */
+}
 .prokodo-Skeleton--pulse {
   animation: skeleton-pulse 1.5s ease-in-out infinite;
 }
@@ -2919,44 +2392,26 @@ html[data-theme=dark] .prokodo-Card__background {
 }
 .prokodo-Skeleton--none::after {
   display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Skeleton--pulse, .prokodo-Skeleton--wave::after {
+    animation: none !important;
+  }
 }/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
 /**
- * Gradient move, mainly for text
+ * Applies flex-column and gap.
  */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
 /**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
-/**
- * Applies flex-column and gap.
- */
-/*
-    As example (light, primary)
-    See defined modes in designsystem/config/gradients
-*/
-/**
- * Mixin that renders a media query that target screens that are larger than the
- * given size.
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
  */
 /**
  * Mixin that renders a media query that target screens that are smaller than the
@@ -3182,29 +2637,6 @@ html[data-theme=dark] .prokodo-Card__background {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -3470,29 +2902,6 @@ html[data-theme=dark] .prokodo-Card__background {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -3757,6 +3166,9 @@ html[data-theme=dark] .prokodo-Input__input__node {
   display: flex;
   justify-content: space-between;
 }
+.prokodo-Input__footer--counter-only {
+  justify-content: flex-end;
+}
 .prokodo-Input__helperText__wrapper {
   padding-top: 0.25rem;
   margin-bottom: 0 !important;
@@ -3831,29 +3243,6 @@ html[data-theme=dark] .prokodo-Input__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -4024,29 +3413,6 @@ html[data-theme=dark] .prokodo-Label__text {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -4364,29 +3730,6 @@ html[data-theme=dark] .prokodo-Label__text {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -4508,85 +3851,8 @@ html[data-theme=dark] .prokodo-Label__text {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes slideInLeft {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes slideOutLeft {
-  0% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-@keyframes slideInRight {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes slideOutRight {
-  0% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-@keyframes slideInTop {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slideOutTop {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-@keyframes slideInBottom {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slideOutBottom {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
+.prokodo-Drawer {
+  /* Backdrop */
 }
 .prokodo-Drawer__backdrop {
   position: fixed;
@@ -4606,6 +3872,9 @@ html[data-theme=dark] .prokodo-Label__text {
     transition: none !important;
   }
 }
+.prokodo-Drawer {
+  /* Container */
+}
 .prokodo-Drawer__container {
   position: fixed;
   background-color: var(--color-white);
@@ -4614,12 +3883,16 @@ html[data-theme=dark] .prokodo-Label__text {
   pointer-events: none;
   width: 300px;
   height: 100%;
-  top: 0;
-  left: 0;
 }
 .prokodo-Drawer__container--open {
   pointer-events: auto;
 }
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Drawer__container--open {
+    transform: translateX(0) translateY(0);
+    opacity: 1;
+  }
+}
 .prokodo-Drawer__container--fullscreen {
   width: 100vw !important;
   height: 100vh !important;
@@ -4628,6 +3901,9 @@ html[data-theme=dark] .prokodo-Label__text {
   bottom: 0 !important;
   right: 0 !important;
 }
+.prokodo-Drawer__container {
+  /* Anchor: left */
+}
 .prokodo-Drawer__container--anchor-left {
   top: 0;
   left: 0;
@@ -4636,10 +3912,13 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateX(-100%);
 }
 .prokodo-Drawer__container--anchor-left--open {
-  animation: slideInLeft 0.3s ease forwards;
+  animation: DrawerSlideInLeft 0.3s ease forwards;
 }
 .prokodo-Drawer__container--anchor-left:not(.prokodo-Drawer__container--anchor-left--open) {
-  animation: slideOutLeft 0.3s ease forwards;
+  animation: DrawerSlideOutLeft 0.3s ease forwards;
+}
+.prokodo-Drawer__container {
+  /* Anchor: right */
 }
 .prokodo-Drawer__container--anchor-right {
   top: 0;
@@ -4650,10 +3929,13 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateX(100%);
 }
 .prokodo-Drawer__container--anchor-right--open {
-  animation: slideInRight 0.3s ease forwards;
+  animation: DrawerSlideInRight 0.3s ease forwards;
 }
 .prokodo-Drawer__container--anchor-right:not(.prokodo-Drawer__container--anchor-right--open) {
-  animation: slideOutRight 0.3s ease forwards;
+  animation: DrawerSlideOutRight 0.3s ease forwards;
+}
+.prokodo-Drawer__container {
+  /* Anchor: top */
 }
 .prokodo-Drawer__container--anchor-top {
   top: 0;
@@ -4663,10 +3945,13 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateY(-100%);
 }
 .prokodo-Drawer__container--anchor-top--open {
-  animation: slideInTop 0.3s ease forwards;
+  animation: DrawerSlideInTop 0.3s ease forwards;
 }
 .prokodo-Drawer__container--anchor-top:not(.prokodo-Drawer__container--anchor-top--open) {
-  animation: slideOutTop 0.3s ease forwards;
+  animation: DrawerSlideOutTop 0.3s ease forwards;
+}
+.prokodo-Drawer__container {
+  /* Anchor: bottom */
 }
 .prokodo-Drawer__container--anchor-bottom {
   bottom: 0;
@@ -4676,26 +3961,19 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateY(100%);
 }
 .prokodo-Drawer__container--anchor-bottom--open {
-  animation: slideInBottom 0.3s ease forwards;
+  animation: DrawerSlideInBottom 0.3s ease forwards;
 }
 .prokodo-Drawer__container--anchor-bottom:not(.prokodo-Drawer__container--anchor-bottom--open) {
-  animation: slideOutBottom 0.3s ease forwards;
+  animation: DrawerSlideOutBottom 0.3s ease forwards;
 }
 @media (prefers-reduced-motion: reduce) {
   .prokodo-Drawer__container {
-    animation: none;
-    transition: none;
+    animation: none !important;
+    transition: none !important;
   }
 }
-.prokodo-Drawer__container--open {
-  pointer-events: auto;
-}
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Drawer__container--open {
-    transform: translateY(0);
-    transform: translateX(0);
-    opacity: 1;
-  }
+.prokodo-Drawer {
+  /* Header */
 }
 .prokodo-Drawer__header {
   display: flex;
@@ -4704,6 +3982,9 @@ html[data-theme=dark] .prokodo-Label__text {
   padding: 1rem;
   border-bottom: 1px solid var(--color-grey-200);
 }
+.prokodo-Drawer {
+  /* Content */
+}
 .prokodo-Drawer__content {
   padding: 1rem;
   overflow-y: auto;
@@ -4714,29 +3995,6 @@ html[data-theme=dark] .prokodo-Label__text {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -4937,29 +4195,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -5414,29 +4649,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -5587,30 +4799,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
  */
 /* stylelint-disable */
 /**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
-/**
- * Applies flex-column and gap.
+ * Applies flex-column and gap.
  */
 /*
     As example (light, primary)
@@ -5737,29 +4926,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -5977,6 +5143,9 @@ html[data-theme=dark] .prokodo-Select__helperText {
     height: auto;
     left: auto;
     text-indent: inherit;
+    text-align: center;
+    margin-left: 50%;
+    min-width: 100px;
   }
 }
 .prokodo-Slider__input {
@@ -6058,29 +5227,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -6335,29 +5481,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -6686,29 +5809,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -6876,29 +5976,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -7266,29 +6343,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -7419,29 +6473,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -7637,29 +6668,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -7788,29 +6796,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -7965,29 +6950,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -8253,29 +7215,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -8431,29 +7370,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -8695,29 +7611,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -8914,29 +7807,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -9106,30 +7976,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
  */
 /* stylelint-disable */
 /**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
-/**
- * Applies flex-column and gap.
+ * Applies flex-column and gap.
  */
 /*
     As example (light, primary)
@@ -9332,29 +8179,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -9559,29 +8383,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -9878,29 +8679,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -10120,29 +8898,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -10489,29 +9244,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * Calculates a rem-based value by a given pixel size.
  */
 /* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/* stylelint-disable */
 /**
  * Applies flex-column and gap.
  */
@@ -10666,7 +9398,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-Table__head__cell {
   padding: 1.5rem 0.5rem;
   font-weight: 500;
-  text-align: center;
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -10677,6 +9408,9 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-align: left;
   text-decoration: none;
 }
+.prokodo-Table__head__cell {
+  text-align: center;
+}
 .prokodo-Table__head__cell:first-child {
   color: var(--color-primary-500);
   text-align: left;
@@ -10717,24 +9451,840 @@ html[data-theme=dark] .prokodo-List__item__icon {
   }
 }/* stylelint-disable */
 /**
- * Calculates a rem-based value by a given pixel size.
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-TableCell {
+  text-align: center;
+}
+.prokodo-TableCell__inner {
+  display: inline-flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem 0.5rem;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-TableCell__inner {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-TableCell__inner {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+.prokodo-TableCell:first-child > span {
+  font-weight: 500;
+  text-align: left;
+  align-items: baseline;
+}
+.prokodo-TableCell__icon {
+  padding-bottom: 1rem;
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Teaser {
+  overflow: hidden;
+}
+.prokodo-Teaser__card {
+  padding: 0;
+}
+.prokodo-Teaser__card__content {
+  padding: 1rem;
+}
+.prokodo-Teaser__image {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.prokodo-Teaser__image__wrapper {
+  position: relative;
+  width: 100%;
+  height: 230px;
+}
+.prokodo-Teaser__image__caption {
+  bottom: 0.5rem;
+  text-align: right;
+  padding-right: 0.5rem;
+  width: calc(100% - 0.5rem);
+}
+.prokodo-Teaser__animation {
+  width: 100%;
+  height: 230px;
+}
+.prokodo-Teaser__headline--has-lineClamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-Teaser__content {
+  text-align: center;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Teaser__content {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Teaser__content {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+.prokodo-Teaser__content--has-lineClamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-Teaser__content--align-left {
+  text-align: left;
+}
+.prokodo-Teaser__content--align-right {
+  text-align: right;
+}
+.prokodo-Teaser__link {
+  display: flex;
+  align-items: center;
+}
+.prokodo-Teaser__link__icon {
+  margin-right: 0.25rem;
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+/* Keep this out of the critical/render-blocking bundle. */
+@keyframes accordionBorderShift {
+  from {
+    background-position: 0 0, 0% 0;
+  }
+  to {
+    background-position: 0 0, 200% 0;
+  }
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+/* Headline.effects.module.scss */
+.prokodo-Headline {
+  /* Highlight-Grundlage */
+}
+.prokodo-Headline--is-highlighted {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Headline {
+  /* Varianten mit Highlight (mit Gradients/Shadow) */
+}
+.prokodo-Headline--inherit--highlighted {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Headline--primary--highlighted {
+  background-image: var(--gradient-text-primary-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(var(--elevation-1--text));
+}
+.prokodo-Headline--secondary--highlighted {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(var(--elevation-1--text));
+}
+.prokodo-Headline--success--highlighted {
+  background-image: var(--gradient-text-success);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(var(--elevation-1--text));
+}
+.prokodo-Headline--warning--highlighted {
+  background-image: var(--gradient-text-warning);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(var(--elevation-1--text));
+}
+.prokodo-Headline--error--highlighted {
+  background-image: var(--gradient-text-error);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(var(--elevation-1--text));
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
  */
-/* stylelint-disable */
 /**
- * Gradient move, mainly for text
+ * Renders an alternative, but application consistent focus-ring.
  */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
 /**
- * Fade in
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
  */
-@keyframes fadeInKeyframe {
+.prokodo-Card {
+  /* Reveal animation (what used to be &--has-animation + fadeInAnimation) */
+}
+.prokodo-Card--has-animation {
+  animation: Card_fadeInAnimation 0.5s;
+}
+.prokodo-Card {
+  /* Highlight border fade-in that previously defined @keyframes inline */
+}
+.prokodo-Card--has-highlight::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  opacity: 0;
+  /* If gradientBorderVar injects animated gradient, it's fine here */
+  background: var(--gradient-border-4);
+  animation: Card_fadeInMask 0.5s ease forwards;
+}
+.prokodo-Card {
+  /**
+  * Fade in
+  */
+}
+@keyframes Card_fadeInAnimation {
   0% {
     opacity: 0;
   }
@@ -10742,6 +10292,18 @@ html[data-theme=dark] .prokodo-List__item__icon {
     opacity: 1;
   }
 }
+@keyframes Card_fadeInMask {
+  to {
+    opacity: 1;
+  }
+}
+.prokodo-Card {
+  /* If your gradient mixins animate bg-position, that's okay here too.
+     (If they are static, it also doesn't hurt keeping them in base.) */
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
 /* stylelint-disable */
 /**
  * Applies flex-column and gap.
@@ -10864,81 +10426,38 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-TableCell {
-  text-align: center;
-}
-.prokodo-TableCell:first-child {
-  font-weight: 500;
-  text-align: left;
-  font-weight: 400;
-  font-size: 1.125rem;
-  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.45;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-.prokodo-TableCell__inner {
-  display: inline-flex;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem 0.5rem;
-  font-weight: 400;
-  font-size: 1.125rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-TableCell__inner {
-    font-size: 1rem;
-    line-height: 1.45;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-TableCell__inner {
-    font-size: 1rem;
-    line-height: 1.45;
+/* Pulse opacity */
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
   }
-}
-.prokodo-TableCell__icon {
-  padding-bottom: 1rem;
-}/* stylelint-disable */
-/**
- * Calculates a rem-based value by a given pixel size.
- */
-/* stylelint-disable */
-/**
- * Gradient move, mainly for text
- */
-@keyframes gradientMove {
-  from {
-    background-position: 0% 50%;
+  50% {
+    opacity: 0.4;
   }
-  to {
-    background-position: 100% 50%;
+  100% {
+    opacity: 1;
   }
 }
-/**
- * Fade in
- */
-@keyframes fadeInKeyframe {
+/* Shimmer sweep */
+@keyframes skeleton-wave {
   0% {
-    opacity: 0;
+    left: -100%;
+  }
+  50% {
+    left: 100%;
   }
   100% {
-    opacity: 1;
+    left: 100%;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+  }
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
 /* stylelint-disable */
 /**
  * Applies flex-column and gap.
@@ -11061,80 +10580,96 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-Teaser {
-  overflow: hidden;
-}
-.prokodo-Teaser__card {
-  padding: 0;
+/* Keep all keyframes/effects out of the render-blocking bundle. Make them GLOBAL. */
+ {
+  /* Left */
 }
-.prokodo-Teaser__card__content {
-  padding: 1rem;
-}
-.prokodo-Teaser__image {
-  -o-object-fit: cover;
-     object-fit: cover;
+@keyframes DrawerSlideInLeft {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
-.prokodo-Teaser__image__wrapper {
-  position: relative;
-  width: 100%;
-  height: 230px;
+@keyframes DrawerSlideOutLeft {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
 }
-.prokodo-Teaser__image__caption {
-  bottom: 0.5rem;
-  text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+ {
+  /* Right */
 }
-.prokodo-Teaser__animation {
-  width: 100%;
-  height: 230px;
+@keyframes DrawerSlideInRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
-.prokodo-Teaser__headline--has-lineClamp {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+@keyframes DrawerSlideOutRight {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 }
-.prokodo-Teaser__content {
-  text-align: center;
-  font-weight: 400;
-  font-size: 1.125rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
+ {
+  /* Top */
 }
-@media screen and (min-width: 480px) {
-  .prokodo-Teaser__content {
-    font-size: 1rem;
-    line-height: 1.45;
+@keyframes DrawerSlideInTop {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
   }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Teaser__content {
-    font-size: 1rem;
-    line-height: 1.45;
+  100% {
+    transform: translateY(0);
+    opacity: 1;
   }
 }
-.prokodo-Teaser__content--has-lineClamp {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.prokodo-Teaser__content--align-left {
-  text-align: left;
+@keyframes DrawerSlideOutTop {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
 }
-.prokodo-Teaser__content--align-right {
-  text-align: right;
+ {
+  /* Bottom */
 }
-.prokodo-Teaser__link {
-  display: flex;
-  align-items: center;
+@keyframes DrawerSlideInBottom {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
-.prokodo-Teaser__link__icon {
-  margin-right: 0.25rem;
+@keyframes DrawerSlideOutBottom {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
 }